/*
 * lot-card.css — Phase 02 (Plan 02.2 Task 2.3, переименован 2026-05-21).
 * Содержит: общие компоненты .lot-card / .lot-grid / .badge / .fav-heart
 * + catalog-page chrome (.cat-hero, .filters, .active-filters, .filter-panel).
 * Подключается на catalog.twig и home.twig (где есть карточки).
 *
 * STRICT RULE: только var(--*) токены из design-tokens.css.
 * NO hex literals, NO rgb()/rgba() literals — все цвета через токены.
 */

/* ============================================================ */
/* Grid сетка лотов (responsive 6/3/2)                          */
/* ============================================================ */
.lot-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gut, 16px);
  row-gap: 36px;
}

@media (max-width: 1199px) {
  .lot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
}

/* ============================================================ */
/* LotCard (Variant A)                                          */
/* ============================================================ */
.lot-card {
  position: relative;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.lot-card__photo {
  position: relative;
}

/* Квадратный контейнер фото (aspect-ratio вместо фиксированной высоты).
   object-fit: cover — фото заполняет площадь без белых полей.
   Базовые .plate / .plate img (overflow, object-fit, transition, hover-зум)
   живут в design-tokens.css §plate — здесь не дублируем. */
.lot-card__photo .plate {
  aspect-ratio: 1;
}

/* Кликабельное фото (D-02-06): полнокроющая ссылка под интерактивом.
   z-index:1 — ниже номера/бэйджей/сердечка (z:2), поэтому fav-heart и
   бэйджи перехватывают свои клики, а клик по самому фото ведёт на предмет.
   Скрыта от screen-reader/таба — основная ссылка остаётся на заголовке. */
.lot-card__photo-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Номер предмета — overlay-плашка слева-внизу на фото (D-02-04, owner 2026-05-23).
   Подложка-прямоугольник от левого края фото обнимает номер → читается на любом фоне,
   без цветного тона (в отличие от mix-blend-mode:difference). Двухрежимно:
     — ДЕФОЛТ = светлое фото (их большинство): тёмный номер --ink + светлая подложка;
       дефолт «светлое» исключает мигание для большинства карточек при загрузке;
     — lot-photo-luma.js считает яркость угла → на тёмных фото вешает .is-dark-photo
       → бежевый номер --lot-num + тёмная подложка.
   Подложки — color-mix от токенов --paper / --paper-deep (без хардкода rgba). */
.lot-card__no-overlay {
  position: absolute;
  left: 0;
  bottom: 10px;
  padding: 3px 9px 3px 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 41%, transparent);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
/* Тёмное фото (JS-детект): бежевый номер + тёмная подложка. */
.lot-card__photo.is-dark-photo .lot-card__no-overlay {
  color: var(--lot-num);
  background: color-mix(in srgb, var(--paper-deep) 31%, transparent);
}

/* artboard card-variants.jsx — paddingTop: 14, НЕ нормализуем до --gut 16px */
.lot-card__body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
}

.lot-card__sold-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-sold);
  pointer-events: none;
}

.lot-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* hr-soft внутри карточки: верхний margin компенсирует line-height anons,
   нижний — половина, чтобы визуально цена была ровно по центру между hr и краем карточки. */
.lot-card__body > .hr-soft {
  margin: 12px 0 0;
}

.lot-card__cart-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  padding: 13px; /* touch target 44×44 (18px svg + 26px padding) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Пустая корзина не «краснеет» на hover — чтобы после удаления возвращался
   ровно чёрный контур (как был), а не accent-контур (owner UAT 2026-06-06). */
.lot-card__cart-btn:hover {
  color: var(--ink);
}

/* Активное состояние: товар в корзине — заполненная иконка accent-цветом
   (единственное цветное состояние → явно отличается от пустой чёрной). */
.lot-card__cart-btn--active,
.lot-card__cart-btn--active:hover {
  color: var(--accent);
}

