/* ============================================================
   ELYRIA BIO — STOREFRONT STYLES
   ============================================================ */
:root{
  --abyss:#080706;
  --abyss-2:#100d0a;
  --abyss-3:#13100c80;
  --accent:#e7c06a;
  --accent-rgb:231,192,106;
  --accent-dim:#b9954e;
  --mist:#9b9384;
  --paper:#f4eee0;
  --line:rgba(var(--accent-rgb),.14);
  --line-2:rgba(255,255,255,.06);
  --glass:rgba(18,14,10,.55);
  --ink:#1a1305;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  --promo-h:38px;
  --nav-h:70px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--abyss);color:var(--paper);
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.mono{font-family:"IBM Plex Mono",monospace}
.display{font-family:"Jost",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.10em;line-height:1.12}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-dim);font-weight:500}
.brand-b{color:var(--accent-dim)}
.accent{color:var(--accent)}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* film grain + aurora */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ PROMO BAR ============ */
.promobar{height:var(--promo-h);background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05));border-bottom:1px solid var(--line);overflow:hidden;transition:height .3s var(--ease-out),opacity .3s}
.promobar.hide{height:0;opacity:0;border-color:transparent}
.promobar-in{height:var(--promo-h);display:flex;align-items:center;gap:18px}
.promo-msg{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;justify-content:center}
.promo-msg b{color:var(--accent);font-weight:600}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.ruo-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.promo-x{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;flex:none;color:var(--mist);transition:background .15s,color .15s}
.promo-x:hover{background:rgba(var(--accent-rgb),.12);color:var(--paper)}
.promo-x svg{width:15px;height:15px;stroke:currentColor}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:1100;height:var(--nav-h);transition:background .35s var(--ease-soft),border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,8,5,.82);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:100%}
.brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.brand .glyph{width:30px;height:30px;display:block;flex:none;filter:drop-shadow(0 0 7px rgba(231,192,106,.3))}
.brand .glyph svg{width:100%;height:100%;display:block}
.brand-lock{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;line-height:1}
.brand-name{font-family:"Jost",sans-serif;font-weight:300;font-size:19px;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;
  background:linear-gradient(100deg,#cf9f4a 0%,#e7c06a 22%,#f6e1a4 40%,#fffaef 50%,#f6e1a4 60%,#e7c06a 78%,#cf9f4a 100%);
  background-size:260% 100%;background-position:140% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:wordSheen 7s ease-in-out infinite}
@keyframes wordSheen{0%,58%{background-position:140% 0}82%,100%{background-position:-40% 0}}
@media (prefers-reduced-motion: reduce){.brand-name{animation:none;background-position:50% 0}}
.brand-sub{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;font-family:"Jost",sans-serif;font-weight:400;font-size:8.5px;letter-spacing:.6em;text-transform:uppercase;color:var(--accent-dim);padding-left:.6em;white-space:nowrap}
.brand-sub::before,.brand-sub::after{content:"";height:1px;flex:1;min-width:10px;background:linear-gradient(90deg,transparent,rgba(231,192,106,.5),transparent)}

/* search */
.search{flex:1;max-width:440px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:border-color .2s,background .2s}
.search:focus-within{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.06)}
.search .s-ic{width:18px;height:18px;stroke:var(--accent-dim);flex:none}
.search input{flex:1;background:none;border:none;color:var(--paper);font-size:14.5px;outline:none}
.search input::placeholder{color:var(--mist)}
.search input::-webkit-search-cancel-button{display:none}
.s-clear{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--mist);flex:none}
.s-clear:hover{color:var(--paper);background:rgba(var(--accent-rgb),.12)}
.s-clear svg{width:13px;height:13px;stroke:currentColor}

.navlinks{display:flex;align-items:center;gap:26px;flex:none}
.navlinks a{font-size:14px;color:var(--mist);transition:color .18s;position:relative;white-space:nowrap}
.navlinks a:hover{color:var(--paper)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--accent);transition:width .25s var(--ease-out)}
.navlinks a:hover::after{width:100%}

.cart-btn{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:100px;background:rgba(var(--accent-rgb),.07);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--paper);transition:background .2s,border-color .2s;flex:none}
.cart-btn:hover{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.3)}
.cart-btn svg{width:19px;height:19px;stroke:var(--accent)}
.cart-count{font-family:"IBM Plex Mono",monospace;font-size:12px;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:100px;background:var(--accent);color:var(--ink);font-weight:600}
.cart-btn.pulse{animation:cartPulse .55s var(--ease-out)}
@keyframes cartPulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}60%{box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
.cart-count.bump{animation:countBump .4s var(--ease-out)}
@keyframes countBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.hamburger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--accent-rgb),.06);place-items:center;flex:none}
.hamburger svg{width:20px;height:20px;stroke:var(--paper)}

.mobile-nav{position:fixed;inset:0;z-index:1300;background:rgba(8,6,5,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:30px 28px 28px;transform:translateX(100%);transition:transform .4s var(--ease-out);visibility:hidden}
.mobile-nav.open{transform:none;visibility:visible}
.mobile-nav .mclose{align-self:flex-end;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center}
.mobile-nav .mclose svg{width:22px;height:22px;stroke:var(--paper)}
.mobile-nav a{font-family:"Fraunces",serif;font-size:32px;font-weight:500;padding:16px 0;border-bottom:1px solid var(--line);color:var(--paper)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:100px;font-size:14.5px;font-weight:500;transition:transform .12s var(--ease-out),background .2s,box-shadow .25s,border-color .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-solid{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#f4dc98 0%,#e9c878 54%,#d4a64e 100%);color:var(--ink);font-weight:600;box-shadow:0 0 0 0 rgba(var(--accent-rgb),.4)}
.btn-solid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);transform:translateX(-130%);mix-blend-mode:overlay;animation:btnSheen 5.5s ease-in-out infinite}
.btn-solid:hover{box-shadow:0 8px 34px -8px rgba(var(--accent-rgb),.6);filter:brightness(1.05)}
.btn-solid:hover::after{animation-duration:1.6s}
@keyframes btnSheen{0%,68%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion: reduce){.btn-solid::after{animation:none;opacity:0}}
.btn-ghost{background:rgba(var(--accent-rgb),.05);color:var(--paper);border:1px solid var(--line)}
.btn-ghost:hover{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.1)}
.btn svg{width:17px;height:17px}

/* ============ HERO (compact) ============ */
.hero{position:relative;min-height:clamp(360px,52vh,500px);display:flex;align-items:center;padding:54px 0;overflow:hidden}
.hero video,.hero .vfallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .filament{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero video{filter:contrast(1.05) brightness(.96) sepia(.62) saturate(1.55) hue-rotate(-8deg);transform:scale(1.14);transform-origin:center;will-change:transform}
.hero .vfallback{background:radial-gradient(120% 90% at 70% 10%,rgba(var(--accent-rgb),.18),transparent 55%),radial-gradient(90% 80% at 20% 90%,rgba(176,122,42,.22),transparent 60%),linear-gradient(180deg,#0c0a07,#060509)}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,6,5,.86) 0%,rgba(8,6,5,.58) 36%,rgba(8,6,5,.18) 66%,rgba(8,6,5,.32) 100%),linear-gradient(180deg,transparent 52%,rgba(8,6,5,.6) 100%)}
.aurora{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.32;background:radial-gradient(38% 48% at 62% 40%,rgba(var(--accent-rgb),.18),transparent 72%);filter:blur(64px);will-change:transform;mix-blend-mode:screen}
.hero-inner{position:relative;z-index:2;width:100%;text-align:center;max-width:880px;margin:0 auto}
.hero h1{font-family:"Jost",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.10em;line-height:1.08;font-size:clamp(31px,4.6vw,58px);max-width:17ch;margin:18px auto 0}
.hero-sub{font-size:clamp(15px,1.5vw,18px);color:var(--mist);max-width:52ch;margin:18px auto 26px;line-height:1.6}
.hero-sub b{color:var(--paper);font-weight:500}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.trust-row{display:flex;gap:38px;flex-wrap:wrap;justify-content:center}
.trust{display:flex;flex-direction:column;gap:3px}
.trust .tv{font-family:"Fraunces",serif;font-weight:500;font-size:22px;color:var(--paper)}
.trust .tl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim)}

/* hero load choreography */
.h-anim{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}
.loaded .h-anim{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);transition-delay:var(--hd,0ms)}

