/* shop.css — the OnimaChain Shop skin. Loaded LAST, over styles.css (original layout) and pages.css.
   Same DNA as onimachain.com: near-black ground, Barlow Condensed / DM Sans / JetBrains Mono, pill buttons,
   glow-outline glass cards. The shift for the shop: cyan leads, electric yellow is reserved for the primary
   action, amber glass vials are the hero object. Layout rules stay in styles.css; this file is colour,
   type, glass and the new hero. Delete this one link to get the previous look back. */
:root{
  color-scheme: dark;
  --ground:#0a0b0e; --yellow:#edff59; --orange:#ff762e; --cyan:#5fd8f2; --violet:#8f84ff;
  /* remap the original tokens */
  --porcelain:#0a0b0e; --paper:#11141a; --bone:#161a22; --ink:#f2eee6; --stone:#9aa3ad; --pebble:#6f7884;
  --amber:#5fd8f2; --amber-hi:#edff59; --amber-deep:#d9f6ff;
  --rule:rgba(242,238,230,.12);
  --glass:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 60%);
  --glass-edge:rgba(255,255,255,.12);
  --lift:0 50px 90px -40px #000,0 18px 30px -18px rgba(0,0,0,.7);
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --grain:none;
}
body{background:var(--ground);color:var(--ink);font-weight:400}
h1,h2,h3{font-weight:700;letter-spacing:-.005em;font-variation-settings:normal}
h2{font-size:clamp(44px,6.2vw,88px);line-height:.94}
h1 em,h2 em{font-style:normal;color:var(--cyan)}
.eyebrow{color:var(--orange);letter-spacing:.2em}
:focus-visible{outline-color:var(--yellow)}
select,input,textarea{color-scheme:dark}

