/* =========================================================
   Anhelo — ficha de producto

   Módulo aparte a propósito: el brief pide que los cambios de la ficha no
   dependan de selectores globales que puedan mover otras páginas. Todo lo de
   acá cuelga de .an-pdp-* o de #single-product.
   ========================================================= */

/* ---------------------------------------------------------
   Barra de compra fija en mobile

   Solo por debajo de 768px: en desktop la columna de compra es corta y el
   botón original queda a la vista, así que ahí sobraría.
   --------------------------------------------------------- */

.an-sticky-buy {
  display: none;
}

@media (max-width: 767px) {
  .an-sticky-buy {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* Arriba del contenido pero muy por debajo de los modales (10000+) y del
       selector de región: si se abre uno, la barra tiene que quedar atrás. */
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    /* El padding inferior extra respeta la barra del navegador en iOS. */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--main-background);
    box-shadow: 0 -1px 0 var(--main-foreground-opacity-10), 0 -8px 24px rgba(0, 0, 0, .07);
  }

  .an-sticky-buy[hidden] {
    display: none;
  }

  .an-sticky-buy__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
  }

  .an-sticky-buy__price {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
  }

  .an-sticky-buy__size {
    color: var(--main-foreground-opacity-60);
    font-family: var(--an-technical-font, monospace);
    font-size: 11px;
    line-height: 1.2;
  }

  .an-sticky-buy--sin-talle .an-sticky-buy__size {
    color: #b8651b;
  }

  .an-sticky-buy__btn {
    flex: 0 0 auto;
    /* 46px: por encima del mínimo táctil de 44 que pide §12. */
    min-height: 46px;
    padding: 0 30px;
    border: 0;
    color: var(--button-foreground);
    background: var(--button-background);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* El botón de WhatsApp flota abajo a la derecha: se corre para no quedar
     tapado por la barra. */
  body.an-sticky-buy-visible .btn-whatsapp {
    bottom: 84px;
  }
}

/* ---------------------------------------------------------
   Rating debajo del título

   Lo puebla anhelo-product-v2.js moviendo el #revieStar de Revi. Mientras esté
   vacío el atributo hidden lo mantiene fuera del flujo, así que un producto sin
   reseñas no deja un espacio en blanco entre el título y el precio.
   --------------------------------------------------------- */

#single-product .an-pdp-rating {
  margin: -4px 0 12px;
}

#single-product .an-pdp-rating[hidden] {
  display: none;
}

#single-product .an-pdp-rating--enlace {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

#single-product .an-pdp-rating--enlace span {
  border-bottom: 1px solid transparent;
  transition: border-color var(--an-fast, .2s);
}

#single-product .an-pdp-rating--enlace:hover span {
  border-bottom-color: currentColor;
}

#single-product .an-pdp-rating--enlace:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Jerarquía de precio

   El problema no era la falta de datos sino que precio, cuotas, transferencia
   y precio sin impuestos tenían el mismo peso. Se ordena en tres escalones:
   el precio manda, cuotas y transferencia acompañan, el resto es letra chica.
   --------------------------------------------------------- */

#single-product .js-price-container {
  display: block;
}

#single-product .an-pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

#single-product .an-pdp-price .js-price-display {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

#single-product .an-pdp-price .js-compare-price-display {
  color: var(--main-foreground-opacity-50);
  font-size: 15px;
  font-weight: 400;
  text-decoration: line-through;
}

#single-product .an-pdp-price-secondary {
  margin-top: 7px;
  color: var(--main-foreground-opacity-80);
  font-size: 13px;
  line-height: 1.5;
}

#single-product .an-pdp-price-secondary .item-installments,
#single-product .an-pdp-price-secondary > div {
  margin: 0;
  font-size: 13px;
}

/* Letra chica: descargos, "no acumulable" y precio sin impuestos.
   Lo ideal es apagar el precio sin impuestos desde el administrador; mientras
   siga encendido, al menos deja de competir con el precio real. */
#single-product .an-pdp-price-legal {
  margin-top: 8px;
  color: var(--main-foreground-opacity-50);
  font-size: 11px;
  line-height: 1.45;
}

#single-product .an-pdp-price-legal > div {
  margin: 0 !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   Bloque de stock, envío y cambios pegado al CTA
   --------------------------------------------------------- */

.an-pdp-info {
  margin: -8px 0 22px;
}

