/* Стили только для страницы каталога: активные фильтры, фильтры внутри
   заголовков таблицы (col-filter + filter-menu), таблица, бейджи статуса,
   плейсхолдер-аватар. */

/* Скрытая форма с hidden inputs не должна занимать gap в col-main flex —
   её существование чисто для HTMX-запроса, в layout не участвует. */
#filterForm { display: contents; }

/* ───── Шапка прайса (pagehead) ─────
   Структура совпадает с эталоном base-2.html: crumbs → title-row
   с h1, sku-pill, переключателем прайсов, spacer, кнопками
   «Экспорт» и «+ Создать подборку». */
.pagehead .title-row .spacer { flex: 1; }
.pagehead .ph-btn {
  height: 34px; padding: 0 12px; border-radius: 8px;
  font: inherit; font-weight: 500; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pagehead .ph-btn:hover:not(:disabled) { background: var(--bg-alt); }
.pagehead .ph-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.pagehead .ph-btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; padding: 0 14px;
}
.pagehead .ph-btn.primary:hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.pagehead .ph-btn-plus { font-size: 14px; line-height: 1; margin-top: -1px; }

/* R1 2026-05-18: контакты продавца под заголовком прайса. Алексей:
 * «добавь контактный email и телефон указанный при регистрации». */
.pagehead-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.pagehead-contact {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pagehead-contact:hover { text-decoration: underline; }

/* Переключатель прайс-листов в шапке каталога: тонкие inline-вкладки
   с подчёркиванием активной (по образцу .subnav-item.is-active). */
.pricelist-tabs {
  display: inline-flex; align-items: baseline; gap: 14px;
  margin-left: 12px; font-size: 13px;
}
.pricelist-tabs-label { color: var(--mute); font-size: 12px; }
.pricelist-tab {
  color: var(--mute); text-decoration: none;
  padding: 2px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pricelist-tab:hover { color: var(--ink); }
.pricelist-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Реферальная программа (2026-05-19): партнёрские прайсы — те которые
   primary admin tenant'а добавил в избранное. Видны в шапке каталога
   рядом со своими, помечены 🤝 и выделены тёплым акцентом. Клик ведёт
   в каталог хозяина прайса с автоматическим ?ref=<host_slug>. */
.pricelist-tabs-label--partner {
  color: #92400e;
  font-weight: 600;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.pricelist-tab--partner {
  color: #92400e;
  background: #fffbeb;
  padding: 2px 8px;
  border: 1px solid #fde68a;
  border-radius: 4px;
  border-bottom: 1px solid #fde68a;
}
.pricelist-tab--partner:hover {
  color: #78350f;
  background: #fef3c7;
  border-color: #f59e0b;
}
.pricelist-tab-tenant {
  color: var(--mute);
  font-weight: 400;
  font-size: 11px;
}

/* Прокручиваемый блок внутри дропдаунов колонок (используется в шапке
   «Категория» — список групп бывает длинным). */
.pop-scroll { max-height: 320px; overflow-y: auto; padding: 6px 0; }

/* ───── Полоса активных фильтров ─────
   Чипы применённых фильтров + счётчик «N / total». Полоса видна всегда —
   без активных фильтров фон становится прозрачным. */
.filter-active-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  transition: background 0.2s, border-color 0.2s;
}
.filter-active-bar.is-empty {
  background: transparent;
  border-bottom-color: transparent;
  padding: 8px 16px;
}
.filter-active-bar.is-empty .lbl { display: none; }
.filter-active-bar .lbl {
  font-size: 11px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.4px;
  font-weight: 600;
}
.filter-active-bar .filter-count {
  font-size: 12px; color: var(--mute);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.filter-active-bar .chip-active {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 8px 0 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
}
.filter-active-bar .chip-active b { font-weight: 600; margin-right: 2px; }
.filter-active-bar .chip-active .x {
  width: 16px; height: 16px;
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  transition: background 0.15s;
}
.filter-active-bar .chip-active .x:hover { background: rgba(67,56,202,0.18); }
.filter-active-bar .reset-all {
  background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--mute);
  cursor: pointer;
  border-bottom: 1px dashed var(--mute-soft);
  padding: 0 0 1px;
}
.filter-active-bar .reset-all:hover {
  color: var(--bad);
  border-bottom-color: var(--bad);
}

/* ───── Условия заказа по прайсу ───── */
.pricelist-conditions {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px; line-height: 1.5;
}
.pricelist-conditions-icon {
  flex: none;
  font-size: 15px;
  color: var(--accent);
  line-height: 1.4;
}
.pricelist-conditions-body b { color: var(--accent); font-weight: 600; }
.pricelist-tier-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 9px;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
  font-size: 12.5px;
}

/* ───── Таблица каталога ───── */
.tbl-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(10,14,26,0.04);
  overflow: visible;  /* критично — иначе filter-menu отрежется */
  position: relative;
}

