/*
 * Sidebar shop: Salient keeps data-n-desktop-columns="4" for material style, so at viewport
 * ≥1300px the loop stays 4-up even when .post-area.span_9 is narrow (filters visible).
 * Use a size container on the product column and switch to 3-up when inline size is below
 * the threshold (~1480px: above narrow span_9 with sidebar open, below wide span_9 when
 * sidebar is collapsed off-canvas). Tune rasch_shop_main max-width if the flip is early/late.
 *
 * Note: @container must not be nested inside @media (poor / broken support in some browsers).
 */

@media only screen and (min-width: 1000px) {
	body.woocommerce:not(.single-product) .container.main-content > .row > .post-area.span_9,
	body.woocommerce-page:not(.single-product) .container.main-content > .row > .post-area.span_9 {
		container-type: inline-size;
		container-name: rasch_shop_main;
	}
}

@container rasch_shop_main (max-width: 1480px) {
	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="4"],
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="4"],
	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="5"],
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="5"],
	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="6"],
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="6"] {
		width: 102% !important;
	}

	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="4"] li.product,
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="4"] li.product,
	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="5"] li.product,
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="5"] li.product,
	body.woocommerce:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="6"] li.product,
	body.woocommerce-page:not(.single-product) .post-area.span_9 ul.products[data-n-desktop-columns="6"] li.product {
		width: 31.2% !important;
		margin: 0 2% 2% 0 !important;
		padding: 0;
	}

	body.woocommerce:not(.single-product) .post-area.span_9 .woocommerce.columns-4 ul.products[data-product-style="material"][data-n-desktop-columns="4"] li.product.material:nth-child(4n + 4),
	body.woocommerce-page:not(.single-product) .post-area.span_9 .woocommerce.columns-4 ul.products[data-product-style="material"][data-n-desktop-columns="4"] li.product.material:nth-child(4n + 4) {
		margin-right: 2% !important;
	}

	body.woocommerce:not(.single-product) .post-area.span_9 .woocommerce.columns-4 ul.products[data-product-style="material"][data-n-desktop-columns="4"] li.product.material:nth-child(3n + 3),
	body.woocommerce-page:not(.single-product) .post-area.span_9 .woocommerce.columns-4 ul.products[data-product-style="material"][data-n-desktop-columns="4"] li.product.material:nth-child(3n + 3) {
		margin-right: 0 !important;
	}
}