:root{
  --bg:#060504; --bg-2:#0c0a08; --panel:rgba(16,13,10,.82);
  --ink:#f3ece1; --ink-2:#bdb1a0; --ink-3:#877c6e;
  --cu:#c9875a; --cu-hi:#f2c79b; --cu-lo:#7a4a2c; --champ:#e8d2ad;
  --line:rgba(201,135,90,.30); --line-soft:rgba(201,135,90,.16);
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.75,.15,1);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden; background:#060504}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; background-repeat:no-repeat; min-height:100vh;
}
body::before{ /* subtle textured darkness */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cu-hi); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page{position:relative; z-index:1;
  background-image:
    radial-gradient(1200px 560px at 50% 520px, rgba(201,120,70,.13), transparent 70%),
    radial-gradient(900px 600px at 12% 80px, rgba(120,80,50,.10), transparent 70%),
    radial-gradient(900px 600px at 92% 120px, rgba(120,80,50,.08), transparent 70%);
  background-repeat:no-repeat}
.caps{text-transform:uppercase; letter-spacing:.24em}

/* ---------- Header ---------- */
.top{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:14px clamp(16px,4vw,56px); border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(6,5,4,.92),rgba(6,5,4,.7)); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; justify-self:start}
.brand-mark{height:46px; width:auto; display:block}
.brand-rule{width:1px; height:40px; background:linear-gradient(180deg,transparent,var(--cu),transparent)}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text .wm{font-family:var(--serif); font-size:21px; letter-spacing:.42em; font-weight:500}
.brand-text .tag{font-size:9.5px; letter-spacing:.38em; color:var(--ink-2); margin-top:3px}
.nav{display:flex; gap:clamp(18px,2.6vw,44px)}
.nav a{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:12px 2px; position:relative; transition:color .25s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:-6px; right:-6px; bottom:4px; height:1px; background:linear-gradient(90deg,transparent,var(--cu-hi),transparent)}
.nav a.nav-committing{animation:nav-commit .19s cubic-bezier(.16,1,.3,1);color:#ffe1c0;text-shadow:0 0 22px rgba(239,166,99,.72)}
@keyframes nav-commit{50%{transform:translateY(-2px) scale(1.07)}100%{transform:none}}
.tools{display:flex; gap:6px; justify-self:end; align-items:center}
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:none; border:1px solid transparent; cursor:pointer; color:var(--ink-2); position:relative; transition:color .2s,border-color .2s;
}
.icon-btn:hover{color:var(--cu-hi); border-color:var(--line-soft)}
.icon-btn svg{width:21px; height:21px}
.badge{position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:10.5px; line-height:18px; text-align:center; background:#2a2119; border:1px solid var(--line); color:var(--champ)}
.badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35); background:var(--cu-lo)}}

/* ---------- Intro / search ---------- */
.intro{
  display:grid; grid-template-columns:minmax(200px,1fr) minmax(0,760px) minmax(160px,1fr); gap:28px;
  padding:34px clamp(16px,4vw,56px) 8px; align-items:start;
}
.intro h1{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.3vw,32px); letter-spacing:.2em; line-height:1.2; margin:0; text-transform:uppercase}
.intro .kicker{margin-top:14px; font-size:10.5px; letter-spacing:.26em; color:var(--ink-2); text-transform:uppercase; line-height:1.9}
.intro .words{justify-self:end; text-align:right; font-family:var(--serif); font-size:14px; letter-spacing:.34em; color:var(--ink-2); line-height:1.75; text-transform:uppercase}
.intro .words::after{content:""; display:block; width:88px; height:1px; margin:14px 0 0 auto; background:linear-gradient(90deg,transparent,var(--cu))}

