/**
 * Product gallery — the in-page swipe strip (mobile/tablet only).
 *
 * THIS MUST STAY A SEPARATE FILE WITH THIS BASENAME.
 * inc/product-gallery-lite.php excludes it from WP Rocket's Remove Unused CSS
 * via `rocket_rucss_external_exclusions`, the same arrangement amm-menu.css
 * needs. These rules were originally inline in wp_head and RUCSS emptied the
 * <style> block outright — the gallery kept the old stacked-thumbnail layout
 * and the swipe silently did not exist. Inline is not an option here.
 *
 * Desktop is deliberately untouched: it keeps the main image plus the wrapping
 * 75px thumbnail grid it always had.
 *
 * The !importants override WC's own `__image:nth-child(n+2){width:25%}`, the
 * theme's `{width:75px;max-width:75px}` thumbnails and its `img{max-width:50px}`
 * — some of which are themselves !important. Slide height comes from
 * aspect-ratio rather than a viewport unit so the strip cannot jolt as images
 * decode.
 */

@media (max-width: 991px) {
	.single-product .woocommerce-product-gallery {
		position: relative;
	}

	.single-product .woocommerce-product-gallery__wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* The theme animates `all` on this element for half a second. With the
		   wrapper now being the scroller, that animates the scrolling too. */
		transition: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.single-product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child,
	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box;
		display: flex !important;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1 / 1;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		/* pan-y has to stay listed or touching the gallery stops scrolling the
		   page vertically; pinch-zoom keeps the browser's own zoom available. */
		touch-action: pan-x pan-y pinch-zoom;
	}

	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img,
	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain;
		margin: 0 auto;
	}

	.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
}