/* Yorkshire Boiler Quote Builder — mobile-first styles.
 * Scoped under .yb-qb so this never collides with theme styles; .btn /
 * .btn--primary etc. are reused when the active theme defines them (this
 * theme does), but every rule below also has a sane fallback so the builder
 * still looks reasonable if used with a different theme. */

.yb-qb {
	max-width: 480px;
	margin: 0 auto;
	font-family: inherit;
}

/* Defensive catch-all for every button in the builder (not just answer
 * options): this theme's sitewide `.btn{white-space:nowrap}` rule
 * (assets/css/style.css) is meant for short CTA labels and otherwise
 * clips/overflows a longer one instead of wrapping it — see
 * .yb-qb__option's own, more detailed comment below for the full root
 * cause. Scoped to `.yb-qb .btn` only, so nothing outside the builder is
 * affected. */
.yb-qb .btn {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.yb-qb__loading,
.yb-qb__error {
	text-align: center;
	padding: 24px 16px;
}

.yb-qb__step {
	padding: 8px 4px 24px;
}

.yb-qb__progress {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 10px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.yb-qb__question {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0 0 16px;
}

/* PROMPT 20 — optional short help text under a question (e.g. "Not sure?
   A combi boiler normally provides..."). Deliberately lighter/smaller than
   .yb-qb__question so it never competes with the question itself. */
.yb-qb__question-help {
	font-size: .9rem;
	line-height: 1.4;
	color: #666;
	margin: -8px 0 16px;
}

.yb-qb__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}

.yb-qb__option {
	display: block;
	width: 100%;
	/* min-width override + white-space/wrap: this theme's sitewide
	 * `.btn{white-space:nowrap}` rule (assets/css/style.css, ~line 859) is
	 * meant for short CTA labels like "Call Now", but this element also
	 * carries the theme's .btn/.btn--secondary classes, so without
	 * overriding it here a long answer label (e.g. "Replace my boiler,
	 * move it within the same room") never wraps — it overflows past the
	 * button's right edge and gets clipped at the viewport edge instead of
	 * dropping to a second line. `width:100%` alone does not fix this: a
	 * flex item's (`.btn` is display:inline-flex) default min-width is
	 * `auto`, i.e. its unwrapped intrinsic content width, which can still
	 * exceed the 100%-width box. This is the exact same bug class the
	 * theme's own CSS already documents and fixes in two other places
	 * (`.need-box .btn`, `.nav-desktop .sub-menu a`) — reusing that same
	 * proven two-part pattern here: min-width:0 lets the button actually
	 * shrink to its container's width, and white-space:normal (+
	 * overflow-wrap/word-break as a defensive fallback for a very long
	 * label on a very narrow screen) lets the label wrap onto a second
	 * line instead of forcing the box wider or clipping. */
	min-width: 0;
	box-sizing: border-box;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: left;
	padding: 14px 16px;
	font-size: 1rem;
	line-height: 1.35;
	border-radius: 10px;
	border: 1px solid #ccc;
	background: #fff;
	/* Explicit, not inherited: this element also carries the theme's
	 * .btn--secondary class (navy background, WHITE text) for its sizing/
	 * hover/focus behaviour, but the background above is deliberately
	 * overridden to white for an answer-option look. Without a color rule
	 * here, the button is left showing .btn--secondary's white text on this
	 * white background — invisible. Pinning color explicitly is what keeps
	 * the answer text readable regardless of what a theme's .btn--secondary
	 * sets, on any screen width. */
	color: #061a33;
	cursor: pointer;
	min-height: 48px; /* touch target */
}

.yb-qb__option:hover {
	border-color: #061a33;
}

/* PROMPT 24 — selected-answer contrast correction. Every state below is
 * scoped to .yb-qb__option specifically (the builder's own answer-tile
 * class), never to the theme's shared .btn/.btn--secondary — so nothing
 * outside the quote builder's answer tiles is touched by this rule.
 *
 * Preferred visual behaviour per the correction brief: a selected answer
 * shows a solid dark-navy background with WHITE text (not the theme's
 * navy — #061a33 — borrowed directly so this still matches even if the
 * builder is ever used with a different theme, per this file's own
 * fallback-design note above), with an obvious, separately-coloured focus
 * ring so keyboard users can always tell which control has focus
 * regardless of whether it's also the selected answer.
 *
 * Background AND text colour are always set TOGETHER in every rule below
 * (selected, selected+hover, selected+focus) — this is the actual fix for
 * the reported bug: before this change, .yb-qb__option--selected set a
 * text colour but relied on the unselected rule above for background,
 * so a background colour coming from anywhere else (a different theme's
 * .btn--secondary, a browser/OS forced-colours mode, etc.) could end up
 * paired with that leftover text colour instead of a colour chosen to be
 * readable against it. Setting both every time removes that possibility
 * entirely rather than relying on cascade order from elsewhere. */
.yb-qb__option--selected {
	background: #061a33;
	border-color: #061a33;
	color: #fff;
	box-shadow: 0 0 0 2px rgba(6, 26, 51, .35) inset;
}

.yb-qb__option--selected:hover {
	background: #0a2a52;
	border-color: #0a2a52;
	color: #fff;
}

/* Obvious, accessible keyboard-focus state — a visible ring on TOP of
 * whatever fill the tile already has (unselected white or selected navy),
 * so focus is always distinguishable from selection rather than relying on
 * the same green/navy colour to signal two different things at once.
 * :focus-visible (not plain :focus) so this only appears for keyboard/
 * assistive-tech focus, not every mouse click — consistent with the
 * theme's own .btn:focus-visible pattern (assets/css/style.css). */
.yb-qb__option:focus-visible {
	outline: 3px solid #f3d27a;
	outline-offset: 2px;
}

/* Disabled state — not currently reachable for an answer tile (none of the
 * wizard's question steps ever disable one), but defined defensively so a
 * future disabled option is never left to fall back to the theme's own
 * .btn[disabled] styling, which is tuned for full-width CTA buttons rather
 * than a tappable answer-tile grid. */
.yb-qb__option[disabled],
.yb-qb__option.is-disabled {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

.yb-qb__upgrades {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.yb-qb__upgrade {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .95rem;
}

.yb-qb__upgrade input {
	margin-top: 4px;
	min-width: 22px;
	min-height: 22px;
}

.yb-qb__note {
	color: #555;
	font-size: .85rem;
	margin-top: -8px;
	margin-bottom: 14px;
}

.yb-qb__price-lines {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	border-top: 1px solid #e3e3e3;
}

.yb-qb__price-lines li {
	padding: 10px 0;
	border-bottom: 1px solid #e3e3e3;
	font-size: .95rem;
}

.yb-qb__review-tag {
	display: inline-block;
	font-size: .72rem;
	background: #FFF3CD;
	color: #6b4e00;
	border-radius: 4px;
	padding: 2px 6px;
	margin-left: 6px;
}

.yb-qb__total {
	font-size: 1.3rem;
	margin: 14px 0 6px;
}

.yb-qb__disclaimer,
.yb-qb__finance-disclosure,
.yb-qb__privacy-note {
	font-size: .78rem;
	color: #666;
	line-height: 1.5;
}

.yb-qb__finance {
	margin-top: 14px;
	font-size: .9rem;
}

.yb-qb__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 10px;
}

.yb-qb__form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .9rem;
}

.yb-qb__form input[type="text"],
.yb-qb__form input[type="tel"],
.yb-qb__form input[type="email"],
.yb-qb__form input[type="file"] {
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	min-height: 44px;
}

/* Honeypot: visually hidden from sighted users without using display:none
 * (some bots skip display:none fields when deciding what to fill in), kept
 * out of the tab order, and never announced to screen reader users. */
.yb-qb__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yb-qb__model-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.yb-qb__model-grid--alternatives {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px dashed #ddd;
}

.yb-qb__model-card {
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
}

.yb-qb__model-offer {
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .72rem;
	color: #0a7a3c;
	font-weight: 700;
	margin: 0 0 4px;
}

.yb-qb__model-name {
	margin: 0 0 2px;
	font-size: 1.05rem;
}

.yb-qb__model-power {
	margin: 0 0 10px;
	color: #666;
	font-size: .85rem;
}

.yb-qb__model-price {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
}

/* PROMPT 21 — a price_on_request model (one of the 5 catalogue entries with
 * no usable supplier price — see boiler-quote-catalogue.json's
 * data_integrity_note) is never shown as if it had a figure: same position/
 * weight as .yb-qb__model-price so the card layout doesn't jump, but in a
 * neutral tone rather than the confident green/black of a real price. */
.yb-qb__model-price--unpriced {
	color: #6b4e00;
	font-weight: 600;
}

.yb-qb__model-warranty {
	margin: 0 0 12px;
	color: #555;
	font-size: .82rem;
}

/* Manufacturer/output filter controls shown above the "see more boilers"
 * alternatives list (brief §8) — never shown above the first 3 priority
 * recommendations, which are deliberately never filtered. */
.yb-qb__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 4px 0 14px;
}

