/* Vion Labs palette — from the brand kit
   #0B1D2D Deep Navy     --ink      type, footer, primary buttons
   #1E88E5 Science Blue  --blue     accent fills, marks, display accents
   #E6F2FF Light Blue    --lite     text on dark, chip fills
   #F2F4F6 Cool Gray     --porc     section bands, card fills
   #FFFFFF White         --paper

   Derived, because the kit has no value for them:
   #06131F --void     darker navy for the hero ground, so it reads apart from ink
   #1662A5 --blue-d   blue at TEXT size on light. Science Blue is 3.68:1 on white,
                      which is fine for display type and fails for links
   #7CBAF0 --blue-lt  blue on dark grounds
   #DCE3EA --line     hairlines on light
   #173247 --line-dk  hairlines on dark
   #55697C --slate    secondary type on light
   #8FA6BC --dim      secondary type on dark
*/


/* ── Pastel ground ──
   The page sits on a very light blue rather than pure white, with bands a
   step deeper and cards staying white so they lift off it. Measured: ink
   16.21 on the page ground and 14.91 on the bands, slate 5.38 / 4.95,
   link blue 5.99 / 5.51 — all still above AA. */
:root{
  --void:#06131F; --ink:#0B1D2D; --porc:#E9F0FA; --page:#F6F9FE; --paper:#FFFFFF;
  --blue:#1E88E5; --blue-d:#1662A5; --blue-lt:#7CBAF0;
  --line:#D6E0EE; --line-dk:#173247;
  --slate:#55697C; --dim:#8FA6BC; --lite:#E6F2FF;
  --disp:'Sora','Inter Tight',system-ui,-apple-system,sans-serif;
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r:14px; --r-lg:26px; --r-md:14px; --r-sm:10px; --r-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--page);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis-weight:none;font-synthesis:none}
/* overflow-x:hidden on body makes the body a SCROLL CONTAINER, which disables
   position:sticky for its descendants. Safari enforces that strictly — it is
   why the homepage's bento stack ran flat on iPhone while working in every
   desktop test. overflow-x:clip clips the same overflow WITHOUT creating a
   scroll container, so sticky survives. hidden stays as the fallback for
   browsers without clip (Safari <16, Chrome <90). */
@supports (overflow:clip){ body{overflow-x:clip} }

img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1300px;margin:0 auto;padding:0 56px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.d{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1.02}
/* Instrument Serif ships a single weight. Headings default to bold in the UA
   stylesheet, so the browser was synthesising it — drawing the outline twice,
   offset. That reads as a doubled or ghosted glyph. Reset to 400 and switch
   synthesis off so it can never come back. */
h1,h2,h3,h4,h5,h6,th,summary{font-weight:400}
.lbl{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.lbl.on-dk{color:var(--dim)}

/* graduation tick device */
.ticks{height:9px;width:100%;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 14px);
  background-size:100% 5px;background-repeat:no-repeat;background-position:0 100%;
  border-top:1px solid var(--line)}
.ticks.on-dk{background-image:repeating-linear-gradient(90deg,var(--line-dk) 0 1px,transparent 1px 14px);border-top-color:var(--line-dk)}