.an-pdp-info__stock {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.an-pdp-info__stock[hidden] {
  display: none;
}

/* El color es el que carga el estado, no un adorno: verde y rojo acá son
   información (hay / no hay), por eso el texto además lo dice con palabras. */
.an-pdp-info__stock[data-estado="stock"] { color: #1f7a4d; }
.an-pdp-info__stock[data-estado="ultima"] { color: #b8651b; }
.an-pdp-info__stock[data-estado="agotado"] { color: var(--main-foreground-opacity-60); }

.an-pdp-info__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--main-foreground-opacity-10);
}

.an-pdp-info__row:last-child {
  border-bottom: 1px solid var(--main-foreground-opacity-10);
}

.an-pdp-info__icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: currentColor;
}

.an-pdp-info__copy {
  min-width: 0;
}

.an-pdp-info__line {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}

.an-pdp-info__line--strong {
  font-weight: 700;
}

.an-pdp-info__link {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  #single-product .an-pdp-price .js-price-display {
    font-size: 23px;
  }

  .an-pdp-info__line {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------
   Prueba social de la ficha

   Los tres primeros beneficios de este bloque decían con palabras vagas
   ("Despacho rápido", "Cambios simples") lo que ahora el bloque de arriba dice
   con plazos concretos. Queda solo la métrica de comunidad, que no se repite
   en ningún otro lado de la ficha.
   --------------------------------------------------------- */

#single-product .an-product-trust__grid {
  grid-template-columns: minmax(0, 1fr);
}

#single-product .an-product-trust__item:nth-child(-n+3) {
  display: none;
}

#single-product .an-product-trust__item:nth-child(n+4) {
  border-top: 0;
  border-left: 0;
}

/* ============================================================
   Columna de compra pegajosa
   ============================================================
   La galería mide ~2.400px y esta columna ~1.080: quedaba pantalla y media de
   blanco al costado de las fotos y el botón de comprar se perdía enseguida.
   El `top` lo pone product-sticky-column.tpl, que mide el bloque; acá solo se
   declara el modo. Sin la clase is-sticky el bloque queda en flujo normal, que
   es lo que corresponde en celular. */

@media (min-width: 768px) {
  #single-product .an-pdp-col.is-sticky {
    position: sticky;
    /* Sin esto, un contenedor con overflow arriba anula el sticky. */
    z-index: 1;
  }
}

/* La fila de bootstrap estira las dos columnas a la misma altura, que es
   justamente lo que le da recorrido al sticky. Se deja explícito para que no
   se pierda si alguien toca el alineado. */
#single-product .row.section-single-product {
  align-items: stretch;
}

/* ============================================================
   Precio por transferencia
   ============================================================
   Es el precio más barato y el que no paga comisión, y estaba en 13px gris
   claro debajo de las cuotas: perdía contra todo. Ahora va primero y con peso
   propio, sin llegar a competir con el precio de lista. */

#single-product .an-pdp-price-secondary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* El precio por transferencia y el chip del porcentaje viven en la misma
   fila, y esa fila va arriba de las cuotas. */
#single-product .an-pdp-transfer {
  order: -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--main-foreground);
  font-size: 15px;
}

#single-product .an-pdp-transfer .js-payment-discount-price-product-container {
  color: inherit;
  font-size: inherit;
}

#single-product .an-pdp-price-secondary .js-payment-discount-price-product {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Chip con el porcentaje real que devuelve la plataforma. */
#single-product .an-pdp-transfer-off {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-capsule, 999px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Las cuotas quedan como estaban: acompañan, no encabezan. */
#single-product .an-pdp-price-secondary .item-installments {
  color: var(--main-foreground-opacity-80);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v5 — LENGUAJE iOS 26 EN LA FICHA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra de compra: de franja pegada al borde a pastilla flotante ────

   Era un rectángulo a todo el ancho apoyado en el borde inferior. Como
   pastilla flotante se lee como un control que está POR ENCIMA de la ficha y
   no como el final de la página, que es lo que hace iOS con los controles que
   acompañan al contenido.

   El margen de abajo suma la safe-area: en un iPhone con barra de gestos, sin
   eso el botón queda debajo de la franja del sistema y se toca la barra en vez
   del botón. */
