/* ============================================================
   Duoporta — Head-to-head comparison page styles
   Loaded by layouts/search.blade.php so the styles are available
   when /search/multi response is injected into #compareArea via AJAX.
   ============================================================ */

#compareArea {
    padding: 0;
}

/* ---------- Sticky head-to-head banner ---------- */
.compare-banner {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 32px;
    background: var(--color-purple-deep);
    color: white;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    margin: 20px;
}

.compare-banner__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
}

.compare-banner__title .ico {
    color: var(--color-accent-on-dark);
    width: 22px;
    height: 22px;
}

.compare-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.compare-banner__btn--ghost {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.compare-banner__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: white;
}

.compare-banner__btn--accent {
    background: var(--color-accent-on-dark);
    color: var(--color-purple-deep);
}

.compare-banner__btn--accent:hover {
    background: var(--color-accent-on-dark-hover);
}

/* ---------- Page wrapper ---------- */
.compare-page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Price comparison row ---------- */
.price-compare {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
}

.price-compare__title {
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--color-purple-deep);
    margin: 0 0 18px;
}

.price-compare__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.price-compare__card {
    position: relative;
    background: linear-gradient(180deg, #ebe2f5 0%, #f4f0fb 100%);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
}

.price-compare__card--best {
    background: linear-gradient(180deg, var(--color-purple-mid) 0%, var(--color-purple-deep) 100%);
    color: white;
}

.price-compare__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.price-compare__brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.price-compare__card--best .price-compare__brand {
    color: rgba(255, 255, 255, 0.7);
}

.price-compare__price {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-purple-deep);
    line-height: 1.1;
}

.price-compare__card--best .price-compare__price {
    color: white;
}

