/* =========================================================
   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;
}