/**
 * CL archive — NEW styles only (Phase 2, lane [AR]).
 * Everything that pixel-matches legacy comes from the re-enqueued legacy
 * stylesheets (see cl-engine/inventory/frontend.php); this file covers only
 * what is new in the CL build: dual-thumb range controls, chosen-filter
 * badges, SOLD badge, mobile filter drawer, pagination mobile pattern
 * (no :has), and resets for elements that became real <button>s.
 * Safari budget: no :has(), no color-mix(), no overflow:clip anywhere here.
 */

:root {
	--cl-accent: #d02329;        /* overridden inline from brand.color */
	--cl-accent-hover: #b11e23;  /* precomputed in PHP — no color-mix() */
}

/* ── Button-ified legacy elements: neutralize UA button chrome ─────────── */
.cl-inventory button.filter-handle,
.cl-inventory button.filter-close,
.cl-inventory button.filter-reset,
.cl-inventory button.action-reset,
.cl-inventory button.show-all,
.cl-inventory button.show-less,
.cl-inventory button.mvl-actions-popup-button,
.cl-inventory button.stm-share {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.cl-inventory button.filter-handle {
	/* Parity round 2 (2026-07-24): the button-chrome reset above zeroed the
	   padding that legacy base.css gives the (div) filter handle, clipping the
	   pill to 62px vs legacy's 116px. Restore the legacy metrics explicitly. */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	height: 47px;
}

/* ── Loading state ─────────────────────────────────────────────────────── */
.cl-inventory.cl-loading #listings-result {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ── Dual-thumb range control (replaces the legacy jQuery-UI slider) ───── */
.cl-range {
	/* Parity round 2 (2026-07-24): the legacy jQuery-UI slider element is a
	   4px track with 10px vertical margins; the dot handles OVERLAP the track
	   without adding height. The previous 28px-tall control made every slider
	   section 24px taller than legacy, shifting the whole sidebar down. The
	   range inputs stay 24px tall (touch/click target) but are absolutely
	   centered over the 4px box, so the layout height matches legacy. */
	position: relative;
	/* Parity round 4 (2026-07-26, re-measured in live legacy DOM): legacy
	   .stm-price-range-unit is a 4px-tall box with margin 10px 0 — 24px of
	   flow. Round 3 had measured it as h0/mb0 (10px of flow), which left every
	   slider group exactly 14px SHORTER than legacy and slid the sidebar and
	   footer up by 28px across the two sliders. Match the measured legacy
	   flow: 4px + 10/10 margins. */
	height: 4px;
	margin: 10px 0;
	/* Slider fix 2026-07-25: the wrapper drives dragging via pointer events
	   (Chrome ignores pointer-events on the thumb pseudo — see cl-inventory.js
	   attachRangePointer). Don't let touch drags scroll the page instead. */
	touch-action: none;
}
/* Expanded hit area: the box is a 4px strip (legacy layout parity) while the
   thumbs/fingers need ~28px. The pseudo hit-tests as part of the wrapper, so
   pointerdown anywhere over the visual control reaches the drag controller —
   no layout change (absolute overlay). Plain ::before, no :has()/clip. */
.cl-range::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;  /* stays inside the control's own 10px margins so it can */
	bottom: -10px; /* never steal clicks from the min/max fields above */
}
.cl-range__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: #e2e6ea;
}
.cl-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--cl-accent);
	border-radius: 2px;
}
.cl-range__input {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	margin: 0;
	height: 28px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none; /* thumbs re-enable below */
	outline: none;
}
/* Thumbs: solid accent dots, the legacy jQuery-UI slider handle look
   (parity fix 2026-07-24 — was a white ring). */
.cl-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--cl-accent);
	border: 0;
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
	cursor: pointer;
}
.cl-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--cl-accent);
	border: 0;
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
	cursor: pointer;
}
.cl-range__input::-moz-range-track {
	background: transparent;
}
.cl-range__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--cl-accent);
	outline-offset: 2px;
}
.cl-range__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--cl-accent);
	outline-offset: 2px;
}

/* ── Native sort select skinned like the legacy select2 control ─────────
   (parity fix 2026-07-24: the legacy sort was a borderless select2 with a
   chevron; the CL native <select> rendered with UA chrome. Same look now,
   still a native accessible control.) */
.cl-inventory .stm-select-sorting select[data-cl-sort] {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23010101' stroke-opacity='0.8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	/* Parity round 2 (2026-07-24): match the legacy select2 skin exactly —
	   search-results-actions.css sets 13px/400, rgba(1,1,1,.8), 40px line,
	   0 left padding, 32px right gutter for the chevron.
	   Parity round 3 (2026-07-25, live legacy probe): the select2 span
	   INHERITED "Montserrat, sans-serif" — the CL <button>/<select> were
	   picking up the body's Space Grotesk stack instead, so the control
	   rendered in a visibly different face (the child theme master rule
	   body,button,input,select{font-family:var(--cl-font)!important} forces
	   the site font onto form controls but never touched the legacy select2
	   SPANs — hence the !important + scoped specificity here). */
	font-family: var(--cl-font, Montserrat, sans-serif) !important;
	padding: 0 32px 0 0;
	font-size: 13px;
	font-weight: 400;
	color: rgba(1, 1, 1, 0.8);
	cursor: pointer;
	line-height: 40px;
	height: 40px;
}
.cl-inventory .stm-select-sorting select[data-cl-sort]:focus-visible {
	outline: 2px solid var(--cl-accent);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	/* Parity round 2: the mobile sort pill (child inline styles) draws its own
	   ::after chevron — drop this select's background chevron so the control
	   doesn't show two arrows like it did post-cutover. Round 3: same guard
	   for the enhanced button's cl-icons ::after chevron. */
	.cl-inventory .stm-select-sorting select[data-cl-sort] {
		background-image: none;
	}
	.cl-inventory .cl-sortdd__btn::after {
		display: none;
	}
}

/* ── Custom sort dropdown (sort/pills parity round, 2026-07-24) ────────────
   The OS-native open panel of the skinned <select> was rejected — this is the
   select2-look panel the legacy `.select2-container.sort_order` skin drew,
   rebuilt as a dependency-free button+listbox (cl-inventory.js). The native
   select stays in the DOM as the no-JS fallback; it is hidden only when the
   enhanced control is built (.cl-sortdd class added by JS). Values below are
   the exact legacy rules from the copied search-results-actions.css /
   app-select2.css skins (8px radius, 200px panel, 14px options, link-color
   \f00c check on the selected row, super-lowalpha hover). */
.cl-inventory .stm-select-sorting.cl-sortdd {
	position: relative;
	display: inline-block;
}
.cl-inventory .stm-select-sorting.cl-sortdd select[data-cl-sort] {
	display: none;
}
.cl-inventory .cl-sortdd__btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background-color: transparent;
	position: relative;
	padding: 0 32px 0 0;
	/* Parity round 3 (2026-07-25, live legacy probe): Montserrat like the
	   select2 span inherited (see the native select rule above — same
	   !important reason: the child master font rule targets button). */
	font-family: var(--cl-font, Montserrat, sans-serif) !important;
	font-size: 13px;
	font-weight: 400;
	color: rgba(1, 1, 1, 0.8);
	cursor: pointer;
	line-height: 40px;
	height: 40px;
	white-space: nowrap;
}
/* Parity round 3: the legacy chevron is NOT an svg — it is the cl-icons
   \e9ff glyph at 14px (search-results-actions.css .select2-selection__arrow
   b::before), 15px box roughly centered in the 40px control, ~8px in from
   the right edge (legacy probe: glyph box [562,317,15,15] in a control
   ending at x585). The icon font is already loaded (mirrored icons.css). */
