/* The widget is appended to the primary menu, which Storefront uses on both
 * desktop and mobile when the Max Mega Menu integration is active. */
@media (min-width: 768px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.woocommerce-mobile-menu-bottom {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Storefront renders the primary navigation after the logo row. Keep the
     * navigation in the header without creating a second visible row, and
     * place the Max Mega Menu toggle where Storefront's toggle normally sits. */
    .site-header {
        position: relative;
    }

    .site-header .storefront-primary-navigation {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 20;
        height: 0;
        pointer-events: none;
    }

    .site-header .storefront-primary-navigation > .col-full {
        position: relative;
        height: 0;
    }

    #mega-menu-wrap-primary .mega-menu-toggle {
        position: absolute !important;
        top: 1.5rem;
        right: 0;
        z-index: 21;
        width: auto !important;
        min-width: 44px;
        transform: none;
        pointer-events: auto;
    }

    /* Keep the off-canvas panel and every submenu on one solid surface. */
    #mega-menu-wrap-primary,
    #mega-menu-wrap-primary #mega-menu-primary,
    #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu,
    #mega-menu-wrap-primary #mega-menu-primary .mega-menu-column,
    #mega-menu-wrap-primary #mega-menu-primary .mega-menu-item,
    #mega-menu-wrap-primary #mega-menu-primary .woocommerce-mobile-menu-bottom,
    #mega-menu-wrap-primary #mega-menu-primary .woocommerce-mobile-menu-bottom__inner,
    #mega-menu-wrap-primary #mega-menu-primary .woocommerce-mobile-menu-bottom .widget,
    #mega-menu-wrap-primary #mega-menu-primary .woocommerce-mobile-menu-bottom .widget > * {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    /* Storefront's fixed handheld footer bar overlaps the bottom of the
     * off-canvas menu. Add scrollable breathing room so the final widget can
     * be brought fully above that bar. */
    #mega-menu-wrap-primary #mega-menu-primary {
        padding-bottom: 100px !important;
        scroll-padding-bottom: 100px;
    }

    /* Preserve the transparent hamburger/toggle bar configured in Max Mega Menu. */
    #mega-menu-wrap-primary .mega-menu-toggle {
        background-color: transparent !important;
        background-image: none !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.woocommerce-mobile-menu-bottom {
        display: block !important;
        width: 100% !important;
        clear: both;
        margin: 16px 0 0 !important;
        padding: 16px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.woocommerce-mobile-menu-bottom
        > .woocommerce-mobile-menu-bottom__inner {
        width: 100%;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.woocommerce-mobile-menu-bottom .widget {
        margin: 0;
    }
}