/*!
 * DSI 1.0 — Canonical ProductCard base presentation.
 * Markup: templates/partials/product-card.php
 * Intentional density variants (CSS modifiers only):
 *   --standard (default), --compact, --featured, --selectable (builder)
 * Page/experience sheets may refine density; they must not redefine the base card.
 */

.dxp-main .dxp-product-card[data-dxp-product-card] {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--dxp-card-background);
	border: 1px solid var(--dxp-card-border);
	border-radius: var(--dxp-card-radius);
	box-shadow: var(--dxp-card-shadow);
	color: var(--dxp-color-text-primary);
	transition: border-color var(--dxp-motion-fast), box-shadow var(--dxp-motion-fast), transform var(--dxp-motion-fast);
}

.dxp-main .dxp-product-card[data-dxp-product-card]:hover {
	border-color: var(--dxp-color-border-strong);
	box-shadow: var(--dxp-elevation-floating);
}

.dxp-main .dxp-product-card-media-wrap {
	position: relative;
}

.dxp-main .dxp-product-card-media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--dxp-color-surface-secondary);
	overflow: hidden;
}

.dxp-main .dxp-product-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dxp-main .dxp-product-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--dxp-space-2);
	padding: var(--dxp-space-4);
	flex: 1;
}

.dxp-main .dxp-product-card-title {
	font-size: var(--dxp-fs-card-title);
	font-weight: 800;
	line-height: var(--dxp-lh-snug, 1.3);
	margin: 0;
}

.dxp-main .dxp-product-card-title a {
	color: inherit;
	text-decoration: none;
}

.dxp-main .dxp-product-card-price {
	font-size: var(--dxp-fs-price);
	font-weight: 800;
	color: var(--dxp-brand-accent);
}

.dxp-main .dxp-product-card-meta,
.dxp-main .dxp-product-card-topline {
	font-size: var(--dxp-fs-metadata, var(--dxp-fs-caption));
	color: var(--dxp-color-text-muted);
}

/* Variants */
.dxp-main .dxp-product-card--compact .dxp-product-card-body {
	padding: var(--dxp-space-3);
	gap: var(--dxp-space-1);
}

.dxp-main .dxp-product-card--featured {
	border-color: color-mix(in srgb, var(--dxp-brand-accent) 45%, var(--dxp-card-border));
}

.dxp-main .dxp-product-card--selectable {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.dxp-main .dxp-product-card[data-dxp-product-card] {
		transition: none;
	}
}