/* The redesigned vehicle page (templates/new-design/vehicle-live.html), V6 on the design canvas.
   Everything is scoped under .vp so the old page's custom.css and this file never fight.
   Phone layout below 992px: one photo that swipes, the sections in one column, and the price
   card's buttons pinned to the bottom of the screen. */

.vp {
    --vp-navy: #19284A;
    --vp-body: #4A5468;
    --vp-muted: #5B6478;
    --vp-line: #E3E6EC;
    --vp-soft: #F3F3F3;
    --vp-purple: #5B2FC9;
    --vp-purple-soft: #F4F1FC;
    --vp-green: #0F6B3E;
    --vp-good-bg: #E7F6EE;
    --vp-good: #0F6B3E;
    --vp-caution-bg: #FFF1D1;
    --vp-caution: #7A4D00;
    --vp-problem-bg: #FDE7EA;
    --vp-problem: #A3122A;
    --vp-unknown-bg: #EEF1F6;
    --vp-unknown: #33415C;
    --vp-chip-bg: #EEF1F6;
    display: block;
    background: #FFFFFF;
    color: var(--vp-navy);
    font-family: var(--ff-primary, 'Poppins', sans-serif);
    font-size: 15px;
    line-height: 1.5;
}
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
/* custom.css pads every <section> 80px top and bottom; nothing here wants it. */
.vp section { padding: 0; margin: 0; }
.vp h1, .vp h2, .vp h3, .vp p, .vp ul, .vp ol { margin: 0; padding: 0; }
.vp ul, .vp ol { list-style: none; }
.vp h1, .vp h2, .vp h3 { font-family: inherit; color: var(--vp-navy); text-transform: none; letter-spacing: normal; }
.vp a { color: var(--vp-purple); }
.vp button { font-family: inherit; }
.vp img { display: block; max-width: 100%; }
.vp .vp-icon { flex-shrink: 0; display: block; }
.vp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vp-phone-only { display: none; }

/* ------------------------------------------------------------------ photos (desktop mosaic) */

.vp-hero {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 270px 270px;
    gap: 2px;
    background: var(--vp-line);
    border-bottom: 1px solid var(--vp-line);
    max-width: 1920px;
    margin: 0 auto;
}
.vp-carousel { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; background: #FFFFFF; }
.vp-video, .vp-tile--2 { grid-column: 2 / 4; grid-row: 1; }
.vp-tile--3 { grid-column: 2; grid-row: 2; }
.vp-tile--4 { grid-column: 3; grid-row: 2; }
.vp-hero--n0:not(.vp-hero--video) .vp-carousel,
.vp-hero--n1:not(.vp-hero--video) .vp-carousel { grid-column: 1 / 4; }
.vp-hero--n0 .vp-video, .vp-hero--n1 .vp-video, .vp-hero--n2 .vp-video, .vp-hero--n2 .vp-tile--2 { grid-row: 1 / 3; }
.vp-hero--n3 .vp-tile--3 { grid-column: 2 / 4; }

.vp-track { display: flex; width: 100%; height: 100%; overflow: hidden; }
.vp-slide, .vp-tile {
    flex: 0 0 100%;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    cursor: zoom-in;
    overflow: hidden;
}
.vp-slide img, .vp-tile img { width: 100%; height: 100%; object-fit: cover; }
.vp-slide--empty { cursor: default; }
.vp-slide--empty img { object-fit: contain; }

/* custom.css places the old page's .vehicle_controls bar absolutely over its slider; undo that here. */
.vp .vp-video { position: relative; top: auto; left: auto; width: auto; z-index: auto; overflow: hidden; background: var(--vp-navy); }
.vp-video__link {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #FFFFFF; text-decoration: none;
}
.vp a.vp-video__link, .vp a.vp-video__link:hover { color: #FFFFFF; }
.vp-video__poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-video__link::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12, 16, 28, 0.42); }
.vp-video__play, .vp-video__title, .vp-video__sub { position: relative; z-index: 2; }
.vp-video__play {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-left: 4px;
    background: #FFFFFF; color: var(--vp-navy); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.vp-video__link:hover .vp-video__play { transform: scale(1.06); }
.vp-video__title { font-size: 16px; line-height: 22px; font-weight: 600; }
.vp-video__sub { font-size: 13px; line-height: 18px; color: #E3E6EC; }
.vp-video__pill { display: none; }

.vp-all {
    grid-column: 1; grid-row: 2;
    align-self: end; justify-self: start;
    margin: 0 0 24px 24px;
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 16px;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, 0.96); color: var(--vp-navy);
    font-size: 14px; font-weight: 600;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.2);
    cursor: pointer;
}
.vp-hero--n0 .vp-all, .vp-hero--n1 .vp-all { grid-row: 1 / 3; }
.vp-counter, .vp-dots { display: none; }
.vp-lg { display: none; }

/* ------------------------------------------------------------------ all photos, grouped (canvas: "V6 · Show all photos") */

/* Above everything the site pins (HubSpot's campaign banner is z-index 9999, the Feedback tab 99999), and the
   viewer opened from it above that in turn. */
.vp-gallery {
    position: fixed; inset: 0; z-index: 100000;
    overflow-y: auto; overscroll-behavior: contain;
    background: #FFFFFF; color: var(--vp-navy);
    --vp-gallery-gutter: max(24px, calc((100% - 1280px) / 2));
}
.vp-gallery[hidden] { display: none; }
.vp-gallery:focus { outline: none; }
body.vp-gallery-on .lg-backdrop { z-index: 100001; }
body.vp-gallery-on .lg-outer { z-index: 100002; }

