@charset "UTF-8";
/* ==========================================================================
   CarSearch — stylesheet

   Rewritten for the design refresh. The previous sheet was a 2010-era layout
   (grey slabs, hairline borders, eleven bundled TTF webfonts, and a card that
   had to be printed twice to support mobile). This one is built on design
   tokens, uses the system font stack, and produces every layout from a single
   card.

   Class names are unchanged from the markup's point of view, so the templates
   did not have to be rewritten around it.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  /* Brand. The old #06a2ec is kept as the bright accent, but filled buttons
     use a darker blue so white label text actually clears WCAG AA — white on
     #06a2ec is only ~2.9:1. */
  --brand:          #0a6fae;
  --brand-hover:    #085c90;
  --brand-bright:   #06a2ec;
  --brand-soft:     #eaf6fd;
  --featured:       #e8590c;
  --featured-soft:  #fff4ec;

  /* Neutrals */
  --ink:            #12181f;
  --ink-2:          #384250;
  --muted:          #5a6672;
  --muted-2:        #8a94a1;
  --line:           #e3e8ee;
  --line-strong:    #cfd6e0;
  --surface:        #ffffff;
  --canvas:         #f5f7fa;

  /* Semantic */
  --good:           #047857;
  --good-soft:      #ecfdf5;
  --hot:            #b3291b;
  --hot-soft:       #fef2f2;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);

  --ring: 0 0 0 3px rgba(6, 162, 236, .35);
}

/* ----------------------------------------------------------- 2. reset/base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.clearAll { clear: both; }

/* --------------------------------------------------------------- 3. header */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header .container {
  display: flex;
  align-items: center;
  min-height: 60px;
}

.header img { height: 34px; width: auto; }

/* Mobile-only "Modify Search" bar. */
.search_menu { display: none; }

/* ---------------------------------------------------------------- 4. shell */
.middle { padding: var(--sp-6) 0 var(--sp-8); }

.middle .container {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-6);
}

/* ------------------------------------------------------------- 5. side bar */
.searchbox {
  position: sticky;
  top: 76px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.searchbox .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

/* Only rendered when at least one filter is narrowing the results. */
.filterbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}

/* The inline copy is a button that opens the collapsed panel. */
button.filterbadge { cursor: pointer; }

button.filterbadge:hover,
button.filterbadge:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.filterbadge__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.form-group > label,
.form-group > .grouplabel {
  flex: 0 0 100%;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: calc(var(--sp-1) * -1);
}

.form-group > .input1,
.form-group > .input2 { flex: 1 1 0; min-width: 0; }
.form-group > .input3,
.form-group > .flex-contain,
.form-group > .btn { flex: 0 0 100%; }

.form-group > .dash {
  flex: 0 0 auto;
  color: var(--muted-2);
  padding: 0 2px;
}

/* The ZIP / RADIUS row carries its labels inside the two boxes. */
.form-group > .input1 > label,
.form-group > .input2 > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

/* ---- controls ---- */
.searchbox input[type="text"],
.searchbox .select_box,
.searchbox .select_box1 {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  /* background-COLOR, not the shorthand: the shorthand would reset the custom
     chevron background-image set on `.searchbox select` below, which has lower
     specificity than `.searchbox .select_box1`. */
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}

.searchbox input[type="text"]::placeholder { color: var(--muted-2); }

.searchbox input[type="text"]:hover,
.searchbox select:hover { border-color: var(--muted-2); }

.searchbox input[type="text"]:focus,
.searchbox select:focus {
  outline: none;
  border-color: var(--brand-bright);
  box-shadow: var(--ring);
}

/* Custom chevron so the select matches the inputs across browsers. */
.searchbox select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  cursor: pointer;
}

/* ---- segmented body-type control ---- */
.flex-contain {
  display: flex;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}

.input4 {
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
    height: 32px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.input4:first-child { border-left: 0; }
.input4:hover { background: var(--brand-soft); color: var(--brand); }

.input4.bgset {
  background: var(--brand);
  border-left-color: var(--brand);
  color: #fff;
}

.input4.bgset + .input4 { border-left-color: var(--brand); }

/* ---- submit ---- */
.btn {
  height: 46px;
  width: 100%;
  margin-top: var(--sp-2);
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s, transform .06s;
}

.btn:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px); }

/* Sits under UPDATE SEARCH; only rendered when something is filtered. */
.resetfilters {
  flex: 0 0 100%;
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}

.resetfilters:hover,
.resetfilters:focus-visible {
  color: var(--brand);
  background: var(--brand-soft);
  text-decoration: none;
}

/* -------------------------------------------------------------- 6. results */
.listbox { min-width: 0; }

.sortdiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.listcount {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
}

/* The sidebar carries its own badge on desktop, so this copy only appears
   once the sidebar collapses. */
.filterbadge--inline { display: none; }