/* ============ CATEGORY TILES ============ */
.cats{padding:46px 0 8px}
.cats-head{margin-bottom:20px;text-align:center}
.cat-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 22px 20px;border-radius:16px;background:linear-gradient(160deg,rgba(var(--accent-rgb),.07),rgba(18,14,10,.4));border:1px solid var(--line);text-align:left;transition:transform .3s var(--ease-out),border-color .25s,box-shadow .3s}
.cat-tile:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.34);box-shadow:0 20px 50px -28px rgba(0,0,0,.8)}
.cat-tile.active{border-color:var(--accent);background:linear-gradient(160deg,rgba(var(--accent-rgb),.16),rgba(18,14,10,.5))}
.ct-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.1);border:1px solid var(--line)}
.ct-ic svg{width:22px;height:22px;stroke:var(--accent)}
.ct-name{font-family:"Fraunces",serif;font-weight:500;font-size:21px}
.ct-count{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* ============ CATALOG ============ */
.catalog{padding:54px 0 40px;scroll-margin-top:90px}
.cat-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;margin-bottom:28px}
.cat-head h2{font-size:clamp(30px,4vw,46px)}
.cat-sub{color:var(--mist);font-size:15px;margin:10px auto 0;max-width:56ch}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:9px;flex-wrap:wrap}
.shop-controls{display:flex;align-items:center;gap:20px;margin-left:auto}
.result-count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.result-count b{color:var(--paper);font-weight:600}
.sort-wrap{display:flex;align-items:center;gap:11px;position:relative}
.sort-wrap>label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim);white-space:nowrap}
.sort-select{appearance:none;-webkit-appearance:none;font-size:13.5px;font-weight:500;color:var(--paper);background:rgba(var(--accent-rgb),.05);border:1px solid var(--line);border-radius:100px;padding:10px 40px 10px 17px;cursor:pointer;transition:border-color .2s,background .2s}
.sort-select:hover{border-color:rgba(var(--accent-rgb),.32);background:rgba(var(--accent-rgb),.1)}
.sort-select option{background:var(--abyss-2);color:var(--paper)}
.sort-wrap .chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:var(--accent);pointer-events:none}
.pill{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;padding:9px 18px;border-radius:100px;border:1px solid var(--line);color:var(--mist);background:rgba(var(--accent-rgb),.03);transition:all .2s var(--ease-out);text-transform:uppercase}
.pill:hover{color:var(--paper);border-color:rgba(var(--accent-rgb),.3)}
.pill[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:600}

/* ============ STUDIO VIAL RENDER ============ */
.vshot{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 14%,rgba(var(--accent-rgb),.12),transparent 60%),radial-gradient(80% 60% at 50% 120%,rgba(var(--accent-rgb),.08),transparent 70%),linear-gradient(180deg,#0e171b,#070d10 70%,#070509)}
.vshot::after{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:18%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.16),transparent 70%);filter:blur(6px)}
.vial-real{position:relative;width:74px;height:74%;max-height:188px;display:flex;flex-direction:column;align-items:center;z-index:2;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))}
.vr-cap{width:42px;height:15px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#e9f3f1,#9fb4b1 40%,#5f706e 70%,#cdd9d7);box-shadow:inset 0 -2px 3px rgba(0,0,0,.3);position:relative;z-index:3}
.vr-cap::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px);opacity:.5}
.vr-neck{width:30px;height:9px;background:linear-gradient(90deg,rgba(220,240,238,.25),rgba(255,255,255,.5),rgba(220,240,238,.25));border-left:1px solid rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.15)}
.vr-body{position:relative;flex:1;width:62px;border-radius:5px 5px 9px 9px;overflow:hidden;
  background:linear-gradient(90deg,rgba(180,210,208,.10) 0%,rgba(255,255,255,.30) 18%,rgba(120,150,150,.05) 50%,rgba(255,255,255,.14) 82%,rgba(150,180,178,.08) 100%);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.06)}
.vr-powder{position:absolute;left:3px;right:3px;bottom:3px;height:34%;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#fbfffe,#dfeae8 60%,#c4d3d0);box-shadow:0 0 14px rgba(255,255,255,.25)}
.vr-powder::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:50%;background:#fbfffe;opacity:.9}
.vr-gloss{position:absolute;top:4px;left:9px;width:8px;bottom:8px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.05));filter:blur(.5px)}
.vr-label{position:absolute;left:-2px;right:-2px;top:30%;padding:7px 5px;background:linear-gradient(180deg,#f4faf9,#e6efed);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.1);text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.vr-label .ln{display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:9px;letter-spacing:.02em;color:#0a1518;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-label .ls{display:block;font-family:"IBM Plex Mono",monospace;font-size:6px;letter-spacing:.08em;color:#5a6b6b;margin-top:2px}
.vr-label .laccent{display:block;height:2px;width:60%;margin:3px auto 0;background:var(--accent);border-radius:2px}
.vshot .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3}
.vshot:has(> img.photo) .vial-real{visibility:hidden}

/* ---- cinematic product backdrop: lattice + breathing aura + analysis scan ---- */
.vshot-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background-image:radial-gradient(circle at center, rgba(var(--accent-rgb),.16) 0, rgba(var(--accent-rgb),.16) 1px, transparent 1.7px);
  background-size:22px 22px;opacity:.32;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 46%, #000 12%, transparent 78%);
  mask-image:radial-gradient(72% 64% at 50% 46%, #000 12%, transparent 78%)}
.vshot-fx::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 50% at 50% 45%, rgba(var(--accent-rgb),.18), transparent 70%);
  animation:vfxBreath 6.5s ease-in-out infinite;will-change:transform,opacity}
.vshot-fx::after{content:"";position:absolute;left:-10%;right:-10%;height:42%;top:-46%;
  background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.12) 42%, rgba(255,246,214,.22) 50%, rgba(var(--accent-rgb),.12) 58%, transparent);
  filter:blur(1px);animation:vfxScan 8s ease-in-out infinite;will-change:transform,opacity}
@keyframes vfxBreath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes vfxScan{0%{transform:translateY(0);opacity:0}6%{opacity:1}46%{opacity:1}56%{transform:translateY(360%);opacity:0}100%{transform:translateY(360%);opacity:0}}
.grid .card:nth-child(2n) .vshot-fx::after{animation-delay:2.6s}
.grid .card:nth-child(3n) .vshot-fx::after{animation-delay:5.1s}
.grid .card:nth-child(4n) .vshot-fx::after{animation-delay:1.3s}
.grid .card:nth-child(2n) .vshot-fx::before{animation-delay:1.4s}
.grid .card:nth-child(3n) .vshot-fx::before{animation-delay:3.2s}
.card:hover .vshot-fx{opacity:.6}
.card:hover .vshot-fx::before{animation-duration:3.6s}
@media (prefers-reduced-motion: reduce){
  .vshot-fx::before,.vshot-fx::after{animation:none}
  .vshot-fx::after{display:none}
}

/* ============ PRODUCT CARD ============ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1500px}
.card{position:relative;background:var(--abyss-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;box-shadow:inset 0 1px 0 rgba(246,225,164,.06);
  transition:opacity .4s var(--ease-out),transform .35s var(--ease-out),border-color .25s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(231,192,106,.32),0 0 44px -12px rgba(231,192,106,.18)}
.card.hidden{display:none}
.card.fade-out{opacity:0;transform:scale(.97)}
.card-vis{position:relative;aspect-ratio:1/1;border-bottom:1px solid var(--line);overflow:hidden}
.card-vis::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:screen;background:radial-gradient(170px 170px at var(--mx,50%) var(--my,40%),rgba(255,240,194,.20),transparent 60%)}
.card:hover .card-vis::after{opacity:1}
.card-badges{position:absolute;top:12px;left:12px;z-index:4;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.badge{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.badge.bestseller{background:var(--accent);color:var(--ink);box-shadow:0 0 16px rgba(var(--accent-rgb),.4)}
.badge.new{background:rgba(70,179,255,.16);color:#8fd0ff;border:1px solid rgba(70,179,255,.4)}
.badge.popular{background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid var(--line)}
.badge.sale{background:#ff6b57;color:#1a0603}
.card-fav{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(8,6,5,.5);border:1px solid var(--line);backdrop-filter:blur(6px);transition:background .18s,border-color .18s,transform .15s}
.card-fav:hover{border-color:rgba(var(--accent-rgb),.4)}
.card-fav:active{transform:scale(.9)}
.card-fav svg{width:17px;height:17px;stroke:var(--mist);fill:none;transition:stroke .15s,fill .15s}
.card-fav.on svg{stroke:var(--accent);fill:var(--accent)}
.qv-trigger{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:100px;background:rgba(8,6,5,.62);border:1px solid var(--line);backdrop-filter:blur(8px);color:var(--paper);font-size:12.5px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s,background .18s}
.card:hover .qv-trigger{opacity:1;transform:none}
.qv-trigger:hover{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.4)}
.qv-trigger svg{width:15px;height:15px;stroke:var(--accent)}

.card-body{padding:16px 17px 0;flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}
.card-body>:not(.card-dots){position:relative;z-index:1}
.card-dots{position:absolute;top:0;right:0;width:200px;height:150px;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:top right;opacity:.55;transition:opacity .3s;-webkit-mask-image:radial-gradient(150% 150% at 100% 0,#000 28%,transparent 76%);mask-image:radial-gradient(150% 150% at 100% 0,#000 28%,transparent 76%)}
.card:hover .card-dots{opacity:.9}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.card-cat{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dim)}
.card-purity{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;color:var(--accent);padding:2px 7px;border:1px solid var(--line);border-radius:5px}
.card-name{font-family:"Fraunces",serif;font-weight:500;font-size:22px;letter-spacing:-.01em;line-height:1.1}
a.card-name{display:block;color:var(--paper);text-decoration:none;transition:color .16s}
a.card-name:hover{color:var(--accent)}



.card-cas{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist);margin-top:5px;letter-spacing:.02em}
.card-prov{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dim);margin-top:8px}
.card-prov .cp-dot{width:3px;height:3px;border-radius:50%;background:var(--accent-dim);flex:none}
.card-spark{margin-top:13px;height:30px;opacity:.62;transition:opacity .3s}
.card:hover .card-spark{opacity:1}
.card-spark svg{width:100%;height:30px;display:block}
.card-rating{display:flex;align-items:center;gap:7px;margin-top:11px}
.stars{display:inline-flex;gap:1.5px}
.stars svg{width:13px;height:13px}
.stars .sfull{fill:var(--accent);stroke:none}
.stars .shalf{fill:url(#halfgrad)}
.stars .sempty{fill:rgba(255,255,255,.14);stroke:none}
.rating-num{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist)}
.card-desc{font-size:12.5px;color:var(--mist);margin:11px 0 0;line-height:1.55}
.card-foot{margin-top:auto;padding-top:14px}
.card-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;margin-bottom:13px}
.price{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;color:var(--paper)}
.price-compare{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--mist);text-decoration:line-through}
.price-size{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist);white-space:nowrap}
.stock{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mist);margin-left:auto;white-space:nowrap}
.stock .sdot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.stock.low .sdot{background:#f5b243;box-shadow:0 0 8px #f5b243}
.stock.low{color:#f5cd8a}

.card-actions{display:flex;gap:10px;align-items:stretch;padding:0 17px 18px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:rgba(var(--accent-rgb),.04);overflow:hidden;flex:none}
.stepper button{width:32px;height:42px;display:grid;place-items:center;color:var(--accent);font-size:18px;transition:background .15s}
.stepper button:hover{background:rgba(var(--accent-rgb),.12)}
.stepper .qty{font-family:"IBM Plex Mono",monospace;font-size:14px;width:24px;text-align:center}
.add-btn{flex:1;background:rgba(var(--accent-rgb),.1);border:1px solid var(--line);border-radius:100px;font-size:13px;font-weight:600;color:var(--accent);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.add-btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.add-btn.added{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.add-btn svg{width:15px;height:15px}

/* ===== DIRECTION: COMPACT (4-up, dense) ===== */
body.dir-compact .grid{grid-template-columns:repeat(4,1fr);gap:16px}
body.dir-compact .card-vis{aspect-ratio:4/3}
body.dir-compact .card-name{font-size:18px}
body.dir-compact .card-desc{display:none}
body.dir-compact .card-rating{margin-top:9px}
body.dir-compact .card-body{padding:13px 14px 0}
body.dir-compact .card-actions{padding:0 14px 14px;gap:8px}
body.dir-compact .price{font-size:18px}
body.dir-compact .vial-real{max-height:128px}

