/* ============================================================
   Шапка — вариант 5 (белый фон, плиточные соцсети,
   иконки избранного/корзины/профиля в салатовой «пилюле»,
   зелёный бургер у «Каталога»)

   Файл-надстройка: подключается ПОСЛЕ styles.css.
   Чтобы откатить дизайн — убрать одну строку подключения
   в header.php (Asset::getInstance()->addCss(.../header-v5.css)).

   Всё, что относится к десктопной шапке, обёрнуто в
   @media (min-width: 1011px) — мобильная версия не меняется.
   ============================================================ */

:root {
  --p5-green: #6bc42b;          /* фирменный акцент (как у бейджа корзины) */
  --p5-green-soft: #eaf6e2;     /* заливка «пилюли» справа */
  --p5-line: #e6e9e6;           /* тонкие разделители и рамки */
  --p5-ink: #1c1f1d;            /* основной тёмный текст */
  --p5-ink-2: #647569;          /* приглушённый текст */
}

/* --- 1. Общий фон шапки: серый -> белый ------------------- */
.header {
  background: #fff;
}

.topmenu2 {
  background: #fff;
  border-bottom: 1px solid var(--p5-line);
}

/* --- 2. Поиск: скруглённое поле --------------------------- */
.custom_search {
  border: solid 1px #dfe3e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.custom_search:focus-within {
  border-color: var(--p5-green);
  box-shadow: rgba(107, 196, 43, 0.15) 0 0 0 3px;
}

/* --- 3. Кнопка «Каталог»: зелёный бургер ------------------ */
/* только иконка, отступы мобильной версии не трогаем */
.nav_menu > li:first-child,
.nav_menu > li:first-child:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Cg fill='%236bc42b'%3E%3Crect width='22' height='2.4' rx='1.2' y='0'/%3E%3Crect width='22' height='2.4' rx='1.2' y='6.8'/%3E%3Crect width='22' height='2.4' rx='1.2' y='13.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 50%;
  color: var(--p5-ink);
}

.nav_menu > li:first-child:hover > a,
.nav_menu > li:first-child > a:hover {
  color: var(--p5-green);
}

/* --- 4. Верхнее меню -------------------------------------- */
.topmenu a,
.topmenu a:hover {
  color: #3c4a41;
}

.topmenu a:hover {
  color: var(--p5-green);
}

/* ============================================================
   Десктопная шапка
   ============================================================ */
