/*
 * Hunter Special Vehicles Feed Sync - frontend stylesheet.
 *
 * Marketplace-style listing grid, filter sidebar (a slide-in drawer on
 * small screens), hero banner, vehicle detail page (gallery + lightbox,
 * key-features grid, sticky price card, mobile call/enquire bar), spec
 * table, enquiry form, compare bar/modal. Plain CSS, no build step, no
 * external fonts/CDN.
 *
 * Icons: every .hsv-afi-icon is a CSS mask over the bundled SVG files in
 * assets/img/icons/, painted with currentColor - so one set of files
 * works on white cards, in tinted circles, and on accent buttons.
 */

/* Self-hosted (no external CDN, matching this plugin's existing
   principle) Manrope (body) + Barlow Condensed (display/headings) -
   the dealer's actual brand typography, extracted from a commissioned
   redesign concept built against the real site. Manrope ships as one
   variable-weight file; Barlow Condensed as four static weights. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url( "fonts/manrope-variable.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( "fonts/barlow-condensed-600.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( "fonts/barlow-condensed-700.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url( "fonts/barlow-condensed-800.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url( "fonts/barlow-condensed-900.woff2" ) format( "woff2" );
}

:root {
	/* Color: the dealer's real brand system (extracted from their actual
	   logo and a commissioned redesign, not a generic placeholder palette).
	   Every variable here can be - and several are, from wp-admin's
	   Display settings screen - overridden by an inline stylesheet the
	   plugin injects per-site; keep the variable names stable even when
	   refining a default value. */
	--hsv-afi-color-text: #ece7da;
	--hsv-afi-color-text-muted: #a79f8c;
	--hsv-afi-color-text-faint: #9a9281;
	--hsv-afi-color-border: #1c2a38;
	--hsv-afi-color-border-strong: #2e4152;
	--hsv-afi-color-surface: #0f1c29;
	--hsv-afi-color-surface-muted: #0b1620;
	--hsv-afi-color-surface-sunken: #081219;
	/* Accent is the dealer's own brand sky blue (see --hsv-afi-color-sky
	   below), not a generic UI blue - gold stays reserved for the one
	   highest-emphasis button per screen (see .hsv-afi-btn--gold), and
	   nothing here introduces a third, unbranded "success green", so the
	   page reads as one considered brand rather than a default dark-mode
	   component kit. */
	--hsv-afi-color-accent: #48bce8;
	--hsv-afi-color-accent-hover: #6cc9ec;
	--hsv-afi-color-accent-soft: rgba( 72, 188, 232, 0.16 );
	--hsv-afi-color-accent-contrast: #081722;
	--hsv-afi-color-focus: #48bce8;
	--hsv-afi-color-success: #48bce8;
	--hsv-afi-color-navy: #0a1d2e;
	--hsv-afi-color-navy-soft: #0f2b41;
	--hsv-afi-color-sky: #48bce8;
	--hsv-afi-color-gold: #d3a93e;
	--hsv-afi-color-gold-hover: #e1b947;
	--hsv-afi-color-gold-contrast: #1c1608;
	--hsv-afi-color-badge-condition-bg: #21262c;
	--hsv-afi-color-badge-condition-text: #ffffff;
	--hsv-afi-color-badge-sale-bg: #b3261e;
	--hsv-afi-color-badge-sale-text: #ffffff;
	--hsv-afi-color-badge-new-bg: #1a7d4b;
	--hsv-afi-color-badge-new-text: #ffffff;
	--hsv-afi-color-badge-reduced-bg: #b85c12;
	--hsv-afi-color-badge-reduced-text: #ffffff;

	/* Spacing scale. */
	--hsv-afi-space-1: 0.25rem;
	--hsv-afi-space-2: 0.5rem;
	--hsv-afi-space-3: 0.75rem;
	--hsv-afi-space-4: 1rem;
	--hsv-afi-space-5: 1.5rem;
	--hsv-afi-space-6: 2rem;
	--hsv-afi-space-7: 3rem;

	/* Radius scale: sharper and more technical than a rounded-pill
	   marketplace look, matching the dealer's own tactical/commercial
	   brand identity (a bold condensed wordmark, angular chevron marks). */
	--hsv-afi-radius-sm: 4px;
	--hsv-afi-radius: 8px;
	--hsv-afi-radius-lg: 12px;
	--hsv-afi-radius-pill: 999px;

	/* Elevation: shadows tinted with the brand navy instead of neutral
	   black, so every card/panel/button reads as one cohesive system. */
	--hsv-afi-shadow-sm: 0 1px 2px rgba( 8, 34, 56, 0.06 ), 0 1px 6px rgba( 8, 34, 56, 0.05 );
	--hsv-afi-shadow: 0 2px 8px rgba( 8, 34, 56, 0.08 ), 0 10px 28px rgba( 8, 34, 56, 0.08 );
	--hsv-afi-shadow-lg: 0 8px 20px rgba( 8, 34, 56, 0.12 ), 0 24px 55px rgba( 8, 34, 56, 0.14 );

	/* Type: Manrope (body) + Barlow Condensed (display) - self-hosted
	   above, falling back to the system stack if a font file ever fails
	   to load, exactly as before. */
	--hsv-afi-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hsv-afi-font-display: "Barlow Condensed", "Arial Narrow", -apple-system, sans-serif;

	/* Layout. */
	--hsv-afi-sidebar-width: 18em;
	--hsv-afi-single-max-width: 78em;
	--hsv-afi-archive-max-width: 84em;
}

/* (v2.7.6) The old rule here hid the theme-compat "#header"/"#footer"
   fallback that get_header() printed on a block theme. Block themes now get
   a proper page frame from HSV_AFI_Frontend::render_page_open()/
   render_page_close(), so that fallback no longer exists - and the rule
   could only ever hide a real #header/#footer on a classic theme. */

/* ------------------------------------------------------------------ */
/* Scoped base                                                         */
/* ------------------------------------------------------------------ */