/* plate — the recurring frame an object sits in */
.plate{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative;display:flex;flex-direction:column}
.plate .stage.img{padding:0;background:none;aspect-ratio:1/1}
.plate .stage.img img{width:100%;height:100%;object-fit:cover}
.plate .stage{flex:1;display:flex;align-items:center;justify-content:center;padding:36px;min-height:0;background:
  linear-gradient(180deg,#FAFBFC 0%,#F2F4F6 100%)}
.plate .cap{border-top:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.plate.on-dk{background:#0A1B29;border-color:var(--line-dk)}
.plate.on-dk .stage{background:linear-gradient(180deg,#0E2334 0%,#071825 100%)}
.plate.on-dk .cap{border-top-color:var(--line-dk);color:var(--dim)}
.ph-t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#93A5B4;
  border:1px dashed var(--line);padding:9px 14px;border-radius:var(--r-sm);text-align:center;line-height:1.6}
.plate.on-dk .ph-t{color:var(--dim);border-color:var(--line-dk)}

/* ── GATE ── */
.gate{position:fixed;inset:0;z-index:400;background:rgba(6,19,31,.86);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px}
.gate.hide{display:none}
.gbox{background:var(--paper);max-width:460px;width:100%;padding:44px 40px 38px;border-radius:var(--r-lg)}
.gbox h2{font-family:var(--disp);font-size:34px;line-height:1.05;margin:14px 0 6px}
.gbox .sub{font-size:14.5px;color:var(--slate);margin-bottom:24px}
.gk{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);font-size:15px;cursor:pointer}
.gk:last-of-type{border-bottom:1px solid var(--line);margin-bottom:22px}
.gk input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue);flex-shrink:0}
.gbox .btn{width:100%}
.gbox .btn:disabled{background:var(--line);color:#93A5B4;cursor:not-allowed}
.gfine{font-family:var(--mono);font-size:10.5px;line-height:1.75;color:var(--slate);margin-top:20px}

/* ── ANNOUNCE ── */
.ann{background:var(--void);color:var(--dim);text-align:center;padding:11px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.ann b{color:#fff;font-weight:500}
@media(max-width:700px){.ann{font-size:9.5px;letter-spacing:.14em;padding:9px 14px}.ann .ah{display:none}}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:210;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-i{max-width:1300px;margin:0 auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.nl{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.mk{width:26px;height:26px}
.wm{font-family:var(--disp);font-size:23px;letter-spacing:.02em;line-height:1}
.nc{display:flex;gap:34px}
.nc a{font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 0;position:relative;opacity:.72}
.nc a:hover{opacity:1}
.nc a.on{opacity:1}
.nc a.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink)}
.nr{display:flex;align-items:center;gap:20px}
.ic{display:flex;color:var(--ink);position:relative;opacity:.8}
.ic:hover{opacity:1;color:var(--blue-d)}
.cn{position:absolute;top:-6px;right:-8px;background:var(--blue-d);color:#fff;font-family:var(--mono);font-size:9px;min-width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px}
.ham{display:none;width:38px;height:38px;border:none;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ham span{display:block;width:20px;height:1.5px;background:var(--ink)}
.dr{position:fixed;top:0;right:-320px;width:290px;max-width:84vw;height:100dvh;background:var(--paper);z-index:220;padding:20px 26px 32px;display:flex;flex-direction:column;transition:right .34s cubic-bezier(.16,1,.3,1);box-shadow:-16px 0 50px rgba(6,19,31,.18);overflow-y:auto}
.dr.open{right:0}
.dr a{font-size:16px;font-weight:500;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line)}
.dr .btn{margin-top:16px;width:100%}
.dcl{align-self:flex-end;width:36px;height:36px;border:none;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);margin-bottom:4px}
.ovl{position:fixed;inset:0;background:rgba(6,19,31,.5);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
.ovl.open{opacity:1;pointer-events:auto}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:14.5px;background:var(--ink);color:#fff;padding:16px 32px;border-radius:var(--r-md);text-decoration:none;border:none;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--blue-d)}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.o:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.dk{background:#fff;color:var(--ink)}
.btn.dk:hover{background:var(--blue-lt);color:var(--void)}
.btn.odk{background:transparent;color:#fff;border:1px solid var(--line-dk)}
.btn.odk:hover{border-color:var(--dim)}
.lnk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--blue-d);border-bottom:1px solid currentColor;padding-bottom:3px}
.lnk.on-dk{color:var(--blue-lt)}

/* ── SECTION ── */
.sec{padding:128px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
.sec-h h2{font-family:var(--disp);font-size:clamp(34px,4.2vw,52px);line-height:1.04;letter-spacing:-.015em}
.sec-h .lbl{display:block;margin-bottom:14px}
.sec-h p{color:var(--slate);font-size:15.5px;max-width:360px}

/* ── HERO ──
   Full-bleed background image, product artwork sitting right of centre.
   A scrim gradient runs left-to-right so the copy stays readable over it —
   light on desktop, heavier as the crop pushes the artwork under the text. */
.hero{position:relative;overflow:hidden;background-color:#06131F;
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  min-height:clamp(540px,42vw,700px);display:flex;align-items:center}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,19,31,.94) 0%,rgba(6,19,31,.88) 26%,rgba(6,19,31,.58) 42%,rgba(6,19,31,.14) 54%,rgba(6,19,31,0) 64%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-i{padding:76px 0}
.hero-c{position:relative;z-index:3;max-width:min(560px,42vw)}
.hero h1{font-family:var(--disp);font-size:clamp(52px,6.4vw,88px);line-height:.98;letter-spacing:-.02em;margin:16px 0 0;color:#fff}
.hero h1 i{font-style:italic;color:var(--blue-lt)}
.hero .rule{width:100%;height:1px;background:var(--line-dk);margin:32px 0 24px}
.hero-s{font-size:17px;line-height:1.62;color:var(--dim);max-width:440px;margin-bottom:32px}
.hero-btns{display:flex;gap:11px;flex-wrap:wrap}
/* placeholder marker — removed once the real background lands */
.hero-ph{position:absolute;z-index:2;right:6%;top:50%;transform:translateY(-50%);
  border:1px dashed var(--line-dk);border-radius:var(--r-md);padding:16px 20px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.9}

/* ── FEATURED (dark) ── */
.feat{background:var(--porc);color:var(--ink);position:relative;border-bottom:1px solid var(--line)}
.feat-i{display:grid;grid-template-columns:.86fr 1.14fr;gap:72px;align-items:center;padding:112px 0 48px}
.feat h2{font-family:var(--disp);font-size:clamp(38px,4.6vw,58px);line-height:1.02;letter-spacing:-.015em;margin:16px 0 18px}
.feat p{color:var(--slate);font-size:16.5px;line-height:1.65;max-width:470px;margin-bottom:28px}
.feat-v{height:auto}
.feat-v .plate{height:100%}
.spec-wrap{padding-bottom:112px}
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#0A1B29;border:1px solid var(--line-dk);border-radius:var(--r-lg);overflow:hidden}
.ss{padding:28px 30px 30px;border-right:1px solid var(--line-dk)}
.ss:last-child{border-right:none}
.ss .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:9px}
.ss .v{font-family:var(--mono);font-size:14.5px;color:#fff;line-height:1.45}
.ss .v a{color:var(--blue-lt);text-decoration:none;border-bottom:1px solid currentColor}
.tbc{font-family:var(--mono);color:var(--slate);background:var(--porc);padding:2px 9px;border-radius:var(--r-sm);font-size:.88em;letter-spacing:0}
.on-dk .tbc,.feat .tbc,.ss .tbc{color:var(--dim);background:#12293C}

/* ── CATALOGUE ── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .22s,transform .22s}
.pc:hover{border-color:#C6D2DC;box-shadow:0 12px 32px rgba(11,29,45,.07);transform:translateY(-2px)}
.pc-t{aspect-ratio:1/1;position:relative;background:linear-gradient(180deg,#FBFDFF,#E9F0FA);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-t img{width:100%;height:100%;object-fit:cover}
.pc-ix{position:absolute;z-index:2;top:16px;left:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#9DAFBE}
.pc-b{padding:24px 22px 24px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line)}
.pc-n{font-family:var(--disp);font-size:22px;line-height:1.16;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(2 * 1.16em);margin-bottom:10px}
.pc-m{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-f{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.pc-p{font-family:var(--mono);font-size:15px;font-weight:500}
.pc-c{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-d)}
.p-all{margin-top:52px;display:flex;justify-content:center}

/* ── COMPARE ── */
.cmp{background:var(--porc);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmp-w{overflow-x:auto;border-radius:var(--r-lg)}
/* Comparison table.
   table-layout:fixed plus a sized first column means the two product columns
   always share the remainder equally — same width as each other at every
   breakpoint, which is the point of a comparison. The label column width lives
   in CSS rather than an inline <col style>, so the mobile rule can shrink it;
   an inline style would win over the media query. */
table.ct{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:760px;font-size:14.5px}
table.ct col.k{width:220px}
table.ct th,table.ct td{padding:19px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.ct thead th{font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:-.005em;padding-top:22px;padding-bottom:18px}
table.ct tbody th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding-top:19px}
table.ct .own{background:#F4F9FE;border-left:1px solid var(--line);border-right:1px solid var(--line)}
table.ct thead .own{background:var(--ink);color:#fff}
table.ct tr:last-child th,table.ct tr:last-child td{border-bottom:none}
.cmp-n{font-size:14.5px;color:var(--slate);margin-top:20px;max-width:660px}
.cmp-n a{color:var(--blue-d)}

/* ── BENTO ── */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.fc-i{aspect-ratio:1/1;position:relative;background:linear-gradient(180deg,#FBFDFF,#E9F0FA);display:flex;align-items:center;justify-content:center}
.fc-b{padding:30px 28px 34px;border-top:1px solid var(--line)}
.fc-h{font-family:var(--disp);font-size:25px;line-height:1.1;margin-bottom:10px}
.fc-b p{font-size:15px;color:var(--slate);line-height:1.55}

/* ── FAQ ── */
.faq-i{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{padding:28px 0;font-family:var(--disp);font-size:24px;line-height:1.2;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:18px;color:var(--slate)}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding:0 0 24px;color:var(--slate);font-size:15.5px;max-width:640px}

/* ── NEWS + FOOTER ── */
.news{background:var(--ink);color:#fff;border-bottom:1px solid var(--line-dk)}
.news-i{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:92px 0}
.news h2{font-family:var(--disp);font-size:clamp(30px,3.4vw,42px);line-height:1.05}
.news p{color:var(--dim);font-size:15.5px;margin-top:12px}
.nf{display:flex;gap:10px}
.nf input{flex:1;min-width:0;padding:16px 20px;border:1px solid var(--line-dk);background:#08192A;color:#fff;border-radius:var(--r-md);font-family:var(--sans);font-size:15px}
.nf input::placeholder{color:#7189A0}
footer{background:var(--ink);color:var(--dim);padding:92px 0 0}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:52px;padding-bottom:64px}
.fb .wm{color:#fff}
.fb p{font-size:14.5px;margin-top:16px;max-width:270px;line-height:1.6}
.fcol h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:18px}
.fcol a{display:block;color:var(--lite);text-decoration:none;font-size:14.5px;padding:7px 0}
.fcol a:hover{color:#fff;text-decoration:underline}
.fr{margin-bottom:16px}
.fr .lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:4px}
.fr .val{font-size:14.5px;color:var(--lite);overflow-wrap:anywhere}
.fr .val a{color:var(--lite);text-decoration:none}
.fruo{border-top:1px solid var(--line-dk);padding:28px 0;font-size:12.5px;line-height:1.7;color:#7C93A6;max-width:940px}
.fbot{border-top:1px solid var(--line-dk);padding:24px 0 32px;display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:#7C93A6;flex-wrap:wrap}
.fbot a{color:#7C93A6;text-decoration:none}

/* ── RESPONSIVE ── */
@media(max-width:1200px){
  /* artwork occupies from ~44% of the frame — keep the copy clear of it */
  .hero-c{max-width:40vw}
  .hero h1{font-size:clamp(44px,5.4vw,66px)}
  .hero-scrim{background:linear-gradient(90deg,rgba(6,19,31,.95) 0%,rgba(6,19,31,.90) 30%,rgba(6,19,31,.62) 46%,rgba(6,19,31,.16) 58%,rgba(6,19,31,0) 68%)}
}
@media(max-width:1180px){
  .wrap,.nav-i{padding:0 32px}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .ft{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .spec-strip{grid-template-columns:repeat(2,1fr)}
  .ss:nth-child(2n){border-right:none}
  .ss:nth-child(n+3){border-top:1px solid var(--line-dk)}
}
@media(max-width:960px){
  /* The cart stays visible on mobile — it was the only way to reach the
     basket from a phone, and hiding it behind the drawer meant people could
     add to the order and then not find it. Only the account icon goes; the
     drawer carries My Account as an emphasised button. */
  .nc,.nr .ic-acct{display:none}
  .nr{gap:2px}
  /* The icon itself is 19px — fine for a cursor, too small for a thumb. On
     mobile the cart gets a 40px target, matching the hamburger beside it. */
  .nr .ic-cart{width:40px;height:40px;align-items:center;justify-content:center}
  /* The badge is positioned against .ic, which is now a 40px tap target with
     a 19px icon centred inside it — so the badge drifted out with the box
     while the icon stayed put. Pull it back in by the padding on each side,
     written as calc so the relationship to those two sizes stays visible. */
  .nr .ic-cart .cn{top:calc(((40px - 19px) / 2) - 6px);right:calc(((40px - 19px) / 2) - 8px)}
  .ham{display:flex}
  .nav-i{height:66px}
  /* copy sits over the image from here down — cap its width and lift the scrim */
  .hero{min-height:0;background-position:38% center}
  .hero-i{padding:52px 0 56px}
  .hero-c{max-width:none}
  .hero .lbl,.hero h1{max-width:72%}
  .hero-s,.hero-btns,.hero .rule{max-width:54%}
  .hero-scrim{background:linear-gradient(90deg,rgba(6,19,31,.96) 0%,rgba(6,19,31,.93) 30%,rgba(6,19,31,.64) 50%,rgba(6,19,31,.22) 66%,rgba(6,19,31,0) 80%)}
  .hero-ph{right:4%;font-size:9px;padding:12px 14px}
  .feat-i{grid-template-columns:1fr;gap:32px;padding:72px 0 36px}
  .feat-v{height:auto}
  .news-i,.faq-i{grid-template-columns:1fr;gap:34px}
  .sec{padding:84px 0}
  .sec-h{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  /* the featured block is too tall to sit above the grid once stacked */
  .flow{display:flex;flex-direction:column}
  .hero{order:1}.prod{order:2}.feat{order:3}
}
@media(max-width:768px){
  body{font-size:16px}
  .wrap,.nav-i{padding:0 18px}
  .sec{padding:56px 0}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Hero stays short so the catalogue breaks the fold */
  .hero-i{padding:26px 0 28px}
  .hero h1{font-size:clamp(34px,9.6vw,44px);margin-top:9px}
  .hero .rule{margin:16px 0 13px}
  .hero-s{font-size:14px;line-height:1.45;margin-bottom:16px}
  .hero-btns{gap:8px;flex-wrap:nowrap;max-width:66%}
  .hero-btns .btn{flex:1 1 0;min-width:0;padding:13px 8px;font-size:11.5px}
  .hero-ph{display:none}
  .prod{padding-top:22px}
  .prod .sec-h{margin-bottom:16px;gap:8px}
  .prod .sec-h p{display:none}
  .pc-b{padding:18px 16px 18px}
  .pc-n{font-size:18px}
  .pc-m{font-size:9.5px;letter-spacing:.09em;margin-bottom:12px}
  .pc-p{font-size:14px}
  .pc-f{flex-direction:column;align-items:flex-start;gap:8px}
  .feat-i{padding:56px 0 30px}
  .feat-v{height:auto}
  .spec-wrap{padding-bottom:64px}
  .spec-strip{grid-template-columns:1fr}
  .ss{padding:22px 22px;border-right:none;border-top:1px solid var(--line-dk)}
  .ss:first-child{border-top:none}
  .news-i{padding:52px 0}
  .nf{flex-direction:column}
  .nf .btn{width:100%}
  /* bento sticky-stack */
  .fg{display:flex;flex-direction:column;gap:0}
  .fc{position:sticky;top:78px;margin-bottom:20px;border:1px solid var(--line);transition:transform .25s ease,opacity .25s ease}
  .fc:nth-child(1){z-index:1}.fc:nth-child(2){z-index:2}.fc:nth-child(3){z-index:3}
  .fc:last-child{margin-bottom:0}
  /* Footer: Explore + Information paired, Contact its own row below */
  .ft{grid-template-columns:1fr 1fr;gap:32px 22px}
  .fb{grid-column:1 / -1}
  .fct{grid-column:1 / -1}
  .fct .frows{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
  .fr{margin-bottom:0}
  .fr.addr{grid-column:1 / -1}
  .fbot{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:560px){
  /* the vials need to stay legible, which leaves less room beside them */
  .hero{background-position:24% center}
  .hero .lbl,.hero h1{max-width:78%}
  .hero-s,.hero .rule,.hero-btns{max-width:64%}
  .hero-scrim{background:linear-gradient(90deg,rgba(6,19,31,.97) 0%,rgba(6,19,31,.95) 32%,rgba(6,19,31,.62) 52%,rgba(6,19,31,.20) 68%,rgba(6,19,31,0) 82%)}
}
@media(max-width:400px){
  .hero-i{padding:20px 0 22px}
  .hero h1{font-size:clamp(30px,9vw,38px)}
  .hero-s{font-size:13.5px;margin-bottom:13px}
  .pgrid{gap:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ════════ THEME VIEWS ════════ */



/* page head — shared by shop, COA library, cart, checkout, account, 404 */
.ph-head{padding:72px 0 0}
.ph-head .lbl{display:block;margin-bottom:14px}
.ph-head h1{font-family:var(--disp);font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.02em}
.ph-head h1 i{font-style:italic;color:var(--blue)}
.ph-head p{color:var(--slate);font-size:16.5px;max-width:560px;margin-top:18px}
.ph-head .ticks{margin-top:28px}

/* toolbar: count + sort */
.tbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 0 26px}
.tbar .ct{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.sortwrap{display:flex;align-items:center;gap:10px}
.sortwrap label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.sel{position:relative;display:inline-flex}
.sel select{appearance:none;-webkit-appearance:none;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:11px 40px 11px 16px;cursor:pointer}
.sel select:hover{border-color:#C6D2DC}
.sel::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.5px solid var(--slate);border-bottom:1.5px solid var(--slate);transform:rotate(45deg);pointer-events:none}

/* search (COA library) */
.srch{position:relative;flex:1;max-width:340px}
.srch input{width:100%;font-family:var(--sans);font-size:14.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-md);padding:11px 16px}
.srch input::placeholder{color:#93A5B4}
.empty{padding:56px 0;text-align:center;color:var(--slate);font-size:15.5px}

/* ── PDP ── */
.pdp{padding:56px 0 0}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:26px}
.crumb a{color:var(--slate);text-decoration:none}.crumb a:hover{color:var(--blue)}
.pdp-g{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.gal .plate{position:sticky;top:110px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.thumb{aspect-ratio:1/1;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:linear-gradient(180deg,#FBFDFF,#E9F0FA);cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumb.on{border-color:var(--ink)}
.thumb img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-family:var(--disp);font-size:clamp(36px,4.4vw,54px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 12px}
.pdp .lede{color:var(--slate);font-size:16.5px;line-height:1.6;margin-bottom:26px}
.price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
/* Scoped to the buy box. `price` is not ours alone — WooCommerce uses it in
   cart and checkout markup too, and a bare .price at 30px leaked a product-page
   display size into the checkout order summary, where it overflowed the
   column. */
.priceline .price,.price-row .price{font-family:var(--mono);font-size:30px;font-weight:500}
.price-sfx{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.opt-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:12px}
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.pill{font-family:var(--mono);font-size:12.5px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:10px 18px;cursor:pointer;transition:.15s}
.pill:hover{border-color:#C6D2DC}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.tier{position:relative;border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 14px 16px;text-align:center;cursor:pointer;background:var(--paper);transition:.15s}
.tier:hover{border-color:#C6D2DC}
.tier.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tier-flag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 10px;border-radius:999px;white-space:nowrap}
.tier-flag.best{background:var(--blue-d)}
.tier-q{font-family:var(--disp);font-size:21px;line-height:1.1}
.tier-p{font-family:var(--mono);font-size:15px;margin-top:7px}
.tier-e{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:5px}
.addon{border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:24px}
.addon .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.addon label{display:flex;align-items:center;gap:13px;cursor:pointer;font-size:15px}
.addon input{width:17px;height:17px;accent-color:var(--blue);flex-shrink:0}
.addon .ai{width:44px;height:44px;border:1px solid var(--rule);border-radius:var(--r-sm);background:linear-gradient(180deg,#FBFDFF,#E9F0FA);flex-shrink:0}
.addon .an{flex:1}
.addon .ap{font-family:var(--mono);font-size:14px}
.totalbar{display:flex;align-items:baseline;justify-content:space-between;padding:18px 20px;background:var(--porc);border:1px solid var(--rule);border-radius:var(--r-lg);margin-bottom:16px}
.totalbar .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.totalbar .s{font-family:var(--mono);font-size:24px;font-weight:500}
.btn.full{width:100%}
.stockline{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-top:16px}
.dot{width:7px;height:7px;border-radius:50%;background:#1E9E6A;flex-shrink:0}
.pdp-sec{padding:80px 0}
.pdp-sec h2{font-family:var(--disp);font-size:clamp(26px,3vw,36px);margin-bottom:26px}
.coa-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 28px;background:var(--paper)}
.coa-meta{display:flex;gap:36px;flex-wrap:wrap}
.coa-meta div{font-family:var(--mono);font-size:14px}
.coa-meta span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}

/* ── CART ── */
.cart-g{display:grid;grid-template-columns:1.55fr .95fr;gap:48px;align-items:start;padding-top:8px}
.crow{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule)}
.crow:first-child{border-top:1px solid var(--rule)}
.cimg{aspect-ratio:1/1;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:linear-gradient(180deg,#FBFDFF,#E9F0FA)}
.cimg img{width:100%;height:100%;object-fit:cover}
.cname{font-family:var(--disp);font-size:20px;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-top:7px}
.csave{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#0B7F76;margin-top:7px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.qty button{width:34px;height:34px;border:none;background:var(--paper);cursor:pointer;font-size:16px;color:var(--ink)}
.qty button:hover{background:var(--porc)}
.qty span{font-family:var(--mono);font-size:14px;min-width:34px;text-align:center}
.cprice{font-family:var(--mono);font-size:16px;text-align:right;min-width:88px}
.sumbox{border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px;position:sticky;top:110px;background:var(--paper)}
.sumbox h3{font-family:var(--disp);font-size:24px;margin-bottom:20px}
.sline{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:15px;color:var(--slate)}
.sline .v{font-family:var(--mono);color:var(--ink)}
.sline.tot{border-top:1px solid var(--rule);margin-top:10px;padding-top:18px;font-size:17px;color:var(--ink);font-weight:600}
.sline.tot .v{font-size:21px}
.sline.disc .v{color:#0B7F76}

/* ── CHECKOUT ── */
.co-g{display:grid;grid-template-columns:1.35fr .95fr;gap:48px;align-items:start;padding-top:8px}
.fset{border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px;margin-bottom:20px;background:var(--paper)}
.fset h3{font-family:var(--disp);font-size:22px;margin-bottom:20px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px}
.fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:7px}
.fld input,.fld select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-md);padding:13px 15px}
.fld input::placeholder{color:#93A5B4}
.paybox{border:1px solid var(--rule);border-radius:var(--r-md);padding:16px 18px;font-size:14.5px;color:var(--slate);background:var(--porc)}

/* ── ORDER RECEIVED ── */
.oline{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);margin-bottom:40px}
.ostep{padding:24px 22px;border-right:1px solid var(--rule)}
.ostep:last-child{border-right:none}
.ostep .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:9px}
.ostep .v{font-family:var(--mono);font-size:14px}
.ostep.done .v{color:var(--ink)}
.ostep.todo .v{color:#93A5B4}
.addr-g{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── CONTENT PAGE ── */
.prose{max-width:720px}
.prose h2{font-family:var(--disp);font-size:30px;margin:44px 0 14px;line-height:1.15}
.prose p{margin-bottom:18px;color:var(--slate);font-size:16.5px;line-height:1.7}
.prose ul{margin:0 0 18px 22px;color:var(--slate);font-size:16.5px;line-height:1.7}

/* ── 404 ── */
.e404{padding:120px 0;text-align:center}
.e404 .num{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--slate)}
.e404 h1{font-family:var(--disp);font-size:clamp(44px,6vw,76px);line-height:1;margin:18px 0 16px}
.e404 p{color:var(--slate);font-size:17px;max-width:440px;margin:0 auto 30px}

@media(max-width:1100px){
  .pdp-g,.cart-g,.co-g{grid-template-columns:1fr;gap:36px}
  .gal .plate,.sumbox{position:static}
  .oline{grid-template-columns:repeat(2,1fr)}
  .ostep:nth-child(2n){border-right:none}
  .ostep:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:768px){
    .ph-head{padding:36px 0 0}
  .ph-head p{font-size:15px;margin-top:14px}
  .tbar{padding:22px 0 18px;gap:12px}
  .srch{max-width:none;width:100%}
  .sortwrap{width:100%}
  .sel,.sel select{width:100%}
  .pdp{padding:28px 0 0}
  .pdp-sec{padding:52px 0}
  /* Tiers keep their card shape and go one per row, as Exactide does. The
     flex row this replaced spread qty, price and unit across the full width
     with the flag floating loose at the start. */
  .tiers{grid-template-columns:1fr;gap:10px}
  .tier{text-align:left;padding:15px 16px}
  .tier-flag{top:-9px;left:auto;right:12px;transform:none}
  .tier-q{font-size:17px}
  .tier-p{font-size:16px;margin-top:5px}
  .tier-e{margin-top:4px}
  .thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .crow{grid-template-columns:70px 1fr;gap:14px}
  .crow .cprice{grid-column:2;text-align:left}
  .crow .qty{grid-column:2}
  .frow2,.addr-g{grid-template-columns:1fr}
  .oline{grid-template-columns:1fr}
  .ostep{border-right:none;border-top:1px solid var(--rule)}
  .ostep:first-child{border-top:none}
  .ostep:nth-child(n+3){border-top:1px solid var(--rule)}
  .e404{padding:72px 0}
}

/* Card CTA must never wrap — a second line breaks height parity between the
   shop grid and the COA Library grid. */
.pc-c{white-space:nowrap}

/* PDP specification block — classes, not inline styles, so the mobile
   breakpoint can actually override the two-column layout. */
.pdp .spec-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.pdp .spec-r{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.pdp .spec-r .k{color:var(--slate);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.pdp .spec-r .v{color:var(--ink)}
@media(max-width:768px){
  .pdp .spec-rows{grid-template-columns:1fr;gap:0}
  .pdp .spec-r{grid-template-columns:104px 1fr;gap:12px}
  .pdp .spec{padding:18px 16px}
  .coa-card{padding:20px}
  .coa-meta{gap:20px}
}

/* ════════ COA CARD — Exactide format ════════ */
.ccgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .25s,transform .25s}
.cc:hover{border-color:#C6D2DC;box-shadow:0 14px 36px rgba(11,29,45,.08);transform:translateY(-3px)}
.cc-img{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,#FBFDFF,#E9F0FA);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cc-img img{width:100%;height:100%;object-fit:cover}
.cc-fmt{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);background:rgba(255,255,255,.9);border:1px solid var(--rule);padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.cc-pur{position:absolute;top:14px;right:14px;z-index:2;text-align:right;background:rgba(255,255,255,.92);border:1px solid var(--rule);padding:8px 12px;border-radius:var(--r-sm);backdrop-filter:blur(6px)}
.cc-pur-v{font-family:var(--disp);font-size:21px;line-height:1;letter-spacing:-.01em}
.cc-pur-l{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-top:4px}
.cc-b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--rule)}
.cc-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.cc-name{font-family:var(--disp);font-size:21px;line-height:1.15;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:calc(2 * 1.15em)}
.cc-name a{text-decoration:none}
.cc-name a:hover{color:var(--blue-d)}
.cc-meta{display:flex;gap:26px;padding:13px 0 14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:14px}
.cc-mk{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.cc-mv{font-family:var(--mono);font-size:13px}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;min-height:56px;align-content:flex-start}
.ct-tag{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;padding:6px 9px;border-radius:var(--r-sm);background:var(--porc);border:1px solid var(--rule);color:var(--slate)}
.ct-tag.ok{background:#E6F2FF;border-color:#C3DFF6;color:var(--blue-d)}
.cc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:auto;padding:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--ink);border-radius:var(--r-md);transition:background .18s}
.cc-btn:hover{background:var(--blue-d)}

/* ════════ PDP — Exactide structure ════════ */
.pdp h1 .sz{font-family:var(--mono);font-size:.34em;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);vertical-align:middle;margin-left:6px}
.priceline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.price-per{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.pill{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.pill-d{font-family:var(--mono);font-size:13px}
.pill-p{font-family:var(--mono);font-size:11px;color:var(--slate)}
.pill.on .pill-p{color:#BBD8F2}
.ups{margin-bottom:26px}
.up{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:border-color .18s}
.up:hover{border-color:#C6D2DC}
.up input{position:absolute;opacity:0;pointer-events:none}
.up-img{width:44px;height:44px;border:1px solid var(--rule);border-radius:var(--r-sm);background:linear-gradient(180deg,#FBFDFF,#E9F0FA);flex-shrink:0}
.up-info{flex:1;display:flex;flex-direction:column;gap:3px}
.up-info b{font-weight:600;font-size:15px}
.up-info small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.up-price{font-family:var(--mono);font-size:14px}
.up-box{width:22px;height:22px;border:1px solid var(--rule);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;flex-shrink:0}
.up input:checked ~ .up-box{background:var(--ink);border-color:var(--ink);color:#fff}
.coa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;padding:15px;
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:border-color .18s,color .18s}
.coa-btn:hover{border-color:var(--ink);color:var(--blue-d)}
.assure{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding-bottom:22px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate)}
.lotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin:22px 0}
.lot-row{background:var(--porc);padding:15px 16px}
.lot-k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.lot-v{font-family:var(--mono);font-size:13.5px}
.accs{margin-top:6px}
.acc{border-bottom:1px solid var(--rule)}
.acc:first-child{border-top:1px solid var(--rule)}
.acc summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--disp);font-size:20px;font-weight:400}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--blue-d)}
.pm{font-family:var(--mono);font-size:17px;color:var(--slate);transition:transform .2s}
.acc[open] .pm{transform:rotate(45deg);color:var(--blue-d)}
.ac{padding-bottom:20px}
.sr{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px}
.sr:last-child{border-bottom:none}
.sr-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);padding-top:2px;flex-shrink:0}
.sr-v{text-align:right}
.acp{font-size:14.5px;color:var(--slate);line-height:1.65;margin-top:12px}
.acp a{color:var(--blue-d)}
.slim{margin-top:26px;padding:16px 18px;background:var(--porc);border-radius:var(--r-md);
  font-family:var(--mono);font-size:10.5px;line-height:1.75;color:var(--slate)}

/* cart badge feedback */
.cn.bump{animation:bump .34s cubic-bezier(.16,1,.3,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cn.bump{animation:none}}

/* card add button */
.pc-add{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-d);
  background:transparent;border:none;padding:0;cursor:pointer;white-space:nowrap}
.pc-add:hover{color:var(--blue);text-decoration:underline}
.pc-t{display:flex;align-items:center;justify-content:center;text-decoration:none}
.pc-n{text-decoration:none;display:-webkit-box}
.pc-n:hover{color:var(--blue-d)}

/* breathing room before the footer on every view */
main{padding-bottom:104px}

@media(max-width:1180px){ .ccgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:768px){
  .ccgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cc-b{padding:15px 14px 16px}
  .cc-name{font-size:17px;margin-bottom:12px}
  .cc-meta{gap:16px;padding:11px 0 12px;margin-bottom:12px}
  .cc-tags{gap:5px;margin-bottom:14px;min-height:48px}
  .ct-tag{font-size:8px;padding:5px 7px}
  .cc-btn{padding:12px;font-size:9.5px}
  .cc-pur{padding:6px 9px}.cc-pur-v{font-size:17px}
  .lotgrid{grid-template-columns:1fr}
  .assure{gap:10px}
  main{padding-bottom:64px}
}

/* ── card height parity fixes ──
   1. The out-of-stock label was a <span> next to a <button> elsewhere in the
      grid; different default line-height split card heights by 5px.
   2. Two tag rows vs one left the COA tag block 3px short of its min-height,
      so cards with fewer tests ended up shorter. Fixed height instead.
   3. The shop grid tightens its gap below 400px; the COA grid has to match or
      the two pages render cards at different widths. */
.pc-add,.pc-c{line-height:1.6;display:inline-block}
.cc-tags{height:59px;min-height:0;overflow:hidden}
@media(max-width:768px){ .cc-tags{height:50px} }
@media(max-width:400px){ .ccgrid{gap:12px} .cc-tags{height:50px} }

/* At two-up on a phone the Exactide card runs out of room: the format pill
   collides with the purity badge and the meta rail wraps mid-token. Thin it
   out rather than dropping to one column, so card widths still match the
   shop grid exactly. */
@media(max-width:520px){
  .cc-fmt{display:none}
  .cc-pur{top:10px;right:10px;padding:5px 8px}
  .cc-pur-v{font-size:15px}
  .cc-pur-l{font-size:7.5px;letter-spacing:.14em;margin-top:2px}
  .cc-b{padding:13px 12px 14px}
  .cc-eye{font-size:8.5px;letter-spacing:.14em;margin-bottom:6px}
  .cc-name{font-size:15.5px;margin-bottom:11px}
  .cc-meta{flex-direction:column;gap:9px;padding:10px 0 11px;margin-bottom:11px}
  .cc-mk{font-size:8px;margin-bottom:3px}
  .cc-mv{font-size:11.5px}
  .cc-tags{height:44px;gap:4px;margin-bottom:12px}
  .ct-tag{font-size:7.5px;padding:4px 6px;letter-spacing:.08em}
  .cc-btn{padding:11px;font-size:9px;letter-spacing:.12em}
}

/* wordmark */
/* Wordmark sizing.

   This has now been overridden twice by stylesheets that only load on shop and
   product pages — WooCommerce's own `.woocommerce img { height:auto }` and
   whatever the host's optimiser injects. Raising specificity once was not
   enough, so this is deliberately unbeatable: element + two classes + a parent,
   with !important on the dimensions only.

   The logo is chrome, not content. Nothing downstream should ever be resizing
   it, so there is no legitimate rule for this to break. The img also carries
   width and height attributes, so it renders correctly even with no CSS at all.

   The COA Library page was never affected because it is not a WooCommerce
   template, so those stylesheets never load there. */
nav .nl img.wmk,
footer .fb img.wmk{display:block;width:auto!important;max-width:none!important}
nav .nl img.wmk{height:30px!important}
footer .fb img.wmk{height:34px!important;margin-bottom:4px}
@media(max-width:768px){
  nav .nl img.wmk{height:24px!important}
  footer .fb img.wmk{height:28px!important}
}

/* single product image — one plate, no gallery */
.gal .plate{position:sticky;top:110px}
@media(max-width:1100px){.gal .plate{position:static}}

/* woo notices */
.woocommerce-notices-wrapper{max-width:1300px;margin:0 auto;padding:0 56px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:20px 0;padding:16px 20px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--porc);font-size:15px}
.woocommerce-error{border-color:#E5C2C2;background:#FDF4F4}
@media(max-width:768px){.woocommerce-notices-wrapper{padding:0 18px}}


/* Out of stock: still listed, still clickable, visibly unavailable. */
.pc.oos .pc-t{opacity:.55}
.pc.oos .pc-t::after{content:'Out of stock';position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  background:rgba(255,255,255,.92);border:1px solid var(--line);padding:5px 9px;border-radius:999px}
.pc.oos:hover .pc-t{opacity:.7}


/* A variation that cannot be bought: readable, obviously unavailable, inert. */
.pill.oos{opacity:.5;cursor:not-allowed}
.pill.oos:hover{border-color:var(--rule)}
.pill.oos .pill-p{color:var(--slate)}

/* ════════ WOOCOMMERCE: CART, CHECKOUT, ACCOUNT ════════
   These pages render Woo's own templates. With no rules of ours they fall back
   to Woo's float-based 48/48 columns — and page.php used to wrap them in
   .prose, capping everything at 720px, which is why the cart used half the
   page. Layout is grid here, and the furniture is restyled to match the rest
   of the site. */
.woo-wrap{padding-top:8px}

/* ── cart ── */
/* Scoped to the BODY class, not a wrapper the template has to remember to
   add. These layouts previously keyed off .woo-wrap; when a page rendered
   without it the grid never applied, WooCommerce's own block layout took over
   and the content stacked inside .prose's 720px cap. */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:1.55fr .95fr;gap:48px;align-items:start}
/* .prose exists for readable body copy and must never constrain a Woo layout. */
.prose .woocommerce,.woo-wrap .woocommerce{max-width:none}
.woocommerce-cart .prose,.woocommerce-checkout .prose,.woocommerce-account .prose{max-width:none}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals{float:none;width:auto}

/* ── shared table furniture ── */
.woocommerce table.shop_table{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:0}
.woocommerce table.shop_table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);font-weight:400;text-align:left;padding:16px 18px;border-bottom:1px solid var(--line)}
.woocommerce table.shop_table td{padding:18px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:15px}
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:none}
.woocommerce table.shop_table .product-thumbnail img{width:76px;height:76px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-md)}
.woocommerce table.shop_table .product-name a{font-family:var(--disp);font-size:20px;line-height:1.2;text-decoration:none}
.woocommerce table.shop_table .product-name a:hover{color:var(--blue-d)}
.woocommerce table.shop_table .variation,
.woocommerce table.shop_table dl.variation{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin:8px 0 0}
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd{display:inline;margin:0;font-weight:400}
.woocommerce .product-subtotal,.woocommerce .product-price{font-family:var(--mono)}
.woocommerce .amount{font-family:var(--mono)}
.woocommerce del{color:var(--slate)}
.woocommerce ins{text-decoration:none}

/* quantity stepper */
.woocommerce .quantity input.qty{width:70px;padding:10px;text-align:center;font-family:var(--mono);font-size:14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink)}
.woocommerce a.remove{color:var(--slate);font-size:20px;line-height:1;text-decoration:none}
.woocommerce a.remove:hover{color:var(--ink);background:transparent}

/* buttons */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit{font-family:var(--sans);font-weight:600;font-size:14.5px;line-height:1.2;
  background:var(--ink);color:#fff;padding:15px 28px;border:none;border-radius:var(--r-md);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background .18s}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce input.button:hover{background:var(--blue-d);color:#fff}
.woocommerce .button:disabled,.woocommerce .button.disabled{background:var(--line);color:#93A5B4}
.woocommerce .wc-proceed-to-checkout{padding:0;margin-top:20px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%}

/* cart totals panel */
.woocommerce .cart_totals{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--paper)}
.woocommerce .cart_totals h2{font-family:var(--disp);font-size:24px;font-weight:400;margin:0 0 18px}
.woocommerce .cart_totals table.shop_table{border:none;border-radius:0}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.woocommerce .cart_totals table.shop_table th{text-transform:uppercase}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td{border-bottom:none;padding-top:16px;font-size:17px}
.woocommerce .cart_totals .order-total .amount{font-size:21px}

/* coupon */
.woocommerce .coupon{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.woocommerce .coupon input.input-text{flex:1;min-width:0;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-md);font-family:var(--sans);font-size:15px}
.woocommerce .actions{padding:18px 0 0!important;background:transparent}

/* ── checkout ── */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.35fr .95fr;gap:48px;align-items:start}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1/span 3}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 16px;font-family:var(--disp);font-size:24px;font-weight:400}
.woocommerce-checkout #order_review{grid-column:2;grid-row:2;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;background:var(--paper)}
.woocommerce-checkout #order_review table.shop_table{border:none;border-radius:0}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{padding:12px 0;border-bottom:1px solid var(--line)}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:auto}
.woocommerce .col2-set{display:block}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3{
  font-family:var(--disp);font-size:22px;font-weight:400;margin:0 0 18px}
.woocommerce-checkout #customer_details > div{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;background:var(--paper);margin-bottom:20px}

/* form fields */
.woocommerce form .form-row{display:block;margin:0 0 14px;padding:0}
.woocommerce form .form-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:7px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-md);font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);height:auto}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
.woocommerce-checkout #payment{background:var(--porc);border:1px solid var(--line);border-radius:var(--r-lg);margin-top:18px}
.woocommerce-checkout #payment ul.payment_methods{padding:20px;border-bottom:1px solid var(--line);list-style:none;margin:0}
.woocommerce-checkout #payment div.form-row{padding:20px}
.woocommerce-checkout #payment #place_order{width:100%}

/* ── account ── */
/* Superseded: the account grid now hangs off .rs-account (and a :has()
   fallback) further down. Leaving this here made .woocommerce a grid as well,
   nesting one grid inside another and collapsing the content column to zero. */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:12px 0;
  border-bottom:1px solid var(--line);text-decoration:none;font-size:15px;color:var(--ink)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--blue-d);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--porc);padding:16px 20px;font-size:15px;list-style:none;margin:0 0 20px}
.woocommerce-error{border-color:#E5C2C2;background:#FDF4F4}

@media(max-width:900px){
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout form.checkout,

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:1;grid-row:auto}
  .woocommerce table.shop_table td{padding:14px}
  .woocommerce table.shop_table .product-thumbnail img{width:60px;height:60px}
}

/* Cart table on phones. Woo ships its own responsive rules for
   .shop_table_responsive, but they only apply if its stylesheet wins the
   cascade — a six-column table is 508px wide on a 390px screen if they don't.
   These stack the rows using the data-title attributes Woo already outputs. */
@media(max-width:768px){
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tbody tr{display:block;border-bottom:1px solid var(--line);
    padding:16px;position:relative}
  .woocommerce table.shop_table_responsive tbody tr:last-child{border-bottom:none}
  .woocommerce table.shop_table_responsive tbody td{display:flex;align-items:center;justify-content:space-between;
    gap:16px;width:auto;padding:7px 0;border:none;text-align:right}
  .woocommerce table.shop_table_responsive tbody td::before{content:attr(data-title);
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
    text-align:left;flex-shrink:0}
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail{display:block;padding-bottom:12px}
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail::before{display:none}
  .woocommerce table.shop_table_responsive tbody td.product-name{display:block;text-align:left}
  .woocommerce table.shop_table_responsive tbody td.product-name::before{display:none}
  .woocommerce table.shop_table_responsive tbody td.product-remove{position:absolute;top:12px;right:12px;padding:0}
  .woocommerce table.shop_table_responsive tbody td.product-remove::before{display:none}
  .woocommerce table.shop_table_responsive tbody td.actions{display:block;text-align:left}
  .woocommerce table.shop_table_responsive tbody td.actions::before{display:none}
  .woocommerce .coupon{flex-direction:column}
  .woocommerce .coupon .button,.woocommerce td.actions .button{width:100%}
  /* totals table keeps its two columns — it is only ever label + value */
  .woocommerce .cart_totals table.shop_table_responsive tbody tr{display:table-row;padding:0;border:none}
  .woocommerce .cart_totals table.shop_table_responsive tbody td{display:table-cell;text-align:right;padding:12px 0;
    border-bottom:1px solid var(--line)}
  .woocommerce .cart_totals table.shop_table_responsive tbody td::before{display:none}
  .woocommerce .cart_totals table.shop_table_responsive thead{display:none}
}

/* Product gallery plate, stacked layouts.
   Below 1100px .pdp-g becomes one column, so the 1:1 plate stretches to the
   full container — 1036px square at a 1100px viewport. Cap and centre it, same
   as the homepage featured block. */
@media(max-width:1100px){
  .gal{display:flex;justify-content:center}
  .gal .plate{width:100%;max-width:460px}
}
@media(max-width:768px){ .gal .plate{max-width:360px} }
@media(max-width:400px){ .gal .plate{max-width:300px} }

/* ── Product page, phones ──
   Borrowed from Exactide: tighter rhythm, one-per-row options, assurance list
   stacked, nothing sticky. */
@media(max-width:768px){
  .pdp{padding:14px 0 0}
  .crumb{margin-bottom:14px;font-size:9.5px}
  .pdp h1{font-size:clamp(27px,7.6vw,34px);margin:10px 0 10px}
  .pdp h1 .sz{font-size:.4em;margin-left:5px}
  .pdp .lede{font-size:15px;line-height:1.55;margin-bottom:20px}
  .priceline{margin-bottom:22px;padding-bottom:18px;gap:10px}
  .priceline .price,.price-row .price{font-size:26px}
  .opt-lbl{margin-bottom:10px}
  /* options fill the row rather than crowding at one end */
  .pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-bottom:22px}
  .pill{align-items:center;text-align:center;padding:12px 10px}
  .up{padding:12px 13px;gap:11px}
  .up-img{width:40px;height:40px}
  .up-info b{font-size:14.5px}
  .totalbar{padding:15px 16px}
  .totalbar .s{font-size:21px}
  .assure{flex-direction:column;gap:7px;margin-top:18px;padding-bottom:18px}
  .lotgrid{margin:18px 0}
  .acc summary{padding:16px 0;font-size:18px}
  .sr{flex-direction:column;align-items:flex-start;gap:3px;padding:10px 0}
  .sr-v{text-align:left}
  .slim{margin-top:20px;padding:14px 15px}
  .pdp-sec{padding:44px 0}
}

/* Comparison table on phones.
   Horizontal scrolling a comparison defeats it — you can never see both
   columns at once. Instead the label column narrows hard and the two product
   columns keep sharing the rest equally, so the whole thing fits. */
@media(max-width:768px){
  table.ct{min-width:0;font-size:13px}
  table.ct col.k{width:84px}
  table.ct th,table.ct td{padding:12px 10px}
  table.ct thead th{font-size:15px;padding-top:16px;padding-bottom:14px;line-height:1.15}
  table.ct tbody th{font-size:9px;letter-spacing:.06em;padding-top:14px;
    overflow-wrap:anywhere;word-break:break-word;line-height:1.5}
  .cmp-w{overflow-x:visible}
  .cmp-n{font-size:13.5px;margin-top:14px}
}
@media(max-width:400px){
  table.ct{font-size:12.5px}
  table.ct col.k{width:76px}
  table.ct tbody th{font-size:8.5px;letter-spacing:.04em}
  table.ct th,table.ct td{padding:11px 8px}
  table.ct thead th{font-size:14px}
}

/* ══════════════════════════════════════════════════════════════════
   POLISH LAYER
   Refinement rather than decoration. Every rule here either removes a
   rough edge or adds a detail that rewards attention; nothing added
   for its own sake, because this palette only works if it stays quiet.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Typography ──
   Headlines set at 40–88px will orphan a word on a huge share of
   viewports. text-wrap:balance evens the line lengths, which is the
   single biggest quality difference on a display face. pretty stops
   single-word last lines in body copy. Both degrade silently. */
h1,h2,h3,.fc-h,.cc-name,.pc-n,.tier-q,.bs .t{text-wrap:balance}
p,.hero-s,.lede,.fc-b p,.acp,.cmp-n{text-wrap:pretty}

/* Numerals in specs, prices and lots should line up in columns. */
.spec,.ss,.pc-p,.tier-p,.tier-e,.lot-v,.cc-mv,.priceline .price,.cprice,.amount,
.sr-v,.cc-pur-v{font-variant-numeric:tabular-nums}

/* Optical detail: the serif reads better with slightly tighter tracking
   at display sizes and standard tracking as it gets smaller. */
.hero h1,.ph-head h1,.pdp h1{letter-spacing:-.022em}

/* ── 2. Eyebrow rule ──
   A short hairline before every kicker. It ties the eyebrows to the
   graduation device and gives each section a consistent entry mark. */
.lbl{display:inline-flex;align-items:center;gap:12px}
.lbl::before{content:"";width:20px;height:1px;background:currentColor;opacity:.45;flex-shrink:0}
.sec-h .lbl,.ph-head .lbl,.hero .lbl{display:inline-flex}

/* ── 3. Product tiles ──
   A slow, small scale on hover. Photography with a baked background
   takes this well; it reads as the object being examined rather than
   as a UI effect. */
.pc-t,.cc-img{overflow:hidden}
.pc-t img,.cc-img img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pc:hover .pc-t img,.cc:hover .cc-img img{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){
  .pc:hover .pc-t img,.cc:hover .cc-img img{transform:none}
}

/* ── 4. Directional cues ──
   Small arrows on the actions that go somewhere, nudging on hover.
   They also make the CTA scannable at a glance in a dense grid. */
.pc-add::after,.pc-c::after{content:"→";margin-left:7px;display:inline-block;
  transition:transform .22s cubic-bezier(.16,1,.3,1)}
.pc:hover .pc-add::after,.pc:hover .pc-c::after{transform:translateX(3px)}
.lnk::after,.feat-link::after{content:"";display:none}
.lnk,.feat-link{transition:color .18s}

/* ── 5. Section seams ──
   Bands currently meet on a colour change alone. A hairline at the seam
   makes the change deliberate instead of accidental. */
.feat,.cmp{border-top:1px solid var(--line)}

/* ── 6. Nav on scroll ──
   The header sits on white and on the dark hero. Once the page moves,
   a hairline and a touch more blur separate it from what is passing
   underneath. */
nav{transition:box-shadow .25s ease,background-color .25s ease}
nav.stuck{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(11,29,45,.06);
  background:rgba(255,255,255,.97)}

/* ── 7. Reveal on scroll ──
   14px and a fade. Enough to feel considered, small enough that nobody
   waits for it. Disabled entirely for reduced motion, and the class is
   only ever added by JS, so content is visible if scripts fail. */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── 8. Selection and focus ── */
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* Keyboard users should not have to tab the whole header to reach content. */
.skip{position:absolute;left:-9999px;top:0;z-index:600;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r-md) 0;font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ── 9. Spec panel accent ──
   A single blue rule down the left edge. The panel is the signature
   element; this is the one place a brand colour earns its place. */
.spec{position:relative}
.spec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--blue);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.spec-strip{position:relative}
.spec-strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--blue);border-radius:var(--r-lg) 0 0 var(--r-lg);z-index:2}

/* ── 10. Card rest state ──
   A shadow so faint it only registers as the card sitting on the page
   rather than being printed on it. The hover lift then has somewhere
   to travel from. */
.pc,.cc{box-shadow:0 1px 2px rgba(11,29,45,.03)}

/* ── 11. Footer seam ── */
.fbot{align-items:center}
footer .ticks{opacity:.35}

/* Out of stock is a state, not an action: no arrow, no accent. */
.pc-oos{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;white-space:nowrap;line-height:1.6;display:inline-block}
.pc-oos:hover{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   MODERN LAYER
   Sits after the polish layer. Font swap, softer geometry, glass, and
   the affordances the new sections need. Remove this block and the
   previous one to return to the plain treatment.
   ══════════════════════════════════════════════════════════════════ */

/* ── Display face ──
   Instrument Serif is one weight and has no italic, so with
   font-synthesis:none the old accent word rendered upright and the
   headings sat at 400. Sora is a variable geometric with real weights
   and echoes the geometry of the wordmark. */
h1,h2,h3,.fc-h,.cc-name,.pc-n,.tier-q,.bs .t,.faq summary,.acc summary,
.sumbox h3,.fset h3,.wm,.cc-pur-v,.ruo-gate-box h2,.gbox h2{
  font-family:var(--disp);font-weight:600;letter-spacing:-.025em}
.hero h1,.ph-head h1,.pdp h1{font-weight:700;letter-spacing:-.035em}
.lede,.hero-s{letter-spacing:-.005em}

/* The accent word was italic. Sora has no italic and synthesis is off,
   so it becomes a gradient instead — solid colour where the gradient
   is unsupported. */
.hero h1 i,.ph-head h1 i{font-style:normal;color:var(--blue-lt)}
@supports (-webkit-background-clip:text){
  .hero h1 i{background:linear-gradient(96deg,var(--blue-lt) 0%,#FFFFFF 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .ph-head h1 i{background:linear-gradient(96deg,var(--blue) 0%,var(--blue-d) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ── Geometry ──
   Pill actions, softer cards. The radius tokens carry most of this;
   these are the places that hard-coded a value. */
.btn,.pc-add,.cc-btn,.coa-btn,.nf .btn,.woocommerce .button,
.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{border-radius:var(--r-pill)}
.cc-btn,.coa-btn{border-radius:var(--r-pill)}
.tier,.up,.bbox,.fset,.sumbox,.spec,.lotgrid,.plate,.pc,.cc,.fc,.bslot,
.paybox,.totalbar,.slim,.cmp-w,table.ct{border-radius:var(--r-lg)}
.sel select,.srch input,.fld input,.fld select,.nf input,
.woocommerce form .form-row input.input-text,.woocommerce .quantity input.qty{border-radius:var(--r-pill)}
.spec::before,.spec-strip::before{border-radius:var(--r-lg) 0 0 var(--r-lg)}

/* ── Glass ──
   Only where something sits over other content: the header, the gate,
   the hero chips and the mobile buy bar. Everywhere else it would just
   be haze. Falls back to near-opaque where backdrop-filter is absent. */
nav{background:rgba(255,255,255,.68);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%)}
nav.stuck{background:rgba(255,255,255,.8)}
.ruo-gate,.gate{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.ruo-gate-box,.gbox{background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 40px 80px -20px rgba(6,19,31,.45),0 0 0 1px rgba(255,255,255,.5) inset}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav,nav.stuck{background:rgba(255,255,255,.98)}
  .ruo-gate-box,.gbox{background:#fff}
  .hero-chips .chip{background:rgba(6,19,31,.72)}
}

/* ── Hero assurance chips ──
   Three facts on glass over the photograph. Real information, and the
   one place the image benefits from something sitting on it. */
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 13px;
  border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#E6F2FF;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  white-space:nowrap}
.chip svg{width:15px;height:15px;flex-shrink:0;opacity:.9}

/* ── Icons ── */
.ico{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:26px;height:26px}

/* ── Verify a lot ──
   A lot-number lookup that jumps to the certificate library. The single
   most useful thing this brand can put on a homepage. */
.verify{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.verify::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 140% at 12% 0%,rgba(46,136,229,.28) 0%,transparent 62%)}
.verify-i{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;padding:84px 0}
.verify h2{font-size:clamp(30px,3.6vw,44px);line-height:1.06;margin:14px 0 14px;color:#fff}
.verify p{color:var(--dim);font-size:16px;max-width:430px}
.vbox{background:rgba(255,255,255,.06);border:1px solid var(--line-dk);border-radius:var(--r-lg);
  padding:30px;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.vbox .lbl{color:var(--dim);margin-bottom:14px;display:inline-flex}
.vform{display:flex;gap:10px}
.vform input{flex:1;min-width:0;padding:16px 20px;border-radius:var(--r-pill);
  border:1px solid var(--line-dk);background:rgba(6,19,31,.5);color:#fff;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.vform input::placeholder{color:#6F86A2;letter-spacing:.1em}
.vform input:focus{border-color:var(--blue-lt);outline:none}
.vhint{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-top:14px;display:flex;align-items:center;gap:8px}

/* ── Certificate slider ── */
.slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.snav{display:flex;gap:8px;flex-shrink:0}
.snav button{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .18s,color .18s,opacity .18s}
.snav button:hover:not(:disabled){border-color:var(--ink);color:var(--blue-d)}
.snav button:disabled{opacity:.35;cursor:default}
.srail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 4px 18px;margin:-4px -4px -18px;
  scrollbar-width:none;-ms-overflow-style:none}
.srail::-webkit-scrollbar{display:none}
.scard{scroll-snap-align:start;flex:0 0 300px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:0;
  box-shadow:0 1px 2px rgba(11,29,45,.03);transition:border-color .2s,box-shadow .25s,transform .25s}
.scard:hover{border-color:#C6D2DC;box-shadow:0 14px 36px rgba(11,29,45,.08);transform:translateY(-3px)}
.scard-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.scard-pur{font-family:var(--disp);font-weight:600;font-size:26px;letter-spacing:-.02em}
.scard-ico{width:38px;height:38px;border-radius:var(--r-pill);background:var(--porc);
  display:flex;align-items:center;justify-content:center;color:var(--blue-d);flex-shrink:0}
.scard-n{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.2;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(2 * 1.2em)}
.scard-meta{display:flex;gap:24px;padding:14px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:18px}
.scard-k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:5px}
.scard-v{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.scard-btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-d);text-decoration:none}
.scard:hover .scard-btn svg{transform:translate(2px,-2px)}
.scard-btn svg{transition:transform .22s cubic-bezier(.16,1,.3,1)}

@media(max-width:960px){
  .verify-i{grid-template-columns:1fr;gap:30px;padding:64px 0}
}
@media(max-width:768px){
  .verify-i{padding:52px 0}
  .verify p{font-size:15px}
  .vbox{padding:22px}
  .vform{flex-direction:column}
  .vform .btn{width:100%}
  .slider-head{margin-bottom:22px}
  .snav{display:none}
  .srail{gap:12px;padding-bottom:14px;margin-bottom:-14px}
  .scard{flex:0 0 82%;padding:20px}
  .hero-chips{gap:7px;margin-top:20px}
  .chip{padding:8px 13px 8px 11px;font-size:9px;letter-spacing:.1em;gap:7px}
  .chip svg{width:13px;height:13px}
}
@media(max-width:400px){
  .chip{font-size:8.5px;padding:7px 11px 7px 9px}
  .scard{flex:0 0 86%}
}

#coaPrev .ico{transform:rotate(180deg)}

/* ── Mobile buy bar ──
   On a phone the add-to-cart sits below the options, the total and the
   COA link — a long way from the thumb. This mirrors it on glass at the
   bottom of the viewport once the real button scrolls past. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:180;display:none;
  gap:14px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.82);border-top:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.buybar.up{transform:none}
.buybar .bb-l{min-width:0;flex:1}
.buybar .bb-n{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-p{font-family:var(--mono);font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums}
.buybar .btn{padding:14px 24px;font-size:14px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .buybar{background:rgba(255,255,255,.98)}
}
@media(max-width:768px){ .single-product .buybar{display:flex} }
@media(prefers-reduced-motion:reduce){ .buybar{transition:none} }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM LAYER
   The dark verification band reads better than the rest of the site.
   Four things make it work: a deep ground with a soft glow, no visible
   borders, generous air, and type set large and tight. This applies
   those to the light sections rather than making the site dark.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Air ──
   The single biggest lever. Sections were 128px; premium layouts give
   content far more room and let the eye rest between ideas. */
.sec{padding:168px 0}
.sec-h{margin-bottom:72px}
.verify-i{padding:132px 0}
.feat-i{padding:140px 0 56px}
.spec-wrap{padding-bottom:140px}
.hero-i{padding:118px 0 126px}
.slider-head{margin-bottom:52px}

/* ── 2. Type ──
   Larger and tighter. Tracking matters more than size here: -0.035em on
   a geometric at display scale is what makes it look drawn rather than
   typed. */
.sec-h h2,.slider-head h2{font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em}
.verify h2{font-size:clamp(38px,4.6vw,60px);letter-spacing:-.035em;line-height:1.02}
.feat h2{font-size:clamp(38px,4.6vw,60px);letter-spacing:-.035em;line-height:1.02}
.sec-h p{font-size:17.5px;max-width:420px;line-height:1.6}
.fc-h{font-size:27px;letter-spacing:-.022em}
.pdp h1{font-size:clamp(34px,4.6vw,58px)}

/* ── 3. Surfaces ──
   Borders came off. A 1px outline on every card is what makes an
   interface read as a dashboard; depth and a tinted ground do the same
   separating job without drawing a box around everything. */
.pc,.cc,.fc,.scard,.plate,.bbox,.fset,.sumbox,.lotgrid,.vbox{border-color:transparent}
.pc,.cc,.scard{border:0;
  box-shadow:0 1px 2px rgba(11,29,45,.04),0 12px 28px -14px rgba(11,29,45,.10)}
.pc:hover,.cc:hover,.scard:hover{
  box-shadow:0 2px 6px rgba(11,29,45,.05),0 28px 56px -20px rgba(11,29,45,.20);
  transform:translateY(-4px)}
.plate{border:0;box-shadow:0 2px 4px rgba(11,29,45,.04),0 30px 60px -30px rgba(11,29,45,.22)}
.plate .cap{border-top:1px solid rgba(11,29,45,.07)}
.pc-b,.cc-b{border-top:0}
.pc-f{border-top:1px solid rgba(11,29,45,.07)}
.cc-meta{border-color:rgba(11,29,45,.07)}
.scard-meta{border-color:rgba(11,29,45,.07)}

/* Inner dividers soften too — full-strength hairlines everywhere is the
   other half of the dashboard look. */
.faq details,.acc,.bs{border-color:rgba(11,29,45,.08)}
.sr{border-bottom-color:rgba(11,29,45,.07)}

/* ── 4. Ambient light ──
   The dark band has a radial glow behind it. The same idea on the light
   sections, at a fraction of the strength — enough that the ground is
   not flat, not enough to read as a gradient. */
.prod,.cmp,.sec:has(.srail){position:relative;isolation:isolate}
.prod::before,.sec:has(.srail)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(46,136,229,.07) 0%,transparent 70%)}
.cmp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 60% at 18% 0%,rgba(46,136,229,.09) 0%,transparent 68%)}

/* ── 5. Bento on dark ──
   The artwork is deep blue on a dark ground. Sitting it in a white card
   fought the images and made three dark squares float on pale grey.
   On an ink ground the images bleed into the section instead.
   It also gives the page a second dark moment, which is what the
   alternation in the reference does. */
/* No overflow:hidden. The glow below is an inset:0 pseudo-element and never
   overflows, while an overflowing ancestor silently disables position:sticky
   on every descendant — which kills the homepage's mobile bento stack. The
   plugin overrides this with !important, but leaving a rule here for that
   override to fight is how the stack kept breaking. */
.bento-dark{background:var(--ink);color:var(--lite);position:relative}
.bento-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 120% at 50% -10%,rgba(46,136,229,.22) 0%,transparent 62%)}
.bento-dark .wrap{position:relative;z-index:1}
.bento-dark .sec-h h2{color:#fff}
.bento-dark .lbl{color:var(--dim)}
.bento-dark .fc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.bento-dark .fc:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.7);transform:translateY(-4px)}
.bento-dark .fc-i{background-color:#0A1B29}
.bento-dark .fc-b{border-top:1px solid rgba(255,255,255,.07)}
.bento-dark .fc-h{color:#fff}
.bento-dark .fc-b p{color:var(--dim)}

/* ── 6. Actions ──
   A little more presence, and a lift on press rather than a colour flip. */
.btn{padding:17px 34px;font-size:15px;letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(11,29,45,.10),0 10px 24px -12px rgba(11,29,45,.40)}
.btn:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(11,29,45,.12),0 16px 32px -14px rgba(11,29,45,.45)}
.btn:active{transform:translateY(0)}
.btn.o,.btn.odk{box-shadow:none}
.btn.o:hover,.btn.odk:hover{box-shadow:0 8px 20px -12px rgba(11,29,45,.28)}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.pc:hover,.cc:hover,.scard:hover,.bento-dark .fc:hover{transform:none}
}

/* ── 7. Responsive air ──
   All of the above is desktop generosity. Phones get proportion, not
   the same absolute numbers, or every section becomes a scroll. */
@media(max-width:1100px){
  .sec{padding:120px 0}
  .sec-h{margin-bottom:52px}
  .verify-i{padding:96px 0}
  .feat-i{padding:100px 0 44px}
  .spec-wrap{padding-bottom:100px}
}
@media(max-width:768px){
  .sec{padding:72px 0}
  .sec-h{margin-bottom:32px}
  .sec-h h2,.slider-head h2{font-size:clamp(30px,8.4vw,40px);letter-spacing:-.03em}
  .verify h2,.feat h2{font-size:clamp(28px,7.8vw,38px);letter-spacing:-.03em}
  .sec-h p{font-size:15.5px}
  .fc-h{font-size:22px}
  .verify-i{padding:60px 0}
  .feat-i{padding:60px 0 28px}
  .spec-wrap{padding-bottom:64px}
  .hero-i{padding:13px 0 15px}
  .slider-head{margin-bottom:24px}
  .btn{padding:15px 26px;font-size:14.5px}
  .pc:hover,.cc:hover,.scard:hover{transform:none}
}

/* ── COA picker ──
   A product whose variations each carry their own certificate gets a select
   in the exact shape and position of the single-certificate button, so the
   grid stays level. The native select is kept and made transparent over the
   styled shell — it keeps keyboard and screen-reader behaviour, and the
   platform picker on a phone. */
.cc-pick{position:relative;margin-top:auto;display:block;width:100%}
/* Height is pinned rather than left to padding, so the picker and the
   single-certificate button are the same size standing side by side in the
   grid. They were 40px and 45px. */
.cc-pick .cc-select{appearance:none;-webkit-appearance:none;width:100%;
  height:46px;padding:0 38px 0 16px;border:0;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;text-align-last:center;transition:background .18s}
.cc-pick .cc-select:hover{background:var(--blue-d)}
.cc-pick .cc-select option{font-family:var(--sans);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--ink);background:#fff;text-align:left}
.cc-pick-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#fff;font-size:12px}
@media(max-width:768px){
  .cc-pick .cc-select{height:40px;padding:0 30px 0 12px;font-size:9.5px;letter-spacing:.12em}
  .cc-pick-ico{right:12px}
}

/* Match the single-certificate button to the picker. */
.cc-btn{min-height:46px}
@media(max-width:768px){ .cc-btn{min-height:40px} }


/* ── My Account ──
   The grid hangs off .rs-account, the wrapper the theme's template override
   supplies, because WooCommerce's own wrapper is not dependable — see
   woocommerce/myaccount/my-account.php.

   The :has() rule is a fallback for the case where another plugin replaces
   that template and the wrapper disappears: it matches whatever element is
   the direct parent of the navigation. Ignored by browsers without :has(),
   which then fall back to a single column rather than a broken layout. */
/* ── My Account ──
   The grid is .rs-account-grid, supplied by woocommerce/myaccount/my-account.php,
   whose ONLY children are the navigation and the content.

   That matters. Earlier attempts put the grid on whatever element contained
   the navigation — but WooCommerce's wrapper also holds the notices element,
   and grid auto-placement then puts notices in cell 1, the navigation in
   cell 2 and the content on row 2 in the narrow column. Every broken
   screenshot was that, not a missing rule.

   Do not move this grid onto a container you do not control the children of. */
.rs-account-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}

/* WooCommerce floats the navigation at 30% and the content at 68%. As grid
   items those percentages resolve against the track rather than the row,
   collapsing the sidebar to a sliver. */
.rs-account-grid > .woocommerce-MyAccount-navigation,
.rs-account-grid > .woocommerce-MyAccount-content,
.woocommerce-account .rs-account-grid > .woocommerce-MyAccount-navigation,
.woocommerce-account .rs-account-grid > .woocommerce-MyAccount-content{
  float:none!important;width:auto!important;max-width:none!important}

.rs-account-grid > .woocommerce-MyAccount-content{min-width:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15px}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--blue-d)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--blue-d);font-weight:600}