/* ============================================================ */
/* Badges (top-left corner of photo)                            */
/* ============================================================ */
.badge {
  position: absolute;
  left: 8px;
  top: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.33;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border: 1px solid;
  z-index: 2;
}

.badge--discount {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper);
}

.badge--reserved {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}

.badge--sold {
  border-color: var(--accent);
  color: var(--accent);
  /* Бледно-красный фон — color-mix вместо хардкода, бренд-консистентно. */
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  z-index: 3; /* above overlay */
}

.badge--new {
  border-color: transparent;
  background: var(--paper);
  color: var(--ink);
}

/* ============================================================ */
/* Title / anons / lot-no                                       */
/* ============================================================ */
.lot-no {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* Revision Pass 1: длинные названия — переносим до 3 строк (раньше было 2 + clip). */
.lot-title {
  display: block;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  hyphens: auto;
}

.lot-title:hover {
  color: var(--accent);
}

.lot-anons {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lot-anons--full {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.hr-soft {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 12px 0;
}

/* ============================================================ */
/* Price (PriceBlock)                                           */
/* ============================================================ */
.price {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.price--discount {
  color: var(--accent);
}

.price--old {
  margin-left: 8px;
  color: var(--ink-3);
  font-weight: 400;
  text-decoration: line-through;
}

/* Знак ₽ — приглушённый, чтобы акцент был на цифрах. */
.price__rub {
  color: var(--ink-3);
  font-weight: 400;
}

.price-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================ */
/* FavHeart                                                     */
/* ============================================================ */
.fav-heart {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 13px; /* touch target 44×44 */
  color: var(--ink-2);
  line-height: 0;
  opacity: 0.7;
  transition: opacity 120ms ease, color 120ms ease;
}

.fav-heart:hover {
  opacity: 1;
}

.fav-heart--active {
  color: var(--accent);
  opacity: 1;
}

.fav-heart--active .fav-heart__icon {
  fill: var(--accent);
  stroke: var(--accent);
}

/* ============================================================ */
/* LotCard list-view (Variant E)                                */
/* ============================================================ */
.lot-card--list {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.lot-card--list__photo {
  position: relative;
  width: 240px;
}

.lot-card--list__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

.lot-card--list__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 140px;
}

.lot-title-list {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.lot-title-list:hover {
  color: var(--accent);
}

@media (max-width: 767px) {
  .lot-card--list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lot-card--list__photo {
    width: 100%;
  }
  .lot-card--list__aside {
    align-items: flex-start;
  }
}

/* ─── Phase 02.3 Task 3.3 — catalog page layout ─── */

[x-cloak] { display: none !important; }

/* Hero per catalog.jsx CatHero(): 2-column 1.4fr / 1fr, right column = count tab.
   Spacing: между breadcrumbs и hero — 12px (raньше 32 — в 2 раза больше). */
.cat-hero {
  padding: 16px 0 8px;
}
.cat-hero__inner {
  max-width: var(--container-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 24px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.cat-hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
/* Breadcrumbs внутри hero — занимают место бывшего eyebrow (revision pass 2). */
.cat-hero__crumbs {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-hero__crumb {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .12s ease;
}
.cat-hero__crumb[href]:hover { color: var(--ink); }
.cat-hero__crumb--current { color: var(--ink-2); }
.cat-hero__crumb-sep { color: var(--ink-3); }
.cat-hero__title {
  font-family: var(--f-sans);
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 18px;
}
.cat-hero__lead {
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0;
}
.cat-hero__aside {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}
.cat-hero__count-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.cat-hero__count-num {
  font-family: var(--f-sans);
  font-size: 60px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cat-hero__count-sub {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
}
@media (max-width: 767px) {
  .cat-hero__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cat-hero__count-num { font-size: 44px; }
}

/* «О разделе» — Revision Pass 2 (Issue 10): single-column layout, full width.
   Разделитель сверху (1px var(--rule)) перед блоком — отделяет от каталог-сетки. */
.cat-about {
  padding: 40px 0 64px;
  border-top: 1px solid var(--rule);
  margin-top: 40px;
}
.cat-about__inner {
  max-width: var(--container-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 24px);
}
.cat-about__title {
  font-family: var(--f-sans);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
.cat-about__text {
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.cat-about__text p { margin: 0 0 12px; }
.cat-about__text p:last-child { margin-bottom: 0; }
.cat-about__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cat-about__text a:hover { text-decoration: none; }
.cat-about__text ul, .cat-about__text ol { margin: 0 0 12px; padding-left: 1.4em; }
.cat-about__text li { margin-bottom: 4px; }
.cat-about__text strong, .cat-about__text b { font-weight: 500; color: var(--ink); }

/* Индекс каталога /catalog/ — обёртка с page-padding под section-header + grid. */
.catalog-index { padding: 24px var(--pad-x) 64px; }
.catalog-index .subcategories__grid { margin-top: 12px; }

.subcategories {
  padding: 28px 0 8px;
}
.subcategories__inner {
  max-width: var(--container-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 24px);
}
.subcategories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.subcategories__label-head {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Кнопка «Свернуть/Развернуть» в правом углу шапки подкатегорий (revision pass 2). */
.subcategories__toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .12s ease;
}
.subcategories__toggle:hover { color: var(--ink); }
.subcategories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 1200px) {
  .subcategories__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .subcategories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.subcategories__tile {
  display: block;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
  min-height: 96px;
  position: relative;
}
.subcategories__tile:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.subcategories__count {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: right;
  margin-bottom: 18px;
  min-height: 14px;
  font-variant-numeric: tabular-nums;
}
.subcategories__name {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 4px;
}
.subcategories__sub {
  font-family: var(--f-sans);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.35;
}

.catalog-body {
  max-width: var(--container-max, 1400px);
  margin: 0 auto;
  padding: 24px var(--container-pad, 24px);
}

/* Toolbar per catalog.jsx Toolbar() — top/bottom rules, чёрная кнопка Фильтры
   слева, active filter pills, справа — view-toggle и sort-buttons. */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.toolbar__left, .toolbar__right {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar__filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
}
.toolbar__filters-btn:hover { background: var(--accent); border-color: var(--accent); }
.toolbar__filters-mobile { display: none; }
@media (max-width: 767px) {
  .toolbar__filters-toggle { display: none; }
  .toolbar__filters-mobile { display: inline-flex; }

  /* Mobile toolbar layout: row 1 = [Фильтры][Вид], row 2 = [Сортировка][Новые][Дешевле][Дороже].
     Псевдо-элемент .toolbar::after создаёт невидимый flex-break между рядами. */
  .toolbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .toolbar__left {
    flex: 1 1 auto;
    order: 10;
  }
  .toolbar__right {
    display: contents;
  }
  .view-toggle {
    order: 20;
  }
  /* Невидимый разделитель строк — занимает всю ширину, нулевой высоты. */
  .toolbar::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 25;
  }
  .toolbar__sort-label {
    order: 30;
    margin: 0 2px 0 0;
  }
  .sort-buttons {
    order: 40;
  }
}
.toolbar__sort-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 4px 0 12px;
}

/* Sort buttons group per артборд. */
.sort-buttons {
  display: inline-flex;
  border: 1px solid var(--rule);
}
.sort-buttons__btn {
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  border-left: 1px solid var(--rule);
}
.sort-buttons__btn:first-child { border-left: 0; }
.sort-buttons__btn:hover { background: var(--paper-2); }
.sort-buttons__btn--active {
  background: var(--ink);
  color: var(--paper);
}
.sort-buttons__btn--active:hover { background: var(--ink); }

/* View toggle group. */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
}
.view-toggle__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  background: transparent;
  text-decoration: none;
  border-left: 1px solid var(--rule);
}
.view-toggle__btn:first-child { border-left: 0; }
.view-toggle__btn:hover { color: var(--ink); background: var(--paper-2); }
.view-toggle__btn--active {
  background: var(--ink);
  color: var(--paper);
}

/* Active filter pills. */
.active-filters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.active-filters__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--f-sans);
  font-size: 12px;
  line-height: 1;
}
.active-filters__pill:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.active-filters__x {
  color: var(--paper);
  opacity: .6;
  font-size: 11px;
}
.active-filters__pill:hover .active-filters__x { opacity: 1; color: var(--paper); }
.active-filters__clear {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.active-filters__clear:hover { color: var(--accent); }

.filter-panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 20px;
  margin-bottom: 24px;
}
.filters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Ряд 1 — два ползунка (цена + период), каждый на 2 колонки → заполняют первую строку.
   Ряд 2 — селекты (material/brand/country/tech) по 1 колонке. Кнопки — отдельной строкой. */
.filters__group--range { grid-column: span 2; }
.filters__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.filters__select, .filters__input {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.filters__range { display: flex; gap: 8px; }

/* Range-slider (dual <input type=range> поверх друг друга). */
.range-slider {
  display: block;
}
.range-slider__values {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 8px;
}
.range-slider__val {
  font-variant-numeric: tabular-nums;
}
.range-slider__track {
  position: relative;
  height: 24px;
  margin: 4px 0 0;
}
.range-slider__track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule);
  transform: translateY(-50%);
}
.range-slider__fill {
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--ink);
  transform: translateY(-50%);
  pointer-events: none;
  left: 0; right: 0;
}
.range-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none;
}
.range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.range-slider__input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  pointer-events: auto;
}
.range-slider__input::-webkit-slider-runnable-track {
  background: transparent;
}
.range-slider__input::-moz-range-track {
  background: transparent;
}
.range-slider__input--min { z-index: 3; }
.range-slider__input--max { z-index: 4; }
.filters__actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }

.results-grid-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.results-grid__count {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}
.results-grid__count .num-tab {
  font-weight: 600;
  color: var(--ink);
}
.results-grid__page {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.results-grid__empty {
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--ink-2);
  padding: 48px 0;
  text-align: center;
}

.lot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
@media (max-width: 1199px) {
  .lot-grid { grid-template-columns: repeat(3, 1fr); }
  /* Планшет: 2 колонки. Ползунок = на всю ширину (2 из 2), селекты по 2 в ряд. */
  .filters__grid { grid-template-columns: repeat(2, 1fr); }
  .filters__group--range { grid-column: span 2; }
}
@media (max-width: 767px) {
  .lot-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Мобильно: всё в столбик. */
  .filters__grid { grid-template-columns: 1fr; }
  .filters__group--range { grid-column: span 1; }
  .subcategories__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pagination — перенесён в site.css (грузится на всех страницах, единый вид сайта).
   См. site.css §«Единый страничник». */

.seo-block {
  max-width: var(--container-max, 1400px);
  margin: 32px auto;
  padding: 0 var(--container-pad, 24px);
}
.seo-block__content {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Mobile filter drawer (справа).
   Скрыт через transform+visibility — надёжнее display:none для position:fixed.
   JS добавляет/снимает класс .is-open. */
.mobile-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay, rgba(0,0,0,.4));
  z-index: 9990;
}
.mobile-filter-overlay.is-open { display: block; }

.mobile-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--paper);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 9999;
  display: flex;   /* x-show управляет display:none/flex */
  flex-direction: column;
}
.mobile-filter-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.mobile-filter-drawer__title {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.mobile-filter-drawer__close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  /* MOB-02 / WCAG 2.5.5: тап-зона ≥44×44px (Phase 2 gate). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 10px;
}
.mobile-filter-drawer__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Популярные теги раздела — per catalog.jsx PopularTags. */
.popular-tags {
  border-top: 1px solid var(--rule-soft);
  padding: 40px 0 24px;
}
.popular-tags__inner {
  max-width: var(--container-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 24px);
}
.popular-tags__label {
  margin-bottom: 16px;
}
.popular-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.popular-tags__chip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.popular-tags__chip-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.popular-tags__chip-count {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.popular-tags__chip:hover .popular-tags__chip-count { color: var(--ink-2); }