.hsv-afi-inventory,
.hsv-afi-archive,
.hsv-afi-single,
.hsv-afi-compare-bar,
.hsv-afi-compare-modal,
.hsv-afi-recently-viewed {
	color: var( --hsv-afi-color-text );
	font-family: var( --hsv-afi-font );
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.hsv-afi-inventory *,
.hsv-afi-inventory *::before,
.hsv-afi-inventory *::after,
.hsv-afi-archive *,
.hsv-afi-archive *::before,
.hsv-afi-archive *::after,
.hsv-afi-single *,
.hsv-afi-single *::before,
.hsv-afi-single *::after,
.hsv-afi-compare-modal *,
.hsv-afi-compare-bar * {
	box-sizing: border-box;
}

.hsv-afi-inventory img,
.hsv-afi-single img {
	max-width: 100%;
}

/* The [hidden] attribute must always win over any display value set on
   these overlays/toggles below (author `display: flex` would otherwise
   override the UA's `display: none` for hidden elements). */
.hsv-afi-lightbox[hidden],
.hsv-afi-compare-modal[hidden],
.hsv-afi-compare-bar[hidden],
.hsv-afi-filter-toggle[hidden],
.hsv-afi-readmore-btn[hidden],
.hsv-afi-recently-viewed[hidden] {
	display: none !important;
}

/* Visually-hidden helper for accessible labels/captions. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Consistent, clearly-visible focus treatment across every interactive element. */
.hsv-afi-inventory a:focus-visible,
.hsv-afi-inventory button:focus-visible,
.hsv-afi-inventory select:focus-visible,
.hsv-afi-inventory input:focus-visible,
.hsv-afi-archive a:focus-visible,
.hsv-afi-single a:focus-visible,
.hsv-afi-single button:focus-visible,
.hsv-afi-single input:focus-visible,
.hsv-afi-single textarea:focus-visible,
.hsv-afi-compare-bar button:focus-visible,
.hsv-afi-compare-modal button:focus-visible,
.hsv-afi-compare-modal a:focus-visible {
	outline: 2px solid var( --hsv-afi-color-focus );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Icons (bundled SVGs applied as CSS masks, painted in currentColor)  */
/* ------------------------------------------------------------------ */

.hsv-afi-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.28em;
	background-color: currentColor;
	-webkit-mask: var( --hsv-afi-icon-src ) center / contain no-repeat;
	mask: var( --hsv-afi-icon-src ) center / contain no-repeat;
}

.hsv-afi-icon--odometer { --hsv-afi-icon-src: url( "img/icons/odometer.svg" ); }
.hsv-afi-icon--transmission { --hsv-afi-icon-src: url( "img/icons/transmission.svg" ); }
.hsv-afi-icon--fuel { --hsv-afi-icon-src: url( "img/icons/fuel.svg" ); }
.hsv-afi-icon--body { --hsv-afi-icon-src: url( "img/icons/body.svg" ); }
.hsv-afi-icon--drive { --hsv-afi-icon-src: url( "img/icons/drive.svg" ); }
.hsv-afi-icon--engine { --hsv-afi-icon-src: url( "img/icons/engine.svg" ); }
.hsv-afi-icon--calendar { --hsv-afi-icon-src: url( "img/icons/calendar.svg" ); }
.hsv-afi-icon--seat { --hsv-afi-icon-src: url( "img/icons/seat.svg" ); }
.hsv-afi-icon--colour { --hsv-afi-icon-src: url( "img/icons/colour.svg" ); }
.hsv-afi-icon--door { --hsv-afi-icon-src: url( "img/icons/door.svg" ); }
.hsv-afi-icon--cylinders { --hsv-afi-icon-src: url( "img/icons/cylinders.svg" ); }
.hsv-afi-icon--steering { --hsv-afi-icon-src: url( "img/icons/steering.svg" ); }
.hsv-afi-icon--warranty { --hsv-afi-icon-src: url( "img/icons/warranty.svg" ); }
.hsv-afi-icon--finance { --hsv-afi-icon-src: url( "img/icons/finance.svg" ); }
.hsv-afi-icon--transport { --hsv-afi-icon-src: url( "img/icons/transport.svg" ); }
.hsv-afi-icon--ppsr { --hsv-afi-icon-src: url( "img/icons/ppsr.svg" ); }
.hsv-afi-icon--phone { --hsv-afi-icon-src: url( "img/icons/phone.svg" ); }
.hsv-afi-icon--email { --hsv-afi-icon-src: url( "img/icons/email.svg" ); }
.hsv-afi-icon--camera { --hsv-afi-icon-src: url( "img/icons/camera.svg" ); }
.hsv-afi-icon--location { --hsv-afi-icon-src: url( "img/icons/location.svg" ); }
.hsv-afi-icon--video { --hsv-afi-icon-src: url( "img/icons/video.svg" ); }
.hsv-afi-icon--compare { --hsv-afi-icon-src: url( "img/icons/compare.svg" ); }
.hsv-afi-icon--trusted { --hsv-afi-icon-src: url( "img/icons/trusted.svg" ); }
.hsv-afi-icon--workshop { --hsv-afi-icon-src: url( "img/icons/workshop.svg" ); }
.hsv-afi-icon--filters { --hsv-afi-icon-src: url( "img/icons/filters.svg" ); }
.hsv-afi-icon--heart { --hsv-afi-icon-src: url( "img/icons/heart.svg" ); }
.hsv-afi-icon--message { --hsv-afi-icon-src: url( "img/icons/message.svg" ); }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.hsv-afi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 2.9em;
	padding: 0.7em 1.25em;
	border: 1px solid transparent;
	border-radius: var( --hsv-afi-radius );
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.hsv-afi-btn .hsv-afi-icon {
	width: 1.15em;
	height: 1.15em;
	vertical-align: middle;
}

.hsv-afi-btn:active {
	transform: translateY( 1px );
}

.hsv-afi-btn--primary {
	background: var( --hsv-afi-color-accent );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent-contrast );
	box-shadow: var( --hsv-afi-shadow-sm );
}

.hsv-afi-btn--primary:hover,
.hsv-afi-btn--primary:focus {
	background: var( --hsv-afi-color-accent-hover );
	border-color: var( --hsv-afi-color-accent-hover );
	color: var( --hsv-afi-color-accent-contrast );
	box-shadow: var( --hsv-afi-shadow );
}

.hsv-afi-btn--secondary {
	background: var( --hsv-afi-color-surface );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-btn--secondary:hover,
.hsv-afi-btn--secondary:focus {
	background: var( --hsv-afi-color-accent-soft );
	color: var( --hsv-afi-color-accent-hover );
}

.hsv-afi-btn--ghost {
	background: transparent;
	border-color: var( --hsv-afi-color-border-strong );
	color: var( --hsv-afi-color-text );
	font-weight: 600;
}

.hsv-afi-btn--ghost:hover,
.hsv-afi-btn--ghost:focus {
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

/* For use on a dark surface (the navy price card, header) - the same
   role .hsv-afi-btn--ghost plays on a light surface. */
.hsv-afi-btn--ghost-dark {
	background: rgba( 255, 255, 255, 0.05 );
	border-color: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	font-weight: 700;
}

.hsv-afi-btn--ghost-dark:hover,
.hsv-afi-btn--ghost-dark:focus {
	background: rgba( 255, 255, 255, 0.1 );
	border-color: rgba( 255, 255, 255, 0.28 );
	color: #fff;
}

/* The highest-emphasis call to action (Enquire Now) - reserved for one
   button per screen so it keeps its weight. */
.hsv-afi-btn--gold {
	background: var( --hsv-afi-color-gold );
	border-color: var( --hsv-afi-color-gold );
	color: var( --hsv-afi-color-gold-contrast );
	box-shadow: 0 9px 24px rgba( 211, 169, 62, 0.18 );
}

.hsv-afi-btn--gold:hover,
.hsv-afi-btn--gold:focus {
	background: var( --hsv-afi-color-gold-hover );
	border-color: var( --hsv-afi-color-gold-hover );
	color: var( --hsv-afi-color-gold-contrast );
	box-shadow: 0 12px 28px rgba( 211, 169, 62, 0.26 );
}

/* ------------------------------------------------------------------ */
/* Archive wrapper + hero                                              */
/* ------------------------------------------------------------------ */

.hsv-afi-archive {
	max-width: var( --hsv-afi-archive-max-width );
	margin: 0 auto;
	/* The compare bar (.hsv-afi-compare-bar below) is fixed-position at
	   every viewport width, not just the narrow single-vehicle breakpoint
	   that already reserves space for it (see .hsv-afi-single) - without
	   this, it floats directly on top of the last card row the moment a
	   second vehicle is selected for comparison. */
	padding: 0 clamp( 1rem, 4vw, 3rem ) calc( var( --hsv-afi-space-7 ) + 4.5em );
}

/* Dark, technical "workshop blueprint" hero: brand navy, a faint grid
   line pattern plus a soft sky-blue glow, rather than a stock photo -
   matches the dealer's own bold, tactical brand identity (a chrome
   wordmark on black) more directly than a lifestyle photo would. */
.hsv-afi-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 var( --hsv-afi-space-6 );
	padding: clamp( 2rem, 5vw, 3.5rem ) clamp( 1.5rem, 4vw, 3rem );
	border-radius: var( --hsv-afi-radius-lg );
	background-color: var( --hsv-afi-color-navy );
	background-image:
		linear-gradient( 90deg, rgba( 255, 255, 255, 0.035 ) 1px, transparent 1px ),
		linear-gradient( rgba( 255, 255, 255, 0.03 ) 1px, transparent 1px ),
		radial-gradient( circle at 72% 22%, rgba( 23, 111, 166, 0.4 ), transparent 42% );
	background-size: 42px 42px, 42px 42px, auto;
	color: #fff;
	box-shadow: var( --hsv-afi-shadow );
}

.hsv-afi-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --hsv-afi-space-5 );
}

.hsv-afi-hero-eyebrow {
	display: block;
	margin: 0 0 var( --hsv-afi-space-2 );
	color: var( --hsv-afi-color-gold );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hsv-afi-hero-copy {
	max-width: 38em;
}

.hsv-afi-hero-title {
	margin: 0 0 var( --hsv-afi-space-3 );
	color: #fff;
	font-family: var( --hsv-afi-font-display );
	font-size: clamp( 2.2rem, 5vw, 3.4rem );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
}

.hsv-afi-hero-text {
	margin: 0;
	color: rgba( 255, 255, 255, 0.68 );
	font-size: clamp( 1rem, 1.6vw, 1.1rem );
	line-height: 1.6;
}

.hsv-afi-hero-count {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 1.2em;
	background: var( --hsv-afi-color-gold );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-gold-contrast );
	font-size: 0.92em;
	font-weight: 800;
}

