/* ============================================================
   Category Product Grid
   2-row × 5-col static grid filtered by WC product category.
   No carousel. Reuses .wpdl-product-card CSS from product-card/.
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────── */
.wpdl-cat-grid {
	margin-block: 0 !important;
}

/* ── Section header ─────────────────────────────────────────── */
.wpdl-cat-grid__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: var(--wp--custom--space--4);
	margin-block-end: var(--wp--custom--space--7);
}

.wpdl-cat-grid__header > * {
	margin-block: 0;
}

.wpdl-cat-grid__title.wp-block-heading {
	font-family: var(--wp--custom--font--family--display);
	font-size: var(--wp--custom--font--size--2xl);
	font-weight: var(--wp--custom--font--weight--medium);
	color: var(--wp--custom--semantic--color--text--primary);
	margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-cat-grid__view-all a {
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--font--size--sm);
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--secondary);
	text-decoration: none;
	white-space: nowrap;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-cat-grid__view-all a:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

/* ── Product grid ───────────────────────────────────────────── */

/* WC renders: div.wpdl-cat-grid__collection > ul.wc-block-product-template
   The ul gets is-layout-flow by default (block/vertical stack).
   Override to CSS grid. !important needed: WC global CSS loads after ours.

   Also: WP constrained layout sets max-width:content-size on direct children.
   (0,2,0) + !important beats :root :where(.is-layout-constrained)>(0,1,0). */
.wpdl-cat-grid .wpdl-cat-grid__collection {
	max-width: none !important;
	margin-inline: 0 !important;
	margin-block: 0 !important;
	width: 100%;
}

.wpdl-cat-grid__collection .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: var(--wp--custom--space--7) var(--wp--custom--space--5) !important;
	list-style: none;
	padding: 0;
	margin: 0 !important;
}

/* Reset WC li width (WC sets width:calc(20%-1em) at (0,3,1) specificity) */
.wpdl-cat-grid__collection .wc-block-product-template.wc-block-product-template li {
	width: auto !important;
	margin-block: 0 !important;
	min-width: 0;
}

/* ── Tablet 768 — 3 columns ─────────────────────────────────── */
@media (width <= 47.9375rem) {
	.wpdl-cat-grid__collection .wc-block-product-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.wpdl-cat-grid__title.wp-block-heading {
		font-size: var(--wp--custom--font--size--xl);
	}
}

/* ── Mobile 375 — 2 columns ─────────────────────────────────── */
@media (width <= 29.9375rem) {
	.wpdl-cat-grid__collection .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--wp--custom--space--5) var(--wp--custom--space--3) !important;
	}

	.wpdl-cat-grid__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--custom--space--2);
	}

	.wpdl-cat-grid__title.wp-block-heading {
		font-size: var(--wp--custom--font--size--lg);
	}
}