/*
 * tpl-list.css — Л4-list: раздел-оглавление, листинг, фильтровая посадочная.
 * GOAL.md Л-§4 волна 3. Токены Д0 (tokens.css) + общий класс .pk-reveal/.pk-chip (motion.css/motion.js);
 * .pk-tile-tilt/.pk-skeleton-card — реализация (CSS hover-tilt, shimmer) своя, здесь же (20.10.2026,
 * С1: motion.css/motion.js их не определяют, несмотря на прежнюю формулировку комментария).
 */

/* ===================== 0. H1 раздела/листинга (В7-гейт): токен Д0 не был подключён, H1 брал
   размер из глобального body.st-next h1 сети (next.css, specificity 0,1,2) — крупнее эталон на
   десятки процентов. !important по тому же принципу, что .pk-home-banner-text h1 (tpl-home.css). */
h1.woocommerce-products-header__title.page-title,
.pk-search-fallback-h1 {
  font-size: var(--pk-h1-section-size) !important;
  line-height: var(--pk-h1-section-lh) !important;
  /* В7-гейт (В7.2): точечно 700, не трогая общий --pk-fw-semibold (600) — его читают и H2/H3
     этой же роли (tokens.css:108-109), им лемана-замер даёт другой вес, менять токен нельзя. */
  font-weight: 700 !important;
}

/* В10-CSS 18.10.2026 (п.3): на 375 лемана-эталон H1 29/34/700, H2 23 (W9_MEASURE.md, строки
   «Раздел/Подраздел 375»). Не трогаем общий токен --pk-h1-section-size/--pk-h2-section-size
   (tokens.css) — его читают и другие шаблоны (главная, l7-калькулятор), этот файл подключается
   только на листингах/поиске, поэтому явные px здесь не задевает чужие страницы. H1-вес у этой
   роли и на 1440 уже 700 (см. правило выше) — на 375 то же число. */
@media (max-width: 720px) {
  h1.woocommerce-products-header__title.page-title,
  .pk-search-fallback-h1 {
    font-size: 29px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
  }
}

/* ===================== 1. Раздел-оглавление: подзаголовок-УТП + плитки ===================== */

.pk-section-lead {
  font-size: var(--pk-text-md);
  color: var(--pk-color-text-muted);
  margin: 0 0 var(--pk-space-6);
  max-width: 62ch;
}

/* УИ-аудит В4 (оркестратор, listing_375): длинный SEO-текст раздела перенесён PHP-хуком
 * (tpl-seo-map.php, woocommerce_after_shop_loop) с верха страницы на низ, под сетку товаров —
 * здесь только отступ сверху, т.к. блок теперь сосед <ul.products>, а не часть шапки. */
.pk-section-text { margin-top: var(--pk-space-8); max-width: 72ch; }

.pk-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--pk-grid-gap);
  margin: 0 0 var(--pk-space-10);
  list-style: none;
  padding: 0;
}

.pk-section-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pk-space-2);
  padding: var(--pk-space-5) var(--pk-space-3);
  background: var(--pk-color-bg-elevated);
  border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-lg);
  text-decoration: none;
  color: var(--pk-color-text);
  transition: box-shadow var(--pk-dur-base) var(--pk-ease-standard), border-color var(--pk-dur-base) var(--pk-ease-standard);
}
.pk-section-tile:hover {
  box-shadow: var(--pk-shadow-md);
  border-color: var(--pk-color-border-strong);
}
.pk-section-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--pk-radius-md);
  background: var(--pk-color-bg-muted);
}
.pk-section-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.pk-section-tile-icon { width: 48px; height: 48px; color: var(--pk-color-brand); }
/* Этап 7 (PHOTOS_7.md): готовое фото раздела — кадрируем (cover), не вписываем (contain),
   чтобы форма заготовки была видна крупно, как на остальных плитках с фото. */
.pk-section-tile-img img.pk-cat-photo,
.pk-root-group-img img.pk-cat-photo {
  object-fit: cover;
  transition: transform var(--pk-dur-base) var(--pk-ease-standard);
}
@media (prefers-reduced-motion: no-preference) {
  .pk-section-tile:hover .pk-cat-photo,
  .pk-root-group-head:hover .pk-cat-photo { transform: scale(1.06); }
}
.pk-section-tile-name {
  font-size: var(--pk-text-base);
  font-weight: var(--pk-fw-semibold);
  line-height: var(--pk-lh-tight);
}
.pk-section-tile-count {
  font-size: var(--pk-text-xs);
  color: var(--pk-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.pk-hub-products-h2 {
  /* В7-гейт: без !important класс (специфичность 0,1,0) проигрывал глобальному h2 сети
     (0,1,1) — та же природа, что у H1 (tpl-list.css §0). */
  font-size: var(--pk-h2-section-size) !important;
  line-height: var(--pk-h2-section-lh) !important;
  font-weight: var(--pk-h2-section-w) !important;
  margin: var(--pk-space-4) 0 var(--pk-space-4);
  padding-top: var(--pk-space-4);
  border-top: 1px solid var(--pk-color-border);
}
/* В7-гейт: виджет «Часто ищут»/«С этим заказывают» (tpl-seo.php) на разделах/листинге/поиске —
   тот же непокрытый plain h2. На карточке товара своя роль — см. tpl-product.css. */
.pk-often-search h2 {
  font-size: var(--pk-h2-section-size) !important;
  line-height: var(--pk-h2-section-lh) !important;
  font-weight: var(--pk-h2-section-w) !important;
}
/* В10-CSS (п.3) правка 2: override на 375 должен стоять ПОСЛЕ базовых правил выше — обе стороны
   !important, равная специфичность, при конфликте побеждает последнее по файлу. Раньше этот блок
   стоял в §0 (до базовых правил) и проигрывал им на живом сайте. */
@media (max-width: 720px) {
  .pk-hub-products-h2,
  .pk-often-search h2 {
    font-size: 23px !important;
  }
}

/* ===================== 1.1 Корень каталога (/shop/): группы, как у эталон (доработка 1) ========= */

.pk-root-groups { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.pk-root-group {
  background: var(--pk-color-bg-elevated); border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-lg); padding: var(--pk-space-4);
  min-width: 0; /* 18.10.2026: без этого грид-ячейка раздувалась по min-content длинного
                   названия раздела (373px@375 → скролл страницы), классика грида/флекса. */
}
.pk-root-group-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3);
  text-decoration: none; color: var(--pk-color-text); margin-bottom: var(--pk-space-3);
  min-width: 0;
}
.pk-root-group-name { min-width: 0; flex: 1 1 0; } /* длинное имя переносится рядом с фото, а не уходит под него */
.pk-root-group-img {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--pk-radius-md);
  background: var(--pk-color-bg-muted); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pk-root-group-img img { width: 100%; height: 100%; object-fit: contain; }
