/* Product gallery: up to 5 thumbnails stacked vertically on the left of the main image, no thumbnail scrolling or arrows. */
.woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery .flex-control-nav .flex-prev,
.woocommerce-product-gallery .flex-control-nav .flex-next { display: none !important; }

@media (min-width: 768px) {
	.woocommerce div.product div.images.woocommerce-product-gallery {
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px;
		position: relative;
	}
	.woocommerce div.product div.images .flex-viewport,
	.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { flex: 1 1 0; min-width: 0; width: auto; order: 2; }
	.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
	.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper img { width: 100%; }
	.woocommerce div.product div.images .flex-control-thumbs {
		order: 1;
		flex: 0 0 76px;
		width: 76px !important;
		display: flex !important;
		flex-direction: column;
		gap: 8px;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		max-height: none !important;
		transform: none !important;
	}
	.woocommerce div.product div.images .flex-control-thumbs li {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}
	.woocommerce div.product div.images .flex-control-thumbs li:nth-child(n+6) { display: none !important; }
	.woocommerce div.product div.images .flex-control-thumbs img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: contain;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		opacity: .8;
		cursor: pointer;
	}
	.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
	.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--nxc-accent, #29527D); }
	.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 3; }
}
/* Phone / small tablet: photo first, then a scrolling row of thumbnails, then the media buttons. */
@media (max-width: 767px) {
	.woocommerce div.product div.images.woocommerce-product-gallery { display: flex !important; flex-direction: column; gap: 10px; }
	.woocommerce div.product div.images .flex-viewport,
	.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { order: 1; }
	.woocommerce div.product div.images .flex-control-thumbs {
		order: 2; display: flex !important; gap: 8px; overflow-x: auto; margin: 0 !important; padding: 0 !important; scrollbar-width: none;
	}
	.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }
	.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 60px; width: 60px !important; float: none !important; margin: 0 !important; list-style: none; }
	.woocommerce div.product div.images .flex-control-thumbs img { border: 1px solid #E3E8EF; border-radius: 8px; opacity: .8; aspect-ratio: 1; object-fit: contain; background: #fff; }
	.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--nxc-accent, #29527D); }
	.woocommerce div.product div.images .nxc-media { order: 3; margin-top: 4px; }
}

/* Astra Pro gallery (.ast-single-product-thumbnails carousel + main .flex-viewport):
   thumbnails as a fixed column on the LEFT, max 5 (the theme passes at most 5 images), no carousel movement. */
@media (min-width: 768px) {
	.woocommerce div.product div.images.woocommerce-product-gallery > .ast-single-product-thumbnails {
		order: 1 !important; flex: 0 0 76px !important; width: 76px !important; max-width: 76px !important;
		position: static !important; float: none !important; margin: 0 !important; padding: 0 !important;
	}
	.woocommerce div.product div.images.woocommerce-product-gallery > .flex-viewport { order: 2 !important; }
	.woocommerce div.product div.images .ast-single-product-thumbnails .flex-viewport { height: auto !important; overflow: visible !important; }
	.woocommerce div.product div.images .ast-single-product-thumbnails .woocommerce-product-gallery-thumbnails__wrapper {
		display: flex !important; flex-direction: column; gap: 8px; width: 100% !important; height: auto !important;
		transform: none !important; transition: none !important; position: static !important;
	}
	.woocommerce div.product div.images .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image {
		width: 100% !important; float: none !important; margin: 0 !important; position: relative; cursor: pointer;
	}
	.woocommerce div.product div.images .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image:nth-child(n+6) { display: none !important; }
	.woocommerce div.product div.images .ast-single-product-thumbnails img {
		display: block; width: 100% !important; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff;
		border: 1px solid #e5e7eb; border-radius: 10px; opacity: .8;
	}
	.woocommerce div.product div.images .ast-single-product-thumbnails .flex-active-slide img,
	.woocommerce div.product div.images .ast-single-product-thumbnails img:hover { opacity: 1; border-color: var(--nxc-accent, #29527D); }
}
@media (max-width: 767px) {
	.woocommerce div.product div.images.woocommerce-product-gallery > .flex-viewport { order: 1 !important; }
	.woocommerce div.product div.images.woocommerce-product-gallery > .ast-single-product-thumbnails { order: 2 !important; width: 100% !important; position: static !important; float: none !important; margin: 0 !important; }
	/* The Product Importer's front.css sets the thumbnails to a column with !important (desktop design), so every rule here needs !important. */
	.woocommerce div.product div.images .ast-single-product-thumbnails .flex-viewport { height: auto !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
	.woocommerce div.product div.images .ast-single-product-thumbnails .woocommerce-product-gallery-thumbnails__wrapper {
		display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px; width: max-content !important; height: auto !important;
		transform: none !important; position: static !important;
	}
	.woocommerce div.product div.images .ast-single-product-thumbnails .ast-woocommerce-product-gallery__image { display: block !important; flex: 0 0 60px !important; width: 60px !important; height: auto !important; float: none !important; margin: 0 !important; }
	.woocommerce div.product div.images .ast-single-product-thumbnails img { border: 1px solid #E3E8EF; border-radius: 8px; aspect-ratio: 1; object-fit: contain; background: #fff; }
	.woocommerce div.product div.images .ast-single-product-thumbnails .flex-active-slide img { border-color: var(--nxc-accent, #29527D); }
}