/* ==========================================================
   CarHub Vehicle Page
========================================================== */

:root{

    --vehicle-primary:#2563EB;
    --vehicle-primary-dark:#1D4ED8;

    --vehicle-text:#111827;
    --vehicle-text-light:#6B7280;

    --vehicle-border:#E5E7EB;

    --vehicle-background:#FFFFFF;
    --vehicle-background-light:#F8FAFC;

    --vehicle-shadow:
        0 8px 30px rgba(15,23,42,.06);

}

/* ==========================================================
   Reset
========================================================== */

*{

    box-sizing:border-box;

}

body{

    margin:0;

    background:var(--vehicle-background-light);

    color:var(--vehicle-text);

    font-family: "Inter", sans-serif;

}

/* ==========================================================
   Main Vehicle Page
========================================================== */

#vehicle-single-page{

    width:100%;

    min-height:100vh;

}

/* ==========================================================
   Vehicle Page Button Focus Reset
========================================================== */

#vehicle-single-page button{
    -webkit-tap-highlight-color: transparent;
}

#vehicle-single-page button:focus{
    outline:none;
}

#vehicle-single-page button:focus-visible{
    outline:none;
    box-shadow:none;
}

/* ==========================================================
   Section 1
   Hero Section
========================================================== */

.vehicle-hero{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:16px 12px 80px;

}

/* ==========================================================
   Sticky Navigation
========================================================== */

.vehicle-sticky-navigation{

    position:sticky;

    top:var(--carhub-home-header-height,64px);

    z-index:1000;

    display:flex;

    align-items:stretch;

    width:100%;

    background:var(--vehicle-background);

    border-bottom:1px solid var(--vehicle-border);

    box-shadow:var(--vehicle-shadow);

}

/*
 * The shared homepage header hides completely while the user scrolls
 * down. Its wrapper intentionally remains in document flow, so the
 * vehicle sticky navigation must also move to the top of the viewport.
 * This removes the empty gap above the sticky navigation.
 */
.carhub-global-header.carhub-header-hidden + #vehicle-single-page
.vehicle-sticky-navigation{
    top:var(--carhub-home-adminbar-height,0px);
}

/* Keep in-page sticky-navigation targets visible after smooth scrolling. */
#vehicle-price-summary,
#vehicle-compare,
#vehicle-gallery,
#vehicle-user-reviews-preview,
#vehicle-variants,
#vehicle-videos,
#vehicle-mileage,
#vehicle-news,
#vehicle-faq,
#vehicle-dealers,
#vehicle-service-center,
#vehicle-emi,
#vehicle-loan {
    scroll-margin-top: calc(var(--carhub-home-header-height, 64px) + 43px + 12px);
}

/* ==========================================================
   Navigation Scroll Area
========================================================== */

.vehicle-navigation-scroll{

    flex:1;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

}

.vehicle-navigation-scroll::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
   Navigation Menu
========================================================== */

.vehicle-sticky-navigation__menu{

    display:flex;

    align-items:center;

    gap:26px;

    list-style:none;

    margin:0;

    padding:0 20px;

    min-width:max-content;

    white-space:nowrap;

}



/* ==========================================================
   Navigation Links
========================================================== */

.vehicle-sticky-navigation__menu a,

.vehicle-more-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    height:43px;

    color:var(--vehicle-text);

    font-size:15px;

    font-weight:500;

    letter-spacing:.1px;

    text-decoration:none;

    background:none;

    border:none;

    cursor:pointer;

    transition:.25s;

    position:relative;

}

/* ==========================================================
   Hover
========================================================== */

.vehicle-sticky-navigation__menu a:hover,

.vehicle-more-toggle:hover{

    color:var(--vehicle-primary);

}

/* ==========================================================
   Active Underline
========================================================== */

.vehicle-sticky-navigation__menu a::after,

.vehicle-more-toggle::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:var(--vehicle-primary);

    transform:scaleX(0);

    transition:.25s;

}

.vehicle-sticky-navigation__menu a:hover::after,

.vehicle-sticky-navigation__menu a.is-active::after,

.vehicle-more-toggle:hover::after,

.vehicle-more-toggle.is-active::after{

    transform:scaleX(1);

}

/* ==========================================================
   More Menu
========================================================== */

.vehicle-more-menu{

    position:relative;

    flex:0 0 auto;

    display:flex;

    align-items:center;

    padding:0 24px;

    background:var(--vehicle-background);

    border-left:1px solid var(--vehicle-border);

}

.vehicle-more-toggle{

    display:flex;

    align-items:center;

    gap:8px;

    padding:0;

    font-size:15px;
    font-weight:500;
    line-height:1;
    letter-spacing:.1px;

}

/* ==========================================================
   More Arrow
========================================================== */

.vehicle-more-arrow{

    font-size:12px;

    transition:transform .25s ease;

}

.vehicle-more-menu.is-open .vehicle-more-arrow{

    transform:rotate(180deg);

}

/* ==========================================================
   Dropdown
========================================================== */

.vehicle-more-dropdown{

    position:absolute;

    top:100%;

    right:24px;

    width:260px;

    padding:10px 0;

    margin:0;

    list-style:none;

    background:#fff;

    border:1px solid var(--vehicle-border);

    border-radius:16px;

    box-shadow:0 20px 40px rgba(15,23,42,.14);

    display:none;

    z-index:1001;

}

.vehicle-more-menu.is-open .vehicle-more-dropdown{

    display:block;

}

.vehicle-more-dropdown li{

    margin:0;

}

.vehicle-more-dropdown a{

    display:block;

    padding:12px 20px;

    height:auto;

    color:var(--vehicle-text);

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    line-height:1.4;

}

.vehicle-more-dropdown a:hover{

    background:var(--vehicle-background-light);

    color:var(--vehicle-primary);

}


/* ==========================================================
   Temporary Heights
   (Removed as each commit is implemented)
========================================================== */

/* ==========================================================
   Vehicle Header
========================================================== */

.vehicle-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    padding:4px 0;

    margin-bottom:10px;

    background:transparent;

    border:none;

    border-radius:0;

}


/* ==========================================================
   Header Left
========================================================== */

.vehicle-header__left{

    flex:1;

    min-width:0;

}

/* ==========================================================
   Vehicle Title
========================================================== */

.vehicle-header__title{

    margin:0;

    color:var(--vehicle-text);

    font-size:24px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-0.02em;

}

/* ==========================================================
   Header Right
========================================================== */

.vehicle-header__right{

    display:flex;

    align-items:flex-start;

    gap:8px;

    flex-shrink:0;

}

/* ==========================================================
   Header Buttons
========================================================== */

.vehicle-header__share,

.vehicle-header__favorite{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    padding:0;

    border:1px solid var(--vehicle-border);

    border-radius:50%;

    background:#ffffff;

    color:var(--vehicle-text-light);

    cursor:pointer;

    transition:all .25s ease;

}

.vehicle-header__share:hover,

.vehicle-header__favorite:hover{

    border-color:var(--vehicle-primary);

    color:var(--vehicle-primary);

}

/* ==========================================================
   Icons
========================================================== */

.vehicle-header__share-icon,

.vehicle-header__favorite-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    font-size:15px;

    line-height:1;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .vehicle-header{

        gap:10px;

        padding:2px 0;

        margin-bottom:8px;

    }

    .vehicle-header__title{

        font-size:22px;

    }

    .vehicle-header__share,

    .vehicle-header__favorite{

        width:32px;

        height:32px;

    }

}

/* ==========================================================
   Rating Summary
========================================================== */

.vehicle-rating-summary{

    display:flex;

    align-items:center;

    overflow:hidden;

    width:100%;

    margin-bottom:16px;

    background:#ffffff;

    border:1px solid var(--vehicle-border);

    border-radius:10px;

}

.vehicle-rating-card{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:1;

    padding:10px 14px;

    color:var(--vehicle-text);

    text-decoration:none;

    white-space:nowrap;

    transition:background .25s ease;

}

.vehicle-rating-card:hover{

    background:var(--vehicle-background-light);

}

.vehicle-rating-card + .vehicle-rating-card{

    border-left:1px solid var(--vehicle-border);

}

/* ==========================================================
   Rating Score
========================================================== */

.vehicle-rating-card__score{

    color:#F97316;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

/* ==========================================================
   Rating Label
========================================================== */

.vehicle-rating-card__label{

    color:var(--vehicle-text);

    font-size:12px;

    font-weight:500;

    line-height:1;

    white-space:nowrap;

}

/* ==========================================================
   Hero Blocks
========================================================== */

.vehicle-gallery,

.vehicle-media-navigation,

.vehicle-price-summary,

.vehicle-emi-card,

.vehicle-primary-cta{

    width:100%;

    background:#ffffff;

    border-radius:16px;

    margin-bottom:20px;

}



/* ==========================================================   
Section 1 - Hero Section
Sub Section Commit 27.5 Hero Gallery
========================================================== */

.vehicle-gallery{

    margin-bottom:16px;

    cursor:pointer;

}

/* ==========================================================
   Gallery Slider
========================================================== */

.vehicle-gallery__slider{

    display:flex;

    flex-direction:column;

    gap:12px;

}

/* ==========================================================
   Main Gallery
========================================================== */

.vehicle-gallery__main{

    position:relative;

    width:100%;

    aspect-ratio:16 / 11;

    overflow:hidden;

    background:#F3F4F6;

    border-radius:18px;

}

/* ==========================================================
   Gallery Image
========================================================== */

.vehicle-gallery__image{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    background:#FFFFFF;

}

/* ==========================================================
   Gallery Navigation
========================================================== */

.vehicle-gallery__previous,

.vehicle-gallery__next{

    position:absolute;

    top:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:var(--vehicle-text);

    cursor:pointer;

    box-shadow:0 8px 24px rgba(15,23,42,.12);

    transform:translateY(-50%);

    transition:.25s ease;

}

.vehicle-gallery__previous{

    left:18px;

}

.vehicle-gallery__next{

    right:18px;

}

.vehicle-gallery__previous:hover,

.vehicle-gallery__next:hover{

    transform:translateY(-50%) scale(1.05);

}

/* ==========================================================
   Gallery Counter
========================================================== */

.vehicle-gallery__counter{

    position:absolute;

    right:18px;
    bottom:16px;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(17,24,39,.78);

    color:#fff;

    font-size:12px;

    font-weight:600;

    backdrop-filter:blur(8px);

}

/* ==========================================================
   Gallery Thumbnails
========================================================== */

.vehicle-gallery__thumbnails{

    display:none;

}

/* ==========================================================
   Gallery Media Tools
========================================================== */

.vehicle-gallery__media-tools{

    position:absolute;

    left:20px;
    bottom:16px;

    display:flex;
    align-items:center;
    gap:10px;

    z-index:20;

}

.vehicle-gallery__tool{

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#FFFFFF;

    color:#5B6472;

    cursor:pointer;

    box-shadow:
        0 4px 12px rgba(0,0,0,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}

.vehicle-gallery__tool i{

    font-size:17px;
    line-height:1;

}

.vehicle-gallery__tool:hover{

    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.22);

}


.vehicle-gallery__tool.is-active{

    background:#FFFFFF;

    border-color:#D1D5DB;

    color:#111827;

    box-shadow:
        0 8px 20px rgba(15,23,42,.18);

}

/* ==========================================================
   Gallery Viewer
========================================================== */


.vehicle-gallery-viewer{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    width:100%;

    height:100vh;

    max-height:100vh;

    padding:0;

    background:rgba(15,23,42,.48);

    opacity:0;

    pointer-events:none;

    transition:opacity .25s ease;

}

.vehicle-gallery-viewer.is-open{

    opacity:1;

    pointer-events:auto;

}

.vehicle-gallery-viewer__card{

    width:100%;

    max-height:74vh;

    height:74vh;

    background:#ffffff;

    border-radius:28px 28px 0 0;

    overflow:hidden;

    box-shadow:
        0 -10px 40px rgba(15,23,42,.18);

    transform:translateY(100%);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1);

}

.vehicle-gallery-viewer.is-open .vehicle-gallery-viewer__card{

    transform:translateY(0);

}



/* ==========================================================
   Gallery Viewer Header
========================================================== */

.vehicle-gallery-viewer__header{

    height:64px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:0 20px;

}


.vehicle-gallery-viewer__back{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(17,24,39,.08);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #F8FAFC
        );

    color:#111827;

    font-size:20px;

    font-weight:600;

    cursor:pointer;

    box-shadow:

        0 6px 18px rgba(15,23,42,.12);

    transition:

        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.vehicle-gallery-viewer__back:hover{

    transform:translateX(-3px);

    box-shadow:

        0 10px 24px rgba(15,23,42,.18);

}



.vehicle-gallery-viewer__title{

    margin:0;

    font-size:16px;

    font-weight:600;

}



/* Tabs */

.vehicle-gallery-viewer__tabs{

    display:flex;

    justify-content:center;

    gap:30px;

    height:50px;

}



.vehicle-gallery-viewer__tab{

    position:relative;

    background:none;

    border:none;

    color:#64748B;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:.25s ease;

}


.vehicle-gallery-viewer__tab.is-active{

    color:#111827;

    font-weight:600;

}


.vehicle-gallery-viewer__tab.is-active::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:2px;

    background:#111827;

}



/* ==========================================================
   Gallery Viewer Back Button
========================================================== */

.vehicle-gallery-viewer__main{

    position:relative;

    width:100%;

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.vehicle-gallery-viewer__image-wrapper{

    width:100%;

    height:100%;

}


.vehicle-gallery-viewer__image{

    width:100%;

    height:100%;

    object-fit:contain;

}



/* arrows */


.vehicle-gallery-viewer__previous,
.vehicle-gallery-viewer__next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:#111827;

    font-size:36px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    opacity:.7;

    z-index:10;

    transition:.2s ease;

}


.vehicle-gallery-viewer__previous:hover,
.vehicle-gallery-viewer__next:hover{

    opacity:1;

}


.vehicle-gallery-viewer__previous{

    left:14px;

}


.vehicle-gallery-viewer__next{

    right:14px;

}



/* Counter */


.vehicle-gallery-viewer__counter{

    text-align:center;

    font-size:12px;

    padding:4px;

}



/* thumbnails */


.vehicle-gallery-viewer__thumbnails{

    display:flex;

    gap:8px;

    padding:8px 12px 12px;

    overflow-x:auto;

}


.vehicle-gallery-viewer__thumbnail{

    width:70px;

    height:50px;

    padding:0;

    border:2px solid transparent;

    background:none;

}


.vehicle-gallery-viewer__thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.vehicle-gallery-viewer__thumbnail.is-active{

    border-color:#111827;

}


.vehicle-gallery-viewer__thumbnail{

    opacity:.65;

    transition:.25s ease;

}


.vehicle-gallery-viewer__thumbnail.is-active{

    opacity:1;

}


.vehicle-gallery-viewer__thumbnail:hover{

    border-color:#fff;

}




/* ==========================================================
   Section 1 - Hero Section
   Sub Section Commit 27.6 - Price Summary
========================================================== */

.vehicle-price-summary{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-bottom:18px;

    padding:16px 18px;

    background:#ffffff;

    border:1px solid var(--vehicle-border);

    border-radius:16px;

    text-align:center;

}

/* ==========================================================
   Price Summery Price Location
========================================================== */

.vehicle-price-summary__location{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:var(--vehicle-text-light);

    font-size:12px;

    font-weight:500;

    line-height:1.2;

}

/* ==========================================================
   Price Summery City Button
========================================================== */

.vehicle-price-summary__city{

    display:inline-flex;

    align-items:center;

    gap:4px;

    padding:0;

    background:none;

    border:none;

    color:var(--vehicle-text);

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}

/* ==========================================================
   Price Summery Price
========================================================== */

.vehicle-price-summary__price{

    color:var(--vehicle-text);

    font-size:20px;

    font-weight:550;

    line-height:1.15;

    letter-spacing:-0.02em;

}

/* ==========================================================
   Price Summery CTA
========================================================== */

.vehicle-price-summary__cta{

    padding:0;

    background:none;

    border:none;

    color:var(--vehicle-primary);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

}

.vehicle-price-summary__cta:hover{

    color:var(--vehicle-primary-dark);

    text-decoration:underline;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .vehicle-price-summary{

        padding:14px 16px;

        gap:5px;

    }

    .vehicle-price-summary__location{

        font-size:11px;

    }

    .vehicle-price-summary__city{

        font-size:11px;

    }

    .vehicle-price-summary__price{

        font-size:20px;

    }

    .vehicle-price-summary__cta{

        font-size:13px;

    }

}

/* ==========================================================
   Section 1 - Hero Section
   Sub Section Commit 27.7 - Hero EMI Card
========================================================== */

.vehicle-emi-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    width:100%;

    padding:10px 14px;

    margin-bottom:8px;

    background:#ffffff;

    border:1px solid var(--vehicle-border);

    border-radius:14px;

    appearance:none;

    -webkit-appearance:none;

    font-family:"Inter",sans-serif;

    text-align:left;

    color:inherit;

    cursor:pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

.vehicle-emi-card:hover{

    border-color:#D6E3FF;

    box-shadow:0 8px 18px rgba(37,99,235,.08);

}

.vehicle-emi-card:focus-visible{

    outline:none;

    border-color:var(--vehicle-primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.vehicle-emi-card__left{

    display:flex;

    flex-direction:column;

    gap:1px;

}

.vehicle-emi-card__title{

    color:var(--vehicle-text-light);

    font-size:10px;

    font-weight:500;

    line-height:1.2;

}

.vehicle-emi-card__amount{

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:500;

    line-height:1.2;

    letter-spacing:-0.01em;

}



.vehicle-emi-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:32px;

    padding:0 14px;

    border:none;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:600;

    white-space:nowrap;

    cursor:inherit;

    transition:.2s;

}

.vehicle-emi-card__button:hover{

    background:#DBEAFE;

}

/* ==========================================================
   Section 1 - Hero Section
   SubSection Commit 27.8 - Hero Primary CTA
========================================================== */

.vehicle-primary-cta{

    margin-bottom:20px;

}

.vehicle-primary-cta__button{

    position:relative;

    width:100%;
    height:48px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #3B82F6 0%,
            var(--vehicle-primary) 48%,
            #1D4ED8 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 8px 18px rgba(37,99,235,.24);

    color:#ffffff;

    font-family:"Inter",sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;

}

.vehicle-primary-cta__button:hover{

    background:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #1D4ED8 55%,
            #1E40AF 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 12px 24px rgba(37,99,235,.30);

    transform:translateY(-2px);

}

.vehicle-primary-cta__button:active{

    transform:translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(15,23,42,.18),
        0 5px 12px rgba(37,99,235,.20);

}

.vehicle-primary-cta__button:focus-visible{

    outline:3px solid rgba(37,99,235,.24);
    outline-offset:3px;

}

/* ==========================================================
   Section 2 - Quick Insights
========================================================== */

.vehicle-summary{

    width:100%;

    margin:12px auto 28px;

    background:transparent;

}

/* ==========================================================
   Quick Insights Section Header
========================================================== */

.vehicle-summary__header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;

}

.vehicle-summary__title{

    margin:0;
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    color:var(--vehicle-text);

}

/* ==========================================================
   Quick Insights Carousel Wrapper
========================================================== */

.vehicle-insights{

    width:100%;

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

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x mandatory;

    padding-bottom:0;

}

.vehicle-insights::-webkit-scrollbar{

    height:4px;

}

.vehicle-insights::-webkit-scrollbar-track{

    background:transparent;

}

.vehicle-insights::-webkit-scrollbar-thumb{

    background:#D1D5DB;
    border-radius:999px;

}

/* ==========================================================
   Quick Insights Track
========================================================== */

.vehicle-insights__track{

    display:flex;

    align-items:stretch;

    gap:12px;

    width:fit-content;

    padding-left:2px;

    padding-right:60px;

}

/* ==========================================================
   Quick Insights Card
========================================================== */

.vehicle-insight-card{

    flex:0 0 300px;

    width:300px;

    height:478px;

    min-height:478px;

    max-height:478px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid var(--vehicle-border);

    border-radius:18px;

    box-shadow:0 6px 18px rgba(15,23,42,.05);

    scroll-snap-align:start;

}

/* ==========================================================
   Summery Card
========================================================== */

.vehicle-insight-card__content{

    display:flex;

    flex-direction:column;

    height:100%;

}

/* ==========================================================
   Summery Card Header
========================================================== */

.vehicle-summary-card__header{

    padding:18px 18px 12px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   Summary Card Image
========================================================== */

.vehicle-summary-card__image{

    height:135px;

    overflow:hidden;

    margin:0 18px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.vehicle-summary-card__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

}



/* ==========================================================
   Summary Specs
========================================================== */

.vehicle-summary-card__specs{

    display:flex;

    flex-direction:column;

    gap:9px;

    margin:14px 18px;

}

/* ==========================================================
   Summery Card Spec Row
========================================================== */

.vehicle-summary-card__spec{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ==========================================================
   Summery Card Spec Icon
========================================================== */

.vehicle-summary-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    flex-shrink:0;

    color:#4B5563;

}

.vehicle-summary-card__icon::before{

    width:18px;

    height:18px;

    display:block;

    background-position:center;

    background-repeat:no-repeat;

    background-size:18px;

    content:"";

}

/* ==========================================================
   Summary Card Icons
========================================================== */

.vehicle-summary-card__icon{

    display:flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    flex-shrink:0;

    background-position:center;
    background-repeat:no-repeat;
    background-size:22px 22px;

}

.vehicle-summary-card__spec:nth-child(1) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.5L13.5 4H7a2 2 0 0 0-2 2v6.5L11.5 19a2 2 0 0 0 2.8 0l5.7-5.7a2 2 0 0 0 0-2.8Z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1'/%3E%3C/svg%3E");

}

.vehicle-summary-card__spec:nth-child(2) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v17'/%3E%3Cpath d='M15 8h3l2 2v6a2 2 0 0 1-2 2'/%3E%3Cpath d='M3 22h12'/%3E%3C/svg%3E");

}

.vehicle-summary-card__spec:nth-child(3) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-3.8 7-9V5l-7-2-7 2v7c0 5.2 7 9 7 9Z'/%3E%3C/svg%3E");

}

.vehicle-summary-card__spec:nth-child(4) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='7' width='12' height='13' rx='2'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");

}

.vehicle-summary-card__spec:nth-child(5) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6v7'/%3E%3Cpath d='M7 13h8a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M5 21v-4h14'/%3E%3Cpath d='M17 18v3'/%3E%3C/svg%3E");

}

.vehicle-summary-card__spec:nth-child(6) .vehicle-summary-card__icon{

    background-repeat:no-repeat;

    background-position:center;

    background-size:22px 22px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 1 1 16 0'/%3E%3Cpath d='M12 14l4-4'/%3E%3Ccircle cx='12' cy='14' r='1.2'/%3E%3C/svg%3E");

}

/* ==========================================================
   Summary Card Spec Text
========================================================== */

.vehicle-summary-card__value{

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:500;

    line-height:1.4;

}

/* ==========================================================
   Summary Card Footer
========================================================== */

.vehicle-summary-card__footer{

    margin-top:auto;

    padding:18px;

}

.vehicle-summary-card__button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:auto;

    height:auto;

    padding:0;

    margin:0;

    border:none;

    outline:none;

    box-shadow:none;

    border-radius:0;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:700;

    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;

}

.vehicle-summary-card__button:hover{

    background:transparent;

    color:var(--vehicle-primary-dark);

    transform:translateX(2px);

}

.vehicle-summary-card__button::after{

    content:"›";

    font-size:20px;

    font-weight:700;

    line-height:1;

}

/* ==========================================================
   Top Picks Card
========================================================== */

.vehicle-top-picks__header{

    padding:18px 18px 10px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   Top Pick Card List
========================================================== */

.vehicle-top-picks__list{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:0 16px;

}

/* ==========================================================
   Top Pick Card Variant Item
========================================================== */

.vehicle-top-picks__item{
    display:flex;
    flex-direction:column;
    width:98%;
    margin-left:auto;
    margin-right:auto;
    gap:7px;
    padding:10px 14px;

    background:#ffffff;

    border:1px solid #E8EDF4;

    border-radius:14px;

    box-shadow:0 2px 8px rgba(15,23,42,.04);

    transition:all .25s ease;

}

.vehicle-top-picks__header-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    width:100%;

}

.vehicle-top-picks__item:hover{

    transform:translateY(-1px);

    border-color:#D6E3FF;

    box-shadow:0 8px 18px rgba(37,99,235,.08);

}

/* ==========================================================
   Top Pick Card Variant Left
========================================================== */

.vehicle-top-picks__left{

    flex:1;

}

.vehicle-top-picks__name{

    display:flex;

    align-items:center;

    gap:6px;

    margin:0;

    font-size:13px;

    font-weight:600;

    line-height:1.25;

    color:var(--vehicle-text);

}

.vehicle-top-picks__separator{

    color:var(--vehicle-text);

    font-weight:600;

}

.vehicle-top-picks__features{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:5px;

    font-size:11px;

    line-height:1.4;

    color:var(--vehicle-text-light);

}

/* ==========================================================
  Top Pick Card Feature Badge
========================================================== */

.vehicle-top-picks__features span{

    display:inline-flex;

    align-items:center;

    padding:2px 8px;

    border-radius:999px;

    background:#F3F7FC;

    color:#475569;

    font-size:11px;

    font-weight:500;

    white-space:nowrap;

}

/* ==========================================================
   Top Pick Card Variant Price
========================================================== */

