/* ============================================================
   HEADER
   Un solo markup responsive. No hay variantes duplicadas por
   breakpoint: eso es lo que produce el bug de 767px en A.
   Medidas de referencia: reference/header/MEDIDAS.md
   Ningún color literal — todo sale de tokens.css.
   ============================================================ */

.t-header {
  /* 60 y no los 50 de A: el mismo margen que el marco común de las páginas
     (`style.css`), para que el header quede alineado con el contenido. */
  --t-header-gutter: 60px;
  --t-header-promo-h: 42px;   /* barra de promos */
  --t-header-row-h: 75px;     /* fila de escudo, marca, buscador e íconos */
  --t-header-nav-h: 66px;     /* fila del menú */
  position: relative;
  z-index: 100;
}

/* ---------- Barra de envío gratis ----------
   El markup lo emite el plugin `barra-envio` v2.0 vía [envio_gratis_barra]
   (ver inc/header.php e INVENTARIO.md §7.4). Acá va SOLO lo que el theme
   tiene que aportar, no una copia del CSS del plugin.

   Hay dos reglas del plugin que hay que neutralizar, y las dos porque hoy
   las tapa Elementor. Al apagarlo ganarían ellas y la barra cambiaría sola:

   1. El mensaje: el plugin lo declara `bold 16px`; en el header de A se mide
      14 px con peso 500 en todos los anchos. El interlineado NO: ese se hereda.
   2. El wrapper en mobile: el plugin pide `margin: 15px 0; padding: 12px`;
      en A se mide `margin: 5px 0; padding: 0`.

   Sin fondo propio: en A los cinco contenedores son transparentes y el
   blanco que se ve es el de la página. Se replica igual.

   Y NO lleva altura fija: con el carrito vacío el plugin pone su wrapper en
   `display: none` y en A la banda entera colapsa a 0 (medido: 1440x0), con
   la marquesina subiendo a ocupar su lugar. Una altura mínima acá dejaría
   un hueco blanco que A no tiene. Con carrito mide ~41.75 en desktop y ~41.6
   en mobile, y la altura la trae el contenido.
   ------------------------------------------- */

/* Prefijado con la raíz para ganarle al CSS del plugin sin !important, y
   prefijando también la regla del breakpoint —si solo se prefija la base, en
   el media query gana el plugin. Ver CLAUDE.md. */
.t-header .t-header__envio .barra-envio-wrapper {
  margin: 0;
  padding: 0;
}

/* La barra de progreso, a 17 px de alto. Pedido por la usuaria el 2026-09-29:
   sin esto toma el interlineado del texto (~25 px). Es la barra de adentro,
   no el wrapper, así que con el carrito vacío la banda sigue colapsando a 0.
   Mismo alto en el carrito (`compra.css`). */
.t-header .t-header__envio #barraEnvioGratis {
  height: 17px;
}

/* Sin `line-height`: en A es el 1.65 heredado del sitio en todos los anchos.
   Los 22.572px y 24.75px que se miden no son dos ajustes distintos, son el
   mismo 1.65 sobre el font-size del body, que Astra baja de 15 a 13.68 px en
   tablet. Declarar un valor fijo acá rompía justamente eso: con 1.612 la
   banda quedaba en 39.56 px contra los 41.75 de A. */
.t-header .t-header__envio .mensaje-envio {
  font-size: 14px;
  font-weight: var(--t-weight-medium);
  color: var(--t-shipping-msg);
}

/* 768 y no 767 a propósito. El resto del header corta en 767, pero A cambia
   en 768 inclusive —medido: a 768 la banda ya está en su versión mobile— y
   acá pesa más la paridad en uno de los tres breakpoints de referencia que la
   coherencia interna del archivo. */
