/**
 * VSM theme: fleet — the commercial vehicle / van centre skin.
 *
 * Loads after assets/front.css and restyles the same markup. Every selector is
 * scoped under .vsm-theme-fleet (the wrapper carries .vsm + the theme class on
 * the same element, so the wrapper itself matches .vsm.vsm-theme-fleet).
 *
 * Design intent: an efficient trade counter. Trade buyers, fleet managers and
 * sole traders compare payload, load length, wheelbase and VAT status — so the
 * spec chips and the VAT note are PROMOTED (bigger, higher contrast) relative
 * to every other theme. The look is industrial utility: squared corners
 * everywhere (squareness IS the aesthetic, so --vsm-radius is deliberately not
 * consumed), rugged 2px borders, graphite panels on a workshop-light ground,
 * stencil-flavoured uppercase labels, and the dealer's accent deployed like
 * safety marking — hatched chevron strips and strong active states, never
 * decorative washes. Dense and scannable like a printed spec sheet; rugged,
 * never dirty.
 */

/* ================================================================ tokens */

.vsm.vsm-theme-fleet {
	/* Full palette owned by the theme (brief rule 4). Cool, matter-of-fact
	   neutrals: a workshop under daylight LEDs, not a boutique. */
	--vsm-ink: #141a22;
	--vsm-ink2: #57616f;
	--vsm-surface: #ffffff;
	--vsm-surface2: #eef0f3;
	--vsm-line: #cfd5dd;

	/* The workshop-light page ground the panels sit on. */
	--fl-page: #e7eaee;

	/* Literal graphite for the anchor panels (toolbar, H2 bars, VAT note).
	   NOT a scheme token on purpose: these stay dark with light type whether
	   the page is light or dark — painted steel doesn't change with the sun. */
	--fl-graphite: #262d37;
	--fl-graphite-2: #303845;      /* fields sunk into a graphite panel */
	--fl-graphite-line: rgba(255, 255, 255, .16);
	--fl-graphite-ink: #f3f6f9;
	--fl-graphite-ink2: rgba(255, 255, 255, .62);

	/* Accent family, all derived from the dealer's --vsm-accent so their
	   colour choice propagates through every marking:
	   - deep:   pressed/hover shade
	   - text:   accent pulled toward ink so it passes as copy colour
	   - bright: accent lifted toward white so it reads on graphite
	   - hatch:  the safety-marking chevron strip (accent over graphite) */
	--fl-accent-deep: color-mix(in srgb, var(--vsm-accent) 76%, #000);
	--fl-accent-text: color-mix(in srgb, var(--vsm-accent) 72%, var(--vsm-ink));
	--fl-accent-bright: color-mix(in srgb, var(--vsm-accent) 60%, #fff);
	--fl-hatch: repeating-linear-gradient(-45deg,
		var(--vsm-accent) 0 8px, var(--fl-graphite) 8px 16px);

	/* Strong border tone for the rugged 2px frames — heavier than --vsm-line,
	   lighter than ink, and it recomputes per scheme because it is mixed from
	   the scheme tokens. */
	--fl-line-strong: color-mix(in srgb, var(--vsm-ink) 34%, var(--vsm-surface));

	/* Trade counters pack more metal per row. */
	--vsm-maxw: 1460px;

	/* Denser default rhythm. */
	line-height: 1.45;
}

/* Elementor per-widget scheme overrides land on .vsm-force-* .vsm at (0,2,0);
   this sheet loads later, so the theme palette above would silently beat them.
   Restate both schemes at (0,3,0) so the widget control keeps working. */
.vsm-force-dark .vsm.vsm-theme-fleet {
	color-scheme: dark;
	--vsm-ink: #e8ecf2;
	--vsm-ink2: #9aa5b4;
	--vsm-surface: #1d232c;
	--vsm-surface2: #262d37;
	--vsm-line: #3a434f;
	--fl-page: #13171d;
	/* --fl-line-strong and --fl-accent-text re-mix themselves from the tokens
	   above automatically; the graphite family is literal and stays put. */
}
.vsm-force-light .vsm.vsm-theme-fleet {
	color-scheme: light;
	--vsm-ink: #141a22;
	--vsm-ink2: #57616f;
	--vsm-surface: #ffffff;
	--vsm-surface2: #eef0f3;
	--vsm-line: #cfd5dd;
	--fl-page: #e7eaee;
}

/* ============================================================= the stage */

/* Paint the full-width breakout so the theme looks intentional inside any
   WP site: a flat workshop-light ground, no texture — rugged means plain. */
.vsm.vsm-theme-fleet.vsm-fullwidth {
	background: var(--fl-page);
	padding-top: 28px;
	padding-bottom: 44px;
}

/* ============================================================== headings */

/* Section headings are graphite bars with stencil type — the theme's
   signature. A small accent chevron-hatch block sits at the left end like a
   stamped safety mark. (Distinct from showroom's gradient dash: this is a
   full painted bar, not an underline.) */
.vsm-theme-fleet .vsm-h2 {
	background: var(--fl-graphite);
	color: var(--fl-graphite-ink);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 1.05em;
	font-weight: 800;
	padding: 11px 14px;
	margin: 0 0 14px;
}
.vsm-theme-fleet .vsm-h2::before {
	content: "";
	width: 16px; height: 16px; flex: none;
	background: repeating-linear-gradient(-45deg,
		var(--vsm-accent) 0 4px, rgba(0, 0, 0, 0) 4px 8px);
}
.vsm-theme-fleet .vsm-h2 + .vsm-section-lead { margin-top: -6px; }
.vsm-theme-fleet .vsm-section { margin: 34px 0; }
.vsm-theme-fleet .vsm-section-lead { font-size: .95em; }

/* Panel sub-heads read like a spec-sheet column header: heavier tracking and
   a solid rule underneath. */
.vsm-theme-fleet .vsm-h3 {
	color: var(--vsm-ink);
	font-size: .76em;
	font-weight: 800;
	letter-spacing: .11em;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fl-graphite);
	margin-bottom: 10px;
}

/* ============================================================ class tabs */

.vsm-theme-fleet .vsm-tab {
	border-radius: 0;
	border: 2px solid var(--fl-line-strong);
	background: var(--vsm-surface);
	color: var(--vsm-ink2);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .88em;
	font-weight: 800;
	padding: 10px 16px;
}
.vsm-theme-fleet .vsm-tab:hover {
	border-color: var(--vsm-accent);
	color: var(--vsm-ink);
}
/* Active tab = graphite plate with an accent marking along its base. An inset
   shadow, not a border, so the control never changes size when it activates. */
.vsm-theme-fleet .vsm-tab.is-active {
	background: var(--fl-graphite);
	border-color: var(--fl-graphite);
	color: var(--fl-graphite-ink);
	box-shadow: inset 0 -3px 0 var(--vsm-accent);
}
.vsm-theme-fleet .vsm-tab-count {
	border-radius: 0;
	padding: 1px 7px;
	background: color-mix(in srgb, var(--vsm-ink) 10%, transparent);
}
.vsm-theme-fleet .vsm-tab.is-active .vsm-tab-count {
	background: rgba(255, 255, 255, .18);
}

/* ====================================================== the trade counter */

/* The whole toolbar (search, filters, results row) is one graphite panel —
   the "counter" the buyer works at. Fields are sunk panels with light type;
   fixed colours, so it anchors the page in both schemes. */
.vsm-theme-fleet .vsm-toolbar {
	background: var(--fl-graphite);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 14px 16px;
	color: var(--fl-graphite-ink);
}

.vsm-theme-fleet .vsm-search {
	background: var(--fl-graphite-2);
	border: 1px solid var(--fl-graphite-line);
	border-radius: 0;
}
.vsm-theme-fleet .vsm-search .vsm-i { color: var(--fl-graphite-ink2); }
.vsm-theme-fleet .vsm-search input { color: var(--fl-graphite-ink); }
.vsm-theme-fleet .vsm-search input::placeholder { color: var(--fl-graphite-ink2); }
.vsm-theme-fleet .vsm-search:focus-within {
	border-color: var(--vsm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vsm-accent) 30%, transparent);
}