.yb-qb__filter-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .82rem;
	color: #444;
	flex: 1 1 45%;
}

.yb-qb__filter-label select {
	padding: 10px 12px;
	font-size: .95rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	min-height: 42px;
	background: #fff;
}

.yb-qb__upgrade-note {
	margin: -4px 0 0 32px;
	color: #777;
	font-size: .78rem;
	line-height: 1.4;
}

/* The finance-price figure revealed only once "I am interested in finance"
 * is ticked (brief §3 — ticking the box must never silently replace the
 * cash price shown above it). */
.yb-qb__finance-figure {
	margin: 8px 0;
	font-size: .92rem;
}

.yb-qb__see-more {
	margin-bottom: 14px;
}

.yb-qb__review-note {
	background: #FFF3CD;
	color: #6b4e00;
	border: 1px solid #f0dca0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .85rem;
	margin: 4px 0 14px;
}

/* Shown in place of the "Online photo review" option when this install
 * hasn't proven its private photo folder is blocked from a public URL —
 * task #141's fail-closed gate. Same visual treatment as .yb-qb__review-
 * note (an amber, "needs your attention" note, not a hard error) since a
 * site survey is still fully available right alongside it. */
.yb-qb__photo-unavailable {
	background: #FFF3CD;
	color: #6b4e00;
	border: 1px solid #f0dca0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .85rem;
	margin: 10px 0 14px;
}

