/* =========================================================================
   Tienda Web - estilo "Grupo Islandia"
   ========================================================================= */

:root {
  --color-primary: #1f4e8c;
  --color-primary-dark: #15396a;
  --color-accent: #f5a623;
  /* 2026-06-02 Rediseño card producto: color de acento configurable.
     Si el admin no setea color_card_acento, se usa --color-primary como fallback. */
  --color-card-accent: var(--color-primary);
  --color-card-accent-dark: var(--color-primary-dark);
  --color-bg: #ffffff;
  --color-soft: #f6f7f9;
  --color-line: #e6e8ec;
  --color-text: #1c2433;
  --color-muted: #6b7280;
  --color-success: #2e8b3d;
  --color-danger: #c0392b;
  --color-warning: #d97706;
  --color-header-bg: #ffffff;
  --color-header-text: #1c2433;
  --color-nav-bg: #1f4e8c;
  --color-nav-text: #ffffff;
  --color-footer-bg: #1c2433;
  --color-footer-text: #cbd5e1;
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, .14);
  --shadow-card: 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-card-hover: 0 14px 30px rgba(15, 23, 42, .12);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* Familias tipográficas predefinidas
   2026-06-01 (Martín): `montserrat` es la opción explícita y default de la tienda.
   `sans-modern` queda como alias (ya usaba Montserrat por debajo) para no
   romper datos viejos. */
body.font-montserrat,
body.font-sans-modern { --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
body.font-sans-classic { --font-family: Helvetica, Arial, sans-serif; }
body.font-serif { --font-family: Georgia, "Times New Roman", Times, serif; }
body.font-rounded { --font-family: "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* 2026-06-02: evitar scroll horizontal por elementos que desbordan el viewport.
     2026-06-09 (Martín): `clip` en vez de `hidden` — `overflow-x:hidden` convertía
     a html/body en contenedor de scroll y rompía `position:sticky` del chrome
     superior en mobile (iOS Safari). `clip` clipea igual el desborde horizontal
     pero NO crea scroll container, así el encabezado+buscador quedan fijos en mobile. */
  overflow-x: clip;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------------- Header ---------------- */

/* Chrome superior fijo (2026-06-09 Martín): barra de anuncios + encabezado +
   menú + banners del header quedan pegados arriba al scrollear, todos juntos
   como una sola unidad. El wrapper hace el sticky; el header interno deja de
   competir (position:static) para no superponerse al banner. */
.tw-sticky-chrome {
  position: sticky;
  top: 0;
  z-index: 60;
}
.tw-sticky-chrome .tw-header {
  position: static;
}
.tw-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* #24 (2026-06-04): nav compacto al scrollear (estilo Ganga). Al bajar, la
   barra superior se colapsa y queda pegada SOLO la barra de menú de rubros.
   Solo desktop (≥769px): en mobile el nav fijo no se muestra (vive en drawer).
   No ponemos overflow:hidden en estado normal para no recortar los dropdowns
   de sesión/carrito; sí al colapsar (la barra ya no es alcanzable). */
@media (min-width: 769px) {
  .tw-header-top {
    max-height: 500px;
    transition: max-height .28s ease, padding .28s ease, opacity .2s ease;
  }
  body.tw-nav-compact .tw-header-top {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  body.tw-nav-compact .tw-header-mobile-search { display: none; }
}

/* --- Header 3 columnas: buscador | logo | sesión --- */
/* 2026-06-02 fix Martín: color general del header — se aplica a links y botones
   genéricos, pero NO a .tw-hdr-icon-btn (carrito/sesión) que tiene su propio
   color garantizado para siempre ser visible. */
.tw-header-top a,
.tw-hdr-right a:not(.tw-hdr-icon-btn),
.tw-hdr-right button:not(.tw-hdr-icon-btn) { color: var(--color-header-text); }
.tw-logo { color: var(--color-primary); }

.tw-header-top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  /* 2026-06-01 (Martín): altura mínima configurable del header.
     Usa CSS variable --tw-header-h (seteada inline via cfg.header_alto_px).
     Default 0 = altura natural del contenido. */
  min-height: var(--tw-header-h, 0px);
  display: grid;
  /* 2026-06-01 (Martín): auto en center deja al logo+badge tomar su ancho
     natural; 1fr a los costados para que buscador/sesión absorban el sobrante.
     min-width:0 evita que un contenido largo (badge "Envíos a ROSARIO Y ALREDEDORES")
     fuerce overflow horizontal del header. */
  /* 2026-06-09 (Martín): los costados (logo / sesión) toman su ancho natural y el
     centro (buscador) absorbe TODO el sobrante → el buscador se ve más largo y
     respeta su max-width (buscador_ancho_max_px) sin apretar el logo. Antes el
     centro era `auto` y colapsaba al contenido del pill (~315px), ignorando el
     ancho configurado. El centro tiene min-width:0 (.tw-hdr-center) para poder
     achicarse en pantallas chicas sin desbordar. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.tw-hdr-left, .tw-hdr-center, .tw-hdr-right { min-width: 0; }

.tw-hdr-left {
  display: flex;
  align-items: center;
}

.tw-hdr-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tw-hdr-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.tw-hdr-tel {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.tw-hdr-carrito {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.tw-hdr-carrito:hover {
  background: var(--color-soft);
  color: var(--color-primary);
}

/* 2026-06-01 (Martín): botones header tipo "ícono redondo" estilo ecommerce
   moderno (persona y carrito). Sin texto, solo SVG inline.
   2026-06-02 fix Martín: color usa var(--color-primary) como base (siempre
   visible, azul de la marca) en lugar de heredar --color-header-text que puede
   coincidir con el fondo (ej: texto blanco + header blanco → íconos invisibles).
   La regla .tw-hdr-right button:not(.tw-hdr-icon-btn) ya excluye esta clase. */
.tw-hdr-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--color-primary, #1f4e8c);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tw-hdr-icon-btn:hover {
  background: var(--color-soft, #f1f5f9);
  color: var(--color-primary-dark, #15396a);
}
.tw-hdr-icon-btn:active { transform: scale(0.94); }
.tw-hdr-icon-btn svg { display: block; }
/* 2026-06-02 (Martín): forzar color SVG visible en estado normal (blanco sobre blanco sin esto). */
.tw-hdr-icon-btn svg,
.tw-hdr-icon-cart svg,
.tw-fav-btn svg {
  color: #15396a;
  stroke: #15396a;
}
/* Badge rojo arriba-derecha del ícono carrito con la cantidad. */
.tw-hdr-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
  box-sizing: content-box;
}

.tw-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
}
.tw-logo img { max-height: 44px; max-width: 200px; object-fit: contain; display: block; }

.tw-search {
  width: 100%;
  max-width: 420px;
  position: relative;
}

.tw-search input {
  width: 100%;
  padding: 9px 16px 9px 38px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 14px;
  background: var(--color-soft);
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.tw-search input:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.tw-search::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .6;
  pointer-events: none;
}

/* 2026-06-01 (Martín): variante "pill" — input + botón Buscar integrado a la derecha.
   El icono ahora es un SVG inline (.tw-search-icon) en vez del emoji ::before. */
.tw-search--pill {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  max-width: 480px;
  width: 100%;
  height: 44px;
}
.tw-search--pill::before { content: none; }  /* desactivar el emoji ::before del legacy */
.tw-search--pill .tw-search-icon {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  margin-right: 8px;
  flex-shrink: 0;
}
.tw-search--pill input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 12px 0 0;
  font-size: 14px;
  outline: none;
  box-shadow: none;
  height: 100%;
}
.tw-search--pill input:focus { background: transparent; box-shadow: none; border: none; }
.tw-search--pill .tw-search-submit {
  background: var(--color-primary, #1f4e8c);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.tw-search--pill .tw-search-submit:hover { opacity: 0.88; }
.tw-search--pill:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* 2026-06-04 (Martín, ref tomy.com.ar): buscador prominente SOLO mobile, en su
   propia fila bajo el header. Oculto en desktop (ahí va el pill del top). */
.tw-header-mobile-search { display: none; }
@media (max-width: 768px) {
  .tw-header-mobile-search {
    display: block;
    padding: 8px 12px 10px;
    /* 2026-06-09 (Martín): fondo azul de marca detrás del buscador en mobile.
       La pastilla (.tw-search--pill) mantiene su fondo blanco propio → contraste. */
    background: var(--color-primary, #1f4e8c);
    border-top: 1px solid var(--color-line, #e2e8f0);
  }
  /* Re-habilita el pill mobile (el .tw-search global se oculta en mobile). */
  .tw-header-mobile-search .tw-search--mobile {
    display: flex !important;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
  }
  /* 2026-06-09 (Martín): 16px EXACTO — iOS Safari hace auto-zoom al enfocar
     cualquier input con font-size < 16px ("se agranda la web y hay que volver a
     achicarla"). 16px es el umbral que desactiva ese zoom → el header queda fijo
     sin saltos al tocar el buscador. */
  .tw-header-mobile-search .tw-search--mobile input {
    font-size: 16px;
  }
}

/* Dropdown de sesión */
.tw-user-menu {
  position: relative;
}
/* 2026-06-01 (Martín): .tw-user-btn ahora hereda de .tw-hdr-icon-btn (botón
   redondo solo-ícono). Resets las reglas viejas que daban border + padding. */
.tw-user-btn {
  /* heredado de .tw-hdr-icon-btn — no agregar más estilos aquí */
}
.tw-user-btn:hover {
  /* heredado de .tw-hdr-icon-btn:hover */
}
.tw-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  /* Panel SIEMPRE blanco → forzar texto oscuro en TODO el contenido por default,
     sin depender de var(--color-text) (que la tienda puede tematizar en claro y
     dejaba palabras blancas sobre blanco). Ítems puntuales (ej. descuento verde)
     se overridean con su propia regla. */
  color: #1c2433;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  min-width: 200px;
  padding: 6px 0;
  z-index: 200;
}
.tw-user-dropdown[hidden] { display: none; }
.tw-user-dropdown a {
  display: block;
  padding: 9px 16px;
  /* Panel SIEMPRE blanco (background:#fff arriba) → texto oscuro fijo, NO
     var(--color-text): si la tienda tematiza el texto en claro (header oscuro)
     los ítems quedaban blancos sobre blanco y sólo se veían al hover. */
  color: #1c2433;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
}
.tw-user-dropdown a:hover {
  background: var(--color-soft);
  color: var(--color-primary);
}
/* Mismo motivo: el "Hola {nombre}" heredaba el color de texto del tema. */
.tw-dropdown-user-name {
  padding: 9px 16px 4px;
  color: #1c2433;
  font-size: 13px;
  font-weight: 700;
}
.tw-user-dropdown hr {
  margin: 5px 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

/* --- Responsive header --- */
/* 2026-06-02: grid-template-columns y padding de .tw-header-top para mobile
   se definen en el bloque del hamburger más abajo (después de .tw-nav-hamburger).
   Aquí solo van las reglas que no dependen del nuevo layout de 2 cols. */
@media (max-width: 768px) {
  .tw-hdr-left { min-width: 0; }
  .tw-search { max-width: 100%; }
  .tw-user-label { display: none; }
  .tw-hdr-tel { display: none; }
  /* Nav inline (Inicio / Productos / Ofertas / ...) se oculta en mobile.
     El drawer del hamburger los reemplaza. */
  .tw-nav { display: none; }
  /* Carrito flotante redundante en mobile (ya está el del header) — hide.
     IDs reales del FAB: tw-minicart-fab + wrapper tw-minicart-fab-wrap. */
  #tw-minicart-fab-wrap, #tw-minicart-fab,
  .tw-mini-cart-fab, .tw-floating-cart, .tw-cart-fab { display: none !important; }
  /* 2026-06-01 (Martín): badge envío zona NO en mobile. En pantalla angosta
     empujaba el resto del header (iconos sesión/carrito) fuera del viewport.
     Solo lo mostramos desde 769px+. */
  .tw-envio-zona-badge { display: none !important; }
  /* 2026-06-04 fix logo mobile: el grid auto/1fr puede comprimir la col izquierda
     menos de lo esperado. El max-width:200px del logo img es demasiado ancho para
     pantallas de 360-430px donde la derecha tiene 4 iconos+hamburguesa.
     Reducimos el tamaño del img y forzamos min-width:0 en el wrap para que el
     grid pueda comprimirlo.
     2026-06-06 fix logo cortado: el logo trae inline transform:scale(logoScale)
     (ej 2.27x desde un base de 44px) para respetar la altura configurada. En
     desktop el contenedor no recorta, pero en mobile overflow:hidden + scale +
     transform-origin center recortaba el logo a ambos lados. Neutralizamos el
     scale en mobile (transform:none !important para ganarle al inline) y lo
     dimensionamos con una altura real que entra completo, sin recortar. */
  .tw-logo-wrap {
    gap: 0 !important;
    min-width: 0;
    overflow: visible;
  }
  .tw-logo { min-width: 0; overflow: visible; }
  .tw-logo img {
    transform: none !important;
    max-height: 40px !important;
    max-width: 150px !important;
  }
}

/* ===== Hamburger mobile + drawer lateral (2026-06-02 fix Martín) ===== */
/* 2026-06-02: hamburger movido al interior de tw-hdr-right (en el DOM).
   Ya NO usa position:absolute — vive en el flujo normal del flex row.
   Queda SIEMPRE a la derecha (extremo opuesto al logo) sin importar
   logo_alineacion. El padding-left compensatorio anterior fue eliminado. */
.tw-nav-hamburger {
  display: none;                /* Visible solo en mobile vía @media */
  flex-direction: column;      /* Barras apiladas (☰), no en fila (———) */
  background: transparent;
  border: none;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;               /* No se comprime cuando el right tiene poco espacio */
}
.tw-nav-hamburger:hover { background: var(--color-soft, #f1f5f9); }
.tw-nav-hamburger:active { transform: scale(0.95); }
.tw-hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text, #1c2433);
  margin: 4px 0;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
@media (max-width: 768px) {
  .tw-nav-hamburger { display: inline-flex; }
  /* Mobile: grid de 2 cols (logo | right). El buscador (col centro) se oculta.
     Logo queda a la izquierda, botón menú + carrito/sesión a la derecha.
     SIN padding-left artificial — el layout lo maneja el propio grid. */
  .tw-header-top {
    grid-template-columns: auto 1fr;
    padding: 10px 12px;
    gap: 8px;
  }
  .tw-hdr-center { display: none; }  /* buscador oculto en mobile */
  .tw-hdr-right {
    justify-content: flex-end;
    gap: 6px;
  }
}

/* Drawer lateral */
.tw-nav-drawer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tw-nav-drawer:not([hidden]) { pointer-events: auto; }
.tw-nav-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.tw-nav-drawer.open .tw-nav-drawer-overlay { opacity: 1; }
.tw-nav-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 280px;
  max-width: 84vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
}
.tw-nav-drawer.open .tw-nav-drawer-panel { transform: translateX(0); }
.tw-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line, #e6e8ec);
}
.tw-nav-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #1c2433);
}
.tw-nav-drawer-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text, #1c2433);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}
.tw-nav-drawer-close:hover { background: var(--color-soft, #f1f5f9); }
.tw-nav-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.tw-drawer-item {
  padding: 14px 22px;
  font-size: 15px;
  color: var(--color-text, #1c2433);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tw-drawer-item:hover {
  background: var(--color-soft, #f1f5f9);
  color: var(--color-primary, #1f4e8c);
}
.tw-drawer-item.active {
  border-left-color: var(--color-primary, #1f4e8c);
  color: var(--color-primary, #1f4e8c);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary, #1f4e8c) 8%, transparent);
}

/* compatibilidad: clase antigua usada en otras partes del CSS */
.tw-header-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}
.tw-header-actions button,
.tw-header-actions a {
  background: transparent;
  border: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), color var(--transition);
}
.tw-header-actions button:hover,
.tw-header-actions a:hover {
  background: var(--color-soft);
  color: var(--color-primary);
  text-decoration: none;
}

.tw-cart-badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  margin-left: 4px;
  min-width: 18px;
  display: inline-flex;
  justify-content: center;
}

/* nav de categorías */
/* 2026-06-01 (Martín): nav estilo barra horizontal azul oscuro full-width,
   items en mayúsculas centrados con espaciado generoso (referencia screenshot
   del user). */
.tw-nav {
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  /* Ancla los paneles de megamenu: los paneles usan position:absolute left:0 right:0
     relativo a este ancestro full-width, no al wrap angosto del trigger. */
  position: relative;
}

.tw-nav-item { color: var(--color-nav-text); opacity: 1; }
.tw-nav-item:hover { opacity: .85; }
.tw-nav-item.active { border-bottom-color: var(--color-accent); opacity: 1; }

.tw-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;        /* CENTRADO — referencia screenshot */
  gap: 0;
  /* Sin overflow aquí: el panel absoluto debe poder escapar hacia abajo sin recorte */
  min-height: 52px;
}

/* Contenedor de las flechas + tira scrolleable */
.tw-nav-strip-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  /* Sin position:relative: los paneles absolutos deben subir hasta .tw-nav */
}

/* Botones de flecha ‹ › */
.tw-nav-arrow {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-nav-text, rgba(255,255,255,.85));
  font-size: 18px;
  line-height: 1;
  padding: 8px 6px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s ease, color .15s ease;
  user-select: none;
  /* Oculto por defecto; JS lo muestra cuando hay overflow */
  display: none;
}
.tw-nav-arrow:hover { opacity: 1; color: #fff; }
.tw-nav-arrow:disabled { opacity: .25; cursor: default; }
.tw-nav-arrow.is-visible { display: flex; align-items: center; }

/* Tira de triggers scrolleable (overflow interno, sin scrollbar visible) */
.tw-nav-strip {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  /* overflow-x:clip recorta en X sin crear containing-block para absolutos,
     permitiendo que los paneles escapen hacia abajo relativo a .tw-nav */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Centrar contenido cuando no hay overflow */
  justify-content: center;
}
/* 2026-06-11: las flechas mueven este wrapper con translateX (clip no es
   scrolleable). Con overflow alineamos al inicio para que el translate funcione. */
.tw-nav-strip.is-scrolling { justify-content: flex-start; }
.tw-nav-strip-inner {
  display: flex;
  align-items: center;
  gap: 0;
  transition: transform .25s ease;
}

.tw-nav-item {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 16px 4px;               /* sin padding lateral, el gap lo da .tw-nav-inner */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;       /* MAYÚSCULAS */
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: opacity var(--transition);
  text-decoration: none;
}

.tw-nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}

.tw-nav-item:hover { color: #fff; }
.tw-nav-item:hover::after { transform: scaleX(1); }
.tw-nav-item.active { color: #fff; opacity: 1; border-bottom-color: transparent; }
.tw-nav-item.active::after { transform: scaleX(1); }

/* ---------------- Banner promo ---------------- */

.tw-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 14px 20px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .3px;
}

.tw-banner strong {
  color: var(--color-accent);
  font-size: 14px;
  margin-right: 6px;
}

/* ---------------- Layout / contenedor ---------------- */

.tw-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* 2026-06-04: variante full-width del contenedor (pedido Martín para la pantalla
   de catálogo). Rompe el tope de 1200px y usa todo el ancho con un gutter lateral
   responsivo. El grid de productos (.tw-grid auto-fill) suma columnas solo. */
.tw-container--full {
  max-width: none;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* 2026-06-02: full-bleed in-flow — bloque rompe el ancho del container
   permaneciendo en el orden del documento. body ya tiene overflow-x:hidden
   así que no genera scroll horizontal. */
.tw-fullbleed-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* F2 (2026-06-04): bloque de contenido marcado "ancho completo". El wrap de
   arriba lo lleva a 100vw (pierde el padding del .tw-container); este gutter le
   devuelve un margen lateral responsivo para que el contenido no toque los
   bordes de la pantalla, manteniéndose igualmente full-width.
   2026-06-10: padding SÓLO lateral. El vertical (24px arriba+abajo) se sumaba al
   margin-bottom:56px de cada .tw-section → 104px de franja blanca entre bloques
   ancho-completo. El ritmo vertical lo maneja el margin de la sección. */
.tw-fullbleed-gutter {
  padding: 0 clamp(16px, 4vw, 48px);
}

.tw-section {
  margin-bottom: 56px;
}

.tw-section-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}

.tw-section-title > span:first-child {
  position: relative;
  padding-bottom: 6px;
}

.tw-section-title > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.tw-section-title a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.tw-section-title a:hover { gap: 8px; text-decoration: none; }

/* Alineación + mayúsculas de los títulos de bloques (config global, 2026-06-04). */
.tw-titulos-center .tw-section-title { justify-content: center; text-align: center; }
.tw-titulos-center .tw-section-title > span:first-child::after { left: 50%; transform: translateX(-50%); }
.tw-titulos-right .tw-section-title { justify-content: flex-end; text-align: right; }
.tw-titulos-right .tw-section-title > span:first-child::after { left: auto; right: 0; }
.tw-titulos-mayus .tw-section-title { text-transform: uppercase; }

/* ---------------- Grid de productos ---------------- */

.tw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}

/* Cuadrícula con columnas fijas (grid_productos layout="grid"): el admin
   define columnas por fila vía --grid-cols. minmax(0,1fr) evita overflow. */
.tw-grid-fixed {
  grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr));
}

/* Carrusel de productos (grid_productos layout="carrusel"): una fila con
   scroll horizontal. Reusa el patrón de .tw-coleccion-tags-carousel. */
.tw-grid-carousel-wrap { position: relative; }
.tw-grid-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, .96);
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  transition: background .15s, opacity .15s;
}
.tw-grid-carousel-arrow:hover { background: var(--color-bg-soft, #f3f4f6); }
.tw-grid-carousel-arrow.prev { left: -6px; }
.tw-grid-carousel-arrow.next { right: -6px; }
.tw-grid-carousel-arrow[hidden] { display: none; }
@media (max-width: 768px) {
  /* 2026-06-07 (Martín): en mobile las flechas del carrusel van con fondo
     TRANSPARENTE (sin recuadro/sombra) para no tapar las imágenes; el chevron
     queda legible con un text-shadow suave. */
  .tw-grid-carousel-arrow {
    width: 32px; height: 32px; font-size: 22px;
    background: transparent;
    border: none;
    box-shadow: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  }
  .tw-grid-carousel-arrow:hover { background: transparent; }
  .tw-grid-carousel-arrow.prev { left: 0; }
  .tw-grid-carousel-arrow.next { right: 0; }
}
.tw-grid-carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px 8px;
  /* Auto-scroll por JS (wireGridCarousels): se mueve solo y, al acercar el
     mouse a un costado, corre en esa dirección. Ocultamos la barra de scroll. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tw-grid-carousel::-webkit-scrollbar { display: none; }
.tw-grid-carousel-track {
  display: flex;
  gap: 22px;
  width: max-content;
}
.tw-grid-carousel-track > .tw-card,
.tw-grid-carousel-track > .tw-product-card {
  width: 230px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* ---- Bloque "Texto + Producto destacado" (texto_producto, 2026-06-05) ----
   Panel de texto editable (admin) a la izquierda + tarjeta de producto con
   flechas/autoplay a la derecha. Las cards se apilan absolutas y solo la
   .tw-sp-card--active es visible (fade). Layout horizontal en la card. */
.tw-sp-section { }
.tw-sp-inner {
  display: flex;
  align-items: stretch;
  gap: 28px;
}
.tw-sp-textright .tw-sp-inner { flex-direction: row-reverse; }
.tw-sp-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.tw-sp-title { font-weight: 800; line-height: 1.15; }
.tw-sp-body { line-height: 1.55; }
.tw-sp-product {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tw-sp-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 260px;
}
.tw-sp-card {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
}
.tw-sp-card--active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.tw-sp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 7px 8px;
  border-radius: 8px;
}
.tw-sp-img {
  flex: 0 0 200px;
  width: 200px;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  background: var(--color-bg-soft, #f3f4f6);
}
.tw-sp-img img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.tw-sp-img-ph {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #eef1f6, #e2e8f0);
}
.tw-sp-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.tw-sp-brand {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft, #6b7280);
}
.tw-sp-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.25;
}
.tw-sp-name:hover { color: var(--color-primary, #2563eb); }
.tw-sp-old {
  font-size: 15px;
  color: var(--color-text-soft, #9ca3af);
  text-decoration: line-through;
}
.tw-sp-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}
.tw-sp-price-login {
  font-size: 15px;
  color: var(--color-text-soft, #6b7280);
}
.tw-sp-add {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.tw-sp-add:hover { filter: brightness(1.07); }
.tw-sp-add:disabled { background: #cbd5e1; cursor: not-allowed; }
.tw-sp-arrow {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, .96);
  color: var(--color-text);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  transition: background .15s;
}
.tw-sp-arrow:hover { background: var(--color-bg-soft, #f3f4f6); }
.tw-sp-arrow[hidden] { display: none; }
@media (max-width: 768px) {
  .tw-sp-inner, .tw-sp-textright .tw-sp-inner {
    flex-direction: column;
    gap: 18px;
  }
  .tw-sp-text { text-align: center; }
  .tw-sp-card { flex-direction: column; align-items: center; text-align: center; }
  .tw-sp-img { flex-basis: auto; width: 100%; min-height: 180px; }
  .tw-sp-info { align-items: center; }
  .tw-sp-add { align-self: center; }
  /* 2026-06-07 (Martín): el stage ya no fija un alto rígido (420px se quedaba corto
     y la card se desbordaba PISANDO el banner de abajo). La card ACTIVA pasa a estar
     en flujo (position:relative) y define el alto del stage; las inactivas siguen
     absolutas/ocultas superpuestas. Así nunca se solapa con el bloque siguiente. */
  .tw-sp-stage { min-height: 0; }
  .tw-sp-card--active { position: relative; inset: auto; }
  .tw-sp-arrow { width: 34px; height: 34px; font-size: 21px; }
}

/* ---- Card de producto — rediseño 2026-06-02 (referencia Martín) ---- */
.tw-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-card);
}

.tw-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: transparent;
}

/* #19 (2026-06-04) — Estilo de tarjeta SIN MARCO (minimalista, ref Ganga).
   Global vía body.tw-cards-sin-marco. Foto sin recuadro/sombra/borde; la
   imagen ocupa hasta el borde; texto limpio; el favorito flota sobre la foto.
   Al hover, leve elevación de la imagen (no de toda la card). */
body.tw-cards-sin-marco .tw-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.tw-cards-sin-marco .tw-card:hover {
  box-shadow: none;
  transform: none;
}
body.tw-cards-sin-marco .tw-card-img {
  border-radius: var(--radius);
  background: #f6f7f9;
  transition: box-shadow var(--transition), transform var(--transition);
}
body.tw-cards-sin-marco .tw-card:hover .tw-card-img {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
body.tw-cards-sin-marco .tw-card-img img {
  padding: 8px;
}
body.tw-cards-sin-marco .tw-card-body {
  padding: 10px 4px 4px;
}

.tw-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fafbfc;
  overflow: hidden;
}

.tw-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
}

.tw-card:hover .tw-card-img img {
  transform: scale(1.06);
}

.tw-card-img.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8cdd4;
  font-size: 44px;
  background: linear-gradient(135deg, #fafbfc 0%, #f1f3f5 100%);
}

.tw-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;  /* centra contenido horizontalmente */
  text-align: center;
}

/* Marca del producto — chica, semibold, acento */
.tw-card-marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-card-accent);
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Nombre / título — centrado, hasta 2 líneas */
.tw-card-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05px;
  color: var(--color-text);
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

/* Área de precios — centrada */
.tw-card-prices {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

/* Precio principal — grande, bold, color acento */
.tw-card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-card-accent);
  letter-spacing: -.4px;
}

.tw-card-price-old {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: line-through;
}

.tw-card-price-login {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-card-accent);
}

