/*
 * Mainland units: the unit card (mainland_unit_card_html()), the new-arrivals rail (mainland/unit-rail) and the
 * shop-by-type tiles (mainland/type-tiles, also printed by the shop-by-type band). Loaded only on pages where
 * one of those blocks renders (functions.php, mainland_block_styles()); PHP that prints cards elsewhere calls
 * mainland_enqueue_units_css(). Loads after theme.css and builds on its utilities: .mn-card-host / .mn-stretch /
 * .mn-raise (stretched link, hover, focus ring), .mn-photo (grade), .mn-scrim, .mn-chip, .mn-square, .mn-label.
 * assets/js/units.js adds the rail's type tabs, the card photo tilt and the tiles' count-up; everything here
 * works without it.
 *
 * Owner: the Units engineer. Reference: mockup A "Yard Pro" (card anatomy, tile styling) with two grafts from C
 * (compact unit rows on phones, the bento shop-by-type), decision of 4 Oct 2026 (#49; docs/02-DESIGN-SYSTEM.md §2.12, §7.10).
 *
 * 1. Unit card (data plate, photo tilt, edge light)   2. New-arrivals rail (type tabs, full rows, end tile, compact
 * phone rows)   3. Type tiles (bento, sub-type links, slow zoom)   4. Reduced motion
 * Phase 2 (S011, mainland-inventory) has its own files, each loaded on top of this one only where it prints (02 §2.12):
 * units-listing.css (5. the listing, 6. the inventory hero and FAQ) and units-page.css (7. the unit page, 8. the
 * Max-Atlas model page), so the home page blocks only on the cards, the rail and the tiles.
 */

/* 1. Unit card (02 §7.10) ----------------------------------------------------------------------------------------- */
/* A white card on any band (.mn-on-light in the markup): 4:3 photo in the true inventory grade with the status chip
   and photo count, title (year make model) whose link covers the card, price, a full-bleed spec strip, and one
   footer row with the request link and quiet 44 px Call and Text squares. */

.mn-unit-card {
	--mn-photo-pos: 50% 58%; /* portrait yard shots: the cab sits a little below the middle */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-card);
	transition:
		transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}

.mn-unit-card__media { flex: none; aspect-ratio: var(--wp--preset--aspect-ratio--4-3); }
/* No photo yet: the graphite stage with the unit type's line icon in a cyan ring (the unit page's empty gallery, small). */
.mn-unit-card__media--empty { position: relative; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 100%, rgba(var(--wp--custom--cyan-rgb), 0.16), transparent 70%), var(--wp--preset--gradient--stage); }
.mn-unit-card__empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-block-end: 18px;
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--mn-text);
}
.mn-unit-card__empty-icon { display: grid; place-items: center; inline-size: 60px; block-size: 60px; border: 1px solid var(--mn-ring-border); border-radius: 50%; background: var(--mn-ring-bg); color: var(--mn-ring-fg); }
.mn-unit-card__empty-icon .mn-icon { inline-size: 30px; block-size: 30px; stroke-width: 1.3; }
/* The SOLD stamp over a sold unit's photo (decision #57, 02 §7.10): a ruled stamp, set at an angle, on a lifted
   white plate so it reads on any photo; smaller in the phone rows. The photo stays in colour, a touch dimmer. */
.mn-sold-stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mn-sold-stamp__word {
	padding: 0.2em 0.62em 0.16em;
	border: 0.11em solid currentColor;
	border-radius: 0.2em;
	outline: 0.04em solid currentColor;
	outline-offset: -0.26em;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0.35em 1.1em rgba(var(--wp--custom--ink-rgb), 0.35);
	color: var(--wp--preset--color--error);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transform: rotate(-8deg);
}
.mn-unit-card.is-sold .mn-unit-card__empty { display: none; } /* No photo: the stamp alone on the graphite stage. */
.mn-unit-card.is-sold .mn-scrim--card { --mn-scrim: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.16) 0%, rgba(var(--wp--custom--ink-rgb), 0.16) 62%, rgba(var(--wp--custom--ink-rgb), 0.5)); }
.mn-unit-card__status,
.mn-unit-card__count { position: absolute; inset-block-end: 12px; }
.mn-unit-card__status { inset-inline-start: 12px; }
.mn-unit-card__count { inset-inline-end: 12px; }

