/* ==========================================================================
   Мобильная шапка/меню — вариант B (согласован в мокапе, чат 2026-09-10)
   Отдельный модуль, без Bootstrap. Разметка — views/header.pug (.mnav*),
   поведение — public/scripts/mobile-nav.js.

   Активен ТОЛЬКО на ширине <=767px (тот же брейкпоинт, что уже использует
   остальной сайт в style.css). На этой ширине скрывает старую шапку
   (.top1_wrapper/.top2_wrapper/.top3_wrapper) — они остаются нетронутыми
   и продолжают работать как раньше на десктопе/планшете.
   ========================================================================== */

.mnav{ display:none; }
.groups-mobile{ display:none; }
.intro-heading{ display:none; }

@media (max-width:767px){

  .top1_wrapper, .top2_wrapper, .top3_wrapper{ display:none !important; }

  .mnav{ display:block; }

  body{
    padding-top:86px;
    padding-bottom:78px;
  }

  .mnav-ic{
    width:1em; height:1em; display:block;
    fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round;
  }

  /* ---------- закреплённая шапка ---------- */
  .mnav-head{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid rgba(15,25,35,.08);
    font-family:'Rubik', Arial, sans-serif;
  }
  .mnav-row1{ display:flex; align-items:center; gap:6px; padding:12px 14px 10px; }
  .mnav-logo{ flex:1; display:flex; align-items:center; text-decoration:none; }
  .mnav-logo img{ width:111px; height:auto; display:block; } /* = доходит примерно до "279" в номере строкой ниже */
  .mnav-icon-btn{
    width:40px; height:40px; border-radius:10px; border:none; background:transparent;
    display:flex; align-items:center; justify-content:center; color:#526375; font-size:23px;
    position:relative; cursor:pointer; text-decoration:none; padding:0;
  }
  .mnav-icon-btn:active{ background:#e4eaef; color:#16232f; }
  .mnav-badge{
    /* .my_cart_icon уже занято старым (десктопным) стилем корзины в
       style.css (47x47 круг с картинкой) — сбрасываем явно всё, что
       иначе просочилось бы по одинаковой специфичности селектора. */
    position:absolute; top:2px; right:2px; width:auto; width:max-content; min-width:14px; height:14px; border-radius:7px;
    background:#e79a1e !important; color:#5c3b00; font-size:9px; font-weight:700; line-height:14px; text-align:center;
    border:1.5px solid #fff; padding:0 2px; box-sizing:content-box;
  }
  .mnav-badge span{
    position:static; background:none; width:auto; height:auto; line-height:inherit;
    color:inherit; font-size:inherit; border-radius:0;
  }
  .mnav-row2{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:0 14px 11px; font-size:15px; font-weight:500; color:#31404c;
  }
  .mnav-row2 a{ color:#31404c; text-decoration:none; display:flex; align-items:center; gap:6px; }
  .mnav-row2 .mnav-ic{ color:#e79a1e; font-size:16px; }
  .mnav-city{ font-size:12px; font-weight:400; color:#8494a3; }
  .mnav-city{ display:flex; align-items:center; gap:4px; }

  /* ---------- плавающая нижняя панель ---------- */
  .mnav-tabbar{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:1000;
    display:flex; background:rgba(255,255,255,.72);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(15,25,35,.08); border-radius:20px;
    box-shadow:0 10px 30px -14px rgba(22,35,47,.35);
    font-family:'Rubik', Arial, sans-serif;
  }
  .mnav-tabbar a, .mnav-tabbar button{
    flex:1; background:none; border:none; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10px; color:#8494a3; padding:9px 0 8px; cursor:pointer;
  }
  .mnav-tabbar .mnav-ic{ font-size:18px; }
  .mnav-tabbar a.active{ color:#16232f; font-weight:600; }
  .mnav-tabbar a.active .mnav-ic{ color:#e79a1e; }

  /* ---------- полноэкранный каталог/поиск ---------- */
  .mnav-catalog{
    position:fixed; inset:0; z-index:1200;
    background:#fff;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column;
    font-family:'Rubik', Arial, sans-serif;
  }
  .mnav-catalog.open{ transform:translateY(0); }
  .mnav-catalog-head{
    display:flex; align-items:center; gap:8px;
    padding:14px; padding-top:calc(14px + env(safe-area-inset-top, 0px));
    border-bottom:1px solid #d7dfe5; background:#f4f6f8; color:#8494a3; margin:0;
  }
  .mnav-catalog-head input{
    flex:1; border:none; background:transparent; outline:none;
    font-size:15px; font-family:'Rubik', Arial, sans-serif; color:#16232f;
  }
  .mnav-catalog-head button{
    border:none; background:none; font-size:20px; line-height:1; color:#526375; cursor:pointer; padding:4px;
  }
  .mnav-catalog-list{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:100px; }
  .mnav-acc{ border-bottom:1px solid #e4eaef; }
  .mnav-acc-head{
    width:100%; display:flex; align-items:center; gap:10px;
    padding:15px 16px; background:none; border:none; text-align:left;
    font-family:'Rubik', Arial, sans-serif; font-weight:600; font-size:15px; color:#16232f; cursor:pointer;
  }
  .mnav-chev{ margin-left:auto; color:#8494a3; transition:transform .18s; font-size:14px; }
  .mnav-acc.open .mnav-chev{ transform:rotate(90deg); }
  .mnav-acc-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; background:#f4f6f8; }
  .mnav-acc.open .mnav-acc-panel{ max-height:600px; }
  .mnav-group{ padding:10px 16px 4px 30px; }
  .mnav-group-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:#8494a3; margin-bottom:4px; }
  .mnav-group a{ display:block; padding:7px 0; font-size:14px; color:#526375; text-decoration:none; }
  .mnav-acc-flat{
    display:block; padding:15px 16px; font-weight:600; font-size:15px; color:#16232f;
    text-decoration:none; border-bottom:1px solid #e4eaef;
  }

  body.mnav-lock{ overflow:hidden; }

  /* ---------- главная: карточки товарных групп вместо списка-плитки ---------- */
  .groups-desktop{ display:none; }

  /* Главная: сначала бренд + карточки товарных групп, длинный
     представительский текст — вниз, после карточек (реально видимый порядок
     на телефоне, не просто визуальный сдвиг — .index-content становится
     flex-колонкой с order на детях; на остальных 31 шаблонах, где тоже есть
     .column-content, этот блок не срабатывает — там нет класса .index-content). */
  .index-content{ display:flex; flex-direction:column; }
  .groups-mobile{ display:block; order:3; padding:4px 14px 4px; }
  .index-content > .groups-label{ display:none; }
  /* H1 наверху дублировал картинку логотипа — переносим его вниз, к тексту:
     читается как «ООО СтройМетиз — современное промышленное предприятие...»,
     та же пара «название + тире», что и на десктопе. */
  .index-content > h1{ order:4; margin:26px 0 10px; }
  .index-content > p.intro-1{ order:5; }
  .index-content > p.intro-2{ order:6; }
  .index-content > p.intro-3{ order:7; }
  .groups-mobile h3{
    font-family:'Rubik', Arial, sans-serif; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; color:#16232f; margin:0 0 18px;
  }
  .mnav-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mnav-card{
    display:flex; flex-direction:column; gap:8px; text-decoration:none;
    background:#fff; border:1px solid #d7dfe5; border-radius:14px; padding:10px;
  }
  .mnav-card img{ width:100%; height:84px; object-fit:cover; border-radius:8px; background:#e4eaef; }
  .mnav-card span{ font-family:'Rubik', Arial, sans-serif; font-size:12px; font-weight:600; color:#16232f; line-height:1.25; }
}