/* ---------- top bar + header ---------- */
.notice{background:#14181f;color:var(--stone);border-bottom:1px solid var(--rule)}
.notice span:first-child{color:var(--ink)}
.notice b{color:var(--yellow)}
.skip{background:var(--yellow);color:#101610}
header.bar{background:rgba(10,11,14,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* the OnimaChain wordmark with SHOP set underneath, between two hairlines */
.logo{display:flex;flex-direction:column;align-items:stretch;gap:3px;line-height:1}
.logo img{display:block;height:25px;width:auto}
.logo i{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--display);font-style:normal;letter-spacing:.62em;text-transform:uppercase;text-indent:.62em;
  background:linear-gradient(90deg,#c9d3dc,#5fd8f2 50%,#8f84ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo i::before,.logo i::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(95,216,242,.7))}
.logo i::after{background:linear-gradient(90deg,rgba(143,132,255,.7),transparent)}
.bar nav{font-weight:500;font-size:14.5px;gap:22px}
.bar nav a.lib{color:var(--cyan)}
.cartbtn{border-color:var(--rule)}
.cartbtn:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.cartbtn b{background:var(--cyan);color:var(--ground)}
@media (max-width:760px){header.bar{background:rgba(10,11,14,.97)}}
.banner.demo{background:rgba(237,255,89,.07);color:#dfe8a8;border-color:var(--rule)}

/* ---------- buttons, chips ---------- */
.btn{border-color:var(--rule);font-weight:600;font-size:15px}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--yellow);color:#101610;border-color:var(--yellow);box-shadow:0 10px 40px -12px rgba(237,255,89,.55)}
.btn.primary:hover{background:#f6ff9a;border-color:#f6ff9a}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.chip{background:transparent;color:var(--stone)}
.chip[aria-pressed="true"]{background:var(--cyan);color:var(--ground);border-color:var(--cyan)}
.linkbtn,.coalink,.hint button{color:var(--cyan)}

/* ================= HERO: molecule, powder, sealed vial, batch report ================= */
.shero{position:relative;height:420vh}
.shero .pin{position:sticky;top:68px;height:calc(100vh - 68px);min-height:620px;overflow:hidden;isolation:isolate}
.shero .space{position:absolute;inset:0;z-index:0;background:
  radial-gradient(55% 60% at 78% 52%,rgba(95,216,242,.13),transparent 70%),
  radial-gradient(40% 45% at 85% 20%,rgba(143,132,255,.12),transparent 70%),
  radial-gradient(60% 40% at 30% 110%,rgba(255,118,46,.08),transparent 70%)}
.shero .sgrid{position:relative;z-index:4;height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.shero h1{font-size:clamp(46px,5.9vw,92px);line-height:.94;margin-top:22px}
.shero h1 .ln{display:block}
/* neon line: OnimaChain cyan → blue → violet flowing through the letters, with a glow that pulses behind them */
.shero h1 .neon{position:relative;display:inline-block;padding-bottom:.16em;margin-bottom:-.1em;background:linear-gradient(95deg,#7ff0ff,#3aa0ff 28%,#8f84ff 52%,#c46bff 70%,#7ff0ff);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:neonflow 8s linear infinite}
.shero h1 .neon::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(16px);opacity:.5;animation:neonpulse 2.6s ease-in-out infinite;pointer-events:none}
.shero h1 .neon::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(5px);opacity:.55;animation:neonpulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes neonflow{to{background-position:-240% 0}}
@keyframes neonpulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.shero h1 .neon,.shero h1 .neon::after,.shero h1 .neon::before{animation:none}}
.shero .lede{max-width:500px;margin-top:24px;color:var(--stone);font-size:19px}
.rail{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.rail button{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border-radius:999px;border:1px solid var(--rule);background:rgba(8,12,18,.55);color:var(--stone);cursor:pointer;transition:color .3s,border-color .3s,background .3s,box-shadow .3s,transform .16s}
.rail button:hover{border-color:var(--cyan);color:var(--ink)}.rail button:active{transform:scale(.96)}
.rail button.on{color:var(--ground);background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 24px -4px rgba(95,216,242,.7)}
.shero .hint{margin-top:16px;font:500 11px var(--mono);letter-spacing:.14em;color:var(--pebble);text-transform:uppercase}
.sstage{position:relative;height:min(74vh,640px);display:grid;place-items:center}
/* the molecule canvas floats over the whole stage; a second one (#molback) sits inside the vial */
.ruo-hero{margin-top:14px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--pebble)}
#molecule{position:absolute;inset:-6% -10%;width:120%;height:112%;z-index:6;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mcap{position:absolute;right:0;top:4%;z-index:7;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pebble);will-change:opacity}
/* ---- the 3D hero fills the whole pinned area; the copy sits over it ---- */
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity .9s ease}
.is3d #hero3d{opacity:1}
.is3d .hv,.is3d #molecule,.is3d .mcap,.is3d .space{visibility:hidden}
.is3d .pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,10,.82),rgba(4,6,10,.5) 34%,transparent 58%)}
.is3d .sstage{cursor:grab;touch-action:pan-y}.is3d .sstage.grabbing{cursor:grabbing}
/* the last frame: what it is, and what each part is */
.is3d .hfinal{left:auto;right:0;text-align:right}
.hfinal{position:absolute;left:50%;bottom:2%;z-index:7;opacity:0;text-align:center;white-space:nowrap;will-change:opacity,transform;pointer-events:none}
.hfinal b{display:block;font:700 clamp(20px,2vw,30px)/1 var(--display);letter-spacing:.02em;color:var(--ink);text-shadow:0 0 22px rgba(95,216,242,.55)}
.hfinal span{display:block;margin-top:6px;font:600 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#7fe6fb}
.callouts{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.callouts line{stroke:rgba(127,230,251,.7);stroke-width:1;stroke-dasharray:2 4}
.callouts span{position:absolute;left:0;top:0;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:5px 10px;border-radius:999px;
  border:1px solid rgba(127,230,251,.45);background:rgba(8,12,18,.7);backdrop-filter:blur(6px);white-space:nowrap}
/* ---- hero vial: a clear glass peptide vial as they really look — rounded shoulders, a narrow neck with the grey
   stopper showing through it, a crimped aluminium collar and a flat flip-off cap. Nothing is drawn inside.
   Layers: ground shadow → back wall → inner glow + back canvas (chain behind / inside) → front glass, label,
   neck, collar, cap ---- */
.hv{position:relative;width:clamp(168px,17.5vw,230px);aspect-ratio:1/2.2;will-change:opacity,transform}
#molback{position:absolute;left:-20%;right:-20%;top:-70%;bottom:0;width:140%;height:170%;z-index:2;pointer-events:none}
.hv .ground{position:absolute;left:-22%;right:-22%;bottom:-5.5%;height:11%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.45) 55%,transparent);filter:blur(5px)}
.hv .ground::after{content:"";position:absolute;left:18%;right:18%;top:-20%;height:120%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,216,242,.22),transparent);filter:blur(8px)}
.hv .back{position:absolute;left:3%;right:3%;top:24%;bottom:0;border-radius:22% 22% 11% 11%/8% 8% 4.5% 4.5%;z-index:1;
  background:linear-gradient(90deg,rgba(190,220,255,.24),rgba(190,220,255,.06) 10%,rgba(255,255,255,.02) 45%,rgba(190,220,255,.06) 88%,rgba(190,220,255,.22));
  box-shadow:inset 0 -26px 34px -18px rgba(0,0,0,.55)}
/* what is left after the chain goes in: a soft glow, not a powder and not a liquid */
.hv .charge{position:absolute;left:8%;right:8%;top:26%;bottom:3%;border-radius:40% 40% 14% 14%/16% 16% 6% 6%;z-index:1;opacity:0;will-change:opacity;
  background:radial-gradient(60% 45% at 50% 60%,rgba(95,216,242,.6),rgba(143,132,255,.3) 55%,transparent 78%);filter:blur(10px)}
.hv .front{position:absolute;inset:0;z-index:3;pointer-events:none}
/* wall thickness: an outer edge and an inner edge with a band of glass between them, brighter down each side */
.hv .wall{position:absolute;left:3%;right:3%;top:24%;bottom:0;border-radius:22% 22% 11% 11%/8% 8% 4.5% 4.5%;
  box-shadow:inset 0 0 0 1.5px rgba(225,240,255,.4),inset 0 0 0 5px rgba(200,225,255,.05),inset 0 0 0 6px rgba(225,240,255,.15),
    inset 11px 0 14px -8px rgba(255,255,255,.55),inset -11px 0 16px -8px rgba(150,220,240,.36),0 34px 60px -22px rgba(0,0,0,.9)}
.hv .shoulder{display:none}
/* the neck, with the stopper seen through the glass */
.hv .lip{position:absolute;left:20%;right:20%;top:17%;height:9%;
  background:linear-gradient(90deg,rgba(200,225,255,.34),rgba(200,225,255,.08) 22%,rgba(255,255,255,.04) 50%,rgba(200,225,255,.1) 78%,rgba(200,225,255,.32));
  box-shadow:inset 0 0 0 1px rgba(225,240,255,.3)}
.hv .stopper{position:absolute;left:23%;right:23%;top:16.5%;height:6%;border-radius:0 0 7px 7px;
  background:linear-gradient(90deg,#33383f,#858d96 40%,#a6aeb7 52%,#666d75 74%,#282c31)}
/* crimped aluminium collar with a rolled lower edge */
.hv .cap{position:absolute;left:10%;right:10%;top:7.6%;height:11%;border-radius:4px 4px 6px 6px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(90deg,#3d4349 0%,#8d969e 12%,#e8edf1 30%,#f9fbfc 42%,#b9c2c9 56%,#737c85 76%,#30353a 100%);
  box-shadow:0 10px 20px -10px #000,inset 0 1px 0 rgba(255,255,255,.7)}
.hv .cap::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-8%;height:24%;border-radius:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.25)),linear-gradient(90deg,#34393e,#99a2aa 14%,#f2f5f7 40%,#aab3ba 58%,#5f676f 80%,#2a2e32);
  box-shadow:0 3px 5px -2px rgba(0,0,0,.7)}
/* flat flip-off cap: wider than the collar, low, nothing sticking up */
.hv .cap i{position:absolute;left:-7%;right:-7%;top:-40%;height:47%;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 36%,rgba(0,0,0,.2)),linear-gradient(90deg,#3b3199,#6f62f0 26%,#a79dff 48%,#7d70ff 70%,#352b8c);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3),0 3px 6px -2px rgba(0,0,0,.6)}
.hv .shine{position:absolute;left:9.5%;top:35%;bottom:8%;width:6%;border-radius:12px;filter:blur(.6px);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.28) 30%,rgba(255,255,255,.04) 82%)}
.hv .shine2{position:absolute;right:8.5%;top:37%;bottom:16%;width:2%;border-radius:6px;background:linear-gradient(180deg,rgba(170,232,250,.6),rgba(170,232,250,.04))}
.hv .window{position:absolute;left:14%;top:26.5%;width:17%;height:6%;border-radius:50%;transform:rotate(-24deg);filter:blur(1.5px);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.03) 70%)}
/* thick glass base */
.hv .base{position:absolute;left:3%;right:3%;bottom:0;height:5%;border-radius:0 0 28px 28px/0 0 22px 22px;
  background:linear-gradient(180deg,rgba(220,238,255,0),rgba(220,238,255,.22) 35%,rgba(20,30,44,.7) 82%,rgba(6,9,14,.95));box-shadow:inset 0 2px 0 rgba(225,240,255,.4)}
