/* =========================================================
   VossStore · Componentes reutilizables
   ========================================================= */

/* ============ BOTONES ============ */
.btn{
  --btn-bg: var(--surface-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-full);
  font-family:var(--ff-body); font-size:13px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  background:var(--btn-bg); color:var(--text);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), opacity var(--t);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:17px; height:17px; flex:none; }

.btn--primary{
  background:var(--grad); color:#05050A;
  box-shadow:0 10px 30px rgba(77,225,255,.18);
}
.btn--primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  background-size:200% 100%; opacity:0; transition:opacity var(--t);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(77,225,255,.34); }
.btn--primary:hover::after{ opacity:1; animation:shimmer 1.1s var(--ease-out); }

.btn--ghost{
  background:rgba(255,255,255,.03); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{ background:rgba(255,255,255,.075); transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26); }

.btn--dark{ background:#0E0E13; box-shadow:inset 0 0 0 1px var(--line); }
.btn--dark:hover{ background:#15151C; }

.btn--wa{ background:#25D366; color:#06210F; box-shadow:0 10px 28px rgba(37,211,102,.22); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,211,102,.34); }

.btn--lg{ padding:19px 34px; font-size:13.5px; }
.btn--sm{ padding:11px 18px; font-size:11.5px; letter-spacing:.11em; }
.btn--block{ width:100%; }
.btn[disabled],.btn.is-disabled{ opacity:.34; pointer-events:none; filter:grayscale(.4); }

/* ============ PILLS / BADGES ============ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--r-full);
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  background:rgba(255,255,255,.04); color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap;
}
.pill--accent{ background:rgba(77,225,255,.10); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(77,225,255,.25); }
.pill--green{ background:rgba(61,220,151,.11); color:var(--accent-3); box-shadow:inset 0 0 0 1px rgba(61,220,151,.26); }
.pill--flavor{ text-transform:none; letter-spacing:.01em; font-size:12px; font-weight:500; }
.pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); flex:none; }

.tag-18{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:22px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  background:rgba(255,255,255,.06); color:var(--text-2); box-shadow:inset 0 0 0 1px var(--line-2);
}

/* ============ ANUNCIO SUPERIOR ============ */
.announce{
  position:relative; z-index:76; height:var(--announce-h);
  display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(90deg,#0B0B10,#141420,#0B0B10);
  border-bottom:1px solid var(--line);
}
.announce__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.announce__group{ display:flex; align-items:center; }
.announce__item{
  display:inline-flex; align-items:center; gap:10px; padding:0 26px;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--text-2); white-space:nowrap;
}
.announce__item b{ color:var(--accent); font-weight:700; }
.announce__sep{ width:4px; height:4px; border-radius:50%; background:var(--accent-2); opacity:.8; }

/* ============ HEADER ============ */
.header{ position:sticky; top:0; z-index:77; }
.header__bar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(8,8,11,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t), height var(--t) var(--ease);
}
.header.is-scrolled .header__bar{ border-bottom-color:var(--line); background:rgba(8,8,11,.9); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); height:100%; }

/* Logo */
.logo{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.logo__mark{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(77,225,255,.28);
  transition:transform var(--t) var(--ease), box-shadow var(--t);
}
.logo:hover .logo__mark{ transform:rotate(-8deg) scale(1.06); box-shadow:0 10px 26px rgba(123,92,255,.45); }
.logo__mark svg{ width:19px; height:19px; }
.logo__text{
  font-family:var(--ff-display); font-weight:800; font-size:18.5px; letter-spacing:.02em; line-height:1;
}
.logo__text span{ color:var(--accent); }
.logo__sub{ display:block; font-family:var(--ff-body); font-size:8.5px; font-weight:600; letter-spacing:.42em; color:var(--muted); margin-top:4px; }

/* Nav desktop */
.nav{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; padding:10px 15px; border-radius:var(--r-full);
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--text-2);
  transition:color var(--t), background var(--t);
}
.nav__link:hover{ color:var(--text); background:rgba(255,255,255,.045); }
.nav__link.is-active{ color:var(--text); }
.nav__link.is-active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:16px; height:2px; border-radius:2px; background:var(--grad);
}
.nav__link--hot{ color:var(--accent); }

