/* Leizer Tienda — ajustes responsive compartidos para celular.
   Cargado al final del <head> de TODAS las páginas (después del <style> inline)
   para hacer responsive los componentes compartidos sin duplicar reglas.
   Objetivo: que todo se vea bien en cualquier pantalla, por default. */

@media (max-width: 560px) {
  /* ── Header ──────────────────────────────────────────────────
     Cabían en una fila: marca + switcher "Servicios/Tienda" + cuenta + carrito
     y se desbordaba (cortaba el botón de cuenta). Compactamos: marca más chica,
     switcher oculto (queda en desktop), cuenta/carrito a la derecha. */
  .header-inner { gap: 8px; justify-content: space-between; }
  .brand { font-size: 15px; }
  .header-inner .lz-switcher,
  .nav-inner .lz-switcher,
  .top-inner .lz-switcher { display: none; }

  /* ── Footer ──────────────────────────────────────────────────
     Las columnas del footer no caben en fila en celular → una sola columna. */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }

  /* ── Buscador + chips (Nuevos, Compacto) ─────────────────────
     No caben en una fila y "Compacto" se cortaba → buscador toma toda la fila
     y los chips bajan a la segunda. */
  .mc-search-bar, .pd-search-bar { flex-wrap: wrap; }
  .mc-search, .pd-search { flex: 1 1 100%; }
}

@media (max-width: 400px) {
  /* Pantallas muy angostas: aún más compacto para no cortar la cuenta. */
  .brand { font-size: 14px; }
  .header-inner .cart-btn { padding-left: 8px; padding-right: 8px; }
}
