/* Levapan Elements — Galería de producto */

.lv-product-gallery-wrap {
	/* Imagen principal */
	--lv-pg-main-ratio: 1 / 1;
	--lv-pg-main-bg: #f7f7f7;
	--lv-pg-main-radius: 12px;
	--lv-pg-main-padding: 24px;
	--lv-pg-main-fit: cover;

	/* Etiqueta «Más vendido» */
	--lv-pg-badge-color: #ffffff;
	--lv-pg-badge-bg: #cf1d1d;
	--lv-pg-badge-radius: 8px;
	--lv-pg-badge-padding: 8px 12px;
	--lv-pg-badge-max-width: 92px;
	--lv-pg-badge-x: 16px;
	--lv-pg-badge-y: 16px;
	--lv-pg-badge-icon-size: 16px;

	/* Miniaturas */
	--lv-pg-thumbs-gap: 16px;
	--lv-pg-thumbs-per-view: 4;
	--lv-pg-thumbs-space: 12px;
	--lv-pg-thumb-ratio: 1 / 1;
	--lv-pg-thumb-bg: #f7f7f7;
	--lv-pg-thumb-radius: 8px;
	--lv-pg-thumb-padding: 8px;
	--lv-pg-thumb-image-size: 100%;
	--lv-pg-thumb-fit: cover;
	--lv-pg-thumb-border-width: 2px;
	--lv-pg-thumb-border: transparent;

	/* Flechas */
	--lv-pg-arrow-size: 44px;
	--lv-pg-arrow-icon-size: 18px;
	--lv-pg-arrow-color: #141414;
	--lv-pg-arrow-bg: #ffffff;
	--lv-pg-arrow-offset: 12px;
	--lv-pg-arrow-gutter: 0px;

	/* Estados sin valor propio: heredan el normal, para que exponer estos
	   controles no cambie el aspecto por defecto de nada ya publicado.
	   El borde de la miniatura activa SÍ trae el suyo: tiene que
	   distinguirse sin configurar nada. */
	--lv-pg-thumb-border-hover: var(--lv-pg-thumb-border);
	--lv-pg-thumb-border-active: #cf1d1d;
	--lv-pg-arrow-color-hover: var(--lv-pg-arrow-color);
	--lv-pg-arrow-bg-hover: var(--lv-pg-arrow-bg);
	--lv-pg-arrow-opacity-disabled: 0.35;
}

/* El canal de las flechas en modo «fuera» se talla DENTRO del ancho del
   widget: las flechas absolutas se posicionan contra el padding box, así que
   con `inset-inline: 0` caen solas en el canal. Si el .swiper desbordara hacia
   fuera, en móvil aparecería scroll horizontal en la página.

   Este nodo existe además para que las flechas centren con `top: 50%`: solo
   contiene la imagen, no las miniaturas. */
.lv-product-gallery__main-wrap {
	position: relative;
	padding-inline: var(--lv-pg-arrow-gutter);
}

/* Swiper pone `overflow: hidden` en `.swiper` y eso recorta la sombra de la
   figura y el anillo de foco de las miniaturas. No se puede pasar a `visible`
   —es lo que oculta los slides fuera de vista—, así que se recorta solo en
   horizontal. `overflow-x: hidden` no vale: la spec obliga al otro eje a
   computar `auto`. `clip` sí admite que el otro eje sea `visible`. */
.lv-product-gallery__main.swiper,
.lv-product-gallery__thumbs.swiper {
	overflow: hidden; /* Fallback Safari < 16 */
	overflow: clip visible;
}

/* Dos clases para ganarle a `.swiper-slide { overflow: hidden }` de
   widget-carousel-module-base.css de Pro, que en el editor carga siempre. */
.lv-product-gallery__main .swiper-slide {
	height: auto;
	overflow: visible;
}

.lv-product-gallery__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0; /* <figure> trae margen del user agent */
	aspect-ratio: var(--lv-pg-main-ratio);
	padding: var(--lv-pg-main-padding);
	border-radius: var(--lv-pg-main-radius);
	background-color: var(--lv-pg-main-bg);
	overflow: hidden; /* el redondeo tiene que recortar la foto */
}

