/* Start:/local/templates/ekspopipe/components/bitrix/catalog/ekspopipe/style.css?17894571445408*/
/* ==========================================================================
   Блок: Плитка каталога
   ========================================================================== */

.catalog-tile {
  --tile-aside:   444px;  /* ширина колонки фильтров */
  --tile-gap:     36px;   /* между строками правой колонки */
  --tile-title:   36px;
  --tile-cols:    4;
  --tile-grid:    12px;
  --tile-links:   var(--space-8);

  background: var(--c-bg);
}

.catalog-tile__inner {
  display: grid;
  grid-template-columns: var(--tile-aside) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-20);
  padding-bottom: var(--space-60);
}

.catalog-tile__content {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  min-width: 0;
}

/* --- Заголовок и сортировка ----------------------------------------------- */
.catalog-tile__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-20);
}

.catalog-tile__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-black);
  font-size: var(--tile-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.catalog-tile__title-short { display: none; }

/* Кнопка окна фильтра — только на мобиле */
.catalog-tile__filter { display: none; }

/* --- Быстрые ссылки ------------------------------------------------------- */
.catalog-tile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tile-links);
}

/* --- Плитка товаров ------------------------------------------------------- */
.catalog-tile__grid {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols), minmax(0, 1fr));
  gap: var(--tile-grid);
}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) {
  .catalog-tile {
    --tile-aside: 335px;
    --tile-gap:   var(--space-24);
    --tile-title: 28px;
    --tile-grid:  var(--space-20);
  }
}

@media (max-width: 1279px) {
  .catalog-tile {
    --tile-aside: 317px;
    --tile-title: 24px;
    --tile-cols:  3;
    --tile-grid:  12px;
  }
}

@media (max-width: 767px) {
  .catalog-tile {
    --tile-gap:   var(--space-16);
    --tile-cols:  2;
    --tile-links: 6px;
  }

  .catalog-tile__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-16);
    padding-bottom: var(--space-32);
  }

  .catalog-tile__head { align-items: center; }

  .catalog-tile__title-full  { display: none; }
  .catalog-tile__title-short { display: inline; }

  .catalog-tile__filter {
    --icon-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-black);
    transition: background-color var(--transition), color var(--transition);
  }

  .catalog-tile__filter:hover {
    background: var(--c-main);
    color: var(--c-white);
  }
}
/* ==========================================================================
   Блок: Сортировка каталога
   ========================================================================== */

.catalog-sort {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
}

.catalog-sort__label {
  color: var(--c-text);
  font-size: var(--fs-cap-l);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
}

.catalog-sort__control { position: relative; }

/* Кнопка-триггер: белая подложка поверх фона страницы */
.catalog-sort__toggle {
  --btn-radius: var(--r-md);
  padding: 6px 8px 6px 12px;
  background: var(--c-white);
}

/* --- Выпадающий список ---------------------------------------------------- */
.catalog-sort__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-12));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 100%;
  padding: 22px;
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.catalog-sort__option {
  color: var(--c-text);
  font-size: var(--fs-body-xs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  transition: color var(--transition);
}

.catalog-sort__option:hover,
.catalog-sort__option.is-current { color: var(--c-active); }

/* --- Адаптив -------------------------------------------------------------- */

/* Ниже 768px сортировка живёт в окне фильтра */
@media (max-width: 767px) {
  .catalog-sort { display: none; }
}

/* --------------------------------------------------------------------------
   Без макета: пустая выдача и текст посадочной страницы под плиткой
   -------------------------------------------------------------------------- */
.catalog-tile__empty {
  padding-block: 40px;
  color: var(--c-text);
}

.catalog-tile__seo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
  color: var(--c-text);
}

/* End */


/* Start:/local/templates/ekspopipe/components/bitrix/catalog.smart.filter/ekspopipe/style.css?17894571449164*/
/* ==========================================================================
   Блок: Система фильтров каталога

   До 768px — колонка слева от плитки.
   Ниже — полноэкранное окно: шапка второго уровня, прокручиваемое тело
   и кнопки, закреплённые внизу.
   ========================================================================== */

.catalog-filter {
  --cf-radius:    var(--r-xl);
  --cf-pad:       20px;
  --cf-title:     var(--fs-body-m);   /* 20 / 16 / 16 / 14 */
  --cf-icon:      20px;
  --cf-label:     18px;
  --cf-check:     20px;
  --cf-check-gap: 16px;
  --cf-list-h:    179px;              /* видно пять значений, дальше прокрутка */

  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catalog-filter__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catalog-filter__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Раздел фильтра ------------------------------------------------------- */
.catalog-filter__section {
  border-radius: var(--cf-radius);
  background: var(--c-white);
}

.catalog-filter__section-head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--cf-pad);
  text-align: left;
  cursor: pointer;
}

.catalog-filter__section-title {
  flex: 1 1 auto;
  color: var(--c-black);
  font-size: var(--cf-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

.catalog-filter__section-head:hover .catalog-filter__section-title,
.catalog-filter__section.is-open .catalog-filter__section-title { color: var(--c-hover); }

.catalog-filter__section-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--cf-icon);
  height: var(--cf-icon);
  color: var(--c-black);
}

.catalog-filter__section-head:hover .catalog-filter__section-marker,
.catalog-filter__section.is-open .catalog-filter__section-marker { color: var(--c-hover); }

