/* =========================================================================
   inventory.css — Listing + PDP styles
   =========================================================================
   Loaded only on /for-sale/rvs/ (archive) and /inventory/{slug-id}/ (PDP).
   Built on top of the parent's design tokens — no new colors, fonts, or
   spacing primitives invented here. If you find yourself reaching for a
   raw hex code, add it to tokens.css instead.

   v1.2.0 — listing rebuild prefixes new selectors with `.dealer-fule-`
   to avoid collisions with the plugin Frontend/Router which still claims
   /inventory/. Existing `.unit-card`, `.unit-grid`, `.filter-sidebar`,
   `.sort-bar`, `.pagination` selectors below are kept for the PDP and
   any third-party templates still consuming them — the new listing only
   uses `.dealer-fule-*` classes plus `.unit-card` / `.unit-grid`.
   ========================================================================= */

/* =========================================================================
   v1.2.0 LISTING — prefixed `.dealer-fule-*` (sidebar + grid + modal)
   ========================================================================= */

.dealer-fule-listing-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* Listing header (in-main-column, replaces v1.1.0 .dealer-fule-seo-hero) -- */
.dealer-fule-listing__h1 {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-snug);
	margin: var(--space-sm) 0 var(--space-2xs);
	color: var(--color-text);
}

/* Intro keeps the v1.1.0 .dealer-fule-seo-hero__intro classnames so the
 * listing.js read-more toggle keeps working without a JS edit. */
.dealer-fule-seo-hero__intro {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text);
	position: relative;
}
.dealer-fule-seo-hero__intro p { margin-block: 0 var(--space-2xs); }

.dealer-fule-seo-hero__intro.is-collapsed .dealer-fule-seo-hero__intro-body {
	max-height: 6.6em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.dealer-fule-seo-hero__more {
	background: none;
	border: 0;
	padding: 0;
	margin-top: var(--space-2xs);
	color: var(--color-accent);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}
.dealer-fule-seo-hero__more:hover { color: var(--color-accent-dark); }

/* Active filter pills ------------------------------------------------------ */
.dealer-fule-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) 0 var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-sm);
}

.dealer-fule-active-filters__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-weight: var(--fw-semibold);
	margin-right: var(--space-2xs);
}

.dealer-fule-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: var(--space-3xs) var(--space-2xs);
	background: var(--color-surface-card);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out);
}
.dealer-fule-filter-pill:hover {
	background: var(--color-surface-tint);
	border-color: var(--color-accent);
	color: var(--color-text);
}
.dealer-fule-filter-pill__x {
	color: var(--color-text-muted);
	font-weight: var(--fw-bold);
	line-height: 1;
}
.dealer-fule-filter-pill:hover .dealer-fule-filter-pill__x { color: var(--color-accent); }
.dealer-fule-filter-pill--reset {
	background: transparent;
	border-color: transparent;
	color: var(--color-text-muted);
	text-decoration: underline;
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}
.dealer-fule-filter-pill--reset:hover {
	color: var(--color-accent);
	background: transparent;
	border-color: transparent;
}

/* Layout ------------------------------------------------------------------- */
.dealer-fule-listing {
	padding-block: var(--space-md) var(--space-2xl);
}

.dealer-fule-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: start;
}

.dealer-fule-main {
	min-width: 0;
}

.dealer-fule-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

@media (max-width: 1180px) {
	.dealer-fule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.dealer-fule-grid { grid-template-columns: 1fr; }
}

/* Sidebar ------------------------------------------------------------------ */
.dealer-fule-sidebar {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-xs);
	/* v1.2.2: position:sticky removed per dealer feedback — the sidebar
	 * now scrolls with the page like normal content. The grid parent
	 * (.dealer-fule-layout) keeps it column-aligned with the main column. */
}

.dealer-fule-sidebar__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}
.dealer-fule-sidebar__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	margin: 0;
}
.dealer-fule-sidebar__clear {
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-decoration: none;
}
.dealer-fule-sidebar__clear:hover { color: var(--color-accent); }

.dealer-fule-sidebar__submit {
	margin-top: var(--space-md);
	width: 100%;
}

/* Filter groups (shared by sidebar + modal) -------------------------------- */
.dealer-fule-filter-group {
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-2xs) var(--space-xs);
}
.dealer-fule-filter-group:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.dealer-fule-filter-group > summary {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text);
	cursor: pointer;
	padding-block: var(--space-2xs);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dealer-fule-filter-group > summary::-webkit-details-marker { display: none; }
.dealer-fule-filter-group > summary::after {
	content: "+";
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	transition: transform var(--duration-fast) var(--ease-out);
	font-size: var(--fs-base);
}
.dealer-fule-filter-group[open] > summary::after { content: "−"; }

.dealer-fule-filter-group__body {
	padding-top: var(--space-2xs);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}
.dealer-fule-filter-group__body--scroll {
	max-height: 240px;
	overflow-y: auto;
	padding-right: var(--space-3xs);
}

.dealer-fule-filter-option {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-sm);
	color: var(--color-text);
	cursor: pointer;
	user-select: none;
	padding-block: 2px;
}
.dealer-fule-filter-option:hover { color: var(--color-accent); }
.dealer-fule-filter-option input[type="checkbox"] {
	accent-color: var(--color-accent);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.dealer-fule-filter-option__label { flex: 1; }
.dealer-fule-filter-option__count {
	color: var(--color-text-subtle);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

/* Range inputs ------------------------------------------------------------- */
.dealer-fule-range {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xs);
}
.dealer-fule-range > label,
.dealer-fule-range__single {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}
.dealer-fule-input {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	padding: var(--space-2xs) var(--space-xs);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background: var(--color-surface);
	color: var(--color-text);
	width: 100%;
}
.dealer-fule-input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}

