/*==============================
  Exclude Products
==============================*/
.filter-1 {
  margin-bottom: 10px;
}
.filter-1 a, .filter-1 button {
  display: inline-flex;
  margin: 0px 10px 10px 0px;
  flex: auto;
}
/* Карточка — точка отсчёта для всего, что внутри. Без этого абсолютные
   элементы считались от колонки .element-item, которую позиционирует
   isotope, и к каждому отступу молча прибавлялись её 15 пикселей. */
.product-1 {
  position: relative;
}

/* Карточка продукта по макету 1030:64: высота 74, поле 15,
   скругление 20, фото 40 со скруглением 10, между рядами 10.
   Текст начинается за фото: 15 поля плюс 40 фото плюс 10 зазора. */
.product-1 label {
  /* Блочная: у строчной внизу остаётся место под свисающие буквы,
     и зазор между рядами выходил на 6 пикселей больше заданного. */
  display: block;
  width: 100%;
  height: 74px;
  border-radius: var(--br-2);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--bg-tertiary);
  margin-bottom: 10px;
  padding: 15px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-p1);
  letter-spacing: var(--ls-p1);
}
.product-1 img {
  width: 40px;
  height: 40px;
  border-radius: var(--br-4);
  position: absolute;
  top: 15px;
  left: 15px;
}
.product-1 span {
  position: absolute;
  top: 15px;
  left: 65px;
  right: 50px;
  color: var(--text-disabled);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  line-height: var(--lh-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-1 p {
  position: absolute;
  top: 37px;
  left: 65px;
  right: 50px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 140%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-1 input {
  position: absolute;
  /* По центру по вертикали, а не по вычисленному отступу: высота
     карточки разная на десктопе и на мобиле, иначе число пришлось бы
     держать в двух местах. */
  top: 50%;
  transform: translateY(-50%);
  /* Своё верхнее поле у .form-check-input (4 пикселя от бутстрапа)
     сдвигало галочку ниже центра. */
  margin: 0;
  /* Вплотную к краю галочка выглядела обрезанной: отступ такой же,
     как у фото слева. */
  right: 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
/* Отмеченный продукт отличается рамкой и галочкой, но не цветом:
   белая заливка выдёргивала карточку из списка сильнее, чем нужно
   (правка 29.09). */
.product-1 input:checked ~ label {
  border: 1px solid var(--level_3);
}

/* ---- button ---- */

.btn-secondary.is-checked, .btn-secondary.is-checked:hover, .btn-secondary.is-checked:focus, .btn-secondary.is-checked:active {
  background-color: var(--brand_1);
  color: var(--btn-text);
  outline: 0;
  box-shadow: 0;
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
}

/* ---- grid ---- */


/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid {
 border-bottom: 100px solid var(--level_0);
}


/* ---- .element-item ---- */

.element-item > * {
  margin: 0;
  padding: 0;
}



/* ---- фильтры страницы исключения (макет 27.09) ---- */

/* Поиск на этой странице выше и круглее остальных полей формы. */
.exclude-form .floating-input.search {
  height: 68px;
  border-radius: var(--br-2);
  padding: 0 20px 0 52px;
}

.exclude-form .floating-input_search svg {
  top: 24px;
  left: 20px;
}

/* Фильтры по макету 9760:47738: поиск во всю ширину, под ним два поля
   в ряд и две кнопки в ряд, между всем 20. Снизу у блока ещё 20
   до списка продуктов. */
/* Своих отбивок снизу у блока фильтров нет: расстояние до списка
   задаёт зазор колонки — те же 20, что и везде. Прежде к ним
   добавлялись собственные поле и отступ, и до карточек набегало 60
   (замер 12.10). */
.exclude-filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.exclude-filters__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Кнопки ряда: размер M — высота 40 и поля 15 (правка 12.10).
   «Сбросить фильтры» — белая с синим текстом, «Выбрать все» —
   серая с обычным. Это не кнопки формы, а переключатели показа. */
.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 15px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--br-3);
  background-color: var(--bg-tertiary);
  font-size: var(--fs-p1);
  letter-spacing: var(--ls-p1);
  line-height: var(--lh-p1);
  color: var(--text-primary);
  transition: background-color 250ms ease;
}

.filter-button:hover {
  background-color: var(--bg-tertiary-hover);
}

.filter-button--link {
  background-color: var(--bg-primary);
  /* В макете Blue 100 (#3582FF). Токена ссылки в наборе нет, ближайший
     по смыслу — синий бейдж; пока берём его, при появлении токена
     ссылки заменить. */
  color: var(--text-badge-blue);
}

.filter-button--link:hover {
  background-color: var(--bg-secondary);
}

.exclude-filters .exclude-filters__select {
  width: 100%;
  max-width: none;
  /* Два класса: у .floating-label-1 в main.css свой нижний отступ 20,
     и правило в один класс ему проигрывало по порядку подключения. */
  margin-bottom: 0;
  border-radius: var(--br-2);
  /* Шеврон приходит фоном из .floating-label-1 — не гасим его:
     раньше здесь стояло background-image: none, и пока правило было
     в один класс, оно проигрывало и ничего не ломало; с двумя классами
     оно выиграло и стрелки пропали. */
}

/* Значение выбранного в поле: под подписью, как в остальных полях. */
.exclude-filters .multiselect-selected-text {
  padding-top: 28px;
  padding-left: 20px;
  font-size: var(--fs-p1);
  letter-spacing: var(--ls-p1);
}

.exclude-filters .multiselect {
  border-radius: var(--br-2);
  /* Кнопка плагина по умолчанию растёт по содержимому и вылезает
     за поле: на телефоне «Не выбрано» выходило за границы плашки. */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.exclude-filters .multiselect-selected-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Фильтры стоят в ряд и на телефоне: по одному на строку они съедали
   экран, и до карточек приходилось долистывать. Подписи, которые
   не влезают, обрезаются многоточием (правка 12.10). */

/* Родной список прячем сразу: до инициализации плагина браузер рисует
   его развёрнутым, и поле прыгает на пол-экрана. */
.exclude-filters .exclude-filter {
  display: none;
}

.exclude-filters__stub {
  height: 60px;
  padding: 28px 20px 0 20px;
  color: var(--text_2);
  font-size: var(--fs-p1);
  letter-spacing: var(--ls-p1);
  line-height: 20px;
}

/* Плагин отработал — заглушка больше не нужна. */
.exclude-filters__select--ready .exclude-filters__stub {
  display: none;
}

/* Плагина нет (редкий случай — не загрузился скрипт): показываем родной
   список, иначе фильтр остался бы недоступным вовсе. */
.exclude-filters__select--plain .exclude-filter {
  display: block;
  height: 60px;
}

.exclude-filters__select--plain .exclude-filters__stub {
  display: none;
}

/* Кнопка ростом и скруглением как поля рядом: в ряду это один элемент
   управления, а не кнопка формы (макет 27.09).
   Селектор из двух классов нарочно: у .btn-secondary свои поля 15 сверху
   и снизу, а filter.css подключается раньше main.css — правило в один
   класс проигрывало, и строка кнопок отъезжала на 15 в обе стороны. */
.exclude-filters .exclude-filters__apply {
  height: 60px;
  margin: 0;
  padding: 0 24px;
  border-radius: var(--br-2);
  white-space: nowrap;
}

/* «Сбросить все» — не кнопка, а действие: текст ссылкой. */
.exclude-filters__reset {
  height: 60px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--link_1);
  font-size: var(--fs-p1);
  letter-spacing: var(--ls-p1);
  cursor: pointer;
}

.exclude-filters__reset:hover {
  color: var(--link_1_hover);
}

/* ---- пункты выпадающих списков ---- */

.exclude-filters .multiselect-option.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
}

/* Плагин кладёт галочку и подпись внутрь span.form-check, поэтому
   выстраивать строку надо там, а не только на внешней кнопке: иначе
   счётчик уезжает под название. */
.exclude-filters .multiselect-option .form-check {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.exclude-filters .multiselect-option .form-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 12px 0 0;
}

.exclude-filters .multiselect-option .form-check-label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Пункты внутри раздела не сдвигаем: заголовок и пункт по одной левой
   границе, как в макете. */
.exclude-filters .multiselect-option.multiselect-group-option-indented {
  padding-left: 16px;
}

/* Список непереносимостей шире поля: в строке помещаются название,
   пометка «Скоро» и счётчик. */
.exclude-filters__select--wide .dropdown-menu.show {
  min-width: 360px;
  width: 360px;
}

/* Позиционируем список сами, а не через Popper.
   Popper ставит самому списку transform и will-change, а прокрутка идёт
   внутри этого же элемента: на iOS после выбора пункта такой список
   перестаёт скроллиться совсем. Инлайновые стили перебиваем !important —
   иначе их не снять. */
.exclude-filters .dropdown-menu.show {
  position: absolute !important;
  transform: none !important;
  will-change: auto !important;
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 4px;
  max-height: min(60vh, 420px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.exclude-filters .multiselect-option .option-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Число продуктов под пунктом — чтобы человек видел масштаб до выбора. */
.exclude-filters .option-count {
  flex: 0 0 auto;
  min-width: 28px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  background-color: var(--level_1);
  color: var(--text_2);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  text-align: center;
}

.exclude-filters .option-soon {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  background-color: var(--status_warn);
  color: var(--level_0);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  line-height: var(--lh-small);
}

/* Заголовок раздела списка: подпись, а не вариант выбора. */
.exclude-filters .multiselect-group {
  padding: 12px 16px 4px 16px;
  color: var(--text_2);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  line-height: var(--lh-small);
  pointer-events: none;
}

/* Недоступный пункт: виден, но выбрать нельзя — курсор об этом говорит. */
.exclude-filters .multiselect-option.disabled,
.exclude-filters .multiselect-option.disabled label,
.exclude-filters .multiselect-option.disabled input {
  cursor: not-allowed;
}

/* Недоступный пункт приглушаем целиком, кроме пометки «Скоро»:
   приглушённая вместе со всем, она читалась как выключенная
   и терялась (правка 02.10). */
.exclude-filters .multiselect-option.disabled .option-title,
.exclude-filters .multiselect-option.disabled .option-count,
.exclude-filters .multiselect-option.disabled .form-check-input {
  opacity: 0.45;
}

.exclude-filters .multiselect-option.disabled .option-soon {
  opacity: 1;
}

.exclude-empty {
  margin: 20px 0 40px 0;
  color: var(--text_2);
}

/* Объяснение под кнопками: почему карточек на экране больше, чем
   берёт «Выбрать все». Серым и мелким — это сноска, а не ошибка. */
.exclude-filters__note {
  margin: -10px 0 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text_2);
}

/* ---- мобильная раскладка (макет 29.09, кадр 402) ---- */

@media only screen and (max-width: 990px) {
  /* Поиск ниже, чем на десктопе: 56 против 68. */
  .exclude-form .floating-input.search {
    height: 56px;
  }

  .exclude-form .floating-input_search svg {
    top: 18px;
  }

  .exclude-filters {
    gap: 20px;
    margin-bottom: 0;
  }

  /* Ширину колонок задаёт сетка ряда. Прежний `max-width: 50%`
     остался от флексовой раскладки и, встретившись с одноколоночной
     сеткой, ужимал поля вдвое: они вставали друг под другом
     и половинной ширины (разбор 12.10). */
  .exclude-filters .exclude-filters__select {
    margin-bottom: 0;
  }

  /* Кнопки по содержимому: сброс слева, «Выбрать все» справа.
     В равных колонках их подписи переносились на вторую строку. */
  .exclude-filters__buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  /* Кнопки своей строкой: сброс слева, «Выбрать все» прижат вправо. */
  .exclude-filters .exclude-filters__reset {
    order: 2;
    flex: 0 0 auto;
    height: 40px;
    margin: 0 auto 0 0;
    padding: 0;
  }

  .exclude-filters .exclude-filters__apply {
    order: 3;
    flex: 0 0 auto;
    height: 40px;
    margin: 0;
    padding: 0 20px;
  }

  /* Поля фильтров встают друг под другом, а не в две колонки.
     В двух колонках поле занимает половину экрана, а список
     открывается во всю ширину от левого края поля — и у правого
     фильтра уезжал за край экрана (найдено владельцем 21.10).
     Класса `--wide`, на который было написано прежнее лечение
     «правый открывается влево», в разметке нет: правило было
     мёртвым. Полная ширина поля решает это без исключений —
     список открывается по левому краю своей кнопки и ровно
     по её ширине. */
  .exclude-filters__row--selects {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Названия в списке не обрезаются, а переносятся: «Моллюски
     и ракообразные» не влезает в строку даже во всю ширину. */
  .exclude-filters .dropdown-menu.show {
    width: calc(100% + 2px);
    min-width: calc(100% + 2px);
    max-width: calc(100vw - 30px);
    left: 0;
    right: auto;
  }

  .exclude-filters .multiselect-option.dropdown-item {
    white-space: normal;
    height: auto;
    min-height: 40px;
  }

  /* Карточки ниже и плотнее: 72 в высоту, 12 между рядами, фото 40. */
  .product-1 label {
    height: 72px;
    margin-bottom: 12px;
  }

  .product-1 img {
    width: 40px;
    height: 40px;
  }

  .product-1 span {
    top: 14px;
    left: 64px;
    right: 56px;
  }

  .product-1 p {
    top: 36px;
    left: 64px;
    right: 56px;
  }
}

/* ---- нижняя плашка (макет 27.09) ---- */

/* Была серой полосой во всю ширину на сером фоне — сливалась, и человек
   не замечал, что выбор ещё нужно сохранить. Стала белой карточкой
   с тенью и отступом от края экрана.
   Селекторы из двух классов нарочно: filter.css подключается раньше
   main.css, и правило в один класс проиграло бы прежнему. */
.b-panel {
  padding: 0 0 16px 0;
}

/* Ширина — ровно по сетке карточек. В бутстрапе отрицательные поля .row
   гасят отступы крайних колонок, поэтому карточки визуально начинаются
   по контентной границе контейнера; плашка должна идти по ней же,
   иначе выступает на 15 пикселей с каждой стороны. */
.b-panel .b-panel-1 {
  height: 80px;
  background-color: var(--level_0);
  border-radius: var(--br-2);
  padding: 0 20px;
  box-shadow: 0 8px 24px rgba(25, 28, 31, 0.12);
}

/* У кнопок свои вертикальные поля по 15 — из-за них плашка вырастала
   до 112 вместо 80. Внутри плашки высоту задаёт она сама. */
.b-panel .b-panel-1 .btn-secondary,
.b-panel .b-panel-1 .btn-primary {
  margin-top: 0;
  margin-bottom: 0;
}

body.dark .b-panel .b-panel-1 {
  background-color: var(--level_1);
}

.b-panel .b-panel__note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text_2);
  font-size: 16px;
  line-height: 140%;
}

.b-panel .b-panel__icon {
  flex: 0 0 auto;
  color: var(--level_4);
}

@media only screen and (max-width: 990px) {
  /* Плашка с боковыми отступами и скруглением сверху: снизу она лежит
     на краю экрана, поэтому нижние углы не скругляем (макет 29.09).
     Нижний отступ учитывает полосу жестов у айфона. */
  .b-panel {
    padding: 0;
  }

  .b-panel .b-panel-1 {
    height: auto;
    border-radius: var(--br-2) var(--br-2) 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  /* Пояснение на узком экране убрано по макету 29.09: плашка держит
     только кнопки, текст съедал две строки над ними. */
  .b-panel .b-panel__note {
    display: none;
  }

  .b-panel .buttons {
    width: 100%;
    gap: 12px;
  }

  /* «Вернуться» по тексту, «Исключить» занимает остаток строки. */
  .b-panel .b-panel-1 .btn-secondary {
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
    padding: 0 24px;
  }

  .b-panel .b-panel-1 .btn-primary {
    flex: 1 1 auto;
    height: 48px;
    margin: 0;
  }
}