@media (max-width: 768px) {
  /* Sin margen, como en desktop. En A el wrapper gana 5 px arriba y abajo, y
     se copió; pero esos 5 px se ven como dos franjas blancas, una arriba del
     mensaje y otra entre la barra de progreso y la marquesina. Se sacan a
     pedido de la usuaria el 2026-10-01: diferencia deliberada con A.
     La regla igual hace falta: sin ella el plugin aplicaría su propia regla
     mobile —`margin: 15px 0; padding: 12px`— y la banda pasaría a ~74. */
  .t-header .t-header__envio .barra-envio-wrapper {
    margin: 0;
    padding: 0;
  }

  /* Sin el margen, el mensaje quedaba pegado al borde de arriba. 6 px de aire
     solo arriba: abajo la barra sigue tocando la marquesina. Pedido de la
     usuaria el 2026-10-01. */
  .t-header .t-header__envio .mensaje-envio {
    padding-top: 6px;
  }
}

/* ---------- Barra de promociones ----------
   Marquesina: cuatro frases que giran sin fin, difuminadas en los dos
   bordes. En A el degradado NO es un fondo sino una máscara sobre el
   contenido, y por eso el naranja llega entero hasta el borde mientras
   el texto se desvanece. Se replica igual.
   ------------------------------------------ */

.t-header__promo {
  background: var(--t-promo-bar);
  color: var(--t-white);
  min-height: var(--t-header-promo-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.t-header__promo-mask {
  width: 100%;
  -webkit-mask-image: linear-gradient(to left,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0) 20%, rgb(0 0 0) 80%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(to left,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0) 20%, rgb(0 0 0) 80%, rgb(0 0 0 / 0) 100%);
}

.t-header__promo-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: t-marquee 38s linear infinite;
}

/* La pista lleva tres copias de las frases, así que recorrer un tercio
   deja el contenido exactamente donde estaba: el salto no se ve. */
@keyframes t-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

.t-header__promo:hover .t-header__promo-track,
.t-header__promo:focus-within .t-header__promo-track {
  animation-play-state: paused;
}

.t-header__promo-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-header__promo-item {
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-weight-regular);
  padding-inline: 18px;
}

/* El separador es decorativo: se dibuja, no se escribe en el texto. */
.t-header__promo-item::after {
  content: "|";
  margin-inline-start: 18px;
}

/* ---------- Barra principal ---------- */

.t-header__bar {
  position: relative;
  background: var(--t-navy-surface);
  color: var(--t-white);
  box-shadow: var(--t-shadow-header);
}

/* Textura del navy. Cubre solo la fila de arriba: la del menú la tapa con
   su propio fondo sólido, igual que en A, donde la sección del menú es una
   sección interna con `background-color` propio por encima del overlay. */
.t-header__textura {
  position: absolute;
  inset: 0;
  background-image: url("../img/patron-header.png");
  /* Se repite a tamaño natural (2049 × 101), como en A. Escalarla con
     `cover` agranda el dibujo casi al doble. */
  background-repeat: repeat;
  background-size: auto;
  opacity: .5;
  pointer-events: none;
}

/* Las columnas NO son «logo a la izquierda y el resto centrado»: en A la
   fila es un flex de cajas con ancho porcentual fijo (32 % / 32 % / 25,571 %),
   y por eso la marca «la Tienda» no cae en el centro de la página sino un
   poco a la izquierda. Reproducir los porcentajes es lo que la deja en el
   lugar exacto a cualquier ancho. */
.t-header__inner {
  position: relative; /* por encima de la textura */
  display: grid;
  grid-template-areas:
    "brand wordmark search actions"
    "nav   nav      nav    nav";
  grid-template-columns: 32% 32% 25.571% 1fr;
  align-items: center;
  padding: 0 var(--t-header-gutter);
  /* El mismo tope que las páginas: 1400 con el margen adentro. Las bandas
     —el navy con su textura, la marquesina, la barra de envío— siguen de
     borde a borde; lo que se acota es el contenido. Pedido de la usuaria el
     2026-10-01. */
  box-sizing: border-box;
  max-width: var(--t-container-wide);
  margin-inline: auto;
}

.t-header__brand    { grid-area: brand; }
.t-header__wordmark { grid-area: wordmark; }
.t-header__search   { grid-area: search; }
.t-header__actions  { grid-area: actions; }

.t-header__brand,
.t-header__wordmark,
.t-header__search,
.t-header__actions {
  min-height: var(--t-header-row-h);
  display: flex;
  align-items: center;
}