/* Acciones */
.header__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:var(--r-full);
  display:grid; place-items:center; color:var(--text-2);
  transition:background var(--t), color var(--t), transform var(--t) var(--ease);
}
.icon-btn:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn__count{
  position:absolute; top:4px; right:2px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--grad); color:#05050A; font-size:10.5px; font-weight:800; line-height:1;
  box-shadow:0 0 0 3px var(--bg);
}
.icon-btn__count.is-bump{ animation:bump .45s var(--ease); }
.icon-btn__count[hidden]{ display:none; }
.header__cart{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px var(--line); }

/* Menú móvil */
.burger{ display:none; width:42px; height:42px; border-radius:var(--r-full); place-items:center; }
.burger span{ display:block; width:19px; height:1.8px; background:var(--text); border-radius:2px; transition:transform var(--t) var(--ease), opacity var(--t); }
.burger span+span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:70;
  background:rgba(6,6,9,.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:calc(var(--header-h) + var(--announce-h) + 20px) var(--gutter) 40px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  overflow-y:auto;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px; font-family:var(--ff-display); font-size:26px; font-weight:700; letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px);
}
.mobile-menu.is-open .mobile-menu__link{ animation:fadeUp .5s var(--ease-out) forwards; animation-delay:var(--d,0ms); }
.mobile-menu__link span{ font-family:var(--ff-body); font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.mobile-menu__link.is-active{ color:var(--accent); }
.mobile-menu__foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:14px; }

/* ============ BARRA INFERIOR MÓVIL ============ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  padding:8px max(var(--gutter),10px) calc(8px + env(safe-area-inset-bottom));
  background:rgba(9,9,13,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  transform:translateY(0); transition:transform var(--t) var(--ease);
}
.tabbar.is-hidden{ transform:translateY(140%); }
.tabbar__grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.tabbar__item{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 4px;
  font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:color var(--t); position:relative;
}
.tabbar__item svg{ width:21px; height:21px; }
.tabbar__item.is-active{ color:var(--accent); }
.tabbar__count{
  position:absolute; top:1px; right:calc(50% - 18px); min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; border-radius:var(--r-full); background:var(--grad);
  color:#05050A; font-size:10px; font-weight:800;
}
.tabbar__count[hidden]{ display:none; }

/* ============ WHATSAPP FAB ============ */
.wa-fab{
  position:fixed; right:16px; bottom:24px; z-index:54;
  display:inline-flex; align-items:center; gap:10px;
  height:54px; padding:0 18px; border-radius:var(--r-full);
  background:#25D366; color:#06210F; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 14px 34px rgba(37,211,102,.32);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t);
}
.wa-fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-fab:hover{ box-shadow:0 18px 44px rgba(37,211,102,.46); transform:translateY(-3px); }
.wa-fab svg{ width:24px; height:24px; }
.wa-fab__label{ display:inline; }