@media (max-width: 767px) {
  .an-sticky-buy {
    right: var(--chrome-inset);
    bottom: calc(var(--chrome-inset) + env(safe-area-inset-bottom, 0px));
    left: var(--chrome-inset);
    padding: 8px 8px 8px 18px;
    border-radius: var(--r-capsule);
    box-shadow: var(--gl-edge), 0 8px 26px rgba(0, 0, 0, .16);
  }

  /* El botón adentro de la pastilla lleva su propio radio, y la diferencia
     entre los dos es el padding que los separa: es la regla concéntrica de
     iOS 26. Sin esto se ve un rectángulo metido dentro de un óvalo. */
  .an-sticky-buy__btn {
    min-height: 44px;
    padding: 0 26px;
    border-radius: var(--r-capsule);
  }

  .an-sticky-buy__price {
    color: var(--an-ink);
    font-size: 16px;
  }

  .an-sticky-buy__size {
    font-size: var(--an-text-min);
  }

  /* El botón de WhatsApp sube un poco más porque la barra ahora flota. */
  body.an-sticky-buy-visible .btn-whatsapp {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── El bloque de confianza que quedaba vacío ──────────────────────────

   Este archivo esconde los tres primeros beneficios del bloque porque repetían
   con palabras vagas lo que el bloque de arriba ya dice con plazos concretos.
   Queda el cuarto, la métrica de comunidad.

   Pero cuando ese cuarto no viene —y no siempre viene— el contenedor se queda
   igual: con su borde arriba, su borde abajo y su padding. En la ficha de un
   teléfono eso es un recuadro vacío de unos 90px entre "PRODUCCIÓN ÚNICA" y el
   menú de compra, que es exactamente lo que se veía y no se entendía qué era.

   :has() pregunta si existe un cuarto item. Si no existe, no hay bloque. */
#single-product .an-product-trust:not(:has(.an-product-trust__item:nth-child(n+4))) {
  display: none;
}

/* Misma idea para las filas de info: una fila sin nada adentro es una línea
   divisoria suelta. */
#single-product .an-pdp-info__row:not(:has(.an-pdp-info__copy)) {
  display: none;
}

/* ── Galería ───────────────────────────────────────────────────────────

   Antes acá se forzaba radio cero en la foto del producto, con la idea de que
   la esquina viva era parte de la marca. La dirección cambió: el contenido
   también se redondea, así que la galería toma el radio de media como el resto
   de las fotos del sitio.

   Esta regla importa aunque el sistema de diseño ya lo diga: este archivo se
   carga DESPUÉS, así que si acá quedaba el cero, ganaba el cero. Fue el motivo
   por el que la ficha se veía cuadrada mientras la grilla se veía redondeada. */
#single-product .anhelo-product-cover-gallery img,
#single-product .anhelo-product-cover-gallery__item,
#single-product .an-pdp-gallery img {
  border-radius: var(--r-media, 16px);
  overflow: hidden;
}

/* ── Cantidad ──────────────────────────────────────────────────────────
   Es un control, así que es pastilla, y el mínimo táctil vale también para
   los signos de más y menos. */
#single-product .js-quantity-input-container,
#single-product .item-quantity {
  border-radius: var(--r-capsule);
  overflow: hidden;
}

#single-product .js-quantity-input-container button,
#single-product .item-quantity button {
  min-width: 40px;
  min-height: 44px;
}

/* ===========================================================================
   LA FICHA EN CUATRO ZONAS                              24 de octubre de 2026
   ===========================================================================

   Todo lo de abajo es la reorganización de la ficha de producto: se fue la
   columna pegajosa y el acordeón salió de la columna. El porqué largo está en
   el comentario de templates/product.tpl. El corto, con los números medidos
   ese día en Stained Zip Hoodie [Grey] a 1.440px:

     galería 1.978px · columna de compra 839px · hueco al costado 1.139px

   La columna pegajosa no arreglaba ese hueco, lo tapaba. Acá se arregla la
   proporción: la galería pasa a tres columnas (~940px) y la columna de compra
   absorbe el bloque de packs (~300px). Las dos terminan cerca de los 900 y no
   queda nada que pegar.
   =========================================================================== */


/* ── La columna, suelta ──────────────────────────────────────────────────
   La regla de arriba en este mismo archivo declara el modo pegajoso cuando el
   bloque tiene la clase is-sticky. Ya no hay nadie que se la ponga —el JS que
   lo hacía se borró en anhelo-pdp-v5—, pero se neutraliza igual: si alguien
   reinstala una versión vieja del JS, es mejor que la columna se quede quieta
   a que vuelva un comportamiento que no acompaña a este layout. */