.vehicle-top-picks__price{

    flex-shrink:0;

    text-align:right;

    font-size:15px;

    font-weight:700;

    line-height:1.2;

    color:var(--vehicle-text);

}


/* ==========================================================
   Top Pick Card Footer
========================================================== */

.vehicle-top-picks__footer{

    margin-top:auto;

    padding:16px;

}

/* ==========================================================
   Top Pick Card Button
========================================================== */

.vehicle-top-picks__button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;
    background:transparent;
    color:var(--vehicle-primary);
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:
        color .2s ease,
        transform .2s ease;
}

.vehicle-top-picks__button:hover{
    background:transparent;
    color:var(--vehicle-primary-dark);
    transform:translateX(2px);
}

.vehicle-top-picks__button::after{
    content:"›";
    font-size:20px;
    font-weight:700;
    line-height:1;
}

/* ==========================================================
   Competitors Card
========================================================== */

.vehicle-competitors__header{

    padding:18px 18px 12px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   Competitors Card Competitors List
========================================================== */

.vehicle-competitors__list{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:0 14px;

}

/* ==========================================================
   Competitor Card Footer
========================================================== */

.vehicle-competitors__footer{

    margin-top:auto;

    padding:16px;

}


.vehicle-competitors__button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;
    background:transparent;
    color:var(--vehicle-primary);
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:
        color .2s ease,
        transform .2s ease;
}

.vehicle-competitors__button:hover{
    background:transparent;
    color:var(--vehicle-primary-dark);
    transform:translateX(2px);
}

.vehicle-competitors__button::after{
    content:"›";
    font-size:20px;
    font-weight:700;
    line-height:1;
}


/* ==========================================================
   Competitor Card Competitors
========================================================== */

.vehicle-competitor{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    background:#ffffff;

    border:1px solid #E8EDF4;

    border-radius:14px;

    box-shadow:0 2px 8px rgba(15,23,42,.04);

    transition:all .25s ease;

    text-decoration:none;

    color:inherit;

}

.vehicle-competitor:hover{

    transform:translateY(-1px);

    border-color:#D6E3FF;

    box-shadow:0 8px 18px rgba(37,99,235,.08);

}

/* ==========================================================
  Competitors Card Competitor Vehicle Image
========================================================== */

.vehicle-competitor__image{

    width:70px;

    height:48px;

    object-fit:contain;

    flex-shrink:0;

}

/* ==========================================================
   Competitors Card Competitor Content
========================================================== */

.vehicle-competitor__content{

    flex:1;

    min-width:0;

    overflow:hidden;

}

/* ==========================================================
   Competitors Card Competitor Name
========================================================== */

.vehicle-competitor__name{

    margin-bottom:4px;

    color:var(--vehicle-text);

    font-size:13px;

    font-weight:600;

    line-height:1.3;

    white-space:normal;

    overflow:visible;

}

/* ==========================================================
   Competitors Card Competitor Price
========================================================== */

.vehicle-competitor__price{

    color:var(--vehicle-text);

    font-size:12px;

    font-weight:500;

    line-height:1.4;

    white-space:normal;

    margin-top:6px;

}

/* ==========================================================
   Competitors Card Competitor Arrow
========================================================== */

.vehicle-competitor__arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:18px;

    height:18px;

    color:#64748B;

    font-size:19px;

    flex-shrink:0;

}


/* ==========================================================
   Expert Verdict Card
========================================================== */

.vehicle-expert__header{

    padding:18px 18px 10px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/* ==========================================================
   Expert Verdict Card Content
========================================================== */

.vehicle-expert__content{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:4px 18px 4px;

    flex:1;

    min-height:0;

}


/* ==========================================================
   Expert Verdict Card Section Box
========================================================== */

.vehicle-expert__section{

    padding:10px 12px;

    border-radius:14px;

    border:1px solid #EEF2F7;

    flex-shrink:0;

}


/* ==========================================================
   Expert Verdict Card Pros Box
========================================================== */

.vehicle-expert__section:has(.is-pro){

    background:#F5FFF8;

    border-color:#D7F3E1;

}


/* ==========================================================
   Expert Verdict Card Cons Box
========================================================== */

.vehicle-expert__section:has(.is-con){

    background:#FFF8F8;

    border-color:#F7DADA;

}


/* ==========================================================
   Expert Verdict Card Pros / Cons Label
========================================================== */

.vehicle-expert__section-title{

    display:inline-flex;

    align-items:center;

    padding:5px 14px;

    margin-bottom:8px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}


/* ==========================================================
   Expert Verdict Card Pros Label
========================================================== */

.vehicle-expert__section-title.is-pro{

    background:#DCFCE7;

    color:#15803D;

}


/* ==========================================================
   Expert Verdict Card Cons Label
========================================================== */

.vehicle-expert__section-title.is-con{

    background:#FEE2E2;

    color:#DC2626;

}


/* ==========================================================
   Expert Verdict Card Expert List
========================================================== */

.vehicle-expert__list{

    margin:0;

    padding-left:17px;

}


.vehicle-expert__list li{

    margin-bottom:5px;

    color:#1F2937;

    font-size:13px;

    font-weight:500;

    line-height:1.35;

}


.vehicle-expert__list li:last-child{

    margin-bottom:0;

}


/* ==========================================================
  Expert Verdict Card Footer
========================================================== */

.vehicle-expert__footer{

    margin-top:auto;

    padding:12px 18px 18px;

}


/* ==========================================================
   Expert Verdict Card Button
========================================================== */

.vehicle-expert__button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;
    background:transparent;
    color:var(--vehicle-primary);
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:
        color .2s ease,
        transform .2s ease;
}

.vehicle-expert__button:hover{
    background:transparent;
    color:var(--vehicle-primary-dark);
    transform:translateX(2px);
}

.vehicle-expert__button::after{
    content:"›";
    font-size:20px;
    font-weight:700;
    line-height:1;
}

/* ==========================================================
   Owner Reviews Card
========================================================== */

.vehicle-owner__header{

    padding:18px 18px 12px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   Owner Reviews Card Rating
========================================================== */

.vehicle-owner__rating{

    padding:0 18px;

    text-align:center;

    flex-shrink:0;

}

.vehicle-owner__stars{

    color:#F59E0B;

    font-size:21px;

    letter-spacing:2px;

    margin-bottom:6px;

}

.vehicle-owner__stars .is-active{

    color:#F59E0B;

}

.vehicle-owner__stars .is-inactive{

    color:#D1D5DB;

}

.vehicle-owner__score{

    color:var(--vehicle-text);

    font-size:40px;

    font-weight:700;

    line-height:1;

    margin-bottom:6px;

}

.vehicle-owner__count{

    color:var(--vehicle-text-light);

    font-size:12px;

    font-weight:500;

}

/* ==========================================================
   Owner Reviews Card Summary
========================================================== */

.vehicle-owner__summary{

    margin:16px 18px 14px;

    color:var(--vehicle-text);

    font-size:14px;

    line-height:1.45;

    text-align:center;

    flex-shrink:0;

}

/* ==========================================================
   Owner Reviews Card Section
========================================================== */

.vehicle-owner__section{

    margin:0 18px 16px;

    flex-shrink:0;

}

/* ==========================================================
   Owner Reviews Card Section Title
========================================================== */

.vehicle-owner__section-title{

    margin-bottom:7px;

    color:var(--vehicle-text);

    font-size:13px;

    font-weight:600;

    line-height:1.2;

}

/* ==========================================================
   Owner Reviews Card Tags
========================================================== */

.vehicle-owner__tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}

.vehicle-owner__tags span{

    display:inline-flex;

    align-items:center;

    padding:5px 11px;

    border-radius:999px;

    background:#F3F7FC;

    color:#475569;

    font-size:12px;

    font-weight:500;

    line-height:1.2;

}

/* ==========================================================
   Owner Reviews Card Footer
========================================================== */

.vehicle-owner__footer{

    margin-top:auto;

    padding:12px 18px 18px;

}

/* ==========================================================
   Owner Reviews Card Button
========================================================== */

.vehicle-owner__button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:auto;

    min-height:24px;

    height:auto;

    padding:0;

    margin:0;

    border:none;

    outline:none;

    box-shadow:none;

    border-radius:0;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:700;

    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;

}

.vehicle-owner__button:hover{

    background:transparent;

    color:var(--vehicle-primary-dark);

    transform:translateX(2px);

}

.vehicle-owner__button::after{

    content:"›";

    font-size:20px;

    font-weight:700;

    line-height:1;

}

/* ==========================================================
   Next Step Card
========================================================== */

.vehicle-next-step__header{

    padding:18px 18px 12px;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   Next Step Card Title
========================================================== */

.vehicle-next-step__title{

    margin:0 18px 20px;

    color:var(--vehicle-text);

    font-size:18px;

    font-weight:700;

    line-height:1.35;

}

/* ==========================================================
  Next Step Card Action List
========================================================== */

.vehicle-next-step__list{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:0 18px;

}

/* ==========================================================
  Next Step Card Action Item
========================================================== */

.vehicle-next-step__item{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:14px 16px;

    background:#ffffff;

    border:1px solid #E8EDF4;

    border-radius:14px;

    box-shadow:0 2px 8px rgba(15,23,42,.04);

    cursor:pointer;

    transition:.25s ease;

}

.vehicle-next-step__item:hover{

    border-color:#D6E3FF;

    box-shadow:0 8px 18px rgba(37,99,235,.08);

    transform:translateY(-1px);

}

/* ==========================================================
  Next Step Card Icon
========================================================== */

.vehicle-next-step__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#EFF6FF;

    font-size:16px;

    flex-shrink:0;

}

/* ==========================================================
  Next Step Card Text
========================================================== */


.vehicle-next-step__text{

    flex:1;

    text-align:left;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:14px;

    font-weight:500;

    line-height:1.3;

}

/* ==========================================================
   Next Step Card Arrow
========================================================== */

.vehicle-next-step__arrow{

    color:#64748B;

    font-size:20px;

    flex-shrink:0;

}

/* ==========================================================
  Next Step Card Footer
========================================================== */

.vehicle-next-step__footer{

    margin-top:auto;

    padding:18px;

}

/* ==========================================================
   Next Step Card Button
========================================================== */

.vehicle-next-step__button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:auto;
    padding:0;
    margin:0;
    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;
    background:transparent;
    color:var(--vehicle-primary);
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:color .2s ease, transform .2s ease;
}

.vehicle-next-step__button:hover{
    background:transparent;
    color:var(--vehicle-primary-dark);
    transform:translateX(2px);
}

.vehicle-next-step__button::after{
    content:"›";
    font-size:20px;
    font-weight:700;
    line-height:1;
}


/* ==========================================================
   Pagination
========================================================== */

.vehicle-insights__pagination{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:6px;

    margin-top:4px;

}

.vehicle-insights__dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#D1D5DB;

}

.vehicle-insights__dot.is-active{

    background:var(--vehicle-primary);

}

/* ==========================================================
   Section 3 - Vehicle Video
   SUb Section Commit 29
========================================================== */


.vehicle-videos{

    width:100%;

    max-width:1280px;

    margin:0 auto 40px;

}

/* ==========================================================
   Vehicle video Header
========================================================== */

.vehicle-videos__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}

/* ==========================================================
  Vehicle video Title
========================================================== */

.vehicle-videos__title{

    margin:0;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:20px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:0;

}

/* ==========================================================
  Vehicle video Carousel
========================================================== */

.vehicle-videos__carousel{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

}

.vehicle-videos__carousel::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
   Vehicle video Track
========================================================== */

.vehicle-videos__track{

    display:flex;

    gap:20px;

    width:max-content;

    padding:4px 4px 10px;

}


/* ==========================================================
  Vehicle Video Card
========================================================== */

.vehicle-video-card{

    position:relative;

    flex:0 0 250px;

    width:250px;

    overflow:hidden;

    border-radius:22px;

    background:#FFFFFF;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:
        0 10px 28px rgba(15,23,42,.08);

    text-decoration:none;

    color:inherit;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;

}

.vehicle-video-card:hover{

    transform:translateY(-6px);

    border-color:#D8E4FF;

    box-shadow:
        0 24px 48px rgba(15,23,42,.14);

}

/* ==========================================================
   Vehicle video Thumbnail
========================================================== */

.vehicle-video-card__thumbnail{

    position:relative;

    width:100%;

    aspect-ratio:9 / 16;

    overflow:hidden;

    background:#EEF2F7;

}

.vehicle-video-card__thumbnail img,
.vehicle-video-card__thumbnail video,
.vehicle-video-card__thumbnail iframe{

    display:block;

    width:100%;

    height:100%;

    border:0;

}

.vehicle-video-card__thumbnail img{

    object-fit:cover;

    transition:
        transform .45s ease;

}

.vehicle-video-card__thumbnail video{

    object-fit:cover;

    background:#000;

}

.vehicle-video-card__thumbnail iframe{

    background:#000;

}

.vehicle-video-card:hover
.vehicle-video-card__thumbnail img{

    transform:scale(1.05);

}

/* ==========================================================
   Vehicle video Play Button
========================================================== */

.vehicle-video-card__play{

    position:absolute;

    top:50%;
    left:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    width:68px;

    height:68px;

    border-radius:50%;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    color:#111827;

    font-size:24px;

    transform:
        translate(-50%,-50%);

    box-shadow:
        0 12px 28px rgba(15,23,42,.18);

    transition:
        transform .25s ease,
        background .25s ease;

}

.vehicle-video-card:hover
.vehicle-video-card__play{

    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:#FFFFFF;

}

/* ==========================================================
  Vehicle video Duration
========================================================== */

.vehicle-video-card__duration{

    position:absolute;

    right:12px;

    bottom:12px;

    padding:5px 10px;

    border-radius:999px;

    background:rgba(17,24,39,.82);

    backdrop-filter:blur(10px);

    color:#FFFFFF;

    font-size:11px;

    font-weight:600;

}

/* ==========================================================
  Vehicle video Content
========================================================== */

.vehicle-video-card__content{

    padding:16px;

}

/* ==========================================================
   Vehicle video Title
========================================================== */




.vehicle-video-card__title{

    margin:0 0 10px;

    color:var(--vehicle-text);

    font-size:15px;

    font-weight:700;

    line-height:1.45;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* ==========================================================
  Vehicle video Meta
========================================================== */

.vehicle-video-card__meta{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

/* ==========================================================
  Vehicle video Badge
========================================================== */

.vehicle-video-card__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:28px;

    padding:0 12px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--vehicle-primary);

    font-size:11px;

    font-weight:700;

}

/* ==========================================================
  Vehicle video Views
========================================================== */

.vehicle-video-card__views{

    color:#64748B;

    font-size:12px;

    font-weight:500;

}

/* ==========================================================
  Vehicle video Mobile
========================================================== */

@media (max-width:768px){

    .vehicle-video-card{

        flex:0 0 180px;

        width:180px;

        border-radius:18px;

    }

    .vehicle-video-card__content{

        padding:12px;

    }

    .vehicle-video-card__title{

        font-size:13px;

    }

    .vehicle-video-card__play{

        width:52px;

        height:52px;

        font-size:18px;

    }

}

/* ==========================================================
   Vehicle video Desktop
========================================================== */

@media (min-width:769px){

    .vehicle-insights{

        overflow:visible;

    }

    .vehicle-insights__track{

        width:100%;

    }

    .vehicle-insight-card{

        flex:1;

        width:auto;

        min-height:0;

    }

}



/* ==========================================================
   Section 4 - Specifications & Features
   (Vehicle Overview Tabs)
========================================================== */

.vehicle-overview__tabs{

    display:flex;
    align-items:center;
    gap:36px;

    border-bottom:1px solid #E5E7EB;

}

.vehicle-overview__tab{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    height:48px;
    padding:0;

    border:none;
    border-radius:0;

    background:transparent;

    color:#6B7280;

    font-size:16px;
    font-weight:500;

    cursor:pointer;

    transition:color .25s ease;

}

.vehicle-overview__tab:hover{

    color:var(--vehicle-primary);

}

.vehicle-overview__tab::after{

    content:"";

    position:absolute;

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

    height:3px;

    background:var(--vehicle-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s ease;

}

.vehicle-overview__tab.is-active{

    color:#111827;
    font-weight:600;

}

.vehicle-overview__tab.is-active::after{

    transform:scaleX(1);

}

/* ==========================================================
  Vehicle Overview  Body
========================================================== */

.vehicle-overview__body{

    padding:22px 28px 4px;

}

/* ==========================================================
 Vehicle Overview   Panels
========================================================== */

.vehicle-overview__panel{

    display:none;

}

.vehicle-overview__panel.is-active{

    display:block;

}

/* ==========================================================
  Vehicle Overview  Specification List
========================================================== */

.vehicle-spec-list{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
 Vehicle Overview   Specification Row
========================================================== */

.vehicle-spec-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:15px 0;

    border-bottom:1px solid #EEF2F7;

}

.vehicle-spec-item:last-child{

    border-bottom:none;

}

/* ==========================================================
 Vehicle Overview   Left
========================================================== */

.vehicle-spec-item__left{

    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

    flex:1;

}

/* ==========================================================
 Vehicle Overview   Icon
========================================================== */

.vehicle-spec-item__icon{

    width:26px;

    height:26px;

    flex-shrink:0;

    background-repeat:no-repeat;

    background-position:center;

    background-size:24px;

    opacity:.72;

}

/* ==========================================================
 Vehicle Overview   Engine
========================================================== */

.vehicle-icon-engine{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 6h3l2 2v8l-2 2h-3'/%3E%3Cpath d='M10 6H7L5 8v8l2 2h3'/%3E%3Crect x='10' y='8' width='4' height='8' rx='1'/%3E%3Cpath d='M3 10v4M21 10v4M8 4v2M16 4v2M8 18v2M16 18v2'/%3E%3C/svg%3E");

}

/* ==========================================================
 Vehicle Overview  Power
========================================================== */

.vehicle-icon-power{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L6 13h5l-1 9 8-12h-5l1-8z'/%3E%3C/svg%3E");

}

/* ==========================================================
   Torque
========================================================== */

.vehicle-icon-torque{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 12l4-4'/%3E%3C/svg%3E");

}

/* ==========================================================
 Vehicle Overview   Seats
========================================================== */

.vehicle-icon-seats{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v7'/%3E%3Cpath d='M8 12h8a2 2 0 012 2v5'/%3E%3Cpath d='M6 19h12'/%3E%3Cpath d='M18 19v-5'/%3E%3C/svg%3E");

}

/* ==========================================================
  Vehicle Overview  Drive
========================================================== */

.vehicle-icon-drive{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Cpath d='M8 6h8M6 8v8M18 8v8M8 18h8'/%3E%3C/svg%3E");

}

/* ==========================================================
 Vehicle Overview   Mileage
========================================================== */

.vehicle-icon-mileage{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 14a8 8 0 1116 0'/%3E%3Cpath d='M12 14l4-4'/%3E%3Ccircle cx='12' cy='14' r='1.4'/%3E%3C/svg%3E");

}

/* ==========================================================
  Vehicle Overview  Label
========================================================== */

.vehicle-spec-item__label{

    color:#4B5563;

    font-size:15px;

    font-weight:500;

    line-height:1.4;

}

/* ==========================================================
 Vehicle Overview   Value
========================================================== */

.vehicle-spec-item__value{

    margin-left:auto;

    color:#111827;

    font-size:16px;

    font-weight:600;

    text-align:right;

    white-space:nowrap;

}

/* ==========================================================
 Vehicle Overview  Hover
========================================================== */

.vehicle-spec-item{

    transition:background .22s ease;

}

.vehicle-spec-item:hover{

    background:#F8FAFC;

}

/* ==========================================================
  Vehicle Overview  Highlight Grid
========================================================== */

.vehicle-highlight-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

}

/* ==========================================================
  Vehicle Overview  Highlight Card
========================================================== */

.vehicle-highlight-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    border:1px solid #E8EDF4;

    border-radius:16px;

    background:#FFFFFF;

    transition:.25s ease;

}

.vehicle-highlight-card:hover{

    transform:translateY(-2px);

    border-color:#D6E3FF;

    box-shadow:0 10px 24px rgba(37,99,235,.08);

}

/* ==========================================================
  Vehicle Overview Highlight Icon
========================================================== */

.vehicle-highlight-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:14px;

    background:#EFF6FF;

    font-size:22px;

    flex-shrink:0;

}

/* ==========================================================
  Vehicle Overview Highlight  Content
========================================================== */

.vehicle-highlight-card__content{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.vehicle-highlight-card__title{

    color:var(--vehicle-text);

    font-size:15px;

    font-weight:700;

    line-height:1.3;

}

.vehicle-highlight-card__description{

    color:var(--vehicle-text-light);

    font-size:14px;

    line-height:1.6;

}

/* ==========================================================
  Vehicle Overview Button Footer Link
========================================================== */


.vehicle-overview__button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    box-sizing:border-box;

    gap:8px;

    padding:0;

    margin:0;

    background:transparent;

    border:none;

    outline:none;

    box-shadow:none;

    text-decoration:none;

    color:var(--vehicle-primary);

    font-size:16px;

    font-weight:700;

    line-height:1.2;

    text-align:center;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;

}

.vehicle-overview__button:hover{

    color:var(--vehicle-primary-dark);

    transform:translateX(2px);

}

.vehicle-overview__button::after{

    content:"›";

    font-size:20px;

    font-weight:700;

    line-height:1;

}

.vehicle-overview__button:active{

    transform:translateX(2px);

}

/* ==========================================================
  Vehicle Overview  Mobile
========================================================== */

@media (max-width:768px){

    

    

    .vehicle-overview__title{

    margin:0;

    color:var(--vehicle-text);

    font-size:22px;

    font-weight:600;   /* was lighter */

    line-height:1.2;

}

    .vehicle-overview__tabs{

        width:100%;

    }

    .vehicle-overview__tab{

        flex:1;

    }

    .vehicle-overview__body{

        padding:20px;

    }

    .vehicle-specification-grid{

        grid-template-columns:1fr;

        gap:0;

    }

    .vehicle-highlight-grid{

        grid-template-columns:1fr;

    }

    

}


/* ==========================================================
   Vehicle Overview
   Interactive States
========================================================== */

.vehicle-overview__panel{

    animation:vehicleOverviewFade .28s ease;

}

@keyframes vehicleOverviewFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
 - Vehicle Specification Page 
========================================================== */

.vehicle-specification{

    transition:
        background .22s ease,
        border-color .22s ease,
        padding-left .22s ease;

}

.vehicle-specification:hover{

    background:#F8FAFC;

    padding-left:10px;

}

/* ==========================================================
   Vehicle Specification Label / Value Animation
========================================================== */

.vehicle-specification__label{

    transition:color .22s ease;

}

.vehicle-specification__value{

    transition:
        color .22s ease,
        transform .22s ease;

}

.vehicle-specification:hover
.vehicle-specification__label{

    color:#475569;

}

.vehicle-specification:hover
.vehicle-specification__value{

    color:var(--vehicle-primary);

    transform:translateX(-3px);

}

/* ==========================================================
  Vehicle Specification Highlight Card Effects
========================================================== */

.vehicle-highlight-card{

    overflow:hidden;

    position:relative;

}

.vehicle-highlight-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            135deg,
            rgba(37,99,235,.04),
            transparent 55%
        );

    opacity:0;

    transition:opacity .28s ease;

}

.vehicle-highlight-card:hover::before{

    opacity:1;

}

.vehicle-highlight-card__icon{

    transition:
        transform .25s ease,
        background .25s ease;

}

.vehicle-highlight-card:hover
.vehicle-highlight-card__icon{

    transform:scale(1.08);

    background:#DBEAFE;

}

.vehicle-highlight-card__title{

    transition:color .22s ease;

}

.vehicle-highlight-card:hover
.vehicle-highlight-card__title{

    color:var(--vehicle-primary);

}



/* ==========================================================
 Vehicle Specification  Smooth Tab Transition
========================================================== */

.vehicle-overview__tab{

    user-select:none;

}

.vehicle-overview__tab:focus{

    outline:none;

}

.vehicle-overview__tab:focus-visible{

    box-shadow:

        0 0 0 4px rgba(37,99,235,.15);

}

/* ==========================================================
  Vehicle Specification Large Desktop
========================================================== */

@media (min-width:1200px){

    .vehicle-specification-grid{

        column-gap:70px;

    }

}

/* ==========================================================
  Vehicle Specification Tablet
========================================================== */

@media (max-width:992px){

    

    .vehicle-specification-grid{

        gap:12px 24px;

    }

}

/* ==========================================================
 Vehicle Specification  Mobile Polish
========================================================== */

@media (max-width:768px){

    .vehicle-overview{

        margin-bottom:28px;

    }

    .vehicle-overview__card{

        border-radius:18px;

    }

    .vehicle-overview__tabs{

        overflow-x:auto;

        padding-bottom:2px;

        scrollbar-width:none;

    }

    .vehicle-overview__tabs::-webkit-scrollbar{

        display:none;

    }

    .vehicle-overview__tab{

        flex:none;

        min-width:120px;

    }

    .vehicle-specification{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

        padding:14px 0;

    }

    .vehicle-specification__value{

        text-align:left;

    }

    .vehicle-highlight-card{

        padding:16px;

    }

    .vehicle-highlight-card__icon{

        width:42px;

        height:42px;

        font-size:20px;

    }

    .vehicle-overview__button{

        height:46px;

    }

}