.pk-root-group-img .pk-icon { width: 28px; height: 28px; color: var(--pk-color-brand); }
.pk-root-group-name { font-size: var(--pk-text-md); font-weight: var(--pk-fw-semibold); line-height: var(--pk-lh-tight); }
/* счётчик — своей строкой под названием: flex-basis:100% + margin-left считались ПОВЕРХ
   100% контейнера и толкали строку за край (18.10.2026, overflow 375). Ширина явно через
   calc(100%-отступ), а не 100%+margin — отступ уже внутри ширины. */
.pk-root-group .pk-section-tile-count {
  display: block; box-sizing: border-box; flex: 0 0 auto;
  width: calc(100% - 44px - var(--pk-space-3));
  margin-left: calc(44px + var(--pk-space-3)); margin-top: -4px;
}
.pk-root-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pk-space-1); }
.pk-root-group-list li a {
  display: block; padding: var(--pk-space-1) 0; color: var(--pk-color-text-muted);
  text-decoration: none; font-size: var(--pk-text-sm);
}
.pk-root-group-list li a:hover { color: var(--pk-color-brand); }
.pk-root-group-item--extra { display: none; }
.pk-root-group.is-expanded .pk-root-group-item--extra { display: list-item; }
.pk-root-group-more {
  display: inline-block; margin-top: var(--pk-space-2); color: var(--pk-color-brand);
  font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold); text-decoration: none;
}
.pk-root-group-more:hover { text-decoration: underline; }
.pk-root-group.is-expanded .pk-root-group-more { display: none; }

/* ===================== 1.2 Раздел (не корень): "Ещё N" на мобильном списке (доработка 5) ======== */

.pk-section-more-toggle { display: none; } /* кнопка только на ≤782px, см. медиа-блок ниже */

/* ===================== 2. Листинг: фильтры-чипы ===================== */

.pk-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-5);
  align-items: flex-start;
  padding: var(--pk-space-4) 0;
  margin-bottom: var(--pk-space-2);
  border-bottom: 1px solid var(--pk-color-border);
}
.pk-facet-group { display: flex; flex-direction: column; gap: var(--pk-space-2); min-width: 0; }
.pk-facet-label {
  display: flex; align-items: center; gap: var(--pk-space-1);
  font-size: var(--pk-text-xs); font-weight: var(--pk-fw-semibold);
  color: var(--pk-color-text-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
.pk-facet-label .pk-icon { width: 14px; height: 14px; }
.pk-facet-chips { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); }
.pk-facet-chip {
  display: inline-flex; align-items: center; gap: var(--pk-space-1);
  padding: 6px var(--pk-space-3);
  border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-pill);
  background: var(--pk-color-bg);
  color: var(--pk-color-text);
  font-size: var(--pk-text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.pk-facet-chip:hover { border-color: var(--pk-color-brand); color: var(--pk-color-brand); }
.pk-facet-chip[aria-pressed="true"] {
  background: var(--pk-color-brand); border-color: var(--pk-color-brand); color: var(--pk-color-text-on-brand);
}
.pk-facet-count { font-variant-numeric: tabular-nums; opacity: 0.75; font-size: var(--pk-text-xs); }

/* УИ-аудит, приёмка (повтор): .pk-facets теперь <details> — закрыт по умолчанию, браузер сам
 * прячет группы чипов (UA-правило), здесь только оформление <summary>-кнопки и превью выбранного.
 * На ≥768px показываем всё как раньше (плоским рядом) и прячем кнопку — author-CSS перебивает
 * UA-правило без !important (порядок происхождения каскада: author > user-agent). */
.pk-facets-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--pk-space-2);
  flex: 1 1 100%; /* своя строка в flex-wrap .pk-facets — группы чипов начинаются с новой строки */
  cursor: pointer; list-style: none; padding: var(--pk-space-2) 0;
}
.pk-facets-summary::-webkit-details-marker { display: none; }
.pk-facets-summary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-1);
  padding: 0 var(--pk-space-4); min-height: 44px;
  border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-control); /* коорд. 22.10: обычная кнопка, не овал */
  font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold);
}
.pk-facets-summary-btn::after { content: "▾"; margin-left: var(--pk-space-1); opacity: 0.6; }
.pk-facets[open] .pk-facets-summary-btn::after { content: "▴"; }
.pk-facets-selchip {
  padding: 6px var(--pk-space-3); border-radius: var(--pk-radius-pill);
  background: var(--pk-color-brand); color: var(--pk-color-text-on-brand); font-size: var(--pk-text-sm);
}
@media (min-width: 768px) {
  .pk-facets-mob > summary { display: none; }
  .pk-facets-mob > .pk-facet-group { display: flex; }
}

/* ===================== 3. Листинг: таблица-строки сети → сетка карточек ===================== */

/* Приёмка 20.10.2026 (оркестратор, скрин listing_1440): В8-геометрия мерила против чужого
   эталона с контейнером 880px — у pokova контент-контейнер ~1200px (см. В10-CSS выше, 1240-20*2),
   фиксированные 3×280px+justify-content:center оставляли явный незаполненный хвост и "смещённую"
   сетку. Меняем на резиновые 4 колонки на десктопе, 2 — на мобильном (brkpoint ниже уже был). */
.woocommerce ul.products.columns-4,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: var(--pk-space-2) 0 var(--pk-space-8) !important;
}
@media (max-width: 1100px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
.woocommerce ul.products > li.st-prow-li { list-style: none; margin: 0 !important; width: auto !important; }
.st-loop-head { display: none; } /* заголовок таблицы-строк сети не нужен в сетке карточек */

a.st-prow {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--pk-space-4);
  background: var(--pk-color-bg-elevated);
  border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-md);
  text-decoration: none;
  color: var(--pk-color-text);
  transition: box-shadow var(--pk-dur-base) var(--pk-ease-standard), border-color var(--pk-dur-base) var(--pk-ease-standard);
}
a.st-prow:hover { box-shadow: var(--pk-shadow-md); border-color: var(--pk-color-border-strong); }
a.st-prow .c-img {
  order: 0; margin-bottom: var(--pk-space-3);
  /* width:100% обязателен: без него flex-stretch вычисляет ширину через content-based flex-basis
   * (авто по главной оси column-флекса), а это у части товаров даёт реальную высоту/ширину от
   * intrinsic-размера img, который сеть иногда заявляет через sizes="46px" (старая строка-таблица,
   * без WP "sizes=auto") — плитка схлопывается в 46×46 с мелкой иконкой (гейт п.2, найдено через
   * getBoundingClientRect: boxW=46 vs 196 у карточек без этого бага). width:100% рвёт эту
   * циклическую зависимость — размер плитки больше не зависит от intrinsic-размера фото. */
  width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--pk-radius-sm); background: var(--pk-color-bg-muted);
}
/* !important: у части товаров без фото (АЗДФ, плиты составные) сетевой img приходит с
 * inline-атрибутами width/height=46 (sizes="46px" заточен под строку-таблицу, не карточку) —
 * внешний CSS без !important их не перебивает, плитка остаётся пустой с мелкой иконкой (гейт п.2). */
