/* ── Боковое меню ───────────────────────────────────────────────────────────
   Слой ВЫДВИГАЕТСЯ ПОВЕРХ содержимого, а не раздвигает его: панель и затемнение
   вынуты из потока (position:fixed), поэтому ширина страницы не меняется ни на
   пиксель и горизонтальной прокрутки не возникает. Это прямое требование
   владельца 04.08: «в мобильной версии не должен мешать видеть сайт и не
   должен уменьшать ширину страницы».

   Ссылки лежат в HTML, а не подставляются скриптом: их должен видеть краулер.
   Иначе меню решает задачу для человека и не решает для поиска — а половина
   задачи как раз в том, что у страниц вроде /yurlica/ нет входящих ссылок. */

/* Шапка сжата до трёх элементов: кнопка меню, логотип, телефон.
   Было 64px и семь пунктов, которые всё равно не помещались после седьмого
   и не показывались вовсе на экранах уже 900px. */
.bar{height:56px;gap:12px}
.mburger{width:44px;height:44px;flex-shrink:0;display:grid;align-content:center;gap:5px;
  padding:0 10px;margin-left:-10px;background:none;border:0;cursor:pointer}
.mburger span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s,opacity .2s}
.mburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bar .brand{margin-right:auto}

/* Затемнение. Живёт над шапкой (у неё z-index:10). */
.mscrim{position:fixed;inset:0;background:rgba(20,24,31,.5);z-index:40;
  opacity:0;transition:opacity .22s;-webkit-tap-highlight-color:transparent}
.mscrim.is-open{opacity:1}

/* Панель. Ширина ограничена 86vw: на узком телефоне за краем остаётся полоса
   сайта — видно, что ты не ушёл со страницы, и понятно, куда нажать, чтобы
   закрыть. */
.mpanel{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);z-index:41;
  background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .24s ease;
  box-shadow:0 0 40px rgba(20,24,31,.18)}
.mpanel.is-open{transform:none}
@media(prefers-reduced-motion:reduce){.mpanel,.mscrim{transition:none}}

.mhead{display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 8px 0 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.mtitle{font-weight:600;font-size:16px}
.mx{width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1;
  color:var(--ink-2);cursor:pointer}

/* Прокручивается только список; шапка и подвал панели закреплены. */
.mbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 0}

/* Первый блок — то, за чем приходят чаще всего: цена, каталог, клуб, юрлица,
   контакты. Он всегда раскрыт, до остальных групп можно не доходить. */
.mprim{display:flex;flex-direction:column;padding:0 8px 12px;margin:0 12px 8px;
  border-bottom:1px solid var(--line)}
.mprim a{padding:11px 12px;border-radius:var(--r);text-decoration:none;
  color:var(--ink);font-weight:600;font-size:16px}
.mprim a:hover{background:var(--bg-2)}

.mbody details{border-bottom:1px solid var(--line);margin:0 20px}
.mbody details:last-of-type{border-bottom:0}
.mbody summary{padding:12px 0;cursor:pointer;font-weight:600;font-size:15.5px;
  color:var(--ink);list-style:none;display:flex;align-items:center;
  justify-content:space-between}
.mbody summary::-webkit-details-marker{display:none}
.mbody summary::after{content:"";width:8px;height:8px;flex-shrink:0;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.mbody details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mlinks{display:flex;flex-direction:column;padding:0 0 10px}
/* 44px по высоте — палец, а не курсор. */
.mlinks a{padding:10px 0 10px 14px;color:var(--ink-2);text-decoration:none;
  font-size:15.5px;border-left:2px solid var(--line);min-height:24px}
.mlinks a:hover{color:var(--ink);border-left-color:var(--accent)}
.mpanel a[aria-current]{color:var(--accent);border-left-color:var(--accent);font-weight:600}

.mfoot{flex-shrink:0;border-top:1px solid var(--line);padding:14px 20px 18px;
  font-size:14px;color:var(--ink-2);line-height:1.5;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.mfoot .mtel{display:block;font-size:18px;font-weight:600;color:var(--ink);
  text-decoration:none;margin-bottom:6px}
.mfoot .mfine{display:inline-block;margin-top:10px;font-size:13px}

/* Подвал страницы: стена из 16 ссылок уехала в меню, осталась справка.
   Замер 04.08: было 376-410px на каждой из 39 страниц. */
footer{padding:20px 0 28px}