/* Seat Cover Finder — deliberately neutral so the Blocksy theme sets the tone. */

.scf-app [hidden] {
	display: none !important;
}

/* Stated rather than borrowed from the theme. Every field here is a width of
   100% with padding inside it, which only fits if the padding counts towards
   the width; a theme that has not set this would push the widget off the side
   of a phone, and the hero is on the homepage. */
.scf-app input,
.scf-app select,
.scf-app textarea,
.scf-app button,
.scf-hero input,
.scf-hero select,
.scf-hero .scf-hero-go {
	box-sizing: border-box;
}

.scf-app,
.scf-hero {
	--scf-border: color-mix(in srgb, currentColor 14%, transparent);
	--scf-accent: var(--theme-palette-color-1, #1e4fd8);
	/* A deep gold rather than a signal yellow: this marks answers already given
	   and a secondary button, neither of which is a warning. Yellow is only
	   legible with dark text on it, so the ink travels with it and the pair
	   works whichever way round the page's own colours run. */
	--scf-yellow: #f2b705;
	/* Ink for text sitting ON the yellow. Warm rather than pure black because
	   it is a yellow-tinted near-black and reads as part of the same colour. */
	--scf-yellow-ink: #241a00;
	/* The hero button's own fill. Black, not the yellow ink: at button size
	   that warm near-black reads as brown against a white card. */
	--scf-black: #000;
	--scf-radius: 10px;
	/* Card picture heights. Cards are ~200-290px wide depending on how many
	   fit the row, so these are the two numbers to nudge if a tile reads too
	   letterboxed. Coverage runs taller because the seat art is square.

	   A round 100 on purpose: it is the number Slim will remember when he wants
	   it changed, and 96 was not chosen for any reason worth keeping. */
	--scf-tile-h: 100px;
	--scf-cov-h: 122px;
	/* How far small print fades. 0.7 was the look, but the theme's ink is a
	   mid grey (#535353) and 0.7 of it on white is 3.6:1; 0.8 of it on the
	   tinted summary card is 4.4:1. 0.82 clears 4.5:1 on both. */
	--scf-faded: 0.82;
	/* The field colour is stated rather than inherited: a hero usually sits on
	   a photograph, and a transparent input over one is unreadable. */
	--scf-field-bg: var(--theme-palette-color-8, #fff);
	--scf-field-ink: var(--theme-palette-color-4, #111);
	/* The thanks once an enquiry has gone: the green the saving is written
	   in, and a wash and a line mixed from it rather than a second and third
	   green. There is no dark-mode block in this file to add a pair to: the
	   theme is light whatever the OS says, and every surface here is mixed
	   from currentColor so it follows the page's own ink. A translucent
	   green does the same, so the one pair reads on a white page and on a
	   dark section alike, and the text in the box keeps the page's ink. The
	   tick is white on the disc, which holds either way round. */
	--scf-ok: #1a7f37;
	--scf-ok-ink: #fff;
	--scf-ok-wash: color-mix(in srgb, var(--scf-ok) 10%, transparent);
	--scf-ok-line: color-mix(in srgb, var(--scf-ok) 40%, transparent);
}

.scf-app {
	max-width: 900px;
	margin: 0 auto;
	font-size: 15px;
}

.scf-step {
	padding: 1.25rem 0;
	border-top: 1px solid var(--scf-border);
}

.scf-step:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.scf-step-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	margin-bottom: 0.9rem;
}

.scf-num {
	display: inline-grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	/* The widget's yellow with its own ink, not the theme accent with white:
	   on this site the accent IS a yellow, and white on it is 1.5:1. The
	   trail's discs already wear this pair. */
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	font-size: 0.8em;
}

/* Vehicle selects */
.scf-selects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
}

.scf-selects select {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: transparent;
	color: inherit;
	font: inherit;
}

.scf-selects select:disabled {
	opacity: 0.5;
}

/* Variant disambiguation */
.scf-variants {
	margin-top: 1rem;
}

.scf-variants-label {
	margin: 0 0 0.6rem;
	font-size: 0.92em;
	opacity: var(--scf-faded);
}

.scf-variants-list {
	display: grid;
	gap: 0.5rem;
}

.scf-variant {
	display: grid;
	gap: 0.15rem;
	text-align: left;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.scf-variant:hover,
.scf-option:hover {
	border-color: var(--scf-accent);
}

.scf-variant.is-active,
.scf-option.is-active {
	border-color: var(--scf-accent);
	box-shadow: inset 0 0 0 1px var(--scf-accent);
}

.scf-variant-name {
	font-weight: 600;
}

.scf-variant-years,
.scf-variant-note {
	font-size: 0.85em;
	opacity: var(--scf-faded);
}

/* Option grids */
.scf-coverage-list,
.scf-range-list,
.scf-colour-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.6rem;
}

.scf-option {
	position: relative;
	display: grid;
	gap: 0.25rem;
	/* Grid tracks stretch by default, so a card shorter than its tallest
	   neighbour had the spare height shared out between every row — badges
	   drifted down and grew a dead band underneath. Pool it at the bottom
	   instead, and let nothing stretch to fill a track it did not ask for. */
	align-content: start;
	align-items: start;
	justify-items: start;
	text-align: left;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.scf-option-name {
	font-weight: 600;
}

.scf-option-price {
	font-size: 1.05em;
}

/* "Starting from $749.00" on a fabric tile, for a vehicle we price by hand.
   The words in front are the smaller part, as they are on the summary, so
   the number still reads as the number and the caveat reads second. */
.scf-option-from-label {
	font-size: 0.82em;
	font-weight: 600;
	opacity: var(--scf-faded);
}

.scf-option-saving {
	font-size: 0.82em;
	font-weight: 600;
	color: #1a7f37;
}

/* Origin tier badge — Aussie Made vs Ready Made must never be buried. */
.scf-badge {
	display: inline-block;
	align-self: start;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	font-size: 0.72em;
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.scf-badge-am {
	background: #0b6b3a;
	color: #fff;
}

.scf-badge-rm {
	background: #1f4ed8;
	color: #fff;
}

.scf-badge-br {
	background: #8a5a00;
	color: #fff;
}

/* Colour is the decision, so its picture gets the same room as the fabric's. */
.scf-swatch {
	justify-self: stretch;
	width: auto;
	height: var(--scf-tile-h);
	margin: -0.85rem -0.95rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--scf-border);
	border-radius: calc(var(--scf-radius) - 1px) calc(var(--scf-radius) - 1px) 0 0;
	background: #222;
}

/* Summary */
.scf-summary {
	margin-top: 1.25rem;
	padding: 1.1rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.scf-summary-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	font-size: 0.95em;
}

.scf-summary-key {
	opacity: var(--scf-faded);
}

.scf-summary-val {
	text-align: right;
	font-weight: 500;
}

.scf-notes {
	margin-top: 0.6rem;
}

.scf-note {
	margin: 0.35rem 0 0;
	font-size: 0.86em;
	opacity: var(--scf-faded);
}

.scf-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--scf-border);
}

