/* ============================================================================
   Ficha de producto v2 — Hechizos de Amor (interruptor hda_ficha_v2_enabled)
   ============================================================================
   Fusión de:
     - propuesta.css          (banco: zona de compra — galería + columna)
     - propuesta-bloques.css  (banco: 8 bloques editoriales de abajo)
     - lo de la v1 (single-product-hda.php) que sigue haciendo falta:
       .hda-sp__wrap, breadcrumb, zoom-hint, lightbox, barra fija móvil,
       .hda-sp__h2 (reseñas), CSS de reseñas, y la base de .hda-sp__card
       que .fv2-also solo "reviste" (no la reemplaza entera).
   Lo que la v2 reemplaza (descripción vieja, acordeón viejo, reseñas vacías,
   related-grid en grilla) NO se porta.

   Diferencia con el banco: los tokens --f-* se declaran UNA sola vez, en
   .hda-sp (el <main>), y su variante fúnebre en body.hda-funeral-theme
   .hda-sp — .fv2 y .fv2-bloques viven los dos dentro de .hda-sp y heredan
   de ahí (en el banco cada uno los redeclaraba porque no compartían un
   ancestro común). Los tokens viejos de la v1 (--bg/--ink/--line/--disp/…)
   se retiran: todo lo reusado de la v1 (cards, lightbox, sticky, reseñas)
   quedó traducido a los tokens --f-* nuevos, para que la variante fúnebre
   los alcance a todos por igual (spec §5 / brief-bloques: "SOLO tokens,
   nunca colores fijos").
   ============================================================================ */

.hda-sp {
  --f-brand: #960946;
  --f-brand-osc: #7B0035;
  --f-tinta: #2B1520;
  --f-suave: #6E5A62;
  --f-linea: #E7D3CA;
  --f-panel: #FDE8DE;
  --f-ok: #1F7A4D;
  --f-crema: #FEF3E7;
  --f-display: "Qalogre fit", "Cormorant Garamond", Georgia, serif;
  --f-texto: "Founders Grotesk Official", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--f-crema);
  color: var(--f-tinta);
  font-family: var(--f-texto);
}
body.hda-funeral-theme .hda-sp {
  --f-brand: #4B5568;
  --f-brand-osc: #3A4250;
  --f-tinta: #23282F;
  --f-suave: #5E6570;
  --f-linea: #C9CDD4;
  --f-panel: #E8EAEE;
}

/* ---------- Base heredada de la v1: envoltorio, migas, foco ---------- */
.hda-sp__wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 64px; }
.hda-sp :focus-visible { outline: 3px solid var(--f-brand); outline-offset: 2px; border-radius: 6px; }
.hda-sp .woocommerce-breadcrumb { font-size: 13px; color: var(--f-suave); padding: 18px 0 6px; }
.hda-sp .woocommerce-breadcrumb a { color: var(--f-suave); text-decoration: none; }
.hda-sp .woocommerce-breadcrumb a:hover { color: var(--f-brand); }

/* ---------- Ayuda de zoom + cursor sobre la galería (heredado de la v1) ---------- */
.hda-sp__gallery { position: relative; }
.hda-sp__zoom-hint {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(42, 28, 32, .72); color: #fff; font-size: 11px;
  padding: 6px 10px; border-radius: 999px;
  display: inline-flex; gap: 6px; align-items: center; pointer-events: none;
}
.hda-sp .section-product-info__img-product img { cursor: zoom-in; }

/* ============================================================================
   Zona de compra (banco: propuesta.css)
   ============================================================================ */

