/**
 * responsive.css — Ajustes de responsividad del sitio.
 * Se carga DESPUÉS de main.css (y catalog-view.css en catalog.html) en
 * las 6 páginas, así que cualquier regla acá tiene prioridad por orden
 * de cascada sin necesitar !important. Reglas de layout/breakpoints
 * que ya vivían sueltas en main.css se van a ir migrando para acá a
 * medida que se retocan — no se movió nada que no se haya tocado esta
 * sesión, para no arriesgar romper algo que ya funciona.
 *
 * Progreso (sesión 2026-09-05): nav (header) + footer.
 */

/* ============ NAV — colapso a hamburguesa ============
   Antes este colapso pasaba a los 880px (regla original en main.css).
   Medido con Playwright abriendo el sitio real en un navegador headless
   (inglés y español — el español es más largo: "Lo más vendido",
   "Distribuidores") el nav en una sola línea ya se rompe antes de los
   880px: entre ~880px y ~1040px "About Us"/"Lo más vendido" se parten
   en dos renglones y el pill de idioma choca con "Contact". Subido a
   1080px para cerrar esa zona muerta con margen (cubre además el ancho
   real del logo, que hoy se mide con un placeholder en las pruebas). */
@media (max-width:1080px){
  .main-nav4{ display:none; }
  .lang-toggle{ display:none; }
  .menu-toggle{ display:block; }
  .mobile-menu{ display:flex; }
}

/* Breakpoint de contenido de la sección About de la home — vivía en el
   mismo bloque que el nav en main.css, sin relación real con el header.
   Movido tal cual (sin cambios) al separar ese bloque. */
@media (max-width:880px){
  .about-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:repeat(3,1fr); }
}

/* A 320px (iPhone SE y gama baja Android) la 3ra columna ("427+
   Products") se corta afuera del viewport — medido con Playwright:
   el borde derecho queda en 334px sobre un viewport de 320px. A
   340px+ ya entra bien, así que el problema es puntual de ese ancho
   mínimo; apila a una columna para tener margen real. */
@media (max-width:420px){
  .about-stats{ grid-template-columns:1fr; gap:1rem; }
}

/* ============ NAV — menú móvil: acordeón de "Shop" ============
   Antes las categorías iban sueltas como links planos en el menú
   móvil, antes de Best Sellers/About/Distributors/Contact. Con eso
   sumado, el menú no entraba en el max-height fijo (520px) que tenía
   .mobile-menu.is-open y no había scroll — quedaba cortado a la mitad.
   Ahora las categorías son un submenú colapsable de "Shop" (mismo
   patrón que el acordeón de filtros del catálogo: grid-template-rows
   0fr/1fr, sin medir nada por JS — ver initFilterAccordion en
   catalog.js / el toggle gemelo en main.js initNavbar). */
.mobile-nav-group{ border-bottom:1px solid var(--gray-lt); }
.mobile-nav-toggle{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:none; border:none; padding:0.95rem 1.5rem; margin:0; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-weight:700; font-size:0.95rem; color:var(--ink);
}
.mobile-nav-chev{ transition:transform 0.25s ease; flex-shrink:0; color:var(--gray-text); }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chev{ transform:rotate(180deg); }

