/**
 * Shared landing/archive catalogue contract.
 *
 * Loaded after the historical theme stylesheet so Collection and every
 * product taxonomy use the landing page's exact product-grid component.
 */
ul.legends-products:not(.legends-products--instagram),
.single-product .related.products ul.products,
body.woocommerce-shop .commerce-main ul.products,
body.post-type-archive-product .commerce-main ul.products,
body[class*="tax-product_"] .commerce-main ul.products {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(24px, 3vw, 44px) clamp(12px, 2vw, 28px) !important;
}

.commerce-main ul.legends-products--archive li.product,
.commerce-main ul.legends-products--archive li.product > a.woocommerce-LoopProduct-link,
.single-product .related.products ul.products li.product,
.single-product .related.products ul.products li.product > a.woocommerce-LoopProduct-link,
body.woocommerce-shop .commerce-main ul.products li.product,
body.woocommerce-shop .commerce-main ul.products li.product > a.woocommerce-LoopProduct-link,
body.post-type-archive-product .commerce-main ul.products li.product,
body.post-type-archive-product .commerce-main ul.products li.product > a.woocommerce-LoopProduct-link,
body[class*="tax-product_"] .commerce-main ul.products li.product,
body[class*="tax-product_"] .commerce-main ul.products li.product > a.woocommerce-LoopProduct-link {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

.commerce-main .woocommerce-ordering {
	width: fit-content !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 0 clamp(30px, 4vw, 52px) !important;
}

.commerce-main .woocommerce-ordering select {
	width: auto !important;
	min-width: 220px;
	max-width: 100%;
}

@media (max-width: 1100px) and (min-width: 721px) {
	ul.legends-products:not(.legends-products--instagram),
	.single-product .related.products ul.products,
	body.woocommerce-shop .commerce-main ul.products,
	body.post-type-archive-product .commerce-main ul.products,
	body[class*="tax-product_"] .commerce-main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 720px) {
	ul.legends-products:not(.legends-products--instagram),
	.single-product .related.products ul.products,
	body.woocommerce-shop .commerce-main ul.products,
	body.post-type-archive-product .commerce-main ul.products,
	body[class*="tax-product_"] .commerce-main ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 30px 12px !important;
	}

	.commerce-main .woocommerce-ordering,
	.commerce-main .woocommerce-ordering select {
		width: 100% !important;
	}
}