.price-compare__model {
    margin-top: 6px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.price-compare__card--best .price-compare__model {
    color: rgba(255, 255, 255, 0.85);
}

.price-compare__spread {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 18px 0 0;
}

/* ---------- Vehicle head cards (image + name strip) ---------- */
/* Price + heads pinned together as one block; only the spec rows scroll under it.
   Solid page-colour background so scrolling rows can't show through the gaps. */
.compare-sticky {
    position: sticky;
    /*top: 60px;*/
    z-index: 55;
    background: var(--color-bg-page-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 14px;
}

.compare-heads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.compare-head {
    background: linear-gradient(180deg, #d8c2eb 0%, #f4f0fb 60%);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.compare-head__image {
    /* Fixed compact height (not 16:9) so with few cars the wide cards don't become huge
       and blow up the sticky header — keeps the price section and specs visible. */
    position: relative;
    background: linear-gradient(135deg, #4a2470 0%, #2a0f44 60%, #1a0830 100%);
}

.compare-head__image img {
    inset: 0;
    width: 100%;
    overflow-clip-margin: unset;
}

.compare-head__name {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-purple-deep);
    text-align: center;
}

/* A pinned block taller than the room under the banner can never scroll out of the
   way, so the rows beneath it can never be reached — the page scrolls but nothing
   changes. Breakpoints cannot decide this: the same block is comfortable at
   1400x900 and unusable at 1024x768, and its height depends on how many vehicles
   are being compared. The page scripts measure it and add this class. */
.compare-sticky.is-unpinned,
.single-hero.is-unpinned {
    position: static;
}

/* ---------- Show differences toggle ---------- */
.diff-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.diff-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-purple-deep);
    cursor: pointer;
    user-select: none;
}

.diff-toggle__label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.diff-toggle__track {
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: #d5c8e6;
    position: relative;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.diff-toggle__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(42, 15, 68, 0.3);
    transition: transform 0.15s ease;
}

.diff-toggle__label input:checked + .diff-toggle__track {
    background: var(--color-accent);
}

.diff-toggle__label input:checked + .diff-toggle__track::after {
    transform: translateX(18px);
}

/* ---------- Specs view toggle ----------
   The compare page has two screen views driven by .specs-open on .compare-page:
     closed (default) = prices + pictures, spec table hidden
     open             = spec table only, prices + pictures hidden
   Print ignores both and renders everything — see the @media print block. */

.compare-page.specs-open .compare-table-wrap {
    display: block;
}

.compare-page.specs-open .compare-sticky {
    display: none;
}

.compare-page.specs-open .diff-toggle__label {
    display: inline-flex;
}

/* Button sits at the start of the controls row; the differences toggle stays right */
.diff-toggle {
    justify-content: space-between;
    align-items: center;
}

.specs-toggle {
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.specs-toggle:hover {
    background: var(--color-purple-mid);
}

/* Rows where all vehicles share the same value, hidden while the toggle is on */
.compare-table tbody tr.is-same-hidden {
    display: none;
}

/* ---------- Mobile column-header strip ----------
   Shown only while the price+pictures block is NOT pinned (phones, landscape, any
   viewport the fit guard gives up on). Sits outside .compare-page so it can pin to
   the viewport: .compare-page is the horizontal scroller there, and sticky does not
   survive an overflow ancestor. The page script sets its `top` from the banner's
   measured height and mirrors its scrollLeft onto the scroller's. */
.specs-header-strip {
    display: none;
}

/* fixed, not sticky: sticky would reserve 57px in the flow even before it was
   needed, and would sit above the price cards at the top of the page next to the
   real header. Fixed takes no space, so the script can reveal it at the exact
   moment the real header row slides under the banner. */
.specs-header-strip.is-active {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    z-index: 56;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Matches .compare-page > * so the cloned header lines up with the rows below it */
.specs-header-strip table {
    min-width: 940px;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.specs-header-strip th {
    background: var(--color-purple-deep);
    color: white;
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
}

/* ---------- Spec table ---------- */
.compare-table-wrap {
    background: white;
    border-radius: var(--radius-lg);
    /* NOT overflow:hidden — that would trap the sticky <thead> in the wrapper instead of
       letting it pin to the viewport below the price+heads block. */
    box-shadow: var(--shadow-card);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Sticky spec-header row — pinned just below the price+heads block (offset set by JS in
   --specs-sticky-top, since that block's height varies with car count / screen width). */
.compare-table thead th {
    /*position: sticky;*/
    /*top: var(--specs-sticky-top, 200px);*/
    z-index: 40;
    background: var(--color-purple-deep);
    color: white;
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
}

.compare-table thead th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.compare-table thead th:last-child {
    border-top-right-radius: var(--radius-lg);
}

.compare-table tbody tr:nth-child(odd) td {
    background: #faf7fd;
}

.compare-table tbody tr:hover td {
    background: #f0e9f8;
}

.compare-table td {
    padding: 10px 16px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.compare-table__label {
    font-weight: 600;
    color: var(--color-purple-deep);
}

/* ---------- Overall winner panel ---------- */
.winner-panel {
    background: linear-gradient(180deg, #ebe2f5 0%, #f4f0fb 100%);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.winner-panel__label {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 8px;
}

.winner-panel__name {
    margin: 0 0 6px;
    font-size: 22px;
    color: var(--color-purple-deep);
    font-weight: 800;
}

.winner-panel__sub {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ---------- Download report banner ---------- */
.download-banner {
    background: var(--color-purple-deep);
    color: white;
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--shadow-card);
}

.download-banner strong {
    font-size: 15px;
}

.download-banner__sub {
    font-size: 12px;
    color: var(--color-text-on-dark-muted);
    margin-top: 4px;
}

.download-banner__btn {
    background: var(--color-accent-on-dark);
    color: var(--color-purple-deep);
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.download-banner__btn:hover {
    background: var(--color-accent-on-dark-hover);
}

/* Head-to-head icon — uses gearshift glyph (matches the spirit of "compare two paths") */
.ico-head2head {
    --ico: url('/img/site/icons/gearshift.svg');
}

/* ---------- Responsive ---------- */
/* screen-only: an A4 print page is ~794px wide, which would otherwise match this
   query and apply the 940px min-width to the PDF, clipping the report. */
/* Also catches phones in landscape: wide enough to miss max-width: 800px, but far
   too short to pin a block this tall. Without the height arm the banner + price +
   pictures stack (876px measured with four cars) covers a ~394px viewport entirely
   and the spec rows can never be scrolled to. The 1100px bound keeps ordinary
   desktop windows out of the mobile layout. */
@media screen and (max-width: 800px),
       screen and (max-width: 1100px) and (max-height: 600px) {
    /* Client asked for the mobile compare screen to match the desktop layout,
       accepting left/right scrolling (Antony, 12 Aug 2026). .compare-page becomes
       the horizontal scroller: body sets overflow-x: clip, so page-level sideways
       scrolling is unavailable and the scroller has to live here. */
    .compare-page {
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* One desktop width for every block, so price cards, head cards and spec
       columns stay aligned as a single grid while scrolling. The auto-fit grids
       re-form into rows by themselves once this width applies. */
    .compare-page > * {
        /* 940px so four head cards still fit one row: their auto-fit grid needs
           4 x 220px + 3 x 16px gap = 928px. Below that the fourth card wraps and
           stops lining up with the price cards and spec columns. */
        min-width: 940px;
    }

    /* The overflow above makes .compare-page the containing block for sticky
       descendants, so neither the price+heads block nor the spec header can pin
       to the viewport any more. The banner sits outside .compare-page and still
       pins to the top. */
    .compare-sticky {
        position: static;
    }

    .compare-table thead th {
        position: static;
    }

    /* Keep the spec name on screen while the value columns scroll sideways —
       without this you are left reading unlabelled numbers. */
    .compare-table th.compare-table__label,
    .compare-table td.compare-table__label {
        /*position: sticky;*/
        /*left: 0;*/
        /*z-index: 30;*/
    }

    /* Opaque, so value cells cannot show through while passing underneath.
       Odd rows and :hover already paint this cell; this covers even rows. */
    .compare-table td.compare-table__label {
        background: #fff;
    }

    /* Client request (Antony/David, 28 Sep 2026): drop this to the bottom like the
       Compare bar on the results page and make it small. Stacked at the top it was
       154px of a phone screen - over a third of a landscape one - and it was the main
       reason the specs had no room. Down here it costs ~56px and the whole top of the
       screen belongs to the comparison. */
    .compare-banner {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 8px 12px;
        border: none;
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    }

    /* Decorative on a phone, and the space is needed for the two buttons */
    .compare-banner__title {
        display: none;
    }

    .compare-banner__btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Keep the last rows clear of the bar */
    .compare-page {
        padding-bottom: 72px;
    }

    .compare-banner__title {
        font-size: 15px;
    }
}

/* ============================================================
   Single vehicle detail page — fragment injected into
   #vehicle-search-results by search.js on "View Details" click
   ============================================================ */
.single-banner {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: var(--color-purple-deep);
    color: white;
    border-radius: var(--radius-md);
    margin: 20px;
    box-shadow: 0 4px 16px rgba(42, 15, 68, 0.25);
}

.single-banner__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    text-align: center;
}

.single-banner__brand {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    font-weight: 700;
}

.single-banner__name {
    font-size: 16px;
    font-weight: 700;
}

.single-banner__price {
    font-size: 18px;
    font-weight: 800;
    color: white;
}

.single-page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hero image + thumbnails */
.single-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-hero__image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #4a2470 0%, #2a0f44 60%, #1a0830 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
}

.single-hero__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow-clip-margin: unset;
}

.single-hero__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.single-hero__thumb {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #4a2470, #2a0f44);
}

.single-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    overflow-clip-margin: unset;
}

/* ---------- Single page: pinned picture block (client request, 21 Sep 2026) ----------
   Mirrors the compare page: the banner pins at the top, the picture block pins
   beneath it, and the spec rows scroll underneath. Desktop only — on phones it
   stays static for the same reason .compare-sticky does (too tall to pin).
   The hero is held to a fixed height, the way compare's head pictures are capped
   to 100px, so it cannot take over the viewport; object-fit: contain keeps the
   car whole and undistorted on the purple band. `top` is refined by the page
   script from the banner's real height. */
/* min-height guard: a landscape phone is wide enough to match min-width: 801px but
   only ~394px tall, where banner + pinned hero (409px) leaves nothing for the specs.
   Below that height the hero stays static at its natural size. */
@media screen and (min-width: 801px) and (min-height: 601px) {
    .single-hero {
        position: sticky;
        top: 52px;
        z-index: 55;
        background: var(--color-bg-page-light);
        padding-bottom: 14px;
    }

    .single-hero__image {
        aspect-ratio: auto;
        height: 260px;
    }

    .single-hero__image img {
        height: 100%;
        object-fit: contain;
    }

    .single-hero__thumbs {
        /* Fixed 96px thumbs (the 1fr columns would grow to ~340px with four images
           and blow the pinned block up). auto-fit, not auto-fill, so the empty
           tracks collapse and the thumbs centre under the car. */
        grid-template-columns: repeat(auto-fit, 96px);
        justify-content: center;
    }
}

/* Title block */
.single-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
}

.single-title__brand {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    font-weight: 700;
}

.single-title__name {
    margin: 4px 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-purple-deep);
    line-height: 1.15;
}

.single-title__model {
    font-size: 13px;
    color: var(--color-text-muted);
}

.single-title__price-block {
    text-align: right;
}

.single-title__price-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.single-title__price {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-purple-deep);
    line-height: 1.1;
}

/* CTA row */
.single-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.single-actions__cta,
.single-actions__enquire {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.single-actions__cta {
    background: white;
    color: var(--color-purple-deep);
    border: 1.5px solid var(--color-purple-deep);
}

.single-actions__cta:hover {
    background: var(--color-purple-deep);
    color: white;
}

.single-actions__enquire {
    background: var(--color-accent);
    color: white;
}

.single-actions__enquire:hover {
    background: var(--color-accent-hover);
}

/* Spec table */
.single-specs {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
}

.single-specs__title {
    margin: 0 0 14px;
    font-size: 18px;
    color: var(--color-purple-deep);
    font-weight: 700;
}

.single-specs__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.single-specs__table tr:nth-child(odd) td {
    background: #faf7fd;
}

.single-specs__table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-border);
}

.single-specs__label {
    font-weight: 600;
    color: var(--color-purple-deep);
    width: 40%;
}

.single-specs__value {
    color: var(--color-text);
}

@media (max-width: 800px) {
    .single-banner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .single-banner__price {
        font-size: 16px;
    }

    .single-page {
        padding: 14px;
        gap: 16px;
    }

    .single-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .single-title__price-block {
        text-align: left;
    }

    .single-title__name {
        font-size: 22px;
    }

    .single-specs {
        padding: 18px 16px;
    }
}

/* ============================================================
   PRINT STYLES — drives "Download Report" → Save as PDF
   Hides interactive chrome and tightens layout for paper/PDF.
   ============================================================ */
@media print {
    /* Page setup: A4-friendly margins handled by browser */
    @page {
        margin: 12mm 10mm;
        size: landscape;
    }

    /* Strip everything not relevant to the report */
    .hero,
    .search-bar,
    .site-footer,
    .compare-bar,
    .filters,
    .filters-backdrop,
    .filters-toggle,
    #compareButs,
    .compare-banner__btn,
    .single-banner button,
    .single-actions,
    .diff-toggle,
    .download-banner__btn {
        display: none !important;
    }

    /* The specs toggle is a screen-only affordance. The report always contains both
       halves, whichever view is on screen when Download is pressed — otherwise the
       default view (specs hidden) would export a PDF with no specifications in it. */
    .compare-page .compare-table-wrap {
        display: block !important;
    }

    .compare-page.specs-open .compare-sticky {
        display: flex !important;
    }

    /* No sticky elements — print needs natural flow */
    .compare-banner,
    .single-banner {
        position: static !important;
        margin: 0 0 12pt !important;
        padding: 10pt 12pt !important;
        border-radius: 0 !important;
        border: none !important;
        background: #2a0f44 !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Title chip readable in print */
    .compare-banner__title {
        font-size: 14pt !important;
        letter-spacing: 1.5pt;
    }

    .compare-banner__title .ico {
        display: none !important;
    }

    /* Cards / panels keep their backgrounds in print (force colors on) */
    .price-compare,
    .compare-head,
    .compare-table-wrap,
    .winner-panel,
    .download-banner,
    .single-specs,
    .vehicle-card,
    .spec-chip,
    .price-compare__card--best {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Tables — keep rows together where possible */
    .compare-table,
    .single-specs__table {
        font-size: 9pt !important;
        page-break-inside: auto;
    }

    .compare-table tr,
    .single-specs__table tr {
        page-break-inside: avoid;
    }

    .compare-table thead,
    .single-specs__table thead {
        display: table-header-group;
    }

    /* Drop hover/transition noise */
    * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* Background colour fixups */
    body,
    .page {
        background: white !important;
    }

    /* Show URLs after links (helpful in print) */
    a[href]:after {
        content: '';
    }

    /* The Download Report banner itself looks better as just a heading in print */
    .download-banner {
        background: white !important;
        color: var(--color-purple-deep) !important;
        border-top: 2pt solid var(--color-purple-deep);
        padding: 8pt 0 !important;
    }

    .download-banner__sub {
        color: #555 !important;
    }
}

.modal-backdrop {
    display: none !important;
}

.car-gallery {
    position: relative;
}

.vehicle-card__image .rslides,
.vehicle-card__image .rslides li,
.vehicle-card__image .rslides a.image-link {
    height: 100%;
}
.compare-page .rslides img {
    /*max-height: 100px;*/
    width: auto !important;
}
.vehicle-card__image .rslides img {
    object-fit: fill;
    overflow-clip-margin: unset;
    float: none;
}

/* < > arrows appended by responsiveSlides (namespace "centered-btns").
   Restyled from the old themes.gif sprite to match the new card design. */
.centered-btns_nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-indent: -9999px;
    transition: background 0.15s ease;
}

.centered-btns_nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    width: 9px;
    height: 9px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.centered-btns_nav.next {
    left: auto;
    right: 8px;
}

.centered-btns_nav.next::before {
    left: 45%;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.centered-btns_nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Magnifier badge — signals "click to zoom"; pointer-events none lets the
   click fall through to a.image-link, which opens the magnific gallery. */
.car-gallery .fa-search-plus {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    pointer-events: none;
}