/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/filtr_vid.css?17945802035132*/
/* ============================================================
   Вид умного фильтра по макету владельца (Claude Design, 13.11.2026; задача katalog-plitki-podrazdelov).
   «Чекбоксы стали чёрненькие, с обводкой; у кнопочек (Встроенная память и т.п.) чёрная обводка поярче».
   Разметку и логику фильтра не трогаем — только вид. ПК (.c20-cat) и телефон (.c21-cat): каталог, поиск, уценка
   (файл подключает include/catalog_c21.php рядом с catalog_20a/21c.css).

   Специфичность: тема (sib_filter/style.css) рисует квадратик на input::before селектором из 5 классов,
   плитки красят catalog_20a.css / catalog_21c.css селектором .c2Xcat.c2Xcat …(7 классов) — поэтому здесь
   везде двойной .category.category и .accordion__text: на класс больше, без !important.
   ============================================================ */

/* ---------- чекбокс: белый квадрат с тёмной рамкой → чёрный с белой галочкой ---------- */
.c20-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]::before,
.c21-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]::before {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 1px;
  border: 1.5px solid #18191b;
  border-radius: 5px;
  background-color: #fff;
  background-size: 0;
}
.c20-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:checked::before,
.c21-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:checked::before {
  border-color: #18191b;
  background-color: #18191b;
  background-size: 11px;
}
.c20-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:disabled::before,
.c21-cat .category.category .accordion__item .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:disabled::before {
  border-color: #c9ccd2;
  background-color: #f7f8f9;
}

/* ---------- плитки-значения (память, наличие…): тёмная рамка, выбранная — жёлтая с тёмной рамкой ---------- */
.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label .label-text,
.c21-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label .label-text {
  border-color: #18191b;
  color: #18191b;
}
.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label:hover .label-text {
  border-color: #18191b;
  background: #f7f8f9;
}
.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:checked + .label-text,
.c21-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:checked + .label-text {
  border-color: #18191b;
  background: #fdcd3c;
  color: #18191b;
}
/* значение, по которому ничего не найдётся, — по-прежнему бледное: тёмная рамка сделала бы его «рабочим» */
.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:disabled + .label-text,
.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label:hover input:disabled + .label-text,
.c21-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:disabled + .label-text {
  border-color: #e3e5e9;
  background: #f7f8f9;
  color: #b9bfc7;
}

/* ============================================================
   Подложка фото в карточке товара каталога — скруглена со всех сторон (владелец 13.11.2026: «серая подложка
   каталога с острыми краями — закруглить»). Было 8px только сверху (catalog_20a.css / catalog_21c.css), низ серого
   блока упирался в белую часть карточки прямым углом. Здесь же — ПК и телефон, все четыре шаблона сетки.
   ============================================================ */
.c20-cat.c20-cat .c20-card .c20-photo,
.c21-cat.c21-cat .c20-card .c20-photo {
  border-radius: 8px;
  overflow: hidden;
}

/* Количество товаров у значений списка (выводит sib_filter/functions.php с 13.11.2026) — на телефоне серым справа */
.c21-cat .category .list-check__count {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: #9a9da4;
}

/* End */


/* 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?179451131328384*/
/* ============================================================
   Каталог по макетам 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: #7a808a;
  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: #7a808a;
}

.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: #7a808a;
}

.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: #7a808a;
  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: #7a808a;
  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;
  }
}

/* ---------- скругления фильтра (владелец 13.11.2026, задача filtr-skruglenie) ----------
   Все белые подложки сайта скруглены (панель товаров .result — 12px, плитки подразделов — 16px), а панель
   фильтра была с острыми углами; бегунки цены — квадратики 14px с radius 2px. Делаем панель как .result,
   бегунки — жёлтыми кругами 16px без обводки, полосу 3px с круглыми концами. Перетаскивание не трогаем: jQuery UI ставит
   бегунку только left в %, центр держит отрицательный margin-left = половина ширины.
   !important — потому что sib_filter/style.css задаёт бегунку размер/фон/рамку с !important (0,4,0); у нас 0,5,0. */
.c20-cat.c20-cat .search-box .category {
  border-radius: 12px;
}
.c20-cat.c20-cat .category .ui-slider.ui-slider-horizontal {
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: #eaecf1;
}
.c20-cat.c20-cat .category .ui-slider .ui-slider-range {
  border: 0;
  border-radius: 2px;
}
.c20-cat.c20-cat .category .ui-slider .ui-slider-handle {
  box-sizing: border-box;
  width: 16px !important;
  height: 16px !important;
  top: -6.5px !important;
  margin-left: -8px;
  border: 0 !important; /* белую обводку владелец 13.11 убрал — просто жёлтый круг */
  border-radius: 50%;
  background: #fdbf03 !important;
  box-shadow: 0 1px 3px rgba(20, 23, 28, .18);
  cursor: grab !important;
  outline: none;
}
.c20-cat.c20-cat .category .ui-slider .ui-slider-handle:active {
  cursor: grabbing !important;
}
.c20-cat.c20-cat .category .ui-slider .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 3px rgba(253, 191, 3, .35), 0 1px 4px rgba(20, 23, 28, .28);
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/filtr_pk.css?179458246318718*/
/* ============================================================
   Умный фильтр на ПК — редизайн «мягкий жёлтый» (ТЗ владельца по макету Claude Design, 13.11.2026;
   задача katalog-plitki-podrazdelov). Логику catalog.smart.filter и состав свойств НЕ меняем — только вид
   и удобства: шапка с метками выбранного, сворачивание секций с бейджами, поиск по длинным спискам,
   «Показать ещё N», закреплённая кнопка «Показать N товаров» (скрипт js/global/filtr_pk.js).
   Только ПК (.c20-cat). Телефон (.c21-cat) остаётся в прежнем виде (filtr_vid.css).

   Специфичность: тема (sib_filter/style.css) — 5 классов на input::before, catalog_20a.css — .c20-cat.c20-cat …
   (до 7 классов), filtr_vid.css — ещё на класс больше. Здесь везде префикс body + двойной .category.category:
   сильнее всех, без !important.
   Цвета: жёлтый #FDCD3C, светло-жёлтый #FFF3C4, серый фон #f4f5f7, текст #18191b, второстепенный #6b6e75/#9a9da4,
   недоступное #c3c6cc.
   ============================================================ */

