/* ===== Tokens ===== */
:root{
  --bg-void: #0a0a10;
  --surface: #15151f;
  --surface-2: #1c1c29;
  --border: #2a2a3a;

  --frost-cyan: #6ff3ff;
  --holo-violet: #b98cff;
  --ice-lime: #c6ff5c;
  --ember-pink: #ff5c93;

  --text: #f3f1fa;
  --text-dim: #a6a2bd;
  --text-faint: #6f6b87;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-led: 'JetBrains Mono', monospace;

  --radius: 14px;
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
  opacity:.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-void); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:999px; border:2px solid var(--bg-void); }
::-webkit-scrollbar-thumb:hover{ background: var(--holo-violet); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ===== Brand watermark field (subtle repeating logo texture) ===== */
.brand-watermark-field{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url("assets/brand/logo.png");
  background-size: 160px auto;
  background-repeat: repeat;
  opacity: .04;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--font-display); font-weight:600; letter-spacing:.02em;
  padding: .75rem 1.25rem; border-radius: 999px; border:1px solid transparent;
  cursor:pointer; font-size: .95rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; position:relative; overflow:hidden;
}
.btn:active{ transform: scale(.97); }
.btn::after{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
.btn:hover::after{ left:125%; }
@keyframes badgePulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.35); }
  100%{ transform: scale(1); }
}
.badge-pulse{ animation: badgePulse .35s ease; }
.btn--whatsapp{
  background: linear-gradient(135deg, #25D366, #128C4A);
  color:#04160c;
  box-shadow: 0 0 0 rgba(37,211,102,.0);
}
.btn--whatsapp:hover{ box-shadow: 0 0 22px rgba(37,211,102,.45); }
.btn--sm{ padding:.55rem .9rem; font-size:.8rem; min-height:44px; }
.btn--primary{
  background: linear-gradient(135deg, var(--holo-violet), var(--frost-cyan));
  color: #0a0a10;
}
.btn--primary:hover{ box-shadow: 0 0 24px rgba(185,140,255,.5); }
.btn--ghost{
  background: transparent; color: var(--text-dim); border-color: var(--border);
}
.btn--ghost:hover{ color: var(--text); border-color: var(--text-dim); }

/* ===== Age gate ===== */
.age-gate{
  position: fixed; inset:0; z-index: 100;
  background: rgba(6,6,10,.9); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.age-gate__card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; max-width: 380px; text-align:center;
}
.age-gate__logo{ width:64px; height:64px; object-fit:contain; margin:0 auto 1rem; filter: drop-shadow(0 0 12px rgba(185,140,255,.5)); }
.age-gate__card h2{ font-family: var(--font-display); margin:.25rem 0 .5rem; font-size:1.3rem; }
.age-gate__card p{ color: var(--text-dim); font-size:.9rem; line-height:1.5; margin-bottom:1.5rem; }
.age-gate__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
body.verified .age-gate{ display:none; }

/* ===== Topbar ===== */
.topbar{
  position: sticky; top:0; z-index:40;
  background: rgba(10,10,16,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{
  max-width:1200px; margin:0 auto; padding: .8rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; position:relative; }
.brand__logo{ width:34px; height:34px; object-fit:contain; transition: transform .4s ease; }
.brand:hover .brand__logo{ transform: rotate(-8deg) scale(1.08); }
.brand__name{
  font-family: var(--font-display); font-weight:600; letter-spacing:.03em;
  font-size:1rem; color: var(--text); position:relative;
}
.brand__name::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background: linear-gradient(90deg, var(--frost-cyan), var(--holo-violet));
  transition: width .3s ease;
}
.brand:hover .brand__name::after{ width:100%; }
.brand__name em{ font-style:normal; color: var(--frost-cyan); }

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  padding: 4.5rem 1.25rem 3rem;
  text-align:center;
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(185,140,255,.25), transparent 60%),
    radial-gradient(50% 60% at 80% 10%, rgba(111,243,255,.15), transparent 60%),
    var(--bg-void);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: heroBreathe 14s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%,100%{ background-position: 50% 0%, 80% 10%, 0 0; }
  50%{ background-position: 40% 10%, 70% 20%, 0 0; }
}
.hero__watermark{
  position:absolute; top:50%; left:50%; width:min(900px, 140vw); height:auto;
  transform: translate(-50%,-50%); opacity:.05; z-index:0; pointer-events:none;
  filter: blur(.5px);
}
.hero__inner{ max-width: 720px; margin:0 auto; position:relative; z-index:1; }
.hero__eyebrow{
  font-family: var(--font-led); color: var(--ice-lime); letter-spacing:.15em;
  text-transform:uppercase; font-size:.8rem; margin:0 0 .75rem;
}
.hero__title{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(2.4rem, 7vw, 4.2rem); line-height:1; margin:0 0 1rem;
  letter-spacing: .01em;
}
.hero__title .holo{
  display:block;
  background: linear-gradient(100deg, var(--holo-violet), var(--frost-cyan) 35%, var(--ember-pink) 65%, var(--ice-lime));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  animation: holoshift 6s ease-in-out infinite;
}
@keyframes holoshift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.hero__subtitle{ color: var(--text-dim); font-size:1.05rem; margin:0 0 1.25rem; line-height:1.5; }

