/* ============================================================
   ECOMMERCE — Ajustes por tamaño de pantalla.

   ESCRITO A MANO. No lo genera ningún script: styles/ecommerce.css sí es generado
   (scripts/build-ds-styles.js) y se sobreescribe entero en cada regeneración del
   design system, así que nada de lo de acá puede vivir ahí.

   ── Qué va acá y qué va en JS ──────────────────────────────
   Acá: valores. Tamaños de fuente, gutters, gaps, altura de controles. Todo eso son
   tokens, y un token se reescribe con una @media sin tocar un solo componente.

   En JS (src/ecommerce/media.js): estructura. Los 23 componentes del design system
   no tienen ni un className —todo el layout es estilo inline— y una @media no le
   gana a un estilo inline ni tiene a qué apuntarle. Las grillas que cambian de
   forma se deciden en el render con matchMedia.

   ── Por qué `body[data-ds="shop"]` y no `[data-ds="shop"]` ─
   styles/ecommerce.css declara los tokens en `[data-ds="shop"]`, especificidad
   (0,1,0). Agregarle el elemento sube a (0,1,1) y esta hoja gana esté donde esté el
   <link>, igual que el sistema del ecommerce le gana al del sitio sin depender del
   orden. Ver "Hay DOS design systems" en CLAUDE.md.

   Los cortes (600 / 800 / 1100) son los mismos que usa el sitio en
   styles/components.css.
   ============================================================ */

/* ——— ≤1100: tablet y notebook chica ——— */
@media (max-width: 1100px) {
  body[data-ds="shop"] {
    --page-gutter: 16px;
    --section-gap: 30px;
    --display-hero-size: 42px;
  }
}

/* ——— ≤800: celular. Es el corte principal ——— */
@media (max-width: 800px) {
  body[data-ds="shop"] {
    --page-gutter: 14px;
    --grid-gap: 12px;
    --section-gap: 26px;

    /* El hero a 52px son dos palabras por renglón en 390 px de ancho. */
    --display-hero-size: 32px;
    --display-xl-size: 24px;
    --display-lg-size: 21px;

    /* La barra de utilidades pasa a envolverse en varias líneas: con alto fijo
       quedaba el texto cortado por arriba y por abajo. */
    --topbar-h: auto;
    --navbar-h: 46px;

    /* Objetivo táctil: 44 px es el mínimo cómodo para el dedo. */
    --control-h: 42px;
    --control-h-lg: 46px;
  }
}

/* ——— ≤600: celular angosto ——— */
@media (max-width: 600px) {
  body[data-ds="shop"] {
    --page-gutter: 12px;
    --section-gap: 22px;
    --display-hero-size: 27px;
    --display-xl-size: 21px;
  }
}

/* Última red de contención: un código de repuesto es una cadena larga sin espacios
   ("0140100-16", "PS082PH") y en una tarjeta de media pantalla puede no entrar entero.

   Los dos valores hacen falta y no son intercambiables:

   - `break-word` en todo: parte una palabra SOLO si no entra. No cambia el ancho
     mínimo del elemento, así que el texto normal se sigue midiendo por su palabra más
     larga y no se corta al medio si hay lugar.
   - `anywhere` solo en los códigos: además de partir, baja el ancho mínimo a un
     carácter. Es lo que evita que un código largo estire su columna de grilla y empuje
     la página, pero aplicado en todos lados hace que el navegador PREFIERA cortar —
     y deja cosas como "ACTUALIZAD/O" partido teniendo espacio de sobra. */
@media (max-width: 800px) {
  body[data-ds="shop"] {
    overflow-wrap: break-word;
  }

  /* El selector por atributo `style` no es elegante, pero es el único enganche que hay:
     el design system no emite ni una clase y los códigos van como
     <span style="font-family: var(--font-mono)">. `.ch-code` existe pero no lo usa
     ningún componente (0 apariciones en vendor/chiappo-ds.js). */
  body[data-ds="shop"] code,
  body[data-ds="shop"] kbd,
  body[data-ds="shop"] samp,
  body[data-ds="shop"] .ch-code,
  body[data-ds="shop"] [style*="--font-mono"] {
    overflow-wrap: anywhere;
  }
}