/**
 * Product grid on the shop and category pages.
 *
 * Every image fills the same 300x300 square without stretching, and each card lines up its title, price and button.
 */

/* Crop the sharp full-size image to a square that shrinks with its column. */
body .woocommerce ul.products li.product a img,
body ul.products.xve-winkel-categorietegels li.product a img {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	margin-left: auto;
	margin-right: auto;
}

body .woocommerce ul.products li.product.type-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body .woocommerce ul.products li.product.type-product .woocommerce-LoopProduct-link {
	width: 100%;
}

/* Reserve two lines for every title, so the prices start at the same height. */
body .woocommerce ul.products li.product.type-product .woocommerce-loop-product__title {
	box-sizing: border-box;
	line-height: 1.3;
	min-height: calc(1.3em * 2 + 1em);
}

/* Push the button to the bottom of the card, so the buttons line up in every row. */
body .woocommerce ul.products li.product.type-product .button {
	margin-top: auto;
}