/* ============================================================
   LISTADO DE PRODUCTOS — categorías, /tienda/ y búsqueda
   Override de `woocommerce/archive-product.php`.

   En A son dos templates de Elementor que resultaron ser el
   mismo con otra cabecera (386348 y 334716). Las medidas salen
   de `reference/categoria-2025/` y del meta de esos templates,
   medidas el 2026-09-15.

   Entrega 1 de 3: cabecera y grilla. Los filtros llegan en la
   2 y la cabecera con imagen en la 3.

   Ningún color literal: todo sale de tokens.css.
   Todo prefijado con `.t-archivo`, incluidos los media queries,
   porque mientras Elementor siga activo su CSS carga después.
   ============================================================ */

/* ---------- Cabecera ----------
   140 px de alto y 110 en mobile, con el título abajo y a la
   izquierda (`flex-end` + `flex-start` en A), y 40 px de aire
   antes de la grilla.
   ------------------------------------------------- */

.t-archivo__cabecera {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 40px;
  min-height: 140px;
}

.t-archivo__cabecera-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 1400px;
  padding-inline: 60px;
  width: 100%;
}

/* Prefijado con la cabecera, y no por gusto: sin eso el `h1` computaba 40 px
   en mobile en vez de 36 —medido en B a 390 px el 2026-09-15—, porque le
   ganaba una regla de encabezado con más especificidad. Es la regla de
   `CLAUDE.md`: prefijar el componente entero, media queries incluidos. */
.t-archivo__cabecera .t-archivo__titulo {
  color: var(--t-navy);
  font-family: var(--t-font-display);
  font-size: 44px;
  /* 600, no el 800 del display: es lo que mide A en esta vista. */
  font-weight: var(--t-weight-semibold);
  margin: 0;
  /* Las MAYÚSCULAS las pone el CSS: el texto sale de WooCommerce
     —el nombre de la categoría— y tiene que existir en caja natural
     para un lector de pantalla y para Google. */
  text-transform: uppercase;
}

/* ---------- La cabecera con imagen ----------
   La variante que en A es el template 334716: 350 px de alto con la foto de la
   categoría de fondo, el título en blanco abajo a la izquierda y un degradado
   que va de transparente a navy para que el título se lea sobre cualquier foto.

   Medido en A a 1440 px el 2026-09-15: alto 350, `padding: 0 60px`, foto
   `cover` anclada a la **izquierda** (`0% 50%`), 80 px del título al borde de
   abajo y 30 px de aire antes de la grilla. El degradado es
   `rgba(10,5,67,0) 45% → #0A0543 100%` con `opacity: .65`; se copia tal cual,
   con el navy saliendo del token.

   De 767 para abajo A la achica a 180 px, el título a 28 y el aire de abajo a
   20, y ancla la foto al **centro**, que es lo que hace que en un teléfono se
   siga viendo la parte importante de un banner apaisado.
   ------------------------------------------------- */

.t-archivo__cabecera--banner {
  /* Ancla de la foto y del degradado. */
  position: relative;
  /* Los 40 px de la cabecera lisa son de más acá: A deja 30. */
  margin-bottom: 30px;
  min-height: 350px;
  /* A la sangría lateral se la da al contenedor y no al `inner`, porque el
     fondo va de punta a punta de la pantalla. */
  overflow: hidden;
}

.t-archivo__cabecera--banner .t-archivo__cabecera-foto {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: left center;
  position: absolute;
  width: 100%;
}

/* El degradado. Va en un pseudo-elemento y no en el `<img>` para poder
   superponerlo sin tocar la foto, igual que en A. */
.t-archivo__cabecera--banner::before {
  background-image: linear-gradient(
    rgb(var(--t-navy-rgb) / 0) 45%,
    rgb(var(--t-navy-rgb) / 1) 100%
  );
  content: "";
  inset: 0;
  opacity: 0.65;
  position: absolute;
}

