:root {
  /* Brand — a deeper, warmer red. The old #ef5350 only reached ~3:1 on white,
     which made accent text (headings, prices, links) hard to read. */
  --primary-red: #c8392f;
  --primary-red-strong: #a72b23;
  --primary-red-soft: #fdf3f1;
  --primary-red-soft-hover: #fbe7e3;
  --primary-red-line: #f0d5d1;

  /* Neutrals — warm off-whites instead of pure grey/white so the large empty
     areas stop reading as "too white". */
  --page-bg: #f6f3f0;
  --surface: #fff;
  --surface-alt: #faf8f5;
  --bg-light: #f1ede8;
  /* Compare matrix: alternating value rows sit on the lighter --bg-alt-section,
     while the field-title column (spec names) stays a touch darker so the labels
     read apart from the values. */
  --bg-alt-section: #f2eee9;
  --bg-row-label: #ebe6e0;
  /* Compare "highlight differences": the rows the cars disagree on take a warm
     amber band (distinct from the brand red used for actions), and the rows they
     agree on step back behind it. */
  --diff-highlight: #fdf3d9;
  --diff-highlight-line: #ecd9a8;
  /* Inactive site-nav tabs are raised chips, so they need to stay clearly
     darker than the warm page wash behind them — --bg-light alone reads as the
     same colour as --page-bg. */
  --nav-tab-bg: #e7e1d9;
  /* A card on a **white** ground takes the page's own wash, so it never sits on white.
     Where the ground is already a wash the card keeps the white it always had: the two
     swap, they do not stack (see .model-card / .home-compare-card and the section
     override under them). The tone is deliberately a shade lighter than --bg-light,
     which is what the tag pills are filled with: a card darker than the pills would
     swallow the pills sitting on it. The dark band runs its own way — its tiles step
     *up* from black, they do not step down (see .home-section-dark). */
  --card-bg: var(--page-bg);
  --border-color: #e5dfd8;
  --border-strong: #d6cfc5;
  --text-dark: #2d2724;
  --text-muted: #6d6660;
  --no-image-bg: #e4e4e4;

  /* Elevation — soft, warm-tinted shadows rather than grey/black ones. */
  --shadow-xs: 0 1px 2px rgba(45, 34, 25, 0.05);
  --shadow-sm: 0 1px 3px rgba(45, 34, 25, 0.07), 0 1px 2px rgba(45, 34, 25, 0.04);
  --shadow-md: 0 8px 20px rgba(45, 34, 25, 0.1);
  --shadow-pop: 0 10px 26px rgba(45, 34, 25, 0.14);
  --section-col-width: 90px;
  --label-col-width: 116px;
  --catalog-filter-height: 0px;
  --page-pad: 12px;
  --content-max-width: 1300px;
  /* Fixed width of the compare page's "+" rail (see .compare-slot-rail). */
  --slot-rail-width: 44px;
}

body {
  /* Vazirmatn is a single family covering Latin + Arabic (incl. Kurdish Sorani
     and Farsi) with harmonised metrics, so Arabic-script locales (ar / ckb / fa)
     render at the same visual size as Latin — no per-locale size overrides. */
  font-family: Vazirmatn, "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: var(--page-pad);
  /* Warm page wash: a touch lighter at the top so the chrome reads as part of
     the page instead of a hard white band. */
  background-color: var(--page-bg);
  background-image: linear-gradient(180deg, #faf8f5 0%, var(--page-bg) 340px);
  background-repeat: no-repeat;
  color: var(--text-dark);
}

::selection {
  background: #f4cdc8;
  color: #5f1c17;
}

/* Native form controls default to the OS UI font rather than inheriting, so
   force them onto the page font to keep every UI string consistent. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Compare: only the matrix scrolls — avoids the chrome sliding with body padding.
   Every other page (brands, car details, advanced search, best picks, home) lays
   out at natural height so the document scrolls. */
body:not(.brand-browse-page):not(.car-details-page):not(.advanced-search-page):not(.best-picks-page):not(.home-page) {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

h1 {
  text-align: center;
  color: var(--primary-red);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.compare-shell {
  position: relative;
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: 100%;
}

.compare-container {
  max-width: none;
  margin: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Compare content sits in the same white panel as Brands / Advanced search /
   Best Picks, so every page frames its content identically. */
.compare-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.compare-panel .catalog-filters {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
  /* Sticky, like the Brands filter line: the spec table is long, so the filter line stays at the
     top of the pane (its scrollport is `.compare-container`) and the table's own sticky selector
     row pins directly beneath it — offset by this panel's measured height
     (`--catalog-filter-height`, published by public/js/catalog-filters.js `syncHeight()`), so the
     two never overlap. The opaque surface keeps the rows from showing through the pinned line. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 41;
}

/* ---- Compare: progressive slots ("+" rail) --------------------------------- */
/* The table and the rail are flex items of one row: the slots a visitor reveals
   are then equal columns (one car takes the table's full width, two split it,
   three split it three ways), and the rail is a fixed-width strip beside them.
   The rail itself is exactly the table's height — as long as the table, never
   past its top or bottom — and the "+" inside it is the sticky part (see below).
   Only the table shares this row: the bars above and the legend below stay full
   width. */
.compare-table-row {
  display: flex;
  align-items: stretch;
}

/* The table takes the row's width minus the rail. `flex-basis: 0` (rather than
   the stylesheet's `width: 100%`) is what makes that exact, and `min-width: 0`
   keeps the fixed-layout table from shoving the rail out of the viewport. */
.compare-table-row > #compareTable {
  flex: 1 1 0%;
  min-width: 0;
}

/* The two outline columns (section name, field name) are fixed: their widths are
   pinned in every row — header and body — so neither revealing another car nor the
   width of a car's content can resize them. */
#compareTable th.selector-section-spacer,
#compareTable th.image-row-spacer,
#compareTable th.details-row-spacer,
#compareTable tbody th.section-header {
  width: var(--section-col-width);
}

#compareTable th.selector-label,
#compareTable tbody td.row-label {
  width: var(--label-col-width);
}

/* The car columns take everything left over, shared equally — so revealing a third
   car shrinks the cars, never the labels. */
#compareTable thead th.selector-slot {
  width: auto;
}

.compare-slot-rail {
  flex: 0 0 var(--slot-rail-width);
  width: var(--slot-rail-width);
  display: flex;
  box-sizing: border-box;
  padding: 6px 4px;
}

/* The "+": a fixed-width bar that fills the rail when the table is shorter than
   the screen, and is capped at the visible page (100dvh) when the table is longer
   — sticky, so it tracks the viewport down the spec list, and bounded by the rail
   so it can never run past the table's bottom. */
.compare-slot-add {
  position: -webkit-sticky;
  position: sticky;
  /* Tracks the viewport down the spec list *below* the sticky filter line: it starts where that
     line ends, and its cap shrinks by the same amount so it still cannot run past the pane. */
  top: var(--catalog-filter-height, 0px);
  flex: 1 1 auto;
  max-height: calc(100dvh - var(--catalog-filter-height, 0px));
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  /* A card-shaped control on the page panel, so it takes the card surface. */
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.compare-slot-add:hover:not(:disabled) {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background: var(--primary-red-soft);
}


/* Slot columns a visitor has not revealed yet: hidden outright, so the columns
   that remain take the freed width. */
.slot-hidden {
  display: none;
}

/* ---- Compare: highlight differences --------------------------------------- */
/* The one control over the table: a push-button toggle in the table's first column,
   and it hides with that cell when nothing is being compared (the
   .is-comparison-empty rules). Emptying the table is each column's own X over its
   picker (see .slot-clear), not a button up here. That column is only
   --section-col-width wide, so the label keeps to the small bold voice of the chips
   around it. Off is a quiet chip; on is filled with the brand red, which is the state
   a visitor has to be able to read at a glance. */
.compare-diff-toggle {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 2px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.compare-diff-toggle:hover:not(:disabled) {
  color: var(--primary-red);
  border-color: var(--primary-red);
}

.compare-diff-toggle.is-active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: var(--surface);
}

.compare-diff-toggle.is-active:hover:not(:disabled) {
  background: var(--primary-red-strong);
  border-color: var(--primary-red-strong);
  color: var(--surface);
}

.compare-diff-toggle:disabled {
  opacity: 0.5;
  cursor: default;
}

.fancybox__container {
  z-index: 12999 !important;
}

.compare-shell.can-scroll-left::before,
.compare-shell.can-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 34;
}

.compare-shell.can-scroll-left::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
}

.compare-shell.can-scroll-right::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
}

.page-sticky-chrome {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--page-bg);
}

/* Compare + brands: nav/filters scroll away; Model/Trim or brand toolbar pin below. */
body:not(.car-details-page) .page-sticky-chrome {
  position: static;
  z-index: auto;
}

.site-nav-shell {
  display: flex;
  align-items: stretch;
  position: relative;
  /* Clearance band between the controls and the page edge. The tab strip
     overhangs it (see .site-nav-link), so the tabs still land on the page,
     while the language selector keeps breathing room above the hairline. */
  --site-nav-edge-gap: 2px;
  padding-bottom: var(--site-nav-edge-gap);
  /* Transparent so the warm page wash shows through the tab row. */
  background: transparent;
}

/* The page edge under the tabs is drawn as an overlay (not a border) so it can
   paint ABOVE the inactive tabs — they stay tucked behind the page — and below
   the active one, which merges into the page. Tab boxes cross the shell's
   clearance band (see .site-nav-link) and stop exactly on the edge below. */
.site-nav-shell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-color);
  z-index: 2;
  pointer-events: none;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0 0 0 2px;
  background: transparent;
  flex: 1 1 auto;
}

.site-nav-locale {
  position: relative;
  display: flex;
  align-items: center;
  /* Flush with the right edge of the chrome — no padding. */
  padding: 0;
}

.locale-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Language trigger styled like the model/trim selector control. */
.trim-trigger.locale-switcher-trigger {
  width: auto;
  min-width: 140px;
  padding: 8px 12px;
  font-size: 13px;
}

/* Center the selected language label within the trigger. */
.trim-trigger.locale-switcher-trigger .trim-trigger-main {
  justify-content: center;
}

/* Language dropdown list styled like the trim list; anchored directly under and
   the same width as the trigger (overrides the fixed positioning that the
   compare dropdowns use, and keeps the list aligned with the input box). */
.search-dropdown.locale-switcher-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  min-width: 0;
}

/* Center each language option within its row. */
.trim-option.locale-option {
  justify-content: center;
  text-align: center;
}

