/* nv-galeria.css — galería de la ficha de La Novedad (T7, §2.18). Piel Nitro sobre el marcado flexy de Blocksy.
   Medido en lanovedad.com (capturas del 2026-09-10; 1440 y 390 con emulación real):
   · escritorio: miniaturas de 90 px, 8 px entre ellas y 16 px hasta la foto, cada una con su proporción (95/121/110 px
     de alto en TENIS STAR); la activa con marco #222 de 2 px; badge a 15 px de arriba y de la derecha de la foto;
   · 390: foto x 15–374, miniaturas de 56 px con 5 px de hueco (seis por fila: a 500 px de maquetación dan los ~75 px
     del informe), todas a la altura de la más alta y sin marco; 6 px entre foto y fila.
   Flechas: 44/40 px según §2.18 (en la captura el disco blanco de Shopify mide ~34–36 px; manda la especificación).
   Sin panel oscuro, sin radios de 12 px, sin atenuado, sin foto siguiente asomando (lo que tenía lemon-glass-pdp). */

.single-product .woocommerce-product-gallery{
  --nv-gal-mini:90px; --nv-gal-mini-hueco:8px; --nv-gal-hueco:16px;
  --nv-gal-flecha:44px; --nv-gal-borde:15px;
}
@media (max-width:767px){ .single-product .woocommerce-product-gallery{ --nv-gal-flecha:40px } }

.single-product .woocommerce-product-gallery .ct-product-gallery-container{position:relative}
.single-product .woocommerce-product-gallery .ct-media-container{border-radius:0}

/* ── Foto principal: la proporción la trae Blocksy en línea («original», novedad-tema-galeria.php); aquí solo se
   deja de estirar la imagen. ── */
.single-product .woocommerce-product-gallery .flexy-item .ct-media-container,
.single-product .woocommerce-product-gallery .ct-product-gallery-container>.ct-media-container{display:block;width:100%;overflow:hidden}
.single-product .woocommerce-product-gallery .flexy-item img,
.single-product .woocommerce-product-gallery .ct-product-gallery-container>.ct-media-container img{display:block;width:100%;height:auto;object-fit:cover;border-radius:0}
.single-product .woocommerce-product-gallery .ct-product-gallery-container>.ct-media-container{cursor:zoom-in}

/* ── Pista. Base = deslizamiento (móvil y tableta): se mueven las fotos, no la pista, con --nv-gal-cur y el dedo
   con --nv-gal-dx. !important en order y transform: si la flexy de Blocksy llegara a montarse escribe en cada foto
   style="order:2; transform:translate3d(…)" y order:1 en la última (medido por T0 en LOCAL). ── */
.single-product .woocommerce-product-gallery .flexy{position:relative}
.single-product .woocommerce-product-gallery .flexy-view{position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  touch-action:pan-y pinch-zoom;cursor:zoom-in;transition:height .3s ease}
.single-product .woocommerce-product-gallery .flexy-items{display:flex;flex-wrap:nowrap!important;align-items:flex-start;gap:0!important;
  margin:0!important;transform:none!important}