/* ---------- Rejilla: galería y columna de compra ---------- */
.fv2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1023.98px) { .fv2 { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Galería ---------- */
.fv2-gal .section-product-info__custom-gallery-slider {
  display: flex;
  /* el CSS de hoy lo pone en columna: hay que decirlo explicito */
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.fv2-gal .section-product-info__thumbnail-container {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 84px;
}
.fv2-gal .section-product-info__thumbnail {
  width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid transparent; background: var(--f-panel); cursor: pointer;
}
.fv2-gal .section-product-info__thumbnail:first-child { border-color: var(--f-brand); }
.fv2-gal .section-product-info__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.fv2-gal .section-product-info__slider-container { flex: 1 1 auto; min-width: 0; }
.fv2-gal .section-product-info__img-product img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px;
}
/* Con una sola foto no hay columna de miniaturas: quedaría un hueco. */
.fv2-gal--una .section-product-info__thumbnail-container { display: none; }

@media (max-width: 1023.98px) {
  .fv2-gal .section-product-info__custom-gallery-slider { flex-direction: column; }
  .fv2-gal .section-product-info__thumbnail-container { order: 1; flex-direction: row; flex: none; }
}

/* ---------- Columna de compra ---------- */
.fv2-buy {
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 18px;
  font-family: var(--f-texto);
  color: var(--f-tinta);
}
@media (max-width: 1023.98px) { .fv2-buy { position: static; } }

.fv2-crumb { font-size: 13px; color: var(--f-suave); margin: 0; }

.fv2-badges { display: flex; gap: 6px; margin: 0; flex-wrap: wrap; }
.fv2-badge {
  font: 500 12px/1 var(--f-texto);
  letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px; color: #fff;
}
.fv2-badge--venta { background: var(--f-brand); }
.fv2-badge--hoy { background: var(--f-ok); }
.fv2-badge--oferta { background: #B8143C; }

.fv2 .section-product-info__product-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.04;
  margin: 0;
  color: var(--f-brand);
}
.fv2 .section-product-info__custom-product-category {
  display: block;
  font-family: var(--f-display);
  font-size: 21px;
  color: var(--f-suave);
  margin-bottom: 2px;
}

.fv2 .hda-sp__price { margin: 0; }
/* Vence el estilo de "píldora" que trae [mi_precio_producto] por defecto
   (fondo, borde, tipografía propios del shortcode): todo el bloque de abajo
   existe para que el precio se vea como texto de display, no como badge. */
.fv2 .section-product-info__product-price,
.fv2 .section-product-info__woocommerce-Price-amount {
  font-family: var(--f-display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--f-brand) !important;
  background: none !important;
  padding: 0 !important;
  /* la pildora vieja dejaba un borde que se leia como una linea tachando el precio */
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1.1 !important;
  display: inline-block;
}
.fv2-desc { font-size: 15px; line-height: 1.6; color: var(--f-suave); margin: 0; }

/* ---------- Atributos y tamaño ---------- */
.fv2-attrs { margin: 0; }
.fv2-lbl { font-size: 14px; color: var(--f-suave); }
.fv2-lbl b { color: var(--f-tinta); font-weight: 500; }
.fv2-tam { display: flex; flex-direction: column; gap: 10px; }
.fv2-tam-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Chip informativo (los 175 productos son simples: el tamaño no se elige, se informa). */
.fv2-tam-b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--f-linea); border-radius: 999px;
  background: transparent; color: var(--f-tinta);
  font: 400 14px/1 var(--f-texto); text-transform: none; letter-spacing: normal;
  cursor: default;
}
.fv2-tam-b.is-on { border-color: var(--f-brand); background: var(--f-brand); color: #fff; }

/* ---------- Disponibilidad ---------- */
.fv2-stock {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--f-ok); margin: 0;
}
.fv2-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--f-ok); flex: none; }

/* ---------- Botones ---------- */
.fv2-cta { display: flex; gap: 10px; align-items: stretch; }
.fv2 .section-product-info__quantity-controls {
  width: 124px; height: 52px; flex: none;
  border: 1.5px solid var(--f-linea); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px; margin: 0;
}
.fv2 .section-product-info__quantity-decrease,
.fv2 .section-product-info__quantity-increase {
  width: 34px; height: 34px; border: 0; background: none; border-radius: 50%;
  color: var(--f-tinta); font-size: 18px; line-height: 1; cursor: pointer;
}
.fv2 .section-product-info__quantity-decrease:hover,
.fv2 .section-product-info__quantity-increase:hover { background: var(--f-panel); }
.fv2 .section-product-info__quantity-display { font: 400 15px var(--f-texto); }

.fv2 .section-product-info__add-to-cart-btn {
  flex: 1 1 auto; height: 52px; margin: 0;
  border: 0; border-radius: 999px;
  background: var(--f-brand); color: #fff;
  font: 400 15px/1 var(--f-texto); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background-color .15s ease;
}
.fv2 .section-product-info__add-to-cart-btn:hover { background: var(--f-brand-osc); }