/* Doble clase: `.elementor img { max-width: 100%; height: auto }` tiene
   especificidad 0,1,1 y le ganaría a una clase sola, dejando el object-fit
   sin efecto (con `height: auto` no hay caja que ajustar). */
.lv-product-gallery__figure img.lv-product-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: var(--lv-pg-main-fit);
}

/* Con una sola imagen el JS no instancia Swiper: sus clases de layout no
   aportan nada. Pero `.swiper-wrapper` conserva el `display: flex` de la hoja
   de e-swiper y el slide se quedaría sin ancho, así que se le devuelve el
   layout de bloque. Es hoy el caso de todo el catálogo. */
.lv-product-gallery--single .swiper-wrapper {
	display: block;
}

.lv-product-gallery--single .swiper-slide {
	width: 100%;
}

/* Etiqueta «Más vendido». Va sobre la imagen principal, no sobre «la imagen
   1»: por eso es hermana del .swiper y no vive dentro de un slide.

   El calc() con el canal la mantiene pegada a la FOTO y no al borde del
   widget cuando las flechas están en modo «fuera». El ancho máximo es lo que
   parte el texto en dos líneas sin meter un <br> en la cadena traducible. */
.lv-product-gallery__badge {
	position: absolute;
	inset-block-start: var(--lv-pg-badge-y);
	inset-inline-start: calc(var(--lv-pg-arrow-gutter) + var(--lv-pg-badge-x));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: var(--lv-pg-badge-max-width);
	padding: var(--lv-pg-badge-padding);
	border-radius: var(--lv-pg-badge-radius);
	background-color: var(--lv-pg-badge-bg);
	color: var(--lv-pg-badge-color);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	/* Nunca roba un clic al slide que tiene debajo. */
	pointer-events: none;
}

.lv-product-gallery__badge-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.lv-product-gallery__badge-icon svg,
.lv-product-gallery__badge-icon i {
	width: var(--lv-pg-badge-icon-size);
	height: var(--lv-pg-badge-icon-size);
	font-size: var(--lv-pg-badge-icon-size);
	fill: currentColor;
	color: currentColor;
}

/* ── Miniaturas ─────────────────────────────────────────────────────────── */

.lv-product-gallery__thumbs {
	margin-block-start: var(--lv-pg-thumbs-gap);
}

/* Selector compuesto obligatorio en TODA regla del thumb: el kit de Elementor
   estiliza `button` con `.elementor-kit-N button` (especificidad 0,1,1) y le
   ganaría a una clase suelta.

   El ancho va por calc() y no por el slidesPerView de Swiper a propósito: así
   la fila mide igual se instancie o no el swiper, que es lo que permite medir
   si las miniaturas caben ANTES de decidir si hace falta uno. */
.lv-product-gallery__thumbs .lv-product-gallery__thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	/* El ancho del control «Ancho de la miniatura» manda si está definido; si
	   no, se reparte la fila entre «Miniaturas por vista». El fallback de la
	   var() es lo que permite las dos cosas sin duplicar la regla: mientras
	   nadie toque el control, --lv-pg-thumb-width no existe y se usa el calc(). */
	width: var(
		--lv-pg-thumb-width,
		calc(
			(100% - (var(--lv-pg-thumbs-per-view) - 1) * var(--lv-pg-thumbs-space))
			/ var(--lv-pg-thumbs-per-view)
		)
	);
	height: auto;
	aspect-ratio: var(--lv-pg-thumb-ratio);
	margin: 0;
	padding: var(--lv-pg-thumb-padding);
	/* El grosor se reserva siempre con color transparente: si el borde solo
	   existiera en la activa, la miniatura crecería al seleccionarla y la fila
	   entera daría un salto. */
	border: var(--lv-pg-thumb-border-width) solid var(--lv-pg-thumb-border);
	border-radius: var(--lv-pg-thumb-radius);
	background-color: var(--lv-pg-thumb-bg);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.lv-product-gallery__thumbs .lv-product-gallery__thumb:hover {
	border-color: var(--lv-pg-thumb-border-hover);
}