.single-product .woocommerce-product-gallery .flexy-items>.flexy-item{flex:0 0 100%!important;width:100%;max-width:100%!important;min-width:0;
  padding:0!important;order:0!important;cursor:inherit;
  transform:translate3d(calc(-100% * var(--nv-gal-cur,0) + var(--nv-gal-dx,0px)),0,0)!important;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
/* Antes de montar (sin JS o mientras carga) solo la primera foto da la altura; Blocksy hace lo mismo con su regla
   «.woocommerce-product-gallery [data-flexy="no"] .flexy-item:nth-child(n+2){height:1px}». Como la flexy se queda
   en «no» para siempre (nv-galeria.js no la deja montarse), esa regla dejaba las fotos 2..N en 1 px de alto y la vista
   se encogía a 1 px al pasar de foto (medido en LOCAL con getComputedStyle): montada, cada foto recupera su alto. */
.single-product .woocommerce-product-gallery:not(.nv-galeria--lista) .flexy-items>.flexy-item:not(:first-child){height:0;overflow:hidden}
.single-product .woocommerce-product-gallery.nv-galeria--lista .flexy-items>.flexy-item{height:auto!important;overflow:visible}
.single-product .woocommerce-product-gallery.nv-galeria--quieta .flexy-view,
.single-product .woocommerce-product-gallery.nv-galeria--quieta .flexy-items>.flexy-item{transition:none!important}
/* Salto de más de una foto en táctil (nv-galeria.js pone --salto): la pista no cruza las fotos de en medio, que se
   descargaban al pasar; cambia de golpe y la vista entra con un fundido corto. */
@keyframes nv-gal-salto{from{opacity:.4}to{opacity:1}}
@media (max-width:1024px){
  .single-product .woocommerce-product-gallery.nv-galeria--salto .flexy-items>.flexy-item{transition:none!important}
  .single-product .woocommerce-product-gallery.nv-galeria--salto .flexy-view{animation:nv-gal-salto .3s ease}
}

/* ── Miniaturas (base = fila debajo, < 1025) ── */
.single-product .woocommerce-product-gallery .flexy-pills{margin:6px 0 0;padding:0}
/* overscroll-behavior solo en X: en los dos ejes, un gesto vertical sobre la fila no llegaba a la página (medido con
   CDP táctil: scrollY 0 → 0). */
.single-product .woocommerce-product-gallery .flexy-pills>ol{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:5px;
  margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch}
.single-product .woocommerce-product-gallery .flexy-pills>ol::-webkit-scrollbar{display:none}
/* Opacidad medida en lanovedad.com (CDP, 2026-09-11, opacidad efectiva de cada miniatura de TENIS STAR): hasta 1023 px
   las no activas van a .5 y pasan a 1 con el ratón encima (390 con y sin táctil, 767, 768, 992 y 1023); desde 1024 todas
   van a 1, también con el ratón encima (1024 y 1440), y en escritorio la activa se distingue solo por el marco. §2.18
   pedía el .5 en escritorio, donde Shopify no lo usa. En la fila, que no lleva marco, la opacidad es lo único que marca
   la activa: con todas a 1 no se sabía cuál era. */
.single-product .woocommerce-product-gallery .flexy-pills li{position:relative;display:block;flex:0 0 calc((100% - 25px) / 6);width:auto;
  min-width:0;margin:0;padding:0;border-radius:var(--nv-radius,4px);overflow:hidden;opacity:1;cursor:pointer}
@media (max-width:1023px){
  .single-product .woocommerce-product-gallery .flexy-pills li:not(.active){opacity:.5}
}
/* El 1 al pasar por encima, solo con ratón: en táctil el :hover se queda pegado tras el toque (como en las flechas). */
@media (max-width:1023px) and (hover:hover) and (pointer:fine){
  .single-product .woocommerce-product-gallery .flexy-pills li:hover{opacity:1}
}
.single-product .woocommerce-product-gallery .flexy-pills li:focus-visible{outline:2px solid var(--nv-accent,#a1923d);outline-offset:-2px}
/* La caja interior da la altura con la proporción de la foto (el JS pone --nv-ar); la imagen llena el li, así en
   la fila todas toman la altura de la más alta, como en Shopify. */
.single-product .woocommerce-product-gallery .flexy-pills li .ct-media-container{display:block;width:100%;aspect-ratio:var(--nv-ar,1 / 1);
  position:static;overflow:visible;border-radius:0}
.single-product .woocommerce-product-gallery .flexy-pills li .ct-media-container:after{display:none}
.single-product .woocommerce-product-gallery .flexy-pills li img{position:absolute;inset:0;width:100%!important;height:100%!important;
  max-width:none;aspect-ratio:auto!important;object-fit:cover;border-radius:0}
/* Marco de la activa (solo ≥1025, abajo): 2 px #222 por encima de la foto, como el relleno oscuro de Nitro. */
.single-product .woocommerce-product-gallery .flexy-pills li:after{content:"";position:absolute;inset:0;z-index:1;border:2px solid transparent;
  border-radius:inherit;pointer-events:none}

/* ── Escritorio (≥1025). Va después de la base: mismas especificidades, gana el orden. ── */
@media (min-width:1025px){
  /* Fundido (Nitro eff «fade»): la foto actual y la anterior se colocan en x=0; las demás se quedan a su lado,
     recortadas y transparentes, así su loading=lazy no se dispara hasta que hacen falta. */
  .single-product .woocommerce-product-gallery .flexy-items>.flexy-item{transform:none!important;opacity:0;z-index:0;
    pointer-events:none;transition:opacity .45s ease}
  .single-product .woocommerce-product-gallery .flexy-items>.flexy-item.is-previa{
    transform:translate3d(calc(-100% * var(--nv-i,0)),0,0)!important;opacity:1;z-index:1;transition:none}
  /* Solo opacidad en la transición: con transform, la foto que entra se deslizaba desde su sitio además de fundirse. */
  .single-product .woocommerce-product-gallery .flexy-items>.flexy-item.is-actual{
    transform:translate3d(calc(-100% * var(--nv-i,0) + var(--nv-gal-dx,0px)),0,0)!important;opacity:1;z-index:2;pointer-events:auto;
    transition:opacity .45s ease}
  .single-product .woocommerce-product-gallery:not(.nv-galeria--lista) .flexy-items>.flexy-item:first-child{opacity:1}

  /* Miniaturas a la izquierda: la columna mide lo mismo que la foto (la lista va absoluta dentro de su celda). */
  .single-product .woocommerce-product-gallery .flexy-container:has(>.flexy-pills){display:grid;
    grid-template-columns:var(--nv-gal-mini) minmax(0,1fr);column-gap:var(--nv-gal-hueco);align-items:start}
  .single-product .woocommerce-product-gallery .flexy-container:has(>.flexy-pills)>.flexy{grid-column:2;grid-row:1;min-width:0}
  .single-product .woocommerce-product-gallery .flexy-container>.flexy-pills{grid-column:1;grid-row:1;align-self:stretch;
    position:relative;margin:0;min-height:0}
  .single-product .woocommerce-product-gallery .flexy-pills>ol{position:absolute;inset:0;flex-direction:column;align-items:stretch;
    gap:var(--nv-gal-mini-hueco);overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto}
  .single-product .woocommerce-product-gallery .flexy-pills li{flex:0 0 auto;width:100%}
  .single-product .woocommerce-product-gallery .flexy-pills li.active:after{border-color:var(--nv-dark,#222)}
}

/* ── Flechas: estilo «clara» de §2.14 en tamaño mediano. Las de Blocksy (span, sin teclado) se ocultan. ── */
.single-product .woocommerce-product-gallery .flexy>[class*=flexy-arrow]{display:none!important}
.nv-galeria__flecha,.nv-zoom__flecha{position:absolute;top:50%;z-index:4;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:var(--nv-gal-flecha,44px);height:var(--nv-gal-flecha,44px);min-height:0;margin:calc(var(--nv-gal-flecha,44px) / -2) 0 0;
  padding:0;border:0;border-radius:50%;background:#fff;color:var(--nv-dark,#222);box-shadow:4px 10px 32px rgba(0,0,0,.1);
  font-size:0;line-height:1;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.nv-galeria__flecha--ant,.nv-zoom__flecha--ant{left:var(--nv-gal-borde,15px)}
.nv-galeria__flecha--sig,.nv-zoom__flecha--sig{right:var(--nv-gal-borde,15px)}
.nv-galeria__flecha .nv-i,.nv-zoom__flecha .nv-i{width:13px;height:13px;stroke-width:2.5}
/* Dorado solo con ratón: en táctil el :hover se queda pegado tras el toque (medido con CDP a 390: la flecha seguía
   rgb(161,146,61) 3,7 s después). Fuera de la media, :hover deja el blanco para que no mande el de los botones. */
.nv-galeria__flecha:hover,.nv-zoom__flecha:hover,.nv-zoom__cerrar:hover{background:#fff;color:var(--nv-dark,#222);border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .nv-galeria__flecha:hover,.nv-zoom__flecha:hover{background:var(--nv-oro);color:#151515;box-shadow:0 2px 4px rgba(0,0,0,.07)}
  .nv-zoom__cerrar:hover{background:var(--nv-oro);color:#151515}
}
.nv-galeria__flecha:focus-visible,.nv-zoom__flecha:focus-visible,.nv-galeria__ampliar:focus-visible,.nv-zoom__cerrar:focus-visible{
  outline:2px solid var(--nv-accent,#a1923d);outline-offset:2px}

/* ── Ampliar: círculo blanco de 44 px abajo a la derecha; al pasar por la foto se abre «Haga clic para ampliar». ── */
.nv-galeria__ampliar{position:absolute;right:15px;bottom:15px;z-index:4;display:inline-flex;align-items:center;justify-content:flex-end;
  box-sizing:border-box;height:44px;min-height:0;min-width:44px;max-width:calc(100% - 30px);padding:0;border:0;border-radius:22px;
  background:#fff;color:var(--nv-dark,#222);box-shadow:var(--nv-shadow-float,0 0 5px rgba(0,0,0,.09));
  font:500 13px/1 var(--nv-font,sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;cursor:pointer}
.nv-galeria__ampliar:hover{background:#fff;color:var(--nv-dark,#222);border-color:transparent}
.nv-galeria__ampliar .nv-i{width:14px;height:14px;margin:0 15px;stroke-width:2}
.nv-galeria__ampliar-texto{display:block;max-width:0;overflow:hidden;opacity:0;padding:0;
  transition:max-width .35s ease,opacity .25s ease,padding .35s ease}
@media (hover:hover) and (pointer:fine){
  .single-product .woocommerce-product-gallery .flexy:hover .nv-galeria__ampliar-texto,
  .single-product .woocommerce-product-gallery .ct-product-gallery-container:hover>.nv-galeria__ampliar .nv-galeria__ampliar-texto,
  .nv-galeria__ampliar:focus-visible .nv-galeria__ampliar-texto{max-width:220px;opacity:1;padding-left:18px}
}

/* ── Superposición de ampliar (#nv-zoom, D23): propia, fondo blanco, foto entera, flechas y cierre. ── */
.nv-zoom{position:fixed;inset:0;z-index:calc(var(--nv-z-drawer,1000) + 5);background:#fff;opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility 0s linear .25s;touch-action:pan-y pinch-zoom}
.nv-zoom.is-abierto{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.nv-zoom__marco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:20px 80px}
.nv-zoom__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none}
.nv-zoom__cerrar{position:absolute;top:15px;right:15px;z-index:5;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--nv-dark,#222);
  box-shadow:4px 10px 32px rgba(0,0,0,.1);cursor:pointer;transition:background-color .3s ease,color .3s ease}
.nv-zoom__cerrar .nv-i{width:18px;height:18px;stroke-width:2}
.nv-zoom .nv-zoom__flecha{z-index:5}
@media (max-width:767px){
  .nv-zoom{--nv-gal-flecha:40px}
  .nv-zoom__marco{padding:70px 0}
}

@media (prefers-reduced-motion:reduce){
  .single-product .woocommerce-product-gallery .flexy-view,
  .single-product .woocommerce-product-gallery .flexy-items>.flexy-item,
  .nv-galeria__ampliar-texto,.nv-zoom{transition:none!important}
}