/* WBI Storefront UI Kit — surface styles (builds on ../../colors_and_type.css) */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--wbi-ink);color:var(--wbi-fg2);font-family:var(--font-body);}
::selection{background:var(--wbi-magenta);color:#fff;}
img{display:block;}
button{font-family:var(--font-heading);cursor:pointer;}

/* neon-city page backdrop */
.wbi-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 60% at 80% -5%, rgba(162,75,255,.28), transparent 60%),
    radial-gradient(70% 55% at 8% 8%, rgba(255,45,155,.20), transparent 55%),
    radial-gradient(90% 70% at 50% 110%, rgba(45,226,230,.14), transparent 60%),
    var(--wbi-ink);
}
.wbi-grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(45,226,230,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,45,155,.16) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
  mask-image:linear-gradient(transparent,#000 70%);
}
.shell{position:relative;z-index:1;}
.maxw{max-width:1200px;margin:0 auto;padding:0 28px;}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(16,11,34,.62);border-bottom:1px solid var(--wbi-line-soft);}
.nav-in{display:flex;align-items:center;gap:26px;height:68px;}
.nav-logo{font-family:var(--font-display);font-style:italic;font-size:26px;letter-spacing:.02em;background:var(--wbi-grad-brand-v);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.2px var(--wbi-cyan);paint-order:stroke fill;filter:drop-shadow(0 0 8px rgba(45,226,230,.45));text-decoration:none;}
.nav-links{display:flex;gap:22px;margin-left:8px;}
.nav-link{font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wbi-fg2);text-decoration:none;transition:color .15s,text-shadow .15s;}
.nav-link:hover,.nav-link.active{color:var(--wbi-cyan);text-shadow:var(--wbi-glow-cyan);}
.nav-spacer{flex:1;}
.nav-search{display:flex;align-items:center;gap:8px;background:var(--wbi-panel);border:1px solid var(--wbi-line);border-radius:var(--wbi-r-pill);padding:8px 14px;color:var(--wbi-fg3);font-size:13px;width:188px;}
.nav-search input{background:none;border:none;outline:none;color:var(--wbi-fg1);font-family:var(--font-body);font-size:13px;width:100%;}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--wbi-r-md);background:var(--wbi-panel);border:1px solid var(--wbi-line);color:var(--wbi-fg1);}
.icon-btn:hover{border-color:var(--wbi-cyan);color:var(--wbi-cyan);box-shadow:var(--wbi-glow-cyan);}
.cart-dot{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--wbi-grad-brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:var(--wbi-glow-magenta);}