/* Language names render in their own script regardless of page direction. */
.locale-option .trim-option-text,
.locale-switcher-trigger .trim-trigger-label {
  direction: ltr;
}

/* The filter panel sits on the same light wash as the car-details data blocks, so the
   group cards on it read as surfaces. */
.catalog-filters {
  background: var(--page-bg);
  border: 1px solid var(--border-color);
  border-top: none;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.catalog-filters.is-collapsed {
  padding-bottom: 10px;
  gap: 0;
}

.catalog-filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.catalog-filters-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.catalog-filters-toggle:hover {
  border-color: var(--text-muted);
  background: var(--surface-alt);
}

.catalog-filters-toggle:hover .catalog-filters-toggle-chevron {
  border-color: var(--text-dark);
}

.catalog-filters-toggle[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--bg-light);
}

.catalog-filters-toggle-chevron {
  flex-shrink: 0;
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 1px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translateY(-15%);
  transition: transform 0.15s ease;
}

.catalog-filters-toggle[aria-expanded="true"] .catalog-filters-toggle-chevron {
  transform: rotate(-135deg) translateY(-15%);
}

.catalog-filters-toggle-label {
  color: var(--text-dark);
}

.catalog-filters-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.catalog-filters-toggle.is-filtered .catalog-filters-toggle-count {
  background: var(--primary-red);
  color: #fff;
}

/* The groups are cards in a wrapping row — three per line (see .catalog-filter-group) —
   and `stretch` keeps every card on a line as tall as the tallest one beside it, so a card
   with 9 options doesn't leave its 6-option neighbour looking short. */
.catalog-filters-body {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.catalog-filters-body[hidden] {
  display: none;
}

/* Each filter group is a card — heading on top, its options underneath — mirroring the
   car-details spec blocks. Three per line (the 8px row gap is shared, so a card gives back
   two thirds of it). Chips stretch, so every option on a line ends up the same height as the
   tallest one beside it — a label that wraps no longer stands proud of its neighbours. */
.catalog-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 5px;
  flex: 1 1 calc(33.333% - 6px);
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface);
}

/* Driver assist (nine systems) and Brand (~96 chips) take a whole row each; Phone and
   Comfort share one, half each. */
.catalog-filter-group-wide {
  flex-basis: 100%;
}

.catalog-filter-group-half {
  flex-basis: calc(50% - 4px);
}

/* The heading takes its own line, so the options sit under it. */
.catalog-filter-label {
  flex: 1 0 100%;
  min-width: 0;
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tinted chips, like the key-spec pills on the car-details page, so they read as chips on
   the white card behind them. Corners stay small: a full pill wastes a few pixels of a row
   in every direction, and these rows carry dozens of options. */
.catalog-filter-chip {
  appearance: none;
  /* Inline-flex, so a wrapped two-line label stays centred in the stretched chip. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.catalog-filter-chip:hover {
  border-color: var(--text-muted);
  background: var(--surface-alt);
}

.catalog-filter-chip.is-active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: #fff;
}

/* Free-text name filter — sits in the toolbar so it survives the panel
   collapsing; compact input + clear button, no suggestion list. Its 6px corner is
   the shared control radius (the chips, .brand-make-input, the sort pills and the
   pager buttons all use it), so it no longer reads as an outlier pill beside them. */
.catalog-filter-name-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 300px;
}

.catalog-filter-name-input {
  width: 100%;
  padding: 4px 22px 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--surface);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.catalog-filter-name-input:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-soft-hover);
}

.catalog-filter-name-input::placeholder {
  color: var(--text-muted);
  font-weight: normal;
}

.catalog-filter-name-clear {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.catalog-filter-name-clear:hover {
  color: var(--text-dark);
}

.catalog-filter-name-clear[hidden] {
  display: none;
}

.catalog-filter-group-range {
  align-items: center;
}

.catalog-filter-range {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 280px;
}

.catalog-filter-range-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
}

.catalog-filter-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: var(--border-strong);
  pointer-events: none;
}

.catalog-filter-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--primary-red);
  opacity: 0.85;
}

.catalog-filter-range-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  /* Direction is inherited from the page so the native thumbs mirror in RTL
     (min on the right, max on the left). The fill is positioned to match via
     JS, which reads document.documentElement.dir. */
  pointer-events: none;
  z-index: 2;
}

.catalog-filter-range-thumb[data-rel-thumb="max"] {
  z-index: 3;
}

.catalog-filter-range-thumb.is-active-thumb {
  z-index: 4;
}

.catalog-filter-range-thumb::-webkit-slider-runnable-track {
  height: 3px;
  background: transparent;
}

.catalog-filter-range-thumb::-moz-range-track {
  height: 3px;
  background: transparent;
  border: none;
}

.catalog-filter-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--primary-red);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  pointer-events: auto;
}

.catalog-filter-range-thumb::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--primary-red);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  pointer-events: auto;
}

.catalog-filter-range-readout {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.catalog-filter-group-range.is-filtered .catalog-filter-range-readout {
  color: var(--text-dark);
}

.catalog-filter-clear {
  appearance: none;
  border: 1px solid var(--primary-red-line);
  background: var(--primary-red-soft);
  color: var(--primary-red);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.catalog-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* RTL: mirror the action bar to the left (e.g. "Clear comparison") and flip the
   trim-trigger alignment so labels/chevrons sit on the correct side. */
[dir="rtl"] .catalog-filter-actions {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .trim-trigger {
  text-align: right;
}

/* The trigger holds two different kinds of string: the translated "Select trim"
   prompt when empty, and an English trim designator once a trim is picked. The
   empty state follows the page direction (prompt at the inline start, chevron at
   the inline end), while the filled state renders like the LTR locales — value on
   the left, chevron on the right — which is what the English designator needs.
   (The previous rule only moved the chevron for the placeholder, and did it with
   a `left` offset on a static flex item, so it never took effect.) */
[dir="rtl"] .trim-trigger:has(.trim-trigger-label:not(.is-placeholder)) {
  direction: ltr;
  text-align: left;
}

.catalog-filter-clear:hover:not(:disabled) {
  border-color: var(--primary-red);
  background: var(--primary-red-soft-hover);
  color: var(--primary-red);
}

.catalog-filter-clear:disabled {
  opacity: 0.45;
  cursor: default;
}

.catalog-filter-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.catalog-filter-count-n {
  color: var(--text-dark);
  font-weight: 700;
}

.catalog-filter-count-total {
  color: var(--text-dark);
  font-weight: 600;
}

.catalog-filter-count-of,
.catalog-filter-count-word,
.catalog-filter-count-matching {
  color: var(--text-muted);
  font-weight: 500;
}

.catalog-filter-count-sep {
  color: var(--border-strong);
  font-weight: 400;
}

.catalog-filter-count[hidden] {
  display: none;
}

.slot-clear {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.slot-clear:hover:not(:disabled) {
  color: var(--primary-red);
  background: var(--primary-red-soft);
}

.slot-clear[hidden] {
  display: none;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
}

#compareTable.is-comparison-empty {
  border: none;
}

#compareTable.is-comparison-empty #image-row,
#compareTable.is-comparison-empty #details-row,
#compareTable.is-comparison-empty tbody,
#compareTable.is-comparison-empty .trim-container,
#compareTable.is-comparison-empty .selector-field-label-trim,
#compareTable.is-comparison-empty .selector-section-spacer {
  display: none;
}

#compareTable.is-comparison-empty #selector-row th.selector-label {
  left: 0;
}

th,
td {
  padding: 12px 6px;
  border: 1px solid var(--border-color);
  vertical-align: middle;
}

/* Sticky model/trim row only — image row scrolls away */
#compareTable thead th {
  background-color: var(--surface);
  text-align: center;
  width: 25%;
}

#selector-row th {
  background-color: var(--surface);
}

#selector-row th.selector-section-spacer,
#image-row th.selector-section-spacer,
#details-row th.selector-section-spacer {
  background-color: var(--bg-light);
  width: var(--section-col-width);
  min-width: var(--section-col-width);
  max-width: var(--section-col-width);
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
}

#image-row th.image-row-spacer,
#details-row th.details-row-spacer {
  background-color: var(--bg-light);
  width: var(--label-col-width);
  min-width: var(--label-col-width);
  max-width: var(--label-col-width);
  position: -webkit-sticky;
  position: sticky;
  left: var(--section-col-width);
  z-index: 3;
}

#details-row th {
  background-color: var(--surface);
  text-align: center;
  padding-top: 8px;
  padding-bottom: 10px;
  vertical-align: middle;
}

#selector-row th.selector-label {
  position: -webkit-sticky;
  position: sticky;
  /* Pinned under the sticky filter line, not at the pane's edge (see the rule above). */
  top: var(--catalog-filter-height, 0px);
  left: var(--section-col-width);
  z-index: 20;
  background-color: var(--bg-light);
  vertical-align: middle;
  width: var(--label-col-width);
  min-width: var(--label-col-width);
  max-width: var(--label-col-width);
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 2px 2px 6px rgba(45, 34, 25, 0.07);
}

#selector-row th.selector-section-spacer {
  /* The row's first cell (the "Highlight differences" control) pins with its siblings — it is
     the one cell of the row that carries the `left: 0` rule, so it needs the vertical offset
     spelled out here as well, or it slides under the sticky filter line. */
  top: var(--catalog-filter-height, 0px);
  z-index: 21;
  box-shadow: 2px 2px 6px rgba(45, 34, 25, 0.07);
}

.selector-label-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.selector-field-label {
  display: flex;
  align-items: center;
  min-height: 35px;
  color: var(--text-muted);
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  padding: 0 4px;
  box-sizing: border-box;
}

.selector-label-stack .selector-field-label:first-child {
  min-height: 52px;
}

#selector-row th.selector-slot {
  position: -webkit-sticky;
  position: sticky;
  /* …same offset for the picker columns beside the label. */
  top: var(--catalog-filter-height, 0px);
  overflow: hidden;
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 2px 6px rgba(45, 34, 25, 0.08);
}

#selector-row th.selector-slot[data-slot="0"] {
  z-index: 16;
}

#selector-row th.selector-slot[data-slot="1"] {
  z-index: 15;
}

#selector-row th.selector-slot[data-slot="2"] {
  z-index: 14;
}

#image-row th {
  background-color: var(--surface);
  z-index: 1;
  padding: 4px;
}

#compareTable thead th:first-child {
  background-color: var(--bg-light);
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow: visible;
}

.selector-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.search-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-soft-hover);
}

.model-field:focus-within {
  outline: none;
  border-color: var(--primary-red);
}

.model-field {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: text;
  padding-left: 8px;
  padding-right: 8px;
}