.mn-unit-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 0; }
.mn-unit-card__head { display: flex; flex: 1; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.mn-unit-card__head > * { margin: 0; }
.mn-unit-card__stock { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.06em; color: var(--mn-text-muted); }
.mn-unit-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
	color: var(--mn-text-strong);
	text-wrap: pretty;
}
.mn-unit-card__price { font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: var(--wp--custom--line-height--snug); color: var(--mn-link); }
.mn-unit-card__price.mn-price { font-size: 1.0625rem; font-weight: 700; }

/* Spec strip, the card's data plate: full bleed, three labelled values, each label led by a small cyan line icon
   (odometer gauge, power bolt, transmission cog; length, axles, type on trailers and chassis). Columns size to their
   content from a zero minimum (minmax(0, auto)): each takes what its label and value need and they share what is
   left, so a short value never squeezes a long one, and nothing can push the card wider (02 §8 rule 1). Number and
   unit are joined by a no-break space; a value too long for any card breaks rather than hiding. Cards never go below
   17.5 rem, where "4,999,999 km · 565 hp · Automatic" fits on one line. */
.mn-unit-card__specs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, auto);
	margin: 18px -20px 0;
	padding: 14px 20px;
	border-block: 1px solid var(--mn-rule);
	background: var(--wp--preset--color--paper);
}
.mn-unit-card__specs > div + div { padding-inline-start: 12px; border-inline-start: 1px solid var(--mn-rule); }
.mn-unit-card__specs dt { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mn-unit-card__specs dd { margin: 7px 0 0; color: var(--mn-text-strong); font-size: 0.9rem; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.mn-unit-card__spec-icon { flex: none; inline-size: 13px; block-size: 13px; color: var(--mn-link); stroke-width: 2; }

.mn-unit-card__foot { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin: 0 -20px; padding: 12px 12px 12px 20px; }
.mn-unit-card__request {
	display: inline-flex;
	flex: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-unit-card__request .mn-icon { inline-size: 16px; block-size: 16px; color: var(--mn-link); transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-unit-card__request:hover { color: var(--mn-link); }

/* Edge light: the border turns a faint cyan and a 1.5 px cyan ring just inside it burns brightest nearest the pointer
   (units.js sets --mn-tx and --mn-ty, -1 to 1 across the card). Only its opacity animates; it never takes a click. */
.mn-unit-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-raised);
	padding: 1.5px;
	border-radius: calc(var(--wp--custom--radius--md) - 1px);
	background: radial-gradient(14rem circle at calc(50% + var(--mn-tx, 0) * 50%) calc(50% + var(--mn-ty, -1) * 50%), var(--wp--preset--color--cyan), rgba(var(--wp--custom--cyan-rgb), 0.35) 45%, rgba(var(--wp--custom--cyan-rgb), 0) 80%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}

/* Fine pointers only: the card lifts; the photo tilts up to 2.5° toward the pointer inside its clipped frame,
   following the pointer over ui (a tilt only: no drift, 10 §3 rules out parallax); the edge light comes up. Touch
   gets none of it. */
@media (hover: hover) and (pointer: fine) {
	.mn-unit-card:hover { transform: translateY(-4px); border-color: rgba(var(--wp--custom--cyan-rgb), 0.45); box-shadow: var(--mn-shadow-lift); }
	.mn-unit-card:hover::after { opacity: 1; }
	.mn-unit-card__media { perspective: 50rem; }
	.mn-unit-card:hover .mn-unit-card__media > img {
		transform:
			rotateX(calc(var(--mn-ty, 0) * -2.5deg))
			rotateY(calc(var(--mn-tx, 0) * 2.5deg))
			scale(1.07);
		transition-duration: var(--wp--custom--motion--ui);
	}
	.mn-unit-card:hover .mn-unit-card__request .mn-icon,
	.mn-unit-card__request:hover .mn-icon { transform: translateX(3px); }
}

/* 2. New-arrivals rail (14 §4) ------------------------------------------------------------------------------------- */
/* Head: title on the left; on the right the type tabs (a segmented control: All units, then each type with stock)
   and "See all …". Below 600 px the tools take a row of their own under the title, the tabs filling it. Without
   JavaScript the tabs are links to each type's listing; units.js makes them WAI-ARIA tabs that filter the rail in
   place (FLIP), slides the ink thumb to the chosen tab and points "See all …" at the chosen type. */

.mn-rail-head { align-items: flex-end; }
.mn-rail-head > .mn-rail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); min-inline-size: 0; max-inline-size: 100%; }
.mn-rail-tools > .mn-arrow-link { flex: none; }

/* The tray is the shared segmented control (.mn-seg, theme.css §11); here it scrolls sideways if it must. */
.mn-rail-filters {
	position: relative;
	max-inline-size: 100%;
	margin: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}
.mn-rail-filters::-webkit-scrollbar { display: none; }
.mn-rail-filters > li { display: flex; flex: 1 0 auto; }
.mn-rail-filter {
	position: relative;
	z-index: var(--mn-z-over);
	box-sizing: border-box;
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	padding: 0 14px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
/* The ring sits inside the tab: the scrolling list would clip one drawn outside. */
.mn-rail-filter:focus-visible { outline-offset: -3px; }
.mn-rail-filter:hover { background: var(--wp--preset--color--paper); color: var(--mn-text-strong); }
.mn-rail-filter__n { color: var(--mn-text-muted); font-weight: 500; }
.mn-rail-filter.is-selected,
.mn-rail-filter.is-selected:hover { background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--white); }
.mn-rail-filter.is-selected .mn-rail-filter__n { color: var(--wp--preset--color--cyan-300); }
.mn-rail-filter.is-selected:focus-visible { outline-color: var(--wp--preset--color--cyan); }
/* The chosen tab carries the cyan bar under its label, as the How it works tabs and the selector's chips do. */
.mn-rail-filter.is-selected::after,
.mn-rail-filters__thumb::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 4px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
}
/* With units.js the selected fill is the thumb, which glides between tabs (FLIP: translateX and scaleX). */
.mn-rail-filters.is-live .mn-rail-filter.is-selected { background: transparent; }
.mn-rail-filters.is-live .mn-rail-filter.is-selected::after { content: none; }
.mn-rail-filters__thumb {
	position: absolute;
	inset-block: 3px;
	inset-inline-start: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--ink-1);
	box-shadow: var(--wp--preset--shadow--ink);
	transform-origin: 0 50%;
	pointer-events: none;
}

