/**
 * Force 4 Columns on All Pages - Pagination Fix
 * This ensures consistent 4-column layout regardless of page number or AJAX updates
 */

/* Force 4 columns on desktop for ALL pages */
@media (min-width: 768px) {
	/* Override any 3-column rules */
	.products-container[data-view="tiles"] .products,
	ul.products.products-container[data-view="tiles"],
	ul.products.products-container:not([data-view="list"]),
	.products-container:not([data-view="list"]) .products,
	.main-content .row ul.products,
	.woocommerce .main-content .row ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		display: grid !important;
	}
	
	/* Ensure product items are 25% width */
	.products-container[data-view="tiles"] .product-item,
	ul.products.products-container[data-view="tiles"] .product-item,
	ul.products.products-container:not([data-view="list"]) .product-item,
	.products-container:not([data-view="list"]) .product-item {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
}

/* Override any 3-column breakpoints */
@media (min-width: 992px) and (max-width: 1199px) {
	.products-container[data-view="tiles"] .products,
	ul.products.products-container[data-view="tiles"],
	ul.products.products-container:not([data-view="list"]) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* After AJAX pagination updates, ensure layout is maintained */
.products-container.loading ~ *,
.products-container[data-view="tiles"] {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}