#single-product .an-pdp-col.is-sticky {
  position: static !important;
  top: auto !important;
}

/* Las dos columnas ya no tienen que estirarse a la misma altura: eso existía
   para darle recorrido al sticky. Alineadas arriba, la de compra termina donde
   termina y no arrastra blanco. */
/* Las dos columnas alineadas arriba. Cada una termina donde termina; el
   hueco que queda debajo de la galería lo llena la tira de videos, y quién le
   da el alto se explica en el bloque de abajo. */
#single-product .row.section-single-product {
  align-items: flex-start;
  margin-bottom: 24px;
}

/* ── La tira de videos, llenando el hueco ────────────────────────────────

   Las fotos tienen tope de alto para que el frente y la espalda entren
   completos en la primera pantalla; la columna de compra no lo tiene. De ahí
   sale un bloque blanco debajo de las fotos: 78px en una ventana de 900 de
   alto, más de 200 en una de 790. Son dos restricciones que se contradicen y
   no se arreglan con medidas: se arreglan poniendo algo ahí.

   POR QUÉ EL ALTO LO PONE EL JS Y NO ESTO

   El primer intento fue puro CSS: la columna en flex y la tira con flex:1
   para que se quedara con lo que sobrara. No funciona, y conviene que quede
   escrito. La tira pide el alto de la columna; la columna mide lo que miden
   sus hijos, o sea la tira. El navegador no puede resolver la vuelta y la
   deja crecer: medido, las tarjetas quedaban en 300x533 y la galería 483px
   más larga que la columna de compra. El problema cambiaba de lado.

   El alto lo mide anhelo-pdp: resta el alto de las fotos al de la columna de
   compra y se lo escribe a la tira. Es una cuenta, no una negociación.

   Lo de acá abajo es el estado sin JS —220px, un valor razonable— y la forma
   de las tarjetas, que se miden por ALTO para que entren tantas como el hueco
   permita sin deformarse nunca. */
@media (min-width: 992px) {
  #single-product .an-pdp-galeria .an-pdp-videos {
    display: flex;
    flex-direction: column;
    height: 220px;
    margin-top: 12px;
    padding-top: 12px;
  }

  #single-product .an-pdp-galeria .an-pdp-videos[hidden] { display: none !important; }

  #single-product .an-pdp-galeria .an-pdp-videos__t {
    flex: 0 0 auto;
    margin-bottom: 10px;
  }

  /* min-height:0 es obligatorio: sin él un hijo de flex se niega a bajar de
     la altura de su contenido y el riel desborda la tira en vez de encogerse. */
  #single-product .an-pdp-galeria .an-pdp-videos__riel {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    gap: 10px;
  }

  #single-product .an-pdp-galeria .an-pdp-videos__riel .an-product-social-card {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
  }

  #single-product .an-pdp-galeria .an-pdp-videos__riel .an-product-social-card__play {
    width: 34px;
    height: 34px;
  }

  /* Las miniaturas que bajaron de la galería, con la misma forma que las
     tarjetas de video que tienen al lado. Sin borde blanco: el marco pedía
     atención para una foto secundaria, y al lado de los videos —que no lo
     llevan— se leían como dos cosas distintas cuando son lo mismo.

     La proporción es la de los mockups, 2:3, no la de los reels. Se miden por
     alto, igual que todo lo que vive en esta tira. */
  #single-product .an-pdp-galeria .an-pdp-videos__riel > .anhelo-product-cover-gallery__item {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 2 / 3;
    margin: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--an-bone, #f2f0ee);
  }

  #single-product .an-pdp-galeria .an-pdp-videos__riel > .anhelo-product-cover-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* El rótulo se va de esta tira.

     Decía "2 videos con esta prenda" y ahora la tira trae fotos y videos
     mezclados, así que el número sería mentira. Además son 26px que le quitan
     alto a las tarjetas justo donde el espacio es el que sobra. Lo que hay se
     entiende sin rótulo: los videos traen su botón de play. */
  #single-product .an-pdp-galeria .an-pdp-videos__t { display: none; }
}