/* ---------- 1. панель ---------- */
body .c20-cat.c20-cat .search-box .category:has(form) {
  width: 300px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  font-family: Inter, "Inter Fallback", Arial, sans-serif;
  color: #18191b;
  vertical-align: top;
}
/* ширину колонки товаров меняем только там, где фильтр действительно есть (на деве у уценки он бывает пустым) */
body .c20-cat.c20-cat .search-box:has(.category form) .result {
  width: calc(100% - 322px);
}
body .c20-cat.c20-cat .category.category > form {
  padding: 20px 20px 0;
}
/* серых разделителей между секциями нет — только отступы 14 сверху и снизу */
body .c20-cat.c20-cat .category.category .accordion__item,
body .c20-cat.c20-cat .category.category .accordion__item + .accordion__item {
  margin: 0;
  padding: 14px 0;
  border: 0;
}
body .c20-cat.c20-cat .category.category .accordion,
body .c20-cat.c20-cat .category.category .accordion_desktop {
  margin: 0;
  padding: 0;
  border: 0;
}
/* «Показать все параметры» темы и штатный блок «Показать / Сбросить фильтр» — их заменяют шапка и нижняя кнопка */
body .c20-cat.c20-cat .category.category .all__cnt,
body .c20-cat.c20-cat .category.category .rbs-filter-shows {
  display: none;
}

/* ---------- 2. шапка: «Фильтры» / «Сбросить» + метки выбранного ---------- */
.fp-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid #eceef1;
}
.fp-head__row {
  display: flex;
  align-items: center;
}
.fp-head__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
body .c20-cat .fp-head .fp-head__reset {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #6b6e75;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body .c20-cat .fp-head .fp-head__reset:hover {
  color: #18191b;
}
body .c20-cat .fp-head .fp-head__reset[hidden] {
  display: none;
}
.fp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-tags[hidden] {
  display: none;
}
.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border-radius: 14px;
  background: #fff3c4;
  font-size: 12px;
  line-height: 1.2;
  color: #18191b;
}
.fp-tag__txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .c20-cat .fp-tag .fp-tag__x {
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #18191b;
  cursor: pointer;
}
body .c20-cat .fp-tag .fp-tag__x:hover {
  background: #18191b;
  color: #fff;
}

/* ---------- 3. заголовки секций: 14/600, стрелка, бейдж, сворачивание ---------- */
body .c20-cat.c20-cat .category.category .accordion__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
body .c20-cat.c20-cat .category.category .accordion__heading:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 3px;
  border-radius: 4px;
}
body .c20-cat.c20-cat .category.category .accordion__head {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #18191b;
}
.fp-badge {
  min-width: 18px;
  padding: 2px 6px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #fdcd3c;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: #18191b;
}
.fp-badge[hidden] {
  display: none;
}
.fp-arrow {
  display: flex;
  margin-left: auto;
  color: #6b6e75;
  transition: transform .15s;
}
body .c20-cat .accordion__item.fp-collapsed .fp-arrow {
  transform: rotate(180deg);
}
body .c20-cat.c20-cat .category.category .accordion__item.fp-collapsed .accordion__heading {
  margin-bottom: 0;
}
body .c20-cat.c20-cat .category.category .accordion__item.fp-collapsed .accordion__text {
  display: none !important; /* тема ставит display у .accordion__text своими правилами и иногда инлайном */
}

/* ---------- 4. цена (и другие диапазоны) ---------- */
body .c20-cat.c20-cat .category.category .range__inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
body .c20-cat.c20-cat .category.category .range__inputs::after {
  content: none;
}
body .c20-cat.c20-cat .category.category .range__input {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: #f4f5f7;
}
body .c20-cat.c20-cat .category.category .range__input + .range__input {
  position: relative;
  margin-left: 16px;
}
body .c20-cat.c20-cat .category.category .range__input + .range__input::before {
  content: '—';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: #c3c6cc;
  font-size: 13px;
}
body .c20-cat.c20-cat .category.category .range__input .text {
  font-family: inherit;
  font-size: 13px;
  color: #9a9da4;
}
body .c20-cat.c20-cat .category.category .range__input input {
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #18191b;
}
/* ползунок: серая линия 2px, выбранное — жёлтое, ручки — белые круги 18px с жёлтой обводкой 2px */
body .c20-cat.c20-cat .category.category .ui-slider.ui-slider-horizontal {
  height: 2px;
  border-radius: 1px;
  background: #e3e5e9;
}
body .c20-cat.c20-cat .category.category .ui-slider .ui-slider-range {
  border-radius: 1px;
  background: #fdcd3c;
}
body .c20-cat.c20-cat .category.category .ui-slider .ui-slider-handle {
  width: 18px !important;
  height: 18px !important;
  top: -8px !important;
  margin-left: -9px;
  border: 2px solid #fdcd3c !important;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(20, 23, 28, .12);
}

/* ---------- 5. кнопки-значения (плитки: наличие, память, ОЗУ, процессор…) ---------- */
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .list-check {
  gap: 6px;
}
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label .label-text {
  padding: 7px 11px;
  border: 1px solid #f4f5f7;
  border-radius: 18px;
  background: #f4f5f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #18191b;
}
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label:hover .label-text {
  border-color: #e3e5e9;
  background: #eceef1;
}
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:checked + .label-text,
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label:hover input:checked + .label-text {
  border-color: #fdcd3c;
  background: #fff3c4;
  font-weight: 600;
}
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label input:disabled + .label-text,
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .accordion__text .list-check__label:hover input:disabled + .label-text {
  border-color: transparent;
  background: transparent;
  color: #c3c6cc;
  text-decoration: line-through;
  cursor: default;
}
body .c20-cat.c20-cat .category.category .accordion__item.c20-tiles .list-check__label input:focus-visible + .label-text {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}

