/* ==========================================================================
   ALTURA PEPTIDE CO — homepage preview v1
   Navy/cream editorial system. Steel blue is the only accent — use sparingly.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root{
  --void:#0a0e16;          /* darkest — hero, finale, footer */
  --black:#0d1320;         /* photo band, marquee */
  --panel:#141b2a;         /* card shop bar */
  --cream:#eef0f2;         /* light sections */
  --ink:#f4f6f8;           /* text on dark */
  --dark:#131a26;          /* text on cream */
  --steel:#4a6f94;         /* THE accent */
  --steel-soft:#8fb3d9;
  --maxw:1280px;

  --line:rgba(244,246,248,.12);
  --line-2:rgba(244,246,248,.2);
  --line-dk:rgba(19,26,38,.14);

  --f-display:'Cinzel',Georgia,'Times New Roman',serif;
  --f-edit:'Cormorant Garamond',Georgia,serif;
  --f-body:'Poppins',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --pad-x:clamp(20px,4vw,52px);
  --sec-y:clamp(72px,10vw,150px);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; border:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
h1,h2,h3,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--steel); color:#fff; }

:focus-visible{ outline:2px solid var(--steel-soft); outline-offset:3px; border-radius:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--dark);
  padding:12px 18px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:top .25s ease;
}
.skip:focus{ top:16px; }

/* --- Global flourishes --------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cur,.cur-glow{ position:fixed; z-index:95; pointer-events:none; opacity:0; }
.cur{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--ink); mix-blend-mode:difference;
  transition:opacity .3s ease,transform .18s ease;
}
.cur.is-big{ transform:scale(2.4); }
.cur-glow{
  width:460px; height:460px; margin:-230px 0 0 -230px; border-radius:50%;
  background:radial-gradient(circle,rgba(74,111,148,.16),transparent 62%);
  filter:blur(28px); transition:opacity .5s ease;
}
@media (hover:none),(pointer:coarse){ .cur,.cur-glow{ display:none; } }

/* --- Reveal -------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(30px); filter:blur(6px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1),
             filter .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 80ms);
}
.reveal.in{ opacity:1; transform:none; filter:none; }

/* --- Shared bits --------------------------------------------------------- */
.sec{ max-width:var(--maxw); margin:0 auto; padding:var(--sec-y) var(--pad-x); }

.eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(244,246,248,.4);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--steel); flex:none; opacity:.85;
}
.eyebrow--dk{ color:rgba(19,26,38,.44); }

em{ font-style:normal; color:var(--steel); }

.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:16px 30px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent; transition:.34s cubic-bezier(.22,.61,.36,1);
  white-space:nowrap;
}
.btn svg{ width:13px; height:13px; flex:none; transition:transform .34s cubic-bezier(.22,.61,.36,1); }
.btn:hover svg{ transform:translateX(4px); }
.btn--solid{ background:var(--ink); color:var(--dark); }
.btn--solid:hover{ background:#fff; box-shadow:0 10px 34px rgba(143,179,217,.22); }
.btn--dark{ background:var(--dark); color:var(--ink); }
.btn--dark:hover{ background:#0a0e16; box-shadow:0 10px 30px rgba(19,26,38,.24); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--steel-soft); background:rgba(74,111,148,.14); }

.sec__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.sec__head h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(34px,5vw,64px); line-height:.98;
  letter-spacing:.02em; text-transform:uppercase;
}

/* ==========================================================================
   1 — NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:20px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid transparent;
  transition:background .4s ease,padding .4s ease,border-color .4s ease,backdrop-filter .4s ease;
}
.nav.solid{
  background:rgba(10,14,22,.76);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-color:var(--line);
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand__mark{ width:9px; height:9px; flex:none; }
.brand__mark circle{ fill:var(--steel-soft); }
.brand__mark line{ stroke:var(--steel); stroke-width:1; }
.brand__txt{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand__name{
  font-family:var(--f-display); font-weight:700; font-size:16px;
  letter-spacing:.3em; text-transform:uppercase;
}
.brand__sub{
  font-family:var(--f-mono); font-size:8px; letter-spacing:.4em;
  text-transform:uppercase; color:rgba(244,246,248,.42);
}

.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.6vw,36px); }
.nav__links a{
  position:relative; font-size:13px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,246,248,.64); padding:4px 0;
  transition:color .3s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--steel-soft); transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__act{ display:flex; align-items:center; gap:16px; }
.nav__ico{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; color:rgba(244,246,248,.78);
  transition:color .3s ease,background .3s ease;
}
.nav__ico:hover{ color:var(--ink); background:rgba(244,246,248,.07); }
.nav__ico svg{ width:19px; height:19px; }
.nav__badge{
  position:absolute; top:0; right:-1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:100px; background:var(--steel); color:#fff;
  font-family:var(--f-mono); font-size:9px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

.burger{
  display:none; width:34px; height:34px; border-radius:50%;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:background .3s ease;
}
.burger:hover{ background:rgba(244,246,248,.07); }
.burger span{
  display:block; width:17px; height:1.4px; background:var(--ink); border-radius:2px;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }

.mnav{
  position:fixed; top:0; left:0; right:0; z-index:79;
  background:rgba(10,14,22,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:96px var(--pad-x) 32px;
  transform:translateY(-102%); visibility:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),visibility .5s;
}
.mnav.open{ transform:translateY(0); visibility:visible;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.mnav a{
  display:block; padding:15px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-weight:700; font-size:17px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,246,248,.82);
  transition:color .3s ease,padding-left .3s ease;
}
.mnav a:hover,.mnav a:focus-visible{ color:var(--ink); padding-left:8px; }
.mnav__foot{
  margin-top:24px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(244,246,248,.34);
}

/* ==========================================================================
   2 — HERO
   ========================================================================== */
.hero{ position:relative; min-height:100vh; overflow:hidden; background:var(--void); }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__glow{
  position:absolute; right:-16vw; top:44%; width:74vw; height:74vw;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(circle,rgba(143,179,217,.14),rgba(74,111,148,.05) 42%,transparent 68%);
}
/* Ridge art is now atmosphere behind the vials, not the subject. */
.hero__ridge{
  position:absolute; right:0; top:0; bottom:0; width:min(58vw,860px);
  pointer-events:none; will-change:transform; opacity:.5;
}
#ridgeCanvas{ display:block; width:100%; height:100%; }

/* --- Hero vials ---------------------------------------------------------- */
/* Centred with top/calc rather than translateY(-50%): the parallax handler
   assigns style.transform outright, which would wipe out a centering
   transform and drop the vials below the fold. */
.hero__vials{
  position:absolute; right:0; top:calc(64% - min(300px,34vh));
  width:min(660px,48vw); height:min(600px,68vh);
  z-index:2; pointer-events:none; will-change:transform;
}
.hvial{ position:absolute; top:50%; display:block; }
.hvial img{
  display:block; height:100%; width:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.62)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  animation:bob 6s ease-in-out infinite;
}
/* Rotation lives on the wrapper so the bob keyframes only touch translateY. */
.hvial--c{ left:53%; height:100%; transform:translate(-50%,-50%) rotate(0deg); z-index:3; }
.hvial--l{ left:22%; height:74%; transform:translate(-50%,-44%) rotate(-8deg); z-index:2; }
.hvial--r{ left:84%; height:74%; transform:translate(-50%,-44%) rotate(8deg); z-index:2; }
.hvial--c img{ animation-duration:6.7s; }
.hvial--l img{ animation-duration:6s; animation-delay:-.6s; }
.hvial--r img{ animation-duration:7.4s; animation-delay:-1.2s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

.hvial__ground{
  position:absolute; left:50%; bottom:3%; width:66%; height:30px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),rgba(0,0,0,.26) 44%,transparent 72%);
  filter:blur(13px); animation:ground 6.7s ease-in-out infinite;
}
@keyframes ground{
  0%,100%{ transform:translateX(-50%) scaleX(1); opacity:.9; }
  50%    { transform:translateX(-50%) scaleX(.9); opacity:.62; }
}
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--void) 4%,rgba(10,14,22,.55) 38%,transparent 66%),
             linear-gradient(0deg,var(--void),transparent 26%);
}