.search{
  position:relative; display:flex; align-items:center; gap:12px; height:58px; padding:0 10px 0 22px;
  border-radius:30px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(28,22,17,.75),rgba(10,8,7,.8));
  box-shadow:inset 0 1px 0 rgba(242,199,155,.08), 0 10px 40px rgba(0,0,0,.5);
  transition:border-color .3s, box-shadow .3s;
}
.search:focus-within{border-color:rgba(242,199,155,.6); box-shadow:inset 0 1px 0 rgba(242,199,155,.1), 0 0 0 4px rgba(201,135,90,.12), 0 10px 40px rgba(0,0,0,.5)}
.search svg.lens{width:20px; height:20px; color:var(--ink-2); flex:none}
.search input{flex:1; min-width:0; height:100%; background:none; border:0; outline:0; font-size:15px; letter-spacing:.02em; color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{width:36px; height:36px; border-radius:50%; border:0; background:none; color:var(--ink-2); cursor:pointer; display:none; place-items:center}
.search.has-q .clear{display:grid}
.search .clear:hover{color:var(--ink)}
.search kbd{font-family:var(--sans); font-size:11px; color:var(--ink-3); border:1px solid var(--line-soft); border-radius:6px; padding:2px 7px}
.search.has-q kbd{display:none}
.ring{width:38px; height:38px; border-radius:50%; flex:none; position:relative;
  background:radial-gradient(circle, transparent 42%, rgba(242,199,155,.9) 46%, rgba(201,135,90,.5) 52%, transparent 58%);
  box-shadow:0 0 18px rgba(201,135,90,.45);
}
.ring::after{content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(242,199,155,.45)}

.filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; align-items:center}
.seg{display:flex; gap:4px; padding:4px; border:1px solid var(--line-soft); border-radius:24px; background:rgba(12,10,8,.6)}
.seg-label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); padding:0 8px 0 12px; align-self:center}
.chip{
  min-height:36px; padding:0 16px; border-radius:20px; border:1px solid transparent; background:none; cursor:pointer;
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-2); transition:all .25s var(--ease); white-space:nowrap;
}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink); border-color:rgba(242,199,155,.55); background:linear-gradient(180deg,rgba(201,135,90,.18),rgba(201,135,90,.05)); box-shadow:0 0 16px rgba(201,135,90,.18)}
.select{position:relative}
.select select{
  appearance:none; -webkit-appearance:none; min-height:46px; padding:0 40px 0 18px; border-radius:24px; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(12,10,8,.6); font-size:12.5px; letter-spacing:.06em; color:var(--ink-2);
}
.select select:hover{color:var(--ink); border-color:var(--line)}
.select select option{background:#14100c; color:var(--ink)}
.select::after{content:""; position:absolute; right:18px; top:50%; width:7px; height:7px; border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.view-toggle .chip{display:flex; align-items:center; gap:8px}
.view-toggle svg{width:16px; height:16px}
.result-meta{margin-top:12px; text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); min-height:1.5em}

/* ---------- Wheel ---------- */
.stage-wrap{position:relative; padding:6px 0 0; overflow:hidden; overflow:clip}
.stage{
  position:relative; height:470px; perspective:1500px; perspective-origin:50% 40%;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none;
  margin:0 auto; max-width:1500px;
}
.stage::before{ /* spotlight behind centre card */
  content:""; position:absolute; left:50%; top:44%; width:520px; height:420px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(242,170,110,.22), rgba(201,135,90,.06) 60%, transparent);
  pointer-events:none; z-index:0;
}
.track{position:absolute; left:2%; width:96%; top:57%; height:190px; z-index:0; pointer-events:none; overflow:visible}
.cards{position:absolute; inset:0; transform-style:preserve-3d; z-index:2}
.card{
  --cw:236px; --ch:326px;
  position:absolute; left:50%; top:44%; width:var(--cw); height:var(--ch);
  border-radius:var(--radius); padding:0; cursor:pointer; text-align:center;
  border:1px solid rgba(201,135,90,.34);
  background:
    linear-gradient(180deg,rgba(255,236,214,.05),transparent 30%),
    linear-gradient(180deg,#1a1511 0%,#0d0b09 60%,#080706 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(242,199,155,.12);
  transition:transform .62s var(--ease), filter .62s var(--ease), opacity .45s var(--ease), box-shadow .5s, border-color .5s;
  will-change:transform; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden;
}
.card.no-anim{transition:none!important}
.card::before{ /* inner frame */
  content:""; position:absolute; inset:7px; border-radius:calc(var(--radius) - 5px); border:1px solid rgba(201,135,90,.14); pointer-events:none;
}
.card::after{ /* glass sheen */
  content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,240,220,.06) 45%,transparent 60%); pointer-events:none;
}
.card .v{position:absolute; left:50%; top:18px; width:70%; transform:translateX(-50%)}
.card .v svg{width:100%; height:auto; display:block; filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.card .nm{position:relative; font-family:var(--serif); font-size:23px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; line-height:1.05; padding:0 12px}
.card .amt{position:relative; font-size:11px; letter-spacing:.22em; color:var(--ink-2); margin:6px 0 22px; text-transform:uppercase}
.card.is-center{
  border-color:rgba(242,199,155,.85);
  box-shadow:0 0 0 1px rgba(242,199,155,.35), 0 0 34px rgba(221,140,85,.55), 0 0 90px rgba(201,120,70,.3), 0 40px 70px rgba(0,0,0,.7), inset 0 0 30px rgba(201,135,90,.18);
}
.card.is-center .amt{color:var(--champ)}
.card:hover:not(.is-center){border-color:rgba(242,199,155,.6)}
.card:focus-visible{outline-offset:6px}

.arrow{
  position:absolute; top:44%; transform:translateY(-50%); z-index:30; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(242,199,155,.55); background:rgba(8,7,6,.7); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 0 18px rgba(201,135,90,.2); transition:all .25s var(--ease);
}
.arrow:hover{background:rgba(201,135,90,.18); box-shadow:0 0 26px rgba(201,135,90,.4)}
.arrow svg{width:20px; height:20px}
.arrow.prev{left:clamp(10px,3vw,48px)} .arrow.next{right:clamp(10px,3vw,48px)}

.progress{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:-14px; position:relative; z-index:5}
.progress .mini{width:44px; height:44px; border:0; background:none; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; border-radius:50%}
.progress .mini:hover{color:var(--cu-hi)}
.progress .mini svg{width:18px; height:18px}
.bar{position:relative; width:min(220px,28vw); height:1px; background:var(--line-soft)}
.bar i{position:absolute; top:-1px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--cu),var(--cu-hi)); box-shadow:0 0 8px var(--cu); transition:left .5s var(--ease), width .5s var(--ease)}
.count{font-size:12px; letter-spacing:.22em; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:70px; text-align:center}
.hint{text-align:center; font-size:10.5px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; margin-top:6px}