/* ---------- 6. списки с чекбоксами (модель устройства и т. п.) ---------- */
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check__item {
  margin: 0;
  padding: 0;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check__item.fp-more,
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check__item.fp-nomatch {
  display: none;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 13px;
  color: #18191b;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label [type=checkbox] {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]::before {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #c9ccd2;
  border-radius: 5px;
  background: #fff center / 0 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318191b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:checked::before {
  border-color: #fdcd3c;
  background-color: #fdcd3c;
  background-size: 12px;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label [type=checkbox]:disabled::before {
  border-color: #e3e5e9;
  background-color: #f7f8f9;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .accordion__text .list-check .list-check__item .list-check__label .label-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  color: #18191b;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check__label input:checked ~ .label-text {
  font-weight: 600;
}
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .list-check__label input:disabled ~ .label-text {
  color: #c3c6cc;
}
body .c20-cat.c20-cat .category.category .list-check__count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  color: #9a9da4;
}
/* штатные «Показать ещё / Показать все» темы — их заменяет «Показать ещё N» из скрипта */
body .c20-cat.c20-cat .category.category .accordion__item:not(.c20-tiles) .toggle-button {
  display: none;
}
body .c20-cat .fp-more-btn {
  align-self: flex-start;
  margin: 11px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #4b4e55;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body .c20-cat .fp-more-btn:hover {
  color: #18191b;
}
body .c20-cat .fp-more-btn[hidden] {
  display: none;
}
/* поле «Найти модель» */
.fp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f5f7;
  color: #9a9da4;
}
body .c20-cat .fp-search input.fp-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #18191b;
}
body .c20-cat .fp-search input.fp-search__input::placeholder {
  color: #9a9da4;
}
.fp-search:focus-within {
  box-shadow: 0 0 0 2px #fdcd3c inset;
}
.fp-empty {
  font-size: 12px;
  color: #9a9da4;
}

/* ---------- 7. кнопка «Показать N товаров», закреплена внизу панели ---------- */
/* sticky не работает внутри предка с overflow: hidden (он становится «прокручиваемым» контейнером и кнопка липнет
   к нему, а не к экрану). У .main-block и .main-wrap темы стоит hidden — на страницах каталога ПК меняем на clip:
   режет так же, но контейнером прокрутки не является. :has — только где есть каталог 20a. */
body .main-wrap:has(.c20-cat),
body .c20-cat.c20-cat.main-block {
  overflow: clip;
}
.fp-foot {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -20px;
  padding: 12px 20px 16px;
  border-top: 1px solid #eceef1;
  border-radius: 0 0 14px 14px;
  background: #fff;
}
body .c20-cat .fp-foot .fp-show {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #fdcd3c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #18191b;
  cursor: pointer;
}
body .c20-cat .fp-foot .fp-show:hover {
  background: #ffc21a;
}

@media (prefers-reduced-motion: reduce) {
  .fp-arrow {
    transition: none;
  }
}

/* Все параметры фильтра видны всегда (13.11.2026). Тема прячет хвост параметров в .filter-full за кнопкой «Показать все
   параметры» и раскрывает его сам, только когда какой-то из них активен. На бою он был раскрыт всегда лишь потому, что
   «вечно активная» диагональ (округлённые края, см. sib_filter/functions.php) включала его. После исправления диагонали
   хвост бы спрятался, а кнопку раскрытия новый дизайн скрывает — секции и так сворачиваются по стрелке. */
body .c20-cat.c20-cat .category.category .filter-full {
  display: block !important;
  height: auto !important;
}

/* ---------- 9. вид до запуска скрипта = вид после (без «мигания» при загрузке) ----------
   filtr_pk.js стоит в конце страницы и сворачивает списки на DOMContentLoaded — до этого человек видел все значения,
   потом список схлопывался (владелец, 13.11.2026). Пока у формы нет data-fp (его ставит скрипт), стили рисуют то же,
   что нарисует скрипт: место под шапку «Фильтры», первые 5 пунктов (+ отмеченные), поле поиска у списков длиннее 8
   и строку «Показать ещё». Высоты — как у настоящих элементов, поэтому подмена проходит без сдвига. */