/* ---------- BUTTONS ---------- */
.btn{font-weight:700;font-size:14px;letter-spacing:.04em;border:none;padding:13px 24px;border-radius:var(--wbi-r-pill);transition:all .18s cubic-bezier(.22,1,.36,1);text-transform:uppercase;}
.btn-primary{background:var(--wbi-grad-brand);color:#fff;box-shadow:var(--wbi-glow-magenta);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn-primary:active{transform:scale(.97);filter:brightness(.93);}
.btn-ghost{background:transparent;color:var(--wbi-cyan);border:1.5px solid var(--wbi-cyan);}
.btn-ghost:hover{box-shadow:var(--wbi-glow-cyan);color:var(--wbi-cyan-bright);}
.btn-block{width:100%;}

/* ---------- CARD ---------- */
.tcard{position:relative;border-radius:var(--wbi-r-card);cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1);}
.tcard:hover{transform:translateY(-6px) rotate(-.6deg);}
.tcard .frame{padding:3px;border-radius:var(--wbi-r-card);}
.frame.holo{background:var(--wbi-grad-legend);background-size:220% 220%;animation:holo 5s linear infinite;box-shadow:0 0 20px rgba(255,122,208,.4),var(--wbi-shadow-3);}
.frame.violet{background:var(--wbi-grad-cyber);box-shadow:var(--wbi-glow-violet),var(--wbi-shadow-2);}
.frame.cyber{background:linear-gradient(120deg,var(--wbi-cyan),var(--wbi-blue));box-shadow:var(--wbi-glow-cyan),var(--wbi-shadow-2);}
@keyframes holo{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.tcard .inner{position:relative;border-radius:15px;overflow:hidden;background:#000;}
.tcard .art{width:100%;aspect-ratio:3/4;object-fit:cover;}
.tcard .badge{position:absolute;top:9px;left:9px;font-family:var(--font-heading);font-weight:700;font-size:10px;letter-spacing:.07em;padding:4px 9px;border-radius:999px;text-transform:uppercase;backdrop-filter:blur(4px);background:rgba(7,6,15,.5);color:var(--wbi-cyan);border:1px solid rgba(45,226,230,.45);}

/* explicit blur + click-to-reveal */
.tcard .art{transition:filter .55s ease, transform .55s ease;}
.tcard.blurred .art{filter:blur(20px) saturate(1.1);transform:scale(1.08);}
.reveal-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(7,6,15,.34);color:#fff;transition:opacity .5s ease;z-index:2;}
.tcard:not(.blurred) .reveal-veil{opacity:0;pointer-events:none;}
.reveal-veil .lock{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(7,6,15,.6);border:1px solid var(--wbi-cyan);color:var(--wbi-cyan);box-shadow:var(--wbi-glow-cyan);}
.reveal-veil .rl{font-family:var(--font-heading);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wbi-cyan-bright);}
.tcard .sigil{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:5px;background:rgba(7,6,15,.7);border:1px solid var(--wbi-cyan);color:var(--wbi-cyan);font-family:var(--font-display);font-size:13px;display:grid;place-items:center;}
.tcard .plate{position:absolute;left:0;right:0;bottom:0;padding:42px 12px 11px;background:linear-gradient(transparent,rgba(7,6,15,.55) 32%,rgba(7,6,15,.96) 80%);}
.tcard .plate .sub{font-family:var(--font-heading);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--wbi-cyan);}
.tcard .plate h4{font-family:var(--font-display);font-style:italic;font-size:21px;margin:1px 0 0;color:#fff;letter-spacing:.02em;}
.tcard .price{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
.tcard .price b{font-family:var(--font-heading);font-size:15px;color:#fff;}
.tcard .price .disp{font-family:var(--font-heading);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--wbi-fg3);}

/* ---------- SECTION ---------- */
.section{padding:74px 0;}

/* preview (next-show) treatment */
.tcard.preview{cursor:default;}
.tcard.preview .inner{filter:saturate(.92);}
.preview-ribbon{position:absolute;top:9px;left:9px;z-index:3;font-family:var(--font-heading);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(7,6,15,.62);color:var(--wbi-cyan-bright);border:1px solid var(--wbi-cyan);backdrop-filter:blur(4px);box-shadow:var(--wbi-glow-cyan);}
.section-preview{position:relative;border-top:1px solid var(--wbi-line-soft);border-bottom:1px solid var(--wbi-line-soft);background:linear-gradient(180deg, rgba(45,226,230,.05), transparent 40%);}
.preview-tag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wbi-cyan-bright);background:rgba(45,226,230,.1);border:1px solid var(--wbi-cyan);border-radius:999px;padding:7px 14px;}
.lofi-badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--wbi-grad-brand);border-radius:999px;padding:7px 15px;box-shadow:var(--wbi-glow-magenta);}
.eyebrow{font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--wbi-cyan);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;}
.sec-head h2{font-family:var(--font-heading);font-weight:700;font-size:clamp(26px,3.4vw,40px);color:#fff;margin:6px 0 0;line-height:1.05;}
.filters{display:flex;gap:9px;flex-wrap:wrap;}
.chip{font-family:var(--font-heading);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;border-radius:999px;background:var(--wbi-panel);border:1px solid var(--wbi-line);color:var(--wbi-fg2);transition:all .15s;}
.chip:hover{border-color:var(--wbi-violet);color:#fff;}
.chip.active{background:var(--wbi-grad-brand);color:#fff;border-color:transparent;box-shadow:var(--wbi-glow-soft);}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:24px;}

/* ---------- HERO ---------- */
.hero{position:relative;padding:70px 0 30px;}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.hero h1{font-family:var(--font-display);font-style:italic;font-size:clamp(46px,6.4vw,92px);line-height:.92;color:#fff;margin:14px 0 0;text-transform:uppercase;}
.hero h1 .grad{background:var(--wbi-grad-brand-v);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,45,155,.4));}
.hero p{font-size:18px;line-height:1.6;max-width:30ch;margin:18px 0 0;color:var(--wbi-fg2);}
.hero-cta{display:flex;gap:14px;margin-top:28px;}
.hero-card{display:flex;justify-content:center;}
.hero-card .tcard{width:min(330px,80%);}
.hero-stats{display:flex;gap:30px;margin-top:34px;}
.hero-stats .s b{font-family:var(--font-heading);font-weight:700;font-size:26px;color:#fff;display:block;}
.hero-stats .s span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wbi-fg3);font-family:var(--font-heading);}

/* ---------- DROP BANNER ---------- */
.drop{position:relative;overflow:hidden;border-radius:var(--wbi-r-lg);border:1px solid var(--wbi-line);background:var(--wbi-grad-sunset);padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.drop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,15,.55),transparent 60%);}
.drop>*{position:relative;z-index:1;}
.drop h3{font-family:var(--font-display);font-style:italic;font-size:34px;color:#fff;margin:8px 0 0;text-transform:uppercase;}
.timer{display:flex;gap:12px;}
.timer .u{background:rgba(7,6,15,.55);border:1px solid rgba(255,255,255,.18);border-radius:var(--wbi-r-md);padding:10px 14px;text-align:center;min-width:62px;backdrop-filter:blur(4px);}
.timer .u b{font-family:var(--font-heading);font-weight:700;font-size:26px;color:#fff;display:block;}
.timer .u span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--wbi-pink-pale);}

