/* ════════════════════════════════════════════════════════════════════
   iter-06 (2026-06-04) — Catalog v2 port (универсальный шаблон каталога)
   Reference:
     Design_System1/New_Revision/design_handoff_catalog/prototype/components/components.css
     (секция «CATALOG LISTING module» от ~line 2234)
   Применяется к module=products через флаг $catalog_v2.
   ════════════════════════════════════════════════════════════════════ */

/* ─── iter-14 audit (2026-06-06): token fallback на catalog (--c-text-3 и
   --r-card определены только в product_v2.css → на каталоге undefined →
   fallback к inherit (text-1) и default radius. Force-define на :root. */
:root {
  --c-text-3: #8B95A1;
  --r-card: 12px;
}

/* ─── δ-A: каркас .cat-layout (грид 280 + 1fr) + .cat-main (правая колонка) ─── */

.cat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-5);              /* 24px */
  align-items: start;
  padding-block: var(--sp-5) var(--sp-8);  /* 24 / 64 */
}

.cat-main {
  min-width: 0;                  /* для текстов с overflow */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);              /* 16px */
}

/* Sidebar обёртка — single grid item в col 1 (audit-2 2026-06-05).
   Внутри: nav.hv2-cs (catalog tree) + sentinel + hv2-sidebar-brands.
   Стэкируются вертикально через flex. */
.cat-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);   /* Owner 2026-06-18 #2(r2): зазоры блоков сайдбара 16→8 */
}
/* brands-блок берём ИЗ homepage CSS (iter-04-homepage.css) — на module=products
   тоже включён. */

/* Sentinel #hv2-sidebar-end — теперь внутри .cat-sidebar wrapper (audit-2
   2026-06-05), не direct grid child. Не нужно прятать; IntersectionObserver
   в catalog-sidebar.js использует его для показа «Каталог товаров» button
   в шапке при scroll past sidebar. Делаем 0-высоты чтобы не давать gap. */
.cat-sidebar > #hv2-sidebar-end { height: 0; }

/* Responsive: <990px sidebar исчезает, single col */
@media (max-width: 990px) {
  .cat-layout {
    grid-template-columns: 1fr;
  }
  .cat-layout > .v2-sidebar,
  .cat-layout > .hv2-cs {
    display: none;
  }
}

/* ─── Listing title row ─── */
.cat-title { font-family: var(--ff-display); font-weight: 700; font-size: 30px; color: var(--c-text); margin: 0; }
.cat-title-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.cat-title-row__count { font: 400 14px/1 var(--ff-body); color: var(--c-text-3); }

/* ─── Toolbar (sort + view) ─── */
.hv2-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  margin-bottom: var(--sp-4);
}
.hv2-toolbar__count { font: 400 14px/1.3 var(--ff-body); color: var(--c-text-2); }
.hv2-toolbar__count strong { color: var(--c-text); font-weight: 700; }
/* «Найдено N» убрано (Owner 2026-06-27). Сортировка — ВЛЕВО на линию с 1-й
   колонкой фильтра («Подобрать матрас»/«Цена» = 341 = инсет тулбара 25px),
   переключатель Список/Плитка — справа. Контролы на всю ширину, space-between. */
.hv2-toolbar__controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; width: 100%; justify-content: space-between; }
.hv2-toolbar__sort {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-text-2); font: 400 13px/1 var(--ff-body);
}
.hv2-toolbar__sort > svg { color: var(--c-text-2); flex: none; }
.hv2-toolbar__sort-label { white-space: nowrap; }
.hv2-toolbar__sort select {
  /* iter-08 fix: min-width 170 чтобы «по популярности» полностью видно. */
  min-width: 170px;
  height: 40px; padding: 0 30px 0 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg);
  font: 600 13px/1 var(--ff-body); color: var(--c-text);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.hv2-toolbar__sort select:focus { outline: 2px solid var(--c-blue); border-color: var(--c-blue); }