/* For a quoted vehicle with no figure to show the price is empty and Add to
   cart hidden, and the strip they sat in still drew its rule and a line of
   dead space above the quote form. With nothing showing, the strip goes too.
   A browser without :has() keeps the gap, which is how it always was. */
.scf-actions:not(:has(> :not([hidden], :empty))) {
	display: none;
}

.scf-price-value {
	font-size: 1.5em;
	font-weight: 700;
}

/* "Starting from $738.00" on a vehicle priced by hand: the figure is the
   price, set exactly as a price is, and the words in front of it are the
   smaller part, so the eye lands on the number and the caveat reads
   second. */
.scf-price-from {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	flex-wrap: wrap;
}

.scf-price-from-label {
	font-size: 0.9em;
	font-weight: 600;
	opacity: var(--scf-faded);
}

.scf-price-saving {
	display: block;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--scf-ok);
}

.scf-add {
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--scf-radius);
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.scf-add[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* The last child of .scf-app, so it shows under whichever page is up. The
   same gap the steps keep between themselves. */
.scf-error {
	margin-top: 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--scf-radius);
	background: #fdecec;
	color: #8a1c1c;
	font-size: 0.9em;
}

/* Contact us, in the box's own red: the theme's link colour is its accent,
   which on this site is a yellow, and yellow on pink is 1.3:1. */
.scf-error a,
.scf-error a:hover {
	color: inherit;
	text-decoration: underline;
}