/* Permiso de achicarse, en toda la cadena.

   Esto venía del <style> de product-accordion.tpl y se trae acá porque ese
   snippet ya no se imprime. No es decorativo: un elemento de flex arranca en
   min-width:auto y se niega a achicarse por debajo de su contenido. Sin esto,
   un riel con overflow-x en vez de scrollear empuja a sus padres hasta romper
   la grilla de bootstrap, y las dos columnas se apilan. Pasó, con la fila de
   videos de un producto con seis. */
#single-product .row.section-single-product > .col,
#single-product .an-pdp-col,
#single-product .js-product-form,
.an-pdp-saber,
.an-pdp-saber__body {
  min-width: 0;
}

/* La caja vieja de talles queda vacía cuando le sacan los paneles. */
#anhelo-size-advisor:empty { display: none; }


/* ── ZONA 1 · La galería: dos fotos y una tira ───────────────────────────

   Cinco intentos. Valen los cinco escritos para que no haya un sexto.

   1. Mosaico de 2 columnas, seis fotos en tres filas. Cada foto a 467px
      —buen tamaño— pero 1.978px de alto contra una columna de compra de 839.
      Mil cien píxeles de blanco al costado.

   2. Tres columnas parejas: el alto bajó a 890, pero las fotos quedaron en
      311px y una prenda en 311px no se ve, se ve el color.

   3. Dos grandes arriba y cuatro en una tira recortada de 130px: el alto
      cerró, pero recortar una foto 2:3 a una banda apaisada deja un pedazo de
      torso sin pies ni cabeza. Una miniatura que no se entiende no sirve.

   4. Cuatro tarjetas chiquitas flotando sobre las dos grandes, centradas en
      la juntura. Se veía bien, pero tapaban la prenda. Y no tiene arreglo
      moviéndolas: dónde termina el buzo dentro de la foto cambia en cada
      mockup, así que cualquier posición fija acierta en unos productos y
      pisa la prenda en otros.

   5. Esto. Las dos principales ocupan la galería entera y las otras cuatro
      bajan a la tira de abajo, junto a los videos: una sola fila de material
      secundario —más fotos y la prenda en movimiento— debajo de las dos que
      importan. No tapan nada, en ningún producto, y de paso la tira tiene más
      con qué llenar el hueco.

   El movimiento de las miniaturas a la tira lo hace anhelo-pdp, porque la
   galería la arma un script en el layout y acá solo se puede pintar.

   Lo de abajo es el respaldo por si ese script no corre: las cuatro quedan en
   una segunda fila de la grilla, enteras y sin recortar.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {

  #single-product .anhelo-product-cover-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Las dos principales, clavadas en la fila 1 y en su columna. */
  #single-product .anhelo-product-cover-gallery > :nth-child(1) {
    grid-row: 1;
    grid-column: 1;
  }

  #single-product .anhelo-product-cover-gallery > :nth-child(2) {
    grid-row: 1;
    grid-column: 2;
  }

  #single-product .anhelo-product-cover-gallery > :nth-child(-n+2) {
    display: flex;
    justify-content: center;
  }

  /* ── El tope de alto ───────────────────────────────────────────────────

     Sin tope, la foto crece con el ancho: la celda es la mitad de la galería
     y la galería es dos tercios de la página. Medido el 24 de octubre de 2026:
     a 1.440px mide 471x707 y entra justa; a 1.920 mide 630x945 y se corta por
     abajo. Cuanto más grande la pantalla, menos se ve de la prenda.

     100vh menos 190 —la franja de anuncios, el encabezado y aire— es lo que
     queda de pantalla: garantiza que el frente y la espalda se vean COMPLETOS
     sin scrollear, en cualquier alto de ventana. Los 900 son un techo para que
     en un monitor muy alto la foto no se vuelva un cartel.

     La foto no se recorta: con width auto y max-height el navegador la
     angosta manteniendo la proporción y la centra. */
  #single-product .anhelo-product-cover-gallery > :nth-child(-n+2) img {
    width: auto;
    max-width: 100%;
    max-height: min(calc(100vh - 190px), 900px);
    object-fit: contain;
  }

  /* Con una sola foto, que ocupe las dos columnas. Va después de la regla que
     clava la primera en la columna 1, para ganarle por orden. */
  #single-product .anhelo-product-cover-gallery > :first-child:nth-last-child(1) {
    grid-column: 1 / -1;
  }

  /* Respaldo sin JS: segunda fila, enteras, sin recortar. */
  #single-product .anhelo-product-cover-gallery > :nth-child(n+3) {
    grid-row: 2;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
  }

  #single-product .anhelo-product-cover-gallery > :nth-child(n+3) img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
}


