/**
 * Frontend styles for WPC Additional Variation Images.
 *
 * WooCommerce styles the FlexSlider thumbnail strip only under
 * `.woocommerce div.product div.images`. Themes that render their own product
 * gallery (e.g. Blocksy) do not output that wrapper, so the fallback strip built
 * by assets/js/frontend.js would be laid out unstyled: thumbnails would show at
 * full size, or stacked one per row.
 *
 * These rules restore the standard thumbnail strip appearance for the fallback
 * galleries only. They are scoped to `.wpcvi-has-thumbnail-strip`, which the JS
 * adds when -- and only when -- it has to build the strip itself, so galleries
 * handled by FlexSlider or by the theme are never affected.
 */

.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .woocommerce-product-gallery__wrapper {
	position: relative;
}

.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	overflow: visible;
}

.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: relative;
	line-height: 0;
}

.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li img {
	display: block;
	width: 72px;
	height: 72px;
	max-width: 100%;
	margin: 0;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease-in-out;
}

/* Highlight the active thumbnail without relying on the theme's text colour. */
.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li img:hover,
.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li img.flex-active-slide {
	opacity: 1;
}

.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li img.flex-active-slide {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.woocommerce-product-gallery.wpcvi-has-thumbnail-strip .flex-control-thumbs li img {
		width: 56px;
		height: 56px;
	}
}