/* Scrim for the copy. A negative z-index child stays inside .hero__content's
   own stacking context, so it covers the vials (z-index 2) while remaining
   behind the text — which the page vignette cannot do, since that paints
   underneath the vials. Keeps the steel <em> legible over bright glass. */
.hero__content::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:0; bottom:0; left:-25vw; width:135%;
  background:linear-gradient(90deg,var(--void) 20%,rgba(10,14,22,.86) 48%,transparent 82%);
}
.hero__content{
  position:relative; z-index:3;
  min-height:100vh; max-width:var(--maxw); margin:0 auto;
  padding:120px var(--pad-x) 80px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero__eyebrow{
  font-family:var(--f-mono); font-size:clamp(11px,1.1vw,14px); letter-spacing:.26em;
  text-transform:uppercase; color:rgba(244,246,248,.62);
  display:inline-flex; align-items:center; gap:16px; margin-bottom:26px;
}
.hero__eyebrow::before{ content:''; width:40px; height:1px; background:var(--steel); flex:none; }

/* No ch-based cap: each masked line must sit on ONE visual line or the
   slide-up reveal reads as an accident. */
.hero h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(34px,5.2vw,74px); line-height:.94; letter-spacing:.015em;
  text-transform:uppercase; color:#dfe4ea;
}
.mline{ display:block; overflow:hidden; }
.mline > span{ display:block; transform:translateY(116%); }
.mline.play > span{
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.mline:nth-child(2).play > span{ transition-delay:.22s; }

.hero__sub{
  margin-top:28px; max-width:44ch; font-size:15px; font-weight:300;
  color:rgba(244,246,248,.64); line-height:1.72;
}

.hero__search{
  margin-top:36px; width:100%; max-width:480px;
  display:flex; align-items:center; gap:10px;
  padding:7px 7px 7px 20px; border-radius:100px;
  background:rgba(244,246,248,.05); border:1px solid var(--line);
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.hero__search:focus-within{
  border-color:rgba(143,179,217,.5); background:rgba(244,246,248,.08);
  box-shadow:0 0 0 4px rgba(74,111,148,.12);
}
.hero__search svg{ width:16px; height:16px; color:rgba(244,246,248,.44); flex:none; }
.hero__search input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ink);
  font-size:13.5px; font-weight:300; padding:8px 0;
}
.hero__search input::placeholder{ color:rgba(244,246,248,.44); }
.hero__search button{
  flex:none; padding:13px 24px; border-radius:100px;
  background:var(--ink); color:var(--dark);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s ease,box-shadow .3s ease;
}
.hero__search button:hover{ background:#fff; box-shadow:0 8px 24px rgba(143,179,217,.2); }

.hero__cta{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(244,246,248,.3);
}
.hero__scroll i{ display:block; width:1px; height:42px; background:linear-gradient(var(--steel-soft),transparent); }

/* ==========================================================================
   3 — PHOTO BAND (the recon's video slot — one-for-one swap)
   ========================================================================== */
.herovideo{
  position:relative; width:100%; background:var(--black);
  line-height:0; font-size:0; overflow:hidden;
  aspect-ratio:21/9; max-height:900px;
}
.herovideo__v{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  filter:contrast(1.05) brightness(.95);
}
.herovideo__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,var(--void) 0%,rgba(10,14,22,.35) 12%,transparent 30%),
             linear-gradient(0deg,var(--void) 0%,rgba(10,14,22,.4) 12%,transparent 32%),
             radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(10,14,22,.5));
}
/* ==========================================================================
   4 — MARQUEE
   ========================================================================== */
.marquee{
  position:relative; width:100%; background:var(--black);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:mq 40s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__i{
  display:inline-flex; align-items:center;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(13px,1.5vw,16px); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,246,248,.64); padding:0 26px; white-space:nowrap;
}
.marquee__i::after{ content:'✦'; margin-left:26px; font-size:9px; color:var(--steel); }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   5 — PRODUCTS
   ========================================================================== */
.products{ background:var(--cream); color:var(--dark); }
.products .sec__head{ margin-bottom:clamp(38px,5vw,62px); }

