.responsive-menu-toggle-icon span.label {
       display: none;
}
#block-usteatr-responsivemenumobileicon{
      padding: 10px;
}
/* ==========================================================================
   1. КОНТЕЙНЕР КНОПКИ (ЖЕСТКИЙ КВАДРАТ 44x44px ВСЕГДА В ПРАВОМ ВЕРХНЕМ УГЛУ)
   ========================================================================== */
#toggle-icon,
.responsive-menu-toggle-icon {
  position: fixed !important;  /* Жестко фиксируем кнопку на экране при скролле */
  right: 20px !important;      /* Отступ от правого края экрана */
  top: 20px !important;        /* Стартовый отступ сверху по умолчанию */
  left: auto !important;
  
  /* Создаем удобную квадратную зону клика */
  width: 44px !important;      
  height: 44px !important;     
  display: flex !important;    /* Флекс, чтобы идеально выровнять 3 линии по центру */
  justify-content: center !important;
  align-items: center !important;
  
  cursor: pointer !important;
  z-index: 999999 !important;  /* Всегда поверх выезжающей шторки меню */
  background:#640909!important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;  /* Запрещаем mmenu ломать позицию контейнера */
  
  /* Плавный переход для движения влево к меню и опускания под БВИ */
  transition: transform 0.3s ease-in-out, top 0.25s ease-in-out !important;
}

/* Скрываем текст "Menu" */
#toggle-icon .label,
.responsive-menu-toggle-icon .label {
  display: none !important;
}
.mm-listview{
   max-height:99%; /* Укажите нужную высоту */
  overflow: auto;  /* Включает вертикальный скролл */
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch; /* Включает тач-скролл */
  pointer-events: auto !important; 
  touch-action: vertical !important; 
 
}

/* ==========================================================================
   2. ГЕОМЕТРИЯ ВАШИХ ТРЁХ ОРИГИНАЛЬНЫХ БЕЛЫХ ЛИНИЙ (С ФИКСОМ СРЕДНЕЙ ПОЛОСКИ)
   ========================================================================== */
#toggle-icon span.icon,
#toggle-icon::before,
#responsive-menu-toggle-icon::before, /* Защита от дефолтных системных стилей */
#toggle-icon::after,
#responsive-menu-toggle-icon::after {
  position: absolute !important;
  left: 11px !important;       /* Центрируем полоски (44px ширина квадрата - 22px полоски / 2) */
  width: 22px !important;      /* Ваша оригинальная ширина полосок */
  height: 2px !important;      /* Ваша оригинальная толщина полосок */
  background-color: #ffffff !important; /* Насыщенный белый цвет полосок */
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;       /* Жестко возвращаем видимость средней полоске */
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, top 0.25s ease-in-out, visibility 0.25s ease-in-out !important;
  transform-origin: center center !important; 
}

/* Ваша оригинальная точная раскладка полосок по вертикали внутри квадрата */
#toggle-icon::before { top: 14px !important; }
#toggle-icon span.icon { top: 21px !important; transform: none !important; }
#toggle-icon::after  { top: 28px !important;height: 3px !important; }

/* ==========================================================================
   3. ВАША ТРАНСФОРМАЦИЯ В КРЕСТИК ЗАКРЫТИЯ (ПО КЛАССУ .is-open ИЛИ КЛАССАМ MMENU)
   ========================================================================== */

/* ВЕРХНЯЯ ЛИНИЯ: съезжается в центр (21px) и поворачивается на 45 градусов */
#toggle-icon.is-open::before,
html.mm-wrapper--opened #toggle-icon::before,
html.mm-wrapper_opened #toggle-icon::before {
  top: 21px !important; 
  transform: rotate(45deg) !important;
}

/* СРЕДНЯЯ ЛИНИЯ: полностью исчезает и плавно улетает влево */
#toggle-icon.is-open span.icon,
html.mm-wrapper--opened #toggle-icon span.icon,
html.mm-wrapper_opened #toggle-icon span.icon {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(-15px, 0, 0) !important; /* Ваш оригинальный улет влево на -15px */
}