.yb-qb__photo-unavailable .btn {
	margin-top: 6px;
}

.yb-qb__checkbox-label {
	flex-direction: row !important;
	align-items: center;
	gap: 10px !important;
}

.yb-qb__checkbox-label input[type="checkbox"] {
	min-width: 22px;
	min-height: 22px;
}

.yb-qb__form select {
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	min-height: 44px;
	background: #fff;
}

.yb-qb__photo-label {
	font-size: .85rem;
	color: #555;
}

.yb-qb__done {
	text-align: center;
	padding: 24px 16px;
}

.yb-qb__reference {
	font-size: 1.15rem;
	margin: 10px 0 18px;
}

.yb-qb__back {
	margin-top: 10px;
}

.yb-qb__submit-error {
	background: #FDEDED;
	border: 1px solid #B3261E;
	color: #5c0d0d;
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 14px;
}

@media (min-width: 640px) {
	.yb-qb__options {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.yb-qb__option {
		flex: 1 1 45%;
	}
	.yb-qb__model-grid {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.yb-qb__model-card {
		flex: 1 1 29%;
	}
}

@media (min-width: 640px) {
	.yb-qb {
		max-width: 720px;
	}
}

/* ==========================================================================
 * v3.0.0 — 5-question journey, results (picks + comparison), payment panel,
 * Your Price. Same navy (#061a33) as above; green (#0b6b3a) marks 0% APR.
 * ======================================================================== */

.yb-qb { --ybq-navy: var(--navy, #061a33); --ybq-gold: var(--gold, #d7a53a); --ybq-blue: var(--navy, #061a33); --ybq-line: var(--border, #dce3ec); --ybq-soft: var(--off-white, #f7f8fa); --ybq-muted: #5b6573; --ybq-green: #0b6b3a; --ybq-green-soft: #e8f4ec; }
.yb-qb--wide { max-width: 1120px; }
.yb-qb__trust { font-size: .85rem; color: var(--ybq-muted); margin: 0 4px 10px; }

/* Progress: "Step N of 5 · About 45 seconds" + segmented bar */
.yb-qb__progress { text-transform: none; letter-spacing: 0; }
.yb-qb__progress-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.yb-qb__progress-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--ybq-line); }
.yb-qb__progress-seg--done, .yb-qb__progress-seg--current { background: var(--ybq-navy); }
.yb-qb__progress-label { display: block; }

.yb-qb__question { font-size: 1.5rem; line-height: 1.2; }
.yb-qb__option { display: flex; flex-direction: column; gap: 2px; }
.yb-qb__option-title { font-weight: 600; }
.yb-qb__option-help { font-size: .88rem; color: var(--ybq-muted); font-weight: 400; }
.yb-qb__option--selected .yb-qb__option-help { color: #dfe7f2; }

/* Screen 4 chips */
.yb-qb__field-groups { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 18px; }
.yb-qb__field-label { font-weight: 600; margin: 0 0 8px; }
.yb-qb__chips, .yb-qb__deposit-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.yb-qb__chip { min-width: 48px; min-height: 48px; padding: 0 14px; border: 1px solid #ccc; border-radius: 10px; background: #fff; color: var(--ybq-navy); font: inherit; font-size: 1.05rem; cursor: pointer; }
.yb-qb__chip:hover { border-color: var(--ybq-navy); }
.yb-qb__chip[aria-pressed="true"] { background: var(--ybq-navy); border-color: var(--ybq-navy); color: #fff; }
.yb-qb__chip:focus-visible, .yb-qb__link:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.yb-qb__chip--small { min-height: 40px; font-size: .95rem; }
.yb-qb__next[disabled] { opacity: .5; cursor: not-allowed; }

.yb-qb__link { background: none; border: 0; padding: 4px 0; color: var(--ybq-blue); text-decoration: underline; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.yb-qb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Results */
.yb-qb__results-head h3 { font-size: 1.5rem; margin: 0 0 8px; }
.yb-qb__eyebrow { margin: 0; color: var(--ybq-muted); font-size: .9rem; }
.yb-qb__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.yb-qb__summary-chip { background: var(--ybq-soft); border-radius: 999px; padding: 4px 12px; font-size: .88rem; }
.yb-qb__review-note { border: 1px solid #e0a800; background: #fff8e1; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: .92rem; }
.yb-qb__review-note p { margin: 0 0 6px; }
.yb-qb__review-reasons { margin: 0 0 6px 18px; padding: 0; }

.yb-qb__picks { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
@media (min-width: 900px) { .yb-qb__picks { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.yb-qb__pick { position: relative; border: 1px solid var(--ybq-line); border-radius: 14px; padding: 18px 16px 16px; background: #fff; }
.yb-qb__pick--best-value { border: 2px solid var(--ybq-gold); box-shadow: 0 4px 16px rgba(6,26,51,.08); }
.yb-qb__badge { position: absolute; top: -12px; left: 16px; background: var(--ybq-gold); color: var(--ybq-navy); font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.yb-qb__pick-label { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; color: var(--ybq-muted); margin: 0 0 6px; }
.yb-qb__model-offer { margin: 0; color: var(--ybq-muted); font-size: .9rem; }
.yb-qb__model-name-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.yb-qb__model-name { margin: 0; font-size: 1.25rem; }
.yb-qb__model-power { color: var(--ybq-muted); font-size: .9rem; }
/* v3.0.8 (C1) — the "Standard installed price · same for cash or finance" line under the price was removed;
   the price keeps the gap that line used to provide, so the finance box sits directly beneath it. */
.yb-qb__pick .yb-qb__model-price { font-size: 2rem; font-weight: 800; margin: 8px 0 6px; color: var(--ybq-navy); }

.yb-qb__finance-tiles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ybq-line); border-radius: 10px; overflow: hidden; }
.yb-qb__finance-tile { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.yb-qb__finance-tile--zero { background: var(--ybq-green-soft); color: var(--ybq-green); }
.yb-qb__finance-amount { font-size: 1.15rem; font-weight: 800; }
.yb-qb__from { font-size: .8rem; font-weight: 600; }
.yb-qb__per { font-size: .8rem; font-weight: 600; }
.yb-qb__finance-term { font-size: .78rem; font-weight: 600; }
.yb-qb__deposit-note { font-size: .82rem; margin: 8px 0; }
.yb-qb__rep-example, .yb-qb__finance-disclosure, .yb-qb__zero-apr-statement { font-size: .8rem; line-height: 1.45; background: var(--ybq-soft); border: 1px solid var(--ybq-line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.yb-qb__finance-disclosure { background: none; border: 0; padding: 0; color: var(--ybq-muted); }
.yb-qb__finance-guide, .yb-qb__compare-note { font-size: .82rem; color: var(--ybq-muted); }
.yb-qb__choose { margin-top: 12px; }
.yb-qb__payment-toggle { display: block; margin: 8px auto 4px; text-align: center; }
.yb-qb__model-warranty { font-size: .9rem; margin: 12px 0 6px; }
.yb-qb__warranty-years { font-size: 1.05rem; }
.yb-qb__contents { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.yb-qb__contents li, .yb-qb__price-lines li { position: relative; padding-left: 20px; margin: 3px 0; }
.yb-qb__contents li::before, .yb-qb__price-lines li::before { content: "✓"; position: absolute; left: 0; color: var(--ybq-green); font-weight: 700; }

/* Comparison table */
.yb-qb__compare { border: 1px solid var(--ybq-line); border-radius: 14px; padding: 16px; margin-bottom: 24px; }
.yb-qb__compare-title { margin: 0 0 10px; font-size: 1.15rem; }
.yb-qb__compare-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 12px; }
.yb-qb__compare-controls select { margin-left: 6px; min-height: 40px; }
.yb-qb__compare-head, .yb-qb__compare-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, .6fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; align-items: center; }
.yb-qb__compare-head { font-size: .78rem; font-weight: 700; color: var(--ybq-muted); padding: 6px 0; border-bottom: 1px solid var(--ybq-line); }
.yb-qb__compare-row { padding: 10px 0; border-bottom: 1px solid var(--ybq-line); font-size: .92rem; }
.yb-qb__compare-row .yb-qb__model-offer { display: inline; color: inherit; font-size: inherit; font-weight: 600; }
.yb-qb__compare-row .yb-qb__model-price { font-weight: 700; }
.yb-qb__model-price--unpriced { color: var(--ybq-muted); font-weight: 400 !important; }
.yb-qb__compare-choose { justify-self: end; }
@media (max-width: 699px) {
	.yb-qb__compare-head { display: none; }
	.yb-qb__compare-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "power warranty" "choose choose"; row-gap: 2px; }
	.yb-qb__compare-name { grid-area: name; }
	.yb-qb__compare-row .yb-qb__model-price { grid-area: price; text-align: right; }
	.yb-qb__compare-row .yb-qb__model-power { grid-area: power; }
	.yb-qb__compare-warranty { grid-area: warranty; text-align: right; font-size: .85rem; color: var(--ybq-muted); }
	.yb-qb__compare-choose { grid-area: choose; justify-self: start; min-height: 44px; }
}
.yb-qb__see-more { margin-top: 10px; }

/* Scope boxes */
.yb-qb__scope { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
@media (min-width: 700px) { .yb-qb__scope { grid-template-columns: 1fr 1fr; } }
.yb-qb__scope-box { border: 1px solid var(--ybq-line); border-radius: 14px; padding: 14px 16px; font-size: .9rem; }
.yb-qb__scope-box h4 { margin: 0 0 8px; font-size: 1rem; }
.yb-qb__scope-box ul { margin: 0 0 0 18px; padding: 0; }
.yb-qb__scope-box--included { background: var(--ybq-green-soft); border-color: #cfe6d7; }

/* Sticky mobile choose bar */
.yb-qb__sticky { display: none; }
@media (max-width: 899px) {
	/* v3.0.1 — sits ABOVE the theme's fixed bottom contact bar (--sticky-h) instead of underneath it. */
	.yb-qb__results { padding-bottom: calc(84px + var(--sticky-h, 0px)); }
	.yb-qb__sticky { display: flex; position: fixed; left: 0; right: 0; bottom: calc(var(--sticky-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 940; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--ybq-line); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
	.yb-qb__sticky-text { font-size: .92rem; }
	.yb-qb__sticky-btn { min-height: 44px; padding: 0 22px; }
}

/* Payment panel */
.yb-qb__payment-panel { border-top: 1px solid var(--ybq-line); margin-top: 10px; padding-top: 12px; }
.yb-qb__deposit-label { display: block; font-weight: 600; margin-bottom: 6px; }
.yb-qb__deposit-input { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.yb-qb__deposit-currency { font-weight: 700; }
.yb-qb__deposit-input input { width: 9em; min-height: 44px; font-size: 1.05rem; padding: 0 10px; border: 1px solid #b9c0c9; border-radius: 8px; }
.yb-qb__deposit-help { font-size: .8rem; color: var(--ybq-muted); margin: 6px 0 12px; }
.yb-qb__payment-options { display: flex; flex-direction: column; gap: 6px; }
.yb-qb__payment-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--ybq-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
.yb-qb__payment-option--selected { border-color: var(--ybq-navy); box-shadow: 0 0 0 1px var(--ybq-navy) inset; }
.yb-qb__payment-title { font-weight: 600; font-size: .92rem; }
.yb-qb__payment-sub { font-weight: 700; }
.yb-qb__breakdown { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 0; font-size: .95rem; }
.yb-qb__breakdown dt { color: var(--ybq-muted); }
.yb-qb__breakdown dd { margin: 0; text-align: right; font-weight: 700; }
.yb-qb__breakdown .yb-qb__breakdown-total { color: var(--ybq-navy); font-weight: 800; }

/* Your Price */
.yb-qb__price-card { border: 1px solid var(--ybq-line); border-radius: 14px; padding: 16px; margin: 10px 0 16px; }
.yb-qb__price-card h3 { margin: 0 0 6px; font-size: .95rem; color: var(--ybq-muted); font-weight: 600; }
.yb-qb__chosen-name { font-size: 1.35rem; margin: 0; }
.yb-qb__your-price .yb-qb__total { font-size: 2.3rem; font-weight: 800; margin: 6px 0 2px; color: var(--ybq-navy); }
.yb-qb__price-lines { list-style: none; margin: 12px 0 0; padding: 0; font-size: .92rem; }
.yb-qb__payment { border: 1px solid var(--ybq-line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.yb-qb__payment h4 { margin: 0 0 8px; }
.yb-qb__confirm { border: 1px solid var(--ybq-line); border-radius: 14px; padding: 16px; margin-top: 16px; }
.yb-qb__confirm h3 { margin: 0 0 6px; }

/* Contact form: post-price questions */
.yb-qb__choice-summary { background: var(--ybq-soft); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.yb-qb__radio-group { border: 1px solid var(--ybq-line); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.yb-qb__radio-group legend { font-weight: 600; padding: 0 4px; }
.yb-qb__radio { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.yb-qb__optional { font-weight: 400; color: var(--ybq-muted); }
@media (max-width: 420px) {
	.yb-qb__payment-option { grid-template-columns: auto 1fr; row-gap: 2px; }
	.yb-qb__payment-sub { grid-column: 2; }
}
.yb-qb__breakdown dt { font-size: .9rem; }

/* v3.0.1 */
.yb-qb__suitability { border-left: 4px solid var(--ybq-navy); background: var(--ybq-soft); border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: .9rem; }
.yb-qb__suitability p { margin: 0 0 6px; }
.yb-qb__suitability p:last-child { margin-bottom: 0; }
.yb-qb__suitability-notice { font-weight: 600; }
.yb-qb__review-reasons--confirm { margin-top: 0; }
.yb-qb__finance-lines { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ybq-line); border-radius: 10px; padding: 10px 12px; }
.yb-qb__finance-line p { margin: 0; }
.yb-qb__finance-line .yb-qb__finance-amount { font-size: 1.15rem; font-weight: 800; color: var(--ybq-navy); }
.yb-qb__finance-line--zero .yb-qb__finance-amount { color: var(--ybq-green); font-size: 1.02rem; }
.yb-qb__finance-line .yb-qb__finance-term { font-size: .8rem; font-weight: 600; color: var(--ybq-muted); }
.yb-qb__loan-details .yb-qb__rep-example { margin: 6px 0 0; }
.yb-qb__finance-compliance { margin: 0 0 24px; }
.yb-qb__finance-compliance .yb-qb__finance-disclosure { margin: 4px 0; overflow-wrap: anywhere; }
.yb-qb__finance-provider { font-weight: 600; }
.yb-qb__deposit-error { color: #a4161a; font-size: .85rem; font-weight: 600; margin: 0 0 8px; }
.yb-qb__scope-note { grid-column: 1 / -1; font-size: .85rem; color: var(--ybq-muted); margin: 0; }
.yb-qb__rep-example, .yb-qb__zero-apr-statement, .yb-qb__suitability { overflow-wrap: anywhere; }
/* v3.0.1 — themes that reset ul { list-style: none } (the live theme does) would otherwise run these lists together. */
.yb-qb__scope-box ul, .yb-qb__review-reasons { list-style: disc outside; margin: 0 0 6px 20px; padding: 0; }
.yb-qb__scope-box li, .yb-qb__review-reasons li { display: list-item; margin: 0 0 4px; }
.yb-qb__card-finance .yb-qb__finance-note { font-size: .9rem; line-height: 1.45; margin: 0 0 4px; }
/* v3.0.1 — the theme darkens .btn--secondary to near-black (#031120) on hover; inside the builder keep it a lighter navy. */
[data-yb-qb-root] .btn--secondary:hover, [data-yb-qb-root] .btn--secondary:focus-visible { background-color: #0a2a52; color: #fff; }

/* ==========================================================================
 * v3.0.4 — comparison table and recommendation-card layout.
 *
 * Root cause of the desktop overlap (live, 16 Oct 2026): the comparison rows
 * reuse .yb-qb__model-grid/.yb-qb__model-card (GTM reads those classes), and
 * the legacy ≥640px rule above turns every model grid into a wrapping row
 * with cards at flex-basis 29% — so the 5-column table rows were squeezed
 * three-across into ~180px boxes. On /boiler-quote/ the builder also sits in
 * a 640px page column, so viewport media queries never matched the space the
 * builder actually had.
 *
 * Fix: layout now follows the builder's OWN width (container queries), the
 * comparison rows are a plain stacked list, and the table only appears when
 * there is room for it. Class names are unchanged (GTM listeners).
 * ======================================================================== */
.yb-qb { container: ybqb / inline-size; }

/* Comparison: a plain list of rows, never the 3-across card grid. */
.yb-qb .yb-qb__compare-rows { display: block; margin: 0; padding: 0; border-top: 0; }
.yb-qb .yb-qb__compare-row { flex: none; width: auto; background: #fff; }
.yb-qb__compare-name { min-width: 0; overflow-wrap: break-word; }
.yb-qb .yb-qb__compare-row .yb-qb__model-offer { text-transform: none; letter-spacing: 0; }
.yb-qb__compare-row .yb-qb__model-power,
.yb-qb__compare-row .yb-qb__model-price { margin: 0; }
.yb-qb__compare-row .yb-qb__model-price { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.yb-qb__compare-row .yb-qb__model-price--unpriced { font-size: .88rem; line-height: 1.3; }
.yb-qb .yb-qb__compare-choose { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 96px; padding: 0 16px; border: 2px solid var(--ybq-navy); border-radius: 10px; background: #fff; color: var(--ybq-navy); text-decoration: none; text-align: center; white-space: nowrap; font-weight: 700; }
.yb-qb .yb-qb__compare-choose:hover { background: var(--ybq-navy); color: #fff; }
.yb-qb .yb-qb__compare-choose:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.yb-qb__compare-controls .yb-qb__filters { margin: 0; }
.yb-qb__compare-controls .yb-qb__filter-label { flex: 0 1 auto; }
.yb-qb__sort-label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: #444; }
.yb-qb__compare-controls select { margin-left: 0; min-height: 44px; padding: 8px 12px; font-size: .95rem; border: 1px solid #ccc; border-radius: 8px; background: #fff; max-width: 100%; }
.yb-qb .yb-qb__see-more { min-height: 44px; }

/* Narrow builder (phones, or any column under 600px): stacked cards. */
.yb-qb__compare-head { display: none; }
.yb-qb .yb-qb__compare-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "power warranty" "choose choose"; gap: 4px 12px; align-items: baseline; border: 1px solid var(--ybq-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; font-size: .95rem; }
.yb-qb__compare-row .yb-qb__compare-name { grid-area: name; }
.yb-qb__compare-row .yb-qb__model-price { grid-area: price; text-align: right; }
.yb-qb__compare-row .yb-qb__model-power { grid-area: power; }
.yb-qb__compare-row .yb-qb__compare-warranty { grid-area: warranty; text-align: right; font-size: .85rem; color: var(--ybq-muted); }
.yb-qb .yb-qb__compare-row .yb-qb__compare-choose { grid-area: choose; justify-self: stretch; margin-top: 8px; }

/* Wide builder: an aligned table. */
@container ybqb (min-width: 600px) {
	.yb-qb__compare-head { display: grid; }
	.yb-qb__compare-head,
	.yb-qb .yb-qb__compare-row { grid-template-columns: minmax(0, 1fr) 3.75rem 7.25rem 4.75rem 6.5rem; grid-template-areas: none; gap: 12px; align-items: center; }
	.yb-qb .yb-qb__compare-row { border: 0; border-bottom: 1px solid var(--ybq-line); border-radius: 0; padding: 10px 4px; margin: 0; }
	.yb-qb .yb-qb__compare-row:hover { background: var(--ybq-soft); }
	.yb-qb__compare-head { padding: 8px 4px; }
	.yb-qb__compare-row .yb-qb__compare-name,
	.yb-qb__compare-row .yb-qb__model-power,
	.yb-qb__compare-row .yb-qb__model-price,
	.yb-qb__compare-row .yb-qb__compare-warranty { grid-area: auto; text-align: left; }
	.yb-qb__compare-row .yb-qb__compare-warranty { font-size: .92rem; color: inherit; }
	.yb-qb .yb-qb__compare-row .yb-qb__compare-choose { grid-area: auto; justify-self: end; margin-top: 0; }
}

/* Recommendation cards: three across only when each card gets ~280px+. */
.yb-qb .yb-qb__picks { display: grid; grid-template-columns: 1fr; }
.yb-qb .yb-qb__pick { flex: none; }
@container ybqb (min-width: 880px) {
	.yb-qb .yb-qb__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
@container ybqb (max-width: 879px) {
	.yb-qb .yb-qb__picks { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Secondary specs in a labelled, expandable section (warranty detail + what's included). */
.yb-qb__warranty-short { margin: 12px 0 4px; font-size: .95rem; }
.yb-qb__details { border-top: 1px solid var(--ybq-line); margin-top: 8px; }
.yb-qb__details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; color: var(--ybq-navy); }
.yb-qb__details > summary::-webkit-details-marker { display: none; }
.yb-qb__details > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.yb-qb__details[open] > summary::after { content: "–"; }
.yb-qb__details > summary:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.yb-qb__details .yb-qb__model-warranty { margin: 0 0 8px; }
.yb-qb__details .yb-qb__contents { margin-bottom: 8px; }

/* Browsers without container queries (≈1–2%): fall back to viewport widths. */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.yb-qb__compare-head { display: grid; }
		.yb-qb__compare-head,
		.yb-qb .yb-qb__compare-row { grid-template-columns: minmax(0, 1fr) 3.75rem 7.25rem 4.75rem 6.5rem; grid-template-areas: none; gap: 12px; align-items: center; }
		.yb-qb .yb-qb__compare-row { border: 0; border-bottom: 1px solid var(--ybq-line); border-radius: 0; padding: 10px 4px; margin: 0; }
		.yb-qb__compare-row .yb-qb__compare-name,
		.yb-qb__compare-row .yb-qb__model-power,
		.yb-qb__compare-row .yb-qb__model-price,
		.yb-qb__compare-row .yb-qb__compare-warranty { grid-area: auto; text-align: left; }
		.yb-qb .yb-qb__compare-row .yb-qb__compare-choose { grid-area: auto; justify-self: end; margin-top: 0; }
	}
	@media (min-width: 1100px) { .yb-qb .yb-qb__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* ---------------------------------------------------------------------------
 * v3.0.8 (Stage 3 C1) — server-rendered loading state.
 * The shortcode outputs a static copy of question 1 (same markup as the live
 * question, so the same height) while the catalogue loads. Its buttons are
 * disabled; this keeps them looking like the real buttons (no greyed-out
 * flash when the live question replaces them) with a gentle pulse that is
 * switched off for people who prefer reduced motion.
 * ------------------------------------------------------------------------- */
.yb-qb__sr-status {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}
.yb-qb--preloading .yb-qb__option[disabled] {
	opacity: 1;
	cursor: progress;
	pointer-events: none;
	animation: yb-qb-preload-pulse 1.4s ease-in-out infinite;
}
@keyframes yb-qb-preload-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
	.yb-qb--preloading .yb-qb__option[disabled] { animation: none; }
}

/* ── v3.0.9 (Stage 5) — shorter contact form ─────────────────────────── */
.yb-qb__form { gap: 12px; }
.yb-qb__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yb-qb__field > label { font-size: .9rem; font-weight: 600; }
.yb-qb__field input { width: 100%; box-sizing: border-box; }
.yb-qb__input--postcode { text-transform: uppercase; max-width: 14em; }
.yb-qb__hint { font-size: .8rem; color: #555; line-height: 1.4; }
.yb-qb__contact-method { border: 1px solid #ccc; border-radius: 10px; padding: 8px 12px 12px; margin: 0; min-width: 0; }
.yb-qb__contact-method > legend { font-weight: 600; font-size: .95rem; padding: 0 4px; }
.yb-qb__contact-method > .yb-qb__hint { display: block; margin: 0 0 8px; }
.yb-qb__contact-pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .yb-qb__contact-pair { grid-template-columns: 1fr 1fr; } }
.yb-qb__contact-method--invalid { border-color: #B3261E; }
.yb-qb__field-error { margin: 2px 0 0; font-size: .85rem; font-weight: 600; color: #B3261E; line-height: 1.35; }
.yb-qb__field-error[hidden] { display: none; }
.yb-qb__field-error::before { content: "! "; }
.yb-qb__field--invalid input { border-color: #B3261E !important; box-shadow: 0 0 0 1px #B3261E; }
.yb-qb__form input[aria-invalid="true"] { border-color: #B3261E; }
.yb-qb__more { border: 1px solid #ddd; border-radius: 10px; padding: 0 12px; }
.yb-qb__more > summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; font-weight: 600; font-size: .92rem; list-style-position: inside; }
.yb-qb__more[open] > summary { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.yb-qb__more-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.yb-qb__more-body .yb-qb__radio-group { margin: 0; }
.yb-qb__form .yb-qb__privacy-note { margin: 0; }
.yb-qb__form button[type="submit"] { min-height: 52px; font-size: 1.05rem; }
/* Radio options on one line each (3.0.8 stacked the button above its text). */
.yb-qb__form label.yb-qb__radio { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; min-height: 40px; font-size: .95rem; }
.yb-qb__form label.yb-qb__radio input[type="radio"] { width: 20px; height: 20px; min-width: 20px; margin: 0; flex: 0 0 auto; }