/* ============================================================
   Section: Recent Products
   Desktop = 4-col grid, tablet = 3-col, mobile = horizontal scroll-snap.
   No JS — uses CSS scroll-snap for the mobile carousel.
   ============================================================ */

.recent-products__container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--space-m);
}

.recent-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-m);
}

@media (max-width: 1024px) {
	.recent-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.recent-products__grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 75%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--space-m);

		/* Bleed to viewport edges so cards line up with the section gutter */
		padding-inline: var(--space-m);
		margin-inline: calc(-1 * var(--space-m));

		/* Subtle scrollbar styling */
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.recent-products__grid > * {
		scroll-snap-align: start;
	}

	.recent-products__grid::-webkit-scrollbar {
		height: 4px;
	}
	.recent-products__grid::-webkit-scrollbar-thumb {
		background: color-mix(in srgb, var(--text-dark, var(--base)) 25%, transparent);
		border-radius: 2px;
	}
}