.scf-empty {
	opacity: var(--scf-faded);
	font-size: 0.9em;
}

/* Compact variant for hero/header placements */
.scf-compact .scf-step-head {
	display: none;
}

.scf-compact .scf-step {
	border: 0;
	padding: 0.5rem 0;
}

/* Range grid */
.scf-range-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.scf-range-card a {
	text-decoration: none;
	color: inherit;
}

.scf-range-img img {
	width: 100%;
	height: auto;
	border-radius: var(--scf-radius, 10px);
	display: block;
}

.scf-range-body {
	padding-top: 0.7rem;
	display: grid;
	gap: 0.3rem;
	justify-items: start;
}

.scf-range-body h4 {
	margin: 0;
}

.scf-range-price {
	margin: 0;
	font-weight: 600;
}

.scf-range-lead {
	margin: 0;
	font-size: 0.76em;
	opacity: var(--scf-faded);
}

/* Stats strip */
.scf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	text-align: center;
}

.scf-stats strong {
	display: block;
	font-size: 1.9em;
	line-height: 1.1;
}

.scf-stats span {
	font-size: 0.88em;
	opacity: var(--scf-faded);
}

@media (max-width: 600px) {
	.scf-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.scf-add {
		width: 100%;
	}
}

/* The quote button. Everything else about the panel lives with the photo
   styles further down, where the markup it belongs to is described. */
