/* =========================================================
   PsarasBooks MegaMenu
   Scope: Magento category menu items only (.category-item)
   Admin: Stores > Configuration > Catalog > MegaMenu
   ========================================================= */

@media (min-width: 769px) {
    .navigation .level0.category-item.psaras-mega-root {
        --psaras-mega-level2-columns: 1;
        --psaras-mega-level3-columns: 1;
        --psaras-mega-level2-col-width: 285px;
        --psaras-mega-level3-col-width: 215px;
        position: relative !important;
    }

    .navigation .level0.category-item.psaras-mega-root > a.level-top,
    .navigation .level0.category-item.psaras-mega-root > a.level-top > span {
        font-weight: 700 !important;
    }

    .navigation .level0.category-item.psaras-mega-root > a.level-top .ui-menu-icon,
    .navigation .level0.category-item.psaras-mega-root > a.level-top:after {
        display: inline-block !important;
    }

    /* LEVEL 2 dropdown panel. Default CLOSED. Opens only on hover/focus/active. */
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail {
        box-sizing: border-box !important;
        display: none !important;
        width: calc(var(--psaras-mega-level2-columns) * var(--psaras-mega-level2-col-width)) !important;
        min-width: calc(var(--psaras-mega-level2-columns) * var(--psaras-mega-level2-col-width)) !important;
        max-width: calc(100vw - 40px) !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        padding: 8px 0 !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.13) !important;
        z-index: 999 !important;
    }



    .navigation .level0.category-item.psaras-mega-root:hover > .submenu.psaras-mega-rail,
    .navigation .level0.category-item.psaras-mega-root.ui-state-active > .submenu.psaras-mega-rail,
    .navigation .level0.category-item.psaras-mega-root._active > .submenu.psaras-mega-rail,
    .navigation .level0.category-item.psaras-mega-root:focus-within > .submenu.psaras-mega-rail {
        display: grid !important;
        grid-template-columns: repeat(var(--psaras-mega-level2-columns), minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: start !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail.psaras-mega-many,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail.psaras-mega-very-many {
        max-height: 72vh !important;
        overflow-y: auto !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item {
        position: relative !important;
        float: none !important;
        clear: none !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 9px 16px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item:hover > a,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.ui-state-active > a,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item._active > a,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-js-active > a {
        background: #f7f7f7 !important;
        color: #006bb4 !important;
        font-weight: 400 !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet > a:after {
        content: '›' !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin-left: 12px !important;
        color: #777 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item > a .ui-menu-icon {
        display: none !important;
    }

    /* LEVEL 3 dropdown/sheet. Default 1 column; admin controls columns. */
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet > ul.submenu.psaras-mega-sheet {
        box-sizing: border-box !important;
        position: fixed !important;
        top: var(--psaras-mega-sheet-top, 160px) !important;
        left: var(--psaras-mega-sheet-left, 560px) !important;
        width: calc(var(--psaras-mega-level3-columns) * var(--psaras-mega-level3-col-width) + 44px) !important;
        min-width: calc(var(--psaras-mega-level3-columns) * var(--psaras-mega-level3-col-width) + 44px) !important;
        max-width: calc(100vw - 40px) !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.13) !important;
        padding: 18px 22px !important;
        z-index: 10050 !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none !important;
    }

    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet:hover > ul.submenu.psaras-mega-sheet,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet.ui-state-active > ul.submenu.psaras-mega-sheet,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet._active > ul.submenu.psaras-mega-sheet,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet.psaras-mega-js-active > ul.submenu.psaras-mega-sheet,
    .navigation .level0.category-item.psaras-mega-root > .submenu.psaras-mega-rail > li.category-item.psaras-mega-has-sheet:focus-within > ul.submenu.psaras-mega-sheet {
        display: grid !important;
        grid-template-columns: repeat(var(--psaras-mega-level3-columns), minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        column-gap: 24px !important;
        row-gap: 5px !important;
        align-items: start !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet.psaras-mega-many,
    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet.psaras-mega-very-many {
        max-height: 72vh !important;
        overflow-y: auto !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet > li.psaras-mega-sheet-heading {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 0 0 12px 0 !important;
        border-bottom: 1px solid #eee !important;
        list-style: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet > li.psaras-mega-sheet-heading > span {
        display: block !important;
        color: #222 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item.psaras-mega-sheet-item,
    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item.level2,
    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item {
        position: static !important;
        float: none !important;
        clear: none !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item > a,
    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item > a > span {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 5px 0 !important;
        line-height: 1.28 !important;
        white-space: normal !important;
        color: #444 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.submenu.psaras-mega-sheet > li.category-item > a:hover {
        color: #006bb4 !important;
        text-decoration: underline !important;
        background: transparent !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet li.category-item > a:after,
    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet li.category-item > a .ui-menu-icon {
        content: none !important;
        display: none !important;
    }

    .navigation .level0.category-item.psaras-mega-root ul.psaras-mega-sheet li.category-item > ul.submenu {
        display: none !important;
    }

    .navigation .submenu .category-item > a,
    .navigation .submenu .category-item > a > span {
        font-weight: 400 !important;
    }
}