/* ==========================================================
   Section 4 - Specifications & Features
   Specifications Page
========================================================== */


/* ==========================================================
   Specification Page Cards
========================================================== */

.vehicle-spec-card{

    margin-bottom:28px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.vehicle-spec-card__header{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:24px 30px;

    background:#F8FAFC;

    border-bottom:1px solid #E5E7EB;

}

.vehicle-spec-card__title{

    margin:0;

    color:#0F172A;

    font-size:18px;

    font-weight:600;

    line-height:1.25;

    letter-spacing:-0.02em;

    white-space:nowrap;

}

.vehicle-spec-card__body{

    display:flex;

    align-items:flex-start;

    gap:28px;

    padding:28px;

}

/* ==========================================================
   Specification Page Sidebar
========================================================== */

.vehicle-spec-sidebar{

    width:220px;

    flex-shrink:0;

    padding-right:24px;

    border-right:1px solid #E5E7EB;

}

.vehicle-spec-sidebar{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.vehicle-spec-sidebar__item{

    display:flex;

    align-items:center;

    width:100%;

    min-height:48px;

    padding:0 16px;

    background:transparent;

    border:none;

    border-radius:10px;

    color:#475569;

    font-size:15px;

    font-weight:600;

    text-align:left;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease;

}

.vehicle-spec-sidebar__item:hover{

    background:#F8FAFC;

    color:#2563EB;

    padding-left:22px;

}

.vehicle-spec-sidebar__item.is-active{

    background:#EFF6FF;

    color:#2563EB;

    padding-left:22px;

    position:relative;

}

.vehicle-spec-sidebar__item.is-active::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    bottom:8px;

    width:3px;

    border-radius:999px;

    background:#2563EB;

}

/* ==========================================================
   Specification Page Panels
========================================================== */

.vehicle-spec-panels{

    flex:1;

    min-width:0;

    width:100%;

}

.vehicle-spec-panel{

    display:none;

    width:100%;

}

.vehicle-spec-panel.is-active{

    display:block;

    width:100%;

}

/* ==========================================================
Specification Page Grid
========================================================== */

.vehicle-spec-grid{

    display:grid;

    width:100%;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;

    padding:0;

}

.vehicle-spec-item-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:12px 15px;

    min-height:56px;

    border:1px solid #E8EDF4;

    border-radius:12px;

    background:#FFFFFF;

    transition:
        .25s ease;

}

.vehicle-spec-item-card__content{

    flex:1;

    min-width:0;

}

.vehicle-spec-item-card:hover{

    transform:translateY(-3px);

    border-color:#D7E7FF;

    box-shadow:
        0 14px 28px rgba(37,99,235,.08);

}

.vehicle-spec-item-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    flex-shrink:0;

    border-radius:10px;

    background:linear-gradient(
        180deg,
        #FAFCFF,
        #F2F6FB
    );

    border:1px solid #EDF2F7;

}

.vehicle-spec-item-card__icon i{

    font-size:18px;
    color:#64748B;
    transition:.25s ease;

}

.vehicle-spec-item-card:hover .vehicle-spec-item-card__icon i{

    color:#2563EB;

}


.vehicle-spec-item-card__label{

    margin-bottom:3px;

    color:#64748B;

    font-size:11px;

    font-weight:600;

    letter-spacing:0;

    text-transform:none;

}

.vehicle-spec-item-card__value{

    color:#111827;

    font-size:17px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-.02em;

}

/* ==========================================================
   Specification Page Boolean Values
========================================================== */

.vehicle-spec-value--yes{

    color:#16A34A;

    font-size:20px;

    font-weight:700;

}

.vehicle-spec-value--no{

    color:#DC2626;

    font-size:20px;

    font-weight:700;

}


/* ==========================================================
  Vehicle Specfication Page  Mobile
========================================================== */


@media (max-width:768px){

       .vehicle-specifications__header{

        min-height:72px;

        padding:16px 16px 15px;

    }

    .vehicle-specifications__header::before{

        width:3px;
        height:27px;

        margin-right:10px;

    }

    .vehicle-specifications__title{

        font-size:clamp(20px,5.4vw,24px);
        line-height:1.2;

    }



    .vehicle-spec-card__header{

    padding:12px;

}

    .vehicle-spec-card__body{

    

    padding:18px;

}

.vehicle-spec-sidebar{

    width:125px;

    flex-shrink:0;

    display:flex;

    flex-direction:column;

    gap:6px;

    overflow:visible;

    padding-right:12px;

    border-right:1px solid #E5E7EB;

}

.vehicle-spec-sidebar__item{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    min-height:56px;

    padding:12px 14px;

    font-size:14px;

    line-height:1.35;

    white-space:normal;

    text-wrap:balance;

    word-break:normal;

}

.vehicle-spec-sidebar__item.is-active{

    padding-left:16px;

}

.vehicle-spec-panels{

    flex:1;

    min-width:0;

}

    .vehicle-spec-grid{

    grid-template-columns:1fr;

    padding:0;

}

    .vehicle-spec-item-card{

        min-height:54px;

        padding:10px 12px;

    }

    .vehicle-spec-item-card__label{

        font-size:10px;

    }

    .vehicle-spec-item-card__value{

        font-size:15px;

    }

    

}

/* ==========================================================
   Specifications Page — Vehicle Offer Card
========================================================== */

.vehicle-spec-offer-card{

    margin:0 28px 28px;
    padding:18px;

    border:1px solid #E5E7EB;
    border-radius:18px;

    background:#FFFFFF;

    box-shadow:
        0 10px 28px rgba(15,23,42,.06);

}

.vehicle-spec-offer-card__details{

    display:flex;
    align-items:center;
    gap:14px;

}

.vehicle-spec-offer-card__image{

    width:108px;
    height:76px;
    flex-shrink:0;

    overflow:hidden;

    border-radius:12px;

    background:#F1F5F9;

}

.vehicle-spec-offer-card__image img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

}

.vehicle-spec-offer-card__image-placeholder{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:#64748B;

    font-size:11px;
    font-weight:600;

}

.vehicle-spec-offer-card__content{

    min-width:0;
    flex:1;

}

.vehicle-spec-offer-card__reviews{

    display:flex;
    align-items:center;
    gap:4px;

    margin-bottom:6px;

    color:#64748B;

    font-size:12px;
    font-weight:500;

}

.vehicle-spec-offer-card__reviews strong{

    color:#111827;

    font-size:13px;
    font-weight:700;

}

.vehicle-spec-offer-card__star{

    color:#F59E0B;

    font-size:15px;
    line-height:1;

}

.vehicle-spec-offer-card__price{

    overflow:hidden;

    color:#111827;

    font-size:18px;
    font-weight:800;
    line-height:1.25;

    text-overflow:ellipsis;
    white-space:nowrap;

}

.vehicle-spec-offer-card__emi{

    display:block;

    padding:0;
    margin-top:5px;

    border:none;

    background:transparent;

    color:#64748B;

    font-family:"Inter",sans-serif;
    font-size:12px;
    font-weight:500;
    line-height:1.35;
    text-align:left;
    text-decoration:underline;

    cursor:pointer;

}

.vehicle-spec-offer-card__emi:hover{

    color:var(--vehicle-primary);

}

.vehicle-spec-offer-card__cta{

    width:100%;
    height:48px;

    margin-top:18px;

    border:none;
    border-radius:12px;

    background:var(--vehicle-primary);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 7px 16px rgba(37,99,235,.20);

    color:#FFFFFF;

    font-family:"Inter",sans-serif;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.vehicle-spec-offer-card__cta:hover{

    background:var(--vehicle-primary-dark);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 20px rgba(37,99,235,.26);

    transform:translateY(-1px);

}

.vehicle-spec-offer-card__cta:active{

    transform:translateY(0);

}

/* ==========================================================
   Specifications Page — Vehicle Offer Card Mobile
========================================================== */

@media (max-width:768px){

    .vehicle-spec-offer-card{

        margin:0 12px 18px;
        padding:14px;

        border-radius:15px;

    }

    .vehicle-spec-offer-card__details{

    gap:10px;

}

.vehicle-spec-offer-card__image{

    width:78px;
    height:62px;

    border-radius:10px;

}

.vehicle-spec-offer-card__price{

    overflow:visible;

    font-size:clamp(12px,3.65vw,14px);
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.035em;

    text-overflow:clip;
    white-space:nowrap;

}

    .vehicle-spec-offer-card__cta{

        height:46px;
        margin-top:14px;

    }

}

/* ==========================================================
   Specifications Page — Premium Header
========================================================== */

.vehicle-specifications__header{

    position:relative;

    display:flex;
    align-items:center;

    min-height:84px;

    padding:22px 28px 20px;

    border-bottom:1px solid #E8EDF4;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F8FAFC 100%
        );

}

.vehicle-specifications__header::before{

    display:block;

    width:4px;
    height:34px;

    margin-right:13px;

    border-radius:999px;

    background:var(--vehicle-primary);

    content:"";

}

.vehicle-specifications__title{

    margin:0;

    color:#0F172A;

    font-family:"Inter",sans-serif;
    font-size:clamp(22px,2.2vw,30px);
    font-weight:750;
    line-height:1.18;
    letter-spacing:-.035em;

}

/* ==========================================================
   Section 5 — Price & Variants
========================================================== */

.vehicle-variant-explorer{

    width:calc(100% - 24px);
    max-width:1280px;

    margin:0 auto 64px;
    padding:28px;

    border:1px solid #E5E7EB;
    border-radius:22px;

    background:#FFFFFF;

    box-shadow:
        0 12px 32px rgba(15,23,42,.07);

}

.vehicle-variant-explorer__header{

    margin-bottom:18px;

}

.vehicle-variant-explorer__title{

    margin:0 0 8px;

    color:var(--vehicle-text);

    font-size:24px;
    font-weight:750;
    line-height:1.25;
    letter-spacing:-.03em;

}

.vehicle-variant-explorer__description{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

    color:var(--vehicle-text-light);

    font-size:14px;
    font-weight:400;
    line-height:1.55;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

}

.vehicle-variant-explorer__description.is-expanded{

    display:block;

}

.vehicle-variant-explorer__description-toggle{

    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:0;
    margin-top:5px;

    border:none;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

}

.vehicle-variant-explorer__description-toggle span:last-child{

    font-size:18px;
    line-height:1;

    transition:transform .2s ease;

}

.vehicle-variant-explorer__description.is-expanded
+ .vehicle-variant-explorer__description-toggle span:last-child{

    transform:rotate(90deg);

}

.vehicle-variant-explorer__filters{

    padding:18px;

    border:1px solid #E8EDF4;
    border-radius:16px;

    background:#F8FAFC;

}

.vehicle-variant-explorer__filter-group{

    margin-bottom:16px;

}

.vehicle-variant-explorer__filter-label{

    display:block;

    margin-bottom:8px;

    color:#475569;

    font-size:12px;
    font-weight:700;

}

.vehicle-variant-explorer__chips{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}

.vehicle-variant-explorer__chip{

    min-height:34px;

    padding:0 14px;

    border:1px solid #E2E8F0;
    border-radius:10px;

    background:#FFFFFF;

    color:#475569;

    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}

.vehicle-variant-explorer__chip:hover{

    border-color:#BFD4FF;

    color:var(--vehicle-primary);

}

.vehicle-variant-explorer__chip.is-active{

    border-color:var(--vehicle-primary);

    background:var(--vehicle-primary);

    color:#FFFFFF;

}

.vehicle-variant-explorer__budget{

    padding-top:4px;

}

.vehicle-variant-explorer__budget-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:10px;

    color:#475569;

    font-size:12px;
    font-weight:600;

}

.vehicle-variant-explorer__budget-header strong{

    color:var(--vehicle-text);

    font-size:13px;
    font-weight:750;

}

.vehicle-variant-explorer__budget-slider{

    width:100%;
    height:5px;

    appearance:none;

    border-radius:999px;

    background:#DBEAFE;

    accent-color:var(--vehicle-primary);

    cursor:pointer;

}

.vehicle-variant-explorer__budget-slider::-webkit-slider-thumb{

    width:18px;
    height:18px;

    appearance:none;

    border:3px solid #FFFFFF;
    border-radius:50%;

    background:var(--vehicle-primary);

    box-shadow:0 2px 7px rgba(37,99,235,.35);

}

.vehicle-variant-explorer__budget-limits{

    display:flex;
    justify-content:space-between;

    margin-top:7px;

    color:#94A3B8;

    font-size:11px;
    font-weight:500;

}

.vehicle-variant-explorer__actions{

    display:flex;
    align-items:center;
    gap:14px;

}

.vehicle-variant-explorer__compare-action{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:32px;
    padding:0 11px;

    border-radius:8px;

    background:var(--vehicle-primary);
    color:#FFFFFF;

    font-size:12px;
    font-weight:750;

    text-decoration:none;

    transition:
        opacity .2s ease,
        transform .2s ease;

}

.vehicle-variant-explorer__compare-action:hover{

    transform:translateY(-1px);

}

.vehicle-variant-explorer__compare-action.is-disabled{

    opacity:.45;

    pointer-events:none;

}

.vehicle-variant-explorer__results-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin:22px 0 12px;

}

.vehicle-variant-explorer__results-header strong{

    color:var(--vehicle-text);

    font-size:15px;
    font-weight:750;

}

.vehicle-variant-explorer__clear{

    padding:0;

    border:none;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

}

.vehicle-variant-explorer__list{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.vehicle-variant-explorer__card{

    overflow:hidden;

    border:1px solid #E5E7EB;
    border-radius:16px;

    background:#FFFFFF;

    box-shadow:0 5px 16px rgba(15,23,42,.04);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}

.vehicle-variant-explorer__card:hover{

    border-color:#C7DBFF;

    box-shadow:0 10px 24px rgba(37,99,235,.09);

    transform:translateY(-1px);

}

.vehicle-variant-explorer__card-main{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    padding:17px 18px;

}

.vehicle-variant-explorer__variant-name{

    margin:0 0 7px;

    color:var(--vehicle-text);

    font-size:16px;
    font-weight:700;
    line-height:1.3;

}

.vehicle-variant-explorer__meta{

    display:flex;
    flex-wrap:wrap;
    gap:0;

    color:var(--vehicle-text-light);

    font-size:12px;
    font-weight:500;
    line-height:1.45;

}

.vehicle-variant-explorer__meta span + span::before{

    margin:0 7px;

    color:#CBD5E1;

    content:"•";

}

.vehicle-variant-explorer__price{

    flex-shrink:0;

    color:var(--vehicle-text);

    font-size:17px;
    font-weight:750;
    line-height:1.3;
    text-align:right;

}

.vehicle-variant-explorer__card-footer{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    min-height:48px;

    padding:9px 18px;

    border-top:1px solid #EEF2F7;

    background:#F8FAFC;

}

.vehicle-variant-explorer__compare{

    display:inline-flex;
    align-items:center;
    gap:7px;

    color:#475569;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

}

.vehicle-variant-explorer__compare input{

    width:16px;
    height:16px;

    margin:0;

    accent-color:var(--vehicle-primary);

}

.vehicle-variant-explorer__offer{

    padding:0;

    border:none;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

}

.vehicle-variant-explorer__offer:hover{

    color:var(--vehicle-primary-dark);

}

.vehicle-variant-explorer__empty{

    margin:0;
    padding:28px 18px;

    border:1px dashed #CBD5E1;
    border-radius:14px;

    color:var(--vehicle-text-light);

    font-size:14px;
    text-align:center;

}

.vehicle-variant-explorer__card[hidden]{

    display:none;

}

/* ==========================================================
   Section 5.1 Price & Variants Mobile
========================================================== */

@media (max-width:768px){

    #vehicle-single-page .vehicle-variant-explorer{

        width:100vw;

        max-width:100vw;

        margin-top:0;
        margin-right:0;
        margin-bottom:40px;
        margin-left:calc(50% - 50vw);

        padding:18px 14px;

        border-radius:18px;

    }

    .vehicle-variant-explorer__title{

        font-size:20px;

    }

    .vehicle-variant-explorer__filters{

        padding:14px;

        border-radius:15px;

    }

    .vehicle-variant-explorer__chip{

        min-height:32px;

        padding:0 12px;

        font-size:12px;

    }

    .vehicle-variant-explorer__card-main{

        gap:12px;

        padding:15px 14px;

    }

    .vehicle-variant-explorer__variant-name{

        font-size:15px;

    }

    .vehicle-variant-explorer__price{

        max-width:42%;

        font-size:15px;

    }

    .vehicle-variant-explorer__card-footer{

        padding:9px 14px;

    }

}


/* ==========================================================
| Section 6 —  Expert Review
========================================================== */


/* ==========================================================
   Section 6 — Expert Review Preview
========================================================== */

.vehicle-expert-preview{
    --preview-blue:#2563EB;
    --preview-blue-dark:#1D4ED8;
    --preview-blue-soft:#EFF6FF;
    --preview-blue-border:#DBEAFE;
    --preview-text:#172033;
    --preview-muted:#64748B;
    --preview-border:#E5E7EB;
    --preview-green:#16A34A;
    --preview-green-soft:#F0FDF4;
    --preview-red:#EF4444;
    --preview-red-soft:#FFF7F7;

    width:calc(100% - 24px);
    max-width:1280px;

    margin:0 auto 64px;

    border:1px solid var(--preview-border);
    border-radius:22px;

    background:#FFFFFF;

    box-shadow:
        0 12px 32px rgba(15,23,42,.07);

    overflow:hidden;

    color:var(--preview-text);

    box-sizing:border-box;
}

.vehicle-expert-preview *,
.vehicle-expert-preview *::before,
.vehicle-expert-preview *::after{
    box-sizing:border-box;
}


/* ==========================================================
   Expert Review Preview Header / Rating
========================================================== */

.vehicle-expert-preview__header{
    padding:28px;

    border-bottom:1px solid #E8EDF4;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(37,99,235,.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F8FBFF 100%
        );
}

.vehicle-expert-preview__eyebrow,
.vehicle-expert-preview__section-label,
.vehicle-expert-preview__card-label{
    display:block;

    color:var(--preview-blue);

    font-size:11px;
    line-height:1.3;
    font-weight:800;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.vehicle-expert-preview__rating-row{
    display:flex;
    align-items:center;

    gap:18px;

    margin-top:18px;
}

.vehicle-expert-preview__rating-orb{
    flex:0 0 68px;

    width:68px;
    height:68px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #F5C84C,
            #D99A18
        );

    color:#FFFFFF;

    font-size:28px;

    box-shadow:
        0 12px 25px rgba(217,154,24,.24);
}

.vehicle-expert-preview__rating-content{
    min-width:0;
}

.vehicle-expert-preview__rating-line{
    display:flex;
    align-items:baseline;
    gap:9px;
}

.vehicle-expert-preview__rating-line strong{
    color:var(--preview-text);

    font-size:36px;
    line-height:1;
    font-weight:800;

    letter-spacing:-1px;
}

.vehicle-expert-preview__rating-line span{
    color:var(--preview-blue);

    font-size:11px;
    font-weight:800;

    letter-spacing:.08em;
}

.vehicle-expert-preview__rating-content h2{
    margin:7px 0 3px;

    color:var(--preview-text);

    font-size:22px;
    line-height:1.25;
    font-weight:800;
}

.vehicle-expert-preview__rating-content p{
    margin:0;

    color:var(--preview-muted);

    font-size:13px;
    line-height:1.45;
}


/* ==========================================================
   Expert Review Preview Expert Verdict
========================================================== */

.vehicle-expert-preview__verdict{
    padding:24px 28px;

    border-bottom:1px solid var(--preview-border);
}

.vehicle-expert-preview__verdict
.vehicle-expert-preview__section-label{
    margin-bottom:11px;
}

.vehicle-expert-preview__verdict-card{
    position:relative;

    display:flex;
    gap:15px;

    padding:20px 22px;

    border:1px solid var(--preview-blue-border);
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF5FF
        );

    overflow:hidden;
}

.vehicle-expert-preview__verdict-card::after{
    position:absolute;

    right:-50px;
    top:-60px;

    width:140px;
    height:140px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    content:"";
}

.vehicle-expert-preview__verdict-mark{
    position:relative;
    z-index:1;

    flex:0 0 auto;

    color:var(--preview-blue);

    font-size:45px;
    line-height:.8;
    font-weight:900;
}

.vehicle-expert-preview__verdict-text{
    position:relative;
    z-index:1;

    color:#26364D;

    font-size:14px;
    line-height:1.7;
}


/* ==========================================================
   Expert Review Preview Gallery
========================================================== */

.vehicle-expert-preview__gallery-section{
    padding:26px 28px;

    border-bottom:1px solid var(--preview-border);
}

.vehicle-expert-preview__section-heading{
    margin-bottom:16px;
}

.vehicle-expert-preview__section-heading h3{
    margin:5px 0 0;

    color:var(--preview-text);

    font-size:23px;
    line-height:1.2;
    font-weight:800;

    letter-spacing:-.4px;
}

.vehicle-expert-preview__gallery{
    position:relative;
}

.vehicle-expert-preview__gallery-frame{
    position:relative;

    overflow:hidden;

    border:1px solid var(--preview-border);
    border-radius:18px;

    background:#0F172A;

    box-shadow:
        0 12px 28px rgba(15,23,42,.08);
}

.vehicle-expert-preview__gallery-main{
    position:relative;

    width:100%;

    overflow:hidden;
}

.vehicle-expert-preview__gallery-slide{
    display:none;

    position:relative;

    width:100%;
}

.vehicle-expert-preview__gallery-slide.is-active{
    display:block;

    animation:
        vehicleExpertPreviewFade
        .3s
        ease;
}

.vehicle-expert-preview__gallery-slide img{
    display:block;

    width:100%;
    height:min(480px,48vw);

    min-height:250px;
    max-height:480px;

    object-fit:cover;
    object-position:center;
}

