/**
 * Product card
 *
 * Shared by the shop archive, front page grids and any product listing.
 *
 *   .product-card--stacked  image above the details (default)
 *   .product-card--row      image beside the details
 *   .product-card--code     mono uppercase title (SEOUL 01)
 *   .product-card--name     sentence case title (Seoul Shirt 01)
 */

.product-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.product-card__media {
	display: flex;
	background: var(--color-surface-muted);
}

.product-card__media img {
	transition: transform 400ms ease;
}

.product-card:hover .product-card__media img {
	transform: scale(1.02);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.product-card__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
	color: var(--color-heading);
	margin: 0;
}

.product-card__title a {
	text-decoration: none;
	color: inherit;
}

.product-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Mono uppercase product codes. */
.product-card--code .product-card__title {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.product-card__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
	margin: 0;
}

.product-card__price {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
}

/* --- Row layout --- */

.product-card--row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-5);
	align-items: stretch;
	background: var(--color-surface);
}

.product-card--row .product-card__body {
	gap: var(--space-2);
	padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

.product-card__add {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	line-height: 1;
	text-decoration: none;
	color: var(--color-heading);
	transition: color var(--transition-fast);
}

.product-card__add:hover {
	color: var(--color-primary-hover);
}

@media (max-width: 40rem) {
	.product-card--row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.product-card--row .product-card__body {
		padding: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card__media img,
	.product-card:hover .product-card__media img {
		transition: none;
		transform: none;
	}
}