/**
 * Shared Exhale product-card and curated product-media components.
 */
.exhale-product-card {
	display: flex;
	min-width: 0;
	height: 100%;
	border: 1px solid rgb(16 42 70 / 8%);
	border-radius: var(--exhale-radius-card);
	background: var(--exhale-color-white);
	box-shadow: 0 8px 24px rgb(9 27 45 / 3%);
	flex-direction: column;
	overflow: hidden;
}

.exhale-product-card__link {
	display: flex;
	color: var(--exhale-color-primary);
	flex: 1;
	flex-direction: column;
	text-decoration: none;
}

.exhale-product-media {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border-radius: 14px;
	background: var(--exhale-color-light-gray);
	background: color-mix(in srgb, var(--exhale-color-light-gray) 32%, var(--exhale-color-warm-white));
	aspect-ratio: 4 / 4.4;
}

.exhale-product-media--option {
	border-radius: 12px;
	aspect-ratio: 4 / 3.85;
}

.exhale-product-visual {
	position: absolute;
	top: 8%;
	right: 7%;
	bottom: 7%;
	left: 7%;
	transition: transform 300ms var(--exhale-transition-easing);
}

.exhale-product-media--has-badge .exhale-product-visual {
	top: 14%;
}

.exhale-product-visual__layer {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 10px rgb(9 27 45 / 8%));
}

.exhale-product-media--single .exhale-product-visual__layer--pouch-60 { top: 2%; left: 12%; width: 76%; height: 94%; }
.exhale-product-media--single .exhale-product-visual__layer--pouch-120 { top: 4%; left: 0; width: 100%; height: 90%; }
.exhale-product-media--bottle .exhale-product-visual__layer--bottle { top: 5%; left: 21%; width: 58%; height: 90%; }
.exhale-product-media--kit .exhale-product-visual__layer--pouch-60 { top: 3%; left: 5%; z-index: 1; width: 69%; height: 88%; }
.exhale-product-media--kit .exhale-product-visual__layer--pouch-120 { top: 3%; left: 0; z-index: 1; width: 91%; height: 86%; }
.exhale-product-media--kit .exhale-product-visual__layer--bottle { right: 5%; bottom: 3%; z-index: 2; width: 31%; height: 58%; }

.exhale-product-media__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	max-width: calc(100% - 24px);
	padding: 5px 9px;
	border-radius: 7px;
	background: #e5dfd4;
	color: var(--exhale-color-primary);
	font-size: 10px;
	font-weight: var(--exhale-font-weight-medium);
	line-height: 1.2;
}

.exhale-product-card__content {
	display: flex;
	padding: clamp(14px, 2.5vw, 20px);
	flex: 1;
	flex-direction: column;
}

.exhale-product-card__name { margin: 0; font-size: clamp(13px, 1.25vw, 15px); line-height: 1.35; }
.exhale-product-card__price { margin-top: 8px; font-size: 13px; font-weight: var(--exhale-font-weight-semibold); }
.exhale-product-card__price del { margin-right: 4px; opacity: 0.55; }
.exhale-product-card__price ins { text-decoration: none; }

.exhale-product-card__action { padding: 0 clamp(14px, 2.5vw, 20px) clamp(14px, 2.5vw, 20px); }

.exhale-product-card__action .button,
.woocommerce .exhale-product-card__action .button {
	display: inline-flex;
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--exhale-color-primary);
	border-radius: var(--exhale-radius-button);
	background: var(--exhale-color-primary);
	color: var(--exhale-color-warm-white);
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: var(--exhale-font-weight-semibold);
	line-height: 1.25;
	text-align: center;
}

.exhale-product-card a:focus-visible,
.exhale-product-card__action .button:focus-visible {
	outline: 2px solid var(--exhale-color-accent);
	outline-offset: 3px;
}

@media (hover: hover) {
	.exhale-product-card__link:hover .exhale-product-visual { transform: translateY(-2px); }
	.exhale-product-card__action .button:hover,
	.woocommerce .exhale-product-card__action .button:hover { border-color: var(--exhale-color-accent); background: var(--exhale-color-accent); color: var(--exhale-color-white); }
}

@media (max-width: 430px) {
	.exhale-product-media { border-radius: 12px; }
	.exhale-product-media--has-badge .exhale-product-visual { top: 16%; }
	.exhale-product-card__content { padding: 13px 12px 15px; }
	.exhale-product-card__action { padding: 0 12px 14px; }
	.exhale-product-card__action .button { padding-inline: 8px; font-size: 11px; }
}