body .c20-cat.c20-cat .category.category form:not([data-fp])::before {
  content: '';
  display: block;
  height: 34.2px;
}
body .c20-cat.c20-cat .category.category form:not([data-fp]) .accordion__item:not(.c20-tiles) .list-check > .list-check__item:nth-child(n+6):not(:has(input:checked)) {
  display: none;
}
body .c20-cat.c20-cat .category.category form:not([data-fp]) .accordion__item:not(.c20-tiles) .accordion__text:has(> .list-check > .list-check__item:nth-child(9))::before {
  content: '';
  display: block;
  height: 32px;
  margin: 0 0 11px;
  border-radius: 8px;
  background: #f4f5f7;
}
body .c20-cat.c20-cat .category.category form:not([data-fp]) .accordion__item:not(.c20-tiles) .accordion__text:has(> .list-check > .list-check__item:nth-child(6))::after {
  content: 'Показать ещё';
  display: block;
  margin: 11px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: #4b4e55;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* стрелка секции (скрипт добавит настоящую .fp-arrow) — иначе длинные названия переносятся уже после загрузки */
body .c20-cat.c20-cat .category.category form:not([data-fp]) .accordion__heading::after {
  content: '';
  flex: 0 0 14px;
  height: 14px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6e75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") no-repeat center;
}
/* ползунок диапазона: jQuery UI делает полосу 14px, до него обёртка 12px */
body .c20-cat.c20-cat .category.category .slider__wrap {
  min-height: 14px;
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/katalog_g.css?179459953711291*/
/* «Облегчённый» каталог на ПК (макет владельца 13.11.2026 вечер: ScrollSamsung / LightG, заметка n11;
   спека docs/specs/katalog-g-maket.md). Включается рубильником include/katalog_g.php (класс .kg-cat на секции).
   Один слой: белые карточки прямо на фоне страницы, без белой панели под сеткой и без серого квадрата под фото
   (владелец в этом макете отменил «фото на #f7f8f9» для каталога ПК); цена — чёрная жирная, жёлтый только на кнопке.
   Под лентой разделов — полоса «метки фильтра · Сбросить всё» (только когда фильтр выбран), сортировка — первым блоком
   умного фильтра (js/global/katalog_g.js; 14.11.2026 владелец: «N товаров» дублировал заголовок, пустая строка мешала).
   Селекторы с body и двойным классом — перекрывают catalog_20a.css (.c20-cat.c20-cat …, 0,2,0+). */

/* ---------- панель под сеткой убираем, сетка 4 колонки с зазором 12 ---------- */
body .kg-cat.c20-cat .search-box .result {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
body .kg-cat.c20-cat .search-box .result .tab-top,
body .kg-cat.c20-cat .search-box .result hr.m-sort {
  display: none; /* сортировка переехала в полосу над каталогом */
}
body .kg-cat.c20-cat .card-product__list {
  gap: 12px;
}

/* ---------- карточка ---------- */
body .kg-cat.c20-cat .c20-card {
  gap: 6px;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: #fff;
}
body .kg-cat.c20-cat .c20-item:hover .c20-card {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(24, 25, 27, .08);
}
/* фото — того же размера, что в каталоге 20a на бою (14.11.2026 владелец: «увеличь как на боевом»):
   во всю ширину карточки, пропорция 1 : 1.18; только на белом и без затемнения */
body .kg-cat.c20-cat .c20-photo {
  margin: -12px -14px 2px;
  padding: 6px;
  height: auto;
  aspect-ratio: 1 / 1.18;
  background: transparent;
  border-radius: 16px 16px 0 0;
}
body .kg-cat.c20-cat .c20-photo .card-product__image {
  background: transparent;
  border-radius: 0;
}
body .kg-cat.c20-cat .c20-photo .card-product__img {
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: normal;
  filter: none;
}
/* галерея (catalog_gallery.css) — фото во весь кадр, без серого фона кадров и без затемнения brightness(.972) */
body .kg-cat.c20-cat .cg .cg-track,
body .kg-cat.c20-cat .cg .cg-slide {
  background: #fff;
}
body .kg-cat.c20-cat .c20-photo .cg-slide img,
body .kg-cat.c20-cat .c20-photo .cg-track .card-product__img {
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: normal;
  filter: none;
}

/* тело: цена / название — во всю ширину, рейтинг и баллы одной строкой, кнопка прижата к низу */
body .kg-cat.c20-cat .c20-body {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}
body .kg-cat.c20-cat .c20-body > .c20-prices,
body .kg-cat.c20-cat .c20-body > .c20-title,
body .kg-cat.c20-cat .c20-body > .c20-btnwrap {
  grid-column: 1 / -1;
}
body .kg-cat.c20-cat .c20-body > .c20-btnwrap {
  align-self: end;
  margin-top: 6px;
}

/* цена — чёрная жирная, без жёлтого ценника; старая — серая зачёркнутая рядом */
body .kg-cat.c20-cat .c20-prices {
  align-items: baseline;
  gap: 4px 8px;
}
body .kg-cat.c20-cat .c20-price {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  letter-spacing: -.2px;
  color: #18191b;
}
body .kg-cat.c20-cat .c20-item.not-available .c20-price {
  background: none;
  color: #6b6e75;
}
body .kg-cat.c20-cat .c20-price-old {
  font-size: 12px;
  color: #9a9da4;
}

/* название — 13 px, ровно две строки */
body .kg-cat.c20-cat .c20-title {
  min-height: 0;
  height: 36px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #18191b;
}
body .kg-cat.c20-cat .c20-title span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* рейтинг «★ 4,8 (19)» — без серой плашки (число отзывов в скобках ставит katalog_g.js) */
body .kg-cat.c20-cat .c20-body > a.rv-tile {
  justify-self: start;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 12px;
  line-height: 1.3;
  color: #6b6e75;
}
.desktop body .kg-cat.c20-cat .c20-body > a.rv-tile:hover,
body.desktop .kg-cat.c20-cat .c20-body > a.rv-tile:hover {
  background: none;
  color: #18191b;
}
body .kg-cat.c20-cat a.rv-tile .rv-tile__star {
  color: #c98f00;
  font-size: 12px;
}
body .kg-cat.c20-cat a.rv-tile b {
  font-weight: 400;
  color: #6b6e75;
}
body .kg-cat.c20-cat a.rv-tile span {
  color: #9a9da4;
}
/* баллы «+1035 Б»: подпись «бонусных баллов» — текстом вне span, гасим её размером шрифта */
body .kg-cat.c20-cat .c20-bonus {
  margin: 0;
  font-size: 0;
  line-height: 1.3;
  color: #6b6e75;
  white-space: nowrap;
}
body .kg-cat.c20-cat .c20-bonus span {
  font-size: 12px;
}
body .kg-cat.c20-cat .c20-bonus span:not(:empty)::after {
  content: '\00a0' attr(data-kg-w); /* «баллов» — js/global/katalog_g(_mob).js */
}

/* кнопка во всю ширину 40 px, радиус 10 */
body .kg-cat.c20-cat .c20-buy,
body .kg-cat.c20-cat .c20-notify {
  height: 40px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
}
body .kg-cat.c20-cat .c20-buy {
  background: #FDCD3C;
  font-weight: 600;
  color: #18191b;
}
/* .desktop .button_white:hover темы (жёлтый #ffce24) побеждает порядком бандлов — повторяем класс темы */
.desktop body .kg-cat.c20-cat .c20-buy:hover,
body.desktop .kg-cat.c20-cat .c20-buy.button_white:hover {
  background: #f5c018;
}
body .kg-cat.c20-cat .c20-item .c20-buy.active,
body .kg-cat.c20-cat .c20-item.active .c20-buy.active {
  border-color: #e1e3e7;
}

/* ---------- полоса под лентой: «метки · Сбросить всё» ---------- */
.kg-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid #e1e3e7;
  font-family: inherit;
  color: #18191b;
}
.kg-strip[hidden] {
  display: none;
}
.kg-strip__tags {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* метки фильтра переезжают сюда из шапки фильтра (filtr_pk.js рисует их в .fp-tags) */
body .kg-strip .fp-tags {
  display: contents;
}
body .kg-strip .fp-tags[hidden] {
  display: none;
}
body .kg-strip .fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px 5px 10px;
  border: 0;
  border-radius: 14px;
  background: #FFF3C4;
  font-size: 12px;
  line-height: 1.25;
  color: #18191b;
  white-space: nowrap;
}
body .kg-strip .fp-tag__x {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #18191b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body .kg-strip .fp-tag__x svg {
  width: 8px;
  height: 8px;
}
.kg-strip__reset {
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #6b6e75;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.kg-strip__reset[hidden] {
  display: none;
}
.desktop .kg-strip__reset:hover {
  color: #18191b;
}

/* сортировка — первым блоком умного фильтра, под «Фильтры» */
.kg-sort {
  position: relative;
  margin: 14px 0 4px;
  padding: 0 0 16px;
  border-bottom: 1px solid #eef0f2;
}
.kg-sort[hidden] {
  display: none;
}
.kg-sort--strip {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
}
.kg-sort__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #18191b;
}
.kg-sort--strip .kg-sort__title {
  display: none;
}
.kg-sort__btn {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #e1e3e7;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #18191b;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.kg-sort--strip .kg-sort__list {
  left: auto;
  top: calc(100% + 6px);
  width: 260px;
}
.desktop .kg-sort__btn:hover {
  border-color: #c9ccd2;
}
.kg-sort__btn:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}
.kg-sort__btn [data-kg-sort-label] {
  flex: 1 1 auto;
  text-align: left;
}
.kg-sort--strip .kg-sort__btn {
  width: auto;
}
.kg-sort__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  z-index: 30;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(24, 25, 27, .16);
  list-style: none;
}
.kg-sort__list[hidden] {
  display: none;
}
.kg-sort__opt {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #18191b;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.desktop .kg-sort__opt:hover {
  background: #f4f5f7;
}
.kg-sort__opt[aria-selected="true"],
.desktop .kg-sort__opt[aria-selected="true"]:hover {
  background: #FFF3C4;
  font-weight: 600;
}
.kg-sort__opt svg {
  margin-left: auto;
  visibility: hidden;
}
.kg-sort__opt[aria-selected="true"] svg {
  visibility: visible;
}

