/* =============================================================================
   LISTADOS DE CATEGORÍA
   =============================================================================

   Lo que se arregla acá está medido sobre /nueva-coleccion el 25 de octubre de
   2026, a 1.440px:

     tarjeta ............ 345 x 704
       foto ............. 518
       talles ...........  42   (eran <span> con cursor:auto)
       nombre ...........  30
       precio ...........  38
       cuotas ...........  14
       aire ............. 89   ← casi la mitad del bloque de texto

   Tres cosas, en orden de importancia:

   1. Los talles pasan a ser botones que agregan al carrito. El marcado lo
      cambia anhelo-catalog-v7; acá está la pinta de un control: puntero,
      estado al pasar el mouse, y el agotado como lo que es, un botón apagado.

   2. Se ven también en el teléfono. La barra estaba encerrada en
      `@media (min-width:1024px) and (hover:hover)`, así que en celular —de
      donde viene la mayoría del tráfico— los talles no existían. Ahora ahí
      están siempre visibles, porque no hay "pasar el mouse" que valga.

   3. La cabecera de la categoría gana una barra de talles y una cuenta. Hasta
      hoy la única forma de filtrar por talle era un modal a pantalla completa,
      y el listado no decía cuántas prendas tenía.

   Los estilos de la barra de talles de escritorio siguen en
   anhelo-design-system-v71.css: esto los completa, no los reemplaza.
   ============================================================================= */


/* ── Los talles, ahora botones ──────────────────────────────────────────── */

body .an-card-sizes__item {
  cursor: pointer;
  transition: background var(--an-dur, .18s), color var(--an-dur, .18s),
              border-color var(--an-dur, .18s), transform var(--an-dur, .18s);
}

body .an-card-sizes__item:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #000;
}

body .an-card-sizes__item:focus-visible {
  outline: 2px solid var(--an-ink, #161616);
  outline-offset: 2px;
}

/* El agotado es un botón apagado, no un texto tachado al que igual se le
   puede hacer clic. */
body .an-card-sizes__item:disabled,
body .an-card-sizes__item.is-agotado {
  cursor: not-allowed;
  transform: none;
}


/* ── En el teléfono también ─────────────────────────────────────────────

   La regla vieja vive adentro de `(min-width:1024px) and (hover:hover)`, así
   que en celular la barra no se imprimía nunca. Acá se repite lo necesario
   para que exista, siempre visible: sin mouse no hay hover que la destape.

   Más compacta que en escritorio y sin el rótulo "Talles": en 160px de ancho
   de tarjeta, esa palabra se come la mitad de la barra. */
@media (max-width: 1023px), (hover: none) {
  body .an-card-sizes {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    border: .67px solid rgba(255, 255, 255, .8);
    border-radius: var(--r-capsule, 999px);
    background: rgba(255, 255, 255, .62);
    box-shadow: var(--gl-edge), 0 6px 18px rgba(22, 22, 22, .14);
    opacity: 1;
  }

  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body .an-card-sizes {
      background: rgba(255, 255, 255, .5);
      -webkit-backdrop-filter: blur(16px) saturate(1.5);
              backdrop-filter: blur(16px) saturate(1.5);
    }
  }

  body .an-card-sizes__item {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: var(--r-capsule, 999px);
    background: rgba(22, 22, 22, .9);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
  }

  body .an-card-sizes__item.is-agotado {
    border-color: rgba(22, 22, 22, .18);
    background: transparent;
    color: rgba(22, 22, 22, .38);
    text-decoration: line-through;
  }
}


/* ── Lo agotado, apagado ────────────────────────────────────────────────

   El orden lo cambia el JS, que manda estas tarjetas al final de la grilla.
   Acá solo bajan de intensidad. No se ocultan a propósito: alguien puede
   estar buscando justo esa prenda, y que desaparezca es peor que verla
   agotada. Al pasar el mouse vuelve entera, por si es la que buscaba. */
body .js-item-product.an-card-fuera {
  opacity: .55;
  transition: opacity var(--an-dur, .18s);
}

body .js-item-product.an-card-fuera:hover,
body .js-item-product.an-card-fuera:focus-within {
  opacity: 1;
}


/* ── La cabecera de la categoría ────────────────────────────────────────── */

/* La cuenta no es nuestra: el tema ya imprime "8 productos" en .an-catcount y
   el JS le suma ahí mismo cuántas están agotadas. Tener un contador propio
   dejaba dos seguidos diciendo lo mismo. */

.an-cat-talles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0 0 18px;
}