@media (max-width: 599px) {
	.mn-rail-head > .mn-rail-tools { flex: 1 1 100%; }
	.mn-rail-filters { flex: 1 1 100%; }
	.mn-rail-filter { gap: 6px; padding-inline: 12px; }
}

/* The rail sizes from its own width (container mn-units): 17.5 rem cards and a 1.5 rem gap give two across from
   36.5 rem, three from 55.5 rem and four from 74.5 rem (1440 px desktop: four). data-count is the number of cards in
   the current view (the server prints the All view; units.js changes it with the tab), data-limit how many a view
   may hold. Full rows only: a part row of two or more rows' worth hides. A view with fewer cards than one row
   shows its end tile (the type's live count and its listing) spanning what the cards leave, so the row is always
   whole. Narrower than two across, the cards become C's compact rows and the first four show; the rows stop at
   30 rem so a 600 px tablet or a phone on its side keeps the phone row's proportions instead of stretching it.
   Hidden cards and cards on their way out (.is-leaving) don't count: :nth-child(… of S). */

.mn-units { container: mn-units / inline-size; }
.mn-rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wp--custom--width--card)), 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mn-rail > li { min-inline-size: 0; }
.mn-rail > .mn-rail__more { display: none; }
.mn-rail > .is-leaving { position: absolute; margin: 0; pointer-events: none; }
.mn-rail.is-moving { overflow: clip; overflow-clip-margin: 16px; }
.mn-rail > .mn-rail__more.is-leaving { display: block; }

