/* =========================================================
   MOBILE DROPDOWN FIX
   Desktop remains completely unchanged
   ========================================================= */

@media (max-width: 991.98px) {

    /* Parent dropdown item */
    #navbarCollapse .dropend {
        position: relative;
    }

    /* Parent link */
    #navbarCollapse .dropend > .dropdown-item {
        position: relative;
        padding-right: 45px;
        white-space: normal;
    }

    /*
     * IMPORTANT:
     * Keep the parent link clickable.
     * Bootstrap's arrow remains visible.
     */
    #navbarCollapse .dropend > .dropdown-item::after {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* -----------------------------------------
       SUBMENU
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

        background: #f5f5f5;

        /* Hidden by default */
        display: none;
    }


    /* -----------------------------------------
       SHOW SUBMENU WHEN BOOTSTRAP OPENS IT
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-menu.show {
        display: block !important;
    }


    /* -----------------------------------------
       SUBMENU LINKS
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-menu .dropdown-item {
        display: block;

        width: 100%;

        padding: 12px 35px;

        font-size: 13px;

        line-height: 1.5;

        white-space: normal;

        border-bottom: 1px solid #ddd;

        background: #f5f5f5;
    }


    /* Hover / active */
    #navbarCollapse .dropend > .dropdown-menu .dropdown-item:hover,
    #navbarCollapse .dropend > .dropdown-menu .dropdown-item.active {
        background: #f58220;
        color: #fff;
    }


    /* -----------------------------------------
       MAIN PRODUCT DROPDOWN
       ----------------------------------------- */

    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }


    /* -----------------------------------------
       PRODUCT CATEGORY ITEMS
       ----------------------------------------- */

    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu > .dropend > .dropdown-item,
    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu > .dropdown-item {
        padding: 13px 25px;
        white-space: normal;
        border-bottom: 1px solid #e5e5e5;
    }


    /* -----------------------------------------
       MOBILE NAVBAR SCROLL
       ----------------------------------------- */

    #navbarCollapse {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

}