/* Precio sin impuestos nacionales (Ley 27.743) */
.tw-precio-sin-impuestos {
  font-size: 10.5px;
  color: var(--color-muted);
  margin-top: 4px;
  line-height: 1.3;
  width: 100%;
}

.tw-card-stock {
  font-size: 11px;
  margin-top: 6px;
  color: var(--color-muted);
  font-weight: 500;
}

.tw-card-stock.poco { color: var(--color-warning); font-weight: 600; }
.tw-card-stock.agotado { color: var(--color-danger); font-weight: 600; }

/* Botón Agregar — outlined, full-width, redondeado, color acento */
.tw-card-btn-agregar {
  display: flex; /* misma altura exacta que .tw-card-stepper (36px) → sin shift al togglear */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  margin-top: auto; /* empuja el botón al fondo: alinea entre cards de la misma fila */
  padding: 0 12px;
  border: 1.5px solid #111111;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .18s;
  text-align: center;
}
.tw-card-btn-agregar:hover:not(:disabled) {
  filter: brightness(1.25);
}
.tw-card-btn-agregar:disabled {
  opacity: .45;
  cursor: default;
}

/* #61 — Stepper inline en card (producto base ya en carrito) */
.tw-card-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: auto; /* alinea con el botón Agregar al fondo de la card */
  border: 1.5px solid var(--color-card-accent);
  border-radius: 999px;
  overflow: hidden;
  height: 36px;
}
.tw-card-stepper-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--color-card-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.tw-card-stepper-btn:hover {
  background: var(--color-card-accent);
  color: #fff;
}
.tw-card-stepper-qty {
  flex: 1 1 auto;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-card-accent);
  min-width: 28px;
  pointer-events: none;
  user-select: none;
}

/* Quick Buy: panel inline sobre la card */
.tw-card.is-quick { transform: none; box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); }
.tw-card.is-quick:hover .tw-card-img img { transform: none; }

/* El panel cubre solo la zona de info (debajo de la imagen): la foto
   sigue visible cuando el quick-buy está abierto. */
.tw-quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 4;
  animation: tw-quick-in .14s ease-out;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
  cursor: pointer;
}
/* Los controles internos mantienen su propio cursor (no "pointer de navegar"). */
.tw-quick .tw-qty,
.tw-quick .tw-quick-row { cursor: default; }

.tw-quick[hidden] { display: none; }

@keyframes tw-quick-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tw-quick-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
.tw-quick-close:hover { color: var(--color-text); }

.tw-quick-name {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
}

.tw-quick-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.tw-quick-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.tw-quick-row .tw-qty { display: flex; width: 100%; }
.tw-quick-row .tw-qty input { flex: 1 1 auto; width: auto; }

.tw-quick-add { padding: 9px 12px; font-size: 12.5px; }

.tw-quick-detail {
  font-size: 12px;
  color: var(--color-primary);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  margin-top: 2px;
}
.tw-quick-detail:hover { text-decoration: underline; }

/* badges */
.tw-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1;
}

.tw-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}

.tw-badge.envio { background: var(--color-success); color: #fff; }
.tw-badge.oferta { background: var(--color-danger); color: #fff; }
.tw-badge.nuevo { background: var(--color-primary); color: #fff; }
.tw-badge.poco { background: var(--color-warning); color: #fff; }
.tw-badge.agotado { background: #6b7280; color: #fff; }

/* ---------------- Login ---------------- */

.tw-login-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: var(--color-soft);
}

.tw-login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--color-line);
}

.tw-login-card h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  text-align: center;
}

.tw-login-card .sub {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 22px;
  font-size: 13px;
}

.tw-form-row {
  margin-bottom: 14px;
}

.tw-form-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.tw-form-row input,
.tw-form-row textarea,
.tw-form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.tw-form-row input:focus,
.tw-form-row textarea:focus,
.tw-form-row select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.tw-form-row textarea {
  resize: vertical;
  min-height: 100px;
}

/* 2026-06-09 (Martín): "en TODOS los contenedores de la tienda mobile donde se
   pueda escribir, que no se agrande la web". iOS Safari hace auto-zoom al enfocar
   cualquier input/textarea/select con font-size < 16px. Regla GLOBAL mobile que
   fuerza 16px en todo campo de texto (buscador, checkout, login, registro
   mayorista, newsletter del popup, cupón, filtros, cantidad, etc.). Se excluyen
   los controles que NO son de texto (checkbox/radio/range/color/file) porque 16px
   no aplica y distorsionaría su tamaño. Desktop conserva sus tamaños propios. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  textarea,
  select {
    /* !important: hay reglas más específicas (.tw-form-row textarea, .tw-search--pill
       input, etc.) que ponen 14px y le ganan a este selector global por especificidad
       (las media queries NO suman especificidad). Sin !important, "Observaciones" de
       "Tus datos y pago" seguía en 14px → seguía haciendo zoom en iOS. */
    font-size: 16px !important;
  }
}

