/* Горизонтальное меню – только десктоп */
.desktop-horizontal-menu {
    background: var(--body-bg, #f9f9f9);
    border-top: 1px solid var(--menu-main-before, #eeeeee);
    border-bottom: 1px solid var(--menu-main-before, #eeeeee);
    margin-bottom: 12px;
    position: relative;
    z-index: 100;
}

.desktop-horizontal-menu__nav {
    display: flex;
    justify-content: center;
}

.desktop-horizontal-menu__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.desktop-horizontal-menu__item {
    position: relative;
    padding-bottom: 5px;
}

.desktop-horizontal-menu__link {
    position: relative;
    display: inline-block;
    padding: 12px 0;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    transition: color 0.2s;
    text-transform: uppercase;
}

.desktop-horizontal-menu__link:hover {
    color: var(--menu-main-level-1-c-hover, #555);
}

/* Полоска под ссылкой */
.desktop-horizontal-menu__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--a-c, #fe7200);
    transition: width 0.5s ease;
}

.desktop-horizontal-menu__item:hover .desktop-horizontal-menu__link::after {
    width: 100%;
}

/* Выпадающее подменю (второй уровень) */
.desktop-horizontal-menu__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: max-content;
    background: var(--menu-main-level-2-bg, #fafafa);
    border: 1px solid var(--menu-main-before, #eeeeee);
    border-radius: var(--border-radius-0-1-1-1, 0 12px 12px 12px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
    padding: 8px 11px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 150;
    /* Убраны max-height и overflow – теперь подменю растягивается по содержимому */
}

/* Показываем подменю первого уровня при наведении */
.desktop-horizontal-menu__item:hover > .desktop-horizontal-menu__submenu {
    opacity: 1;
    visibility: visible;
}

.desktop-horizontal-menu__submenu li {
    display: block;
    position: relative;  /* чтобы вложенные подменю позиционировались от него */
}

/* Вложенное подменю (3-й, 4-й уровни) */
.desktop-horizontal-menu__submenu .desktop-horizontal-menu__submenu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    border-radius: var(--border-radius-0-1-1-1, 0 12px 12px 12px);
    /* Для вложенных меню тоже убираем прокрутку, они будут видны полностью */
}

/* Показываем вложенное подменю при наведении на родительский li */
.desktop-horizontal-menu__submenu li:hover > .desktop-horizontal-menu__submenu {
    opacity: 1;
    visibility: visible;
}

/* Ссылки внутри подменю */
.desktop-horizontal-menu__submenu li a {
    display: block;
    padding: 8px 16px;
    color: #000000;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.5s, color 0.5s;
}

.desktop-horizontal-menu__submenu li a:hover {
    background: var(--menu-main-before, #eeeeee);
    color: var(--menu-main-level-2-c-hover, #00a9c8);
}

/* ===== ПРОКРУТКА ТОЛЬКО ДЛЯ ДЛИННЫХ МЕНЮ (НАПРИМЕР, БРЕНДОВ) ===== */
.desktop-horizontal-menu__submenu--scrollable {
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #fafafa;
}
.desktop-horizontal-menu__submenu--scrollable::-webkit-scrollbar {
    width: 6px;
}
.desktop-horizontal-menu__submenu--scrollable::-webkit-scrollbar-track {
    background: #fafafa;
    border-radius: 3px;
}
.desktop-horizontal-menu__submenu--scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Адаптация для экранов от 992 до 1200px */
@media (max-width: 1199px) {
    .desktop-horizontal-menu__list {
        gap: 1rem;
    }
    .desktop-horizontal-menu__link {
        font-size: 14px;
    }
}