.mobile-nav-submenu-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.3s ease; background:rgba(65,65,65,0.03); }
.mobile-nav-submenu-wrap.is-open{ grid-template-rows:1fr; }
.mobile-nav-submenu{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
.mobile-nav-submenu a{
  padding:0.75rem 1.5rem 0.75rem 2.4rem; text-decoration:none; color:var(--ink);
  font-weight:600; font-size:0.88rem; border-bottom:1px solid var(--gray-lt);
}

/* El menú móvil entero (no solo el submenú de Shop) tenía un
   max-height fijo de 520px pensado para el listado plano viejo. Con
   más contenido (acordeón incluido) no alcanza, y al ser overflow:
   hidden se cortaba sin avisar — sin scroll. Pasa a un tope relativo
   al viewport con scroll propio, así siempre entra todo o se puede
   bajar a verlo. */
.mobile-menu.is-open{
  max-height:min(80vh, 640px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

@media (prefers-reduced-motion: reduce){
  .mobile-nav-chev{ transition:none; }
  .mobile-nav-submenu-wrap{ transition:none; }
}

/* ============ NAV — login de distribuidor en el header ============
   Antes se escondía a los 820px (regla original en main.css) porque el
   nav colapsaba a hamburguesa recién a los 880px y esa franja quedaba
   apretada. Ahora que el nav colapsa a los 1080px, entre 481-1080px el
   header en modo hamburguesa tiene lugar de sobra para el botón (logo +
   login + carrito + hamburguesa, medido con Playwright, entra
   holgado). Baja a 480px, y por debajo de eso el login sigue
   disponible desde adentro del menú móvil (ver más abajo). */
/* v17.23.6: en tablet (hasta 1080px, cuando el nav ya es hamburguesa)
   la cuenta también vive solo dentro del menú — antes salía dos veces
   (botón del header + bloque del menú). Igual que en el celular. */
@media (max-width:1080px){ .login-toggle, .account-wrap{ display:none !important; } }
/* Entre 481 y 640px el nombre se recorta más, para que el menú de
   cuenta no empuje al carrito ni a la hamburguesa. */
@media (max-width:640px){ .account-toggle{ max-width:9.5rem; } }

/* ============ NAV — menú móvil: efecto glass ============
   El panel entero (.mobile-menu) es hijo de <header>, que es
   position:sticky — al abrirse queda pegado arriba de la pantalla
   igual que el header, así que el mismo blur que ya usa .site-header4
   tiene un fondo real detrás para desenfocar (el contenido de la
   página, no un color plano). Incluye el submenú de Shop, una capa
   más clara encima para marcar el anidado sin perder el efecto. */
.mobile-menu{
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.mobile-nav-submenu-wrap{ background:rgba(255,255,255,0.4); }
.mobile-nav-group{ border-bottom:1px solid rgba(65,65,65,0.12); }
.mobile-menu a, .mobile-menu button{ border-bottom-color:rgba(65,65,65,0.12) !important; }

/* ============ NAV — color de categoría en el submenú de Shop ============
   Mismo lenguaje visual que el mega-menu de escritorio (.mega-dot):
   el puntito toma el color de la categoría al tocar/enfocar el link,
   no un gris genérico todo el tiempo — es una señal de interacción,
   no decoración fija. */
.mobile-nav-submenu-item{ display:flex; align-items:center; gap:0.7rem; }
.mobile-nav-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--gray);
  border:1px solid rgba(65,65,65,0.12); transition:background-color 0.15s ease, transform 0.15s ease;
}
.mobile-nav-submenu-item:active .mobile-nav-dot,
.mobile-nav-submenu-item:focus-visible .mobile-nav-dot{ transform:scale(1.3); }
.mobile-nav-submenu-item--grocery:active .mobile-nav-dot, .mobile-nav-submenu-item--grocery:focus-visible .mobile-nav-dot{ background:var(--cat-grocery); }
.mobile-nav-submenu-item--beverages:active .mobile-nav-dot, .mobile-nav-submenu-item--beverages:focus-visible .mobile-nav-dot{ background:var(--cat-beverages); }
.mobile-nav-submenu-item--frozen:active .mobile-nav-dot, .mobile-nav-submenu-item--frozen:focus-visible .mobile-nav-dot{ background:var(--cat-frozen); }
.mobile-nav-submenu-item--dairy:active .mobile-nav-dot, .mobile-nav-submenu-item--dairy:focus-visible .mobile-nav-dot{ background:var(--cat-dairy); }
.mobile-nav-submenu-item--bakery:active .mobile-nav-dot, .mobile-nav-submenu-item--bakery:focus-visible .mobile-nav-dot{ background:var(--cat-bakery); }
.mobile-nav-submenu-item--snacks:active .mobile-nav-dot, .mobile-nav-submenu-item--snacks:focus-visible .mobile-nav-dot{ background:var(--cat-snacks); }
.mobile-nav-submenu-item--spices:active .mobile-nav-dot, .mobile-nav-submenu-item--spices:focus-visible .mobile-nav-dot{ background:var(--cat-spices); }
.mobile-nav-submenu-item--sweets:active .mobile-nav-dot, .mobile-nav-submenu-item--sweets:focus-visible .mobile-nav-dot{ background:var(--cat-sweets); }
.mobile-nav-submenu-item--meats:active .mobile-nav-dot, .mobile-nav-submenu-item--meats:focus-visible .mobile-nav-dot{ background:var(--cat-meats); }
.mobile-nav-submenu-item--pinatas:active .mobile-nav-dot, .mobile-nav-submenu-item--pinatas:focus-visible .mobile-nav-dot{ background:var(--cat-pinatas); }
.mobile-nav-submenu-item--cleaning:active .mobile-nav-dot, .mobile-nav-submenu-item--cleaning:focus-visible .mobile-nav-dot{ background:var(--cat-cleaning); }
.mobile-nav-submenu-item--mixes:active .mobile-nav-dot, .mobile-nav-submenu-item--mixes:focus-visible .mobile-nav-dot{ background:var(--cat-mixes); }
.mobile-nav-submenu-item--rice:active .mobile-nav-dot, .mobile-nav-submenu-item--rice:focus-visible .mobile-nav-dot{ background:var(--cat-rice); }
.mobile-nav-submenu-item--sauces:active .mobile-nav-dot, .mobile-nav-submenu-item--sauces:focus-visible .mobile-nav-dot{ background:var(--cat-sauces); }
.mobile-nav-submenu-item--noodles:active .mobile-nav-dot, .mobile-nav-submenu-item--noodles:focus-visible .mobile-nav-dot{ background:var(--cat-noodles); }
.mobile-nav-submenu-item--coffee:active .mobile-nav-dot, .mobile-nav-submenu-item--coffee:focus-visible .mobile-nav-dot{ background:var(--cat-coffee); }

/* ============ NAV — botón de login dentro del menú móvil ============
   Antes el login de distribuidor solo vivía en el header (escondido
   por completo en pantallas chicas) — no había forma de llegar ahí
   con el menú abierto. Mismo texto/estado que el botón de escritorio
   (ver customer-auth.js, ahora sincroniza los dos). */
.mobile-login-toggle{
  background:none; border:none; padding:0.95rem 1.5rem; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-size:0.95rem; font-weight:700; color:var(--blue-dk);
}
.mobile-login-toggle[hidden], .mobile-account[hidden], .mobile-account-link[hidden]{ display:none; }

/* Frente 6: sección de cuenta dentro del menú móvil (con sesión). */
.mobile-account{ display:flex; flex-direction:column; border-bottom:1px solid rgba(65,65,65,0.12); }
.mobile-account-name{
  margin:0; padding:0.95rem 1.5rem 0.35rem; font-family:var(--font-body); font-size:0.72rem;
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray-text, #5a5a5a);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-menu .mobile-account-link{ padding-left:2.1rem; }
.mobile-account-logout{ padding-left:2.1rem; }

/* ============ NAV — logo en mobile ============
   Un poco más chico por debajo de los 620px — a tamaño completo (64px)
   se siente grande al lado de un header angosto. La separación del
   borde izquierdo la resuelve el fix de .header-row en main.css (tenía
   el mismo bug de shorthand que .section/.footer-grid4: pisaba el
   padding horizontal que le da .wrap-wide). */
@media (max-width:620px){
  .brand-img{ height:48px; }
}

/* ============ FOOTER — reorganizado en mobile ============
   Antes, apilado en una columna, todo quedaba pegado a la izquierda:
   logo, texto y los 3 bloques (Shop/Visit us/Contact) en fila recta
   sin ninguna separación visual entre ellos — se leía como un solo
   bloque de texto largo, no como secciones. Centrado + una línea
   separadora entre cada bloque, mismo criterio que ya usa
   .footer-row (borde superior) para la fila de copyright. */
@media (max-width:520px){
  .footer-grid4{ text-align:center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-brand p{ max-width:32ch; }
  .footer-social{ justify-content:center; }
  .footer-col{
    display:flex; flex-direction:column; align-items:center;
    padding-top:1.8rem; margin-top:1.8rem; border-top:1px solid rgba(255,255,255,0.14);
  }
  .footer-col ul{ justify-items:center; }
}

/* ============ HERO — chips de categoría en mobile ============
   Antes: flex-wrap normal, quedaban en 2-3 filas parejas a la
   izquierda con el borde derecho desparejo — no roto, pero no se leía
   como una fila ordenada, se leía como "tirado ahí". Mismo lenguaje
   que ya usan las tabs de categoría del showcase (.category-tabs):
   una sola fila con scroll horizontal propio, prolijo en vez de
   partido en renglones dispares. */
@media (max-width:620px){
  .chip-row{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:1.5rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
  }
  .chip-row::-webkit-scrollbar{ display:none; }
  .chip-row .chip{ flex:0 0 auto; }
}

/* ============ SHOWCASE — tarjeta de producto estrella en mobile ============
   Antes, por debajo de los 600px, la tarjeta pasaba a columna
   (imagen cuadrada al 100% de ancho + info debajo) — terminaba mucho
   más alta que el video de al lado, dos bloques del mismo peso visual
   en vez de un video protagonista + una tarjeta chica de acompañamiento.
   Se mantiene en fila (imagen achicada a la izquierda + info a la
   derecha) en todo el rango mobile, así queda claramente más chica. */
@media (max-width:600px){
  .star-product{ flex-direction:row; }
  .star-product-media{ width:34%; aspect-ratio:1/1; }
  .star-product-info{ flex:1; padding:0.85rem 0.85rem 0.95rem; gap:0.55rem; }
  .star-product-title{ font-size:0.9rem; -webkit-line-clamp:2; }
  .star-product-price{ font-size:1.05rem; }
}

/* ============ FOOTER — tablet (521-880px) ============
   Antes: brand arriba (ya ocupaba el ancho completo) y Shop/Visit us/
   Contact caían en una grilla de 2 columnas — Shop y Visit us en una
   fila, Contact solo abajo con una celda vacía al lado. Ahora los 3
   van en una sola fila de 3 columnas parejas, y el logo + redes
   sociales quedan centrados arriba en vez de a la izquierda. */
@media (min-width:521px) and (max-width:880px){
  .footer-grid4{ grid-template-columns:repeat(3,1fr); }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .footer-brand p{ max-width:42ch; }
  .footer-social{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .mobile-nav-dot{ transition:none; }
}

/* ============ CATÁLOGO — tarjetas de producto muy angostas ============
   El botón "Add to cart" tiene white-space:nowrap (a propósito, se ve
   mal partido en dos líneas dentro de una píldora) y el precio+botón
   van en una fila con justify-content:space-between. En la vista de 2
   columnas (catalog-grid--medium/small) a 320-375px de viewport, la
   tarjeta no tiene ancho para los dos juntos y el botón se cortaba
   literalmente a la mitad ("Add to..."), tapado por el overflow:hidden
   de la tarjeta. flex-wrap deja que el botón baje a su propia línea
   completo en vez de cortarse — solo se activa cuando hace falta, no
   cambia nada en las tarjetas que sí tienen lugar. */
.catalog-card-price-row{ flex-wrap:wrap; }

/* ============ CATÁLOGO — tarjetas por tamaño en mobile ============
   Las fotos reales del catálogo van a ser 1:1 siempre — así que la
   imagen no se toca en ninguna vista (nada de aspect-ratio distinto
   por tamaño, eso hubiera recortado/distorsionado fotos reales).
   "Grande" y "mediano" vuelven a como estaban antes de esta sesión —
   ya se veían bien — con un ajuste chico de tipografía nada más.
   El cambio real es en "chica": mantiene la imagen 1:1 pero la achica
   y pone la tarjeta en horizontal (imagen a la izquierda, texto a la
   derecha) — ahí sí se nota la diferencia con "mediano" en vez de ser
   casi la misma tarjeta un poco más chica. El botón "Add to cart"
   pasa a ser un ícono (+) para no competir por espacio con el texto
   en una fila angosta. Pasa a una sola columna (antes 2) para que esa
   fila horizontal tenga aire real, no una mini-tarjeta apretada.
   "Lista" vuelve a esconder la imagen como siempre (igual que
   desktop, sin el agregado de esta sesión) — el único ajuste es
   acotar el título a una línea para que la tarjeta no se estire
   verticalmente con títulos largos. */
@media (max-width:425px){
  .catalog-search-group{ justify-content: center;}
  .catalog-search { min-width:0; width:100%; }
  .catalog-pdf-download{ min-width:0; width:100%; }
}

@media (max-width:620px){
  .catalog-grid--large .catalog-card-title,
  .catalog-grid--medium .catalog-card-title{ line-height:1.35; margin-top:0.1rem; }
  .catalog-grid--large .catalog-card-body,
  .catalog-grid--medium .catalog-card-body{ gap:0.4rem; }

  /* "Mediana" en mobile son 2 columnas angostas — el mismo problema
     de "chica" en desktop: el botón, al expandirse en :hover, no
     tenía lugar y en touch además queda pegado en "hover" después de
     un toque (los navegadores mobile simulan :hover con el primer
     tap y no lo sueltan hasta tocar otra cosa) — por eso una tarjeta
     quedaba con el botón expandido y la de al lado no, sin que el
     usuario haya hecho nada raro. Mismo arreglo que "chica": ya
     expandido siempre, sin animación de ancho. */
  .catalog-grid--medium .catalog-card-add{
    grid-template-columns:34px minmax(0,1fr); width:100%;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease;
  }
  .catalog-grid--medium .catalog-card-add-label{ opacity:1; }
  .catalog-grid--medium .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:34px minmax(0,1fr); transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.22);
  }
  .catalog-grid--medium .catalog-card-price-row{ flex-wrap:wrap; }

  /* Carrusel de "También te puede interesar" (product.html) — mismas
     tarjetas .catalog-card, mismo problema de botón pegado en hover
     táctil que "mediana" del catálogo (el navegador simula :hover con
     el primer toque y no lo suelta hasta tocar otra cosa). Mismo
     arreglo: botón ya expandido siempre en mobile. */
  .carousel-card .catalog-card-add{
    grid-template-columns:34px minmax(0,1fr); width:100%;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease;
  }
  .carousel-card .catalog-card-add-label{ opacity:1; }
  .carousel-card .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:34px minmax(0,1fr); transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.22);
  }
  .carousel-card .catalog-card-price-row{ flex-wrap:wrap; }

  /* La imagen ahora ocupa el alto completo de la tarjeta manteniendo
     1:1. Probado con align-self:stretch + aspect-ratio (la forma
     "normal" en flexbox) pero no calculaba bien el ancho a partir del
     alto estirado — daba una imagen angosta y deforme, no cuadrada
     (confirmado midiendo en aislado). Con position:absolute +
     height:100% sobre la tarjeta (position:relative) el cuadrado se
     resuelve bien siempre, porque dejar de ser parte del flujo evita
     la dependencia circular (imagen depende de la altura de la fila,
     la fila depende del texto, no de la imagen).
     En tarjetas con más contenido (2 líneas de título, etc.) la fila
     es más alta y la imagen, al ser cuadrada, se hace más ancha —
     puede llegar a comerle espacio al texto. Para eso el panel de
     texto tiene SIEMPRE fondo glass (antes solo grande/mediana), con
     padding-left reservando el ancho típico: si la imagen crece más
     de lo esperado, el texto sigue legible sobre el glass en vez de
     quedar tapado por la foto. */
  .catalog-grid--small .catalog-card{ flex-basis:100%; position:relative; padding:0; }
  .catalog-grid--small .catalog-card-image{
    position:absolute; top:0; left:0; height:100%; width:auto; aspect-ratio:1/1; z-index:0;
  }
  .catalog-grid--small .catalog-card-image svg{ width:26%; max-width:32px; height:auto; }
  .catalog-grid--small .catalog-card-body{
    flex-direction:column; margin-left: 6.9rem; padding: 0.65rem 0.75rem 0.65rem 0.85rem; gap:0.25rem; min-width:0;
    margin-top:0; z-index:1; position:relative; border-radius:0; border-top:none;
    background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .catalog-grid--small .catalog-card-title{
    font-size:0.85rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  /* El meta-row (precio junto al vendor) es solo para desktop — ver
     catalog.js. En mobile "small" el botón ya es estático (sin
     animación de hover), así que no hace falta separar el precio del
     botón: vuelve al orden de siempre — vendor, stock, precio junto
     al botón abajo. */
  .catalog-grid--small .catalog-card-price-row{ margin-top:0.1rem; padding-top:0; flex-wrap:nowrap; }
  .catalog-grid--small .catalog-card-add{
    width:30px; height:30px; border-radius:50%; padding:0; flex-shrink:0;
    grid-template-columns:30px minmax(0,0fr); height:30px;
  }
  .catalog-grid--small .catalog-card-add-icons{ width:30px; height:30px; }
  .catalog-grid--small .catalog-card-add-icons svg{ width:13px; height:13px; }
  .catalog-grid--small .catalog-card-add-label{ display:none; }
  .catalog-grid--small .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:30px minmax(0,0fr); transform:none;
  }
  .catalog-grid--small .catalog-card-add.is-disabled{
    width:auto; height:auto; border-radius:999px; padding:0.35rem 0.6rem; font-size:0.65rem;
  }

  /* Lista en mobile — segundo intento. El primero (todo apilado en
     columna, sin imagen) arreglaba la lectura pero dejaba de sentirse
     como una lista — se veía como una tarjeta "small" sin foto, muy
     alta, una fila por pantalla casi. Una lista de verdad tiene que
     ser compacta: filas angostas, mucho más densas que las tarjetas.
     Nueva fila: título en una sola línea (con "…" si no entra — ya
     tiene mucho más lugar que antes al no competir con vendor/sku/
     precio en la misma línea), una segunda línea chica con categoría
     · vendor · stock · precio, y el botón (ícono solo) a la derecha,
     centrado con TODA la fila via align-items:center en el contenedor
     — no empujado desde abajo por ningún padding/margin, así no se
     repite el bug de "todo por arriba". */
  /* El botón pasa a quedar fijo abajo-a-la-derecha de toda la fila
     (no adentro de la columna de texto) — position:absolute anclado
     a la tarjeta. padding-right/padding-bottom en el body le hacen
     lugar para que el texto no quede tapado detrás.
     La imagen vuelve a aparecer al tocar (mismo mecanismo que ya usa
     desktop — de 0 a 64px, ver catalog-view.css — en vez de estar
     oculta siempre): en touch, tocar simula :hover. Es un empuje
     chico (64px) a propósito ("apenas empuje"). El panel de texto
     tiene fondo glass acá también (antes transparente, pensado para
     desktop donde la imagen nunca convive con el texto) — así si la
     imagen revelada llega a apretar el texto en una fila petisa, se
     sigue leyendo bien, mismo criterio que "chica". */
  .catalog-grid--list .catalog-card{
    position:relative; flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden;
  }
  .catalog-grid--list .catalog-card-image{ align-self:stretch; }
  .catalog-grid--list .catalog-card-body{
    flex-direction:column; align-items:stretch; gap:0.2rem; flex:1; min-width:0;
    margin-top:0; border-radius:0; border-top:none;
    padding:0.6rem 3.1rem 0.6rem 0.85rem;
    background:rgba(255,255,255,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .catalog-grid--list .catalog-card-top{ display:none; }
  .catalog-grid--list .catalog-card-title{
    font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; width:100%;
  }
  .catalog-grid--list .catalog-card-list-meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; font-family:var(--font-body);
    font-size:0.7rem; color:var(--gray-text); font-weight:600;
  }
  .catalog-grid--list .catalog-card-list-meta .catalog-card-vendor{ font-size:0.7rem; margin:0; width:auto; }
  .catalog-grid--list .catalog-card-list-meta .stock-badge{ font-size:0.68rem; }
  .catalog-grid--list .catalog-card-list-meta .catalog-card-price{ font-size:0.72rem; }
  .catalog-grid--list .catalog-card-price-row{
    position:absolute; right:0.65rem; bottom:0.6rem; z-index:2; margin:0; padding:0;
  }
  .catalog-grid--list .catalog-card-add{
    grid-template-columns:30px minmax(0,0fr); height:30px; width:30px; border-radius:50%; padding:0;
  }
  .catalog-grid--list .catalog-card-add-icons{ width:30px; height:30px; }
  .catalog-grid--list .catalog-card-add-icons svg{ width:13px; height:13px; }
  .catalog-grid--list .catalog-card-add-label{ display:none; }
  .catalog-grid--list .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:30px minmax(0,0fr); transform:none;
  }
}

/* ============ CATÁLOGO — filtros en tablet/mobile ============
   v17.19.0: el panel desde abajo (bottom sheet) y la barra de búsqueda /
   Filtros / Ordenar viven en shop.css. */

/* ============ DISTRIBUIDORES — hero en mobile ============
   El título ya estaba en el piso de su clamp (1.8rem) — a ese tamaño,
   en la columna angosta de mobile, envuelve a 3 líneas y ocupa mucho
   alto. El botón "Apply for a distributor account" heredaba el
   tamaño de fuente base (17px) y a ese tamaño el texto no entra en
   una sola línea dentro de la píldora — se partía en 2. Los dos
   bajan de tamaño acá, solo en mobile (desktop/tablet quedan igual). */
/* El grid de 3 columnas necesita un paso intermedio antes de colapsar
   del todo — de 3 a 1 de golpe se siente un salto raro en tablet. */
@media (max-width:900px){
  .form-row-group--3{ grid-template-columns:1fr 1fr; }
}

@media (max-width:620px){
  .dist-hero-content{ padding:2.2rem 1.4rem; }
  .dist-hero-content h1{ font-size:1.5rem; margin:0.5rem 0 0.7rem; }
  .dist-hero-content p{ font-size:0.92rem; }
  .dist-hero-cta{ font-size:0.85rem; padding:0.75rem 1.3rem; align-self: center;}
  /* .form-row-group (2 col) tampoco colapsaba hasta ahora — no es que
     lo haya roto esta sesión, ya estaba así; se corrige de una vez
     mientras se toca este mismo bloque. */
  .form-row-group,
  .form-row-group--3{ grid-template-columns:1fr; }
  .dist-form-card{ padding:1.8rem 1.4rem; }
}

/* ============ CATÁLOGO — vista "mediana" en celulares angostos ============
   Sesión 2026-09-28. A 375px la vista mediana son 2 columnas de ~160px:
   "Agregar al carrito" no entra en la píldora y se cortaba ("Agregar al
   car…"), y el SKU ("SKU 1527") se partía en dos renglones montado
   sobre la categoría. Mismo criterio que pidió América para la lista:
   en móvil alcanza con el ícono — el botón sigue a todo el ancho (fácil
   de tocar), con el "+" centrado, y al agregar se pone verde con el
   check (estado .is-added de main.css). El nombre accesible del botón
   no cambia (aria-label "Agregar al carrito"). */
@media (max-width:480px){
  .catalog-grid--medium .catalog-card-add,
  .catalog-grid--medium .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:1fr; justify-items:center;
  }
  .catalog-grid--medium .catalog-card-add-label{ display:none; }
  .catalog-grid--medium .catalog-card-top{ flex-wrap:wrap; column-gap:0.5rem; row-gap:0.1rem; }
  .catalog-grid--medium .catalog-card-sku{ white-space:nowrap; }
}

/* Pantallas táctiles, cualquier vista del catálogo: el :hover queda
   "pegado" después de tocar, y cambiaba el "+" por el ícono del
   carrito sin que el usuario hiciera nada más. El ícono queda "+"
   hasta que se agrega (check verde). */
@media (hover:none){
  .catalog-card-add:hover:not(.is-disabled):not(.is-added) .icon-plus{ display:block; }
  .catalog-card-add:hover:not(.is-disabled):not(.is-added) .icon-cart{ display:none; }
}

/* ============ NAV — popover del carrito en celular (v14.0.1) ============
   Antes el panel se alineaba al botón del carrito (right:-0.5rem, en
   main.css). En celular ese botón no está pegado al borde (a su
   derecha va la hamburguesa), así que el panel de calc(100vw - 3rem)
   se salía ~17px por la izquierda a 375px. Ahora se alinea al ancho del
   header: .cart-wrap deja de ser la referencia y el panel queda con
   1rem de margen a cada lado, justo debajo del header. */
@media (max-width:480px){
  .header-row{ position:relative; }
  .cart-wrap{ position:static; }
  .cart-panel{ top:calc(100% + 0.25rem); left:1rem; right:1rem; width:auto; }
}
/* ============ NAV — menú móvil: cuenta e idioma aparte (v17.23.4) ============
   Maqueta 2026-10-15 (pedido de América): la navegación arriba; una
   franja gris de lado a lado la separa del "mini encabezado" del usuario
   (ícono + Mi cuenta + nombre) y su menú, que ocupan todo el ancho como
   la navegación (sin tarjeta). Otra franja separa el idioma, que usa el
   mismo selector EN | ES que el escritorio. */
.mobile-user-zone{ display:flex; flex-direction:column; }
.mobile-menu-sep{ display:block; height:10px; background:rgba(65,65,65,0.08); border-top:1px solid rgba(65,65,65,0.12); border-bottom:1px solid rgba(65,65,65,0.12); }
.mobile-user-zone > .mobile-login-toggle{ border-bottom:1px solid rgba(65,65,65,0.12); }
.mobile-user-zone .mobile-account{ border-bottom:none; }
.mobile-account-head{
  display:flex; align-items:center; gap:0.75rem; padding:0.9rem 1.5rem;
  background:rgba(22,96,159,0.07); border-bottom:1px solid rgba(65,65,65,0.12);
}
.mobile-account-icon{
  flex:none; width:36px; height:36px; padding:8px; border-radius:50%;
  background:var(--blue-dk); color:var(--white); box-sizing:border-box;
}
.mobile-account-head > span{ min-width:0; display:flex; flex-direction:column; }
.mobile-account-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray-text, #5a5a5a); }
.mobile-user-zone .mobile-account-name{
  padding:0; font-size:0.95rem; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:800;
}
.mobile-menu .mobile-user-zone .mobile-account-link,
.mobile-user-zone .mobile-account-logout{
  padding:0.85rem 1.5rem; display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left;
}
.mobile-lang-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 1.5rem; }
.mobile-lang-label{ display:inline-flex; align-items:center; gap:0.45rem; font-weight:700; font-size:0.9rem; color:var(--ink); }
.mobile-menu .mobile-lang-row .mobile-lang-toggle{ padding:3px; }