.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.card{ display:block; color:inherit; }
.card__img{
  position:relative; aspect-ratio:1/1.08; border-radius:12px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#111a29 44%,#070b12 82%);
  border:1px solid transparent;
  transition:border-color .45s ease,box-shadow .45s ease,background .45s ease;
  display:flex; align-items:center; justify-content:center;
}
.card:hover .card__img{
  background:radial-gradient(130% 100% at 50% 16%,#26374f,#16202f 44%,#090e17 82%);
  border-color:rgba(143,179,217,.4);
  box-shadow:0 0 0 1px rgba(143,179,217,.12),0 18px 46px rgba(7,11,18,.5),
             inset 0 0 60px rgba(74,111,148,.18);
}
.card__ghost{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(38px,7vw,62px); letter-spacing:.06em; text-transform:uppercase;
  /* Dropped back now the vial carries the card's identity. */
  color:rgba(143,179,217,.045); white-space:nowrap; pointer-events:none;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),color .45s ease;
}
.card:hover .card__ghost{ transform:scale(1.06); color:rgba(143,179,217,.065); }
.card__vial{
  position:relative; z-index:2;
  height:84%; width:auto; max-width:66%; object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .45s ease;
}
.card:hover .card__vial{
  transform:scale(1.05) translateY(-4px);
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.62));
}
.card__shop{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:var(--panel); color:var(--ink);
  padding:13px 16px; text-align:center;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transform:translateY(101%); transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__shop,.card:focus-visible .card__shop{ transform:translateY(0); }

.card__body{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:16px 2px 0;
}
.card__name{
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.25;
}
.card__cat{
  margin-top:5px; font-size:11.5px; max-width:26ch; line-height:1.5;
  color:rgba(19,26,38,.58);
}
.card__wm{
  display:inline-block; margin-top:7px; padding:2px 8px; border-radius:100px;
  border:1px solid rgba(74,111,148,.32);
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(74,111,148,.85);
}
.card__price{
  font-family:var(--f-display); font-weight:800; font-size:18px;
  white-space:nowrap; letter-spacing:.02em;
}
.products__foot{ display:flex; justify-content:center; margin-top:clamp(40px,5vw,64px); }

/* ==========================================================================
   6 — CATEGORY STAGE
   ========================================================================== */
.catstage{
  position:relative; height:100vh; min-height:660px; overflow:hidden;
  background:radial-gradient(120% 90% at 72% 42%,#16202f,#0c1220 55%,#070b12 82%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
#catArt{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.catstage__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(143,179,217,.16) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
  opacity:.5;
}
.catstage__in{
  position:relative; z-index:3; height:100%;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(88px,13vh,124px) var(--pad-x) clamp(22px,4vh,38px);
  display:grid; grid-template-rows:auto 1fr auto;
}
.catstage__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.catstage__count{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(244,246,248,.42);
}
.catstage__count b{ color:var(--steel-soft); font-weight:600; }

.chero__wrap{ position:relative; }
.chero{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  max-width:min(32ch,54%);
}
.chero.swap{ animation:cswapin .7s cubic-bezier(.22,.61,.36,1); }
@keyframes cswapin{
  from{ opacity:0; transform:translateY(calc(-50% + 16px)); filter:blur(9px); }
  to{ opacity:1; transform:translateY(-50%); filter:blur(0); }
}
.chero__ref{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel-soft);
}
.chero__name{
  margin-top:14px; font-family:var(--f-display); font-weight:800;
  font-size:clamp(30px,4.6vw,66px); line-height:.98; letter-spacing:.015em;
  text-transform:uppercase;
}
.chero__desc{
  margin-top:18px; max-width:38ch; font-size:13.5px; font-weight:300;
  line-height:1.75; color:rgba(244,246,248,.64);
}
.chero__cta{ margin-top:30px; }

.crail{ display:flex; gap:8px; }
.crail button{
  position:relative; flex:1 1 0; min-width:0;
  height:clamp(48px,7vh,72px); border-radius:6px;
  border:1px solid var(--line); background:rgba(244,246,248,.02);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:9px 11px; overflow:hidden;
  transition:border-color .4s ease,background .4s ease;
}
.crail button:hover{ border-color:var(--line-2); background:rgba(244,246,248,.05); }
.crail button.on{ border-color:rgba(143,179,217,.55); background:rgba(74,111,148,.14); }
.cnm{
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,246,248,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; text-align:left;
}
.crail button.on .cnm{ color:var(--ink); }
.cno{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:rgba(244,246,248,.34);
}
.crail button.on .cno{ color:var(--steel-soft); }
.cfill{
  position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--steel-soft);
}
.crail button.on .cfill.run{ animation:cfill 3s linear forwards; }
@keyframes cfill{ from{ width:0; } to{ width:100%; } }

/* ==========================================================================
   7 — PURITY
   ========================================================================== */
.purity{ background:var(--cream); color:var(--dark); text-align:center; }
.purity__title{
  font-family:var(--f-edit); font-style:italic; font-weight:500;
  font-size:clamp(36px,5.6vw,72px); line-height:1.04; max-width:16ch;
  margin:22px auto 0;
}
.purity__sub{
  margin:22px auto 0; max-width:52ch; font-size:14px; font-weight:300;
  color:rgba(19,26,38,.62); line-height:1.75;
}
.purity__grid{
  margin-top:clamp(46px,6vw,74px);
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(24px,4vw,56px); align-items:center; text-align:left;
}
.purity__col{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px); }
.purity__viz{
  position:relative; width:min(440px,92vw); min-height:440px;
  display:flex; align-items:center; justify-content:center; will-change:transform;
}
#dnaCanvas{ display:block; width:100%; height:100%; position:absolute; inset:0; }
/* Vial sits over the helix, tilted 14deg per recon. Sized by HEIGHT, not the
   recon's 56% width: this cutout is a 0.46 aspect, so 56% width would make it
   535px tall — overflowing the viz and crowding the stat beneath it. */
.purity__vial{
  position:relative; z-index:2; height:82%; max-height:380px; width:auto;
  transform:rotate(14deg);
  filter:drop-shadow(0 24px 30px rgba(19,26,38,.34));
}
.purity__mark circle{ fill:currentColor; }
.purity__mark line{ stroke:currentColor; stroke-width:1.1; opacity:.6; }
.purity__mark .ring{ fill:none; stroke:currentColor; stroke-width:1; opacity:.28; }

.trust{
  border:1px solid var(--line-dk); border-radius:14px; padding:24px;
  background:rgba(255,255,255,.5);
  transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .42s ease,border-color .42s ease;
}
.trust:hover{
  transform:translateY(-4px); border-color:rgba(74,111,148,.3);
  box-shadow:0 14px 38px rgba(19,26,38,.1);
}
.trust__hd{ display:flex; align-items:center; gap:12px; }
.trust__ico{
  width:34px; height:34px; flex:none; border-radius:9px;
  border:1px solid var(--line-dk); display:flex; align-items:center; justify-content:center;
  color:var(--steel);
}
.trust__ico svg{ width:16px; height:16px; }
.trust h3{
  font-family:var(--f-display); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.3;
}
.trust p{ margin-top:14px; font-size:13px; font-weight:300; line-height:1.7; color:rgba(19,26,38,.66); }
.trust__tag{
  display:inline-block; margin-top:16px; padding:5px 12px; border-radius:100px;
  border:1px solid var(--line-dk);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(19,26,38,.55);
}

.purity__stat{ margin-top:clamp(46px,6vw,64px); }
.purity__num{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(46px,6.4vw,80px); line-height:1; color:var(--steel);
  letter-spacing:.01em;
}
.purity__num sup{ font-size:.5em; vertical-align:super; }
.purity__lbl{
  margin-top:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(19,26,38,.5);
}

/* ==========================================================================
   8 — FINALE
   ========================================================================== */
.finale{
  position:relative; background:var(--void); overflow:hidden; text-align:center;
  padding:clamp(96px,15vh,180px) 0;
}
#finaleCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.finale__mq{
  position:absolute; left:0; width:100%; overflow:hidden; pointer-events:none;
  font-family:var(--f-edit); font-style:italic; font-weight:400;
  font-size:clamp(40px,8vw,104px); line-height:1.1;
  color:rgba(244,246,248,.06); white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.finale__mq--a{ top:4%; }