.woocommerce-account .woocommerce-MyAccount-content > :first-child{margin-top:0}
.woocommerce-account .woocommerce-MyAccount-content p{font-size:16px;line-height:1.7;margin:0 0 16px}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--blue-d)}

/* Login / register on a logged-out account page. */
/* Login / register on a logged-out account page.
   `:not(.woocommerce-Addresses)` matters — WooCommerce puts `col2-set` on the
   addresses wrapper too, and this rule outranks the addresses rules, so
   without the exclusion it silently re-grids them after they were set to
   stack. */
.woocommerce-account .woocommerce .col2-set:not(.woocommerce-Addresses){
  display:grid;grid-template-columns:1fr 1fr;gap:32px}

@media(max-width:900px){
  .rs-account-grid{grid-template-columns:1fr;gap:28px}
  .woocommerce-account .woocommerce .col2-set:not(.woocommerce-Addresses){grid-template-columns:1fr;gap:20px}
}


/* ── WooCommerce notices ──
   WooCommerce draws an icon in a ::before using its own icon font. That font
   is not loaded here, so the glyph falls back to a replacement box sitting on
   top of the first letter — the little square over "Confirm" and "No order".
   Removing the pseudo-element is the fix; the panels read fine without it.

   The panels are also a message plus a button, so they are laid out as a row
   with the action on the right rather than left to overlap. */