/* label wraps the cylinder: curved top and bottom edges, shaded like a curved surface, logo on the front */
.hv .label{position:absolute;left:3.4%;right:3.4%;top:47%;height:39%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));will-change:opacity}
.hv .label svg{position:absolute;inset:0;width:100%;height:100%}
.hv .label .ltext{position:absolute;inset:17% 9% 11%;display:grid;align-content:space-between;justify-items:start;color:#f2eee6}
.hv .label .lmark{display:block;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(95,216,242,.45))}
.hv .label b{font:600 clamp(8px,.82vw,11px)/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7fe6fb}
.hv .label em{font:500 clamp(7.5px,.74vw,10px)/1.45 var(--mono);font-style:normal;color:#9aa6b2}
@media (max-width:900px){
  .shero{height:300vh}
  .shero .pin{min-height:0}
  .shero .sgrid{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:stretch;padding-top:22px;gap:0}
  .shero h1{font-size:clamp(44px,13vw,64px);margin-top:14px}
  .shero .lede{font-size:16px;margin-top:14px}
  .shero .ctas{margin-top:18px}
  .rail{margin-top:16px;gap:6px}.rail button{padding:7px 10px;font-size:10px}
  .shero .hint{display:none}
  .sstage{height:100%;min-height:0;align-items:end;padding-bottom:26px}
  .hv{width:min(92px,22vw)}
  .hv .label b{font-size:6.5px;letter-spacing:.12em}
  .hv .label em{display:none}
  .mcap{top:auto;bottom:6px;right:auto;left:0;font-size:9px}
  .hfinal,.is3d .hfinal{bottom:7%;left:0;right:0;text-align:center}.hfinal b{font-size:18px}
}

/* ---------- catalog / small vial: same glass recipe ---------- */
.v .cap{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 24%),linear-gradient(90deg,#0b0d10,#2f363e 30%,#8792a0 50%,#3a424b 66%,#0a0c0f)}
.v .crimp{background:linear-gradient(90deg,#3d4349,#aeb7be 16%,#f4f7f9 40%,#c9d1d7 55%,#6c757d 78%,#2c3136)}
.v .glass{border-radius:8px 8px 22px 22px/8px 8px 18px 18px;
  background:
    radial-gradient(130% 55% at 50% 104%,rgba(255,198,104,.6),transparent 62%),
    linear-gradient(90deg,rgba(28,13,0,.97) 0%,rgba(104,56,4,.84) 8%,rgba(196,122,22,.56) 24%,rgba(255,200,116,.3) 46%,rgba(204,128,26,.46) 68%,rgba(96,50,3,.86) 91%,rgba(22,10,0,.97) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,222,166,.3),inset 5px 0 9px -5px rgba(255,240,210,.5),inset -5px 0 10px -5px rgba(95,216,242,.55),inset 0 -18px 24px -10px rgba(0,0,0,.6)}
.v .glass::before{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.25) 32%,rgba(255,255,255,.03) 84%);width:7%;left:11%}
.v .glass::after{background:linear-gradient(180deg,rgba(143,233,255,.7),rgba(143,233,255,.05));width:2.4%;right:10%}
.v .cake{background:radial-gradient(ellipse at 50% 12%,#fff9ec,#f1d7a4 55%,#b98846);opacity:.6}
.v .label{--ink:#0a0b0e;--stone:#3d454d;color:#0a0b0e;background:linear-gradient(90deg,#c4cace 0%,#eef1f2 12%,#ffffff 42%,#eceff0 72%,#b9c0c5 100%)}
.v .label strong{font-weight:700;letter-spacing:.01em}
.v .cast{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.v .spill{background:radial-gradient(closest-side,rgba(255,176,60,.5),transparent)}

/* ---------- sheets ---------- */
.sheet-sec{box-shadow:0 -1px 0 var(--rule),0 -40px 70px -40px #000}
.s-paper{background:linear-gradient(180deg,#0f1218,#0b0d11)}
.s-bone{background:linear-gradient(180deg,#0d1016,#0a0b0e)}
.s-ink{background:linear-gradient(180deg,#10151d,#0a0c10);color:var(--ink)}
.trust{background:var(--rule)}
.trust div{background:#0e1117}
.trust b{font-weight:600}
.marquee b{font:700 21px var(--display);font-style:normal;letter-spacing:.02em}

/* purity chart: a lit instrument display instead of a paper printout */
.printout .paper{background:linear-gradient(180deg,#10151d,#0b0e13);border:1px solid rgba(95,216,242,.35);border-radius:18px;box-shadow:0 0 60px -22px var(--cyan),var(--lift)}
.printout .paper::before{background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(95,216,242,.05) 27px 28px)}
.printout .under{background:#0d1016;border:1px solid var(--rule);border-radius:18px;box-shadow:none}
.printout header{border-bottom-color:var(--rule);color:var(--stone)}
.gridg line{stroke:rgba(143,233,255,.12)}
.readout div{border-top-color:var(--rule)}
.readout b{color:var(--cyan)}

/* catalog */
.count{-webkit-text-stroke:1px rgba(242,238,230,.22);font-style:normal;font-weight:700}
.offer{box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);background:var(--glass),#10141b}
.offer strong{font:700 30px/1 var(--display)}
.offer strong em{font-style:normal;color:var(--cyan)}
.offer.hot{background:linear-gradient(160deg,rgba(95,216,242,.16),rgba(95,216,242,.03)),#10141b;color:var(--ink);border-color:rgba(95,216,242,.55);box-shadow:0 0 44px -18px var(--cyan)}
.offer.hot strong em{color:var(--yellow)}
.offer.hot span{color:var(--stone)}
.search input,.search select{background:#10141b}
.card{--c:var(--cyan);background:var(--glass),#0f1319;border-color:color-mix(in srgb,var(--c) 50%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 44px -20px var(--c),inset 0 1px 0 rgba(255,255,255,.09)}
.card:hover{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 70px -14px var(--c),inset 0 1px 0 rgba(255,255,255,.14)}
.card::after{background:radial-gradient(320px circle at var(--gx) var(--gy),color-mix(in srgb,var(--c) 22%,transparent),transparent 55%);mix-blend-mode:normal}
.card .viz::before{background:linear-gradient(90deg,transparent,rgba(242,238,230,.16),transparent)}
.card h3{font-size:36px;line-height:.95;font-weight:700}
.card h3 a{color:inherit}
.pill{color:color-mix(in srgb,var(--c) 70%,#fff)}
.ph{color:var(--yellow);border-color:rgba(237,255,89,.45)}
.badge{background:var(--cyan);color:var(--ground)}
.buy .price{font:700 30px var(--display)}
.buy select{background:#10141b}
.add{background:var(--yellow);color:#101610;font-weight:600}
.add:hover{background:#f6ff9a}
.add.off{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.add.off:hover{background:rgba(255,255,255,.05)}
/* milligrams + quantity on every card */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:grid;gap:6px;min-width:0}
.opt>span{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pebble)}
.opt select{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--rule);background:#10141b;color:var(--ink);padding:0 12px;font:500 14px var(--mono)}
.qtystep{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:44px;border-radius:12px;border:1px solid var(--rule);background:#10141b;overflow:hidden}
.qtystep button{height:44px;border:0;background:transparent;color:var(--ink);font-size:18px;cursor:pointer}
.qtystep button:hover{background:rgba(255,255,255,.07)}
.qtystep output{text-align:center;font:600 15px var(--mono)}
.ruo-line{font:500 10.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--pebble);border-top:1px solid var(--rule);padding-top:10px}
.legal-band{margin-top:34px;padding:16px 20px;border-radius:16px;border:1px solid var(--rule);background:#0e1117;font-size:13.5px;color:var(--stone);text-align:center}
.cart-legal{font-size:12.5px;line-height:1.5;color:var(--stone)}

/* quality track, certificates, FAQ, fine print */
.step{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015));border-color:var(--rule)}
.step .n{font:700 84px/.8 var(--display);font-style:normal;color:var(--cyan)}
.step p{color:var(--stone)}
.step .meta{color:var(--ink)}
.chain .eyebrow{color:var(--orange)}
.chain h2 em{color:var(--cyan)}
.chain .progress i{background:linear-gradient(90deg,var(--cyan),var(--yellow))}
.lookup input{background:#10141b;border-color:var(--rule)}
.certstack::before,.certstack::after{background:#161b23;box-shadow:none;border:1px solid var(--rule)}
.cert{--ink:#0a0b0e;--stone:#4a525a;--amber:#0b6f86;background:#f4f6f7;color:#0a0b0e;border-radius:10px}
.cert h3{font-size:32px}
.cert .seal{font:700 13px/1.1 var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.cert .demo-strip{color:#5e3a55;background:rgba(94,58,85,.08);border-color:#5e3a55}
.cert .linkbtn{color:#0b6f86}
.faq summary{font:700 26px/1.1 var(--display)}
.gap{background:var(--glass),#0f1319;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.gap h3{font-size:28px;line-height:1}

/* footer */
footer .big{font:700 clamp(56px,11vw,160px)/.85 var(--display);font-style:normal;letter-spacing:.02em;text-transform:uppercase;
  background:linear-gradient(90deg,#8fe9ff,#9a8cff 55%,#edff59);-webkit-background-clip:text;background-clip:text;color:transparent}
footer .big b{font-weight:700}
.fcols{border-color:var(--rule)}
.fcols h4{color:var(--orange)}
.fcols ul{color:var(--stone)}
.fcols a:hover{color:var(--ink)}
footer .legal{color:var(--stone);max-width:980px}
footer .legal strong{color:var(--ink);font-weight:600}
footer .legal a{color:var(--cyan)}
#legalFooter{display:grid;gap:10px}

/* modal, drawer, toast */
.modal{background:rgba(6,7,9,.72)}
.gate .box{background:var(--glass),#11141a;border-color:rgba(95,216,242,.4);box-shadow:0 0 80px -30px var(--cyan),var(--lift)}
.modal .box{border-radius:14px}
.scrim{background:rgba(0,0,0,.6)}
aside.drawer{background:#0f1218;box-shadow:-40px 0 80px -40px #000;border-left:1px solid var(--rule)}
.dh h2{font-size:36px}
.item .nm{font:700 24px var(--display)}
.df{background:#0b0d11}
.totals .grand{font:700 28px var(--display)}
.qty button{background:#10141b}
.checkout{background:var(--yellow);color:#101610;font-weight:600}
.checkout:hover:not(:disabled){background:#f6ff9a}
.toast{background:var(--cyan);color:var(--ground);font-weight:600}
.free-tag{color:var(--yellow)!important;border-color:rgba(237,255,89,.45)!important}

/* ---------- routed pages (pages.css) on dark ---------- */
.h1-page{font-weight:700;font-variation-settings:normal;line-height:.94}
.h1-page em{font-style:normal;color:var(--cyan)}
.h2-s{font-size:30px!important;line-height:1}
.h3-s{font:700 24px var(--display)}
.nav-toggle{border-color:var(--rule)}
.nav-open .bar nav{background:#0d1016}
.nav-open .bar nav a{font:700 30px var(--display)}
.doc-block{background:var(--glass),#0f1319;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ruo-block{background:linear-gradient(160deg,rgba(237,255,89,.09),rgba(237,255,89,.02)),#0f1319;color:var(--ink);border-color:rgba(237,255,89,.4)}
.ruo-block p{color:var(--stone)}
.pdp-vial{background:radial-gradient(80% 60% at 50% 85%,rgba(255,176,60,.18),transparent 70%),linear-gradient(180deg,#0f1319,#0b0d11);border:1px solid var(--rule)}
.pdp .price{font:700 44px var(--display)}
.pdp .price small,.demo-tag{color:var(--yellow);border-color:rgba(237,255,89,.5)}
.demo-strip{color:var(--yellow);background:rgba(237,255,89,.06);border-color:rgba(237,255,89,.45)}
.chip-s.ok{color:#7fe3a6;background:rgba(127,227,166,.08)}
.chip-s.wait{color:#ffc56b;background:rgba(255,197,107,.08)}
.chip-s.stop{color:#ff8a80;background:rgba(255,138,128,.08)}
.chip-s.demo{color:var(--violet);background:rgba(143,132,255,.1)}
mark.tc{background:rgba(237,255,89,.1);color:var(--yellow)}
.policy-body p,.policy-body li{color:#c6ccd3}
.rev,.err,.attorney,.warn-box{color:#ff9b91}
.attorney,.warn-box,.err-summary{background:rgba(255,138,128,.08)}
.err-summary{color:#ff9b91}
#page fieldset{background:rgba(255,255,255,.025)}
#page legend{font:700 24px var(--display)}
.field input,.field select,.field textarea,.assistant input,.field-inline input,.field-inline select{background:#10141b;border-color:var(--rule);color:var(--ink)}
.field.has-err input,.field.has-err select,.field.has-err textarea,#page fieldset.has-err{border-color:#ff8a80}
.status-card{background:var(--glass),#0f1319}
.tbl{background:rgba(255,255,255,.02)}
.tbl th{border-bottom-color:var(--rule)}
.stepper li.done{color:#7fe3a6}.stepper li.done span{background:#7fe3a6;color:var(--ground)}
.stepper li.now{color:var(--ink);border-color:var(--cyan)}.stepper li.now span{background:var(--cyan);color:var(--ground)}
.stepper li span{background:#1a1f28}
.result{background:#0f1319}
.result.ok{border-color:#7fe3a6}.result.wait{border-color:#ffc56b}.result.stop{border-color:#ff8a80}
.answer{background:rgba(127,227,166,.06);border-color:rgba(127,227,166,.3)}
.answer.blocked{background:rgba(255,197,107,.07);border-color:rgba(255,197,107,.35)}
.faq-mini summary{font:700 22px/1.2 var(--display)}
.cert .watermark{color:rgba(94,58,85,.1)}
/* internal console */
.admin-tabs button,.acts button,.admin-tbl button,.admin-tbl select,.claim-flags button,.int,.dash-card,.toggle{background:#10141b;color:var(--ink)}
.admin-tabs button[aria-selected="true"]{background:var(--cyan);color:var(--ground)}
.admin-msg.ok,.dash-card .ok dd,.int.ok,.gate-list .p{color:#7fe3a6}
.admin-msg.bad,.dash-card .bad dd,.int.bad,.gate-list .f,.flags .reject{color:#ff8a80}
.dash-card .warn dd,.int.warn,.flags .review{color:#ffc56b}
.wf li.now{background:var(--cyan);color:var(--ground)}

@media (prefers-reduced-motion:reduce){.shero{height:auto}.shero .pin{position:relative;top:0;height:auto;padding-block:40px}.rail{display:none}#hero3d{display:none}}

/* the quality heading sits in a grid; pin the column to the viewport so the wide scrolling track can't push the heading sideways */
.chain .pin{grid-template-columns:minmax(0,1fr)}

/* phone fit: header must not exceed the screen, and the vial should be in view before scrolling */
@media (max-width:760px){
  .bar .wrap{gap:10px}
  .logo img{height:20px}
  .logo i{font-size:9px}
  .cartbtn{padding:6px 8px 6px 12px;gap:7px}
  .shero .btn{padding:0 16px;font-size:14px;min-height:44px}
  .sstage{align-items:start;padding:58px 0 0}
  .hv{width:min(92px,22vw)}
  .opts{gap:8px}
}

/* ---- discounts (set in Ops, shown here) ---- */
.banner.sale{background:linear-gradient(90deg,rgba(237,255,89,.16),rgba(95,216,242,.10));color:var(--ink);border-color:rgba(237,255,89,.3)}
.banner.sale b{color:var(--yellow)}.banner.sale a{color:var(--cyan);margin-left:6px}
.price s,.item s{color:var(--pebble);font-weight:400;font-size:.62em;text-decoration-thickness:1.5px;margin-right:4px}
.item s{font-size:1em}
.deal{font:600 12px var(--mono);letter-spacing:.04em;color:var(--yellow);margin:-4px 0 0}
.deal:empty{display:none}
.pdp .price .deal{display:block;margin:8px 0 0;font-size:13px}
.item .save,.totals .save{color:var(--yellow)}
.promo{margin-bottom:14px;font:12px var(--mono);color:var(--stone)}
.promo div{display:flex;gap:8px;margin-top:6px}
.promo input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--rule);background:#0a0b0e;color:var(--ink);font:500 14px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.promo button{height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--rule);background:#171b23;color:var(--ink);font:600 13px var(--body,inherit);cursor:pointer}
.promo button:hover{border-color:var(--cyan)}
.promo p{margin:6px 0 0;min-height:1em;color:var(--yellow)}

/* ---- each card shows its own peptide as beads behind the vial ---- */
.card .viz .beads{position:absolute;inset:6px -4px 10px;width:calc(100% + 8px);height:calc(100% - 16px);z-index:0;opacity:.72;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transition:opacity .35s,transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .viz .beads{opacity:1;transform:scale(1.05) rotate(-2deg)}
.card .viz .v{position:relative;z-index:1}
.card .viz .aa{position:absolute;right:0;bottom:12px;z-index:2;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pebble)}
@media (prefers-reduced-motion:reduce){.card .viz .beads{transition:none}.card:hover .viz .beads{transform:none}}

/* ---- interaction polish (GSAP drives the motion; these are the resting styles) ---- */
.btn,.add,.cartbtn,.checkout{transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .2s,border-color .2s,background .2s}
.btn:active,.add:active,.checkout:active{transform:scale(.97)}
.flydot{position:fixed;left:0;top:0;width:16px;height:16px;border-radius:50%;z-index:200;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fff,#5fd8f2 30%,#12708a 80%);box-shadow:0 0 18px 2px rgba(95,216,242,.7)}
.shero .btn,.cartbtn{transition-property:box-shadow,border-color,background}   /* GSAP moves these; CSS must not fight it */

/* ================= DEPTH: far / mid / near layers behind every section (built by src/ui/depth.js) ================= */
.depth{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.dl{position:absolute;inset:-260px 0;pointer-events:none;will-change:transform}
.dli{position:absolute;inset:0}
.shero .space{overflow:hidden}
.shero .space .dl{inset:-8% -4%}
/* far: a star field made of two offset tiles so it never looks like a grid */
.dl.far .dli{opacity:.75;background-image:
  radial-gradient(1.3px 1.3px at 11% 17%,rgba(207,233,255,.95),transparent 62%),radial-gradient(1px 1px at 63% 8%,rgba(207,233,255,.7),transparent 62%),
  radial-gradient(1.6px 1.6px at 84% 41%,rgba(143,233,255,.9),transparent 62%),radial-gradient(1px 1px at 37% 58%,rgba(207,233,255,.6),transparent 62%),
  radial-gradient(1.2px 1.2px at 7% 83%,rgba(190,180,255,.85),transparent 62%),radial-gradient(1px 1px at 71% 91%,rgba(207,233,255,.65),transparent 62%),
  radial-gradient(1.4px 1.4px at 48% 29%,rgba(255,255,255,.75),transparent 62%),radial-gradient(1px 1px at 92% 71%,rgba(207,233,255,.55),transparent 62%);
  background-size:330px 330px,330px 330px,330px 330px,330px 330px,510px 510px,510px 510px,510px 510px,510px 510px}
/* mid: big soft colour */
.orb{position:absolute;width:min(46vw,620px);aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.2;animation:orbdrift 24s ease-in-out infinite alternate}
.shero .orb{opacity:.26}
@keyframes orbdrift{to{transform:translate3d(6%,-8%,0) scale(1.14)}}
/* beads: the same glossy spheres as the peptide, out of focus */
.bk{position:absolute;border-radius:50%;animation:bkfloat 12s ease-in-out infinite alternate}
@keyframes bkfloat{to{transform:translate3d(0,-22px,0)}}
.bk.c0{background:radial-gradient(circle at 34% 30%,#fff,#dfe7ee 24%,#66788a 78%,#05070c)}
.bk.c1{background:radial-gradient(circle at 34% 30%,#fff,#7fe6fb 24%,#12708a 78%,#05070c)}
.bk.c2{background:radial-gradient(circle at 34% 30%,#fff,#6aa2ff 24%,#1c3f9a 78%,#05070c)}
.bk.c3{background:radial-gradient(circle at 34% 30%,#fff,#ffa05c 24%,#a13c06 78%,#05070c)}
.bk.c4{background:radial-gradient(circle at 34% 30%,#fff,#a79dff 24%,#4034b0 78%,#05070c)}
/* hero only: a neon floor running to the horizon, a beam behind the vial, darkened edges */
.d-grid{position:absolute;left:-30%;right:-30%;bottom:-6%;height:58%;transform:perspective(520px) rotateX(63deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(95,216,242,.34) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(143,132,255,.3) 1.5px,transparent 1.5px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,rgba(0,0,0,.9) 46%,rgba(0,0,0,.5) 80%,transparent);mask-image:linear-gradient(180deg,transparent 4%,rgba(0,0,0,.9) 46%,rgba(0,0,0,.5) 80%,transparent);opacity:.55}
.d-beam{position:absolute;right:9%;top:-6%;width:34%;height:112%;filter:blur(34px);mix-blend-mode:screen;opacity:.7}
.d-beam::before{content:"";position:absolute;inset:0;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(127,240,255,.24),rgba(143,132,255,.1) 55%,transparent 88%)}
.d-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 60% 45%,transparent 45%,rgba(4,5,8,.72) 100%),linear-gradient(90deg,rgba(10,11,14,.72),rgba(10,11,14,.25) 42%,transparent 60%)}
.shero .pin > .dl.fore{inset:0;z-index:7}
/* routed pages (product, policies, checkout): a fixed far layer so they are not flat either */
body[data-view="page"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(40% 45% at 88% 12%,rgba(143,132,255,.16),transparent 70%),radial-gradient(45% 50% at 6% 92%,rgba(95,216,242,.13),transparent 70%),
  radial-gradient(1.3px 1.3px at 11% 17%,rgba(207,233,255,.8),transparent 62%) 0 0/330px 330px,radial-gradient(1.2px 1.2px at 67% 61%,rgba(190,180,255,.7),transparent 62%) 0 0/510px 510px}
@media (max-width:900px){.d-grid{height:40%;opacity:.4}.d-beam{right:14%;width:60%}.orb{filter:blur(60px)}}
@media (prefers-reduced-motion:reduce){.orb,.bk{animation:none}}

/* ---- checkout payment step (placeholder until a processor approves the account) ---- */
.paystep{margin-top:22px}
.note-box{padding:12px 16px;border-radius:12px;background:rgba(237,255,89,.07);border:1px solid rgba(237,255,89,.25);color:#e6efb0;font-size:14.5px;margin:10px 0 16px}
.cardmock{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;max-width:420px;margin:16px 0 10px;padding:16px;border-radius:14px;border:1px dashed var(--rule);background:#0c0f14;font:500 12px var(--mono);color:var(--pebble);opacity:.8}
.cardmock i{height:38px;border-radius:9px;border:1px solid var(--rule);background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px)}
.cardmock i.s{max-width:130px}
.paystep .btn[disabled]{opacity:.5;cursor:not-allowed}
.legal-index{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.legal-index li{padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:#0e1117}
.legal-index a{display:block;font:700 22px var(--display);color:var(--ink);text-decoration:none;margin-bottom:4px}
.legal-index span{color:var(--stone);font-size:14.5px}

/* supplier testing list on the home page */
.hplc .tests{list-style:none;padding:0;margin:14px 0 10px;display:grid;gap:7px;max-width:520px}
.hplc .tests li{padding:9px 12px;border:1px solid var(--rule);border-radius:12px;background:rgba(12,16,22,.6);color:var(--stone);font-size:14px;line-height:1.45}
.hplc .copy h2{font-size:clamp(34px,4.2vw,60px)}.hplc .copy .readout{margin-top:14px}
.hplc .tests b{color:var(--ink)}
.hplc .copy .fine{font-size:13px;color:var(--pebble);max-width:520px}

/* ================= PHONE HERO: the animation gets most of the screen =================
   The 3D scene fills the whole pinned area. The copy is compact at the top, the stage buttons sit along the
   bottom edge, and everything between them belongs to the chain and the vial. */
@media (max-width:900px){
  .shero{height:400vh}
  .shero .pin{height:calc(100svh - 68px);min-height:0}
  .shero .sgrid{padding-top:14px;box-sizing:border-box}
  .shero .eyebrow{font-size:10px;letter-spacing:.14em}
  .shero h1{font-size:clamp(34px,10.4vw,50px);margin-top:10px;line-height:1}
  .shero .lede{font-size:15px;line-height:1.45;margin-top:10px}
  .shero .ctas{margin-top:14px;gap:8px}
  .shero .ctas .btn{padding:11px 16px;font-size:14px}
  .shero .ruo-hero{display:none}                       /* the bar above the header and the vial label both say it */
  .shero .rail{position:absolute;left:0;right:0;bottom:22px;z-index:8;margin:0;justify-content:center;flex-wrap:nowrap;gap:5px}
  .shero .rail button{padding:8px 9px;font-size:9.5px;letter-spacing:.08em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .sstage{padding-bottom:68px}
  .hfinal,.is3d .hfinal{bottom:68px}
  .is3d .pin::after{background:linear-gradient(180deg,rgba(4,6,10,.88),rgba(4,6,10,.6) 34%,transparent 52%)}
}