/* ═══════════════════════════════════════════════════════════════════════════
   Car detail page — one card recipe, one heading scale
   ═══════════════════════════════════════════════════════════════════════════

   The VDP grew a section at a time and each one invented its own surface. Audited
   on 2026-07-30, the cards disagreed on every axis at once:

     .car-trim-ladder__card    --vdp-radius-sm  --border-light           --bg-card, pad 12px 14px
     .listing-packages-panel   --main-radius    rgba(255,255,255,0.10)   rgba(255,255,255,0.02), pad 16px
     headings                  1.05rem ... 1.35rem, mixed weights

   Two of those radii are different tokens, and the rgba(255,255,255,…) border and
   background are dark-theme values left on a light page — which is why the panels
   read as "different shades" even where the intent was the same.

   This partial loads last and normalises the shared surfaces to a single recipe
   rather than editing a dozen rules in place, so the individual sections keep
   owning their layout and only the skin is centralised. Map tiles and the photo
   gallery are left alone.
   ══════════════════════════════════════════════════════════════════════════ */

body.car-detail-page {
    --vdp-card-bg: var(--bg-card);
    --vdp-card-border-color: var(--border-light);
    --vdp-card-radius: var(--vdp-radius-sm, 12px);
    --vdp-card-pad: 18px;
}

/* ---- Surfaces ----
   2026-09-30: the page has no cards. Sections are separated by whitespace and a
   1px hairline in --border-light; figures sit on hairlines, statuses are coloured
   text. The only framed surfaces left are the two that reproduce a physical
   document: the Monroney build sheet sections and the window-sticker embed. */

body.car-detail-page .build-sheet-section {
    background: var(--vdp-card-bg);
    border: 1px solid var(--vdp-card-border-color);
    border-radius: var(--vdp-card-radius);
    box-shadow: none;
}

body.car-detail-page .listing-packages-panel {
    padding: 18px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--vdp-card-border-color);
    border-radius: 0;
    box-shadow: none;
}

/* Trim rows are a dense list on hairlines (03-car-page.css owns the rhythm). */
body.car-detail-page .car-trim-ladder__card {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--vdp-card-border-color);
    border-radius: 0;
    padding: 10px 0 12px;
}

/* ---- Heading scale ----
   Four sizes were in play across h2/h3/h4. Collapse to three steps that track
   nesting depth instead of which section happened to define them. */

body.car-detail-page .car-vdp-panel-title,
body.car-detail-page .car-hero-glance-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

body.car-detail-page .car-trim-ladder__title,
body.car-detail-page .build-sheet-title,
body.car-detail-page .car-window-sticker-title,
body.car-detail-page .history-panel-title,
body.car-detail-page .vehicle-history-tools-heading,
body.car-detail-page .dealer-panel-section-title {
    font-size: 1.075rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
}

body.car-detail-page .listing-packages-sub-heading,
body.car-detail-page .car-window-sticker-sub,
body.car-detail-page .build-sheet-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Section rhythm ----
   Panels previously set their own top margins, so gaps between sections varied
   with whichever card happened to be adjacent. */

body.car-detail-page .car-vdp-panel > * + * {
    margin-top: 18px;
}

body.car-detail-page .car-vdp-panel-title + .car-vdp-panel-lead {
    margin-top: 4px;
}

/* ---- Build sheet: give the sections room ----
   `.build-sheet-section` was listed in the surface rule above (border, radius,
   background) but NOT in the padding rule beside it, so each section drew a box
   and then pressed its title and rows flat against that box's edge. The result
   read as one dense slab rather than four labelled groups. Padding the section
   is the actual fix; the rest below is rhythm inside it. */

body.car-detail-page .build-sheet-section {
    padding: 16px 18px 14px;
}

/* Sections are the unit the eye should land on, so separate them more than the
   rows inside them. Row gap is deliberately larger than column gap: stacked on
   a narrow screen the sections must not read as one continuous list. */
body.car-detail-page .build-sheet-grid {
    gap: 20px 24px;
}

/* 3px rows in a bordered box is what made this feel airless. */
body.car-detail-page .build-sheet-spec-row {
    padding: 7px 0;
}

body.car-detail-page .build-sheet-section-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vdp-card-border-color);
}

/* The header, the price strip and the disclaimer are the sheet's own furniture
   — they sit outside the section cards and were competing with them for space. */
body.car-detail-page .build-sheet {
    padding: 20px 20px 18px;
}

body.car-detail-page .build-sheet-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
}

body.car-detail-page .build-sheet-pricing {
    gap: 8px 32px;
    margin-bottom: 20px;
    padding: 14px 0;
}

body.car-detail-page .build-sheet-equip {
    margin-top: 22px;
    padding-top: 18px;
}

body.car-detail-page .build-sheet-disclaimer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--vdp-card-border-color);
}

/* ---- No chips ----
   Provenance tags are small uppercase text, not filled pills. .spec-source-badge's
   base rule lives in 06-dev.css; the packages list borrows the build sheet's
   .build-sheet-src tags, which stay framed only inside the Monroney replica. */

body.car-detail-page .spec-source-badge {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text-faint);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

body.car-detail-page .listing-packages-panel .build-sheet-src {
    padding: 0;
    margin-left: 6px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-style: normal;
    color: var(--text-faint);
}