/**
 * .wh-card — THE single product card, used on every surface (homepage grid,
 * /collecties/ archive, shop loop, PDP related strip, single-panel archive).
 * Canonical spec: design preview §06 (Cards) — reconciled to 4:5 + no N° badge.
 * Editorial: sharp corners, image-first, borderless (only a hairline rule
 * above the meta row — the card itself has no border or surface fill).
 * Grid/rail layout stays per-surface; this file owns ONLY the card itself.
 */

.wh-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.wh-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-product-fallback, var(--bg-alt));
}
.wh-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--ease);
}
.wh-card:hover .wh-card__img { transform: scale(1.02); }

.wh-card__body { padding-top: var(--s-4, var(--s-4)); }
.wh-card__title {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
	font-weight: 400;
}
.wh-card__tagline {
	font-family: var(--font-display);
	font-size: var(--type-base, 14px);
	font-style: italic;
	color: var(--ink-muted);
	margin: var(--s-2, var(--s-2)) 0 0;
	line-height: 1.3;
}
.wh-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-3, var(--s-3));
	margin-top: var(--s-3, var(--s-3));
	padding-top: var(--s-3, var(--s-3));
	/* Grey divider above the meta row (panelen/price/spec) on the Collectie
	   + Foto-op-paneel densities. Re-added per Ayrton 2026-06-17; removed from
	   the Materiaal density 2026-06-19 (see .wh-card--material below). */
	border-top: 1px solid var(--border);
}
/* Materiaal density (§06 "bijna geen info"): no divider — title + a short
   maten-label sit close together, no price row. Per Ayrton 2026-06-19. */
.wh-card--material .wh-card__meta {
	margin-top: var(--s-2);
	padding-top: 0;
	border-top: none;
}
.wh-card__spec {
	font-size: var(--type-xs, 11px);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-card__price {
	font-family: var(--font-display);
	font-size: var(--type-md, 17px);
	color: var(--ink);
	white-space: nowrap;
}