.scf-quote-send {
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--scf-radius);
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.scf-quote-send[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Both buttons also carry the theme's .button class, and the theme dresses
   that too: on this site its pair is white on the same yellow, and its :hover
   rule outranks a lone class. Named with the theme's class so these outrank
   it whichever order the stylesheets load in. The widget's yellow with its
   own ink, the pair the hero button and the trail already use. Hover goes a
   shade darker; the ink stays. */
.scf-app .scf-add.button,
.scf-app .scf-quote-send.button {
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
}

.scf-app .scf-add:not([disabled]):hover,
.scf-app .scf-quote-send:not([disabled]):hover {
	background: color-mix(in srgb, var(--scf-yellow) 86%, #000);
	color: var(--scf-yellow-ink);
}

/* ------------------------------------------------------------- combobox
   The native <select> stays in the DOM as the source of truth; it is only
   hidden from view, so the control still submits and still reports errors. */
.scf-combo {
	position: relative;
}

.scf-combo-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.scf-combo-input {
	width: 100%;
	padding: 0.7rem 2.2rem 0.7rem 0.8rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: transparent;
	color: inherit;
	font: inherit;
}

/* A field waiting on the one above it.
   Not a blanket fade: dimming the whole control takes the text down with the
   border and leaves grey on grey, which is what made these read as broken
   rather than as locked. The ink is muted on its own, and the caret becomes a
   padlock so the state is legible without reading anything. 82% because the
   page ink here is the theme's grey: 58% of #535353 is 2.8:1 on white, 82% is
   4.8:1 and the same fade the small print wears (--scf-faded). */
.scf-combo-input:disabled {
	opacity: 1;
	color: color-mix(in srgb, currentColor 82%, transparent);
	cursor: not-allowed;
}

/* In a hero the field is its own white surface with its own pinned ink, so the
   muted version has to come off that ink and not off the page's, which on a
   dark section is near white and would vanish here. */
.scf-hero .scf-combo-input:disabled {
	color: color-mix(in srgb, var(--scf-field-ink) 58%, transparent);
}

/* The theme fades every placeholder to 0.7, which off the finder's grey ink
   is 3.6:1. Full opacity here, with the prompt a touch lighter than a value
   so it still reads as a prompt. The finder only: the hero's field ink is
   near black, and 0.7 of that carries. */
.scf-app .scf-combo-input::placeholder,
.scf-app .scf-quote-grid input::placeholder,
.scf-app .scf-quote-grid textarea::placeholder {
	opacity: 1;
	color: color-mix(in srgb, currentColor 90%, transparent);
}

/* A locked field's prompt takes that field's muted ink as it is: 0.7 of an
   ink already muted was 2:1 in the finder and 2.7:1 in the hero. */
.scf-combo .scf-combo-input:disabled::placeholder {
	opacity: 1;
	color: inherit;
}

.scf-combo.is-disabled .scf-combo-caret {
	width: 11px;
	height: 9px;
	margin-top: -3px;
	border: 0;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.4;
}

.scf-hero .scf-combo.is-disabled .scf-combo-caret {
	color: var(--scf-field-ink);
}

/* The shackle. Drawn rather than set in a font: an emoji padlock is a
   different colour and a different size on every platform. */
.scf-combo.is-disabled .scf-combo-caret::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 7px;
	height: 5px;
	margin-left: -3.5px;
	margin-bottom: -1px;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.scf-combo-caret {
	position: absolute;
	top: 50%;
	right: 0.85rem;
	width: 0;
	height: 0;
	margin-top: -2px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	opacity: 0.55;
	cursor: pointer;
}

.scf-combo.is-disabled .scf-combo-caret {
	cursor: default;
}

.scf-combo-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 17rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: var(--theme-palette-color-8, #fff);
	color: inherit;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.scf-combo-item {
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A wash of the widget's yellow under the row's own ink. The theme accent
   with white on it was 1.5:1 on this site, where the accent is itself a
   yellow. */
.scf-combo-item:hover,
.scf-combo-item.is-active {
	background: color-mix(in srgb, var(--scf-yellow) 25%, transparent);
	color: inherit;
}

.scf-combo-empty {
	padding: 0.6rem 0.65rem;
	opacity: var(--scf-faded);
}

/* ---------------------------------------------------------- fabric imagery */
.scf-swatch {
	position: relative;
	overflow: hidden;
}

.scf-swatch.has-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* One rule for every tile that carries it: the fabric photo, the colour swatch
   and the locked strip's thumbnail are all position: relative, so this sits in
   the same corner of each. Big enough to hit on a phone; 22px was being missed. */
.scf-zoom {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.55);
	/* Stated, not inherited: the theme's link and button colours would
	   otherwise reach the icon through currentColor. */
	color: #fff;
	/* The icon is drawn at 1em, so this is its size. Zero line-height because
	   an SVG is inline by default and the line box it sits on would push it
	   off centre. */
	font-size: 18px;
	line-height: 0;
	cursor: zoom-in;
}

.scf-zoom-icon {
	display: block;
	width: 18px;
	height: 18px;
	/* The span is the button; the picture inside it is not a second target. */
	pointer-events: none;
}

.scf-zoom:hover,
.scf-zoom:focus-visible {
	background: rgba(0, 0, 0, 0.8);
}

.scf-range-photo,
.scf-coverage-photo,
.scf-summary-photo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--scf-border);
}

/* Full-bleed across the card. The grid sets justify-items:start, so these opt
   back out to stretch, and negative margins cancel the card's own padding —
   the fabric runs edge to edge instead of floating in a box. */
.scf-range-photo,
.scf-coverage-photo {
	justify-self: stretch;
	width: auto;
	height: var(--scf-tile-h);
	margin: -0.85rem -0.95rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--scf-border);
	border-radius: calc(var(--scf-radius) - 1px) calc(var(--scf-radius) - 1px) 0 0;
}

.scf-coverage-photo {
	height: var(--scf-cov-h);
}

/* Full bleed across the card, like the fabric tiles above it. This is the last
   look at the cloth before committing, so it runs the whole width and takes the
   crop off the top and bottom rather than sitting in a box with air around it.
   The negative margins cancel the card's own padding.

   No max-height: with an aspect-ratio set, a height cap silently becomes a
   WIDTH cap (420px tall at 16/9 stops the element growing past 746px), which is
   what was keeping it off the edges. */
.scf-summary-photo {
	width: auto;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: -1.1rem -1.1rem 0.9rem;
	border: 0;
	border-bottom: 1px solid var(--scf-border);
	border-radius: calc(var(--scf-radius) - 1px) calc(var(--scf-radius) - 1px) 0 0;
	cursor: zoom-in;
}

.scf-range-photo img,
.scf-coverage-photo img,
.scf-summary-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------- lightbox */
.scf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 4vmin;
	background: rgba(0, 0, 0, 0.82);
}

.scf-lightbox-inner {
	position: relative;
	max-width: min(900px, 92vw);
	margin: 0;
	text-align: center;
	color: #fff;
}

.scf-lightbox-inner img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