/* El título, encima de las dos capas. */
.t-archivo__cabecera--banner .t-archivo__cabecera-inner {
  padding-bottom: 80px;
  position: relative;
}

.t-archivo__cabecera--banner .t-archivo__titulo {
  color: var(--t-white);
}

/* ---------- El cuerpo ---------- */

.t-archivo__inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 1400px;
  padding-inline: 60px;
  width: 100%;
}

/* Aire antes del footer. A deja 60 px entre la paginación y el primer texto
   del footer —55 de los cuales son el propio aire interno del footer, así que
   entre las dos cajas casi no hay nada— y eso deja el listado pegado abajo.
   Acá se le dan 60 px propios. Es una diferencia deliberada contra A, pedida
   por la usuaria el 2026-09-15. */
.t-archivo {
  padding-bottom: 60px;
}

/* ---------- La grilla ----------
   WooCommerce emite `ul.products` con las tarjetas adentro. El
   alto de fila lo da la tarjeta, que es la misma que la de los
   carruseles de la home (§3.9octies).

   A hace 3 columnas desde 900 px y 2 desde 800 para abajo, y
   **entre 801 y 899 no declara nada**, así que ahí caen las 5
   columnas que trae el widget por defecto y las tarjetas quedan
   apretadas. Acá el corte es uno solo, en 900: es el mismo
   diseño sin el hueco.
   ------------------------------------------------- */

/* El selector va largo a propósito: `.woocommerce ul.products` de Astra pesa
   lo mismo que `.t-archivo .products` y ganaba por orden de carga, así que la
   grilla quedaba en `flex` con las tarjetas flotadas y salía **una sola
   columna**. Medido en B a 390 px el 2026-09-15. Ver CLAUDE.md →
   «Especificidad contra Elementor», que vale igual para el theme padre. */
.t-archivo .t-archivo__productos ul.products {
  display: grid;
  gap: 40px 20px;
  /* `minmax(0, 1fr)` y no `1fr`: `1fr` es `minmax(auto, 1fr)`, o sea que una
     columna no puede achicarse por debajo de su contenido. Un nombre largo o
     una línea de cuotas sin cortes ensanchaban una columna y dejaban la otra
     más angosta, con las fotos de distinto tamaño. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ⚠️ El `ul` trae un clearfix de WooCommerce —`::before` y `::after` con
   `content: " "`— que en flotados no ocupa lugar, pero **en una grilla cada
   pseudo-elemento se lleva una celda**: por eso la primera fila arrancaba en la
   segunda columna y quedaba un hueco. Medido en B el 2026-09-15. */
.t-archivo .t-archivo__productos ul.products::before,
.t-archivo .t-archivo__productos ul.products::after {
  content: none;
}

/* Y el `li` viene flotado y con un ancho en porcentaje que calcula Astra para
   su propia grilla. Con CSS grid eso sobra: lo reparte la grilla.

   ⚠️ El `overflow: hidden` **recortaba el título al pasar el mouse**: el hover
   lo agranda un 5 %, y ese 5 % quedaba cortado contra el borde de la tarjeta
   —se comía la primera letra—. Medido en B el 2026-09-15; en la home no pasaba
   porque ahí no hay `li`.

   Va con `!important` y está medido: lo pone
   `.woocommerce ul.products li.product { overflow: hidden !important }`, de la
   capa de CSS que vive fuera del theme (`INVENTARIO.md` §8bis). Contra un
   `!important` la especificidad no alcanza — mismo caso que el fondo del botón
   de las flechas del carrusel. Existe para recortar la foto contra las
   esquinas redondeadas de la tarjeta de Astra; acá ese recorte lo hace
   `.t-card__media`, así que apagarlo no rompe nada.

   Se puede quitar en la Fase 4, cuando esa capa desaparezca. */
/* Y el margen va con `!important` y también está medido: de 921 px para abajo,
   Astra le pone `margin-right` a los elementos impares para armar su propia
   grilla flotada. En una grilla CSS ese margen **no se suma al costado: se le
   resta al elemento**, así que la tarjeta impar quedaba 20 px más angosta que
   la par y las fotos salían de distinto tamaño. Medido en B a 390 px el
   2026-09-15. */
.t-archivo .t-archivo__productos ul.products li.product {
  float: none;
  margin: 0 !important;
  overflow: visible !important;
  width: auto;
}

/* El título vuelve a sus 18 px. La tarjeta los declara, pero en el listado
   le gana una regla de Astra sobre el `li` y quedaba en 15 —más chico que en
   la home y que en A, que también mide 18—. Prefijado hasta donde hace falta
   para ganarle, sin `!important`. */
.t-archivo .t-archivo__productos ul.products li.product .t-card__titulo,
.t-archivo .t-archivo__productos ul.products li.product .t-card__titulo a {
  font-size: 18px;
  line-height: 1.3;
}

/* ---------- Paginación ----------
   Medida en A: números de 38×38 px, 15 px, sin radio; el actual sobre el
   naranja del color secundario con el texto en blanco y los demás en navy. Centrada,
   con 40 px de aire arriba.
   ------------------------------------------------- */

.t-archivo .woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}

