@media (min-width: 981px) {
    :root {
        --pc-header-h:var(--nav-offset);
    }
    .pc-mega__right-link:hover {
        color: var(--primary);
    }
    .pc-mega:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 11.25rem 11.25rem;
        mix-blend-mode: multiply;
        opacity: 0.35;
        z-index: 0;
    }
    .pc-mega {
        background: rgba(255, 255, 255, 0.55) !important;
        backdrop-filter: blur(1.25rem) saturate(1.6);
        -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
        border: 0.0625rem solid rgba(255,255,255,0.35);
        box-shadow: 0 1.25rem 3rem rgba(0,0,0,0.25);
        border-radius: var(--fz20);
    }
    .pc-mega:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.00) 55% );
        opacity: 0.55;
        pointer-events: none;
        z-index: 0;
    }
    /* прячем обычный dropdown у пункта mega */
    .main-nav__menu > li.js-mega > .sub-menu{
        display: none !important;
    }

    /* Backdrop (прозрачный, чтобы закрывать кликом вне) */
    .pc-mega-backdrop{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--pc-header-h); /* ВАЖНО: не закрываем хедер */
        background: transparent;
        z-index: 998;
        display: none;
    }
    .pc-mega-backdrop.is-open{ display:block; }

    /* Сам mega */
    .pc-mega{
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--pc-header-h) + var(--nav-offset) + 1rem);
        z-index: 999;
        display: none;

        background: #fff;
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 20px 60px rgba(0,0,0,.12);
    }
    .pc-mega.is-open{ display:block; }

    .pc-mega__inner{
        width: min(1280px, calc(100vw - 48px));
        margin: 0 auto;
        padding: 44px 0 70px;
        position: relative;
    }

    .pc-mega__close{
        position: absolute;
        top: 18px;
        right: 0;

        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        cursor: pointer;

        display:flex;
        align-items:center;
        justify-content:center;

        color: rgba(0,0,0,.55);
        font-size: 24px;
        line-height: 1;
    }
    .pc-mega__close:hover{
        background: rgba(0,0,0,.06);
        color: rgba(0,0,0,.8);
    }

    .pc-mega__grid{
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 70px;
        align-items: start;
    }

    /* Заголовок слева (как "Продукция") */
    .pc-mega__title{
        font-weight: 600;
        font-size: 18px;
        color: #1b1b1b;
        margin: 0 0 18px;
    }

    /* Левая колонка */
    .pc-mega__left{
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid rgba(0,0,0,.08);
    }

    .pc-mega__left-item{
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .pc-mega__left-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;

        padding: 14px 0;
        text-decoration: none;

        color: rgba(0,0,0,.75);
        font-size: 16px;
    }

    .pc-mega__left-link:hover{
        color: #1d5cff;
    }

    /* стрелка ">" справа */
    .pc-mega__left-link::after{
        content:"";
        width: 18px;
        height: 18px;
        opacity: .55;
        flex: 0 0 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6-1.41-1.41L13.17 12 8.59 7.41z'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6-1.41-1.41L13.17 12 8.59 7.41z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .pc-mega__left-item.is-active .pc-mega__left-link{
        color: #1d5cff;
    }

    /* Правая колонка */
    .pc-mega__right-title{
        font-weight: 600;
        font-size: 16px;
        color: #1b1b1b;
        margin: 0 0 14px;
    }

    .pc-mega__right{
        position: relative;
        padding-left: 70px;
    }

    /* вертикальная линия как на примере */
    .pc-mega__right::before{
        content:"";
        position:absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 1px;
        background: rgba(0,0,0,.08);
    }

    .pc-mega__right-list{
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-auto-rows: min-content;
        row-gap: 10px;
    }

    .pc-mega__right-list a{
        text-decoration: none;
        color: rgba(0,0,0,.7);
        font-size: 15px;
    }

    .pc-mega__right-list a:hover{
        color: #1d5cff;
    }

    /* Лёгкий водяной знак справа (опционально, как на 2 скрине) */
    .pc-mega__watermark{
        position: absolute;
        right: -40px;
        bottom: -40px;
        font-size: 260px;
        font-weight: 700;
        color: rgba(0,0,0,.04);
        pointer-events: none;
        user-select: none;
    }
}
/* =========================
   Mobile menu: iOS accordion
   ========================= */