.fv2-ya {
  width: 100%; height: 52px;
  border: 1.5px solid var(--f-brand); border-radius: 999px;
  background: transparent; color: var(--f-brand);
  font: 400 15px/1 var(--f-texto); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.fv2-ya:hover { background: var(--f-brand); color: #fff; }
.fv2-ya:disabled { opacity: .6; cursor: default; }

/* ---------- Fila de entrega ---------- */
.fv2-entrega {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--f-linea); border-radius: 14px;
  padding: 16px 18px;
}
.fv2-entrega-t { display: flex; flex-direction: column; gap: 2px; }
.fv2-entrega-a { font-size: 15px; color: var(--f-tinta); }
.fv2-entrega-b { font-size: 13px; color: var(--f-suave); }
.fv2-round {
  width: 32px; height: 32px; border-radius: 50%; flex: none; margin-left: auto;
  background: var(--f-panel); color: var(--f-brand);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.fv2-round--sm { width: 26px; height: 26px; font-size: 16px; margin-left: auto; }

/* ---------- Acordeón (columna de compra Y preguntas frecuentes) ---------- */
.fv2-acc { border-top: 1px solid var(--f-linea); }
.fv2-acc-item { border-bottom: 1px solid var(--f-linea); }
.fv2-acc-item h3 { margin: 0; }
.fv2-acc-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.fv2-acc-t {
  font-family: var(--f-display); font-size: 20px; font-weight: 400;
  color: var(--f-brand); text-transform: none; letter-spacing: normal;
  /* el sitio pone h1-h6{line-height:.83em}: dentro de un <h3> (FAQ) el span
     hereda 12px YA CALCULADOS y una pregunta de dos lineas se monta sobre si misma */
  line-height: 1.15;
}
/* gotcha 54: Astra pinta button:hover/focus beige #f9d9c1 con (0,1,1); hace falta (0,2,0) */
.fv2-acc .fv2-acc-head:hover,
.fv2-acc .fv2-acc-head:focus { background: none; text-shadow: none; }
.fv2-acc .fv2-acc-head:focus:not(:focus-visible) { outline: 0; }
.fv2-acc-item.is-open .fv2-round--sm { transform: rotate(180deg); }
.fv2-round--sm { transition: transform .18s ease; }
.fv2-acc-body { display: none; padding: 0 0 18px; }
.fv2-acc-item.is-open .fv2-acc-body { display: block; }
.fv2-acc-body p, .fv2-acc-body li { font-size: 14.5px; line-height: 1.6; color: var(--f-suave); }
.fv2-acc-body p { margin: 0 0 12px; }
.fv2-acc-body p:last-child { margin-bottom: 0; }
.fv2-acc-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Insignias de confianza (base heredada de la v1 + ajuste del banco) ---------- */
.hda-sp__trust {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 22px 0; padding: 18px 0;
  border-top: 1px solid var(--f-linea); border-bottom: 1px solid var(--f-linea);
}
.hda-sp__trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 12px; color: var(--f-suave); }
.hda-sp__trust svg { color: var(--f-brand); }
.fv2 .hda-sp__trust { border-top: 1px solid var(--f-linea); padding-top: 18px; margin: 0; }

/* ---------- Categorías + enlace a la landing fúnebre (heredado de la v1) ---------- */
.hda-sp__cats { margin-top: 8px; font-size: 13px; }
.hda-sp__landing-link { margin-top: 12px; font-size: 13px; }
.hda-sp__landing-link a { color: var(--f-brand); text-decoration: underline; }

/* ---------- Correcciones medidas en el banco ---------- */
/* El carrusel no llenaba su columna: su ancho sale del contenido, y con
   flex-basis:auto no crece. Se fuerza el reparto. */
/* traia max-width:510px del CSS actual: por eso la foto no llenaba la columna */
.fv2-gal .section-product-info__custom-gallery-slider { width: 100%; max-width: none; }
.fv2-gal .section-product-info__slider-container { flex: 1 1 0%; min-width: 0; width: auto; }
/* Mismo motivo que arriba (flex-basis:auto no crece por sí solo): sin
   !important el ancho vuelve a depender del contenido y la fila no se llena. */
.fv2-gal .section-product-info__slider-wrapper,
.fv2-gal .section-product-info__slider-slide,
.fv2-gal .section-product-info__img-product { width: 100% !important; }

/* Las etiquetas de atributo venían a 22,5 px y competían con el título. */
.fv2 .section-product-info__attributes-title {
  font-family: var(--f-texto) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--f-suave) !important;
  margin: 0 8px 0 0 !important;
  display: inline !important;
}
/* Mismo motivo que la etiqueta de arriba: el shortcode también imprime la
   LISTA de valores (no solo la etiqueta) a un tamaño y color por defecto
   que compiten con el resto de la columna. */
