/* Cars342 on the website: the showroom, rails of cars, tiles, the quick search, the finance calculator, the shortlist
   and the car pages.
   Everything is scoped under .c342, so it cannot touch the rest of the site. Divi styles paragraphs, lists, headings
   and links with ID selectors (body.et-db #et-boc .et-l p), so the few properties it sets are forced here with
   !important; nothing else is (lessons.md L-074f, L-066f). */

/* Montserrat, the redesign's one family (October 2026), from the plugin itself so car pages need nothing else. */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap; src: url('../vendor/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

.c342 {
  --c342-ink: #121212;
  --c342-ink-2: #2B2B2E;
  --c342-text: #1A1A1C;
  --c342-muted: #66666C;
  --c342-line: #E7E7EA;
  --c342-line-2: #D3D3D8;
  --c342-paper: #F4F4F5;
  --c342-card: #FFFFFF;
  --c342-accent: #F5A524; /* the logo's gold: dots, arrows, focus, small marks only */
  --c342-accent-text: #8A5500; /* gold that reads as text on white */
  --c342-silver: linear-gradient(180deg, #FBFBFC 0%, #E3E5E8 48%, #C8CCD1 100%);
  --c342-silver-hover: linear-gradient(180deg, #FFFFFF 0%, #ECEEF0 48%, #D5D8DC 100%);
  --c342-silver-flat: #D9DCE0;
  --c342-green: #17734A;
  --c342-green-bg: #E4F2EA;
  --c342-amber: #8F5300;
  --c342-amber-bg: #FCEFD3;
  --c342-wa: #1C7F47;
  --c342-red: #C10F1B;
  --c342-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c342-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c342-r: 8px;
  --c342-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.45);
  --c342-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --c342-sticky-top: 24px;
  font-family: var(--c342-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c342-text);
  -webkit-font-smoothing: antialiased;
}
.c342, .c342 *, .c342 *::before, .c342 *::after { box-sizing: border-box; }
.c342 :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, fieldset, legend) { margin: 0; }
.c342 p, .c342 h1, .c342 h2, .c342 h3, .c342 h4, .c342 dt, .c342 dd { padding: 0 !important; }
.c342 ul, .c342 ol { list-style: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important; }
.c342 li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.c342 a { color: inherit !important; text-decoration: none !important; }
.c342 * { max-width: none; } /* some themes cap every element in <main> (Twenty Twenty-One does) */
.c342 img { display: block; max-width: 100%; border: 0; box-shadow: none; }
/* Our photos fill their frames. Forced, because theme scripts write sizes onto images as inline styles. */
.c342 .c342-card__img, .c342 .c342-spot__img, .c342 .c342-gallery__img, .c342 .c342-gallery__thumbs img, .c342 .c342-blur { width: 100% !important; height: 100% !important; max-width: none !important; }
.c342 .c342-blur { width: calc(100% + 32px) !important; height: calc(100% + 32px) !important; }
.c342 svg.c342-ic { flex: none; fill: currentColor; vertical-align: middle; }
.c342 :focus-visible { outline: 2px solid var(--c342-accent); outline-offset: 2px; }
.c342 :focus:not(:focus-visible) { outline: none; } /* a theme focus ring on a mouse or finger press */
.c342 [hidden] { display: none !important; }
/* Clear of Divi's fixed header (desktop only: Divi's phone header scrolls away) and the WordPress toolbar. */
@media (min-width: 981px) {
  body.et_fixed_nav:has(#main-header) .c342 { --c342-sticky-top: 104px; }
  body.admin-bar .c342 { --c342-sticky-top: 56px; }
  body.admin-bar.et_fixed_nav:has(#main-header) .c342 { --c342-sticky-top: 136px; }
}
.c342-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons (Effect 01, shine, on every call to action) ---------- */
.c342 .c342-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px !important; border-radius: 999px; border: 1px solid transparent;
  font: 600 14px/1.1 var(--c342-body); letter-spacing: 0.01em; text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.c342 .c342-btn:active { transform: translateY(1px); }
.c342 .c342-btn--primary { background: var(--c342-ink) !important; color: #fff !important; border-color: var(--c342-ink) !important; box-shadow: none; }
.c342 .c342-btn--primary:hover { background: #2E2E32 !important; }
/* On a dark panel the main button turns chrome, as the logo's 342. */
.c342.c342-est .c342-btn--primary, .c342 .c342-calc__out .c342-btn--primary, .c342 .c342-finder .c342-btn--primary, .c342 .c342-soldnote .c342-btn--primary, .c342.c342-rail--dark .c342-btn--primary {
  background: var(--c342-silver) !important; color: var(--c342-ink) !important; border-color: rgba(255, 255, 255, 0.6) !important; box-shadow: inset 0 1px 0 #fff;
}
.c342.c342-est .c342-btn--primary:hover, .c342 .c342-calc__out .c342-btn--primary:hover, .c342 .c342-finder .c342-btn--primary:hover, .c342.c342-rail--dark .c342-btn--primary:hover { background: var(--c342-silver-hover) !important; }
.c342 .c342-btn--primary:focus-visible { outline-color: var(--c342-ink); }
.c342 .c342-btn--dark { background: var(--c342-ink) !important; color: #fff !important; }
/* A trailing arrow in a circle, as on the redesign's pills. */
.c342 .c342-btn__arrow { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; background: var(--c342-accent); color: var(--c342-ink); flex: none; transition: transform 0.25s var(--c342-ease); }
.c342 .c342-btn:hover .c342-btn__arrow { transform: translateX(3px); }
.c342.c342-est .c342-btn__arrow, .c342 .c342-calc__out .c342-btn__arrow { background: var(--c342-ink); color: var(--c342-accent); }
.c342 .c342-btn--ghost { background: var(--c342-card) !important; color: var(--c342-ink) !important; border-color: var(--c342-line-2) !important; }
.c342 .c342-btn--ghost:hover { border-color: var(--c342-ink) !important; }
.c342 .c342-btn--whatsapp { background: var(--c342-wa) !important; color: #fff !important; }
.c342 .c342-btn--whatsapp:hover { background: #166A3B !important; }
.c342 .c342-btn--wide { width: 100%; }
@media (max-width: 640px) {
  .c342 .c342-btn--wide, .c342 .c342-calc .c342-btn { white-space: normal; min-height: 52px; padding-top: 12px !important; padding-bottom: 12px !important; line-height: 1.25; }
}
.c342 .c342-shine { position: relative; overflow: hidden; isolation: isolate; }
.c342 .c342-shine::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
  background-size: 250% 250%; background-position: 200% 0; background-repeat: no-repeat;
  transition: background-position 0s ease;
}
.c342 .c342-shine:hover::before { background-position: -100% 0; transition-duration: 0.8s; }
.c342 .c342-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c342-text) !important; font-weight: 600; font-size: 14px; }
.c342 .c342-link .c342-ic { color: var(--c342-accent-text); transition: transform 0.2s var(--c342-ease); }
.c342 .c342-link:hover .c342-ic { transform: translateX(3px); }
.c342 .c342-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }


/* ---------- Chips ---------- */
.c342-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font: 600 11px/1 var(--c342-body); letter-spacing: 0.02em; white-space: nowrap; }
.c342-chip--reserved { background: var(--c342-amber-bg); color: var(--c342-amber); }
.c342-chip--reduced, .c342-chip--drop { background: var(--c342-red); color: #fff; }
.c342-chip--new { background: var(--c342-accent); color: var(--c342-ink); }
.c342-chip--featured { background: rgba(18, 18, 18, 0.82); color: #fff; }
.c342-chip--sold { background: var(--c342-ink); color: #fff; }

/* ---------- Cards: a white card, the photo inset with rounded corners, the specs in a row, and the price with a
   "See more" pill at the foot (the redesign's inspiration) ---------- */
.c342 .c342-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.c342-card { position: relative; height: 100%; }
.c342 .c342-card__link {
  display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden;
  background: var(--c342-card); border: 0; border-radius: 8px; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.08);
}
/* Hover: the photo eases in and the button turns gold; the card itself stays put. */
.c342 .c342-card__link:hover .c342-card__go { background: var(--c342-accent); color: var(--c342-ink); }
.c342 .c342-card__link:hover .c342-card__go .c342-btn__arrow { background: var(--c342-ink); color: var(--c342-accent); transform: translateX(3px); }
.c342 .c342-card__link:focus-visible { outline-offset: 3px; }
.c342-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c342-paper); }
.c342 .c342-blur { position: absolute; inset: -16px; width: calc(100% + 32px); max-width: none; height: calc(100% + 32px); object-fit: cover; filter: blur(14px); }
.c342 .c342-card__img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--c342-ease); }
.c342 .c342-card__link:hover .c342-card__img { transform: scale(1.035); }
.c342-card__chips { position: absolute; left: 10px; top: 10px; right: 56px; display: flex; flex-wrap: wrap; gap: 5px; }
.c342-card__count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: rgba(10, 10, 10, 0.72); color: #fff; font: 600 11px/1 var(--c342-body); }
.c342-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.c342-card__stock { position: absolute; left: 10px; bottom: 10px; padding: 4px 7px; border-radius: 4px; background: rgba(10, 10, 10, 0.72); color: #fff; font: 600 10px/1 var(--c342-body); letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.c342 .c342-card__title { font: 600 15px/1.3 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; margin: 0 !important; }
.c342 .c342-card__variant { margin-top: 3px; min-height: 18px; color: var(--c342-muted); font-size: 12px; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.c342 .c342-card__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px !important; border-top: 1px solid var(--c342-line); border-bottom: 1px solid var(--c342-line); color: var(--c342-ink-2); font-size: 12px; }
.c342 .c342-card__specs li { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 9px 0 9px 8px !important; white-space: nowrap; overflow: hidden; }
.c342 .c342-card__specs li:first-child { padding-left: 0 !important; }
.c342 .c342-card__specs li + li { border-left: 1px solid var(--c342-line); }
.c342 .c342-card__specs li span { overflow: hidden; text-overflow: ellipsis; }
.c342-card__specs .c342-ic { color: var(--c342-muted); }
.c342 .c342-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.c342 .c342-card__money { display: grid; gap: 2px; min-width: 0; }
.c342 .c342-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0; font: 700 19px/1.1 var(--c342-display) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--c342-ink); }
.c342 .c342-card__price s { font: 400 12px/1 var(--c342-body); color: var(--c342-muted); }
.c342 .c342-card__pm { font-size: 11px; font-weight: 600; color: var(--c342-accent-text); }
.c342 .c342-card__go {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--c342-ink); color: #fff; font: 600 12px/1 var(--c342-body); white-space: nowrap; transition: background-color 0.2s, color 0.2s;
}
.c342 .c342-card__go .c342-btn__arrow { width: 22px; height: 22px; margin-right: -8px; border-radius: 50%; }