.hsv-afi-hero-count .hsv-afi-icon {
	width: 1.1em;
	height: 1.1em;
}

/* ------------------------------------------------------------------ */
/* Trust strip: a full-width band of the dealer's configured highlights */
/* (Vehicles → Display → Dealer Details), shown under the hero on the   */
/* listing page and again on the single vehicle page - see              */
/* HSV_AFI_Frontend::render_trust_strip().                              */
/* ------------------------------------------------------------------ */

.hsv-afi-trust-strip {
	margin: 0 0 var( --hsv-afi-space-6 );
	border-top: 1px solid var( --hsv-afi-color-border );
	border-bottom: 1px solid var( --hsv-afi-color-border );
}

/* minmax( 0, 1fr ), not 1fr: a plain 1fr track will not shrink below its
   content, so on a 390px phone the two columns (icon disc + text) grew to
   218px each and pushed the whole page 43px wider than the screen. */
.hsv-afi-trust-strip-inner {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

@media ( min-width: 720px ) {
	.hsv-afi-trust-strip-inner {
		grid-template-columns: repeat( var( --hsv-afi-trust-strip-count, 4 ), minmax( 0, 1fr ) );
	}
}

.hsv-afi-trust-strip-item {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	min-width: 0;
	padding: var( --hsv-afi-space-4 ) var( --hsv-afi-space-4 );
	border-right: 1px solid var( --hsv-afi-color-border );
	border-bottom: 1px solid var( --hsv-afi-color-border );
}

@media ( min-width: 720px ) {
	.hsv-afi-trust-strip-item {
		border-bottom: 0;
	}

	.hsv-afi-trust-strip-item:last-child {
		border-right: 0;
	}
}

.hsv-afi-trust-strip-item:nth-child( 2n ) {
	border-right: 0;
}

.hsv-afi-trust-strip-text {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 0.9em;
	font-weight: 700;
	color: var( --hsv-afi-color-text );
	line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* Full-bleed breakout                                                  */
/* ------------------------------------------------------------------ */

/* Lets [hsv_vehicle_inventory full_width="yes"] escape a theme's
   constrained content column without needing a special page template.
   The "-clip" wrapper must NOT clip: it sits inside that narrow column, so
   any overflow clipping on it cuts the breakout off at the column edges
   (the filter sidebar and the card grid were both sliced by roughly 100px
   a side on a 1400px screen). The only thing that needs confining is the
   100vw overhang a vertical scrollbar causes, and that is confined at the
   page level instead. overflow-x: clip (unlike hidden) does not turn the
   page into a scroll container, so position: sticky keeps working. */
.hsv-afi-full-bleed-clip {
	max-width: 100%;
}

html:has( .hsv-afi-full-bleed ) {
	overflow-x: clip;
}

.hsv-afi-full-bleed {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding-left: clamp( 1rem, 4vw, 3rem );
	padding-right: clamp( 1rem, 4vw, 3rem );
}

/* ------------------------------------------------------------------ */
/* Listing layout: sidebar + results                                   */
/* ------------------------------------------------------------------ */

.hsv-afi-filter-form {
	display: grid;
	grid-template-columns: minmax( 15em, var( --hsv-afi-sidebar-width ) ) minmax( 0, 1fr );
	align-items: start;
	gap: var( --hsv-afi-space-6 );
	margin: 0 0 var( --hsv-afi-space-6 );
}

.hsv-afi-inventory--no-sidebar .hsv-afi-filter-form {
	grid-template-columns: minmax( 0, 1fr );
}

.hsv-afi-results {
	min-width: 0;
}

/* Sidebar (desktop: sticky panel; mobile: slide-in drawer, see below). */
.hsv-afi-sidebar {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-4 );
	padding: var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-sm );
}

@media ( min-width: 861px ) {
	.hsv-afi-sidebar {
		position: sticky;
		top: var( --hsv-afi-space-5 );
		max-height: calc( 100vh - var( --hsv-afi-space-6 ) );
		overflow-y: auto;
	}
}

.hsv-afi-sidebar-head {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	padding-bottom: var( --hsv-afi-space-3 );
	border-bottom: 1px solid var( --hsv-afi-color-border );
}

.hsv-afi-sidebar-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.02em;
	font-weight: 800;
	letter-spacing: -0.005em;
}

.hsv-afi-sidebar-close {
	display: none;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	background: var( --hsv-afi-color-surface-muted );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: 50%;
	color: var( --hsv-afi-color-text );
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}

.hsv-afi-filter-field {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-filter-field label,
.hsv-afi-filter-label {
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.74em );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hsv-afi-filter-field select,
.hsv-afi-filter-field input[type="number"],
.hsv-afi-filter-field input[type="search"] {
	width: 100%;
	min-height: 2.75em;
	padding: 0.55em 0.8em;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	font-size: 0.94em;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hsv-afi-filter-field select {
	padding-right: 2.2em;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.7em center;
	background-size: 1em;
	-webkit-appearance: none;
	appearance: none;
}

.hsv-afi-filter-field select:hover,
.hsv-afi-filter-field input:hover {
	border-color: var( --hsv-afi-color-text-faint );
}

.hsv-afi-filter-field select:focus,
.hsv-afi-filter-field input:focus {
	border-color: var( --hsv-afi-color-accent );
	box-shadow: 0 0 0 3px var( --hsv-afi-color-accent-soft );
	outline: none;
}

.hsv-afi-filter-range {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-filter-range-sep {
	color: var( --hsv-afi-color-text-muted );
}

.hsv-afi-sidebar-actions {
	position: sticky;
	bottom: 0;
	margin: var( --hsv-afi-space-1 ) calc( var( --hsv-afi-space-5 ) * -1 ) calc( var( --hsv-afi-space-5 ) * -1 );
	padding: var( --hsv-afi-space-3 ) var( --hsv-afi-space-5 ) var( --hsv-afi-space-5 );
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --hsv-afi-color-surface ) 30% );
	border-radius: 0 0 var( --hsv-afi-radius-lg ) var( --hsv-afi-radius-lg );
}

.hsv-afi-filter-submit-btn,
.hsv-afi-sort-submit-btn {
	padding: 0.8em 1.6em;
	background: var( --hsv-afi-color-accent );
	border: 1px solid var( --hsv-afi-color-accent );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-accent-contrast );
	font-family: inherit;
	font-size: 0.94em;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.hsv-afi-filter-submit-btn {
	width: 100%;
}

.hsv-afi-filter-submit-btn:hover,
.hsv-afi-sort-submit-btn:hover {
	background: var( --hsv-afi-color-accent-hover );
	border-color: var( --hsv-afi-color-accent-hover );
	box-shadow: var( --hsv-afi-shadow-sm );
}

.hsv-afi-filter-submit-btn:active,
.hsv-afi-sort-submit-btn:active {
	transform: translateY( 1px );
}

.hsv-afi-filter-clear {
	color: var( --hsv-afi-color-text-muted );
	font-size: 0.84em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.hsv-afi-filter-clear:hover,
.hsv-afi-filter-clear:focus {
	color: var( --hsv-afi-color-accent );
}

/* Results bar: filter toggle (mobile) + count + sort, then active chips. */
.hsv-afi-results-bar {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-3 );
	margin: 0 0 var( --hsv-afi-space-5 );
}

.hsv-afi-results-bar-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
}

.hsv-afi-results-count {
	flex: 1 1 auto;
	margin: 0;
	color: var( --hsv-afi-color-text-muted );
	font-size: 0.95em;
}

.hsv-afi-results-count strong {
	color: var( --hsv-afi-color-text );
	font-weight: 800;
}

/* Desktop: never shown (the sidebar is always visible there). The
   small-screen media query below turns it on once JS has made the
   sidebar a drawer. */
