/**
 * Niche Beverly — product card (loop) image.
 *
 * Woodmart only constrains loop images with `width: 100%`, so every card
 * inherits its source image's aspect ratio and grids run ragged. Lock the
 * thumbnail box to a 1:1 square, fit (never crop) the image inside it, and
 * centre it both horizontally and vertically on a transparent background.
 *
 * Applies to every `.wd-product` card: shop, category, search, related /
 * upsells / cross-sells, and the Elementor + Gutenberg product widgets.
 */

.wd-product {
	--nb-card-ratio: 1 / 1;
	--nb-card-hover-bg: var(--bgcolor-white, #fff);
}

/* ---------- Transparent background behind the fitted image ---------- */

.wd-product .product-element-top,
.wd-product .product-element-top .product-image-link {
	background-color: transparent;
}

/*
 * The hover (second) image is an overlay: `position: absolute; inset: 0` on
 * top of the primary one. It must stay OPAQUE — fitted images letterbox, and
 * a transparent overlay would let the primary image show through its bars
 * during the cross-fade.
 */
.wd-product .product-element-top .hover-img {
	background-color: var(--nb-card-hover-bg);
}

/* ---------- Square box ---------- */

.wd-product .product-element-top .product-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--nb-card-ratio);
}

/* `.hover-img` is already `position: absolute; inset: 0` over the link. */

/* ---------- Fit + centre the image ---------- */

.wd-product .product-element-top :is(.product-image-link, .hover-img) picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
}

.wd-product .product-element-top :is(.product-image-link, .hover-img) img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Horizontal card layouts (list view, `wd-hover-small`) keep the same square. */
.wd-product.product-list-item .product-element-top .product-image-link,
.wd-product.wd-hover-small .product-element-top .product-image-link {
	aspect-ratio: var(--nb-card-ratio);
}