/* Galería de ficha de producto tipo carrusel (Marjoya) */

.mjg-carrusel .product-cover { display: none !important; }

/* La capa de la lupa del tema cubre toda la foto: que deje pasar el dedo
   (para deslizar) y solo responda el propio icono */
.mjg-carrusel .ttimage-zoom .layer { pointer-events: none; }
.mjg-carrusel .ttimage-zoom .layer .zoom-in { pointer-events: auto; cursor: pointer; }

.mjg-principal { position: relative; background: #fff; }
.mjg-principal .mjg-foto { position: relative; overflow: hidden; cursor: zoom-in; }
.mjg-principal .mjg-foto img { display: block; width: 100%; height: auto; user-select: none; }

/* Flechas: aparecen al pasar el ratón por la foto */
.mjg-flecha {
  position: absolute; top: 50%; z-index: 3;
  width: 40px; height: 40px; margin-top: -20px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
  cursor: pointer; opacity: 0; transition: opacity .2s ease;
}
.mjg-flecha::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border: solid #333; border-width: 0 2px 2px 0;
}
.mjg-ant { left: 10px; }
.mjg-sig { right: 10px; }
.mjg-ant::before { transform: translate(-30%, -50%) rotate(135deg); }
.mjg-sig::before { transform: translate(-70%, -50%) rotate(-45deg); }
.mjg-principal:hover .mjg-flecha, .mjg-flecha:focus-visible { opacity: 1; }

/* Puntos (móvil) */
.mjg-principal .slick-dots {
  display: flex !important; justify-content: center; gap: 8px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.mjg-principal .slick-dots li { margin: 0; }
.mjg-principal .slick-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #ccc; font-size: 0; cursor: pointer;
}
.mjg-principal .slick-dots .slick-active button { background: #333; }

/* Miniatura seleccionada más visible */
.mjg-on .js-qv-product-images .js-thumb { opacity: .55; transition: opacity .2s ease; }
.mjg-on .js-qv-product-images .js-thumb.selected,
.mjg-on .js-qv-product-images .js-thumb:hover { opacity: 1; }

/* Móvil: la foto ocupa todo el ancho (el tema reserva un 25 % para miniaturas que no muestra) */
@media (max-width: 767px) {
  .mjg-on .ttimage-zoom { float: none !important; width: 100% !important; }
}