.model-field:has(.slot-clear:not([hidden])) {
  padding-right: 22px;
}

.model-field-cluster {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.model-field-input {
  flex: 0 1 auto;
  box-sizing: content-box;
  width: auto;
  min-width: 6em;
  max-width: 100%;
  field-sizing: content;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-field-input:placeholder-shown {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  text-align: center;
}

.model-field-input:focus::placeholder {
  color: transparent;
}

.model-field-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.model-field-tags[hidden] {
  display: none;
}

.model-field-tags .dropdown-tag {
  padding: 0 4px;
  font-size: 10px;
  line-height: 1.3;
}

.search-input:disabled,
.trim-trigger:disabled {
  opacity: 0.7;
  cursor: default;
}

.trim-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background: var(--surface);
  color: var(--text-dark);
  padding-left: 8px;
  padding-right: 8px;
}

.trim-trigger-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.trim-trigger-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-trigger-chevron {
  flex-shrink: 0;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 1px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translateY(-20%);
  font-size: 11px;
  color: transparent;
  line-height: 1;
}

.trim-trigger:not(:disabled):hover .trim-trigger-chevron {
  border-color: var(--text-dark);
}

.trim-trigger[aria-expanded="true"] .trim-trigger-chevron {
  transform: rotate(-135deg) translateY(-20%);
}

.trim-dropdown {
  padding: 0;
}

.trim-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface);
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  /* The same row style draws the trim pickers' <button>s and the language
     switcher's <a>s; an anchor would otherwise underline its label. */
  text-decoration: none;
  cursor: pointer;
  color: var(--text-dark);
  box-sizing: border-box;
}

.trim-option-text {
  min-width: 0;
}

.trim-trigger-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}

.trim-trigger-tags .dropdown-tag {
  padding: 0 3px;
  font-size: 10px;
  line-height: 1.25;
}

.trim-option:last-child {
  border-bottom: none;
}

.trim-option:hover:not(:disabled) {
  background-color: var(--bg-light);
}

/* A trim another slot already holds: clickable-looking but inert, so the compare
   can never contain the same trim twice (the view binds `:disabled`). */
.trim-option:disabled {
  background-color: var(--surface);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.trim-option.is-selected {
  background-color: var(--bg-alt-section);
  color: var(--text-dark);
}

.trim-option.is-selected:hover:not(:disabled) {
  background-color: var(--bg-alt-section);
}

.trim-option.is-disabled,
.trim-option:disabled {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
  opacity: 0.7;
}

.trim-option.is-disabled:hover,
.trim-option:disabled:hover {
  background-color: var(--surface);
}

.search-dropdown {
  position: fixed;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  max-height: min(320px, 50vh);
  overflow-y: auto;
  z-index: 9999 !important;
  box-shadow: var(--shadow-pop);
  display: none;
  text-align: left;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
}

.search-dropdown.show {
  display: block;
}

.dropdown-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background-color: var(--bg-light);
}

.dropdown-text {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-dark);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dropdown-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 2px;
}

.dropdown-tag {
  display: inline-block;
  flex: 0 0 auto;
  /* The glyphs sat high in the box: an 11px font in a 1.3 line box leaves its slack
     below the baseline, so the text reads as off-centre. The vertical padding is
     top-heavy by that one pixel — the text drops 1px and the pill keeps the same height
     (2px of vertical padding either way). */
  padding: 2px 4px 0;
  border-radius: 3px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  /* A pill is a raised chip, and the surface it sits on (a card, a slide) is close to
     its own tone: the hair of shadow under it is what keeps the two apart, without
     out-shouting the card's own elevation. */
  box-shadow: var(--shadow-sm);
}

.dropdown-tag-muted {
  background: var(--bg-light);
  border-color: var(--border-color);
  color: var(--text-muted);
  font-weight: 600;
}

.dropdown-tag-hybrid {
  background: #e9f1f9;
  border-color: #cbdcee;
  color: #26577f;
}

.dropdown-tag-dealer {
  background: #e9f4ec;
  border-color: #c9e2d1;
  color: #276344;
}

.dropdown-tag-market {
  background: #fbf3dd;
  border-color: #ecdcab;
  color: #85671a;
}

.no-results {
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.image-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 2px;
}

/* Transparent photo-count badge overlaid on the low corner of a card/compare image. */
.image-count-tag {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.car-image-btn {
  appearance: none;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 6px;
  width: 100%;
}

.car-image-btn:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

.car-details-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 120px;
  max-width: 200px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(21, 101, 192, 0.28);
  border-radius: 6px;
  background: #e9f1f9;
  color: #1c5f9e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.car-details-link:hover {
  border-color: rgba(21, 101, 192, 0.45);
  color: #14487a;
  background: #dbe8f5;
}

.car-details-link:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

.car-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  display: block;
  pointer-events: none;
}

.image-fallback {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  /* Car names are English; the empty-slot prompt is a hardcoded English string. */
  direction: ltr;
  background: linear-gradient(135deg, #f0ebe5, #dad2c9);
  color: var(--text-dark);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  border: 1px dashed var(--border-strong);
}

.image-fallback.slot-empty {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
}

.trim-trigger-label.is-placeholder {
  flex: 1 1 auto;
  width: 100%;
  color: var(--text-muted);
  text-align: center;
}

.trim-trigger:has(.trim-trigger-label.is-placeholder) {
  /* Keep placeholder clear of the absolute chevron on narrow slots. */
  padding-left: 18px;
  padding-right: 18px;
}

.trim-trigger:has(.trim-trigger-label.is-placeholder) .trim-trigger-main {
  flex: 1;
  justify-content: center;
}

.trim-trigger:has(.trim-trigger-label.is-placeholder) .trim-trigger-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: rotate(45deg) translateY(-70%);
}

th.section-header {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--section-col-width);
  min-width: var(--section-col-width);
  max-width: var(--section-col-width);
  background-color: var(--bg-light);
  color: var(--primary-red);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  text-align: left;
  border-right: 2px solid var(--primary-red);
  box-shadow: 2px 0 6px rgba(45, 34, 25, 0.06);
}

/* Full-width red rule between spec sections */
tr.section-spacer td {
  padding: 0;
  height: 2px;
  line-height: 0;
  font-size: 0;
  border: none;
  background-color: var(--primary-red);
}

td.row-label {
  position: -webkit-sticky;
  position: sticky;
  left: var(--section-col-width);
  z-index: 3;
  width: var(--label-col-width);
  min-width: var(--label-col-width);
  max-width: var(--label-col-width);
  background-color: var(--bg-row-label);
  font-weight: bold;
  color: var(--text-muted);
  font-size: 13px;
  box-shadow: 2px 0 6px rgba(45, 34, 25, 0.06);
}

td.data-cell {
  text-align: center;
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.4;
}

tr.section-even td.data-cell {
  background-color: var(--surface);
}

tr.section-odd td.data-cell {
  background-color: var(--bg-alt-section);
}

/* Rows the compared cars disagree on: the amber band overrides the section
   striping (an id-qualified selector, so it does not depend on source order), and
   the label column is banded with the cells so the differing field is named, not
   just marked. */
#compareTable tbody tr.row-differs td.data-cell,
#compareTable tbody tr.row-differs td.row-label {
  background-color: var(--diff-highlight);
  box-shadow: inset 0 1px 0 var(--diff-highlight-line), inset 0 -1px 0 var(--diff-highlight-line);
}

/* The rows they agree on step back, so the eye lands on the differences first. */
#compareTable tbody tr.row-same td.data-cell,
#compareTable tbody tr.row-same td.row-label {
  opacity: 0.6;
}

a.price-link {
  color: var(--primary-red);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--primary-red);
}

a.price-link:hover {
  text-decoration: underline;
}

.verify-legend {
  margin: 16px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.verify-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verify-legend-desc {
  line-height: 1.4;
}

.verified-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: #e9f1f9;
  color: #1c5f9e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid rgba(21, 101, 192, 0.25);
  cursor: pointer;
  text-transform: lowercase;
  text-decoration: none;
  box-sizing: border-box;
}

.verified-badge:hover {
  background: #dbe8f5;
  text-decoration: underline;
}

/* The provenance "src" badge is hidden in the UI: the figure is what a shopper reads, and a
   badge next to every other one competes with it. Nothing is removed — the links stay in the
   markup (compare cells, car-details rows) and the legend line stays too, so the audit trail
   is one flip away:
     • console: `document.body.classList.add("show-src-badges")`
     • or delete this rule
   Both bring the badges and their legend line back exactly as they were. */
body:not(.show-src-badges) .verified-badge,
body:not(.show-src-badges) .verify-legend-item-src {
  display: none;
}

.verify-legend .verified-badge-sample {
  cursor: default;
  pointer-events: none;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.feature-pill-yes {
  background: #e9f4ec;
  color: #2c7440;
  border: 1px solid rgba(46, 125, 50, 0.25);
}

.feature-pill-no {
  background: var(--primary-red-soft);
  color: var(--primary-red);
  border: 1px solid var(--primary-red-line);
}

.feature-unknown {
  color: var(--text-muted);
}

.feature-unknown-inline {
  margin: 0 0.25em;
}

.feature-not-applicable {
  color: var(--text-muted);
  font-style: italic;
}

.feature-not-applicable-cell {
  color: var(--text-muted);
  font-style: italic;
}

.feature-not-applicable-inline {
  font-style: italic;
  margin: 0 0.25em;
}

/* —— Site nav tabs + brand browse —— */
.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tuck the pill down across the shell's clearance band so its bottom edge
     lands exactly on the page edge; the hairline overlay draws over it. */
  margin: 0 2px calc(-1 * var(--site-nav-edge-gap, 6px)) 0;
  padding: 9px 16px 10px;
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  /* Sits under the shell's hairline, so an unselected tab reads as behind the
     page edge. */
  z-index: 1;
  background: var(--nav-tab-bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-link:hover {
  color: var(--text-dark);
  background: var(--surface-alt);
}

.site-nav-link.is-active {
  color: var(--primary-red);
  background: var(--surface);
  border-color: var(--border-color);
  border-bottom-color: var(--surface);
  /* Above the hairline: the selected tab joins the page below. */
  z-index: 3;
}

.site-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--primary-red);
  border-radius: 2px 2px 0 0;
}

.brand-browse-page {
  background: var(--page-bg);
}

.advanced-search-page {
  background: var(--page-bg);
}

.advanced-search {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.advanced-search-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Match the Brands page: the shared filter bar sits inside the panel as a
   divider (bottom border only), not as its own bordered box, so the Advanced
   Search page doesn't render a double border. */
.advanced-search .catalog-filters {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
}

.advanced-search-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color);
}