a.st-prow .c-img img {
  width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important;
}
/* Заглушка одного размера, если фото нет вовсе (сеть отдаёт woocommerce-placeholder) — фон
 * .c-img уже нейтральный (--pk-color-bg-muted), просто не даём плейсхолдеру съехать в угол. */
a.st-prow .c-img img.woocommerce-placeholder { opacity: 0.35; }
/* Л4-list этап 3: мини-силуэт (pkDrawMini, pk-draw.js) заменяет фото карточки на всех ширинах —
 * аудит §1 «36 одинаковых тёмных кругов» относился и к мобильной сетке, не только к 1440. */
a.st-prow .c-img:has(.pk-draw-mini) img { display: none; }
.pk-draw-mini { display: block; width: 100%; height: 100%; }
a.st-prow .c-name {
  order: 1; font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold);
  line-height: var(--pk-lh-normal); margin-bottom: var(--pk-space-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Данные (get_the_title) не трогаем — только отображение: первая буква визуально заглавная (гейт п.1). */
a.st-prow .c-name::first-letter { text-transform: uppercase; }
a.st-prow .c-d, a.st-prow .c-steel, a.st-prow .c-gost {
  order: 2; font-size: var(--pk-text-xs); color: var(--pk-color-text-muted); margin-right: var(--pk-space-2);
}
a.st-prow .c-d:has(.is-empty), a.st-prow .c-steel:has(.is-empty), a.st-prow .c-gost:has(.is-empty) { display: none; }
a.st-prow .c-price {
  order: 3; margin-top: auto; padding-top: var(--pk-space-3);
  font-size: var(--pk-text-md); font-weight: var(--pk-fw-semibold); color: var(--pk-color-brand);
}
a.st-prow .c-btn {
  order: 4; margin-top: var(--pk-space-2); align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; box-sizing: border-box;
  padding: 0 var(--pk-space-4); border-radius: var(--pk-radius-control);
  font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold);
}
/* Фон кнопки задаёт сеть (--cta, оранжевый бренд, !important) — на нём тёмный текст из
 * pk-color-brand-active давал контраст <4,5:1 (гейт п.3). Белый текст поверх оранжевого проходит
 * WCAG AA при --cta темнее #C98A1C; если бренд когда-то станет светлее — проверить руками. */
a.st-prow .c-btn { color: #fff !important; }

/* лёгкий 3D-поворот карточки при наведении (Л-§3.7: только transform) — класс добавляет tpl-list.js.
 * shortcut (20.10.2026, С1): комментарий утверждал, что поворот считает design/motion.js — там его
 * нет (grep rotateX/rotateY по design/*.js/.css — 0 совпадений), был только контейнер с perspective
 * без самого transform:rotate*. :hover-only, без JS-трекинга курсора — хватает для "лёгкого" эффекта
 * из задачи; upgrade: если нужен наклон по позиции курсора, добавить pointermove в tpl-list.js. */
.woocommerce ul.products > li.st-prow-li.pk-tile-tilt { perspective: 700px; }
.woocommerce ul.products > li.st-prow-li.pk-tile-tilt a.st-prow {
  transform-style: preserve-3d;
  transition: transform var(--pk-dur-base) var(--pk-ease-standard);
}
.pk-section-grid .pk-section-tile.pk-tile-tilt {
  transition: transform var(--pk-dur-base) var(--pk-ease-standard);
}
@media (hover: hover) {
  .woocommerce ul.products > li.st-prow-li.pk-tile-tilt:hover a.st-prow {
    transform: rotateX(2deg) rotateY(-3deg) translateY(-2px);
  }
  .pk-section-grid .pk-section-tile.pk-tile-tilt:hover {
    transform: perspective(700px) rotateX(2deg) rotateY(-3deg) translateY(-2px);
  }
}

/* ===================== 3.0 «Другие стандарты раздела» (чужой mu-plugin) — чипы Д0 (гейт п.3) ===================== */

.pk-hubs ul {
  columns: initial !important; padding-left: 0 !important; list-style: none !important;
  display: flex !important; flex-wrap: wrap !important; gap: var(--pk-space-2) !important; margin: 0 !important;
}
.pk-hubs ul li { margin: 0 !important; }
.pk-hubs ul li a {
  display: inline-flex; align-items: center; gap: var(--pk-space-1);
  padding: 6px var(--pk-space-3); border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-pill); background: var(--pk-color-bg); color: var(--pk-color-text);
  text-decoration: none; font-size: var(--pk-text-sm);
}
.pk-hubs ul li a:hover { border-color: var(--pk-color-brand); color: var(--pk-color-brand); }

/* ===================== 3.1 SEO-текст сети под листингом — не стена (гейт п.5) ===================== */

.pk-seo-h2 {
  font-size: var(--pk-text-lg);
  font-weight: var(--pk-fw-semibold);
  margin: var(--pk-space-6) 0 var(--pk-space-3);
  max-width: 75ch;
}
.pk-seo-p {
  max-width: 75ch;
  margin: 0 0 var(--pk-space-3);
  line-height: var(--pk-lh-normal);
  color: var(--pk-color-text);
}

/* ===================== 4. «Показать ещё» + skeleton ===================== */

.pk-show-more { display: block; margin: var(--pk-space-6) auto 0; }
nav.woocommerce-pagination[hidden] { display: none; }
/* Этап 6 (22.10.2026): собственных правил на .page-numbers не было вовсе — размер целиком
   наследовался от сети/Astra. Защитная тап-цель на мобиле (задание — пагинация ≥44×44),
   без переопределения вида (цвет/фон не трогаем — это стиль сети). */
@media (max-width: 1023px) {
  nav.woocommerce-pagination .page-numbers,
  nav.woocommerce-pagination a.page-numbers,
  nav.woocommerce-pagination span.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; box-sizing: border-box;
  }
}
/* shortcut: .pk-skeleton (мотор/motion.css) на деле не определён ни там, ни здесь — был только
   в комментарии §0, карточка-заглушка рендерилась пустым блоком без фона/анимации. Своя лёгкая
   shimmer-заливка на токенах, без нового файла/класса-дубля. */
.pk-skeleton-card {
  min-height: 236px; border-radius: var(--pk-radius-md); list-style: none;
  background: linear-gradient(90deg, var(--pk-color-bg-muted) 25%, var(--pk-color-bg-elevated) 37%, var(--pk-color-bg-muted) 63%);
  background-size: 400% 100%;
  animation: pk-skeleton-shimmer 1.4s ease infinite;
}
@keyframes pk-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products > li.st-prow-li.pk-tile-tilt { perspective: none; }
  .pk-skeleton-card { animation: none; background: var(--pk-color-bg-muted); }
  .woocommerce ul.products > li.st-prow-li.pk-tile-tilt:hover a.st-prow,
  .pk-section-grid .pk-section-tile.pk-tile-tilt:hover { transform: none; }
}