.sortcontrol {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sortcontrol label {
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}

.sortcontrol select {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  padding: 0 var(--sp-8) 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

.sortcontrol select:focus { outline: none; border-color: var(--brand-bright); box-shadow: var(--ring); }

/* ---- the card ---- */
.result_box {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}

.result_box:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.result_box:focus-within {
  border-color: var(--brand-bright);
  box-shadow: var(--ring);
}

.img_section {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas);
}

.img_section img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@supports not (aspect-ratio: 1) {
  .img_section img { height: 160px; object-fit: cover; }
}

/* ---- title + specs ---- */
.title { min-width: 0; }

.title h2 {
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}

.title h2 a { color: var(--ink); }
.title h2 a:hover { color: var(--brand); text-decoration: none; }

/* The whole card is clickable, but the title stays the accessible target. */
.title h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.specs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.specs > span + span::before {
  content: "·";
  margin-right: var(--sp-2);
  color: var(--line-strong);
}

.price_mt, .add { color: var(--muted); }

/* ---- price block ---- */
.info_section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  text-align: right;
  min-width: 172px;
}

.price {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.price--none {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--hot);
}

.est {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.est_price {
  color: var(--good);
  font-weight: 650;
  margin-left: var(--sp-1);
}

/* ---- deal signal ---- */
/* The HOT DEAL / MUST SEE pills that used to sit over the photo are gone; this
   line says the same thing with a real number and no visual noise. */
/* Rides on the price line so it does not cost the card a whole row. */
.dealtag {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--good-soft);
  color: var(--good);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- call to action ---- */
a.view_car {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--sp-5);
  margin-top: var(--sp-2);
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}

a.view_car:hover { background: var(--brand-hover); color: #fff; text-decoration: none; }

/* The title link is stretched across the whole card, so anything that must
   stay separately clickable has to sit above it. */
a.view_car { position: relative; z-index: 1; }

/* ---- featured ---- */
.result_box.featured {
  border-color: var(--featured);
  box-shadow: 0 0 0 1px var(--featured), var(--shadow-md);
  background:
    linear-gradient(180deg, var(--featured-soft), var(--surface) 120px);
}

.result_box.featured::before {
  content: "FEATURED";
  position: absolute;
  top: 0; left: var(--sp-4);
  transform: translateY(-50%);
  padding: 2px var(--sp-2);
  background: var(--featured);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

a.view_car2 { background: var(--featured); }
a.view_car2:hover { background: #cf4d05; }

/* ------------------------------------------------------- 6b. offer cards
   Sponsored placements sit in the results stream, so they are deliberately
   NOT styled like a listing: tinted ground, no hover lift, and a disclosure
   pill. A shopper should never mistake one for a vehicle we found. */
.offer {
  position: relative;
  background: linear-gradient(180deg, #fbfdff, var(--surface) 70%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-bright);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.offer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.offer-logo {
  flex: 0 0 auto;
  width: 116px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas);
}

.offer-logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 256 / 193;
  object-fit: cover;
}

.offer-headings { min-width: 0; }

.pill {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.offer-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.offer-sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.offer-points {
  display: grid;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.offer-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.45;
}

.ico { flex: 0 0 auto; }
.ico-xs { width: 15px; height: 15px; margin-top: 2px; color: var(--good); }
.ico-sm { width: 17px; height: 17px; }

.offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 44px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 650;
  transition: background .15s;
}

.offer-cta:hover,
.offer-cta:focus-visible {
  background: var(--brand-hover);
  color: #fff;
  text-decoration: none;
}


/* ------------------------------------------------------------ 7. paging */
.paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin: var(--sp-6) 0 var(--sp-4);
}

.paging a,
.paging .pagNumActive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 600;
}

.paging a {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
}

.paging a:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.pagNumActive {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}

/* --------------------------------------------------- 8. messages / notes */
/* Explains an automatically widened search, above the results it produced. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--brand-soft);
  border: 1px solid rgba(6, 162, 236, .28);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.notice::before {
  content: "ℹ";
  flex: 0 0 auto;
  color: var(--brand);
  font-weight: 700;
}

.message {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.6;
}

.note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted-2);
}

/* ------------------------------------------------- 9. handoff / not found
   The VIN interstitial and the sold-vehicle page. Both are a single centred
   panel rather than a listing row — the old markup reused the three-column
   card grid, which left the price block stranded on its own line. */
.handoff {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: var(--sp-6) 0;
}

.handoff__card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  text-align: center;
}

.handoff__media {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas);
  margin-bottom: var(--sp-5);
}

.handoff__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@supports not (aspect-ratio: 1) {
  .handoff__media img { height: 240px; object-fit: cover; }
}

.handoff__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}

.handoff__lead {
  color: var(--muted);
  margin-bottom: var(--sp-5);
}

.handoff__card .specs { justify-content: center; margin-bottom: var(--sp-4); }
.handoff__card .price { font-size: var(--fs-2xl); }
.handoff__card .est { margin-bottom: var(--sp-5); }

.handoff__cta {
  width: 100%;
  height: 48px;
  font-size: var(--fs-md);
  margin-top: var(--sp-2);
}

.handoff__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.handoff__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: handoff-spin .8s linear infinite;
}

@keyframes handoff-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- 10. footer */
.footerlinks {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}