.advanced-search-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-red);
  text-align: left;
}

.advanced-search-meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.advanced-search-header .catalog-filter-clear {
  margin-left: auto;
}

/* Range sliders appended into the shared filter body: label above slider. */
.advanced-search-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
  min-width: 0;
}

.advanced-search-group-label {
  flex: 0 0 58px;
  padding-top: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}

.advanced-search-group.catalog-filter-group-range {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
}

.advanced-search-group.catalog-filter-group-range .advanced-search-group-label {
  flex: none;
  padding-top: 0;
}

/* Range group header: field title on the left, live value on the right. */
.advanced-search-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.advanced-search-group-header .advanced-search-group-label {
  flex: none;
  padding-top: 0;
}

.advanced-search-group-header .catalog-filter-range-readout {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.advanced-search-group.catalog-filter-group-range .catalog-filter-range {
  flex: none;
  width: 100%;
  max-width: none;
}

/* The sliders panel closes the filter grid on a full row of its own: six sliders in three
   columns, so they read as two rows instead of three. A plain card, so it matches the chip
   cards above it. Below 720px (the site's tablet breakpoint) the cells get too narrow for a
   legible readout, so the panel collapses to 2 x 3, then to one column on phones — see the
   media queries below. */
.advanced-search-ranges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 6px 14px;
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface);
}

.advanced-search-ranges .advanced-search-group.catalog-filter-group-range {
  min-width: 0;
  gap: 3px;
}

.advanced-search-ranges .advanced-search-group-label {
  /* Same size as every other filter group header — the 2-column slider grid
     previously shrank these to 10px, which read as a mismatch. */
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* The slider wrap spans the full (equal) grid cell; the value now lives in the
   group header row, so it no longer competes with the slider for width. */
.advanced-search-ranges .catalog-filter-range {
  gap: 0;
}

.advanced-search-ranges .catalog-filter-range-readout {
  /* Slider value matches its header size. */
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

/* Two columns, three rows: keeps the readout (e.g. "594 – 988 L") on one line in the
   narrower cells while the panel still ends on a tidy 3-row block. 720px is the same
   breakpoint the rest of the layout collapses on. */
@media (max-width: 720px) {
  .advanced-search-ranges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }
}

@media (max-width: 620px) {
  .advanced-search-ranges {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 0;
  }
}

.advanced-search-grid {
  padding: 14px;
}

/* Sort pills + top pager share one row on the Advanced search page. The pills are
   the shared component (components/SortPills.vue) and keep their .brand-sort-btn
   styling from the Brands page; the row itself is page chrome. */
.advanced-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  /* The light theme wash, like the brands bar and the car-details data blocks. */
  background: var(--page-bg);
}

/* The pager rides inside the toolbar, so it brings no padding or border of its
   own — `space-between` already separates the pills from it. */
.advanced-search-toolbar .advanced-search-pager {
  flex: 0 1 auto;
  justify-content: flex-end;
  padding: 0;
}

.advanced-search-trim-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.advanced-search-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
}

.advanced-search-pager-bottom {
  border-top: 1px solid var(--border-color);
  padding-bottom: 18px;
  /* Same wash as the toolbar above the results, so the page closes in its own band. */
  background: var(--page-bg);
}

.advanced-search-pager[hidden] {
  display: none;
}

.advanced-search-pager-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  min-width: 7.5em;
  text-align: center;
}

.advanced-search-pager-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.advanced-search-pager-btn:hover:not(:disabled) {
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.advanced-search-pager-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.brand-browse {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.brand-browse-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.brand-browse .catalog-filters {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
  /* Sticky, like the brand toolbar under it: with a long model grid the filter line and the
     brand controls both stay reachable. The toolbar offsets itself by this panel's measured
     height (`--catalog-filter-height`, published by public/js/catalog-filters.js `syncHeight()`),
     so the two never overlap — and the opaque surface keeps the grid from showing through the
     pinned line. The bar above (`z-index: 40`) stays below this one (41). */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 41;
}

.brand-browse-toolbar {
  position: -webkit-sticky;
  position: sticky;
  /* Pinned directly under the sticky filter line, not at the window edge: the offset is that
     panel's own height, so the two pin as one block (see `--catalog-filter-height`). */
  top: var(--catalog-filter-height, 0px);
  z-index: 40;
  display: flex;
  /* Wraps on narrow screens, where the brand-context column drops to its own line — and, as
     the only item on that line, grows edge to edge there. */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  /* The light theme wash, like the car-details data blocks on their white panel. */
  background: var(--page-bg);
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 10px 14px 8px;
  box-shadow: 0 2px 6px rgba(45, 34, 25, 0.07);
}

.brand-browse-toolbar-main {
  /* Equal flex item against the context column: `flex-basis: 0` plus equal growth gives each
     exactly half of what the logo frame and the gaps leave, on one line. A percentage basis
     (`50%` each) would not: with `flex-wrap: wrap` on the bar, 50% + 50% + the 70px logo + gaps
     exceeds 100%, so the context would wrap to its own row at *every* width. */
  flex: 1 1 0;
  min-width: 0;
}

/* The sort pills stand on their own line **under** the brand field: they sort the selected
   brand's models, so they read as a continuation of that field rather than as a second toolbar
   control beside it — and four pills plus the SORT label no longer compete with the field for
   one line box. The logo frame keeps the toolbar's left edge, untouched. */
.brand-browse-toolbar-main > .brand-browse-sort {
  margin-top: 8px;
}

/* The brand field's line. The sort pills used to share it — they moved below the field
   (`.brand-browse-toolbar-main > .brand-browse-sort`), because they sort the models of the
   brand this field is choosing, and four pills plus the SORT label crowded the input. */
.brand-browse-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: stretch;
}

/* Label and input share one line (the sort block now sits *below* this field, so it no longer
   sets the line's cross size). */
.brand-browse-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 160px;
}

.brand-browse-field-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brand-browse-field .brand-make-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 160px;
}

.brand-make-logo-frame {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.brand-make-logo-frame[hidden] {
  display: none;
}

.brand-make-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
  display: block;
}

.brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  flex: 0 0 auto;
  display: block;
}

.brand-make-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
}

/* Center the "-- Select Car Brand --" prompt horizontally within the field. */
.brand-make-input:placeholder-shown {
  text-align: center;
}

.brand-make-dropdown .brand-make-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-make-dropdown-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text-muted);
  background: var(--bg-alt-section);
  border-bottom: 1px solid var(--border-color);
}

.brand-make-dropdown .dropdown-item.is-active {
  background-color: var(--bg-light);
}

.brand-make-dropdown .dropdown-item.is-selected {
  background-color: var(--bg-alt-section);
}

.brand-browse-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brand-browse-sort[hidden] {
  display: none;
}

.brand-sort-btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.brand-sort-btn:hover {
  border-color: var(--text-muted);
}

.brand-sort-btn.is-active {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background: var(--primary-red-soft);
}

.brand-sort-btn.is-active::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-15%);
  flex-shrink: 0;
  opacity: 0.9;
}

.brand-sort-btn.is-active[data-dir="asc"]::after {
  transform: rotate(-135deg) translateY(-15%);
}

/* The stats line ("<n> models ·…") shares its row with the parent-marque chip. */
/* Inline with the brand input: a flex item of `.brand-browse-controls`, on the field's line —
   the stats line reads as that input's read-out ("75 models", then the parent marque). It used
   to sit on a line of its own below the field, which left it drifting with nothing beside it. */
.brand-browse-meta {
  display: flex;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Brand context inside the sticky bar: a section of its own — the parent marque's sub-brands
   and the Iraq dealer stacked in a column beside the brand field, so they stay readable while
   the model grid scrolls. The column is inset by the bar's padding, never flush to the window
   edge, and runs to about a third of the bar.

   It *grows* rather than sitting at a fixed 38%: sharing the row it stays around that third
   (see .brand-browse-toolbar-main for the other side of that split), and the moment the bar
   is too narrow for both it wraps — and, alone on its line, stretches edge to edge instead of
   leaving a 38% stub with a gap beside it. */
.brand-browse-context {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* Equal flex item against `.brand-browse-toolbar-main` — half the row, same rule and the same
     reason for `basis: 0` over a percentage. */
  flex: 1 1 0;
  min-width: 0;
}

/* A context row of chips: a small label then one pill per brand. The rows only ever render
   inside the sticky bar, which draws the divider, so a row brings none of its own. */
.brand-browse-subbrands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.brand-browse-subbrands-label {
  font-weight: 600;
}

.brand-subbrand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.brand-subbrand:hover,
.brand-subbrand:focus-visible {
  border-color: var(--border-strong);
  background: var(--bg-light);
  color: var(--primary-red);
}

.brand-subbrand-logo {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.brand-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 16px 14px 32px;
}

.brand-browse-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---- Home page (quick search + latest / popular / comparisons) ------------- */
.home-page {
  background: var(--page-bg);
}

.home {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.home-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Hero: one flex row — the page copy first, then the model quick search. In LTR
   that reads text on the left and the search on the right; under RTL the row
   mirrors with the copy. The row wraps, so the two stack as soon as they stop
   fitting side by side. */
.home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
  padding: 22px 16px 18px;
  border-bottom: 1px solid var(--border-color);
}

/* The copy block fills whatever the search does not take. */
.home-hero-copy {
  flex: 1 1 300px;
  min-width: 0;
}

/* Overrides the global centred/uppercase h1 so the landing page opens as a
   heading with a lede rather than a banner. */
.home-hero-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: start;
  color: var(--primary-red);
}

/* Full panel width: the lede and the search box line up with the section
   headings below instead of stopping at an arbitrary measure. */
.home-hero-lede {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Quick search: the Compare page's model picker — `.model-field` +
   `.search-input`, with its `.search-dropdown` teleported to <body> — sized for
   the hero. Everything else (input, dropdown, result rows, tag pills) is the
   shared picker styling, so no search CSS is owned here. */
.home-search-field {
  flex: 0 0 40%;
  min-width: 0;
  /* .search-container centres itself with `margin: 0 auto`; as a flex item that
     would absorb the free space and shove the copy aside, so the row's gap does
     the spacing instead. */
  margin: 0;
}

/* Search glyph inside the field: it takes the inline-start edge of the picker's
   flex row (left in LTR, right under RTL) and never swallows the click that
   focuses the input. */
.home-search-icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-muted);
  pointer-events: none;
}

/* One band per section, divided by the same hairline the other pages use. */
.home-section {
  border-top: 1px solid var(--border-color);
}