/* ===== DIRECTION: EDITORIAL (2-up, horizontal) ===== */
body.dir-editorial .grid{grid-template-columns:repeat(2,1fr);gap:20px}
body.dir-editorial .card{flex-direction:row}
body.dir-editorial .card-vis{aspect-ratio:auto;width:42%;min-width:180px;border-bottom:none;border-right:1px solid var(--line)}
body.dir-editorial .card-body{padding:22px 22px 0}
body.dir-editorial .card-desc{display:block;margin-top:13px}
body.dir-editorial .card-name{font-size:24px}
body.dir-editorial .card-actions{padding:18px 22px 22px}
body.dir-editorial .qv-trigger{left:12px;right:auto;width:calc(42% - 24px);min-width:156px}
@media(max-width:720px){
  body.dir-editorial .card{flex-direction:column}
  body.dir-editorial .card-vis{width:100%;aspect-ratio:4/3;border-right:none;border-bottom:1px solid var(--line)}
  body.dir-editorial .qv-trigger{width:auto;right:12px}
}

.no-results{text-align:center;padding:60px 0;color:var(--mist)}
.no-results p{font-size:17px;margin-bottom:20px}
.no-results b{color:var(--paper)}

/* ============ RECENTLY VIEWED ============ */
.recent{padding:30px 0 50px}
.recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.recent-clear{font-size:12px;color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.recent-clear:hover{color:var(--accent)}
.recent-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.recent-rail::-webkit-scrollbar{height:6px}
.recent-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rv-card{flex:none;width:172px;background:var(--abyss-2);border:1px solid var(--line);border-radius:13px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .25s}
.rv-card:hover{border-color:rgba(var(--accent-rgb),.32);transform:translateY(-3px)}
.rv-card .rv-vis{aspect-ratio:1/1;border-bottom:1px solid var(--line)}
.rv-card .rv-meta{padding:11px 12px 13px}
.rv-card .rv-nm{font-family:"Fraunces",serif;font-weight:500;font-size:15px}
.rv-card .rv-pr{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;margin-top:5px}

/* ============ VERIFICATION ============ */
.verify{position:relative;overflow:hidden;padding:120px 0}
.verify video{filter:contrast(1.05) brightness(.92) sepia(.6) saturate(1.5) hue-rotate(-8deg)}
.verify video,.verify .vfallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.verify .vfallback{background:radial-gradient(80% 70% at 30% 50%,rgba(176,122,42,.2),transparent 60%),linear-gradient(180deg,#0a0806,#060509)}
.verify .filament{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.verify .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,6,5,.86),rgba(8,6,5,.6),rgba(8,6,5,.9)),radial-gradient(75% 75% at 50% 50%,transparent,rgba(8,6,5,.45))}
.verify .wrap{position:relative;z-index:2}
.verify-head{max-width:760px;margin:0 auto 56px;text-align:center}
.verify-head h2{font-size:clamp(30px,4.4vw,48px);margin-top:14px}
.verify-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.seal{width:280px;height:280px;margin:0 auto;position:relative;display:grid;place-items:center}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal .ring{fill:none;stroke:var(--accent);transform-box:fill-box;transform-origin:center}
@keyframes sealSpin{to{transform:rotate(360deg)}}
@keyframes sealSpinRev{to{transform:rotate(-360deg)}}
#ring1{animation:sealSpin 24s linear infinite}
#ring2{animation:sealSpinRev 17s linear infinite}
.seal-center{text-align:center;z-index:2}
.seal-center .pct{font-family:"Fraunces",serif;font-weight:500;font-size:46px;color:var(--accent);line-height:1}
.seal-center .lab{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-top:8px;max-width:120px}
.steps{display:flex;flex-direction:column;gap:4px}
.step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);width:34px;flex:none;padding-top:3px}
.step .stxt h4{font-family:"Fraunces",serif;font-weight:500;font-size:21px;margin-bottom:5px}
.step .stxt p{font-size:14px;color:var(--mist)}

/* ============ FAQ ============ */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--abyss-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .25s}
.faq-item[open]{border-color:rgba(var(--accent-rgb),.3)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;font-family:"Fraunces",serif;font-size:clamp(17px,2vw,21px);font-weight:500;color:var(--paper);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary svg{width:20px;height:20px;stroke:var(--accent-dim);flex:none;transition:transform .3s var(--ease-out),stroke .2s}
.faq-item[open] summary svg{transform:rotate(180deg);stroke:var(--accent)}
.faq-a{padding:0 26px 24px;max-width:68ch}
.faq-a p{color:var(--mist);font-size:15.5px;line-height:1.68;text-wrap:pretty;margin:0}
.noscript-catalog{max-width:880px;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:12px}
.noscript-catalog li{padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--abyss-2);color:var(--mist);font-size:15px;line-height:1.6}
.noscript-catalog li strong{color:var(--accent)}
@media (prefers-reduced-motion: no-preference){.faq-item[open] .faq-a{animation:faqReveal .32s var(--ease-out)}}
@keyframes faqReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ LOGISTICS ============ */
.sec-pad{padding:84px 0}
.sec-head{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);margin-top:14px}
.logi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.logi-card{background:var(--abyss-2);border:1px solid var(--line);border-radius:16px;padding:30px;transition:border-color .25s,transform .3s}
.logi-card:hover{border-color:rgba(var(--accent-rgb),.28);transform:translateY(-3px)}
.logi-card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.08);border:1px solid var(--line);margin-bottom:22px}
.logi-card .ic svg{width:24px;height:24px;stroke:var(--accent)}
.logi-card h4{font-family:"Fraunces",serif;font-weight:500;font-size:23px;margin-bottom:10px}
.logi-card p{font-size:14px;color:var(--mist);line-height:1.6}
.logi-card .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent-dim);letter-spacing:.1em;margin-top:16px;display:block}

/* ============ ACCOUNT ============ */
.account{position:relative;overflow:hidden}
.account video,.account .acc-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.account .acc-fb{background:radial-gradient(60% 80% at 50% 60%,rgba(var(--accent-rgb),.12),transparent 62%),linear-gradient(180deg,#0c0a07,#070509)}
.account .acc-vid{filter:contrast(1.04) brightness(.88) sepia(.6) saturate(1.5) hue-rotate(-8deg);transform:scale(1.15)}
.account .scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(72% 80% at 50% 46%,rgba(8,6,5,.74),transparent 72%),linear-gradient(180deg,rgba(8,6,5,.9),rgba(8,6,5,.8) 46%,rgba(8,6,5,.95))}
.account .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(50% 80% at 50% 100%,rgba(var(--accent-rgb),.14),transparent 70%)}
.account-in{position:relative;z-index:2;text-align:center;max-width:780px}
.account h2{font-size:clamp(32px,5vw,60px);margin:18px auto 0;max-width:16ch}
.account p{color:var(--mist);font-size:18px;margin:20px auto 32px;max-width:50ch}
.account-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{background:var(--abyss-2);border-top:1px solid var(--line);padding:80px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{font-size:13.5px;color:var(--mist);max-width:34ch;line-height:1.6}
.foot-col h5{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:18px}
.foot-col a{display:block;font-size:14px;color:var(--mist);padding:7px 0;transition:color .15s}
.foot-col a:hover{color:var(--paper)}
.legal{border-top:1px solid var(--line);padding-top:32px;font-size:12px;color:var(--mist);line-height:1.7}
.legal b{color:var(--paper)}
.legal strong{color:var(--paper);font-weight:500;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:10px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px}
.foot-bottom .cp{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--mist)}

