/* ===== /wwwroot/css/wenrexa-shell.css ===== */
/* Макет, топбар, мега‑меню (без кастомного JS), rails и служебные блоки */

/* ——— Контейнер, ограничивающий ширину макета ——— */
.shell-max {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, var(--shell-side-pad));
}

/* ——— Отступ контента от фиксированной шапки ——— */
.with-topbar-offset {
    padding-top: calc(var(--topbar-h) + var(--topbar-gap));
}

/* ——— Топбар: высота и «стекло» ——— */
.navbar.fixed-top {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    font-size: 11pt;
    font-weight: 600;
}

.navbar.wen-top {
    backdrop-filter: saturate(1.05) blur(6px);
    -webkit-backdrop-filter: saturate(1.05) blur(6px);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
}

    .navbar.wen-top .navbar-brand-badge {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, var(--brand-accent), #2bd5a2);
        color: #0b1720;
        font-weight: 900;
        border-radius: .6rem;
    }

    .navbar.wen-top .nav-link {
        color: #fff;
        font-weight: 500;
        transition: color .15s ease, opacity .15s;
    }

        .navbar.wen-top .nav-link:hover,
        .navbar.wen-top .nav-link.show,
        .navbar.wen-top .nav-link.active {
            color: #fff;
        }

/* ——— Обычные выпадающие меню (не мега‑меню) ——— */
.navbar .dropdown-menu:not(.dropdown-mega) {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    margin-top: .25rem;
    background: var(--bs-dark-bg-subtle, #2a2a2a);
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,.1);
}

/* ——— Центральный поиск в топбаре ——— */
.top-search {
    flex: 1 1 auto;
    min-width: 240px;
    display: flex;
    justify-content: center;
}

    .top-search .search-wrap {
        width: min(100%, var(--search-max-w));
    }

    .top-search .form-control {
        background: rgba(10,10,10,.78) !important;
        color: #fff;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 1rem !important;
        font-size: 10pt;
    }

        .top-search .form-control::placeholder {
            color: rgba(255,255,255,.6);
        }

    .top-search .dropdown-menu {
        width: 100%;
        max-height: min(60vh,520px);
        overflow: auto;
        background: var(--panel-bg);
        border: 1px solid var(--bs-border-color);
        border-top: none;
        border-radius: 0 0 .75rem .75rem;
    }

/* ——— Богатые пункты в дропдаунах (аккаунт/язык) ——— */
.menu-rich .dropdown-item {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: .5rem;
    align-items: center;
    padding: .5rem .75rem;
    white-space: normal;
}

    .menu-rich .dropdown-item .bi {
        font-size: 1.1rem;
        opacity: .85;
    }

    .menu-rich .dropdown-item small {
        display: block;
        color: var(--bs-secondary-color);
        line-height: 1.1;
    }

/* ——— «Липкие» рельсы ——— */
.sticky-rail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--topbar-gap));
    max-height: calc(100vh - var(--topbar-h) - (var(--topbar-gap) * 2));
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    padding-inline-end: var(--rail-scroll-pad, 2.5rem);
    scrollbar-width: thin; /* Firefox */
}

    .sticky-rail::-webkit-scrollbar {
        width: 20px;
    }
/* Chromium/Safari */

/* ——— Левая вертикальная икон‑навигация ——— */
.left-rail {
    flex: 0 0 var(--stack-rail-w);
    max-width: var(--stack-rail-w);
    container-type: inline-size;
}

    .left-rail .vnav {
        gap: var(--vnav-gap);
    }

        .left-rail .vnav .nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            margin: 0 auto;
            padding: .8rem .25rem;
            border-radius: var(--vnav-radius);
            color: var(--bs-light);
            text-align: center;
            background: rgba(255,255,255,.03);
            border: 1px solid rgba(255,255,255,.06);
            transition: transform .12s ease, border-color .12s ease, background .12s ease;
        }

            .left-rail .vnav .nav-link .bi {
                font-size: 1.25rem;
                line-height: 1;
                display: block;
            }

            .left-rail .vnav .nav-link small {
                font-size: .62rem;
                letter-spacing: .02em;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: calc(100% - 10px);
                opacity: .95;
            }

            .left-rail .vnav .nav-link:hover {
                background: rgba(255,255,255,.06);
                border-color: rgba(255,255,255,.12);
            }

            .left-rail .vnav .nav-link.active {
                background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
                border-color: rgba(255,255,255,.24);
            }

