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

.mobile-header{

    display:none;

    background:#fff;

    border-bottom:1px solid #E5E7EB;

    position:sticky;

    top:0;

    z-index:9999;

}


.mobile-header-container{

    height:64px;

    padding:0 14px;

    display:flex;

    align-items:center;

    gap:12px;

}


/* ==========================
   Menu Button
========================== */

.mobile-menu-btn{

    width:40px;

    height:40px;

    border:none;

    background:#F3F4F6;

    border-radius:10px;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}


/* ==========================
   Logo
========================== */

.mobile-logo{

    font-size:22px;

    font-weight:800;

    color:#2E7D32;

    text-decoration:none;

    white-space:nowrap;

}


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

.mobile-search{

    flex:1;

    height:40px;

    display:flex;

    align-items:center;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:999px;

    overflow:hidden;

}


.mobile-search input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    padding:0 14px;

    font-size:14px;

}


.mobile-search button{

    width:42px;

    height:100%;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:17px;

}


/* ==========================
   Cart
========================== */

.mobile-cart{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid #E5E7EB;

    text-decoration:none;

    font-size:18px;

}


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

@media(max-width:992px){

    .mobile-header{

        display:block;

    }

}


@media(min-width:993px){

    .mobile-header{

        display:none;

    }

}

/* ==========================================
   Mobile Side Menu
========================================== */

.mobile-side-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-bottom:1px solid #E5E7EB;

}

.mobile-side-logo{

    font-size:16px;

    font-weight:700;

    color:#2E7D32;

    letter-spacing:.5px;

}

.mobile-side-menu{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    background:#fff;

    padding:20px;

    box-shadow:0 0 30px rgba(0,0,0,.15);

    transition:left .3s ease;

    z-index:10001;

    overflow-y:auto;

}


.mobile-side-menu.active{

    left:0;

}


.mobile-side-close{

    width:40px;

    height:40px;

    border:none;

    background:#F3F4F6;

    border-radius:10px;

    font-size:24px;

    cursor:pointer;

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

}


.mobile-menu-list{

    list-style:none;

    padding:20px 0 0;

    margin:0;

}


.mobile-menu-list li{

    border-bottom:1px solid #E5E7EB;

}


.mobile-menu-list a{

    display:block;

    padding:14px 0;

    color:#222;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

}


/* Overlay */

.mobile-menu-overlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:10000;

}


.mobile-menu-overlay.active{

    display:block;

}



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

.mobile-submenu-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    background:none;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}


.mobile-submenu{

    display:none;

    list-style:none;

    padding:0 0 10px 18px;

    margin:0;

}


.mobile-submenu.active{

    display:block;

}


.mobile-submenu li{

    border:none;

}


.mobile-submenu a{

    display:block;

    padding:10px 0;

    font-size:15px;

    color:#555;

}

.submenu-arrow{

    transition:.3s;

    font-size:18px;

}

.mobile-submenu-btn.active .submenu-arrow{

    transform:rotate(180deg);

}

.mobile-menu-list a,
.mobile-submenu-btn{

    transition:.25s;

}

.mobile-menu-list a:hover,
.mobile-submenu-btn:hover{

    background:#F6F8FB;

    color:#2E7D32;

    padding-left:12px;

}

/* ==========================
   Body Scroll Lock
========================== */

body.mobile-menu-open{

    overflow:hidden;

}

/* ==========================
   Active Menu
========================== */

.mobile-menu-list a.active{

    color:#2E7D32;

    font-weight:700;

    background:#E8F5E9;

    border-radius:8px;

    padding-left:12px;

}

/* ==========================
   Logout Button
========================== */

.mobile-logout-btn{

    width:100%;

    background:none;

    border:none;

    padding:14px 18px;

    text-align:left;

    cursor:pointer;

    font-size:15px;

    color:#444;

}

.mobile-logout-btn:hover{

    color:#C62828;

    background:#FDF2F2;

}