/**
 * PATCH 5.0 — Mobile Header Fix (Stage 0)
 *
 * Скоуп: body.kp-body (баг СИСТЕМНЫЙ — общий header.php грузится на всех
 *        kp-страницах через kp_is_kpromo_template).
 *
 * Решает:
 *   .kp-topbar-row = flex (по умолчанию nowrap) + длинный контент
 *   (полный адрес + часы + email + ЛК + 3 мессенджера). На мобиле
 *   скрыт только .kp-tb-item:nth-child(2) (main.css:587) — остаток
 *   переполняет ~390px, body.kp-body{overflow-x:clip} (patch-1.4)
 *   обрезает overflow → топбар «ломается» и при скролле sticky
 *   .kp-snav-wrap (z-index:50) «наезжает» поверх него.
 *
 * Причина — НЕ Woodmart sticky-clone: в DOM нет ни одного
 * <header>/.whb-header (header.php полностью перекрывает Woodmart),
 * JS-шаблон whb-sticky-header whb-clone инертен. Фикс — только CSS.
 *
 * Стратегия (вариант A — компактный, B2B-контакты сохраняем):
 *   ≤760  — прячем длинную левую группу (адрес+часы),
 *           email + ЛК + мессенджеры остаются по центру;
 *   ≤480  — дополнительно прячем текст email (мессенджеры + ЛК остаются).
 *
 * !important — точечно (font-size + ≤480 mailto): перебиваем
 * существующие !important из patch-1.9 (body.kp-body .kp-topbar
 * { font-size:15px !important } и .kp-tb-item { display:inline-flex
 * !important }). Перебить !important можно только !important —
 * это «необходимость» по правилу CLAUDE.md, не произвол.
 * Все остальные правила — без !important, через специфичность.
 */

/* ───── ≤980 — ужимаем, разрешаем перенос, мельче шрифт ───── */
@media (max-width: 980px) {
  body.kp-body .kp-topbar-row {
    flex-wrap: wrap;
    gap: 4px 16px;
    min-height: 0;
    padding: 6px 0;
  }
  /* перебивает patch-1.9 `body.kp-body .kp-topbar{font-size:15px!important}` */
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 13px !important;
  }
}

/* ───── ≤760 — компактный топбар по центру ───── */
@media (max-width: 760px) {
  /* длинный адрес + часы не нужны на мобиле (специфичность 0,0,2,1 >
     main.css .kp-topbar-left 0,0,1,0 — !important не требуется) */
  body.kp-body .kp-topbar-left {
    display: none;
  }
  body.kp-body .kp-topbar-row {
    justify-content: center;
    padding: 5px 0;
  }
  body.kp-body .kp-topbar-right {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 12px !important;
  }
}

/* ───── ≤480 — ещё компактнее: прячем текст email ───── */
@media (max-width: 480px) {
  /* .kp-tb-item имеет display:inline-flex !important из patch-1.9 —
     перебиваем !important'ом (необходимость, не произвол) */
  body.kp-body .kp-topbar-right .kp-tb-item[href^="mailto"] {
    display: none !important;
  }
  body.kp-body .kp-topbar-right {
    gap: 14px;
  }
}