/* =========================================================
   DomParketa78.ru — переопределение стилей шапки (хедера)
   Подключать ПОСЛЕ основного файла стилей темы.
   ========================================================= */

/* ---------- ДЕСКТОП (>= 768px): компактный + современный хедер ---------- */
@media (min-width: 768px) {

  div.top {
    padding: 14px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Логотип */
  td.logo {
    padding: 0 14px !important;
  }
  img.image-logo {
    width: 110px !important;
    height: auto !important;
  }
  .slogan {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  /* Телефон */
  .header-phones .span {
    font-size: 16px !important;
    padding-left: 34px !important;
  }
  .header-phones a {
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  .header-phones .span::before {
    width: 15px !important;
    height: 17px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    /* у темы top:1px рассчитан под старый (26px) размер иконки — при
       уменьшении иконка "уезжала" от центра строки с номером. Центрируем
       по вертикали независимо от точного размера. */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Корзина */
  .cart-summary__icon {
    width: 30px !important;
    height: 28px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    /* аналогично — было top:10px под исходную иконку 55x51 */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .cart-summary .pointer {
    padding: 6px 10px 6px 42px !important;
  }
  .cart-summary {
    font-size: 12px !important;
  }
  .cart-summary .head {
    font-size: 12px !important;
  }

  /* Вход / Регистрация — чуть плотнее к корзине */
  td.header-basket {
    padding: 0 14px !important;
  }

  /* Панель иконок справа (.fixed-links) — из плоской колонки впритык к краю
     в плавающий вертикально-центрированный "док" с отступом от края,
     скруглением и промежутками между иконками. Цвета плиток не трогаем —
     иконки в теме растровые (спрайт fixed-links.png), поэтому оставляем
     исходный тёмный фон плиток, чтобы не потерять контраст белых иконок. */
  .fixed-links {
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    width: 56px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .fixed-links__item {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .fixed-links__item-link {
    transition: transform 0.2s ease !important;
  }
  .fixed-links__item-link:hover {
    transform: scale(1.08) !important;
  }
}

/* ---------- МОБИЛЬНАЯ ВЕРСИЯ (<= 767px) ---------- */
@media (max-width: 767px) {

  /* Верхний паддинг маленький — панель иконок больше не сидит сверху.
     Нижний паддинг оставляем — под ним всплывает блок поиска темы
     (у него top:-50px абсолютным позиционированием). */
  div.top {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 10px 12px 54px !important;
  }

  /* Строка хедера как flex, чтобы поставить лого + телефон в один ряд */
  div.top table.table {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  div.top table.table tbody {
    display: contents !important;
  }
  div.top table.table tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Лого — маленькое, слева */
  td.logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  td.logo > div {
    display: flex !important;
    align-items: center !important;
  }
  img.image-logo {
    width: 56px !important;
    height: auto !important;
  }
  .slogan {
    display: none !important; /* при таком размере лого текст под ним нечитаем */
  }

  /* Телефон — меньше, справа от лого */
  td.header-contacts {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 0 0 10px !important;
    text-align: right !important;
  }
  .header-phones .span {
    font-size: 13px !important;
  }
  .header-phones a {
    font-size: 15px !important;
  }
  .header-phones .span::before {
    width: 11px !important;
    height: 13px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  /* Блок "Корзина" + "Вход/Регистрация" в хедере — убираем целиком:
     корзина и личный кабинет теперь в нижнем таб-баре (.fixed-links) */
  td.header-basket {
    display: none !important;
  }

  /* Панель иконок (.fixed-links) — переносим из фиксированной полосы сверху
     в нижний таб-бар в стиле мобильных приложений: со скруглёнными верхними
     углами, во всю ширину, иконки распределены равномерно */
  .fixed-links {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important; /* сброс исходного translateX(-50%) центрирования */
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
  }
  .fixed-links__item {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 54px !important;
  }

  /* Место под таб-бар снизу, чтобы он не перекрывал контент/футер */
  body {
    padding-bottom: 58px !important;
  }

  /* Кнопка "наверх" (#up) — поднимаем над новым нижним таб-баром */
  #up {
    bottom: 66px !important;
  }
}