/* =====================================================================
   Galería de producto — construida desde cero (sin flexslider, sin
   wc-product-gallery-zoom, sin PhotoSwipe). Ver inc/product-gallery.php
   para la decisión de diseño y el porqué.
   ===================================================================== */

.dx-product-gallery {
  max-width: 100%;
}

/* ---------- Imagen principal ---------- */
/* Marco CUADRADO que escala con el ancho de la columna (las fotos de
   producto son 1:1, guía de 1200x1200). Antes tenía un alto fijo de 420px:
   en una columna de ~540px de ancho el marco quedaba apaisado y una foto
   cuadrada no cabía completa, así que se veía cortada arriba y abajo.
   Con aspect-ratio la foto cuadrada cabe entera sin depender de nada más.
   Si la foto NO es cuadrada, "contain" la muestra completa con franjas
   blancas, nunca recortada. La imagen va posicionada en absoluto y con
   !important a propósito: así ninguna regla de Kadence, WooCommerce o un
   plugin (height:auto, max-width, etc.) puede volver a recortarla. */
.dx-product-gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 82vh; /* en pantallas bajas no empuja el resto de la ficha */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--dx-line);
  margin-bottom: 12px;
  display: block;
}
.dx-product-gallery__main-img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important; /* completa, sin recortar ni deformar */
  object-position: center !important;
  display: block;
  cursor: zoom-in;
}

/* Flechas para pasar a la imagen anterior/siguiente, sin zoom ni lightbox */
.dx-product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #222;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  z-index: 2;
  padding: 0;
}
.dx-product-gallery__nav:hover { background: #fff; }
.dx-product-gallery__nav--prev { left: 10px; }
.dx-product-gallery__nav--next { right: 10px; }

/* ---------- Miniaturas ---------- */
.dx-product-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dx-product-gallery__thumb-item {
  flex: 0 0 auto;
}
.dx-product-gallery__thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid var(--dx-line);
  background: #fff; /* fondo visible si la foto no llena el cuadro (ver contain abajo) */
  cursor: pointer;
  opacity: .75;
  overflow: hidden;
  transition: border-color .15s ease, opacity .15s ease;
}
.dx-product-gallery__thumb img {
  width: 100%;
  height: 100%;
  /* "contain" en vez de "cover": tampoco aquí se recorta nada de la
     foto, ni siquiera en la miniatura pequeña. Puede dejar un borde
     blanco fino en fotos no cuadradas, pero nunca corta el producto. */
  object-fit: contain;
  aspect-ratio: 1 / 1;
  display: block;
  pointer-events: none; /* el clic lo maneja el <button> que envuelve la miniatura */
}
.dx-product-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--dx-mute);
}
.dx-product-gallery__thumb--active {
  opacity: 1;
  border-color: var(--dx-cyan);
}

@media (max-width: 480px) {
  .dx-product-gallery__thumb {
    width: 60px;
    height: 60px;
  }
}

/* ---------- Modal de zoom ----------
   Al hacer clic/tap en la imagen principal se abre esto: una vista
   ampliada simple, centrada, con botón de cerrar visible en todo
   momento y flechas propias para seguir viendo las demás fotos sin
   salir del zoom. A diferencia del lightbox descartado antes, este es
   más pequeño, no oscurece agresivamente, y su única forma de cerrarse
   (X, tecla Esc, o clic fuera de la imagen) es explícita y visible. */
.dx-product-gallery__zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 20, .85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dx-product-gallery__zoom.is-open {
  display: flex;
}
.dx-product-gallery__zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.dx-product-gallery__zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.dx-product-gallery__zoom-close:hover { background: #f2f2f2; }
.dx-product-gallery__zoom .dx-product-gallery__nav {
  background: #fff;
}