/* Noperti - Pantallas muy grandes (monitores 4K / ultra anchos, desde 2200 px de ancho visible).
   No cambia nada en pantallas normales (hasta 2199 px). Para revertir: quitar el <link> en header.php.
   - Paginas de texto y fichas (producto, cuenta, contacto...): contenido proporcionado, centrado.
   - Listados de productos (inicio, Hogar, categorias): ancho completo, tarjetas iguales y justificadas. */

@media (min-width: 2200px) {
  html { font-size: 112.5%; }
  .container { max-width: 1500px; }
  body.np-ancho .container { max-width: 2040px; }
  body.np-ancho .row.g-2.g-xl-3, body.np-ancho .row.g-2.g-xl-4 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 460px));
    justify-content: space-between; gap: 1.25rem; margin-left: 0; margin-right: 0;
  }
  body.np-ancho .row.g-2.g-xl-3 > *, body.np-ancho .row.g-2.g-xl-4 > * { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
}
@media (min-width: 2800px) {
  html { font-size: 125%; }
  .container { max-width: 1700px; }
  body.np-ancho .container { max-width: 2500px; }
  body.np-ancho .row.g-2.g-xl-3, body.np-ancho .row.g-2.g-xl-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 520px)); }
}
@media (min-width: 3400px) {
  html { font-size: 150%; }
  .container { max-width: 2000px; }
  body.np-ancho .container { max-width: 3000px; }
  body.np-ancho .row.g-2.g-xl-3, body.np-ancho .row.g-2.g-xl-4 { grid-template-columns: repeat(auto-fit, minmax(300px, 600px)); }
}

/* Cabecera: mismo ancho y posicion en TODAS las paginas (no depende de body.np-ancho). */
@media (min-width: 2200px) { body #header .container, body.np-ancho #header .container { max-width: 1500px; } }
@media (min-width: 2800px) { body #header .container, body.np-ancho #header .container { max-width: 1700px; } }
@media (min-width: 3400px) { body #header .container, body.np-ancho #header .container { max-width: 2000px; } }