/* ── ZONA 1 · Las píldoras, en versalita ─────────────────────────────────

   Eran cuatro frases en cuerpo 13 con peso 600: a esa escala compiten con el
   precio y con los talles, y se leen de a una, como frases. En mayúscula, con
   tracking abierto y cuerpo 10, se barren de un golpe y se leen como lo que
   son: un estado, no una lista de avisos.

   El tracking es lo que hace que funcione. En mayúscula sin abrir, el texto
   se apelmaza; .1em es lo mismo que usan los rótulos del resto de la ficha. */
#single-product .an-pdp-fact {
  padding: 7px 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #single-product .an-pdp-fact { font-size: 10px; padding: 7px 12px; }
}

/* La nota de producción única ya estaba en mayúscula y en cuerpo 12: al lado
   de píldoras de 10 quedaba gritando. Se empareja. */
#single-product .an-pdp-facts__nota {
  font-size: 10px;
  letter-spacing: .1em;
}


/* ===========================================================================
   ZONA 1 · PACKS — la venta cruzada, arriba del botón
   ===========================================================================

   Lenguaje de vidrio, el mismo del header, el carrito y el probador: cápsulas
   de 999px para los controles, hojas de 18px para los paneles, hairlines de
   0,67px y desenfoque con saturación. El vidrio flota, no toca el borde.
   =========================================================================== */