.vp-gallery__top {
    position: sticky; top: 0; z-index: 2;
    background: #FFFFFF; border-bottom: 1px solid var(--vp-line);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
}
.vp-gallery__bar { height: 76px; padding: 0 var(--vp-gallery-gutter); display: flex; align-items: center; gap: 20px; }
.vp .vp-gallery__back {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 14px 0 8px;
    border: 1px solid var(--vp-line); border-radius: 10px; background: #FFFFFF; color: var(--vp-navy);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.vp-gallery__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vp-gallery__title b { font-size: 17px; line-height: 24px; font-weight: 600; }
.vp-gallery__title > span { font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-gallery__title b, .vp-gallery__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-gallery__deal { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.vp-gallery__deal:empty { display: none; }
.vp-gallery__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-right: 10px; }
.vp-gallery__price b { font-size: 20px; line-height: 26px; font-weight: 700; }
.vp-gallery__price span { font-size: 12px; line-height: 16px; color: var(--vp-body); white-space: nowrap; }
.vp .vp-gallery__deal .vp-btn { width: auto; height: 44px; padding: 0 18px; font-size: 15px; }

.vp-gallery__tabs {
    position: relative; height: 64px; padding: 0 var(--vp-gallery-gutter);
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid var(--vp-line);
    overflow-x: auto; scrollbar-width: none;
}
.vp-gallery__tabs::-webkit-scrollbar { display: none; }
.vp .vp-gallery__tab {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px;
    border: 1.5px solid var(--vp-line); border-radius: 999px; background: #FFFFFF; color: var(--vp-navy);
    font-size: 14px; line-height: 1; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.vp .vp-gallery__tab span { opacity: 0.7; font-weight: 500; }
.vp .vp-gallery__tab:hover { border-color: var(--vp-navy); color: var(--vp-navy); }
.vp .vp-gallery__tab.is-on { background: var(--vp-navy); border-color: var(--vp-navy); color: #FFFFFF; }

.vp-gallery__body { padding: 32px var(--vp-gallery-gutter) 80px; display: flex; flex-direction: column; gap: 44px; }
.vp .vp-gallery__section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 152px; }
.vp .vp-gallery__section h2 { display: flex; align-items: baseline; gap: 10px; font-size: 22px; line-height: 30px; font-weight: 700; }
.vp-gallery__section h2 span { font-size: 15px; font-weight: 500; color: var(--vp-muted); }
/* Every tile is a 4:3 photo; the test drive and the photo beside it take two columns and two rows. */
.vp-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vp .vp-gallery__tile, .vp .vp-gallery__video {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
    padding: 0; border: 1px solid var(--vp-line); border-radius: 12px; overflow: hidden;
    background: #FFFFFF; cursor: zoom-in;
}
.vp .vp-gallery__tile--big, .vp .vp-gallery__video { grid-column: span 2; grid-row: span 2; }
.vp-gallery__tile img, .vp-gallery__video img { width: 100%; height: 100%; object-fit: cover; }
.vp-gallery__label {
    position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
    padding: 3px 10px; border-radius: 999px; background: rgba(25, 40, 74, 0.82); color: #FFFFFF;
    font-size: 12px; line-height: 18px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* isolation keeps the play button and title's z-index inside the tile. Without it they stacked against the sticky
   tab bar and, coming later in the page, painted over it while the grid scrolled (Krish, 2026-10-06). */
.vp .vp-gallery__video { cursor: pointer; color: #FFFFFF; isolation: isolate; }
.vp-gallery__video img { position: absolute; inset: 0; }
.vp-gallery__video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12, 16, 28, 0.45); }
.vp-gallery__video > span { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; }
.vp-gallery__play {
    top: calc(50% - 62px); width: 76px; height: 76px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-left: 5px;
    background: #FFFFFF; color: var(--vp-navy); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.vp-gallery__video-title { top: calc(50% + 26px); font-size: 20px; line-height: 26px; font-weight: 600; }
.vp-gallery__video-sub { top: calc(50% + 56px); font-size: 14px; line-height: 20px; color: #E3E6EC; }

/* ------------------------------------------------------------------ the two columns */

.vp-wrap { max-width: 1328px; margin: 0 auto; padding: 0 24px 80px; }
.vp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.vp-left { display: flex; flex-direction: column; gap: 48px; padding-top: 24px; min-width: 0; }
.vp-right { position: relative; z-index: 3; margin-top: -120px; display: flex; flex-direction: column; gap: 20px; }

/* ------------------------------------------------------------------ title block */

.vp-head { display: flex; flex-direction: column; gap: 14px; }
.vp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--vp-muted); }
.vp-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.vp-crumbs a { color: var(--vp-muted); text-decoration: none; }
.vp-crumbs a:hover { color: var(--vp-navy); text-decoration: underline; }
.vp-crumbs [aria-current] { color: var(--vp-navy); font-weight: 600; }
.vp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vp-chips:empty { display: none; }
.vp-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
    background: var(--vp-unknown-bg); color: var(--vp-unknown);
}
.vp-chip--good { background: var(--vp-good-bg); color: var(--vp-good); }
.vp-chip--caution { background: var(--vp-caution-bg); color: var(--vp-caution); }
.vp-chip--problem { background: var(--vp-problem-bg); color: var(--vp-problem); }
.vp .vp-reserve {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 8px; border-radius: 999px;
    background: var(--vp-green); color: #FFFFFF;
    font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none; border: 0;
}
.vp .vp-status {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; line-height: 18px; font-weight: 600; position: static;
}
.vp .vp-status--win { background: var(--vp-good-bg); color: var(--vp-good); }
.vp .vp-status--lose { background: var(--vp-problem-bg); color: var(--vp-problem); }
.vp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.vp .vp-title-row h1 { font-size: 32px; line-height: 40px; font-weight: 600; margin: 0; }
.vp-title-actions { display: flex; gap: 10px; flex-shrink: 0; }
.vp-iconbtn, .vp .share_button .share_offer_but {
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--vp-line) !important; border-radius: 50% !important;
    background: #FFFFFF !important; color: var(--vp-navy) !important;
    cursor: pointer;
}
.vp-iconbtn:hover, .vp .share_button .share_offer_but:hover { border-color: var(--vp-navy) !important; }
.vp-iconbtn[aria-pressed="true"] { color: #D92D20 !important; }
.vp-iconbtn[aria-pressed="true"] svg { fill: currentColor; }
.vp .share_button { position: relative; top: auto; right: auto; z-index: 20; display: block; }
.vp .share_button .all_share_offer_btn.dropdown-menu {
    position: absolute; top: 52px; right: 0; left: auto; margin: 0;
    border: 1px solid var(--vp-line); border-radius: 12px; padding: 6px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}
.vp .share_button .all_share_offer_btn.dropdown-menu::before,
.vp .share_button .all_share_offer_btn.dropdown-menu::after { display: none; }
.vp .share_button .all_share_offer_btn .dropdown-item { justify-content: flex-start; border-radius: 8px; }
.vp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 15px; line-height: 22px; color: var(--vp-body); }
.vp-facts li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vp-facts .vp-icon { opacity: 0.8; }
.vp .vp-pill-link {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 14px 0 16px;
    border: 1px solid var(--vp-line); border-radius: 999px;
    color: var(--vp-navy); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.vp .vp-pill-link:hover { border-color: var(--vp-navy); }

/* ------------------------------------------------------------------ cards and buttons */

.vp-card { padding: 24px; border: 1px solid var(--vp-line); border-radius: 16px; background: #FFFFFF; }
.vp .vp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 52px; padding: 0 20px;
    border: 0; border-radius: 12px;
    background: var(--vp-purple); color: #FFFFFF;
    font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
    cursor: pointer;
}
.vp .vp-btn:hover { filter: brightness(1.08); color: #FFFFFF; }
.vp .vp-btn--secondary { background: #FFFFFF; color: var(--vp-navy); border: 1.5px solid var(--vp-navy); }
.vp .vp-btn--secondary:hover { color: var(--vp-navy); background: #F7F8FA; filter: none; }
.vp .vp-btn--outline { background: #FFFFFF; color: var(--vp-purple); border: 1.5px solid var(--vp-purple); height: 44px; font-size: 15px; }
.vp .vp-btn--outline:hover { color: var(--vp-purple); background: #FFFFFF; filter: none; }
.vp .vp-btn--small { height: 44px; font-size: 15px; }

/* ------------------------------------------------------------------ price card */

.vp-price {
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 32px rgba(16, 24, 40, 0.10);
}
.vp-price__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vp-time {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--vp-navy); color: #FFFFFF;
    font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.vp-time span { color: inherit; }
.vp-price__when { font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-label { display: block; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-muted); }
.vp-price__buynow { display: flex; flex-direction: column; gap: 2px; }
.vp-price__big { font-size: 36px; line-height: 44px; font-weight: 600; color: var(--vp-navy); }
.vp-price__sub { font-size: 14px; line-height: 20px; color: var(--vp-body); }
.vp-price__offer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 10px; background: var(--vp-soft);
    font-size: 14px; line-height: 20px; color: var(--vp-body);
}
.vp-price__offer b { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--vp-navy); }
/* bidding-vehicle-new.js colors the offer green for the leader and red for everyone else, logged-out
   visitors included. The Winning / Outbid chips already say it, so red stays navy here. */
.vp .prebidtextcurrentbidpopup.text-danger { color: var(--vp-navy) !important; }
.vp .prebidtextcurrentbidpopup.text-success { color: var(--vp-good) !important; }
.vp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-stats:empty { display: none; }
.vp-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.vp-stats b { font-weight: 600; color: var(--vp-navy); }
.vp-actions__buttons { display: flex; flex-direction: column; gap: 10px; }
.vp-actions__buttons #buy_now_btn { order: -1; }
/* The shared "Licensed Dealers Only" notice (templates/common/dealer-only-notice.html) is a
   Bootstrap alert; its utility margins are !important, so the overrides here are too. */
.vp .vp-dealer-only #dealer_only_notice {
    margin: 0 !important; padding: 14px 16px; border: 0; border-radius: 10px;
    background: var(--vp-caution-bg); color: var(--vp-caution);
    font-size: 14px; line-height: 21px;
}
.vp .vp-dealer-only #dealer_only_notice b { font-size: 15px; font-weight: 600; color: var(--vp-caution); }
.vp .vp-dealer-only #dealer_only_notice p { margin-top: 4px !important; color: var(--vp-body); }
.vp .vp-dealer-only #dealer_only_notice .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 44px; margin-top: 12px !important; padding: 0 20px;
    border: 1.5px solid var(--vp-navy); border-radius: 12px;
    background: #FFFFFF; color: var(--vp-navy);
    font-size: 15px; font-weight: 600; line-height: 1;
}
.vp .vp-dealer-only #dealer_only_notice .btn:hover { background: #F7F8FA; }
.vp-price__note { font-size: 13px; line-height: 18px; color: var(--vp-body); text-align: center; }
.vp-price__note--left { text-align: left; font-size: 14px; line-height: 21px; }
.vp-state {
    align-self: flex-start;
    padding: 4px 12px; border-radius: 999px;
    background: var(--vp-unknown-bg); color: var(--vp-unknown);
    font-size: 13px; line-height: 18px; font-weight: 600;
}
.vp-state--pending { background: var(--vp-caution-bg); color: var(--vp-caution); }

/* A sold car (the V6 sold boards): the listing card's SOLD badge, the card's head, Where it landed. */
.vp-sold-badge {
    align-self: flex-start; display: inline-flex; align-items: center;
    padding: 5px 10px; border-radius: 999px;
    background: #FFC83D; color: var(--vp-navy);
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.vp-sold-head { display: flex; flex-direction: column; gap: 8px; }
.vp-sold-head__when { font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-landed { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--vp-purple-soft); }
.vp .vp-landed__title { display: flex; align-items: center; gap: 8px; color: var(--vp-purple); font-size: 15px; line-height: 21px; font-weight: 600; }
.vp-landed__delta {
    align-self: flex-start; padding: 4px 10px; border-radius: 999px;
    background: var(--vp-good-bg); color: var(--vp-good);
    font-size: 13px; line-height: 18px; font-weight: 600;
}
.vp-landed__delta--above { background: var(--vp-unknown-bg); color: var(--vp-unknown); }
.vp-landed__bar { position: relative; height: 46px; }
.vp-landed__price { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--vp-navy); white-space: nowrap; }
.vp-landed__track { position: absolute; top: 28px; left: 0; right: 0; height: 8px; border-radius: 999px; background: #DED5F6; }
.vp-landed__avg { position: absolute; top: 24px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--vp-purple); }
.vp-landed__marker {
    position: absolute; top: 23px; width: 18px; height: 18px; margin-left: -9px;
    border: 3px solid #FFFFFF; border-radius: 50%; background: var(--vp-navy);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
}
.vp-landed__scale { position: relative; height: 18px; font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-landed__scale > span { position: absolute; top: 0; white-space: nowrap; }
.vp-landed__scale > span:first-child { left: 0; }
.vp-landed__scale > span:last-child { right: 0; }
.vp-landed__scale .vp-landed__avg-label { transform: translateX(-50%); }
.vp-landed__scale b { font-weight: 600; color: var(--vp-navy); }
.vp-landed__note { font-size: 13px; line-height: 19px; color: var(--vp-body); }

/* Alert me on the next one (static/js/vehicle-alert.js sets data-state; the canvas board VehicleV6SoldAlert). */
.vp-alert { display: flex; flex-direction: column; gap: 10px; }
.vp-alert__busy, .vp-alert__box, .vp-alert__removed, .vp-alert__error, .vp-alert__toast { display: none; }
/* The phone bar's "Alert on" is a .vp-btn, whose `.vp .vp-btn { display: flex }` would show it everywhere. */
.vp .vp-alert .vp-alert__pill { display: none; }
.vp-alert[data-state="saving"] .vp-alert__label { display: none; }
.vp-alert[data-state="saving"] .vp-alert__busy { display: inline; }
.vp .vp-alert[data-state="saving"] .vp-alert__tap { background: #8C74D8; pointer-events: none; }
.vp-alert[data-state="on"] .vp-alert__tap, .vp-alert[data-state="exists"] .vp-alert__tap { display: none; }
.vp-alert[data-state="on"] .vp-alert__box--on, .vp-alert[data-state="exists"] .vp-alert__box--exists { display: flex; }
.vp-alert[data-state="on"] .vp-alert__pitch, .vp-alert[data-state="exists"] .vp-alert__pitch,
.vp-alert[data-state="removed"] .vp-alert__pitch, .vp-alert[data-state="error"] .vp-alert__pitch { display: none; }
.vp-alert[data-state="removed"] .vp-alert__removed { display: block; }
.vp-alert[data-state="error"] .vp-alert__error { display: flex; }
.vp-alert__box {
    gap: 10px; padding: 14px 16px; border: 1px solid #BFE5CF; border-radius: 12px; background: var(--vp-good-bg);
    font-size: 14px; line-height: 20px; color: var(--vp-body);
}
.vp-alert__box b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--vp-navy); }
.vp-alert__tick {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: var(--vp-good); color: #FFFFFF;
}
.vp .vp-alert__links { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--vp-muted); }
.vp .vp-alert__links a, .vp .vp-alert__links button, .vp .vp-alert__toast button {
    padding: 0; border: 0; background: none; color: var(--vp-purple);
    font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.vp-alert__error {
    gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    background: var(--vp-problem-bg); color: var(--vp-problem); font-size: 14px; line-height: 20px; font-weight: 500;
}
/* The sign-up and log-in pop-ups, when the alert opened them (registration-popup.html, login-popup.html). */
/* A white card above the form, as wide as Clerk's: when Clerk owns the form the modal's header is hidden
   and its background is transparent (custom-elements.css, .clerk-owns-form), so the card is its own surface. */
.vp-alert-reason {
    display: flex; flex-direction: column; gap: 4px; max-width: 400px; margin: 0 auto 12px; padding: 16px 20px;
    border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); text-align: center;
}
.vp-alert-reason b { font-size: 17px; line-height: 24px; font-weight: 600; color: #19284A; }
.vp-alert-reason b span { color: inherit; }
.vp-alert-reason > span { font-size: 14px; line-height: 21px; color: #4A5468; }
.vp-alert-saved {
    display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; padding: 12px 14px;
    border: 1px solid #BFE5CF; border-radius: 12px; background: #E7F6EE; color: #0F6B3E; font-size: 14px; line-height: 20px;
}
.vp-alert-saved b { font-weight: 600; color: #19284A; }
.vp-alert-reason[hidden], .vp-alert-saved[hidden] { display: none; }

.vp-check { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--vp-purple-soft); }
.vp-check__q { display: flex; align-items: center; gap: 8px; color: var(--vp-purple); font-size: 15px; line-height: 21px; font-weight: 600; }
.vp-check__a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vp-check__a b { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--vp-navy); }
.vp-check__a span { font-size: 13px; line-height: 18px; color: var(--vp-body); }

/* The old quote box's classes stay for its scripts; its custom.css frame does not. */
.vp .vp-delivery.transportationquote {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 16px 0 0; border: 0; border-top: 1px solid #EEF0F4; border-radius: 0;
    background: transparent; box-shadow: none; color: inherit;
}
.vp .vp-delivery .delivery_address { padding: 0; border: 0; }
.vp-delivery .quote_loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.85); font-size: 14px;
}
.vp-delivery__head { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 21px; }
.vp-delivery__head b { font-weight: 600; }
.vp-delivery__icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vp-chip-bg); color: var(--vp-navy);
}
.vp-delivery .delivery_address > div > p { font-size: 14px; line-height: 21px; color: var(--vp-body); margin-bottom: 10px; }
.vp-delivery__quote { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vp-delivery__where { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-delivery__quote b { font-size: 26px; line-height: 32px; font-weight: 600; color: var(--vp-navy); white-space: nowrap; }
.vp .vp-delivery .delivery_change { padding: 10px 0 0; border-top: 1px solid #EEF0F4; }
.vp .delivery_change a { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vp-purple); text-decoration: none; }
.vp .vp-delivery .delivery_newAddress { flex-direction: column; gap: 8px; padding: 0; border: 0; }
.vp .vp-delivery .delivery_newAddress[style*="block"] { display: flex !important; }
.vp-delivery__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vp-navy); }

