/* ============================================================================
   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: #7A0D13;
  --f-brand-osc: #5C0A0F;
  --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); }

/* ---------- Contenedor de la galería (heredado de la v1: position para
   el badge de oferta, el botón de lupa y las miniaturas flotantes) ---------- */
.hda-sp__gallery { position: relative; }

/* ============================================================================
   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: 1px solid transparent; background: var(--f-panel); cursor: pointer;
}
/* ficha-v2.md §12 decisión 6 (arreglo): el borde de la activa sigue a la
   clase que de verdad mueve gallery-slider.js (--active), no a :first-child
   (que nunca se movía: dos defectos registrados en §12 "Lo medido"). Mismo
   criterio en móvil (miniaturas flotantes) y en tablet/escritorio (decisión 3). */
.fv2-gal .section-product-info__thumbnail--active { border-color: var(--f-tinta); }
.fv2-gal .section-product-info__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
/* position:relative: ancla del botón de lupa (§12 decisión 5, corrección más
   abajo) — este contenedor es el "visor" que recorta al tamaño real de la
   foto (fuera de él, `.slider-wrapper` es lo que se traslada al cambiar de
   imagen), así que es el marco correcto para un `position:absolute` fijo en
   la esquina, a diferencia de `.hda-sp__gallery` (más ancha en escritorio). */
.fv2-gal .section-product-info__slider-container { flex: 1 1 auto; min-width: 0; position: relative; }
/* ficha-v2.md §12 decisiones 1 y 3: foto 3:4 (antes 4:5) en todos los tamaños;
   radio 20px en tablet/escritorio (antes 18), 0 en móvil (bloque de abajo).
   position:relative es NUEVO acá: antes solo lo daba post-13736.css (Elementor),
   así que el badge "¡Oferta!" (decisión 4) dependía de una hoja ajena que puede
   desaparecer (gotcha 101). Ahora el ancla vive en el tema. */
.fv2-gal .section-product-info__img-product { position: relative; }
.fv2-gal .section-product-info__img-product img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px;
}
/* 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; }
}

/* ============================================================================
   ficha-v2.md §12 — Galería estilo Pebble en móvil (decisión 1 y 2)
   ============================================================================
   < 768px: la galería va de borde a borde (mismo truco que .fv2-bleed, pero
   sobre un ITEM del grid: a 1 columna en este ancho el grid-item ocupa el
   100% del wrap y está centrado, así que "50% del contenedor" coincide con
   "50vw" — mismo cálculo que ya usa .fv2-bleed más abajo) y pegada al header.
   El `padding-top` de `.fv2` (sección "Ajustes 2026-09-18", más abajo en este
   mismo archivo) se anula para este ancho ahí mismo, en la regla que lo
   declara — poner acá un `.fv2{padding-top:0}` NO alcanzaba: misma
   especificidad (0,1,0) y esa otra regla va DESPUÉS en el archivo, así que
   ganaba igual pese al `max-width` más angosto de esta (medido: quedaban 16px
   de hueco en vez de 0). El aire entre la foto y la columna de compra lo sigue
   dando el `gap` del grid, que no se toca. El resto de la ficha conserva su
   margen de 16px porque solo `.fv2-gal` escapa del wrap, no `.fv2` ni
   `.fv2-buy`. */
@media (max-width: 767.98px) {
  .fv2-gal {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  /* post-13736.css (Elementor) le mete `padding: 0 0.6rem` a este contenedor
     bajo 767px: sin anularlo, la foto queda a ~9.6px de cada borde en vez de
     a 0 (decisión 1: left === 0, ancho === innerWidth). */
  .fv2-gal .section-product-info__custom-gallery-slider { padding: 0; }
  .fv2-gal .section-product-info__img-product img { border-radius: 0; }

  /* Miniaturas flotantes DENTRO de la foto (spec de Pebble, "Lo medido"):
     contenedor blanco centrado a 24px del borde inferior, radio 10, padding
     8, sombra; miniaturas 40x40 radio 4 con 8px entre sí. Con una sola foto
     no hay miniaturas (.fv2-gal--una ya las oculta; :not() es una guarda
     extra para que esta regla nunca las vuelva a mostrar). */
  .fv2-gal:not(.fv2-gal--una) .section-product-info__thumbnail-container {
    position: absolute;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    z-index: 4;
  }
  .fv2-gal:not(.fv2-gal--una) .section-product-info__thumbnail-container::-webkit-scrollbar { display: none; }
  .fv2-gal .section-product-info__thumbnail {
    width: 40px; height: 40px; border-radius: 4px; flex: 0 0 40px;
  }
}

/* ============================================================================
   ficha-v2.md §12 decisión 4 — flor "¡Oferta!" independiente de Elementor
   ============================================================================
   El distintivo lo pinta el propio shortcode (gallery-slider.php, compartido
   con la v1: `.section-product-info__oferta-label`), pero su ESTILO vivía
   solo en uploads/elementor/css/post-13736.css, una plantilla de Elementor
   ("Producto Individual") que ya no renderiza ninguna ficha. El dueño pidió
   conservar la flor tal cual se ve hoy (misma forma, giro y colores), así
   que se copian acá las mismas reglas (valores calcados de esa hoja, breakpoints
   767/768-1024/1025 INCLUIDOS tal cual, no los de nuestra rejilla) para que
   deje de depender de un archivo que Elementor puede borrar o regenerar sin
   avisar (gotcha 101). El tamaño final varía un poco respecto de hoy porque
   el marco pasó de 4:5 a 3:4 (decisiones 1 y 3): sigue siendo top-left,
   proporcional al ancho de la foto, mismo giro y colores. */
.fv2-gal .section-product-info__oferta-label {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FEF3E7; font-family: "Founders Grotesk Official", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  z-index: 1;
}
.fv2-gal .section-product-info__oferta-label::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url("https://floristeriahechizosdeamor.com/wp-content/uploads/2025/02/icono-oferta-flor-background.svg") no-repeat center center;
  background-size: contain;
  z-index: -1;
  animation: fv2OfertaRotar 24s linear infinite;
}
@keyframes fv2OfertaRotar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Móvil (calcado de post-13736.css @max-width:767px; "max-width:7" sin unidad
   del original es CSS inválido y el navegador lo ignora — así se ve hoy, y
   por eso acá no se declara ningún tope: sería un comportamiento distinto). */
