/*
 * Нижняя панель навигации на мобильном.
 *
 * ЗАЧЕМ. Ниже 1060px шаблон прячет поиск и вход (`.header-list-search`,
 * `.header-list-account`), и на телефоне до кабинета и поиска было не
 * добраться вовсе. Панель возвращает их — и заодно корзину, которая по макету
 * уходит из шапки вниз.
 *
 * ПОРОГ 1060 выбран не произвольно: ровно на нём эти два пункта исчезают из
 * шапки. Появляться панель должна там же, где образуется дыра, иначе на
 * планшете получится и то, и другое сразу.
 *
 * Отдельный файл, а не правка main.min.css: тот минифицирован, правка в нём не
 * читается в диффе. Так же сделаны heine-region.css и heine-account.css.
 */

.heine-mobilenav { display: none; }

@media only screen and (max-width: 1060px) {

  .heine-mobilenav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 1px solid #e0e2e3;
    /* Нижний отступ больше верхнего — под жестовую полосу телефонов без кнопки. */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 16px));
  }

  .heine-mobilenav a,
  .heine-mobilenav button {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: #3a4045;
    text-decoration: none;
    position: relative;
  }

  .heine-mobilenav .heine-mobilenav-label { font-size: 11px; line-height: 1.1; }

  /* Текущий раздел. Цвет тот же, что у акцентов шаблона. */
  .heine-mobilenav .is-current { color: #00995c; }

  /* Счётчик корзины. Пустой не показываем: ноль на кнопке читается как ошибка. */
  .heine-mobilenav .cart_number {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #00995c;
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .heine-mobilenav .cart_number:empty,
  .heine-mobilenav .cart_number.is-zero { display: none; }

  /* Панель закрывает низ страницы — подвалу нужен запас РОВНО в её высоту.
     48 (кнопка) + 6 + 6 (отступы) + 1 (граница) = 61, плюс полоса жестов.
     Больше нельзя: лишнее превращается в пустую полосу под подвалом. */
  body { padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }

  /* Корзина уехала вниз — в шапке она дублировалась бы. */
  .header-list-basket { display: none; }

  /* ВЫСОТУ ШАПКИ НА МОБИЛЬНОМ ДЕРЖАЛА КНОПКА КОРЗИНЫ, и это выяснилось
     неприятным способом: спрятав её, я схлопнул шапку с 63 пикселей до 34 —
     логотип прижало к верхнему краю, а зарезервированные под шапку 63
     пикселя (`body { padding-top }` в main.min.css) остались, и под ней
     повисла пустая полоса.

     Поэтому высота задаётся явно, а не набирается содержимым. Шапка не должна
     зависеть от того, какие кнопки в ней сегодня есть: завтра уедет ещё одна,
     и всё повторится. Значение то же, что было: 62 плюс граница снизу. */
  .header .wrapper { min-height: 62px; }
}