/*
============================================================
AUTOMART VEHICLE DETAIL V38.8
CONTINUOUS CONTENT + SCROLL NAVIGATION
============================================================
*/


/* =========================================================
   TAB NAVIGATION
   ========================================================= */

.vehicle-detail-page .detail-tabs {
    display: flex !important;
    align-items: center !important;

    gap: 28px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-bottom:
        1px solid var(--line) !important;

    background:
        #ffffff !important;

    scrollbar-width: none;
}

.vehicle-detail-page .detail-tabs::-webkit-scrollbar {
    display: none;
}


.vehicle-detail-page .detail-tabs button {
    position: relative;

    flex: 0 0 auto;

    appearance: none;

    border: 0 !important;

    padding:
        13px 0 !important;

    background:
        transparent !important;

    color:
        #526174;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    cursor:
        pointer;

    white-space:
        nowrap;
}


.vehicle-detail-page
.detail-tabs button::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    border-radius: 999px;

    background:
        transparent;
}


.vehicle-detail-page
.detail-tabs button.is-active {
    color:
        var(--green2);
}


.vehicle-detail-page
.detail-tabs button.is-active::after {
    background:
        var(--green);
}


/* =========================================================
   ALL CONTENT REMAINS VISIBLE
   ========================================================= */

.vehicle-detail-page
.am-vd-v388-section {
    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    position:
        relative;

    scroll-margin-top:
        155px;
}


.vehicle-detail-page
.am-vd-v388-section[hidden] {
    display:
        block !important;
}


/* =========================================================
   SECTION RHYTHM
   ========================================================= */

.vehicle-detail-page
.am-vd-v388-section +
.am-vd-v388-section {
    margin-top:
        34px;

    padding-top:
        28px;

    border-top:
        1px solid #edf1ef;
}


.vehicle-detail-page
.am-vd-v388-section > h2:first-child,

.vehicle-detail-page
.am-vd-v388-section > h3:first-child {
    margin-top:
        0;
}


/* =========================================================
   HISTORY / REVIEWS EMPTY STATE
   ========================================================= */

.vehicle-detail-page
.am-vd-v388-empty {
    margin-top:
        10px;

    padding:
        20px;

    border:
        1px solid #e4e9ed;

    border-radius:
        11px;

    background:
        #fbfcfc;

    color:
        #667085;
}


.vehicle-detail-page
.am-vd-v388-empty strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #172033;
}


/* =========================================================
   ACTIVE SECTION SUBTLE TARGET
   ========================================================= */

.vehicle-detail-page
.am-vd-v388-section.am-vd-v388-current {
    animation:
        amVdTargetFlash .45s ease;
}


@keyframes amVdTargetFlash {

    from {
        opacity: .76;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px) {

    .vehicle-detail-page
    .detail-tabs {
        gap:
            22px !important;
    }


    .vehicle-detail-page
    .am-vd-v388-section {
        scroll-margin-top:
            125px;
    }

}