/* ---------- MODAL / DRAWER ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(7,6,15,.74);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--wbi-grad-panel);border:1px solid var(--wbi-line);border-radius:var(--wbi-r-lg);max-width:780px;width:100%;display:grid;grid-template-columns:300px 1fr;overflow:hidden;box-shadow:var(--wbi-shadow-3);}
.modal .m-art{padding:22px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% 0%,#1A1238,#07060F);}
.modal .m-art .tcard{width:100%;cursor:default;}
.modal .m-art .tcard:hover{transform:none;}
.modal .m-body{padding:30px 30px 26px;display:flex;flex-direction:column;}
.modal .m-body h3{font-family:var(--font-display);font-style:italic;font-size:34px;color:#fff;margin:8px 0 2px;text-transform:uppercase;}
.modal .m-meta{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap;}
.kv{font-family:var(--font-heading);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--wbi-fg2);background:var(--wbi-panel);border:1px solid var(--wbi-line);border-radius:999px;padding:6px 12px;}
.m-price{font-family:var(--font-heading);font-weight:700;font-size:34px;color:#fff;margin:auto 0 16px;}
.m-close{position:absolute;top:18px;right:20px;width:38px;height:38px;border-radius:50%;background:rgba(7,6,15,.6);border:1px solid var(--wbi-line);color:#fff;font-size:18px;display:grid;place-items:center;}
.m-close:hover{border-color:var(--wbi-magenta);color:var(--wbi-magenta-bright);}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:380px;max-width:92vw;background:var(--wbi-grad-panel);border-left:1px solid var(--wbi-line);box-shadow:var(--wbi-shadow-3);display:flex;flex-direction:column;animation:slidein .26s cubic-bezier(.22,1,.36,1);}
@keyframes slidein{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer h3{font-family:var(--font-heading);font-weight:700;font-size:20px;color:#fff;margin:0;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px;border-bottom:1px solid var(--wbi-line-soft);}
.drawer-body{flex:1;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px;}
.line-item{display:flex;gap:13px;align-items:center;}
.line-item img{width:48px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--wbi-line);}
.line-item .li-name{font-family:var(--font-heading);font-weight:600;font-size:14px;color:#fff;}
.line-item .li-sub{font-size:11px;color:var(--wbi-fg3);}
.line-item .li-price{margin-left:auto;font-family:var(--font-heading);font-weight:700;color:#fff;}
.drawer-foot{padding:18px 22px 24px;border-top:1px solid var(--wbi-line-soft);}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.drawer-total b{font-family:var(--font-heading);font-size:24px;color:#fff;}
.empty{color:var(--wbi-fg3);text-align:center;padding:50px 0;font-size:14px;}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--wbi-line-soft);padding:54px 0 40px;margin-top:30px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;}
.foot-grid h5{font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wbi-fg1);margin:0 0 14px;}
.foot-grid a{display:block;color:var(--wbi-fg3);text-decoration:none;font-size:14px;margin-bottom:9px;}
.foot-grid a:hover{color:var(--wbi-cyan);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid var(--wbi-line-soft);color:var(--wbi-fg3);font-size:12px;flex-wrap:wrap;gap:12px;}

/* ---------- WHATNOT BUTTON ---------- */
.wn-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--wbi-grad-brand);padding:11px 18px;border-radius:var(--wbi-r-pill);box-shadow:var(--wbi-glow-magenta);transition:all .18s cubic-bezier(.22,1,.36,1);}
.wn-btn:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff;text-shadow:none;}
.wn-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--wbi-cyan);box-shadow:var(--wbi-glow-cyan);}

