/**
 * Innova Products - Product gallery thumbnail slider.
 * Restyles FlexSlider's control-nav thumbnails into a horizontal strip + arrows.
 * !important is used on layout props to beat WooCommerce/theme gallery defaults.
 */

.ipi-thumbs-slider {
	position: relative;
}

/* Thumbnail strip → single scrollable row.
   Not scoped to .woocommerce-product-gallery: Oxygen may use a different wrapper,
   and these assets already load on single-product pages only. */
.flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	margin: 14px 0 0 !important;
	padding: 0;
	list-style: none;
	-ms-overflow-style: none; /* IE/Edge */
	scrollbar-width: none;    /* Firefox */
}

.flex-control-thumbs::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.flex-control-thumbs li {
	flex: 0 0 auto !important;
	float: none !important;
	width: 32% !important;      /* ~3 visibles; scrolleás el resto */
	max-width: 160px;
	min-width: 110px;
	margin: 0 !important;
}

.flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	border-radius: 6px;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active {
	opacity: 1;
}

/* Arrows (injected by gallery.js).
 *
 * El aspecto de acá (45px, borde gris, fondo #EEE, sin sombra) vivía hasta la
 * 1.13.1 en la hoja global de Oxygen. Junto con el aspecto, esa hoja redefinía
 * `is-hidden` a `opacity: 0.3`, y `is-hidden` es justamente el mecanismo con el
 * que este archivo hace desaparecer la flecha. El efecto era que las flechas no
 * se iban nunca: quedaban al 30 por ciento, visibles y muertas al mismo tiempo,
 * porque el `pointer-events: none` de más abajo sí seguía aplicando.
 *
 * ⚠️ Oxygen encola su universal.css DESPUÉS de esta hoja (posición 16 contra 10
 * en la ficha), así que ante igual especificidad gana Oxygen. Si alguien vuelve
 * a estilar `.ipi-thumbs-arrow` desde el builder, vuelve a ganar y este archivo
 * deja de mandar sin ningún síntoma. El aspecto de la flecha se toca ACÁ.
 */
.ipi-thumbs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 45px;
	height: 45px;
	padding: 0;
	border: 1px solid #666;
	border-radius: 50%;
	background: #eee;
	color: #18181b;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	visibility: visible;
	transition: opacity 0.15s ease, transform 0.12s ease, visibility 0s;
}

/* El chevron: un cuadrado sin dos de sus lados, girado 45 grados. Se dibuja
   así y no con un caracter de texto porque el grosor, el tamaño y el ángulo
   quedan bajo control y no cambian con la tipografía del tema. */
.ipi-thumbs-arrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

/* El desplazamiento de 2px compensa que el chevron, al girar, deja su peso
   visual corrido hacia un lado y no queda centrado en el círculo. */
.ipi-thumbs-arrow--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.ipi-thumbs-arrow--next::before {
	transform: translateX(-2px) rotate(45deg);
}

.ipi-thumbs-arrow:hover {
	transform: translateY(-50%);
}

/* Los -22px sacan la flecha del borde de la tira. Con el botón de 45px, los
 * -8px de la versión anterior la dejaban montada sobre la primera miniatura.
 * Este valor y el de arriba también venían de la hoja global de Oxygen: se
 * mudaron acá enteros, porque migrar la mitad de un bloque deja el aspecto a
 * medio camino el día que se borre lo que queda allá. */
.ipi-thumbs-arrow--prev {
	left: -22px;
}

.ipi-thumbs-arrow--next {
	right: -22px;
}

/* Hide arrows when there's nothing to scroll or at an edge.
 *
 * Va `visibility: hidden` y no solo `opacity: 0`. Con opacity sola la flecha
 * desaparece de la vista y del mouse, pero sigue estando en el orden del
 * tabulador y en el árbol de accesibilidad: el teclado se paraba en dos botones
 * invisibles que no hacían nada. Medido en Chrome sobre 39 combinaciones de
 * producto y ancho de ventana, las dos flechas quedaban alcanzables con Tab en
 * todas, incluso en los productos de 2 fotos donde no hacen falta nunca.
 *
 * El retardo en visibility existe para que la flecha se desvanezca ANTES de
 * desaparecer. Al volver a mostrarse no lleva retardo, así que aparece de una y
 * después funde. Sin el retardo, al ocultarse se cortaría de golpe.
 */
.ipi-thumbs-slider:not(.has-overflow) .ipi-thumbs-arrow,
.ipi-thumbs-arrow.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.12s ease, visibility 0s linear 0.15s;
}

/* El diseño pide 150px de miniatura con 10px entre ellas, pero "flex: 0 0
   150px" de acá NO es lo que fija ese ancho: pierde contra "flex: 0 0 auto
   !important" de la regla de arriba (un !important gana pase lo que pase por
   especificidad). El ancho real lo terminan poniendo "width: 32% !important"
   y "min-width: 110px" de esa misma regla de arriba, acotados por el
   "max-width: 150px" de acá, que sí gana porque el selector es más específico
   que el "max-width: 160px" de arriba. El resultado es clamp(110px, 32%,
   150px), y coincide con el diseño en desktop por el techo de 150px, no
   porque "flex: 0 0 150px" se esté aplicando. No se toca: forzarlo con
   !important cambiaría también el ancho en mobile sin poder verificarlo acá. */
.ipi-thumbs-slider .flex-control-thumbs {
	gap: 10px;
}

.ipi-thumbs-slider .flex-control-thumbs li {
	flex: 0 0 150px;
	max-width: 150px;
}

/* Las fotos vienen sobre blanco y la sección es gris, así que el recuadro se
   pinta blanco para que la foto no flote. Mismo criterio que la card de la
   grilla. */
.woocommerce-product-gallery__image,
.ipi-thumbs-slider .flex-control-thumbs li img {
	background: #fff;
}

/* En un teléfono las flechas TAMBIÉN se ven (1.45.3, pedido de Leandro). Antes
   se escondían, con el argumento de que la tira se desliza con el dedo: el
   problema es que sin nada a la vista no hay forma de saber que hay más fotos,
   y la ficha era la única pantalla sin flechas mientras el carrusel de "también
   te puede interesar", justo debajo, sí las tiene.

   Afuera de la tira no entran (en el teléfono ocupa el ancho de la pantalla),
   así que van adentro, sobre el borde de la primera y la última miniatura, y un
   poco más chicas. Siguen escondiéndose solas en cada extremo, igual que en
   desktop, así que nunca quedan dos flechas muertas. */
@media ( max-width: 768px ) {
	/* Las flechas van ENCIMA de las miniaturas, montadas sobre el borde de la
	   primera y la última. La tira no les hace hueco: se probó con un padding
	   de 42px a cada lado y el diseño no es ese (28/09/2026, Leandro). Lo que
	   se arregló del arrastre no depende de esto: la tira dejó de acomodarse
	   sola mientras la arrastran, y eso vive en gallery.js. */
	.ipi-thumbs-arrow {
		width: 38px;
		height: 38px;
	}

	.ipi-thumbs-arrow--prev {
		left: 2px;
	}

	.ipi-thumbs-arrow--next {
		right: 2px;
	}
}