/*
 * INATECH – RAJA style desktop menu
 * ST Mega Menu / PrestaShop 8.2
 *
 * IMPORTANT:
 * - Desktop only (>= 992px)
 * - Primary column is EXACTLY the same width as "CATEGORII DE PRODUSE"
 * - No grey page overlay
 * - Secondary and tertiary panels stay white to the bottom
 * - Mobile/Panda menu is untouched
 */

@media (min-width: 992px) {

    /* =========================================================
       1. VARIABLES
       Keep them scoped to the menu, not on :root.
       ========================================================= */
    #st_mega_menu_wrap {
        --st-raja-blue: #1d92eb;
        --st-raja-navy: #061a38;
        --st-raja-text: #17243a;
        --st-raja-muted: #64748b;
        --st-raja-line: #e7edf4;
        --st-raja-hover: #f1f7fd;

        /* Button + first column use the SAME value. */
        --st-raja-primary-width: 390px;

        --st-raja-secondary-width: 390px;
        --st-raja-tertiary-width: 330px;

        --st-raja-panel-height: min(690px, calc(100vh - 165px));

        overflow: visible !important;
    }


    /* =========================================================
       2. MAIN MENU / TRIGGER
       ========================================================= */
    #st_mega_menu_wrap > .st_mega_menu,
    #st_mega_menu_wrap .st_raja_menu_trigger {
        overflow: visible !important;
    }

    /*
     * This LI is the reference for both the blue button
     * and the dropdown underneath it.
     */
    #st_mega_menu_wrap #st_menu_0.st_raja_menu_trigger {
        position: relative !important;

        width: var(--st-raja-primary-width) !important;
        min-width: var(--st-raja-primary-width) !important;
        max-width: var(--st-raja-primary-width) !important;

        flex: 0 0 var(--st-raja-primary-width) !important;

        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 10031 !important;
    }

    /*
     * Blue "CATEGORII DE PRODUSE" button.
     * It fills the LI above, therefore it is also exactly 390px.
     */
    #st_mega_menu_wrap #st_ma_0.st_raja_trigger_link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 18px !important;

        box-sizing: border-box !important;
    }
    
    #st_mega_menu_wrap #st_ma_0.st_raja_trigger_link:hover,
#st_mega_menu_wrap #st_ma_0.st_raja_trigger_link:focus,
#st_mega_menu_wrap #st_ma_0.st_raja_trigger_link:active {
    margin: 0 !important;
    padding: 0 18px !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    transform: none !important;
    left: 0 !important;
}