/* Сообщение «комбинация фильтров не даёт строк». Рендерится в _rows.html
   как tr.catalog-empty-row при `not groups and selected.has_any`. */
.catalog-empty-row td {
  background: var(--bg-card);
  padding: 32px 24px;
  text-align: center;
}
.catalog-empty-msg {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto;
}
.tbl-card table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.tbl-card thead tr {
  border-bottom: 1px solid var(--border);
  height: 40px;
}
/* Background перенесён с tr на th — иначе border-radius на угловых
   th не покроется фоном (background tr не наследуется на th-уровне
   при скругленных углах). Нужно для замазки белых уголков
   .tbl-card в правом-верхнем / левом-верхнем углу скругления. */
.tbl-card th {
  position: relative;     /* для абсолютного filter-menu */
  padding: 0;
  background: var(--bg-subtle);
  font-size: 11.5px; font-weight: 600;
  color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.4px;
  user-select: none;
  text-align: left;
}
.tbl-card thead tr:first-child th:first-child { border-top-left-radius: 12px; }
.tbl-card thead tr:first-child th:last-child  { border-top-right-radius: 12px; }

/* Первая строка tbody — обычно group-header-row (серая полоса «Σ группы»).
   Без скругления её прямой угол вылезает за округлые углы .tbl-card
   (overflow:visible) — в правом-верхнем углу видно белый «уголок» поверх
   серой заливки. Скругляем td так же, как у thead на 145-146 строках. */
.tbl-card tbody tr:first-child td:first-child { border-top-left-radius: 12px; }
.tbl-card tbody tr:first-child td:last-child  { border-top-right-radius: 12px; }