.fv2 .section-product-info__product-attribute-list,
.fv2 .product-categories-list {
  font-size: 14px !important;
  color: var(--f-tinta) !important;
}
.fv2 .hda-sp__attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.fv2 .hda-sp__cats { font-size: 13px; }
/* Vence el !important de la regla de arriba. Esta selector es MÁS específico
   (3 clases vs. 2), pero una declaración !important siempre le gana a una que
   no lo es sin importar especificidad: sin este !important también, perdería
   contra la de arriba pese a ser más específica. */
.fv2 .hda-sp__cats .section-product-info__attributes-title { font-size: 13px !important; }

/* La nota de envío ya la dice la fila de entrega: en la columna sobra (no se imprime
   markup en v2, pero la regla se conserva por si el shortcode viejo vuelve a usarse). */
.fv2 .hda-sp__ship { display: none; }

/* Contenedor propio para disponibilidad + botones (el padre original es fila). */
.fv2-acciones { display: flex; flex-direction: column; gap: 12px; width: 100%; }
/* El shortcode [custom_quantity_add_to_cart] emite un único contenedor con la
   cantidad y el botón: display:contents lo saca del flujo para que los dos
   hijos participen de .fv2-cta como si fueran hermanos directos. */
.fv2-cta .section-product-info__custom-quantity-add-to-cart { display: contents; }

/* ---------- Estado "ya agregado" (tras un alta exitosa) ----------
   quantity-add-to-cart.js (linea 74-76) hace .hide() del boton y de los
   controles de cantidad, y .show() de este contenedor con SUS DOS botones
   ("Ver carrito" / "Finalizar compra"). jQuery .show() deja un
   "display: block" INLINE en el propio contenedor: ninguna regla nuestra de
   display puede ganarle (el inline siempre gana sobre cualquier hoja), asi
   que NO se pelea esa guerra. En cambio, .custom-quantity-add-to-cart (su
   padre) ya tiene display:contents arriba, asi que este contenedor participa
   como hijo flex directo de .fv2-cta: le alcanza con flex:1 1 100% para
   ocupar la fila entera cuando queda como unico hijo visible (boton y
   controles ya estan en display:none). Los botones que van DENTRO se ponen
   en fila con inline-flex + ancho calculado, porque el padre sigue siendo
   "block": no hay flexbox ahi adentro que reparta nada por si solo. */
.fv2-cta .section-product-info__checkout-buttons {
  flex: 1 1 100%;
  /* apaga el espacio en blanco entre los dos <button> del markup del
     shortcode (hay un salto de linea entre ellos): sin esto el ancho de
     calc(50% - 5px) + margen se pasa del 100% y los botones envuelven. */
  font-size: 0;
}
.fv2 .section-product-info__view-cart-btn,
.fv2 .section-product-info__checkout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: calc(50% - 5px); height: 52px;
  margin: 0; padding: 0; border-radius: 999px;
  font: 400 15px/1 var(--f-texto); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
/* el hueco de 10px entre los dos: gap no aplica (el padre no es flex/grid) */
.fv2 .section-product-info__view-cart-btn {
  margin-right: 10px;
  border: 1.5px solid var(--f-brand); background: transparent; color: var(--f-brand);
}
.fv2 .section-product-info__checkout-btn {
  border: 0; background: var(--f-brand); color: #fff;
}
/* gotcha 54: especificidad >= (0,2,0) para vencer button:hover/focus de Astra
   (fondo beige) y el text-shadow de todo <button> del kit de Elementor */