.footerlinks p {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 2px 0;
}

.footerlinks p a { color: var(--muted); padding: 0 var(--sp-2); }
.footerlinks p a:hover { color: var(--brand); }

/* ----------------------------------------------------- 11. legal pages */
.framesection {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.frame1 {
  padding: var(--sp-8);
  line-height: 1.7;
  font-size: var(--fs-base);
  overflow-wrap: break-word;
}

/* The legal copy came out of Word and carries its own inline styles. */
.frame1 p { margin-bottom: var(--sp-3); }
.frame1 ul, .frame1 ol { margin: 0 0 var(--sp-3) var(--sp-5); list-style: revert; }

/* -------------------------------------------------------- 12. responsive */
@media (max-width: 1024px) {
  .middle .container { grid-template-columns: 260px minmax(0, 1fr); }
  .result_box { grid-template-columns: 190px minmax(0, 1fr) auto; }
  .info_section { min-width: 150px; }
}

/* Below this the sidebar collapses behind "Modify Search" and the results
   become a two-up grid of vertical cards, so twice as much inventory is on
   screen at a time. */
@media (max-width: 860px) {
  .search_menu {
    display: block;
    position: sticky;
    top: 60px;
    z-index: 15;
    background: var(--brand);
    text-align: center;
  }

  .search_menu button {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: var(--sp-3);
    background: none;
    border: 0;
    color: #fff;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
  }

  .middle { padding-top: var(--sp-4); }
  .middle .container { display: block; padding: 0 var(--sp-4); }

  .searchbox {
    display: none;
    position: static;
    margin-bottom: var(--sp-4);
  }

  .searchbox.is-open { display: block; }

  /* ---- two-up results grid ---- */
  .listbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
  }

  /* Everything that is not a listing spans the full width. */
  .sortdiv,
  .notice,
  .message,
  .paging,
  .note,
  .offer,
  .result_box.featured { grid-column: 1 / -1; }

  .filterbadge--inline { display: inline-flex; }

  /* ---- the card goes vertical ---- */
  .result_box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    margin-bottom: 0;
    padding: var(--sp-2);
  }

  .result_box:hover { transform: none; }

  /* Cards stretch to the tallest in the row; without this the photo is the
     flex item that gets squeezed when a title wraps to three lines. */
  .img_section { flex: 0 0 auto; }
  .img_section img { aspect-ratio: 16 / 9; }

  /* Long trim names ("2026 Ram 1500 RAM 1500 BIG HORN CREW CAB 4X4 57 BOX")
     ran to three or four lines and drove the whole card height. Two lines
     then ellipsis; the full name is still the link text for assistive tech
     and shows in full on the detail page. */
  .title h2 {
    font-size: var(--fs-sm);
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .specs { font-size: 11px; }

  /* Pushed to the bottom so the buttons line up across a row whatever the
     titles wrap to. */
  .info_section {
    margin-top: auto;
    align-items: stretch;
    text-align: left;
    min-width: 0;
    gap: 2px;
  }

  .price { font-size: var(--fs-md); line-height: 1.2; }
  .dealtag { font-size: 10px; padding: 1px 5px; margin-left: 3px; }
  .est { font-size: 11px; }

  a.view_car {
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-sm);
  }

  /* The featured row keeps the wide treatment. */
  .result_box.featured {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-areas:
      "img   title"
      "img   info";
    align-items: start;
    padding: var(--sp-3);
  }

  .result_box.featured .img_section  { grid-area: img; }
  .result_box.featured .title        { grid-area: title; }
  .result_box.featured .info_section { grid-area: info; margin-top: var(--sp-2); }

  .frame1 { padding: var(--sp-5); }

  /* Full width in the two-up grid, and the illustration shrinks so the
     headline still has room at 358px. */
  .offer { padding: var(--sp-3); }
  .offer-head { gap: var(--sp-3); margin-bottom: var(--sp-2); }
  .offer-logo { width: 88px; }
  .offer-title { font-size: var(--fs-md); }
  .offer-sub { font-size: var(--fs-xs); }
  .offer-points { margin-bottom: var(--sp-3); }
  .offer-points li { font-size: var(--fs-xs); }
  .offer-cta { height: 40px; font-size: var(--fs-base); }
}

/* Narrow phones: keep two across, just tighten everything. */
@media (max-width: 400px) {
  .middle .container { padding: 0 var(--sp-3); }
  .listbox { gap: var(--sp-2); }
  .result_box { padding: 6px 6px var(--sp-2); }
  .title h2 { font-size: var(--fs-sm); }
  .price { font-size: var(--fs-md); }
  .est { font-size: 11px; }
  .sortdiv { gap: var(--sp-2); }
  .sortcontrol { width: 100%; }
  .sortcontrol select { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ 13. motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .result_box:hover { transform: none; }
}

/* ------------------------------------------------------------- 14. print */
@media print {
  .header, .search_menu, .searchbox, .paging, .footerlinks, a.view_car { display: none; }
  .result_box { break-inside: avoid; box-shadow: none; }
}