.scf-lightbox-inner figcaption {
	margin-top: 0.75rem;
	font-size: 0.95em;
}

.scf-lightbox-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* ------------------------------------------------- remembered vehicle */
.scf-known {
	margin-bottom: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.8rem 1rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.scf-known-text {
	display: grid;
	gap: 0.15rem;
}

.scf-known-years {
	font-size: 0.85em;
	opacity: var(--scf-faded);
}

/* Yellow, because it is the one thing on this step that is not a dropdown and
   it was being missed. Filled rather than outlined so it reads as deliberate,
   but in the widget's gold rather than the blue Add to cart wears: this is the
   way back, not the way forward. */
.scf-known-change {
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	font: inherit;
	font-size: 0.88em;
	font-weight: 600;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

.scf-known-change:hover {
	background: color-mix(in srgb, var(--scf-yellow) 86%, #000);
}

/* ------------------------------------------- fabric stated, not asked */
.scf-locked {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.25rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--scf-border);
	border-radius: var(--scf-radius);
}

.scf-locked-photo {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	flex: none;
	overflow: hidden;
	border-radius: 6px;
}

.scf-locked-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The strip's thumbnail is 64px, so the 32px magnifier the fabric cards
   carry would cover a quarter of it. Smaller here, still a comfortable tap. */
.scf-locked-photo .scf-zoom {
	width: 24px;
	height: 24px;
	right: 4px;
	bottom: 4px;
	font-size: 14px;
}

.scf-locked-photo .scf-zoom-icon {
	width: 14px;
	height: 14px;
}

.scf-locked-text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.scf-locked-label {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: var(--scf-faded);
}

.scf-locked-name {
	font-size: 1.05em;
}

.scf-locked-lead {
	font-size: 0.85em;
	opacity: var(--scf-faded);
	flex-basis: 100%;
}

/* --------------------------------------------- ready-made alternatives */
.scf-alt {
	margin-top: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--scf-accent);
	border-radius: var(--scf-radius);
	background: color-mix(in srgb, var(--scf-accent) 6%, transparent);
}

.scf-alt-head {
	display: grid;
	gap: 0.2rem;
	margin-bottom: 0.8rem;
}

.scf-alt-sub {
	font-size: 0.88em;
	opacity: var(--scf-faded);
}

.scf-alt-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.6rem;
}

.scf-alt-list .scf-option {
	background: var(--theme-palette-color-8, #fff);
}

/* -------------------------------------------- seat-row diagram (coverage) */
.scf-cov-art {
	justify-self: stretch;
	display: grid;
	place-items: center;
	height: var(--scf-cov-h);
	margin: -0.85rem -0.95rem 0.6rem;
	border-bottom: 1px solid var(--scf-border);
	border-radius: calc(var(--scf-radius) - 1px) calc(var(--scf-radius) - 1px) 0 0;
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.scf-cov-icon {
	height: calc(var(--scf-cov-h) - 24px);
	width: auto;
	display: block;
}

.scf-cov-body {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	opacity: 0.32;
}

.scf-cov-glass {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.26;
}

.scf-cov-seat {
	fill: currentColor;
	opacity: 0.15;
	transition: opacity 0.15s ease, fill 0.15s ease;
}

.scf-cov-seat.is-on {
	fill: var(--scf-accent);
	opacity: 1;
}

.scf-option.is-active .scf-cov-art {
	background: color-mix(in srgb, var(--scf-accent) 8%, transparent);
}

/* ------------------------------------------------- one question at a time
   The class is put on by the script rather than printed in the markup, so a
   widget whose script never runs is a long form rather than a blank space.
   [hidden] still wins over these, so a page with nothing to ask stays out of
   the way even when it is the current page. */
.scf-stepped [data-page] {
	display: none;
}

.scf-stepped [data-page].is-page-on {
	display: block;
}

.scf-stepped .scf-step {
	border-top: 0;
	padding-top: 0;
}

.scf-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--scf-border);
}

/* Next is Back's twin: the script puts it in right after Back whenever a later
   page has already been built, and the nav's own gap keeps them apart. */