/* ===================== 5. Мобильная раскладка (SPEC: допуск ±10% от 1440) ===================== */

@media (max-width: 782px) {
  .pk-section-grid { grid-template-columns: repeat(2, 1fr); }
  /* В10-CSS 18.10.2026 (п.5): на 375 тайл 2-колоночной сетки был 157,5px (gap 20 + боковой
     отступ страницы 20px с каждой стороны от родного .ast-container не трогаем — это общий
     контейнер сети). Отрицательный margin «съедает» часть этого паддинга только у сетки товаров
     (не у всей страницы), gap сужен — 157,5 → ≥172px (замер ниже после деплоя). 2×172,5+12=357 ≤
     container 359 (335 своих + 24 отъетых с полей). */
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    margin-left: -12px !important; margin-right: -12px !important;
    gap: 12px;
  }
  .pk-facets { gap: var(--pk-space-4); }

  /* Раздел (не корень): плитки → список строк «иконка + название», как у эталон-375
     (acc_razdel_эталон_375: "список строк «иконка + название» и «Ещё 6»"). Группы корня
     (.pk-root-groups) это правило не трогает — у них своя раскладка (1.1), в допуске уже. */
  .pk-section-grid:not(.pk-root-groups) { grid-template-columns: 1fr; gap: var(--pk-space-2); }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile {
    flex-direction: row; align-items: center; text-align: left; padding: var(--pk-space-3);
  }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile-img { max-width: 40px; aspect-ratio: 1/1; flex: 0 0 auto; }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile-icon { width: 24px; height: 24px; }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile-name { flex: 1 1 auto; }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile-count { margin-left: auto; }
  .pk-section-grid:not(.pk-root-groups) .pk-section-tile--extra { display: none; }
  .pk-section-grid.is-expanded:not(.pk-root-groups) .pk-section-tile--extra { display: flex; }
  .pk-section-grid:not(.pk-root-groups) + .pk-section-more-toggle {
    display: inline-block; margin-top: var(--pk-space-2); color: var(--pk-color-brand);
    font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold); text-decoration: none;
  }
  .pk-section-grid.is-expanded + .pk-section-more-toggle { display: none; }

  .pk-root-groups { grid-template-columns: 1fr; }
}

/* ===================== 6. Поиск: сайдбар фильтров + сетка 3–4 колонки (доработка 2) ============= */

.pk-search-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--pk-space-6); align-items: start; }
.pk-search-filters .pk-facets {
  flex-direction: column; border-bottom: none; padding: 0; margin-bottom: 0; gap: var(--pk-space-4);
}
.pk-search-filters .pk-facet-chips { flex-direction: column; align-items: flex-start; }
.pk-search-filters .pk-facet-chip { width: 100%; box-sizing: border-box; justify-content: space-between; }
/* min-width:0 — иначе грид-колонка растёт под самый широкий чип и толкает всю страницу вширь
   (тот же гейт, что уже решён для .pk-svc-layout в tpl-svc.css). */
.pk-search-layout > * { min-width: 0; }
/* В8-геометрия: тот же эталон эталон-поиска (data-qa="products-list" 1440: 3×280px) — см. §3 выше. */
.pk-search-results .woocommerce ul.products { grid-template-columns: repeat(3, 280px); justify-content: center; }

@media (max-width: 900px) {
  .pk-search-layout { grid-template-columns: 1fr; }
  .pk-search-filters .pk-facets { flex-direction: row; flex-wrap: wrap; }
  .pk-search-filters .pk-facet-chips { flex-direction: row; }
  .pk-search-filters .pk-facet-chip { width: auto; }
}
@media (max-width: 782px) {
  /* В10-CSS (п.5): та же правка ширины тайла, что в §5 (общий листинг) — здесь выше специфичность
     (.pk-search-results .woocommerce ul.products), общее правило не долетало на /?s=. */
  .pk-search-results .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    margin-left: -12px !important; margin-right: -12px !important;
    gap: 12px;
  }
}

/* ===================== 7. Л4-list этап 3 (22.10.2026): вариант A «Таблица-подборщик» ===================
 * JS (tpl-list.js) переносит .pk-facets + ul.products + nav.pagination в обёртку .pk-listing-layout
 * (sidebar + main) — DOM чужой карточки (li.st-prow-li > a.st-prow > .c-*) не трогаем, только
 * раскладка колонками через `a.st-prow{display:contents}` (её дети становятся прямыми grid-item
 * самого <li>) и новые элементы, которые JS добавляет РЯДОМ с <a> (силуэт/бейдж группы/цена-кг/
 * кнопка «Размеры» вставляются как сиблинги <a> внутри <li>, не внутри самой ссылки — иначе кнопка
 * внутри <a> была бы невалидной и всегда вела бы на карточку). */

.pk-listing-layout { display: block; }
.pk-listing-side { min-width: 0; }
.pk-listing-main { min-width: 0; }

@media (min-width: 1101px) {
  .pk-listing-layout { display: flex; align-items: flex-start; gap: var(--pk-space-6); }
  .pk-listing-side { flex: 0 0 264px; position: sticky; top: calc(var(--pk-head-h, 64px) + var(--pk-space-3)); }
  .pk-listing-main { flex: 1 1 auto; }
  .pk-listing-side .pk-facets { flex-direction: column; align-items: stretch; border-bottom: none; padding: 0; gap: var(--pk-space-5); width: 100%; }
  .pk-listing-side .pk-facets-summary { display: none; } /* на desktop сайдбар всегда открыт */
  /* баг 22.10: flex-direction:column без align-items:stretch схлопывал .pk-facet-group в width:0
     (кросс-ось flex при column — ширина, а min-width:0 ничего не держит без stretch/явной width) */
  .pk-listing-side .pk-facet-group { display: flex !important; width: 100%; align-self: stretch; }
  .pk-listing-side .pk-facet-chips { flex-direction: column; align-items: stretch; gap: var(--pk-space-1); width: 100%; }
  .pk-listing-side .pk-facet-chip { width: 100%; box-sizing: border-box; justify-content: space-between; }
}

/* ===================== Э6 (22.10.2026, GOAL_RENDER_MATCH §4.3): белая карточка фильтров,
 * аккордеон по группам, чекбоксы вместо пилюль — та же разметка `<a class="pk-chip pk-facet-chip"
 * aria-pressed>`, логика фильтров (ссылки/URL) не меняется, только внешний вид + JS-свёртывание
 * групп (чистое UI-состояние, ссылки остаются в DOM всегда). ===================== */