/* Chip selectors ----------------------------------------------------------- */
.dealer-fule-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
}
.dealer-fule-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--space-3xs) var(--space-2xs);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	color: var(--color-text);
	background: var(--color-surface-card);
	cursor: pointer;
	user-select: none;
	transition: background var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out),
	            color var(--duration-fast) var(--ease-out);
}
.dealer-fule-chip:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.dealer-fule-chip.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-on-accent);
}
.dealer-fule-chip.is-active small { color: var(--color-text-on-accent); opacity: 0.85; }
.dealer-fule-chip input[type="checkbox"] {
	position: absolute;
	left: -9999px;
	pointer-events: none;
	opacity: 0;
}
.dealer-fule-chip small {
	color: var(--color-text-subtle);
	font-size: var(--fs-2xs);
	font-variant-numeric: tabular-nums;
}

/* Buttons ------------------------------------------------------------------ */
.dealer-fule-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	padding: var(--space-2xs) var(--space-md);
	border-radius: var(--btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out),
	            color var(--duration-fast) var(--ease-out);
}
.dealer-fule-btn--primary {
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	border-color: var(--color-accent);
}
.dealer-fule-btn--primary:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-on-accent);
}
.dealer-fule-btn--outline {
	background: var(--color-surface-card);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}
.dealer-fule-btn--outline:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.dealer-fule-btn--ghost {
	background: transparent;
	color: var(--color-text-muted);
	border-color: transparent;
}
.dealer-fule-btn--ghost:hover {
	color: var(--color-accent);
}

/* Mobile toolbar — DEFAULT HIDDEN on desktop ------------------------------ */
.dealer-fule-mobile-toolbar {
	display: none;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-bottom: var(--space-sm);
}
.dealer-fule-mobile-toolbar__keyword { width: 100%; }
.dealer-fule-keyword-bar {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	padding: var(--input-padding-y) var(--input-padding-x);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background: var(--color-surface-card);
	color: var(--color-text);
}
.dealer-fule-mobile-toolbar__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dealer-fule-mobile-toolbar__filters {
	position: relative;
}
.dealer-fule-mobile-toolbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 0.4em;
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-pill);
	margin-left: var(--space-3xs);
	line-height: 1;
}
.dealer-fule-mobile-toolbar__sort-select { width: 100%; }

/* Bottom-sheet modal ------------------------------------------------------- */
.dealer-fule-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal-over-header);
	pointer-events: none;
}
.dealer-fule-modal[hidden] { display: none !important; }
.dealer-fule-modal.is-open { pointer-events: auto; }

.dealer-fule-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 26, 42, 0.45);
	opacity: 0;
	transition: opacity 200ms ease-out;
}
.dealer-fule-modal.is-open .dealer-fule-modal__backdrop { opacity: 1; }

.dealer-fule-modal__sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 92vh;
	background: var(--color-surface-card);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-xl);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dealer-fule-modal.is-open .dealer-fule-modal__sheet { transform: translateY(0); }

.dealer-fule-modal__header {
	position: relative;
	padding: var(--space-2xs) var(--space-md) var(--space-xs);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}
.dealer-fule-modal__grabber {
	display: block;
	width: 40px;
	height: 4px;
	background: var(--color-border-strong);
	border-radius: var(--radius-pill);
	margin: 0 auto var(--space-2xs);
}
.dealer-fule-modal__title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	margin: 0;
	text-align: center;
}
.dealer-fule-modal__close {
	position: absolute;
	right: var(--space-xs);
	top: var(--space-2xs);
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: var(--space-3xs) var(--space-2xs);
}
.dealer-fule-modal__close:hover { color: var(--color-accent); }

.dealer-fule-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	-webkit-overflow-scrolling: touch;
}

.dealer-fule-modal__footer {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-card);
	flex-shrink: 0;
}
.dealer-fule-modal__clear {
	white-space: nowrap;
}
/* "Show N Results" submit — blue text on the gold CTA. White-on-gold
 * (--color-text-on-accent on a dealer gold --color-accent) failed contrast.
 * Background stays gold; only the text color changes. Covers :hover so the
 * darker-gold hover state stays legible too. */
.dealer-fule-modal__submit,
.dealer-fule-modal__submit:hover {
	color: var(--color-brand);
}

body.dealer-fule-modal-open {
	overflow: hidden;
}

/* Long-form SEO content + class browse ------------------------------------ */
.dealer-fule-seo-content {
	padding-block: var(--space-xl) var(--space-2xl);
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
}
.dealer-fule-seo-content__h2 {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
	margin: 0 0 var(--space-md);
	color: var(--color-text);
}
.dealer-fule-seo-content__body {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text);
}
.dealer-fule-seo-content__body p { margin-block: 0 var(--space-sm); }
.dealer-fule-seo-content__body h2,
.dealer-fule-seo-content__body h3 {
	font-family: var(--font-display);
	margin-block: var(--space-lg) var(--space-2xs);
}
.dealer-fule-seo-content__body h3 { font-size: var(--fs-xl); }

.dealer-fule-class-browse {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.dealer-fule-class-browse__title {
	font-family: var(--font-body);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-sm);
}
.dealer-fule-class-browse__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}
.dealer-fule-class-browse__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-decoration: none;
}
.dealer-fule-class-browse__list a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.dealer-fule-class-browse__count {
	color: var(--color-text-subtle);
	font-size: var(--fs-xs);
}

/* Responsive — mobile-first override (per Part 23 guidance) ---------------- */
@media (max-width: 980px) {
	.dealer-fule-mobile-toolbar { display: flex; }
	.dealer-fule-sidebar        { display: none; }
	/* v1.5.0-phase2 renamed the sidebar wrapper to .filters; the mobile
	 * Refine button is the single entry point, so hide the inline panel. */
	.dealer-fule-listing .filters { display: none; }
	.dealer-fule-layout         { grid-template-columns: 1fr; }
	/* Hide the duplicate desktop sort dropdown on mobile — the mobile
	 * toolbar above the grid renders its own sort. The "Showing X–Y of Z"
	 * count in .dealer-fule-toolbar__count stays visible. */
	.dealer-fule-toolbar__sort { display: none; }
}

@media (min-width: 981px) {
	/* Modal is mobile-only — kill any open-state on desktop. */
	.dealer-fule-modal { display: none !important; }
}

/* =========================================================================
   v1.1.0 LEGACY LISTING + PDP (unchanged below)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout: filter sidebar + listing grid
   ------------------------------------------------------------------------- */
