/* Оптимизации для устранения моргания при переключении представлений. */

/* ===== CONTENT-FIRST РАЗМЕТКА ===== */
/* Сайдбар фильтров лежит в конце .row (после контента), чтобы мобильный LCP
   не ждал парсинга ~170 КБ фильтров. Визуально возвращаем его влево на десктопе.
   Файл блокирующий — применяется до первой отрисовки, перескока не видно. */


.row.collection-initialized > .page-sidebar {
  order: -1;
}

/* ===== STICKY-САЙДБАР: «прилипание низом» (авг 2026) ===== */
/* На листовых контент справа в разы длиннее сайдбара — слева оставалась пустая
   колонка в несколько экранов. Сайдбар едет со страницей; когда его низ доезжает
   до низа окна — прилипает и ждёт, у конца контента отлипает (containing block
   sticky-грид-итема — вся grid area колонки высотой с ряд, грид — CLS-фикс в
   head.liquid). Формула: сайдбар короче окна → top:12px (обычное прилипание
   верхом); длиннее → отрицательный top (виден низ). Высоту --sidebar-h держит
   ResizeObserver в collection-view-switcher.js — она динамическая (догрузка
   счётчиков, аккордеоны). Без JS срабатывает fallback 99999px: top недостижим,
   поведение как раньше. Хабам условия не нужны: там сайдбар длиннее контента,
   запаса хода нет — прилипание не наступает само. */
@media (min-width: 1024px) {
  .row.collection-initialized > .page-sidebar {
    position: sticky;
    top: min(12px, calc(100vh - var(--sidebar-h, 99999px) - 12px));
  }
}

/* Плавные переходы для контейнеров представлений */

.products-list,
.products-table,
.subcollections-list-new,
.pagination {
  transition: opacity 0.1s ease-out;
  /* will-change: opacity удалён - GPU layer создаётся автоматически при анимации */
}

/* Улучшенное скрытие элементов без layout shift */
.products-list.hidden,
.products-table.hidden,
.subcollections-list-new.hidden,
.collection-toolbar.is-bottom.hidden {
  display: none !important;
}

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

/* Переключалка видов: без подколлекций при <1024px остаётся только плитка —
   прячем блок целиком (таблица на этих ширинах недоступна, вид один).
   Двойной класс: правило сегмента ниже задаёт display:flex тем же файлом
   ПОЗЖЕ — без усиления специфичности оно перебивало бы это скрытие */
@media (max-width: 1023px) {
  .collection-change-view.collection-change-view--no-sub {
    display: none;
  }
}

/* Сегмент-контрол переключалки видов (31.07.2026): иконка + подпись вместо
   голых пиктограмм — заметность видов. Перекрывает _collection.scss:197-209
   (этот файл грузится после theme.css, специфичность та же — побеждает).
   Активный сегмент залит фиолетовым темы, неактивный контурный, углы прямые
   как у кнопок темы. */
.collection-change-view {
  display: flex;
  align-items: stretch;
  margin-right: 10px;
}

/* Состояния — язык чипсов серий (.series-chip в _product.scss): актив =
   series-chip--current (бледная заливка, приглушённый текст — «выбранный»
   в семье выглядит одинаково, семантика совпадает: выбранное некликабельно
   и там и тут), ховер кликабельных — заливка фиолетовым. Форма — тулбарная:
   неяркая рамка как у соседнего селекта сортировки (#dad1ff =
   $color-border-primary), углы прямые как у кнопок темы (решение 31.07) */
.collection-change-view a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.8rem;
  border: 1px solid #dad1ff;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  opacity: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.collection-change-view a + a {
  border-left: none;
}

.collection-change-view a:hover:not(.active) {
  background: #5e5b8a;
  color: #fff;
}

.collection-change-view a.active,
.collection-change-view a.active:hover {
  background: #f0eff5;
  border-color: #c7c5d8;
  color: #8a8a8a;
  cursor: default;
}

/* fa-иконки — фиолетовые как PNG «Разделов» (текст остаётся тёмным);
   на ховере — белые на заливке, у бледного актива — приглушены в тон тексту */
.collection-change-view a .fa {
  font-size: 18px;
  color: #5e5b8a;
}

.collection-change-view a:hover:not(.active) .fa {
  color: #fff;
}

.collection-change-view a.active .fa,
.collection-change-view a.active:hover .fa {
  color: #8a8a8a;
}

/* PNG-иконка «Разделы»: на фиолетовом ховере — в белый; у бледного актива —
   приглушить в тон серому тексту; сдвиг спрайта из _collection.scss гасим */
.collection-change-view a:hover:not(.active) .collection-subcollections-icon {
  filter: brightness(0) invert(1);
  background-position: 0 0;
}

.collection-change-view a.active .collection-subcollections-icon,
.collection-change-view a.active:hover .collection-subcollections-icon {
  filter: grayscale(1) opacity(0.55);
  background-position: 0 0;
}

/* Подпись сегмента (span добавляется в collection_order.liquid) */
.collection-change-view .ccv-label {
  white-space: nowrap;
}