.hero__marquee{
  position:relative; width:100%; overflow:hidden; margin: 0 0 1.75rem;
}
.hero__marquee::before, .hero__marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:2; pointer-events:none;
}
.hero__marquee::before{ left:0; background: linear-gradient(90deg, var(--bg-void), transparent); }
.hero__marquee::after{ right:0; background: linear-gradient(270deg, var(--bg-void), transparent); }
.hero__marquee-track{
  display:flex; gap:.6rem; width:max-content;
  animation: heroMarquee 22s linear infinite;
}
.hero__marquee:hover .hero__marquee-track{ animation-play-state: paused; }
.hero__marquee-track a{
  font-family: var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.02em;
  color: var(--text-dim); background: var(--surface); border:1px solid var(--border);
  padding:.55rem 1.1rem; border-radius:999px; white-space:nowrap; transition: all .2s ease;
}
.hero__marquee-track a:hover{
  color:#0a0a10; border-color:transparent;
  background: linear-gradient(135deg, var(--holo-violet), var(--frost-cyan));
}
@keyframes heroMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--marquee-distance, -50%)); }
}

.hero__meta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.chip{
  font-size:.78rem; color: var(--text-dim); background: var(--surface);
  border:1px solid var(--border); padding:.4rem .8rem; border-radius:999px;
}

/* ===== Section picker (landing) ===== */
.sections{ max-width:1200px; margin:0 auto; padding: 1.5rem 1.25rem 3rem; text-align:center; }
.sections__eyebrow{
  font-family: var(--font-led); color: var(--frost-cyan); letter-spacing:.1em;
  text-transform:uppercase; font-size:.85rem; margin: 0 0 1.5rem;
}
.sections__grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem;
  text-align:left;
}
.section-card{
  position:relative; border-radius: var(--radius); overflow:hidden; cursor:pointer;
  border:1px solid var(--border); background: var(--surface);
  aspect-ratio: 9/10;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.section-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px rgba(185,140,255,.18); }
.section-card:focus-visible{ outline: 2px solid var(--frost-cyan); outline-offset: 3px; }
.section-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition: transform .4s ease;
}
.section-card:hover img{ transform: scale(1.05); }
.section-card::before{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%; z-index:1;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), rgba(111,243,255,.15), transparent);
  transform: skewX(-18deg);
  transition: left .75s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.section-card:hover::before{ left:135%; }
.section-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,10,16,0) 30%, rgba(10,10,16,.92) 92%);
}
.section-card__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.1rem 1.1rem 1.3rem;
}
.section-card__name{
  font-family: var(--font-display); font-weight:700; font-size:1.6rem; color: var(--text);
  display:block; margin-bottom:.25rem;
}
.section-card__sub{ font-family: var(--font-led); font-size:.9rem; color: var(--ice-lime); }
.section-card__tap{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  background: rgba(10,10,16,.6); border:1px solid var(--border); color: var(--text-dim);
  font-size:.78rem; padding:.35rem .7rem; border-radius:999px; font-family: var(--font-led);
}
.sections__viewall{
  margin-top: 2rem; background:none; border:none; color: var(--text-dim);
  font-family: var(--font-display); font-size:.9rem; cursor:pointer; text-decoration: underline;
  text-underline-offset: 4px;
}
.sections__viewall:hover{ color: var(--frost-cyan); }

