/* Мега-меню каталогу: відкривається кнопкою .site-header__catalog */
.mega {
    position: absolute;
    top:      100%;
    right:    0;
    left:     0;
    z-index:  5;
    padding:  8px 0 0;
}

.mega[hidden] { display: none; }

html.is-mega-open {
    overflow:      hidden;
    padding-right: var(--scrollbar-w, 0);
}

.mega__panel {
    display:       flex;
    align-items:   stretch;
    gap:           24px;
    max-height:    var(--mega-max, none);
    overflow:      hidden auto;
    overscroll-behavior: contain;
    border-radius: 24px;
    background:    var(--neutral-0);
    box-shadow:    0 24px 60px rgba(0, 38, 89, .18), 0 0 0 1px rgba(212, 216, 222, .5);
}

.mega__columns {
    display:     flex;
    gap:         32px;
    flex:        1 1 auto;
    min-width:   0;
    padding:     40px 0 40px 40px;
}

.mega__col {
    display:        flex;
    flex:           1 1 0;
    flex-direction: column;
    min-width:      0;
}

.mega__col + .mega__col {
    padding-left: 32px;
    border-left:  1px solid rgba(212, 216, 222, .3);
}

.mega__cat { padding-bottom: 16px; }

.mega__cat + .mega__cat {
    padding-top: 16px;
    border-top:  1px solid rgba(212, 216, 222, .3);
}

.mega__cat:last-child { padding-bottom: 0; }

.mega__head {
    display:         flex;
    align-items:     center;
    gap:             12px;
    min-height:      56px;
    padding:         6px 10px;
    border-radius:   12px;
    color:           var(--neutral-900);
    text-decoration: none;
    transition:      background var(--transition);
}

.mega__head:hover { background: var(--bg-subtle); }

.mega__icon {
    display:         inline-flex;
    flex:            0 0 auto;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          44px;
}

.mega__title {
    font-size:   15px;
    line-height: 20px;
    font-weight: 500;
}

.mega__sub {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         12px 0 0;
    padding:        0 0 0 56px;
    list-style:     none;
}

.mega__link {
    font-size:       14px;
    line-height:     18px;
    color:           var(--text-secondary);
    text-decoration: none;
}

.mega__link:hover { color: var(--blue-500); }

.mega__item--strong .mega__link {
    font-weight: 600;
    color:       var(--neutral-900);
}

.mega__item--strong .mega__link:hover { color: var(--blue-500); }

.mega__item--deep { padding-left: 16px; }

.mega__all {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    margin:          12px 0 0 56px;
    font-size:       14px;
    line-height:     20px;
    font-weight:     600;
    color:           var(--neutral-900);
    text-decoration: none;
}

.mega__all:hover { color: var(--blue-500); }

.mega__link:focus-visible,
.mega__all:focus-visible,
.mega__head:focus-visible {
    outline:        2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Промо-картка */
.mega__promo {
    position:       relative;
    display:        flex;
    flex:           0 0 324px;
    flex-direction: column;
    justify-content: space-between;
    gap:            24px;
    margin:         24px 24px 24px 0;
    padding:        56px 28px 28px;
    overflow:       hidden;
    border-radius:  24px;
    color:          var(--text-inverse);
    background:     #0b1220;
}

.mega__promo-image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.mega__promo::after {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(8, 13, 23, .72) 0%, rgba(8, 13, 23, .42) 35%, rgba(5, 8, 15, .8) 100%);
    content:    '';
}

.mega__promo-body,
.mega__promo-btn {
    position: relative;
    z-index:  1;
}