/* `body ` prefix on purpose. WooCommerce sets
   padding:1em 2em 1em 3.5em !important to clear its icon, at the same
   specificity as a bare class — so with both carrying !important the winner
   is whichever stylesheet loads last, and WooCommerce's loads after ours.
   One extra element in the selector settles it regardless of order. */
body .woocommerce-message,body .woocommerce-info,body .woocommerce-error{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 22px!important;line-height:1.5}
body .woocommerce-message::before,body .woocommerce-info::before,body .woocommerce-error::before,
body .woocommerce-message::after,body .woocommerce-info::after,body .woocommerce-error::after{
  content:none!important;display:none!important}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  flex-shrink:0;margin:0}
@media(max-width:600px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{
    flex-direction:column;align-items:flex-start;gap:14px}
  .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{width:100%}
}

/* ── Account navigation ──
   Links were flush to the hairline with no indent. A little room on the left,
   a hover ground, and a rule marking the active section. */
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  padding:14px 16px;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:background .16s,color .16s,border-color .16s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--porc);color:var(--blue-d)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--porc);border-left-color:var(--blue);color:var(--blue-d);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a{border-bottom:0}

/* Log out sits apart from the sections above it. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
  color:var(--slate)}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{
  color:var(--ink)}

/* ── Account content ── */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend{
  font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:21px;margin:0 0 16px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{margin-bottom:24px}

/* ── Account addresses ──
   Stacked, one above the other, left aligned.

   They were side by side, and that layout kept breaking: WooCommerce puts the
   intro paragraph — and on some setups a notices element — inside the same
   wrapper, so grid auto-placement pushed billing into column two and shipping
   onto the next row. Several attempts to work around that from CSS failed
   because the wrapper's contents vary by version and plugin.

   Stacking needs no container ownership at all. Normal block flow puts one
   after the other whatever else is in there; the only thing to neutralise is
   WooCommerce's float. Nothing here depends on how many children the wrapper
   has, so it cannot regress the same way.

   The width cap keeps an address a comfortable measure instead of a single
   line stretched across the full column. */
.rs-addresses,
.woocommerce-account [data-rs-addresses],
.woocommerce-account .woocommerce-Addresses{
  display:block;margin:24px 0 0;float:none;width:auto}

.woocommerce-account .woocommerce-Address{
  float:none!important;width:auto!important;max-width:560px;clear:both;
  margin:0 0 36px;text-align:left}
.woocommerce-account .woocommerce-Address:last-child{margin-bottom:0}

.rs-addresses-intro{margin:0 0 4px}

.woocommerce-account .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.02em;margin:0}
.woocommerce-account .woocommerce-Address-title .edit{
  float:none!important;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-d);text-decoration:none;white-space:nowrap}