/* НИЖНЯЯ ЛИНИЯ: поднимается в центр (21px) и поворачивается на -45 градусов */
#toggle-icon.is-open::after,
html.mm-wrapper--opened #toggle-icon::after,
html.mm-wrapper_opened #toggle-icon::after {
  top: 21px !important; 
  transform: rotate(-45deg) !important;
}

/* ==========================================================================
   4. ЛОГИКА ОПУСКАНИЯ ПОД БВИ И СИНХРОННОЕ ПРИЛИПАНИЕ К МЕНЮ
   ========================================================================== */

/* Кнопка считывает высоту панели из переменной JS и плавно опускается строго вниз */
html.bvi-active #toggle-icon,
body.bvi-active #toggle-icon,
html.bvi-active .responsive-menu-toggle-icon,
body.bvi-active .responsive-menu-toggle-icon {
 /* top: calc(var(--bvi-height, 60px) + 20px) !important;*/
}

/* СИНХРОННОЕ ПРИЛИПАНИЕ К МЕНЮ: Квадрат едет влево вместе со шторкой на микро-отступ (-15px) */
html.mm-wrapper--opened #toggle-icon,
body.mm-wrapper--opened #toggle-icon,
html.mm-wrapper_opened #toggle-icon,
body.mm-wrapper_opened #toggle-icon {
  transform: translate3d(-15px, 0, 0) !important; 
}

/* ==========================================================================
   5. СТИЛИ ДЛЯ РОДНОГО ПРАВОГО ВЫЕЗДА MMENU (ОСТАЮТСЯ ДЛЯ СТАБИЛЬНОСТИ)
   ========================================================================== */
.mm-wrapper--position-right .mm-menu {
  left: auto !important; right: 0 !important; width: 80% !important; max-width: 440px !important;
  transform: translate3d(100%, 0, 0) !important; transition: transform 0.3s ease-in-out !important;
      z-index: 1;
	  visibility: hidden !important; /* Скрываем при загрузке */
}
.mm-wrapper--position-right.mm-wrapper--opened .mm-menu,
.mm-wrapper--position-right.mm-wrapper_opened .mm-menu {
  left: auto !important; right: 0 !important; transform: translate3d(0, 0, 0) !important;
  visibility: visible !important; /* Показываем при открытии */

}
.mm-wrapper--position-right .mm-panels, .mm-wrapper--position-right .mm-panel {
  left: auto !important; right: 0 !important; width: 100% !important;
}
.mm-wrapper--position-right.mm-wrapper--opened .mm-page,
.mm-wrapper--position-right.mm-wrapper_opened .mm-page { transform: translate3d(-80%, 0, 0) !important; }
@media (min-width: 550px) {
  .mm-wrapper--position-right.mm-wrapper--opened .mm-page,
  .mm-wrapper--position-right.mm-wrapper_opened .mm-page { transform: translate3d(-440px, 0, 0) !important; }
}
.mm-wrapper--position-right .mm-wrapper__blocker { left: 0 !important; right: auto !important; }

/* ==========================================================================
   УЛЬТРА-ФИКС: ОТОБРАЖЕНИЕ СРЕДНЕЙ ЛИНИИ ЧЕРЕЗ ТЕНЬ (БЕЗ СЛОМА КРЕСТИКА)
   ========================================================================== */

/* Берем верхнюю линию (::before) и заставляем её отбросить жесткую 
   белую тень ровно на 7 пикселей вниз — это и будет наша средняя линия */
#toggle-icon::before,
.responsive-menu-toggle-icon::before {
  /* Первая цифра (0) — сдвиг по горизонтали. 
     Вторая цифра (7px) — сдвиг по вертикали строго в центр. 
     Третья цифра (0) — размытие (сделайте 0, чтобы линия была четкой).
     Четвертая цифра (#ffffff) — цвет нашей средней полоски. */
  box-shadow: 0 7px 0 0 #ffffff !important;
  height: 3px !important;
  
  /* Добавляем плавность для box-shadow, чтобы средняя линия исчезала без рывков */
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, top 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
}

