/**
 * Horizontal thumbnail scroll strip for native WooCommerce gallery inside .bwvi-native-variation-gallery
 */

/* ── Main image: cap at 600 px, contain within slide ── */

/*
 * Flexslider sets inline height on .flex-viewport (often ~full image height at slide width).
 * height:auto !important + max-height beats that so the box matches contained images.
 */
.bwvi-native-variation-gallery .woocommerce-product-gallery .flex-viewport {
	max-height: var(--bwvi-main-max-height, 600px) !important;
	height: auto !important;
	overflow: hidden !important;
}

.bwvi-native-variation-gallery .woocommerce-product-gallery .flexslider .slides > li,
.bwvi-native-variation-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.bwvi-native-variation-gallery .woocommerce-product-gallery__image {
	max-height: var(--bwvi-main-max-height, 600px) !important;
	height: auto !important;
	min-height: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.bwvi-native-variation-gallery .woocommerce-product-gallery__image a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	max-height: var(--bwvi-main-max-height, 600px);
	width: 100%;
}

.bwvi-native-variation-gallery .woocommerce-product-gallery .flex-viewport img,
.bwvi-native-variation-gallery .woocommerce-product-gallery__wrapper img,
.bwvi-native-variation-gallery .woocommerce-product-gallery__image img,
.bwvi-native-variation-gallery .woocommerce-product-gallery .flexslider .slides img {
	display: block;
	max-width: 100% !important;
	max-height: var(--bwvi-main-max-height, 600px) !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center center !important;
}

.bwvi-native-variation-gallery .bwvi-thumb-scroller {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	margin-top: 0.75rem;
}

/*
 * Scroll the track, not the ol: a flex row ol with width:100% often grows to content
 * (min-width:auto), so scrollWidth === clientWidth and scrollLeft never moves.
 */
.bwvi-native-variation-gallery .bwvi-thumb-track {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.bwvi-native-variation-gallery .bwvi-thumb-track::-webkit-scrollbar {
	height: 6px;
}

.bwvi-native-variation-gallery .bwvi-thumb-track::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 3px;
}

.bwvi-native-variation-gallery .bwvi-thumb-track ol.flex-control-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	float: none !important;
	width: max-content !important;
	max-width: none !important;
	min-width: min-content;
	margin: 0 !important;
	padding: 0.25rem 0 !important;
	list-style: none !important;
	overflow: visible;
	gap: var(--bwvi-thumb-gap, 10px);
}

.bwvi-native-variation-gallery .bwvi-thumb-track ol.flex-control-thumbs li {
	float: none !important;
	width: var(--bwvi-thumb-width, 150px) !important;
	min-width: var(--bwvi-thumb-width, 150px) !important;
	max-width: var(--bwvi-thumb-width, 150px) !important;
	height: var(--bwvi-thumb-height, 150px) !important;
	min-height: var(--bwvi-thumb-height, 150px) !important;
	max-height: var(--bwvi-thumb-height, 150px) !important;
	flex: 0 0 var(--bwvi-thumb-width, 150px) !important;
	margin: 0 !important;
	overflow: hidden;
}

.bwvi-native-variation-gallery .bwvi-thumb-track ol.flex-control-thumbs li img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center center;
}