/* The heart: beside the card's link (a button cannot sit inside one), over the top corner of its photo. */
.c342 .c342-save {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.94) !important; color: var(--c342-ink) !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45) !important; cursor: pointer; transition: transform 0.22s var(--c342-ease), color 0.15s;
}
.c342 .c342-save:hover { color: var(--c342-red) !important; }
.c342 .c342-save .c342-ic--on, .c342 .c342-save[aria-pressed='true'] .c342-ic { display: none; }
.c342 .c342-save[aria-pressed='true'] .c342-ic--on { display: block; color: var(--c342-red); }
.c342 .c342-save.is-pop .c342-ic--on, .c342 .c342-tool.is-pop .c342-ic--on { animation: c342-pop 0.42s var(--c342-ease); }
@keyframes c342-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ---------- Showroom ---------- */
.c342-showroom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
.c342 .c342-showroom__count { font: 500 26px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; letter-spacing: 0.01em; }

/* Search */
.c342 .c342-search { position: relative; display: block; margin: 0; }
.c342 .c342-search .c342-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c342-muted); pointer-events: none; }
.c342 .c342-search input {
  width: 100%; height: 56px; margin: 0; padding: 0 16px 0 50px !important; border: 1px solid var(--c342-line-2) !important; border-radius: 8px !important;
  background: var(--c342-card) !important; color: var(--c342-ink) !important; font: 400 17px/1.2 var(--c342-body) !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.c342 .c342-search input::placeholder { color: var(--c342-muted); opacity: 1; }
.c342 .c342-search input:hover { border-color: var(--c342-ink) !important; }
.c342 .c342-search input:focus { outline: none; border-color: var(--c342-accent) !important; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28) !important; }

/* Makes and quick picks: pills, in one swipeable row on phones */
.c342 .c342-makes ul, .c342 .c342-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.c342 .c342-make, .c342 .c342-qchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font: 600 14px/1 var(--c342-body); transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.c342 .c342-make { background: var(--c342-card); border: 1px solid var(--c342-line-2); color: var(--c342-ink) !important; }
.c342 .c342-make span, .c342 .c342-qchip span { font-weight: 400; color: var(--c342-muted); }
.c342 .c342-make:hover { border-color: var(--c342-ink); }
.c342 .c342-make[aria-current='true'] { background: var(--c342-ink); border-color: var(--c342-ink); color: #fff !important; }
.c342 .c342-make[aria-current='true'] span { color: var(--c342-silver-flat); }
.c342 .c342-qchip { background: var(--c342-paper); border: 1px solid transparent; color: var(--c342-ink) !important; }
.c342 .c342-qchip:hover { border-color: var(--c342-line-2); }
.c342 .c342-qchip[aria-current='true'] { background: var(--c342-ink); color: #fff !important; }
.c342 .c342-qchip[aria-current='true'] span { color: var(--c342-silver-flat); }

/* The filters beside the results (desktop), above them (phones without JavaScript), or a sheet (phones) */
/* The filters sit beside the results where the showroom is wide enough for both, and above them where it is not. */
.c342-sr-main { container: c342srm / inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 32px; }
.c342-sr-main > .c342-filters { flex: 1 1 248px; min-width: 0; }
.c342-sr-main > .c342-sr-results { flex: 999 1 600px; }
/* The count and the tools share a row while they fit, and wrap when they do not. */
.c342-sr-results { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; }
.c342-sr-results > * { flex: 1 1 100%; min-width: 0; }
.c342-sr-results > .c342-showroom__count { flex: 1 1 auto; width: auto; }
.c342-sr-results > .c342-toolbar { flex: 0 1 auto; margin-left: auto; }
.c342-filters { display: grid; gap: 14px; padding: 16px; background: var(--c342-paper); border: 1px solid var(--c342-line); border-radius: var(--c342-r); }
.c342-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c342 .c342-filters__title { font: 600 16px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink); letter-spacing: 0.01em; }
.c342-filters__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.c342-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.c342-field__label { font: 600 12px/1.1 var(--c342-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c342-muted); }
.c342-select { position: relative; display: block; }
.c342 .c342-select select {
  width: 100%; height: 48px; margin: 0; padding: 0 40px 0 14px !important; border: 1px solid var(--c342-line-2) !important; border-radius: 6px !important;
  background: var(--c342-card) !important; color: var(--c342-ink) !important; font: 400 16px/1.2 var(--c342-body) !important;
  appearance: none; -webkit-appearance: none; cursor: pointer; box-shadow: none !important; text-overflow: ellipsis;
}
.c342 .c342-select select:hover { border-color: var(--c342-ink) !important; }
.c342 .c342-select select:focus { outline: none; border-color: var(--c342-accent) !important; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28) !important; }
.c342-select .c342-ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c342-muted); }
.c342-filters__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 48px; }
.c342 .c342-filters__apply { min-height: 48px; }
.c342 .c342-filters__clear { color: var(--c342-ink) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.c342 .c342-filters__close {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: var(--c342-paper) !important; color: var(--c342-ink) !important; cursor: pointer; box-shadow: none !important;
}
.c342-filters:not(.is-open) .c342-filters__close, .c342-filters:not(.is-open) .c342-filters__done { display: none; }
.c342-js .c342-filters__apply { display: none; }
.c342-js .c342-filters:not(.is-open) .c342-filters__actions:not(:has(a:not([hidden]))) { display: none; }

/* Toolbar: the filters button (phones), the sort and the shortlist */
.c342-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.c342 .c342-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.c342 .c342-sort .c342-select select { height: 44px; min-width: 190px; }
.c342 .c342-sort__label { font: 600 12px/1 var(--c342-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c342-muted); }
.c342 .c342-filters-toggle, .c342 .c342-sl-open {
  display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px !important; border-radius: 999px !important; margin: 0;
  border: 1px solid var(--c342-line-2) !important; background: var(--c342-card) !important; color: var(--c342-ink) !important;
  font: 600 15px/1 var(--c342-body) !important; cursor: pointer; box-shadow: none !important; white-space: nowrap; flex: none;
}
.c342 .c342-sl-open { display: inline-flex; }
.c342 .c342-sl-open:hover, .c342 .c342-filters-toggle:hover { border-color: var(--c342-ink) !important; }
.c342 .c342-sl-open .c342-ic { color: var(--c342-red); }
.c342-filters-toggle__n, .c342-sl-open__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--c342-accent); color: var(--c342-ink); font: 600 12px/1 var(--c342-body); }