.inventory-archive {
	padding-block: var(--space-xl);
}

.inventory-archive__title {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-snug);
	margin-block: var(--space-md) var(--space-lg);
}

.inventory-archive__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: start;
}

@media (min-width: 920px) {
	.inventory-archive__layout {
		grid-template-columns: 280px 1fr;
		gap: var(--space-xl);
	}
}

.inventory-archive__main {
	min-width: 0; /* allow grid items to shrink so card grid wraps */
}

/* -------------------------------------------------------------------------
   Filter sidebar
   ------------------------------------------------------------------------- */
.filter-sidebar {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-xs);
	position: sticky;
	top: calc(var(--header-height) + var(--space-sm));
}

@media (max-width: 919px) {
	.filter-sidebar {
		position: static;
	}
}

.filter-sidebar__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

.filter-sidebar__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	margin: 0;
}

.filter-sidebar__clear {
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.filter-sidebar__clear:hover { color: var(--color-accent); }

.filter-group {
	border: none;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-xs) var(--space-sm);
}
.filter-group:last-of-type { border-bottom: none; padding-bottom: 0; }

.filter-group > summary {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text);
	cursor: pointer;
	padding-block: var(--space-2xs);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {
	content: "+";
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	transition: transform var(--duration-fast) var(--ease-out);
}
.filter-group[open] > summary::after { content: "−"; }

.filter-group__body {
	padding-top: var(--space-2xs);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.filter-group label {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-sm);
	color: var(--color-text);
	cursor: pointer;
}
.filter-group label:hover { color: var(--color-accent); }

.filter-group input[type="radio"],
.filter-group input[type="checkbox"] {
	accent-color: var(--color-brand);
}

.filter-range {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xs);
}
.filter-range input {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	padding: var(--space-2xs) var(--space-xs);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background: var(--color-surface);
	width: 100%;
}

.filter-sidebar__submit {
	margin-top: var(--space-md);
	width: 100%;
}

/* -------------------------------------------------------------------------
   Toolbar (filter chips + sort) — v1.2.2 replaces the v1.1.0 .sort-bar.
   Single-row flex: chips on the left, sort on the right. Result count
   lives in the sidebar header (.dealer-fule-sidebar__count).
   ------------------------------------------------------------------------- */
.dealer-fule-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-md);
}

/* Active-filter chips slot — drop the standalone border/margin the
 * .dealer-fule-active-filters block defines on its own; the toolbar owns
 * its bottom border now. */
.dealer-fule-toolbar > .dealer-fule-active-filters {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.dealer-fule-active-filters--empty { min-height: 0; }

.dealer-fule-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-sm);
	flex: 0 0 auto;
}
.dealer-fule-toolbar__sort select {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	padding: var(--space-2xs) var(--space-sm);
	border: var(--input-border);
	border-radius: var(--input-radius);
	background: var(--color-surface);
}

/* Sidebar result count — sits inline under the Filters / Clear all header.
 * Same typographic treatment as the old toolbar count for visual continuity. */
.dealer-fule-sidebar__count {
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}
.dealer-fule-sidebar__count strong {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------
   Unit card grid + card
   ------------------------------------------------------------------------- */
.unit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 600px) {
	.unit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.unit-grid { grid-template-columns: repeat(3, 1fr); }
}

.unit-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: transform var(--duration-base) var(--ease-spring),
	            box-shadow var(--duration-base) var(--ease-out);
	color: inherit;
	text-decoration: none;
}
.unit-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--card-shadow-hover);
	color: inherit;
}

.unit-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-tint);
	overflow: hidden;
}
.unit-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.unit-card__badge {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius-pill);
}
.unit-card__badge--featured { background: var(--color-gold); color: var(--color-brand); }
.unit-card__badge--sale     { background: var(--color-sale); color: var(--color-text-on-accent); }

.unit-card__body {
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	flex: 1;
}

.unit-card__class {
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.unit-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	font-weight: var(--fw-semibold);
	margin: 0;
	color: var(--color-text);
}

.unit-card__stock {
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
	font-family: var(--font-mono);
}

.unit-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3xs) var(--space-sm);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-block: var(--space-2xs);
}
.unit-card__specs strong {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

.unit-card__price {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-brand);
	margin-top: auto;
}
.unit-card__was {
	color: var(--color-text-subtle);
	text-decoration: line-through;
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	margin-left: var(--space-2xs);
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */
.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2xs);
	margin-top: var(--space-xl);
	flex-wrap: wrap;
}
.pagination a,
.pagination span {
	min-width: 2.5rem;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-decoration: none;
	text-align: center;
}
.pagination a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.pagination .current {
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	border-color: var(--color-brand);
}

/* -------------------------------------------------------------------------
   No results
   ------------------------------------------------------------------------- */
