/* ====================================================================
   ZG: PRODUCTO — Página del Colgante Gaman.
   --------------------------------------------------------------------
   Se carga sólo en single-product cuando el slug del producto es
   `colgante-gaman` (lógica en gaman-core.php, sección 4.C).

   Estructura: 6 secciones — hero, compra, modelos, ritual, detalles,
   cierre. Todas con prefijo .zg-producto-* para no colisionar con el
   resto del sitio.

   Depende de las variables del plugin (zg-variables.css), cargadas
   antes.
   ==================================================================== */

/* Reset de la caja del bloque para que cada sección controle su padding */
.zg-producto-hero,
.zg-producto-compra,
.zg-producto-slider,
.zg-producto-situaciones,
.zg-producto-modelos,
.zg-producto-ritual,
.zg-producto-detalles,
.zg-producto-resenas,
.zg-producto-cierre {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--zg-fondo, #F7F7F4);
  color: var(--zg-texto, #1C1C1A);
  font-family: var(--zg-fuente-texto, 'Lexend', sans-serif);
  --pad-x: clamp(20px, 5vw, 80px);
}
.zg-producto-hero *,
.zg-producto-compra *,
.zg-producto-slider *,
.zg-producto-situaciones *,
.zg-producto-modelos *,
.zg-producto-ritual *,
.zg-producto-detalles *,
.zg-producto-resenas *,
.zg-producto-cierre *,
.zg-producto-hero *::before,
.zg-producto-compra *::before,
.zg-producto-slider *::before,
.zg-producto-situaciones *::before,
.zg-producto-modelos *::before,
.zg-producto-ritual *::before,
.zg-producto-detalles *::before,
.zg-producto-cierre *::before { box-sizing: border-box; }

/* ============================================================
   1. HERO
   ============================================================ */
.zg-producto-hero {
  overflow: hidden;
  padding: clamp(140px, 16vw, 200px) var(--pad-x) clamp(40px, 5vw, 72px);
  text-align: center;
}
.zg-producto-hero__grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px; opacity: 0.05; mix-blend-mode: multiply;
}
.zg-producto-hero__kanji {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: clamp(11rem, 24vw, 24rem);
  line-height: 0.92;
  color: rgba(28, 28, 26, 0.06);
  pointer-events: none; user-select: none; letter-spacing: -0.03em;
}
@supports (-webkit-text-stroke: 1px black) {
  .zg-producto-hero__kanji {
    -webkit-text-stroke: 1px var(--zg-texto, #1C1C1A);
    color: transparent; opacity: 0.1;
  }
}
.zg-producto-hero__petals {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  color: var(--zg-rosa-almendro, #E8D3CE); overflow: hidden;
}
.zg-producto-hero__petal { position: absolute; fill: currentColor; height: auto; }
.zg-producto-hero__petal--1 { top: 18%; left: 12%; width: 24px; opacity: 0.5; transform: rotate(-30deg); }
.zg-producto-hero__petal--2 { top: 32%; right: 14%; width: 22px; opacity: 0.45; transform: rotate(45deg); }
.zg-producto-hero__petal--3 { bottom: 18%; right: 22%; width: 20px; opacity: 0.5; transform: rotate(-50deg); }

.zg-producto-hero__inner {
  position: relative; z-index: 1;
  max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2vw, 24px);
}
.zg-producto-hero__kicker {
  margin: 0;
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-hero__rule {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 280px;
}
.zg-producto-hero__rule span:not([class]) {
  flex: 1 1 auto; height: 1px;
  background: var(--zg-oro-rosa, #B76E79); opacity: 0.45;
}
.zg-producto-hero__rule svg {
  width: 22px; height: 22px;
  color: var(--zg-oro-rosa, #B76E79); flex-shrink: 0;
}
.zg-producto-hero__title {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--zg-texto, #1C1C1A);
  max-width: 18ch;
}
.zg-producto-hero__title em {
  font-style: italic; color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-hero__lead {
  margin: 0; max-width: 50ch;
  font-size: clamp(1rem, 1rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ============================================================
   2. COMPRA — primera sección visible (hero eliminado).
      Padding-top generoso para clear del header overlay.
   ============================================================ */
.zg-producto-compra {
  padding: clamp(140px, 16vw, 200px) var(--pad-x) clamp(60px, 7vw, 100px);
}
/* En móvil el header es más bajo: reducimos el padding superior para
   que la imagen no quede tan separada del header. */
@media (max-width: 899px) {
  .zg-producto-compra {
    padding-top: clamp(84px, 20vw, 110px);
  }
}
.zg-producto-compra__inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .zg-producto-compra__inner { grid-template-columns: 1fr 1fr; }
}

/* --- Galería --- */
/* `min-width: 0` NO es cosmético: una celda de grid lleva `min-width:
   auto` y se niega a encogerse por debajo del ancho natural de su
   contenido. Con la tira de miniaturas dentro, esa columna se estiraba
   hasta sumar todas las fotos y sacaba la página entera de la pantalla,
   sin que el overflow-x del carrusel llegara a activarse nunca. */
.zg-producto-compra__gallery {
  position: relative;
  min-width: 0;
}
.zg-producto-compra__photo-main {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--zg-fondo-suave, #F2EFE6);
  border: 1.5px solid var(--zg-oro-rosa, #B76E79);
  padding: 14px;
  overflow: hidden;
}
.zg-producto-compra__photo-main::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid var(--zg-oro-rosa, #B76E79);
  opacity: 0.35; pointer-events: none; z-index: 1;
}
.zg-producto-compra__photo-main img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 0;
  transition: opacity 320ms ease;
}
.zg-producto-compra__corner {
  position: absolute; width: 12px; height: 12px;
  pointer-events: none; z-index: 2;
}
.zg-producto-compra__corner--tl { top: 12px; left: 12px;  border-top: 1.5px solid var(--zg-texto, #1C1C1A); border-left: 1.5px solid var(--zg-texto, #1C1C1A); }
.zg-producto-compra__corner--tr { top: 12px; right: 12px; border-top: 1.5px solid var(--zg-texto, #1C1C1A); border-right: 1.5px solid var(--zg-texto, #1C1C1A); }
.zg-producto-compra__corner--bl { bottom: 12px; left: 12px;  border-bottom: 1.5px solid var(--zg-texto, #1C1C1A); border-left: 1.5px solid var(--zg-texto, #1C1C1A); }
.zg-producto-compra__corner--br { bottom: 12px; right: 12px; border-bottom: 1.5px solid var(--zg-texto, #1C1C1A); border-right: 1.5px solid var(--zg-texto, #1C1C1A); }

/* Galería bajo la foto principal. REJILLA, no carrusel: con 3-4 fotos
   por variante no hay nada que desplazar, y una tira scrollable con dos
   elementos dejaba medio ancho vacío. La rejilla reparte el espacio y
   salta de línea sola si algún día hay más de cuatro. */
.zg-producto-compra__galeria {
  margin-top: 16px;
  min-width: 0;
}

.zg-producto-compra__thumbs {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* min-width: 0 en la celda: sin él, una celda de rejilla se niega a
   encoger por debajo del ancho natural de su contenido. */
.zg-producto-compra__thumbs > li { min-width: 0; }

.zg-producto-compra__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0; background: transparent;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  cursor: pointer; overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.zg-producto-compra__thumb:hover,
.zg-producto-compra__thumb:focus-visible {
  border-color: var(--zg-oro-rosa, #B76E79); outline: none;
}
.zg-producto-compra__thumb--active {
  border-color: var(--zg-oro-rosa, #B76E79); transform: scale(1.02);
}
.zg-producto-compra__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* --- Decisor --- */
.zg-producto-compra__decisor {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  min-width: 0;   /* misma razón que en __gallery */
}
.zg-producto-compra__title {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.18; letter-spacing: -0.01em;
}
.zg-producto-compra__modelo,
.zg-producto-compra__acabado {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.zg-producto-compra__modelo legend,
.zg-producto-compra__acabado legend,
.zg-producto-compra__dedicatoria > label > .zg-producto-compra__dedicatoria-label {
  padding: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ---- Cards de modelo ---- */
/* Los <fieldset> traen `min-width: min-content` de fábrica en todos los
   navegadores — una rareza histórica del elemento que ningún reset
   toca. Sin anularlo se niegan a encoger y desbordan la página en
   móvil, por mucho min-width: 0 que se ponga en sus padres. */
.zg-producto-page fieldset,
.zg-producto-compra__modelo,
.zg-producto-compra__acabado {
  min-width: 0;
}

.zg-producto-compra__modelo-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
/* Las dos tarjetas van SIEMPRE en una fila, también en móvil: el
   guardián se elige comparando, y comparar exige verlos juntos. Para
   que quepan en pantallas estrechas la tarjeta pasa de horizontal a
   vertical —kanji arriba, nombre debajo— en vez de apilarse una sobre
   otra o partir el nombre. */
@media (max-width: 479px) {
  .zg-producto-compra__modelo-card-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 12px 14px;
  }
  .zg-producto-compra__modelo-card-icon {
    font-size: 1.9rem;
  }
  .zg-producto-compra__modelo-card-name {
    font-size: 1.05rem;
  }
}
.zg-producto-compra__modelo-card {
  position: relative; cursor: pointer; display: block;
  min-width: 0;   /* que la tarjeta encoja en vez de desbordar la rejilla */
}
.zg-producto-compra__modelo-card input { position: absolute; opacity: 0; pointer-events: none; }
/* Card compacta y horizontal: kanji-icono a la izquierda + texto. */
.zg-producto-compra__modelo-card-inner {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  padding: 12px 14px;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.zg-producto-compra__modelo-card:hover .zg-producto-compra__modelo-card-inner {
  border-color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-compra__modelo-card input:checked + .zg-producto-compra__modelo-card-inner {
  border-color: var(--zg-oro-rosa, #B76E79);
  background: var(--zg-fondo-suave, #F2EFE6);
}
.zg-producto-compra__modelo-card input:focus-visible + .zg-producto-compra__modelo-card-inner {
  outline: 1px solid var(--zg-texto, #1C1C1A); outline-offset: 4px;
}

/* Kanji como icono — el "figura" del guardián, compacto. */
.zg-producto-compra__modelo-card-icon {
  flex: 0 0 auto;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1;
  color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-compra__modelo-card-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.zg-producto-compra__modelo-card-num {
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700; font-size: 0.78rem;
  color: var(--zg-oro-rosa, #B76E79); letter-spacing: 0.04em;
}
.zg-producto-compra__modelo-card-name {
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.1; letter-spacing: -0.005em;
}
.zg-producto-compra__modelo-card-tag {
  margin-top: 1px;
  font-size: 0.76rem; font-style: italic; line-height: 1.3;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ---- Swatches de acabado ---- */
/* Tres acabados, tres columnas, en cualquier ancho. Antes eran 2 en
   móvil y 4 a partir de 460px: con sólo tres opciones, ninguna de las
   dos cuadraba — una dejaba un huérfano abajo y la otra una celda
   vacía. */
.zg-producto-compra__acabado-swatches {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
@media (max-width: 379px) {
  /* Márgenes justos: se recorta el aire lateral antes que el icono. */
  .zg-producto-compra__acabado-swatch { padding: 12px 4px; }
}
.zg-producto-compra__acabado-swatch {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 8px;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.zg-producto-compra__acabado-swatch:hover { border-color: var(--zg-oro-rosa, #B76E79); }
.zg-producto-compra__acabado-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.zg-producto-compra__acabado-swatch:has(input:checked) {
  border-color: var(--zg-oro-rosa, #B76E79);
  background: var(--zg-fondo-suave, #F2EFE6);
}
.zg-producto-compra__acabado-swatch:has(input:focus-visible) {
  outline: 1px solid var(--zg-texto, #1C1C1A); outline-offset: 4px;
}
.zg-producto-compra__acabado-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(28, 28, 26, 0.12);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.08);
}

/* Icono del acabado: la pieza real en ese metal, con la silueta del
   guardián seleccionado. `contain` y no `cover` — recortar un colgante
   sería justo lo contrario de lo que se busca aquí. */
.zg-producto-compra__acabado-icono {
  /* 56 y no 48: el trazo de los iconos es muy fino y el plateado se
     desdibuja sobre fondo claro por debajo de este tamaño. Comprobado
     en navegador con las seis imágenes reales. */
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  /* Suaviza el relevo al cambiar de guardián: sin esto el icono salta
     de golpe y parece un fallo de carga. */
  transition: opacity 200ms ease;
}
.zg-producto-compra__acabado-swatch:hover .zg-producto-compra__acabado-icono {
  opacity: 0.85;
}
/* Gradientes de los swatches. Aceptamos varios slugs alternativos
   según cómo el cliente nombre los acabados en el admin de WC. */
.zg-producto-compra__acabado-swatch--dorado .zg-producto-compra__acabado-dot,
.zg-producto-compra__acabado-swatch--oro    .zg-producto-compra__acabado-dot { background: linear-gradient(135deg, #E5C26C 0%, #C9A24A 100%); }

.zg-producto-compra__acabado-swatch--oro-rosa .zg-producto-compra__acabado-dot,
.zg-producto-compra__acabado-swatch--rosa     .zg-producto-compra__acabado-dot { background: linear-gradient(135deg, #D8A595 0%, #B76E79 100%); }

.zg-producto-compra__acabado-swatch--plateado .zg-producto-compra__acabado-dot,
.zg-producto-compra__acabado-swatch--plata    .zg-producto-compra__acabado-dot,
.zg-producto-compra__acabado-swatch--acero    .zg-producto-compra__acabado-dot { background: linear-gradient(135deg, #D8D8D8 0%, #A8A8A8 100%); }
.zg-producto-compra__acabado-name {
  font-size: 0.78rem; letter-spacing: 0.08em; text-align: center;
  color: var(--zg-texto, #1C1C1A);
}

/* ---- Dedicatoria ---- */
.zg-producto-compra__dedicatoria { display: flex; flex-direction: column; gap: 8px; position: relative; }
.zg-producto-compra__dedicatoria > label { display: flex; flex-direction: column; gap: 4px; }
.zg-producto-compra__dedicatoria-hint {
  font-size: 0.78rem; color: var(--zg-texto-suave, #5F5F5A);
  line-height: 1.45; letter-spacing: 0; text-transform: none;
}
.zg-producto-compra__dedicatoria textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  background: var(--zg-fondo, #F7F7F4);
  font-family: var(--zg-fuente-texto, 'Lexend', sans-serif);
  font-size: 0.95rem; line-height: 1.55;
  color: var(--zg-texto, #1C1C1A);
  resize: vertical; min-height: 88px;
  transition: border-color 200ms ease;
}
.zg-producto-compra__dedicatoria textarea:focus {
  outline: none; border-color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-compra__dedicatoria-count {
  align-self: flex-end;
  font-size: 0.72rem; color: var(--zg-texto-tenue, #9A9A94);
  font-variant-numeric: tabular-nums;
}

/* ---- Precio (rendered por nuestro JS dentro de .single_variation) ----
   WC mete `display: none` a .woocommerce-variation por defecto y luego
   lo anima con slideDown. Como nosotros pintamos el precio manualmente,
   forzamos display block para que siempre se vea cuando hay variación
   seleccionada. */
.zg-producto-compra__precio {
  margin-top: 4px;
  min-height: clamp(2.4rem, 4vw, 3rem);
  /* En fila para que la etiqueta de oferta acompañe al precio.
     `baseline` la apoya sobre la línea de las cifras; con `center`
     flotaría a media altura del número grande. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 6px;
}

/* Etiqueta de oferta. Esquinas rectas, a juego con la geometría del
   resto de la ficha: los marcos de las fotos, las tarjetas de modelo y
   el contenedor de confianza son todos rectos. */
.zg-producto-compra__oferta {
  display: inline-block;
  padding: 5px 12px;
  background: var(--zg-oro-rosa, #B76E79);
  color: var(--zg-fondo, #F7F7F4);
  font-family: var(--zg-fuente-texto, 'Lexend', sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.zg-producto-compra__oferta[hidden] { display: none; }
/* En móvil ocupa la fila entera, debajo del precio. Al lado de las
   cifras se queda estrecha y descolgada; a todo el ancho es una banda
   que se lee de un vistazo. El contenedor es flex con wrap, así que
   width:100% basta para empujarla a su propia línea. */
@media (max-width: 599px) {
  .zg-producto-page .zg-producto-compra__oferta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 12px;
  }
}
.zg-producto-page .single_variation,
.zg-producto-page .woocommerce-variation {
  display: block !important;
}
/* Dentro de la caja de precio, TODO en una sola fila: precio tachado,
   precio de oferta y disponibilidad. `baseline` es lo que alinea las
   cifras por su base aunque tengan tamaños distintos — con `center`
   el precio pequeño flotaría descolgado. */
.zg-producto-page .zg-producto-compra__precio .single_variation,
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
}
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation-price,
.zg-producto-page .zg-producto-compra__precio .price,
.zg-producto-page .zg-producto-compra__precio bdi,
.zg-producto-page .zg-producto-compra__precio-amount {
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.5vw, 2.6rem) !important;
  line-height: 1.1 !important;
  color: var(--zg-texto, #1C1C1A) !important;
  letter-spacing: -0.01em;
  display: block;
}

/* El contenedor del precio también en fila, para que el tachado y la
   oferta queden juntos y no uno debajo del otro. */
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation-price,
.zg-producto-page .zg-producto-compra__precio .price {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
}

/* --- Precio antiguo: pequeño y apagado ---------------------------
   El tamaño se fija UNA SOLA VEZ, en <del>. El marcado de WooCommerce
   anida <del><span class="amount"><bdi>…</bdi></span></del>, y `em` es
   relativo al padre: repetir 0.46em en cada nivel lo multiplicaba
   (0.46³ ≈ 10% del tamaño) y el precio quedaba ilegible.
   Los hijos heredan, con !important para ganar a la regla de arriba
   que fija el clamp sobre bdi. */
.zg-producto-page .zg-producto-compra__precio del {
  font-size: 0.46em !important;
  font-weight: 400 !important;
  color: var(--zg-texto-suave, #5F5F5A) !important;
  opacity: 0.75;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}
.zg-producto-page .zg-producto-compra__precio del .amount,
.zg-producto-page .zg-producto-compra__precio del bdi,
.zg-producto-page .zg-producto-compra__precio del .woocommerce-Price-amount,
.zg-producto-page .zg-producto-compra__precio del .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
/* WooCommerce mete «El precio original era: 34,90 €» en un
   screen-reader-text dentro del precio rebajado. Lo ocultamos a la
   vista sin sacarlo del árbol de accesibilidad: es la única forma que
   tiene un lector de pantalla de saber cuál de los dos números manda,
   porque el tachado es puramente visual. Nada de display:none. */
.zg-producto-page .zg-producto-compra__precio .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Los navegadores subrayan <ins> por defecto: aquí sobra, el contraste
   de tamaño ya distingue el precio vigente. */
.zg-producto-page .zg-producto-compra__precio ins {
  text-decoration: none;
  background: transparent;
}

/* --- Disponibilidad: en la misma fila ----------------------------- */
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation-availability,
.zg-producto-page .zg-producto-compra__precio .stock {
  margin: 0;
  font-size: 0.85rem;
  font-family: var(--zg-fuente-texto, 'Lexend', sans-serif);
  font-weight: 400;
  color: var(--zg-oro-rosa, #B76E79);
  letter-spacing: 0.02em;
}
/* En pantallas estrechas la disponibilidad salta de línea sola gracias
   al flex-wrap, en vez de comprimir el precio. */
@media (max-width: 480px) {
  .zg-producto-page .zg-producto-compra__precio .woocommerce-variation-availability {
    flex-basis: 100%;
  }
}
/* La descripción de la variación, si la hay, siempre a línea completa. */
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation-description {
  flex-basis: 100%;
}
.zg-producto-page .zg-producto-compra__precio .woocommerce-variation-description {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ---- Qué incluye ----
   Entre el precio y el CTA. Discreto en tamaño pero con la barra en oro
   rosa a la izquierda, para que se lea como una nota de valor y no como
   letra pequeña legal. */
.zg-producto-compra__incluye {
  margin: 14px 0 20px;
  padding-left: 14px;
  border-left: 2px solid var(--zg-oro-rosa, #B76E79);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ---- CTA (ema-sakura) ----
   El botón lleva también .single_add_to_cart_button.button.alt para
   que el JS de WC lo enganche. Esas clases vienen con estilos del
   tema (Twenty Twenty-Five mete background y color propios) y de WC,
   así que forzamos los nuestros con selector específico + !important
   sólo donde es indispensable. */
.zg-producto-page .zg-producto-compra__cta-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.zg-producto-page .zg-producto-compra__cta,
.zg-producto-page button.zg-producto-compra__cta,
.zg-producto-page .zg-producto-compra__cta.single_add_to_cart_button,
.zg-producto-page .zg-producto-compra__cta.button.alt {
  position: relative;
  display: inline-flex !important;
  align-items: stretch;
  text-decoration: none;
  border: 2px solid var(--zg-oro-rosa, #B76E79) !important;
  background: var(--zg-fondo-suave, #F2EFE6) !important;
  background-color: var(--zg-fondo-suave, #F2EFE6) !important;
  background-image: none !important;
  color: var(--zg-texto, #1C1C1A) !important;
  isolation: isolate;
  padding: 0 !important;
  cursor: pointer;
  width: 100%;
  min-height: auto;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.zg-producto-page .zg-producto-compra__cta-seal {
  display: flex; align-items: center; justify-content: center;
  width: 64px; flex-shrink: 0;
  background: var(--zg-oro-rosa, #B76E79);
  transition: background-color 160ms ease;
}
.zg-producto-page .zg-producto-compra__cta-flower {
  width: 34px; height: 34px;
  color: var(--zg-fondo, #F7F7F4);
  animation: zg-producto-cta-spin 5s linear infinite;
}
@keyframes zg-producto-cta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .zg-producto-page .zg-producto-compra__cta-flower { animation: none; }
}
.zg-producto-page .zg-producto-compra__cta-body {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 18px 26px;
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--zg-texto, #1C1C1A);
}
.zg-producto-page .zg-producto-compra__cta-text {
  color: var(--zg-texto, #1C1C1A);
}
.zg-producto-page .zg-producto-compra__cta-arrow {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-page .zg-producto-compra__cta:hover,
.zg-producto-page .zg-producto-compra__cta:focus-visible {
  border-color: var(--zg-oro-rosa-osc, #8E4F58) !important;
  background: var(--zg-fondo-suave, #F2EFE6) !important;
  color: var(--zg-texto, #1C1C1A) !important;
}
.zg-producto-page .zg-producto-compra__cta:hover .zg-producto-compra__cta-seal,
.zg-producto-page .zg-producto-compra__cta:focus-visible .zg-producto-compra__cta-seal {
  background: var(--zg-oro-rosa-osc, #8E4F58);
}
.zg-producto-page .zg-producto-compra__cta:hover .zg-producto-compra__cta-arrow,
.zg-producto-page .zg-producto-compra__cta:focus-visible .zg-producto-compra__cta-arrow {
  transform: translateX(6px);
}
.zg-producto-page .zg-producto-compra__cta:active { transform: translateY(1px); }
.zg-producto-page .zg-producto-compra__cta:focus { outline: none; }
.zg-producto-page .zg-producto-compra__cta:focus-visible {
  outline: 1px solid var(--zg-texto, #1C1C1A);
  outline-offset: 4px;
}
.zg-producto-page .zg-producto-compra__cta:disabled,
.zg-producto-page .zg-producto-compra__cta.disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ---- Trust ---- */
/* ---- Contenedor de confianza (bajo el CTA) ----
   Rejilla que se adapta sola: dos columnas cuando cabe, una cuando no.
   `auto-fit` con `minmax` evita tener que fijar breakpoints — la
   columna del decisor cambia de ancho según el viewport. */
.zg-producto-compra__confianza {
  list-style: none;
  margin: 0 0 18px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
  border: 1.5px solid rgba(183, 110, 121, 0.25);
  background: rgba(255, 255, 255, 0.45);
}
.zg-producto-compra__confianza li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.zg-producto-compra__confianza svg {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 1px;
  fill: none;
  stroke: var(--zg-oro-rosa, #B76E79);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zg-producto-compra__confianza span {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--zg-texto-suave, #5F5F5A);
  min-width: 0;
}
.zg-producto-compra__confianza strong {
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--zg-texto, #1C1C1A);
}

.zg-producto-compra__trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.82rem; line-height: 1.5;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-compra__trust li::before {
  content: "✿"; margin-right: 10px;
  color: var(--zg-oro-rosa, #B76E79); font-size: 0.7rem;
}

/* ============================================================
   1b. SLIDER — ticker continuo de imágenes 3:4. Pausa en hover/focus.
   ============================================================ */
.zg-producto-slider {
  padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
  background: var(--zg-fondo, #F7F7F4);
}
.zg-producto-slider__viewport {
  /* Máscara de desvanecido en los bordes para que las imágenes no se
     corten en seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.zg-producto-slider__track {
  display: flex;
  width: max-content;
  margin: 0; padding: 0;
  list-style: none;
  gap: clamp(12px, 2vw, 20px);
  /* Sin animación CSS: lo mueve zg-carousel.js empujando el scroll. */
}
.zg-producto-slider__item {
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 280px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1.5px solid rgba(183, 110, 121, 0.25);
}
.zg-producto-slider__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* El caso de motion reducido lo cubre zg-carousel.css: el scroll manual
   con snap es el comportamiento base y el JS no arranca el automático. */
@media (max-width: 699px) {
  .zg-producto-slider__item { width: clamp(160px, 56vw, 230px); }
}

/* ============================================================
   1c. SITUACIONES — ticker de casos de uso emocionales.
       Marquee lento (se lee) que pausa al pasar el cursor.
   ============================================================ */
.zg-producto-situaciones {
  padding: clamp(32px, 4.5vw, 56px) 0;
  overflow: hidden;
  background: var(--zg-oro-rosa, #B76E79);
}
/* Las flechas del carrusel son lo único que queda sobre el rosa: su
   borde de serie es rosa translúcido y aquí se volvería invisible. En
   off-white dan 3.54:1, por encima del 3.0 que piden los elementos de
   interfaz. */
.zg-producto-situaciones .zg-car__arrow {
  border-color: rgba(247, 247, 244, 0.55);
  color: var(--zg-fondo, #F7F7F4);
}
.zg-producto-situaciones .zg-car__arrow:hover:not(:disabled) {
  background: rgba(247, 247, 244, 0.16);
  border-color: var(--zg-fondo, #F7F7F4);
  color: var(--zg-fondo, #F7F7F4);
}
.zg-producto-situaciones .zg-car__arrow:focus-visible {
  outline-color: var(--zg-fondo, #F7F7F4);
}

/* Pista del marquee. El padding vertical es funcional: un mask recorta a
   la caja del elemento, así que sin holgura la tarjeta se corta al
   elevarse en hover. El degradado es horizontal y no se ve afectado. */
.zg-producto-situaciones__viewport {
  padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.zg-producto-situaciones__track {
  display: flex;
  width: max-content;
  margin: 0; padding: 0;
  list-style: none;
  gap: clamp(14px, 2vw, 22px);
  /* Sin animación CSS: lo mueve zg-carousel.js empujando el scroll.
     Lento a propósito, porque son textos que hay que poder leer. */
}

/* Tarjeta de situación */
.zg-producto-situaciones__card {
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 320px);
  display: flex; flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--zg-fondo, #F7F7F4);
  border: 1.5px solid rgba(183, 110, 121, 0.25);
  transition: border-color 220ms ease, transform 220ms ease,
              box-shadow 220ms ease;
}
.zg-producto-situaciones__card:hover {
  border-color: var(--zg-oro-rosa, #B76E79);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(28, 28, 26, 0.32);
}
/* Va dentro de la tarjeta, que es clara — no sobre el fondo de la
   sección. Por eso conserva el oro rosa de marca. */
.zg-producto-situaciones__mark {
  color: var(--zg-oro-rosa, #B76E79);
  font-size: 0.8rem;
  line-height: 1;
}
.zg-producto-situaciones__card-title {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.3;
  color: var(--zg-texto, #1C1C1A);
}
.zg-producto-situaciones__card-text {
  margin: 0;
  font-size: 0.88rem; line-height: 1.55;
  font-style: italic;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* El caso de motion reducido lo cubre zg-carousel.css. */
@media (max-width: 699px) {
  .zg-producto-situaciones__card { width: clamp(220px, 74vw, 280px); }
  .zg-producto-situaciones__track { animation-duration: 70s; }
}

/* ============================================================
   3. MODELOS
   ============================================================ */
.zg-producto-modelos { padding: clamp(80px, 10vw, 140px) var(--pad-x); overflow: hidden; }
.zg-producto-modelos__inner {
  max-width: 1200px; margin-inline: auto;
  display: flex; flex-direction: column;
  gap: clamp(60px, 8vw, 100px);
}
.zg-producto-modelos__kicker {
  margin: 0; text-align: center;
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-modelos__title {
  margin: 0; text-align: center;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  line-height: 1.18;
}
.zg-producto-modelos__title em { font-style: italic; color: var(--zg-oro-rosa, #B76E79); }

.zg-producto-modelo {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (min-width: 800px) {
  .zg-producto-modelo { grid-template-columns: 1fr 1fr; }
  /* Alternancia por POSICIÓN, no por modelo: el par lleva la foto a la
     derecha. Así el ritmo visual se mantiene aunque se reordenen los
     guardianes en WooCommerce. */
  .zg-producto-modelo:nth-of-type(even) { direction: rtl; }
  .zg-producto-modelo:nth-of-type(even) > * { direction: ltr; }
}
.zg-producto-modelo__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
}
.zg-producto-modelo__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 1;
}
.zg-producto-modelo__kanji-bg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: clamp(10rem, 22vw, 22rem);
  color: rgba(28, 28, 26, 0.06);
  pointer-events: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .zg-producto-modelo__kanji-bg {
    -webkit-text-stroke: 1px var(--zg-texto, #1C1C1A);
    color: transparent; opacity: 0.1;
  }
}
.zg-producto-modelo__copy { display: flex; flex-direction: column; gap: 14px; }
.zg-producto-modelo__meta {
  margin: 0;
  font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--zg-oro-rosa, #B76E79);
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700;
}
.zg-producto-modelo__meta span {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400; font-size: 0.95rem; letter-spacing: 0;
  color: var(--zg-texto, #1C1C1A); margin-left: 4px;
}
.zg-producto-modelo__heading {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2; letter-spacing: -0.01em;
}
.zg-producto-modelo__subhead {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-modelo__subhead em { font-style: italic; color: var(--zg-oro-rosa, #B76E79); }
.zg-producto-modelo__body {
  margin: 0;
  font-size: clamp(0.95rem, 1vw, 1rem);
  line-height: 1.7;
}
.zg-producto-modelo__micro {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--zg-oro-rosa, #B76E79);
  font-style: italic;
  color: var(--zg-texto-suave, #5F5F5A);
  font-size: 0.95rem;
}
.zg-producto-modelo__tags {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Esquinas vivas, como el resto de la ficha: los marcos de las fotos,
   las tarjetas de modelo, la etiqueta de oferta y el contenedor de
   confianza son todos rectos. --zg-radio vale 0 por token de marca. */
.zg-producto-modelo__tags li {
  padding: 4px 12px;
  border: 1px solid rgba(183, 110, 121, 0.4);
  border-radius: var(--zg-radio, 0);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zg-oro-rosa-osc, #8E4F58);
}

/* ============================================================
   4. EL RITUAL — scrollytelling de la apertura de la caja (sin templo).
      La SECCIÓN mide 200vh (pista). El __inner se fija (sticky 100vh)
      con texto + animación; las 5 imágenes se cruzan por scroll.
   ============================================================ */
.zg-producto-unbox {
  position: relative;
  box-sizing: border-box;
  min-height: 200vh;
  background: var(--zg-fondo, #F7F7F4);   /* mismo fondo que el resto */
  color: var(--zg-texto, #1C1C1A);
  font-family: var(--zg-fuente-texto, 'Lexend', sans-serif);
}
.zg-producto-unbox *,
.zg-producto-unbox *::before { box-sizing: border-box; }

.zg-producto-unbox__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;   /* móvil: texto arriba, animación abajo */
}

/* --- Texto --- */
.zg-producto-unbox__text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(70px, 11vh, 110px) var(--pad-x) clamp(6px, 1.5vh, 14px);
}
.zg-producto-unbox__kicker {
  margin: 0;
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-unbox__title {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.16; letter-spacing: -0.01em;
  max-width: 18ch;
}
.zg-producto-unbox__title em { font-style: italic; color: var(--zg-oro-rosa, #B76E79); }
.zg-producto-unbox__body {
  margin: 0; max-width: 46ch;
  font-size: 1rem; line-height: 1.6;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-unbox__hint {
  margin: clamp(2px, 1vh, 8px) 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-unbox__hint-arrow {
  color: var(--zg-oro-rosa, #B76E79);
  font-size: 0.95rem; line-height: 1;
  animation: zg-unbox-bounce 1.6s ease-in-out infinite;
}
@keyframes zg-unbox-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.zg-producto-unbox.is-scrolled .zg-producto-unbox__hint {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* --- Escenario (animación) --- */
.zg-producto-unbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.zg-producto-unbox__sequence {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Imágenes acotadas y centradas — NO llenan toda la celda (se veían
   gigantes). max-width/max-height con auto = tamaño natural contenido. */
.zg-producto-unbox__step {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: min(78%, 400px);
  max-height: 70%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.04);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none; user-select: none;
}
.zg-producto-unbox__step.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Indicador de progreso — 5 puntos verticales a la derecha. */
.zg-producto-unbox__progress {
  position: absolute;
  z-index: 2;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.zg-producto-unbox__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(28, 28, 26, 0.18);
  transition: background-color 420ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 420ms ease;
}
.zg-producto-unbox__dot.is-active {
  background: var(--zg-oro-rosa, #B76E79);
  transform: scale(1.5);
  box-shadow: 0 0 0 5px rgba(183, 110, 121, 0.12);
}
.zg-producto-unbox__dot.is-passed {
  background: rgba(183, 110, 121, 0.55);
}

/* Desktop: texto y animación lado a lado, contenido al mismo ancho
   que el resto de secciones (max-width 1200px centrado). El fondo de
   la sección sigue a sangre completa; solo el contenido se constriñe. */
@media (min-width: 900px) {
  .zg-producto-unbox__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    column-gap: clamp(32px, 4vw, 64px);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }
  .zg-producto-unbox__text {
    justify-content: center;
    text-align: left;
    align-items: flex-start;
    padding-block: clamp(60px, 10vh, 120px);
    padding-inline: 0;
  }
  .zg-producto-unbox__title { max-width: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .zg-producto-unbox__hint-arrow { animation: none; }
  .zg-producto-unbox__step { transition: opacity 280ms ease, transform 280ms ease; }
}

/* ============================================================
   5. DETALLES
   ============================================================ */
.zg-producto-detalles { padding: clamp(60px, 8vw, 100px) var(--pad-x); }
.zg-producto-detalles__inner { max-width: 760px; margin-inline: auto; }
.zg-producto-detalles__kicker {
  margin: 0; text-align: center;
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-detalles__title {
  margin: 8px 0 clamp(32px, 4vw, 48px); text-align: center;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.zg-producto-detalles__list { margin: 0; padding: 0; display: flex; flex-direction: column; }
.zg-producto-detalles__row {
  display: grid; grid-template-columns: 1fr;
  padding-block: 18px;
  border-top: 1px solid rgba(28, 28, 26, 0.08);
  gap: 4px;
}
.zg-producto-detalles__row:last-child { border-bottom: 1px solid rgba(28, 28, 26, 0.08); }
@media (min-width: 600px) {
  .zg-producto-detalles__row { grid-template-columns: 200px 1fr; gap: 24px; }
}
.zg-producto-detalles__row dt {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--zg-oro-rosa, #B76E79); font-weight: 500;
}
.zg-producto-detalles__row dd {
  margin: 0;
  font-size: 0.95rem; line-height: 1.6;
}
.zg-producto-detalles__row dd a {
  color: var(--zg-oro-rosa, #B76E79);
  text-decoration: underline;
  text-decoration-color: rgba(183, 110, 121, 0.4);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.zg-producto-detalles__row dd a:hover,
.zg-producto-detalles__row dd a:focus-visible {
  color: var(--zg-oro-rosa-osc, #8E4F58);
  text-decoration-color: var(--zg-oro-rosa-osc, #8E4F58);
}

/* ---- Desplegables de material y cuidados (acordeón nativo) ---- */
.zg-producto-cuidados {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column;
  gap: 12px;
}
.zg-producto-cuidados__item {
  border: 1.5px solid rgba(183, 110, 121, 0.28);
  background: var(--zg-fondo, #F7F7F4);
}
.zg-producto-cuidados__summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px) clamp(20px, 3.2vw, 32px);
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--zg-texto, #1C1C1A);
  transition: color 160ms ease;
}
.zg-producto-cuidados__summary::-webkit-details-marker { display: none; }
.zg-producto-cuidados__summary:hover { color: var(--zg-oro-rosa, #B76E79); }
.zg-producto-cuidados__summary:focus-visible {
  outline: 1px solid var(--zg-texto, #1C1C1A); outline-offset: 3px;
}
/* Icono +/− */
.zg-producto-cuidados__icon {
  position: relative; flex-shrink: 0;
  width: 16px; height: 16px;
}
.zg-producto-cuidados__icon::before,
.zg-producto-cuidados__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--zg-oro-rosa, #B76E79);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
}
.zg-producto-cuidados__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.zg-producto-cuidados__icon::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.zg-producto-cuidados__item[open] .zg-producto-cuidados__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.zg-producto-cuidados__item[open] .zg-producto-cuidados__summary { color: var(--zg-oro-rosa, #B76E79); }

.zg-producto-cuidados__body {
  padding: clamp(6px, 1.2vw, 12px) clamp(20px, 3.2vw, 32px) clamp(22px, 3vw, 30px);
  font-size: 0.92rem; line-height: 1.65;
  color: var(--zg-texto, #1C1C1A);
}
.zg-producto-cuidados__body p { margin: 0 0 14px; }
.zg-producto-cuidados__body p:last-child { margin-bottom: 0; }
.zg-producto-cuidados__features {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.zg-producto-cuidados__features li {
  padding-left: 16px; position: relative;
}
.zg-producto-cuidados__features li::before {
  content: "✿"; position: absolute; left: 0; top: 0;
  color: var(--zg-oro-rosa, #B76E79); font-size: 0.62rem; line-height: 1.9;
}
.zg-producto-cuidados__features strong { color: var(--zg-texto, #1C1C1A); }

.zg-producto-cuidados__note {
  font-size: 0.85rem; font-style: italic;
  color: var(--zg-texto-suave, #5F5F5A);
  padding: 12px 14px;
  border-left: 2px solid var(--zg-oro-rosa, #B76E79);
  background: var(--zg-fondo-suave, #F2EFE6);
}

.zg-producto-cuidados__list-title {
  margin: 0 0 8px !important;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.zg-producto-cuidados__list-title--do   { color: var(--zg-salvia, #94A38C); }
.zg-producto-cuidados__list-title--dont { color: var(--zg-oro-rosa-osc, #8E4F58); }
.zg-producto-cuidados__do,
.zg-producto-cuidados__dont {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.zg-producto-cuidados__do li,
.zg-producto-cuidados__dont li {
  padding-left: 24px; position: relative;
}
.zg-producto-cuidados__do li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--zg-salvia, #94A38C); font-weight: 700;
}
.zg-producto-cuidados__dont li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--zg-oro-rosa-osc, #8E4F58); font-weight: 700;
}
.zg-producto-cuidados__closing {
  margin-top: 4px !important;
  font-style: italic;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* ============================================================
   6. CIERRE
   ============================================================ */
.zg-producto-cierre {
  padding: clamp(80px, 12vw, 160px) var(--pad-x);
  text-align: center;
  overflow: hidden;
}
.zg-producto-cierre__kanji {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -52%);
  z-index: 0;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: clamp(12rem, 26vw, 26rem);
  color: rgba(28, 28, 26, 0.06);
  pointer-events: none; user-select: none; letter-spacing: -0.03em;
}
@supports (-webkit-text-stroke: 1px black) {
  .zg-producto-cierre__kanji {
    -webkit-text-stroke: 1px var(--zg-texto, #1C1C1A);
    color: transparent; opacity: 0.1;
  }
}
.zg-producto-cierre__inner {
  position: relative; z-index: 1;
  max-width: 640px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 2.8vw, 32px);
}
.zg-producto-cierre__kicker {
  margin: 0;
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-cierre__title {
  margin: 0;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 5vw, 3.4rem);
  line-height: 1.18; letter-spacing: -0.01em;
  max-width: 22ch;
}
.zg-producto-cierre__title em {
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700;
  font-style: normal;
  font-size: 1.1em; letter-spacing: -0.02em;
  color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-cierre__link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--zg-oro-rosa, #B76E79);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 160ms ease, color 160ms ease;
}
.zg-producto-cierre__link:hover,
.zg-producto-cierre__link:focus-visible {
  color: var(--zg-oro-rosa-osc, #8E4F58);
  border-bottom-color: var(--zg-oro-rosa-osc, #8E4F58); outline: none;
}
.zg-producto-cierre__link span:last-child {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.zg-producto-cierre__link:hover span:last-child { transform: translateY(-4px); }

/* ============================================================
   6. RESEÑAS
   ------------------------------------------------------------
   El listado y el formulario los genera WooCommerce
   (single-product-reviews.php). No se rehace su marcado: se le
   da la tipografía, el color y el ritmo del sitio, igual que
   con el checkout y con la página de gracias.
   ============================================================ */
.zg-producto-resenas {
  padding: clamp(60px, 8vw, 100px) var(--pad-x, clamp(20px, 5vw, 80px));
  background: var(--zg-fondo, #F7F7F4);
  /* Cinturón: el marcado de WooCommerce puede traer tablas o imágenes
     anchas. Un desbordamiento horizontal aquí rompe el header overlay
     de TODA la página, no sólo esta sección. */
  overflow-x: hidden;
}
.zg-producto-resenas__wc img,
.zg-producto-resenas__wc table,
.zg-producto-resenas__wc input,
.zg-producto-resenas__wc textarea { max-width: 100%; }
.zg-producto-resenas__inner { max-width: 760px; margin-inline: auto; }

.zg-producto-resenas__kicker {
  margin: 0 0 12px;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--zg-oro-rosa-osc, #8E4F58);
}
.zg-producto-resenas__title {
  margin: 0 0 24px;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* --- Resumen de valoración --- */
.zg-producto-resenas__resumen {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.zg-producto-resenas__estrellas { display: inline-flex; gap: 3px; }
.zg-producto-resenas__estrella {
  width: 19px; height: 19px;
  fill: none;
  stroke: var(--zg-oro-rosa, #B76E79);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.zg-producto-resenas__estrella.is-llena {
  fill: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-resenas__cuenta {
  font-size: 0.86rem;
  color: var(--zg-texto-suave, #5F5F5A);
}

/* --- Marcado de WooCommerce --- */
.zg-producto-resenas__wc { font-size: 0.94rem; color: var(--zg-texto, #1C1C1A); }
.zg-producto-resenas__wc .commentlist {
  list-style: none; margin: 0 0 40px; padding: 0;
}
.zg-producto-resenas__wc .commentlist li { margin-bottom: 22px; }
.zg-producto-resenas__wc .comment_container {
  display: flex; gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(183, 110, 121, 0.22);
}
.zg-producto-resenas__wc .comment_container img.avatar {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
}
.zg-producto-resenas__wc .meta {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-resenas__wc .meta strong { color: var(--zg-texto, #1C1C1A); font-weight: 500; }
/* La etiqueta de compra verificada: es la señal de confianza que
   justifica todo el sistema, así que se destaca en vez de esconderla. */
.zg-producto-resenas__wc .woocommerce-review__verified {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(148, 163, 140, 0.18);
  color: #4E6047;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.04em;
}
.zg-producto-resenas__wc .description p { margin: 0 0 8px; line-height: 1.65; }

/* Estrellas de WooCommerce dentro de cada reseña. Usa su fuente de
   iconos; si no cargara, el texto alternativo sigue siendo legible. */
.zg-producto-resenas__wc .star-rating { color: var(--zg-oro-rosa, #B76E79); }

/* --- Formulario --- */
.zg-producto-resenas__wc #review_form_wrapper {
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(183, 110, 121, 0.22);
}
.zg-producto-resenas__wc .comment-reply-title {
  display: block;
  margin-bottom: 14px;
  font-family: var(--zg-fuente-titulo, 'Lexend', sans-serif);
  font-size: 1.1rem; font-weight: 700;
}
.zg-producto-resenas__wc .comment-form label {
  display: block; margin-bottom: 6px;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-resenas__wc .comment-form input[type="text"],
.zg-producto-resenas__wc .comment-form input[type="email"],
.zg-producto-resenas__wc .comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #FFF;
  border: 1.5px solid rgba(28, 28, 26, 0.15);
  color: var(--zg-texto, #1C1C1A);
  font-family: inherit;
  /* 16px mínimo: por debajo, Safari en iPhone hace zoom al enfocar. */
  font-size: 16px;
}
.zg-producto-resenas__wc .comment-form textarea { min-height: 130px; resize: vertical; }
.zg-producto-resenas__wc .comment-form input:focus,
.zg-producto-resenas__wc .comment-form textarea:focus {
  outline: none; border-color: var(--zg-oro-rosa, #B76E79);
}
.zg-producto-resenas__wc .comment-form-cookies-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.82rem; color: var(--zg-texto-suave, #5F5F5A);
}
.zg-producto-resenas__wc .comment-form-cookies-consent label {
  text-transform: none; letter-spacing: 0; font-size: 0.82rem;
}
.zg-producto-resenas__wc .comment-form-cookies-consent input { accent-color: var(--zg-oro-rosa, #B76E79); }

.zg-producto-resenas__wc .comment-form-rating .stars a { color: var(--zg-oro-rosa, #B76E79); }

.zg-producto-resenas__wc .form-submit input[type="submit"] {
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  background: var(--zg-oro-rosa, #B76E79);
  border: 1.5px solid var(--zg-oro-rosa, #B76E79);
  color: #FFF;
  font-family: inherit; font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.zg-producto-resenas__wc .form-submit input[type="submit"]:hover {
  background: var(--zg-oro-rosa-osc, #8E4F58);
}
.zg-producto-resenas__wc a:focus-visible,
.zg-producto-resenas__wc input:focus-visible,
.zg-producto-resenas__wc textarea:focus-visible {
  outline: 2px solid var(--zg-oro-rosa-osc, #8E4F58);
  outline-offset: 2px;
}

/* Aviso de "solo compradores verificados" u otros mensajes de WC. */
.zg-producto-resenas__wc .woocommerce-verification-required {
  margin: 0;
  padding: 16px 18px;
  background: rgba(183, 110, 121, 0.08);
  border-left: 3px solid var(--zg-oro-rosa, #B76E79);
  color: var(--zg-texto-suave, #5F5F5A);
}

/* --- Vídeo de la variante en la zona principal ---------------------- */
.zg-producto-compra__video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1C1C1A;
}
.zg-producto-compra__video[hidden] { display: none; }

/* IMPRESCINDIBLE. La regla .zg-producto-compra__photo-main img lleva
   `display: block`, y eso GANA al `display: none` que el navegador
   aplica al atributo [hidden] — que viene de la hoja de usuario-agente,
   la de menor prioridad. Sin esta línea, ocultar la foto no surte
   efecto y se queda superpuesta encima del vídeo. */
.zg-producto-compra__photo-main img[hidden] { display: none !important; }

/* Distintivo de reproducción sobre la miniatura del vídeo. Sin él, esa
   miniatura parecería una foto más y nadie la pulsaría. */
.zg-producto-compra__thumb--video { position: relative; }
.zg-producto-compra__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 28, 26, 0.28);
  pointer-events: none;
}
.zg-producto-compra__thumb-play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 3px;   /* compensa el peso visual del triángulo */
  border-left: 13px solid #FFF;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* ====================================================================
   Bloque «El proceso» — tres pasos numerados.
   Compartido por la ficha del colgante y las de los packs; por eso vive
   aquí y no en zg-packs.css, que sólo se carga en los packs.
   Marcado en includes/bloques/pasos.php
   ==================================================================== */

.zg-pasos {
  padding: clamp(56px, 8vw, 96px) var(--pad-x, 20px);
}

/* Dentro de la caja de compra no es una sección aparte: hereda el
   padding lateral del contenedor y se alinea al mismo ancho de 1200,
   así que no aparece ningún corte entre una cosa y la otra. */
.zg-producto-compra .zg-pasos {
  padding: clamp(40px, 5vw, 64px) 0 0;
}
.zg-producto-compra .zg-pasos .zg-pasos__lista {
  max-width: 1200px;
}

.zg-pasos__title {
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  margin: 0 auto 18px;
  max-width: 20ch;
  text-align: center;
  color: var(--zg-texto, #1C1C1A);
}

.zg-pasos__lista {
  max-width: 1000px;
  /* Sin margen superior por defecto: el titular es opcional y, cuando
     falta, el padding de la sección ya da todo el aire necesario. */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  /* Sin esto los hijos de grid toman min-width:auto y desbordan en
     móvil: es el origen de los desbordamientos horizontales que ya
     hemos perseguido en este proyecto. */
  min-width: 0;
}

.zg-pasos__title + .zg-pasos__lista {
  margin-top: 36px;
}

.zg-pasos__lista li {
  min-width: 0;
}

/* Ilustración del paso. Son sumi-e con fondo transparente, así que se
   apoyan directamente sobre el papel de la sección sin caja ni marco.
   width/height van en el HTML con las medidas reales (1024×1024) para
   que el navegador reserve el hueco y no salte el layout al cargar. */
.zg-pasos__img {
  display: block;
  width: clamp(104px, 14vw, 148px);
  height: auto;
  margin: 0 0 6px -8px;   /* el trazo tiene aire propio: se compensa */
}

.zg-pasos__num {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--zg-oro-rosa, #B76E79);
}

.zg-pasos__lista h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--zg-texto, #1C1C1A);
}

.zg-pasos__lista p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(28, 28, 26, 0.72);
}

/* En móvil los tres pasos van apilados en una sola columna: alineados
   a la izquierda quedaban como una lista suelta, y centrados se leen
   como tres momentos de una misma secuencia. El margen negativo de la
   ilustración se anula aquí — existía para compensar el aire del trazo
   contra un borde izquierdo que ahora no hay. */
@media (max-width: 799px) {
  .zg-pasos__lista { text-align: center; }
  .zg-pasos__img {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 800px) {
  .zg-pasos__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ====================================================================
   Barra de compra fija en móvil.
   Marcado en includes/bloques/barra-compra.php
   ==================================================================== */

.zg-barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px var(--pad-x, 20px);
  /* El móvil se come la franja del gesto de inicio si no se reserva. */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 243, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(183, 110, 121, 0.28);
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  /* visibility acompaña al transform para que la barra oculta no sea
     enfocable ni clicable mientras está fuera de pantalla. */
  visibility: hidden;
}

.zg-barra-compra.is-visible {
  transform: translateY(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .zg-barra-compra { transition: none; }
}

.zg-barra-compra__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin-inline: auto;
  min-width: 0;
}

.zg-barra-compra__precio {
  flex: 0 0 auto;
  min-width: 0;
  font-family: var(--zg-fuente-display, 'Bodoni Moda', serif);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--zg-texto, #1C1C1A);
  white-space: nowrap;
}
/* El precio tachado, dentro de la barra, va discreto y en línea. */
.zg-barra-compra__precio del {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.65;
  margin-right: 4px;
}
.zg-barra-compra__precio del .amount,
.zg-barra-compra__precio del bdi,
.zg-barra-compra__precio ins {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}
.zg-barra-compra__precio .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zg-barra-compra__cta {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48px de alto mínimo: por debajo de eso el dedo falla. */
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--zg-oro-rosa, #B76E79);
  transition: background-color 200ms ease, gap 200ms ease;
}

.zg-barra-compra__cta:hover {
  background: var(--zg-oro-rosa-oscuro, #8E4F58);
  gap: 14px;
}

.zg-barra-compra__cta:focus-visible {
  outline: 2px solid var(--zg-texto, #1C1C1A);
  outline-offset: 2px;
}

/* Sitio para la barra al final de la página, dentro de la sección de
   cierre y no como padding del contenedor entero: puesto en
   .zg-producto-page abría un hueco visible entre el cierre y el footer,
   porque el fondo del contenedor no llega hasta abajo. Aquí el aire
   queda dentro de la propia sección, que sí tiene fondo, y el footer
   sigue pegado. El cierre ya trae 80-160px de padding, así que 40 de
   más bastan para que la barra no muerda el enlace. */
@media (max-width: 899px) {
  .zg-producto-cierre { padding-bottom: calc(clamp(80px, 12vw, 160px) + 40px); }
}

@media (min-width: 900px) {
  .zg-barra-compra { display: none; }
}

/* ====================================================================
   Vídeo flotante del unboxing.
   Marcado en includes/bloques/video-flotante.php
   ==================================================================== */

.zg-vflot__abrir {
  position: fixed;
  right: 20px;
  /* Por encima de la barra de compra, que ocupa el borde inferior en
     móvil. Si se solaparan, el pulgar acertaría al azar. */
  bottom: 96px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(183, 110, 121, 0.35);
  background: rgba(250, 248, 243, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -16px rgba(28, 28, 26, 0.5);
  cursor: pointer;
  font: inherit;
  color: var(--zg-texto, #1C1C1A);
  /* Visible desde la primera pintura: si dependiera de una clase que
     pone el JS, un fallo del script la dejaría invisible para siempre. */
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.zg-vflot__abrir:hover {
  box-shadow: 0 14px 34px -14px rgba(28, 28, 26, 0.55);
}

.zg-vflot__abrir:hover { border-color: var(--zg-oro-rosa, #B76E79); }
.zg-vflot__abrir:focus-visible {
  outline: 2px solid var(--zg-texto, #1C1C1A);
  outline-offset: 3px;
}

/* El marco recorta el bucle: el vídeo puede venir en cualquier
   proporción y aquí siempre ocupa un cuadrado limpio. */
.zg-vflot__marco {
  position: relative;
  flex: 0 0 auto;
  /* 9:16 — la proporción real del material (480x854). En cuadrado el
     recorte se comía la caja por los lados. */
  width: clamp(84px, 22vw, 104px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--zg-fondo-suave, #F2EFE6);
}

.zg-vflot__loop,
.zg-vflot__miniatura {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zg-vflot__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 28, 26, 0.28);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
/* El play sólo aparece al apuntar: mientras tanto se ve el ritual, que
   es lo que tiene que mirarse. */
.zg-vflot__abrir:hover .zg-vflot__play,
.zg-vflot__abrir:focus-visible .zg-vflot__play { opacity: 1; }
.zg-vflot__play svg { width: 18px; height: 18px; fill: currentColor; }

.zg-vflot__texto {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Modal -------------------------------------------------------- */
.zg-vflot__modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.zg-vflot__modal[hidden] { display: none; }

.zg-vflot__fondo {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 26, 0.82);
  backdrop-filter: blur(4px);
}

.zg-vflot__caja {
  position: relative;
  width: min(100%, 900px);
  max-height: 86vh;
}

.zg-vflot__video {
  display: block;
  width: 100%;
  max-height: 86vh;
  background: #000;
}

.zg-vflot__cerrar {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zg-fondo, #F7F7F4);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.zg-vflot__cerrar:focus-visible {
  outline: 2px solid var(--zg-fondo, #F7F7F4);
  outline-offset: 2px;
}

@media (max-width: 599px) {
  .zg-vflot__texto { display: none; }
  .zg-vflot__abrir { padding: 8px; }
}