.woocommerce-account .woocommerce-Address-title .edit:hover{text-decoration:underline}

.woocommerce-account .woocommerce-Address address{
  font-style:normal!important;color:var(--slate);font-size:15px;line-height:1.7;margin:0}

@media(max-width:900px){
  .woocommerce-account .woocommerce-Address{max-width:none;margin-bottom:28px}
}

/* ── Account navigation: collapsible on phones ──
   The section list has grown past what the default layout assumes, and a full
   vertical list ahead of the content leaves almost no usable room on a phone.
   Collapsed it costs one row, showing the section you are in.

   Collapsing only happens once main.js adds `rs-nav-js`, so with scripts
   blocked the list renders open and nothing is unreachable. */
.rs-account-toggle{display:none}

@media(max-width:900px){
  .woocommerce-account .woocommerce-MyAccount-navigation.rs-nav-js .rs-account-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:14px 16px;margin:0;cursor:pointer;
    background:var(--paper);color:var(--ink);
    border:1px solid var(--line);border-radius:var(--r-md);
    font-family:var(--sans);font-size:15px;font-weight:600;text-align:left;
    transition:border-color .16s}
  .woocommerce-account .woocommerce-MyAccount-navigation.rs-nav-js .rs-account-toggle:hover{border-color:#C6D2DC}
  .rs-account-toggle-ico{flex-shrink:0;transition:transform .2s ease}
  .woocommerce-MyAccount-navigation.rs-nav-js.is-open .rs-account-toggle-ico{transform:rotate(180deg)}
  .woocommerce-MyAccount-navigation.rs-nav-js.is-open .rs-account-toggle{
    border-radius:var(--r-md) var(--r-md) 0 0;border-bottom-color:transparent}

  /* Closed by default once JS has taken over. */
  .woocommerce-account .woocommerce-MyAccount-navigation.rs-nav-js ul{display:none}
  .woocommerce-account .woocommerce-MyAccount-navigation.rs-nav-js.is-open ul{
    display:block;border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden}
  .woocommerce-account .woocommerce-MyAccount-navigation.rs-nav-js.is-open li:last-child a{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){ .rs-account-toggle-ico{transition:none} }

/* ── Whole-card click ──
   The product name is the card's real link; its ::after is stretched over the
   card so clicking anywhere opens the product. That keeps link semantics —
   keyboard focus, middle-click, open in new tab, something for a screen reader
   to announce — which a click handler on the div would lose.

   Add to order is lifted above the stretched area so it stays its own target.
   The out-of-stock label is a span, not a link, so it never competes. */
.pc{position:relative;cursor:pointer}
.pc .pc-link::after{content:"";position:absolute;inset:0;z-index:1}
.pc .pc-add{position:relative;z-index:2}
.pc .pc-oos{position:relative;z-index:2;pointer-events:none}

/* Keyboard focus lands on the name, so the ring has to read as the whole card. */
.pc:focus-within{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-lg)}
.pc .pc-link:focus-visible{outline:none}

/* The tile is no longer a link; keep the hover zoom tied to the card. */
.pc:hover .pc-t img{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){ .pc:hover .pc-t img{transform:none} }


/* ── Block cart & checkout ──
   The block cart and checkout render their own components. Their typography
   is the component's, not the product page's, and the summary column is
   narrow — so sizes are pinned here and every flex child is given room to
   shrink. Without min-width:0 a long price keeps its intrinsic width and
   pushes out of the panel instead of wrapping. */
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-components-product-price__regular,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price{
  font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.45;
  font-variant-numeric:tabular-nums}
.wc-block-components-product-price__regular{color:var(--slate)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:19px}

.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__header,
.wc-block-components-totals-item{min-width:0}
.wc-block-components-order-summary-item__header{flex-wrap:wrap;gap:4px 12px}
.wc-block-components-order-summary-item__total-price{flex-shrink:0;white-space:nowrap}
.wc-block-components-product-name{min-width:0;overflow-wrap:anywhere}
.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-totals-block{min-width:0;overflow-wrap:anywhere}