/*
Theme Name:   FoodTime POS
Theme URI:    https://demo.highpass.cl
Description:  Tema para FoodTime POS -- mismo motor y codigo que el resto de instalaciones,
              catalogo y marca propios de este sitio.
Author:       FoodTime POS
Template:     twentytwentyfour
Version:      1.0.0
Text Domain:  foodtime-theme
*/

/* ═══════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Marca — sobreescribibles desde el Customizer */
  --st-primary:   #E4002B;
  --st-primary-d: #B3001F;
  --st-secondary: #F5A524;
  --st-dark:      #1A1A1E;

  /* Superficies — lienzo gris + tarjetas blancas (pedido del usuario, 2a tanda del 2026-08-31:
     "prefiero que el fondo sea gris y las tarjetas de los productos sean blancas, un estilo mas
     similar a PedidosYa"). Antes era al reves (pagina blanca, tarjetas en gris claro): las
     tarjetas se RECORTABAN contra el fondo en vez de destacarse sobre el. Invertido, el catalogo
     se lee como una grilla de tarjetas que flotan sobre un lienzo neutro — el patron de
     practicamente todas las apps de delivery. */
  --st-bg:      #FCFCFC;   /* lienzo de la pagina (pedido del usuario: #fcfcfc) */
  --st-surface: #FFFFFF;   /* lo que "flota": tarjetas, barras, modales, drawer */
  /* Ojo con el nombre: --st-raised ya NO es "mas claro que la superficie". Con las tarjetas en
     blanco, lo que va encima de ellas solo puede diferenciarse siendo mas OSCURO — asi que este
     token pasa a ser el gris de apoyo para relleno interno (placeholder de foto, circulo de
     icono, campos de formulario, hover de filas). DESACOPLADO de --st-bg desde que el lienzo
     bajo a #FCFCFC (2026-08-31, pedido del usuario): con ese valor este token seria invisible
     sobre las tarjetas blancas, y las pildoras de categoria / placeholders / inputs dejarian de
     leerse. Se queda en el gris de apoyo. */
  --st-raised:  #F1F2F4;
  --st-hover:   #E8E9EE;   /* un paso mas oscuro que --st-raised, para hover sobre relleno gris */
  --st-line:    #E6E7EB;
  --st-line-2:  #C9C9D1;

  /* Elevacion — con el fondo gris las tarjetas se definen por SOMBRA, no por borde. El borde
     queda casi imperceptible (solo sostiene el recorte donde la sombra no se ve). */
  --st-elev:    0 1px 2px rgba(17,17,26,.05), 0 3px 12px rgba(17,17,26,.07);
  --st-elev-lg: 0 4px 10px rgba(17,17,26,.08), 0 14px 30px rgba(17,17,26,.11);

  /* Texto */
  --st-text:    #1A1A1E;
  --st-muted:   #52525B;
  /* Mismo criterio de contraste ya validado en sushi-time (WCAG AA, 4.5:1 texto normal),
     recalculado acá para fondo CLARO en vez de oscuro: #6B7280 da ~4.6:1 sobre #fff/#F7F7F8 —
     pasa AA con margen, y sigue leyéndose más tenue que --st-muted para conservar jerarquía. */
  --st-faint:   #6B7280;

  /* Alias legacy (los usan las plantillas WooCommerce heredadas) */
  --st-gray:    #F0F0F2;
  --st-red:     #E4002B;
  --st-red-d:   #B3001F;
  --st-yellow:  #F5A524;

  --st-r:       14px;
  --st-radius:  14px;
  --st-r-btn:   5px; /* radio de los botones reales (CTA/submit) — mismo valor que sushi-time */
  --st-maxw:    1280px;
  --st-header-h: 68px;
  --st-catbar-h: 62px;
}

/* ═══════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--st-header-h) + var(--st-catbar-h) + 12px); }
/* Durante una búsqueda, ocultar categorías no debe activar el "scroll anchoring"
   del navegador: la vista se queda inmóvil mientras se escribe. */
html.st-catalog-search-active { overflow-anchor: none; }
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Bloquea el scroll de la página de fondo mientras hay un modal encima (por ahora, la ventana de
   salsas — footer.php, openPopover/closePopover) — sin esto, en pantallas donde el contenido del
   modal no entra completo, el gesto de scroll se "cuela" y mueve el catálogo detrás en vez de
   solo el contenido del modal. */
body.st-noscroll { overflow: hidden; }
/* Tema oscuro para la tienda pública. Los componentes consumen tokens, por lo que este bloque
   conserva la misma jerarquía visual en catálogo, carrito, checkout y modales. */
body.st-theme-dark {
  /* Fondo casi negro, conservando un matiz del color configurado en Tienda Online. */
  --st-bg:      color-mix(in srgb, var(--st-dark) 20%, #030303);
  --st-surface: #121212;
  --st-raised:  #1B1B1B;
  --st-hover:   #252525;
  --st-line:    #313131;
  --st-line-2:  #505050;
  --st-elev:    0 1px 2px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.20);
  --st-elev-lg: 0 5px 14px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.28);
  --st-text:    #F8FAFC;
  --st-muted:   #CBD5E1;
  --st-faint:   #94A3B8;
  --st-gray:    #242424;
  color-scheme: dark;
}
body.st-theme-dark .st-header { background: color-mix(in srgb, var(--st-bg) 96%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.24); }
body.st-theme-dark .st-footer { background: linear-gradient(180deg,#101010 0%,var(--st-bg) 100%); }
body.st-theme-dark .st-card,
body.st-theme-dark .st-catshow__card { border-color: color-mix(in srgb, var(--st-line) 80%, transparent); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, h4, h5, h6 {
  margin: 0; line-height: 1.1;
  /* El tema padre (Twenty Twenty-Four) define un font-family global para todo heading
     (--wp--preset--font-family--heading = "Cardo", una serif) que gana por especificidad
     sobre "body{font-family:Helvetica}" — sin este reset, cualquier <h1-h6> del tema que no
     tenga ya una clase con su propio font-family (como .st-section__title, que sí fuerza
     Anton) hereda esa serif por accidente. Encontrado en los <h5> del footer ("Menú",
     "Ayuda", "Contacto"). inherit acá les da Helvetica (heredado de body); los que sí quieren
     Anton lo siguen teniendo vía su clase, que pesa más que este selector de etiqueta. */
  font-family: inherit;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--st-primary); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--st-bg); }
::-webkit-scrollbar-thumb { background: var(--st-line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--st-primary); }

.st-container { max-width: var(--st-maxw); margin: 0 auto; padding: 0 20px; }

/* Tipografía display — el look "NO ES SOLO SUSHI" */
.st-display {
  font-family: 'Anton', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  transform: skewX(-8deg);
  transform-origin: left center;
}
.st-accent { color: var(--st-primary); }

/* ═══════════════════════════════════════════════════════════
   3. BOTONES
   ═══════════════════════════════════════════════════════════ */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: none; border-radius: var(--st-r-btn);
  font-weight: 700; font-size: .88rem; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, background .2s, box-shadow .2s, border-color .2s;
}
.st-btn--primary {
  background: var(--st-primary); color: #fff;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--st-primary) 32%, transparent);
}
.st-btn--primary:hover { background: var(--st-primary-d); transform: translateY(-1px); box-shadow: 0 10px 28px color-mix(in srgb, var(--st-primary) 42%, transparent); }
.st-btn--ghost {
  /* Unico uso hoy: el CTA secundario del hero (front-page.php), que vive sobre --st-dark.
     Por eso va en blanco y no en --st-text: con el token claro quedaba texto oscuro sobre
     fondo oscuro, invisible. Si se reusa sobre fondo claro necesita una variante propia. */
  background: rgba(255,255,255,.07); color: #fff;
  border: 1.5px solid rgba(255,255,255,.34);
}
.st-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.15); }
.st-btn--cta {
  background: var(--st-primary); color: #fff;
  padding: 10px 20px; font-size: .74rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--st-primary) 35%, transparent);
}
.st-btn--cta:hover { background: var(--st-primary-d); }

/* ═══════════════════════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════════════════════ */
.st-header {
  position: sticky; top: 0; z-index: 300;
  /* Blanco (2026-08-31, pedido del usuario). Venia con el negro hardcodeado de sushi-time,
     el ultimo bloque oscuro fijo del sitio junto con el hero y el footer. El hero que va
     justo debajo SIGUE oscuro a proposito (--st-dark): ese contraste header claro / hero
     oscuro es el mismo patron que usan las apps de delivery.
     Ojo: todo lo que vive DENTRO del header asumia fondo oscuro (logo, nav, iconos, aro del
     badge, hamburguesa) — ver los ajustes marcados mas abajo. */
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--st-line);
  box-shadow: 0 2px 10px rgba(17,17,26,.05);
}
.st-header__inner {
  position: relative;
  max-width: var(--st-maxw); margin: 0 auto;
  height: var(--st-header-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
}
.st-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Logo centrado en el header (2026-08-10, pedido del cliente), escritorio y móvil. Se centra con
   position:absolute respecto a .st-header__inner (no al viewport completo) para que quede
   centrado dentro del mismo ancho máximo (--st-maxw) que usan nav/actions, en vez de relativo a
   toda la pantalla. Selector con combinador directo (>) a propósito: .st-logo también se reutiliza
   dentro del panel del menú móvil (más abajo en este archivo, .st-mobilenav .st-logo) — ese otro
   logo NO debe centrarse de forma absoluta, sigue su propio layout flex normal ahí. */
.st-header__inner > .st-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
/* Selector reforzado a propósito: WooCommerce inyecta ".woocommerce img{height:auto;max-width:100%}"
   con más especificidad que una sola clase, y gana en tienda/producto/carrito/checkout — sin este
   refuerzo el logo se ve a tamaño natural (2048x930) en esas páginas. */
.st-header .st-logo__img, .st-mobilenav .st-logo__img { height: 44px; width: auto; display: block; border-radius: 6px; }
.st-logo__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--st-primary); border-radius: 10px;
  font-size: 1.25rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--st-primary) 35%, transparent);
}
.st-logo__text { line-height: 1; }
.st-logo__text strong {
  display: block;
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  /* Antes #fff, cuando el header era negro. Con el header en blanco (2026-08-31) pasa a
     var(--st-text). Único consumidor hoy: el logo del header — el panel del menú móvil NO
     renderiza logo (su cabecera es un <strong>Accesos</strong>, ver header.php:420), aunque en
     este archivo sigue existiendo un selector .st-mobilenav .st-logo__img de cuando sí lo tenía. */
  color: var(--st-text);
}
.st-logo__text span { display: block; font-size: .58rem; letter-spacing: .22em; color: var(--st-faint); text-transform: uppercase; margin-top: 2px; }

.st-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.st-nav__link {
  padding: 8px 12px; border-radius: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-muted); white-space: nowrap;
  transition: color .15s, background .15s;
}
.st-nav__link:hover { color: var(--st-primary); background: var(--st-raised); }
.st-nav__link--active { color: var(--st-primary); }

.st-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.st-iconbtn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--st-muted); font-size: 1rem;
  cursor: pointer; position: relative;
  transition: .15s;
}
.st-iconbtn:hover { color: var(--st-primary); background: var(--st-raised); border-color: var(--st-line); }
.st-iconbtn--delivery[aria-expanded="true"] { color:var(--st-primary-d); background:color-mix(in srgb, var(--st-primary) 10%, transparent); border-color:color-mix(in srgb, var(--st-primary) 45%, transparent); }
/* Íconos de línea de los botones del header (buscar/sucursal/cuenta/carrito) — reemplazan los
   emojis de antes, mismo estilo "Feather" (stroke, sin relleno) que ya usa el panel React. */
.st-icon { width: 19px; height: 19px; display: block; }
.st-cart-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--st-primary); color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 999px;
  /* El aro recorta el badge contra el fondo del HEADER (no contra el lienzo de la pagina).
     Siguio al header: era #08080A cuando el header era negro, ahora blanco. */
  border: 2px solid #fff;
}
/* "Bump" del ícono del carrito (2026-08-28) — confirmación visual universal al agregar, dispara
   en CUALQUIER camino de agregado (directo o vía popover de opciones), ver stBumpCartIcon() en
   footer.php. Doble animación: el ícono entero se sacude un poco y el badge del contador "salta"
   con un poco más de énfasis, ya que es el número que realmente cambió. */