#st_mega_menu_wrap #st_ma_0.st_raja_trigger_link span,
#st_mega_menu_wrap #st_ma_0.st_raja_trigger_link i {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

    #st_mega_menu_wrap .st_raja_close_icon {
        display: none;
    }

    #st_mega_menu_wrap .st_raja_menu_trigger.st-raja-open .st_raja_open_icon {
        display: none;
    }

    #st_mega_menu_wrap .st_raja_menu_trigger.st-raja-open .st_raja_close_icon {
        display: inline-block;
    }


    /* =========================================================
       3. ROOT DROPDOWN
       Its left edge starts exactly under the blue button.
       ========================================================= */
    #st_mega_menu_wrap #st_menu_0 > .st_raja_menu_dropdown {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        display: none !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;

        width: var(--st-raja-primary-width) !important;

        height: var(--st-raja-panel-height) !important;
        min-height: 560px !important;
        max-height: calc(100vh - 120px) !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 0 4px 4px !important;

        background: #fff !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        z-index: 10032 !important;

        overflow: visible !important;
        box-sizing: border-box !important;

        transition: width 0.12s ease !important;
    }

    #st_mega_menu_wrap #st_menu_0.st-raja-open > .st_raja_menu_dropdown {
        display: flex !important;
    }

    /* First + second column. */
    #st_mega_menu_wrap #st_menu_0 > .st_raja_menu_dropdown.st-raja-level-2 {
        width: calc(
            var(--st-raja-primary-width) +
            var(--st-raja-secondary-width)
        ) !important;
    }

    /* First + second + third column. */
    #st_mega_menu_wrap #st_menu_0 > .st_raja_menu_dropdown.st-raja-level-3 {
        width: calc(
            var(--st-raja-primary-width) +
            var(--st-raja-secondary-width) +
            var(--st-raja-tertiary-width)
        ) !important;
    }


    /* =========================================================
       4. THREE COLUMNS
       flex-shrink: 0 is important. It prevents the first column
       from becoming narrower than the blue button.
       ========================================================= */
    #st_mega_menu_wrap .st_raja_primary_panel,
    #st_mega_menu_wrap .st_raja_secondary_shell,
    #st_mega_menu_wrap .st_raja_tertiary_shell {
        position: relative;

        height: 100% !important;
        min-height: 100% !important;

        align-self: stretch !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        box-sizing: border-box !important;
    }

    /* PRIMARY = EXACTLY 390px */
    #st_mega_menu_wrap .st_raja_primary_panel {
        width: var(--st-raja-primary-width) !important;
        min-width: var(--st-raja-primary-width) !important;
        max-width: var(--st-raja-primary-width) !important;

        flex: 0 0 var(--st-raja-primary-width) !important;

        border-right: 1px solid var(--st-raja-line) !important;

        overflow: hidden !important;
    }

    #st_mega_menu_wrap .st_raja_secondary_shell {
        display: none;

        width: var(--st-raja-secondary-width) !important;
        min-width: var(--st-raja-secondary-width) !important;
        max-width: var(--st-raja-secondary-width) !important;

        flex: 0 0 var(--st-raja-secondary-width) !important;

        border-right: 1px solid var(--st-raja-line) !important;

        overflow: hidden !important;
    }

    #st_mega_menu_wrap .st_raja_tertiary_shell {
        display: none;

        width: var(--st-raja-tertiary-width) !important;
        min-width: var(--st-raja-tertiary-width) !important;
        max-width: var(--st-raja-tertiary-width) !important;

        flex: 0 0 var(--st-raja-tertiary-width) !important;

        overflow: hidden !important;
    }

    #st_mega_menu_wrap
    .st_raja_menu_dropdown.st-raja-level-2
    .st_raja_secondary_shell,

    #st_mega_menu_wrap
    .st_raja_menu_dropdown.st-raja-level-3
    .st_raja_secondary_shell,

    #st_mega_menu_wrap
    .st_raja_menu_dropdown.st-raja-level-3
    .st_raja_tertiary_shell {
        display: block !important;
    }


    /* =========================================================
       5. SCROLL AREAS
       ========================================================= */
    #st_mega_menu_wrap .st_raja_primary_scroll,
    #st_mega_menu_wrap .st_raja_secondary_scroll,
    #st_mega_menu_wrap .st_raja_tertiary_scroll {
        overflow-y: auto !important;
        overflow-x: hidden !important;

        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;

        box-sizing: border-box !important;
    }

    #st_mega_menu_wrap .st_raja_primary_scroll::-webkit-scrollbar,
    #st_mega_menu_wrap .st_raja_secondary_scroll::-webkit-scrollbar,
    #st_mega_menu_wrap .st_raja_tertiary_scroll::-webkit-scrollbar {
        width: 6px;
    }

    #st_mega_menu_wrap .st_raja_primary_scroll::-webkit-scrollbar-thumb,
    #st_mega_menu_wrap .st_raja_secondary_scroll::-webkit-scrollbar-thumb,
    #st_mega_menu_wrap .st_raja_tertiary_scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    #st_mega_menu_wrap .st_raja_primary_scroll {
        width: 100% !important;
        height: 100% !important;
        padding: 5px 0 8px !important;
    }


    /* =========================================================
       6. PRIMARY CATEGORY ROWS
       ========================================================= */
    #st_mega_menu_wrap .st_raja_primary_item {
        position: relative;

        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 18px !important;
        align-items: center !important;
        column-gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;

        min-height: 40px !important;

        margin: 0 !important;
        padding: 5px 12px !important;

        color: #283548 !important;
        background: #fff !important;

        border: 0 !important;
        border-left: 3px solid transparent !important;

        line-height: 1.18 !important;
        text-decoration: none !important;

        box-sizing: border-box !important;

        transition:
            background-color 0.1s ease,
            color 0.1s ease,
            border-color 0.1s ease !important;
    }

    #st_mega_menu_wrap .st_raja_primary_item:hover,
    #st_mega_menu_wrap .st_raja_primary_item.is-active {
        color: var(--st-raja-blue) !important;
        background: var(--st-raja-hover) !important;
        border-left-color: var(--st-raja-blue) !important;
    }

    #st_mega_menu_wrap .st_raja_primary_icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        height: 32px !important;

        color: #66758a !important;
        font-size: 18px !important;
    }

    #st_mega_menu_wrap .st_raja_primary_icon img {
        display: block !important;
        position: static !important;

        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }

    #st_mega_menu_wrap .st_raja_primary_name {
        display: block !important;
        min-width: 0 !important;

        color: inherit !important;

        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        overflow-wrap: anywhere;
    }

    #st_mega_menu_wrap .st_raja_chevron {
    justify-self: end !important;

    color: #637083 !important;

    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

    #st_mega_menu_wrap .st_raja_primary_item:hover .st_raja_chevron,
    #st_mega_menu_wrap .st_raja_primary_item.is-active .st_raja_chevron,
    #st_mega_menu_wrap .st_raja_secondary_item:hover .st_raja_chevron,
    #st_mega_menu_wrap .st_raja_secondary_item.is-active .st_raja_chevron {
        color: var(--st-raja-blue) !important;
    }


    /* =========================================================
       7. SECONDARY / TERTIARY PANELS
       White background continues to the bottom.
       ========================================================= */
    #st_mega_menu_wrap .st_raja_secondary_panel,
    #st_mega_menu_wrap .st_raja_tertiary_panel {
        display: none;

        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        box-sizing: border-box !important;
    }

    #st_mega_menu_wrap .st_raja_secondary_panel.is-active,
    #st_mega_menu_wrap .st_raja_tertiary_panel.is-active {
        display: flex !important;
        flex-direction: column !important;
    }


    /* =========================================================
       8. PANEL HEADERS
       ========================================================= */
    #st_mega_menu_wrap .st_raja_panel_header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 12px 16px 10px 18px !important;

        background: #fff !important;
        border-bottom: 1px solid var(--st-raja-line) !important;

        box-sizing: border-box !important;
    }

    #st_mega_menu_wrap .st_raja_panel_title {
        min-width: 0 !important;

        color: #141c2b !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;

        text-decoration: none !important;
    }

    #st_mega_menu_wrap .st_raja_view_all {
        flex: 0 0 auto !important;

        color: var(--st-raja-blue) !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;

        text-decoration: none !important;
    }

    #st_mega_menu_wrap .st_raja_view_all i {
        margin-left: 2px !important;
        font-size: 9px !important;
    }


    /* =========================================================
       9. SECONDARY ITEMS
       ========================================================= */
    #st_mega_menu_wrap .st_raja_secondary_scroll,
    #st_mega_menu_wrap .st_raja_tertiary_scroll {
        flex: 1 1 auto !important;

        width: 100% !important;
        min-height: 0 !important;

        padding: 6px 8px 16px !important;

        background: #fff !important;
    }

    #st_mega_menu_wrap .st_raja_secondary_item {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 16px !important;
        align-items: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 6px 8px 6px 10px !important;

        color: #263447 !important;
        background: #fff !important;

        border: 0 !important;
        border-radius: 3px !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    #st_mega_menu_wrap .st_raja_secondary_item:hover,
    #st_mega_menu_wrap .st_raja_secondary_item.is-active {
        color: #182f52 !important;
        background: var(--st-raja-hover) !important;
    }

    #st_mega_menu_wrap .st_raja_group_icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;

        color: #b57a2c !important;
        font-size: 18px !important;
    }
     
     #st_mega_menu_wrap .st_raja_group_icon img {
    display: block !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(1.08);
    transform-origin: center;
}

    #st_mega_menu_wrap .st_raja_group_name {
        min-width: 0 !important;

        color: inherit !important;

        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.22 !important;

        overflow-wrap: anywhere;
    }


    /* =========================================================
       10. TERTIARY ITEMS
       ========================================================= */
    #st_mega_menu_wrap .st_raja_tertiary_header {
        justify-content: flex-start !important;
        min-height: 58px !important;
        padding-left: 18px !important;
    }

   #st_mega_menu_wrap .st_raja_tertiary_item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;

        width: calc(100% - 16px) !important;
        min-height: 44px !important;

        margin: 0 8px !important;
        padding: 8px !important;

        color: #293549 !important;
        background: #fff !important;

        border: 0 !important;
        border-bottom: 1px solid var(--st-raja-line) !important;

        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.22 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;

        transition:
            color 0.1s ease,
            background-color 0.1s ease !important;
    }
    
    #st_mega_menu_wrap .st_raja_tertiary_icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
}

 #st_mega_menu_wrap .st_raja_tertiary_icon img {
    display: block !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(1.12);
    transform-origin: center;
}

