/* Vehicle detail page (vehicle.html). Loaded after site.css. */
/* ---------------------------------------------------------------- vehicle detail */
.vdp__head { grid-area: head; display: flex; align-items: center; gap: 14px; margin-left: -15px; }
/* Back: a dark plate as tall as the title's, slanted like its end, with a
   red edge along the bottom; red on hover, the arrow nudging back. */
.vdp-back { --h: 35px; flex: none; display: inline-flex; align-items: center; gap: 7px; height: var(--h); padding: 1px 22px 0 14px; background: linear-gradient(180deg, #303030, #1a1a1a); box-shadow: inset 0 -3px 0 var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * .43) 100%, 0 100%); color: #fff; font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; transition: background-color .15s; }
.vdp-back .ico { color: var(--red); font-size: 17px; transform: scaleX(-1); transition: transform .15s, color .15s; }
.vdp-back:hover, .vdp-back:focus-visible { background: var(--red); color: #fff; text-decoration: none; }
.vdp-back:hover .ico, .vdp-back:focus-visible .ico { color: #fff; transform: scaleX(-1) translateX(3px); }
.vdp-back:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.vdp__head h1 { color: var(--red); font: 500 24px/1.2 var(--cond); margin: 0; }
.vdp__head h1 { min-width: 0; }
/* QR code to open the page on a phone, under the share card. Desktops and
   tablets (iPads); not phones, which are already there. */
.qr { position: relative; display: block; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.qr img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: content-box; width: auto; height: auto; max-width: 40%; max-height: 22%; padding: 2.5%; border-radius: 4px; background: #fff; }
.vdp-qr { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 8px 8px 16px; border-radius: 8px; background: #141414 radial-gradient(ellipse at 100% 0, rgba(247,21,43,.16), transparent 60%); border: 1px solid #2a2a2a; color: #fff; text-align: left; cursor: zoom-in; transition: border-color .15s, box-shadow .15s; }
.vdp-qr:hover, .vdp-qr:focus-visible { border-color: #3a3a3a; box-shadow: 0 0 0 1px rgba(247,21,43,.35), 0 6px 20px rgba(0,0,0,.5); }
.vdp-qr__text { flex: 1; display: grid; gap: 5px; min-width: 0; }
.vdp-qr__text strong { font: 400 31px/.95 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.vdp-qr__text small { color: #d4d4d4; font: 500 16px/1.2 var(--cond); }
.qr--sm { flex: none; width: 72px; border-radius: 3px; transition: transform .15s; }
.vdp-qr:hover .qr--sm { transform: scale(1.06); }
.qrbox { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 24px 26px 22px; border: 0; border-top: 4px solid var(--red); border-radius: 12px; background: #161616 radial-gradient(ellipse at 100% 0, rgba(247,21,43,.16), transparent 60%); color: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.7); text-align: center; font: 500 16px/1.4 var(--body); }
.qrbox::backdrop { background: rgba(0,0,0,.7); }
.qrbox[open] { animation: qrbox-in .2s ease-out; }
@keyframes qrbox-in { from { opacity: 0; transform: scale(.85); } }
.qrbox h2 { margin: 0; font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.qrbox p { margin: 6px 0 0; color: var(--muted); }
.qrbox .qr--lg { margin: 18px auto 0; border-radius: 8px; cursor: zoom-out; }
.qrbox__unit { color: #fff !important; font: 500 17px/1.25 var(--cond); margin-top: 14px !important; }
.qrbox__close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #262626; color: #ddd; font-size: 24px; line-height: 1; cursor: pointer; }
.qrbox__close:hover { background: #333; color: #fff; }
.vdp__comment { grid-area: comment; margin: 0 0 0 -15px; font: 400 13px/1.45 var(--cond); max-width: 520px; white-space: pre-line; }
.vdp__top { display: grid; grid-template-columns: 1fr 360px; grid-template-areas: "head head" "comment comment" "gallery side"; gap: 12px 30px; margin: 0 0 24px; padding-left: 15px; }
.gallery { grid-area: gallery; min-width: 0; }
.vdp__side { grid-area: side; }
.gallery__main { position: relative; aspect-ratio: 4 / 3; background: #111; overflow: hidden; }
.gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.gallery__slide.is-active { opacity: 1; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0; width: 42px; height: 60px; background: rgba(0,0,0,.4); color: #fff; font-size: 34px; cursor: pointer; }
.gallery__nav--prev { left: 0; }
.gallery__nav--next { right: 0; }
.gallery__count { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font: 700 12px/1 var(--cond); letter-spacing: .05em; pointer-events: none; }
.gallery__thumbs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.gallery__thumbs button { border: 2px solid transparent; padding: 0; background: #111; cursor: pointer; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; }
.gallery__thumbs button.is-active { border-color: var(--red); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* Photos that aren't the dealer's own uploads (stock, AI-generated): a note while shown. */
.gallery__ai-note { display: none; position: absolute; left: 10px; right: 76px; bottom: 10px; z-index: 2; margin: 0; padding: 6px 11px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font: 500 12.5px/1.35 var(--body); text-align: left; pointer-events: none; }
.gallery__main:has(.gallery__slide.is-active[data-ai-note]) .gallery__ai-note { display: block; }
.gallery__thumbs li { position: relative; }
.gallery__thumbs li.is-ai::after { content: "AI"; position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.7); color: #fff; font: 700 10px/1.4 var(--body); pointer-events: none; }
@media (max-width: 767px) { .gallery__ai-note { left: 8px; right: 70px; bottom: 8px; font-size: 11px; padding: 5px 8px; } }
/* Price card: the price is the loudest thing beside the photos. */
.vdp__price { position: relative; margin-bottom: 10px; padding: 14px 16px 12px; background: #141414 radial-gradient(ellipse at 100% 0, rgba(247,21,43,.16), transparent 60%); border: 1px solid #2a2a2a; border-top: 3px solid var(--red); font-family: var(--cond); }
.vdp__price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.vdp__price-label { color: var(--muted); font: 700 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .12em; }
.vdp__save { padding: 5px 10px; border-radius: 999px; background: var(--red); color: #fff; font: 700 14px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 2px 10px rgba(247,21,43,.35); }
.vdp__amount { display: block; margin: 4px 0 2px; color: #fff; font: 400 54px/1.05 var(--display); letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.vdp__amount--text { font-size: 34px; color: var(--red); }
a.vdp__amount:hover { text-decoration: none; color: #fff; }
.vdp__was { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--muted); font-size: 16px; }
.vdp__was s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
/* Cover Flow between units (vdp-flow.js): the previous and next units stand
   angled in the margins beside the page, never over it. They need about
   210px a side, so screens narrower than 1760px don't show them (← / →
   still work). */
.vflow { display: none; }
@media (min-width: 1760px) {
  .vflow { display: block; --vf-m: calc((100vw - var(--wrap)) / 2); }
  .vflow__card { position: fixed; z-index: 1; top: 50%; width: 230px; margin-top: -110px; display: flex; flex-direction: column; background: #0b0b0b; border: 1px solid #2a2a2a; border-top: 3px solid var(--red); color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.6); transition: filter .2s, opacity .3s; -webkit-box-reflect: below 4px linear-gradient(transparent 78%, rgba(255,255,255,.14)); }
  .vflow__card:hover { filter: brightness(1.15); text-decoration: none; }
  .vflow__card--prev { left: calc(var(--vf-m) - 20px - 230px); transform-origin: 100% 50%; transform: perspective(900px) rotateY(50deg); }
  .vflow__card--next { right: calc(var(--vf-m) - 20px - 230px); transform-origin: 0 50%; transform: perspective(900px) rotateY(-50deg); }
  /* A flat arrow over the middle of each card says "this way". */
  .vflow__arrow { position: fixed; z-index: 3; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.6); box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: background .15s, border-color .15s, transform .15s, opacity .3s; }
  .vflow__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; }
  .vflow__arrow--prev { left: calc(var(--vf-m) - 20px - 75px - 24px); }
  .vflow__arrow--next { right: calc(var(--vf-m) - 20px - 75px - 24px); }
  .vflow__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
  .vflow__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
  .vflow__arrow:hover, .vflow__arrow:focus-visible, .vflow__card:hover + .vflow__arrow { background: var(--red); border-color: var(--red); outline: none; }
  .vflow__arrow--prev:hover, .vflow__arrow--prev:focus-visible, .vflow__card--prev:hover + .vflow__arrow { transform: translateX(-3px); }
  .vflow__arrow--next:hover, .vflow__arrow--next:focus-visible, .vflow__card--next:hover + .vflow__arrow { transform: translateX(3px); }
  .vflow__img { display: block; aspect-ratio: 4 / 3; background: #1b1b1b; overflow: hidden; }
  .vflow__img img { width: 100%; height: 100%; object-fit: cover; }
  .vflow__body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
  .vflow__title { color: var(--red); font: 700 14px/1.2 var(--cond); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vflow__price { font: 400 22px/1 var(--display); }
  .vflow.is-away .vflow__card, .vflow.is-away .vflow__arrow { opacity: 0; pointer-events: none; }
}
/* Moving between units (cross-document view transition; the opt-in is in
   vehicle.html). The page and the side cards are named per unit, so each one
   travels to where that unit is on the next page: going next, the Next card
   turns and grows into the page, the page shrinks into the Previous card,
   the old Previous card slides off and the new Next card slides in. */
.vflow__card { view-transition-class: vflow-card; }
.page--vehicle .vdp { view-transition-class: vflow-main; }
::view-transition-group(*.vflow-main), ::view-transition-group(*.vflow-card) { animation-duration: .65s; animation-timing-function: cubic-bezier(.3,.7,.2,1); overflow: clip; }
::view-transition-group(*.vflow-main) { z-index: 2; }
/* Page and card faces swap where each move is small: a page shrinking into a
   card stays a page until late; a card growing into the page gives way early. */
@keyframes vflow-face-late-out { 0%, 50% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes vflow-face-late-in { 0%, 45% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes vflow-face-early-out { 0% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes vflow-face-early-in { 0% { opacity: 0; } 35%, 100% { opacity: 1; } }
::view-transition-old(*.vflow-card) { animation: vflow-face-late-out .65s both; }
::view-transition-new(*.vflow-card) { animation: vflow-face-late-in .65s both; }
::view-transition-old(*.vflow-main) { animation: vflow-face-early-out .65s both; }
::view-transition-new(*.vflow-main) { animation: vflow-face-early-in .65s both; }
@keyframes vflow-off-left { to { transform: translateX(-160%); opacity: 0; } }
@keyframes vflow-off-right { to { transform: translateX(160%); opacity: 0; } }
@keyframes vflow-on-left { from { transform: translateX(-160%); opacity: 0; } }
@keyframes vflow-on-right { from { transform: translateX(160%); opacity: 0; } }
html[data-vflow="next"]::view-transition-old(*.vflow-card):only-child { animation: vflow-off-left .65s cubic-bezier(.3,.7,.2,1) both; }
html[data-vflow="next"]::view-transition-new(*.vflow-card):only-child { animation: vflow-on-right .65s cubic-bezier(.3,.7,.2,1) both; }
html[data-vflow="prev"]::view-transition-old(*.vflow-card):only-child { animation: vflow-off-right .65s cubic-bezier(.3,.7,.2,1) both; }
html[data-vflow="prev"]::view-transition-new(*.vflow-card):only-child { animation: vflow-on-left .65s cubic-bezier(.3,.7,.2,1) both; }
/* Wrappers the on-page editor (vdp-edit.js) refreshes after a save. */
.vdp-region { display: contents; }
/* Price breakdown (compliance): every fee, $0 included, then the total. */
.vdp__fees { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; line-height: 1.3; }
.vdp__fees div { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.vdp__fees dt { color: rgba(255,255,255,.6); }
.vdp__fees dd { margin: 0; font-variant-numeric: tabular-nums; }
.vdp__fees .vdp__fees-total { margin-top: 5px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); font-size: 18px; font-weight: 700; }
.vdp__fees .vdp__fees-total dt { color: #fff; }
.vdp__payment { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-top: 10px; padding: 8px 10px; border-radius: 4px; background: rgba(255,255,255,.06); color: #fff; font-size: 17px; }
.vdp__payment strong { color: var(--red); font-size: 22px; }
.vdp__payment small { color: var(--muted); font-size: 13px; }
.vdp__payment:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
/* Calls to action under the price: one loud red button (like the phone bar's
   call button), financing styled like the homepage hero buttons, four tiles,
   then the small stuff. */
.cta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-family: var(--cond); }
.cta__main, .cta__finance { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 12px; color: #fff; overflow: hidden; transition: filter .15s, transform .15s, box-shadow .15s, background .2s; }
.cta__main { border-radius: 8px; background: linear-gradient(#2fd665, #16a34a 55%, #12873d); box-shadow: 0 4px 0 #0b5c29, 0 12px 24px rgba(22,163,74,.25); }
.cta__finance { border-radius: 8px; background: linear-gradient(#2b2b2b, #1c1c1c); border: 1px solid #333; box-shadow: 0 4px 0 #0a0a0a; }
.cta__finance::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); }
.cta__main:hover, .cta__finance:hover, .cta__main:focus-visible, .cta__finance:focus-visible { color: #fff; text-decoration: none; }
.cta__main:hover { filter: brightness(1.08); }
.cta__finance:hover { background: linear-gradient(#353535, #232323); }
.cta__main:active, .cta__finance:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b5c29; }
.cta__finance:active { box-shadow: 0 1px 0 #0a0a0a; }
/* a slow shine across the main button */
.cta__main::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); animation: ctaShine 5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes ctaShine { 0% { left: -60%; } 22%, 100% { left: 130%; } }
.cta__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; }
.cta__main .cta__icon { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.cta__finance .cta__icon { margin-left: 4px; background: rgba(247,21,43,.14); color: var(--red); box-shadow: inset 0 0 0 2px rgba(247,21,43,.45); }
.cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cta__text strong { font: 400 23px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.cta__text small { font: 700 13px/1.15 var(--cond); color: rgba(255,255,255,.85); }
.cta__finance .cta__text small { color: var(--muted); }
/* arrow: a ring with a chevron, as on the homepage hero buttons */
.cta__arrow { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; transition: transform .2s, background .2s; }
.cta__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translate(-65%, -50%) rotate(45deg); transition: border-color .2s; }
.cta__main:hover .cta__arrow, .cta__main:focus-visible .cta__arrow { background: #fff; transform: translateX(3px); }
.cta__main:hover .cta__arrow::before, .cta__main:focus-visible .cta__arrow::before { border-color: #16a34a; }
.cta__finance .cta__arrow { border-color: var(--red); }
.cta__finance .cta__arrow::before { border-color: var(--red); }
.cta__finance:hover .cta__arrow, .cta__finance:focus-visible .cta__arrow { background: var(--red); transform: translateX(3px); }
.cta__finance:hover .cta__arrow::before, .cta__finance:focus-visible .cta__arrow::before { border-color: #fff; }
.cta__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cta__tile { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 9px; row-gap: 3px; width: 100%; height: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid #2a2a2a; border-radius: 8px; background: #181818; color: #fff; text-align: left; cursor: pointer; font-family: var(--cond); transition: border-color .15s, background .15s, transform .15s; }
.cta__tile:hover, .cta__tile:focus-visible { border-color: var(--red); background: #1f1f1f; color: #fff; text-decoration: none; transform: translateY(-2px); }
.cta__tile-icon { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(247,21,43,.18); color: var(--red); font-size: 19px; transition: background .15s, color .15s; }
.cta__tile:hover .cta__tile-icon, .cta__tile:focus-visible .cta__tile-icon { background: var(--red); color: #fff; }
.cta__tile strong { align-self: end; font: 700 14.5px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.cta__tile small { align-self: start; font: 400 12.5px/1.2 var(--cond); color: var(--muted); }
.cta__utils { display: flex; justify-content: center; align-items: center; gap: 4px 18px; flex-wrap: wrap; padding: 6px 0 2px; }
.cta__utils > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; color: #bbb; font: 700 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.cta__utils > a .ico { color: var(--red); font-size: 16px; }
.cta__utils > a:hover { color: #fff; text-decoration: none; }
/* Share card: the networks one tap away, like a phone's share sheet. */
.sharecard { padding: 12px 12px 10px; border: 1px solid #2a2a2a; border-radius: 8px; background: linear-gradient(#1c1c1c, #141414); scroll-margin: 120px; }
.sharecard.is-called { animation: shareCall 1.1s ease-out; }
@keyframes shareCall { 0% { box-shadow: 0 0 0 0 rgba(247,21,43,.7); border-color: var(--red); } 100% { box-shadow: 0 0 0 14px rgba(247,21,43,0); } }
.sharecard__head { display: flex; flex-direction: column; gap: 3px; margin: 0 0 11px; }
.sharecard__head strong { font: 400 20px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.sharecard__head span { font: 400 13px/1.2 var(--cond); color: var(--muted); }
.sharecard__nets { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 6px; }
.net { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #ccc; font: 700 12px/1.1 var(--cond); text-align: center; cursor: pointer; }
.net[hidden] { display: none; }
.net:hover, .net:focus-visible { color: #fff; text-decoration: none; }
.net__dot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 21px; box-shadow: 0 3px 0 rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s, background .2s; }
.net:hover .net__dot, .net:focus-visible .net__dot { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.net:active .net__dot { transform: translateY(1px); }
.net--fb .net__dot { background: #1877f2; }
.net--x .net__dot { background: #000; box-shadow: inset 0 0 0 1px #3a3a3a, 0 3px 0 rgba(0,0,0,.45); }
.net--sms .net__dot { background: #2fbf4a; }
.net--mail .net__dot { background: #6b6b6b; }
.net--link .net__dot { background: var(--red); }
.net--link.is-done .net__dot { background: #2fbf4a; }
.net--more .net__dot { background: #333; }
/* Under the photos, like the action row under a social post. */
.engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.engage__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 15px 7px 12px; border: 1px solid #2e2e2e; border-radius: 999px; background: #1b1b1b; color: #fff; font: 700 14px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.engage__btn .ico { color: var(--red); font-size: 20px; }
.engage__btn:hover, .engage__btn:focus-visible { border-color: var(--red); background: #232323; color: #fff; text-decoration: none; transform: translateY(-1px); }
.engage__btn--save.is-fav { border-color: var(--red); background: var(--red); }
.engage__btn--save.is-fav .ico { color: #fff; }
.engage__on, .engage__btn--save.is-fav .engage__off { display: none; }
.engage__btn--save.is-fav .engage__on { display: inline; }
.engage__stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 0 auto; color: var(--muted); font: 700 13px/1.2 var(--cond); }
.engage__stats [hidden] { display: none; }
.engage__stats .ico { color: var(--red); font-size: 15px; margin-right: 2px; }
.engage__stats strong { color: #fff; }
.ico-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-7.2 8.2L23 22h-6.6l-5.2-6.8L5.3 22H2.2l7.7-8.8L2 2h6.8l4.7 6.2zM17.7 20h1.8L7.4 3.9H5.5z'/%3E%3C/svg%3E"); }
.ico-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0 0 10h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); }
.ico-eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .cta__main::after { animation: none; display: none; } }
.ico-tag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7c0 .55.22 1.05.59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.84zM5.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }
.ico-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.65 10A6 6 0 1 0 12.65 14H17v4h4v-4h2v-4zM7 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); }

.tabs__bar { display: flex; background: #1b1b1b; }
.tabs__bar button { border: 0; background: transparent; color: var(--red); padding: 13px 18px; font: 400 16px/1 var(--cond); text-transform: uppercase; cursor: pointer; }
.tabs__bar button.is-active { background: #000; font-weight: 700; }
.tabs__panel { display: none; background: #000; padding: 0; }
.tabs__panel.is-active { display: block; }
.vdp__info { display: grid; grid-template-columns: 1fr 380px; }
.vdp__desc { padding: 14px 20px 6px; border-right: 1px solid #1b1b1b; font: 400 14px/1.5 var(--cond); }
.vdp__desc h3 { color: var(--red); font: 400 24px/1.15 var(--cond); margin: 0 0 .35em; }
/* Imported descriptions are full of spacer paragraphs; keep the rhythm tight. */
.vdp__desc p { margin: 0 0 .6em; }
.vdp__desc p:empty, .vdp__desc p:has(> br:only-child) { display: none; }
.vdp__desc > :is(p, ul, ol, h2, h3, h4, table, div) + br { display: none; }
.vdp__desc ul, .vdp__desc ol { margin: 0 0 .5em; padding-left: 1.3em; }
.vdp__desc ul + ul, .vdp__desc ul + br + ul { margin-top: -.5em; }
.vdp__desc :is(h2, h4) { color: var(--red); font: 400 20px var(--cond); margin: .6em 0 .3em; }
.vdp__desc blockquote { margin: 0 0 1em; padding: 2px 0 2px 12px; border-left: 3px solid var(--red); color: #ccc; }
.vdp__desc blockquote > :last-child { margin-bottom: 0; }
.vdp__desc table { margin: 0 0 1em; }
.vdp__desc th, .vdp__desc td { border-bottom: 1px solid #2a2a2a; text-align: left; }
.vdp__desc hr { border: 0; border-top: 1px solid #2a2a2a; margin: 1em 0; }
.vdp__desc code { background: #1b1b1b; padding: 1px 4px; border-radius: 3px; }
.highlights { list-style: none; margin: 0; padding: 12px 20px; background: #111; font: 400 14px/1.5 var(--cond); align-self: start; position: sticky; top: calc(var(--sticky-top, 0px) + 12px); }
.highlights li { display: flex; justify-content: space-between; gap: 12px; }
.highlights li span:last-child { font-weight: 700; text-align: right; }
.highlights li.is-sale span { color: var(--red); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 12px; }
.spec-table { width: 100%; border-collapse: collapse; font: 400 13px var(--cond); margin: 0 0 14px; }
.spec-table caption { text-align: left; background: #1b1b1b; color: var(--red); padding: 8px 12px; font-weight: 700; text-transform: uppercase; }
.spec-table th, .spec-table td { padding: 6px 12px; border-bottom: 1px solid #1b1b1b; text-align: left; }
.spec-table th { width: 40%; color: var(--muted); font-weight: 400; }
.video { aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; border: 0; }
.related { margin-top: 24px; }
.related h2 { color: var(--red); font: 400 24px var(--cond); }
.related__grid { display: grid; grid-template-columns: repeat(4, 205px); gap: 30px; }
.related__grid a { color: #fff; font: 400 13px var(--cond); }
.related__grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 10px; }
.disclaimer { font: 400 13px/1.5 var(--body); margin: 24px 15px 0; }
.disclaimer + .disclaimer { margin-top: 10px; }

@media (max-width: 991px) {
  .vdp__top, .vdp__info { grid-template-columns: 1fr; padding-left: 0; }
  .related__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------- phones & tablets */
/* Touch layout: sticky nav bar with search, accordion menu, swipeable rows,
   compact inventory cards and a thumb-reach action bar. */
@media (max-width: 991px) {
  /* vehicle detail */
  .vdp__head { align-items: flex-start; gap: 10px; }
  .vdp__head h1 { font-size: 21px; }
  .vdp-back { --h: 31px; font-size: 16px; padding-right: 19px; }
  .vdp__top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "comment" "gallery" "side"; gap: 12px; margin: 0 0 22px; }
  .vdp__head, .vdp__comment { margin-left: 0; }
  .vdp__side { margin-top: 4px; }
  .vdp-qr { display: none; }
  .gallery { margin: 0 -12px; }
  .gallery__nav { width: 36px; height: 52px; font-size: 30px; background: rgba(0,0,0,.35); }
  .gallery__thumbs { display: flex; gap: 4px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumbs li { flex: 0 0 76px; }
  .vdp__price { padding: 12px 14px 10px; }
  .vdp__amount { font-size: 50px; }
  .vdp__amount--text { font-size: 30px; }
  /* Two columns of actions instead of eight full-width rows. */
  .cta__text strong { font-size: 22px; }
  .engage { padding: 0 12px; }
  .engage__stats { flex-basis: 100%; margin: 2px 0 0; }
  .tabs__bar { margin: 0 -12px; overflow-x: auto; scrollbar-width: none; }
  .tabs__bar::-webkit-scrollbar { display: none; }
  .tabs__bar button { flex: none; white-space: nowrap; padding: 14px 16px; }
  .vdp__desc { padding: 12px 4px 4px; font-size: 15px; border-right: 0; }
  .highlights { padding: 12px; font-size: 14px; }
  .related h2 { font-size: 22px; }
  .disclaimer { margin: 24px 0 0; }
  .mobilebar--unit { grid-template-columns: auto 1fr auto; }
}

/* Tablets (iPads, either way up) keep the QR card. Phones held sideways are
   as wide but much shorter, and don't get it. */
@media (min-width: 768px) and (max-width: 991px) and (min-height: 600px) {
  .vdp-qr { display: flex; }
}
@media print {
  .cta { display: none !important; }
  .gallery__nav, .tabs__bar, .vflow { display: none !important; }
  .tabs__panel { background: #fff; display: block !important; }
  .vdp-qr, .vdp-qr * { background: none !important; color: #000 !important; box-shadow: none !important; }
  .vdp__price, .vdp__price * { background: none !important; color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
}