/* ZG: packs — selector de colgantes en la ficha del Dúo y el Trío.
   Vive dentro del formulario nativo de WooCommerce, así que todo va
   prefijado y con box-sizing propio: el tema de bloques no lo garantiza
   dentro del form. */

.zg-pack,
.zg-pack *,
.zg-pack *::before,
.zg-pack *::after {
  box-sizing: border-box;
}

.zg-pack {
  margin: 0 0 28px;
  /* min-width: 0 aquí y en las rejillas de abajo: sin esto los hijos
     de grid toman min-width:auto y desbordan en móvil. Es la causa de
     los desbordamientos horizontales que ya hemos perseguido antes. */
  min-width: 0;
}

/* Panel plegable de cada guardián. Es un <details>: el primero abierto,
   los demás cerrados. El contenido plegado sigue en el formulario, así
   que los radios se envían igual estén a la vista o no. */
.zg-pack__pieza {
  margin: 0 0 12px;
  padding: 0;
  min-width: 0;
  border: 1.5px solid rgba(183, 110, 121, 0.22);
}

.zg-pack__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  /* Sin wrap: la fila es número + elección + chevron y debe caber en
     una línea. Si el nombre no entra, se recorta con puntos suspensivos
     en vez de partir la fila en dos. */
  flex-wrap: nowrap;
  transition: background-color 200ms ease;
}

/* Oculto a la vista, presente para lectores de pantalla. */
.zg-pack__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* El triángulo de serie del navegador sobra: pintamos el nuestro. En
   Safari hace falta el pseudo-elemento con prefijo. */
.zg-pack__legend::-webkit-details-marker { display: none; }
.zg-pack__legend::marker { content: ""; }

.zg-pack__legend:hover { background: rgba(183, 110, 121, 0.06); }

/* Abierto no lleva ni marco ni fondo: el panel desplegado ya se explica
   solo con sus opciones, y el realce competía con el borde rosa de la
   opción seleccionada, que es lo único que debe destacar ahí dentro.
   El borde se vuelve transparente en vez de quitarse para que el ancho
   no cambie y la fila no dé un salto al abrirse. */
.zg-pack__pieza[open] {
  border-color: transparent;
}
.zg-pack__pieza[open] > .zg-pack__legend {
  background: transparent;
}
.zg-pack__pieza[open] > .zg-pack__legend:hover {
  background: rgba(183, 110, 121, 0.04);
}
/* El tema pinta `outline: 2px solid` en cualquier :focus, y un
   <summary> recibe foco al pulsarlo con el ratón: de ahí el recuadro
   oscuro que aparecía al desplegar. Se anula el foco genérico y se deja
   sólo el de teclado — quitar los dos dejaría a quien navega con Tab sin
   saber dónde está. */
