/**
 * YS FluentCart Price Calculator — storefront price breakdown.
 *
 * Label left, amount right, the way the reference storefront prints it.
 * Deliberately quiet: it inherits the theme's type and colour and sits one step
 * back from the price it explains, so it reads as supporting detail rather than
 * a second price block.
 */

.ys-fct-pcalc-breakdown {
	margin: 0.6em 0 0;
	max-width: 26em;
	font-size: 0.85em;
	line-height: 1.6;
	/*
	 * The before_actions / after_actions hooks fire INSIDE FluentCart's
	 * `.fct-product-buttons-wrap`, which is a two-column grid (a flex row in
	 * some themes). Without a span of its own the breakdown becomes one more
	 * cell there and stretches the buy buttons to its height; claiming the
	 * whole line puts it on its own row instead. Both declarations are inert
	 * outside a grid/flex container.
	 */
	grid-column: 1 / -1;
	flex: 1 1 100%;
}

.ys-fct-pcalc-breakdown__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5em;
	padding: 0.15em 0;
}

.ys-fct-pcalc-breakdown__label {
	flex: 1 1 auto;
	opacity: 0.75;
}

.ys-fct-pcalc-breakdown__value {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ys-fct-pcalc-breakdown__percent {
	opacity: 0.7;
}

/* The regular price opens the summary pair, so it gets the rule above it. */
.ys-fct-pcalc-breakdown__row--regular_price {
	margin-top: 0.25em;
	padding-top: 0.45em;
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.ys-fct-pcalc-breakdown__row.is-emphasis {
	font-weight: 600;
}

.ys-fct-pcalc-breakdown__row.is-emphasis .ys-fct-pcalc-breakdown__label {
	opacity: 1;
}

.ys-fct-pcalc-breakdown__row--exchange_rate {
	margin-top: 0.25em;
}

.ys-fct-pcalc-breakdown__note {
	margin: 0.5em 0 0;
	font-size: 0.92em;
	line-height: 1.5;
	opacity: 0.7;
}

@media (max-width: 480px) {
	.ys-fct-pcalc-breakdown {
		max-width: none;
	}

	.ys-fct-pcalc-breakdown__row {
		gap: 1em;
	}
}