/**
 * RVH Advertisements 2.8.7 — Product Layout Engine
 * Eén breedte-, spacing- en responsive systeem voor alle productcomponenten.
 */
body.rvh-layout-engine-287 {
    --rvh-layout-max: 1440px;
    --rvh-layout-gutter: clamp(10px, 3vw, 32px);
    --rvh-layout-section-gap: clamp(28px, 4vw, 52px);
    --rvh-layout-card-gap: clamp(12px, 2vw, 20px);
    overflow-x: clip;
}

body.rvh-layout-engine-287 .rvh-layout-page {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 110px !important;
    transform: none !important;
    overflow: visible !important;
}

/* De hero is bewust full width; alle inhoud eronder volgt één container. */
body.rvh-layout-engine-287 .rvh-layout-hero {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--rvh-layout-section-gap) !important;
    transform: none !important;
}

body.rvh-layout-engine-287 .rvh-layout-container,
body.rvh-layout-engine-287 #rvh-vehicle-overview {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: min(calc(100% - (2 * var(--rvh-layout-gutter))), var(--rvh-layout-max)) !important;
    max-width: var(--rvh-layout-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: none !important;
}

body.rvh-layout-engine-287 .rvh-layout-section,
body.rvh-layout-engine-287 #rvh-vehicle-overview {
    margin-top: var(--rvh-layout-section-gap) !important;
}

/* Hoofdgrid: media en aankoopkaart. */
body.rvh-layout-engine-287 .rvh-layout-primary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr) !important;
    align-items: start !important;
    gap: clamp(20px, 3vw, 38px) !important;
    padding: 0 !important;
}

body.rvh-layout-engine-287 .rvh-v271-media,
body.rvh-layout-engine-287 .rvh-v271-purchase-card,
body.rvh-layout-engine-287 .rvh-v271-gallery,
body.rvh-layout-engine-287 .rvh-v271-detail-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.rvh-layout-engine-287 .rvh-v271-purchase-card {
    position: sticky;
    top: calc(var(--rvh-header-height, 88px) + 20px);
}

/* Alle interne grids delen dezelfde regels. */
body.rvh-layout-engine-287 .rvh-v271-details-grid,
body.rvh-layout-engine-287 .rvh-v271-detail-grid,
body.rvh-layout-engine-287 #rvh-vehicle-overview .rvh-v271-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rvh-layout-card-gap) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.rvh-layout-engine-287 .rvh-v271-section-heading,
body.rvh-layout-engine-287 #rvh-vehicle-overview .rvh-v271-section-heading {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
    padding: 0 !important;
}

body.rvh-layout-engine-287 .rvh-v271-package,
body.rvh-layout-engine-287 .rvh-v271-keyfacts,
body.rvh-layout-engine-287 .rvh-v271-contact-section,
body.rvh-layout-engine-287 .rvh-v271-section {
    float: none !important;
    clear: both !important;
}

/* Neutraliseer historische viewport- en transform-hacks binnen de productlayout. */
body.rvh-layout-engine-287 .rvh-layout-page > :not(.rvh-layout-hero),
body.rvh-layout-engine-287 #rvh-vehicle-overview,
body.rvh-layout-engine-287 .rvh-v271-package {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

body.rvh-layout-engine-287 .rvh-v271-detail-card dl,
body.rvh-layout-engine-287 .rvh-v271-detail-card dl > div {
    width: 100% !important;
    min-width: 0 !important;
}

body.rvh-layout-engine-287 .rvh-v271-detail-card dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) !important;
}

body.rvh-layout-engine-287 .rvh-v271-detail-card dt,
body.rvh-layout-engine-287 .rvh-v271-detail-card dd {
    min-width: 0 !important;
    width: auto !important;
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    body.rvh-layout-engine-287 .rvh-layout-primary-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr) !important;
    }
}

@media (max-width: 900px) {
    body.rvh-layout-engine-287 {
        --rvh-layout-gutter: 14px;
    }

    body.rvh-layout-engine-287 .rvh-layout-primary-grid {
        grid-template-columns: 1fr !important;
    }

    body.rvh-layout-engine-287 .rvh-v271-purchase-card {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 700px) {
    body.rvh-layout-engine-287 {
        --rvh-layout-gutter: 10px;
        --rvh-layout-section-gap: 32px;
        --rvh-layout-card-gap: 12px;
    }

    body.rvh-layout-engine-287 .rvh-layout-page {
        padding-bottom: 92px !important;
    }

    body.rvh-layout-engine-287 .rvh-layout-hero {
        margin-bottom: 24px !important;
    }

    body.rvh-layout-engine-287 .rvh-v271-details-grid,
    body.rvh-layout-engine-287 .rvh-v271-detail-grid,
    body.rvh-layout-engine-287 #rvh-vehicle-overview .rvh-v271-details-grid {
        grid-template-columns: 1fr !important;
    }

    body.rvh-layout-engine-287 .rvh-v271-detail-card dl > div {
        grid-template-columns: minmax(0, 1fr) minmax(105px, .8fr) !important;
        gap: 10px !important;
    }

    body.rvh-layout-engine-287 .rvh-v271-detail-card dd {
        text-align: right;
    }
}