/**
 * Ankara Revolution - product grid thumbnail ratio (4:5).
 *
 * WHY THIS FILE EXISTS
 * WooCommerce is already configured to crop product thumbnails to 4:5
 * (WooCommerce > Settings > Products > Product images > Thumbnail cropping).
 * However, a number of source images in the Media Library are smaller than
 * the 430 x 538 crop target, and WordPress never upscales a hard crop, so
 * those files are still written out at their original ratio. No WooCommerce
 * or WoodMart setting can fix that. This file pins the image box of every
 * product-grid card to 4:5 and covers it, so all cards in a row start and
 * end at exactly the same vertical position.
 *
 * Re-uploading those images at 1200 x 1500 px removes the need for the
 * cropping this file performs, but the rules below are safe to keep either way.
 *
 * SCOPE
 * Product loop cards only (shop, product categories, search results, related
 * products, Elementor product grids/carousels). It does not touch the
 * single-product gallery, blog images, Elementor images, or any other image.
 * Small card variants (.wd-hover-small, used in the search dropdown and
 * widgets) are deliberately excluded.
 *
 * TO CHANGE THE RATIO: edit --ankara-grid-ratio below.
 * TO REMOVE ENTIRELY: delete this file and its wp_enqueue_style() call in
 * functions.php (ankara_child_assets).
 */

:root {
	--ankara-grid-ratio: 4 / 5;
}

/* The image box: one fixed 4:5 footprint for every card, at every breakpoint. */
.wd-product:not(.wd-hover-small) .wd-product-thumb .wd-product-img-link,
.wd-product:not(.wd-hover-small) .wd-product-thumb .wd-product-img-hover {
	aspect-ratio: var(--ankara-grid-ratio);
	overflow: hidden;
}

/* <picture> wrapper (WoodMart Images Optimizer) must fill the box too. */
.wd-product:not(.wd-hover-small) .wd-product-thumb :is(.wd-product-img-link, .wd-product-img-hover) picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* The image: fill the box and crop from the centre. Never stretched. */
.wd-product:not(.wd-hover-small) .wd-product-thumb :is(.wd-product-img-link, .wd-product-img-hover) :is(picture, img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}