/* La marca va centrada dentro de su caja del 32 %, no dentro de la página. */
.t-header__wordmark { justify-content: center; }

/* ---------- Logo y marca ---------- */

/* `flex-shrink: 0` por lo mismo que la caja de la hamburguesa: el escudo y
   la marca son ítems flex, y en pantallas muy angostas el flex los encogía
   hasta 0 en vez de dejar que la fila se desborde. Un logo invisible es
   peor que un logo apretado. */
.t-logo,
.t-wordmark,
.t-logo__img,
.t-wordmark__img {
  flex-shrink: 0;
}

.t-logo,
.t-wordmark {
  display: inline-flex;
  align-items: center;
}

/* 80 × 68 es la caja exacta de A, pero el PNG es 226 × 269: A lo ensancha
   un 40 % y el escudo sale más gordo de lo que es. En tablet y mobile A sí
   respeta la proporción, así que el estirado de desktop era un descuido.
   Se conserva la caja y se corrige la deformación.

   Prefijado con `.t-header` por una capa que no es Elementor: en las vistas de WooCommerce
   Astra declara `.woocommerce img { height: auto }`, que con un solo selector
   de clase le ganaba al alto del escudo. En mobile el PNG salía a su tamaño
   natural, 226 × 269, en la tienda, las categorías y la búsqueda. Medido en B
   el 2026-09-28. Las reglas de tablet y mobile excluyen el header de compra,
   que declara las suyas con la misma especificidad y antes en el archivo. */
.t-header .t-logo__img {
  display: block;
  width: 80px;
  height: 68px;
  /* La caja sigue midiendo 80 × 68 como en A, pero el escudo ya no se
     deforma para llenarla: entra completo y sobra aire a la derecha.
     `left` y no el centro por defecto, para que el borde izquierdo siga
     cayendo en x 50 como en A; centrado se correría 11 px. */
  object-fit: contain;
  object-position: left center;
}

/* En A la marca se dimensiona por ancho, no por alto. */
.t-header .t-wordmark__img {
  display: block;
  width: 181px;
  height: auto;
}

.t-header .t-logo--texto {
  color: var(--t-white);
  font-family: var(--t-font-display);
  font-size: var(--t-h3-size);
  font-weight: var(--t-weight-display);
  text-decoration: none;
}

/* ---------- Buscador ----------
   El campo lo dibuja Typesense. El theme le da el hueco y los colores; el
   subrayado, el radio y el colapso a lupa en pantallas chicas son del
   plugin y funcionan solos. Pisarlos con reglas propias es lo que antes
   dibujaba una segunda línea debajo del campo.
   ------------------------------- */

.t-header__search {
  width: 100%;
}

.t-header__search .aa-Autocomplete,
.t-header__search .tss-wrap {
  width: 100%;
}

.t-header__search input[type="search"],
.t-header__search input[type="text"],
.t-header__search .aa-Input {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-weight-regular);
}

/* Gris apagado, no blanco: medido en A. */
.t-header__search ::placeholder {
  color: var(--t-search-placeholder);
  opacity: 1;
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-weight-regular);
}

/* Los estados del buscador. Typesense, con el campo en foco, pinta la lupa y
   la cruz de borrar con `!important` en `var(--e-global-color-primary, #7e1734)`:
   el bordó de un secundario anterior, que sin Elementor ya ni siquiera sale
   del kit. Y al pasar el mouse les pone fondo. Lo tapaba `custom-css-js`
   (ccj 378121), que se sacó el 2026-09-29 porque ninguna medición hizo foco
   ni hover en el campo. Mismos valores que en A.

   Sin prefijo `.t-header` a propósito: en celular el campo se abre en una capa
   que Typesense agrega al final del `<body>`, fuera del header. `html body`
   sube la especificidad por encima de la del plugin, que también es
   `!important`. */
html body .aa-Form:focus-within .aa-SubmitButton,
html body .aa-Form:focus-within .aa-ClearButton {
  color: var(--t-white) !important;
}

