/*
Theme Name: Ecomus Child
Theme URI: https://wpecomus.com/
Author: DrFuri
Author URI: http://drfuri.com/
Description: Multipurpose WooCommerce WordPress Theme
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 7.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecomus
Domain Path: /lang/
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: ecomus
*/

/* =========================================================
   DROPEEGO - ECOMUS CHILD THEME
   UNIVERSAL MOBILE ROLE / ACCOUNT MENU
   =========================================================

   UNIVERSAL:
   - Customer
   - Affiliate
   - Subscriber
   - Dropshipper
   - Any future user role
   - Any future logged-in account menu

   NO ROLE NAMES ARE HARD-CODED.

   MAIN MENU ICONS  : 20px
   SUBMENU ICONS    : 20px
   ACCOUNT TEXT     : 16px / Bold
   SUBMENU TEXT     : 14px

   SUBMENUS:
   - Closed by default
   - Open when parent receives an open state
   - Multiple submenus work independently
   ========================================================= */


/* =========================================================
   1. MOBILE ONLY
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       2. MAIN MENU CONTAINER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       3. ALL TOP-LEVEL MENU ITEMS
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        list-style: none !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }


    /* =====================================================
       LAST TOP-LEVEL ITEM
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li:last-child {
        border-bottom: 0 !important;
    }


    /* =====================================================
       4. STANDARD TOP-LEVEL MENU LINKS
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 15px 0 !important;
        box-sizing: border-box !important;
        color: #294257 !important;
        background: transparent !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
    }


    /* =====================================================
       5. STANDARD TOP-LEVEL HOVER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a:hover {
        color: #f58220 !important;
        background-color: #fff1e6 !important;
        padding-left: 10px !important;
    }


    /* =====================================================
       6. MAIN MENU ICON CONTAINER
       UNIVERSAL FOR ALL ROLES
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a .menu-item-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 14px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       7. MAIN MENU ICON IMAGE
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a .menu-item-icon > img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }


    /* =====================================================
       8. UNIVERSAL ROLE / ACCOUNT PARENT
       
       Any top-level item containing a submenu automatically
       receives the account/role styling.

       No role names are required.
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children {
        margin-bottom: 8px !important;
        border-bottom: 0 !important;
    }


    /* =====================================================
       9. ROLE / ACCOUNT HEADER

       Applies automatically to:
       Customer
       Affiliate
       Subscriber
       Dropshipper
       Future roles
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        box-sizing: border-box !important;
        color: #294257 !important;
        background: transparent !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
    }


    /* =====================================================
       10. ROLE / ACCOUNT HEADER HOVER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > a:hover {
        color: #f58220 !important;
        background-color: #fff1e6 !important;
        padding-left: 10px !important;
    }


    /* =====================================================
       11. ROLE / ACCOUNT AVATAR
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > a > img.avatar {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 10px 0 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }


    /* =====================================================
       12. ROLE / ACCOUNT SUBMENU
       CLOSED BY DEFAULT
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu {
        display: none !important;
        width: 100% !important;
        margin: 8px 0 25px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid #e2e2e2 !important;
        border-radius: 3px !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }


    /* =====================================================
       13. OPEN SUBMENU STATES
       
       These states allow JavaScript or the theme to open
       each submenu independently.

       CLOSED:
       display: none

       OPEN:
       display: block
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children.active > ul.sub-menu,
    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children.open > ul.sub-menu,
    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children.is-open > ul.sub-menu,
    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children.menu-item-open > ul.sub-menu,
    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children[aria-expanded="true"] > ul.sub-menu {
        display: block !important;
    }


    /* =====================================================
       14. SUBMENU ITEMS
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e2e2e2 !important;
        list-style: none !important;
        background: #ffffff !important;
    }


    /* =====================================================
       15. LAST SUBMENU ITEM
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li:last-child {
        border-bottom: 0 !important;
    }


    /* =====================================================
       16. SUBMENU LINKS
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        color: #294257 !important;
        background: #ffffff !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
    }


    /* =====================================================
       17. SUBMENU ICON CONTAINER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a > .menu-item-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 14px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       18. SUBMENU ICON IMAGE
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a > .menu-item-icon > img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }


    /* =====================================================
       19. SUBMENU HOVER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a:hover {
        color: #f58220 !important;
        background-color: #fff1e6 !important;
        padding-left: 20px !important;
    }


    /* =====================================================
       20. ACTIVE SUBMENU ITEM
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
        color: #f58220 !important;
        background-color: #fff7f0 !important;
        font-weight: 500 !important;
    }


    /* =====================================================
       21. ACTIVE SUBMENU ITEM + HOVER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a:hover {
        color: #f58220 !important;
        background-color: #fff1e6 !important;
    }


    /* =====================================================
       22. LOGOUT HOVER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a[href*="customer-logout"]:hover,
    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a[href*="logout"]:hover {
        color: #f58220 !important;
        background-color: #fff1e6 !important;
    }

}


/* =========================================================
   23. VERY SMALL PHONES
   480PX AND BELOW
   ========================================================= */

@media (max-width: 480px) {


    /* =====================================================
       ROLE / ACCOUNT HEADER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > a {
        min-height: 40px !important;
        padding: 7px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }


    /* =====================================================
       ACCOUNT AVATAR
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > a > img.avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin-right: 9px !important;
    }


    /* =====================================================
       SUBMENU LINKS
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a {
        min-height: 50px !important;
        padding: 11px 14px !important;
        font-size: 13px !important;
    }


    /* =====================================================
       SUBMENU ICON CONTAINER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a > .menu-item-icon {
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin-right: 13px !important;
    }


    /* =====================================================
       SUBMENU ICON IMAGE
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a > .menu-item-icon > img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }


    /* =====================================================
       MAIN MENU ICON CONTAINER
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a .menu-item-icon {
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin-right: 13px !important;
    }


    /* =====================================================
       MAIN MENU ICON IMAGE
       ===================================================== */

    #mobile-menu-panel .hambuger-navigation > ul.menu > li > a .menu-item-icon > img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }

}


/* =========================================================
   DROPEEGO — LOGIN | REGISTER BUTTON
   MOBILE MENU ONLY
   Targets ONLY menu-item-16705
   ========================================================= */

@media (max-width: 767px) {

    #mobile-menu-panel #menu-item-16705 > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;

        width: 100% !important;
        min-height: 48px !important;

        padding: 12px 16px !important;
        margin: 8px 0 12px !important;

        box-sizing: border-box !important;

        color: #ffffff !important;
        background-color: #f5773e !important;

        border-radius: 5px !important;

        font-size: 16px !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        transition:
            background-color 0.2s ease,
            color 0.2s ease !important;
    }

    /* Login | Register — Hover */
    #mobile-menu-panel #menu-item-16705 > a:hover {
        color: #ffffff !important;
        background-color: #37586D !important;
    }

}


/* Dropeego login password field */