.an-cat-talles__rot {
  margin-right: 2px;
  color: var(--an-muted, #707070);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.an-cat-talles__chip {
  min-width: 46px;
  padding: 8px 15px;
  border: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
  border-radius: var(--r-capsule, 999px);
  background: var(--gl-clear, rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
          backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--gl-edge);
  color: var(--an-ink, #161616);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background var(--an-dur, .18s), color var(--an-dur, .18s),
              border-color var(--an-dur, .18s);
}

.an-cat-talles__chip:hover { border-color: var(--an-ink, #161616); }

.an-cat-talles__chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--gl-tint, rgba(22, 22, 22, .84));
  color: var(--an-paper, #fff);
}

@media (max-width: 767px) {
  .an-cat-talles { margin-bottom: 14px; }
  .an-cat-talles__chip { min-width: 42px; padding: 7px 12px; font-size: 10.5px; }
}

/* =============================================================================
   LO QUE FALTABA DE LA PROPUESTA
   =============================================================================

   La primera versión cambió el comportamiento —talles clicables, barra de
   filtro, agotados al final— y no la forma de la tarjeta. Puesto al lado de la
   propuesta no se parecía. Medido en vivo el 25 de octubre de 2026 a 1.280px,
   esto es lo que faltaba:

     foto ........ esquinas de abajo cuadradas (16px 16px 0 0)
     texto ....... 199px de bloque para 110 de contenido
     talles ...... barra de 285px centrada, con el rótulo "Talles" adelante
     agotado ..... solo se apagaba, sin decir por qué

   Las cuatro, abajo.
   ============================================================================= */


/* ── 1. La foto, redondeada entera ──────────────────────────────────────

   El contenedor traía `16px 16px 0 0`: las esquinas de arriba redondeadas y
   las de abajo en escuadra, porque el bloque de texto venía pegado sin aire.
   Separado el texto, esa escuadra queda como un error. */
body .js-item-product .js-product-item-image-container-private,
body .js-item-product .product-item-image-container {
  border-radius: var(--r-media, 16px) !important;
  overflow: hidden;
}


/* ── 2. El bloque de texto, sin el aire ─────────────────────────────────

   199px para 110 de contenido. Lo que sobra es padding del contenedor, el
   margen del nombre y la línea de cuotas.

   Las cuotas se van de la tarjeta a propósito: el precio por transferencia ya
   está ahí arriba y es el mensaje más fuerte de los dos. Las cuotas siguen en
   la ficha, que es donde se decide. En una grilla de cuatro columnas, ese
   renglón son 14px por fila multiplicados por todas las filas. */
body .js-item-product .js-item-description,
body .js-item-product .item-description {
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

body .js-item-product .js-item-name {
  margin-bottom: 4px !important;
}

body .js-item-product .js-item-price-container {
  margin-bottom: 2px !important;
}

/* Las cuotas se quedan.

   Las había sacado de la tarjeta con el argumento de que el precio por
   transferencia ya está ahí y es el mensaje más fuerte de los dos. Facundo lo
   corrigió: en Argentina las cuotas sin interés deciden la compra tanto o más
   que el descuento por transferencia, y son dos públicos distintos — el que
   paga de una mira la transferencia, el que financia mira las cuotas.

   Los 14px que ocupa el renglón se recuperaron de otro lado: del alto que
   reservaba el nombre y del botón de compra rápida. */

/* El botón de compra rápida, fuera.

   Son 44px más 16 de margen: 60 de los 199 que medía el bloque. Y hace lo
   mismo que las cápsulas de talle de la foto, con más pasos: abre un modal
   para elegir el talle que ya estaba a la vista.

   El :has() no es un capricho. Las cápsulas solo se imprimen cuando el
   producto tiene dos variantes o más; en uno de talle único no hay cápsulas y
   ahí la compra rápida es el único camino corto, así que tiene que quedarse.
   La regla se aplica únicamente a las tarjetas que SÍ tienen barra de talles.
   En un navegador sin :has() la regla entera se descarta y queda el botón,
   que es el comportamiento de antes. */
body .js-item-product:has(.an-card-sizes) .js-item-quickshop {
  display: none !important;
}


/* ── 3. La barra de talles, de borde a borde ────────────────────────────

   Estaba centrada, ocupando 285 de 305, con la palabra "Talles" adelante. Dos
   cosas que vienen de cuando era decoración: el rótulo explicaba qué eran esas
   letras, y centradas se leían como una leyenda.

   Ahora son controles y tienen que verse como controles: cada cápsula se
   reparte el ancho en partes iguales y el rótulo sobra, porque un botón con
   "L" adentro de una tarjeta de ropa no necesita que le expliquen qué es. */
@media (min-width: 1024px) and (hover: hover) {
  body .an-card-sizes {
    right: var(--chrome-inset, 12px);
    bottom: var(--chrome-inset, 12px);
    left: var(--chrome-inset, 12px);
    gap: 4px;
    padding: 6px;
    border-radius: var(--r-capsule, 999px);
  }

  body .an-card-sizes::before { content: none; }

  body .an-card-sizes__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 2px;
    text-align: center;
  }
}


/* ── 4. Lo agotado lo dice ──────────────────────────────────────────────

   Se apagaba al 55% y nada más. Apagado sin explicación se lee como un
   problema de carga; con el sello se lee como una decisión.

   Va en ::after del contenedor de la foto y no en un nodo nuevo: es texto que
   depende del estado y no hace falta que exista en el DOM.

   El sello de escasez se esconde en estas tarjetas: "últimas unidades" y
   "agotado" juntos se contradicen. */
body .js-item-product.an-card-fuera .js-product-item-image-container-private,
body .js-item-product.an-card-fuera .product-item-image-container {
  position: relative;
}

body .js-item-product.an-card-fuera .js-product-item-image-container-private::after,
body .js-item-product.an-card-fuera .product-item-image-container::after {
  content: "Agotado";
  position: absolute;
  top: var(--chrome-inset, 12px);
  left: var(--chrome-inset, 12px);
  z-index: 3;
  padding: 5px 11px;
  border-radius: var(--r-capsule, 999px);
  background: rgba(22, 22, 22, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
          backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--gl-shadow);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body .js-item-product.an-card-fuera .an-card-scarcity { display: none; }


/* ── El teléfono, con los mismos cuatro arreglos ───────────────────────── */
@media (max-width: 1023px), (hover: none) {
  body .an-card-sizes {
    right: 8px;
    bottom: 8px;
    left: 8px;
    justify-content: stretch;
  }

  body .an-card-sizes::before { content: none; }
  body .an-card-sizes__item { flex: 1 1 0; }
}

/* =============================================================================
   DOS COSAS QUE SEGUÍAN SIN PARECERSE A LA PROPUESTA
   ============================================================================= */


/* ── Las cápsulas de talle, livianas ────────────────────────────────────

   Venían en rgba(22,22,22,.9) sobre blanco: cuatro botones negros y llenos
   encima de la foto. Leídos juntos gritan, y encima tapan la prenda, que es
   lo que la tarjeta vino a mostrar.

   Esa regla es de cuando los talles eran una etiqueta informativa y el
   contraste tenía que ganarle a cualquier foto. Ahora son controles y el
   control se apaga hasta que lo necesitás: tinta sobre vidrio, y el relleno
   oscuro solo en el que tenés el mouse encima.

   El contenedor ya es una barra de vidrio con desenfoque, así que la
   legibilidad sobre la foto la pone la barra, no cada cápsula. */
body .an-card-sizes__item {
  background: transparent !important;
  color: var(--an-ink, #161616) !important;
  border-color: transparent !important;
}

body .an-card-sizes__item:hover:not(:disabled),
body .an-card-sizes__item:focus-visible {
  background: var(--gl-tint, rgba(22, 22, 22, .84)) !important;
  color: #fff !important;
}

body .an-card-sizes__item.is-agotado,
body .an-card-sizes__item:disabled {
  background: transparent !important;
  color: rgba(22, 22, 22, .32) !important;
  border-color: transparent !important;
  text-decoration: line-through;
}


/* ── La tarjeta deja de ser una caja ────────────────────────────────────

   El bloque de texto venía con fondo #f8f5f6, el mismo que el marco de la
   foto, así que la tarjeta entera se leía como un cuadro gris sobre la página
   blanca. En la propuesta el texto va sobre el fondo de la página y lo único
   con fondo propio es la foto.

   Es la diferencia entre una grilla de fichas y una grilla de prendas. */
body .js-item-product .js-item-description,
body .js-item-product .item-description {
  background: transparent !important;
}

body .js-item-product .js-item-description a,
body .js-item-product .item-description a {
  background: transparent !important;
}

/* ── El nombre deja de reservar dos renglones ───────────────────────────

   En anhelo-design-system-v71 le puse `min-height: 2.7em` al nombre de la
   tarjeta para que el precio arrancara siempre a la misma altura, se partiera
   el nombre o no. El comentario que dejé ahí decía "cuesta 15px de alto en
   las tarjetas de nombre corto", y resultó que corto son casi todas.

   Medido en /bestsellers el 29 de octubre de 2026: los doce nombres entran en
   un renglón y los doce reservan dos. No es un caso de borde, es el caso
   normal, y el hueco entre el nombre y las estrellas aparece en cada tarjeta.

   El tope de dos renglones se conserva, pero como MÁXIMO y no como mínimo:
   un nombre largo se corta a dos líneas y uno corto ocupa una.

   Lo que se pierde: cuando en una misma fila conviven un nombre de un
   renglón y otro de dos, los precios quedan desfasados 15px. Entre un
   desfasaje ocasional y un hueco permanente en todas, prefiero el primero.
   Si molesta, la salida sin huecos es empujar el precio al fondo de la
   tarjeta con flex, que toca más marcado del tema. */
/* El tope de dos renglones del nombre se mudó a anhelo-design-system-v72.

   Acá arreglaba el hueco solo en las categorías, y el mismo hueco estaba en
   el home y en los relacionados, donde esta hoja no carga. Estaba arreglando
   el síntoma en un lugar en vez de la causa en el suyo. */