/* En celular el campo se abre en esa capa blanca, y Typesense le deja el
   texto en blanco (`input#autocomplete-0-input`, pensado para el header
   navy de desktop): lo que se tipeaba no se veía. Va en el color de A, que
   es el --t-ink. Y el anillo de foco lo arma el plugin con
   `--e-global-color-primary`, que sin el kit de Elementor cae a su bordó
   `#7e1734`; en A era el #202020 del kit, o sea --t-heading-alt al 35 %.
   Pedido de la usuaria el 2026-10-01.

   El blanco del plugin va por id, así que se le gana con especificidad de id:
   `:is()` toma la del argumento más fuerte, y la clase deja que la regla siga
   aplicando si el plugin numera distinto el campo. El anillo es `!important`
   en el plugin y solo se le gana con otro. */
html body .aa-DetachedContainer input:is(#autocomplete-0-input, .aa-Input) {
  color: var(--t-ink);
  caret-color: var(--t-ink);
}

html body .aa-DetachedContainer .aa-Form:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-heading-alt) 35%, transparent) !important;
}

html body .tss-wrap button.aa-SubmitButton:hover,
html body .tss-wrap button.aa-ClearButton:hover,
html body button.aa-DetachedSearchButton:hover {
  background: none !important;
}

/* Las facetas del panel de resultados, con mayúscula inicial: las etiquetas
   llegan en minúscula desde los atributos. También venía de ccj 378121. */
a.tss-facet__item {
  text-transform: capitalize;
}

/* ---------- Especificidad frente al kit de Elementor ----------
   Mientras Elementor siga activo, su `post-17608.css` carga DESPUÉS que este
   archivo y declara el color de link del kit en bordó. Con la misma
   especificidad gana el último, así que los links del header salían bordó.
   Por eso los selectores de color van prefijados con `.t-header`: sube la
   especificidad sin usar !important. Se puede simplificar en la Fase 4.
   ---------------------------------------------------------------- */

/* Buscador de respaldo de WooCommerce: Astra le pinta el botón con un teal
   de secundario anterior.

   Cuidado con el alcance. Esto decía además `.t-header__search
   button[type="submit"]`, a secas, y ese selector también agarra la lupa de
   Typesense —que es un submit— y la pintaba de naranja. Va anclado al
   formulario de WooCommerce y a ningún otro. */
.t-header__search .woocommerce-product-search button[type="submit"] {
  height: var(--t-input-height);
  padding: 0 16px;
  background: var(--t-accent);
  color: var(--t-white);
  border: 0;
  border-radius: var(--t-radius-input);
  font-family: var(--t-font-body);
  font-size: var(--t-body-sm-size);
}

.t-header__search .woocommerce-product-search {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- Acciones ---------- */

.t-header__actions {
  justify-content: flex-end;
  gap: 14px;
}

/* Prefijado con `.t-header` por lo mismo que los links del menú: el kit de
   Elementor declara su color de link y con menos especificidad los íconos
   salían bordó. */
.t-header .t-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--t-white);
  text-decoration: none;
  border-radius: var(--t-radius-input);
  transition: transform .2s ease;
}

/* En A los íconos crecen al pasar por encima (scale 1.15). */
.t-header .t-header__action:hover,
.t-header .t-header__action:focus-visible {
  color: var(--t-white);
  transform: scale(1.15);
}

.t-header__icon svg {
  display: block;
}

/* ---------- Botón de menú ---------- */

/* Prefijado con `.t-header`, y no por prolijidad: el kit de Elementor
   declara `.elementor-kit-17608 button` —fondo teal de secundario anterior,
   padding y radio— y carga después que este archivo. Sin el prefijo, la
   especificidad del kit gana y el botón sale como un recuadro teal con el
   ícono adentro. Es el mismo choque que ya se comió los links del menú y
   los íconos de carrito y cuenta: acá NO alcanza con resetear el color,
   hay que resetear también padding, radio y apariencia.

   Es 55 × 55 en tablet y en mobile, como en A. */
.t-header .t-header__toggle {
  grid-area: toggle;
  display: none;
  width: 55px;
  height: 55px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  color: var(--t-white);
}

