/* ==========================================================================
   BW3D - Galeria de la ficha de producto

   Woo imprime las miniaturas como <ol class="flex-control-thumbs"> DEBAJO de la
   imagen principal, con los <li> flotados al 25% (clase --columns-4) y sin
   separacion (el widget de Elementor les fuerza padding 0).

   Aca se pasan a un riel vertical angosto a la IZQUIERDA, con 10px de aire
   entre miniaturas y contra la imagen principal.

   OJO con la especificidad: el widget de Elementor trae
     body.woocommerce div.product .elementor-widget-woocommerce-product-images div.images
   que es (0,4,3) y pisa el padding de la galeria. Por eso todos los selectores
   de abajo incluyen .elementor-widget-woocommerce-product-images: quedan en
   (0,5,2) y ganan sin depender del orden de carga (LiteSpeed recombina CSS).
   ========================================================================== */

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery {
	--bw-thumb-rail: 72px;
	--bw-thumb-gap: 10px;

	position: relative;
	padding-left: calc(var(--bw-thumb-rail) + var(--bw-thumb-gap));
}

/* top/bottom:0 hace que el riel mida exactamente lo que la imagen principal.
   Si hay mas miniaturas de las que entran, scrollea en lugar de estirar la
   galeria (hay productos con 9 imagenes). */
.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--bw-thumb-rail);
	display: flex;
	flex-direction: column;
	gap: var(--bw-thumb-gap);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--hairline-l) transparent;
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	width: 3px;
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
	background: var(--hairline-l);
	border-radius: var(--r-pill);
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs li {
	float: none;
	clear: none;
	width: 100%;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--hairline-l);
	border-radius: var(--r-md);
	opacity: .55;
	cursor: pointer;
	transition: opacity .25s var(--eo), border-color .25s var(--eo);
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
}

.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--red);
}

/* La imagen principal ocupa el ancho que deja el riel. */
.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	width: 100%;
	margin: 0;
}

/* Mobile: el riel vuelve abajo, horizontal y scrolleable, con el mismo aire.
   A ese ancho una columna lateral se come la imagen principal. */
@media (max-width: 767px) {

	.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery {
		padding-left: 0;
	}

	.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs {
		position: static;
		width: auto;
		flex-direction: row;
		margin-top: var(--bw-thumb-gap);
		overflow-x: auto;
		overflow-y: hidden;
	}

	.woocommerce div.product .elementor-widget-woocommerce-product-images div.images.woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 64px;
	}
}