.hsv-afi-filter-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	min-height: 2.6em;
	padding: 0.5em 1em;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 700;
	cursor: pointer;
}

.hsv-afi-filter-toggle .hsv-afi-icon {
	transform: rotate( 90deg );
}

.hsv-afi-filter-toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.4em;
	background: var( --hsv-afi-color-accent );
	border-radius: var( --hsv-afi-radius-pill );
	color: var( --hsv-afi-color-accent-contrast );
	font-size: max( 0.75rem, 0.78em );
}

.hsv-afi-sort {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-sort label {
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.85em );
	font-weight: 600;
}

.hsv-afi-sort select {
	min-height: 2.6em;
	padding: 0.45em 2.2em 0.45em 0.8em;
	background: var( --hsv-afi-color-surface );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.7em center;
	background-size: 1em;
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}

.hsv-afi-sort-submit-btn {
	padding: 0.5em 1em;
	font-size: 0.85em;
}

/* JS submits the sort automatically; the button stays for no-JS visitors. */
.hsv-afi-has-js .hsv-afi-sort-submit-btn {
	display: none;
}

.hsv-afi-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --hsv-afi-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsv-afi-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.5em 0.35em 0.85em;
	background: var( --hsv-afi-color-accent-soft );
	border: 1px solid transparent;
	border-radius: var( --hsv-afi-radius-pill );
	color: var( --hsv-afi-color-accent );
	font-size: 0.82em;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hsv-afi-active-filter:hover,
.hsv-afi-active-filter:focus {
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent-hover );
}

.hsv-afi-active-filter-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	background: var( --hsv-afi-color-surface );
	border-radius: 50%;
	font-size: 1em;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Card grid + card                                                    */
/* ------------------------------------------------------------------ */

.hsv-afi-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 17em, 1fr ) );
	gap: var( --hsv-afi-space-5 );
	margin: 0 0 var( --hsv-afi-space-6 );
	padding: 0;
	list-style: none;
}

/* A fixed column count (the "columns" shortcode attribute / Display
   setting) arrives as a custom property rather than an inline
   grid-template-columns: an inline declaration beat every media query, so
   "3 columns" stayed three cramped columns on a 390px phone. */
.hsv-afi-card-grid--cols {
	grid-template-columns: repeat( var( --hsv-afi-columns, 3 ), minmax( 0, 1fr ) );
}

.hsv-afi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-sm );
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hsv-afi-card:hover,
.hsv-afi-card:focus-within {
	border-color: var( --hsv-afi-color-border-strong );
	box-shadow: var( --hsv-afi-shadow-lg );
	transform: translateY( -3px );
}

.hsv-afi-card-media-wrap {
	position: relative;
}

.hsv-afi-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: linear-gradient( 155deg, var( --hsv-afi-color-surface-muted ), var( --hsv-afi-color-surface-sunken ) );
	text-decoration: none;
}

/* Save-for-later toggle: a sibling of the media link (not nested inside
   it - two pieces of interactive content can't nest), positioned over
   its top-right corner. Client-side only (localStorage), see
   initSaved() in frontend.js. */
.hsv-afi-card-save {
	position: absolute;
	z-index: 2;
	top: var( --hsv-afi-space-3 );
	right: var( --hsv-afi-space-3 );
	display: grid;
	place-items: center;
	width: max( 2.75rem, 2.5em );
	height: max( 2.75rem, 2.5em );
	padding: 0;
	background: rgba( 255, 255, 255, 0.92 );
	border: 0;
	border-radius: 50%;
	box-shadow: var( --hsv-afi-shadow );
	/* This circle is a frosted overlay sitting on a vehicle photo, not on
	   the page surface - always light regardless of site theme, so its
	   icon stays a fixed dark color instead of following the (now light,
	   for a dark theme) --hsv-afi-color-text-muted token. */
	color: #565f6b;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
	transition: color 0.15s ease, transform 0.1s ease;
}

.hsv-afi-card-save:hover {
	color: #dc2626;
}

.hsv-afi-card-save.is-saved {
	color: #dc2626;
}

.hsv-afi-card-save:active {
	transform: scale( 0.92 );
}

.hsv-afi-card-save .hsv-afi-icon {
	width: 1.2em;
	height: 1.2em;
}

.hsv-afi-card-media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.hsv-afi-card:hover .hsv-afi-card-media-img:not( .hsv-afi-card-media-img--placeholder ) {
	transform: scale( 1.04 );
}

.hsv-afi-card-media-img--placeholder {
	object-fit: contain;
	padding: 12% 14%;
}

.hsv-afi-card-photo-count {
	position: absolute;
	z-index: 1;
	left: var( --hsv-afi-space-3 );
	bottom: var( --hsv-afi-space-3 );
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.65em;
	background: rgba( 23, 27, 33, 0.72 );
	border-radius: var( --hsv-afi-radius-pill );
	color: #fff;
	font-size: max( 0.75rem, 0.74em );
	font-weight: 700;
	letter-spacing: 0.02em;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

.hsv-afi-card-photo-count--none {
	background: rgba( 255, 255, 255, 0.85 );
	/* Same fixed-light-overlay reasoning as .hsv-afi-card-save above. */
	color: #565f6b;
}

.hsv-afi-card-badges {
	position: absolute;
	z-index: 1;
	top: var( --hsv-afi-space-3 );
	left: var( --hsv-afi-space-3 );
	right: calc( var( --hsv-afi-space-3 ) + 2.9em );
	display: flex;
	flex-wrap: wrap;
	gap: var( --hsv-afi-space-2 );
	pointer-events: none;
}

.hsv-afi-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.75em;
	background: var( --hsv-afi-color-surface );
	border-radius: var( --hsv-afi-radius-sm );
	box-shadow: var( --hsv-afi-shadow-sm );
	color: var( --hsv-afi-color-text );
	font-size: max( 0.75rem, 0.68em );
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hsv-afi-badge-condition {
	background: var( --hsv-afi-color-badge-condition-bg );
	color: var( --hsv-afi-color-badge-condition-text );
}

.hsv-afi-badge-sale {
	background: var( --hsv-afi-color-badge-sale-bg );
	color: var( --hsv-afi-color-badge-sale-text );
}

.hsv-afi-badge-new {
	background: var( --hsv-afi-color-badge-new-bg );
	color: var( --hsv-afi-color-badge-new-text );
}

.hsv-afi-badge-reduced {
	background: var( --hsv-afi-color-badge-reduced-bg );
	color: var( --hsv-afi-color-badge-reduced-text );
}

.hsv-afi-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var( --hsv-afi-space-3 );
	padding: var( --hsv-afi-space-4 ) var( --hsv-afi-space-4 ) var( --hsv-afi-space-4 );
}

.hsv-afi-card-heading {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.hsv-afi-card-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-card-eyebrow {
	margin: 0;
	overflow: hidden;
	color: var( --hsv-afi-color-accent );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 800;
	letter-spacing: 0.05em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.hsv-afi-card-title {
	margin: 0;
	font-family: var( --hsv-afi-font-display );
	font-size: 1.55em;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.hsv-afi-card-title a {
	color: var( --hsv-afi-color-text );
	text-decoration: none;
}

.hsv-afi-card-title a:hover,
.hsv-afi-card-title a:focus {
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-card-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --hsv-afi-space-2 ) var( --hsv-afi-space-3 );
	margin: 0;
	padding: var( --hsv-afi-space-3 ) 0;
	border-top: 1px solid var( --hsv-afi-color-border );
	border-bottom: 1px solid var( --hsv-afi-color-border );
	list-style: none;
}

.hsv-afi-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
	color: var( --hsv-afi-color-text );
	font-size: 0.85em;
	font-weight: 600;
}

.hsv-afi-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hsv-afi-chip .hsv-afi-icon {
	width: 1.3em;
	height: 1.3em;
	color: var( --hsv-afi-color-text-faint );
}

.hsv-afi-card-footer {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-3 );
	margin-top: auto;
}

.hsv-afi-card-price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --hsv-afi-space-3 );
}

.hsv-afi-card-price {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1.1;
}