/* ============ QUICK-VIEW MODAL ============ */
.qv-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(6,4,3,.66);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.qv-backdrop.open{opacity:1;visibility:visible}
.qv{position:fixed;z-index:1500;top:50%;left:50%;width:min(880px,94vw);max-height:90vh;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;background:var(--abyss-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);transition:transform .35s var(--ease-out),opacity .3s,visibility .3s}
.qv.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.qv-close{position:absolute;top:16px;right:16px;z-index:6;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(8,6,5,.5);display:grid;place-items:center;transition:background .18s}
.qv-close:hover{background:rgba(var(--accent-rgb),.14)}
.qv-close svg{width:20px;height:20px;stroke:var(--paper)}
.qv-body{display:grid;grid-template-columns:1fr 1fr;max-height:90vh;overflow:hidden}
.qv-vis{position:relative;min-height:420px}
.qv-info{padding:34px 34px 30px;overflow-y:auto}
.qv-info .qv-cat{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim)}
.qv-info h3{font-family:"Fraunces",serif;font-weight:500;font-size:32px;margin:8px 0 6px;letter-spacing:-.01em}
.qv-info .qv-cas{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mist)}
.qv-rating{display:flex;align-items:center;gap:8px;margin:14px 0}
.qv-rating .rating-num{font-size:12px}
.qv-price{display:flex;align-items:baseline;gap:10px;margin:18px 0}
.qv-price .price{font-size:28px}
.qv-price .price-compare{font-size:16px}
.qv-desc{font-size:14px;color:var(--mist);line-height:1.65;margin-bottom:22px}
.qv-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
.qv-specs .sp{background:var(--abyss-2);padding:13px 15px}
.qv-specs .sp .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim)}
.qv-specs .sp .v{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--paper);margin-top:4px}
.qv-buy{display:flex;gap:12px;align-items:stretch;margin-bottom:16px}
.qv-buy .stepper button{height:48px}
.qv-buy .add-btn{min-height:48px;font-size:14px}
.qv-coa{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mist);padding:12px 0;border-top:1px solid var(--line)}
.qv-coa svg{width:16px;height:16px;stroke:var(--accent)}
.qv-coa a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){
  .qv-body{grid-template-columns:1fr;overflow-y:auto}
  .qv-vis{min-height:240px}
  .qv-specs{grid-template-columns:1fr}
}

/* ============ CART DRAWER ============ */
.cart-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(6,4,3,.6);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.cart-backdrop.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:1500;background:var(--abyss-2);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .42s var(--ease-out);display:flex;flex-direction:column;box-shadow:-30px 0 80px -20px rgba(0,0,0,.7)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:"Fraunces",serif;font-weight:500;font-size:24px}
.drawer-head .sub{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.dclose{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;transition:background .18s}
.dclose:hover{background:rgba(var(--accent-rgb),.1)}
.dclose svg{width:20px;height:20px;stroke:var(--paper)}

.ship-meter{padding:16px 24px;border-bottom:1px solid var(--line);background:rgba(var(--accent-rgb),.03)}
.sm-track{height:7px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.sm-fill{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--accent-dim),var(--accent));box-shadow:0 0 12px rgba(var(--accent-rgb),.5);transition:width .5s var(--ease-out)}
.sm-label{font-size:12px;color:var(--mist);margin-top:9px;display:flex;align-items:center;gap:7px}
.sm-label b{color:var(--accent);font-weight:600}
.sm-label.unlocked{color:var(--accent)}

.drawer-items{flex:1;overflow-y:auto;padding:8px 24px}
.line-item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.li-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.li-info .nm{font-family:"Fraunces",serif;font-weight:500;font-size:16px}
.li-info .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist);margin-top:3px}
.li-controls{display:flex;align-items:center;gap:12px;margin-top:10px}
.li-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px}
.li-stepper button{width:26px;height:28px;display:grid;place-items:center;color:var(--accent);font-size:15px}
.li-stepper .q{font-family:"IBM Plex Mono",monospace;font-size:12px;width:22px;text-align:center}
.li-remove{font-size:11px;color:var(--mist);text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.li-remove:hover{color:var(--accent)}
.li-price{text-align:right}
.li-price .now{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600}
.li-price .was{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist);text-decoration:line-through;display:block;margin-top:2px}

.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:40px;color:var(--mist)}
.cart-empty .ec{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:rgba(var(--accent-rgb),.04)}
.cart-empty .ec svg{width:28px;height:28px;stroke:var(--accent-dim)}
.cart-empty h4{font-family:"Fraunces",serif;font-weight:500;font-size:20px;color:var(--paper)}
.cart-empty .btn{margin-top:6px}

.drawer-foot{padding:18px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(8,14,16,.6)}
.promo-code{display:flex;gap:9px;margin-bottom:6px}
.promo-code input{flex:1;height:42px;padding:0 15px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--paper);font-size:13px;outline:none}
.promo-code input:focus{border-color:rgba(var(--accent-rgb),.4)}
.promo-code button{padding:0 20px;border-radius:100px;border:1px solid var(--line);background:rgba(var(--accent-rgb),.08);color:var(--accent);font-size:13px;font-weight:600;transition:background .18s}
.promo-code button:hover{background:rgba(var(--accent-rgb),.16)}
.promo-feedback{font-size:11.5px;margin:8px 2px 0}
.promo-feedback.ok{color:var(--accent)}
.promo-feedback.err{color:#ff8a78}
.summary{margin:16px 0;display:flex;flex-direction:column;gap:9px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--mist)}
.sum-row .mono{font-size:14px;color:var(--paper)}
.sum-row.total{padding-top:11px;border-top:1px solid var(--line);font-size:15px;color:var(--paper)}
.sum-row.total .mono{font-size:24px;font-weight:600}
.ruo-ack{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--accent-rgb),.04);margin-bottom:13px;cursor:pointer}
.ruo-ack input{appearance:none;width:19px;height:19px;flex:none;border:1.5px solid var(--accent-dim);border-radius:5px;margin-top:1px;display:grid;place-items:center;transition:background .15s}
.ruo-ack input:checked{background:var(--accent);border-color:var(--accent)}
.ruo-ack input:checked::after{content:"✓";color:var(--ink);font-size:12px;font-weight:700}
.ruo-ack span{font-size:11.5px;color:var(--mist);line-height:1.5}
.ruo-ack span b{color:var(--paper);font-weight:500}
.checkout-btn{width:100%;padding:16px;border-radius:100px;background:var(--accent);color:var(--ink);font-weight:600;font-size:15px;transition:opacity .2s,transform .12s,box-shadow .25s}
.checkout-btn:active{transform:scale(.98)}
.checkout-btn:hover:not(:disabled){box-shadow:0 10px 34px -8px rgba(var(--accent-rgb),.6)}
.checkout-btn:disabled{opacity:.32;cursor:not-allowed}
.secure-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10.5px;letter-spacing:.04em;color:var(--mist);margin-top:13px;text-transform:uppercase}
.secure-line svg{width:14px;height:14px;stroke:var(--accent-dim)}

/* ============ TWEAKS PANEL ============ */
.tweaks{position:fixed;right:20px;bottom:20px;z-index:1700;width:288px;background:rgba(16,12,8,.94);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);overflow:hidden}
.tweaks-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}
.tweaks-title{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.tweaks-close{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--mist);transition:background .15s,color .15s}
.tweaks-close:hover{background:rgba(var(--accent-rgb),.12);color:var(--paper)}
.tweaks-close svg{width:15px;height:15px;stroke:currentColor}
.tweaks-body{padding:16px;display:flex;flex-direction:column;gap:0}
.tw-section{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim);margin:14px 0 9px}
.tw-section:first-child{margin-top:0}
.tw-seg{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.tw-seg button{flex:1;padding:8px 4px;border-radius:7px;font-size:11.5px;font-weight:500;color:var(--mist);transition:background .18s,color .18s}
.tw-seg button:hover{color:var(--paper)}
.tw-seg button.on{background:var(--accent);color:var(--ink);font-weight:600}
.tw-hint{font-size:11px;color:var(--mist);margin-top:8px;line-height:1.4}
.tw-swatches{display:flex;gap:10px}
.tw-swatches button{width:34px;height:34px;border-radius:50%;background:var(--sw);border:2px solid transparent;box-shadow:0 0 0 1px var(--line);transition:transform .15s,border-color .15s}
.tw-swatches button:hover{transform:scale(1.08)}
.tw-swatches button.on{border-color:var(--paper)}
.tw-toggle{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--paper);cursor:pointer;padding:4px 0}
.tw-toggle input{display:none}
.tw-track{width:42px;height:24px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid var(--line);position:relative;transition:background .2s;flex:none}
.tw-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--mist);transition:transform .2s,background .2s}
.tw-toggle input:checked+.tw-track{background:rgba(var(--accent-rgb),.3)}
.tw-toggle input:checked+.tw-track::after{transform:translateX(18px);background:var(--accent)}
.tw-text{width:100%;margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--paper);font-size:12px;outline:none;resize:none}
.tw-text:focus{border-color:rgba(var(--accent-rgb),.4)}