.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.tw-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.tw-btn:active { transform: translateY(0); }
.tw-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.tw-btn.full { width: 100%; }

.tw-btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: none;
}
.tw-btn-secondary:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.tw-btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-line);
  box-shadow: none;
}
.tw-btn-ghost:hover {
  background: var(--color-soft);
  border-color: var(--color-text);
  box-shadow: none;
}

.tw-btn-danger {
  background: var(--color-danger);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-danger) 25%, transparent);
}
.tw-btn-danger:hover {
  background: #a82a1f;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.tw-msg {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
}
.tw-msg.error { background: #fdecea; color: var(--color-danger); }
.tw-msg.info { background: #eef4fb; color: var(--color-primary-dark); }
.tw-msg.success { background: #e8f5ea; color: var(--color-success); }

/* ---------------- Catálogo (lista filtrable) ---------------- */

.tw-catalog {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

.tw-filters {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 20px;
  height: max-content;
  position: sticky;
  top: 120px;
  box-shadow: var(--shadow-card);
}

.tw-filters h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  margin: 0 0 12px;
  font-weight: 700;
}

.tw-filter-group { margin-bottom: 18px; }

.tw-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  /* 2026-06-04 fix: overflow-y:auto silently sets overflow-x:auto too.
     The margin:0 -10px on each li then gets clipped by the scroll container,
     cutting the first character on the left. Force overflow-x visible so the
     negative-margin bleed is never clipped. */
  overflow-x: visible;
}

.tw-filter-list li {
  padding: 7px 10px;
  margin: 0 -10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}

.tw-filter-list li.active {
  color: var(--color-primary);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.tw-filter-list li:hover {
  color: var(--color-primary);
  background: var(--color-soft);
}

.tw-filter-list .count {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 400;
}

.tw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-muted);
}

/* ---------------- Detalle de producto ---------------- */

.tw-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
}

.tw-detail-gallery {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tw-detail-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
}

.tw-detail-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-line);
  overflow-x: auto;
}

.tw-detail-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 2px solid var(--color-line);
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  background: #fff;
}

.tw-detail-thumbs img.active { border-color: var(--color-primary); }

.tw-detail-info h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 0 0 8px;
  line-height: 1.2;
}

.tw-detail-codigo {
  color: var(--color-muted);
  font-size: 12px;
  margin-bottom: 16px;
}

.tw-detail-price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--color-text);
  margin: 18px 0;
}

.tw-detail-price-old {
  font-size: 16px;
  color: var(--color-muted);
  text-decoration: line-through;
  margin-left: 10px;
  font-weight: 400;
}

.tw-detail-stock {
  font-size: 13px;
  margin-bottom: 18px;
}

.tw-detail-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0;
}

.tw-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
}

.tw-qty button {
  background: transparent;
  border: 0;
  width: 40px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}
.tw-qty button:hover { background: var(--color-soft); color: var(--color-primary); }

.tw-qty input {
  width: 56px;
  height: 44px;
  text-align: center;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  outline: none;
}

.tw-detail-desc {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---------------- PDP rediseño FULL (F3 2026-06-02) ---------------- */
/* Layout premium coherente con la card rediseñada (commit 8c21c55):
   usa --color-card-accent para acentos (precio, botón AGREGAR, OFF). */

.tw-pdp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 20px;
}
.tw-pdp-breadcrumb a { color: var(--color-muted); transition: color var(--transition); }
.tw-pdp-breadcrumb a:hover { color: var(--color-card-accent); }
.tw-pdp-bc-sep { color: var(--color-line); }
.tw-pdp-bc-current { color: var(--color-text); font-weight: 600; }

/* Galería: thumbnails verticales a la izquierda + imagen grande a la derecha. */
.tw-pdp-gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  align-items: start;
}
.tw-pdp-thumbs {
  flex-direction: column;
  padding: 0;
  border-top: 0;
  gap: 10px;
  overflow-y: auto;
  max-height: 520px;
}
.tw-pdp-thumbs img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  transition: border-color var(--transition), transform var(--transition);
}
.tw-pdp-thumbs img:hover { transform: translateY(-1px); }
.tw-pdp-thumbs img.active { border-color: var(--color-card-accent); }
.tw-pdp-img {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
}
/* #66 — Producto con 1 sola foto: sin columna de thumbs, imagen a ancho completo */
.tw-pdp-gallery--single {
  grid-template-columns: 1fr;
}

.tw-pdp-off {
  display: inline-block;
  margin-bottom: 10px;
}

.tw-pdp-price {
  font-size: 42px;
  color: var(--color-card-accent);
  margin: 14px 0 4px;
}
.tw-pdp-sin-imp {
  font-size: 12.5px;
  color: var(--color-muted);
  margin-bottom: 14px;
}

.tw-pdp-urgencia {
  display: inline-block;
  background: #fff4ed;
  color: #c2410c;
  border: 1px solid #fdba74;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Botón AGREGAR prominente, en color de acento. */
.tw-btn.tw-pdp-add {
  flex: 1;
  background: var(--color-card-accent);
  border-color: var(--color-card-accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 13px 20px;
}
.tw-btn.tw-pdp-add:hover {
  background: var(--color-card-accent-dark);
  border-color: var(--color-card-accent-dark);
}

/* Contenedores de bloques nuevos (rellenados por F4/F5). */
.tw-pdp-precios,
.tw-pdp-promos,
.tw-pdp-cotizador,
.tw-pdp-trust { margin-top: 18px; }
.tw-pdp-precios:empty,
.tw-pdp-promos:empty,
.tw-pdp-cotizador:empty,
.tw-pdp-trust:empty { margin-top: 0; }

/* F4 — Precio discriminado por método de pago. */
.tw-pdp-precios-box,
.tw-pdp-promos-box {
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.tw-pdp-precios-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.tw-pdp-metodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-line);
}
.tw-pdp-metodo:last-of-type { border-bottom: 0; }
.tw-pdp-metodo-label { font-size: 13.5px; color: var(--color-text); }
.tw-pdp-metodo-off {
  display: inline-block;
  background: var(--color-pdp-metodo, var(--color-card-accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  margin-left: 4px;
}
.tw-pdp-metodo-monto {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-pdp-metodo, var(--color-card-accent));
  white-space: nowrap;
}
.tw-pdp-precios-nota {
  font-size: 11.5px;
  color: var(--color-muted);
  margin: 10px 0 0;
  line-height: 1.45;
}

/* F4 — Carrusel de promos por medio de pago. */
.tw-pdp-promos-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.tw-pdp-promo-card {
  position: relative;
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  scroll-snap-align: start;
}
.tw-pdp-promo-card.destacada {
  border-color: var(--color-card-accent);
  box-shadow: 0 0 0 1px var(--color-card-accent) inset;
}
.tw-pdp-promo-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--color-card-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}
.tw-pdp-promo-logo {
  height: 30px;
  max-width: 56px;
  object-fit: contain;
}
.tw-pdp-promo-pct {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-card-accent);
  min-width: 42px;
  text-align: center;
}
.tw-pdp-promo-txt strong { display: block; font-size: 12.5px; line-height: 1.25; }
.tw-pdp-promo-txt small { display: block; font-size: 11px; color: var(--color-muted); margin-top: 2px; }

/* F5 — Cotizador de envío en la ficha. */
.tw-pdp-cotizador-box {
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.tw-pdp-cotizador-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tw-pdp-cp-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 14px;
  background: #fff;
  outline: none;
}
.tw-pdp-cp-input:focus { border-color: var(--color-card-accent); }
.tw-pdp-cp-btn { white-space: nowrap; }
.tw-pdp-cp-result { margin-top: 10px; font-size: 13.5px; }
.tw-pdp-cp-ok {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tw-pdp-cp-zona { color: var(--color-muted); }
.tw-pdp-cp-costo { font-size: 17px; font-weight: 800; color: var(--color-card-accent); }
.tw-pdp-cp-plazo { color: var(--color-text); }
.tw-pdp-cp-extras {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.tw-pdp-cp-extra { font-size: 12.5px; color: var(--color-text); }

/* F5 — Trust items. */
.tw-pdp-trust-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.tw-pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text);
}
.tw-pdp-trust-ic { font-size: 18px; }

/* ---------------- Carrito ---------------- */

.tw-cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}
/* 2026-06-07 (Martín): los items de un grid tienen min-width:auto por defecto,
   así que un contenido que no se encoge (p. ej. las tarjetas de pago del paso 2
   "Datos y pago") ensancha la columna 1fr más allá de su track y descoloca el
   resumen — el paso 1 "Pedido", con contenido que sí encoge, queda en su medida.
   Forzando min-width:0 en ambas columnas, los dos pasos respetan exactamente las
   mismas dimensiones (1fr | 320px) sin importar el contenido. */
.tw-cart-layout > * { min-width: 0; }

.tw-cart-table {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tw-cart-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: 14px;
  padding: 14px;
  align-items: center;
  border-bottom: 1px solid var(--color-line);
}

.tw-cart-row:last-child { border-bottom: 0; }

.tw-cart-row img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: var(--color-soft);
  border-radius: 6px;
  padding: 4px;
}

.tw-cart-row .name {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}

.tw-cart-summary {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 22px;
  height: max-content;
  position: sticky;
  top: 120px;
  box-shadow: var(--shadow-card);
}

.tw-cart-summary h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.tw-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
/* El importe (último span) nunca se parte ni se separa en otro renglón. */
.tw-summary-row > span:last-child { white-space: nowrap; flex-shrink: 0; }

.tw-summary-total {
  border-top: 2px solid var(--color-line);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 18px;
  font-weight: 700;
}

/* ---------------- Checkout 2 pasos (2026-06-06) ---------------- */

.tw-checkout-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #9aa0a6;
}
.tw-checkout-step.active { color: #111111; }
.tw-checkout-step.done { color: var(--color-primary); }
.tw-checkout-step-sep { color: #c4c8cc; }

.tw-confirm-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
}
/* Stepper de cantidad compacto en "Confirmá tu pedido" (2026-06-11). Reusa los
   handlers del carrito (data-cart-*-idx) → topea al stock_max del ítem. */
.tw-qty.tw-qty-sm { border-width: 1px; }
.tw-qty.tw-qty-sm button { width: 28px; height: 30px; font-size: 15px; }
.tw-qty.tw-qty-sm input { width: 38px; height: 30px; font-size: 13px; }
.tw-qty button:disabled { opacity: .35; cursor: not-allowed; }
.tw-qty button:disabled:hover { background: transparent; color: inherit; }
@media (max-width: 560px) {
  .tw-confirm-item { gap: 8px; grid-template-columns: 52px 1fr auto auto auto; }
  .tw-confirm-item-img { width: 48px; height: 48px; }
  .tw-qty.tw-qty-sm button { width: 26px; }
  .tw-qty.tw-qty-sm input { width: 30px; }
}
.tw-confirm-item:last-child { border-bottom: 0; }
.tw-confirm-item-remove {
  background: transparent;
  border: 0;
  color: var(--color-danger, #c0392b);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s;
}
.tw-confirm-item-remove:hover { background: rgba(192, 57, 43, .1); }
.tw-confirm-item-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: var(--color-soft);
  border-radius: 6px;
  padding: 4px;
}
.tw-confirm-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tw-confirm-item-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}
.tw-confirm-item-unit { font-size: 12px; color: #6b7280; }
.tw-confirm-item-total { font-weight: 700; font-size: 14px; white-space: nowrap; }

.tw-confirm-recos .tw-section-title { justify-content: center; text-align: center; }

/* Resumen "Tu pedido" compacto: lista con scroll cuando hay muchos ítems, para
   que el sticky no se estire (2026-06-06 Martín). */
.tw-summary-count {
  font-size: 11px;
  font-weight: 600;
  color: #9aa0a6;
  margin-left: 6px;
}
.tw-summary-items {
  max-height: 196px;
  overflow-y: auto;
  margin: 0 -4px 6px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-line);
}
.tw-summary-row.tw-summary-item {
  padding: 4px 0;
  gap: 10px;
  align-items: baseline;
}
.tw-summary-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tw-summary-item-qty { color: #6b7280; font-weight: 600; margin-right: 2px; }

/* Datos de envío a domicilio: grilla de 2 columnas (CP/localidad/prov/país). */
.tw-envio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .tw-envio-grid { grid-template-columns: 1fr; }
}
/* Observaciones: un poco más angosta (2026-06-06 Martín). */
.tw-checkout-obs-row textarea { min-height: 64px; }

/* ---------------- Pedidos ---------------- */

.tw-orders {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tw-order-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
}

.tw-order-row:last-child { border-bottom: 0; }

.tw-order-numero { font-weight: 700; color: var(--color-primary); }

.tw-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.tw-pill.pendiente { background: #fff4e0; color: var(--color-warning); }
.tw-pill.aprobado, .tw-pill.confirmado { background: #e8f5ea; color: var(--color-success); }
.tw-pill.rechazado, .tw-pill.cancelado { background: #fdecea; color: var(--color-danger); }

/* ---------------- Footer ---------------- */

.tw-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 36px 20px 18px;
  margin-top: 60px;
}

.tw-footer a { color: var(--color-footer-text); }
.tw-footer-bottom { color: var(--color-footer-text); opacity: .7; }
.tw-footer h4 { color: var(--color-footer-text); }
.tw-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.tw-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-footer-text);
  opacity: .85;
  width: fit-content;
}
.tw-social-link:hover { opacity: 1; text-decoration: none; }
.tw-social-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tw-social-ico svg { width: 18px; height: 18px; display: block; }
.tw-social-link:hover .tw-social-ico { background: rgba(255,255,255,.20); }
.tw-social-handle { font-size: 14px; word-break: break-all; }

/* Hero principal del home (carrusel) */
.tw-hero {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: var(--color-soft);
  overflow: hidden;
  color: #fff;
}
.tw-hero-slides {
  position: absolute;
  inset: 0;
}
.tw-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.tw-hero-slide.active { opacity: 1; }
/* 2026-06-01 (Martín): videos en el hero — cubren todo el ancho/alto del
   slide con object-fit:cover. autoplay+muted+loop+playsinline obligatorios
   para que se reproduzcan automáticamente en iOS Safari (sin user gesture). */
.tw-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* 2026-06-03 fix mobile (Martín): cuando el browser bloquea el autoplay
   (Modo Bajo Consumo / Ahorro de datos en mobile) el JS agrega .tw-video-fallback
   y muestra los controles nativos. Hay que re-habilitar pointer-events (el hero
   los tiene en none) y subir el z-index para que el play sea tocable. */
.tw-video-fallback {
  pointer-events: auto !important;
  z-index: 4;
}
.tw-hero-slide.has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.32);
}
.tw-hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 40px 20px;
  pointer-events: none;
}
.tw-hero-inner > div { pointer-events: auto; max-width: 820px; }
.tw-hero h1 {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  line-height: 1.15;
}
.tw-hero p {
  font-size: 18px;
  margin: 0 0 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  line-height: 1.5;
}
.tw-hero .tw-btn {
  background: var(--color-accent);
  color: #1c2433;
  font-size: 15px;
  padding: 14px 34px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(245, 166, 35, .35);
}
.tw-hero .tw-btn:hover {
  filter: brightness(1.05);
}
/* 2026-06-01 (Martín): hero responsive mobile.
   El inline style del HTML setea height en px (alto desktop). En mobile lo
   capamos a 55vh para que no domine toda la pantalla. Tipografía + botón
   también se achican proporcionalmente. */