.no-results {
	text-align: center;
	padding: var(--space-2xl) var(--space-md);
	background: var(--color-surface-card);
	border-radius: var(--radius-lg);
	border: 1px dashed var(--color-border-strong);
}
.no-results h2 {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-sm);
}
.no-results p {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

/* -------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------- */
.breadcrumbs {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
}
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { opacity: 0.5; }
.breadcrumbs__current { color: var(--color-text); }

/* =========================================================================
   PDP — single unit (v1.6.0)
   =========================================================================
   The v1.5 .unit-pdp__hero / .gallery__main / .title-price* / .key-specs /
   .pdp-section / .specs-group / .specs-table / .lead-form / .floorplan-img
   / .video-embed / .print-share rule blocks (~330 lines) were removed in
   the Phase 3.4 cleanup pass — the v1.6 PDP template parts emit different
   class names (.pdp-hero / .info / .price-block / etc.) and the new styles
   live in assets/css/inventory-pdp.css.

   The .unit-pdp wrapper class is still emitted by single-inventory.php
   (article-level) but doesn't need styling here — inventory-pdp.css owns
   the .unit-pdp .container + section rules.
   ========================================================================= */

/* Listing-page print rules — keep only the selectors that still exist.
   PDP print styles intentionally not in inventory.css; will come back in
   inventory-pdp.css if dealers request a print-friendly PDP view. */
@media print {
	.filter-sidebar,
	.dealer-fule-toolbar,
	.pagination { display: none !important; }
}


/* =========================================================================
   v1.4.0 Filter intro hero — class/make filtered listing views
   ========================================================================= */
.fule-filter-intro {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 2fr;
	gap: var(--space-lg);
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--space-xl) var(--container-gutter);
	border-bottom: 1px solid var(--color-border);
}
.fule-filter-intro__media { margin: 0; }
.fule-filter-intro__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.fule-filter-intro__title {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-snug);
	margin: 0 0 var(--space-sm);
	color: var(--color-text);
}
.fule-filter-intro__description {
	color: var(--color-text-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	max-width: 70ch;
}
.fule-filter-intro__description p { margin-block: 0 var(--space-2xs); }
.fule-filter-intro__description p:last-child { margin-block-end: 0; }
@media (max-width: 768px) {
	.fule-filter-intro {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   v1.5.0-phase2 — LISTING UX REBUILD
   =========================================================================
   New visual system for the desktop sidebar + unit card. Lives alongside
   the v1.2.0 .dealer-fule-* selectors above (mobile modal still uses the
   older shape). Ported from blue-fox-rv-listing-v2.html with token names
   re-mapped onto the parent theme's existing dealer-fule tokens — no new
   raw colors invented. Scoped under .dealer-fule-listing so global page
   templates outside /for-sale/ won't pick up these rules.
   ========================================================================= */

.dealer-fule-listing {
	/* v2-mockup token aliases → dealer-fule tokens (single source of brand) */
	--navy:           var(--color-brand);
	--navy-deep:      var(--color-surface-dark);
	--navy-soft:      var(--color-brand-light);
	--cream:          var(--color-surface);
	--cream-deep:     var(--color-surface-alt);
	--paper:          var(--color-surface-card);
	--orange:         var(--color-accent);
	--orange-deep:    var(--color-accent-dark);
	--ink:            var(--color-text);
	--ink-soft:       var(--color-text-muted);
	--ink-mute:       var(--color-text-subtle);
	--rule:           var(--color-border);
	--rule-soft:      var(--color-surface-tint);
	--green:          var(--color-secondary);
	--used-bg:        #5b6573;
	--bar-active:     var(--color-brand);
	--bar-inactive:   var(--color-border-strong);
	--p2-shadow-card:    0 1px 2px rgba(10,35,66,.04), 0 8px 24px -12px rgba(10,35,66,.12);
	--p2-shadow-hover:   0 2px 4px rgba(10,35,66,.06), 0 16px 40px -12px rgba(10,35,66,.18);
	--p2-radius:         6px;
	--p2-radius-lg:      10px;
}

/* ---- Layout: re-apply the v2 grid via existing dealer-fule wrappers ---- */
.dealer-fule-listing .dealer-fule-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 1100px) {
	.dealer-fule-listing .dealer-fule-layout { grid-template-columns: 260px 1fr; }
}
@media (max-width: 800px) {
	.dealer-fule-listing .dealer-fule-layout { grid-template-columns: 1fr; }
}

/* ---- FILTER PANEL (replaces .dealer-fule-sidebar visual scope) ---- */
.dealer-fule-listing .filters {
	background: var(--color-surface-card);
	border-radius: var(--p2-radius-lg);
	border: 1px solid var(--rule);
	/* NOT sticky — scrolls with page (intentional reversal of v1.2.0 sticky) */
}
.dealer-fule-listing .filters-head {
	padding: 18px 18px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--rule-soft);
}
.dealer-fule-listing .filters-head h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--navy-deep);
	margin: 0;
}
.dealer-fule-listing .clear-all {
	font-size: 12px;
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	text-decoration: none;
}
.dealer-fule-listing .clear-all:hover { color: var(--navy); }

.dealer-fule-listing .filter-apply-top {
	margin: 14px 18px 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ededed;
	color: var(--navy-deep);
	padding: 11px 14px;
	border-radius: var(--p2-radius);
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s;
	width: calc(100% - 36px);
}
.dealer-fule-listing .filter-apply-top:hover { background: #dcdcdc; }
.dealer-fule-listing .filter-apply-top .pending {
	color: #f6b42e;
	font-size: 11px;
	font-weight: 700;
}

.dealer-fule-listing .filter-block {
	border-bottom: 1px solid var(--rule-soft);
	padding: 14px 18px;
}
.dealer-fule-listing .filter-block:last-of-type { border-bottom: none; }
.dealer-fule-listing .filter-block summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--navy-deep);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 0;
}
.dealer-fule-listing .filter-block summary::-webkit-details-marker { display: none; }
.dealer-fule-listing .filter-block summary::after {
	content: "+";
	font-size: 18px;
	color: var(--ink-mute);
	font-weight: 400;
}
.dealer-fule-listing .filter-block[open] summary::after { content: "−"; }

/* Static (non-collapsible) filter block — used by the Keyword search.
 * Mirrors .filter-block summary's small-uppercase label without the
 * +/− indicator or the cursor:pointer affordance. */
.dealer-fule-listing .filter-block--static .filter-block__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--navy-deep);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 0;
}

.dealer-fule-listing .filter-search {
	width: 100%;
	padding: 10px 12px;
	margin-top: 10px;
	border: 1px solid var(--rule);
	border-radius: var(--p2-radius);
	font: inherit;
	font-size: 13px;
}
.dealer-fule-listing .filter-search:focus {
	outline: 2px solid var(--orange);
	outline-offset: -1px;
}

.dealer-fule-listing .filter-options {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.dealer-fule-listing .filter-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	padding: 4px 0;
}
.dealer-fule-listing .filter-option-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.dealer-fule-listing .filter-option input[type="checkbox"],
.dealer-fule-listing .filter-option input[type="radio"] {
	accent-color: var(--orange);
	width: 14px;
	height: 14px;
}
.dealer-fule-listing .filter-option .ct {
	color: var(--ink-mute);
	font-size: 12px;
}