.t-header .t-header__toggle:hover,
.t-header .t-header__toggle:focus,
.t-header .t-header__toggle:focus-visible,
.t-header .t-header__toggle:active {
  background: transparent;
  color: var(--t-white);
  box-shadow: none;
}

/* Geometría copiada del megamenú de A: caja de 40 × 24 y tres barras de
   40 × 4 con radio 4, separadas 6 px. Antes eran de 32 × 3 y se veían
   flacas y demasiado separadas.

   El color sí cambia: A las pinta `#ddd`, que es el gris por defecto del
   plugin y no una decisión de diseño. Van en blanco, como el resto de los
   íconos del header. */
/* `flex: 0 0 40px` y no `width: 40px` a secas: la caja es un ítem flex
   dentro del botón, y todo lo que tiene adentro está posicionado en
   absoluto, así que su tamaño mínimo de contenido es cero y se colapsa
   —barras invisibles y botón vacío—. Con `flex-shrink: 0` no puede. */
.t-header__toggle-box {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 24px;
}

.t-header__toggle-bars,
.t-header__toggle-bars::before,
.t-header__toggle-bars::after {
  position: absolute;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: currentColor;
  transition: transform .15s ease;
}

/* Las tres barras quedan en 2, 12 y 22: las de los pseudos se posicionan
   contra la del medio, que ya está en 2. */
.t-header__toggle-bars {
  display: block;
  top: 2px;
}

.t-header__toggle-bars::before,
.t-header__toggle-bars::after {
  content: "";
  display: block;
}

.t-header__toggle-bars::before {
  top: 10px;
  transition-property: transform, opacity;
}

.t-header__toggle-bars::after {
  top: 20px;
}

/* Abierto: la de arriba y la de abajo se cruzan en la del medio, que se
   desvanece. Las transformaciones son las de A. */
.t-header__toggle[aria-expanded="true"] .t-header__toggle-bars {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.t-header__toggle[aria-expanded="true"] .t-header__toggle-bars::before {
  opacity: 0;
}

.t-header__toggle[aria-expanded="true"] .t-header__toggle-bars::after {
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/* ---------- Navegación ---------- */

/* Fondo propio y sólido: tapa la textura, igual que en A. El margen negativo
   lo estira hasta los bordes, porque el padding lateral está en el contenedor. */
.t-nav {
  grid-area: nav;
  background: var(--t-navy-surface);
  margin-inline: calc(var(--t-header-gutter) * -1);
  padding-inline: var(--t-header-gutter);
}

/* Con el contenedor acotado a 1400, el fondo del menú llegaba solo hasta ahí
   y a los costados asomaba la textura. La sombra lo extiende hasta los bordes
   de la ventana sin ensanchar la caja —una sombra no genera scroll—, y el
   recorte la deja solo a los costados. Solo en desktop: en tablet y mobile el
   menú es el panel desplegable, con sus bordes redondeados. */
@media (min-width: 1024px) {
  /* La sombra y el recorte van en un pseudo-elemento y no en el <nav>: un
     `clip-path` recorta también a los hijos, y dejaba los desplegables del
     menú cortados en el borde de la barra (invisibles al hacer hover). */
  .t-header .t-nav {
    position: relative;
    isolation: isolate;
  }

  .t-header .t-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 0 0 100vmax var(--t-navy-surface);
    clip-path: inset(0 -100vmax);
  }
}

/* Centrado, como en A. Antes iba con space-between y quedaba desparramado
   de punta a punta. */
.t-nav__list,
.t-nav .t-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-nav__list li {
  position: relative;
  list-style: none;
}

.t-header .t-nav__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--t-header-nav-h);
  padding: 0 12px;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-weight-regular);
  line-height: var(--t-body-lh);
  text-transform: uppercase;
  text-decoration: none;
}

.t-header .t-nav__list a:hover,
.t-header .t-nav__list a:focus-visible {
  color: var(--t-accent);
}

/* Flecha de desplegable. Va sobre los ítems que realmente tienen hijos,
   dibujada en CSS y no como carácter, para que no la lea un lector de
   pantalla ni se pueda seleccionar con el texto. */