.st-nav-cart.st-bump { animation: stCartBump .5s cubic-bezier(.34,1.56,.64,1); }
.st-nav-cart.st-bump .st-cart-badge { animation: stCartBadgePop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes stCartBump {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.22) rotate(-8deg); }
  55%  { transform: scale(.96) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Foto que "vuela" hacia el carrito al agregar (2026-09-11, a pedido del cliente) — ver
   stFlyToCart() en footer.php. `position: fixed` con las coordenadas de arranque puestas por JS
   (calzan con la foto real en pantalla, tarjeta o popover); JS agrega `transform`/`opacity`
   después de un frame para que el navegador alcance a pintar el punto de partida antes de animar
   hacia el ícono del carrito. `pointer-events: none` para que nunca interfiera con un clic real
   mientras viaja por encima del resto de la página. */
.st-fly-to-cart {
  position: fixed; z-index: 6000; pointer-events: none;
  border-radius: 14px; object-fit: cover;
  opacity: 1; transform: translate(0, 0) scale(1);
  transition: transform .55s cubic-bezier(.34,.06,.36,1), opacity .55s ease .1s;
  box-shadow: 0 10px 28px rgba(17,17,26,.22);
}
@keyframes stCartBadgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.st-burger {
  display: none; flex-direction: column; gap: 4px;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
}
.st-burger--left { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.st-burger span { display: block; width: 20px; height: 2px; background: var(--st-text); border-radius: 2px; }

/* Aviso superior */
.st-topbar {
  background: var(--st-primary); color: #fff;
  text-align: center; padding: 7px 40px 7px 20px;
  font-size: .74rem; font-weight: 500; position: relative;
}
.st-topbar b { font-weight: 800; }
.st-topbar__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; opacity: .7; cursor: pointer; font-size: .9rem;
}

/* Buscador desplegable: se inserta justo sobre la fila de categorías. */
.st-searchbar { display: none; position: relative; z-index: 251; border-bottom: 1px solid var(--st-line); background: var(--st-surface); box-shadow: 0 10px 22px rgba(17,17,26,.10); }
.st-searchbar.open { display: block; }
.st-searchbar form { max-width: var(--st-maxw); margin: 0 auto; padding: 10px 20px; }
/* El ícono de lupa vive en el botón del header (.st-iconbtn--search) que abre esta barra —
   no hace falta repetirlo adentro del campo, en ningún tamaño de pantalla. */
.st-searchbar__icon { display: none; }
.st-searchbar input {
  width: 100%; padding: 11px 18px;
  background: var(--st-raised); color: var(--st-text);
  border: 1.5px solid var(--st-line); border-radius: 999px;
  font-family: inherit; font-size: .88rem; outline: none;
}
.st-searchbar input:focus { border-color: var(--st-primary); }
.st-searchbar input::placeholder { color: var(--st-faint); }

/* Menú móvil: hoja superior y categorías en cuadrícula */
.st-mobilenav { display: flex; position: fixed; inset: 0; z-index: 500; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
.st-mobilenav.open { opacity: 1; visibility: visible; pointer-events: auto; }
.st-mobilenav__panel {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: 18px;
  padding: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.5); opacity: 0; transform: scale(.98); transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.st-mobilenav.open .st-mobilenav__panel { opacity: 1; transform: none; }
.st-mobilenav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.st-mobilenav__head strong { color: var(--st-text); font-size: 1.05rem; }
.st-mobilenav__head button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--st-line-2); border-radius: 50%; background: transparent; color: var(--st-text); font-size: 1.35rem; cursor: pointer; }
.st-mobilenav__categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.st-mobilenav__categories a { display: flex; min-height: 88px; align-items: center; justify-content: center; gap: 5px; padding: 9px 5px; border: 1px solid var(--st-line); border-radius: 11px; background: var(--st-raised); color: var(--st-text); text-align: center; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.st-mobilenav__categories a:hover { border-color: var(--st-primary); color: var(--st-primary); }
.st-mobilenav__category-icon { font-size: 1.55rem; line-height: 1; }
.st-mobilenav__links { display: flex; flex-direction: column; gap: 8px; margin-top: 0; padding-top: 0; border-top: 0; }
.st-mobilenav__links a { width: 100%; min-height: 62px; padding: 15px 14px; border: 1px solid var(--st-line); border-radius: 9px; background: var(--st-raised); color: var(--st-text); font-size: .8rem; font-weight: 650; display: flex; align-items: center; gap: 10px; text-align: left; }
.st-mobilenav__links a:hover { border-color: var(--st-primary); color: var(--st-primary); }
.st-mobilenav__link-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--st-primary); }
.st-mobilenav__link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-mobilenav__link-text strong { font-weight: 650; }
.st-mobilenav__link-text small { color: var(--st-muted); font-size: .68rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-mobilenav__delivery { border: 1px solid var(--st-line); border-radius: 9px; background: var(--st-raised); overflow: hidden; }
.st-mobilenav__delivery-status { min-height: 62px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.st-mobilenav__delivery-status > div { flex: 1; min-width: 0; }
.st-mobilenav__delivery-status span { display: block; color: var(--st-muted); font-size: .68rem; line-height: 1.2; }
.st-mobilenav__delivery-status strong { display: block; color: var(--st-text); font-size: .82rem; margin-top: 3px; }
.st-mobilenav__delivery-status button { width: auto; min-height: auto; padding: 0; border: 0; background: transparent; color: var(--st-primary); font: inherit; font-size: .72rem; font-weight: 800; text-decoration: underline; cursor: pointer; }
.st-mobilenav__delivery-options { padding: 0 14px 14px; border-top: 1px solid var(--st-line); }
.st-mobilenav__delivery-options button { width: 100%; margin-top: 9px; min-height: 42px; border: 1px solid var(--st-line-2); border-radius: 8px; background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .76rem; font-weight: 750; cursor: pointer; }
.st-mobilenav__delivery-options button[aria-pressed="true"] { border-color: var(--st-primary); color: #fff; background: var(--st-primary); }
.st-mobilenav__delivery-options button:disabled { cursor: not-allowed; opacity: .45; }
.st-mobilenav__delivery-options p { margin: 9px 0 0; color: var(--st-muted); font-size: .7rem; }
.st-mobilenav__profile-address { padding: 12px 14px 14px; border-top: 1px solid var(--st-line); }
.st-mobilenav__profile-address span, .st-mobilenav__profile-address strong { display: block; }
.st-mobilenav__profile-address span { color: var(--st-muted); font-size: .68rem; }
.st-mobilenav__profile-address strong { margin-top: 4px; color: var(--st-text); font-size: .76rem; line-height: 1.35; }
.st-mobilenav__profile-address a { display: inline-flex; width: auto; min-height: auto; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--st-primary); font-size: .72rem; font-weight: 800; text-decoration: underline; }
.st-mobilenav__address-form label { display: block; margin: 7px 0; color: var(--st-muted); font-size: .72rem; font-weight: 700; }
.st-mobilenav__address-form > div { display: flex; gap: 8px; }
.st-mobilenav__address-form input { min-width: 0; flex: 1; border: 1px solid var(--st-line-2); border-radius: 8px; padding: 10px 11px; background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .77rem; }
.st-mobilenav__address-form input:focus { outline: none; border-color: var(--st-primary); }
/* Depto/número + instrucciones de entrega (2026-08-24) — el input de depto va suelto (no dentro
   del div flex de calle+botón), así que hereda el ancho completo del formulario por defecto. */
.st-mobilenav__address-form > input { width: 100%; }
/* Depto/número + referencia — viven dentro de #st-menu-delivery-extra, un nivel más de
   anidamiento que .st-mobilenav__address-form. Dos consecuencias de ese nivel extra, ambas
   causadas por la misma regla genérica de arriba (`.st-mobilenav__address-form > div { display:
   flex }`), que también matchea a ESTE div por ser igualmente hijo directo del form:
   1. Sin flex-direction:column, quedaba en fila horizontal (heredado de esa regla) — label +
      input + label + textarea comprimidos lado a lado en vez de apilados (bug real encontrado
      en la propia verificación: el input de depto medía 23.6px de ancho, aplastado por sus 3
      hermanos flex compitiendo por el mismo espacio).
   2. Como ya no es hijo DIRECTO de .st-mobilenav__address-form, la regla `> input` de arriba
      tampoco le aplica — repetido acá explícito para ese contexto.
   Siempre visible desde 2026-08-28 (antes se plegaba con [hidden] hasta que el motor de
   autocompletado/GPS, ya removido, detectaba una dirección "válida"). */
#st-menu-delivery-extra { flex-direction: column; gap: 6px; margin-top: 4px; }
/* Mismo bug/fix que .st-delivery-widget__row2 (2026-08-28, ver ese comentario) — acá el
   margin:7px 0 de .st-mobilenav__address-form label (heredado, general para TODOS los labels
   del form) se sumaba al gap:6px de este contenedor flex entre cada label/input/textarea,
   doblando el espacio real entre ellos. Se anula el margin SOLO para los labels de acá adentro
   (el label de "Calle y número", fuera de este contenedor, no se toca) — el gap del contenedor
   ya alcanza solo. */
#st-menu-delivery-extra label { margin: 0; }
#st-menu-delivery-extra input { width: 100%; }
.st-mobilenav__address-form textarea { width: 100%; min-height: 46px; resize: none; border: 1px solid var(--st-line-2); border-radius: 8px; padding: 10px 11px; background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .77rem; line-height: 1.4; }
.st-mobilenav__address-form textarea:focus { outline: none; border-color: var(--st-primary); }
.st-mobilenav__address-form button { border: 0; border-radius: 8px; padding: 0 12px; background: var(--st-primary); color: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.st-mobilenav__address-form button:disabled { opacity: .65; cursor: wait; }
.st-mobilenav__address-form p { min-height: 16px; margin: 7px 0 0; color: var(--st-muted); font-size: .7rem; }
.st-mobilenav__address-form p[data-state="success"] { color: #65c985; }
.st-mobilenav__address-form p[data-state="error"] { color: #ff7c7c; }

/* ═══════════════════════════════════════════════════════════
   5. BARRA DE CATEGORÍAS (sticky, horizontal, todas)
   ═══════════════════════════════════════════════════════════ */
.st-catbar {
  position: sticky; top: var(--st-header-h); z-index: 250;
  /* Fondo claro (2026-08-31): la barra había quedado con el negro hardcodeado de
     sushi-time — era el único bloque oscuro en medio del catálogo blanco, y además dejaba
     el texto de las píldoras (--st-muted, oscuro) casi ilegible sobre él. */
  background: var(--st-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--st-line);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.st-catbar__wrap {
  max-width: var(--st-maxw); min-height: var(--st-catbar-h); margin: 0 auto;
  display: flex; align-items: stretch; gap: 8px; padding: 0 10px; position: relative;
}
.st-catbar__menu-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; z-index: 4; }
.st-catbar__menu-button {
  height: 34px; padding: 0 14px; border: 1px solid var(--st-line-2); border-radius: 10px;
  background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .8rem; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.st-catbar__menu-button:hover, .st-catbar__menu-button[aria-expanded="true"] { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
/* Menú de categorías: buscador, filtros y filas compactas. */
.st-catmenu-overlay {
  position: fixed; inset: 0; z-index: 3990;
  background: rgba(4,4,6,.44); backdrop-filter: blur(4px); opacity: 0; pointer-events: none;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1), backdrop-filter .24s cubic-bezier(.2,.8,.2,1);
}
.st-catmenu-overlay.open { opacity: 1; pointer-events: auto; }
.st-catmenu {
  position: fixed; z-index: 4000; left: 50%; top: 50%;
  width: 430px; max-width: calc(100vw - 32px); height: min(610px, calc(100dvh - 24px)); max-height: min(82vh, calc(100vh - 24px));
  display: flex; flex-direction: column;
  padding: 20px 16px 14px; background: #fff; border: 1px solid rgba(18,25,38,.08);
  border-radius: 24px; box-shadow: 0 24px 60px rgba(4,8,16,.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%,-50%) scale(.94); transform-origin: center;
  transition: opacity .22s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
}
.st-catmenu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1); transition-delay: 0s; }
.st-catmenu::before { content: ''; width: 34px; height: 4px; margin: -10px auto 10px; border-radius: 99px; background: #dce0e7; }
.st-catmenu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-catmenu__title { margin: 0; color: #111827; font-size: 1.35rem; line-height: 1.05; font-weight: 850; letter-spacing: -.035em; }
.st-catmenu__intro { margin: 3px 0 0; color: #8a94a5; font-size: .73rem; font-weight: 600; }
.st-catmenu__close { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; padding: 0; border: 0; border-radius: 50%; background: #f1f3f6; color: #70798a; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.st-catmenu__close:hover { background: color-mix(in srgb, var(--st-primary) 12%, #fff); color: var(--st-primary); }
.st-catmenu__search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; margin-bottom: 10px; border-radius: 12px; background: #f4f5f7; color: #758093; }
.st-catmenu__search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.st-catmenu__search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #172033; font: inherit; font-size: .78rem; font-weight: 600; }
.st-catmenu__search input::placeholder { color: #9ba4b3; }
.st-catmenu__filters { display: flex; gap: 7px; margin-bottom: 10px; }
.st-catmenu__filters button { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: #f1f3f6; color: #6c7482; font: inherit; font-size: .65rem; font-weight: 750; cursor: pointer; }
.st-catmenu__filters button.is-active { background: var(--st-primary); color: #fff; box-shadow: 0 5px 12px color-mix(in srgb, var(--st-primary) 20%, transparent); }
.st-catmenu__list { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; scrollbar-width: none; }
.st-catmenu__list::-webkit-scrollbar { display: none; }
.st-catmenu__list.is-filtering > .st-catmenu__item:not([hidden]) { animation: st-catmenu-filter-in .18s ease-out both; }
@keyframes st-catmenu-filter-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.st-catmenu__item { display: flex; align-items: center; gap: 10px; min-height: 59px; padding: 6px 8px; border-radius: 12px; color: #151d2d; text-decoration: none; }
/* Bug real (2026-09-11): el JS de filtrado (functions.php, st_render_catbar) esconde filas con
   el atributo `hidden`, pero `[hidden]{display:none}` es un estilo del navegador (UA), y una
   regla de autor de la MISMA especificidad como `.st-catmenu__item{display:flex}` de arriba
   siempre le gana a un estilo UA, sin importar el orden — por eso "Populares"/"Ofertas" dejaban
   ver categorías que no debían aparecer. */
.st-catmenu__item[hidden] { display: none; }
.st-catmenu__item:hover, .st-catmenu__item:focus-visible { background: #f7f8fa; color: #151d2d; outline: none; }
.st-catmenu__item.is-featured { background: linear-gradient(90deg, color-mix(in srgb, var(--st-primary) 9%, #fff), #fff); }
.st-catmenu__thumb {
  width: 47px; height: 47px; flex: 0 0 47px;
  border-radius: 10px; overflow: hidden; background: var(--st-bg);
}
.st-catmenu__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-catmenu__thumb--empty { background: linear-gradient(135deg, var(--st-raised), var(--st-bg)); }
.st-catmenu__item-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.st-catmenu__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: .78rem; font-weight: 800; }
.st-catmenu__item-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8c95a3; font-size: .61rem; font-weight: 600; }
.st-catmenu__item-description b { color: var(--st-primary); font-weight: 800; }
.st-catmenu__count { display: grid; place-items: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f0f2f5; color: #848d9b; font-size: .65rem; font-weight: 800; }
.st-catmenu__item.is-featured .st-catmenu__count { background: color-mix(in srgb, var(--st-primary) 14%, #fff); color: var(--st-primary); }
.st-catmenu__chevron { color: #8f98a7; font-size: 1.2rem; line-height: 1; }
/* Filas de producto del filtro "Ofertas" (2026-09-11) — el precio ocupa el lugar del badge de
   cantidad. `.price del/ins` es el marcado que WooCommerce ya imprime solo al haber una oferta
   real (product->get_price_html()); acá solo se le da estilo, no se arma el tachado a mano. */
.st-catmenu__price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: .72rem; }
.st-catmenu__price .woocommerce-Price-amount { font-weight: 800; }
.st-catmenu__price del { color: #a7adb8; font-weight: 600; font-size: .68rem; text-decoration: line-through; }
.st-catmenu__price ins { color: var(--st-primary); text-decoration: none; }
.st-catmenu__empty { margin: 12px 8px 6px; color: #8c95a3; font-size: .77rem; font-weight: 600; text-align: center; }
.st-catbar__carousel { position: relative; display: flex; flex: 1 1 auto; min-width: 0; align-items: stretch; }
.st-catbar__track {
  display: flex; gap: 8px;
  height: var(--st-catbar-h); align-items: center;
  width: 100%; padding: 0 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.st-catbar__track::-webkit-scrollbar { display: none; }

/* ── Arrastre genérico (stEnableDragScroll, definida en header.php) ──────────
   Compartido por la barra de categorías y los carruseles de producto
   (relacionados, combos). Sin scroll-snap a propósito: con snap, al soltar
   el arrastre (o al frenar la inercia) el navegador "salta" al ítem más
   cercano — se ve como un tirón brusco. Sin snap, el carrusel queda
   exactamente donde el usuario lo dejó. */
.st-dragscroll {
  cursor: grab;
  touch-action: pan-y; /* el eje horizontal lo maneja el drag por Pointer Events, no el navegador */
  scroll-snap-type: none !important;
}
.st-dragscroll--dragging {
  cursor: grabbing;
  scroll-behavior: auto !important; /* el inertia scroll setea scrollLeft en cada frame; smooth lo pelearía */
}
.st-dragscroll--dragging > * { pointer-events: none; } /* evita hover/clicks fantasma en pleno arrastre */
.st-cat {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  /* Antes: 8px de padding izquierdo (asumía que siempre había un ícono ahí, empujando el
     título). Desde que se sacaron los emojis de respaldo (2026-08-10), la mayoría de las
     categorías no tiene ícono (solo lo tienen si la categoría tiene foto propia) — el título
     quedaba pegado al borde izquierdo de la píldora, mucho más apretado que el lado derecho
     (16px). Se pareja a 16px en ambos lados. */
  padding: 8px 16px;
  /* Cada categoría flota como tarjeta blanca sobre el fondo gris del catálogo. */
  background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 12px;
  font-size: .8rem; font-weight: 600; color: var(--st-muted);
  -webkit-user-drag: none; user-select: none;
  white-space: nowrap; cursor: pointer;
  /* Antes: `transition: .18s` a secas — shorthand sin timing-function explícita cae en el
     default `ease` del navegador, que arranca y frena de forma bastante brusca en un cambio tan
     corto (180ms), y además NO cubre transform (necesario para el "levantamiento" sutil de abajo)
     ni al hijo `.st-cat__icon` (su cambio de fondo en estado activo quedaba sin transición propia,
     saltaba instantáneo). Ahora: propiedades explícitas, una curva de easing más suave
     (cubic-bezier tipo "material", entra rápido y frena de a poco — se siente menos "a los
     tirones" que el `ease` por defecto) y un poco más de duración (220ms) para que el cambio de
     color/fondo/sombra al activarse una categoría se perciba fluido, no como un flash. */
  transition: background .22s cubic-bezier(.4,0,.2,1), color .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1);
}
.st-cat:hover { color: var(--st-text); border-color: var(--st-line-2); transform: translateY(-1px); }
.st-cat:active { transform: translateY(0) scale(.97); }
.st-cat__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--st-surface); border-radius: 999px;
  font-size: .95rem; overflow: hidden;
  transition: background .22s cubic-bezier(.4,0,.2,1);
}
.st-cat__icon img { width: 100%; height: 100%; object-fit: cover; }
.st-cat--active {
  background: var(--st-primary); color: #fff; border-color: var(--st-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--st-primary) 35%, transparent);
}
.st-cat--active .st-cat__icon { background: rgba(0,0,0,.25); }
.st-cat__count { font-size: .7rem; opacity: .6; font-weight: 500; }

.st-catbar__arrow {
  position: relative; flex: 0 0 32px; align-self: center;
  width: 32px; height: 32px; z-index: 2;
  /* Antes: display:none ↔ display:grid en :hover del wrap — un salto instantáneo, sin
     transición posible (display no se anima). Ahora siempre está en el DOM/layout con
     opacity:0 + pointer-events:none, y el hover del wrap sube la opacidad — permite que la
     flecha aparezca con un fundido suave en vez de aparecer/desaparecer de golpe. En móvil (sin
     hover) queda igual de invisible/no-interactiva que antes, solo que vía opacity en vez de
     display. */
  display: grid; place-items: center;
  background: var(--st-raised); color: var(--st-text);
  border: 1px solid var(--st-line-2); border-radius: 999px;
  cursor: pointer; font-size: 1rem;
  opacity: 1; pointer-events: auto;
  transition: opacity .22s cubic-bezier(.4,0,.2,1), background .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1);
}
.st-catbar__arrow:hover { background: var(--st-primary); border-color: var(--st-primary); color: #fff; transform: scale(1.08); }

/* Texto solo para lectores de pantalla — visualmente oculto sin display:none (que también lo
   sacaría del árbol de accesibilidad). Patrón estándar, mismo criterio usado en el resto del
   ecosistema WordPress/WooCommerce. */
.st-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Widget de método de entrega (Retiro/Delivery), arriba de categorías
   (ver st_render_delivery_widget en functions.php). Los dos botones quedan
   siempre visibles (a diferencia del menú ☰, que los colapsa detrás de
   "Cambiar" por el espacio angosto del cajón) para elegir directo, con
   todo el ancho del inicio disponible. */
.st-delivery-widget { max-width: var(--st-maxw); margin: 0 auto; padding: 14px 20px 4px; }
.st-delivery-widget__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-delivery-widget__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; min-height: 54px; padding: 0 14px;
  border: 1.5px solid rgba(17,17,26,.045); border-radius: var(--st-radius);
  background: var(--st-surface); color: var(--st-muted);
  box-shadow: var(--st-elev);
  font: inherit; font-size: .86rem; font-weight: 700;
  white-space: nowrap;
  cursor: pointer; transition: border-color .18s, background .18s, color .18s;
}
.st-delivery-widget__btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.st-delivery-widget__btn:hover { border-color: var(--st-line-2); }
.st-delivery-widget__btn[aria-pressed="true"] { border-color: var(--st-primary); background: var(--st-primary); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--st-primary) 28%, transparent); }
.st-delivery-widget__btn:disabled { opacity: .4; cursor: not-allowed; }
.st-delivery-widget__hint { margin: 8px 2px 0; font-size: .74rem; color: var(--st-faint); }
.st-delivery-widget__address { margin-top: 12px; }
/* Cabecera plegable de "Dirección para delivery" (2026-08-25, a pedido del cliente): siempre
   visible, con un resumen de la dirección ya guardada (si hay una) y el botón que pliega/despliega
   el formulario completo (.st-delivery-widget__body) — independiente del plegado automático de
   depto/referencia, que sigue funcionando adentro sin cambios. */
.st-delivery-widget__address-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-delivery-widget__address-summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-delivery-widget__address-summary > span:first-child { font-size: .74rem; font-weight: 700; color: var(--st-text); }
.st-delivery-widget__address-preview { font-size: .74rem; color: var(--st-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-delivery-widget__toggle {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--st-line); border-radius: 50%;
  background: var(--st-raised); color: var(--st-text); cursor: pointer; transition: border-color .18s;
}
.st-delivery-widget__toggle:hover { border-color: var(--st-line-2); }
.st-delivery-widget__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.st-delivery-widget__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.st-delivery-widget__body { margin-top: 10px; }
.st-delivery-widget__body[hidden] { display: none; }
.st-delivery-widget__address form > div { display: flex; gap: 8px; }
/* Depto/número + referencia: siempre visibles desde 2026-08-28 (antes plegados hasta que el
   motor de autocompletado/GPS, ya removido, detectaba una dirección "válida"). Sigue en columna
   — sin esto heredarían display:flex de la regla genérica de arriba (`form > div`) y Depto +
   Referencia quedarían lado a lado en vez de apilados. */
/* margin-top acá (no en .row2, ver comentario más abajo) — el único gap entre el bloque de
   dirección+Guardar y el primer campo de acá adentro (Depto). */
.st-delivery-widget__extra { flex-direction: column; gap: 8px; margin-top: 8px; }
.st-delivery-widget__address input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px;
  border: 1px solid var(--st-line); border-radius: 10px;
  background: var(--st-raised); color: var(--st-text); font: inherit; font-size: .84rem;
}
/* Bug real encontrado en la propia verificación: `flex:1` (arriba) solo tiene efecto dentro de un
   contenedor flex — el input de depto vive dentro de .st-delivery-widget__row2, que es
   display:block (no flex), así que sin esto caía al ancho intrínseco del navegador (~186px,
   medido) en vez de ocupar todo el ancho — mismo bug que la referencia (textarea) ya evitaba con
   su propio width:100% explícito, que el input nunca tuvo porque originalmente vivía SIEMPRE
   dentro de un contenedor flex (junto al botón "Guardar", antes de que ese botón se moviera). */
.st-delivery-widget__row2 input { width: 100%; }
.st-delivery-widget__address input:focus { outline: none; border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 14%, transparent); }
.st-delivery-widget__address button[type="submit"] {
  flex-shrink: 0; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--st-primary); color: #fff; font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: background .18s;
}
.st-delivery-widget__address button[type="submit"]:hover { background: var(--st-primary-d); }
.st-delivery-widget__address button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
/* Depto/número, ciudad e instrucciones de entrega (2026-08-24, +ciudad 2026-08-28) — filas
   propias debajo de la dirección principal, mismo look que el input de arriba pero a ancho
   completo (sin botón "Guardar" al lado — un solo submit guarda las 4 juntas).
   🔴 Bug real (2026-08-28, encontrado al revisar el espaciado a pedido del usuario): este
   `margin-top: 8px` se sumaba al `gap: 8px` que .st-delivery-widget__extra (el contenedor flex
   de estos 3 campos) YA pone entre ellos — el gap real entre Depto→Ciudad y Ciudad→Referencia
   quedaba en 16px (8+8), el doble del gap de 8px antes de Depto (que no tiene flex-gap por
   delante, solo el margin-top del contenedor). Se saca de acá — el `gap` del contenedor ya
   alcanza solo, mismo valor en escritorio y móvil (este archivo no tiene un breakpoint propio
   para este widget). */
.st-delivery-widget__address textarea {
  width: 100%; min-height: 52px; padding: 10px 12px; resize: none;
  border: 1px solid var(--st-line); border-radius: 10px;
  background: var(--st-raised); color: var(--st-text); font: inherit; font-size: .84rem; line-height: 1.4;
}
.st-delivery-widget__address textarea:focus { outline: none; border-color: var(--st-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 14%, transparent); }
.st-delivery-widget__address input::placeholder,
.st-delivery-widget__address textarea::placeholder { color: var(--st-faint); }
.st-delivery-widget__address p[role="status"] { margin: 7px 2px 0; font-size: .72rem; color: var(--st-faint); min-height: 15px; }
.st-delivery-widget__address p[role="status"][data-state="success"] { color: #4ade80; }
.st-delivery-widget__address p[role="status"][data-state="error"] { color: var(--st-primary); }

/* ── Vitrina visual de categorías: carrusel de tarjetas grandes con foto,
   arriba de la barra de categorías (st-catbar). Usa la misma clase
   .st-dragscroll (arrastre + sin scroll-snap, ver comentario más arriba)
   más stEnableAutoScroll (avance automático infinito, ver header.php).
   El titulo reutiliza la tipografia de .st-section__title (Poppins Bold, mayusculas)
   para que se vea igual que los titulos de seccion del catalogo
   — la vitrina no vive dentro de un .st-section, así que .st-catshow__head
   repite a mano el max-width/padding que .st-section le daría gratis. */
.st-catshow__head { max-width: var(--st-maxw); margin: 0 auto; padding: 18px 20px 0; }
.st-catshow { max-width: var(--st-maxw); margin: 0 auto; padding: 10px 20px 4px; }
.st-catshow__track {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.st-catshow__track::-webkit-scrollbar { display: none; }
.st-catshow__card {
  position: relative; flex: 0 0 auto;
  width: 220px; height: 132px;
  border-radius: var(--st-radius); overflow: hidden;
  background: var(--st-surface); border: 1px solid rgba(17,17,26,.045);
  box-shadow: var(--st-elev);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.st-catshow__card:hover { transform: translateY(-3px); box-shadow: var(--st-elev-lg); }
.st-catshow__card:active { transform: translateY(0) scale(.98); }
.st-catshow__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-catshow__fallback {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--st-surface), var(--st-bg));
}
.st-catshow__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 46%, rgba(0,0,0,0) 68%);
}
.st-catshow__name {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: #fff; font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 1rem; line-height: 1.2; letter-spacing: -.005em;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════════
   6. HERO
   ═══════════════════════════════════════════════════════════ */
.st-hero { position: relative; overflow: hidden; background: var(--st-dark); }
.st-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 72% 45%, rgba(225,27,34,.30) 0%, transparent 68%),
    radial-gradient(ellipse 50% 60% at 8% 90%, rgba(225,27,34,.10) 0%, transparent 65%);
}
.st-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: none;
}
/* Portada FoodTime: una escena completa, igual de intensa y apetecible que
   las imágenes de categorías. La mitad izquierda se conserva limpia para que
   el texto y las acciones no pierdan contraste. */
.st-hero--vivid { background: #a9000e; min-height: clamp(340px, 31vw, 460px); }
.st-hero--vivid::before {
  background:
    linear-gradient(90deg, rgba(48,0,7,.78) 0%, rgba(79,0,9,.57) 34%, rgba(65,0,0,.12) 47%, rgba(65,0,0,0) 60%),
    var(--st-hero-art) center center / cover no-repeat;
}
.st-hero--vivid::after { background-image: linear-gradient(90deg, rgba(0,0,0,.12), transparent 52%); }
.st-hero--vivid .st-hero__inner {
  min-height: inherit;
  grid-template-columns: minmax(0, 420px) 1fr;
  text-align: left;
}
.st-hero--vivid .st-hero__inner > div {
  width: min(100%, 420px);
  margin-left: 0;
  margin-right: auto;
  justify-self: start;
}
.st-hero--vivid .st-hero__kicker { color: #ffe08a; text-shadow: 0 1px 10px rgba(62,0,0,.45); }
.st-hero--vivid .st-hero__title, .st-hero--vivid .st-hero__desc { text-shadow: 0 2px 16px rgba(52,0,0,.44); }
.st-hero--vivid .st-hero__title .st-accent { color: #fff0ad; }
.st-hero--vivid .st-hero__title,
.st-hero--vivid .st-hero__kicker { transform-origin: left center; }
.st-hero--vivid .st-hero__desc { margin-left: 0; margin-right: 0; }
.st-hero--vivid .st-hero__actions { justify-content: flex-start; }
.st-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--st-maxw); margin: 0 auto;
  padding: 72px 20px 68px;
  display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center;
}
.st-hero__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Anton', sans-serif; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--st-secondary); margin-bottom: 18px;
  transform: skewX(-8deg);
}
.st-hero__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: .94; text-transform: uppercase;
  transform: skewX(-8deg); transform-origin: left center;
  margin-bottom: 22px; color: #fff;
}
.st-hero--vivid .st-hero__title { font-size: clamp(2.6rem, 4.7vw, 4rem); }
.st-hero__title .st-accent { color: var(--st-primary); display: block; }
.st-hero__desc {
  /* El hero vive sobre --st-dark, no sobre el lienzo claro: con --st-muted (un gris oscuro,
     calculado para fondo claro) daba 2.24:1 sobre #1A1A1E — medido en el navegador, ilegible. */
  color: rgba(255,255,255,.74); font-size: .92rem; line-height: 1.7;
  max-width: 420px; margin-bottom: 28px;
}
.st-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.st-hero__visual { display: grid; place-items: center; position: relative; }
.st-hero__disc {
  width: min(420px, 74vw); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 42% 38%, rgba(225,27,34,.34) 0%, rgba(225,27,34,.10) 45%, transparent 72%);
  box-shadow: 0 0 90px rgba(225,27,34,.22), 0 0 180px rgba(225,27,34,.09);
}
.st-hero__disc::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(225,27,34,.55), transparent 55%, rgba(245,165,36,.35), transparent);
  animation: st-spin 9s linear infinite;
}
.st-hero__disc::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--st-dark); }
.st-hero__emoji {
  position: relative; z-index: 1; font-size: clamp(5rem, 13vw, 9rem);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)) drop-shadow(0 0 44px rgba(225,27,34,.45));
  animation: st-float 4s ease-in-out infinite;
}
.st-hero__img {
  position: relative; z-index: 1;
  width: min(430px, 74vw); max-height: 390px; object-fit: contain;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(225,27,34,.35));
  animation: st-float 4s ease-in-out infinite;
}
@keyframes st-spin  { to { transform: rotate(360deg); } }
@keyframes st-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
/* Altura reducida ~30% en escritorio a pedido del usuario (2026-08-23) — antes tope 620px
   (clamp(300px, 48vw, 620px)), el banner ocupaba casi toda la pantalla en laptops/monitores.
   El mínimo de 300px queda igual a propósito: no afecta el alto en mobile/tablet angosto,
   donde el clamp ya tocaba ese piso antes de este cambio. */