/* шапка фильтра: метки уехали в полосу — в шапке остаются «Фильтры» и «Сбросить» */
body .kg-cat.c20-cat .category .fp-head .fp-tags {
  display: none;
}

/* «Вы смотрели» (всплывашка, viewed_41.css) — цена без жёлтого ценника, как в карточках (только при виде «g»;
   на страницах вне каталога этот файл не грузится — там всплывашка остаётся прежней) */
body .vw-pop__price:not(.vw-pop__price--na) {
  padding: 3px 0;
  border-radius: 0;
  background: none;
  color: #18191b;
  font: 700 15px/19px Inter, Roboto, Arial, sans-serif;
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/fav_g.css?17945845992476*/
/* Сердечко «В избранное» на карточке каталога «g» и подсказка после нажатия (js/global/fav_g.js).
   Макет MBarDown (13.11.2026): серое контурное сердечко в правом верхнем углу карточки. */
body .kg-cat .c20-card {
  position: relative;
}
.kg-cat .fav-g {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
}
.kg-cat .fav-g svg {
  display: block;
  fill: none;
  stroke: #9a9da4;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill .15s, stroke .15s;
}
.desktop .kg-cat .fav-g:hover svg {
  stroke: #18191b;
}
.kg-cat .fav-g.is-on svg,
.desktop .kg-cat .fav-g.is-on:hover svg {
  fill: #e5484d;
  stroke: #e5484d;
}
.kg-cat .fav-g:active {
  transform: scale(.9);
}
.kg-cat .fav-g.is-busy {
  opacity: .7;
}
.kg-cat .fav-g:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 1px;
}
/* телефон: поменьше, как в макете (17 px у края) */
.c21-cat.kg-cat .fav-g {
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
}
.c21-cat.kg-cat .fav-g svg {
  width: 18px;
  height: 18px;
}

/* подсказка «Добавлено в избранное · Открыть» — над нижней навигацией телефона (1020) и шапкой (10100) */
.fav-g-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10500;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 12px;
  background: #18191b;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(24, 25, 27, .25);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.fav-g-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.fav-g-toast a,
.desktop .fav-g-toast a:hover {
  color: #FDCD3C;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
body.kg-mob .fav-g-toast {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/subtiles.css?179457796314692*/
/* ============================================================
   Подразделы раздела каталога (задача katalog-plitki-podrazdelov). Два вида, выбирает section_list.php:
   • ПК — «вариант E» (макет Claude Design 13.11.2026): плитки 96px, название сверху, телефон выглядывает снизу
     и обрезан краем плитки (≈62% ширины), сетка auto-fill от 118px (от 150px — 8 в строку), видна одна строка,
     в конце серая плитка «Ещё» 92×96 → раскрывает остальные строки, «Свернуть» — обратно. Без белой панели.
   • Телефон — капсулы (макет «Мобильная»): одна строка со свайпом, кружок 40px с фото + название.
   Ссылки красим с тегом a в селекторе: иначе тема перекрашивает их .desktop a:hover { color: #ffae00 }.
   ============================================================ */

.subt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 18px;
}

.subt--caps .subt__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 52px;
  overflow: hidden;
}
.subt.is-open .subt__list {
  max-height: none;
}

.subt--caps a.subt__cap {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px 0 6px;
  box-sizing: border-box;
  border: 1px solid #e3e5e9;
  border-radius: 26px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #18191b;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
/* последняя строка раскрытого списка — капсулы своей ширины, по левому краю (метку ставит subtiles.js) */
.subt--caps a.subt__cap.is-last-row {
  flex-grow: 0;
}
.subt--caps a.subt__cap:hover,
.desktop .subt--caps a.subt__cap:hover {
  border-color: #c3c7ce;
  box-shadow: 0 2px 8px rgba(20, 23, 28, .06);
  color: #18191b;
}
.subt--caps a.subt__cap:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}

