/* 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
*/

:root{
  --void:#06131F; --ink:#0B1D2D; --porc:#F2F4F6; --paper:#FFFFFF;
  --blue:#1E88E5; --blue-d:#1662A5; --blue-lt:#7CBAF0;
  --line:#DCE3EA; --line-dk:#173247;
  --slate:#55697C; --dim:#8FA6BC; --lite:#E6F2FF;
  --disp:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r:12px; --r-lg:20px; --r-md:12px; --r-sm:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis-weight:none;font-synthesis:none}
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,#FAFBFC,#F2F4F6);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,#FAFBFC,#F2F4F6);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){
  .nc,.nr .ic{display:none}
  .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,#FAFBFC,#F2F4F6);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}
.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,#FAFBFC,#F2F4F6);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,#FAFBFC,#F2F4F6)}
.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,#FAFBFC,#F2F4F6);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,#FAFBFC,#F2F4F6);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 ── */
.woocommerce-cart .woo-wrap .woocommerce{display:grid;grid-template-columns:1.55fr .95fr;gap:48px;align-items:start}
.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 ── */
.woocommerce-account .woo-wrap .woocommerce{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start}
.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 .woo-wrap .woocommerce,
  .woocommerce-checkout form.checkout,
  .woocommerce-account .woo-wrap .woocommerce{grid-template-columns:1fr;gap:28px}
  .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}
  .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}
}