/* Компактный режим по ширине самого rail */
@supports (container-type:inline-size) {
    @container (max-width: 86px) {
        .left-rail .vnav .nav-link small {
            display: none;
        }

        .left-rail .vnav .nav-link {
            width: 64px;
            height: 64px;
            padding: .5rem 0;
            gap: .25rem;
        }
    }
}

/* Мобильный режим: левый rail — на всю ширину, сетка 2 колонки */
@media (max-width: 767.98px) {
    .left-rail {
        flex: 0 0 100%;
        max-width: 100%;
    }

        .left-rail .sticky-rail {
            position: static;
            max-height: none;
        }

        .left-rail .vnav {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0,1fr));
        }

            .left-rail .vnav .nav-link {
                width: 100%;
            }
}

/* ——— Центральная колонка ——— */
.main-col {
    min-width: 0;
    flex: 1 1 0;
}

/* ——— Правая арт‑панель ——— */
@media (min-width: 768px) {
    #artSidePanelCol {
        flex: 0 0 var(--art-rail-w);
        max-width: var(--art-rail-w);
    }

    .right-rail {
        flex: 0 0 var(--sec-rail-w);
        max-width: var(--sec-rail-w);
    }


}

#artSidePanel {
    background: var(--panel-bg);
    border: 0 !important;
    box-shadow: none !important;
    border-radius: .75rem;
}

@media (max-width: 1200px) {
    #artSidePanelCol, .right-rail {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .left-rail {
        order: 1;
    }

    .main-col {
        order: 2;
    }

    .right-rail, #artSidePanelCol {
        order: 3;
    }
}

/* ——— Автосетка карточек ——— */
.cards-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 280px), 1fr));
    gap: var(--card-gap, 1rem);
}
    .cards-auto > * {
        min-width: 0;
    }
    /* чтобы длинные заголовки не распирали треки */

    .cards-auto > .card {
        min-width: 0;
    }

    .cards-auto > .row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--card-min),1fr));
        gap: var(--card-gap);
        margin: 0;
    }

        .cards-auto > .row > [class*="col"] {
            width: auto;
            max-width: initial;
            flex: initial;
            padding: 0;
        }

.card-ghost {
    background: var(--panel-bg);
    border-color: var(--bs-border-color);
}

/* ——— Внутренняя сетка внутри таба (pane-grid) ——— */
.pane-grid {
    --inner-rail-w: 260px;
    display: grid;
    grid-template-columns: 1fr var(--inner-rail-w);
    gap: 1rem;
    align-items: start;
}

    .pane-grid > .pane-main {
        grid-column: 1;
        min-width: 0;
    }

    .pane-grid > .pane-rail {
        grid-column: 2;
        width: var(--inner-rail-w);
    }

@media (max-width:1200px) {
    .pane-grid {
        grid-template-columns: 1fr;
    }

        .pane-grid > .pane-main, .pane-grid > .pane-rail {
            grid-column: auto;
            width: auto;
        }
}






.pane-rail-card {
    background: var(--panel-bg);
    border: 0;
    box-shadow: none;
    border-radius: .75rem;
    padding: .75rem;
}

.pane-rail .sticky-rail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--topbar-gap));
    max-height: calc(100vh - var(--topbar-h) - (var(--topbar-gap)*2));
    overflow: auto;
}

/* ——— Логотип ——— */
.brand-logo {
    height: calc(var(--topbar-h) - 39px);
    display: flex;
    align-items: center;
}

    .brand-logo img {
        height: 100%;
        width: auto;
        object-fit: contain;
    }

/* ===================================================================== */
/* =========================  М Е Г А ‑ М Е Н Ю  ======================= */
/* ===================================================================== */
/* Десктоп (≥992px): фиксированная белая панель под шапкой на всю ширину */
.navbar .dropdown-menu.dropdown-mega {
    position: fixed !important; /* принудительно поверх поппера */
    top: var(--topbar-h) !important;
    inset-inline: 0;
    z-index: 2100;
    /* Сбрасываем bootstrap‑минимумы */
    --bs-dropdown-min-width: 0;
    min-width: 0;
    /* Визуал панели */
    padding-block: var(--mega-pad) !important;
    background: var(--mega-bg) !important;
    color: var(--mega-text);
    border: 1px solid var(--mega-border);
    border-top: none;
    border-radius: 0 0 var(--mega-radius) var(--mega-radius);
    box-shadow: var(--mega-shadow);
    overflow-x: clip;
    /* Гасим inline‑transform от Popper */
    transform: none !important;
    left: auto !important;
    right: auto !important;


}

    .navbar .dropdown-menu.dropdown-mega.show {
        display: block;
    }