.fv2 .section-product-info__view-cart-btn:hover,
.fv2 .section-product-info__view-cart-btn:focus { background: var(--f-brand); color: #fff; text-shadow: none; }
.fv2 .section-product-info__checkout-btn:hover,
.fv2 .section-product-info__checkout-btn:focus { background: var(--f-brand-osc); text-shadow: none; }
.fv2 .section-product-info__view-cart-btn:focus:not(:focus-visible),
.fv2 .section-product-info__checkout-btn:focus:not(:focus-visible) { outline: none; }

/* Al recibir added_to_cart (ficha-v2.js), "Comprar ahora" se oculta: agregarlo
   de nuevo pondria una segunda unidad. La linea de stock (.fv2-stock) queda
   visible a proposito: no forma parte de esta regla. */
.fv2-acciones--agregado .fv2-ya { display: none; }

/* ============================================================================
   Bloques editoriales de abajo (banco: propuesta-bloques.css)
   ============================================================================ */

/* Las .hda-sp__section viejas que estos bloques reemplazan (desc y acordeón viejo:
   no se imprimen en la v2, así que esta clase queda de reserva por si algún día
   hace falta ocultar algo puntual sin quitarlo del markup). */
.fv2-legacy--hidden { display: none; }

/* ---------- Compartido ---------- */
.fv2-bloques { font-family: var(--f-texto); color: var(--f-tinta); }
.fv2-bloque { padding: 56px 0; border-top: 1px solid var(--f-linea); }
.fv2-h2 {
  font: 400 clamp(26px, 3.4vw, 36px)/1.15 var(--f-display);
  color: var(--f-brand);
  margin: 0 0 28px;
}
.fv2-h2--center { text-align: center; }
.fv2-eyebrow {
  display: block;
  font: 500 12px/1 var(--f-texto);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-suave);
  margin: 0 0 10px;
}
/* Full-bleed: mismo truco que .alignfull del tema (gotcha 56: #page{overflow-x:clip} evita el scroll fantasma) */
.fv2-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ============================================================
   1. fv2-feat — Editorial: titular + descripción larga real
   ============================================================ */
.fv2-feat { display: grid; grid-template-columns: minmax(220px, 32%) 1fr; gap: 56px; align-items: start; }
.fv2-feat-title {
  font: 400 clamp(28px, 3.4vw, 40px)/1.18 var(--f-display);
  color: var(--f-brand);
  margin: 8px 0 0;
}
.fv2-feat-body { font-size: 16px; line-height: 1.75; color: var(--f-suave); max-width: 70ch; }
.fv2-feat-body p { margin: 0 0 16px; }
/* Vence: la ficha real trae "color:var(--ink-soft)!important" heredado de la v1
   sobre .section-product-info__product-long-description (bloque Descripción viejo,
   que en v2 ya no se imprime, pero el shortcode reusa la misma clase). */
.fv2-feat-body .section-product-info__product-long-description,
.fv2-feat-body .section-product-info__product-long-description * {
  color: var(--f-suave) !important;
}
/* Vence: el widget trae text-align:center heredado (Elementor, por dispositivo — visible <768px).
   Acá el párrafo es cuerpo editorial junto a un titular, no una cita: se lee mejor a la izquierda. */
.fv2-feat-body .section-product-info__product-long-description,
.fv2-feat-body .section-product-info__product-long-description p {
  text-align: left !important;
}
@media (max-width: 900px) {
  .fv2-feat { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   2. fv2-banner — Franja ancha full-bleed con foto + frase
   ============================================================ */
.fv2-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin: 0 0 56px;
  padding: 0;
  border-top: 0;
}
@media (min-width: 768px) { .fv2-banner { height: 420px; } }
/* Vence: el tema trae ".woocommerce img{height:auto}" (0,1,1) — le gana a un solo .fv2-banner-img (0,1,0)
   y la imagen quedaba cuadrada de 1440px en vez de cubrir los 420px de la franja (gotcha 18/54 en foto). */
.fv2-banner .fv2-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv2-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 14, .18), rgba(20, 10, 14, .58));
}
.fv2-banner-t {
  position: relative; z-index: 1; margin: 0; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
}
/* Blanco fijo a propósito: es texto sobre foto con superposición oscura, no una superficie de marca */
.fv2-banner-t span {
  font: 400 clamp(24px, 4vw, 40px)/1.28 var(--f-display);
  color: #fff;
  max-width: 22ch;
}

/* ============================================================
   3. fv2-completa — "Completa tu regalo" (fila de confitería)
   ============================================================ */
