/* ── Self-hosted fonts ──────────────────────────────────────────────
   Dropped the Google Fonts CDN: browser cache partitioning ended the
   shared-cache benefit, so every visitor paid a third-party connection on
   a render-blocking path. Latin subset only. Libre Franklin ships as a
   variable font, so one file covers 400-800.
   font-display:swap with size-adjust-matched fallbacks keeps CLS at 0. */
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-var.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
/* metric-matched fallbacks so the swap does not shift layout */
@font-face{font-family:"Franklin Fallback";src:local("Helvetica Neue"),local("Arial");
  size-adjust:105%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Fallback";src:local("Menlo"),local("Consolas"),local("monospace");
  size-adjust:96%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

/* ============================================================
   PepSmartUSA — "The Standard" design system
   Federal-monograph institutional: parchment ground, ink navy,
   signal red ≤5% of any viewport. Light theme by design.
   ============================================================ */
:root{
  --paper:#F7F4EE; --card:#FFFFFF; --ink:#12233D; --deep:#0B1830;
  --slate:#5B6B7F; --line:#E3DED3; --signal:#B3282D; --gold:#C9A227;
  --tint:#EFEAE0; --ok:#2E6B4F;
  --font-ui:"Libre Franklin","Franklin Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","Plex Fallback",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1160px; --pad:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--signal);text-underline-offset:3px}
a:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:var(--paper);padding:10px 16px;z-index:200}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── type ── */
h1,h2,h3{line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:0 0 .5em}
h1{font-weight:800;font-size:clamp(30px,4.6vw,46px)}
h2{font-weight:800;font-size:clamp(22px,3vw,30px)}
h3{font-weight:600;font-size:18px}
p{max-width:70ch;margin:.5em 0 1em}
.eyebrow{font:500 11.5px/1 var(--font-mono);letter-spacing:.16em;color:var(--signal);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0 0 12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.lede{font-size:17.5px;color:var(--slate);max-width:64ch}

/* ── announcement + header ── */
.announce{background:var(--deep);color:var(--paper);text-align:center;
  font:500 11.5px/1.5 var(--font-mono);letter-spacing:.08em;padding:7px 12px;text-transform:uppercase}
header.site{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:26px;padding:14px var(--pad);max-width:var(--maxw);margin:0 auto}
.lockup{display:flex;align-items:center;gap:7px;text-decoration:none;flex:none}
.lockup .wm{font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--ink)}
.lockup .tag{background:var(--signal);color:#F7F4EE;font:500 10px/1 var(--font-mono);
  padding:3.5px 5px;letter-spacing:.12em}
nav.main{display:flex;gap:22px;margin-left:8px}
nav.main a{font:600 13.5px/1 var(--font-ui);text-decoration:none;color:var(--ink);padding:8px 0;
  border-bottom:2px solid transparent}
nav.main a[aria-current="page"],nav.main a:hover{border-bottom-color:var(--signal);color:var(--ink)}
.hspace{flex:1}
.hsearch{position:relative}
.hsearch input{width:190px;border:1px solid var(--line);background:var(--card);border-radius:2px;
  font:400 13.5px/1 var(--font-ui);padding:9px 12px 9px 32px;color:var(--ink)}
.hsearch svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--slate)}
.cartbtn{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--ink);
  background:var(--card);color:var(--ink);font:600 13px/1 var(--font-ui);padding:10px 14px;cursor:pointer;border-radius:2px}
.cartbtn:hover{background:var(--deep);color:var(--paper)}
.cartbtn .count{font-family:var(--font-mono);background:var(--signal);color:#F7F4EE;
  border-radius:9px;font-size:11px;padding:2px 6px;min-width:18px;text-align:center}
.menubtn{display:none;border:1px solid var(--line);background:var(--card);padding:9px 11px;cursor:pointer;border-radius:2px}
@media (max-width:900px){
  nav.main{display:none}
  .hbar{flex-wrap:wrap;gap:10px 12px}
  .hsearch{order:9;flex-basis:100%}
  .hsearch input{width:100%}
  .menubtn{display:block}
  nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:8px var(--pad)}
  nav.main.open a{padding:13px 0;border-bottom:1px solid var(--line)}
}