@keyframes vehicleExpertPreviewFade{

    from{
        opacity:0;
        transform:scale(1.01);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.vehicle-expert-preview__gallery-category{
    position:absolute;

    left:16px;
    bottom:16px;

    z-index:3;

    padding:6px 11px;

    border-radius:999px;

    background:rgba(15,23,42,.75);

    color:#FFFFFF;

    font-size:11px;
    font-weight:700;

    backdrop-filter:blur(8px);
}

.vehicle-expert-preview__gallery-counter{
    position:absolute;

    right:16px;
    bottom:16px;

    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:6px 11px;

    border-radius:999px;

    background:rgba(15,23,42,.78);

    color:#FFFFFF;

    font-size:11px;
    font-weight:700;

    backdrop-filter:blur(8px);
}

.vehicle-expert-preview__gallery-arrow{
    position:absolute;

    top:50%;
    z-index:4;

    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    padding:0;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;

    background:rgba(15,23,42,.68);

    color:#FFFFFF;

    cursor:pointer;

    transform:translateY(-50%);

    backdrop-filter:blur(8px);

    transition:
        background .2s ease,
        transform .2s ease;
}

.vehicle-expert-preview__gallery-arrow:hover{
    background:var(--preview-blue);

    transform:
        translateY(-50%)
        scale(1.05);
}

.vehicle-expert-preview__gallery-arrow--prev{
    left:14px;
}

.vehicle-expert-preview__gallery-arrow--next{
    right:14px;
}

.vehicle-expert-preview__gallery-thumbnails{
    display:flex;

    gap:8px;

    margin-top:10px;

    overflow-x:auto;

    padding-bottom:3px;
}

.vehicle-expert-preview__gallery-thumbnail{
    flex:0 0 72px;

    width:72px;
    height:52px;

    padding:0;

    overflow:hidden;

    border:2px solid transparent;
    border-radius:8px;

    background:#FFFFFF;

    cursor:pointer;

    opacity:.65;

    transition:
        opacity .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.vehicle-expert-preview__gallery-thumbnail:hover{
    opacity:1;

    transform:translateY(-1px);
}

.vehicle-expert-preview__gallery-thumbnail.is-active{
    border-color:var(--preview-blue);

    opacity:1;
}

.vehicle-expert-preview__gallery-thumbnail img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.vehicle-expert-preview__gallery-empty{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:220px;

    padding:30px;

    border:1px dashed #CBD5E1;
    border-radius:16px;

    background:#F8FAFC;

    color:var(--preview-muted);

    font-size:13px;
    text-align:center;
}


/* ==========================================================
   Expert Review Preview Pros & Cons
   Premium / Flat Design
========================================================== */

.vehicle-expert-preview__pros-cons-section{
    padding:26px 28px;

    border-bottom:1px solid var(--preview-border);
}

.vehicle-expert-preview__pros-cons{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;
}

.vehicle-expert-preview__pros-card,
.vehicle-expert-preview__cons-card{
    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-left-width:3px;

    border-radius:12px;

    overflow:hidden;

    box-shadow:none;
}

/* ==========================================================
   Pros
========================================================== */

.vehicle-expert-preview__pros-card{
    border-left-color:#16A34A;
}

/* ==========================================================
   Cons
========================================================== */

.vehicle-expert-preview__cons-card{
    border-left-color:#EF4444;
}

/* ==========================================================
   Pros / Cons Icon
========================================================== */

.vehicle-expert-preview__pros-icon,
.vehicle-expert-preview__cons-icon{
    flex:0 0 auto;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:8px;

    font-size:16px;
    font-weight:700;
}

.vehicle-expert-preview__pros-icon{
    background:#F0FDF4;
    color:#16A34A;
}

.vehicle-expert-preview__cons-icon{
    background:#FEF2F2;
    color:#EF4444;
}

/* ==========================================================
   Content
========================================================== */

.vehicle-expert-preview__pros-content,
.vehicle-expert-preview__cons-content{
    min-width:0;
    flex:1;
}

/* ==========================================================
   Labels
========================================================== */

.vehicle-expert-preview__pros-card
.vehicle-expert-preview__card-label{
    color:#16A34A;
}

.vehicle-expert-preview__cons-card
.vehicle-expert-preview__card-label{
    color:#EF4444;
}

/* ==========================================================
   Titles
========================================================== */

.vehicle-expert-preview__pros-content h4,
.vehicle-expert-preview__cons-content h4{
    margin:4px 0 13px;

    color:var(--preview-text);

    font-size:17px;
    line-height:1.25;
    font-weight:700;
}

/* ==========================================================
   Lists
========================================================== */

.vehicle-expert-preview__pros-content ul,
.vehicle-expert-preview__cons-content ul{
    margin:0;
    padding:0;

    list-style:none;
}

.vehicle-expert-preview__pros-content li,
.vehicle-expert-preview__cons-content li{
    display:flex;
    align-items:flex-start;

    gap:8px;

    margin:0 0 8px;

    color:#475569;

    font-size:13px;
    line-height:1.5;
}

.vehicle-expert-preview__pros-content li:last-child,
.vehicle-expert-preview__cons-content li:last-child{
    margin-bottom:0;
}

.vehicle-expert-preview__pros-content li > span{
    flex:0 0 auto;

    color:#16A34A;

    font-weight:700;
}

.vehicle-expert-preview__cons-content li > span{
    flex:0 0 auto;

    color:#EF4444;

    font-weight:700;
}

.vehicle-expert-preview__pros-content p,
.vehicle-expert-preview__cons-content p{
    margin:0;

    color:var(--preview-muted);

    font-size:13px;
}


/* ==========================================================
   Expert Review Preview CTA
========================================================== */

.vehicle-expert-preview__footer{
    padding:20px 28px 26px;

    text-align:center;
}

.vehicle-expert-preview__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:auto;
    height:auto;

    padding:0;
    margin:0;

    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;

    background:transparent;

    color:var(--preview-blue);

    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}

.vehicle-expert-preview__button:hover{
    background:transparent;

    color:var(--preview-blue-dark);

    transform:translateX(2px);
}

.vehicle-expert-preview__button span:last-child{
    font-size:20px;
    line-height:1;
}


/* ==========================================================
   Expert Review Preview Mobile
========================================================== */

@media (max-width:768px){

    #vehicle-single-page .vehicle-expert-preview{

        width:100vw;
        max-width:100vw;

        margin-top:0;
        margin-right:0;
        margin-bottom:40px;
        margin-left:calc(50% - 50vw);

        border-radius:18px;

    }

    .vehicle-expert-preview__header{
        padding:22px 14px 24px;
    }

    .vehicle-expert-preview__rating-row{
        gap:13px;
        margin-top:15px;
    }

    .vehicle-expert-preview__rating-orb{
        flex-basis:54px;

        width:54px;
        height:54px;

        border-radius:15px;

        font-size:23px;
    }

    .vehicle-expert-preview__rating-line strong{
        font-size:30px;
    }

    .vehicle-expert-preview__rating-line span{
        font-size:9px;
    }

    .vehicle-expert-preview__rating-content h2{
        font-size:19px;
    }

    .vehicle-expert-preview__rating-content p{
        font-size:11px;
    }

    .vehicle-expert-preview__verdict{
        padding:20px 14px;
    }

    .vehicle-expert-preview__verdict-card{
        padding:17px;

        gap:10px;

        border-radius:14px;
    }

    .vehicle-expert-preview__verdict-mark{
        font-size:38px;
    }

    .vehicle-expert-preview__verdict-text{
        font-size:13px;
        line-height:1.6;
    }

    .vehicle-expert-preview__gallery-section,
    .vehicle-expert-preview__pros-cons-section{
        padding:22px 14px;
    }

    .vehicle-expert-preview__section-heading{
        margin-bottom:13px;
    }

    .vehicle-expert-preview__section-heading h3{
        font-size:20px;
    }

    .vehicle-expert-preview__gallery-slide img{
        height:260px;
        min-height:220px;
        max-height:360px;
    }

    .vehicle-expert-preview__gallery-arrow{
        width:34px;
        height:34px;
    }

    .vehicle-expert-preview__gallery-arrow--prev{
        left:9px;
    }

    .vehicle-expert-preview__gallery-arrow--next{
        right:9px;
    }

    .vehicle-expert-preview__gallery-category{
        left:10px;
        bottom:10px;
    }

    .vehicle-expert-preview__gallery-counter{
        right:10px;
        bottom:10px;
    }

    .vehicle-expert-preview__pros-cons{
        grid-template-columns:1fr;
        gap:12px;
    }

    .vehicle-expert-preview__pros-card,
    .vehicle-expert-preview__cons-card{
        padding:17px;
        border-radius:15px;
    }

    .vehicle-expert-preview__pros-content h4,
    .vehicle-expert-preview__cons-content h4{
        font-size:17px;
    }

    .vehicle-expert-preview__pros-content li,
    .vehicle-expert-preview__cons-content li{
        font-size:12px;
    }

    .vehicle-expert-preview__footer{
        padding:17px 14px 20px;
    }

}


/* ==========================================================
| Expert Review Page
========================================================== */



.vehicle-expert-review {
    --review-blue: #2563eb;
    --review-blue-dark: #1d4ed8;
    --review-blue-soft: #eff6ff;
    --review-blue-border: #dbeafe;
    --review-text: #172033;
    --review-muted: #64748b;
    --review-border: #e5eaf2;
    --review-surface: #ffffff;
    --review-surface-soft: #f8fafc;
    --review-green: #16a34a;
    --review-green-soft: #f0fdf4;
    --review-red: #ef4444;
    --review-red-soft: #fff7f7;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto 48px;
    color: var(--review-text);
    box-sizing: border-box;
}

.vehicle-expert-review *,
.vehicle-expert-review *::before,
.vehicle-expert-review *::after {
    box-sizing: border-box;
}

.vehicle-expert-review img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================
| Expert Review Page Main Container
========================================================== */

.vehicle-expert-review__inner {
    width: 100%;
    background: var(--review-surface);
    border: 1px solid var(--review-border);
    border-radius: 24px;
    overflow: hidden;
}


/* ==========================================================
| Expert Review Page Premium Hero
========================================================== */

.vehicle-expert-review__hero {
    position: relative;
    padding: 28px 32px 34px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(37, 99, 235, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
    border-bottom: 1px solid var(--review-border);
}



.vehicle-expert-review__hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.vehicle-expert-review__back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--review-blue-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.vehicle-expert-review__back:hover {
    color: var(--review-blue);
}

.vehicle-expert-review__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--review-blue-soft);
    color: var(--review-blue);
    font-size: 17px;
}

.vehicle-expert-review__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--review-border);
    border-radius: 50%;
    background: #ffffff;
    color: var(--review-blue);
    cursor: pointer;
    font-size: 19px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.vehicle-expert-review__share:hover {
    transform: translateY(-2px);
    border-color: var(--review-blue-border);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.vehicle-expert-review__hero-content {
    display: flex;
    align-items: center;
    gap: 22px;
}

.vehicle-expert-review__rating-orb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;

    background: linear-gradient(
        145deg,
        #f59e0b,
        #d97706
    );

    color: #ffffff;
    font-size: 32px;

    box-shadow:
        0 14px 28px rgba(245, 158, 11, 0.25);
}

.vehicle-expert-review__rating-content {
    min-width: 0;
}

.vehicle-expert-review__rating-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.vehicle-expert-review__rating-value {
    color: var(--review-text);
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.5px;
}

.vehicle-expert-review__rating-label {
    color: var(--review-blue);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vehicle-expert-review__rating-content h1 {
    margin: 8px 0 5px;
    color: var(--review-text);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
}

.vehicle-expert-review__rating-content p {
    margin: 0;
    color: var(--review-muted);
    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================
| Expert Review Page Generic Sections
========================================================== */

.vehicle-expert-review__section {
    padding: 34px 32px;
    border-bottom: 1px solid var(--review-border);
}

.vehicle-expert-review__section:last-child {
    border-bottom: 0;
}

.vehicle-expert-review__section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.vehicle-expert-review__section-heading h2 {
    margin: 5px 0 0;
    color: var(--review-text);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}



.vehicle-expert-review__eyebrow,
.vehicle-expert-review__section-kicker,
.vehicle-expert-review__card-label {
    display: block;
    color: var(--review-blue);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ==========================================================
| Expert Review Page Verdict
========================================================== */

.vehicle-expert-review__section--verdict {
    padding-top: 30px;
    padding-bottom: 30px;
}

.vehicle-expert-review__section-kicker {
    margin-bottom: 13px;
}

.vehicle-expert-review__verdict-card {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 24px 26px;
    border: 1px solid var(--review-blue-border);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #eef5ff
        );
    overflow: hidden;
}

.vehicle-expert-review__verdict-card::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -70px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.06);
}

.vehicle-expert-review__verdict-mark {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    color: var(--review-blue);
    font-size: 52px;
    line-height: 0.8;
    font-weight: 900;
}

.vehicle-expert-review__verdict-text {
    position: relative;
    z-index: 1;
    color: #26364d;
    font-size: 16px;
    line-height: 1.75;
}

.vehicle-expert-review__verdict-text p {
    margin: 0;
}


/* ==========================================================
| Expert Review Page Road Test Slider
========================================================== */

.vehicle-expert-review__slider {
    position: relative;
    width: 100%;
}

.vehicle-expert-review__slider-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--review-border);
    border-radius: 20px;
    background: #0f172a;
    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.10);
}

.vehicle-expert-review__slider-main {
    position: relative;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
}

.vehicle-expert-review__slide {
    display: none;
    width: 100%;
    height: 100%;
}

.vehicle-expert-review__slide.is-active {
    display: block;
    animation: vehicleExpertFadeIn 0.35s ease;
}

.vehicle-expert-review__slide img {
    width: 100%;
    height: min(560px, 62vw);
    min-height: 300px;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
}

@keyframes vehicleExpertFadeIn {
    from {
        opacity: 0;
        transform: scale(1.015);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.vehicle-expert-review__slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.68);
    color: #ffffff;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.vehicle-expert-review__slider-arrow:hover {
    background: var(--review-blue);
    transform: translateY(-50%) scale(1.05);
}

.vehicle-expert-review__slider-arrow--prev {
    left: 18px;
}

.vehicle-expert-review__slider-arrow--next {
    right: 18px;
}

.vehicle-expert-review__slider-count {
    position: absolute;
    right: 18px;
    left: auto;
    bottom: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.vehicle-expert-review__slider-count-divider {
    opacity: 0.5;
}


/* ==========================================================
| Expert Review Page Pros & Cons
| Premium / Flat Design
========================================================== */

.vehicle-expert-review__pros-cons{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;
}

.vehicle-expert-review__pros-card,
.vehicle-expert-review__cons-card{
    position:relative;

    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:20px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-left-width:3px;

    border-radius:12px;

    overflow:hidden;

    box-shadow:none;
}

/* ==========================================================
| Pros
========================================================== */

.vehicle-expert-review__pros-card{
    border-left-color:#16A34A;
}

/* ==========================================================
| Cons
========================================================== */

.vehicle-expert-review__cons-card{
    border-left-color:#EF4444;
}

/* ==========================================================
| Pros / Cons Icon
========================================================== */

.vehicle-expert-review__pros-cons-icon{
    flex:0 0 auto;

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:8px;

    font-size:17px;
    font-weight:700;
}

.vehicle-expert-review__pros-card
.vehicle-expert-review__pros-cons-icon{
    background:#F0FDF4;

    color:#16A34A;
}

.vehicle-expert-review__cons-card
.vehicle-expert-review__pros-cons-icon{
    background:#FEF2F2;

    color:#EF4444;
}

/* ==========================================================
| Content
========================================================== */

.vehicle-expert-review__pros-cons-content{
    min-width:0;

    flex:1;
}

/* ==========================================================
| Labels
========================================================== */

.vehicle-expert-review__pros-card
.vehicle-expert-review__card-label{
    color:#16A34A;
}

.vehicle-expert-review__cons-card
.vehicle-expert-review__card-label{
    color:#EF4444;
}

/* ==========================================================
| Titles
========================================================== */

.vehicle-expert-review__pros-cons-content h3{
    margin:4px 0 15px;

    color:var(--review-text);

    font-size:19px;
    line-height:1.25;
    font-weight:700;
}

/* ==========================================================
| Lists
========================================================== */

.vehicle-expert-review__pros-cons-content ul{
    margin:0;
    padding:0;

    list-style:none;
}

.vehicle-expert-review__pros-cons-content li{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin:0 0 10px;

    color:#475569;

    font-size:14px;
    line-height:1.55;
}

.vehicle-expert-review__pros-cons-content li:last-child{
    margin-bottom:0;
}

.vehicle-expert-review__pros-card li > span{
    flex:0 0 auto;

    color:#16A34A;

    font-weight:700;
}

.vehicle-expert-review__cons-card li > span{
    flex:0 0 auto;

    color:#EF4444;

    font-weight:700;
}

.vehicle-expert-review__pros-cons-content p{
    margin:0;

    color:var(--review-muted);

    font-size:14px;
}



/* ==========================================================
| Expert Review Page Detailed Review Sections
========================================================== */

.vehicle-expert-review__details {
    background: #f8fafc;
}

.vehicle-expert-review__details
.vehicle-expert-review__section {
    background: #ffffff;
    margin: 0 0 1px;
}

.vehicle-expert-review__section-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vehicle-expert-review__section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--review-blue-soft);
    color: var(--review-blue);
    font-size: 13px;
    font-weight: 900;
}

.vehicle-expert-review__content {
    max-width: 900px;
    color: #334155;
    font-size: 16px;
    line-height: 1.8;
}

.vehicle-expert-review__content > *:first-child {
    margin-top: 0;
}

.vehicle-expert-review__content > *:last-child {
    margin-bottom: 0;
}

.vehicle-expert-review__content p {
    margin: 0 0 18px;
}

.vehicle-expert-review__content h3 {
    margin: 30px 0 12px;
    color: var(--review-text);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.vehicle-expert-review__content h4 {
    margin: 24px 0 10px;
    color: var(--review-text);
    font-size: 18px;
    font-weight: 800;
}

.vehicle-expert-review__content ul,
.vehicle-expert-review__content ol {
    margin: 18px 0;
    padding-left: 22px;
}

.vehicle-expert-review__content li {
    margin-bottom: 8px;
}

.vehicle-expert-review__content a {
    color: var(--review-blue);
    font-weight: 600;
}

.vehicle-expert-review__content blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 4px solid var(--review-blue);
    border-radius: 0 12px 12px 0;
    background: var(--review-blue-soft);
    color: #334155;
}

.vehicle-expert-review__content img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: 14px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.10);
}

.vehicle-expert-review__content figure {
    max-width: 100%;
    margin: 28px auto;
}

.vehicle-expert-review__content figure img {
    max-width: 100%;
    height: auto;
}

.vehicle-expert-review__content figcaption {
    margin-top: 8px;
    color: var(--review-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.vehicle-expert-review__content .alignleft {
    float: left;
    margin: 0 24px 18px 0;
    max-width: 50%;
}

.vehicle-expert-review__content .alignright {
    float: right;
    margin: 0 0 18px 24px;
    max-width: 50%;
}

.vehicle-expert-review__content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
| Expert Review Page Media Gallery
========================================================== */

.vehicle-expert-review__gallery-slider {
    position: relative;
}

.vehicle-expert-review__gallery-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--review-border);
    border-radius: 20px;
    background: #0f172a;
}