.st-hero-slider { position: relative; min-height: clamp(300px, 34vw, 440px); overflow: hidden; background: var(--st-dark); }
/* .st-hero-slider__image es ahora el wrapper de cada diapositiva (<a> si tiene link, <div> si
   no — ver front-page.php, 2026-08-20), no el <img> directo como antes: object-fit/object-position
   ya no aplican acá (solo son válidos en elementos reemplazados como <img>), se movieron a la
   regla de abajo. El wrapper solo posiciona/anima la opacidad entre diapositivas. */
.st-hero-slider__image { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .65s ease; display: block; z-index: 0; pointer-events: none; }
/* pointer-events:none + z-index:0 en la diapositiva inactiva es necesario, no cosmético:
   bug real encontrado el 2026-08-24 al verificar el slider con enlaces por diapositiva — sin
   esto, dos diapositivas position:absolute que se solapan completo apilan sus clics por ORDEN
   DE DOM (la que viene después en el HTML queda arriba para hit-testing), sin relación con cuál
   está realmente activa/visible (opacity no saca a un elemento del hit-testing). Con 2+
   diapositivas, si la activa NO es la última en el DOM, un clic en lo que el cliente VE
   (diapositiva activa) podía terminar navegando al link de la OTRA diapositiva, invisible pero
   apilada encima. Confirmado con elementFromPoint() real antes del fix: con la diapositiva 0
   activa (diapositiva 1 más adelante en el DOM), el punto central del hero resolvía al link de
   la diapositiva 1 en vez del de la 0. */
.st-hero-slider__image.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.st-hero-slider__image picture, .st-hero-slider__image img { display: block; width: 100%; height: 100%; }
.st-hero-slider__image img { object-fit: cover; }
.st-hero-slider::after { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg,rgba(0,0,0,.22),transparent 42%,rgba(0,0,0,.18)); }
.st-hero-slider__arrow { position:absolute; z-index:1; top:50%; transform:translateY(-50%); width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(0,0,0,.42); color:#fff; font-size:28px; cursor:pointer; }
.st-hero-slider__arrow:hover { background:var(--st-primary); border-color:var(--st-primary); }.st-hero-slider__arrow--prev{left:20px}.st-hero-slider__arrow--next{right:20px}
.st-hero-slider__dots { position:absolute; z-index:1; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }.st-hero-slider__dots button{width:8px;height:8px;border:0;border-radius:999px;background:rgba(255,255,255,.55);padding:0;cursor:pointer}.st-hero-slider__dots button.is-active{width:24px;background:#fff}

/* ═══════════════════════════════════════════════════════════
   7. SECCIONES
   ═══════════════════════════════════════════════════════════ */
.st-section { max-width: var(--st-maxw); margin: 0 auto; padding: 44px 20px 8px; }
.st-section[hidden], .st-card[hidden] { display: none !important; }

/* Banners horizontales entre categorías (2026-08-25, ver st_render_home_banners() en
   functions.php) — mismo contenedor que .st-section para quedar alineados con el catálogo, y
   mismo mecanismo de imagen mobile/foco horizontal (--st-mobile-pos) que ya usa el hero
   (.st-hero-slider__image img más arriba), para que el recorte en mobile se comporte igual. */
.st-home-banner { max-width: var(--st-maxw); margin: 28px auto 0; padding: 0 20px; }
.st-home-banner__link { display: block; border-radius: var(--st-r); overflow: hidden; }
.st-home-banner__link picture, .st-home-banner__link img { display: block; width: 100%; }
/* --st-banner-h (2026-08-25, selector de altura del panel): techo del clamp, elegido por
   banner (100/150/200/250/300px, ver ALTURAS_PERMITIDAS en class-rest-home-banners.php).
   Piso fijo en 80px — menor que la opción más chica del selector, para que clamp() nunca
   reciba mín > máx. Fallback 150px si algún banner viejo no trae la variable. */
.st-home-banner__link img { height: clamp(80px, 26vw, var(--st-banner-h, 150px)); object-fit: cover; }
.st-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.st-section__title {
  /* Poppins Bold (pedido del cliente, 2026-08-31) en reemplazo de Anton. Se saca el
     skewX(-8deg) que acompanaba a Anton: esa inclinacion es un recurso de tipografia
     display condensada; aplicada sobre Poppins (geometrica, de ancho normal) se ve como
     texto deformado, no como estilo. El color venia en #fff, invisible sobre el fondo
     blanco: solo se leia el <em> (rojo) con el nombre de la categoria. */
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-transform: uppercase; letter-spacing: -.005em;
  color: var(--st-text);
}
.st-section__title em { font-style: normal; color: var(--st-primary); }
.st-section__link {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-muted); white-space: nowrap; transition: color .15s;
  /* .st-section__link ahora también es un <button> (el "Ver todos" que expande tarjetas,
     ver .st-section__more más abajo) — resetea el chrome nativo del botón para que se vea
     igual que el <a> original. */
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.st-section__link:hover { color: var(--st-primary); }
.st-section__count { font-size: .72rem; color: var(--st-faint); font-weight: 500; margin-left: 10px; letter-spacing: 0; text-transform: none; }

/* "Ver todos" en el lugar (2026-08-26): las tarjetas más allá de ST_PRODUCTS_PER_SECTION ya
   están en el HTML pero nacen ocultas; el botón .st-section__more les quita esta clase al
   hacer clic (ver footer.php). Clase propia, no [hidden] — el buscador del header también usa
   [hidden] sobre .st-card (header.php) y lo limpia solo cuando la búsqueda está vacía; mezclar
   ambos mecanismos en el mismo atributo pisaría uno al otro. */
/* !important necesario: .st-card (más abajo) define su propio display:flex con la misma
   especificidad (una clase) y aparece después en el archivo, así que ganaría por orden de
   cascada — mismo motivo por el que .st-card[hidden] (arriba) también lo necesita. */
.st-card--extra { display: none !important; }

/* Aparición al hacer scroll (2026-08-28) — ver window.stEnableScrollReveal (header.php), que
   agrega/saca estas 2 clases según el elemento entra al viewport. Genérica a propósito (no
   acoplada a .st-card) por si se reusa en otra grilla más adelante; hoy el único consumidor es
   .st-card, ver la llamada en footer.php. */
.st-reveal { opacity: 0; translate: 0 18px; scale: .985; will-change: opacity, translate, scale; transition: opacity .42s ease, translate .42s cubic-bezier(.21,.9,.31,1), scale .42s cubic-bezier(.21,.9,.31,1); }
.st-reveal--visible { opacity: 1; translate: 0 0; }
.st-reveal--visible { scale: 1; }

/* ═══════════════════════════════════════════════════════════
   8. TARJETA DE PRODUCTO
   Escritorio: grilla de tarjetas · Móvil: filas tipo delivery
   ═══════════════════════════════════════════════════════════ */
.st-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.st-card {
  display: flex; flex-direction: column;
  /* Toda la tarjeta es clickeable desde hoy (2026-09-14, ver footer.php) — cursor:pointer avisa
     que no hace falta apuntarle justo al botón "+" para agregar/abrir salsas. */
  cursor: pointer;
  background: var(--st-surface);
  /* 16px propio en vez de --st-r (14px): la referencia visual que pasó el usuario tiene la
     esquina más redonda que el resto de los paneles. Se deja local a la tarjeta de producto
     para no mover el radio de todo el sistema. */
  border: 1px solid rgba(17,17,26,.045); border-radius: 16px;
  box-shadow: var(--st-elev);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.st-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--st-elev-lg);
}
.st-card__media {
  display: block; position: relative;
  aspect-ratio: 4 / 3; background: var(--st-raised);
  overflow: hidden; flex-shrink: 0;
}
.st-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.st-card:hover .st-card__media img { transform: scale(1.06); }
.st-card__ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.6rem; opacity: .28; }
.st-card__tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--st-primary); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.st-card__tag--commercial { top: 38px; background: rgba(20,20,24,.9); color: #fff; }
.st-card__body { padding: 13px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 5px; }
.st-card__name {
  font-size: .92rem; font-weight: 800; color: var(--st-text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fila de valoración (2026-08-31, a pedido del usuario con referencia visual). Solo se renderiza
   cuando el producto TIENE reseñas reales (ver front-page.php) — hoy ninguno la tiene, así que la
   fila no aparece en ninguna tarjeta todavía.
   Las estrellas son dos capas superpuestas del mismo texto "★★★★★": la de abajo en gris (el
   riel) y la de arriba en ámbar recortada por `width` en porcentaje. Así un 4.3 se ve como 4.3
   estrellas y no redondeado a 4, sin necesitar medias-estrellas ni SVG. */
.st-card__meta { display: flex; align-items: center; gap: 5px; }
.st-card__stars {
  position: relative; display: inline-block; flex-shrink: 0;
  font-size: .78rem; line-height: 1; letter-spacing: .5px;
  color: var(--st-line-2); /* riel: las 5 estrellas vacías */
  -webkit-user-select: none; user-select: none;
}
.st-card__stars > span {
  position: absolute; inset: 0 auto 0 0;
  overflow: hidden; white-space: nowrap;
  color: var(--st-secondary); /* ámbar de marca */
}
.st-card__rating { font-size: .74rem; font-weight: 700; color: var(--st-muted); }
.st-card__reviews { font-size: .7rem; color: var(--st-faint); }
.st-card__desc {
  /* Sin truncar: son los ingredientes del producto, el cliente los necesita completos
     (alergias, preferencias) antes de comprar — no solo un adelanto de 2 líneas. */
  /* #3F3F46 en vez de --st-muted: la descripcion es texto chico (.75rem) sobre el gris
     de la tarjeta (--st-surface); con --st-muted se leia apagada, casi fundida con el
     fondo. Este tono da ~9:1 de contraste y sigue por debajo del nombre en jerarquia. */
  font-size: .75rem; color: #3F3F46; line-height: 1.45;
}
.st-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  margin-top: auto; padding-top: 10px;
}
/* WooCommerce agrega este enlace después de una compra AJAX; el carrito se abre desde el icono
   propio de la tarjeta, por lo que nunca debe alterar la composición de la tarjeta. */
.st-card__foot a.added_to_cart { display: none !important; }
/* Precio en rojo y grande: es el dato que el cliente compara de tarjeta en tarjeta, así que pasa
   a ser el elemento más pesado del cuerpo (antes era del mismo tono que el nombre y competía con
   él). Mismo tratamiento que ya usaba la tarjeta de la tienda (.st-pc-price). */
.st-card__price { font-size: 1.3rem; font-weight: 900; color: var(--st-primary); letter-spacing: -.02em; line-height: 1.1; }
.st-card__price del { color: var(--st-faint); font-size: .78rem; font-weight: 500; margin-right: 5px; }
.st-card__price ins { text-decoration: none; }
/* Botón compacto "+" en vez de la píldora ancha "AGREGAR" (2026-08-31, referencia visual del
   usuario). El nombre real de la acción vive en aria-label/title (ver front-page.php) — el "+"
   solo es la etiqueta visible. 40x40 para quedar cómodo al dedo en móvil (por encima del mínimo
   de 44px recomendado no llega, pero el área de la tarjeta entera no es clickeable, así que se
   compensa con el radio y el contraste). */
.st-card__add {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  padding: 0; border: none; border-radius: 11px;
  background: var(--st-primary); color: #fff;
  /* font-size:0 oculta el "+" que igual viene en el HTML (queda como respaldo si por lo que sea
     no carga este CSS). El signo visible se dibuja con los dos pseudo-elementos de abajo. */
  font-size: 0; line-height: 1;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--st-primary) 26%, transparent);
  transition: background .18s, transform .18s, box-shadow .18s;
  --plus-largo: 15px;
  --plus-grosor: 3px;
}
/* 🔴 El "+" se veía descentrado (reportado por el usuario con captura, 2026-08-31). No era el
   centrado del flex: medido en el navegador, horizontalmente estaba perfecto (11,69px a cada
   lado) pero el glifo quedaba 1,6px ALTO (4,2px arriba vs 5,8px abajo). Es métrica de la fuente:
   el carácter "+" se apoya en el eje matemático, que está por encima del centro de la caja em, y
   ningún align-items lo corrige porque el flex centra la CAJA de la línea, no la tinta del glifo.
   Solución: dibujar el signo con dos barras. Centradas con `inset:0 + margin:auto` (no con
   translate(-50%,-50%)), que reparte el sobrante de forma exacta y evita que un tamaño impar
   caiga en medio píxel y se vea borroso. De paso queda un "+" más grueso que el de Helvetica,
   más parecido a la referencia. */
