/* ============================================================
   ПОИСК ПО КАТАЛОГУ — строка с мгновенными подсказками
   Живёт в двух местах: в хироблоке (главная) и в панели под
   липкой шапкой (все страницы).
   ============================================================ */

.search{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  height:56px;
  padding:0 8px 0 16px;
  background:var(--red-600);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(227,30,36,.22);
  transition:box-shadow .2s ease;
}
.search:focus-within{box-shadow:0 14px 36px rgba(227,30,36,.3)}

.search__icon{display:flex;flex:0 0 auto;margin-right:12px;color:#fff}
.search__icon svg{width:21px;height:21px;display:block}

/* белая плашка поля: поле ввода + красная кнопка «Найти» внутри неё */
.search__field{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  height:40px;
  padding-right:4px;
  background:var(--white);
  border-radius:9px;
}

.search__input{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  padding:0 6px 0 14px;
  border:0;
  border-radius:9px 0 0 9px;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  color:var(--ink-900);
  appearance:none;
}
.search__input::placeholder{color:var(--ink-400);font-weight:400}
.search__input:focus{outline:none}
/* крестик нативной очистки в WebKit — свой не нужен, но и чужой мешает */
.search__input::-webkit-search-cancel-button{display:none}

.search__submit{
  flex:0 0 auto;
  height:32px;
  padding:0 15px;
  border:0;
  border-radius:7px;
  background:var(--red-600);
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .16s ease;
}
.search__submit:hover{background:var(--red-700)}
.search__submit:active{background:var(--red-600)}

/* ---------- выпадающий список ---------- */
.search__drop{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:70;
  max-height:min(64vh, 460px);
  overflow-y:auto;
  padding:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(23,25,28,.18);
  scrollbar-width:thin;
}
.search__drop[hidden]{display:none}

.search__group{
  padding:10px 10px 5px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-400);
}

.search__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-radius:10px;
  color:var(--ink-900);
  transition:background-color .12s ease;
}
.search__item:hover,
.search__item.is-active{background:var(--red-050)}

.search__item-icon{
  flex:0 0 auto;
  width:40px;
  height:20px;
  object-fit:contain;
}
.search__item-body{min-width:0;flex:1 1 auto}
.search__item-title{
  font-size:13.5px;
  font-weight:600;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.search__item-title b{color:var(--red-600);font-weight:800}
.search__item-sub{
  margin-top:2px;
  font-size:11.5px;
  color:var(--ink-400);
}
.search__item-go{
  flex:0 0 auto;
  font-size:13px;
  color:var(--ink-400);
  opacity:0;
  transition:opacity .12s ease,transform .12s ease;
}
.search__item:hover .search__item-go,
.search__item.is-active .search__item-go{opacity:1;transform:translateX(2px)}

.search__empty{
  padding:18px 12px 16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-600);
}
.search__empty b{color:var(--ink-900)}

.search__all{
  display:block;
  margin-top:6px;
  padding:11px 12px;
  border-top:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:var(--red-600);
}
.search__all:hover{color:var(--red-700)}

/* ---------- строка в хироблоке ----------
   Стоит в свободном левом верхнем углу .hero__stage, ничего не сдвигая:
   заголовок и слайдер остаются на своих местах. */
.hero__search{
  position:absolute;
  left:0;
  top:0;
  /* выше промо-слайдера (.promo — z-index 6) и машины (3): выпадающие
     подсказки должны ложиться поверх всего в хироблоке, но под шапкой (50) */
  z-index:20;
  width:min(50%, 620px);
}

/* ---------- иконка в шапке ---------- */
.header__search{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--red-600);
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.header__search svg{width:20px;height:20px;display:block}
.header__search:hover{border-color:var(--red-600);background:var(--red-050)}
.header__search[aria-expanded="true"]{
  background:var(--red-600);
  border-color:var(--red-600);
  color:#fff;
}

/* На главной строка поиска уже есть в хироблоке — иконку показываем только
   когда шапка «залипла» и хироблок ушёл вверх. На внутренних страницах
   хироблока нет, там иконка видна всегда. */
body.has-hero .header__search{display:none}
body.has-hero .header.is-stuck .header__search{display:inline-flex}

/* шапка в залипшем состоянии */
.header.is-stuck{box-shadow:0 10px 30px rgba(23,25,28,.1)}

/* ---------- панель под шапкой ---------- */
.header-search{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:2;
  padding:14px 0 16px;
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 24px 48px rgba(23,25,28,.14);
}
.header-search[hidden]{display:none}
.header-search .search{max-width:820px}

/* ---------- адаптив ---------- */
/* на планшете и телефоне хироблок — обычная колонка (display:flex в
   style.css), абсолютное позиционирование там не работает: строка встаёт
   в поток первым элементом */
@media (max-width:1100px){
  .hero__search{position:static;order:0;width:100%;margin-bottom:18px}
}

@media (max-width:820px){
  .hero__search{margin-bottom:16px}
  .search{height:52px;padding:0 6px 0 14px}
  .search__icon{margin-right:10px}
  .search__input{font-size:14px}
  .search__submit{height:32px;padding:0 13px;font-size:13px}
  .header-search .search{max-width:none}
}

@media (max-width:640px){
  .header__search{width:40px;height:40px}
  .header__search svg{width:18px;height:18px}
  .search{height:48px;border-radius:12px}
  .search__icon svg{width:19px;height:19px}
  .search__submit{padding:0 12px;font-size:12.5px}
  .search__drop{max-height:min(60vh, 400px)}
}