/* Header category hover dropdown
   Scoped to the category items only so the rest of the navigation stays untouched. */
@media only screen and (min-width: 992px) {
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item {
        position: relative;
    }

    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu {
        display: block;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item:hover,
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item.is-open,
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item:focus-within,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item:hover,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item.is-open,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item:focus-within,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item:hover,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item.is-open,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item:focus-within {
        z-index: 999;
    }

    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item:hover > .header-category-submenu,
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item.is-open > .header-category-submenu,
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item:focus-within > .header-category-submenu,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item:hover > .header-category-submenu,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item.is-open > .header-category-submenu,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item:focus-within > .header-category-submenu,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item:hover > .header-category-submenu,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item.is-open > .header-category-submenu,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item:focus-within > .header-category-submenu {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        top: 100% !important;
        z-index: 9999;
    }

    /* Invisible bridge so the dropdown stays open while the pointer crosses
       the space between the category link and the dropdown itself. */
    .navbar-area .new-nav-container .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu::before,
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu::before,
    .navbar-area .navbar-collapse .navbar-nav > li.header-category-item > .header-category-submenu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -15px;
        height: 15px;
        background: transparent;
    }
}
