.product-card {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-width: 0;
	min-height: clamp(370px, 34vw, 660px);
	color: var(--color-ink);
	-webkit-user-drag: none;
}

.product-card--carousel {
	flex: 0 0 clamp(310px, 20.3vw, 390px);
	width: clamp(310px, 20.3vw, 390px);
	min-height: clamp(560px, 34.4vw, 660px);
	scroll-snap-align: start;
}

.product-card__media {
	display: grid;
	align-items: center;
	justify-items: center;
	min-height: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 6px;
}

.product-card__media img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	max-height: clamp(280px, 22vw, 420px);
	object-fit: contain;
	object-position: center;
	padding: 5px;
	pointer-events: none;
	user-select: none;
	transition: opacity 200ms ease;
}

.product-card__image--hover {
	background: #fff;
	opacity: 0;
}

.product-card__placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, rgba(8, 8, 8, 0.08), rgba(8, 8, 8, 0.02));
}

.product-card__body {
	display: grid;
	gap: 4px;
	padding: 24px 0 0;
	font-size: 12px;
	line-height: 1.22;
}

.product-card__name,
.product-card__price {
	display: block;
	overflow-wrap: anywhere;
}

.product-card__price {
	color: rgba(8, 8, 8, 0.52);
}

@media (hover: hover) {
	.product-card__media--has-hover:hover .product-card__image--hover {
		opacity: 1;
	}

	.product-card:hover .product-card__name {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card__media img {
		transition-duration: 1ms;
	}
}