/* =============================================================================
   Header v3 — two white rows (loaded only when HEADER_VARIANT = 'v3').

     row 1  ·  large logo                    phone · Конфигуратор · Войти · Заявка
     row 2  ·  Покупателям/Партнёрам   nav          VK TG RT · RU · search

   Why two rows again. v2 tried to fit a 2× logo and the full nav on one line;
   the measured content was 1865px against 1300px of space, so the nav had to
   collapse to a burger at 1280px — losing navigation on ordinary 1366px
   laptops. Splitting the same elements over two rows removes that conflict
   entirely: the logo keeps its full size and the nav keeps a whole row, so it
   survives down to 1080px.

   Nothing here touches style.css — ?hdr=v1 / ?hdr=v2 still render as before.
   ========================================================================== */

.site-header--v3 { background: #fff; }

/* ---- row 1: logo + contact/account actions ------------------------------ */
.site-header--v3 .hdr-top { border-bottom: 1px solid var(--c-border); }
.site-header--v3 .hdr-top__inner {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 92px; transition: min-height .3s var(--t);
}
.site-header--v3 .hdr-top .logo { flex: 0 0 auto; margin-right: auto; }
.site-header--v3 .hdr-top .logo img {
  height: 72px; width: auto; transition: height .3s var(--t);
}
.site-header--v3 .hdr-top__right {
  display: inline-flex; align-items: center; gap: .9rem; flex: 0 0 auto;
}

/* ---- row 2: audience switch + nav + utilities --------------------------- */
.site-header--v3 .mainbar { height: 62px; }
.site-header--v3.scrolled .mainbar { height: 62px; }
.site-header--v3 .mainbar__inner { display: flex; align-items: center; gap: 1.4rem; width: 100%; }

/* v1 pushes the nav right with `.mainbar__inner > .mainnav{margin-left:auto}`;
   here the audience switch owns the left edge and the nav follows it. */
.site-header--v3 .mainbar__inner > .aud-switch { flex: 0 0 auto; margin-right: .6rem; }
.site-header--v3 .mainbar__inner > .mainnav { margin-left: 0; margin-right: auto; }
.site-header--v3 .mainnav__list { gap: 1.35rem; }
.site-header--v3 .mainnav__list > li > a { font-size: .9rem; white-space: nowrap; }

/* The audience switch was styled for v1's dark strip — restate it for white. */
.site-header--v3 .aud-switch {
  padding: 3px; background: var(--c-bg-alt);
  border: 1px solid var(--c-border); border-radius: 10px !important;
}
.site-header--v3 .aud-switch__btn {
  padding: .42rem .95rem; font-size: .84rem; font-weight: 600;
  color: var(--c-text-2); border-radius: 7px;
}
.site-header--v3 .aud-switch__btn:hover { color: var(--c-primary); }
.site-header--v3 .aud-switch__btn.is-active { background: var(--c-primary); color: #fff; }

/* Same reason: phone and configurator were built for the dark strip. */
.site-header--v3 .topbar__phone,
.site-header--v3 .topbar__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--c-text); font-size: .9rem; font-weight: 600;
  white-space: nowrap; transition: color .2s var(--t);
}
.site-header--v3 .topbar__phone:hover,
.site-header--v3 .topbar__btn:hover { color: var(--c-primary); }
.site-header--v3 .topbar__phone .hi-icon,
.site-header--v3 .topbar__btn .hi-icon,
.site-header--v3 .topbar__phone svg,
.site-header--v3 .topbar__btn svg {
  color: var(--c-primary); width: 18px; height: 18px; flex: 0 0 auto;
}
.site-header--v3 .topbar__phone i,
.site-header--v3 .topbar__btn i { color: var(--c-primary); }
.site-header--v3 .topbar__btn {
  padding: .5rem .85rem; border: 1px solid var(--c-border); border-radius: 8px;
}
.site-header--v3 .topbar__btn:hover { border-color: var(--c-primary); background: rgba(0,120,212,.05); }

/* Account buttons sit in row 1 rather than after the nav. */
.site-header--v3 .hdr-top__right .nav-cta { margin-left: 0; gap: .55rem; }
/* style.css drops the Войти / Заявка labels below 1100px, which was right when
   those buttons shared the single nav row. In v3 they sit in the top row with
   room to spare, so keep the words — an icon-only "Заявка" is the one button a
   partner must not have to guess at. */
