/* =========================
   SAFE HEADER FIX — MOBILE ONLY
   Paste at the VERY END of CSS on every page
   ========================= */

@media (max-width: 768px){

  /* header должен уметь сжиматься по ширине (важно для Android/Chrome) */
  .header-inner{
    height: auto !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .header-inner > *{
    min-width: 0 !important; /* ключ: иначе flex-элементы не сжимаются и начинают ломать ряд */
  }

  /* ЛОГО: НЕ переносим на 2 строки — вместо этого сжимаем */
  .logo{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;

    flex-wrap: nowrap !important;     /* было wrap — из-за этого “ломало” */
    white-space: nowrap !important;
    overflow: hidden !important;

    gap: 8px !important;
    line-height: 1 !important;
  }

  /* СЕПАРАТОР: убираем любые “100px” и фиксируем нормальную высоту */
  .logo-sep,
  a.logo > .logo-sep{
    width: 2px !important;
    height: 28px !important;
    margin: 0 8px !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: #000 !important; /* как ты хотел */
  }

  /* Картинки логотипов: управляем ВЫСОТОЙ, а ширину даём сжимать */
  .logo-imgr{
    width: auto !important;
    height: 28px !important;
    max-width: 34vw !important;       /* чтобы на очень узких помещалось */
    object-fit: contain !important;   /* НЕ cover */
    flex: 0 1 auto !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  .logot{
    width: auto !important;
    height: 32px !important;
    max-height: 32px !important;
    max-width: 36vw !important;
    object-fit: contain !important;
    flex: 0 1 auto !important;
    display: block !important;
  }

  /* Правая группа: не даём ей сжиматься и “выталкивать” лого вниз */
  .header-actions{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .header-icons{
    flex: 0 0 auto !important;
    gap: 10px !important;
  }
}

/* Очень узкие экраны — ещё компактнее (типичные маленькие Android) */
@media (max-width: 380px){

  .header-inner{
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .logo-sep,
  a.logo > .logo-sep{
    height: 24px !important;
    margin: 0 7px !important;
  }

  .logo-imgr{ height: 24px !important; max-width: 33vw !important; }
  .logot{ height: 28px !important; max-height: 28px !important; max-width: 37vw !important; }

  .header-icon{ width: 40px !important; height: 40px !important; }
  .header-icons{ gap: 8px !important; }
  .header-actions{ gap: 8px !important; }
}

/* Супер-узкие (редко, но бывает) */
@media (max-width: 340px){
  .logo-imgr{ height: 22px !important; }
  .logot{ height: 26px !important; max-height: 26px !important; }
  .header-icon{ width: 38px !important; height: 38px !important; }
}

@media (max-width: 390px){
  .header-icons .header-mail{ display:none !important; }
}