:root {
  --bg: #0b0d13;
  --bg-alt: #12151e;
  --bg-card: #1a1e2b;
  --text: #e8eaf0;
  --muted: #9ca3af;
  --accent: #3b82f6;
  --accent-h: #2563eb;
  --border: #2a2f3e;
  --ok: #22c55e;
  --warn-bg: #422006;
  --warn: #fbbf24;
  --radius: 12px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; font-size:15px; }

/* AGE GATE */
.gate { position:fixed; inset:0; background:rgba(0,0,0,.95); display:flex; align-items:center; justify-content:center; z-index:9999; padding:1.25rem; }
.gate.hidden { display:none; }
.gate-box { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; max-width:520px; width:100%; text-align:center; }
.gate-box h2 { font-size:1.35rem; margin-bottom:.75rem; }
.gate-box p { color:var(--muted); font-size:.92rem; margin-bottom:.9rem; }
.gate-warn { background:var(--warn-bg); border:1px solid #854d0e; border-radius:8px; padding:.9rem; margin-bottom:1.25rem; color:var(--warn); font-size:.88rem; }
.lang-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.4rem; margin:1rem 0 1.4rem; }
.lang-grid button { background:var(--bg-alt); border:1px solid var(--border); color:var(--muted); padding:.45rem .3rem; border-radius:7px; font-size:.8rem; cursor:pointer; }
.lang-grid button.active, .lang-grid button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.gate-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.gbtn { padding:.75rem 1.4rem; border-radius:8px; font-weight:500; border:none; cursor:pointer; font-size:.92rem; }
.gbtn.ok { background:var(--accent); color:#fff; }
.gbtn.ok:hover { background:var(--accent-h); }
.gbtn.no { background:var(--bg-alt); color:var(--muted); border:1px solid var(--border); }

/* HEADER */
header { background:rgba(11,13,19,.92); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.hdr { max-width:1200px; margin:0 auto; padding:0 1.25rem; height:62px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:1.25rem; font-weight:700; color:var(--text); text-decoration:none; }
.logo span { color:var(--accent); }
.hdr-r { display:flex; align-items:center; gap:.9rem; }
.lang-sel { background:var(--bg-alt); border:1px solid var(--border); color:var(--text); padding:.35rem .55rem; border-radius:7px; font-size:.82rem; }
.cart-btn { background:var(--bg-alt); border:1px solid var(--border); color:var(--text); padding:.38rem .85rem; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:.35rem; font-size:.88rem; }
.cart-n { background:var(--accent); color:#fff; width:19px; height:19px; border-radius:50%; font-size:.72rem; font-weight:600; display:flex; align-items:center; justify-content:center; }

/* LAYOUT */
.wrap { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
.hero { text-align:center; padding:3rem 0 2rem; background:linear-gradient(180deg,var(--bg-alt),var(--bg)); }
.hero h1 { font-size:2rem; margin-bottom:.5rem; }
.hero p { color:var(--muted); max-width:540px; margin:0 auto .9rem; }
.badges { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
.badge { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:.3rem .8rem; font-size:.8rem; color:var(--muted); }

/* PRODUCTS */
.sec { padding:2.2rem 0 3.5rem; }
.sec h2 { text-align:center; margin-bottom:1.6rem; font-size:1.4rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.15rem; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; display:flex; flex-direction:column; transition:border-color .2s; }
.card:hover { border-color:#3f4658; }
.card h3 { font-size:1.08rem; margin-bottom:.35rem; }
.card .desc { font-size:.86rem; color:var(--muted); flex-grow:1; margin-bottom:.9rem; }
.card .opts { margin-bottom:.8rem; }
.card select { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:.5rem .7rem; border-radius:7px; font-size:.9rem; margin-bottom:.55rem; }
.card .price { font-size:1.15rem; font-weight:600; margin-bottom:.7rem; }
.card .price small { font-size:.78rem; color:var(--muted); font-weight:400; }

/* BTN */
.btn { display:inline-block; background:var(--accent); color:#fff; padding:.6rem 1.15rem; border-radius:8px; font-weight:500; font-size:.88rem; border:none; cursor:pointer; transition:background .2s; text-align:center; }
.btn:hover { background:var(--accent-h); }
.btn-sm { padding:.42rem .85rem; font-size:.84rem; width:100%; }
.btn-out { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-out:hover { border-color:var(--accent); color:var(--accent); }

/* CART */
.ov { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:150; opacity:0; visibility:hidden; transition:all .3s; }
.ov.show { opacity:1; visibility:visible; }
.side { position:fixed; top:0; right:-420px; width:400px; max-width:100%; height:100%; background:var(--bg-card); border-left:1px solid var(--border); z-index:200; transition:right .3s; display:flex; flex-direction:column; }
.side.open { right:0; }
.side-h { padding:1.1rem 1.3rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.side-h h3 { margin:0; font-size:1.05rem; }
.side-x { background:none; border:none; color:var(--muted); font-size:1.45rem; cursor:pointer; }
.side-b { flex:1; overflow-y:auto; padding:1rem 1.3rem; }
.ci { display:flex; justify-content:space-between; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid var(--border); gap:.5rem; }
.ci-n { font-weight:500; font-size:.92rem; }
.ci-m { font-size:.82rem; color:var(--muted); }
.ci-rm { background:none; border:none; color:#f87171; cursor:pointer; font-size:.85rem; flex-shrink:0; }
.side-f { padding:1.1rem 1.3rem; border-top:1px solid var(--border); }
.row { display:flex; justify-content:space-between; margin-bottom:.4rem; font-size:.92rem; }
.row.tot { font-weight:600; font-size:1.08rem; margin-top:.4rem; }
.note { background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:.75rem; font-size:.8rem; color:var(--muted); margin: .8rem 0; line-height:1.45; }
.empty { text-align:center; color:var(--muted); padding:2rem 0; }

/* CHECKOUT */
.cf { display:none; padding-top:.9rem; }
.cf.active { display:block; }
.cf label { display:block; margin-bottom:.25rem; font-size:.82rem; color:var(--muted); }
.cf input, .cf select, .cf textarea { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:.58rem .75rem; color:var(--text); font-size:.9rem; margin-bottom:.75rem; font-family:inherit; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline:none; border-color:var(--accent); }
.pay-ops { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.85rem; }
.pay-op { display:flex; align-items:center; gap:.55rem; padding:.6rem .85rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.pay-op.sel { border-color:var(--accent); background:rgba(59,130,246,.1); }
.pay-op input { width:auto; margin:0; }
.ok-msg { display:none; background:rgba(34,197,94,.12); border:1px solid var(--ok); color:var(--ok); border-radius:8px; padding:1rem; text-align:center; margin-top:.8rem; font-size:.9rem; }
.ok-msg.show { display:block; }

/* DISC */
.disc { background:var(--warn-bg); border:1px solid #854d0e; border-radius:var(--radius); padding:1.1rem 1.3rem; margin-top:2.2rem; }
.disc h4 { color:var(--warn); margin-bottom:.35rem; font-size:.92rem; }
.disc p { color:var(--warn); font-size:.82rem; margin:0; }

footer { background:var(--bg-alt); border-top:1px solid var(--border); padding:1.6rem 0; text-align:center; }
footer p { color:var(--muted); font-size:.82rem; margin:0; }

@media (max-width:768px) {
  .hero h1 { font-size:1.7rem; }
  .grid { grid-template-columns:1fr 1fr; gap:.9rem; }
  .side { width:100%; right:-100%; }
}
@media (max-width:480px) { .grid { grid-template-columns:1fr; } }