/**
 * Product image standardisation.
 *
 * The source photos are not uniform: aspect ratios range from 0.67 to 1.04 and
 * pixel sizes from 424x698 to 2000x2000. Rather than hard-cropping them (which
 * cuts the top off a stroller or the legs off a high chair), every product image
 * is placed inside a fixed square frame and scaled to fit inside it.
 *
 * Result: identical frame size, identical aspect ratio, identical background and
 * identical centring on the shop, category and single product pages, with the
 * whole product always visible.
 *
 * The explicit aspect-ratio also reserves the space before the image loads, which
 * removes layout shift (good for Core Web Vitals).
 */

:root {
	--wg-product-frame-ratio: 1 / 1;
	--wg-product-frame-bg: #ffffff;
	--wg-product-frame-pad: 6%;
	--wg-product-thumb-pad: 8%;
	--wg-product-frame-radius: 8px;
}

/*
|--------------------------------------------------------------------------
| Catalog: shop, category, search, related, upsells, cross-sells, sliders
|--------------------------------------------------------------------------
*/

/*
 * XStore does not use the WooCommerce default `ul.products > li.product`. It
 * renders `div.products > div.product > .content-product > .product-image-wrapper
 * > a.product-content-image > img`, and the hover-swap image inside that same
 * anchor carries no class at all. So the frame is selected structurally, which
 * catches the main image and the swap image together.
 */
.product-image-wrapper,
.woocommerce ul.products li.product .product-image-wrapper,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.wc-block-grid__product-image {
	background: var( --wg-product-frame-bg );
	border-radius: var( --wg-product-frame-radius );
	display: block;
	overflow: hidden;
}

/* The frame itself: always square, whatever the photo is. */
.product-image-wrapper a.product-content-image img,
.product-image-wrapper > a > img,
.product-image-wrapper > img,
.woocommerce ul.products li.product img,
ul.products li.product img,
.wc-block-grid__product-image img {
	aspect-ratio: var( --wg-product-frame-ratio );
	background: var( --wg-product-frame-bg );
	box-sizing: border-box;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	padding: var( --wg-product-thumb-pad );
	width: 100%;
}

/*
 * The swap image is absolutely positioned over the first one, so it has to be
 * pinned to the same box or the image jumps on hover.
 */
.product-image-wrapper.hover-effect-swap a.product-content-image img + img,
.product-image-wrapper a.product-content-image img.hover-image,
.product-image-wrapper a.product-content-image img.secondary-image {
	height: 100%;
	left: 0;
	top: 0;
}

/*
|--------------------------------------------------------------------------
| Single product: main gallery image
|--------------------------------------------------------------------------
*/

.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > div {
	background: var( --wg-product-frame-bg );
	border-radius: var( --wg-product-frame-radius );
}

.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img.wp-post-image {
	aspect-ratio: var( --wg-product-frame-ratio );
	background: var( --wg-product-frame-bg );
	box-sizing: border-box;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	object-position: center center;
	padding: var( --wg-product-frame-pad );
	width: 100%;
}

/*
|--------------------------------------------------------------------------
| Single product: gallery thumbnails
|--------------------------------------------------------------------------
*/

.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li img,
.woocommerce div.product div.thumbnails a img {
	aspect-ratio: 1 / 1;
	background: var( --wg-product-frame-bg );
	border-radius: calc( var( --wg-product-frame-radius ) / 2 );
	box-sizing: border-box;
	height: auto;
	object-fit: contain;
	object-position: center center;
	padding: 6%;
	width: 100%;
}

/*
|--------------------------------------------------------------------------
| Cart, checkout, mini cart, order and account tables
|--------------------------------------------------------------------------
*/

.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	aspect-ratio: 1 / 1;
	background: var( --wg-product-frame-bg );
	border-radius: 4px;
	box-sizing: border-box;
	height: auto;
	object-fit: contain;
	object-position: center center;
	padding: 4%;
}

/*
|--------------------------------------------------------------------------
| Zoom and lightbox must not be framed
|--------------------------------------------------------------------------
|
| PhotoSwipe and the zoom layer render the full size image in their own
| container. Forcing a square frame there would letterbox the zoomed view.
*/

.pswp img,
.pswp__img,
.zoomImg,
.woocommerce div.product div.images .woocommerce-product-gallery__image img.zoomImg {
	aspect-ratio: auto !important;
	background: transparent !important;
	object-fit: contain !important;
	padding: 0 !important;
}

/*
|--------------------------------------------------------------------------
| Narrow screens
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 767px) {
	:root {
		--wg-product-thumb-pad: 6%;
		--wg-product-frame-pad: 4%;
	}
}