/* WooCommerce product gallery (zoom + thumbnail slider).
   Mystile disables WooCommerce's own CSS, so this is the minimum needed. */

.single-product .woocommerce-product-gallery {
	position: relative;
	margin-bottom: 20px;
}

.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
}

.single-product .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
}

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

.single-product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 8px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	float: left;
	width: calc((100% - 24px) / 4);
	margin: 0 8px 0 0;
	padding: 0;
	list-style: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n) {
	margin-right: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n+1) {
	clear: left;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
}

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

/* Let clicks reach the image link underneath so Responsive Lightbox opens. */
.single-product .woocommerce-product-gallery img.zoomImg {
	max-width: none;
	width: auto;
	background: #fff;
	pointer-events: none;
}