/*
 * WooCommerce Layout Contract
 *
 * This file loads after style.css and locks structural layout rules that must
 * survive visual redesigns. Change design tokens, typography, borders,
 * shadows, spacing, and page-specific presentation in style.css. Do not add
 * competing product-grid, product-card media, or single-product structural
 * rules elsewhere.
 */

/* Product grids: only these explicit branches may become CSS Grid. */
.home-product-grid,
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
.shop-shell--fallback ul.products,
section.related.products > ul.products,
section.upsells.products > ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Prevent WooCommerce clearfix pseudo-elements becoming blank grid cells. */
.home-product-grid::before,
.home-product-grid::after,
body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
.shop-shell--fallback ul.products::before,
.shop-shell--fallback ul.products::after,
section.related.products > ul.products::before,
section.related.products > ul.products::after,
section.upsells.products > ul.products::before,
section.upsells.products > ul.products::after {
	display: none !important;
	content: none !important;
}

/* Related and upsell headings must remain above their own product list. */
section.related.products,
section.upsells.products {
	display: block !important;
	width: 100%;
}

/* Every WooCommerce grid item is a vertical card, never a default float. */
body.woocommerce-shop ul.products > li.product,
body.post-type-archive-product ul.products > li.product,
.shop-shell--fallback ul.products > li.product,
section.related.products > ul.products > li.product,
section.upsells.products > ul.products > li.product {
	display: flex !important;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	flex-direction: column;
}

/* Fixed card media chain keeps images from covering the title, price or button. */
.home-product-card,
body.woocommerce-shop ul.products > li.product,
body.post-type-archive-product ul.products > li.product,
.shop-shell--fallback ul.products > li.product,
section.related.products > ul.products > li.product,
section.upsells.products > ul.products > li.product {
	min-width: 0;
}

.home-product-card__image,
.product-card__image {
	display: block !important;
	flex: 0 0 auto;
	aspect-ratio: var(--product-image-ratio);
	overflow: hidden;
}

.home-product-card__image > a,
.product-card__image > a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.home-product-card__image img,
.product-card__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover !important;
}

.home-product-card__body,
.product-card__body {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	min-height: 0;
}

/* Gallery and summary stay in their defined columns; post-purchase content is outside. */
body.single-product .product-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
	gap: var(--space-7);
	align-items: start;
}

body.single-product .product-main-grid > .product-gallery-column,
body.single-product .product-main-grid > .summary,
body.single-product div.product div.images,
body.single-product div.product div.summary,
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper {
	width: 100% !important;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
}

@media (max-width: 64rem) {
	.home-product-grid,
	body.woocommerce-shop ul.products,
	body.post-type-archive-product ul.products,
	.shop-shell--fallback ul.products,
	section.related.products > ul.products,
	section.upsells.products > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	body.single-product .product-main-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 32rem) {
	.home-product-grid,
	body.woocommerce-shop ul.products,
	body.post-type-archive-product ul.products,
	.shop-shell--fallback ul.products,
	section.related.products > ul.products,
	section.upsells.products > ul.products {
		grid-template-columns: 1fr;
	}
}