/*
============================================================
AUTOMART MOBILE GLOBAL + HOME V40
MOBILE ONLY

- Global fixed header
- Global fixed bottom navigation
- Existing homepage content preserved
- Desktop/tablet untouched
- Global AutoMart typography inherited
============================================================
*/

.am-mobile-v40 {
    display: none;
}


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

@media (max-width: 767px) {

    html {
        scroll-padding-top: 170px;
    }


    body:not(.admin-page) {
        padding-top: 164px !important;
        padding-bottom: 74px !important;
        overflow-x: hidden;
    }


    body:not(.admin-page) .am-mobile-v40 {
        display: block;
    }


    /* Existing desktop/tablet global shell is replaced only on phone */
    body:not(.admin-page) > .premium-topbar,
    body:not(.admin-page) > .am-global-search-v18,
    body:not(.admin-page) .mobile-bottom {
        display: none !important;
    }


    /* Desktop footer remains desktop/tablet authority.
       The fixed bottom navigation is the mobile footer. */
    body:not(.admin-page) > footer.footer {
        display: none !important;
    }


    /* =====================================================
       GLOBAL FIXED HEADER
       ===================================================== */

    .am-mobile-v40__header {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        z-index: 1200;

        min-height: 156px;

        padding:
            max(8px, env(safe-area-inset-top))
            10px
            9px;

        border-bottom:
            1px solid #e7ece9;

        border-radius:
            0 0 18px 18px;

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

        box-shadow:
            0 8px 24px rgba(16,24,40,.08);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .am-mobile-v40__top {
        height: 48px;

        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 10px;
    }


    .am-mobile-v40__brand {
        min-width: 0;

        display: inline-flex;

        align-items: center;

        gap: 9px;

        color: #101828;

        text-decoration: none !important;
    }


    .am-mobile-v40__brandmark {
        width: 37px;
        height: 37px;

        flex: 0 0 37px;

        display: grid;

        place-items: center;

        border-radius: 10px;

        background:
            linear-gradient(
                145deg,
                #15b76d,
                #057848
            );

        color: #fff;

        font-weight: 800;

        box-shadow:
            0 7px 16px rgba(7,148,90,.22);
    }


    .am-mobile-v40__brandword {
        color: #111827;

        font-weight: 800;

        white-space: nowrap;
    }


    .am-mobile-v40__actions {
        display: flex;

        align-items: center;

        gap: 6px;
    }


    .am-mobile-v40__icon-btn {
        position: relative;

        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        display: grid;

        place-items: center;

        padding: 0;

        border:
            1px solid #e6ebe8;

        border-radius: 50%;

        background:
            #ffffff;

        color:
            #101828;

        text-decoration: none !important;

        box-shadow:
            0 4px 12px rgba(16,24,40,.05);
    }


    .am-mobile-v40__icon-btn svg {
        width: 19px;
        height: 19px;
    }


    .am-mobile-v40__favorite i {
        position: absolute;

        top: 5px;
        right: 5px;

        width: 6px;
        height: 6px;

        border:
            1px solid #ffffff;

        border-radius: 50%;

        background:
            #ef4444;
    }


    /* Search field */

    .am-mobile-v40__search {
        height: 41px;

        display: grid;

        grid-template-columns:
            20px
            minmax(0,1fr);

        align-items: center;

        gap: 8px;

        margin-top: 4px;

        padding:
            0 13px;

        border:
            1px solid #e4e9e6;

        border-radius:
            13px;

        background:
            #ffffff;

        box-shadow:
            inset 0 1px 2px rgba(16,24,40,.02),
            0 3px 10px rgba(16,24,40,.035);
    }


    .am-mobile-v40__search svg {
        width: 18px;
        height: 18px;

        color:
            #344054;
    }


    .am-mobile-v40__search input {
        min-width: 0;

        height: 100%;

        padding: 0;

        border: 0 !important;

        outline: 0 !important;

        background: transparent !important;

        color: #101828;

        font: inherit;
    }


    .am-mobile-v40__search input::placeholder {
        color:
            #86909c;
    }


    /* Quick filters */

    .am-mobile-v40__filters {
        display: grid;

        grid-template-columns:
            repeat(4, max-content);

        gap: 7px;

        margin-top: 8px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .am-mobile-v40__filters::-webkit-scrollbar {
        display: none;
    }


    .am-mobile-v40__filters > a {
        min-height: 36px;

        display: inline-flex;

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

        gap: 6px;

        padding:
            0 10px;

        border:
            1px solid #e5eae7;

        border-radius:
            18px;

        background:
            #ffffff;

        color:
            #1d2939;

        text-decoration:
            none !important;

        white-space: nowrap;

        box-shadow:
            0 2px 8px rgba(16,24,40,.035);
    }


    .am-mobile-v40__filters svg {
        width: 16px;
        height: 16px;

        flex: 0 0 16px;
    }


    .am-mobile-v40__filters b {
        color:
            #697586;

        font-weight: 700;
    }


    .am-mobile-v40__more i {
        width: 18px;
        height: 18px;

        display: grid;

        place-items: center;

        border-radius: 50%;

        background:
            #0a9c61;

        color: #ffffff;

        font-style: normal;

        font-size:
            var(--am-type-xs, 11px);
    }


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

    .am-mobile-v40__menu {
        position: fixed;

        inset: 0;

        z-index: 1300;

        display: none;
    }


    .am-mobile-v40__menu.is-open {
        display: block;
    }


    .am-mobile-v40__menu-backdrop {
        position: absolute;

        inset: 0;

        background:
            rgba(3,12,8,.43);

        backdrop-filter:
            blur(3px);
    }


    .am-mobile-v40__menu-card {
        position: absolute;

        top:
            calc(
                env(safe-area-inset-top)
                + 12px
            );

        right: 10px;

        width:
            min(
                300px,
                calc(100vw - 20px)
            );

        padding:
            14px;

        border:
            1px solid #e1e8e4;

        border-radius:
            18px;

        background:
            #ffffff;

        box-shadow:
            0 22px 50px rgba(16,24,40,.24);
    }


    .am-mobile-v40__menu-head {
        min-height: 44px;

        display: flex;

        align-items: center;
        justify-content: space-between;

        padding:
            0 4px 10px;

        border-bottom:
            1px solid #edf1ef;
    }


    .am-mobile-v40__menu-head button {
        width: 34px;
        height: 34px;

        border:
            1px solid #e5eae7;

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            #344054;

        font: inherit;
    }


    .am-mobile-v40__menu-card > a {
        min-height: 47px;

        display: flex;

        align-items: center;
        justify-content: space-between;

        padding:
            0 8px;

        border-bottom:
            1px solid #f0f2f1;

        color:
            #25313e;

        text-decoration:
            none !important;
    }


    .am-mobile-v40__menu-card > a:last-child {
        border-bottom: 0;
    }


    /* =====================================================
       GLOBAL FIXED BOTTOM NAV
       ===================================================== */

    .am-mobile-v40__bottom {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1200;

        height:
            calc(
                64px
                + env(safe-area-inset-bottom)
            );

        display: grid;

        grid-template-columns:
            repeat(5,1fr);

        padding-bottom:
            env(safe-area-inset-bottom);

        border-top:
            1px solid #e2e8e4;

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

        box-shadow:
            0 -8px 24px rgba(16,24,40,.07);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .am-mobile-v40__bottom > a {
        position: relative;

        min-width: 0;

        display: grid;

        place-items: center;

        align-content: center;

        gap: 3px;

        color:
            #667085;

        text-decoration:
            none !important;
    }


    .am-mobile-v40__bottom > a > svg {
        width: 20px;
        height: 20px;
    }


    .am-mobile-v40__bottom > a small {
        color:
            inherit;

        font-size:
            var(--am-type-xs, 11px);
    }


    .am-mobile-v40__bottom > a.is-active {
        color:
            #08975c;
    }


    .am-mobile-v40__sell > span {
        position: absolute;

        top: -12px;

        width: 43px;
        height: 43px;

        display: grid;

        place-items: center;

        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #13ae68,
                #078b52
            );

        color:
            #ffffff;

        box-shadow:
            0 8px 20px rgba(7,150,95,.28);
    }


    .am-mobile-v40__sell > span svg {
        width: 21px;
        height: 21px;
    }


    .am-mobile-v40__sell small {
        margin-top: 26px;
    }


    /* =====================================================
       HOMEPAGE MOBILE — CONTENT REMAINS THE SAME
       ===================================================== */

    body.home-page main {
        overflow: hidden;
    }


    /* Hero / Dealer Finder */

    body.home-page .dealer-finder-v12 {
        padding:
            8px 0 11px !important;
    }


    body.home-page .dealer-finder-v12
    .dealer-finder-shell-v12 {
        width:
            calc(100% - 16px) !important;

        max-width: none !important;

        min-height: 0 !important;

        grid-template-columns:
            1fr !important;

        gap: 16px !important;

        margin:
            0 auto !important;

        padding:
            24px 16px 18px !important;

        border-radius:
            18px !important;

        overflow: hidden;
    }


    body.home-page .dealer-finder-v12
    .dealer-finder-shell-v12::before {
        background-position:
            center 35% !important;
    }


    body.home-page
    .dealer-finder-copy-v12 {
        max-width: none !important;

        padding-top:
            18px !important;
    }


    body.home-page
    .dealer-finder-copy-v12 p {
        max-width:
            340px !important;
    }


    body.home-page
    .dealer-finder-cta-v12 {
        max-width: none !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 8px !important;

        margin-top:
            18px !important;
    }


    body.home-page
    .dealer-finder-cta-v12 a {
        width: 100%;

        min-height:
            47px !important;
    }


    body.home-page
    .vehicle-finder-panel-v12 {
        width: 100% !important;

        max-width: none !important;

        justify-self:
            stretch !important;

        padding:
            14px !important;

        border-radius:
            15px !important;
    }


    body.home-page
    .vehicle-finder-head-v12 {
        align-items:
            center !important;
    }


    body.home-page
    .vehicle-finder-form-v12 {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:
            8px !important;
    }


    body.home-page
    .vehicle-finder-select-v12 select {
        width: 100%;

        height:
            42px !important;

        min-height:
            42px !important;
    }


    body.home-page
    .vehicle-finder-electric-v12,
    body.home-page
    .vehicle-finder-search-v12 {
        grid-column:
            1 / -1 !important;
    }


    body.home-page
    .vehicle-finder-search-v12 {
        height:
            46px !important;

        min-height:
            46px !important;
    }


    /* Find Your Next Ride */

    body.home-page
    .premium-category-section {
        padding:
            14px 0 8px !important;
    }


    body.home-page
    .premium-category-shell {
        width:
            calc(100% - 16px) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;

        padding:
            20px 14px 17px !important;

        border-radius:
            18px !important;
    }


    body.home-page
    .premium-category-head {
        align-items:
            flex-start !important;

        gap:
            8px !important;
    }


    body.home-page
    .premium-category-copy {
        min-width: 0;
    }


    body.home-page
    .premium-category-view-all {
        flex:
            0 0 auto;

        min-width:
            auto !important;

        height:
            38px !important;

        padding:
            0 12px !important;
    }


    body.home-page
    .premium-category-grid {
        display: flex !important;

        gap:
            8px !important;

        margin-top:
            14px !important;

        overflow-x:
            auto !important;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        padding-bottom:
            7px;
    }


    body.home-page
    .premium-category-grid::-webkit-scrollbar {
        display: none;
    }


    body.home-page
    .premium-category-card {
        min-width:
            104px !important;

        width:
            104px !important;

        flex:
            0 0 104px;

        min-height:
            168px !important;

        scroll-snap-align:
            start;

        padding:
            8px 7px 10px !important;

        border-radius:
            14px !important;
    }


    body.home-page
    .premium-category-visual {
        width: 100% !important;

        height:
            94px !important;

        border-radius:
            12px !important;
    }


    body.home-page
    .premium-category-arrow {
        width:
            31px !important;

        height:
            31px !important;

        margin-top:
            7px !important;
    }


    body.home-page
    .premium-category-footer-mark {
        display:
            none !important;
    }


    /* Featured Vehicles */

    body.home-page
    .premium-featured-section {
        padding:
            24px 0 13px !important;
    }


    body.home-page
    .premium-featured-wrap {
        width:
            calc(100% - 20px) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;
    }


    body.home-page
    .premium-featured-head {
        align-items:
            flex-start !important;

        gap:
            8px !important;
    }


    body.home-page
    .premium-featured-head > div {
        min-width: 0;
    }


    body.home-page
    .premium-tabs {
        display: flex !important;

        gap:
            6px !important;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    body.home-page
    .premium-tabs::-webkit-scrollbar {
        display: none;
    }


    body.home-page
    .premium-featured-grid {
        display:
            flex !important;

        gap:
            10px !important;

        overflow-x:
            auto !important;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        padding:
            2px 1px 12px !important;
    }


    body.home-page
    .premium-featured-grid::-webkit-scrollbar {
        display: none;
    }


    body.home-page
    .premium-featured-grid
    .premium-auto-card {
        min-width:
            min(82vw, 310px) !important;

        width:
            min(82vw, 310px) !important;

        flex:
            0 0 min(82vw, 310px);

        scroll-snap-align:
            start;
    }


    body.home-page
    .premium-featured-grid
    .premium-auto-media {
        height:
            176px !important;
    }


    body.home-page
    .premium-benefit-strip {
        display:
            none !important;
    }


    /* Popular Makes */

    body.home-page
    .premium-makes-v10 {
        padding:
            19px 0 12px !important;
    }


    body.home-page
    .premium-makes-shell-v10 {
        width:
            calc(100% - 20px) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;
    }


    body.home-page
    .premium-makes-header-v10 {
        align-items:
            flex-end !important;

        gap:
            8px !important;
    }


    body.home-page
    .premium-makes-grid-v10 {
        display:
            flex !important;

        gap:
            9px !important;

        margin-top:
            14px !important;

        overflow-x:
            auto !important;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            none;

        padding:
            2px 1px 7px;
    }


    body.home-page
    .premium-makes-grid-v10::-webkit-scrollbar {
        display: none;
    }


    body.home-page
    .premium-make-item-v10 {
        min-width:
            76px !important;

        flex:
            0 0 76px;

        scroll-snap-align:
            start;
    }


    body.home-page
    .premium-make-medallion-v10 {
        width:
            64px !important;

        height:
            64px !important;
    }


    /* Promo / trust cards */

    body.home-page
    .trust-panels {
        padding:
            6px 0 15px !important;
    }


    body.home-page
    .trust-grid {
        width:
            calc(100% - 20px) !important;

        max-width:
            none !important;

        display:
            grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap:
            8px !important;

        margin:
            0 auto !important;
    }


    body.home-page
    .trust-card {
        min-height:
            88px !important;

        height:
            auto !important;

        padding:
            12px !important;

        border-radius:
            10px !important;
    }


    body.home-page
    .trust-card:last-child {
        grid-column:
            1 / -1;
    }

}


/* Narrow phones */

@media (max-width: 390px) {

    body:not(.admin-page) {
        padding-top:
            160px !important;
    }


    .am-mobile-v40__header {
        min-height:
            152px;
    }


    .am-mobile-v40__filters > a {
        padding:
            0 9px;
    }


    body.home-page
    .premium-category-card {
        min-width:
            98px !important;

        width:
            98px !important;

        flex-basis:
            98px;
    }


    body.home-page
    .premium-featured-grid
    .premium-auto-card {
        min-width:
            84vw !important;

        width:
            84vw !important;

        flex-basis:
            84vw;
    }

}

/* AUTOMART MOBILE FOOTER V40.1 START */

@media (max-width: 767px) {

    /*
     * V40 used the fixed bottom navigation as the mobile footer.
     * V40.1 restores the full AutoMart page footer and keeps the
     * fixed bottom navigation as the mobile action bar.
     */

    body:not(.admin-page) > footer.footer {
        display: block !important;
        position: relative;
        margin-top: 18px !important;
        padding:
            30px 0
            calc(92px + env(safe-area-inset-bottom))
            !important;
        background:
            linear-gradient(
                180deg,
                #06170f 0%,
                #04130c 100%
            ) !important;
        color: #dce8e1;
        border-top: 1px solid rgba(255,255,255,.05);
    }

    body:not(.admin-page)
    > footer.footer
    > .container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.admin-page)
    .footer-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
        gap: 24px 18px !important;
    }

    body:not(.admin-page)
    .footer-intro {
        grid-column: 1 / -1 !important;
        padding-bottom: 21px;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    body:not(.admin-page)
    .footer-intro
    .brand.inverse {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 12px;
        color: #ffffff;
    }

    body:not(.admin-page)
    .footer-intro
    .brandmark {
        width: 34px !important;
        height: 34px !important;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background:
            linear-gradient(
                145deg,
                #15b76d,
                #057848
            );
        color: #ffffff;
        box-shadow: 0 7px 16px rgba(7,148,90,.20);
    }

    body:not(.admin-page)
    .footer-intro p {
        max-width: 330px !important;
        margin: 0 0 13px !important;
        color: #9eb1a7 !important;
    }

    body:not(.admin-page)
    .footer-trust {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px 15px !important;
        color: #89a598 !important;
    }

    body:not(.admin-page)
    .footer-grid > div:not(.footer-intro) {
        min-width: 0;
        margin: 0 !important;
    }

    body:not(.admin-page)
    .footer h4 {
        margin: 0 0 11px !important;
        color: #ffffff !important;
    }

    body:not(.admin-page)
    .footer a {
        display: block;
        margin: 0 0 9px !important;
        color: #a9bbb1 !important;
        text-decoration: none !important;
    }

    body:not(.admin-page)
    .footer a:active {
        color: #ffffff !important;
    }

    body:not(.admin-page)
    .footer-bottom {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin: 26px auto 0 !important;
        padding-top: 17px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        border-top: 1px solid rgba(255,255,255,.10) !important;
        color: #71877b !important;
    }

    /* Keep the fixed V40 bottom navigation visible. */
    .am-mobile-v40__bottom {
        display: grid !important;
    }

}

@media (max-width: 360px) {

    body:not(.admin-page)
    .footer-grid {
        gap: 22px 14px !important;
    }

}

/* AUTOMART MOBILE FOOTER V40.1 END */


/* AUTOMART MOBILE HEADER V40.2 START */

/*
============================================================
AUTOMART MOBILE HEADER V40.2

At phone width there must be only ONE global header:

1. V40 logo/actions row
2. V40 search field
3. V40 quick filters

The old premium header and legacy sticky-search system remain
in the document for desktop/tablet but are completely disabled
on mobile.

Global AutoMart typography remains authoritative.
============================================================
*/

@media (max-width: 767px) {

    /*
     * -------------------------------------------------------
     * SINGLE MOBILE HEADER AUTHORITY
     * -------------------------------------------------------
     */

    html body:not(.admin-page)
    header.premium-topbar,

    html body:not(.admin-page)
    header.premium-topbar[data-premium-header],

    html body:not(.admin-page)
    .premium-topbar,

    html body:not(.admin-page)
    .am-global-search-v18,

    html body:not(.admin-page)
    [class*="global-search-v18"]:not(.am-mobile-v40__search),

    html body:not(.admin-page)
    .mobile-bottom {
        display: none !important;

        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        overflow: hidden !important;

        opacity: 0 !important;

        pointer-events: none !important;
    }


    /*
     * Do not allow descendants of the retired header to
     * create residual height or sticky layers.
     */

    html body:not(.admin-page)
    .premium-topbar
    .premium-nav-shell,

    html body:not(.admin-page)
    .premium-topbar
    .premium-desktop-nav,

    html body:not(.admin-page)
    .premium-topbar
    .premium-nav-actions,

    html body:not(.admin-page)
    .am-global-search-v18
    .am-global-search-shell-v18,

    html body:not(.admin-page)
    .am-global-search-v18
    .am-global-search-form-v18 {
        display: none !important;

        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    /*
     * -------------------------------------------------------
     * V40 MOBILE HEADER
     * -------------------------------------------------------
     */

    html body:not(.admin-page)
    .am-mobile-v40 {
        display: block !important;
    }


    html body:not(.admin-page)
    .am-mobile-v40__header {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 1200 !important;
    }


    /*
     * Header height is about 156px.
     * 164px body offset creates a clean 8px breathing space.
     */

    html body:not(.admin-page) {
        padding-top: 164px !important;
    }


    /*
     * Stop old header spacing rules from pushing the page
     * down after the duplicate header has been removed.
     */

    html body:not(.admin-page) > main {
        margin-top: 0 !important;
    }


    /*
     * Keep the first page section reasonably close to the
     * mobile filters instead of leaving a legacy header gap.
     */

    html body.home-page
    main > :first-child {
        margin-top: 0 !important;
    }


    /*
     * -------------------------------------------------------
     * V40 SEARCH IS THE ONLY MOBILE SEARCH
     * -------------------------------------------------------
     */

    html body:not(.admin-page)
    .am-mobile-v40__search {
        display: grid !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    html body:not(.admin-page)
    .am-mobile-v40__filters {
        display: grid !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /*
     * -------------------------------------------------------
     * KEEP V40 BOTTOM NAV
     * -------------------------------------------------------
     */

    html body:not(.admin-page)
    .am-mobile-v40__bottom {
        display: grid !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: auto !important;
        height:
            calc(
                64px
                + env(safe-area-inset-bottom)
            ) !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: visible !important;

        pointer-events: auto !important;
    }

}


/* Narrow phones */

@media (max-width: 390px) {

    html body:not(.admin-page) {
        padding-top: 160px !important;
    }

}

/* AUTOMART MOBILE HEADER V40.2 END */