/*
 * Mobile product-layout pilot.
 * Desktop is intentionally outside this file's scope twice: the enqueue media
 * attribute and this media query both stop applying at 901px.
 */
@media (max-width: 900px) {
	body.single-product.ks-mobile-product-layout-active .summary > :is(
		.ks-v1-pilot-media-column,
		.woocommerce-product-gallery
	) {
		box-sizing: border-box;
		clear: both;
		float: none !important;
		margin: 18px 0 22px !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.single-product.ks-mobile-product-layout-active .summary > .ks-v1-pilot-media-column > .woocommerce-product-gallery,
	body.single-product.ks-mobile-product-layout-active .summary > .woocommerce-product-gallery {
		box-sizing: border-box;
		clear: both;
		float: none !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/*
	 * FlexSlider writes the natural image height inline. Give every level of the
	 * visible stage an explicit height so object-fit: contain can never be
	 * clipped by the shorter viewport.
	 */
	body.single-product.ks-mobile-product-layout-active .summary .woocommerce-product-gallery {
		--ks-mobile-product-gallery-stage-height: var(
			--ks-pilot-gallery-stage-height,
			clamp(300px, 82vw, 400px)
		);
	}

	body.single-product.ks-mobile-product-layout-active .summary :is(
		.ks-product-gallery-stage,
		.ks-product-gallery-stage > .flex-viewport
	) {
		height: var(--ks-mobile-product-gallery-stage-height) !important;
		min-height: var(--ks-mobile-product-gallery-stage-height) !important;
		overflow: hidden !important;
	}

	body.single-product.ks-mobile-product-layout-active .summary .ks-product-gallery-stage > .flex-viewport > .woocommerce-product-gallery__wrapper,
	body.single-product.ks-mobile-product-layout-active .summary .ks-product-gallery-stage > .woocommerce-product-gallery__wrapper,
	body.single-product.ks-mobile-product-layout-active .summary .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product.ks-mobile-product-layout-active .summary .woocommerce-product-gallery__image > a {
		height: 100% !important;
		min-height: 0 !important;
	}

	body.single-product.ks-mobile-product-layout-active .summary .woocommerce-product-gallery__image img {
		display: block;
		height: 100% !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center !important;
		width: 100% !important;
	}

	body.single-product.ks-mobile-product-layout-active div.product > .ks-mobile-product-layout-facts {
		box-sizing: border-box;
		clear: both;
		display: grid !important;
		gap: 10px;
		margin: 16px 0 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.single-product.ks-mobile-product-layout-active div.product > .ks-mobile-product-layout-facts .ks-v1-gallery-key-facts {
		box-sizing: border-box;
		margin: 0;
		width: 100%;
	}
}