/* Коробка иконки — --cf-icon (в макете это фрейм Action Icons), сама фигура
   занимает её часть: плюс 70%, крестик 40% */
.catalog-filter__section-icon--plus  { --icon-size: calc(var(--cf-icon) * .7); }
.catalog-filter__section-icon--cross { --icon-size: calc(var(--cf-icon) * .4); }

/* Плюс закрытого раздела сменяется крестиком раскрытого */
.catalog-filter__section-icon--cross { display: none; }

.catalog-filter__section.is-open .catalog-filter__section-icon--plus  { display: none; }
.catalog-filter__section.is-open .catalog-filter__section-icon--cross { display: block; }

/* --- Раскрытая часть ------------------------------------------------------ */
.catalog-filter__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0 var(--cf-pad) var(--space-24);
}

.catalog-filter__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-height: var(--cf-list-h);
  padding-right: var(--space-16);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Полоса прокрутки как в макете: 8px, серая, со скруглением */
.catalog-filter__list::-webkit-scrollbar       { width: 16px; }
.catalog-filter__list::-webkit-scrollbar-track { background: transparent; }

.catalog-filter__list::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: var(--r-full);
  background: var(--c-grey);
  background-clip: content-box;
}

/* Firefox не знает ::-webkit-scrollbar — там свои свойства.
   Задавать их всем нельзя: в Chrome они отключают правила выше. */
@supports not selector(::-webkit-scrollbar-thumb) {
  .catalog-filter__list {
    scrollbar-width: thin;
    scrollbar-color: var(--c-grey) transparent;
  }
}

/* --- Значение фильтра ----------------------------------------------------- */
.catalog-filter__check {
  display: flex;
  align-items: center;
  gap: var(--cf-check-gap);
  cursor: pointer;
}

.catalog-filter__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.catalog-filter__check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--cf-check);
  height: var(--cf-check);
  border-radius: 2px;
  background: var(--c-bg);
  transition: background-color var(--transition);
}

.catalog-filter__check-box::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--c-active);
  opacity: 0;
  transition: opacity var(--transition);
}

.catalog-filter__check:hover .catalog-filter__check-box { background: var(--c-light-blue); }

.catalog-filter__check-input:checked ~ .catalog-filter__check-box::before { opacity: 1; }

.catalog-filter__check-input:focus-visible ~ .catalog-filter__check-box {
  outline: 2px solid var(--c-main);
  outline-offset: 2px;
}

.catalog-filter__check-text {
  color: var(--c-black);
  font-size: var(--cf-label);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.catalog-filter__empty {
  color: var(--c-grey);
  font-size: var(--cf-label);
  line-height: var(--lh-base);
}

/* --- Кнопки --------------------------------------------------------------- */
.catalog-filter__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Крестик у «Сбросить фильтры»: в макете фигура 8px внутри фрейма 18px */
.btn.catalog-filter__reset { --btn-icon: 8px; }

/* --- Шапка и сортировка: только мобильное окно ---------------------------- */
.catalog-filter__head,
.catalog-filter__sort { display: none; }

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) {
  .catalog-filter {
    --cf-icon:   16px;
    --cf-label:  16px;
    --cf-check:  16px;
    --cf-list-h: 171px;
  }
}

@media (max-width: 767px) {
  .catalog-filter {
    --cf-radius:    4px;
    --cf-title:     var(--fs-cap-m);
    --cf-icon:      14px;
    --cf-label:     14px;
    --cf-check-gap: 12px;
    --cf-list-h:    156px;

    /* Выше закреплённой шапки сайта (у неё z-index 100) */
    position: fixed;
    z-index: 110;
    inset: 0;
    display: none;
    gap: 0;
    background: var(--c-bg);
  }

  .catalog-filter.is-open { display: flex; }

  /* Шапка второго уровня — как в мобильной шапке сайта */
  .catalog-filter__head {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-16);
    padding: 8px var(--gap-page);
    background: var(--c-main);
  }

  .catalog-filter__back {
    --icon-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background: var(--c-white);
    color: var(--c-hover);
  }

  .catalog-filter__head-title {
    color: var(--c-white);
    font-size: 20px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  .catalog-filter__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-16) var(--gap-page) var(--space-24);
    overflow-y: auto;
  }

  .catalog-filter__sort {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--cf-pad);
    border-radius: var(--cf-radius);
    background: var(--c-white);
  }

  .catalog-filter__sort-head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .catalog-filter__sort-icon {
    --icon-size: 16px;
    color: var(--c-black);
  }

  .catalog-filter__sort-title {
    color: var(--c-black);
    font-size: var(--fs-cap-m);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  .catalog-filter__sort-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Кнопки прижаты к низу окна, порядок в макете обратный колонке */
  .catalog-filter__actions {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 10px;
    padding: var(--space-12) var(--gap-page) var(--space-40);
    background: var(--c-bg);
  }

  .catalog-filter__actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .catalog-filter__submit { order: 2; }
  .catalog-filter__reset  { order: 1; }
  .btn.catalog-filter__reset { --btn-icon: 6px; }
}

/* End */
/* /local/templates/ekspopipe/components/bitrix/catalog/ekspopipe/style.css?17894571445408 */
/* /local/templates/ekspopipe/components/bitrix/catalog.smart.filter/ekspopipe/style.css?17894571449164 */