.an-packs {
  margin: 18px 0 20px;
  padding: 14px;
  border: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
  border-radius: var(--r-sheet, 18px);
  background: var(--gl-clear, rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(var(--gl-blur, 18px)) saturate(1.4);
  backdrop-filter: blur(var(--gl-blur, 18px)) saturate(1.4);
  box-shadow: var(--gl-edge), var(--gl-shadow);
}

.an-packs[hidden] { display: none !important; }

.an-packs__t {
  margin: 0 0 10px;
  color: var(--an-muted, #707070);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.an-packs__filas { display: block; }

.an-packs__fila {
  margin-bottom: 7px;
  border: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
  border-radius: 14px;
  background: var(--an-paper, #fff);
  transition: border-color var(--an-dur, .18s), box-shadow var(--an-dur, .18s);
}

.an-packs__fila:last-child { margin-bottom: 0; }

/* La fila elegida se marca con el borde en tinta, no con un fondo de color:
   un relleno de color acá competiría con las fotos de las prendas, que son lo
   que hay que mirar. */
.an-packs__fila.is-activa {
  border-color: var(--an-ink, #161616);
  box-shadow: 0 0 0 .67px var(--an-ink, #161616);
}

.an-packs__elegir {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.an-packs__radio {
  width: 15px;
  height: 15px;
  border: 1.2px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
  border-radius: 999px;
  position: relative;
}

.an-packs__fila.is-activa .an-packs__radio { border-color: var(--an-ink, #161616); }

.an-packs__fila.is-activa .an-packs__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--an-ink, #161616);
}

/* Las fotos en pila, solapadas.

   Solapadas y no en fila a propósito: en fila, tres fotos con un "+" entre
   medio ocupan todo el ancho y la fila deja de ser una opción para volver a
   ser una tarjeta. En pila ocupan 60px y se leen como un conjunto. */
.an-packs__fotos { display: flex; }

.an-packs__fotos img {
  width: 38px;
  height: 48px;
  margin-left: -11px;
  border: 1.4px solid var(--an-paper, #fff);
  border-radius: 9px;
  background: var(--an-bone, #f2f0ee);
  object-fit: cover;
}

.an-packs__fotos img:first-child { margin-left: 0; }

.an-packs__txt { min-width: 0; }

/* Dos renglones y recién ahí los puntos suspensivos.

   Los nombres reales son largos —«SWEATER "MILANO" CREAM + REMERA "SUPERSTAR"
   [GREY]»— y en un renglón se cortaban en la segunda palabra. Con dos entran
   casi todos, y el tope evita que una fila crezca al doble que sus hermanas. */
.an-packs__n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--an-ink, #161616);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.008em;
  line-height: 1.25;
}

.an-packs__s {
  display: block;
  margin-top: 2px;
  color: var(--an-muted, #707070);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-packs__pr {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.an-packs__antes {
  display: block;
  color: var(--an-faint, #a4a4a4);
  font-size: 10.5px;
}

.an-packs__ahora {
  display: block;
  color: var(--an-ink, #161616);
  font-size: 14px;
  font-weight: 700;
}

/* El ahorro, en pesos y no en porcentaje.

   "Te ahorrás $22.160" se entiende sin hacer nada; "10% OFF" obliga a calcular
   sobre un número que todavía no se terminó de leer. Va en tinta plena porque
   es el único dato de la fila que justifica elegirla. */
/* Ocupa el renglón del subtítulo, no uno propio: con un renglón más por fila
   el bloque medía 406px y empujaba el botón de comprar fuera de la pantalla. */
.an-packs__ahorro {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: var(--r-capsule, 999px);
  background: var(--gl-tint, rgba(22, 22, 22, .84));
  color: var(--an-paper, #fff);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Los talles de lo que se suma, dentro de la fila elegida. */
/* El margen lateral de 11px alinea la línea con el padding de la fila: así la
   separación entre la opción y sus talles no toca los bordes de la tarjeta. */
.an-packs__talles {
  margin: 0 11px;
  padding: 0 0 12px;
  border-top: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
}

.an-packs__talles[hidden] { display: none !important; }

.an-packs__talle-fila { margin-top: 10px; }

.an-packs__talle-n {
  display: block;
  margin-bottom: 6px;
  color: var(--an-muted, #707070);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.an-packs__talle-ops { display: flex; flex-wrap: wrap; gap: 6px; }

.an-packs__size {
  min-width: 42px;
  padding: 7px 12px;
  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-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--an-dur, .18s), color var(--an-dur, .18s);
}

.an-packs__size.is-active {
  border-color: transparent;
  background: var(--gl-tint, rgba(22, 22, 22, .84));
  color: var(--an-paper, #fff);
}

.an-packs__chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.an-packs__chip {
  color: var(--an-muted, #707070);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.an-packs__pie { margin-top: 11px; }
.an-packs__pie[hidden] { display: none !important; }

.an-packs__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--r-capsule, 999px);
  background: var(--gl-tint, rgba(22, 22, 22, .84));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--gl-shadow);
  color: var(--an-paper, #fff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.an-packs__cta:disabled { opacity: .45; cursor: default; }

.an-packs__monto {
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ── Un solo botón de compra a la vista ──────────────────────────────────

   Mientras la fila elegida sea "Solo esta prenda", manda el botón nativo y el
   bloque de packs no muestra ninguno. Al elegir un pack pasa al revés: el JS
   le pone esta clase a #single-product y se apagan los tres CTA que hablan de
   comprar una sola prenda —el nativo, la barra fija de celular y la tarjeta
   flotante de escritorio—.

   Lo que se paga: con un pack elegido, el botón de comprar existe solo dentro
   del bloque. Es aceptable porque la zona de decisión entera mide ~900px y el
   bloque está arriba del botón, a un scroll corto. Lo que NO era aceptable es
   lo contrario: dejar la barra fija diciendo "Agregar al carrito" cuando la
   persona eligió un combo de dos prendas, y que se lleve una. */
#single-product.an-packs-activo .js-addtocart,
#single-product.an-packs-activo .js-prod-submit-form { display: none !important; }

/* La tarjeta flotante de escritorio sí se apaga: tiene selector de talle y
   color propios y habla de una sola prenda. El bloque de packs queda a la
   vista en una zona de ~1.000px, a un scroll corto.

   La barra fija de CELULAR no se apaga. Apagarla dejaba el teléfono sin
   ningún botón de comprar apenas se bajaba del bloque. En vez de eso cambia
   de dueño: muestra el total del combo y dispara el CTA del bloque. Lo hace
   anhelo-product, leyendo window.anheloPacks. */
html[data-an-packs] .an-buycard { display: none !important; }


/* ===========================================================================
   ZONA 2 · SABER — descripción, talles y envíos, a ancho completo
   ===========================================================================

   Eran tres filas de un acordeón dentro de una columna de 380px. El acordeón
   existía por esa restricción de ancho y no por una decisión: ahí no entra una
   tabla de medidas abierta ni un calculador de código postal.

   A ancho completo entran las tres abiertas, una al lado de la otra. Una tabla
   de talles a la vista se lee; una que hay que abrir, no — y es el dato que
   más devoluciones evita.
   =========================================================================== */

.an-pdp-saber {
  width: 100%;
  margin: 10px 0 0;
  padding-top: 30px;
  border-top: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
}

.an-pdp-saber__t {
  margin: 0 0 16px;
  color: var(--an-ink, #161616);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Flex y no grid, y el motivo es medible.

   Era `grid-template-columns: repeat(auto-fit, minmax(265px, 1fr))`, que
   calcula cuántas columnas entran por el ancho del contenedor sin mirar
   cuántas tarjetas hay. Mientras eran cuatro no se notaba. Al pasar la
   descripción a ocupar la fila entera quedaron tres tarjetas cortas en una
   grilla de cinco columnas: 267px cada una y dos huecos a la derecha.

   Con flex, el ancho se reparte entre las que están. Tres tarjetas dan 455px
   cada una; si aparece la cuarta —el acordeón de medios de pago, que
   anhelo-pdp mueve acá— pasan a 338 solas. El 265 del flex-basis sigue siendo
   el mínimo antes de bajar de renglón. */
.an-pdp-saber__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.an-pdp-saber__card,
.an-pdp-saber__grid > .js-accordion-container {
  flex: 1 1 265px;
}

.an-pdp-saber__card,
.an-pdp-saber__grid > .js-accordion-container {
  padding: 18px;
  border: .67px solid var(--gl-hair-ink, rgba(22, 22, 22, .12));
  border-radius: var(--r-sheet, 18px);
  background: var(--gl-clear, rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(var(--gl-blur, 18px)) saturate(1.4);
  backdrop-filter: blur(var(--gl-blur, 18px)) saturate(1.4);
  box-shadow: var(--gl-edge);
  transition: box-shadow var(--an-dur, .18s);
}

.an-pdp-saber__card[hidden] { display: none !important; }

.an-pdp-saber__h {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  color: var(--an-muted, #707070);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* La píldora "Cambio 30 días" trae hasta acá. Antes abría una fila, y ese
   gesto decía qué se vino a mirar; sin él hace falta un destello. */
.an-pdp-saber__card.is-senalada {
  box-shadow: var(--gl-edge), 0 0 0 1.4px var(--an-ink, #161616);
}

/* El contenido que mueven otros scripts entra con los márgenes que traía de
   cuando era un bloque suelto. */
.an-pdp-saber__body > :first-child { margin-top: 0 !important; }
.an-pdp-saber__body > :last-child { margin-bottom: 0 !important; }
.an-pdp-saber__body .product-description { margin-top: 0; }

/* El calculador viaja dentro de su contenedor, que no es una tarjeta. */
.an-pdp-saber #product-shipping-container { padding: 0; border: 0; }
.an-pdp-saber #product-shipping-container .js-accordion-container {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Acá estaban las reglas de la tarjeta de descripción y de su botón "Leer
   todo": el techo de 340px con desvanecido, la fila entera, el orden al final.

   Se fueron el 24 de octubre de 2026 con la tarjeta. La descripción abre en un
   cajón propio —snipplets/product/anhelo-detalles.tpl— que es ancho y scrollea
   por dentro, así que no hay nada que recortar ni que reordenar. El bloque
   "saber" queda con las dos tarjetas que se consultan de un vistazo, repartidas
   a la mitad del ancho cada una. */



/* ===========================================================================
   ZONA 3 · VERLA PUESTA — los videos se mudaron a la galería
   ===========================================================================

   Acá vivían las reglas de la banda de videos a ancho completo, debajo de las
   tarjetas de "saber". Se fueron el 24 de octubre de 2026 junto con la banda:
   los videos pasaron a la columna de la galería, a llenar el hueco que dejan
   las fotos con tope de alto. Las reglas nuevas están más arriba, en el
   bloque de la fila del producto.

   De paso la página se acorta: eran unos 420px de alto que dejaron de estar.
   =========================================================================== */

@media (max-width: 767px) {
  .an-pdp-saber { padding-top: 24px; }
  .an-pdp-saber__grid { gap: 10px; }
  .an-pdp-saber__card,
  .an-pdp-saber__grid > .js-accordion-container { padding: 15px; }
  .an-pdp-saber .an-pdp-videos__riel .an-product-social-card { flex-basis: 136px; }
  .an-packs { padding: 12px; }
  .an-packs__elegir { gap: 9px; padding: 10px; }
  .an-packs__fotos img { width: 34px; height: 44px; }
}