#st_mega_menu_wrap .st_raja_tertiary_name {
    min-width: 0 !important;
}

    #st_mega_menu_wrap .st_raja_tertiary_item:hover {
        color: var(--st-raja-blue) !important;
        background: #f8fbff !important;
    }


    /* =========================================================
       11. NO PAGE OVERLAY
       Do not let an invisible layer intercept the mouse.
       ========================================================= */
    .st_raja_page_backdrop,
    .st_raja_page_backdrop.is-visible {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #st_mega_menu_wrap .st_raja_menu_trigger,
    #st_mega_menu_wrap .st_raja_menu_dropdown,
    #st_mega_menu_wrap .st_raja_primary_panel,
    #st_mega_menu_wrap .st_raja_secondary_shell,
    #st_mega_menu_wrap .st_raja_tertiary_shell,
    #st_mega_menu_wrap .st_raja_primary_item,
    #st_mega_menu_wrap .st_raja_secondary_item,
    #st_mega_menu_wrap .st_raja_tertiary_item {
        pointer-events: auto !important;
    }


    /* =========================================================
       12. SMALLER DESKTOPS
       IMPORTANT: the first column remains 390px so it ALWAYS
       matches the blue button. Only columns 2 and 3 shrink.
       ========================================================= */
    @media (max-width: 1199px) {
        #st_mega_menu_wrap {
            --st-raja-secondary-width: 350px;
            --st-raja-tertiary-width: 300px;
        }

        #st_mega_menu_wrap .st_raja_primary_name,
        #st_mega_menu_wrap .st_raja_group_name {
            font-size: 12px !important;
        }
    }
    
    
     /* =========================================================
   13. SOCIAL ICONS + MAIN MENU DESKTOP
   ========================================================= */

