/**
 * Product card (template-parts/product-card.php).
 * Shared by product-grid, product-slider and related products.
 * Depends on tokens.css and global.css (.dh-btn).
 */

.dh-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--dh-space-16);
	height: 100%;
	padding: var(--dh-space-12) var(--dh-space-12) var(--dh-space-16);
	background-color: var(--dh-color-bg);
	border: var(--dh-border-width) solid var(--dh-color-border);
	border-radius: var(--dh-radius-product);
}

.dh-product-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 316 / 180;
	border-radius: var(--dh-radius-button);
}

.dh-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
}

.dh-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.dh-product-card__title {
	font-size: var(--dh-fs-heading-24);
	line-height: var(--dh-lh-tight);
	color: var(--dh-color-heading);
	text-transform: uppercase;
}

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

.dh-product-card__title a:hover {
	text-decoration: underline;
}

/* Short description (product slider), close to the name. */
.dh-product-card__desc {
	margin-top: calc(var(--dh-space-8) * -1);
	font-size: var(--dh-fs-body-15);
	line-height: var(--dh-lh-tight);
	color: var(--dh-color-text-muted);
}

/* Labels share one column, so all selects in a card start at the same x. */
.dh-product-card__options {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--dh-space-16) var(--dh-space-12);
}

.dh-product-card__option {
	display: contents;
}

.dh-product-card__label {
	font-size: var(--dh-fs-body-18);
	font-weight: var(--dh-fw-medium);
	line-height: var(--dh-lh-tight);
	color: var(--dh-color-heading);
}

.dh-product-card__select {
	width: 100%;
	min-width: 0;
	padding: var(--dh-field-padding);
	font-size: var(--dh-field-font-size);
	line-height: var(--dh-lh-tight);
	color: var(--dh-field-color);
	background-color: var(--dh-field-bg);
	border: var(--dh-border-width) solid var(--dh-color-border-field);
	border-radius: var(--dh-radius-field);
}

/* "Choose an option" still selected. */
.dh-product-card__select:has(option[value=""]:checked) {
	color: var(--dh-field-placeholder);
}

.dh-product-card__select option {
	color: var(--dh-field-color);
}

/* Price sits right above the button, so buttons line up across a row. */
.dh-product-card__price {
	margin-top: auto;
	font-size: var(--dh-fs-body-24);
	font-weight: var(--dh-fw-bold);
	line-height: var(--dh-lh-tight);
	color: var(--dh-color-accent-text);
	text-align: right;
}

.dh-product-card__price del {
	margin-right: var(--dh-space-8);
	font-size: var(--dh-fs-body-18);
	font-weight: var(--dh-fw-regular);
	color: var(--dh-color-text-muted);
}

.dh-product-card__price ins {
	text-decoration: none;
}

/* Woo writes variation price / stock messages here after a selection. */
.dh-product-card__variation {
	font-size: var(--dh-fs-body-15);
	color: var(--dh-color-text);
}

.dh-product-card__variation:empty {
	display: none;
}

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