/* ------------------------------------------------------------------ trust and how it works */

.vp-trust { display: flex; flex-direction: column; gap: 14px; }
.vp-trust__row { display: flex; align-items: flex-start; gap: 12px; }
.vp-trust__icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vp-good-bg); color: var(--vp-green);
}
.vp-trust__row > div { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.vp-trust__row b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vp-navy); }
.vp-trust__row p { font-size: 13px; line-height: 19px; color: var(--vp-body); }
.vp-trust__row a { font-weight: 600; white-space: nowrap; }

.vp-how { padding: 24px; border-radius: 16px; background: var(--vp-soft); display: flex; flex-direction: column; gap: 16px; }
.vp .vp-how h2 { font-size: 17px; line-height: 24px; font-weight: 600; }
.vp-how ol { display: flex; flex-direction: column; gap: 14px; }
.vp-how li { display: flex; align-items: flex-start; gap: 12px; }
.vp-how li > span {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--vp-purple); color: #FFFFFF; font-size: 13px; font-weight: 600;
}
.vp-how li p { padding-top: 2px; font-size: 14px; line-height: 21px; color: var(--vp-navy); }
.vp-how li b { display: block; font-weight: 600; }
.vp-how__quote { padding-top: 14px; border-top: 1px solid #DCDFE6; font-size: 13px; line-height: 19px; color: var(--vp-body); }

/* ------------------------------------------------------------------ what's wrong with it */

.vp-inspection { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 90px; }
.vp-inspection__lead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vp-navy); }
.vp-asis { padding: 6px 12px; border-radius: 999px; background: var(--vp-chip-bg); color: var(--vp-unknown); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.vp .vp-inspection h2 { font-size: 28px; line-height: 36px; font-weight: 600; margin-top: -12px; }
.vp-inspection__quote { font-size: 15px; line-height: 23px; color: var(--vp-body); margin-top: -12px; }
.vp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.vp-group { padding: 16px 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--vp-unknown-bg); color: var(--vp-unknown); }
.vp-group--problem { background: var(--vp-problem-bg); color: var(--vp-problem); }
.vp-group--caution { background: var(--vp-caution-bg); color: var(--vp-caution); }
.vp-group--good { background: var(--vp-good-bg); color: var(--vp-good); }
.vp-group__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vp .vp-group__head h3, .vp-group__head span { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; }
.vp-group ul { display: flex; flex-direction: column; gap: 8px; }
.vp-group li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: var(--vp-navy); }
.vp-group li .vp-icon { margin-top: 4px; color: inherit; }
.vp-group--problem li .vp-icon { color: var(--vp-problem); }
.vp-group--caution li .vp-icon { color: var(--vp-caution); }
.vp-group--good li .vp-icon { color: var(--vp-good); }
.vp-group li small { display: block; font-size: 13px; line-height: 19px; color: var(--vp-body); overflow-wrap: anywhere; }

