/* airos-mobile-fix.css — Fase 452
   Arreglos de celular para TODAS las portadas (se agrega solo desde index.php y catalogo.php):
   1) Nada que se pase del ancho de la pantalla puede agrandar la página ni correrla hacia los costados.
      (Medido en vivo: el encabezado de La Quadra se pasaba 15 px y el navegador del celu agrandaba toda la página.)
   2) Las grillas de productos de las plantillas con columnas de 200 px mínimo (ferretería, compustore, cocina natural,
      doña tula) quedaban en UNA sola columna gigante en el celular: ahora van de a 2, todas del mismo ancho. */

/* overflow-x:clip (no hidden): no crea scroll propio, así que el encabezado sticky sigue funcionando */
html, body { overflow-x: clip; max-width: 100%; }
img, video, canvas, iframe { max-width: 100%; }
/* los hijos de una grilla pueden achicarse: un título largo o una imagen grande no ensanchan la columna */
[class*="grid"] > * { min-width: 0; }

@media (max-width: 520px) {
  .cs-grid, .fer-grid, .cn-grid, .dt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch;
  }
  /* encabezado con logo + nombre (Vinoteca / La Quadra): el logo se achica antes que empujar los íconos fuera de pantalla */
  .vn-logo-a { flex-shrink: 1 !important; min-width: 0; }
  .vn-logo-a img { max-width: 110px !important; }
  .vn-logo-t { font-size: clamp(18px, 6vw, 39px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}