/* ============================================================
   COMPONENTS — logo, nav, vial, cart, footer, toast
   ============================================================ */

/* ---------- Logo lockup ---------- */
.shard{ display:block; color:var(--on-dark); filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.logo--dark .shard{ color:var(--on-light); }
.logo{ display:flex; align-items:center; gap:13px; cursor:pointer; user-select:none; }
.logo__type{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:0.24em; color:var(--on-dark); }
.logo__sub{ display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:500; font-size:8.5px; letter-spacing:0.42em; color:var(--gold); margin-top:5px; padding-left:2px; }
.logo__sub i{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim)); opacity:.6; min-width:10px; }
.logo__sub i:last-child{ background:linear-gradient(90deg, var(--gold-dim), transparent); }
.logo--stacked{ flex-direction:column; gap:14px; text-align:center; }
.logo--stacked .logo__sub i{ min-width:22px; }
.logo--dark .logo__name{ color:var(--on-light); }

/* ---------- Announcement bar ---------- */
.announce{ background:var(--black); color:var(--on-dark-soft); text-align:center; font-family:var(--display); font-weight:500; font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase; padding:9px 16px; border-bottom:1px solid var(--line-darker); }
.announce b{ color:var(--gold); font-weight:600; }

/* ---------- Header ---------- */
.hdr{ position:sticky; top:0; z-index:60; background:rgba(8,8,9,0.82); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); border-bottom:1px solid var(--line-darker); transition:background .4s var(--ease), border-color .4s; }
.hdr--solid{ background:var(--black); }
.hdr__bar{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav{ display:flex; align-items:center; gap:6px; }
.nav__link{ position:relative; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-soft); padding:10px 15px; display:inline-flex; align-items:center; gap:6px; transition:color .3s; }
.nav__link:hover, .nav__link.active{ color:var(--on-dark); }
.nav__link .chev{ transition:transform .3s var(--ease); opacity:.7; }
.nav__item:hover .chev{ transform:rotate(180deg); }
.nav__item{ position:relative; }
.nav__util{ display:flex; align-items:center; gap:4px; }
.iconbtn{ position:relative; width:42px; height:42px; display:grid; place-items:center; color:var(--on-dark-soft); border-radius:2px; transition:color .3s, background .3s; }
.iconbtn:hover{ color:var(--on-dark); background:rgba(255,255,255,0.06); }
.iconbtn__count{ position:absolute; top:5px; right:4px; min-width:16px; height:16px; padding:0 4px; background:var(--gold); color:#161310; font-family:var(--display); font-weight:700; font-size:9.5px; border-radius:9px; display:grid; place-items:center; line-height:1; }

/* mega dropdown */
.mega{ position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%) translateY(8px); width:min(760px, 86vw); background:var(--ink); border:1px solid var(--line-dark); box-shadow:0 40px 90px -30px rgba(0,0,0,0.9); padding:30px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:70; }
.nav__item:hover .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
.mega__card{ display:flex; gap:16px; padding:16px; border:1px solid transparent; transition:background .3s, border-color .3s; cursor:pointer; }
.mega__card:hover{ background:rgba(255,255,255,0.03); border-color:var(--line-dark); }
.mega__ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border:1px solid var(--line-dark); color:var(--gold); }
.mega__t{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:0.14em; color:var(--on-dark); }
.mega__d{ font-size:12px; color:var(--on-dark-faint); margin-top:4px; letter-spacing:0.02em; }
.mega__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-dark); }
.mega__foot .eyebrow{ color:var(--on-dark-faint); }

/* mobile nav */
.burger{ display:none; }
.mnav{ position:fixed; inset:0; z-index:80; background:var(--black); transform:translateX(100%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; display:flex; flex-direction:column; padding:24px var(--pad); overflow:auto; }
.mnav.open{ transform:none; visibility:visible; }
.mnav__top{ display:flex; justify-content:space-between; align-items:center; height:var(--nav-h); margin:calc(-24px) calc(0px) 18px; }
.mnav__links{ display:flex; flex-direction:column; }
.mnav__link{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-dark); padding:16px 0; border-bottom:1px solid var(--line-darker); display:flex; justify-content:space-between; align-items:center; }
.mnav__sub{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 18px; border-bottom:1px solid var(--line-darker); }
.mnav__chip{ font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:0.14em; color:var(--gold); border:1px solid var(--line-dark); padding:8px 12px; }