.vp-tires-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 24px 32px; }
.vp-tires-card__text { width: 240px; display: flex; flex-direction: column; gap: 14px; }
.vp .vp-tires-card h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
.vp-tires-card p { font-size: 14px; line-height: 21px; color: var(--vp-body); }
.vp-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 16px; color: var(--vp-body); }
.vp-legend li { display: flex; align-items: center; gap: 6px; }
.vp-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--vp-unknown); }
.vp-swatch--problem { background: var(--vp-problem); }
.vp-swatch--caution { background: var(--vp-caution); }
.vp-swatch--good { background: var(--vp-good); }
.vp-tires {
    flex-grow: 1;
    display: grid; justify-content: center;
    grid-template-columns: 110px 120px 110px; grid-template-rows: 22px 104px 104px;
    column-gap: 18px;
}
.vp-tires__front { grid-column: 2; grid-row: 1; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-muted); }
.vp-car { grid-column: 2; grid-row: 2 / 4; position: relative; border: 2px solid #C9CED8; border-radius: 36px; background: #FAFBFC; }
.vp-car__glass { position: absolute; left: 13px; right: 13px; top: 46px; height: 30px; border-radius: 14px 14px 6px 6px; background: var(--vp-line); }
.vp-wheel { position: absolute; width: 16px; height: 40px; border-radius: 5px; background: var(--vp-navy); }
.vp-wheel--df { left: -10px; top: 26px; }
.vp-wheel--pf { right: -10px; top: 26px; }
.vp-wheel--dr { left: -10px; bottom: 26px; }
.vp-wheel--pr { right: -10px; bottom: 26px; }
.vp-tire { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 14px; color: var(--vp-muted); white-space: nowrap; }
.vp-tire--df, .vp-tire--dr { grid-column: 1; align-items: flex-end; text-align: right; }
.vp-tire--pf, .vp-tire--pr { grid-column: 3; align-items: flex-start; }
.vp-tire--df, .vp-tire--pf { grid-row: 2; align-self: start; padding-top: 28px; }
.vp-tire--dr, .vp-tire--pr { grid-row: 3; align-self: end; padding-bottom: 28px; }
.vp-tone { padding: 2px 8px; border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 600; background: var(--vp-unknown-bg); color: var(--vp-unknown); }
.vp-tone--problem { background: var(--vp-problem-bg); color: var(--vp-problem); }
.vp-tone--caution { background: var(--vp-caution-bg); color: var(--vp-caution); }
.vp-tone--good { background: var(--vp-good-bg); color: var(--vp-good); }

/* ------------------------------------------------------------------ vehicle details */

.vp-details { display: flex; flex-direction: column; gap: 16px; }
.vp .vp-details h2 { font-size: 26px; line-height: 34px; font-weight: 600; }
.vp-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp .vp-spec {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 14px;
    border: 1px solid var(--vp-line); border-radius: 12px; background: #FFFFFF;
    color: var(--vp-navy); text-align: left;
}
.vp-spec__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vp-chip-bg); color: var(--vp-navy);
}
.vp-spec__text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 15px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.vp-spec__text small { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-muted); }
.vp .vp-spec--id { grid-column: span 2; cursor: pointer; font: inherit; }
.vp .vp-spec--id:hover { border-color: var(--vp-navy); }
.vp-spec--id .vp-spec__text > span { font-size: 14px; letter-spacing: 0.01em; }
.vp-spec__copy { flex-shrink: 0; color: var(--vp-muted); display: flex; }
.vp-spec--id.is-copied .vp-spec__copy { color: var(--vp-green); }

