/* Single product gallery, modernized layout.
 *
 * The class .wcg-gallery-modernized is added by gallery.js to every
 * .woocommerce-product-gallery element. All rules below are scoped under
 * that class so nothing changes unless the script actually finds and
 * initializes a gallery.
 */

/* Disable the FlexSlider viewport clipping/height so all slides can be
 * shown at once instead of one at a time. */
.wcg-gallery-modernized .flex-viewport {
	height: auto !important;
	overflow: visible !important;
    margin-bottom: 16px;
}

/* Turn the slide track into a static 2-column grid. The !important on
 * transform/width is needed because WooCommerce's FlexSlider script sets
 * those as inline styles for the sliding animation - this cancels it out
 * even if the script still tries to run. */
.wcg-gallery-modernized .woocommerce-product-gallery__wrapper {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	width: 100% !important;
	transform: none !important;
	transition: none !important;
}

.wcg-gallery-modernized .woocommerce-product-gallery__image {
	/* relative + hidden overflow keeps WooCommerce's native hover-zoom
	 * preview (.zoomImg, positioned absolutely by its own script) clipped
	 * inside this tile instead of escaping and covering the whole page. */
	position: relative !important;
	overflow: hidden !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* If there's an odd number of visible images (e.g. 3), let the last one
 * span both columns instead of leaving an empty gap. */
/*.wcg-gallery-modernized .woocommerce-product-gallery__image:nth-child( odd ):last-child {
	grid-column: span 2;
}*/

/* Only the first 4 images are shown in the grid; the rest stay reachable
 * through the thumbnail strip below. */
.wcg-gallery-modernized .woocommerce-product-gallery__image:nth-child( n + 5 ) {
	display: none !important;
}

.wcg-gallery-modernized .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Thumbnail strip: WooCommerce always renders one <li> per image (ol.flex-
 * control-thumbs). We only want to show thumbnails for images BEYOND the
 * first 4 (those are already visible large in the grid above) - so the
 * whole strip stays hidden when there are 4 or fewer images total (handled
 * by the .wcg-has-extra-thumbs class, toggled in JS), and even when it is
 * shown, the first 4 individual thumbnails stay hidden via nth-child. */
.wcg-gallery-modernized .flex-control-thumbs {
	display: none;
}

.wcg-gallery-modernized.wcg-has-extra-thumbs .flex-control-thumbs {
  display: grid;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.wcg-gallery-modernized.wcg-has-extra-thumbs .flex-control-thumbs li:nth-child( -n + 4 ) {
	display: none;
}
/*woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images wcg-gallery-modernized wcg-has-extra-thumbs*/
.wp-block-woocommerce-product-image-gallery .wcg-gallery-modernized.wcg-has-extra-thumbs  .flex-control-thumbs li {
    width: 100% !important;
}

.wcg-gallery-modernized.wcg-has-extra-thumbs .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	opacity: 0.65;
	transition: opacity 150ms ease, border-color 150ms ease;
}

.wcg-gallery-modernized.wcg-has-extra-thumbs .flex-control-thumbs img:hover {
	opacity: 0.9;
}

.wcg-gallery-modernized.wcg-has-extra-thumbs .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: #111;
}
div.woocommerce .wp-block-woocommerce-product-image-gallery {
  clear: both;
  max-width: 100%;
  position: relative;
}