.hsv-afi-card-price-now {
	color: var( --hsv-afi-color-text );
	font-family: var( --hsv-afi-font-display );
	font-size: 1.9em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hsv-afi-card-price-now--poa {
	font-size: 1.15em;
}

.hsv-afi-card-price-was {
	order: -1;
	color: var( --hsv-afi-color-text-faint );
	font-size: max( 0.75rem, 0.78em );
	font-weight: 600;
	text-decoration: line-through;
}

.hsv-afi-card-price-caption {
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.65em );
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hsv-afi-card-save-box {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	padding: 0.35em 0.7em;
	background: rgba( 214, 54, 56, 0.16 );
	border-radius: var( --hsv-afi-radius-sm );
	line-height: 1.2;
	text-align: right;
}

.hsv-afi-card-save-box span {
	color: #f08787;
	font-size: max( 0.75rem, 0.6em );
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hsv-afi-card-save-box strong {
	color: #f3a3a3;
	font-family: var( --hsv-afi-font-display );
	font-size: 1.05em;
	font-weight: 800;
}

.hsv-afi-card-cta-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	padding: 0.6em 1.1em;
	background: var( --hsv-afi-color-accent );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-accent-contrast );
	font-size: 0.88em;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.05s ease;
}

.hsv-afi-card-cta:hover,
.hsv-afi-card-cta:focus {
	background: var( --hsv-afi-color-accent-hover );
	color: var( --hsv-afi-color-accent-contrast );
}

.hsv-afi-card-cta:active {
	transform: translateY( 1px );
}

.hsv-afi-card-text-btn {
	display: grid;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hsv-afi-card-text-btn:hover,
.hsv-afi-card-text-btn:focus {
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-card-text-btn .hsv-afi-icon {
	width: 1.15em;
	height: 1.15em;
}

.hsv-afi-card-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var( --hsv-afi-space-3 );
	padding-top: var( --hsv-afi-space-1 );
	font-size: max( 0.75rem, 0.78em );
}

.hsv-afi-card-stock {
	flex: 0 0 auto;
	padding: 0.25em 0.6em;
	background: var( --hsv-afi-color-surface-muted );
	border-radius: var( --hsv-afi-radius-sm );
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.7em );
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hsv-afi-card-compare {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.7em;
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-pill );
	color: var( --hsv-afi-color-text-muted );
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hsv-afi-card-compare:hover {
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-card-compare:has( input:checked ) {
	background: var( --hsv-afi-color-accent-soft );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-card-compare input {
	margin: 0;
	accent-color: var( --hsv-afi-color-accent );
}

.hsv-afi-no-results {
	padding: var( --hsv-afi-space-6 ) var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-surface-muted );
	border: 1px dashed var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius-lg );
	color: var( --hsv-afi-color-text-muted );
	font-weight: 600;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.hsv-afi-pagination,
.hsv-afi-archive .navigation.pagination {
	margin: var( --hsv-afi-space-6 ) 0 0;
}

.hsv-afi-pagination ul.page-numbers,
.hsv-afi-archive .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --hsv-afi-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsv-afi-pagination .page-numbers,
.hsv-afi-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	min-height: 2.6em;
	padding: 0.5em 0.9em;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hsv-afi-pagination a.page-numbers:hover,
.hsv-afi-pagination a.page-numbers:focus,
.hsv-afi-archive a.page-numbers:hover,
.hsv-afi-archive a.page-numbers:focus {
	background: var( --hsv-afi-color-accent-soft );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-pagination .page-numbers.current,
.hsv-afi-archive .page-numbers.current {
	background: var( --hsv-afi-color-accent );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent-contrast );
}

.hsv-afi-pagination .page-numbers.dots,
.hsv-afi-archive .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var( --hsv-afi-color-text-muted );
}

/* ------------------------------------------------------------------ */
/* Single vehicle page                                                 */
/* ------------------------------------------------------------------ */

.hsv-afi-single {
	max-width: var( --hsv-afi-single-max-width );
	margin: 0 auto;
	padding: 0 clamp( 1rem, 3vw, 2rem ) var( --hsv-afi-space-7 );
}

.hsv-afi-breadcrumbs {
	margin: 0 0 var( --hsv-afi-space-4 );
}

.hsv-afi-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --hsv-afi-color-text-muted );
	font-size: 0.85em;
}

.hsv-afi-breadcrumbs li {
	display: flex;
	align-items: center;
	min-width: 0;
}

.hsv-afi-breadcrumbs li:not( :last-child )::after {
	content: "›";
	margin: 0 0.6em;
	color: var( --hsv-afi-color-border-strong );
}

.hsv-afi-breadcrumbs a {
	display: inline-block;
	padding-block: 0.4em;
	color: var( --hsv-afi-color-text-muted );
	text-decoration: none;
}

.hsv-afi-breadcrumbs a:hover,
.hsv-afi-breadcrumbs a:focus {
	color: var( --hsv-afi-color-accent );
	text-decoration: underline;
}

.hsv-afi-breadcrumbs li[aria-current="page"] {
	overflow: hidden;
	color: var( --hsv-afi-color-text );
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hsv-afi-single-header {
	margin-bottom: var( --hsv-afi-space-5 );
}

.hsv-afi-single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var( --hsv-afi-space-2 );
	margin-bottom: var( --hsv-afi-space-3 );
}

.hsv-afi-single-badges .hsv-afi-badge {
	box-shadow: none;
}

.hsv-afi-single-title {
	margin: 0 0 var( --hsv-afi-space-2 );
	font-size: clamp( 1.6rem, 3.2vw, 2.3rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hsv-afi-single-subtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --hsv-afi-space-2 ) var( --hsv-afi-space-4 );
	margin: 0;
	color: var( --hsv-afi-color-text-muted );
	font-size: 1em;
	font-weight: 500;
}

.hsv-afi-single-stock {
	padding: 0.15em 0.65em;
	background: var( --hsv-afi-color-surface-muted );
	border-radius: var( --hsv-afi-radius-sm );
	color: var( --hsv-afi-color-text-faint );
	font-size: max( 0.75rem, 0.82em );
	font-weight: 600;
}

/* Two-column layout: main content + sticky side card. */
.hsv-afi-single-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 20em, 24em );
	align-items: start;
	gap: var( --hsv-afi-space-6 );
}

.hsv-afi-single-main {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-5 );
	min-width: 0;
}

.hsv-afi-single-side {
	min-width: 0;
}

@media ( min-width: 961px ) {
	.hsv-afi-single-side {
		position: sticky;
		top: var( --hsv-afi-space-5 );
	}
}

/* Reusable content panel. */
.hsv-afi-panel {
	padding: var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-sm );
}

.hsv-afi-panel-title {
	margin: 0 0 var( --hsv-afi-space-4 );
	font-size: 1.15em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Gallery. */
.hsv-afi-gallery {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-3 );
}

.hsv-afi-gallery-main {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var( --hsv-afi-color-surface-sunken );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-sm );
}

.hsv-afi-gallery-open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}

.hsv-afi-gallery-main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hsv-afi-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	background: rgba( 255, 255, 255, 0.92 );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: 50%;
	box-shadow: var( --hsv-afi-shadow );
	/* Same fixed-light-overlay reasoning as .hsv-afi-card-save above. */
	color: #171b21;
	cursor: pointer;
	transform: translateY( -50% );
	transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.hsv-afi-gallery-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7em;
	height: 0.7em;
	border-top: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
	transform: translate( -30%, -50% ) rotate( 45deg );
}

.hsv-afi-gallery-nav--prev {
	left: var( --hsv-afi-space-3 );
}

.hsv-afi-gallery-nav--prev::before {
	transform: translate( -70%, -50% ) rotate( -135deg );
}

.hsv-afi-gallery-nav--next {
	right: var( --hsv-afi-space-3 );
}

.hsv-afi-gallery-nav:hover {
	background: #fff;
	transform: translateY( -50% ) scale( 1.06 );
}

