/* Quantity discounts on the single product page — the info bar and the
 * selection cards.
 *
 * Both are built from theme variables with neutral fallbacks, so a store gets
 * its own accent without configuring anything: Blocksy publishes
 * `--theme-palette-color-1` (accent) and `-3` / `-4` (body and heading TEXT —
 * never 6/7, those are backgrounds). Everything else is a token defined once
 * on the block root below.
 */

.swa-qty-bar,
.swa-qty-cards {
	--swa-qty-accent: var(--theme-palette-color-1, #b45309);
	--swa-qty-text: var(--theme-palette-color-3, #374151);
	--swa-qty-heading: var(--theme-palette-color-4, #111827);
	--swa-qty-border: color-mix(in srgb, var(--swa-qty-text) 18%, transparent);
	--swa-qty-surface: color-mix(in srgb, var(--swa-qty-accent) 5%, transparent);
	--swa-qty-chip-bg: color-mix(in srgb, var(--swa-qty-accent) 10%, transparent);
	--swa-qty-chip-border: transparent;
	--swa-qty-chip-text: var(--swa-qty-accent);
	--swa-qty-chip-radius: 999px;
	--swa-qty-chip-size: 0.875rem;
	--swa-qty-radius: 0.75rem;
	--swa-qty-gap: 0.75rem;

	margin-top: 1.5rem;
	color: var(--swa-qty-text);
}

/* ----- info bar ---------------------------------------------------------
 *
 * A statement of the offer, not a live readout: nothing in here changes as the
 * customer picks a quantity. The price does that.
 */

.swa-qty-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--swa-qty-gap) 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--swa-qty-border);
	border-radius: var(--swa-qty-radius);
	background: var(--swa-qty-surface);
	color: var(--swa-qty-text);
}

.swa-qty-bar__heading {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--swa-qty-heading);
}

.swa-qty-bar__tiers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Spacing belongs to the container — the chips carry no margins of their
	   own, so nothing collapses against a theme rule. */
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* One chip per tier: quantity and saving read as a single token, the way the
   saving chip beside the price does. */
.swa-qty-bar__tier {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--swa-qty-chip-border);
	border-radius: var(--swa-qty-chip-radius);
	background: var(--swa-qty-chip-bg);
	line-height: 1.4;
}

.swa-qty-bar__qty {
	/* A step down from the chip's own size, whatever that has been set to. */
	font-size: calc( var(--swa-qty-chip-size) * 0.93 );
	/* The chip has its own background, so its text follows the chip's colour,
	   not the card's — otherwise a merchant who sets both gets a quantity in
	   the card's colour sitting on the chip's. */
	color: var(--swa-qty-chip-text);
	opacity: 0.8;
}

.swa-qty-bar__value {
	font-size: var(--swa-qty-chip-size);
	font-weight: 700;
	color: var(--swa-qty-chip-text);
}

/* ----- selection cards -------------------------------------------------- */

.swa-qty-cards {
	display: flex;
	flex-direction: column;
	gap: var(--swa-qty-gap);
}

.swa-qty-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--swa-qty-border);
	border-radius: var(--swa-qty-radius);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.swa-qty-card:hover {
	border-color: color-mix(in srgb, var(--swa-qty-accent) 45%, transparent);
}

.swa-qty-card.is-selected {
	border-color: var(--swa-qty-accent);
	box-shadow: 0 0 0 0.0625rem var(--swa-qty-accent);
}

/* The radio stays a real, focusable radio — the card is its label, and the
   focus ring below is what a keyboard user sees. */
.swa-qty-card__radio {
	flex: none;
	margin: 0;
	accent-color: var(--swa-qty-accent);
}

.swa-qty-card:focus-within {
	outline: 2px solid var(--swa-qty-accent);
	outline-offset: 2px;
}

.swa-qty-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 auto;
	min-width: 0;
}

.swa-qty-card__headline {
	font-size: 1rem;
	color: var(--swa-qty-heading);
}

.swa-qty-card__headline .amount,
.swa-qty-card__total .amount {
	font-weight: 700;
}

.swa-qty-card__note {
	font-size: 0.875rem;
	opacity: 0.75;
}

.swa-qty-card__total {
	flex: none;
	font-size: 1rem;
	color: var(--swa-qty-heading);
}

/* The quantity box, once the cards have taken over as the quantity control.
   Applied by the script, so it is never hidden when the script did not run. */
.swa-qty-hidden {
	display: none !important; /* beats theme rules that set .quantity display */
}

@media (max-width: 30rem) {
	.swa-qty-card {
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.swa-qty-card__total {
		flex: 1 0 100%;
		padding-left: 2rem;
	}
}

/* ----- the price we rewrote ---------------------------------------------
 *
 * The old price is context, not the answer: shrunk and lightened so the eye
 * lands on what the customer will actually pay. Sized in `em` against whatever
 * the theme gives the price element, and scoped to `.swa-qty-priced` — which
 * only exists on a price this module rewrote, so a native sale anywhere else
 * keeps the theme's own styling.
 */
.swa-qty-priced del {
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.6;
}

.swa-qty-priced ins {
	text-decoration: none;
}

/* ----- the saving chip beside the price ---------------------------------
 *
 * Written into the theme's own price element by the script, so it defines its
 * own tokens rather than inheriting the block scope above. Sized in `em` on
 * purpose: it sits inside a price whose font-size the theme sets, and should
 * scale with it instead of fighting it.
 */
.swa-qty-saving {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
	padding: 0.15em 0.5em;
	border: 1px solid var(--swa-qty-chip-border, transparent);
	border-radius: var(--swa-qty-chip-radius, 999px);
	background: var(--swa-qty-chip-bg, color-mix(in srgb, var(--theme-palette-color-1, #b45309) 12%, transparent));
	color: var(--swa-qty-chip-text, var(--theme-palette-color-1, #b45309));
	/* Sized against the price it sits beside — `em`, so a big price gets a
	   proportionate chip and a small one does not get a badge. It has its OWN
	   token: sharing the tier chips' fixed rem pinned it to a size that reads
	   as oversized next to a large price, which is what a fixed size does to a
	   thing whose neighbour scales. */
	font-size: var(--swa-qty-saving-size, 0.6em);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}