/* @vp/ui island stylesheet — generated by packages/ui/build/build-css.mjs; do not edit. */
/* Source 1: original app stylesheet (src/styles/app.css, read-only) */
/* ---------- Design tokens ---------- */
.vp-root.vp-root.vp-root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #15181d;
  --text-2: #4b5260;
  --text-3: #7a8190;
  --line: #dde1e7;
  --accent: #0f4c81;
  --accent-ink: #ffffff;
  --accent-soft: #e3eef8;
  --ok: #1d7a4b;
  --ok-soft: #e4f3ea;
  --warn: #9a6400;
  --warn-soft: #fff4dd;
  --danger: #b4232c;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -12px rgba(16, 24, 40, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(16, 24, 40, 0.35);
  --header-h: 64px;
  --gutter: 16px;
  --maxw: 1440px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  .vp-root.vp-root.vp-root:not([data-theme="light"]) {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1f242c;
    --text: #eef1f5;
    --text-2: #b4bcc8;
    --text-3: #7f8896;
    --line: #2a313b;
    --accent: #5ea2e6;
    --accent-ink: #0b1420;
    --accent-soft: #15283b;
    --ok: #4fc581;
    --ok-soft: #12301f;
    --warn: #e2b04a;
    --warn-soft: #3a2c0d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}
.vp-root.vp-root.vp-root[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1f242c;
  --text: #eef1f5;
  --text-2: #b4bcc8;
  --text-3: #7f8896;
  --line: #2a313b;
  --accent: #5ea2e6;
  --accent-ink: #0b1420;
  --accent-soft: #15283b;
  --ok: #4fc581;
  --ok-soft: #12301f;
  --warn: #e2b04a;
  --warn-soft: #3a2c0d;
}

/* ---------- Base ---------- */
.vp-root.vp-root.vp-root,
.vp-root.vp-root.vp-root *,
.vp-root.vp-root.vp-root::before,
.vp-root.vp-root.vp-root *::before,
.vp-root.vp-root.vp-root::after,
.vp-root.vp-root.vp-root *::after {
  box-sizing: border-box;
}
.vp-root.vp-root.vp-root {
  -webkit-text-size-adjust: 100%;
}
.vp-root.vp-root.vp-root {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
}
.vp-root.vp-root.vp-root img {
  display: block;
  max-width: 100%;
}
.vp-root.vp-root.vp-root button,
.vp-root.vp-root.vp-root input,
.vp-root.vp-root.vp-root select {
  font: inherit;
  color: inherit;
}
.vp-root.vp-root.vp-root h1,
.vp-root.vp-root.vp-root h2,
.vp-root.vp-root.vp-root h3,
.vp-root.vp-root.vp-root h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.vp-root.vp-root.vp-root p {
  margin: 0;
}
.vp-root.vp-root.vp-root ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vp-root.vp-root.vp-root dl,
.vp-root.vp-root.vp-root dd,
.vp-root.vp-root.vp-root dt {
  margin: 0;
}
.vp-root.vp-root.vp-root code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.vp-root.vp-root.vp-root .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vp-root.vp-root.vp-root .muted {
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .small {
  font-size: 13px;
}
.vp-root.vp-root.vp-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Buttons & chips ---------- */
.vp-root.vp-root.vp-root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.vp-root.vp-root.vp-root .btn:active {
  transform: translateY(1px);
}
.vp-root.vp-root.vp-root .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vp-root.vp-root.vp-root .btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.vp-root.vp-root.vp-root .btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.vp-root.vp-root.vp-root .btn--secondary {
  background: var(--surface);
  border-color: var(--line);
}
.vp-root.vp-root.vp-root .btn--secondary:hover:not(:disabled) {
  border-color: var(--text-3);
}
.vp-root.vp-root.vp-root .btn--link {
  background: none;
  color: var(--accent);
  padding: 0 4px;
  min-height: 32px;
  font-weight: 600;
}
.vp-root.vp-root.vp-root .btn--link:hover {
  text-decoration: underline;
}
.vp-root.vp-root.vp-root .btn--icon {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .btn--icon.small {
  width: 28px;
  min-height: 28px;
  font-size: 18px;
}
.vp-root.vp-root.vp-root .btn--block {
  width: 100%;
}
.vp-root.vp-root.vp-root .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.vp-root.vp-root.vp-root .chip--ghost {
  background: transparent;
  border-color: var(--line);
  cursor: pointer;
}
.vp-root.vp-root.vp-root .chip--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .chip--removable {
  cursor: pointer;
  background: var(--accent-soft);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .chip--removable:hover {
  filter: brightness(0.95);
}
.vp-root.vp-root.vp-root .chip--hard {
  background: var(--accent-soft);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .chip--soft {
  background: var(--surface-2);
  color: var(--text-2);
  border-style: dashed;
  border-color: var(--line);
}
.vp-root.vp-root.vp-root .chip--reference {
  background: var(--warn-soft);
  color: var(--warn);
}
.vp-root.vp-root.vp-root .chip--tiny {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
}

/* ---------- Header ---------- */
.vp-root.vp-root.vp-root .header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.vp-root.vp-root.vp-root .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.vp-root.vp-root.vp-root .brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
}
.vp-root.vp-root.vp-root .header .search--compact {
  flex: 1;
  max-width: 720px;
  margin-left: auto;
}

/* ---------- Search ---------- */
.vp-root.vp-root.vp-root .search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  box-shadow: var(--shadow);
}
.vp-root.vp-root.vp-root .search__form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vp-root.vp-root.vp-root .search__icon {
  color: var(--text-3);
  display: grid;
}
.vp-root.vp-root.vp-root .search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 16px;
}
.vp-root.vp-root.vp-root .search__input:focus {
  outline: none;
}
.vp-root.vp-root.vp-root .search__input::-webkit-search-cancel-button {
  display: none;
}
.vp-root.vp-root.vp-root .search__clear {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}
.vp-root.vp-root.vp-root .search__clear:hover {
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .search--compact .search__form {
  box-shadow: none;
  padding: 2px 2px 2px 12px;
}
.vp-root.vp-root.vp-root .search--compact .search__input {
  padding: 7px 0;
  font-size: 15px;
}
.vp-root.vp-root.vp-root .search--compact .search__submit {
  min-height: 34px;
  padding: 0 14px;
}
.vp-root.vp-root.vp-root .search__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.vp-root.vp-root.vp-root .search__examples-label {
  color: var(--text-3);
  font-size: 13px;
}

/* ---------- Hero ---------- */
.vp-root.vp-root.vp-root .hero {
  background: radial-gradient(1200px 400px at 20% -10%, var(--accent-soft), transparent 60%), var(--surface);
  border-bottom: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .hero__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 44px var(--gutter) 28px;
}
.vp-root.vp-root.vp-root .hero__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vp-root.vp-root.vp-root .hero__sub {
  margin: 10px 0 22px;
  color: var(--text-2);
  font-size: 17px;
}
.vp-root.vp-root.vp-root .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 26px;
}
.vp-root.vp-root.vp-root .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  color: var(--text-2);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vp-root.vp-root.vp-root .tile:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .tile.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .tile__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.vp-root.vp-root.vp-root .tile__count {
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- Layout ---------- */
.vp-root.vp-root.vp-root .layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter) 60px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.vp-root.vp-root.vp-root .layout--loading {
  grid-template-columns: 1fr;
}
.vp-root.vp-root.vp-root .layout__filters {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 16px 16px;
  scrollbar-width: thin;
}
.vp-root.vp-root.vp-root .layout__results {
  min-width: 0;
}
.vp-root.vp-root.vp-root .layout__scrim {
  display: none;
}

/* ---------- Filters ---------- */
.vp-root.vp-root.vp-root .filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 8px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.vp-root.vp-root.vp-root .filters__head-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.vp-root.vp-root.vp-root .filters__title {
  font-size: 16px;
  font-weight: 700;
}
.vp-root.vp-root.vp-root .fsection {
  border-top: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .fsection__heading {
  font-size: 14px;
}
.vp-root.vp-root.vp-root .fsection__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}
.vp-root.vp-root.vp-root .fsection__chevron {
  transition: transform 0.15s;
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .fsection__chevron.is-open {
  transform: rotate(180deg);
}
.vp-root.vp-root.vp-root .fsection__body {
  padding: 0 0 14px;
}
.vp-root.vp-root.vp-root .filters__subgroup + .filters__subgroup {
  margin-top: 10px;
}
.vp-root.vp-root.vp-root .filters__subtitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 4px 0 6px;
}
.vp-root.vp-root.vp-root .filters__footer {
  position: sticky;
  bottom: 0;
  padding: 12px 0 4px;
  background: var(--surface);
}
.vp-root.vp-root.vp-root .filters__sort-hint {
  display: none;
}
.vp-root.vp-root.vp-root .checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vp-root.vp-root.vp-root .check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  border-radius: 6px;
  cursor: pointer;
}
.vp-root.vp-root.vp-root .check:hover {
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.vp-root.vp-root.vp-root .check__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root .check__count {
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.vp-root.vp-root.vp-root .check--dim {
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .check--inline {
  margin-top: 8px;
  font-size: 13px;
}
.vp-root.vp-root.vp-root .check--compare {
  font-size: 13px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .check.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vp-root.vp-root.vp-root .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.vp-root.vp-root.vp-root .swatch--white { background: #f7f7f7; }
.vp-root.vp-root.vp-root .swatch--black { background: #111; }
.vp-root.vp-root.vp-root .swatch--gray { background: #7d848f; }
.vp-root.vp-root.vp-root .swatch--silver { background: #c9ccd1; }
.vp-root.vp-root.vp-root .swatch--red { background: #b4232c; }
.vp-root.vp-root.vp-root .swatch--blue { background: #2f5fb3; }
.vp-root.vp-root.vp-root .swatch--green { background: #3b7a4a; }
.vp-root.vp-root.vp-root .swatch--brown { background: #6b4a2b; }
.vp-root.vp-root.vp-root .swatch--beige { background: #d9c7a8; }
.vp-root.vp-root.vp-root .swatch--orange { background: #e0732a; }
.vp-root.vp-root.vp-root .swatch--yellow { background: #e6c431; }
.vp-root.vp-root.vp-root .swatch--other { background: linear-gradient(135deg, #c9ccd1, #7d848f); }
.vp-root.vp-root.vp-root .range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.vp-root.vp-root.vp-root .range--single {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.vp-root.vp-root.vp-root .range__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .range__input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 8px;
}
.vp-root.vp-root.vp-root .range__input:focus-within {
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root .range__input input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 2px;
  font-size: 14px;
  color: var(--text);
  -moz-appearance: textfield;
}
.vp-root.vp-root.vp-root .range__input input::-webkit-outer-spin-button,
.vp-root.vp-root.vp-root .range__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.vp-root.vp-root.vp-root .range__input input:focus {
  outline: none;
}
.vp-root.vp-root.vp-root .range__prefix {
  color: var(--text-3);
  font-size: 13px;
}
.vp-root.vp-root.vp-root .range__dash {
  padding-bottom: 10px;
  color: var(--text-3);
}

/* ---------- Results ---------- */
.vp-root.vp-root.vp-root .understood {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.vp-root.vp-root.vp-root .understood__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .understood__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vp-root.vp-root.vp-root .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.vp-root.vp-root.vp-root .toolbar__count {
  font-size: 15px;
}
.vp-root.vp-root.vp-root .toolbar__count strong {
  font-size: 18px;
}
.vp-root.vp-root.vp-root .toolbar__mode {
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vp-root.vp-root.vp-root .toolbar__filters {
  display: none;
}
.vp-root.vp-root.vp-root .toolbar__badge {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  margin-left: 4px;
}
.vp-root.vp-root.vp-root .toolbar__sortlabel {
  color: var(--text-3);
  font-size: 13px;
}
.vp-root.vp-root.vp-root .select {
  min-height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8190' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
}
.vp-root.vp-root.vp-root .active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.vp-root.vp-root.vp-root .active__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vp-root.vp-root.vp-root .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.vp-root.vp-root.vp-root .loadmore {
  display: flex;
  justify-content: center;
  margin: 28px 0;
}
.vp-root.vp-root.vp-root .alternatives {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}
.vp-root.vp-root.vp-root .alternatives__title {
  font-size: 20px;
  margin-bottom: 6px;
}
.vp-root.vp-root.vp-root .alternatives .muted {
  margin-bottom: 16px;
}
.vp-root.vp-root.vp-root .foot {
  margin-top: 40px;
  text-align: center;
}

/* ---------- Card ---------- */
.vp-root.vp-root.vp-root .card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vp-root.vp-root.vp-root .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.vp-root.vp-root.vp-root .card--alt {
  border-style: dashed;
}
.vp-root.vp-root.vp-root .card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
}
.vp-root.vp-root.vp-root .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.vp-root.vp-root.vp-root .card:hover .card__media img {
  transform: scale(1.03);
}
.vp-root.vp-root.vp-root .card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px);
}
.vp-root.vp-root.vp-root .card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.vp-root.vp-root.vp-root .badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.vp-root.vp-root.vp-root .badge--new {
  background: var(--accent);
  color: var(--accent-ink);
}
.vp-root.vp-root.vp-root .badge--certified {
  background: var(--ok);
  color: #fff;
}
.vp-root.vp-root.vp-root .badge--muted {
  background: var(--surface-2);
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .card__photocount {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
}
.vp-root.vp-root.vp-root .card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
}
.vp-root.vp-root.vp-root .card__title {
  font-size: 17px;
  font-weight: 700;
}
.vp-root.vp-root.vp-root .card__titlebtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.vp-root.vp-root.vp-root .card__titlebtn:hover {
  color: var(--accent);
}
.vp-root.vp-root.vp-root .card__trim {
  color: var(--text-2);
  font-size: 13px;
  margin-top: -6px;
}
.vp-root.vp-root.vp-root .card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vp-root.vp-root.vp-root .card__amount {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vp-root.vp-root.vp-root .card__amount--call {
  font-size: 16px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .card__savings {
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  background: var(--ok-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.vp-root.vp-root.vp-root .card__specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px 14px;
  font-size: 13px;
}
.vp-root.vp-root.vp-root .card__specs dt {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vp-root.vp-root.vp-root .card__specs dd {
  font-weight: 600;
}
.vp-root.vp-root.vp-root .card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vp-root.vp-root.vp-root .card__why {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .card__why-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.vp-root.vp-root.vp-root .card__relaxed {
  font-size: 12px;
  color: var(--warn);
  margin-top: 6px;
}
.vp-root.vp-root.vp-root .card__dealer {
  color: var(--text-3);
  font-size: 12px;
  margin-top: auto;
}
.vp-root.vp-root.vp-root .card__note {
  color: var(--text-3);
  font-size: 12px;
}
.vp-root.vp-root.vp-root .card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
}

/* ---------- Reasons ---------- */
.vp-root.vp-root.vp-root .reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vp-root.vp-root.vp-root .reason {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
}
.vp-root.vp-root.vp-root .reasons--compact .reason {
  font-size: 12.5px;
}
.vp-root.vp-root.vp-root .reason__mark {
  font-weight: 700;
}
.vp-root.vp-root.vp-root .reason--verified .reason__mark {
  color: var(--ok);
}
.vp-root.vp-root.vp-root .reason--inferred .reason__mark {
  color: var(--warn);
}
.vp-root.vp-root.vp-root .reason__evidence {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- States ---------- */
.vp-root.vp-root.vp-root .state {
  padding: 48px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.vp-root.vp-root.vp-root .state h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.vp-root.vp-root.vp-root .state__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.vp-root.vp-root.vp-root .state--error {
  border-color: var(--danger);
}
.vp-root.vp-root.vp-root .skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.vp-root.vp-root.vp-root .skeleton--line {
  height: 14px;
  margin: 6px 0;
}
.vp-root.vp-root.vp-root .skeleton--line.tall {
  height: 24px;
}
.vp-root.vp-root.vp-root .w-30 { width: 30%; }
.vp-root.vp-root.vp-root .w-40 { width: 40%; }
.vp-root.vp-root.vp-root .w-70 { width: 70%; }
.vp-root.vp-root.vp-root .w-90 { width: 90%; }
.vp-root.vp-root.vp-root .card--skeleton .card__media {
  cursor: default;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-root.vp-root.vp-root .skeleton { animation: none; }
  .vp-root.vp-root.vp-root .card, .vp-root.vp-root.vp-root .card__media img, .vp-root.vp-root.vp-root .tile, .vp-root.vp-root.vp-root .btn { transition: none; }
}

/* ---------- Drawer / modal ---------- */
.vp-root.vp-root.vp-root .drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.vp-root.vp-root.vp-root .drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(2px);
}
.vp-root.vp-root.vp-root .drawer__panel {
  position: relative;
  width: min(760px, 100%);
  height: 100%;
  overflow: auto;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px 40px;
  animation: slidein 0.22s ease-out;
}
.vp-root.vp-root.vp-root .drawer__panel--wide {
  width: min(1100px, 100%);
}
@keyframes slidein {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.vp-root.vp-root.vp-root .drawer__close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
}
.vp-root.vp-root.vp-root .drawer__hero {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-bottom: 16px;
}
.vp-root.vp-root.vp-root .detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  clear: both;
}
.vp-root.vp-root.vp-root .detail__hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .detail__thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 4px;
  scrollbar-width: thin;
}
.vp-root.vp-root.vp-root .detail__thumb {
  flex: 0 0 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .detail__thumb.is-active {
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root .detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vp-root.vp-root.vp-root .detail__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vp-root.vp-root.vp-root .detail__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}
.vp-root.vp-root.vp-root .detail__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0;
}
.vp-root.vp-root.vp-root .detail__trim {
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .detail__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.vp-root.vp-root.vp-root .detail__amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vp-root.vp-root.vp-root .detail__amount--call {
  font-size: 20px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .detail__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .detail__section h3 {
  font-size: 17px;
  margin-bottom: 10px;
}
.vp-root.vp-root.vp-root .specgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 16px;
}
.vp-root.vp-root.vp-root .specgrid__item {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.vp-root.vp-root.vp-root .specgrid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .specgrid dd {
  font-weight: 600;
  font-size: 14px;
}
.vp-root.vp-root.vp-root .detail__featcat + .detail__featcat {
  margin-top: 12px;
}
.vp-root.vp-root.vp-root .detail__featcat h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.vp-root.vp-root.vp-root .detail__featlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.vp-root.vp-root.vp-root .detail__featlist summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.vp-root.vp-root.vp-root .detail__featlist summary::before {
  content: "✓ ";
  color: var(--ok);
  font-weight: 700;
}
.vp-root.vp-root.vp-root .detail__featlist details[open] summary {
  color: var(--accent);
}
.vp-root.vp-root.vp-root .detail__raw {
  margin-top: 14px;
}
.vp-root.vp-root.vp-root .detail__raw summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.vp-root.vp-root.vp-root .detail__rawlist {
  columns: 2;
  column-gap: 24px;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 8px;
}
.vp-root.vp-root.vp-root .detail__desc {
  color: var(--text-2);
  white-space: pre-line;
}
.vp-root.vp-root.vp-root .similar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.vp-root.vp-root.vp-root .similar__item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  align-items: center;
}
.vp-root.vp-root.vp-root .similar__item:hover {
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root .similar__item img,
.vp-root.vp-root.vp-root .similar__item .card__placeholder {
  width: 84px;
  height: 63px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.vp-root.vp-root.vp-root .similar__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Compare ---------- */
.vp-root.vp-root.vp-root .tray {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 10px 12px 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.vp-root.vp-root.vp-root .tray__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vp-root.vp-root.vp-root .tray__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root .tray__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.vp-root.vp-root.vp-root .compare__scroll {
  overflow-x: auto;
  margin-top: 16px;
}
.vp-root.vp-root.vp-root .compare {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.vp-root.vp-root.vp-root .compare th,
.vp-root.vp-root.vp-root .compare td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.vp-root.vp-root.vp-root .compare thead th {
  min-width: 180px;
  vertical-align: bottom;
}
.vp-root.vp-root.vp-root .compare thead img {
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
}
.vp-root.vp-root.vp-root .compare tbody th {
  color: var(--text-3);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root .compare__yes {
  color: var(--ok);
  font-weight: 700;
}
.vp-root.vp-root.vp-root .compare__no {
  color: var(--text-3);
}

/* ---------- Responsive ---------- */
@container vp-root (max-width: 960px) {
  .vp-root.vp-root.vp-root .layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .vp-root.vp-root.vp-root .layout__filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(380px, 92vw);
    max-height: none;
    height: 100%;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    z-index: 60;
  }
  .vp-root.vp-root.vp-root .layout__filters.is-open {
    transform: none;
  }
  .vp-root.vp-root.vp-root .layout__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 20, 0.5);
    z-index: 55;
  }
  .vp-root.vp-root.vp-root .toolbar__filters {
    display: inline-flex;
  }
  .vp-root.vp-root.vp-root .toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    background: var(--bg);
    padding: 8px 0;
    margin: 0 0 8px;
  }
  .vp-root.vp-root.vp-root .header .search--compact {
    max-width: none;
  }
}
@container vp-root (max-width: 640px) {
  .vp-root.vp-root.vp-root .brand__name {
    display: none;
  }
  .vp-root.vp-root.vp-root .header__inner {
    gap: 10px;
  }
  .vp-root.vp-root.vp-root .hero__inner {
    padding-top: 28px;
  }
  .vp-root.vp-root.vp-root .search__submit {
    display: none;
  }
  .vp-root.vp-root.vp-root .search--compact .search__submit {
    display: none;
  }
  .vp-root.vp-root.vp-root .grid {
    grid-template-columns: 1fr;
  }
  .vp-root.vp-root.vp-root .card__specs {
    grid-template-columns: repeat(2, auto);
  }
  .vp-root.vp-root.vp-root .toolbar__sortlabel {
    display: none;
  }
  .vp-root.vp-root.vp-root .toolbar {
    flex-wrap: wrap;
  }
  .vp-root.vp-root.vp-root .toolbar__actions {
    width: 100%;
    justify-content: space-between;
    min-width: 0;
  }
  .vp-root.vp-root.vp-root .select {
    max-width: 60%;
    text-overflow: ellipsis;
  }
  .vp-root.vp-root.vp-root .drawer__panel {
    padding: 16px 16px 40px;
  }
  .vp-root.vp-root.vp-root .detail__price {
    align-items: flex-start;
  }
  .vp-root.vp-root.vp-root .detail__rawlist {
    columns: 1;
  }
  .vp-root.vp-root.vp-root .tray {
    bottom: 10px;
    padding: 8px 10px;
  }
}

/* Source 2: platform overrides (packages/ui/src/styles/vp.css) */
/*
 * Platform overrides for the original application stylesheet.
 *
 * Written UNSCOPED, like the original; the build (packages/ui/build/build-css.mjs)
 * prefixes every selector with the island root (`.vp-root`, repeated for
 * specificity against theme rules) and turns the original WIDTH media queries
 * into container queries on the island root. Here `:root` means the island root.
 *
 * Why container queries: the server cannot measure the browser, and an island
 * placed in a narrow WordPress column must get the narrow layout on a wide
 * screen. The plugin solved that with a ResizeObserver after mount, which
 * changed the layout after the first paint; container queries give the right
 * layout in the server HTML (Stage 1 finding I-5).
 */

.vp-root.vp-root.vp-root {
  container: vp-root / inline-size;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  --header-h: var(--vp-sticky-offset, 0px);
  /* The host page owns width and side gutter (a Bricks container already pads its
     content); a host without padding can set --vp-gutter on the island. */
  --maxw: 100%;
  --gutter: var(--vp-gutter, 0px);
  background: transparent;
}

/* Overlays (Quick View, comparison) render in a separate root appended to <body>. */
.vp-root.vp-root.vp-root.vp-portal {
  container: none;
  position: static;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.vp-root.vp-root.vp-root .drawer__panel {
  container: vp-root / inline-size;
}

/* ---------- Layout inside a WordPress column ---------- */
.vp-root.vp-root.vp-root .layout {
  padding-top: 16px;
}
.vp-root.vp-root.vp-root .grid {
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.vp-root.vp-root.vp-root .card {
  min-width: 0;
}
.vp-root.vp-root.vp-root .card__specs {
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
}
.vp-root.vp-root.vp-root .card__specs dd,
.vp-root.vp-root.vp-root .card__dealer,
.vp-root.vp-root.vp-root .card__trim {
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .toolbar__actions .select,
.vp-root.vp-root.vp-root .toolbar__actions select {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Real links on cards (decision P5) ---------- */
.vp-root.vp-root.vp-root a.card__media {
  color: inherit;
  text-decoration: none;
}
.vp-root.vp-root.vp-root .card__titlelink {
  color: inherit;
  text-decoration: none;
}
.vp-root.vp-root.vp-root .card__titlelink:hover,
.vp-root.vp-root.vp-root .card__titlelink:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.vp-root.vp-root.vp-root .card__actions a.btn,
.vp-root.vp-root.vp-root a.btn {
  text-decoration: none;
}

/* ---------- Grid columns (shortcode `columns`, a MAXIMUM) ----------
   N cards per row when the results area is wide enough for N cards of at least
   --vp-card-min, fewer otherwise (a Bricks column, a tablet, a phone). Pure CSS
   on the available width: no measurement, identical before and after hydration. */
.vp-root.vp-root.vp-root .grid--cols-2,
.vp-root.vp-root.vp-root .grid--cols-3,
.vp-root.vp-root.vp-root .grid--cols-4 {
  grid-template-columns: repeat(auto-fill, minmax(max(var(--vp-card-min), calc((100% - (var(--vp-cols) - 1) * 18px) / var(--vp-cols))), 1fr));
}
.vp-root.vp-root.vp-root .grid--cols-2 {
  --vp-cols: 2;
  --vp-card-min: 290px;
}
.vp-root.vp-root.vp-root .grid--cols-3 {
  --vp-cols: 3;
  --vp-card-min: 260px;
}
/* 250 px is the narrowest card that keeps "Schumacher Price $54,039" on one line:
   four across fit a 1,090 px results area (1,440 px window with filters); below
   that the grid drops to three, then two, instead of squeezing. */
.vp-root.vp-root.vp-root .grid--cols-4 {
  --vp-cols: 4;
  --vp-card-min: 250px;
}

/* Narrow cards (four across): two spec columns instead of three, a slightly smaller total. */
@container vp-card (max-width: 280px) {
  .vp-root.vp-root.vp-root .card__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vp-root.vp-root.vp-root .vp-price__line--total {
    gap: 8px;
  }
  .vp-root.vp-root.vp-root .card__amount {
    font-size: 20px;
  }
}

/* Provider valuation badge (KBB): its own row under the price, at the provider's fixed size. */
.vp-root.vp-root.vp-root .vp-valuation {
  display: flex;
  line-height: 0;
}
.vp-root.vp-root.vp-root .vp-valuation img {
  display: block;
  max-width: 100%;
  height: auto;
}
.vp-root.vp-root.vp-root .card__valuation {
  margin-top: -2px;
}
.vp-root.vp-root.vp-root .detail__valuation {
  justify-content: flex-end;
}

/* Card footer: Compare, Quick view and View details need ~364 px of card width.
   Cards are narrower in two- and three-column grids at 960–1300 px windows and in
   the Bricks canvas, so the footer adapts to the CARD's width instead of
   overflowing it: tighter buttons first, then View details on its own row. */
.vp-root.vp-root.vp-root .card {
  container: vp-card / inline-size;
}
.vp-root.vp-root.vp-root .card__actions {
  column-gap: 6px;
}
@container vp-card (max-width: 365px) {
  .vp-root.vp-root.vp-root .card__actions .btn {
    padding: 0 12px;
  }
}
@container vp-card (max-width: 347px) {
  .vp-root.vp-root.vp-root .card__actions {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .vp-root.vp-root.vp-root .card__actions > .btn--primary {
    flex: 1 1 100%;
  }
}

/* ---------- Badges ---------- */
.vp-root.vp-root.vp-root .badge--special {
  background: var(--warn-soft);
  color: var(--warn);
}
.vp-root.vp-root.vp-root .badge--drop {
  background: var(--ok-soft);
  color: var(--ok);
}

/* ---------- Pricing breakdown (from the plugin's verified styles) ---------- */
.vp-root.vp-root.vp-root .vp-price--breakdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.vp-root.vp-root.vp-root .detail__price.vp-price--breakdown {
  align-items: flex-end;
  min-width: 220px;
}
.vp-root.vp-root.vp-root .vp-price__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  width: 100%;
}
.vp-root.vp-root.vp-root .vp-price__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .vp-price__line dt,
.vp-root.vp-root.vp-root .vp-price__line dd {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-price__line dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.vp-root.vp-root.vp-root .vp-price__line--total {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
}
.vp-root.vp-root.vp-root .vp-price__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.vp-root.vp-root.vp-root .vp-price__disclosure {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-compare__total th,
.vp-root.vp-root.vp-root .vp-compare__total td {
  font-weight: 700;
}

/* ---------- Compare tray ---------- */
.vp-root.vp-root.vp-root .vp-tray {
  flex-wrap: wrap;
}
.vp-root.vp-root.vp-root .vp-tray__max {
  font-weight: 400;
  opacity: 0.8;
}
.vp-root.vp-root.vp-root .vp-tray__notice {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .vp-tray__notice:empty {
  display: none;
}
.vp-root.vp-root.vp-root .check--compare.is-disabled {
  opacity: 0.6;
}
.vp-root.vp-root.vp-root .check--compare.is-disabled input {
  cursor: not-allowed;
}

/* ---------- Numbered pagination (decision P4) ---------- */
.vp-root.vp-root.vp-root .vp-pagination {
  margin: 28px 0;
}
.vp-root.vp-root.vp-root .vp-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vp-root.vp-root.vp-root .vp-pagination__list a {
  min-width: 40px;
  justify-content: center;
}
.vp-root.vp-root.vp-root .vp-pagination__gap {
  padding: 8px 4px;
  color: var(--text-3);
}

/* ---------- Detail page sections (h2 on a VDP, where the title is the h1) ---------- */
.vp-root.vp-root.vp-root .detail__sectiontitle {
  font-size: 17px;
  margin-bottom: 10px;
}
/* Equipment (VDP and Quick View): one block per category, a plain heading,
   items as a bulleted list in up to two columns, comfortable line height. */
.vp-root.vp-root.vp-root .detail__featcat {
  padding: 14px 0 6px;
}
.vp-root.vp-root.vp-root .detail__featcat + .detail__featcat {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .detail__featcat h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 8px;
}
.vp-root.vp-root.vp-root .detail__featlist {
  display: block;
  columns: 2 220px;
  column-gap: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc;
  font-size: 14px;
  line-height: 1.55;
}
.vp-root.vp-root.vp-root .detail__featlist > li {
  break-inside: avoid;
  padding: 2px 0;
}
.vp-root.vp-root.vp-root .detail__featlist > li::marker {
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .detail__featlist summary {
  display: inline;
  font-weight: 400;
  color: var(--text);
}
.vp-root.vp-root.vp-root .detail__featlist summary::-webkit-details-marker {
  display: none;
}
.vp-root.vp-root.vp-root .detail__featlist summary::before {
  content: none;
}
.vp-root.vp-root.vp-root .detail__featlist summary:hover,
.vp-root.vp-root.vp-root .detail__featlist details[open] summary {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.vp-root.vp-root.vp-root .detail__featlist details > p {
  margin: 2px 0 6px;
  line-height: 1.45;
}
.vp-root.vp-root.vp-root .detail__raw {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .detail__rawlist {
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
  columns: 1;
  column-gap: 32px;
}
/* Stage 6: slightly larger text, more room between items, 3 / 2 / 1 columns by width (order unchanged:
   top to bottom, then the next column). An item never splits across two columns. */
.vp-root.vp-root.vp-root .detail__rawlist li {
  padding: 3px 0;
  break-inside: avoid;
}
@container vp-root (min-width: 560px) {
  .vp-root.vp-root.vp-root .detail__rawlist {
    columns: 2;
  }
}
@container vp-root (min-width: 960px) {
  .vp-root.vp-root.vp-root .detail__rawlist {
    columns: 3;
  }
}

/* Make → Model hierarchy in the filter panel. */
.vp-root.vp-root.vp-root .mmtree__models {
  margin: 0 0 6px 9px;
  padding-left: 17px;
  border-left: 2px solid var(--line);
}
.vp-root.vp-root.vp-root .mmtree__models .check {
  padding-top: 4px;
  padding-bottom: 4px;
}
.vp-root.vp-root.vp-root .vp-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vp-root.vp-root.vp-root .vp-dealer__address {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

/* ---------- Body-type links, featured grid and carousel ---------- */
.vp-root.vp-root.vp-root a.tile {
  text-decoration: none;
}
.vp-root.vp-root.vp-root .vp-featured__title {
  font-size: 22px;
  margin-bottom: 14px;
}
.vp-root.vp-root.vp-root .vp-featured__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(290px, 85%), 1fr);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  /* Stage 6: the containing block of the cards' absolutely positioned parts, so they are clipped too. */
  position: relative;
}
.vp-root.vp-root.vp-root .vp-featured__item {
  min-width: 0;
  scroll-snap-align: start;
  /* Let the card fill the row height so its footer lines up, as in the finder grid. */
  display: flex;
  flex-direction: column;
}
.vp-root.vp-root.vp-root .vp-featured__item > .card {
  flex: 1;
}
.vp-root.vp-root.vp-root .vp-featured__more {
  margin-top: 16px;
  text-align: center;
}

/* ---------- Compact container (plugin `vf-compact` rules, now a container query) ---------- */
@container vp-root (max-width: 640px) {
  .vp-root.vp-root.vp-root .toolbar {
    flex-wrap: wrap;
  }
  .vp-root.vp-root.vp-root .toolbar__sortlabel {
    display: none;
  }
  .vp-root.vp-root.vp-root .toolbar__actions {
    width: 100%;
    justify-content: space-between;
    min-width: 0;
    flex-wrap: wrap;
  }
  .vp-root.vp-root.vp-root .card__specs {
    grid-template-columns: repeat(2, auto);
  }
  .vp-root.vp-root.vp-root .detail__price.vp-price--breakdown {
    align-items: stretch;
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Stage 6: search box — popular searches and live suggestions ----------
   The box itself is unchanged (hero and compact). Tags are the existing ghost chips under it. The
   suggestion list floats in a layer on <body> (fixed position, placed by script under the field), so
   theme containers cannot clip or cover it and nothing on the page moves when it opens. */
.vp-root.vp-root.vp-root .search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.vp-root.vp-root.vp-root .search--compact .search__tags {
  margin-top: 8px;
}
.vp-root.vp-root.vp-root a.chip.search__tag {
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root a.chip.search__tag:hover,
.vp-root.vp-root.vp-root a.chip.search__tag:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.vp-root.vp-root.vp-root a.chip.search__tag:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Above theme headers, Bricks popups and the WordPress admin bar (99999); the layer itself is static. */
.vp-root.vp-root.vp-root .vp-suggest {
  z-index: 100000;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}
.vp-root.vp-root.vp-root .vp-suggest__list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.vp-root.vp-root.vp-root .vp-suggest__heading {
  padding: 10px 16px 4px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vp-root.vp-root.vp-root .vp-suggest__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 16px;
  cursor: pointer;
}
.vp-root.vp-root.vp-root .vp-suggest__option.is-active {
  background: var(--accent-soft);
}
.vp-root.vp-root.vp-root .vp-suggest__icon {
  display: grid;
  flex: none;
  color: var(--text-3);
}
.vp-root.vp-root.vp-root .vp-suggest__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .vp-suggest__kind {
  color: var(--text-3);
  font-size: 13px;
}
.vp-root.vp-root.vp-root .vp-suggest__count,
.vp-root.vp-root.vp-root .vp-suggest__price {
  flex: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root .vp-suggest__price {
  color: var(--text);
  font-weight: 700;
}
.vp-root.vp-root.vp-root .vp-suggest__thumb {
  flex: none;
  width: 56px;
  height: 42px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
}
.vp-root.vp-root.vp-root .vp-suggest__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vp-root.vp-root.vp-root .vp-suggest__vehicle {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-suggest__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .vp-suggest__meta {
  color: var(--text-3);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .vp-suggest__mark {
  padding: 0;
  background: none;
  color: inherit;
  font-weight: 700;
}
.vp-root.vp-root.vp-root .vp-suggest__clear {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.vp-root.vp-root.vp-root .vp-suggest__status {
  margin: 0;
  padding: 14px 16px;
  color: var(--text-2);
  font-size: 14px;
}

/* ---------- Finder top bar (compact search when the hero is off) ---------- */
.vp-root.vp-root.vp-root .vp-topbar {
  padding: 0 var(--gutter);
}

/* ---------- Stage 6: finder hero ----------
   The hero's inner edges align with the listing below (same maximum width and gutter as .layout),
   and the original's blue radial glow is gone: a plain surface with the bottom rule. Typography,
   spacing and the search box are unchanged. */
.vp-root.vp-root.vp-root .vp-finder .hero {
  background: var(--surface);
  box-shadow: none;
}
.vp-root.vp-root.vp-root .vp-finder .hero__inner {
  max-width: var(--maxw);
  padding: 36px var(--gutter) 24px;
}
.vp-root.vp-root.vp-root .vp-finder .hero__inner > .search {
  max-width: 980px;
}
@container vp-root (max-width: 640px) {
  .vp-root.vp-root.vp-root .vp-finder .hero__inner {
    padding-top: 24px;
  }
}

/* ---------- Stage 6: scroll to the results after a change ----------
   While the phone filter panel is open the visitor sees the panel, not the page. The browser's
   scroll anchoring would otherwise re-position the page under it each time the results change
   (observed on the staging site: a jump to the top of the page at the second tap); the island
   brings the results into view itself once the panel closes. Desktop keeps anchoring: it holds
   the visible content still while the hero collapses, before the island's own scroll. */
.vp-root.vp-root.vp-root .vp-finder:has(.layout__filters.is-open) .layout__results {
  overflow-anchor: none;
}

/* ---------- Vehicle detail page ----------
   The original app showed details only in the Quick View drawer. On a full page,
   a wide island puts the gallery beside the title and price so both are in the
   first screen; narrow islands keep the single column.
   Stage 5D: the key specs sit under the gallery in the left column; the right
   column (title, price, VIN/stock, actions) spans both rows. */
@container vp-root (min-width: 960px) {
  .vp-root.vp-root.vp-root .vp-detail .detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
    column-gap: 32px;
    row-gap: 22px;
    align-items: start;
  }
  .vp-root.vp-root.vp-root .vp-detail .detail > * {
    grid-column: 1 / -1;
  }
  .vp-root.vp-root.vp-root .vp-detail .detail > .detail__gallery {
    grid-column: 1;
    grid-row: 1;
  }
  .vp-root.vp-root.vp-root .vp-detail .detail > .detail__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .vp-root.vp-root.vp-root .vp-detail .detail > .vp-keyspecs {
    grid-column: 1;
    grid-row: 2;
  }
}
.vp-root.vp-root.vp-root .detail__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---------- Stage 5D: VDP head (title, dealership, price) ----------
   The title block is full width and the price box sits under it, so a long title
   wraps instead of pushing the price (no layout change between short and long
   titles). The KBB badge is beside the price total. */
.vp-root.vp-root.vp-root .detail__head.vp-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.vp-root.vp-root.vp-root .vp-head__title {
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-head .detail__title {
  margin: 4px 0 2px;
  font-size: 28px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.vp-root.vp-root.vp-root .vp-head .detail__trim {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .vp-eyebrow {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-eyebrow--certified {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  letter-spacing: 0.05em;
}
.vp-root.vp-root.vp-root .vp-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.vp-root.vp-root.vp-root .vp-location__icon {
  flex: none;
  color: var(--accent);
}
.vp-root.vp-root.vp-root .vp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.vp-root.vp-root.vp-root .vp-badges .badge {
  box-shadow: none;
}
.vp-root.vp-root.vp-root .vp-pricebox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.vp-root.vp-root.vp-root .vp-pricebox .detail__price.vp-price--breakdown {
  flex: 1 1 240px;
  align-items: stretch;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-pricebox .detail__valuation {
  flex: none;
  align-self: flex-end;
  margin-left: auto;
}

/* VIN and stock number: prominent, selectable, with a copy button each. */
.vp-root.vp-root.vp-root .detail__actions.vp-ids {
  padding: 10px 0;
}
.vp-root.vp-root.vp-root .vp-ids__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-id__label {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vp-root.vp-root.vp-root .vp-id__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-id__text {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  user-select: all;
}
.vp-root.vp-root.vp-root button.vp-id__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vp-root.vp-root.vp-root button.vp-id__copy:hover {
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root button.vp-id__copy:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Stage 6: copy feedback never moves anything. The button keeps its size: the copy icon turns into a
   checkmark (or an alert icon) for 2 s, and the announcement is visually hidden (.vp-id__status). */
.vp-root.vp-root.vp-root .vp-id__icon {
  flex: none;
}
.vp-root.vp-root.vp-root button.vp-id__copy[data-state='copied'] {
  border-color: var(--ok);
  color: var(--ok);
}
.vp-root.vp-root.vp-root button.vp-id__copy[data-state='failed'] {
  border-color: var(--danger);
  color: var(--danger);
}

/* Actions: Confirm Availability and Estimate Payment side by side, then the call
   and partner links in a balanced row; one column on narrow islands. */
.vp-root.vp-root.vp-root .vp-ctas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.vp-root.vp-root.vp-root .vp-ctas > * {
  min-width: 0;
}
@container vp-root (min-width: 560px) {
  .vp-root.vp-root.vp-root .vp-ctas--primary.vp-ctas--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vp-root.vp-root.vp-root .vp-ctas--secondary.vp-ctas--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vp-root.vp-root.vp-root .vp-ctas--secondary.vp-ctas--n3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vp-root.vp-root.vp-root .vp-ctas--secondary.vp-ctas--n3 > .vp-callrow {
    grid-column: 1 / -1;
  }
}
.vp-root.vp-root.vp-root .vp-ctas .vp-callrow {
  margin: 0;
}
.vp-root.vp-root.vp-root .btn.vp-cta--partner {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  border: 1px solid var(--line);
}
.vp-root.vp-root.vp-root .btn.vp-cta--partner:hover {
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root .btn.vp-cta--partner:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Key Specs and Specifications (Stage 6 refinement) ----------
   Key Specs: one panel with the values a shopper compares first, label above value, in aligned
   columns (2 on phones, 3 on medium widths, 4 when the gallery column is wide), hairlines between
   rows. Specifications: a table of rows, label column then value column, both left-aligned so a long
   value wraps under itself; two columns of rows on wide areas, one on narrow ones. */
.vp-root.vp-root.vp-root .vp-keyspecs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
@container vp-root (min-width: 560px) {
  .vp-root.vp-root.vp-root .vp-keyspecs__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container vp-root (min-width: 1280px) {
  .vp-root.vp-root.vp-root .vp-keyspecs__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Each item has a hairline above it; the first row's lines sit under the panel edge (margin -1px, clipped). */
.vp-root.vp-root.vp-root .vp-keyspecs__item {
  margin-top: -1px;
  padding: 14px 0 13px;
  /* Every earlier tile property is reset, so a stale copy of the old rules (a page optimiser's inlined
     CSS) cannot bring the separate boxes back. */
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-keyspecs__item dt,
.vp-root.vp-root.vp-root .vp-specs dt {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vp-root.vp-root.vp-root .vp-keyspecs__item dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .specgrid.vp-specs {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
}
@container vp-root (min-width: 720px) {
  .vp-root.vp-root.vp-root .specgrid.vp-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.vp-root.vp-root.vp-root .vp-specs .specgrid__item {
  display: grid;
  grid-template-columns: minmax(96px, 136px) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-specs dd {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
.vp-root.vp-root.vp-root .vp-specs__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- Similar vehicles (Stage 6) ----------
   One column count for the available width (whole cards of at least 250 px: 4 / 3 / 2 / 1). Up to four
   cards: a grid with exactly that many columns, so cards keep one size and no empty column appears
   (the earlier auto-fill grid added a fifth, empty column on wide pages). More than four: the same
   card width in a horizontal row that scrolls by whole cards (scroll snap), with previous/next buttons. */
.vp-root.vp-root.vp-root .vp-similar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.vp-root.vp-root.vp-root .vp-similar__head .detail__sectiontitle {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-similar__track {
  --vp-sim-cols: 1;
  --vp-sim-gap: 18px;
  gap: var(--vp-sim-gap);
}
@container vp-root (min-width: 518px) {
  .vp-root.vp-root.vp-root .vp-similar__track {
    --vp-sim-cols: 2;
  }
}
@container vp-root (min-width: 786px) {
  .vp-root.vp-root.vp-root .vp-similar__track {
    --vp-sim-cols: 3;
  }
}
@container vp-root (min-width: 1054px) {
  .vp-root.vp-root.vp-root .vp-similar__track {
    --vp-sim-cols: 4;
  }
}
.vp-root.vp-root.vp-root .vp-similar__track--grid {
  display: grid;
  grid-template-columns: repeat(var(--vp-sim-cols), minmax(0, 1fr));
}
.vp-root.vp-root.vp-root .vp-similar__track--carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--vp-sim-cols) - 1) * var(--vp-sim-gap)) / var(--vp-sim-cols));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* The containing block of the cards' absolutely positioned parts (visually hidden labels): without
     it they escape the clipping and widen the whole page. */
  position: relative;
  /* Room for the card shadows and a keyboard focus ring inside the scrolling row. */
  padding: 4px 0 10px;
  scrollbar-width: thin;
}
/* Once hydrated the buttons work, so the scrollbar is not needed (touch and trackpad still scroll). */
.vp-root.vp-root.vp-root[data-vp-hydrated] .vp-similar__track--carousel {
  scrollbar-width: none;
}
.vp-root.vp-root.vp-root[data-vp-hydrated] .vp-similar__track--carousel::-webkit-scrollbar {
  display: none;
}
.vp-root.vp-root.vp-root .vp-similar__item {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}
.vp-root.vp-root.vp-root .vp-similar__item > .card {
  flex: 1 1 auto;
}
.vp-root.vp-root.vp-root .vp-similar__controls {
  display: flex;
  flex: none;
  gap: 8px;
}
.vp-root.vp-root.vp-root .vp-similar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.vp-root.vp-root.vp-root .vp-similar__nav:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.vp-root.vp-root.vp-root .vp-similar__nav:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.vp-root.vp-root.vp-root .vp-similar__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- Stage 5C: vehicle actions ----------
   Confirm Availability is the primary action (filled accent), the call keeps its own style,
   Estimate Payment is secondary (outlined). Same shape and type size as the call button, at
   least 48 px tall; they need JavaScript, so they stay invisible (space kept) until the island
   is hydrated. Sizes are in px: host themes often set the root font size to 62.5 %, so rem
   would shrink the text. */
.vp-root.vp-root.vp-root .vp-leadrow,
.vp-root.vp-root.vp-root .vp-estimaterow {
  margin: 0;
}
.vp-root.vp-root.vp-root .btn.vp-cta {
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
}
.vp-root.vp-root.vp-root .btn.vp-cta:focus-visible,
.vp-root.vp-root.vp-root .vp-lead .btn:focus-visible,
.vp-root.vp-root.vp-root .vp-lead input:focus-visible,
.vp-root.vp-root.vp-root .vp-lead textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.vp-root.vp-root.vp-root .btn.vp-cta--estimate {
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* ---------- Stage 5C: dialogs (Confirm Availability, Estimate Payment) ----------
   The drawer shell as a dialog: a full-screen sheet on narrow screens, a centred panel on wide
   ones. The overlay root sits outside the island (no container query applies), so the dialog
   is its own size container. */
.vp-root.vp-root.vp-root .drawer--dialog {
  container: vp-dialog / inline-size;
  justify-content: center;
  align-items: stretch;
}
.vp-root.vp-root.vp-root .drawer--dialog .drawer__panel {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  animation: none;
}
@container vp-dialog (min-width: 640px) {
  .vp-root.vp-root.vp-root .drawer--dialog .drawer__panel {
    width: min(560px, calc(100% - 48px));
    height: auto;
    max-height: calc(100% - 48px);
    margin: auto;
    border-radius: var(--radius);
  }
  .vp-root.vp-root.vp-root .drawer--dialog.drawer--wide .drawer__panel {
    width: min(980px, calc(100% - 48px));
    height: calc(100% - 48px);
  }
}

.vp-root.vp-root.vp-root .vp-lead {
  display: flex;
  flex-direction: column;
  gap: 14px;
  clear: both;
}
.vp-root.vp-root.vp-root .vp-lead__title,
.vp-root.vp-root.vp-root .vp-estimate__title {
  margin: 4px 44px 0 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.vp-root.vp-root.vp-root .vp-lead__intro {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
}
.vp-root.vp-root.vp-root .vp-lead__notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--text);
}
.vp-root.vp-root.vp-root .vp-lead__notice.is-empty {
  display: none;
}
.vp-root.vp-root.vp-root .vp-lead__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vp-root.vp-root.vp-root .vp-lead__field label {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.vp-root.vp-root.vp-root .vp-lead__req,
.vp-root.vp-root.vp-root .vp-lead__opt {
  font-weight: 400;
  color: var(--text-2);
  font-size: 14px;
}
.vp-root.vp-root.vp-root .vp-lead__field input,
.vp-root.vp-root.vp-root .vp-lead__field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* no zoom on focus in iOS Safari */
}
.vp-root.vp-root.vp-root .vp-lead__field textarea {
  resize: vertical;
}
.vp-root.vp-root.vp-root .vp-lead__field.has-error input,
.vp-root.vp-root.vp-root .vp-lead__field.has-error textarea {
  border: 2px solid var(--danger);
}
.vp-root.vp-root.vp-root .vp-lead__error {
  margin: 0;
  color: var(--danger);
  font-weight: 600;
  font-size: 14px;
}
.vp-root.vp-root.vp-root .btn.vp-lead__submit {
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
}
.vp-root.vp-root.vp-root .vp-lead__disclosure {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-lead__success {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
}
.vp-root.vp-root.vp-root .vp-lead--done .vp-lead__title:focus {
  outline: none;
}
.vp-root.vp-root.vp-root .vp-lead__back {
  padding-left: 0;
}
/* Honeypot: off-screen, never displayed to people or read by screen readers. */
.vp-root.vp-root.vp-root .vp-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vp-root.vp-root.vp-root .vp-estimate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  clear: both;
}
.vp-root.vp-root.vp-root .vp-estimate__basis,
.vp-root.vp-root.vp-root .vp-estimate__status {
  margin: 0;
}
.vp-root.vp-root.vp-root .vp-estimate__frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* ---------- Progressive enhancement ----------
   Controls that need JavaScript (compare, Quick view, clear search) are in the
   server HTML so hydration matches it exactly; they stay invisible (space kept,
   no layout shift) until the loader marks the island as hydrated. */
.vp-root.vp-root.vp-root:not([data-vp-hydrated]) .vp-js-only {
  visibility: hidden;
}
.vp-root.vp-root.vp-root .vp-notice {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
}
.vp-root.vp-root.vp-root .vp-fallback {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.vp-root.vp-root.vp-root [data-vp-loading] .layout__results .grid {
  opacity: 0.6;
  transition: opacity 0.15s;
}

/* ---------- Click-to-call (Stage 5B.2) ----------
   A real tel: link with its label AND number visible (never icon-only), at least
   44 px tall (48 px on the VDP), the accent colour of the design system, and a
   visible focus ring. "Call about similar vehicles" (a vehicle not for sale) uses
   the outlined style so it never reads as the vehicle's own purchase action. */
.vp-root.vp-root.vp-root a.vp-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.vp-root.vp-root.vp-root a.vp-call:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 86%, #000);
}
.vp-root.vp-root.vp-root a.vp-call:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.vp-root.vp-root.vp-root .vp-call__icon {
  flex: none;
}
.vp-root.vp-root.vp-root .vp-call__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.vp-root.vp-root.vp-root .vp-call__label,
.vp-root.vp-root.vp-root .vp-call__number {
  text-align: center;
}
.vp-root.vp-root.vp-root .vp-call__number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vp-root.vp-root.vp-root a.vp-call--similar {
  background: var(--surface);
  color: var(--accent);
}
.vp-root.vp-root.vp-root a.vp-call--similar:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.vp-root.vp-root.vp-root a.vp-call--compact {
  min-height: 44px;
  padding: 8px 14px;
}
.vp-root.vp-root.vp-root a.vp-call--compact .vp-call__text {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 6px;
}
.vp-root.vp-root.vp-root .card__actions a.vp-call--compact {
  flex: 1 1 100%;
  justify-content: center;
}
.vp-root.vp-root.vp-root .vp-callrow {
  margin: 4px 0 0;
}
.vp-root.vp-root.vp-root .vp-callrow a.vp-call {
  width: 100%;
  justify-content: center;
}
.vp-root.vp-root.vp-root .vp-callrow a.vp-call--full .vp-call__text {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 8px;
  justify-content: center;
}
@container vp-root (min-width: 768px) {
  .vp-root.vp-root.vp-root .vp-callrow--no-desktop {
    display: none;
  }
}
/* Stage 5D: different call-button text on narrow islands (the hidden one is not part of the accessible name). */
.vp-root.vp-root.vp-root .vp-call__label--narrow {
  display: none;
}
@container vp-root (max-width: 639px) {
  .vp-root.vp-root.vp-root .vp-call__label--wide {
    display: none;
  }
  .vp-root.vp-root.vp-root .vp-call__label--narrow {
    display: inline;
  }
}
/* One sticky call bar per VDP, narrow screens only. Sticky, not fixed: it stays in
   the page flow at the end of the article (nothing is hidden behind it once the
   reader reaches the end), and it respects the device's safe area. */
.vp-root.vp-root.vp-root .vp-callbar {
  display: none;
}
@container vp-root (max-width: 767px) {
  .vp-root.vp-root.vp-root .vp-callbar {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px calc(-1 * var(--gutter)) 0;
    padding: 10px max(12px, var(--gutter)) max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -4px 14px rgb(0 0 0 / 0.08);
  }
  .vp-root.vp-root.vp-root .vp-callbar a.vp-call {
    width: 100%;
    justify-content: center;
  }
  .vp-root.vp-root.vp-root .vp-callbar a.vp-call .vp-call__text {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 8px;
  }
  /* Stage 5D: a control that receives focus (keyboard, or a script's focus()) is scrolled clear of the
     sticky bar instead of stopping behind it (WCAG 2.4.11, focus not obscured). */
  .vp-root.vp-root.vp-root .vp-detail--callbar :is(a, button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-bottom: 96px;
  }
}