/*
|--------------------------------------------------------------------------
| NM WooCommerce Product Gallery
|--------------------------------------------------------------------------
|
| Stable presentation layer for WooCommerce's legacy Product Image Gallery.
|
| WooCommerce / FlexSlider continue to provide the gallery behaviour.
| NM owns the layout so it remains correct across persistent page
| transitions as well as traditional page loads.
|
*/


.wp-block-woocommerce-product-image-gallery {
	width: 100%;
	min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/

.woocommerce-product-gallery {
	position: relative;

	width: 100%;
	margin: 0;

	opacity: 1 !important;
}


.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;

	list-style: none;
}


.woocommerce-product-gallery__image {
	margin: 0;
}


.woocommerce-product-gallery__image a {
	display: block;
}


.woocommerce-product-gallery__image img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	box-shadow: none;
}


/*
|--------------------------------------------------------------------------
| FlexSlider viewport
|--------------------------------------------------------------------------
*/

.woocommerce-product-gallery .flex-viewport {
	width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;
}


.woocommerce-product-gallery .flex-viewport
.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}


/*
|--------------------------------------------------------------------------
| Thumbnail navigation
|--------------------------------------------------------------------------
*/

.woocommerce-product-gallery ol.flex-control-nav,
.woocommerce-product-gallery ol.flex-control-thumbs {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;

	width: 100%;

	margin: 12px 0 0;
	padding: 0;

	list-style: none;
}


.woocommerce-product-gallery
.flex-control-thumbs li {
	float: none;

	width: auto;

	margin: 0;
	padding: 0;

	list-style: none;
}


.woocommerce-product-gallery
.flex-control-thumbs li::marker {
	content: "";
}


.woocommerce-product-gallery
.flex-control-thumbs img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	opacity: 0.48;

	cursor: pointer;

	transition: opacity 150ms ease;
}


.woocommerce-product-gallery
.flex-control-thumbs img:hover,
.woocommerce-product-gallery
.flex-control-thumbs img.flex-active {
	opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Gallery trigger
|--------------------------------------------------------------------------
*/

.woocommerce-product-gallery__trigger {
	position: absolute;

	top: 12px;
	right: 12px;

	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Defensive pre-initialisation state
|--------------------------------------------------------------------------
|
| Before FlexSlider hydrates, Woo outputs all gallery images one after
| another. Keep that brief state controlled instead of allowing the page
| layout to explode.
|
*/

.woocommerce-product-gallery:not(.flexslider)
.woocommerce-product-gallery__wrapper
> .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

	.woocommerce-product-gallery ol.flex-control-nav,
	.woocommerce-product-gallery ol.flex-control-thumbs {
		gap: 7px;

		margin-top: 8px;
	}

}