/* ========================================================================
   СЕКЦИЯ: ХЕДЪР : НАЧАЛО
   Макет: топ лента 0–41, лого/търсачка 42–140, черта 141,
          навигация 142–200, черта 201.  Контейнер 160…1760.
   ======================================================================== */

.site-header { position: relative; z-index: 5; background: var(--c-header); }

/* --- ТОП ЛЕНТА --------------------------------------------------------- */
.site-header__top { background: var(--c-topbar); }

.site-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-top-h);
}

.topbar { display: flex; align-items: center; gap: clamp(16px, 2.682vw, 51.5px); }
.topbar--right { gap: clamp(12px, 1.432vw, 27.5px); }

.topbar__item {
  display: flex;
  align-items: center;
  gap: clamp(6px, .573vw, 11px);
  color: var(--c-white);
  font-size: var(--fs-topbar);
  font-feature-settings: normal;   /* български форми — както в макета */
  line-height: 1;
  white-space: nowrap;
}
.topbar--right .topbar__item:first-child { gap: clamp(4px, .26vw, 5px); }
.topbar__item--b2b { gap: clamp(5px, .443vw, 8.5px); }
.topbar__item--fb  { gap: clamp(4px, .313vw, 6px); }

.topbar__ico { flex: none; width: auto; object-fit: contain; }
.topbar__ico--truck { height: clamp(15px, 1.042vw, 20px); }
.topbar__ico--b2b   { height: clamp(17px, 1.198vw, 23px); }
.topbar__ico--mail  { height: clamp(13px, .885vw, 17px); }
.topbar__ico--fb    { height: clamp(16px, 1.146vw, 22px); }

.topbar__link { transition: opacity var(--t-fast); }
.topbar__link--sm { font-size: var(--fs-topbar-sm); }
.topbar__link:hover { opacity: .7; }

/* --- ЛЕНТА С ЛОГОТО ---------------------------------------------------- */
.site-header__mid { border-bottom: 1px solid var(--c-hairline); }

.site-header__mid-inner {
  display: grid;
  grid-template-columns: 32.375% 37.625% 30%;
  align-items: center;
  height: var(--header-mid-h);
}

.site-header__brand { justify-self: start; margin-top: 4px; }
.site-header__logo  { height: clamp(38px, 3.021vw, 58px); width: auto; object-fit: contain; }

/* търсачка */
.search {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(38px, 2.396vw, 46px);
  margin-top: -5px;
  border: 1px solid #4d4d4d;
  background: transparent;
}
.search__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding-inline: clamp(10px, .833vw, 16px) 0;
  border: 0;
  background: transparent;
  color: var(--c-white);
  /* 14.1px по макета; под 820 се вдига на 16, иначе iOS увеличава страницата */
  font-size: clamp(12.5px, .734vw, 14.1px);
  font-feature-settings: normal;
  line-height: 1;
}
.search__field::placeholder { color: #cccccc; opacity: 1; }
.search__field:focus { outline: none; }
.search__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.125vw, 60px);
  height: 100%;
}
.search__ico { height: clamp(18px, 1.25vw, 24px); width: auto; object-fit: contain; }

/* любими / профил / количка */
.useracts {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2.005vw, 38.5px);
  margin-top: 5px;
}
.useracts__item {
  display: grid;
  justify-items: center;
  gap: clamp(2px, .365vw, 7px);
  min-width: 44px;
  color: var(--c-white);
  transition: opacity var(--t-fast);
}
.useracts__item:hover { opacity: .75; }
.useracts__ico { height: clamp(19px, 1.25vw, 24px); width: auto; object-fit: contain; }
.useracts__ico--cart { height: clamp(22px, 1.615vw, 31px); }
.useracts__txt { font-size: max(12.4px, .646vw); font-feature-settings: normal; line-height: 1; }

.useracts__cart { position: relative; display: block; }
.useracts__count {
  position: absolute;
  right: clamp(-11px, -.573vw, -6px);
  top: clamp(-4px, -.156vw, -2px);
  display: grid;
  place-items: center;
  width: clamp(13px, .891vw, 17.1px);
  height: clamp(13px, .891vw, 17.1px);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: max(12.2px, .635vw);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* --- ЛЕНТА С НАВИГАЦИЯТА ----------------------------------------------- */
.site-header__bar { border-bottom: 1px solid var(--c-hairline-2); }

.site-header__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-nav-h);
}