/* ---- Histogram-style range filter ---- */
.dealer-fule-listing .chart-filter { padding-top: 14px; }
.dealer-fule-listing .chart-display {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 12px 0 10px;
}
.dealer-fule-listing .chart-display .range-text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--navy-deep);
}
.dealer-fule-listing .chart-display .range-meta {
	font-size: 11px;
	color: var(--ink-mute);
}
.dealer-fule-listing .histogram-wrap {
	position: relative;
	padding-bottom: 16px;
}
.dealer-fule-listing .histogram {
	width: 100%;
	height: 50px;
	display: block;
}
.dealer-fule-listing .histogram .bar { transition: fill .15s; }
.dealer-fule-listing .histogram .bar.active   { fill: var(--bar-active); }
.dealer-fule-listing .histogram .bar.inactive { fill: var(--bar-inactive); }

.dealer-fule-listing .range-slider {
	position: relative;
	height: 16px;
	margin-top: -2px;
}
.dealer-fule-listing .range-track {
	position: absolute;
	left: 0; right: 0; top: 7px; height: 3px;
	background: var(--rule);
	border-radius: 999px;
}
.dealer-fule-listing .range-fill {
	position: absolute;
	top: 7px; height: 3px;
	background: var(--orange);
	border-radius: 999px;
}
.dealer-fule-listing .range-handle {
	position: absolute;
	width: 16px; height: 16px;
	background: var(--color-surface-card);
	border: 2px solid var(--navy-deep);
	border-radius: 50%;
	top: 0;
	transform: translateX(-50%);
	cursor: grab;
	padding: 0;
	box-shadow: 0 2px 6px rgba(10,35,66,.2);
	touch-action: none;  /* required for pointermove on mobile */
}
.dealer-fule-listing .range-handle:hover { border-color: var(--orange); }
.dealer-fule-listing .range-handle:active { cursor: grabbing; }

.dealer-fule-listing .range-inputs {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.dealer-fule-listing .range-inputs input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--rule);
	border-radius: var(--p2-radius);
	font: inherit;
	font-size: 13px;
}
.dealer-fule-listing .range-inputs input:focus {
	outline: 2px solid var(--orange);
	outline-offset: -1px;
}

/* ---- Pill filters (Sleeps / Slideouts / Bathrooms) ---- */
.dealer-fule-listing .pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.dealer-fule-listing .pill {
	border: 1px solid var(--rule);
	background: var(--color-surface-card);
	padding: 6px 10px;
	border-radius: var(--p2-radius);
	font: inherit;
	font-size: 13px;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: all .12s;
}
.dealer-fule-listing .pill .ct { font-size: 11px; color: var(--ink-mute); }
.dealer-fule-listing .pill:hover { border-color: var(--navy); }
.dealer-fule-listing .pill.is-active {
	background: var(--navy);
	color: var(--color-text-on-brand);
	border-color: var(--navy);
}
.dealer-fule-listing .pill.is-active .ct {
	color: rgba(255,255,255,.7);
}
.dealer-fule-listing .pill-row input[data-pill-input] {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ---- Bottom apply button ---- */
.dealer-fule-listing .filter-apply-bottom {
	margin: 4px 18px 18px;
	width: calc(100% - 36px);
	background: #ededed;
	color: var(--navy-deep);
	padding: 12px;
	border: 0;
	border-radius: var(--p2-radius);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.dealer-fule-listing .filter-apply-bottom:hover { background: #dcdcdc; }

/* ---- Grid + cards (replaces v1.2.0 .unit-card BEM visuals) ---- */
.dealer-fule-listing .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 1100px) {
	.dealer-fule-listing .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.dealer-fule-listing .grid { grid-template-columns: 1fr; }
}

.dealer-fule-listing .card {
	background: var(--color-surface-card);
	border-radius: var(--p2-radius-lg);
	box-shadow: var(--p2-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s, box-shadow .2s;
	position: relative;
}
.dealer-fule-listing .card:hover {
	transform: translateY(-2px);
	box-shadow: var(--p2-shadow-hover);
}
.dealer-fule-listing .card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cream-deep);
	overflow: hidden;
}
.dealer-fule-listing .card-photo a { display: block; height: 100%; }
.dealer-fule-listing .card-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.dealer-fule-listing .card:hover .card-photo img { transform: scale(1.04); }

.dealer-fule-listing .badge-condition {
	position: absolute;
	top: 10px; left: 10px;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: white;
}
.dealer-fule-listing .badge-condition.is-new  { background: var(--green); }
.dealer-fule-listing .badge-condition.is-used { background: var(--used-bg); }

.dealer-fule-listing .card-actions {
	position: absolute;
	top: 8px; right: 8px;
	flex-direction: column;
	gap: 6px;
}
.dealer-fule-listing .icon-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(4px);
	display: grid;
	place-items: center;
	color: var(--navy);
	border: 0;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dealer-fule-listing .icon-btn:hover {
	background: var(--color-surface-card);
	color: var(--orange-deep);
}
.dealer-fule-listing .icon-btn svg { width: 16px; height: 16px; }
/* Saved state — red heart glyph on the white button background. Matches
   fule-station's PDP gallery (.fule-gallery__icon-btn.is-active svg in
   plugin's assets/css/gallery.css) on the same #d64545 literal so both
   surfaces show one canonical saved-heart treatment. Promote to a shared
   token in a future milestone. */
.dealer-fule-listing .icon-btn.is-saved { color: #d64545; }
.dealer-fule-listing .icon-btn.is-saved svg { fill: currentColor; }

.dealer-fule-listing .photo-count {
	position: absolute;
	bottom: 10px; left: 10px;
	background: rgba(10,35,66,.78);
	backdrop-filter: blur(6px);
	color: white;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.dealer-fule-listing .photo-count svg { width: 12px; height: 12px; }

.dealer-fule-listing .savings-tag {
	position: absolute;
	bottom: 10px; right: 10px;
	background: var(--navy-deep);
	color: var(--orange);
	padding: 6px 11px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid rgba(240,138,28,.35);
}
.dealer-fule-listing .savings-tag span {
	color: white;
	opacity: .7;
	font-weight: 500;
}

.dealer-fule-listing .card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.dealer-fule-listing .card-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--navy-deep);
	line-height: 1.25;
	letter-spacing: -.005em;
	margin: 0;
}
.dealer-fule-listing .card-title a { color: inherit; text-decoration: none; }
.dealer-fule-listing .card-title a:hover { color: var(--orange-deep); }

.dealer-fule-listing .card-meta {
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: var(--ink-mute);
	align-items: center;
}
.dealer-fule-listing .card-meta .stock { font-weight: 500; }
.dealer-fule-listing .card-meta a { color: var(--orange-deep); font-weight: 500; }
.dealer-fule-listing .card-meta a:hover { text-decoration: underline; }
.dealer-fule-listing .card-meta .dot { color: var(--rule); }

.dealer-fule-listing .spec-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--cream);
	border-radius: var(--p2-radius);
	padding: 8px 4px;
}
.dealer-fule-listing .spec-stat {
	text-align: center;
	border-right: 1px solid var(--rule);
	padding: 0 4px;
}
.dealer-fule-listing .spec-stat:last-child { border-right: none; }
.dealer-fule-listing .spec-stat .v {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--navy-deep);
	line-height: 1;
}
.dealer-fule-listing .spec-stat .l {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-mute);
	margin-top: 4px;
	font-weight: 600;
}