/* ---------- DISPLAY NOTE STRIP ---------- */
.note-strip{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;margin:18px auto 0;padding:14px 22px;border-radius:var(--wbi-r-pill);background:rgba(45,226,230,.07);border:1px solid rgba(45,226,230,.28);color:var(--wbi-fg2);font-size:14px;max-width:760px;}
.note-strip b{color:var(--wbi-cyan-bright);font-family:var(--font-heading);}
.note-strip a{font-weight:700;}

/* ---------- AGE GATE ---------- */
.gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 120% at 50% 0%, #1A1238 0%, #050409 75%);}
.gate-card{max-width:440px;width:100%;text-align:center;background:var(--wbi-grad-panel);border:1px solid var(--wbi-line);border-radius:var(--wbi-r-lg);padding:42px 36px 34px;box-shadow:var(--wbi-shadow-3);}
.gate-card .gm{font-family:var(--font-display);font-style:italic;font-size:52px;line-height:.9;background:var(--wbi-grad-brand-v);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.4px var(--wbi-cyan);paint-order:stroke fill;filter:drop-shadow(0 0 10px rgba(45,226,230,.45));}
.gate-card .gsub{font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:4px;}
.gate-card h2{font-family:var(--font-heading);font-weight:700;font-size:22px;color:#fff;margin:24px 0 8px;}
.gate-card p{font-size:14px;color:var(--wbi-fg2);margin:0 auto;max-width:34ch;}
.gate-actions{display:flex;flex-direction:column;gap:11px;margin-top:26px;}
.gate-exit{background:none;border:none;color:var(--wbi-fg3);font-family:var(--font-heading);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.gate-exit:hover{color:var(--wbi-coral);}

/* ---------- CUSTOM ORDER ---------- */
.custom-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start;}
.custom-intro p{margin:14px 0 0;}
.spec-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px;}
.spec-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--wbi-fg2);}
.spec-list .si{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--wbi-panel);border:1px solid var(--wbi-line);color:var(--wbi-cyan);}
.printer-note{margin-top:24px;padding:16px 18px;border-radius:var(--wbi-r-md);background:rgba(162,75,255,.1);border:1px solid var(--wbi-line);font-size:13px;color:var(--wbi-fg2);}
.printer-note b{color:var(--wbi-violet-bright);}