@media (max-width: 768px) {
  .tw-hero {
    height: clamp(260px, 55vh, 480px) !important;
  }
  .tw-hero h1 { font-size: 28px; margin-bottom: 8px; }
  .tw-hero p { font-size: 14px; margin-bottom: 14px; }
  .tw-hero .tw-btn { font-size: 13px; padding: 10px 22px; }
  .tw-hero-inner { padding: 16px; }
  .tw-hero-arrow { width: 36px; height: 36px; font-size: 18px; }
  .tw-hero-arrow.prev { left: 8px; }
  .tw-hero-arrow.next { right: 8px; }
}

/* Flechas */
.tw-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.tw-hero-arrow:hover { background: rgba(0,0,0,.65); }
.tw-hero-arrow.prev { left: 18px; }
.tw-hero-arrow.next { right: 18px; }

/* Dots */
.tw-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.tw-hero-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.tw-hero-dot.active { background: #fff; transform: scale(1.25); }
.tw-hero-dot:hover { background: rgba(255,255,255,.85); }

/* Hero sin imagen — usa el color primario */
.tw-hero.no-image {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

@media (max-width: 900px) {
  /* 2026-06-04 (Martín): subido de 420→480px en tablets para que el banner
     no quede "muy chico". El alto desktop lo maneja alto_px configurable. */
  .tw-hero { height: 480px !important; }
  .tw-hero h1 { font-size: 30px; }
  .tw-hero p { font-size: 15px; }
}
@media (max-width: 600px) {
  /* 2026-06-04 (Martín): subido de 280→360px en mobile angosto. */
  .tw-hero { height: 360px !important; }
  .tw-hero h1 { font-size: 22px; margin-bottom: 8px; }
  .tw-hero p { font-size: 13px; margin-bottom: 14px; }
  .tw-hero .tw-btn { padding: 10px 18px; font-size: 13px; }
  .tw-hero-arrow { width: 36px; height: 36px; font-size: 18px; }
}

/* 2026-06-03 fix mobile (Martín): "acomodarse al ancho". En mobile la altura
   fija recortaba los lados del banner (background-size:cover). Cuando JS detecta
   el aspect ratio de la imagen, setea --tw-hero-mobile-h = ancho/aspect y la
   altura sigue la imagen → se ve el banner COMPLETO a todo el ancho, sin recorte.
   Mayor especificidad (.tw-hero.tw-hero-fit-mobile) para ganarle a los height
   !important de arriba. Slides en contain por si el aspect difiere entre slides. */
@media (max-width: 768px) {
  .tw-hero.tw-hero-fit-mobile {
    height: var(--tw-hero-mobile-h, clamp(260px, 55vh, 480px)) !important;
  }
  .tw-hero.tw-hero-fit-mobile .tw-hero-slide {
    background-size: contain;
    /* 2026-06-07 (Martín): fondo gris claro detrás del banner en mobile (el banner
       se ve COMPLETO/sin recortar; el gris ocupa lo que sobra a los lados). */
    background-color: #F0F0F0;
  }
  .tw-hero.tw-hero-fit-mobile .tw-hero-video {
    object-fit: contain;
    background: #000;
  }
  /* Alto mobile FIJO (selector del editor): la imagen llena todo el ancho y
     recorta vertical (cover), sin franjas grises a los lados al achicar el alto. */
  .tw-hero.tw-hero-fit-mobile.tw-hero-mob-manual .tw-hero-slide {
    background-size: cover;
    background-color: transparent;
  }
  .tw-hero.tw-hero-fit-mobile.tw-hero-mob-manual .tw-hero-video {
    object-fit: cover;
  }
  /* #29 mobile (Martín): si el hero tiene versiones mobile, los slides SIN
     versión mobile se ocultan en mobile (no aparecen en el carrusel). */
  .tw-hero.tw-hero-has-mob .tw-hero-slide--nomob,
  .tw-hero.tw-hero-has-mob .tw-hero-dot--nomob { display: none !important; }
  /* Si queda 1 solo slide elegible en mobile, sin flechas ni dots. */
  .tw-hero.tw-hero-single-mob .tw-hero-arrow,
  .tw-hero.tw-hero-single-mob .tw-hero-dots { display: none !important; }
}

.tw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.tw-footer h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 10px;
}

.tw-footer a { color: #cbd5e1; }
.tw-footer a:hover { color: #fff; }

.tw-footer-bottom {
  max-width: 1200px;
  margin: 24px auto 0;
  border-top: 1px solid #2d3a4f;
  padding-top: 14px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
}

.tw-whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.tw-whatsapp-fab:hover { text-decoration: none; }

/* ---------------- Estados / utilidades ---------------- */

.tw-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-muted);
}

.tw-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: .4;
}

.tw-loader {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-muted);
}

.text-muted { color: var(--color-muted); }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .tw-catalog { grid-template-columns: 1fr; }
  /* 2026-06-07 (Martín): en mobile el panel lateral Categorías/Marcas no se
     muestra (ocupaba toda la pantalla antes de los productos). Las categorías
     se navegan desde el menú hamburguesa. Desktop sigue mostrando filtros. */
  .tw-filters { display: none; }
  /* #29 (2026-06-04): hero con versión mobile. El slide expone --tw-hero-bg-m
     inline solo cuando se cargó una imagen mobile para ese slide; acá la
     aplicamos. Si no hay versión mobile, el slide no trae la var y conserva la
     imagen de desktop. */
  .tw-hero-slide[style*="--tw-hero-bg-m"] { background-image: var(--tw-hero-bg-m) !important; }
  .tw-detail { grid-template-columns: 1fr; }
  /* PDP mobile: galería en columna, thumbs horizontales bajo la imagen. */
  .tw-pdp-gallery { grid-template-columns: 1fr; }
  .tw-pdp-gallery .tw-pdp-thumbs {
    flex-direction: row;
    order: 2;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }
  .tw-pdp-gallery .tw-pdp-img { order: 1; }
  .tw-cart-layout { grid-template-columns: 1fr; }
  .tw-cart-summary { position: static; }
  .tw-search { display: none; }
  .tw-cart-row { grid-template-columns: 60px 1fr auto; }
  .tw-cart-row .price-col { display: none; }
}

@media (max-width: 600px) {
  .tw-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* En mobile la cuadrícula fija respeta las columnas mobile del bloque. */
  .tw-grid-fixed { grid-template-columns: repeat(var(--grid-cols-mobile, 2), minmax(0, 1fr)); }

  /* "Mis pedidos" mobile (2026-06-07 Martín: "la cifra no se ve bien"). En
     desktop la fila es 4 columnas (info | estado | pago | total); en un celular
     esas 3 columnas auto + el total se aplastaban y el monto quedaba ilegible.
     Reorganizamos en 2 columnas con ubicación explícita: arriba número+fecha a
     la izquierda y el TOTAL prominente a la derecha; debajo las dos píldoras
     de estado. Así la cifra respira y nunca se corta. */
  .tw-order-row {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding: 14px;
  }
  .tw-order-row > div:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
  .tw-order-row > div:nth-child(4) {
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: start;
    font-size: 18px; white-space: nowrap;
  }
  .tw-order-row > div:nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  .tw-order-row > div:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: end; }
  .tw-order-numero { word-break: break-word; }

  /* 2026-06-07 (Martín, v2): en mobile el CARRUSEL horizontal se mantiene (swipe),
     pero mostrando exactamente 2 cards por pantalla — no grilla vertical. Cada card
     ocupa el 50% del ancho visible (menos medio gap). */
  /* SIN scroll-snap (2026-06-07 Martín v3): el auto-scroll del JS avanza de a
     sub-píxeles (0.22–1.1 px/frame); con scroll-snap el browser re-engancha cada
     micro-incremento al punto más cercano y el carrusel quedaba CLAVADO en mobile
     mientras en desktop (sin snap) giraba bien. Sin snap, el giro infinito corre
     idéntico a escritorio y el swipe manual sigue siendo libre. */
  .tw-grid-carousel { overflow-x: auto; scroll-snap-type: none; padding: 0 0 8px; }
  .tw-grid-carousel-track { display: flex; width: auto; gap: 14px; }
  .tw-grid-carousel-track > .tw-card,
  .tw-grid-carousel-track > .tw-product-card {
    flex: 0 0 calc(50% - 7px);
    width: auto;
    scroll-snap-align: none;
  }

  /* ── Card de producto: más grande, limpia, imagen prominente (ref tomy) ──
     Card blanca enmarcada (radius 12px + sombra suave) — forzamos el look también
     en modo "sin marco" para que el rediseño mobile sea consistente. */
  .tw-card,
  body.tw-cards-sin-marco .tw-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
    overflow: hidden;
  }
  /* Imagen grande arriba, fondo BLANCO (sin gris), ocupando todo el ancho */
  .tw-card-img,
  body.tw-cards-sin-marco .tw-card-img {
    background: #fff;
    border-radius: 0;
    aspect-ratio: 1 / 1;
  }
  .tw-card-img img,
  body.tw-cards-sin-marco .tw-card-img img { padding: 6px; }
  /* Sacar el corazón/favorito de la esquina en mobile */
  .tw-fav-heart { display: none !important; }
  /* Texto con padding interno generoso (≥12px a los lados) */
  .tw-card-body,
  body.tw-cards-sin-marco .tw-card-body { padding: 12px 12px 14px; align-items: stretch; text-align: left; }
  .tw-card-name { font-size: 13px; min-height: 34px; text-align: left; }
  .tw-card-marca { font-size: 10px; text-align: left; }
  .tw-card-prices { justify-content: flex-start; }
  /* Precio principal: NEGRO, bold y grande */
  .tw-card-price { font-size: 19px; font-weight: 800; color: #111111; }
  .tw-card-btn-agregar { font-size: 13px; height: 38px; padding: 0 12px; margin-top: auto; }
  .tw-card-stepper { height: 38px; margin-top: auto; }
  .tw-card-stepper-btn { flex: 0 0 38px; width: 38px; font-size: 17px; }
  .tw-card-stepper-qty { font-size: 14px; }
  .tw-precio-sin-impuestos { font-size: 9.5px; }
  .tw-banner { font-size: 14px; padding: 18px 14px; }
  .tw-banner strong { font-size: 18px; }
  .tw-detail-info h1 { font-size: 20px; }
  .tw-detail-price { font-size: 24px; }
}

/* ===== Tienda Pública v2 — bloques home (F2) ===================== */