.finale__mq--b{ bottom:4%; }
.finale__mq span{ display:inline-block; padding-right:.4em; }
.finale__mq--a span{ animation:gmqA 44s linear infinite; }
.finale__mq--b span{ animation:gmqB 52s linear infinite; }
@keyframes gmqA{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes gmqB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.finale__in{
  position:relative; z-index:3; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad-x);
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.finale h2{
  font-family:var(--f-edit); font-style:italic; font-weight:500;
  font-size:clamp(36px,6vw,84px); line-height:1.06; max-width:15ch;
}
.finale h2 em{
  font-style:normal; font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; color:var(--steel-soft); letter-spacing:.02em;
}
.finale__body{
  max-width:48ch; font-size:14px; font-weight:300; line-height:1.78;
  color:rgba(244,246,248,.62);
}
.finale__cta{ margin-top:8px; }

/* ==========================================================================
   9 — FOOTER
   ========================================================================== */
.foot{
  background:var(--void); border-top:1px solid var(--line);
  position:relative; z-index:4;
}
.foot__in{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,6vw,84px) var(--pad-x) 0;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:36px;
}
.foot__brand .brand{ margin-bottom:20px; }
.foot__brand p{
  font-size:12.5px; font-weight:300; line-height:1.8; max-width:34ch;
  color:rgba(244,246,248,.48);
}
.foot h4{
  font-family:var(--f-mono); font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,246,248,.38); margin-bottom:16px;
}
.foot li + li{ margin-top:10px; }
.foot li a,.foot li span{
  font-size:12.5px; font-weight:300; color:rgba(244,246,248,.62); line-height:1.5;
  transition:color .3s ease;
}
.foot li a:hover{ color:var(--steel-soft); }
.foot li span{ color:rgba(244,246,248,.45); }

.foot__bar{
  max-width:var(--maxw); margin:0 auto;
  margin-top:clamp(40px,5vw,64px);
  padding:22px var(--pad-x); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:rgba(244,246,248,.58); /* was .38 — 3.36:1 failed AA for small text (a11y 8/27) */
}

/* ==========================================================================
   GATE — researcher verification interstitial
   ========================================================================== */