/* Alternating bands, on the same light wash the compare matrix gives its
   alternating rows (--bg-alt-section): the hero is the panel's white, then every
   other section takes the wash, so a run of sections reads as a stack of bands
   rather than one long sheet. */
.home-panel > .home-section:nth-of-type(even) {
  background: var(--bg-alt-section);
}

/* …and only there. On a section that is already the alternating wash the card keeps
   the white it always had — the two colours swap rather than stack, so a card never
   matches its ground either way round. Best Picks alternates its sections the same
   way, hence the third selector. */
.home-panel > .home-section:nth-of-type(even) .model-card,
.home-panel > .home-section:nth-of-type(even) .home-compare-card,
.best-picks-section:nth-of-type(even) .model-card {
  background: var(--surface);
}

.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 16px 0;
}

.home-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.home-section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-red);
  text-decoration: none;
}

.home-section-link:hover {
  text-decoration: underline;
}

/* The card grids reuse .brand-browse-grid; this only tightens their top gap. */
.home-grid {
  padding-top: 14px;
}

/* ---- Latest cars slideshow ------------------------------------------------- */
/* One car at a time, leading the grid of the same cars: the stage — the container
   the vendored carousel takes over (see src/lib/slideshow-carousel.js) — and, beside
   it on the inline-end edge, the rail of thumbnails. The grid is what keeps the two
   the same height: the stage is as tall as a slide's aspect ratio, and the rail
   stretches to it. */
/* The Latest cars band. The three class selectors are what beat the panel's alternating
   wash (`.home-panel > .home-section:nth-of-type(even)`), which this section is. */
.home-panel > .home-section.home-section-dark {
  background: #000000;
  border-radius: 0;
  /* `flow-root` keeps the strip's margins *inside* the band. Without it the bottom one
     collapses out of the section and the black ends flush with the photo. */
  display: flow-root;
}

.home-panel > .home-section.home-section-dark .home-section-title {
  color: #ffffff;
}

.home-slideshow {
  /* The vertical point of the photo the 21:9 crop is taken around. `cover` centres
     it (50%) by default, which frames a car photo through its middle — sky above,
     wheels clipped below. The nudge down to 58% frames a little lower, so the car
     sits slightly higher in the frame. It is the one number to tune here. */
  --slideshow-focus: 58%;
  /* The strip has its own dark ground: the photos are the light in this section, and
     the caption's scrim disappears into it. */
  --slideshow-bg: #000000;
  /* The ceiling on the strip's height: the stage's box is its own shape (a ratio) and the
     photo fills it, so on a very wide screen the band would otherwise become a
     screenful. Raise or lower this to trade the photo's size against how much of the
     page the strip takes. */
  --slideshow-max-height: min(620px, 68vh);
  /* The thumbnail column: the rail's own width, and the track it takes up in the strip —
     its width plus the gap the two had while they were grid columns. */
  --rail-width: 116px;
  --rail-track: 126px;
  position: relative;
  display: block;
  /* The rail is *positioned into* this inset rather than laid out beside the stage (see
     .home-slideshow-rail). A second column sizes the strip from the rail's content, and a
     column of thumbnails as tall as their photos then stretches the band past the photo —
     black under the photo, and the black bar stayed even after the rail was hidden on a
     phone, because the column stayed. The stage is the strip's whole width here, so the
     only thing the rail's reservation can do is hand it the room it needs. */
  padding-inline-end: var(--rail-track);
  /* A margin, not a padding: the black band keeps its full width while the photos and
     the rail sit in from its edges. */
  margin: 14px;
  border-radius: 0;
  background: var(--slideshow-bg);
}

/* The section's title, over the photo rather than in a heading row above the strip. The
   shadow is what keeps it readable whatever the car behind it happens to be. */
.home-slideshow-title {
  position: absolute;
  top: 12px;
  inset-inline-start: 16px;
  z-index: 2;
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* The stage owns the strip's shape, and it is a **definite** one: a ratio, capped by
   --slideshow-max-height, rather than whatever height the photo on screen happens to
   have. That is what lets `height: 100%` resolve all the way down to the image, so the
   photo covers the strip whatever shape the car's photo is. The library is told not to
   size it (`autoHeight` is off, see ../lib/slideshow.js) — a carousel that measures its
   slides takes its height from the tallest one in the set, and every other slide then
   floats in the band's black, which is exactly what a phone in landscape showed.
   `min-width: 0` keeps the grid column from being widened by the track inside it. */
.home-slideshow-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 21 / 9;
  max-height: var(--slideshow-max-height);
  overflow: hidden;
  border-radius: 0;
  background: var(--slideshow-bg);
}

.home-slideshow-stage:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

/* Splide's core stylesheet sets the list to `display: block` unless the root carries
   `is-active` — a class nothing in the core ever adds — which stacks every slide and
   leaves a clipped frame showing only the first one (the rest read as blank). A
   horizontal carousel is a row, so this is not optional, and the extra selector is
   what beats the vendor rule (its stylesheet loads after ours). */
.home-slideshow .home-slideshow-stage.splide .splide__list {
  display: flex;
}

/* Splide would have set the track's height itself (`autoHeight`); with that off, the
   track has to take the stage's, or the list's own `height: 100%` resolves against
   nothing and the slides collapse to their content. */
.home-slideshow-stage .splide__track {
  height: 100%;
}

/* Every slide is the stage's full box; the photo inside fills it (see
   .home-slideshow-link img). */
.home-slideshow-slide {
  position: relative;
  height: 100%;
}

/* The photo is centred in that box, so a crop that has to give something up gives up the
   edges evenly rather than the top or the bottom. */
.home-slideshow-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* The photo fills the box the stage gives it — the full width *and* the full height of
   that box — so the strip's dark ground can never show around a slide; `cover` crops what
   does not fit instead, and `object-position` picks which part of the car is kept. */
.home-slideshow-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--slideshow-focus);
}

.home-slideshow-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: var(--text-muted);
}

/* The car's name, pills and price sit on the photo, over a scrim, so they read on
   any image and the whole slide stays one click target. It is a stack, not a
   wrapping row: the name leads, its pills follow directly under it, then the price
   and the segment. `align-items: flex-start` is what keeps all three on one edge,
   so the pills line up with the name instead of drifting. */
.home-slideshow-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(28, 20, 16, 0.82), rgba(28, 20, 16, 0));
  color: #fff;
}

/* Model names are English/Chinese: a name stays LTR in every locale. The shadow lifts the
   name off whatever part of the photo it lands on. */
.home-slideshow-name {
  direction: ltr;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* The segment and the body ("Mid-size Sedan") come first, the price closes the line. */
.home-slideshow-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.home-slideshow-meta {
  font-size: 12px;
  opacity: 0.85;
}

/* The card's tag pills, on the slide's scrim. They keep their own light-on-dark look
   (`.dropdown-tag` is a light pill with muted text), so nothing here restyles them —
   only the run direction, so the pills read left to right with the name above them
   rather than mirroring under RTL. */
.home-slideshow-tags {
  direction: ltr;
  gap: 3px 4px;
}

.home-slideshow-price {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* The arrows are Splide's own (the vendored theme styles them, `.splide__arrow`), so
   there is nothing here for them: they are positioned over the stage, they fade at
   the ends of the loop, and they mirror themselves under RTL. Only their colour is
   tuned, because the default grey is a shade too light on this strip's dark ground. */
.home-slideshow-stage .splide__arrow {
  background: rgba(255, 255, 255, 0.82);
  /* The same edge as the counter chip, for the same reason: both are light chips that
     can land on a bright part of a photo. */
  box-shadow: var(--shadow-xs);
  color: var(--text-dark);
}

/* "3 / 5": which slide of how many, in the locale's own digits. It is a child of the
   stage, not of the strip, so it is measured against the stage's box: it lands on the
   photo's far corner and never over the rail that runs along the strip's other edge
   (see .home-slideshow-rail). The sides are physical on purpose — the chip sets
   `direction: ltr` for its digits, and a logical inset on it resolves against *that*
   direction rather than the page's, which had put it on the title's side in Arabic.
   `[dir="rtl"]` swaps them, mirroring the page rather than the chip. `pointer-events`
   is off because it is a label, not a control: a drag that starts on it should still
   move the slides, and clicks should still open the car behind it. */
.home-slideshow-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  /* A chip over the photo — and the photos are the light in this section — so it is a
     light chip on dark ground rather than a dark scrim on it: the arrows are given the
     same treatment for the same reason (see .home-slideshow-stage .splide__arrow),
     including the shadow, which is what holds either chip's edge over a bright corner
     of a photo (a white car on a white studio ground is common in this catalog). */
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-xs);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 600;
  direction: ltr;
  pointer-events: none;
}
[dir="rtl"] .home-slideshow-count {
  right: auto;
  left: 10px;
}

/* The rail of thumbnails: one small photo per car, so a car can be picked instead
   of waited for. It sits beside the stage on the inline-end edge — right in LTR,
   left in RTL, because a grid column follows the writing direction — and it scrolls
   rather than growing if the catalog ever offers more cars than fit. */
/* The rail is a Splide of its own, vertical (`direction: "ttb"`, perPage 4). Splide
   owns the column, the slide heights (it is given a fixed rail height — `ttb` cannot
   work without one) and the movement; the width and the alignment are ours. Each
   thumbnail fills the slide Splide gives it. */
/* Two classes, not one: the rail carries `.splide` as well, and the vendored theme (which
   loads *after* this stylesheet) sets `position` on that class — at equal specificity the
   later rule wins, which is what put the rail back into the flow. See the list rule below
   for the same trick. */
.home-slideshow .home-slideshow-rail {
  /* Positioned into the strip's reserved column, not laid out in it (see
     .home-slideshow), so its own height is exactly the stage's and it takes no part in
     sizing anything: a column of thumbnails as tall as their photos used to stretch the
     band past the photo, and the black bar outlived the rail on a phone. */
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--rail-width);
}

.home-slideshow-thumb {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  /* A tile on the black band, so it steps *up* from its ground instead of down: at
     0.08 the tile read as a hole in the strip rather than a thumbnail in it. The value
     is sized for the state it is *seen* in: `opacity` below dims the whole tile, so an
     inactive one composites to 0.28 × 0.55 ≈ 0.15 over black. (A tile with a photo
     hides its ground either way — this is what the empty and half-loaded ones show.) */
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.home-slideshow-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--slideshow-focus);
}

.home-slideshow-thumb:hover,
.home-slideshow-thumb:focus-visible {
  opacity: 1;
}

/* The car on screen: the rail's "you are here". A light ring against the dimmed rest
   — the strip has its own dark ground, so a coloured one read as a warning. */