/* Maqueta 2 (2026-10-15): sin franjas grises. "Iniciar sesión" es un
   botón azul como el del hero, con letras blancas (1.2rem en negrita =
   texto grande para WCAG, así el azul del hero da el contraste). Con
   sesión, el mini encabezado del usuario va en azul oscuro de la marca. */
.mobile-menu-sep{ display:none; }
.mobile-user-zone{ border-top:1px solid rgba(65,65,65,0.12); }
.mobile-menu .mobile-user-zone > .mobile-login-toggle{
  margin:1rem 1.5rem; width:auto; padding:0.85rem 1rem; border:none; border-radius:999px;
  background:var(--blue); color:var(--white); font-size:1.2rem; font-weight:800; text-align:center;
  box-shadow:0 6px 16px rgba(29,128,213,0.28);
}
.mobile-user-zone > .mobile-login-toggle:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.mobile-account-head{ background:var(--blue-dk); border-bottom:none; }
.mobile-account-icon{ background:var(--white); color:var(--blue-dk); }
.mobile-account-label{ color:rgba(255,255,255,0.88); }
.mobile-user-zone .mobile-account-name{ color:var(--white); }
.mobile-menu .mobile-user-zone .mobile-account-link:focus-visible,
.mobile-menu .mobile-user-zone .mobile-account-link:active{ box-shadow:inset 4px 0 0 var(--accent); background:rgba(9,189,240,0.08); }
.mobile-user-zone .mobile-account-logout{ color:var(--blue-dk); }
.mobile-lang-row{ border-top:1px solid rgba(65,65,65,0.12); }