.fv2-completa-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
}
.fv2-completa-card {
  flex: 0 0 140px; display: flex; flex-direction: column; gap: 8px;
  scroll-snap-align: start;
}
.fv2-completa-img {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden; background: var(--f-panel);
}
/* Vence ".woocommerce img{height:auto}" (0,1,1): 2 clases, no depende del orden de las hojas */
.fv2-completa .fv2-completa-img img { width: 100%; height: 100%; object-fit: cover; }
.fv2-completa-name { font-size: 13px; line-height: 1.3; color: var(--f-tinta); }
.fv2-completa-price { display: block; font: 400 15px var(--f-display); color: var(--f-brand); margin-top: 2px; }
/* Gotcha 54: especificidad >= (0,2,0) para vencer button:hover de Astra y el text-shadow del kit */
.fv2-completa .fv2-completa-add {
  position: absolute; right: 6px; bottom: 6px;
  width: 32px; height: 32px; border-radius: 50%; padding: 0; margin: 0; border: 0;
  background: var(--f-brand); color: #fff;
  font: 400 20px/1 var(--f-texto); text-transform: none; letter-spacing: normal; text-shadow: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .45);
  transition: background-color .15s ease;
}
.fv2-completa .fv2-completa-add:hover,
.fv2-completa .fv2-completa-add:focus { background: var(--f-brand-osc); }
.fv2-completa .fv2-completa-add:focus:not(:focus-visible) { outline: none; }
/* Sin distintivos de urgencia/venta en fúnebre (regla de marca, spec §5) */
body.hda-funeral-theme .fv2-completa { display: none; }

/* ============================================================
   4. fv2-marquee — Banda de texto en movimiento
   ============================================================ */
.fv2-marquee {
  background: var(--f-brand); color: var(--f-crema);
  overflow: hidden; padding: 14px 0; margin: 0 0 56px;
  border-top: 0;
}
.fv2-marquee-track {
  display: flex; align-items: center; gap: 28px; width: max-content; white-space: nowrap;
  animation: fv2Marquee 28s linear infinite;
}
.fv2-marquee-item { font: 500 14px/1 var(--f-texto); letter-spacing: .02em; }
.fv2-marquee-dot { opacity: .55; }
@keyframes fv2Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   5. fv2-trio — Trío de tarjetas con foto + número + razón
   ============================================================ */
.fv2-trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fv2-trio-card {
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--f-panel);
}
/* Vence ".woocommerce img{height:auto}" (0,1,1) igual que el banner */
.fv2-trio .fv2-trio-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv2-trio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 14, 0) 42%, rgba(20, 10, 14, .78));
}
.fv2-trio-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; padding: 20px; color: #fff;
}
.fv2-trio-num { font: 400 13px/1 var(--f-texto); letter-spacing: .08em; opacity: .85; }
.fv2-trio-title { font: 400 22px/1.2 var(--f-display); }
.fv2-trio-line { font-size: 13.5px; line-height: 1.5; opacity: .92; max-width: 26ch; }
@media (max-width: 760px) { .fv2-trio-grid { grid-template-columns: 1fr; } }

/* ============================================================
   6. fv2-also — "También te puede interesar" (riel con flechas)
   ============================================================ */