.vehicle-expert-review__gallery-main {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.vehicle-expert-review__gallery-slide {
    display: none;
    position: relative;
    width: 100%;
}

.vehicle-expert-review__gallery-slide.is-active {
    display: block;
    animation: vehicleExpertFadeIn 0.35s ease;
}

.vehicle-expert-review__gallery-slide img {
    width: 100%;
    height: min(560px, 62vw);
    min-height: 300px;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
}

.vehicle-expert-review__gallery-category {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.vehicle-expert-review__gallery-thumbnails {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.vehicle-expert-review__gallery-thumbnail {
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    opacity: 0.65;
    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.vehicle-expert-review__gallery-thumbnail:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.vehicle-expert-review__gallery-thumbnail.is-active {
    border-color: var(--review-blue);
    opacity: 1;
}

.vehicle-expert-review__gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================
| Expert Review Page Empty State
========================================================== */

.vehicle-expert-review__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    border: 1px dashed var(--review-border);
    border-radius: 16px;
    background: var(--review-surface-soft);
    color: var(--review-muted);
    font-size: 14px;
    text-align: center;
}


/* ==========================================================
| Expert Review Page Variants / Remaining Content
========================================================== */

#vehicle-expert-review-variants .vehicle-expert-review__content {
    max-width: 100%;
}


/* ==========================================================
|Expert Review Page Mobile
========================================================== */

@media (max-width: 767px) {

    .vehicle-expert-review {
        margin-bottom: 28px;
        border-radius: 0;
    }

    .vehicle-expert-review__inner {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .vehicle-expert-review__hero {
        padding: 22px 18px 26px;
    }

    .vehicle-expert-review__hero-top {
        margin-bottom: 24px;
    }

    .vehicle-expert-review__hero-content {
        gap: 15px;
    }

    .vehicle-expert-review__rating-orb {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
        font-size: 25px;
    }

    .vehicle-expert-review__rating-value {
        font-size: 35px;
    }

    .vehicle-expert-review__rating-label {
        font-size: 10px;
    }

    .vehicle-expert-review__rating-content h1 {
        font-size: 20px;
    }

    .vehicle-expert-review__rating-content p {
        font-size: 12px;
    }

    .vehicle-expert-review__section {
        padding: 26px 18px;
    }

    .vehicle-expert-review__section-heading {
        margin-bottom: 17px;
    }

    .vehicle-expert-review__section-heading h2 {
        font-size: 23px;
    }

    .vehicle-expert-review__verdict-card {
        padding: 20px;
        gap: 13px;
        border-radius: 16px;
    }

    .vehicle-expert-review__verdict-mark {
        font-size: 40px;
    }

    .vehicle-expert-review__verdict-text {
        font-size: 14px;
        line-height: 1.65;
    }

    .vehicle-expert-review__slider-frame,
    .vehicle-expert-review__gallery-frame {
        border-radius: 15px;
    }

    .vehicle-expert-review__slider-main {
        min-height: 220px;
    }

    .vehicle-expert-review__slide img,
    .vehicle-expert-review__gallery-slide img {
        width: 100%;
        height: 260px;
        min-height: 220px;
        max-height: 360px;
    }

    .vehicle-expert-review__slider-arrow {
        width: 36px;
        height: 36px;
    }

    .vehicle-expert-review__slider-arrow--prev {
        left: 10px;
    }

    .vehicle-expert-review__slider-arrow--next {
        right: 10px;
    }

    .vehicle-expert-review__slider-count {
    right: 10px;
    left: auto;
    bottom: 18px;
}

    .vehicle-expert-review__pros-cons {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .vehicle-expert-review__pros-card,
    .vehicle-expert-review__cons-card {
        padding: 19px;
        border-radius: 16px;
    }

    .vehicle-expert-review__pros-cons-content h3 {
        font-size: 18px;
    }

    .vehicle-expert-review__pros-cons-content li {
        font-size: 13px;
    }

    .vehicle-expert-review__section-title-wrap {
        gap: 11px;
    }

    .vehicle-expert-review__section-number {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 11px;
    }

    .vehicle-expert-review__content {
        font-size: 14px;
        line-height: 1.75;
    }

    .vehicle-expert-review__content h3 {
        font-size: 19px;
    }

    .vehicle-expert-review__content img {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
        border-radius: 11px;
    }

    .vehicle-expert-review__content .alignleft,
    .vehicle-expert-review__content .alignright {
        float: none;
        max-width: 100%;
        margin: 20px auto;
    }

    .vehicle-expert-review__gallery-thumbnail {
        flex-basis: 62px;
        width: 62px;
        height: 48px;
    }

}


/* ==========================================================
| Expert Review Page Very Small Screens
========================================================== */

@media (max-width: 420px) {

    .vehicle-expert-review__hero-content {
        align-items: flex-start;
    }

    .vehicle-expert-review__rating-line {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .vehicle-expert-review__rating-content h1 {
        font-size: 18px;
    }

    .vehicle-expert-review__section {
        padding-left: 15px;
        padding-right: 15px;
    }

}


/* ==========================================================
   Section 7 — Vehicle Comparison
   
   Current Vehicle Fixed
   ========================================================== */

.vehicle-comparison {
    width: 100%;
    margin: 48px 0 32px;
    padding: 22px 18px 20px;

    color: #111827;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.055);
}

.vehicle-comparison__header {
    margin: 0 0 22px;
}

.vehicle-comparison__eyebrow {
    display: block;

    margin: 0 0 8px;

    color: #2563eb;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vehicle-comparison__title {
    margin: 0;

    max-width: 720px;

    color: #111827;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.16;
    font-weight: 750;

    letter-spacing: -0.025em;
}


/* ==========================================================
   Horizontal Scroll
   ========================================================== */

.vehicle-comparison__scroll {
    width: 100%;

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

    padding-bottom: 10px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


/* ==========================================================
   Main Table
   ========================================================== */

.vehicle-comparison__table {
    --comparison-current-width: 150px;
    --comparison-vehicle-width: 190px;

    width: max-content;
    min-width: 100%;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;

    /*
     * IMPORTANT:
     * Do not use overflow:hidden here.
     *
     * The first vehicle column uses position:sticky.
     * overflow:hidden on the table can clip the sticky
     * column while the comparison columns scroll.
     */
    overflow: visible;

    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.055);
}


/* ==========================================================
   Vehicle Header
   ========================================================== */

.vehicle-comparison__vehicle-row {
    display: grid;

    grid-template-columns:
        var(--comparison-current-width)
        repeat(
            calc(var(--comparison-vehicle-count) - 1),
            var(--comparison-vehicle-width)
        );

    width: max-content;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;
}


.vehicle-comparison__vehicle {
    position: relative;

    width: var(--comparison-vehicle-width);
    min-width: var(--comparison-vehicle-width);

    padding: 14px 10px 17px;

    background: #ffffff;
}


.vehicle-comparison__vehicle:first-child {
    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    position: sticky;
    left: 0;

    z-index: 50;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;

    box-shadow:
        6px 0 14px rgba(15, 23, 42, 0.07);
}


.vehicle-comparison__vehicle-link {
    display: block;

    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   Vehicle Image
   ========================================================== */

.vehicle-comparison__image-wrap {
    position: relative;

    width: 100%;
    height: 112px;

    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 9px;

    background: #f3f4f6;
}


.vehicle-comparison__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #ffffff;

    transition: transform 0.25s ease;
}


.vehicle-comparison__vehicle-link:hover
.vehicle-comparison__image {
    transform: scale(1.025);
}


/* ==========================================================
   Placeholder
   ========================================================== */

.vehicle-comparison__image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #9ca3af;

    background: #f3f4f6;

    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   Current Vehicle Badge
   ========================================================== */

.vehicle-comparison__current-badge {
    position: absolute;

    top: 7px;
    left: 7px;

    z-index: 5;

    display: inline-flex;
    align-items: center;

    min-height: 21px;

    padding: 0 7px;

    border-radius: 999px;

    background: #1f2937;
    color: #ffffff;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   Vehicle Name
   ========================================================== */

.vehicle-comparison__name {
    min-height: 36px;

    margin: 0 0 4px;

    color: #111827;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}


/* ==========================================================
   Vehicle Price
   ========================================================== */

.vehicle-comparison__price {
    min-height: 17px;

    margin: 0 0 3px;

    color: #111827;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   View Offers
   ========================================================== */

.vehicle-comparison__offers {
    display: inline-flex;
    align-items: center;

    color: #2563eb;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;

    text-decoration: none;
}


/* ==========================================================
   Specification Row
   ========================================================== */

.vehicle-comparison__row {
    display: grid;

    grid-template-columns:
        var(--comparison-current-width)
        repeat(
            calc(var(--comparison-vehicle-count) - 1),
            var(--comparison-vehicle-width)
        );

    width: max-content;

    border-bottom: 1px solid #e5e7eb;

    background: #f7f8fa;
}


/* ==========================================================
   Specification Label
   ========================================================== */

.vehicle-comparison__row
.vehicle-comparison__label {
    grid-column: 1;
    grid-row: 1;

    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    min-height: 31px;

    display: flex;
    align-items: center;

    padding: 8px 10px 5px;

    background: #f7f8fa;

    color: #374151;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    border-bottom: 1px solid #eef0f3;

    position: sticky;
    left: 0;

    z-index: 15;
}


/* ==========================================================
   Specification Values
   ========================================================== */

.vehicle-comparison__row
.vehicle-comparison__value {
    grid-row: 2;

    width: var(--comparison-vehicle-width);
    min-width: var(--comparison-vehicle-width);

    min-height: 45px;

    display: flex;
    align-items: center;

    padding: 9px 10px;

    background: #ffffff;

    color: #374151;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;

    border-right: 1px solid #f0f1f3;
}


/*
 * FIRST value = current vehicle.
 *
 * This stays fixed together with its specification label.
 */
.vehicle-comparison__row
.vehicle-comparison__value:nth-child(2) {
    grid-column: 1;

    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    position: sticky;
    left: 0;

    z-index: 40;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;

    box-shadow:
        6px 0 14px rgba(15, 23, 42, 0.055);
}


/*
 * Competitor values.
 *
 * Child 3 = competitor 1
 * Child 4 = competitor 2
 * Child 5 = competitor 3
 * Child 6 = competitor 4
 * Child 7 = competitor 5
 */

.vehicle-comparison__row
.vehicle-comparison__value:nth-child(3) {
    grid-column: 2;
}

.vehicle-comparison__row
.vehicle-comparison__value:nth-child(4) {
    grid-column: 3;
}

.vehicle-comparison__row
.vehicle-comparison__value:nth-child(5) {
    grid-column: 4;
}

.vehicle-comparison__row
.vehicle-comparison__value:nth-child(6) {
    grid-column: 5;
}

.vehicle-comparison__row
.vehicle-comparison__value:nth-child(7) {
    grid-column: 6;
}


/* ==========================================================
   Footer
   Compact Comparison Footer
   ========================================================== */

.vehicle-comparison__footer-row {
    display: grid;

    grid-template-columns:
        var(--comparison-current-width)
        repeat(
            calc(var(--comparison-vehicle-count) - 1),
            var(--comparison-vehicle-width)
        );

    width: max-content;

    background: #ffffff;
}


.vehicle-comparison__footer-row
.vehicle-comparison__label {
    grid-column: 1;

    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    min-height: 32px;

    padding: 0;

    background: #ffffff;

    position: sticky;
    left: 0;

    z-index: 15;
}


.vehicle-comparison__footer-row
.vehicle-comparison__value {
    width: var(--comparison-vehicle-width);
    min-width: var(--comparison-vehicle-width);

    min-height: 32px;

    display: flex;
    align-items: center;

    padding: 6px 10px;

    background: #ffffff;

    border-right: 1px solid #f0f1f3;
}


.vehicle-comparison__footer-row
.vehicle-comparison__value:nth-child(2) {
    grid-column: 1;

    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    position: sticky;
    left: 0;

    z-index: 14;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;
}


/* ==========================================================
   Comparison Links
   ========================================================== */

.vehicle-comparison__compare-link {
    color: #2563eb;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;

    text-decoration: none;
}


.vehicle-comparison__compare-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


.vehicle-comparison__current-link {
    color: #9ca3af;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}


/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 768px) {

    .vehicle-comparison__table {
        --comparison-current-width: 190px;
        --comparison-vehicle-width: 190px;
    }

    .vehicle-comparison__vehicle {
        padding: 18px 14px 20px;
    }

    .vehicle-comparison__vehicle:first-child {
        width: var(--comparison-current-width);
        min-width: var(--comparison-current-width);
    }

    .vehicle-comparison__image-wrap {
        height: 135px;
    }

    .vehicle-comparison__name {
        font-size: 15px;
    }

    .vehicle-comparison__price {
        font-size: 13px;
    }

    .vehicle-comparison__offers {
        font-size: 12px;
    }

    .vehicle-comparison__row
.vehicle-comparison__label {
    font-size: 12px;
}

    .vehicle-comparison__row
    .vehicle-comparison__value {
        font-size: 13px;
    }
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    .vehicle-comparison {
        width: calc(100% + 24px);

        margin-top: 36px;
        margin-right: -12px;
        margin-bottom: 28px;
        margin-left: -12px;

        padding: 18px 10px 16px;

        border-radius: 16px;
    }

    .vehicle-comparison__header {
        margin-bottom: 17px;
    }

    .vehicle-comparison__title {
        font-size: 23px;
        line-height: 1.18;
    }

    .vehicle-comparison__scroll {
    margin: 0;

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

    padding-bottom: 0;

    scrollbar-width: none;
    }

    .vehicle-comparison__scroll::-webkit-scrollbar {
        display: none;
    }

    .vehicle-comparison__table {
    --comparison-current-width: 158px;
    --comparison-vehicle-width: 158px;

    border-radius: 15px;
    }

    .vehicle-comparison__vehicle {
        width: var(--comparison-vehicle-width);
        min-width: var(--comparison-vehicle-width);

        padding: 11px 8px 14px;
    }

    .vehicle-comparison__vehicle:first-child {
        width: var(--comparison-current-width);
        min-width: var(--comparison-current-width);
    }

    .vehicle-comparison__image-wrap {
    width: 100%;
    height: 88px;

    margin-bottom: 8px;

    border-radius: 8px;

    background: #ffffff;
}

    .vehicle-comparison__current-badge {
        top: 5px;
        left: 5px;

        min-height: 19px;

        padding: 0 6px;

        font-size: 7px;
    }

    .vehicle-comparison__name {
    min-height: 0;

    margin: 0 0 5px;

    color: #111827;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-comparison__price {
    min-height: 0;

    margin: 0 0 3px;

    color: #111827;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    letter-spacing: -0.2px;
}

.vehicle-comparison__offers {
    margin-top: 0;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

    .vehicle-comparison__row
.vehicle-comparison__label {
    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    min-height: 33px;

    padding: 8px 8px 6px;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

    .vehicle-comparison__row
    .vehicle-comparison__value {
    width: var(--comparison-vehicle-width);
    min-width: var(--comparison-vehicle-width);

    min-height: 44px;

    padding: 9px 8px;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}

    .vehicle-comparison__row
    .vehicle-comparison__value:nth-child(2) {
        width: var(--comparison-current-width);
        min-width: var(--comparison-current-width);
    }

    .vehicle-comparison__footer-row
.vehicle-comparison__label {
    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);

    min-height: 24px;
    padding: 0;
}

.vehicle-comparison__footer-row
.vehicle-comparison__value {
    width: var(--comparison-vehicle-width);
    min-width: var(--comparison-vehicle-width);

    min-height: 24px;

    display: flex;
    align-items: center;

    padding: 4px 8px;
}

.vehicle-comparison__footer-row
.vehicle-comparison__value:nth-child(2) {
    width: var(--comparison-current-width);
    min-width: var(--comparison-current-width);
}

.vehicle-comparison__compare-link,
.vehicle-comparison__current-link {
    font-size: 9px;
    line-height: 1.2;
}

}

/* ==========================================================
   Section 8 - Brochure, EMI, Offers Card & News Card
========================================================== */

.vehicle-actions-section{
    width:100%;
    margin:18px 0 28px;
}

.vehicle-actions-section__cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    width:100%;
}


/* ==========================================================
   Brochure, EMI & Offers Base Card
========================================================== */

.vehicle-action-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:100%;

    padding:20px;

    background:#FFFFFF;

    border:1px solid #E5EAF1;
    border-radius:18px;

    box-shadow:
        0 5px 18px rgba(15,23,42,.045),
        0 1px 3px rgba(15,23,42,.035);

    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.vehicle-action-card:hover{
    transform:translateY(-2px);

    border-color:#D7E1EE;

    box-shadow:
        0 14px 30px rgba(15,23,42,.075),
        0 3px 8px rgba(15,23,42,.035);
}


/* ==========================================================
   Brochure, EMI & Offers Card Header
========================================================== */

.vehicle-action-card__header{
    display:flex;
    align-items:flex-start;

    gap:13px;

    margin-bottom:17px;
}


.vehicle-action-card__icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:12px;

    background:#EFF6FF;

    color:var(--vehicle-primary);

    font-size:18px;
    font-weight:700;

    line-height:1;
}


.vehicle-action-card__heading{
    min-width:0;
    flex:1;
}


.vehicle-action-card__title{
    margin:0;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:18px;
    font-weight:700;

    line-height:1.3;

    letter-spacing:-.018em;
}


.vehicle-action-card__description{
    margin:5px 0 0;

    color:var(--vehicle-text-light);

    font-family:"Inter",sans-serif;

    font-size:12px;
    font-weight:400;

    line-height:1.5;
}


/* ==========================================================
Brochure Card
========================================================== */

.vehicle-brochure-card{
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #FAFCFF 100%
        );
}

.vehicle-brochure-card
.vehicle-action-card__icon{

    background:#EFF6FF;
    color:#2563EB;
}


/* ==========================================================
EMI Card 
========================================================== */

.vehicle-emi-action-card{
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #FAFCFF 100%
        );
}

.vehicle-emi-action-card
.vehicle-action-card__icon{

    background:#EFF6FF;
    color:#2563EB;
}

.vehicle-emi-action-card__amount{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin:2px 0 8px;
}

.vehicle-emi-action-card__amount strong{

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:18px;
    font-weight:700;

    line-height:1.2;

    letter-spacing:-.015em;
}

.vehicle-emi-action-card__edit{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:27px;

    padding:0 10px;

    border:1px solid #D7E2F2;
    border-radius:999px;

    background:#F5F8FD;

    color:#2563EB;

    font-family:"Inter",sans-serif;

    font-size:11px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.vehicle-emi-action-card__edit:hover{

    background:#EFF6FF;

    border-color:#BFD3F2;

    color:#1D4ED8;
}

.vehicle-emi-action-card__meta{

    margin:-2px 0 8px;

    color:var(--vehicle-text-light);

    font-family:"Inter",sans-serif;

    font-size:11px;
    font-weight:400;

    line-height:1.5;
}


/* ==========================================================
Offers Card
========================================================== */

.vehicle-offers-card{
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #FAFCFF 100%
        );
}

.vehicle-offers-card
.vehicle-action-card__icon{

    background:#EFF6FF;
    color:#2563EB;
}

.vehicle-offers-card__details{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin:-2px 0 8px;
}

.vehicle-offers-card__price{

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:20px;
    font-weight:700;

    line-height:1.3;

    letter-spacing:-.02em;
}

.vehicle-offers-card__emi{

    color:var(--vehicle-text-light);

    font-family:"Inter",sans-serif;

    font-size:11px;
    font-weight:500;

    line-height:1.5;
}


/* ==========================================================
Primary Buttons
========================================================== */

.vehicle-action-card__primary-button{

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:48px;

    margin-top:auto;
    padding:0 16px;

    border:1px solid #2563EB;
    border-radius:12px;

    background:#FFFFFF;

    color:#2563EB;

    font-family:"Inter",sans-serif;

    font-size:13px;
    font-weight:700;

    line-height:1;

    text-align:center;
    text-decoration:none;

    cursor:pointer;

    box-shadow:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.vehicle-action-card__primary-button:hover{

    background:#F5F9FF;

    border-color:#1D4ED8;

    color:#1D4ED8;

    transform:translateY(-1px);

    box-shadow:
        0 7px 16px rgba(37,99,235,.10);
}

.vehicle-action-card__primary-button:active{

    transform:translateY(0);
}


/* ==========================================================
   WhatsApp Buttons
========================================================== */

.vehicle-action-card__whatsapp{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    width:100%;

    margin-top:11px;
    padding:3px 0;

    border:0;

    background:transparent;

    color:#374151;

    font-family:"Inter",sans-serif;

    font-size:11px;
    font-weight:600;

    line-height:1.4;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.vehicle-action-card__whatsapp:hover{

    color:#168C3A;

    transform:translateY(-1px);
}


.vehicle-action-card__whatsapp-icon{

    display:flex;

    align-items:center;
    justify-content:center;

    width:19px;
    height:19px;

    flex:0 0 19px;

    border-radius:50%;

    background:#25D366;

    color:#FFFFFF;

    line-height:1;
}

.vehicle-action-card__whatsapp-icon svg{

    display:block;

    width:13px;
    height:13px;

    flex:0 0 13px;
}





/* ==========================================================
   Focus States
========================================================== */

.vehicle-action-card__primary-button:focus-visible,
.vehicle-action-card__whatsapp:focus-visible,
.vehicle-emi-action-card__edit:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.14);
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:900px){

    .vehicle-actions-section__cards{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:640px){

    .vehicle-actions-section{
        margin-bottom:24px;
    }

    .vehicle-actions-section__cards{
        grid-template-columns:1fr;
        gap:12px;
    }

    .vehicle-action-card{
        padding:18px;
        border-radius:17px;
    }

    .vehicle-action-card__title{
        font-size:18px;
    }

    .vehicle-action-card__description{
        font-size:12px;
    }

    /* ------------------------------------------
       EMI Amount
       ------------------------------------------ */

    .vehicle-emi-action-card__amount strong{
    font-size:16px !important;
    line-height:1.2;
}

    /* ------------------------------------------
       EMI Meta Text
       ------------------------------------------ */

    .vehicle-emi-action-card__meta{
        margin:-3px 0 9px !important;
    }

    /* ------------------------------------------
       Offers EMI Text
       ------------------------------------------ */

    .vehicle-offers-card__details{
        margin:-3px 0 9px !important;
    }

    /* ------------------------------------------
       Primary Button Text
       ------------------------------------------ */

    .vehicle-action-card__primary-button,
.vehicle-action-card__primary-button *{
    font-size:15px !important;
    font-weight:700 !important;
}

}

/* ==========================================================
   Vehicle News Card
========================================================== */

/* ----------------------------------------------------------
   News Section
---------------------------------------------------------- */

.vehicle-news-section{
    width:100%;

    margin-top:20px;
    padding:0 0 8px;
}


/* ----------------------------------------------------------
   News Section Header
---------------------------------------------------------- */

.vehicle-news-section__header{
    display:flex;
    align-items:center;

    width:100%;

    margin:0 0 14px;
}

.vehicle-news-section__title{
    display:flex;
    align-items:center;

    gap:10px;

    margin:0;
    padding:0;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:14px;
    font-weight:600;

    line-height:1.4;
    letter-spacing:-.01em;
}


/* ----------------------------------------------------------
   Blue Accent Line
---------------------------------------------------------- */

.vehicle-news-section__title::before{
    content:"";

    display:block;

    flex:0 0 3px;

    width:3px;
    height:24px;

    border-radius:999px;

    background:var(--vehicle-primary);
}


/* ----------------------------------------------------------
   News Horizontal Scroll
---------------------------------------------------------- */

.vehicle-news-section__viewport{
    width:100%;

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

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.vehicle-news-section__viewport::-webkit-scrollbar{
    display:none;
}

.vehicle-news-section__track{
    display:flex;

    flex-wrap:nowrap;

    gap:10px;

    width:max-content;
    min-width:100%;
}


/* ----------------------------------------------------------
   News Card
---------------------------------------------------------- */

.vehicle-news-card{
    flex:0 0 214px;

    width:214px;
    min-width:214px;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid #E5EAF1;
    border-radius:12px;

    box-shadow:
        0 2px 8px rgba(15,23,42,.035);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.vehicle-news-card:hover{
    transform:translateY(-1px);

    border-color:#D8E1EC;

    box-shadow:
        0 7px 18px rgba(15,23,42,.07);
}


/* ----------------------------------------------------------
   News Card Link
---------------------------------------------------------- */

.vehicle-news-card__link{
    display:block;

    width:100%;

    color:inherit;
    text-decoration:none;
}


/* ----------------------------------------------------------
   News Image
---------------------------------------------------------- */

.vehicle-news-card__image{
    position:relative;

    width:100%;
    height:122px;

    overflow:hidden;

    background:#F3F6FA;
}

.vehicle-news-card__image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .3s ease;
}

.vehicle-news-card:hover
.vehicle-news-card__image img{
    transform:scale(1.035);
}


/* ----------------------------------------------------------
   Image Placeholder
---------------------------------------------------------- */

.vehicle-news-card__image-placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            145deg,
            #F7F9FC 0%,
            #EEF2F7 100%
        );

    color:#94A3B8;

    font-family:"Inter",sans-serif;

    font-size:11px;
    font-weight:600;
}


/* ----------------------------------------------------------
   News Card Content
---------------------------------------------------------- */

.vehicle-news-card__content{
    display:flex;
    flex-direction:column;

    min-height:88px;

    padding:10px 11px 11px;
}


/* ----------------------------------------------------------
   News Title
---------------------------------------------------------- */

.vehicle-news-card__title{
    display:-webkit-box;

    overflow:hidden;

    margin:0 0 7px;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:12px;
    font-weight:600;

    line-height:1.4;
    letter-spacing:-.005em;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


/* ----------------------------------------------------------
   News Date
---------------------------------------------------------- */

.vehicle-news-card__date{
    display:block;

    margin-top:auto;

    color:#94A3B8;

    font-family:"Inter",sans-serif;

    font-size:10px;
    font-weight:500;

    line-height:1.4;
}


/* ----------------------------------------------------------
View All News Footer
---------------------------------------------------------- */

.vehicle-news-section__footer{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:20px;
}

/* ----------------------------------------------------------
View All News Button
---------------------------------------------------------- */

.vehicle-news-section__view-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    min-height:auto;

    margin:0;
    padding:0;

    border:0;
    border-radius:0;

    background:transparent;

    color:var(--vehicle-primary);

    font-family:"Inter",sans-serif;

    font-size:14px;
    font-weight:600;

    line-height:1.4;

    text-decoration:none !important;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}

.vehicle-news-section__view-all:hover{
    color:var(--vehicle-primary-dark);

    text-decoration:none !important;

    transform:translateY(-1px);
}

.vehicle-news-section__view-all::after{
    content:"›";

    font-size:18px;
    font-weight:600;

    line-height:1;
}


/* ----------------------------------------------------------
   News Card Focus
---------------------------------------------------------- */

.vehicle-news-card__link:focus-visible{
    outline:none;

    box-shadow:
        inset 0 0 0 2px var(--vehicle-primary),
        0 0 0 3px rgba(37,99,235,.12);

    border-radius:12px;
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    .vehicle-news-section{
        margin-top:18px;

        padding-bottom:6px;
    }


    /* ------------------------------------------
       Header
       ------------------------------------------ */

    .vehicle-news-section__header{
        margin-bottom:15px;
    }

    .vehicle-news-section__title{
        gap:10px;

        font-size:14px;
        font-weight:600;

        line-height:1.4;
    }

    .vehicle-news-section__title::before{
        width:3px;
        height:24px;

        flex-basis:3px;
    }


    /* ------------------------------------------
       Horizontal Track
       ------------------------------------------ */

    .vehicle-news-section__track{
        gap:10px;
    }


    /* ------------------------------------------
       News Card
       ------------------------------------------ */

    .vehicle-news-card{
        flex:0 0 214px;

        width:214px;
        min-width:214px;

        border-radius:12px;
    }


    /* ------------------------------------------
       Image
       ------------------------------------------ */

    .vehicle-news-card__image{
        height:122px;
    }


    /* ------------------------------------------
       Content
       ------------------------------------------ */

    .vehicle-news-card__content{
        min-height:88px;

        padding:10px 11px 11px;
    }


    /* ------------------------------------------
       Title
       ------------------------------------------ */

    .vehicle-news-card__title{
        margin-bottom:7px;

        font-size:12px;
        line-height:1.4;
    }


    /* ------------------------------------------
       Date
       ------------------------------------------ */

    .vehicle-news-card__date{
        font-size:10px;
    }


    /* ------------------------------------------
       View All Footer
       ------------------------------------------ */

    .vehicle-news-section__footer{
        margin-top:20px;
    }


    /* ------------------------------------------
       View All Button
       ------------------------------------------ */

    .vehicle-news-section__view-all{
    min-height:auto;

    padding:0;

    color:var(--vehicle-primary);

    font-size:16px;
    font-weight:600;

    text-decoration:none !important;
}

    .vehicle-news-section__view-all::after{
        font-size:18px;
    }
}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    .vehicle-news-card,
    .vehicle-news-card__image img,
    .vehicle-news-section__view-all{
        transition:none;
    }
}

/* ==========================================================
   Section 8B
   Dedicated Vehicle News & Updates Page
   Premium / Elegant / Responsive
========================================================== */


/* ==========================================================
   Page Shell
========================================================== */

.vehicle-news-page{
    --news-blue:var(--vehicle-primary);
    --news-blue-dark:var(--vehicle-primary-dark);

    --news-text:#0F172A;
    --news-text-soft:#475569;
    --news-text-muted:#94A3B8;

    --news-border:#E7EBF1;
    --news-border-soft:#EEF2F6;

    --news-surface:#FFFFFF;
    --news-surface-soft:#F8FAFC;

    --news-shadow:
        0 8px 28px rgba(15,23,42,.055),
        0 2px 6px rgba(15,23,42,.025);

    --news-shadow-hover:
        0 20px 45px rgba(15,23,42,.10),
        0 5px 14px rgba(15,23,42,.045);

    width:100%;

    padding:34px 0 64px;

    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #F7F9FC 100%
        );

    color:var(--news-text);

    font-family:"Inter",sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


.vehicle-news-page *,
.vehicle-news-page *::before,
.vehicle-news-page *::after{
    box-sizing:border-box;
}


/* ==========================================================
   Container
========================================================== */

.vehicle-news-page__container{
    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin:0 auto;
}


/* ==========================================================
   Page Header
========================================================== */

.vehicle-news-page__header{
    margin-bottom:26px;
}


/* ==========================================================
   Back Link
========================================================== */

.vehicle-news-page__back{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin:0 0 22px;

    color:#64748B;

    font-size:12px;
    font-weight:600;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .22s ease,
        transform .22s ease;
}


.vehicle-news-page__back:hover{
    color:var(--news-blue);

    transform:translateX(-2px);
}


.vehicle-news-page__back-icon{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    flex:0 0 28px;

    border:1px solid #E2E8F0;

    border-radius:50%;

    background:#FFFFFF;

    color:#475569;

    font-size:15px;

    box-shadow:
        0 3px 10px rgba(15,23,42,.045);

    transition:
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}


.vehicle-news-page__back:hover
.vehicle-news-page__back-icon{
    border-color:#CFE0FF;

    color:var(--news-blue);

    box-shadow:
        0 5px 14px rgba(37,99,235,.10);
}


/* ==========================================================
   Heading
========================================================== */

.vehicle-news-page__heading{
    position:relative;

    max-width:850px;

    padding-left:18px;
}


.vehicle-news-page__heading::before{
    content:"";

    position:absolute;

    top:4px;
    bottom:4px;
    left:0;

    width:3px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #3B82F6 0%,
            var(--news-blue-dark) 100%
        );
}


.vehicle-news-page__eyebrow{
    display:block;

    margin:0 0 8px;

    color:var(--news-blue);

    font-size:10px;
    font-weight:800;

    line-height:1.4;

    letter-spacing:.13em;

    text-transform:uppercase;
}


.vehicle-news-page__title{
    margin:0;

    color:var(--news-text);

    font-size:clamp(
        28px,
        3.4vw,
        42px
    );

    font-weight:800;

    line-height:1.13;

    letter-spacing:-.035em;
}


.vehicle-news-page__description{
    max-width:700px;

    margin:11px 0 0;

    color:#64748B;

    font-size:14px;
    font-weight:400;

    line-height:1.7;
}


/* ==========================================================
   Vehicle Offer Card
========================================================== */

.vehicle-news-page__offer{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    width:100%;

    margin:0 0 42px;

    padding:16px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #F8FBFF 100%
        );

    border:1px solid #E3E9F1;

    border-radius:18px;

    box-shadow:var(--news-shadow);

    overflow:hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.vehicle-news-page__offer::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(37,99,235,.35) 25%,
            rgba(37,99,235,.7) 50%,
            rgba(37,99,235,.35) 75%,
            transparent 100%
        );

    opacity:.7;
}


.vehicle-news-page__offer:hover{
    border-color:#D8E2EF;

    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        0 3px 8px rgba(15,23,42,.035);

    transform:translateY(-1px);
}


/* ==========================================================
   Offer Details
========================================================== */

.vehicle-news-page__offer-details{
    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

    flex:1;
}


/* ==========================================================
   Offer Image
========================================================== */

.vehicle-news-page__offer-image{
    position:relative;

    width:132px;
    height:78px;

    flex:0 0 132px;

    overflow:hidden;

    border:1px solid #EDF1F5;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #F8FAFC 0%,
            #F1F5F9 100%
        );
}


.vehicle-news-page__offer-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    transition:transform .35s ease;
}


.vehicle-news-page__offer:hover
.vehicle-news-page__offer-image img{
    transform:scale(1.035);
}


.vehicle-news-page__offer-placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:#94A3B8;

    font-size:10px;
    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.05em;
}


/* ==========================================================
   Offer Content
========================================================== */

.vehicle-news-page__offer-content{
    min-width:0;

    flex:1;
}


.vehicle-news-page__offer-reviews{
    display:flex;

    align-items:center;

    gap:5px;

    margin-bottom:5px;

    color:#64748B;

    font-size:11px;
    font-weight:500;

    line-height:1.3;
}


.vehicle-news-page__offer-reviews strong{
    color:#1E293B;

    font-size:12px;
    font-weight:700;
}


.vehicle-news-page__offer-star{
    color:#F59E0B;

    font-size:12px;

    line-height:1;
}


.vehicle-news-page__offer-price{
    margin:0 0 3px;

    color:#0F172A;

    font-size:18px;
    font-weight:750;

    line-height:1.25;

    letter-spacing:-.015em;
}


.vehicle-news-page__offer-emi{
    display:inline-flex;

    align-items:center;

    padding:0;

    margin:0;

    border:0;

    outline:0;

    background:transparent;

    color:#64748B;

    font-family:"Inter",sans-serif;

    font-size:10px;
    font-weight:500;

    line-height:1.4;

    cursor:pointer;

    transition:
        color .2s ease;
}


.vehicle-news-page__offer-emi:hover{
    color:var(--news-blue);
}


/* ==========================================================
   Offer CTA
========================================================== */