@media (min-width: 1101px) {
  .pk-listing-side .pk-facets {
    background: #fff; border: 1px solid var(--pk-color-border); border-radius: 12px;
    padding: var(--pk-space-4);
  }
  .pk-listing-side .pk-facet-group {
    border-bottom: 1px solid var(--pk-color-border); padding-bottom: var(--pk-space-3);
  }
  .pk-listing-side .pk-facet-group:last-of-type { border-bottom: none; padding-bottom: 0; }
  .pk-listing-side .pk-facet-label {
    cursor: pointer; justify-content: space-between; text-transform: none; letter-spacing: 0;
    font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold); color: var(--pk-color-text);
  }
  .pk-listing-side .pk-facet-label::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto;
    border-right: 1.5px solid var(--pk-color-text-muted); border-bottom: 1.5px solid var(--pk-color-text-muted);
    transform: rotate(45deg); transition: transform var(--pk-dur-base) var(--pk-ease-standard);
  }
  .pk-listing-side .pk-facet-group.is-collapsed .pk-facet-label::after { transform: rotate(-45deg); }
  .pk-listing-side .pk-facet-group.is-collapsed .pk-facet-chips,
  .pk-listing-side .pk-facet-group.is-collapsed .pk-facet-search { display: none; }

  /* чекбокс вместо пилюли: квадрат слева (псевдоэлемент), текст, счётчик серым справа */
  .pk-listing-side .pk-facet-chip {
    border: none; border-radius: 0; background: none; padding: 6px 2px; gap: var(--pk-space-2);
  }
  .pk-listing-side .pk-facet-chip::before {
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; box-sizing: border-box;
    border: 1.5px solid var(--pk-color-border-strong); border-radius: 4px; background: var(--pk-color-bg);
  }
  .pk-listing-side .pk-facet-chip[aria-pressed="true"]::before {
    background-color: var(--pk-color-brand); border-color: var(--pk-color-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 11px;
  }
  .pk-listing-side .pk-facet-chip:hover { color: var(--pk-color-brand); }
  .pk-listing-side .pk-facet-chip[aria-pressed="true"] { color: var(--pk-color-text); font-weight: var(--pk-fw-semibold); }
  .pk-listing-side .pk-facet-count { margin-left: auto; color: var(--pk-color-text-muted); opacity: 1; }

  /* поиск по марке — лупа из sprite.svg через CSS mask (своя иконка, без иконочных библиотек) */
  .pk-listing-side .pk-facet-search {
    padding-left: 32px; position: relative;
    background-image: none;
  }
  .pk-facet-group { position: relative; }
  .pk-facet-group:has(.pk-facet-search)::before {
    content: ""; position: absolute; left: 10px; top: 38px; width: 14px; height: 14px;
    background-color: var(--pk-color-text-muted);
    -webkit-mask: url("/wp-content/themes/pokova-pro/design/sprite.svg#pk-i-search") center / contain no-repeat;
    mask: url("/wp-content/themes/pokova-pro/design/sprite.svg#pk-i-search") center / contain no-repeat;
    pointer-events: none;
  }

  .pk-listing-side .pk-facets-reset {
    display: flex; align-items: center; justify-content: center; gap: var(--pk-space-1);
    width: 100%; box-sizing: border-box; margin-top: var(--pk-space-2); padding: 10px;
    border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-control);
    color: var(--pk-color-text-muted); font-weight: var(--pk-fw-semibold);
  }
}

/* Поиск по чипам марки — показываем только когда есть чипы (группа f_steel). */
.pk-facet-search {
  width: 100%; box-sizing: border-box; margin: var(--pk-space-1) 0;
  padding: 6px var(--pk-space-3); border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-control);
  font-size: var(--pk-text-sm); font-family: inherit; background: var(--pk-color-bg);
}
.pk-facet-chip.pk-chip-hidden { display: none; }
.pk-facets-reset {
  padding: 6px var(--pk-space-3); border-radius: var(--pk-radius-pill); border: 1px solid var(--pk-color-border);
  color: var(--pk-color-text-muted); font-size: var(--pk-text-sm); display: inline-flex; align-items: center; gap: var(--pk-space-1);
  text-decoration: none; margin-top: var(--pk-space-2);
}
.pk-facets-reset:hover { color: var(--pk-color-brand); border-color: var(--pk-color-brand); }
.pk-facets-reset .pk-icon { width: 12px; height: 12px; }

/* --- Таблица-строки: заголовок (desktop, липкий) --- */
.pk-list-head {
  display: none;
}
@media (min-width: 1101px) {
  .pk-list-head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 110px 86px 120px 150px;
    gap: var(--pk-space-3);
    align-items: center;
    padding: var(--pk-space-2) var(--pk-space-4);
    position: sticky; top: var(--pk-head-h, 64px); z-index: 5;
    background: var(--pk-color-bg); border-bottom: 2px solid var(--pk-color-border);
    font-size: var(--pk-text-xs); font-weight: var(--pk-fw-semibold); color: var(--pk-color-text-muted);
    text-transform: uppercase; letter-spacing: 0.02em;
  }
}

/* Э6 (22.10.2026): cGost/cPrice/cBtn скрыты в режиме «Список» на ЛЮБОЙ ширине (раньше это делал
 * JS inline !important безусловно — теперь JS их не трогает вовсе, он только видим/нет ставит
 * класс .pk-table-mode на ul, остальное здесь; .pk-view-grid эти элементы, наоборот, показывает). */
.pk-table-mode .c-gost, .pk-table-mode .c-price, .pk-table-mode .c-btn { display: none; }

/* --- Строка-ряд: a.st-prow прозрачна для грида <li>, колонки по классам сетевой карточки --- */
@media (min-width: 1101px) {
  .woocommerce ul.products.pk-table-mode { display: block !important; margin: 0 0 var(--pk-space-6) !important; }
  .woocommerce ul.products.pk-table-mode > li.st-prow-li {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 86px 120px 150px;
    gap: var(--pk-space-3); align-items: center; width: auto !important;
    padding: var(--pk-space-3) var(--pk-space-4); border-bottom: 1px solid var(--pk-color-border);
    background: none; border-radius: 0;
  }
  .woocommerce ul.products.pk-table-mode > li.st-prow-li:hover { background: var(--pk-color-bg-muted); }
  .woocommerce ul.products.pk-table-mode a.st-prow { display: contents; }
  .pk-table-mode .c-img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 40px; max-width: none; aspect-ratio: auto; align-self: center; margin-bottom: 0; }
  .pk-table-mode .c-img img { display: none; } /* заменяется силуэтом pkDrawMini, фото прячем (аудит §1: «36 одинаковых тёмных кругов») */
  .pk-table-mode .c-name { grid-column: 2; grid-row: 1; margin-bottom: 0; -webkit-line-clamp: 1; }
  .pk-table-mode .c-d { grid-column: 2; grid-row: 2; margin-right: 0; }
  .pk-table-mode .c-d.is-filled-by-js { display: none; } /* скрываем «—»/пусто, D-диапазон строит JS */
  .pk-table-mode .c-steel, .pk-table-mode .c-gost { grid-row: 1 / span 2; align-self: center; }
  .pk-table-mode .c-steel { grid-column: 3; }
  .pk-table-mode .c-gost { display: none; } /* заменяется бейджем группы (pk-grp-badge, колонка 4) — ГОСТ-текст не в задаче варианта A */
  .pk-table-mode .c-price { grid-column: 5; grid-row: 1 / span 2; align-self: center; margin-top: 0; padding-top: 0; display: none; } /* заменяется «от N ₽/кг» */
  .pk-table-mode .c-btn { grid-column: 6; grid-row: 1 / span 2; align-self: center; margin-top: 0; display: none; } /* строка целиком кликабельна по имени/силуэту, кнопка варианта A — «Размеры ▾» */
}

