/**
 * Cozy Variable Price Display — frontend styles.
 * Scoped to .cvpd-price-display / .cvpd-price-wrap only.
 */

:root {
	--cvpd-accent: var(--wd-primary-color, currentColor);
	--cvpd-text: var(--wd-text-color, #333);
	--cvpd-muted: var(--color-gray-500, #767676);
	--cvpd-muted-soft: var(--color-gray-300, #999);
	--cvpd-font: inherit;
}

/* Title → CVPD rhythm (Woodmart summary) */
.wd-single-price .cvpd-price-wrap,
.summary .cvpd-price-wrap,
.summary-inner .cvpd-price-wrap,
.product-image-summary .cvpd-price-wrap {
	margin-top: 12px;
	margin-bottom: 0.65rem;
}

.cvpd-price-wrap {
	margin-bottom: 0.65rem;
	max-width: 100%;
}

.cvpd-price-display {
	font-family: var(--cvpd-font);
	color: var(--cvpd-text);
	line-height: 1.35;
	max-width: 100%;
}

/* Secondary label */
.cvpd-price-display .cvpd-price-label {
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--cvpd-muted);
	margin: 0 0 5px;
}

.cvpd-price-display .cvpd-prices {
	display: block;
	max-width: 100%;
}

.cvpd-price-display .cvpd-price-main {
	display: block;
	max-width: 100%;
}

/* Rows: mobile-first stacked sale layout */
.cvpd-price-display .cvpd-regular-row {
	display: block;
	margin: 0 0 3px;
	line-height: 1.2;
}

.cvpd-price-display .cvpd-current-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.35rem;
	margin: 0;
	line-height: 1.1;
	max-width: 100%;
}

/* Old / regular price */
.cvpd-price-display .cvpd-regular-row del,
.cvpd-price-display del.cvpd-price-regular,
.cvpd-price-display .cvpd-price-regular {
	display: inline;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--cvpd-muted);
	opacity: 0.65;
	text-decoration: line-through;
	background: transparent;
}

.cvpd-price-display .cvpd-regular-row .woocommerce-Price-amount,
.cvpd-price-display .cvpd-regular-row .amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Current / sale price — dominant */
.cvpd-price-display .cvpd-price-sale,
.cvpd-price-display .cvpd-price-current,
.cvpd-price-display .cvpd-current-row > ins {
	display: inline;
	font-size: clamp(24px, 6vw, 28px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--cvpd-accent);
	text-decoration: none;
	background: transparent;
	padding: 0;
	opacity: 1;
}

.cvpd-price-display .cvpd-price-sale .woocommerce-Price-amount,
.cvpd-price-display .cvpd-price-sale .amount,
.cvpd-price-display .cvpd-price-current .woocommerce-Price-amount,
.cvpd-price-display .cvpd-price-current .amount,
.cvpd-price-display .cvpd-current-row > .cvpd-price-current .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
}

/* From-state: noticeable but slightly softer than selected exact */
.cvpd-price-display--from .cvpd-price-current,
.cvpd-price-display--from .cvpd-from-prefix {
	font-size: clamp(22px, 5.5vw, 26px);
	font-weight: 700;
	color: var(--cvpd-accent);
	line-height: 1.1;
}

.cvpd-price-display--from .cvpd-from-prefix {
	margin-inline-end: 0.15em;
}

/* Unit: muted, beside main price (Woodmart ::before adds "/") */
.cvpd-price-display .cvpd-unit,
.cvpd-price-display .wd-price-unit {
	display: inline-block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--cvpd-muted);
	opacity: 0.9;
	text-transform: lowercase;
	margin-inline-start: 2px;
	white-space: nowrap;
	vertical-align: baseline;
}

.cvpd-price-display .cvpd-unit:before,
.cvpd-price-display .wd-price-unit:before {
	content: "/";
	margin-inline-end: 3px;
	text-transform: none;
}

/* Selected attribute line */
.cvpd-price-display .cvpd-selected {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.4rem;
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--cvpd-text);
	max-width: 100%;
}

.cvpd-price-display .cvpd-selected-mark {
	font-weight: 700;
	color: var(--cvpd-accent);
	flex: 0 0 auto;
}

.cvpd-price-display .cvpd-selected-label {
	color: var(--cvpd-muted);
	font-weight: 400;
	flex: 0 0 auto;
}

.cvpd-price-display .cvpd-selected-value {
	font-weight: 600;
	color: var(--cvpd-text);
	font-size: inherit;
	overflow-wrap: anywhere;
	word-break: normal;
}

.cvpd-price-display .cvpd-selected--unavailable .cvpd-selected-value,
.cvpd-price-display .cvpd-selected--unavailable .cvpd-selected-label {
	color: var(--cvpd-muted);
}

.cvpd-price-display .cvpd-stock-status {
	display: inline-block;
	font-size: 0.95em;
	color: var(--cvpd-muted);
	font-weight: 400;
}

.cvpd-price-display .cvpd-stock-status::before {
	content: "·";
	margin-inline: 0.2rem;
	color: var(--cvpd-muted);
}

/* Hint — least prominent */
.cvpd-price-display .cvpd-hint {
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--cvpd-muted);
	opacity: 0.85;
}

.cvpd-price-display .cvpd-hint--update {
	opacity: 0.8;
}

/* Catalog — unchanged UX, light polish only */
.cvpd-catalog-price {
	display: inline;
}

.cvpd-catalog-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--cvpd-muted);
	line-height: 1.3;
}

/* Hide duplicate native variation price only */
body.cvpd-hide-native-variation-price .woocommerce-variation-price {
	display: none !important;
}

.wd-single-price .cvpd-price-display,
.summary .cvpd-price-display,
.summary-inner .cvpd-price-display {
	width: 100%;
}

/* Desktop: slightly more compact; keep hierarchy clear */
@media (min-width: 769px) {
	.cvpd-price-display .cvpd-price-sale,
	.cvpd-price-display .cvpd-price-current,
	.cvpd-price-display .cvpd-current-row > ins {
		font-size: clamp(22px, 2vw, 28px);
	}

	.cvpd-price-display--from .cvpd-price-current,
	.cvpd-price-display--from .cvpd-from-prefix {
		font-size: clamp(20px, 1.8vw, 26px);
	}

	/* Optional compact horizontal when space allows — still stacked by default for clarity */
	.cvpd-price-display--selected .cvpd-price-main {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.15rem 0.65rem;
	}

	.cvpd-price-display--selected .cvpd-regular-row {
		margin-bottom: 0;
	}
}

@media (max-width: 412px) {
	.cvpd-price-display .cvpd-price-sale,
	.cvpd-price-display .cvpd-price-current,
	.cvpd-price-display .cvpd-current-row > ins {
		font-size: clamp(24px, 6.2vw, 28px);
	}

	.cvpd-price-display .cvpd-regular-row del,
	.cvpd-price-display del.cvpd-price-regular {
		font-size: 13.5px;
	}
}