/* Мобильная версия сайта — по образцу сайта компании ituslugi.pro: шторка-меню на всю
   высоту вместо выпадающего списка в шапке и закреплённая нижняя панель действий.
   В проде по умолчанию с 10.09.2026; ?m=1 возвращает прежний вид. Все правила висят на
   html.m2 и работают только на узких экранах — десктоп не затрагивается. */
@media (max-width:900px){
  html.m2 body{padding-bottom:76px}          /* место под нижнюю панель */

  /* шапка: бургер-пилюля, выпадающего меню больше нет */
  html.m2 .nav{padding-top:12px;padding-bottom:12px}
  html.m2 .nav.open{background:transparent;backdrop-filter:none}
  html.m2 .nav.open .nav-links,
  html.m2 .nav.open .nav-cta{display:none}
  html.m2 .burger{width:42px;height:42px;border:1px solid var(--ink-3);border-radius:999px;
    background:rgba(23,21,20,.6);backdrop-filter:blur(10px);align-items:center;justify-content:center;gap:4px}
  html.m2 .burger span{width:16px}

  /* шторка */
  .m2-drawer{position:fixed;inset:0;z-index:120;display:block}
  .m2-drawer[hidden]{display:none}
  .m2-veil{position:absolute;inset:0;background:rgba(8,7,7,.72);backdrop-filter:blur(8px);border:0}
  .m2-sheet{position:absolute;right:0;top:0;height:100%;width:88%;max-width:400px;overflow-y:auto;
    background:var(--ink);border-left:1px solid var(--ink-3);padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    box-shadow:-30px 0 60px -20px rgba(0,0,0,.8);animation:m2-in .22s ease-out}
  @keyframes m2-in{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
  .m2-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
  .m2-x{width:42px;height:42px;border-radius:999px;border:1px solid var(--ink-3);background:none;
    color:var(--sand);font-size:1.1rem;cursor:pointer}
  .m2-nav{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
  .m2-nav a{padding:14px 16px;border-radius:16px;font-size:1.06rem;font-weight:500}
  .m2-nav a:active{background:var(--ink-2)}
  .m2-book{display:block;text-align:center;padding:15px;border-radius:16px;background:var(--accent);
    color:#fff;font-weight:600;margin-bottom:14px}
  .m2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .m2-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;
    border:1px solid var(--ink-3);border-radius:16px;font-size:.86rem;font-weight:600;text-align:center}
  .m2-tile span.ic{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800}
  .m2-tile .max{background:#0078ff}
  .m2-tile .tel{background:#2f7d4f}
  .m2-note{margin-top:18px;color:var(--sand-2);font-size:.84rem;line-height:1.5}

  /* нижняя панель действий */
  .m2-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1.25fr;
    gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(14,13,12,.94);backdrop-filter:blur(14px);border-top:1px solid var(--ink-3)}
  .m2-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 6px;border-radius:14px;font-size:.72rem;color:var(--sand-2);border:1px solid transparent}
  .m2-bar a b{font-size:1.05rem;line-height:1}
  .m2-bar a.primary{background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;flex-direction:row}
  .m2-bar a:not(.primary):active{border-color:var(--ink-3);background:var(--ink-2)}

  /* плавающая кнопка помощи видна и на телефоне (как на сайте компании), только поднята
     над нижней панелью, чтобы её не перекрывать */
  html.m2 .fab{bottom:calc(84px + env(safe-area-inset-bottom));right:14px}
}
@media (min-width:901px){ .m2-drawer,.m2-bar{display:none} }