/* ============ MAGNETIC CURSOR ============ */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:width .2s var(--ease-out),height .2s var(--ease-out),opacity .2s;mix-blend-mode:screen;opacity:0}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.5);z-index:9998;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s var(--ease-out),height .25s var(--ease-out),opacity .2s;opacity:0}
.cursor-dot.hot{width:0;height:0}
.cursor-ring.hot{width:50px;height:50px;border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}

/* ============ REVEALS ============ */
.rv{opacity:0;transform:translate3d(0,26px,0);filter:blur(7px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);transition-delay:var(--delay,0ms)}
.rv.in{opacity:1;transform:none;filter:blur(0)}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .grid,body.dir-compact .grid{grid-template-columns:repeat(2,1fr)}
  .cat-tiles{grid-template-columns:repeat(2,1fr)}
  .verify-grid{grid-template-columns:1fr;gap:44px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .logi-grid{grid-template-columns:1fr}
  .search{max-width:none}
}
@media(max-width:860px){
  .navlinks{display:none}
  .hamburger{display:grid}
}
@media(max-width:680px){
  .nav-in .search{display:none}
  .grid,body.dir-compact .grid,body.dir-editorial .grid{grid-template-columns:1fr}
  .cat-tiles{grid-template-columns:1fr 1fr}
  .sec-pad{padding:72px 0}
  .verify{padding:80px 0}
  .wrap{padding:0 20px}
  .ruo-tag{display:none}
  .shop-controls{margin-left:0;width:100%;justify-content:space-between}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .tweaks{right:12px;left:12px;bottom:12px;width:auto}
}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .rv,.h-anim,.loaded .h-anim{transition:opacity .35s ease!important;transform:none!important;filter:none!important;opacity:1!important}
  .aurora{display:none}
  .cursor-dot,.cursor-ring{display:none!important}
}

/* ============================================================
   UX ENHANCEMENTS
   ============================================================ */

/* video reveal — show gradient fallback until frame is ready */
.hero video,.account video,.verify video{opacity:0;transition:opacity .7s var(--ease-out)}
.hero video.ready,.account video.ready,.verify video.ready{opacity:1}

/* ---- sticky shop toolbar ---- */
.shop-toolbar{position:sticky;top:calc(var(--nav-h) - 1px);z-index:900;background:rgba(10,8,5,.94);backdrop-filter:blur(14px) saturate(140%);padding:15px 0;margin-bottom:26px}
.shop-toolbar::before{content:"";position:absolute;top:0;bottom:0;left:calc(-50vw + 50%);right:calc(-50vw + 50%);background:rgba(10,8,5,.94);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);z-index:-1}
@media(max-width:680px){.shop-toolbar{position:static;backdrop-filter:none;background:none}.shop-toolbar::before{display:none}.shop-toolbar{border-bottom:1px solid var(--line)}}

/* ---- search suggestions ---- */
.search{position:relative}
.search-suggest{position:absolute;top:calc(100% + 10px);left:0;right:0;background:rgba(16,12,8,.97);backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 64px -22px rgba(0,0,0,.85);overflow:hidden;z-index:1200;padding:6px}
.search-suggest[hidden]{display:none}
.ss-head{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dim);padding:8px 11px 7px}
.ss-item{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:10px;cursor:pointer;transition:background .12s}
.ss-item:hover,.ss-item.active{background:rgba(var(--accent-rgb),.12)}
.ss-thumb{width:36px;height:36px;border-radius:8px;overflow:hidden;border:1px solid var(--line);flex:none}
.ss-info{flex:1;min-width:0}
.ss-nm{font-family:"Fraunces",serif;font-weight:500;font-size:15.5px;line-height:1.1}
.ss-meta{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--mist);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-pr{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600;color:var(--accent);flex:none}
.ss-empty{padding:15px 12px;font-size:13px;color:var(--mist);text-align:center}
.ss-empty b{color:var(--paper)}

/* ---- card compare button ---- */
.card-cmp{position:absolute;top:54px;right:12px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(8,6,5,.5);border:1px solid var(--line);backdrop-filter:blur(6px);transition:background .18s,border-color .18s,transform .15s}
.card-cmp:hover{border-color:rgba(var(--accent-rgb),.4)}
.card-cmp:active{transform:scale(.9)}
.card-cmp svg{width:16px;height:16px;stroke:var(--mist);transition:stroke .15s}
.card-cmp.on{background:var(--accent);border-color:var(--accent)}
.card-cmp.on svg{stroke:var(--ink)}
body.dir-editorial .card-cmp,body.dir-editorial .card-fav{right:auto;left:calc(42% + 12px)}
@media(max-width:720px){body.dir-editorial .card-cmp,body.dir-editorial .card-fav{left:auto;right:12px}}

/* ---- toasts ---- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1650;display:flex;flex-direction:column-reverse;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 24px);transition:bottom .3s var(--ease-out)}
body.tray-open .toasts{bottom:90px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:13px;width:344px;max-width:calc(100vw - 24px);padding:11px 12px;border-radius:14px;background:rgba(16,12,8,.95);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(var(--accent-rgb),.3);box-shadow:0 22px 60px -18px rgba(0,0,0,.85);transform:translateY(18px);opacity:0;transition:transform .38s var(--ease-out),opacity .38s}
.toast.in{transform:none;opacity:1}
.toast .t-thumb{width:42px;height:42px;border-radius:9px;overflow:hidden;border:1px solid var(--line);flex:none}
.toast .t-body{flex:1;min-width:0}
.toast .t-title{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--paper)}
.toast .t-check{width:15px;height:15px;stroke:var(--accent);flex:none}
.toast .t-sub{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mist);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast .t-acts{display:flex;flex-direction:column;gap:5px;flex:none}
.toast .t-acts button{font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;white-space:nowrap;transition:filter .15s,color .15s,background .15s}
.toast .t-acts button[data-toast-act="view"]{background:var(--accent);color:var(--ink)}
.toast .t-acts button[data-toast-act="view"]:hover{filter:brightness(1.08)}
.toast .t-acts .t-undo{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mist)}
.toast .t-acts .t-undo:hover{color:var(--paper)}

/* ---- compare tray ---- */
.compare-tray{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1350;display:flex;align-items:center;gap:16px;padding:11px 12px 11px 18px;border-radius:100px;background:rgba(16,12,8,.95);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(var(--accent-rgb),.3);box-shadow:0 24px 60px -18px rgba(0,0,0,.8);max-width:calc(100vw - 28px)}
.compare-tray[hidden]{display:none}
.ct-lead{display:flex;flex-direction:column;line-height:1.25}
.ct-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ct-hint{font-size:10.5px;color:var(--mist)}
.ct-thumbs{display:flex;gap:8px}
.ct-chip{position:relative;width:38px;height:38px;border-radius:9px;overflow:hidden;border:1px solid var(--line);flex:none}
.ct-chip .ct-x{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--abyss);border:1px solid var(--line);display:grid;place-items:center;color:var(--mist);font-size:13px;line-height:1;z-index:3;padding:0}
.ct-chip .ct-x:hover{color:var(--accent);border-color:var(--accent)}
.ct-actions{display:flex;align-items:center;gap:6px}
.ct-clear{font-size:12px;color:var(--mist);text-decoration:underline;text-underline-offset:3px;padding:6px}
.ct-clear:hover{color:var(--accent)}
.ct-go{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100px;background:var(--accent);color:var(--ink);font-weight:600;font-size:13px;transition:box-shadow .2s,opacity .2s}
.ct-go:disabled{opacity:.4;cursor:not-allowed}
.ct-go:not(:disabled):hover{box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.6)}
.ct-num{font-family:"IBM Plex Mono",monospace;background:rgba(0,0,0,.2);border-radius:100px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;font-size:11px}
@media(max-width:560px){.ct-lead{display:none}.compare-tray{gap:12px;padding-left:14px}}

/* ---- shared overlay backdrop / close ---- */
.ov-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(6,4,3,.66);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ov-backdrop.open{opacity:1;visibility:visible}
.ov-close{position:absolute;top:16px;right:16px;z-index:6;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(8,6,5,.55);display:grid;place-items:center;transition:background .18s}
.ov-close:hover{background:rgba(var(--accent-rgb),.14)}
.ov-close svg{width:20px;height:20px;stroke:var(--paper)}