.zg-pack__legend:focus {
  outline: none;
}
.zg-pack__legend:focus-visible {
  outline: 1px solid var(--zg-texto, #1C1C1A);
  outline-offset: -3px;
}

/* Chevron propio, que gira al abrir. */
.zg-pack__legend-icono {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  border-right: 1.5px solid var(--zg-oro-rosa, #B76E79);
  border-bottom: 1.5px solid var(--zg-oro-rosa, #B76E79);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms ease;
}
.zg-pack__pieza[open] > .zg-pack__legend .zg-pack__legend-icono {
  transform: rotate(-135deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .zg-pack__legend-icono { transition: none; }
}

/* El contenido lleva su propio padding: el summary ya tiene el suyo. */
.zg-pack__pieza > .zg-pack__opciones,
.zg-pack__pieza > .zg-pack__dedicatoria {
  margin-inline: 16px;
}
.zg-pack__pieza > .zg-pack__dedicatoria {
  margin-bottom: 16px;
}

.zg-pack__legend-num {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--zg-oro-rosa, #B76E79);
}

.zg-pack__legend-sel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--zg-texto, #1C1C1A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zg-pack__opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.zg-pack__opcion {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  min-width: 0;
  text-align: center;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  background: #fff;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.zg-pack__opcion:hover {
  border-color: var(--zg-oro-rosa, #B76E79);
}

.zg-pack__opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zg-pack__opcion:has(input:checked) {
  border-color: var(--zg-oro-rosa, #B76E79);
  background: var(--zg-fondo-suave, #F2EFE6);
}

.zg-pack__opcion:has(input:focus-visible) {
  outline: 1px solid var(--zg-texto, #1C1C1A);
  outline-offset: 4px;
}

/* 56 y no menos: el trazo de los iconos es muy fino y el plateado se
   desdibuja sobre fondo claro por debajo de este tamaño. */
.zg-pack__opcion-icono {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.zg-pack__opcion-nombre {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zg-texto, #1C1C1A);
}

.zg-pack__opcion-acabado {
  font-size: 0.6875rem;
  color: rgba(28, 28, 26, 0.55);
}

/* --- Dedicatoria por pieza ---------------------------------------- */
.zg-pack__dedicatoria {
  margin-top: 14px;
  min-width: 0;
}

.zg-pack__dedicatoria-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zg-texto, #1C1C1A);
}

.zg-pack__dedicatoria-label span {
  display: block;
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.8125rem;
  color: rgba(28, 28, 26, 0.55);
}

.zg-pack__dedicatoria-input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zg-texto, #1C1C1A);
  background: #fff;
  border: 1.5px solid rgba(183, 110, 121, 0.3);
  border-radius: 0;
  resize: vertical;
  transition: border-color 200ms ease;
}

.zg-pack__dedicatoria-input:hover {
  border-color: rgba(183, 110, 121, 0.55);
}

.zg-pack__dedicatoria-input:focus {
  outline: none;
  border-color: var(--zg-oro-rosa, #B76E79);
}

.zg-pack__dedicatoria-input:focus-visible {
  outline: 1px solid var(--zg-texto, #1C1C1A);
  outline-offset: 3px;
}

.zg-pack__dedicatoria-count {
  display: block;
  margin-top: 4px;
  text-align: right;
  font-size: 0.75rem;
  color: rgba(28, 28, 26, 0.45);
}

.zg-pack__resumen {
  margin: 0;
  padding: 14px 16px;
  background: var(--zg-fondo-suave, #F2EFE6);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--zg-texto, #1C1C1A);
}

.zg-pack__resumen:empty {
  display: none;
}

@media (min-width: 700px) {
  .zg-pack__opciones {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ====================================================================
   Landing del pack. Reutiliza .zg-producto-page entera (zg-producto.css)
   y añade sólo lo propio.
   ==================================================================== */

/* En línea con el nombre. El tamaño va en `em` para que acompañe al
   titular en cualquier punto de su clamp, y algo por encima de 1 porque
   los ideogramas se leen ópticamente más pequeños que las latinas al
   mismo cuerpo. */
.zg-pack-page .zg-pack__kanji {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  margin-right: 0.24em;
  color: var(--zg-oro-rosa, #B76E79);
  opacity: 0.55;
}

.zg-pack-page .zg-pack__foto {
  width: 100%;
  height: auto;
  display: block;
}

/* Marcador explícito mientras no llegue la foto. Se distingue a
   propósito del marcador gris de WooCommerce, que parece un fallo. */
.zg-pack__foto-pendiente {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  border: 1.5px dashed rgba(183, 110, 121, 0.45);
  background: var(--zg-fondo-suave, #F2EFE6);
  color: rgba(28, 28, 26, 0.6);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Galería del pack ------------------------------------------------
   Marcado en includes/packs/galeria.php */
.zg-pack-galeria { min-width: 0; }

.zg-pack-galeria__principal {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--zg-fondo-suave, #F2EFE6);
}

.zg-pack-galeria__img,
.zg-pack-galeria__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La regla de UA para [hidden] la gana cualquier `display` posterior:
   sin este !important, el vídeo oculto seguiría tapando la foto. Ya nos
   pasó con la galería del colgante. */
.zg-pack-galeria__img[hidden],
.zg-pack-galeria__video[hidden] { display: none !important; }

.zg-pack-galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.zg-pack-galeria__mini {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1.5px solid transparent;
  background: var(--zg-fondo-suave, #F2EFE6);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.zg-pack-galeria__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zg-pack-galeria__mini:hover { opacity: 0.85; }
.zg-pack-galeria__mini.is-activa { border-color: var(--zg-oro-rosa, #B76E79); }
.zg-pack-galeria__mini:focus-visible {
  outline: 1px solid var(--zg-texto, #1C1C1A);
  outline-offset: 2px;
}

.zg-pack-galeria__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 28, 26, 0.3);
  color: #fff;
  pointer-events: none;
}
.zg-pack-galeria__play svg { width: 18px; height: 18px; fill: currentColor; }