.scf-back,
.scf-next {
	flex: 0 0 auto;
	border: 1px solid var(--scf-border);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.88em;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

.scf-back:hover,
.scf-next:hover {
	border-color: var(--scf-accent);
}

.scf-back[hidden],
.scf-next[hidden] {
	display: none !important;
}

/* Back on the left, the dots on the right, and every answer so far centred on
   a line of its own underneath. margin-left rather than space-between: on the
   first step there is no Back button and the dots still belong on the right. */
.scf-dots {
	display: flex;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	gap: 0.4rem;
	padding: 0;
	list-style: none;
}

/* The answers already given: numbered as their questions were, centred as one
   group, and quiet enough not to compete with the question being asked. A full
   width line inside the nav, so the rule underneath still closes off the whole
   of the chrome instead of cutting through the middle of it. */
.scf-trail {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* Without this the nav sizes itself to the longest answer, and one fabric
	   with a very long name drags the whole widget off the side of a phone. */
	min-width: 0;
	/* Four labelled answers do not fit across a phone at any spacing worth
	   having, so this is set for how it reads rather than to win a breakpoint.
	   Below about 700px they wrap to a line each, which is how the client wrote
	   them out in the first place. */
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scf-trail[hidden] {
	display: none !important;
}

/* The item is the wrapping unit, so a number, its word and its answer always
   stay together on one line; only the answer gives up characters. */
.scf-trail-item {
	min-width: 0;
	max-width: 100%;
}

.scf-trail-step {
	display: flex;
	align-items: center;
	/* The colon does the separating between the word and the answer, so the
	   gap only has to keep them from touching. */
	gap: 0.45em;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 0;
	/* A line of small text is a 19px tap target. The padding takes the button
	   to 32px and the matching negative margin gives the height straight back,
	   so the rows sit exactly where they did; only the hit area grew. Padding
	   rather than a pseudo-element because overflow: hidden would clip one. */
	padding: 6.5px 0;
	margin: -6.5px 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.82em;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

/* The same disc the step headings wear, in the widget's yellow. */
.scf-trail-num {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	font-size: 0.9em;
	font-weight: 700;
}

.scf-trail-label {
	flex: 0 0 auto;
	opacity: var(--scf-faded);
}

/* Punctuation, not wording: the translated string stays a plain word. */
.scf-trail-label::after {
	content: ":";
}

.scf-trail-text {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	border-bottom: 1px dotted currentColor;
}

.scf-trail-step:hover .scf-trail-text {
	color: var(--scf-accent);
	border-bottom-color: var(--scf-accent);
}

.scf-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.2;
}

.scf-dot.is-done {
	opacity: 0.45;
}

.scf-dot.is-on {
	background: var(--scf-accent);
	opacity: 1;
	transform: scale(1.35);
}

/* ------------------------------------------------------- quote & photos */

/* The quote panel sits under the same summary the shop shows, so it needs a
   line between the answers and the asking. */
.scf-quote {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--scf-border);
}

.scf-quote[hidden] {
	display: none !important;
}

.scf-quote-note {
	margin: 0 0 0.9rem;
	font-size: 0.9em;
	opacity: var(--scf-faded);
}

.scf-quote-seat {
	margin: -0.5rem 0 0.9rem;
	font-size: 0.86em;
	opacity: var(--scf-faded);
}

/* Three named columns, not auto-fit. With auto-fit the textarea underneath,
   which spans every track, made the browser fit four ~230px tracks across the
   panel and leave the fourth empty on the first row, so name, email and phone
   sat narrow with dead space on the right. minmax(0, 1fr) rather than a bare
   1fr so a field's own intrinsic width cannot unbalance the thirds. */
.scf-quote-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.scf-quote-grid label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.9em;
}

