/* Broker Black inventory grammar: the SRP card and VDP deal-sheet structure
   from the Spark Noir dealer sites, in the v3 design system (styles.css):
   light or dark, rounded surfaces, Fraunces numbers, Inter labels.
   Loaded by /shop and /vehicle after styles.css. */
:root { --sans: var(--body); --title: var(--display); }
/* Flat scrim behind modal sheets (the SRP inquiry modal), light and dark. */
:root { --scrim-flat: rgba(10, 10, 12, .55); }
[data-theme="dark"] { --scrim-flat: rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --scrim-flat: rgba(0, 0, 0, .7); } }

/* ---------- page furniture ---------- */
.sec { padding: 0; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.sec-t h2 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; margin: 0; }
.sec-t h2 em { font-style: normal; font-weight: 500; color: var(--fg); }
.kicker { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.f-h { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.price-line { color: var(--dim); font-size: 13px; }
.form-done { text-align: center; color: var(--fg); font-family: var(--display); font-weight: 300; font-size: 24px; padding: 30px 0; }
.rule-strip { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-btn); padding: 12px 16px; color: var(--dim); font-size: 14.5px; line-height: 1.55; }


/* ---------- filters: uppercase pills ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.filters button, .filters select, .filters input {
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--dim); border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none;
  padding: 9px 14px; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
}
.filters select { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.filters input { cursor: text; color: var(--fg); width: 130px; font-weight: 400; border-radius: var(--r-btn); }
.filters button.on, .filters select.on { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.filters select:focus, .filters input:focus, .filters button:focus-visible { border-color: var(--fg); }
.filters select:disabled { opacity: .45; cursor: default; }

/* ---------- SRP cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.srp-grid { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); gap: 14px; margin-bottom: 30px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; }
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.card.dropped { border-color: var(--gold); }
.srp-card { display: flex; flex-direction: column; }
.srp-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.tile { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--bg-2); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover .tile img { transform: scale(1.04); }
.tile .cond { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; background: var(--panel-glass); }
/* Save to garage: on the SRP it is a real button beside the card link (a direct child of the card, which is
   position: relative), laid over the photo's top-right corner above the link. */
.tile .save-tag, .srp-card > .save-tag { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; background: var(--panel-glass); cursor: pointer; transition: border-color .18s, color .18s; }
.srp-card > .save-tag { z-index: 4; margin: 0; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 5px; line-height: 0; }
.srp-card > .save-tag:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tile .save-tag:hover, .tile .save-tag.on, .srp-card > .save-tag:hover, .srp-card > .save-tag.on { border-color: var(--gold); color: var(--gold); }
/* The star: an outline until the car is saved, filled once it is (the .on class the toggle sets). */
.srp-card > .save-tag .save-star { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill .18s; }
.srp-card > .save-tag.on .save-star { fill: currentColor; }
.tile .ph-tile { position: absolute; inset: 0; }
.tile .drop-ribbon { top: auto; bottom: 12px; left: 12px; }
.tile .pc-flag { top: auto; bottom: 12px; left: auto; right: 12px; }
.card-b { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-b-srp { padding: 14px 16px 12px; gap: 6px; }
.srp-title { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.srp-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.srp-orig { color: var(--dim); text-decoration: line-through; }
.srp-sale { color: var(--fg); font-weight: 500; }
.srp-save { font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); background: var(--gold-2); padding: 2px 8px; border-radius: 999px; }
.srp-fee { color: var(--dim); font-size: 11px; letter-spacing: .02em; margin-top: -3px; }
.pay-line { display: flex; align-items: baseline; gap: 8px; }
.pay-line .pay { font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg); font-variant-numeric: tabular-nums; }
.card-b-srp .pay-line .pay { font-size: 27px; }
.pay-line .permo { color: var(--dim); font-size: 12.5px; }
.pay-line.ask-dealer .permo { font-size: 14px; color: var(--fg); }
.pay-terms { color: var(--dim); font-size: 11.5px; letter-spacing: .02em; margin-top: -4px; }
/* The other way to take the car, under the first (Anne, 2026-10-03, after the dealer sites' card): an italic "or", then its
   payment a size smaller with its own terms line, on the card's own rhythm. */
.pay-alt { display: flex; flex-direction: column; gap: 6px; }
.pay-or { font-family: var(--display); font-style: italic; color: var(--dim); font-size: 13.5px; line-height: 1; margin: 2px 0; }
.card-b-srp .pay-alt .pay-line .pay { font-size: 22px; }
.pay-line-promo .pay { font-size: 20px; color: var(--fg); }
.srp-id { color: var(--dim); font-size: 10.5px; letter-spacing: .04em; overflow-wrap: anywhere; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.chips span { font-family: var(--sans); font-weight: 500; font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.fin-ast { color: var(--gold); text-decoration: none; margin-left: 2px; font-size: 1.1em; cursor: pointer; }
.srp-actions { padding: 0 16px 16px; margin-top: auto; }
.offer-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.srp-actions .dbtn, .srp-actions .dbtn-outline { padding-block: 12px; }
.srp-empty { color: var(--dim); font-size: 18px; padding: 40px 0; text-align: center; }

/* Concierge drops and price drops keep their motion */
.card.pc-pick { border-color: var(--gold); }

/* jump buttons: stacked above the Concierge pill (#pc-fab, bottom 22px, ~46px tall) */
.srp-jump { position: fixed; right: 18px; bottom: 78px; z-index: 40; display: flex; flex-direction: column; gap: 6px; }
.srp-jump button { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); }
.srp-jump button:hover { border-color: var(--fg); }
/* Phones: the Concierge pill is enough; the jump buttons step out. */
@media (max-width: 640px) { .srp-jump { display: none; } }
/* (previous phone row rule kept below for tablets) */
@media (max-width: 640px) { .srp-jump { right: auto; left: 12px; bottom: 22px; flex-direction: row; } .srp-jump button { padding: 9px 12px; } }

/* ---------- deal profile panel (SRP) ---------- */
.profile-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 16px; margin: 26px 0 18px; }
.profile-panel .pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.profile-panel .pp-note { color: var(--dim); font-size: 13px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 12px; }
.profile-grid label { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; white-space: nowrap; }
.profile-grid input, .profile-grid select { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 15px; font-weight: 400; padding: 10px 11px; outline: none; }
.profile-grid input:focus, .profile-grid select:focus { border-color: var(--fg); }
@media (min-width: 900px) {
  .profile-panel.sticky { position: sticky; top: 0; z-index: 45; box-shadow: var(--shadow); border-radius: 0 0 var(--r) var(--r); }
}
.range-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.range-bar .rb-note { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--gold); margin-right: 6px; }

