/* Standard Champagne product photography uses a portrait 3:4 canvas. */
.chmp-card__image {
	aspect-ratio: 3 / 4;
}

/* Native WooCommerce and Elementor product cards use the same portrait frame.
 * Contain preserves the full bottle if an older image has a different ratio. */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.elementor-widget-woocommerce-products img.attachment-woocommerce_thumbnail {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: transparent;
}

/* The featured image and every additional WooCommerce gallery slide share a
 * fixed frame. Contain keeps the cap, punt and labels visible in older images. */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery--vamtam__image {
	box-sizing: border-box;
	border: 1px solid rgba(24, 36, 43, .15);
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: transparent;
}

body.single-product .woocommerce-product-gallery__image > a,
body.single-product .woocommerce-product-gallery--vamtam__image > a {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
}

body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery--vamtam__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Native zoom must preserve the image alpha instead of adding a white backing. */
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img.zoomImg {
	background: transparent;
}

/* Gallery navigation thumbnails follow the same ratio without cropping. */
body.single-product .flex-control-thumbs li {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

body.single-product .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

/* Separate front-label, back-label and bottle-detail photos are not the main
 * bottle canvas. Give them an equal display frame but preserve their full image. */
.chmp-label-images__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: transparent;
}

.chmp-label-images__frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Keep the native single-product gallery beside the product information.
 * The image column bounds sticky movement before upsells and the footer.
 * Stacked mobile columns keep their existing normal scrolling behaviour. */
@media (min-width: 768px) {
	body.single-product [data-elementor-id="6170"] {
		--chmp-product-image-header-gap: 16px;
		--chmp-product-image-admin-height: 0px;
		--chmp-product-image-inner-top: 50px;
		--chmp-product-image-top: calc(var(--chmp-product-image-header-gap) + var(--chmp-product-image-admin-height));
	}

	body.single-product.admin-bar [data-elementor-id="6170"] {
		--chmp-product-image-admin-height: 32px;
	}

	body.single-product [data-elementor-id="6170"] .elementor-element-201eeaa > .elementor-widget-wrap > .elementor-element-82f2991 {
		position: sticky;
		top: var(--chmp-product-image-top);
		align-self: flex-start;
	}

	/* Remove the tablet gallery's negative margins so it stays in its column. */
	body.single-product [data-elementor-id="6170"] .elementor-element-82f2991 > .elementor-widget-container {
		margin: 0;
	}

	/* Limit width to fit the whole 3:4 bottle frame in shorter viewports.
	 * Keep native gallery sizing, lightbox and zoom; do not crop the image. */
	body.single-product [data-elementor-id="6170"] .elementor-element-82f2991 .woocommerce-product-gallery {
		max-width: min(100%, calc((100svh - var(--chmp-product-image-top) - var(--chmp-product-image-inner-top) - 16px) * 0.75));
		margin-inline: auto;
	}
}

@media (min-width: 768px) and (max-width: 782px) {
	body.single-product.admin-bar [data-elementor-id="6170"] {
		--chmp-product-image-admin-height: 46px;
	}
}

@media (min-width: 1025px) {
	body.single-product [data-elementor-id="6170"] {
		/* The existing desktop header scales with viewport width. */
		--chmp-product-image-header-gap: max(96px, 7.5vw);
		--chmp-product-image-inner-top: 0px;
	}
}