.scf-quote-grid input,
.scf-quote-grid textarea {
	/* The theme's reset is not ours to rely on: without this the padding is
	   added to the 100% and every field overflows its column. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--scf-border);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
}

.scf-quote-grid input:focus,
.scf-quote-grid textarea:focus {
	outline: 2px solid var(--scf-accent);
	outline-offset: 1px;
}

.scf-quote-wide {
	grid-column: 1 / -1;
}

/* Three fields across a phone are three fields nobody can type in. */
@media (max-width: 640px) {
	.scf-quote-grid {
		grid-template-columns: 1fr;
	}
}

/* iOS Safari zooms the page into any field it focuses that is set smaller
   than 16px, and the quote fields inherit their way down to 12.8px. Stated in
   pixels because that is the number Safari checks. */
@media (max-width: 768px) {
	.scf-app .scf-quote-grid input,
	.scf-app .scf-quote-grid textarea,
	.scf-app .scf-combo-input,
	.scf-app .scf-selects select {
		font-size: 16px;
	}
}

.scf-photos {
	margin-top: 1rem;
}

.scf-photos-label {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
}

.scf-photos-hint {
	margin: 0.2rem 0 0.6rem;
	font-size: 0.84em;
	opacity: var(--scf-faded);
}

/* The real input is hidden because no two browsers style it the same; the
   label is the button, and it stays keyboard reachable through the input.

   A dropzone rather than a button: the whole width of the panel, and tall
   enough that a photo dragged from a desktop lands on it without aiming. The
   script puts is-dragover on it while a drag is over it. */
.scf-photos-pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
	box-sizing: border-box;
	min-height: 120px;
	padding: 1.25rem;
	border: 2px dashed var(--scf-border);
	border-radius: var(--scf-radius);
	text-align: center;
	cursor: pointer;
}

.scf-photos-pick:hover,
.scf-photos-pick.is-dragover {
	border-color: var(--scf-accent);
	border-style: solid;
}

.scf-photos-pick.is-dragover {
	background: color-mix(in srgb, var(--scf-accent) 12%, transparent);
}

/* The two lines are not targets of their own: a drag crossing from the label
   onto its text would otherwise fire dragleave and blink the highlight off. */
.scf-photos-pick-text,
.scf-photos-pick-hint {
	pointer-events: none;
}

.scf-photos-pick-text {
	font-size: 1em;
	font-weight: 600;
}

.scf-photos-pick-hint {
	font-size: 0.85em;
	opacity: var(--scf-faded);
}

@media (prefers-reduced-motion: no-preference) {
	.scf-photos-pick {
		transition: border-color 0.15s ease, background-color 0.15s ease;
	}
}

.scf-photos-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.scf-photos-pick:focus-within {
	outline: 2px solid var(--scf-accent);
	outline-offset: 2px;
}

.scf-photos-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.scf-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	width: 96px;
}

.scf-photo-thumb {
	display: block;
	height: 72px;
	overflow: hidden;
	border: 1px solid var(--scf-border);
	border-radius: 6px;
}

.scf-photo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scf-photo-name {
	font-size: 0.72em;
	line-height: 1.25;
	opacity: var(--scf-faded);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sits on the corner of the thumbnail: the list is a row of pictures, and a
   remove button per row would double its height. */
.scf-photo-drop {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scf-border);
	border-radius: 50%;
	/* The page's own surface colour, as the combobox list has it. Not the OS
	   colour scheme: this theme is light whatever the OS says, and a dark disc
	   here was a near-black spot on a white page. */
	background: var(--theme-palette-color-8, #fff);
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* A 20px disc is a 20px tap target. The hit area is grown to 32px without
   the disc itself growing, which would crowd the thumbnail. 7 and not 6
   because the inset counts from inside the border. */
.scf-photo-drop::before {
	content: "";
	position: absolute;
	inset: -7px;
}

.scf-photo-drop:hover {
	border-color: var(--scf-accent);
	color: var(--scf-accent);
}

/* The thanks that replaces the form once the enquiry has gone: a tick and
   the words side by side in a wash of the tick's own green. Body size, not
   small print, since it is the one thing left under the answers to read.
   No top margin: it is only ever shown alone, straight under the rule the
   panel draws. .scf-app [hidden] outranks the flex here, so hidden still
   means gone. */
.scf-quote-done {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-top: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--scf-radius);
	border: 1px solid var(--scf-ok-line);
	background: var(--scf-ok-wash);
	font-size: 1em;
	line-height: 1.45;
}

.scf-quote-done-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--scf-ok);
}

.scf-quote-done-icon path {
	stroke: var(--scf-ok-ink);
}

.scf-quote-done-text {
	min-width: 0;
}

/* ------------------------------------------------------- hero vehicle picker
   [scf_vehicle_redirect]: make, model, year and a button, stacked and full
   width at every size. It goes inside a hero card, so it fills whatever it is
   put in rather than setting a width of its own, and the card is what decides
   how wide that is. Three fields side by side would be unusable on a phone and
   would read as a search bar on a desktop.

   Nothing here adds a margin above or below itself. The widget is four
   controls and ends at the last of them; the space around it belongs to the
   card, which is where somebody laying out a hero expects to set it. */