.tw-marcas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* #63: grilla con cards de imagen */
.tw-marcas-grid--con-imagen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.tw-marca-pill {
  background: #fff;
  border: 1px solid var(--tw-border, #e6e8ec);
  color: var(--tw-text, #1c2433);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.tw-marca-pill:hover { background: #f6f7f9; }
.tw-marca-pill > span { color: #999; font-weight: 400; margin-left: 4px; }

/* #63: card de marca con imagen */
.tw-marca-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--tw-border, #e6e8ec);
  border-radius: 10px;
  padding: 14px 10px 10px;
  cursor: pointer;
  transition: box-shadow .18s, border-color .18s;
  font-size: 13px;
  font-weight: 500;
  color: var(--tw-text, #1c2433);
}
.tw-marca-card:hover { border-color: var(--tw-primary, #2563eb); box-shadow: 0 2px 8px rgba(37,99,235,.12); }
.tw-marca-card img {
  width: 80px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
}
.tw-marca-card-nombre { font-weight: 600; text-align: center; line-height: 1.3; }

/* #63: carrusel horizontal de marcas */
.tw-marcas-carrusel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.tw-marcas-carrusel > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Pills en carrusel — mismo ancho mínimo para que no colapsen */
.tw-marcas-carrusel .tw-marca-pill { min-width: 100px; }
/* Cards en carrusel — ancho fijo */
.tw-marcas-carrusel .tw-marca-card { min-width: 140px; max-width: 160px; }

.tw-cta-block {
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
}
.tw-cta-block h3 { margin: 0 0 8px; font-size: 22px; }
.tw-cta-block p { margin: 0 0 14px; opacity: .9; font-size: 15px; }
.tw-cta-block .tw-btn { background: #fff; color: #1c2433; }

.tw-banner-promo {
  padding: 12px 18px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

/* 2026-06-01 (fix): banner_promo modo imagen — stack vertical.
   Todos los banners se ven al mismo tiempo, apilados uno debajo del otro.
   Era un carousel auto-rotate donde solo 1 se veía a la vez.
   2026-06-02 (fix mobile): imágenes usan <img> (tw-bpi-image) en vez de
   background-image, así escalan con width:100%; height:auto sin cortes.
   Videos (tw-bpi-video) conservan altura fija (background-size:cover). */
.tw-banner-promo-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Evitar que hijos desborden el ancho del stack */
  overflow: hidden;
  /* 2026-06-10: el banner (imagen/video/YouTube) no es .tw-section, así que no
     tenía margen propio → el título del bloque siguiente (ej. "Productos" debajo
     del video) quedaba pegado. Mínimo respiro inferior, sin reintroducir la
     franja grande que se sacó del .tw-fullbleed-gutter. */
  margin-bottom: 32px;
}
.tw-banner-promo-item {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.tw-banner-promo-item + .tw-banner-promo-item {
  margin-top: 0;
}

/* — Modo imagen: <img> tag ocupa 100% del ancho, altura proporcional — */
.tw-bpi-image {
  /* Sin height explícito: la imagen dicta la altura vía aspect-ratio natural */
  line-height: 0; /* eliminar espacio inline debajo del <img> */
}
/* #29-banner: el <picture> (cuando hay versión mobile) es inline por defecto y
   su ancho colapsaría al contenido → el <img width:100%> no llenaría. Block 100%. */
.tw-bpi-image picture {
  display: block;
  width: 100%;
}
.tw-bpi-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* nunca cortar — escala completa */
}

/* — Modo video: altura fija necesaria (video sin dimensiones hasta que carga) — */
.tw-bpi-video {
  background-color: #000;
}
/* Capa transparente sobre el iframe de YouTube cuando el banner tiene link:
   intercepta el click (el iframe se traga los eventos y el <a> no navegaría). */
.tw-bpi-linkcover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
}
/* Videos dentro del item — cubren todo el área */
.tw-bps-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Ocultar el botón central de play/pausa que Chrome/Safari/iOS dibujan sobre
   el video decorativo del banner/hero. Solo cuando NO está en modo fallback
   (.tw-video-fallback, autoplay bloqueado) donde sí necesitamos el play tocable. */
.tw-bps-video:not(.tw-video-fallback)::-webkit-media-controls,
.tw-hero-video:not(.tw-video-fallback)::-webkit-media-controls,
.tw-bps-video:not(.tw-video-fallback)::-webkit-media-controls-overlay-play-button,
.tw-hero-video:not(.tw-video-fallback)::-webkit-media-controls-overlay-play-button,
.tw-bps-video:not(.tw-video-fallback)::-webkit-media-controls-start-playback-button,
.tw-hero-video:not(.tw-video-fallback)::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Mobile: limitar altura de videos para que no dominen toda la pantalla */
@media (max-width: 768px) {
  .tw-bpi-video {
    /* Capamos la altura inline a un máximo razonable en mobile */
    height: clamp(180px, 56vw, 420px) !important;
  }
  /* #29-banner alto-mobile: alto fijo de la imagen en mobile (selector del editor).
     La imagen llena el ancho y recorta vertical (cover), sin franjas a los lados. */
  .tw-banner-promo-stack.tw-bp-mob-fixed .tw-bpi-img {
    height: var(--tw-bp-mob-h, auto);
    object-fit: cover;
  }
}

.tw-galeria {
  display: grid;
  gap: 12px;
}
.tw-galeria-item {
  overflow: hidden;
  background-color: #f6f7f9;
  border-radius: 10px;
}
.tw-galeria-item--link {
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.tw-galeria-item--link .tw-galeria-img {
  transition: transform 0.3s ease;
}
.tw-galeria-item--link:hover .tw-galeria-img {
  transform: scale(1.04);
}
.tw-galeria-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grid uniforme — todas iguales, columnas auto-fill */
.tw-galeria-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tw-galeria-grid .tw-galeria-item { aspect-ratio: 4 / 3; }

/* Masonry — columnas parejas, alturas naturales (estilo Pinterest) */
.tw-galeria-masonry {
  display: block;
  column-count: 3;
  column-gap: 12px;
}
.tw-galeria-masonry .tw-galeria-item {
  break-inside: avoid;
  display: block;
  margin-bottom: 12px;
}
.tw-galeria-masonry .tw-galeria-img { height: auto; }

/* Destacado — primera imagen grande + resto en grilla 3 col */
.tw-galeria-destacado {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
}
.tw-galeria-destacado .tw-galeria-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* Bento — cada imagen ocupa N col x N fila segun spans del editor */
.tw-galeria-bento {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
}

@media (max-width: 768px) {
  .tw-galeria-masonry { column-count: 2; }
  .tw-galeria-destacado,
  .tw-galeria-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }
  .tw-galeria-bento .tw-galeria-item { grid-column: span 1 !important; }
}
@media (max-width: 480px) {
  .tw-galeria-masonry { column-count: 1; }
  .tw-galeria-destacado,
  .tw-galeria-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .tw-galeria-destacado .tw-galeria-item,
  .tw-galeria-bento .tw-galeria-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 4 / 3;
  }
}

.tw-texto-libre {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tw-text, #1c2433);
}
.tw-texto-libre p { margin: 0 0 12px; }
.tw-texto-libre a { color: var(--tw-primary, #1f4e8c); }

@media (max-width: 600px) {
  .tw-galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ===== Tienda Pública v2 — F4: ofertas en producto / carrito =========== */

/* Banner "Promo hasta DD/MM" en página de producto */
.tw-promo-banner {
  background: linear-gradient(90deg, #fff4e6, #fff9f0);
  border-left: 3px solid #d97706;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  margin: 8px 0;
}

/* Banner sticky envío gratis en carrito */
.tw-envio-banner {
  background: #eef4fc;
  border: 1px solid #b9d2f0;
  color: #1f4e8c;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 14px;
  text-align: center;
}
.tw-envio-banner.ok {
  background: #ecfdf5;
  border-color: #b9f1c7;
  color: #0a7a3a;
}
/* Cartel de incentivo del descuento por monto: negro con letras blancas para
   que resalte como llamado a la acción (2026-06-11 Martín). */
.tw-envio-banner.tw-monto-banner {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
  font-weight: 500;
}
.tw-envio-banner strong { color: inherit; }

/* Cupón en carrito */
.tw-cupon-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tw-cupon-form input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-line, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  text-transform: uppercase;
}
.tw-cupon-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #b9f1c7;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: #0a7a3a;
}
.tw-cupon-applied strong { color: #065f46; }

/* Resumen del carrito: filas de descuento */
.tw-summary-row.tw-summary-discount {
  color: #0a7a3a;
  font-weight: 500;
}
.tw-summary-row.tw-summary-discount span:last-child { color: inherit; }

/* Precio tachado en línea del carrito */
.tw-cart-precio-tachado {
  text-decoration: line-through;
  color: #9ca3af;
  margin-right: 4px;
  font-size: 11px;
}

/* Mensaje del cupón (ok / error / warn / info) */
.tw-msg.ok    { background: #ecfdf5; border: 1px solid #b9f1c7; color: #065f46; }
.tw-msg.warn  { background: #fff4e6; border: 1px solid #ffd9a8; color: #92400e; }
.tw-msg.info  { background: #eef4fc; border: 1px solid #b9d2f0; color: #1f4e8c; }
.tw-msg.error { background: #fee; border: 1px solid #fbb; color: #b91c1c; }
.tw-msg { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 8px 0; }

/* ===== Announcement Bar (marquee) ===== */
.ann-bar {
  overflow: hidden;
  padding: 8px 0;
  width: 100%;
}
.ann-bar-track {
  display: inline-flex;
  gap: 40px;
  white-space: nowrap;
  animation: ann-marquee linear infinite;
  will-change: transform;
}
.ann-bar-track span {
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
/* 2026-06-01 (Martín): la marquesina ahora arranca desde la esquina derecha
   del viewport (translateX(100vw)) y scrollea hacia la izquierda hasta que
   sale del todo (translateX(-100%) del propio track). Antes empezaba cortada
   a mitad del primer item porque iba de 0 a -50% (loop seamless). */
@keyframes ann-marquee {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ===== Badge zona de envío al lado del logo (2026-06-01 v4) =====
   Usa la GIF del user con camión azul recorriendo (Animacion envio.mp4 → GIF).
   Texto de ciudad dinámico vía HTML (cambia con cfg.envio_zona_ciudad).
   Sin fondo verde — el badge es transparente para dejar respirar el camión. */
.tw-envio-zona-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 14px;
  color: #1e3a5f;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.tw-envio-zona-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.tw-envio-zona-text strong {
  color: #2563eb;
  font-weight: 800;
  font-size: 1.05em;
}
.tw-envio-gif {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
/* Mobile: badge más compacto */
@media (max-width: 768px) {
  .tw-envio-zona-badge { font-size: 12px; gap: 8px; }
  .tw-envio-gif { height: 36px; }
}

/* ===== Bloque categorías con imagen ===== */
.tw-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols, 4), 1fr);
  gap: 16px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
}
.cat-card:hover, .cat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  outline: none;
}
.cat-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
.cat-card-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: #f1f5f9;
  border-radius: 8px;
}
.cat-card span {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: #1e293b;
  line-height: 1.3;
}
@media (max-width: 768px) {
  /* Mobile (2026-06-04, ref Ganga Home): 2 por fila para conservar la lógica
     de ver 6 categorías. Imagen grande a sangre (sin marco ni padding) con el
     nombre superpuesto arriba sobre un degradé para legibilidad. */
  .tw-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cat-card {
    position: relative;
    padding: 0;
    border: none;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .cat-card:hover, .cat-card:focus-visible {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
  }
  .cat-card img,
  .cat-card-placeholder {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
  }
  .cat-card span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 10px 18px;
    color: #fff;
    font-size: 13px;
    text-align: left;
    line-height: 1.2;
    background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    z-index: 1;
  }
}

/* ===== Bloque Newsletter ===== */
.tw-newsletter {
  padding: 48px 20px;
  text-align: center;
}
.tw-newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.tw-newsletter-text h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
}
.tw-newsletter-text p {
  margin: 0;
  opacity: .85;
  font-size: 15px;
}
.tw-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.tw-newsletter-form input[type="email"],
.tw-newsletter-form input[type="text"] {
  flex: 1 1 220px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  color: inherit;
  font-size: 14px;
  outline: none;
}
.tw-newsletter-form input::placeholder { opacity: .7; }
.tw-newsletter-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
}
.tw-newsletter-btn:hover { opacity: .88; }
.tw-newsletter-btn:disabled { opacity: .55; cursor: default; }
.tw-newsletter-msg {
  font-size: 14px;
  font-weight: 600;
  opacity: .95;
}

/* ===== Pop-up promocional ===== */
.tw-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  animation: tw-popup-fadein .25s ease;
}
@keyframes tw-popup-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tw-popup {
  position: relative;
  border-radius: 12px;
  padding: 32px 28px 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  text-align: center;
  animation: tw-popup-slidein .25s ease;
}
@keyframes tw-popup-slidein {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.tw-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
  color: inherit;
}
.tw-popup-close:hover { opacity: 1; }
.tw-popup-img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 14px;
}
.tw-popup-titulo {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}
.tw-popup-desc {
  margin: 0 0 14px;
  font-size: 15px;
  opacity: .88;
}
.tw-popup-nl-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.tw-popup-email {
  flex: 1 1 200px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  color: inherit;
  font-size: 14px;
  outline: none;
}
.tw-popup-email::placeholder { opacity: .7; }
.tw-popup-btn {
  padding: 9px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tw-popup-btn:disabled { opacity: .55; cursor: default; }
.tw-popup-cupon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.2);
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.tw-popup-copy {
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  font-weight: 600;
}
.tw-popup-copy:hover { background: rgba(255,255,255,.4); }

/* ── Pop-up modo "anuncio" (imagen + badge + barra subtítulo + botón CERRAR) ─ */
.tw-popup--anuncio {
  max-width: 490px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 26px 26px 22px;
}
.tw-popup-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tw-popup--anuncio .tw-popup-titulo {
  margin: 0;
  line-height: 1.2;
}
.tw-popup-subtitulo {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.tw-popup--anuncio .tw-popup-img {
  max-height: 150px;
  margin-bottom: 2px;
}
.tw-popup-cerrar {
  margin-top: auto;
  align-self: center;
  min-width: 150px;
  padding: 11px 30px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.tw-popup-cerrar:hover { filter: brightness(1.08); }

/* Modo imagen full-bleed: la foto abarca todo, solo el CERRAR queda al pie. */
.tw-popup--media {
  padding: 0;
  gap: 0;
  overflow: hidden;
  min-height: 380px;
  justify-content: stretch;
}
.tw-popup-media {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.tw-popup--media .tw-popup-img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  display: block;
}
.tw-popup-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 62%, rgba(0,0,0,.45));
}
.tw-popup-media-top,
.tw-popup-media-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tw-popup-media-overlay .tw-popup-titulo { text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.tw-popup--media .tw-popup-close {
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.tw-popup--media .tw-popup-cerrar {
  margin: 0;
  width: 100%;
  border-radius: 0;
}

/* ── Bloque countdown ────────────────────────────────────────────────────── */
.tw-countdown {
  padding: 40px 20px;
  text-align: center;
}
.tw-countdown-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
}
.tw-countdown-sub {
  font-size: 15px;
  margin: 0 0 20px;
  opacity: .85;
}
.tw-countdown-boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tw-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 72px;
}
.tw-cd-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}
.tw-cd-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  opacity: .8;
}
.tw-countdown-sep {
  font-size: 32px;
  font-weight: 700;
  opacity: .6;
  margin-bottom: 14px;
}
.tw-cd-expired {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 480px) {
  .tw-cd-num { font-size: 28px; }
  .tw-countdown-unit { padding: 10px 14px; min-width: 58px; }
}

/* ── Bloque ofertas_relampago (#13) ───────────────────────────────────────── */
.tw-relampago {
  margin: 28px 0;
  background: var(--rl-bg, #ffffff);
  color: var(--rl-text, #1e293b);
  border: 1px solid color-mix(in srgb, var(--rl-acento, #2563eb) 14%, transparent);
  border-radius: 18px;
  padding: 26px;
}
/* Full-bleed (banda de ancho completo en PC): saca bordes/radio laterales,
   agrega padding horizontal fluido y centra el contenido con un max-width interno
   para que no quede vacío en monitores ultra-anchos. */
.tw-fullbleed-wrap .tw-relampago {
  margin: 28px 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: clamp(20px, 6vw, 90px);
  padding-right: clamp(20px, 6vw, 90px);
}
.tw-fullbleed-wrap .tw-relampago-carousel,
.tw-fullbleed-wrap .tw-relampago-header { max-width: 1280px; margin-left: auto; margin-right: auto; }
.tw-relampago-header { text-align: center; margin-bottom: 14px; }
.tw-relampago-sub { margin: 4px 0 0; font-size: 14px; opacity: .85; }
.tw-relampago-loading, .tw-relampago .tw-empty { text-align: center; padding: 24px; opacity: .7; }
.tw-relampago-carousel { position: relative; }
.tw-relampago-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tw-relampago-slides::-webkit-scrollbar { display: none; }
.tw-relampago-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  padding: 0 4px;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

/* ── Columna izquierda: título + flip-clock + última oportunidad ── */
.tw-relampago-cd-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.tw-relampago-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--rl-acento, #2563eb);
}
.tw-relampago-bolt { color: #f97316; }
.tw-relampago-nombre { font-size: 15px; font-weight: 600; opacity: .8; margin-top: -8px; }
.tw-relampago-cd { display: flex; align-items: flex-end; gap: 10px; }
.tw-relampago-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--rl-acento, #2563eb) 28%, transparent);
  border-radius: 14px;
  padding: 12px 8px 9px;
  min-width: 64px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
}
.tw-relampago-cd-unit span { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1; color: var(--rl-acento, #2563eb); font-variant-numeric: tabular-nums; }
.tw-relampago-cd-unit small { font-size: 11px; letter-spacing: .02em; color: #94a3b8; margin-top: 7px; }
.tw-relampago-cd-sep { font-size: 26px; font-weight: 800; padding-bottom: 18px; color: color-mix(in srgb, var(--rl-acento, #2563eb) 45%, transparent); }
.tw-relampago-cd-fin { font-size: 16px; font-weight: 800; color: var(--rl-acento, #2563eb); }
.tw-relampago-ultima {
  background: #fbbf24;
  color: #5b3d00;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 9px;
}

/* ── Columna derecha: producto(s) como card(s) horizontal(es) ── */
/* 2026-06-11 FIX: antes era un carrusel horizontal de cards al 100% (cada
   producto ocupaba todo el ancho, scroll oculto sin flechas) → con 2+ productos
   sólo se veía el primero y no había forma de llegar al resto. Ahora es un grid
   que ENVUELVE: se ven TODOS los productos de la oferta (lado a lado si entran,
   apilados si no). */
.tw-relampago-prod-col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.tw-relampago-prod-col > .tw-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(160px, var(--rl-card-w, 220px)) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  padding: 18px;
}
.tw-relampago-prod-col > .tw-card .tw-card-img {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}
/* Alto del banner configurable (props.alto_px): la foto deja de ser cuadrada y
   pasa a un alto fijo → controla la altura total del banner. Para que el banner
   pueda achicarse DE VERDAD, en este modo el countdown, los paddings y el botón
   se comprimen escalando con --rl-alto (si no, el flip-clock fijaba un piso). */
.tw-relampago-alto-fijo .tw-relampago-prod-col > .tw-card .tw-card-img {
  aspect-ratio: auto;
  height: var(--rl-alto);
}
.tw-relampago-alto-fijo .tw-relampago-slide { min-height: var(--rl-alto); align-items: center; }
.tw-relampago-alto-fijo { padding-top: 16px; padding-bottom: 16px; }
.tw-relampago-alto-fijo .tw-relampago-cd-col { gap: min(20px, calc(var(--rl-alto) * .09)); }
.tw-relampago-alto-fijo .tw-relampago-flash { font-size: min(34px, calc(var(--rl-alto) * .17)); gap: 8px; }
.tw-relampago-alto-fijo .tw-relampago-cd-unit {
  padding: min(12px, calc(var(--rl-alto) * .055)) 8px min(9px, calc(var(--rl-alto) * .045));
  min-width: min(64px, calc(var(--rl-alto) * .32));
  border-radius: 12px;
}
.tw-relampago-alto-fijo .tw-relampago-cd-unit span { font-size: min(38px, calc(var(--rl-alto) * .2)); }
.tw-relampago-alto-fijo .tw-relampago-cd-unit small { font-size: 10px; margin-top: 4px; }
.tw-relampago-alto-fijo .tw-relampago-cd-sep { padding-bottom: min(18px, calc(var(--rl-alto) * .08)); }
.tw-relampago-alto-fijo .tw-relampago-prod-col > .tw-card { padding: min(18px, calc(var(--rl-alto) * .08)); }
.tw-relampago-alto-fijo .tw-relampago-prod-col > .tw-card .tw-card-name { font-size: min(16px, calc(var(--rl-alto) * .09)); }
.tw-relampago-alto-fijo .tw-relampago-prod-col > .tw-card .tw-card-btn-agregar,
.tw-relampago-alto-fijo .tw-relampago-prod-col > .tw-card .tw-card-stepper {
  margin-top: min(12px, calc(var(--rl-alto) * .05));
}
.tw-relampago-prod-col > .tw-card .tw-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: left;
  align-items: flex-start;
}
.tw-relampago-prod-col > .tw-card .tw-card-name { font-size: 16px; font-weight: 700; }
.tw-relampago-prod-col > .tw-card .tw-card-prices { margin-top: 6px; }
.tw-relampago-prod-col > .tw-card .tw-card-btn-agregar,
.tw-relampago-prod-col > .tw-card .tw-card-stepper { margin-top: 12px; align-self: flex-start; min-width: 200px; }

.tw-relampago-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,.35);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tw-relampago-prev { left: 6px; }
.tw-relampago-next { right: 6px; }
.tw-relampago-arrow:hover { background: rgba(15,23,42,.55); }
.tw-relampago-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.tw-relampago-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--rl-acento, #2563eb) 35%, transparent);
}
.tw-relampago-dot.is-active { background: var(--rl-acento, #2563eb); }
@media (max-width: 760px) {
  /* 2026-06-07 (Martín): rediseño mobile del bloque relámpago como CARD blanca
     limpia y espaciosa — esquinas 12px, sombra suave, secciones apiladas
     (header / countdown / producto) separadas por líneas divisoras, números del
     countdown grandes y bold, mucho padding interno. Sólo mobile; desktop intacto. */
  .tw-relampago {
    padding: 24px 20px;
    border-radius: 12px;
    border: 1px solid #eef0f4;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
  }
  .tw-relampago-header {
    border-bottom: 1px solid #eef0f4;
    padding-bottom: 16px;
    margin-bottom: 4px;
  }
  .tw-relampago-slide { grid-template-columns: 1fr; gap: 22px; }
  .tw-relampago-cd-col { align-items: center; text-align: center; gap: 16px; }
  .tw-relampago-flash { justify-content: center; font-size: 24px; }
  .tw-relampago-cd { justify-content: center; gap: 8px; }
  .tw-relampago-cd-unit { min-width: 62px; padding: 13px 7px 9px; }
  .tw-relampago-cd-unit span { font-size: 36px; }
  /* divisor entre el countdown y el producto */
  .tw-relampago-prod-col {
    border-top: 1px solid #eef0f4;
    padding-top: 22px;
  }
  /* el producto deja de ser una "card dentro de la card": se aplana para que la
     card blanca exterior sea el único contenedor visual. */
  .tw-relampago-prod-col > .tw-card {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .tw-relampago-prod-col > .tw-card .tw-card-img { max-width: 240px; margin: 0 auto; }
  .tw-relampago-prod-col > .tw-card .tw-card-body { align-items: center; text-align: center; }
  .tw-relampago-prod-col > .tw-card .tw-card-name { font-size: 18px; }
  .tw-relampago-prod-col > .tw-card .tw-card-btn-agregar,
  .tw-relampago-prod-col > .tw-card .tw-card-stepper { align-self: center; }
}

/* ── Bloque banner_medio_pago ─────────────────────────────────────────────── */
.tw-pago-medios {
  padding: 28px 0;
}
.tw-mp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}
.tw-mp-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid;
  border-radius: 40px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  background: #fff;
}
.tw-mp-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}
.tw-mp-nombre { font-size: 14px; }
.tw-mp-pct {
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
}

/* ── #57 Carrusel de promos por medio de pago ─────────────────────────────── */
.tw-mpc-wrap {
  position: relative;
  margin-top: 14px;
}
.tw-mpc-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tw-mpc-viewport::-webkit-scrollbar { display: none; }
.tw-mpc-track {
  display: flex;
  gap: 16px;
  padding: 4px 2px;
}
.tw-mpc-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-top: 4px solid var(--mpc-color, #2563eb);
  border-radius: 12px;
  padding: 18px 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.tw-mpc-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475467;
}
.tw-mpc-desc {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
}
.tw-mpc-logo {
  height: 30px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
}
.tw-mpc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e6e8ec;
  background: #fff;
  color: #1f2937;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
}
.tw-mpc-arrow.prev { left: -6px; }
.tw-mpc-arrow.next { right: -6px; }
.tw-mpc-arrow[hidden] { display: none; }
.tw-mpc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.tw-mpc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d0d4da;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.tw-mpc-dot.active {
  background: var(--color-primary, #2563eb);
  transform: scale(1.25);
}
@media (max-width: 768px) {
  .tw-mpc-card { flex-basis: calc((100% - 16px) / 2); }
  .tw-mpc-desc { font-size: 24px; }
  .tw-mpc-arrow { width: 32px; height: 32px; font-size: 18px; }
  .tw-mpc-arrow.prev { left: 0; }
  .tw-mpc-arrow.next { right: 0; }
}
@media (max-width: 480px) {
  .tw-mpc-card { flex-basis: calc((100% - 8px) / 1.6); }
}

/* ── Bloque banner_cuotas ─────────────────────────────────────────────────── */
.tw-cuotas {
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border-radius: 12px;
  padding: 32px 24px;
  margin: 24px 0;
}
.tw-cuotas-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  text-align: center;
}
.tw-cuotas-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tw-cuotas-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
}
.tw-cuotas-n { font-weight: 700; color: #1e293b; }
.tw-cuotas-desde { color: #2563eb; font-weight: 600; }
@media (max-width: 480px) {
  .tw-cuotas-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ── Bloque barra_envio_gratis ────────────────────────────────────────────── */
.tw-envio-gratis-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.tw-envio-camion { font-size: 20px; }

/* ── Bloque trust_badges ──────────────────────────────────────────────────── */
.tw-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 24px 0;
}
.tw-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-text, #1c2433);
  min-width: 72px;
}
.tw-trust-icon {
  width: 40px;
  height: 40px;
  color: var(--color-primario, #1f4e8c);
}
.tw-trust-icon svg { width: 100%; height: 100%; }
.tw-trust-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: #64748b;
}

/* ── Bloque banner_cookies ────────────────────────────────────────────────── */
.tw-cookies-banner {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #1c2433;
  color: #fff;
  font-size: 14px;
  z-index: 99990;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
.tw-cookies-bottom { bottom: 0; }
.tw-cookies-top { top: 0; }
.tw-cookies-texto { flex: 1 1 200px; }
.tw-cookies-link {
  color: #93c5fd;
  text-decoration: underline;
  margin-left: 4px;
}
.tw-cookies-btn {
  flex-shrink: 0;
  background: #fff;
  color: #1c2433;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tw-cookies-btn:hover { background: #e2e8f0; }

/* ── Bloque redes_sociales ────────────────────────────────────────────────── */
.tw-redes {
  padding: 20px 0;
  text-align: center;
}
.tw-redes-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tw-red-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primario, #1f4e8c);
  color: #fff;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.tw-red-icon:hover { opacity: .85; transform: translateY(-2px); }
.tw-red-icon svg { width: 20px; height: 20px; stroke: #fff; }

/* ── Bloque medios_pago_logos ─────────────────────────────────────────────── */
.tw-medios-pago {
  padding: 24px 0;
}
.tw-medios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}
.tw-medios-logo-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}
.tw-medios-logo {
  height: 32px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

/* ── Bloque defensa_consumidor ────────────────────────────────────────────── */
.tw-defensa {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px 0;
}
.tw-defensa-btn {
  display: inline-block;
  padding: 10px 22px;
  border: 2px solid var(--color-primario, #1f4e8c);
  border-radius: 8px;
  color: var(--color-primario, #1f4e8c);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.tw-defensa-btn:hover { background: var(--color-primario, #1f4e8c); color: #fff; }

/* ── Bloque ubicacion_mapa ────────────────────────────────────────────────── */
.tw-ubicacion {
  padding: 28px 0;
}
.tw-ubicacion-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.tw-ubicacion-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tw-ubic-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: var(--color-text, #1c2433);
  margin: 0;
  line-height: 1.5;
}
.tw-ubic-icon { flex-shrink: 0; font-size: 18px; }
.tw-ubicacion-mapa { border-radius: 10px; overflow: hidden; min-height: 240px; }
.tw-ubicacion-mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  display: block;
}
@media (max-width: 640px) {
  .tw-ubicacion-inner { grid-template-columns: 1fr; }
}

/* ── Cross-selling "También te puede interesar" ──────────────────────────── */
.tw-cross-selling {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.tw-cross-selling h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-heading, #1e293b);
  margin: 0 0 16px;
}
.tw-cross-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tw-cross-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
}
.tw-cross-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.tw-cross-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f5f9;
}
.tw-cross-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tw-cross-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}
@media (max-width: 900px) {
  .tw-cross-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tw-cross-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── Cross-selling panel en editor de producto (app.js) ─────────────────── */
.cs-cards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.cs-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 220px;
  max-width: 320px;
  position: relative;
}
.cs-card-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: #e2e8f0;
}
.cs-card-no-foto {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #e2e8f0;
  flex-shrink: 0;
}
.cs-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}
.cs-card-codigo { font-size: 11px; color: #64748b; }
.cs-card-nombre { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card-precio { font-size: 12px; color: #2563eb; font-weight: 600; }
.cs-card-remove {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cs-card-remove:hover { background: #fee2e2; }
.cs-search-dropdown {
  margin-top: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 320px;
}
.cs-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.cs-search-item:hover { background: #f1f5f9; }
.cs-search-codigo { color: #64748b; font-size: 11px; min-width: 60px; }
.cs-search-nombre { flex: 1; color: #1e293b; font-weight: 500; }
.cs-search-precio { color: #2563eb; font-weight: 600; font-size: 12px; white-space: nowrap; }
.cs-search-loading { padding: 8px 12px; color: #64748b; font-size: 13px; }

/* =====================================================================
   TANDA 1 — Bloques Tienda Web 2026-05-28
   ===================================================================== */

/* ===== 1. Countdown timer ===== */
.tw-countdown {
  width: 100%;
  padding: 32px 20px;
  text-align: center;
}
.tw-countdown-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.tw-countdown-sub {
  font-size: 14px;
  opacity: .85;
  margin: 0 0 20px;
}
.tw-countdown-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tw-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.tw-cd-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tw-cd-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .75;
  margin-top: 4px;
}
.tw-countdown-sep {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px;
  opacity: .6;
}
.tw-countdown-expired {
  font-size: 18px;
  font-weight: 600;
  padding: 12px;
}
@media (max-width: 480px) {
  .tw-cd-num { font-size: 28px; }
  .tw-countdown-sep { font-size: 24px; }
  .tw-countdown-unit { min-width: 50px; }
}

/* ===== 2. Banner medio de pago ===== */
.tw-pago-medios {
  padding: 24px 0;
}
.tw-mp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}
.tw-mp-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid;
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}
.tw-mp-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}
.tw-mp-nombre {
  color: inherit;
}
.tw-mp-pct {
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ===== 3. Banner cuotas escalonadas ===== */
.tw-cuotas {
  padding: 24px 0;
  text-align: center;
}
.tw-cuotas-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1e293b;
}
.tw-cuotas-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.tw-cuotas-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 15px;
}
.tw-cuotas-n {
  font-weight: 700;
  color: #1e293b;
}
.tw-cuotas-desde {
  color: #64748b;
  font-size: 13px;
}

/* ===== 4. Barra envío gratis ===== */
.tw-envio-gratis-bar {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tw-envio-camion {
  font-size: 18px;
}

/* ===== 5. Trust badges ===== */
.tw-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 24px 16px;
}
.tw-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #374151;
  min-width: 80px;
}
.tw-trust-item:hover { color: #1f4e8c; }
.tw-trust-icon {
  width: 44px;
  height: 44px;
  color: #475569;
}
.tw-trust-icon svg {
  width: 100%;
  height: 100%;
}
.tw-trust-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: inherit;
}

/* ===== 6. Banner cookies (overlay) ===== */
.tw-cookies-banner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #1e293b;
  color: #f1f5f9;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.tw-cookies-banner.tw-cookies-bottom { bottom: 0; }
.tw-cookies-banner.tw-cookies-top    { top: 0; }
.tw-cookies-texto { flex: 1; min-width: 200px; }
.tw-cookies-link { color: #93c5fd; text-decoration: underline; }
.tw-cookies-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.tw-cookies-btn:hover { background: #2563eb; }

/* ===== 7. Redes sociales ===== */
.tw-redes {
  padding: 24px 16px;
  text-align: center;
}
.tw-redes-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.tw-red-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #374151;
  transition: background .15s, color .15s, transform .15s;
  text-decoration: none;
}
.tw-red-icon:hover {
  background: #1f4e8c;
  color: #fff;
  transform: translateY(-2px);
}
.tw-red-icon svg {
  width: 22px;
  height: 22px;
}

/* ===== 8. Logos medios de pago ===== */
.tw-medios-pago {
  padding: 24px 16px;
  text-align: center;
}
.tw-medios-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.tw-medios-logo-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-medios-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ===== 9. Defensa del consumidor ===== */
.tw-defensa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
}
.tw-defensa-btn {
  display: inline-block;
  background: #fff;
  border: 2px solid #1e293b;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.tw-defensa-btn:hover {
  background: #1e293b;
  color: #fff;
}

/* ===== 10. Ubicación + mapa ===== */
.tw-ubicacion {
  padding: 24px 0;
}
.tw-ubicacion-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.tw-ubicacion-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}
.tw-ubic-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}
.tw-ubic-icon {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 1px;
}
.tw-ubicacion-mapa {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #e2e8f0;
  height: 300px;
}
.tw-ubicacion-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .tw-ubicacion-inner {
    grid-template-columns: 1fr;
  }
  .tw-ubicacion-mapa {
    height: 220px;
  }
}

/* =========================================================================
   Tanda-2 — Cards de producto: badges + precios + compra rápida
   ========================================================================= */

/* ---- Badges de card ---- */
/* #18 (2026-06-04) — badges estilo pill (ref Ganga). Antes se veían como
   "rectángulos rojos apilados". Ahora: pills compactas, redondas, con sombra
   sutil; máximo 2 visibles (cap en JS). Top-left, una al lado de otra. */
.tw-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  pointer-events: none;
  max-width: calc(100% - 18px);
}

/* Sobreescribe el div sin posicionamiento que ya existía */
.tw-card { position: relative; }

/* Pill base unificada: aplica a TODAS las variantes (la base .tw-badge de
   arriba define color por clase; acá unificamos forma/tamaño tipo Ganga). */
.tw-card-badges .tw-badge,
.tw-badge-escasez,
.tw-badge-descuento,
.tw-badge-2x1,
.tw-badge-envio-gratis {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
  -webkit-backdrop-filter: saturate(1.1);
  backdrop-filter: saturate(1.1);
}

/* Hero: el descuento es el badge protagonista (más peso visual). */
.tw-badge-descuento,
.tw-card-badges .tw-badge.oferta {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  box-shadow: 0 2px 7px rgba(220, 38, 38, .35);
}

.tw-badge-2x1 {
  font-size: 11px;
  letter-spacing: .5px;
}

/* ---- Precios adicionales (#13) ---- */
.tw-precio-anterior {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 0.85em;
  margin-left: 6px;
}

.tw-precio-transferencia {
  font-size: 12px;
  color: var(--color-precio-transf, #16a34a);
  font-weight: 600;
  margin-top: 3px;
}
.tw-precio-transferencia-off {
  font-weight: 700;
}
.tw-transf-mayus .tw-precio-transferencia-off {
  text-transform: uppercase;
}
.tw-transf-md .tw-precio-transferencia { font-size: 14px; }
.tw-transf-lg .tw-precio-transferencia { font-size: 16px; }
.tw-precio-transferencia-monto {
  font-weight: 600;
}

.tw-precio-cuotas {
  font-size: 12px;
  color: #111111;
  margin-top: 2px;
}

/* ---- Botón compra rápida (#26) ---- */
.tw-compra-rapida-btn {
  display: none; /* oculto por defecto, visible en hover (desktop) */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(31, 78, 140, 0.88);
  color: #fff;
  border: 0;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 4;
  text-align: center;
}
.tw-compra-rapida-btn:hover {
  background: rgba(31, 78, 140, 1);
}

/* Desktop: aparece al hover sobre la imagen */
@media (hover: hover) {
  .tw-card-img:hover .tw-compra-rapida-btn {
    display: block;
  }
}

/* Mobile / touch: siempre visible si compra_rapida activa */
@media (max-width: 768px) {
  .tw-compra-rapida-btn {
    display: block;
  }
}

/* ---- Modal compra rápida ---- */
.tw-modal-cr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tw-cr-fadein 0.15s ease;
}

@keyframes tw-cr-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tw-modal-cr {
  background: #fff;
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-height: 90vh;
  overflow-y: auto;
}

.tw-modal-cr-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #f3f4f6;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  transition: background 0.12s;
  z-index: 1;
}
.tw-modal-cr-close:hover { background: #e5e7eb; }

.tw-modal-cr-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 28px 24px;
}

.tw-modal-cr-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.tw-modal-cr-img .placeholder {
  width: 100%;
  height: 220px;
  background: #f3f4f6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #9ca3af;
}

.tw-modal-cr-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw-modal-cr-nombre {
  font-size: 18px;
  font-weight: 700;
  color: #1c2433;
  margin: 0;
  line-height: 1.3;
}

.tw-modal-cr-precios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.tw-modal-cr-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.tw-modal-cr-qty {
  /* reutiliza estilos .tw-qty existentes */
}

.tw-modal-cr-add {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
}

.tw-modal-cr-detail {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
}
.tw-modal-cr-detail:hover { color: #1f4e8c; text-decoration: underline; }

@media (max-width: 600px) {
  .tw-modal-cr-body {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
  .tw-modal-cr-img img,
  .tw-modal-cr-img .placeholder {
    height: 180px;
  }
}

/* ==========================================================================
   Tanda-3: Chrome / Widgets Globales
   #15 WhatsApp FAB, #16 Portal B2B, #22 Mini-carrito, #31 Footer configurable
   ========================================================================== */

/* ── #15 — WhatsApp FAB ──────────────────────────────────────────────────── */
.tw-wa-btn {
  position: fixed;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  text-decoration: none;
  color: #fff;
  z-index: 900;
  transition: transform .15s, box-shadow .15s;
}
.tw-wa-btn--right { right: 24px; }
.tw-wa-btn--left  { left: 24px; }
.tw-wa-btn:hover  { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* ── #16 — Portal B2B en header ─────────────────────────────────────────── */
.tw-b2b-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1.5px solid var(--color-primary, #1f4e8c);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #1f4e8c);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tw-b2b-link:hover {
  background: var(--color-primary, #1f4e8c);
  color: #fff;
}

/* ── #22 — Mini-carrito FAB + Drawer ────────────────────────────────────── */
.tw-minicart-btn {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  z-index: 900;
  transition: transform .15s, box-shadow .15s;
}
.tw-minicart-btn--right { right: 24px; }
.tw-minicart-btn--left  { left: 24px; }
.tw-minicart-btn:hover  { transform: scale(1.07); box-shadow: 0 6px 22px rgba(0,0,0,.32); }

.tw-mc-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

.tw-minicart-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 340px;
  max-width: 100vw;
  z-index: 950;
  background: #fff;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.tw-minicart-drawer--right { right: 0; transform: translateX(100%); }
.tw-minicart-drawer--left  { left: 0; transform: translateX(-100%); }
.tw-minicart-drawer:not([hidden]) { transform: translateX(0); }

.tw-minicart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.tw-minicart-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.tw-minicart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.tw-minicart-empty {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.tw-minicart-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.tw-minicart-item img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.tw-minicart-img-ph {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.tw-minicart-item-info {
  flex: 1;
  min-width: 0;
}
.tw-minicart-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #1c2433;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-minicart-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary, #1f4e8c);
  margin-top: 2px;
}
.tw-minicart-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tw-minicart-item-qty button {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-minicart-item-qty span {
  font-size: 13px;
  min-width: 20px;
  text-align: center;
}
/* #carrito-qty: la cantidad comprada siempre visible y legible */
.tw-minicart-item-qty .tw-minicart-qty-num {
  display: inline-block;
  min-width: 28px;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
/* #carrito-qty: input editable de cantidad en el mini-carrito (2026-06-11). */
.tw-minicart-item-qty .tw-minicart-qty-input {
  width: 44px;
  height: 24px;
  padding: 2px 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  -moz-appearance: textfield;
}
.tw-minicart-item-qty .tw-minicart-qty-input:focus {
  outline: none;
  border-color: var(--color-primary, #111827);
}
/* Mantener visibles las flechitas nativas del number en el mini-carrito sería
   ruidoso al lado de los botones +/-; las ocultamos (las flechas propias siguen). */
.tw-minicart-item-qty .tw-minicart-qty-input::-webkit-outer-spin-button,
.tw-minicart-item-qty .tw-minicart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tw-minicart-item-del {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.tw-minicart-item-del:hover { color: #ef4444; }

.tw-minicart-footer {
  flex-shrink: 0;
  padding: 14px;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
}
.tw-minicart-total {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1c2433;
}
.tw-minicart-footer-actions {
  display: flex;
  gap: 8px;
}
.tw-minicart-vaciar {
  flex: 1;
  font-size: 13px;
}
.tw-minicart-checkout {
  flex: 2;
  font-size: 13px;
}

@media (max-width: 768px) {
  .tw-minicart-drawer {
    width: 100vw;
  }
}

/* ── #31 — Footer configurable ───────────────────────────────────────────── */
.tw-footer-configurable {
  /* color-bg y color-text se aplican via style="" inline */
}
.tw-footer.tw-footer-configurable .tw-footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px 24px;
  padding: 40px 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.tw-footer-col h4 {
  font-size: var(--tw-footer-tit-size, 13px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: var(--tw-footer-tit-transform, uppercase);
  color: var(--tw-footer-tit-color, inherit);
  opacity: .85;
  margin: 0 0 10px;
}
.tw-footer-col p {
  margin: 0 0 6px;
  font-size: var(--tw-footer-txt-size, 13px);
  text-transform: var(--tw-footer-txt-transform, none);
  color: var(--tw-footer-txt-color, inherit);
  opacity: .8;
}
.tw-footer-col p .tw-footer-link,
.tw-footer-col p a {
  font-size: inherit;
  text-transform: inherit;
}
.tw-footer-link {
  color: inherit;
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s;
}
.tw-footer-link:hover { opacity: 1; text-decoration: underline; }

/* Columna derecha: contacto + mapa de Google */
.tw-footer-contacto { min-width: 230px; }
.tw-footer-contacto-line {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  line-height: 1.4;
}
.tw-footer-mapa {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.tw-footer-mapa iframe {
  width: 100%;
  height: 170px;
  border: 0;
  display: block;
}

.tw-footer-legal {
  text-align: center;
  font-size: 12px;
  opacity: .6;
  padding: 12px 20px 18px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tw-footer.tw-footer-configurable .tw-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 28px 16px 16px;
  }
  .tw-b2b-link { font-size: 12px; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .tw-footer.tw-footer-configurable .tw-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   #21 — Mega-menú de categorías multinivel
   ============================================================================ */

/* --- Trigger (categorías raíz en la barra .tw-nav) --- */
.tw-megamenu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--color-nav-text, rgba(255,255,255,.85));
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.tw-megamenu-trigger::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.tw-megamenu-trigger:hover,
.tw-megamenu-trigger[aria-expanded="true"] {
  color: #fff;
}
.tw-megamenu-trigger:hover::after,
.tw-megamenu-trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}
.tw-megamenu-trigger-arrow {
  font-size: 10px;
  opacity: .7;
  transition: transform .2s ease;
  display: inline-block;
}
.tw-megamenu-trigger[aria-expanded="true"] .tw-megamenu-trigger-arrow {
  transform: rotate(180deg);
}

/* --- Panel Desktop (full-width debajo del nav) --- */
.tw-megamenu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-line, #e6e8ec);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 400;
  display: none;
  padding: 0;
  /* suavizar aparición */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.tw-megamenu-panel.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* Wrapper interno limitado a container */
.tw-megamenu-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 24px;
  display: flex;
  gap: 0;
}

/* --- Columnas --- */
.tw-megamenu-cols {
  display: flex;
  gap: 0;
  flex: 1;
}

/* Imagen promocional a la derecha del panel (rubro/grupo con imagen). */
.tw-megamenu-promo {
  flex: 0 0 auto;
  width: 240px;
  margin-left: 24px;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.tw-megamenu-promo img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Fila "Ver todo {rubro} →" al pie del panel. */
.tw-megamenu-vertodo-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 18px;
}
.tw-megamenu-vertodo {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  padding: 8px 0 0;
  text-align: left;
}
.tw-megamenu-vertodo:hover { text-decoration: underline; }
.tw-megamenu-col {
  flex: 1;
  min-width: 0;
  padding: 0 20px 0 0;
  border-right: 1px solid var(--color-line, #e6e8ec);
}
.tw-megamenu-col:last-child {
  border-right: none;
  padding-right: 0;
}
.tw-megamenu-col:not(:first-child) {
  padding-left: 20px;
}

/* --- Sección (sub-categoría con sus nietos) --- */
.tw-megamenu-section {
  margin-bottom: 18px;
}
.tw-megamenu-section:last-child {
  margin-bottom: 0;
}

/* --- Título de sección (sub-categoría) --- */
.tw-megamenu-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text, #1a202c);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--color-line, #e6e8ec);
  margin-bottom: 8px;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  width: 100%;
  transition: color .15s;
}
.tw-megamenu-section-title:hover {
  color: var(--color-primary);
}
.tw-megamenu-section-title.is-destacado {
  color: var(--color-primary);
}
.tw-megamenu-section-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* --- Links (sub-sub-categorías / hojas directas) --- */
.tw-megamenu-link {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted, #4a5568);
  text-decoration: none;
  padding: 4px 0;
  transition: color .15s, padding-left .15s;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}
.tw-megamenu-link:hover {
  color: var(--color-primary);
  padding-left: 6px;
}
.tw-megamenu-link.is-destacado {
  font-weight: 600;
  color: var(--color-primary);
}

/* --- Botón "Ver todos" al pie del panel --- */
.tw-megamenu-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line, #e6e8ec);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tw-megamenu-ver-todos {
  font-size: 12.5px;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tw-megamenu-ver-todos:hover {
  opacity: .8;
}

/* --- Botón hamburguesa mobile --- */
.tw-megamenu-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--color-header-text, #fff);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  transition: background .15s;
}
.tw-megamenu-hamburger:hover {
  background: rgba(255,255,255,.15);
}

/* --- Overlay del drawer mobile --- */
.tw-megamenu-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 940;
  transition: opacity .2s ease;
}
.tw-megamenu-drawer-overlay.is-open {
  display: block;
}

/* --- Drawer mobile --- */
.tw-megamenu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: #fff;
  z-index: 950;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
}
.tw-megamenu-drawer.is-open {
  transform: translateX(0);
}

.tw-megamenu-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--color-nav-bg, var(--color-primary));
  color: var(--color-nav-text, #fff);
  flex-shrink: 0;
}
.tw-megamenu-drawer-titulo {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.tw-megamenu-drawer-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: .85;
}
.tw-megamenu-drawer-close:hover { opacity: 1; }

/* --- Acordeón mobile --- */
.tw-megamenu-accordion {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.tw-megamenu-accordion-item {}

/* Nivel 1 (raíces) */
.tw-megamenu-accordion-toggle {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-line, #e6e8ec);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1a202c);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.tw-megamenu-accordion-toggle:hover {
  background: var(--color-soft, #f5f5f5);
}
.tw-megamenu-accordion-toggle-arrow {
  font-size: 11px;
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}
.tw-megamenu-accordion-toggle.is-open .tw-megamenu-accordion-toggle-arrow {
  transform: rotate(180deg);
}

/* Nivel 2 (sub-categorías) */
.tw-megamenu-accordion-children {
  display: none;
  background: var(--color-soft, #f5f5f5);
}
.tw-megamenu-accordion-children.is-open {
  display: block;
}

/* Nivel 2 item (puede ser hoja o tener nietos) */
.tw-megamenu-accordion-sub-toggle {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-line, #e6e8ec);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 10px 30px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text, #1a202c);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.tw-megamenu-accordion-sub-toggle:hover {
  background: #ececec;
}
/* Nivel 3 (nietos) */
.tw-megamenu-accordion-grandchildren {
  display: none;
  background: #f0f0f0;
}
.tw-megamenu-accordion-grandchildren.is-open {
  display: block;
}
.tw-megamenu-accordion-leaf {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-line, #e6e8ec);
  padding: 10px 18px 10px 42px;
  font-size: 13px;
  color: var(--color-text-muted, #4a5568);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.tw-megamenu-accordion-leaf:hover {
  background: #e8e8e8;
  color: var(--color-primary);
}

/* --- Responsive: ocultar desktop panel en mobile, mostrar hamburguesa --- */
@media (max-width: 768px) {
  .tw-megamenu-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* El panel desktop no se muestra en mobile */
  .tw-megamenu-panel {
    display: none !important;
  }
  /* Los triggers del nav se ocultan en mobile (se usa el drawer) */
  .tw-nav-inner .tw-megamenu-trigger {
    display: none;
  }
}
@media (min-width: 769px) {
  /* En desktop el drawer no se muestra */
  .tw-megamenu-drawer,
  .tw-megamenu-drawer-overlay,
  .tw-megamenu-hamburger {
    display: none !important;
  }
}
/* ── /Mega-menú ──────────────────────────────────────────────────────────────── */

/* ── Banner marca destacada (#28) ───────────────────────────────────────────── */
.tw-banner-marca {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 40px 60px;
  gap: 40px;
  overflow: hidden;
  position: relative;
}

/* Layout: logo izquierda (default) */
.tw-banner-marca--logo-left {
  flex-direction: row;
}

/* Layout: logo derecha */
.tw-banner-marca--logo-right {
  flex-direction: row-reverse;
}

/* Layout: logo arriba (stack vertical centrado) */
.tw-banner-marca--logo-top {
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* Zona del logo */
.tw-banner-marca-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  max-width: 260px;
}

.tw-banner-marca--logo-top .tw-banner-marca-logo {
  max-width: 200px;
  margin-bottom: 8px;
}

.tw-banner-marca-logo img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 4px;
}

.tw-banner-marca-logo-txt {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Zona de contenido (título + desc + CTA) */
.tw-banner-marca-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw-banner-marca--logo-top .tw-banner-marca-content {
  align-items: center;
}

.tw-banner-marca-titulo {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.tw-banner-marca-desc {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  opacity: .88;
  max-width: 480px;
}

.tw-banner-marca-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity .18s, transform .12s;
  text-decoration: none;
}

.tw-banner-marca--logo-top .tw-banner-marca-cta {
  align-self: center;
}

.tw-banner-marca-cta:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.tw-banner-marca-cta:active {
  transform: translateY(0);
  opacity: .95;
}

/* ── Responsive: mobile siempre stack vertical ───── */
@media (max-width: 768px) {
  .tw-banner-marca {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 28px 20px;
    gap: 20px;
  }

  .tw-banner-marca-logo {
    max-width: 160px;
  }

  .tw-banner-marca-logo img {
    max-height: 100px;
  }

  .tw-banner-marca-logo-txt {
    font-size: 1.5rem;
  }

  .tw-banner-marca-titulo {
    font-size: 1.25rem;
  }

  .tw-banner-marca-desc {
    font-size: .9rem;
  }

  .tw-banner-marca-cta {
    align-self: center;
    padding: 10px 22px;
  }

  .tw-banner-marca-content {
    align-items: center;
  }
}
/* ── /Banner marca destacada ─────────────────────────────────────────────────── */

/* ── #29 Colección por tags ──────────────────────────────────────────────────── */
.tw-coleccion-tags {
  padding: 40px 0;
}

.tw-coleccion-tags-header {
  padding: 0 20px 16px;
}

.tw-coleccion-tags-sub {
  margin: 4px 0 0;
  font-size: 14px;
  opacity: .7;
}

.tw-coleccion-tags-loading {
  text-align: center;
  padding: 24px;
  opacity: .5;
  font-size: 14px;
}

/* Grid layout — reutiliza .tw-grid */
.tw-coleccion-tags-grid {
  /* hereda tw-grid definido globalmente */
}

/* Carousel layout */
.tw-coleccion-tags-carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 8px;
  scrollbar-width: thin;
}

.tw-coleccion-tags-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

.tw-coleccion-tags-track .tw-product-card {
  width: 200px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .tw-coleccion-tags {
    padding: 24px 0;
  }

  .tw-coleccion-tags-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tw-coleccion-tags-carousel {
    padding: 0 8px 8px;
    scroll-snap-type: x mandatory;
  }

  .tw-coleccion-tags-track .tw-product-card {
    width: 160px;
  }
}
/* ── /Colección por tags ─────────────────────────────────────────────────────── */

/* ── #27 Calculadora de envío por CP ────────────────────────────────────────── */

.tw-envio-cp-widget {
  padding: 32px 20px;
  text-align: center;
}

.tw-envio-cp-inner {
  max-width: 480px;
  margin: 0 auto;
}

.tw-envio-cp-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.tw-envio-cp-desc {
  margin: 0 0 16px;
  opacity: .8;
  font-size: .95rem;
}

.tw-envio-cp-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.tw-envio-cp-input {
  flex: 1 1 140px;
  max-width: 200px;
  padding: 9px 13px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  font-family: monospace;
  background: #fff;
  color: #111;
  outline: none;
  transition: border-color .18s;
}

.tw-envio-cp-input:focus {
  border-color: var(--tw-color-primario, #1f4e8c);
}

.tw-envio-cp-btn {
  padding: 9px 22px;
  border: none;
  border-radius: 8px;
  font-size: .97rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.tw-envio-cp-btn:hover { opacity: .88; }
.tw-envio-cp-btn:disabled { opacity: .5; cursor: not-allowed; }

.tw-envio-cp-result {
  margin-top: 12px;
  min-height: 28px;
  font-size: .95rem;
}

.tw-envio-cp-ok {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(22, 163, 74, .08);
  border: 1px solid rgba(22, 163, 74, .25);
  border-radius: 8px;
  padding: 8px 16px;
}

.tw-envio-cp-costo {
  font-weight: 700;
  font-size: 1.05rem;
  color: #16a34a;
}

.tw-envio-cp-zona,
.tw-envio-cp-plazo,
.tw-envio-cp-transporte {
  font-size: .9rem;
  opacity: .8;
}

.tw-envio-cp-zona::before { content: "📍 "; }
.tw-envio-cp-plazo::before { content: "⏱ "; }
.tw-envio-cp-transporte::before { content: "🚚 "; }

.tw-envio-cp-error {
  color: #dc2626;
  font-size: .9rem;
}

.tw-envio-cp-loading {
  opacity: .6;
  font-size: .9rem;
}

.tw-envio-cp-wa-link {
  font-weight: 600;
  color: #25d366;
  text-decoration: underline;
  margin-left: 4px;
}

/* Mini-carrito: widget envío CP integrado */
.tw-minicart-envio-cp {
  padding: 8px 12px 4px;
  border-top: 1px solid rgba(255,255,255,.15);
}

.tw-minicart-envio-cp .tw-minicart-envio-cp-form {
  display: flex;
  gap: 6px;
}

.tw-minicart-envio-cp .tw-envio-cp-input {
  flex: 1;
  max-width: none;
  font-size: .85rem;
  padding: 5px 9px;
}

.tw-minicart-envio-cp .tw-envio-cp-result {
  margin-top: 5px;
  font-size: .82rem;
}

@media (max-width: 768px) {
  .tw-envio-cp-widget {
    padding: 24px 16px;
  }

  .tw-envio-cp-form {
    flex-direction: row;
  }

  .tw-envio-cp-input {
    max-width: none;
  }
}
/* ── /Calculadora de envío por CP ───────────────────────────────────────────── */

/* ── Variantes de producto en card (#25 sprint tienda 2026-05-29) ─────────── */
.tw-variantes {
  margin: 8px 0 6px;
}
.tw-variantes-grupo {
  margin-bottom: 8px;
}
.tw-variantes-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft, #6b7280);
  margin-bottom: 4px;
  display: block;
}
.tw-variantes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tw-variantes-chip {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.tw-variantes-chip:hover:not(.tw-variantes-chip--sin-stock) {
  border-color: var(--color-primary, #1d4ed8);
  background: #eff6ff;
  color: var(--color-primary, #1d4ed8);
}
.tw-variantes-chip--seleccionado {
  border-color: var(--color-primary, #1d4ed8);
  background: var(--color-primary, #1d4ed8);
  color: #fff;
  font-weight: 600;
}
.tw-variantes-chip--sin-stock {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Tipo "color": chips cuadrados 28px con background */
.tw-variantes-chip--color {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  border-width: 2px;
  position: relative;
  overflow: hidden;
}
.tw-variantes-chip--color.tw-variantes-chip--seleccionado::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
}

/* Info de variante seleccionada bajo los selectores */
.tw-variante-info {
  font-size: 12px;
  color: var(--color-text-soft, #6b7280);
  margin-top: 4px;
}
.tw-variante-info.sin-stock {
  color: #dc2626;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .tw-variantes-chip {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
  }
  .tw-variantes-chip--color {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
}
/* ── /Variantes de producto en card ─────────────────────────────────────────── */

/* ── #18 Wishlist / Favoritos ────────────────────────────────────────────── */

/* Corazón en la card de producto */
.tw-fav-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(255,255,255,0.90);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9ca3af;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: color 0.15s, transform 0.12s, background 0.15s;
  padding: 0;
}

.tw-fav-heart:hover {
  color: #e11d48;
  background: #fff;
  transform: scale(1.1);
}

.tw-fav-heart--activo {
  color: #e11d48;
  background: #fff0f3;
}

.tw-fav-heart--activo:hover {
  color: #9f1239;
}

/* Botón favoritos en el header */
.tw-fav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-header-text, #1c2433);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  transition: opacity 0.15s;
}

.tw-fav-btn:hover {
  opacity: 0.7;
}

.tw-fav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e11d48;
  color: #fff;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  line-height: 1;
}

/* Drawer de favoritos */
.tw-fav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 340px;
  max-width: 95vw;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.18);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
}

.tw-fav-drawer--right {
  right: 0;
}

.tw-fav-drawer--left {
  left: 0;
  box-shadow: 4px 0 20px rgba(0,0,0,0.18);
}

.tw-fav-drawer[hidden] {
  display: none;
}

.tw-fav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.tw-fav-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.tw-fav-close:hover {
  opacity: 1;
}

.tw-fav-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.tw-fav-empty {
  padding: 32px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.tw-fav-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.12s;
}

.tw-fav-drawer-item:hover {
  background: rgba(0,0,0,0.03);
}

.tw-fav-drawer-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.tw-fav-img-ph {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 24px;
  flex-shrink: 0;
}

.tw-fav-item-info {
  flex: 1;
  min-width: 0;
}

.tw-fav-item-name {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-fav-item-name:hover {
  text-decoration: underline;
}

.tw-fav-item-price {
  font-size: 13px;
  color: var(--color-primario, #1f4e8c);
  margin-top: 2px;
}

.tw-fav-item-del {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}

.tw-fav-item-del:hover {
  color: #e11d48;
}

/* Asegurar position:relative en la card para posicionar el corazón */
.tw-card-img {
  position: relative;
}

/* Mobile */
@media (max-width: 768px) {
  .tw-fav-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .tw-fav-heart {
    width: 30px;
    height: 30px;
    top: 6px;
    right: 6px;
  }
}

/* ── #19 Seguimiento de pedidos — Timeline visual ────────────────────────── */

/* Formulario de búsqueda pública */
.tw-seguimiento-form {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  max-width: 600px;
}
.tw-seg-form-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text, #1c2433);
}
.tw-seg-form-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 16px;
}
.tw-seg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.tw-seg-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.tw-seg-field .tw-input {
  width: 100%;
  box-sizing: border-box;
}
.tw-seg-estado {
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}
.tw-seg-loading {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.tw-seg-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.tw-seg-resultado {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
}
.tw-seg-pedido-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.tw-seg-cancelado {
  padding: 14px 16px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  color: #be123c;
  font-size: 14px;
  margin-bottom: 12px;
}
.tw-seg-historial-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin: 16px 0 10px;
}
.tw-btn-outline {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--color-primary, #1f4e8c);
  color: var(--color-primary, #1f4e8c);
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tw-btn-outline:hover {
  background: var(--color-primary, #1f4e8c);
  color: #fff;
}

/* Timeline stepper horizontal */
.tw-timeline-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0 16px;
  margin-bottom: 4px;
}
.tw-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 72px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.tw-timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  margin-bottom: 6px;
  transition: all 0.2s;
}
.tw-timeline-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  line-height: 1.3;
}
.tw-timeline-connector {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  align-self: center;
  margin-bottom: 26px;
  min-width: 8px;
}

/* Estados del stepper */
.tw-timeline-item--completado .tw-timeline-icon {
  background: #dcfce7;
  border-color: #22c55e;
  color: #16a34a;
}
.tw-timeline-item--completado .tw-timeline-label {
  color: #15803d;
}
.tw-timeline-item--actual .tw-timeline-icon {
  background: var(--color-primary, #1f4e8c);
  border-color: var(--color-primary, #1f4e8c);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(31, 78, 140, 0.18);
}
.tw-timeline-item--actual .tw-timeline-label {
  color: var(--color-primary, #1f4e8c);
  font-weight: 700;
}
.tw-timeline-item--futuro .tw-timeline-icon {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
  opacity: 0.6;
}
.tw-timeline-item--cancelado .tw-timeline-icon {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}
.tw-timeline-item--cancelado .tw-timeline-label {
  color: #dc2626;
}

/* Lista de eventos (historial) */
.tw-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.tw-timeline-evento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.tw-timeline-evento-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tw-timeline-evento-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tw-timeline-fecha {
  font-size: 12px;
  color: #6b7280;
}
.tw-timeline-comentario {
  font-size: 13px;
  color: #374151;
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Admin modal timeline */
.tl-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0 14px;
  margin-bottom: 4px;
}
.tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 64px;
  text-align: center;
}
.tl-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  margin-bottom: 5px;
}
.tl-step-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  line-height: 1.2;
}
.tl-step-connector {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  align-self: center;
  margin-bottom: 21px;
  min-width: 6px;
}
.tl-step--completado .tl-step-icon { background:#dcfce7; border-color:#22c55e; color:#16a34a; }
.tl-step--completado .tl-step-label { color:#15803d; }
.tl-step--actual .tl-step-icon { background:#1f4e8c; border-color:#1f4e8c; color:#fff; }
.tl-step--actual .tl-step-label { color:#1f4e8c; font-weight:700; }
.tl-step--futuro .tl-step-icon { opacity:0.5; }
.tl-evento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  margin-bottom: 6px;
  position: relative;
}
.tl-evento-icono { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.tl-evento-body { flex: 1; }
.tl-evento-tipo { font-size: 13px; font-weight: 700; color: #1c2433; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-evento-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.tl-evento-comentario { font-size: 12px; color: #374151; margin: 4px 0 0; line-height: 1.4; }
.tl-del-evento { position: absolute; top: 6px; right: 6px; padding: 1px 6px; font-size: 14px; opacity: 0.5; }
.tl-del-evento:hover { opacity: 1; }
.tl-evento--cancelado { border-color: #fecaca; background: #fff5f5; }

/* Mobile */
@media (max-width: 640px) {
  .tw-seg-fields { grid-template-columns: 1fr; }
  .tw-timeline-stepper { gap: 0; }
  .tw-timeline-icon { width: 32px; height: 32px; font-size: 14px; }
  .tw-timeline-label { font-size: 10px; }
  .tw-timeline-connector { min-width: 4px; }
  .tl-stepper { gap: 0; }
  .tl-step-icon { width: 30px; height: 30px; font-size: 13px; }
  .tl-step-label { font-size: 9px; }
}
/* ── /Seguimiento de pedidos ─────────────────────────────────────────────── */

/* ── F2 Descuento porcentual por cliente (2026-05-31) ───────────────────── */

/* Badge "X% OFF" en el botón de sesión del header */
.tw-descuento-cliente-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--color-success, #2e8b3d);
  color: #ffffff;
  white-space: nowrap;
}
.tw-descuento-cliente-badge--btn {
  margin-left: 5px;
  vertical-align: middle;
}

/* Ítem del dropdown: "Tu descuento: X%" */
.tw-dropdown-descuento-cliente {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success, #2e8b3d);
  background: #f0fdf4;
  border-radius: 4px;
  margin: 0 6px 2px;
  text-align: center;
  letter-spacing: .2px;
}

/* Modificador semántico para tachados de descuento cliente (vs oferta).
   Visualmente igual a .tw-precio-anterior pero con nombre distinto para
   identificarlo en QA / futuras personalizaciones. */
.tw-precio-anterior--descuento-cliente,
.tw-cart-precio-tachado--descuento-cliente,
.tw-detail-price-old--descuento-cliente {
  /* hereda estilos base de la clase hermana; solo tono levemente distinto */
  color: #6b7280;
}

/* Mobile: badge no debe romper el botón de sesión en pantallas angostas */
@media (max-width: 480px) {
  .tw-descuento-cliente-badge--btn {
    font-size: 9px;
    padding: 1px 5px;
  }
}
/* ── /F2 Descuento porcentual por cliente ────────────────────────────────── */

/* ── Altura mínima personalizable por bloque ─────────────────────────────── */
/* El wrapper se aplica solo cuando b.props.altura_min_px > 0.
   El min-height se inyecta via CSS custom property --tw-alt para
   que la media query mobile pueda caparlo a 600px. */
.tw-block-altura-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: var(--tw-alt, 0px);
}
/* Mobile: cap a 600px para evitar bloques gigantes en pantallas chicas */
@media (max-width: 768px) {
  .tw-block-altura-wrap {
    min-height: min(var(--tw-alt, 0px), 600px);
  }
}
/* ── /Altura mínima personalizable por bloque ────────────────────────────── */

/* ── #62 Bloque "Comprá por rubro" ──────────────────────────────────────── */
/* Grid de cards de rubro: igual estructura que .tw-cat-grid / .cat-card
   pero con popover de sub-categorías en desktop y tap-to-expand en mobile. */

.tw-rubro-grid {
  display: grid;
  grid-template-columns: repeat(var(--rubro-cols, 4), 1fr);
  gap: 16px;
}

/* Card de rubro: base igual a cat-card */
.tw-rubro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  text-align: center;
  /* overflow visible para que el popover salga fuera */
  overflow: visible;
}
.tw-rubro-card:hover,
.tw-rubro-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  outline: none;
}

/* Imagen del rubro */
.tw-rubro-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Fallback sin imagen: inicial centrada en fondo gris */
.tw-rubro-card-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary, #1f4e8c);
  background: #f1f5f9;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

/* Nombre del rubro */
.tw-rubro-card-nombre {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  line-height: 1.3;
}

/* Indicador de sub-categorías disponibles (desktop) */
.tw-rubro-card-hint {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Popover desktop (hover) ──────────────────────────────────────────────── */
.tw-rubro-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 12px;
  min-width: 180px;
  max-width: 240px;
  text-align: left;
}
/* Flecha apuntando hacia la card */
.tw-rubro-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top: none;
  border-bottom-color: #e2e8f0;
}
.tw-rubro-popover::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: none;
  border-bottom-color: #fff;
}

/* Mostrar el popover al hacer hover en desktop */
@media (hover: hover) and (min-width: 769px) {
  .tw-rubro-card:hover .tw-rubro-popover,
  .tw-rubro-card:focus-within .tw-rubro-popover {
    display: block;
  }
}

/* Links de categoría dentro del popover */
.tw-rubro-cat-link {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #1e293b;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-rubro-cat-link:hover {
  background: #f1f5f9;
  color: var(--color-primary, #1f4e8c);
}

/* ── Mobile tap-to-expand ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tw-rubro-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* En mobile, el popover es panel inline debajo de la card */
  .tw-rubro-popover {
    position: static;
    transform: none;
    display: none;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    margin: 4px -12px -12px;
    padding: 8px 12px;
    min-width: 0;
    max-width: none;
  }
  .tw-rubro-popover::before,
  .tw-rubro-popover::after {
    display: none;
  }
  /* Cuando la card tiene el atributo data-expanded, muestra el panel */
  .tw-rubro-card[data-expanded] .tw-rubro-popover {
    display: block;
  }
  /* Resaltar card expandida */
  .tw-rubro-card[data-expanded] {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border-color: var(--color-primary, #1f4e8c);
  }
}
/* ── /#62 Bloque "Comprá por rubro" ─────────────────────────────────────── */