.menu-container-cstm {
    position: fixed;
    /*top: 71px;*/
    /*left: 25%;*/
    margin-top: 5px;
    min-width: 240px;
    width: 13%;
    background: white;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    padding: 10px;
    z-index: 9999;
    display: none;
    flex-direction: row;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Важно: скролл делаем внутри колонок, контейнер может оставаться hidden */
    overflow: hidden;

    transition: width 0.3s ease-in-out;

    /* --- НОВОЕ: контролируем “8 пунктов” через переменные --- */
    --left-visible-items: 8;
    --left-item-h: 44px; /* высота одного пункта меню слева */
    /* Высота окна меню = 8 пунктов + небольшие внутренние отступы */
    max-height: calc(var(--left-visible-items) * var(--left-item-h) + 20px);
}

.menu-container-cstm.show {
    display: flex;
}

/* Левая колонка */
.menu-left {
    border-right: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    width: auto;
    min-width: 200px;
    max-width: 300px;
    background: #f8f8f8;

    /* --- НОВОЕ: чтобы скролл корректно работал внутри flex --- */
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    flex-shrink: 0;
}

/* ОДИН список слева */
.menu-left ul {
    list-style: none;
    margin: 0;
    padding: 0;

    /* --- НОВОЕ: ограничиваем ровно 8 пунктов и включаем скролл --- */
    max-height: calc(var(--left-visible-items) * var(--left-item-h));
    overflow-y: auto;

    /* по желанию: чуть отделить от края */
    border-radius: 5px;
}

/* Пункты слева: фиксируем высоту, чтобы “8” были именно 8 */
.menu-left ul li,
.menu-left li {
    font-size: 12px;
    font-weight: bold;
    background: white;

    /* вместо padding 15px 5px — делаем фиксированную высоту */
    height: var(--left-item-h);
    line-height: var(--left-item-h);
    padding: 0 5px;

    cursor: pointer;
    border-bottom: 1px solid var(--secondary-color);
    transition: all 0.2s ease;
    color: black;
    white-space: nowrap;
    box-sizing: border-box;
}

.menu-left li:hover {
    font-weight: bold;
    color: white;
    background-color: var(--secondary-color);
}

.menu-left li.active {
    color: white;
    background-color: var(--secondary-color);
    font-weight: bold;
}

/* Правая колонка */
.menu-right-container {
    flex: 1;
    position: relative;

    /* --- НОВОЕ: скролл справа, если контента много --- */
    overflow-y: auto;
    scrollbar-color: auto;
    min-height: 0;
    max-height: 100%;
}

.menu-right {
    padding: 15px;
    display: none;
    min-height: 100%;
    box-sizing: border-box;
}

.menu-right.active {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    align-items: baseline;
    align-content: baseline;
    justify-content: center;
    justify-items: center;
}

.menu-column {
    text-align: center;
    margin: 0;
}

.menu-column strong {
    display: block;
    margin-bottom: 10px;
    padding: 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: black;
    transition: background 0.2s;
}

.menu-column strong:hover {
    border-radius: 5px;
    color: white;
    background: var(--main-color);
}

.menu-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-column li {
    margin-bottom: 8px;
}

.menu-column ul li {
    text-decoration: none;
    color: #666666;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: 5px;
    padding: 2px;
}

.menu-column ul li:hover {
    color: white;
    background-color: var(--secondary-color);
}

.menu-left ul {
    overflow-y: scroll;
    scrollbar-gutter: stable; /* резервирует место под полосу */
}

/* Chrome / Safari / Edge */
.menu-left ul::-webkit-scrollbar {
    width: 10px;
}

.menu-left ul::-webkit-scrollbar-track {
    background: #e9e9e9;
    border-radius: 6px;
}

.menu-left ul::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 6px;
}

.menu-left ul::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* Firefox */
.menu-left ul {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

/* 1) Фиксируем высоту всего меню (окно) */
.menu-container-cstm {
    height: calc(var(--left-visible-items) * var(--left-item-h) + 20px);
}

/* 2) Правый контейнер растягиваем на всю высоту окна */
.menu-right-container {
    height: 100%;
    min-height: 0;
    overflow: hidden; /* скролл будет внутри .menu-right.active */
}

/* 3) Скролл именно на активном правом блоке (grid) */
.menu-right {
    height: 100%;
}

.menu-right.active {
    height: 100%;
    overflow-y: scroll; /* всегда видимая полоса */
    scrollbar-gutter: stable; /* резерв под полосу */
}

/* 4) Оформление скролла справа (Chrome / Safari / Edge) */
.menu-right.active::-webkit-scrollbar {
    width: 10px;
}

.menu-right.active::-webkit-scrollbar-track {
    background: #e9e9e9;
    border-radius: 6px;
}

.menu-right.active::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 6px;
}

.menu-right.active::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* 5) Firefox */
.menu-right.active {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.menu-container-cstm, .menu-right-container {
    overscroll-behavior: contain;
}