/* eqx/product-grid — block-scoped layout. The card visuals are canonical
   and live in assets/css/woocommerce.css so shop archives, related
   products, upsells and this block all render identically. */

.eqx-product-grid__header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--spacing-md);
	margin: 0 0 var(--spacing-lg);
}
.eqx-product-grid__title-block { max-width: 640px; }
.eqx-product-grid__title-block h2 {
	color: var(--eqx-brand-dark);
	margin: 0;
}
.eqx-product-grid__title-block .eqx-eyebrow { margin-bottom: var(--spacing-xs); }
.eqx-product-grid__sub {
	color: var(--eqx-text-muted);
	margin: var(--spacing-xs) 0 0;
}

/* "View all products" — text link, navy, no underline, with a trailing arrow. */
.eqx-product-grid__view-all {
	flex-shrink: 0;
	color: var(--eqx-brand-dark);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--transition-base);
	white-space: nowrap;
}
.eqx-product-grid__view-all::after {
	content: '\00a0\2192';
	display: inline-block;
	transition: transform var(--transition-base);
}
.eqx-product-grid__view-all:hover,
.eqx-product-grid__view-all:focus {
	color: var(--eqx-brand-accent);
}
.eqx-product-grid__view-all:hover::after,
.eqx-product-grid__view-all:focus::after {
	transform: translateX(4px);
}

@media (max-width: 640px) {
	.eqx-product-grid__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Grid columns — match WC's columns-N classes so the same card row width
   applies whether rendered by this block or by the shop archive. */
.eqx-product-grid ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--spacing-md);
}
.eqx-product-grid ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eqx-product-grid ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.eqx-product-grid ul.products.columns-3,
	.eqx-product-grid ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.eqx-product-grid ul.products.columns-3,
	.eqx-product-grid ul.products.columns-4 { grid-template-columns: 1fr; }
}