.cl-inventory .cl-sortdd__btn::after {
	content: "\e9ff";
	font-family: "cl-icons";
	font-size: 14px;
	font-weight: 400;
	position: absolute;
	right: 8px;
	/* Legacy probe: 15px glyph box at 12px from the control top ([562,317,15,15]
	   in a control at y305) — fixed offset, not a centered transform. */
	top: 12px;
	height: 15px;
	line-height: 15px;
	color: rgba(1, 1, 1, 0.8);
}
/* Open state: chevron flips, same as the legacy select2 arrow rotate. */
.cl-inventory .cl-sortdd--open .cl-sortdd__btn::after {
	transform: rotate(180deg);
}
.cl-inventory .cl-sortdd__btn:focus-visible {
	outline: 2px solid var(--cl-accent);
	outline-offset: 2px;
}
.cl-inventory .cl-sortdd__list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1051;               /* legacy select2 dropdown z-index */
	width: 200px;                /* .sort_order .select2-dropdown 200px !important */
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--cl-legacy-filter-bg-color, #ffffff);
	border: 1px solid var(--cl-legacy-border-color, rgba(1, 1, 1, 0.15));
	border-radius: 8px;
	max-height: 350px;           /* app-select2 options max-height */
	overflow-x: hidden;
	overflow-y: auto;
	outline: none;
}
.cl-inventory .cl-sortdd--open .cl-sortdd__list {
	display: block;
}
.cl-inventory .cl-sortdd__opt {
	position: relative;
	margin: 0;
	padding: 6px 6px 6px 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--cl-legacy-filter-field-text-color, #010101);
	background-color: var(--cl-legacy-filter-field-bg-color, #ffffff);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cl-inventory .cl-sortdd__opt:first-child {
	border-radius: 8px 8px 0 0;
}
.cl-inventory .cl-sortdd__opt:last-child {
	border-radius: 0 0 8px 8px;
}
.cl-inventory .cl-sortdd__opt:hover,
.cl-inventory .cl-sortdd__opt.cl-active {
	/* Neutral light gray highlight (2026-07-24 review: no blue anywhere in
	   the panel — was the link-color super-lowalpha blue tint). */
	background-color: #f1f3f5;
}
/* Legacy `[aria-selected=true]` carried !important — the selected row stays
   white even while highlighted/hovered (see sort-panel-legacy captures). */
.cl-inventory .cl-sortdd__opt[aria-selected="true"]:hover,
.cl-inventory .cl-sortdd__opt[aria-selected="true"].cl-active {
	background-color: var(--cl-legacy-filter-field-bg-color, #ffffff);
}
/* Selected row: white with a near-black FA check (2026-07-24 review: the
   check follows the site text color, NOT the blue link color; FA6 face ships
   with the theme; FA5 name kept as fallback for sites still carrying the
   legacy face). */
.cl-inventory .cl-sortdd__opt[aria-selected="true"]::after {
	content: "\f00c";
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 16px;
	color: var(--cl-legacy-filter-field-text-color, #010101);
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 767px) {
	/* Legacy mobile skin: the closed control becomes a white 6px-radius pill
	   (search-results-actions.css @767 select2 rule); the wrapper pill/chevron
	   come from the child inline styles exactly as for the native select. */
	.cl-inventory .cl-sortdd__btn {
		background-color: var(--cl-legacy-filter-field-bg-color, #ffffff);
		border-radius: 6px;
		background-image: none; /* wrapper draws the chevron on mobile */
		padding: 0 40px 0 32px;  /* legacy mobile rendered padding */
	}
	.cl-inventory .cl-sortdd--open .cl-sortdd__btn {
		background-image: none;
	}
}

/* Per-page select: same treatment (legacy showed a compact borderless "18 ⌄"). */
.cl-inventory .stm-inventory-items-per-page-wrap select,
.cl-inventory .stm_per_page select {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #d9dde2;
	border-radius: 4px;
	background-color: #ffffff;
	padding: 2px 18px 2px 8px;
	font-weight: 700;
	color: #332c2b;
}

/* Chips row deleted (final filter directive 2026-07-24): no chosen-filter
   pills ever render above the results — active state is shown by the
   accent-filled option pills in the sidebar (ported legacy base.css
   `input:checked + .option-badge`), and the actions row keeps only the
   right-aligned Reset all link. */

/* ── SOLD badge (settings: inventory.sold_behavior = badge) ────────────── */
/* 2026-08-06 (owner ask): matched to the single listing's title flag. The badge
   fills with the brand color instead of the old near-black, and its label rides
   the Theme Editor "Button text color" setting like the rest of the filled
   controls do. The span carries its own color because the legacy card CSS
   paints label text at higher specificity than the wrapper. */
.cl-sold-label {
	background: var(--cl-red, #DD0000) !important;
	color: #ffffff;
}
.cl-sold-label span {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mvl-card-skins.cl-is-sold .image img {
	filter: grayscale(35%);
}

/* ── Call for Price ────────────────────────────────────────────────────── */
/* 2026-08-11 (owner: desktop grid — "Call for Price" overhangs the card
   edge): nowrap was fine when this box held "$11,999", but with the
   "Our Price: " label in front this is a five-word sentence, and at grid-card
   widths one forced line ran straight past the card border. The phrase itself
   stays unbreakable (span below); the only allowed break point is after the
   label, so a tight card reads "Our Price:" over "Call for Price" instead of
   overflowing. Wide list cards still fit on one line and look unchanged. */
.cl-call-for-price {
	white-space: normal;
	max-width: 100%;
	min-width: 0;
}
.cl-call-for-price .cl-cfp-text {
	white-space: nowrap;
}

/* ── Show all / hide all (long checkbox lists) ─────────────────────────── */
.cl-filter-form .stm-filter-pro-options-list label.stashed {
	display: none;
}
.cl-filter-form .stm-filter-item.cl-expanded .stm-filter-pro-options-list label.stashed {
	display: flex; /* parity round 2: legacy labels are flex (base.css) */
}
/* Parity round 2 (2026-07-24): typography/margins come from the legacy
   base.css (.stm-inventory-pro-filter-fields .show-all — 14px/500,
   margin 12px 0 2px, 24px plus sign); this block only handles the CL
   expanded-state toggling, using flex to match the legacy display mode. */
/* Parity round 3 (2026-07-25, measured): our show-all/show-less are real
   <button>s, and the button-chrome neutralizer at the top of this file sets
   margin:0 — overriding the legacy 12px/2px margins and making every stashed
   group 12px shorter than legacy (the show-all row then collided with the
   sticky Reset All footer in full-page renders). Restore the legacy margins
   at higher specificity than the reset. */
.cl-inventory .cl-filter-form button.show-all,
.cl-inventory .cl-filter-form button.show-less {
	margin: 12px 0 2px;
}
.cl-filter-form .show-less,
.cl-filter-form .stm-filter-item.cl-expanded .show-all {
	display: none !important;
}
.cl-filter-form .stm-filter-item.cl-expanded .show-less {
	display: flex !important;
}

/* ── Always-expanded groups (owner-approved improvement, 2026-07-24):
   Condition / Power Type / Seating / Location render EVERY option with no
   "Show all" collapse (.cl-always-expanded set in parts/archive-filters.php).
   The copied pro base.css display:none's label.disabled/.stashed — restore
   them here, keeping the greyed disabled look and blocking interaction on
   zero-count options. Spacing/typography untouched (same flex labels). ── */
.cl-filter-form .stm-filter-item.cl-always-expanded .stm-filter-pro-options-list label.disabled,
.cl-filter-form .stm-filter-item.cl-always-expanded .stm-filter-pro-options-list label.stashed {
	display: flex;
}
.cl-filter-form .stm-filter-item.cl-always-expanded .stm-filter-pro-options-list label.disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* ── Year selects (native, styled close to the legacy select2 skin) ────── */
.cl-year-select {
	width: 100%;
	height: 42px;
	padding: 0 30px 0 12px;
	border: 1px solid #d9dde2;
	border-radius: 6px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23495057' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	font-size: 14px;
	color: #332c2b;
	-webkit-appearance: none;
	appearance: none;
}

/* ── Actions popup: open state without hover (touch / keyboard) ────────── */
.mvl-actions-popup.cl-open .mvl-actions-popup-content {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.cl-inventory .cl-share.cl-copied::after {
	content: " ✓";
}

/* ── Mobile filter drawer ──────────────────────────────────────────────── */
html.cl-no-scroll,
html.cl-no-scroll body {
	overflow: hidden; /* plain overflow:hidden — no clip */
}
@media (max-width: 1024px) {
	.cl-inventory .stm-inventory-pro-sidebar {
		display: none;
	}
	.cl-inventory.cl-filter-open .stm-inventory-pro-sidebar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000;
		background: #ffffff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 32px;
	}
	/* Pro CSS parks .stm-inventory-pro-filter off-canvas on mobile waiting for
	   the legacy JS (removed on this page) to slide it in — pin it back. */
	.cl-inventory.cl-filter-open .stm-inventory-pro-filter {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.cl-inventory.cl-filter-open .stm-inventory-pro-filter-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		background: #ffffff;
		z-index: 2;
		padding: 14px 0;
		border-bottom: 1px solid #e2e6ea;
		margin-bottom: 12px;
	}
	/* [LD] 2026-07-31 (QA G-04): this was locked to 24x24, which is the size of
	   the drawn X and not a size a thumb can hit. The button is now 44x44 and
	   the X is drawn at its old 18px across, centred, so the icon looks exactly
	   as it did and only the target grew. The strokes are sized explicitly
	   rather than inset from the edges, because insets tie the icon to the
	   button and that is what made this hard to fix in the first place. */
	.cl-inventory.cl-filter-open .filter-close {
		width: 44px !important;
		min-width: 44px;
		max-width: 44px;
		height: 44px !important;
		flex: 0 0 44px;
		position: relative;
		border: 0 !important;
		background: none !important;
	}
	.cl-inventory.cl-filter-open .filter-close::before,
	.cl-inventory.cl-filter-open .filter-close::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		margin-left: -9px;
		height: 2px;
		background: #332c2b;
	}
	.cl-inventory.cl-filter-open .filter-close::before {
		transform: rotate(45deg);
	}
	.cl-inventory.cl-filter-open .filter-close::after {
		transform: rotate(-45deg);
	}
	.cl-inventory.cl-filter-open .filter-reset {
		color: var(--cl-accent);
		font-weight: 600;
	}
}

/* ── Pagination: mobile "Page X of Y" without :has() ───────────────────── */
.cl-pagination .mgc-pg-mobile {
	display: none;
}
@media (max-width: 600px) {
	.cl-pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
	}
	.cl-pagination ul.page-numbers {
		display: contents;
	}
	.cl-pagination ul.page-numbers li {
		display: none;
	}
	.cl-pagination ul.page-numbers li.cl-pg-prev {
		display: block;
		order: 1;
	}
	.cl-pagination ul.page-numbers li.cl-pg-next {
		display: block;
		order: 3;
	}
	.cl-pagination .mgc-pg-mobile {
		display: block;
		order: 2;
		font-size: 15px;
		font-weight: 700;
		color: #332c2b;
		white-space: nowrap;
	}
}

/* ── Empty results icon spacing tweak (component CSS is re-enqueued) ───── */
.cl-inventory .stm-listings-empty {
	padding: 40px 0;
}

/* ── Mobile 4:3 listing-card image ratio (2026-07-24 [ENG2] platform
   consolidation — moved here from mu-plugins/mgc-inventory-image-ratio.php;
   pages without this stylesheet get the same rules inline from
   cl-engine/media/uploads.php). Motors pins card photos to a 200px landscape
   strip on phones, beheading portrait cart photos — this gives the image area
   a 4:3 ratio box that scales with card width instead. ───────────────────── */
@media (max-width: 767px) {
	.stm-directory-grid-loop .image .image-inner,
	.mvl-card-skins .image .image-inner {
		height: auto !important;
		aspect-ratio: 4/3 !important;
	}
	.stm-directory-grid-loop .image .image-inner .interactive-hoverable,
	.stm-directory-grid-loop .image .image-inner .hoverable-wrap,
	.stm-directory-grid-loop .image .image-inner .hoverable-unit,
	.stm-directory-grid-loop .image .image-inner .thumb,
	.stm-directory-grid-loop .image .image-inner > a,
	.mvl-card-skins .image .image-inner .interactive-hoverable,
	.mvl-card-skins .image .image-inner .hoverable-wrap,
	.mvl-card-skins .image .image-inner .hoverable-unit,
	.mvl-card-skins .image .image-inner .thumb,
	.mvl-card-skins .image .image-inner > a {
		height: 100% !important;
	}
	.stm-directory-grid-loop .image .image-inner img,
	.mvl-card-skins .image .image-inner img {
		height: 100% !important;
		width: 100% !important;
		object-fit: cover !important;
	}
}

/* Parity round 2 (2026-07-24): on phones legacy keeps the (emptied) sidebar
   wrapper in flow — its padding leaves a 30px block between the per-page row
   and the footer. The CL drawer removes the sidebar from flow entirely, so
   reproduce that spacing on the per-page row. */
@media (max-width: 1024px) {
	.cl-inventory .stm-inventory-items-per-page-wrap {
		margin-bottom: 30px;
	}
}

/* ── List-card image column: full card height in pure CSS (card-fix,
   2026-07-24). Problem: the ported legacy list skin pins .image-inner at
   260px; when the content column runs taller (long title, sale+savings,
   promo, sold badge) the photo stopped 30-40px short of the card bottom, and
   the child theme's window-load JS (mgc-inventory-resize-fix.js, now
   dequeued on this page — see cl-engine/inventory/frontend.php) re-measured
   the card and wrote inline heights AFTER first paint — the visible "image
   comes down" jump. Fix: the card row already lays out with flexbox
   (loop-list.css); stretch both columns and paint the media ABSOLUTELY
   inside the (position:relative) .image box so the photo can never
   contribute intrinsic height (a width:100% placeholder img would otherwise
   inflate the row beyond the legacy 264px card) and always fills the column
   from the very first paint. No JS, no listeners, CLS 0. The 1/N photo chip
   (absolute bottom-left) and the hoverable progress strip (absolute
   bottom:0) already overlay the image box and simply follow its height.
   Desktop only: below 768px the card stacks and the existing 4:3
   aspect-ratio block above reserves the image box. No :has()/color-mix()/
   overflow:clip. ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	/* Reproduce the exact legacy final geometry. Parity round 3 (2026-07-25):
	   steady-state card-pitch measurement against the live legacy render
	   (18 placeholder cards, 1440px) showed EVERY legacy list card lands
	   exactly 2px taller than the round-2 constants — pitch 282/314 vs our
	   280/312 (the legacy JS's border-box-into-content-box overshoot applies
	   one more time than round 2 accounted for). Empirical legacy geometry:
	   card = max(content-height + 6px, 266px). The content column's 4px
	   bottom margin supplies the +4 inside the 1px borders; the floor is
	   266px. With these two constants the per-card pitch matches legacy
	   exactly (282px standard, 314px sale/savings). */
	.cl-inventory .mvl-list-card-skin.skin_1.listing-list-loop {
		min-height: 266px;
	}
	.cl-inventory .mvl-list-card-skin.skin_1 .mvl-list-content {
		margin-bottom: 4px;
	}
	.cl-inventory .mvl-list-card-skin.skin_1 .skin-list-gallery {
		align-self: stretch;
	}
	/* The media column box: full column height, min 260px exactly like the
	   legacy minimum card height; loop-list already sets position:relative. */
	.cl-inventory .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image {
		height: 100%;
		min-height: 260px;
		margin-bottom: 0; /* loop-list's 20px bottom margin would overflow a full-height column */
	}
	/* Absolute fill: the media never adds intrinsic height (no feedback into
	   the row height — the content column alone sets it, as legacy did), and
	   it is full-bleed from first paint. The !important also outranks any
	   stray element.style height a cached copy of the old JS might write. */
	.cl-inventory .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: auto !important;
	}
	.cl-inventory .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable {
		height: 100%;
		min-height: 0;
	}
	/* Placeholder (no-photo) card: the bare img fills the same box. */
	.cl-inventory .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner > img.img-responsive {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ── Option availability (filters-final2, 2026-07-24) ──────────────────────
   Options with no remaining listings in the current filtered set are hidden
   outright (factory-direct behavior — never greyed placeholders), and a group
   whose every option is hidden collapses entirely, heading included. Applied
   server-side on first paint (unavailable options are not rendered at all)
   and by cl-inventory.js after every AJAX response (labels/groups toggle
   these classes as availability changes). Plain display:none — no :has(). */
.cl-filter-form .stm-filter-pro-options-list label.cl-unavailable {
	display: none !important;
}
.cl-filter-form .stm-filter-item.cl-group-empty {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   APPLIED-FILTER CHIP ROW (2026-07-31, owner: "add back the inventory
   filters up at the top with the black pill").

   Supersedes the 2026-07-29 treatment, which pulled this row OUT of flow
   (position:absolute, tags cloud collapsed to nothing) to answer "when I
   use the filters it creates a gap on the top of the listings… I want
   the inventory to remain stationary". That approach is no longer
   available: the row now carries chips, and chips floated over the H1
   would sit on top of the heading text.

   2026-07-31 (owner, second pass): reserving the row's height permanently
   was the wrong trade. With no filters applied it left a tall empty band
   between the "Golf Carts for Sale" heading and the sort bar on every
   single visit, which is what a shopper sees FIRST and almost always
   sees — the owner sent a side by side against the live site, where the
   sort bar sits directly under the heading, and said "it just stays with
   a big gap". Paying that cost on 100% of page views to avoid a one time
   shift on the minority of visits that filter is backwards.

   So the row now collapses to nothing when it is empty and takes its
   natural height when chips are present, exactly like the live site. The
   original stationary complaint was about a gap that opened ABOVE the
   listings and stayed open; a row that grows to hold the chips a shopper
   just chose is different — it is the direct, expected result of their
   own click, and the live reference site behaves the same way.

   Reset all still uses visibility rather than display so it cannot change
   the row's height on its own once the row is showing.
   ═══════════════════════════════════════════════════════════════════ */
.stm-inventory-pro .search-results-actions,
.search-results-actions {
	position: relative;
}
.search-results-actions .search-results-actions-result {
	/* Two classes deep, so this also beats the legacy
	   `@media (max-width:767px) { .search-results-actions-result{display:none} }`
	   without an !important. Keeping the chips on mobile is intentional: the
	   sidebar that shows selected state is a CLOSED DRAWER on a phone, so the
	   chips are the only visible evidence of what is currently applied. */
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	width: auto;
}
/* Empty state: out of the flow entirely, so the sort bar sits directly under
   the heading. min-height:0 was not enough on its own — the hidden Reset all
   link still contributed its own line box and left a 31px band behind.
   cl-has-filters is set server-side on first paint and by cl-inventory.js
   after every AJAX response, so this tracks the real chip count. */
.search-results-actions .search-results-actions-result:not(.cl-has-filters) {
	display: none;
}
.search-results-actions .search-results-actions-result.cl-has-filters {
	min-height: 40px;
	margin-bottom: 12px;
}
.search-results-actions .search-results-actions-result .search-results-actions-tags-cloud {
	flex: 1 1 auto;
	min-width: 0;
}
.search-results-actions .search-results-actions-result .stm-filter-chosen-units {
	margin: 0;
}
.search-results-actions .search-results-actions-result .stm-filter-chosen-units-list {
	/* Wrap rather than overflow: a shopper stacking five makes plus a price
	   band would otherwise push Reset all off the right edge. */
	flex-wrap: wrap;
}
.search-results-actions .search-results-actions-result .search-results-actions-btn-wrapp {
	flex: 0 0 auto;
	visibility: hidden;
}
.search-results-actions .search-results-actions-result.cl-has-filters .search-results-actions-btn-wrapp {
	visibility: visible;
}
.search-results-actions .search-results-actions-result .search-results-actions-reset-all {
	margin: 0 !important;
	padding: 0 !important;
}
/* The chip IS the <li>. The <button> inside it exists only so the × is
   reachable by keyboard and announced to a screen reader, and must not paint
   anything of its own. The legacy pill rules target
   `li .stm-filter-chosen-units-list-value` and `li i` as DESCENDANTS, so they
   still reach through this wrapper untouched. */
.search-results-actions .stm-filter-chosen-units-list li .cl-chosen-badge__btn {
	display: inline-flex;
	align-items: center;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0;
	height: auto;
	width: auto;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-transform: none;
	cursor: pointer;
}
.search-results-actions .stm-filter-chosen-units-list li .cl-chosen-badge__btn:focus-visible {
	/* White ring: the pill it sits on is near-black, so the usual dark focus
	   ring would be invisible exactly where it is needed. */
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Mobile filter drawer (2026-07-29, owner): the drawer header already has
   its own sticky Reset All (top, .stm-inventory-pro-filter-mobile-header),
   so the legacy sticky bottom footer duplicated it. Hide the bottom one
   below the 1024px drawer breakpoint; desktop sidebar keeps it. */
@media (max-width: 1023px) {
	.stm-inventory-pro-filter .stm-inventory-pro-filter-footer {
		display: none !important;
	}
}

/* Card image off-center fix (2026-07-29, owner: "images are off centered on
   mobile"). The legacy list skin fixes .interactive-hoverable at width:380px
   (the DESKTOP image-column width) and un-caps its img max-width. On mobile
   the card is ~312px wide, so every image painted 380px and clipped 68px off
   its right side — placeholders AND real photos rendered left-shifted. Make
   the hoverable fluid and center-crop the img with object-fit; on desktop
   the column is exactly 380px anyway, so 100% is pixel-identical there. */
.mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable {
	width: 100%;
	height: 100%;
	min-height: 0;
}
.mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable .hoverable-wrap,
.mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable .hoverable-unit,
.mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable .hoverable-unit .thumb {
	height: 100%;
}
.mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

/* Call Now card CTA (2026-07-29, owner: "for conversions"). Mobile-only:
   under 769px the action row becomes a side-by-side pair — Call Now as the
   outlined secondary, Get My Quote keeping the solid red primary. Desktop
   is unchanged (call paths live in the actions popup there). */
/* Call Now card CTA (2026-07-29, owner: "for conversions"), take 2 after
   the cascade fight: assets/css/mgc-listing-price.css paints every list-card
   action button solid red at 0,5,1 (a.mvl-action-button:link/:visited) with
   min-width:100% !important, and it PRINTS AFTER this sheet — so these rules
   run at 0,6,1 (tripled class) and the red rule itself now carries
   :not(.mgc-card-call). Mobile only: side-by-side pair, Call Now outlined,
   Get My Quote stays the solid red primary. Desktop unchanged (call paths
   live in the actions popup there). */
.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call {
	display: none !important;
}
@media (max-width: 768px) {
	/* Stacked (2026-07-29, owner: side-by-side wrapped both labels and "doesn't
	   really look very good — can you stack them instead?"). Get My Quote stays
	   on top as the primary, Call Now full-width beneath it. */
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px;
	}
	/* 0,7,1: the price-css red rule gained a class of specificity from its
	   :not(.mgc-card-call) guard (0,6,1) and prints after this sheet, so the
	   sizing pair sits one level above it. */
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call.mgc-card-call,
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-quote-link.mgc-quote-link.mgc-quote-link.mgc-quote-link {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-quote-link.mgc-quote-link.mgc-quote-link.mgc-quote-link {
		order: 1;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call.mgc-card-call {
		order: 2;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 10px !important;
		background: #fff !important;
		color: var(--cl-red, #DD0000) !important;
		border: 2px solid var(--cl-red, #DD0000) !important;
		border-radius: 4px !important;
		box-shadow: none !important;
		text-decoration: none !important;
		/* Same face as Get My Quote: the theme's font pass puts the SITE
		   display font (var(--cl-font)) on .mgc-quote-link, overriding the
		   price-css Montserrat — so the pair must read --cl-font too
		   (2026-07-29, owner: "the fonts dont match"). */
		font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
		font-weight: 800 !important;
		font-size: 15px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call:hover {
		background: #fdeaea !important;
		color: var(--cl-red, #DD0000) !important;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call .label {
		color: var(--cl-red, #DD0000) !important;
		font-weight: 800 !important;
		/* Match Get My Quote's label: the theme font pass puts the SITE font
		   on the quote label; a Montserrat pass was catching this one
		   (2026-07-29, owner: "the fonts dont match"). */
		font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	}
	.mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner a.mgc-card-call.mgc-card-call.mgc-card-call svg {
		width: 16px;
		height: 16px;
		flex: 0 0 auto;
	}
}

/* ── GRID-view Call Now (bug fix 2026-07-29) ──────────────────────────────────
   The Call Now setting only ever rendered on LIST cards; grid cards — the
   default view and what mobile visitors see — showed nothing. The grid button
   is a .mvl-view-listing row under Get My Quote. Same contract as the list
   pair: desktop hidden (call paths live in the actions popup there), mobile
   an OUTLINED white/red secondary so the solid red quote stays the primary.
   Specificity: mgc-listing-price.css paints every
   `.mvl-view-listing a.mvl_view_listing_link` solid red at (0,2,1)!important
   and prints AFTER this sheet, so these rules stack .mgc-card-call to (0,5,1)
   to win regardless of order. */
.mvl-view-listing a.mvl_view_listing_link.mgc-card-call.mgc-card-call.mgc-card-call {
	display: none !important;
}
@media (max-width: 768px) {
	.mvl-view-listing a.mvl_view_listing_link.mgc-card-call.mgc-card-call.mgc-card-call {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 10px !important;
		background: #fff !important;
		background-color: #fff !important;
		color: var(--cl-red, #DD0000) !important;
		border: 2px solid var(--cl-red, #DD0000) !important;
		border-radius: 4px !important;
	}
	.mvl-view-listing a.mvl_view_listing_link.mgc-card-call.mgc-card-call.mgc-card-call:hover {
		background: #fdeaea !important;
		background-color: #fdeaea !important;
		color: var(--cl-red, #DD0000) !important;
	}
	.mvl-view-listing a.mvl_view_listing_link.mgc-card-call.mgc-card-call.mgc-card-call .label {
		color: var(--cl-red, #DD0000) !important;
		font-weight: 800 !important;
		/* Same font contract as the list-view button (owner: "the fonts dont
		   match"): the site font variable, never a stray Montserrat pass. */
		font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	}
	.mvl-view-listing a.mvl_view_listing_link.mgc-card-call.mgc-card-call.mgc-card-call svg {
		width: 16px;
		height: 16px;
		flex: 0 0 auto;
	}
	/* Tighten the stack: quote row directly above gets a small gap. */
	.mgc-card-call-row {
		margin-top: 8px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD PHOTO: SWIPE AFFORDANCE (2026-08-14)

   Owner: "I just dont know that people will know to swipe on mobile ... The
   little line is tiny." He is right, and the reason is measurable: the legacy
   indicator is a 3px bar pinned to the bottom edge of the photo. At that size
   it reads as a decorative underline, not as "there are more photos". The
   "1/13" badge already tells a shopper more photos exist; what was missing was
   any hint of how to reach them — and this audience is not one to rely on
   swipe being assumed knowledge.

   Two changes, both owner-specified: thicken the bar rather than replace it
   with dots, and add arrows ONLY where they are needed. A pointer device
   already scrubs the frames on hover, so the arrows are hidden there.
   ──────────────────────────────────────────────────────────────────────────── */

/* 3px -> 5px. The legacy sheet (assets/legacy/.../hoverable-gallery.css) is a
   verbatim vendor copy and is never edited, so the height is overridden here.
   Both the track and each segment have to move or the segments float inside a
   taller track. */
/* Anchored to .interactive-hoverable, NOT to the legacy sheet's
   .stm-hoverable-interactive-galleries wrapper — that class is not in the
   ancestor chain of a v2 card (verified: indicators > interactive-hoverable >
   image-inner > skin_1 image > skin-list-gallery > mvl-card-skins), so copying
   the legacy selector matched nothing. !important because the legacy sheet is
   enqueued after this one and carries one more class. */
/* 2026-08-31: the 5px !important that stood here fed the OLD bottom-edge
   segmented bar. The console card replaced that treatment with centred pill
   dots (see the CONSOLE CARD section), and because this rule carried
   !important it was silently squashing the new dots to 5px. The console rules
   below now own indicator geometry; nothing else consumed this. */

/* Arrows — touch only. */
.cl-card-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* 44px is the accessibility floor for a touch target, and the reason the
	   button is bigger than the circle you see: the visual disc is drawn by the
	   inner span's background, so the tap area stays generous without a heavy
	   blob sitting over the photo. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 26; /* above .hoverable-indicators (25) */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cl-card-arrow--prev { left: 0; }
.cl-card-arrow--next { right: 0; }
.cl-card-arrow > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.55);
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	/* The photo behind can be light or dark; the ring keeps the disc readable
	   on both without needing a per-image treatment. */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cl-card-arrow:active > span {
	background: rgba(17, 24, 39, 0.75);
}

/* A device with a real pointer scrubs frames on hover and does not need these.
   Same test the card script uses to decide hover vs swipe, so the arrows can
   never appear on a device whose gallery is hover-driven. */
@media (hover: hover) and (pointer: fine) {
	.cl-card-arrow { display: none; }
}

/* ── Make logo on the archive card (2026-08-21) ───────────────────────────── */
/*
 * Owner ask: "add an image per make so that the listings display the makes
 * image like this" — the reference is sincitygolfcars.com/inventory/, where a
 * manufacturer lockup sits between the spec row and the quote button.
 *
 * The row is only IN THE DOM when the make has a logo picked (Cart Launch ->
 * Make Logos), so none of this can add space to a card that has none: a fleet
 * site that sets no logos renders byte-identical to before this shipped.
 *
 * Sized by HEIGHT, width left to the image. Manufacturer artwork arrives as
 * everything from a wide wordmark to a square badge, and pinning the WIDTH
 * would draw the square marks the height of a postage stamp while the wordmarks
 * overflow. max-width is the backstop for a very wide wordmark in a grid card.
 *
 * 16px horizontal padding matches .mvl-card-listing-data above it in both
 * skins (list/skin_1.css line ~297, grid/skin_1.css line ~285), so the logo
 * lines up with the spec row rather than floating out on its own margin.
 */
.cl-make-logo-row {
	display: flex;
	align-items: center;
	padding: 0 16px;
	margin: 0 0 14px;
}

.cl-make-logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.cl-make-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* For the occasional logo shipped as a padded square JPG rather than a
	   trimmed transparent PNG — contain keeps its proportions inside the box. */
	object-fit: contain;
}

.cl-make-logo-row--list .cl-make-logo__img {
	max-height: 38px;
	max-width: 200px;
}

.cl-make-logo-row--grid .cl-make-logo__img {
	max-height: 30px;
	max-width: 150px;
}

/* The grid card's spec row carries no bottom rule of its own above the price
   block, so the logo needs a little air on that side to avoid sitting on the
   price card's top edge. */
.cl-make-logo-row--grid {
	margin-top: 4px;
}

@media (max-width: 767px) {
	.cl-make-logo-row {
		margin-bottom: 10px;
	}

	.cl-make-logo-row--list .cl-make-logo__img {
		max-height: 32px;
		max-width: 160px;
	}
}

/* ── Full-screen inventory page (2026-08-21) ──────────────────────────────── */
/*
 * Owner ask: "a check box in the theme editor for a full screen inventory
 * listing desktop view or a contained like I have now" — then, on seeing the
 * first pass: "I want the wide to go fullscreen not contained and then style it
 * right." So this is EDGE TO EDGE, not a taller cap. The first version raised
 * the 1280px cap to 1600px, which on a 1512px laptop is a ~200px change nobody
 * reads as "full screen" — it looked broken because it was answering the wrong
 * question.
 *
 * Theme Editor -> Site -> Inventory display -> "Full-screen inventory page on
 * desktop"; cl-engine puts .cl-inv-wide on <body> for the inventory listing
 * page ONLY (owner: "this is just for the inventory listing page"), so brand,
 * location and single pages keep the boxed width.
 *
 * The site's cap is `body .container { max-width: 1280px }` in the legacy base
 * sheet. These selectors carry one class more, so they outrank it on
 * specificity and need no !important — which matters, because !important here
 * would also beat any future per-page override.
 *
 * Above 1280px only: below that the container is already fluid, so there is
 * nothing to release, and the query keeps every rule here off phones and
 * tablets rather than trusting the cap never to bite.
 */
@media (min-width: 1281px) {
	body.cl-inv-wide .container {
		max-width: none;
		/* Not zero. Content welded to the bezel reads as a rendering fault, and
		   the gutter needs to grow with the screen or a 2560px monitor shows a
		   15px margin that looks like an accident. */
		padding-left: clamp(20px, 2.5vw, 56px);
		padding-right: clamp(20px, 2.5vw, 56px);
	}

	/*
	 * THE one that made round one look like it did nothing (verified in the
	 * browser on the template site, 2026-08-21). The legacy base sheet caps TWO
	 * selectors together — `body .motors-alignwide, body .container {
	 * max-width: 1280px }` — and .motors-alignwide is the wrapper the list
	 * results actually sit in. Releasing only .container widened the page
	 * chrome while the cards stayed welded to 1280px, so the owner ticked the
	 * box, saw the cards not move and reported it broken. They were right.
	 */
	body.cl-inv-wide .motors-alignwide {
		max-width: none;
	}

	/* The filter rail is flex-basis:315px / flex-shrink:0 in the legacy sheet
	   and the results column is flex-grow:1, so releasing the container is
	   enough to make the results take every pixel that appears. The rail gets a
	   little more room on a big screen so the two columns stay in proportion
	   instead of the filters looking like a leftover strip. */
	body.cl-inv-wide .stm-inventory-pro--col-left .stm-inventory-pro-sidebar {
		flex-basis: 340px;
	}
}

/*
 * GRID VIEW re-columns as the width appears. The cards are Bootstrap-4
 * col-md-4 (flex: 0 0 33.333%; max-width: 33.333%), so three across is welded
 * in at every desktop size. Left alone, a 2560px monitor draws three ~700px
 * cards with a golf cart photo blown up in the middle of each — the layout
 * technically fills the screen and looks worse than the boxed version did.
 * Both flex-basis and max-width have to be overridden; setting one leaves the
 * other holding the old third.
 *
 * List view is deliberately untouched: a full-width list row is exactly what
 * the reference site does, and it is the view these sites ship in by default.
 */
@media (min-width: 1500px) {
	body.cl-inv-wide .stm-directory-grid-loop {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

@media (min-width: 1900px) {
	body.cl-inv-wide .stm-directory-grid-loop {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

@media (min-width: 2400px) {
	body.cl-inv-wide .stm-directory-grid-loop {
		flex: 0 0 16.6666%;
		max-width: 16.6666%;
	}
}

/* ── Full-screen LIST CARD restyle (2026-08-21 round 3) ───────────────────── */
/*
 * Owner, comparing their inventory page against a competitor's side by side:
 * "I need to style the wide one differently." Stretching the boxed card to the
 * full width does not produce the reference look — they are different card
 * designs, not one design at two widths. Of the differences on the table the
 * owner picked three: the price block moves top-right opposite the title, the
 * title goes bigger and uppercase, and the type and card scale up so nothing
 * looks marooned in the extra space. Deliberately NOT taken: the boxed
 * label-above-value spec row, and always-visible gallery arrows (this platform
 * scrubs frames on hover on a desktop and shows arrows only on touch).
 *
 * EVERY rule here is scoped to .cl-inv-wide, so a site with the checkbox off —
 * which is all of them until someone opts in — renders exactly as before. That
 * is also why this is a separate block from the layout rules above: those
 * release the width, these restyle the card that ends up inside it.
 *
 * The !importants are not decoration. style.css already lands !important on the
 * price stack (the "Stack Retail Price above Our Price" and "Our Price actually
 * smaller than the title" blocks), so re-aiming those values needs the same
 * weapon plus the extra class this selector carries.
 */
@media (min-width: 1281px) {
	/*
	 * Title left, price right, everything else full width underneath. Grid and
	 * not flex because the two top cells have to share a row while the spec
	 * row, logo and buttons span both columns — that is a grid job, and doing
	 * it with flex would mean wrapping DOM that the AJAX re-render also emits.
	 * The `> *` default means a new child added to this card later inherits
	 * full width instead of silently landing in the price column.
	 */
	/* The card is display:flex; its children were not stretching to the card's
	   full height, which is what left the gap the rule below closes. */
	body.cl-inv-wide .mvl-list-card-skin.skin_1 {
		align-items: stretch;
	}

	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mvl-list-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 32px;
		align-items: start;
		/* The card is as tall as its photo, and the content is shorter, so
		   without this the bottom of every card is dead space. space-between
		   puts the title/price row at the top, the specs in the middle and the
		   CTA on the baseline — which is also how the reference card reads.
		   align-self on the child AND align-items on the flex card: the child
		   was not stretching on its own (measured 238px inside a 342px card). */
		align-content: space-between;
		align-self: stretch;
		padding-bottom: 16px;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mvl-list-content > * {
		grid-column: 1 / -1;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mvl-list-content > .mvl_listing_title_wrapper {
		grid-column: 1;
		grid-row: 1;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mvl-list-content > .mgc-price-card--list {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		text-align: right;
	}

	/* The price stack is a column flex with align-items:flex-start !important in
	   style.css — it has to flip, or "Retail Price" and "Our Price" hug the left
	   edge of a right-hand column. */
	body.cl-inv-wide .mvl-price-list-card .mvl-price,
	body.cl-inv-wide .mvl-price-list-card .mvl-price.has-sale-price {
		align-items: flex-end !important;
	}
	body.cl-inv-wide .mgc-price-card--list .mgc-price-card__main,
	body.cl-inv-wide .mgc-price-card--list .mgc-price-card__side,
	body.cl-inv-wide .mgc-price-card--list .mgc-savings-line {
		text-align: right;
	}
	/* The monthly-payment promo sits UNDER the savings line here, not beside it,
	   so the whole right column reads as one stack: retail, price, savings,
	   payment. */
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mgc-price-card--list {
		display: block;
	}

	/* Title: uppercase and loud. 700 and not 800 — Montserrat is loaded at
	   400;600;700;900 (functions.php) and 800 would be a synthesised fake. */
	body.cl-inv-wide .mvl-list-card-skin .mvl_listing_title .car-title,
	body.cl-inv-wide .mvl-list-card-skin .car-title {
		font-size: 26px;
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.01em;
		text-transform: uppercase;
	}

	/* Price scaled to match the bigger title so the two sides of the row carry
	   equal weight. Beats the 22px !important in style.css. */
	body.cl-inv-wide .mvl-list-card-skin .mvl-price-list-card .mvl-sale-price,
	body.cl-inv-wide .mvl-list-card-skin .mvl-price-list-card .sale-price,
	body.cl-inv-wide .mvl-list-card-skin .mvl-price-list-card .mvl-normal-price:not(.has-sale-price),
	body.cl-inv-wide .mvl-list-card-skin .mvl-price-list-card .normal-price:not(.has-sale-price) {
		font-size: 27px !important;
		line-height: 1.2 !important;
	}
	body.cl-inv-wide .mvl-list-card-skin .mvl-normal-price.has-sale-price,
	body.cl-inv-wide .mvl-list-card-skin .normal-price.has-sale-price {
		font-size: 15px !important;
	}

	/* Spec row and CTA lift with everything else rather than staying at their
	   boxed-card sizes next to 26px type. */
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .mvl-card-listing-data .mvl-card-listing-data-inner li span {
		font-size: 15px;
	}
	body.cl-inv-wide .mvl-list-card-skin .mvl-action-buttons .mvl-action-buttons-inner .mvl-action-button {
		font-size: 15px;
	}
}

/*
 * The photo is a hard 380x260 in the legacy skin. At full width the content
 * column grows and the photo does not, so the card ends up as a stamp beside a
 * field of text — the "bigger cards if needed" half of the owner's answer. It
 * steps up with the same breakpoints the grid re-columns on.
 */
@media (min-width: 1500px) {
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image {
		width: 440px !important;
		max-width: 440px !important;
		min-height: 300px;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner {
		height: 300px;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable {
		min-height: 300px;
		width: 440px;
	}
}

@media (min-width: 1900px) {
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image {
		width: 500px !important;
		max-width: 500px !important;
		min-height: 340px;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner {
		height: 340px;
	}
	body.cl-inv-wide .mvl-list-card-skin.skin_1 .skin-list-gallery .skin_1.image .image-inner .interactive-hoverable {
		min-height: 340px;
		width: 500px;
	}
}

/* ---- Certified Pre-Owned badge (2026-08-24 owner ask; restyled 2026-08-26
   "the card is huge now" -> pill overlays the photo; re-anchored same day,
   owner: on mobile it hugged the card corner and "needs to be reformatted
   right to match the sold badge" -- the pill now prints INSIDE .image
   (archive-card.php shared media block), so it uses the SOLD label's own
   anchor (16px/16px within the photo) on every breakpoint, both views.
   When a SOLD/Special label is present the pill drops below it. Zero added
   card height anywhere. ---- */
.cl-cpo-row { margin: 0; }
.cl-cpo-row--media { position: absolute; top: 16px; left: 16px; z-index: 3; margin: 0; padding: 0; pointer-events: none; }
.mvl-label + .cl-cpo-row--media { top: 58px; }
.cl-cpo-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--cl-red, #c22127); color: #fff; font-weight: 800; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(10, 14, 18, 0.28); }
.cl-cpo-badge svg { width: 13px; height: 13px; flex: 0 0 auto; display: block; }

/* ============================================================================
   CONSOLE CARD — 2026-08-31 inventory rebuild (owner-directed)
   ----------------------------------------------------------------------------
   This section OWNS the archive card. It is appended last on purpose: the
   vendored Motors sheet still paints .mvl-card-skins / .skin_1 on the root, and
   equal-specificity rules later in the file win. The card markup deliberately
   drops the legacy presentational classes (.mvl-list-content, .mvl-price-list-card,
   .mvl-card-listing-data, .mvl-action-buttons, .mvl-list-card-skin) so almost
   nothing above applies — do not re-add them to archive-card.php.

   Design rules this encodes, each from an owner decision:
   - Red is the CTA colour. The savings badge is the only other red thing on the
     card, and it is a value claim, not a second action.
   - The card lift IS the hover state. No accent bar on the left edge; the edge
     marker only paints on keyboard focus, in ink.
   - The spec plate reflows on ITS OWN width via container queries, not the
     viewport, so it behaves the same whatever the dealer's sidebar is doing.
   - Mobile must fit one full listing per screen. That is why the spec row is a
     single line there and Call Now sits BESIDE Get My Quote, never under it.
   ========================================================================== */

/* THE CARD SPEAKS THE THEME-SELECTOR FONT, PERIOD (owner, 2026-08-31: "match
   the rest of the site font"). Measured on Top Carts: every card element that
   sits inside an <a> — title, specs, price, CTA label — was rendering
   hardcoded Montserrat from a legacy link rule, while the rest of the page ran
   the dealer's --cl-font (Space Grotesk there). The pin goes on the card's
   links and headings with !important because the legacy declarations carry it;
   icon glyphs are exempt (their icon font-families must survive). */
.cl-inventory .cl-card a,
.cl-inventory .cl-card h3,
.cl-inventory .cl-card .cl-card__title,
.cl-inventory .cl-card .cl-card__spec-name,
.cl-inventory .cl-card .cl-card__spec-val,
.cl-inventory .cl-card .cl-card__num,
.cl-inventory .cl-card .cl-card__savings,
.cl-inventory .cl-card .cl-card__pay-amount,
.cl-inventory .cl-card .cl-card__pay-sub,
.cl-inventory .cl-card .cl-card__cta .label {
	font-family: var(--cl-font, inherit) !important;
}
.cl-inventory .cl-card .cl-card__spec-val i,
.cl-inventory .cl-card .cl-card__cta svg { font-family: revert-layer; }
.cl-inventory .cl-card .cl-card__spec-val i[class*="cl-icons"] { font-family: 'cl-icons' !important; }
.cl-inventory .cl-card .cl-card__spec-val i[class*="fa-"] { font-family: 'Font Awesome 5 Free' !important; }
/* the site's blanket h1-h6 rule lands 900 !important on the h3 title; the
   card's scale is built on 700 */
.cl-inventory .cl-card .cl-card__title { font-weight: 700 !important; }

.cl-inventory {
	--cl-ink: #0e1013;
	--cl-ink-2: #5b626d;
	--cl-muted: #98a0aa;
	--cl-line: #e4e8ed;
	--cl-plate: #f6f8f9;
	--cl-card-r: 18px;
	--cl-gut: clamp(16px, 3vw, 40px);
}

/* ---- page shell: break out of the boxed .container ------------------------
   The wrapper chain in archive-inventory.php (mst-wrapper > container >
   page-content > elementor) is kept intact because generated CSS and Elementor
   ids key on it. Widening it here instead of deleting it gets the full-bleed
   page without touching anything that depends on those hooks. */
.cl-page-inventory #mst-wrapper .container,
.cl-page-inventory #mst-wrapper .page-content,
.cl-page-inventory #mst-wrapper .elementor .e-con {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.cl-inventory.stm-pro-layout {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 2vw, 34px);
	max-width: 1760px;
	margin: 0 auto;
	padding: 0 var(--cl-gut) 64px;
}
.cl-inventory .stm-inventory-pro-maincol { min-width: 0; order: 2; }
.cl-inventory .stm-inventory-pro-sidebar { min-width: 0; order: 1; }

/* Location (/inventory/{place}/) and brand (/inventory/make/{make}/) pages
   include archive-cards.php with NO filter sidebar, so the two-column grid
   above would seat the lone maincol in the 240-300px rail slot and crush
   every card to 300px (found 2026-08-31 verifying /inventory/texarkana/ on
   413). One column for them. They also keep the boxed .container width on
   purpose (owner 2026-08-21: wide view "is just for the inventory listing
   page"), so the full-bleed gutters + fleet max-width come off too. */
.cl-inventory--location.stm-pro-layout,
.cl-inventory--brand.stm-pro-layout {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	padding: 0 0 48px;
}

/* Sticky filter rail. top is a small gutter, NOT a header offset — the site
   header is position:relative and scrolls away (2026-08-30). max-height +
   internal scroll so a dealer with a long filter list can still reach Reset. */
@media (min-width: 992px) {
	.cl-inventory .stm-inventory-pro-sidebar {
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ---- results column -------------------------------------------------------- */
.cl-inventory .stm-isotope-sorting-list {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.2vw, 18px);
}

/* ---- the card -------------------------------------------------------------- */
.cl-inventory .cl-card {
	position: relative;
	display: grid;
	grid-template-columns: clamp(370px, 38.5%, 620px) minmax(0, 1fr) clamp(272px, 21%, 346px);
	width: 100%;
	margin: 0;
	padding: 12px;
	float: none;
	background: #fff;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-card-r);
	box-shadow: 0 1px 1px rgba(14, 16, 19, .03),
	            0 8px 14px -10px rgba(14, 16, 19, .16),
	            0 30px 56px -32px rgba(14, 16, 19, .36);
	transition: transform .3s cubic-bezier(.16, .8, .3, 1),
	            box-shadow .3s cubic-bezier(.16, .8, .3, 1),
	            border-color .22s;
}
.cl-inventory .cl-card:hover {
	transform: translateY(-5px);
	border-color: #d4dae2;
	box-shadow: 0 1px 1px rgba(14, 16, 19, .04),
	            0 14px 26px -14px rgba(14, 16, 19, .22),
	            0 52px 82px -36px rgba(14, 16, 19, .48);
}
/* Edge marker: keyboard focus only, in ink. A red bar on hover flickered down
   the whole list while scrolling and duplicated what the lift already says. */
.cl-inventory .cl-card::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 26px;
	bottom: 26px;
	width: 3px;
	border-radius: 3px;
	background: var(--cl-ink);
	opacity: 0;
	transition: opacity .18s;
}
.cl-inventory .cl-card:focus-within::before { opacity: 1; }

/* ---- media column ---------------------------------------------------------- */
.cl-inventory .cl-card__media {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	width: auto;
	float: none;
}
.cl-inventory .cl-card__media .skin_1.image {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
	min-height: 0;
	width: 100%;
	background: #e7eaee;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(14, 16, 19, .07);
}
/* Above the three-column breakpoint the photo fills the card's full height, so
   its top and bottom gutters always match. Below it the card stacks and the
   photo returns to a locked 4:3. */
@media (min-width: 1341px) {
	.cl-inventory .cl-card__media .skin_1.image { flex: 1 1 auto; }
}
/* .hoverable-unit is deliberately LEFT ALONE. Legacy makes the units static
   flex:1 siblings — they are the hover HIT ZONES that scrub the photo, one
   strip per frame. Forcing them absolute stacks them and only the last one
   stays hoverable, which silently kills the photo scrub on desktop. */
.cl-inventory .cl-card__media .image-inner,
.cl-inventory .cl-card__media .interactive-hoverable,
.cl-inventory .cl-card__media .thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
/* SPECIFICITY NOTE — hoverable-gallery.css and base-desktop.css are enqueued
   AFTER this file (verified in the rendered <head>: cl-inventory.css is sheet
   14, hoverable-gallery.css is 30). So a tie loses here, and every rule that
   re-aims a legacy declaration below is written LONGER than the legacy one on
   purpose. Do not "simplify" these selectors — they will silently stop
   applying, and the symptom is a card full of grey boxes. */
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-wrap { bottom: 0; }
/* Legacy parks .thumb at z-index:-2, which paints it BEHIND the photo frame's
   own background — with a background on .image that is a grey box and no photo.
   Lift it back into flow; legacy still owns the opacity swap between frames. */
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-wrap .hoverable-unit .thumb,
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-wrap .hoverable-unit.active .thumb { z-index: 1; }
.cl-inventory .cl-card .cl-card__media .interactive-hoverable { min-height: 0; }
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-unit .thumb img.img-responsive,
.cl-inventory .cl-card .cl-card__media img.img-responsive {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .85s cubic-bezier(.16, .8, .28, 1);
}
.cl-inventory .cl-card:hover .hoverable-unit.active img.img-responsive { transform: scale(1.05); }

/* Condition / Special / Sold pills — the legacy anchors are scoped to
   .mvl-list-card-skin, which this card no longer carries. */
.cl-inventory .cl-card__media .mvl-label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	margin: 0;
}
.cl-inventory .cl-card__media .cl-cpo-row--media { position: absolute; top: 12px; left: 12px; z-index: 4; }
.cl-inventory .cl-card__media .mvl-label + .cl-cpo-row--media { left: auto; right: 12px; }

/* Photo count, bottom-left over the image. */
.cl-inventory .cl-card__media .mvl-car-medias {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 4;
}
.cl-inventory .cl-card__media .stm-listing-media-unit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px;
	border-radius: 8px;
	background: rgba(14, 16, 19, .52);
	backdrop-filter: blur(12px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

/* Frame markers: dots, centred. Legacy paints these as a segmented accent bar
   across the bottom of the photo, which reads as a loading bar. */
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-indicators {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 5;
	width: auto;
	height: auto;
	padding: 7px 10px;
	border-radius: 999px;
	background: rgba(14, 16, 19, .42);
	backdrop-filter: blur(10px);
}
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-indicators {
	height: auto;
}
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-indicators .indicator {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	transition: .22s;
	cursor: pointer;
}
.cl-inventory .cl-card .cl-card__media .interactive-hoverable .hoverable-indicators .indicator.active {
	width: 20px;
	border-radius: 3px;
	background: #fff;
}

/* Frame arrows — exact port of the mockup's .arw block. White 40px disc,
   hidden at rest on pointer devices and faded/scaled in when the CARD is
   hovered (not the arrow); always visible on touch, where there is no hover
   to reveal them. The base .cl-card-arrow rules above still describe the OLD
   dark-disc touch arrows and are fully re-aimed here at higher specificity —
   including their hover:hover display:none, which would otherwise remove the
   arrows from desktop entirely. */
.cl-inventory .cl-card .cl-card__media .cl-card-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(.9);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	color: var(--cl-ink);
	z-index: 5;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity .2s, transform .2s, background .16s;
	box-shadow: 0 3px 14px -4px rgba(14, 16, 19, .5);
	cursor: pointer;
}
.cl-inventory .cl-card:hover .cl-card__media .cl-card-arrow {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}
.cl-inventory .cl-card .cl-card__media .cl-card-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}
.cl-inventory .cl-card .cl-card__media .cl-card-arrow--prev { left: 12px; }
.cl-inventory .cl-card .cl-card__media .cl-card-arrow--next { right: 12px; }
@media (hover: hover) and (pointer: fine) {
	.cl-inventory .cl-card .cl-card__media .cl-card-arrow { display: grid; }
}
@media (hover: none) {
	.cl-inventory .cl-card .cl-card__media .cl-card-arrow {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* Badge pills over the photo — the mockup's .t geometry: 27px tall, 8px radius,
   10.5px/800 wide-tracked caps, soft drop. Colour stays with the legacy rules
   (Special = brand red, Sold = its own label) — only the shape is re-aimed. */
/* The pill geometry sits on .mvl-label itself, NOT its span: style.css paints
   the Special/Sold background on the PARENT with !important, so styling the
   span as the pill drew a naked span floating on a coloured rectangle. */
.cl-inventory .cl-card .cl-card__media .mvl-label {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 27px;
	padding: 0 12px;
	border-radius: 8px;
	line-height: 1;
	box-shadow: 0 2px 8px -2px rgba(14, 16, 19, .4);
}
.cl-inventory .cl-card .cl-card__media .mvl-label span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	color: inherit;
}
.cl-inventory .cl-card .cl-card__media .mvl-label span i { font-size: 11px; margin: 0; }

/* ---- info column ----------------------------------------------------------- */
.cl-inventory .cl-card__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	container-type: inline-size;
	container-name: clinfo;
	padding: clamp(22px, 2vw, 32px) clamp(24px, 2.4vw, 42px);
}
.cl-inventory .cl-card__titlerow { margin: auto 0; }
.cl-inventory .cl-card__titlerow-inner { display: flex; align-items: flex-start; gap: 12px; }
.cl-inventory .cl-card__title-link { flex: 1 1 auto; min-width: 0; text-decoration: none; }
.cl-inventory .cl-card .cl-card__titlerow .cl-card__title {
	margin: 0;
	font-size: clamp(24px, 2vw, 35px);
	/* 700, not the mockup's 760. Montserrat is loaded at 400;600;700;900
	   (functions.php), so anything over 700 snaps to 900 and the title comes out
	   noticeably blockier than the comp. */
	font-weight: 700;
	letter-spacing: -.044em;
	line-height: 1.04;
	color: var(--cl-ink);
}
.cl-inventory .cl-card__title-link:hover .cl-card__title { color: var(--cl-accent); }
.cl-inventory .cl-card__sub {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 400;
	color: #79818c;
}

/* Spec plate. Columns can never squeeze below their own text, and the plate
   reflows 4-up -> 2x2 -> stacked on ITS OWN width. */
.cl-inventory .cl-card__specs-link { display: block; text-decoration: none; }
.cl-inventory .cl-card__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(max-content, 1fr));
	margin: clamp(22px, 2vw, 30px) 0 0;
	padding: 0;
	list-style: none;
	background: var(--cl-plate);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(14, 16, 19, .045);
}
.cl-inventory .cl-card__specs li {
	display: block;
	margin: 0;
	padding: 16px 0 15px 18px;
	white-space: nowrap;
}
.cl-inventory .cl-card__specs li + li { border-left: 1px solid #e6eaee; }
.cl-inventory .cl-card__spec-name {
	display: block;
	margin-bottom: 7px;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--cl-muted);
}
.cl-inventory .cl-card__spec-val {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.024em;
	color: var(--cl-ink);
}
/* Grey, not accent. These are icon-font glyphs the legacy sheet paints in the
   brand colour; on this card red belongs to the CTA and nothing else. */
.cl-inventory .cl-card .cl-card__specs .cl-card__spec-val i {
	color: #b3bac2;
	flex: 0 0 auto;
	font-size: 15px;
}
/* Year duplicates the title on a phone, where they sit ~40px apart. */
@media (max-width: 760px) {
	.cl-inventory .cl-card__specs .cl-card__spec--year { display: none; }
}
/* 4-up while it fits, then 2x2. It stays a PLATE at every desktop width — the
   single inline line is a PHONE treatment only (see the 760px block). Getting
   this wrong once already made a 1456px desktop render the phone spec row,
   which is what made the built page look nothing like the mockup. */
@container clinfo (max-width: 620px) {
	.cl-inventory .cl-card__specs { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
	.cl-inventory .cl-card__specs li:nth-child(3) { border-left: 0; }
	.cl-inventory .cl-card__specs li:nth-child(n+3) { border-top: 1px solid #e6eaee; }
}
@container clinfo (max-width: 330px) {
	.cl-inventory .cl-card__specs { grid-template-columns: minmax(0, 1fr); }
	.cl-inventory .cl-card__specs li + li { border-left: 0; border-top: 1px solid #e6eaee; }
	.cl-inventory .cl-card__specs li { padding: 11px 0 10px 13px; }
}

.cl-inventory .cl-card__makelogo { margin-top: 14px; }

/* Stock line. Dealer LOCATION is deliberately NOT on the card (2026-08-30):
   carts move between lots, so printing the lot reads as a hard constraint the
   buyer must accept and lets them disqualify themselves before the dealer ever
   gets the lead. It stays on the listing detail page. */
.cl-inventory .cl-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #a7aeb7;
}

/* ---- money column ---------------------------------------------------------- */
.cl-inventory .cl-card__money {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	float: none;
	background: #f5f7f9;
	border-radius: 13px;
	padding: clamp(19px, 1.7vw, 30px) clamp(18px, 1.65vw, 26px);
	box-shadow: inset 0 0 0 1px rgba(14, 16, 19, .045);
}
.cl-inventory .cl-card__pricebox { display: block; }
.cl-inventory .cl-card__lbl {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--cl-muted);
}
/* style.css prints "Our Price: " / "Retail Price: " as ::before content on
   every price node, driven by these two custom properties. This card draws its
   own eyebrow label above a large bare number instead — a prefix on the same
   line would say it twice and halve the size of the figure. Blanking the
   variables is the supported way off; the ::before rules are !important. */
.cl-inventory .cl-card { --cl-price-ours: ""; --cl-price-retail: ""; }
.cl-inventory .cl-card__price { display: block; text-decoration: none; }
.cl-inventory .cl-card__pricestack { margin: 0; }
.cl-inventory .cl-card__price .cl-card__num--now {
	font-size: clamp(31px, 2.5vw, 42px);   /* one notch under the comp — owner, third pass: "still so huge" */
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .97;
	margin-top: 11px;
	color: var(--cl-ink);
}
/* Struck retail sits ABOVE the live number, small — it is context, not the
   price (owner 2026-08-31: "sale price then our price"; the orders below
   used to contradict this comment and painted it underneath). */
.cl-inventory .cl-card__price .cl-card__num--was {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--cl-muted);
	text-decoration: line-through;
	margin-top: 11px;
	order: 1;
}
.cl-inventory .cl-card__pricestack--sale {
	display: flex;
	flex-direction: column;
}
.cl-inventory .cl-card__pricestack--sale .cl-card__num--now {
	order: 2;
	font-size: clamp(31px, 2.5vw, 42px);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .97;
	margin-top: 3px;
	color: var(--cl-ink);
}
.cl-inventory .cl-card__price .cl-card__num--cfp .cl-cfp-text {
	font-size: clamp(20px, 1.5vw, 26px);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--cl-ink);
}
.cl-inventory .cl-card__savings {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--cl-accent);
	color: var(--cl-btn-ink, #fff);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cl-inventory .cl-card__pay {
	display: block;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e2e7ec;
	text-decoration: none;
}
.cl-inventory .cl-card__pay .cl-card__pay-amount {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: clamp(28px, 2.3vw, 40px);   /* back to the v6 comp's weight — owner 2026-08-31: "payment bigger like the original v6 console" */
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1;
	color: var(--cl-ink);
}
.cl-inventory .cl-card__pay .cl-card__pay-per { font-size: .6em; font-weight: 700; }
.cl-inventory .cl-card__pay .cl-card__pay-info {
	width: 16px; height: 16px; margin-left: 4px; padding: 0;
	border: 0; border-radius: 50%;
	background: #dfe4e9; color: #5b626d;
	font-size: 10px; font-weight: 800; line-height: 16px;
	align-self: center; cursor: pointer;
}
.cl-inventory .cl-card__pay .cl-card__pay-sub {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--cl-muted);
}

/* ---- the one call to action ------------------------------------------------ */
.cl-inventory .cl-card__ctas { display: contents; }
.cl-inventory .cl-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 60px;
	margin-top: 19px;
	padding: 0 20px;
	border-radius: 11px;
	font-size: 16px;
	font-weight: 750;
	letter-spacing: -.012em;
	text-align: center;
	text-decoration: none;
	transition: filter .16s, transform .16s;
}
.cl-inventory .cl-card__cta--quote {
	background: var(--cl-accent);
	/* both wired to the Theme Editor (owner, 2026-08-31): label follows the
	   Button-text-color setting via --cl-btn-ink, glow follows the brand color
	   via the engine's precomputed --cl-accent-rgb triplet */
	color: var(--cl-btn-ink, #fff);
	box-shadow: 0 1px 1px rgba(14, 16, 19, .08),
	            0 12px 26px -11px rgba(var(--cl-accent-rgb, 208, 35, 41), .85);
}
.cl-inventory .cl-card__cta--quote:hover { filter: brightness(.92); transform: translateY(-1px); color: var(--cl-btn-ink, #fff); }
.cl-inventory .cl-card__cta-arrow { width: 16px; height: 16px; transition: transform .28s cubic-bezier(.16, .8, .3, 1); }
.cl-inventory .cl-card:hover .cl-card__cta-arrow { transform: translateX(5px); }
/* Call Now is opt-in and mobile-only. */
.cl-inventory .cl-card__cta--call { display: none; }
.cl-inventory .cl-card__cta--call svg { width: 17px; height: 17px; }

/* ---- sold ------------------------------------------------------------------
   The CTA stays full red on a sold unit (owner, 2026-08-31: "I dont want the
   sold units to gray out the get my quote"). A sold-cart quote is still a real
   lead — the sales flow calls them back and redirects to the next unit, and
   the detail page already reframes its own CTA for the sold state. The SOLD
   photo badge carries the status; the button keeps selling. */

/* ---- stacked layout (no room for three columns) ---------------------------- */
@media (max-width: 1340px) {
	.cl-inventory .cl-card { grid-template-columns: 340px minmax(0, 1fr); }
	.cl-inventory .cl-card__money { grid-column: 1 / -1; margin-top: 12px; }
}
@media (max-width: 991px) {
	.cl-inventory.stm-pro-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- phone ----------------------------------------------------------------- */
@media (max-width: 760px) {
	.cl-inventory .cl-card {
		grid-template-columns: 1fr;
		padding: 9px;
		border-radius: 16px;
	}
	.cl-inventory .cl-card::before { display: none; }
	.cl-inventory .cl-card:hover { transform: none; }
	.cl-inventory .cl-card__media .skin_1.image { aspect-ratio: 3 / 2; }
	.cl-inventory .cl-card .cl-card__media .cl-card-arrow { width: 36px; height: 36px; }
	.cl-inventory .cl-card .cl-card__media .mvl-label { height: 25px; padding: 0 10px; }
	.cl-inventory .cl-card .cl-card__media .mvl-label span { font-size: 10px; }

	/* THE COMP'S MOBILE ORDER is photo, title, spec line, price plate, stock,
	   button — but stock lives in the info column and the plate in the money
	   column, so both wrappers dissolve (display:contents) and each child takes
	   an explicit order. Wrapper padding moves onto the children for the same
	   reason. */
	.cl-inventory .cl-card { display: flex; flex-direction: column; }
	.cl-inventory .cl-card__media { order: 0; }
	.cl-inventory .cl-card__info,
	.cl-inventory .cl-card__money { display: contents; }
	.cl-inventory .cl-card__titlerow { order: 1; padding: 15px 8px 0; }
	/* the ul rides inside its card-link wrapper — the WRAPPER is the flex
	   child, so the order goes on it (the ul's own order was a no-op and the
	   spec line rendered above the title). */
	.cl-inventory .cl-card__specs-link { order: 2; }
	.cl-inventory .cl-card__makelogo { order: 3; padding: 0 8px; }
	.cl-inventory .cl-card__pricebox { order: 4; }
	.cl-inventory .cl-card__meta { order: 5; }
	.cl-inventory .cl-card__cta--quote { order: 6; }
	.cl-inventory .cl-card__cta--call { order: 7; }
	.cl-inventory .cl-card__titlerow { margin: 0; }
	.cl-inventory .cl-card__title { font-size: 21px; letter-spacing: -.038em; line-height: 1.14; }
	.cl-inventory .cl-card__sub { display: none; }

	/* One line, not a 2x2 plate. Buys back ~70px and shortens the path to the
	   button, which is what has to stay above the fold. */
	.cl-inventory .cl-card__specs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
		margin: 9px 8px 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}
	.cl-inventory .cl-card__specs li { display: inline-flex; align-items: center; padding: 0; border: 0 !important; }
	/* the photo badge already says New/Pre-Owned; the title says the year */
	.cl-inventory .cl-card__specs .cl-card__spec--cond { display: none; }
	.cl-inventory .cl-card__specs .cl-card__spec--cond + li::before { display: none; }
	.cl-inventory .cl-card__specs .cl-card__spec-name { display: none; }
	.cl-inventory .cl-card__specs .cl-card__spec-val {
		font-size: 13.5px;
		font-weight: 650;
		color: var(--cl-ink-2);
		gap: 5px;
	}
	.cl-inventory .cl-card__specs li + li::before {
		content: "";
		flex: 0 0 3px;
		height: 3px;
		border-radius: 50%;
		background: #c6ccd3;
		margin: 0 9px;
	}
	.cl-inventory .cl-card .cl-card__specs .cl-card__spec-val i { font-size: 14px; }

	.cl-inventory .cl-card__meta { margin: 11px 8px 0; font-size: 10px; }

	.cl-inventory .cl-card__pricebox {
		margin: 12px 8px 0;
		padding: 13px 14px 14px;
		background: var(--cl-plate);
		border-radius: 12px;
		box-shadow: inset 0 0 0 1px rgba(14, 16, 19, .045);
	}
	/* the comp's mobile plate carries no OUR PRICE eyebrow */
	.cl-inventory .cl-card__lbl { display: none; }
	/* photo-to-title breathing room evened with the title-to-plate rhythm
	   (owner 2026-08-31: "fix the gap") — was 15px, tighter than below */
	.cl-inventory .cl-card__titlerow { padding-top: 20px; }
	.cl-inventory .cl-card__price .cl-card__num--now { font-size: 29px; margin-top: 8px; }
	.cl-inventory .cl-card__price .cl-card__num--was { font-size: 13.5px; }
	/* YOU SAVE rides to the RIGHT of the price so the plate loses a whole
	   row (owner 2026-08-31: "put the you save off to the right so the card
	   size goes down"). Payment keeps the full-width row below. */
	.cl-inventory .cl-card__pricebox { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
	.cl-inventory .cl-card__price { grid-column: 1; }
	.cl-inventory .cl-card__savings { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
	.cl-inventory .cl-card__pay { grid-column: 1 / -1; }
	.cl-inventory .cl-card__pay .cl-card__pay-amount { font-size: 26px; }
	.cl-inventory .cl-card__cta { height: 54px; margin: 12px 8px 4px; width: auto; font-size: 16px; }

	/* Call Now sits BESIDE Get My Quote — but ONLY when the dealer setting
	   renders a call button. The unconditional 1.55fr/1fr grid here was
	   reserving the call column on every card and squeezing Get My Quote to
	   ~60% width when the button did not exist. :has() gates it now, and with
	   display:contents on the wrapper the pair rides the card's own column
	   flex when there is just one button. */
	.cl-inventory .cl-card__ctas:has(.cl-card__cta--call) { display: grid; grid-template-columns: 1.55fr 1fr; gap: 9px; margin: 12px 8px 4px; order: 6; }
	.cl-inventory .cl-card__ctas:has(.cl-card__cta--call) .cl-card__cta { width: auto; min-width: 0; margin: 0; padding: 0 10px; font-size: 15px; }
	.cl-inventory .cl-card__cta--call {
		display: inline-flex;
		height: 54px;
		gap: 7px;
		background: var(--cl-ink);
		color: #fff;
	}
}

/* ---- FILTER DOCK (v6 parity, 2026-08-31) ------------------------------------
   The dock skin from the comp, painted onto the legacy filter DOM: frosted
   card, hairline-separated groups, option pills with live counts, slim dual
   ranges. Checkbox inputs stay in the DOM (cl-inventory.js reads them) but are
   visually replaced by their .option-badge pill via :has(). */
.cl-inventory #cl-filter-sidebar.stm-inventory-pro-filter {
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(20px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(14, 16, 19, .05), 0 14px 34px -18px rgba(14, 16, 19, .26);
	padding: 6px 18px 16px;
}
.cl-inventory .stm-inventory-pro-filter-header {
	display: flex;
	align-items: center;
	padding: 14px 0 4px;
	border: 0;
	margin: 0;
}
.cl-inventory .stm-inventory-pro-filter-header h3.heading {
	margin: 0;
	font-size: 13.5px;
	font-weight: 750;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--cl-ink);
}
.cl-inventory .cl-dock-reset {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 650;
	color: var(--cl-accent);
	text-decoration: none;
}
.cl-inventory .cl-dock-reset:hover { text-decoration: underline; }

/* groups: hairline top, no boxes, micro-caps heading; per-group reset hidden
   (the dock has ONE reset, in its header) */
/* The #id in the selector is deliberate: the legacy numeric-skin_3 sheet loads
   after this one and puts a border on BOTH edges of the payment group, which
   doubled the hairline against the next group's top border. */
.cl-inventory #cl-filter-sidebar .cl-filter-form .stm-filter-item {
	border: 0;
	border-top: 1px solid rgba(14, 16, 19, .08);
	margin: 0;
	padding: 15px 0;
	background: none;
	box-shadow: none;
}
.cl-inventory .cl-filter-form .stm-filter-item-search { border-top: 0; padding-top: 8px; }
.cl-inventory .stm-filter-pro-item-heading { margin: 0 0 11px; padding: 0; }
.cl-inventory .stm-filter-pro-item-heading .heading-title {
	font-size: 11.5px;
	font-weight: 750;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cl-muted);
}
.cl-inventory .stm-filter-pro-item-heading .heading-action { display: none; }

/* option pills */
.cl-inventory .stm-filter-pro-options-list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
}
.cl-inventory .stm-filter-pro-options-list label { margin: 0; padding: 0; display: block; cursor: pointer; }
.cl-inventory .stm-filter-pro-options-list label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.cl-inventory .stm-filter-pro-options-list .option-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(14, 16, 19, .08);
	font-size: 13px;
	font-weight: 600;
	color: var(--cl-ink-2);
	transition: .14s;
	white-space: nowrap;
}
.cl-inventory .stm-filter-pro-options-list label:hover .option-badge {
	border-color: rgba(14, 16, 19, .24);
	color: var(--cl-ink);
}
/* The !importants match mgc-inventory.css (sheet loads after this one), which
   paints checked badges brand-red with !important via input:checked + .option-badge.
   One red per page; a selected filter pill is state, not a call to action. */
.cl-inventory .stm-filter-pro-options-list label:has(input:checked) .option-badge,
.cl-inventory .stm-filter-pro-options-list label input[type="checkbox"]:checked + .option-badge {
	background: var(--cl-ink) !important;
	border-color: var(--cl-ink) !important;
	color: #fff !important;   /* ink fill, not accent fill — white is always the readable label here */
}
.cl-inventory .stm-filter-pro-options-list label input[type="checkbox"]:checked + .option-badge .cl-pill-count { color: #fff; opacity: .6; }
.cl-inventory .cl-pill-count {
	opacity: .6;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* search field inside the rail */
.cl-inventory .cl-filter-form .stm-filter-item-search-input input.form-control {
	height: 40px;
	border: 1px solid rgba(14, 16, 19, .08);
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	padding: 0 16px 0 38px;
	font-size: 13.5px;
	box-shadow: none;
}

/* min/max value boxes */
.cl-inventory .stm-filter-pro-price-inputs { display: flex; gap: 8px; }
.cl-inventory .stm-filter-pro-price-inputs .extreme-value { flex: 1; min-width: 0; padding: 0; }
.cl-inventory .stm-filter-pro-price-inputs .extreme-value input {
	width: 100%;
	height: 38px;
	border: 1px solid rgba(14, 16, 19, .08);
	border-radius: 11px;
	background: rgba(255, 255, 255, .75);
	padding: 0 10px;
	font-size: 13px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: none;
}

/* dual range: 4px track, ink fill, 17px white thumbs */
.cl-inventory .cl-range { position: relative; height: 4px; margin: 18px 4px 10px; }
.cl-inventory .cl-range__track {
	position: absolute;
	inset: 0;
	background: rgba(14, 16, 19, .12);
	border-radius: 2px;
}
.cl-inventory .cl-range__fill { position: absolute; top: 0; bottom: 0; background: var(--cl-ink); border-radius: 2px; }
/* The inputs are INSET by the thumb radius so the 17px balls always rest
   INSIDE the 4px track instead of bulging past its rounded end caps at
   min/max (the comp never exposed this — its demo thumbs sat mid-track).
   top/transform are both set because the base .cl-range__input rule higher
   up carries translateY(-50%); overriding top alone left the balls floating
   above the track. Dragging is unaffected: cl-inventory.js drives values
   from pointer x on the wrapper, not from the input geometry. */
.cl-inventory .cl-range__input {
	position: absolute;
	top: 50%;
	/* owner (2026-08-31, with reference shot): thumbs go ALL THE WAY to the
	   ends — centers ON the track ends at min/max, halves overhanging, like
	   the classic dual-slider. The inputs extend past the track by one thumb
	   radius per side so the native thumb centers can reach the caps. */
	left: -8.5px;
	right: auto;
	width: calc(100% + 17px);
	height: 17px;
	margin: 0;
	transform: translateY(-50%);
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.cl-inventory .cl-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(14, 16, 19, .3);
	pointer-events: auto;
	cursor: grab;
}
.cl-inventory .cl-range__input::-moz-range-thumb {
	width: 17px;
	height: 17px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(14, 16, 19, .3);
	pointer-events: auto;
	cursor: grab;
}

/* year + extra-field selects as pills */
.cl-inventory .cl-filter-form select {
	height: 38px;
	border: 1px solid rgba(14, 16, 19, .08);
	border-radius: 11px;
	background-color: rgba(255, 255, 255, .75);
	padding: 0 28px 0 12px;
	font-size: 13px;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2379818c' stroke-width='2'><path d='M2 4.5 6 8.5 10 4.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

/* apply button (mobile sheet footer keeps its own) */
.cl-inventory .cl-filter-form button.button[type="submit"] {
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: 11px;
	background: var(--cl-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}


/* ---- dock v6-parity round 2 (2026-08-31) ----------------------------------- */
/* comp order inside a range group: slider first, value boxes under it */
.cl-inventory .stm-filter-pro-price,
.cl-inventory .stm-filter-numeric-inputs-slider { display: flex; flex-direction: column-reverse; gap: 12px; }
.cl-inventory .stm-filter-numeric-inputs { display: flex; gap: 8px; }
.cl-inventory .stm-filter-numeric-input { flex: 1; min-width: 0; }
.cl-inventory .stm-filter-numeric-input-wrapper input {
	width: 100%;
	height: 38px;
	border: 1px solid rgba(14, 16, 19, .08);
	border-radius: 11px;
	background: rgba(255, 255, 255, .75);
	padding: 0 10px;
	font-size: 13px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: none;
	-moz-appearance: textfield;
}
.cl-inventory .stm-filter-numeric-input-wrapper input::-webkit-outer-spin-button,
.cl-inventory .stm-filter-numeric-input-wrapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl-inventory .cl-range { margin: 10px 4px 4px; }

/* masthead search (comp: pill top-right of the H1) */
/* comp heading row: H1, then the result count beside it, search pushed right */
.cl-inventory .search-results-actions-heading { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cl-inventory .search-results-actions-heading .search-results-actions-title { order: 1; }
.cl-inventory .search-results-actions-heading .mvl-total-results { order: 2; }
.cl-inventory .search-results-actions-heading .cl-mast-search { order: 3; }
.cl-inventory .cl-mast-search { position: relative; margin-left: auto; }
.cl-inventory .cl-mast-search__input {
	height: 50px;
	width: min(340px, 32vw);
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(18px) saturate(1.6);
	padding: 0 20px 0 46px;
	font-size: 15px;
	outline: 0;
	box-shadow: 0 1px 2px rgba(14, 16, 19, .05), 0 14px 34px -18px rgba(14, 16, 19, .26);
}
.cl-inventory .cl-mast-search i {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cl-muted);
	pointer-events: none;
}
@media (min-width: 992px) {
	/* the comp's dock has no search field and no Apply — filtering is live */
	.cl-inventory .cl-filter-form .stm-filter-item-search { display: none; }
	.cl-inventory .cl-filter-form .stm-filter-actions,
	.cl-inventory .cl-filter-form button.button[type="submit"] { display: none; }
}
@media (max-width: 991px) {
	.cl-inventory .cl-mast-search { display: none; }
}


/* ---- the canvas (2026-08-31, owner) ----------------------------------------
   "See how on the V6 its a gray background and everything else is white
   against it. I think thats the problem." He is right — every surface in this
   design (white cards, the frosted dock, the masthead search pill) was tuned
   against the comp's grey canvas, and on a white page they all melt together.
   #e9ecf0 is the comp's --canvas, verbatim. Scoped to the CL inventory body
   class so no other page of the site changes. */
body.cl-page-inventory { background: #e9ecf0; }   /* the comp's --canvas, verbatim — owner picked it by hex (2026-08-31) */
body.cl-page-inventory #mst-wrapper,
body.cl-page-inventory .mst-wrapper-inner,
body.cl-page-inventory .page-content { background: transparent; }

/* masthead search: crisper edge (owner: "too faint and needs an outline") */
.cl-inventory .cl-mast-search__input {
	border: 1px solid #d5dae1;
	background: #fff;
}
.cl-inventory .cl-mast-search__input:focus {
	border-color: #b8bfc9;
	box-shadow: 0 1px 2px rgba(14, 16, 19, .05), 0 14px 34px -18px rgba(14, 16, 19, .26),
	            0 0 0 3px rgba(14, 16, 19, .06);
}

/* dock pills read against the canvas exactly like the comp */
.cl-inventory #cl-filter-sidebar.stm-inventory-pro-filter { background: rgba(255, 255, 255, .72); }