.subt__ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.subt__ico img {
  display: block;
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.subt__name {
  display: block;
}

/* «Ещё» / «Свернуть» — маленькая подчёркнутая ссылка-кнопка справа от строки */
.subt--caps .subt__more {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  margin: 0;
  padding: 0 8px 0 10px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #4b4e55;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.subt .subt__more[hidden] {
  display: none;
}
.subt--caps .subt__more:hover {
  color: #18191b;
}
.subt--caps .subt__more svg {
  color: #18191b;
  transition: transform .15s;
}
.subt--caps.is-open .subt__more svg {
  transform: rotate(180deg);
}

/* ---------- телефон: одна строка со свайпом ---------- */
.c21-cat .subt {
  display: block;
  margin: 10px -10px 6px;
}
.c21-cat .subt__list {
  flex-wrap: nowrap;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 10px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c21-cat .subt__list::-webkit-scrollbar {
  display: none;
}
.c21-cat .subt--caps a.subt__cap {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 14px 0 4px;
  border-radius: 24px;
}
.c21-cat .subt--caps .subt__more {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .subt--caps a.subt__cap,
  .subt--caps .subt__more svg {
    transition: none;
  }
}

/* ============================================================
   ПК — «вариант E»
   ============================================================ */
/* Фон «как у каталога» (владелец 13.11.2026): белая панель с радиусом 12 и отступом 20 — как панель товаров
   .result ниже, плитки внутри серые без рамки — как подложки фото в карточках товаров. */
.subt.subt--half {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
}
.subt--half .subt__list {
  flex: 1 1 auto;
  min-width: 0;
  /* запас вокруг плиток: ряд режет лишние строки (overflow: hidden), и без запаса при наведении срезались
     верх приподнятой плитки и её тень (владелец 13.11.2026). Отрицательный margin возвращает раскладку на место. */
  padding: 6px 8px 8px; /* снизу не больше промежутка между строками (8), иначе выглядывает вторая строка */
  margin: -6px -8px -8px;
  display: grid;
  /* в макете 118px — под короткие бренды; у моделей («Galaxy S26 Ultra») подпись не влезала, 150px = те же 8 в строку */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 96px;
  gap: 8px;
  max-height: 110px; /* одна строка 96 + запас 6 сверху и 8 снизу */
  overflow: hidden;
}
.subt--half.is-open .subt__list {
  max-height: none;
}
.subt--half a.subt__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 96px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f7f8f9; /* серая подложка под фото (владелец 13.11.2026; правило «фото товара — на #f7f8f9») */
  color: #18191b;
  text-decoration: none;
  transition: transform .2s ease; /* как на бою */
}
.subt--half a.subt__tile:hover,
.desktop .subt--half a.subt__tile:hover {
  /* как на бою (владелец 13.11.2026): плитка только приподнимается на 3px, без рамки и тени */
  transform: translateY(-3px);
  color: #18191b;
}
.subt--half a.subt__tile:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}
.subt--half .subt__name {
  flex: 0 0 auto; /* иначе высокое фото сжимает подпись и наезжает на текст */
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.subt--half a.subt__tile img {
  display: block;
  flex: 0 0 auto;
  width: 62%;
  height: auto;
  max-width: none;
  max-height: none;
  mix-blend-mode: multiply;
}

.subt--half .subt__more {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 92px;
  height: 96px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #eef0f3;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #18191b;
  cursor: pointer;
  transition: background .15s;
}
.subt--half .subt__more:hover {
  background: #e3e6ea;
}
.subt--half .subt__more-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
}
.subt--half .subt__more-ico svg {
  transition: transform .15s;
}
.subt--half.is-open .subt__more-ico svg {
  transform: rotate(180deg);
}
.subt--caps .subt__more-ico {
  display: none;
}

/* ---------- ПК, вид «товар целиком» (?subtv=full; по умолчанию с 13.11.2026) ----------
   Владелец: «высоту побольше» и «не все названия влезают — MacBook Air 15 2024 и 2025 не различить».
   Плитка 124px: название до двух строк по центру (без многоточия), фото товара целиком внизу, 70px, на одной
   линии у всех плиток (margin-top: auto), даже если у соседей название в одну строку. */
.subt--full .subt__list {
  grid-auto-rows: 140px;
  max-height: 154px; /* одна строка 140 + запас 6 сверху и 8 снизу */
}
.subt--full a.subt__tile {
  height: 140px;
}
.subt--full .subt__more {
  height: 140px;
}
.subt--full .subt__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding: 12px 8px 0;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.subt--full a.subt__tile img {
  width: auto;
  height: 86px; /* 13.11: «фото ещё побольше» — плитка 140: 12 + 2 строки по 17 + 86 + 8 = 140 */
  max-width: 86%;
  margin: auto 0 8px;
  object-fit: contain;
}

/* ============================================================
   ПК: лента со стрелками вместо «Ещё» (13.11.2026, владелец: «как на боевом сайте — со стрелочками»).
   Ряд одной строкой, 8 плиток на ширину, прокрутка нативная со snap; под лентой стрелки и точки, как на бою.
   Специфичность .subt.subt--half … — перебивает grid/max-height выше.
   ============================================================ */
.subt.subt--half {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.subt.subt--half .subt__list {
  display: flex;
  gap: 8px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 8px; /* = боковой запас ряда: иначе snap ставит ленту на 8px от начала и «назад» не гаснет */
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.subt.subt--half .subt__list::-webkit-scrollbar {
  display: none;
}
.subt.subt--half a.subt__tile {
  flex: 0 0 calc((100% - 7 * 8px) / 8);
  min-width: 140px;
  scroll-snap-align: start;
}
.subt.subt--half .subt__more {
  display: none;
}

/* перетаскивание мышкой (subtiles.js, 13.11.2026): рука над лентой, пока тащат — без «прилипания» к плитке,
   без плавной прокрутки (иначе лента отстаёт от мыши), без выделения текста и подъёма плиток */
.subt.subt--half.is-scrollable .subt__list {
  cursor: grab;
}
.subt.subt--half.is-dragging .subt__list {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}
.subt.subt--half.is-dragging a.subt__tile {
  cursor: grabbing;
  transform: none;
}
.subt.subt--half a.subt__tile img {
  -webkit-user-drag: none;
}

.subt__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 -8px;
}
.subt__nav[hidden] {
  display: none;
}
.subt .subt__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7079;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.subt .subt__arrow:hover {
  background: #f2f3f5;
  color: #1e1e1e;
}
.subt .subt__arrow:disabled {
  cursor: default;
  background: transparent;
  color: #d0d3d8;
}
.subt .subt__arrow:focus-visible,
.subt .subt__dot:focus-visible {
  outline: 3px solid #1e1e1e;
  outline-offset: 2px;
}
.subt__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.subt .subt__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.subt .subt__dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #d0d3d8;
  transition: width .3s ease, background-color .3s ease;
}
.subt .subt__dot.is-active {
  width: 30px;
}
.subt .subt__dot.is-active::before {
  width: 22px;
  background: #6b7079;
}
@media (prefers-reduced-motion: reduce) {
  .subt.subt--half .subt__list {
    scroll-behavior: auto;
  }
  .subt .subt__dot::before {
    transition: none;
  }
}