.t-archivo .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* El radio lo lleva el `li`, no el número: así lo hace producción —4 px con
   `overflow: hidden`, medido el 2026-09-15— y por eso la primera versión de
   esta hoja, que le ponía `overflow: visible`, dejaba las esquinas rectas. */
.t-archivo .woocommerce-pagination ul.page-numbers li {
  border: 0;
  border-radius: 4px;
  margin: 0;
  overflow: hidden;
}

.t-archivo .woocommerce-pagination .page-numbers {
  align-items: center;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--t-navy);
  display: inline-flex;
  font-family: var(--t-font-body);
  font-size: 15px;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0 6px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.t-archivo .woocommerce-pagination .page-numbers.current {
  background-color: var(--t-accent);
  color: var(--t-white);
}

.t-archivo .woocommerce-pagination a.page-numbers:hover,
.t-archivo .woocommerce-pagination a.page-numbers:focus-visible {
  background-color: var(--t-navy);
  color: var(--t-white);
}

/* WooCommerce imprime este párrafo cuando la categoría está vacía. */
.t-archivo .woocommerce-info,
.t-archivo .woocommerce-no-products-found {
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
}

@media (max-width: 1024px) {
  .t-archivo__cabecera-inner,
  .t-archivo__inner {
    padding-inline: 24px;
  }
}

