/* ===========================================================
   Выпадающее меню «Каталог» — новый визуал (v2).
   Подключается только для залогиненных в админке, пока идёт разработка.
   Все классы с префиксом cm2-, старые правила не затрагиваются.
   =========================================================== */

/* Высоту ограничиваем не здесь, а на колонке со списком:
   контейнеру display меняет jQuery slideToggle, трогать его нельзя */
.catalog-menu_wr.cm2 {
    height: auto;
    padding: 0;
    border: 1px solid #E6E8E7;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 18px 40px -20px rgba(17, 24, 28, 0.25);
    overflow: hidden;
}

.cm2__inner {
    position: relative;
    display: flex;
    min-height: 430px;
}

/* ---------- Левая колонка: группы и разделы ---------- */

.cm2__aside {
    flex: 0 0 334px;
    width: 334px;
    max-height: calc(100vh - 160px);
    padding: 10px 0;
    border-right: 1px solid #E6E8E7;
    background-color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

/* Скроллбар колонки — тонкий, в тон разделителям */
.cm2__aside::-webkit-scrollbar {
    width: 6px;
}

.cm2__aside::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #D9DDDB;
}

.cm2__aside::-webkit-scrollbar-track {
    background-color: transparent;
}

.cm2-group {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #EDEFEE;
}

.cm2-group:last-child {
    border-bottom: 0;
}

.cm2-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px 10px;
}

/* .cm2-group__icon {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #E6E8E7;
    border-radius: 9px;
    background-color: transparent;
} */

.cm2-group__icon img {
/*  display: block;
    max-width: 18px;
    max-height: 18px; */
    max-width: 24px;
    max-height: 24px;
}

.cm2-group__name {
    color: #11181C;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/* Вертикальная линия от иконки вниз по всей группе.
   margin-left выставлен по центру иконки: 18px отступ шапки + половина иконки */
.cm2-group__list {
    display: block;
    margin-left: 30px;
    padding-left: 12px;
    border-left: 1px solid #EDEFEE;
}

/* Разделы без метки идут в конец — у них нет ни заголовка, ни линии */
.cm2-group--plain .cm2-group__list {
    margin-left: 0;
    padding-top: 2px;
    padding-left: 0;
    border-left: 0;
}

/* ---------- Пункт раздела ---------- */

.cm2-item {
    display: block;
    padding: 0 8px;
}

.cm2-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #11181C;
    font-size: 15px;
    line-height: 1.35;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cm2-item:hover > .cm2-item__link,
.cm2-item__link:hover {
    background-color: #F2F4F3;
    color: #11181C;
}

.cm2-item__text {
    display: block;
}

.cm2-item__arrow {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #9AA0A6;
    border-right: 1.5px solid #9AA0A6;
    transform: rotate(45deg);
    transition: border-color 0.15s ease;
}

.cm2-item:hover .cm2-item__arrow {
    border-color: #5ec062;
}

/* ---------- Правая панель ---------- */

.cm2-panel {
    position: absolute;
    left: 334px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    padding: 26px 32px 30px;
    background-color: #fff;
    border-radius: 0 16px 16px 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
}

.cm2-item:hover > .cm2-panel {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.cm2-panel__head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 24px;
}

.cm2-panel__title {
    color: #11181C;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

/* Ссылка «Все товары раздела» — зелёная сразу, без наведения */
.cm2 a.cm2-panel__all,
.cm2 a.cm2-panel__all:link,
.cm2 a.cm2-panel__all:visited {
    color: #5ec062;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.cm2 a.cm2-panel__all::after {
    content: ' \2192';
}

.cm2 a.cm2-panel__all:hover {
    color: #5ec062;
    opacity: 0.75;
}

/* ---------- Колонки с подразделами ---------- */

.cm2-cols {
    column-count: 3;
    column-gap: 36px;
}

.cm2-cols > li {
    display: inline-block;
    width: 100%;
    margin-bottom: 22px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.cm2-cols__link {
    display: block;
    margin-bottom: 10px;
    color: #11181C;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

a.cm2-cols__link:hover {
    color: #5ec062;
}

.cm2-sub {
    display: block;
}

.cm2-sub > li {
    padding: 4px 0;
}

.cm2-sub a,
.cm2-sub span {
    color: #9AA0A6;
    font-size: 15px;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.cm2-sub a:hover {
    color: #5ec062;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1280px) {
    .cm2__aside {
        flex: 0 0 290px;
        width: 290px;
    }

    .cm2-panel {
        left: 290px;
        padding: 22px 24px 26px;
    }

    .cm2-cols {
        column-count: 2;
    }
}