:root { color-scheme: dark; --ink:#0f0d12; --panel:#17141b; --wine:#b1325f; --wine-d:#7a2342; --paper:#f4f1f4; --muted:rgba(244,241,244,.62); --line:rgba(244,241,244,.12); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--ink); color:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }

/* header */
.site-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.25rem; background:rgba(15,13,18,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand-logo { height:38px; width:auto; max-width:60vw; display:block; }
.nav-toggle { display:none; background:none; border:0; color:var(--paper); font-size:1.6rem; line-height:1; cursor:pointer; padding:.2rem .4rem; }
.site-header nav { display:flex; align-items:center; gap:1.25rem; font-size:.92rem; }
.site-header nav a { text-decoration:none; opacity:.9; }
.site-header nav a:hover { opacity:1; }
.cart-link { display:inline-flex; align-items:center; gap:.4rem; }
.cart-badge { min-width:1.3rem; height:1.3rem; padding:0 .35rem; border-radius:999px; background:var(--wine); color:#fff; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* layout */
main { max-width:64rem; margin:0 auto; padding:2rem 1.25rem 4rem; }
.page-head { margin-bottom:1.75rem; }
.page-head h1 { font-size:clamp(1.6rem,5vw,2.4rem); line-height:1.15; }
.page-head p { color:var(--muted); margin-top:.5rem; }
.crumb { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.crumb a { color:var(--muted); text-decoration:none; }

/* product grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.25rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s, transform .18s; }
.card:hover { border-color:var(--wine-d); transform:translateY(-2px); }
.pimg { aspect-ratio:1/1; display:grid; place-items:center; position:relative; text-decoration:none; }
.pimg .badge { position:absolute; top:.6rem; left:.6rem; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25); padding:.2rem .5rem; border-radius:999px; }
.pimg .ph { font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; opacity:.55; }
.card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-body h3 { font-size:1.02rem; }
.card-body h3 a { text-decoration:none; }
.card-body .short { font-size:.85rem; color:var(--muted); flex:1; }
.card-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.35rem; }
.price { font-weight:800; font-size:1.05rem; }
.pimg img { width:100%; height:100%; object-fit:contain; padding:.6rem; }
.pimg.img { background:#f4f1f4; }
.shop-controls { display:flex; gap:.75rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.shop-controls input, .shop-controls select { padding:.6rem .85rem; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--paper); font-size:.9rem; }
.shop-controls input { flex:1; min-width:12rem; }
#more { margin:1.5rem auto 0; display:block; }
#count { text-align:center; margin-top:1rem; }

/* buttons */
.btn { appearance:none; cursor:pointer; border:0; border-radius:999px; padding:.6rem 1.15rem; font-size:.88rem; font-weight:700; background:var(--wine); color:#fff; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; transition:background .15s, transform .1s; }
.btn:hover { background:var(--wine-d); }
.btn:active { transform:scale(.98); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--paper); }
.btn.ghost:hover { border-color:var(--wine); background:transparent; }
.btn.block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* product detail */
.product { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:46rem){ .product { grid-template-columns:1fr 1fr; align-items:start; } }
.product .pimg { border-radius:18px; border:1px solid var(--line); }
.product h1 { font-size:clamp(1.6rem,5vw,2.2rem); line-height:1.15; margin-bottom:.5rem; }
.product .price { font-size:1.5rem; margin:.75rem 0 1rem; }
.product .desc { color:var(--muted); margin-bottom:1.5rem; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-right:.75rem; }
.qty button { background:transparent; color:var(--paper); border:0; width:2.2rem; height:2.4rem; font-size:1.1rem; cursor:pointer; }
.qty input { width:2.5rem; text-align:center; background:transparent; border:0; color:var(--paper); font-size:1rem; }
.buy-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }

/* cart + forms */
.line { display:flex; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); }
.line .thumb { width:4rem; height:4rem; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:.6rem; letter-spacing:.1em; opacity:.6; }
.line .info { flex:1; min-width:0; }
.line .info .n { font-weight:600; }
.line .info .p { font-size:.85rem; color:var(--muted); }
.line .rm { background:none; border:0; color:var(--muted); cursor:pointer; font-size:.8rem; text-decoration:underline; }
.totals { display:flex; justify-content:space-between; align-items:center; margin:1.5rem 0; font-size:1.15rem; font-weight:800; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.35rem; }
.field input { width:100%; padding:.7rem .85rem; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--paper); font-size:.95rem; }
.field.row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkbox { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; margin:1rem 0; }
.checkbox input { margin-top:.25rem; }
.note { font-size:.82rem; color:var(--muted); }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.msg { padding:.85rem 1rem; border-radius:10px; margin:1rem 0; font-size:.9rem; }
.msg.err { background:rgba(220,50,80,.12); border:1px solid rgba(220,50,80,.4); }
.msg.warn { background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.35); }
.msg.ok { background:rgba(40,180,120,.12); border:1px solid rgba(40,180,120,.4); }

