/**
 * Quantity discount ladder.
 *
 * Sits in the product summary column between the add-to-cart row and the
 * guarantee icons, so it reads as part of the buying decision rather than as a
 * promo banner bolted on afterwards. Card, hairline border and pill radius all
 * come from the same tokens as .sunny-swatch and the review box.
 */

.sunny-pricing {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.sunny-pricing__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-snug);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sunny-pricing__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	/* This grid is a child of the flex column above rather than of a grid item,
	   so min(100%, …) resolves - but the reviews block taught the lesson the
	   hard way, so the automatic minimum is released here too. */
	min-width: 0;
}

.sunny-pricing__tier {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.sunny-pricing__tier.is-active {
	border-color: var(--surface-brand);
	background: var(--brand-50);
}

.sunny-pricing__range {
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sunny-pricing__tier.is-active .sunny-pricing__range {
	color: var(--brand-700);
}

.sunny-pricing__saving {
	font-family: var(--font-display);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	color: var(--fg-primary);
}

.sunny-pricing__tier.is-active .sunny-pricing__saving {
	color: var(--brand-700);
}

.sunny-pricing__unit {
	font-size: var(--fs-caption);
	color: var(--fg-secondary);
	font-variant-numeric: tabular-nums;
}

.sunny-pricing__unit .amount {
	font-weight: var(--fw-semibold);
}

.sunny-pricing__note,
.sunny-pricing__nudge {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-normal);
}

.sunny-pricing__note {
	color: var(--fg-secondary);
}

/* The nudge is the one line meant to move the order value, so it gets the
   accent rather than the brand teal - same role as the sale badge. */
.sunny-pricing__nudge {
	font-weight: var(--fw-semibold);
	color: var(--surface-accent);
}

.sunny-pricing__nudge[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Cart and checkout
 *
 * engine.php appends this to the line subtotal, naming the rule that priced
 * it - a discount nobody can attribute reads as a pricing bug.
 * ------------------------------------------------------------------------ */

.sunny-pricing-saved {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-success);
}