@media (max-width: 767px) {
  .fv2-gal .section-product-info__oferta-label { top: .4rem; left: .4rem; width: 30%; height: 30%; font-size: 1.15rem; }
  .fv2-gal .section-product-info__oferta-label::before { background-size: 100% auto; }
  .fv2-gal .section-product-info__oferta-span { margin-top: 3px; }
}
/* Tablet (calcado de post-13736.css @768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .fv2-gal .section-product-info__oferta-label { top: .4rem; left: .4rem; width: 28%; max-width: 6.4rem; height: 28%; max-height: 6.4rem; font-size: 1.15rem; }
  .fv2-gal .section-product-info__oferta-label::before { background-size: 100% auto; }
  .fv2-gal .section-product-info__oferta-span { margin-top: 4px; }
}
/* Escritorio (calcado de post-13736.css @min-width:1025px) */
@media (min-width: 1025px) {
  .fv2-gal .section-product-info__oferta-label { width: 7.6rem; height: 7.6rem; font-size: 1.25rem; }
  .fv2-gal .section-product-info__oferta-label::before { background-size: 7rem auto; }
  .fv2-gal .section-product-info__oferta-span { margin-top: 4px; }
}

/* ---------- Columna de compra ---------- */
.fv2-buy {
  /* el sticky vive al final del archivo, junto con el de la galería */
  display: flex; flex-direction: column; gap: 18px;
  font-family: var(--f-texto);
  color: var(--f-tinta);
}

.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. */

/* ---------- Ajustes del 2026-09-18 ---------- */
/* 1. Aire bajo el header. Las migas pasaron a la columna de compra, así que la foto quedaba
      pegada al header (0 px medidos). El padding va en la rejilla y las migas pierden el
      suyo de arriba para que su texto arranque a la altura de la foto. */
.fv2 { padding-top: 32px; }
.hda-sp .fv2-crumb { padding: 0 0 6px; }
@media (max-width: 1023.98px) { .fv2 { padding-top: 16px; } }
/* ficha-v2.md §12 decisión 1: bajo 768px la galería vuelve a ir pegada al
   header (0px), a propósito — es la MISMA regla de arriba, no una excepción:
   tiene que venir DESPUÉS en el archivo para ganarle en la cascada (misma
   especificidad, y `max-width:767.98px` no le gana a `max-width:1023.98px`
   por sí solo). El aire bajo el header en móvil lo sigue dando el `gap` del
   grid entre la foto y la columna de compra. */
@media (max-width: 767.98px) { .fv2 { padding-top: 0; } }

/* 2. Galería fija. La columna de compra mide el doble que la foto (1.361 px contra 680):
      al bajar, la foto se iba y quedaba un hueco a la izquierda. Queda sticky la que sea
      más corta de las dos. El header es fixed, se esconde al bajar (.is-hidden) y vuelve
      al subir: el `top` sigue ese estado, con la misma duración que su transform, para
      que la foto no quede tapada. --fv2-header-h lo mide ficha-v2.js (150 px si no hay JS). */