@media (max-width: 1100px) {
  .site-header--v3 .hdr-top__right .nav-cta__btn span { display: inline; }
  .site-header--v3 .hdr-top__right .topbar__btn span  { display: inline; }
}

/* Social + language, tail of row 2. */
.site-header--v3 .hdr-utils--v3 {
  display: inline-flex; align-items: center; gap: .8rem; flex: 0 0 auto;
}
.site-header--v3 .topbar__social { display: inline-flex; align-items: center; gap: .6rem; }
.site-header--v3 .topbar__social a { color: var(--c-text-2); width: 22px; height: 22px; }
.site-header--v3 .topbar__social a:hover { color: var(--c-primary); }
.site-header--v3 .topbar__social .soc-ico { width: 17px; height: 17px; }
.site-header--v3 .lang-dd__trigger { color: var(--c-text); font-size: .84rem; }

/* ---- sticky: shrink row 1, keep the nav row -----------------------------
   v1/v2 collapse the whole utility strip on scroll. Here row 1 only shrinks,
   because it holds the phone and the Apply button — the two things a scrolled
   visitor is most likely to want. */
.site-header--v3.scrolled .hdr-top__inner { min-height: 64px; }
.site-header--v3.scrolled .hdr-top .logo img { height: 48px; }

/* ---- 1080–1400px: trim the labels before dropping anything -------------- */
@media (min-width: 1080px) and (max-width: 1400px) {
  .site-header--v3 .hdr-top .logo img { height: 60px; }
  .site-header--v3 .hdr-top__inner { min-height: 80px; }
  .site-header--v3 .mainnav__list { gap: .95rem; }
  .site-header--v3 .mainnav__list > li > a { font-size: .84rem; }
  .site-header--v3 .aud-switch__btn { padding: .38rem .7rem; font-size: .78rem; }
  .site-header--v3 .hdr-utils--v3 { gap: .55rem; }
  .site-header--v3 .topbar__social { gap: .45rem; }
  .site-header--v3 .lang-dd__trigger span:not(.flag) { display: none; }
  /* Row 1 is not the crowded one here — the logo, phone, configurator and the
     two account buttons need ~830px of the 1032px available at 1080px — so its
     labels stay. Only the nav row is trimmed (rules above and below). */
}

/* ---- 1080–1200px: the last squeeze before the burger --------------------
   Measured on the partner nav (the wider of the two: 57 characters over six
   items). With only the rules above it needs 1066px and leaves 14px of slack
   at 1080 — not enough to survive a longer label. This step buys ~70px. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .site-header--v3 .mainnav__list { gap: .7rem; }
  .site-header--v3 .mainnav__list > li > a { font-size: .8rem; }
  .site-header--v3 .mainbar__inner { gap: .9rem; }
  .site-header--v3 .mainbar__inner > .aud-switch { margin-right: .2rem; }
  .site-header--v3 .aud-switch__btn { padding: .34rem .58rem; font-size: .74rem; }
  .site-header--v3 .hdr-utils--v3 { gap: .45rem; }
  .site-header--v3 .topbar__social { gap: .38rem; }
}

/* ---- below 1080px: one row, burger --------------------------------------
   The two rows become a single line: row 1 keeps the logo, row 2 shrinks to
   just the search button, and the burger (rendered in row 1) sits beside it.
   Everything else moves into the drawer, which carries the nav, the language,
   the account buttons and — newly — the audience toggle. */
@media (max-width: 1079px) {
  .site-header--v3 { display: flex; align-items: center; }
  .site-header--v3 .hdr-top {
    flex: 1 1 auto; min-width: 0; border-bottom: 0;
  }
  .site-header--v3 .hdr-top__inner { min-height: 70px; gap: .5rem; }
  .site-header--v3 .hdr-top .logo img { height: 46px; }
  .site-header--v3 .hdr-top__right { display: none; }
  .site-header--v3 .hdr-top .burger { display: flex; order: 2; }

  .site-header--v3 .mainbar { flex: 0 0 auto; height: auto; }
  .site-header--v3 .mainbar .container { padding-left: 0; }
  .site-header--v3 .mainbar__inner > .aud-switch,
  .site-header--v3 .mainnav,
  .site-header--v3 .hdr-utils--v3 { display: none; }
}

/* Above the collapse point the burger belongs to the drawer only. */
@media (min-width: 1080px) {
  .site-header--v3 .hdr-top .burger { display: none; }
}