.dealer-fule-listing .price-block {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px dashed var(--rule);
	padding-top: 12px;
}
.dealer-fule-listing .price-now {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--navy-deep);
	letter-spacing: -.01em;
}
.dealer-fule-listing .price-was {
	font-size: 13px;
	color: var(--ink-mute);
	text-decoration: line-through;
}
.dealer-fule-listing .price-call {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--orange-deep);
}
.dealer-fule-listing .price-mo {
	display: block;
	font-size: 11px;
	color: var(--ink-mute);
	margin-top: 2px;
	font-weight: 500;
}
.dealer-fule-listing .price-mo strong { color: var(--ink); font-weight: 600; }

.dealer-fule-listing .card-foot {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-top: 4px;
}
.dealer-fule-listing .compare-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ink-soft);
	cursor: pointer;
}
.dealer-fule-listing .compare-check input {
	accent-color: var(--orange);
	width: 14px;
	height: 14px;
}
.dealer-fule-listing .btn-view {
	margin-left: auto;
	background: var(--navy);
	color: var(--color-text-on-brand);
	padding: 9px 16px;
	border-radius: var(--p2-radius);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.dealer-fule-listing .btn-view:hover { background: var(--navy-soft); }

/* =========================================================================
   v1.5.0-phase3 — COMPARE FLOW (sticky bar + side-by-side page)
   =========================================================================
   The compare bar lives outside .dealer-fule-listing (it's position:fixed
   and persists across scroll), so its color tokens are inlined directly
   from the parent --color-* tokens defined in tokens.css. The compare
   page IS wrapped in .dealer-fule-listing, so it inherits the v2 token
   aliases (--navy/--orange/--cream) defined under that scope.
   ========================================================================= */

/* ---- STICKY COMPARE BAR (v1.11.0 — 3-state) ----
   One fixed shell, two regions:
     .compare-bar__dock  — desktop DOCK (horizontal chips rail) AND the mobile
                           COLLAPSED pill (overlapping thumbs + chevron).
     .compare-bar__tray  — mobile EXPANDED tray (stacked rows; slides up).
   Desktop = the dock laid out as a row (tray display:none). Mobile = a
   column-reverse so the tray grows UPWARD above the always-present pill. All
   brand colors come from :root --color-* tokens; gold (--color-gold /
   --color-gold-dark) is the ONLY CTA color and never paints a remove/clear/
   dismiss affordance. */
.compare-bar {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-surface-dark);
	color: var(--color-text-on-brand);
	/* Accent glow derived from the dealer's accent token so the bar's edge
	   picks up each brand automatically. */
	border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
	border-radius: 16px;
	box-shadow: 0 12px 32px -8px rgba(10, 35, 66, .45);
	display: flex;
	flex-direction: column;
	max-width: min(1180px, 96vw);
	font-size: 14px;
	z-index: 50;
}
.compare-bar[hidden] { display: none; }
.compare-bar strong { font-weight: 600; }

/* ---- DOCK (desktop dock + mobile collapsed pill) ---- */
.compare-bar__dock {
	display: flex;
	align-items: center;
	gap: 14px 16px;
	padding: 12px 16px;
}
/* "Compare N of M" lead + dual-arrow ⇄ glyph (desktop). */
.compare-bar__lead {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-weight: 600;
}
.compare-bar__lead-icon { flex: 0 0 auto; opacity: .9; }
.compare-bar__lead-text { display: inline-flex; align-items: baseline; gap: 4px; }

/* Primary CTA. SUBTLE — NOT gold (per Jason: bar buttons must not be yellow).
   A quiet translucent-light pill: faint fill + a muted 1px border + light text,
   all DERIVED from the brand's --color-text-on-brand token via color-mix (no
   hardcoded hex, brand-adaptive). Gold in this bar is now reserved ONLY for the
   small chip price accent. One rule covers all three states (desktop dock,
   mobile collapsed pill, mobile expanded tray) — same .compare-go-btn class. */
.compare-go-btn {
	background: color-mix(in srgb, var(--color-text-on-brand) 10%, transparent);
	color: var(--color-text-on-brand);
	border: 1px solid color-mix(in srgb, var(--color-text-on-brand) 28%, transparent);
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background .15s, border-color .15s, color .15s;
}
/* Scoped (0,3,0) so it beats the theme's global base.css `a:hover` (which
   resolves --color-text-link-hover → --color-accent = orange-rust). The CTA is
   an <a>, so without this its TEXT goes orange on hover. We hold it at the
   existing CTA token (cream) — only the bg/border lift on hover, never orange,
   never gold (consistent with the de-gold decision). */
.compare-bar .compare-go-btn:hover {
	background: color-mix(in srgb, var(--color-text-on-brand) 18%, transparent);
	border-color: color-mix(in srgb, var(--color-text-on-brand) 42%, transparent);
	color: var(--color-text-on-brand);
}
.compare-bar .compare-go-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; color: var(--color-text-on-brand); }