@media (max-width: 899px) {
  .t-archivo .t-archivo__productos ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Mobile y tablet ----------
   De 1024 para abajo el bloque de cuotas no se muestra: en dos columnas la
   tarjeta queda muy angosta y el listado se vuelve una pared de texto chico.
   Pedido de la diseñadora el 2026-09-15.

   Va acá, en la hoja del listado, y **no en la tarjeta**: en la home de A las
   cuotas sí se ven en mobile (medido el mismo día), así que apagarlas en el
   componente se las llevaría también de los carruseles.
   ------------------------------------------------- */

@media (max-width: 1024px) {
  .t-archivo .t-archivo__productos ul.products li.product .t-card__cuotas {
    display: none;
  }

  /* Y la foto pasa a ser cuadrada.

     En desktop la tarjeta fija 300 px de alto, pero acá la columna es mucho
     más angosta y ese alto quedaba desproporcionado; encima **una regla de
     Astra le pone `height: auto !important` a las fotos del listado** de 921
     px para abajo, así que los 300 px ni siquiera llegaban: cada foto tomaba
     el alto que le daba su propio archivo y salían de distinto tamaño. A las
     muestra cuadradas —156×156 a 390 px, medido el 2026-09-15—, así que se
     copia eso con `aspect-ratio`, que da el mismo cuadrado en cualquier ancho
     sin depender de un alto fijo. El recorte lo sigue haciendo `object-fit`. */
  .t-archivo .t-archivo__productos ul.products li.product .t-card__img {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .t-archivo__cabecera {
    margin-bottom: 24px;
    min-height: 110px;
  }

  /* 28 px en las dos cabeceras, la lisa y la de imagen. A deja la lisa en 36:
     la bajó la diseñadora el 2026-09-22. */
  .t-archivo__cabecera .t-archivo__titulo {
    font-size: 28px;
  }

  /* La cabecera con imagen se achica y la foto pasa a anclarse al centro: un
     banner apaisado recortado a 390 px de ancho pierde todo si se lo ancla a
     la izquierda. Los tres valores son los de A. */
  .t-archivo__cabecera--banner {
    margin-bottom: 20px;
    min-height: 180px;
  }

  .t-archivo__cabecera--banner .t-archivo__cabecera-foto {
    object-position: center center;
  }

  .t-archivo__cabecera--banner .t-archivo__cabecera-inner {
    padding-bottom: 20px;
  }

  .t-archivo__cabecera-inner,
  .t-archivo__inner {
    padding-inline: 18px;
  }

  /* «Precio sin impuestos nacionales». La tarjeta le da un interlineado de 2.3
     para separarlo del bloque de cuotas; acá abajo de 1024 no hay cuotas, así
     que ese aire sobra y el renglón queda flotando. Medidas pedidas por la
     diseñadora el 2026-09-15; el interlineado pasó de 1.1 a 1.2 el 2026-09-22. */
  .t-archivo .t-archivo__productos ul.products li.product .t-card__precio .precio-sin-iva,
  .t-archivo .t-archivo__productos ul.products li.product .t-card__precio .precio-sin-iva .woocommerce-Price-amount,
  .t-archivo .t-archivo__productos ul.products li.product .t-card__precio .precio-sin-iva bdi {
    line-height: 1.2;
  }

  .t-archivo .t-archivo__productos ul.products li.product .t-card__precio .precio-sin-iva {
    margin-bottom: 6px;
  }
}

/* ---------- La nota de socios ----------
   «Hasta 20% OFF para socios al finalizar la compra». La tarjeta la esconde
   porque en la home no se ve, pero **en el listado sí**: lo pidió la usuaria
   el 2026-09-15 y es lo que hace producción. Va acá, en la hoja del listado,
   para no tener que meterle a la tarjeta una bandera más.

   Medido en producción: 13 px, 500, gris de texto secundario, 15 px de aire
   arriba. La emite el widget del precio, no el de las cuotas.
   ------------------------------------------------- */

.t-archivo .t-archivo__productos ul.products li.product p.discounted-price-notice {
  color: var(--t-text-muted);
  display: block;
  font-family: var(--t-font-body);
  /* Con `!important` porque el plugin escribe en línea `font-size: .9em`,
     `font-weight: normal`, `line-height: 1` y `text-align: center`. Hasta la
     Fase 4 los pisaba con `!important` el CSS de la plantilla de Elementor
     del listado (post-386348); los valores son los que se veían con ella,
     medidos el 2026-09-28. */
  font-size: 13px !important;
  font-weight: var(--t-weight-medium) !important;
  line-height: 13px !important;
  text-align: left !important;
  /*
   * El margen sale de dos lados que no son el theme, y por eso va con
   * `!important` (medido en B el 2026-09-15):
   *
   * - `margin: 1rem .5rem` lo pone un `<style>` inline del plugin que emite
   *   el aviso. La sangría lateral no corresponde: el texto tiene que quedar
   *   alineado con el resto de la tarjeta.
   * - `margin-bottom: 0 !important` (y el `margin-left`) vienen de
   *   **`post-334716.css`**, o sea del CSS del template de Elementor. Contra
   *   un `!important` la especificidad no alcanza.
   *
   * Y el selector va largo porque el `!important` **solo no alcanza**: el de
   * Elementor pesa `ul.products li.product p.discounted-price-notice`, así que
   * con tres clases empatadas le ganaban sus tres elementos y el margen seguía
   * computando 0. Medido: primero quedó en 0, no en los 8 px pedidos.
   *
   * Todo esto desaparece en la Fase 4, cuando se apague Elementor: ahí el
   * `!important` y el selector largo se pueden recortar.
   */
  margin: 0 0 0.5rem !important;
}

/* ---------- La columna de filtros ----------
   El panel lo dibuja Filter Everything; acá va su caja.

   **Un solo bloque para las dos presentaciones.** De 768 para arriba es la
   columna de la izquierda y el rótulo «Filtros» hace de encabezado; de 767
   para abajo la columna desaparece y **el control lo pone el plugin**, que en
   esa pantalla dibuja su propio botón «Filtros» y abre el panel en una
   ventana. Por eso acá abajo lo único que hace el CSS es esconder el rótulo
   del theme: con los dos se veían dos «Filtros», uno adentro del otro.

   En A esto son dos copias del panel en el DOM, una por breakpoint — el mismo
   patrón que ya produjo el bug del header a 767 px.

   Medido en A a 1280: columna de 252 px —212 de panel más 40 de separación— y
   el rótulo en 18/600 sobre #202020, que el design system ya tenía como
   --t-heading-alt («títulos de sección: FAQ, Filtros, Talle»).
   ------------------------------------------------- */

.t-archivo__inner {
  display: grid;
  grid-template-columns: 252px 1fr;
}

.t-archivo .t-archivo__filtros {
  box-sizing: border-box;
  padding-inline-end: 40px;
}

.t-archivo .t-archivo__filtros-titulo {
  align-items: center;
  color: var(--t-heading-alt);
  display: flex;
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-semibold);
  gap: 8px;
  margin-bottom: 16px;
}

.t-archivo .t-archivo__filtros-icono {
  flex: none;
  height: 18px;
  width: 18px;
}

/* El precio, en la columna: sin los 40 px que Filter Everything le reserva a
   la derecha a su «×» de borrar. En un campo de 90 px le dejaban 32 al
   número, y «168000» salía «168(». Vuelve a los 16 del lado izquierdo, que
   es el relleno base del propio plugin. Con `!important` porque así declara
   él los 40. Solo donde hay columna: de 767 para abajo el panel va a todo el
   ancho y el número ya entraba. Pedido de la usuaria el 2026-10-01. */
@media (min-width: 768px) {
  .t-archivo input[type="number"].wpc-filters-range-min,
  .t-archivo input[type="number"].wpc-filters-range-max {
    padding-right: 16px !important;
  }
}

/* Las etiquetas del filtro activo —«Restablecer todo», «3XL ×»—, arriba de
   los productos. Las cuelga Filter Everything de un hook de WooCommerce que
   la plantilla de Elementor no llamaba, así que en A no aparecían. 13 px y
   sin interlineado propio: el plugin las deja en el 91 % y con el renglón de
   24,75 que heredan del `<body>`. Pedido de la usuaria el 2026-10-01. */
.t-archivo .wpc-filter-chips-list li.wpc-filter-chip {
  font-size: 13px;
  line-height: 1;
}

/* Su borde, sin el azul `#0570E2` que es el color de acento configurado en
   Filter Everything: lo escribe en una hoja que genera él, sobre el enlace
   de cada etiqueta salvo «Restablecer todo», que lleva su propio rosado.
   Pedido de la usuaria el 2026-10-01. */
.t-archivo .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) a,
.t-archivo .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) a:hover {
  border-color: var(--t-border-chip);
}