@container mn-units (36.5rem <= width < 55.5rem) {
	.mn-rail[data-count="3"] > :nth-child(n+3 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail[data-count="5"] > :nth-child(n+5 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail[data-count="7"] > :nth-child(n+7 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail[data-count="9"] > :nth-child(n+9 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail[data-count="11"] > :nth-child(n+11 of .mn-rail__item:not([hidden], .is-leaving)) { display: none; }
	.mn-rail:is([data-count="0"], [data-count="1"]) > .mn-rail__more.is-current { display: block; }
	.mn-rail[data-count="0"] > .mn-rail__more { grid-column: 1 / -1; }
}
@container mn-units (55.5rem <= width < 74.5rem) {
	.mn-rail:is([data-count="4"], [data-count="5"]) > :nth-child(n+4 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail:is([data-count="7"], [data-count="8"]) > :nth-child(n+7 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail:is([data-count="10"], [data-count="11"]) > :nth-child(n+10 of .mn-rail__item:not([hidden], .is-leaving)) { display: none; }
	.mn-rail:is([data-count="0"], [data-count="1"], [data-count="2"]) > .mn-rail__more.is-current { display: block; }
	.mn-rail[data-count="0"] > .mn-rail__more { grid-column: 1 / -1; }
	.mn-rail[data-count="1"] > .mn-rail__more { grid-column: span 2; }
}
@container mn-units (width >= 74.5rem) {
	.mn-rail:is([data-count="5"], [data-count="6"], [data-count="7"]) > :nth-child(n+5 of .mn-rail__item:not([hidden], .is-leaving)),
	.mn-rail:is([data-count="9"], [data-count="10"], [data-count="11"]) > :nth-child(n+9 of .mn-rail__item:not([hidden], .is-leaving)) { display: none; }
	.mn-rail:is([data-count="0"], [data-count="1"], [data-count="2"], [data-count="3"]) > .mn-rail__more.is-current { display: block; }
	.mn-rail[data-count="0"] > .mn-rail__more { grid-column: 1 / -1; }
	.mn-rail[data-count="1"] > .mn-rail__more { grid-column: span 3; }
	.mn-rail[data-count="2"] > .mn-rail__more { grid-column: span 2; }
}

/* End tile: the type's shop-by-type photo in the atmosphere grade under a scrim (the stage and its grid for All
   units), its line icon in a cyan ring, the live count large over "… in stock", and "Browse …" with the go square
   that lights like a type tile's. One column wide it stands like a card; across two or more it lies down as a band
   with the scrim from the left. Alone in its row it keeps the cards' height (--mn-rail-row, measured by units.js),
   so the band doesn't jump. The ink context is on the inner body, so the focus ring outside the tile takes the paper
   band's colour. */
.mn-rail[data-count="0"] > .mn-rail__more { min-block-size: var(--mn-rail-row, 0); }
.mn-rail-more {
	box-sizing: border-box;
	display: flex;
	block-size: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--gradient--stage);
	box-shadow: var(--wp--preset--shadow--card);
	text-decoration: none;
	container: mn-more / inline-size;
	transition:
		transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-rail-more__body {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: grid;
	flex: 1;
	grid-template: "icon icon" auto ". ." 1fr "stock go" auto / minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--40);
	padding: 24px;
}
.mn-rail-more__photo { --mn-photo-pos: 50% 55%; z-index: var(--mn-z-under); }
.mn-rail__more[data-type="trailer"] .mn-rail-more__photo { --mn-photo-pos: 38% 50%; }
.mn-rail__more[data-type="chassis"] .mn-rail-more__photo:not(.mn-photo--letterbox) { --mn-photo-pos: 50% 40%; }
.mn-rail-more__scrim { --mn-scrim: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.35) 0%, rgba(var(--wp--custom--ink-rgb), 0.55) 45%, rgba(var(--wp--custom--ink-rgb), 0.92) 100%); }
.mn-rail-more__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 1px solid var(--mn-ring-border);
	border-radius: var(--wp--custom--radius--sm);
	background: rgba(var(--wp--custom--ink-rgb), 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--mn-ring-fg);
}
.mn-rail-more__icon .mn-icon { inline-size: 24px; block-size: 24px; }
.mn-rail-more__stock { grid-area: stock; align-self: end; color: var(--mn-text); font-size: var(--wp--custom--font-size--ui); line-height: 1.4; }
.mn-rail-more__n {
	display: block;
	margin-block-end: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: var(--wp--custom--tracking--heading);
	color: var(--mn-text-strong);
}
.mn-rail-more__go { grid-area: go; align-self: end; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); font-weight: 600; }
.mn-rail-more .mn-square--go { inline-size: 48px; block-size: 48px; }
/* One column: the words under the count, the go square alone at the bottom right. */
@container mn-more (width < 30rem) {
	.mn-rail-more__body { grid-template: "icon icon" auto ". ." 1fr "stock stock" auto "go go" auto / minmax(0, 1fr) auto; }
	.mn-rail-more__go { justify-self: stretch; justify-content: space-between; }
}
/* A band: the scrim from the left, a larger count. */
@container mn-more (width >= 30rem) {
	.mn-rail-more__body { padding: clamp(28px, 4cqi, 48px); }
	.mn-rail-more__scrim { --mn-scrim: linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.9) 0%, rgba(var(--wp--custom--ink-rgb), 0.6) 45%, rgba(var(--wp--custom--ink-rgb), 0.22) 100%), linear-gradient(180deg, transparent 35%, rgba(var(--wp--custom--ink-rgb), 0.72) 100%); }
	.mn-rail-more__n { font-size: var(--wp--preset--font-size--huge); }
	.mn-rail-more__stock { font-size: var(--wp--preset--font-size--large); }
}
@media (hover: hover) and (pointer: fine) {
	.mn-rail-more:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); }
	.mn-rail-more:hover .mn-rail-more__photo > img { transform: scale(1.06); transition-duration: var(--wp--custom--motion--settle); }
}