.pk-grp-badge {
  grid-column: 4; grid-row: 1 / span 2; align-self: center; justify-self: start;
  padding: 2px var(--pk-space-2); border-radius: var(--pk-radius-sm); background: var(--pk-color-bg-badge);
  font-size: var(--pk-text-xs); font-weight: var(--pk-fw-semibold); color: var(--pk-color-text);
}
.pk-price-kg {
  grid-column: 5; grid-row: 1 / span 2; align-self: center;
  font-size: var(--pk-text-md); font-weight: var(--pk-fw-semibold); color: var(--pk-color-brand);
}
.pk-price-kg .pk-price-kg-unit { font-size: var(--pk-text-xs); color: var(--pk-color-text-muted); font-weight: var(--pk-fw-regular, 400); }
.pk-d-range { display: block; font-size: var(--pk-text-xs); color: var(--pk-color-text-muted); font-variant-numeric: tabular-nums; }
.c-d.is-filled-by-js { display: none; } /* D-диапазон строит JS (pk-d-range) на всех ширинах, не только ≥1101px */

.pk-sizes-btn {
  grid-column: 6; grid-row: 1 / span 2; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--pk-space-1);
  min-height: 40px; box-sizing: border-box; padding: 0 var(--pk-space-4);
  border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-control);
  background: var(--pk-color-bg); color: var(--pk-color-text); font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold);
  cursor: pointer; font-family: inherit;
}
.pk-sizes-btn:hover { border-color: var(--pk-color-brand); color: var(--pk-color-brand); }
.pk-sizes-btn::after { content: "▾"; transition: transform var(--pk-dur-base) var(--pk-ease-standard); }
.pk-sizes-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

.pk-sizes-panel {
  grid-column: 1 / -1; margin-top: var(--pk-space-3); padding: var(--pk-space-3);
  background: var(--pk-color-bg-muted); border-radius: var(--pk-radius-md); font-size: var(--pk-text-sm);
}
.pk-sizes-list { list-style: none; margin: 0 0 var(--pk-space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--pk-space-2); }
.pk-sizes-list li a {
  display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box;
  padding: 0 var(--pk-space-3); border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-pill);
  color: var(--pk-color-text); text-decoration: none; background: var(--pk-color-bg);
}
.pk-sizes-list li a:hover { border-color: var(--pk-color-brand); color: var(--pk-color-brand); }
.pk-sizes-all { color: var(--pk-color-brand); font-weight: var(--pk-fw-semibold); text-decoration: none; }
.pk-sizes-all:hover { text-decoration: underline; }

/* --- Мобильная раскладка таблицы-строк (<1101px): карточка-строка вместо сетки колонок --- */
@media (max-width: 1100px) {
  .pk-sizes-btn { grid-column: auto; }
  .pk-grp-badge, .pk-price-kg, .pk-sizes-btn { margin-top: var(--pk-space-1); }
  .pk-table-mode .c-img { position: relative; }
  .pk-table-mode .c-img svg { max-width: 72px; }
}

/* --- Мобильный лист фильтров снизу (sheet), bottom-sheet вместо инлайн-раскрытия <details> --- */
.pk-sheet-backdrop { position: fixed; inset: 0; background: rgba(21, 25, 28, 0.45); z-index: 998; display: none; }
.pk-sheet-backdrop.is-open { display: block; }
@media (max-width: 1100px) {
  .pk-facets.pk-facets-mob[open] {
    position: fixed; inset: auto 0 0 0; z-index: 999; margin: 0;
    max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;
    box-shadow: 0 -10px 30px rgba(21, 25, 28, 0.22);
    padding: var(--pk-space-4); background: var(--pk-color-bg);
  }
  .pk-facets.pk-facets-mob[open] .pk-facets-summary {
    position: sticky; top: calc(var(--pk-space-4) * -1); margin: calc(var(--pk-space-4) * -1) calc(var(--pk-space-4) * -1) var(--pk-space-3);
    padding: var(--pk-space-4); background: var(--pk-color-bg); border-bottom: 1px solid var(--pk-color-border);
  }
  /* тап-цели ≥44px на мобильном листе (брифа: «тап-цели ≥44px») */
  .pk-facets.pk-facets-mob .pk-facet-chip,
  .pk-facets.pk-facets-mob .pk-facets-summary-btn,
  .pk-sizes-btn,
  .pk-sizes-list li a { min-height: 44px; }
}

/* В9-CSS 18.10.2026 (п.4): кнопка «Фильтры» только на мобильном (эталон-паттерн) — на desktop
   фасеты всегда открыты инлайн (§6 выше), кнопка не нужна и скрыта. */
.pk-filters-toggle { display: none; }
@media (max-width: 782px) {
  .pk-filters-toggle {
    display: inline-flex; align-items: center; gap: var(--pk-space-2);
    height: 40px; box-sizing: border-box; margin: 0 0 var(--pk-space-3);
    padding: 0 var(--pk-space-4);
  }
  /* Панель фасетов свёрнута по умолчанию — товары (.pk-search-results) оказываются в первом
     экране без скролла мимо ленты фильтров (гейт п.4: первая карточка выше 812px на 375).
     .is-open навешивает инлайн-скрипт (tpl-search.php) по клику кнопки. */
  .pk-search-filters { display: none; }
  .pk-search-filters.is-open {
    display: block; margin-bottom: var(--pk-space-4);
    padding: var(--pk-space-4); border: 1px solid var(--pk-color-border);
    border-radius: var(--pk-radius-md); background: var(--pk-color-bg-elevated);
  }
  .pk-search-filters.is-open .pk-facets { flex-direction: column; }
}

/* Сетевой @media(max-width:640px) (не мой файл) возвращает .st-prow в строку-таблицу
 * (flex-wrap, c-img:48px, c-btn margin-left:auto) — на карточке это сталкивает «Подробнее» с
 * ценой (гейт п.1). Отбиваем те же селекторы с !important, печатаем файл после сетевого —
 * в карточке остаётся колонка. */