.st-card__add::before,
.st-card__add::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 1.5px;
}
.st-card__add::before { width: var(--plus-largo);  height: var(--plus-grosor); }
.st-card__add::after  { width: var(--plus-grosor); height: var(--plus-largo); }
.st-card__add:hover { background: var(--st-primary-d); transform: scale(1.07); box-shadow: 0 6px 16px color-mix(in srgb, var(--st-primary) 34%, transparent); }
.st-card__add:active { transform: scale(.96); }
/* El "+" se esconde con `hidden` en cuanto el producto está en el carrito (ver
   stSyncCardQtyFromDrawer() en footer.php y front-page.php), pero el `display:inline-flex` de
   arriba empata en especificidad con el [hidden] del navegador y le gana: quedaban el "+" y el
   contador "− N +" visibles a la vez (2026-09-28). Mismo arreglo que .st-card__cart-actions. */
.st-card__add[hidden] { display: none; }
/* Feedback al agregar (2026-08-28) — flash breve de confirmación en el propio botón que se
   clickeó, ver flashAdded() en footer.php. Solo aplica al camino de "agregar directo" (productos
   sin salsas/cambios/arma que elegir); cuando se abre el popover de opciones, la confirmación real
   es que el drawer del carrito se abre solo al terminar (ver added_to_cart en footer.php). */
.st-card__add.st-qa-added { background: #16a34a; animation: stQaAddedPop .4s ease; }
/* Stepper "− N +" que reemplaza al "+" cuando el producto ya está en el carrito (2026-09-14, a
   pedido del usuario, CON referencia visual — 4ª tanda: el diseño original de este bloque era una
   barra roja sólida de un solo color; se corrigió a la píldora clara con botones circulares con
   borde rojo que realmente pedía la captura del usuario, la misma que se había aplicado por error
   a la barra inferior de carrito en la 3ª tanda de este mismo día). */
.st-card__cart-actions {
  order: 3; flex: 0 0 100%;
  display: flex; align-items: stretch; gap: 8px;
}
.st-card__cart-actions[hidden] { display: none; }
.st-card__view-cart {
  display: grid; place-items: center; flex: 1 1 0; min-width: 0;
  min-height: 42px; padding: 0; border: 0; border-radius: 12px;
  background: var(--st-primary); color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--st-primary) 26%, transparent);
  transition: background .15s, transform .15s;
}
.st-card__view-cart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-card__view-cart:hover { background: var(--st-primary-d); transform: translateY(-1px); }
.st-card__view-cart:active { transform: scale(.96); }
.st-card__qty {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1.35 1 0;
  min-height: 42px; padding: 4px; border-radius: 12px;
  background: var(--st-raised);
}
.st-card__qty-minus, .st-card__qty-plus {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--st-primary); border-radius: 50%;
  color: var(--st-primary); font-weight: 900; font-size: 1.05rem; line-height: 1;
  cursor: pointer; transition: background .15s, transform .15s;
}
.st-card__qty-minus:hover, .st-card__qty-plus:hover { background: color-mix(in srgb, var(--st-primary) 10%, #fff); }
.st-card__qty-minus:active, .st-card__qty-plus:active { transform: scale(.92); }
.st-card__qty-val { min-width: 18px; text-align: center; font-weight: 900; font-size: .95rem; color: var(--st-text); }
@keyframes stQaAddedPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   9. PROMOCIONES (carrusel horizontal)
   ═══════════════════════════════════════════════════════════ */
.st-promos {
  display: flex; gap: 14px;
  overflow-x: auto; padding: 4px 0 12px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.st-promos::-webkit-scrollbar { display: none; }
.st-promo {
  flex: 0 0 auto; width: 210px;
  background: var(--st-surface); border: 1px solid rgba(17,17,26,.045);
  border-radius: var(--st-r); overflow: hidden;
  box-shadow: var(--st-elev);
  scroll-snap-align: start; position: relative;
  transition: box-shadow .18s, transform .18s;
}
.st-promo:hover { box-shadow: var(--st-elev-lg); transform: translateY(-3px); }
.st-promo__media { aspect-ratio: 1; background: var(--st-raised); position: relative; overflow: hidden; }
.st-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.st-promo__ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; opacity: .3; }
.st-promo__price {
  padding: 12px 14px; text-align: center;
  font-family: 'Anton', sans-serif; font-size: 1.4rem; color: #fff;
  background: var(--st-primary);
}
.st-promo__name {
  padding: 10px 14px 0; text-align: center;
  font-size: .78rem; font-weight: 700; color: var(--st-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}

/* ═══════════════════════════════════════════════════════════
   10. FRANJA DE BENEFICIOS
   ═══════════════════════════════════════════════════════════ */
.st-features { max-width: var(--st-maxw); margin: 36px auto 28px; padding: 0 20px; }
.st-features__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--st-surface); border: 1px solid rgba(17,17,26,.045);
  border-radius: var(--st-r); overflow: hidden;
  box-shadow: var(--st-elev);
}
.st-feature {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid var(--st-line);
}
.st-feature:last-child { border-right: none; }
.st-feature__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--st-raised); border-radius: 10px; font-size: 1.05rem;
}
.st-feature strong { display: block; font-size: .78rem; font-weight: 700; color: var(--st-text); text-transform: uppercase; letter-spacing: .04em; }
.st-feature span { display: block; font-size: .72rem; color: var(--st-muted); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   11. SUCURSALES
   ═══════════════════════════════════════════════════════════ */
.st-sucs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.st-suc {
  display: flex; gap: 14px; padding: 18px;
  background: var(--st-surface); border: 1px solid rgba(17,17,26,.045);
  border-radius: var(--st-r);
  box-shadow: var(--st-elev);
  transition: box-shadow .18s, transform .18s;
}
.st-suc:hover { box-shadow: var(--st-elev-lg); transform: translateY(-2px); }
.st-suc__pin {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--st-primary) 14%, transparent); border-radius: 10px;
  color: var(--st-primary); font-size: 1.1rem;
}
.st-suc__info h4 { font-size: .92rem; font-weight: 700; color: var(--st-text); margin-bottom: 5px; }
.st-suc__info p { font-size: .76rem; color: var(--st-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════════════════ */
.st-footer { position:relative; overflow:hidden; background:linear-gradient(180deg,#17171c 0%,#0d0d10 48%,#09090b 100%); border-top:1px solid rgba(255,255,255,.09); margin-top:64px; }
.st-footer::before { content:''; position:absolute; top:-180px; left:50%; width:min(900px,100vw); height:300px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse,rgba(225,27,34,.12),transparent 67%); }
.st-footer__main {
  position:relative; max-width:var(--st-maxw); margin:0 auto;
  padding:54px 20px 42px;
  display: grid; grid-template-columns: minmax(230px,1.55fr) 1fr 1fr 1.15fr; gap: clamp(24px,4vw,52px);
}
.st-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.st-footer__logo img { display: block; width: auto; max-width: min(220px, 100%); max-height: 58px; object-fit: contain; border-radius: 6px; }
.st-footer__desc { font-size: .8rem; color: var(--st-muted); line-height: 1.7; margin: 14px 0 18px; }
.st-footer__socials { display:flex; gap:9px; }
.st-footer__socials a {
  width:36px; height:36px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius:11px; color:rgba(255,255,255,.74); transition:.18s ease;
}
.st-footer__socials a:hover { background:var(--st-primary); border-color:var(--st-primary); color:#fff; transform:translateY(-2px); }
.st-footer__icon { width:16px; height:16px; flex:none; }
.st-footer__col h5 {
  font-size: .72rem; font-weight: 800; color: #fff;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px;
}
.st-footer__col li { margin-bottom: 9px; }
.st-footer__col a { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--st-muted); transition:.15s; }
.st-footer__col a .st-footer__icon { color:var(--st-faint); }
.st-footer__col a:hover { color: #fff; }
.st-footer__col a:hover .st-footer__icon { color:var(--st-primary); }
.st-footer__hours { margin-top:20px; padding:14px; border:1px solid var(--st-line); border-radius:12px; background:rgba(255,255,255,.025); }
.st-footer__hours p { display:flex; align-items:center; gap:8px; margin:0 0 5px; color:#fff; font-size:.78rem; font-weight:750; }
.st-footer__hours p .st-footer__icon { color:var(--st-primary); }
.st-footer__hours strong { color:var(--st-secondary); font-size:.92rem; }
.st-footer__bottom { border-top: 1px solid var(--st-line); }
.st-footer__bottom-inner {
  max-width: var(--st-maxw); margin: 0 auto;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .72rem; color: var(--st-faint);
}
.st-footer__legal { display: flex; gap: 16px; }
.st-footer__legal a, .st-trustbar a { color: inherit; }
.st-footer__legal a:hover, .st-trustbar a:hover { color: #fff; }
.st-trustbar {
  position:relative; border-top:1px solid var(--st-line);
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--st-maxw); margin: 0 auto;
}
.st-trustbar div {
  padding:15px 20px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  font-size:.72rem; color:var(--st-muted); border-right:1px solid var(--st-line);
}
.st-trustbar .st-footer__icon { color:var(--st-primary); }
.st-trustbar div:last-child { border-right: none; }

/* ═══════════════════════════════════════════════════════════
   13. CARRITO (drawer) + MODAL SUCURSAL
   ═══════════════════════════════════════════════════════════ */
.st-drawer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.65); opacity: 0; pointer-events: none; transition: opacity .3s; }
.st-drawer-overlay.open { opacity: 1; pointer-events: all; }
.st-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
  width: 400px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--st-surface); border-left: 1px solid var(--st-line);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.st-drawer.open { transform: none; }
.st-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; flex-shrink: 0;
  background: var(--st-bg); border-bottom: 1px solid var(--st-line); color: var(--st-text);
}
.st-drawer-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: .95rem; }
/* color:#fff explicito (no heredado): este contador no tenia color propio y tomaba el de
   .st-drawer-header, que era #fff cuando el drawer era oscuro. Al pasar la cabecera a
   var(--st-text) quedo el numero casi negro sobre el circulo rojo.
   justify-content ademas de place-items: el JS del footer setea `display:flex` inline en este
   span al actualizar el contador, y en flex `place-items` solo aplica align-items
   (justify-items no existe en flexbox) — el numero quedaba pegado al borde izquierdo del
   circulo. Con las dos propiedades queda centrado sea grid o flex. */
.st-drawer-count { display: grid; place-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 999px; background: var(--st-primary); color: #fff; font-size: .68rem; font-weight: 800; }
.st-drawer-close { width: 32px; height: 32px; display: grid; place-items: center; background: var(--st-raised); border: 1px solid var(--st-line); border-radius: 8px; color: var(--st-text); cursor: pointer; }
.st-drawer-close:hover { background: var(--st-primary); border-color: var(--st-primary); }
.st-drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.st-drawer-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--st-faint); }
.st-drawer-empty .icon { font-size: 3.4rem; opacity: .35; }
.st-drawer-empty a { padding: 10px 22px; border-radius: var(--st-r-btn); background: var(--st-primary); color: #fff; font-weight: 700; font-size: .82rem; }
.st-drawer-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--st-line); }
.st-drawer-item:last-child { border-bottom: none; }
.st-drawer-item-img, .st-drawer-item-ph { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--st-raised); object-fit: cover; }
.st-drawer-item-ph { display: grid; place-items: center; font-size: 1.7rem; opacity: .4; }
.st-drawer-item-info { flex: 1; min-width: 0; }
.st-drawer-item-name { font-size: .84rem; font-weight: 700; color: var(--st-text); margin-bottom: 3px; }
.st-drawer-item-extras { font-size: .7rem; color: var(--st-secondary); margin-bottom: 6px; }
.st-drawer-item-qty { display: flex; align-items: center; width: fit-content; border: 1px solid var(--st-line); border-radius: 999px; overflow: hidden; }
.st-drawer-item-qty button { width: 27px; height: 27px; display: grid; place-items: center; background: none; border: none; color: var(--st-text); font-weight: 800; cursor: pointer; }
.st-drawer-item-qty button:hover { background: var(--st-hover); }
.st-drawer-item-qty span { min-width: 26px; text-align: center; font-size: .8rem; font-weight: 700; }
.st-drawer-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.st-drawer-item-price { font-size: .9rem; font-weight: 800; color: var(--st-text); }
.st-drawer-item-remove { background: none; border: none; color: var(--st-faint); font-size: 1.05rem; cursor: pointer; }
.st-drawer-item-remove:hover { color: var(--st-primary); }
.st-drawer-footer { padding: 16px 20px; flex-shrink: 0; background: var(--st-bg); border-top: 1px solid var(--st-line); }
.st-drawer-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--st-muted); margin-bottom: 5px; }
.st-drawer-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 800; color: var(--st-text); margin: 12px 0 14px; }
.st-drawer-total span:last-child { color: var(--st-primary); }
.st-drawer-cta {
  display: block; width: 100%; padding: 14px; margin-bottom: 8px;
  background: var(--st-primary); color: #fff; border: none; border-radius: var(--st-r-btn);
  font-family: inherit; font-weight: 800; font-size: .95rem; text-align: center; cursor: pointer;
}
.st-drawer-cta:hover { background: var(--st-primary-d); color: #fff; }
.st-drawer-cta-sec { display: block; text-align: center; font-size: .78rem; color: var(--st-faint); font-weight: 600; }
.st-drawer-cta-sec:hover { color: var(--st-primary); }

/* ═══════════════════════════════════════════════════════════
   13.5 BARRA INFERIOR DE CARRITO
   Franja fija con cantidad + total del pedido; tocarla abre el mismo drawer de siempre. En
   escritorio conserva un ancho compacto y se ubica a la derecha para no invadir la pantalla.
   🔴 2026-09-14, 4ª tanda: esta sección había sido reemplazada por error en la 3ª tanda del mismo
   día (rediseño de píldora + stepper + "Ver carrito" que en realidad correspondía al contador DE
   LA TARJETA, ver `.st-card__qty` más abajo) — revertida a su diseño original acá.
   ═══════════════════════════════════════════════════════════ */
.st-mobile-cartbar { display: none; }
.st-mobile-cartbar.is-visible {
  display: flex; align-items: center; gap: 10px;
  position: fixed;
  z-index: 900;
  padding: 13px 18px;
  border: none; border-radius: 16px;
  background: var(--st-primary);
  color: #fff;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
}
.st-mobile-cartbar:active { filter: brightness(.94); }
.st-mobile-cartbar__count {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff;
  font-size: .78rem; font-weight: 800;
}
.st-mobile-cartbar__label { flex: 1 1 auto; font-size: .88rem; font-weight: 700; }
.st-mobile-cartbar__total { flex: 0 0 auto; font-size: .95rem; font-weight: 800; }
@media (max-width: 599px) {
  .st-mobile-cartbar.is-visible {
    left: 14px; right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 600px) {
  .st-mobile-cartbar.is-visible {
    right: 28px; bottom: 28px;
    width: min(360px, calc(100vw - 56px));
    padding: 14px 18px;
  }
  .st-mobile-cartbar:hover { filter: brightness(.96); transform: translateY(-1px); }
}

/* ═══════════════════════════════════════════════════════════
   13.1 AGREGADO RÁPIDO — popover del botón "Agregar" (catálogo del inicio)
   Instancia única y global (footer.php), rellenada por JS por producto.
   Escritorio (≥600px): popover anclado, "surge" desde el botón que lo abrió.
   Móvil (<600px): cae a hoja inferior (mismo patrón que el resto del sitio).
   ═══════════════════════════════════════════════════════════ */
.st-qa-overlay {
  position: fixed; inset: 0; z-index: 3990;
  background: rgba(4,4,6,.58); backdrop-filter: blur(4px); opacity: 0; pointer-events: none;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1), backdrop-filter .24s cubic-bezier(.2,.8,.2,1);
}
.st-qa-overlay.open { opacity: 1; pointer-events: auto; }

.st-qa-pop {
  position: fixed; z-index: 4000; left: 50%; top: 50%;
  width: 540px; max-width: calc(100vw - 32px);
  max-height: 80vh; overflow-y: auto;
  background: var(--st-surface); border: 1px solid var(--st-line);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding: 18px 18px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%,-50%) scale(.94);
  transform-origin: center;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1), visibility .24s;
}
/* 🔴 Bug real (reportado por el usuario, 2026-08-27, "en desktop la sección del scroll es muy
   pequeña"): la regla base de arriba fija max-height:80vh, y max-height siempre le gana a height
   en CSS — así que en CUALQUIER ventana de escritorio (no solo una angosta), el popover abierto
   quedaba atrapado en 80vh en vez de llegar al alto real de diseño (min(720px, 100vh-24px)).
   Ej.: ventana de 650px de alto → quedaba en 520px (80vh) en vez de 626px. Esa diferencia se la
   comía entera el área de opciones (el único elemento con flex:1 1 auto), porque el resto del
   popover (foto/nombre/descripción, título, footer) tiene tamaño fijo y no se achica como sí pasa
   en el breakpoint móvil de abajo. Con max-height igualada al mismo tope, height:min(720px,...)
   puede llegar a su alto real y el área de scroll deja de estar innecesariamente apretada. */