/* Когда меню ОТКРЫВАЕТСЯ и превращается в крестик, 
   мы полностью убираем эту тень, и средняя полоска плавно исчезает */
#toggle-icon.is-open::before,
.responsive-menu-toggle-icon.is-open::before,
html.mm-wrapper--opened #toggle-icon::before,
html.mm-wrapper_opened #toggle-icon::before {
  box-shadow: 0 0 0 0 transparent !important; /* Тень мгновенно и плавно растворяется */
}

/* _______________________________________________________________________________________________________*/
#block-usteatr-horizontalmenu{background-color:#640909;}
#horizontal-menu {max-width:1750px;margin: 0 auto;}
.horizontal-menu {
  display: flex; /* Включаем флекс-контейнер */
  justify-content: space-between; /* Растягивает li по краям на равные расстояния */
  align-items: center; /* Центрирует пункты по вертикали (опционально) */
  width: 100%; /* Меню занимает всю ширину страницы */
  margin: 0;
  padding: 0;
  list-style: none; /* Убираем стандартные маркеры списков */
}
.horizontal-menu li a
 {
    display: block;
    padding-top: 0.3em;
    padding-right: 1em;
    padding-bottom: 0.35em;
    padding-left: 1em;
	color:#ffffff !important;
	text-decoration:none!important;
    background-color:#640909!important;
	text-transform: uppercase!important;
}
.horizontal-menu  li {
  position: relative; /* КРИТИЧЕСКИ ВАЖНО: точка отсчета для выпадающих подпунктов */
 flex-grow: 1; /*  Опционально: заставит сами li растягиваться (увеличит область клика) */
 text-align: center;  /* Центрирует текст внутри растянутого li */
}

.horizontal-menu li ul {
  position: absolute; /* Вырываем подменю из общего потока, чтобы оно не ломало сетку */
  top: 100%; /* Появляется ровно под родительским li */
  left: 50%; /* Центрируем подменю относительно li */
  transform: translateX(-50%); /* Идеальное центрирование выпадашки */
  padding: 0;
  /* Ваши стили для скрытия/показа подпунктов, например: */
  display: none; 
  width: auto; /* Чтобы длинные подпункты не сжимались */
  z-index: 10; /* Чтобы подпункты были поверх остального контента сайта */
}
.horizontal-menu li span{
  color:#ffffff !important;
  text-transform: uppercase!important;
  cursor: pointer;
 }
 .horizontal-menu li li a
 {padding-top: 0.8em;padding-bottom: 0.8em;}
 
 /*___________________________________________________________*/
/* ==========================================
   1. ГЛАВНОЕ МЕНЮ (Верхний уровень)
   ========================================== */

/* Используем знак ">", чтобы стили линии применялись ТОЛЬКО к первому уровню */
.horizontal-menu  li  a,
.horizontal-menu   .menu-item--expanded {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding-top: 10px; 
  padding-bottom: 14px;
}

.horizontal-menu > li > a::after,
.horizontal-menu .menu-item--expanded::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px; /* Обычная толщина для верхнего меню */
  background-color: #EEEDED; 
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

/* Линия верхнего меню активируется при наведении на верхний li */
.horizontal-menu > li:hover > a::after,
.horizontal-menu > li:hover > .no-link::after {
  transform: scaleX(1);
}


/* ==========================================
   2. ВЫПАДАЮЩЕЕ МЕНЮ (Вложенные пункты li li)
   ========================================== */

/* Сбрасываем эффекты верхнего уровня, чтобы они не наследовались */
.horizontal-menu li ul li 
{
  position: relative; 
  padding: 0; /* ЖЕСТКО СБРАСЫВАЕМ отступы, чтобы пункты не разлетались */
  margin: 0;
}

