/*
 * Product grids before Masonry runs.
 *
 * moca-script.js lays out ul.products with Masonry once every image has loaded.
 * Until then the browser draws the grid from CSS, and that layout used other
 * columns: one card per row on phones (cards were not floated) and three per
 * row on desktop, because WooCommerce marks every third card .first
 * (clear: both) and .last (no right margin) for the shop's 3-column setting,
 * while the cards are narrow enough for Masonry to fit four. Once fonts stopped
 * blocking the first paint, that switch became visible: a layout shift (CLS) of
 * 0.62 on a category page on a phone.
 *
 * These rules draw the grid in Masonry's own columns from the first paint.
 * #primary outranks Storefront's `.site-main ul.products.columns-N li.product.first`.
 */

#primary ul.products li.product {
	float: left !important;
	clear: none !important;
}

@media (min-width: 769px) {
	#primary ul.products li.product.last {
		margin-right: 0.8823529412% !important;
	}
}