/* Keep the product gallery's square footprint stable while its controls start. */
body.single-product .woocommerce-product-gallery {
	overflow: hidden;
}

/* FlexSlider briefly assigns a 1600% wrapper width before it floats the
 * individual slides. Laying out the server-rendered direct children in one row
 * avoids a one-frame 12,000px-tall gallery. Once FlexSlider adds its viewport,
 * these direct-child selectors stop applying and its normal controls take over. */
body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery .flex-viewport:not([style*="height:"]) > .woocommerce-product-gallery__wrapper {
	display: flex;
	width: 100% !important;
}

body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery .flex-viewport:not([style*="height:"]) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	display: block;
	flex: 0 0 100%;
	min-width: 100%;
}

body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image:first-child,
body.single-product .woocommerce-product-gallery__image:first-child > a {
	display: block;
	min-width: 0;
}

body.single-product .woocommerce-product-gallery__image:first-child > a {
	aspect-ratio: 1 / 1;
}

body.single-product .woocommerce-product-gallery__image:first-child img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	width: 100%;
}

/* Related items should never inherit a negative carousel offset on mobile. */
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products {
	box-sizing: border-box;
	left: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100%;
	transform: none !important;
	width: 100% !important;
}

@media (max-width: 767px) {
	/* The desktop product template reserves 100px above the gallery. On mobile
	 * the fixed header already has its own exact offset, so start the image at
	 * the content edge. */
	body.single-product.woocommerce div.product {
		padding-top: 0;
	}

	body.single-product .related.products,
	body.single-product .upsells.products {
		overflow: hidden;
		padding-left: 10px;
		padding-right: 10px;
	}

	body.single-product .related.products ul.products,
	body.single-product .upsells.products ul.products {
		display: grid !important;
		gap: 28px 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto !important;
		position: static !important;
	}

	/* WooCommerce clearfix pseudo-elements become grid children. Without this
	 * reset, ::before occupies column one and the first real recommendation is
	 * incorrectly placed in column two. */
	body.single-product .related.products ul.products::before,
	body.single-product .related.products ul.products::after,
	body.single-product .upsells.products ul.products::before,
	body.single-product .upsells.products ul.products::after {
		content: none !important;
		display: none !important;
	}

	body.single-product .related.products ul.products > li.product,
	body.single-product .upsells.products ul.products > li.product {
		float: none !important;
		left: auto !important;
		margin: 0 !important;
		min-width: 0;
		/* Keep absolutely positioned sale/out-of-stock labels anchored to their
		 * own card instead of the page when the theme carousel is replaced. */
		position: relative !important;
		top: auto !important;
		transform: none !important;
		width: auto !important;
	}
}