.c342-more { display: flex; justify-content: center; }
.c342-none { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--c342-muted); background: var(--c342-paper); border-radius: var(--c342-r); }
.c342 .c342-none__title { font: 600 20px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink); }
.c342-showroom--empty { padding: 32px; background: var(--c342-paper); border-radius: var(--c342-r); }
.c342 .c342-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.c342-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.55); }

/* "Not seeing the one?": a dark band with the painted lines of a car lot */
.c342-finder {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 12px; padding: 30px 32px;
  border-radius: 8px; background: var(--c342-ink); color: #D2D2D6; overflow: hidden; isolation: isolate;
}
.c342-finder::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(245, 165, 36, 0.12), transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000);
}
.c342-finder__text { flex: 1 1 340px; min-width: 0; }
.c342 .c342-finder__eyebrow { font: 600 12px/1 var(--c342-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c342-accent); }
.c342 .c342-finder__title { margin: 8px 0 6px !important; font: 600 25px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: #fff !important; }
.c342 .c342-finder p { max-width: 54ch; }
.c342 .c342-finder .c342-btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.4) !important; }
.c342 .c342-finder .c342-btn--ghost:hover { border-color: #fff !important; }

/* ---------- Recently viewed ---------- */
.c342-viewed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 8px; }
.c342-viewed__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.c342 .c342-viewed__title { font: 600 20px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; margin: 0 !important; }
.c342 .c342-viewed__clear { min-height: 44px; margin: 0; padding: 0 4px !important; border: 0 !important; background: none !important; color: var(--c342-ink) !important; font: 600 14px/1 var(--c342-body) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none !important; }
.c342 .c342-viewed__list { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; padding-bottom: 6px !important; scroll-snap-type: x proximity; scrollbar-width: thin; }
.c342 .c342-viewed__list li { scroll-snap-align: start; }
.c342 .c342-mini { display: grid; gap: 4px; color: var(--c342-ink) !important; }
.c342 .c342-mini img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--c342-paper); margin-bottom: 4px; }
.c342-mini__title { font: 600 14px/1.2 var(--c342-display); letter-spacing: -0.005em; }
.c342-mini__price { font-weight: 600; font-size: 15px; color: var(--c342-ink-2); }
.c342 .c342-mini:hover .c342-mini__title { color: var(--c342-accent-text); }

/* ---------- Rails: a row of cars to swipe ---------- */
/* Grids of one column take minmax(0, 1fr): a row that scrolls sideways must not widen the page to its own length. */
.c342-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; width: 100%; container: c342rail / inline-size; }
.c342-rail__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.c342 .c342-rail__title { font: 500 30px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; margin: 0 !important; }
.c342-rail__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.c342-rail__nav { display: flex; gap: 8px; }
.c342 .c342-rail__btn {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 1px solid var(--c342-line-2) !important; border-radius: 50% !important;
  background: var(--c342-card) !important; color: var(--c342-ink) !important; cursor: pointer; box-shadow: none !important; transition: border-color 0.15s, opacity 0.15s;
}
.c342 .c342-rail__btn:hover { border-color: var(--c342-ink) !important; }
/* On a dark band (the home page's new arrivals): white words, the cards stay white. */
.c342-rail--dark .c342-rail__title { color: #fff !important; }
.c342-rail--dark .c342-rail__more { color: #fff !important; }
.c342-rail--dark .c342-rail__more .c342-ic { color: var(--c342-accent); }
.c342.c342-rail--dark .c342-rail__btn { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }
.c342.c342-rail--dark .c342-rail__btn:hover { border-color: #fff !important; }
.c342.c342-rail--dark .c342-footnote { color: #9C9CA3; }
.c342 .c342-rail__btn[disabled] { opacity: 0.35; cursor: default; }
/* Room above and below inside the scroller, so a lifted card and its shadow are not cut off. */
.c342 .c342-rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
  margin: -6px 0 -22px !important; padding: 6px 0 22px !important; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.c342-rail__track::-webkit-scrollbar { display: none; }
.c342-rail__item { scroll-snap-align: start; min-width: 0; }
/* layout="grid": the cars side by side (stacked on a phone), nothing to swipe, and a button to the showroom under them. */
.c342.c342-rail--grid .c342-rail__track { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 !important; padding: 0 !important; overflow: visible; scroll-snap-type: none; }
.c342-rail__cta { display: flex; justify-content: center; margin: 28px 0 0 !important; padding: 0 !important; }
@container c342rail (min-width: 720px) { .c342.c342-rail--grid .c342-rail__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.c342-rail--large .c342-rail__track { grid-auto-columns: 90%; }
.c342-rail--large .c342-card__title { font-size: 18px !important; }

/* ---------- Spotlight: one car, large, its price on a windscreen sticker ---------- */
.c342-spot { position: relative; width: 100%; }
.c342 .c342-spot__link {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'media' 'body'; overflow: hidden;
  background: var(--c342-card); border: 1px solid var(--c342-line); border-radius: 8px; color: var(--c342-ink) !important;
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.7); transition: transform 0.25s var(--c342-ease), box-shadow 0.25s var(--c342-ease);
}
.c342 .c342-spot__link:hover { transform: translateY(-3px); box-shadow: 0 46px 90px -46px rgba(0, 0, 0, 0.75); }
.c342-spot__media { grid-area: media; position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0E0E0F; }
.c342 .c342-spot__img { position: relative; display: block; object-fit: cover; transition: transform 0.6s var(--c342-ease); }
.c342 .c342-spot__link:hover .c342-spot__img { transform: scale(1.03); }
.c342-spot__label { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; background: var(--c342-ink); color: #fff; font: 600 12px/1 var(--c342-body); letter-spacing: 0.08em; text-transform: uppercase; }
.c342-spot__sticker {
  grid-area: body; justify-self: end; align-self: start; z-index: 2; display: grid; justify-items: start; gap: 2px; margin: -54px 18px 0 0; padding: 10px 16px 9px;
  border-radius: 8px; background: var(--c342-silver); color: var(--c342-ink); box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px rgba(0, 0, 0, 0.6);
}
.c342-spot__price { font: 700 26px/1 var(--c342-display); letter-spacing: -0.01em; }
.c342-spot__note { font: 600 13px/1.2 var(--c342-body); }
.c342-spot__body { grid-area: body; display: grid; gap: 6px; padding: 28px 24px 24px; }
.c342 .c342-spot__title { margin: 0 !important; font: 500 26px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; }
.c342-spot__variant { color: var(--c342-muted); font-size: 16px; }
.c342-spot__specs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--c342-ink-2); font-size: 15px; font-weight: 600; }
.c342-spot__specs > span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 12px 3px -10px; border-radius: 50%; background: var(--c342-accent); vertical-align: middle; }
.c342-spot__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--c342-accent-text); font-weight: 600; }
.c342-spot__go .c342-ic { transition: transform 0.2s var(--c342-ease); }
.c342 .c342-spot__link:hover .c342-spot__go .c342-ic { transform: translateX(4px); }
.c342 .c342-spot .c342-save { top: 14px; right: 14px; }
.c342-spot .c342-footnote { margin-top: 10px !important; }
@media (max-width: 640px) {
  .c342 .c342-spot__title { font-size: 22px !important; }
  .c342-spot__price { font-size: 22px; }
  .c342-spot__body { padding: 26px 18px 20px; }
}