.gatebody{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; position:relative; overflow:hidden;
}
.gate__wash{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.gate__wash::before,.gate__wash::after{ content:''; position:absolute; border-radius:50%; }
.gate__wash::before{
  width:70vw; height:70vw; left:-18vw; top:-22vw;
  background:radial-gradient(circle,rgba(74,111,148,.2),transparent 62%);
}
.gate__wash::after{
  width:64vw; height:64vw; right:-16vw; bottom:-24vw;
  background:radial-gradient(circle,rgba(143,179,217,.13),transparent 64%);
}

.gate{
  position:relative; z-index:2; width:100%; max-width:520px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.gate .brand{ margin-bottom:34px; gap:14px; }
.gate .brand__mark{ width:14px; height:14px; }
.gate .brand__name{ font-size:22px; }
.gate .brand__sub{ font-size:9px; }

.gate__card{
  width:100%; padding:clamp(28px,5vw,44px);
  border:1px solid var(--line); border-radius:18px;
  background:rgba(20,27,42,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.gate__eyebrow{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--steel-soft);
}
.gate h1{
  margin-top:18px; font-family:var(--f-display); font-weight:800;
  font-size:clamp(28px,4.6vw,40px); line-height:1.06; letter-spacing:.02em;
  text-transform:uppercase;
}
.gate__sub{
  margin-top:16px; font-size:13.5px; font-weight:300; line-height:1.75;
  color:rgba(244,246,248,.6);
}

.gate__checks{ margin-top:28px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.gate__ck{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  padding:15px 16px; border:1px solid var(--line); border-radius:11px;
  background:rgba(244,246,248,.03);
  transition:border-color .3s ease,background .3s ease;
}
.gate__ck:hover{ border-color:var(--line-2); }
.gate__ck input{
  appearance:none; -webkit-appearance:none; flex:none; margin:1px 0 0;
  width:17px; height:17px; border-radius:4px;
  border:1px solid rgba(244,246,248,.34); background:transparent;
  cursor:pointer; position:relative; transition:.25s ease;
}
.gate__ck input:checked{ background:var(--steel); border-color:var(--steel); }
.gate__ck input:checked::after{
  content:''; position:absolute; left:5px; top:1px;
  width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.gate__ck span{ font-size:12.5px; font-weight:300; line-height:1.65; color:rgba(244,246,248,.76); }
.gate__ck strong{ font-weight:500; color:var(--ink); }
.gate__ck:has(input:checked){ border-color:rgba(143,179,217,.4); background:rgba(74,111,148,.1); }

.gate__go{
  width:100%; margin-top:22px; justify-content:center;
  padding:17px 24px; border-radius:100px;
  background:var(--ink); color:var(--dark);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; transition:.3s ease;
}
.gate__go svg{ width:13px; height:13px; transition:transform .3s ease; }
.gate__go:hover:not(:disabled) svg{ transform:translateX(4px); }
.gate__go:disabled{
  background:rgba(244,246,248,.09); color:rgba(244,246,248,.3); cursor:not-allowed;
}

.gate__note{
  margin-top:22px; font-size:11px; font-weight:300; line-height:1.7;
  color:rgba(244,246,248,.38);
}
.gate__exit{
  margin-top:26px; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,246,248,.4);
  border-bottom:1px solid rgba(244,246,248,.18); padding-bottom:3px;
  transition:color .3s ease,border-color .3s ease;
}
.gate__exit:hover{ color:var(--steel-soft); border-color:var(--steel-soft); }

.gate__hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; opacity:0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .chero{ max-width:min(32ch,62%); }
}
@media (max-width:1000px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .foot__in{ grid-template-columns:1.3fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .purity__grid{ grid-template-columns:1fr; justify-items:center; }
  .purity__viz{ order:-1; }
  .purity__col{ width:100%; max-width:560px; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .hero__ridge{ width:min(88vw,620px); opacity:.3; }
  /* Vials recede behind the copy on phones rather than competing with it. */
  /* height changes here, so the centring offset must change with it */
  .hero__vials{ right:-4vw; width:min(440px,88vw); height:46vh; top:calc(50% - 23vh); opacity:.48; }
  .hvial--l,.hvial--r{ height:70%; }
  .hero__vignette{
    background:linear-gradient(90deg,var(--void) 10%,rgba(10,14,22,.6) 50%,rgba(10,14,22,.2) 80%),
               linear-gradient(0deg,var(--void),transparent 30%);
  }
  .catstage{ height:auto; min-height:0; }
  .catstage__in{ display:flex; flex-direction:column; gap:38px; }
  .chero__wrap{ min-height:0; }
  .chero{ position:static; transform:none; max-width:100%; }
  .chero.swap{ animation:cswapinM .7s cubic-bezier(.22,.61,.36,1); }
  @keyframes cswapinM{
    from{ opacity:0; transform:translateY(16px); filter:blur(9px); }
    to{ opacity:1; transform:none; filter:blur(0); }
  }
  #catArt{ opacity:.42; }
  .herovideo{ height:clamp(400px,66vh,620px); }
}
@media (max-width:820px){
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__bar{ justify-content:flex-start; }
}
@media (max-width:640px){
  .cnm{ display:none; }
  .crail button{ align-items:center; justify-content:center; padding:9px 4px; }
  .crail{ gap:5px; }
  .hero__scroll{ display:none; }
  .card__body{ flex-direction:column; gap:8px; }
  .card__price{ font-size:16px; }
}
@media (max-width:560px){
  .hero__search{ flex-wrap:wrap; border-radius:22px; padding:12px 14px; }
  .hero__search input{ width:100%; }
  .hero__search button{ width:100%; }
}
/* Below this the longer masked line can no longer hold one visual line. */
@media (max-width:430px){
  .hero h1{ font-size:29px; }
}
@media (max-width:375px){
  .hero h1{ font-size:26px; }
}
@media (max-width:480px){
  .grid{ grid-template-columns:1fr; }
  /* Square tiles at full width make 8 stacked cards an endless scroll. */
  .card__img{ aspect-ratio:1/.68; }
  .card__ghost{ font-size:clamp(34px,11vw,52px); }
  .card__mol{ width:34%; }
  .foot__in{ grid-template-columns:1fr; }
  .herovideo{ height:clamp(360px,58vh,520px); }
  .herovideo__v{ object-position:center 55%; }
}

/* ==========================================================================
   Reduced motion — everything static, nothing broken
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .mline > span{ transform:none !important; }
  .marquee__track{ animation:none; transform:none; }
  .finale__mq span{ animation:none; }
  .cur,.cur-glow{ display:none !important; }
  .card__shop{ transform:translateY(0); }
  .hvial img,.hvial__ground{ animation:none; }
  .chero.swap{ animation:none; }
  .cfill{ display:none; }
  .grain{ display:none; }
}

/* ==========================================================================
   SHOP + PRODUCT (inner pages)
   Reuses the homepage tokens, type scale, buttons and .card component.
   ========================================================================== */

/* --- page header band (stands in for the hero on inner pages) ------------- */
.pagehead{
  position:relative; background:var(--void); overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:calc(clamp(96px,12vh,140px) + 28px) 0 clamp(34px,5vw,54px);
}
.pagehead__in{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
}
.pagehead h1{
  margin-top:18px; font-family:var(--f-display); font-weight:800;
  font-size:clamp(32px,4.6vw,60px); line-height:.98; letter-spacing:.015em;
  text-transform:uppercase;
}
.pagehead__sub{
  margin-top:16px; max-width:52ch; font-size:14px; font-weight:300;
  line-height:1.75; color:rgba(244,246,248,.6);
}
.pagehead__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(143,179,217,.16) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(60% 70% at 70% 40%,#000,transparent 78%);
  mask-image:radial-gradient(60% 70% at 70% 40%,#000,transparent 78%);
}

.crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,246,248,.4);
}
.crumb a{ transition:color .3s ease; }
.crumb a:hover{ color:var(--steel-soft); }
.crumb i{ font-style:normal; opacity:.45; }

/* --- shop toolbar + filters ---------------------------------------------- */
.shop{ background:var(--cream); color:var(--dark); }
.shop .sec{ padding-top:clamp(34px,4vw,52px); }

.shopbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,30px);
}
.shopsearch{
  display:flex; align-items:center; gap:10px; flex:1 1 300px; max-width:420px;
  padding:6px 6px 6px 18px; border-radius:100px;
  background:rgba(255,255,255,.7); border:1px solid var(--line-dk);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.shopsearch:focus-within{
  border-color:rgba(74,111,148,.5); box-shadow:0 0 0 4px rgba(74,111,148,.1);
}
.shopsearch svg{ width:15px; height:15px; color:rgba(19,26,38,.4); flex:none; }
.shopsearch input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--dark);
  font-size:13.5px; font-weight:300; padding:8px 0;
}
.shopsearch input::placeholder{ color:rgba(19,26,38,.42); }
.shopsearch button{
  flex:none; padding:11px 20px; border-radius:100px;
  background:var(--dark); color:var(--ink);
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.shopcount{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(19,26,38,.5); white-space:nowrap;
}

.filters{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:clamp(24px,3vw,34px); margin-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line-dk);
}
.filters button{
  padding:9px 16px; border-radius:100px;
  border:1px solid var(--line-dk); background:rgba(255,255,255,.5);
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(19,26,38,.62);
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.filters button:hover{ border-color:rgba(74,111,148,.45); color:var(--dark); }
.filters button.on{ background:var(--dark); border-color:var(--dark); color:var(--ink); }
.filters button i{ font-style:normal; opacity:.55; margin-left:7px; font-size:10px; }

.shop__empty{
  padding:clamp(50px,8vw,90px) 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* An author display: rule beats the UA [hidden] rule, so restate it or the
   empty state and the grid are both permanently visible. */
.shop__empty[hidden],.grid[hidden]{ display:none; }
.shop__empty h3{
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.18em; text-transform:uppercase;
}
.shop__empty p{ font-size:13px; font-weight:300; color:rgba(19,26,38,.6); max-width:40ch; }

/* --- product page --------------------------------------------------------- */
.pdp{ background:var(--cream); color:var(--dark); }
.pdp__grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,5vw,72px); align-items:start;
}

.pdp__gallery{ position:sticky; top:104px; }
.pdp__main{
  position:relative; aspect-ratio:1/1.02; border-radius:14px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#111a29 44%,#070b12 82%);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(74,111,148,.22);
}
.pdp__main img{
  position:relative; z-index:2; height:84%; width:auto; object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.6));
  transition:opacity .32s ease;
}
.pdp__main .card__ghost{ font-size:clamp(56px,9vw,104px); }
.pdp__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pdp__thumbs button{
  width:74px; aspect-ratio:1/1.02; border-radius:9px; overflow:hidden;
  border:1px solid var(--line-dk);
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#111a29 44%,#070b12 82%);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s ease,transform .3s ease;
}
.pdp__thumbs button img{ height:80%; width:auto; object-fit:contain; }
.pdp__thumbs button:hover{ transform:translateY(-2px); }
.pdp__thumbs button.on{ border-color:var(--steel); box-shadow:0 0 0 1px rgba(74,111,148,.35); }

/* group / stack images: the composite holds 2-4 vials, so it needs more
   width than a single portrait vial or it renders postage-stamp small. */
.card__vial--stack{ height:auto; width:94%; max-width:94%; max-height:86%; }
.pdp__main img.pdp__img--stack{ height:auto; width:88%; max-width:88%; max-height:84%; }

/* stack "what's inside" — per-vial mg breakdown on the PDP */
.pdpstack{ margin:4px 0 22px; padding:15px 17px; border:1px solid var(--line-dk);
  border-radius:12px; background:rgba(30,41,59,.28); }
.pdpstack__hd{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--steel); margin:0 0 11px; }
.pdpstack__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pdpstack__item{ display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:9px; background:rgba(7,11,18,.35); }
.pdpstack__thumb{ flex:0 0 auto; width:34px; height:42px; border-radius:6px;
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#0b1220 78%);
  display:flex; align-items:center; justify-content:center; }