.vehicle-news-page__offer-cta{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:170px;
    height:44px;

    flex:0 0 auto;

    padding:0 20px;

    margin:0;

    border:1px solid rgba(255,255,255,.18);

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #3B82F6 0%,
            var(--news-blue) 50%,
            #1D4ED8 100%
        );

    color:#FFFFFF;

    font-family:"Inter",sans-serif;

    font-size:12px;
    font-weight:700;

    line-height:1;

    letter-spacing:.005em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 7px 17px rgba(37,99,235,.20);

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


.vehicle-news-page__offer-cta:hover{
    color:#FFFFFF;

    background:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #1D4ED8 55%,
            #1E40AF 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 11px 24px rgba(37,99,235,.27);

    transform:translateY(-1px);

    filter:saturate(1.04);
}


.vehicle-news-page__offer-cta:active{
    transform:translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(15,23,42,.18),
        0 5px 12px rgba(37,99,235,.18);
}


.vehicle-news-page__offer-cta:focus-visible{
    outline:none;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.15),
        0 8px 20px rgba(37,99,235,.22);
}


/* ==========================================================
   News Content Header
========================================================== */

.vehicle-news-page__content-header{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin:0 0 18px;
}


.vehicle-news-page__section-eyebrow{
    display:block;

    margin:0 0 5px;

    color:var(--news-blue);

    font-size:10px;
    font-weight:800;

    line-height:1.4;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.vehicle-news-page__content-header h2{
    margin:0;

    color:#0F172A;

    font-size:23px;
    font-weight:750;

    line-height:1.3;

    letter-spacing:-.02em;
}


.vehicle-news-page__result-count{
    flex:0 0 auto;

    padding:6px 10px;

    border:1px solid #E7ECF2;

    border-radius:999px;

    background:#FFFFFF;

    color:#64748B;

    font-size:10px;
    font-weight:600;

    line-height:1;

    box-shadow:
        0 2px 7px rgba(15,23,42,.025);
}


/* ==========================================================
   News Grid
========================================================== */

.vehicle-news-page__grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:22px;

    width:100%;
}


/* ==========================================================
   News Card
========================================================== */

.vehicle-news-page__card{
    position:relative;

    min-width:0;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid var(--news-border);

    border-radius:17px;

    box-shadow:
        0 4px 14px rgba(15,23,42,.035);

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        border-color .25s ease,
        box-shadow .28s ease;
}


.vehicle-news-page__card:hover{
    transform:translateY(-5px);

    border-color:#D8E1EC;

    box-shadow:var(--news-shadow-hover);
}


/* ==========================================================
   Card Link
========================================================== */

.vehicle-news-page__card-link{
    display:flex;

    flex-direction:column;

    width:100%;
    height:100%;

    color:inherit;

    text-decoration:none;
}


/* ==========================================================
   Card Image
========================================================== */

.vehicle-news-page__card-image{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #F5F7FA 0%,
            #EDEFF3 100%
        );
}


.vehicle-news-page__card-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0) 55%,
            rgba(15,23,42,.10) 100%
        );

    pointer-events:none;

    opacity:.7;
}


.vehicle-news-page__card-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .5s cubic-bezier(.22,1,.36,1);
}


.vehicle-news-page__card:hover
.vehicle-news-page__card-image img{
    transform:scale(1.055);
}


.vehicle-news-page__card-image-placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            145deg,
            #F8FAFC 0%,
            #EEF2F7 100%
        );

    color:#94A3B8;

    font-size:12px;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}


/* ==========================================================
   Card Content
========================================================== */

.vehicle-news-page__card-content{
    display:flex;

    flex-direction:column;

    min-height:184px;

    padding:18px 18px 17px;
}


/* ==========================================================
   Card Title
========================================================== */

.vehicle-news-page__card-title{
    display:-webkit-box;

    overflow:hidden;

    margin:0;

    color:#0F172A;

    font-size:17px;
    font-weight:700;

    line-height:1.42;

    letter-spacing:-.015em;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    transition:
        color .22s ease;
}


.vehicle-news-page__card:hover
.vehicle-news-page__card-title{
    color:#1D4ED8;
}


/* ==========================================================
   Card Excerpt
========================================================== */

.vehicle-news-page__card-excerpt{
    display:-webkit-box;

    overflow:hidden;

    margin:10px 0 16px;

    color:#64748B;

    font-size:12.5px;
    font-weight:400;

    line-height:1.65;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


/* ==========================================================
   Card Meta
========================================================== */

.vehicle-news-page__card-meta{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

    margin-top:auto;

    padding-top:13px;

    border-top:1px solid #F0F2F5;

    color:#94A3B8;

    font-size:10px;
    font-weight:500;

    line-height:1.4;
}


.vehicle-news-page__card-meta time{
    color:#64748B;

    font-weight:500;
}


/* ==========================================================
   Card Focus
========================================================== */

.vehicle-news-page__card-link:focus-visible{
    outline:none;
}


.vehicle-news-page__card-link:focus-visible
.vehicle-news-page__card-content{
    box-shadow:
        inset 0 0 0 2px rgba(37,99,235,.75);
}


/* ==========================================================
   Empty State
========================================================== */

.vehicle-news-page__empty{
    display:flex;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    min-height:330px;

    padding:48px 24px;

    border:1px solid var(--news-border);

    border-radius:18px;

    background:#FFFFFF;

    text-align:center;

    box-shadow:var(--news-shadow);
}


.vehicle-news-page__empty-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    margin-bottom:16px;

    border:1px solid #E7EDF5;

    border-radius:16px;

    background:#F8FAFC;

    color:var(--news-blue);

    font-size:25px;

    box-shadow:
        0 6px 16px rgba(15,23,42,.04);
}


.vehicle-news-page__empty h2{
    margin:0;

    color:#0F172A;

    font-size:22px;
    font-weight:750;

    line-height:1.3;

    letter-spacing:-.02em;
}


.vehicle-news-page__empty p{
    max-width:500px;

    margin:9px 0 22px;

    color:#64748B;

    font-size:13px;
    font-weight:400;

    line-height:1.65;
}


.vehicle-news-page__empty-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #3B82F6,
            #2563EB
        );

    color:#FFFFFF;

    font-size:12px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 7px 18px rgba(37,99,235,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.vehicle-news-page__empty-button:hover{
    color:#FFFFFF;

    transform:translateY(-1px);

    box-shadow:
        0 10px 22px rgba(37,99,235,.24);
}


/* ==========================================================
   Pagination
========================================================== */

.vehicle-news-page__pagination{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin-top:38px;
}


.vehicle-news-page__pagination-numbers{
    display:flex;

    align-items:center;

    gap:6px;
}


.vehicle-news-page__pagination-button,
.vehicle-news-page__pagination-number{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:38px;
    height:38px;

    padding:0 10px;

    border:1px solid #E0E6ED;

    border-radius:10px;

    background:#FFFFFF;

    color:#475569;

    font-size:12px;
    font-weight:700;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 2px 6px rgba(15,23,42,.025);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.vehicle-news-page__pagination-button:hover,
.vehicle-news-page__pagination-number:hover{
    border-color:#C9D9F4;

    background:#F8FBFF;

    color:var(--news-blue);

    transform:translateY(-1px);

    box-shadow:
        0 5px 12px rgba(15,23,42,.055);
}


.vehicle-news-page__pagination-button--arrow{
    font-size:21px;

    font-weight:400;
}


.vehicle-news-page__pagination-number.is-active{
    border-color:var(--news-blue);

    background:
        linear-gradient(
            135deg,
            #3B82F6,
            #2563EB
        );

    color:#FFFFFF;

    box-shadow:
        0 6px 15px rgba(37,99,235,.20);
}


.vehicle-news-page__pagination-number.is-active:hover{
    color:#FFFFFF;

    transform:none;
}


.vehicle-news-page__pagination-button.is-disabled{
    opacity:.38;

    pointer-events:none;

    box-shadow:none;
}


.vehicle-news-page__pagination-ellipsis{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:22px;
    height:38px;

    color:#94A3B8;

    font-size:13px;
    font-weight:600;
}


.vehicle-news-page__pagination-summary{
    margin-top:11px;

    color:#94A3B8;

    font-size:10px;
    font-weight:500;

    line-height:1.4;

    text-align:center;
}


.vehicle-news-page__pagination-summary strong{
    color:#475569;

    font-weight:700;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:980px){

    .vehicle-news-page{
        padding-top:28px;
        padding-bottom:52px;
    }


    .vehicle-news-page__container{
        width:min(
            100% - 32px,
            760px
        );
    }


    .vehicle-news-page__grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:18px;
    }


    .vehicle-news-page__offer{
        margin-bottom:36px;
    }


    .vehicle-news-page__offer-image{
        width:118px;
        height:72px;

        flex-basis:118px;
    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    .vehicle-news-page{
        padding:22px 0 42px;
    }


    .vehicle-news-page__container{
        width:calc(100% - 24px);
    }


    /* ------------------------------------------
       Header
    ------------------------------------------ */

    .vehicle-news-page__header{
        margin-bottom:20px;
    }


    .vehicle-news-page__back{
        margin-bottom:17px;

        font-size:11px;
    }


    .vehicle-news-page__back-icon{
        width:26px;
        height:26px;

        flex-basis:26px;

        font-size:14px;
    }


    .vehicle-news-page__heading{
        padding-left:15px;
    }


    .vehicle-news-page__eyebrow{
        margin-bottom:7px;

        font-size:9px;

        letter-spacing:.12em;
    }


    .vehicle-news-page__title{
        font-size:26px;

        line-height:1.16;

        letter-spacing:-.03em;
    }


    .vehicle-news-page__description{
        margin-top:9px;

        font-size:12.5px;

        line-height:1.6;
    }


    /* ------------------------------------------
       Offer Card
    ------------------------------------------ */

    .vehicle-news-page__offer{
        display:block;

        margin-bottom:30px;

        padding:13px;

        border-radius:15px;
    }


    .vehicle-news-page__offer-details{
        gap:12px;
    }


    .vehicle-news-page__offer-image{
        width:100px;
        height:62px;

        flex-basis:100px;

        border-radius:10px;
    }


    .vehicle-news-page__offer-reviews{
        margin-bottom:3px;

        font-size:10px;
    }


    .vehicle-news-page__offer-reviews strong{
        font-size:11px;
    }


    .vehicle-news-page__offer-price{
        margin-bottom:2px;

        font-size:15px;
    }


    .vehicle-news-page__offer-emi{
        font-size:9.5px;
    }


    .vehicle-news-page__offer-cta{
        width:100%;

        min-width:0;

        height:42px;

        margin-top:13px;

        border-radius:10px;

        font-size:11.5px;
    }


    /* ------------------------------------------
       News Header
    ------------------------------------------ */

    .vehicle-news-page__content-header{
        align-items:flex-start;

        flex-direction:column;

        gap:7px;

        margin-bottom:15px;
    }


    .vehicle-news-page__section-eyebrow{
        font-size:9px;
    }


    .vehicle-news-page__content-header h2{
        font-size:20px;
    }


    .vehicle-news-page__result-count{
        padding:5px 9px;

        font-size:9px;
    }


    /* ------------------------------------------
       Grid
    ------------------------------------------ */

    .vehicle-news-page__grid{
        grid-template-columns:1fr;

        gap:16px;
    }


    /* ------------------------------------------
       News Card
    ------------------------------------------ */

    .vehicle-news-page__card{
        border-radius:15px;
    }


    .vehicle-news-page__card:hover{
        transform:translateY(-2px);
    }


    .vehicle-news-page__card-image{
        aspect-ratio:16 / 9;
    }


    .vehicle-news-page__card-content{
        min-height:0;

        padding:15px 15px 14px;
    }


    .vehicle-news-page__card-title{
        font-size:16px;

        line-height:1.42;
    }


    .vehicle-news-page__card-excerpt{
        margin:9px 0 13px;

        font-size:12px;

        line-height:1.6;
    }


    .vehicle-news-page__card-meta{
        padding-top:11px;

        font-size:9.5px;
    }


    /* ------------------------------------------
       Empty State
    ------------------------------------------ */

    .vehicle-news-page__empty{
        min-height:285px;

        padding:38px 20px;

        border-radius:15px;
    }


    .vehicle-news-page__empty-icon{
        width:52px;
        height:52px;

        border-radius:14px;

        font-size:22px;
    }


    .vehicle-news-page__empty h2{
        font-size:20px;
    }


    .vehicle-news-page__empty p{
        font-size:12px;
    }


    /* ------------------------------------------
       Pagination
    ------------------------------------------ */

    .vehicle-news-page__pagination{
        gap:5px;

        margin-top:30px;
    }


    .vehicle-news-page__pagination-numbers{
        gap:4px;
    }


    .vehicle-news-page__pagination-button,
    .vehicle-news-page__pagination-number{
        min-width:34px;
        height:34px;

        padding:0 8px;

        border-radius:8px;

        font-size:11px;
    }


    .vehicle-news-page__pagination-button--arrow{
        font-size:19px;
    }


    .vehicle-news-page__pagination-ellipsis{
        min-width:16px;
        height:34px;

        font-size:11px;
    }


    .vehicle-news-page__pagination-summary{
        font-size:9px;
    }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:420px){

    .vehicle-news-page__title{
        font-size:24px;
    }


    .vehicle-news-page__offer-details{
        align-items:center;
    }


    .vehicle-news-page__offer-image{
        width:88px;
        height:56px;

        flex-basis:88px;
    }


    .vehicle-news-page__offer-price{
        font-size:14px;
    }


    .vehicle-news-page__pagination-button,
    .vehicle-news-page__pagination-number{
        min-width:32px;
        height:32px;

        padding:0 6px;
    }


    .vehicle-news-page__pagination-numbers{
        gap:3px;
    }

}


/* ==========================================================
   Very Small Mobile
========================================================== */

@media (max-width:360px){

    .vehicle-news-page__container{
        width:calc(100% - 20px);
    }


    .vehicle-news-page__title{
        font-size:22px;
    }


    .vehicle-news-page__offer-image{
        width:78px;
        height:52px;

        flex-basis:78px;
    }


    .vehicle-news-page__offer-price{
        font-size:13px;
    }


    .vehicle-news-page__offer-emi{
        font-size:8.5px;
    }


    .vehicle-news-page__pagination-button,
    .vehicle-news-page__pagination-number{
        min-width:30px;
        height:30px;

        padding:0 5px;
    }


    .vehicle-news-page__pagination-ellipsis{
        min-width:12px;
        height:30px;
    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    .vehicle-news-page__back,
    .vehicle-news-page__back-icon,
    .vehicle-news-page__offer,
    .vehicle-news-page__offer-image img,
    .vehicle-news-page__offer-cta,
    .vehicle-news-page__card,
    .vehicle-news-page__card-image img,
    .vehicle-news-page__card-title,
    .vehicle-news-page__empty-button,
    .vehicle-news-page__pagination-button,
    .vehicle-news-page__pagination-number{
        transition:none;
    }

}


/* ==========================================================
   Remaining Sections
   Commit #34 - #37
========================================================== */



.vehicle-mileage-discovery,

.vehicle-trending-vehicles,

.vehicle-faq{

    width:100%;

    max-width:1280px;

    margin:0 auto 32px;

    background:#ffffff;

    border-radius:16px;

    border:1px dashed #d7dce5;

    min-height:300px;

}

/* ==========================================================
   SECTION 9
   USER REVIEWS PREVIEW
   Premium / Elegant / Responsive
========================================================== */


/* ==========================================================
   Section 9 — Design Tokens
========================================================== */

#vehicle-user-reviews-preview{

    --review-blue:var(--vehicle-primary);
    --review-blue-dark:var(--vehicle-primary-dark);

    --review-gold:#F4B740;

    --review-text:#0F172A;
    --review-text-soft:#475569;
    --review-text-muted:#94A3B8;

    --review-border:#E7EBF1;
    --review-border-soft:#EEF2F6;

    --review-surface:#FFFFFF;
    --review-surface-soft:#F8FAFC;

    --review-shadow:
        0 8px 28px rgba(15,23,42,.055),
        0 2px 6px rgba(15,23,42,.025);

    --review-shadow-hover:
        0 18px 42px rgba(15,23,42,.095),
        0 5px 14px rgba(15,23,42,.045);

    width:calc(100% - 24px);

    max-width:1280px;

    margin:0 auto 64px;

    padding:20px;

    color:var(--review-text);

    font-family:"Inter",sans-serif;

    background:#FFFFFF;

    border:1px solid var(--review-border);

    border-radius:22px;

    box-shadow:
        0 12px 32px rgba(15,23,42,.07);

    overflow:hidden;

    box-sizing:border-box;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


/* ==========================================================
   Section 9 — Universal Box Sizing
========================================================== */

#vehicle-user-reviews-preview *,
#vehicle-user-reviews-preview *::before,
#vehicle-user-reviews-preview *::after{

    box-sizing:border-box;

}


/* ==========================================================
   Section Header
========================================================== */

.vehicle-user-reviews-preview__header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    width:100%;

    margin:0 0 16px;

}


.vehicle-user-reviews-preview__eyebrow{

    margin-bottom:5px;

    color:var(--review-blue);

    font-size:10px;

    font-weight:750;

    line-height:1.2;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.vehicle-user-reviews-preview__title{

    margin:0;

    color:var(--review-text);

    font-size:24px;

    font-weight:750;

    line-height:1.2;

    letter-spacing:-.025em;

}


/* ==========================================================
   Rating Summary
========================================================== */

.vehicle-user-reviews-preview__summary{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    min-height:92px;

    padding:18px 20px;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #F8FBFF 100%
        );

    border:1px solid var(--review-border);

    border-radius:16px;

    box-shadow:var(--review-shadow);

}


.vehicle-user-reviews-preview__summary::after{

    content:"";

    position:absolute;

    right:-80px;

    top:-100px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.075) 0%,
            rgba(37,99,235,0) 70%
        );

    pointer-events:none;

}


/* ==========================================================
   Rating Score
========================================================== */

.vehicle-user-reviews-preview__rating{

    position:relative;

    z-index:1;

    display:flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

}


.vehicle-user-reviews-preview__rating-value{

    color:var(--review-gold) !important;

    font-size:40px;

    font-weight:780;

    line-height:1;

    letter-spacing:-.045em;

}


.vehicle-user-reviews-preview__rating-star{

    color:var(--review-gold) !important;

    font-size:31px;

    line-height:1;

    transform:translateY(-1px);

}


/* ==========================================================
   Rating Meta
========================================================== */

.vehicle-user-reviews-preview__rating-meta{

    position:relative;

    z-index:1;

    min-width:160px;

}


.vehicle-user-reviews-preview__stars{

    display:flex;

    align-items:center;

    gap:2px;

    color:#D7DEE8;

    font-size:14px;

    line-height:1;

}


.vehicle-user-reviews-preview__stars .is-active{

    color:var(--review-gold) !important;

}


.vehicle-user-reviews-preview__count{

    margin-top:6px;

    color:var(--review-text-muted);

    font-size:12px;

    font-weight:500;

    line-height:1.3;

}


/* ==========================================================
   Write Review Button
========================================================== */

.vehicle-user-reviews-preview__write-button{

    position:relative;

    z-index:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:156px;

    min-height:48px;

    margin-left:auto;

    padding:0 18px;

    border:1px solid #C9D9F5 !important;

    border-radius:10px;

    background:#FFFFFF !important;

    color:var(--review-blue) !important;

    font-family:"Inter",sans-serif;

    font-size:13px;

    font-weight:750;

    line-height:1;

    letter-spacing:.005em;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035);

    appearance:none;

    -webkit-appearance:none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.vehicle-user-reviews-preview__write-button:hover{

    border-color:var(--review-blue) !important;

    background:var(--review-blue) !important;

    color:#FFFFFF !important;

    box-shadow:
        0 9px 20px rgba(37,99,235,.18);

    transform:translateY(-1px);

}


.vehicle-user-reviews-preview__write-button:active{

    transform:translateY(0);

    box-shadow:
        0 3px 10px rgba(15,23,42,.08);

}


.vehicle-user-reviews-preview__write-button:focus-visible{

    outline:3px solid rgba(37,99,235,.16);

    outline-offset:3px;

}


/* ==========================================================
   Popular Mentions
========================================================== */

.vehicle-user-reviews-preview__mentions{

    margin-top:23px;

}


.vehicle-user-reviews-preview__subheading{

    margin:0 0 12px;

    color:var(--review-text);

    font-size:16px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:-.01em;

}


.vehicle-user-reviews-preview__mention-list{

    display:flex;

    align-items:center;

    gap:9px;

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    padding:2px 2px 8px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}


.vehicle-user-reviews-preview__mention-list::-webkit-scrollbar{

    display:none;

}


.vehicle-user-reviews-preview__mention{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    min-height:36px;

    padding:0 13px;

    border:1px solid var(--review-border);

    border-radius:9px;

    background:#FFFFFF;

    color:#475569;

    font-size:12px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    box-shadow:
        0 2px 7px rgba(15,23,42,.035);

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.vehicle-user-reviews-preview__mention:hover{

    border-color:#C9D9F5;

    background:#F8FBFF;

    color:var(--review-blue);

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(37,99,235,.075);

}


/* ==========================================================
   Reviews With Images
========================================================== */

.vehicle-user-reviews-preview__image-section{

    margin-top:22px;

    padding-top:20px;

    border-top:1px solid var(--review-border);

}


.vehicle-user-reviews-preview__image-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.vehicle-user-reviews-preview__image-scroll{

    display:flex;

    gap:10px;

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    padding:1px 2px 9px;

    scrollbar-width:none;

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;

}


.vehicle-user-reviews-preview__image-scroll::-webkit-scrollbar{

    display:none;

}


.vehicle-user-reviews-preview__image-item{

    position:relative;

    flex:0 0 116px;

    width:116px;

    height:84px;

    overflow:hidden;

    border-radius:10px;

    background:#F1F5F9;

    scroll-snap-align:start;

    box-shadow:
        0 3px 10px rgba(15,23,42,.07);

}


.vehicle-user-reviews-preview__image-item::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.18);

    border-radius:inherit;

    pointer-events:none;

}


.vehicle-user-reviews-preview__image-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1);

}


.vehicle-user-reviews-preview__image-item:hover img{

    transform:scale(1.045);

}


/* ==========================================================
   Review Cards
========================================================== */

.vehicle-user-reviews-preview__reviews{

    width:100%;

    margin-top:22px;

}


.vehicle-user-reviews-preview__review-scroll{

    display:flex;

    gap:14px;

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    padding:2px 2px 12px;

    scroll-snap-type:x mandatory;

    scrollbar-width:thin;

    -webkit-overflow-scrolling:touch;

}


.vehicle-user-reviews-preview__review-scroll::-webkit-scrollbar{

    height:4px;

}


.vehicle-user-reviews-preview__review-scroll::-webkit-scrollbar-track{

    background:transparent;

}


.vehicle-user-reviews-preview__review-scroll::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:999px;

}


/* ==========================================================
   Individual Review Card
========================================================== */

.vehicle-user-review-card{

    position:relative;

    display:flex;

    flex-direction:column;

    flex:0 0 306px;

    width:306px;

    min-height:270px;

    padding:18px;

    overflow:hidden;

    border:1px solid var(--review-border);

    border-radius:15px;

    background:#FFFFFF;

    color:inherit;

    text-decoration:none;

    box-shadow:
        0 5px 18px rgba(15,23,42,.045);

    scroll-snap-align:start;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.vehicle-user-review-card:hover{

    transform:translateY(-3px);

    border-color:#D8E3F5;

    box-shadow:var(--review-shadow-hover);

}


/* ==========================================================
   Review Card — Top
========================================================== */

.vehicle-user-review-card__top{

    display:flex;

    align-items:center;

    gap:10px;

}


.vehicle-user-review-card__avatar{

    display:grid;

    place-items:center;

    width:38px;

    height:38px;

    flex:0 0 38px;

    border:1px solid #D8E6FF;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #F3F7FF,
            #EAF2FF
        );

    color:var(--review-blue);

    font-size:14px;

    font-weight:800;

}


.vehicle-user-review-card__identity{

    min-width:0;

}