/* Selects live only inside the counter, so the graphite treatment is global
   within the theme. appearance:none needs a supplied arrow: white SVG chevron
   as a data URI (brief rule 8 allows data URIs; rule 10 keeps them native). */
.vsm-theme-fleet select,
.vsm-theme-fleet .vsm-filter-toggle {
	background-color: var(--fl-graphite-2);
	color: var(--fl-graphite-ink);
	border: 1px solid var(--fl-graphite-line);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
	font-weight: 600;
}
.vsm-theme-fleet select:hover,
.vsm-theme-fleet .vsm-filter-toggle:hover { border-color: rgba(255, 255, 255, .34); }
/* Popup list colours follow the control, not the page — keep them legible. */
.vsm-theme-fleet select option { background: var(--fl-graphite-2); color: var(--fl-graphite-ink); }

.vsm-theme-fleet .vsm-sort label,
.vsm-theme-fleet .vsm-sort { color: var(--fl-graphite-ink2); }
.vsm-theme-fleet .vsm-filter-dot { background: var(--fl-accent-bright); }

.vsm-theme-fleet .vsm-view {
	border: 1px solid var(--fl-graphite-line);
	border-radius: 0;
}
.vsm-theme-fleet .vsm-view-btn {
	background: var(--fl-graphite-2);
	color: var(--fl-graphite-ink2);
}
.vsm-theme-fleet .vsm-view-btn.is-active {
	background: var(--vsm-accent);
	color: var(--vsm-accent-ink);
}