/* footer */
.site-footer { padding:2.5rem 1.25rem 2rem; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); background:var(--panel); }
.footer-grid { max-width:64rem; margin:0 auto; display:grid; gap:1.75rem 2rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }
.footer-about .footer-logo { height:30px; width:auto; margin-bottom:.75rem; }
.footer-about p { opacity:.8; line-height:1.55; max-width:22rem; }
.footer-heading { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); font-weight:700; margin-bottom:.75rem; }
.footer-links { display:flex; flex-direction:column; gap:.5rem; }
.footer-links a, .footer-col a { color:var(--muted); text-decoration:none; }
.footer-links a:hover, .footer-col a:hover { color:var(--wine); }
.footer-18 { margin-top:.75rem; font-size:.78rem; opacity:.7; }
.footer-bottom { max-width:64rem; margin:2rem auto 0; padding-top:1.25rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; font-size:.78rem; opacity:.75; }
.footer-bottom-links { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-bottom-links a { color:var(--muted); text-decoration:none; }
.footer-bottom-links a:hover { color:var(--wine); }

/* policy / long-form content pages */
.policy { max-width:46rem; margin:0 auto; }
.policy h2 { font-size:1.15rem; margin:1.75rem 0 .6rem; }
.policy h3 { font-size:1rem; margin:1.25rem 0 .4rem; }
.policy p, .policy li { color:var(--muted); line-height:1.7; margin-bottom:.7rem; }
.policy ul { padding-left:1.25rem; margin-bottom:.7rem; }
.policy a { color:var(--wine); }
.policy .updated { font-size:.85rem; opacity:.6; }
.policy .flag { background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.35); border-radius:10px; padding:.85rem 1rem; font-size:.85rem; margin:1rem 0; }

/* age gate */
.agegate { position:fixed; inset:0; z-index:100; background:rgba(8,7,10,.92); backdrop-filter:blur(6px); display:grid; place-items:center; padding:1.5rem; }
.agegate-box { max-width:26rem; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:2rem 1.75rem; }
.agegate-mark { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--wine); font-weight:700; margin-bottom:1rem; }
.agegate-box h2 { font-size:1.5rem; margin-bottom:.6rem; }
.agegate-box p { color:var(--muted); font-size:.9rem; margin-bottom:1.5rem; }
.agegate-actions { display:flex; flex-direction:column; gap:.6rem; }

/* toast */
.toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:var(--wine); color:#fff; padding:.7rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:90; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* mobile nav — placed last so the collapse wins the cascade */
@media(max-width:40rem){
  .site-header { flex-wrap:wrap; }
  .brand { order:1; }
  .nav-toggle { display:block; order:2; }
  .brand-logo { height:28px; max-width:66vw; }
  .site-header nav { order:3; width:100%; display:none; flex-direction:column; align-items:stretch; gap:0; padding-top:.4rem; font-size:1rem; }
  .site-header.nav-open nav { display:flex; }
  .site-header nav a { padding:.8rem .2rem; border-top:1px solid var(--line); }
  .cart-link { justify-content:flex-start; }
}

/* welcome signup */
.welcome { padding:3rem 1.25rem; }
.welcome-inner { max-width:36rem; margin:0 auto; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:2.25rem 1.5rem; }
.welcome-inner h2 { font-size:1.6rem; margin-bottom:.6rem; }
.welcome-inner > p { color:var(--muted); margin-bottom:1.4rem; }
.welcome form { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.welcome input { flex:1; min-width:14rem; padding:.75rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--ink); color:var(--paper); font-size:.95rem; }
.welcome input:focus { outline:none; border-color:var(--wine); }
.welcome-result { min-height:1.2rem; margin-top:1rem; font-size:.95rem; }
.welcome-result.ok { color:#3ddc97; }
.welcome-result.ok strong { color:var(--paper); letter-spacing:.06em; }
.welcome-result.err { color:#ff6b81; }
.welcome-fine { font-size:.78rem; color:var(--muted); margin-top:.9rem; }
@media (max-width:520px){ .welcome form { flex-direction:column; } .welcome .btn { width:100%; } }

/* ---- WhatsApp chat button (injected by OL.waButton) ---- */
.wa-chat { position:fixed; right:1.1rem; bottom:calc(1.4rem + env(safe-area-inset-bottom)); z-index:60; display:flex; align-items:center; justify-content:center; width:52px; height:52px; background:#25d366; border-radius:50%; box-shadow:0 4px 16px rgba(37,211,102,.4); transition:transform .2s, box-shadow .2s; }
.wa-chat:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,211,102,.55); }
.wa-chat svg { width:28px; height:28px; fill:#fff; }
@media (max-width:480px){ .wa-chat { width:48px; height:48px; right:.9rem; } .wa-chat svg { width:25px; height:25px; } }