.scf-hero-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

/* The combobox swaps each select for a wrapper of its own, so both have to be
   named: whichever is there fills the line it is on. */
.scf-hero-row > .scf-combo,
.scf-hero-row > select {
	min-width: 0;
}

.scf-hero .scf-combo-input,
.scf-hero-row > select {
	padding: 0.95rem 2.4rem 0.95rem 1rem;
	border-radius: 12px;
	background: var(--scf-field-bg);
	color: var(--scf-field-ink);
	font-size: 1.05rem;
	line-height: 1.3;
}

.scf-hero .scf-combo-caret {
	color: var(--scf-field-ink);
	right: 1rem;
}

/* The card is usually white on a dark hero, so the page's own text colour is
   whatever shows against the dark, and the list underneath the field is white.
   Inheriting there is white on white. */
.scf-hero .scf-combo-list {
	color: var(--scf-field-ink);
}

/* A link wearing a button, so it still goes somewhere with the script off.
   Black with a lit yellow edge: the widget's yellow is on it at rest, where a
   hover colour would never be seen on a phone at all. The glow is held tight
   against the border rather than thrown wide, because this sits inside a white
   card and a wide halo on white is a smudge, and because a card that clips its
   contents would cut a wide one in half. One shadow, no animation, nothing for
   a slow phone to chew on. */
.scf-hero-go {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.05rem 1.7rem;
	border: 2px solid var(--scf-yellow);
	border-radius: 12px;
	background: var(--scf-black);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--scf-yellow) 40%, transparent),
		0 0 9px color-mix(in srgb, var(--scf-yellow) 42%, transparent);
}

/* Hover fills with the yellow that was only an edge. The ink goes dark with it:
   white on this yellow is unreadable, and the pair is the one the rest of the
   widget already uses. The glow goes, because the fill is the signal now. */
.scf-hero-go:hover {
	background: var(--scf-yellow);
	color: var(--scf-yellow-ink);
	box-shadow: none;
}

/* Focus is not hover. Two rings, yellow inside dark, so it is visible on the
   white card it usually sits in and on a dark section if it ever sits there,
   and so it cannot be mistaken for the glow it replaces. */
.scf-hero-go:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px var(--scf-yellow),
		0 0 0 6px var(--scf-black);
}

/* ---------------------------------------------------------- keyboard focus
   The same two rings on everything else in the widget that takes focus. The
   theme strips the browser's own ring and puts a 2px one in its accent on
   buttons only, which on this site is yellow on white: 1.5:1 on the buttons
   and nothing at all on the photo and magnifier, which are not buttons.
   Named under .scf-app so these outrank the theme's. The outline is kept and
   made transparent rather than removed: forced-colours mode drops shadows
   but paints outlines, so a ring survives there too. */
.scf-app .scf-summary-photo:focus-visible,
.scf-app .scf-zoom:focus-visible,
.scf-app .scf-trail-step:focus-visible,
.scf-app .scf-photo-drop:focus-visible,
.scf-app .scf-option:focus-visible,
.scf-app .scf-add:focus-visible,
.scf-app .scf-quote-send:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 0;
	box-shadow:
		0 0 0 3px var(--scf-yellow),
		0 0 0 6px var(--scf-black);
}

/* The chosen card keeps its inner line under the ring. */
.scf-app .scf-option.is-active:focus-visible {
	box-shadow:
		inset 0 0 0 1px var(--scf-accent),
		0 0 0 3px var(--scf-yellow),
		0 0 0 6px var(--scf-black);
}

/* Where the script puts the cursor after a page turn: the new question's
   heading, the summary at the end, and the error box when one shows. These
   are containers, not controls, so a single quiet ring held off the edge,
   and only when the turn came from the keyboard; a tap moves the cursor
   without drawing one. */
.scf-app .scf-step-head:focus-visible,
.scf-app .scf-summary:focus-visible,
.scf-app .scf-quote-done:focus-visible,
.scf-app .scf-error:focus-visible {
	outline: 2px solid var(--scf-yellow);
	outline-offset: 4px;
}