.vsm-theme-fleet .vsm-results { border-top: 1px solid var(--fl-graphite-line); }
.vsm-theme-fleet .vsm-count {
	color: var(--fl-graphite-ink);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78em;
	font-weight: 800;
}
.vsm-theme-fleet .vsm-pill {
	border-radius: 0;
	background: color-mix(in srgb, var(--vsm-accent) 26%, var(--fl-graphite));
	color: #fff;
	font-weight: 700;
}
.vsm-theme-fleet .vsm-pill.is-clear {
	background: none;
	color: var(--fl-graphite-ink2);
}

/* =================================================================== cards */

.vsm-theme-fleet .vsm-grid { gap: 16px; }

.vsm-theme-fleet .vsm-card-link { border-radius: 0; }
.vsm-theme-fleet .vsm-card {
	border: 2px solid var(--fl-line-strong);
	border-radius: 0;
	/* Hard single-edge drop instead of a soft blur: pressed steel, not
	   floating paper. */
	box-shadow: 0 2px 0 color-mix(in srgb, var(--vsm-ink) 14%, transparent);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vsm-theme-fleet .vsm-card-link:hover .vsm-card {
	transform: none; /* no lift — active state is the accent frame */
	border-color: var(--vsm-accent);
	box-shadow: 0 2px 0 color-mix(in srgb, var(--vsm-accent) 45%, transparent);
}

.vsm-theme-fleet .vsm-card-body { padding: 14px; gap: 10px; }
.vsm-theme-fleet .vsm-card-title {
	text-transform: uppercase;
	letter-spacing: .015em;
	font-size: .95em;
	font-weight: 800;
	line-height: 1.3;
}
.vsm-theme-fleet .vsm-card-sub { font-size: .82em; }

/* Badges: stamped plates, not pills. */
.vsm-theme-fleet .vsm-badge {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .68em;
	padding: 4px 9px;
	background: var(--fl-graphite);
}
.vsm-theme-fleet .vsm-shots { border-radius: 0; background: rgba(20, 26, 34, .8); }

/* ---- the promoted spec chips -------------------------------------------
   Payload / wheelbase / load-volume is what a trade buyer scans FIRST, so
   chips step up: bigger type, full-ink text, bold weight, accent icons, and
   squared 1px frames. Every other theme mutes these; fleet leads with them. */
.vsm-theme-fleet .vsm-chip {
	border-radius: 0;
	border: 1px solid var(--fl-line-strong);
	background: var(--vsm-surface2);
	color: var(--vsm-ink);
	font-size: .81em;
	font-weight: 700;
	padding: 5px 9px;
	gap: 6px;
}
.vsm-theme-fleet .vsm-chip .vsm-i {
	opacity: 1;
	color: var(--fl-accent-text);
}

.vsm-theme-fleet .vsm-card-foot {
	border-top: 2px solid var(--vsm-line);
	padding-top: 10px;
}
.vsm-theme-fleet .vsm-card-price {
	font-size: 1.35em;
	font-weight: 900;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-card-monthly { font-size: .78em; font-weight: 600; }

/* Square "go" plate; fills accent on hover like a pressed switch. */
.vsm-theme-fleet .vsm-card-go {
	border-radius: 0;
	background: none;
	border: 2px solid var(--fl-line-strong);
	color: var(--vsm-ink);
	width: 36px; height: 36px;
}
.vsm-theme-fleet .vsm-card-link:hover .vsm-card-go {
	background: var(--vsm-accent);
	border-color: var(--vsm-accent);
	color: var(--vsm-accent-ink);
}

.vsm-theme-fleet .vsm-empty-state {
	border-radius: 0;
	background: none;
	border: 2px dashed var(--fl-line-strong);
	color: var(--vsm-ink2);
}

/* ========================================================= single vehicle */

.vsm-theme-fleet .vsm-back {
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .78em;
	font-weight: 800;
	color: var(--vsm-ink2);
}
.vsm-theme-fleet .vsm-back:hover { color: var(--fl-accent-text); }

/* ---------------------------------------------------------------- gallery */

.vsm-theme-fleet .vsm-g-stage {
	border-radius: 0;
	border: 2px solid var(--fl-line-strong);
}
.vsm-theme-fleet .vsm-noimg-lg { border-radius: 0; }
.vsm-theme-fleet .vsm-g-zoom { border-radius: 0; background: rgba(20, 26, 34, .78); }
.vsm-theme-fleet .vsm-g-nav { border-radius: 0; box-shadow: 0 2px 0 rgba(16, 24, 40, .3); }
.vsm-theme-fleet .vsm-g-counter {
	border-radius: 0;
	background: var(--fl-graphite);
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-media-flag {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: .07em;
}
.vsm-theme-fleet .vsm-g-thumb { border-radius: 0; border-width: 2px; }
.vsm-theme-fleet .vsm-g-thumb img { border-radius: 0; }
.vsm-theme-fleet .vsm-g-thumb.is-active { border-color: var(--vsm-accent); }

/* ---------------------------------------------------------------- buy box */

/* The buy box carries the theme's one crest: a hazard-hatched top strip in
   the dealer's accent over graphite (a full-width crest on a major panel is
   allowed; the diagonal hatch is fleet's own marking, not forecourt's solid
   edge). Painted as a background layer so the 2px frame still wraps it. */
.vsm-theme-fleet .vsm-buybox {
	border: 2px solid var(--fl-line-strong);
	border-radius: 0;
	box-shadow: 0 2px 0 color-mix(in srgb, var(--vsm-ink) 14%, transparent);
	background-color: var(--vsm-surface);
	background-image: var(--fl-hatch);
	background-repeat: no-repeat;
	background-size: 100% 6px;
	background-position: top;
	padding: 24px 22px 22px;
}

.vsm-theme-fleet .vsm-eyebrow {
	color: var(--fl-accent-text);
	letter-spacing: .12em;
	font-size: .74em;
}
.vsm-theme-fleet .vsm-subtitle { font-size: 1.12em; }

.vsm-theme-fleet .vsm-plate-tag { border-radius: 3px; }

.vsm-theme-fleet .vsm-price-block { border-bottom: 2px solid var(--vsm-line); }
.vsm-theme-fleet .vsm-price-big {
	font-size: 2.3em;
	font-weight: 900;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-saving {
	border-radius: 0;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .74em;
}
.vsm-theme-fleet .vsm-price-monthly { font-weight: 600; }

/* ---- the promoted VAT note ----------------------------------------------
   Whether the price is +VAT / VAT-qualifying / margin-scheme decides what a
   trade buyer actually pays, so it reads as a stamped graphite plate right
   under the price — the loudest small element in the box. */
.vsm-theme-fleet .vsm-vat-note {
	background: var(--fl-graphite);
	color: var(--fl-graphite-ink);
	border-radius: 0;
	font-size: .84em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 6px 12px;
	margin-top: 10px;
}

.vsm-theme-fleet .vsm-trust { border-top: 2px solid var(--vsm-line); }
.vsm-theme-fleet .vsm-trust li { color: var(--vsm-ink); font-weight: 600; font-size: .85em; }

/* --------------------------------------------------------------- finance */

.vsm-theme-fleet .vsm-finance { border-top: 2px solid var(--vsm-line); }
.vsm-theme-fleet .vsm-finance > summary {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .88em;
	font-weight: 800;
}
.vsm-theme-fleet .vsm-fin-monthly {
	border-radius: 0;
	background: var(--vsm-surface2);
	border: 1px solid var(--fl-line-strong);
}
.vsm-theme-fleet .vsm-fin-monthly span {
	color: var(--fl-accent-text);
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-term {
	border-radius: 0;
	border: 2px solid var(--vsm-line);
	font-weight: 700;
}
.vsm-theme-fleet .vsm-term.is-active {
	background: var(--fl-graphite);
	border-color: var(--fl-graphite);
	color: var(--fl-graphite-ink);
	box-shadow: inset 0 -3px 0 var(--vsm-accent);
}
.vsm-theme-fleet .vsm-fin-summary dd { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- key facts */

/* The key-facts strip is a bolted-on spec plate: heavy outer frame, hairline
   internal grid, accent icons, stencil labels. Stays on the light surface so
   it is NOT forecourt's near-black strip. */
.vsm-theme-fleet .vsm-keyfacts {
	border: 2px solid var(--fl-line-strong);
	border-radius: 0;
	box-shadow: 0 2px 0 color-mix(in srgb, var(--vsm-ink) 14%, transparent);
}
.vsm-theme-fleet .vsm-keyfacts li { padding: 15px 8px; }
.vsm-theme-fleet .vsm-keyfacts .vsm-i { color: var(--fl-accent-text); }
.vsm-theme-fleet .vsm-kf-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-kf-label {
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: .62em;
	font-weight: 700;
}

/* ---------------------------------------------------------- running costs */

.vsm-theme-fleet .vsm-cost-grid { gap: 10px; }
.vsm-theme-fleet .vsm-cost-grid li {
	border: 2px solid var(--vsm-line);
	border-radius: 0;
	padding: 12px 14px;
}
.vsm-theme-fleet .vsm-cost-grid .vsm-i { color: var(--vsm-ink2); }
.vsm-theme-fleet .vsm-cost-grid li.is-good { border-color: color-mix(in srgb, var(--vsm-good) 45%, var(--vsm-line)); }
.vsm-theme-fleet .vsm-cost-label {
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .64em;
	font-weight: 700;
}
.vsm-theme-fleet .vsm-cost-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ spec panels */

/* Spec panels ARE the product for a van buyer ("Load area & payload"), so
   they read like a printed data sheet: tight zebra rows instead of airy
   hairline dividers, values right-aligned in bold tabular figures. */
.vsm-theme-fleet .vsm-spec-panels { gap: 12px; }
.vsm-theme-fleet .vsm-spec-panel {
	border: 2px solid var(--fl-line-strong);
	border-radius: 0;
	padding: 14px 16px;
	background: var(--vsm-surface);
}
.vsm-theme-fleet .vsm-spec-list > div {
	border-bottom: 0;
	padding: 7px 10px;
	font-size: .88em;
}
.vsm-theme-fleet .vsm-spec-list > div:nth-child(odd) { background: var(--vsm-surface2); }
.vsm-theme-fleet .vsm-spec-list > div:last-child { padding-bottom: 7px; }
.vsm-theme-fleet .vsm-spec-list dt { font-weight: 600; }
.vsm-theme-fleet .vsm-spec-list dd {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- features */

.vsm-theme-fleet .vsm-features { gap: 8px 18px; }
.vsm-theme-fleet .vsm-features li { font-size: .9em; font-weight: 600; }

/* -------------------------------------------------------------------- MOT */

.vsm-theme-fleet .vsm-verified {
	border-radius: 0;
	font-weight: 800;
	letter-spacing: .07em;
}
/* Square timeline markers — rivets, not dots. */
.vsm-theme-fleet .vsm-mot-item::before { border-radius: 0; }
.vsm-theme-fleet .vsm-mot-date { font-variant-numeric: tabular-nums; }
.vsm-theme-fleet .vsm-mot-miles { font-variant-numeric: tabular-nums; }
.vsm-theme-fleet .vsm-mot-list { border-radius: 0; }

/* ================================================================== forms */

.vsm-theme-fleet .vsm-form-card {
	border: 2px solid var(--fl-line-strong);
	border-radius: 0;
	box-shadow: 0 2px 0 color-mix(in srgb, var(--vsm-ink) 14%, transparent);
	background-color: var(--vsm-surface);
	background-image: var(--fl-hatch);
	background-repeat: no-repeat;
	background-size: 100% 6px;
	background-position: top;
	padding: 26px 24px 24px;
}
.vsm-theme-fleet .vsm-form label span {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .72em;
	font-weight: 800;
	color: var(--vsm-ink2);
}
.vsm-theme-fleet .vsm-form input,
.vsm-theme-fleet .vsm-form textarea {
	border: 2px solid var(--vsm-line);
	border-radius: 0;
	padding: 10px 12px;
}
.vsm-theme-fleet .vsm-form input:focus,
.vsm-theme-fleet .vsm-form textarea:focus {
	border-color: var(--vsm-accent);
	box-shadow: none; /* the 2px border flip is the focus state; no soft glow */
}
.vsm-theme-fleet .vsm-plate { border-radius: 3px !important; }

.vsm-theme-fleet .vsm-intent-btn {
	border-radius: 0;
	border: 2px solid var(--vsm-line);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .78em;
	font-weight: 800;
	padding: 9px 14px;
}
.vsm-theme-fleet .vsm-intent-btn.is-active {
	background: var(--fl-graphite);
	border-color: var(--fl-graphite);
	color: var(--fl-graphite-ink);
	box-shadow: inset 0 -3px 0 var(--vsm-accent);
}

.vsm-theme-fleet .vsm-form-msg { border-radius: 0; font-weight: 600; }

/* ================================================================ buttons */

.vsm-theme-fleet .vsm-btn {
	border-radius: 0;
	border-width: 2px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .92em;
	font-weight: 800;
	transition: background-color .12s ease, border-color .12s ease,
		color .12s ease, transform .08s ease;
}
/* Hover darkens to the pressed shade instead of the base's brightness lift —
   a switch being thrown, not a glow. */
.vsm-theme-fleet .vsm-btn:hover {
	filter: none;
	background: var(--fl-accent-deep);
	border-color: var(--fl-accent-deep);
}
.vsm-theme-fleet .vsm-btn:active { transform: translateY(1px); }
.vsm-theme-fleet .vsm-btn-lg { font-size: .98em; }

.vsm-theme-fleet .vsm-btn-ghost {
	background: none;
	border-color: var(--fl-line-strong);
	color: var(--vsm-ink);
}
.vsm-theme-fleet .vsm-btn-ghost:hover {
	background: var(--fl-graphite);
	border-color: var(--fl-graphite);
	color: var(--fl-graphite-ink);
}

.vsm-theme-fleet .vsm-btn-reserve {
	background: var(--vsm-good);
	border-color: var(--vsm-good);
}
.vsm-theme-fleet .vsm-btn-reserve:hover {
	background: color-mix(in srgb, var(--vsm-good) 80%, #000);
	border-color: color-mix(in srgb, var(--vsm-good) 80%, #000);
}

.vsm-theme-fleet .vsm-btn:disabled {
	transform: none;
	background: var(--vsm-surface2);
	border-color: var(--vsm-line);
	color: var(--vsm-ink2);
}

/* ============================================================= sticky bar */

/* Light surface with the hazard hatch along its top edge — the mobile echo
   of the buy-box crest. */
.vsm-theme-fleet .vsm-sticky-bar {
	background-color: var(--vsm-surface);
	background-image: var(--fl-hatch);
	background-repeat: no-repeat;
	background-size: 100% 4px;
	background-position: top;
	border-top: 0;
	box-shadow: 0 -4px 16px rgba(10, 15, 22, .18);
	padding-top: 12px;
}
.vsm-theme-fleet .vsm-sticky-price strong {
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}
.vsm-theme-fleet .vsm-sticky-price small { font-weight: 600; }

/* =============================================================== lightbox */

.vsm-theme-fleet .vsm-lightbox img { border-radius: 0; }
.vsm-theme-fleet .vsm-lb-close,
.vsm-theme-fleet .vsm-lb-nav { border-radius: 0; }
.vsm-theme-fleet .vsm-lb-counter {
	border-radius: 0;
	font-variant-numeric: tabular-nums;
}

/* ============================================================= responsive */

/* 375px: the graphite counter keeps its full-bleed feel and nothing may
   overflow — chips wrap, uppercase titles wrap, buttons stay tappable. */
@media (max-width: 480px) {
	.vsm-theme-fleet .vsm-h2 { font-size: .98em; padding: 10px 12px; }
	.vsm-theme-fleet .vsm-price-big { font-size: 2.05em; }
	.vsm-theme-fleet .vsm-card-title { font-size: .9em; }
	.vsm-theme-fleet .vsm-toolbar { padding: 12px; }
	.vsm-theme-fleet .vsm-tab { font-size: .82em; padding: 9px 10px; }
}

/* Tablet: keep the trade density — two solid columns, tighter gap. */
@media (min-width: 641px) and (max-width: 1000px) {
	.vsm-theme-fleet .vsm-grid { gap: 14px; }
}

/* List view rows read like stock lines; give the frame the same weight. */
@media (min-width: 640px) {
	.vsm-theme-fleet .vsm-grid.is-list .vsm-card-body { padding: 16px 18px; }
}

/* ========================================================= reduced motion */

@media (prefers-reduced-motion: reduce) {
	.vsm-theme-fleet .vsm-btn,
	.vsm-theme-fleet .vsm-btn:active,
	.vsm-theme-fleet .vsm-card,
	.vsm-theme-fleet .vsm-card-link:hover .vsm-card {
		transition: none;
		transform: none;
	}
}

/* ================================================================== print */

/* The base already strips chrome; graphite bars would just burn toner. */
@media print {
	.vsm-theme-fleet .vsm-h2 {
		background: none;
		color: #000;
		padding: 0;
	}
	.vsm-theme-fleet .vsm-h2::before { display: none; }
	.vsm-theme-fleet .vsm-vat-note {
		background: none;
		color: #000;
		border: 2px solid #000;
	}
	.vsm-theme-fleet .vsm-buybox,
	.vsm-theme-fleet .vsm-form-card,
	.vsm-theme-fleet .vsm-sticky-bar { background-image: none; }
}