.site-header__toggle {
  display: flex;
  align-items: center;
  gap: clamp(10px, .755vw, 14.5px);
  min-height: 44px;
  margin-top: -3px;
  color: var(--c-white);
}
.site-header__burger { height: clamp(15px, 1.146vw, 22px); width: auto; object-fit: contain; }
.site-header__toggle-txt {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  line-height: 1;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.003vw, 38.45px);
}
.mainnav__link {
  display: block;
  color: var(--c-white);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.mainnav__link:hover { color: #bfbfbf; }

/* по-широка междина преди КОНСУМАТИВИ — така е в макета */
.mainnav > li:nth-child(3) { margin-left: clamp(0px, .625vw, 12px); }

/* СЕКЦИЯ: ХЕДЪР : КРАЙ */

/* ========================================================================
   ХЕДЪР — RESPONSIVE.  Договорът е в responsive.config.json.
   ======================================================================== */

/* --- компактен лаптоп: всичко се мащабира през clamp(), няма преподреждане --- */

/* --- таблет и надолу: навигацията става бургер меню --------------------- */
@media (max-width: 1024px) {
  .site-header__top { display: none; }
  .site-header__bar { position: relative; }

  .site-header__top-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 0 clamp(12px, 3vw, 28px);
    padding-block: 2px;
  }
  .topbar { flex-wrap: wrap; gap: 0 clamp(12px, 3vw, 28px); }
  .topbar__item { min-height: 44px; }
  .topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .site-header__mid-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'brand acts' 'search search';
    row-gap: 12px;
    height: auto;
    padding-block: 14px;
  }
  .site-header__brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: 0;
  }
  .search { grid-area: search; height: 48px; margin-top: 0; }
  .search__btn { width: 48px; }
  .useracts { grid-area: acts; margin-top: 0; align-items: center; }
  .useracts__item { min-height: 48px; min-width: 48px; align-content: center; gap: 0; }
  .useracts__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .site-header__toggle { margin-top: 0; min-width: 48px; }

  .site-header__nav { display: none; }
  .site-header__toggle[aria-expanded='true'] + .site-header__nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    padding: 4px var(--gut) 12px;
    background: var(--c-header);
    border-bottom: 1px solid var(--c-hairline-2);
  }
  .mainnav { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav > li:nth-child(3) { margin-left: 0; }
  .mainnav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    white-space: normal;
  }
}

@media (max-width: 820px) {
  /* под 820 iOS увеличава страницата при фокус в поле под 16px */
  .search__field { font-size: 16px; }
}

@media (max-width: 640px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
  }
  body { padding-top: 129px; }

  .site-header__mid-inner,
  .site-header__bar-inner {
    max-width: none;
    padding-inline: 0;
  }
  .site-header__mid-inner { column-gap: 12px; }
  .site-header__brand {
    width: clamp(136px, 45vw, 216px);
    max-width: calc(100% - 8px);
  }
  .site-header__logo {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .useracts { gap: 0; }

  /* Mobile: burger и търсачката образуват един компактен navigation row. */
  .search { margin-left: 60px; }
  .site-header__bar { height: 0; border-bottom: 0; }
  .site-header__bar-inner { height: 0; }
  .site-header__toggle {
    position: absolute;
    left: var(--gut);
    bottom: 11px;
    z-index: 2;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border: 0;
  }
  .site-header__burger { height: 20px; }
  .site-header__toggle-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .site-header__toggle[aria-expanded='true'] + .site-header__nav {
    max-height: calc(100vh - 129px);
    max-height: calc(100dvh - 129px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* След началния viewport header-ът се свива до един функционален ред. */
  .site-header.is-compact .site-header__mid-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'search acts';
    row-gap: 0;
    padding-block: 6px;
  }
  .site-header.is-compact .site-header__brand { display: none; }
  .site-header.is-compact .search {
    height: 44px;
    margin-left: 52px;
  }
  .site-header.is-compact .useracts__item {
    min-width: 44px;
    min-height: 44px;
  }
  .site-header.is-compact .site-header__toggle { bottom: 4px; }
  .site-header.is-compact .site-header__toggle[aria-expanded='true'] + .site-header__nav {
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
  }
}

@media (max-width: 480px) {
  .site-header__mid-inner { padding-block: 10px; }
  .useracts__item { min-width: 44px; }
}