.hsv-afi-gallery-count {
	position: absolute;
	z-index: 2;
	left: var( --hsv-afi-space-3 );
	bottom: var( --hsv-afi-space-3 );
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.35em 0.75em;
	background: rgba( 23, 27, 33, 0.72 );
	border-radius: var( --hsv-afi-radius-pill );
	color: #fff;
	font-size: max( 0.75rem, 0.8em );
	font-weight: 700;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

.hsv-afi-gallery-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --hsv-afi-space-3 );
	aspect-ratio: 4 / 3;
	padding: var( --hsv-afi-space-5 );
	background: linear-gradient( 155deg, var( --hsv-afi-color-surface-muted ), var( --hsv-afi-color-surface-sunken ) );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
}

.hsv-afi-gallery-placeholder-img {
	width: min( 60%, 26em );
	height: auto;
}

.hsv-afi-gallery-placeholder-text {
	margin: 0;
	color: var( --hsv-afi-color-text-muted );
	font-weight: 600;
	text-align: center;
}

.hsv-afi-gallery-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 6.4em;
	gap: var( --hsv-afi-space-2 );
	overflow-x: auto;
	padding-bottom: var( --hsv-afi-space-1 );
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.hsv-afi-gallery-thumb {
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	background: var( --hsv-afi-color-surface-sunken );
	border: 2px solid transparent;
	border-radius: var( --hsv-afi-radius-sm );
	cursor: pointer;
	opacity: 0.7;
	scroll-snap-align: start;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.hsv-afi-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hsv-afi-gallery-thumb:hover,
.hsv-afi-gallery-thumb.is-active {
	opacity: 1;
}

.hsv-afi-gallery-thumb.is-active {
	border-color: var( --hsv-afi-color-accent );
}

/* Lightbox. */
.hsv-afi-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --hsv-afi-space-5 );
}

.hsv-afi-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 12, 15, 20, 0.94 );
}

.hsv-afi-lightbox-figure {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.hsv-afi-lightbox-img {
	display: block;
	max-width: min( 92vw, 90em );
	max-height: 82vh;
	object-fit: contain;
	border-radius: var( --hsv-afi-radius );
	box-shadow: var( --hsv-afi-shadow-lg );
}

.hsv-afi-lightbox-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --hsv-afi-space-2 ) var( --hsv-afi-space-4 );
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.9em;
}

.hsv-afi-lightbox-title {
	font-weight: 700;
}

.hsv-afi-lightbox-count {
	padding: 0.2em 0.7em;
	background: rgba( 255, 255, 255, 0.12 );
	border-radius: var( --hsv-afi-radius-pill );
	font-weight: 600;
}

.hsv-afi-lightbox-close {
	position: absolute;
	top: var( --hsv-afi-space-4 );
	right: var( --hsv-afi-space-4 );
	z-index: 2;
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 50%;
	color: #fff;
	font-size: 1.4em;
	line-height: 1;
	cursor: pointer;
}

.hsv-afi-lightbox-close:hover {
	background: rgba( 255, 255, 255, 0.25 );
}

.hsv-afi-lightbox-nav {
	background: rgba( 255, 255, 255, 0.14 );
	border-color: rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

.hsv-afi-lightbox-nav:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

.hsv-afi-lightbox .hsv-afi-gallery-nav--prev {
	left: var( --hsv-afi-space-5 );
}

.hsv-afi-lightbox .hsv-afi-gallery-nav--next {
	right: var( --hsv-afi-space-5 );
}

body.hsv-afi-lightbox-open {
	overflow: hidden;
}

/* Key features grid. */
.hsv-afi-key-features-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 11em, 1fr ) );
	gap: var( --hsv-afi-space-3 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsv-afi-key-feature {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	min-width: 0;
	padding: var( --hsv-afi-space-3 );
	background: var( --hsv-afi-color-surface-muted );
	border-radius: var( --hsv-afi-radius );
}

/* Tinted disc behind an icon. A separate wrapper (not a background on the
   icon itself) because the icon's CSS mask would clip its own background. */
.hsv-afi-icon-disc {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	background: var( --hsv-afi-color-accent-soft );
	border-radius: 50%;
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-icon-disc .hsv-afi-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
}

.hsv-afi-key-feature-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.hsv-afi-key-feature-label {
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hsv-afi-key-feature-value {
	color: var( --hsv-afi-color-text );
	font-size: 0.98em;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Description with read-more. */
.hsv-afi-single-content {
	line-height: 1.75;
}

.hsv-afi-single-content > :first-child {
	margin-top: 0;
}

.hsv-afi-single-content > :last-child {
	margin-bottom: 0;
}

.hsv-afi-description.is-collapsible .hsv-afi-single-content {
	position: relative;
	max-height: 18em;
	overflow: hidden;
}

.hsv-afi-description.is-collapsible .hsv-afi-single-content::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 6em;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --hsv-afi-color-surface ) );
	pointer-events: none;
}

.hsv-afi-description.is-collapsible.is-expanded .hsv-afi-single-content {
	max-height: none;
}

.hsv-afi-description.is-collapsible.is-expanded .hsv-afi-single-content::after {
	display: none;
}

.hsv-afi-readmore-btn {
	margin-top: var( --hsv-afi-space-3 );
	padding: 0.55em 1em;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-accent );
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
}

.hsv-afi-readmore-btn:hover {
	border-color: var( --hsv-afi-color-accent );
	background: var( --hsv-afi-color-accent-soft );
}

/* Equipment chips. */
.hsv-afi-equipment-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15em, 1fr ) );
	gap: var( --hsv-afi-space-3 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsv-afi-equipment-list li {
	display: flex;
	align-items: flex-start;
	gap: var( --hsv-afi-space-3 );
	padding: var( --hsv-afi-space-3 ) var( --hsv-afi-space-4 );
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius );
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1.4;
}

.hsv-afi-equipment-check {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	margin-top: 0.1em;
	background: var( --hsv-afi-color-accent-soft );
	border-radius: 50%;
}

.hsv-afi-equipment-check::before {
	content: "";
	width: 0.5em;
	height: 0.28em;
	margin-top: -0.1em;
	border-left: 2px solid var( --hsv-afi-color-accent );
	border-bottom: 2px solid var( --hsv-afi-color-accent );
	transform: rotate( -45deg );
}

/* An unusually long feature phrase is truncated with an ellipsis rather
   than dropped from the page (the full text is still on the li's title
   attribute); the label is a nested span so only the text - never the
   checkmark - is clipped. Capped with a viewport-relative unit (not a
   percentage) deliberately: this panel sits inside a `display: contents`
   ancestor on the single-vehicle page's mobile layout (see the 960px
   media query), where percentage widths would resolve against a flex
   ancestor's min-content size instead of the actual viewport - a
   white-space:nowrap span's min-content equals its full unwrapped text
   width, so a percentage cap would never actually constrain it and the
   whole page would overflow horizontally. vw sidesteps that chain
   entirely by measuring the viewport directly. */
.hsv-afi-equipment-list li span:not( .hsv-afi-equipment-check ) {
	overflow: hidden;
	max-width: min( 22em, 60vw );
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Specification table. */
.hsv-afi-single-specs-title {
	margin-bottom: var( --hsv-afi-space-4 );
}

.hsv-afi-spec-table {
	width: 100%;
	overflow: hidden;
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius );
	border-collapse: separate;
	border-spacing: 0;
}

.hsv-afi-spec-table th,
.hsv-afi-spec-table td {
	padding: 0.8em var( --hsv-afi-space-4 );
	border-bottom: 1px solid var( --hsv-afi-color-border );
	text-align: left;
	vertical-align: top;
	font-size: 0.93em;
}

.hsv-afi-spec-table tbody tr:nth-child( even ):not( .hsv-afi-spec-group-row ) {
	background: var( --hsv-afi-color-surface-muted );
}

.hsv-afi-spec-table tbody tr:last-child th,
.hsv-afi-spec-table tbody tr:last-child td {
	border-bottom: 0;
}

.hsv-afi-spec-table th[scope="row"] {
	width: 38%;
	color: var( --hsv-afi-color-text-muted );
	font-weight: 600;
}