@media (max-width: 640px) {
  .woocommerce ul.products > li.st-prow-li a.st-prow {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: 0 !important;
  }
  .st-prow .c-img { flex: 0 0 auto !important; width: 100% !important; }
  .st-prow .c-name { flex: 0 0 auto !important; }
  .st-prow .c-price { flex: 0 0 auto !important; }
  .st-prow .c-btn {
    flex: 0 0 auto !important; margin-left: 0 !important; width: 100% !important;
  }
}

/* main 22.10: сайдбар — воздух между группами фасетов; кнопка «Размеры» без синего фокуса Astra */
.pk-listing-side .pk-facet-group + .pk-facet-group { margin-top: var(--pk-space-4); }
.pk-sizes-btn:hover, .pk-sizes-btn:focus, .pk-sizes-btn[aria-expanded="true"] {
  background: var(--pk-color-bg-badge) !important; color: var(--pk-orange-700) !important; border-color: var(--pk-color-brand) !important;
}

/* ===================== 8. Э6 (22.10.2026, GOAL_RENDER_MATCH §4.3): тулбар сортировка + вид,
 * режим «Сетка» (карточки), пагинация квадратами. tpl-list.js переносит реальный WooCommerce
 * .woocommerce-ordering (сортировка) и .woocommerce-result-count ("Отображение N–M из K", реальные
 * числа из WP_Query) в .pk-list-toolbar — логику сортировки не меняем, только расположение/стиль.
 * ===================== */

.pk-list-toolbar {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--pk-space-3); margin-bottom: var(--pk-space-3);
}
.pk-list-toolbar .woocommerce-result-count {
  margin: 0 auto 0 0; color: var(--pk-color-text-muted); font-size: var(--pk-text-sm);
}
.pk-list-toolbar .woocommerce-ordering { margin: 0; }
.pk-list-toolbar .woocommerce-ordering select.orderby {
  height: 40px; box-sizing: border-box; border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-control); padding: 0 var(--pk-space-3);
  font-size: var(--pk-text-sm); font-family: inherit; background: var(--pk-color-bg); color: var(--pk-color-text);
}
.pk-view-toggle {
  display: inline-flex; border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-control);
  overflow: hidden; flex: 0 0 auto;
}
.pk-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; box-sizing: border-box; padding: 0;
  background: var(--pk-color-bg); border: none; color: var(--pk-color-text-muted); cursor: pointer;
}
.pk-view-btn + .pk-view-btn { border-left: 1px solid var(--pk-color-border); }
.pk-view-btn[aria-pressed="true"] { background: var(--pk-color-brand); color: var(--pk-color-text-on-brand); }
.pk-view-btn .pk-icon { width: 20px; height: 20px; }

/* --- Вид «Сетка»: 3 карточки в ряд на 1440, фото 4:3, мини-таблица характеристик, «от N ₽/кг»,
 * кнопка на всю ширину. Разметка та же сетевая (li.st-prow-li > a.st-prow > .c-*) — card-CSS из §3
 * применяется как есть (ul БЕЗ .pk-table-mode), здесь только добавки по классу .pk-view-grid на ul и
 * собственные элементы tpl-list.js (.pk-spec — 2-колоночная таблица характеристик). */
.pk-spec { display: none; }
.woocommerce ul.products.pk-view-grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1100px) {
  .woocommerce ul.products.pk-view-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 782px) {
  .woocommerce ul.products.pk-view-grid { grid-template-columns: 1fr !important; }
}
.pk-view-grid .c-img { aspect-ratio: 4 / 3; }
.pk-view-grid .c-d, .pk-view-grid .c-steel, .pk-view-grid .c-gost,
.pk-view-grid .pk-grp-badge, .pk-view-grid .pk-d-range, .pk-view-grid .pk-sizes-btn,
.pk-view-grid .c-price { display: none; }
.pk-view-grid .pk-spec {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--pk-space-2);
  order: 2; margin: var(--pk-space-1) 0 var(--pk-space-2); font-size: var(--pk-text-xs);
}
.pk-spec-row { display: contents; }
.pk-spec-k { color: var(--pk-color-text-muted); }
.pk-spec-v { text-align: right; color: var(--pk-color-text); font-variant-numeric: tabular-nums; }
.pk-view-grid .pk-price-kg {
  order: 3; margin-top: auto; padding-top: var(--pk-space-3); border-top: 1px solid var(--pk-color-border);
  font-size: var(--pk-text-lg); font-weight: var(--pk-fw-semibold);
}
.pk-price-pfx { color: var(--pk-color-brand); font-weight: var(--pk-fw-semibold); font-size: var(--pk-text-sm); margin-right: 4px; }
.pk-view-grid .c-btn {
  order: 4; align-self: stretch; justify-content: center; margin-top: var(--pk-space-2);
}
.pk-view-grid .c-btn::after { content: " \2192"; } /* → */