.vp-good { padding: 20px 24px; border-radius: 16px; background: var(--vp-soft); display: flex; flex-direction: column; gap: 12px; }
.vp .vp-good h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
.vp-good__point { display: flex; align-items: flex-start; gap: 12px; color: var(--vp-navy); }
.vp-good__point .vp-icon { margin-top: 1px; }
.vp-good__point p { font-size: 14px; line-height: 21px; color: var(--vp-body); }

/* ------------------------------------------------------------------ similar vehicles */

.vp .vp-similar { margin-top: 64px; padding: 0; background: transparent; }
.vp-similar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vp .vp-similar__head h2 { font-size: 26px; line-height: 34px; font-weight: 600; }
.vp-similar__head a { font-size: 15px; font-weight: 600; text-decoration: none; }

/* A listing card's title keeps the card's navy: `.vp a` above would paint it purple. */
.vp .lc-link { color: inherit; }

/* A sold car's bands (the same model for sale, its other sales) and the related pages. */
.vp .vp-band { margin-top: 64px; }
.vp-band__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.vp-related { margin-top: 56px; display: flex; flex-direction: column; gap: 14px; }
.vp .vp-related h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.vp-related ul { display: flex; flex-wrap: wrap; gap: 8px; }
.vp .vp-related a {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 16px;
    border: 1px solid var(--vp-line); border-radius: 999px;
    color: var(--vp-navy); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.vp .vp-related a:hover { border-color: var(--vp-navy); }

/* ================================================================== phone */

@media (max-width: 991.98px) {
    .vp-desktop-only { display: none; }
    .vp-phone-only { display: revert; }

    /* One photo that swipes like Instagram (Krish 10-05); under it one line: Test drive, the dots, All photos. */
    .vp-hero {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 58px;
        gap: 0 8px;
        background: #FFFFFF;
    }
    .vp-carousel { grid-column: 1 / 4 !important; grid-row: 1 !important; aspect-ratio: 4 / 3; max-height: 70vh; }
    .vp-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .vp-track::-webkit-scrollbar { display: none; }
    .vp-slide { scroll-snap-align: start; scroll-snap-stop: always; cursor: pointer; }
    .vp-tile { display: none; }
    .vp-counter {
        position: absolute; top: 12px; right: 12px; display: block;
        padding: 4px 10px; border-radius: 999px; background: rgba(25, 40, 74, 0.82);
        color: #FFFFFF; font-size: 12px; line-height: 16px; font-weight: 600;
    }
    .vp-hero-badge { position: absolute; top: 12px; left: 12px; }
    .vp .vp-video { grid-column: 1 !important; grid-row: 2 !important; align-self: center; margin-left: 12px; position: static; overflow: visible; background: transparent; }
    .vp-video__link {
        position: static; flex-direction: row; gap: 0;
    }
    .vp .vp-video__link::before, .vp .vp-video__poster, .vp .vp-video__play, .vp .vp-video__title, .vp .vp-video__sub { display: none; }
    .vp-video__pill {
        display: flex; align-items: center; gap: 6px;
        height: 38px; padding: 0 13px 0 11px; border-radius: 999px;
        background: var(--vp-navy); color: #FFFFFF;
        font-size: 14px; font-weight: 600; white-space: nowrap;
    }
    .vp-dots { grid-column: 2; grid-row: 2; justify-self: center; align-self: center; display: flex; align-items: center; gap: 5px; }
    .vp-dots span { width: 6px; height: 6px; border-radius: 50%; background: #C9CED8; transition: transform 0.15s ease; }
    .vp-dots span.is-on { width: 7px; height: 7px; background: var(--vp-navy); }
    .vp-dots span.is-small { transform: scale(0.8); }
    .vp-dots span.is-tiny { transform: scale(0.6); }
    .vp-all {
        grid-column: 3 !important; grid-row: 2 !important;
        align-self: center; justify-self: end; margin: 0 12px 0 0;
        height: 38px; padding: 0 13px 0 11px; border-radius: 999px;
        border: 1.5px solid var(--vp-line); background: #FFFFFF; box-shadow: none; white-space: nowrap;
    }

    /* One column in the design's phone order. */
    .vp-wrap { padding: 0 16px 40px; }
    .vp-cols { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-top: 16px; }
    .vp-left, .vp-right { display: contents; }
    .vp-head { order: 1; gap: 10px; }
    .vp-price { order: 2; }
    .vp-trust { order: 3; }
    .vp-inspection { order: 4; }
    .vp-details { order: 5; }
    .vp-how { order: 6; }
    .vp-crumbs { display: none; }
    .vp-title-row { gap: 12px; }
    .vp .vp-title-row h1 { font-size: 22px; line-height: 30px; }
    .vp-title-actions { gap: 8px; }
    .vp-facts { font-size: 14px; line-height: 21px; }
    .vp-price { padding: 18px; gap: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.06); }
    .vp-price__big { font-size: 32px; line-height: 40px; }

    /* The price card's buttons become the bar pinned to the bottom of the screen. */
    .vp-actions {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: flex; align-items: center; gap: 8px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #FFFFFF; border-top: 1px solid var(--vp-line);
        box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.10);
    }
    .vp-actions__summary { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 16px; color: var(--vp-body); white-space: nowrap; }
    .vp-actions__summary b { font-weight: 600; color: var(--vp-navy); }
    .vp-actions__summary .vp-actions__price { font-size: 20px; line-height: 26px; }
    .vp-actions__buttons { flex-direction: row; gap: 8px; flex-shrink: 0; }
    .vp-actions__buttons #buy_now_btn { order: 0; }
    .vp .vp-actions .vp-btn { width: auto; height: 48px; padding: 0 14px; font-size: 15px; }
    body:has(.vp--with-bar) { padding-bottom: 76px; }

    .vp .vp-inspection h2 { font-size: 24px; line-height: 32px; }
    .vp-inspection__quote { font-size: 14px; line-height: 21px; }
    .vp-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vp-group { padding: 12px 14px; gap: 8px; }
    .vp-group ul { gap: 4px; }
    .vp-group li { font-size: 14px; line-height: 21px; }
    .vp-tires-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
    .vp-tires-card__text { width: auto; }
    .vp-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; order: 2; }
    .vp-tires { grid-template-columns: 96px 104px 96px; grid-template-rows: 22px 92px 92px; column-gap: 14px; }

    .vp .vp-details h2 { font-size: 22px; line-height: 30px; }
    .vp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .vp .vp-spec { gap: 10px; padding: 10px 12px; }
    .vp-spec__icon { width: 34px; height: 34px; }
    .vp-spec__text { font-size: 14px; }
    /* An odd tile left alone before the full-width VIN spans its row too. */
    .vp .vp-spec:nth-child(odd):nth-last-child(2), .vp .vp-spec:nth-child(odd):last-child { grid-column: span 2; }
    .vp-good { padding: 18px 20px; }

    .vp .vp-similar { margin-top: 40px; }
    .vp .vp-similar__head h2 { font-size: 22px; line-height: 30px; }
    .vp-similar__head a { font-size: 14px; }
    /* The sold bands swipe, one card and a bit of the next showing. */
    .vp .vp-band { margin-top: 40px; }
    .vp-band__row {
        display: flex; gap: 12px; margin-right: -16px; padding-right: 16px;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .vp-band__row::-webkit-scrollbar { display: none; }
    .vp-band__row > * { flex: 0 0 272px; scroll-snap-align: start; }
    .vp-related { margin-top: 40px; }
    .vp .vp-related h2 { font-size: 18px; }
    .vp .vp-actions--sold .vp-btn { font-size: 14px; }
    /* The bar's button becomes a green "Alert on" (a link to the saved searches) once it's on. */
    .vp .vp-alert[data-state="on"] .vp-alert__pill, .vp .vp-alert[data-state="exists"] .vp-alert__pill { display: flex; }
    .vp .vp-alert__pill { background: var(--vp-good-bg); color: var(--vp-good); border: 1.5px solid var(--vp-good); }
    .vp .vp-alert__pill, .vp .vp-alert__pill:hover { color: var(--vp-good); filter: none; cursor: default; }
    .vp-alert__toast.is-shown {
        position: fixed; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 1031;
        display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px;
        background: var(--vp-navy); color: #FFFFFF; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.30);
        font-size: 14px; line-height: 20px;
    }
    .vp-alert__toast .vp-icon { color: #6EE7A8; margin-top: 1px; }
    .vp-alert__toast p { flex: 1; }
    .vp .vp-alert__toast button { color: #C9B8FF; }

    /* All photos: two across, and the buttons in a bar along the bottom as on the listing. */
    .vp-gallery { --vp-gallery-gutter: 16px; }
    .vp-gallery__bar { height: 60px; padding: 0 8px; gap: 4px; }
    .vp .vp-gallery__back { width: 44px; padding: 0; justify-content: center; border: 0; }
    .vp-gallery__title b { font-size: 16px; line-height: 22px; }
    .vp-gallery__title > span { font-size: 12px; line-height: 16px; }
    .vp-gallery__deal {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
        gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #FFFFFF; border-top: 1px solid var(--vp-line);
        box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.10);
    }
    .vp-gallery__price { flex: 1 1 auto; min-width: 0; align-items: flex-start; margin-right: 0; }
    .vp .vp-gallery__deal .vp-btn { height: 48px; padding: 0 14px; }
    .vp-gallery__tabs { height: 54px; gap: 6px; }
    .vp .vp-gallery__tab { height: 34px; padding: 0 12px; font-size: 13px; gap: 5px; }
    .vp-gallery__body { padding-top: 16px; padding-bottom: 104px; gap: 28px; }
    .vp .vp-gallery__section { gap: 12px; scroll-margin-top: 124px; }
    .vp .vp-gallery__section h2 { gap: 8px; font-size: 18px; line-height: 26px; }
    .vp-gallery__section h2 span { font-size: 13px; }
    .vp-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .vp .vp-gallery__tile, .vp .vp-gallery__video { border-radius: 10px; }
    .vp-gallery__label { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; font-size: 11px; line-height: 16px; }
    .vp-gallery__play { top: calc(50% - 50px); width: 60px; height: 60px; padding-left: 4px; }
    .vp-gallery__video-title { top: calc(50% + 18px); font-size: 16px; line-height: 22px; }
    .vp-gallery__video-sub { display: none; }
}

/* ------------------------------------------------------------------ Make an offer pop-up
   vehicle-live.html's #preBidModalpopup (V6 canvas boards OfferV6*). Desktop: a 900px dialog, the offer on the left
   and the out-the-door estimate on the right. Phone: a bottom sheet with the button pinned. bidding-vehicle-new.js
   shows and hides parts of it with jQuery, which writes inline display, so anything it toggles is styled through an
   inner element, and the state rules below use !important only where its inline style would win. */

.vp-offer-modal .vp-offer__dialog { width: calc(100% - 32px); max-width: 900px; margin: 32px auto; }
.vp.vp-offer {
    display: flex; flex-direction: column; overflow: hidden;
    border: 0; border-radius: 20px; padding: 0; background: #FFFFFF;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.35);
}
.vp-offer p { margin: 0; }
.vp-offer__head { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid #EEF0F4; }
.vp-offer .vp-offer__thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--vp-soft); }
.vp-offer__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vp-offer__h { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--vp-navy); }
.vp-offer__car { font-size: 13px; line-height: 18px; color: var(--vp-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-offer__close {
    flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
    background: var(--vp-soft); color: var(--vp-navy); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vp-offer__close:hover { background: #E8E9EC; }

.vp-offer__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; margin: 0; min-height: 0; }
.vp-offer__main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.vp-offer__controls { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.vp-offer__cost {
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
    background: #FAFBFC; border-left: 1px solid #EEF0F4;
}

.vp-offer__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vp-offer__chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: var(--vp-navy); color: #FFFFFF; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
.vp-offer__chip--good { background: var(--vp-green); }
/* The countdown is empty until details_time_left.js fills it. */
.vp-offer__chip--time:has(> [class^="countdown_days_grids_"]:empty) { display: none; }
.vp-offer__when { font-size: 13px; line-height: 18px; color: var(--vp-body); }

.vp-offer .alert { width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: inherit; }
/* No gap for the alerts while the poll has all three hidden (jQuery writes display: none inline). */
.vp-offer__alerts:not(:has(> .alert:not([style*="none"]))) { display: none; }
.vp-offer__banner-in { flex: 1 1 auto; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 19px; color: var(--vp-navy); }
.vp-offer__banner-in .vp-icon { margin-top: 1px; }
.vp-offer__banner-in b { font-size: 14px; font-weight: 600; }
.vp-offer__banner--good .vp-offer__banner-in { background: var(--vp-good-bg); }
.vp-offer__banner--good .vp-offer__banner-in > .vp-icon, .vp-offer__banner--good b { color: var(--vp-good); }
.vp-offer__banner--problem .vp-offer__banner-in { background: var(--vp-problem-bg); }
.vp-offer__banner--problem .vp-offer__banner-in > .vp-icon, .vp-offer__banner--problem b { color: var(--vp-problem); }
.vp-offer__banner--caution .vp-offer__banner-in { background: var(--vp-caution-bg); }
.vp-offer__banner--caution .vp-offer__banner-in > .vp-icon, .vp-offer__banner--caution b { color: var(--vp-caution); }

.vp-offer__now { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--vp-soft); }
.vp-offer__now-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--vp-body); }
.vp-offer__now-row b { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--vp-navy); }
/* bidding-vehicle-new.js colors the offer red for everyone not in front; navy reads as information, not an error. */
.vp-offer .prebidtextcurrentbidpopup.text-danger { color: var(--vp-navy) !important; }
.vp-offer .prebidtextcurrentbidpopup.text-success { color: var(--vp-good) !important; }
.vp-offer__bids { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 18px; color: var(--vp-body); }

