/* Мобильное меню - фрейм A77g2z (390x844).
   Содержимое выше экрана (62 + 621 + 221 = 904): девять пунктов и нижний блок
   не помещаются в 844, поэтому шторка прокручивается внутри себя.
   Это не дефект макета, а нормальное поведение меню.

   Разделители нарисованы обводкой, которая в макете не увеличивает высоту.
   Поэтому inset box-shadow, а не border: иначе девять пунктов дали бы +9 px
   и весь блок уехал бы. */

.mmenu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  background: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Меню выезжает справа, а не возникает. Приём один на весь сайт:
   закрытое состояние остаётся display:none (иначе шторка ловит нажатия
   сквозь страницу), а плавность даёт transition-behavior: allow-discrete
   вместе с @starting-style - это штатный способ анимировать появление
   того, что прячут display'ем, без единой строки js. Браузер, который
   его не знает, просто показывает меню сразу, как раньше. */
.mmenu {
  opacity: 0;
  transform: translateX(14%);
  transition: opacity .22s ease, transform .26s ease, display .26s allow-discrete;
}

.mmenu.is-open {
  display: flex;
  opacity: 1;
  transform: none;
}

@starting-style {
  .mmenu.is-open {
    opacity: 0;
    transform: translateX(14%);
  }
}

body.is-locked { overflow: hidden; }

.mmenu__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  box-shadow: inset 0 -1px 0 #16233D14;
}

.mmenu__close {
  display: flex;
  color: var(--ink);
}

.mmenu__close .ico { width: 26px; height: 26px; }

.mmenu__nav { flex: none; }

.mmenu__item {
  /* Пункты с раскрытием - кнопки: без ширины 100% браузер сжимает кнопку
     по содержимому, и стрелка с разделителем уезжают к середине строки. */
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  box-shadow: inset 0 -1px 0 #16233D0F;
}

.mmenu__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mmenu__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.mmenu__path {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 13px;
  color: var(--muted);
}

.mmenu__item .ico {
  width: 18px;
  height: 18px;
  color: var(--magenta-text);
}

/* Пункты с раскрытием: стрелка вниз и тёмная, как в макете */
.mmenu__item--sub .ico { color: var(--ink); }

.mmenu__item--sub .ico { transition: transform .2s ease; }

.mmenu__item--sub[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* Подменю разворачивается высотой: height 0 -> auto, что разрешает
   interpolate-size: allow-keywords на самой шторке (тот же приём, что у
   ответов в блоке вопросов, pg-faq.css). Браузер, который этого не
   знает, раскрывает подменю мгновенно, как раньше - геометрия та же.

   Через сетку (grid-template-rows: 0fr -> 1fr) делать нельзя, хотя это
   частый совет: 0fr задаёт высоту только ПЕРВОЙ строки, а у подменю
   ссылок несколько, и остальные строки остаются неявными с высотой
   auto. Закрытое подменю тогда держит полную высоту, пункты меню ниже
   уезжают вниз, и шторка расходится с макетом (поймано пиксельной
   сверкой каркаса: 7,06 % на кадре шторки).

   Закрытое подменю прячется ещё и visibility: иначе его ссылки
   остаются в обходе с клавиатуры, хотя их не видно. */
.mmenu {
  interpolate-size: allow-keywords;
}

.mmenu__sub {
  height: 0;
  visibility: hidden;
  padding-inline: 20px;
  padding-block: 0;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 #16233D0F;
  transition: height .24s ease, padding-block .24s ease, visibility .24s;
}

.mmenu__sub.is-open {
  height: auto;
  visibility: visible;
  padding-block: 2px 14px;
}

.mmenu__sub a {
  display: block;
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.mmenu__sub a:hover { color: var(--magenta-text); }

/* Нижний блок */
.mmenu__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--paper);
}

.mmenu__phone {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 33px;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.mmenu__soc {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mmenu__soc a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}

.mmenu__soc .ico {
  width: 18px;
  height: 18px;
  color: var(--magenta-text);
}

.mmenu__btn {
  padding: 16px 24px;
  font-size: 15px;
  line-height: 18px;
}

.mmenu__address {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-line;
}

@media (min-width: 1160px) {
  .mmenu { display: none !important; }
}