.t-nav__list .menu-item-has-children > a::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
}

.t-nav__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

  /* Al hacer scroll queda fija SOLO la fila del menú.
     El truco es pegar el header entero con un `top` negativo igual al alto
     de lo que no debe quedar fijo: la barra de promos y la fila del logo se
     van hacia arriba y abajo del borde queda exactamente la fila del menú.
     Así no hace falta sacar el menú del <header> ni fijarlo aparte, que
     obliga a compensar el hueco con padding y se desincroniza. */
  .t-header {
    position: sticky;
    top: calc(-1 * (var(--t-header-promo-h) + var(--t-header-row-h)));
  }

  /* La barra de administración de WordPress es fija y taparía el menú. */
  .admin-bar .t-header {
    top: calc(32px - (var(--t-header-promo-h) + var(--t-header-row-h)));
  }

  /* 250 de ancho y sin aire arriba, como en producción (Max Mega Menu:
     `flyout_width` 250, la primera fila pegada a la barra). Medido en A el
     2026-10-02. */
  .t-nav__list > li > ul {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 250px;
    background: var(--t-navy-surface);
    border-radius: 0 0 10px 10px;
    padding: 0 0 10px;
    box-shadow: var(--t-shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
  }

  .t-nav__list > li:hover > ul,
  .t-nav__list > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
  }

  /* Los enlaces del submenú a 14 px, pedido por la usuaria el 2026-09-29.
     Debajo de 1024 ya lo están: ahí todo el menú baja a `--t-body-sm-size`. */
  /* Filas de 49 px con el texto a 21 del borde, como en producción:
     `7px 14px 7px 21px` con interlineado de 35. Medido en A el 2026-10-02;
     antes eran de 40 (`8px 24px`) y el desplegable se veía apretado. */
  .t-header .t-nav__list > li > ul a {
    min-height: 0;
    padding: 7px 14px 7px 21px;
    line-height: 35px;
    font-size: var(--t-body-sm-size);
    text-transform: none;
  }

  .t-nav__list > .menu-item-has-children:hover > a::after,
  .t-nav__list > .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
  }
}

/* ---------- Header de compra ----------
   Medido en A con carrito cargado el 2026-09-23 (`reference/carrito/2026-09-23/`).
   Banda de 80 px con 10 × 60 de relleno y la textura del navy, igual que el
   header global. Las columnas son las mismas cajas del 32 % que las de
   arriba: el escudo al principio de la primera y la marca centrada en la
   segunda, que por eso cae 23 px a la izquierda del centro de la página a
   1280. Tablet, igual. En mobile cambia: ver abajo.
   ------------------------------------------------- */

/* Sin `column-gap`: el header global usa 12 px en tablet y corría la marca
   13 px a la derecha de A. Medido a 768 el 2026-09-23. */
.t-header--compra .t-header__inner {
  column-gap: 0;
  grid-template-areas: "brand wordmark";
  grid-template-columns: 32% 32%;
  padding: 10px 60px;
}

.t-header--compra .t-header__brand,
.t-header--compra .t-header__wordmark,
.t-header--compra .t-header__actions {
  min-height: 60px;
}

/* Con el ancho de la imagen: A mide la caja del escudo en 50 × 60, sin el
   aire a la derecha de la del header global. */
.t-header--compra .t-logo__img {
  height: 60px;
  width: auto;
}

.t-header--compra .t-wordmark__img {
  width: 180px;
}

/* ============================================================
   TABLET Y MOBILE
   Mismo markup: una sola fila, como en A. El orden cambia —el botón de
   menú entra a la izquierda y el escudo pasa a la derecha de la marca—
   y eso se resuelve con las áreas de la grilla, sin duplicar nada.

   El buscador se queda en la fila: Typesense lo colapsa solo a una lupa
   en pantallas chicas, igual que en A. En A ese campo se desborda y se
   come los íconos; acá tiene su propia columna y no se desborda.
   ============================================================ */

