/*
 * Navegación y miniaturas de la galería de producto.
 *
 * Los números (columnas, separación, margen) llegan como variables CSS desde los controles del
 * widget. Aquí sólo se decide cómo se colocan. Varias reglas llevan `!important` a propósito:
 * WooCommerce declara sus propias miniaturas con selectores más específicos
 * (`.woocommerce div.product div.images …`) y sin él ganaría siempre.
 */

.lm-galeria,
.lm-galeria__flechas
{
	--lm-flecha-tamano: 40px;
	--lm-flecha-fondo: rgba(255, 255, 255, 0.88);
	--lm-flecha-color: #333;
}


/*
 * La galería ocupa todo el ancho del widget.
 *
 * WooCommerce deja `div.images` al 48 % y quien lo anula es Elementor Pro con una regla atada a SU
 * clase de widget (`.elementor-widget-woocommerce-product-images`). Como la nuestra es otra, sin esto
 * la galería salía a la mitad del hueco asignado. Se replica la misma regla con nuestra clase.
 */

.elementor-widget-lm-imagenes-de-producto div.images,
body.woocommerce div.product .elementor-widget-lm-imagenes-de-producto div.images,
body.woocommerce-page #content div.product .elementor-widget-lm-imagenes-de-producto div.images,
body.woocommerce-page div.product .elementor-widget-lm-imagenes-de-producto div.images
{
	float: none;
	padding: 0;
	width: 100%;
}



/*
 * Marco fijo de la imagen principal.
 *
 * «Ajustar» (contener) la enseña entera con aire a los lados; «rellenar» (cubrir) la estira hasta
 * llenar el marco y recorta lo que sobra, centrado. En los dos casos el marco mide lo que diga el
 * ajuste «Alto del marco», y todas las fotos quedan del mismo tamaño pase lo que pase.
 */

.lm-ajuste-contener .woocommerce-product-gallery .woocommerce-product-gallery__image,
.lm-ajuste-cubrir .woocommerce-product-gallery .woocommerce-product-gallery__image
{
	height: var(--lm-alto-imagen, 520px) !important;
	overflow: hidden !important;
}

.lm-ajuste-contener .woocommerce-product-gallery .woocommerce-product-gallery__image > a,
.lm-ajuste-cubrir .woocommerce-product-gallery .woocommerce-product-gallery__image > a
{
	display: block !important;
	height: 100% !important;
}

.lm-ajuste-contener .woocommerce-product-gallery .woocommerce-product-gallery__image img
{
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

.lm-ajuste-cubrir .woocommerce-product-gallery .woocommerce-product-gallery__image img
{
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* Marca de la miniatura que se está viendo */

.woocommerce-product-gallery .flex-control-thumbs li
{
	position: relative !important;
}

.woocommerce-product-gallery .flex-control-thumbs li::after
{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--lm-marca-miniatura, rgba(0, 0, 0, 0.35));
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/*
 * Se marca por dos vías: `:has()` para los navegadores que lo entienden y una clase que pone el
 * guion (`lm-miniatura-activa`) para los que no. Una capa oscura sobre la elegida.
 */

.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active)::after,
.woocommerce-product-gallery .flex-control-thumbs li.lm-miniatura-activa::after
{
	opacity: 1;
}

/* Separación con la imagen, común a los tres modos */

.woocommerce-product-gallery .flex-control-thumbs
{
	margin-top: var(--lm-margen-miniaturas, 15px) !important;
}

/* Con las miniaturas encima, la separación va debajo de ellas */

.lm-posicion-arriba .woocommerce-product-gallery .flex-control-thumbs
{
	margin-top: 0 !important;
	margin-bottom: var(--lm-margen-miniaturas, 15px) !important;
}

/* La lupa, sobre la imagen y no sobre las miniaturas */

.lm-posicion-arriba .woocommerce-product-gallery .woocommerce-product-gallery__trigger
{
	top: calc(var(--lm-alto-miniaturas, 0px) + 0.5em) !important;
}

/* Modo cuadrícula */

.lm-modo-cuadricula .woocommerce-product-gallery .flex-control-thumbs
{
	display: grid !important;
	grid-template-columns: repeat(var(--lm-columnas, 6), 1fr) !important;
	gap: var(--lm-separacion, 1px) !important;
	padding: 0 !important;
	list-style: none !important;
}

.lm-modo-cuadricula .woocommerce-product-gallery .flex-control-thumbs li
{
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lm-modo-cuadricula .woocommerce-product-gallery .flex-control-thumbs li img
{
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* Modo una sola fila, con flechas */

.lm-modo-una-fila .woocommerce-product-gallery .flex-control-thumbs
{
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	scroll-behavior: smooth;
	scrollbar-width: none;
	gap: var(--lm-separacion, 6px) !important;
	padding: 0 !important;
}

.lm-modo-una-fila .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar
{
	display: none;
}

.lm-modo-una-fila .woocommerce-product-gallery .flex-control-thumbs li
{
	float: none !important;
	/* Caben exactamente las que se piden: ancho = (100% - huecos) / cuántas por fila. */
	flex: 0 0 calc((100% - (var(--lm-por-fila, 4) - 1) * var(--lm-separacion, 6px)) / var(--lm-por-fila, 4)) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lm-modo-una-fila .woocommerce-product-gallery .flex-control-thumbs li img
{
	display: block !important;
	height: auto !important;
}

/* Flechas sobre la imagen grande */

/*
 * Mientras el guion no las ha movido dentro de la galería (por ejemplo, en la vista de diseño si el
 * guion aún no ha corrido), se colocan sobre el propio widget. Así se ven siempre.
 */

.elementor-widget-lm-imagenes-de-producto
{
	position: relative;
}

.lm-galeria .lm-galeria__flechas--imagen
{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.woocommerce-product-gallery .lm-galeria__flechas--imagen
{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.woocommerce-product-gallery .lm-galeria__flechas--imagen .lm-galeria__flecha:first-child
{
	margin-left: 8px;
}

.woocommerce-product-gallery .lm-galeria__flechas--imagen .lm-galeria__flecha:last-child
{
	margin-right: 8px;
}

/* Botones */

.lm-galeria__flecha
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lm-flecha-tamano, 40px);
	height: var(--lm-flecha-tamano, 40px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lm-flecha-fondo);
	color: var(--lm-flecha-color);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.15s ease, transform 0.15s ease;
}

.lm-galeria__flecha:hover,
.lm-galeria__flecha:focus-visible
{
	transform: scale(1.06);
}

.lm-galeria__flecha:focus-visible
{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Fila de miniaturas con sus dos flechas */

.lm-galeria__fila-miniaturas
{
	display: flex;
	align-items: center;
	gap: 6px;
}

.lm-galeria__fila-miniaturas .lm-galeria__flecha
{
	--lm-flecha-tamano: 30px;
	flex: 0 0 auto;
	font-size: 15px;
}

.lm-galeria__fila-miniaturas .flex-control-thumbs
{
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

@media (max-width: 767px)
{
	.lm-galeria,
	.lm-galeria__flechas
	{
		--lm-flecha-tamano: 34px;
	}

	.lm-modo-cuadricula .woocommerce-product-gallery .flex-control-thumbs
	{
		grid-template-columns: repeat(min(var(--lm-columnas, 6), 4), 1fr) !important;
	}
}