.pdpstack__thumb img{ height:84%; width:auto; object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.pdpstack__name{ flex:1 1 auto; font-weight:600; font-size:14px; color:var(--ink); }
.pdpstack__mg{ flex:0 0 auto; font-family:var(--f-mono); font-size:12px;
  color:var(--steel); background:rgba(74,111,148,.14); border:1px solid rgba(74,111,148,.3);
  padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pdpstack__note{ margin:12px 2px 0; font-size:12px; color:var(--steel-soft); }

.pdp__cat{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--steel);
}
.pdp h1{
  margin-top:14px; font-family:var(--f-display); font-weight:800;
  font-size:clamp(28px,3.6vw,46px); line-height:1.02; letter-spacing:.015em;
  text-transform:uppercase;
}
.pdp__price{
  margin-top:16px; font-family:var(--f-display); font-weight:800;
  font-size:26px; letter-spacing:.01em;
}
.pdp__price small{
  display:inline-block; margin-left:10px; padding:3px 9px; border-radius:100px;
  border:1px solid rgba(74,111,148,.32);
  font-family:var(--f-mono); font-size:8.5px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(74,111,148,.9); vertical-align:middle;
}
.pdp__desc{
  margin-top:18px; font-size:13.5px; font-weight:300; line-height:1.8;
  color:rgba(19,26,38,.68); max-width:52ch;
}

.pdp__label{
  margin-top:26px; margin-bottom:11px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(19,26,38,.5);
}
.sizes{ display:flex; gap:8px; flex-wrap:wrap; }
.sizes button{
  padding:11px 17px; border-radius:100px; border:1px solid var(--line-dk);
  background:rgba(255,255,255,.6); color:rgba(19,26,38,.7);
  font-size:11.5px; font-weight:500; letter-spacing:.1em;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.sizes button:hover{ border-color:rgba(74,111,148,.45); color:var(--dark); }
.sizes button.on{ background:var(--dark); border-color:var(--dark); color:var(--ink); }
.sizes button b{ font-weight:600; }
.sizes button span{ opacity:.6; margin-left:7px; font-size:10.5px; }

.buyrow{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; align-items:center; }
.qty{
  display:flex; align-items:center; border:1px solid var(--line-dk);
  border-radius:100px; background:rgba(255,255,255,.6); overflow:hidden;
}
.qty button{
  width:42px; height:46px; font-size:15px; color:rgba(19,26,38,.6);
  transition:background .25s ease,color .25s ease;
}
.qty button:hover{ background:rgba(19,26,38,.06); color:var(--dark); }
.qty input{
  width:44px; height:46px; text-align:center; border:0; background:none; outline:0;
  font-size:13px; font-weight:500; color:var(--dark);
  -moz-appearance:textfield; appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.pdp__add{
  flex:1 1 220px; justify-content:center; padding:16px 30px; border-radius:100px;
  background:var(--dark); color:var(--ink);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:11px;
}
.pdp__add svg{ width:13px; height:13px; flex:none; }
.pdp__add:disabled{
  background:rgba(19,26,38,.12); color:rgba(19,26,38,.4); cursor:not-allowed;
}

.ruo{
  margin-top:18px; padding:13px 16px; border-radius:10px;
  border:1px solid rgba(74,111,148,.26); background:rgba(74,111,148,.06);
  font-size:11.5px; font-weight:300; line-height:1.65; color:rgba(19,26,38,.66);
}

.coa{
  margin-top:22px; padding:20px; border-radius:14px;
  border:1px solid var(--line-dk); background:rgba(255,255,255,.55);
}
.coa__hd{ display:flex; align-items:center; gap:11px; }
.coa__hd svg{ width:16px; height:16px; color:var(--steel); flex:none; }
.coa__hd h3{
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase;
}
.coa__batch{
  margin-top:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  color:rgba(19,26,38,.6);
}
.coa__batch b{ color:var(--dark); font-weight:600; }
.coa__row{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.coa__row input{
  flex:1 1 150px; min-width:0; padding:11px 15px; border-radius:100px;
  border:1px solid var(--line-dk); background:#fff; outline:0;
  font-size:12.5px; font-weight:300; color:var(--dark);
}
.coa__row input:focus{ border-color:rgba(74,111,148,.5); }
.coa__row button{
  flex:none; padding:11px 20px; border-radius:100px;
  border:1px solid var(--line-dk); background:rgba(255,255,255,.7);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(19,26,38,.7); transition:border-color .3s ease,color .3s ease;
}
.coa__row button:hover{ border-color:var(--steel); color:var(--dark); }
.coa__note{
  margin-top:12px; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(19,26,38,.38);
}

/* --- accordion ------------------------------------------------------------ */
.acc{ margin-top:clamp(38px,5vw,60px); border-top:1px solid var(--line-dk); }
.acc__item{ border-bottom:1px solid var(--line-dk); }
.acc__hd{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 2px; text-align:left;
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dark);
}
.acc__hd i{
  font-style:normal; font-size:17px; font-weight:300; line-height:1;
  color:var(--steel); transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.acc__item.open .acc__hd i{ transform:rotate(45deg); }
.acc__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.acc__item.open .acc__body{ grid-template-rows:1fr; }
.acc__body > div{ overflow:hidden; }
.acc__body p{
  padding:0 2px 22px; max-width:66ch;
  font-size:13px; font-weight:300; line-height:1.8; color:rgba(19,26,38,.68);
}

@media (max-width:900px){
  .pdp__grid{ grid-template-columns:1fr; }
  .pdp__gallery{ position:static; }
}
@media (max-width:560px){
  .shopsearch{ max-width:none; }
  .buyrow{ flex-direction:column; align-items:stretch; }
  .qty{ align-self:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .acc__body{ transition:none; }
  .pdp__thumbs button:hover{ transform:none; }
}

/* ==========================================================================
   POLICY PROSE / CART / CHECKOUT / COA LIBRARY
   ========================================================================== */

/* --- long-form policy prose ---------------------------------------------- */
.prose{ max-width:74ch; margin:0 auto; } /* centered — doc pages sat hard-left in the 1280px section (visual review 8/27) */
.prose h2{
  margin:clamp(34px,4vw,48px) 0 14px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(15px,1.8vw,19px); letter-spacing:.1em; text-transform:uppercase;
  line-height:1.35;
}
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 15px; font-size:14px; font-weight:300; line-height:1.85; color:rgba(19,26,38,.72); }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-bottom:9px; font-size:14px; font-weight:300; line-height:1.8; color:rgba(19,26,38,.72); }
.prose strong{ font-weight:600; color:var(--dark); }
.prose hr{ margin:34px 0; border:0; border-top:1px solid var(--line-dk); }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:13px; }
.prose th,.prose td{
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-dk);
  font-weight:300; color:rgba(19,26,38,.72);
}
.prose th{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:rgba(19,26,38,.5);
}
.prose blockquote{
  margin:0 0 26px; padding:15px 18px; border-radius:11px;
  border:1px solid rgba(203,132,54,.35); background:rgba(203,132,54,.08);
}
.prose blockquote p{ margin:0; font-size:12.5px; color:rgba(19,26,38,.75); }

/* Unresolved copy that still needs the client or an attorney. Loud on purpose —
   these must never reach production unnoticed. */
.ph{
  background:rgba(203,132,54,.18); color:#7a4a12;
  padding:1px 5px; border-radius:4px;
  font-family:var(--f-mono); font-size:.88em; letter-spacing:.02em;
}

.policymeta{
  margin-bottom:clamp(24px,3vw,34px); padding-bottom:20px;
  border-bottom:1px solid var(--line-dk);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(19,26,38,.45);
}

/* --- cart ----------------------------------------------------------------- */
.cart{ background:var(--cream); color:var(--dark); }
.cart__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }

.line{
  display:grid; grid-template-columns:92px 1fr auto; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--line-dk); align-items:center;
}
.line__img{
  width:92px; aspect-ratio:1/1.02; border-radius:10px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#111a29 44%,#070b12 82%);
  display:flex; align-items:center; justify-content:center;
}
.line__img img{ height:80%; width:auto; object-fit:contain; }
.line__name{
  font-family:var(--f-display); font-weight:700; font-size:14px;
  letter-spacing:.05em; text-transform:uppercase;
}
.line__meta{ margin-top:5px; font-size:11.5px; color:rgba(19,26,38,.55); }
.line__ctl{ display:flex; align-items:center; gap:14px; margin-top:11px; }
.line__rm{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(19,26,38,.45); border-bottom:1px solid transparent; transition:.3s ease;
}
.line__rm:hover{ color:#8c2f2f; border-bottom-color:#8c2f2f; }
.line__price{ font-family:var(--f-display); font-weight:800; font-size:16px; white-space:nowrap; }

.summary{
  padding:24px; border-radius:14px;
  border:1px solid var(--line-dk); background:rgba(255,255,255,.6);
  position:sticky; top:104px;
}
.summary h2{
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
}
.summary__row{
  display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  font-size:13px; font-weight:300; color:rgba(19,26,38,.7);
}
.summary__row--total{
  margin-top:8px; padding-top:16px; border-top:1px solid var(--line-dk);
  font-size:15px; color:var(--dark);
}
.summary__row--total b{ font-family:var(--f-display); font-weight:800; font-size:20px; }
.summary__bar{ margin:16px 0 6px; height:3px; border-radius:100px; background:rgba(19,26,38,.1); overflow:hidden; }
.summary__fill{ height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--steel),var(--steel-soft)); transition:width .5s ease; }
.summary__ship{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(19,26,38,.55);
}
.summary__ship b{ color:var(--steel); }
.summary__go{
  width:100%; justify-content:center; margin-top:20px;
  padding:16px 24px; border-radius:100px; background:var(--dark); color:var(--ink);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.summary__go svg{ width:13px; height:13px; flex:none; }
.summary__go:disabled{ background:rgba(19,26,38,.12); color:rgba(19,26,38,.4); cursor:not-allowed; }

.emptybox{
  padding:clamp(46px,7vw,80px) 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:15px;
}
.emptybox[hidden]{ display:none; }
.emptybox svg{ width:32px; height:32px; color:rgba(74,111,148,.45); }
.emptybox h3{
  font-family:var(--f-display); font-weight:700; font-size:14px;
  letter-spacing:.18em; text-transform:uppercase;
}
.emptybox p{ font-size:13px; font-weight:300; color:rgba(19,26,38,.6); max-width:42ch; line-height:1.75; }

/* --- checkout ------------------------------------------------------------- */
.co{ background:var(--cream); color:var(--dark); }
.co__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.co__block{ margin-bottom:clamp(28px,3.5vw,40px); }
.co__block h2{
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:11px;
}
.co__block h2 em{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; color:rgba(19,26,38,.4);
  font-weight:400;
}
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(19,26,38,.5);
}
.field input,.field select{
  padding:13px 15px; border-radius:10px; border:1px solid var(--line-dk);
  background:rgba(255,255,255,.75); outline:0; color:var(--dark);
  font-size:13.5px; font-weight:300; font-family:var(--f-body);
}
.field input:focus,.field select:focus{
  border-color:rgba(74,111,148,.5); box-shadow:0 0 0 3px rgba(74,111,148,.1);
}
.field input::placeholder{ color:rgba(19,26,38,.35); }

.paynote{
  padding:20px; border-radius:14px;
  border:1px dashed rgba(203,132,54,.5); background:rgba(203,132,54,.07);
}
.paynote h3{
  font-family:var(--f-display); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px;
}
.paynote p{ font-size:13px; font-weight:300; line-height:1.75; color:rgba(19,26,38,.7); }
.paynote p + p{ margin-top:10px; }

/* --- COA library ---------------------------------------------------------- */
.coalib{ background:var(--cream); color:var(--dark); }
.lookup{
  display:flex; gap:10px; flex-wrap:wrap; max-width:560px;
  margin-bottom:clamp(26px,3vw,36px);
}
.lookup input{
  flex:1 1 240px; min-width:0; padding:15px 20px; border-radius:100px;
  border:1px solid var(--line-dk); background:rgba(255,255,255,.75); outline:0;
  font-size:14px; font-weight:300; font-family:var(--f-mono); letter-spacing:.06em;
  color:var(--dark);
}
.lookup input:focus{ border-color:rgba(74,111,148,.5); box-shadow:0 0 0 4px rgba(74,111,148,.1); }
.lookup button{
  flex:none; padding:15px 28px; border-radius:100px;
  background:var(--dark); color:var(--ink);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.lookup__msg{
  margin-top:14px; font-size:13px; font-weight:300; line-height:1.7;
  color:rgba(19,26,38,.65);
}
.lookup__msg b{ font-family:var(--f-mono); font-weight:600; color:var(--dark); }

.coatable{ width:100%; border-collapse:collapse; font-size:13px; }
.coatable th{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-dk);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:400; color:rgba(19,26,38,.5);
}
.coatable td{
  padding:16px 14px; border-bottom:1px solid var(--line-dk);
  font-weight:300; color:rgba(19,26,38,.72);
}
.coatable tr.is-example td{ opacity:.55; }
.coatable .lot{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--dark); }
.coatable .dl{
  padding:8px 15px; border-radius:100px; border:1px solid var(--line-dk);
  background:rgba(255,255,255,.7);
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(19,26,38,.6);
}
.coatable .dl:disabled{ opacity:.5; cursor:not-allowed; }
.coawrap{ overflow-x:auto; }
.coatag{
  display:inline-block; padding:3px 9px; border-radius:100px;
  border:1px solid rgba(203,132,54,.45); background:rgba(203,132,54,.1);
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#7a4a12;
}

@media (max-width:900px){
  .cart__grid,.co__grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
}
@media (max-width:560px){
  .fields{ grid-template-columns:1fr; }
  .line{ grid-template-columns:70px 1fr; }
  .line__img{ width:70px; }
  .line__price{ grid-column:2; justify-self:start; margin-top:8px; }
}