/* DORMANT state (exactly 1 unit) — flatter/more muted than the live button:
   no fill, faint muted border, muted text, not-allowed, inert. paintBar() adds
   .is-dormant + aria-disabled + tabindex -1; the JS click guard swallows any
   keyboard activation. */
.compare-go-btn.is-dormant {
	background: transparent;
	border-color: color-mix(in srgb, var(--color-text-on-dark-muted) 30%, transparent);
	color: var(--color-text-on-dark-muted);
	cursor: not-allowed;
	pointer-events: none;
}

/* ---- Chips rail (desktop) ---- */
.compare-bar__chips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}
/* Chip (desktop rail) and row (mobile tray) share the inner sub-elements;
   only the wrapper differs. */
.compare-bar__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	padding: 5px 6px 5px 5px;
}
/* Card-size thumb — explicit w/h + object-fit:cover so a 4:3 card image never
   squishes or overflows the small slot. The skeleton placeholder is a <span>
   sharing the same box (a src-less <img> would flash a broken glyph). */
.compare-bar__chip-thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 34px;
	border-radius: 6px;
	display: block;
	overflow: hidden;                         /* clip the inner <img> to the radius */
	background: rgba(255, 255, 255, .18);      /* pre-hydration placeholder */
}
/* Hydrated image — fills the stable container, covering the placeholder. */
.compare-bar__chip-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.compare-bar__chip-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Line 1 (year + make) — primary weight. */
.compare-bar__chip-title {
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text-on-brand);
}
/* Line 2 (model + trim) — smaller, muted, single-line ellipsis. Rendered only
   when non-empty (freeform-import units return line2 = ''). */
.compare-bar__chip-sub {
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 11px;
	color: var(--color-text-on-dark-muted);
}
/* Gold price — same semantic --color-gold token as the CTA (mockup spec). */
.compare-bar__chip-price { font-size: 12px; font-weight: 600; color: var(--color-gold); }

/* Ghost remove — muted glyph, NO fill, NO box, NO border; brightens on hover.
   Never gold. Scoped under .compare-bar (specificity 0,2,0) and reset with
   appearance:none + explicit transparent/box-shadow:none so no UA button
   chrome or stray theme rule can render it as a filled (gold) box. Gold now
   lives ONLY on the small chip price accent. */
.compare-bar .compare-bar__chip-remove {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 2px;
	font-size: 15px;
	line-height: 1;
	color: var(--color-text-on-dark-muted);
	cursor: pointer;
	transition: color .15s;
}
.compare-bar .compare-bar__chip-remove:hover { color: var(--color-text-on-brand); }
.compare-bar .compare-bar__chip-remove:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }

/* "Clear" / "Clear all" — quiet ghost text button. Never gold (destructive,
   not primary). */
/* Scoped under .compare-bar (specificity 0,2,0) so it beats the Elementor kit's
   global `.elementor-kit-9 button` rule (0,1,1) that paints EVERY bare <button>
   a gold pill (background-color:#F5B800; border-radius:8px; padding:14px 28px).
   We null all three here: transparent fill, no radius, our own padding. (The ×
   remove escapes the same kit rule because it too is .compare-bar-scoped; the
   Compare CTA escapes it by being an <a>, not a <button>.) */
.compare-bar .compare-bar__clear {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 2px;
	font-size: 12.5px;
	color: var(--color-text-on-dark-muted);
	cursor: pointer;
	transition: color .15s;
}
.compare-bar .compare-bar__clear:hover { color: var(--color-text-on-brand); }
.compare-bar .compare-bar__clear:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; }

/* Chevron toggle (mobile only). Rotates 180° when its tray is expanded. Also
   .compare-bar-scoped (0,2,0) to escape the same gold-pill kit rule above. */
.compare-bar .compare-bar__toggle {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 2px;
	color: var(--color-text-on-dark-muted);
	cursor: pointer;
	display: none;           /* desktop hides it; mobile re-shows */
	place-items: center;
}
.compare-bar .compare-bar__toggle:hover { color: var(--color-text-on-brand); }
.compare-bar .compare-bar__toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
.compare-bar__chevron { transition: transform .2s; }
.compare-bar .compare-bar__toggle[aria-expanded="true"] .compare-bar__chevron { transform: rotate(180deg); }

/* Overlapping thumbs (mobile collapsed pill) — hidden on desktop. */
.compare-bar__stack { display: none; align-items: center; }
.compare-bar__stack img,
.compare-bar__stack .compare-bar__stack-skel {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-surface-dark);
	background: rgba(255, 255, 255, .18);
	margin-left: -10px;
	display: block;
}
.compare-bar__stack img:first-child,
.compare-bar__stack .compare-bar__stack-skel:first-child { margin-left: 0; }

/* Mobile-only copy ("Comparing N of M") + the whole tray are hidden on desktop. */
.compare-bar__pill-copy { display: none; }
.compare-bar__tray      { display: none; }

/* ========================================================================
   MOBILE — collapsed pill + slide-up expanded tray
   ======================================================================== */