.vp-offer__amount { display: flex; flex-direction: column; gap: 8px; }
.vp-offer__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vp-offer__label-row label { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--vp-navy); }
.vp-offer__min { font-size: 13px; line-height: 18px; color: var(--vp-muted); }
.vp-offer__stepper { display: flex; gap: 8px; align-items: center; }
.vp-offer__step {
    flex-shrink: 0; width: 56px; height: 56px; padding: 0; border: 1.5px solid #C9CED8; border-radius: 12px;
    background: #FFFFFF; color: var(--vp-navy); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vp-offer__step:hover:not(:disabled) { border-color: var(--vp-navy); }
.vp-offer__step:disabled { color: #C9CED8; cursor: default; }
.vp-offer__field {
    flex: 1 1 auto; min-width: 0; height: 56px; display: flex; align-items: center; justify-content: center; gap: 2px;
    border: 1.5px solid #C9CED8; border-radius: 12px; background: #FFFFFF;
    font-size: 26px; line-height: 32px; font-weight: 700; color: var(--vp-muted);
}
.vp-offer__field:focus-within { border-color: var(--vp-purple); box-shadow: 0 0 0 3px rgba(91, 47, 201, 0.15); }
.vp-offer__field:has(input[aria-invalid="true"]) { border-color: var(--vp-problem); }
.vp-offer__field input {
    width: 7ch; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--vp-navy); text-align: left;
}
.vp-offer__error { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vp-problem); }
.vp-offer__error[hidden] { display: none; }
.vp-offer__hint { font-size: 13px; line-height: 18px; color: var(--vp-body); }
.vp-offer__picks { display: flex; gap: 8px; }
.vp-offer__pick {
    flex: 1 1 0; height: 44px; padding: 0 8px; border: 1.5px solid var(--vp-line); border-radius: 999px;
    background: #FFFFFF; color: var(--vp-navy); font-size: 15px; font-weight: 600; cursor: pointer;
}
.vp-offer__pick[aria-pressed="true"] { border-color: var(--vp-purple); background: var(--vp-purple-soft); color: var(--vp-purple); }
.vp-offer__pick[hidden] { display: none; }
.vp-offer__explain { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--vp-purple-soft); font-size: 13px; line-height: 19px; color: var(--vp-navy); }
.vp-offer__explain > .vp-icon { margin-top: 1px; color: var(--vp-purple); }
.vp-offer__explain [data-vp-explain] { display: none; }
.vp-offer[data-vp-mode="normal"] [data-vp-explain="normal"],
.vp-offer[data-vp-mode="max"] [data-vp-explain="max"],
.vp-offer[data-vp-mode="raise"] [data-vp-explain="raise"] { display: inline; }