/* Maqueta 3 (2026-10-15): "Iniciar sesión" y "Cerrar sesión" con el mismo
   formato de las filas de navegación (ancho completo, alineadas a la
   izquierda), pero en color: azul de la marca, letras blancas. */
.mobile-menu .mobile-user-zone > .mobile-login-toggle{
  margin:0; width:100%; padding:0.95rem 1.5rem; border-radius:0; box-shadow:none;
  background:var(--blue-dk); color:var(--white); font-size:0.95rem; font-weight:700; text-align:left;
}
.mobile-menu .mobile-user-zone .mobile-account-logout{
  /* Azul un tono más claro que el encabezado de la cuenta (rojo descartado
     en la maqueta 4); con letras blancas da 4.8:1, pasa WCAG AA. */
  background:#1B74C4; color:var(--white); font-size:0.95rem; font-weight:700; border-bottom:none;
}
.mobile-user-zone > .mobile-login-toggle:focus-visible,
.mobile-user-zone .mobile-account-logout:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }

/* v17.23.6 — Menú del celular/tablet: todo aparece junto. Antes los
   enlaces de navegación tenían su propio fundido (empezaban en blanco y
   aparecían después) mientras la cuenta y el idioma salían de golpe.
   Ahora se anima solo el panel entero (alto + opacidad) y todo su
   contenido carga a la vez. */
.mobile-menu{ opacity:0; transition:max-height 0.35s ease, opacity 0.25s ease; }
.mobile-menu.is-open{ opacity:1; }
.mobile-menu a, .mobile-menu .mobile-lang-toggle, .mobile-menu.is-open a, .mobile-menu.is-open .mobile-lang-toggle{
  opacity:1; transform:none; transition:background-color 0.15s ease, color 0.15s ease;
}
@media (prefers-reduced-motion: reduce){ .mobile-menu{ transition:none; } }