/* PowderedPurple premium refresh — scoped to .pp-refresh */
.pp-refresh{
  --pp-ink:#211631;--pp-ink-2:#493b58;--pp-paper:#fffdf9;--pp-cream:#f5efe8;
  --pp-plum:#4b246f;--pp-violet:#7b3fc6;--pp-lilac:#cdb3ec;--pp-rose:#c6546d;
  --pp-sage:#758a55;--pp-amber:#d79a37;--pp-line:rgba(33,22,49,.14);
  --pp-shadow:0 30px 80px -46px rgba(33,22,49,.55);--pp-radius:22px;
  background:var(--pp-cream);color:var(--pp-ink);font-family:Inter,system-ui,-apple-system,sans-serif;
}
.pp-refresh *{box-sizing:border-box}
.pp-refresh h1,.pp-refresh h2,.pp-refresh h3,.pp-refresh h4{font-family:Fraunces,Georgia,serif;color:var(--pp-ink);letter-spacing:-.025em}
.pp-refresh a{text-decoration:none;color:inherit}
.pp-refresh button,.pp-refresh input,.pp-refresh select{font:inherit}
.pp-refresh .container{width:min(100% - 40px,1220px);margin-inline:auto;padding:0}
.pp-refresh .skip-link{position:fixed;top:10px;left:10px;z-index:9999;background:#fff;padding:10px 14px;border-radius:8px;transform:translateY(-160%)}
.pp-refresh .skip-link:focus{transform:none}
.pp-refresh .nav{position:sticky;top:0;z-index:60;background:rgba(250,246,241,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--pp-line);box-shadow:0 8px 22px rgba(40,22,58,.035)}
.pp-refresh .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--pp-gold);opacity:.8}
.pp-refresh .nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}
.pp-refresh .logo{display:flex;align-items:center;gap:11px;position:relative}.pp-refresh .logo::after{content:"";position:absolute;left:51px;right:0;bottom:-8px;height:1px;background:var(--pp-rose);transform:scaleX(0);transform-origin:left}.pp-refresh .logo:hover::after,.pp-refresh .logo:focus-visible::after{transform:scaleX(1)}.pp-refresh .logo-img{width:40px;height:40px;object-fit:contain}
.pp-refresh .logo-text{font:600 1.14rem Fraunces,serif}.pp-refresh .logo-text span{color:var(--pp-rose)}
.pp-refresh .nav-links{display:flex;gap:8px;align-items:center}.pp-refresh .nav-links>a,.pp-refresh .nav-dropdown-link{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;font-size:.85rem;font-weight:750;color:var(--pp-ink-2);letter-spacing:.01em}.pp-refresh .nav-links>a::after,.pp-refresh .nav-dropdown-link::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:var(--pp-rose);transform:scaleX(0);transform-origin:center}.pp-refresh .nav-links>a:hover,.pp-refresh .nav-links>a[aria-current="page"],.pp-refresh .nav-dropdown-link:hover,.pp-refresh .nav-dropdown-link[aria-current="page"]{color:var(--pp-violet);background:#f4edf7}.pp-refresh .nav-links>a:hover::after,.pp-refresh .nav-links>a[aria-current="page"]::after,.pp-refresh .nav-dropdown-link:hover::after,.pp-refresh .nav-dropdown-link[aria-current="page"]::after{transform:scaleX(1)}.pp-refresh .nav-links>a:focus-visible,.pp-refresh .nav-dropdown-link:focus-visible,.pp-refresh .nav-dropdown-toggle:focus-visible{outline:2px solid var(--pp-violet);outline-offset:3px}
.pp-refresh .nav-toggle{display:none;border:0;background:transparent;padding:10px}.pp-refresh .nav-toggle span{display:block;width:24px;height:2px;background:var(--pp-ink);margin:5px}
.pp-refresh .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.pp-refresh .btn:hover{transform:translateY(-2px)}.pp-refresh .btn-primary{background:var(--pp-ink);color:#fff;box-shadow:0 14px 32px -18px rgba(33,22,49,.75)}
.pp-refresh .btn-primary:hover{background:var(--pp-plum)}.pp-refresh .btn-secondary{border-color:var(--pp-ink);background:transparent}.pp-refresh .btn-secondary:hover{background:#fff}
.pp-refresh .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--pp-violet)}
.pp-refresh .eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.pp-refresh .home-hero{position:relative;min-height:calc(100svh - 82px);display:grid;align-items:center;overflow:hidden;background:radial-gradient(circle at 68% 18%,rgba(198,84,109,.18),transparent 28%),radial-gradient(circle at 18% 74%,rgba(117,138,85,.16),transparent 26%),linear-gradient(135deg,#faf4ee,#f5ecf7 58%,#efe6da)}
/* A hero wordmark lived here as .home-hero::before, and later as a fixed
   .home-watermark overlay. Both were removed on 28 August 2026 - the homepage
   carries no brand watermark. */
.pp-refresh .hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:70px;align-items:center;padding:72px 0 64px}
.pp-refresh .hero-copy h1{font-size:clamp(3.4rem,7.3vw,7.1rem);line-height:.92;margin:18px 0 24px;max-width:10ch}
.pp-refresh .hero-copy h1 em{font-weight:500;color:var(--pp-rose)}
.pp-refresh .hero-copy>p{max-width:62ch;font-size:1.12rem;color:var(--pp-ink-2)}
.pp-refresh .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pp-refresh .hero-note{display:flex;gap:22px;margin-top:34px;padding-top:22px;border-top:1px solid var(--pp-line);font-size:.84rem;color:var(--pp-ink-2)}
.pp-refresh .hero-note strong{display:block;color:var(--pp-ink);font-size:1rem}
.pp-refresh .hero-collage{position:relative;min-height:610px}.pp-refresh .hero-card{position:absolute;overflow:hidden;border:1.5px solid var(--pp-violet);border-radius:8px;background:#fff;padding:6px;box-shadow:0 24px 46px -26px rgba(21,13,32,.8);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pp-refresh .hero-card:hover{transform:translateY(-8px) rotate(0deg)!important}.pp-refresh .hero-card img{width:100%;height:100%;object-fit:cover;display:block}
.pp-refresh .hero-card figcaption{position:absolute;left:18px;bottom:18px;background:rgba(255,253,249,.92);padding:8px 12px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pp-refresh .hero-card-a{width:52%;height:330px;left:3%;top:2%;transform:rotate(-5deg)}.pp-refresh .hero-card-b{width:48%;height:390px;right:0;top:12%;transform:rotate(4deg)}
.pp-refresh .hero-card-c{width:55%;height:260px;left:14%;bottom:2%;transform:rotate(3deg)}.pp-refresh .hero-orbit{position:absolute;right:17%;bottom:5%;width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:var(--pp-ink);color:#fff;text-align:center;font:600 1rem Fraunces,serif;animation:ppFloat 4.5s ease-in-out infinite}
@keyframes ppFloat{50%{transform:translateY(-9px)}}
.pp-refresh .ticker{overflow:hidden;border-block:1px solid var(--pp-line);background:var(--pp-ink);color:#fff}.pp-refresh .ticker-track{display:flex;width:max-content;animation:ppTicker 28s linear infinite}.pp-refresh .ticker span{padding:13px 28px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}.pp-refresh .ticker i{color:var(--pp-lilac);font-style:normal}
@keyframes ppTicker{to{transform:translateX(-50%)}}
.pp-refresh .section{padding:105px 0}.pp-refresh .section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;align-items:end;margin-bottom:48px}.pp-refresh .section-head h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.96}.pp-refresh .section-head p{color:var(--pp-ink-2);max-width:58ch}
.pp-refresh .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pp-refresh .principle{min-height:330px;padding:30px;border:1px solid var(--pp-line);background:var(--pp-paper);display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--pp-shadow)}
.pp-refresh .principle:nth-child(2){background:var(--pp-ink);color:#fff}.pp-refresh .principle:nth-child(2) h3,.pp-refresh .principle:nth-child(2) p{color:#fff}.pp-refresh .principle-index{font:500 4.7rem Fraunces,serif;color:var(--pp-lilac)}.pp-refresh .principle h3{font-size:1.6rem;margin-bottom:10px}.pp-refresh .principle p{color:var(--pp-ink-2)}
.pp-refresh .department-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.pp-refresh .department-card{position:relative;min-height:300px;padding:26px;border:1px solid var(--pp-line);background:var(--pp-paper);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s,box-shadow .3s}.pp-refresh .department-card:hover{transform:translateY(-7px);box-shadow:var(--pp-shadow)}
.pp-refresh .department-card::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;bottom:-70px;background:var(--accent);opacity:.18}.pp-refresh .department-code{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--pp-ink-2)}.pp-refresh .department-card h3{font-size:1.65rem}.pp-refresh .department-card p{color:var(--pp-ink-2);font-size:.9rem}.pp-refresh .department-link{font-weight:800;font-size:.86rem}
.pp-refresh .featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.pp-refresh .featured-product{background:var(--pp-paper);border:1px solid var(--pp-line);overflow:hidden;transition:transform .3s,box-shadow .3s}.pp-refresh .featured-product:hover{transform:translateY(-6px);box-shadow:var(--pp-shadow)}.pp-refresh .featured-product img{width:100%;height:260px;object-fit:cover;display:block}.pp-refresh .featured-product-body{padding:22px}.pp-refresh .featured-product small{display:block;color:var(--pp-violet);font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.pp-refresh .featured-product h3{font-size:1.25rem;margin-bottom:9px}.pp-refresh .featured-product p{color:var(--pp-ink-2);font-size:.88rem}
.pp-refresh .story-band{background:var(--pp-ink);color:#fff}.pp-refresh .story-band h2,.pp-refresh .story-band h3{color:#fff}.pp-refresh .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.pp-refresh .story-media-wrap{min-width:0}.pp-refresh .story-media{position:relative;min-height:520px}.pp-refresh .story-media img{position:absolute;width:72%;height:400px;object-fit:cover;border:1.5px solid var(--pp-violet);border-radius:8px;background:#fff;box-sizing:border-box;box-shadow:0 30px 70px -35px #000}.pp-refresh .story-media img:last-child{right:0;bottom:0;width:58%;height:310px;border:1.5px solid var(--pp-violet);border-radius:8px}.pp-refresh .ai-image-label{display:block;width:fit-content;max-width:100%;margin:14px 0 0;padding:9px 12px;border:1px solid var(--pp-violet);border-radius:6px;background:#f6e8ff;color:var(--pp-ink);font-size:.7rem;font-weight:700;line-height:1.35}.pp-refresh .story-band .ai-image-label{background:rgba(246,232,255,.12);border-color:var(--pp-lilac);color:#fff}.pp-refresh .story-copy p{color:rgba(255,255,255,.74);margin:20px 0 28px}.pp-refresh .story-points{display:grid;gap:16px;margin:28px 0}.pp-refresh .story-point{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}.pp-refresh .story-point b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--pp-lilac);color:var(--pp-ink)}
.pp-refresh .journal-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}.pp-refresh .journal-card{min-height:330px;background:var(--pp-ink);border:1px solid var(--pp-line);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;color:#fff;isolation:isolate}.pp-refresh .journal-card:first-child{min-height:460px}.pp-refresh .journal-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.pp-refresh .journal-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,22,49,.04) 20%,rgba(33,22,49,.9) 100%);z-index:-1}.pp-refresh .journal-card>:not(img){position:relative;z-index:1}.pp-refresh .journal-card .eyebrow{color:#fff!important}.pp-refresh .journal-card h3{font-size:1.6rem;margin:10px 0;color:#fff}.pp-refresh .journal-card p{color:rgba(255,255,255,.9)}
.pp-refresh .footer{background:#150d20;color:#fff;padding:76px 0 30px}.pp-refresh .footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:42px}.pp-refresh .footer h4,.pp-refresh .footer .footer-heading{color:#d2b8f5;font:700 .72rem Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}.pp-refresh .footer p,.pp-refresh .footer a{color:rgba(255,255,255,.68);font-size:.88rem}.pp-refresh .footer a{display:block;margin:8px 0}.pp-refresh .footer .footer-social-link{display:inline-flex;margin-top:14px}.pp-refresh .footer a:hover{color:#fff}.pp-refresh .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
.pp-refresh .footer{background:#eee7f7;color:#211631;border-top:1px solid #d4c4e8}.pp-refresh .footer .logo-text{color:#211631!important}.pp-refresh .footer h4,.pp-refresh .footer .footer-heading{color:#5d2d9d}.pp-refresh .footer p,.pp-refresh .footer a{color:#332044}.pp-refresh .footer-grid>div:first-child p{color:#4c3b5f}.pp-refresh .footer .footer-social-link{color:#5d2d9d}.pp-refresh .footer .footer-social-icon{border-color:rgba(93,45,157,.48);background:rgba(255,255,255,.62)}.pp-refresh .footer a:hover{color:#6d32b7}.pp-refresh .footer .footer-social-link:hover{color:#211631}.pp-refresh .footer-bottom{border-top-color:#d4c4e8;color:#4c3b5f}
.pp-refresh .footer .footer-social-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;width:max-content;max-width:100%;line-height:1;text-decoration:none!important}.pp-refresh .footer .footer-social-label{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}.pp-refresh .footer .footer-social-icon{width:24px!important;height:24px!important;padding:3px;fill:#5d2d9d!important;border:1.5px solid rgba(93,45,157,.58);border-radius:5px;background:rgba(255,255,255,.72)}.pp-refresh .nav,.pp-refresh .nav.scrolled{background:#eee7f7!important;border-bottom-color:#d4c4e8}.pp-refresh .nav-links{background:#eee7f7!important}
.pp-refresh .logo{align-items:center;line-height:1}.pp-refresh .logo-img{display:block;flex:0 0 40px;align-self:center}.pp-refresh .logo-text{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}.pp-refresh .footer .logo{align-items:center;line-height:1}.pp-refresh .footer .logo-text{line-height:1}.pp-refresh .footer .footer-social-link{align-items:center;line-height:1;vertical-align:middle}.pp-refresh .footer .footer-social-icon{display:block;flex:0 0 24px;align-self:center}.pp-refresh .footer .footer-social-label{display:inline-flex;align-items:center;line-height:1}
/* Catalog */
.pp-refresh .catalog-hero{background:var(--pp-ink);color:#fff;padding:78px 0 64px;position:relative;overflow:hidden}.pp-refresh .catalog-hero::after{content:"GPC";position:absolute;right:-1%;top:-42%;font:600 23rem Fraunces,serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09)}.pp-refresh .catalogue-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:58px;align-items:center}.pp-refresh .catalogue-hero-media{position:relative;min-height:390px;padding:10px;background:#f5edf8;border:1px solid rgba(215,154,55,.72);border-radius:8px;box-shadow:0 24px 56px -30px rgba(0,0,0,.65);overflow:hidden}.pp-refresh .catalogue-hero-media::after{content:"EDITORIAL CONTEXT";position:absolute;right:18px;bottom:18px;padding:8px 10px;background:rgba(33,22,49,.9);color:#fff;font:800 .62rem Inter,sans-serif;letter-spacing:.12em}.pp-refresh .catalogue-hero-media img{display:block;width:100%;height:100%;min-height:370px;object-fit:cover;border-radius:5px;filter:saturate(1.08)}.pp-refresh .catalogue-hero-copy{min-width:0}.pp-refresh .catalog-hero h1{color:#fff;font-size:clamp(3rem,7vw,6.4rem);line-height:.92;max-width:10ch;margin:18px 0}.pp-refresh .catalog-hero p{color:rgba(255,255,255,.72);max-width:62ch}.pp-refresh .taxonomy-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.pp-refresh .taxonomy-proof span{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 12px;font-size:.75rem}
.pp-refresh .catalog-shell{padding:42px 0 110px}.pp-refresh .catalog-toolbar{position:sticky;top:82px;z-index:30;background:rgba(245,239,232,.94);backdrop-filter:blur(16px);border:1px solid var(--pp-line);padding:14px;display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:10px;margin-bottom:24px}.pp-refresh .search-wrap{position:relative}.pp-refresh .search-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px}.pp-refresh .search-wrap input,.pp-refresh .catalog-toolbar select{width:100%;height:48px;border:1px solid var(--pp-line);background:#fff;padding:0 16px;color:var(--pp-ink)}.pp-refresh .search-wrap input{padding-left:45px}.pp-refresh .toolbar-button{height:48px;border:1px solid var(--pp-line);background:#fff;padding:0 17px;font-weight:700;cursor:pointer}.pp-refresh .catalog-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px}.pp-refresh .filter-panel{align-self:start;position:sticky;top:164px;background:var(--pp-paper);border:1px solid var(--pp-line);padding:22px}.pp-refresh .filter-panel h2{font-size:1.2rem;margin-bottom:20px}.pp-refresh .filter-group{padding:18px 0;border-top:1px solid var(--pp-line)}.pp-refresh .filter-group h3{font:800 .72rem Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}.pp-refresh .filter-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:.88rem;cursor:pointer}.pp-refresh .filter-option input{accent-color:var(--pp-violet)}.pp-refresh .filter-count{color:var(--pp-ink-2);font-size:.74rem}.pp-refresh .filter-reset{border:0;background:transparent;color:var(--pp-violet);font-weight:800;cursor:pointer;padding:0}.pp-refresh .result-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.pp-refresh .result-head h2{font-size:clamp(2rem,4vw,3.2rem)}.pp-refresh .result-head p{color:var(--pp-ink-2);font-size:.88rem}.pp-refresh .active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.pp-refresh .active-filter{border:1px solid var(--pp-line);background:#fff;border-radius:999px;padding:7px 11px;font-size:.75rem}.pp-refresh .catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pp-refresh .catalog-card{background:var(--pp-paper);border:1px solid var(--pp-line);display:flex;flex-direction:column;min-width:0;transition:transform .3s,box-shadow .3s}.pp-refresh .catalog-card:hover{transform:translateY(-6px);box-shadow:var(--pp-shadow)}.pp-refresh .catalog-card-media{height:260px;background:#f3ede6;overflow:hidden;position:relative}.pp-refresh .catalog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.pp-refresh .catalog-card:hover img{transform:scale(1.04)}.pp-refresh .catalog-badge{position:absolute;left:14px;top:14px;background:rgba(255,253,249,.94);padding:7px 9px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pp-refresh .catalog-card-body{padding:20px;display:flex;flex-direction:column;flex:1}.pp-refresh .catalog-path{font-size:.69rem;color:var(--pp-violet);font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pp-refresh .catalog-card h3{font-size:1.25rem;margin:10px 0 9px}.pp-refresh .catalog-card p{font-size:.86rem;color:var(--pp-ink-2);flex:1}.pp-refresh .catalog-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.pp-refresh .catalog-tags span{font-size:.69rem;border:1px solid var(--pp-line);border-radius:999px;padding:5px 8px}.pp-refresh .catalog-actions{display:flex;gap:8px}.pp-refresh .catalog-actions button,.pp-refresh .catalog-actions a{flex:1;min-height:43px;padding:9px 10px;font-size:.77rem}.pp-refresh .empty-state{grid-column:1/-1;padding:70px 20px;text-align:center;border:1px dashed var(--pp-line);background:var(--pp-paper)}
.pp-refresh .taxonomy-map{margin-bottom:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pp-refresh .taxonomy-tile{border:1px solid var(--pp-line);background:#fff;padding:16px;cursor:pointer;text-align:left}.pp-refresh .taxonomy-tile.active{outline:2px solid var(--pp-violet)}.pp-refresh .taxonomy-tile b{display:block;font-family:Fraunces,serif;font-size:1rem;margin-bottom:4px}.pp-refresh .taxonomy-tile span{font-size:.7rem;color:var(--pp-ink-2)}
.pp-refresh .detail-backdrop{position:fixed;inset:0;background:rgba(21,13,32,.62);opacity:0;visibility:hidden;z-index:100;transition:.25s}.pp-refresh .detail-backdrop.open{opacity:1;visibility:visible}.pp-refresh .detail-panel{position:fixed;right:-980px;top:0;width:min(940px,100%);height:100dvh;background:var(--pp-cream);z-index:110;overflow:auto;transition:right .38s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 70px rgba(0,0,0,.24)}.pp-refresh .detail-panel.open{right:0}.pp-refresh .detail-header{position:sticky;top:0;z-index:4;background:rgba(255,253,249,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--pp-line);padding:18px 24px;display:flex;justify-content:space-between;align-items:center}.pp-refresh .detail-close{width:44px;height:44px;border:1px solid var(--pp-line);background:#fff;border-radius:50%;font-size:1.4rem;cursor:pointer}.pp-refresh .detail-content{padding:26px}.pp-refresh .detail-lead{display:grid;grid-template-columns:220px 1fr;gap:24px}.pp-refresh .detail-lead img{width:100%;height:260px;object-fit:cover;background:#fff}.pp-refresh .detail-lead h2{font-size:2rem;margin:9px 0}.pp-refresh .detail-lead p{color:var(--pp-ink-2)}.pp-refresh .detail-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--pp-line)}.pp-refresh .detail-section h3{font-size:1.3rem;margin-bottom:14px}.pp-refresh .taxonomy-breadcrumb{display:flex;flex-wrap:wrap;gap:6px}.pp-refresh .taxonomy-breadcrumb span{background:#fff;border:1px solid var(--pp-line);padding:7px 9px;font-size:.72rem}.pp-refresh .fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pp-refresh .fact{background:#fff;border:1px solid var(--pp-line);padding:12px}.pp-refresh .fact b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--pp-violet);margin-bottom:4px}.pp-refresh .fact span{font-size:.84rem}.pp-refresh .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pp-refresh .pros-cons>div{background:#fff;border:1px solid var(--pp-line);padding:16px}.pp-refresh .pros-cons li{font-size:.82rem;margin:8px 0;color:var(--pp-ink-2)}.pp-refresh .disclosure{padding:14px;border-left:3px solid var(--pp-amber);background:#fff8e8;font-size:.76rem;color:var(--pp-ink-2)}
.pp-refresh .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.pp-refresh .reveal.in{opacity:1;transform:none}
@media(max-width:1040px){.pp-refresh .hero-layout{grid-template-columns:1fr;gap:20px}.pp-refresh .hero-copy{text-align:center}.pp-refresh .hero-copy h1,.pp-refresh .hero-copy>p{margin-inline:auto}.pp-refresh .hero-actions,.pp-refresh .hero-note{justify-content:center}.pp-refresh .hero-collage{min-height:470px;max-width:720px;width:100%;margin:auto}.pp-refresh .department-grid,.pp-refresh .featured-grid{grid-template-columns:repeat(2,1fr)}.pp-refresh .catalog-grid{grid-template-columns:repeat(2,1fr)}.pp-refresh .journal-grid{grid-template-columns:1fr 1fr}.pp-refresh .journal-card:first-child{grid-column:1/-1}.pp-refresh .story-grid{gap:35px}}
@media(max-width:760px){.pp-refresh .container{width:min(100% - 28px,1220px)}.pp-refresh .nav-links{position:fixed;inset:82px 0 auto;background:var(--pp-paper);display:none;flex-direction:column;align-items:stretch;padding:22px 28px;border-bottom:1px solid var(--pp-line)}.pp-refresh .nav-links.open{display:flex}.pp-refresh .nav-links a{padding:10px 0}.pp-refresh .nav-toggle{display:block}.pp-refresh .home-hero{min-height:auto}.pp-refresh .hero-layout{padding:64px 0 34px}.pp-refresh .hero-copy h1{font-size:clamp(3.05rem,15vw,4.7rem);max-width:9ch}.pp-refresh .hero-copy>p{font-size:1rem}.pp-refresh .hero-note{gap:10px;flex-direction:column}.pp-refresh .hero-collage{min-height:390px}.pp-refresh .hero-card-a{width:55%;height:240px;left:0}.pp-refresh .hero-card-b{width:50%;height:270px}.pp-refresh .hero-card-c{height:190px;bottom:0}.pp-refresh .hero-orbit{width:96px;height:96px;font-size:.8rem;right:5%}.pp-refresh .section{padding:78px 0}.pp-refresh .section-head{grid-template-columns:1fr;gap:16px}.pp-refresh .principles,.pp-refresh .department-grid,.pp-refresh .featured-grid,.pp-refresh .story-grid,.pp-refresh .journal-grid,.pp-refresh .footer-grid{grid-template-columns:1fr}.pp-refresh .principle{min-height:250px}.pp-refresh .story-media{min-height:410px}.pp-refresh .story-media img{height:320px}.pp-refresh .catalog-hero{padding:60px 0}.pp-refresh .catalog-toolbar{top:82px;grid-template-columns:1fr auto}.pp-refresh .catalog-toolbar select{display:none}.pp-refresh .catalog-layout{grid-template-columns:1fr}.pp-refresh .filter-panel{position:fixed;z-index:90;inset:auto 0 0;max-height:78dvh;overflow:auto;transform:translateY(110%);transition:transform .3s}.pp-refresh .filter-panel.open{transform:none}.pp-refresh .taxonomy-map{grid-template-columns:1fr 1fr}.pp-refresh .catalog-grid{grid-template-columns:1fr}.pp-refresh .catalog-card-media{height:310px}.pp-refresh .detail-lead{grid-template-columns:1fr}.pp-refresh .detail-lead img{height:330px}.pp-refresh .fact-grid,.pp-refresh .pros-cons{grid-template-columns:1fr}.pp-refresh .footer-bottom{flex-direction:column}.pp-refresh .ticker-track{animation-duration:36s}}
@media(prefers-reduced-motion:reduce){.pp-refresh *{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.pp-refresh .reveal{opacity:1;transform:none}}

/* Visual guidance stack: consistent with the framed editorial imagery above. */
.pp-refresh .story-media img{border:1.5px solid var(--pp-violet);border-radius:8px;background:#fff;padding:6px;box-shadow:0 24px 46px -26px rgba(21,13,32,.8);box-sizing:border-box}
.pp-refresh .story-media img:nth-child(1){left:0;top:0;z-index:1}
.pp-refresh .story-media img:nth-child(2){right:0;bottom:42px;width:58%;height:310px;z-index:2}
.pp-refresh .story-media img:nth-child(3){left:18%;bottom:0;width:43%;height:240px;border:1.5px solid var(--pp-violet);z-index:3;transform:rotate(-4deg)}
.pp-refresh .story-media img:hover{z-index:4;transform:translateY(-6px) rotate(0deg)}
@media(max-width:760px){.pp-refresh .story-media img:nth-child(2){bottom:42px}.pp-refresh .story-media img:nth-child(3){left:11%;width:47%;height:210px}}

/* Collage interaction: the focused frame always rises above its neighbours. */
.pp-refresh .hero-card:hover,
.pp-refresh .monthly-featured-card:hover,
.pp-refresh .journal-section-visual figure:hover{z-index:10!important}

/* Keep the Journal collage's label and hover lift inside its reserved area. */
.pp-refresh .journal-section-visual{min-height:430px;padding-bottom:34px;box-sizing:border-box;isolation:isolate}
.pp-refresh .journal-section-visual figure{cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease;z-index:1}
.pp-refresh .journal-section-visual figure:hover{transform:translateY(-8px) rotate(0deg);box-shadow:0 24px 48px rgba(29,17,47,.25)}
.pp-refresh .journal-section-visual figure:nth-child(2){z-index:2}
.pp-refresh .journal-section-visual figure:nth-child(3){z-index:3}
.pp-refresh .journal-section-ai-note{bottom:0;z-index:11}

/* Keep the guidance collage legible and fully contained on narrow screens. */
@media(max-width:760px){
  .pp-refresh .story-media{min-height:470px;margin:0 auto;width:min(100%,420px)}
  .pp-refresh .story-media img{left:0;right:auto;top:0;bottom:auto;width:78%;height:285px}
  .pp-refresh .story-media img:nth-child(2){left:auto;right:0;top:126px;bottom:auto;width:67%;height:245px}
  .pp-refresh .story-media img:nth-child(3){left:8%;right:auto;top:auto;bottom:0;width:51%;height:190px}
  .pp-refresh .journal-section-visual{min-height:390px;padding-bottom:34px}
}

@media(max-width:760px){
  .pp-refresh .catalogue-hero-grid{grid-template-columns:1fr;gap:28px}
  .pp-refresh .catalogue-hero-media{min-height:250px;max-height:330px}
  .pp-refresh .catalogue-hero-media img{min-height:230px}
  .pp-refresh .catalogue-directory .section-head{grid-template-columns:1fr;gap:28px}
  .pp-refresh .catalogue-directory-media{min-height:250px;max-height:320px}
  .pp-refresh .catalogue-directory-media img{min-height:230px}
  .pp-refresh .catalogue-products-section .section-head{grid-template-columns:1fr;gap:28px}
  .pp-refresh .catalogue-selected-media{min-height:250px;max-height:320px}
  .pp-refresh .catalogue-selected-media img{min-height:230px}
}

/* ============================================================
   Content-model update: one product + educational tutorials
   ============================================================ */
.pp-refresh .product-spotlight-section{background:#fffdf9}
.pp-refresh .product-spotlight{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);background:#fff;border:1px solid var(--pp-line);box-shadow:var(--pp-shadow);overflow:hidden}
.pp-refresh .product-spotlight-media{position:relative;min-height:480px;background:linear-gradient(#f7f1fb,#f7f1fb) padding-box,linear-gradient(120deg,#9f6a12 0%,#f8e7a8 18%,#d79a37 38%,#fff5c7 58%,#b77b1d 78%,#f7d878 100%) border-box;display:flex;flex-direction:column;align-items:stretch;padding:42px;margin:18px 0 18px 18px;border:1.5px solid transparent;border-radius:8px;box-shadow:0 18px 38px rgba(69,32,101,.16)}
.pp-refresh .product-spotlight-media img{display:block;width:min(100%,390px);height:auto;max-height:410px;object-fit:contain;filter:none;margin:auto;padding:10px;background:#fff;border:1.5px solid var(--pp-amber);border-radius:6px;box-sizing:border-box}
.pp-refresh .product-spotlight-media .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:20px 0 0;box-sizing:border-box}
.pp-refresh .product-spotlight-media .hero-actions .btn{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:48px;padding:10px 12px;font-size:clamp(.68rem,.95vw,.82rem);white-space:normal;overflow-wrap:anywhere;line-height:1.15;box-sizing:border-box;text-align:center}
.pp-refresh .product-spotlight-media>span{position:absolute;top:20px;left:20px;background:var(--pp-ink);color:#fff;border-radius:999px;padding:8px 12px;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.pp-refresh .product-spotlight-placeholder{background:linear-gradient(135deg,#fffdf9,#f4edf8);border-right:1px solid var(--pp-line)}
.pp-refresh .product-spotlight-placeholder::after{content:"PP";font:700 clamp(5rem,13vw,11rem) Fraunces,serif;color:transparent;-webkit-text-stroke:1px rgba(123,63,198,.18);text-shadow:0 24px 70px rgba(215,154,55,.16)}
.pp-refresh .product-spotlight-copy{padding:clamp(34px,6vw,72px);display:flex;flex-direction:column;justify-content:flex-start;background:#fff}
.pp-refresh .product-spotlight-copy h3{font-size:clamp(2.4rem,5vw,5rem);line-height:.94;margin:18px 0}
.pp-refresh .product-spotlight-copy>p{font-size:1.02rem;color:var(--pp-ink-2);max-width:58ch}
.pp-refresh .product-spotlight-copy .spotlight-affiliate-note{width:100%;max-width:58ch;margin-top:28px!important;box-sizing:border-box}
.pp-refresh .product-spotlight-copy .buyer-copy+p{display:none}
.pp-refresh .spotlight-affiliate-note{background:#fff8e8;border-left:4px solid var(--pp-amber);padding:13px 15px;font-size:.78rem!important;line-height:1.45;margin-top:auto}
.pp-refresh .classification-mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0;color:var(--pp-ink-2)}
.pp-refresh .classification-mini span{background:#f6f0ea;border:1px solid var(--pp-line);padding:8px 10px;font-size:.75rem;font-weight:700}
.pp-refresh .classification-mini b{color:var(--pp-violet)}
.pp-refresh .tutorial-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pp-refresh .tutorial-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-refresh .tutorial-card{appearance:none;text-align:left;color:inherit;font:inherit;padding:0;width:100%;background:var(--pp-paper);border:1px solid var(--pp-line);display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s}
.pp-refresh .tutorial-card:hover,.pp-refresh .tutorial-card:focus-visible{transform:translateY(-7px);box-shadow:var(--pp-shadow);border-color:rgba(123,63,198,.42);outline:none}
.pp-refresh .tutorial-card-media{height:230px;position:relative;overflow:hidden;background:#efe8e0}
.pp-refresh .tutorial-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pp-refresh .tutorial-card:hover .tutorial-card-media img{transform:scale(1.045)}
.pp-refresh .tutorial-card-media span{position:absolute;top:14px;left:14px;background:rgba(33,22,49,.9);color:#fff;border-radius:999px;padding:7px 10px;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.pp-refresh .tutorial-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.pp-refresh .tutorial-card-body small{color:var(--pp-violet);font-size:.67rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.pp-refresh .tutorial-card-body h3{font-size:1.28rem;line-height:1.05;margin:10px 0}
.pp-refresh .tutorial-card-body p{font-size:.84rem;color:var(--pp-ink-2);flex:1}
.pp-refresh .tutorial-card-body b{font-size:.76rem;margin-top:16px;color:var(--pp-ink)}
.pp-refresh .single-product-hero h1{max-width:15ch}
.pp-refresh .product-review-section{background:linear-gradient(180deg,#f5efe8,#fffdf9)}
.pp-refresh .product-review-grid{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr);gap:clamp(34px,6vw,78px);align-items:center}
.pp-refresh .product-review-copy{display:flex;flex-direction:column}
.pp-refresh .product-gallery{min-width:0}
.pp-refresh .product-main-image{height:560px;background:#fff;border:1px solid var(--pp-line);display:grid;place-items:center;padding:42px;box-shadow:var(--pp-shadow)}
.pp-refresh .product-main-image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(33,22,49,.14))}
.pp-refresh .product-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pp-refresh .product-thumb{height:118px;border:1px solid var(--pp-line);background:#fff;padding:10px;cursor:pointer}
.pp-refresh .product-thumb.active{outline:3px solid var(--pp-violet);outline-offset:-3px}
.pp-refresh .product-thumb img{width:100%;height:100%;object-fit:contain}
.pp-refresh .product-review-copy h2{font-size:clamp(3rem,6vw,6rem);line-height:.91;margin:20px 0}
.pp-refresh .product-status{display:inline-flex;width:max-content;border-radius:999px;padding:8px 12px;margin-bottom:20px;background:#e6efe0;color:#3c5b28;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pp-refresh .product-lede{font-size:1.08rem;color:var(--pp-ink-2);max-width:60ch}
.pp-refresh .product-primary-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pp-refresh .retailer-note{font-size:.76rem!important;color:var(--pp-ink-2);max-width:62ch;margin-top:15px}
.pp-refresh .product-review-copy .retailer-note{order:8}
.pp-refresh .product-review-copy .affiliate-disclosure{order:9}
.pp-refresh .product-review-copy .product-primary-actions{order:10}
.pp-refresh .product-section-head{margin-bottom:30px;align-items:start}
.pp-refresh .classification-section{margin-top:90px}
.pp-refresh .classification-path-large{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr auto 1fr;align-items:stretch;gap:10px}
.pp-refresh .classification-path-large>div{background:#fff;border:1px solid var(--pp-line);padding:20px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.pp-refresh .classification-path-large small{font-size:.66rem;color:var(--pp-violet);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pp-refresh .classification-path-large strong{font:600 1.2rem Fraunces,serif}
.pp-refresh .classification-path-large>b{display:grid;place-items:center;color:var(--pp-violet)}
.pp-refresh .google-map{margin-top:12px;background:var(--pp-ink);color:#fff;padding:20px;display:grid;gap:7px}
.pp-refresh .google-map small{color:var(--pp-lilac);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pp-refresh .product-fact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pp-refresh .product-fact-grid .fact{padding:18px;min-height:120px}
.pp-refresh .product-evaluation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pp-refresh .product-evaluation-grid>div{background:#fff;border:1px solid var(--pp-line);padding:24px}
.pp-refresh .product-evaluation-grid h3{font-size:1.4rem;margin:12px 0}
.pp-refresh .product-evaluation-grid ul{padding-left:18px}
.pp-refresh .product-evaluation-grid li{color:var(--pp-ink-2);font-size:.86rem;margin:9px 0}
.pp-refresh .health-notice{margin-top:30px;background:#fff7e6;border-left:5px solid var(--pp-amber);padding:22px 24px}
.pp-refresh .health-notice strong{font-family:Fraunces,serif;font-size:1.25rem}
.pp-refresh .health-notice p{color:var(--pp-ink-2);margin-top:8px}
.pp-refresh .tutorial-series-section{background:#fffdf9}
.pp-refresh.tutorial-page .tutorial-hero{padding:54px 0 46px}
.pp-refresh.tutorial-page .tutorial-series-section{padding:58px 0 88px;scroll-margin-top:86px}
.pp-refresh.tutorial-page #tutorialSeries,.pp-refresh.tutorial-page #videos{scroll-margin-top:96px}
.pp-refresh.tutorial-page .tutorial-series-section .section-head{max-width:none;text-align:left;margin:0 0 24px;align-items:start;grid-template-columns:minmax(210px,.45fr) minmax(0,1fr);gap:32px}
.pp-refresh.tutorial-page .tutorial-series-section .section-head h2{font-size:clamp(2.55rem,4.15vw,4.45rem);line-height:.95;max-width:13ch}
.pp-refresh.tutorial-page .tutorial-series-section .section-head p{font-size:1rem;max-width:46ch}
.pp-refresh.tutorial-page #seriesGrid{margin-top:0}
.pp-refresh .video-library-section{background:linear-gradient(180deg,#f4eee8,#efe7f3)}
.pp-refresh .video-library-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:24px}
.pp-refresh .video-library-head h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.95;margin:12px 0}
.pp-refresh .video-library-head p{color:var(--pp-ink-2);max-width:62ch}
.pp-refresh .series-filter{display:flex;flex-wrap:wrap;gap:10px;overflow:visible;padding:4px 0 18px;margin-bottom:18px}
.pp-refresh .series-chip{white-space:normal;border:1px solid var(--pp-line);background:#fff;border-radius:999px;padding:10px 13px;font-size:.75rem;font-weight:700;cursor:pointer;min-height:42px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2;text-align:center}
.pp-refresh .series-chip span{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:0;border-radius:50%;background:#eee5f5;color:var(--pp-violet);font-size:.68rem;flex:0 0 auto}
.pp-refresh .series-chip.active{background:var(--pp-ink);color:#fff;border-color:var(--pp-ink)}
.pp-refresh .series-chip.active span{background:var(--pp-lilac);color:var(--pp-ink)}
.pp-refresh .tutorial-page .video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pp-refresh .tutorial-page .vcard[hidden]{display:none!important}
.pp-refresh .tutorial-vcard{min-height:440px;border-radius:0;box-shadow:var(--pp-shadow)}
.pp-refresh.tutorial-page .tutorial-vcard .vcard-overlay{background:linear-gradient(180deg,rgba(18,10,29,.62) 0%,rgba(18,10,29,.14) 34%,rgba(18,10,29,.18) 56%,rgba(18,10,29,.96) 100%)}
.pp-refresh.tutorial-page .tutorial-vcard .vtag-niche{background:rgba(255,255,255,.9);color:var(--pp-ink);text-shadow:none;backdrop-filter:blur(8px)}
.pp-refresh.tutorial-page .tutorial-vcard .vtag-info{background:#f6e8ff;color:#2a173d;text-shadow:none;border:1px solid rgba(255,255,255,.72);box-shadow:0 8px 18px -13px rgba(33,22,49,.6)}
.pp-refresh.tutorial-page .tutorial-vcard .vtag-disclosure{background:#fff4c7;color:#2a173d;text-shadow:none;border:1px solid #d79a37;box-shadow:0 8px 18px -13px rgba(33,22,49,.6)}
.pp-refresh .tutorial-vcard .vcard-bottom h3{font-family:Fraunces,serif}
.pp-refresh.tutorial-page .tutorial-vcard .vcard-bottom .vtopic{color:#f4e8ff;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.pp-refresh.tutorial-page .tutorial-vcard .vcard-bottom h3{color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.62)}
.pp-refresh.tutorial-page .tutorial-vcard .vcard-disclosure{margin:10px 0 0;color:#fff;font-size:.72rem;line-height:1.35;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.7);max-width:34ch}
.pp-refresh .static-video-grid{align-items:stretch}
.pp-refresh .static-video-card{display:flex;flex-direction:column;min-width:0;background:#fffdf9;border:1.5px solid #d79a37;border-radius:8px;overflow:hidden;box-shadow:var(--pp-shadow)}
.pp-refresh .static-video-card[hidden]{display:none!important}
.pp-refresh .static-video-media{background:#211631;padding:10px;aspect-ratio:16/10}
.pp-refresh .static-video-media video{display:block;width:100%;height:100%;object-fit:cover;border:1px solid rgba(255,255,255,.72);background:#211631}
.pp-refresh .static-video-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:20px}
.pp-refresh .static-video-tags{display:flex;flex-wrap:wrap;gap:7px}
.pp-refresh .static-video-tags span{border:1px solid #d79a37;border-radius:999px;background:#f6e8ff;color:#5f2c96;padding:5px 8px;font-size:.61rem;font-weight:800;letter-spacing:.08em;line-height:1.15;text-transform:uppercase}
.pp-refresh .static-video-body h3{margin:0;font:600 1.4rem/1.04 Fraunces,serif;color:var(--pp-ink)}
.pp-refresh .static-video-body>p{margin:0;color:var(--pp-ink-2);font-size:.84rem;line-height:1.45}
.pp-refresh .static-video-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line);padding:12px 0;margin:0}
.pp-refresh .static-video-meta div{min-width:0}
.pp-refresh .static-video-meta dt{color:var(--pp-violet);font-size:.61rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pp-refresh .static-video-meta dd{margin:3px 0 0;color:var(--pp-ink-2);font-size:.73rem;line-height:1.25}
.pp-refresh .static-video-disclosure{margin-top:auto!important;padding:10px 12px;border-left:4px solid var(--pp-violet);background:#f7f1fb;color:var(--pp-ink-2)!important;font-size:.72rem!important;line-height:1.35!important}
.pp-refresh .static-video-card .btn{align-self:flex-start;min-height:42px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.pp-refresh .tutorial-empty{text-align:center;color:var(--pp-ink-2);padding:50px;background:#fff;border:1px dashed var(--pp-line)}
.pp-refresh .tutorial-related-products{margin-top:34px;padding:28px;background:#fff;border:1.5px solid #d79a37;border-radius:8px;box-shadow:0 18px 38px rgba(69,32,101,.12)}
.pp-refresh.tutorial-page #videoGrid,
.pp-refresh.tutorial-page #noResults,
.pp-refresh.tutorial-page #loadError{display:none!important}
.pp-refresh.tutorial-page .video-library-section{padding:28px 0 76px;background:#fffdf9}
.pp-refresh.tutorial-page .video-library-section #tutorialRelatedProducts{margin-top:0}
.pp-refresh .tutorial-related-products h3{font-size:clamp(1.85rem,3.2vw,3.35rem);line-height:.98;margin:10px 0}
.pp-refresh .tutorial-related-products p{color:var(--pp-ink-2);max-width:70ch}
.pp-refresh .tutorial-product-search{display:grid;gap:9px;margin:20px 0 22px}
.pp-refresh .tutorial-product-search label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--pp-violet)}
.pp-refresh .tutorial-product-search>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.pp-refresh .tutorial-product-search input{width:100%;height:48px;border:1.5px solid #d79a37;border-radius:999px;background:#fffdf9;padding:0 18px;color:var(--pp-ink);font:600 .9rem Inter,sans-serif}
.pp-refresh .tutorial-product-search input:focus{outline:3px solid rgba(123,63,198,.16);outline-offset:2px}
.pp-refresh .tutorial-product-search .btn{min-height:48px;white-space:nowrap}
.pp-refresh .tutorial-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pp-refresh .tutorial-related-card{display:grid;grid-template-columns:minmax(180px, .42fr) minmax(0,1fr);gap:16px;background:#fffdf9;border:1.5px solid #d79a37;border-radius:8px;padding:14px;min-width:0}
.pp-refresh .tutorial-related-media{display:grid;place-items:center;min-height:210px;padding:8px;background:#f7f1fb;border:1.5px solid #d79a37;border-radius:8px;overflow:hidden;box-sizing:border-box}
.pp-refresh .tutorial-related-media img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block;padding:0;background:#fff;border:1.5px solid #d79a37;border-radius:6px;box-sizing:border-box}
.pp-refresh .tutorial-related-copy{display:flex;flex-direction:column;min-width:0}
.pp-refresh .tutorial-related-taxonomy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--pp-violet)}
.pp-refresh .tutorial-related-taxonomy span{font-size:.61rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pp-refresh .tutorial-related-taxonomy b{font-size:.72rem;color:var(--pp-violet);font-weight:800}
.pp-refresh .tutorial-related-copy h4{font-size:1.25rem;line-height:1.05;margin:7px 0}
.pp-refresh .tutorial-related-copy h4 a{color:inherit;text-decoration:none}
.pp-refresh .tutorial-related-copy p{font-size:.82rem;line-height:1.45;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-refresh .tutorial-related-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.pp-refresh .tutorial-related-actions .btn{display:flex;align-items:center;justify-content:center;flex:1 1 170px;min-width:0;min-height:42px;padding:9px 12px;font-size:.72rem;white-space:normal;overflow-wrap:anywhere;line-height:1.15;text-align:center}
.pp-refresh .tutorial-product-callout{background:var(--pp-ink)}
.pp-refresh .tutorial-product-callout .product-spotlight{box-shadow:none}
.pp-refresh .modal-disclaimer{font-size:.75rem;color:rgba(255,255,255,.68);border-top:1px solid rgba(255,255,255,.16);padding-top:14px;margin-top:18px}

@media(max-width:1040px){
  .pp-refresh.tutorial-page .tutorial-series-section .section-head{grid-template-columns:1fr;gap:16px}
  .pp-refresh .tutorial-grid,.pp-refresh .tutorial-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-refresh .product-spotlight,.pp-refresh .product-review-grid{grid-template-columns:1fr}
  .pp-refresh .product-spotlight-media{min-height:420px;margin:18px}
  .pp-refresh .classification-path-large{grid-template-columns:1fr 1fr}
  .pp-refresh .classification-path-large>b{display:none}
  .pp-refresh .product-evaluation-grid{grid-template-columns:1fr 1fr}
  .pp-refresh .tutorial-page .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-refresh .static-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-refresh .tutorial-related-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .pp-refresh .product-spotlight-media .hero-actions{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pp-refresh.tutorial-page .tutorial-hero{padding:46px 0 38px}
  .pp-refresh.tutorial-page .tutorial-series-section{padding:42px 0 72px}
  .pp-refresh.tutorial-page .tutorial-series-section .section-head{margin-bottom:20px}
  .pp-refresh .tutorial-grid,.pp-refresh .tutorial-grid.compact{grid-template-columns:1fr}
  .pp-refresh .tutorial-card-media{height:270px}
  .pp-refresh .product-spotlight-media{min-height:360px;padding:28px}
  .pp-refresh .product-spotlight-copy{padding:30px 24px}
  .pp-refresh .product-main-image{height:430px;padding:25px}
  .pp-refresh .product-review-copy h2{font-size:clamp(3rem,14vw,4.5rem)}
  .pp-refresh .classification-path-large,.pp-refresh .product-fact-grid,.pp-refresh .product-evaluation-grid{grid-template-columns:1fr}
  .pp-refresh .classification-path-large>div{min-height:105px}
  .pp-refresh .video-library-head{align-items:flex-start;flex-direction:column}
  .pp-refresh .tutorial-page .video-grid{grid-template-columns:1fr}
  .pp-refresh .static-video-grid{grid-template-columns:1fr}
  .pp-refresh .tutorial-vcard{min-height:490px}
  .pp-refresh .tutorial-product-search>div,.pp-refresh .tutorial-related-card{grid-template-columns:1fr}
  .pp-refresh .tutorial-related-products{padding:20px}
  .pp-refresh .tutorial-related-media{min-height:230px}
}


/* ============================================================
   Classified Products navigation and catalogue v3
   ============================================================ */
.pp-refresh .nav-dropdown{position:relative}
.pp-refresh .nav-dropdown-row{display:flex;align-items:center;gap:0}.pp-refresh .nav-dropdown-toggle{border:1px solid transparent;background:transparent;color:var(--pp-violet);padding:8px 8px;cursor:pointer;line-height:1;font-weight:800}
.pp-refresh .nav-dropdown-toggle span{display:block;transition:transform .25s}
.pp-refresh .nav-dropdown.open .nav-dropdown-toggle span,.pp-refresh .nav-dropdown:hover .nav-dropdown-toggle span{transform:rotate(180deg)}
.pp-refresh .nav-mega{position:absolute;top:calc(100% + 18px);right:-180px;width:min(900px,calc(100vw - 40px));padding:24px;background:rgba(255,253,249,.98);border:1px solid var(--pp-gold);border-radius:8px;box-shadow:0 30px 80px -30px rgba(33,22,49,.46);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,visibility .22s,transform .22s;z-index:80}
.pp-refresh .nav-dropdown:hover .nav-mega,.pp-refresh .nav-dropdown:focus-within .nav-mega,.pp-refresh .nav-dropdown.open .nav-mega{opacity:1;visibility:visible;transform:none}
.pp-refresh .nav-mega-intro{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--pp-line)}
.pp-refresh .nav-mega-intro span{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-violet);font-weight:800}
.pp-refresh .nav-mega-intro strong{font:600 1.35rem Fraunces,serif}.pp-refresh .nav-mega-intro p{grid-column:2;color:var(--pp-ink-2);font-size:.78rem;margin-top:4px}
.pp-refresh .nav-mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:22px 0}
.pp-refresh .nav-mega-grid h3{font:700 .82rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.pp-refresh .nav-links .nav-mega-grid a{display:block;padding:7px 8px;font-size:.78rem;font-weight:600;color:var(--pp-ink-2);border-left:2px solid transparent}
.pp-refresh .nav-links .nav-mega-grid a:hover,.pp-refresh .nav-links .nav-mega-grid a:focus-visible{color:var(--pp-violet);background:#f4edf7;border-left-color:var(--pp-rose)}
.pp-refresh .nav-mega-all{display:flex;justify-content:space-between;align-items:center;background:var(--pp-ink);color:#fff!important;padding:13px 16px!important;font-size:.78rem!important;font-weight:800!important}
.pp-refresh .nav-mega-all span{font-size:1.15rem}
@media(prefers-reduced-motion:no-preference){.pp-refresh .logo::after,.pp-refresh .nav-links>a,.pp-refresh .nav-dropdown-link,.pp-refresh .nav-links>a::after,.pp-refresh .nav-dropdown-link::after,.pp-refresh .nav-mega-grid a{transition:transform .22s ease,color .22s ease,background-color .22s ease,border-color .22s ease}.pp-refresh .nav-links>a:hover,.pp-refresh .nav-dropdown-link:hover{transform:translateY(-1px)}}
.pp-refresh .catalogue-hero h1{max-width:12ch}
.pp-refresh .catalogue-directory,
.pp-refresh .catalogue-products-section,
.pp-refresh .catalogue-standard-section{content-visibility:auto;contain-intrinsic-size:900px}
.pp-refresh.catalogue-page .catalog-card,
.pp-refresh.catalogue-page .catalogue-department,
.pp-refresh .catalogue-page .catalog-card,
.pp-refresh .catalogue-page .catalogue-department{content-visibility:auto;contain-intrinsic-size:420px}
.pp-refresh .catalogue-directory{background:linear-gradient(180deg,#fffdf9,#f5efe8)}
.pp-refresh .catalogue-directory .section-head{align-items:center}
.pp-refresh .catalogue-directory-media{position:relative;min-height:300px;padding:10px;background:#f5edf8;border:1px solid rgba(215,154,55,.72);border-radius:8px;box-shadow:0 24px 56px -30px rgba(33,22,49,.35);overflow:hidden}
.pp-refresh .catalogue-directory-media .eyebrow{position:absolute;z-index:2;left:26px;top:24px;color:#fff;text-shadow:0 1px 16px rgba(33,22,49,.8)}
.pp-refresh .catalogue-directory-media img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:5px;filter:saturate(1.08)}
.pp-refresh .catalogue-products-section .section-head{align-items:center}
.pp-refresh .catalogue-published-heading{margin-bottom:22px}
.pp-refresh .catalogue-published-heading h1{margin:12px 0 0;max-width:none}
.pp-refresh .catalogue-selected-media{position:relative;min-height:300px;padding:10px;background:#f5edf8;border:1px solid rgba(215,154,55,.72);border-radius:8px;box-shadow:0 24px 56px -30px rgba(33,22,49,.35);overflow:hidden}
.pp-refresh .catalogue-selected-media .eyebrow{position:absolute;z-index:2;left:26px;top:24px;color:#fff;text-shadow:0 1px 16px rgba(33,22,49,.8)}
.pp-refresh .catalogue-selected-media img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:5px;filter:saturate(1.08)}
.pp-refresh .catalogue-department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-refresh .catalogue-department {
  display:block;
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--pp-amber);
  background:#f7effa;
  box-shadow:0 18px 42px -30px rgba(75,36,111,.42);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-refresh .catalogue-department:hover {
  transform: translateY(-4px);
  box-shadow:0 26px 50px -32px rgba(75,36,111,.56);
}
.pp-refresh .catalogue-department::after{content:none}
.pp-refresh .department-image-container {
  position:absolute;
  top:20px;
  bottom:20px;
  left:20px;
  right:auto;
  z-index:0;
  width:35%;
  aspect-ratio:auto;
  margin:0;
  overflow: hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.pp-refresh .department-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:58% 62%;
  display:block;
  filter:saturate(1.04) contrast(1.01);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.pp-refresh .department-corner-art {
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:0;
  width:22%;
  height:auto;
  max-width:138px;
  aspect-ratio:1;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.pp-refresh .catalogue-department:hover .department-image {
  transform: scale(1.05);
}
.pp-refresh .department-card-content {
  position:relative;
  z-index:1;
  min-width:0;
  width:56%;
  margin-left:auto;
  min-height:420px;
  padding:32px 30px 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pp-refresh .catalogue-department h3{font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:.96;margin:14px 0 10px;max-width:14ch}
.pp-refresh .catalogue-department ul{list-style:none;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--pp-line);display:grid;grid-template-columns:1fr;gap:6px;position:relative;z-index:2}
.pp-refresh .catalogue-department li{font-size:.78rem;color:var(--pp-ink-2)}
.pp-refresh .catalogue-department .department-link{position:relative;z-index:2;align-self:flex-start;border:0;background:transparent;padding:16px 0 0;color:var(--pp-ink);cursor:pointer;text-align:left;font-weight:700}
.pp-refresh .product-cautions{border:1px solid var(--pp-amber);background:#fff8e8;padding:18px 20px}.pp-refresh .product-cautions h2{margin-bottom:8px}.pp-refresh .product-cautions p{margin:0;color:var(--pp-ink-2)}
.pp-refresh .catalogue-products-section{background:#fffdf9;padding:52px 0 60px}
.pp-refresh .affiliate-disclosure{border:1px solid rgba(184,140,64,.35);background:#fff8e8;color:var(--pp-ink-2);padding:14px 16px;margin:0 0 18px;font-size:.82rem;line-height:1.45}
.pp-refresh .affiliate-disclosure strong{color:var(--pp-ink)}
.pp-refresh .catalogue-controls{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;align-items:end;padding:14px;background:#f4eee8;border:1px solid var(--pp-line)}
.pp-refresh .catalogue-controls .search-wrap,.pp-refresh .catalogue-controls select{align-self:end}
.pp-refresh .catalogue-controls .search-wrap input,.pp-refresh .catalogue-controls select{height:52px}
.pp-refresh .catalogue-controls select{border:1px solid var(--pp-line);background:#fff;padding:0 14px;color:var(--pp-ink)}
.pp-refresh .catalogue-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 34px}
.pp-refresh .catalogue-filter{border:1px solid var(--pp-line);background:#fff;border-radius:999px;padding:10px 14px;font-size:.76rem;font-weight:700;cursor:pointer}
.pp-refresh .catalogue-filter.active{background:var(--pp-ink);border-color:var(--pp-ink);color:#fff}
.pp-refresh .catalogue-result-head{margin-top:12px}.pp-refresh .catalogue-result-head p{min-height:1.2em}
.pp-refresh .catalogue-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:100%}
.pp-refresh .catalogue-grid.catalogue-grid-grouped{display:block}
.pp-refresh .catalogue-category-stack{display:grid;gap:26px}
.pp-refresh .catalogue-subcategory{border:1px solid var(--pp-line);background:#fff;padding:18px}
.pp-refresh .catalogue-subcategory-active{border-color:var(--pp-violet);background:#f2eafb;box-shadow:0 14px 30px rgba(55,31,77,.08)}
.pp-refresh .catalogue-subcategory-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--pp-line)}
.pp-refresh .catalogue-subcategory-head h3{font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1;margin:7px 0 0}
.pp-refresh .catalogue-subcategory-head p{margin:0;color:var(--pp-ink-2);font-size:.82rem;font-weight:700;white-space:nowrap}
.pp-refresh .catalogue-subcategory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pp-refresh .catalogue-subcategory-empty{border:1px dashed var(--pp-line);background:#fffdf9;color:var(--pp-ink-2);font-size:.86rem;padding:20px}
.pp-refresh .catalogue-product-card{max-width:380px}
.pp-refresh .catalogue-product-card{
  border:1px solid var(--pp-violet);
  border-radius:8px;
  box-shadow:0 18px 38px -24px rgba(33,22,49,.38);
}
.pp-refresh .catalogue-product-card:hover{
  box-shadow:0 24px 46px -22px rgba(33,22,49,.48);
}
.pp-refresh.catalogue-page .catalog-card-media,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media{display:flex;flex-direction:column;background:#fff;height:330px}
.pp-refresh.catalogue-page .catalog-card-media .catalog-badge,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-badge{order:0;position:static;align-self:flex-start;margin:20px 24px 0;background:transparent;padding:0}
.pp-refresh.catalogue-page .catalog-card-media img,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media img{order:1;flex:1;min-height:0;width:100%;height:auto;object-fit:contain;padding:8px 26px 26px;filter:none}
.pp-refresh.catalogue-page .catalog-card,
.pp-refresh.catalogue-page .catalog-card-body,
.pp-refresh .catalogue-page .catalog-card,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-body{background:#fff}
.pp-refresh .catalogue-static-facts{display:grid;gap:8px;margin:4px 0 18px;padding:12px 0;border-top:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line)}
.pp-refresh .catalogue-static-facts div{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;line-height:1.35}
.pp-refresh .catalogue-static-facts dt{color:var(--pp-ink-2);font-weight:700}
.pp-refresh .catalogue-static-facts dd{margin:0;text-align:right;font-weight:800;color:var(--pp-ink)}
.pp-refresh.catalogue-page .catalog-actions,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions{flex-wrap:wrap}
.pp-refresh.catalogue-page .catalog-actions a,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions a{flex:1 1 150px;width:auto}
.pp-refresh .catalogue-empty{max-width:none}
.pp-refresh .catalogue-empty h3{font-size:2rem;margin:14px 0}.pp-refresh .catalogue-empty p{max-width:56ch;margin:0 auto 24px;color:var(--pp-ink-2)}
.pp-refresh .catalogue-standard-section{background:var(--pp-ink);color:#fff}
.pp-refresh .catalogue-standard-section h2{color:#fff;font-size:clamp(3rem,6vw,6rem);line-height:.94;margin:18px 0}.pp-refresh .catalogue-standard-section p{color:rgba(255,255,255,.7);max-width:58ch}
.pp-refresh .catalogue-standard-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.pp-refresh .catalogue-standard-list{display:grid}.pp-refresh .catalogue-standard-list>div{display:grid;grid-template-columns:65px 1fr;gap:18px;padding:24px 0;border-top:1px solid rgba(255,255,255,.16)}
.pp-refresh .catalogue-standard-list b{font:500 2.6rem Fraunces,serif;color:var(--pp-lilac)}.pp-refresh .catalogue-standard-list span{display:grid;gap:5px}.pp-refresh .catalogue-standard-list strong{font:600 1.25rem Fraunces,serif}.pp-refresh .catalogue-standard-list small{color:rgba(255,255,255,.65)}
.pp-refresh .catalogue-back-link{display:block;color:#fff;margin-bottom:26px;font-size:.78rem;font-weight:800;letter-spacing:.05em}
.pp-refresh .product-next-section{background:#f2e9f5}.pp-refresh .product-next-grid{display:flex;justify-content:space-between;align-items:end;gap:50px}.pp-refresh .product-next-grid h2{font-size:clamp(2.6rem,5vw,5rem);margin:15px 0}.pp-refresh .product-next-grid p{max-width:60ch;color:var(--pp-ink-2)}
.pp-refresh .home-catalogue-section{background:#fffdf9}

/* About page panels use the same quiet, bordered surface as the legal and review cards. */
.pp-refresh.about-page .about-pillar-card,
.pp-refresh.about-page .about-method-card,
.pp-refresh.about-page .about-publisher-card{background:#fff;border:1px solid var(--pp-line);border-radius:0;box-shadow:var(--pp-shadow);padding:32px}
.pp-refresh.about-page .about-method-card,
.pp-refresh.about-page .about-publisher-card{max-width:900px;margin-inline:auto}
.pp-refresh .pp-contact-form-card{max-width:900px;margin-inline:auto;border:1.5px solid #7b3fc6;box-shadow:var(--pp-shadow)}
.pp-refresh .pp-contact-form{display:grid;gap:18px;margin-top:24px}
.pp-refresh .pp-contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pp-refresh .pp-contact-form .field{gap:8px}
.pp-refresh .pp-contact-form .field label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--pp-ink)}
.pp-refresh .pp-contact-form input,.pp-refresh .pp-contact-form select,.pp-refresh .pp-contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #7b3fc6;border-radius:4px;background:#fff;color:var(--pp-ink);font:inherit;padding:13px 14px;box-shadow:0 8px 18px -18px rgba(33,22,49,.75)}
.pp-refresh .pp-contact-form input:focus,.pp-refresh .pp-contact-form select:focus,.pp-refresh .pp-contact-form textarea:focus{outline:2px solid var(--pp-lilac);outline-offset:2px;border-color:var(--pp-violet)}
.pp-refresh .pp-contact-form textarea{resize:vertical;min-height:140px}
.pp-refresh .pp-contact-form-note,.pp-refresh .pp-contact-form-status{margin:0;color:var(--pp-ink-2);font-size:.9rem;line-height:1.55}
.pp-refresh .pp-contact-form-status:empty{display:none}
.pp-refresh .pp-contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:700px){.pp-refresh .pp-contact-form-grid{grid-template-columns:1fr}}
.pp-refresh.about-page .about-pillar-card h2,
.pp-refresh.about-page .about-method-card h2,
.pp-refresh.about-page .about-publisher-card h2{color:var(--pp-ink)}
.pp-refresh.about-page .about-pillar-card p,
.pp-refresh.about-page .about-method-card p,
.pp-refresh.about-page .about-method-card li,
.pp-refresh.about-page .about-publisher-card p{color:var(--pp-ink-2);line-height:1.68}
.pp-refresh.about-page .about-pillar-card,
.pp-refresh.about-page .about-method-card,
.pp-refresh.about-page .about-publisher-card{border-width:1px;border-style:solid;border-color:var(--pp-line)}

/* Keep the selected primary route visible and visually consistent across pages. */
.pp-refresh .nav-links>a,
.pp-refresh .nav-dropdown-link{border:1px solid transparent;border-radius:999px}
.pp-refresh .nav-links>a[aria-current="page"],
.pp-refresh .nav-dropdown-link[aria-current="page"]{color:#fff;background:var(--pp-violet);border-color:var(--pp-violet);box-shadow:0 8px 18px -14px rgba(33,22,49,.8)}
.pp-refresh .nav-links>a[aria-current="page"]::after,
.pp-refresh .nav-dropdown-link[aria-current="page"]::after{background:#fff}

/* Keep the active state identical to the legacy navigation and remove underlines. */
.pp-refresh .nav-links>a::after,.pp-refresh .nav-dropdown-link::after{display:none!important;transform:none!important}
.pp-refresh .nav-links>a:hover,.pp-refresh .nav-dropdown-link:hover{color:var(--pp-ink-2);background:transparent;border-color:transparent}
.pp-refresh .nav-links>a[aria-current="page"],.pp-refresh .nav-dropdown-link[aria-current="page"]{color:#fff;background:var(--pp-violet);border-color:var(--pp-violet);border-radius:999px;box-shadow:0 8px 18px -14px rgba(33,22,49,.8)}

/* Keep the Journal active state identical to every other primary item. */
.pp-refresh .nav-links>a[href$="blog.html"][aria-current="page"]{color:#fff!important;background:var(--pp-violet)!important;border-color:var(--pp-violet)!important;border-radius:999px;box-shadow:0 8px 18px -14px rgba(33,22,49,.8);font-weight:800}

/* Keep active and inactive primary labels identical across the refreshed shell. */
.pp-refresh .nav-inner .nav-links>a,
.pp-refresh .nav-inner .nav-links>a[aria-current="page"],
.pp-refresh .nav-inner .nav-dropdown-link,
.pp-refresh .nav-inner .nav-dropdown-link[aria-current="page"]{
  font-family:'Inter',Arial,sans-serif;
  font-size:.85rem;
  font-weight:700!important;
  letter-spacing:.01em;
  line-height:1;
}

@media(max-width:1040px){
  .pp-refresh .nav-mega{right:-80px;width:min(820px,calc(100vw - 30px))}
  .pp-refresh .nav-mega-grid{grid-template-columns:repeat(2,1fr)}
  .pp-refresh .catalogue-grid,
  .pp-refresh .catalogue-subcategory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-refresh .catalogue-standard-grid{gap:35px}
}
@media(max-width:760px){
  .pp-refresh .nav-dropdown{width:100%}.pp-refresh .nav-dropdown-row{justify-content:space-between}.pp-refresh .nav-dropdown-link{flex:1}.pp-refresh .nav-dropdown-toggle{padding:11px 10px}
  .pp-refresh .nav-mega{display:none;position:static;width:100%;padding:16px;margin-top:6px;opacity:1;visibility:visible;transform:none;box-shadow:none;background:#f7f0f7}
  .pp-refresh .nav-dropdown.open .nav-mega{display:block}.pp-refresh .nav-dropdown:hover .nav-mega:not(:focus-within){display:none}.pp-refresh .nav-dropdown.open:hover .nav-mega{display:block}
  .pp-refresh .nav-mega-intro{display:block}.pp-refresh .nav-mega-intro strong{display:block;margin:7px 0}.pp-refresh .nav-mega-intro p{margin:0}
  .pp-refresh .nav-mega-grid{grid-template-columns:1fr;padding:14px 0;gap:14px}.pp-refresh .nav-links .nav-mega-grid a{padding:4px 0}
  .pp-refresh .catalogue-department-grid,.pp-refresh .catalogue-controls,.pp-refresh .catalogue-standard-grid{grid-template-columns:1fr}
  .pp-refresh .catalogue-department {
    display:flex;
    flex-direction:column;
    min-height: auto;
  }
  .pp-refresh .department-image-container {
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    width:calc(100% - 40px);
    max-width:none;
    height:280px;
    margin:20px;
    aspect-ratio:auto;
  }
  .pp-refresh .department-corner-art {
    right:18px;
    bottom:18px;
    width:27%;
    max-width:130px;
  }
  .pp-refresh .department-card-content {
    width:100%;
    min-height:0;
    margin-left:0;
    padding:8px 24px 140px;
  }
  .pp-refresh .catalogue-department ul {
    grid-template-columns: 1fr;
  }
  .pp-refresh .catalogue-grid,
  .pp-refresh .catalogue-subcategory-grid{grid-template-columns:1fr}.pp-refresh .catalogue-product-card{max-width:none}
  .pp-refresh .catalogue-subcategory{padding:14px}.pp-refresh .catalogue-subcategory-head{align-items:flex-start;flex-direction:column;gap:8px}
  .pp-refresh .product-next-grid{display:block}.pp-refresh .product-next-grid .hero-actions{margin-top:28px}
}

/* Dynamic Detail Drawer Amazon-Style Gallery */
.pp-refresh .detail-panel h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.05;
  margin: 12px 0;
}
.pp-refresh .modal-brand {
  color: var(--pp-rose);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pp-refresh .modal-benefits-list {
  padding-left: 20px;
  margin: 10px 0;
}
.pp-refresh .modal-benefits-list li {
  font-size: 0.88rem;
  color: var(--pp-ink-2);
  margin: 6px 0;
}
.pp-refresh .modal-info-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-line);
}
.pp-refresh .modal-info-block h3 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 12px;
}
.pp-refresh .modal-info-block p {
  font-size: 0.88rem;
  color: var(--pp-ink-2);
  line-height: 1.5;
}
.pp-refresh .modal-facts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.pp-refresh .modal-facts-table tr {
  border-bottom: 1px solid rgba(33,22,49,.08);
}
.pp-refresh .modal-facts-table tr:last-child {
  border-bottom: 0;
}
.pp-refresh .modal-facts-table td {
  padding: 10px 0;
  vertical-align: top;
}
.pp-refresh .modal-facts-table td:first-child {
  font-weight: 700;
  color: var(--pp-ink-2);
  width: 120px;
}
.pp-refresh .modal-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-refresh .modal-actions .affiliate-disclosure{margin:0}
.pp-refresh .modal-actions .btn {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}

/* Legal and transparency pages */
.pp-refresh .legal-hero {
  padding: 110px 0 54px;
  background: #fffdf9;
  border-bottom: 1px solid var(--pp-line);
}
.pp-refresh .legal-hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .9;
  margin: 18px 0;
}
.pp-refresh .legal-hero p {
  max-width: 62ch;
  color: var(--pp-ink-2);
  font-size: 1.08rem;
}
.pp-refresh .legal-section {
  padding: 70px 0 90px;
  background: var(--pp-paper);
}
.pp-refresh .legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.pp-refresh .legal-content {
  max-width: 78ch;
}
.pp-refresh .legal-content h2,
.pp-refresh .legal-card h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  margin: 34px 0 10px;
}
.pp-refresh .legal-content h2:first-of-type {
  margin-top: 0;
}
.pp-refresh .legal-content p,
.pp-refresh .legal-content li,
.pp-refresh .legal-card p {
  color: var(--pp-ink-2);
  line-height: 1.68;
}
.pp-refresh .legal-content ul {
  padding-left: 20px;
}
.pp-refresh .legal-source-list a {
  color: var(--pp-violet);
  font-weight: 800;
}
.pp-refresh .legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0 24px;
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  background: #fff;
}
.pp-refresh .legal-vendor-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: .86rem;
  line-height: 1.45;
}
.pp-refresh .legal-vendor-table th,
.pp-refresh .legal-vendor-table td {
  padding: 14px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--pp-line);
}
.pp-refresh .legal-vendor-table th {
  background: #f0e6fa;
  color: var(--pp-ink);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pp-refresh .legal-vendor-table tr:last-child td { border-bottom: 0; }
.pp-refresh .legal-updated {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-violet) !important;
}
.pp-refresh .legal-card {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--pp-line);
  padding: 24px;
  box-shadow: var(--pp-shadow);
}
.pp-refresh .legal-card h2 {
  margin-top: 0;
}
.pp-refresh .legal-card .btn {
  width: 100%;
  margin-top: 12px;
}
.pp-refresh .detail-header {
  min-height: 68px;
}
.pp-refresh .detail-close {
  display: grid;
  place-items: center;
  line-height: 1;
  font-family: Inter, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}
.pp-refresh .detail-close::first-letter {
  text-decoration: none;
}
@media(max-width:760px){
  .pp-refresh .legal-layout{grid-template-columns:1fr}
  .pp-refresh .legal-card{position:static}
}

/* Card and PDP media geometry lives in one place, at the end of this file.
   It used to be repeated here with !important, which beat every later rule
   and made the frame impossible to adjust from anywhere else. */

/* =========================================================================
   BUTTONS - one system, two surfaces.

   The previous pass gave .btn, .btn-primary and .btn-secondary an identical
   finish: white fill, gold edge, ink text. Two consequences, both live on the
   site until now.

   1. There was no such thing as a primary button. Every call to action on
      every page carried the same weight, so marking one action as the
      dominant one had no visible effect at all.

   2. The fill is painted with `linear-gradient(#fff,#fff) padding-box`, not
      background-color. On a dark band that reads as a white button, so
      index.html carried an inline `color:#fff` to make its label "white on
      dark" - except the label sits on the button, not the band. White on
      white: a contrast ratio of 1.00, an invisible button.

   THE RULE, stated once:
       the primary button is the highest-contrast SOLID block against the
       surface behind it; the secondary is the OUTLINE of that same shape.

   So the pair inverts on a dark band rather than being patched per section.
   Add `.on-dark` to any new dark surface and its buttons follow automatically.
   ========================================================================= */

/* ---- shared shape and finish ------------------------------------------- */
.pp-refresh .btn,
.pp-refresh .btn-primary,
.pp-refresh .btn-secondary {
  position: relative;
  isolation: isolate;
  border: 1.5px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 26px -20px rgba(33,22,49,.5);
}

/* ---- light surface (the default) --------------------------------------- */
/* Primary: solid ink. The one thing to click. */
.pp-refresh .btn-primary {
  background:
    linear-gradient(var(--pp-ink), var(--pp-ink)) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: #fff;
}
.pp-refresh .btn-primary:hover,
.pp-refresh .btn-primary:focus-visible {
  background:
    linear-gradient(var(--pp-plum), var(--pp-plum)) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: #fff;
}

/* Secondary, and a bare .btn with no variant: the outline version.
   `:not(.btn-primary)` matters: every button in the markup carries
   class="btn btn-primary", so a bare `.btn` selector here matches the
   primaries too - at equal specificity and later in the file, which silently
   repainted every primary button as an outline one. */
.pp-refresh .btn:not(.btn-primary),
.pp-refresh .btn-secondary {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: var(--pp-ink);
}
.pp-refresh .btn:not(.btn-primary):hover,
.pp-refresh .btn:not(.btn-primary):focus-visible,
.pp-refresh .btn-secondary:hover,
.pp-refresh .btn-secondary:focus-visible {
  background:
    linear-gradient(var(--pp-ink), var(--pp-ink)) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: #fff;
}

/* The sheen belongs to a pale fill; on a solid ink fill it only muddies it. */
.pp-refresh .btn:not(.btn-primary)::after,
.pp-refresh .btn-secondary::after {
  content: "";
  position: absolute;
  inset: 2px 12%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}
.pp-refresh .btn:not(.btn-primary):hover::after,
.pp-refresh .btn:not(.btn-primary):focus-visible::after,
.pp-refresh .btn-secondary:hover::after,
.pp-refresh .btn-secondary:focus-visible::after {
  opacity: 0;
}

/* ---- dark surface ------------------------------------------------------
   Every deep-purple band on the site, plus `.on-dark` for anything added
   later. The pair inverts: the solid block becomes white, because white is
   what carries highest contrast against ink - and the outline button gets a
   white edge and a WHITE label, which is the thing the inline style was
   reaching for and putting in the wrong place.

   NOT `.footer`. It is declared `background:#150d20` earlier in this file and
   then overridden to `#eee7f7` a line later, so it renders LIGHT despite
   reading as dark in the source. Every entry in this list was checked against
   its computed background on a live page rather than taken from the CSS - do
   the same before adding one. */
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) .btn-primary {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: var(--pp-ink);
}
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) .btn-primary:hover,
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) .btn-primary:focus-visible {
  background:
    linear-gradient(#e6d8f7, #e6d8f7) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: var(--pp-ink);
}

.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) :is(.btn:not(.btn-primary),.btn-secondary) {
  background: transparent;
  border-color: rgba(255,255,255,.62);
  color: #fff;
}
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) :is(.btn:not(.btn-primary),.btn-secondary):hover,
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) :is(.btn:not(.btn-primary),.btn-secondary):focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--pp-ink);
}
/* No sheen on a transparent button - it would glow against the dark band. */
.pp-refresh :is(.story-band,.catalog-hero,.trust-strip-section,.catalogue-standard-section,.review-corrections-section,.tutorial-product-callout,.journal-card,.on-dark) :is(.btn:not(.btn-primary),.btn-secondary)::after {
  opacity: 0;
}

/* Product comparison */
.pp-refresh .compare-card-button.is-selected {
  background:
    linear-gradient(var(--pp-ink), var(--pp-ink)) padding-box,
    linear-gradient(120deg, #9f6a12 0%, #f8e7a8 18%, #d79a37 38%, #fff5c7 58%, #b77b1d 78%, #f7d878 100%) border-box;
  color: #fff;
}

/* Shared control language: all catalogue controls use the same paper, ink,
   violet and gold system as the primary/secondary action buttons. */
.pp-refresh .catalogue-filter,
.pp-refresh .toolbar-button,
.pp-refresh .taxonomy-tile,
.pp-refresh .compare-tabs button {
  color:var(--pp-ink);
  border:1.5px solid var(--pp-line);
  background:var(--pp-paper);
  font-weight:700;
  transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.pp-refresh .catalogue-filter:hover,
.pp-refresh .toolbar-button:hover,
.pp-refresh .taxonomy-tile:hover,
.pp-refresh .compare-tabs button:hover,
.pp-refresh .catalogue-filter:focus-visible,
.pp-refresh .toolbar-button:focus-visible,
.pp-refresh .taxonomy-tile:focus-visible,
.pp-refresh .compare-tabs button:focus-visible {
  color:var(--pp-plum);
  border-color:var(--pp-amber);
  background:#fffaf0;
  transform:translateY(-1px);
}
.pp-refresh .catalogue-filter.active,
.pp-refresh .compare-tabs button.active {
  color:#fff;
  border-color:var(--pp-ink);
  background:var(--pp-ink);
}
.pp-refresh .nav-toggle,
.pp-refresh .nav-dropdown-toggle {
  color:var(--pp-ink);
  border:0;
  background:transparent;
}
.pp-refresh .catalog-thumb-btn,
.pp-refresh .product-pdp-thumb {
  color:var(--pp-ink);
  border-color:var(--pp-line);
  background:#fff;
}
.pp-refresh .catalog-thumb-btn.is-active,
.pp-refresh .product-pdp-thumb.active {
  border-color:var(--pp-violet);
  box-shadow:0 0 0 1px var(--pp-violet);
}

/* Card media geometry is set once, at the end of this file. Brand marks,
   icons and editorial collage art keep their own native proportions. */
.pp-refresh .product-pdp-gallery-static .product-pdp-stage {
  aspect-ratio:9 / 16;
}
.pp-refresh .catalogue-subcategory-actions {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 18px;
}
.pp-refresh .catalogue-subcategory-actions .btn {
  min-height: 42px;
  font-size: .8rem;
}
.pp-refresh .compare-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 95;
  width: min(100% - 32px, 980px);
  transform: translate(-50%, calc(100% + 34px));
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
}
.pp-refresh .compare-tray.open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.pp-refresh .compare-tray-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px;
  background: rgba(243, 233, 250, .98);
  border: 1px solid var(--pp-violet);
  box-shadow: 0 20px 46px -22px rgba(75, 36, 111, .46), 0 6px 18px rgba(33, 22, 49, .14);
  backdrop-filter: blur(18px);
}
.pp-refresh .compare-tray-count {
  display: block;
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--pp-violet);
  text-transform: uppercase;
}
.pp-refresh .compare-tray strong {
  display: block;
  max-width: 54ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-refresh .compare-tray-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.pp-refresh .btn.is-disabled {
  opacity: .55;
  pointer-events: none;
}
.pp-refresh.compare-page .compare-hero h1 {
  max-width: 11ch;
}
.pp-refresh .compare-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 22px;
}
.pp-refresh .compare-toolbar h2 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  margin: 10px 0 0;
}
.pp-refresh .compare-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pp-refresh .compare-warning p {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--pp-amber);
  background: #fff;
  color: var(--pp-ink-2);
}
.pp-refresh .compare-product-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.pp-refresh .compare-selected-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  position: relative;
  min-height: 128px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--pp-line);
}
.pp-refresh .compare-selected-card img {
  width: 84px;
  height: 104px;
  object-fit: contain;
  background: #fff;
}
.pp-refresh .compare-selected-card span,
.pp-refresh .compare-selected-card small {
  display: block;
  color: var(--pp-ink-2);
  font-size: .72rem;
}
.pp-refresh .compare-selected-card strong {
  display: block;
  margin: 4px 0 8px;
  font-size: .95rem;
  line-height: 1.15;
}
.pp-refresh .compare-selected-card button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  background: transparent;
  color: var(--pp-violet);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.pp-refresh .compare-suggestions {
  margin: 6px 0 22px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--pp-line);
}
.pp-refresh .compare-suggestions>div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pp-refresh .compare-suggestions button {
  border: 1px solid var(--pp-line);
  background: var(--pp-paper);
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 700;
}
.pp-refresh .compare-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 14px;
}
.pp-refresh .compare-tabs button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--pp-line);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}
.pp-refresh .compare-tabs button.active {
  background: var(--pp-ink);
  color: #fff;
}
.pp-refresh .compare-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--pp-violet);
  border-radius: 8px;
  background: var(--pp-paper);
  box-shadow: 0 22px 54px -28px rgba(75, 36, 111, .48), 0 8px 18px rgba(33, 22, 49, .1);
}
.pp-refresh .compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}
.pp-refresh .compare-table th,
.pp-refresh .compare-table td {
  width: 22%;
  min-width: 180px;
  padding: 16px;
  border-bottom: 1px solid var(--pp-line);
  border-right: 1px solid var(--pp-line);
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
}
.pp-refresh .compare-table th:first-child {
  width: 180px;
  min-width: 180px;
  color: var(--pp-violet);
  font: 800 .72rem Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pp-refresh .compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pp-plum);
  color: #fff;
  font: 700 1rem Fraunces, serif;
  letter-spacing: 0;
  text-transform: none;
}
.pp-refresh .compare-table thead th:first-child {
  background: var(--pp-plum);
  color: #fff;
}
.pp-refresh .compare-table td {
  color: var(--pp-ink-2);
  font-size: .9rem;
}
.pp-refresh .compare-table tbody tr:nth-child(odd) > * {
  background: #f5edfb;
}
.pp-refresh .compare-table tbody tr:nth-child(even) > * {
  background: #e9d9f3;
}
.pp-refresh .compare-table tbody th {
  color: var(--pp-plum);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pp-refresh .compare-table a {
  color: var(--pp-violet);
  font-weight: 800;
}
.pp-refresh .compare-empty {
  grid-column: 1 / -1;
}
@media(max-width:760px){
  .pp-refresh .compare-tray-inner,
  .pp-refresh .compare-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .pp-refresh .compare-tray-actions,
  .pp-refresh .compare-toolbar-actions {
    width: 100%;
  }
  .pp-refresh .compare-tray-actions .btn,
  .pp-refresh .compare-toolbar-actions .btn {
    flex: 1;
  }
  .pp-refresh .compare-tray strong {
    white-space: normal;
  }
  .pp-refresh .compare-product-strip {
    grid-template-columns: 1fr;
  }
}

/* Sale and promotion highlights */
.pp-refresh .catalog-sale-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  background: var(--pp-ink);
  color: #fff;
  border: 1px solid #d79a37;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -22px rgba(33,22,49,.8);
}
.pp-refresh.catalogue-page .catalog-card-media .catalog-sale-badge,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-sale-badge {
  order: 0;
  position: absolute;
}
.pp-refresh .sale-price-summary {
  display: grid;
  gap: 3px;
  margin: 14px 0 0;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid rgba(215,154,55,.42);
}
.pp-refresh .sale-price-summary .sale-now {
  color: var(--pp-ink);
  font-weight: 900;
  font-size: 1rem;
}
.pp-refresh .sale-price-summary .sale-was {
  color: var(--pp-ink-2);
  text-decoration: line-through;
  font-size: .82rem;
}
.pp-refresh .sale-price-summary small {
  color: var(--pp-violet);
  font-size: .72rem;
  font-weight: 800;
}
.pp-refresh .sale-detail-block,
.pp-refresh .spotlight-sale-summary {
  background: #fffaf0;
  border: 1px solid rgba(215,154,55,.42);
  padding: 14px;
}
.pp-refresh .sale-detail-block h3 {
  color: var(--pp-violet);
}
.pp-refresh .sale-detail-block strong,
.pp-refresh .spotlight-sale-summary strong {
  color: var(--pp-ink);
  font-weight: 900;
}
.pp-refresh .sale-detail-block span,
.pp-refresh .spotlight-sale-summary small {
  color: var(--pp-ink-2);
  margin-left: 8px;
}
.pp-refresh .spotlight-sale-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0;
}
.pp-refresh .spotlight-sale-summary[hidden] {
  display: none;
}
.pp-refresh .spotlight-sale-summary>span {
  flex: 0 0 100%;
  color: var(--pp-violet);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ===== Standardised affiliate disclosure (compliance) =====
   Starts with "Disclosure:", sits above the promotional content, no
   scrolling required, at least as large as body text, contrasting brand
   colour rather than grey. */
/* Rakuten's network policy (13 July 2026) requires the disclosure to be larger
   than the main text it precedes, coloured (not black or grey) and visible
   without scrolling. Root-page body copy tops out at 1.12rem. */
.pp-refresh .top-disclosure,
.pp-refresh .affiliate-disclosure{
  display:block;border:2px solid var(--pp-violet);border-left-width:6px;
  background:#f6f0ff;color:var(--pp-plum);padding:16px 18px;margin:0 0 26px;
  font-size:1.2rem;line-height:1.55;font-weight:500;border-radius:4px;
}
.pp-refresh .top-disclosure strong,
.pp-refresh .affiliate-disclosure strong{color:var(--pp-violet);font-weight:800}
.pp-refresh .top-disclosure a,
.pp-refresh .affiliate-disclosure a{color:var(--pp-violet);text-decoration:underline}
/* ===== Editorial (non-monetised) notice =====
   Visually distinct from the violet affiliate disclosure so a reader can tell
   at a glance whether a page carries a paid relationship. Deliberately calmer:
   an editorial notice states the absence of compensation, it is not a warning. */
.pp-refresh .editorial-notice{
  display:block;border:1px solid var(--pp-line);border-left:6px solid var(--pp-sage);
  background:#f7f8f4;color:#2f3a24;padding:16px 18px;margin:0 0 26px;
  font-size:1.2rem;line-height:1.55;font-weight:500;border-radius:4px;
}
.pp-refresh .editorial-notice strong{color:var(--pp-sage);font-weight:800}
.pp-refresh .editorial-notice a{color:var(--pp-sage);text-decoration:underline}

.pp-refresh .product-monetisation-badge{
  display:inline-block;margin:0 0 18px;padding:7px 12px;border-radius:999px;
  background:#eef1e8;color:#41502e;font-size:.82rem;font-weight:800;
  letter-spacing:.04em;border:1px solid rgba(117,138,85,.35);
}
.pp-refresh .product-monetisation-badge[data-status="affiliate_active"]{
  background:#f6f0ff;color:var(--pp-plum);border-color:rgba(123,63,198,.35);
}
.pp-refresh .retail-availability{
  margin:14px 0 0;padding:12px 14px;background:#faf8f5;border:1px dashed var(--pp-line);
  border-radius:4px;font-size:.95rem;color:var(--pp-ink-2);
}
.pp-refresh .retail-availability strong{color:var(--pp-ink)}
.pp-refresh .link-note{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:#eef1e8;color:#41502e;font-size:.75rem;font-weight:700;white-space:nowrap;
}
.pp-refresh .claim-attribution{
  font-size:.95rem;color:var(--pp-ink-2);font-style:italic;
  border-left:3px solid var(--pp-line);padding-left:14px;margin-bottom:14px;
}
.pp-refresh .product-editorial-status dl{display:grid;gap:10px;margin:0}
.pp-refresh .product-editorial-status dl>div{
  display:grid;grid-template-columns:minmax(160px,34%) 1fr;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--pp-line);
}
.pp-refresh .product-editorial-status dt{font-weight:800;color:var(--pp-ink)}
.pp-refresh .product-editorial-status dd{margin:0;color:var(--pp-ink-2)}
.pp-refresh .product-facts dl{display:grid;gap:10px;margin:0}
.pp-refresh .product-facts dl>div{
  display:grid;grid-template-columns:minmax(160px,34%) 1fr;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--pp-line);
}
.pp-refresh .product-facts dt{font-weight:800;color:var(--pp-ink)}
.pp-refresh .product-facts dd{margin:0;color:var(--pp-ink-2)}
.pp-refresh .product-sources ul{margin:0;padding-left:1.1em}
.pp-refresh .product-sources a{color:var(--pp-violet);text-decoration:underline}
@media (max-width:640px){
  .pp-refresh .product-editorial-status dl>div{grid-template-columns:1fr;gap:4px}
  .pp-refresh .product-facts dl>div{grid-template-columns:1fr;gap:4px}
}

.pp-refresh .catalog-hero .top-disclosure{max-width:70ch;margin-top:22px;color:var(--pp-plum)}
.pp-refresh .catalog-hero .top-disclosure strong{color:var(--pp-violet)}
.pp-refresh .contact-line{font-size:1.15rem;font-weight:700}
.pp-refresh .contact-line a{color:var(--pp-violet);text-decoration:underline}

/* ===== Privacy choices banner ===== */
.pp-refresh .pp-privacy-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:9999;display:grid;
  grid-template-columns:minmax(0,1fr);gap:14px;max-width:1280px;margin:0 auto;
  max-height:min(82dvh,680px);overflow-y:auto;padding:18px 26px;
  background:linear-gradient(135deg,#f5effb 0%,#ebe1f7 100%);
  border:1.5px solid var(--pp-violet);border-radius:10px;
  box-shadow:0 26px 70px -30px rgba(33,22,49,.62),0 0 0 5px rgba(123,63,198,.08);
  color:var(--pp-plum);
}
.pp-refresh .pp-privacy-copy{max-width:none}.pp-refresh .pp-privacy-heading{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;min-width:0}
.pp-refresh .pp-privacy-banner strong{display:block;flex:0 0 auto;color:var(--pp-ink);font-weight:900;margin:0}
.pp-refresh .pp-privacy-banner p{margin:0;color:#40304f;font-size:.9rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.pp-refresh .pp-privacy-banner a{display:inline-block;margin-top:6px;color:var(--pp-violet);font-size:.84rem;font-weight:800;text-decoration:underline}
.pp-refresh .pp-privacy-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.pp-refresh .pp-privacy-actions .btn{min-height:48px;padding:12px 14px;white-space:normal;overflow-wrap:anywhere;font-size:.86rem;line-height:1.25}
.pp-refresh .pp-privacy-actions .btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.pp-refresh .pp-privacy-details{padding-top:16px;border-top:1px solid rgba(96,56,145,.22);color:#40304f}
.pp-refresh .pp-privacy-details-heading{margin-bottom:12px}.pp-refresh .pp-privacy-details strong{margin-bottom:2px}
.pp-refresh .pp-privacy-options{display:grid;gap:10px;margin:0;padding:0;border:0}
.pp-refresh .pp-privacy-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:12px 14px;background:rgba(255,255,255,.66);border:1px solid rgba(96,56,145,.24);border-radius:8px;cursor:pointer}
.pp-refresh .pp-privacy-option:hover{background:rgba(255,255,255,.9);border-color:rgba(96,56,145,.5)}
.pp-refresh .pp-privacy-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--pp-violet)}
.pp-refresh .pp-privacy-option strong{margin:0;color:var(--pp-ink)}
.pp-refresh .pp-privacy-option small{display:block;margin-top:3px;color:#40304f;font-size:.82rem;line-height:1.45}
.pp-refresh .pp-privacy-essential{display:grid;grid-template-columns:minmax(150px,.35fr) minmax(0,1fr);gap:12px;padding:12px 14px;color:#40304f;background:rgba(255,255,255,.36);border-left:3px solid var(--pp-violet);border-radius:0 7px 7px 0;font-size:.84rem;line-height:1.45}
.pp-refresh .pp-privacy-essential strong{margin:0;color:var(--pp-ink)}
.pp-refresh .pp-privacy-detail-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.pp-refresh .pp-privacy-detail-actions .btn{min-height:44px;padding:10px 16px}.pp-refresh .pp-privacy-status{color:#40304f;font-size:.82rem;font-weight:700}
.pp-refresh .pp-privacy-gpc{margin-top:8px!important;color:var(--pp-violet)!important}
@media (max-width:1040px){
  .pp-refresh .pp-privacy-heading{grid-template-columns:1fr;gap:4px}
}
@media (max-width:880px){
  .pp-refresh .pp-privacy-banner{left:12px;right:12px;bottom:12px;max-height:calc(100dvh - 24px);padding:20px}
  .pp-refresh .pp-privacy-actions{grid-template-columns:1fr}
  .pp-refresh .pp-privacy-actions .btn{width:100%}
  .pp-refresh .pp-privacy-essential{grid-template-columns:1fr;gap:4px}
}

/* ===== Product detail gallery =====
   One large image with a thumbnail rail alongside it. Assets are generated at
   optimize-images.py at 1000x1250 (4:5) by default, or at another ratio when
   it is run with --aspect (9:16 -> 1000x1778 for full-bleed vertical masters).
   The stage frame follows the image: .is-portrait gives it 4:5 and .is-tall
   gives it 9:16, both set from the image's own dimensions, so the main frame
   and the thumbnails fill edge to edge with no letterboxing. */
.pp-refresh .modal-media-gallery{
  display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;
  align-items:start;margin-bottom:26px;background:#fff;padding:14px;
  border:1px solid var(--pp-line);border-radius:14px;
}
.pp-refresh .modal-media-thumbs{
  display:flex;flex-direction:column;gap:12px;
  max-height:min(76dvh,760px);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
}
.pp-refresh .modal-media-thumb{
  flex:0 0 auto;width:70px;aspect-ratio:1/1;padding:0;
  border:1px solid var(--pp-line);border-radius:9px;background:#fff;
  cursor:pointer;overflow:hidden;position:relative;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.pp-refresh .modal-media-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.pp-refresh .modal-media-thumb:hover{border-color:var(--pp-violet)}
.pp-refresh .modal-media-thumb.active{
  border-color:var(--pp-violet);
  box-shadow:0 0 0 2px var(--pp-violet) inset;
}
.pp-refresh .modal-media-thumb:focus-visible{outline:2px solid var(--pp-violet);outline-offset:2px}
.pp-refresh .modal-media-thumb.video-thumb::after{
  content:"\25B6";position:absolute;inset:0;background:rgba(33,22,49,.42);
  color:#fff;display:grid;place-items:center;font-size:1.1rem;
}
.pp-refresh .modal-media-viewport{
  aspect-ratio:1/1;width:100%;min-height:440px;max-height:min(70dvh,640px);background:#fff;overflow:hidden;
  border:0;border-radius:8px;position:relative;display:grid;place-items:center;
}
.pp-refresh .modal-media-viewport img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  transform:none;transform-origin:center;
}
.pp-refresh .modal-media-viewport video{
  display:block;width:100%;height:100%;object-fit:contain;background:#0d0716;
}
/* The drawer is a fixed-width panel, so this responds to the drawer's own
   width rather than the window's. A viewport media query stacked the rail even
   on desktop, where there was ample room beside the image. */
.pp-refresh .detail-content{container-type:inline-size}

@container (max-width:400px){
  .pp-refresh .modal-media-gallery{grid-template-columns:1fr;gap:10px}
  .pp-refresh .modal-media-thumbs{
    flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    order:2;padding-bottom:4px;
  }
  .pp-refresh .modal-media-thumb{width:62px}
  .pp-refresh .modal-media-viewport{order:1;border-radius:10px;min-height:0}
  .pp-refresh .modal-media-viewport img{transform:none}
}

/* Fallback for browsers without container queries: only stack on real phones. */
@supports not (container-type: inline-size){
  @media (max-width:420px){
    .pp-refresh .modal-media-gallery{grid-template-columns:1fr;gap:10px}
    .pp-refresh .modal-media-thumbs{
      flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;order:2;
    }
    .pp-refresh .modal-media-thumb{width:62px}
    .pp-refresh .modal-media-viewport{order:1;min-height:0}
    .pp-refresh .modal-media-viewport img{transform:none}
  }
}

/* ===== Dedicated product detail page ===== */
.pp-refresh.product-detail-page{padding-bottom:0}
.pp-refresh .product-pdp{padding:34px 0 42px;background:var(--pp-paper)}
.pp-refresh .product-breadcrumb{display:flex;gap:9px;align-items:center;margin-bottom:24px;font-size:.82rem;color:var(--pp-ink-2)}
.pp-refresh .product-breadcrumb a{font-weight:800;color:var(--pp-violet)}
.pp-refresh .product-pdp-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:clamp(30px,5vw,72px);align-items:start}
.pp-refresh .product-pdp-gallery{position:sticky;top:94px;display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;align-items:start}
.pp-refresh .product-pdp-thumbs{display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 114px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.pp-refresh .product-pdp-thumb{width:74px;aspect-ratio:1;border:1.5px solid #d79a37;border-radius:8px;background:#fff;padding:0;overflow:hidden;cursor:pointer;position:relative;flex:0 0 auto}
.pp-refresh .product-pdp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pp-refresh .product-pdp-thumb.active{border-color:var(--pp-violet);box-shadow:inset 0 0 0 2px var(--pp-violet)}
.pp-refresh .product-pdp-thumb:focus-visible{outline:2px solid var(--pp-violet);outline-offset:3px}
.pp-refresh .product-pdp-thumb.is-video::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;background:rgba(33,22,49,.42);color:#fff;font-size:1rem}
.pp-refresh .product-pdp-stage{justify-self:center;width:min(100%,calc(100dvh - 230px));aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:#fff;border:1.5px solid #d79a37;border-radius:8px;position:relative;isolation:isolate}
.pp-refresh .product-pdp-stage.is-portrait{width:min(100%,calc((100dvh - 230px) * .8));aspect-ratio:4 / 5}
/* A 9:16 master is narrower than 4:5 and would pillarbox in the portrait frame. */
.pp-refresh .product-pdp-stage.is-tall{width:min(100%,calc((100dvh - 230px) * 0.5625));aspect-ratio:9 / 16}
.pp-refresh .product-pdp-stage img,.pp-refresh .product-pdp-stage video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .18s ease;transform-origin:var(--zoom-x,50%) var(--zoom-y,50%)}
.pp-refresh .product-pdp-stage.is-zooming img{transform:scale(1.45)}
.pp-refresh .product-pdp-stage video{background:#130c1f}
.pp-refresh .product-pdp-gallery-static{grid-template-columns:minmax(0,1fr)}
.pp-refresh .product-pdp-gallery-static .product-pdp-stage{grid-column:1;width:100%;max-width:none;aspect-ratio:1}
.pp-refresh .product-pdp-gallery-static .product-gallery-disclosure,
.pp-refresh .product-pdp-gallery-static .product-gallery-actions,
.pp-refresh .product-pdp-gallery-static .retail-availability{grid-column:1;width:100%;box-sizing:border-box}
.pp-refresh .product-pdp-copy{min-width:0;padding-bottom:28px}
.pp-refresh .product-pdp-copy h1{font-size:clamp(2.4rem,4.2vw,4.7rem);line-height:.95;margin:13px 0 20px}
.pp-refresh .product-pdp-copy .taxonomy-breadcrumb{margin-bottom:22px}
.pp-refresh .product-pdp-summary{font-size:1.05rem;line-height:1.55;color:var(--pp-ink-2);margin-bottom:22px}
.pp-refresh .product-pdp-gallery>.retail-availability{grid-column:1/-1;width:100%;box-sizing:border-box}
.pp-refresh .product-gallery-disclosure{grid-column:1/-1;margin:0!important}.pp-refresh .product-gallery-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.pp-refresh .product-gallery-actions .btn{min-height:50px}
.pp-refresh .product-promo{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 12px;padding:14px 16px;margin:0 0 20px;border:1.5px solid #d79a37;background:#fff8e8}
.pp-refresh .product-promo strong{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-violet)}
.pp-refresh .product-promo span{font:600 1.25rem Fraunces,serif}.pp-refresh .product-promo small{font-size:.78rem;color:var(--pp-ink-2)}
.pp-refresh .product-purchase-card{padding:22px;background:#fff;border:1.5px solid #d79a37;border-radius:8px}
.pp-refresh .product-purchase-card h2{font-size:1.4rem;margin:0 0 7px}.pp-refresh .product-purchase-card>p:not(.affiliate-disclosure){font-size:.9rem;color:var(--pp-ink-2);line-height:1.45;margin:0 0 16px}
.pp-refresh .product-purchase-card .affiliate-disclosure{margin:0}.pp-refresh .product-detail-section{margin-top:22px;padding:24px;background:#fff;border:1.5px solid #d79a37;border-radius:8px}
.pp-refresh .product-detail-section h2{font-size:1.35rem;margin:0 0 12px}.pp-refresh .product-detail-section p,.pp-refresh .product-detail-section li{color:var(--pp-ink-2);line-height:1.55}.pp-refresh .product-detail-section li+li{margin-top:8px}.pp-refresh .product-detail-section dl{display:grid;gap:0;margin:0}.pp-refresh .product-detail-section dl>div{display:grid;grid-template-columns:minmax(140px,34%) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--pp-line)}.pp-refresh .product-detail-section dl>div:first-child{border-top:0;padding-top:0}.pp-refresh .product-detail-section dt{font-weight:800;color:var(--pp-ink)}.pp-refresh .product-detail-section dd{margin:0;color:var(--pp-ink-2);line-height:1.5}
.pp-refresh .product-fact-list{display:grid;gap:0;margin:0}.pp-refresh .product-fact-list>div{display:grid;grid-template-columns:minmax(140px,34%) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--pp-line)}.pp-refresh .product-fact-list>div:first-child{border-top:0;padding-top:0}.pp-refresh .product-fact-list dt{font-weight:800;color:var(--pp-ink)}.pp-refresh .product-fact-list dd{margin:0;color:var(--pp-ink-2);line-height:1.5}
.pp-refresh .product-detail-actions{display:flex;flex-wrap:wrap;gap:10px}.pp-refresh .product-detail-actions .btn{min-height:46px}
.pp-refresh .product-not-found{min-height:55dvh;display:grid;place-items:center;text-align:center}.pp-refresh .product-not-found h1{font-size:clamp(2.4rem,5vw,4.8rem);max-width:12ch;margin:16px auto}.pp-refresh .product-not-found p{max-width:56ch;margin:0 auto 24px;color:var(--pp-ink-2)}
.pp-refresh .not-found-main{min-height:calc(100dvh - 190px);display:grid;align-items:center}.pp-refresh .not-found-route{padding:clamp(42px,7vw,96px) 0}.pp-refresh .not-found-route-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,76px);align-items:center}.pp-refresh .not-found-copy{max-width:38rem}.pp-refresh .not-found-copy h1{font-size:clamp(3.1rem,6vw,6.2rem);line-height:.94;max-width:8ch;margin:16px 0 22px}.pp-refresh .not-found-copy p{max-width:39ch;color:var(--pp-ink-2);font-size:1.06rem;line-height:1.5}.pp-refresh .not-found-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.pp-refresh .not-found-visual{position:relative;margin:0;overflow:hidden;border:1px solid var(--pp-gold);border-radius:8px;background:#f4edf7;box-shadow:0 22px 45px rgba(40,22,58,.16)}.pp-refresh .not-found-visual::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;border:8px solid rgba(255,255,255,.42)}.pp-refresh .not-found-visual img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:16/9;object-fit:cover;animation:pp-route-drift 9s ease-in-out infinite alternate}.pp-refresh .not-found-fallback{position:absolute;z-index:0;inset:0;overflow:hidden;background:#eee4f2}.pp-refresh .route-sheet{position:absolute;display:block;border:1px solid var(--pp-gold);background:#fbf8fd;box-shadow:0 16px 30px rgba(40,22,58,.14)}.pp-refresh .route-sheet-back{width:57%;height:78%;left:13%;top:8%;transform:rotate(-8deg);animation:pp-route-paper 6s ease-in-out infinite alternate}.pp-refresh .route-sheet-front{width:54%;height:74%;right:8%;bottom:7%;transform:rotate(7deg);animation:pp-route-paper 7s .6s ease-in-out infinite alternate-reverse}.pp-refresh .route-path{position:absolute;z-index:1;width:40%;height:31%;border:3px dashed var(--pp-purple);border-left:0;border-top:0;border-radius:0 0 58% 0;opacity:.78;animation:pp-route-wander 4.4s ease-in-out infinite}.pp-refresh .route-path-one{left:22%;top:23%;transform:rotate(12deg)}.pp-refresh .route-path-two{right:16%;bottom:19%;transform:rotate(190deg);animation-delay:-2.2s}.pp-refresh .route-compass{position:absolute;z-index:2;width:84px;height:84px;right:13%;top:14%;border:2px solid var(--pp-gold);border-radius:50%;background:#fffdf9;box-shadow:0 10px 18px rgba(40,22,58,.16);animation:pp-route-compass 8s linear infinite}.pp-refresh .route-compass::before,.pp-refresh .route-compass::after,.pp-refresh .route-compass i{content:"";position:absolute;left:50%;top:50%;width:2px;height:62%;background:var(--pp-purple);transform-origin:50% 0}.pp-refresh .route-compass::before{transform:translate(-50%,-1px) rotate(45deg)}.pp-refresh .route-compass::after{transform:translate(-50%,-1px) rotate(-45deg)}.pp-refresh .route-compass i{height:72%;background:var(--pp-gold);transform:translate(-50%,-1px) rotate(90deg)}.pp-refresh .route-marker{position:absolute;z-index:2;width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--pp-raspberry);box-shadow:0 4px 10px rgba(40,22,58,.16);animation:pp-route-marker 2.6s ease-in-out infinite alternate}.pp-refresh .route-marker-one{left:33%;top:36%}.pp-refresh .route-marker-two{right:26%;bottom:25%;animation-delay:-1.3s}.pp-refresh .not-found-visual.visual-fallback{min-height:0;aspect-ratio:16/9}.pp-refresh .not-found-visual figcaption{position:absolute;z-index:4;right:18px;bottom:16px;max-width:24ch;padding:8px 10px;background:rgba(255,255,255,.9);color:var(--pp-ink);font:700 .7rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.pp-refresh .not-found-visual:hover img{animation-play-state:paused}.pp-refresh .not-found-visual:hover{box-shadow:0 28px 56px rgba(40,22,58,.22)}@keyframes pp-route-drift{from{transform:scale(1.015) translate3d(-.4%,.15%,0)}to{transform:scale(1.075) translate3d(.45%,-.25%,0)}}@keyframes pp-route-paper{from{translate:0 0}to{translate:0 -8px}}@keyframes pp-route-wander{0%,100%{border-color:var(--pp-purple);opacity:.42}50%{border-color:var(--pp-raspberry);opacity:1}}@keyframes pp-route-compass{to{transform:rotate(360deg)}}@keyframes pp-route-marker{to{translate:0 -11px;box-shadow:0 15px 16px rgba(40,22,58,.12)}}@media(max-width:780px){.pp-refresh .not-found-route-grid{grid-template-columns:1fr}.pp-refresh .not-found-copy h1{max-width:10ch}.pp-refresh .not-found-visual{order:-1}.pp-refresh .not-found-visual figcaption{font-size:.62rem;right:12px;bottom:12px}.pp-refresh .not-found-actions .btn{flex:1 1 180px;text-align:center}.pp-refresh .route-compass{width:62px;height:62px}}@media(prefers-reduced-motion:reduce){.pp-refresh .not-found-visual img,.pp-refresh .route-sheet,.pp-refresh .route-path,.pp-refresh .route-compass,.pp-refresh .route-marker{animation:none}}
/* The 404 illustration is deliberately CSS-only so it remains available even when media files are unavailable. */
.pp-refresh .not-found-visual{aspect-ratio:16/9;background:#d8c3e4}
.pp-refresh .not-found-fallback{position:relative;z-index:1;display:block;width:100%;height:100%;background:#d8c3e4}
.pp-refresh .not-found-fallback::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.68);border-radius:4px}
.pp-refresh .route-sheet{border:2px solid rgba(255,255,255,.85);box-shadow:0 20px 34px rgba(40,22,58,.2)}
.pp-refresh .route-sheet-back{width:50%;height:69%;left:11%;top:11%;background:#aa82bf;transform:rotate(-9deg)}
.pp-refresh .route-sheet-front{width:53%;height:70%;right:9%;bottom:8%;background:#f8eff8;transform:rotate(8deg)}
.pp-refresh .route-journal{position:absolute;z-index:2;left:18%;bottom:16%;width:25%;height:40%;border:2px solid #fff;border-radius:3px;background:var(--pp-plum);box-shadow:0 14px 25px rgba(40,22,58,.25);transform:rotate(-10deg);animation:pp-route-journal 5s ease-in-out infinite alternate}
.pp-refresh .route-journal::before,.pp-refresh .route-journal::after{content:"";position:absolute;left:18%;right:18%;height:2px;background:var(--pp-gold)}
.pp-refresh .route-journal::before{top:27%}.pp-refresh .route-journal::after{top:42%;right:31%}
.pp-refresh .route-matcha{position:absolute;z-index:3;right:19%;top:17%;width:23%;aspect-ratio:1;border:8px solid #fdfafc;border-radius:50%;background:#4f8a56;box-shadow:0 10px 22px rgba(40,22,58,.22);animation:pp-route-matcha 6.5s ease-in-out infinite alternate}
.pp-refresh .route-matcha::before{content:"";position:absolute;inset:27%;border:2px solid rgba(255,255,255,.52);border-radius:50%}
.pp-refresh .route-leaf{position:absolute;z-index:3;width:34px;height:68px;border:2px solid #fff;border-radius:100% 0 100% 0;background:#8eb17d;box-shadow:0 7px 13px rgba(40,22,58,.18)}
.pp-refresh .route-leaf-one{right:12%;bottom:18%;transform:rotate(35deg);animation:pp-route-leaf 4s ease-in-out infinite alternate}.pp-refresh .route-leaf-two{right:8%;bottom:28%;transform:rotate(-28deg);animation:pp-route-leaf 4.8s .5s ease-in-out infinite alternate-reverse}
.pp-refresh .route-path{z-index:4;border-color:var(--pp-purple);border-width:3px}.pp-refresh .route-compass{z-index:5;background:#fffdf9}.pp-refresh .route-marker{z-index:5}.pp-refresh .not-found-visual figcaption{z-index:6}
@keyframes pp-route-journal{from{translate:0 0;rotate:0deg}to{translate:0 -10px;rotate:2deg}}@keyframes pp-route-matcha{from{translate:0 0;scale:1}to{translate:-5px 7px;scale:1.04}}@keyframes pp-route-leaf{to{translate:-4px -8px;rotate:8deg}}
@media(prefers-reduced-motion:reduce){.pp-refresh .route-journal,.pp-refresh .route-matcha,.pp-refresh .route-leaf{animation:none}}
@media (max-width:860px){.pp-refresh .product-pdp-layout{grid-template-columns:1fr;gap:30px}.pp-refresh .product-pdp-gallery{position:relative;top:auto;max-width:720px;width:100%;margin:0 auto}.pp-refresh .product-pdp-stage{width:min(100%,720px,calc(100dvh - 230px))}.pp-refresh .product-pdp-stage.is-portrait{width:min(100%,720px,calc((100dvh - 230px) * .8))}.pp-refresh .product-pdp-stage.is-tall{width:min(100%,720px,calc((100dvh - 230px) * 0.5625));aspect-ratio:9 / 16}.pp-refresh .product-pdp-copy{max-width:720px;width:100%;margin:0 auto}.pp-refresh .product-pdp-thumbs{max-height:calc(100dvh - 140px)}}
@media (max-width:560px){.pp-refresh .product-spotlight-media{min-height:0;padding:28px}.pp-refresh .product-spotlight-media .hero-actions{grid-template-columns:1fr}.pp-refresh .product-pdp{padding-top:22px}.pp-refresh .product-pdp-gallery{grid-template-columns:1fr;gap:12px}.pp-refresh .product-pdp-thumbs{order:2;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}.pp-refresh .product-pdp-thumb{width:62px}.pp-refresh .product-pdp-stage{order:1;width:min(100%,calc(100dvh - 190px));border-radius:6px}.pp-refresh .product-pdp-stage.is-portrait{width:min(100%,calc((100dvh - 190px) * .8))}.pp-refresh .product-pdp-stage.is-tall{width:min(100%,calc((100dvh - 190px) * 0.5625));aspect-ratio:9 / 16}.pp-refresh .product-gallery-disclosure{order:3}.pp-refresh .product-gallery-actions{order:4;grid-template-columns:1fr}.pp-refresh .product-pdp-copy h1{font-size:clamp(2.3rem,12vw,3.7rem)}.pp-refresh .product-purchase-card{padding:18px}}
@media (hover:none){.pp-refresh .product-pdp-stage.is-zooming img{transform:none}}

/* ===== Review methodology ===== */
.pp-refresh .review-method-hero{padding:74px 0 86px;background:linear-gradient(135deg,#fffaf5 0%,#f5ecf7 62%,#eee0f1 100%);border-bottom:1px solid var(--pp-line);overflow:hidden}
.pp-refresh .review-method-hero-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);gap:clamp(36px,7vw,90px);align-items:center}
.pp-refresh .review-method-hero-copy{max-width:600px}.pp-refresh .review-method-hero-copy h1{font-size:clamp(3.7rem,7.2vw,7.2rem);line-height:.9;margin:18px 0 26px;max-width:8ch}.pp-refresh .review-method-hero-copy h1 em{font-weight:500;color:var(--pp-rose)}
.pp-refresh .review-method-hero-copy>p{max-width:53ch;color:var(--pp-ink-2);font-size:1.1rem;line-height:1.55}.pp-refresh .review-trust-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;padding-top:22px;border-top:1px solid var(--pp-line)}.pp-refresh .review-trust-points span{display:grid;gap:7px;color:var(--pp-ink-2);font-size:.82rem;line-height:1.25}.pp-refresh .review-trust-points strong{color:var(--pp-violet);font-size:.72rem;letter-spacing:.12em}
.pp-refresh .review-method-hero-visual{position:relative;margin:0;min-width:0;border:1.5px solid var(--pp-amber);border-radius:8px;background:#fff;padding:10px;box-shadow:0 30px 65px -36px rgba(33,22,49,.42);transform:rotate(1.2deg)}.pp-refresh .review-method-hero-visual img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}.pp-refresh .review-method-hero-visual figcaption{position:absolute;right:24px;bottom:24px;padding:10px 14px;background:rgba(255,253,249,.94);color:var(--pp-ink);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.pp-refresh .review-principles-section{background:var(--pp-paper)}.pp-refresh .review-section-head{margin-bottom:38px}.pp-refresh .review-section-head h2{max-width:11ch}.pp-refresh .review-principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pp-refresh .review-principle-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--pp-amber);border-radius:8px;overflow:hidden;box-shadow:0 22px 45px -32px rgba(33,22,49,.5)}.pp-refresh .review-principle-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.pp-refresh .review-principle-body{display:flex;flex-direction:column;flex:1;padding:24px}.pp-refresh .review-principle-number{color:var(--pp-violet);font:600 2.6rem Fraunces,serif;line-height:1}.pp-refresh .review-principle-body h3{font-size:1.6rem;line-height:1.02;margin:12px 0}.pp-refresh .review-principle-body p{color:var(--pp-ink-2);font-size:.92rem;line-height:1.5}.pp-refresh .review-principle-body ul{display:grid;gap:8px;margin:20px 0 0;padding:16px 0 0 18px;border-top:1px solid var(--pp-line);color:var(--pp-ink-2);font-size:.82rem;line-height:1.4}
.pp-refresh .review-evidence-section{background:#f3eaf6}.pp-refresh .review-evidence-layout{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(38px,7vw,92px);align-items:start}.pp-refresh .review-evidence-layout h2{font-size:clamp(2.5rem,4.5vw,4.7rem);line-height:.95;max-width:8ch;margin:14px 0 18px}.pp-refresh .review-evidence-layout p{color:var(--pp-ink-2);max-width:36ch}.pp-refresh .review-evidence-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;background:#fff;border:1.5px solid var(--pp-amber);border-radius:8px;padding:8px 22px}.pp-refresh .review-evidence-list>div{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--pp-line)}.pp-refresh .review-evidence-list>div:nth-last-child(-n+2){border-bottom:0}.pp-refresh .review-evidence-list strong{font:600 1.35rem Fraunces,serif;color:var(--pp-ink)}.pp-refresh .review-evidence-list span{color:var(--pp-ink-2);font-size:.86rem;line-height:1.45}
.pp-refresh .review-states-section{background:#fffaf5}.pp-refresh .review-states-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pp-refresh .review-states-grid article{padding:26px;background:#fff;border:1.5px solid var(--pp-amber);border-radius:8px}.pp-refresh .review-states-grid article>span{display:block;color:var(--pp-violet);font-size:.7rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.pp-refresh .review-states-grid h3{font-size:1.45rem;line-height:1.02;margin:18px 0 10px}.pp-refresh .review-states-grid p{color:var(--pp-ink-2);font-size:.9rem;line-height:1.5}
.pp-refresh .review-corrections-section{padding:82px 0;background:var(--pp-ink);color:#fff}.pp-refresh .review-corrections-section h2{color:#fff;font-size:clamp(2.7rem,5vw,5.5rem);line-height:.95;max-width:10ch;margin:16px 0 20px}.pp-refresh .review-corrections-section p{max-width:58ch;color:rgba(255,255,255,.75);line-height:1.55}.pp-refresh .review-corrections-section a{color:var(--pp-lilac);font-weight:800;text-decoration:underline}.pp-refresh .review-corrections-section .eyebrow{color:var(--pp-lilac)}.pp-refresh .review-dates{margin-top:24px;font-size:.82rem}.pp-refresh .review-dates strong{color:#fff}
@media(max-width:900px){.pp-refresh .review-method-hero-grid,.pp-refresh .review-evidence-layout{grid-template-columns:1fr}.pp-refresh .review-method-hero-copy{max-width:700px}.pp-refresh .review-method-hero-visual{max-width:720px;width:100%;margin-inline:auto}.pp-refresh .review-principles-grid,.pp-refresh .review-states-grid{grid-template-columns:1fr 1fr}.pp-refresh .review-principle-card:last-child,.pp-refresh .review-states-grid article:last-child{grid-column:1/-1}}
@media(max-width:620px){.pp-refresh .review-method-hero{padding:48px 0 58px}.pp-refresh .review-method-hero-copy h1{font-size:clamp(3.2rem,15vw,5rem)}.pp-refresh .review-trust-points{grid-template-columns:1fr}.pp-refresh .review-principles-grid,.pp-refresh .review-states-grid,.pp-refresh .review-evidence-list{grid-template-columns:1fr}.pp-refresh .review-principle-card:last-child,.pp-refresh .review-states-grid article:last-child{grid-column:auto}.pp-refresh .review-evidence-list>div:nth-last-child(-n+2){border-bottom:1px solid var(--pp-line)}.pp-refresh .review-evidence-list>div:last-child{border-bottom:0}}
.pp-refresh .featured-section-visual-wrap{min-width:0}.pp-refresh .featured-section-visual-wrap>.eyebrow{display:block;margin-bottom:18px}.pp-refresh .monthly-featured-collage{position:relative;min-height:320px;isolation:isolate}.pp-refresh .monthly-featured-card{position:absolute;width:43%;aspect-ratio:4/5;margin:0;padding:9px;background:#fff;border:1.5px solid var(--pp-violet);border-radius:8px;box-shadow:0 25px 48px -27px rgba(33,22,49,.58);overflow:hidden;transition:transform .3s ease}.pp-refresh .monthly-featured-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}.pp-refresh .monthly-featured-card-one{left:0;top:8%;transform:rotate(-7deg);z-index:1}.pp-refresh .monthly-featured-card-two{right:2%;top:0;transform:rotate(5deg);z-index:2}.pp-refresh .monthly-featured-card-three{left:28%;bottom:-1%;transform:rotate(2deg);z-index:3}.pp-refresh .monthly-featured-card:hover{z-index:4;transform:translateY(-5px) rotate(0deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="1"] .monthly-featured-card-one{left:27%;top:0;transform:rotate(4deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="1"] .monthly-featured-card-two{left:0;right:auto;top:12%;transform:rotate(-6deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="1"] .monthly-featured-card-three{right:0;left:auto;bottom:0;transform:rotate(7deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="2"] .monthly-featured-card-one{left:0;top:0;transform:rotate(-3deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="2"] .monthly-featured-card-two{right:0;top:12%;transform:rotate(7deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="2"] .monthly-featured-card-three{left:26%;bottom:-2%;transform:rotate(-5deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="3"] .monthly-featured-card-one{left:29%;top:0;transform:rotate(-4deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="3"] .monthly-featured-card-two{left:0;right:auto;top:13%;transform:rotate(6deg)}.pp-refresh .monthly-featured-collage[data-monthly-set="3"] .monthly-featured-card-three{right:0;left:auto;bottom:2%;transform:rotate(-6deg)}
@media(max-width:1040px){.pp-refresh .product-spotlight-section .section-head{grid-template-columns:1fr;gap:26px}.pp-refresh .monthly-featured-collage{max-width:440px}}
@media(max-width:760px){.pp-refresh .monthly-featured-collage{min-height:290px;max-width:390px}}
/* Publisher-to-social identity proof */
.pp-refresh .about-social-card{margin-top:34px;padding:24px;background:#f3eaf6;border:1.5px solid var(--pp-amber);border-radius:8px;box-shadow:0 18px 35px -28px rgba(33,22,49,.55)}
.pp-refresh .about-social-card h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:12px 0 10px}
.pp-refresh .about-social-card p{max-width:62ch;color:var(--pp-ink-2);line-height:1.6}
.pp-refresh .about-social-card a:not(.btn){color:var(--pp-violet);font-weight:700;overflow-wrap:anywhere}
.pp-refresh .about-social-card .btn{margin-top:8px}
/* Original-value layer for branded editorial product profiles */
.pp-refresh .product-editorial-value{padding:24px;background:#f7eff9;border:1.5px solid var(--pp-amber);border-radius:8px}
.pp-refresh .product-editorial-value>p{color:var(--pp-ink-2);line-height:1.55}
.pp-refresh .product-editorial-value dl{display:grid;gap:0;margin:18px 0 0}
.pp-refresh .product-editorial-value dl>div{display:grid;grid-template-columns:minmax(145px,.55fr) minmax(0,1.45fr);gap:18px;padding:12px 0;border-top:1px solid var(--pp-line)}
.pp-refresh .product-editorial-value dt{font-weight:800;color:var(--pp-ink)}
.pp-refresh .product-editorial-value dd{margin:0;color:var(--pp-ink-2);line-height:1.5}
.pp-refresh .product-editorial-value dd ul{margin:0;padding-left:18px}
@media(max-width:620px){.pp-refresh .product-editorial-value dl>div{grid-template-columns:1fr;gap:4px}}
@media(max-width:640px){.pp-refresh .product-detail-section dl>div,.pp-refresh .product-fact-list>div{grid-template-columns:1fr;gap:4px}}

/* Journal context collage: turns the open space beside the section heading into a useful editorial signal. */
.pp-refresh .journal-section-head{max-width:none;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);gap:clamp(42px,7vw,100px);align-items:center;text-align:left}
.pp-refresh .journal-section-copy{max-width:620px}
.pp-refresh .journal-section-visual{position:relative;min-height:390px;width:100%;max-width:510px;margin:0 auto}
.pp-refresh .journal-section-visual figure{position:absolute;width:44%;margin:0;padding:8px;background:var(--pp-paper);border:1.5px solid var(--pp-violet);border-radius:8px;box-shadow:0 18px 38px rgba(29,17,47,.18)}
.pp-refresh .journal-section-visual figure:nth-child(1){left:5%;top:7%;transform:rotate(-7deg);z-index:1}
.pp-refresh .journal-section-visual figure:nth-child(2){right:5%;top:20%;transform:rotate(5deg);z-index:2}
.pp-refresh .journal-section-visual figure:nth-child(3){left:30%;bottom:5%;transform:rotate(-2deg);z-index:3}
.pp-refresh .journal-section-visual img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:4px}
.pp-refresh .journal-section-visual figcaption{position:static;padding:8px 4px 2px;background:transparent;color:var(--pp-ink);font-size:.72rem;font-weight:700;letter-spacing:.03em}
.pp-refresh .journal-section-ai-note{position:absolute;left:6%;bottom:-6px;margin:0;padding:6px 10px;border:1px solid var(--pp-violet);border-radius:6px;background:rgba(255,255,255,.92);color:var(--pp-ink-2);font-size:.72rem;line-height:1.25}
@media(max-width:760px){.pp-refresh .journal-section-head{grid-template-columns:1fr;gap:34px}.pp-refresh .journal-section-copy{max-width:none}.pp-refresh .journal-section-visual{min-height:330px;max-width:460px}.pp-refresh .journal-section-ai-note{left:2%;bottom:-8px}}

/* Final collage interaction overrides: keep focus above the stack and preserve
   vertical space for the Journal collage label and hover lift. */
.pp-refresh .hero-card:hover,
.pp-refresh .monthly-featured-card:hover,
.pp-refresh .journal-section-visual figure:hover{z-index:10!important}
.pp-refresh .journal-section-visual{min-height:430px;padding-bottom:34px;box-sizing:border-box;isolation:isolate}
.pp-refresh .journal-section-visual figure{cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease}
.pp-refresh .journal-section-visual figure:hover{transform:translateY(-8px) rotate(0deg);box-shadow:0 24px 48px rgba(29,17,47,.25)}
.pp-refresh .journal-section-visual{min-height:450px;padding-bottom:54px}
.pp-refresh .journal-section-ai-note{bottom:-20px;z-index:11}

/* Homepage image framing: give editorial card images the same white mat and
   violet edge used by the interactive collage cards. */
.pp-refresh .journal-card>img{
  inset:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  padding:8px;
  box-sizing:border-box;
  background:#fff;
  border:1.5px solid var(--pp-violet);
  border-radius:8px;
}
.pp-refresh .journal-card::after{
  inset:9.5px;
  border-radius:6px;
}

/* The orbit is a navigation cue, not part of the image stack. Reserve room
   below the collage and place the circle beyond the lower-right frame. */
.pp-refresh .hero-collage{
  min-height:644px;
  padding-bottom:34px;
  box-sizing:border-box;
}
.pp-refresh .hero-orbit{
  right:-42px;
  bottom:-28px;
  z-index:20;
}
@media(max-width:760px){
  .pp-refresh .hero-collage{min-height:440px;padding-bottom:32px}
  .pp-refresh .hero-orbit{right:-8px;bottom:-30px}
}
@media(max-width:760px){.pp-refresh .journal-section-visual{min-height:410px;padding-bottom:54px}.pp-refresh .journal-section-ai-note{bottom:-18px}}

/* Final homepage framing: the journal cards use the same white mat and violet
   edge as the stacked editorial collage. The orbit stays in a clear gutter. */
.pp-refresh .journal-grid .journal-card>img{
  inset:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  padding:8px;
  box-sizing:border-box;
  background:#fff;
  border:1.5px solid var(--pp-violet);
  border-radius:8px;
}
.pp-refresh .journal-grid .journal-card::after{
  inset:9.5px;
  border-radius:6px;
  pointer-events:none;
}
.pp-refresh .hero-collage{
  padding-right:108px;
  padding-bottom:40px;
  margin-bottom:100px;
}
.pp-refresh .hero-orbit{
  right:-90px;
  bottom:-96px;
}
@media(max-width:760px){
  .pp-refresh .hero-collage{padding-right:0;padding-bottom:88px;margin-bottom:70px}
  .pp-refresh .hero-orbit{right:4%;bottom:-58px}
}

/* Products-page catalogue collage: the frames share the homepage treatment and
   bring the hovered frame above its neighbours without changing the layout. */
.pp-refresh .catalogue-directory-media{position:relative;min-height:390px;max-height:none;padding:0;background:#f5edf8;border:1.5px solid var(--pp-violet);border-radius:8px;box-shadow:0 24px 56px -30px rgba(33,22,49,.35);overflow:hidden;isolation:isolate}
.pp-refresh .catalogue-directory-media .eyebrow{left:18px;top:18px;z-index:20;padding:8px 10px;background:rgba(33,22,49,.88);border-radius:999px;color:#fff;text-shadow:none}
.pp-refresh .catalogue-directory-frame{position:absolute;margin:0;overflow:hidden;background:#fff;border:1.5px solid var(--pp-violet);border-radius:8px;padding:6px;box-shadow:0 24px 46px -26px rgba(21,13,32,.8);transition:transform .4s cubic-bezier(.2,.8,.2,1),z-index .1s;cursor:pointer}
.pp-refresh .catalogue-directory-frame img{display:block;width:100%;height:100%;min-height:0!important;object-fit:cover;border-radius:5px;filter:saturate(1.08)}
.pp-refresh .catalogue-directory-frame-a{left:8%;top:14%;width:58%;height:70%;transform:rotate(-5deg);z-index:1}
.pp-refresh .catalogue-directory-frame-b{right:8%;top:18%;width:53%;height:62%;transform:rotate(6deg);z-index:2}
.pp-refresh .catalogue-directory-frame-c{left:24%;bottom:4%;width:48%;height:48%;transform:rotate(-2deg);z-index:3}
.pp-refresh .catalogue-directory-frame:hover,.pp-refresh .catalogue-directory-frame:focus-within{z-index:30!important;transform:translateY(-8px) rotate(0deg) scale(1.02)}
@media(max-width:760px){
  .pp-refresh .catalogue-directory-media{min-height:360px;max-height:none}
  .pp-refresh .catalogue-directory-frame-a{left:4%;top:15%;width:60%;height:64%}
  .pp-refresh .catalogue-directory-frame-b{right:4%;top:20%;width:56%;height:58%}
  .pp-refresh .catalogue-directory-frame-c{left:20%;bottom:4%;width:52%;height:46%}
}
/* The collage frames carry the visual treatment; keep the surrounding shell
   open so the catalogue section does not read as a nested card. */
.pp-refresh .catalogue-directory-media{background:transparent;border:0;box-shadow:none;border-radius:0}

/* Let the server-rendered product cards participate directly in the catalogue
   grid while keeping the no-JavaScript fallback in the original HTML. */
.pp-refresh .catalogue-grid > [data-static-catalogue]{display:contents}

/* The collage label should read as an editorial eyebrow, not a dark badge. */
.pp-refresh .catalogue-directory-media .eyebrow{
  padding:0;
  background:transparent;
  border-radius:0;
  color:var(--pp-violet);
  text-shadow:none;
}

/* About page: a calm glass-and-gold system for the editorial pillars and trust blocks. */
.pp-refresh.about-page{--about-glass:rgba(237,225,249,.76);--about-gold:linear-gradient(112deg,#9d6714 0%,#f8e7a8 18%,#c78925 36%,#fff7ca 53%,#b17115 72%,#f2cf74 88%,#9d6714 100%)}
.pp-refresh.about-page .about-grid{align-items:stretch}
.pp-refresh.about-page .about-pillar-card,.pp-refresh.about-page .about-method-card,.pp-refresh.about-page .about-publisher-card,.pp-refresh.about-page .about-social-card{background:linear-gradient(145deg,rgba(237,225,249,.82),rgba(255,253,249,.78)) padding-box,var(--about-gold) border-box;border:1.5px solid transparent;border-radius:18px;box-shadow:0 24px 52px -32px rgba(33,22,49,.58),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.14)}
.pp-refresh.about-page .about-pillar-card{display:flex;flex-direction:column;gap:0;min-height:100%}
.pp-refresh.about-page .about-pillar-header,.pp-refresh.about-page .about-block-header{position:relative;margin:0 0 24px;padding:20px 22px;background:linear-gradient(135deg,rgba(225,207,247,.92),rgba(247,237,253,.68)) padding-box,var(--about-gold) border-box;background-size:100% 100%,220% 100%;border:1.5px solid transparent;border-radius:15px;box-shadow:0 16px 30px -24px rgba(33,22,49,.64),inset 0 1px 0 rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(1.22);animation:aboutGoldShimmer 7s ease-in-out infinite}
.pp-refresh.about-page .about-pillar-kicker{display:block;color:var(--pp-violet);font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.pp-refresh.about-page .about-pillar-header h2,.pp-refresh.about-page .about-block-header h2{margin:12px 0 0!important;color:var(--pp-ink);font-size:clamp(1.65rem,2.5vw,2.25rem);line-height:1.02;letter-spacing:-.02em}
.pp-refresh.about-page .about-pillar-card p,.pp-refresh.about-page .about-method-card p,.pp-refresh.about-page .about-method-card li,.pp-refresh.about-page .about-publisher-card p{color:var(--pp-ink-2);line-height:1.68}
.pp-refresh.about-page .about-pillar-takeaway{margin-top:auto;padding-top:18px;border-top:1px solid rgba(123,63,198,.22)}
.pp-refresh.about-page .about-pillar-takeaway strong{color:var(--pp-plum)}
.pp-refresh.about-page .about-pillar-card:nth-child(2)>p:not(.about-pillar-new){display:none}
.pp-refresh.about-page .about-method-card,.pp-refresh.about-page .about-publisher-card{padding:32px;max-width:900px;margin-inline:auto}
.pp-refresh.about-page .about-method-card ul{display:grid;gap:12px;margin:0;padding:20px 0 0 22px!important;border-top:1px solid rgba(123,63,198,.22)}
.pp-refresh.about-page .about-reference-note{display:grid;gap:9px;margin-top:24px;padding:18px 20px;background:rgba(225,207,247,.42);border:1px solid rgba(215,154,55,.72);border-radius:12px;box-shadow:0 12px 24px -22px rgba(33,22,49,.7)}
.pp-refresh.about-page .about-reference-note strong{color:var(--pp-ink);font-size:.9rem}
.pp-refresh.about-page .about-reference-note a{color:var(--pp-plum);font-size:.84rem;font-weight:750;line-height:1.45}
.pp-refresh.about-page .about-social-card{background:linear-gradient(135deg,rgba(225,207,247,.78),rgba(249,241,252,.66)) padding-box,var(--about-gold) border-box}
@keyframes aboutGoldShimmer{0%,100%{background-position:0 0,0 0}50%{background-position:0 0,100% 0}}
@media(max-width:640px){.pp-refresh.about-page .about-pillar-card,.pp-refresh.about-page .about-method-card,.pp-refresh.about-page .about-publisher-card{padding:20px}.pp-refresh.about-page .about-pillar-header,.pp-refresh.about-page .about-block-header{padding:18px}}
@media(prefers-reduced-motion:reduce){.pp-refresh.about-page .about-pillar-header,.pp-refresh.about-page .about-block-header{animation:none}}

/* Purple bevel variant: the About-page panels follow the raised, glassy
   treatment of the reference controls while keeping PowderedPurple's palette. */
.pp-refresh.about-page{
  --about-gold:linear-gradient(180deg,#d7c4f5 0%,#a98ad9 18%,#6d45a4 48%,#3c205f 100%);
}
.pp-refresh.about-page .about-pillar-header,
.pp-refresh.about-page .about-block-header{
  background:linear-gradient(180deg,#a987d8 0%,#7049a8 42%,#412365 100%) padding-box,
    linear-gradient(180deg,#eadfff 0%,#9f7bd5 45%,#301446 100%) border-box;
  border-radius:14px;
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 5px rgba(29,12,48,.38),
    0 12px 22px -15px rgba(54,25,91,.78);
}
.pp-refresh.about-page .about-pillar-kicker,
.pp-refresh.about-page .about-pillar-header h2,
.pp-refresh.about-page .about-block-header .eyebrow,
.pp-refresh.about-page .about-block-header h2{
  color:#fff;
  text-shadow:0 1px 1px rgba(34,15,57,.35);
}
.pp-refresh.about-page .about-pillar-header h2,
.pp-refresh.about-page .about-block-header h2{
  letter-spacing:-.015em;
}
.pp-refresh.about-page .about-pillar-card,
.pp-refresh.about-page .about-method-card,
.pp-refresh.about-page .about-publisher-card,
.pp-refresh.about-page .about-social-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 24px 52px -32px rgba(54,25,91,.62);
}
.pp-refresh.about-page .about-reference-note{
  border-color:#8f6ac4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 24px -22px rgba(54,25,91,.7);
}

/* Keep the About page grounded in the site cream, while giving the
   methodology and TikTok panels a quiet lavender surface of their own. */
.pp-refresh.about-page,
.pp-refresh.about-page main,
.pp-refresh.about-page .page-hero,
.pp-refresh.about-page .section{
  background:var(--pp-cream);
}
.pp-refresh.about-page .about-pillar-card,
.pp-refresh.about-page .about-publisher-card{
  background:linear-gradient(#fff,#fff) padding-box,var(--about-gold) border-box;
  backdrop-filter:none;
}
.pp-refresh.about-page .about-method-card,
.pp-refresh.about-page .about-social-card{
  background:linear-gradient(135deg,#f3ecfb 0%,#ebe1f7 100%) padding-box,var(--about-gold) border-box;
  backdrop-filter:none;
}
.pp-refresh.about-page .about-reference-note{
  background:rgba(255,255,255,.58);
  backdrop-filter:none;
}

/* Keep the purple header titles compact enough to read in no more than two
   lines, including inside the three-column pillar layout. */
.pp-refresh.about-page .about-pillar-header h2,
.pp-refresh.about-page .about-block-header h2{
  font-size:1.45rem;
  line-height:1.06;
  text-wrap:balance;
}
@media (max-width:640px){
  .pp-refresh.about-page .about-pillar-header h2,
  .pp-refresh.about-page .about-block-header h2{
    font-size:1.32rem;
  }
}

/* Keep supporting copy dark enough to read comfortably against the softer
   lavender surfaces, while retaining the brighter purple for links. */
.pp-refresh.about-page .about-method-card > p,
.pp-refresh.about-page .about-method-card > ul,
.pp-refresh.about-page .about-method-card > ul li,
.pp-refresh.about-page .about-reference-note strong,
.pp-refresh.about-page .about-reference-note a,
.pp-refresh.about-page .about-social-card > p,
.pp-refresh.about-page .about-social-card > p strong{
  color:#3f2f50;
}
.pp-refresh.about-page .about-reference-note a,
.pp-refresh.about-page .about-social-card a:not(.btn){
  color:#603891;
}

/* Keep every footer brand lockup optically centred. */
.pp-refresh .footer .logo{display:inline-flex;align-items:center;justify-content:flex-start;gap:11px;min-height:40px;vertical-align:middle}
.pp-refresh .footer .logo-img{display:block;flex:0 0 40px;width:40px;height:40px;object-fit:contain;margin:0;align-self:center}
.pp-refresh .footer .logo-text{display:inline-flex;align-items:center;min-height:40px;line-height:1;white-space:nowrap;transform:translateY(1px)}

/* ============================================================
   HYBRID COMMERCE-EDITORIAL HOMEPAGE & PHASE 1 UX UPGRADES
   ============================================================ */

/* 1. Hero Search & Topic Chips with Repository Selector */
.pp-refresh .hero-search-box{margin:28px 0 16px;max-width:620px;position:relative}
.pp-refresh .hero-search-form{display:flex;align-items:center;background:#fff;border:1.5px solid var(--pp-violet);border-radius:999px;padding:4px 6px 4px 8px;box-shadow:0 12px 28px -10px rgba(75,36,111,.22);transition:border-color .2s,box-shadow .2s}
.pp-refresh .hero-search-form:focus-within{border-color:var(--pp-rose);box-shadow:0 14px 34px -10px rgba(198,84,109,.3)}
/* The hero's repository scope picker was removed on 25 Aug 2026 - the hero now
   searches the catalogue, journal and tutorials together via a hidden field, and
   search.html keeps the picker (.search-repo-picker / .search-repo-option, styled
   further down) for narrowing afterwards. These .search-repo-wrap/-toggle/-caret/
   -menu and .search-divider rules had no markup left to match. */
.pp-refresh .hero-search-icon{width:18px;height:18px;fill:none;stroke:var(--pp-violet);stroke-width:2.2;margin-right:8px;flex-shrink:0}
.pp-refresh .hero-search-input{flex:1;border:0;outline:none;background:transparent;font-size:.96rem;color:var(--pp-ink);min-width:0}
.pp-refresh .hero-search-input::placeholder{color:var(--pp-ink-2);opacity:.75}
.pp-refresh .hero-search-submit{background:var(--pp-ink);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s,transform .2s;flex-shrink:0}
.pp-refresh .hero-search-submit:hover{background:var(--pp-plum);transform:scale(1.02)}
.pp-refresh .hero-topic-pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.pp-refresh .hero-topic-label{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pp-ink-2);margin-right:4px}
.pp-refresh .topic-pill{display:inline-flex;align-items:center;padding:5px 12px;background:rgba(255,255,255,.8);border:1px solid rgba(75,36,111,.2);border-radius:999px;font-size:.76rem;font-weight:700;color:var(--pp-ink);transition:all .2s}
.pp-refresh .topic-pill:hover{background:var(--pp-violet);color:#fff;border-color:var(--pp-violet);transform:translateY(-1px)}
@media (max-width:640px){
  .pp-refresh .hero-search-form{padding:4px 6px 4px 6px}
  .pp-refresh .search-repo-toggle{font-size:.74rem;padding:6px 10px}
  .pp-refresh .search-divider{margin:0 6px 0 2px}
  .pp-refresh .hero-search-icon{display:none}
  .pp-refresh .hero-search-submit{padding:8px 16px;font-size:.8rem}
}

/* 2. Homepage 4-Department Cards Polish */
.pp-refresh .home-catalogue-section{background:linear-gradient(180deg,#faf4ee 0%,#fffdf9 100%)}
.pp-refresh .catalogue-department-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pp-refresh .catalogue-department{background:#ffffff;border:1.5px solid var(--pp-line);border-radius:18px;padding:22px;display:flex;flex-direction:column;min-height:380px;position:relative;transition:all .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px -15px rgba(33,22,49,.08)}
.pp-refresh .catalogue-department:hover{transform:translateY(-6px);border-color:var(--pp-violet);box-shadow:0 22px 50px -20px rgba(33,22,49,.18)}

.pp-refresh .department-card-header{margin-bottom:12px}
.pp-refresh .department-code{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--pp-violet);margin-bottom:4px}
.pp-refresh .catalogue-department h3{font-size:1.35rem;line-height:1.15;margin:0;color:var(--pp-ink)}

.pp-refresh .department-image-frame{width:100%;height:180px;background:transparent;border:1.5px solid var(--pp-line);border-radius:12px;display:block;padding:0;box-sizing:border-box;overflow:hidden;margin-bottom:16px;box-shadow:0 4px 14px rgba(33,22,49,.04);transition:border-color .3s}
.pp-refresh .catalogue-department:hover .department-image-frame{border-color:var(--pp-violet)}
.pp-refresh .department-image-frame img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pp-refresh .catalogue-department:hover .department-image-frame img{transform:scale(1.08)}

.pp-refresh .department-desc{font-size:.88rem;color:var(--pp-ink-2);line-height:1.45;margin-bottom:20px;flex:1}
.pp-refresh .department-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:46px;padding:12px 20px;margin-top:auto;font-size:.86rem;font-weight:750;box-sizing:border-box}

/* 3. Curated Top Picks Showcase (Homepage) */
.pp-refresh .curated-picks-section{background:#fffdf9;padding:90px 0}
.pp-refresh .curated-picks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.pp-refresh .curated-pick-card{background:linear-gradient(145deg,#f8f2fc 0%,#f0e5f8 100%);border:1.5px solid rgba(123,63,198,.24);border-radius:18px;padding:22px;display:flex;flex-direction:column;box-shadow:0 14px 38px -18px rgba(75,36,111,.16);transition:all .3s cubic-bezier(.2,.8,.2,1)}
.pp-refresh .curated-pick-card:hover{transform:translateY(-6px);border-color:var(--pp-violet);box-shadow:0 24px 54px -20px rgba(75,36,111,.28)}

/* Non-overlapping Badge Header */
.pp-refresh .curated-pick-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:14px;min-height:28px}
.pp-refresh .curated-pick-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.1)}
.pp-refresh .curated-pick-badge.badge-editor{background:var(--pp-violet)}
.pp-refresh .curated-pick-badge.badge-value{background:var(--pp-sage)}

/* Consistent Framed Product Image Box */
.pp-refresh .curated-pick-media{margin-bottom:18px;width:100%}
.pp-refresh .curated-pick-frame{width:100%;height:220px;background:#ffffff;border:1.5px solid rgba(123,63,198,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;overflow:hidden;box-shadow:0 4px 14px rgba(33,22,49,.04);transition:border-color .3s}
.pp-refresh .curated-pick-card:hover .curated-pick-frame{border-color:rgba(123,63,198,.45)}
.pp-refresh .curated-pick-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:auto;filter:none;transition:transform .4s ease}
.pp-refresh .curated-pick-card:hover .curated-pick-frame img{transform:scale(1.06)}

/* Card Body & Typography */
.pp-refresh .curated-pick-body{display:flex;flex-direction:column;flex:1}
.pp-refresh .curated-pick-cat{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--pp-violet);margin-bottom:6px}
.pp-refresh .curated-pick-body h3{font-size:1.35rem;line-height:1.15;margin:0 0 10px;color:var(--pp-ink)}
.pp-refresh .curated-pick-verdict{font-size:.88rem;color:var(--pp-ink-2);line-height:1.45;margin-bottom:18px;flex:1}
.pp-refresh .spec-chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pp-refresh .spec-chip{display:inline-flex;align-items:center;background:#ffffff;color:var(--pp-ink);border:1px solid rgba(123,63,198,.25);padding:4px 9px;border-radius:6px;font-size:.72rem;font-weight:700;box-shadow:0 2px 6px rgba(75,36,111,.04)}
.pp-refresh .curated-pick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.pp-refresh .curated-pick-actions .btn{min-height:42px;padding:8px 12px;font-size:.78rem;width:100%}
.pp-refresh .curated-pick-actions .btn-secondary{background:#ffffff;border-color:rgba(75,36,111,.3);color:var(--pp-ink)}
.pp-refresh .curated-pick-actions .btn-secondary:hover{background:#faf6fc;border-color:var(--pp-violet)}

/* 4. Streamlined AI Badges */
.pp-refresh .ai-badge-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(33,22,49,.82);color:#fff;backdrop-filter:blur(6px);padding:4px 9px;border-radius:999px;font-size:.64rem;font-weight:750;letter-spacing:.05em;border:1px solid rgba(205,179,236,.4);text-decoration:none;transition:background .2s}
.pp-refresh .ai-badge-pill:hover{background:var(--pp-violet);color:#fff}
.pp-refresh .ai-badge-overlay{position:absolute;bottom:12px;right:12px;z-index:5}

/* 5. Trust & Transparency Strip */
.pp-refresh .trust-strip-section{background:#1e142c;color:#fff;padding:48px 0;border-top:1px solid rgba(255,255,255,.1)}
.pp-refresh .trust-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pp-refresh .trust-strip-item{display:flex;align-items:flex-start;gap:14px}
.pp-refresh .trust-strip-icon{font-size:1.4rem;line-height:1;background:rgba(205,179,236,.15);border:1px solid rgba(205,179,236,.3);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.pp-refresh .trust-strip-item h4{color:#fff;font-size:.95rem;margin:0 0 4px;font-family:Inter,sans-serif;font-weight:750}
.pp-refresh .trust-strip-item p{color:rgba(255,255,255,.7);font-size:.78rem;line-height:1.4;margin:0}
/* Standing affiliate disclosure, sat on the dark trust band. */
.pp-refresh .home-disclosure{margin:34px 0 0;padding:14px 18px;background:rgba(205,179,236,.12);border-left:3px solid var(--pp-lilac);border-radius:0 8px 8px 0;color:rgba(255,255,255,.82);font-size:.78rem;line-height:1.5}
@media(max-width:760px){.pp-refresh .home-disclosure{margin-top:26px;font-size:.75rem}}

/* 6. Consumer-First PDP Styles */
.pp-refresh .pdp-hero-container{background:#fff;border:1.5px solid var(--pp-line);border-radius:16px;padding:32px;box-shadow:0 18px 48px -20px rgba(33,22,49,.15);margin-bottom:42px}
.pp-refresh .pdp-verdict-box{background:linear-gradient(135deg,#f8f2fc 0%,#f5edf7 100%);border-left:4px solid var(--pp-violet);border-radius:8px;padding:18px 22px;margin:20px 0}
/* The verdict label and the pros/cons labels are real section headings, so
   they carry heading levels. These rules keep the original label appearance. */
.pp-refresh .pdp-verdict-box strong,.pp-refresh .pdp-verdict-box h2{display:block;font-family:Inter,sans-serif;font-size:.74rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-violet);margin:0 0 6px;font-weight:800}
.pp-refresh .pdp-verdict-box p{font-size:.98rem;color:var(--pp-ink);line-height:1.5;margin:0;font-weight:600}
.pp-refresh .pdp-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.pp-refresh .pdp-pro-box{background:#f3f9ef;border:1px solid #c9e2be;border-radius:10px;padding:18px}
.pp-refresh .pdp-con-box{background:#fdf6ec;border:1px solid #f2d9b6;border-radius:10px;padding:18px}
.pp-refresh .pdp-pro-box h4,.pp-refresh .pdp-pro-box h3{color:#366324;font-family:Inter,sans-serif;font-size:.85rem;line-height:1.3;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.pp-refresh .pdp-con-box h4,.pp-refresh .pdp-con-box h3{color:#8f5012;font-family:Inter,sans-serif;font-size:.85rem;line-height:1.3;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.pp-refresh .pdp-pro-box ul,.pp-refresh .pdp-con-box ul{padding-left:18px;margin:0}
.pp-refresh .pdp-pro-box li,.pp-refresh .pdp-con-box li{font-size:.85rem;line-height:1.45;margin-bottom:6px;color:var(--pp-ink)}

/* Editorial Verification Accordion (PDP Compliance Ledger) */
.pp-refresh .editorial-accordion{background:#fbf8f5;border:1.5px solid var(--pp-line);border-radius:12px;margin-top:36px;overflow:hidden}
.pp-refresh .editorial-accordion summary{padding:18px 24px;font-weight:750;font-size:.95rem;color:var(--pp-ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none;background:#f6efe8}
.pp-refresh .editorial-accordion summary::-webkit-details-marker{display:none}
.pp-refresh .editorial-accordion summary::after{content:"▼";font-size:.7rem;color:var(--pp-violet);transition:transform .2s}
.pp-refresh .editorial-accordion[open] summary::after{transform:rotate(180deg)}
.pp-refresh .editorial-accordion-content{padding:24px;font-size:.86rem}

/* 7. Side-by-Side Comparison Tables */
.pp-refresh .comparison-matrix-wrap{overflow-x:auto;margin:32px 0;border:1.5px solid var(--pp-line);border-radius:12px;background:#fff;box-shadow:0 12px 30px -15px rgba(33,22,49,.1)}
.pp-refresh .comparison-matrix-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem}
.pp-refresh .comparison-matrix-table th,.pp-refresh .comparison-matrix-table td{padding:16px 20px;border-bottom:1px solid var(--pp-line);vertical-align:middle}
.pp-refresh .comparison-matrix-table th{background:var(--pp-ink);color:#fff;font-family:Fraunces,Georgia,serif;font-size:1.05rem;font-weight:600}
.pp-refresh .comparison-matrix-table tr:last-child td{border-bottom:0}
.pp-refresh .comparison-matrix-table tr:nth-child(even) td{background:#faf6f1}
.pp-refresh .matrix-winner{display:inline-block;background:#e8f4e2;color:#2c631b;padding:4px 8px;border-radius:6px;font-weight:750;font-size:.75rem}
.pp-refresh .matrix-neutral{display:inline-block;background:#f3eef8;color:var(--pp-violet);padding:4px 8px;border-radius:6px;font-weight:750;font-size:.75rem}

/* Responsive adjustments for new components */
@media(max-width:1040px){
  .pp-refresh .catalogue-department-grid{grid-template-columns:repeat(2,1fr)}
  .pp-refresh .curated-picks-grid{grid-template-columns:repeat(2,1fr)}
  .pp-refresh .trust-strip-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pp-refresh .catalogue-department-grid{grid-template-columns:1fr}
  .pp-refresh .curated-picks-grid{grid-template-columns:1fr}
  .pp-refresh .trust-strip-grid{grid-template-columns:1fr}
  .pp-refresh .hero-search-box{width:100%}
  .pp-refresh .hero-search-form{flex-direction:row}
  .pp-refresh .pdp-pros-cons{grid-template-columns:1fr}
}

/* 8. Sticky Mobile Buy Bar */
.pp-refresh .pdp-sticky-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:990;
  background:var(--pp-ink,#211631);
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -6px 25px rgba(0,0,0,.3);
  padding:12px 20px;
  transform:translateY(0);
  transition:transform .3s ease;
}
.pp-refresh .pdp-sticky-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.pp-refresh .pdp-sticky-info{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pp-refresh .pdp-sticky-title{
  color:#fff;
  font-size:.92rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pp-refresh .pdp-sticky-price{
  font-size:.84rem;
  margin-top:2px;
}
.pp-refresh .pdp-sticky-cta{
  flex-shrink:0;
  padding:9px 20px;
  font-size:.86rem;
  font-weight:750;
  white-space:nowrap;
}
@media(max-width:600px){
  .pp-refresh .pdp-sticky-bar{padding:10px 14px}
  .pp-refresh .pdp-sticky-title{font-size:.84rem}
  .pp-refresh .pdp-sticky-cta{padding:8px 14px;font-size:.8rem}
}


/* Catalogue card media: badge row.
   The sale badge was absolutely positioned inside the media box, so on any
   card carrying a promotion it sat on top of the product shot. Give the two
   badges a row of their own and put the image beneath them, so they cannot
   overlap at any card width. */
.pp-refresh.catalogue-page .catalog-card-media,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:10px;align-content:start;flex:0 0 330px;min-height:330px}
.pp-refresh.catalogue-page .catalog-card-media .catalog-badge,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-badge{grid-column:1;grid-row:1;align-self:center;justify-self:start;margin:18px 0 0 24px}
.pp-refresh.catalogue-page .catalog-card-media .catalog-sale-badge,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-sale-badge{position:static;grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:18px 18px 0 0;max-width:100%}
.pp-refresh.catalogue-page .catalog-card-media img,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media img{grid-column:1/-1;grid-row:2;width:100%;height:100%;min-height:0;object-fit:contain;padding:10px 26px 26px}
@media(max-width:420px){
  .pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-sale-badge{font-size:.58rem;padding:6px 8px;margin-right:14px}
  .pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media .catalog-badge{margin-left:16px}
}

/* Multi-repository search page. Results are grouped by the repository they
   came from, and a catalogue explainer is visibly not a product. */
.pp-refresh .search-page-hero{padding-bottom:34px}
.pp-refresh .search-page-lede{max-width:68ch;color:var(--pp-ink-2);font-size:1.02rem;margin:14px 0 26px}
.pp-refresh .search-page-form{max-width:820px}
.pp-refresh .search-page-row{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--pp-violet);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 18px 40px -30px rgba(33,22,49,.7)}
.pp-refresh .search-page-icon{width:20px;height:20px;flex:0 0 20px;color:var(--pp-violet)}
.pp-refresh .search-page-input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:1rem;padding:12px 0;color:var(--pp-ink)}
.pp-refresh .search-page-submit{flex:0 0 auto;min-height:44px;padding:10px 26px}
.pp-refresh .search-repo-picker{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:18px 0 0;padding:0;border:0}
.pp-refresh .search-repo-picker legend{float:left;width:100%;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-ink-2);margin-bottom:10px;padding:0}
.pp-refresh .search-repo-option{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--pp-ink);cursor:pointer}
.pp-refresh .search-repo-option input{accent-color:var(--pp-violet);width:17px;height:17px}
.pp-refresh .search-summary{margin:22px 0 0;font-size:.92rem;color:var(--pp-ink-2)}
.pp-refresh .search-results-section{padding-top:8px}
.pp-refresh .search-repo-group{margin:0 0 46px}
.pp-refresh .search-repo-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:12px;margin-bottom:20px;border-bottom:1.5px solid var(--pp-line)}
.pp-refresh .search-repo-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.pp-refresh .search-repo-head p{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-violet);white-space:nowrap}
.pp-refresh .search-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pp-refresh .search-result{display:flex;flex-direction:column;background:var(--pp-paper);border:1px solid var(--pp-line);border-radius:10px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pp-refresh .search-result:hover{transform:translateY(-4px);box-shadow:var(--pp-shadow)}
.pp-refresh .search-result-explainer{background:#faf7fd;border-style:dashed}
.pp-refresh .search-result-media{display:block;height:170px;background:#fff;overflow:hidden}
.pp-refresh .search-result-media img{width:100%;height:100%;object-fit:contain;padding:12px;display:block}
.pp-refresh .search-result-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pp-refresh .search-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pp-refresh .search-kind{font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--pp-violet);border-radius:999px;padding:4px 9px}
.pp-refresh .search-kind-explainer{background:transparent;color:var(--pp-ink-2);border:1px solid var(--pp-line)}
.pp-refresh .search-group{font-size:.72rem;color:var(--pp-ink-2)}
.pp-refresh .search-result h3{font-size:1.1rem;line-height:1.2;margin:0}
.pp-refresh .search-result h3 a{color:var(--pp-ink)}
.pp-refresh .search-result h3 a:hover{color:var(--pp-violet)}
.pp-refresh .search-result p{margin:0;font-size:.86rem;line-height:1.5;color:var(--pp-ink-2)}
.pp-refresh .search-empty{padding:20px;border:1px dashed var(--pp-line);border-radius:10px;background:var(--pp-paper);color:var(--pp-ink-2);font-size:.9rem}
.pp-refresh .search-empty a{color:var(--pp-violet);font-weight:700;text-decoration:underline}
@media(max-width:620px){
  .pp-refresh .search-page-row{flex-wrap:wrap;border-radius:18px;padding:12px}
  .pp-refresh .search-page-input{flex:1 1 100%;padding:6px 0}
  .pp-refresh .search-page-submit{width:100%}
  .pp-refresh .search-repo-head{flex-direction:column;align-items:flex-start;gap:4px}
}

/* Comparison column headings.
   Each product now heads its own column with its image, its name (brand
   removed, since Brand has its own row) and the control that removes it. */
.pp-refresh .compare-table thead th{vertical-align:top}
.pp-refresh .compare-attr-head{white-space:nowrap}
.pp-refresh .compare-col-head{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:150px;max-width:230px;margin:0 auto;text-align:center}
.pp-refresh .compare-col-media{display:block;width:76px;height:76px;flex:0 0 76px;background:#fff;border:1px solid var(--pp-line);border-radius:10px;overflow:hidden;padding:6px}
.pp-refresh .compare-col-media img{width:100%;height:100%;object-fit:contain;display:block}
.pp-refresh .compare-col-name{font-family:Fraunces,Georgia,serif;font-size:1rem;line-height:1.2;font-weight:600;color:var(--pp-ink);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.pp-refresh .compare-col-name:hover{color:var(--pp-violet);text-decoration:underline}
.pp-refresh .compare-col-remove{appearance:none;border:1px solid var(--pp-line);background:#fff;color:var(--pp-ink-2);border-radius:999px;padding:5px 12px;font:inherit;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pp-refresh .compare-col-remove:hover,.pp-refresh .compare-col-remove:focus-visible{color:var(--pp-rose);border-color:var(--pp-rose);background:#fff5f7}
@media(max-width:620px){
  .pp-refresh .compare-col-head{min-width:118px;gap:6px}
  .pp-refresh .compare-col-media{width:56px;height:56px;flex-basis:56px}
  .pp-refresh .compare-col-name{font-size:.88rem}
  .pp-refresh .compare-col-remove{font-size:.62rem;padding:4px 9px}
}

/* Merchant product description on a generated product page. */
.pp-refresh .product-description{margin-top:26px}
.pp-refresh .product-description h2{font-size:1.5rem;margin-bottom:10px}
.pp-refresh .product-description p{color:var(--pp-ink-2);line-height:1.65}
.pp-refresh .product-description-source{margin-top:12px;font-size:.78rem;border-left:3px solid var(--pp-line);padding-left:12px}

/* == catalogue card geometry == =====================================================
   The card is a fixed-rhythm object: media band, thumbnail strip, then a body
   whose actions always land on the same line. Every product must occupy the
   same box regardless of how long its summary runs or how many gallery frames
   it has, otherwise the grid steps up and down across rows.

   The thumbnail strip had no styling at all, so once its lazy images decoded
   each thumb rendered at intrinsic size and stacked - pushing wig cards past
   5000px tall. It is now a fixed 62px band, and cards with a single image
   still render an empty strip so their body starts at the same offset.
   ========================================================================== */
.pp-refresh .catalog-grid{grid-auto-rows:1fr}
.pp-refresh .catalog-grid .catalog-card{height:100%}

.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-thumbs{
  flex:0 0 62px;height:62px;box-sizing:border-box;
  display:flex;align-items:center;gap:6px;
  padding:0 26px 14px;background:#fff;overflow:hidden
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-thumb-btn{
  flex:0 0 44px;width:44px;height:44px;padding:0;
  border:1px solid var(--pp-line);border-radius:4px;background:#fff;
  overflow:hidden;cursor:pointer
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-thumb-btn img{
  display:block;width:100%;height:100%;
  object-fit:contain;padding:3px;box-sizing:border-box
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-thumb-btn.is-active{
  border-color:var(--pp-violet);box-shadow:0 0 0 1px var(--pp-violet)
}

/* The whole product must be visible - never cropped to fill the band. */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media img{
  object-fit:contain
}

.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-body{
  flex:1;display:flex;flex-direction:column
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-body h3{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-body>p{
  flex:0 0 auto;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;min-height:5.6em
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-tags{
  max-height:30px;overflow:hidden
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions{
  margin-top:auto
}

@media(max-width:760px){
  .pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-thumbs{padding:0 16px 12px}
}

/* ---- Product card media -------------------------------------------------
   This is the only rule that sets the geometry of this box. Four earlier
   passes each added their own version and the last one silently won, which
   is why `object-fit:contain` kept appearing to have no effect.

   The catalogue mixes 1:1 and 9:16 sources, so the frame is fixed and the
   image is fitted inside it rather than filling it. contain + centre is what
   produces the even margin: the image scales until it touches the frame on
   its long axis, then centres on the other. Nothing is ever cropped.

   The frame is landscape rather than portrait because the catalogue is. The
   eyewear feed brought in a thousand 2:1 photographs, which is 97% of what is
   published, and a 2:1 image inside a 3:4 frame painted 175px tall inside a
   505px box - 151px of empty white above it and 151px below, measured in the
   browser. At 4:3 the same image leaves about 40px either side, and a portrait
   source still fits on its long axis with a side gutter instead of a vertical
   one. Nothing is cropped in either case. */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media{
  aspect-ratio:4 / 3;
  height:auto;
  min-height:0;
  flex:0 0 auto;
  background:#fff;
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-media img{
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;   /* the frame owns the shape, never the image */
  object-fit:contain;
  object-position:center;
  padding:14px;        /* symmetric, so a centred image reads as centred */
  box-sizing:border-box;
}

.pp-refresh .product-pdp-stage{aspect-ratio:9 / 16 !important;width:min(100%,calc((100dvh - 230px) * .5625)) !important}

/* ---- Product card actions -----------------------------------------------
   The pair is an <a> and a <button>. Both used to take flex:1, but a later
   rule gave the anchor a 150px flex-basis and left the button on 0, so
   "View Product Details" measured 229px against 101px for "Add to Compare".

   Equal grid tracks size the buttons from the row rather than from their own
   text, so they match each other and match card to card - and they keep
   matching if a third button (the paid retailer link) ever appears, since the
   tracks are defined by count rather than content. */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:8px;
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions > a,
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions > button{
  flex:none;          /* the grid owns width now, not flex-basis */
  width:auto;
  min-width:0;        /* let a long label wrap instead of widening its track */
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  hyphens:none;
}

/* =========================================================================
   Hero hierarchy + product-card action hierarchy   (25 Aug 2026)

   Both changes are the same idea applied twice: a screen with several
   equal-weight controls has no primary action, so the visitor has to decide
   where to start. Each surface now has exactly one.
   ========================================================================= */

/* ---- Hero: one button, two text links ---------------------------------- */
.pp-refresh .hero-actions-single{
  align-items:center;
  gap:12px 20px;
}
.pp-refresh .hero-action-links{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
}
.pp-refresh .hero-action-links a{
  font-size:.86rem;
  font-weight:700;
  color:var(--pp-ink-2);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(75,36,111,.35);
  transition:color .2s,text-decoration-color .2s;
}
.pp-refresh .hero-action-links a:hover,
.pp-refresh .hero-action-links a:focus-visible{
  color:var(--pp-violet);
  text-decoration-color:var(--pp-violet);
}

/* One AI disclosure for the collage, replacing the three per-card badges. */
.pp-refresh .hero-collage-disclosure{
  position:absolute;
  left:0;
  bottom:0;
  margin:0;
  font-size:.72rem;
  line-height:1.4;
  color:var(--pp-ink-2);
  letter-spacing:.02em;
}
.pp-refresh .hero-collage-disclosure a{
  color:var(--pp-violet);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Stacked layout: the collage's own cards are absolutely positioned and
   hero-card-c is pinned to bottom:0, so an absolute disclosure at bottom:0
   lands on top of it. Below 1040px it hangs just under the collage instead,
   in the gap the collage's margin-bottom already reserves. */
@media(max-width:1040px){
  .pp-refresh .hero-collage-disclosure{
    top:100%;
    bottom:auto;
    margin-top:12px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    width:100%;
  }
}

/* ---- Product card: benefit line ---------------------------------------
   Sits between the product name and the editorial summary. The summary is
   compliance copy and every one of them opens "An editorial profile of a...",
   which is correct but identical card to card; this line is what a visitor
   scans to decide whether the card is for them. */
.pp-refresh .catalog-benefit{
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  color:var(--pp-violet);
  margin:0 0 9px;
  /* Fixed two lines so cards stay row-aligned whether the benefit wraps or
     not - and so a product with no benefit yet does not sit shorter. */
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.2em;
}

/* ---- Product card: one primary action ---------------------------------
   Overrides the equal-tracks grid defined earlier in this file: the review
   button now owns its own row and the retailer link and compare toggle share
   a quieter one beneath it. */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions{
  display:grid;
  grid-auto-flow:row;
  grid-auto-columns:auto;
  gap:10px;
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions > .btn-primary{
  width:100%;
}
.pp-refresh .catalog-actions-minor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 14px;
}

.pp-refresh .catalog-actions .catalog-retailer-link{
  /* beats `.pp-refresh .catalog-actions a` (flex:1;min-height:43px;padding:9px 10px) */
  flex:0 1 auto;
  min-height:0;
  padding:0;
  font-size:.76rem;
  font-weight:700;
  line-height:1.3;
  color:var(--pp-ink-2);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(75,36,111,.3);
  transition:color .2s,text-decoration-color .2s;
  min-width:0;
}
.pp-refresh .catalog-actions .catalog-retailer-link:hover,
.pp-refresh .catalog-actions .catalog-retailer-link:focus-visible{
  color:var(--pp-violet);
  text-decoration-color:var(--pp-violet);
}
/* The "no offer yet" slot holds the buy button's box so a linked and an
   unlinked card are the same height in the grid - they were 108px and 74px,
   which made the row of cards step up and down. It is deliberately NOT a
   button: dashed edge, no fill, no gold, default cursor, so it reads as an
   empty slot rather than a control that refuses to work. */
.pp-refresh .catalog-actions .catalog-retailer-link.is-absent{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  /* 50px and .77rem are the computed box of `.btn` beside it, matched so the
     two rows agree exactly; 44px left a 6px step between cards. */
  min-height:50px;
  padding:9px 10px;
  font-size:.77rem;
  border:1px dashed var(--pp-line);
  border-radius:999px;
  color:var(--pp-ink-2);
  /* .75, not .65 as before: muted enough to read as inactive, but the text
     still lands at 4.94:1 on the card. At .65 it measured 4.31:1 and missed
     the 4.5:1 floor. Kept as an opacity so the colour stays a token. */
  opacity:.75;
  text-decoration:none;
  font-weight:600;
  cursor:default;
}

/* Compare reads as a checkbox because that is what it is - a selection, not
   a destination. It was a full .btn, which made it the visual equal of the
   review link on every one of the 25 cards. */
.pp-refresh .catalog-actions .compare-card-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  background:transparent;
  border:0;
  padding:4px 0;
  /* A tap target, not just a label - 44px is the smallest comfortable one. */
  min-height:44px;
  font:700 .76rem/1.3 Inter,sans-serif;
  color:var(--pp-ink-2);
  cursor:pointer;
  transition:color .2s;
}
.pp-refresh .catalog-actions .compare-card-box{
  position:relative;
  width:15px;
  height:15px;
  flex:0 0 auto;
  border:1.5px solid rgba(75,36,111,.4);
  border-radius:3px;
  background:#fff;
  transition:background .2s,border-color .2s;
}
.pp-refresh .catalog-actions .compare-card-toggle:hover,
.pp-refresh .catalog-actions .compare-card-toggle:focus-visible{
  color:var(--pp-violet);
}
.pp-refresh .catalog-actions .compare-card-toggle:hover .compare-card-box{
  border-color:var(--pp-violet);
}
.pp-refresh .catalog-actions .compare-card-toggle[aria-pressed="true"],
.pp-refresh .catalog-actions .compare-card-toggle.is-selected{
  color:var(--pp-violet);
}
.pp-refresh .catalog-actions .compare-card-toggle[aria-pressed="true"] .compare-card-box,
.pp-refresh .catalog-actions .compare-card-toggle.is-selected .compare-card-box{
  background:var(--pp-violet);
  border-color:var(--pp-violet);
}

/* The tick, drawn as a rotated corner rather than shipped as an asset. */
.pp-refresh .catalog-actions .compare-card-toggle[aria-pressed="true"] .compare-card-box::after,
.pp-refresh .catalog-actions .compare-card-toggle.is-selected .compare-card-box::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:3px;
  height:7px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

@media(max-width:400px){
  .pp-refresh .catalog-actions-minor{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---- Editor's Top Picks: same hierarchy as the catalogue cards ----------
   These three cards are hand-written rather than rendered from PS_PRODUCTS,
   so they had drifted into their own pattern: two equal buttons, and spec
   chips carrying claims the catalogue data declines to make. They now carry
   one primary action and a text link, and the benefit line sits where it
   does on a catalogue card - under the name, above the verdict. */
.pp-refresh .curated-pick-benefit{
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  color:var(--pp-violet);
  margin:0 0 12px;
}
.pp-refresh .curated-pick-actions{
  /* was a 1fr 1fr button pair */
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  justify-items:start;
}
.pp-refresh .curated-pick-actions .btn-primary{
  width:100%;
}
.pp-refresh .curated-pick-actions .curated-pick-link{
  font-size:.78rem;
  font-weight:700;
  line-height:1.3;
  color:var(--pp-ink-2);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(75,36,111,.3);
  /* a tap target, not just a label */
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .2s,text-decoration-color .2s;
}
.pp-refresh .curated-pick-actions .curated-pick-link:hover,
.pp-refresh .curated-pick-actions .curated-pick-link:focus-visible{
  color:var(--pp-violet);
  text-decoration-color:var(--pp-violet);
}

/* =========================================================================
   PRODUCT PAGE: collapsible detail panels, purchase path, verified badge
                                                          (25 Aug 2026)
   Native <details>, so collapse costs no JavaScript, is keyboard-operable,
   announces its state to a screen reader, and still lets Ctrl+F find text
   inside a closed panel in browsers that support that.
   ========================================================================= */
.pp-refresh .product-panel{
  border-top:1px solid var(--pp-line);
  background:transparent;
}
.pp-refresh .product-panel:last-of-type{border-bottom:1px solid var(--pp-line)}

.pp-refresh .product-panel-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 2px;
  cursor:pointer;
  list-style:none;            /* kill the default disclosure triangle... */
}
.pp-refresh .product-panel-summary::-webkit-details-marker{display:none}  /* ...and in Safari */
.pp-refresh .product-panel-summary:focus-visible{
  outline:2px solid var(--pp-violet);
  outline-offset:-2px;
}
.pp-refresh .product-panel-summary h2{
  margin:0;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.3;
}
.pp-refresh .product-panel-summary:hover h2{color:var(--pp-violet)}

/* A chevron drawn from two borders: no glyph, no icon font, no asset. */
.pp-refresh .product-panel-chevron{
  flex:0 0 auto;
  width:10px;
  height:10px;
  margin-right:6px;
  border-right:2px solid var(--pp-violet);
  border-bottom:2px solid var(--pp-violet);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.pp-refresh .product-panel[open] .product-panel-chevron{
  transform:rotate(-135deg) translate(-2px,-2px);
}
@media(prefers-reduced-motion:reduce){
  .pp-refresh .product-panel-chevron{transition:none}
}

.pp-refresh .product-panel-body{
  padding:0 2px 26px;
  max-width:74ch;
}
.pp-refresh .product-panel-body > :first-child{margin-top:0}
.pp-refresh .product-panel-body dl{display:grid;gap:12px;margin:0}
.pp-refresh .product-panel-body dl > div{
  display:grid;
  grid-template-columns:minmax(140px,210px) 1fr;
  gap:6px 20px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(75,36,111,.08);
}
.pp-refresh .product-panel-body dt{
  font:800 .72rem/1.4 Inter,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pp-ink-2);
}
.pp-refresh .product-panel-body dd{margin:0;font-size:.9rem;line-height:1.55}
@media(max-width:620px){
  .pp-refresh .product-panel-body dl > div{grid-template-columns:1fr}
}

/* ---- "Label checked" proof, sitting with the claim rather than in a
        compliance ledger at the foot of the page ----------------------- */
.pp-refresh .product-verified-badge{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:16px 0 0;
  padding:12px 14px;
  border:1px solid rgba(75,36,111,.18);
  border-left:3px solid var(--pp-sage,#6f9c86);
  border-radius:6px;
  background:#fbf9fd;
  font-size:.8rem;
  line-height:1.5;
  color:var(--pp-ink-2);
}
.pp-refresh .product-verified-mark{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--pp-sage,#6f9c86);
  color:#fff;
  font-size:.7rem;
  line-height:1;
}
.pp-refresh .product-verified-badge strong{color:var(--pp-ink)}

/* ---- What a visitor needs before leaving for the retailer -------------- */
.pp-refresh .product-purchase-path{
  /* The gallery is a two-column grid - a narrow thumbnail strip beside the
     stage - and every other block in it spans both tracks. Without this the
     panel dropped into the 74px thumbnail track and wrapped its labels one
     character per line. */
  grid-column:1 / -1;
  margin:16px 0 0;
  padding:16px 18px;
  border:1px solid var(--pp-line);
  border-radius:8px;
  background:#fff;
}
.pp-refresh .product-purchase-path-heading{
  margin:0 0 12px;
  font:800 .68rem/1 Inter,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pp-violet);
}
.pp-refresh .product-purchase-path dl{display:grid;gap:9px;margin:0}
.pp-refresh .product-purchase-path dl > div{
  display:grid;
  grid-template-columns:minmax(96px,120px) 1fr;
  gap:4px 14px;
  align-items:start;
}
.pp-refresh .product-purchase-path dt{
  font:800 .68rem/1.5 Inter,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pp-ink-2);
}
.pp-refresh .product-purchase-path dd{margin:0;font-size:.79rem;line-height:1.5;color:var(--pp-ink)}
.pp-refresh .product-purchase-path-note{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid rgba(75,36,111,.1);
  font-size:.72rem;
  color:var(--pp-ink-2);
}
.pp-refresh .product-purchase-path-note a{color:var(--pp-violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){
  .pp-refresh .product-purchase-path dl > div{grid-template-columns:1fr;gap:2px}
}

/* Card-level verification proof. Deliberately quiet - it is reassurance a
   visitor finds when they look for it, not another badge shouting. */
.pp-refresh .catalog-verified{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 12px;
  font:700 .7rem/1.4 Inter,sans-serif;
  color:var(--pp-ink-2);
  flex:0 0 auto;
}
.pp-refresh .catalog-verified-mark{
  flex:0 0 auto;
  width:14px;height:14px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--pp-sage,#6f9c86);
  color:#fff;
  font-size:.58rem;line-height:1;
}

/* =========================================================================
   SECTION RHYTHM                                        (25 Aug 2026)

   The homepage ran: hero (pale) - ticker (dark) - department grid (pale) -
   top picks (pale) - story band (dark) - journal (pale) - trust strip (dark).

   The two card grids in the middle sat on the same pale ground with the same
   vertical spacing, so the eye read them as one very long section and the
   boundary between "browse a department" and "here are three picks" did not
   register. Premium sites feel deliberate largely because each section
   announces itself.

   A third surface fixes it without another dark band, which at that point in
   the page would compete with the story band a screen further down: a soft
   lavender ground with hairline rules top and bottom. Pale - tinted - dark
   now alternates all the way down.
   ========================================================================= */
.pp-refresh .curated-picks-section{
  background:
    linear-gradient(180deg, #f3edfa 0%, #f7f3fc 55%, #f3edfa 100%);
  border-top:1px solid rgba(75,36,111,.12);
  border-bottom:1px solid rgba(75,36,111,.12);
}
/* The cards were white-on-white against the old ground; on the tint they need
   their own edge to stay distinct. */
.pp-refresh .curated-picks-section .curated-pick-card{
  background:#fff;
  border:1px solid rgba(75,36,111,.14);
  box-shadow:0 18px 40px -30px rgba(33,22,49,.45);
}

/* The trust strip and the footer are both dark and meet with no seam, which
   reads as one enormous dark block closing the page. A hairline keeps them
   legible as two distinct things. */
.pp-refresh .trust-strip-section + .footer,
.pp-refresh .trust-strip-section{
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* A staged product has no page yet; the card says so where its button was. */
.pp-refresh .catalog-no-page{
  margin:0;
  padding:12px 10px;
  border:1px dashed var(--pp-line);
  border-radius:6px;
  background:#faf7fc;
  font:600 .74rem/1.4 Inter,sans-serif;
  color:var(--pp-ink-2);
  text-align:center;
}
.pp-refresh .catalog-card-media div,
.pp-refresh div.catalog-card-media{cursor:default}

/* The homepage bands each paint their own background and sit in a predictable
   stacking context. This was introduced for the fixed brand wordmark that used
   to overlay them; the wordmark was removed on 28 August 2026, but the bands
   are left in their own stacking context because several of them layer scrims
   and media over their backgrounds and rely on it. */
.pp-refresh.home main > section,
.pp-refresh.home main > div,
.pp-refresh.home .footer{
  position:relative;
  z-index:1;
}

/* =========================================================================
   HOMEPAGE MOTION STRIP                                 (25 Aug 2026)

   KilgourMD opens its homepage with a silent, looping, controls-free video
   filling the width. Its clip is 16:9; these four are 1080x1920, so the
   treatment is adopted in the shape the assets actually are - a row of
   portrait cards - rather than cropping a 9:16 clip into a letterbox.

   Each card links into its department. Ambient motion that is also a way in
   beats ambient motion that is only decoration.
   ========================================================================= */
.pp-refresh .home-video-strip{
  padding:56px 0 64px;
  background:linear-gradient(180deg,#efe8f8 0%,#f7f3fc 100%);
  border-block:1px solid rgba(75,36,111,.12);
}
.pp-refresh .video-strip-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.pp-refresh .video-strip-head h2{
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  margin:6px 0 0;
}
.pp-refresh .video-strip-toggle{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 18px;
  border:1.5px solid var(--pp-ink);
  border-radius:999px;
  background:transparent;
  font:700 .78rem Inter,sans-serif;
  color:var(--pp-ink);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.pp-refresh .video-strip-toggle:hover,
.pp-refresh .video-strip-toggle:focus-visible{
  background:var(--pp-ink);
  color:#fff;
}

.pp-refresh .video-strip-rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.pp-refresh .video-strip-card{min-width:0;margin:0}

.pp-refresh .video-strip-link{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(75,36,111,.14);
  color:var(--pp-ink);
  text-decoration:none;
  box-shadow:0 20px 44px -32px rgba(33,22,49,.6);
}
.pp-refresh .video-strip-link:hover,
.pp-refresh .video-strip-link:focus-visible{border-color:var(--pp-violet)}
.pp-refresh .video-strip-link:focus-visible{outline:2px solid var(--pp-violet);outline-offset:2px}

.pp-refresh .video-strip-media{
  display:block;
  aspect-ratio:9 / 16;      /* the shape the clips actually are */
  background:#e4d9f2;        /* brand ground while the poster decodes */
  overflow:hidden;
}
.pp-refresh .video-strip-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pp-refresh .video-strip-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px 14px;
}
.pp-refresh .video-strip-name{font:700 .9rem/1.25 Inter,sans-serif}
.pp-refresh .video-strip-benefit{font:600 .74rem/1.4 Inter,sans-serif;color:var(--pp-ink-2)}

.pp-refresh .video-strip-disclosure{
  margin:18px 0 0;
  font-size:.72rem;
  color:var(--pp-ink-2);
}
.pp-refresh .video-strip-disclosure a{color:var(--pp-violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Below the grid breakpoint the strip becomes a scroll rail, like the nav
   one: fixed card widths so the next clip is always partly in view. */
@media(max-width:900px){
  .pp-refresh .video-strip-rail{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }
  .pp-refresh .video-strip-card{flex:0 0 210px;scroll-snap-align:start}
}
@media(max-width:520px){
  .pp-refresh .video-strip-card{flex-basis:170px}
  .pp-refresh .home-video-strip{padding:40px 0 46px}
}

/* Someone who has asked for less motion gets the poster frames and a control
   that offers to start them, rather than four looping clips. */
@media(prefers-reduced-motion:reduce){
  .pp-refresh .video-strip-video{transition:none}
}

/* =========================================================================
   PRODUCT GALLERY ARROWS                                (25 Aug 2026)

   Two sets, doing different jobs:

     * The STAGE arrows step through the images. They flank the main picture
       because that is what the visitor is looking at.
     * The RAIL arrows scroll the thumbnail strip. The strip runs top-to-bottom
       beside the stage on a wide screen and left-to-right underneath it on a
       narrow one, so the arrows sit at the ends of whichever axis it scrolls
       along - top and bottom when vertical, left and right when horizontal.

   Both are built by pdp-gallery.js, so a page with no JavaScript never shows
   a control that cannot work.
   ========================================================================= */
.pp-refresh .product-pdp-stage.has-stage-arrows{position:relative}

.pp-refresh .pdp-stage-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(75,36,111,.18);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px -6px rgba(33,22,49,.45);
  color:var(--pp-ink);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.pp-refresh .pdp-stage-arrow:hover,
.pp-refresh .pdp-stage-arrow:focus-visible{
  background:var(--pp-ink);
  border-color:var(--pp-ink);
  color:#fff;
}
.pp-refresh .pdp-stage-arrow:focus-visible{outline:2px solid var(--pp-violet);outline-offset:2px}
.pp-refresh .pdp-stage-prev{left:10px}
.pp-refresh .pdp-stage-next{right:10px}

/* ---- rail ---- */
.pp-refresh .product-pdp-rail-wrap{position:relative;min-width:0}

.pp-refresh .pdp-rail-arrow{
  position:absolute;
  z-index:3;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(75,36,111,.18);
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 12px -4px rgba(33,22,49,.4);
  color:var(--pp-ink);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.pp-refresh .pdp-rail-arrow[hidden]{display:none}
.pp-refresh .pdp-rail-arrow:hover{border-color:var(--pp-violet);color:var(--pp-violet)}

/* Vertical rail: the arrows cap the column, and the glyphs rotate to point
   along the axis the strip actually scrolls. */
.pp-refresh .rail-vertical .pdp-rail-arrow{
  left:50%;
  transform:translateX(-50%) rotate(90deg);
}
.pp-refresh .rail-vertical .pdp-rail-start{top:-6px}
.pp-refresh .rail-vertical .pdp-rail-end{bottom:-6px}

/* Horizontal rail: back to left and right. */
.pp-refresh .rail-horizontal .pdp-rail-arrow{
  top:50%;
  transform:translateY(-50%);
}
.pp-refresh .rail-horizontal .pdp-rail-start{left:-6px}
.pp-refresh .rail-horizontal .pdp-rail-end{right:-6px}

@media(max-width:560px){
  .pp-refresh .pdp-stage-arrow{width:36px;height:36px;font-size:1.15rem}
  .pp-refresh .pdp-stage-prev{left:6px}
  .pp-refresh .pdp-stage-next{right:6px}
}

/* =========================================================================
   PRODUCT GALLERY: THUMBNAILS BELOW THE IMAGE            (25 Aug 2026)

   The strip used to run top-to-bottom in a 74px column beside the stage, so
   its scroll arrows had to point up and down while the thumbnails they moved
   sat in a vertical line - correct, but it read as a different control from
   the left/right arrows on the picture right next to it.

   Moving the strip under the image makes every arrow on the page point along
   the axis the thing it moves actually travels. The narrow-screen rule already
   did this below 560px; this is that layout at every width, so there is one
   gallery rather than two.

   pdp-gallery.js reads the strip's computed flex-direction rather than a
   breakpoint, so it switches its arrows to left/right on its own.
   ========================================================================= */
.pp-refresh .product-pdp-gallery{
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
/* The stage leads; the strip follows it. `order` is set on both the strip and
   the wrapper pdp-gallery.js puts around it, because without JavaScript the
   strip is still the grid item itself. */
.pp-refresh .product-pdp-stage{order:1}
.pp-refresh .product-pdp-thumbs,
.pp-refresh .product-pdp-rail-wrap{order:2}
.pp-refresh .product-pdp-gallery > .editorial-notice,
.pp-refresh .product-pdp-gallery > .product-gallery-actions,
.pp-refresh .product-pdp-gallery > .product-purchase-path,
.pp-refresh .product-pdp-gallery > .retail-availability{order:3}

.pp-refresh .product-pdp-thumbs{
  flex-direction:row;
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
}
.pp-refresh .product-pdp-thumb{scroll-snap-align:start}

/* The wrapper is now a full-width row, so the arrows need room at its ends
   rather than hanging off a 74px column. */
.pp-refresh .product-pdp-rail-wrap{width:100%}
.pp-refresh .rail-horizontal .pdp-rail-start{left:-4px}
.pp-refresh .rail-horizontal .pdp-rail-end{right:-4px}

/* =========================================================================
   CATALOGUE CARD THUMBNAILS: the same treatment            (25 Aug 2026)

   These already sat under the card image, but the strip was `overflow:hidden`
   - a card with seven photographs showed four and silently swallowed the rest.
   It scrolls now, with the same left/right arrows as the product page, so the
   two behave identically.
   ========================================================================= */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-thumbs-wrap{
  /* Takes the metrics the strip used to carry, so every card is still the same
     height whether or not it has thumbnails to show. */
  position:relative;
  flex:0 0 62px;
  height:62px;
  box-sizing:border-box;
  background:#fff;
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-thumbs{
  flex:1 1 auto;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;            /* the arrows are the affordance here */
}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-card-thumbs::-webkit-scrollbar{display:none}
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-thumb-btn{scroll-snap-align:start}

.pp-refresh .catalog-thumb-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(75,36,111,.2);
  border-radius:50%;
  background:rgba(255,255,255,.97);
  box-shadow:0 3px 10px -3px rgba(33,22,49,.4);
  color:var(--pp-ink);
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.pp-refresh .catalog-thumb-arrow[hidden]{display:none}
.pp-refresh .catalog-thumb-arrow:hover{border-color:var(--pp-violet);color:var(--pp-violet)}
.pp-refresh .catalog-thumb-prev{left:2px}
.pp-refresh .catalog-thumb-next{right:2px}

/* ---- Arrows over the card image                        (4 Sep 2026) -------
   The thumbnail strip had arrows and the picture above it did not, so the only
   way to change the image was to aim at a 44px thumbnail. These match the thumb
   arrows' language - white disc, soft violet edge, violet on hover - at the
   larger size the 330px media box can carry.

   `.catalog-card-media-frame` exists only to give them something to position
   against: on a card with a product page `.catalog-card-media` is itself the
   <a>, and a <button> inside an anchor is invalid markup. The frame is a flex
   pass-through so the media keeps the flex sizing it already had.

   The visual disc is 40px; the ::before pushes the hit area to 48px, which is
   the project's touch-target floor.

   Revealed on card hover, so a seven-card grid stays calm until the reader is
   actually looking at one card. Touch has no hover, so `@media (hover:none)`
   shows them unconditionally - without it, touch users would get no control at
   all. Keyboard users get them on :focus-visible for the same reason. */
.pp-refresh .catalog-card-media-frame{position:relative;display:flex;flex-direction:column;min-width:0}
.pp-refresh .catalog-media-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(75,36,111,.2);
  border-radius:50%;
  background:rgba(255,255,255,.97);
  box-shadow:0 3px 10px -3px rgba(33,22,49,.4);
  color:var(--pp-ink);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  opacity:0;
  transition:opacity .2s,border-color .2s,color .2s;
}
.pp-refresh .catalog-media-arrow::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.pp-refresh .catalog-card:hover .catalog-media-arrow,
.pp-refresh .catalog-card:focus-within .catalog-media-arrow,
.pp-refresh .catalog-media-arrow:focus-visible{opacity:1}
.pp-refresh .catalog-media-arrow:hover{border-color:var(--pp-violet);color:var(--pp-violet)}
.pp-refresh .catalog-media-arrow:focus-visible{outline:2px solid var(--pp-violet);outline-offset:2px}
.pp-refresh .catalog-media-prev{left:10px}
.pp-refresh .catalog-media-next{right:10px}
/* No hover on touch, so the arrows are simply always visible there. */
@media (hover:none){
  .pp-refresh .catalog-media-arrow{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .pp-refresh .catalog-media-arrow{transition:none}
}

/* =========================================================================
   PRODUCT GALLERY REFINEMENTS                           (25 Aug 2026)
   ========================================================================= */

/* ---- 1. The thumbnail rail matches the picture, not the column ----------
   The stage is sized from the viewport height (it is a 9:16 frame), so the
   rail is given the identical expression rather than a guessed width. Both
   centre in the gallery column, so the rail sits exactly under the image
   instead of running past it to the full column width. */
.pp-refresh .product-pdp-stage,
.pp-refresh .product-pdp-rail-wrap{
  width:min(100%, calc((100dvh - 230px) * 0.5625));
  margin-inline:auto;
}
.pp-refresh .product-pdp-gallery-static .product-pdp-stage,
.pp-refresh .product-pdp-gallery-static .product-pdp-rail-wrap{
  width:100%;   /* a single-image gallery uses the full column, as before */
}

/* ---- 5. Nothing sits above the picture any more -------------------------
   The disclosure banner used to be the first item in the gallery column and
   pushed the image down, so it started lower than the product name beside it.
   With the banner folded into "Before you go" the stage is first, and both
   columns now begin on the same line. */
.pp-refresh .product-pdp-layout > *{align-self:start}

/* ---- 6. "Before you go" ------------------------------------------------- */
.pp-refresh .product-purchase-path{
  background:linear-gradient(180deg, #efe7fa 0%, #f6f1fd 100%);
  border:1px solid rgba(123,63,198,.28);
  border-radius:10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 38px -22px rgba(75,36,111,.55),
    0 4px 12px -8px rgba(33,22,49,.35);
}
.pp-refresh .product-purchase-path dl > div{
  border-bottom:1px solid rgba(123,63,198,.14);
  padding-bottom:8px;
}
.pp-refresh .product-purchase-path dl > div:last-child{border-bottom:0;padding-bottom:0}
.pp-refresh .product-purchase-path-note{border-top-color:rgba(123,63,198,.2)}

/* ---- 7. The "Label checked" panel is gone from the product page ---------
   Its rules are dropped with it. The equivalent one-line marker on catalogue
   cards (.catalog-verified) is a different element and stays. */
.pp-refresh .product-verified-badge,
.pp-refresh .product-verified-mark{display:none}

/* The disclosure sentence inside "Before you go". It is written by
   pdp-affiliate-sync.js at runtime, so it is styled by class rather than by
   position among its siblings. */
.pp-refresh .product-purchase-path .product-gallery-disclosure{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(123,63,198,.18);
  font-size:.76rem;
  line-height:1.5;
  color:var(--pp-ink);
}
.pp-refresh .product-purchase-path .product-gallery-disclosure strong{color:var(--pp-violet)}

/* Eyewear catalogue - SmartBuyGlasses retailer listings (2026-09-11) */
.pp-refresh .sbg-lede{max-width:760px;color:var(--pp-ink)}
.pp-refresh .sbg-disclosure{margin:14px 0}
.pp-refresh .sbg-controls{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:16px 0 6px}
.pp-refresh .sbg-controls label{font-size:.78rem;font-weight:700;color:var(--pp-ink)}
.pp-refresh .sbg-controls select,.pp-refresh .sbg-controls input{padding:8px 10px;border:1px solid rgba(123,63,198,.3);border-radius:8px;font:inherit;min-width:180px;background:#fff}
.pp-refresh .sbg-summary{font-size:.85rem;color:var(--pp-ink)}
.pp-refresh .sbg-grid{margin-top:8px}
/* Listing cards reuse .catalog-card; only the action is made compact - one short
   button, sized to its text, rather than a full-width block. */
.pp-refresh :is(.catalogue-page, .catalog-grid) .sbg-listing .catalog-actions{display:flex;justify-content:flex-start}
.pp-refresh :is(.catalogue-page, .catalog-grid) .sbg-listing .catalog-actions > a.sbg-cta{flex:0 0 auto;width:auto;min-height:36px;padding:7px 18px;font-size:.78rem;line-height:1.2}
.pp-refresh .sbg-more{display:block;margin:20px auto 0}
.pp-refresh .sbg-method{margin-top:24px;font-size:.78rem;max-width:760px;color:var(--pp-ink);opacity:.85}

/* AI image labelling (2026-09-11). Every AI-generated gallery image shows a
   caption under the stage while it is on screen, and its thumbnail carries a
   small "AI" badge so the reader knows before clicking. */
.pp-refresh .product-media-note{
  order:1;   /* same flex order as the stage, and after it in the source, so it sits directly under the image */
  margin:6px 0 0;
  padding:6px 10px;
  border-left:3px solid var(--pp-violet);
  background:rgba(123,63,198,.07);
  font-size:.74rem;
  line-height:1.45;
  color:var(--pp-ink);
}
.pp-refresh .product-media-note[hidden]{display:none}
.pp-refresh .product-pdp-thumb[data-ai]{position:relative}
.pp-refresh .product-pdp-thumb[data-ai]::after{
  content:'AI';
  position:absolute;
  top:4px;
  left:4px;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(33,22,49,.82);
  color:#fff;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.04em;
  pointer-events:none;
}

/* "Before you go" removed 2026-09-11: the wrapper now holds only the
   disclosure, so it drops its own panel and lets the disclosure's box stand
   alone. The wrapper stays for its `order` placement under the buttons. */
.pp-refresh .product-purchase-path--disclosure-only{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
.pp-refresh .product-purchase-path--disclosure-only .product-gallery-disclosure{margin:0}

/* =========================================================================
   PRODUCT PAGE: disclosure sits BELOW the buttons                (25 Aug 2026)

   Requested placement, achieved with `order` rather than by moving the markup.
   That matters: the source keeps the disclosure ahead of the purchase action,
   so a screen reader and the release audit both still meet it first - the
   safer arrangement - while sighted readers see button, then terms.
   Reordering visually is allowed here because the two sit flush together; the
   disclosure is never off-screen or separated from the action it qualifies.
   ========================================================================= */
.pp-refresh .product-pdp-gallery > .product-gallery-actions{order:3}
.pp-refresh .product-pdp-gallery > .product-purchase-path{order:4;margin-top:14px}
.pp-refresh .product-pdp-gallery > .retail-availability{order:5}

/* ---- catalogue card: two buttons, equal weight in the row --------------- */
.pp-refresh :is(.catalogue-page,.catalog-grid) .catalog-actions{
  grid-auto-flow:row;
  gap:8px;
}
.pp-refresh .catalog-buy-button{
  width:100%;
  min-height:44px;
}

/* =========================================================================
   VIDEO HERO                                            (25 Aug 2026)

   The KilgourMD treatment, adapted rather than copied. Theirs is one 16:9
   clip filling the width with the headline over it. These four are 1080x1920,
   so instead of cropping a portrait clip into a letterbox they tile as four
   full-height columns - which fills the same band edge to edge and keeps every
   clip in its own aspect ratio.

   The copy sits over the top with a scrim between, because text over moving
   footage is unreadable without one. The scrim is heaviest on the side the
   text occupies and clears towards the right so the footage still reads.
   ========================================================================= */
.pp-refresh .home-hero{position:relative;overflow:hidden;isolation:isolate}

.pp-refresh .hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;   /* the hero's own controls stay clickable */
}
.pp-refresh .hero-video-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.pp-refresh .hero-video-tile{position:relative;overflow:hidden;min-width:0}
.pp-refresh .hero-video-tile video,
.pp-refresh .hero-video-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* A hairline between clips so four separate films do not read as one smear. */
.pp-refresh .hero-video-tile + .hero-video-tile{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}

.pp-refresh .hero-video-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(33,22,49,.94) 0%, rgba(33,22,49,.86) 34%, rgba(33,22,49,.55) 58%, rgba(33,22,49,.42) 100%),
    linear-gradient(180deg, rgba(33,22,49,.5) 0%, rgba(33,22,49,0) 32%);
}

/* The copy column rides above the footage. */
.pp-refresh .home-hero .hero-layout{position:relative;z-index:1}
.pp-refresh .home-hero .hero-copy{max-width:min(660px,92%)}
.pp-refresh .home-hero .hero-copy h1,
.pp-refresh .home-hero .hero-copy > p,
.pp-refresh .home-hero .eyebrow{color:#fff}
.pp-refresh .home-hero .hero-copy h1 em{color:#e9c9f5}
.pp-refresh .home-hero .hero-copy > p{color:rgba(255,255,255,.9)}
.pp-refresh .home-hero .hero-note span{color:rgba(255,255,255,.86)}
.pp-refresh .home-hero .hero-note strong{color:#fff}
.pp-refresh .home-hero .hero-action-links a{color:rgba(255,255,255,.9);text-decoration-color:rgba(255,255,255,.5)}
.pp-refresh .home-hero .hero-action-links a:hover{color:#fff;text-decoration-color:#fff}
/* The hero is now a dark band, so its buttons take the dark-surface pair. */
.pp-refresh .home-hero .btn-primary{
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,#9f6a12 0%,#f8e7a8 18%,#d79a37 38%,#fff5c7 58%,#b77b1d 78%,#f7d878 100%) border-box;
  color:var(--pp-ink);
}
.pp-refresh .home-hero .btn-primary:hover{
  background:linear-gradient(#e6d8f7,#e6d8f7) padding-box,
    linear-gradient(120deg,#9f6a12 0%,#f8e7a8 18%,#d79a37 38%,#fff5c7 58%,#b77b1d 78%,#f7d878 100%) border-box;
}

/* Pause control and AI disclosure, sitting under the copy. */
.pp-refresh .hero-video-note{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:22px 0 0;
}
.pp-refresh .home-hero .video-strip-toggle{
  border-color:rgba(255,255,255,.6);
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
}
.pp-refresh .home-hero .video-strip-toggle:hover,
.pp-refresh .home-hero .video-strip-toggle:focus-visible{background:#fff;color:var(--pp-ink);border-color:#fff}
.pp-refresh .hero-video-disclosure{font-size:.72rem;color:rgba(255,255,255,.74);line-height:1.4}
.pp-refresh .hero-video-disclosure a{color:#e9c9f5;font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  /* Two columns rather than four slivers. */
  .pp-refresh .hero-video-grid{grid-template-columns:repeat(2,1fr)}
  .pp-refresh .hero-video-scrim{
    background:linear-gradient(180deg, rgba(33,22,49,.72) 0%, rgba(33,22,49,.92) 55%, rgba(33,22,49,.96) 100%);
  }
  .pp-refresh .home-hero .hero-copy{max-width:100%}
}

/* =========================================================================
   HERO TILE COUNT vs CROP                               (25 Aug 2026)

   The clips are 1080x1920 (ratio 0.563). A tile narrower than that ratio has
   to lose width to `object-fit: cover`, and four tiles across a 1249px hero
   made each one 302x929 - ratio 0.325, discarding 42% of every frame. That is
   what made the footage look stretched.

   Measured at the current hero height:
       2 tiles  624px wide   0% cropped
       3 tiles  416px wide   6.7% cropped
       4 tiles  312px wide   30% cropped
       5 tiles  249px wide   44% cropped

   So three is the count that fits this footage - which is also the number
   KilgourMD runs. The fourth clip returns above 1600px, where the extra width
   keeps its tile near the same ratio rather than squeezing all four.
   ========================================================================= */
.pp-refresh .hero-video-grid{grid-template-columns:repeat(3,1fr)}

@media(min-width:1600px){
  .pp-refresh .hero-video-grid{grid-template-columns:repeat(4,1fr)}
}

/* Below 900px the earlier rule already drops to two tiles, which at that width
   is the closest fit to the source ratio. */
@media(max-width:900px){
  .pp-refresh .hero-video-grid{grid-template-columns:repeat(2,1fr)}
}

/* The hero's height is what crops the footage, and its height is copy plus
   padding (793 + 136). Trimming the padding shortens the band, which widens
   each tile's effective ratio and hands back most of the cropped frame.
   The copy itself sets the floor below this - going further would mean
   dropping something from the hero, which is a content decision. */
.pp-refresh .home-hero .hero-layout{padding:34px 0 30px}
.pp-refresh .home-hero{min-height:0}

/* =========================================================================
   HERO SCRIM: LIGHT                                     (25 Aug 2026)

   The first version laid a near-opaque deep purple over the clips - .94 alpha
   at the left edge - because the copy was white and needed the contrast. The
   footage paid for it: dark, low-contrast, and reading as blurry even though
   nothing is actually blurred.

   Inverted here. A pale lavender veil sits over the clips instead, heaviest
   where the text is and thinning to almost nothing on the right, and the copy
   returns to ink. That is also the brand's own register - the palette is white
   shades of purple, so a light hero belongs more than a dark one did.

   The veil still has to earn its keep: ink on the lightest part of the veil
   measures well past 4.5:1, which is why it does not simply clear away
   entirely behind the text.
   ========================================================================= */
.pp-refresh .hero-video-scrim{
  /* Alphas chosen by measurement, not by eye. Sampling the darkest frame of
     each clip and compositing against it: at .72 the body copy still reads
     6.7:1 and the headline 11.2:1, against a WCAG AA floor of 4.5. The first
     attempt used .93, which was roughly twice the veil the text actually
     needed and buried the footage for no benefit. */
  background:
    linear-gradient(100deg,
      rgba(247,243,252,.72) 0%,
      rgba(247,243,252,.64) 32%,
      rgba(247,243,252,.38) 54%,
      rgba(245,239,232,.20) 78%,
      rgba(245,239,232,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%);
}

/* The clips themselves: a touch more contrast and saturation, since a veil
   over footage always flattens it slightly. */
.pp-refresh .hero-video-tile video,
.pp-refresh .hero-video-tile img{
  filter:saturate(1.08) contrast(1.05);
}
/* The hairline between clips was white for a dark ground; on a pale one it
   needs to be ink or it disappears. */
.pp-refresh .hero-video-tile + .hero-video-tile{box-shadow:inset 1px 0 0 rgba(75,36,111,.18)}

/* ---- the copy returns to ink -------------------------------------------- */
.pp-refresh .home-hero .hero-copy h1,
.pp-refresh .home-hero .eyebrow{color:var(--pp-ink)}
.pp-refresh .home-hero .hero-copy h1 em{color:var(--pp-rose,#c6546d)}
.pp-refresh .home-hero .hero-copy > p{color:var(--pp-ink-2)}
.pp-refresh .home-hero .hero-note span{color:var(--pp-ink-2)}
.pp-refresh .home-hero .hero-note strong{color:var(--pp-ink)}
.pp-refresh .home-hero .hero-action-links a{color:var(--pp-ink-2);text-decoration-color:rgba(75,36,111,.35)}
.pp-refresh .home-hero .hero-action-links a:hover{color:var(--pp-violet);text-decoration-color:var(--pp-violet)}

/* A light band takes the light-surface button pair again: solid ink primary. */
.pp-refresh .home-hero .btn-primary{
  background:
    linear-gradient(var(--pp-ink), var(--pp-ink)) padding-box,
    linear-gradient(120deg,#9f6a12 0%,#f8e7a8 18%,#d79a37 38%,#fff5c7 58%,#b77b1d 78%,#f7d878 100%) border-box;
  color:#fff;
}
.pp-refresh .home-hero .btn-primary:hover{
  background:
    linear-gradient(var(--pp-plum), var(--pp-plum)) padding-box,
    linear-gradient(120deg,#9f6a12 0%,#f8e7a8 18%,#d79a37 38%,#fff5c7 58%,#b77b1d 78%,#f7d878 100%) border-box;
  color:#fff;
}

/* Pause control and AI note, back to ink on the pale veil. */
.pp-refresh .home-hero .video-strip-toggle{
  border-color:var(--pp-ink);
  color:var(--pp-ink);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(4px);
}
.pp-refresh .home-hero .video-strip-toggle:hover,
.pp-refresh .home-hero .video-strip-toggle:focus-visible{background:var(--pp-ink);color:#fff;border-color:var(--pp-ink)}
.pp-refresh .hero-video-disclosure{color:var(--pp-ink-2)}
.pp-refresh .hero-video-disclosure a{color:var(--pp-violet)}

@media(max-width:900px){
  /* Stacked, the text sits over the middle of the footage, so the veil is
     even rather than directional. */
  .pp-refresh .hero-video-scrim{
    /* Stacked, the copy crosses the whole frame, so the veil is even - and a
       little heavier than on desktop because there is no clear side to escape
       to. Still well inside AA. */
    background:linear-gradient(180deg,
      rgba(247,243,252,.62) 0%,
      rgba(247,243,252,.78) 45%,
      rgba(247,243,252,.84) 100%);
  }
}

/* =========================================================================
   HERO: NO SHEET OVER THE VIDEO                         (25 Aug 2026)

   The full-width veil is gone. Measured against the raw clips, the headline
   holds up on its own - 3.97:1 at worst, above the 3:1 large-text floor - but
   the body copy falls to 2.37:1 against a 4.5:1 requirement, which is not a
   technicality: on the street-scene clip it is genuinely hard to read.

   So instead of covering the footage, the backing is confined to the copy: a
   feathered radial glow that fades out well before the tile edges, plus a
   white halo on the glyphs themselves. Most of the hero is now untouched
   video, and the text still measures.
   ========================================================================= */
.pp-refresh .hero-video-scrim{
  background:
    /* only a whisper, to stop the very brightest frames blowing out the
       top edge where the nav sits */
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 26%);
}

.pp-refresh .home-hero .hero-copy{position:relative}
.pp-refresh .home-hero .hero-copy::before{
  content:"";
  position:absolute;
  /* generous bleed so the fade finishes off the text, never against it */
  inset:-8% -18% -8% -26%;
  z-index:-1;
  /* Thinned once measured: at .90 the body copy read 8.62:1 against a 4.5
     requirement, so the glow was nearly twice what the text needed and looked
     like a panel. At .74 it still clears AA with room and reads as a soft lift
     rather than a shape. */
  background:radial-gradient(120% 96% at 32% 46%,
    rgba(250,247,253,.78) 0%,
    rgba(250,247,253,.74) 34%,
    rgba(250,247,253,.54) 58%,
    rgba(250,247,253,.24) 78%,
    rgba(250,247,253,0) 100%);
  pointer-events:none;
}

/* A white halo on the glyphs. This is what lets the glow stay soft: the text
   carries its own contrast at the edges rather than needing a hard panel. */
.pp-refresh .home-hero .hero-copy h1,
.pp-refresh .home-hero .hero-copy > p,
.pp-refresh .home-hero .eyebrow,
.pp-refresh .home-hero .hero-note span,
.pp-refresh .home-hero .hero-video-disclosure{
  text-shadow:
    0 0 10px rgba(252,250,255,.95),
    0 0 22px rgba(252,250,255,.8),
    0 1px 2px rgba(252,250,255,.9);
}

/* The search box and trust note sit on video now, so they need their own
   surface rather than borrowing the veil's. */
.pp-refresh .home-hero .hero-search-form{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
}
.pp-refresh .home-hero .topic-pill{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(4px);
}

@media(max-width:900px){
  /* Stacked, the copy crosses the whole frame, so the glow spans it rather
     than sitting to one side. */
  .pp-refresh .hero-video-scrim{
    background:linear-gradient(180deg, rgba(250,247,253,.30) 0%, rgba(250,247,253,.45) 100%);
  }
  .pp-refresh .home-hero .hero-copy::before{
    inset:-6% -12%;
    background:radial-gradient(130% 80% at 50% 50%,
      rgba(250,247,253,.93) 0%,
      rgba(250,247,253,.86) 45%,
      rgba(250,247,253,.55) 74%,
      rgba(250,247,253,0) 100%);
  }
}

/* =========================================================================
   HERO: CONTINUOUS LEFTWARD SCROLL                      (25 Aug 2026)

   Why not one clip at full width: these are 1080x1920, and a 1249px-wide slot
   at this hero height would keep only 39% of each frame - a thin horizontal
   slice through the middle, heads and feet gone. Measured across tile widths:

       480px   0.4% cropped   2.6 clips visible
       650px  25.8% cropped   1.9 clips visible   <- chosen
       900px  46.4% cropped   1.4 clips visible
      1249px  61.4% cropped   1.0 clip  visible

   650px is the widest slot that still keeps a usable frame, and it reads as
   one clip filling the view with the next just entering - which is what a
   continuous rail is meant to look like anyway.

   The track cycles by moving the leading tile to the end once it has passed,
   so four clips loop forever without duplicating a single video element. The
   naive approach - repeating the markup for a seamless CSS marquee - would
   have doubled 54MB of video to 108MB for a purely visual join.
   ========================================================================= */
.pp-refresh .hero-video-grid{
  display:flex;
  grid-template-columns:none;   /* no longer a grid */
  width:max-content;
  will-change:transform;
}
.pp-refresh .hero-video-tile{
  flex:0 0 auto;
  width:clamp(280px, 52vw, 650px);
  height:100%;
}
.pp-refresh .hero-video-tile + .hero-video-tile{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}

@media(min-width:1600px){
  .pp-refresh .hero-video-tile{width:clamp(280px, 40vw, 760px)}
}
@media(max-width:900px){
  .pp-refresh .hero-video-grid{grid-template-columns:none}
  .pp-refresh .hero-video-tile{width:clamp(240px, 78vw, 420px)}
}

/* Someone who asked for less motion gets a still rail, not a moving one. */
@media(prefers-reduced-motion:reduce){
  .pp-refresh .hero-video-grid{transform:none !important}
}

/* =========================================================================
   HERO HEIGHT                                           (25 Aug 2026)

   The clips fill the hero, so the hero's height IS the video height - and the
   hero is sized by its copy. The headline was set at up to 7.1rem, which ran
   to three lines of ~100px on its own and pushed the band past 850px.

   Bringing the display size down and tightening the rhythm shortens the band
   without dropping anything from the page. The tiles narrow to match: a
   shorter band with the same tile width would simply have traded vertical
   space for a heavier crop, which is the problem this started from.
   ========================================================================= */
.pp-refresh .home-hero .hero-copy h1{
  font-size:clamp(2.4rem,4.4vw,4.1rem);
  line-height:1.02;
  margin:10px 0 16px;
  max-width:14ch;
}
.pp-refresh .home-hero .hero-copy > p{
  font-size:.95rem;
  max-width:52ch;
  margin-bottom:0;
}
.pp-refresh .home-hero .hero-search-box{margin:18px 0 12px}
.pp-refresh .home-hero .hero-actions{margin-top:18px}
.pp-refresh .home-hero .hero-video-note{margin-top:14px}
.pp-refresh .home-hero .hero-note{margin-top:16px}
.pp-refresh .home-hero .hero-layout{padding:26px 0 24px}

/* Narrower slots so the shorter band does not deepen the crop. */
.pp-refresh .hero-video-tile{width:clamp(230px, 34vw, 430px)}
@media(min-width:1600px){
  .pp-refresh .hero-video-tile{width:clamp(230px, 28vw, 500px)}
}
@media(max-width:900px){
  .pp-refresh .hero-video-tile{width:clamp(200px, 62vw, 340px)}
}

/* Tiles widened to 560px on request. At the current 605px band that is a
   39.2% vertical crop, against 20.9% at 430px - the two pull against each
   other because the band was shortened in the same pass. Mobile keeps its
   narrower slot, where the fit is exact and there is nothing to gain. */
.pp-refresh .hero-video-tile{width:clamp(260px, 45vw, 560px)}
@media(min-width:1600px){
  .pp-refresh .hero-video-tile{width:clamp(260px, 36vw, 650px)}
}
@media(max-width:900px){
  .pp-refresh .hero-video-tile{width:clamp(200px, 62vw, 340px)}
}

/* Four picks now. Two-up rather than four-across: at four columns each card
   would be ~290px, which is narrower than the catalogue cards beside them and
   makes the product photographs too small to judge. */
.pp-refresh .curated-picks-grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:1400px){
  .pp-refresh .curated-picks-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .pp-refresh .curated-picks-grid{grid-template-columns:1fr}
}

/* The headline sits in front of the footage, always. The video layer is
   pinned to the back of the hero's own stacking context and the copy to the
   front, so no later rule and no scroll position can put a clip over the
   words. pointer-events stays off the layer so the copy's controls keep
   receiving clicks. */
.pp-refresh .home-hero .hero-video-layer{z-index:0}
.pp-refresh .home-hero .hero-layout,
.pp-refresh .home-hero .hero-copy{position:relative;z-index:2}
.pp-refresh .home-hero .hero-copy::before{z-index:-1}

/* =========================================================================
   HERO: HEADLINE ONLY                                   (25 Aug 2026)

   The overlay had accumulated a strapline, a search box, trending pills, a
   button row, a trust note and the motion controls - all fighting the footage
   and each other. It now carries two lines and nothing else. Everything that
   was over the video still exists, one band lower, where it has room.
   ========================================================================= */
.pp-refresh .home-hero .hero-layout{
  padding:0;
  min-height:clamp(360px, 38vw, 470px);
  align-items:center;
}
.pp-refresh .home-hero .hero-copy{
  max-width:min(720px, 88%);
  padding:48px 0;
}
.pp-refresh .home-hero .hero-copy h1{
  font-size:clamp(2.7rem, 5.4vw, 5rem);
  line-height:1.0;
  margin:14px 0 0;
  max-width:16ch;
}
.pp-refresh .home-hero .eyebrow{
  font-size:.72rem;
  letter-spacing:.16em;
}
/* Nothing else may sit over the footage. */
.pp-refresh .home-hero .hero-copy > :not(.eyebrow):not(h1){display:none}

/* The pause control and the AI disclosure belong with the clips they govern,
   so they sit quietly in the corner rather than beside the headline. */
.pp-refresh .hero-video-controls{
  position:absolute;
  right:clamp(14px, 3vw, 34px);
  bottom:14px;
  z-index:3;
}
.pp-refresh .hero-video-controls .hero-video-note{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pp-refresh .hero-video-controls .hero-video-disclosure{
  font-size:.64rem;
  max-width:30ch;
  text-align:right;
}
.pp-refresh .hero-video-controls .video-strip-toggle{
  min-height:34px;
  padding:6px 14px;
  font-size:.7rem;
}

/* ---- the band that now holds what the hero used to ---------------------- */
.pp-refresh .home-hero-utility{
  background:linear-gradient(180deg,#faf7fc 0%,#f5efe8 100%);
  border-bottom:1px solid rgba(75,36,111,.1);
  padding:26px 0 30px;
  position:relative;
  z-index:1;
}
.pp-refresh .hero-utility-inner{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto;
  gap:22px 40px;
  align-items:center;
}
.pp-refresh .hero-utility-inner .hero-search-box{margin:0;max-width:none}
.pp-refresh .hero-utility-inner .hero-actions{margin:0}
.pp-refresh .hero-utility-inner .hero-note{
  grid-column:1 / -1;
  margin:0;
  padding-top:16px;
  border-top:1px solid rgba(75,36,111,.1);
}
@media(max-width:900px){
  .pp-refresh .hero-utility-inner{grid-template-columns:1fr}
  .pp-refresh .hero-video-controls{
    position:static;
    padding:0 clamp(14px,4vw,28px) 14px;
  }
  .pp-refresh .hero-video-controls .hero-video-note{justify-content:flex-start}
  .pp-refresh .hero-video-controls .hero-video-disclosure{text-align:left}
}

/* =========================================================================
   HERO: NO PANEL BEHIND THE HEADLINE                    (25 Aug 2026)

   The soft glow behind the copy is gone - the footage runs clean behind the
   words. What holds them legible is the halo on the glyphs themselves, which
   is why that stays and gets a little stronger here to carry the load the
   glow was sharing.

   This is only safe because the overlay is now two lines of display type.
   Small body copy over raw video measured 2.37:1 earlier, nowhere near the
   4.5:1 it needs; large text answers to a 3:1 floor instead, and the strapline
   is bumped to a size and weight that clears it too.
   ========================================================================= */
.pp-refresh .home-hero .hero-copy::before{background:none}

.pp-refresh .home-hero .hero-copy h1,
.pp-refresh .home-hero .eyebrow{
  text-shadow:
    0 0 8px rgba(252,250,255,.98),
    0 0 18px rgba(252,250,255,.92),
    0 0 34px rgba(252,250,255,.7),
    0 1px 2px rgba(252,250,255,.95);
}
/* The strapline was 0.72rem, which is small text and answerable to 4.5:1 with
   nothing behind it. At this size and weight it counts as large text. */
.pp-refresh .home-hero .eyebrow{
  /* 1.2rem = 19.2px. WCAG counts bold type as "large" from 18.66px, and large
     text answers to a 3:1 floor rather than 4.5:1 - which is what lets this
     line sit on bare video with no panel behind it. At .95rem it measured
     15.2px, still small text, and failed at 3.97:1 against 4.5. */
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.1em;
}

/* The AI disclosure now lives in the band below, so the hero corner holds the
   pause control alone. */
.pp-refresh .hero-video-controls .hero-video-note{gap:0}
.pp-refresh .utility-ai-disclosure{
  grid-column:1 / -1;
  margin:0;
  font-size:.72rem;
  color:var(--pp-ink-2);
}
.pp-refresh .utility-ai-disclosure a{color:var(--pp-violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   UTILITY BAND: TOP ALIGNMENT + SEARCH SCOPE PICKER      (25 Aug 2026)

   The row was centring items of different heights against each other, so the
   search box, the button and the two text links each sat at a different
   level. Everything now hangs from the same top edge - the top of the search
   field - and the shorter items are padded down to meet it rather than
   floated to the middle.
   ========================================================================= */
.pp-refresh .hero-utility-inner{align-items:start}
.pp-refresh .hero-utility-inner .hero-search-box{margin:0}
.pp-refresh .hero-utility-inner .hero-actions{
  margin:0;
  align-items:start;    /* every item hangs from the same top edge */
  min-height:48px;
}
.pp-refresh .hero-utility-inner .hero-actions .btn-primary{margin:0}
/* The links are single-line text next to a 48px button, so aligning their box
   to the top would leave the words floating above everything else. Padding
   them down by the button's own top inset puts the TEXT on the same line the
   field and the button start on, which is what "aligned to the top" means to
   the eye. */
.pp-refresh .hero-utility-inner .hero-action-links{
  align-items:start;
  padding-top:14px;
}

/* ---- the scope picker, back inside the field ---------------------------- */
.pp-refresh .search-repo-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.pp-refresh .search-repo-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(75,36,111,.07);
  border:1px solid rgba(75,36,111,.16);
  border-radius:999px;
  padding:7px 12px 7px 14px;
  font:700 .8rem Inter,sans-serif;
  color:var(--pp-ink);
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.pp-refresh .search-repo-toggle:hover,
.pp-refresh .search-repo-toggle:focus-visible{
  background:rgba(75,36,111,.13);
  border-color:var(--pp-violet);
  color:var(--pp-violet);
}
.pp-refresh .search-repo-caret{width:10px;height:6px;flex:0 0 auto;stroke:var(--pp-violet);transition:transform .2s}
.pp-refresh .search-repo-wrap.is-open .search-repo-caret{transform:rotate(180deg)}

.pp-refresh .search-repo-menu{
  display:none;
  position:absolute;
  z-index:40;
  top:calc(100% + 9px);
  left:0;
  min-width:210px;
  margin:0;
  padding:12px;
  background:#fff;
  border:1px solid var(--pp-violet);
  border-radius:12px;
  box-shadow:0 18px 36px -14px rgba(33,22,49,.34);
}
.pp-refresh .search-repo-wrap.is-open .search-repo-menu{display:grid;gap:8px}
.pp-refresh .search-repo-menu legend{
  padding:0 0 5px;
  font:800 .68rem Inter,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pp-ink-2);
}
.pp-refresh .search-repo-menu label{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 2px;
  font:700 .84rem Inter,sans-serif;
  color:var(--pp-ink);
  cursor:pointer;
}
.pp-refresh .search-repo-menu input{width:16px;height:16px;margin:0;accent-color:var(--pp-violet)}
.pp-refresh .search-divider{
  display:inline-block;
  width:1px;
  height:22px;
  background:rgba(75,36,111,.18);
  margin:0 10px 0 6px;
  flex-shrink:0;
}

@media(max-width:620px){
  /* The field would otherwise leave no room for the query itself. */
  .pp-refresh .search-repo-toggle{padding:6px 9px 6px 11px;font-size:.72rem}
  .pp-refresh .search-divider{margin:0 6px 0 3px}
}

/* =========================================================================
   HERO: TIGHT HALO INSTEAD OF A GLOW, AND NO WASH OVER THE FOOTAGE
                                                          (25 Aug 2026)

   Two separate complaints, two separate causes, and one correction to my own
   earlier note in this file.

   1. The "glow" around the overlay text was a four-layer white text-shadow
      reaching 34px from the glyphs. That is a bloom, not an edge: at 34px it
      spreads well past the letterforms and reads as fog sitting on the video.

      The note above claims the headline holds 3.97:1 on bare footage and so
      could lose the halo entirely. Re-measured against the clips actually
      shipping, the worst case is 1.12:1 - ink type over the dark region of
      hero-01. The halo is doing real work and cannot simply be deleted.

      So it is re-shaped rather than removed: the contrast a glyph needs comes
      from the pixels immediately at its edge, not from a wide cloud. A dense
      3px halo plus four 1px offsets is effectively a white outline. Same
      protection where it counts, no bloom past the letterform.

   2. The footage read as cloudy partly because of the halo above and partly
      because the scrim still painted a flat 20% white wash across the top
      quarter of every clip - a leftover from when the nav sat on a dark hero.
      The nav has its own solid ground now, so the wash protects nothing.

   Softness that is NOT from CSS: the clips themselves measure 217-583 on a
   variance-of-Laplacian sharpness scale. They are 1080x1920 at 9-19MB, so
   bitrate is not the limit - the source footage is simply soft. hero-02 is
   the worst of the four. No stylesheet can sharpen that.
   ========================================================================= */
.pp-refresh .hero-video-scrim{background:none}

.pp-refresh .home-hero .hero-copy h1,
.pp-refresh .home-hero .eyebrow{
  text-shadow:
    0 0 3px rgba(255,255,255,.98),
    1px 0 2px rgba(255,255,255,.95),
    -1px 0 2px rgba(255,255,255,.95),
    0 1px 2px rgba(255,255,255,.95),
    0 -1px 2px rgba(255,255,255,.95);
}

/* Where the browser supports a real stroke, use it: paint-order puts the
   stroke behind the fill, so the letterform stays its true weight and the
   white sits only on the outside edge. This is what finally lets the halo be
   3px instead of 34px. Browsers without it keep the shadows above, which are
   already enough on their own. */
@supports (paint-order: stroke) and (-webkit-text-stroke: 1px #fff){
  .pp-refresh .home-hero .hero-copy h1,
  .pp-refresh .home-hero .eyebrow{
    paint-order:stroke fill;
    -webkit-text-stroke:3px rgba(255,255,255,.92);
  }
}

/* Footer social row (Facebook, Instagram, TikTok, Pinterest).
   Mirrors the rule in styles.css: root and product pages load premium.css,
   whose selectors are all scoped to .pp-refresh, so the same layout has to be
   declared twice. Four classes beat the .pp-refresh .footer .footer-social-link
   margin set earlier in this sheet. */
.pp-refresh .footer .footer-social{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;gap:12px 22px;margin-top:18px}
.pp-refresh .footer .footer-social .footer-social-link{margin:0}
@media (max-width:300px){
  .pp-refresh .footer .footer-social{grid-template-columns:max-content}
}

/* =========================================================================
   RAIL: EDGE TO EDGE, NOTHING CROPPED                 (28 Aug 2026)

   Three requirements that between them fix the geometry completely: the
   clips must not be cropped, their edges must touch, and five of them must
   span the viewport.

   No crop plus touching edges means each tile has to BE the clip's ratio,
   so tile width = band height x 1080/1920. Five of those spanning 100vw
   then forces the band height: 100vw / 5 / 0.5625 = 35.56vw, at which the
   tile is exactly 20vw. The band is therefore fluid rather than a fixed
   height - 455px at 1280, 512px at 1440, 604px at 1700. That is shorter
   than the 560px it used to be on every laptop width, and taller only on
   very wide screens, where five untrimmed portrait clips simply need the
   room. The 360px floor keeps it sane on phones.

   aspect-ratio derives the width from the height, so the two can never
   drift apart and reintroduce a crop. object-fit:cover is a no-op while
   the ratios match, and is preferable to contain because sub-pixel
   rounding under contain can leave a hairline of background at an edge.
   ========================================================================= */
.pp-refresh .home-hero .hero-layout{min-height:clamp(360px, 35.56vw, 470px)}
.pp-refresh .hero-video-tile{
  height:100%;
  width:auto;
  aspect-ratio:1080 / 1920;
  flex:0 0 auto;
}
.pp-refresh .hero-video-tile video,
.pp-refresh .hero-video-tile img{object-fit:cover;object-position:50% 50%}
/* The clips touch again, so the hairline that keeps five separate films from
   reading as one smear is worth having back. */
.pp-refresh .hero-video-tile + .hero-video-tile{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}

/* Nine tiles, not five.

   The rail drifts by up to one tile before the leading tile is cycled to the
   back, so covering the viewport needs railTotal >= viewport + one tile, not
   railTotal >= viewport. Five 264px tiles total 1322px, which left up to
   134px of bare background showing at the right edge of a 1700px screen.

   At a 470px band the tile is 264px, so nine of them span 2379px and stay
   covered to 2115px. The four extra tiles reuse the first four clips - same
   files, so no extra download, but nine simultaneous decodes rather than
   five. See the note further down for why the repeats are left visible. */

/* The four repeated clips are shown as-is.

   A repeat sits about 1300px from its twin, closer than a wide screen is
   wide, so both are on screen at once. Two ways to disguise that were tried
   and dropped: offsetting one in time is impossible, because these clips
   carry a single keyframe and setting currentTime to 1s, 2.5s, 5s, 7.5s or
   9s all land back at 0; and mirroring the repeat with scaleX(-1) looked
   wrong on the footage. A visible repeat is the accepted trade for a 470px
   band with the clips uncropped and their edges touching. Nine distinct
   clips would remove it entirely.

   The repeats keep aria-hidden: the footage is already described once. */

/* =========================================================================
   VISUAL-FIRST GUIDANCE: TILTED MOSAIC                  (31 Aug 2026)

   Rebuilt to the reference: a full-bleed wall of stills tilted a few degrees,
   with the heading and one button centred over it. The previous two-column
   layout - image stack on the left, a column of copy on the right - is gone,
   and so is the lead sentence.

   The tilt is why the grid is scaled up. Rotating a box exposes its corners,
   and the exposed area grows with the angle: at 4deg across a 16:9 band the
   grid has to be about 1.22x oversized before the corners clear the frame.
   1.32 leaves margin at the tall aspect ratios mobile produces. The wrapper
   clips the overflow.

   Every tile is an asset already published elsewhere on the site, so the
   mosaic adds nothing to the asset rights register.
   ========================================================================= */
.pp-refresh .guidance-section{padding:0;overflow:hidden}
.pp-refresh .guidance-band{
  position:relative;
  min-height:clamp(430px,46vw,620px);
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}
.pp-refresh .guidance-mosaic{position:absolute;inset:0;overflow:hidden}
.pp-refresh .guidance-mosaic-grid{
  position:absolute;
  top:-16%;
  left:-16%;
  width:132%;
  height:132%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:5px;
  transform:rotate(-5deg);
  transform-origin:center;
}
.pp-refresh .guidance-mosaic-grid img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border:1px solid rgba(205,179,236,.28);
  box-sizing:border-box;
}

/* White text over eighteen unpredictable photographs needs a floor under it,
   not a wash: this holds the heading above 7:1 on every tile. */
.pp-refresh .guidance-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 42% at 50% 47%, rgba(33,22,49,.82) 0%, rgba(33,22,49,.06) 100%),
    linear-gradient(180deg, rgba(33,22,49,.06), rgba(33,22,49,.20));
}
.pp-refresh .guidance-overlay{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:0;
  text-align:center;
  padding:clamp(40px,6vw,74px) 22px;
  max-width:min(760px,92%);
}
.pp-refresh .guidance-overlay h2{
  font-size:clamp(2.1rem,4vw,3.5rem);
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.12;
  margin:14px 0 0;
  max-width:16ch;
  text-shadow:0 2px 24px rgba(17,10,26,.5);
}
.pp-refresh .guidance-overlay .eyebrow{font-weight:600;letter-spacing:.13em;color:#ece0fa}
.pp-refresh .guidance-overlay .btn-primary{margin-top:30px}
.pp-refresh .guidance-overlay .ai-badge-pill{margin-top:18px}

@media(max-width:860px){
  .pp-refresh .guidance-mosaic-grid{
    grid-template-columns:repeat(4,1fr);
    top:-22%;left:-22%;width:144%;height:144%;
    transform:rotate(-5deg);
  }
}

/* Research profiles: evidence type and buying context. */
.research-profile-badge{display:inline-block;background:#eee5f6;color:#352047;border:1px solid #cdb8dd;border-radius:30px;padding:7px 12px;font-size:.8rem;font-weight:700;margin:10px 0}
.research-verdict{margin:22px 0;padding:22px;border:1px solid #d8c8e3;border-radius:16px;background:#faf7fc}
.research-verdict h2{font-size:1.1rem;margin:0 0 12px}
.research-verdict dl{display:grid;gap:12px;margin-top:16px}
.research-verdict dt{font-weight:700}.research-verdict dd{margin:4px 0 0}
.product-media-provenance,.research-profile-note{font-size:.8rem;line-height:1.6;color:#56475f;padding:10px 0}
.product-purchase-path dd{overflow-wrap:anywhere}
/* Keep the mobile search usable without horizontal document scrolling. */
@media(max-width:767px){
  .pp-refresh .hero-utility-inner,.pp-refresh .hero-utility-inner>*{min-width:0;max-width:100%}
  .pp-refresh .hero-search-box,.pp-refresh .hero-search-form{width:100%;min-width:0;box-sizing:border-box}
  .pp-refresh #heroSearchInput{min-width:0;width:0;flex:1 1 0}
  .pp-refresh .hero-search-submit{flex:0 0 auto;padding-left:12px;padding-right:12px}
  .pp-refresh .utility-ai-disclosure{white-space:normal;overflow-wrap:anywhere}
  .pp-refresh .hero-video-controls .hero-video-disclosure{background:rgba(255,255,255,.95);color:#352047;padding:7px;border-radius:8px;text-align:left}
}
@media(max-width:767px){.research-verdict{padding:16px}.product-purchase-path dl>div{display:block}.product-purchase-path dd{margin-top:4px}}

#commercial-register{max-width:1100px;margin:36px auto;padding:24px}#commercial-register table{width:100%;border-collapse:collapse}#commercial-register th,#commercial-register td{padding:12px;text-align:left;border-bottom:1px solid #ded2e6}

/* Still-image homepage: no automatic movement or video downloads. */
.hero-video-track,.video-strip-track{animation:none!important;transform:none!important}
.monthly-featured-collage[data-monthly-featured-visual]{min-height:240px}
.legal-table-wrap{overflow-x:auto;max-width:100%}
.legal-table-wrap table{width:100%;border-collapse:collapse}
.legal-table-wrap th,.legal-table-wrap td{padding:1rem;text-align:left;vertical-align:top;border-bottom:1px solid #ddd}
@media print{.nav,.footer,.pp-privacy-banner{display:none!important}.section{padding:1rem!important}a{color:inherit}}

/* Research placeholders must not inherit the former portrait-video stage. */
.pp-refresh .product-pdp-gallery-static .product-pdp-stage{aspect-ratio:1!important;width:100%!important;max-height:360px}
.pp-refresh .product-pdp-gallery-static .product-pdp-stage img{height:100%;width:100%;object-fit:contain}
.hero-video-disclosure{background:rgba(255,255,255,.94);color:#382448;padding:.5rem .75rem;border-radius:6px;font-size:.8rem}
@media(max-width:860px){.pp-refresh .product-pdp-copy{order:-1}.pp-refresh .product-pdp-gallery-static .product-pdp-stage{max-height:240px}}

/* ---- hero motion strip: touch target on the pause control ---------------
   `.hero-video-controls .video-strip-toggle` above deliberately shrinks the
   button to 34px so it sits quietly over the hero, which is right for a mouse.
   On a touch screen 34px is under the 48px minimum this site holds itself to,
   and most of our traffic arrives on a phone - so the compact size is kept for
   pointer devices and the full target restored where a finger is the input.
   Scoped to (pointer: coarse) so the desktop hero is visually unchanged. */
@media (hover: none) and (pointer: coarse) {
  .pp-refresh .hero-video-controls .video-strip-toggle {
    min-height: 48px;
    padding: 12px 20px;
  }
}

/* ---- hero motion strip: seven tiles must always cover the screen ---------
   The rail recycles by moving the leading tile to the back, so it only stays
   gapless while the whole rail is at least one viewport plus one tile wide.
   The tile width above resolves to a fixed 264px, so seven clips covered a
   1440px screen but fell 334px short at 1920px - which is why two duplicate
   tiles had been added to pad the rail out.

   Those duplicates were the bug the visitor actually saw: six tiles fit across
   a 1440px viewport, and in a nine-slot cycle a repeat can sit at most four
   places from its original, so the matcha and roller clips appeared twice on
   screen at once, before the remaining clips had been seen.

   Sizing the tile from the viewport fixes it at the cause. 100vw/6 is the
   width at which seven tiles exactly equal one screen plus one tile; 17.5vw
   leaves a small margin above that. The 264px floor keeps narrower screens
   exactly as they were.

   If this width changes, recheck the tile count in index.html: seven unique
   clips is the whole rail, and there is nothing left to pad with. */
@media (min-width: 901px) {
  .pp-refresh .hero-video-tile {
    width: max(264px, 17.5vw);
  }
}

/* ===== Eyewear product layout =====
   build-static-products.mjs renders this for records with an `eyewear` block
   (pp_product_eyewear): an image card with a UV tag on the hero, the buttons
   under it, and an accordion on the right. Operator design, 2026-09-11. */
.pp-refresh .product-pdp-layout.pdp-eyewear{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,44px)}
.pp-refresh .pdp-eye-left{display:flex;flex-direction:column;min-width:0}
.pp-refresh .pdp-eye-left>.pdp-eye-card{order:1}
.pp-refresh .pdp-eye-left>.product-gallery-actions{order:2;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp-refresh .pdp-eye-left>.product-purchase-path{order:3;margin-top:14px}
.pp-refresh .pdp-eye-left>.retail-availability{order:4;margin-top:12px}
.pp-refresh .pdp-eye-left .product-gallery-actions>.btn{width:100%;min-width:0;min-height:52px;margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center}
/* One shared card shadow: the image card and every accordion card. */
.pp-refresh .pdp-eye-card,.pp-refresh .pdp-eye-accordion>.product-panel{background:#fff;border:1.5px solid #e6dcef;border-radius:16px;box-shadow:0 1px 2px rgba(33,22,49,.06),0 10px 28px -10px rgba(33,22,49,.22)}
.pp-refresh .pdp-eye-card{padding:24px}
.pp-refresh .pdp-eye-head{margin:0 0 14px}
.pp-refresh .pdp-eye-head .modal-brand{display:inline-block}
.pp-refresh .pdp-eye-head h1{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;margin:8px 0 0}
.pp-refresh .pdp-eye-card .product-pdp-stage,.pp-refresh .pdp-eye-card .product-pdp-stage.is-portrait,.pp-refresh .pdp-eye-card .product-pdp-stage.is-tall{width:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:4 / 3!important;border:0;border-radius:10px;justify-self:stretch}
.pp-refresh .pdp-eye-card>.product-pdp-thumbs,.pp-refresh .pdp-eye-card .product-pdp-rail-wrap{margin-top:12px}
.pp-refresh .pdp-eye-card .product-pdp-rail-wrap{position:relative}
.pp-refresh .pdp-eye-card .product-pdp-thumbs{flex-direction:row!important;max-height:none!important;overflow-x:auto;overflow-y:hidden;gap:8px;padding:2px}
.pp-refresh .pdp-eye-card .product-pdp-thumb{width:76px;aspect-ratio:4 / 3;border-color:#e6dcef}
.pp-refresh .pdp-eye-card .product-pdp-thumb img{object-fit:contain}
/* The UV hang tag near the hero - drawn by the page, not part of the photo. */
.pp-refresh .pdp-uv-tag{position:absolute;right:16px;bottom:16px;z-index:3;width:118px;border-radius:8px;overflow:hidden;background:#f6efe2;border:1px solid #e3d6bd;box-shadow:0 10px 24px -8px rgba(33,22,49,.45);transform:rotate(-4deg);font-family:Inter,sans-serif;pointer-events:none}
.pp-refresh .pdp-uv-tag::before{content:"";position:absolute;top:7px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid #c9a24a}
.pp-refresh .pdp-uv-tag-top{background:#1d2a4a;color:#fff;text-align:center;padding:22px 8px 6px;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pp-refresh .pdp-uv-tag-body{padding:8px 8px 9px;text-align:center;color:#1d2a4a;font-size:.78rem;font-weight:700;line-height:1.25}
/* Accordion */
.pp-refresh .pdp-eye-accordion{display:grid;gap:14px}
.pp-refresh .pdp-eye-accordion>.product-panel{margin:0;overflow:hidden}
.pp-refresh .pdp-eye-research-note{margin:16px 0 22px;font-size:.8rem;color:var(--pp-ink-2)}
.pp-refresh .pdp-eye-note{font-size:.76rem;color:#7a6d8c;margin:10px 0 0}
/* UV card, inside the accordion */
.pp-refresh .pdp-uv-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:#1d2a4a;color:#fff;border-radius:12px;padding:14px 16px}
.pp-refresh .pdp-uv-card svg{width:38px;height:38px;stroke:#ffd76a;fill:none;stroke-width:1.8;stroke-linecap:round}
.pp-refresh .pdp-uv-card strong{display:block;font:800 1rem/1.2 Inter,sans-serif;color:#fff}
.pp-refresh .pdp-uv-pol{display:inline-block;font:700 .62rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:#ffd76a;color:#1d2a4a;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.pp-refresh .pdp-uv-scale{display:flex;gap:6px;margin:8px 0 6px}
.pp-refresh .pdp-uv-scale span{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;font:700 .75rem Inter,sans-serif;color:#fff}
.pp-refresh .pdp-uv-scale span.on{background:#ffd76a;border-color:#ffd76a;color:#1d2a4a}
.pp-refresh .pdp-uv-card p{margin:0;font-size:.8rem;line-height:1.45;color:#dfe5f3}
/* Activity and feature icons */
.pp-refresh .pdp-eye-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.pp-refresh .pdp-eye-icons li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:#faf7fd;border:1px solid #efe8f5;border-radius:12px;padding:14px 8px;font:700 .8rem/1.25 Inter,sans-serif;color:var(--pp-ink)}
.pp-refresh .pdp-eye-icons svg{width:34px;height:34px;fill:none;stroke:#6b3fa0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Face shapes */
.pp-refresh .pdp-eye-faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pp-refresh .pdp-eye-face{text-align:center;font:600 .74rem Inter,sans-serif;color:#b3a8c2}
.pp-refresh .pdp-eye-face svg{width:100%;max-width:46px;height:auto;display:block;margin:0 auto 4px;fill:#f3eff7;stroke:#cfc5dc;stroke-width:1.6}
.pp-refresh .pdp-eye-face.is-on{color:var(--pp-ink)}
.pp-refresh .pdp-eye-face.is-on svg{fill:#e7d6fb;stroke:#6b3fa0}
.pp-refresh .pdp-eye-face .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Frame measurements */
.pp-refresh .pdp-eye-measures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pp-refresh .pdp-eye-measure{text-align:center;background:#faf7fd;border:1px solid #efe8f5;border-radius:10px;padding:10px 4px 8px}
.pp-refresh .pdp-eye-measure svg{width:100%;max-width:64px;height:auto;display:block;margin:0 auto 6px;fill:none;stroke:#8f84a0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pp-refresh .pdp-eye-measure svg .hl{stroke:#6b3fa0;stroke-width:2}
.pp-refresh .pdp-eye-measure b{display:block;font:800 .95rem Inter,sans-serif;color:var(--pp-ink)}
.pp-refresh .pdp-eye-measure span{font:600 .68rem Inter,sans-serif;color:#6d6280}
.pp-refresh .pdp-eye-measure.is-na b{color:#b3a8c2;font-size:.78rem}
.pp-refresh .pdp-eye-colours{margin:0;padding-left:18px}
.pp-refresh .pdp-eye-colours li{margin:0 0 6px;color:var(--pp-ink-2)}
@media(max-width:860px){.pp-refresh .product-pdp-layout.pdp-eyewear{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.pp-refresh .pdp-eye-faces,.pp-refresh .pdp-eye-measures{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-refresh .pdp-eye-left>.product-gallery-actions{grid-template-columns:1fr}.pp-refresh .pdp-uv-tag{width:96px;right:10px;bottom:10px}.pp-refresh .pdp-eye-card{padding:16px}}
/* Eyewear UV card - the light style from the first preview (operator, 2026-09-11),
   with the safety warnings moved in from "Limitations and cautions". */
.pp-refresh .pdp-uv-card{background:#fff;color:var(--pp-ink);border:1.5px solid #ece4f4}
.pp-refresh .pdp-uv-card svg{stroke:#211631}
.pp-refresh .pdp-uv-card strong{color:#211631}
.pp-refresh .pdp-uv-pol{background:#ede2fb;color:#4b246f}
.pp-refresh .pdp-uv-scale span{border-color:#211631;color:#211631}
.pp-refresh .pdp-uv-scale span.on{background:#211631;border-color:#211631;color:#fff}
.pp-refresh .pdp-uv-card p{color:#5b4f6b}
.pp-refresh .pdp-uv-cautions-title{margin:16px 0 8px;font:800 .8rem/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b3fa0}
.pp-refresh .pdp-uv-cautions{margin:0;padding-left:18px}
.pp-refresh .pdp-uv-cautions li{margin:0 0 6px;font-size:.86rem;line-height:1.45;color:var(--pp-ink-2)}
/* Face shapes with ears and hairline */
.pp-refresh .pdp-eye-face svg .ear{fill:#f3eff7;stroke:#cfc5dc}
.pp-refresh .pdp-eye-face svg .hair{fill:#cfc5dc;stroke:none}
.pp-refresh .pdp-eye-face.is-on svg .ear{fill:#e7d6fb;stroke:#6b3fa0}
.pp-refresh .pdp-eye-face.is-on svg .hair{fill:#6b3fa0}
/* Eyewear left column (operator, 2026-09-11): the image card, the two buttons and
   the disclosure card share one width and one set of edges; the disclosure sits
   under the buttons; the thumbnails keep clear of the photo; the photo arrows
   show on hover or keyboard focus only (always on touch screens, which cannot hover). */
.pp-refresh .pdp-eye-left>.pdp-eye-card,.pp-refresh .pdp-eye-left>.product-gallery-actions,.pp-refresh .pdp-eye-left>.product-purchase-path,.pp-refresh .pdp-eye-left>.retail-availability{width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0;align-self:stretch}
.pp-refresh .pdp-eye-left>.product-gallery-actions{padding:0}
.pp-refresh .pdp-eye-left>.product-purchase-path{padding:0}
.pp-refresh .pdp-eye-left>.product-purchase-path .product-gallery-disclosure{width:100%;max-width:none;box-sizing:border-box;margin:0!important}
.pp-refresh .pdp-eye-card>.product-pdp-thumbs,.pp-refresh .pdp-eye-card .product-pdp-rail-wrap{margin-top:16px}
.pp-refresh .pdp-eye-card .product-pdp-thumbs{padding:3px 2px}
.pp-refresh .pdp-eye-card .pdp-stage-arrow,.pp-refresh .pdp-eye-card .pdp-rail-arrow{opacity:0;transition:opacity .18s ease}
.pp-refresh .pdp-eye-card:hover .pdp-stage-arrow,.pp-refresh .pdp-eye-card:focus-within .pdp-stage-arrow,.pp-refresh .pdp-eye-card:hover .pdp-rail-arrow,.pp-refresh .pdp-eye-card:focus-within .pdp-rail-arrow{opacity:1}
@media (hover:none){.pp-refresh .pdp-eye-card .pdp-stage-arrow,.pp-refresh .pdp-eye-card .pdp-rail-arrow{opacity:1}}
/* Eyewear accordion cards: inner padding so headings and text clear the card
   border (the shared .product-panel style only has 2px side padding). */
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary{padding:18px 22px}
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-body{padding:0 22px 22px}
@media(max-width:520px){.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary{padding:16px 16px}.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-body{padding:0 16px 18px}}
/* Eyewear accordion headings in a shade of purple (operator, 2026-09-11). */
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary{background:#f4edfb;transition:background .15s ease}
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary:hover,.pp-refresh .pdp-eye-accordion>.product-panel[open]>.product-panel-summary{background:#ebdff8}
.pp-refresh .pdp-eye-accordion>.product-panel[open]>.product-panel-summary{margin-bottom:18px}
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary h2{color:#4b246f}
.pp-refresh .pdp-eye-accordion>.product-panel>.product-panel-summary .product-panel-chevron{color:#6b3fa0;border-color:#6b3fa0}

/* Catalogue paging. Twelve products a page; the strip sits under the grid and
   is hidden outright when everything fits on one page. */
.pp-refresh .catalogue-pager{margin:26px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.pp-refresh .catalogue-pager-status{margin:0;color:var(--pp-ink-2);font-size:.82rem;font-weight:700}
.pp-refresh .catalogue-pager-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.pp-refresh .catalogue-pager-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.pp-refresh .catalogue-pager-gap{color:var(--pp-ink-2);padding:0 4px}
.pp-refresh .catalogue-pager-page,.pp-refresh .catalogue-pager-step{min-height:40px;min-width:40px;border:1px solid var(--pp-line);background:#fff;color:var(--pp-ink);font-weight:700;font-size:.84rem;padding:0 12px;cursor:pointer}
.pp-refresh .catalogue-pager-page:hover:not(.is-current),.pp-refresh .catalogue-pager-step:hover:not(:disabled){border-color:var(--pp-violet);color:var(--pp-violet)}
.pp-refresh .catalogue-pager-page.is-current{background:var(--pp-violet);border-color:var(--pp-violet);color:#fff;cursor:default}
.pp-refresh .catalogue-pager-step:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:760px){.pp-refresh .catalogue-pager-step{padding:0 10px}.pp-refresh .catalogue-pager-page,.pp-refresh .catalogue-pager-step{min-width:38px;font-size:.8rem}}


/* The no-JS catalogue note. Only ever seen without JavaScript - catalog.js
   replaces the static block on its first render - so it sits inside the
   static grid and needs to span it. */
.pp-refresh .catalogue-static-note{grid-column:1/-1;margin:18px 0 0;padding:14px 16px;border:1px dashed var(--pp-line);background:var(--pp-paper);color:var(--pp-ink-2);font-size:.86rem}
.pp-refresh .catalogue-static-note a{color:var(--pp-violet);font-weight:700}

/* September 2026 pre-launch layout: retain the established brand tokens.
   Content-sized sections replace oversized default spacing. */
body.pp-refresh{margin:0;line-height:1.55}
.pp-refresh main section[id]{scroll-margin-top:96px}
.pp-refresh .section{padding:56px 0}
.pp-refresh .section-head{gap:28px;margin-bottom:28px}
.pp-refresh .section-head h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;margin:0 0 16px}
.pp-refresh .section-head p{margin:0;line-height:1.6}
.pp-refresh a:focus-visible,.pp-refresh button:focus-visible,.pp-refresh input:focus-visible,.pp-refresh select:focus-visible{outline:3px solid var(--pp-violet);outline-offset:4px}
.pp-refresh .reveal{opacity:1;transform:none}
.pp-refresh .catalogue-directory .section-head{align-items:center;margin-bottom:0}
.pp-refresh .catalogue-directory-media{min-height:300px;height:300px}
.pp-refresh .catalogue-products-section{padding-top:32px}
.pp-refresh .catalogue-directory h1{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;margin:0 0 16px}
.pp-refresh .catalogue-jump{margin-top:20px}
.pp-refresh .home-hero .hero-copy h1{font-size:clamp(2.5rem,5.1vw,4.5rem);line-height:1.08;max-width:12ch;color:var(--pp-paper);text-shadow:none;-webkit-text-stroke:0;paint-order:normal}
.pp-refresh .home-hero .hero-copy h1 em{color:var(--pp-lilac);text-shadow:none;-webkit-text-stroke:0}
.pp-refresh .home-hero .eyebrow{color:var(--pp-paper);text-shadow:none;-webkit-text-stroke:0;font-size:.72rem;letter-spacing:.13em}
.pp-refresh .home-hero .hero-video-scrim{background:linear-gradient(90deg,rgba(33,22,49,.86),rgba(33,22,49,.56) 39%,rgba(33,22,49,.06) 75%);opacity:1}
.pp-refresh .home-hero .hero-layout{min-height:400px}
.pp-refresh .home-hero .hero-copy{padding:36px 0}
.pp-refresh .home-hero-utility{padding:20px 0}
.pp-refresh .hero-utility-inner{gap:16px 24px}
.pp-refresh .hero-utility-inner .hero-note{padding-top:12px}
.pp-refresh.home .ticker{display:none}
.pp-refresh .home-focus{background:var(--pp-cream)}
.pp-refresh .focus-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.pp-refresh .focus-copy h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;margin:12px 0 16px;max-width:20ch}
.pp-refresh .focus-copy>p{color:var(--pp-ink-2);max-width:55ch}
.pp-refresh .focus-links{display:grid;gap:0;margin:22px 0}
.pp-refresh .focus-links a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--pp-line);font-weight:700;color:var(--pp-plum)}
.pp-refresh .focus-links a:hover{color:var(--pp-violet)}
.pp-refresh .focus-visual{margin:0;min-width:0}
.pp-refresh .focus-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.pp-refresh .focus-visual figcaption{font-size:.72rem;color:var(--pp-ink-2);margin-top:9px}
.pp-refresh .focus-visual figcaption a,.pp-refresh .focus-checklist{color:var(--pp-plum);text-decoration:underline;text-underline-offset:3px}
.pp-refresh.home .section-head{grid-template-columns:1fr;gap:10px}
.pp-refresh.home .section-head h2{max-width:24ch}
.pp-refresh.home .section-head p{max-width:72ch}
.pp-refresh.home .catalogue-department{padding:16px;min-height:0}
.pp-refresh.home .department-image-frame{height:auto;aspect-ratio:4/3;margin-bottom:12px}
.pp-refresh.home .department-desc{margin:0 0 16px}
.pp-refresh.home .department-btn{padding:10px;font-size:.78rem}
.pp-refresh.home .curated-picks-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}
.pp-refresh.home .curated-pick-card{padding:16px;min-width:0}
.pp-refresh.home .curated-pick-header:empty{display:none}
.pp-refresh.home .curated-pick-header{min-height:0;margin-bottom:0}
.pp-refresh.home .curated-pick-frame{height:210px;padding:10px}
.pp-refresh.home .curated-pick-body h3{font-size:1.22rem;line-height:1.2}
.pp-refresh.home .curated-pick-verdict{font-size:.8rem;margin:12px 0 18px}
.pp-refresh.home .curated-pick-benefit{font-size:.86rem}
.pp-refresh.home .curated-pick-actions{grid-template-columns:1fr;gap:9px}
.pp-refresh.home .curated-pick-link{font-size:.78rem;text-align:center}
.pp-refresh.home .guidance-section{padding:0}
.pp-refresh.home .guidance-band{min-height:360px}
.pp-refresh.home .guidance-overlay{padding:40px 20px}
.pp-refresh.home .journal-section-head{grid-template-columns:1fr}
.pp-refresh.home .journal-section-visual{display:none}
.pp-refresh.home .journal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-refresh.home .journal-card,.pp-refresh.home .journal-card:first-child{min-height:340px;padding:22px}
.pp-refresh.home .journal-card h3{font-size:1.5rem}
.pp-refresh .footer{padding-top:44px}
.pp-refresh .footer-bottom{margin-top:30px}
@media(max-width:1099px){
 .pp-refresh.home .curated-picks-grid,.pp-refresh.home .catalogue-department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-refresh .focus-layout{gap:28px}
}
@media(max-width:700px){
 .pp-refresh .section{padding:36px 0}
 .pp-refresh.product-detail-page .product-pdp-copy h1{font-size:2.2rem;line-height:1.1;margin-block:18px}
 .pp-refresh .section-head{grid-template-columns:1fr;gap:14px}
 .pp-refresh .home-hero .hero-layout{min-height:320px}
 .pp-refresh .home-hero .hero-copy{padding:26px 0 110px;width:100%;max-width:none;text-align:left}
 .pp-refresh .home-hero .hero-copy h1{font-size:2.45rem;max-width:none}
 .pp-refresh .home-hero .hero-video-scrim{background:rgba(33,22,49,.64)}
 .pp-refresh .focus-layout{grid-template-columns:1fr;gap:22px}
 .pp-refresh .focus-copy h2{max-width:none}
 .pp-refresh .focus-visual{order:-1}
 .pp-refresh .focus-visual img{max-height:260px}
 .pp-refresh.home .journal-grid{grid-template-columns:1fr}
 .pp-refresh.home .journal-card,.pp-refresh.home .journal-card:first-child{min-height:280px}
 .pp-refresh .catalogue-directory-media{min-height:240px;height:240px}
 .pp-refresh .catalogue-directory .section-head{gap:18px}
}
@media(max-width:480px){
 .pp-refresh.home .curated-picks-grid,.pp-refresh.home .catalogue-department-grid{grid-template-columns:1fr}
 .pp-refresh.home .department-image-frame{max-height:220px}
 .pp-refresh.home .curated-pick-frame{height:230px}
}
@media(prefers-reduced-motion:reduce){
 .pp-refresh .ticker-track{animation:none}
 .pp-refresh .reveal,.pp-refresh .catalogue-department,.pp-refresh .curated-pick-card{transition:none}
}