.vp-offer__foot { display: flex; flex-direction: column; gap: 8px; }
.vp .vp-offer__place:disabled { opacity: 0.55; cursor: default; filter: none; }
.vp-offer__agree { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 17px; color: var(--vp-body); }
.vp-offer__agree .vp-icon { margin-top: 2px; }

.vp-offer__history { display: flex; flex-direction: column; gap: 4px; }
.vp-offer__sub { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vp-navy); }
.vp-offer__table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; color: var(--vp-navy); }
.vp-offer__table th { background: none; border: 0; padding: 6px 0; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-muted); text-align: left; }
.vp-offer__table td { padding: 8px 0; border-top: 1px solid #EEF0F4; }
.vp-offer__table th:last-child, .vp-offer__table td:last-child { text-align: right; color: var(--vp-body); }

/* The estimate. bid_calculator.js writes its rows; their labels and amounts are its own. */
.vp-offer__eyebrow { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-muted); }
.vp-offer__cost-title { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--vp-navy); }
.vp-offer__fees { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; color: var(--vp-navy); }
/* custom-elements.css stripes every even body row and paints header rows navy site-wide, and loads after this file. */
.vp-offer table tbody tr, .vp-offer table thead tr { background: none; }
.vp-offer__fees td { padding: 7px 0; border: 0; vertical-align: top; }
.vp-offer__fees td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.vp-offer__fees tr.total_estimated_tr td { padding-top: 12px; border-top: 1px solid var(--vp-line); }
.vp-offer__fees tr.total_estimated_tr td, .vp-offer__fees tr.total_estimated_delivery td { font-size: 16px; }
.vp-offer__fees tr.total_estimated_delivery td { padding-top: 10px; }
.vp-offer__note { font-size: 12px; line-height: 17px; color: var(--vp-body); }
.vp-offer__pay {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--vp-line); border-radius: 12px;
    background: #FFFFFF; font-size: 13px; line-height: 19px; color: var(--vp-navy);
}
.vp-offer__pay .vp-icon { margin-top: 1px; }