/* Внутренний контейнер «центрирование + боковые поля» */
.dropdown-menu.dropdown-mega > .mega-wrap {
    max-width: var(--mega-max-w);
    margin-inline: auto;
    padding-inline: var(--mega-pad);
}

/* Фоллбэк: если .mega-wrap не используется, центрируем .mega-inner напрямую */
.dropdown-menu.dropdown-mega > .mega-inner {
    max-width: var(--mega-max-w);
    margin-inline: auto;
    padding-inline: var(--mega-pad);
}

/* Сетка колонок внутри панели */
.dropdown-menu.dropdown-mega .mega-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    background: var(--mega-inner-bq);
}

/* Заголовки секций */
.dropdown-mega .section-title {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mega-muted);
    margin: .1rem 0 .2rem
}

/* Пункты меню: иконка + текст, «кнопка» на всю строку */
.dropdown-mega .list-unstyled > li > a {
    display: grid;
    grid-template-columns: 2.05rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease, filter .12s ease;
}

    .dropdown-mega .list-unstyled > li > a .bi {
        width: 2.05rem;
        height: 2.05rem;
        display: grid;
        place-items: center;
        border-radius: .5rem;
        font-size:15pt;
        background: var(--mega-icon-bg);
    }

    .dropdown-mega .list-unstyled > li > a small {
        display: block;
        line-height: 1.15;
        color: var(--mega-muted);
    }

    .dropdown-mega .list-unstyled > li > a:hover {
        background: #f7f7f7;
    }

/* ——— Мобильный режим (<992px): меню становится вертикальным в коллапсе ——— */
@media (max-width: 991.98px) {

    .navbar .navbar-collapse {
        min-width: 0;
        flex-wrap: nowrap;
        background: #131313;
        padding: 2rem;
        border-radius: 2rem;
    }
    .navbar .dropdown-menu.dropdown-mega {
        padding: 0 !important; /* внешний rail без отступов */
    }

    .dropdown-menu.dropdown-mega > .mega-wrap,
    .dropdown-menu.dropdown-mega > .mega-inner {
        max-width: none;
        border-radius: .75rem;
        border-top: 1px solid var(--mega-border); /* т.к. уже не прилипает к шапке */
        padding: .5rem;

    }

    .dropdown-menu.dropdown-mega .mega-inner {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}

 












/* Тоггл аккаунта в топбаре */
.navbar .acc-toggle .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,.12)
}

    .navbar .acc-toggle .avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.navbar .acc-toggle .money-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--brand-accent) 18%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, #fff);
    color: #0b1720
}

/* Кнопка в виде пункта меню (для logout) */
.dropdown-as-link {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .5rem;
    align-items: center;
    padding: .35rem .5rem;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    border-radius: .5rem
}

    .dropdown-as-link .bi {
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
        background: var(--mega-icon-bg);
        border-radius: .5rem
    }

    .dropdown-as-link:hover {
        background: #f7f7f7
    }













/* ========= МЕГА-МЕНЮ: вырубить Popper-позиционирование только для .dropdown-mega ========= */

/* Desktop (≥992px): вся панель фиксируется под шапкой, ширина — от края до края */
.navbar .dropdown-menu.dropdown-mega,
.navbar .dropdown-menu.dropdown-mega[data-bs-popper] {
    position: fixed !important; /* ← вместо absolute */
    top: var(--topbar-h) !important; /* под навбаром */
    inset-inline: 0 !important; /* left:0; right:0 */
    left: auto !important;
    right: auto !important;
    transform: none !important; /* гасим translate3d от Popper */
    margin: 0 !important;
    /* визуал/поведение */
    z-index: 2100;
    --bs-dropdown-min-width: 0;
    min-width: 0;
}

    .navbar .dropdown-menu.dropdown-mega.show {
        display: block;
    }

/* Внутренний контейнер — центр и отступы */
.dropdown-menu.dropdown-mega > .mega-wrap {
    max-width: var(--mega-max-w);
    margin-inline: auto;
    padding-inline: var(--mega-pad);
}