.hsv-afi-spec-table td {
	color: var( --hsv-afi-color-text );
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hsv-afi-spec-table td a {
	color: var( --hsv-afi-color-accent );
}

.hsv-afi-spec-table .hsv-afi-spec-group-row th {
	background: var( --hsv-afi-color-accent-soft );
	color: var( --hsv-afi-color-accent );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Price card (side column): a dark "showroom" panel - deliberately the
   one high-contrast surface on an otherwise light page, so it reads as
   the page's single most important decision point. */
.hsv-afi-price-card {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-4 );
	padding: var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-navy );
	border-radius: var( --hsv-afi-radius-lg );
	color: #fff;
	box-shadow: 0 24px 70px rgba( 5, 26, 44, 0.22 );
}

.hsv-afi-price-card-price {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --hsv-afi-space-3 );
}

.hsv-afi-single-price {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1.1;
}

.hsv-afi-single-price-now {
	order: 2;
	color: #fff;
	font-family: var( --hsv-afi-font-display );
	font-size: 2.6em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.hsv-afi-single-price-now--poa {
	font-size: 1.5em;
}

.hsv-afi-single-price-was {
	order: 1;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: line-through;
}

.hsv-afi-single-price-caption {
	order: 3;
	margin: 0.2em 0 0;
	color: rgba( 255, 255, 255, 0.54 );
	font-size: max( 0.75rem, 0.68em );
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hsv-afi-single-price-saving {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	padding: 0.5em 0.8em;
	background: var( --hsv-afi-color-badge-sale-bg );
	border-radius: var( --hsv-afi-radius-sm );
	color: var( --hsv-afi-color-badge-sale-text );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.hsv-afi-price-card-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: var( --hsv-afi-radius-sm );
	list-style: none;
}

.hsv-afi-price-card-facts li {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
	padding: 0.7em 0.8em;
	background: rgba( 255, 255, 255, 0.05 );
	font-size: 0.85em;
	font-weight: 700;
}

.hsv-afi-price-card-fact-label {
	overflow: hidden;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: max( 0.75rem, 0.72em );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.hsv-afi-price-card-actions {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-price-card-actions .hsv-afi-btn {
	width: 100%;
	font-size: 1em;
}

.hsv-afi-price-card-actions-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-price-card-actions-row .hsv-afi-btn {
	width: 100%;
	font-size: 0.92em;
}

.hsv-afi-trust {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-2 );
	margin: 0;
	padding: var( --hsv-afi-space-3 ) 0 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	list-style: none;
}

.hsv-afi-trust li {
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 0.88em;
	font-weight: 600;
}

.hsv-afi-trust .hsv-afi-icon {
	width: 1.25em;
	height: 1.25em;
	color: #34d399;
}

.hsv-afi-dealer-location {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	color: rgba( 255, 255, 255, 0.56 );
	font-size: 0.85em;
	font-weight: 600;
}

.hsv-afi-dealer-location .hsv-afi-icon {
	width: 1.1em;
	height: 1.1em;
	color: var( --hsv-afi-color-sky );
}

/* Mobile call/text/enquire bar (shown only on small screens, see media query). */
.hsv-afi-mobile-cta {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Enquiry form                                                        */
/* ------------------------------------------------------------------ */

.hsv-afi-inquiry-anchor {
	scroll-margin-top: var( --hsv-afi-space-6 );
}

.hsv-afi-inquiry {
	max-width: 44em;
	margin-top: var( --hsv-afi-space-6 );
	padding: var( --hsv-afi-space-6 );
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-sm );
}

.hsv-afi-inquiry-title {
	margin: 0 0 var( --hsv-afi-space-4 );
	font-size: 1.35em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hsv-afi-inquiry-notice {
	margin: 0 0 var( --hsv-afi-space-4 );
	padding: var( --hsv-afi-space-3 ) var( --hsv-afi-space-4 );
	border-radius: var( --hsv-afi-radius );
	font-weight: 600;
}

.hsv-afi-inquiry-notice-success {
	background: rgba( 52, 180, 118, 0.16 );
	color: #6fe0ab;
}

.hsv-afi-inquiry-notice-error {
	background: rgba( 214, 54, 56, 0.16 );
	color: #f08787;
}

.hsv-afi-inquiry-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --hsv-afi-space-4 );
}

/* Name and email share the first row; phone, message, captcha and the button
   span the full width. (Explicit class rather than nth-of-type: the hidden
   honeypot div is also a div, which used to push the email onto its own row.) */
.hsv-afi-inquiry-form > .hsv-afi-inquiry-field--wide,
.hsv-afi-inquiry-form > .h-captcha,
.hsv-afi-inquiry-form > .hsv-afi-inquiry-submit {
	grid-column: 1 / -1;
}

/* Honeypot: hidden from sighted and keyboard users alike, but still in the
   normal tab/DOM flow enough that unsophisticated bots fill it in. */
.hsv-afi-inquiry-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hsv-afi-inquiry-field {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-2 );
}

.hsv-afi-inquiry-field label {
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.78em );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hsv-afi-inquiry-field input,
.hsv-afi-inquiry-field textarea {
	width: 100%;
	min-height: 2.9em;
	padding: 0.7em 0.85em;
	background: var( --hsv-afi-color-surface );
	border: 1px solid var( --hsv-afi-color-border-strong );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-text );
	font-family: inherit;
	font-size: 0.98em;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hsv-afi-inquiry-field input:focus,
.hsv-afi-inquiry-field textarea:focus {
	border-color: var( --hsv-afi-color-accent );
	box-shadow: 0 0 0 3px var( --hsv-afi-color-accent-soft );
	outline: none;
}

.hsv-afi-inquiry-submit {
	justify-self: start;
	min-height: 3em;
	padding: 0.8em 1.8em;
	background: var( --hsv-afi-color-accent );
	border: 1px solid var( --hsv-afi-color-accent );
	border-radius: var( --hsv-afi-radius );
	color: var( --hsv-afi-color-accent-contrast );
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hsv-afi-inquiry-submit:hover,
.hsv-afi-inquiry-submit:focus {
	background: var( --hsv-afi-color-accent-hover );
}

/* ------------------------------------------------------------------ */
/* NSW disclosure block                                                 */
/* ------------------------------------------------------------------ */

.hsv-afi-disclosure {
	padding: var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-surface-muted );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: var( --hsv-afi-radius-lg );
}

.hsv-afi-disclosure-title {
	margin: 0 0 var( --hsv-afi-space-4 );
	font-size: 1.05em;
	font-weight: 800;
}

.hsv-afi-disclosure-list {
	display: grid;
	gap: var( --hsv-afi-space-2 ) var( --hsv-afi-space-5 );
	margin: 0;
}

.hsv-afi-disclosure-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --hsv-afi-space-2 );
	padding-bottom: var( --hsv-afi-space-2 );
	border-bottom: 1px solid var( --hsv-afi-color-border );
	font-size: 0.92em;
}

.hsv-afi-disclosure-row dt {
	color: var( --hsv-afi-color-text-muted );
	font-weight: 600;
}

.hsv-afi-disclosure-row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.hsv-afi-disclosure-note {
	margin: var( --hsv-afi-space-4 ) 0 0;
	color: var( --hsv-afi-color-text-muted );
	font-size: max( 0.75rem, 0.8em );
}

/* ------------------------------------------------------------------ */
/* Similar Vehicles / Recently Viewed strips                            */
/* ------------------------------------------------------------------ */

.hsv-afi-similar-vehicles,
.hsv-afi-recently-viewed {
	margin-top: var( --hsv-afi-space-7 );
}

.hsv-afi-similar-vehicles-title,
.hsv-afi-recently-viewed-title {
	margin: 0 0 var( --hsv-afi-space-4 );
	font-size: 1.35em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Compare bar + modal                                                  */
/* ------------------------------------------------------------------ */

.hsv-afi-compare-bar {
	position: fixed;
	left: 50%;
	bottom: var( --hsv-afi-space-5 );
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var( --hsv-afi-space-3 );
	padding: var( --hsv-afi-space-3 ) var( --hsv-afi-space-3 ) var( --hsv-afi-space-3 ) var( --hsv-afi-space-5 );
	/* Deliberately always the brand navy, not --hsv-afi-color-text - this
	   floating bar needs to stay dark (for its hardcoded white text/icons)
	   regardless of whether the surrounding theme is light or dark. */
	background: var( --hsv-afi-color-navy );
	border-radius: var( --hsv-afi-radius-pill );
	box-shadow: var( --hsv-afi-shadow-lg );
	color: #fff;
	transform: translateX( -50% );
}

.hsv-afi-compare-bar-count {
	font-weight: 700;
	white-space: nowrap;
}

.hsv-afi-compare-bar .button {
	min-height: 2.4em;
	padding: 0.45em 1.1em;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: var( --hsv-afi-radius-pill );
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.hsv-afi-compare-bar .button-primary {
	background: var( --hsv-afi-color-accent );
	border-color: var( --hsv-afi-color-accent );
	color: var( --hsv-afi-color-accent-contrast );
}

.hsv-afi-compare-bar-view:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hsv-afi-compare-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --hsv-afi-space-5 );
}