.foot__legal{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.foot__legal a{ transition:color .3s ease; }
.foot__legal a:hover{ color:var(--steel-soft); }
@media (max-width:820px){ .foot__legal{ order:3; width:100%; } }

/* ==========================================================================
   PDP parity extras — tier pricing, badges, COA button, sticky buy bar,
   related compounds. (Added 8/27 parity pass vs reference product page.)
   ========================================================================== */
.tiers{ margin-top:22px; border:1px solid var(--line-dk); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.55); }
.tiers table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tiers th{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(19,26,38,.44); text-align:left; padding:10px 16px 8px; border-bottom:1px solid var(--line-dk); }
.tiers td{ padding:9px 16px; border-bottom:1px solid rgba(19,26,38,.07); }
.tiers tr:last-child td{ border-bottom:0; }
.tiers tr.on{ background:rgba(19,26,38,.92); color:var(--ink); }
.tiers td:nth-child(2),.tiers td:nth-child(3){ font-weight:600; }
.tiers td:last-child{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--steel); text-align:right; }
.tiers tr.on td:last-child{ color:var(--steel-soft); }
.tiers__note{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(19,26,38,.38); padding:8px 16px 10px; }

.pdp__coabtn{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; width:100%;
  justify-content:center; padding:14px 24px; border-radius:100px; border:1px solid rgba(19,26,38,.22);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dark);
  transition:.3s ease; }
.pdp__coabtn svg{ width:14px; height:14px; }
.pdp__coabtn:hover{ border-color:var(--steel); background:rgba(74,111,148,.08); }
.coa--lit{ outline:2px solid var(--steel-soft); outline-offset:3px; transition:outline .3s ease; }

.pdp__badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.pdp__badges li{ border:1px solid rgba(19,26,38,.14); border-radius:12px; padding:12px 10px;
  text-align:center; background:rgba(255,255,255,.5); }
.pdp__badges svg{ width:16px; height:16px; color:var(--steel); display:block; margin:0 auto 7px; }
.pdp__badges b{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; }
.pdp__badges span{ display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(19,26,38,.44); margin-top:3px; }

.related{ margin-top:clamp(56px,7vw,96px); }
.related__hd{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-bottom:clamp(28px,4vw,44px); }
.related__hd .eyebrow{ color:rgba(19,26,38,.44); }
.related__hd h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(26px,3.6vw,44px);
  line-height:1; letter-spacing:.02em; text-transform:uppercase; color:var(--dark); }
.grid--rel{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,26px); }
@media (max-width:1000px){ .grid--rel{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .grid--rel{ grid-template-columns:1fr; } }

.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:70; transform:translateY(110%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  background:rgba(10,14,22,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); }
.buybar.on{ transform:none; }
.buybar__in{ max-width:var(--maxw); margin:0 auto; padding:10px var(--pad-x);
  display:flex; align-items:center; gap:16px; }
.buybar__in img{ height:44px; width:auto; flex:none; }
.buybar__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
.buybar__meta b{ font-family:var(--f-display); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar__meta span{ font-size:13px; font-weight:600; color:var(--steel-soft); }
.buybar__add{ display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:100px;
  background:var(--ink); color:var(--dark); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap; transition:.3s ease; }
.buybar__add svg{ width:12px; height:12px; }
.buybar__add:hover{ background:#fff; }
@media (max-width:640px){
  .buybar__in img{ display:none; }
  .buybar__meta b{ font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){ .buybar{ transition:none; } }

/* ==========================================================================
   Shop light treatment — cream page, dark card tiles (reference-site parity).
   Scoped to .shop--light so index/product cards keep their dark styling.
   ========================================================================== */
.shopsearch--hero{ max-width:520px; margin-top:26px; }
.pagehead .shopsearch--hero{ display:flex; align-items:center; gap:10px;
  background:rgba(244,246,248,.06); border:1px solid var(--line);
  border-radius:100px; padding:6px 6px 6px 20px; transition:border-color .3s ease; }
.pagehead .shopsearch--hero:focus-within{ border-color:var(--steel-soft); }
.pagehead .shopsearch--hero svg{ width:15px; height:15px; color:rgba(244,246,248,.5); flex:none; }
.pagehead .shopsearch--hero input{ flex:1; min-width:0; background:none; border:0; outline:0;
  color:var(--ink); font-size:13.5px; padding:8px 4px; }
.pagehead .shopsearch--hero input::placeholder{ color:rgba(244,246,248,.38); }
.pagehead .shopsearch--hero button{ background:var(--ink); color:var(--dark);
  border-radius:100px; padding:11px 22px; font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; transition:.3s ease; }
.pagehead .shopsearch--hero button:hover{ background:#fff; }

.shop--light{ background:var(--cream); color:var(--dark); }
.shop--light .filters button{ border-color:rgba(19,26,38,.18); color:rgba(19,26,38,.62); }
.shop--light .filters button:hover{ border-color:rgba(19,26,38,.4); color:var(--dark); }
.shop--light .filters button.on{ background:var(--dark); border-color:var(--dark); color:var(--ink); }
.shop--light .filters button i{ color:var(--steel); }
.shop--light .filters button.on i{ color:var(--steel-soft); }
.shop--light .shopbar{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:18px 0 26px; }
.shop--light .shopcount{ color:rgba(19,26,38,.44); }
.shopsort select{ appearance:none; -webkit-appearance:none; background:transparent;
  border:1px solid rgba(19,26,38,.18); border-radius:100px; padding:10px 38px 10px 18px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dark); cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%23131a26' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.shopsort select:focus-visible{ outline:2px solid var(--steel-soft); outline-offset:2px; }

.shop--light .card{ background:transparent; border:0; }
.shop--light .card__body{ background:transparent; padding:14px 2px 0; }
.shop--light .card__name{ color:var(--dark); }
.shop--light .card__cat{ color:rgba(19,26,38,.46); }
.shop--light .card__price{ color:var(--dark); }
.shop--light .card__wm{ border-color:rgba(19,26,38,.2); color:rgba(19,26,38,.4); }
.shop--light .shop__empty{ color:var(--dark); }
.shop--light .shop__empty p{ color:rgba(19,26,38,.55); }
@media (max-width:640px){
  .shop--light .shopbar{ flex-direction:row; }
  .shopsort select{ padding:9px 34px 9px 14px; }
}

/* PDP spec table (Compound Information accordion) */
.specs{ width:100%; border-collapse:collapse; font-size:13px; }
.specs th{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(19,26,38,.42); text-align:left; padding:9px 18px 9px 0; white-space:nowrap; vertical-align:top;
  border-bottom:1px solid rgba(19,26,38,.08); width:1%; }
.specs td{ padding:9px 0; border-bottom:1px solid rgba(19,26,38,.08); }
.specs tr:last-child th,.specs tr:last-child td{ border-bottom:0; }

/* Cart page bulk-price tag */
.line__save{ font-style:normal; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel); margin-left:6px; }

/* Language toggle (i18n) */
.i18n-toggle{ display:flex; gap:2px; align-items:center; margin-right:6px; }
.i18n-toggle button{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:rgba(244,246,248,.5); padding:5px 7px; border-radius:6px; transition:.25s ease; }
.i18n-toggle button:hover{ color:var(--ink); }
.i18n-toggle button.on{ color:var(--dark); background:var(--ink); }
@media (max-width:520px){ .i18n-toggle button{ padding:5px 5px; font-size:9px; } }