/* product-cards.css — depends on: el-tokens, el-base */
.product-card__container{
max-width:1400px;
}

.product-cards {
	container-name: product-cards;
	container-type: inline-size;
}

.container-heading {
	max-width: 640px;
	margin-bottom: var(--el-space-6);
}

.container-heading p {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-medium);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-soft);
	margin: var(--el-space-2) 0 0;
}

.cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--el-space-5);
}

@container product-cards (max-width: 900px) {
	.cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container product-cards (max-width: 560px) {
	.cards-grid {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(var(--el-space-5) * -1);
		padding: 0 var(--el-space-5) var(--el-space-2);
	}
}

/* ---- card — full-bleed image, padded content block --------------------- */

.product-card {
	overflow: hidden; /* clips the image to the card's rounded corners */
	scroll-snap-align: start;
padding:unset !important;
}

.card-image__container {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--el-duration) var(--el-ease);
}

.product-card:hover .card-image {
	transform: scale(1.04);
}

.product-card__content {
	padding: var(--el-space-4) var(--el-space-4) var(--el-space-4);
}

.product-card__content h3 {
	font-family: var(--el-font-display);
	font-size: var(--el-text-lg);       /* was --el-text-md — bumped for legibility */
	font-weight: var(--el-weight-bold); /* was --el-weight-semibold */
	color: var(--el-color-text);
	margin: 0 0 var(--el-space-2);
}

.product-card__content p {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);          /* was --el-text-sm */
	font-weight: var(--el-weight-medium);    /* was default/normal */
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-soft);        /* was --el-color-text-muted — darker, higher contrast */
	margin: 0;
}

/* ---- entry animation ---------------------------------------------------- */

.cards-grid.js-reveal .product-card {
	--reveal-step: 0.12s;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s var(--el-ease), transform 0.5s var(--el-ease);
}
.cards-grid.js-reveal.is-visible .product-card {
	opacity: 1;
	transform: none;
}
.cards-grid.js-reveal .product-card:nth-child(1) { transition-delay: calc(var(--reveal-step) * 0); }
.cards-grid.js-reveal .product-card:nth-child(2) { transition-delay: calc(var(--reveal-step) * 1); }
.cards-grid.js-reveal .product-card:nth-child(3) { transition-delay: calc(var(--reveal-step) * 2); }
.cards-grid.js-reveal .product-card:nth-child(4) { transition-delay: calc(var(--reveal-step) * 3); }

/* mobile/slider: fade the whole strip in as one unit instead of staggering —
   setting the step to 0 collapses every card's delay to the same instant */
@container product-cards (max-width: 560px) {
	.cards-grid.js-reveal { --reveal-step: 0s; }
}

@media (prefers-reduced-motion: reduce) {
	.cards-grid.js-reveal .product-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}