/* =========================================================
   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: 2px 6px;
  border: 1px solid currentColor;
  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;
}