.home-slideshow-thumb.is-active {
  border-color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.home-slideshow-thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  /* The "no photo" tile keeps the same step up from the band as a real thumbnail —
     including through the drawn state's `opacity`, which multiplies it the same way. */
  background: rgba(255, 255, 255, 0.32);
}

/* The rail earns its width from 861px up. Below that the stage is narrow enough that a
   thumbnail strip beside it squeezes the photo more than the strip helps, and swiping (or
   the arrows) is the faster way to another car. */
@media (max-width: 860px) {
  .home-slideshow {
    /* The rail is gone, so the room reserved for it goes as well — otherwise the photo
       stops short of the band's edge with nothing in the gap. */
    padding-inline-end: 0;
    /* Edge to edge: at a desktop width the band is the strip's frame, but on a phone the
       photo is the whole band. */
    margin: 0;
  }

  /* Two classes, like the rail itself: it carries `.splide`, and the vendored theme's
     rules for that class come later in the cascade. */
  .home-slideshow .home-slideshow-rail {
    display: none;
  }
}

/* A phone held upright is narrow and tall, so the desktop ratio hands it a letterbox: it
   takes a taller box instead. Keyed to the width that means "phone", **not** to the rail's
   breakpoint above — sharing that one made the strip's height jump by a screenful at
   860px, right where the rail comes and goes. */
@media (max-width: 600px) {
  .home-slideshow-stage {
    aspect-ratio: 4 / 3;
  }
}

/* Mobile landscape — wider than it is tall, which is the case a ratio cannot serve: at
   this width a 21:9 box is taller than the viewport, and the band's ceiling then cuts the
   photo instead of filling the screen. The strip takes the height the screen has, and the
   photo covers it. */
@media (orientation: landscape) and (max-height: 600px) {
  .home-slideshow {
    margin: 0;
  }

  .home-slideshow-stage {
    aspect-ratio: auto;
    height: min(64vh, 620px);
  }
}

/* Reduced motion is not a stylesheet concern here: the page builds the slideshow with
   `speed: 0` and no timer at all (see ../lib/slideshow.js), so there is nothing to
   override and nothing that can drift out of step with the stylesheet. */

/* Popular comparisons: two thumbnails with a vs tile between them, then the
   two names and the action. */
/* Three cards per row rather than four: a comparison card carries two labelled
   photos, so it needs the width — at 280px the photos and the names under them
   were too small to read. The floor is what fixes the count (three of these plus
   the gaps fill the panel), and the row still drops to two and then to one as the
   viewport narrows. */
.home-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  padding: 14px;
}

.home-compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  /* A card on a white ground takes the page wash, so it never sits on white (see
     --card-bg). Where the section is already washed the card is white instead — the
     override under `.home-panel > .home-section:nth-of-type(even)`. */
  background: var(--card-bg);
  /* The same elevation the tag pills carry: a pill inside a card may not be lifted
     above the card holding it (see .dropdown-tag). */
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-compare-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* A card is two cars, each with its own photo and its own name underneath — so a
   name sits under the car it labels instead of in a shared caption row. The
   "car-x" column and the "name-x" row are what tie each name to its car: the two
   photos are placed in the top row, the two names in the bottom one, and the
   separator cell spans only the top row (so it centres on the photos, not on the
   photos-and-names block). Under RTL the columns mirror with the text, which is
   what puts the first car on the right, as it is read. */
.home-compare-media {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "car-a vs car-b"
    "name-a . name-b";
  align-items: start;
  column-gap: 8px;
  row-gap: 6px;
}

.home-compare-thumb-a {
  grid-area: car-a;
}

.home-compare-thumb-b {
  grid-area: car-b;
}

.home-compare-name-a {
  grid-area: name-a;
}

.home-compare-name-b {
  grid-area: name-b;
}

.home-compare-thumb {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-alt-section);
  color: var(--text-muted);
  font-size: 11px;
}

.home-compare-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-compare-vs {
  grid-area: vs;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Model names are English/Chinese, so a name stays LTR in every locale — and
   centred under its own photo, which is the cell it was placed in. */
.home-compare-name {
  direction: ltr;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark);
}

/* `margin-top: auto` is what pins the button to the card's bottom edge: a card is
   a column flex box, and the grid stretches every card in a row to the same
   height, so the buttons line up along the bottom however long the names above
   them are — instead of each button floating just under its own photos. */