.fv2-also-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fv2-also-head .fv2-h2 { margin: 0; }
.fv2-also-arrows { display: flex; gap: 10px; flex: none; }
.fv2-also-arrows[hidden] { display: none; }
.fv2-also .fv2-also-arrow {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; margin: 0;
  border: 1.5px solid var(--f-linea); background: transparent; color: var(--f-tinta);
  font: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.fv2-also .fv2-also-arrow:hover:not(:disabled) { border-color: var(--f-brand); color: var(--f-brand); }
.fv2-also .fv2-also-arrow:disabled { opacity: .35; cursor: default; }
.fv2-also .fv2-also-arrow:focus:not(:focus-visible) { outline: none; }
.fv2-also-rail {
  display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; scroll-padding-left: 4px;
  scrollbar-width: none;
}
.fv2-also-rail::-webkit-scrollbar { display: none; }
/* Base heredada de la v1 (.hda-sp__card*, antes estilo de .hda-sp__related-grid):
   estructura (radio, aspect-ratio, padding, transición) — el color lo pone la
   regla de abajo, que "reviste" con los tokens fv2. */
.hda-sp__card { background: var(--f-panel); border: 1px solid var(--f-linea); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.hda-sp__card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .35); }
.hda-sp__card-img { aspect-ratio: 1 / 1; overflow: hidden; }
.hda-sp__card-img img { width: 100%; height: 100%; object-fit: cover; }
.hda-sp__card-body { padding: 12px 14px 16px; }
.hda-sp__card-name { font-family: var(--f-display); font-size: 20px; color: var(--f-brand); margin: 0 0 5px; }
.hda-sp__card-price { font-weight: 700; color: var(--f-tinta); }
/* Reviste las tarjetas reales de .hda-sp__related-grid (movidas acá por PHP) con los tokens fv2 */
.fv2-also .hda-sp__card {
  flex: 0 0 260px; scroll-snap-align: start;
  background: var(--f-panel); border: 1px solid var(--f-linea); box-shadow: none;
}
.fv2-also .hda-sp__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px -20px rgba(0, 0, 0, .35); }
/* Sin esto, ".woocommerce img{height:auto}" empata en especificidad con la regla original de la
   ficha y depende del orden de las hojas: acá se fija explícito, sin apostarle al orden. */
.fv2-also .hda-sp__card-img img { width: 100%; height: 100%; object-fit: cover; }
.fv2-also .hda-sp__card-name { font-family: var(--f-display); font-style: normal; color: var(--f-brand); }
.fv2-also .hda-sp__card-price { color: var(--f-tinta); font-weight: 400; font-family: var(--f-texto); }

/* ============================================================
   7. fv2-faq — Preguntas frecuentes (mismo acordeón de la columna)
   ============================================================ */
/* Reutiliza .fv2-acc/.fv2-acc-item/.fv2-acc-head/.fv2-acc-t/.fv2-round/.fv2-round--sm/.fv2-acc-body
   de arriba (son reglas globales, no scopeadas a .fv2): mismo look, sin duplicar CSS. */
.fv2-faq .fv2-acc { max-width: 760px; }

/* ============================================================
   8. fv2-trust — Barra de 4 (reusa los 3 SVG existentes + envío)
   ============================================================ */