.back-link{
  background:none; border:none; color: var(--text-dim); font-family: var(--font-display);
  font-size:.85rem; cursor:pointer; padding:.3rem 0; text-align:left; width:fit-content;
}
.back-link:hover{ color: var(--frost-cyan); }

/* ===== Filters ===== */
.filters{
  position: sticky; top: 62px; z-index:30;
  background: rgba(10,10,16,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.25rem;
  display:flex; flex-direction:column; gap:.65rem;
}
.filters__pillswrap{ position:relative; }
.filters__pillswrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
  background: linear-gradient(90deg, transparent, var(--bg-void));
  pointer-events:none; opacity:.85;
}
.filters__inner{
  display:flex; gap:.5rem; overflow-x:auto; max-width:1200px; margin:0 auto; width:100%;
  scrollbar-width: none;
}
.filters__inner::-webkit-scrollbar{ display:none; }
.pill{
  font-family: var(--font-display); font-size:.82rem; font-weight:600;
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--border);
  background: var(--surface); color: var(--text-dim); cursor:pointer; flex:0 0 auto;
  transition: all .15s ease; min-height:40px; display:inline-flex; align-items:center;
}
.pill:hover{ color: var(--text); border-color: var(--text-dim); }
.pill.active{
  background: linear-gradient(135deg, var(--holo-violet), var(--frost-cyan));
  color:#0a0a10; border-color:transparent;
}

/* ===== Catalog grid ===== */
.catalog{
  max-width:1200px; margin:0 auto; padding: 2rem 1.25rem 3rem;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:1.1rem;
}
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  position:relative; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  opacity:0; transform: translateY(18px);
}
.card.in-view{ opacity:1; transform: translateY(0); }
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background: linear-gradient(90deg, var(--holo-violet), var(--frost-cyan), var(--ember-pink), var(--ice-lime));
  opacity:0; transition: opacity .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--text-faint);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(185,140,255,.15), 0 0 24px rgba(111,243,255,.12);
}
.card:hover::before{ opacity:1; }
.card__imgwrap{
  aspect-ratio: 1/1; background: var(--surface-2); display:flex; align-items:center; justify-content:center;
  padding: 1rem; position:relative; overflow:hidden;
}
.card__imgwrap img{ width:100%; height:100%; object-fit:contain; transition: transform .35s ease; }
.card:hover .card__imgwrap img{ transform: scale(1.06); }
.card__body{ padding: .9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__brand{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--frost-cyan); font-weight:600; }
.card__flavor{ font-family: var(--font-display); font-size:1.02rem; font-weight:600; line-height:1.25; min-height:2.5em; }
.card__meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; }
.card__price{
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
  font-family: var(--font-led); font-weight:600; letter-spacing:.01em;
  background: linear-gradient(135deg, rgba(198,255,92,.14), rgba(111,243,255,.08));
  color: var(--ice-lime);
  border:1px solid rgba(198,255,92,.35); padding:.3rem .65rem; border-radius:999px; font-size:1.02rem;
}
.card__price::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--ice-lime);
  box-shadow: 0 0 8px var(--ice-lime); flex-shrink:0;
}
.card__puffs{ font-size:.72rem; color: var(--text-faint); font-family: var(--font-led); }
.card__cta{ margin-top:.6rem; width:100%; }

.empty-state{ text-align:center; color: var(--text-dim); padding: 3rem 1rem; }

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--border); padding: 2.5rem 1.25rem; }
.footer__inner{
  max-width:1200px; margin:0 auto; display:flex; gap:1.25rem; align-items:flex-start;
  flex-wrap:wrap;
}
.footer__logo{ width:44px; height:44px; object-fit:contain; opacity:.8; }
.footer__contact p{ margin:.15rem 0; color: var(--text-dim); font-size:.9rem; }
.footer__contact a{ color: var(--frost-cyan); }
.footer__ig{
  display:inline-flex; align-items:center; gap:.4rem; color: var(--holo-violet) !important;
  font-weight:600; transition: color .2s ease; margin-top:.15rem;
}
.footer__ig:hover{ color: var(--frost-cyan) !important; }
.footer__note{ color: var(--text-faint) !important; font-size:.78rem !important; margin-top:.5rem !important; }

.card__cta.added{ background: linear-gradient(135deg, var(--ice-lime), var(--frost-cyan)); }