.hv2-toolbar__view { display: inline-flex; gap: 4px; }
.hv2-toolbar__view button {
  width: 40px; height: 40px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg); color: var(--c-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.hv2-toolbar__view button:hover { color: var(--c-blue); border-color: var(--c-blue); }
.hv2-toolbar__view button.is-active { color: var(--c-blue); border-color: var(--c-blue); background: var(--c-blue-light); }

/* ════════════════════════════════════════════════════════════════════
   CATALOG CARD — list view (default) — port из handoff components.css §2249+
   ════════════════════════════════════════════════════════════════════ */
.cat-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.cat-card {
  /* iter-11 fix: legacy .product-row класс (добавлен как alias для sync) делает
     display:flex — override на grid !important чтобы layout не ломался. */
  display: grid !important;
  grid-template-columns: 200px 1fr 248px !important;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Media constrained to grid col 1 — fix legacy .product-row overflow */
.cat-card .cat-card__media { max-width: 200px; }
.cat-card:hover { border-color: var(--c-border); box-shadow: var(--sh-md); }

/* media — div-wrapper, 200px (grid col 1) × aspect-ratio 1/1 */
.cat-card__media {
  position: relative;
  align-self: start;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  overflow: hidden;
}
.cat-card__media-link {
  position: absolute; inset: 0;
  display: block;
  text-decoration: none;
}
.cat-card__media.has-photo { background: #fff; }
.cat-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  background: #fff;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* 2026-07-09: hover-листание всех картинок (card-flip.js): зоны по X курсора.
   --flip скрыты; активную JS помечает .is-show (и снимает с --main). */
.cat-card__img--flip { opacity: 0; }
.cat-card__media-link.is-flipping .cat-card__img { opacity: 0; }
.cat-card__media-link.is-flipping .cat-card__img.is-show { opacity: 1; }
.cat-card__flip-dots {
  position: absolute; left: 0; right: 0; bottom: 6px;
  display: none; justify-content: center; gap: 4px;
  pointer-events: none;
}
.cat-card__media-link.is-flipping .cat-card__flip-dots { display: flex; }
.cat-card__flip-dots i {
  width: 6px; height: 6px; border-radius: 999px;
  background: #c9d4de;
}
.cat-card__flip-dots i.is-on { background: var(--c-accent, #1b7fce); }
.cat-card__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--c-kaspi, #F14635); color: #fff;
  font: 700 12px/1 var(--ff-body);
  padding: 5px 9px; border-radius: var(--r-card);   /* 2026-06-26: чип скидки 12px */
  letter-spacing: .01em;
}
.cat-card__badge--tag {
  top: auto; bottom: 10px;
  background: var(--c-blue-dark, #0877A8); color: #fff;
  font-weight: 600;
}
.cat-card__acts {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.cat-card__acts > .compare-icon,
.cat-card__acts > .favorite-icon {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.92);
  color: var(--c-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
/* fill: none (было currentColor) — сердечко-path заливалось сплошным серым;
   контур красит stroke=currentColor (Owner 2026-08-10, вместе с PDP-фиксом) */
.cat-card__acts > .compare-icon svg,
.cat-card__acts > .favorite-icon svg { width: 16px; height: 16px; fill: none; }
.cat-card__acts > .compare-icon:hover,
.cat-card__acts > .favorite-icon:hover { color: var(--c-blue); border-color: var(--c-blue); }
/* iter-14 fix (2026-06-07 Owner bug #3): легаси ToggleCompProd/ToggleProdToWishlist
   тоглит class `.is-active` (utils.js:1640, 1706), не `.is-on`. Match'имся обоими.
   Compare-icon SVG = только <line> (stroke), favorite-icon = <path>; currentColor
   через stroke красит обе формы. Заливка circle оставлена tint оранжевым для
   доп. контраста. */
.cat-card__acts > .compare-icon.is-active,
.cat-card__acts > .compare-icon.is-on,
.cat-card__acts > .favorite-icon.is-active,
.cat-card__acts > .favorite-icon.is-on {
  color: var(--c-orange);
  border-color: var(--c-orange);
  background: var(--c-orange-tint, rgba(243, 96, 18, 0.12));
}
/* Heart filled: inline `fill="none"` отбиваем CSS-правилом */
.cat-card__acts > .favorite-icon.is-active svg,
.cat-card__acts > .favorite-icon.is-on svg { fill: currentColor; }

/* body */
.cat-card__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-card__brand { font: 600 11px/1 var(--ff-body); letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-3); }
.cat-card__title { font: 600 18px/1.3 var(--ff-body); color: var(--c-blue-dark, #0877A8); text-decoration: none; }
.cat-card__title:hover { color: var(--c-orange); }
.cat-card__rating { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; align-self: flex-start; }
.cat-card__rating-v { font: 700 13px/1 var(--ff-body); color: var(--c-text); }
.cat-card__rating-n { font: 400 13px/1 var(--ff-body); color: var(--c-text-3); }
.cat-card__rating:hover .cat-card__rating-n { color: var(--c-blue); text-decoration: underline; }
.cat-card__stars { display: inline-flex; gap: 1px; color: var(--c-border); }
.cat-card__stars svg { width: 14px; height: 14px; }
/* filled stars (rating > 0) — оранжевые; пустые — серые border-color. */
.cat-card__stars svg[fill="currentColor"] { color: var(--c-orange); }
.cat-card__desc {
  margin: 2px 0 0;
  font: 400 14px/1.5 var(--ff-body); color: var(--c-text-2);
  text-wrap: pretty;
  max-width: 56ch;
}

/* stats grid (4 cells with hairline separators) */
.cat-stats {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cat-stat {
  background: var(--c-bg-soft);
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 10px 14px;
  min-width: 0;
}
.cat-stat__label { margin: 0; font: 500 12px/1.2 var(--ff-body); color: var(--c-text-3); }
.cat-stat__value { margin: 0; font: 700 14px/1.25 var(--ff-body); color: var(--c-text); }
.cat-stat__value.is-nowrap { white-space: nowrap; }
.cat-stat__value sup { font-size: .66em; vertical-align: super; }
/* Two-sided hardness — отдельные строки Верх/Низ внутри одной ячейки */
.cat-stat__hard2 { display: flex; flex-direction: column; gap: 2px; font-weight: 400; }
.cat-stat__hard2 > span { display: flex; align-items: baseline; gap: 6px; }
.cat-stat__hard2 > span > span { font: 700 14px/1.25 var(--ff-body); color: var(--c-text); }
.cat-stat__side {
  flex: none; min-width: 28px;
  font: 500 11px/1.2 var(--ff-body); color: var(--c-text-3);
}

/* rail (right column) */
.cat-card__rail {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-border-soft);
}
.cat-card__priceblock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cat-card__price { font-family: var(--ff-display); font-weight: 700; font-size: 26px; color: var(--c-text); line-height: 1; }
.cat-card__pricesub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cat-card__old { font: 400 14px/1 var(--ff-body); color: var(--c-text-3); text-decoration: line-through; }
.cat-card__save { font: 600 13px/1 var(--ff-body); color: var(--c-success, #2E8B57); white-space: nowrap; }

/* Kaspi installment line */
.cat-card__kaspi {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-end;
  font: 400 13px/1.2 var(--ff-body); color: var(--c-text-2);
}
.cat-card__kaspi b { font-weight: 700; color: var(--c-text); }
.cat-card__kaspi-logo {
  /* iter-08 fix: was 16px tall — слишком мелкая. Match product page style. */
  width: 28px; height: 28px;
  flex: none;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

/* size selector */
.cat-size { width: 100%; }
.cat-size__label { display: block; font: 400 11px/1 var(--ff-body); color: var(--c-text-3); margin-bottom: 4px; }
.cat-size__select {
  width: 100%; height: 40px; padding: 0 32px 0 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg);
  font: 500 14px/1 var(--ff-body); color: var(--c-text);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  box-sizing: border-box;
}
.cat-size__select:focus { outline: 2px solid var(--c-blue); border-color: var(--c-blue); }

/* buy + phone row */
.cat-card__buyrow { display: flex; gap: 8px; width: 100%; }
.cat-card__buy {
  flex: 1; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-card);   /* 2026-06-26: 12px (единая система скруглений) */
  background: var(--c-orange); color: #fff;
  font: 600 15px/1 var(--ff-body); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-card__buy:hover { background: var(--c-orange-dk, #d96f2a); }
.cat-card__phone {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-blue); border-radius: var(--r-card);
  background: var(--c-blue-light); color: var(--c-blue);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-card__phone:hover { background: var(--c-blue); color: #fff; }

/* stock indicator */
.cat-card__stock {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 13px/1.2 var(--ff-body); color: var(--c-text-2);
}
.cat-card__stock svg { color: var(--c-success, #2E8B57); flex: none; }

/* Защита от styles_modern.css inline-формы и пр.: возвращаем form в block */
.cat-card form.cat-card__rail { display: flex; }
.cat-card .delivery-info-product { display: none; }

/* ── "Показать ещё" ── */
.cat-more-wrap { display: flex; justify-content: center; padding-top: var(--sp-3); }
.cat-more {
  height: 48px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--r-card);
  background: var(--c-orange); color: #fff;
  font: 600 15px/1 var(--ff-body); cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-more:hover { background: var(--c-orange-dk, #d96f2a); }

/* Responsive list collapse */
@media (max-width: 860px) {
  .cat-card { grid-template-columns: 140px 1fr; }
  .cat-card__rail {
    grid-column: 1 / -1;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-border-soft); padding-top: var(--sp-3);
    align-items: stretch;
  }
  .cat-card__priceblock { align-items: flex-start; }
}
@media (max-width: 480px) {
  .cat-card { grid-template-columns: 1fr; }
}

/* ═══ Audit-6 (2026-06-05): legacy elements skinned to hv2 ═══ */

/* 2.1 (#54): крошки + H1 категории — выровнять ВПРАВО на линию с 1-й колонкой
   фильтра («Подобрать матрас»/«Цена» = 341px). cat-main начинается на 316px,
   карточка фильтра имеет 25px инсет → контент на 341. Сдвигаем крошки и
   .cat-title-row на те же 25px (padding-left, бокс не двигаем). */
.catalog-v2-band .cat-main .bread-crumbs,
.catalog-v2-band .cat-title-row { padding-left: 25px; }

/* ─── Breadcrumbs ─── */
.cat-main .bread-crumbs,
.catalog-v2-band .bread-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0 0 var(--sp-3);
  list-style: none;
  font: 400 13px/1.4 var(--ff-body);
  color: var(--c-text-3);
}
.cat-main .bread-crumbs li,
.catalog-v2-band .bread-crumbs li {
  display: inline-flex;
  align-items: center;
  list-style: none;
}
/* Legacy markup рендерит <li>/</li> отдельным separator-элементом (.bc-sep;
   2026-07-10 микроразметка удалена, классы вместо [itemprop]) —
   hide и используем ::after на real items (.bc-item) вместо. */
.cat-main .bread-crumbs > li.bc-sep,
.catalog-v2-band .bread-crumbs > li.bc-sep {
  display: none;
}
.cat-main .bread-crumbs > li.bc-item:not(:last-child)::after,
.catalog-v2-band .bread-crumbs > li.bc-item:not(:last-child)::after {
  /* 2026-07-22: '›' как у PDP (после перехода на классы 2026-07-10 тут
     остался '/'; itemprop-дубль правила ниже удалён — мёртвый селектор) */
  content: '\203A';
  margin-left: 6px;
  color: var(--c-text-3);
  opacity: 1;
}
.cat-main .bread-crumbs a,
.catalog-v2-band .bread-crumbs a {
  color: var(--c-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.cat-main .bread-crumbs a:hover,
.catalog-v2-band .bread-crumbs a:hover { color: var(--c-orange); }
.cat-main .bread-crumbs span,
.catalog-v2-band .bread-crumbs span { color: var(--c-text-2); }

/* Owner 2026-06-18 #1: контейнер хлебных крошек — БЕЗ рамки/фона, без лишних
   отступов; крошки по сетке (левый край = grid, верх = уровень «Каталога» сайдбара).
   #1.1 рамка убрана, #1.2 padding 0, #1.3 H1 сразу под крошками. */
.cat-main > .headless-center-block {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
  /* Owner 2026-06-18 #1: крошки на уровне «КАТАЛОГ ТОВАРОВ» сайдбара (у него
     head-padding ~16 сверху) — сдвигаем контент-колонку вниз на sp-4, тогда
     крошки↔Каталог и фильтр↔«Цена» (пункт меню) совпадают по сетке. */
  margin: var(--sp-4) 0 0 !important;
}
/* H1-строка категории наверху. Owner 2026-06-19: H1 центрируем напротив
   «Взрослые матрасы», верх фильтра — на линии пункта «Цена». .cat-title чистим
   от legacy padding/line-height (был 10px + lh 37.5 → коробка 58px, съезжала). */
.cat-main .cat-title { padding: 0; margin: 0; line-height: 1.2; }
.cat-main > .cat-title-row { margin: 0 0 23px; }  /* «Подобрать матрас» ровно напротив пункта «Цена» */
/* Owner 2026-06-29: SEO-описание категории — ПОД H1 (порядок крошки→H1→SEO).
   Выравнено по левому краю H1 (padding-left 25 как cat-title-row); H1 над ним
   с небольшим зазором, SEO — отступ до фильтра. */
.cat-main > .cat-title-row:has(+ .cat-descr) { margin-bottom: 0; }
/* SEO-описание под H1 — по центру на линии пункта «Все (N)» левого меню
   (Owner 2026-06-29): margin-top подтягивает строку до центра «Все».
   Owner 2026-08-13: блок на всю ширину контент-колонки (как фильтр ниже) —
   max-width 80ch убран, правый край ровняется с «Подобрать матрас». */
.catalog-v2-band .cat-descr {
  padding-left: 25px;
  margin: -6px 0 23px;
  color: var(--c-text-2);
  line-height: 1.5;
}
/* Owner 2026-06-18 #3: меньше зазор фильтр → тулбар «Найдено N» (был 48). */
.cat-main .v2-filter { margin-bottom: var(--sp-3); }

/* ─── Article inserts (.cat_article.bg1/bg2/bg3) ───
   Owner ask preserved: inline articles between cards (vanilla не имеет, но
   нужно). Background image из inline style="background-image: url(...)"
   сохранён — добавляем брэндовый blue gradient overlay (токены c-blue +
   c-blue-dark из дизайн-системы) для читаемости белого текста; справа
   gradient fade'ит до прозрачности — bg-image «проглядывает» (как legacy). */
.cat-main .cat_article {
  grid-column: 1/-1;
  position: relative;
  background-color: var(--c-blue);
  background-size: cover;
  background-position: center;
  border-radius: var(--r-card);
  overflow: hidden;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-2) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* Brand blue overlay — solid c-blue-dark слева → fade до прозрачного c-blue
   справа. Использует design-system токены (Owner: «у нас есть библиотека
   дизайн системы с цветовой схемой сайта»). */
.cat-main .cat_article::before {
  content: '';
  position: absolute; inset: 0;
  /* Solid c-blue-dark слева ~30% ширины, дальше плавный fade до прозрачного
     к правому краю — bg-image «проглядывает» (как legacy ref) */
  background: linear-gradient(
    90deg,
    var(--c-blue-dark) 0%,
    var(--c-blue-dark) 28%,
    rgba(14, 148, 200, .55) 65%,
    rgba(14, 148, 200, .12) 100%
  );
  pointer-events: none;
}
.cat-main .cat_article:hover {
  box-shadow: var(--sh-md);
}
/* Inner content поверх overlay */
.cat-main .cat_article > div,
.cat-main .cat_article > a {
  position: relative; z-index: 1;
}
.cat-main .cat_article .h {
  font: 700 18px/1.3 var(--ff-display);
  color: #fff;
  margin: 0 0 6px;
}
.cat-main .cat_article .descr {
  font: 400 14px/1.5 var(--ff-body);
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 56ch;
}
.cat-main .cat_article > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font: 600 13px/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-main .cat_article > a:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}
.cat-main .cat_article > a span::after {
  content: ' →';
}

/* ─── .hv2-pager — pagination v2 ───
   Port из handoff blocks.jsx Pagination + components.css §2041-2068. */
.hv2-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding-block: var(--sp-6);
  list-style: none;
  margin: 0;
}
.hv2-pager__num,
.hv2-pager__arrow {
  min-width: 40px; height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text);
  font: 600 14px/1 var(--ff-body);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  box-sizing: border-box;
}
.hv2-pager__num:hover:not(.is-active),
.hv2-pager__arrow:hover:not(:disabled) { border-color: var(--c-blue); color: var(--c-blue); }
.hv2-pager__num.is-active {
  background: var(--c-blue-light);
  border-color: var(--c-blue);
  color: var(--c-blue);
  cursor: default;
}
.hv2-pager__arrow:disabled { opacity: .4; cursor: not-allowed; }
.hv2-pager__gap { min-width: 24px; text-align: center; color: var(--c-text-3); }

/* iter-06 audit-3 (2026-06-05): legacy «Есть вопросы? Звоните - звонок
   бесплатный» блок (.tilda_questions) внутри category seo_text/descr —
   дублирует hv2-contact ниже. Прячем визуально (SEO-content остаётся в HTML).
   catalog_v2.css грузится только на module=products, поэтому селектор global
   действует только в каталоге. */
.tilda_questions { display: none; }

/* Audit-4 (2026-06-05): после скрытия .tilda_questions остался пустой
   wrapper .headless-center-block.prod-list-page (Owner: «пустой элемент
   после легаси блока»). Этот wrapper рендерится в products.html part=2 для
   category seo_text. Прячем wrapper, кроме footer-categories-by-size
   (этот другой — seo_sizes блок, нужен).
   Внешний v2-band wrapper убран в index.html — part=2 рендерится без него.
   Owner может удалить tilda HTML из category seo_text через админ-панель
   позже — тогда категория сможет показать честный seo_text без дубля. */
.headless-center-block.prod-list-page:not(.footer-categories-by-size) {
  display: none;
}

/* Hide legacy elements which our v2 layout replaces, чтобы избежать
   двойного рендера на /matrasy/. */
.catalog-v2-band .headless-center-block h1.title,
.catalog-v2-band .headless-center-block h3.title,
.cat-main .sort-bar,
.cat-main .center-block-filter > .center-block-header,
.cat-main #p_list_id.products-list {
  /* products-list wrapper остаётся, но визуально как cat-list */
}
.cat-main #p_list_id.products-list { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Legacy-заголовок в headless-center-block прячем — настоящий H1 категории
   (.cat-title-row) рендерится наверху, сразу после хлебных крошек (см.
   products.html). 2026-07-28 SEO-аудит: он теперь div.title (h1_as_div),
   селектор покрывает оба варианта. */
.catalog-v2-band .headless-center-block h1.title,
.catalog-v2-band .headless-center-block div.title { display: none; }

/* ════════════════════════════════════════════════════════════════════
   iter-14 audit (2026-06-06) — design-system overrides против legacy
   specificity. Получены через Playwright audit (catalog-full-audit
   test.js) — 7 точных diff-ов от прототипа.
   ════════════════════════════════════════════════════════════════════ */

/* #1: count + stat label color — token --c-text-3 теперь определён на :root
   (см. top of file), эти rules заодно покрывают legacy наследование. */
.cat-title-row__count { color: var(--c-text-3); }
.cat-stat__label      { color: var(--c-text-3); }

/* #2: .cat-card title — легаси селектор (вероятно .product-row a из
   styles.css) ставит inherit-blue. Принудительно blue-dark с повышенной
   специфичностью. Hover остаётся orange (уже определён ниже). */
.cat-card a.cat-card__title          { color: var(--c-blue-dark, #0877A8); }
.cat-card a.cat-card__title:hover    { color: var(--c-orange); }

/* #3: stat value font-weight 700 — `font:` shorthand в строке 220 не
   применил weight из-за наследования. Longhand гарантирует 700. */
.cat-stat__value { font-weight: 700; }

/* #4: .cat-card__buy bg — легаси `.button.buy { background: #F05418 }`
   (styles.css:11175) бьёт по специфичности 0-2-0 vs 0-1-0. Match'имся
   тремя классами 0-3-0 и принудительно сбрасываем border + shadow.
   Радиус pill (999px) тоже нужен с повышенной специфичностью —
   `.button` rule ставит 4px. */
.cat-card__buy.button.buy        { background: var(--c-orange); border: 0; box-shadow: none; border-radius: var(--r-card); }
.cat-card__buy.button.buy:hover  { background: var(--c-orange-dk, #D95208); border: 0; }

/* #5: .cat-card padding + border-radius — легаси `.products-list .product-row`
   (styles.css:14278) специфичность 0-2-0 vs `.cat-card` 0-1-0. Match'имся
   `.cat-card.product-row` (0-2-0 в нашу пользу за счёт каскада). */
.cat-card.product-row {
  padding: var(--sp-4);
  border-radius: var(--r-card);
}
/* Padding bumped up: styles_modern.css:848 имеет
   `.products-list:not(.wishlist) .product-row { padding: 16px 20px 16px 0 }`
   спецификой 0-3-0. Match'им по 0-3-0 ради каскада. */
.products-list:not(.wishlist) .cat-card.product-row {
  padding: var(--sp-4);
}

/* ════════════════════════════════════════════════════
   1 / 2 / 2.1 (Owner 2026-06-26) — выравнивание сетки каталога с фильтром.
   Фильтр .v2-filter-compact-grid: 4 кол × 1fr, gap 24px, инсет 25px от края
   карты (341–1383 @1440). Строку-товар приводим к ТОЙ ЖЕ сетке:
     media → col1 (как «Цена»), body → col2-3 (как «Высота»/«Жёсткость»),
     rail (цена/купить) → col4 (как «Конструкция»/«Тип пружин»), дотянут вправо.
   Тулбар «Найдено»/сортировка — те же края 341–1383. ════════════ */
.catalog-v2-band .products-list:not(.wishlist) .cat-card.product-row {
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: var(--sp-5) !important; /* 24px — как gap фильтра */
  padding-left: 25px;
  padding-right: 25px;
}
/* ФИКС (2026-06-27): раскладка media/body/rail по 4-колоночному каталожному
   гриду ДОЛЖНА быть ограничена `.products-list` (как строка 634 выше). Без этого
   она протекала на ГЛАВНУЮ (лидеры/скидки — у них `.catalog-v2-band` +
   `.cat-card.product-row`, но НЕТ `.products-list`), ломая вертикальную карточку
   (.hv2-leaders/.hv2-discounted .cat-card{1fr}) — медиа-колонка схлопывалась в 0,
   картинка пропадала. Pre-existing с batch 2026-06-26; обнажилось при сбросе кэша. */
.catalog-v2-band .products-list .cat-card.product-row .cat-card__media { grid-column: 1; }
.catalog-v2-band .products-list .cat-card.product-row .cat-card__body  { grid-column: 2 / 4; }
.catalog-v2-band .products-list .cat-card.product-row .cat-card__rail  { grid-column: 4; }
.catalog-v2-band .hv2-toolbar { padding-left: 25px; padding-right: 25px; }

/* #6: .cat-card__buy radius — styles_modern.css:908 ставит
   `border-radius: var(--r-md) !important` (=10px) на `.button.buy`.
   2026-06-26: единая система скруглений → 12px (--r-card). */
.cat-card__buy.button.buy { border-radius: var(--r-card) !important; }

/* ════════════════════════════════════════════════════════════════════
   catalog iter-01 (2026-06-11) — desktop redesign
   ────────────────────────────────────────────────────────────────────
   Codex baseline FAIL → catalog grid 280→260, content 832→852, новая
   product-card геометрия 152/1fr/168, softer specs, future-ready
   description slot, WhatsApp consultation link, видимый list/grid
   view toggle.

   Сохраняем JS hooks (RuntimeSearchNew, AdvancedSearch, ProdOptionChanged,
   CartBox.addProduct, ToggleCompProd, ToggleProdToWishlist), не трогаем
   .products-list class и filter AJAX.

   Все правила scoped через `.catalog-v2-band` или конкретный .cat-* класс
   чтобы catalog rules не утекли на homepage/product.
   ──────────────────────────────────────────────────────────────────── */

/* ─── (1) Catalog grid 260 + 24 + content fluid ─── */
.catalog-v2-band .cat-layout {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: var(--sp-5);   /* 24 */
}

/* ─── (2) Toolbar — system block, view toggle visible ─── */
.catalog-v2-band .hv2-toolbar {
  min-height: 52px;
  padding: 12px 25px; /* 1 (Owner 2026-06-26): h-инсет 25px = краям фильтра (341–1383) */
  margin-bottom: var(--sp-4);
}
/* 2.2 (#55): переключатель Список/Плитка — без рамок/боксов: только текст+иконка,
   активный пункт = синий цвет (без подложки/бордера/тени). */
.catalog-v2-band .hv2-toolbar__view {
  display: inline-flex !important;
  gap: var(--sp-4);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.catalog-v2-band .hv2-toolbar__view button {
  width: auto;
  height: 32px;
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-text-2);
  font: 600 12px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
.catalog-v2-band .hv2-toolbar__view button svg {
  width: 16px; height: 16px;
}
.catalog-v2-band .hv2-toolbar__view button:hover {
  background: transparent;
  border: 0;
  color: var(--c-blue);
}
.catalog-v2-band .hv2-toolbar__view button.is-active {
  background: transparent;
  border: 0;
  color: var(--c-blue);
  box-shadow: none;
}
.catalog-v2-band .hv2-toolbar__view button .v2-toolbar-view-label {
  font: 600 12px/1 var(--ff-body);
}

/* ─── (3) Product card — list view, geometry 152/1fr/168 ─── */
.catalog-v2-band .products-list .cat-card,
.catalog-v2-band .products-list.catalog-view--list .cat-card {
  /* Owner 2026-06-19 #1.1: фото-колонка ТЕКУЧАЯ = правый край картинки совпадает
     с правой границей 1-й колонки фильтра («Цена») на ЛЮБОЙ ширине. Колонки
     фильтра = 4×1fr; фото = 25% контент-колонки − 12px (учёт разницы padding
     карточки 16 vs фильтра 24). Проверено @1200/1440/1920 (±1px). */
  grid-template-columns: calc(25% - 14px) minmax(0, 1fr) 168px !important;
  gap: var(--sp-4);
  padding: var(--sp-4);
  min-height: 184px;
  box-shadow: none;
}
.catalog-v2-band .products-list .cat-card:hover {
  border-color: var(--c-border);
  box-shadow: var(--sh-sm);
}
/* Media column — 252 wide (правый край = граница колонки «Цена» фильтра),
   слот выше; картинка заполняет медиа без внутреннего padding (Owner 2026-06-19
   #1.1: «ещё увеличить, чётко по границе сетки»). align-self:start — у верха. */
.catalog-v2-band .cat-card .cat-card__media {
  max-width: none;
  aspect-ratio: auto;
  height: 200px;
  align-self: start;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  padding: 0;
}
.catalog-v2-band .cat-card .cat-card__media.has-photo { background: #fff; }
.catalog-v2-band .cat-card__img {
  inset: 0;
  width: 100%;
  height: 100%;
}
.catalog-v2-band .cat-card__media-link { inset: 0; }

/* Owner 2026-06-19 #1.2: бренд/заголовок/звёзды/отзывы — всегда у ВЕРХНЕЙ границы
   (раньше body центрировался). Body тянется на всю высоту карточки (stretch),
   верхняя группа сверху (justify flex-start), а характеристики (.cat-stats
   margin-top:auto) — всегда у НИЖНЕЙ границы. */
.catalog-v2-band .cat-card .cat-card__body {
  align-self: stretch;
  justify-content: flex-start;
}

/* ─── (4) Future-ready description slot ─── */
.catalog-v2-band .cat-card__desc {
  margin: 4px 0 0;
  font: 400 13px/1.45 var(--ff-body);
  color: var(--c-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 56ch;
}
.catalog-v2-band .cat-card__desc:empty { display: none; }

/* ─── (5) Softer specs — убираем тяжёлую таблицу ─── */
.catalog-v2-band .cat-card .cat-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-border-soft);
  border-radius: 0;
  padding: 10px 0 0;
  margin-top: auto;
  overflow: visible;
}
.catalog-v2-band .cat-card .cat-stat {
  background: transparent !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 3.3 (Owner 2026-06-26): выравнивание по верху — лейблы/первые значения всех
     характеристик на одной линии, даже когда Жёсткость двусторонняя (Верх/Низ
     делает ячейку выше). Без этого justify-center центрировал короткие ячейки. */
  justify-content: flex-start;
}
.catalog-v2-band .cat-card .cat-stat__label {
  font: 500 11px/1.2 var(--ff-body);
  color: var(--c-text-3);
}
.catalog-v2-band .cat-card .cat-stat__value {
  font: 500 13px/1.25 var(--ff-body);
  color: var(--c-text);
}
.catalog-v2-band .cat-card .cat-stat__hard2 > span > span {
  font: 500 13px/1.25 var(--ff-body);
}

/* ─── (6) Action rail — без border-left, узкая колонка ─── */
.catalog-v2-band .cat-card__rail {
  padding-left: 0;
  border-left: 0;
  gap: 10px;
}
.catalog-v2-band .cat-card__price { font-size: 22px; line-height: 1.05; }
.catalog-v2-band .cat-card__buyrow {
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.catalog-v2-band .cat-card__buy {
  width: 100%;
  height: 40px;
  font: 600 14px/1 var(--ff-body);
}
/* hide phone button: replaced by WhatsApp link */
.catalog-v2-band .cat-card .cat-card__phone {
  display: none !important;
}

/* (7) WhatsApp-ссылка в карточке убрана Owner 2026-07-28 (спам-паттерн) */

/* Size dropdown — 36px, radius 8 */
.catalog-v2-band .cat-size__select {
  height: 36px;
  border-radius: var(--r-md);
  font: 500 13px/1 var(--ff-body);
}
.catalog-v2-band .cat-size__label { font-size: 11px; }

/* Stock indicator — subtle, тоньше */
.catalog-v2-band .cat-card__stock {
  font: 400 12px/1.2 var(--ff-body);
  color: var(--c-text-3);
  margin-top: 2px;
}

/* ─── (8) Grid view — 3 columns ───
   .catalog-view--grid class на .products-list. Карточка переключается
   на vertical layout: media сверху, body, action — внизу. */
.catalog-v2-band .products-list.catalog-view--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
/* Плитка: карточка перестраивается в ОДНУ колонку (media/body/rail — стопкой).
   `.product-row` в селекторе поднимает специфичность до (0,5,0), чтобы побить
   list-раскладку `repeat(4,1fr)` (строка ~647, тоже (0,5,0) + !important) —
   при равной специфичности выигрывает это правило как более позднее в файле. */
.catalog-v2-band .products-list.catalog-view--grid .cat-card.product-row {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto;
  gap: 12px;
  min-height: 0;
}
/* Дети list-раскладки прибиты к колонкам 1 / 2-3 / 4 (строки ~659-661). В плитке
   (1 колонка) их надо вернуть в единственную колонку, иначе body/rail уезжают. */
.catalog-v2-band .products-list.catalog-view--grid .cat-card.product-row .cat-card__media,
.catalog-v2-band .products-list.catalog-view--grid .cat-card.product-row .cat-card__body,
.catalog-v2-band .products-list.catalog-view--grid .cat-card.product-row .cat-card__rail {
  grid-column: 1 !important;
}
/* Краткое описание — только в списочном виде: в узкой плитке место экономим. */
.catalog-v2-band .products-list.catalog-view--grid .cat-card__desc { display: none; }
.catalog-v2-band .products-list.catalog-view--grid .cat-card__media {
  max-width: none;
  width: 100%;
  height: 180px;
  padding: 12px;
}
.catalog-v2-band .products-list.catalog-view--grid .cat-card__rail {
  align-items: stretch;
  padding-left: 0;
  border-left: 0;
}
.catalog-v2-band .products-list.catalog-view--grid .cat-card__priceblock {
  align-items: flex-start;
}
.catalog-v2-band .products-list.catalog-view--grid .cat-card__pricesub {
  justify-content: flex-start;
}
.catalog-v2-band .products-list.catalog-view--grid .cat-card__kaspi {
  align-self: flex-start;
}
.catalog-v2-band .products-list.catalog-view--grid .cat-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 4-col на широких viewport'ах */
@media (min-width: 1440px) {
  .catalog-v2-band .products-list.catalog-view--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1700px) {
  .catalog-v2-band .products-list.catalog-view--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ════════════════════════════════════════════════════════════════════
   catalog iter-01.1 (2026-06-11) — view toggle specificity fix
   ────────────────────────────────────────────────────────────────────
   Codex re-audit VIEW TOGGLE STATUS: FAIL.
   Класс `.catalog-view--grid` ставился JS, localStorage обновлялся,
   но реальный layout оставался flex column → одна full-width card,
   не плитка.

   Причина — specificity battle:
   - legacy (выше в этом файле):
       `.cat-main #p_list_id.products-list { display: flex }`
       specificity (1,2,0)
   - iter-01:
       `.catalog-v2-band .products-list.catalog-view--grid { display: grid }`
       specificity (0,3,0)
   → legacy выигрывал, display оставался `flex`.

   Fix — поднять specificity до (1,4,0), оставаясь scoped в каталог:
       `.catalog-v2-band .cat-main #p_list_id.products-list.catalog-view--{list,grid}`

   Это перебивает legacy без широких `!important` и не задевает hooks
   на других страницах.
   ──────────────────────────────────────────────────────────────────── */
.catalog-v2-band .cat-main #p_list_id.products-list.catalog-view--list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.catalog-v2-band .cat-main #p_list_id.products-list.catalog-view--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  /* catalog iter-01.2 (2026-06-11): `.cat_article` (full-width banner
     между товарами) имеет `grid-column: 1/-1`. Если перед ним в строке
     не хватает карточек до конца ряда, остаётся пустая ячейка («3 вместо
     4»). `grid-auto-flow: dense` разрешает последующим карточкам залить
     эти дыры — auto-placement подбирает их в empty slots. */
  grid-auto-flow: dense;
}

/* 4-col на широких viewport'ах — повторно зеркалим iter-01 правила,
   но в верной specificity сабкласс'ом. */
@media (min-width: 1440px) {
  .catalog-v2-band .cat-main #p_list_id.products-list.catalog-view--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ════════════════════════════════════════════════════════════════════
   catalog iter-01.3 (2026-06-11) — breadcrumbs unified with PDP iter-01
   ────────────────────────────────────────────────────────────────────
   Owner: «крошки сейчас не одинаковы по стилю с каталогом» — PDP сделал
   system block (56h / r12 / 1px border / padding 0 16), а catalog
   оставался flat-text. Поднимаем catalog .bread-crumbs в тот же system
   block. Separator меняем с `/` на `›` (как у PDP).

   Scoped через `.catalog-v2-band` и `.cat-main` — domain catalog, не
   утечёт на product/homepage.
   ──────────────────────────────────────────────────────────────────── */
/* Owner 2026-06-18 #1: крошки — flat-text, БЕЗ рамки/фона/карточки и без
   min-height (была «система-блок» 56h/border/r12 — давала пустую коробку).
   Выровнены по сетке (padding-left 0 → начало на левом крае контент-колонки). */
.cat-main .bread-crumbs,
.catalog-v2-band .bread-crumbs {
  min-height: 0;
  padding: 0;
  margin: 0 0 var(--sp-2);
  background: none;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  font: 400 13px/1.4 var(--ff-body);
  color: var(--c-text-2);
}
/* Owner 2026-06-11: «Главная в крошках заменить на icon-домик как в карточке».
   PDP уже рендерит home-svg в HTML — в catalog «Главная» текстом. Заменяем
   CSS-only: visually-hide <span itemprop="name">Главная</span> у первого
   <li>, рисуем такой же 16×16 home-icon (line-style, stroke c-text-2) через
   ::before background-image. Schema.org name остаётся доступен для SEO. */
.cat-main .bread-crumbs > li:first-child a,
.catalog-v2-band .bread-crumbs > li:first-child a {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.cat-main .bread-crumbs > li:first-child a > span,
.catalog-v2-band .bread-crumbs > li:first-child a > span {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}
.cat-main .bread-crumbs > li:first-child a::before,
.catalog-v2-band .bread-crumbs > li:first-child a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cat-main .bread-crumbs > li:first-child a:hover::before,
.catalog-v2-band .bread-crumbs > li:first-child a:hover::before {
  /* Hover: то же подкрашивание как другие links — orange tint через
     background-image swap (--c-orange #F36012). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F36012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}

/* ════════════════════════════════════════════════════════════════════
   catalog iter-01.5 (2026-06-11) — rail align left
   ────────────────────────────────────────────────────────────────────
   Owner: «почему в каталоге цена выровнена по правому краю. Должно быть
   как и другие элементы по левому краю».

   Base rules (catalog_v2.css строки 254-262, 320-324) ставят
   `align-items: flex-end` на `.cat-card__rail / __priceblock / __kaspi
   / __stock` и `justify-content: flex-end` на `.cat-card__pricesub`.
   Из-за этого цена, старая цена, «Выгода», Kaspi, «В наличии» прижаты
   к правому краю action-колонки, тогда как size dropdown / buy / WA —
   full-width и визуально начинаются с левого края.

   Fix: переключаем все align-items / justify-content в action rail на
   flex-start. Buy и WA остаются full-width (width:100% не зависит от
   align). Grid-view override на priceblock/pricesub/kaspi уже flex-start
   из iter-01 — не трогаем. Здесь фиксим list view.
   ──────────────────────────────────────────────────────────────────── */
.catalog-v2-band .cat-card__rail {
  align-items: flex-start !important;
}
.catalog-v2-band .cat-card__priceblock {
  align-items: flex-start !important;
}
.catalog-v2-band .cat-card__pricesub {
  justify-content: flex-start !important;
}
.catalog-v2-band .cat-card__kaspi {
  align-self: flex-start !important;
}
/* Owner 2026-06-19 #1.5/#1.6: «В наличии» по центру — как Купить / Нужна
   консультация (full-width, контент центрирован). Список и плитка. */
.catalog-v2-band .cat-card__stock {
  align-self: stretch !important;
  justify-content: center !important;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   catalog iter-01.6 (2026-06-11) — Kaspi line clean wrap
   ────────────────────────────────────────────────────────────────────
   Owner: «каспи рассрочка некрасиво переносится» — узкая 168px
   action-колонка вызывала перенос внутри «0-0-24» (между дефисами).

   Markup теперь делит строку на два no-wrap фрагмента:
     .cat-card__kaspi-rate    «от 2 860 ₸/мес»
     .cat-card__kaspi-period  «· 0-0-24»
   между ними — обычный пробел; если узко, второй фрагмент аккуратно
   уходит на вторую строку целиком, без разрыва внутри тире.
   ──────────────────────────────────────────────────────────────────── */
.cat-card__kaspi-text {
  display: inline;
}
.cat-card__kaspi-rate,
.cat-card__kaspi-period {
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   Поиск /psearch/ в стиле v2 (Owner 2026-07-28).
   Легаси-разметка формы (table.adv-search + JS-хуки SearchDo/
   SearchShowSelectCat) сохранена — рестайл только CSS'ом; блоки
   «Результаты поиска» / «Статьи по теме» получают class="srch-v2"
   через center_block (products.html, ветка act=search).
   ════════════════════════════════════════════════════ */
.cat-main .center-block.srch-v2 {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.cat-main .center-block.srch-v2 h3.centerHeader {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-text);
  text-align: left;
}
.cat-main .center-block.srch-v2,
.cat-main .center-block.srch-v2 p,
.cat-main .center-block.srch-v2 td,
.cat-main .center-block.srch-v2 label {
  font: 400 15px/1.5 var(--ff-body);
  color: var(--c-text);
}
.cat-main .center-block.srch-v2 a { color: var(--c-blue); text-decoration: none; }
.cat-main .center-block.srch-v2 a:hover { text-decoration: underline; }
.cat-main .center-block.srch-v2 .adv-search td { padding: 7px 8px; }
.cat-main .center-block.srch-v2 .adv-search input.text,
.cat-main .center-block.srch-v2 .adv-search input[type="text"],
.cat-main .center-block.srch-v2 .adv-search select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  font: 400 14px/38px var(--ff-body);
  color: var(--c-text);
}
.cat-main .center-block.srch-v2 .adv-search input:focus,
.cat-main .center-block.srch-v2 .adv-search select:focus {
  outline: none;
  border-color: var(--c-blue);
}
.cat-main .center-block.srch-v2 .adv-search input[type="checkbox"] {
  accent-color: var(--c-blue);
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
.cat-main .center-block.srch-v2 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background: var(--c-blue);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  font: 600 15px/1 var(--ff-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-main .center-block.srch-v2 .button:hover { background: var(--c-blue-dark); color: #fff; text-decoration: none; }
.cat-main .center-block.srch-v2 hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-3) 0; }
.cat-main .center-block.srch-v2 .sv-search-suggest-list { margin: var(--sp-2) 0 0; padding-left: 20px; }
.cat-main .center-block.srch-v2 .sv-search-suggest-list li { margin: 6px 0; }
.cat-main .center-block.srch-v2 .sv-search-art-descr { color: var(--c-text-3); }