/* ============================================================
   ПОИСК — страница результатов (molecmag)
   Переиспользует .catalog__* и .pcard (визуальная идентичность
   с каталогом). Здесь — только «герой» поиска, панель уточнения
   и empty-state. Токены сверены с :root в style.css.
   ============================================================ */

/* ── шапка страницы поиска ── */
.search-page__head {
  margin: 4px 0 30px;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px);
  background: linear-gradient(180deg, var(--bg-accent-subdued) 0%, var(--bg-tertiary) 100%);
  border: 1px solid rgba(24,162,176,.12);
  border-radius: 22px;
}
.search-page__title {
  margin: 0; font: 600 clamp(22px, 2.4vw, 32px)/1.15 'Rubik', sans-serif; color: var(--text-primary);
}
.search-page__title em { font-style: normal; color: var(--teal); }
.search-page__hint { margin: 8px 0 0; font: 400 14px/1.4 'Geologica', sans-serif; color: var(--text-secondary); }

/* ── панель фильтров (без строки поиска: запрос живёт в хедере) ── */
.search-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px;
  margin: 20px 0 0;
}
.search-filter__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.search-filter__label {
  font: 600 11.5px/1 'Geologica', sans-serif; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-tertiary);
}
/* нативный select — fallback (скрывается JS-ом, заменяется .mm-dd) */
.search-filter__select { height: 46px; min-width: 240px; }

/* чекбоксы — обычный текст, прижаты влево */
.search-filter__checks { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.search-filter__check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 400 14px 'Geologica', sans-serif; color: var(--text-secondary);
  transition: color .15s; user-select: none;
}
.search-filter__check input { accent-color: var(--teal); width: 16px; height: 16px; flex: 0 0 auto; }
.search-filter__check:hover { color: var(--text-primary); }
.search-filter__check:has(input:checked) { color: var(--teal); }

.search-filter__apply {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px;
  border: none; border-radius: 12px; background: var(--teal); color: #fff;
  font: 500 14.5px 'Geologica', sans-serif; cursor: pointer; transition: filter .15s, transform .12s;
}
.search-filter__apply:hover { filter: brightness(.94); }
.search-filter__apply:active { transform: scale(.98); }

/* кастомный дропдаун раздела (наследует .mm-dd из category.css, фикс ширины) */
.search-filter .mm-dd__btn { min-width: 240px; height: 46px; }

/* ── пустой результат ── */
.search-empty {
  max-width: 640px; margin: 8px auto 0; padding: 36px 24px 28px; text-align: center;
}
.search-empty__ico {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-accent-subdued); color: var(--teal);
}
.search-empty__title { margin: 0; font: 600 22px/1.2 'Rubik', sans-serif; color: var(--text-primary); }
.search-empty__text { margin: 10px 0 0; font: 400 15px/1.5 'Geologica', sans-serif; color: var(--text-secondary); }
.search-empty__text b { color: var(--text-primary); font-weight: 600; }

.search-empty__label {
  margin: 28px 0 12px; font: 600 11.5px/1 'Geologica', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.search-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.search-empty__chip {
  display: inline-flex; align-items: center; padding: 9px 16px;
  background: #fff; border: 1px solid var(--border-primary); border-radius: 100px;
  font: 500 13.5px 'Geologica', sans-serif; color: var(--text-primary); text-decoration: none;
  transition: border-color .15s, color .15s, transform .12s;
}
.search-empty__chip:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }

.search-empty__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  height: 50px; padding: 0 30px; border-radius: 100px;
  background: var(--teal); color: #fff; text-decoration: none;
  font: 500 15px 'Geologica', sans-serif; transition: filter .15s, transform .12s;
}
.search-empty__cta:hover { filter: brightness(.94); transform: translateY(-1px); }

@media (max-width: 600px) {
  .search-filter { gap: 14px; }
  .search-filter__field { width: 100%; }
  .search-filter__select,
  .search-filter .mm-dd, .search-filter .mm-dd__btn { width: 100%; min-width: 0; }
  .search-filter__checks { width: 100%; }
  .search-filter__apply { width: 100%; justify-content: center; }
}