/**
 * Product Gallery — Thumbnail layout overrides
 * Desktop: 2 per row, 310x310 squares (Figma Node: 25034:35694)
 * Mobile: 5 per row with 12px gap (Figma Node: 26677:41247)
 *
 * @see ClickUp Task: 86ewyqwvb
 */

/* ========================================
   DESKTOP (≥1000px) — narrow gallery column
   Blocksy default is 50%; override to 46%.
   Same breakpoint Blocksy uses for the var.
   ======================================== */

@media (min-width: 1000px) {
	.single-product .ct-default-gallery,
	.single-product .ct-stacked-gallery,
	.ct-default-gallery,
	.ct-stacked-gallery {
		--product-gallery-width: 46%;
	}
}

/* ========================================
   DESKTOP — 2 thumbnails per row, 310x310 squares
   object-fit: contain so images aren't cropped
   ======================================== */

@media (min-width: 690px) {
	.single-product .woocommerce-product-gallery .flexy-pills ol {
		gap: 16px;
		margin-top: 16px;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.single-product .woocommerce-product-gallery .flexy-pills ol li {
		flex: 0 0 calc((100% - 16px) / 2) !important;
		width: calc((100% - 16px) / 2) !important;
		max-width: 310px;
		padding: 0 !important;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.single-product .woocommerce-product-gallery .flexy-pills ol li img,
	.single-product .woocommerce-product-gallery .flexy-pills ol li .ct-media-container img {
		width: 100%;
		height: 100%;
		object-fit: contain !important;
	}

	/* Remove active thumbnail border */
	.single-product .woocommerce-product-gallery .flexy-pills ol li.active .ct-media-container:after {
		border-color: transparent !important;
	}
}

/* ========================================
   MOBILE — 5 thumbnails per row, 12px gap
   ======================================== */

@media (max-width: 689px) {
	.single-product .woocommerce-product-gallery .flexy-pills ol {
		gap: 12px;
		margin-top: 12px;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.single-product .woocommerce-product-gallery .flexy-pills ol li {
		flex: 0 0 calc((100% - 48px) / 5) !important;
		width: calc((100% - 48px) / 5) !important;
		padding: 0 !important;
	}
}