@media (min-width: 1024px) {
  .fv2 .fv2-gal,
  .fv2 .fv2-buy {
    position: sticky;
    top: calc(var(--fv2-header-h, 150px) + 24px);
    transition: top .3s ease;
  }
  body:has(.hda-header.is-hidden) .fv2 .fv2-gal,
  body:has(.hda-header.is-hidden) .fv2 .fv2-buy { top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fv2 .fv2-gal, .fv2 .fv2-buy { transition: none; }
}

/* 3. La fila de entrega es un enlace a WhatsApp. Astra pinta a:hover con su color de
      enlace y subraya: se neutraliza con (0,2,1). */
.fv2 a.fv2-entrega,
.fv2 a.fv2-entrega:hover,
.fv2 a.fv2-entrega:focus { text-decoration: none; color: inherit; }
.fv2 a.fv2-entrega { transition: border-color .15s ease; }
.fv2 a.fv2-entrega .fv2-round { transition: background-color .15s ease, color .15s ease; }
.fv2 a.fv2-entrega:hover,
.fv2 a.fv2-entrega:focus-visible { border-color: var(--f-brand); }
.fv2 a.fv2-entrega:hover .fv2-round,
.fv2 a.fv2-entrega:focus-visible .fv2-round { background: var(--f-brand); color: #fff; }
.fv2 a.fv2-entrega:focus:not(:focus-visible) { outline: 0; }

/* ---------- Ajustes del 2026-09-18, segunda tanda ---------- */
/* 4. Sangrado completo de verdad. `.fv2-banner { margin: 0 0 56px }` y el margin de
      `.fv2-marquee` son atajos que venían DESPUÉS de `.fv2-bleed` y le pisaban el
      margin-left: el bloque arrancaba en el borde del contenido y se desbordaba 100vw
      hacia la derecha (medido: x=366, ancho 1852 en una ventana de 1852), con el texto
      corrido. Con (0,2,0) el sangrado gana y el margin de abajo de cada bloque se conserva. */
.fv2-bloques .fv2-bleed { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; }

/* 5. Lupa de detalle (reemplaza al overlay de "ampliar"). */
.fv2-lupa {
  position: absolute; top: 0; left: 0; z-index: 6;
  width: 184px; height: 184px;
  pointer-events: none;
  will-change: transform;
}
.fv2-lupa__vidrio {
  width: 100%; height: 100%; border-radius: 50%;
  background-color: var(--f-panel); background-repeat: no-repeat;
  /* aro blanco fino + filete oscuro + sombra: se lee sobre fotos claras y oscuras */
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 18px 44px -14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .1);
  opacity: 0; transform: scale(.86);
  transition: opacity .14s ease-out, transform .16s ease-out;
}
.fv2-gal.is-lupa .fv2-lupa__vidrio { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .fv2-lupa__vidrio { transition: opacity .14s ease-out; transform: none; } }
@media (max-width: 1023.98px) { .fv2-lupa { width: 150px; height: 150px; } }
/* con ratón, el cursor sobra: el centro de la lente ES el punto que se mira */
@media (hover: hover) and (pointer: fine) {
  .fv2-gal--lupa .section-product-info__img-product img { cursor: none; }
}
/* con la lupa fijada por un toque, el arrastre sobre la foto es de la lente */
.fv2-gal.is-lupa-tactil .section-product-info__img-product { touch-action: none; }

/* ============================================================================
   ficha-v2.md §12 decisión 5 — botón de lupa (reemplaza al texto de ayuda)
   ============================================================================
   El texto "Toca / Pasa el cursor para ver el detalle" (heredado de la v1)
   ya no se imprime en la v2 (ver single-product-hda-v2.php): en su lugar,
   un botón redondo blanco de 44px con un ícono de lupa, arriba a la derecha,
   a 20px de los bordes de la FOTO.

   Corrección (defecto visto en la captura de memoria-1440.png, verificado en
   staging): el botón vivía en `.hda-sp__gallery` (a nivel de la galería
   entera) bajo el supuesto de que el borde derecho de la galería coincide
   con el de la foto en fila. Medido: NO coincide — en escritorio
   `.hda-sp__gallery` mide ~30px más que la foto (padding heredado de
   post-13736.css sobre `.section-product-info__custom-gallery-slider`, ya
   documentado como ajeno al tema en el bloque de la flor "¡Oferta!" más
   arriba), así que un botón a 20px del borde de la galería quedaba ~10px
   FUERA de la foto (gotcha ya anotado en ficha-v2.js §4a-bis, comentario del
   corrector 2026-09-26: "764 vs 734"). Ahora el `<button>` es hijo directo de
   `.section-product-info__slider-container` (movido ahí en gallery-slider.php,
   solo para v2) — el "visor" que recorta al tamaño real de la foto y NO se
   traslada al cambiar de imagen (eso lo hace `.slider-wrapper`, un nivel más
   adentro) — con `position:relative` agregado arriba en este archivo. Así el
   `top`/`right` de 20px quedan relativos a la foto de verdad, en fila
   (miniaturas a la izquierda) y en columna (tablet/móvil/sin galería), sin
   depender de cuánto padding ajeno tenga la fila. */
.fv2-lupa-btn {
  position: absolute; top: 20px; right: 20px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--f-tinta);
  border: 0; padding: 0; margin: 0;
  font: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
  box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: opacity .15s ease;
}
/* gotcha 54: especificidad >= (0,2,0) para vencer el button:hover/focus beige de Astra */
.fv2-lupa-btn:hover, .fv2-lupa-btn:focus { background: #fff; text-shadow: none; }
.fv2-lupa-btn:focus:not(:focus-visible) { outline: none; }
/* Se aparta mientras la lupa ya está activa (mismo criterio que tenía el texto viejo). */
.fv2-gal.is-lupa .fv2-lupa-btn { opacity: 0; pointer-events: none; }