.home-compare-action {
  margin-top: auto;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.home-compare-card:hover .home-compare-action {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background: var(--primary-red-soft);
}

@media (max-width: 720px) {
  .home-hero-title {
    font-size: 20px;
  }

  /* Stacked hero: a 40% field would be unusably narrow, so it takes the row. */
  .home-search-field {
    flex: 1 1 100%;
  }

  /* One comparison per row: two thumbnails side by side stop being readable. */
  .home-compare-grid {
    grid-template-columns: 1fr;
  }

  /* (The strip has no margins of its own and the rail is already gone below 861px — see
     its own media query — so there is nothing to restate for a phone.) */

  .home-slideshow-caption {
    padding: 24px 12px 10px;
  }

  .home-slideshow-name {
    font-size: 15px;
  }
}

/* ---- Best Picks page (size-first value leaderboards) ---------------------- */
.best-picks-page {
  background: var(--page-bg);
}

.best-picks {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.best-picks-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Shared one-line page intro (Compare · Brands · Advanced search · Best Picks).
   The page name is already the active nav tab, so there is no heading here. */
.page-intro {
  margin: 0;
  padding: 16px 16px 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* The shared filter bar sits inside the panel as a divider (bottom border only),
   matching the Brands / Advanced search pages. */
.best-picks .catalog-filters {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
}

.best-picks-size-block {
  min-width: 0;
}

/* Size sets carry no heading of their own — every group title names its size —
   so a red rule marks the boundary between two sets. */
.best-picks-size-separator {
  height: 2px;
  margin: 20px 16px 0;
  border: none;
  background: var(--primary-red);
}

/* The rule above already marks the boundary, so the following set does not need
   its own grey hairline; grey lines then separate the metrics within a set. */
.best-picks-size-separator + .best-picks-section {
  margin-top: 0;
  border-top: none;
}

.best-picks-section {
  margin-top: 14px;
  border-top: 1px solid var(--border-color);
}

/* Every other leaderboard takes the same light wash as the compare matrix rows,
   so a size with five metrics reads as alternating bands instead of one block. */
.best-picks-section:nth-of-type(even) {
  background: var(--bg-alt-section);
}

.best-picks-section-title {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.best-picks-grid {
  padding: 14px;
}

/* ModelCard extras shown only on Best Picks (via its trim/note props): the trim
   that earned the spot, and the measured spec + value ratio it ranked on. */
.model-card-trim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

.model-card-trim-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The trim name and its pills sit inline, and the run is always LTR because the
   trim text is English/Chinese regardless of the page language. */
.model-card-trim-value {
  direction: ltr;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* Best Picks' "why this car" line, and it belongs **just above the buttons**: the
   card body stretches to the card's height, so plain flow leaves the spare height
   under the note and floats the note up against the price. `margin-top: auto`
   absorbs that spare height instead, dropping the note to the foot of the body,
   with the 4px padding keeping it off the price on a card that has no spare
   height at all (the tallest card in the row). */
.model-card-note {
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

.model-card {
  display: flex;
  flex-direction: column;
  /* A card on a white ground takes the page wash, so it never sits on white (see
     --card-bg). On an alternating section the two swap and the card is white again —
     the override under `.home-panel > .home-section:nth-of-type(even)`. */
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  /* The same elevation the tag pills carry: a pill inside a card may not be lifted
     above the card holding it (see .dropdown-tag). */
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.model-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Card action row: "Compare trims" + "View details" side by side. */
.model-card-actions {
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px 14px;
  display: flex;
  gap: 8px;
}

.model-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.model-card-action:hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background: var(--primary-red-soft);
}

.model-card-media {
  position: relative;
  appearance: none;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--no-image-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-align: center;
}

button.model-card-media {
  cursor: zoom-in;
}

button.model-card-media:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: -2px;
}

.model-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.model-card-media.is-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.model-card-body {
  flex: 1 1 auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.model-card:has(.model-card-actions) .model-card-body {
  padding-bottom: 10px;
}

.model-card-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.model-card-price-link {
  color: inherit;
  text-decoration: none;
}

.model-card-price-link:hover {
  color: var(--primary-red);
  text-decoration: underline;
}

.model-card-caption {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
}

.model-card-meta {
  font-size: 0.76em;
  font-weight: 500;
  color: var(--text-muted);
  /* Logical property: gaps on the inline-start side for both LTR and RTL. */
  margin-inline-start: 0.45em;
}

/* Catalog model / trim / brand names, trim options and the channel's English
   video titles are all LTR strings, so they read left-to-right even in RTL
   locales. The translated "-- Select Trim --" placeholder is left RTL. */
.search-dropdown,
.trim-trigger-label:not(.is-placeholder),
.trim-option-text,
.car-details-trim-list,
.model-field-input,
.brand-make-input,
.catalog-filter-name-input,
.dropdown-tags,
.dropdown-tag,
.model-field-tags,
.trim-trigger-tags,
.compare-review-link {
  direction: ltr;
}

/* Empty boxes fall back to the page direction while they show a translated
   prompt — the "Select brand" / "Filter by name" placeholders — so those read
   RTL. Scoped to RTL locales: in LTR locales the prompts are English. */
[dir="rtl"] .brand-make-input:placeholder-shown,
[dir="rtl"] .catalog-filter-name-input:placeholder-shown {
  direction: rtl;
}

/* Only the box order follows the page direction in RTL locales — the English
   strings inside keep the LTR direction set above. */
[dir="rtl"] .car-details-trim-list {
  direction: rtl;
}

/* Car-details values — model title, brand, price and every spec / feature value
   — are English catalog strings ("4785 x 1930 x 1625 mm", "30 min (30–80%)",
   "NMC (CATL)") whose brackets and ranges get reordered inside an RTL
   paragraph. They get an LTR base direction, but stay aligned to the page's
   start edge so a value never drifts away from its label column. The labels,
   section titles and reliability bands are translated, so they keep the page
   direction. */
[dir="rtl"] .car-details-title,
[dir="rtl"] .car-details-kicker,
[dir="rtl"] .car-details-price,
[dir="rtl"] .car-details-dl-row dd,
[dir="rtl"] .car-details-dl-row dd .feature-pill,
[dir="rtl"] .car-details-dl-row dd .feature-unknown,
[dir="rtl"] .car-details-feature-cell .feature-pill,
[dir="rtl"] .car-details-feature-cell .car-details-spec-value,
[dir="rtl"] .car-details-feature-cell .feature-unknown {
  direction: ltr;
  text-align: right;
}

/* Key-spec figures are number + unit (+ tag) rows, so they need LTR order and
   end-alignment to stay under their right-aligned label. */
[dir="rtl"] .car-details-stat-value {
  direction: ltr;
  justify-content: flex-end;
}

[dir="rtl"] .car-details-stat-value-multi {
  direction: ltr;
  align-items: flex-end;
}

/* The comparison table's data cells hold the same English values; they are
   centre-aligned, so the direction change cannot shift them. */
[dir="rtl"] td.data-cell {
  direction: ltr;
}

/* Brand-card tags follow the page direction in RTL locales so translated
   trim-count badges align right and chips flow right-to-left. */
[dir="rtl"] .model-card-tags,
[dir="rtl"] .model-card-tags .dropdown-tag {
  direction: rtl;
}

.model-card-reliability {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.model-card-reliability-pct {
  font-weight: 700;
  color: var(--text-dark);
}

.compare-reliability {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 1.35;
}

.compare-reliability-pct,
.compare-reliability-sample {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 13px;
}

.compare-reliability-band {
  font-size: 12px;
  color: var(--text-muted);
}

.compare-reviews {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
}

.compare-review-link {
  color: var(--primary-red);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

.compare-review-link:hover {
  text-decoration: underline;
}

.model-card-tags,
.model-card-body .model-card-tags {
  margin-top: 0;
}

/* Step 1 — mobile polish: matrix + browse (no layout rebuild) */
@media (max-width: 720px) {
  :root {
    --section-col-width: 52px;
    --label-col-width: 84px;
    --page-pad: 4px;
  }

  body {
    padding: var(--page-pad);
    padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));
  }

  body:not(.brand-browse-page):not(.car-details-page):not(.advanced-search-page):not(.best-picks-page) {
    height: 100vh;
    height: 100dvh;
  }

  .compare-container {
    max-height: none;
  }

  .site-nav {
    padding-left: 0;
  }

  .site-nav-link {
    flex: 1 1 0;
    padding: 10px 12px 11px;
    font-size: 14px;
    text-align: center;
  }

  .catalog-filters {
    padding: 8px 10px;
  }

  .catalog-filters-toolbar {
    gap: 10px;
  }

  .catalog-filter-clear {
    min-height: 36px;
    padding: 6px 12px;
  }

  .catalog-filter-count {
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.35;
    order: 3;
  }

  /* One card per line on a phone. Card padding and the label's bottom margin are
     inherited from the base rules — only the wrap and the chip sizing change here. */
  .catalog-filter-group {
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 4px 6px;
  }

  .catalog-filter-label {
    flex: 1 1 100%;
    padding-right: 4px;
  }

  .catalog-filter-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
  }

  th,
  td {
    padding: 8px 4px;
  }

  .selector-field-label {
    min-height: 38px;
    font-size: 12px;
  }

  .selector-label-stack .selector-field-label:first-child {
    min-height: 56px;
  }

  .search-input,
  .trim-trigger,
  .model-field-input {
    font-size: 13px;
  }

  .search-input {
    padding: 10px;
    min-height: 38px;
  }

  .model-field {
    min-height: 56px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .trim-trigger {
    min-height: 38px;
  }

  .trim-option,
  .dropdown-item {
    padding: 12px;
    font-size: 13px;
    min-height: 44px;
  }

  .search-dropdown {
    max-height: min(280px, 45dvh);
    max-height: min(280px, 45vh);
  }

  #selector-row th.selector-slot {
    min-width: 148px;
  }

  .image-fallback {
    font-size: 11px;
    padding: 6px;
  }

  th.section-header {
    font-size: 10px;
    letter-spacing: 0.02em;
    padding-left: 4px;
    padding-right: 4px;
  }

  td.row-label {
    font-size: 11px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .verify-legend {
    font-size: 12px;
  }

  .brand-browse-toolbar {
    padding: 8px 10px 6px;
  }

  /* On a phone the context section takes the full width under the controls. */
  .brand-browse-context {
    flex-basis: 100%;
  }

  .brand-browse-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px 10px 24px;
  }

  .brand-browse-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand-browse-field {
    min-width: 0;
    width: 100%;
  }

  .brand-make-input {
    width: 100%;
    min-height: 38px;
    font-size: 13px;
  }

  .brand-browse-sort {
    width: 100%;
  }

  .brand-browse-sort .brand-browse-field-label {
    flex-basis: 100%;
    width: 100%;
  }

  .brand-sort-btn {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .model-card-body {
    padding: 12px 14px 14px;
  }

  .model-card-caption {
    font-size: 16px;
  }

  .model-card-price {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  :root {
    --section-col-width: 40px;
    --label-col-width: 68px;
  }

  body {
    padding: 8px;
  }

  .compare-container {
    max-height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
  }

  #selector-row th.selector-slot {
    min-width: 132px;
  }

  .brand-browse-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* —— Car details page —— */
.car-details-page {
  background: var(--page-bg);
  color: var(--text-dark);
  min-height: 100vh;
  min-height: 100dvh;
}

.car-details {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.car-details-page .page-sticky-chrome {
  margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 0;
  padding: var(--page-pad) var(--page-pad) 0;
  background: var(--page-bg);
}

.car-details-page .site-nav-shell {
  max-width: var(--content-max-width);
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
}

.car-details-missing {
  max-width: 640px;
  margin: 48px auto;
  padding: 0 20px;
  text-align: center;
}

.car-details-missing h1 {
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
}

.car-details-missing a {
  color: var(--primary-red);
}

/* The tab strip's page edge is this panel's top edge, so the hero and every data
   section below share one bordered white surface — the same tab-panel shape the
   filter/browse panels use (.catalog-filters, .advanced-search-panel,
   .brand-browse-panel all drop their top border). */
.car-details-root {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.car-details-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: 0;
  /* The root panel frames the hero; this border just divides it from the data. */
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
}

.car-details-hero-media {
  order: 2;
  position: relative;
  display: block;
  width: 100%;
  min-height: 240px;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--bg-alt-section);
  cursor: zoom-in;
}

.car-details-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  inset: 0;
}

.car-details-hero-copy {
  order: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 18px 20px;
  box-sizing: border-box;
  background: var(--surface);
}

/* Logo + brand name, as one link to that brand's page. */
.car-details-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  min-width: 0;
  width: fit-content;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
}

.car-details-brand:hover .car-details-brand-logo,
.car-details-brand:focus-visible .car-details-brand-logo {
  border-color: var(--primary-red);
}

.car-details-brand:hover .car-details-kicker,
.car-details-brand:focus-visible .car-details-kicker {
  text-decoration: underline;
}

.car-details-brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}

.car-details-brand-logo[hidden] {
  display: none;
}

.car-details-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-red);
  min-width: 0;
}

/* The parent-marque chip sits under the brand name on the details hero (the copy is a
   column, so the chip needs its own start alignment) and rides the brands stats line
   ("<n> models · Parent brand · …"). The marque is a link only when the catalog carries it —
   a parent outside the catalog stays plain text (see `src/lib/brand-parents.js`). */
.car-details-hero-copy > .brand-parent {
  align-self: flex-start;
  margin: 0 0 8px;
}

.brand-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-light);
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
}

.brand-parent-label {
  font-weight: 600;
}

.brand-parent-link {
  font-weight: 700;
  color: var(--primary-red);
  text-decoration: none;
}

a.brand-parent-link:hover,
a.brand-parent-link:focus-visible {
  text-decoration: underline;
}

.car-details-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-dark);
  text-align: start;
  text-transform: none;
}

.car-details-meta {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.car-details-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.car-details-tags .dropdown-tags,
.car-details-tags.dropdown-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.car-details-price {
  margin: 10px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
}

.car-details-price .price-link {
  font-size: inherit;
  font-weight: inherit;
}

.car-details-reliability {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dark);
}

.car-details-reliability.is-missing {
  color: var(--text-muted);
}

.car-details-reliability-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.car-details-reliability-pct {
  font-weight: 700;
  color: var(--text-dark);
}

.car-details-reliability-band {
  color: var(--text-muted);
}

.car-details-reliability-source {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.car-details-reliability-source:hover {
  color: var(--primary-red);
}

.car-details-reliability-missing {
  font-style: italic;
}

/* Data-block heading row: the section label plus that block's action
   (Trims → Compare trims). */
.car-details-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.car-details-section-head .car-details-section-label {
  margin-bottom: 0;
}

.car-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.car-details-btn-primary {
  background: var(--primary-red);
  color: #fff;
}

.car-details-btn-primary:hover {
  background: var(--primary-red-strong);
}

.car-details-trims,
.car-details-reviews,
.car-details-highlights,
.car-details-body {
  max-width: none;
  margin: 0;
  /* Inline padding keeps the data clear of the root panel's frame. */
  padding: 16px 16px 0;
  box-sizing: border-box;
}

/* Trims and the spec body sit on the light theme wash, so the cards on them —
   trim cards, spec blocks — read as surfaces. */
.car-details-trims,
.car-details-body {
  background: var(--page-bg);
}

/* The reviews band and the key-spec strip stay on the white panel: the review
   rows and the key-spec chips are their own surfaces. */
.car-details-reviews,
.car-details-highlights {
  background: var(--surface);
}

/* All four inherit `padding: 16px 16px 0` from the rule above, so without this a
   band would end flush against its last card. The spec body sets its own foot
   padding (36px desktop / 28px+ mobile). */
.car-details-trims,
.car-details-reviews,
.car-details-highlights {
  padding-bottom: 16px;
}

.car-details-body {
  /* Body is the panel's last child, so it carries the rounded bottom corners
     (1px inside the panel's own border). */
  border-radius: 0 0 7px 7px;
}

/* Hairline between the data blocks inside the panel (the hero supplies its own
   divider above the first one). */
.car-details-root > section + section,
.car-details-root > section + .car-details-body {
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* The key-spec strip butts straight against the block above it: the hairline
   already divides them, so an extra gap only broke the run of the page. */
.car-details-root > .car-details-highlights {
  margin-top: 0;
}

/* Data-block heading (Trims / YouTube Reviews). It used to be an 11px uppercase
   micro-label, which read far too small in Arabic-script locales. */
.car-details-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
}

/* Short brand dash, so each data block gets a designed header. */
.car-details-section-label::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary-red);
}

