/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/catalog_chips.css?17872273034518*/
/* ============================================================
   Чипсы подразделов в каталоге — по макету 20a.
   Скоуп: секция каталога получает класс .chips20 (ставит section.php под isDev).
   Трогаем ТОЛЬКО строку чипсов, остальной каталог не задет.
   ============================================================ */

.chips20 .filter-top {
  margin: 0 0 12px;
  padding: 0;
}

.chips20 .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

/* До того как отработает catalog_chips.js, сервер отдаёт ВСЕ чипсы разом —
   в разделе с 23 подразделами это 2–3 строки, которые скрипт затем схлопывает
   в одну. Получался заметный прыжок вёрстки. Поэтому до готовности держим
   ровно одну строку: nowrap не даёт переноса, overflow срезает лишнее.
   Класс chips20-ready вешает скрипт — в том же тике, где меряет ширины,
   так что промежуточное состояние на экран не попадает. */
.chips20 .filter-list:not(.chips20-ready) {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 35px;
}

/* при nowrap флекс иначе ужимает чипсы, и замер ширины в скрипте врёт */
.chips20 .filter-list__item,
.chips20 .chips20-more {
  flex-shrink: 0;
}

.chips20 .filter-list__item {
  margin: 0 !important;
  padding: 0;
  float: none;
  list-style: none;
}

/* тема прячет последний чипс — нам нужны все */
.chips20 .filter-list__item:nth-last-child(1) {
  display: inline-block;
}

/* скрытие только через класс: inline display из JS тема перебивала */
.chips20 .filter-list__item.chips20-hide,
.chips20 .filter-list__item.chips20-hide:nth-last-child(1) {
  display: none !important;
}

.chips20 .filter-list__item > a {
  display: block;
  text-decoration: none;
}

.chips20 .filter-list__label {
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 400;
}

/* сам чипс — 1:1 из макета «Catalog Page 20a.dc.html» (Claude Design):
   background #fff, color #3c424a, border 1px #e5e7ea, radius 6px,
   padding 8px 14px, font 13px Roboto, вес в макете не задан = 400.
   Ничего здесь не «улучшать на глаз» — сверяться с макетом. */
.chips20 .filter-list__item .label-text {
  display: block;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e5e7ea;
  border-radius: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: #3c424a;
  transition: background .15s, border-color .15s, color .15s;
}

.chips20 .filter-list__item .label-text:hover {
  background: #f7f8f9;
  color: #3c424a;
}

.chips20 .filter-list__item .label-text h2,
.chips20 .filter-list__item .label-text h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  display: inline;
}

/* активный подраздел */
.chips20 .filter-list__item.active .label-text,
.chips20 .filter-list__item .label-text.active {
  background: #FDCD3C;
  border-color: #FDCD3C;
  color: #14171c;
}

/* «Ещё N» / «Свернуть» — 1:1 из макета: серая заливка #f3f4f6, вес 600.
   ГРАБЛЯ ПЕРЕНОСА: в макете гарнитура прописана явно ('Roboto', sans-serif),
   а в коде стояло `font-family: inherit` — кнопка тянула Open Sans от body сайта
   и выглядела тоньше соседних чипсов. Не возвращать inherit. */
.chips20 .chips20-more {
  flex-shrink: 0;
  padding: 8px 14px;
  background: #f3f4f6;
  border: 1px solid #e5e7ea;
  border-radius: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: #14171c;
  cursor: pointer;
  transition: background .15s;
}

.chips20 .chips20-more:hover {
  background: #ebedf0;
}