/* Compact rows (C, phones): thumbnail left; year, title, specs and price right; the footer row across the bottom
   with the same 44 px targets. The body and head step aside (display: contents) so their parts join the grid. */
@container mn-units (width < 36.5rem) {
	.mn-rail { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); max-inline-size: 30rem; }
	.mn-rail > :nth-child(n+5 of .mn-rail__item:not([hidden], .is-leaving)) { display: none; }
	.mn-rail[data-count="0"] > .mn-rail__more.is-current { display: block; }

	/* The minimum height (photo 9.5 rem + the 53 px footer row) lets the price row take up the slack, so the
	   price sits at the bottom of the photo's height. */
	.mn-unit-card {
		display: grid;
		grid-template-columns: clamp(7.5rem, 36cqi, 8.25rem) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas: "media stock" "media title" "media specs" "media price" "foot foot";
		min-block-size: calc(9.5rem + 53px);
	}
	.mn-unit-card__body,
	.mn-unit-card__head { display: contents; }
	.mn-unit-card__media { grid-area: media; aspect-ratio: auto; }
	.mn-unit-card__empty { gap: 6px; margin-block-end: 26px; font-size: 0.625rem; letter-spacing: 0.1em; }
	.mn-unit-card__empty-icon { inline-size: 48px; block-size: 48px; }
	.mn-unit-card__empty-icon .mn-icon { inline-size: 24px; block-size: 24px; }
	.mn-unit-card__count { display: none; }
	.mn-unit-card__status { inset-inline-start: 8px; inset-block-end: 8px; block-size: 24px; padding-inline: 8px; font-size: 0.71875rem; }
	.mn-sold-stamp__word { font-size: 1.125rem; }
	.mn-unit-card.is-sold { min-block-size: 8.25rem; } /* No footer row on a sold card. */
	.mn-unit-card__stock { grid-area: stock; padding: 14px 14px 0; }
	.mn-unit-card__title { grid-area: title; padding: 14px 14px 0; font-size: 1.03125rem; line-height: 1.25; -webkit-line-clamp: 3; line-clamp: 3; } /* the year + two lines */
	.mn-unit-card__stock + .mn-unit-card__title { padding-block-start: 6px; }
	.mn-unit-card__year {
		display: block;
		margin-block-end: 4px;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.04em;
		color: var(--mn-link);
	}
	/* Values on one line split by dots: the row has no room for the plate's labels or icons, which stay for readers
	   (labels) or step aside (icons). Every value carries its dot in a 12 px gap and the strip clips its own start
	   edge, so a value that wraps to a new line never starts with a dot. */
	.mn-unit-card__specs { grid-area: specs; display: flex; flex-wrap: wrap; column-gap: var(--wp--preset--spacing--30); margin: 6px 14px 0; padding: 0; overflow: hidden; border: 0; background: none; }
	.mn-unit-card__specs > div,
	.mn-unit-card__specs > div + div { display: flex; align-items: baseline; margin-inline-start: -12px; padding: 0; border: 0; }
	.mn-unit-card__specs > div::before { content: "·"; content: "·" / ""; flex: none; inline-size: 12px; color: var(--mn-text-muted); text-align: center; }
	.mn-unit-card__specs dt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.mn-unit-card__spec-icon { display: none; }
	.mn-unit-card__specs dd { margin: 0; color: var(--mn-text); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; line-height: 1.45; }
	.mn-unit-card__price { grid-area: price; align-self: end; padding: 8px 14px 14px; font-size: var(--wp--custom--font-size--ui); }
	.mn-unit-card__foot { grid-area: foot; gap: 6px; margin: 0; padding: 4px 8px 4px 14px; border-block-start: 1px solid var(--mn-rule); }
	/* The end tile as a row: icon and count over the words on the left, the go square on the right. */
	.mn-rail-more__body { grid-template: "icon go" auto "stock go" auto / minmax(0, 1fr) auto; align-items: end; min-block-size: 11rem; padding: 18px 20px; }
	.mn-rail-more__go { justify-content: flex-end; }
	.mn-rail-more__browse { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.mn-rail-more__n { margin-block-end: 4px; font-size: var(--wp--preset--font-size--xx-large); }
}

