/* ============================================================
     VDP (Vehicle Detail Page) — car.html
     Incremental build. Currently implemented: photo gallery.
     ============================================================ */

  .page { padding: 16px 0 60px; }

  .breadcrumb {
    padding: 8px 0 12px;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .breadcrumb a { color: var(--muted); transition: color .12s; }
  .breadcrumb a:hover { color: var(--red); }
  .breadcrumb .sep { color: #cbd5e1; font-size: 12px; }
  .breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

  /* Title block — plain (no card), just clean H1 + meta line */
  .vdp-head {
    margin-bottom: 18px;
  }
  .vdp-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.18;
    color: var(--ink);
  }
  .vdp-title .vdp-title__year {
    color: var(--muted);
    font-weight: 700;
  }

  /* MOBILE-FIRST. By default everything in .vdp-layout stacks
     vertically as plain blocks. Each block is width:100% inside its
     parent, with box-sizing: border-box so padding/border don't push
     it past the parent's content edge. NO grid, NO flex, NO order,
     NO display:contents on mobile — just plain block flow. The 4:3
     hero photo and high-res sources can no longer fight a flex
     layout's min-content sizing because there is no flex container.

     Desktop (≥901px) opts back into a 2-column grid below. */
  .vdp-layout > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .vdp-layout > * + * { margin-top: 16px; }

  /* ============================================================
     GALLERY — auto.ria style: full-width hero + thumbnail strip
     ============================================================ */
  .gallery {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Primary (big) image — full width of the gallery container.
     With the new grid/flex layout neither parent is a display:contents
     wrapper anymore, so the modern `aspect-ratio: 4/3` actually works
     (Baseline 2022, ~96% support). No more padding-bottom % hack and
     no more position:absolute on the children — clean block flow. */
  .gallery__primary {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    min-width: 0;
  }
  .gallery__primary img {
    width: 100%; height: 100%;
    max-width: 100%;
    /* `contain`, not `cover` — listing photos come from multiple
       sources (autoexposure CDN, dealer phones, scraped portraits)
       and aspect ratios in the dataset range from 0.88 (portrait) to
       1.50 (cinematic landscape). With `cover` and our 4:3 container,
       a portrait listing crops to its middle horizontal slice — we'd
       see only foliage instead of the car. `contain` shows the full
       photo and lets the gradient background fill the letterbox. */
    object-fit: contain;
    display: block;
    transition: opacity .25s ease;
    user-select: none;
    -webkit-user-drag: none;
  }
  .gallery__primary img.is-fading { opacity: 0.0; }
  /* The overlay UI (counter, tools, prev/next nav, view-all button)
     is positioned absolutely against .gallery__primary regardless of
     how the primary itself sizes. */

  /* Navigation arrows */
  .gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,0.18);
    transition: background 0.12s, transform 0.12s;
    color: var(--ink);
    z-index: 2;
  }
  .gallery__nav:hover { background: white; transform: translateY(-50%) scale(1.06); }
  .gallery__nav--prev { left: 14px; }
  .gallery__nav--next { right: 14px; }
  .gallery__nav svg { width: 20px; height: 20px; }

  /* Counter pill — top-left on hero */
  .gallery__counter {
    position: absolute;
    top: 14px; left: 14px;
    padding: 6px 10px 6px 8px;
    background: rgba(15,23,42,0.75);
    color: white;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 2;
  }
  .gallery__counter svg { width: 13px; height: 13px; }

  /* Tools — share + favourite, top-right */
  .gallery__tools {
    position: absolute;
    top: 14px; right: 14px;
    display: flex;
    gap: 6px;
    z-index: 2;
  }
  .gallery__tool {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15,23,42,0.15);
    transition: background 0.12s, color 0.12s, transform 0.12s;
    color: var(--ink);
  }
  .gallery__tool:hover { background: white; transform: scale(1.05); }
  .gallery__tool svg {
    width: 26px; height: 26px;
    transition: color .15s, fill-opacity .15s, width .15s, height .15s;
  }
  /* Favourite heart — behaviour mirrors `.car-fav` on search.html, but
     scaled up so the heart fills the 38px circle as tightly as possible.
     Default: ink-2 outline, no fill. Hover: red-soft bg + red stroke.
     Saved: transparent button (no shadow) + red stroke + 30% red fill,
     bumped a couple more pixels so the saved state is visually loudest. */
  .gallery__tool--fav svg { color: var(--ink-2); fill-opacity: 0; }
  .gallery__tool--fav:hover { background: var(--red-soft); transform: scale(1.05); }
  .gallery__tool--fav:hover svg { color: var(--red); }
  .gallery__tool--fav.is-fav { background: transparent; box-shadow: none; }
  .gallery__tool--fav.is-fav svg {
    color: var(--red);
    fill-opacity: 0.3;
    width: 30px; height: 30px;
  }

  /* View all photos — bottom-right on hero */
  .gallery__viewall {
    position: absolute;
    bottom: 14px; right: 14px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.94);
    color: var(--ink);
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,0.18);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s, transform 0.12s;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .gallery__viewall:hover { background: white; transform: translateY(-1px); }
  .gallery__viewall svg { width: 15px; height: 15px; }

  /* ----- Thumbnail strip (auto.ria style) — horizontal carousel under hero ----- */
  .gallery__strip-wrap {
    position: relative;
    margin-top: 8px;
  }
  .gallery__strip {
    display: flex;
    gap: 6px;
    padding: 0 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .gallery__strip::-webkit-scrollbar { display: none; }
  .gallery__strip-thumb {
    flex: 0 0 96px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #F1F5F9;
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
    opacity: 0.85;
    position: relative;
  }
  .gallery__strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gallery__strip-thumb:hover { opacity: 1; }
  .gallery__strip-thumb.is-active { border-color: var(--red); opacity: 1; }
  .gallery__strip-thumb--more::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  /* Strip arrow buttons — sit on the strip edges, fade to nothing at the ends */
  .gallery__strip-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15,23,42,0.12);
    z-index: 2;
    color: var(--ink);
    transition: opacity .12s, transform .12s, background .12s;
  }
  .gallery__strip-nav:hover { background: var(--bg); transform: translateY(-50%) scale(1.06); }
  .gallery__strip-nav[disabled] { opacity: 0; pointer-events: none; }
  .gallery__strip-nav--prev { left: -10px; }
  .gallery__strip-nav--next { right: -10px; }
  .gallery__strip-nav svg { width: 14px; height: 14px; }

  /* Tablet — gallery becomes single column above contact card */
  /* Desktop ≥901px — re-introduce the 2-column grid. side-panel sits
     in the right column and spans both rows so the price/contact card
     stays sticky next to the gallery while the buyer scrolls through
     overview/description/features. No min-width games — every grid
     track is explicitly minmax(0, 1fr) or a fixed pixel width, and
     children inherit min-width:0 from the universal rule above. */
  @media (min-width: 901px) {
    .vdp-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      grid-template-rows: auto 1fr;
      gap: 20px;
      align-items: start;
    }
    .vdp-layout > * + * { margin-top: 0; }
    .vdp-layout > .gallery     { grid-column: 1; grid-row: 1; }
    .vdp-layout > .side-panel  { grid-column: 2; grid-row: 1 / 3; }
    .vdp-layout > .vdp-content { grid-column: 1; grid-row: 2; }
  }

  /* Mobile tweaks */
  @media (max-width: 720px) {
    .gallery { padding: 6px; }
    .gallery__strip-thumb { flex: 0 0 80px; height: 60px; }
    .gallery__strip-nav { display: none; } /* on touch screens, swipe the strip */
    .gallery__viewall { padding: 7px 11px; font-size: 12px; bottom: 10px; right: 10px; gap: 5px; }
    .gallery__viewall svg { width: 13px; height: 13px; }
    .gallery__counter { top: 10px; left: 10px; padding: 5px 9px; font-size: 11.5px; }
    .gallery__tools { top: 10px; right: 10px; gap: 5px; }
    .gallery__tool { width: 34px; height: 34px; }
    .gallery__tool svg { width: 22px; height: 22px; }
    .gallery__tool--fav.is-fav svg { width: 26px; height: 26px; }
    .gallery__nav { width: 38px; height: 38px; }
    .gallery__nav--prev { left: 8px; }
    .gallery__nav--next { right: 8px; }
    .gallery__nav svg { width: 17px; height: 17px; }
  }

  /* ============================================================
     LIGHTBOX
     ============================================================ */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.96);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 80px;
  }
  .lightbox.is-open { display: flex; }
  .lightbox__stage {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    user-select: none;
    -webkit-user-drag: none;
  }
  .lightbox__close {
    position: absolute;
    top: -52px; right: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
  }
  .lightbox__close:hover { background: rgba(255,255,255,0.25); }
  .lightbox__close svg { width: 20px; height: 20px; }
  .lightbox__counter {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.2px;
  }
  .lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.12s;
  }
  .lightbox__nav:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.08); }
  .lightbox__nav--prev { left: -72px; }
  .lightbox__nav--next { right: -72px; }
  .lightbox__nav svg { width: 24px; height: 24px; }

  .lightbox__thumbs {
    position: absolute;
    bottom: -64px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    max-width: 92vw;
    overflow-x: auto;
    padding: 4px 4px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
  }
  .lightbox__thumbs::-webkit-scrollbar { height: 4px; }
  .lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
  .lightbox__thumb {
    flex: 0 0 56px;
    height: 42px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.5;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    transition: opacity 0.15s, border-color 0.15s;
  }
  .lightbox__thumb.is-active { opacity: 1; border-color: white; }
  .lightbox__thumb:hover { opacity: 0.85; }
  .lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  @media (max-width: 900px) {
    .lightbox__nav--prev { left: 0; }
    .lightbox__nav--next { right: 0; }
  }
  @media (max-width: 640px) {
    .lightbox { padding: 40px 8px 60px; }
    .lightbox__nav { width: 44px; height: 44px; background: rgba(255,255,255,0.15); }
    .lightbox__close { top: -44px; }
    .lightbox__counter { top: -36px; font-size: 12px; }
    .lightbox__thumbs { display: none; }
  }

  /* ============================================================
     SIDE PANEL — seller / dealer contact + key specs
     ============================================================ */
  .side-panel { position: static; }
  @media (min-width: 901px) {
    .side-panel { position: sticky; top: 84px; }
  }
  .side-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .side-card__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin-bottom: 12px;
  }

  /* --- Price block (top of contact card) --- */
  .price-block { padding: 4px 2px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
  .price-block__amount {
    font-size: 30px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.6px;
    line-height: 1;
  }

  /* --- Price rating chip (replaces monthly-finance line) --------
     5-bar indicator + label + info button. Mirrors the mobile.de
     pattern: each tier (very-good/good/fair/increased/high) lights up
     a different number of bars and uses a different colour. The info
     button opens a full explainer modal with price ranges. */
  .price-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .price-rating__bars { display: inline-flex; gap: 3px; }
  .price-rating__bar {
    width: 18px; height: 8px;
    border-radius: 2px;
    background: var(--line);
    transition: background .15s;
  }
  .price-rating__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
  }
  .price-rating__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    padding: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: color .12s, background .12s;
  }
  .price-rating__info:hover { color: var(--ink); background: var(--bg); }
  .price-rating__info svg { width: 16px; height: 16px; display: block; }
  /* Tier colours — bar fills + label text. Active bars are filled in
     the tier colour, inactive remain neutral grey (var(--line)). */
  /* Label text is one step darker than its bar. #16a34a on white is
     3.30:1 and the label is 13px bold — under the 18.66px bold that would
     let it qualify as large text — so it needed 4.5:1 and failed. Green
     700/800 from the same scale keep the tier order readable (darker =
     better price) at 5.02:1 and 7.09:1. The bar fills are decorative
     swatches, not text, so they keep the brighter values. */
  .price-rating--very-good .price-rating__bar.is-on { background: #15803d; }
  .price-rating--very-good .price-rating__label     { color: #166534; }
  .price-rating--good      .price-rating__bar.is-on { background: #16a34a; }
  .price-rating--good      .price-rating__label     { color: #15803d; }
  .price-rating--fair      .price-rating__bar.is-on { background: #22c55e; }
  .price-rating--fair      .price-rating__label     { color: #15803d; }
  .price-rating--increased .price-rating__bar.is-on { background: #f59e0b; }
  .price-rating--increased .price-rating__label     { color: #b45309; }
  .price-rating--high      .price-rating__bar.is-on { background: #ea580c; }
  .price-rating--high      .price-rating__label     { color: #c2410c; }

  /* --- Price-rating explainer modal -------------------------------
     Triggered by the (i) button next to the price chip. Mirrors the
     mobile.de "Price rating for this Toyota C-HR" overlay: a 5-tier
     price-range scale with the current vehicle's tier highlighted,
     followed by a short legend and the criteria list. */
  .pr-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
  }
  .pr-modal[aria-hidden="false"] { display: flex; }
  .pr-modal__dialog {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 720px;
    box-shadow: var(--shadow-lg);
    padding: 28px 28px 24px;
    position: relative;
  }
  .pr-modal__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
  }
  .pr-modal__close:hover { background: var(--line); }
  .pr-modal__close svg { width: 16px; height: 16px; }
  .pr-modal__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.4px;
    margin-bottom: 12px;
    padding-right: 40px;
  }
  .pr-modal__intro { font-size: 14px; color: var(--ink-2); margin-bottom: 22px; line-height: 1.55; }
  .pr-modal__intro b { color: var(--ink); font-weight: 700; }
  /* The horizontal 5-tier scale with marker bubble pointing to the
     current vehicle's tier. */
  .pr-scale {
    margin: 76px 0 22px;
    position: relative;
  }
  .pr-scale__marker {
    position: absolute;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--current-color, #16a34a);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
  .pr-scale__marker::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--current-color, #16a34a);
  }
  .pr-scale__marker small { display: block; font-size: 11px; font-weight: 600; opacity: 0.85; margin-bottom: 1px; }
  .pr-scale__bars { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
  .pr-scale__seg { flex: 1; }
  .pr-scale__seg--vg  { background: #15803d; }
  .pr-scale__seg--g   { background: #16a34a; }
  .pr-scale__seg--f   { background: #86efac; }
  .pr-scale__seg--i   { background: #f59e0b; }
  .pr-scale__seg--h   { background: #ea580c; }
  .pr-scale__legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    margin-top: 8px;
  }
  .pr-scale__cell {
    padding: 8px 6px;
    text-align: center;
    border-radius: 8px;
    transition: background .12s;
  }
  .pr-scale__cell.is-current { background: #ecfdf5; }
  .pr-scale__cell-label { font-size: 12px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
  .pr-scale__cell-range { font-size: 11px; color: var(--muted); line-height: 1.2; }
  .pr-scale__cell--vg .pr-scale__cell-label { color: #15803d; }
  .pr-scale__cell--g  .pr-scale__cell-label { color: #16a34a; }
  .pr-scale__cell--f  .pr-scale__cell-label { color: #16a34a; }
  .pr-scale__cell--i  .pr-scale__cell-label { color: #b45309; }
  .pr-scale__cell--h  .pr-scale__cell-label { color: #c2410c; }
  .pr-modal__h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 18px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .pr-modal__crit { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
  .pr-modal__crit p { margin-bottom: 10px; }
  .pr-modal__crit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-top: 12px;
  }
  .pr-modal__crit-grid h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .pr-modal__crit-grid ul { list-style: none; padding: 0; }
  .pr-modal__crit-grid li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--ink-2);
  }
  .pr-modal__crit-grid li::before {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
  }
  .pr-modal__crit-grid li.is-yes::before { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
  .pr-modal__crit-grid li.is-no::before  { background-color: #fee2e2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
  @media (max-width: 540px) {
    .pr-modal__dialog { padding: 22px 18px 18px; }
    .pr-scale__legend { grid-template-columns: 1fr 1fr; }
    .pr-scale__cell { text-align: left; }
    .pr-modal__crit-grid { grid-template-columns: 1fr; }
  }

  /* --- Share modal -------------------------------------------------
     Yachtworld-style share dialog: title, close × top-right, a row of
     six round brand-coloured icon buttons (Facebook, X, Pinterest,
     WhatsApp, Email, Print), then a copy-link input + Copy link
     button. Centered viewport overlay with click-outside / Esc to
     close. Mobile: full-bleed at bottom with a slide-up entrance. */
  .share-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .share-modal[aria-hidden="false"] { display: flex; }
  .share-modal__dialog {
    background: white;
    border-radius: var(--radius);
    padding: 22px 24px 20px;
    width: 100%;
    max-width: 560px;
    position: relative;
    box-shadow: var(--shadow-lg);
  }
  .share-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.12s;
  }
  .share-modal__close:hover { background: var(--line); }
  .share-modal__close svg { width: 18px; height: 18px; }
  .share-modal__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin: 0 36px 18px 0;
  }

  /* Brand-coloured target row. Six equal columns; on narrow widths it
     wraps cleanly without breaking the grid. Each cell has the round
     icon + the text label below. */
  .share-modal__targets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .share-modal__target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.12s;
  }
  .share-modal__target:hover { transform: translateY(-1px); }
  .share-modal__target-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: filter 0.12s, box-shadow 0.12s;
  }
  .share-modal__target:hover .share-modal__target-icon {
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(15,23,42,0.18);
  }
  .share-modal__target-icon svg { width: 26px; height: 26px; }
  .share-modal__target--fb    .share-modal__target-icon { background: #1877F2; }
  .share-modal__target--x     .share-modal__target-icon { background: #0F172A; }
  .share-modal__target--pin   .share-modal__target-icon { background: #E60023; }
  .share-modal__target--wa    .share-modal__target-icon { background: #25D366; }
  .share-modal__target--mail  .share-modal__target-icon { background: #6B7280; }
  .share-modal__target--print .share-modal__target-icon { background: #6B7280; }
  /* Pinterest "P" sits visually high in the bounding box; nudge it down a
     hair so it optically centres in the round chip like the other glyphs. */
  .share-modal__target--pin .share-modal__target-icon svg { width: 22px; height: 22px; }

  /* Copy-link row — input + dark CTA button. The input is read-only and
     pre-filled with the canonical slug URL; the button copies it to
     clipboard and flips its label to "Copied!" for ~1.5s. */
  .share-modal__copy {
    display: flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
  }
  .share-modal__copy-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink-2);
    font-family: inherit;
    outline: 0;
  }
  .share-modal__copy-btn {
    flex-shrink: 0;
    padding: 0 22px;
    background: var(--ink);
    color: white;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s;
  }
  .share-modal__copy-btn:hover { background: #1E293B; }
  .share-modal__copy-btn.is-copied { background: #16a34a; }
  .share-modal__copy-btn.is-copied:hover { background: #15803d; }

  @media (max-width: 640px) {
    .share-modal { padding: 0; align-items: flex-end; }
    .share-modal__dialog {
      max-width: 100%;
      border-radius: var(--radius) var(--radius) 0 0;
      padding: 22px 18px 18px;
    }
    .share-modal__title { font-size: 18px; }
    .share-modal__targets { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
    .share-modal__target { font-size: 12px; }
    .share-modal__copy-input { padding: 11px 12px; font-size: 13px; }
    .share-modal__copy-btn   { padding: 0 16px; font-size: 13px; }
  }

  /* --- Seller identity row --- */
  .seller {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .seller__avatar {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .seller__avatar img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
  }
  .seller__avatar--private { color: var(--muted); }
  .seller__avatar--private svg { width: 30px; height: 30px; }
  .seller__info { min-width: 0; flex: 1; }
  .seller__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .seller__type {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .seller__type--dealer { color: var(--red); font-weight: 600; }
  .seller__type svg { width: 12px; height: 12px; }
  .seller__rating {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-2);
  }
  .seller__rating svg { width: 12px; height: 12px; color: #f59e0b; }
  .seller__rating-count { color: var(--muted); }

  /* --- Location row --- */
  .seller-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 14px;
  }
  .seller-location svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

  /* --- Contact CTAs --- */
  .contact-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
    border: 1px solid transparent;
    width: 100%;
    line-height: 1.2;
    text-align: center;
  }
  .contact-btn:active { transform: translateY(1px); }
  .contact-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

  .contact-btn--primary { background: var(--red); color: white; }
  .contact-btn--primary:hover { background: var(--red-dark); }

  .contact-btn--secondary {
    background: white;
    color: var(--ink);
    border-color: var(--line);
  }
  .contact-btn--secondary:hover { border-color: var(--ink); background: var(--bg); }

  .phone-revealed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: var(--red-soft);
    color: var(--red-dark);
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background .15s;
  }
  .phone-revealed:hover { background: #fee2e2; }
  .phone-revealed svg { width: 17px; height: 17px; }

  /* --- Trust strip --- */
  .seller-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.4;
  }
  .seller-trust svg { width: 16px; height: 16px; color: #16a34a; flex-shrink: 0; }
  .seller-trust strong { color: var(--ink); font-weight: 700; }

  .seller-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 600;
    text-decoration: none;
    transition: color .12s, gap .15s;
  }
  .seller-link:hover { color: var(--red); gap: 9px; }
  .seller-link svg { width: 13px; height: 13px; }

  /* --- VIN block (right column) --- */
  .vin-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    color: var(--ink);
    transition: background .15s, border-color .15s;
  }
  .vin-chip__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--muted);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .vin-chip__code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .vin-chip__copy {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
  }
  .vin-chip__copy:hover { background: var(--bg); color: var(--ink); }
  .vin-chip__copy svg { width: 14px; height: 14px; }
  .vin-chip.is-copied { background: var(--bg); border-color: var(--ink); }

  .vin-missing {
    font-size: 13px;
    color: var(--muted);
    padding: 9px 12px;
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    text-align: center;
  }

  /* FE-Schrift @font-face is declared in shared.css so every page can use it. */

  /* --- Malta number plate chip (right column) ---
     Mirrors the real Maltese plate: FE-Schrift glyphs filling ~75% of
     chip height, 2.5px black border, 5px corner radius, EU strip on
     the left. */
  .plate-chip {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 2.5px solid #000;
    border-radius: 5px;
    background: white;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    align-self: flex-start;
    transition: box-shadow .15s;
  }
  .plate-chip.is-copied { box-shadow: 0 0 0 2px #86efac; }
  .plate-chip__eu {
    background: url('malta-eu-strip.svg') center/cover no-repeat #003399;
    min-width: 24px;
    flex-shrink: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
  .plate-chip__number {
    padding: 0 12px;
    display: flex;
    align-items: center;
    /* FE-Schrift is the regulatory typeface; falls back to a humanist
       sans (DejaVu / Vera Sans / Verdana) if the woff fails to load. */
    font-family: 'FE-Schrift', 'DejaVu Sans', 'Bitstream Vera Sans', Verdana, 'Helvetica Neue', sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000;
    line-height: 1;
  }

  /* --- Vehicle ID rows (origin, listed) --- */
  .id-list { display: flex; flex-direction: column; gap: 10px; }
  .id-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.3;
  }
  .id-row > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
  .id-row__label { color: var(--muted); }
  .id-row__value {
    color: var(--ink);
    font-weight: 600;
    margin-left: auto;
    text-align: right;
    font-feature-settings: "tnum";
  }
  .id-row__value--muted { color: var(--muted); font-weight: 500; }

  /* --- Where to view --- */
  .viewing-place + .viewing-place {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .viewing-place__head {
    margin-bottom: 10px;
  }
  .viewing-place__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }
  .viewing-place__addr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .12s, gap .15s;
  }
  .viewing-place__addr:hover { color: var(--red); gap: 8px; }
  .viewing-place__addr:hover .viewing-place__addr-ext { color: var(--red); }
  .viewing-place__addr-pin { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
  .viewing-place__addr-ext {
    width: 12px; height: 12px;
    color: var(--muted);
    margin-left: 2px;
    transition: color .12s;
  }
  .viewing-place__hours-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .viewing-place__hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    font-size: 13px;
  }
  .viewing-place__hours dt { color: var(--muted); }
  .viewing-place__hours dd { color: var(--ink); font-weight: 600; text-align: right; }
  .viewing-place__hours dd.is-closed { color: var(--muted); font-weight: 500; }

  .viewing-note {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg);
    border-left: 3px solid var(--ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.45;
  }
  .viewing-cta { margin-top: 14px; }

  /* ============================================================
     CONTENT SECTIONS UNDER THE GALLERY (description + features)
     ============================================================ */
  .vdp-section {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-top: 16px;
  }
  .vdp-section__title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin-bottom: 14px;
    line-height: 1.2;
  }

  /* --- Server-rendered listing core ---
     Written into #content by `artisan listing:hydrate-vdp-pages` and
     replaced wholesale by vdp.js the moment it runs. It exists for
     readers that never run JS — social scrapers, Bing's partial
     renderer, LLM crawlers — which until now were handed an empty
     <div id="content"></div>. A real visitor sees it for one frame, so
     it has to look intentional rather than like unstyled markup. */
  .vdp-prerender {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 0 24px;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.6;
  }
  .vdp-prerender h1 {
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .vdp-prerender__price {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .vdp-prerender img {
    width: 100%;
    height: auto;
    border-radius: var(--radius, 12px);
    margin-bottom: 16px;
    background: var(--bg);
  }
  .vdp-prerender dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 20px;
    margin: 0 0 16px;
  }
  .vdp-prerender dt {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .vdp-prerender dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
  }
  .vdp-prerender p { margin: 0 0 10px; }

  /* --- Description --- */
  .vdp-desc__text {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    white-space: pre-line; /* respects paragraph breaks via \n\n */
  }
  .vdp-desc__text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vdp-desc__more {
    display: inline-block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }
  .vdp-desc__more:hover { color: var(--red); }
  /* Author `display` beats the UA sheet's [hidden]{display:none} whatever
     the specificity, so without this the button would paint even while
     hidden. vdp.js ships it hidden and unhides it in syncDescClamps()
     once it has measured whether the description is really cut off. */
  .vdp-desc__more[hidden] { display: none; }

  /* --- Overview (key specs as icon grid, auto.ria style) --- */
  .vdp-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 24px;
  }
  .vdp-overview__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .vdp-overview__icon {
    width: 24px; height: 24px;
    flex-shrink: 0;
    color: var(--ink);
    margin-top: 2px;
  }
  .vdp-overview__icon svg { width: 24px; height: 24px; }
  .vdp-overview__label {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .vdp-overview__value {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.3;
  }
  @media (max-width: 720px) {
    .vdp-overview { grid-template-columns: 1fr 1fr; gap: 16px 16px; }
  }

  /* --- Vehicle features --- */
  .vdp-feat-group {
    border-top: 1px solid var(--line);
  }
  .vdp-feat-group:first-of-type { border-top: 0; }
  .vdp-feat-group__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
  }
  .vdp-feat-group__icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--ink);
  }
  .vdp-feat-group__icon svg { width: 22px; height: 22px; }
  .vdp-feat-group__label { flex: 1; }
  .vdp-feat-group__chev {
    width: 18px; height: 18px;
    color: var(--muted);
    transition: transform .18s;
  }
  .vdp-feat-group[data-expanded="true"] .vdp-feat-group__chev { transform: rotate(180deg); }
  .vdp-feat-group__body {
    display: none;
    padding: 4px 4px 18px 38px;
  }
  .vdp-feat-group[data-expanded="true"] .vdp-feat-group__body { display: block; }
  .vdp-feat-group__list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    color: var(--ink-2);
  }
  .vdp-feat-group__list li {
    font-size: 14px;
    padding: 4px 0;
    line-height: 1.4;
  }

  @media (max-width: 720px) {
    .vdp-section { padding: 16px 16px; margin-top: 12px; }
    .vdp-feat-group__body { padding-left: 28px; }
  }

  /* Not-found state */
  .not-found {
    text-align: center;
    padding: 80px 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .not-found h1 { font-size: 26px; margin-bottom: 10px; }
  .not-found p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
  .not-found a { color: var(--red); font-weight: 700; text-decoration: underline; }

  @media (max-width: 640px) {
    .vdp-title { font-size: 22px; letter-spacing: -0.4px; }
    .price-block__amount { font-size: 26px; }
  }


  /* A listing that is no longer published. listing:hydrate-vdp-pages
     rewrites the baked page's content region to this when the vehicle
     leaves `published` — the URL keeps answering 200 because somebody may
     have linked it, and the page says plainly that the advert has ended
     instead of continuing to show a price. */
  .vdp-gone {
    max-width: 560px;
    margin: 48px auto 80px;
    text-align: center;
  }
  .vdp-gone h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .vdp-gone p { color: var(--muted); font-size: 15px; line-height: 1.6; }
  .vdp-gone a { color: var(--red); font-weight: 600; }

  /* Arriving at /auto_*.html#photos (the "See all photos" link on a search
     card) scrolled the gallery to y=0 — under the sticky header, which is
     78px tall. The counter, the share button and the save button all sat
     behind it, and on a phone the first thing the visitor saw of the car
     they had just tapped was the header covering its controls. */
  .gallery { scroll-margin-top: 90px; }

/* An honest unavailable state keeps the price-comparison explanation reachable. */
.price-rating--unavailable .price-rating__label { color: var(--muted); }
.pr-unavailable { padding: 20px; margin-bottom: 24px; border-radius: 12px; background: var(--bg); color: var(--muted); line-height: 1.5; }
.pr-criteria { padding-left: 20px; margin: 12px 0 18px; line-height: 1.7; }

.vin-chip__icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; color: var(--muted); }
.vin-chip__code { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }

/* Contact reveal stays in the seller card, with only supplied channels shown. */
.contact-actions [hidden] { display: none !important; }
.contact-hint { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
.contact-hint:empty { display: none; }
.contact-value { display: block; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; margin: 0 0 10px; }
.contact-methods { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.contact-method { flex: 1 1 75px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 13px; }
.contact-method:hover { border-color: var(--red); background: var(--bg); }
.contact-method svg, .contact-method>span { width: 28px; height: 28px; color: var(--red); font-size: 28px; line-height: 1; }
.contact-method--whatsapp svg { color: #16a34a; }
.contact-method--email svg { color: #2563eb; }
#seller-contacts:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
#contact-options .contact-hint { margin-bottom: 12px; }
#reveal-contacts:disabled { opacity: .7; cursor: wait; }

.contact-number { margin: 14px 0 0; text-align: center; font-size: 16px; letter-spacing: .02em; }
#contact-options .contact-methods { margin-top: 0; }