/*
 * Product card (tangens-components.md): white panel, var(--radius), padding 14/14/20 on desktop
 * and 12/12/18 at 767 and below. Packshot 4:5, contained. Name (meta 500), colour (meta graphite),
 * 10px, price. Width comes from the layout; the ratio never varies. Hover scales the image 1.02.
 */

.product-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 0.875rem 0.875rem 1.25rem;
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: normal;
	text-align: center;
}

.product-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-block-end: 0.875rem;
	overflow: hidden;
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center 42%;
	transition: transform var(--dur-hover) var(--ease);
}

.product-card:hover .product-card__img {
	transform: scale(var(--hover-scale));
}

.product-card__name {
	font-weight: 500;
}

.product-card__colour {
	color: var(--graphite);
}

.product-card__price {
	margin-block-start: 0.625rem;
}

@media (max-width: 767px) {
	.product-card {
		padding: 0.75rem 0.75rem 1.125rem;
	}

	.product-card__media {
		margin-block-end: 0.75rem;
	}

	.product-card__price {
		margin-block-start: var(--space-1);
	}
}