/* ---------- VDP ---------- */
.vdp-hero { padding: 44px 0 10px; }
.vdp-title { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.vdp-title em { font-style: normal; font-weight: 500; color: var(--fg); }
.vdp-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.vdp-meta { color: var(--dim); font-family: var(--sans); font-weight: 500; font-size: 13.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.vdp-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-left: auto; }
.sticker-link { display: inline-flex; align-items: center; justify-content: center; height: 42px; min-width: 176px; padding: 0 18px; box-sizing: border-box; white-space: nowrap; background: none; cursor: pointer; font-family: var(--sans); font-weight: 500; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); font-size: 13.5px; text-decoration: none; transition: border-color .18s, color .18s; }
.sticker-link:hover, .sticker-link.on { border-color: var(--fg); }
.sticker-link.on { color: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) { .vdp-meta-row { align-items: flex-start; } .vdp-actions { margin-left: 0; width: 100%; justify-content: flex-start; } .sticker-link { min-width: 0; flex: 1 1 0; } }

/* gallery rail */
.gal { margin: 26px 0 0; }
.gal-rail-wrap { position: relative; }
.gal-rail { --gal-h: clamp(340px, 48vh, 520px); display: flex; gap: 12px; height: var(--gal-h); padding-inline: 0; scroll-padding-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; cursor: grab; }
.gal-rail::-webkit-scrollbar { display: none; }
.gal-rail-single { justify-content: center; overflow: hidden; padding-inline: 0; }
.gal-frame { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 4/3; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-snap-align: start; cursor: zoom-in; background: var(--bg-2); opacity: .72; transition: opacity 220ms ease; }
.gal-frame.on { opacity: 1; }
.gal-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-frame.gal-single { aspect-ratio: 16/9; cursor: default; opacity: 1; }
.gal-frame .ph-tile { position: absolute; inset: 0; }
.gal-arrow { position: absolute; top: 0; bottom: 0; width: 72px; border: 0; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 220ms ease; z-index: 2; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
.gal-arrow svg { transition: transform 220ms ease; }
.gal-prev:hover svg { transform: translateX(-3px); } .gal-next:hover svg { transform: translateX(3px); }
.gal-rail-wrap:hover .gal-arrow, .gal-rail-wrap:focus-within .gal-arrow, .gal-arrow.lb { opacity: 1; }
.gal-prev { left: 0; background: linear-gradient(90deg, rgba(8, 9, 11, .45), transparent); }
.gal-next { right: 0; background: linear-gradient(270deg, rgba(8, 9, 11, .45), transparent); }
.gal-count { position: absolute; left: 22px; bottom: 16px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); z-index: 2; }
.gal-count.static { position: static; display: inline-block; margin: 0 0 6px 2px; }
.gal-expand { position: absolute; right: 22px; bottom: 16px; display: flex; color: rgba(255, 255, 255, .85); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .8)); z-index: 2; pointer-events: none; }
.gal-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.gal-strip::-webkit-scrollbar { display: none; }
.gal-thumb { flex: 0 0 auto; width: 104px; aspect-ratio: 16/10; padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: #0b0d10; cursor: pointer; scroll-snap-align: center; opacity: .55; transition: opacity 160ms ease, border-color 160ms ease; position: relative; }
.gal-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb.on { opacity: 1; border-color: #fff; }
.gal-thumb:hover { opacity: .9; }
.gal-lb { position: fixed; inset: 0; z-index: 300; background: rgba(6, 7, 9, .97); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 16px 14px; }
.gal-lb.open { display: flex; }
.gal-lb-frame { position: relative; width: min(1500px, 96vw); flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gal-lb-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; cursor: zoom-in; transition: transform .25s ease; }
.gal-lb-frame img.zoomed { cursor: zoom-out; }
.gal-arrow.lb { width: 96px; opacity: .85; }
.gal-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity 180ms ease, transform 220ms ease; z-index: 3; }
.gal-close:hover { opacity: 1; transform: rotate(90deg); }
.gal-lb-bar { width: min(1500px, 96vw); margin-top: 8px; }
@media (max-width: 640px) { .gal-rail { --gal-h: clamp(220px, 38vh, 320px); gap: 8px; } .gal-arrow { display: none; } .gal-thumb { width: 84px; } }
/* Temporary-feed photos carry the source dealer's frame: the 16/10 tile's
   cover-fit already trims it; the 4/3 gallery frames crop it explicitly. */
.wl-crop .gal-frame img, .wl-crop .gal-thumb img { clip-path: inset(10% 0 8% 0); transform: scale(1.22) translateY(-1.2%); }
.wl-crop .gal-lb-frame img { clip-path: inset(10% 0 8% 0); }

/* deal sheet */
/* Fixed shares (Anne, 2026-10-06: switching cash, lease and finance must not resize the columns): minmax(0, ...) keeps a
   long line (a lease summary, a rate's name) from widening its column; it wraps inside it instead. */
.vdp-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 44px; }
.vdp-cols > * { min-width: 0; }
@media (max-width: 960px) { .vdp-cols { grid-template-columns: minmax(0, 1fr); } }
.deal { margin-top: 10px; }
.deal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.deal-row span { color: var(--dim); }
.deal-row b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-total { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 4px; }
.deal-total .t-label { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.deal-total .t-num { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 44px); font-variant-numeric: tabular-nums; line-height: 1; }
.protagonist { text-align: center; padding: 56px 0 20px; }
.protagonist .p-label { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.protagonist .p-num { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); margin-top: 10px; }
.protagonist .p-num small { font-size: .3em; color: var(--dim); font-weight: 300; letter-spacing: 0; font-family: var(--display); }
.protagonist .p-terms { color: var(--dim); font-size: 13.5px; margin-top: 10px; }
.leadform { max-width: 480px; margin: 30px auto 0; display: grid; gap: 10px; }
.leadform input { background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 15px; padding: 14px; outline: none; }
.leadform input:focus { border-color: var(--fg); }
.leadform .dbtn { width: 100%; }
.rail { position: sticky; top: 84px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow); }
@media (max-width: 960px) { .rail { position: static; } }
.rail .r-pay { font-family: var(--display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.rail .r-pay span { font-family: var(--display); font-weight: 300; font-size: 16px; color: var(--dim); }
.rail .r-sub { color: var(--dim); font-size: 13px; margin: 6px 0 16px; line-height: 1.5; }
.rail .r-fine { color: var(--dim); font-size: 11.5px; margin: -8px 0 16px; line-height: 1.5; }
.rail label.f-h { display: block; margin-top: 12px; }
.rail input[type=range] { width: 100%; accent-color: var(--acc); margin: 4px 0 0; }
.rail .filters { margin: 6px 0 0; }
/* Rail options read as one segmented control: square corners, shared rules, the chosen segment filled (no pills).
   A long label ("Mercedes-Benz owner · $1,000") wraps the control onto a second row instead of widening the page. */
.rail .filters { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; max-width: 100%; }
.rail .filters button { border: 0; border-right: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 8px 14px; font-size: 13px; color: var(--dim); white-space: nowrap; transition: background .15s ease, color .15s ease; }
/* When the control wraps, each row fills the width and rows are ruled like the segments; the rule at a row's end and
   under the last row tucks under the frame, so a single row looks exactly as before. */
.rail .filters button { flex: 1 1 auto; margin: 0 -1px -1px 0; border-bottom: 1px solid var(--line-strong); }
.rail .filters button:last-child { border-right: 0; }
/* A rate's name is long ("Mercedes-Benz Financial Services MY26 Incentivized Rates, including any dealer participation");
   with the columns fixed it wraps inside its button instead of widening the rail (Anne, 2026-10-06). */
.rail #rate-btns button { white-space: normal; }
.rail .filters button:hover { color: var(--fg); background: var(--bg-2); }
.rail .filters button.on { background: var(--acc); color: var(--acc-ink); }
.rail .filters button:focus-visible { outline: 1px solid var(--fg); outline-offset: -2px; }
.rail .mode { display: flex; }
.rail .filters button { padding: 7px 12px; font-size: 12.5px; }
.rail .mode { margin: 0 0 14px; }
.rail .mode button { flex: 1 1 0; text-align: center; }
.rail .where { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 6px; }
.rail .where select { background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 13.5px; font-weight: 400; padding: 8px 10px; outline: none; width: 100%; }
.rail-tools { margin-top: 18px; display: grid; gap: 10px; }
.tool-btn { display: block; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-weight: 500; font-size: 14px; padding: 13px 16px; cursor: pointer; transition: border-color .18s; }
.tool-btn:hover, .tool-btn.open { border-color: var(--fg); }
.tool-pane { border: 1px solid var(--line); border-radius: 0 0 var(--r-btn) var(--r-btn); border-top: 0; padding: 14px; margin-top: -10px; background: var(--panel); }
.tool-pane .leadform { margin: 0; max-width: none; }
.tool-fine { color: var(--dim); font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.tool-range { font-family: var(--display); font-weight: 300; font-size: 30px; margin-bottom: 4px; color: var(--fg); }
.prod-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.prod-row:last-of-type { border-bottom: 0; }
.prod-row input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--acc); }
.prod-name { font-size: 14px; font-weight: 400; }
.prod-name em { display: block; font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.prod-price { font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: var(--fg); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-price em { display: block; font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; }
.f-nap { color: var(--dim); font-size: 14px; }
.f-nap a { color: var(--fg); }

/* everything about this car */
.hl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 30px; }
.hl { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: 13.5px; line-height: 1.25; min-height: 52px; }
.hl::before { content: ''; flex: 0 0 auto; width: 10px; height: 1px; background: var(--gold); }
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec-row span { color: var(--dim); }
.spec-row b { font-weight: 400; text-align: right; }
.feat-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 36px; align-items: start; }
.feat-group { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; margin: 0; break-inside: avoid; }
.fg-name { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: -0.01em; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.feat-group ul { margin: 0; padding: 0; list-style: none; }
.feat-group li { color: var(--dim); font-size: 14.5px; line-height: 1.7; padding-left: 16px; position: relative; break-inside: avoid; overflow-wrap: anywhere; }
.feat-group li::before { content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: var(--dim); }
.feat-cols .fg-long { grid-column: span 2; }
.feat-cols .fg-long ul { columns: 2; column-gap: 28px; }
.feat-cols .fg-wide { grid-column: 1 / -1; }
.feat-cols .fg-wide ul { columns: 3; column-gap: 28px; }
@media (max-width: 860px) { .feat-cols { grid-template-columns: 1fr 1fr; } .feat-cols .fg-wide ul { columns: 2; } }
@media (max-width: 760px) { .spec-cols { grid-template-columns: 1fr; } .hl-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
@media (max-width: 560px) { .feat-cols { grid-template-columns: 1fr; } .feat-cols .fg-long, .feat-cols .fg-wide { grid-column: auto; } .feat-cols .fg-long ul, .feat-cols .fg-wide ul { columns: 1; } }
.recall-ok { border: 1px solid var(--line); border-radius: var(--r-btn); border-left: 3px solid var(--good); padding: 12px 16px; color: var(--dim); font-size: 14.5px; }
.recall-ok b { color: var(--good); font-weight: 500; }
.recall-warn { border: 1px solid var(--line); border-radius: var(--r-btn); border-left: 3px solid var(--gold); padding: 12px 16px; color: var(--dim); font-size: 14.5px; margin-bottom: 8px; }
.recall-warn b { color: var(--gold); font-weight: 500; }
.recall-list details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.recall-list summary { cursor: pointer; font-family: var(--sans); font-weight: 400; font-size: 14.5px; }
.recall-list p { color: var(--dim); font-size: 14px; line-height: 1.6; margin-top: 6px; }

/* deal contract v2 */
/* The optional down payment reads its default in place ("10% of price") in both themes. */
.profile-grid input::placeholder { color: var(--dim); opacity: 1; }
/* Ten fields share the row in lease mode at 1440, so the SRP down field trims its side padding and the placeholder its size to stay whole. Scoped to the SRP panel: the VDP's #dp-down is a range slider. */
.profile-grid #dp-down { padding-inline: 9px; }
.profile-grid #dp-down::placeholder { font-size: 14px; letter-spacing: -0.01em; }

/* Where the shopper is: ZIP field, delivery choice, resolved place. */
.zip-note { font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--dim); margin-top: 6px; min-height: 1.2em; }
.zip-note.warn { color: var(--warn); }
.rail .where { display: block; }
.rail .where input { background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 15px; font-weight: 400; padding: 9px 11px; outline: none; width: 100%; }
.rail .where input:focus, .rail .where select:focus { border-color: var(--fg); }
.rail .where select { margin-top: 8px; }
.deal-note { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--dim); padding: 10px 0 2px; }
.deal-notes { margin-top: 18px; }
.deal-compare { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 12px; margin-top: 10px; }
.deal-compare b { font-weight: 600; }
.deal-compare .dc-lead { margin-bottom: 10px; }
.deal-compare .dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deal-compare .dc-col { border: 1px solid var(--line); border-radius: var(--r-btn); padding: 10px; background: var(--bg-2); }
.deal-compare .dc-best { border-color: var(--fg); }
.deal-compare .dc-h { font-weight: 600; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.deal-compare .dc-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.deal-compare .dc-row span { color: var(--dim); }
.deal-compare .dc-zero span, .deal-compare .dc-zero b { color: var(--dim); font-weight: 400; }
.deal-compare .dc-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.deal-compare .dc-total span { color: var(--fg); }
.deal-compare .dc-sign { color: var(--dim); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }
.deal-compare .dc-note { color: var(--dim); margin-top: 10px; line-height: 1.5; }
@media (max-width: 560px) { .deal-compare .dc-grid { grid-template-columns: 1fr; } }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-btn); overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--dim); margin-top: 6px; }

/* The SRP card lights its edge on hover: the wordmark's sweep, travelling (Anne, 2026-09-23). */
.srp-card:hover { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--sheen-edge) border-box; background-size: 100% 100%, 320% 100%; animation: bbSheen 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .srp-card:hover { animation: none; } }

/* SRP deal profile: every box the same height, face, and chevron, so the row reads as one line (Anne, 2026-09-23). */
.profile-panel .profile-grid { align-items: end; }
.profile-panel .profile-grid input:not([type=range]), .profile-panel .profile-grid select { box-sizing: border-box; height: 44px; line-height: 1.2; padding: 0 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.profile-panel .profile-grid select { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.profile-panel .profile-grid input[type=number] { -moz-appearance: textfield; }
.profile-panel .profile-grid input[type=number]::-webkit-inner-spin-button, .profile-panel .profile-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.profile-panel .pp-zipnote { margin-top: 8px; min-height: 0; }
.profile-panel .pp-zipnote:empty { display: none; }
@media (min-width: 1300px) { .profile-panel .profile-grid { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); } }
@media (min-width: 1400px) { .profile-panel .profile-grid #dp-delivery-wrap { grid-column: span 2; } }