/* ===== Cart button (topbar) ===== */
.cart-topbtn{
  position:relative; display:flex; align-items:center; gap:.5rem;
  background: linear-gradient(135deg, var(--holo-violet), var(--frost-cyan));
  color:#0a0a10; border:none; border-radius:999px; padding:.6rem 1.1rem;
  cursor:pointer; font-family: var(--font-display); font-weight:700; font-size:1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cart-topbtn:hover{ transform: scale(1.04); box-shadow: 0 0 20px rgba(185,140,255,.45); }
.cart-topbtn__label{ line-height:1; }
.cart-fab__badge{
  position:absolute; top:-8px; right:-8px; background: var(--ember-pink); color:#fff;
  font-family: var(--font-led); font-size:.75rem; min-width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--bg-void);
}

/* ===== WhatsApp floating button (bottom-right) ===== */
.whatsapp-fab{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C4A);
  color:#04160c; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-fab:hover{ transform: scale(1.06); box-shadow: 0 0 22px rgba(37,211,102,.55); }

/* ===== Cart panel ===== */
.cart-overlay{
  position:fixed; inset:0; background: rgba(6,6,10,.7); backdrop-filter: blur(4px); z-index:70;
}
.cart-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width: min(400px, 100%); background: var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
}
.cart-panel__header{
  display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.cart-panel__header h2{ font-family: var(--font-display); font-size:1.1rem; margin:0; }
.cart-panel__close{
  background:none; border:none; color: var(--text-dim); font-size:1.1rem; cursor:pointer; padding:.25rem .5rem;
}
.cart-panel__close:hover{ color: var(--text); }
.cart-panel__items{ flex:1; overflow-y:auto; padding: .5rem 1.25rem; }
.cart-empty{ color: var(--text-dim); font-size:.9rem; padding: 2rem 0; text-align:center; }
.cart-item{
  display:grid; grid-template-columns: 52px 1fr auto; gap:.75rem; align-items:center;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.cart-item img{ width:52px; height:52px; object-fit:contain; background: var(--surface-2); border-radius:8px; padding:.25rem; }
.cart-item__info{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.cart-item__brand{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--frost-cyan); }
.cart-item__flavor{ font-family: var(--font-display); font-size:.9rem; }
.cart-item__price{ font-family: var(--font-led); font-size:.75rem; color: var(--text-faint); }
.cart-item__qty{ display:flex; align-items:center; gap:.5rem; font-family: var(--font-led); }
.qty-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background: var(--surface-2);
  color: var(--text); cursor:pointer; font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover{ border-color: var(--frost-cyan); color: var(--frost-cyan); }
.cart-panel__footer{ padding: 1rem 1.25rem 1.4rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.7rem; }
.cart-panel__total{
  display:flex; justify-content:space-between; font-family: var(--font-display); font-weight:600; font-size:1.1rem;
}
.cart-panel__total span{ font-family: var(--font-led); color: var(--ice-lime); }
.cart-panel__clear{
  background:none; border:none; color: var(--text-faint); font-size:.78rem; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.cart-panel__clear:hover{ color: var(--ember-pink); }
#cartCheckout[aria-disabled="true"]{ opacity:.4; pointer-events:none; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .hero__title .holo{ animation:none; }
  .hero{ animation:none; }
  .card{ opacity:1; transform:none; transition:none; }
  .hero__marquee-track{ animation:none; }
  .hero__marquee{ overflow-x:auto; }
  .hero__marquee::before, .hero__marquee::after{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ===== Responsive ===== */
@media (max-width:640px){
  .hero{ padding: 3rem 1rem 2rem; }
  .sections__grid{ gap:.75rem; }
  .section-card__name{ font-size:1rem; }
  .section-card__sub{ font-size:.68rem; }
  .section-card__tap{ font-size:.65rem; padding:.25rem .5rem; top:.5rem; right:.5rem; }
  .section-card__label{ padding:.7rem .7rem .8rem; }
  .catalog{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.75rem; }
  .card__flavor{ font-size:.92rem; min-height:2.2em; }
  .topbar__inner{ padding:.65rem 1rem; }
  .whatsapp-fab{ right:1rem; bottom:1rem; width:54px; height:54px; }
  .cart-topbtn__label{ display:none; }
  .cart-topbtn{ padding:.55rem .8rem; }
}