/* ============================================================================
   cst-ficha.css - Rediseno de la ficha de producto (CONSTANT.)
   Archivo propio. Solo ASCII. Todas las clases con prefijo cst-.
   Los nativos se ocultan solo cuando cst-ficha.js agrega la clase de control
   (cst-price-on / cst-hidden), asi que sin JS la ficha queda como estaba.
   ========================================================================== */

.cst-hidden { display: none !important; }
.cst-rel { position: relative; }

/* ---------- A.1 Precio ---------- */

#single-product.cst-price-on .js-price-container { display: none !important; }

.cst-zone { margin: 0 0 16px; }
.cst-price { margin-bottom: 12px; }
.cst-compare {
  font-size: 13px;
  line-height: 1.2;
  color: #8A8A8A;
  text-decoration: line-through;
}
.cst-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.cst-final { font-size: 28px; line-height: 1.15; font-weight: 700; }
.cst-off {
  display: inline-block;
  background: #C8392B;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cst-notax { margin-top: 4px; font-size: 11px; line-height: 1.3; color: #6E6E6E; }

/* ---------- A.2 Transferencia ---------- */

.cst-transfer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #B5443A;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  color: #fff;
}
.cst-transfer-icon, .cst-box-icon, .cst-delivery-icon, .cst-gift-icon { display: inline-flex; flex-shrink: 0; }
.cst-transfer-icon svg { width: 19px; height: 19px; color: #fff; }
.cst-transfer-title {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFD9D3;
  white-space: nowrap;
}
.cst-transfer-price { font-size: 18px; line-height: 1.2; font-weight: 700; color: #fff; }

/* ---------- A.3 Cuotas y envio ---------- */

.cst-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #D9533C;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cst-box-icon svg { width: 18px; height: 18px; color: #F28B7D; }

/* ---------- A.4 Stock ---------- */

.cst-stock { font-size: 12px; line-height: 1.3; color: #F28B7D; margin-bottom: 8px; }

/* ---------- A.5 Entrega ---------- */

#single-product.cst-on #product_form .js-addtocart { margin-bottom: 10px !important; }
.cst-delivery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: #BDBDBD;
  margin: 0 0 12px;
}
.cst-delivery-icon svg { width: 15px; height: 15px; color: #F28B7D; }
.cst-delivery-strong { color: #fff; }

/* ---------- A.6 Personas viendo ---------- */

.cst-viewers {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(24, 24, 24, 0.8);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}
.cst-viewers-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CC26A; flex-shrink: 0; }

/* ---------- E Barra fija de Nuby (#ns-action-bar) y WhatsApp ---------- */

/* Nuby alterna display none/block segun su propio observer; aca la visibilidad la
   decide cst-ficha.js (solo cuando el boton principal quedo arriba del viewport). */
#ns-action-bar.cst-bar {
  display: block !important;
  transition: transform .3s ease, opacity .3s ease;
  will-change: transform;
}
#ns-action-bar.cst-bar.cst-bar-off {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* El tema ya le da transition: .4s (todas las propiedades) al boton: el desplazamiento es suave. */
.btn-whatsapp.js-btn-fixed-bottom.cst-wa-up {
  transform: translateY(var(--cst-wa-shift, -70px));
}
/* Notificacion de ventas de Nuby (abajo a la izquierda): sube con la barra, con la misma transicion
   que el WhatsApp (.4s). Nuby anima la opacidad por su cuenta, no usa transform ni transition. */
[id^="ns-floating-purchase"] {
  transition: transform .4s ease;
}
html.cst-bar-on [id^="ns-floating-purchase"] {
  transform: translateY(var(--cst-wa-shift, -70px));
}
/* Banner flotante "Descuento en 2da unidad" de Nuby: cst-ficha.js calcula --cst-su-bottom (arriba de
   WhatsApp y de la notificacion, +12px); con la barra visible sube igual que ellos. !important porque
   Nuby reescribe su style en linea (inset: auto 16px 16px auto). */
[id^="ns-secondunit-float"] {
  bottom: var(--cst-su-bottom, 16px) !important;
  transition: transform .4s ease;
}
html.cst-bar-on [id^="ns-secondunit-float"] {
  transform: translateY(var(--cst-wa-shift, -70px));
}

/* Videos incrustados en la descripcion (ej. YouTube con ancho fijo de 467px en la Camperoli Rosedia):
   no pueden pasar del ancho del contenedor (desbordaban la pagina a lo ancho en mobile). */
#product-description .user-content iframe {
  max-width: 100% !important;
}
#product-description .user-content iframe[src*="youtube"],
#product-description .user-content iframe[src*="youtu.be"],
#product-description .user-content iframe[src*="vimeo"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* ---------- B Bolso: badge de la foto ---------- */

.cst-promo-label { text-transform: uppercase; }

/* ---------- B Bolso: bundle ---------- */

.cst-bundle { margin: 4px 0 16px; }
.cst-bundle-title { font-size: 16px; line-height: 1.3; font-weight: 500; color: #fff; }
.cst-gift {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: #8A8A8A;
}
.cst-gift-icon svg { width: 14px; height: 14px; color: #F28B7D; }
.cst-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.cst-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 14px 4px 10px;
  background: transparent;
  border: 1.5px solid #3A3A3A;
  border-radius: 10px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cst-opt.is-on { border-color: #fff; background: #161616; }
.cst-opt:focus-visible { outline: 2px solid #F28B7D; outline-offset: 2px; }
.cst-opt-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #C8392B;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.cst-opt-qty { font-size: 14px; line-height: 1.2; font-weight: 500; }
.cst-opt-unit { font-size: 12px; line-height: 1.2; color: #8A8A8A; white-space: nowrap; }
.cst-opt-choice { font-size: 10px; line-height: 1.2; color: #F28B7D; margin-top: 2px; }
.cst-total { margin-top: 12px; font-size: 13px; line-height: 1.35; color: #D8D8D8; }
.cst-total-amount { color: #fff; font-weight: 500; }
.cst-total-save { color: #F28B7D; }
.cst-note { margin-top: 6px; font-size: 11px; line-height: 1.3; color: #6E6E6E; }

@media (min-width: 768px) {
  .cst-final { font-size: 30px; }
}