/* ═════════ GLASS — Ultra-Premium Dark UI + Premium E-commerce UI ═════════
   Black base, subtle neon accents, frosted glass cards, smooth motion, product + cart + checkout UI. */
:root{--neon:#ffd76a;--neon-2:#ffb300;--neon-soft:rgba(255,215,106,.18);--glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.075);
  --glass-line:rgba(255,255,255,.085);--ink:#f5f2ea;--mute:#9a9486;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171}
html{background:#fafafc}
body.ultra:not(.white){background:#030305!important;color:var(--ink);min-height:100vh}
body.ultra:not(.white)::before,body.ultra:not(.white)::after{content:"";position:fixed;z-index:-2;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
body.ultra:not(.white)::before{background:radial-gradient(circle,rgba(255,215,106,.55),transparent 65%);top:-18vmax;left:-14vmax}
body.ultra:not(.white)::after{background:radial-gradient(circle,rgba(255,179,0,.35),transparent 65%);bottom:-22vmax;right:-16vmax;animation-delay:-9s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,4vmax) scale(1.08)}}
body.ultra:not(.white){background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:56px 56px}

/* glass surfaces for dark mode fallback */
body:not(.white) .glass,body:not(.white) .card,body:not(.white) .panel,body:not(.white) .cc,body:not(.white) .ft,body:not(.white) .how,body:not(.white) .rev,body:not(.white) .stat,body:not(.white) .statbar .in,body:not(.white) .uh nav,body:not(.white) .csheet,body:not(.white) .cline{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px -30px rgba(0,0,0,.9)}
.cc,.card,a.pc,.panel,.ft,.how,.rev{border-radius:22px}
a.pc,.card,.cc{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
a.pc:hover,.card:hover,.cc:hover{border-color:rgba(255,215,106,.5)!important;box-shadow:0 0 0 1px rgba(255,215,106,.25),0 0 40px -6px rgba(255,215,106,.35),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(-4px)}

/* neon buttons */
.btn{border-radius:14px;backdrop-filter:blur(10px)}
.btn.gold,.btn.primary{background:linear-gradient(135deg,#fff1b8,#ffd76a 40%,#ffb300);color:#140f00;box-shadow:0 0 0 1px rgba(255,215,106,.6),0 12px 36px -10px rgba(255,200,60,.65)}
.btn.gold:hover,.btn.primary:hover{box-shadow:0 0 0 1px #ffd76a,0 0 42px -4px rgba(255,215,106,.85);transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,215,106,.3);color:var(--neon)}
.btn.ghost:hover{background:rgba(255,215,106,.08)}

/* headings and accents */
.shimmer,.grad{background:linear-gradient(100deg,#ffb300,#fff1b8 35%,#ffd76a 55%,#ffb300);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 7s linear infinite}
.kick{color:var(--neon)}
.chip,.tchip,.eyebrow{background:rgba(255,215,106,.08);border:1px solid rgba(255,215,106,.22);color:var(--neon)}

/* stock status: glowing dots */
.badge{border-radius:99px;backdrop-filter:blur(8px)}
.badge.good{background:rgba(74,222,128,.1);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(74,222,128,.25)}
.badge.low{background:rgba(251,191,36,.1);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(251,191,36,.25)}
.badge.out{background:rgba(248,113,113,.1);color:var(--bad);box-shadow:inset 0 0 0 1px rgba(248,113,113,.25)}
.badge i{box-shadow:0 0 10px currentColor}
.bar{background:rgba(255,255,255,.06)}
.bar span{background:linear-gradient(90deg,#ffb300,#ffd76a);box-shadow:0 0 12px rgba(255,215,106,.6)}

/* inputs & tabs */
.input,.select{background:rgba(255,255,255,.04);border:1px solid var(--glass-line);border-radius:14px;color:var(--ink);backdrop-filter:blur(10px)}
.input:focus,.select:focus{border-color:rgba(255,215,106,.6);box-shadow:0 0 0 4px rgba(255,215,106,.12)}
.tab{border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--glass-line)}
.tab.on{background:linear-gradient(135deg,#fff1b8,#ffd76a 40%,#ffb300);color:#140f00;border-color:transparent;box-shadow:0 0 24px -4px rgba(255,215,106,.7)}

/* nav */
.uh{background:rgba(3,3,5,.55);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.05)}
.uh nav a.l.on{color:var(--neon);background:rgba(255,215,106,.1)}
.cartbtn{background:rgba(255,255,255,.05);border:1px solid var(--glass-line);border-radius:14px}
.cbadge{background:linear-gradient(135deg,#fff1b8,#ffb300);color:#140f00;box-shadow:0 0 14px rgba(255,215,106,.6)}

/* hero glass panel */
.hero-u{background:radial-gradient(900px 500px at 75% 40%,rgba(255,215,106,.12),transparent 60%),linear-gradient(90deg,rgba(3,3,5,.96),rgba(3,3,5,.6) 50%,rgba(3,3,5,.35)),url(../assets/banner.gif) center/cover no-repeat!important}

/* cart drawer */
.csheet{background:rgba(8,8,11,.78)!important;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border-left:1px solid rgba(255,215,106,.18)!important;border-radius:0}
.cline{border-radius:16px}
.ctot b{color:var(--neon)}

/* ── checkout ── */
.checkout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
@media(max-width:900px){.checkout{grid-template-columns:1fr}}
.co-line{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--glass-line);margin-bottom:12px;backdrop-filter:blur(16px)}
.co-line b{display:block;font-size:15px}.co-line small{color:var(--muted);font-size:12.5px}
.co-line .price{font-size:20px}
.co-sum{position:sticky;top:96px}
.co-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--muted);font-size:14px;border-bottom:1px dashed rgba(255,255,255,.07)}
.co-row.discount-row{color:#34d399;font-weight:700;border-color:rgba(52,211,153,.2)}
.co-row b{color:var(--ink);font-size:15px}
.co-total{font-size:30px;font-family:'Space Grotesk';font-weight:700;color:var(--neon);text-shadow:0 0 24px rgba(255,215,106,.35)}
.codebox{margin-top:16px;padding:14px;border-radius:14px;background:rgba(0,0,0,.4);border:1px dashed rgba(255,215,106,.35);font-family:ui-monospace,Menlo,monospace;font-size:14px;word-break:break-all;color:var(--neon)}
.co-promo-box{margin-top:16px;padding:14px;border-radius:16px;background:rgba(212,175,55,0.06);border:1px solid rgba(212,175,55,0.22);display:flex;gap:8px}
.co-promo-box input{flex:1;background:rgba(0,0,0,0.4);border:1px solid rgba(212,175,55,0.3);padding:10px 14px;border-radius:10px;color:#fff;font-family:monospace;font-weight:700;text-transform:uppercase;outline:none}
.co-promo-box input:focus{border-color:var(--gold);box-shadow:0 0 12px rgba(212,175,55,0.3)}
.co-promo-badge{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 12px;border-radius:10px;background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.3);color:#34d399;font-size:12.5px;font-weight:700}
.steps-co{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--muted);font-size:13.5px}
.steps-co li{display:flex;gap:10px;align-items:flex-start}
.steps-co b{color:var(--ink)}
.steps-co .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,215,106,.12);color:var(--neon);flex:0 0 24px}
.co-empty{padding:60px 20px;text-align:center;color:var(--muted)}
.qbtn{width:34px;height:34px;border-radius:11px;border:1px solid var(--glass-line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font-size:16px}
.qbtn:hover{border-color:rgba(255,215,106,.5);color:var(--neon)}
.qv{min-width:28px;text-align:center;font-weight:800}
.qtybox{display:flex;align-items:center;gap:8px}

/* motion */
@keyframes shim{to{background-position:-250% 0}}
@media(prefers-reduced-motion:reduce){body.ultra::before,body.ultra::after,.shimmer,.grad{animation:none!important}}