/* Geek n Wine — Storefront UI kit styles. Pairs with ../../colors_and_type.css */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink-900);color:var(--fg-1);font-family:var(--font-display);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
button{font-family:inherit}
::selection{background:var(--volt-500);color:#16090E}

/* layout */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.section{padding:84px 0}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.kicker.volt{color:var(--volt-500)}

/* top bar */
.ticker{background:var(--wine-800);color:var(--fg-on-dark-1);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-align:center;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:14px}
.ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--volt-500);box-shadow:0 0 8px var(--volt-glow);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nav{position:sticky;top:0;z-index:40;background:rgba(18,6,9,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-700)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav a{color:var(--fg-2);text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover{color:var(--fg-1)}
.nav-links{display:flex;gap:28px;align-items:center}
.cart{display:flex;align-items:center;gap:8px;background:var(--ink-700);border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--fg-1);font-size:13px;cursor:pointer;font-weight:500}
.cart:hover{border-color:var(--wine-500)}

/* buttons */
.btn{font-weight:600;font-size:15px;border-radius:11px;padding:13px 22px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:all .18s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--wine-600);color:#fff}
.btn-primary:hover{background:var(--wine-500)}
.btn-volt{background:var(--volt-500);color:#16090E;box-shadow:0 0 30px -8px var(--volt-glow)}
.btn-volt:hover{background:var(--volt-400)}
.btn-ghost{background:transparent;color:var(--fg-1);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--wine-500)}
.btn-lg{padding:16px 28px;font-size:16px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* pills */
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.pill-live{background:rgba(205,255,74,.1);color:var(--volt-500);border:1px solid rgba(205,255,74,.35)}
.pill-hidden{background:rgba(205,255,74,.08);color:var(--volt-500);border:1px solid rgba(205,255,74,.3)}
.pill-low{background:rgba(224,169,59,.12);color:var(--gold-500);border:1px solid rgba(224,169,59,.4)}
.pill-out{background:rgba(215,68,62,.12);color:#E8746F;border:1px solid rgba(215,68,62,.4)}
.pill-neutral{background:var(--ink-700);color:var(--fg-2);border:1px solid var(--border)}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--volt-500);box-shadow:0 0 8px var(--volt-glow)}

/* the box object */
.box{position:relative;border-radius:14px;background:linear-gradient(160deg,#7A0C2E,#52071F 60%,#360714);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #46101f}
.box::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,255,255,.05)}
.box .tape{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:16%;background:rgba(0,0,0,.16)}
.box .mk{position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.box .sku{position:absolute;bottom:10px;left:13px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.box .hint{position:absolute;top:12px;right:12px}

/* drop card */
.card{background:var(--ink-700);border:1px solid var(--border);border-radius:18px;padding:16px;transition:transform .2s var(--ease-out),border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--wine-500)}
.meter{height:6px;border-radius:99px;background:var(--ink-500);overflow:hidden;margin:12px 0 7px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--wine-400),var(--volt-500))}
.mrow{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:64px 0 40px}
.hero h1{font-size:clamp(44px,6vw,84px);font-weight:700;letter-spacing:-.03em;line-height:.98;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--volt-500)}
.hero p{font-size:18px;line-height:1.55;color:var(--fg-2);max-width:42ch;margin:0 0 28px}
.timerbar{display:flex;gap:9px;margin:0 0 28px}
.tunit{background:var(--ink-700);border:1px solid var(--border);border-radius:11px;padding:11px 0;width:70px;text-align:center}
.tunit b{font-family:var(--font-mono);font-weight:700;font-size:28px;font-variant-numeric:tabular-nums;display:block;line-height:1}
.tunit span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:6px;display:block}

/* grids & misc */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.divline{height:1px;background:var(--ink-700)}
.note{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}

/* how it works */
.step{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:16px;padding:26px}
.step .n{font-family:var(--font-mono);font-size:12px;color:var(--volt-500);letter-spacing:.1em}
.step h3{font-size:21px;font-weight:600;margin:14px 0 8px;letter-spacing:-.01em}
.step p{font-size:14px;line-height:1.6;color:var(--fg-2);margin:0}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(10,4,6,.72);z-index:80;display:flex;opacity:0;pointer-events:none;transition:opacity .26s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{margin-left:auto;width:430px;max-width:92vw;height:100%;background:var(--ink-800);border-left:1px solid var(--ink-600);transform:translateX(40px);transition:transform .3s var(--ease-out);overflow:auto}
.scrim.open .drawer{transform:translateX(0)}
.modal{margin:auto;width:520px;max-width:92vw;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:20px;transform:scale(.96);transition:transform .3s var(--ease-out);overflow:hidden}
.scrim.open .modal{transform:scale(1)}

/* footer */
.footer{border-top:1px solid var(--ink-700);padding:48px 0 56px;color:var(--fg-3)}
.footer a{color:var(--fg-2);text-decoration:none;font-size:13px;display:block;margin-bottom:10px}
.footer a:hover{color:var(--fg-1)}

input.fld{width:100%;background:var(--ink-900);border:1px solid var(--border);border-radius:10px;padding:13px;color:var(--fg-1);font-family:var(--font-display);font-size:15px;outline:none}
input.fld:focus{border-color:var(--volt-500);box-shadow:0 0 0 2px rgba(205,255,74,.18)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--ink-900)}
.stepper button{width:46px;height:46px;background:transparent;border:0;color:var(--fg-1);font-size:21px;cursor:pointer}
.stepper button:hover{background:var(--ink-700)}
.stepper .q{width:50px;text-align:center;font-family:var(--font-mono);font-weight:700;font-size:17px}