/* =====================================================
   Shopex Pro
   Mobile Header
===================================================== */

/* Hide on Desktop */

.shopex-mobile-header{
    display:none;
}

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

@media (max-width:991px){

    .shopex-header{
        display:none;
    }

    .shopex-mobile-header{

    display:block;

    position:sticky;

    top:0;

    left:0;

    width:100%;

    padding-top:4px;

    background:#fff;

    border-bottom:1px solid #eee;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    z-index:9999;

}

    .shopex-mobile-header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:60px;

    padding:0 16px;

}

    .shopex-mobile-menu-toggle{

        background:none;

        border:none;

        font-size:22px;

        cursor:pointer;

        color:#111;

    }

    .shopex-mobile-logo{

        flex:1;

        text-align:center;

    }

    .shopex-mobile-logo img{

        max-height:40px;

        width:auto;

    }

    .shopex-mobile-logo a{

        text-decoration:none;

        color:#111;

        font-size:22px;

        font-weight:700;

    }

    .shopex-mobile-cart{

        position:relative;

        color:#111;

        font-size:22px;

        text-decoration:none;

    }

    .shopex-mobile-cart-count{

    position:absolute;

    top:4px;

    right:-6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ff6b00;

    color:#fff;

    font-size:11px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;

}
    
    /* ==========================================
   Mobile Header Icon Touch Area
========================================== */

.shopex-mobile-menu-toggle,
.shopex-mobile-cart{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

}

    /* ===================
       Search
    =================== */

    .shopex-mobile-search{

        padding:12px 15px;

        border-top:1px solid #eee;

        background:#fff;

    }

    .shopex-mobile-search form{

        display:flex;

        border:1px solid #ddd;

        border-radius:8px;

        overflow:hidden;

    }

    .shopex-mobile-search input{

        flex:1;

        border:none;

        padding:12px;

        outline:none;

    }

    .shopex-mobile-search button{

        width:48px;

        border:none;

        background:#ff6b00;

        color:#fff;

        cursor:pointer;

    }

}