/* ---------- VIAL MOCK ---------- */
.vial{ --w:148px; position:relative; width:var(--w); margin:0 auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
.vial--hero{ --w:210px; }
.vial--detail{ --w:240px; }
.vial--card{ --w:128px; }
.vial__cap{ position:relative; width:calc(var(--w)*0.5); margin:0 auto; }
.vial__crimp{ display:block; height:calc(var(--w)*0.072); border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#c9c9ce,#8b8b91 30%,#3e3e43 60%,#6b6b71 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); }
.vial__caplip{ display:block; height:calc(var(--w)*0.118); margin-top:2px; border-radius:3px 3px 4px 4px;
  background:linear-gradient(180deg,#2a2a2e,#0e0e10 70%,#1c1c1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.6); }
.vial__caplip::after{ content:""; position:absolute; left:14%; right:14%; bottom:-2px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(180deg,#9a9aa0,#46464b); }
.vial__glass{ position:relative; width:100%; aspect-ratio:0.46/1; margin-top:-1px; border-radius:6px 6px 12px 12px; overflow:hidden;
  background:linear-gradient(100deg, rgba(60,60,66,0.55) 0%, rgba(150,150,158,0.28) 18%, rgba(28,28,32,0.5) 50%, rgba(120,120,128,0.22) 82%, rgba(50,50,56,0.5) 100%), #161619;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), inset 14px 0 24px -14px rgba(255,255,255,0.4), inset -10px 0 20px -10px rgba(0,0,0,0.7); }
.vial__fluid{ position:absolute; left:0; right:0; bottom:0; height:78%; background:linear-gradient(180deg, rgba(20,20,23,0.2), rgba(8,8,10,0.5)); }
.vial__shine{ position:absolute; top:4%; left:16%; width:9%; height:62%; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); filter:blur(1px); }
.vial__label{ position:absolute; left:7%; right:7%; top:14%; bottom:8%; background:linear-gradient(180deg,#101012,#070708); border:1px solid rgba(255,255,255,0.08); border-radius:3px; display:flex; flex-direction:column; align-items:center; padding:8% 6% 7%; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.5); }
.vial__label .shard{ filter:none; margin-bottom:6%; }
.vial__brand{ font-family:var(--display); font-weight:700; letter-spacing:0.22em; color:#e9e9ec; font-size:calc(var(--w)*0.082); }
.vial__brandsub{ display:flex; align-items:center; gap:4px; font-family:var(--display); font-weight:500; font-size:calc(var(--w)*0.04); letter-spacing:0.34em; color:var(--gold); margin-top:3px; }
.vial__brandsub i{ width:10px; height:1px; background:var(--gold-dim); opacity:.6; }
.vial__pname{ margin-top:auto; font-family:var(--display); font-weight:600; letter-spacing:0.2em; color:var(--gold); font-size:calc(var(--w)*0.092); }
.vial__blend{ font-family:var(--display); font-weight:600; font-size:calc(var(--w)*0.052); letter-spacing:0.08em; color:#cfcfd4; margin-top:4px; }
.vial__mgrow{ display:flex; align-items:center; gap:6px; margin-top:6%; }
.vial__mgrow i{ width:16px; height:1px; background:rgba(255,255,255,0.25); }
.vial__mgrow b{ font-family:var(--display); font-weight:700; font-size:calc(var(--w)*0.066); letter-spacing:0.1em; color:#e9e9ec; }
.vial__ruo{ margin-top:6%; font-family:var(--display); font-weight:500; font-size:calc(var(--w)*0.036); letter-spacing:0.22em; color:var(--on-dark-faint); }

/* ---------- REAL PRODUCT IMAGE ---------- */
.pimg{ position:relative; display:flex; flex-direction:column; align-items:center; }
.pimg img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 26px 30px rgba(0,0,0,0.55)); }
.pimg--hero{ width:clamp(210px, 26vw, 320px); }
.pimg--hero img{ animation:floaty 6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .pimg--hero img{ animation:none; } }
.pimg--detail{ width:min(340px, 78%); }
.pimg--featured{ width:clamp(220px, 30vw, 330px); }
.pimg--card{ width:auto; height:86%; max-height:340px; }
.pimg--card img{ width:auto; height:100%; filter:drop-shadow(0 18px 22px rgba(0,0,0,0.5)); transition:transform .6s var(--ease); }
.pimg--thumb{ width:100%; }
.pimg--thumb img{ filter:none; }
.pimg__reflect{ margin-top:-2%; transform:scaleY(-1); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 42%); mask-image:linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 42%); filter:none !important; opacity:.5; }

/* ---------- Cart drawer ---------- */
.scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .4s; }
.scrim.show{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(440px, 92vw); background:var(--ink); color:var(--on-dark); transform:translateX(100%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; display:flex; flex-direction:column; border-left:1px solid var(--line-dark); }
.drawer.open{ transform:none; visibility:visible; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:24px var(--pad); border-bottom:1px solid var(--line-dark); }
.drawer__title{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:0.2em; }
.drawer__title b{ color:var(--gold); font-weight:700; margin-left:6px; }
.drawer__body{ flex:1; overflow:auto; padding:8px var(--pad); }
.drawer__foot{ padding:22px var(--pad) 26px; border-top:1px solid var(--line-dark); background:var(--obsidian); }
.cline{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line-darker); }
.cline__thumb{ width:62px; height:84px; flex:none; background:linear-gradient(160deg,#1d1d20,#0c0c0e); border:1px solid var(--line-dark); display:grid; place-items:center; }
.cline__thumb img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.cline__main{ flex:1; min-width:0; }
.cline__name{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:0.14em; }
.cline__blend{ font-size:11.5px; color:var(--on-dark-faint); margin-top:3px; letter-spacing:0.04em; }
.cline__row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.cline__price{ font-family:var(--display); font-weight:600; font-size:13px; }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-dark); }
.stepper button{ width:30px; height:30px; display:grid; place-items:center; color:var(--on-dark-soft); transition:color .2s,background .2s; }
.stepper button:hover{ color:var(--on-dark); background:rgba(255,255,255,0.06); }
.stepper span{ min-width:30px; text-align:center; font-family:var(--display); font-weight:600; font-size:12px; }
.cline__rm{ color:var(--on-dark-faint); transition:color .2s; }
.cline__rm:hover{ color:var(--gold); }
.cart-empty{ text-align:center; padding:70px 20px; color:var(--on-dark-faint); }
.cart-empty .shard{ opacity:.4; margin:0 auto 22px; }
.summ{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:13px; color:var(--on-dark-soft); letter-spacing:0.04em; }
.summ--total{ margin-top:14px; padding-top:16px; border-top:1px solid var(--line-dark); color:var(--on-dark); }
.summ--total .summ__v{ font-family:var(--display); font-weight:700; font-size:20px; }
.summ__note{ font-size:11px; color:var(--on-dark-faint); letter-spacing:0.1em; text-transform:uppercase; margin:14px 0 18px; text-align:center; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:120; background:var(--ink); border:1px solid var(--line-dark); color:var(--on-dark); padding:14px 22px; display:flex; align-items:center; gap:12px; box-shadow:0 24px 50px -16px rgba(0,0,0,0.8); opacity:0; pointer-events:none; transition:opacity .4s, transform .4s var(--ease); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast__ic{ width:30px; height:30px; display:grid; place-items:center; background:var(--gold); color:#161310; border-radius:50%; }
.toast b{ font-family:var(--display); font-weight:700; letter-spacing:0.1em; font-size:12px; }
.toast small{ display:block; color:var(--on-dark-faint); font-size:11px; letter-spacing:0.04em; }

@media (max-width: 980px){
  .nav, .nav__util .iconbtn--search{ display:none; }
  .burger{ display:grid; }
}

/* Age Gate */
.age-gate { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.age-gate__box { background: var(--ink); border: 1px solid var(--gold-dim); padding: 40px; border-radius: 4px; text-align: center; max-width: 400px; width: 90%; }
.age-gate__box h2 { margin: 20px 0 10px; font-size: 28px; }
.age-gate__box p { color: var(--on-dark-soft); margin-bottom: 30px; line-height: 1.5; }
.age-gate__btns { display: flex; flex-direction: column; gap: 12px; }

/* Checkout Compliance */
.co__compliance { margin: 24px 0; padding: 16px; background: rgba(197,160,127,0.05); border: 1px solid var(--gold-dim); border-radius: 4px; }
.checkbox { display: flex; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.4; color: var(--on-dark-soft); }
.checkbox input { margin-top: 3px; accent-color: var(--gold); }
.checkbox b { color: var(--gold); }
.checkbox.err { border-color: #ff4d4d; }
.co__err-msg { display: block; margin-top: 8px; color: #ff4d4d; font-size: 12px; font-style: normal; }

/* Legal Page */
.legal-page { padding: 120px 0 80px; min-height: 80vh; }
.legal-content h2 { margin: 32px 0 16px; font-size: 20px; color: var(--gold); }
.legal-content p { margin-bottom: 16px; color: var(--on-dark-soft); }