.st-qa-pop.open {
  height: min(720px, calc(100vh - 24px)); max-height: calc(100vh - 24px); overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1);
}
.st-qa-pop.open .st-qa-sauce-row { animation: st-qa-sauce-in .22s ease both; }
.st-qa-pop.open .st-qa-sauce-row:nth-child(2) { animation-delay: .03s; }
.st-qa-pop.open .st-qa-sauce-row:nth-child(3) { animation-delay: .06s; }
.st-qa-pop.open .st-qa-sauce-row:nth-child(4) { animation-delay: .09s; }
@keyframes st-qa-sauce-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.st-qa-pop:has(.st-qa-sauces:not(.st-qa-sauces--empty)) {
  height: min(720px, calc(100vh - 24px)); max-height: calc(100vh - 24px); overflow: hidden;
  display: flex; flex-direction: column;
}
.st-qa-pop:has(.st-qa-changes:not(.st-qa-sauces--empty)) {
  height: min(720px, calc(100vh - 24px)); max-height: calc(100vh - 24px); overflow: hidden;
  display: flex; flex-direction: column;
}
.st-qa-pop:has(.st-qa-arma:not(.st-qa-sauces--empty)) {
  height: min(720px, calc(100vh - 24px)); max-height: calc(100vh - 24px); overflow: hidden;
  display: flex; flex-direction: column;
}
.st-qa-handle { display: none; }
.st-qa-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--st-faint);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.st-qa-close:hover { color: var(--st-primary); }
.st-qa-head { display: flex; align-items: flex-start; gap: 16px; padding-right: 30px; }
.st-qa-header-photo { flex: 0 0 114px; width: 114px; height: 110px; padding: 0; overflow: hidden; border: 1px solid var(--st-line-2); border-radius: 9px; background: var(--st-raised); cursor: zoom-in; }
.st-qa-header-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-qa-header-photo:hover { border-color: var(--st-primary); }
.st-qa-product-copy { min-width: 0; flex: 1; padding-top: 5px; }
.st-qa-name { font-size: 1.38rem; font-weight: 850; color: var(--st-text); line-height: 1.15; }
.st-qa-price { font-size: 1.15rem; color: var(--st-primary); font-weight: 850; margin-top: 4px; }
.st-qa-desc { font-size: .74rem; color: #3F3F46; line-height: 1.45; margin-top: 8px; }
.st-qa-detail-link { display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 700; color: var(--st-primary); text-decoration: none; }
.st-qa-detail-link:hover { color: var(--st-primary-d); text-decoration: underline; }

.st-qa-sauces { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--st-line); }
.st-qa-pop.open .st-qa-sauces { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.st-qa-content { min-height: 0; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.st-qa-scroll { min-height: 0; min-width: 0; max-width: 100%; }
.st-qa-pop.open .st-qa-scroll { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.st-qa-scroll > * { min-width: 0; }
.st-qa-scroll .st-qa-name,
.st-qa-scroll .st-qa-desc { overflow-wrap: anywhere; }
.st-qa-sauces--empty { display: none; }
/* 3 vistas del agregado rápido (salsas/cambios/arma) — "Arma tu Roll" es la vista PRIMARIA
   cuando el producto la tiene (ver footer.php, maybeFinishLoading), las otras dos quedan como
   secundarias con su propio botón "← Volver" hacia ella. */
.st-qa-pop--sauces-view .st-qa-changes,
.st-qa-pop--sauces-view .st-qa-arma,
.st-qa-pop--changes-view #stQaSauces,
.st-qa-pop--changes-view .st-qa-arma,
.st-qa-pop--arma-view #stQaSauces,
.st-qa-pop--arma-view .st-qa-changes { display: none !important; }
.st-qa-sauces-title { display: flex; align-items: center; gap: 9px; color: var(--st-text); font-size: 1.05rem; font-weight: 800; }
.st-qa-sauces-title span { color: var(--st-primary); font-size: 1.15rem; }
.st-qa-sauces-hint { font-size: .78rem; color: var(--st-faint); margin: 4px 0 12px; }
/* Antes vivía dentro de #stQaSauces (solo esa vista lo necesitaba); ahora es compartido por las 3
   vistas (ver footer.php) — se le da su propio margen porque ya no hereda el padding-top de
   .st-qa-sauces al quedar fuera de ese contenedor. */
/* 🔴 Bug real (reportado por el usuario con captura, 2026-08-27): dentro de .st-qa-pop.open
   (flex-direction: column), este picker es un hijo flex sin flex-shrink propio — hereda el
   default (1), así que cuando el popover queda corto de espacio vertical el algoritmo de flexbox
   lo comprime por debajo del alto real de sus propios botones. Como overflow-x: auto fuerza
   overflow-y: auto también (regla del spec: no se puede dejar un eje en "visible" si el otro no
   lo es), esa compresión no se ve como desborde — recorta en silencio la parte de abajo de los
   botones "Unidad N", por eso el texto se veía mal centrado y sin margen debajo. flex-shrink: 0
   lo fija a su alto natural sin importar cuánto espacio le quede al resto del popover. */
.st-qa-unit-picker { display: flex; flex-shrink: 0; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 1px 0 8px; margin-top: 12px; margin-bottom: 4px; scrollbar-width: thin; }
/* [hidden] no alcanzaba solo (2026-09-15, encontrado al investigar el hueco extra bajo "Agregar
   al carrito" en escritorio): mismo empate de especificidad ya documentado con .st-catmenu__item
   — un selector de clase de autor con `display` puesto le gana al `[hidden]{display:none}` del
   navegador aunque el atributo esté puesto, así que con qty<=1 (el estado inicial de cualquier
   producto) este bloque seguía ocupando su padding/margin vacíos como una fila fantasma. */
.st-qa-unit-picker[hidden] { display: none; }
.st-qa-unit-tab { flex: 0 0 auto; border: 1px solid var(--st-line-2); border-radius: 5px; padding: 5px 10px; background: var(--st-raised); color: var(--st-muted); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.st-qa-unit-tab.active { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.st-qa-sauces-list { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; padding-right: 2px; scrollbar-gutter: stable; }
.st-qa-pop.open .st-qa-sauces-list { flex: 0 0 auto; min-height: auto; max-height: none; overflow: visible; }
.st-qa-skeleton-row { min-height: 54px; border: 1px solid var(--st-line-2); border-radius: 11px; background: linear-gradient(100deg, rgba(17,17,26,.035) 22%, rgba(17,17,26,.085) 38%, rgba(17,17,26,.035) 54%); background-size: 220% 100%; animation: st-qa-skeleton-shine 1.15s ease-in-out infinite; }
@keyframes st-qa-skeleton-shine { to { background-position: -220% 0; } }
.st-qa-sauce-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; min-height: 54px; border: 1px solid var(--st-line-2);
  border-radius: 11px;
  /* `--st-surface` (blanco en modo claro) en vez de `--st-raised` (gris de relleno, 2026-09-14, a
     pedido del usuario: "quiero que las salsas se vean con fondo blanco, quita ese gris del modo
     claro") — el borde + la sombra que ya trae el popover bastan para separar cada fila sin
     necesitar un tinte de fondo distinto. En tema oscuro el cambio es imperceptible (`--st-surface`
     y `--st-raised` son dos grises casi negros muy próximos ahí), así que no hizo falta un
     override aparte para ese tema. */
  background: var(--st-surface); transition: border-color .12s, background .12s;
}
.st-qa-change-row { width: 100%; cursor: pointer; text-align: left; font: inherit; }
.st-qa-change-row.active { border-color: var(--st-primary); background: rgba(237, 28, 36, .11); }
.st-qa-change-row:disabled { cursor: not-allowed; opacity: .42; }
.st-qa-sauce-row:hover { background: var(--st-hover); border-color: var(--st-line-2); }
.st-qa-sauce-name { flex: 1; font-size: .94rem; font-weight: 750; color: var(--st-text); }
.st-qa-sauce-lock { margin-left: 4px; font-size: .68rem; opacity: .75; } /* salsa "siempre_paga" — nunca cuenta para el cupo gratis */
.st-qa-sauce-price {
  font-size: .74rem; font-weight: 800;
  color: var(--st-primary-d);
  background: color-mix(in srgb, var(--st-primary) 15%, #fff);
  padding: 5px 8px; border-radius: 7px;
}
.st-qa-sauce-qty { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; }
.st-qa-sauce-qty button { width: 34px; height: 34px; border: 1px solid var(--st-line-2); border-radius: 50%; background: transparent; color: var(--st-text); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.st-qa-sauce-qty button:last-child { border-color: var(--st-primary); color: var(--st-primary); }
.st-qa-sauce-qty button:hover:not(:disabled) { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.st-qa-sauce-qty button:disabled { opacity: .35; cursor: not-allowed; }
.st-qa-sauce-qty strong { min-width: 16px; text-align: center; color: var(--st-text); font-size: 1rem; }
.st-qa-switch-view, .st-qa-back-view { font: inherit; font-weight: 750; cursor: pointer; }
/* 🔴 Ajuste visual (reportado por el usuario, 2026-08-27): en la vista "Arma tu Roll" este botón
   ("🧂 Elegir salsas") queda pegado justo debajo del área de scroll de opciones — con el estilo
   grande/rojo de antes (padding 10px, borde y fondo del color primario) tapaba buena parte del
   espacio recién recuperado en el fix anterior de max-height. Ahora es más chico y sutil (fondo/
   borde neutros, texto tenue) en reposo, y solo se pone más visible al pasar el mouse — sigue
   siendo un botón secundario ("ver más opciones"), no la acción principal del popover. */
.st-qa-switch-view { width: 100%; flex-shrink: 0; margin-top: 8px; padding: 7px 12px; border: 1px solid var(--st-line-2); border-radius: 5px; background: var(--st-raised); color: var(--st-muted); font-size: .78rem; }
.st-qa-switch-view:hover { background: var(--st-hover); border-color: var(--st-line-2); color: var(--st-text); }
/* Excepción sobre el estilo neutro de arriba, solo para "🧂 Elegir salsas" (2026-08-27, a pedido
   del usuario): esa opción es fácil de pasar por alto entre las opciones de "Arma tu Roll", así
   que se destaca en rojo con un destello sutil y periódico (no un parpadeo agresivo/continuo) que
   llama la atención sin molestar — se pausa solo al pasar el mouse. */
.st-qa-switch-view--highlight { border-color: var(--st-primary); background: var(--st-primary); color: #fff; animation: stQaHighlightPulse 2.6s ease-in-out infinite; }
.st-qa-switch-view--highlight:hover { background: var(--st-primary); border-color: var(--st-primary); color: #fff; animation-play-state: paused; }
@keyframes stQaHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-primary) 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-primary) 0%, transparent); }
}
.st-qa-back-view { margin-left: auto; padding: 4px 0; border: 0; background: transparent; color: var(--st-primary); font-size: .74rem; }
.st-qa-back-view:hover { color: var(--st-primary-d); }

/* "Arma tu Roll" dentro del agregado rápido — grupos con cupo exacto (proteína/agregado/
   envoltura), mismo criterio visual que .st-qa-sauce-row pero en pills agrupadas por label.
   🔴 Bug real (revisión 2026-08-27): sin scroll propio (a diferencia de .st-qa-sauces-list), un
   producto con varios grupos/opciones (ej. 6 proteínas + 4 agregados + 3 envolturas) se salía del
   alto fijo del popover y quedaba cortado, sin forma de ver ni elegir las opciones de más abajo.
   🔴 Corrección visual (revisión 2026-08-27, reportada por el usuario con captura real): el
   badge "elige N" quedaba pegado al borde de scroll (padding-right muy angosto) y las pills en
   flex-wrap armaban filas de largo desparejo según el texto (3 en "Proteína", 6 apretadas en
   "Agregado") — se ve desordenado. Grid de columnas fijas: filas parejas sin importar el largo
   del texto de cada opción, y más aire respecto al scrollbar. */
.st-qa-arma-groups { display: flex; flex-direction: column; gap: 16px; padding-right: 10px; margin-right: -4px; }
.st-qa-pop.open .st-qa-arma-groups { flex: 0 0 auto; min-height: auto; }
.st-qa-arma-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; font-weight: 800; color: var(--st-text); margin-bottom: 10px; }
.st-qa-arma-group-count { flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: var(--st-faint); background: var(--st-raised); border: 1px solid var(--st-line-2); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.st-qa-arma-group-count.complete { color: #fff; background: var(--st-primary); border-color: var(--st-primary); }
.st-qa-arma-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.st-qa-arma-pill { font: inherit; font-size: .78rem; font-weight: 700; color: var(--st-text); padding: 9px 10px; border: 1px solid var(--st-line-2); border-radius: 10px; background: var(--st-raised); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.st-qa-arma-pill:hover:not(:disabled) { border-color: var(--st-line-2); background: var(--st-hover); }
.st-qa-arma-pill.selected { border-color: var(--st-primary); background: rgba(237,28,36,.16); }
.st-qa-arma-pill:disabled { opacity: .4; cursor: not-allowed; }
.st-qa-arma-extra { display: block; margin-top: 2px; color: #ff605e; font-weight: 800; }
.st-qa-arma-warning { color: #ff605e; font-size: .76rem; font-weight: 700; margin-top: 14px; }

.st-qa-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--st-line); flex-shrink: 0; }
.st-qa-row { display: contents; }
.st-qa-qty { display: flex; align-items: center; border: 1px solid var(--st-line-2); border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.st-qa-qty button {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: none; color: var(--st-text); font-weight: 800; font-size: 1rem;
  cursor: pointer; transition: background .15s;
}
.st-qa-qty button:hover { background: var(--st-hover); }
.st-qa-qty button:disabled { opacity: .35; cursor: default; }
.st-qa-qty button:disabled:hover { background: none; }
.st-qa-qty span { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 700; color: var(--st-text); }
.st-qa-subtotal { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; font-size: .78rem; color: var(--st-faint); text-align: left; white-space: normal; }
.st-qa-subtotal strong { color: var(--st-text); font-size: 1.3rem; line-height: 1; letter-spacing: -.02em; }

.st-qa-qty { grid-column: 2; grid-row: 1; justify-self: end; }
.st-qa-actions { grid-column: 3; grid-row: 1; }
.st-qa-add {
  border: none; border-radius: var(--st-r-btn); padding: 13px 19px;
  background: var(--st-primary); color: #fff;
  font-family: inherit; font-size: .84rem; font-weight: 800; white-space: nowrap;
  cursor: pointer; transition: background .15s;
}
.st-qa-add:hover { background: var(--st-primary-d); }
.st-qa-add:disabled { opacity: .6; cursor: default; }

.st-qa-photo-modal { position: fixed; inset: 0; z-index: 4010; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.78); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; }
.st-qa-photo-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.st-qa-photo-modal img { display: block; max-width: min(900px,100%); max-height: calc(100vh - 48px); object-fit: contain; border-radius: 16px; box-shadow: 0 26px 80px rgba(0,0,0,.6); }
.st-qa-photo-close { position: fixed; top: 20px; right: 24px; z-index: 1; border: 0; border-radius: 50%; width: 38px; height: 38px; background: rgba(0,0,0,.62); color: #fff; font-size: 1.5rem; cursor: pointer; }

/* Escritorio ancho: foto grande a la izquierda, ocupando toda la altura del contenido (nombre/
   precio/descripción + opciones), con el pie (subtotal/cantidad/agregar) abajo a todo el ancho —
   pedido explícito del usuario con una referencia visual (2026-09-15). Gateado a partir de 760px
   para no apretar el layout en ventanas de escritorio angostas: entre 600-759px sigue el layout
   de una sola columna de siempre (foto chica junto al nombre), y el bottom-sheet de móvil
   (≤599px, más abajo) no se toca en absoluto.
   `.st-qa-head { display:contents }` disuelve ese contenedor para que la foto y el bloque de
   copy (nombre/precio/descripción), que hoy son hijos suyos en fila, pasen a ser ítems directos
   del grid de `.st-qa-pop` y puedan ubicarse en columnas/áreas separadas. `.st-qa-sauces` ya es
   la clase que comparten las 3 vistas (salsas/cambios/arma armar-tu-roll, ver footer.php), así
   que un solo selector alcanza para las tres sin repetir la regla. */
@media (min-width: 760px) {
  /* padding-bottom reducido (2026-09-15, a pedido del usuario con captura: "quita un poco de
     margen abajo... entre el borde y el boton de agregar al carrito") — solo el bottom, arriba/
     lados quedan igual que antes. */
  .st-qa-pop { width: 780px; padding: 18px 18px 8px; }
  .st-qa-pop.open,
  .st-qa-pop:has(.st-qa-sauces:not(.st-qa-sauces--empty)),
  .st-qa-pop:has(.st-qa-changes:not(.st-qa-sauces--empty)),
  .st-qa-pop:has(.st-qa-arma:not(.st-qa-sauces--empty)) {
    /* Altura FIJA de 500px, no `auto` (2026-09-15, a pedido del usuario: "por que no mejor haces
       que sea la misma ventana para ambos?", tras ver que con `height:auto` cada producto abría
       un modal de tamaño distinto — chico con pocas opciones, alto con muchas — y encima, con la
       foto en cuadrado fijo (ver más abajo), una descripción/lista más corta que el cuadrado
       dejaba un hueco vacío feo debajo de la foto. Con una altura ÚNICA para todos los productos,
       la foto (`height:100%`, ver `.st-qa-header-photo`) siempre rellena exactamente ese mismo
       alto — mismo "tamaño de ventana" siempre, sin huecos — y la lista de opciones, si no entra,
       sigue scrolleando adentro con el mismo mecanismo de siempre
       (`.st-qa-sauces-list{flex:1 1 auto;min-height:0}`, sin tocar). 500px elegido para que el
       cuadro de la foto (330px de ancho) quede razonablemente cuadrado una vez restado el pie. */
    height: min(500px, calc(100vh - 24px));
    max-height: min(500px, calc(100vh - 24px));
    display: grid;
    /* Columna de foto ensanchada (2026-09-15, a pedido del usuario) — 330px en vez de 260px. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "content" "footer";
  }
  .st-qa-content { grid-area: content; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 22px; overflow: hidden; }
  .st-qa-pop.open .st-qa-scroll { display: block; height: 100%; overflow-x: hidden; overflow-y: auto; }
  .st-qa-head { display: contents; }
  /* height:100% (vuelve a rellenar toda la columna) ahora que el modal tiene altura FIJA de
     500px para todos los productos (ver arriba) — ya no hace falta el aspect-ratio:1 fijo de la
     iteración anterior (eso dejaba hueco vacío bajo la foto cuando la columna derecha era más
     baja que el cuadrado); con una altura única, "rellenar todo" y "quedar cuadrada" son lo mismo
     para cualquier producto. */
  .st-qa-header-photo { grid-area: auto; width: 100%; height: 100%; min-height: 0; border-radius: 16px; }
  .st-qa-product-copy { grid-area: copy; padding-top: 0; }
  .st-qa-unit-picker { grid-area: unit; }
  .st-qa-sauces { grid-area: body; min-height: 0; }
  .st-qa-footer { grid-area: footer; }
}

@media (max-width: 599px) {
  /* Selector de agregados en teléfono: una hoja que asciende desde el borde inferior.
     Mantiene el home visible detrás y reserva una franja superior para que se perciba como
     una capa sobrepuesta, no como una página distinta. */
  .st-qa-pop {
    --st-qa-drag-y: 0px;
    /* 🔴 Ajuste (2026-09-14, a pedido del usuario con captura real): el margen superior era
       apenas 14px — insuficiente para que se note que hay una página detrás; casi tapaba todo
       el header. Subido a la misma altura del header (`--st-header-h`, hoy 68px, con 64px fijo
       acá porque este valor solo aplica al breakpoint móvil, donde el header ya mide 68px salvo
       ajustes de tipografía menores — ver la definición de la variable, sección 1) para que el
       header real de la tienda (logo, buscador, carrito) se alcance a ver por encima de la
       hoja. */
    left: 0; right: 0; top: 64px; bottom: 0;
    width: 100vw; max-width: none; height: calc(100dvh - 64px); max-height: none;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 25px 25px 0 0;
    transform: translateY(calc(100% + 20px));
    transform-origin: bottom center;
    transition: opacity .24s ease, transform .34s cubic-bezier(.22,.8,.25,1), visibility .24s;
    /* Ocultar la barra de scroll nativa (2026-09-14, a pedido del usuario) — esta hoja ya se
       lee como una capa deslizable de app, no como una página con scrollbar de escritorio; el
       thumb gris (heredado del estilo global de scrollbar, arriba de este archivo) desentonaba
       ahí. Mismo patrón que .st-catmenu__list/.st-catbar__track más arriba: el scroll real
       sigue funcionando con el dedo/rueda, solo se esconde el indicador visual. */
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .st-qa-pop::-webkit-scrollbar { display: none; }
  .st-qa-pop.open .st-qa-scroll { scrollbar-width: none; -ms-overflow-style: none; }
  .st-qa-pop.open .st-qa-scroll::-webkit-scrollbar { display: none; }
  .st-qa-pop.open,
  .st-qa-pop.open:has(.st-qa-sauces:not(.st-qa-sauces--empty)),
  .st-qa-pop.open:has(.st-qa-changes:not(.st-qa-sauces--empty)),
  .st-qa-pop.open:has(.st-qa-arma:not(.st-qa-sauces--empty)) {
    height: calc(100dvh - 64px); max-height: none;
    transform: translateY(var(--st-qa-drag-y));
  }
  .st-qa-pop.st-qa-dragging { transition: none; }
  .st-qa-handle {
    display: block; flex: 0 0 auto; width: 48px; height: 5px; margin: 0 auto 11px;
    border-radius: 99px; background: var(--st-line-2); cursor: grab; touch-action: none;
  }
  .st-qa-handle:active { cursor: grabbing; }
  /* Cabecera tipo ficha: foto protagonista y datos del producto debajo. No se muestra ningún
     lema comercial aquí; esta capa solo presenta el producto que el cliente está configurando. */
  .st-qa-head { flex: 0 0 auto; display: block; padding: 0; }
  .st-qa-pop.open .st-qa-scroll { display: block; overflow-y: auto; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .st-qa-header-photo { display: block; width: 100%; height: 196px; border-radius: 18px; border: 0; }
  .st-qa-header-photo img { object-fit: cover; }
  .st-qa-product-copy { padding: 13px 2px 0; }
  .st-qa-name { padding-right: 42px; font-size: 1.52rem; line-height: 1.12; }
  .st-qa-price { margin-top: 4px; font-size: 1.26rem; }
  .st-qa-desc { margin-top: 6px; font-size: .82rem; line-height: 1.42; }
  /* 🔴 Bug real (2026-09-13, reportado por el usuario con captura: la "×" se veía blanca/
     invisible en el tema oscuro). Este círculo de fondo es SIEMPRE blanco a propósito (flota
     sobre la foto del producto, que puede ser de cualquier color) — pero el símbolo usaba
     `var(--st-text)`, que en `st-theme-dark` pasa a casi-blanco (#F8FAFC): texto casi blanco
     sobre un círculo casi blanco. Se fija a un tono oscuro constante, sin depender del tema,
     igual que el fondo blanco tampoco depende del tema. */
  .st-qa-close { top: 30px; right: 27px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94); color: #1A1A1E; box-shadow: 0 3px 12px rgba(0,0,0,.16); }
  /* Un solo scroll para toda la ficha: la foto y su descripción salen junto a las opciones.
     El resumen/final de compra se mantiene anclado al borde inferior del selector. */
  .st-qa-pop.open { overflow-y: hidden !important; overscroll-behavior: contain; }
  .st-qa-pop.open .st-qa-sauces,
  .st-qa-pop.open .st-qa-arma,
  .st-qa-pop.open .st-qa-changes {
    flex: 0 0 auto; min-height: auto;
    /* 🔴 Bug real (reportado por el usuario, 2026-09-13, captura real en móvil): con el footer
       "position: sticky; bottom: 0" (ver .st-qa-footer más abajo), la lista de salsas/arma/
       cambios sigue en el MISMO flujo de scroll que el footer — sticky no le resta espacio a sus
       hermanos, solo lo "flota" en la posición visual que le toca. Sin este padding, la última
       fila de la lista (ej. "Salsa BBQ") caía justo detrás/debajo del footer pegado abajo: la
       mitad tapada por el fondo opaco del footer y la otra mitad asomando por debajo de su borde
       inferior. Se reserva acá el alto real del footer (medido en el navegador: ~89px de
       contenido) más el margen que ya le resta el propio `.st-qa-footer` (14px) y su padding
       (safe-area incluida), para que el scroll deje despejado el espacio detrás del footer antes
       de terminar, en vez de seguir dibujando filas ahí. */
    padding-bottom: 0;
  }
  .st-qa-pop.open .st-qa-sauces-list,
  .st-qa-pop.open .st-qa-arma-groups { flex: none; min-height: auto; max-height: none; overflow: visible; }
  .st-qa-footer { position: sticky; bottom: 0; z-index: 4; margin: 14px -18px 0; padding: 12px 18px calc(10px + env(safe-area-inset-bottom)); background: var(--st-surface); box-shadow: 0 -10px 20px color-mix(in srgb, var(--st-surface) 86%, transparent); }
  /* 🔴 Parte 2 del bug de arriba: el propio `.st-qa-pop` (regla base, más arriba en este mismo
     archivo) trae `padding-bottom: calc(16px + safe-area)` SIEMPRE, pensado para cuando no hay
     footer fijo. Con el footer sticky presente, esa franja queda LIBRE entre el borde real de la
     hoja y el footer — como el `overflow` del scroll es a nivel del padding-box (no del
     content-box), cualquier fila cuya posición natural cayera ahí seguía pintándose, asomando
     por debajo del footer aunque este ya estuviera "pegado" a su propio borde. Se anula acá ese
     padding redundante — el footer ya reserva su propio espacio de seguridad con su propio
     `padding` (línea de arriba) — para que quede realmente flush contra el borde inferior real. */
  .st-qa-pop:has(.st-qa-sauces:not(.st-qa-sauces--empty)) {
    height: calc(100dvh - 64px); max-height: none; padding-bottom: 0;
  }
  .st-qa-pop:has(.st-qa-changes:not(.st-qa-sauces--empty)) {
    height: calc(100dvh - 64px); max-height: none; padding-bottom: 0;
  }
  .st-qa-pop:has(.st-qa-arma:not(.st-qa-sauces--empty)) {
    height: calc(100dvh - 64px); max-height: none; padding-bottom: 0;
  }
  .st-qa-pop.open { height: calc(100dvh - 64px); max-height: none; }
  .st-qa-skeleton-row { min-height: 50px; }
  .st-qa-sauce-row { padding: 7px 10px; min-height: 50px; gap: 8px; }
  .st-qa-sauce-name { font-size: .84rem; }
  .st-qa-sauce-price { font-size: .67rem; padding: 4px 6px; }
  .st-qa-sauce-qty { gap: 7px; margin-left: 0; }
  .st-qa-sauce-qty button { width: 30px; height: 30px; font-size: 1.1rem; }
  .st-qa-head { gap: 0; padding-right: 0; }
  .st-qa-header-photo { flex-basis: auto; width: 100%; height: 196px; }
  .st-qa-product-copy { padding-top: 13px; }
  .st-qa-name { font-size: 1.52rem; }
  .st-qa-price { font-size: 1.26rem; }
  .st-qa-desc { font-size: .82rem; margin-top: 6px; }
  .st-qa-footer { gap: 8px; margin-top: 10px; padding-top: 10px; }
  .st-qa-row { gap: 7px; }
  .st-qa-subtotal { font-size: .72rem; }
  .st-qa-subtotal strong { font-size: 1.15rem; }
  /* 🔴 Bug real corregido (2026-08-13): "no aparece el detalle del subtotal" en móvil —
     display:none ocultaba también .st-qa-subtotal-extra, el "(incluye +$X de salsas)" que
     explica por qué el monto subió (ej. una salsa "siempre_paga" como Acevichada). El cliente
     veía solo "$8.990" sin saber a qué correspondía la diferencia con el precio base. Se deja
     oculta solo la etiqueta redundante "Subtotal:" (el monto ya se entiende como tal por su
     posición) y se muestra el detalle, en su propia línea para no forzar el ancho. */
  .st-qa-subtotal-label { display: none; }
  .st-qa-subtotal-extra { display: block; font-size: .68rem; margin-top: 1px; }
  .st-qa-add { padding: 11px 12px; font-size: .74rem; }
  .st-qa-photo-close { top: 14px; right: 14px; }
}

/* Una única fila: subtotal a la izquierda, cantidad y acción a la derecha. */
.st-qa-footer { align-items: center; row-gap: 4px; }
.st-qa-footer .st-qa-qty { height: 46px; align-self: center; }
.st-qa-footer .st-qa-qty button { width: 32px; height: 44px; }
.st-qa-footer .st-qa-qty span { min-width: 30px; line-height: 1; }
.st-qa-footer .st-qa-actions { display: flex; align-items: center; }
.st-qa-footer .st-qa-add { height: 46px; display: inline-flex; align-items: center; justify-content: center; padding-block: 0; line-height: 1.2; }
.st-qa-footer .st-qa-subtotal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; line-height: 1.2; }

/* En una columna la ficha completa se desplaza dentro del contenido, con el pie fuera. */
@media (max-width: 759px) {
  .st-qa-content > .st-qa-header-photo { flex: none; }
  .st-qa-pop.open .st-qa-scroll { flex: none; overflow: visible; padding-bottom: 0; scrollbar-gutter: auto; }
}

/* ═══════════════════════════════════════════════════════════
   14. WOOCOMMERCE — capa oscura genérica
   ═══════════════════════════════════════════════════════════ */
.woocommerce, .woocommerce-page { color: var(--st-text); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.woocommerce table.shop_table,
.woocommerce .cart_totals,
.woocommerce #payment {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
  color: var(--st-text);
}
.woocommerce table.shop_table th { background: var(--st-bg) !important; color: var(--st-text) !important; }
.woocommerce table.shop_table td { border-color: var(--st-line) !important; color: var(--st-text); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--st-raised) !important;
  color: var(--st-text) !important;
  border: 1.5px solid var(--st-line) !important;
  border-radius: 10px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { border-color: var(--st-primary) !important; outline: none !important; }
.woocommerce form .form-row label { color: var(--st-text); }
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce .checkout-button,
.woocommerce #payment #place_order {
  background: var(--st-primary) !important; color: #fff !important;
  border: none !important; border-radius: var(--st-r-btn) !important;
  font-weight: 800 !important; padding: 12px 26px !important;
}
.woocommerce .button:hover, .woocommerce #payment #place_order:hover { background: var(--st-primary-d) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--st-surface) !important; color: var(--st-text) !important;
  border-top-color: var(--st-primary) !important; border-radius: 0 0 10px 10px !important;
}
/* Bug real 2026-08-26 (checkout: "Facturación Región es un campo requerido" ilegible, texto
   blanco sobre fondo rosado claro): la regla de arriba nunca aplicaba ahí porque el WooCommerce
   moderno imprime los errores de validación del checkout como .wc-block-components-notice-banner
   (sistema "Blocks"), no como .woocommerce-error clásico — mismo hallazgo ya documentado y
   corregido solo para la página de cuenta (ver woocommerce/myaccount/my-account-page.php, con un
   login real de contraseña incorrecta), nunca llevado al checkout. Acá va la versión base al
   archivo compartido para que aplique en cualquier página, no solo en Mi cuenta. */
.wc-block-components-notice-banner {
  display: flex; align-items: flex-start; gap: 10px; list-style: none; margin: 0 0 20px;
  padding: 14px 16px; border-radius: 10px; font-size: .85rem;
  background: var(--st-raised); border: 1.5px solid var(--st-line); color: var(--st-text);
}
.wc-block-components-notice-banner svg { flex-shrink: 0; fill: currentColor; }
.wc-block-components-notice-banner__content a { color: var(--st-secondary); }
.wc-block-components-notice-banner__content strong { color: var(--st-text); }
.wc-block-components-notice-banner.is-error { border-color: var(--st-primary); }
.wc-block-components-notice-banner.is-success { border-color: #28a745; }
.wc-block-components-notice-banner.is-info { border-color: var(--st-secondary); }
.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce-store-notice, p.demo_store { background: var(--st-primary) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-footer__main { grid-template-columns: 1fr 1fr; gap: 28px; }
  .st-features__inner { grid-template-columns: repeat(2, 1fr); }
  .st-feature:nth-child(2) { border-right: none; }
  .st-feature:nth-child(1), .st-feature:nth-child(2) { border-bottom: 1px solid var(--st-line); }
}
/* Antes era 860px. Bug real encontrado el 2026-08-24: con el meta viewport correcto
   (width=device-width), varios celulares reales de mayor resolución en vertical — sobre todo
   con el "zoom de pantalla" del sistema operativo reducido, algo muy común en Android — reportan
   un ancho CSS mayor a 860px (900-1024px), así que en vez de la hamburguesa compacta les
   aparecía el header de escritorio completo (5 íconos + flechas del catálogo), una vista "ni
   móvil ni escritorio" que se ve rota en un teléfono real. Subido a 1024px — mismo corte que ya
   usa el bloque de arriba (footer/features) — para cubrir con margen cualquier celular real,
   incluso con zoom reducido, y tablets en vertical (que también son táctiles, se benefician
   igual del menú compacto). Verificado con sondeo real en el navegador: a 900px con el corte
   viejo (860) ya se veía roto; con 1024px sigue viéndose compacto/móvil hasta ese ancho. */
@media (max-width: 1024px) {
  .st-nav { display: none; }
  .st-header__actions .st-btn--cta { display: none; }
  .st-burger { display: flex; }
  /* Logo centrado (arriba, .st-header__inner > .st-logo): con los 5 iconos de siempre
     (buscar/sucursal/cuenta/carrito/☰) el bloque de acciones es más ancho que el hueco libre a
     la derecha del logo centrado y lo tapa. Sucursal y Cuenta ya están disponibles dentro del
     menú móvil (☰, más abajo en este archivo) — se ocultan acá solo del header para dejarle
     espacio real al logo, sin perder el acceso (un tap extra, no una función eliminada). */
  .st-header__actions .st-iconbtn--sucursal,
  .st-header__actions .st-iconbtn--delivery,
  .st-header__actions .st-iconbtn--horarios,
  .st-header__actions .st-iconbtn--account { display: none; }
  .st-hero__inner { grid-template-columns: 1fr; text-align: center; padding: 44px 20px 40px; gap: 28px; }
  .st-hero__visual { order: -1; }
  .st-hero__title, .st-hero__kicker { transform: skewX(-8deg); transform-origin: center; }
  .st-hero__desc { margin-left: auto; margin-right: auto; }
  .st-hero__actions { justify-content: center; }
  /* Foco horizontal configurable por imagen del banner (panel → Configuración → Banner), solo
     en mobile: el banner es full-bleed (object-fit: cover) y en pantallas angostas puede
     recortar justo la parte importante de la imagen sin forma de ajustarlo. Variable con
     fallback a 50% (centro) para banners guardados antes de este campo. 2026-08-14. */
  /* object-position solo es válido en el <img> (elemento reemplazado), no en el wrapper
     .st-hero-slider__image (ahora <a>/<div> — ver nota 2026-08-20 más arriba en este archivo).
     La variable CSS igual funciona: se hereda del wrapper hacia el <img> hijo sin problema. */
  .st-hero-slider__image img { object-position: var(--st-mobile-pos, 50%) center; }
  /* Mismo foco horizontal configurable, mismo breakpoint, que el banner "hero" de arriba —
     a pedido explícito del usuario ("acomodar la posición en pantalla al igual que el banner
     existente"). */
  .st-home-banner__link img { object-position: var(--st-mobile-pos, 50%) center; }
  .st-drawer { width: 100vw; }
}
@media (max-width: 640px) {
  :root { --st-header-h: 60px; --st-catbar-h: 58px; }
  .st-section { padding: 32px 16px 6px; }
  .st-container, .st-header__inner { padding-left: 16px; padding-right: 16px; }
  .st-catbar__wrap { gap: 6px; padding: 0 16px; }
  .st-catbar__menu-button { padding: 0 11px; }
  .st-catbar__track { padding: 0; }
  .st-catbar__arrow { display: none; }
  .st-catshow__head { padding: 14px 16px 0; }
  .st-catshow { padding: 8px 16px 2px; }
  .st-catshow__card { width: 178px; height: 106px; }
  .st-catshow__name { font-size: .92rem; left: 10px; right: 10px; bottom: 10px; }
  /* Margen extra de seguridad para que buscar/carrito/☰ (los 3 iconos que quedan visibles en el
     header ≤860px) nunca lleguen a tocar el logo centrado en pantallas muy angostas. */
  .st-header .st-logo__img { height: 36px; }
  .st-searchbar form { padding: 9px 16px; }
  .st-burger--left { left: 16px; }
  .st-header__actions { gap: 6px; }
  .st-header__actions .st-iconbtn { width: 34px; height: 34px; }
  .st-burger { width: 34px; height: 34px; }
  .st-features { display: none; }
  .st-footer { margin-top: 44px; }
  .st-footer__main { grid-template-columns: 1fr 1fr; padding: 32px 16px 26px; gap: 26px 16px; }
  .st-footer__brand { grid-column: 1 / -1; }
  .st-footer__desc { max-width: 42rem; }
  .st-footer__col h5 { margin-bottom: 10px; }
  .st-footer__col li { margin-bottom: 8px; }
  .st-footer__bottom-inner { padding: 15px 16px calc(15px + env(safe-area-inset-bottom)); flex-direction: column; align-items: flex-start; }
  .st-footer__legal { gap: 14px; }
  .st-trustbar { grid-template-columns: 1fr; }
  .st-trustbar div { border-right: none; border-bottom: 1px solid var(--st-line); }
  .st-promo { width: 165px; }

  /* Tarjetas en grilla de 2 columnas (mismo layout vertical que escritorio, más compacto) */
  .st-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .st-card__body { padding: 11px 11px 12px; gap: 4px; }
  .st-card__name { font-size: .85rem; }
  .st-card__desc { font-size: .7rem; }
  .st-card__stars { font-size: .72rem; }
  .st-card__rating { font-size: .7rem; }
  .st-card__reviews { font-size: .66rem; }
  /* flex-wrap ya viene del selector base (lo necesita el enlace "Ver carrito"); acá solo se
     ajustan gap y padding. */
  .st-card__foot { gap: 6px; padding-top: 8px; }
  .st-card__price { font-size: 1.12rem; }
  /* Sin font-size acá: el "+" ya no es texto (se dibuja con ::before/::after, ver arriba), y
     reponerlo volvería a mostrar el glifo del HTML encima de las barras. Se achica el signo con
     sus propias variables. */
  .st-card__add { width: 36px; height: 36px; border-radius: 10px; --plus-largo: 13px; }
  .st-card__qty { height: 36px; border-radius: 11px; }
  .st-card__qty-minus, .st-card__qty-plus { width: 27px; height: 27px; font-size: .95rem; }
  .st-card__ph { font-size: 2rem; }
  .st-card__tag { top: 6px; left: 6px; font-size: .55rem; padding: 3px 7px; }
}

/* Ajuste final de la barra de categorías: conserva esta separación aunque haya estilos
   configurables cargados por WordPress. Fondo de la barra = lienzo; cada píldora = tarjeta. */
body .st-catbar { background: #FCFCFC !important; }
body .st-catbar .st-cat:not(.st-cat--active) {
  background: #FFFFFF !important;
  border-color: var(--st-line) !important;
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   16. PORTADA FOODTIME 2026 — estética clara, visual y amplia
   La cascada final concentra la nueva dirección visual sin alterar los
   componentes funcionales de WooCommerce, carrito, checkout o modales.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  :root {
    --st-maxw: 1660px;
    --st-header-h: 98px;
  }

  .st-header { box-shadow: 0 1px 0 rgba(17,24,39,.07); }
  .st-header__inner { gap: 30px; padding-inline: 32px; }
  .st-header__inner > .st-logo {
    position: static;
    transform: none;
    min-width: 300px;
  }
  .st-header .st-logo__img { height: 64px; max-width: 290px; object-fit: contain; }
  .st-logo__mark {
    width: 64px; height: 64px; border-radius: 16px;
    font-size: 1.8rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--st-primary) 20%, transparent);
  }
  .st-logo__text strong { font-family: 'Poppins', sans-serif; font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; }
  .st-logo__text span { margin-top: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .29em; color: #64748b; }

  .st-header__actions { gap: 10px; }
  .st-header__actions .st-iconbtn { width: 48px; height: 48px; border-radius: 14px; color: #111827; }
  .st-header__actions .st-icon { width: 25px; height: 25px; }
  .st-header__actions .st-iconbtn--sucursal {
    width: auto; min-width: 172px; padding: 0 14px;
    display: flex; gap: 10px; text-align: left;
  }
  .st-header__branch-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .st-header__branch-copy small { color: #111827; font-size: .72rem; font-weight: 800; }
  .st-header__branch-copy strong { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: .68rem; font-weight: 500; }
  .st-header__branch-arrow { color: #64748b; font-size: 1rem; }
}

.st-catshow__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  padding-top: 42px;
}
.st-catshow__title {
  color: #111827;
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 900; letter-spacing: -.055em; text-transform: none;
}
.st-catshow__title > span { display: inline-block; margin-right: 10px; font-size: .78em; translate: 0 -.05em; }
.st-catshow__title em { color: var(--st-primary); font-style: normal; }
.st-catshow__head p { margin: 9px 0 0 67px; color: #718096; font-size: 1rem; }
.st-catshow__note {
  position: relative; margin: 2px 48px 0 auto; rotate: -7deg;
  color: #cbd0d9; font-family: 'Segoe Print', 'Comic Sans MS', cursive;
  font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-align: center;
}
.st-catshow__note span { position: absolute; left: -30px; bottom: -22px; rotate: 20deg; font-family: sans-serif; font-size: 2rem; font-weight: 400; }
.st-catshow { padding-top: 26px; padding-bottom: 12px; }
.st-catshow__track { gap: 16px; padding: 4px 2px 18px; }
.st-catshow__card {
  width: 205px; height: 260px;
  display: flex; flex-direction: column;
  border: 0; border-radius: 28px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.07);
}
.st-catshow__media { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; background: #f2f4f7; }
.st-catshow__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.st-catshow__card:hover img { transform: scale(1.035); }
.st-catshow__fallback { position: absolute; inset: 0; background: linear-gradient(145deg,#ffe7ec,#fff3d6); }
.st-catshow__fallback-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; filter: drop-shadow(0 12px 18px rgba(80,35,20,.16)); transform: rotate(-4deg); }
.st-catshow__scrim { display: none; }
.st-catshow__body { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; }
.st-catshow__copy { display: block; min-width: 0; }
.st-catshow__name {
  position: static; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #111827; font-family: 'Poppins', sans-serif; font-size: .92rem; font-weight: 800;
  text-shadow: none; line-height: 1.25;
}
.st-catshow__count { display: block; margin-top: 5px; color: #718096; font-size: .73rem; line-height: 1.2; }
.st-catshow__arrow {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--st-primary) 12%, #fff); color: var(--st-primary);
  font-size: 1.45rem; line-height: 1;
}
.st-catshow__card:nth-child(3n+2) .st-catshow__arrow { background: #fff3c9; color: #bd8500; }
.st-catshow__card:nth-child(3n) .st-catshow__arrow { background: #e7f4d7; color: #4b7d19; }

.st-home-benefits {
  max-width: var(--st-maxw); margin: 14px auto 0; padding: 20px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #e8ebef;
}
.st-home-benefit { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 70px; border-right: 1px solid #dce1e7; }
.st-home-benefit:last-child { border-right: 0; }
.st-home-benefit__icon { color: var(--st-primary); font-size: 1.75rem; }
.st-home-benefit strong, .st-home-benefit small { display: block; }
.st-home-benefit strong { color: #111827; font-size: .92rem; font-weight: 800; }
.st-home-benefit small { margin-top: 2px; color: #718096; font-size: .78rem; }

.st-delivery-widget { padding-top: 20px; }
.st-delivery-widget__methods { max-width: 760px; margin: 0 auto; }
.st-delivery-widget__btn { min-height: 48px; box-shadow: none; border-color: #e4e7ec; }
.st-delivery-widget__address { max-width: 760px; margin-inline: auto; }
.st-hero-slider { max-width: var(--st-maxw); margin: 22px auto 0; border-radius: 24px; overflow: hidden; }

.st-section { padding-top: 52px; }
.st-section__head { align-items: center; }
.st-section__title { color: #111827; font-size: clamp(1.3rem,1.8vw,1.7rem); text-transform: none; font-weight: 900; letter-spacing: -.035em; }
.st-section__title em { color: #111827; }
.st-section__count { color: #8b95a5; font-size: .9rem; }
.st-section__link { color: var(--st-primary); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.st-grid { gap: 20px; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); }
.st-card { border: 0; border-radius: 20px; box-shadow: 0 8px 24px rgba(15,23,42,.07); }
.st-card__media { border-radius: 20px 20px 0 0; }

@media (max-width: 1024px) {
  .st-header__branch-copy, .st-header__branch-arrow { display: none; }
  .st-catshow__head { padding: 28px 20px 0; }
  .st-catshow__note { display: none; }
  .st-catshow__card { width: 188px; height: 238px; border-radius: 22px; }
  .st-catshow__track { gap: 14px; }
}

@media (max-width: 640px) {
  .st-header__inner { gap: 8px; }
  /* 🔴 Bug real (2026-09-14, reportado por el usuario: "el boton del menu... no aparece").
     Este `display:none` pisaba el `display:flex` que el breakpoint de arriba
     (@media max-width:1024px) ya le da a `.st-burger` para mostrarlo en móvil/tablet — el
     resultado neto era que el botón ☰ del header (abre `.st-mobilenav`, con Sucursal/Horarios/
     Entrega/Mi cuenta) quedaba OCULTO justo en el rango de ancho que más importa: cualquier
     celular real (≤640px). Sin ninguna razón documentada para ocultarlo específicamente acá —
     parece un remanente de una reorganización anterior del header en pantallas angostas. Se
     saca la regla para que vuelva a mostrarse en cualquier tamaño móvil. */
  .st-header__inner > .st-logo {
    position: static; left: auto; top: auto; transform: none;
    /* margin-left despeja el botón ☰ (abajo del mismo comentario): con el logo puesto en flujo
       normal como flex item, sin este margen quedaba en el mismo x=16px que `.st-burger--left`
       — ambos ocupando exactamente el mismo rectángulo (superpuestos, no solo cerca), tapando
       el ícono de 3 líneas casi por completo detrás del cuadrado rojo del logo. 34px (ancho del
       botón) + 8px de aire, mismo separador que ya usa el resto del header (`gap:8px` de
       `.st-header__inner` en este breakpoint). */
    margin-left: 42px; margin-right: auto; min-width: 0;
  }
  .st-header .st-logo__img { height: 40px; max-width: 175px; object-fit: contain; }
  .st-logo__mark { width: 40px; height: 40px; border-radius: 10px; }
  .st-logo__text strong { font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 900; }
  .st-logo__text span { font-size: .47rem; letter-spacing: .2em; }
  .st-header__actions { margin-left: 0; }
  .st-header__actions .st-iconbtn--account { display: grid; }
  .st-header__actions .st-iconbtn--search,
  .st-header__actions .st-iconbtn--account,
  .st-header__actions .st-nav-cart { width: 38px; height: 38px; }
  .st-header__actions .st-icon { width: 21px; height: 21px; }

  .st-hero-slider { min-height: 180px; height: min(48vw, 235px); margin-top: 0; }
  .st-hero-slider__arrow { width: 34px; height: 34px; font-size: 22px; }
  .st-hero-slider__arrow--prev { left: 10px; }
  .st-hero-slider__arrow--next { right: 10px; }
  .st-hero__inner { padding: 34px 18px 32px; }
  .st-hero__visual { display: none; }
  .st-hero__title { font-size: clamp(2rem,10vw,3rem); }

  .st-catshow__head { padding: 24px 16px 0; }
  .st-catshow__title { font-size: clamp(1.45rem,7vw,1.9rem); line-height: 1.08; }
  .st-catshow__title > span { margin-right: 4px; }
  .st-catshow__head p { margin: 8px 0 0; font-size: .84rem; }
  .st-catshow { padding: 18px 16px 4px; overflow: visible; }
  .st-catshow__track {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px 10px; padding: 0; overflow: visible;
  }
  .st-catshow__track .st-catshow__card[aria-hidden="true"] { display: none; }
  .st-catshow__card { width: auto; height: 154px; min-width: 0; border-radius: 16px; }
  .st-catshow__media { min-height: 0; }
  .st-catshow__fallback-icon { font-size: 3.5rem; }
  .st-catshow__body { min-height: 52px; gap: 4px; padding: 7px 6px 7px 8px; }
  .st-catshow__name { font-size: .67rem; letter-spacing: -.025em; }
  .st-catshow__count { margin-top: 3px; font-size: .58rem; }
  .st-catshow__arrow { width: 27px; height: 27px; flex-basis: 27px; font-size: 1.1rem; }

  .st-home-benefits {
    margin: 22px 10px 0; padding: 10px 6px;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border: 1px solid #edf0f3; border-radius: 18px;
    background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.06);
  }
  .st-home-benefit {
    justify-content: center; min-width: 0; min-height: 64px;
    gap: 6px; padding: 0 7px; border-right: 1px solid #e0e4e9; border-bottom: 0;
  }
  .st-home-benefit:last-child { border-right: 0; }
  .st-home-benefit__icon { font-size: 1.25rem; }
  .st-home-benefit strong { font-size: .62rem; line-height: 1.2; }
  .st-home-benefit small { font-size: .54rem; line-height: 1.25; }
  .st-delivery-widget { padding-top: 14px; }
  .st-delivery-widget__methods { gap: 8px; }
  .st-delivery-widget__btn { min-height: 46px; font-size: .77rem; }
  .st-section { padding-top: 40px; }
  .st-section__title { font-size: 1.12rem; }
  .st-section__head { margin-bottom: 14px; }
  .st-section__link { font-size: .72rem; }
  .st-card { border-radius: 16px; }
  .st-card__media { aspect-ratio: 1.55 / 1; border-radius: 16px 16px 0 0; }
}
@media (max-width: 420px) {
  .st-mobilenav__panel { padding: 14px; }
  .st-mobilenav__categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-mobilenav__categories a { min-height: 76px; font-size: .65rem; }
  .st-mobilenav__category-icon { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-mobilenav, .st-mobilenav__panel, .st-qa-overlay, .st-qa-pop, .st-catmenu-overlay, .st-catmenu { transition: none; }
  .st-catmenu__list.is-filtering > .st-catmenu__item:not([hidden]) { animation: none; }
  .st-qa-pop.open .st-qa-sauce-row { animation: none; }
  .st-reveal { opacity: 1; translate: 0 0; scale: 1; transition: none; }
}
/* Login WooCommerce: evita que estilos heredados separen la casilla de “Recordarme”.
   Regla global intencional: cubre tanto la página de cuenta como el acceso flotante. */
body .woocommerce form.login .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 9px;
  margin: 2px 0 14px;
  line-height: 1;
}
body .woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px !important;
  height: 16px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--st-faint, #74747E);
  border-radius: 4px;
  background: var(--st-raised, #1B1B20);
  cursor: pointer;
}
body .woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
  border-color: var(--st-primary, #E11B22);
  background: var(--st-primary, #E11B22) center/10px 10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.3 2.3L10 2.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .woocommerce form.login .woocommerce-form-login__rememberme span { display: block; }

/* Escala compacta general (2026-09-10): conserva la estética y la legibilidad,
   pero reduce la ocupación vertical y permite ver más contenido por pantalla. */
@media (min-width: 1025px) {
  :root { --st-maxw: 1440px; --st-header-h: 64px; }
  body { font-size: 14px; }
  .st-header__inner { gap: 18px; padding-inline: 24px; }
  .st-header__inner > .st-logo { min-width: 220px; }
  .st-header .st-logo__img { height: 42px; max-width: 205px; }
  .st-logo__mark { width: 42px; height: 42px; border-radius: 11px; font-size: 1.2rem; }
  .st-logo__text strong { font-size: 1rem; }
  .st-logo__text span { margin-top: 3px; font-size: .5rem; }
  .st-header__actions { gap: 6px; }
  .st-header__actions .st-iconbtn { width: 36px; height: 36px; border-radius: 10px; }
  .st-header__actions .st-icon { width: 19px; height: 19px; }
  .st-header__actions .st-iconbtn--sucursal { min-width: 140px; padding-inline: 8px; }

  .st-hero__inner { grid-template-columns: 1fr 330px; gap: 28px; padding: 48px 26px 46px; }
  .st-hero__title { font-size: clamp(2.2rem,4.5vw,3.7rem); margin-bottom: 17px; }
  .st-hero__kicker { margin-bottom: 13px; font-size: .64rem; }
  .st-hero__desc { max-width: 390px; margin-bottom: 21px; font-size: .82rem; }
  .st-hero__disc { width: min(280px,60vw); }
  .st-hero__img { width: min(235px,50vw); }
  .st-hero__emoji { font-size: clamp(4rem,10vw,7rem); }
  .st-hero-slider { min-height: clamp(260px,28vw,360px); }

  .st-catshow__head { padding-top: 31px; }
  .st-catshow__title { font-size: clamp(1.65rem,2.5vw,2.25rem); }
  .st-catshow__head p { margin-top: 6px; font-size: .88rem; }
  .st-catshow__note { font-size: .9rem; }
  .st-catshow { padding-top: 19px; }
  .st-catshow__track { gap: 14px; padding-bottom: 14px; }
  .st-catshow__card { width: 185px; height: 232px; border-radius: 22px; }
  .st-catshow__body { min-height: 66px; padding: 9px 8px 9px 12px; }
  .st-catshow__name { font-size: .81rem; }
  .st-catshow__count { margin-top: 3px; font-size: .64rem; }
  .st-catshow__arrow { width: 34px; height: 34px; flex-basis: 34px; font-size: 1.25rem; }
  .st-catshow__fallback-icon { font-size: 4.2rem; }

  .st-home-benefits { margin-top: 8px; padding: 13px 20px; }
  .st-home-benefit { min-height: 56px; gap: 13px; }
  .st-home-benefit__icon { font-size: 1.45rem; }
  .st-home-benefit strong { font-size: .8rem; }
  .st-home-benefit small { font-size: .68rem; }
  .st-delivery-widget { padding-top: 14px; }
  .st-delivery-widget__methods { max-width: 660px; }
  .st-delivery-widget__btn { min-height: 42px; font-size: .78rem; }

  .st-section { padding-top: 38px; }
  .st-section__head { margin-bottom: 15px; }
  .st-section__title { font-size: clamp(1.18rem,1.55vw,1.48rem); }
  .st-section__count { font-size: .78rem; }
  .st-grid { gap: 14px; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
  .st-card { border-radius: 16px; }
  .st-card__media { border-radius: 16px 16px 0 0; }
  .st-card__body { padding: 11px 12px 12px; gap: 4px; }
  .st-card__name { font-size: .82rem; }
  .st-card__desc { font-size: .68rem; line-height: 1.4; }
  .st-card__foot { padding-top: 7px; }
  .st-card__price { font-size: 1.12rem; }
  .st-card__add { width: 36px; height: 36px; border-radius: 10px; --plus-largo: 13px; }
  .st-card__qty { height: 36px; border-radius: 11px; }
  .st-card__qty-minus, .st-card__qty-plus { width: 27px; height: 27px; font-size: .95rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root { --st-header-h: 58px; }
  .st-header .st-logo__img { height: 36px; }
  .st-header__actions .st-iconbtn { width: 34px; height: 34px; }
  .st-catshow__card { width: 170px; height: 212px; border-radius: 19px; }
  .st-catshow__body { min-height: 61px; padding: 8px 8px 8px 10px; }
  .st-catshow__name { font-size: .78rem; }
  .st-catshow__count { font-size: .62rem; }
  .st-catshow__arrow { width: 32px; height: 32px; flex-basis: 32px; }
  .st-section { padding-top: 38px; }
  .st-grid { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 13px; }
}

@media (max-width: 640px) {
  :root { --st-header-h: 52px; --st-catbar-h: 52px; }
  body { font-size: 14px; }
  /* Hero móvil con arte propio: una sola tarjeta visual, sin división fotografía/texto. */
  .st-hero--vivid {
    min-height: 420px;
    margin: 10px 12px 4px;
    border-radius: 22px;
    background-color: #83000d;
    background-image: var(--st-hero-mobile-art, var(--st-hero-art));
    background-position: var(--st-hero-mobile-pos, 50%) 27%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 16px 34px rgba(113, 0, 13, .22);
  }
  .st-hero--vivid::before { content: none; }
  .st-hero--vivid::after {
    inset: 0;
    background: linear-gradient(180deg, rgba(48,0,4,.02) 34%, rgba(64,0,7,.34) 56%, rgba(76,0,9,.96) 76%, #64000a 100%);
  }
  .st-hero--vivid .st-hero__inner {
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    text-align: left;
  }
  .st-hero--vivid .st-hero__inner > div {
    width: 100%;
  }
  .st-hero--vivid .st-hero__kicker,
  .st-hero--vivid .st-hero__title { transform: none; transform-origin: left center; }
  .st-hero--vivid .st-hero__kicker {
    position: absolute; top: 16px; left: 16px;
    margin: 0; padding: 5px 8px; border-radius: 999px;
    background: rgba(55,0,4,.42); color: #fff3bc;
    font-size: .45rem; letter-spacing: .13em;
    backdrop-filter: blur(3px);
  }
  .st-hero--vivid .st-hero__title {
    max-width: 330px; margin-bottom: 8px;
    font-size: clamp(1.7rem, 7.7vw, 2.05rem); line-height: .94;
  }
  .st-hero--vivid .st-hero__desc {
    max-width: 340px; margin: 0 0 13px;
    color: rgba(255,255,255,.86);
    font-size: .69rem; line-height: 1.42;
  }
  .st-hero--vivid .st-hero__actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; width: 100%; justify-content: flex-start;
  }
  .st-hero--vivid .st-hero__actions .st-btn {
    width: 100%; min-height: 41px; padding: 8px 7px;
    border-radius: 11px; font-size: .7rem;
  }
  .st-header .st-logo__img { height: 32px; max-width: 142px; }
  .st-logo__mark { width: 32px; height: 32px; }
  .st-header__actions .st-iconbtn--search,
  .st-header__actions .st-iconbtn--account,
  .st-header__actions .st-nav-cart { width: 32px; height: 32px; }
  .st-header__actions .st-icon { width: 18px; height: 18px; }
  .st-hero__inner { padding: 26px 16px 25px; }
  .st-hero__title { font-size: clamp(1.8rem,8.5vw,2.4rem); margin-bottom: 15px; }
  .st-hero__kicker { margin-bottom: 10px; }
  .st-hero__desc { margin-bottom: 18px; font-size: .78rem; }
  .st-hero-slider { min-height: 155px; height: min(42vw,205px); }
  .st-catshow__head { padding-top: 19px; }
  .st-catshow__title { font-size: clamp(1.3rem,6vw,1.65rem); }
  .st-catshow__head p { margin-top: 6px; font-size: .75rem; }
  .st-catshow { padding-top: 14px; }
  .st-catshow__track { gap: 9px 8px; }
  .st-catshow__card { height: 142px; border-radius: 14px; }
  .st-catshow__body { min-height: 48px; padding: 6px; }
  .st-catshow__name { font-size: .61rem; }
  .st-catshow__count { font-size: .53rem; }
  .st-catshow__arrow { width: 25px; height: 25px; flex-basis: 25px; }
  .st-catshow__fallback-icon { font-size: 3rem; }
  .st-home-benefits { margin-top: 17px; min-height: 0; }
  .st-home-benefit { min-height: 55px; }
  .st-delivery-widget__btn { min-height: 42px; padding-inline: 9px; gap: 6px; font-size: .74rem; }
  .st-section { padding-top: 32px; }
  .st-section__head { margin-bottom: 11px; }
  .st-section__title { font-size: 1.03rem; }
  .st-section__count { font-size: .68rem; margin-left: 6px; }
  /* La carta móvil mantiene dos columnas incluso con tarjetas compactas. */
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-card__body { padding: 9px; }
  .st-card__name { font-size: .77rem; }
  .st-card__desc { font-size: .64rem; }
  .st-card__price { font-size: 1.05rem; }
  .st-card__add { width: 38px; height: 38px; }
}

/* Tema oscuro — categorías. Estas reglas van al final porque la portada usa una
   capa visual clara para la vitrina y la barra. En oscuro, ambas superficies
   deben integrarse con el lienzo negro sin perder jerarquía ni contraste. */
body.st-theme-dark .st-catbar {
  background: var(--st-dark) !important;
  border-color: var(--st-line);
  box-shadow: 0 2px 12px rgba(0,0,0,.42);
}
body.st-theme-dark .st-catbar .st-catbar__menu-button,
body.st-theme-dark .st-catbar .st-cat:not(.st-cat--active),
body.st-theme-dark .st-catbar .st-cat__icon,
body.st-theme-dark .st-catbar .st-catbar__arrow {
  background: #000 !important;
  color: var(--st-muted) !important;
  border-color: var(--st-line-2) !important;
}
body.st-theme-dark .st-catbar .st-cat:not(.st-cat--active):hover,
body.st-theme-dark .st-catbar .st-catbar__menu-button:hover,
body.st-theme-dark .st-catbar .st-catbar__arrow:hover {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--st-primary) 72%, #fff) !important;
}
body.st-theme-dark .st-catbar .st-cat--active {
  background: var(--st-primary) !important;
  color: #fff !important;
  border-color: var(--st-primary) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--st-primary) 42%, transparent);
}

/* El demo Sushi usa una paleta acromática negra (sin azul pizarra) y conserva el rojo
   de marca aunque existan ajustes antiguos guardados. */
body.st-store-variant-sushi {
  --st-dark: #000000;
  --st-bg: #000000;
  --st-surface: #101010;
  --st-raised: #1A1A1A;
  --st-hover: #252525;
  --st-line: #303030;
  --st-line-2: #505050;
  --st-text: #F5F5F5;
  --st-muted: #C7C7C7;
  --st-faint: #9B9B9B;
  --st-gray: #242424;
  --st-primary: #E4002B;
  --st-primary-d: #B3001F;
}
body.st-theme-dark .st-catbar .st-cat--active .st-cat__icon {
  background: rgba(0,0,0,.25) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body.st-theme-dark .st-catshow__title,
body.st-theme-dark .st-catshow__name { color: var(--st-text); }
body.st-theme-dark .st-catshow__head p,
body.st-theme-dark .st-catshow__count { color: var(--st-muted); }
body.st-theme-dark .st-catshow__note { color: var(--st-faint); }
body.st-theme-dark .st-catshow__card {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.34);
}
body.st-theme-dark .st-catshow__media { background: var(--st-raised); }
body.st-theme-dark .st-catshow__arrow,
body.st-theme-dark .st-catshow__card:nth-child(3n+2) .st-catshow__arrow,
body.st-theme-dark .st-catshow__card:nth-child(3n) .st-catshow__arrow {
  background: color-mix(in srgb, var(--st-primary) 16%, #151515);
  color: var(--st-primary);
}
body.st-theme-dark .st-section__title,
body.st-theme-dark .st-section__title em { color: var(--st-text); }
body.st-theme-dark .st-section__count { color: var(--st-muted); }

/* Colores configurables — no conservar rastros de la antigua paleta roja en
   sombras, foco, hover o estados seleccionados cuando el negocio elige otro
   color principal. */
.st-btn--primary { box-shadow: 0 6px 22px color-mix(in srgb, var(--st-primary) 32%, transparent); }
.st-btn--primary:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--st-primary) 42%, transparent); }
.st-btn--cta,
.st-cat--active { box-shadow: 0 4px 16px color-mix(in srgb, var(--st-primary) 35%, transparent); }
.st-logo__mark { box-shadow: 0 4px 14px color-mix(in srgb, var(--st-primary) 35%, transparent); }
.st-iconbtn--delivery[aria-expanded="true"] {
  background: color-mix(in srgb, var(--st-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--st-primary) 45%, transparent);
}
.st-catmenu__close:hover { background: color-mix(in srgb, var(--st-primary) 12%, #fff); }
.st-catmenu__filters button.is-active { box-shadow: 0 5px 12px color-mix(in srgb, var(--st-primary) 20%, transparent); }
.st-catmenu__item.is-featured { background: linear-gradient(90deg, color-mix(in srgb, var(--st-primary) 9%, #fff), #fff); }
.st-catmenu__item.is-featured .st-catmenu__count { background: color-mix(in srgb, var(--st-primary) 14%, #fff); }
.st-delivery-widget__btn[aria-pressed="true"] { box-shadow: 0 4px 14px color-mix(in srgb, var(--st-primary) 28%, transparent); }
.st-delivery-widget__address input:focus,
.st-delivery-widget__address textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 14%, transparent); }
.st-delivery-widget__address button[type="submit"]:hover { background: var(--st-primary-d); }

/* Contraste específico de la portada oscura. La portada clara tenía reglas
   tardías con tinta azul/negra fija que en negro dejaban texto casi invisible. */
body.st-theme-dark .st-header__actions .st-iconbtn,
body.st-theme-dark .st-header__branch-copy small,
body.st-theme-dark .st-header__branch-arrow { color: var(--st-muted); }
body.st-theme-dark .st-header__branch-copy strong { color: var(--st-faint); }
body.st-theme-dark .st-header__actions .st-iconbtn:hover { color: var(--st-primary); background: var(--st-raised); }
body.st-theme-dark .st-home-benefits { border-color: var(--st-line); }
body.st-theme-dark .st-home-benefits {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-line);
  border-radius: 18px;
}
body.st-theme-dark .st-home-benefit { border-color: var(--st-line); }
body.st-theme-dark .st-home-benefit strong { color: var(--st-text); }
body.st-theme-dark .st-home-benefit small { color: var(--st-muted); }
body.st-theme-dark .st-card__desc { color: var(--st-muted); }
/* 🔴 Bug real (2026-09-13, reportado por el usuario con captura: descripción del popover de
   agregado rápido casi invisible en el tema oscuro). `.st-qa-desc` usa el mismo hardcode
   `#3F3F46` que `.st-card__desc` de arriba (pensado para fondo claro, ~9:1 sobre --st-surface
   claro) — pero, a diferencia de esa regla, nunca recibió su propio override para
   `st-theme-dark`, así que sobre el fondo oscuro (--st-dark/--st-surface oscuros) quedaba un
   gris casi negro sobre negro. Mismo criterio que el resto de esta sección: en oscuro, el texto
   secundario pasa a --st-muted (#CBD5E1, gris claro con buen contraste), no a un gris fijo. */
body.st-theme-dark .st-qa-desc { color: var(--st-muted); }
body.st-theme-dark .st-catmenu {
  background: var(--st-surface);
  border-color: var(--st-line);
  color: var(--st-text);
}
body.st-theme-dark .st-catmenu__title,
body.st-theme-dark .st-catmenu__item,
body.st-theme-dark .st-catmenu__item:hover,
body.st-theme-dark .st-catmenu__item:focus-visible { color: var(--st-text); }
body.st-theme-dark .st-catmenu__intro,
body.st-theme-dark .st-catmenu__item-description,
body.st-theme-dark .st-catmenu__empty { color: var(--st-muted); }
body.st-theme-dark .st-catmenu__close,
body.st-theme-dark .st-catmenu__filters button,
body.st-theme-dark .st-catmenu__count { background: var(--st-raised); color: var(--st-muted); }
body.st-theme-dark .st-catmenu__filters button.is-active { background: var(--st-primary); color: #fff; }
body.st-theme-dark .st-catmenu__search { background: var(--st-raised); color: var(--st-muted); }
body.st-theme-dark .st-catmenu__search input { color: var(--st-text); }
body.st-theme-dark .st-catmenu__item:hover,
body.st-theme-dark .st-catmenu__item:focus-visible { background: var(--st-hover); }
body.st-theme-dark .st-catmenu__item.is-featured { background: color-mix(in srgb, var(--st-primary) 13%, var(--st-surface)); }
body.st-theme-dark .st-catmenu__item.is-featured .st-catmenu__count { background: color-mix(in srgb, var(--st-primary) 22%, var(--st-surface)); color: #fff; }

@media (max-width: 640px) {
  /* Fija el contrato móvil de dos columnas incluso ante reglas responsive tardías del tema. */
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .st-grid > * { min-width: 0; }
}