/* Сетка секций (можно оставить как у тебя) */
.dropdown-menu.dropdown-mega .mega-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* Mobile (<992px): панель становится частью коллапса navbar (вертикальный список) */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu.dropdown-mega,
    .navbar .dropdown-menu.dropdown-mega[data-bs-popper] {
        position: static !important; /* возвращаем поток */
        inset: auto !important;
        top: auto !important;
        transform: none !important;
        margin: .5rem 0 0 !important;
    }

    .dropdown-menu.dropdown-mega > .mega-wrap {
        max-width: none;
        padding-inline: 0;
    }

    .dropdown-menu.dropdown-mega .mega-inner {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}









/* ---------- МЕГА-МЕНЮ: внешний rail прозрачный, панель — внутри ---------- */

/* Делает сам .dropdown-mega прозрачным «рейлом» */
@media (min-width: 992px) {
    .navbar .dropdown-menu.dropdown-mega {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important; /* вертикальные отступы перенесём на панель */
        overflow: visible; /* на всякий случай */
        overscroll-behavior: none;
    }
}

/* Стилизуем ВНУТРЕННЮЮ панель.
   Работает и с .mega-wrap, и с «фоллбэком», если .mega-wrap нет */
.dropdown-menu.dropdown-mega > .mega-wrap,
.dropdown-menu.dropdown-mega > .mega-inner {
    max-width: var(--mega-max-w);
    margin-inline: auto;
    padding: var(--mega-pad);
    background: var(--mega-bg);
    border: 1px solid var(--mega-border);
    border-top: none; /* красиво примыкает к низу шапки */
    border-radius: 0 0 var(--mega-radius) var(--mega-radius);
    box-shadow: var(--mega-shadow);
    /* высота = окно − высота шапки − нижний зазор/выемка */
    max-height: calc(100vh - var(--topbar-h) - var(--mega-gap) - var(--mega-safe-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    padding-bottom: max(var(--mega-pad), 8px + var(--mega-safe-bottom)); /* чтоб низ не прилипал */
}


/* ===== Блокируем прокрутку позади и запрещаем scroll chaining ===== */
@media (min-width: 992px) {
    /* Когда .dropdown-mega открыто — страница за ним не скроллится */
    html:has(.navbar .dropdown-menu.dropdown-mega.show),
    body:has(.navbar .dropdown-menu.dropdown-mega.show) {
    }



    /* Скролл только внутри белой панели; на краях не уходит в body */
    .dropdown-menu.dropdown-mega > .mega-wrap,
    .dropdown-menu.dropdown-mega > .mega-inner {
        max-height: calc(100vh - var(--topbar-h) - var(--mega-gap) - var(--mega-safe-bottom));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* ключ — отключает scroll chaining */
        scrollbar-gutter: stable both-edges;
        padding-bottom: max(var(--mega-pad), 8px + var(--mega-safe-bottom));
    }
}




/* Компактное меню языка: скролл внутри, без цепочки прокрутки */
.dropdown-menu.lang-menu {
    min-width: 240px; /* приятно выглядит рядом с иконкой */
    max-height: calc(100vh - var(--topbar-h) - 16px);
    overflow: auto;
    overscroll-behavior: contain; /* не прокидывать колёсико в body */
}

.menu-rich .dropdown-item b {
    display: block;
}

.menu-rich .dropdown-item small {
    display: block;
    color: var(--bs-secondary-color);
    line-height: 1.1;
}












/* Крупный аватар в шапке выпадашки */
.dropdown-mega .account-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0rem 1rem 1rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    position: relative;
}

.dropdown-mega .account-avatar {
    width: 72px; /* размер больше пунктов меню */
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mega-border);
    box-shadow: 0 0 0 3px #fff; /* лёгкий белый ободок */
}

    .dropdown-mega .account-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* Фиксируем высоту ссылки в топбаре */
.navbar .nav-link.acc-toggle {
    display: flex;
    align-items: center;
    height: var(--topbar-h); /* ровно как высота шапки */
    padding-top: 0;
    padding-bottom: 0;
}

/* Контейнер аватарки */
.avatar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Само изображение */
    .avatar-toggle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


.w-shell-shop {
    height: var(--topbar-h);
}



/* для языка, так как он прижат к правой стороне макета, чтиобы не выходил за пределы всего макета сайта. */
.dropdown-menu-lang.dropdown-mega > .mega-wrap,
.dropdown-menu-lang.dropdown-mega > .mega-inner {
    max-width: min(var(--mega-max-w), calc(100vw - var(--edge-pad) * 2));
    margin-inline: auto;
    right:0!important;
    position:fixed;
}