.hsv-afi-compare-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 20, 24, 30, 0.6 );
}

.hsv-afi-compare-modal-dialog {
	position: relative;
	max-width: 90vw;
	max-height: 85vh;
	overflow: auto;
	padding: var( --hsv-afi-space-6 ) var( --hsv-afi-space-5 ) var( --hsv-afi-space-5 );
	background: var( --hsv-afi-color-surface );
	border-radius: var( --hsv-afi-radius-lg );
	box-shadow: var( --hsv-afi-shadow-lg );
}

.hsv-afi-compare-modal-close {
	position: absolute;
	top: var( --hsv-afi-space-3 );
	right: var( --hsv-afi-space-3 );
	width: 2.2em;
	height: 2.2em;
	background: var( --hsv-afi-color-surface-muted );
	border: 1px solid var( --hsv-afi-color-border );
	border-radius: 50%;
	color: var( --hsv-afi-color-text );
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}

.hsv-afi-compare-table-wrap {
	overflow-x: auto;
}

.hsv-afi-compare-table {
	border-collapse: collapse;
	width: 100%;
}

.hsv-afi-compare-table th,
.hsv-afi-compare-table td {
	padding: var( --hsv-afi-space-3 );
	border-bottom: 1px solid var( --hsv-afi-color-border );
	text-align: left;
	white-space: nowrap;
}

.hsv-afi-compare-table thead th {
	min-width: 12em;
	background: var( --hsv-afi-color-surface-muted );
	vertical-align: bottom;
}

.hsv-afi-compare-vehicle {
	display: flex;
	flex-direction: column;
	gap: var( --hsv-afi-space-2 );
	color: var( --hsv-afi-color-text );
	font-weight: 700;
	text-decoration: none;
	white-space: normal;
}

.hsv-afi-compare-vehicle:hover span {
	color: var( --hsv-afi-color-accent );
	text-decoration: underline;
}

.hsv-afi-compare-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var( --hsv-afi-color-surface-sunken );
	border-radius: var( --hsv-afi-radius-sm );
}

.hsv-afi-compare-table tbody th[scope="row"] {
	color: var( --hsv-afi-color-text-muted );
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media ( max-width: 960px ) {
	.hsv-afi-single-layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* On one column, put the gallery first, then the price card, then the rest. */
	/* The base layout sets align-items: start for the two-column grid. In a
	   column flexbox that makes every child shrink-to-fit its widest
	   content instead of filling the width, so a 32-photo thumbnail strip
	   stretched the gallery to ~5,000px and blew the page wide on phones.
	   stretch (with min-width: 0 so nothing can push past it) restores the
	   normal one-column behaviour. */
	.hsv-afi-single-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.hsv-afi-single-main {
		display: contents;
	}

	.hsv-afi-single-main > * {
		order: 1;
		min-width: 0;
	}

	.hsv-afi-single-main > .hsv-afi-gallery {
		order: -1;
	}

	.hsv-afi-single-side {
		order: 0;
	}

	.hsv-afi-mobile-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		grid-template-columns: repeat( var( --hsv-afi-mobile-cta-count, 3 ), 1fr );
		background: rgba( 10, 16, 23, 0.94 );
		border-top: 1px solid var( --hsv-afi-color-border );
		box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.35 );
		-webkit-backdrop-filter: blur( 8px );
		backdrop-filter: blur( 8px );
		transition: transform 0.25s ease;
		padding-bottom: env( safe-area-inset-bottom, 0px );
	}

	.hsv-afi-mobile-cta.is-hidden {
		transform: translateY( 110% );
	}

	.hsv-afi-mobile-cta .hsv-afi-btn {
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.hsv-afi-mobile-cta .hsv-afi-btn--ghost-dark {
		background: transparent;
		color: var( --hsv-afi-color-text );
	}

	.hsv-afi-mobile-cta .hsv-afi-btn--ghost-dark:not( :last-child ) {
		border-right: 1px solid var( --hsv-afi-color-border );
	}

	.hsv-afi-mobile-cta .hsv-afi-btn--gold {
		border-radius: 0;
	}

	.hsv-afi-single {
		padding-bottom: calc( var( --hsv-afi-space-7 ) + 4.5em );
	}

	/* Scoped to the single-vehicle page: this clearance exists only to sit
	   above the mobile CTA bar that this same media query adds there - the
	   listing/archive page has no such bar, so this must never apply there.
	   Also grows with the device's bottom safe-area inset, matching the CTA
	   bar's own padding-bottom above, so the two floating bars can't
	   encroach on each other on a notched phone. The compare bar is printed
	   from wp_footer, outside .hsv-afi-single, so the selector hangs off the
	   body class WordPress adds to a single vehicle page (the old
	   ".hsv-afi-single .hsv-afi-compare-bar" could never match). */
	body.single-hsv_vehicle .hsv-afi-compare-bar {
		bottom: calc( 5.25em + env( safe-area-inset-bottom, 0px ) );
	}
}

/* Listing: stack the sidebar into a slide-in drawer once the viewport gets narrow. */
@media ( max-width: 860px ) {
	.hsv-afi-filter-form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hsv-afi-has-js .hsv-afi-filter-toggle:not( [hidden] ) {
		display: inline-flex;
	}

	.hsv-afi-has-js .hsv-afi-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1150;
		width: min( 88vw, 24em );
		max-height: none;
		overflow-y: auto;
		border-radius: 0;
		box-shadow: var( --hsv-afi-shadow-lg );
		transform: translateX( -105% );
		transition: transform 0.25s ease;
	}

	.hsv-afi-has-js .hsv-afi-sidebar.is-open {
		transform: translateX( 0 );
	}

	.hsv-afi-has-js .hsv-afi-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.hsv-afi-sidebar-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1140;
		background: rgba( 20, 24, 30, 0.55 );
	}

	body.hsv-afi-drawer-open {
		overflow: hidden;
	}

	.hsv-afi-results-bar-main {
		align-items: center;
	}

	.hsv-afi-sort label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}
}

@media ( max-width: 480px ) {
	.hsv-afi-card-grid,
	.hsv-afi-card-grid--cols {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hsv-afi-single-price-now {
		font-size: 1.85em;
	}

	.hsv-afi-spec-table th[scope="row"] {
		width: 45%;
	}

	.hsv-afi-disclosure-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.hsv-afi-disclosure-row dd {
		text-align: left;
	}

	.hsv-afi-inquiry {
		padding: var( --hsv-afi-space-5 );
	}

	.hsv-afi-inquiry-form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hsv-afi-inquiry-submit {
		justify-self: stretch;
	}

	.hsv-afi-compare-bar {
		left: var( --hsv-afi-space-4 );
		right: var( --hsv-afi-space-4 );
		flex-wrap: wrap;
		justify-content: center;
		border-radius: var( --hsv-afi-radius-lg );
		transform: none;
	}

	.hsv-afi-lightbox {
		padding: var( --hsv-afi-space-3 );
	}

	.hsv-afi-lightbox .hsv-afi-gallery-nav--prev {
		left: var( --hsv-afi-space-2 );
	}

	.hsv-afi-lightbox .hsv-afi-gallery-nav--next {
		right: var( --hsv-afi-space-2 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hsv-afi-inventory *,
	.hsv-afi-archive *,
	.hsv-afi-single *,
	.hsv-afi-compare-bar,
	.hsv-afi-compare-modal * {
		transition: none !important;
		animation: none !important;
	}

	.hsv-afi-card:hover,
	.hsv-afi-card:focus-within {
		transform: none;
	}
}