/* ============================================================
   AuraBricks Theme — WooCommerce CSS
   Section : 02. Products Grid
   Source  : assets/css/woocommerce.css (lines 180–371)
   ============================================================ */

/* ============================================================
   02. Products Grid
   (Populated in Part 2 — woocommerce/loop/loop-*.php)
   ============================================================ */

body.woocommerce ul.products,
body.woocommerce-page ul.products,
body.woocommerce ul.products.abr-products-grid,
body.woocommerce-page ul.products.abr-products-grid,
ul.products.abr-products-grid,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--abr-woo-columns, 3), minmax(0, 1fr));
	gap: var(--abr-woo-gap, 24px);
	list-style: none;
	margin: 0 0 var(--abr-spacing-xl, 3rem) 0;
	padding: 0;
}

/* ── Fix: Clearfix Pseudo-elements on Grid Containers ──
   WooCommerce core injects ::before and ::after with content: " " and display: table
   for legacy float clearfix. In CSS Grid, these pseudo-elements become active grid items!
   The ::before item occupies row 1, col 1 (leaving it completely blank/empty),
   which forces the actual first product into column 2.
   Setting display: none and content: none removes them cleanly without !important. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
body.woocommerce ul.products.abr-products-grid::before,
body.woocommerce ul.products.abr-products-grid::after,
body.woocommerce-page ul.products.abr-products-grid::before,
body.woocommerce-page ul.products.abr-products-grid::after,
ul.products.abr-products-grid::before,
ul.products.abr-products-grid::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
	width: 0;
	height: 0;
}

/* Clear default WooCommerce float and width on all loop items */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.woocommerce ul.products.abr-products-grid li.product,
body.woocommerce-page ul.products.abr-products-grid li.product,
body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products.abr-products-grid li.product,
ul.products li.product {
	margin: 0;
	float: none;
	width: 100%;
	max-width: 100%;
	clear: none;
	box-sizing: border-box;
	min-width: 0; /* prevent grid blowout from long content */
	overflow: hidden;
}

/* Neutralize legacy WooCommerce first/last float & clear */
body.woocommerce ul.products li.product.first,
body.woocommerce-page ul.products li.product.first,
body.woocommerce ul.products li.product.last,
body.woocommerce-page ul.products li.product.last,
body.woocommerce ul.products.abr-products-grid li.product.first,
body.woocommerce-page ul.products.abr-products-grid li.product.first,
body.woocommerce ul.products.abr-products-grid li.product.last,
body.woocommerce-page ul.products.abr-products-grid li.product.last {
	clear: none;
	margin: 0;
	float: none;
}

/* Explicit columns modifiers */
body.woocommerce ul.products.columns-1,
body.woocommerce-page ul.products.columns-1,
body.woocommerce ul.products.abr-products-grid.columns-1 { grid-template-columns: 1fr; }

body.woocommerce ul.products.columns-2,
body.woocommerce-page ul.products.columns-2,
body.woocommerce ul.products.abr-products-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.woocommerce ul.products.columns-3,
body.woocommerce-page ul.products.columns-3,
body.woocommerce ul.products.abr-products-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.woocommerce ul.products.columns-4,
body.woocommerce-page ul.products.columns-4,
body.woocommerce ul.products.abr-products-grid.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.woocommerce ul.products.columns-5,
body.woocommerce-page ul.products.columns-5,
body.woocommerce ul.products.abr-products-grid.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

body.woocommerce ul.products.columns-6,
body.woocommerce-page ul.products.columns-6,
body.woocommerce ul.products.abr-products-grid.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ── Responsive: Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
	body.woocommerce ul.products.columns-4,
	body.woocommerce ul.products.columns-5,
	body.woocommerce ul.products.columns-6,
	body.woocommerce-page ul.products.columns-4,
	body.woocommerce-page ul.products.columns-5,
	body.woocommerce-page ul.products.columns-6,
	body.woocommerce ul.products.abr-products-grid.columns-4,
	body.woocommerce ul.products.abr-products-grid.columns-5,
	body.woocommerce ul.products.abr-products-grid.columns-6,
	body.woocommerce-page ul.products.abr-products-grid.columns-4,
	body.woocommerce-page ul.products.abr-products-grid.columns-5,
	body.woocommerce-page ul.products.abr-products-grid.columns-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Responsive: Small Tablet / Large Phone (≤ 768px) → Max 2 columns ── */
@media (max-width: 768px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products,
	body.woocommerce ul.products.abr-products-grid,
	body.woocommerce-page ul.products.abr-products-grid,
	body.woocommerce ul.products[class*="columns-"],
	body.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	/* Ensure WC default floats are fully neutralized on mobile */
	body.woocommerce ul.products li.product,
	body.woocommerce-page ul.products li.product {
		float: none;
		width: 100%;
		margin: 0;
		clear: none;
	}
}

/* ── Responsive: Phone (≤ 480px) → 2 columns (compact) ── */
@media (max-width: 480px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products,
	body.woocommerce ul.products.abr-products-grid,
	body.woocommerce-page ul.products.abr-products-grid,
	body.woocommerce ul.products[class*="columns-"],
	body.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* ── No Products Found State ── */
.abr-no-products {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--abr-spacing-2xl, 4rem) var(--abr-spacing-lg, 1.5rem);
	background: var(--abr-color-surface, #ffffff);
	border: 1px dashed var(--abr-color-border, #e2e8f0);
	border-radius: var(--abr-woo-card-radius, 12px);
	margin: 2rem 0;
}

.abr-no-products__icon {
	color: var(--abr-color-muted, #94a3b8);
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.abr-no-products__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--abr-color-heading, #1e293b);
	margin: 0 0 0.5rem;
}

.abr-no-products__desc {
	color: var(--abr-color-text-muted, #64748b);
	font-size: 0.95rem;
	max-width: 480px;
	margin: 0 0 1.5rem;
	line-height: 1.6;
}