/* ---- compare modal ---- */
.cmp{position:fixed;z-index:1500;top:50%;left:50%;width:min(1040px,95vw);max-height:88vh;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;background:var(--abyss-2);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);transition:transform .35s var(--ease-out),opacity .3s,visibility .3s}
.cmp.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.cmp-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex:none}
.cmp-head h3{font-family:"Fraunces",serif;font-weight:500;font-size:24px}
.cmp-sub{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--accent-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.cmp-head .ov-close{position:static}
.cmp-body{overflow:auto;padding:0 24px 24px}
.cmp-grid{display:grid;min-width:480px}
.cmp-head-row{display:grid;position:sticky;top:0;background:var(--abyss-2);z-index:2;border-bottom:1px solid var(--line)}
.cmp-hl{padding:16px 12px}
.cmp-hc{padding:18px 14px;border-left:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center}
.cmp-hc .vshotwrap{width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:11px}
.cmp-hc .cmp-nm{font-family:"Fraunces",serif;font-weight:500;font-size:18px;line-height:1.1}
.cmp-hc .cmp-price{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;color:var(--accent);margin:7px 0 11px}
.cmp-hc .cmp-add{width:100%;padding:9px;border-radius:100px;background:rgba(var(--accent-rgb),.1);border:1px solid var(--line);color:var(--accent);font-size:12px;font-weight:600;transition:background .18s,color .18s}
.cmp-hc .cmp-add:hover{background:var(--accent);color:var(--ink)}
.cmp-hc .cmp-add.added{background:var(--accent);color:var(--ink)}
.cmp-hc .cmp-rm{margin-top:10px;font-size:10.5px;color:var(--mist);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-hc .cmp-rm:hover{color:var(--accent)}
.cmp-row{display:grid;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:none}
.cmp-rl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim);padding:14px 12px;display:flex;align-items:center}
.cmp-c{padding:14px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--paper);border-left:1px solid var(--line);display:flex;align-items:center;gap:8px}
.cmp-c.best{color:var(--accent)}
.cmp-c.best::after{content:"BEST";font-size:8px;letter-spacing:.08em;padding:2px 5px;border:1px solid rgba(var(--accent-rgb),.4);border-radius:5px;color:var(--accent)}

/* ---- COA modal ---- */
.coa{position:fixed;z-index:1500;top:50%;left:50%;width:min(640px,95vw);max-height:92vh;overflow-y:auto;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;background:var(--abyss-2);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);transition:transform .35s var(--ease-out),opacity .3s,visibility .3s}
.coa.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.coa-doc{position:relative;padding:30px 32px 24px}
.coa-doc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#cf9f4a,#f6e1a4,#e7c06a,#cf9f4a,transparent)}
.coa-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.coa-brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-size:19px;font-weight:500}
.coa-brand .glyph{width:26px;height:26px;display:block;background:none;border:none;filter:drop-shadow(0 0 5px rgba(231,192,106,.3))}
.coa-brand .glyph svg{width:100%;height:100%;display:block}
.coa-brand .glyph::before{display:none}
.coa-kicker{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim);margin-top:12px}
.coa-title{font-family:"Fraunces",serif;font-size:23px;font-weight:500;margin-top:3px}
.coa-subcas{font-size:11.5px;color:var(--mist);margin-top:3px}
.coa-stamp{flex:none;text-align:center;border:1px solid rgba(231,192,106,.4);border-radius:10px;padding:13px 15px;min-width:100px;background:rgba(231,192,106,.06)}
.coa-stamp .cs-k{font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#cf9f4a}
.coa-stamp .cs-v{font-size:14px;color:var(--paper);margin-top:6px;letter-spacing:.04em}
.coa-stamp .cs-tick{font-size:8.5px;letter-spacing:.1em;color:#cf9f4a;margin-top:8px;font-family:"IBM Plex Mono",monospace}

/* ===================== ORDER THANK-YOU (warm, randomized) ===================== */
.thanks-backdrop{position:fixed;inset:0;background:rgba(4,3,2,.72);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:300}
.thanks-backdrop.open{opacity:1;pointer-events:auto}
.thanks-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:301;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.thanks-modal.open{opacity:1;pointer-events:auto}
.thanks-card{position:relative;overflow:hidden;max-width:466px;width:100%;border:1px solid rgba(231,192,106,.32);border-radius:22px;background:var(--abyss-2,#100d0a);padding:42px 38px 30px;text-align:center;transform:translateY(18px) scale(.96);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.thanks-modal.open .thanks-card{transform:none}
.thanks-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#cf9f4a,#f6e1a4,#e7c06a,#cf9f4a,transparent)}
.thanks-spark{width:66px;height:66px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#f6e1a4,#d4a64e);box-shadow:0 6px 24px -6px rgba(231,192,106,.75)}
.thanks-spark svg{width:32px;height:32px;stroke:#1a1305;fill:none}
.thanks-kicker{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:12px}
.thanks-card h2{font-family:"Fraunces",serif;font-weight:500;font-size:30px;color:var(--paper);margin-bottom:14px;line-height:1.05}
.thanks-msg{color:var(--mist);font-size:15px;line-height:1.66;margin:0 auto 22px;max-width:40ch;text-wrap:pretty}
.thanks-sum{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 18px;margin-bottom:24px}
.thanks-sum b{color:var(--accent)}
.thanks-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.thanks-foot{margin-top:20px;font-size:11.5px;color:var(--mist);opacity:.8;line-height:1.5}
.coa-meta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:18px 0}
.coa-meta .m{background:var(--abyss-2);padding:11px 13px}
.coa-meta .mk{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim)}
.coa-meta .mv{font-family:"IBM Plex Mono",monospace;font-size:13px;margin-top:3px;color:var(--paper)}
.coa-tests{width:100%;border-collapse:collapse}
.coa-tests th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim);padding:9px 10px;border-bottom:1px solid var(--line)}
.coa-tests td{font-family:"IBM Plex Mono",monospace;font-size:12.5px;padding:10px;border-bottom:1px solid var(--line);color:var(--paper)}
.coa-pass{color:var(--accent);font-weight:600}
.coa-chart{margin:18px 0;border:1px solid var(--line);border-radius:10px;padding:12px 14px 9px;background:linear-gradient(180deg,rgba(231,192,106,.05),transparent)}
.coa-chart-head{display:flex;justify-content:space-between;align-items:baseline;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:4px}
.coa-chart-head .mono{color:var(--mist);letter-spacing:.05em;text-transform:none}
.coa-chart svg{width:100%;height:auto;display:block}
.coa-seal{width:80px;height:80px;flex:none;filter:drop-shadow(0 3px 9px rgba(0,0,0,.55))}
.coa-seal svg{width:100%;height:100%;display:block}
.coa-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.coa-sign{font-family:"Fraunces",serif;font-style:italic;font-size:23px;color:var(--paper);line-height:1}
.coa-sign-l{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-top:7px}
.coa-stamp{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);border-radius:8px;padding:8px 12px;letter-spacing:.1em}
.coa-actions{display:flex;gap:10px;padding:0 32px 22px}
.coa-dl{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:100px;background:var(--accent);color:var(--ink);font-weight:600;font-size:14px;transition:box-shadow .2s,filter .2s}
.coa-dl:hover{filter:brightness(1.06);box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.6)}
.coa-dl svg{width:16px;height:16px}
.coa-secondary{padding:13px 20px;border-radius:100px;background:rgba(var(--accent-rgb),.05);border:1px solid var(--line);color:var(--paper);font-size:14px;font-weight:500;transition:border-color .2s,background .2s}
.coa-secondary:hover{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.1)}
.coa-note{font-size:10.5px;color:var(--mist);line-height:1.5;padding:0 32px 24px}

/* ---- quick-view COA row ---- */
.qv-coa-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.qv-coa-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100px;background:rgba(var(--accent-rgb),.1);border:1px solid var(--line);color:var(--accent);font-size:13px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.qv-coa-btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.qv-coa-btn svg{width:16px;height:16px}
.qv-verif-link{font-size:12.5px;color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.qv-verif-link:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .hero video,.account video,.verify video{opacity:1}
  .toast{transition:opacity .2s ease!important;transform:none!important}
}

/* ============ ARRIVAL INTRO — particle motion graphic ============ */
.intro{position:fixed;inset:0;z-index:4000;background:radial-gradient(72% 72% at 50% 44%,#0d0a07,#050409 72%);overflow:hidden;cursor:pointer}
.intro.done{opacity:0;pointer-events:none;transition:opacity .85s var(--ease-out)}
.intro.intro-removed{display:none}
body.intro-open{overflow:hidden}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform,opacity;transition:transform 1.05s cubic-bezier(.65,0,.25,1),opacity .9s ease}
.intro.push .intro-canvas{transform:scale(1.4);opacity:0}
.intro-skip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);opacity:0;animation:introSkip .8s ease 1.6s forwards;pointer-events:none}
.intro-fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes introSkip{to{opacity:.5}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* ============ CARD COA LINK ============ */
.card-coa{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dim);padding-top:2px;transition:color .15s}
.card-coa svg{width:14px;height:14px;stroke:var(--accent);fill:none;flex:none}
.card-coa:hover{color:var(--accent)}

/* ============ ACTIVE FILTER CHIPS ============ */
.active-filters{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:-10px 0 26px}
.active-filters[hidden]{display:none}
.af-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dim)}
.af-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--paper);background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);border-radius:100px;padding:6px 13px;transition:background .15s,border-color .15s}
.af-chip:hover{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.45)}
.af-chip .af-k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dim)}
.af-chip .af-x{font-size:16px;line-height:1;color:var(--accent);margin-left:1px}
.af-clear-all{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--mist);text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.af-clear-all:hover{color:var(--accent)}

