/*
 * ZP_CATEGORY_FLYOUT_RECOVERY_V1
 * Martfury desktop category flyout.
 * Scoped to navigation__left.
 */

@media (min-width: 992px) {

    .header .navigation {
        overflow: visible !important;
    }

    .header .navigation .ps-container {
        overflow: visible !important;
    }

    .header .navigation__left {
        position: relative;
        overflow: visible !important;
        z-index: 110;
    }

    .header .navigation__left .menu--product-categories {
        position: relative;
        overflow: visible !important;
    }

    .header .navigation__left
    .menu--product-categories > .menu__content {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        border: 1px solid #e6e9ee !important;
        box-shadow: 0 14px 35px rgba(15, 23, 42, .12) !important;
        z-index: 111 !important;
    }

    .header .navigation__left .menu--dropdown {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        list-style: none !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .header .navigation__left .menu--dropdown > li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .header .navigation__left .menu--dropdown > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 10px 32px 10px 16px !important;
        color: #263342 !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    .header .navigation__left .menu--dropdown > li > a:hover,
    .header .navigation__left .menu--dropdown > li:hover > a,
    .header .navigation__left .menu--dropdown > li:focus-within > a {
        color: #111827 !important;
        background: #fff5dc !important;
    }

    .header .navigation__left
    .menu--dropdown > li.has-mega-menu > .sub-toggle {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 32px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    .header .navigation__left
    .menu--dropdown > li.has-mega-menu > .sub-toggle::after {
        content: "›" !important;
        font-size: 21px !important;
        line-height: 1 !important;
        color: #64748b !important;
    }

    .header .navigation__left
    .menu--dropdown > li.has-mega-menu > .mega-menu {
        position: absolute !important;
        top: -9px !important;
        left: calc(100% - 1px) !important;
        right: auto !important;
        width: max-content !important;
        min-width: 530px !important;
        max-width: min(840px, calc(100vw - 340px)) !important;
        height: auto !important;
        max-height: min(76vh, 780px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        border: 1px solid #e6e9ee !important;
        border-radius: 0 8px 8px 0 !important;
        box-shadow: 12px 16px 40px rgba(15, 23, 42, .14) !important;
        z-index: 120 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(6px) !important;
        transition:
            opacity .16s ease,
            transform .16s ease,
            visibility .16s ease !important;
        box-sizing: border-box !important;
    }

    .header .navigation__left
    .menu--dropdown > li.has-mega-menu:hover > .mega-menu,
    .header .navigation__left
    .menu--dropdown > li.has-mega-menu:focus-within > .mega-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .header .navigation__left .mega-menu-wrapper {
        display: grid !important;
        grid-template-columns: repeat(
            3, minmax(0, 1fr)
        ) !important;
        align-items: start !important;
        gap: 22px 26px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 24px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .header .navigation__left .mega-menu__column {
        display: block !important;
        float: none !important;
        flex: none !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .header .navigation__left .mega-menu__column > a {
        display: block !important;
        padding: 5px 0 !important;
        color: #253346 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .header .navigation__left .mega-menu__column h4 {
        margin: 0 0 10px !important;
        padding: 0 0 8px !important;
        border-bottom: 1px solid #e9edf2 !important;
        color: #1f2937 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .header .navigation__left .mega-menu__list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .header .navigation__left .mega-menu__list li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .navigation__left .mega-menu__list a {
        display: block !important;
        width: 100% !important;
        padding: 5px 0 !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .header .navigation__left .mega-menu__column a:hover,
    .header .navigation__left .mega-menu__list a:hover {
        color: #e49a00 !important;
    }
}

@media (min-width: 992px) and (max-width: 1250px) {
    .header .navigation__left .mega-menu-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .header .navigation__left
    .menu--dropdown > li.has-mega-menu > .mega-menu {
        min-width: 400px !important;
        max-width: calc(100vw - 325px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header .navigation__left .mega-menu {
        transition: none !important;
    }
}