/* NovaShop · Galería de producto (4 estilos). Usa las variables del tema activo. */
.ns-gallery { --g-r: var(--radius, var(--r, 8px)); --g-soft: var(--soft, var(--tile, #f3f3f1)); --g-line: var(--line, rgba(0,0,0,.12)); --g-ink: var(--primary, var(--ink, #111));
  display: grid; gap: 12px; min-width: 0; }
.ns-g-stage { position: relative; min-width: 0; border-radius: var(--g-r); overflow: hidden; background: var(--g-soft); }
.ns-g-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.ns-g-track::-webkit-scrollbar { display: none; }
.ns-g-track:focus-visible { box-shadow: inset 0 0 0 2px var(--g-ink); }
.ns-g-slide { flex: 0 0 100%; margin: 0; aspect-ratio: var(--ns-g-ratio, 1 / 1); scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; background: var(--g-soft); }
.ns-g-slide img { width: 100%; height: 100%; object-fit: var(--ns-g-fit, cover); display: block; user-select: none; transition: transform .25s ease-out; }
[data-lightbox] .ns-g-slide { cursor: zoom-in; }
[data-zoom] .ns-g-slide.is-zoom img { transform: scale(2.1); transition: none; }
[data-zoom] .ns-g-slide.is-zoom { cursor: crosshair; }

/* Flechas, puntos y contador */
.ns-g-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); opacity: 0; transition: opacity .2s, transform .2s; z-index: 2; }
.ns-g-prev { left: 12px; } .ns-g-next { right: 12px; }
.ns-g-stage:hover .ns-g-arrow, .ns-g-arrow:focus-visible { opacity: 1; }
.ns-g-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.ns-g-arrow:hover { transform: translateY(-50%) scale(1.06); }
.ns-g-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: none; justify-content: center; gap: 6px; pointer-events: none; z-index: 2; }
.ns-g-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: width .2s, background .2s; }
.ns-g-dots span.is-active { width: 18px; border-radius: 4px; background: #fff; }
.ns-g-count { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.9); color: #111; font-size: 12px; font-variant-numeric: tabular-nums; display: none; z-index: 2; }
.ns-g-expand { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* Miniaturas */
.ns-g-thumbs-wrap { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ns-g-thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.ns-g-thumbs::-webkit-scrollbar { display: none; }
.ns-g-thumb { flex: 0 0 auto; width: 76px; aspect-ratio: var(--ns-g-ratio, 1 / 1); padding: 0; border: 0; border-radius: calc(var(--g-r) * .7); overflow: hidden; cursor: pointer; background: var(--g-soft); opacity: .62; outline: 1px solid transparent; outline-offset: 0; transition: opacity .2s, outline-color .2s; }
.ns-g-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-g-thumb:hover { opacity: 1; }
.ns-g-thumb.is-active { opacity: 1; outline: 2px solid var(--g-ink); outline-offset: -2px; }
.ns-g-thumb:focus-visible { outline: 2px solid var(--g-ink); opacity: 1; }
.ns-g-tarrow { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--g-line); background: var(--bg, #fff); color: inherit; display: grid; place-items: center; cursor: pointer; }
.ns-g-tarrow svg { width: 16px; height: 16px; }
.ns-g-tarrow:disabled { opacity: .3; cursor: default; }

/* 2 · Miniaturas a la izquierda (escritorio) */
@media (min-width: 900px) {
  .ns-gallery[data-layout="thumbs_left"] { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
  .ns-gallery[data-layout="thumbs_left"] .ns-g-stage { grid-column: 2; grid-row: 1; }
  .ns-gallery[data-layout="thumbs_left"] .ns-g-thumbs-wrap { grid-column: 1; grid-row: 1; flex-direction: column; height: 0; min-height: 100%; align-self: stretch; }
  .ns-gallery[data-layout="thumbs_left"] .ns-g-thumbs { flex-direction: column; overflow-x: hidden; overflow-y: auto; min-height: 0; width: 100%; }
  .ns-gallery[data-layout="thumbs_left"] .ns-g-thumb { width: 100%; }
  .ns-gallery[data-layout="thumbs_left"] .ns-g-tarrow svg { transform: rotate(90deg); }
}

/* 3 · Cuadrícula (escritorio): todas las fotos a la vista */
@media (min-width: 900px) {
  .ns-gallery[data-layout="grid"] .ns-g-stage { background: transparent; overflow: visible; border-radius: 0; }
  .ns-gallery[data-layout="grid"] .ns-g-track { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; scroll-snap-type: none; }
  .ns-gallery[data-layout="grid"] .ns-g-slide { border-radius: var(--g-r); }
  .ns-gallery[data-layout="grid"] .ns-g-slide:first-child { grid-column: 1 / -1; }
  .ns-gallery[data-layout="grid"][data-count="2"] .ns-g-slide:first-child { grid-column: auto; }
  .ns-gallery[data-layout="grid"] .ns-g-arrow, .ns-gallery[data-layout="grid"] .ns-g-dots, .ns-gallery[data-layout="grid"] .ns-g-count, .ns-gallery[data-layout="grid"] .ns-g-expand { display: none; }
}

/* 4 · Carrusel: flechas siempre visibles, puntos y contador */
.ns-gallery[data-layout="slider"] .ns-g-arrow { opacity: 1; }
.ns-gallery[data-layout="slider"] .ns-g-dots, .ns-gallery[data-layout="slider"] .ns-g-count { display: flex; }

/* Móvil: siempre carrusel deslizable con puntos */
@media (max-width: 899px) {
  .ns-g-arrow { display: none; }
  .ns-g-dots { display: flex; }
  .ns-g-count { display: inline-block; }
  .ns-g-thumb { width: 60px; }
  .ns-g-tarrow { display: none; }
  .ns-gallery { margin: 0 calc(var(--ns-g-bleed, 0px) * -1); }
}
@media (prefers-reduced-motion: reduce) { .ns-g-track, .ns-g-thumbs { scroll-behavior: auto; } .ns-g-slide img { transition: none; } }

/* Pantalla completa */
.ns-lightbox { position: fixed; inset: 0; z-index: 1000; background: #0e0e0e; color: #fff; display: flex; flex-direction: column; }
.ns-lightbox[hidden] { display: none; }
.ns-lb-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ns-lb-track::-webkit-scrollbar { display: none; }
.ns-lb-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 56px 16px 24px; }
.ns-lb-slide img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.ns-lb-close, .ns-lb-arrow { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ns-lb-close { top: 12px; right: 12px; }
.ns-lb-arrow { top: 50%; transform: translateY(-50%); }
.ns-lb-prev { left: 14px; } .ns-lb-next { right: 14px; }
.ns-lb-count { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-size: 13px; opacity: .8; pointer-events: none; }
@media (max-width: 899px) { .ns-lb-arrow { display: none; } }

/* Columna de imágenes en la ficha */
.product-media { min-width: 0; }
@media (min-width: 900px) {
  .product-media { position: sticky; top: 92px; align-self: start; }
  .product-media:has([data-layout="grid"]) { position: static; }
}