.form{background:var(--wbi-grad-panel);border:1px solid var(--wbi-line);border-radius:var(--wbi-r-lg);padding:28px 28px 26px;box-shadow:var(--wbi-shadow-2);}
.form-row{margin-bottom:18px;}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form label{display:block;font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wbi-fg3);margin-bottom:7px;}
.form input[type=text],.form input[type=number],.form textarea{width:100%;font-family:var(--font-body);font-size:14px;color:var(--wbi-fg1);background:var(--wbi-panel);border:1.5px solid var(--wbi-line);border-radius:var(--wbi-r-sm);padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s;}
.form input:focus,.form textarea:focus{border-color:var(--wbi-cyan);box-shadow:var(--wbi-glow-cyan);}
.form textarea{resize:vertical;min-height:74px;}
.seg{display:flex;flex-wrap:wrap;gap:7px;}
.seg button{font-family:var(--font-heading);font-weight:600;font-size:12px;letter-spacing:.03em;padding:8px 13px;border-radius:999px;background:var(--wbi-panel);border:1px solid var(--wbi-line);color:var(--wbi-fg2);transition:all .14s;}
.seg button:hover{border-color:var(--wbi-violet);color:#fff;}
.seg button.on{background:var(--wbi-grad-brand);color:#fff;border-color:transparent;box-shadow:var(--wbi-glow-soft);}
.drop-file{border:1.5px dashed var(--wbi-line);border-radius:var(--wbi-r-md);padding:18px;text-align:center;color:var(--wbi-fg3);font-size:13px;cursor:pointer;transition:all .15s;background:rgba(26,18,56,.4);}
.drop-file:hover{border-color:var(--wbi-cyan);color:var(--wbi-cyan);}
.drop-file input{display:none;}
.file-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.file-chip{font-family:var(--font-heading);font-size:11px;color:var(--wbi-fg2);background:var(--wbi-panel);border:1px solid var(--wbi-line);border-radius:999px;padding:5px 11px;}
.form-foot-note{font-size:12px;color:var(--wbi-fg3);margin:14px 0 0;line-height:1.5;}
.form-success{text-align:center;padding:20px 10px;}
.form-success .sc{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:rgba(45,226,230,.14);border:1px solid var(--wbi-cyan);color:var(--wbi-cyan);box-shadow:var(--wbi-glow-cyan);}
.form-success h3{font-family:var(--font-heading);font-weight:700;color:#fff;font-size:20px;margin:0 0 8px;}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;}
.faq-item{background:var(--wbi-panel);border:1px solid var(--wbi-line);border-radius:var(--wbi-r-md);overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:none;padding:18px 20px;color:#fff;font-family:var(--font-heading);font-weight:600;font-size:16px;cursor:pointer;}
.faq-q:hover{color:var(--wbi-cyan);}
.faq-q .ic{flex:none;color:var(--wbi-cyan);transition:transform .2s;}
.faq-item.open .faq-q .ic{transform:rotate(90deg);}
.faq-a{padding:0 20px 18px;color:var(--wbi-fg2);font-size:14px;line-height:1.6;}
.faq-a b{color:var(--wbi-cyan-bright);}

/* ---------- SERIES GROUPING ---------- */
.series-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;}
.sj-chip{font-family:var(--font-heading);font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--wbi-fg2);background:var(--wbi-panel);border:1px solid var(--wbi-line);border-radius:999px;padding:7px 13px;display:inline-flex;align-items:center;gap:7px;transition:all .14s;cursor:pointer;}
.sj-chip:hover{border-color:var(--wbi-cyan);color:#fff;box-shadow:var(--wbi-glow-cyan);}
.sj-chip .sj-n{font-size:10px;color:var(--wbi-ink);background:var(--wbi-cyan);border-radius:999px;padding:1px 6px;font-weight:700;}
.series-block{margin-bottom:46px;}
.series-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--wbi-line-soft);}
.series-head h3{font-family:var(--font-heading);font-weight:700;font-size:22px;color:#fff;margin:0;letter-spacing:.01em;}
.series-head h3::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wbi-grad-brand);margin-right:10px;vertical-align:middle;box-shadow:var(--wbi-glow-magenta);}
.series-count{font-family:var(--font-heading);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wbi-fg3);}

