:root {
  --header-height: 69.8px;
  --header-sidebar-width: 80px;
  --sidebar-expanded-width: 350px;
  --sidebar-desktop-expanded-width: 320px;
  --backdrop-bg: rgba(8, 8, 10, .56);
  --btn-active-bg: linear-gradient(0deg, var(--BG-Bg_2, #232320), var(--BG-Bg_2, #232320)), linear-gradient(0deg, #00000040, #00000040);
  --header-bg-gradient: linear-gradient(180deg, #171719, #1c1c1c);
}

body.page-state--filter-open,
body.page-state--menu-open {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
}

body.page-state--menu-open .header {
  z-index: 104;
}

.header__mobile-backdrop {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 102;
  background: var(--backdrop-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header__mobile-backdrop--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.filter-sidebar__backdrop {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--backdrop-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.filter-sidebar__backdrop--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header {
  --header-container-x: clamp(16px, 5vw, 40px);
  --header-nav-gap: clamp(8px, 1.25vw, 24px);
  --search-field-width: 400px;

  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid var(--BG-Bg_2, #232320);
  z-index: 99;
  transition: transform .2s ease;
}

.header--hidden {
  transform: translateY(-105%);
}

.header:before {
  position: absolute;
  content: "";
  inset: 0;
  background: var(--header-bg-gradient);
  z-index: 2;
}

.header:after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(0deg, #1b1b1b, #1b1b1b00);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

.header__container {
  height: 100%;
  padding: 0 var(--header-container-x);
}

.header__row {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(16px, 4vw, 24px);
  height: 100%;
}

.header__row--desktop {
  display: none;
}

/* Ни мобильная полоса, ни её ряд не обрезают содержимое, и это не вкусовщина.
   Развёрнутая строка поиска и панель подсказок — `position: fixed` внутри
   фиксированной шапки; на iOS вложенный fixed не выносится из слоя шапки, и
   любой `overflow: hidden` по дороге режет его по коробке ряда — а она высотой
   70px, тогда как строка начинается ровно под ней. На айфоне это выглядело как
   «поиск пропал»: элемент есть, в фокусе, клавиатура открыта, а на экране
   ничего. Резать тут нечего: содержимое ряда всегда уже вьюпорта. */
.header__mobile-bar {
  display: grid;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100vw;
}

.header__mobile-bar .header__row {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  justify-content: space-between;
  padding: 16px 0 15px;
}

.header__mobile-bar .header__column.header__column--brand-mobile {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
}

.header__mobile-bar .header__column.header__column--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.header__column {
  display: flex;
  align-items: center;
  min-width: 0;
  z-index: 1;
  transition: opacity .3s ease, color .3s ease;
}

.header__column--nav {
  min-width: 0;
}

.header__column.header__column--brand-mobile {
  justify-content: center;
}

.header__column.header__column--actions {
  justify-content: flex-end;
  position: relative;
}

.header__column:nth-child(3) {
  justify-content: flex-end;
}

.header__mobile-bar .header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.header__mobile-bar .header__brand-link {
  display: flex;
  align-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  margin: 0 8px 0 0;
  border-bottom: 0;
}

.header__mobile-bar .header__brand-link img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.header__mobile-bar .header__column.header__column--actions .header__menu-toggle {
  display: flex;
}

.header__menu-toggle {
  display: none;
  justify-content: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: var(--SystemCorners-Small, 8px);
  overflow: hidden;
  position: relative;
  background-color: var(--BG-Bg_2, #232320);
}

.header__menu-toggle span {
  position: absolute;
  width: 19.5px;
  height: 2px;
  border-radius: var(--SystemCorners-Small, 8px);
  background-color: var(--Icons-Icons_Main, #FFFFFF);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform .3s ease, background-color .3s ease, opacity .3s ease;
}

.header__menu-toggle span:first-child {
  transform: translate(-50%, calc(-50% - 6px));
}

.header__menu-toggle span:last-child {
  transform: translate(-50%, calc(-50% + 6px));
}

.header__menu-toggle--active span {
  opacity: 0;
}

.header__menu-toggle--active span:first-child {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.header__menu-toggle--active span:last-child {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

.header__menu-toggle:active {
  background: var(--btn-active-bg);
}

.header__menu-toggle:active span {
  background-color: var(--Colors-Accent, #FFCF23);
}

.header__language:not(:first-child) {
  margin-left: clamp(8px, 1vw, 16px);
}

.header__language {
  display: none;
}

.header__language-menu {
  position: relative;
}

.header__language-menu--open .header__language-panel {
  display: block;
}

.header__language-menu--open:before {
  position: fixed;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, .56);
  z-index: 19;
}

.header__language-trigger {
  position: relative;
  z-index: 2;
}

.header__language-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ширина названа явно. `flex: 0 0 32px` тут не работает: родитель
     (`.header__language-trigger`) не флекс-контейнер, и базис флекса
     пропадает впустую. Без ширины слот меряется по содержимому, а внутри
     картинка с `width: 100%` — процент от неизвестной ширины. Chromium
     подставляет собственный размер картинки, Firefox честно берёт ноль, и
     флажок исчезает из шапки. */
  width: 32px;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.header__language-trigger-icon img {
  width: 100%;
  height: 100%;
}

/* Флажок страны показывается только с ответом /api/site/visitor-country.
   В разметке стоит флаг по умолчанию, и до ответа он значил бы «посетитель
   из Великобритании» — заведомо чужую страну, которую потом подменяет JS.
   Прячем стилем, а не скриптом: скрипт модульный и выполняется после разбора
   документа, то есть флаг успел бы отрисоваться. `visibility`, а не
   `display`: место под флажок остаётся занятым, иначе шапка дёргается в
   момент подстановки. */
.header__language-selected-icon {
  visibility: hidden;
}

.header__language-selected-icon--resolved {
  visibility: visible;
}

.header__language-trigger-icon svg {
  display: none;
}

.header__language-panel {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-height: calc(100dvh - 32px);
  border-radius: 10px;
  background: var(--bg-menu) center repeat;
  box-shadow: 0 20px 40px #00000080;
  overflow: hidden;
  z-index: 20;
}

.header__language-panel:before {
  display: none;
}

.header__language-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--SystemCorners-Small, 8px);
  background: var(--BG-Bg_2, #232320);
}

.header__language-close span {
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--Text-Txt_Main, #FFFFFF);
}

.header__language-close span:first-child {
  transform: rotate(45deg);
}

.header__language-close span:last-child {
  transform: rotate(-45deg);
}

.header__language-list {
  max-height: min(360px, calc(100dvh - 64px));
  overflow-y: auto;
}

.header__language-list:before {
  content: "Language";
  display: block;
  padding: 16px 56px 8px 16px;
  color: var(--Colors-Accent, #FFCF23);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-transform: uppercase;
}

.header__language-list::-webkit-scrollbar,
.header__suggest-results::-webkit-scrollbar,
.filter-sidebar__sections::-webkit-scrollbar,
.filter-sidebar__option-list::-webkit-scrollbar {
  width: 2px;
}

.header__language-list::-webkit-scrollbar-track,
.header__suggest-results::-webkit-scrollbar-track,
.filter-sidebar__sections::-webkit-scrollbar-track {
  background: var(--BG-Bg_2, #232320);
}

.header__language-list::-webkit-scrollbar-thumb,
.header__suggest-results::-webkit-scrollbar-thumb,
.filter-sidebar__option-list::-webkit-scrollbar-thumb {
  background: var(--Colors-Accent, #FFCF23);
}

.header__language-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 44px 12px 16px;
  cursor: pointer;
}

.header__language-option:first-child {
  padding-top: 16px;
}

.header__language-option:last-child {
  padding-bottom: 16px;
}

.header__language-option--active .header__language-option-text {
  color: var(--Colors-Accent, #FFCF23);
}

.header__language-option--active:after {
  position: absolute;
  content: "";
  right: 18px;
  width: 8px;
  height: 14px;
  border-right: 2px solid var(--Colors-Accent, #FFCF23);
  border-bottom: 2px solid var(--Colors-Accent, #FFCF23);
  transform: rotate(45deg);
}

.header__language-option-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 12px 0 0;
}

.header__language-option-icon img {
  width: 100%;
  height: 100%;
}

.header__language-option-icon:before {
  position: absolute;
  content: "";
  width: 28px;
  height: 29px;
  top: 4.69px;
  left: 4.69px;
  border-radius: 50%;
}

.header__language-option-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Txt_Main, #FFFFFF);
}

.header__row--desktop .header__search {
  position: relative;
}

.header__search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  right: 46px;
  z-index: 1;
  width: 38px;
  overflow: hidden;
  transition: width .15s ease;
}

.header__search--expanded {
  width: calc(100% - 46px);
}

.header__search-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: var(--SystemCorners-Small, 8px);
  background: linear-gradient(180deg, rgba(44, 44, 40, .92), rgba(28, 28, 28, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .18);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.header__search-toggle svg {
  width: 19px;
  height: 19px;
  fill: rgba(255, 255, 255, .92);
}

.header__search-toggle--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header .header__search-field {
  display: flex;
  align-items: center;
  height: 38px;
  position: absolute;
  width: 100%;
  left: 0;
  border-radius: var(--SystemCorners-Small, 8px);
  border: 1px solid var(--BG-Bg_3, #2C2C28);
  background: var(--BG-Bg_2, #232320);
  overflow: hidden;
}

.header .header__search-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 69px 0 40px;
  background-color: transparent;
  color: var(--Text-Txt_Main, #FFFFFF);
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}

.header .header__search-input::placeholder {
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.header .header__search-input::-webkit-search-decoration,
.header .header__search-input::-webkit-search-cancel-button,
.header .header__search-input::-webkit-search-results-button,
.header .header__search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.header .header__search .header__search-field {
  transition: border-color .2s ease, border-radius .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.header .header__search .header__search-field--focused {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(255, 207, 35, .10), 0 10px 24px rgba(0, 0, 0, .18);
}

.header .header__search .header__search-field--focused .header__search-icon svg,
.header .header__search .header__search-field--filled .header__search-icon svg {
  fill: var(--Colors-Accent, #FFCF23);
}

.header .header__search .header__search-field--focused .header__search-input::placeholder {
  color: transparent;
}

.header .header__search--panel-open .header__search-field {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.header .header__search-icon {
  position: absolute;
  width: 19px;
  height: 19px;
  left: 12px;
  transition: opacity .3s ease 0s, visibility .3s ease 0s;
}

.header .header__search-icon svg {
  max-width: 100%;
  height: 100%;
  fill: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.header .header__search .header__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 10px;
  height: 11px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity .3s ease 0s, visibility .3s ease 0s;
}

.header .header__search .header__search-field--filled .header__search-clear {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.header__mobile-bar .header__search--mobile.header__search--expanded .header__search-clear {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.header .header__search .header__search-clear svg {
  display: block;
  max-width: 100%;
  height: 100%;
  fill: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.header__mobile-bar .header__search--mobile {
  position: relative;
  right: auto;
  flex: 0 0 38px;
  max-width: min(400px, calc(100vw - 94px));
  overflow: visible;
}

.header__mobile-bar .header__search--mobile .header__search-field,
.header__mobile-bar .header__search--mobile .header__suggest,
.header__mobile-bar .header__search--mobile .header__suggest-panel {
  background: #19191A;
}

.header__mobile-bar .header__search--mobile .header__search-field {
  display: none;
}

.header__mobile-bar .header__search--mobile .header__search-toggle {
  display: flex;
}

.header__mobile-bar .header__search--mobile.header__search--expanded {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 120;
  display: block;
  width: auto;
  max-width: none;
  padding: 10px 16px 12px;
  transform: none;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: #19191A;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
  overflow: visible;
}

.header__mobile-bar .header__search--mobile.header__search--expanded .header__search-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 44px;
  overflow: visible;
}

.header__mobile-bar .header__search--mobile.header__search--expanded.header__search--panel-open .header__search-field {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.header__mobile-bar .header__search--mobile.header__search--expanded .header__search-toggle--hidden {
  display: none;
}

/* 16px здесь — не про размер текста, а про работоспособность поиска: Safari на
   iOS приближает страницу при фокусе в поле со шрифтом меньше 16px, а от
   приближения развёрнутая строка (`position: fixed`) уезжает за пределы
   видимой области, и поиск на айфоне выглядит пропавшим. Меньше ставить
   нельзя — правило `maximum-scale` Safari игнорирует. */
.header__mobile-bar .header__search--mobile.header__search--expanded .header__search-input {
  min-width: 0;
  font-size: 16px;
  line-height: 22px;
}

.header__mobile-bar .header__search--mobile.header__search--expanded .header__suggest {
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}

.header__mobile-bar .header__search--mobile.header__search--expanded .header__suggest-panel {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #19191A;
  box-shadow: 0 18px 32px rgba(0, 0, 0, .32);
}

.header__suggest {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: var(--search-field-width);
  max-width: calc(100vw - 32px);
  display: none;
}

.header__suggest--open {
  display: block;
}

.header__suggest-panel {
  border-radius: 14px;
  background: var(--BG-Bg_1, #171719);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 40px #00000080;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.header__search--panel-open .header__suggest-panel {
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

.header__suggest-results {
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
}

.header__suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--SystemCorners-Small, 8px);
  color: var(--Text-Txt_Main, #FFFFFF);
}

.header__suggest-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.header__suggest-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.header__suggest-bonus-type,
.header__suggest-empty {
  font-size: 13px;
  line-height: 18px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.header__suggest-empty {
  padding: 12px;
}

.header__suggest-item--active {
  background: rgba(255, 255, 255, .08);
}

.header__suggest-group + .header__suggest-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.header__suggest-group-title {
  padding: 6px 12px 4px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.header__suggest-rating {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--Colors-Accent, #FFCF23);
}

.header__suggest-rating--excellent { color: #00B67A; }
.header__suggest-rating--great { color: #73CF11; }
.header__suggest-rating--average { color: #FFCE00; }
.header__suggest-rating--poor { color: #FF8622; }
.header__suggest-rating--bad { color: #FF3722; }

.header__suggest-mark {
  color: var(--Colors-Accent, #FFCF23);
  background: transparent;
}

.header__mobile {
  position: fixed;
  top: var(--header-height);
  right: -120%;
  z-index: 103;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sidebar-expanded-width);
  height: calc(100% - var(--header-height));
  padding: 20px;
  background: var(--bg-menu-m) center repeat;
  background-size: 100%;
  overflow: hidden;
  transition: right .3s ease;
}

.header__mobile--active {
  right: 0;
}

.header__mobile:before,
.header__mobile:after,
.header__mobile-body:before {
  display: none;
}

.header__mobile-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.header__mobile-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  position: relative;
  z-index: 0;
}

.header__mobile-body:not(:last-child) {
  margin: 0 0 32px;
}

.header__mobile-body .header__menu {
  display: block;
}

.header__mobile-footer {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}

.header__filter-toggle,
.filter-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: var(--SystemCorners-Small, 8px);
  background-color: var(--BG-Bg_2, #232320);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.header__filter-toggle { margin: 0; }

.header__filter-toggle svg,
.filter-sidebar__toggle svg {
  stroke-width: 1.8px;
}

.header__filter-toggle:active,
.filter-sidebar__toggle:active {
  background: var(--btn-active-bg);
  border: 0;
}

.header__filter-toggle:active .header__filter-toggle-icon svg,
.filter-sidebar__toggle:active .filter-sidebar__toggle-icon svg {
  stroke: var(--Colors-Accent, #FFCF23);
}

.header__filter-toggle:active .header__filter-toggle-close-icon svg,
.filter-sidebar__toggle:active .filter-sidebar__close-icon svg {
  fill: var(--Colors-Accent, #FFCF23);
}

.header__filter-toggle-icon,
.filter-sidebar__toggle-icon {
  flex: 0 0 15.51px;
  height: 16.21px;
}

.header__filter-toggle-icon svg,
.filter-sidebar__toggle-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--Text-Txt_Main, #FFFFFF);
  stroke-width: 1.8px;
  transition: fill .3s ease, stroke .3s ease;
}

.header__filter-toggle-close-icon,
.filter-sidebar__close-icon {
  display: none;
  flex: 0 0 16px;
  height: 16px;
}

.header__filter-toggle-close-icon svg,
.filter-sidebar__close-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--Text-Txt_Main, #FFFFFF);
  transition: fill .3s ease, stroke .3s ease;
}

.header__mobile-footer .header__language {
  display: flex;
}

/* Промежутки между тремя кнопками шапки задаёт один `gap` колонки действий.
   Собственный отступ языка (`.header__language:not(:first-child)`) сделал бы
   один из двух промежутков шире остальных. */
.header__mobile-bar .header__language {
  display: flex;
  margin-left: 0;
}

/* Флажок сидит в такой же плитке, что поиск и меню: три кнопки шапки —
   один ряд одинаковых квадратов, а не квадрат-кружок-квадрат. Фон и тень
   повторяют `.header__search-toggle`. */
.header__mobile-bar .header__language-trigger-icon {
  width: 38px;
  flex: 0 0 38px;
  height: 38px;
  border-radius: var(--SystemCorners-Small, 8px);
  background: linear-gradient(180deg, rgba(44, 44, 40, .92), rgba(28, 28, 28, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .18);
}

.header__mobile-bar .header__language-trigger-icon img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Кнопка фильтра в шапке — такая же плитка, что поиск, флажок и меню:
   в подвале меню она крупнее и на плоском фоне, здесь — в ряду квадратов.
   Ширина названа явно, а не одним `flex-basis`: колонка действий берёт
   ширину по содержимому, и без `width` кнопка вносила в неё не 38px, а
   ширину `<svg>` по умолчанию (300px) — ряд уезжал за правый край экрана. */
.header__mobile-bar .header__filter-toggle {
  width: 38px;
  flex: 0 0 38px;
  height: 38px;
  background: linear-gradient(180deg, rgba(44, 44, 40, .92), rgba(28, 28, 28, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .18);
}

.header__mobile-bar .header__filter-toggle-icon {
  width: 15.51px;
}

.header__menu {
  width: 100%;
  display: none;
}

.header__menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header__menu-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 0;
}

.header__menu-item:not(:last-child) {
  border-bottom: 1px solid var(--BG-Bg_2, #232320);
}

.header__menu-item:first-child {
  padding-top: 10px;
}

.header__menu-item:last-child {
  padding-bottom: 10px;
}

.header__menu-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  border-radius: var(--SystemCorners-Small, 8px);
  color: var(--Text-Txt_Main, #FFFFFF);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.header__menu-link span {
  position: relative;
}

/* Пункт открытой страницы. В выдвижном меню — только цветом текста: жёлтая
   плашка во всю ширину ящика читается как кнопка, а не как пометка «вы
   здесь». На десктопе она уместна — см. правило в @media(min-width:1366px). */
.header__menu-link--current {
  color: var(--Colors-Accent, #FFCF23);
  font-size: 19px;
}

.filter-sidebar {
  position: fixed;
  top: var(--header-height);
  right: 0;
  z-index: 102;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: var(--sidebar-expanded-width);
  height: calc(100% - var(--header-height));
  background: var(--BG-Bg_1, #171719);
  transform: translateX(120%);
  transition: transform .3s ease;
  will-change: transform;
}

.filter-sidebar.filter-sidebar--active {
  transform: translateX(0);
  box-shadow: none;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__panel {
  overflow: hidden;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__panel::-webkit-scrollbar {
  display: none;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__header {
  position: sticky;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__toggle-icon {
  display: none;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__close-icon {
  display: flex;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__title {
  margin: 0;
  opacity: 1;
  visibility: visible;
  font-size: 18px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section {
  padding: 0 16px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section:not(:last-child) {
  margin: 0 0 16px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section-body {
  height: auto;
  padding: 8px 0 24px;
  background: #171719;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section {
  justify-content: flex-start;
  cursor: pointer;
  padding: 10px 0;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section-active .filter-sidebar__section-icon svg,
.filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section-active .filter-sidebar__section-label {
  color: var(--Colors-Accent, #FFCF23);
  fill: var(--Colors-Accent, #FFCF23);
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section-active .filter-sidebar__section-arrow {
  transform: rotate(0);
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section-icon,
.filter-sidebar.filter-sidebar--active .filter-sidebar__section-icon svg {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section-label {
  flex: 1 1 100%;
  margin: 0 0 0 8px;
  opacity: 1;
  color: var(--Text-Txt_Main, #FFFFFF);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section-arrow {
  display: flex;
  flex: 0 0 10px;
  width: 10px;
  height: 6px;
  margin: 0 0 0 10px;
  stroke: var(--Colors-Accent, #FFCF23);
  stroke-width: 1.5px;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__section-arrow svg {
  width: 100%;
  height: 100%;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__actions {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  padding: 16px;
  border-top: 1px solid var(--BG-Bg_2, #232320);
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

.filter-sidebar.filter-sidebar--active .filter-sidebar__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.filter-sidebar__rail {
  display: none;
}

.header__column.header__column--brand-mobile .header__brand {
  display: flex;
}

.filter-sidebar__rail-logo {
  display: inline-flex;
  flex: 0 0 22px;
  height: 22px;
}

.filter-sidebar__rail-logo img {
  max-width: 100%;
}

.filter-sidebar__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  min-height: 0;
}

.filter-sidebar__form {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 10px 0 0;
}

.filter-sidebar__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 16px;
  background: linear-gradient(180deg, #101010, #1e1e1e);
  border-bottom: 1px solid var(--BG-Bg_2, #232320);
}

.filter-sidebar__toggle {
  display: none;
}

.filter-sidebar__title {
  margin: 0;
  opacity: 0;
  color: var(--Text-Txt_Main, #FFFFFF);
  font-size: 0;
}

.filter-sidebar__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  height: 38px;
  border-radius: var(--SystemCorners-Small, 8px);
  background-color: var(--BG-Bg_2, #232320);
  transition: background-color .3s ease, opacity .3s ease;
}

.filter-sidebar__dismiss:active {
  background-color: var(--Colors-Accent-dark);
}

.filter-sidebar__dismiss:active .filter-sidebar__dismiss-icon svg {
  fill: var(--BG-Bg_1, #171719);
}

.filter-sidebar__dismiss-icon {
  flex: 0 0 16px;
  height: 16px;
}

.filter-sidebar__dismiss-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--Text-Txt_Main, #FFFFFF);
  transition: fill .3s ease, stroke .3s ease;
}

.filter-sidebar__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  height: 100%;
  min-height: 0;
}

.filter-sidebar__body:not(:last-child) {
  margin: 0 0 8px;
}

.filter-sidebar__sections {
  flex: 1 1 auto;
  min-height: 0;
}

.filter-sidebar__sections::-webkit-scrollbar-thumb {
  background: #3a3a36;
}

.filter-sidebar__section {
  padding: 0 8px;
  position: relative;
  z-index: 12;
  background-color: #171719;
}

.filter-sidebar__section:not(:last-child) {
  margin: 0 0 16px;
}

.filter-sidebar__section-body {
  height: 0;
  overflow: hidden;
}

.filter-sidebar__filter:not(:last-child) {
  margin: 0 0 8px;
}

.filter-sidebar__accordion-trigger--section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.filter-sidebar__section-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: var(--SystemCorners-Small, 8px);
  cursor: pointer;
}

.filter-sidebar__section-icon svg {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  fill: var(--Icons-Icons_Main, #FFFFFF);
  transition-delay: .05s;
}

.filter-sidebar__rail-divider,
.filter-sidebar__section--social {
  display: none;
}

.filter-sidebar__rail-divider {
  width: 24px;
  height: 1px;
  background: var(--BG-Bg_3, #2C2C28);
  margin: 0 0 16px;
}

.filter-sidebar__section-label {
  margin: 0;
  opacity: 0;
  font-size: 0;
}

.filter-sidebar__section-arrow {
  flex: 0;
  width: 0;
  height: 0;
  transform: rotate(180deg);
  transition: transform .5s ease;
}

.filter-sidebar__section-arrow svg {
  width: 0;
  height: 0;
}

.filter-sidebar__range:not(:last-child) {
  margin: 0 0 20px;
}

.filter-sidebar__range--single input[type=number] {
  padding: 5px 34px 5px 12px;
}

.filter-sidebar__range-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.filter-sidebar__range-label:not(:last-child) {
  margin: 0 0 4px;
}

.filter-sidebar__range-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-sidebar__range-top:not(:last-child) {
  margin: 0 0 20px;
}

.filter-sidebar__range--at-least .filter-sidebar__range-top:not(:last-child) {
  margin: 0 0 12px;
}

.filter-sidebar__field-label {
  position: absolute;
  left: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
  pointer-events: none;
}

.filter-sidebar__range--at-least .filter-sidebar__field-input--min {
  padding-left: 70px;
}

.filter-sidebar__quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.filter-sidebar__quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--BG-Bg_3, #2C2C28);
  border-radius: 6px;
  background: var(--BG-Bg_2, #171719);
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.filter-sidebar__quick-chip--active {
  border-color: var(--Colors-Accent, #FFCF23);
  background: var(--Colors-Accent, #FFCF23);
  color: var(--Text-Txt_Dark, #020202);
}

.filter-sidebar__field {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.filter-sidebar__field-input {
  width: 100%;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--BG-Bg_2, #232320);
  background: var(--BG-Bg_1, #171719);
  padding: 5px 12px;
  font-size: 14px;
  line-height: 18px;
  color: var(--Text-Txt_Main, #FFFFFF);
  appearance: textfield;
  -moz-appearance: textfield;
}

.filter-sidebar__field-icon {
  position: absolute;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
  right: 12px;
}

.filter-sidebar__option-list {
  max-height: 246px;
  overflow-y: auto;
}

.filter-sidebar__option-list::-webkit-scrollbar-track {
  background: var(--BG-Bg_3, #2C2C28);
}

.filter-sidebar__option-list--flags {
  max-height: 260px;
  position: relative;
  height: 240px;
  width: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  direction: ltr;
}

.filter-sidebar__option-list-inner {
  height: auto;
  width: 100%;
}

.filter-sidebar__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 8px;
  overflow: hidden;
}

.filter-sidebar__option:not(:last-child) {
  margin: 0 0 20px;
}

.filter-sidebar__option-input {
  display: none;
}

.filter-sidebar__option-input:checked+.filter-sidebar__option-label {
  color: var(--Text-Txt_Main, #FFFFFF);
}

.filter-sidebar__option-input:checked+.filter-sidebar__option-label::before {
  opacity: 0;
  visibility: hidden;
}

.filter-sidebar__option-input:checked+.filter-sidebar__option-label::after {
  opacity: 1;
  visibility: visible;
}

.filter-sidebar__option-label {
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
  transition: color .3s ease;
  cursor: pointer;
  padding: 0 0 0 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Отступ между картинкой опции и подписью. У опций без картинки в подписи
     один элемент, и на них не влияет. */
  gap: 8px;
}

/* Картинка опции — флаг страны. Размер задан здесь, потому что исходники
   разного размера: 32x32 и 24x24. Взято меньшее из них, так что ни один файл
   не растягивается. `cover` страхует от неквадратного исходника, `flex: 0 0`
   не даёт флагу сжаться под длинным названием. */
.filter-sidebar__option-label img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.filter-sidebar__option-label::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--BG-Bg_1, #171719);
  border: 1px solid rgba(255, 224, 130, .34);
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .3s ease, visibility .3s ease;
}

.filter-sidebar__option-label::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--icon-check-url) center no-repeat;
  border-radius: 4px;
  border: .8px solid var(--Colors-Accent, #FFCF23);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.filter-sidebar__actions {
  height: 71px;
  width: 0;
  background: linear-gradient(180deg, #1e1e1e, #101010);
  justify-content: space-between;
  overflow: hidden;
  position: sticky;
  bottom: 0;
  z-index: 999;
}

.filter-sidebar__actions-row {
  display: flex;
  align-items: center;
  margin: 0 -4px;
}

.filter-sidebar__actions-column {
  padding: 0 4px;
  flex: 1 1 100%;
}

.filter-sidebar__action-button {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--SystemCorners-Small, 8px);
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  width: 100%;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.filter-sidebar__action-button--reset {
  background: linear-gradient(180deg, #1e1e1e, #101010);
  color: var(--Text-Txt_Main, #FFFFFF);
  border: 1px solid var(--BG-Bg_3, #2C2C28);
}

.filter-sidebar__action-button--reset:active {
  background: linear-gradient(0deg, var(--BG-Bg_3, #2C2C28), var(--BG-Bg_3, #2C2C28)), linear-gradient(0deg, #00000040, #00000040);
}

.filter-sidebar__action-button--submit {
  background: var(--Colors-Accent, #FFCF23);
  color: var(--Text-Txt_Dark, #020202);
  font-weight: 750;
}

.filter-sidebar__action-button--submit:active {
  background: var(--Colors-Accent-dark);
}

.filter-sidebar__action-button-icon {
  flex: 0 0 13px;
  height: 17px;
  margin: 0 10px 0 0;
}

.filter-sidebar__action-button-icon img {
  max-width: 100%;
  max-height: 100%;
}

.filter-sidebar__filter {
  border-radius: var(--SystemCorners-Small);
  overflow: hidden;
  background: var(--BG-Bg_4, #1C1C1C);
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.filter-sidebar__filter .filter-sidebar__accordion-panel {
  padding: 6px 12px 16px;
}

.filter-sidebar__filter .filter-sidebar__accordion-panel--closed {
  padding: 0;
}

.filter-sidebar__search {
  display: flex;
  align-items: center;
  position: relative;
}

.filter-sidebar__search:not(:last-child) {
  margin: 0 0 20px;
}

.filter-sidebar__search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
}

.filter-sidebar__search-icon svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: var(--Icons-Icons_Main, #FFFFFF);
}

.filter-sidebar__search-input {
  width: 100%;
  height: 40px;
  border-radius: var(--SystemCorners-Small, 8px);
  background: var(--BG-Bg_1, #171719);
  border: 1px solid var(--BG-Bg_2, #232320);
  padding: 5px 12px 5px 36px;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: var(--Text-Txt_Main, #FFFFFF);
}

.filter-sidebar__search-input::placeholder {
  color: var(--Text-Txt_Sec, rgba(255, 255, 255, .5019607843));
}

.filter-sidebar__accordion-trigger--filter {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Text-Txt_Main, #FFFFFF);
  padding: 16px 12px;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}

.filter-sidebar__accordion-trigger--filter-active .filter-sidebar__filter-trigger-icon {
  transform: rotate(180deg);
}

.filter-sidebar__filter-trigger-icon {
  margin: 0 10px 0 0;
  display: flex;
  align-items: center;
  transition: transform .3s ease;
}

.filter-sidebar__filter-trigger-icon svg {
  flex: 0 0 8px;
  width: 8px;
  height: 4.8px;
  stroke: var(--Colors-Accent, #FFCF23);
  transition: fill .3s ease, stroke .3s ease;
  transform: rotate(180deg);
}

.filter-sidebar__popular {
  padding: 8px 0 0;
}

.filter-sidebar__popular-groups .filter-sidebar__filter {
  border: 1px solid var(--BG-Bg_3, #2C2C28);
  border-radius: 6px;
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}

.filter-sidebar__popular-groups .filter-sidebar__filter:not(:last-child) {
  margin-bottom: 6px;
}

.filter-sidebar__popular-groups .filter-sidebar__accordion-trigger--filter {
  padding: 12px;
}

.filter-sidebar__accordion .filter-sidebar__accordion-panel {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: max-height .3s ease-in-out;
}

.filter-sidebar__accordion>div:first-child {
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.filter-sidebar__accordion-panel--closed {
  visibility: hidden;
  max-height: 0px;
}

@media(min-width:768px) {
  .header .header__search .header__search-clear svg {
    transform: translateY(-1px);
  }

  .header {
    --header-container-x: clamp(20px, 2.5vw, 40px);

    width: calc(100% - var(--header-sidebar-width));
  }

  .header__menu-toggle {
    display: flex;
    flex: 0 0 40px;
    height: 38px;
  }

  .header__menu-toggle:not(:last-child) {
    margin: 0 16px 0 0;
  }

  .header__column:nth-child(1):not(:last-child) {
    margin: 0 24px 0 0;
  }

  .header__column--brand {
    gap: 14px;
    min-width: 0;
  }

  .header__column.header__column--brand-mobile .header__brand {
    display: none;
  }

  .header__search {
    position: relative;
    right: auto;
    flex: 0 0 300px;
    overflow: visible;
  }

  .header__search-toggle {
    display: none;
  }

  .header .header__search-field {
    position: relative;
    height: 40px;
  }

  .header .header__search-input {
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
  }

  .header__language {
    display: flex;
  }

  .header__language-panel {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 13px);
    bottom: auto;
    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: none;
  }

  .header__language-panel:before {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 9px;
    border-left-width: 9px;
    top: -8px;
    bottom: auto;
    right: 22px;
    border-top-width: 0;
    border-bottom: 9px solid #1B1B1D;
  }

  .header__language-menu--open:before {
    display: none;
  }

  .header__language-list {
    max-height: 274px;
  }

  .header__language-close {
    display: none;
  }

  .header__language-list:before {
    display: none;
  }

  .header__language-option {
    padding-right: 16px;
  }

  .header__language-option--active:after {
    display: none;
  }

  .header__language-option-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .header__mobile {
    left: auto;
    right: 0;
    display: none;
    padding: 0;
    border-right: 1px solid var(--BG-Bg_2, #232320);
    box-shadow: none;
  }

  .header__mobile--active {
    display: flex;
  }

  .header__mobile-body {
    padding: 20px 20px 40px;
  }

  .header__mobile-footer {
    padding: 0 20px 20px;
  }

  .filter-sidebar {
    top: 0;
    left: 0;
    right: auto;
    flex: 0 0 var(--header-sidebar-width);
    display: flex;
    flex-direction: column;
    width: var(--header-sidebar-width);
    max-width: none;
    height: 100%;
    overflow: hidden;
    transform: none;
    will-change: auto;
    transition: none;
  }

  .filter-sidebar:not(.filter-sidebar--active) {
    width: var(--header-sidebar-width);
    max-width: var(--header-sidebar-width);
    flex-basis: var(--header-sidebar-width);
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__header {
    justify-content: center;
    width: 100%;
    padding: 24px 19px;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__title,
  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section-label,
  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section-arrow,
  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section-body,
  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__actions {
    display: none;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__panel {
    width: 100%;
    overflow: hidden;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__form,
  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__body {
    width: 100%;
    overflow: hidden;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__sections {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 19px;
    overflow: hidden;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section--popular {
    display: none;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section:not(:last-child) {
    margin: 0 0 16px;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__accordion-trigger--section {
    flex: 0 0 42px;
    justify-content: center;
    height: 42px;
    padding: 0;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section-icon {
    flex: 0 0 42px;
    height: 42px;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section-icon svg {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__rail-divider {
    display: block;
  }

  .filter-sidebar:not(.filter-sidebar--active) .filter-sidebar__section--social {
    display: flex;
  }

  .filter-sidebar.filter-sidebar--active {
    width: var(--sidebar-desktop-expanded-width);
    flex-basis: var(--sidebar-desktop-expanded-width);
    max-width: none;
    box-shadow: 4px 0 40px #0003;
  }

  .filter-sidebar.filter-sidebar--active .filter-sidebar__header {
    padding: 24px 16px 22px;
  }

  .filter-sidebar.filter-sidebar--active .filter-sidebar__title {
    margin: 0 0 0 16px;
    opacity: 1;
    visibility: visible;
    font-size: 26px;
  }

  .filter-sidebar.filter-sidebar--active .filter-sidebar__section {
    padding: 0 10px 0 16px;
  }

  .filter-sidebar__rail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 var(--header-height);
    width: 100%;
    height: var(--header-height);
    margin: 0;
    padding: 10px 22px;
    border-radius: 0;
    border-bottom: 1px solid var(--BG-Bg_2, #232320);
    border-right: 1px solid var(--BG-Bg_2, #232320);
    background: var(--header-bg-gradient);
  }

  .filter-sidebar__rail-logo {
    flex-basis: 36px;
    height: 37px;
  }

  .filter-sidebar__panel {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100% - var(--header-height));
  }

  .filter-sidebar__form {
    flex: 1 1 auto;
    height: auto;
    padding: 0;
  }

  .filter-sidebar__header {
    justify-content: flex-start;
    height: auto;
    padding: 24px 19px;
    background-color: var(--BG-Bg_1, #171719);
    background-image: none;
    border-bottom: 0;
  }

  .filter-sidebar__toggle {
    display: flex;
    flex: 0 0 42px;
    height: 42px;
  }

  .filter-sidebar__toggle-icon {
    flex: 0 0 20px;
    height: 18px;
  }

  .filter-sidebar__title {
    margin: 0 0 0 19px;
  }

  .filter-sidebar__dismiss {
    display: none;
  }

  .filter-sidebar__body {
    height: auto;
    padding: 0 4px 0 0;
  }

  .header__mobile-bar .header__search--mobile.header__search--expanded {
    left: var(--header-sidebar-width);
  }

  .header__menu {
    display: block;
  }

  .header__row--desktop .header__menu-list {
    flex-direction: row;
    align-items: center;
    gap: var(--header-nav-gap);
  }

  .header__row--desktop .header__menu-item {
    width: auto;
    height: 42px;
    padding: 0;
  }

  .header__row--desktop .header__menu-item:not(:last-child) {
    border-bottom: 0;
  }

  .header__row--desktop .header__menu-item:first-child,
  .header__row--desktop .header__menu-item:last-child {
    padding: 0;
  }

  .header__row--desktop .header__menu-link {
    padding: 5px 12px;
    font-size: 15px;
    line-height: 22px;
  }

  .header__row--desktop .header__menu-link--current {
    font-size: 16px;
  }
}

@media(min-width:768px) and (max-width:1365.98px) {
  .header {
    --search-field-width: clamp(315px, 33vw, 405px);
  }

  .header__row--desktop .header__language {
    display: none;
  }

  .header__row--desktop {
    padding-right: 56px;
  }

  .header__row--desktop .header__column--brand .header__menu-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
  }

  .header__row--desktop .header__search {
    flex: 0 0 var(--search-field-width);
    min-width: 0;
    max-width: 100%;
  }

  .header__row--desktop .header__search--panel-open .header__search-field {
    border-radius: 10px;
  }

  .header__row--desktop .header__search--panel-open .header__suggest {
    top: calc(100% + 8px);
    width: 100%;
    max-width: none;
  }

  .header__row--desktop .header__search--panel-open .header__suggest-panel {
    border: 0;
    border-radius: 14px;
  }
}

@media(min-width:1366px) {
  .header--hidden {
    transform: none;
  }

  :root {
    --header-height: 90px;
  }

  .header {
    --header-nav-gap: clamp(8px, 1vw, 24px);
    --search-field-width: clamp(300px, 22vw, 450px);
  }

  .header__row--desktop {
    display: grid;
  }

  .header__mobile-bar {
    display: none;
  }

  .filter-sidebar {
    overflow: visible;
  }

  .filter-sidebar.filter-sidebar--active {
    width: var(--header-sidebar-width);
    flex-basis: var(--header-sidebar-width);
    max-width: var(--header-sidebar-width);
    box-shadow: none;
  }

  .filter-sidebar .filter-sidebar__rail {
    position: relative;
    z-index: 3;
    width: var(--header-sidebar-width);
  }

  .filter-sidebar .filter-sidebar__panel {
    position: absolute;
    top: var(--header-height);
    left: 0;
    z-index: 2;
    width: var(--header-sidebar-width);
    height: calc(100% - var(--header-height));
    overflow: hidden;
    background: var(--BG-Bg_1, #171719);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .filter-sidebar.filter-sidebar--active .filter-sidebar__panel {
    width: var(--sidebar-desktop-expanded-width);
    overflow: hidden;
    box-shadow: 4px 0 40px #0003;
  }

  .header__row {
    gap: clamp(24px, 2vw, 40px);
  }

  .header__row--desktop .header__search {
    flex: 0 0 var(--search-field-width);
  }

  .header__column:nth-child(1):not(:last-child) {
    margin: 0;
  }

  .header__menu-toggle {
    display: none;
  }

  .header__column--brand {
    display: none;
  }

  .header__row--desktop {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  }

  .header__menu-link:hover {
    background: var(--BG-Bg_2, #232320);
  }

  /* Как на проде: жёлтая плашка, тёмный текст. Насыщенность шрифта при этом
     не трогается — на проде подсвеченный пункт жирнее соседей, а жирный текст
     шире обычного, и кнопка раздвигала соседние. Кегль на 1px больше соседей
     (заказчик, 16.09.2026): сдвиг от него в пределах пары пикселей.

     Наведение перечислено отдельно: у него на класс больше, и без этой строки
     подсветка текущей страницы пропадала бы под курсором. */
  .header__menu-link--current,
  .header__menu-link--current:hover {
    background: var(--Colors-Accent, #FFCF23);
    color: var(--Text-Txt_Dark, #020202);
  }

  .header__language-trigger-icon:hover,
  .header__language-option:hover .header__language-option-text,
  .header__suggest-item:hover,
  .filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section:hover .filter-sidebar__section-label {
    color: var(--Colors-Accent, #FFCF23);
  }

  .filter-sidebar__toggle:hover .filter-sidebar__toggle-icon svg {
    stroke: var(--Colors-Accent, #FFCF23);
  }

  .filter-sidebar__toggle:hover .filter-sidebar__close-icon svg {
    fill: var(--Colors-Accent, #FFCF23);
  }

  .header__filter-toggle:hover .header__filter-toggle-icon svg {
    stroke: var(--Colors-Accent, #FFCF23);
  }

  .header__filter-toggle:hover .header__filter-toggle-close-icon svg {
    fill: var(--Colors-Accent, #FFCF23);
  }

  .filter-sidebar__section-icon:hover {
    background: var(--BG-Bg_2, #232320);
  }

  .filter-sidebar__section-icon:hover svg,
  .filter-sidebar.filter-sidebar--active .filter-sidebar__accordion-trigger--section:hover .filter-sidebar__section-icon svg {
    fill: var(--Colors-Accent, #FFCF23);
  }

  .filter-sidebar__quick-chip:hover {
    border-color: var(--Colors-Accent, #FFCF23);
    color: var(--Text-Txt_Main, #FFFFFF);
  }

  .filter-sidebar__quick-chip--active:hover {
    color: var(--Text-Txt_Dark, #020202);
  }

  .filter-sidebar__action-button--reset:hover {
    background: var(--BG-Bg_3, #2C2C28);
  }

  .filter-sidebar__action-button--submit:hover {
    background: linear-gradient(180deg, #ffe141, #fd9800), var(--Colors-Accent, #FFCF23);
    box-shadow: 0 -4px 8px #fff3 inset;
  }

  .filter-sidebar__accordion-trigger--filter:hover {
    background: var(--BG-Bg_2, #232320);
  }

  .filter-sidebar__accordion-trigger--filter-active:hover {
    background: transparent;
  }
}

@media(min-width:1440px) {
  .header__menu-link {
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 600;
  }

  .header .header__search-input {
    font-size: 16px;
    font-weight: 400;
  }
}