/**
 * Product grid: template-parts/archive/grid.php.
 * From 1024 (2156:647): 48px under the banner, four cards per row with 24px
 * gaps, "View more products" 24px under the grid. 768-1023: two per row.
 * Below 768 (not designed): one full card per row, 12px apart, as the
 * homepage mobile cards (designer question 23 asks about two compact columns).
 */

.archive-grid {
	padding-top: var(--space-md);
}

.archive-grid__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-grid__item {
	display: flex;
}

.archive-grid__item > .product-card {
	flex: 1;
}

.archive-grid__empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: var(--space-lg) 0;
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.archive-grid__empty p {
	margin: 0;
}

@media (min-width: 768px) {
	.archive-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md);
	}
}

@media (min-width: 1024px) {
	.archive-grid {
		padding-top: 48px;
	}

	.archive-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* "View more products" (2156:844): Dark button, centred 24px under the grid;
 * full width on phones (mobile pattern for primary actions). */
.archive-grid__more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-md);
}

.archive-grid__more .is-loading {
	cursor: progress;
}