.chips20 .chips20-more.chips20-hide {
  display: none !important;
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/catalog_20a.css?178733855126398*/
/* ============================================================
   Каталог по макетам 20a (ПК) и 21c (мобилка) — карточки товаров.
   Скоуп: .c20-cat на секции каталога (ставит section.php под isDev).
   Фильтр слева и пагинацию не трогаем.
   ============================================================ */

/* ---------- сетка ---------- */
.c20-cat.c20-cat .card-product__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .c20-item {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

/* ---------- карточка ---------- */
.c20-cat.c20-cat .c20-card {
  height: 100%;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  background: #fff;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.c20-cat.c20-cat .c20-item:hover .c20-card {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 23, 28, .10);
}

/* фото: во всю ширину карточки, на светло-сером */
.c20-cat.c20-cat .c20-photo {
  display: block;
  margin: -12px -12px 2px;
  padding: 6px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1.18;
  background: #f7f8f9;
  border-radius: 8px 8px 0 0;
}

.c20-cat.c20-cat .c20-photo .card-product__image {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.c20-cat.c20-cat .c20-photo .card-product__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.c20-cat.c20-cat .c20-item.not-available .c20-photo .card-product__img {
  opacity: .5;
}

.c20-cat.c20-cat .c20-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

/* цена жёлтым бейджем + старая рядом */
.c20-cat.c20-cat .c20-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.c20-cat.c20-cat .c20-price {
  padding: 3px 8px;
  background: #FDCD3C;
  border-radius: 4px;
  font: 700 15px/19px 'Roboto', Arial, sans-serif;
  color: #000;
  white-space: nowrap;
}

.c20-cat.c20-cat .c20-item.not-available .c20-price {
  background: #f2f3f5;
  color: #6b7078;
}

.c20-cat.c20-cat .c20-price-old {
  font-size: 12px;
  color: #9aa0a9;
  text-decoration: line-through;
  white-space: nowrap;
}

.c20-cat.c20-cat .c20-title {
  display: block;
  min-height: 40px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #14171c;
  text-decoration: none;
}

.c20-cat.c20-cat .c20-title:hover {
  color: #14171c;
}

.c20-cat.c20-cat .c20-bonus {
  margin-top: -3px;
  font-size: 12px;
  color: #6b7078;
}

/* пусто, пока компонент бонусов не проставил значение */
.c20-cat.c20-cat .c20-bonus:not(:has(span:not(:empty))) {
  visibility: hidden;
}

/* ---------- кнопка покупки ---------- */
.c20-cat.c20-cat .c20-btnwrap {
  margin-top: auto;
  padding: 0;
}

.c20-cat.c20-cat .c20-buy,
.c20-cat.c20-cat .c20-notify {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  /* тема даёт .button{margin:0 0 18px}, а .btn-action-notify{margin:0} — из-за этого
     кнопка «В корзину» висела на 18px выше низа карточки и разъезжалась с «Уведомить» */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  cursor: pointer;
}

.c20-cat.c20-cat .c20-buy {
  background: #FDCD3C;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #14171c;
}

.c20-cat.c20-cat .c20-buy:hover {
  background: #ffae00;
}

.c20-cat.c20-cat .c20-buy__ico {
  width: 17px;
  height: 15px;
  fill: #14171c;
}

.c20-cat.c20-cat .c20-buy__in {
  display: none;
}

/* «В корзине» — белая кнопка; селектор усилен, тема красит .catalog-item.active жёлтым */
.c20-cat.c20-cat .c20-item .c20-buy.active,
.c20-cat.c20-cat .c20-item.active .c20-buy.active {
  background: #fff;
  border: 1px solid #d5d9de;
  color: #14171c;
  font-weight: 500;
}

.c20-cat.c20-cat .c20-item .c20-buy.active:hover,
.c20-cat.c20-cat .c20-item.active .c20-buy.active:hover {
  background: #f7f8f9;
}

.c20-cat.c20-cat .c20-buy.active .c20-buy__add {
  display: none;
}

.c20-cat.c20-cat .c20-buy.active .c20-buy__in {
  display: inline;
}

.c20-cat.c20-cat .c20-notify {
  background: #fff;
  border: 1px solid #d5d9de;
  font-size: 12.5px;
  font-weight: 500;
  color: #14171c;
}

.c20-cat.c20-cat .c20-notify:hover {
  background: #f7f8f9;
  border-color: #b9bfc7;
}

/* ---------- умный фильтр: типографика по макету 20a ----------
   Структуру фильтра НЕ трогаем (списки чекбоксов остаются списками), правим
   только шрифты, цвета и разделители — тема набирала заголовки Roboto 15/700,
   подписи серым #999, а «Показать ещё» синей ссылкой без подчёркивания.
   Скоуп .c20-cat — значит только дев и только ПК. */
.c20-cat.c20-cat .category .accordion__head {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: #14171c;
}

/* разделители между группами фильтра */
.c20-cat.c20-cat .category .accordion__item + .accordion__item {
  border-top: 1px solid #f0f1f3;
  padding-top: 14px;
  margin-top: 14px;
}

.c20-cat.c20-cat .category .list-check__label {
  font-size: 13px;
  line-height: 1.4;
  color: #3c424a;
}

.c20-cat.c20-cat .category .list-check__label:hover {
  color: #14171c;
}

/* «Показать ещё» / «Показать все» — ссылка, а не синяя кнопка */
.c20-cat.c20-cat .category .toggle-button {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: normal;
  color: #5c626b;
  text-decoration: underline;
}

.c20-cat.c20-cat .category .toggle-button:hover {
  color: #14171c;
}

/* --- группы-плитки (макет 20a) ---
   Класс .c20-tiles ставит sib_filter/functions.php тем группам, где значений
   немного и подписи короткие. Разметку и логику НЕ меняем: клик по-прежнему
   ловит <label onclick="smartFilter.click(this)">, значение уходит то же.
   Сам чекбокс прячем визуально (не display:none — чтобы не ломать нативную
   связку label to input), плиткой стилизуем подпись .label-text. */
.c20-cat.c20-cat .category .c20-tiles .list-check {
  display: flex;
  /* тема ставит спискам фильтра flex-direction: column */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  /* тема ограничивает список по высоте (.collapsed/.scrollable) и включает
     прокрутку — при flex-wrap это раскладывало плитки в колонки с
     горизонтальным скроллом. Значений здесь немного, показываем все сразу. */
  max-height: none;
  overflow: visible;
}

/* «Показать все» в плиточных группах не нужна — список и так весь на виду */
.c20-cat.c20-cat .category .c20-tiles .toggle-button {
  display: none;
}

.c20-cat.c20-cat .category .accordion__item.c20-tiles .list-check .list-check__item {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .category .accordion__item.c20-tiles .list-check .list-check__label {
  display: block;
  position: relative;
  width: auto;
  margin: 0;
  /* у темы тут padding 6px — место под квадратик чекбокса */
  padding: 0;
}

.c20-cat.c20-cat .category .c20-tiles .list-check__label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* квадратик чекбокса темы внутри плитки не нужен */
.c20-cat.c20-cat .category .c20-tiles .list-check__label::before,
.c20-cat.c20-cat .category .c20-tiles .list-check__label::after {
  display: none;
}

/* селектор намеренно длинный: тема перебивает padding и font-size у .label-text */
.c20-cat.c20-cat .category .accordion__item.c20-tiles .list-check__label .label-text {
  display: block;
  box-sizing: border-box;
  /* тема отодвигает подпись на 29px — освобождает место под квадратик */
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #e5e7ea;
  border-radius: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12.5px;
  line-height: normal;
  color: #3c424a;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.c20-cat.c20-cat .category .c20-tiles .list-check__label:hover .label-text {
  border-color: #FDCD3C;
  color: #14171c;
}

.c20-cat.c20-cat .category .accordion__item.c20-tiles .list-check__label input:checked + .label-text {
  background: #FDCD3C;
  border-color: #FDCD3C;
  color: #14171c;
}

/* Значение, по которому фильтр ничего не найдёт: Битрикс ставит на input
   disabled="disabled". В обычном списке это видно по бледной подписи,
   в плитке нужно показать явно — иначе плитка выглядит рабочей. */
.c20-cat.c20-cat .category .accordion__item.c20-tiles .list-check__label input:disabled + .label-text {
  background: #f7f8f9;
  border-color: #eceef0;
  color: #b9bfc7;
  cursor: default;
}

.c20-cat.c20-cat .category .c20-tiles .list-check__label:hover input:disabled + .label-text {
  border-color: #eceef0;
  color: #b9bfc7;
}

/* счётчиков значений в макете у плиток нет */
.c20-cat.c20-cat .category .c20-tiles .list-check__tooltip {
  display: none;
}


/* поля «От» / «До»: рамка на всей ячейке, input внутри без своей */
.c20-cat.c20-cat .category .range__input {
  display: flex;
  align-items: baseline;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #e5e7ea;
  border-radius: 6px;
  background: #fff;
}

.c20-cat.c20-cat .category .range__input .text,
.c20-cat.c20-cat .category .range__input input {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  line-height: normal;
  color: #14171c;
}

.c20-cat.c20-cat .category .range__input .text {
  color: #9aa0a9;
}

.c20-cat.c20-cat .category .range__input input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
}

/* ---------- крошки над каталогом (макет 20a) ----------
   Крошки лежат ВЫШЕ секции .c20-cat, поэтому скоуп по .catalog-page.
   Файл подключается только под isDev, так что на бой это не протекает.
   Тема давала 15px и лишние 5px под каждым пунктом — от шапки до H1
   набегало ~59px вместо макетных ~29px. */
/* Тема резервирует высоту крошек: #rbs_breadcrumbs_div { min-height: 59px }
   (rbs_custom_css.css) — это защита от прыжка, когда крошки приезжают отдельно,
   поэтому не обнуляем, а приводим к реальной высоте блока по макету: 20px
   отступ сверху + 17px строка + 8px снизу. Селектор с ID — иначе не перебить. */
.catalog-page #rbs_breadcrumbs_div.box-bread-crumbs {
  min-height: 45px;
}

.catalog-page .box-bread-crumbs .bread-crumbs {
  padding: 20px 0 8px;
  font-size: 12.5px;
  line-height: 17px;
}

.catalog-page .box-bread-crumbs .bread-crambs__item {
  margin-bottom: 0;
  font-size: 12.5px;
  line-height: 17px;
}

.catalog-page .box-bread-crumbs .bread-crambs__item,
.catalog-page .box-bread-crumbs .bread-crambs__item span {
  font-size: 12.5px;
  line-height: 17px;
  color: #9aa0a9;
}

.catalog-page .box-bread-crumbs .bread-crambs__link {
  font-size: 12.5px;
  line-height: 17px;
  color: #5c626b;
}

/* ---------- заголовок + счётчик товаров в наличии (макет 20a) ---------- */
.c20-cat.c20-cat .c20-h1row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

/* тема добавляет заголовку padding-bottom: 22px — в макете его нет,
   там только margin: 0 0 14px */
.c20-cat.c20-cat .c20-h1row .main-title {
  margin: 0 0 14px;
  padding: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #14171c;
}

.c20-cat.c20-cat .c20-count {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: normal;
  color: #9aa0a9;
  white-space: nowrap;
}

/* ---------- сортировка (1:1 из макета 20a) ----------
   Активный пункт подчёркнут жёлтым 2px, неактивные #6b7078.
   Порядок пунктов задаёт include/sort.php: цена → популярность → новизна → название.
   Стрелки в макете только у «По цене» — у остальных иконку темы прячем. */
.c20-cat.c20-cat .sorting {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .sorting__item {
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .sorting__item .sorting__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 3px;
  border-bottom: 2px solid transparent;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  line-height: normal;
  color: #6b7078;
  text-decoration: none;
  cursor: pointer;
}

.c20-cat.c20-cat .sorting__item .sorting__link:hover {
  color: #14171c;
}

.c20-cat.c20-cat .sorting__item.active .sorting__link {
  color: #14171c;
  border-bottom-color: #FDCD3C;
}

/* иконка темы не нужна нигде, кроме цены */
.c20-cat.c20-cat .sorting__item .icon-arrow-top {
  display: none;
}

/* «По цене» — два треугольника, как в макете */
.c20-cat.c20-cat .sorting__item[data-sort="price"] .icon-arrow-top {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  width: 8px;
  height: auto;
  margin: 0;
  background: none;
  /* тема крутит иконку на -90°, из-за чего пара стрелок ложится набок */
  transform: none;
}

.c20-cat.c20-cat .sorting__item[data-sort="price"] .icon-arrow-top::before,
.c20-cat.c20-cat .sorting__item[data-sort="price"] .icon-arrow-top::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  font-size: 0;
}

.c20-cat.c20-cat .sorting__item[data-sort="price"] .icon-arrow-top::before {
  border-bottom: 5px solid #c3c8cf;
}

.c20-cat.c20-cat .sorting__item[data-sort="price"] .icon-arrow-top::after {
  border-top: 5px solid #c3c8cf;
}

/* по возрастанию светится верхняя стрелка, по убыванию (sort-down) — нижняя */
.c20-cat.c20-cat .sorting__item[data-sort="price"].active .icon-arrow-top::before {
  border-bottom-color: #14171c;
}

.c20-cat.c20-cat .sorting__item[data-sort="price"].active.sort-down .icon-arrow-top::before {
  border-bottom-color: #c3c8cf;
}

.c20-cat.c20-cat .sorting__item[data-sort="price"].active.sort-down .icon-arrow-top::after {
  border-top-color: #14171c;
}

/* ---------- адаптив сетки ---------- */
@media (max-width: 1200px) {
  .c20-cat.c20-cat .card-product__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- мобилка (21c) ---------- */
@media (max-width: 767px) {
  .c20-cat.c20-cat .card-product__list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .c20-cat.c20-cat .c20-card {
    gap: 8px;
    padding: 10px;
  }

  .c20-cat.c20-cat .c20-photo {
    margin: -10px -10px 2px;
  }

  .c20-cat.c20-cat .c20-price {
    padding: 3px 7px;
    font-size: 14px;
    line-height: 18px;
  }

  .c20-cat.c20-cat .c20-title {
    min-height: 34px;
    font-size: 13px;
  }

  .c20-cat.c20-cat .c20-buy {
    font-size: 12.5px;
  }
}

/* ============================================================
   Пагинация 48c (ПК): счётчик с прогрессом, жёлтая «Показать ещё»,
   под ней номера страниц; на догрузке — скелетоны и разделители
   партий. Автодогрузки по скроллу на ПК нет. Механика штатная
   (режим inf-button, RZB2.ajax) — здесь только вид, поведение
   в js/global/catalog_pag_20a.js.
   Спека: docs/specs/48-paginatsiya.md
   ============================================================ */

/* тема даёт блоку каталога margin-bottom 40px — вместе с верхним
   отступом пагинации выходила пустая дыра после карточек; отступы
   между партиями догрузки даёт разделитель .c20-pagdiv */
.c20-cat.c20-cat .catalog {
  margin-bottom: 0;
}

/* стек по центру: счётчик → прогресс → кнопка (в разметке кнопка
   первая — переставляем флексом) */
.c20-cat.c20-cat .box-paging {
  background: none;
  border: none;
  margin: 0;
  padding: 18px 0 0;
}

.c20-cat.c20-cat .more-catalog-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  /* тема красит блок серым и растягивает кнопку на всю ширину —
     правила ниже про кнопку поэтому с удлинённым селектором */
  background: none;
  font-family: 'Roboto', Arial, sans-serif;
}

/* штатный счётчик «Показано 36 товаров из 1321» скрыт, но не удалён:
   из него скрипт берёт числа после каждой перерисовки */
.c20-cat.c20-cat .more-catalog-wrap > .text {
  display: none;
}

.c20-pag__count {
  order: 0;
  font-size: 12.5px;
  color: #6b7078;
}

.c20-pag__count b {
  color: #14171c;
  font-weight: 600;
}

.c20-pag__bar {
  order: 1;
  width: 260px;
  max-width: 70%;
  height: 4px;
  border-radius: 2px;
  background: #e2e4e8;
  overflow: hidden;
}

.c20-pag__bar i {
  display: block;
  height: 100%;
  background: #FDCD3C;
}

.c20-cat.c20-cat .more-catalog-wrap .more-catalog {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 10px;
  width: auto;
  height: 46px;
  padding: 0 40px;
  border: none;
  border-radius: 8px;
  background: #FDCD3C;
  color: #14171c;
  font: 700 14px 'Roboto', Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.c20-cat.c20-cat .more-catalog-wrap .more-catalog:hover {
  background: #ffae00;
  color: #14171c;
}

/* плюс из старой круглой кнопки темы */
.c20-cat.c20-cat .more-catalog-wrap .more-catalog .btn-plus {
  display: none;
}

/* на последней странице кнопки нет — остаются счётчик 100% и номера */
.c20-cat.c20-cat .more-catalog-wrap .more-catalog.disabled {
  display: none;
}

/* состояние 48f: пока грузим — серая, со спиннером, не нажимается */
.c20-cat.c20-cat .more-catalog-wrap .more-catalog.is-loading {
  background: #f2f3f5;
  color: #6b7078;
  pointer-events: none;
}

.c20-cat.c20-cat .more-catalog-wrap .more-catalog.is-loading::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #FDCD3C;
  border-top-color: transparent;
  animation: c20PagSpin .9s linear infinite;
}

@keyframes c20PagSpin {
  to { transform: rotate(360deg); }
}

/* ---------- номера страниц: и людям для прыжков, и поисковику —
   у ссылок настоящие ?PAGEN_1=N ----------
   Линия короткая и по центру: во всю ширину она читалась как граница
   нового раздела, и номера «прилипали» к SEO-описанию под ними;
   снизу отступ, чтобы номера остались частью пагинации */
.c20-cat.c20-cat [data-pagination-num] {
  max-width: 460px;
  margin: 12px auto 24px;
  padding-top: 14px;
  border-top: 1px solid #e2e4e8;
}

/* одна страница — шаблон отдаёт блок без номеров, линию не рисуем */
.c20-cat.c20-cat [data-pagination-num]:not(:has(.paging-list__item)) {
  display: none;
}

.c20-cat.c20-cat .paging-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .paging-list__item {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c20-cat.c20-cat .paging-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #e5e7ea;
  border-radius: 8px;
  font: 500 13.5px/1 'Roboto', Arial, sans-serif;
  color: #14171c;
  text-decoration: none;
  transition: border-color .15s;
}

.c20-cat.c20-cat .paging-list__link:hover {
  border-color: #14171c;
  color: #14171c;
}

.c20-cat.c20-cat .paging-list__item.active .paging-list__link {
  background: #FDCD3C;
  border-color: #FDCD3C;
  font-weight: 700;
}

/* шаблон темы ставит стрелку между числами — флексовым порядком уводим
   «вперёд» в конец ряда, «назад» в начало, как в макете */
.c20-cat.c20-cat .paging-list__item.paging-next { order: 99; }
.c20-cat.c20-cat .paging-list__item.paging-prev { order: -1; }

.c20-cat.c20-cat .paging-list .arrow-paging {
  display: block;
  width: 8px;
  height: 8px;
  border: none;
  border-right: 2px solid #6b7078;
  border-bottom: 2px solid #6b7078;
  background: none;
  transform: rotate(-45deg);
  margin-left: -3px;
}

.c20-cat.c20-cat .paging-list__item.paging-prev .arrow-paging {
  transform: rotate(135deg);
  margin-left: 3px;
}

/* Старая тема рисует стрелку иконочным шрифтом через ::before
   (font «icons», line-height 50px) — бокс торчит из спана вниз,
   и под кнопкой оставался «уголок». Шеврон рисуем сами, глиф гасим. */
.c20-cat.c20-cat .paging-list .arrow-paging::before,
.c20-cat.c20-cat .paging-list .arrow-paging::after {
  content: none;
  display: none;
}

/* разрыв в номерах — «…», вставляет скрипт */
.c20-pag__gap {
  align-self: center;
  min-width: 22px;
  text-align: center;
  color: #9aa0a9;
  font: 400 13.5px/38px 'Roboto', Arial, sans-serif;
}

/* ---------- разделитель партии: «Страница 2 · товары 37–72» ----------
   ставится скриптом между блоками догрузки, в исходной разметке его нет */
.c20-pagdiv {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  font-family: 'Roboto', Arial, sans-serif;
}

.c20-pagdiv::before,
.c20-pagdiv::after {
  content: '';
  height: 1px;
  flex: 1;
  background: #dcdee2;
}

.c20-pagdiv span {
  font: 600 11.5px 'Roboto', Arial, sans-serif;
  color: #8b9098;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ---------- скелетоны догрузки (48f): те же карточки, только серые.
   Отдельной сеткой с теми же колонками, что у списка: у живых карточек
   инлайновый order, внутри списка заглушки всплывали бы в начало ---------- */
.c20-pag__skels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 10px;
}

.c20-pag__skel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  opacity: .65;
}

.c20-pag__skel i {
  display: block;
}

.c20-pag__skel-pic {
  margin: -12px -12px 2px;
  aspect-ratio: 1 / 1.18;
  background: #eceef0;
  border-radius: 8px 8px 0 0;
}

.c20-pag__skel-price {
  width: 84px;
  height: 22px;
  border-radius: 4px;
  background: #eceef0;
}

.c20-pag__skel-name {
  height: 40px;
  border-radius: 4px;
  background: #f2f3f5;
}

.c20-pag__skel-btn {
  height: 36px;
  border-radius: 6px;
  background: #f2f3f5;
  margin-top: auto;
}

@media (max-width: 1200px) {
  .c20-pag__skels {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .c20-pag__skels {
    grid-template-columns: 1fr 1fr;
  }

  .c20-pag__skel {
    padding: 10px;
  }

  .c20-pag__skel-pic {
    margin: -10px -10px 2px;
  }
}


/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/components/bitrix/catalog.smart.filter/sib_filter/style.min.css?17143810613274*/
.accordion__item{border-top:1px solid #e8e8e8;padding:12px}.accordion__item:first-child{border:0}.accordion_mobile{padding:10px}.accordion__item .accordion__heading{margin-bottom:5px;padding:6px}.accordion__item .accordion__text .range{padding:6px}.accordion__item .accordion__text .range .range__input:hover{border:1px solid #fdbf03}.accordion__item .accordion__text .list-check{display:flex;margin-left:0;list-style-type:none;padding:0;margin-bottom:0;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:4px;overflow-y:hidden}.accordion__item .accordion__text .list-check .list-check__item{margin:0;width:100%;border:1px solid transparent;border-radius:8px}.accordion__item .accordion__text .list-check .list-check__item:hover{background-color:#f7f8fb;border-color:1px}.accordion__item .accordion__text .list-check .list-check__item .list-check__label{padding:6px;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;width:100%;flex-wrap:nowrap}.accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]{position:absolute;width:22px;height:22px}.accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:before{content:"";display:block;width:22px;height:22px;border-radius:6px;background:center/contain no-repeat url(/local/templates/romza_bitronic2_2.23.10/new_img/svg/checkbox_white.svg),#eaecf1;background-size:0;transition:all .1s ease-out}.accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:checked:before{background-color:#fdbf03;background-size:10px}.accordion__item .accordion__text .list-check .list-check__item .list-check__label .label-text{padding:0;margin-left:calc(22px + 7px);font:400 14px/1"Roboto";background-color:unset;max-width:100%!important}.accordion__item .accordion__text .list-check.scrollable{overflow-y:auto;max-height:calc(10*calc(22px + 2*(6px + 1px)) + 9*4px);scrollbar-width:thin;scrollbar-color:#d3d3d3 #fff}.accordion__item .accordion__text .list-check.scrollable::-webkit-scrollbar{width:4px}.accordion__item .accordion__text .list-check.scrollable::-webkit-scrollbar-thumb{background-color:1px;border-radius:6px}.accordion__item .accordion__text .list-check.collapsed{max-height:calc(4*calc(22px + 2*(6px + 1px)) + 3*4px)}.accordion__item .accordion__text .toggle-button{padding:6px;margin-top:10px;font:500 14px/12px"Roboto";color:#6878aa}.accordion__item .slider__wrap{padding:6px;margin-top:10px}.accordion__item .slider__wrap .ui-slider{height:2px;border:0!important;background-color:#eaecf1;max-width:calc(100% - 10px);padding:0;margin:0 auto}.accordion__item .slider__wrap .ui-slider .ui-slider-range{background-color:#fdbf03}.accordion__item .slider__wrap .ui-slider .ui-slider-handle{top:-6px!important;border-radius:2px;width:14px!important;height:14px!important;background:#fdbf03!important;border:0!important;cursor:pointer!important}.rbs-close-filter-btn{font-family:"Roboto",sans-serif;font-size:28px;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-align:left;color:#333}.rbs-close-filter-btn span{display:block;padding:20px 0 0 20px}.search-category .jq-checkbox.checked+.category-list__link{font-weight:700}
/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/catalog_gallery.css?17873746667315*/
/* Галерея фото в карточке каталога: ПК 20a (зоны наведения) и мобилка 21c
   (свайп на transform из catalog_gallery.js). Разметка — include/item_block_20a.php:
   .card-product__image.cg > .cg-track > picture.cg-slide (кадр 1 с сервера,
   остальные строит js/global/catalog_gallery.js) + .cg-dots.
   Селекторы с удвоением класса — как в catalog_20a/21c.css: перебиваем тему
   специфичностью, без !important.
   Задача: docs/tasks/galereya-kartochek-kataloga.md */

/* Обрезка кадров — на НЕПОДВИЖНОЙ рамке, а не на ленте: лента едет
   трансформом, и overflow на ней уезжал вместе с ней — видимым оставался
   только первый кадр, остальные всегда за обрезкой (утро 22.08, видео
   владельца: «при наведении кадр серый»). */
.c20-cat.c20-cat .c20-photo .cg,
.c21-cat.c21-cat .c20-photo .cg {
  position: relative;
  overflow: hidden;
}

/* Штатный зум фото при наведении/тапе (scale 1.1) конфликтует с галереей:
   фото и увеличивается, и листается разом — убрано по решению владельца
   22.08.2026. Глушим на ВСЕХ карточках нового каталога (и без галереи тоже),
   иначе часть карточек зумилась бы, часть нет. Источник зума в файлах темы
   не найден (проверены css, js, инлайны и собранные бандлы — правила со
   scale(1.1) там нет, а computed transform есть), поэтому только !important —
   он перебивает источник, где бы тот ни жил. Подъём всей карточки
   (translateY(-3px) из catalog_20a.css) не трогаем — с галереей не дерётся. */
.c20-cat.c20-cat .c20-photo .card-product__image,
.c21-cat.c21-cat .c20-photo .card-product__image {
  transform: none !important;
}

/* Лента кадров: во всю фото-зону. Листается ТРАНСФОРМОМ из
   catalog_gallery.js (все устройства, единый путь), а не нативным скроллом:
   scroll-snap на iOS исчерпан тремя итерациями — касание во время инерции
   убивало доводку (кадр застревал наполовину), а первый свайп после
   прокрутки страницы дёргался, жест уходил странице. Серый фон — подложка
   «кадр ещё грузится»; вертикальный жест остаётся странице
   (touch-action: pan-y), горизонтальный забирает JS. */
.c20-cat.c20-cat .cg .cg-track,
.c21-cat.c21-cat .cg .cg-track {
  display: flex;
  width: 100%;
  height: 100%;
  background: #f7f8f9;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Лента живёт ВНУТРИ ссылки, а ссылки и картинки на iOS перетаскиваемые:
   горизонтальный свайп Safari норовит превратить в drag ссылки — отсюда
   «подвисающее» листание (жалоба владельца, вторая итерация). Глушим
   перетаскивание и серую вспышку тапа на фото-зоне целиком. */
.c20-cat.c20-cat .c20-photo,
.c21-cat.c21-cat .c20-photo {
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.c20-cat.c20-cat .cg .cg-track img,
.c21-cat.c21-cat .cg .cg-track img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.c20-cat.c20-cat .cg .cg-slide,
.c21-cat.c21-cat .cg .cg-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* фон «кадр ещё грузится» — на самом кадре: трек уезжает трансформом
     вместе со своим фоном, а слайды выпирают за его ширину */
  background: #f7f8f9;
}

/* iOS Safari не умеет mix-blend-mode внутри асинхронно скроллируемого
   контейнера: кадры рисовались на белом, а сам бленд срывал плавный скролл
   (жалоба владельца с двух айфонов; изоляция слоя не помогла). Внутри ленты
   бленд выключаем и заменяем равномерным затемнением: multiply с почти
   белым #f7f8f9 математически = brightness(~0.972), отличие ≤1/255 на
   канал — глазом не отличить. Фильтр самодостаточен: не зависит ни от
   подложки, ни от слоёв, ни от порядка отрисовки. Карточки без галереи
   (без ленты) остаются на штатном бленде. */
.c20-cat.c20-cat .c20-photo .cg-track .card-product__img,
.c21-cat.c21-cat .c20-photo .cg-track .card-product__img {
  mix-blend-mode: normal;
  filter: brightness(0.972);
}

/* точки-индикатор поверх низа кадра; клики сквозь них проходят в ссылку.
   Отступ снизу заметный: в 5px от края точки липли к стыку подложки
   с зоной цены (замечание владельца 22.08) — держим их чётко на подложке */
.c20-cat.c20-cat .cg .cg-dots,
.c21-cat.c21-cat .cg .cg-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.c20-cat.c20-cat .cg .cg-dots i,
.c21-cat.c21-cat .cg .cg-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(60, 66, 74, .22);
}

.c20-cat.c20-cat .cg .cg-dots i.on,
.c21-cat.c21-cat .cg .cg-dots i.on {
  background: #3c424a;
}

/* мобилка: фото-зона ниже, точкам хватает меньшего отступа */
.c21-cat.c21-cat .cg .cg-dots {
  bottom: 8px;
}

/* «+N» — фото больше пяти, остальное в детальной карточке */
.c20-cat.c20-cat .cg .cg-dots b,
.c21-cat.c21-cat .cg .cg-dots b {
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  color: #9aa0a9;
  margin-left: 2px;
}

/* ПК: чтобы точки не рябили по всей сетке — показываем при наведении на карточку */
@media (hover: hover) and (pointer: fine) {
  .c20-cat.c20-cat .cg .cg-dots {
    opacity: 0;
    transition: opacity .15s;
  }

  .c20-cat.c20-cat .c20-card:hover .cg-dots {
    opacity: 1;
  }
}

/* End */
/* /local/templates/romza_bitronic2_2.23.10/new_css/catalog_chips.css?17872273034518 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/catalog_20a.css?178733855126398 */
/* /local/templates/romza_bitronic2_2.23.10/components/bitrix/catalog.smart.filter/sib_filter/style.min.css?17143810613274 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/catalog_gallery.css?17873746667315 */