@media (max-width: 1023px) {
  .t-header {
    --t-header-gutter: 20px;
    --t-header-row-h: 89px;
  }

  .t-header__inner {
    grid-template-areas:
      "toggle wordmark brand search actions"
      "nav    nav      nav   nav    nav";
    /* minmax(0,1fr) y no 1fr: una columna 1fr no baja del ancho de su
       contenido, y con el buscador adentro la fila se desbordaba y empujaba
       los iconos fuera de la pantalla. */
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .t-header .t-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
  }

  .t-header:not(.t-header--compra) .t-logo__img { width: auto; height: 36px; }
  .t-header:not(.t-header--compra) .t-wordmark__img { width: 151px; }

  /* A invierte los íconos acá: en desktop va carrito y después cuenta, y en
     tablet y mobile va cuenta y después carrito. Se resuelve con `order`
     para no duplicar el markup. */
  .t-header__action--cart { order: 2; }

  .t-header__search {
    justify-content: flex-end;
    min-width: 0;
  }

  .t-header__search .aa-Autocomplete,
  .t-header__search .tss-wrap,
  .t-header__search input {
    min-width: 0;
  }

  /* El campo queda a la misma distancia del escudo que del ícono de cuenta.
     Pedido de la diseñadora el 2026-09-11.

     Typesense dibuja su `<form>` 32 px más angosto que la caja que le damos, y
     lo deja pegado a la izquierda, así que el aire sobrante se juntaba todo de
     un lado: medido a 768, **12 px contra el escudo y 45 contra el ícono**.
     Estirar el form al ancho de su caja los deja en 12 y 12.

     Es de las pocas reglas del theme que toca el markup del plugin, así que
     va acotada al `<form>` y a nada más: el resto —el subrayado, el radio, el
     colapso a lupa— lo sigue manejando Typesense. Verificado que la fila no
     crece: sigue en 89 px, que es donde antes aparecía la segunda línea. */
  .t-header .t-header__search .aa-Form {
    width: 100%;
  }

  /* El menú arranca cerrado y lo abre el botón. Sin JS queda cerrado,
     pero el botón es un <button> real: si el JS no carga, no promete
     algo que no puede cumplir. */
  .t-nav {
    display: none;
    border-radius: 0 0 10px 10px;
  }

  .t-nav.is-open {
    display: block;
  }

  .t-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .t-header .t-nav__list a {
    min-height: 45px;
    padding: 0 12px;
    font-size: var(--t-body-sm-size);
  }

  .t-header .t-nav__list ul a {
    padding-inline-start: 28px;
    text-transform: none;
  }

  /* Apilado, la flecha va al final de la fila y no pegada al texto. */
  .t-nav__list .menu-item-has-children > a {
    justify-content: space-between;
  }

}

