/* Keep both customer journeys in normal flow, including long translations. */
@media (max-width: 991.98px) {
    body.engine-page .brand-banner .brand-mobile-block {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible;
    }
    body.engine-page .brand-banner .brand-mobile-block .brand-mobile-image-block {
        height: auto !important;
        position: relative;
    }
    body.engine-page .brand-banner .brand-mobile-block .checkout-button {
        display: block;
        width: 100%;
        height: auto !important;
        min-height: 56px !important;
        line-height: 1.4 !important;
        white-space: normal;
        overflow-wrap: anywhere;
        padding-top: 14px;
        padding-bottom: 14px;
        position: relative;
    }
    body.engine-page .brand-banner .brand-mobile-block .checkout-button strong {
        font-size: inherit !important;
    }
    body.engine-page .brand-banner .brand-mobile-block form,
    body.engine-page .brand-banner .brand-mobile-block .mobile-button-wrapper {
        position: static;
        height: auto;
        clear: both;
    }
}

@media (max-width: 991.98px) {
    body.engine-page .contact-bubble-wrapper { left: 12px; bottom: 12px; }
    body.engine-page .contact-bubble-wrapper > .contact-bubble-badge { display: none; }
    body.engine-page .contact-bubble,
    body.engine-page .contact-bubble-image-wrapper,
    body.engine-page .contact-bubble-image-wrapper img { width: 44px; height: 44px; }
}

@media (max-width: 991.98px) {
    body.engine-page .brand-banner .brand-mobile-block {
        border-radius: 16px;
        border: 1px solid #e3e9ee;
        box-shadow: 0 12px 32px #10182018;
    }
    body.engine-page .brand-banner .brand-mobile-block .brand-mobile-image-block {
        padding-top: 36px;
        padding-bottom: 4px;
    }
    body.engine-page .brand-banner .brand-mobile-block img.model-image {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: contain;
        margin: 0 !important;
    }
    body.engine-page .brand-banner .brand-mobile-block img.brand-image {
        width: 34px;
        height: 34px;
        max-width: 34px;
        top: 0;
        left: 0;
        aspect-ratio: 1;
        object-fit: contain;
    }
    .mcf-vehicle-caption { color: #172b3a; font-size: 18px; font-weight: 700; line-height: 1.3; margin: 4px 0 20px; }
    .mcf-vehicle-caption span { display: block; color: #536778; font-size: 15px; font-weight: 400; margin-top: 4px; }
}

/* The critical stylesheet fixes the hero at 800px and absolutely positions
   the vehicle card. Let the whole card participate in document flow instead. */
@media (max-width: 991.98px) {
    body.engine-page #herocontainer.menu-header {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 110px !important;
        isolation: isolate;
        overflow: visible;
    }
    body.engine-page #herocontainer > .brand-banner {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-top: 0 !important;
    }
    body.engine-page #herocontainer > picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    body.engine-page #herocontainer > picture .heading-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 992px) {
    body.engine-page .model-image-wrapper.has-price-banner {
        padding-top: 32px !important;
    }
    body.engine-page .model-image-wrapper .mcf-order-vehicle-photo {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        height: auto !important;
        object-fit: contain;
        margin: 0 auto 12px;
    }
}