/* GPS WooCommerce Product Categories Navigation
 * v2.1.2
 * Desktop: classic cascading/flyout menus.
 * The selector is anchored to a marker injected into the final rendered
 * Products <li>, so it does not depend on a theme preserving block className.
 */

@media (min-width: 782px) {
    .wp-block-navigation li.gps-product-categories-menu,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] {
        --gps-product-nav-panel-width: 280px;
    }

    /* First-level Products dropdown. */
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container {
        width: var(--gps-product-nav-panel-width) !important;
        min-width: var(--gps-product-nav-panel-width) !important;
        max-width: min(var(--gps-product-nav-panel-width), calc(100vw - 32px)) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Every category row must become the positioning context for its own
       child panel. This is the key difference from a normal downward dropdown. */
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.wp-block-navigation-item,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.wp-block-navigation-item {
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.wp-block-navigation-item > .wp-block-navigation-item__content,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.wp-block-navigation-item > .wp-block-navigation-item__content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Second level and deeper: always open to the RIGHT of the parent row. */
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.has-child > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.has-child > .wp-block-navigation__submenu-container,
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
        position: absolute !important;
        top: -1px !important;
        left: 100% !important;
        right: auto !important;
        bottom: auto !important;
        inset-inline-start: 100% !important;
        inset-inline-end: auto !important;
        width: var(--gps-product-nav-panel-width) !important;
        min-width: var(--gps-product-nav-panel-width) !important;
        max-width: min(var(--gps-product-nav-panel-width), calc(100vw - 32px)) !important;
        margin: 0 !important;
        transform: none !important;
        translate: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 1000000 !important;
    }

    /* The7/core may use visibility/opacity/height rules for nested dropdowns.
       Preserve those closed states, but explicitly open the direct child panel
       of the hovered/focused category in the flyout position above. */
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.has-child:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.has-child:focus-within > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.has-child:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.has-child:focus-within > .wp-block-navigation__submenu-container,
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation li.gps-product-categories-menu > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] > .wp-block-navigation__submenu-container li.wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Keep all nested rows aligned to their flyout panel width. */
    .wp-block-navigation li.gps-product-categories-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item,
    .wp-block-navigation li.gps-product-categories-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
    .wp-block-navigation li[data-gps-product-categories-menu="1"] .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}