
:root{--bg:#0e1116;--ink:#e8ecf1;--muted:#9aa3af;--line:#1f2430;--ctl-font:18px;--ctl-h:52px}
@media(max-width:480px){:root{--ctl-font:20px;--ctl-h:56px}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:24px}.section{padding:18px 0}
.nav{position:sticky;top:0;z-index:50;background:#0f141d;border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;padding:12px 16px}.logo-dot{width:10px;height:10px;background:#8cff66;border-radius:50%;display:inline-block;margin-right:8px}
.brand-text{font-weight:800}
.nav .menu{display:flex;gap:18px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.nav .menu a{padding:8px 10px;border-radius:8px}.nav .menu a.active{background:rgba(255,255,255,.05);font-weight:600}
.cart-btn{padding:8px 10px;border-radius:8px;border:1px solid #2a3242;background:#161b25;color:var(--ink)}
.cart-count{margin-left:6px;background:rgba(159,232,112,.2);padding:2px 6px;border-radius:999px}
h1{margin:.15em 0 .15em;font-weight:800;font-size:clamp(28px,5vw,44px)}
.subline{margin:-2px 0 6px;font-weight:800;font-size:clamp(24px,4.5vw,40px)}
.badge-line{margin:2px 0 18px;color:#c7d3ff}
.prod-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}@media(max-width:900px){.prod-wrap{grid-template-columns:1fr}}
.media-stage{border:1px solid var(--line);border-radius:12px;padding:10px;background:#0b0f15}
.prod-video,.image{width:100%;aspect-ratio:16/9;border-radius:8px;border:1px solid #202735;background:#0b0f15}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{background:#0f141d;border:1px solid #1f2430;border-radius:8px;padding:0;cursor:pointer}
.prod-side label{display:grid;gap:6px;margin:12px 0}
.prod-side input,.prod-side select,.cust input,.cust textarea{height:var(--ctl-h);font-size:var(--ctl-font);padding:12px 14px;border-radius:10px;border:1px solid #2a3242;background:transparent;color:var(--ink)}
.ctl-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
#addBtn{height:var(--ctl-h);padding:0 18px;font-weight:800;border:1px solid #3a5a28;background:linear-gradient(180deg,#28421d,#243a19)}
.small{font-size:.9rem}.muted{color:var(--muted)}.safety-note{text-align:center;color:var(--muted);margin:40px auto 12px}
/* Cart */
.cart-drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.cart-drawer[open]{display:block}
.cart-panel{position:absolute;top:0;right:0;width:min(520px,100%);height:100%;background:#12151b;border-left:1px solid var(--line);display:flex;flex-direction:column}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.cart-body{padding:14px 14px 24px;overflow:auto;display:grid;gap:12px}
.cart-item{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0}
.qty input{width:64px}
.totals{margin-top:4px;display:grid;gap:6px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.totals .grand{font-weight:800}
.cust{border:1px solid rgba(255,255,255,.12);padding:10px;border-radius:12px;display:grid;gap:8px}
.site-footer{border-top:1px solid var(--line);margin-top:18px}.copy{color:var(--muted);font-size:.85rem;text-align:center}
/* WhatsApp button */
.wp-wrap{margin-top:10px}
.wp-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #2a3242;border-radius:10px;background:#0f141d}
.wp-link svg{width:18px;height:18px;display:block}

.stock-badge{font-size:.9rem;opacity:.9;margin-top:4px}
.stock-badge:empty{display:none}

.stage-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.stage-wrap .scrub{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.4);color:#fff;width:36px;height:36px;border-radius:18px;font-size:20px;line-height:36px;cursor:pointer}
.stage-wrap .scrub.prev{left:8px}
.stage-wrap .scrub.next{right:8px}
.prod-image{max-width:100%;height:auto;display:block}