/* ============ BARRA DE ENVÍO GRATIS ============ */
.fsb{ display:flex; flex-direction:column; gap:10px; }
.fsb__msg{ font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:8px; line-height:1.35; }
.fsb__msg b{ color:var(--text); font-weight:600; }
.fsb__msg--done{ color:var(--accent-3); font-weight:600; }
.fsb__track{ height:7px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; position:relative; }
.fsb__fill{
  height:100%; border-radius:99px; background:var(--grad);
  width:0; transition:width .7s var(--ease-out);
  position:relative; overflow:hidden;
}
.fsb__fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  background-size:200% 100%; animation:shimmer 2.4s linear infinite;
}
.fsb__fill.is-done{ background:linear-gradient(118deg,#3DDC97,#4DE1FF); }

/* ============ STEPPER CANTIDAD ============ */
.stepper{
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.045); border-radius:var(--r-full);
  box-shadow:inset 0 0 0 1px var(--line); padding:4px;
}
.stepper__btn{
  width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center;
  color:var(--text-2); font-size:17px; line-height:1;
  transition:background var(--t), color var(--t), transform var(--t-fast);
}
.stepper__btn:hover:not([disabled]){ background:rgba(255,255,255,.09); color:var(--text); }
.stepper__btn:active:not([disabled]){ transform:scale(.88); }
.stepper__btn[disabled]{ opacity:.25; cursor:not-allowed; }
.stepper__val{ min-width:34px; text-align:center; font-family:var(--ff-display); font-weight:700; font-size:15px; }
.stepper--lg .stepper__btn{ width:44px; height:44px; font-size:20px; }
.stepper--lg .stepper__val{ min-width:46px; font-size:17px; }

/* ============ TARJETA DE PRODUCTO ============ */
.pcard{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r-lg); padding:18px 18px 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c2) 16%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,#101016 0%,#0B0B10 100%);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden; isolation:isolate;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pcard::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 45%, transparent), transparent 45%);
  opacity:0; transition:opacity var(--t);
}
.pcard:hover{ transform:translateY(-8px); box-shadow:inset 0 0 0 1px var(--line-2), 0 26px 60px rgba(0,0,0,.5); }
.pcard:hover::before{ opacity:1; }
.pcard__media{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  border-radius:var(--r-md); overflow:hidden; margin-bottom:16px;
}
.pcard__glow{
  position:absolute; width:74%; height:74%; border-radius:50%; filter:blur(48px); opacity:.5;
  background:radial-gradient(circle, var(--c2) 0%, transparent 70%);
  transition:opacity var(--t), transform var(--t-slow) var(--ease);
}
.pcard:hover .pcard__glow{ opacity:.85; transform:scale(1.14); }
.pcard__device{ position:relative; height:88%; transition:transform var(--t-slow) var(--ease); }
.pcard:hover .pcard__device{ transform:translateY(-8px) rotate(-3deg) scale(1.04); }
.pcard__badge{ position:absolute; top:12px; left:12px; z-index:2; }
.pcard__quick{
  position:absolute; top:10px; right:10px; z-index:2;
  width:42px; height:42px; border-radius:var(--r-full); display:grid; place-items:center;
  background:rgba(10,10,14,.7); backdrop-filter:blur(10px); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
  opacity:0; transform:translateY(-6px) scale(.9);
  transition:all var(--t) var(--ease);
}
.pcard:hover .pcard__quick{ opacity:1; transform:none; }
.pcard__quick:hover{ background:var(--grad); color:#05050A; }
.pcard__quick svg{ width:19px; height:19px; }
.pcard__name{ font-family:var(--ff-display); font-size:19px; font-weight:700; letter-spacing:-.02em; }
.pcard__meta{ font-size:13px; color:var(--muted); margin-top:5px; }
.pcard__flavors{ display:flex; align-items:center; gap:6px; margin-top:14px; }
.pcard__dot{ width:15px; height:15px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(255,255,255,.10); }
.pcard__dot--more{ font-size:10.5px; color:var(--muted); width:auto; box-shadow:none; }
.pcard__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.pcard__price{ font-family:var(--ff-display); font-size:23px; font-weight:700; line-height:1; white-space:nowrap; }
.pcard__price small{ display:block; font-family:var(--ff-body); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pcard__cta{ white-space:nowrap; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:7px; transition:gap var(--t); }
.pcard:hover .pcard__cta{ gap:12px; }

/* ============ TARJETA DE SABOR ============ */
.ftile{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:3/4; isolation:isolate; background:#0C0C11;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t);
}
.ftile:hover{ transform:translateY(-7px); box-shadow:inset 0 0 0 1px var(--line-2), 0 26px 56px rgba(0,0,0,.5); }
.ftile__art{ position:absolute; inset:0; overflow:hidden; }
.ftile__blob{ position:absolute; border-radius:50%; filter:blur(38px); transition:transform 1s var(--ease); }
.ftile__blob--1{ width:78%; height:60%; top:-8%; left:-14%; background:var(--c1); opacity:.75; }
.ftile__blob--2{ width:72%; height:58%; bottom:-10%; right:-12%; background:var(--c2); opacity:.62; }
.ftile:hover .ftile__blob--1{ transform:translate(12%,10%) scale(1.16); }
.ftile:hover .ftile__blob--2{ transform:translate(-10%,-8%) scale(1.14); }
.ftile__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,6,10,.12) 0%,rgba(6,6,10,.62) 58%,rgba(6,6,10,.92) 100%); }
.ftile__device{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); height:66%; transition:transform var(--t-slow) var(--ease); }
.ftile:hover .ftile__device{ transform:translate(-50%,-56%) scale(1.07); }
.ftile__body{ position:absolute; left:0; right:0; bottom:0; padding:18px; }
.ftile__name{ font-family:var(--ff-display); font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.ftile__notes{ font-size:12px; color:var(--text-2); margin-top:5px; }
.ftile__add{
  margin-top:14px; width:100%; height:0; opacity:0; overflow:hidden;
  border-radius:var(--r-full); background:rgba(255,255,255,.92); color:#08080B;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  display:grid; place-items:center;
  transition:height var(--t) var(--ease), opacity var(--t);
}
.ftile:hover .ftile__add{ height:42px; opacity:1; }
.ftile__tag{ position:absolute; top:14px; left:14px; }

/* ============ DRAWER CARRITO ============ */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(4,4,7,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t);
}
.scrim.is-open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(440px,100%);
  background:linear-gradient(180deg,#0D0D12 0%,#08080B 100%);
  box-shadow:-30px 0 80px rgba(0,0,0,.6); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .42s var(--ease-out);
}
.drawer.is-open{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px var(--gutter); border-bottom:1px solid var(--line); flex:none; }
.drawer__title{ font-family:var(--ff-display); font-size:17px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
.drawer__title span{ font-family:var(--ff-body); font-size:12px; font-weight:500; color:var(--muted); }
.drawer__fsb{ padding:18px var(--gutter); border-bottom:1px solid var(--line); flex:none; background:rgba(255,255,255,.015); }
.drawer__body{ flex:1; overflow-y:auto; padding:6px var(--gutter) 20px; }
.drawer__foot{
  flex:none; padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:rgba(10,10,14,.8); backdrop-filter:blur(14px);
}
.drawer__close{ width:38px; height:38px; }

.citem{ display:grid; grid-template-columns:78px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); animation:fadeUp .4s var(--ease-out); }
.citem:last-child{ border-bottom:0; }
.citem__media{
  position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/4;
  display:grid; place-items:center; background:linear-gradient(160deg,#14141A,#0B0B10);
  box-shadow:inset 0 0 0 1px var(--line);
}
.citem__media svg{ height:86%; }
.citem__glow{ position:absolute; inset:0; opacity:.4; background:radial-gradient(circle at 50% 40%, var(--c2), transparent 68%); filter:blur(16px); }
.citem__name{ font-family:var(--ff-display); font-size:14.5px; font-weight:700; line-height:1.25; }
.citem__sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.citem__mix{ margin-top:8px; display:flex; flex-wrap:wrap; gap:5px; }
.citem__chip{ font-size:10.5px; color:var(--text-2); background:rgba(255,255,255,.05); border-radius:6px; padding:3px 7px; display:inline-flex; align-items:center; gap:5px; }
.citem__chip i{ width:8px; height:8px; border-radius:50%; display:block; }
.citem__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.citem__price{ font-family:var(--ff-display); font-weight:700; font-size:15px; }
.citem__remove{ font-size:11px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; transition:color var(--t); }
.citem__remove:hover{ color:#FF6B7A; }

.totals{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.totals__row{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; color:var(--text-2); }
.totals__row b{ color:var(--text); font-weight:600; }
.totals__row--total{ font-family:var(--ff-display); font-size:19px; font-weight:700; color:var(--text); padding-top:11px; border-top:1px solid var(--line); }
.totals__free{ color:var(--accent-3); font-weight:700; letter-spacing:.06em; }

.upsell{ margin-top:22px; padding:18px; border-radius:var(--r-md); background:rgba(255,255,255,.028); box-shadow:inset 0 0 0 1px var(--line); }
.upsell__title{ font-size:13px; font-weight:600; color:var(--text); display:flex; gap:9px; align-items:flex-start; line-height:1.4; }
.upsell__title svg{ width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
.upsell__row{ display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.upsell__row::-webkit-scrollbar{ display:none; }
.upsell__mini{
  flex:none; width:92px; border-radius:var(--r-sm); padding:10px 8px; text-align:center;
  background:linear-gradient(170deg,#121218,#0C0C11); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t);
}
.upsell__mini:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-2); }
.upsell__mini svg{ height:56px; margin-inline:auto; }
.upsell__mini span{ display:block; font-size:10.5px; color:var(--text-2); margin-top:7px; line-height:1.25; }
.upsell__mini b{ display:block; font-size:10.5px; color:var(--accent); margin-top:5px; letter-spacing:.08em; }

.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:56px 10px; }
.empty__icon{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.empty__icon svg{ width:30px; height:30px; color:var(--muted); }
.empty h4{ font-family:var(--ff-display); font-size:18px; }
.empty p{ font-size:13.5px; color:var(--muted); max-width:30ch; }

/* ============ MODAL +18 ============ */
.agegate{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:rgba(4,4,7,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  animation:fadeUp .4s var(--ease-out);
}
.agegate__card{
  position:relative; width:min(480px,100%); text-align:center;
  padding:clamp(30px,5vw,46px) clamp(24px,4vw,40px);
  border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(170deg,#111117 0%,#08080C 100%);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 100px rgba(0,0,0,.7);
  animation:pop .5s var(--ease-out);
}
.agegate__card::before{
  content:""; position:absolute; top:-52%; left:50%; transform:translateX(-50%);
  width:130%; height:110%; background:radial-gradient(circle, rgba(77,225,255,.20) 0%, transparent 62%);
  pointer-events:none;
}
.agegate__logo{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:14px; }
.agegate__mark{ width:56px; height:56px; border-radius:17px; background:var(--grad); display:grid; place-items:center; box-shadow:0 14px 34px rgba(77,225,255,.32); }
.agegate__mark svg{ width:30px; height:30px; }
.agegate__brand{ font-family:var(--ff-display); font-size:clamp(26px,5vw,34px); font-weight:800; letter-spacing:.02em; }
.agegate__brand span{ color:var(--accent); }
.agegate__claim{ position:relative; font-size:13.5px; color:var(--text-2); margin-top:12px; }
.agegate__q{ position:relative; font-family:var(--ff-display); font-size:clamp(19px,3vw,23px); font-weight:700; margin-top:30px; letter-spacing:-.02em; }
.agegate__actions{ position:relative; display:flex; flex-direction:column; gap:11px; margin-top:26px; }
.agegate__legal{ position:relative; font-size:11px; color:var(--muted); line-height:1.55; margin-top:24px; }
.agegate__ribbon{ position:relative; display:inline-flex; margin-bottom:4px; }
.agegate--denied .agegate__card{ box-shadow:inset 0 0 0 1px rgba(255,90,110,.3), 0 40px 100px rgba(0,0,0,.7); }
.agegate__denied-icon{ width:64px; height:64px; border-radius:50%; margin-inline:auto; display:grid; place-items:center; background:rgba(255,90,110,.1); box-shadow:inset 0 0 0 1px rgba(255,90,110,.3); }
.agegate__denied-icon svg{ width:30px; height:30px; color:#FF5A6E; }

/* ============ COOKIES ============ */
.cookies{
  position:fixed; left:var(--gutter); right:var(--gutter); bottom:var(--gutter); z-index:90;
  max-width:520px; padding:22px;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(19,19,25,.96),rgba(10,10,14,.97));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0,0,0,.6);
  transform:translateY(150%); transition:transform .55s var(--ease-out);
}
.cookies.is-open{ transform:none; }
.cookies__head{ display:flex; align-items:center; gap:11px; }
.cookies__head svg{ width:20px; height:20px; color:var(--accent); }
.cookies__head h4{ font-family:var(--ff-display); font-size:15px; font-weight:700; }
.cookies__text{ font-size:13px; color:var(--text-2); margin-top:10px; line-height:1.55; }
.cookies__text a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.cookies__actions{ display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; }
.cookies__actions .btn{ flex:1; min-width:118px; }
.cookies__prefs{ display:none; flex-direction:column; gap:2px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cookies.is-config .cookies__prefs{ display:flex; }
.cookies__pref{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; }
.cookies__pref p{ font-size:12px; color:var(--muted); margin-top:2px; }
.cookies__pref h5{ font-size:13px; font-weight:600; margin:0; font-family:var(--ff-body); }
.switch{ width:44px; height:25px; border-radius:99px; background:rgba(255,255,255,.1); position:relative; flex:none; transition:background var(--t); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform var(--t) var(--ease); }
.switch.is-on{ background:var(--grad); }
.switch.is-on::after{ transform:translateX(19px); }
.switch.is-locked{ opacity:.5; pointer-events:none; }

/* ============ TOAST ============ */
.toast-root{ position:fixed; z-index:95; right:var(--gutter); bottom:calc(var(--gutter) + 70px); display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(20,20,26,.98),rgba(12,12,17,.98));
  box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 46px rgba(0,0,0,.55);
  font-size:13.5px; font-weight:500; max-width:340px;
  animation:fadeUp .35s var(--ease-out); pointer-events:auto;
}
.toast.is-out{ opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s; }
.toast__icon{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--grad); color:#05050A; }
.toast__icon svg{ width:17px; height:17px; }
.toast--info .toast__icon{ background:rgba(255,255,255,.09); color:var(--text); }

/* ============ FOOTER ============ */
.footer{ position:relative; z-index:1; margin-top:clamp(50px,7vw,100px); border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(10,10,14,.4),rgba(6,6,9,.9)); }
.footer__top{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:42px; padding:clamp(48px,6vw,76px) 0 46px; }
.footer__brand .logo{ margin-bottom:18px; }
.footer__desc{ font-size:13.5px; color:var(--muted); max-width:34ch; line-height:1.65; }
.footer__social{ display:flex; gap:9px; margin-top:22px; }
.footer__social a{ width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); color:var(--text-2); transition:all var(--t) var(--ease); }
.footer__social a:hover{ color:var(--text); background:rgba(255,255,255,.09); transform:translateY(-3px); }
.footer__social svg{ width:18px; height:18px; }
.footer__col h5{ font-family:var(--ff-body); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text); margin:0 0 18px; }
.footer__col a{ display:block; font-size:13.5px; color:var(--muted); padding:6px 0; transition:color var(--t), transform var(--t); }
.footer__col a:hover{ color:var(--accent); transform:translateX(3px); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:22px 0 34px; border-top:1px solid var(--line); }
.footer__legal{ font-size:12px; color:var(--muted); }
.footer__age{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-2); }
.footer__age .tag-18{ background:rgba(255,255,255,.05); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .footer__top{ grid-template-columns:1fr 1fr 1fr; gap:34px; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 900px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .tabbar{ display:block; }
  body{ padding-bottom:74px; }
  .wa-fab{ bottom:88px; right:14px; height:50px; padding:0 16px; }
  .wa-fab__label{ display:none; }
  .wa-fab{ width:52px; padding:0; justify-content:center; }
  .toast-root{ left:var(--gutter); right:var(--gutter); bottom:auto; top:calc(var(--header-h) + var(--announce-h) + 12px); align-items:stretch; }
  .toast{ max-width:none; }
  .cookies{ bottom:calc(80px + env(safe-area-inset-bottom)); max-width:none; }
  .drawer{ width:100%; border-left:0; }
}
@media (max-width: 620px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:30px; }
}