/* ============================================================
   Телефон: те же плитки «товар целиком», что на ПК, только меньше и со свайпом (владелец 13.11.2026: «на мобильной
   тоже маленькими плиточками, а сейчас закруглённые» — капсулы). Белая панель со скруглением (как карточки товаров), плитка 112px
   шириной: на 390px видно три с половиной — край подсказывает, что ленту можно листать. Стрелок и точек нет.
   ============================================================ */
.c21-cat .subt.subt--half {
  margin: 8px 0 12px; /* не во всю ширину: родитель режет по краям (overflow: hidden), и углы панели выходили острыми */
  padding: 12px 0 10px;
  border-radius: 12px;
}
.c21-cat .subt.subt--half .subt__list {
  gap: 6px;
  padding: 4px 10px 6px;
  margin: -4px 0 -6px;
  scroll-padding: 0 10px;
  scroll-snap-type: x proximity;
}
.c21-cat .subt.subt--half a.subt__tile {
  flex: 0 0 112px;
  min-width: 0;
  height: 120px;
  border-radius: 10px;
}
.c21-cat .subt--full .subt__name {
  padding: 10px 6px 0;
  font-size: 13px;
}
.c21-cat .subt--full a.subt__tile img {
  height: 70px;
  margin-bottom: 6px;
}
.c21-cat .subt__nav {
  display: none !important; /* на телефоне листают пальцем; скрипт снимает hidden, поэтому !important */
}
.c21-cat .subt--half a.subt__tile:hover {
  transform: none;
}

/* End */


/* Start:/local/templates/romza_bitronic2_2.23.10/new_css/subtiles_g.css?179460177012509*/
/* Подразделы — вид «g» (макет 13.11.2026 вечер: ScrollSamsung / Tiles, заметка n12; спека docs/specs/katalog-g-maket.md).
   Разметка — sib_catalog/subtiles_g.php, поведение — js/global/subtiles.js (initG).
   14.11.2026 владелец: товар ВСЕГДА целиком (обрезку у смартфонов .subt--crop сняли); на ПК — капсулы, как
   сделанные 13.11 (.subt--caps): высота 52, радиус 26, рамка, фото в сером кружке 40 px, ширина по названию
   («квадратные слишком забирают внимание»); на телефоне — такие же капсулы высотой 48
   без плитки «Все бренды/модели». Лента — прямо на фоне страницы, без белой панели. */

.subt.subt--g {
  position: relative;
  display: block;
  margin: 4px 0 16px;
  padding: 0;
  background: none;
  font-family: inherit;
}
.subg__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.subg__vp {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.subt--g .subg__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* место под подъём плитки при наведении (-3px) и её тень, иначе верх срезается краем ленты */
  padding: 4px 0 2px;
  margin: -4px 0 -2px;
}
.subt--g .subg__list::-webkit-scrollbar {
  display: none;
}
.subt--g.is-dragging .subg__list {
  cursor: grabbing;
  scroll-behavior: auto;
}
.subt--g.is-dragging .subg__tile {
  pointer-events: none;
}

/* плитка ПК — капсула: кружок с фото слева, название справа одной строкой */
.subt--g a.subg__tile {
  flex: 0 0 auto;
  height: 52px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 0 6px;
  border: 1px solid #e3e5e9;
  border-radius: 26px;
  background: #fff;
  color: #2b2d31;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-user-select: none;
  user-select: none;
}
/* тема красит любую ссылку при наведении (.desktop a:hover — оранжевый, 0,2,1): тег a в селекторе обязателен */
.desktop .subt--g a.subg__tile:hover {
  border-color: #c3c7ce;
  box-shadow: 0 2px 8px rgba(20, 23, 28, .06);
  color: #18191b;
}
.subt--g a.subg__tile:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}
.subt--g .subg__name {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #18191b;
}
/* товар всегда целиком, и телефоны тоже — в сером кружке 40 px */
.subt--g .subg__pic {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f5f7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subt--g .subg__pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
}

/* затухания и стрелки */
.subg__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .2s;
}
.subg__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--subg-bg, #f2f3f5), rgba(242, 243, 245, 0));
}
.subg__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--subg-bg, #f2f3f5), rgba(242, 243, 245, 0));
}
.subt--g.is-scrollable:not(.is-start) .subg__fade--l,
.subt--g.is-scrollable:not(.is-end) .subg__fade--r {
  opacity: 1;
}
.subt--g .subg__arrow {
  position: absolute;
  top: 6px;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(24, 25, 27, .18);
  color: #18191b;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.subt--g .subg__arrow--l {
  left: 6px;
}
.subt--g .subg__arrow--r {
  right: 6px;
}
.subt--g.is-scrollable:not(.is-start) .subg__arrow--l,
.subt--g.is-scrollable:not(.is-end) .subg__arrow--r {
  display: flex;
}
.desktop .subt--g .subg__arrow:hover {
  box-shadow: 0 3px 14px rgba(24, 25, 27, .26);
}
.subt--g .subg__arrow:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}

