/* ============================================================
   Шапка сайта (header) — по макету Figma
   Варианты: cabinet (авторизован) и guest (вход)
   Логотип — настоящий SVG с sivikshop.ru
   ============================================================ */

.site-header {
  height: var(--header-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 0 var(--gutter);
}

/* Логотип + город */
.site-header__brand { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.site-header__brand:hover { text-decoration: none; }
.site-header__city { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fz-12); color: var(--c-text-2); }
.site-header__logo img { height: 30px; width: auto; display: block; }

/* Кнопка «Каталог» */
.catalog-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-5);
  background: var(--c-primary); color: var(--c-on-primary);
  border: none; border-radius: var(--r-sm);
  font-size: var(--fz-16); font-weight: var(--fw-medium);
}
.catalog-btn:hover { background: var(--c-primary-dark); }

/* Поиск */
.header-search { flex: 1 1 auto; max-width: 440px; position: relative; }
.header-search__input {
  width: 100%; height: 40px;
  padding: 0 var(--sp-4) 0 40px;
  background: var(--c-field-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fz-14);
}
.header-search__input::placeholder { color: var(--c-muted); }
.header-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }

/* Красная плашка-баннер на гостевой шапке (как в макете) */
.header-banner { flex: 0 0 auto; width: 130px; height: 36px; background: var(--c-accent); border-radius: var(--r-sm); }

/* Телефоны */
.header-phones { flex: 0 0 auto; font-size: var(--fz-13); line-height: 1.4; }
.header-phones__row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.header-phones__main { font-weight: var(--fw-bold); color: var(--c-text); }
.header-phones__label { color: var(--c-accent); font-weight: var(--fw-bold); }
.header-phones__icon { color: var(--c-primary); }

/* Правый блок: профиль/пользователь/выход/корзина */
.header-actions { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.header-user { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fz-14); color: var(--c-text); font-weight: var(--fw-medium); }
.header-user__icon { color: var(--c-primary); }
.header-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fz-14); color: var(--c-text-2); }
.header-link:hover { color: var(--c-link); text-decoration: none; }
.header-icon-link { color: var(--c-primary); line-height: 0; }
.header-logout { white-space: nowrap; }

/* Корзина с бейджем */
.header-cart { position: relative; color: var(--c-text); }
.header-cart__badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--c-accent); color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
}

/* Бургер мобильного меню (скрыт на десктопе) */
.burger { display: none; background: none; border: none; color: var(--c-text); padding: 4px; }

/* --- Адаптив шапки --- */
@media (max-width: 1280px) {
  .header-phones { display: none; }
  .site-header { gap: var(--sp-4); }
}
@media (max-width: 768px) {
  .burger { display: inline-flex; }
  .header-search, .header-banner { display: none; }
  .catalog-btn span { display: none; }
  .catalog-btn { padding: 0 var(--sp-3); }
  .header-user__name, .header-logout { display: none; }
  .site-header { gap: var(--sp-3); padding: 0 var(--sp-4); }
}