/* ============ SEARCH EMPTY-STATE CATEGORIES ============ */
.ss-cats{display:flex;flex-wrap:wrap;gap:8px;padding:2px 11px 12px}
.ss-cat{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;color:var(--mist);background:rgba(var(--accent-rgb),.06);border:1px solid var(--line);border-radius:100px;padding:7px 14px;transition:color .15s,background .15s,border-color .15s}
.ss-cat:hover{color:var(--ink);background:var(--accent);border-color:var(--accent)}

/* ============ SCROLL-DRIVEN MOTION ============ */
/* base (all browsers): masked words sit visible — the @supports block animates them */
.reveal-title .rw{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit;padding:0 .02em}
.reveal-title .rw-i{display:inline-block;will-change:transform}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* 1 — section titles rise word-by-word from behind a mask, staggered */
    .reveal-title .rw-i{
      animation: titleWordRise linear both;
      animation-timeline: view();
      animation-range: entry calc(4% + var(--wi,0) * 7%) entry calc(48% + var(--wi,0) * 7%);
    }
    @keyframes titleWordRise{
      from{ transform: translateY(115%); }
      to{ transform: translateY(0); }
    }

    /* the title heads themselves: clean opacity scrub only (words carry the motion) */
    .cat-head, .sec-head, .verify-head{
      opacity:1; transform:none; filter:none;
      animation: headFade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes headFade{ from{opacity:0} to{opacity:1} }

    /* 2 — scrubbed content reveal: rise + scale + unblur, tied to scroll.
       excludes hover-transform elements so their lift/tilt keeps working */
    .rv:not(.card):not(.cat-tile):not(.logi-card):not(.cat-head):not(.sec-head):not(.verify-head){
      opacity:1;
      animation: contentReveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 34%;
    }
    @keyframes contentReveal{
      from{ opacity:0; transform: translate3d(0,48px,0) scale(.972); filter: blur(8px); }
      58%{ filter: blur(0); }
      to{ opacity:1; transform:none; filter: blur(0); }
    }

    /* 3 — parallax drift on the verification seal across its pass through view */
    .verify .seal{
      will-change: transform;
      animation: sealParallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes sealParallax{
      from{ transform: translateY(40px); }
      to{ transform: translateY(-40px); }
    }
  }
}

/* ============ CINEMATIC SYNTHESIS HERO ============ */
.hero-scroll{position:relative;height:175vh;background:var(--abyss)}
.hero-stage{position:sticky;top:0;height:100vh;min-height:580px;overflow:hidden;background:var(--abyss)}
.hero-stage .vfallback{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 50% 10%,rgba(var(--accent-rgb),.16),transparent 55%),
  radial-gradient(90% 80% at 50% 98%,rgba(176,122,42,.18),transparent 60%),
  linear-gradient(180deg,#0a0807,#060504)}
.hero-stage .shaderbg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.hero-stage .assembly-gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.hero-stage .molecule{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;pointer-events:none}
.hero-veil{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,
  rgba(7,5,4,.88) 0%,rgba(7,5,4,.34) 21%,transparent 41%,transparent 58%,rgba(7,5,4,.36) 76%,rgba(7,5,4,.92) 100%)}

.hero-overlay{position:absolute;inset:0;z-index:5;display:flex}
.hero-overlay-in{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:138px 0 84px}
.hero-top{display:flex;flex-direction:column;align-items:center;gap:16px}
.hero-bottom{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.hero-title{font-family:"Jost",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.12em;line-height:1.04;font-size:clamp(32px,5.4vw,76px);max-width:15ch;margin:0;color:var(--paper);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero-eyebrow{color:var(--accent-dim)}
.hero-overlay .hero-sub{margin:0 auto;text-shadow:0 1px 22px rgba(0,0,0,.7)}

/* entrance for the always-on copy — transform-only so opacity is never animated;
   the headline stays fully visible even if a transition is throttled mid-flight */
.hero-eyebrow,.hero-title{transform:translateY(14px)}
.loaded .hero-eyebrow,.loaded .hero-title{transform:none;transition:transform .85s var(--ease-out)}
.loaded .hero-title{transition-delay:.1s}

/* scroll-driven copy starts hidden only when JS is armed (no-JS shows everything) */
.synth-armed .hero-sub,.synth-armed .hero-cta,.synth-armed .hero-trust,.synth-armed .synth-hud{opacity:0}

/* synthesis HUD */
.synth-hud{position:relative;z-index:6;width:258px;max-width:100%;text-align:left;pointer-events:none;font-family:"IBM Plex Mono",monospace;margin-bottom:16px}
.synth-hud-row{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.synth-hud .shk{color:var(--accent-dim)}
.synth-hud .shv{color:var(--paper);font-size:11px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.synth-bar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;margin:11px 0;overflow:hidden}
.synth-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#cf9f4a,#f6e1a4);box-shadow:0 0 10px rgba(231,192,106,.6);transition:width .08s linear}
.synth-verify .sv-dot{width:6px;height:6px;border-radius:50%;background:var(--mist);flex:none;transition:background .3s,box-shadow .3s}
.synth-verify.ok{color:var(--accent)}
.synth-verify.ok .sv-dot{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* scroll hint */
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-dim);pointer-events:none}
.scroll-hint svg{width:18px;height:18px;stroke:var(--accent);animation:hintBob 1.8s var(--ease-out) infinite}
@keyframes hintBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* verification band now rides the same shader */
.verify .shaderbg{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}

@media(max-width:760px){
  .hero-scroll{height:150vh}
  .hero-overlay-in{padding:120px 0 70px}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll{height:auto!important}
  .hero-stage{position:relative!important;height:100vh;min-height:560px}
  .scroll-hint{display:none}
}

/* ============================================================
   MOBILE / iOS OPTIMIZATION
   ============================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
*{ -webkit-tap-highlight-color: rgba(0,0,0,0) }

/* dynamic-viewport pinned hero (iOS address-bar safe) */
.hero-stage{ height:100svh }
@supports (height:100dvh){ .hero-stage{ height:100dvh } }
@supports (height:100dvh){ .hero-scroll{ height:175dvh } }

/* iOS Safari needs the -webkit- prefix for frosted glass */
.nav.solid,.mobile-nav,.search-suggest,.shop-toolbar,.shop-toolbar::before,
.qv-backdrop,.cart-backdrop,.ov-backdrop,.toast,.compare-tray,.tweaks,.cart-btn,.qv,.cmp,.coa,.drawer{
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

/* momentum scrolling + scroll containment in overlays */
.drawer-items,.qv,.cmp-body,.coa,.recent-rail,.mobile-nav{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain }

/* safe-area insets (notch + home indicator) */
.compare-tray{ bottom:calc(22px + env(safe-area-inset-bottom)) }
.toasts{ bottom:calc(24px + env(safe-area-inset-bottom)) }
body.tray-open .toasts{ bottom:calc(90px + env(safe-area-inset-bottom)) }
.tweaks{ bottom:calc(20px + env(safe-area-inset-bottom)) }
.mobile-nav{ padding-bottom:calc(28px + env(safe-area-inset-bottom)) }
.scroll-hint{ bottom:calc(22px + env(safe-area-inset-bottom)) }
.drawer-head{ padding-top:calc(22px + env(safe-area-inset-top)) }

/* touch devices: surface quick-view (no hover), kill sticky-hover lift */
@media (hover:none){
  .qv-trigger{ opacity:1; transform:none }
  .card:hover{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) }
}

/* relocated mobile search lives inside the menu */
@media(max-width:680px){
  .mobile-nav .search{ display:flex; width:100%; max-width:none; margin-bottom:18px }
  .mobile-nav .search input{ font-size:16px }
}

/* 44px touch targets + no iOS zoom-on-focus */
@media (hover:none),(max-width:760px){
  input,select,textarea{ font-size:16px }
  .stepper button{ width:44px; height:46px; font-size:20px }
  .li-stepper button{ width:38px; height:38px }
  .li-stepper .q{ width:26px }
  .card-fav,.card-cmp{ width:40px; height:40px }
  .card-fav svg,.card-cmp svg{ width:18px; height:18px }
  .qv-close,.ov-close,.drawer .dclose,.mobile-nav .mclose,.promo-x{ width:44px; height:44px }
  .qv,.cmp,.coa{ max-height:90svh }
}

/* drop the second WebGL context on phones (battery) — gradient shows instead */
@media(max-width:760px){ .verify .shaderbg{ display:none } }

/* phone layout polish */
@media(max-width:680px){
  .hero-stage{ min-height:0 }
  .hero-scroll{ height:145vh }
  .hero-overlay-in{ padding:106px 18px 64px }
  .hero-title{ letter-spacing:.07em }
  .hero-cta{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin-left:auto; margin-right:auto }
  .hero-cta .btn{ justify-content:center; min-height:52px }
  .trust-row{ gap:18px 28px }
  .account-cta{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin:0 auto }
  .account-cta .btn{ justify-content:center; min-height:52px }
  .cat-tiles{ gap:12px }
}
@supports (height:100dvh){
  @media(max-width:680px){ .hero-scroll{ height:145dvh } }
}

/* ============================================================
   VERIFICATION LAB  (3D viewer · interactive COA · view transitions)
   ============================================================ */
/* --- 3D structure viewer in quick-view --- */
.qv-vis{display:flex;align-items:center;justify-content:center}
.mol3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none;transition:opacity .4s;cursor:grab;touch-action:none}
.mol3d:active{cursor:grabbing}
.qv-vis.show-mol .mol3d{opacity:1;pointer-events:auto}
.qv-vis.show-mol .vial-real{opacity:0;transition:opacity .35s}
.qv-vis.show-mol .card-badges{opacity:0}

.vis-seg{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:2px;padding:3px;border-radius:100px;border:1px solid var(--line);background:rgba(8,6,5,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vis-seg button{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);padding:7px 13px;border-radius:100px;transition:color .2s,background .2s;min-height:32px}
.vis-seg button.active{color:var(--ink);background:var(--accent)}
.mol-hint{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:6;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dim);opacity:0;transition:opacity .4s;pointer-events:none}
.qv-vis.show-mol .mol-hint{opacity:1;animation:molHintFade 3s ease 2.4s forwards}
@keyframes molHintFade{to{opacity:0}}
.mol-legend{position:absolute;left:16px;bottom:16px;z-index:6;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .4s;pointer-events:none}
.qv-vis.show-mol .mol-legend{opacity:1}
.mol-legend span{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.mol-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.mol-cap{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right;max-width:62%;opacity:0;transition:opacity .4s;pointer-events:none}
.qv-vis.show-mol .mol-cap{opacity:1}
.mol-cap .mc-k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dim)}
.mol-cap .mc-v{font-size:10px;color:var(--mist);line-height:1.3;word-break:break-word}

