/**
 * Product card: template-parts/product/card.php.
 * Mobile (2288:1278): 256px wide in the row carousel, 232 x 158 media,
 * 10px tag, 18px name. From 1024 (2098:3799): square media, 12px tag,
 * 20px name. White card, line border, radius 24; media radius 18.
 * The tag on cards is orange with cream text for BESTSELLER, NEW and BUNDLE
 * (homepage rows), see docs/designer-questions.md.
 */

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	height: 100%;
	padding: 11px 11px 15px; /* 12 / 16 in Figma, where the border sits inside */
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	color: var(--color-ink);
	transition: transform 0.3s ease;
}

/* Hover lift: the shadow is a layer that fades in (opacity), not an animated
 * box-shadow. Pointer devices only, so a tap does not leave a card raised. */
.product-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: var(--shadow-card-hover);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.product-card:hover {
		transform: translateY(-4px);
	}

	.product-card:hover::before {
		opacity: 1;
	}
}

.product-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 232 / 158;
	border-radius: 18px;
	background: var(--color-cream);
}

/* .product-card prefix: on shop pages WooCommerce sets
 * ".woocommerce-page img { height: auto }", which cut the photo off. */
.product-card .product-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

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

.product-card__badge {
	position: absolute;
	top: 23px;
	left: 23px;
	padding: 5px 10px;
	font-size: 10px;
}

.product-card__badge.tag--bestseller,
.product-card__badge.tag--new,
.product-card__badge.tag--bundle {
	--tag-bg: var(--color-orange);
	--tag-fg: var(--color-cream);
}

.product-card__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 0 4px;
}

.product-card__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	min-height: calc(var(--text-label-s) * var(--leading-label-s));
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	white-space: nowrap;
}

.product-card__category {
	overflow: hidden;
	color: var(--color-muted);
	text-overflow: ellipsis;
}

/* Two lines reserved, so prices and buttons line up across a row. */
.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	min-height: calc(2em * var(--leading-h4));
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

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

.product-card__title a:hover {
	color: var(--color-green);
}

.product-card__buy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
}

.product-card__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.product-card__option {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 5px 11px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* 44px tall tap area around the 28px pill. */
.product-card__option::after {
	position: absolute;
	inset: -9px -3px;
	content: "";
}

.product-card__option:hover {
	border-color: var(--color-ink);
}

.product-card__option[aria-pressed="true"] {
	border-color: var(--color-black);
	background: var(--color-black);
	color: var(--color-cream);
}

.product-card__option.is-unavailable {
	color: var(--color-muted);
	text-decoration: line-through;
}

/* At the bottom of the card info, so prices line up in a row of cards even
 * when a card has no option pills (Pens, decision 15.2). */
.product-card__price {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	align-items: baseline;
	margin: auto 0 0;
	white-space: nowrap;
}

.product-card__now {
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.product-card__was {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.product-card__ppg {
	color: var(--color-green);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.product-card__price [hidden] {
	display: none;
}

.product-card__form {
	margin: auto 0 0;
}

.product-card__add[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.product-card__add.is-added .btn__icon {
	display: none;
}

@media (min-width: 1024px) {
	.product-card__media {
		aspect-ratio: 1;
	}

	.product-card__badge {
		font-size: var(--text-label-s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card::before,
	.product-card__img {
		transition: none;
	}

	.product-card:hover,
	.product-card:hover .product-card__img {
		transform: none;
	}
}