/* --- Пагинация квадратами 40×40, активная — янтарная --- */
nav.woocommerce-pagination { margin: var(--pk-space-6) 0 0; }
nav.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: var(--pk-space-2); list-style: none; padding: 0; margin: 0;
}
nav.woocommerce-pagination .page-numbers {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; box-sizing: border-box !important;
  border: 1px solid var(--pk-color-border) !important; border-radius: var(--pk-radius-control) !important;
  color: var(--pk-color-text) !important; text-decoration: none !important; font-size: var(--pk-text-sm) !important; font-weight: var(--pk-fw-semibold) !important;
  background: var(--pk-color-bg) !important;
}
nav.woocommerce-pagination a.page-numbers:hover { border-color: var(--pk-color-brand) !important; color: var(--pk-color-brand) !important; }
nav.woocommerce-pagination .page-numbers.current {
  background: var(--pk-color-brand) !important; border-color: var(--pk-color-brand) !important; color: var(--pk-color-text-on-brand) !important;
}
nav.woocommerce-pagination .page-numbers.dots { border-color: transparent !important; background: none !important; }
nav.woocommerce-pagination .page-numbers.next, nav.woocommerce-pagination .page-numbers.prev { font-weight: 400 !important; }
/* RM Э6 доводка: кнопка во всю ширину и текст карточки слева, как на рендере (сетевые стили центрируют) */
.woocommerce ul.products.pk-view-grid li.product { text-align: left !important; }
.woocommerce ul.products.pk-view-grid .c-btn { width: 100% !important; display: inline-flex !important; justify-content: center !important; }
.woocommerce ul.products.pk-view-grid .woocommerce-loop-product__title, .woocommerce ul.products.pk-view-grid h2 { text-align: left !important; font-weight: 600; }
.woocommerce ul.products.pk-view-grid .pk-price-kg { text-align: left; }
/* RM Э6: описание раздела — 2 строки, раскрывается кнопкой (tpl-list.js) */
.pk-section-lead.pk-lead-clamp:not(.pk-lead-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.pk-section-lead.pk-lead-clamp:not(.pk-lead-open) p { display: inline; margin: 0; }
.pk-lead-more { display: block; border: 0; background: none; padding: 0; margin: 6px 0 var(--pk-space-6); color: var(--pk-color-accent-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pk-lead-more:hover { text-decoration: underline; }
.pk-crumb-sep { color: var(--pk-color-text-muted, #8A9099); }
/* в сетке всё по левому краю, как на рендере (next.css центрирует a.st-prow) */
body.st-next ul.products.pk-view-grid a.st-prow,
body.st-next ul.products.pk-view-grid a.st-prow .c-name,
body.st-next ul.products.pk-view-grid a.st-prow .pk-spec,
body.st-next ul.products.pk-view-grid a.st-prow .pk-price-kg { text-align: left !important; }
body.st-next ul.products.pk-view-grid a.st-prow { align-items: stretch !important; }
body.st-next ul.products.pk-view-grid .pk-price-kg { align-self: stretch !important; }

/* RM Э8 rm6 п.4: `.pk-view-grid .c-img{aspect-ratio:4/3}` (стр. 801) и `a.st-prow .c-img{aspect-ratio:1/1}`
   (стр. 284) — одна специфичность, квадрат побеждает по каскаду (ниже в файле). Поднимаем
   специфичность явным путём через a.st-prow, без !important. */
.pk-view-grid a.st-prow .c-img { aspect-ratio: 4 / 3; }
/* составной плейсхолдер (силуэт pk-draw-mini + скрытый img) оставлял видимые пустые ячейки у части
   семейств — показываем в плитке только силуэт, остальные дети .c-img гасим. */
/* Ш1 GOAL_RENDER95: в «Сетке» — фото-пакшот формы (как рендер), силуэт pk-draw-mini — только в «Списке» */
.pk-view-grid a.st-prow .c-img:has(.pk-draw-mini) img { display: block !important; }
.pk-view-grid .pk-draw-mini { display: none; }

/* RM Э8 rm6 п.5: ряд пилюль «Диаметр ▾ / Марка стали ▾ / ГОСТ ▾» над сеткой (tpl-list.js) */
.pk-chip-shortcuts { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: 0 0 var(--pk-space-4); }
.pk-chip-shortcut {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--pk-space-4);
  border: 1px solid #E3E6E9; border-radius: var(--pk-radius-control, 8px); background: #fff;
  color: var(--pk-color-text); font-size: var(--pk-text-sm); font-weight: var(--pk-fw-semibold); cursor: pointer;
}
.pk-chip-shortcut:hover, .pk-chip-shortcut:focus-visible { border-color: var(--pk-color-brand); color: var(--pk-color-accent-text); }
.pk-chip-shortcut span { color: var(--pk-color-text-muted); font-size: 11px; }
/* RM Э8 rm6 п.4: квадратное фото в плитке 4:3 давало серые поля по бокам — заполняем плитку (круг ~70% высоты, не режется) */
body.st-next ul.products.pk-view-grid a.st-prow .c-img img { object-fit: cover !important; width: 100% !important; height: 100% !important; }

/* ===================== Ш1 GOAL_RENDER95 (scores/s0.md п.4, п.7): карточка сетки и тулбар как рендер ===================== */
.pk-list-toolbar .pk-chip-shortcuts { margin: 0 auto 0 0; }
.pk-list-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pk-space-3); margin-top: var(--pk-space-6); }
.pk-list-foot nav.woocommerce-pagination { margin: 0; }
.pk-list-foot .woocommerce-result-count { margin: 0; color: var(--pk-color-text-muted); font-size: var(--pk-text-sm); }
body.st-next ul.products.pk-view-grid a.st-prow .c-name { font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--pk-color-text) !important; }
body.st-next ul.products.pk-view-grid a.st-prow .pk-spec { font-size: 13px; min-height: calc(4 * 1.45em + 12px); align-content: start; }
body.st-next ul.products.pk-view-grid a.st-prow .pk-price-kg { font-size: 20px !important; font-weight: 800 !important; color: var(--pk-color-text) !important; border-top: 0 !important; }
body.st-next ul.products.pk-view-grid a.st-prow .pk-price-kg .pk-price-pfx { font-size: 20px; font-weight: 800; color: var(--pk-color-text); }
body.st-next ul.products.pk-view-grid a.st-prow .pk-price-kg-unit { font-size: 20px; font-weight: 800; }
/* hover: подъём + зум фото (только transform/opacity) */
.pk-view-grid a.st-prow .c-img { overflow: hidden; aspect-ratio: 3 / 2; } /* кадр gpt-image-2 3:2 — без обрезки торцов */
.pk-view-grid a.st-prow .c-img img { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .pk-view-grid a.st-prow:hover .c-img img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .pk-view-grid a.st-prow .c-img img { transition: none; } }
/* Ш2 GOAL_RENDER95: длинный список марок (05кп, 08, 08кп…) тянул сайдбар на 1000+ px — 7 строк и прокрутка,
   поиск марки над списком уже есть (.pk-facet-search) */
@media (min-width: 768px) {
  .pk-listing-side .pk-facet-group:has(.pk-facet-search) .pk-facet-chips { max-height: 252px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
}
/* s1 п.9: в inline-flex кнопке пробел перед стрелкой схлопывался — «Подробнее→» */
.pk-view-grid .c-btn::after { margin-left: 6px; }

/* Ш8: сеть на мобиле задаёт .st-prow .c-img flex-basis 48px — в сетке-колонке это высота фото (346x48) */
.pk-view-grid a.st-prow .c-img { flex: 0 0 auto !important; }

/* Ш8 CLS: tpl-list.js переносит шапку/тулбар после первой отрисовки — сетка двигалась на ~30px (CLS 0,09 на 1440).
   Сетку прячем visibility (сдвиги невидимого не считаются) до класса pk-list-ready; страховка — показ через 1,2 с без JS. */
html:not(.pk-list-ready) ul.products { /* .pk-listing-main строит JS — до него селектор не срабатывал */ visibility: hidden; animation: pk-list-show 0s 1.2s forwards; }
@keyframes pk-list-show { to { visibility: visible; } }

/* Ш9 (scores/s6.md каталог п.2): описание раздела 1 строкой и «Подробнее» в той же строке — сетка выше на ~40 px */
.pk-lead-row { display: flex; align-items: baseline; gap: 12px; margin: 0 0 var(--pk-space-6); }
.pk-lead-row .pk-section-lead { margin: 0; min-width: 0; }
.pk-lead-row .pk-lead-more { flex: none; margin: 0; }
.pk-lead-row:has(.pk-lead-open) { flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) {
  .pk-lead-row .pk-section-lead { max-width: 110ch; }
  .pk-lead-row .pk-section-lead.pk-lead-clamp:not(.pk-lead-open) { -webkit-line-clamp: 1; }
}
@media (max-width: 1023px) { .pk-lead-row { flex-direction: column; align-items: flex-start; gap: 6px; } }