/* ── RUO strip ── */
.ruo-strip{background:var(--tint);border-bottom:1px solid var(--line);
  font:500 11px/1.5 var(--font-mono);letter-spacing:.07em;color:var(--slate);
  text-transform:uppercase;text-align:center;padding:6px 12px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:2px;
  font:600 14px/1 var(--font-ui);padding:13px 22px;cursor:pointer;text-decoration:none;
  border:1px solid var(--ink);transition:background .15s,color .15s}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--deep);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}

/* ── hero ── */
.hero{background:var(--deep);color:var(--paper);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero h1{color:#F7F4EE}
.hero .lede{color:#F7F4EE;opacity:.82}
.hero .stat-row{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.hero .stat b{display:block;font:500 20px/1.2 var(--font-mono);color:#F7F4EE}
.hero .stat span{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8FA0B8}
.hero .art{position:relative}
.hero .art img{border:1px solid rgba(247,244,238,.14)}
.hero .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero .btn-primary:hover{background:#fff}
.hero .btn-ghost{border-color:rgba(247,244,238,.4);color:var(--paper)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}}

/* ── sections ── */
section.band{padding:58px 0}
section.band.tint{background:var(--tint)}
section.band.deep{background:var(--deep);color:var(--paper)}
section.band.deep h2{color:#F7F4EE}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}

/* ── product cards + label compositor ── */
.grid{display:grid;gap:18px}
.grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pcard{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
  position:relative;transition:box-shadow .15s}
.pcard:hover{box-shadow:0 3px 14px rgba(18,35,61,.10)}
.pcard a.cover{text-decoration:none;color:inherit;display:block}
.render{position:relative;background:#F3EFE7;overflow:hidden;aspect-ratio:3/4;
  container-type:inline-size}
.render img{width:100%;height:100%;object-fit:cover}

/* ── Label compositor ───────────────────────────────────────────────
   Each master render bakes in the label ARCHITECTURE (navy header band,
   red rule, blank white panel); live type is composited into those two
   zones, so all 92 products share four renders while still carrying real
   branding and real product data.

   Geometry is measured from each master's pixels, not guessed. The navy
   band gives the label's true horizontal extent (navy exists only on the
   label), and the bottles are NOT centered in their frames, so each
   format sets its own left/right. --lw is that label width in cqw, and
   every type size is derived from it so text always fits the label.
     format   navy band y     red rule y    white panel y    label x
     vial     41.4-56.1       56.2-59.0     59.0-88.5        43.5-71.9
     nasal    49.0-62.7       62.8-65.2     65.2-92.5        33.7-59.0
     oral     42.1-56.1       56.2-57.7     57.7-81.0        34.7-62.6
     capsule  45.9-60.0       60.5-61.9     61.9-86.7        36.9-70.2  */
.render .brandzone{position:absolute;display:flex;align-items:center;justify-content:center;
  gap:.3em;color:#F7F4EE;pointer-events:none}
.render .brandzone .wm{font:800 calc(var(--lw) * 0.104 * 1cqw)/1 var(--font-ui);letter-spacing:.02em}
.render .brandzone .tag{background:var(--signal);color:#F7F4EE;
  font:500 calc(var(--lw) * 0.062 * 1cqw)/1 var(--font-mono);padding:.3em .4em;letter-spacing:.1em}
.render .infozone{position:absolute;display:flex;flex-direction:column;align-items:center;
  text-align:center;color:var(--ink);pointer-events:none;gap:.12em;overflow-wrap:anywhere}
.render .infozone .nm{font:700 calc(var(--lw) * 0.154 * 1cqw)/1.12 var(--font-ui);
  letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.render .infozone .st{font:500 calc(var(--lw) * 0.112 * 1cqw)/1.2 var(--font-mono);color:#1B3358}
.render .infozone .vol{font:400 calc(var(--lw) * 0.076 * 1cqw)/1.3 var(--font-mono);
  color:#5B6B7F;letter-spacing:.03em}
.render .infozone .ruo{font:500 calc(var(--lw) * 0.058 * 1cqw)/1.25 var(--font-mono);
  color:#8A93A3;letter-spacing:.02em;margin-top:.4em;text-transform:uppercase}
/* long strength strings (capsule bottles carry per-capsule AND per-bottle
   figures) must not push the RUO/lot lines off the bottom of the label */
.render .infozone .st{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.render .infozone .lot{font:400 calc(var(--lw) * 0.055 * 1cqw)/1 var(--font-mono);
  color:#AAB0BB;letter-spacing:.05em;margin-top:.12em}

/* Per-format label geometry, measured from each master render's centre-column
   colour runs (navy band / red rule / white panel) and the navy band's
   horizontal extent, which is the label's true width:
     vial    navy 41.4-56.1  red 56.2-59.0  white 59.0-88.5  x 43.5-71.9
     nasal   navy 56.0-65.1  red 65.2-66.7  white 66.7-91.9  x 37.2-58.6
     oral    navy 44.0-54.4  red 54.5-56.2  white 56.2-84.1  x 32.0-68.6
     capsule navy 45.9-60.0  red 60.5-61.9  white 61.9-86.7  x 36.9-70.2
   Masters are 3:4.07 in a 3:4 box under object-fit:cover, so ~0.9% is cropped
   top and bottom. --lw is the label width in cqw and every type size derives
   from it, so text always fits its label.
   Horizontal extent is the BOTTLE SILHOUETTE at the band height, inset 12% so
   type sits on the flat front face instead of running onto the cylinder's
   curve. Do not derive it by colour-testing for navy: the labels carry a
   specular highlight that reads as non-navy, which put the vial's centre at
   56.8% instead of its true 50.2% and pushed all its text to the right.
   The amber oral bottle also reads as "red" to a naive colour classifier. */
.render.f-vial   {--lw:33.6}
.render.f-vial    .brandzone{top:44.5%;left:33.4%;right:33.0%}
.render.f-vial    .infozone {top:61%;  left:33.4%;right:33.0%}
.render.f-nasal  {--lw:20.4}
.render.f-nasal   .brandzone{top:58.5%;left:40.0%;right:39.5%}
.render.f-nasal   .infozone {top:68%;  left:40.0%;right:39.5%}
.render.f-oral   {--lw:28.0}
.render.f-oral    .brandzone{top:47.5%;left:36.3%;right:35.6%}
.render.f-oral    .infozone {top:58%;  left:36.3%;right:35.6%}
.render.f-capsule{--lw:34.2}
.render.f-capsule .brandzone{top:49%;  left:30.8%;right:35.0%}
.render.f-capsule .infozone {top:64%;  left:30.8%;right:35.0%}

.pcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .cat{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.pcard h3{font-size:15.5px;margin:0}
.pcard .meta{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto}
.pcard .price{font:500 15px/1 var(--font-mono)}
.pcard .price small{font-size:11px;color:var(--slate)}
.chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid var(--ink);font:600 11px/1 var(--font-mono);border-radius:2px}
.fmt{font:500 11px/1.4 var(--font-mono);letter-spacing:.06em;color:var(--slate)}

/* ── filters ── */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.filters a{font:500 12px/1 var(--font-mono);letter-spacing:.05em;text-decoration:none;
  border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 13px;border-radius:2px}
.filters a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters a:hover{border-color:var(--ink)}
.result-count{font:400 12px/1.6 var(--font-mono);color:var(--slate);margin:0 0 14px}

/* ── breadcrumbs ── */
.crumbs{font:400 12px/1.6 var(--font-mono);color:var(--slate);padding:18px 0 0}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.crumbs .sep{margin:0 7px;color:var(--line)}

/* ── PDP ── */
.pdp{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:44px;padding:28px 0 54px}
@media (max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp .render{border:1px solid var(--line);font-size:26px}
.pdp .ruoline{font:500 11px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal);margin:6px 0 14px}
.spec-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:18px 0}
.spec-strip div{background:var(--card);padding:10px 12px}
.spec-strip b{display:block;font:500 10px/1.4 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.spec-strip span{font:500 13.5px/1.5 var(--font-mono)}
.varpick{margin:18px 0}
.varpick legend{font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);padding:0;margin-bottom:9px}
.varpick{border:none;padding:0}
.varbtns{display:flex;gap:9px;flex-wrap:wrap}
.varbtn{border:1px solid var(--line);background:var(--card);padding:11px 15px;cursor:pointer;
  font:500 13px/1.2 var(--font-mono);border-radius:2px;color:var(--ink)}
.varbtn[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;background:var(--card)}
.qty button{border:none;background:none;font:600 17px/1 var(--font-mono);width:38px;height:44px;cursor:pointer;color:var(--ink)}
.qty input{width:44px;border:none;text-align:center;font:500 15px/1 var(--font-mono);background:none;color:var(--ink)}
.buyrow{display:flex;gap:12px;margin:20px 0 8px;flex-wrap:wrap}
.buyrow .btn{flex:1;min-width:190px}
.shipnote{font:400 12.5px/1.7 var(--font-mono);color:var(--slate)}
.trustline{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.trustline span{font:500 11px/1.5 var(--font-mono);letter-spacing:.05em;color:var(--slate);
  display:flex;align-items:center;gap:7px}
.trustline svg{color:var(--signal);flex:none}

/* spec table + accordions */
.spec-table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.spec-table th{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);text-align:left;padding:8px 14px 8px 0;border-bottom:2px solid var(--ink);width:38%}
.spec-table td{border-bottom:1px solid var(--line);padding:9px 0;font-family:var(--font-mono);font-size:13px}
details.acc{border:1px solid var(--line);background:var(--card);margin:0 0 -1px}
details.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;padding:15px 18px}
details.acc summary h2{font:600 14px/1.3 var(--font-ui);margin:0;letter-spacing:0}
details.acc summary::after{content:"+";font:400 18px/1 var(--font-mono);color:var(--signal)}
details.acc[open] summary::after{content:"–"}
details.acc .inner{padding:0 18px 18px;font-size:14.5px}
details.acc .inner p{margin-top:0}

/* COA slot */
.coa-slot{border:1px dashed var(--line);background:var(--tint);padding:16px 18px;margin:16px 0;
  font:400 13px/1.7 var(--font-mono);color:var(--slate)}
.coa-slot b{color:var(--ink);font-weight:500}
.coa-card{background:var(--card);border:1px solid var(--line);padding:16px 18px;display:flex;
  justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.coa-card .id{font:500 13px/1.6 var(--font-mono)}
.coa-card .id small{display:block;color:var(--slate);font-weight:400}

/* ── trust band (home) ── */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.trust-grid .t{background:var(--card);border:1px solid var(--line);padding:20px 20px 18px}
.trust-grid .t svg{color:var(--signal);margin-bottom:10px}
.trust-grid .t h3{font-size:15px;margin:0 0 5px}
.trust-grid .t p{font-size:13.5px;color:var(--slate);margin:0}
.band.deep .trust-grid .t{background:rgba(247,244,238,.05);border-color:rgba(247,244,238,.14)}
.band.deep .trust-grid .t h3{color:#F7F4EE}
.band.deep .trust-grid .t p{color:#9FAEC4}

/* numbered process */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;counter-reset:step}
.process .step{background:var(--card);border:1px solid var(--line);padding:18px;counter-increment:step}
.process .step::before{content:"0" counter(step);font:500 12px/1 var(--font-mono);color:var(--signal);
  letter-spacing:.1em;display:block;margin-bottom:9px}
.process .step h3{font-size:14.5px;margin:0 0 4px}
.process .step p{font-size:13px;color:var(--slate);margin:0}

/* ── forms ── */
.field{margin:0 0 14px}
.field label{display:block;font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--card);
  padding:11px 13px;font:400 15px/1.4 var(--font-ui);color:var(--ink);border-radius:2px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.form-status{font:500 13px/1.6 var(--font-mono);margin-top:10px}
.form-status.ok{color:var(--ok)} .form-status.err{color:var(--signal)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── calculator ── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.calc-out{background:var(--deep);color:var(--paper);padding:24px}
.calc-out h3{color:#F7F4EE}
.calc-out .big{font:500 30px/1.2 var(--font-mono);margin:4px 0 2px}
.calc-out .row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(247,244,238,.14);
  padding:10px 0;font:400 13.5px/1.5 var(--font-mono)}
.calc-out .row:last-child{border:none}
.calc-out small{color:#8FA0B8}

/* ── cart drawer + page ── */
.drawer-back{position:fixed;inset:0;background:rgba(11,24,48,.5);z-index:80;opacity:0;
  pointer-events:none;transition:opacity .2s}
.drawer-back.open{opacity:1;pointer-events:auto}
aside.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:var(--paper);
  z-index:90;transform:translateX(102%);transition:transform .22s;display:flex;flex-direction:column;
  border-left:1px solid var(--line)}
aside.drawer.open{transform:none}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer .dhead h2{font-size:17px;margin:0}
.drawer .dclose{border:none;background:none;font-size:22px;cursor:pointer;color:var(--ink);padding:4px 8px}
.drawer .dbody{flex:1;overflow-y:auto;padding:14px 20px}
.line-item{display:grid;grid-template-columns:54px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.line-item .thumb{width:54px;height:66px;background:#F3EFE7;border:1px solid var(--line);position:relative;overflow:hidden}
.line-item .thumb img{width:100%;height:100%;object-fit:cover}
.line-item h4{font-size:13.5px;margin:0 0 3px}
.line-item .v{font:400 11.5px/1.5 var(--font-mono);color:var(--slate)}
.line-item .rm{border:none;background:none;color:var(--slate);cursor:pointer;font:400 11px/1 var(--font-mono);
  text-decoration:underline;padding:0;margin-top:6px}
.line-item .amt{font:500 13.5px/1.4 var(--font-mono);text-align:right}
.shipbar{margin:14px 0 4px}
.shipbar .msg{font:500 11.5px/1.6 var(--font-mono);color:var(--slate);margin-bottom:6px}
.shipbar .track{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.shipbar .fill{height:100%;background:var(--signal);width:0;transition:width .3s}
.drawer .dfoot{border-top:1px solid var(--line);padding:16px 20px 20px}
.drawer .sub{display:flex;justify-content:space-between;font:500 15px/1.4 var(--font-mono);margin-bottom:12px}
.empty-note{text-align:center;color:var(--slate);padding:40px 10px;font-size:14px}

/* ── age gate ── */
dialog.gate{border:none;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh}
dialog.gate::backdrop{background:rgba(11,24,48,.88)}
.gate-card{background:var(--paper);max-width:460px;margin:8vh auto 0;padding:38px 36px;border-top:4px solid var(--signal)}
.gate-card .lockup{margin-bottom:20px}
.gate-card h2{font-size:21px}
.gate-card p{font-size:14px;color:var(--slate)}
.gate-card .gbtns{display:flex;gap:10px;margin-top:22px}
.gate-card .gbtns .btn{flex:1}
.gate-card .fine{font:400 11px/1.7 var(--font-mono);color:var(--slate);margin-top:16px}

/* ── footer ── */
footer.site{background:var(--deep);color:#B9C4D6;margin-top:70px;border-top:3px solid var(--signal)}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;padding:48px 0 34px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
footer h3{font:500 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#8FA0B8;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:8px 0}
footer a{color:#D7DEE9;text-decoration:none;font-size:13.5px}
footer a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--signal)}
footer .brandcol img{width:150px;margin-bottom:14px;background:#F7F4EE;padding:10px;border-radius:2px}
footer .brandcol p{font-size:12.5px;line-height:1.7;color:#8FA0B8}
footer .legalblock{border-top:1px solid rgba(247,244,238,.12);padding:22px 0 30px;
  font:400 11px/1.8 var(--font-mono);color:#7385A0}
footer .legalblock p{max-width:none;margin:0 0 10px}

/* misc */
.notice{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--signal);
  padding:14px 18px;font-size:13.5px;margin:18px 0}
.pagehead{padding:34px 0 8px}
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose li{margin:6px 0}
.tablewrap{overflow-x:auto}
.center{text-align:center}

/* mobile sticky buy bar (PDP) — desktop never shows it */
#stickyBar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--paper);
  border-top:1px solid var(--line);padding:10px 16px;gap:12px;align-items:center;display:none}
@media (max-width:860px){#stickyBar:not([hidden]){display:flex}}

/* PDP render is large: container queries already scale the label, but the
   PDP box gets a touch more breathing room around the info block. */
.pdp .render .infozone .ruo{margin-top:.6em}

/* screen-reader-only text (visible to AT, removed from the visual layout) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}