#st_mega_menu_wrap {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
}

/* lista principala ocupa toata bara */
#st_mega_menu_wrap > .st_mega_menu {
    width: 100% !important;
    max-width: none !important;
    padding-right: 210px !important;
    box-sizing: border-box !important;
}

/* iconurile sociale */
#st_mega_menu_wrap .st_menu_socials {
    position: absolute !important;

    top: 0 !important;
    right: 5px !important;

    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 20 !important;
}

#st_mega_menu_wrap .st_menu_social_link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 17px !important;
    line-height: 1 !important;

    text-decoration: none !important;

    transition: opacity .15s ease, transform .15s ease !important;
}

#st_mega_menu_wrap .st_menu_social_link svg {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    fill: currentColor !important;

    margin: 0 !important;
    padding: 0 !important;
}

#st_mega_menu_wrap .st_menu_social_link:hover {
    color: #fff !important;
    background: transparent !important;
    opacity: .75;
    transform: translateY(-1px);
}

#st_mega_menu_wrap .st_menu_social_link i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: 1 !important;
}

/* meniul principal: text vizibil la hover */
#st_mega_menu_wrap > .st_mega_menu > li:not(#st_menu_0) > a.ma_level_0:hover,
#st_mega_menu_wrap > .st_mega_menu > li:not(#st_menu_0):hover > a.ma_level_0 {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 991.98px) {

    #st_mega_menu_wrap .st_menu_socials {
        display: none !important;
    }

}
}