@media (max-width: 600px) {
	.compare-bar {
		left: 8px;
		right: 8px;
		bottom: 8px;
		transform: none;
		max-width: none;
		/* column-reverse: dock (pill) stays at the bottom, the tray grows
		   upward above it — the "slides up" effect. */
		flex-direction: column-reverse;
	}

	/* DOCK becomes the compact pill. */
	.compare-bar__dock {
		padding: 10px 12px;
		gap: 10px;
		justify-content: space-between;
	}
	.compare-bar__stack     { display: inline-flex; }
	.compare-bar__pill-copy { display: inline-flex; align-items: baseline; gap: 4px; flex: 1 1 auto; font-size: 12.5px; }
	.compare-bar .compare-bar__toggle { display: grid; }   /* match base (0,2,0) so it re-shows */
	.compare-bar__lead      { display: none; }
	.compare-bar__chips     { display: none; }
	.compare-bar__dock > .compare-bar__clear { display: none; }   /* desktop clear */
	.compare-go-btn__n      { display: none; }                    /* pill CTA = "Compare →" */
	.compare-go-btn         { padding: 7px 14px; font-size: 12px; }

	/* TRAY — rendered in flow above the pill; collapsed by max-height:0 and
	   animated open by .is-expanded (display:flex stays, so the transition can
	   run; JS gates focus/a11y with inert + aria-hidden). */
	.compare-bar__tray {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0 14px;
		transition: max-height .26s ease, opacity .2s ease, padding .26s ease;
	}
	/* The tray sits ABOVE the always-present pill (column-reverse) and is the
	   list only — header + rows. It animates open/closed via max-height; because
	   .compare-bar is bottom-anchored (bottom:8px) the box grows UPWARD and the
	   pill (dock) never moves or reflows. border-bottom divides the list from the
	   pill below it. */
	.compare-bar.is-expanded .compare-bar__tray {
		max-height: 60vh;
		opacity: 1;
		overflow-y: auto;
		padding: 14px 14px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.compare-bar__tray-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.compare-bar__tray-title {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .06em;
		color: var(--color-text-on-dark-muted);
	}

	.compare-bar__rows { display: flex; flex-direction: column; gap: 8px; }
	/* Tray row — a full-width card row reusing the chip sub-elements. */
	.compare-bar__row {
		display: flex;
		align-items: center;
		gap: 10px;
		background: rgba(255, 255, 255, .06);
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 10px;
		padding: 8px;
	}
	.compare-bar__row .compare-bar__chip-thumb { width: 54px; height: 40px; }
	.compare-bar__row .compare-bar__chip-body  { flex: 1 1 auto; }
	.compare-bar__row .compare-bar__chip-title,
	.compare-bar__row .compare-bar__chip-sub   { max-width: none; }
}

/* ---- COMPARE PAGE styles retired in v1.10.0 → assets/css/compare.css.
   The .compare-bar block above is intentionally unchanged. ---- */

/* =========================================================================
   v1.5.0 — FAQ SECTION (Phase 5)
   =========================================================================
   Wraps in .dealer-fule-listing so v2 token aliases (--navy / --orange /
   --cream) apply. Native <details>/<summary> for keyboard + SEO without
   JS. Question rotates the chevron when [open]; answer slides in via
   max-height transition (degrades cleanly without it).
   ========================================================================= */

.dealer-fule-faq-section {
	background: var(--cream-deep);
	padding: 56px 0 64px;
	border-top: 1px solid var(--rule);
}
.dealer-fule-faq-container {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 24px;
}
.dealer-fule-faq-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 32px;
	color: var(--navy-deep);
	letter-spacing: -.018em;
	line-height: 1.1;
	margin: 0 0 24px;
	text-align: center;
}
.dealer-fule-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dealer-fule-faq-item {
	background: var(--color-surface-card);
	border: 1px solid var(--rule);
	border-radius: var(--p2-radius-lg);
	padding: 0;
	transition: border-color .15s, box-shadow .15s;
}
.dealer-fule-faq-item[open] {
	border-color: var(--navy-soft);
	box-shadow: var(--p2-shadow-card);
}
.dealer-fule-faq-question {
	list-style: none;
	cursor: pointer;
	padding: 18px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--navy-deep);
	line-height: 1.35;
}
.dealer-fule-faq-question::-webkit-details-marker { display: none; }
.dealer-fule-faq-question::after {
	content: "+";
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cream);
	color: var(--navy-deep);
	font-size: 18px;
	font-weight: 400;
	flex-shrink: 0;
	transition: transform .2s, background .15s;
}
.dealer-fule-faq-item[open] .dealer-fule-faq-question::after {
	content: "−";
	background: var(--orange);
	color: var(--navy-deep);
	transform: rotate(180deg);
}
.dealer-fule-faq-answer {
	padding: 0 24px 20px;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.55;
}
.dealer-fule-faq-answer p { margin: 0 0 .65em; }
.dealer-fule-faq-answer p:last-child { margin-bottom: 0; }
.dealer-fule-faq-answer a {
	color: var(--orange-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dealer-fule-faq-answer ul,
.dealer-fule-faq-answer ol {
	margin: 0 0 .75em;
	padding-left: 1.4em;
}
.dealer-fule-faq-answer li { margin-bottom: .25em; }

@media (max-width: 600px) {
	.dealer-fule-faq-section  { padding: 40px 0 48px; }
	.dealer-fule-faq-title    { font-size: 26px; }
	.dealer-fule-faq-question { padding: 14px 18px; font-size: 15px; }
	.dealer-fule-faq-answer   { padding: 0 18px 16px; font-size: 14px; }
}

/* =========================================================================
   v1.5.0 — UNIVERSAL /for-sale/ TYPE GRID
   ========================================================================= */
.dealer-fule-universal-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}
.dealer-fule-universal-type-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	background: var(--color-surface-card);
	border: 1px solid var(--rule);
	border-radius: var(--p2-radius-lg);
	color: var(--navy-deep);
	text-decoration: none;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dealer-fule-universal-type-card:hover {
	border-color: var(--orange);
	transform: translateY(-2px);
	box-shadow: var(--p2-shadow-card);
}
.dealer-fule-universal-type-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.005em;
}
.dealer-fule-universal-type-card__count {
	font-size: 12px;
	color: var(--ink-mute);
	font-weight: 500;
}

/* =========================================================================
   v1.6.0 — Filtered-search mode (Mode C)

   When the request carries $_GET filter params beyond the canonical path
   (e.g. /for-sale/rvs/?condition[]=new), archive-inventory.php adds
   .dealer-fule-listing--filtered on the outer section and swaps the H1
   class for .dealer-fule-listing__h1--compact. The intro paragraph is
   suppressed in PHP, so the chip toolbar slots immediately under the H1
   and the grid starts higher on the page.
   ========================================================================= */
.dealer-fule-listing--filtered {
	padding-block: var(--space-2xs) var(--space-2xl);
}

.dealer-fule-listing__h1--compact {
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-normal);
	margin: 0 0 var(--space-2xs);
}