/* Pantallas grandes (monitores anchos, 1600px+): el sitio estaba pensado para el ancho
   típico de una laptop (hasta ~1500px) — en un monitor más grande, el contenido se
   quedaba con ese mismo tamaño "de laptop" en medio de mucho espacio en blanco, dando
   la sensación de que todo (letras, fotos, secciones) se ve más chico de lo que debería.
   Se sube el tamaño base de fuente (todo el sitio usa rem, así que esto escala letras Y
   espaciados basados en rem de una sola vez) y se amplían los anchos máximos de las
   secciones de layout, en dos escalones según qué tan grande sea la pantalla.

   A propósito NO se tocan las columnas de puro texto (.contact-section, .faq-inner,
   .emp-conditions-inner, .emp-contact, .qs-story): un párrafo demasiado ancho es más
   difícil de leer sin importar el tamaño de pantalla, así que esas se quedan angostas
   aposta. */
@media (min-width: 1600px) {
  html { font-size: 18px; }

  .header-inner { max-width: 1800px; }
  .section, .section-head { max-width: 1700px; }
  .ca-strip { max-width: 1700px; }
  .footer-nav { max-width: 1600px; }
  .search-overlay form { max-width: 1800px; }

  .shop-layout, .page-banner { max-width: 1700px; }
  .emp-values { max-width: 1500px; }
  .qs-values-inner { max-width: 1500px; }
  .breadcrumb, .product-page { max-width: 1600px; }
  .related-section { max-width: 1700px; }

  .product-media { height: 340px; }
}

@media (min-width: 2000px) {
  html { font-size: 20px; }

  .header-inner { max-width: 2000px; }
  .section, .section-head { max-width: 1900px; }
  .ca-strip { max-width: 1900px; }
  .footer-nav { max-width: 1800px; }
  .search-overlay form { max-width: 2000px; }

  .shop-layout, .page-banner { max-width: 1900px; }
  .emp-values { max-width: 1700px; }
  .qs-values-inner { max-width: 1700px; }
  .breadcrumb, .product-page { max-width: 1800px; }
  .related-section { max-width: 1900px; }

  .product-media { height: 380px; }
}