/* assets/css/header.css
   Мобильный хедер под твой макет.
   ВАЖНО:
   1) .container должен быть в глобальном style.css (не тут)
   2) Этот файл — только про хедер
*/

/* Переменные именно хедера (глобальные типа --page-gutter держим в style.css) */
:root{
  --header-bg: #fff;
  --header-border: #e6e6e6;

  --icon-size: 22px;    /* размер svg-иконок */
  --hit-area: 36px;     /* кликабельная зона */

  --logo-size: 34px;    /* размер логотипа/плейсхолдера */

  --search-height: 34px;
  --search-border: #cfcfcf;
  --search-bg: #fff;

  --badge-bg: #f5c400;
  --badge-text: #111;

  --radius: 2px;

  /* будет выставляться JS-ом = реальная высота хедера */
  --header-offset: 0px;
}

/* =========================================================
   STICKY HEADER (двухрежимный: fixed -> fallback shim)
   ========================================================= */

/* режим по умолчанию: фиксируем к вьюпорту */
.site-header--sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  background: var(--header-bg);

  /* ускорение/гладкость */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* тень когда есть прокрутка */
.site-header--sticky.is-stuck{
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* отступ контенту на высоту хедера */
body.has-sticky-header{
  padding-top: var(--header-offset);
}

/* fallback: если fixed “привязан” к трансформированному родителю,
   переводим в absolute и двигаем вниз JS-ом через translateY(scrollTop) */
.site-header--sticky.site-header--shim{
  position: absolute; /* важно: будет жить в документе, а не в viewport */
  top: 0;
  left: 0;
  right: 0;
}

/* ===== Header shell ===== */
.site-header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

/* внутренний блок внутри .container */
.site-header__inner{
  width: 100%;
  max-width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ===== Top row: burger | logo(center) | actions ===== */
.site-header__top{
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Кнопки-иконки (и <a>, и <button>) */
.icon-btn{
  width: var(--hit-area);
  height: var(--hit-area);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0;
  background: transparent;
  color: #111;
  text-decoration: none;
  cursor: pointer;

  /* мобильные улучшения */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.icon-btn:active{
  transform: translateY(0.5px);
}

.icon{
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

/* Лого: чуть ближе к бургеру (смещаем влево) */
.site-header__logo{
  flex: 1 1 auto;
  min-width: 0; /* критично для предотвращения горизонтального overflow во flex */
  display: flex;
  align-items: center;

  /* было center, теперь смещаем */
  justify-content: flex-start;

  /* расстояние от бургера */
  margin-left: 6px;

  /* держим зону справа, чтобы логотип не залезал на иконки */
  padding-right: 96px; /* при необходимости подстрой 72–120px */

  text-decoration: none;
  color: inherit;
}

/* Заглушка логотипа — заменишь на img/svg */
.logo-placeholder{
  width: var(--logo-size);
  height: var(--logo-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  border: 1px solid var(--header-border);
  font-weight: 800;
  line-height: 1;
}

/* Правая группа иконок */
.site-header__actions{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== Cart badge ===== */
.cart-btn{
  position: relative;
}

.badge{
  position: absolute;
  top: 2px;
  right: 2px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  border: 1px solid rgba(0,0,0,.10);
}

.badge--empty{
  opacity: .55;
}

/* ===== Search row ===== */
.site-header__search{
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}

.search-field{
  position: relative;
  width: 100%;
  max-width: 100%;
}

.search-input{
  width: 100%;
  max-width: 100%;
  display: block;
  height: var(--search-height);

  box-sizing: border-box;
  border: 1px solid var(--search-border);
  border-radius: var(--radius);
  background: var(--search-bg);

  /* справа место под кнопку */
  padding: 0 42px 0 10px;

  font-size: 14px;
  outline: none;
}

.search-input:focus{
  border-color: #999;
}

.search-btn{
  position: absolute;
  top: 0;
  right: 0;

  width: 42px;
  height: var(--search-height);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0;
  background: transparent;
  color: #111;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ===== A11y ===== */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== Optional: если у тебя где-то случайно появляется горизонтальный скролл =====
   (не обязательно включать, лучше найти причину — но часто спасает на первых итерациях)
*/
/*
.site-header,
.site-header *{
  max-width: 100%;
}
*/

.site-header__logo-img{
  display: block;
  height: 35px;     /* нужная высота */
  width: auto;      /* сохраняем пропорции */
  max-width: 160px; /* защита от “разъезда” по ширине */
}