/* ---------- Tiles: makes, body types, budgets ---------- */
.c342-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; container: c342tiles / inline-size; }
.c342 .c342-tiles__title { font: 500 30px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; margin: 0 !important; }
.c342 .c342-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.c342 .c342-tile {
  position: relative; display: grid; align-content: start; gap: 6px; height: 100%; min-height: 108px; padding: 18px 52px 18px 18px !important;
  background: var(--c342-card); border: 1px solid var(--c342-line); border-radius: var(--c342-r); color: var(--c342-ink) !important;
  transition: transform 0.2s var(--c342-ease), border-color 0.2s, box-shadow 0.2s;
}
.c342 .c342-tile:hover { transform: translateY(-2px); border-color: var(--c342-ink); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.55); }
.c342-tile__name { font: 600 14px/1.2 var(--c342-display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.c342-tile__meta { font-size: 14px; color: var(--c342-muted); }
.c342-tile .c342-ic { position: absolute; right: 16px; bottom: 16px; color: var(--c342-accent-text); transition: transform 0.2s var(--c342-ease); }
.c342 .c342-tile:hover .c342-ic { transform: translateX(4px); }
.c342-tiles--types .c342-tile { border-left: 1px solid var(--c342-line); }
.c342-tiles--budget .c342-tile { background: var(--c342-paper); }
.c342-tiles--budget .c342-tile__name { font-size: 16px; }

/* ---------- Quick search ---------- */
.c342-qs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; width: 100%; container: c342qs / inline-size; padding: 16px; background: var(--c342-card); border-radius: 8px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55); }
.c342-qs__fields { flex: 999 1 460px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.c342 .c342-qs__go { flex: 1 1 180px; min-height: 48px; }

/* ---------- Segmented choices (radios that look like one control) ---------- */
.c342 .c342-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.c342 .c342-seg legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; }
.c342 .c342-seg label { position: relative; display: block; margin: 0 !important; padding: 0 !important; cursor: pointer; }
.c342 .c342-seg input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.c342 .c342-seg label > span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--c342-line-2); background: var(--c342-card); color: var(--c342-ink); font: 600 15px/1 var(--c342-body); white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.c342 .c342-seg label > span small { font-weight: 400; font-size: 13px; color: inherit; opacity: 0.75; }
.c342 .c342-seg label:hover > span { border-color: var(--c342-ink); }
.c342 .c342-seg input:checked + span { background: var(--c342-ink); border-color: var(--c342-ink); color: #fff; }
.c342 .c342-seg input:focus-visible + span { outline: 3px solid var(--c342-accent-text); outline-offset: 2px; }
.c342 .c342-seg--terms label { flex: 1 1 0; min-width: 52px; }
.c342 .c342-seg--terms label > span { padding: 0 6px; }
.c342 .c342-calc__modes { padding: 4px; border-radius: 8px; background: var(--c342-paper); gap: 4px; }
.c342 .c342-calc__modes label { flex: 1 1 200px; }
.c342 .c342-calc__modes label > span { border: 0; background: transparent; min-height: 48px; }
.c342 .c342-calc__modes input:checked + span { background: var(--c342-card); color: var(--c342-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.c342 .c342-calc__modes .c342-ic { color: var(--c342-accent-text); }

/* ---------- Finance calculator ---------- */
.c342-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; container: c342calc / inline-size; }
.c342-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.c342-calc__in { display: grid; gap: 16px; min-width: 0; }
.c342-calc__field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.c342-calc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c342 .c342-money { position: relative; display: block; }
.c342 .c342-money > span { position: absolute; top: 50%; transform: translateY(-50%); font: 600 18px/1 var(--c342-body); color: var(--c342-muted); pointer-events: none; }
.c342 .c342-money > span:first-child { left: 14px; }
.c342 .c342-money--pct > span { left: auto; right: 14px; }
.c342 .c342-money input {
  width: 100%; height: 52px; margin: 0; padding: 0 14px 0 36px !important; border: 1px solid var(--c342-line-2) !important; border-radius: 6px !important;
  background: var(--c342-card) !important; color: var(--c342-ink) !important; font: 600 18px/1.2 var(--c342-body) !important; box-shadow: none !important;
}
.c342 .c342-money--pct input { padding: 0 36px 0 14px !important; }
.c342 .c342-money input:hover { border-color: var(--c342-ink) !important; }
.c342 .c342-money input:focus { outline: none; border-color: var(--c342-accent) !important; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28) !important; }
.c342 .c342-calc__field.is-invalid input { border-color: #B42318 !important; }
.c342 .c342-calc__go { justify-self: start; }
.c342-calc__out { display: grid; gap: 14px; padding: 24px; border-radius: 8px; background: var(--c342-ink); color: #D2D2D6; }
.c342 .c342-calc__label { font: 600 12px/1.2 var(--c342-body); letter-spacing: 0.12em; text-transform: uppercase; color: #9C9CA3; }
.c342 .c342-calc__figure { margin-top: -4px !important; font: 700 40px/1 var(--c342-display); color: #fff; letter-spacing: -0.01em; }
.c342 .c342-calc__figure small { font: 400 17px/1 var(--c342-body); color: #9C9CA3; }
.c342 .c342-calc__sum { display: grid; }
.c342 .c342-calc__sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.c342 .c342-calc__sum dt { color: #9C9CA3; }
.c342 .c342-calc__sum dd { margin: 0; font-weight: 600; color: #fff; text-align: right; }
.c342 .c342-calc__terms { color: var(--c342-muted); font-size: 13px; line-height: 1.5 !important; max-width: 80ch; }

/* ---------- Estimate: three sliders on a dark panel, the figures on frosted glass over a photo ---------- */
.c342-est { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 8px; background: var(--c342-ink); color: #D2D2D6; }
.c342-est__panel { display: grid; align-content: start; gap: 22px; padding: clamp(24px, 3.4vw, 40px); }
.c342 .c342-est__title { margin: 0 0 4px !important; font: 500 clamp(24px, 2.6vw, 32px)/1.2 var(--c342-display) !important; letter-spacing: -0.01em; color: #fff !important; }
.c342-est__field { display: grid; gap: 10px; }
.c342-est__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.c342 .c342-est__row label { margin: 0; font: 500 14px/1.2 var(--c342-body); color: #fff; }
.c342 .c342-est__row label span { color: #9C9CA3; }
.c342 .c342-est__row output { font: 600 14px/1 var(--c342-body); color: #fff; }
.c342.c342-est input[type='range'] {
  --c342-fill: 0%; width: 100%; height: 28px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.c342.c342-est input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 6px; background: linear-gradient(90deg, var(--c342-accent) var(--c342-fill), #4A4A50 var(--c342-fill)); }
.c342.c342-est input[type='range']::-moz-range-track { height: 4px; border-radius: 6px; background: #4A4A50; }
.c342.c342-est input[type='range']::-moz-range-progress { height: 4px; border-radius: 6px; background: var(--c342-accent); }
.c342.c342-est input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 42px; height: 28px; margin-top: -12px; border-radius: 6px; background: var(--c342-silver); border: 1px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.c342.c342-est input[type='range']::-moz-range-thumb { width: 42px; height: 28px; border-radius: 6px; background: var(--c342-silver); border: 1px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.c342.c342-est input[type='range']:focus-visible { outline: 2px solid var(--c342-accent); outline-offset: 4px; border-radius: 6px; }
.c342-est__more { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.c342 .c342-est__more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 !important; cursor: pointer; list-style: none; font: 500 13px/1.2 var(--c342-body); color: #9C9CA3; }
.c342 .c342-est__more summary::-webkit-details-marker { display: none; }
.c342 .c342-est__more summary .c342-ic { transition: transform 0.25s var(--c342-ease); }
.c342 .c342-est__more[open] summary .c342-ic { transform: rotate(45deg); }
.c342 .c342-est__more p { padding-bottom: 6px !important; font-size: 13px; line-height: 1.6 !important; color: #9C9CA3; }
.c342-est__media { position: relative; min-height: 340px; background: #2A2A2D; }
.c342 .c342-est__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 70% 60%; }
.c342-est__glass {
  position: absolute; left: clamp(16px, 8%, 56px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; width: min(220px, 70%); padding: 18px 20px;
  border-radius: 8px; background: rgba(30, 30, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.c342 .c342-est__glass p { display: grid; gap: 4px; }
.c342 .c342-est__glass span { font: 500 12px/1.2 var(--c342-body); color: #D2D2D6; }
.c342 .c342-est__glass b { font: 700 24px/1 var(--c342-display); letter-spacing: -0.01em; color: #fff; }
.c342 .c342-est__go { position: absolute; right: 16px; bottom: 16px; min-height: 42px; padding: 0 20px 0 18px !important; font-size: 13px; }
/* Side by side on a wide screen (the section is its own box, so a media query, not a container query). */
@media (min-width: 900px) {
  .c342-est { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .c342-est__media { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .c342 .c342-est__more summary .c342-ic { transition: none; }
}

/* ---------- Car page tools: save, share, compare ---------- */
.c342-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: -6px; }
.c342 .c342-tool {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 0; padding: 0 2px !important; border: 0 !important; background: none !important;
  color: var(--c342-ink) !important; font: 600 15px/1 var(--c342-body) !important; cursor: pointer; box-shadow: none !important;
}
.c342 .c342-tool:hover span:not(.c342-sl-open__n) { text-decoration: underline; text-underline-offset: 3px; }
.c342 .c342-tool .c342-ic { color: var(--c342-ink-2); }
.c342 .c342-tool .c342-ic--on, .c342 .c342-tool[aria-pressed='true'] .c342-ic:not(.c342-ic--on) { display: none; }
.c342 .c342-tool[aria-pressed='true'] .c342-ic--on { display: block; color: var(--c342-red); }

/* ---------- The site's own forms: finance, a car to sell, a message ---------- */
.c342-sf { width: 100%; container: c342sf / inline-size; padding: 26px; background: var(--c342-card); border: 1px solid var(--c342-line); border-radius: 8px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.45); scroll-margin-top: var(--c342-sticky-top); }
.c342 .c342-sf__car { display: flex; align-items: center; gap: 10px; padding: 12px 14px !important; border-radius: 6px; background: var(--c342-paper); font-weight: 600; color: var(--c342-ink); }
.c342-sf__car .c342-ic { color: var(--c342-accent-text); }
.c342 .c342-input .c342-select select { height: 50px; }
.c342 .c342-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px !important; border-radius: 6px; background: var(--c342-paper); cursor: pointer; }
.c342 .c342-check input { width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; padding: 0 !important; accent-color: var(--c342-accent-text); cursor: pointer; }
.c342 .c342-check > span { font-weight: 400 !important; font-size: 15px !important; color: var(--c342-ink-2) !important; line-height: 1.5; }
.c342 .c342-check.is-invalid { box-shadow: inset 0 0 0 2px #B42318; }
@container c342sf (max-width: 359px) {
  .c342-sf .c342-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Toast ---------- */
.c342-toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 100003; display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px); padding: 12px 12px 12px 18px; border-radius: 8px; background: var(--c342-ink); color: #fff;
  font: 600 15px/1.3 var(--c342-body); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 0.3s var(--c342-ease), opacity 0.3s; pointer-events: none;
}
.c342-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.c342 .c342-toast button { min-height: 40px; margin: 0; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.1) !important; color: var(--c342-accent) !important; font: 600 15px/1 var(--c342-body) !important; cursor: pointer; white-space: nowrap; }
.c342 .c342-toast button:hover { background: rgba(255, 255, 255, 0.18) !important; }

/* ---------- Shortlist: the saved cars side by side ---------- */
.c342-sl { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: min(92dvh, 900px); margin: auto; padding: 0; border: 0; border-radius: 8px; background: var(--c342-card); color: var(--c342-text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); overflow: hidden; }
.c342-sl::backdrop { background: rgba(0, 0, 0, 0.6); }
.c342-sl__panel { display: flex; flex-direction: column; max-height: min(92dvh, 900px); }
.c342-sl__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--c342-line); }
.c342 .c342-sl__title { font: 600 21px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; margin: 0 !important; }
.c342-sl__n { color: var(--c342-muted); font-weight: 600; margin-right: auto; }
.c342 .c342-sl__close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--c342-paper) !important; color: var(--c342-ink) !important; cursor: pointer; flex: none; }
.c342 .c342-sl__diff { display: flex; align-items: center; gap: 10px; padding: 12px 20px 0; font-weight: 600; font-size: 15px; color: var(--c342-ink-2); cursor: pointer; }
.c342 .c342-sl__diff input { width: 20px; height: 20px; margin: 0; accent-color: var(--c342-ink); }
.c342-sl__scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 20px 16px; overscroll-behavior: contain; }
.c342-sl__scroll.is-diff tr[data-same] { display: none; }
.c342 .c342-cmp { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; margin: 0; font-size: 15px; }
.c342 .c342-cmp th, .c342 .c342-cmp td { padding: 11px 14px !important; border: 0; border-bottom: 1px solid var(--c342-line); text-align: left; vertical-align: top; background: var(--c342-card); }
.c342 .c342-cmp tbody th { position: sticky; left: 0; z-index: 1; width: 132px; min-width: 132px; font: 600 12px/1.3 var(--c342-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c342-muted); }
.c342 .c342-cmp td { min-width: 210px; max-width: 260px; font-weight: 600; color: var(--c342-ink); }
.c342 .c342-cmp__corner { position: sticky; left: 0; z-index: 1; border-bottom: 0 !important; }
.c342 .c342-cmp__car { min-width: 210px; max-width: 260px; border-bottom: 0 !important; padding-bottom: 16px !important; }
.c342 .c342-cmp__photo { position: relative; display: block; margin-bottom: 10px; }
.c342 .c342-cmp__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.c342 .c342-cmp__photo .c342-chip { position: absolute; left: 8px; top: 8px; }
.c342 .c342-cmp__name { display: block; font: 600 14px/1.2 var(--c342-display); letter-spacing: -0.005em; color: var(--c342-ink) !important; }
.c342 .c342-cmp__name:hover { color: var(--c342-accent-text) !important; }
.c342-cmp__variant { display: block; margin-top: 4px; font-weight: 400; font-size: 14px; color: var(--c342-muted); }
.c342 .c342-cmp__remove { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 6px 0 0 -4px; padding: 0 4px !important; border: 0 !important; background: none !important; color: var(--c342-ink-2) !important; font: 600 14px/1 var(--c342-body) !important; cursor: pointer; box-shadow: none !important; }
.c342 .c342-cmp__remove:hover span { text-decoration: underline; }
.c342-cmp .is-gone { opacity: 0.55; }
.c342-cmp__best { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 6px; background: var(--c342-green-bg); color: var(--c342-green); font: 600 11px/1 var(--c342-body); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; }
.c342-cmp__none { font-weight: 400; color: var(--c342-muted); }
.c342-sl__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c342-line); }
.c342 .c342-sl__clear { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 0 auto; padding: 0 6px !important; border: 0 !important; background: none !important; color: var(--c342-ink-2) !important; font: 600 15px/1 var(--c342-body) !important; cursor: pointer; box-shadow: none !important; }
.c342-sl__empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px 56px; text-align: center; color: var(--c342-muted); }
.c342-sl__empty > .c342-ic { color: var(--c342-red); }
.c342 .c342-sl__empty-title { font: 600 20px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink); }
.c342 .c342-sl__empty p { max-width: 44ch; }

/* ---------- Latest cars ---------- */
.c342-latest { display: grid; gap: 24px; }
.c342 .c342-latest__title { font: 500 30px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; }
.c342 .c342-latest__more { display: flex; justify-content: center; }

/* ---------- Car page ---------- */
.c342-car { max-width: 1240px; margin: 0 auto; padding: 24px 20px 72px; }
.c342-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: 6px; background: var(--c342-amber-bg); color: var(--c342-amber); font-weight: 600; }
.c342-crumbs { margin-bottom: 18px; font-size: 14px; color: var(--c342-muted); }
.c342 .c342-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.c342 .c342-crumbs li + li::before { content: '\203A'; margin: 0 10px; color: var(--c342-line-2); }
.c342 .c342-crumbs a { color: var(--c342-ink-2) !important; text-decoration: underline !important; text-decoration-color: var(--c342-line-2) !important; text-underline-offset: 3px; }
.c342 .c342-crumbs a:hover { text-decoration-color: var(--c342-ink) !important; }
.c342-soldnote { display: grid; gap: 8px; justify-items: start; margin-bottom: 20px; padding: 22px 24px; border-radius: var(--c342-r); background: var(--c342-ink); color: #D2D2D6; }
.c342 .c342-soldnote__title { font: 600 21px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: #fff; }
.c342-soldnote .c342-btn { margin-top: 6px; }

.c342-car__top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.c342-car__more { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 48px; }

/* Gallery */
.c342-gallery { min-width: 0; }
.c342-gallery__stage { position: relative; border-radius: var(--c342-r); overflow: hidden; background: #0E0E0F; }
.c342 .c342-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.c342-gallery__track::-webkit-scrollbar { display: none; }
.c342 .c342-gallery__slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.c342 .c342-gallery__open { position: absolute; inset: 0; display: block; }
.c342 .c342-gallery__img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.c342-gallery__chip { position: absolute; left: 14px; top: 14px; z-index: 2; }
.c342 .c342-gallery__nav {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.94) !important; color: var(--c342-ink) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important; transform: translateY(-50%); cursor: pointer; transition: opacity 0.2s, transform 0.15s;
}
.c342 .c342-gallery__nav:hover { transform: translateY(-50%) scale(1.06); }
.c342 .c342-gallery__nav[disabled] { opacity: 0; pointer-events: none; }
.c342-gallery__nav--prev { left: 14px; }
.c342-gallery__nav--next { right: 14px; }
.c342-gallery__count { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; background: rgba(10, 10, 10, 0.78); color: #fff; font: 600 13px/1 var(--c342-body); pointer-events: none; }
.c342 .c342-gallery__expand {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px !important;
  border: 0 !important; border-radius: 6px !important; background: rgba(10, 10, 10, 0.78) !important; color: #fff !important; font: 600 13px/1 var(--c342-body) !important; cursor: pointer; box-shadow: none !important;
}
.c342 .c342-gallery__expand:hover { background: rgba(10, 10, 10, 0.95) !important; }
.c342 .c342-gallery__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 10px) / 6); gap: 10px; margin-top: 10px !important; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.c342-gallery__thumbs::-webkit-scrollbar { display: none; }
.c342 .c342-gallery__thumbs li { scroll-snap-align: start; }
.c342 .c342-gallery__thumbs a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; opacity: 0.62; transition: opacity 0.15s; }
.c342 .c342-gallery__thumbs a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--c342-accent); transition: box-shadow 0.15s; }
.c342 .c342-gallery__thumbs a:hover { opacity: 1; }
.c342 .c342-gallery__thumbs a[aria-current='true'] { opacity: 1; }
.c342 .c342-gallery__thumbs a[aria-current='true']::after { box-shadow: inset 0 0 0 3px var(--c342-accent); }
.c342 .c342-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.c342-car.is-sold .c342-gallery__img { filter: saturate(0.4); }
.c342-gallery--none { display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 4 / 3; padding: 24px; border: 2px dashed var(--c342-line-2); border-radius: var(--c342-r); color: var(--c342-muted); text-align: center; }

/* Summary */
.c342-summary { position: sticky; top: var(--c342-sticky-top); display: grid; gap: 18px; min-width: 0; }
.c342 .c342-eyebrow { font: 600 12px/1 var(--c342-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c342-accent-text); }
.c342 .c342-title { display: grid; gap: 6px; margin-top: -8px; color: var(--c342-ink) !important; font-weight: 400 !important; line-height: 1 !important; }
.c342-title__main { font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--c342-display); letter-spacing: -0.01em; }
.c342-title__variant { font: 400 19px/1.35 var(--c342-body); color: var(--c342-muted); }
.c342-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.c342-price__now { font: 700 36px/1 var(--c342-display); color: var(--c342-ink); letter-spacing: -0.01em; }
.c342-price__now--sold { color: var(--c342-muted); }
.c342-price__was { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--c342-green); }
.c342-price__was s { font-weight: 400; font-size: 16px; color: var(--c342-muted); }
.c342 .c342-pm { margin-top: -8px; color: var(--c342-muted); font-size: 15px; }
.c342 .c342-pm b { color: var(--c342-ink); }
.c342 .c342-pm a { color: var(--c342-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: var(--c342-line-2) !important; }
.c342 .c342-reservednote { display: flex; gap: 8px; padding: 12px 14px !important; border-radius: 6px; background: var(--c342-amber-bg); color: var(--c342-amber); font-weight: 600; font-size: 15px; }
.c342 .c342-keyspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--c342-line); border-radius: var(--c342-r); overflow: hidden; background: var(--c342-card); }
.c342 .c342-keyspecs li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px !important; border-top: 1px solid var(--c342-line); }
.c342 .c342-keyspecs li:nth-child(-n + 2) { border-top: 0; }
.c342 .c342-keyspecs li:nth-child(even) { border-left: 1px solid var(--c342-line); }
.c342-keyspecs .c342-ic { grid-row: 1 / 3; color: var(--c342-accent-text); }
.c342-keyspecs__label { font: 600 11px/1.2 var(--c342-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c342-muted); }
.c342-keyspecs__value { font-weight: 600; color: var(--c342-ink); overflow-wrap: anywhere; }
.c342-summary .c342-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.c342-summary .c342-actions .c342-btn--wide { grid-column: 1 / -1; }
.c342-summary .c342-actions .c342-btn:only-child, .c342-summary .c342-actions .c342-btn--wide + .c342-btn:last-child { grid-column: 1 / -1; }
.c342-dealer { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c342-line); color: var(--c342-muted); font-size: 15px; }
.c342 .c342-dealer p { display: flex; gap: 10px; align-items: flex-start; }
.c342-dealer .c342-ic { margin-top: 1px; color: var(--c342-ink-2); }
.c342-dealer b { color: var(--c342-ink); }
.c342 .c342-dealer a { color: var(--c342-ink) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* Details */
.c342-details { display: grid; min-width: 0; }
.c342-block { padding: 28px 0; border-top: 1px solid var(--c342-line); }
.c342-block:first-child { border-top: 1px solid var(--c342-line); }
.c342 .c342-block h2, .c342 .c342-similar h2 { margin-bottom: 16px !important; font: 600 22px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; letter-spacing: 0.01em; }
.c342 .c342-prose p { margin-bottom: 14px !important; font-size: 17px; line-height: 1.65 !important; color: var(--c342-text); max-width: 64ch; }
.c342 .c342-prose p:last-child { margin-bottom: 0 !important; }
.c342 .c342-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.c342 .c342-features li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--c342-ink-2); }
.c342-features .c342-ic { color: var(--c342-green); margin-top: 1px; }
.c342 .c342-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.c342 .c342-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c342-line); }
.c342 .c342-table dt { color: var(--c342-muted); }
.c342 .c342-table dd { margin: 0; font-weight: 600; color: var(--c342-ink); text-align: right; overflow-wrap: anywhere; }
.c342 .c342-finance__figure { font: 700 28px/1.1 var(--c342-display); color: var(--c342-ink); }
.c342 .c342-finance__figure b { font-weight: 600; }
.c342 .c342-finance__terms { margin-top: 8px; max-width: 60ch; color: var(--c342-muted); font-size: 15px; }

/* Enquiry */
.c342-enquire { position: sticky; top: var(--c342-sticky-top); padding: 26px; background: var(--c342-card); border: 1px solid var(--c342-line); border-radius: 8px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.45); scroll-margin-top: var(--c342-sticky-top); }
.c342 .c342-enquire__title { font: 600 24px/1.2 var(--c342-display) !important; letter-spacing: -0.005em; color: var(--c342-ink) !important; }
.c342 .c342-enquire__lead { margin-top: 4px; color: var(--c342-muted); font-size: 15px; }
.c342-form { display: grid; gap: 14px; }
.c342-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 6px; padding: 4px; border-radius: 8px; background: var(--c342-paper); }
/* Themes style radios (Twenty Twenty-One gives them size and position), so these are forced to stay out of the way. */
.c342 .c342-kind label { position: relative; display: block; margin: 0 !important; padding: 0 !important; cursor: pointer; }
.c342 .c342-kind input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.c342-kind span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 6px; font-weight: 600; font-size: 15px; color: var(--c342-muted); transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.c342-kind input:checked + span { background: var(--c342-card); color: var(--c342-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.c342-kind input:focus-visible + span { outline: 3px solid var(--c342-accent-text); outline-offset: 1px; }
.c342-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c342-input { display: grid; gap: 6px; margin: 0; }
.c342-input > span { font-weight: 600; font-size: 14px; color: var(--c342-ink-2); }
.c342-input small { font-weight: 400; color: var(--c342-muted); }
.c342 .c342-input input, .c342 .c342-input textarea {
  width: 100%; margin: 0; padding: 12px 14px !important; border: 1px solid var(--c342-line-2) !important; border-radius: 6px !important;
  background: var(--c342-card) !important; color: var(--c342-ink) !important; font: 400 16px/1.4 var(--c342-body) !important; box-shadow: none !important;
}
.c342 .c342-input input { height: 50px; }
.c342 .c342-input textarea { min-height: 96px; resize: vertical; }
.c342 .c342-input input:focus, .c342 .c342-input textarea:focus { outline: none; border-color: var(--c342-accent) !important; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28) !important; }
.c342 .c342-input.is-invalid input { border-color: #B42318 !important; }
.c342 .c342-form__error { padding: 12px 14px !important; border-radius: 6px; background: #FDECEA; color: #8F1D14; font-weight: 600; font-size: 15px; }
.c342 .c342-form__note { color: var(--c342-muted); font-size: 13px; text-align: center; }
.c342 button.c342-btn { border: 0 !important; }
.c342 button.c342-btn[aria-busy='true'] { opacity: 0.75; }
.c342-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c342-enquire__done { display: grid; justify-items: start; gap: 10px; outline: none; }
.c342-enquire__done > .c342-ic { color: var(--c342-green); }
.c342 .c342-enquire__alt { color: var(--c342-muted); }
.c342 .c342-enquire__alt a { color: var(--c342-ink) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* Similar */
.c342 .c342-footnote { margin-top: -8px !important; color: var(--c342-muted); font-size: 13px; line-height: 1.5 !important; }
/* The pull up is for a footnote in a grid or flex gap; under the similar cars there is no gap to pull into, and after
   the Show more button it would sit against the button. */
.c342 .c342-similar .c342-footnote { margin-top: 16px !important; }
.c342 .c342-more:not([hidden]) + .c342-footnote { margin-top: 4px !important; }
.c342-similar { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--c342-line); }
.c342-similar__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 4px; }

/* Phone bar */
.c342 .c342-bar { display: none; }

/* Lightbox */
.c342-lightbox { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0B0B0C; color: #fff; }
.c342-lightbox::backdrop { background: #0B0B0C; }
.c342-lightbox__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.c342-lightbox__track::-webkit-scrollbar { display: none; }
.c342-lightbox__slide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; padding: 64px 72px; scroll-snap-align: start; scroll-snap-stop: always; }
.c342 .c342-lightbox__slide img { max-width: 100%; max-height: calc(100dvh - 128px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.c342-lightbox__bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font: 600 15px/1 var(--c342-body); }
.c342-lightbox button { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.c342-lightbox button:hover { background: rgba(255, 255, 255, 0.24); }
.c342-lightbox button:focus-visible { outline: 3px solid var(--c342-accent); outline-offset: 2px; }
.c342-lightbox__prev, .c342-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
.c342-lightbox__prev { left: 12px; }
.c342-lightbox__next { right: 12px; }
.c342-lightbox svg { fill: currentColor; }
html.c342-locked { overflow: hidden; }

/* Effect 08: sections rise into view. Visible by default; hidden only where the browser can animate it back in. */
.c342-reveal > * { opacity: 1; }
html.c342-anim .c342-reveal > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.c342-anim .c342-reveal.is-in > * { opacity: 1; transform: none; }


/* ---------- Each block lays out for the column it is in ---------- */
@container c342rail (min-width: 560px) {
  .c342 .c342-rail__track { grid-auto-columns: calc((100% - 24px) / 2.15); gap: 24px; }
  .c342-rail--large .c342-rail__track { grid-auto-columns: calc((100% - 24px) / 1.6); }
}
@container c342rail (min-width: 900px) {
  .c342 .c342-rail__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .c342-rail--large .c342-rail__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@container c342rail (max-width: 559px) {
  .c342-rail__nav { display: none !important; }
  .c342 .c342-rail__title { font-size: 24px !important; }
}
@container c342tiles (max-width: 519px) {
  .c342 .c342-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .c342 .c342-tile { min-height: 96px; padding: 14px 14px 40px !important; }
  .c342-tile__name { font-size: 16px; }
  .c342-tiles--budget .c342-tile__name { font-size: 15px; }
  .c342-tile .c342-ic { right: 12px; bottom: 12px; }
  .c342 .c342-tiles__title { font-size: 24px !important; }
}
@container c342tiles (max-width: 299px) {
  .c342 .c342-tiles__grid { grid-template-columns: minmax(0, 1fr); }
}
@container c342qs (min-width: 600px) {
  .c342-qs__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container c342calc (min-width: 640px) {
  .c342-calc__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
}

/* ---------- Desktop: the filters beside the results ---------- */
@media (min-width: 1024px) {
  @container c342srm (min-width: 880px) {
  .c342-sr-main > .c342-filters { position: sticky; top: var(--c342-sticky-top); max-height: calc(100vh - var(--c342-sticky-top) - 16px); overflow-y: auto; padding: 18px 18px 20px; overscroll-behavior: contain; }
  .c342-filters__body { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  /* With JavaScript the filters wait behind one button and open as a sheet from the bottom of the screen. */
  .c342-js .c342 .c342-filters-toggle { display: inline-flex; }
  .c342-js .c342-filters:not(.is-open) { display: none; }
  .c342-filters.is-open {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; display: flex; flex-direction: column; gap: 0;
    width: min(640px, 100%); max-height: min(88dvh, 760px); margin: 0 auto; padding: 0; border: 0; border-radius: 8px 22px 0 0;
    background: var(--c342-card); box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.45); animation: c342-sheet 0.28s var(--c342-ease);
  }
  .c342-filters.is-open .c342-filters__head { padding: 16px 16px 10px 20px; border-bottom: 1px solid var(--c342-line); }
  .c342-filters.is-open .c342-filters__title { font-size: 18px !important; }
  .c342-filters.is-open .c342-filters__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
  .c342-filters.is-open .c342-filters__actions {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c342-line);
  }
  .c342-filters.is-open .c342-filters__clear[hidden] { display: block !important; visibility: hidden; }
  .c342-filters.is-open .c342-filters__done { grid-column: 2; }
  @keyframes c342-sheet { from { transform: translateY(100%); } to { transform: none; } }
  /* The results' tools stay in reach while the list scrolls. */
  .c342-sr-results { gap: 12px; }
  .c342-sr-results > .c342-toolbar { flex: 1 1 100%; margin-left: 0; }
  .c342-toolbar {
    position: sticky; top: var(--c342-bar-top, 0px); z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px;
    padding: 8px 0; background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 var(--c342-line); -webkit-backdrop-filter: saturate(1.4) blur(6px); backdrop-filter: saturate(1.4) blur(6px);
  }
  .c342-toolbar:not(:has(.c342-filters-toggle:not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; }
  .c342 .c342-sort .c342-select { flex: 1; min-width: 0; }
  .c342 .c342-sort .c342-select select { min-width: 0; }
  .c342 .c342-sort { min-width: 0; }
}
@media (max-width: 960px) {
  .c342-car__top, .c342-car__more { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .c342-summary, .c342-enquire { position: static; }
  .c342-car__more { margin-top: 28px; }
  .c342 .c342-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--c342-card); border-top: 1px solid var(--c342-line);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.45);
  }
  .c342-bar__price { flex: 1; font: 700 20px/1 var(--c342-display); color: var(--c342-ink); white-space: nowrap; }
  .c342 .c342-bar__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--c342-line-2); color: var(--c342-ink) !important; }
  .c342 .c342-bar .c342-btn { min-height: 48px; padding: 0 18px !important; }
  body.c342-car-page { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.c342-car-page .c342-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
}
@media (max-width: 640px) {
  .c342-showroom { gap: 14px; }
  .c342 .c342-showroom__count { font-size: 20px !important; }
  /* One swipeable row each for the makes and the quick picks, fading out at the edge that has more. */
  .c342 .c342-makes ul, .c342 .c342-quick {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 28px !important;
  }
  .c342 .c342-makes ul::-webkit-scrollbar, .c342 .c342-quick::-webkit-scrollbar { display: none; }
  .c342 .c342-makes li, .c342 .c342-quick li { flex: none; scroll-snap-align: start; }
  .c342 .c342-sort__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .c342 .c342-sl-open { padding: 0 12px !important; }
  .c342-sl-open__text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .c342-filters { padding: 14px; }
  .c342-filters__body { grid-template-columns: 1fr 1fr; }
  .c342-filters.is-open .c342-filters__body { grid-template-columns: minmax(0, 1fr); }
  .c342 .c342-finder__title { font-size: 21px !important; }
  .c342-finder { padding: 26px 22px; }
  .c342-calc__out { padding: 20px; }
  .c342 .c342-calc__figure { font-size: 34px; }
  .c342-calc__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .c342-car { padding: 12px 0 40px; }
  .c342-crumbs, .c342-soldnote, .c342-preview, .c342-summary, .c342-car__more, .c342-similar, .c342-car > .c342-viewed { margin-left: 16px; margin-right: 16px; }
  .c342-gallery__stage { border-radius: 0; }
  .c342 .c342-gallery__thumbs { display: none; }
  .c342 .c342-gallery__nav { display: none; }
  .c342-price__now { font-size: 30px; }
  .c342 .c342-features, .c342 .c342-table { grid-template-columns: minmax(0, 1fr); }
  .c342-form__row { grid-template-columns: minmax(0, 1fr); }
  .c342-enquire, .c342-sf { padding: 22px 18px; }
  .c342-lightbox__slide { padding: 64px 0; }
  .c342-lightbox__prev, .c342-lightbox__next { display: none !important; }
  /* The shortlist fills the screen; the row labels shrink so two cars fit beside them. */
  .c342-sl { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .c342-sl__panel { max-height: 100dvh; height: 100%; }
  .c342-sl__head { padding: 12px 12px 10px 16px; }
  .c342 .c342-sl__title { font-size: 19px !important; }
  .c342-sl__scroll { padding: 10px 0 12px 0; }
  .c342 .c342-cmp tbody th { width: 92px; min-width: 92px; padding: 10px 8px 10px 16px !important; font-size: 11px; }
  .c342 .c342-cmp__corner { width: 92px; min-width: 92px; }
  .c342 .c342-cmp td, .c342 .c342-cmp__car { min-width: 152px; max-width: 168px; padding: 10px !important; }
  .c342 .c342-cmp td { font-size: 14px; }
  .c342 .c342-cmp__name { font-size: 14px; }
  .c342-sl__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .c342-sl__foot .c342-btn { flex: 1 1 100%; }
  .c342 .c342-sl__clear { margin: 0 auto; }
}
@media (max-width: 380px) {
  .c342-calc__pair { grid-template-columns: minmax(0, 1fr); }
}
/* The WordPress toolbar is fixed between 601 and 782 pixels wide; the sticky tools sit under it. */
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .c342 { --c342-bar-top: 46px; }
}
@media (hover: none) {
  .c342 .c342-gallery__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .c342 *, .c342 *::before, .c342 *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
  .c342-reveal { opacity: 1; transform: none; }
  .c342 .c342-card__link:hover, .c342 .c342-card__link:hover .c342-card__img, .c342 .c342-card:hover .c342-save, .c342 .c342-spot__link:hover, .c342 .c342-spot__link:hover .c342-spot__img, .c342 .c342-tile:hover, .c342 .c342-tile:hover .c342-ic { transform: none; }
  .c342-toast { transition: none; }
}

/* Clear of the site's own fixed header (.cxh: 76px, 64px on phones), plus the WordPress toolbar when signed in. */
body:has(.cxh) .c342 { --c342-sticky-top: 96px; --c342-bar-top: 76px; }
body.admin-bar:has(.cxh) .c342 { --c342-sticky-top: 128px; --c342-bar-top: 108px; }
@media (max-width: 782px) { body.admin-bar:has(.cxh) .c342 { --c342-sticky-top: 142px; --c342-bar-top: 122px; } }
@media (max-width: 640px) { body:has(.cxh) .c342 { --c342-sticky-top: 84px; --c342-bar-top: 64px; } }
@media (min-width: 601px) and (max-width: 640px) { body.admin-bar:has(.cxh) .c342 { --c342-sticky-top: 130px; --c342-bar-top: 110px; } }
@media (max-width: 600px) { body.admin-bar:has(.cxh) .c342 { --c342-sticky-top: 84px; --c342-bar-top: 64px; } }

/* ---------- Forms (2026-10-22): half see-through glass, compact, two short fields to a row wherever there is room. */
.c342-sf, .c342-enquire {
  padding: 22px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 10px;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.c342-form { gap: 10px; }
.c342-form__row, .c342-sf .c342-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; }
@container c342sf (max-width: 300px) { .c342-sf .c342-form__row { grid-template-columns: minmax(0, 1fr); } }
.c342-input { gap: 4px; }
.c342-input > span { font-size: 13px; color: var(--c342-ink); }
.c342 .c342-enquire__title { font-size: 21px !important; }
.c342 .c342-input input, .c342 .c342-input .c342-select select { height: 44px; }
.c342 .c342-input input, .c342 .c342-input textarea, .c342 .c342-input .c342-select select {
  padding: 9px 12px !important; background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(18, 18, 18, 0.16) !important;
}
.c342 .c342-input .c342-select select { padding-right: 36px !important; }
.c342 .c342-input textarea { min-height: 70px; }
.c342 .c342-sf__car, .c342 .c342-check { padding: 10px 12px !important; background: rgba(255, 255, 255, 0.55); }
.c342 .c342-check > span { font-size: 13px !important; line-height: 1.45; }
.c342 .c342-form__note { font-size: 12px; color: var(--c342-ink-2); }
.c342 .c342-kind { margin: 0; }
@media (max-width: 640px) {
  .c342-sf, .c342-enquire { padding: 18px 16px; }
}