/* ---------- De 767 para abajo ----------
   La columna desaparece y el panel pasa arriba del listado. El rótulo del
   theme se esconde porque ahí el control es el botón del plugin. El panel
   sigue en el DOM: es el plugin el que lo mantiene cerrado hasta que se toca
   ese botón.
   ------------------------------------------------- */

@media (max-width: 767px) {
  .t-archivo__inner {
    grid-template-columns: 1fr;
  }

  .t-archivo .t-archivo__filtros {
    margin-bottom: 8px;
    padding-inline-end: 0;
  }

  .t-archivo .t-archivo__filtros-titulo {
    display: none;
  }
}

/* ---------- Lo que el panel de filtros tomaba de `custom-css-js` ----------
   Hasta la Fase 4 el aspecto del panel lo terminaban de decidir tres entradas
   de `custom-css-js` (399617, 399831 y 143806). Absorbidas el 2026-09-28, con
   los valores que se ven hoy y los colores llevados a tokens:

   - Los enlaces y los contadores en --t-ink y 400, sin la opacidad que el
     plugin les baja a la categoría actual. El `#2b2b2b` de la capa ya estaba
     decidido como --t-ink (DESIGN-SYSTEM §1.3bis); su hover `#0a1f44`, como
     --t-navy.
   - Los paréntesis alrededor del contador, que el plugin esconde.
   - El control de precio: el mango en navy y la barra en navy al 45 %.
   - El botón «Filtros» de mobile, sin caja y con el embudo de Font Awesome
     adelante, como el rótulo de desktop.

   `!important` donde la regla del plugin también lo trae.
   ------------------------------------------------- */