.fv2-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.fv2-trust-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fv2-trust-item svg { color: var(--f-brand); }
.fv2-trust-item span { font-size: 13.5px; color: var(--f-suave); }
@media (max-width: 640px) { .fv2-trust { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* ---------- Correcciones del revisor (2026-09-14, banco) ---------- */
/* El sitio pone text-transform:capitalize a los h2: los titulos salian en Title Case
   ("Completa Tu Regalo", "Un Detalle Que Dice Lo Que…"). En display va tal cual se escribe. */
.fv2-bloques h2, .fv2-bloques h3, .fv2-bloques .fv2-h2,
.fv2-bloques .fv2-banner-t, .fv2-bloques .fv2-feat-title { text-transform: none; }
/* Los parrafos de la descripcion larga heredan margenes grandes del tema: se aprietan. */
.fv2-feat .fv2-feat-body p, .fv2-feat .section-product-info__product-long-description p { margin: 0 0 14px; }

/* ============================================================================
   Reseña — teaser plegado (0 reseñas: 174 de 175 productos, spec §1/§5)
   ============================================================================ */
/* Mismo look que .fv2-acc-head (arriba), pero sobre <details>/<summary>
   nativo en vez de <button>: no hereda button:hover/text-shadow del tema ni
   del kit (esas reglas apuntan a "button"), así que no hace falta el reset
   de especificidad del gotcha 54 acá. */
.fv2-resena-det { border-top: 1px solid var(--f-linea); }
.fv2-resena-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.fv2-resena-sum::-webkit-details-marker { display: none; }
.fv2-resena-det[open] .fv2-resena-sum .fv2-round--sm { transform: rotate(180deg); }
.fv2-resena-body { padding: 0 0 18px; }

/* ============================================================================
   Reseñas (heredado de la v1, solo se imprime con get_rating_count() > 0)
   ============================================================================ */
.hda-sp .hda-sp__h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 3.5vw, 32px); color: var(--f-brand); margin: 0 0 16px; }
.hda-sp__reviews-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hda-sp__reviews-avg { font-family: var(--f-display); font-size: 44px; font-weight: 400; color: var(--f-brand); line-height: 1; }
.hda-sp__reviews-summary .star-rating { color: #e0a92e; }
.hda-sp__review-list { display: grid; gap: 16px; max-width: 820px; margin-top: 18px; }
.hda-rev { background: var(--f-panel); border: 1px solid var(--f-linea); border-radius: 16px; padding: 18px; }
.hda-rev__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hda-rev__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--f-brand); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; }
.hda-rev__verified { font-size: 11px; color: #2e7d52; background: rgba(46, 125, 82, .1); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.hda-rev__date { font-size: 12px; color: var(--f-suave); }
.hda-rev__stars { margin-bottom: 6px; }
.hda-rev__stars .star-rating { color: #e0a92e; }
.hda-rev__text { color: var(--f-suave); margin: 6px 0 10px; }
.hda-rev__photos { display: flex; gap: 8px; flex-wrap: wrap; }
.hda-rev__photos img, .hda-rev__photo { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.hda-review-form-wrap { margin-top: 30px; max-width: 680px; }
.hda-rev-form__title { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--f-brand); margin: 0 0 14px; }
.hda-rev-form__msg { color: var(--f-suave); }
.hda-rev-form__row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.hda-rev-form__row label { font-size: 13px; font-weight: 600; color: var(--f-tinta); }
.hda-review-form select, .hda-review-form textarea { border: 1.5px solid var(--f-linea); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--f-tinta); background: #fff; max-width: 100%; }
.hda-review-form textarea { resize: vertical; }
.hda-rev-form__submit { background: var(--f-brand); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px; font-weight: 500; cursor: pointer; }
.hda-rev-form__submit:hover { background: var(--f-brand-osc); }
.hda-rev-form__note { display: block; font-size: 12px; color: var(--f-suave); margin-top: 8px; }

/* ============================================================================
   Barra fija móvil (heredado de la v1)
   ============================================================================ */
/* `visibility:hidden` mientras la barra está guardada: sin esto queda fuera de
   pantalla pero SEGUIBLE CON TAB, así que quien navega con teclado enfoca un
   botón "Agregar al carrito" que no ve. La transición sobre visibility conserva
   la animación de salida (recién pasa a hidden al final de los .25s). */
.hda-sp__sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: rgba(254, 243, 231, .97); border-top: 1px solid var(--f-linea); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .25); padding: 10px 14px; display: flex; align-items: center; gap: 12px; transform: translateY(120%); visibility: hidden; transition: transform .25s, visibility .25s; }
.hda-sp__sticky.is-visible { transform: translateY(0); visibility: visible; }
.hda-sp__sticky-price { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--f-tinta); white-space: nowrap; }
.hda-sp__sticky-price .section-product-info__regular-price { display: none; }
.hda-sp__sticky-btn { flex: 1; background: var(--f-brand); color: #fff; border: 0; border-radius: 999px; padding: 13px 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
@media (min-width: 900px) { .hda-sp__sticky { display: none; } }

/* ============================================================================
   Lightbox de galería (heredado de la v1)
   ============================================================================ */
.hda-sp__lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(14, 10, 12, .92); display: none; place-items: center; padding: 24px; }
.hda-sp__lightbox.is-open { display: grid; }
.hda-sp__lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 12px; object-fit: contain; }
.hda-sp__lightbox-close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .hda-sp *{ transition: none !important; }
  .fv2-marquee-track { animation: none; }
}

/* ---------- Correcciones tras la verificación en staging (2026-09-14) ---------- */
/* Precio en oferta: el regular tachado llega con píldora (borde, padding y posición de una
   hoja global ajena al tema) y se montaba sobre el precio rebajado (visto en Celeste).
   Se fuerza a texto plano al lado del precio. Los !important vencen esa hoja global. */
.fv2 .section-product-info__product-price { display: flex !important; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fv2 .section-product-info__product-price .section-product-info__regular-price {
  position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; border-radius: 0 !important;
  font: 400 18px/1.2 var(--f-texto) !important; color: var(--f-suave) !important;
  text-decoration: line-through;
}
/* Móvil: las miniaturas van debajo de la foto y la ayuda "Toca para ampliar" quedaba
   flotando entre ellas (bottom del contenedor, no de la foto). En táctil no hace falta. */
@media (max-width: 1023.98px) { .fv2-gal .hda-sp__zoom-hint { display: none; } }