@media (max-width: 980px){

    .mobile-menu__nav ul{
        list-style:none;
        margin:0;
        padding:0;
    }

    /* карточки пунктов */
    .mobile-menu__nav > ul > li{
        position: relative;
    }



    .mobile-menu__nav a:active{
        transform: translateY(1px);
    }

    /* если есть подменю — оставим место под кнопку-стрелку */
    .mobile-menu__nav li.menu-item-has-children > a{
        padding-right: 56px;
    }

    /* кнопка-стрелка */
    .mobile-menu__nav .mbl-subtoggle{
        position:absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 100%;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.06);
        display:flex;
        align-items:center;
        justify-content:center;
        z-index: 222;
        cursor:pointer;
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        backdrop-filter: blur(14px) saturate(170%);
    }

    .mobile-menu__nav .mbl-subtoggle svg{
        width: 18px;
        height: 18px;
        fill: #fff;
        opacity: .85;
        transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-menu__nav li.is-open > .mbl-subtoggle svg{
        transform: rotate(180deg);
        opacity: 1;
    }

    /* вложенные уровни — скрыты по умолчанию */
    .mobile-menu__nav .sub-menu{
        display:none;
        margin-top: 8px;
        padding-left: 14px; /* “внутрь” */
    }

    .mobile-menu__nav li.is-open > .sub-menu{
        display:block;
    }

    /* ссылки внутри подменю — компактнее */
    .mobile-menu__nav .sub-menu > li{
        position: relative;
        margin-bottom: 8px;
    }

    .mobile-menu__nav .sub-menu a{
        font-size: 14px;
        padding: 12px 14px;
        border-radius: 16px;

        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.10);
    }

    /* третий уровень еще чуть глубже */
    .mobile-menu__nav .sub-menu .sub-menu{
        padding-left: 12px;
    }
}
@media (min-width: 981px){
    .pc-mega__promo{
        position: absolute;
        right: 28px;
        top: 36px;
        bottom: 36px;
        width: min(420px, 34vw);
        pointer-events: none; /* чтобы не мешало ховеру */
    }

    /* большой watermark */
    .pc-mega__wm{
        position: absolute;
        right: 0;
        top: 0;
        font-size: 88px;
        font-weight: 700;
        letter-spacing: -1px;
        color: rgba(0,0,0,.08);
        user-select: none;
        white-space: nowrap;
        filter: blur(.2px);
    }

    /* карточка */
    .pc-mega__card{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 18px 18px;
        border-radius: 18px;

        background: rgba(255,255,255,.55);
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);

        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
        top: 50%;
        transform: translate(0,-50%);
        display: flex;
        flex-direction: column;
        height: max-content;
        pointer-events: auto; /* кнопки кликабельны */
    }

    .pc-mega__card-title{
        font-weight: 700;
        font-size: 18px;
        color: rgba(0,0,0,.78);
        margin-bottom: 6px;
    }

    .pc-mega__card-text{
        font-size: 14px;
        line-height: 1.35;
        color: rgba(0,0,0,.62);
        margin-bottom: 14px;
    }

    .pc-mega__card-actions{
        display:flex;
        align-items:center;
        gap: 12px;
    }

    .pc-mega__card-btn{
        border: 0;
        cursor: pointer;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(29,92,255,.92);
        color: #fff;
        font-weight: 600;
        font-size: .8rem;
    }

    .pc-mega__card-btn:hover{
        transform: translateY(-1px);
    }

    .pc-mega__card-link{
        color: rgba(0,0,0,.7);
        text-decoration: none;
        font-weight: 600;
        font-size: .8rem;
    }
}


.pc-mega__title {
    font-size: var(--fz20);
    transition-duration: .3s;
}
.pc-mega__left-item .pc-mega__left-link {
    font-size: var(--fz18);
    transition-duration: .3s;
}
.pc-mega__right-title {
    font-size: var(--fz16);
}
.pc-mega__right-list a {
    font-size: .9rem;
}