/* —— Trims: a card grid, with the current trim marked —— */
.car-details-trim-list {
  display: grid;
  /* Four per row, always. An `auto-fill` column count fitted a fifth card into a wide
     window, which squeezed the name column until the longer grades ("DM-i 175KM LiDAR
     Flagship") wrapped into a ragged block and the price row stopped reading as a row.
     Four hold the name on one line and the prices in a line. Below 900px the grid
     collapses to two columns (see the `max-width: 899px` block). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.car-details-trim {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  /* Trim designators are Latin/technical strings ("DM-i 175KM LiDAR Flagship",
     "AWD", "~$35,400"), so the card content stays LTR on RTL pages. */
  direction: ltr;
  /* Shallow bottom edge (7px): the price is pinned there by `margin-top: auto`, so this
     padding is all the space that is left under it — 11px read as a gap between the
     price and the card. */
  padding: 10px 12px 7px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text-dark);
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

/* The hover has to be unmistakable: the card is a door into another trim's page, and on
   this light wash a border change alone (`--border-strong` beside `--border-color`) was
   a hair's width. It now takes the page's tinted fill, throws a real shadow and lifts
   2px as well. The current trim keeps its red fill and red price — `.is-active` comes
   later in this sheet, at the same specificity. */
.car-details-trim:hover {
  border-color: var(--border-strong);
  background: var(--bg-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* The price is what the eye reads second, after the name, and it sits at `--text-muted`
   at rest: the hover brings it up to full strength. */
.car-details-trim:hover .car-details-trim-price {
  color: var(--text-dark);
}

/* A lift is decoration; a visitor who asked for less motion gets the fill and the
   shadow instead. */
@media (prefers-reduced-motion: reduce) {
  .car-details-trim:hover {
    transform: none;
  }
}

.car-details-trim:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

.car-details-trim.is-active {
  border-color: var(--primary-red);
  background: var(--primary-red-soft);
  color: var(--primary-red);
}

/* Full-height brand bar marks the trim being viewed. */
.car-details-trim.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary-red);
}

.car-details-trim-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.car-details-trim-tags {
  margin-top: 3px;
}

/* The price is the card's last line and it sits on the card's bottom edge: every card in
   a grid row is the same height, so the prices line up across the row even when one name
   wrapped and its neighbour did not. `padding-top` is the gap the price keeps from the
   pills above it on a card where nothing had to be pushed down — 10px here, plus the 2px
   flex gap — and the tight `line-height` keeps the line box below it from opening the
   bottom edge back up. */
.car-details-trim-price {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.car-details-trim.is-active .car-details-trim-price {
  color: var(--primary-red);
}

/* —— YouTube reviews: play-badged cards —— */
.car-details-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}

.car-details-review {
  min-width: 0;
}

.car-details-review-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  /* Video titles are English ("… review | Huawei | China 🇨🇳"), so they must not
     be bidi-reordered on RTL pages. */
  direction: ltr;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text-dark);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

/* Red play tile drawn in CSS — no icon font, no image request. */
.car-details-review-link::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--primary-red);
}

/* Triangle centred on the tile: 10px padding + (24px tile − 10px triangle) / 2,
   and 12px padding + (24px tile − 7px triangle) / 2 from the inline start. */
.car-details-review-link::after {
  content: "";
  position: absolute;
  top: 17px;
  inset-inline-start: 21px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #fff;
}

.car-details-review-link:hover {
  border-color: var(--primary-red);
  background: var(--primary-red-soft);
  color: var(--primary-red);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.car-details-review-link:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

/* Key-spec chips. The strip used to be a hairline grid (a five-column table of
   cells); as free-standing chips it reads as one row of facts without a table
   frame wrapping it. */
.car-details-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

/* The tinted fill and the soft radius are the pill that replaced the cell; the
   10px corner is the one the other car-details surfaces use (.car-details-trim,
   .car-details-review-link), so the block reads as one family. The chips stretch
   to a common height (the range chip carries two figures) and hold their content
   to the top, so every chip's heading sits on the same line instead of drifting
   down to the middle of a taller neighbour. */
.car-details-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  flex: 1 1 132px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-light);
  min-width: 0;
  box-sizing: border-box;
}

.car-details-stat-label {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}

.car-details-stat-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 5px;
  min-width: 0;
}

.car-details-stat-num {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-dark);
  line-height: 1.2;
  word-break: break-word;
}

.car-details-stat-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Range highlight renders multiple standard-tagged figures (e.g. WLTP / CLTC). */
.car-details-stat-value-multi {
  flex-direction: column;
  align-items: flex-start;
}

.car-details-stat-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

/* A mini pill for the test-standard tag (WLTP / CLTC). It is white, so it still
   separates from the tinted chip behind it. */
.car-details-stat-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1px 6px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a.car-details-stat-tag:hover {
  color: var(--text-dark);
  border-color: var(--text-muted);
}

.car-details-stat-num.is-unknown,
.car-details-dl-row dd .feature-unknown,
.car-details-feature-cell .feature-unknown {
  color: var(--text-muted);
  font-weight: 400;
}

.car-details-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: 36px;
}

/* The "Iraq Dealer" value links out to the dealer's own site — same accent as the brand
   link, opened in a new tab so a shopper keeps the spec sheet. */
.car-details-dealer-link {
  font-weight: 600;
  color: var(--primary-red);
  text-decoration: none;
}

.car-details-dealer-link:hover,
.car-details-dealer-link:focus-visible {
  text-decoration: underline;
}

.car-details-spec {
  margin: 0;
  border: 1px solid var(--border-color);
  padding: 12px 14px 10px;
  box-sizing: border-box;
  min-width: 0;
  height: fit-content;
  /* White spec blocks, so they read as cards on `.car-details-body`'s light wash. */
  background: var(--surface);
}

.car-details-spec-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
}

/* The brand count summary must follow the page direction (its container is
   forced LTR to keep Latin brand/model names correct). */
[dir="rtl"] .brand-make-dropdown-summary {
  direction: rtl;
  text-align: right;
}

.car-details-dl {
  margin: 0 0 10px;
  border-top: 1px solid var(--border-color);
}

.car-details-dl:last-child {
  margin-bottom: 0;
}

.car-details-dl-row {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: 6px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: start;
}

.car-details-dl-row dt {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.car-details-dl-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}

.car-details-dl-row dd .car-details-spec-value,
.car-details-feature-cell .car-details-spec-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.35;
}

.car-details-dl-row dd .feature-pill {
  font-weight: 700;
}

.car-details-feature-grid {
  /* Column flow: top→bottom, then next column */
  column-count: 1;
  column-gap: 28px;
  column-rule: 1px solid var(--border-color);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
  overflow: visible;
  box-sizing: border-box;
}

.car-details-feature-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  min-height: 36px;
  background: transparent;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-color);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.car-details-feature-label {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.car-details-feature-cell .feature-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

.car-details-feature-cell .car-details-spec-value,
.car-details-feature-cell .feature-unknown {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  line-height: 1.2;
}

.car-details-dl + .car-details-feature-grid {
  margin-top: 4px;
}

@media (min-width: 900px) {
  .car-details-body {
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    align-items: start;
  }

  .car-details-spec-has-features {
    grid-column: 1 / -1;
  }

  .car-details-feature-grid {
    column-count: 3;
  }

  /* 1–2 items (e.g. Adaptive / Air suspension): stack, don't sit side-by-side */
  .car-details-feature-grid:has(> :nth-child(1):last-child),
  .car-details-feature-grid:has(> :nth-child(2):last-child) {
    column-count: 1;
    column-rule: none;
  }
}

/* Stack hero below desktop; denser touch UI */
@media (max-width: 899px) {
  .car-details-hero {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .car-details-hero-media {
    order: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 42vh;
  }

  .car-details-hero-copy {
    order: 2;
    padding: 14px;
  }

  .car-details-title {
    font-size: 1.2rem;
  }

  .car-details-price {
    font-size: 1.15rem;
  }

  .car-details-body {
    grid-template-columns: 1fr;
    padding-top: 12px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .car-details-trims,
  .car-details-highlights {
    padding-top: 12px;
  }

  .car-details-trim-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .car-details-trim {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 10px;
    justify-content: center;
  }

  .car-details-trim-list > .car-details-trim:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .car-details-trim-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Two-up tiles are compact and centered, not stretched, so the price keeps its snug
     spacing here instead of being pinned to the bottom edge (the ≥900px card). */
  .car-details-trim-price {
    margin-top: 1px;
    padding-top: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Two chips per row: the 8px gap is shared by the pair, so each halves it. */
  .car-details-stat {
    flex: 1 1 calc(50% - 4px);
    padding: 8px 12px;
  }

  .car-details-section-head {
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  /* The compare action keeps its natural width next to the heading. */
  .car-details-section-head .car-details-btn {
    width: auto;
    min-height: 40px;
  }

  .car-details-dl-row {
    grid-template-columns: minmax(88px, 40%) 1fr;
    padding: 6px 0;
  }

  .car-details-feature-grid {
    column-count: 2;
  }

  .car-details-feature-grid:has(> :nth-child(1):last-child),
  .car-details-feature-grid:has(> :nth-child(2):last-child) {
    column-count: 1;
    column-rule: none;
  }
}

@media (max-width: 479px) {
  .car-details-feature-grid {
    column-count: 1;
  }

  .car-details-trim-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .car-details-trim {
    padding: 7px 8px;
  }

  .car-details-trim-name {
    font-size: 11px;
  }

  .car-details-trim-price {
    font-size: 10px;
  }

  .car-details-stat {
    flex: 1 1 calc(50% - 4px);
  }

  .car-details-stat-num {
    font-size: 0.92rem;
  }

  .car-details-dl-row {
    grid-template-columns: 1fr;
    gap: 2px 0;
    padding: 7px 0;
  }

  .car-details-dl-row dd {
    font-size: 13px;
    font-weight: 400;
  }

  .car-details-hero-media {
    max-height: 36vh;
  }
}

@media (max-width: 720px) {
  .model-card-actions {
    padding: 0 14px 12px;
  }
}

/* ---- Site footer ---------------------------------------------------------- */
/* The site's own address, on every page. A visitor arrives from a shared comparison link
   far more often than from the home page, so the name has to be on all of them — and the
   pages have no masthead of their own, so this is the only place it can be. One proper
   noun, so nothing here needs translating; a sentence (a source credit, a contact line)
   goes here once it is written in all six locales. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Its own break from the content above; less below, because the page already pads its
     edges. */
  padding: 22px 12px 10px;
}

/* Latin in every locale, like the model names: a domain is not translated, and on an
   Arabic-script page the element's own direction is what keeps it reading the way it is
   written. */
.site-footer-brand {
  direction: ltr;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer-brand:hover,
.site-footer-brand:focus-visible {
  color: var(--primary-red);
}