/* Phone only: one line for the estimate, opening the full breakdown. */
.vp-offer__summary { display: none; }

/* The confirm layer, over the offer side. Its question and messages are bidding-vehicle-new.js's. */
.vp-offer__layer { position: absolute; inset: 0; z-index: 3; background: #FFFFFF; }
.vp-offer__layer-in { height: 100%; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vp-offer__layer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp-offer__ask { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 23px; color: var(--vp-navy); }
.vp-offer__ask .maxBidInfo { margin: 0; padding: 0; border: 0; background: none; font-size: 13px; line-height: 19px; color: var(--vp-body); }
.vp-offer__msg { font-size: 15px; line-height: 22px; font-weight: 600; }
.vp-offer__msg--good { color: var(--vp-good); }
.vp-offer__msg--bad { color: var(--vp-problem); }
.vp-offer__layer-foot { display: flex; flex-direction: column; gap: 10px; }
.vp-offer__layer-foot .prebid_cancel_part .vp-btn { width: 100%; }
.vp-offer__back { display: none !important; }
.vp-offer__busy { align-items: center; justify-content: center; gap: 10px; height: 52px; font-size: 16px; font-weight: 600; color: var(--vp-purple); }
.vp-offer__busy[style*="block"] { display: flex !important; }
.vp-offer__spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(91, 47, 201, 0.25); border-top-color: var(--vp-purple);
    animation: vp-offer-spin 0.8s linear infinite;
}
@keyframes vp-offer-spin { to { transform: rotate(360deg); } }
/* One click (vehicle-offer.js): no question to answer, only the result. */
.vp-offer[data-vp-state="sending"] .vp-offer__layer-head,
.vp-offer[data-vp-state="sending"] #prebid_succes_hide,
.vp-offer[data-vp-state="sending"] #btn_placeBid { display: none !important; }
.vp-offer[data-vp-state="sending"] .vp-offer__layer-in { align-items: center; text-align: center; }
.vp-offer[data-vp-state="review"] .vp-offer__back { display: flex !important; }

@media (max-width: 991.98px) {
    /* A bottom sheet. custom.css makes .PreBidModal full height on phones; this pop-up isn't. */
    .vp-offer-modal.PreBidModal > .modal-dialog.vp-offer__dialog {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; display: block; transform: none;
    }
    .vp-offer-modal.PreBidModal > .modal-dialog .modal-content.vp-offer {
        height: auto; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
        margin: 0; border-radius: 20px 20px 0 0;
    }
    .vp-offer__head { padding: 14px 16px 12px; }
    .vp-offer .vp-offer__thumb { width: 48px; height: 36px; }
    .vp-offer__body { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
    .vp-offer__controls { padding: 16px 16px 0; gap: 14px; }
    .vp-offer__explain { display: none; }
    .vp-offer__summary {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
        padding: 12px 14px; border: 1px solid var(--vp-line); border-radius: 12px; background: #FAFBFC;
        text-align: left; color: var(--vp-navy); cursor: pointer;
    }
    .vp-offer__summary-text { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 18px; color: var(--vp-body); }
    .vp-offer__summary-text b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--vp-navy); }
    .vp-offer__with-delivery { display: none; font-size: 13px; font-weight: 400; color: var(--vp-body); }
    .vp-offer--delivery .vp-offer__with-delivery { display: inline; }
    .vp-offer__summary-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--vp-purple); white-space: nowrap; }
    .vp-offer--costs .vp-offer__summary-more .vp-icon { transform: rotate(180deg); }
    .vp-offer__foot {
        position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: #FFFFFF; border-top: 1px solid #EEF0F4;
    }
    .vp-offer__history { padding-bottom: 16px; }
    .vp-offer__cost { display: none; border-left: 0; border-top: 1px solid #EEF0F4; padding: 16px; }
    .vp-offer--costs .vp-offer__cost { display: flex; }
    .vp-offer__cost .vp-offer__cost-head { display: none; }
    /* The review step (a max offer) and the big-jump check: the breakdown above, the confirm and its buttons below. */
    .vp-offer[data-vp-state="review"] .vp-offer__body,
    .vp-offer[data-vp-state="confirm-big"] .vp-offer__body { flex-direction: column-reverse; justify-content: flex-end; }
    .vp-offer[data-vp-state="review"] .vp-offer__controls,
    .vp-offer[data-vp-state="confirm-big"] .vp-offer__controls { display: none; }
    .vp-offer[data-vp-state="review"] .vp-offer__cost,
    .vp-offer[data-vp-state="confirm-big"] .vp-offer__cost { display: flex; border-top: 0; }
    .vp-offer[data-vp-state="review"] .vp-offer__layer,
    .vp-offer[data-vp-state="confirm-big"] .vp-offer__layer { position: static; }
    .vp-offer[data-vp-state="review"] .vp-offer__layer-in,
    .vp-offer[data-vp-state="confirm-big"] .vp-offer__layer-in { height: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); justify-content: flex-start; }
    .vp-offer[data-vp-state="sending"] .vp-offer__layer-in { min-height: 220px; }
}