.mega__promo-body {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.mega__promo-body .icon { color: var(--orange-500); }

.mega__promo-title {
    font-size:   24px;
    line-height: 28px;
    font-weight: 600;
}

.mega__promo-text {
    font-size:   17px;
    line-height: 22px;
    color:       rgba(255, 255, 255, .88);
}

.mega__promo-btn {
    width:        100%;
    height:       44px;
    font-size:    16px;
}

@media (max-width: 1279px) {
    .mega__columns { padding: 32px 0 32px 32px; gap: 24px; }

    .mega__col + .mega__col { padding-left: 24px; }

    .mega__promo { flex-basis: 260px; }
}

/* Планшет і мобільний: панель — вертикальний список на всю ширину, без промо-картки */
@media (max-width: 1023px) {
    .mega {
        position:   fixed;
        top:        var(--mega-top, 140px);
        bottom:     0;
        padding:    0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        background: var(--neutral-0);
        box-shadow: 0 -1px 0 rgba(212, 216, 222, .5);
    }

    .mega .container { padding: 0; }

    .mega__panel {
        max-height:    none;
        overflow:      visible;
        border-radius: 0;
        box-shadow:    none;
        animation:     none;
    }

    .mega__columns {
        flex-direction: column;
        gap:            0;
        padding:        8px 20px 32px;
    }

    .mega__head { min-height: 52px; }

    .mega__sub { margin-top: 4px; padding-left: 50px; }

    .mega__all { margin-left: 50px; }

    .mega__col + .mega__col {
        padding-left: 0;
        border-left:  0;
    }

    .mega__promo { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .mega:not([hidden]) .mega__panel { animation: mega-in .18s ease-out; }
}

@keyframes mega-in {
    from { opacity: 0; transform: translateY(-6px); }
}

/* Випадне мега-меню пункту «Рішення» (у верхньому меню) */
.nav-primary__list > li.has-mega-dropdown { position: static; }

.site-header__nav .container { position: relative; }

.nav-primary__list > li.has-mega-dropdown > .sub-menu { display: none !important; }

.mega-sol {
    position:   absolute;
    top:        100%;
    right:      20px;
    left:       20px;
    z-index:    var(--z-dropdown);
    display:    none;
    padding-top: 8px;
}

.has-mega-dropdown:hover > .mega-sol,
.has-mega-dropdown:focus-within > .mega-sol { display: block; }

/* Невидимий місток між пунктом і панеллю */
.mega-sol::before {
    position: absolute;
    top:      -16px;
    right:    0;
    left:     0;
    height:   24px;
    content:  '';
}

.mega-sol__panel {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    padding:        28px 32px 24px;
    border:         1px solid var(--neutral-100);
    border-radius:  20px;
    background:     var(--neutral-0);
    box-shadow:     0 16px 40px rgba(0, 18, 38, .16);
}

.mega-sol__columns { display: flex; }

.mega-sol__col {
    flex:      1 1 0;
    min-width: 0;
    padding:   0 32px;
}

.mega-sol__col:first-child { padding-left: 0; }
.mega-sol__col:last-child  { padding-right: 0; }

.mega-sol__col + .mega-sol__col { border-left: 1px solid var(--neutral-100); }

.mega-sol__head {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-bottom: 18px;
}

.mega-sol__icon {
    display:         flex;
    flex:            0 0 auto;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      var(--neutral-50);
}

.mega-sol__title {
    margin:         0;
    font-size:      13px;
    line-height:    normal;
    font-weight:    600;
    letter-spacing: .06em;
    color:          var(--neutral-900);
}

.mega-sol__list {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.nav-primary__list .mega-sol__link {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0;
    border-radius:  0;
    color:          var(--neutral-900);
    background:     none;
    text-decoration: none;
}

.mega-sol__name { font-size: 15px; line-height: 22px; }

.mega-sol__text { font-size: 13px; line-height: 18px; color: var(--neutral-500); }

.nav-primary__list .mega-sol__link:hover { background: none; }
.nav-primary__list .mega-sol__link:hover .mega-sol__name { color: var(--blue-500); }

.mega-sol__foot {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding-top:     18px;
    border-top:      1px solid var(--neutral-100);
}

.mega-sol__note { margin: 0; font-size: 14px; color: var(--neutral-500); }

.mega-sol__btn {
    padding:    0;
    border:     0;
    font:       400 15px/22px var(--font-body);
    color:      var(--neutral-900);
    background: none;
    cursor:     pointer;
}

.mega-sol__btn:hover { color: var(--blue-500); }

.mega-sol__link:focus-visible,
.mega-sol__btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (max-width: 1279px) {
    .mega-sol__col { padding: 0 20px; }
}

/* Планшет і мобільний: звичайний вкладений список, без мега-панелі */
@media (max-width: 1023px) {
    .mega-sol { display: none !important; }

    .nav-primary__list > li.has-mega-dropdown > .sub-menu { display: block !important; }
}