.mn-rail-foot { margin: var(--wp--preset--spacing--60) 0 0; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }

/* 3. Shop by type (14 §4): bento tiles --------------------------------------------------------------------------- */
/* Graded photo (one ramp; letterboxed phone exports cropped), the tile scrim, an LED chip with the live count, the
   title and one line, and the arrow square that fills cyan when the tile is hovered or focused. One column on
   phones; Trucks full width over two halves from 600 px; from 960 px Trucks spans two rows on the left (7:5). */

.mn-types { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); margin: 0; padding: 0; list-style: none; }
.mn-type {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 15rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--ink-3);
	box-shadow: var(--wp--preset--shadow--card);
	transition:
		transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-type--truck { min-block-size: 21.25rem; }

/* Focal points per type; a letterboxed photo stays centred vertically, or the crop would show a bar. The photo
   zooms slowly on hover (settle, 1600 ms), slower than a card's photo. */
.mn-type__photo { z-index: var(--mn-z-under); }
.mn-type--truck .mn-type__photo { --mn-photo-pos: 70% 55%; }
.mn-type--trailer .mn-type__photo { --mn-photo-pos: 38% 50%; }
.mn-type--chassis .mn-type__photo:not(.mn-photo--letterbox) { --mn-photo-pos: 50% 40%; }
.mn-type__photo > img { transition-duration: var(--wp--custom--motion--settle); }
/* The chassis tile when its yard photo is already on the page (cards.php): a Max-Atlas render on the studio sweep,
   held in the tile's upper light so the caption keeps the scrim below it. */
.mn-type__studio { position: absolute; inset: 0; }
.mn-type__studio > img { padding: 4% 12% 22%; }
/* The sweep is light where a photo is mid-tone: the caption's shade starts sooner and ends deeper. */
.mn-type__studio > .mn-scrim--tile { --mn-scrim: linear-gradient(180deg, transparent 30%, rgba(var(--wp--custom--ink-rgb), 0.72) 58%, rgba(var(--wp--custom--ink-rgb), 0.94) 100%); }

.mn-type__top { position: absolute; inset-block-start: 16px; inset-inline: 16px; display: flex; align-items: flex-start; }
.mn-type__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--40); padding: 22px; }
.mn-type__text { display: grid; flex: 1; gap: var(--wp--preset--spacing--20); min-inline-size: 0; }
.mn-type__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--heading);
	color: var(--mn-text-strong);
}
.mn-type__line { margin: 0; max-inline-size: 40ch; color: var(--mn-text); font-size: var(--wp--custom--font-size--ui); line-height: 1.45; }
/* C's tile go square is 48 px (02 §7.28), a step up from the 44 px quiet square. */
.mn-type .mn-square--go { inline-size: 48px; block-size: 48px; }

/* Sub-types (the Inventory menu's own links, with stock only): small glass chips, 36 px tall with a 44 px target,
   that turn cyan on hover. */