/* --- interactive COA chromatogram --- */
.coa-chart-live{padding:12px 14px 11px}
.cg-head{display:flex;justify-content:space-between;align-items:baseline;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:8px}
.cg-head .mono{color:var(--mist);letter-spacing:.05em;text-transform:none}
.cg-plot{position:relative;width:100%;height:152px;cursor:crosshair;touch-action:none}
.cg-plot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cg-brush{position:absolute;top:0;bottom:22px;z-index:3;background:rgba(231,192,106,.16);border-left:1px solid rgba(231,192,106,.6);border-right:1px solid rgba(231,192,106,.6);pointer-events:none}
.cg-tip{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:7px;border:1px solid var(--line);background:rgba(10,8,6,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.5);white-space:nowrap}
.cg-tip b{font-size:10.5px;color:var(--paper);font-weight:600}
.cg-tip span{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--mist)}
.cg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.cg-controls{display:flex;gap:8px;flex-wrap:wrap}
.cg-btn{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;color:var(--mist);border:1px solid var(--line);border-radius:100px;padding:7px 12px;transition:color .2s,border-color .2s,background .2s;min-height:34px}
.cg-btn:hover{color:var(--paper);border-color:rgba(var(--accent-rgb),.4)}
.cg-btn .cg-sw{width:24px;height:13px;border-radius:100px;background:rgba(255,255,255,.12);position:relative;transition:background .2s;flex:none}
.cg-btn .cg-sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--mist);transition:transform .2s,background .2s}
.cg-btn.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.45)}
.cg-btn.on .cg-sw{background:rgba(var(--accent-rgb),.4)}
.cg-btn.on .cg-sw::after{transform:translateX(11px);background:var(--accent)}
.cg-reset{color:var(--accent-dim)}
.cg-hint{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dim)}

/* --- shared-element view transition: vial morph --- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(vialmorph){ animation-duration:.52s; animation-timing-function:cubic-bezier(.22,.61,.36,1); }
  ::view-transition-old(vialmorph),::view-transition-new(vialmorph){ animation-duration:.52s; mix-blend-mode:normal; height:100%; }
  ::view-transition-old(root),::view-transition-new(root){ animation-duration:.34s; }
}

@media(max-width:680px){
  .qv-vis.show-mol .vial-real{position:absolute}
  .mol-cap{max-width:54%}
  .cg-plot{height:138px}
}
@media (prefers-reduced-motion: reduce){
  .mol3d{cursor:default}
}

/* ============================================================
   CINEMATIC LAYER  (dust · cart flight · cascade · beam)
   ============================================================ */
.dust-canvas{position:fixed;inset:0;z-index:1180;pointer-events:none;mix-blend-mode:screen;opacity:.6}

.vial-fly{position:fixed;z-index:1700;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;filter:drop-shadow(0 10px 26px rgba(231,192,106,.55)) drop-shadow(0 0 18px rgba(231,192,106,.4));will-change:transform,opacity}

.cart-btn.cart-catch{animation:cartCatch .5s var(--ease-out)}
@keyframes cartCatch{0%{transform:scale(1)}35%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:scale(1)}}

@media (prefers-reduced-motion: no-preference){
  .casc-in{animation:cascIn .72s var(--ease-out) both;animation-delay:var(--casc,0ms)}
  @keyframes cascIn{
    from{opacity:0;transform:translateY(46px) rotateX(9deg) scale(.97);filter:blur(7px)}
    60%{filter:blur(0)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
}

.scroll-beam{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1600;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#cf9f4a,#f6e1a4 60%,#fffaef);box-shadow:0 0 12px rgba(231,192,106,.6);pointer-events:none}

@media(max-width:680px){ .dust-canvas{opacity:.4} }

/* catalog live HPLC trace band */
.catalog{position:relative}
.cat-head{position:relative;z-index:1}
.cat-trace-band{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;height:160px;z-index:0;pointer-events:none;opacity:.7;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,#000 55%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.cat-trace-band canvas{width:100%;height:100%;display:block}
@media(max-width:680px){ .cat-trace-band{height:120px;top:-10px;opacity:.55} }



/* accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--abyss-2);color:var(--paper);padding:10px 18px;border:1px solid var(--line);border-radius:0 0 10px 0;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}


/* ============================================================
   POLISH — keyboard focus + print (added site-wide)
   ============================================================ */
:focus-visible{outline:2px solid #e7c06a;outline-offset:2px;border-radius:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #e7c06a;outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline-offset:0}
:focus:not(:focus-visible){outline:none}

/* ============================================================
   MOBILE BOTTOM TAB BAR (iOS-style) — customer pages only
   ============================================================ */
.mtabbar{display:none}
.mtabbar a,.mtabbar button{-webkit-tap-highlight-color:transparent}
@media(max-width:680px){
  .mtabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:1250;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(10,8,5,.9);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mtabbar a,.mtabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:56px;position:relative;color:var(--mist);
    font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    transition:color .18s;
  }
  .mtabbar a:active,.mtabbar button:active{color:var(--paper)}
  .mtabbar svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6}
  .mtabbar .on{color:var(--accent)}
  .mt-badge{
    position:absolute;top:5px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px;
    border-radius:100px;background:var(--accent);color:var(--ink);font-size:9px;font-weight:700;
    line-height:16px;text-align:center;display:none;
  }
  .mt-badge.show{display:block}
  /* keep page content clear of the bar */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* hide the bar while a drawer/menu/overlay owns the screen */
  body.lock .mtabbar{transform:translateY(110%);pointer-events:none}
  /* lift other fixed UI above the bar */
  .compare-tray{bottom:calc(66px + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(70px + env(safe-area-inset-bottom))}
  body.tray-open .toasts{bottom:calc(134px + env(safe-area-inset-bottom))}
  .tweaks{bottom:calc(66px + env(safe-area-inset-bottom))}
  .scroll-hint{display:none}
  /* the top-nav cart button is redundant once the tab bar carries it */
  .nav .cart-btn{display:none}
}
.mtabbar{transition:transform .3s var(--ease-out)}

@media print{
  .promobar,.nav,#nav,.mobile-nav,.mtabbar,.cursor-dot,.cursor-ring,.grain,.toasts,#tweaks,.tweaks,.cart-btn,.hamburger,.drawer,#drawer,.cart-backdrop,.co-modal,.co-backdrop,.thanks-backdrop,.thanks-modal,.cmdk,.cmdk-backdrop,.gate,#gate,.pdp-photo-slot,.skip-link,.compare-tray,.recent-rail{display:none !important}
  html,body{background:#fff !important}
  body{color:#141414 !important}
  main,.page-main{padding-top:0 !important}
  a{color:#141414 !important;text-decoration:none !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none !important}
}


/* price per mg on catalog cards */
.card-price .price-permg{width:100%;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--accent-dim);margin-top:2px;order:9}

/* cross-page (MPA) view transitions */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}

/* ============================================================
   iOS — landscape-notch gutters + tap responsiveness
   ============================================================ */
/* remove the 300ms tap delay / double-tap zoom on controls */
a,button,summary,label,select,.pill,.fchip,.tb-btn,.btn,.stepper button,.li-stepper button{touch-action:manipulation}

/* keep gutters clear of the sensor housing in landscape (env is 0 in portrait,
   so max() never shrinks the design padding) */
.wrap{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
@media(max-width:680px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .mobile-nav{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
  .mtabbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
.drawer-head,.ship-meter,.drawer-items,.drawer-foot{padding-right:calc(24px + env(safe-area-inset-right))}

/* ---- Coming Soon overlay ---- */
.cs-wrap { position: relative; }
.cs-wrap .vshot { opacity: 0.25; }
.cs-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cs-overlay strong {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  background: rgba(8,7,6,.55);
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(231,192,106,.3);
}
.cs-price { filter: blur(5px); user-select: none; pointer-events: none; }

/* ---- Pack selector (1 vial / 3-pack / 5-pack) ---- */
.card-vol-hint {
  font-size: 11px;
  color: var(--accent);
  opacity: 0.7;
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: .02em;
  font-style: italic;
}