/* ===== BRAND: всегда в одну строку и по центру по высоте ===== */
.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* ключевые вещи: */
    white-space: nowrap; /* не переносить */
    word-break: normal; /* не ломать слова */
    overflow-wrap: normal; /* не переносить внутри слова */
    flex: 0 0 auto; /* не сжимать бренд */
    min-width: max-content; /* ширина = контент, чтобы его не “ломало” */
    line-height: 1; /* вписывается по высоте шапки */
}

    .navbar .navbar-brand strong {
        display: inline-block;
        line-height: 1;
        /* чуть адаптивнее, чтобы влезать, но не мелко */
        font-size: clamp(18px, 1.6vw, 18px);
    }

/* чтобы остальное не “выпихивало” бренд: поиск и левые ссылки ужимаются первыми */
.navbar .navbar-collapse {
    min-width: 0;
    flex-wrap: nowrap;

}
/* не переносить меню на вторую строку */
.top-search {
    flex: 1 1 0;
}
/* пусть сжимается первой */







/* --- флексы в шапке: центр (поиск) сжимается первым, правый кластер может ужаться --- */
.navbar .navbar-collapse {
    min-width: 0;
    flex-wrap: nowrap;
}
/* важно для правильного схлопывания */
.top-search {
    flex: 1 1 0;
    min-width: 180px;
}
/* пусть ест свободное и сжимается */
/* правый кластер (тот, где язык/аватар/корзина) */
.navbar .navbar-nav.ms-lg-2 {
    flex: 0 1 auto;
    min-width: 0;
    gap: .75rem;
}

/* высота ссылки фиксирована, аватар/иконки центрируются */
.navbar .nav-link.acc-toggle {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    padding-block: 0;
}

/* язык: на средних ширинах оставляем только иконку, подпись скрываем */
@media (max-width: 1500px) {
    #ddLang .nav-label {
        display: none;
    }
    /* скрыть текст "Language" */
}

/* аккаунт: на средних ширинах скрыть имя, оставить только аватар */
@media (max-width: 1450px) {
    .navbar .acc-toggle .d-xl-inline {
        display: none !important;
    }
    /* твой span с именем */
}

/* ещё запас: на узких уменьшаем макс-ширину поиска, чтобы всё влезало */
@media (max-width: 1600px) {
    :root {
        --search-max-w: 720px;
    }
}

@media (max-width: 1400px) {
    :root {
        --search-max-w: 580px;
    }
}

@media (max-width: 1280px) {
    :root {
        --search-max-w: 460px;
    }


}



/* Оверлей .dropdown-mega растягиваем на ширину и даём внутренние поля,
   чтобы контент НЕ мог упереться в край вьюпорта */
@media (min-width: 992px) {
    .navbar .dropdown-menu.dropdown-mega {
        padding-inline: var(--edge-pad) !important; /* ← ключ: «подушка» по бокам */
    }

}