.vehicle-user-review-card__name{

    overflow:hidden;

    color:var(--review-text);

    font-size:12px;

    font-weight:700;

    line-height:1.35;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.vehicle-user-review-card__date{

    margin-top:3px;

    color:var(--review-text-muted);

    font-size:10px;

    font-weight:500;

    line-height:1.2;

}


/* ==========================================================
   Review Card — Rating
========================================================== */

.vehicle-user-review-card__rating{

    display:flex;

    align-items:center;

    gap:3px;

    margin-top:13px;

}


.vehicle-user-review-card__rating-value{

    color:var(--review-gold);

    font-size:13px;

    font-weight:750;

    line-height:1;

}


.vehicle-user-review-card__rating-star{

    color:var(--review-gold);

    font-size:13px;

    line-height:1;

}


/* ==========================================================
   Review Card — Title
========================================================== */

.vehicle-user-review-card__title{

    display:-webkit-box;

    margin:9px 0 7px;

    overflow:hidden;

    color:var(--review-text);

    font-size:16px;

    font-weight:720;

    line-height:1.38;

    letter-spacing:-.012em;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}


/* ==========================================================
   Review Card — Body
========================================================== */

.vehicle-user-review-card__body{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

    color:var(--review-text-soft);

    font-size:13px;

    font-weight:450;

    line-height:1.58;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:4;

}


/* ==========================================================
   Review Card — Images
========================================================== */

.vehicle-user-review-card__images{

    display:flex;

    gap:7px;

    margin-top:auto;

    padding-top:13px;

    overflow:hidden;

}


.vehicle-user-review-card__images img{

    display:block;

    width:60px;

    height:48px;

    flex:0 0 60px;

    object-fit:cover;

    border:1px solid rgba(15,23,42,.06);

    border-radius:7px;

}


/* ==========================================================
   View All Card
========================================================== */

.vehicle-user-review-card--cta{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-color:#CFE0FF;

    background:

        linear-gradient(
            145deg,
            #F8FBFF 0%,
            #EEF5FF 100%
        );

    color:var(--review-blue);

    box-shadow:
        0 7px 20px rgba(37,99,235,.065);

}


.vehicle-user-review-card--cta:hover{

    border-color:#B7D0FF;

    background:
        linear-gradient(
            145deg,
            #F5F9FF 0%,
            #E9F2FF 100%
        );

}


.vehicle-user-review-card__cta-label{

    color:#64748B;

    font-size:11px;

    font-weight:600;

    line-height:1.2;

}


.vehicle-user-review-card__cta-title{

    display:block;

    max-width:225px;

    margin-top:6px;

    color:var(--review-text);

    font-size:19px;

    font-weight:750;

    line-height:1.3;

    letter-spacing:-.02em;

}


.vehicle-user-review-card__cta-arrow{

    display:grid;

    place-items:center;

    width:40px;

    height:40px;

    margin-top:17px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #3B82F6,
            var(--review-blue-dark)
        );

    color:#FFFFFF;

    font-size:20px;

    box-shadow:
        0 8px 18px rgba(37,99,235,.22);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}


.vehicle-user-review-card--cta:hover
.vehicle-user-review-card__cta-arrow{

    transform:translateX(3px);

    box-shadow:
        0 11px 24px rgba(37,99,235,.30);

}


/* ==========================================================
   Footer CTA
========================================================== */

.vehicle-user-reviews-preview__footer{

    margin-top:17px;

}


.vehicle-user-reviews-preview__all-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:48px;

    padding:0 18px;

    border:1px solid #C9D9F5;

    border-radius:10px;

    background:#FFFFFF;

    color:var(--review-blue);

    font-family:"Inter",sans-serif;

    font-size:13px;

    font-weight:750;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.vehicle-user-reviews-preview__all-button span{

    font-size:19px;

    line-height:1;

    transition:
        transform .2s ease;

}


.vehicle-user-reviews-preview__all-button:hover{

    border-color:var(--review-blue);

    background:var(--review-blue);

    color:#FFFFFF;

    box-shadow:
        0 9px 20px rgba(37,99,235,.18);

    transform:translateY(-1px);

}


.vehicle-user-reviews-preview__all-button:hover span{

    transform:translateX(3px);

}

/* ==========================================================
   SECTION 9 — MILEAGE, COLOURS & PRICE IN BANGLADESH
========================================================== */


/* ==========================================================
   Shared Data Card
========================================================== */

.vehicle-section9-data-card{

    width:100%;

    margin-top:20px;

    padding:20px;

    border:1px solid var(--vehicle-border);

    border-radius:18px;

    background:#FFFFFF;

    box-shadow:
        0 8px 28px rgba(15,23,42,.055),
        0 2px 6px rgba(15,23,42,.025);

    overflow:hidden;

    box-sizing:border-box;

}


.vehicle-section9-data-card__header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    width:100%;

    margin-bottom:18px;

}


.vehicle-section9-data-card__eyebrow{

    display:block;

    margin-bottom:6px;

    color:var(--vehicle-primary);

    font-size:10px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.vehicle-section9-data-card__title{

    margin:0;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:22px;

    font-weight:750;

    line-height:1.25;

    letter-spacing:-.025em;

}





.vehicle-section9-data-card__empty{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:120px;

    padding:24px;

    border:1px dashed var(--vehicle-border);

    border-radius:12px;

    background:var(--vehicle-background-light);

    color:var(--vehicle-text-light);

    font-size:13px;

    font-weight:500;

    text-align:center;

}


/* ==========================================================
   Mileage Card
========================================================== */

.vehicle-section9-mileage{

    margin-top:20px;

}


.vehicle-section9-mileage__table-wrap{

    width:100%;

    overflow-x:auto;

    border:1px solid var(--vehicle-border);

    border-radius:14px;

    background:#FFFFFF;

    -webkit-overflow-scrolling:touch;

}


.vehicle-section9-mileage__table{
    width:100%;

    min-width:0;

    table-layout:fixed;

    border-collapse:collapse;

    border-spacing:0;

    font-family:"Inter",sans-serif;
}


.vehicle-section9-mileage__table th:nth-child(1),
.vehicle-section9-mileage__table td:nth-child(1){
    width:34%;
}

.vehicle-section9-mileage__table th:nth-child(2),
.vehicle-section9-mileage__table td:nth-child(2){
    width:33%;
}

.vehicle-section9-mileage__table th:nth-child(3),
.vehicle-section9-mileage__table td:nth-child(3){
    width:33%;
}

.vehicle-section9-mileage__table thead{

    background:#F8FAFC;

}


.vehicle-section9-mileage__table th{

    padding:13px 14px;

    border-bottom:1px solid var(--vehicle-border);

    color:#64748B;

    font-size:12px;

    font-weight:650;

    line-height:1.3;

    text-align:left;

    white-space:nowrap;

}


.vehicle-section9-mileage__table td{

    padding:15px 14px;

    border-bottom:1px solid #F1F5F9;

    color:#64748B;

    font-size:13px;

    font-weight:500;

    line-height:1.4;

    vertical-align:middle;

}


.vehicle-section9-mileage__table tbody tr:last-child td{

    border-bottom:none;

}


.vehicle-section9-mileage__table tbody tr{

    transition:
        background .18s ease;

}


.vehicle-section9-mileage__table tbody tr:hover{

    background:#FAFCFF;

}


.vehicle-section9-mileage__table td strong{

    color:var(--vehicle-text);

    font-size:13px;

    font-weight:700;

}


.vehicle-section9-mileage__value{

    color:var(--vehicle-text) !important;

    font-weight:700 !important;

    white-space:nowrap;

}


/* ==========================================================
   Price in Bangladesh Card
========================================================== */

.vehicle-section9-price{

    margin-top:20px;

}


.vehicle-section9-price__table-wrap{

    width:100%;

    overflow:hidden;

    border:1px solid var(--vehicle-border);

    border-radius:14px;

    background:#FFFFFF;

}


.vehicle-section9-price__table{

    width:100%;

    border-collapse:collapse;

    border-spacing:0;

    font-family:"Inter",sans-serif;

}


.vehicle-section9-price__table thead{

    background:#F8FAFC;

}


.vehicle-section9-price__table th{

    padding:13px 14px;

    border-bottom:1px solid var(--vehicle-border);

    color:#64748B;

    font-size:12px;

    font-weight:650;

    line-height:1.3;

    text-align:left;

}


.vehicle-section9-price__table th:last-child{

    text-align:right;

}


.vehicle-section9-price__table td{

    padding:13px 14px;

    border-bottom:1px solid #F1F5F9;

    color:#475569;

    font-size:13px;

    font-weight:500;

    line-height:1.4;

}


.vehicle-section9-price__table tbody tr:last-child td{

    border-bottom:none;

}


.vehicle-section9-price__table tbody tr{

    transition:
        background .18s ease;

}


.vehicle-section9-price__table tbody tr:hover{

    background:#FAFCFF;

}


.vehicle-section9-price__city{

    color:#334155;

    text-decoration:underline;

    text-decoration-color:#CBD5E1;

    text-underline-offset:3px;

    transition:
        color .18s ease,
        text-decoration-color .18s ease;

}


.vehicle-section9-price__city:hover{

    color:var(--vehicle-primary);

    text-decoration-color:var(--vehicle-primary);

}


.vehicle-section9-price__amount{

    display:block;

    color:var(--vehicle-text);

    font-size:13px;

    font-weight:700;

    text-align:right;

    white-space:nowrap;

}


.vehicle-section9-price__note{

    margin:12px 2px 0;

    color:#94A3B8;

    font-size:11px;

    font-weight:500;

    line-height:1.55;

}


/* ==========================================================
   Section 9 Data Cards — Mobile
========================================================== */

@media (max-width:768px){

    .vehicle-section9-data-card{

        margin-top:18px;

        padding:16px;

        border-radius:16px;

    }


    .vehicle-section9-data-card__header{

        margin-bottom:15px;

    }


    .vehicle-section9-data-card__title{

        font-size:19px;

        line-height:1.3;

    }


    .vehicle-section9-mileage__table{
    width:100%;
    min-width:0;
    table-layout:fixed;
}

.vehicle-section9-mileage__table th,
.vehicle-section9-mileage__table td{
    padding:12px 9px;
}

.vehicle-section9-mileage__table th{
    font-size:11px;
}

.vehicle-section9-mileage__table td{
    font-size:12px;
}


    .vehicle-section9-price__table th,
    .vehicle-section9-price__table td{

        padding:12px;

    }


    .vehicle-section9-price__table th{

        font-size:11px;

    }


    .vehicle-section9-price__table td{

        font-size:12px;

    }


    .vehicle-section9-price__amount{

        font-size:12px;

    }


    .vehicle-section9-price__note{

        font-size:10px;

    }

}


@media (max-width:480px){

    .vehicle-section9-data-card{

        padding:14px;

        border-radius:15px;

    }


    .vehicle-section9-data-card__title{

        font-size:18px;

    }


    .vehicle-section9-data-card__eyebrow{

        font-size:9px;

    }


    .vehicle-section9-mileage__table{
    width:100%;
    min-width:0;
    table-layout:fixed;
}

.vehicle-section9-mileage__table th,
.vehicle-section9-mileage__table td{
    padding:11px 8px;
}


    .vehicle-section9-price__table th,
    .vehicle-section9-price__table td{

        padding:11px 10px;

    }

}

/* ==========================================================
   REVIEW SUBMISSION MODAL
========================================================== */

.vehicle-user-review-modal{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.vehicle-user-review-modal[hidden]{

    display:none;

}


.vehicle-user-review-modal__overlay{

    position:absolute;

    inset:0;

    background:
        rgba(15,23,42,.58);

    backdrop-filter:blur(7px);

    -webkit-backdrop-filter:blur(7px);

    animation:
        reviewModalOverlayIn .22s ease both;

}


@keyframes reviewModalOverlayIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ==========================================================
   User Review AJAX Message
========================================================== */

.vehicle-user-review-modal__message{
    margin:12px 22px 0;
    padding:10px 12px;
    border:1px solid #C9D9F5;
    border-radius:10px;
    background:#FFFFFF;
    color:#2563EB;
    font-family:"Inter",sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.45;
}

.vehicle-user-review-modal__message.is-loading{
    color:#2563EB;
    background:#F8FBFF;
    border-color:#C9D9F5;
}

.vehicle-user-review-modal__message.is-success{
    color:#15803D;
    background:#F0FDF4;
    border-color:#BBF7D0;
}

.vehicle-user-review-modal__message.is-error{
    color:#B91C1C;
    background:#FEF2F2;
    border-color:#FECACA;
}


/* ==========================================================
   Modal Dialog
========================================================== */

.vehicle-user-review-modal__dialog{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    width:min(520px,100%);

    max-height:min(760px,92vh);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.72);

    border-radius:22px;

    background:#FFFFFF;

    box-shadow:
        0 30px 80px rgba(15,23,42,.25),
        0 8px 30px rgba(15,23,42,.10);

    animation:
        reviewModalDialogIn .34s cubic-bezier(.22,1,.36,1) both;

}


@keyframes reviewModalDialogIn{

    from{
        opacity:0;
        transform:translateY(18px) scale(.975);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}


/* ==========================================================
   Modal Header
========================================================== */

.vehicle-user-review-modal__header{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    gap:11px;

    min-height:70px;

    padding:12px 15px;

    border-bottom:1px solid var(--review-border);

    background:
        rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}


.vehicle-user-review-modal__back,
.vehicle-user-review-modal__close{

    display:grid;

    place-items:center;

    width:36px;

    height:36px;

    flex:0 0 36px;

    padding:0;

    border:1px solid transparent;

    border-radius:9px;

    background:transparent;

    color:#64748B;

    font-family:"Inter",sans-serif;

    font-size:20px;

    line-height:1;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.vehicle-user-review-modal__back:hover,
.vehicle-user-review-modal__close:hover{

    border-color:var(--review-border);

    background:#F8FAFC;

    color:var(--review-text);

}


.vehicle-user-review-modal__back:active{

    transform:translateX(-2px);

}


.vehicle-user-review-modal__close{

    margin-left:auto;

    font-size:24px;

}


.vehicle-user-review-modal__eyebrow{

    color:var(--review-text-muted);

    font-size:10px;

    font-weight:650;

    line-height:1.2;

    letter-spacing:.05em;

    text-transform:uppercase;

}


.vehicle-user-review-modal__title{

    margin:3px 0 0;

    overflow:hidden;

    color:var(--review-text);

    font-size:15px;

    font-weight:700;

    line-height:1.25;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* ==========================================================
   Modal Step
========================================================== */

.vehicle-user-review-modal__step{

    display:none;

    overflow-y:auto;

    padding:25px 24px 22px;

}


.vehicle-user-review-modal__step.is-active{

    display:block;

    animation:
        reviewStepIn .25s ease both;

}


@keyframes reviewStepIn{

    from{
        opacity:0;
        transform:translateX(6px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


.vehicle-user-review-modal__intro h3{

    margin:0;

    color:var(--review-text);

    font-size:21px;

    font-weight:750;

    line-height:1.3;

    letter-spacing:-.02em;

}


.vehicle-user-review-modal__intro p{

    margin:7px 0 22px;

    color:var(--review-text-soft);

    font-size:12px;

    font-weight:450;

    line-height:1.55;

}


/* ==========================================================
   Rating Rows
========================================================== */

.vehicle-review-rating-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}


.vehicle-review-rating-row{

    text-align:center;

}


.vehicle-review-rating-row__label{

    margin-bottom:8px;

    color:#334155;

    font-size:12px;

    font-weight:650;

    line-height:1.3;

}


.vehicle-review-rating-row__options{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

}


.vehicle-review-rating-option{

    position:relative;

    display:grid;

    place-items:center;

    width:43px;

    height:43px;

    padding:0;

    border:1px solid #DDE3EB;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #FAFBFC,
            #F3F5F8
        );

    font-size:21px;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 2px 7px rgba(15,23,42,.035);

    transition:
        transform .2s cubic-bezier(.22,1,.36,1),
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.vehicle-review-rating-option:hover{

    border-color:#BDD3F8;

    background:#F4F8FF;

    transform:translateY(-2px);

    box-shadow:
        0 6px 14px rgba(37,99,235,.10);

}


.vehicle-review-rating-option.is-selected{

    border-color:#AFCBFF;

    background:
        linear-gradient(
            145deg,
            #F4F8FF,
            #EAF2FF
        );

    box-shadow:
        0 0 0 3px rgba(37,99,235,.09),
        0 8px 18px rgba(37,99,235,.12);

    transform:scale(1.08);

}


/* ==========================================================
   Overall Rating
========================================================== */

.vehicle-review-overall{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:74px;

    margin-bottom:17px;

    border:1px solid var(--review-border-soft);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #FBFCFE,
            #F6F9FD
        );

}


.vehicle-review-overall > span:first-child{

    color:var(--review-text-soft);

    font-size:12px;

    font-weight:550;

}


.vehicle-review-overall strong{

    color:#F4B740 !important;

    font-size:28px;

    font-weight:800;

    line-height:1;

    letter-spacing:-.03em;
}


.vehicle-review-overall__star{

    color:#F4B740 !important;

    font-size:23px;

    line-height:1;

}


/* ==========================================================
   Review Fields
========================================================== */

.vehicle-review-field{

    margin-top:14px;

}


.vehicle-review-field label{

    display:block;

    margin-bottom:6px;

    color:#334155;

    font-size:11px;

    font-weight:650;

    line-height:1.3;

}


.vehicle-review-field__input,
.vehicle-review-field__textarea{

    display:block;

    width:100%;

    box-sizing:border-box;

    border:1px solid #D9E0E9;

    border-radius:10px;

    background:#FFFFFF;

    color:var(--review-text);

    font-family:"Inter",sans-serif;

    font-size:13px;

    line-height:1.5;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.vehicle-review-field__input{

    min-height:46px;

    padding:0 13px;

}


.vehicle-review-field__textarea{

    min-height:128px;

    padding:12px 13px;

    resize:vertical;

}


.vehicle-review-field__input::placeholder,
.vehicle-review-field__textarea::placeholder{

    color:#A0AAB8;

}


.vehicle-review-field__input:focus,
.vehicle-review-field__textarea:focus{

    border-color:#8DB2F4;

    background:#FFFFFF;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.09);

}


.vehicle-review-field__counter{

    margin-top:5px;

    color:var(--review-text-muted);

    font-size:9px;

    font-weight:500;

    line-height:1.2;

    text-align:right;

}


/* ==========================================================
   Image Upload
========================================================== */

.vehicle-review-upload{

    margin-top:17px;

    padding:13px;

    border:1px dashed #C9D4E2;

    border-radius:11px;

    background:#F8FAFC;

    transition:
        border-color .2s ease,
        background .2s ease;

}


.vehicle-review-upload:hover{

    border-color:#AFC7EC;

    background:#F7FAFF;

}


.vehicle-review-upload__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}


.vehicle-review-upload__header strong,
.vehicle-review-upload__header span{

    display:block;

}


.vehicle-review-upload__header strong{

    color:var(--review-text);

    font-size:12px;

    font-weight:700;

    line-height:1.3;

}


.vehicle-review-upload__header span{

    margin-top:3px;

    color:var(--review-text-muted);

    font-size:10px;

    line-height:1.35;

}


.vehicle-review-upload__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:34px;

    padding:0 11px;

    border:1px solid #C9D9F5 !important;

    border-radius:8px;

    background:#FFFFFF !important;

    color:var(--review-blue) !important;

    -webkit-text-fill-color:var(--review-blue) !important;

    font-family:"Inter",sans-serif;

    font-size:10px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:
        0 2px 6px rgba(15,23,42,.035);

    appearance:none;

    -webkit-appearance:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.vehicle-review-upload__button:hover{

    border-color:var(--review-blue) !important;

    background:var(--review-blue) !important;

    color:#FFFFFF !important;

    box-shadow:
        0 7px 16px rgba(37,99,235,.14);

    transform:translateY(-1px);

}

.vehicle-review-upload__button:disabled{

    opacity:1 !important;

    background:#FFFFFF !important;

    border-color:#C9D9F5 !important;

    color:var(--review-blue) !important;

    -webkit-text-fill-color:var(--review-blue) !important;

    cursor:not-allowed;

    box-shadow:
        0 2px 6px rgba(15,23,42,.035);

}

.vehicle-review-upload__input{

    display:none;

}


.vehicle-review-upload__preview{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:10px;

}


.vehicle-review-upload__preview img{

    display:block;

    width:67px;

    height:57px;

    object-fit:cover;

    border:1px solid rgba(15,23,42,.07);

    border-radius:7px;

    box-shadow:
        0 2px 7px rgba(15,23,42,.06);

}


/* ==========================================================
   Modal Primary Button
========================================================== */

.vehicle-user-review-modal__primary-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:48px;

    margin-top:19px;

    padding:0 18px;

    border:1px solid #C9D9F5 !important;

    border-radius:10px;

    background:#FFFFFF !important;

    color:var(--review-blue) !important;

    -webkit-text-fill-color:var(--review-blue) !important;

    font-family:"Inter",sans-serif;

    font-size:13px;

    font-weight:750;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035);

    appearance:none;

    -webkit-appearance:none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.vehicle-user-review-modal__primary-button:hover{

    border-color:var(--review-blue) !important;

    background:var(--review-blue) !important;

    color:#FFFFFF !important;

    box-shadow:
        0 9px 20px rgba(37,99,235,.18);

    transform:translateY(-1px);

}


.vehicle-user-review-modal__primary-button:active{

    transform:translateY(0);

    box-shadow:
        0 3px 10px rgba(15,23,42,.08);

}


.vehicle-user-review-modal__primary-button:disabled{

    opacity:1;

    cursor:not-allowed;

    transform:none;

    background:#FFFFFF !important;

    border-color:#C9D9F5 !important;

    color:var(--review-blue) !important;

    -webkit-text-fill-color:var(--review-blue) !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035);

}


/* ==========================================================
   Modal Progress
========================================================== */

.vehicle-user-review-modal__progress{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-top:19px;

}


.vehicle-user-review-modal__progress span{

    width:6px;

    height:6px;

    border-radius:999px;

    background:#D6DDE7;

    transition:
        width .2s ease,
        background .2s ease;

}


.vehicle-user-review-modal__progress span.is-active{

    width:18px;

    background:var(--review-blue);

}


/* ==========================================================
   OTP
========================================================== */

.vehicle-review-otp{

    margin-top:13px;

}


.vehicle-review-otp[hidden]{

    display:none;

}


/* ==========================================================
   Success State
========================================================== */

.vehicle-user-review-success{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:26px 10px 30px;

    text-align:center;

}


.vehicle-user-review-success__icon{

    display:grid;

    place-items:center;

    width:64px;

    height:64px;

    margin-bottom:17px;

    border:1px solid #CFE0FF;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #F2F7FF,
            #E8F1FF
        );

    color:var(--review-blue);

    font-size:28px;

    font-weight:800;

    box-shadow:
        0 8px 22px rgba(37,99,235,.10);

}


.vehicle-user-review-success h3{

    margin:0;

    color:var(--review-text);

    font-size:21px;

    font-weight:750;

    line-height:1.3;

}


.vehicle-user-review-success p{

    max-width:330px;

    margin:8px auto 20px;

    color:var(--review-text-soft);

    font-size:12px;

    line-height:1.6;

}


.vehicle-user-review-success__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:92px;

    min-height:43px;

    padding:0 18px;

    border:1px solid var(--review-blue);

    border-radius:9px;

    background:var(--review-blue);

    color:#FFFFFF;

    font-family:"Inter",sans-serif;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 7px 16px rgba(37,99,235,.17);

}


/* ==========================================================
   Responsive — Tablet
========================================================== */

@media (max-width:900px){

    .vehicle-user-reviews-preview__summary{

        gap:14px;

    }


    .vehicle-user-reviews-preview__rating-value{

        font-size:36px;

    }


    .vehicle-user-review-card{

        flex-basis:290px;

        width:290px;

    }

}


/* ==========================================================
   Responsive — Mobile
========================================================== */

@media (max-width:768px){

        #vehicle-user-reviews-preview{
        width:100vw;
        max-width:100vw;

        margin-top:27px;
        margin-right:0;
        margin-bottom:30px;
        margin-left:calc(50% - 50vw);

        padding:14px;

        border-radius:18px;
    }


    .vehicle-user-reviews-preview__title{

        font-size:21px;

    }


    .vehicle-user-reviews-preview__summary{

        display:grid;

        grid-template-columns:auto 1fr;

        gap:10px 14px;

        min-height:0;

        padding:17px;

    }


    .vehicle-user-reviews-preview__rating{

        align-self:center;

    }


    .vehicle-user-reviews-preview__rating-meta{

        align-self:center;

        min-width:0;

    }


    .vehicle-user-reviews-preview__write-button{

        grid-column:1 / -1;

        width:100%;

        margin:2px 0 0;

    }


    .vehicle-user-review-card{

    flex-basis:70vw;

    width:70vw;

    min-width:70vw;

    max-width:70vw;

    min-height:220px;

    height:220px;

}

.vehicle-user-review-card:hover{

    transform:none;

}

.vehicle-user-review-card--cta{

    min-height:220px;

    height:220px;

}


    .vehicle-user-review-modal{

        align-items:flex-end;

        padding:0;

    }


    .vehicle-user-review-modal__dialog{

        width:100%;

        max-height:94vh;

        border-right:0;

        border-bottom:0;

        border-radius:20px 20px 0 0;

    }

}





/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    #vehicle-user-reviews-preview *,
    #vehicle-user-reviews-preview *::before,
    #vehicle-user-reviews-preview *::after,
    .vehicle-user-review-modal *,
    .vehicle-user-review-modal *::before,
    .vehicle-user-review-modal *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   SECTION 9 — FORCE HORIZONTAL REVIEW CARDS
========================================================== */

#vehicle-user-reviews-preview
.vehicle-user-reviews-preview__review-scroll{

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:stretch !important;

    gap:14px !important;

    width:100% !important;

    max-width:100% !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;

    -webkit-overflow-scrolling:touch !important;

}


#vehicle-user-reviews-preview
.vehicle-user-review-card{

    flex:0 0 306px !important;

    width:306px !important;

    max-width:306px !important;

    min-width:306px !important;

    scroll-snap-align:start !important;

}


/* Mobile */

@media (max-width:768px){

    #vehicle-user-reviews-preview
    .vehicle-user-reviews-preview__review-scroll{

        display:flex !important;

        flex-direction:row !important;

        flex-wrap:nowrap !important;

    }

    #vehicle-user-reviews-preview
    .vehicle-user-review-card{

        flex:0 0 65vw !important;

        width:70vw !important;

        min-width:70vw !important;

        max-width:70vw !important;

        min-height:220px !important;

        height:220px !important;

    }

}