.lv-product-gallery__thumbs .lv-product-gallery__thumb--active {
	border-color: var(--lv-pg-thumb-border-active);
}

.lv-product-gallery__thumbs .lv-product-gallery__thumb:focus-visible {
	outline: 3px solid var(--lv-pg-thumb-border-active);
	outline-offset: 2px;
}

/* Doble clase por lo mismo que la principal: `.elementor img { height: auto }`
   le ganaría a una clase sola y anularía el object-fit.

   El tamaño escala la foto dentro del hueco que deja el relleno, sin cambiar
   la caja de la miniatura: así se le puede dar aire a la foto sin que las
   miniaturas cambien de tamaño ni se muevan entre sí. */
.lv-product-gallery__thumbs .lv-product-gallery__thumb img.lv-product-gallery__thumb-image {
	width: var(--lv-pg-thumb-image-size);
	height: var(--lv-pg-thumb-image-size);
	object-fit: var(--lv-pg-thumb-fit);
}

/* Cuando las miniaturas caben todas el JS no crea swiper: la fila es un flex
   normal y centrado. `transform: none` es el único !important de la hoja y
   está acotado: Swiper escribe el transform INLINE al destruirse y un inline
   solo se gana así. */
.lv-product-gallery__thumbs--static .swiper-wrapper {
	display: flex;
	/* Al inicio, no centradas: con 2 de 4 huecos, centrarlas las dejaría
	   flotando en medio de la fila en vez de alineadas con la imagen. */
	justify-content: flex-start;
	gap: var(--lv-pg-thumbs-space);
	transform: none !important;
}

/* Las miniaturas conservan SIEMPRE el ancho de «miniaturas por vista», tanto
   si la tira es un swiper como si no: con el control en 4, cada una mide un
   cuarto de fila haya 2 fotos o haya 6. Si se repartieran el ancho disponible,
   dos fotos saldrían gigantes (media fila cada una) y el tamaño de la
   miniatura dependería de cuántas imágenes tenga el producto, que es
   justamente lo que no se quiere. Cuando sobran, el hueco se queda a la
   derecha. */
.lv-product-gallery__thumbs--static .lv-product-gallery__thumb {
	flex: 0 0 auto;
}

/* ── Flechas ────────────────────────────────────────────────────────────── */

.lv-product-gallery-wrap .lv-slider-arrow {
	position: absolute;
	z-index: 3; /* por encima del badge: la flecha es lo interactivo */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lv-pg-arrow-size);
	height: var(--lv-pg-arrow-size);
	margin: 0;
	border-radius: 50%;
	background-color: var(--lv-pg-arrow-bg);
	color: var(--lv-pg-arrow-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lv-product-gallery-wrap .lv-slider-arrow svg,
.lv-product-gallery-wrap .lv-slider-arrow i {
	width: var(--lv-pg-arrow-icon-size);
	height: var(--lv-pg-arrow-icon-size);
	font-size: var(--lv-pg-arrow-icon-size);
	fill: currentColor;
	color: currentColor;
}

.lv-product-gallery-wrap .lv-slider-arrow:hover {
	background-color: var(--lv-pg-arrow-bg-hover);
	color: var(--lv-pg-arrow-color-hover);
}

/* Tres clases para ganarle a `.elementor-element .swiper ~ .elementor-swiper-button-*`
   de e-swiper.min.css, que fija su propio inset y un top: 50%. Aquí el 50% es
   del __main-wrap, que solo contiene la imagen, así que centra donde toca (el
   translateY(-50%) de e-swiper se conserva). */
.elementor-element .lv-product-gallery-wrap .lv-slider-arrow--prev {
	top: 50%;
	inset-inline-start: var(--lv-pg-arrow-offset);
	inset-inline-end: auto;
}

.elementor-element .lv-product-gallery-wrap .lv-slider-arrow--next {
	top: 50%;
	inset-inline-end: var(--lv-pg-arrow-offset);
	inset-inline-start: auto;
}

.lv-product-gallery-wrap .lv-slider-arrow.swiper-button-disabled {
	opacity: var(--lv-pg-arrow-opacity-disabled);
}