/**
 * Medina Product Image — galeria vertical estilo Conters.
 *
 * Solo se aplica cuando el body lleva la clase `mpi-gallery` (ajuste activo).
 *
 * 1) Oculta los hijos duplicados que algunos temas o constructores renderizan
 *    dentro de la misma galeria (segundo trigger, segundo viewport y segunda
 *    lista de miniaturas).
 * 2) En escritorio: miniaturas en columna vertical a la izquierda con scroll,
 *    imagen principal a la derecha. El JS de WooCommerce (sync, zoom,
 *    lightbox) sigue funcionando porque no se toca el markup.
 * 3) En movil: se respeta el layout nativo (miniaturas horizontales debajo).
 */

/* ------------------------------------------------------------------ */
/* 1) Hijos duplicados: solo el primero de cada uno sobrevive.        */
/* ------------------------------------------------------------------ */
body.mpi-gallery .woocommerce-product-gallery > a.woocommerce-product-gallery__trigger ~ a.woocommerce-product-gallery__trigger,
body.mpi-gallery .woocommerce-product-gallery > div.flex-viewport ~ div.flex-viewport,
body.mpi-gallery .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs ~ ol.flex-control-nav.flex-control-thumbs {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 2) Tira vertical de miniaturas (solo escritorio).                   */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
	body.mpi-gallery .woocommerce-product-gallery {
		position: relative;
	}

	body.mpi-gallery .woocommerce-product-gallery .flex-viewport {
		margin-left: calc(var(--mpi-thumb-width, 110px) + 18px);
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
		position: absolute;
		left: 0;
		top: 0;
		width: var(--mpi-thumb-width, 110px);
		height: auto;
		max-height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 10px;
		margin: 0;
		padding: 0 6px 0 0;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		scrollbar-color: #c9c9c9 transparent;
		z-index: 5;
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-thumbs li,
	body.mpi-gallery .woocommerce div.product div.images .flex-control-thumbs li {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-thumbs li img {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 6px;
		border: 1px solid transparent;
		transition: border-color 0.15s ease;
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
		border-color: var(--mpi-active-border, #6a1b9a);
	}
}

/* ------------------------------------------------------------------ */
/* 3) Flechas de la imagen principal (todas las pantallas).            */
/* ------------------------------------------------------------------ */
body.mpi-gallery .woocommerce-product-gallery .flex-viewport {
	position: relative;
}

body.mpi-gallery .mpi-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: #333333;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body.mpi-gallery .woocommerce-product-gallery:hover .mpi-arrow {
	opacity: 1;
}

body.mpi-gallery .mpi-arrow:hover {
	background: #ffffff;
}

body.mpi-gallery .mpi-arrow:focus-visible {
	outline: 2px solid var(--mpi-active-border, #6a1b9a);
	outline-offset: 2px;
	opacity: 1;
}

body.mpi-gallery .mpi-arrow--prev {
	left: 12px;
}

body.mpi-gallery .mpi-arrow--next {
	right: 12px;
}

body.mpi-gallery .mpi-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* En tactil no hay hover: siempre visibles. */
@media (hover: none) {
	body.mpi-gallery .mpi-arrow {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ */
/* 4) Movil: miniaturas en una sola fila con scroll horizontal.        */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		gap: 8px !important;
		margin: 12px 0 0 !important;
		padding: 0 0 6px !important;
		max-height: none !important;
		scrollbar-width: thin;
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-thumbs li,
	body.mpi-gallery .woocommerce div.product div.images .flex-control-thumbs li {
		flex: 0 0 72px !important;
		width: 72px !important;
		float: none !important;
		margin: 0 !important;
	}

	body.mpi-gallery .woocommerce-product-gallery ol.flex-control-thumbs li img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
}