/* Состояние загрузки при переключении */
.collection-loading .products-list,
.collection-loading .products-table,
.collection-loading .subcollections-list-new {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Плавное переключение представлений */
.products-list {
  transition: all 0.2s ease-in-out;
}

/* Предотвращение двойной анимации */
.no-transition {
  transition: none !important;
}

/* Оптимизация производительности GPU */
.products-table,
.products-list,
.subcollections-list-new {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== МОБИЛЬНЫЕ ТЕХНИКИ ДЛЯ УСТРАНЕНИЯ CLS ===== */

/* 1. Изоляция layout с помощью CSS contain */
.product-card-wrapper {
  contain: layout style paint;
  /* Изолируем каждую карточку, чтобы изменения внутри не влияли на соседние */
}

.product-card {
  contain: layout paint;
  /* Дополнительная изоляция для самой карточки */
}

/* 2. Фиксированные пропорции для контейнеров изображений */
.product-photo .image-container.is-square {
  aspect-ratio: 1 / 1;
  /* Гарантируем квадратную форму контейнера */
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

/* 3. Object-fit для изображений */
.product-photo .image-container img,
.product-photo .image-container picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Изображение вписывается в контейнер без искажений */
  object-position: center;
}

/* 4. Фиксация размеров для карточек товара */
.product-card .card-inner {
  contain: layout;
  /* Изолируем внутреннюю структуру карточки */
}

/* 5. Предотвращение layout shift при загрузке изображений */
.product-photo .image-container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-photo .image-container source,
.product-photo .image-container img {
  display: block;
}

/* 6. Оптимизация для табличного представления */
.products-table .product-photo .image-container {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 120px;
  /* Ограничиваем размер в таблице */
}

.products-table .product-photo .image-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 8. Плавный переход контейнера при смене представлений */
.page-content {
  transition: min-height 0.3s ease-out;
}

.page-content.view-switching {
  /* Индикатор переключения для отладки */
  position: relative;
}

/* 9. Дополнительная стабилизация для контейнера товаров */
.products-list,
.products-table {
  min-height: 200px;
  /* Минимальная высота для предотвращения коллапса */
}

/* ===== ОТЛОЖЕННЫЙ ПОКАЗ FOOTER ДЛЯ УСТРАНЕНИЯ CLS ===== */

/* Скрываем footer на мобильных устройствах до готовности контента */
@media (max-width: 1023px) {
  body.template-collection .footer {
    opacity: 0;
    visibility: hidden;
    /* Задержка visibility для плавного перехода */
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Показываем footer после стабилизации контента */
  body.template-collection.footer-ready .footer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  /* Fallback: автоматический показ через 2 секунды если JS не сработал */
  body.template-collection .footer {
    animation: footer-reveal 0.4s ease 2s forwards;
  }

  /* Отключаем fallback анимацию если JS сработал */
  body.template-collection.footer-ready .footer {
    animation: none;
  }
}

/* Анимация для fallback показа footer */
@keyframes footer-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* ===== УСТРАНЕНИЕ ОСТАВШИХСЯ ПРОБЛЕМ CLS ===== */

@media (max-width: 1023px) {
  /* Скрываем блок "Последние просмотренные товары" до загрузки */
  body.template-collection .js-recently-view {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Скрываем нижний toolbar с селектором "Показывать по" */
  body.template-collection .collection-toolbar.is-bottom {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Показываем элементы вместе с footer после готовности контента */
  body.template-collection.footer-ready .js-recently-view,
  body.template-collection.footer-ready .collection-toolbar.is-bottom {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  /* Fallback: автоматический показ через 2 секунды если JS не сработал */
  body.template-collection .js-recently-view,
  body.template-collection .collection-toolbar.is-bottom {
    animation: element-reveal 0.4s ease 2s forwards;
  }

  /* Отключаем fallback анимацию если JS сработал */
  body.template-collection.footer-ready .js-recently-view,
  body.template-collection.footer-ready .collection-toolbar.is-bottom {
    animation: none;
  }
}

/* Анимация для fallback показа дополнительных элементов */
@keyframes element-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* ===== ЭТАП 3 «НОЛЬ ДУБЛЕЙ»: ЕДИНАЯ КАРТОЧКА (пилот АКБ) ===== */
/* Один DOM карточки, два режима: «плитка» (базовый) и «таблица» (класс
   ucards--table на контейнере .products-list.ucards, работает только ≥1025px —
   ниже класс игнорируется и всегда рендерится плитка).
   Разметка: product_card.liquid (ветка unified_card),
   шапка колонок: collection_products_head.liquid.
   Ширины колонок задаёт Liquid инлайн-переменными --table-cols/--table-min
   на контейнере. Треки только px/fr — колонки всех строк обязаны совпадать. */

/* — Контейнер: сам управляет раскладкой (utility-классы show-flex здесь не используются) — */
.products-list.ucards {
  display: flex;
  flex-wrap: wrap;
  transition: opacity 0.1s ease-out; /* сузили transition:all — режимные свойства не анимируем */
}

/* Обёртки unified-карточек без contain-изоляции: paint клиповал ховер-тень,
   а layout создавал stacking context — z-index карточки при наведении
   действовал только внутри обёртки, и соседние обёртки перекрывали тень */
.ucards .product-card-wrapper {
  contain: none;
}

/* Карточка под курсором поднимается над соседями (иначе их белый фон
   перекрывает свечение) и получает умеренную тень с лёгким фирменным
   оранжевым отсветом. Смягчена по замечанию 27.07 (была агрессивнее).
   Только устройства с настоящим курсором (замечание круга 2): на таче
   :hover срабатывал бы при тапе и залипал — пользы ноль */
@media (hover: hover) {
  .ucards .ucard:hover {
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(251, 126, 46, 0.3);
  }
}

/* Шапка колонок в плитке не существует визуально */
.ucard-thead {
  display: none;
}

/* — Карточка в плитке — */
.ucard {
  position: relative; /* якорь для stretched-link */
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Якорь для абсолютных бейджей product_labels (скидка, «Нет в продаже») */
.ucard-photo {
  position: relative;
}

/* Квадрат фото в плитке — зеркало правил .product-photo выше (в unified-ветке
   карточки обёртка называется .ucard-photo, старые селекторы её не видят) */
.ucard-photo .image-container.is-square {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.ucard-photo .image-container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ucard-photo .image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Форма корзины в buyrow — просто обёртка кнопки-иконки */
.ucard .ucard-form {
  margin: 0 !important;
  display: inline-flex;
  flex: none;
}

/* Вся карточка кликабельна через ссылку названия (нативный клик/средний клик):
   оверлей на всю карточку, интерактивные элементы приподняты z-index'ом */
.ucard-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ucard-title {
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

.ucard-title-link {
  color: inherit;
}

/* Табличное представление названия (производитель + артикул) в плитке скрыто */
.ucard-title-alt {
  display: none;
}

/* Резерв высоты названия под 3 строки (решение 27.07): цены, кнопки и
   характеристики соседних карточек ряда встают на один уровень независимо
   от длины названий. На мобильном (1 колонка) соседей нет — без резерва;
   в режиме «таблица» ячейка авто (сброс в медиа-блоке таблицы) */
@media (min-width: 769px) {
  .ucard-title {
    min-height: 4.05em; /* 3 строки × line-height 1.35 */
  }

  /* Название длиннее трёх строк клампится многоточием (замечание 27.07-5:
     резерв рассчитан на 3 строки, переполнение ломало выравнивание рядов);
     полный title остаётся в DOM (SEO/анкор), в режиме «таблица» спан скрыт */
  .ucard-title-main {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Строка «цена + кнопки-иконки». Сам блок прозрачен для кликов (клик по цене
   или наличию проваливается в оверлей карточки → переход на товар),
   интерактив внутри — кликабелен */
.ucard-buy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.ucard-buy a,
.ucard-buy button,
.ucard-buy .compare-control {
  pointer-events: auto;
}

/* Цена в плитке — как на карточке товара (замечание 27.07-5): бренд-фиолетовый
   $color-link-primary и вес 400 (.price.on-page в _product.scss) */
.ucard-price {
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #5e5b8a;
  margin-right: auto;
}

/* Кнопка корзины — база повторяет ховер боевой табличной кнопки (светлая
   оранжевая заливка, оранжевые рамка и тележка), при наведении — инверсия:
   плотный фирменный оранжевый, тележка белая (решение сверки 26.07) */
.ucard-cart-btn {
  width: var(--ubtn, 42px);
  height: var(--ubtn, 42px);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 126, 46, 0.12);
  border: 1px solid rgba(251, 126, 46, 0.3);
  border-radius: 0;
  color: #fb7e2e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ucard-cart-btn:hover {
  background: #fb7e2e;
  border-color: #fb7e2e;
  color: #fff;
}

/* Наличие — в блоке цены (решение сверки 26.07). В узкой карточке плитки
   строка «цена + наличие + кнопки» не помещается, поэтому в плитке наличие
   встаёт второй строкой под ценой, по правому краю — как значения
   характеристик (замечание 27.07); на мобильном строка широкая — наличие
   между ценой и кнопками (медиа-блок ниже); в режиме «таблица» — между
   ценой и кнопками в колонке цены (там поток вертикальный, по центру) */
.ucard-buy {
  flex-wrap: wrap;
}

.ucard-avail {
  order: 5;
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  text-align: right;
}

.ucard-avail.ok {
  color: #2e7d32;
}

.ucard-avail.na {
  color: #888;
}

/* Кнопка сравнения — ghost-иконка; обе ссылки (add/delete) наложены
   грид-механикой .compare-control из темы, состояние ставит JS */
.ucard .compare-control {
  margin: 0;
}

.ucard .compare-link {
  width: var(--ubtn, 42px);
  height: var(--ubtn, 42px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8dde2;
  border-radius: 0;
  background: transparent;
  color: #5e5b8a;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ucard .compare-link:hover {
  border-color: #fb7e2e;
  color: #fb7e2e;
}

.ucard .compare-link.compare-delete {
  color: #4caf50;
}

.ucard .compare-link .link-text {
  display: none;
}

.ucard .compare-link .compare-icon {
  margin: 0;
}

/* Текстовые кнопки в buyrow («Подробнее») */
.ucard-buy .product-button {
  height: 42px;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}

/* Кнопка «Смотреть аналоги» у снятых — вторичное действие (замечание
   круга 2: яркая CTA снятому не по чину): прозрачная с рамкой, в тон кнопки
   сравнения; ховер — оранжевый, как у остальных ghost-элементов темы.
   Группа «кнопка + сравнение» центрируется ОДНОЙ строкой (замечание
   круга 3) — кнопка компактная, чтобы сравнение не переносилось вниз
   даже в узкой карточке ~190px */
.ucard-buy .product-button.ucard-analogs {
  flex: 0 1 auto;
  padding: 0 12px;
  background: transparent;
  border: 1px solid #d8dde2;
  border-radius: 0;
  color: #5e5b8a;
  font-size: 12px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ucard-buy .product-button.ucard-analogs:hover {
  background: transparent;
  border-color: #fb7e2e;
  color: #fb7e2e;
}

.ucards .product-card-wrapper.is-discontinued .ucard-buy {
  justify-content: center;
}

/* Блок характеристик «распор с линиями». Верхняя линия — на контейнере,
   не через :first-child: строки габаритов/веса переставлены в конец
   order-ом (замечание круга 2), первой видимой может быть любая */
.ucard-chars {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.4;
  border-top: 1px solid #eceff2;
}

.ucard-chars .r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap; /* длинное значение переносится под лейбл */
  gap: 2px 10px;
  padding: 4px 0;
  border-bottom: 1px solid #eceff2;
}

.ucard-chars .l {
  color: #7a8494;
}

.ucard-chars .v {
  font-weight: 500; /* было 700 — слишком тяжело для плитки (замечание 28.07);
                       фейсы Roboto 500 подключены для коллекций в head.liquid */
  color: #222;
  text-align: right;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Габариты — в конец блока характеристик (замечание круга 2). Работает
   только в плитке: в таблице .r растворены display: contents и order
   неактивен — порядок колонок прежний. Отдельной строки веса в плитке
   больше нет (решение 28.07), вес живёт только в ячейке таблицы */
.ucard-chars .r.r-dims {
  order: 10;
}

/* Пустое значение: в плитке строка остаётся с прочерком — наборы строк всех
   карточек ряда совпадают и плитки однотипны (замечание 27.07-5); в режиме
   «таблица» ячейка пустая, как в боевой (перебивка в медиа-блоке) */
/* Колонка, пустая у всей подборки (col-empty по collection.properties):
   в плитке строка не показывается вовсе — прочерки нужны, только когда
   параметр у кого-то в списке заполнен (замечание 28.07); в режиме
   «таблица» ячейки держат сетку (перебивка в медиа-блоке) */
.ucard-chars .r.col-empty {
  display: none;
}

/* Строки «только для таблицы» (r-tableonly — точность стабилизации ИБП,
   решение 28.07): в плитке не показываются, в режиме «таблица» ячейки
   держат сетку (перебивка в медиа-блоке) */
.ucard-chars .r.r-tableonly {
  display: none;
}

/* THDv в плитке не показываем — только форму (замечание 28.07); в режиме
   «таблица» THDv остаётся второй строкой ячейки, как в боевой */
.ucard-chars .r.r-forma .ucard-sep,
.ucard-chars .r.r-forma .ucard-cell2-b {
  display: none;
}

/* Прочерк у любого пустого значения: и у целиком пустой строки (is-empty),
   и у пустой позиции внутри агрегата («— / — / 250» у ёмкостей АКБ,
   «— / 0.4» у мощности ИБП) — позиции читаются однозначно */
.ucard-chars .v:empty::before {
  content: "—";
  color: #b6bdc6;
  font-weight: 400;
}

/* Вес в плитке — отдельная строка «Вес, кг» (замечание 27.07): спан веса
   внутри строки габаритов скрыт (он для ячейки режима «таблица»), строка
   габаритов без самих габаритов (r.tile-empty) показывает прочерк, как
   прочие пустые (спан веса в ней в плитке невидим) */
.ucard-ves {
  display: none;
}

.ucard-chars .r.tile-empty .v::before {
  content: "—";
  color: #b6bdc6;
  font-weight: 400;
}

/* «По запросу» в плитке — текст на месте цены (замечание 27.07-4: с приставкой
   «Цена по запросу» строка цены не влезала). Цвет — как у цены (замечание
   28.07). В DOM спан несёт «по запросу» строчными (режим «таблица»
   показывает его как в боевой), заглавную букву плитке даёт ::first-letter
   (работает только на блочных — отсюда inline-block) */
.ucard-por {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #5e5b8a;
  white-space: nowrap;
  margin-right: auto;
}

.ucard-por::first-letter {
  text-transform: uppercase;
}

/* Кнопка запроса цены в плитке — иконка корзины 1:1 с .ucard-cart-btn
   (замечание 27.07; раньше была текстовая «Узнать цену» — текст в DOM
   остаётся как fallback без CSS, видима только иконка) */
.ucard-buy .product-button.ucard-checkprice {
  width: var(--ubtn, 42px);
  height: var(--ubtn, 42px);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(251, 126, 46, 0.12);
  border: 1px solid rgba(251, 126, 46, 0.3);
  border-radius: 0;
  color: #fb7e2e;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ucard-buy .product-button.ucard-checkprice:hover {
  background: #fb7e2e;
  border-color: #fb7e2e;
  color: #fff;
}

.ucard-checkprice .button-text {
  display: none;
}

/* content-visibility для карточек НЕ используем: paint-изоляция CV клипует
   ховер-тень карточки границами обёртки. Правило
   .product-card-wrapper.below-fold { content-visibility: auto } из
   _collection.scss (мёртвое, пока компилятор InSales вырезал CV; ожило
   26.07.2026, когда вырезать перестал) УДАЛЕНО при раскатке этапа 3
   (27.07.2026). Блок ниже оставлен страховкой на случай возврата правила
   при будущих мержах/пересборках. */
.ucards .product-card-wrapper.below-fold {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Мобильная плитка: одна карточка в строке (cell-12-sm), полный набор строк.
   Типографика крупнее десктопной плитки (замечание круга 2, референс —
   мобильная карточка товара: название 28px, цена 25px при базе 14px;
   для листинга взяты соразмерные, но компактнее): название 16, цена 20,
   характеристики 13. Наличие — в строке цены между ценой и кнопками
   (на широкой одноколоночной карточке места достаточно; вторая строка
   выглядела «всунутой» между характеристиками и кнопками) */
@media (max-width: 768px) {
  .ucard-title {
    font-size: 16px;
  }

  .ucard-chars {
    font-size: 13px;
  }

  .ucard-price {
    font-size: 20px;
    margin-right: 0;
  }

  .ucard-por {
    font-size: 16px;
    margin-right: 0;
  }

  .ucard-avail {
    font-size: 13px;
  }

  /* Только когда наличие стоит после цены/«по запросу» (у снятых цены нет —
     там наличие остаётся отдельной строкой) */
  .ucard-price + .ucard-avail,
  .ucard-por + .ucard-avail {
    order: 0;
    flex-basis: auto;
    margin: 0 auto;
    text-align: center;
  }
}

/* — Режим «таблица»: только десктоп ≥1025px (паритет с прежним скрытием таблицы ≤1024) — */
@media (min-width: 1025px) {
  .products-list.ucards.ucards--table {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 0;
    margin-right: 0;
    margin-top: 22px; /* воздух между заголовком/тулбаром и таблицей
                         (базовый .products-list тянет вверх отрицательным отступом) */
  }

  /* Шапка колонок: тот же грид, что у строк */
  .ucards--table .ucard-thead {
    display: grid;
    grid-template-columns: var(--table-cols);
    align-items: stretch;
    min-width: var(--table-min, 1000px);
    border: 1px solid #dad1ff;
    background: transparent; /* заливка — фон страницы, как у боевой таблицы */
    font-size: 14px; /* как шапка боевой таблицы */
    font-weight: 400;
  }

  .ucards--table .ucard-thead > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px; /* как td шапки боевой таблицы (замечание 27.07 о высоте) */
    border-right: 1px solid #dad1ff;
    min-width: 0;
  }

  .ucards--table .ucard-thead > div:last-child {
    border-right: 0;
  }

  /* Двухуровневая шапка как в боевой: обычные ячейки на оба ряда,
     группа «Емкость, Ач» над подзаголовками С5/C10/C20 (колонки 5-7) */
  .ucards--table .ucard-thead {
    grid-template-rows: auto auto;
  }

  .ucards--table .ucard-thead > .th-r2 {
    grid-row: 1 / span 2;
  }

  .ucards--table .ucard-thead > .th-group {
    grid-column: 5 / span 3;
    grid-row: 1;
    border-bottom: 1px solid #dad1ff;
  }

  .ucards--table .ucard-thead > .th-sub {
    grid-row: 2;
  }

  .ucards--table .ucard-thead > .th-sub-1 { grid-column: 5; }
  .ucards--table .ucard-thead > .th-sub-2 { grid-column: 6; }
  .ucards--table .ucard-thead > .th-sub-3 { grid-column: 7; }

  /* Группа «Срок службы» над «циклов | лет» (колонки 9-10, после «Тип») */
  .ucards--table .ucard-thead > .th-group-srok {
    grid-column: 9 / span 2;
  }

  .ucards--table .ucard-thead > .th-sub-4 { grid-column: 9; }
  .ucards--table .ucard-thead > .th-sub-5 { grid-column: 10; }

  /* Обёртка карточки становится «прослойкой-строкой» */
  .ucards--table .product-card-wrapper {
    display: block;
    width: 100%;
    max-width: none;
    flex: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0;
    contain: none; /* paint-изоляция резала бы строку при горизонтальном скролле */
  }


  /* Карточка = строка таблицы */
  .ucards--table .ucard {
    display: grid;
    grid-template-columns: var(--table-cols);
    align-items: stretch;
    min-width: var(--table-min, 1000px);
    gap: 0;
    padding: 0;
    margin: 0;
    background: transparent; /* заливка — фон страницы; строку белит только ховер */
    border: 1px solid #dad1ff;
    border-top: 0; /* верхняя линия — от шапки/предыдущей строки */
    border-radius: 0;
    box-shadow: none;
  }

  /* Название: в таблице — производитель + артикул (спан-переключение) */
  .ucards--table .ucard-title-main {
    display: none;
  }

  .ucards--table .ucard-title-alt {
    display: block;
  }

  /* Ховер строки — копия боевой таблицы (tbody tr в _collection.scss:676-703):
     тень + внутренняя оранжевая полоска слева, «нажатие» при клике.
     Scale-ховер плитки гасим */
  .ucards--table .ucard {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .ucards--table .ucard:hover {
    transform: none;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 4px 0 0 rgba(251, 126, 46, 0.65);
    z-index: 1;
  }

  .ucards--table .ucard:active {
    background-color: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 4px 0 0 rgba(251, 126, 46, 0.85);
  }

  /* Ячейки строки: вытянуты на всю высоту, содержимое по центру */
  .ucards--table .ucard-photo,
  .ucards--table .ucard-title,
  .ucards--table .ucard-chars .v,
  .ucards--table .ucard-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    border-right: 1px solid #dad1ff;
    min-width: 0;
    margin: 0;
  }

  .ucards--table .ucard-photo .image-container.is-square {
    width: 70px;
  }

  .ucards--table .ucard-title {
    justify-content: center; /* производитель+артикул по центру, как text-center боевой */
    text-align: center;
    min-height: 0; /* резерв высоты названий — только для плитки */
  }

  /* Промежуточные обёртки характеристик растворяются — ячейками становятся .v */
  .ucards--table .ucard-chars,
  .ucards--table .ucard-chars .r {
    display: contents;
  }

  .ucards--table .ucard-chars .r.is-empty {
    display: contents; /* пустая ячейка сохраняет сетку */
  }

  /* Прочерки пустых — только плиточные: в таблице ячейка пустая, как в боевой */
  .ucards--table .ucard-chars .v:empty::before,
  .ucards--table .ucard-chars .r.tile-empty .v::before {
    content: none;
  }

  /* Плиточные скрытия веса в таблице не действуют: спан веса возвращается
     в ячейку габаритов, а отдельная плиточная строка «Вес, кг» исключается
     из сетки целиком (display: none — её .v не становится ячейкой) */
  .ucards--table .ucard-chars .r.tile-empty {
    display: contents;
  }

  .ucards--table .ucard-ves {
    display: block;
  }

  .ucards--table .ucard-chars .l {
    display: none; /* лейблы живут в шапке колонок */
  }

  .ucards--table .ucard-chars .v {
    font-weight: 300;
    font-size: 14px; /* шрифт значений — как в боевой таблице */
    font-variant-numeric: normal;
    word-break: normal;
    overflow-wrap: break-word; /* слова рвём только если слово шире колонки */
  }

  /* Габариты и вес в ячейке — двумя строками, как в боевой (там <br><br>):
     ячейка-флекс переносит по flex-basis, block у детей флекса не переносит */
  .ucards--table .ucard-chars .v {
    flex-wrap: wrap;
    align-content: center; /* перенесённые строки (габариты/вес) собраны к центру */
  }

  .ucards--table .ucard-dims,
  .ucards--table .ucard-ves {
    flex-basis: 100%;
    text-align: center;
  }

  .ucards--table .ucard-dims {
    white-space: nowrap;
    margin-bottom: 0.6em;
  }

  /* Колонка «цена + кнопки» уходит в конец строки: цена, под ней наличие,
     ниже корзина и сравнение В ОДНУ СТРОКУ (как в боевой таблице) */
  .ucards--table .ucard-buy {
    order: 99;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 6px;
    border-right: 0;
    --ubtn: 36px;
  }

  .ucards--table .ucard-buy .ucard-price,
  .ucards--table .ucard-buy .product-button {
    flex-basis: 100%;
    text-align: center;
  }

  /* Кнопки в таблице — формат боевой (.product-table-form .button):
     прозрачные 36×36, лёгкая подсветка при наведении; тележка — оранжевая
     (единственное отличие от боевой, решение сверки 26.07) */
  .ucards--table .ucard-cart-btn {
    background: transparent;
    border-color: transparent;
    color: #fb7e2e;
    font-size: 16px;
  }

  .ucards--table .ucard-cart-btn:hover {
    background: rgba(251, 126, 46, 0.12);
    border-color: rgba(251, 126, 46, 0.3);
    color: #fb7e2e;
  }

  .ucards--table .ucard-cart-btn:active {
    background: rgba(251, 126, 46, 0.2);
  }

  /* Сравнение в таблице — нейтральный боевой стиль (вторичное действие) */
  .ucards--table .ucard .compare-link {
    border-color: transparent;
    color: #5e5b8a;
    font-size: 16px;
  }

  .ucards--table .ucard .compare-link:hover {
    background: rgba(94, 91, 138, 0.12);
    border-color: rgba(94, 91, 138, 0.3);
    color: #5e5b8a;
  }

  .ucards--table .ucard .compare-link.compare-delete {
    color: #4caf50;
  }

  .ucards--table .ucard .compare-link.compare-delete:hover {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4caf50;
  }

  .ucards--table .ucard-price {
    margin: 0;
    font-size: 14px; /* как .product-table-price боевой */
    font-weight: 400; /* замечание 28.07 (было 700, затем 500) */
    color: #222;
  }

  .ucards--table .ucard-avail {
    order: 0; /* в колонке цены — по DOM: цена, наличие, кнопки */
    flex-basis: 100%; /* своя строка между ценой и рядом кнопок */
    margin: 0;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }

  /* Снятые: вместо крупного лейбла плитки — компактный значок-кружок
     на фото, как в боевой таблице (tr.is-discontinued ::after) */
  .ucards--table .ucard .product-labels {
    display: none;
  }

  .ucards--table .product-card-wrapper.is-discontinued .ucard-photo::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23999' stroke-width='2'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
  }

  /* Распродажа в таблице: компакт-значок «₽ в жёлтом кружке» на фото
     (решение 29.07) — тот же язык, что у значка снятых. Метку несёт
     label-sale внутри скрытого .product-labels, маркер — через :has()
     (без поддержки :has() значка просто нет — метка остаётся в плитке).
     Конфликт со значком снятых невозможен: label-sale не рендерится
     у discontinued (elsif в product_card) */
  .ucards--table .ucard:has(.label-sale) .ucard-photo::after {
    content: '₽';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: #ffc53d;
    border-radius: 50%;
    color: #7a5200;
    font-family: Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    z-index: 1;
    pointer-events: none;
  }

  .ucards--table .ucard-buy .product-button {
    height: 32px;
    font-size: 12px;
    flex: none;
    padding: 0 8px;
  }

  /* Значок рубля в таблице не выводится — единица уже в шапке «Цена, ₽» */
  .ucards--table .ucard-rub {
    display: none;
  }

  /* Снятые с продажи: сетка (рамки строки и ячеек) остаётся плотной, как во
     всей таблице — приглушается только содержимое. Глобальное
     .is-discontinued { opacity: .6 } темы на обёртке гасим (двойное наложение
     выбеливало и рамки). Приглушение — ЦВЕТОМ, не opacity на ячейках:
     opacity создаёт stacking context, и ячейки после ссылки названия
     перекрывали её кликабельный оверлей — строка кликалась только по фото */
  .ucards--table .product-card-wrapper.is-discontinued {
    opacity: 1;
  }

  .ucards--table .product-card-wrapper.is-discontinued .ucard-title-link,
  .ucards--table .product-card-wrapper.is-discontinued .ucard-chars .v,
  .ucards--table .product-card-wrapper.is-discontinued .ucard-avail {
    color: #9aa0a6;
  }

  .ucards--table .product-card-wrapper.is-discontinued .ucard-photo img,
  .ucards--table .product-card-wrapper.is-discontinued .ucard-photo .product-no-image {
    opacity: 0.55; /* фото — до ссылки в DOM, его изоляция оверлею не мешает */
  }

  .ucards--table .product-card-wrapper.is-discontinued .compare-link {
    color: #b9bec4;
  }

  /* Кнопки «Смотреть аналоги» у снятых в таблице нет (как в боевой —
     кнопка скрыта, переход по клику в строку) */
  .ucards--table .product-card-wrapper.is-discontinued .ucard-buy .product-button {
    display: none;
  }

  /* Цена по запросу в таблице: текст «по запросу» строчными, как в боевой
     (заглавная «П» ::first-letter — только в плитке) + стандартная иконка
     корзины (открывает форму запроса цены, тултип по наличию) */
  .ucards--table .ucard-por {
    display: block;
    flex-basis: 100%;
    text-align: center;
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    white-space: nowrap;
  }

  .ucards--table .ucard-por::first-letter {
    text-transform: none;
  }

  .ucards--table .ucard-por {
    color: #222; /* боевой вид «по запросу» в таблице — не фиолетовый */
  }

  /* col-empty и r-tableonly в таблице держат ячейки сетки, THDv
     возвращается в ячейку */
  .ucards--table .ucard-chars .r.col-empty,
  .ucards--table .ucard-chars .r.r-tableonly {
    display: contents;
  }

  .ucards--table .ucard-chars .r.r-forma .ucard-cell2-b {
    display: block;
  }

  .ucards--table .ucard-buy .product-button.ucard-checkprice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    flex-basis: auto;
    width: var(--ubtn, 36px);
    height: var(--ubtn, 36px);
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: #fb7e2e;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .ucards--table .ucard-buy .product-button.ucard-checkprice:hover {
    background: rgba(251, 126, 46, 0.12);
    border-color: rgba(251, 126, 46, 0.3);
    color: #fb7e2e;
  }

  .ucards--table .ucard-buy .product-button.ucard-checkprice:active {
    background: rgba(251, 126, 46, 0.2);
  }
}

/* ===== ЭТАП 3 «НОЛЬ ДУБЛЕЙ»: РАСКАТКА НА ИБП/ИНВЕРТОРЫ, ЗУ, СТАБИЛИЗАТОРЫ/ШКАФЫ ===== */
/* Новые классы поверх пилотных (АКБ-правила выше не меняются): агрегатная
   строка «Мощность, кВА/кВт» в плитке, двухстрочные ячейки режима «таблица»
   (АКБ ИБП: тип + кол-во; форма вых. напряжения + THDv), группа «Мощность»
   в шапке ИБП. Разметка: product_card.liquid (скелеты ibp/zu),
   collection_products_head.liquid (шапки по uc_cat). */

/* Агрегат мощности в плитке: одна строка с двумя значениями «0,65 / 0,4».
   Вправо группу прижимает ТОЛЬКО первый .v — margin-left: auto у обоих
   растащил бы значения по ширине строки */
/* В строках-агрегатах флексовый column-gap строки (10px) повторялся между
   каждым спаном значений и сепараторов (6 итемов = 50px) — «185/207/225»
   переносилась под лейбл (замечание 28.07); группу значений сжимаем,
   лейбл отделяет auto-margin первого значения */
.ucard-chars .r.r-power,
.ucard-chars .r.r-caps {
  column-gap: 0;
}

.ucard-chars .r.r-power .v,
.ucard-chars .r.r-caps .v {
  margin-left: 0;
}

.ucard-chars .r.r-power .v.v-kva,
.ucard-chars .r.r-caps .v.v-c5 {
  margin-left: auto;
}

@media (min-width: 1025px) {
  /* Шапка ИБП: группа «Мощность» над «кВА | кВт» (колонки 3-4). Ряды и
     границы дают общие классы th-group/th-sub — здесь только позиции,
     по образцу АКБ-групп («Емкость, Ач», «Срок службы») */
  .ucards--table .ucard-thead > .th-group-power {
    grid-column: 3 / span 2;
  }

  .ucards--table .ucard-thead > .th-sub-kva { grid-column: 3; }
  .ucards--table .ucard-thead > .th-sub-kvt { grid-column: 4; }

  /* Составные ячейки «в две строки» в режиме таблицы — как габариты+вес АКБ:
     части друг под другом, разделитель плитки (запятая / слэш) скрыт */
  .ucards--table .ucard-sep {
    display: none;
  }

  .ucards--table .ucard-cell2-a,
  .ucards--table .ucard-cell2-b {
    flex-basis: 100%;
    text-align: center;
  }

  /* Отступ между строками — только когда вторая часть есть */
  .ucards--table .ucard-cell2-a:not(:last-child) {
    margin-bottom: 0.6em;
  }

  /* Значение кВА в таблице — по центру ячейки (замечание 27.07): плиточный
     margin-left: auto у .v-kva (он прижимает группу значений вправо в строке
     «распора») специфичнее общего сброса margin: 0 табличных ячеек и ломал
     центрирование — auto-margin отключает stretch грид-итема */
  .ucards--table .ucard-chars .r.r-power .v.v-kva,
  .ucards--table .ucard-chars .r.r-caps .v.v-c5 {
    margin-left: 0;
  }

  /* Хвост настроечного набора (строки сверх скелета) — только в плитке.
     В режиме «таблица» хвостовые колонки раздували сетку за ширину
     контент-колонки (975px против ~875 доступных) и давали таблице свой
     горизонтальный скролл; вид таблицы согласован «1:1 с боевой» — без них.
     Данные из HTML не пропадают (SEO-инвариант): строки несёт плитка */
  .ucards--table .ucard-chars .r.r-tail {
    display: none;
  }

  /* ===== КОНТЕНТНО-АДАПТИВНЫЕ КОЛОНКИ ЧЕРЕЗ SUBGRID (замечания 27.07) =====
     У боевой <table> ширины колонок подстраиваются под контент; N независимых
     гридов-строк так не умеют — треки приходилось фиксировать. Subgrid решает:
     колонки считает ОДИН грид-контейнер по контенту всех строк И шапки
     (auto/max-content/fit-content-треки в --table-cols-auto, задаёт
     collection_card_chars.liquid по категории), строки наследуют их 1:1.
     Категории без --table-cols-auto (АКБ — вид согласован пилотом, ЗУ, plain)
     продолжают жить на фиксированных --table-cols. Браузеры без subgrid
     (<2%: Chrome <117, Safari <16) остаются на старой схеме фикс-треков —
     базовые правила выше не удаляем */
  @supports (grid-template-columns: subgrid) {
    .products-list.ucards.ucards--table {
      display: grid;
      grid-template-columns: var(--table-cols-auto, var(--table-cols));
      min-width: 0;
    }

    /* Обёртка растворяется: грид-итемом контейнера становится сама карточка */
    .ucards--table .product-card-wrapper {
      display: contents;
    }

    .ucards--table .ucard-thead,
    .ucards--table .ucard {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      min-width: 0; /* фолбэчный var(--table-min) здесь не нужен: авто-треки
                       сами не ужимаются ниже min-content (скролл контейнера) */
    }

    /* Категории с контентными треками (ucards--autocols): ячейкам возвращается
       авто-минимум — тогда auto-трек не ужимается ниже самого длинного слова
       и колонка растёт под него, как в настоящей <table> (замечание 27.07:
       «Аппроксимированная» вылезала на соседнюю ячейку — общий min-width: 0
       обнулял вклад ячейки в минимум трека, а перенести слово внутри
       флекс-ячейки с анонимным текстом нельзя) */
    .ucards--table.ucards--autocols .ucard-chars .v {
      min-width: auto;
    }

    /* Шапка тоже распирает колонку минимумом (замечание 27.07-2: «Фазы
       вх / вых» не влезала — колонка ужималась до значений «1:1»):
       авто-минимум = самое длинное слово шапки, фраза переносится.
       Потолки колонок с длинными шапками держат треки minmax(auto,N) */
    .ucards--table.ucards--autocols .ucard-thead > div {
      min-width: auto;
    }

    /* Название/артикул: авто-минимум по словам (колонка по контенту; жёсткий
       минимум 150px давал избыток на коротких названиях и скролл таблице).
       Потолок ширины — на САМОМ ТРЕКЕ (minmax(auto,186px) в --table-cols-auto):
       max-width на элементе отменял stretch, элемент становился уже колонки
       и рвал вертикальную границу ячейки (разрыв 28px на АКБ) */
    .ucards--autocols .ucard-title {
      min-width: auto;
    }
  }
}

/* ============================================================
   «Лёгкие» хабы (этап 3 «Ноль дублей», дизайн 28.07):
   чипы SEO-фильтров в теле (snippets/hub_tags.liquid) и счётчик
   моделей в блоках подколлекций. Формы темы: рамки #dad1ff,
   ссылки #5e5b8a, акцент #fb7e2e, radius 0.
   ============================================================ */

.hub-tags {
  /* Разделение с сеткой подколлекций: воздух + hairline (замечания 28.07;
     отступ после линии — как от заголовка до чипов, 33px). Линия живёт
     на блоке чипов — на хабах без фильтров (ЗУ) её нет */
  margin: 4px 0 33px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dad1ff;
}

/* Родные отрицательные маржины обёртки (-14px сверху, -5px по бокам —
   компенсация прежней flex-разметки) сдвигали сетку карточек на 5px левее
   чипов и съедали 14px отступа после линии (замечания 29.07) */
.subcollections-list-new {
  margin: 0;
}

/* Заголовок «Популярное:» — инлайн в первом ряду чипов (решение 28.07),
   вес 500 (фейсы Roboto 500 на коллекциях уже подключены) */
.hub-tags-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  margin-right: 4px;
}

.hub-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin: 0 0 8px;
}

.hub-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #dad1ff;
  background: #fff; /* фон страницы #f8f7f6 — белый приподнимает чип */
  box-shadow: 0 1px 2px rgba(37, 33, 80, 0.06);
  font-size: 14px; /* базовый текст (замечание осмотра 28.07) */
  line-height: 1.5;
  color: #5e5b8a;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Капитализация обрезанных типовых чипов («в стойку…» → «В стойку…»);
   аббревиатуры (OPzV) не страдают — первая буква и так заглавная */
.hub-tag::first-letter {
  text-transform: uppercase;
}

/* Ховер — инверсия, как у series_chips карточки товара (решение 29.07:
   единый язык чипов темы; оранж оставлен действиям покупки). Только на
   устройствах с курсором — на таче вспыхивал бы при тапе */
@media (hover: hover) {
  .hub-tag:hover {
    background: #5e5b8a;
    border-color: #5e5b8a;
    color: #fff;
  }
}

/* Клавиатурная навигация: та же инверсия + контур */
.hub-tag:focus-visible {
  background: #5e5b8a;
  border-color: #5e5b8a;
  color: #fff;
  outline: 2px solid #5e5b8a;
  outline-offset: 2px;
}

/* Чекбокс-развёртка чипов «Показать все (N)» (05.08.2026): input перед
   .hub-tags, label после — рендерит hub_tags.liquid при >8 фильтров.
   Вне мобильного медиа кнопка не существует, но input в DOM всегда —
   прячем визуально БЕЗ display:none (клавиатурная доступность) */
.hub-tags-more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hub-tags-more-btn {
  display: none;
}

/* Мобильный: чипы единым переносимым потоком (05.08, вместо горизонтальных
   лент — опции за краем экрана были невидимы, о трёх десятках фильтров
   пользователь не догадывался). Ряды растворяются display:contents,
   переносом управляет контейнер; порядок чипов прежний (числовые → типы) */
@media (max-width: 768px) {
  .hub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: baseline;
  }

  .hub-tags-row {
    display: contents;
  }

  /* Кламп: видны первые ~2 ряда. 65px = чип 29px × 2 + row-gap 6px + 1px
     бордера; паддинг и линию в ноль — в их полосе виден срез третьего ряда,
     линию с отступом секции несёт кнопка-развёртка */
  .hub-tags--clamp {
    max-height: 65px;
    overflow: hidden;
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
  }

  .hub-tags-more-btn {
    display: block;
    margin: 10px 0 33px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dad1ff;
    font-size: 14px;
    color: #5e5b8a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
    cursor: pointer;
  }

  /* Развёрнуто: снимается только кламп; линию и отступ секции в обоих
     состояниях несёт кнопка — теперь она «Свернуть» (замечание 05.08),
     свап текстов парой span внутри label */
  .hub-tags-more-toggle:checked ~ .hub-tags--clamp {
    max-height: none;
  }

  .hub-tags-more-btn .hub-tags-more-close {
    display: none;
  }

  .hub-tags-more-toggle:checked ~ .hub-tags-more-btn .hub-tags-more-open {
    display: none;
  }

  .hub-tags-more-toggle:checked ~ .hub-tags-more-btn .hub-tags-more-close {
    display: inline;
  }

  .hub-tags-more-toggle:focus-visible ~ .hub-tags-more-btn {
    outline: 2px solid #5e5b8a;
    outline-offset: 2px;
  }
}

/* ============================================================
   Зона чипсов перелинковки «Смотрите также» (13.08.2026):
   серверный рендер из доп. поля link_chip (snippets/link_chip.liquid,
   все три шаблона коллекций, сразу под шапкой). Паттерн — хабовые чипы
   выше, но контейнер без рядов: flex-wrap на всех ширинах; сами чипы
   переиспользуют .hub-tag. Кламп 2 рядов и кнопка — только мобильный.
   Своей линии секции у зоны нет — hairline ниже несут hub_tags/описание.
   ============================================================ */

.link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin: 0 0 30px; /* до грида/описания — воздух (замечание 13.08.2026) */
}

/* Когда следом чипы «Популярное:» (hub_tags или их чекбокс-развёртка) —
   родственные зоны держим группой, отступ ужимается */
.link-chips:has(+ .hub-tags),
.link-chips:has(+ .hub-tags-more-toggle),
.link-chips-more-btn:has(+ .hub-tags),
.link-chips-more-btn:has(+ .hub-tags-more-toggle) {
  margin-bottom: 16px;
}

.link-chips-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  margin-right: 4px;
}

/* Скрытый чекбокс развёртки — паттерн .hub-tags-more-toggle: спрятан
   без display:none (клавиатурная доступность), в DOM при >8 чипов */
.link-chips-more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.link-chips-more-btn {
  display: none;
}

@media (max-width: 768px) {
  /* Кламп: видны первые ~2 ряда; 65px — как у .hub-tags--clamp
     (чип 29px × 2 + row-gap 6px + 1px). Нижний отступ переезжает
     на кнопку-развёртку */
  .link-chips--clamp {
    max-height: 65px;
    overflow: hidden;
    margin-bottom: 0;
  }

  .link-chips-more-btn {
    display: block;
    margin: 8px 0 30px; /* низ — как у контейнера (13.08); при hub_tags следом ужмёт :has выше */
    font-size: 14px;
    color: #5e5b8a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
    cursor: pointer;
  }

  .link-chips-more-toggle:checked ~ .link-chips--clamp {
    max-height: none;
  }

  .link-chips-more-btn .link-chips-more-close {
    display: none;
  }

  .link-chips-more-toggle:checked ~ .link-chips-more-btn .link-chips-more-open {
    display: none;
  }

  .link-chips-more-toggle:checked ~ .link-chips-more-btn .link-chips-more-close {
    display: inline;
  }

  .link-chips-more-toggle:focus-visible ~ .link-chips-more-btn {
    outline: 2px solid #5e5b8a;
    outline-offset: 2px;
  }
}

/* Компакт-карточки подколлекций (редизайн 28.07): фото + название + счётчик,
   сеткой; плотные отступы. Старые .subcollections-blocks-item/-left/-right
   больше не рендерятся (их стили в теме остаются сиротами до чистки) */
.subcollections-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.subcollections-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid #dad1ff;
  background: #fff; /* белые карточки на сером фоне страницы (28.07) */
  box-shadow: 0 1px 2px rgba(37, 33, 80, 0.06);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Подъём вместо scale: на крупных блоках увеличение наезжало бы на соседей */
@media (hover: hover) {
  .subcollections-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(94, 91, 138, 0.22);
  }
}

.subcollections-card:focus-visible {
  outline: 2px solid #fb7e2e;
  outline-offset: 1px;
}

/* Слот фото фиксированной высоты выравнивает карточки ряда; сама картинка
   НЕ апскейлится (исходники логотипов местами 114×26 — растяжка мылила),
   мелкая — по центру в нативном размере, крупная — вписывается */
.subcollections-card-photo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.subcollections-card-photo img {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 100%;
  object-fit: contain;
}

.subcollections-card-title {
  color: #5e5b8a;
  font-size: 14px;
  line-height: 1.35;
}

/* Капитализация после среза категорийного слова
   («комплекты для…» → «Комплекты для…») */
.subcollections-card-title::first-letter {
  text-transform: uppercase;
}

/* Режим «таблица»: текстовые метки скрывает общее правило
   .ucards--table .ucard .product-labels (блок значка снятых выше);
   «Распродажа» там — компакт-значок ₽ через :has() */

/* Подколлекция целиком из снятых с продажи: приглушение + серый логотип
   (ссылка живая — SEO-вес и обход не страдают); ховер слегка оживляет —
   кликабельность видна, на листовой у снятых есть «Смотреть аналоги» */
.subcollections-card.is-discontinued {
  opacity: 0.55;
}

.subcollections-card.is-discontinued .subcollections-card-photo img {
  filter: grayscale(1);
}

@media (hover: hover) {
  .subcollections-card.is-discontinued:hover {
    opacity: 0.8;
  }
}

.subcollections-card-count {
  color: #888;
  font-size: 13px;
  margin-top: auto; /* счётчики карточек ряда на одной линии */
}

/* «от 11 277 ₽» не разрывается посреди цены (замечание 05.08) —
   перенос только после «N моделей ·» */
.subcollections-card-price {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .subcollections-blocks {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .subcollections-card-photo {
    height: 90px;
  }
}

/* ==========================================================================
   UX ФИЛЬТРОВ (авг 2026): чипсы применённых фильтров, sticky-кнопка
   «Применить» с подсветкой изменений, крестики/счётчики групп, оверлей.
   Палитра темы: рамки #dad1ff, текст ссылок #5e5b8a, акцент #fb7e2e,
   radius 0 (как .hub-tag выше).
   ========================================================================== */

/* --- Чипсы применённых фильтров над выдачей --- */
/* Чипсы «Выбрано» — последний блок шапки, в собственной рамке из двух линий
   (итерация замечаний 01.08: порядок SEO-чипы → текст → «Выбрано» → товары;
   линии одного цвета #dad1ff, отступы вокруг «Выбрано» равные — 16px, как
   у SEO-чипов до их бывшей линии). Линии предыдущих блоков при чипсах гасятся:
   у текста — Liquid-классом at-top--chips-follow, у .hub-tags — через :has
   (без поддержки :has остаётся лишняя линия — мягкая деградация) */
.applied-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin: 16px 0 24px;
  padding: 16px 0;
  border-top: 1px solid #dad1ff;
  border-bottom: 1px solid #dad1ff;
}

.collection-description.at-top--chips-follow {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Варианты с + .hub-tags-more-btn: label развёртки этажится между чипами
   и соседом в DOM на всех ширинах (скрыт стилями) — без них при клампе
   возвращалась бы лишняя двойная линия */
.hub-tags:has(+ .applied-filters),
.hub-tags:has(+ .collection-description.at-top--chips-follow),
.hub-tags:has(+ .hub-tags-more-btn + .applied-filters),
.hub-tags:has(+ .hub-tags-more-btn + .collection-description.at-top--chips-follow) {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}

/* У свёрнутого клампа линию секции несёт кнопка-развёртка — перед чипсами
   «Выбрано» и текстом-с-чипсами гасим её так же, как линию контейнера */
.hub-tags-more-btn:has(+ .applied-filters),
.hub-tags-more-btn:has(+ .collection-description.at-top--chips-follow) {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}

.applied-filters-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 4px;
}

.applied-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid #dad1ff;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(37, 33, 80, 0.06);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #5e5b8a;
  white-space: nowrap;
  cursor: pointer;
}

.applied-filter__x {
  font-size: 16px;
  line-height: 1;
  color: #9a98ab;
}

@media (hover: hover) {
  .applied-filter:hover {
    background: #5e5b8a;
    border-color: #5e5b8a;
    color: #fff;
  }
  .applied-filter:hover .applied-filter__x { color: #fff; }
}

.applied-filter:focus-visible {
  outline: 2px solid #5e5b8a;
  outline-offset: 2px;
}

.applied-filter--reset {
  border-color: #fb7e2e;
  color: #fb7e2e;
}

@media (hover: hover) {
  .applied-filter--reset:hover {
    background: #fb7e2e;
    border-color: #fb7e2e;
    color: #fff;
  }
}

/* Мобильных оверрайдов у .applied-filters больше нет (замечание осмотра 05.08):
   чипсы «Выбрано» переносятся по строкам базовым flex-wrap — как SEO-чипы.
   Горизонтальную ленту со sticky-«Сбросить всё» не возвращать: кнопка
   наезжала на чипсы, а опции за краем были невидимы */

/* --- Sticky-кнопка «Применить» внизу формы фильтров --- */
/* Работает и в сайдбаре (скролл-контейнер — вьюпорт), и в мобильной панели
   alertify (скролл-контейнер — .ajs-modal). Белый «ореол» box-shadow
   отделяет прилипшую кнопку от проезжающего под ней содержимого формы. */
.collection-filter .filter-submit {
  position: sticky;
  bottom: 6px; /* зазор, чтобы каёмка pending-подсветки и белый ореол не резались краем окна */
  z-index: 10;
  box-shadow: 0 0 0 6px #fff;
}

/* Неприменённые изменения: подсветка кнопки до нажатия «Применить» */
.collection-filter.has-pending-filters .filter-submit {
  outline: 2px solid #5e5b8a;
  outline-offset: 2px;
}

/* --- Крестик сброса группы (виден только у групп с выбранным) --- */
.collection-filter .filter-control { position: relative; }

.collection-filter .filter-clear { display: none; }

.collection-filter .filter.has-selection > .filter-control .filter-clear {
  display: block;
  position: absolute;
  right: 2.2em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding: 2px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Шрифтовый крестик вместо иконочного шрифта (ion-иконки в теме не грузятся) */
.collection-filter .filter-clear .clear-icon::before {
  content: '\00d7';
  font-size: 18px;
  line-height: 1;
  color: #9a98ab;
  font-style: normal;
}

@media (hover: hover) {
  .collection-filter .filter-clear:hover .clear-icon::before { color: #fb7e2e; }
}

/* --- Счётчик выбранных значений в заголовке группы --- */
.collection-filter .filter-count {
  color: #fb7e2e;
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}

/* --- Количество товаров у значений фильтра (данные уже в data-count) --- */
.collection-filter .checkbox-label[data-count]::after {
  content: ' (' attr(data-count) ')';
  color: #999;
  font-size: 12px;
}

/* --- Оверлей применения фильтров --- */
.filters-applying-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* выше панелей alertify (1981) */
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.filters-applying-overlay::after {
  content: '';
  width: 42px;
  height: 42px;
  border: 4px solid #dad1ff;
  border-top-color: #5e5b8a;
  border-radius: 50%;
  animation: af-spin 0.8s linear infinite;
}

@keyframes af-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Факт-строка «17 моделей · от 26 599 ₽» (05.08.2026).
   Подтверждает обещание сниппета выдачи (title/description листовых
   генерятся с теми же числами в head.liquid). Стоит ПОД подчёркиванием
   заголовка (замечание осмотра 05.08 — внутри .decorated-title строка
   отрывала фиолетовую линию от H1): отдельная flex-строка обёртки,
   в DOM между заголовком и тулбаром. Числа и валидация — сниппет
   live-numbers (заглушки ≥500 млн и пустые подборки скрываются там)
   ============================================================ */

.collection-fact {
  flex-basis: 100%; /* своя строка на всю ширину обёртки */
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
}

/* Десктоп: DOM-порядок мобильный (H1 → факт → кнопки), визуально факт —
   второй строкой под парой «H1 + тулбар» */
@media (min-width: 769px) {
  .collection-fact {
    order: 1;
  }

  /* Линия шапки на уровне подчёркивания H1 (замечание 13.08.2026).
     Факт-строка сделала обёртку двухстрочной — родной border-bottom
     обёртки уехал под факт и оторвался от фиолетового подчёркивания
     (.decorated-title совмещает их трюком margin-bottom:-2px,
     _layout.scss:84). Возврат: у шапок С фактом линию несёт border-top
     самого факта — он ложится в ту же 2px-полосу под первой строкой */
  .decorated-title-wrapper:has(.collection-fact) {
    border-bottom: 0;
  }

  .decorated-title-wrapper:has(.collection-fact) .collection-fact {
    border-top: 2px solid #eeeeee; /* цвет = $gray-lighter боевого theme.css */
    margin-top: 0;
    padding-top: 8px; /* воздух, бывший margin-top 6px */
  }

  /* Фиолетовый ПОВЕРХ серого на совмещённом участке: факт (order:1)
     рисуется позже и иначе закрасил бы подчёркивание заголовка */
  .decorated-title-wrapper:has(.collection-fact) .decorated-title {
    position: relative;
  }
}

/* Подросший блок заголовка (H1 + факт) не должен растягивать тулбар:
   stretch тянет .collection-order, а .select-field {height:100%}
   раздул бы селект сортировки на всю высоту */
.collection-toolbar.is-top {
  align-self: flex-end;
}

/* ============================================================
   Мобильный тулбар одним рядом 50/50 (05.08.2026): [Подбор (N)]
   [Сортировка] вместо трёх полупустых «этажей», прижатых вправо.
   Кнопка — контурная в языке чипов темы (оранжевый оставлен
   действиям покупки); высоты выровнены. Крестик-сброс из тулбара
   удалён (Liquid) — его функции дублируют чипсы «Сбросить всё»
   и хлебные крошки
   ============================================================ */
@media (max-width: 768px) {
  .collection-toolbar.is-top {
    width: 100%;
    margin: 0.5rem 0;
    padding-left: 0;
    gap: 8px;
  }

  .collection-toolbar.is-top > * {
    margin: 0; /* старые «маржины-распорки» детей заменяет gap */
  }

  /* Кнопка «Подбор по параметрам»: полряда, контурный вид */
  .collection-toolbar.is-top .js-open-filter {
    flex: 1 1 0;
    min-height: 44px;
    margin-right: 0; /* перебить .open-filter {margin-right:.3rem} */
    background: #fff;
    border: 1px solid #dad1ff;
    box-shadow: 0 1px 2px rgba(37, 33, 80, 0.06);
    color: #5e5b8a;
    font-weight: 500;
  }

  /* Форма сортировки: вторые полряда; сама форма блочная — делаем flex,
     чтобы селект занял всю её ширину и высоту ряда */
  .collection-toolbar.is-top .collection-order-wrapper {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
  }

  .collection-toolbar.is-top .collection-order {
    flex: 1;
    margin: 0;
    min-width: 0;
  }

  .collection-toolbar.is-top .select-field {
    min-height: 44px;
    width: 100%;
  }
}