/* ВНУТРЕННЯЯ панель: ширина всегда влезает в вьюпорт */
.dropdown-menu.dropdown-mega > .mega-wrap,
.dropdown-menu.dropdown-mega > .mega-inner {
    max-width: min(var(--mega-max-w), calc(100vw - var(--edge-pad) * 2));
    margin-inline: auto; /* по умолчанию — по центру */
    padding: var(--mega-pad);
    background: var(--mega-bg);
    border: 1px solid var(--mega-border);
    border-top: none;
    border-radius: 0 0 var(--mega-radius) var(--mega-radius);
    box-shadow: var(--mega-shadow);
    /* высота и прокрутка — как у тебя */
    max-height: calc(100vh - var(--topbar-h) - var(--mega-gap) - var(--mega-safe-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    padding-bottom: max(var(--mega-pad), 8px + var(--mega-safe-bottom));
}
/* ——— Узкие якорные панели (аккаунт/язык), внешний вид как у mega ——— */
.dropdown-menu.dropdown-slab {
    --slab-max: min(460px, calc(100vw - var(--edge-pad) * 2));
    background: var(--mega-bg);
    color: var(--mega-text);
    border: 1px solid var(--mega-border);
    border-radius: .75rem;
    box-shadow: var(--mega-shadow);
    padding: var(--mega-pad);
    min-width: 280px;
    max-width: var(--slab-max);
    max-height: calc(100vh - var(--topbar-h) - var(--mega-gap) - var(--mega-safe-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.dropdown-slab .section-title {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mega-muted);
    margin: .25rem 0 .5rem;
}

.dropdown-slab .list-unstyled > li > a {
    display: grid;
    grid-template-columns: 2.05rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease, filter .12s ease;
}

    .dropdown-slab .list-unstyled > li > a .bi {
        width: 2.05rem;
        height: 2.05rem;
        display: grid;
        place-items: center;
        border-radius: .5rem;
        background: var(--mega-icon-bg);
    }

    .dropdown-slab .list-unstyled > li > a small {
        display: block;
        line-height: 1.15;
        color: var(--mega-muted);
    }

    .dropdown-slab .list-unstyled > li > a:hover {
        background: #f7f7f7;
    }




@media (min-width: 1400px) {
    .dropdown-menu-lang.dropdown-mega > .mega-wrap,
    .dropdown-menu-lang.dropdown-mega > .mega-inner {
        right: 1% !important;
    }
}
/* ====== ПОИСК В ТОПБАРЕ: меню ровно под инпутом ====== */

/* База: контейнер поиска — опорная система координат */
.navbar .top-search .dropdown.search-wrap {
    position: relative;
    isolation: isolate; /* отдельный слой, чтобы z-index не конфликтовал */
    z-index: 2050;
}

    .navbar .top-search .dropdown.search-wrap .dropdown-menu,
    .navbar .top-search .dropdown.search-wrap .dropdown-menu[data-bs-popper] {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 4px) !important;
        margin: 0 !important;
        transform: none !important;
        /* НИКАКИХ display/height тут! */
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        max-height: min(60vh, 520px);
        overflow: auto;
        min-height: 200px;
        overscroll-behavior: contain;
    }
        .navbar .top-search .dropdown.search-wrap .dropdown-menu.show,
        .navbar .top-search .dropdown.search-wrap .dropdown-menu.show[data-bs-popper] {
            display: block !important;
        }



.main-col {
    min-width: 0;
}

.rail {
    width: 340px;
    flex: 0 0 340px;
}

@media (max-width:1199.98px) {
    .rail {
        width: 100%;
        flex: 0 0 auto;
    }
}






.creator-section-title {
    margin: 0.5rem 1rem;
    color: #ff723b;
    text-transform: uppercase;
}













/* локальный стиль для строк меню в сайдбаре */
.sidebar-list li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: .75rem;
    text-decoration: none;
    color: inherit;
}

    .sidebar-list li a:hover {
        background: rgba(255,255,255,.06);
    }

    .sidebar-list li a i {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .sidebar-list li a span small {
        display: block;
        opacity: .75;
    }

    .sidebar-list li a.active {
        background: rgba(255,255,255,.10);
    }

    .sidebar-list li a.disabled {
        pointer-events: none;
        opacity: .45;
    }













/* взяли мышью */
.drag-chosen {
    outline: 2px solid rgba(99,102,241,.6);
    outline-offset: 2px;
    border-radius: 10px;
    background: rgba(99,102,241,.08);
}

/* в процессе перетаскивания (оригинал-элемент) */
.drag-active {
    opacity: .85;
    transform: scale(.995);
}

/* «призрак» под курсором */
.drag-ghost {
    opacity: .5;
    background: rgba(255,255,255,.05);
    border: 1px dashed rgba(148,163,184,.4);
    border-radius: 10px;
    backdrop-filter: blur(2px);
}



.fade:not(.show) {
    opacity: 0;
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: -55555;
}






.w-tileset-btn {
    background: #121212;
    font-size: 11pt;
    border-radius: 0.6rem;
    padding: 1.6rem;
    transition: background .10s ease, filter .10s ease;
}

 
    .w-tileset-btn:hover {
        background: #2b2b2b;
    }



    /* Скрываем стандартную кнопку радио */
    .w-tileset-btn input[type=radio] {
        display: none;
    }

        /* Когда радио внутри label выбрано */
        .w-tileset-btn input[type=radio]:checked ~ * {
            color: #fff; /* меняем цвет текста */
        }

        .w-tileset-btn input[type=radio]:checked {
            /* чтобы к label применить */
        }

            .w-tileset-btn input[type=radio]:checked + div {
                /* так только на div */
            }

    /* ГЛАВНОЕ — через :has (поддерживается в современных браузерах) */
    .w-tileset-btn:has(input[type=radio]:checked) {
        background: #bc3232; /* новый цвет кнопки */
    }