/* ---------- DETAIL MODAL (larger preview) ---------- */
.detail-modal{max-width:940px;grid-template-columns:440px 1fr;}
.detail-modal .m-art{flex-direction:column;gap:14px;}
.detail-modal .m-art .tcard{width:100%;max-width:380px;}
.m-fullsize{font-family:var(--font-heading);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--wbi-cyan);text-decoration:none;display:inline-flex;align-items:center;}
.m-fullsize:hover{color:var(--wbi-cyan-bright);text-shadow:var(--wbi-glow-cyan);}

/* ---------- FORM ERROR ---------- */
.form-error{display:flex;align-items:center;font-family:var(--font-body);font-size:13px;color:#fff;background:rgba(255,107,107,.16);border:1px solid var(--wbi-coral);border-radius:var(--wbi-r-sm);padding:11px 14px;margin-bottom:14px;}

/* ---------- MOBILE NAV (burger + drawer) ---------- */
.nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--wbi-r-md);background:var(--wbi-panel);border:1px solid var(--wbi-line);color:#fff;flex:none;}
.nav-burger:hover{border-color:var(--wbi-cyan);color:var(--wbi-cyan);}
.nav-drawer{display:none;flex-direction:column;background:rgba(16,11,34,.97);backdrop-filter:blur(14px);border-top:1px solid var(--wbi-line-soft);padding:8px 0;}
.nav-drawer-link{font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--wbi-fg1);text-decoration:none;padding:15px 28px;border-bottom:1px solid var(--wbi-line-soft);}
.nav-drawer-link:active,.nav-drawer-link:hover{background:var(--wbi-panel);color:var(--wbi-cyan);}
.nav-drawer-link.wn{color:var(--wbi-magenta-bright);border-bottom:none;}

@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;gap:28px;}
  .modal,.detail-modal{grid-template-columns:1fr;}
  .custom-wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr !important;}
  .nav-links,.nav-search{display:none;}
}

/* ---------- PHONE (≤640px): the "mobile version" ---------- */
@media(max-width:640px){
  .maxw{padding:0 18px;}
  .nav-in{height:60px;gap:12px;}
  .nav-logo{font-size:23px;}
  .nav-burger{display:inline-flex;}
  .nav-drawer{display:flex;}
  .nav-spacer{display:none;}
  .nav-in .wn-btn{display:none;}        /* nav Whatnot button → lives in the drawer on phones */
  .nav-burger{margin-left:auto;}

  .section{padding:48px 0;}
  .hero{padding:34px 0 8px;}
  .hero h1{font-size:clamp(40px,15vw,64px);}
  .hero-card{order:-1;}                 /* card on top on phones */
  .hero-card .tcard{width:min(260px,72%);}
  .hero .timer{flex-wrap:wrap;gap:8px;}
  .hero .timer .u{min-width:60px;flex:1;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;justify-content:center;text-align:center;}

  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .sec-head h2{font-size:30px;}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .drop{flex-direction:column;align-items:flex-start;padding:26px 22px;}
  .drop h3{font-size:27px;}
  .timer{flex-wrap:wrap;}
  .note-strip{font-size:13px;padding:12px 16px;}

  .form{padding:20px 18px;}
  .form-row.two{grid-template-columns:1fr;gap:0;}
  .form-row.two>div{margin-bottom:18px;}
  .seg{gap:6px;}
  .seg button{font-size:11px;padding:8px 11px;}

  .modal{max-width:100%;border-radius:var(--wbi-r-md);}
  .m-art{padding:16px;}
  .m-art .tcard{width:min(220px,60%);margin:0 auto;}
  .m-body{padding:22px 20px;}

  .faq-q{font-size:15px;padding:16px;}
  .foot-grid{grid-template-columns:1fr !important;gap:24px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;text-align:left;}

  .gate-card{padding:32px 24px 28px;}
  .gate-card .gm{font-size:44px;}
}
@media(max-width:380px){
  .card-grid{grid-template-columns:1fr;}
}