.t-archivo .wpc-filters-section a.wpc-filter-link,
.t-archivo .wpc-filters-widget-wrapper a.wpc-filter-link,
.t-archivo .wpc-term-item.wpc-term-disabled a.wpc-filter-link,
.t-archivo .wpc-term-item.wpc-term-selected a.wpc-filter-link {
  color: var(--t-ink) !important;
  font-weight: var(--t-weight-regular) !important;
  opacity: 1 !important;
}

.t-archivo .wpc-filters-section a.wpc-filter-link:hover {
  color: var(--t-navy) !important;
}

.t-archivo .wpc-term-item.wpc-term-disabled,
.t-archivo .wpc-term-item.wpc-term-selected {
  opacity: 1 !important;
}

.t-archivo .wpc-term-count-brackets-open,
.t-archivo .wpc-term-count-brackets-close {
  display: inline !important;
}

.t-archivo .wpc-filters-section .wpc-term-count {
  color: var(--t-ink) !important;
  font-weight: var(--t-weight-regular);
  margin-left: 4px;
  opacity: 1 !important;
}

.t-archivo .wpc-filters-section li.wpc-term-item {
  margin-bottom: 2px;
}

.t-archivo span.ui-slider-handle.ui-state-default {
  background: var(--t-navy);
  border-radius: 50px;
}

.t-archivo .ui-widget-header {
  background: rgb(var(--t-navy-surface-rgb) / 45%);
  border: 0 !important;
}

.t-archivo .wpc-open-close-filters-button {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.t-archivo .wpc-open-close-filters-button .wpc-icon-html-wrapper {
  display: none !important;
}

.t-archivo .wpc-open-close-filters-button .wpc-filters-button-text {
  align-items: center;
  color: var(--t-heading-alt) !important;
  display: inline-flex;
  font-size: 18px !important;
  font-weight: var(--t-weight-semibold) !important;
}

.t-archivo .wpc-open-close-filters-button .wpc-filters-button-text::before {
  content: "\f0b0";
  font-family: "Font Awesome 5 Free";
  font-size: 18px;
  font-weight: 900;
  margin-right: 8px;
}

/* El «20% OFF» del aviso de socios, en el acento. También lo ponía el CSS de
   la plantilla de Elementor del listado. 2026-09-28. */
.t-archivo .t-archivo__productos ul.products li.product p.discounted-price-notice b {
  color: var(--t-accent);
}

/* El selector de orden con el borde de 1 px en el acento. Lo ponía el CSS de
   la plantilla de Elementor del listado (post-386348). 2026-09-28. */
.t-archivo .woocommerce-ordering select {
  border: 1px solid var(--t-accent);
}