@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .header-catalog-menu.diforce-desktop-catalog:not(.closed):is(:hover, .open, :focus-within)::before {
        content: "";
        position: fixed;
        z-index: 24;
        inset: calc(100vh - var(--catalog-list-height, 65vh) - 8px) 0 0;
        background: rgba(24, 16, 31, 0.16);
        pointer-events: none;
    }

    .header-catalog-menu.diforce-desktop-catalog .list {
        max-height: var(--catalog-list-height, 65vh);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .header-catalog-menu.diforce-desktop-catalog:not(.closed):focus-within .list {
        display: block;
    }

    .header-catalog-menu.diforce-desktop-catalog .list > .item:not(.diforce-flyout-active) > .sub {
        display: none;
    }

    .header-catalog-menu.diforce-desktop-catalog .list > .diforce-flyout-active > .sub {
        display: block;
        position: fixed;
        z-index: 1;
        top: var(--catalog-flyout-top);
        left: var(--catalog-flyout-left);
        width: min(680px, var(--catalog-flyout-width));
        min-width: 0;
        height: auto;
        /* The theme assigns the full category list height inline. */
        min-height: 0 !important;
        max-height: calc(100vh - 16px);
        padding-bottom: 12px;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .header-catalog-menu.diforce-desktop-catalog .list > .diforce-flyout-active > .sub.mega {
        width: min(960px, var(--catalog-flyout-width));
    }
}