/* Кнопка-заголовок: на всю ширину <th>, открывает выпадайку. */
.col-filter {
  display: flex; align-items: center; gap: 4px;
  width: 100%; height: 40px;
  padding: 0 12px;
  background: transparent; border: 0;
  font: inherit;
  font-size: 11.5px; font-weight: 600;
  color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.4px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.col-filter:hover { background: var(--bg-alt); color: var(--ink); }
.col-filter.active-sort { background: var(--bg-alt); color: var(--ink); }
.col-filter.active-filter { color: var(--accent); background: var(--accent-soft); }
.col-filter.menu-open { background: var(--bg-alt); }

/* Маркер интерактивности: пунктир под текстом заголовка. Длина
   подчёркивания = длина текста (text-decoration); цвет наследуется
   от .col-filter (серый в норме, индиго при active-filter). */
.col-filter-label {
  flex: 0 0 auto;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* C2.3e UX (2026-05-08): cart-шапка отцентрирована — степпер +/- в
   ячейках тоже центрирован через .stepper-wrap, текст «В корзину»
   садится ровно над кнопками. Только cart-th.
   ::before — симметричный invisible spacer слева, шириной gap(4)+caret(8)=12px.
   Без него блок [text + gap + caret] асимметричен, центр текста на 6px
   левее центра кнопки. */
.th-cart-right .col-filter { justify-content: center; }
.th-cart-right .col-filter::before {
  content: '';
  width: 12px;
  flex-shrink: 0;
}

/* Кнопка «Очистить корзину» в шапке столбца «В корзину» — рендерится
   только когда `is_b2b_approved and cart_qtys` (есть что чистить). Лежит
   слева внутри <th class="th-cart-right">, абсолютно позиционирована —
   не вмешивается в flex-layout col-filter, текст «В корзину» остаётся
   центрированным. z-index:2 над col-filter, чтобы клик ловился кнопкой,
   а не уходил popup'у. По клику — HTMX-POST на /cart/clear/ с confirm,
   view возвращает HX-Refresh → страница перезагружается со свежим
   состоянием (степперы → «+ В корзину», бейдж в шапке = 0). */
.th-cart-clear {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.th-cart-clear:hover {
  background: var(--bad-soft, #fee2e2);
  color: var(--bad, #dc2626);
}
.th-cart-clear svg { width: 14px; height: 14px; display: block; }

.col-filter .col-count {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-left: 2px;
}
.col-filter .sort-arrow {
  font-size: 12px; color: var(--accent); margin-left: 2px;
}
.col-filter .caret {
  width: 8px; height: 8px;
  flex-shrink: 0;
  margin-left: 2px;
  opacity: 0.5;
  transition: transform 0.15s, opacity 0.15s;
}
.col-filter:hover .caret,
.col-filter.menu-open .caret,
.col-filter.active-sort .caret,
.col-filter.active-filter .caret { opacity: 1; }
.col-filter.menu-open .caret { transform: rotate(180deg); }

/* Статичный заголовок без дропдауна (колонка «В корзину» — пока без фильтра) */
.th-static {
  display: flex; align-items: center;
  height: 40px; padding: 0 16px;
}

/* Дропдаун фильтра колонки */
.filter-menu {
  position: absolute;
  top: calc(100% + 1px); left: 0;
  min-width: 240px; max-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10,14,26,0.12);
  z-index: 25;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  display: none;
}
.filter-menu.open { display: block; }
.filter-menu.right-aligned { left: auto; right: 0; }

/* Меню «Параметры»: горизонтальный layout с 540-720px только когда секций ≥2
   (Растение + Услуга/Расходник). Если в прайсе только одна секция (например
   p9 — все товары растения), popup не должен раздуваться — берёт обычные
   240-320px. По умолчанию params-cols = block, flex включается через :has(). */
.filter-menu.params-menu:has(.filter-section + .filter-section) {
  min-width: 540px;
  max-width: 720px;
}
.filter-menu.params-menu:has(.filter-section + .filter-section) .params-cols {
  display: flex;
  align-items: stretch;
}
.params-cols > .filter-section {
  flex: 1; min-width: 160px;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}
.params-cols > .filter-section:last-child { border-right: 0; }
/* Сброс max-height/overflow от глобального .filter-section:has(input[type=checkbox])
   (специфичность 0,2,1 — нужна более высокая в нашем сбросе). Двойной скролл
   возникал когда оба правила накладывались: внешний на .filter-section (280px)
   и внутренний на .pop-scroll (320px). Скролл оставляем только на .pop-scroll. */
.filter-menu.params-menu .params-cols > .filter-section {
  max-height: none;
  overflow: visible;
}

/* Аккордеон-группа в дропдауне «Категория»: <details>/<summary> с
   кастомным маркером. Дочерние категории идут с отступом внутри. */
.filter-group { padding: 0; }
.filter-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 8px 14px 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mute-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s, background 0.15s;
}
.filter-group > summary:hover {
  color: var(--accent);
  background: var(--bg-alt);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::before {
  content: "▶";
  font-size: 12px;
  color: var(--accent);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.filter-group[open] > summary::before { transform: rotate(90deg); }
.filter-item--indent { padding-left: 28px; }
/* Категория «нет в наличии» — серым, но всё ещё кликабельной (продавец
   может специально выбрать). См. apps/catalog/views.py::_category_tree
   is_empty (n_total>0 && n_available=0). */
.filter-item--empty { opacity: 0.55; }
.filter-item--empty .label { color: var(--mute); }
.filter-group--empty > summary { color: var(--mute); font-style: italic; }
.filter-group--nested { margin-left: 16px; }

.filter-section {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.filter-section:last-child { border-bottom: 0; }
/* Длинные списки чекбоксов скроллятся, чтобы кнопка «Применить» в
   foot'е меню не уезжала за viewport. Sort-секции (без чекбоксов)
   остаются как есть — там 2-3 пункта. */
.filter-section:has(input[type="checkbox"]) {
  max-height: 280px;
  overflow-y: auto;
}
/* Если внутри секции уже есть .pop-scroll — он сам скроллится (320px).
   Без этого сброса было бы два скроллбара рядом: внешний у .filter-section
   и внутренний у .pop-scroll. Скролл оставляем ровно один — на .pop-scroll. */
.filter-menu .filter-section:has(.pop-scroll) {
  max-height: none;
  overflow: visible;
}

.filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.filter-item:hover { background: var(--bg-alt); color: var(--ink); }
.filter-item input[type="checkbox"] {
  margin: 0; accent-color: var(--accent); cursor: pointer;
}
.filter-item .label { flex: 1; }
.filter-item.sort-row.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 500;
}

.filter-group-title {
  padding: 8px 14px 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--mute-soft);
  text-transform: uppercase; letter-spacing: 0.4px;
  font-family: var(--font-mono);
}

/* Заголовок multi-select блока: подпись слева + иконки select-all/none справа. */
.filter-group-title-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-right: 8px;
}
.filter-group-title-row .filter-group-title { padding-right: 6px; }
.filter-group-actions { display: flex; gap: 2px; }
.filter-icon-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--mute-soft);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.filter-icon-btn:hover, .filter-icon-btn:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  outline: none;
}
.filter-icon-btn svg { width: 14px; height: 14px; display: block; }

.filter-input {
  width: 100%; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit; font-size: 12.5px;
  background: var(--bg-card); color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.filter-input:focus { border-color: var(--accent); }
.filter-search-wrap { padding: 8px 12px; }
.filter-range {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
}
.filter-range .filter-input { flex: 1; min-width: 0; }
.filter-range .sep { color: var(--mute-soft); font-size: 12px; }

.filter-foot {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}
.filter-foot button {
  flex: 1; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-foot button:hover {
  background: var(--bg-alt); border-color: var(--accent); color: var(--accent);
}
.filter-foot button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.filter-foot button.primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}

/* ───── Строки таблицы ───── */
.tbl-card tbody tr.data-row { height: 52px; }
/* Если у сорта несколько модификаций (rowspan>1 на cell-name) —
   первая строка чуть выше, чтобы аватар + 2 строки имени влезли
   без перетягивания. Эталон base-2.html:254. */
.tbl-card tbody tr.data-row.row-base.multi { height: 60px; }
/* Белый фон только на data-row td. Раньше был на `.tbl-card tbody td`,
   что специфичностью (0,1,2) перекрывало `.group-header-row td` (0,1,1)
   — заливка категорий теряла свой bg-subtle. */
.tbl-card tbody tr.data-row td { background: var(--bg-card); }

.row-base td { border-top: 1px solid var(--border); }
.row-cont td:not(.cell-name) { border-top: 1px dashed var(--border); }

.tbl-card td.cell-name {
  vertical-align: middle; padding: 0 14px;
  border-right: 1px solid var(--border);
}
.name-flex {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.name-text { min-width: 0; flex: 1; }
.sort-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Ширина колонок таблицы каталога — на <colgroup><col>, не на td.
   table-layout: fixed смотрит сначала на colgroup, потом на первую
   строку. У нас первая строка tbody — group-header-row с colspan=20,
   поэтому width на td.cell-* НЕ срабатывал. Через colgroup работает.
   Схема как в base-2.html:824-828 (32 / 14 / 14 / 12 / 12 / 8 / 8). */
.col-name { width: 32%; min-width: 280px; }
/* C2.3e hotfix: + min-width в px для всех col'ов. Сумма % может быть
   <100% (узкий прайс с 5 колонок) — тогда taлица c table-layout:fixed
   оставляет справа пустое место. Min-width должен вместить заголовок
   столбца в uppercase + иконки (caret + sort-arrow + count-badge
   ~50-70px суммарно). Если alias длиннее — нужен горизонтальный скролл. */
.col-category { width: 10%; min-width: 130px; }
.col-supplier { width: 10%; min-width: 140px; }
.col-code { width: 8%; min-width: 110px; }
.col-attr { width: 14%; min-width: 150px; }   /* alias обычно «Модификация»; длинный → таблица расширится со скроллом */
.col-price { width: 12%; min-width: 120px; }
.col-state { width: 14%; min-width: 220px; }  /* «ГОТОВНОСТЬ» + caret. Запас, чтобы текст не переливался через границу <th> на col-cart. */
.col-warehouse { width: 12%; min-width: 150px; }
.col-stock { width: 10%; min-width: 140px; }  /* «ДОСТУПНО» / «ОСТАТКИ» / «РЕЗЕРВ» */
.col-cart { width: 14%; min-width: 170px; }   /* «В КОРЗИНУ» + caret. Без flex-end — текст слева как у остальных. */

/* R1 (2026-05-18): когда сумма ширин <col> < 100% (Excel-прайс с 5
 * колонками = 86%), на table-layout:fixed остаются ~14% пустыми справа
 * от последней <th> — «дыра» в уголке между шапкой и группой
 * (Алексей: «не закрашенный фон в уголке»).
 *
 * Фикс: добавляем виртуальный spacer-столбец через ::after на tbody/thead.
 * Но проще — изменить дизайн `<col>` пропорций: при < 7 колонок (т.е.
 * у tbody меньше cell'ов чем дефолтный набор) увеличиваем col-name
 * чтобы он съел остаток.
 *
 * Используем :has() — браузеры Chrome 105+/Safari 15.4+/Firefox 121+
 * (тот же gate что и .lk-page--wide).
 *
 * Условие: если в colgroup ровно 5 col'ов — увеличиваем col-name. */
.tbl-card table:has(colgroup col:nth-child(5):last-child) col.col-name {
  width: 46% !important; /* было 32%, +14% spacer для 5-колонной таблицы */
}
.tbl-card table:has(colgroup col:nth-child(6):last-child) col.col-name {
  width: 36% !important; /* +4% spacer для 6-колонной (96% → 100%) */
}

td.cell-category { padding: 0 14px; font-size: 13px; }
td.cell-supplier { padding: 0 14px; font-size: 13px; }
td.cell-attr {
  padding: 0 14px; font-size: 12.5px; font-family: var(--font-mono); color: var(--ink-soft);
}
td.cell-code { padding: 0 14px; }
td.cell-code code { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }

td.cell-params {
  padding: 0 14px;
  font-size: 12.5px; color: var(--ink-soft);
  font-family: var(--font-mono);
}
td.cell-state {
  padding: 6px 14px;
  width: 14%;
  /* C2.3e hotfix: длинные warehouse-label'ы («Бронь для СЦ - для продажи»)
     раньше вылазили за пределы ячейки. Принудительный wrap в 2 строки. */
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  vertical-align: middle;
}
td.cell-warehouse {
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  vertical-align: middle;
}
td.cell-stock {
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px; color: var(--ink);
  /* CLAUDE.md «Каталог: ширина колонок» — % схема как в base-2 prototype. */
  width: 12%;
}
td.cell-stock.zero { color: var(--mute); }
td.cell-price {
  padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* CLAUDE.md «Каталог: ширина колонок» — % схема как в base-2 prototype. */
  width: 12%;
}
td.cell-price .vat-note {
  display: block;
  color: var(--mute); font-weight: 400; font-size: 11px;
  margin-top: 1px;
}
td.cell-price .price-pair {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  display: block;
}
/* Аноним: реальная оптовая цена остаётся в HTML, но визуально размыта —
 * читаемую цену видит только зарегистрированный покупатель. */
.price-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
td.cell-cart {
  text-align: center;
  padding: 0 14px;
  /* width согласован с <col class="col-cart"> в colgroup (14%) — раньше
   * был 16% и создавал рассогласование при table-layout:fixed. */
  width: 14%;
}

/* ───── Ячейка «В корзину» для не-оптовых посетителей ───── */
/* Аноним: ссылка на регистрацию (badge с accent-цветом, кликабельная). */
.cart-cell-register {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft, #eef2ff);
  color: var(--accent, #4338ca);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.cart-cell-register:hover {
  background: var(--accent, #4338ca);
  color: #fff;
  border-color: var(--accent, #4338ca);
}
/* Individual+pending: ghost-badge «Ожидайте» (некликабельный). */
.cart-cell-wait {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: default;
}
/* Site owner: «Залогиньтесь покупателем» — owner у себя не покупает
   (cart_update_view упадёт 403 — нет buyer-Company). 2026-05-20. */
.cart-cell-owner {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  cursor: help;
}

/* Мобильный аналог в .m-variant-row */
.m-cart-wait {
  align-self: center;
  padding: 6px 12px;
  border-radius: 7px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
}

/* ───── Степпер +/− в ячейке «В корзину» ───── */
.stepper-wrap { display: flex; justify-content: center; }
.stepper {
  display: inline-flex; align-items: center; gap: 0;
  height: 32px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-card); overflow: hidden;
}
.step-btn {
  width: 32px; height: 100%;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-btn:hover:not(:disabled) { background: var(--bg-alt); color: var(--accent); }
.step-btn:disabled { color: var(--mute); cursor: not-allowed; }
.step-qty {
  /* CLAUDE.md «Каталог: ширина числовых колонок» — под qty=99999
   * (5 цифр JetBrains Mono 12.5px + padding 6×2 + борды 1×2). */
  min-width: 52px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink); text-align: center;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  height: 100%; display: inline-flex; align-items: center; justify-content: center;
}
.step-add {
  height: 32px;
  min-width: 110px; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: 7px;
  background: var(--bg-card); color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* убрали margin-left: auto; */
  transition: background 0.15s, color 0.15s;
}
.step-add:hover { background: var(--accent); color: #fff; }
.step-add-plus { font-size: 16px; font-weight: 500; line-height: 1; margin-top: -1px; }
.step-add-label { white-space: nowrap; }
tr.row-soon .step-add,
tr.row-soon .stepper { opacity: 0.5; }

/* «Скоро будет» (stock=0) — приглушённая строка */
tr.row-soon td.cell-name .sort-name,
tr.row-soon td.cell-params,
tr.row-soon td.cell-price { color: var(--mute); }

/* ───── Бейдж статуса ───── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 500;
}
.badge .dot { width: 5px; height: 5px; border-radius: 3px; background: currentColor; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

/* ───── Аватар товара 56×56 ─────
   Базовая плашка-плейсхолдер — градиент по Product.photo_hue + инициалы.
   Если в МС загружено фото и cron `sync_moysklad --with-images` его
   подтянул — `product_avatar` templatetag отдаёт `<img class="ph-avatar
   ph-avatar--photo">` вместо `<div>`. Геометрия общая, фоновый градиент
   у `<img>` виден как «skeleton» пока картинка догружается. */
.ph-avatar {
  width: 56px; height: 56px; border-radius: 8px;
  flex-shrink: 0;
  background:
    linear-gradient(160deg,
      hsl(var(--hue, 220) 70% 92%) 0%,
      hsl(var(--hue, 220) 65% 80%) 100%);
  color: hsl(var(--hue, 220) 55% 28%);
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px; letter-spacing: -0.5px;
  font-family: var(--font-sans);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 2px rgba(10,14,26,0.06);
  user-select: none;
}

/* Реальное фото из МС: 112×112 ужатое в 56×56 (retina-ready).
   `object-fit: cover` обрезает до квадрата. Background оставляем как
   skeleton — пока картинка не загрузилась (lazy) или сломан src. */
.ph-avatar--photo {
  background: var(--surface, #f3f4f8);
  object-fit: cover;
  display: block;
}

/* ───── Шапки групп товаров (▼ Голубика · 5 сортов) ─────
   Структура: <tr class="group-header-row"><td colspan=20><div class="group-header-inner">...
   `display: flex` стоит на ВНУТРЕННЕМ div, не на td: flex на самом
   <td> ломает table-cell механику (td теряет растяжение по colspan,
   полоса не покрывает всю ширину строки). Эталон base-2 делает так
   же — `<td><div class="gh-inner">…</div></td>` (строка 1214).

   Параметры (height/padding/cursor/hover/border) выравнены под
   эталон base-2.html:216-238. */
.group-header-row td {
  padding: 0 16px; height: 40px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
  transition: background 0.12s;
}
.group-header-row td:hover { background: var(--bg-alt); }
.group-header-row:first-child td { border-top: 0; }
.group-header-inner {
  display: flex; align-items: center; gap: 10px;
  height: 100%;
}
.group-toggle {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 10px; color: var(--ink-soft);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.group-toggle.collapsed { transform: rotate(-90deg); }
.group-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.group-meta { font-size: 12px; color: var(--mute); }
.group-total {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ───── Пагинация / «Показать ещё» ───── */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 14px 0 24px; padding: 0 2px;
  font-size: 13px;
}
.pagination:empty { display: none; }
.load-more-btn {
  padding: 8px 20px;
  font-size: 13px; font-weight: 500;
  background: white; color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 8px; cursor: pointer;
  transition: background .12s, color .12s;
}
.load-more-btn:hover { background: var(--accent-soft, #eef2ff); }
.load-more-btn:disabled { opacity: .55; cursor: default; }
.pgn-done { color: var(--mute); font-size: 13px; }
.pagination .pgn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: inherit; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s;
}
.pagination a.pgn-btn:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.pagination .pgn-current {
  background: var(--accent); color: #fff;
  border-color: var(--accent); font-weight: 600; cursor: default;
}
.pagination .pgn-disabled {
  color: color-mix(in srgb, currentColor 35%, transparent);
  background: #fafafa; cursor: default;
}
.pagination .pgn-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 30px; color: color-mix(in srgb, currentColor 50%, transparent);
}
.pagination .pgn-info {
  margin-left: auto; color: color-mix(in srgb, currentColor 60%, transparent);
}