@media (min-width: 1011px) {

  /* --- 5. Телефоны ---------------------------------------- */
  /* Кнопка «Заказать звонок» убрана из вёрстки (header.php),
     а у контейнера была жёсткая ширина 380px под «телефоны + кнопка».
     Оставляем ширину по содержимому — иначе справа от номеров
     висит ~185px пустоты, и блоки шапки распределены неровно. */
  .header_first .header_line1 {
    width: auto;
  }

  /* У обеих строк с номерами был margin-bottom: 6px, из-за чего
     нижний отступ внутри блока оказывался на 6px больше верхнего
     и номера сидели на 3px выше центра. Убираем у последней строки. */
  .header_first .header_tel .h_whatsapp {
    margin-bottom: 0;
  }

  /* у 8 800 появляется иконка трубки (раньше был пустой отступ) */
  .header_first .h_whatsapp1 > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23556b5d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 50%;
    color: var(--p5-ink);
  }

  .header_first .h_whatsapp > a {
    color: var(--p5-ink);
  }

  /* «Заказать звонок» — светлая кнопка под белый фон */
  .header_first .hcall_link,
  .header_first .hcall_link:hover {
    background-color: #fff;
    border: solid 1px var(--p5-line);
    color: var(--p5-ink-2);
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
  }

  .header_first .hcall_link:hover {
    border-color: var(--p5-green);
    color: var(--p5-ink);
    box-shadow: rgba(107, 196, 43, 0.18) 0 0 0 3px;
  }

  /* --- 6. Соцсети: цветные плитки со скруглением ---------- */
  .header_first .header_social {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header_first .header_social .soc1,
  .header_first .header_social .soc1:hover,
  .header_first .header_social .soc2,
  .header_first .header_social .soc2:hover,
  .header_first .header_social .soc3,
  .header_first .header_social .soc3:hover {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-image: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .header_first .header_social .soc1::after,
  .header_first .header_social .soc2::after,
  .header_first .header_social .soc3::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  /* у ВК и ОК глиф берём из существующих PNG и перекрашиваем в белый */
  .header_first .header_social .soc2::after,
  .header_first .header_social .soc3::after {
    filter: brightness(0) invert(1);
  }

  .header_first .header_social .soc1 {
    background-color: #29a5e4; /* Telegram */
  }
  /* soc1.png — это залитый синий круг с белым самолётиком,
     перекрасить его нельзя, поэтому рисуем самолётик отдельно */
  .header_first .header_social .soc1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23.91 3.79 20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z'/%3E%3C/svg%3E");
    background-size: 19px 19px;
  }

  .header_first .header_social .soc2 {
    background-color: #0077ff; /* ВКонтакте */
  }
  .header_first .header_social .soc2::after {
    background-image: url(../images/soc2.png);
    background-size: 21px 12px;
  }

  .header_first .header_social .soc3 {
    background-color: #ee8208; /* Одноклассники */
  }
  .header_first .header_social .soc3::after {
    background-image: url(../images/soc3.png);
    background-size: 12px 19px;
  }

  .header_first .header_social .soc1:hover,
  .header_first .header_social .soc2:hover,
  .header_first .header_social .soc3:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.18) 0 4px 10px;
  }

  /* --- 7. Почта ------------------------------------------- */
  .header_first .header_mail strong {
    color: var(--p5-ink);
  }

  /* --- 8. Правая группа иконок в салатовой «пилюле» ------- */
  .header_first .header_right {
    width: auto;
    gap: 14px;
    justify-content: flex-end;
    background: var(--p5-green-soft);
    border-radius: 999px;
    padding: 4px 14px;
  }

  /* Глиф профиля прижат к левому краю своего бокса
     (background-position: 0% 50%), а сердце и корзина отцентрованы —
     из-за этого просвет «корзина → профиль» получался вдвое уже
     соседнего. Сдвигаем глиф на 12px и расширяем бокс, чтобы
     стрелка не прилипла к профилю. Итог: 34 / 34 / 12px. */
  .header_first .helink,
  .header_first .helink:hover {
    width: 58px;
    background-position: 12px 50%, 100% 50%;
  }

  .header_first .header_right .header-table__td {
    display: flex;
    align-items: center;
  }

  /* счётчики компактнее, чтобы аккуратно лечь внутрь пилюли */
  .header_first .cart_link em,
  .header_first .fav_link em {
    top: 1px;
    right: 0;
    width: 18px;
    height: 18px;
    line-height: 17px;
    font-size: 11px;
  }

  /* --- 9. «Каталог»: отступы под новую иконку ------------- */
  .nav_menu > li:first-child {
    padding-left: 30px;
  }

  .nav_menu > li:first-child > a {
    padding: 0 25px 0 8px;
    letter-spacing: 0.4px;
  }

  /* Выравниваем полоски по тексту «КАТАЛОГ», а не по высоте li.
     Ссылка внутри имеет border-bottom: 4px (прозрачное подчёркивание
     для :hover) — он поджимает текст вверх на 2px. Плюс 0.5px разницы
     между центром font-box и оптическим центром заглавных букв
     (у «КАТАЛОГ» нет выносных элементов вниз). Итого −2.5px. */
  .nav_menu > li:first-child,
  .nav_menu > li:first-child:hover {
    background-position: 0 calc(50% - 2.5px);
  }

  /* Вертикальный разделитель между «Каталогом» и поиском.
     ВАЖНО: рисуем его фоном, а НЕ через position:relative + ::after.
     Выпадающее меню .nav_menu .submenu позиционируется абсолютно с
     width:100%, и его контейнером должен оставаться .topmenu2 .fixed
     (1180px). Стоит сделать nav позиционированным — и меню
     схлопывается до ширины nav (145px). */
  nav {
    background-image: linear-gradient(to bottom, var(--p5-line), var(--p5-line));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1px 28px;
  }
}