/* ==========================================================
   SECTION 9 — HERO REVIEW ANCHOR OFFSET
========================================================== */

#vehicle-user-reviews-preview,
#vehicle-expert-review-preview,
#vehicle-expert-review{

    scroll-margin-top:90px;

}

/* ==========================================================
   SECTION 10 — TRENDING CARS + BODY TYPE + FAQ
========================================================== */

.vehicle-section10{
    width:100%;
    margin:24px 0 0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.vehicle-section10-card{
    width:100%;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px 0 0;
    overflow:hidden;
    box-shadow:
        0 6px 20px rgba(15,23,42,.045);
}

.vehicle-section10-card__header{
    padding:0 18px 15px;
}

.vehicle-section10-card__eyebrow{
    display:block;
    margin-bottom:6px;
    color:#2563eb;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.vehicle-section10-card__title{
    margin:0;
    color:#111827;
    font-size:21px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.02em;
}


/* ----------------------------------------------------------
   Vehicle Carousel
---------------------------------------------------------- */

.vehicle-section10-carousel{
    display:flex;
    gap:12px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 18px 16px;
    box-sizing:border-box;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.vehicle-section10-carousel::-webkit-scrollbar{
    display:none;
}

.vehicle-section10-carousel:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:-2px;
    border-radius:10px;
}


/* ----------------------------------------------------------
   Vehicle Card
---------------------------------------------------------- */

.vehicle-section10-car{
    flex:0 0 220px;
    width:220px;
    display:block;
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    scroll-snap-align:start;
    box-shadow:
        0 3px 12px rgba(15,23,42,.045);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.vehicle-section10-car:hover{
    transform:translateY(-2px);
    box-shadow:
        0 8px 22px rgba(15,23,42,.08);
}

.vehicle-section10-car__image{
    width:100%;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#ffffff;
}

.vehicle-section10-car__image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    background:#ffffff;
}

.vehicle-section10-car__image-placeholder{
    color:#9ca3af;
    font-size:12px;
    font-weight:600;
}

.vehicle-section10-car__content{
    padding:12px 13px 14px;
}

.vehicle-section10-car__content h3{
    margin:0 0 7px;
    color:#111827;
    font-size:15px;
    line-height:1.3;
    font-weight:700;
}

.vehicle-section10-car__price{
    display:block;
    color:#111827;
    font-size:14px;
    line-height:1.3;
    font-weight:700;
}


/* ----------------------------------------------------------
   Section 10 — Centered Outline CTA
---------------------------------------------------------- */

.vehicle-section10-card__button{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(100% - 24px);
    box-sizing:border-box;
    margin:0 12px 12px;
    padding:0 16px;
    border:1px solid #2563eb;
    border-radius:8px;
    background:#ffffff;
    color:#2563eb;
    text-decoration:none;
    font-size:15px;
    line-height:1;
    font-weight:700;
    text-align:center;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.vehicle-section10-card__button:hover{
    background:#2563eb;
    border-color:#2563eb;
    color:#ffffff;
}

.vehicle-section10-card__button:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:2px;
}


/* ----------------------------------------------------------
   FAQ
---------------------------------------------------------- */

.vehicle-section10-faq__list{
    width:100%;
}

.vehicle-section10-faq__item{
    border-top:1px solid #edf0f4;
}

.vehicle-section10-faq__question{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    border:0;
    background:#ffffff;
    color:#111827;
    cursor:pointer;
    font-family:inherit;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
    text-align:left;
}

.vehicle-section10-faq__question:hover{
    background:#fafcff;
}

.vehicle-section10-faq__question:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:-2px;
}

.vehicle-section10-faq__icon{
    flex:0 0 24px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#374151;
    font-size:20px;
    line-height:1;
    font-weight:500;
}

.vehicle-section10-faq__item.is-open
.vehicle-section10-faq__icon{
    transform:rotate(45deg);
}

.vehicle-section10-faq__answer{
    padding:0 18px 18px;
    color:#4b5563;
    font-size:14px;
    line-height:1.65;
}

.vehicle-section10-faq__answer p{
    margin:0 0 10px;
}

.vehicle-section10-faq__answer p:last-child{
    margin-bottom:0;
}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width:768px){

    .vehicle-section10{
        margin-top:20px;
        gap:15px;
    }

    .vehicle-section10-card{
        border-radius:16px;
    }

    .vehicle-section10-card__header{
        padding:0 16px 13px;
    }

    .vehicle-section10-card__title{
        font-size:19px;
    }

    .vehicle-section10-carousel{
        gap:10px;
        padding:0 16px 15px;
    }

    .vehicle-section10-car{
        flex-basis:74vw;
        width:74vw;
        max-width:240px;
    }

    .vehicle-section10-car__image{
    height:145px;
}

    .vehicle-section10-card__button{
    min-height:46px;
    width:calc(100% - 24px);
    margin:0 12px 12px;
    font-size:15px;
}

    .vehicle-section10-faq__question{
        min-height:56px;
        padding:13px 16px;
        font-size:14px;
    }

    .vehicle-section10-faq__answer{
        padding:
            0 16px 16px;
        font-size:13px;
    }

}

/* ==========================================================
   GLOBAL COMPONENTS
========================================================== */


/* ==========================================================
   Dealer Request Modal
========================================================== */


/* ==========================================================
   Dealer Modal Wrapper
========================================================== */

.vehicle-dealer-modal{

    position:fixed;

    inset:0;

    z-index:2000;

    display:none;

    align-items:center;

    justify-content:center;

}


/* ==========================================================
    Dealer Modal Overlay
========================================================== */

.vehicle-dealer-modal__overlay{

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(6px);

}


/* ==========================================================
    Dealer Modal Content
========================================================== */

.vehicle-dealer-modal__content{

    position:relative;

    width:100%;

    max-width:440px;

    margin:20px;

    padding:24px;

    background:#ffffff;

    border-radius:24px;

    box-shadow:
        0 24px 60px rgba(15,23,42,.22);

    animation:vehicleDealerModalIn .25s ease;

}


/* ==========================================================
    Dealer Modal Animation
========================================================== */

@keyframes vehicleDealerModalIn{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/* ==========================================================
    Dealer Modal Header
========================================================== */

.vehicle-dealer-modal__header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}


.vehicle-dealer-modal__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:#EFF6FF;

    font-size:22px;

}


.vehicle-dealer-modal__header h3{

    flex:1;

    margin:0;

    color:var(--vehicle-text);

    font-size:20px;

    font-weight:700;

    line-height:1.3;

}


/* ==========================================================
    Dealer Modal Close Button
========================================================== */

.vehicle-dealer-modal__close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#F8FAFC;

    color:#64748B;

    font-size:22px;

    cursor:pointer;

}


/* ==========================================================
   Dealer Modal Description
========================================================== */

.vehicle-dealer-modal__description{

    margin:0 0 22px;

    color:#475569;

    font-size:14px;

    line-height:1.6;

}


.vehicle-dealer-modal__description strong{

    color:var(--vehicle-text);

}


/* ==========================================================
   Dealer Modal Form
========================================================== */

.vehicle-dealer-modal__form{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* ==========================================================
   Dealer Modal Fields
========================================================== */

.vehicle-dealer-modal__field{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.vehicle-dealer-modal__field label{

    color:var(--vehicle-text);

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   Dealer Modal Input Field
========================================================== */

.vehicle-dealer-modal__field input{

    width:100%;

    height:46px;

    padding:0 14px;

    border:1px solid var(--vehicle-border);

    border-radius:14px;

    background:#ffffff;

    color:var(--vehicle-text);

    font-size:14px;

    outline:none;

    transition:.25s ease;

}


.vehicle-dealer-modal__field input:focus{

    border-color:var(--vehicle-primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}


/* ==========================================================
   Dealer Modal Premium City Dropdown
========================================================== */

.vehicle-city-dropdown{

    position:relative;

    width:100%;

}


/* ==========================================================
   Dealer Modal Trigger
========================================================== */

.vehicle-city-dropdown__trigger{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    height:46px;

    padding:0 16px;

    border:1px solid var(--vehicle-border);

    border-radius:14px;

    background:#ffffff;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:.25s ease;

}


.vehicle-city-dropdown__trigger:hover{

    border-color:#CBD5E1;

}


.vehicle-city-dropdown.is-open 
.vehicle-city-dropdown__trigger{

    border-color:var(--vehicle-primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}


/* ==========================================================
   Dealer Modal Arrow
========================================================== */

.vehicle-city-dropdown__arrow{

    font-size:13px;

    color:#64748B;

    transition:.25s ease;

}


.vehicle-city-dropdown.is-open 
.vehicle-city-dropdown__arrow{

    transform:rotate(180deg);

}


/* ==========================================================
   Dealer Modal Dropdown Menu
========================================================== */

.vehicle-city-dropdown__menu{

    position:absolute;

    left:0;

    right:0;

    top:calc(100% + 8px);

    z-index:50;

    display:none;

    max-height:260px;

    overflow-y:auto;

    padding:8px;

    background:#ffffff;

    border:1px solid var(--vehicle-border);

    border-radius:16px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.16);

}


.vehicle-city-dropdown.is-open 
.vehicle-city-dropdown__menu{

    display:block;

}


/* ==========================================================
   Dealer Modal City Options
========================================================== */

.vehicle-city-dropdown__option{

    display:flex;

    align-items:center;

    width:100%;

    height:42px;

    padding:0 14px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--vehicle-text);

    font-family:"Inter",sans-serif;

    font-size:14px;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:.2s ease;

}


.vehicle-city-dropdown__option:hover{

    background:#EFF6FF;

    color:var(--vehicle-primary);

}


/* ==========================================================
   Dealer Modal Submit Button
========================================================== */

.vehicle-dealer-modal__submit{

    width:100%;

    height:48px;

    margin-top:8px;

    border:none;

    border-radius:14px;

    background:var(--vehicle-primary);

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

}


.vehicle-dealer-modal__submit:hover{

    background:var(--vehicle-primary-dark);

}


/* ==========================================================
  Dealer Modal Open State
   (Activated later by JS)
========================================================== */

.vehicle-dealer-modal.is-open{

    display:flex;

}


/* ==========================================================
  Dealer Modal  Mobile Bottom Sheet
========================================================== */

@media(max-width:768px){

    .vehicle-dealer-modal{

        align-items:flex-end;

    }


    .vehicle-dealer-modal__content{

        max-width:none;

        width:100%;

        margin:0;

        padding:24px 20px 28px;

        border-radius:28px 28px 0 0;

        animation:vehicleDealerSheetIn .25s ease;

    }


    @keyframes vehicleDealerSheetIn{

        from{

            opacity:0;

            transform:translateY(100%);

        }

        to{

            opacity:1;

            transform:translateY(0);

        }

    }

}


/* ==========================================================
   EMI Calculator Modal
  
========================================================== */


/* ==========================================================
   EMI Calculator  Modal Wrapper
========================================================== */

.vehicle-emi-modal{

    position:fixed;

    inset:0;

    z-index:2000;

    display:none;

    align-items:center;

    justify-content:center;

}


/* ==========================================================
   EMI Calculator Modal Open State
========================================================== */

.vehicle-emi-modal.is-open{

    display:flex;

}


/* ==========================================================
  EMI Calculator Modal Overlay
========================================================== */

.vehicle-emi-modal__overlay{

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(6px);

}


/* ==========================================================
  EMI Calculator  Modal Content
========================================================== */

.vehicle-emi-modal__content{

    position:relative;

    width:100%;

    max-width:520px;

    margin:20px;

    padding:28px;

    background:#ffffff;

    border-radius:24px;

    box-shadow:
    0 24px 60px rgba(15,23,42,.22);

}


/* ==========================================================
  EMI Calculator Modal Header
========================================================== */

.vehicle-emi-modal__header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    min-height:44px;

}

.vehicle-emi-modal__icon{

    position:absolute;

    left:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:#EFF6FF;

    font-size:22px;

}

.vehicle-emi-modal__header h3{

    margin:0;

    color:var(--vehicle-text);

    font-size:20px;

    font-weight:700;

    line-height:1.3;

    text-align:center;

}

.vehicle-emi-modal__close{

    position:absolute;

    right:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#F8FAFC;

    color:#64748B;

    font-size:22px;

    cursor:pointer;

}


/* ==========================================================
 EMI Calculator Modal Close Button
========================================================== */

.vehicle-emi-modal__close{

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#F8FAFC;

    color:#64748B;

    font-size:22px;

    cursor:pointer;

}


/* ==========================================================
  EMI Calculator Modal Description
========================================================== */

.vehicle-emi-modal__description{

    margin:0 0 24px;

    color:var(--vehicle-text-light);

    font-size:14px;

    line-height:1.6;

}


/* ==========================================================
  EMI Calculator  Modal Grid
========================================================== */

.vehicle-emi-calculator{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* ==========================================================
   EMI Calculator Modal Slider Fields
========================================================== */

.vehicle-emi-field{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ==========================================================
  EMI Calculator Modal  Header
========================================================== */

.vehicle-emi-slider__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

.vehicle-emi-field label{

    margin:0;

    color:var(--vehicle-text);

    font-size:14px;

    font-weight:500;

    line-height:1.2;

}

.vehicle-emi-slider__value{

    color:var(--vehicle-text);

    font-size:14px;

    font-weight:500;

    line-height:1;

    white-space:nowrap;

}

/* ==========================================================
  EMI Calculator Modal Slider
========================================================== */

.vehicle-emi-slider{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.vehicle-emi-slider input[type="range"]{

    width:100%;

    margin:0;

    appearance:none;

    -webkit-appearance:none;

    height:4px;

    border-radius:999px;

    background:#E5E7EB;

    outline:none;

    cursor:pointer;

    transition:.25s ease;

}

/* ==========================================================
  EMI Calculator Modal Track
========================================================== */

.vehicle-emi-slider input[type="range"]::-webkit-slider-runnable-track{

    height:4px;

    border-radius:999px;

    background:transparent;

}

.vehicle-emi-slider input[type="range"]::-moz-range-track{

    height:4px;

    border-radius:999px;

    background:#E5E7EB;

}

/* ==========================================================
  EMI Calculator Modal Thumb
========================================================== */

.vehicle-emi-slider input[type="range"]::-webkit-slider-thumb{

    appearance:none;

    -webkit-appearance:none;

    width:20px;

    height:20px;

    margin-top:-8px;

    border:3px solid var(--vehicle-primary);

    border-radius:50%;

    background:#ffffff;

    box-shadow:0 2px 8px rgba(37,99,235,.18);

    cursor:pointer;

    transition:.2s ease;

}

.vehicle-emi-slider input[type="range"]::-webkit-slider-thumb:hover{

    transform:scale(1.08);

}

.vehicle-emi-slider input[type="range"]::-moz-range-thumb{

    width:20px;

    height:20px;

    border:none;

    border-radius:50%;

    background:var(--vehicle-primary);

    cursor:pointer;

}

/* ==========================================================
  EMI Calculator Modal  Min Max Values
========================================================== */

.vehicle-emi-slider__limits{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#94A3B8;

    font-size:11px;

    font-weight:500;

    line-height:1;

}

/* ==========================================================
  EMI Calculator Modal  Active Track
   (Updated by JavaScript)
========================================================== */

.vehicle-emi-slider input[type="range"]{

    background:
    linear-gradient(
        to right,
        var(--vehicle-primary) 0%,
        var(--vehicle-primary) 40%,
        #E5E7EB 40%,
        #E5E7EB 100%
    );

}

/* ==========================================================
  EMI Calculator Modal Focus
========================================================== */

.vehicle-emi-slider input[type="range"]:focus{

    outline:none;

}

.vehicle-emi-slider input[type="range"]:focus::-webkit-slider-thumb{

    box-shadow:
        0 0 0 6px rgba(37,99,235,.12);

}

/* ==========================================================
   Emi Calculator Modal Mobile
========================================================== */

@media(max-width:768px){

    .vehicle-emi-field{

        gap:12px;

    }

    .vehicle-emi-slider__value{

        font-size:14px;

    }

    .vehicle-emi-slider__limits{

        font-size:10px;

    }

}


/* ==========================================================
  EMI Calculator Modal  Result Card
========================================================== */

.vehicle-emi-result{

    padding:20px;

    text-align:center;

    border-radius:18px;

    background:#EFF6FF;

}


.vehicle-emi-result span{

    display:block;

    color:var(--vehicle-text-light);

    font-size:13px;

}


.vehicle-emi-result strong{

    display:block;

    margin:8px 0;

    color:var(--vehicle-primary);

    font-size:32px;

    font-weight:800;

}


.vehicle-emi-result small{

    color:var(--vehicle-text-light);

}


/* ==========================================================
   EMI Calculator Modal  Summary
========================================================== */

.vehicle-emi-summary{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}


.vehicle-emi-summary div{

    padding:12px;

    border-radius:14px;

    background:#F8FAFC;

    text-align:center;

}


.vehicle-emi-summary span{

    display:block;

    font-size:11px;

    color:var(--vehicle-text-light);

}


.vehicle-emi-summary strong{

    display:block;

    margin-top:5px;

    font-size:13px;

}


/* ==========================================================
  EMI Calculator Modal CTA
========================================================== */

.vehicle-emi-apply-button{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:var(--vehicle-primary);

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

}


.vehicle-emi-apply-button:hover{

    background:var(--vehicle-primary-dark);

}


/* ==========================================================
 EMI Calculator Modal  Mobile EMI Bottom Sheet Final Spacing Adjustment
========================================================== */

@media (max-width:768px){

    /* Bottom sheet instead of centered modal */

    .vehicle-emi-modal{

        align-items:flex-end;

    }

    .vehicle-emi-modal__content{

        width:100%;
        max-width:none;

        margin:0;

        padding:16px 16px 12px;

        border-radius:28px 28px 0 0;

        animation:vehicleEMISheetIn .35s cubic-bezier(.22,1,.36,1);

    }

    /* Keep your existing spacing below */

    .vehicle-emi-calculator{

        gap:14px;

    }

    .vehicle-emi-field{

        gap:11px;

    }

    .vehicle-emi-slider{

        gap:8px;

    }

    .vehicle-emi-result{

        margin-top:14px;

        padding:12px 10px;

        border-radius:16px;

    }

    .vehicle-emi-summary{

        margin-top:8px;

        gap:6px;

    }

    .vehicle-emi-summary div{

        padding:7px 8px;

        border-radius:12px;

    }

    .vehicle-emi-apply-button{

        margin-top:10px;

        height:42px;

    }

}

@keyframes vehicleEMISheetIn{

from{

opacity:0;

transform:translateY(100%);

}

60%{

transform:translateY(-8px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================================
   SECTION 9 — FINAL CONTROL ISOLATION
   User Review controls.
   
   IMPORTANT:
   The review modal may be rendered outside
   #vehicle-single-page, therefore modal controls are
   intentionally NOT scoped only to #vehicle-single-page.
========================================================== */


/* ----------------------------------------------------------
   WRITE A REVIEW BUTTON
---------------------------------------------------------- */

#vehicle-single-page
.vehicle-user-reviews-preview__write-button,
#vehicle-single-page
button.vehicle-user-reviews-preview__write-button,
#vehicle-single-page
a.vehicle-user-reviews-preview__write-button{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    font-family:"Inter",sans-serif !important;

    appearance:none !important;

    -webkit-appearance:none !important;

    box-shadow:none !important;
}


/* ----------------------------------------------------------
   WRITE REVIEW — HOVER / ACTIVE / FOCUS
---------------------------------------------------------- */

#vehicle-single-page
.vehicle-user-reviews-preview__write-button:hover,
#vehicle-single-page
button.vehicle-user-reviews-preview__write-button:hover,
#vehicle-single-page
.vehicle-user-reviews-preview__write-button:active,
#vehicle-single-page
button.vehicle-user-reviews-preview__write-button:active,
#vehicle-single-page
.vehicle-user-reviews-preview__write-button:focus,
#vehicle-single-page
button.vehicle-user-reviews-preview__write-button:focus,
#vehicle-single-page
.vehicle-user-reviews-preview__write-button:focus-visible,
#vehicle-single-page
button.vehicle-user-reviews-preview__write-button:focus-visible{

    border-color:#2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    outline:none !important;
}


/* ----------------------------------------------------------
   ADD PHOTOS
   This element is a <label>.
   
   Not scoped to #vehicle-single-page because the modal
   can be rendered outside the vehicle page container.
---------------------------------------------------------- */

.vehicle-user-review-modal
.vehicle-review-upload__button{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    font-family:"Inter",sans-serif !important;

    appearance:none !important;

    -webkit-appearance:none !important;

    box-shadow:none !important;
}


/* ----------------------------------------------------------
   ADD PHOTOS — ALL INTERACTION STATES
---------------------------------------------------------- */

.vehicle-user-review-modal
.vehicle-review-upload__button:hover,
.vehicle-user-review-modal
.vehicle-review-upload__button:active,
.vehicle-user-review-modal
.vehicle-review-upload__button:focus,
.vehicle-user-review-modal
.vehicle-review-upload__button:focus-visible{

    border-color:#2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    outline:none !important;
}


/* ----------------------------------------------------------
   MODAL PRIMARY BUTTONS
   Continue
   Send OTP
   Verify
   Submit Review
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button{

    width:100% !important;

    min-height:48px !important;

    border:1px solid #2563EB !important;

    border-radius:10px !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    font-family:"Inter",sans-serif !important;

    font-size:13px !important;

    font-weight:750 !important;

    line-height:1 !important;

    opacity:1 !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035) !important;

    appearance:none !important;

    -webkit-appearance:none !important;
}


/* ----------------------------------------------------------
   MODAL PRIMARY BUTTON — DISABLED
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button:disabled{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    opacity:1 !important;

    cursor:not-allowed !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,.035) !important;
}


/* ----------------------------------------------------------
   MODAL PRIMARY BUTTON — HOVER
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button:hover{

    border:1px solid #2563EB !important;

    border-color:#2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    transform:translateY(-1px) !important;

    outline:none !important;
}


/* ----------------------------------------------------------
   MODAL PRIMARY BUTTON — ACTIVE / TOUCH

   Prevent the button from becoming completely white
   or inheriting a theme active state.
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button:active{

    border:1px solid #2563EB !important;

    border-color:#2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    transform:translateY(0) !important;

    outline:none !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,.08) !important;
}


/* ----------------------------------------------------------
   MODAL PRIMARY BUTTON — FOCUS
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button:focus,
.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button:focus-visible{

    border:1px solid #2563EB !important;

    border-color:#2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;

    outline:none !important;

    box-shadow:
        0 0 0 2px rgba(37,99,235,.10) !important;
}


/* ----------------------------------------------------------
   EXTRA PROTECTION AGAINST GLOBAL THEME BUTTON RULES
---------------------------------------------------------- */

.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button[type="button"],
.vehicle-user-review-modal
button.vehicle-user-review-modal__primary-button[type="submit"]{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;
}


/* ----------------------------------------------------------
   EXTRA PROTECTION FOR ADD PHOTOS LABEL
---------------------------------------------------------- */

.vehicle-user-review-modal
label.vehicle-review-upload__button{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;
}


/* ----------------------------------------------------------
   EXTRA PROTECTION FOR WRITE REVIEW
---------------------------------------------------------- */

#vehicle-single-page
a.vehicle-user-reviews-preview__write-button{

    border:1px solid #2563EB !important;

    background:#FFFFFF !important;

    color:#2563EB !important;

    -webkit-text-fill-color:#2563EB !important;
}

/* ==========================================================
   Dynamic Expert Review Highlights — horizontal review cards
   Only the Highlights tab card presentation is overridden here.
========================================================== */

.vehicle-highlight-grid{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:16px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 4px;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.vehicle-highlight-grid::-webkit-scrollbar{
    display:none;
}

.vehicle-highlight-card{
    display:flex;
    flex:0 0 calc(50% - 8px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-width:0;
    padding:0;
    border:1px solid #E8EDF4;
    border-radius:16px;
    background:#FFFFFF;
    overflow:hidden;
    position:relative;
    scroll-snap-align:start;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.vehicle-highlight-card::before{
    display:none !important;
}

.vehicle-highlight-card:hover{
    transform:translateY(-2px);
    border-color:#D6E3FF;
    box-shadow:0 10px 24px rgba(37,99,235,.08);
}

.vehicle-highlight-card__media{
    flex:0 0 auto;
    width:100%;
    height:180px;
    min-height:180px;
    border-radius:0;
    overflow:hidden;
    background:#F1F5F9;
}

.vehicle-highlight-card__media img{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center;
}

.vehicle-highlight-card__content{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    justify-content:flex-start;
    gap:8px;
    padding:16px 16px 18px;
}

.vehicle-highlight-card__eyebrow{
    color:var(--vehicle-primary);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.2;
    text-transform:uppercase;
}

.vehicle-highlight-card__description{
    color:var(--vehicle-text);
    font-size:15px;
    font-weight:500;
    line-height:1.5;
}

@media (max-width:768px){
    .vehicle-highlight-grid{
        gap:14px;
        padding-right:18px;
    }

    .vehicle-highlight-card{
        flex:0 0 82%;
        border-radius:15px;
    }

    .vehicle-highlight-card__media{
        height:150px;
        min-height:150px;
    }

    .vehicle-highlight-card__content{
        gap:6px;
        padding:14px 14px 16px;
    }

    .vehicle-highlight-card__eyebrow{
        font-size:10px;
    }

    .vehicle-highlight-card__description{
        font-size:13px;
        line-height:1.5;
    }
}