/* ---------- Solo tablet: 768 a 1023 ----------
   El buscador tiene un tope de ancho y va centrado en su columna. Pedido de
   la diseñadora el 2026-09-11.

   Las dos reglas van juntas y una sin la otra no sirve:

   - `max-width` sola dejaba la caja pegada al principio de la columna, así
     que todo el sobrante se juntaba contra el ícono de cuenta y se perdía la
     simetría que se había pedido un rato antes: 12 / 110 a 900 px.
   - `justify-self: center` lo reparte en dos. Medido: 12 / 12 hasta 802 px
     —donde la caja todavía no llega al tope—, 61 / 61 a 900 y 111 / 111 a
     1000.

   Van acá y no en el bloque de 1023 para abajo porque abajo de 768 el campo
   ya está colapsado a lupa: el tope no aplicaría nunca y centrarlo no
   cambiaría nada. Acotarlo deja claro a qué pantalla responde.
   --------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .t-header .t-header__search {
    max-width: 360px;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .t-header {
    --t-header-row-h: 78px;
  }

  .t-header__inner { column-gap: 6px; }

  /* El buscador se ve como lupa y va pegado al ícono de cuenta. Pedido de la
     diseñadora el 2026-09-11.

     El problema era que su caja ocupaba toda la columna elástica —hasta
     408 px medidos a 760— y el botón de Typesense se estiraba con ella, así
     que la lupa terminaba pegada al escudo y lejísimos de cuenta.

     `max-width: max-content` la deja del ancho del botón y `justify-self: end`
     la manda al final de su columna, al lado de los íconos. La columna sigue
     siendo la elástica: toggle, marca y escudo quedan agrupados a la
     izquierda, como corresponde.

     No se le fija un ancho en píxeles a propósito: el botón lo dibuja el
     plugin y forzarlo más angosto que su contenido lo hace desbordar sobre el
     ícono de cuenta. */
  .t-header .t-header__search {
    max-width: max-content;
    justify-self: end;
  }

  /* La hamburguesa, más chica que en tablet: botón de 28 × 28 con 10 px a
     la derecha, y tres barras de 28 × 2 en una caja de 28 × 22. Quedan en
     2, 10 y 18, centradas en la caja: los pseudos se posicionan contra la
     del medio, que ya está en 2. Pedido de la usuaria el 2026-10-01; antes
     era 55 × 55 con barras de 40 × 4, la medida de A. */
  .t-header .t-header__toggle {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }

  .t-header .t-header__toggle-box {
    flex: 0 0 28px;
    width: 28px;
    height: 22px;
  }

  .t-header .t-header__toggle-bars,
  .t-header .t-header__toggle-bars::before,
  .t-header .t-header__toggle-bars::after {
    width: 28px;
    height: 2px;
  }

  .t-header .t-header__toggle-bars::before { top: 8px; }
  .t-header .t-header__toggle-bars::after { top: 16px; }

  /* La cruz, con la geometría nueva: la barra de arriba baja 8 px hasta la
     del medio y gira, y la de abajo —hija de ella, así que ya viene girada—
     sube los 16 que la separan y gira al revés. Las dos se cruzan en el
     centro de la caja. */
  .t-header .t-header__toggle[aria-expanded="true"] .t-header__toggle-bars {
    transform: translate3d(0, 8px, 0) rotate(45deg);
  }

  .t-header .t-header__toggle[aria-expanded="true"] .t-header__toggle-bars::after {
    transform: translate3d(0, -16px, 0) rotate(-90deg);
  }

  .t-header:not(.t-header--compra) .t-logo__img { width: auto; height: 43px; }
  .t-header:not(.t-header--compra) .t-wordmark__img { width: 110px; }

  .t-header__actions { gap: 4px; }

  .t-header .t-header__action {
    width: 34px;
    height: 34px;
  }

  .t-header .t-header__action svg {
    width: 25px;
    height: 25px;
  }

  /* Menos ancho, misma vuelta: si no, se lee a los tirones. */
  .t-header__promo-track { animation-duration: 28s; }

  .t-header__promo-item {
    font-size: var(--t-body-sm-size);
    padding-inline: 12px;
  }

  .t-header__promo-item::after { margin-inline-start: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-header *,
  .t-nav * {
    transition: none !important;
  }

  /* La marquesina es movimiento permanente: quien pidió menos movimiento
     ve las frases quietas, no una animación más lenta. */
  .t-header__promo-track {
    animation: none;
  }
}

/* ---------- Header de compra en mobile ----------
   Banda de 70 px con 10 × 18 de relleno, como A: el escudo al principio de
   una caja del 32 % y la marca a su lado, con su propio ancho. Escudo de
   50 px de alto y marca de 122 de ancho. Va al final de la hoja porque
   tiene que ganarles a las reglas del header de compra de arriba, que no
   tienen media query.

   ⚠️ **El grupo arranca a la izquierda, no centrado**, como en A. Hasta el
   2026-09-25 llevaba `justify-content: center` y el escudo quedaba
   flotando unos 60 px adentro del margen a 390; lo marcó la usuaria.
   ------------------------------------------------- */

@media (max-width: 767px) {
  .t-header--compra .t-header__inner {
    column-gap: 0;
    grid-template-columns: 32% auto;
    justify-content: start;
    padding: 10px 18px;
  }

  .t-header--compra .t-header__brand,
  .t-header--compra .t-header__wordmark {
    min-height: 50px;
  }

  .t-header--compra .t-logo__img {
    height: 50px;
  }

  .t-header--compra .t-wordmark__img {
    width: 122px;
  }
}