/* Мобильная шапка (версия B), часть «поиск»: одна липкая полоса поиска 56 px под строкой шапки 44 px.
   Класс html.et-bar ставит search-mobile.js (форма поиска есть и ширина ≤ 991 px). Зоны нажатия самой шапки —
   header-mobile.css. В каталоге и поиске в полосу встаёт кнопка «Фильтр» (button.et-filter-btn в
   #catalog-search-form .search__form-group, вид — у каталога), на карточке полоса прячется, пока прилип поиск
   по модулям (html.m-tight .header__search, правило в CSS карточки). Всё под max-width: 991px — десктоп не меняется. */
@media screen and (max-width: 991px) {
  :root {
    --et-red: #E20932;
    --et-gray: #656C6F;
    --et-ink: #181818;
    --et-line: rgba(101, 108, 111, .22);
    --et-edge: rgba(101, 108, 111, .45);
    --et-ease: cubic-bezier(.23, 1, .32, 1);
    --et-row: 44px;   /* строка шапки темы: логотип, меню, телефон, корзина */
    --et-bar: 56px;   /* полоса поиска: поле 44 + по 6 сверху и снизу */
  }

  /* высота шапки 115 px (100 + отступ эталона B) задана padding-bottom темы (header.css); height тут ничего бы не менял */
  .et-bar .header__search { top: var(--et-row); height: var(--et-bar); padding: 0; box-sizing: border-box; }
  /* строка поиска — белая всегда: в режиме ввода тема затемняет страницу под ней (подсказки и история) */
  .et-bar .search__form {
    position: relative; height: var(--et-bar); padding-top: 6px; padding-bottom: 6px; box-sizing: border-box;
    background: #fff; box-shadow: inset 0 -1px 0 var(--et-line);
  }
  /* тень, когда страница прокручена: только opacity */
  .et-bar .search__form::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
    background: linear-gradient(rgba(24, 24, 24, .10), rgba(24, 24, 24, 0)); opacity: 0;
    transition: opacity 200ms var(--et-ease);
  }
  .et-scrolled.et-bar .search__form::after { opacity: 1; }
  /* пустые подсказки и пустую историю не показываем (тема рисует пустую рамку) */
  .et-bar .search__autocomplete:not(:has(.search__autocomplete-item:not(.search__autocomplete-item--template))),
  .et-bar .search__history:not(:has(.search__history-item:not(.search__history-item--template))) { display: none !important; }
  /* пустая история и пустые подсказки: тема всё равно затемняет страницу на 100vh при фокусе в поле — снимаем затемнение.
     Фон — белый, как у .header__search в header.css (не none: правило действует и без фокуса, а полоса прилипшая, на 768–991 форма
     уже полосы и через прозрачные бока при прокрутке виден контент) */
  .et-bar .search.search--empty:not(:has(.search__history-item:not(.search__history-item--template))),
  .et-bar .search.search--not-empty:not(:has(.search__autocomplete-item:not(.search__autocomplete-item--template))) {
    height: var(--et-bar); background: #fff;
  }
  .et-bar .search__form-group {
    position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0;
    border: 0; background: none; box-shadow: none;
  }
  .et-bar .search__form-lens {
    position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 44px; margin: 0; pointer-events: none; color: var(--et-gray);
  }
  .et-bar .search__form-icon { font-size: 15px; color: var(--et-gray); }
  .et-bar .search__form .custom-input { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; }
  .et-bar .custom-input__help-block { display: none; }
  /* 16 px: меньше — iOS приближает страницу при фокусе */
  .et-bar .search__form-input {
    width: 100%; height: 44px; margin: 0; padding: 0 10px 0 40px; box-sizing: border-box;
    border: 1px solid var(--et-edge); border-radius: 0; background: #fff; color: var(--et-ink);
    font: 400 16px/1.2 "Open Sans", sans-serif; caret-color: var(--et-red);
  }
  .et-bar .search__form-input::placeholder { color: var(--et-gray); opacity: 1; }
  .et-bar .search__form-input:focus { outline: none; border-color: var(--et-ink); box-shadow: inset 0 0 0 1px var(--et-ink); }
  .et-bar .search__form-submit {
    display: inline-flex; flex: none; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 16px;
    border-radius: 0; font: 700 14px/1 "Gotham Pro", sans-serif; touch-action: manipulation;
    transition: transform 160ms var(--et-ease);
  }
  /* в каталоге и поиске рядом с полем стоит «Фильтр» (класс has-filter ставит search-mobile.js); «Найти» появляется на
     его месте, пока пишут (is-typing). С клавиатуры «Найти» остаётся, пока на ней фокус: поле -> «Найти» -> «Фильтр» */
  .et-bar .search__form.has-filter:not(.is-typing) .search__form-submit:not(:focus) { display: none; }
  .et-bar .search__form.is-typing .et-filter-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .et-bar .search__form::after, .et-bar .search__form-submit { transition: none; }
}