/* FP Vehicle Finder 1.0.18
   Enqueued as a real stylesheet, never inline: inline style blocks get stripped
   by the used-CSS optimiser on these sites. Filename carries the version because
   query-string cache busting is ignored at the edge.

   The plate is the object. Everything else gets out of its way: a near-black
   band so the yellow detonates, the store's own red for the action, and one
   authored motion moment when the car's parts arrive. */

/* The badge slot lives on a product page with no finder around it, so it has to
   carry the tokens itself or its colours resolve to nothing. */
/*
 * EVERY top-level wrapper the plugin can emit must be listed here, or the custom
 * properties do not resolve inside it and the component renders with the right
 * dimensions and no colour at all. That is what happened to .fpvf-headeritem on
 * 19 September: the plate and its button came out fully transparent on the live
 * header because the wrapper was added in 1.0.12 and never added to this list.
 * build-check.mjs now fails the build if a wrapper is missing from it.
 */
.fpvf,
.fpvf-hero,
.fpvf-home,
.fpvf-navitem,
.fpvf-headeritem,
.fpvf-badge-slot,
.fpvf-fitbar {
	--fpvf-brand: #cc1111;
	--fpvf-brand-dark: #aa0e0e;
	--fpvf-brand-wash: #fff1f1;
	--fpvf-brand-edge: #efb5b5;

	--fpvf-ink: #16140f;
	--fpvf-ink-2: #55514a;
	--fpvf-line: #dcd9d3;
	--fpvf-surface: #fff;

	--fpvf-dark: #16140f;
	--fpvf-dark-2: #2a261d;
	--fpvf-on-dark: #f6f4ef;
	--fpvf-on-dark-2: #a8a49b;

	--fpvf-plate: #fcd905;
	--fpvf-plate-ink: #14130f;
	--fpvf-band: #1b3f8f;

	--fpvf-good: #06642c;
	--fpvf-go: #0f7a3a;         /* the "Found it" button: white on it is 5.45:1 */
	--fpvf-go-ink: #fff;
	--fpvf-panel: #f4f2ee;      /* the soft surface the two header routes share in the menu */        /* text on it; a store whose brand is already green flips this to dark */
	--fpvf-good-wash: #e8f5ec;
	--fpvf-good-edge: #b3ddc2;
	--fpvf-warn: #8a5300;
	--fpvf-warn-wash: #fff6e6;
	--fpvf-warn-edge: #ecd4a6;
	--fpvf-bad: #98240f;
	--fpvf-bad-wash: #fdeceb;
	--fpvf-bad-edge: #f1c2bc;

	--fpvf-r: 10px;
	--fpvf-r-sm: 6px;
	--fpvf-ease: cubic-bezier(.16, 1, .3, 1);

	color: var(--fpvf-ink, #16140f);
	box-sizing: border-box;
}

.fpvf *,
.fpvf-hero *,
.fpvf-navitem *,
.fpvf-headeritem * {
	box-sizing: inherit;
}

.fpvf-i { flex: 0 0 auto; }

/* Every one of these carries an explicit display, which outranks the browser's
   own [hidden] { display: none } and left the "see everything" link promising
   results before any existed. */
.fpvf [hidden],
.fpvf-hero [hidden],
.fpvf-navitem [hidden],
.fpvf-badge-slot [hidden] { display: none !important; }

/* ============================================================ the plate */

.fpvf-plate {
	display: inline-flex;
	align-items: stretch;
	background: var(--fpvf-plate, #fcd905);
	border: 1px solid #0f0e0b;
	border-radius: 8px;
	overflow: hidden;
	min-width: 0;
	flex: 1 1 15rem;
	max-width: 22rem;
	/* a plate is a pressed object, not a swatch: a real drop plus an inner lip */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(0, 0, 0, .18),
		0 1px 2px rgba(0, 0, 0, .28);
}

.fpvf-plate__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--fpvf-band, #1b3f8f);
	color: #fff;
	padding: 0 .5rem;
	flex: 0 0 auto;
}

.fpvf-plate__stars { opacity: .92; }

.fpvf-plate__cc {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
}

/*
 * PLATE LETTERING. Scoped so the theme cannot quietly win it.
 *
 * A lone .fpvf-plate__input is (0,1,0). Shoptimizer styles the field with
 * body input[type="text"] (0,1,2) and .site input[type="text"] (0,1,2), both of
 * which outrank it, so this block was losing font-size AND font-weight on every
 * full-size plate: 28px asked for, 15px rendered, in a plate only 37px tall.
 * The characters filled 41% of the plate when a real one is nearly full height.
 *
 * It went unnoticed because the compact header plate sets its own size from
 * .fpvf-plate--sm .fpvf-plate__input (0,2,0), which does win, and because the
 * static coming-soon plate is a span with nothing competing for it at all, so
 * the three plates on the site were quietly rendering three different ways.
 *
 * There are three competing theme selectors, and the strongest is
 * .site input[type="text"] at (0,2,1), inside a narrow-screen media query that
 * forces 16px. So a plain .fpvf-plate prefix at (0,2,0) is still not enough: it
 * wins on desktop and quietly loses again below 1024. Adding [type="text"]
 * takes these to (0,3,0), which beats all three at every width.
 *
 * Keep both the .fpvf-plate prefix AND the [type="text"] on any plate-input
 * declaration added here. Without them it silently does nothing on some
 * breakpoints and not others, which is exactly how this went unnoticed.
 */
.fpvf-plate .fpvf-plate__input[type="text"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--fpvf-plate-ink, #14130f);
	font-family: "Charles Wright", "UKNumberPlate", ui-sans-serif, Verdana, sans-serif;
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	padding: .45rem .5rem;
	line-height: 1.15;
	box-shadow: none;
}

.fpvf-plate__input::placeholder {
	/* measured 5.9:1 on the plate yellow; the old #8a7a06 was 3.10:1 and failed */
	color: #5a5000;
	opacity: 1;
}

.fpvf-plate__input:focus,
.fpvf-plate__input:focus-visible {
	outline: 3px solid var(--fpvf-brand, #cc1111);
	outline-offset: -3px;
	background: #fde436;
}

/*
 * The compact plate that sits beside the header search.
 *
 * Measured against the real header before drawing it: the search input is 54px
 * tall with a 30px pill radius, and there are 303px of room between the search
 * and the account icons. A plate stretched to 54px stops looking like a plate,
 * so it is drawn at true proportions (about 4.2:1) and the block is centred on
 * the search's own centre line instead. Plate 170 + gap 8 + button 105 = 283px.
 */
.fpvf-plate--sm {
	flex: 0 0 auto;
	max-width: none;
	width: 10.625rem;          /* 170px */
	height: 2.5rem;            /* 40px, 4.25:1 */
	border-radius: 5px;
}

.fpvf-plate--sm .fpvf-plate__band {
	width: 1.375rem;           /* 22px, the real band is about 13% of the plate */
	padding: 0;
	gap: 1px;
}

.fpvf-plate--sm .fpvf-plate__stars { width: 10px; height: 10px; }
.fpvf-plate--sm .fpvf-plate__cc { font-size: .4375rem; letter-spacing: .04em; }

.fpvf-plate--sm .fpvf-plate__input[type="text"] {
	font-size: 1.1875rem;      /* 19px: legible as plate lettering, not shouty */
	letter-spacing: .07em;
	padding: 0 .35rem;
	line-height: 1;
}

/*
 * The plate before the feature is switched on.
 *
 * Same object at the same size, so ticking the toggle moves nothing in the
 * header row. The lettering is a span rather than an input: there is no field
 * to click into and no button to press, because a greyed-out control invites
 * someone to type a reg and then says nothing back.
 */
.fpvf-plate--static .fpvf-plate__ghost {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 .35rem;
	/* the live placeholder's colour, measured at 5.9:1 on the plate yellow */
	color: #5a5000;
	font-family: "Charles Wright", "UKNumberPlate", ui-sans-serif, Verdana, sans-serif;
	font-size: 1.1875rem;
	font-weight: 400;          /* matches the live placeholder, measured, not assumed */
	letter-spacing: .07em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * The notice reads as a label, not an action. The live control is a brand-red
 * pill that says press me; this is deliberately quiet beside the plate so the
 * plate stays the thing you look at and nobody reaches for it.
 */
.fpvf-nav__soon {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	flex: 0 0 auto;
	height: 2.5rem;
	padding: 0 .875rem;
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: 999px;
	background: #f4f2ee;
	color: var(--fpvf-ink-2, #55514a);   /* 6.8:1 on that wash */
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.fpvf-nav__soon .fpvf-i { flex: 0 0 auto; opacity: .75; }

/* ============================================================ controls */

.fpvf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	flex: 0 0 auto;
	border: 0;
	border-radius: 8px;
	background: var(--fpvf-brand, #cc1111);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	padding: .8rem 1.35rem;
	cursor: pointer;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), transform .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}

.fpvf-btn:hover { background: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-btn:active { transform: translateY(1px); }
.fpvf-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* the theme fades every disabled button to 30%; ours stay solid while busy or found */
.fpvf-btn[disabled] { cursor: progress; background: var(--fpvf-brand-dark, #aa0e0e); opacity: 1; }
.fpvf-nav__go[disabled] { opacity: 1; }

/*
 * FOUND IT. The one authored moment on this surface: the button fills green and
 * the tick draws itself in. Success is carried here and nowhere else.
 */
.fpvf-tick { display: none; flex: 0 0 auto; }
.fpvf-tick path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.fpvf-btn,
.fpvf-nav__go { transition: background-color .22s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
.fpvf-btn.is-found,
.fpvf-btn.is-found[disabled],
.fpvf-btn.is-found:hover,
.fpvf-nav__go.is-found,
.fpvf-nav__go.is-found:hover {
	background: var(--fpvf-go, #0f7a3a);
	color: var(--fpvf-go-ink, #fff);
	cursor: default;
}
.fpvf-btn.is-found .fpvf-tick,
.fpvf-nav__go.is-found .fpvf-tick { display: block; }
.fpvf-btn.is-found .fpvf-tick path,
.fpvf-nav__go.is-found .fpvf-tick path { animation: fpvf-draw .36s .06s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) forwards; }
@keyframes fpvf-draw { to { stroke-dashoffset: 0; } }

.fpvf-btn .fpvf-spin { display: none; }
.fpvf-btn.is-busy .fpvf-spin { display: block; animation: fpvf-spin .7s linear infinite; }

@keyframes fpvf-spin { to { transform: rotate(360deg); } }

.fpvf-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .9375rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.fpvf-link:hover { text-decoration-thickness: 2px; }

.fpvf-status { margin: .75rem 0 0; font-size: .9375rem; min-height: 1.4em; }
.fpvf-status--error { color: var(--fpvf-bad, #98240f); font-weight: 600; }

/* ============================================================ hero band */

.fpvf-hero {
	background: var(--fpvf-dark, #16140f);
	color: var(--fpvf-on-dark, #f6f4ef);
	padding: clamp(2rem, 5vw, 3.5rem) 1rem;
	/* a hairline of brand along the top edge ties it to the store chrome */
	border-top: 3px solid var(--fpvf-brand, #cc1111);
}

.fpvf-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	max-width: 76rem;
	margin: 0 auto;
}

.fpvf-hero__heading {
	margin: 0 0 .5rem;
	color: #fff;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.fpvf-hero__sub {
	margin: 0 0 1.5rem;
	max-width: 42ch;
	color: var(--fpvf-on-dark-2, #a8a49b);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.fpvf-hero__form {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	align-items: center;
}

.fpvf-hero__alt { margin: .875rem 0 0; color: var(--fpvf-on-dark-2, #a8a49b); }
.fpvf-hero__alt .fpvf-link { color: var(--fpvf-on-dark, #f6f4ef); }

.fpvf-hero__testnote {
	margin: .75rem 0 0;
	font-size: .8125rem;
	color: var(--fpvf-on-dark-2, #a8a49b);
}

.fpvf-hero .fpvf-status { color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-hero .fpvf-status--error { color: #ff9c8b; }

/* the panel: a lit surface sitting on the dark band */
.fpvf-hero__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 16rem;
	padding: 1.25rem;
	background: var(--fpvf-dark-2, #2a261d);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--fpvf-r, 10px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.fpvf-hero__resting {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .875rem;
	flex: 1 1 auto;
	min-height: 13rem;
	color: var(--fpvf-on-dark-2, #a8a49b);
	text-align: center;
}

.fpvf-hero__resting p { margin: 0; font-size: .9375rem; }
.fpvf-hero__resting.is-gone { display: none; }
.fpvf-resting__art { color: var(--fpvf-on-dark-2, #a8a49b); }

.fpvf-hero__all {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	align-self: flex-start;
	margin-top: auto;
	color: #fff;
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	border-bottom: 2px solid var(--fpvf-brand, #cc1111);
	padding-bottom: 2px;
	transition: gap .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}

.fpvf-hero__all:hover { gap: .75rem; color: #fff; }

/* dark-panel variants of the shared pieces */
.fpvf-hero__panel .fpvf-current,
.fpvf-hero__panel .fpvf-group__title { color: #fff; }
.fpvf-hero__panel .fpvf-group__title { border-bottom-color: rgba(255, 255, 255, .14); }
.fpvf-hero__panel .fpvf-group__count { color: var(--fpvf-on-dark-2, #a8a49b); }
.fpvf-hero__panel .fpvf-chooser__intro { color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-hero__panel .fpvf-chooser__opt {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	color: var(--fpvf-on-dark, #f6f4ef);
}
.fpvf-hero__panel .fpvf-chooser__opt:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.fpvf-hero__panel .fpvf-chooser__years { color: var(--fpvf-on-dark-2, #a8a49b); }
.fpvf-hero__panel .fpvf-empty { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-hero__panel .fpvf-manual__intro { color: var(--fpvf-on-dark, #f6f4ef); }

@media (max-width: 860px) {
	.fpvf-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.fpvf-hero__panel { min-height: 0; }
	.fpvf-hero__resting { min-height: 9rem; }
}

/* ============================================================ the car bar */

.fpvf-current {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1rem;
	margin: 0;
	padding: .7rem .9rem;
	background: var(--fpvf-brand-wash, #fff1f1);
	border: 1px solid var(--fpvf-brand-edge, #efb5b5);
	border-radius: var(--fpvf-r-sm, 6px);
	font-size: .9375rem;
}

.fpvf-current__car { font-weight: 700; }
.fpvf-current .fpvf-link { margin-left: auto; }

.fpvf-hero__panel .fpvf-current {
	background: rgba(204, 17, 17, .16);
	border-color: rgba(255, 130, 120, .4);
}

/* ============================================================ results */

.fpvf__results,
.fpvf-hero__results { min-width: 0; }

.fpvf-group { margin: 0 0 1.75rem; }
.fpvf-group:last-child { margin-bottom: 0; }

.fpvf-group__title {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 .75rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--fpvf-line, #dcd9d3);
	font-size: 1.0625rem;
	line-height: 1.2;
}

.fpvf-group__count { font-size: .8125rem; font-weight: 400; color: var(--fpvf-ink-2, #55514a); }

/* the one authored moment: the car lands, then its parts deal in behind it */
.fpvf-enter .fpvf-current { animation: fpvf-slab .45s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both; }
.fpvf-enter li.product { animation: fpvf-deal .5s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both; }
.fpvf-enter li.product:nth-child(1) { animation-delay: .06s; }
.fpvf-enter li.product:nth-child(2) { animation-delay: .10s; }
.fpvf-enter li.product:nth-child(3) { animation-delay: .14s; }
.fpvf-enter li.product:nth-child(4) { animation-delay: .18s; }
.fpvf-enter li.product:nth-child(5) { animation-delay: .22s; }
.fpvf-enter li.product:nth-child(6) { animation-delay: .26s; }
.fpvf-enter li.product:nth-child(7) { animation-delay: .29s; }
.fpvf-enter li.product:nth-child(8) { animation-delay: .32s; }
.fpvf-enter li.product:nth-child(n+9) { animation-delay: .35s; }

@keyframes fpvf-slab {
	from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 100% 0 0); }
	to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

@keyframes fpvf-deal {
	from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(3px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================ chooser */

.fpvf-chooser__intro { margin: 0 0 .75rem; font-weight: 600; }

.fpvf-chooser__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fpvf-chooser__opt {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	width: 100%;
	text-align: left;
	padding: .65rem .75rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r-sm, 6px);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), background-color .15s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}

.fpvf-chooser__opt:hover { border-color: var(--fpvf-brand, #cc1111); background: var(--fpvf-brand-wash, #fff1f1); }
.fpvf-chooser__opt:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-chooser__name { font-weight: 600; }
.fpvf-chooser__years { font-size: .8125rem; color: var(--fpvf-ink-2, #55514a); }

/* the way out of a match we are not sure of: quiet, below the options */
.fpvf-chooser__none { margin: .75rem 0 0; font-size: .875rem; }
.fpvf-hero__panel .fpvf-chooser__none .fpvf-link { color: var(--fpvf-on-dark, #f6f4ef); }

/* ============================================================ manual picker */

.fpvf-manual__intro { margin: 0 0 .5rem; font-weight: 600; }
.fpvf-manual__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.fpvf-manual__row select {
	min-width: 11rem;
	max-width: 100%;
	padding: .55rem .6rem;
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r-sm, 6px);
	font: inherit;
	background: var(--fpvf-surface, #fff);
	color: var(--fpvf-ink, #16140f);
}

/* ============================================================ empty state */

.fpvf-empty {
	padding: 1.1rem 1.2rem;
	background: var(--fpvf-warn-wash, #fff6e6);
	border: 1px solid var(--fpvf-warn-edge, #ecd4a6);
	border-radius: var(--fpvf-r-sm, 6px);
}

.fpvf-empty__title { margin: 0 0 .35rem; font-weight: 700; }
.fpvf-empty p { margin: 0 0 .5rem; max-width: 62ch; }
.fpvf-empty p:last-child { margin-bottom: 0; }

.fpvf-empty .fpvf-btn { margin-top: .35rem; text-decoration: none; }

/* ============================================================ product badge */

.fpvf-badge {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .65rem .85rem;
	border-radius: var(--fpvf-r-sm, 6px);
	font-size: .9375rem;
	line-height: 1.4;
}

.fpvf-badge .fpvf-i { margin-top: .12em; }
.fpvf-badge--yes { background: var(--fpvf-good-wash, #e8f5ec); border: 1px solid var(--fpvf-good-edge, #b3ddc2); color: var(--fpvf-good, #06642c); font-weight: 600; }
.fpvf-badge--maybe { background: var(--fpvf-warn-wash, #fff6e6); border: 1px solid var(--fpvf-warn-edge, #ecd4a6); color: var(--fpvf-warn, #8a5300); }
.fpvf-badge--no { background: var(--fpvf-bad-wash, #fdeceb); border: 1px solid var(--fpvf-bad-edge, #f1c2bc); color: var(--fpvf-bad, #98240f); }
.fpvf-badge a { color: inherit; }

/* ============================================================ header plate */

.fpvf-navitem,
.fpvf-headeritem {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
}

.fpvf-navitem { margin-left: 1rem; }

.fpvf-nav {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* the action, pill-shaped so it rhymes with the search beside it */
.fpvf-nav__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	height: 2.5rem;
	padding: 0 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--fpvf-brand, #cc1111);
	color: #fff;
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}

.fpvf-nav__go:hover { background: var(--fpvf-brand-dark, #aa0e0e); color: #fff; }
.fpvf-nav__go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fpvf-nav__go .fpvf-spin { display: none; }
.fpvf-nav__go.is-busy .fpvf-nav__label { display: none; }
.fpvf-nav__go.is-busy .fpvf-spin { display: block; animation: fpvf-spin .7s linear infinite; }

/* the chooser drops out of the header rather than navigating on a guess */
.fpvf-nav__drop {
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	z-index: 120;
	width: min(26rem, 92vw);
	padding: .9rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r, 10px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
	animation: fpvf-drop .28s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes fpvf-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

.fpvf-nav__status {
	position: absolute;
	top: calc(100% + .35rem);
	right: 0;
	margin: 0;
	font-size: .8125rem;
	white-space: nowrap;
}
.fpvf-nav__status:empty { display: none; }

/* ============================================================ full finder */

.fpvf { margin: 0 0 2rem; }
.fpvf__heading { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -.015em; }
.fpvf__form { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.fpvf__alt { margin: .75rem 0 0; }
.fpvf__testnote { margin: .5rem 0 0; font-size: .8125rem; color: var(--fpvf-ink-2, #55514a); }
.fpvf__current { margin: 1.25rem 0 0; }
.fpvf__results { margin-top: 1.5rem; }

/* ============================================================ results page header band */

/*
 * One band: the page's single title on the left with the car beneath it, the
 * plate on the right, bottoms aligned so the button sits level with the last
 * line of the title block. A rule under the band separates asking from the
 * parts, so the car line needs no box of its own.
 */
.fpvf--page .fpvf__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.25rem 3rem;
	padding: clamp(1.75rem, 3.2vw, 2.75rem) 0 1.75rem;
	border-bottom: 1px solid var(--fpvf-line, #dcd9d3);
}

.fpvf__title {
	margin: 0;
	font-size: clamp(1.875rem, 3.2vw, 2.75rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	text-wrap: balance;
}

.fpvf__sub {
	margin: .75rem 0 0;
	max-width: 46ch;
	color: var(--fpvf-ink-2, #55514a);
	font-size: 1.0625rem;
	line-height: 1.5;
}
/* once a car is set, the car line takes the introduction's place */
.fpvf--page.has-car .fpvf__sub { display: none; }

.fpvf--page .fpvf__ask {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
}
.fpvf--page .fpvf__form { flex-wrap: nowrap; gap: .625rem; }
.fpvf--page .fpvf__form .fpvf-plate { flex: 0 0 auto; width: 19rem; max-width: none; }
.fpvf--page .fpvf-btn--go { align-self: stretch; padding-left: 1.5rem; padding-right: 1.5rem; }
.fpvf--page .fpvf__alt { margin: .75rem 0 0; font-size: .9375rem; }
.fpvf--page .fpvf-status { margin: .5rem 0 0; min-height: 0; text-align: right; max-width: 30rem; }
.fpvf--page .fpvf-status:empty { display: none; }

/* the car line: a statement under the title, not an alert box */
.fpvf--page .fpvf__current {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem .875rem;
	margin: .875rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 1.125rem;
	line-height: 1.35;
}
.fpvf--page .fpvf__current > span:not(.fpvf-current__tick) { min-width: 0; }
.fpvf--page .fpvf-current__car { font-weight: 700; color: var(--fpvf-ink, #16140f); }
.fpvf--page .fpvf-current__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: var(--fpvf-good-wash, #e8f5ec);
	color: var(--fpvf-good, #06642c);
	flex: 0 0 auto;
}
.fpvf--page .fpvf__current .fpvf-link { margin-left: 0; font-size: .9375rem; }

.fpvf--page .fpvf__results { margin-top: 2rem; }

@media (max-width: 860px) {
	.fpvf--page .fpvf__head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; }
	.fpvf--page .fpvf__ask { align-items: stretch; }
	.fpvf--page .fpvf__form { flex-wrap: wrap; }
	.fpvf--page .fpvf__form .fpvf-plate { flex: 1 1 15rem; width: auto; }
	.fpvf--page .fpvf-btn--go { flex: 1 1 auto; align-self: auto; }
	.fpvf--page .fpvf__alt,
	.fpvf--page .fpvf-status { text-align: left; }
	/* tick and sentence on one line, Change car tucked under the sentence */
	.fpvf--page .fpvf__current { align-items: flex-start; gap: .25rem .75rem; }
	.fpvf--page .fpvf__current > span:not(.fpvf-current__tick) { flex: 1 1 0; padding-top: .125rem; }
	.fpvf--page .fpvf__current .fpvf-link { flex-basis: 100%; margin-left: 2.5rem; text-align: left; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
	.fpvf-hero__form,
	.fpvf__form { gap: .5rem; }
	.fpvf-plate { flex: 1 1 100%; max-width: none; }
	.fpvf-hero__form .fpvf-btn,
	.fpvf__form .fpvf-btn { flex: 1 1 100%; }
	.fpvf-plate .fpvf-plate__input[type="text"] { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-btn.is-found .fpvf-tick path,
	.fpvf-nav__go.is-found .fpvf-tick path { animation: none; stroke-dashoffset: 0; }
	.fpvf-btn,
	.fpvf-nav__go { transition: none; }
	.fpvf-enter .fpvf-current,
	.fpvf-enter li.product,
	.fpvf-nav__drop { animation: none; }
	.fpvf-btn .fpvf-spin,
	.fpvf-nav__go .fpvf-spin { animation-duration: 1.6s; }
}

/* once the car name wraps, a right-pushed link reads as detached */
@media (max-width: 560px) {
	.fpvf-current { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.fpvf-current .fpvf-link { margin-left: 0; }
}

/* ============================================================ loading */

/* Shown the moment the page knows a car is coming, because the round trip that
   fetches it takes about a second and an empty panel reads as broken. */
.fpvf-loading {
	display: flex;
	flex-direction: column;
	gap: .875rem;
}

.fpvf-loading__bar {
	height: 2.6rem;
	border-radius: var(--fpvf-r-sm, 6px);
	background: currentColor;
	opacity: .1;
}

.fpvf-loading__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .875rem;
}

.fpvf-loading__grid i {
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--fpvf-r-sm, 6px);
	background: currentColor;
	opacity: .08;
	animation: fpvf-breathe 1.25s ease-in-out infinite;
}

.fpvf-loading__grid i:nth-child(2) { animation-delay: .1s; }
.fpvf-loading__grid i:nth-child(3) { animation-delay: .2s; }
.fpvf-loading__grid i:nth-child(4) { animation-delay: .3s; }
.fpvf-loading__grid i:nth-child(5) { animation-delay: .4s; }
.fpvf-loading__grid i:nth-child(6) { animation-delay: .5s; }

@keyframes fpvf-breathe {
	0%, 100% { opacity: .06; }
	50%      { opacity: .14; }
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-loading__grid i { animation: none; }
}

/* ============================================================ header row */

/*
 * The plate sitting beside the search in the main header row.
 *
 * The theme leaves a wide gap between the logo and the search and gives the
 * search a lot of width. Both are tightened here to make room, and ONLY while
 * .fpvf-header-on is on the body, so switching the placement off restores the
 * theme's own layout exactly.
 */
.fpvf-headeritem {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: .75rem;
}

/*
 * Measured on the live header before touching it: the search carried a 48px left
 * margin and ran 409px wide inside a 1385px row, which is the gap between the
 * logo and the search. Both are pulled in to make room for the plate, and only
 * while .fpvf-header-on is on the body, so switching the placement off puts the
 * theme's own spacing straight back.
 */
@media (min-width: 1025px) {
	.fpvf-header-on .main-header .site-branding { margin-right: .75rem; }
	.fpvf-header-on .main-header .site-search {
		margin-left: 1rem;
		flex: 0 1 22rem;
		max-width: 22rem;
		min-width: 0;
	}
}

/*
 * The header row runs out of room below 1025. Measured at 1016: the logo, the
 * theme's own search and the account/wishlist/checkout icons already fill the
 * 1001px row, so a 283px plate has nowhere to go and the plate is hidden.
 *
 * At 992 and below the theme turns its nav into a slide-out drawer with a
 * search box at the top, and the script moves the plate in underneath it. That
 * move is driven by the nav's real position:fixed state, not by this number, so
 * the two cannot drift apart: between 993 and 1024 the plate is simply hidden
 * and nothing is injected anywhere.
 */
@media (max-width: 1024px) {
	.fpvf-headeritem { display: none; }

	.fpvf-headeritem--drawer {
		display: block;
		position: static;
		margin: 0 0 1.25rem;
	}
	.fpvf-headeritem--drawer .fpvf-nav { flex-wrap: wrap; gap: .5rem; }

	/* full width and a 48px touch height, rather than the compact header size */
	.fpvf-headeritem--drawer .fpvf-plate--sm { width: 100%; height: 3rem; }
	.fpvf-headeritem--drawer .fpvf-plate__input[type="text"] { font-size: 1.25rem; }
	.fpvf-headeritem--drawer .fpvf-nav__go {
		width: 100%;
		height: 2.75rem;
		font-size: .875rem;
	}
	.fpvf-headeritem--drawer .fpvf-nav__soon {
		width: 100%;
		height: 2.75rem;
		justify-content: center;
		font-size: .875rem;
	}

	/* in a scrolling menu these have to sit in the flow, not float over it */
	.fpvf-headeritem--drawer .fpvf-nav__drop,
	.fpvf-headeritem--drawer .fpvf-nav__status {
		position: static;
		width: auto;
		margin-top: .5rem;
		white-space: normal;
		box-shadow: none;
	}
}

/* ============================================================ two routes: search and plate */

/*
 * The header offers two ways in: search the shop by product, or find parts by
 * registration. Side by side with no words, they read as two stuck-on boxes
 * (Garreth, 28 Sep 2026). So each route is named with a quiet field label on a
 * shared baseline, the plate and its button match each other at 46px on the
 * search's centre line, and a hairline separates the two. In the slide-out menu
 * the pair becomes one tinted panel at the top, the search on white inside it.
 *
 * The theme's search is left exactly as the search plugin draws it; only a label
 * is added, as a pseudo-element so nothing moves in its own markup. Everything is
 * scoped to .fpvf-header-on, so switching the placement off restores the theme.
 */
.fpvf-nav__title { display: none; }

@media (min-width: 1025px) {
	/* the search gives up 48px so the labelled plate fits without pushing the icons to a second row */
	.fpvf-header-on .main-header .site-search { position: relative; flex-basis: 19rem; max-width: 19rem; }

	/* both labels sit 6px above their control on one baseline: the search input
	   starts 10px inside its box and is 54px tall, the plate is 46px, both centred */
	.fpvf-header-on .main-header .site-search::before,
	.fpvf-headeritem .fpvf-nav__title {
		position: absolute;
		display: block;
		font-family: inherit;
		font-size: .78125rem;      /* 12.5px */
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0;
		color: var(--fpvf-ink-2, #55514a);
		white-space: nowrap;
		pointer-events: none;
	}
	.fpvf-header-on .main-header .site-search::before {
		content: "Search the shop";
		left: 1.625rem;            /* in line with where the pill's curve ends */
		bottom: calc(100% - 4px);
		/* 1.0.62: the search plugin's white wrapper starts 4px above its grey pill and was drawn over
		   the label, cutting the descender off "shop" (Garreth, 28 Sep). Draw the label on top. */
		z-index: 2;
	}
	.fpvf-headeritem .fpvf-nav__title {
		left: 1.25rem;             /* past the divider, on the plate's edge */
		bottom: calc(100% + 10px);
	}

	.fpvf-header-on .main-header .fpvf-headeritem {
		margin-left: 1rem;
		padding-left: 1.125rem;
		border-left: 1px solid var(--fpvf-line, #dcd9d3);
	}
	.fpvf-headeritem .fpvf-plate--sm { width: 12.25rem; height: 2.875rem; }   /* 196 x 46, 4.26:1 */
	.fpvf-headeritem .fpvf-plate--sm .fpvf-plate__input[type="text"] { font-size: 1.3125rem; }
	.fpvf-headeritem .fpvf-plate--sm .fpvf-plate__band { width: 1.5rem; }
	.fpvf-headeritem .fpvf-nav__go,
	.fpvf-headeritem .fpvf-nav__soon { height: 2.875rem; padding: 0 1rem; font-size: .875rem; }
}

.fpvf-go-arrow { display: none; }

/*
 * Compact header, switched on by the script only when the full row would wrap
 * (see fit() in the script). Smaller plate, square arrow button with the words
 * kept for screen readers, both labels kept, search a little narrower.
 */
@media (min-width: 1025px) {
	.fpvf-header-compact .main-header .site-search { flex-basis: 15rem; max-width: 15rem; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-plate--sm { width: 9.5rem; height: 2.5rem; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-plate--sm .fpvf-plate__input[type="text"] { font-size: 1.125rem; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-plate--sm .fpvf-plate__band { width: 1.375rem; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-nav__title { bottom: calc(100% + 13px); }
	.fpvf-header-compact .fpvf-headeritem .fpvf-nav__go { width: 2.5rem; height: 2.5rem; padding: 0; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.fpvf-header-compact .fpvf-headeritem .fpvf-go-arrow { display: block; }
	.fpvf-header-compact .fpvf-headeritem .fpvf-nav__go.is-busy .fpvf-go-arrow,
	.fpvf-header-compact .fpvf-headeritem .fpvf-nav__go.is-found .fpvf-go-arrow { display: none; }

	.fpvf-header-squeeze .main-header .fpvf-headeritem { display: none; }
	.fpvf-header-squeeze .main-header .site-search { flex-basis: 22rem; max-width: 22rem; }
	.fpvf-header-squeeze .main-header .site-search::before { content: none; }
}

@media (max-width: 1024px) {
	/* the plate section of the panel; stands alone as a full panel where :has() is missing */
	.fpvf-headeritem--drawer {
		margin: 0 0 .5rem;             /* the menu below brings its own 20px */
		padding: .875rem;
		background: var(--fpvf-panel, #f4f2ee);
		border-radius: 14px;
	}
	.fpvf-headeritem--drawer .fpvf-nav__title {
		display: block;
		margin: 0 0 .5rem;
		font-size: .8125rem;
		font-weight: 600;
		line-height: 1.2;
		color: var(--fpvf-ink-2, #55514a);   /* 6.8:1 on the panel */
	}
	.fpvf-headeritem--drawer .fpvf-plate--sm { height: 3rem; border-radius: 6px; }
	.fpvf-headeritem--drawer .fpvf-nav__go { height: 2.875rem; }

	/* where the browser can see the pair, join them into one panel */
	@supports selector(:has(+ *)) {
		.fpvf-header-on .site-search:has(+ .fpvf-headeritem--drawer) {
			margin: .75rem 0 0;
			/* 4px + the search plugin's own 10px = the 14px the plate section uses */
			padding: .25rem .25rem .375rem;
			background: var(--fpvf-panel, #f4f2ee);
			border-radius: 14px 14px 0 0;
		}
		.fpvf-header-on .site-search:has(+ .fpvf-headeritem--drawer)::before {
			content: "Search the shop";
			display: block;
			margin: .625rem .625rem 0;
			font-size: .8125rem;
			font-weight: 600;
			line-height: 1.2;
			color: var(--fpvf-ink-2, #55514a);
		}
		/* the search plugin paints its own white box with 10px padding; inside the panel
		   that read as a box within a box, so it goes transparent and only the pill stays white */
		.fpvf-header-on .site-search:has(+ .fpvf-headeritem--drawer) .dgwt-wcas-sf-wrapp {
			background: transparent;   /* keep its padding: its magnifier is positioned for it */
		}
		.fpvf-header-on .site-search:has(+ .fpvf-headeritem--drawer) input[type="search"] {
			background: #fff;
			box-shadow: 0 1px 2px rgba(22, 20, 15, .06);
			border-color: var(--fpvf-line, #dcd9d3);
		}
		.fpvf-header-on .site-search + .fpvf-headeritem--drawer {
			padding-top: 1rem;
			border-top: 1px solid var(--fpvf-line, #dcd9d3);
			border-radius: 0 0 14px 14px;
		}
	}
}

/* ============================================================ card note */

/*
 * The "should fit" caveat, printed inside the theme's own product card by the
 * woocommerce_after_shop_loop_item hook. Deliberately quiet: the card is the
 * store's design and this is an annotation on it, not a competing element.
 */
.fpvf-cardnote {
	display: block;
	margin: .35rem 0 0;
	font-size: .75rem;
	line-height: 1.35;
	color: #8a5300;
}

/* the finder's own group heading above each theme loop */
.fpvf-group ul.products { margin-bottom: 0; }

/* ============================================================ hero grid */

/*
 * Two across in the hero panel, never four.
 *
 * The panel is a narrow column beside the plate. The shop's own card is built
 * for a full-width archive, so four of them in here collapse to slivers with
 * the title wrapping to five lines. The server is asked for 2 columns and the
 * grid is pinned here too, because the theme sets widths on the list items.
 */
.fpvf-hero__panel ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fpvf-hero__panel ul.products::before,
.fpvf-hero__panel ul.products::after { display: none; }

.fpvf-hero__panel ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/*
 * The card keeps the shop's own colours.
 *
 * These rules used to recolour the card for the dark panel, on the assumption
 * that the card was transparent and sat on the panel background. It is not:
 * Shoptimizer paints li.product solid white. So the price was being set to #fff
 * ON WHITE, a contrast ratio of 1.00, and it was invisible at every width. The
 * title only survived because the theme sets its own #222 over the top.
 *
 * The panel still sets light text for its own headings, and the card would
 * inherit that, so the card is put back to the ink it uses everywhere else on
 * the site. Everything inside it then reads exactly as it does on a category
 * page: the theme's own title colour, and its own slate price.
 */
.fpvf-hero__panel ul.products li.product { color: var(--fpvf-ink, #16140f); }

@media (max-width: 600px) {
	.fpvf-hero__panel ul.products { gap: .625rem; }
}

/* ============================================================ older Safari */

/*
 * :focus-visible landed in Safari 15.4. On anything older every focus ring
 * above is simply dropped, which leaves keyboard users with no visible focus at
 * all. This restores a ring on plain :focus only where :focus-visible is not
 * understood, so current browsers keep the better behaviour.
 */
@supports not selector(:focus-visible) {
	.fpvf-btn:focus,
	.fpvf-nav__go:focus,
	.fpvf-chooser__opt:focus,
	.fpvf-card__link:focus,
	.fpvf-link:focus,
	.fpvf-manual__row select:focus {
		outline: 3px solid var(--fpvf-brand, #cc1111);
		outline-offset: 2px;
	}
	.fpvf-plate__input:focus {
		outline: 3px solid var(--fpvf-brand, #cc1111);
		outline-offset: -3px;
	}
}

/* Flex gap arrived in Safari 14.1. Below that the plate and its button would
   sit flush together, so give the button a margin that modern browsers zero
   out again via the gap already set on the row. */
@supports not (gap: 1px) {
	.fpvf-nav__go { margin-left: .5rem; }
	.fpvf-hero__form .fpvf-btn,
	.fpvf__form .fpvf-btn { margin-left: .625rem; }
}

/* ============================================================ results grid */

/*
 * Match the shop's own responsive ladder.
 *
 * The theme scopes its mobile product-grid rules to archive pages, so on the
 * finder's results page the loop stayed at four columns all the way down and
 * gave 92px cards on a phone. Measured off a real category page at the same
 * widths: 1 column at 414 and below, 2 at 600, 3 at 768, and the theme's own
 * desktop layout from 1025 up. These rules reproduce that and stop at 1024 so
 * the desktop layout is left completely alone.
 */
@media (max-width: 1024px) {
	.fpvf-group ul.products {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		/* the theme bleeds product lists 15px past each edge with calc(100% + 30px);
		   with its negative margins zeroed that width overflowed the phone by 30px */
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.fpvf-group ul.products::before,
	.fpvf-group ul.products::after { display: none; }
	.fpvf-group ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
}

/*
 * One card per row on every phone, portrait or landscape (Garreth, 28 Sep 2026).
 * Two across squashes the image, title and price together, so the ladder goes
 * straight from three across on a tablet to one across below 768.
 */
@media (max-width: 767px) {
	.fpvf-group ul.products { grid-template-columns: 1fr; }
}

/*
 * The hero panel stays two across at every width, including on a phone.
 *
 * It is a teaser: six products with "see everything that fits" underneath, not
 * a listing. One across made it 2,900px of cards and turned the hero band into
 * three screens of scrolling before the rest of the page began.
 *
 * It needs restating here because the ladder above matches
 * .fpvf-group ul.products and the panel's lists are .fpvf-group too, so the
 * teaser was being dragged down with the results. Identical specificity, so
 * source order is what decides: this has to stay last in the file.
 */
.fpvf-hero__panel ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*
 * On a phone the teaser goes one across, like everything else on the site.
 *
 * Two across at 375 gives a 143px card, and the shop itself never renders one
 * that narrow: its own category page drops to a single full-width card at this
 * width. Two across here produced exactly the squashed column the full-size
 * card is meant to avoid, with the title running to six lines.
 *
 * One across at full size would be six 485px cards, nearly 3,000px of hero
 * before the page proper starts, so the teaser shows the first two and
 * "see everything that fits" underneath carries on to the results page. The
 * count in the group heading still reports the true total.
 */
@media (max-width: 767px) {
	.fpvf-hero__panel ul.products { grid-template-columns: 1fr; }
	.fpvf-hero__panel ul.products li.product:nth-child(n + 3) { display: none; }
}

/* ============================================================ homepage band (1.0.46)
 *
 * [fp_vehicle_finder_home]: two ways in, under the homepage hero. Number plate on
 * the left on the store's dark surface, where the yellow plate is the object the
 * eye lands on; the store's own product search on the right on a lit panel. Both
 * fields are drawn to the same 64px height so the two halves read as one pair.
 * Colours come from the per-store tokens on the section (token_attr), so the same
 * CSS is green on GSM, blue on SS4U and red on BB4U.
 *
 * Specificity: the theme styles h2 by element and inputs with (0,2,1); FiboSearch's
 * pirx style reaches (0,4,1). Every override below is written to beat those.
 */

.fpvf-home {
	box-sizing: border-box;
	font-family: inherit;
	color: var(--fpvf-ink, #16140f);
	padding: clamp(1.75rem, 4vw, 3rem) 1.25rem clamp(2rem, 4.5vw, 3.25rem);
}

.fpvf-home *,
.fpvf-home *::before,
.fpvf-home *::after { box-sizing: border-box; }

.fpvf-home [hidden] { display: none !important; }

.fpvf-home__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 1360px;
	margin: 0 auto;
	align-items: stretch;
}

.fpvf-home--solo .fpvf-home__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 52rem;
}

.fpvf-home__col {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- the plate half: the store's dark surface ---------- */

.fpvf-home__col--plate {
	background: var(--fpvf-dark, #16140f);
	color: var(--fpvf-on-dark, #f6f4ef);
	box-shadow: 0 18px 40px -18px rgba(12, 12, 10, .55);
	/* a hairline of brand along the top, the same device as the hero band */
	border-top: 3px solid var(--fpvf-brand, #cc1111);
}

/* ---------- the search half: a lit panel ---------- */

.fpvf-home__col--search {
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	box-shadow: 0 14px 34px -20px rgba(20, 24, 29, .28);
}

/* ---------- type ---------- */

.fpvf-home h2.fpvf-home__heading {
	margin: 0 0 .5rem;
	font-family: inherit;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--fpvf-ink, #16140f);
}

.fpvf-home .fpvf-home__col--plate h2.fpvf-home__heading { color: #fff; }

.fpvf-home p.fpvf-home__sub {
	margin: 0 0 1.375rem;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fpvf-ink-2, #55514a);
}

.fpvf-home .fpvf-home__col--plate p.fpvf-home__sub { color: var(--fpvf-on-dark-2, #a8a49b); }

/* ---------- the plate form ---------- */

.fpvf-home__form {
	display: flex;
	gap: .625rem;
	align-items: stretch;
}

.fpvf-plate.fpvf-plate--home {
	flex: 1 1 auto;
	max-width: none;
	height: 4rem;              /* 64px, matched by the button and the search field */
	border-radius: 9px;
}

.fpvf-plate--home .fpvf-plate__band {
	width: 2.25rem;
	padding: 0;
}

.fpvf-home .fpvf-plate--home .fpvf-plate__input[type="text"] {
	font-size: clamp(1.75rem, 3vw, 2.125rem);
	letter-spacing: .1em;
	padding: 0 .75rem;
	height: 100%;
}

.fpvf-home .fpvf-home__go {
	min-width: 9.5rem;
	height: 4rem;
	padding: 0 1.5rem;
	border-radius: 9px;
	font-size: 1.0625rem;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}

.fpvf-home .fpvf-home__go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.fpvf-home .fpvf-home__col--plate .fpvf-status { color: var(--fpvf-on-dark, #f6f4ef); margin: .75rem 0 0; }
.fpvf-home .fpvf-home__col--plate .fpvf-status:empty { display: none; }
.fpvf-home .fpvf-home__col--plate .fpvf-status--error { color: #ff9c8b; }

/* ambiguous plates, no cover and the manual picker open here, on a lit card so the
   chooser keeps its normal light styling */
.fpvf-home__drop {
	margin-top: 1rem;
	padding: 1rem 1.125rem;
	background: var(--fpvf-surface, #fff);
	color: var(--fpvf-ink, #16140f);
	border-radius: 10px;
	max-height: 26rem;
	overflow: auto;
	overscroll-behavior: contain;
}

.fpvf-home p.fpvf-home__alt {
	margin: auto 0 0;
	padding-top: 1.125rem;
	font-size: .9375rem;
	color: var(--fpvf-on-dark-2, #a8a49b);
}

.fpvf-home .fpvf-home__alt .fpvf-link { color: var(--fpvf-on-dark, #f6f4ef); }

.fpvf-home p.fpvf-home__saved {
	margin: .75rem 0 0;
	font-size: .9375rem;
}

.fpvf-home .fpvf-home__saved a {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--fpvf-brand, #cc1111);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ---------- the search field, drawn to match the plate ---------- */

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp {
	max-width: none;
	width: 100%;
	margin: 0;
	min-width: 0;
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	padding: 0;
	background: transparent;
	border-radius: 9px;
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 4rem;
	padding: 0 1.25rem 0 3.25rem;
	border: 2px solid var(--fpvf-line, #dcd9d3);
	border-radius: 9px;
	background: #fff;
	color: var(--fpvf-ink, #16140f);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(20, 24, 29, .06);
	transition: border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	color: var(--fpvf-ink-2, #55514a);
	opacity: 1;
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
	border-color: var(--fpvf-brand-edge, #efb5b5);
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	outline: none;
	border-color: var(--fpvf-brand, #cc1111);
	box-shadow: 0 0 0 4px var(--fpvf-brand-wash, #fff1f1);
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
	height: 4rem;
	width: 3.25rem;
	top: 0;
	left: 0;
	color: var(--fpvf-brand, #cc1111);
}

.fpvf-home .fpvf-home__searchbox .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg path { fill: currentColor; }

/* ---------- "Try" chips ---------- */

.fpvf-home p.fpvf-home__try {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 1.125rem 0 0;
}

.fpvf-home__trylbl {
	font-size: .875rem;
	font-weight: 600;
	color: var(--fpvf-ink-2, #55514a);
	margin-right: .125rem;
}

.fpvf-home button.fpvf-home__chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: 999px;
	background: #fff;
	color: var(--fpvf-ink, #16140f);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.fpvf-home button.fpvf-home__chip:hover {
	background: var(--fpvf-brand-wash, #fff1f1);
	border-color: var(--fpvf-brand-edge, #efb5b5);
	color: var(--fpvf-brand-dark, #aa0e0e);
}

.fpvf-home button.fpvf-home__chip:focus-visible {
	outline: 3px solid var(--fpvf-brand, #cc1111);
	outline-offset: 2px;
}

/* ---------- phones and narrow tablets: one column, plate first ---------- */

@media (max-width: 900px) {
	.fpvf-home__inner { grid-template-columns: minmax(0, 1fr); }
	.fpvf-home p.fpvf-home__alt { margin-top: 0; }
}

@media (max-width: 520px) {
	.fpvf-home { padding-left: 1rem; padding-right: 1rem; }
	.fpvf-home__col { border-radius: 12px; padding: 1.375rem 1.125rem; }
	.fpvf-home__form { flex-direction: column; }
	.fpvf-plate.fpvf-plate--home { flex: 0 0 auto; width: 100%; }
	.fpvf-home .fpvf-home__go { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-home * { transition: none !important; }
}

/* ---------- homepage band fixes (1.0.47) ----------
 * 1. The plate lettering sized itself to the viewport, so in a narrow column (two
 *    columns on a small laptop, or a page with a sidebar) the placeholder clipped to
 *    "AB12 CDI". It now sizes to the plate column itself.
 * 2. "Your car is saved" was an inline-flex row, so when it wrapped the arrow was
 *    pushed out to the far right on its own. It now flows as ordinary text. */
.fpvf-home__col--plate { container-type: inline-size; }

.fpvf-home .fpvf-plate--home .fpvf-plate__input[type="text"] {
	font-size: clamp(1.375rem, 5.6cqi, 2.125rem);
	letter-spacing: .07em;
}

.fpvf-home .fpvf-home__saved a { display: inline; }
.fpvf-home .fpvf-home__saved a svg { display: inline-block; vertical-align: -.15em; margin-left: .25rem; }

/* ---------------------------------------------------------------- car photo (1.0.54)
 * The tick circle beside "Showing parts for your <car>" is the car's picture: tap it
 * to add one, like a profile picture. Guests keep it in this browser; a signed-in
 * garage car shows the photo fp-garage holds on the account. The badge takes the
 * store's own brand colour. */
.fpvf-current__photo {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--fpvf-good-wash, #e8f5ec);
	color: var(--fpvf-good, #06642c);
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.fpvf-current__photo:hover { box-shadow: 0 0 0 4px var(--fpvf-brand-wash, #fff1f1); }
.fpvf-current__photo:focus-visible { outline: 2px solid var(--fpvf-brand, #cc1111); outline-offset: 3px; }
.fpvf-current__photo:active { transform: scale(.96); }
.fpvf-current__photo.has-photo { background: var(--fpvf-ink, #16140f); box-shadow: 0 1px 3px rgba(22, 20, 15, .22); }
.fpvf-current__photo.has-photo:hover { box-shadow: 0 1px 3px rgba(22, 20, 15, .22), 0 0 0 4px var(--fpvf-brand-wash, #fff1f1); }
.fpvf-current__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
}
.fpvf--page .fpvf-current__photo .fpvf-current__tick,
.fpvf-current__photo .fpvf-current__tick { width: auto; height: auto; background: none; color: inherit; }
.fpvf-current__badge {
	position: absolute;
	right: -.125rem;
	bottom: -.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--fpvf-brand, #cc1111);
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.fpvf-current__actions { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-left: auto; }
.fpvf-current__actions .fpvf-link { margin-left: 0; }
.fpvf--page .fpvf__current .fpvf-current__actions { margin-left: 0; }

@media (max-width: 860px) {
	/* photo and sentence on one line, the links tucked under the sentence */
	/* span.x, not .x: the older span:not(.fpvf-current__tick) rule outranks a bare class */
	.fpvf--page .fpvf__current > span.fpvf-current__text { flex: 1 1 0; padding-top: .55rem; }
	.fpvf--page .fpvf__current > span.fpvf-current__actions { flex: 0 0 calc(100% - 3.5rem); min-width: 0; padding-top: 0; margin-left: 3.5rem; }
	.fpvf--page .fpvf__current .fpvf-current__actions .fpvf-link { flex-basis: auto; margin-left: 0; }
}
@media (max-width: 600px) {
	.fpvf-current__actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fpvf-current__photo { transition: none; }
	.fpvf-current__photo:active { transform: none; }
}

/* ============================================================ fits my car (1.0.59) */

/*
 * One bar above the sort row on a category or search page. Quiet white while it asks for the
 * reg; a green wash once it is talking about the customer's own car, which is the same green
 * the product page uses for "Fits your ...". The count is the headline, the switch is the one
 * action, "Change car" sits after it as a plain link.
 */
.fpvf-fitbar[hidden] { display: none !important; }

.fpvf-fitbar {
	position: relative;
	margin: 0 0 1.25rem;
	padding: .875rem 1rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r, 10px);
	color: var(--fpvf-ink, #16140f);
	font-size: .9375rem;
	line-height: 1.4;
}
.fpvf-fitbar.has-car {
	background: var(--fpvf-good-wash, #e8f5ec);
	border-color: var(--fpvf-good-edge, #b3ddc2);
}

.fpvf-fitbar__ask[hidden] { display: none; }
.fpvf-fitbar__ask {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
}
.fpvf-fitbar__lead {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	margin: 0;
}
.fpvf-fitbar__title { font-size: 1rem; font-weight: 700; color: var(--fpvf-ink, #16140f); }
.fpvf-fitbar__sub { font-size: .875rem; color: var(--fpvf-ink-2, #55514a); }

.fpvf-fitbar__form { flex: none; }
.fpvf-fitbar .fpvf-plate--sm { width: 10.5rem; height: 2.5rem; }
.fpvf-fitbar .fpvf-plate--sm .fpvf-plate__input[type="text"] { font-size: 1.125rem; }
.fpvf-fitbar .fpvf-plate--sm .fpvf-plate__band { width: 1.375rem; }
.fpvf-fitbar__go { min-width: 5.25rem; height: 2.5rem; }
.fpvf-fitbar__go:focus-visible { outline: 3px solid var(--fpvf-ink, #16140f); outline-offset: 2px; }

.fpvf-fitbar__drop[hidden] { display: none; }
.fpvf-fitbar__drop { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--fpvf-line, #dcd9d3); }
.fpvf-fitbar__status { margin: .5rem 0 0; font-size: .875rem; }
.fpvf-fitbar__status:empty { display: none; }

.fpvf-fitbar__car {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.25rem;
}
.fpvf-fitbar__count { margin: 0; color: var(--fpvf-ink, #16140f); }
.fpvf-fitbar__num {
	color: var(--fpvf-good, #06642c);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.fpvf-fitbar__name { font-weight: 700; }

.fpvf-fitbar__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
}
.fpvf-fitbar__change { font-size: .875rem; color: var(--fpvf-ink-2, #55514a); }

/* the switch: a real role="switch", its state readable without colour (the knob moves) */
.fpvf-fitbar__switch {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .25rem .125rem;
	background: none;
	border: 0;
	border-radius: var(--fpvf-r-sm, 6px);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--fpvf-ink, #16140f);
	cursor: pointer;
}
.fpvf-fitbar__switch:focus-visible { outline: 2px solid var(--fpvf-good, #06642c); outline-offset: 3px; }
.fpvf-fitbar__track {
	position: relative;
	flex: none;
	width: 2.375rem;
	height: 1.375rem;
	border-radius: 999px;
	background: #858074;         /* 3.4:1 against the green wash, so the off state is visible */
	transition: background-color .22s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-fitbar__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(22, 20, 15, .3);
	transition: transform .26s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-fitbar__switch[aria-checked="true"] .fpvf-fitbar__track { background: var(--fpvf-good, #06642c); }
.fpvf-fitbar__switch[aria-checked="true"] .fpvf-fitbar__knob { transform: translateX(1rem); }
.fpvf-fitbar__switch.is-busy .fpvf-fitbar__knob { animation: fpvf-knob .9s ease-in-out infinite; }
@keyframes fpvf-knob { 50% { box-shadow: 0 0 0 4px rgba(6, 100, 44, .18); } }

.fpvf-fitbar__more {
	margin: .25rem 0 1.5rem;
	font-size: .875rem;
	color: var(--fpvf-ink-2, #55514a);
}
.fpvf-fitbar__more a { color: inherit; text-underline-offset: 3px; }

/* showing only the fitting parts: the page's paging and counts describe the other grid */
.fpvf-fits-only .woocommerce-pagination,
.fpvf-fits-only .woocommerce-result-count,
.fpvf-fits-only .woocommerce-ordering { display: none !important; }

/* the card tag. Cards sit outside any token scope, so every colour carries its fallback. */
.fpvf-fit {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	width: fit-content;
	margin: 0 0 .45rem;
	padding: .2rem .55rem .2rem .45rem;
	border: 1px solid var(--fpvf-good-edge, #b3ddc2);
	border-radius: 999px;
	background: var(--fpvf-good-wash, #e8f5ec);
	color: var(--fpvf-good, #06642c);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.fpvf-fit svg { flex: none; }
.fpvf-fit--maybe {
	border-color: var(--fpvf-warn-edge, #ecd4a6);
	background: var(--fpvf-warn-wash, #fff6e6);
	color: var(--fpvf-warn, #8a5300);
}
/* the filtered grid says "Should fit" in its tag already */
.fpvf-fits-grid .fpvf-cardnote { display: none; }

@media (max-width: 600px) {
	.fpvf-fitbar { padding: .875rem; }
	.fpvf-fitbar__form { flex: 1 1 100%; }
	.fpvf-fitbar .fpvf-plate--sm { flex: 1 1 auto; width: auto; height: 2.75rem; }
	.fpvf-fitbar__go { height: 2.75rem; }
	.fpvf-fitbar__acts { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-fitbar__track,
	.fpvf-fitbar__knob { transition: none; }
	.fpvf-fitbar__switch.is-busy .fpvf-fitbar__knob { animation: none; }
}

/* ============================================================ car switcher (1.0.59) */

/*
 * The quiet words above the header plate ("Find parts for your car") become the car itself once
 * one is set: "Shopping for BMW 3 Series (E46) M3", with a caret. Same size, same place, so the
 * header row does not move. It opens the garage's cars; picking one reloads the page on it.
 */
.fpvf-switch { display: none; }

.fpvf-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	max-width: 17.5rem;
	margin: 0;
	padding: 2px 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: .78125rem;       /* 12.5px, the title it replaces */
	font-weight: 600;
	line-height: 1.2;
	color: var(--fpvf-ink-2, #55514a);
	white-space: nowrap;
	cursor: pointer;
}
.fpvf-switch__words { overflow: hidden; text-overflow: ellipsis; }
.fpvf-switch__car { color: var(--fpvf-ink, #16140f); font-weight: 700; }
.fpvf-switch__btn:hover .fpvf-switch__words { text-decoration: underline; text-underline-offset: 2px; }
.fpvf-switch__btn:focus-visible { outline: 2px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; border-radius: 3px; }
.fpvf-switch__caret { flex: none; transition: transform .22s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
.fpvf-switch.is-open .fpvf-switch__caret { transform: rotate(180deg); }

.fpvf-switch__menu[hidden] { display: none; }
.fpvf-switch__menu {
	position: absolute;
	top: calc(100% + .5rem);
	left: -.625rem;
	z-index: 140;
	width: min(22rem, 92vw);
	padding: .5rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r, 10px);
	box-shadow: 0 16px 40px rgba(22, 20, 15, .18);
	white-space: normal;
	animation: fpvf-drop .28s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both;
}
.fpvf-switch__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fpvf-switch__list li { margin: 0; padding: 0; }

.fpvf-switch__car-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	margin: 0;
	padding: .5rem;
	background: none;
	border: 0;
	border-radius: var(--fpvf-r-sm, 6px);
	font: inherit;
	text-align: left;
	text-decoration: none;
	color: var(--fpvf-ink, #16140f);
}
button.fpvf-switch__car-row,
a.fpvf-switch__car-row { cursor: pointer; }
button.fpvf-switch__car-row:hover,
a.fpvf-switch__car-row:hover { background: var(--fpvf-panel, #f4f2ee); color: var(--fpvf-ink, #16140f); }
button.fpvf-switch__car-row:focus-visible,
a.fpvf-switch__car-row:focus-visible { outline: 2px solid var(--fpvf-brand, #cc1111); outline-offset: -2px; }
.fpvf-switch__car-row.is-current { background: var(--fpvf-good-wash, #e8f5ec); }
.fpvf-switch__car-row.is-busy { opacity: .6; cursor: progress; }

.fpvf-switch__pic {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: 50%;
	background: var(--fpvf-panel, #f4f2ee);
	color: var(--fpvf-ink-2, #55514a);
}
.fpvf-switch__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fpvf-switch__car-row.is-current .fpvf-switch__pic { border-color: var(--fpvf-good-edge, #b3ddc2); }

.fpvf-switch__txt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.fpvf-switch__name {
	overflow: hidden;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fpvf-switch__sub {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .78125rem;
	line-height: 1.25;
	color: var(--fpvf-ink-2, #55514a);
}
.fpvf-switch__car-row.is-current .fpvf-switch__sub { color: var(--fpvf-good, #06642c); font-weight: 600; }

.fpvf-switch__foot {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.125rem;
	margin: .375rem 0 0;
	padding: .625rem .5rem .25rem;
	border-top: 1px solid var(--fpvf-line, #dcd9d3);
}
.fpvf-switch__foot .fpvf-link { font-size: .8125rem; color: var(--fpvf-ink, #16140f); }
.fpvf-switch__foot .fpvf-switch__clear { color: var(--fpvf-ink-2, #55514a); }

@media (min-width: 1025px) {
	.fpvf-headeritem.has-switch .fpvf-nav__title { display: none; }
	.fpvf-headeritem .fpvf-switch {
		display: block;
		position: absolute;
		left: 1.25rem;
		bottom: calc(100% + 5px);
		z-index: 140;
	}
	.fpvf-header-compact .fpvf-headeritem .fpvf-switch { bottom: calc(100% + 8px); }
}

@media (max-width: 1024px) {
	.fpvf-headeritem--drawer.has-switch .fpvf-nav__title { display: none; }
	.fpvf-headeritem--drawer .fpvf-switch { display: block; margin: 0 0 .5rem; }
	.fpvf-headeritem--drawer .fpvf-switch__btn { max-width: 100%; font-size: .8125rem; }
	.fpvf-headeritem--drawer .fpvf-switch__menu {
		position: static;
		width: auto;
		margin-top: .5rem;
		box-shadow: none;
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-switch__caret { transition: none; }
	.fpvf-switch__menu { animation: none; }
}

/* 1.0.60: on a phone the bar sat 2px under Shoptimizer's "Show filters" row */
@media (max-width: 600px) {
	.fpvf-fitbar { margin-top: .75rem; }
}

/* 1.0.63: a long car name pushed its row out of the switcher menu on a phone (Garreth, 28 Sep).
   A grid item will not shrink below its content unless told to, so the list's one column is
   minmax(0, 1fr); names wrap to two lines, and in the phone menu the "Shopping for" line wraps
   to show the whole name instead of cutting it short. */
.fpvf-switch__list { grid-template-columns: minmax(0, 1fr); }
.fpvf-switch__list li { min-width: 0; }
.fpvf-switch__name {
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
@media (max-width: 1024px) {
	.fpvf-headeritem--drawer .fpvf-switch__btn { align-items: flex-start; text-align: left; white-space: normal; }
	.fpvf-headeritem--drawer .fpvf-switch__words { overflow: visible; text-overflow: clip; }
	.fpvf-headeritem--drawer .fpvf-switch__caret { margin-top: .2em; }
}

/* ============================================================ 1.0.65: save to garage, guides */

/* the one action on the car bar that keeps the car: a small outlined pill, not a text link */
.fpvf-current__save {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.125rem; margin: 0; padding: 0 .85rem;
	border: 1px solid var(--fpvf-line, #dcd9d3); border-radius: 999px; background: #fff;
	font: inherit; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--fpvf-ink, #16140f);
	cursor: pointer; transition: border-color .15s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), background-color .15s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-current__save[hidden] { display: none; }
.fpvf-current__save:hover { border-color: var(--fpvf-brand, #cc1111); background: var(--fpvf-brand-wash, #fff1f1); }
.fpvf-current__save:focus-visible { outline: 2px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-current__save[disabled] { opacity: .6; cursor: progress; }
.fpvf-current__save svg { color: var(--fpvf-brand, #cc1111); }
.fpvf-current__saved {
	display: inline-flex; align-items: center; gap: .3rem; font-size: .875rem; font-weight: 700;
	color: var(--fpvf-good, #06642c); text-decoration: none;
}
a.fpvf-current__saved:hover { text-decoration: underline; text-underline-offset: 3px; }
.fpvf-current__saved svg { width: 15px; height: 15px; }

/* Guides about your car, under the parts: the garage's guide cards, in the finder's tokens */
.fpvf-guides { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--fpvf-line, #dcd9d3); }
.fpvf-guides__title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--fpvf-ink, #16140f); }
.fpvf-guides__sub { margin: .35rem 0 1.125rem; font-size: .9375rem; color: var(--fpvf-ink-2, #55514a); }
.fpvf-guides__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fpvf-guide { margin: 0; }
.fpvf-guide__link {
	display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--fpvf-line, #dcd9d3); border-radius: 12px; background: #fff;
	color: var(--fpvf-ink, #16140f); text-decoration: none;
	transition: border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-guide__link:hover { border-color: #d3cfc7; box-shadow: 0 12px 26px -20px rgba(22, 20, 15, .45); color: var(--fpvf-ink, #16140f); }
.fpvf-guide__link:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-guide__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--fpvf-panel, #f4f2ee); overflow: hidden; }
.fpvf-guide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fpvf-guide__body { display: flex; flex-direction: column; gap: .375rem; flex: 1 1 auto; padding: .875rem 1rem 1rem; }
.fpvf-guide__store { align-self: flex-start; padding: .125rem .5rem; border-radius: 999px; background: var(--fpvf-panel, #f4f2ee); color: var(--fpvf-ink-2, #55514a); font-size: .75rem; font-weight: 700; line-height: 1.5; }
.fpvf-guide__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.fpvf-guide__link:hover .fpvf-guide__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fpvf-brand, #cc1111); }
.fpvf-guide__why { margin-top: auto; padding-top: .25rem; font-size: .8125rem; color: var(--fpvf-ink-2, #55514a); }
@media (max-width: 900px) { .fpvf-guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fpvf-guides__list { grid-template-columns: minmax(0, 1fr); } }


/* ================================================================ 1.0.70 the no-cover panel (Garreth, 28 Sep)
 * A car we list nothing for. One panel, two zones: what we do not have and the store's own
 * categories as picture tiles (so the visit carries on as shopping), then, in the store's wash,
 * "Tell me when you cover it" and the question pop-up. The side zone wraps under the message
 * when the panel is narrow (the homepage hero, a phone), with no media query: flex does it. */
.fpvf-empty.fpvf-nocover {
	display: flex; flex-wrap: wrap; padding: 0; overflow: hidden;
	background: var(--fpvf-surface, #fff); border: 1px solid var(--fpvf-line, #e2dfd9); border-radius: var(--fpvf-r, 12px);
	animation: fpvf-nocover-in .5s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes fpvf-nocover-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fpvf-nocover ::selection { background: var(--fpvf-brand-wash, #fff1f1); color: var(--fpvf-ink, #16140f); }

.fpvf-nocover__main { flex: 999 1 30rem; min-width: 0; padding: 1.5rem 1.5rem 1.4rem; container-type: inline-size; }
.fpvf-empty p.fpvf-nocover__title {
	margin: 0 0 .5rem; max-width: 34ch; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); font-weight: 800;
	letter-spacing: -.02em; line-height: 1.2; color: var(--fpvf-ink, #16140f); text-wrap: balance;
}
.fpvf-empty p.fpvf-nocover__body { margin: 0 0 1.15rem; max-width: 60ch; font-size: .975rem; line-height: 1.55; color: var(--fpvf-ink-2, #55514a); }

/* the categories: real category photos, a row of equal tiles */
.fpvf-nocover__cats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .625rem; margin: 0; padding: 0; list-style: none; }
.fpvf-nocover__cats li { margin: 0; padding: 0; min-width: 0; }
.fpvf-nocover__cats li::before { content: none; }
a.fpvf-nocover__cat {
	display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--fpvf-line, #e2dfd9); border-radius: 10px;
	background: #fff; color: var(--fpvf-ink, #16140f); text-decoration: none;
	transition: border-color .2s, box-shadow .25s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), transform .25s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-nocover__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f2ee; }
.fpvf-nocover__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
.fpvf-nocover__name { display: flex; align-items: center; justify-content: space-between; gap: .375rem; padding: .6rem .75rem .65rem; font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.fpvf-nocover__name svg { flex: 0 0 auto; color: var(--fpvf-brand, #cc1111); transition: transform .25s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
a.fpvf-nocover__cat:hover { border-color: var(--fpvf-brand-edge, #efb5b5); box-shadow: 0 12px 24px -18px rgba(22, 20, 15, .55); transform: translateY(-2px); color: var(--fpvf-brand-dark, #aa0e0e); text-decoration: none; }
a.fpvf-nocover__cat:hover img { transform: scale(1.045); }
a.fpvf-nocover__cat:hover .fpvf-nocover__name svg { transform: translateX(2px); }
a.fpvf-nocover__cat:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }

/* a narrow message zone: the tiles become one row that scrolls sideways, never a stack */
@container (max-width: 30rem) {
	.fpvf-nocover__cats {
		grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		margin-right: -1.1rem; padding: 0 1.1rem .35rem 0; scrollbar-width: thin; scrollbar-color: var(--fpvf-brand-edge, #efb5b5) transparent;
	}
	.fpvf-nocover__cats li { scroll-snap-align: start; }
	/* one line per name on a narrow tile */
	.fpvf-nocover__name { padding: .5rem .6rem .55rem; font-size: .875rem; white-space: nowrap; }
	.fpvf-nocover__name svg { display: none; }
	.fpvf-nocover__cats::-webkit-scrollbar { height: 4px; }
	.fpvf-nocover__cats::-webkit-scrollbar-thumb { background: var(--fpvf-brand-edge, #efb5b5); border-radius: 4px; }
}

/* the side: the store's wash. Its left rule shows beside the message, its top rule once it wraps
   underneath (the other is clipped by the panel either way) */
.fpvf-nocover__side {
	flex: 1 1 23rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .75rem;
	padding: 1.5rem 1.4rem; background: var(--fpvf-brand-wash, #fff1f1);
	box-shadow: -1px 0 0 var(--fpvf-brand-edge, #efb5b5), 0 -1px 0 var(--fpvf-brand-edge, #efb5b5);
}
.fpvf-empty .fpvf-nocover__side p { margin: 0; max-width: none; }

.fpvf-notify { position: relative; margin: 0; }
.fpvf-empty p.fpvf-notify__title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--fpvf-ink, #16140f); }
.fpvf-empty p.fpvf-notify__sub { margin: .25rem 0 .75rem; font-size: .875rem; line-height: 1.45; color: var(--fpvf-ink-2, #55514a); }
.fpvf-notify__row { display: flex; gap: .5rem; }
.fpvf-nocover input.fpvf-notify__email {
	flex: 1 1 auto; min-width: 0; height: 2.75rem; margin: 0; padding: 0 .85rem; border: 1px solid var(--fpvf-brand-edge, #efb5b5); border-radius: 8px;
	background: #fff; color: var(--fpvf-ink, #16140f); font: inherit; font-size: .95rem; caret-color: var(--fpvf-brand, #cc1111); box-shadow: none;
}
.fpvf-nocover input.fpvf-notify__email::placeholder { color: #6b665d; opacity: 1; }
.fpvf-nocover input.fpvf-notify__email:focus { outline: 2px solid var(--fpvf-brand, #cc1111); outline-offset: 1px; border-color: var(--fpvf-brand, #cc1111); }
.fpvf-nocover input.fpvf-notify__email[aria-invalid="true"] { border-color: var(--fpvf-bad, #98240f); }
.fpvf-btn.fpvf-notify__go { height: 2.75rem; padding: 0 1.1rem; font-size: .95rem; white-space: nowrap; }
.fpvf-btn.fpvf-notify__go:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-notify__consent { display: flex; align-items: flex-start; gap: .5rem; margin: .65rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--fpvf-ink-2, #55514a); cursor: pointer; }
.fpvf-notify__consent input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .1rem 0 0; accent-color: var(--fpvf-brand, #cc1111); }
.fpvf-notify__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fpvf-empty p.fpvf-notify__msg { margin: .5rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--fpvf-bad, #98240f); }
.fpvf-empty p.fpvf-notify__msg:empty { display: none; }

/* done: the form gives way to a short confirmation, and the tick draws itself */
.fpvf-notify__done { display: flex; align-items: flex-start; gap: .75rem; }
.fpvf-notify__done svg { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; color: var(--fpvf-good, #0f7a3a); }
.fpvf-notify__done svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: fpvf-tick .5s .1s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) forwards; }
@keyframes fpvf-tick { to { stroke-dashoffset: 0; } }
.fpvf-empty .fpvf-notify__done p { font-size: .9375rem; line-height: 1.45; color: var(--fpvf-ink, #16140f); }
.fpvf-notify__done strong { display: block; font-size: 1.0625rem; font-weight: 800; }

.fpvf-empty p.fpvf-nocover__or { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fpvf-ink-2, #55514a); }
.fpvf-nocover__or::before, .fpvf-nocover__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--fpvf-brand-edge, #efb5b5); }
.fpvf-empty p.fpvf-nocover__ask { font-size: .875rem; line-height: 1.45; color: var(--fpvf-ink-2, #55514a); }
.fpvf-empty .fpvf-btn.fpvf-nocover__askbtn {
	align-self: flex-start; margin: 0; padding: .7rem 1.1rem; font-size: .95rem;
	background: #fff; color: var(--fpvf-brand-dark, #aa0e0e); border: 1px solid var(--fpvf-brand-edge, #efb5b5); text-decoration: none;
}
.fpvf-empty .fpvf-btn.fpvf-nocover__askbtn:hover { border-color: var(--fpvf-brand, #cc1111); background: #fff; color: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-empty .fpvf-btn.fpvf-nocover__askbtn:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }

/* the homepage hero is dark: the same panel, lit from within */
.fpvf-hero__panel .fpvf-empty.fpvf-nocover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.fpvf-hero__panel .fpvf-empty p.fpvf-nocover__title, .fpvf-hero__panel .fpvf-empty p.fpvf-notify__title { color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-hero__panel .fpvf-empty p.fpvf-nocover__body, .fpvf-hero__panel .fpvf-empty p.fpvf-notify__sub, .fpvf-hero__panel .fpvf-empty p.fpvf-nocover__ask, .fpvf-hero__panel .fpvf-notify__consent, .fpvf-hero__panel .fpvf-empty p.fpvf-nocover__or { color: var(--fpvf-on-dark-2, #b8b3a8); }
.fpvf-hero__panel .fpvf-nocover__side { background: rgba(255, 255, 255, .06); box-shadow: -1px 0 0 rgba(255, 255, 255, .14), 0 -1px 0 rgba(255, 255, 255, .14); }
.fpvf-hero__panel a.fpvf-nocover__cat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--fpvf-on-dark, #f6f4ef); }

@media (max-width: 600px) {
	.fpvf-nocover__main { padding: 1.1rem 1.1rem 1rem; }
	.fpvf-nocover__side { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fpvf-empty.fpvf-nocover, .fpvf-notify__done svg path { animation: none; stroke-dashoffset: 0; }
	a.fpvf-nocover__cat, .fpvf-nocover__pic img, .fpvf-nocover__name svg { transition: none; }
	a.fpvf-nocover__cat:hover { transform: none; }
	a.fpvf-nocover__cat:hover img { transform: none; }
}

/* 1.0.74 (Garreth, 28 Sep): in the header drop the panel was one tall column (the drop is 26rem).
   Holding a no-cover panel, the drop widens to 58rem, centred under the plate, so the panel keeps
   its two zones side by side, as on the results page. */
.fpvf-nav__drop:has(.fpvf-nocover) { width: min(58rem, calc(100vw - 3rem)); right: auto; left: 50%; translate: -50% 0; padding: .5rem; }
.fpvf-nav__drop:has(.fpvf-nocover) .fpvf-empty.fpvf-nocover { border: 0; }

/* 1.0.75: Notify me sat 6px below the email box (the older ".fpvf-empty .fpvf-btn { margin-top }" caught it) */
.fpvf-empty .fpvf-notify__row .fpvf-btn.fpvf-notify__go { margin: 0; align-self: stretch; }

/* 1.0.76: Guides about your car on product pages. One row of three under the summary; on a phone the
   row scrolls sideways instead of stacking three tall cards (Garreth: no extra vertical scroll). */
.fpvf-pguides-slot:empty { display: none; }
.fpvf-pguides-slot { clear: both; width: 100%; }
.fpvf-guides.fpvf-guides--product { margin: 1.5rem 0 2rem; padding-top: 1.5rem; }
.fpvf-guides--product .fpvf-guides__title { font-size: 1.25rem; }
@media (max-width: 900px) {
	.fpvf-guides--product .fpvf-guides__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 72%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: .35rem; scrollbar-width: thin; }
	.fpvf-guides--product .fpvf-guide { scroll-snap-align: start; }
}

/* 1.0.77 Complete your build: what fits this car on our other stores, one line, each in its store's colours */
.fpvf-across { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 1.25rem; }
.fpvf-across__lbl { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fpvf-ink-2, #55514a); }
a.fpvf-across__link {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.125rem; padding: 0 .8rem; max-width: 100%;
	border: 1px solid var(--x-edge, var(--fpvf-line, #dcd9d3)); border-radius: 999px; background: var(--x-wash, var(--fpvf-panel, #f4f2ee)); color: var(--x-ink, var(--fpvf-ink, #16140f));
	font-size: .875rem; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), transform .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
a.fpvf-across__link b { font-weight: 800; }
a.fpvf-across__link span { font-weight: 600; }
a.fpvf-across__link::after { content: ''; width: .4rem; height: .4rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: 0 0 auto; }
a.fpvf-across__link:hover { box-shadow: 0 6px 14px -10px rgba(22, 20, 15, .5); transform: translateY(-1px); color: var(--x-ink, var(--fpvf-ink, #16140f)); text-decoration: none; }
a.fpvf-across__link:focus-visible { outline: 3px solid var(--x-ink, var(--fpvf-brand, #cc1111)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.fpvf-across__link { transition: none; } a.fpvf-across__link:hover { transform: none; } }

/* ============================================================ grouped car: narrow it down (1.0.78)
   One quiet line above the parts. The versions are chips on one row, optional: the parts are
   already showing, so this never blocks them. */

.fpvf-narrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0 0 1.25rem;
	padding: .6rem .75rem;
	border: 1px dashed var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r-sm, 6px);
}
.fpvf-narrow__text { margin: 0; font-size: .875rem; color: var(--fpvf-ink-2, #55514a); flex: 1 1 16rem; }
.fpvf-narrow__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.fpvf .fpvf-narrow .fpvf-narrow__opt,
.fpvf-narrow .fpvf-chooser__opt.fpvf-narrow__opt {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: .4rem;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: .35rem .7rem;
	border-radius: 999px;
	font-size: .8125rem;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
.fpvf-narrow__name { font-weight: 600; }
.fpvf-narrow__years { color: var(--fpvf-ink-2, #55514a); font-size: .75rem; }
.fpvf-hero__panel .fpvf-narrow { border-color: rgba(255, 255, 255, .2); }
.fpvf-hero__panel .fpvf-narrow__text,
.fpvf-hero__panel .fpvf-narrow__years { color: var(--fpvf-on-dark-2, #a8a49b); }
.fpvf-narrow .fpvf-narrow__opt { white-space: nowrap; flex: 0 0 auto; }
/* phones: one row that slides sideways, never a stack of buttons (1.0.79) */
@media (max-width: 600px) {
	.fpvf-narrow { padding: .55rem .6rem; }
	.fpvf-narrow__opts {
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		margin: 0 -.6rem -.1rem;
		padding: .1rem .6rem .25rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		box-sizing: content-box;
	}
	.fpvf-narrow__opts::-webkit-scrollbar { display: none; }
	.fpvf-narrow .fpvf-narrow__opt { scroll-snap-align: start; }
	.fpvf-narrow__years { display: none; }
}

/* ============================================================ pick your wheel (1.0.81)
   Under the boss kits: the boss kit is made for the car, any of our wheels bolts onto it.
   One band on the store's wash: the intro and the "how it fits" line share the top row, the
   five wheels sit on one row (a sliding row on a phone), and the two actions share the foot. */

.fpvf-wheels {
	margin: -.25rem 0 2.25rem;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--fpvf-brand-wash, #fff1f1);
	border: 1px solid var(--fpvf-brand-edge, #efb5b5);
	border-radius: var(--fpvf-r, 10px);
}
.fpvf-wheels__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: 0 0 1rem;
}
.fpvf-wheels__intro { flex: 1 1 22rem; min-width: 0; }
.fpvf-wheels h3.fpvf-wheels__title {
	margin: 0 0 .3rem;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	color: var(--fpvf-ink, #16140f);
}
.fpvf-wheels p.fpvf-wheels__text { margin: 0; max-width: 58ch; font-size: .9375rem; line-height: 1.5; color: var(--fpvf-ink-2, #55514a); text-wrap: pretty; }

/* the fit, read left to right: boss kit + any wheel = direct fit */
.fpvf-wheels ol.fpvf-wheels__how {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fpvf-how { display: flex; align-items: center; gap: .55rem; margin: 0; }
.fpvf-how__pic {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-brand-edge, #efb5b5);
	border-radius: var(--fpvf-r-sm, 6px);
}
.fpvf-how__pic img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.fpvf-how__pic--fit { background: var(--fpvf-brand, #cc1111); border-color: var(--fpvf-brand, #cc1111); color: #fff; }
.fpvf-how__pic--fit .fpvf-ico { width: 22px; height: 22px; stroke-width: 2.6; }
.fpvf-how__txt { display: grid; line-height: 1.2; }
.fpvf-how__txt b { font-size: .875rem; font-weight: 700; color: var(--fpvf-ink, #16140f); white-space: nowrap; }
.fpvf-how__txt span { font-size: .75rem; color: var(--fpvf-ink-2, #55514a); white-space: nowrap; }
.fpvf-how--fit .fpvf-how__txt b { color: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-how__op { display: grid; place-items: center; margin: 0; color: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-how__op .fpvf-ico { width: 16px; height: 16px; stroke-width: 2.4; }

/* the five wheels */
.fpvf-wheels ul.fpvf-wheels__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fpvf-wheels li.fpvf-wheel { margin: 0; min-width: 0; }
.fpvf-wheels a.fpvf-wheel__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: .5rem .5rem .7rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: var(--fpvf-r-sm, 6px);
	color: var(--fpvf-ink, #16140f);
	text-decoration: none;
	transition: border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), transform .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-wheels a.fpvf-wheel__link:hover { border-color: var(--fpvf-brand-edge, #efb5b5); box-shadow: 0 10px 22px -16px rgba(22, 20, 15, .45); transform: translateY(-2px); color: var(--fpvf-ink, #16140f); }
.fpvf-wheels a.fpvf-wheel__link:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-wheel__pic { display: block; aspect-ratio: 1; margin: 0 0 .55rem; overflow: hidden; border-radius: 4px; background: var(--fpvf-surface, #fff); }
.fpvf-wheels img.fpvf-wheel__img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; transition: transform .35s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
.fpvf-wheels a.fpvf-wheel__link:hover .fpvf-wheel__img { transform: rotate(-8deg) scale(1.03); }
.fpvf-wheel__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 0 .3rem;
	min-height: 2.6em;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
}
.fpvf-wheel__price { margin-top: auto; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fpvf-ink, #16140f); }

/* the one moment: a fresh five deals in, left to right */
.fpvf-wheels__list.is-new .fpvf-wheel { animation: fpvf-deal .5s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)) both; animation-delay: calc(var(--i, 0) * 55ms); }
.fpvf-wheels.is-dealing .fpvf-wheels__list { opacity: .55; transition: opacity .15s linear; }

/* the two actions, side by side */
.fpvf-wheels__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .9rem 0 0; }
.fpvf-wheels button.fpvf-wheels__more,
.fpvf-wheels a.fpvf-wheels__all {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.5rem;
	margin: 0;
	padding: 0 1rem;
	border-radius: var(--fpvf-r-sm, 6px);
	font: inherit;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-wheels button.fpvf-wheels__more { background: var(--fpvf-surface, #fff); color: var(--fpvf-brand-dark, #aa0e0e); border: 1px solid var(--fpvf-brand-edge, #efb5b5); }
.fpvf-wheels button.fpvf-wheels__more:hover { border-color: var(--fpvf-brand, #cc1111); background: var(--fpvf-surface, #fff); color: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-wheels button.fpvf-wheels__more[disabled] { cursor: progress; }
.fpvf-wheels.is-dealing .fpvf-wheels__more .fpvf-ico { animation: fpvf-wheel-spin .7s linear infinite; }
.fpvf-wheels a.fpvf-wheels__all { background: var(--fpvf-brand, #cc1111); color: #fff; border: 1px solid var(--fpvf-brand, #cc1111); }
.fpvf-wheels a.fpvf-wheels__all:hover { background: var(--fpvf-brand-dark, #aa0e0e); border-color: var(--fpvf-brand-dark, #aa0e0e); color: #fff; }
.fpvf-wheels a.fpvf-wheels__all .fpvf-ico { transition: transform .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)); }
.fpvf-wheels a.fpvf-wheels__all:hover .fpvf-ico { transform: translateX(3px); }
.fpvf-wheels button.fpvf-wheels__more:focus-visible,
.fpvf-wheels a.fpvf-wheels__all:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
@keyframes fpvf-wheel-spin { to { transform: rotate(360deg); } }

/* narrower: four across would squeeze the names, so the row slides instead */
@media (max-width: 900px) {
	.fpvf-wheels ul.fpvf-wheels__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(9.5rem, 30%);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 0 -1.25rem;
		padding: .15rem 1.25rem .35rem;
		scroll-padding: 0 1.25rem;
	}
	.fpvf-wheels ul.fpvf-wheels__list::-webkit-scrollbar { display: none; }
	.fpvf-wheels li.fpvf-wheel { scroll-snap-align: start; }
}
@media (max-width: 600px) {
	.fpvf-wheels { padding: 1rem .875rem .875rem; }
	.fpvf-wheels ul.fpvf-wheels__list { grid-auto-columns: 42%; margin: 0 -.875rem; padding: .15rem .875rem .35rem; scroll-padding: 0 .875rem; }
	.fpvf-wheels ol.fpvf-wheels__how { width: 100%; justify-content: space-between; gap: .25rem; }
	.fpvf-how { flex-direction: column; gap: .3rem; text-align: center; }
	.fpvf-how__pic { width: 2.6rem; height: 2.6rem; }
	.fpvf-how__txt span { display: none; }
	.fpvf-wheels__foot { display: grid; grid-template-columns: 1fr 1fr; }
	.fpvf-wheels button.fpvf-wheels__more,
	.fpvf-wheels a.fpvf-wheels__all { justify-content: center; padding: 0 .5rem; font-size: .8125rem; }
}

/* the homepage dark panel, should the band ever show there */
.fpvf-hero__panel .fpvf-wheels { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.fpvf-hero__panel .fpvf-wheels h3.fpvf-wheels__title,
.fpvf-hero__panel .fpvf-how__txt b { color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-hero__panel .fpvf-wheels p.fpvf-wheels__text,
.fpvf-hero__panel .fpvf-how__txt span { color: var(--fpvf-on-dark-2, #a8a49b); }

@media (prefers-reduced-motion: reduce) {
	.fpvf-wheels__list.is-new .fpvf-wheel,
	.fpvf-wheels.is-dealing .fpvf-wheels__more .fpvf-ico { animation: none; }
	.fpvf-wheels a.fpvf-wheel__link,
	.fpvf-wheels img.fpvf-wheel__img { transition: none; }
	.fpvf-wheels a.fpvf-wheel__link:hover,
	.fpvf-wheels a.fpvf-wheel__link:hover .fpvf-wheel__img { transform: none; }
}

/* 1.0.82: on a phone the two actions share the width without pushing the page sideways */
@media (max-width: 600px) {
	.fpvf-wheels__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fpvf-wheels button.fpvf-wheels__more,
	.fpvf-wheels a.fpvf-wheels__all { min-width: 0; }
	.fpvf-wheels__tail { display: none; }
}

/* 1.0.83: the icons keep their size when a phone squeezes the buttons */
.fpvf-wheels .fpvf-ico { flex: none; }

/* ============================================================ base-mounted seats (1.0.84)
   The wheels band's world, with a shopping line: the car's frame and its runners are real
   links, then "your seat", then the direct fit. A car with frames from two or three brands gets
   one tab per brand. */

.fpvf-seats .fpvf-wheels__top { margin-bottom: .75rem; }
.fpvf-seats p.fpvf-seats__need { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--fpvf-ink, #16140f); }
.fpvf-seats ol.fpvf-seats__kit { flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1.1rem; }
.fpvf-seats a.fpvf-how__link {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .2rem .5rem .2rem .2rem;
	margin: -.2rem -.5rem -.2rem -.2rem;
	border-radius: var(--fpvf-r-sm, 6px);
	color: inherit;
	text-decoration: none;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-seats a.fpvf-how__link:hover { background: var(--fpvf-surface, #fff); }
.fpvf-seats a.fpvf-how__link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fpvf-seats a.fpvf-how__link:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }

/* one tab per frame brand: a quiet segmented control */
.fpvf-seats__pick {
	display: inline-flex;
	flex: none;
	gap: .25rem;
	padding: .25rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-brand-edge, #efb5b5);
	border-radius: var(--fpvf-r-sm, 6px);
}
.fpvf-seats button.fpvf-seats__tab {
	margin: 0;
	padding: .45rem .8rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--fpvf-ink-2, #55514a);
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-seats button.fpvf-seats__tab:hover { background: var(--fpvf-brand-wash, #fff1f1); color: var(--fpvf-brand-dark, #aa0e0e); }
.fpvf-seats button.fpvf-seats__tab[aria-selected="true"] { background: var(--fpvf-brand, #cc1111); color: #fff; }
.fpvf-seats button.fpvf-seats__tab:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }

.fpvf-seats__sys[hidden] { display: none; }
.fpvf-seats__sys.is-dealing .fpvf-wheels__list { opacity: .55; transition: opacity .15s linear; }
.fpvf-seats__sys.is-dealing .fpvf-wheels__more .fpvf-ico { animation: fpvf-wheel-spin .7s linear infinite; }
.fpvf-seats .fpvf-seats__count { font-size: .8125rem; color: var(--fpvf-ink-2, #55514a); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
	.fpvf-seats__pick { width: 100%; }
	.fpvf-seats button.fpvf-seats__tab { flex: 1 1 0; min-width: 0; padding: .45rem .3rem; }
	.fpvf-seats ol.fpvf-seats__kit { flex-wrap: nowrap; }
	.fpvf-seats a.fpvf-how__link { flex-direction: column; gap: .3rem; margin: 0; padding: 0; text-align: center; }
	.fpvf-seats .fpvf-wheels__foot { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.fpvf-seats__sys.is-dealing .fpvf-wheels__more .fpvf-ico { animation: none; }
}

/* 1.0.86: on a phone the four parts share the width; labels may take two lines */
@media (max-width: 600px) {
	.fpvf-seats ol.fpvf-seats__kit { justify-content: space-between; gap: .25rem; }
	.fpvf-seats .fpvf-seats__kit .fpvf-how { flex: 1 1 0; min-width: 0; }
	.fpvf-seats .fpvf-seats__kit .fpvf-how__op { flex: none; }
	.fpvf-seats .fpvf-seats__kit .fpvf-how__txt b { white-space: normal; font-size: .75rem; line-height: 1.2; }
}

/* ============================================================ the Planted note (1.0.88)
   The Recaro list is our pick, not the limit: a white card inside the band, the bracket's
   drilled rail as its mark, the text, and one action on the right. */
.fpvf-seats aside.fpvf-seats__note {
	display: flex;
	align-items: center;
	gap: .9rem 1.1rem;
	margin: 1rem 0 0;
	padding: .9rem 1rem;
	background: var(--fpvf-surface, #fff);
	border: 1px solid var(--fpvf-brand-edge, #efb5b5);
	border-radius: var(--fpvf-r-sm, 6px);
	box-shadow: 0 8px 20px -18px rgba(22, 20, 15, .5);
}
.fpvf-seats__note-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--fpvf-r-sm, 6px);
	background: var(--fpvf-brand-wash, #fff1f1);
	color: var(--fpvf-brand-dark, #aa0e0e);
}
.fpvf-seats__note-ico .fpvf-ico { width: 24px; height: 24px; }
.fpvf-seats__note-txt { flex: 1 1 auto; min-width: 0; }
.fpvf-seats__note-txt p { margin: 0; max-width: 70ch; font-size: .875rem; line-height: 1.5; color: var(--fpvf-ink-2, #55514a); text-wrap: pretty; }
.fpvf-seats__note-txt p.fpvf-seats__note-h { margin: 0 0 .15rem; font-size: .9375rem; font-weight: 700; color: var(--fpvf-ink, #16140f); }
.fpvf-seats a.fpvf-seats__note-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--fpvf-brand, #cc1111);
	border-radius: var(--fpvf-r-sm, 6px);
	background: var(--fpvf-brand, #cc1111);
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-seats a.fpvf-seats__note-btn:hover { background: var(--fpvf-brand-dark, #aa0e0e); border-color: var(--fpvf-brand-dark, #aa0e0e); color: #fff; }
.fpvf-seats a.fpvf-seats__note-btn:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
@media (max-width: 600px) {
	.fpvf-seats aside.fpvf-seats__note { flex-wrap: wrap; align-items: flex-start; padding: .85rem; }
	.fpvf-seats__note-txt { flex-basis: calc(100% - 3.75rem); }
	.fpvf-seats a.fpvf-seats__note-btn { width: 100%; }
}

/* 1.0.89: on a phone the mark stays beside the text (the gap is part of the sum) */
@media (max-width: 600px) {
	.fpvf-seats aside.fpvf-seats__note { column-gap: .75rem; }
	.fpvf-seats__note-ico { width: 2.5rem; height: 2.5rem; }
	.fpvf-seats__note-txt { flex: 1 1 0; flex-basis: calc(100% - 3.25rem); min-width: 0; }
}

/* 1.0.90: "Show me five more" is the call to see the rest of the range (Garreth, 29 Sep:
   "nice big and green, so you can see that there's other options"). The store's go-green,
   the same as its Found it and buy buttons; on a phone it takes the full row. */
.fpvf-wheels button.fpvf-wheels__more {
	min-height: 3rem;
	padding: 0 1.5rem;
	gap: .6rem;
	background: var(--fpvf-go, #0f7a3a);
	border: 1px solid var(--fpvf-go, #0f7a3a);
	color: var(--fpvf-go-ink, #fff);
	font-size: 1rem;
	font-weight: 800;
	box-shadow: 0 10px 22px -16px rgba(15, 122, 58, .9);
}
.fpvf-wheels button.fpvf-wheels__more:hover { background: var(--fpvf-go, #0f7a3a); border-color: var(--fpvf-go, #0f7a3a); color: var(--fpvf-go-ink, #fff); filter: brightness(.94); }
.fpvf-wheels button.fpvf-wheels__more:active { transform: translateY(1px); }
.fpvf-wheels button.fpvf-wheels__more .fpvf-ico { width: 20px; height: 20px; stroke-width: 2.4; }
.fpvf-wheels button.fpvf-wheels__more:focus-visible { outline: 3px solid var(--fpvf-go, #0f7a3a); outline-offset: 3px; }
@media (max-width: 600px) {
	.fpvf-wheels .fpvf-wheels__foot { display: flex; flex-wrap: wrap; }
	.fpvf-wheels button.fpvf-wheels__more { flex: 1 1 100%; justify-content: center; font-size: 1rem; }
	.fpvf-wheels a.fpvf-wheels__all { flex: 1 1 100%; }
	.fpvf-seats .fpvf-seats__count { flex: 1 1 100%; text-align: center; }
}

/* ================================================================ 1.0.92 Easy bucket seats (Garreth, 29 Sep)
 * An M2 Motorsport or PCI Racing kit is a complete fit, so the band is two steps: the frame, then the
 * seat. It borrows the base-mounted band's parts; the steps get a numbered badge in the store colour. */
.fpvf-buckets p.fpvf-seats__need { display: flex; align-items: center; gap: .5rem; }
.fpvf-buckets .fpvf-buckets__step {
	display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
	background: var(--fpvf-brand, #cc1111); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.fpvf-buckets ul.fpvf-buckets__frames { margin-bottom: 1.1rem; }
.fpvf-buckets .fpvf-wheels__foot:empty { display: none; }

/* the frames are a compact row (photo beside name and price): step 1 should not cost a second screen */
@media (min-width: 900.02px) {
	.fpvf-buckets ul.fpvf-buckets__frames { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
}
.fpvf-buckets ul.fpvf-buckets__frames a.fpvf-wheel__link {
	display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: 1fr auto;
	column-gap: .75rem; align-items: center; padding: .45rem .75rem .45rem .45rem;
}
.fpvf-buckets ul.fpvf-buckets__frames .fpvf-wheel__pic { grid-row: 1 / 3; margin: 0; }
.fpvf-buckets ul.fpvf-buckets__frames .fpvf-wheel__name { align-self: end; min-height: 0; margin: 0 0 .15rem; }
.fpvf-buckets ul.fpvf-buckets__frames .fpvf-wheel__price { align-self: start; margin: 0; }
.fpvf-buckets ul.fpvf-buckets__frames a.fpvf-wheel__link:hover .fpvf-wheel__img { transform: none; }
@media (max-width: 900px) {
	.fpvf-buckets ul.fpvf-buckets__frames { grid-auto-columns: minmax(15rem, 72%); }
}

/* ================================================================ 1.0.95 Finish it off: a harness made for your car
 * (Garreth, 29 Sep). One slim row at the end of the seat bands: the car's own quick fit harness, never a
 * guess. A small photo, the name and price, a quiet View pill; up to three sit side by side. */
.fpvf-seats .fpvf-seats__harness { margin-top: 1.1rem; }
.fpvf-seats ul.fpvf-harnesses {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem;
	margin: 0; padding: 0; list-style: none;
}
.fpvf-seats ul.fpvf-harnesses li { margin: 0; min-width: 0; }
.fpvf-seats a.fpvf-harness {
	display: flex; align-items: center; gap: .85rem; height: 100%;
	padding: .5rem .75rem .5rem .5rem;
	background: var(--fpvf-surface, #fff); border: 1px solid var(--fpvf-line, #dcd9d3); border-radius: var(--fpvf-r-sm, 6px);
	color: var(--fpvf-ink, #16140f); text-decoration: none;
	transition: border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
.fpvf-seats a.fpvf-harness:hover { border-color: var(--fpvf-brand-edge, #efb5b5); box-shadow: 0 10px 22px -16px rgba(22, 20, 15, .45); color: var(--fpvf-ink, #16140f); }
.fpvf-seats a.fpvf-harness:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-harness__pic { flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 4px; background: var(--fpvf-surface, #fff); }
.fpvf-seats .fpvf-harness__pic img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.fpvf-harness__txt { flex: 1 1 auto; min-width: 0; display: grid; gap: .15rem; }
.fpvf-harness__txt b {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
.fpvf-harness__txt span { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fpvf-harness__go {
	flex: none; padding: .35rem .8rem; border-radius: 999px;
	background: var(--fpvf-brand-wash, #fff1f1); color: var(--fpvf-brand-dark, #aa0e0e);
	font-size: .8125rem; font-weight: 700; line-height: 1.2;
}
.fpvf-seats a.fpvf-harness:hover .fpvf-harness__go { background: var(--fpvf-brand, #cc1111); color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.fpvf-seats a.fpvf-harness { transition: none; }
}

/* ================================================================ 1.0.96 your car, where it helps (Garreth, 29 Sep)
 * 1. Homepage band, welcome back: the plate half keeps its dark panel, heading, sub line and 64px row.
 *    The customer's own plate (read only) takes the input's place and "Show my parts" the button's,
 *    so the band does not move a pixel. "Not this car?" hands the form back.
 * 2. Dead ends (empty search, 404): the pick-your-wheel band's family, four best sellers for the car. */

/* ---------- 1. welcome back ---------- */
.fpvf-home__col--plate.is-welcome > :not(.fpvf-welcome) { display: none !important; }
.fpvf-home__col--plate:not(.is-welcome) > .fpvf-welcome { display: none; }
.fpvf-welcome {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	animation: fpvf-welcome-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes fpvf-welcome-in { from { opacity: 0; transform: translateY(6px); } }

.fpvf-home .fpvf-welcome p.fpvf-home__sub b { color: #fff; font-weight: 700; }

/* the plate: the input's own size and lettering, just not editable */
.fpvf-home .fpvf-welcome__plate { cursor: default; }
.fpvf-home .fpvf-welcome__plate .fpvf-plate__reg {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 .75rem;
	color: var(--fpvf-plate-ink, #14130f);
	font-family: "Charles Wright", "UKNumberPlate", ui-sans-serif, Verdana, sans-serif;
	font-size: clamp(1.375rem, 5.6cqi, 2.125rem);
	letter-spacing: .07em;
	line-height: 1;
	white-space: nowrap;
	user-select: all;
}

/* no plate on file: the car itself, its photo in a round frame like the garage */
.fpvf-home .fpvf-welcome__car {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: .85rem;
	min-width: 0;
	height: 4rem;
	padding: 0 1rem 0 .5rem;
	border-radius: 9px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
}
.fpvf-welcome__pic {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--fpvf-on-dark, #f6f4ef);
}
.fpvf-home .fpvf-welcome__pic img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.fpvf-welcome__name {
	overflow: hidden;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* the button is a link here: keep the theme's link colour and underline off it */
.fpvf-home a.fpvf-welcome__go,
.fpvf-home a.fpvf-welcome__go:hover,
.fpvf-home a.fpvf-welcome__go:focus { color: #fff; text-decoration: none; }
.fpvf-home a.fpvf-welcome__go .fpvf-i { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.fpvf-home a.fpvf-welcome__go:hover .fpvf-i { transform: translateX(3px); }

/* the quiet line under the row: another car, or one of the others in the garage */
.fpvf-home .fpvf-welcome__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .625rem 1.25rem;
	margin-top: auto;
	padding-top: 1.125rem;
	font-size: .9375rem;
	color: var(--fpvf-on-dark-2, #a8a49b);
}
.fpvf-home .fpvf-welcome__alt .fpvf-link { color: var(--fpvf-on-dark, #f6f4ef); }
.fpvf-welcome__more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fpvf-welcome__or { color: var(--fpvf-on-dark-2, #a8a49b); }
.fpvf-home .fpvf-welcome button.fpvf-welcome__chip {
	min-height: 2.25rem;
	margin: 0;
	padding: .35rem .9rem;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s cubic-bezier(.16, 1, .3, 1), border-color .18s cubic-bezier(.16, 1, .3, 1);
}
.fpvf-home .fpvf-welcome button.fpvf-welcome__chip:hover { background: rgba(255, 255, 255, .1); border-color: var(--fpvf-brand, #cc1111); }
.fpvf-home .fpvf-welcome button.fpvf-welcome__chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fpvf-home .fpvf-welcome button.fpvf-welcome__chip.is-busy { opacity: .6; cursor: progress; }

@media (max-width: 520px) {
	.fpvf-home .fpvf-welcome__car { flex: 0 0 auto; width: 100%; }
	.fpvf-home .fpvf-welcome__plate { flex: 0 0 auto; width: 100%; }
}

/* ---------- 2. dead ends: an empty search, the 404 ---------- */
.fpvf-yourcar-wrap { max-width: 1360px; margin: 1.75rem auto 2.5rem; }
.fpvf-yourcar-wrap:has(> [hidden]) { display: none; }
.fpvf-wheels.fpvf-yourcar { margin: 0; }
.fpvf-yourcar h2.fpvf-yourcar__title {
	margin: 0 0 .3rem;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-wrap: balance;
	color: var(--fpvf-ink, #16140f);
}
.fpvf-yourcar a.fpvf-yourcar__all,
.fpvf-yourcar a.fpvf-yourcar__all:hover,
.fpvf-yourcar a.fpvf-yourcar__all:focus { color: #fff; text-decoration: none; }
.fpvf-yourcar a.fpvf-yourcar__all { flex: none; min-height: 3rem; white-space: nowrap; }
.fpvf-yourcar a.fpvf-yourcar__all:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-yourcar a.fpvf-yourcar__all .fpvf-i { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.fpvf-yourcar a.fpvf-yourcar__all:hover .fpvf-i { transform: translateX(3px); }
.fpvf-yourcar .fpvf-wheels__top { margin-bottom: 1rem; }
.fpvf-yourcar { animation: fpvf-welcome-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@media (min-width: 900.02px) {
	.fpvf-yourcar ul.fpvf-yourcar__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.fpvf-yourcar a.fpvf-yourcar__all { width: 100%; }
	.fpvf-yourcar-wrap { margin: 1.25rem 0 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fpvf-welcome,
	.fpvf-yourcar { animation: none; }
	.fpvf-home a.fpvf-welcome__go .fpvf-i,
	.fpvf-yourcar a.fpvf-yourcar__all .fpvf-i { transition: none; }
}

/* ================================================================ 1.0.99 one row per section (Garreth, 29 Sep)
 * The heading keeps its hairline; the title sits left and, when the row overflows, the place
 * ("1-4 of 25") and two round arrows sit right on the same line, so the heading grows no taller.
 * The row is the theme's own cards in a single sliding line: 4 across on desktop, 3 and 2 on
 * tablets, and on a phone one card with the next one peeking in, which says "swipe" on its own. */
.fpvf-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
	margin: 0 0 .75rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--fpvf-line, #dcd9d3);
}
.fpvf-group__head .fpvf-group__title { margin: 0; padding: 0; border: 0; min-width: 0; }
.fpvf-hero__panel .fpvf-group__head { border-bottom-color: rgba(255, 255, 255, .14); }

.fpvf-rail__nav { display: flex; flex: none; align-items: center; gap: .375rem; }
.fpvf-rail__nav[hidden] { display: none; }
.fpvf-rail__pos {
	margin-right: .375rem;
	font-size: .8125rem;
	color: var(--fpvf-ink-2, #55514a);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.fpvf .fpvf-group button.fpvf-rail__btn {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fpvf-line, #dcd9d3);
	border-radius: 50%;
	background: var(--fpvf-surface, #fff);
	color: var(--fpvf-ink, #16140f);
	cursor: pointer;
	transition: border-color .18s cubic-bezier(.16, 1, .3, 1), color .18s cubic-bezier(.16, 1, .3, 1), background-color .18s cubic-bezier(.16, 1, .3, 1);
}
.fpvf .fpvf-group button.fpvf-rail__btn:hover:not(:disabled) { border-color: var(--fpvf-brand, #cc1111); color: var(--fpvf-brand, #cc1111); background: var(--fpvf-brand-wash, #fff1f1); }
.fpvf .fpvf-group button.fpvf-rail__btn:active:not(:disabled) { transform: translateY(1px); }
.fpvf .fpvf-group button.fpvf-rail__btn:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf .fpvf-group button.fpvf-rail__btn:disabled { opacity: .35; cursor: default; }

/* the row: the theme's grid becomes one line that slides */
.fpvf-group.fpvf-rail ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.fpvf-group.fpvf-rail ul.products::-webkit-scrollbar { display: none; }
.fpvf-group.fpvf-rail ul.products::before,
.fpvf-group.fpvf-rail ul.products::after { display: none !important; }
.fpvf-group.fpvf-rail ul.products > li.product {
	flex: 0 0 25% !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	scroll-snap-align: start;
}
@media (max-width: 1024px) { .fpvf-group.fpvf-rail ul.products > li.product { flex-basis: 33.3333% !important; } }
@media (max-width: 768px) { .fpvf-group.fpvf-rail ul.products > li.product { flex-basis: 50% !important; } }
@media (max-width: 520px) {
	.fpvf-group.fpvf-rail ul.products > li.product { flex-basis: 82% !important; }
	.fpvf-rail__pos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fpvf-group.fpvf-rail ul.products { scroll-behavior: auto; }
	.fpvf .fpvf-group button.fpvf-rail__btn { transition: none; }
}

/* ================================================================ 1.0.103 guides about your car, on a product page
 * (Garreth, 30 Sep): moved under the description tabs and drawn exactly like the "Guides and advice"
 * strip below it (fp-guides-advice). That plugin prints its styles only when it has cards of its own,
 * so the same rules live here too, scoped to our slot, and the two strips always match. */
.fpvf-pguides-slot .fpga-strip { max-width: calc(5.2325em + 1400px); padding-left: 2.61792em; padding-right: 2.61792em; margin: 40px auto 10px; clear: both; }
@media (max-width: 992px) { .fpvf-pguides-slot .fpga-strip { padding-left: 1em; padding-right: 1em; } }
.fpvf-pguides-slot .fpga-strip h2 { font-size: 1.35em; margin: 0 0 18px; }
.fpvf-pguides-slot .fpga-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; max-width: 100%; }
.fpvf-pguides-slot .fpga-card { display: block; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.fpvf-pguides-slot .fpga-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.fpvf-pguides-slot .fpga-thumb { aspect-ratio: 16 / 9; background: #f2f2f2; overflow: hidden; }
.fpvf-pguides-slot .fpga-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpvf-pguides-slot .fpga-body { padding: 12px 14px 16px; }
.fpvf-pguides-slot .fpga-label { display: inline-block; font-size: .68em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #1e7a34; border-radius: 3px; padding: 2px 7px; margin-bottom: 8px; }
.fpvf-pguides-slot .fpga-title { display: block; font-weight: 600; line-height: 1.35; color: #222; }
@media (max-width: 600px) { .fpvf-pguides-slot .fpga-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .fpvf-pguides-slot .fpga-body { padding: 9px 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .fpvf-pguides-slot .fpga-card { transition: none; } }

/* Results-page route back to Garage. A real link also works before the finder loads. */
.fpvf-breadcrumb { margin: 0; padding-top: 1rem; }
.fpvf-breadcrumb + .fpvf__head { padding-top: .5rem; }
.fpvf .fpvf-breadcrumb__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
	line-height: 1.4;
}
.fpvf .fpvf-breadcrumb__items > li { margin: 0; padding: 0; }
.fpvf .fpvf-breadcrumb__back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	color: var(--fpvf-brand-dark, #aa0e0e);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.fpvf-breadcrumb__back svg { flex: 0 0 18px; }
.fpvf .fpvf-breadcrumb__back:hover { color: var(--fpvf-ink, #202620); }
.fpvf .fpvf-breadcrumb__back:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.fpvf-breadcrumb__current { display: flex; align-items: center; gap: 1rem; color: var(--fpvf-muted, #555); }
.fpvf-breadcrumb__separator { color: currentColor; }
@media (max-width: 480px) {
	.fpvf .fpvf-breadcrumb__items { gap: .125rem .75rem; font-size: .875rem; }
	.fpvf-breadcrumb__current { gap: .75rem; }
}

/* Dedicated results page: one title/car column; lookup remains in the site header. */
.fpvf--page.fpvf--results-only .fpvf__head { grid-template-columns: minmax(0, 1fr); }
.fpvf--page.fpvf--results-only .fpvf-status { text-align: left; max-width: none; }

/* 1.0.108: the note under the roll cage heading (body shape, shell, sunroof) */
.fpvf-group__note {
	margin: -.25rem 0 .875rem;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--fpvf-ink-2, #55514a);
	max-width: 62rem;
}
.fpvf-hero__panel .fpvf-group__note { color: var(--fpvf-on-dark-2, #a8a49b); }

/* 1.0.109 (Garreth, 10 Nov 2026): the guide for the car on screen, above the parts. "Guides
   about your car" only ever sat at the very bottom, under every product row, where few people
   scroll. One slim card the height of the "On our other shops" chips, so the parts stay the
   first thing on the page. The full list still closes the page. */
a.fpvf-topguide {
	display: flex; align-items: center; gap: .875rem; margin: 0 0 1.25rem; padding: .625rem 1rem .625rem .625rem;
	border: 1px solid var(--fpvf-line, #dcd9d3); border-radius: 12px; background: var(--fpvf-panel, #f4f2ee);
	color: var(--fpvf-ink, #16140f); text-decoration: none;
	transition: border-color .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1)), box-shadow .18s var(--fpvf-ease, cubic-bezier(.16, 1, .3, 1));
}
a.fpvf-topguide:hover { border-color: #d3cfc7; box-shadow: 0 12px 26px -20px rgba(22, 20, 15, .45); color: var(--fpvf-ink, #16140f); text-decoration: none; }
a.fpvf-topguide:focus-visible { outline: 3px solid var(--fpvf-brand, #cc1111); outline-offset: 2px; }
.fpvf-topguide__img { position: relative; flex: 0 0 5.5rem; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #fff; }
.fpvf-topguide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fpvf-topguide__body { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; min-width: 0; padding-left: .25rem; }
.fpvf-topguide__eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fpvf-ink-2, #55514a); }
.fpvf-topguide__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.3; }
a.fpvf-topguide:hover .fpvf-topguide__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fpvf-brand, #cc1111); }
.fpvf-topguide__cta { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; font-size: .875rem; font-weight: 700; color: var(--fpvf-brand-dark, #aa0e0e); white-space: nowrap; }
.fpvf-topguide__cta::after { content: ''; width: .4rem; height: .4rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (max-width: 560px) { a.fpvf-topguide { gap: .625rem; padding-right: .75rem; } .fpvf-topguide__img { flex-basis: 4.25rem; } .fpvf-topguide__cta { display: none; } }
@media (prefers-reduced-motion: reduce) { a.fpvf-topguide { transition: none; } }