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

.shopex-mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99998;

}

.shopex-mobile-menu{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transition:.35s ease;

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

    z-index:99999;
    
    display:flex;
    flex-direction:column;

}


.shopex-mobile-menu.active{

    left:0;

}

.shopex-mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

.shopex-mobile-menu-content{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:0;

    padding-bottom:220px;

}

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

.shopex-mobile-menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-bottom:1px solid #eee;

}



.shopex-mobile-close{

    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;

}

/* ==========================================
   Drawer Brand
========================================== */

.shopex-mobile-menu-brand{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}

.shopex-mobile-menu-brand i{

    font-size:20px;

    color:#111;

}

.shopex-mobile-menu-brand span{

    font-size:18px;

    font-weight:700;

    color:#111;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

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

.shopex-mobile-nav ul{

    list-style:none;

    margin:0;

    padding:0;

}


.shopex-mobile-nav a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 20px;

    color:#222;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}

.shopex-mobile-nav a:hover{

    background:#f8f8f8;

    color:#ff6b00;

}

/* ==========================================
   Mobile Sub Menu
========================================== */

.shopex-mobile-nav .sub-menu{

    display:none;

    list-style:none;

    margin:0;

    padding:0;

}

.shopex-mobile-nav li.menu-open > .sub-menu{

    display:block;

}

.shopex-mobile-nav .sub-menu a{

    padding-left:38px;

    font-size:14px;

}

/* ==========================================
   Accordion Toggle
========================================== */

.shopex-mobile-nav li{

    position:relative;
    
    border-bottom:1px solid #f3f3f3;

}


.shopex-submenu-toggle{

    font-size:18px;

    font-weight:600;

    color:#666;

    cursor:pointer;

    padding-left:12px;

    user-select:none;

}

/* ==========================================
   Premium Categories
========================================== */

.shopex-mobile-categories{

    border-top:1px solid #ececec;

}

.shopex-mobile-category-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 16px;

    cursor:pointer;

    user-select:none;

    transition:.25s ease;

}

.shopex-mobile-category-heading:hover{

    background:#fafafa;

}

.shopex-mobile-category-title{

    display:flex;

    align-items:center;

    gap:10px;

    padding-left:8px;

    font-size:15px;

    font-weight:600;

    color:#222;

}

.shopex-mobile-category-title i{

    font-size:15px;

    color:#444;

}

.shopex-category-toggle{

    width:24px;

    text-align:center;

    margin-right:6px;

    font-size:15px;

    color:#666;

    transition:.30s ease;

}

.shopex-mobile-categories.active .shopex-category-toggle{

    transform:rotate(180deg);

}



/* ==========================================
   Premium Categories Accordion
========================================== */

.shopex-mobile-category-heading{

    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    padding:15px 0;

}

.shopex-mobile-category-title{

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

}

.shopex-category-toggle{

    font-size:18px;
    color:#777;
    transition:.30s ease;

}


/* ==========================================
   Recursive Category Accordion
========================================== */

.shopex-category-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.shopex-category-link{

    flex:1;

    display:block;

    padding:10px 16px 10px 30px;

    text-decoration:none;

    color:#444;

}

.shopex-subcat-toggle{

    width:40px;

    text-align:center;

    cursor:pointer;

    user-select:none;

    transition:.25s ease;

}

/* Accordion */

.shopex-category-parent > .shopex-mobile-subcategory-list{

    display:none;

}

.shopex-category-parent.active > .shopex-mobile-subcategory-list{

    display:block;

}

/* Arrow Rotate */

.shopex-category-parent.active
> .shopex-category-row
> .shopex-subcat-toggle{

    transform:rotate(180deg);

}

/* Level 2 */

.shopex-mobile-subcategory-list
.shopex-category-link{

    padding-left:48px;

}

/* Level 3 */

.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-category-link{

    padding-left:66px;

}

/* Level 4 */

.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-category-link{

    padding-left:84px;

}

/* ==========================================
   Category List
========================================== */

.shopex-mobile-category-list{

    list-style:none;

    margin:0;

    padding:0;

}

.shopex-mobile-category-list li{

    border-bottom:1px solid #f2f2f2;

}

.shopex-mobile-category-list li a{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px 10px 30px;

    font-size:14px;

    color:#444;

    text-decoration:none;

    transition:.25s;

}

.shopex-mobile-category-list li a::before{

    content:"›";

    font-size:18px;

    color:#999;

    font-weight:600;

}

.shopex-mobile-category-list li a:hover{

    background:#f8f8f8;

    color:#111;

}

/* ==========================================
   Mobile Drawer Layout
========================================== */

.shopex-mobile-menu{

    display:flex;
    flex-direction:column;
    height:100vh;

}


.shopex-mobile-menu-footer{

    padding:16px;

    border-top:1px solid #ececec;

    background:#fff;
    flex-shrink:0;

}

/* ==========================================
   Category Row
========================================== */

.shopex-category-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:52px;

    padding:0 8px 0 0;

}

.shopex-category-link{

    flex:1;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px 10px 30px;

    font-size:14px;

    color:#444;

    text-decoration:none;

    transition:.25s;

}

.shopex-category-link:hover{

    background:#f8f8f8;

    color:#111;

}

.shopex-category-link::before{

    content:"›";

    font-size:18px;

    color:#999;

    font-weight:600;

}

.shopex-subcat-toggle{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#888;

    flex-shrink:0;

    transition:.30s;

}


/* ==========================================
   Category Arrow (Final)
========================================== */

.shopex-subcat-toggle{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    margin-right:12px;

    font-size:18px;

    font-weight:700;

    line-height:1;

    color:#666;

    background:#f7f7f7;

    border-radius:8px;

    cursor:pointer;

    user-select:none;

    transition:all .25s ease;

}

.shopex-subcat-toggle:hover{

    background:#ededed;

}

.shopex-category-parent.active
> .shopex-category-row
> .shopex-subcat-toggle{

    transform:rotate(180deg);

}

/* ==========================================
   Recursive Category Indent
========================================== */

.shopex-mobile-subcategory-list{

    margin:0;

    padding:0;

    list-style:none;

}

.shopex-mobile-subcategory-list .shopex-category-link{

    padding-left:48px;

}

.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-category-link{

    padding-left:66px;

}

.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-mobile-subcategory-list
.shopex-category-link{

    padding-left:84px;

}

/* ==========================================
   Mobile Menu Banners
========================================== */

.shopex-mobile-banners{

    padding:8px 16px;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:0;


    background:#fff;

}

.shopex-mobile-banner{

    display:block;

    margin:0;

    padding:0;

    overflow:hidden;

    border-radius:10px;

    transition:.25s;

}

.shopex-mobile-banner + .shopex-mobile-banner{

    margin-top:6px;

}

.shopex-mobile-banner img{

    display:block;

    width:100%;

    height:58px;

    margin:0;

    padding:0;

    border-radius:10px;

    object-fit:cover;

}

.shopex-mobile-banner{

    display:block;

    padding:0 !important;

    margin:0 0 6px;

    border-radius:10px;

    overflow:hidden;

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

}

.shopex-mobile-banner:last-child{

    margin-bottom:0;

}