/* ---------- Grid view ---------- */
.grid{display:none; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; max-width:1180px; margin:10px auto 0; padding:0 clamp(16px,4vw,56px)}
.view-grid .grid{display:grid}
.view-grid .stage-wrap{display:none}
.grid .card{position:relative; left:auto; top:auto; --cw:auto; --ch:270px; width:100%; transform:none!important; filter:none!important; opacity:1!important}
.grid .card .v{width:52%; top:18px}
.grid .card .nm{font-size:20px}
.grid .card:hover{transform:translateY(-3px)!important}

/* ---------- Empty ---------- */
.empty{display:none; text-align:center; padding:70px 16px 60px}
.is-empty .empty{display:block}
.is-empty .stage-wrap, .is-empty .grid, .is-empty .panel-wrap{display:none!important}
.empty h2{font-family:var(--serif); font-weight:400; font-size:28px; letter-spacing:.06em; margin:0 0 10px}
.empty p{color:var(--ink-2); margin:0 0 24px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:26px; cursor:pointer;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; font-weight:400;
  border:1px solid rgba(242,199,155,.6); background:linear-gradient(180deg,rgba(201,135,90,.2),rgba(201,135,90,.04)); color:var(--ink);
  transition:all .25s var(--ease); box-shadow:inset 0 1px 0 rgba(242,199,155,.15);
}
.btn:hover{background:linear-gradient(180deg,rgba(201,135,90,.32),rgba(201,135,90,.08)); box-shadow:0 0 22px rgba(201,135,90,.3), inset 0 1px 0 rgba(242,199,155,.2)}
.btn.ghost{border-color:var(--line); background:none; box-shadow:none; color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink); border-color:rgba(242,199,155,.55)}
.size-select select{min-height:48px; min-width:118px; border-color:rgba(242,199,155,.6); color:var(--ink); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase}
.size-select select:disabled{cursor:default; opacity:1}
.p-price{font-family:var(--serif); font-size:30px; letter-spacing:.04em; color:var(--champ); margin:10px 0 4px}
.p-price .price-was{text-decoration:line-through; opacity:.5; font-size:.7em; margin-right:10px}
.p-price .aff-note{font-family:Inter,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#a9d6a9; margin-left:8px}
.p-price.pending{font-family:inherit; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.size-select:has(select:disabled)::after{display:none}
.size-select:has(select:disabled) select{padding-right:18px}
.btn svg{width:15px; height:15px}
.btn.added{border-color:rgba(242,199,155,.35); color:var(--champ)}

/* ---------- Detail panel ---------- */
.panel-wrap{position:relative; padding:34px clamp(16px,4vw,56px) 70px}
.side-words{position:absolute; top:150px; font-family:var(--serif); font-size:14px; letter-spacing:.3em; line-height:1.9; color:var(--ink-2); text-transform:uppercase; display:none}
.side-words.l{left:clamp(16px,3vw,56px)} .side-words.r{right:clamp(16px,3vw,56px); text-align:right}
@media (min-width:1720px){.side-words{display:block}}
.panel{
  position:relative; max-width:1140px; margin:0 auto; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(24,19,15,.9),rgba(10,8,7,.94));
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(242,199,155,.08);
  display:grid; grid-template-columns:250px minmax(0,1fr) minmax(0,1.08fr); gap:34px; padding:30px 34px; scroll-margin-top:110px;
}
.panel::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(500px 260px at 14% 40%, rgba(201,135,90,.12), transparent 70%)}
.panel.pulse{animation:pulse 1s var(--ease)}
@keyframes pulse{30%{box-shadow:0 0 0 1px rgba(242,199,155,.5), 0 0 60px rgba(201,135,90,.35), 0 40px 90px rgba(0,0,0,.6)}}
.swap{transition:opacity .28s var(--ease), transform .28s var(--ease)}
.swapping .swap{opacity:0; transform:translateY(6px)}
.p-vial{display:flex; align-items:center; justify-content:center; position:relative}
.p-vial svg{width:100%; max-width:210px; height:auto; filter:drop-shadow(0 24px 30px rgba(0,0,0,.7))}
.p-vial::after{content:""; position:absolute; bottom:4%; left:15%; right:15%; height:26px; background:radial-gradient(closest-side,rgba(201,135,90,.35),transparent); filter:blur(4px); z-index:-1}
.eyebrow{font-size:10.5px; letter-spacing:.26em; color:var(--cu-hi); text-transform:uppercase; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tag-sample{border:1px dashed rgba(242,199,155,.45); color:var(--champ); border-radius:12px; padding:2px 9px; font-size:9.5px; letter-spacing:.2em}
.p-info h2{font-family:var(--serif); font-weight:500; font-size:clamp(30px,3vw,40px); letter-spacing:.08em; text-transform:uppercase; margin:8px 0 2px; line-height:1.05}
.p-sub{font-size:11px; letter-spacing:.26em; color:var(--ink-2); text-transform:uppercase}
.facts{margin:20px 0 0; display:grid; grid-template-columns:auto 1fr; border-top:1px solid var(--line-soft)}
.facts dt,.facts dd{margin:0; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
.facts dt{color:var(--ink-2); padding-right:24px; white-space:nowrap}
.facts dd{color:var(--ink)}
.facts .pending{color:var(--ink-3); font-style:italic}
.facts .none{color:var(--ink-2)}
.src{font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-soft); border-radius:8px; padding:1px 6px; margin-left:7px; vertical-align:1px; cursor:help}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.fine{font-size:11.5px; color:var(--ink-3); margin-top:12px; line-height:1.55}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line-soft)}
.tab{min-height:42px; padding:0 14px; border:1px solid transparent; border-bottom:0; border-radius:10px 10px 0 0; background:none; cursor:pointer; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:-1px; white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-color:var(--line); background:linear-gradient(180deg,rgba(201,135,90,.12),rgba(16,13,10,1) 90%)}
.tabpanel{padding-top:16px}
.tabpanel[hidden]{display:none}
.mol{position:relative; border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; aspect-ratio:16/9.6;
  background:radial-gradient(ellipse at 50% 55%, rgba(201,135,90,.1), transparent 65%), #080706}
.mol canvas{position:absolute; inset:0; width:100%; height:100%}
.mol img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:24px; filter:sepia(.2) saturate(.8) contrast(1.08); opacity:.94}
.mol img[hidden],.mol canvas[hidden]{display:none}
.mol .stamp{position:absolute; left:12px; top:12px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--champ); border:1px solid rgba(242,199,155,.35); border-radius:10px; padding:3px 9px; background:rgba(6,5,4,.7)}
.mol canvas.grabbing{cursor:grabbing}
.mol-zoom{position:absolute; right:10px; bottom:10px; display:flex; gap:4px}
.mol-zoom button{min-width:36px; height:36px; padding:0 10px; border-radius:18px; border:1px solid var(--line); background:rgba(6,5,4,.8); color:var(--ink-2); cursor:pointer; font-size:14px; letter-spacing:.06em}
.mol-zoom button:hover:not(:disabled){color:var(--ink); border-color:rgba(242,199,155,.55)}
.mol-zoom button:disabled{opacity:.35; cursor:default}
.mol-hint{margin-top:6px; text-align:center; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); pointer-events:none}
@media (max-width:640px){ .mol-hint{display:none} }
@media (hover:none){ .mol-hint{display:none} }
.mol-cap sub,.facts sub,.kv sub{font-size:.72em; line-height:0}
.mol-cap{margin-top:10px; font-size:12px; color:var(--ink-3); text-align:center}
.kv{display:grid; grid-template-columns:auto 1fr; gap:0 20px; font-size:13px}
.kv div{padding:9px 0; border-bottom:1px solid var(--line-soft)}
.kv .k{color:var(--ink-2)}
.coa-state{border:1px solid var(--line-soft); border-radius:12px; padding:22px; text-align:center; background:rgba(8,7,6,.6)}
.coa-state svg{width:34px; height:34px; color:var(--cu); margin-bottom:6px}
.coa-state h3{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:.06em; margin:0 0 6px}
.coa-state p{margin:0 0 16px; color:var(--ink-2); font-size:13px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line-soft); padding:26px clamp(16px,4vw,56px); display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center}
.foot .brand-mark{height:38px}
.foot nav{display:flex; gap:26px; flex-wrap:wrap; justify-content:center}
.foot nav a{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:8px 0}
.foot nav a:hover{color:var(--ink)}
.foot .line{justify-self:end; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); text-align:right}
.disclosure{padding:0 clamp(16px,4vw,56px) 28px; text-align:center; font-size:11.5px; color:var(--ink-3)}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:60; pointer-events:none;
  padding:12px 20px; border-radius:24px; border:1px solid var(--line); background:rgba(14,11,9,.95); font-size:13px; color:var(--ink); box-shadow:0 20px 40px rgba(0,0,0,.6);
  transition:all .35s var(--ease); max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .intro{grid-template-columns:minmax(0,1fr); gap:18px; text-align:center}
  .intro .words{display:none}
  .intro .kicker br{display:none}
  .panel{grid-template-columns:200px minmax(0,1fr)}
  .p-visual{grid-column:1 / -1}
}
@media (max-width:900px){
  .top{grid-template-columns:auto 1fr auto}
  .nav{display:none}
  .brand-text .tag{display:none}
  .foot{grid-template-columns:1fr; justify-items:center; text-align:center}
  .foot .line{justify-self:center; text-align:center}
}
@media (max-width:640px){
  body{font-size:14px}
  .brand-mark{height:36px}
  .brand-text .wm{font-size:17px; letter-spacing:.34em}
  .brand-rule{height:30px}
  .tools .icon-btn.acct{display:none}
  .intro{padding-top:22px}
  .intro .kicker{display:none}
  .search{height:52px}
  .search kbd{display:none}
  .ring{display:none}
  .filters{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin:14px -16px 0; padding:2px 16px 6px; scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters > *{flex:none}
  .stage{height:310px}
  .stage::before{width:340px; height:280px}
  .track{top:60%; height:120px}
  .card{--cw:150px; --ch:212px}
  .card .v{top:12px}
  .card .nm{font-size:15px; padding:0 8px}
  .card .amt{font-size:9.5px; letter-spacing:.18em; margin:4px 0 15px}
  .arrow{display:none}
  .hint{padding:0 16px}
  .panel{grid-template-columns:1fr; padding:22px 18px; gap:22px}
  .p-vial svg{max-width:150px}
  .p-info{text-align:left}
  .actions .btn{flex:1 1 100%}
  .actions .size-select, .actions .size-select select{flex:1 1 100%; width:100%}
  .tabs{overflow-x:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .grid .card{--ch:240px}
  .grid .card .nm{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important; animation-duration:0s!important; scroll-behavior:auto!important}
}

/* Product-first introduction without decorative slogan columns. */
.intro{grid-template-columns:minmax(210px,.72fr) minmax(0,1.8fr)}
@media(max-width:900px){.intro{grid-template-columns:minmax(0,1fr)}}

/* Unified site header, centered catalog controls, and restrained living light. */
.top{grid-template-columns:auto 1fr auto;gap:28px;min-height:82px;padding:10px clamp(20px,4vw,64px);border-bottom:1px solid rgba(208,151,96,.22);background:rgba(7,5,4,.94);backdrop-filter:blur(16px);z-index:200}
.brand{gap:13px}.brand-mark{width:53px;height:40px;object-fit:contain}.brand-rule{height:30px;background:rgba(211,158,107,.34)}
.brand-text{gap:3px}.brand-text .wm{font:600 15px Orbitron,sans-serif;letter-spacing:.12em}.brand-text .tag{margin:0;font:500 5px Orbitron,sans-serif;letter-spacing:.23em;color:#9b8068}
.nav{justify-content:center;gap:clamp(18px,3vw,42px)}.nav a{font:500 8px Orbitron,sans-serif;letter-spacing:.16em;padding:12px 2px}.tools{gap:6px}.icon-btn{width:39px;height:39px;border-radius:0}.icon-btn svg{width:20px;height:20px}
.badge{right:-2px;top:-3px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:0;background:#c7834b;color:#100b08;font:700 8px Inter,sans-serif;line-height:17px}
.intro>div:last-child{grid-column:1/-1;width:min(100%,1100px);justify-self:center}.filters{width:100%;justify-content:center}

.living-logo-host{--logo-light-x:50%;position:relative;isolation:isolate;overflow:hidden}
.living-logo-host .living-logo-scan{position:absolute;z-index:5;pointer-events:none;left:-35%;top:-70%;width:24%;height:240%;opacity:0;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,230,198,.34),transparent);filter:blur(2px);transition:left .9s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.living-logo-host:hover .living-logo-scan,.living-logo-host:focus-visible .living-logo-scan{left:120%;opacity:.9}
.living-logo-image{transition:filter .45s ease,transform .65s cubic-bezier(.16,1,.3,1)}.living-logo-host:hover .living-logo-image,.living-logo-host:focus-visible .living-logo-image{filter:brightness(1.24) saturate(1.18) drop-shadow(0 0 17px rgba(236,164,99,.5));transform:translateY(-1px) scale(1.025)}
.alive-surface{--alive-x:50%;--alive-y:50%;position:relative;isolation:isolate}.alive-surface-light{position:absolute;z-index:8;inset:0;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--alive-x) var(--alive-y),rgba(231,162,99,.12),transparent 68%);mix-blend-mode:screen;transition:opacity .45s ease}.alive-surface:hover>.alive-surface-light{opacity:1}
@media(max-width:900px){.top{grid-template-columns:1fr auto}.nav{display:none}.brand-text .tag{display:none}}
@media(max-width:640px){.top{padding-inline:15px;gap:10px}.brand-rule{display:none}.brand-mark{width:43px;height:34px}.brand-text .wm{font-size:12px}.icon-btn{width:35px;height:35px}.filters{justify-content:flex-start}}
@media(hover:none),(pointer:coarse){.living-logo-host .living-logo-scan,.alive-surface-light{display:none}.living-logo-host .living-logo-image{filter:none;transform:none}}
@media(prefers-reduced-motion:reduce){.living-logo-host .living-logo-scan,.alive-surface-light{display:none!important}.living-logo-image{transition:none!important;transform:none!important}}