/* «Все модели N» — закреплена справа, не уезжает при листании */
.subt--g .subg__all {
  flex: 0 0 auto;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 6px;
  border: 0;
  border-radius: 26px;
  background: #e4e6ea;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #18191b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.subt--g .subg__all[hidden] {
  display: none;
}
.desktop .subt--g .subg__all:hover {
  background: #dcdfe4;
}
.subt--g.is-all-open .subg__all,
.desktop .subt--g.is-all-open .subg__all:hover {
  background: #FFF3C4;
}
.subt--g .subg__all:focus-visible {
  outline: 2px solid #18191b;
  outline-offset: 2px;
}
.subg__all-ico {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subg__all-n {
  color: #6b6e75;
  font-weight: 500;
}

/* панель всех разделов (ПК: под лентой поверх каталога) */
.subg__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  z-index: 40;
  box-sizing: border-box;
  max-height: 70vh;
  overflow: auto;
  padding: 18px 22px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(24, 25, 27, .18);
  font-family: inherit;
  color: #18191b;
}
.subg__panel[hidden] {
  display: none;
}
.subg__panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.subg__panel-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.subg__search {
  flex: 0 1 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #f4f5f7;
  color: #6b6e75;
  font-weight: 400;
}
.subg__search:focus-within {
  box-shadow: 0 0 0 2px #FDCD3C inset;
}
.subg__panel input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  color: #18191b;
}
.subg__panel input[type="search"]::placeholder {
  color: #6b6e75;
}
.subg__close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #f4f5f7;
  color: #18191b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.subg__groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.subg__group {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.subg__group[hidden],
.subg__pill[hidden],
.subg__empty[hidden] {
  display: none;
}
.subg__gtitle {
  flex: 0 0 96px;
  padding-top: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: #6b6e75;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.subg__pills {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subg__panel a.subg__pill {
  padding: 8px 12px;
  border-radius: 18px;
  background: #f4f5f7;
  font-size: 14px;
  line-height: 1.25;
  color: #18191b;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.desktop .subg__panel a.subg__pill:hover {
  background: #FFF3C4;
  color: #18191b;
}
.subg__empty {
  padding: 8px 0;
  font-size: 14px;
  color: #6b6e75;
}

/* ---------- телефон (.c21-cat): свайп пальцем, без стрелок; «Все …» — шторка снизу ---------- */
.c21-cat .subt.subt--g {
  margin: 8px -10px 8px;
}
.c21-cat .subt--g .subg__row {
  gap: 0;
}
.c21-cat .subt--g .subg__list {
  padding: 4px 10px 2px;
  scroll-padding-left: 10px;
}
/* левых стрелки и затухания нет (селектор сильнее правил показа .is-scrollable:not(.is-start) …). Справа, пока лента не
   долистана, — затухание и круглая стрелка «›»: капсулы своей ширины, и срез у края бывает в пару пикселей, без стрелки
   не видно, что дальше есть ещё (владелец 14.11.2026). Стрелка листает ленту, как свайп. */
.c21-cat .subt--g.subt--g .subg__arrow--l.subg__arrow--l,
.c21-cat .subt--g.subt--g .subg__fade--l.subg__fade--l {
  display: none;
}
.c21-cat .subt--g .subg__fade--r {
  width: 64px;
  background: linear-gradient(to left, #efefef 28%, rgba(239, 239, 239, 0)); /* фон мобильной страницы — #efefef */
}
/* только шеврон, без кружка и тени (владелец 14.11.2026: кружок массивный и не влезал) — еле заметный, на затухании;
   кнопка 28×48 по высоте капсулы, чтобы попадать пальцем */
.c21-cat .subt--g .subg__arrow--r {
  top: 0; /* капсула стоит в .subg__vp с 0 (у ленты margin -4 + padding 4) — стрелка той же высоты 48 ровно по центру */
  right: 0;
  width: 28px;
  height: 48px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #6b6e75;
}
.c21-cat .subt--g .subg__arrow--r svg {
  width: 18px;
  height: 18px;
}

/* телефон — те же капсулы, что на ПК (14.11.2026 владелец: «не квадратными, закруглёнными»), чуть ниже, ширина по названию
   (одинаковая ширина давала пустые капсулы). Что лента листается, показывает капсула, срезанная краем экрана примерно
   пополам: зазор между капсулами подгоняет subtiles.js (peek), и один раз за сеанс лента сама чуть «подмигивает» вбок.
   Без подъёма при касании и наведении — владелец 14.11.2026: «не очень». */
.c21-cat .subt--g a.subg__tile {
  height: 48px;
  padding: 0 14px 0 4px;
  border-radius: 24px;
}
.c21-cat .subt--g .subg__pic {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
}
/* «Все бренды / модели» на телефоне не нужна (владелец 14.11.2026) — всё листается свайпом */
.c21-cat .subt--g .subg__all.subg__all {
  display: none;
}
.c21-cat .subt--g .subg__list::after {
  content: '';
  flex: 0 0 2px; /* правый отступ последней плитки в прокрутке */
}
.subg__veil {
  position: fixed;
  inset: 0;
  z-index: 10490;
  background: rgba(24, 25, 27, .45);
}
body.subg-lock {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}
/* шторка: выше нижней навигации (.mobile-nav 1020) и шапки (10100), как попапы 10500 */
body > .subg__panel {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 10500;
  max-height: 82vh;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  box-shadow: none;
}
body > .subg__panel .subg__panel-head {
  flex-wrap: wrap;
  gap: 12px;
}
body > .subg__panel .subg__search {
  order: 3;
  flex: 1 1 100%;
}
body > .subg__panel .subg__group {
  flex-direction: column;
  gap: 8px;
}
body > .subg__panel .subg__gtitle {
  flex: 0 0 auto;
  padding-top: 0;
}
body > .subg__panel a.subg__pill {
  padding: 10px 14px;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .subt--g a.subg__tile,
  .subg__fade {
    transition: none;
  }
}

/* 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?17886079607315*/
/* Галерея фото в карточке каталога: ПК 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: #7a808a;
  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/filtr_vid.css?17945802035132 */
/* /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?179451131328384 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/filtr_pk.css?179458246318718 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/katalog_g.css?179459953711291 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/fav_g.css?17945845992476 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/subtiles.css?179457796314692 */
/* /local/templates/romza_bitronic2_2.23.10/new_css/subtiles_g.css?179460177012509 */
/* /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?17886079607315 */