.mn-type__subs ul { display: flex; gap: 8px 6px; margin: 0; padding: 0; list-style: none; }
.mn-type__sub {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	block-size: 36px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wp--custom--radius--xs);
	background: rgba(var(--wp--custom--ink-rgb), 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-type__sub::after { content: ""; position: absolute; inset: -4px 0; }
.mn-type__sub:hover { border-color: var(--wp--preset--color--cyan); background: var(--wp--preset--color--cyan); color: var(--wp--preset--color--ink-1); }

/* Desktop pointer: the chips wait, invisible but in the tab order, in a zero-height row above the title (they may
   reach over the go square's column); hover or focus inside the tile raises them, one after another.
   They take no clicks until then, so a click on the photo still opens the type. The row is anchored at its foot,
   so a second row grows upwards. */
@media (hover: hover) and (pointer: fine) {
	.mn-type__subs { grid-row: 1; block-size: 0; margin-block-end: calc(-1 * var(--wp--preset--spacing--20)); }
	.mn-type__subs ul { position: absolute; inset-block-end: 14px; inset-inline: 0 calc(-48px - var(--wp--preset--spacing--40)); flex-wrap: wrap; pointer-events: none; }
	.mn-type__subs li {
		opacity: 0;
		transform: translateY(8px);
		transition:
			opacity var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
			transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out);
	}
	.mn-type:is(:hover, :focus-within) .mn-type__subs ul { pointer-events: auto; }
	.mn-type:is(:hover, :focus-within) .mn-type__subs li { opacity: 1; transform: none; }
	.mn-type:is(:hover, :focus-within) .mn-type__subs li:nth-child(2) { transition-delay: calc(var(--wp--custom--motion--stagger) * 0.5); }
	.mn-type:is(:hover, :focus-within) .mn-type__subs li:nth-child(3) { transition-delay: var(--wp--custom--motion--stagger); }
	.mn-type:is(:hover, :focus-within) .mn-type__subs li:nth-child(4) { transition-delay: calc(var(--wp--custom--motion--stagger) * 1.5); }
	.mn-type:is(:hover, :focus-within) .mn-type__subs li:nth-child(n+5) { transition-delay: calc(var(--wp--custom--motion--stagger) * 2); }

	.mn-type:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); }
	.mn-type:hover .mn-type__photo > img { transform: scale(1.08); }
	.mn-type__top { transition: opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
}
/* A narrow tile with six or more sub-types needs three rows, which reach the count chip: it steps back meanwhile. */
@media (hover: hover) and (pointer: fine) and (max-width: 1239px) {
	.mn-type:has(.mn-type__subs li:nth-child(6)):is(:hover, :focus-within) .mn-type__top { opacity: 0; }
}

/* Touch: the chips are a row under the line, always there, that scrolls sideways and fades at its end. */
@media not ((hover: hover) and (pointer: fine)) {
	.mn-type__subs {
		margin: 4px 0 -4px;
		padding-block: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}
	.mn-type__subs::-webkit-scrollbar { display: none; }
	.mn-type__subs ul { flex-wrap: nowrap; padding-inline-end: 28px; }
}

@media (min-width: 600px) {
	.mn-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-type { min-block-size: 17.5rem; }
	.mn-type--truck { grid-column: 1 / -1; min-block-size: 22.5rem; }
	.mn-type__top { inset-block-start: 20px; inset-inline: 20px; }
	.mn-type__body { padding: 24px; }
}
@media (min-width: 960px) {
	.mn-types { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, minmax(17.5rem, auto)); }
	.mn-type--truck { grid-column: 1; grid-row: 1 / span 2; }
	.mn-type__body { padding: 28px; }
	.mn-type--truck .mn-type__top { inset-block-start: 28px; inset-inline: 28px; }
	/* The tall tile pads wider, but its bottom matches the stacked tiles' so the bento's bottom lines meet. */
	.mn-type--truck .mn-type__body { padding: 36px 36px 28px; }
	.mn-type--truck .mn-type__title { font-size: var(--wp--preset--font-size--xxx-large); }
}

/* 3b. The card grid (02 §7.10): auto-fill cards, one column in a narrow container (mn-units). The listing, similar
   units, recently sold and the model page's units print it. */
.mn-inv__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wp--custom--width--card)), 1fr)); gap: var(--wp--preset--spacing--50); margin: 0; padding: 0; list-style: none; }
.mn-inv__item { min-inline-size: 0; }
@container mn-units (width < 36.5rem) {
	.mn-inv__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
}

/* The title over a grid of similar units (the listing's no-results band, the unit page). */
.mn-similar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-block-end: var(--wp--preset--spacing--50); }
.mn-similar__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.mn-sold-rail > .mn-container { container: mn-units / inline-size; }

/* 4. Reduced motion: theme.css §24 stops every transition; the hover lifts, tilts, zooms and nudges go too, and the
   sub-type chips and the edge light simply appear. units.js skips the FLIP, the thumb's glide and the count-up. */

@media (prefers-reduced-motion: reduce) {
	.mn-unit-card:hover,
	.mn-type:hover,
	.mn-rail-more:hover,
	.mn-unit-card:hover .mn-unit-card__media > img,
	.mn-type:hover .mn-type__photo > img,
	.mn-type__subs li,
	.mn-unit-card:hover .mn-unit-card__request .mn-icon,
	.mn-unit-card__request:hover .mn-icon,
	.mn-rail-more:hover .mn-rail-more__go .mn-icon { transform: none; }
}