/* Label/product cards (parts/card-label.php) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.card {
	--card-brand: var(--rp-red);
	position: relative; display: grid; grid-template-rows: 1fr auto; gap: var(--space-2);
	padding: var(--space-3) var(--space-3) var(--space-3);
	background: #fff; border-radius: 4px; box-shadow: 0 1px 0 var(--rp-line);
	text-align: center; overflow: hidden; isolation: isolate;
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--card-brand) 14%, #fff); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(30, 42, 51, .35); }
.card:hover::before { opacity: 1; }
.card__media { display: grid; place-items: center; min-height: 220px; }
.card__media img { width: auto; max-height: 220px; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .18)); transition: transform var(--dur) var(--ease-out); }
.card:hover .card__media img { transform: translateY(-8px) scale(1.04); }
.card__title { font-size: var(--fs-small); font-weight: 700; }
.card__kind { font-size: var(--fs-micro); color: var(--rp-muted); margin-top: .2rem; }
.card > a::after { content: ""; position: absolute; inset: 0; }
.card.is-leaving { z-index: 5; }
.card.is-leaving::before { opacity: 0; }