/* #4014 (11.11.2026): нижняя панель телефона на ВСЕХ страницах витрины (кроме оформления заказа).
   Переехала из home_mobile.css (#4011, была только на главной). Подключается в base.html после shop.css.
   Вне медиа-запроса здесь лишь display:none: компьютерный вид не меняется (панель в разметке есть и на ПК).
   Всё, что опирается на body:has(#mtab), — строго внутри ≤768. Откат — удалить <link> mtab.css в base.html
   и вернуть правила .mtab в home_mobile.css (копия docs/work/shop_mobile_vs_vi_10112026/diffs/). */

.mtab { display: none; }

@media (max-width: 768px) {
  /* панель — ниже шапки (z 100: меню каталога и его подложка перекрывают панель), выше контента */
  .mtab {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid #E5E5E5; box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .mtab__i {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 50px; color: #141414; text-decoration: none; font-size: 11px; font-weight: 600; line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab__i:hover, .mtab__i:active, .mtab__i:focus { color: #141414; }
  .mtab__i svg { flex: none; }
  /* активный пункт: не только цвет — плашка-«пилюля» за иконкой */
  .mtab__ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 28px; border-radius: 14px; }
  .mtab__i[aria-current="page"], .mtab__i[aria-current="page"]:hover, .mtab__i[aria-current="page"]:focus { color: #C2410C; }
  .mtab__i[aria-current="page"] .mtab__ic { background: #FFF4EC; }
  #mtab-call, #mtab-call:hover, #mtab-call:focus { color: #C2410C; }
  .mtab__badge {
    position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #F26B1D; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  }
  .mtab__badge[hidden] { display: none; }

  /* клавиатура открыта (класс ставит скрипт панели в base.html) — панель не прыгает над клавиатурой */
  body.kb-open .mtab { display: none; }

  /* запас подвалу под панель; на карточке товара работает правило shop.css max(120px, …) — в нём тот же --mb-h */
  body:has(#mtab):not(:has(.pv2-mbuy)) .footer > .container {
    padding-bottom: calc(var(--ck-h, 0px) + var(--mb-h, 0px) + var(--cmp-h, 0px) + 16px);
  }

  /* карточка: полоса покупки — над панелью (--tb-h ставит _shopBottomStack; без скрипта 0 — как раньше) */
  /* body — вес выше правила product.html:449 (.pv2 .pv2-mbuy{bottom:0}, стоит позже в шаблоне) */
  body .pv2 .pv2-mbuy { bottom: var(--tb-h, 0px); }

  /* поиск 16px на всех страницах: iPhone не приближает страницу при фокусе (#1674); фокус ставит и «Поиск» панели */
  .search-bar input { font-size: 16px; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mtab, .mtab__i, .mtab__ic { transition: none; animation: none; }
}