/**
 * JezPress Woo Gallery — frontend styles.
 *
 * @package JezPress\WooGallery
 * @since   2.0.0
 */

.jwg-product-gallery {
	/*
	 * `--jwg-thumb-gap` controls the horizontal space between thumbnails
	 * in the navigation strip. Override it from a child theme:
	 *   .jwg-product-gallery { --jwg-thumb-gap: 10px; }
	 */
	--jwg-thumb-gap: 5px;
	clear: both;
	margin-bottom: 30px;
}

.jwg-product-gallery .jwg-slider-img,
.jwg-product-gallery .jwg-slider-nav-img {
	display: block;
	width: 100%;
	height: auto;
}

.jwg-product-gallery .jwg-slider-nav {
	margin-top: 10px;
}

/*
 * Slick thumbnail spacing. The Slick pattern is to put margin on each
 * slide, then a matching negative margin on the list so the outer edges
 * still align with the container. Slick measures slide widths from the
 * list's inner box, so this doesn't break its slidesToShow math.
 */
.jwg-product-gallery .jwg-slider-nav .slick-list {
	margin-left: calc( var( --jwg-thumb-gap ) * -1 );
	margin-right: calc( var( --jwg-thumb-gap ) * -1 );
}

.jwg-product-gallery .jwg-slider-nav .slick-slide {
	margin-left: var( --jwg-thumb-gap );
	margin-right: var( --jwg-thumb-gap );
}

.jwg-product-gallery .jwg-single-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 767px) {
	.jwg-product-gallery {
		float: none;
		width: auto;
	}
}