.horizontal-menu li ul li a,
.horizontal-menu li ul li .no-link {
  position: relative;
  text-decoration: none;
  display: block; /* Ссылка занимает всю ширину подменю */
   /* Увеличили отступ, чтобы прижать линию к самому низу */
}

/* Создаем отдельную, более толстую линию для подменю */
.horizontal-menu li ul li a::after,
.horizontal-menu li ul li .no-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* Прижали к самому низу блока li */
  width: 100%;
  height: 7px; /* МЫ СДЕЛАЛИ ЕЁ ТОЛЩЕ (было 2px, стало 4px) */
  background-color: #EEEDED; /* Цвет линии */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

/* МАГИЯ: Линия срабатывает ТОЛЬКО при наведении на конкретный пункт подменю (li li) */
.horizontal-menu li ul li:hover a::after,
.horizontal-menu li ul li:hover .no-link::after {
  transform: scaleX(1);
}
.mm-listitem__text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    -o-text-overflow:clip !important;
    text-overflow: clip !important;
    overflow: hidden;
    white-space: normal !important;
}
#block-usteatr-osnovnayanavigaciya ul, ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2. Самый верхний список (главный контейнер меню) */
#block-usteatr-osnovnayanavigaciya > ul 
{ /* Замените селектор родителя, если меню лежит в конкретном блоке */
  display: flex;
  flex-wrap: wrap;         /* Позволяет пунктам перепрыгивать вниз */
  gap: 10px 10px;          /* 30px между строками, 20px между колонками */
  align-items: flex-start;  /* Запрещает растягивание блоков по высоте */
}

/* 3. Главные пункты меню (только первый уровень li) */
#block-usteatr-osnovnayanavigaciya > ul > li
 {
  flex: 0 1 auto;          /* Ширина по размеру текста */
  min-width: 120px;        /* Минимальная ширина колонки */
  max-width: 177px; 
  color: #fff;  /* Максимальная ширина колонки */
  text-transform: uppercase;
}

/* 4. Главные ссылки (только первый уровень ссылок) */
#block-usteatr-osnovnayanavigaciya > ul > li > a
{
  display: block;
  font-size: 16px;
  color: #fff;
  padding-bottom: 8px;
    margin-bottom: 10px;
	text-transform: uppercase;
}

/* 5. Внутренний список (подменю второго уровня) — ВСЕГДА ОТКРЫТ */
#block-usteatr-osnovnayanavigaciya > ul > li > ul
 {
  display: block; 
  margin-top: 9px;
}

/* 6. Пункты внутри подменю */
#block-usteatr-osnovnayanavigaciya > ul > li > ul > li
 {
  margin-bottom: 8px;      /* Отступы между строчками подменю */
}

/* 7. Ссылки внутри подменю */
#block-usteatr-osnovnayanavigaciya > ul > li > ul > li > a
{
  display: block;
  font-size: 14px;
  color:  #fff;
  line-height: 1.3;
  text-transform: none;
}

/* Эффект наведения для ссылок подменю */
#block-usteatr-osnovnayanavigaciya > ul > li > ul > li > a:hover,
 {
  color: #8b0000;
}
footer[role="contentinfo"]{
  background-color: #640909;
  padding-top:10px;
  padding-left:10px;
  clear:both;
  margin-top:10px;
}
@media (max-width: 600px){
#block-usteatr-osnovnayanavigaciya > ul > li
 {
  flex: 0 1 auto;          /* Ширина по размеру текста */
  min-width: 90px;        /* Минимальная ширина колонки */
  max-width: 120px; 
  color: #fff;  /* Максимальная ширина колонки */
  text-transform: uppercase;
  font-size: 14px;
}

/* 4. Главные ссылки (только первый уровень ссылок) */
#block-usteatr-osnovnayanavigaciya > ul > li > a
{
  display: block;
  font-size: 14px;
  color: #fff;
  padding-bottom: 8px;
    margin-bottom: 10px;
	text-transform: uppercase;
}	
}