/* izolex-pro, Вариант A — одна карточка товара для листинга (Э3) И поиска (Э5): общая разметка
 * `li.st-prow-li > a.st-prow` (.c-img/.c-name/.c-d/.c-steel/.c-gost/.c-price/.c-btn), один источник
 * стилей вместо двух (координатор, приёмка поиска 2). Подключается ОБОИМИ частями:
 * inc/a/listing.php (на listing.css) и inc/a/service.php (на search). Не требует `.iza`/`.grid` —
 * работает даже если enhanceListing() (listing.js) не добавил класс .grid (как на поиске).
 * Токены из design/a/a.css. */
body.iza-on ul.products li.st-prow-li { list-style: none; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; min-width: 0; }
/* TBT листинга (Lighthouse ≥ 92): карточки ниже первого экрана (с 9-й) не считаются, пока не доскроллены; auto запоминает реальную высоту */
body.iza-on ul.products li.st-prow-li:nth-child(n+9) { content-visibility: auto; contain-intrinsic-size: auto 380px; }
/* раунд 5 (находка): Ду-landing (renderDuCards в listing.js) печатает карточки как `<a class="card">`
 * БЕЗ класса .st-prow — только компилированный a.css даёт им `.iza .card{display:flex;...}`, без
 * height:100%. Внутри grid-растянутого `<li>` блочный `<a>` c height:auto не заполняет высоту —
 * .bd/.pr схлопываются под контент и обрезаются (overflow:hidden), а не растягиваются как в
 * эталоне (fid: .card h304→263, .bd/.pr высота/позиция). Даём height:100% всем `.card` в сетке,
 * не только `.st-prow` (для обычных карточек это дублирует правило ниже — безвредно). */
body.iza-on ul.products .card { height: 100%; }
body.iza-on ul.products .st-prow {
  display: flex; flex-direction: column; align-items: stretch; height: 100%; background: #fff; border: 0 !important; border-radius: var(--a-r-m);
  box-shadow: var(--a-sh-1); overflow: hidden; text-decoration: none; color: inherit; padding: 0 !important; gap: 0;
  transition: box-shadow .35s, transform .5s var(--a-ease-out);
}
body.iza-on ul.products .st-prow:hover { box-shadow: var(--a-sh-2); transform: translateY(-4px); }
/* раунд 10 (координатор): «.bd надо +21px сверху» — найдено прямым замером (Playwright getBoundingClientRect
 * реального узла): WooCommerce даёт своему `img`-контейнеру `margin-bottom` (тема, ~.75em) — на нашем
 * `.c-img`(=`.ph`) эталон никакого зазора перед `.bd` не оставляет (ph.bottom===bd.top впритык).
 * Обнуляем явно, не трогая саму картинку. */
body.iza-on ul.products .c-img { position: relative; aspect-ratio: 4/3; background: linear-gradient(180deg, #f7f8f9, #eef1f3); overflow: hidden; border-radius: 0; margin: 0; }
body.iza-on ul.products .c-img img { position: absolute; inset: 8% 10%; width: 80%; height: 84%; object-fit: contain; background: none !important; mix-blend-mode: multiply; transition: transform .7s var(--a-ease-out), opacity .4s; }
body.iza-on ul.products .c-img svg.xs { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: 0; transform: scale(.9) rotate(-20deg); transition: opacity .4s, transform .7s var(--a-ease-out); }
/* раунд 8 (координатор): эталон `.card .du` — своя ширина по паддингу+шрифту, у реальных Ду с 3
 * цифрами ("Ду 159") она и так шире мок-Ду ("Ду 57") — не подделываем число, но резервируем
 * МИНИМУМ ширины прото (51px), чтобы 2-значные реальные Ду не оказывались у́же эталона. */
body.iza-on ul.products .c-img .iza-bdg { position: absolute; top: 10px; left: 10px; z-index: 2; font: 700 12px var(--a-mono); padding: 4px 8px; border-radius: 7px; background: var(--a-ink); color: #fff; }
/* раунд 8 fix: min-width выше случайно попал и на .iza-bdg-s (.tag, оболочка ПЭ/ОЦ) через общий
 * класс .iza-bdg — раздул .tag с 32px до 51px (fid: w32→51, новый fail). Нужен он ТОЛЬКО на
 * .iza-bdg-d (.du, "Ду NNN") — у реальных 3-значных Ду текст шире 2-значного мок-Ду прото. */
body.iza-on ul.products .c-img .iza-bdg-d { box-sizing: border-box; min-width: 51px; text-align: center; }
/* раунд 5: эталон .tag (.iza-bdg-s) наследует line-height:1.55 от body прототипа — у нас своя
 * тема сбрасывает его к "normal" где-то выше, из-за чего fid.py видит lh 17.825px→normal на
 * каждой карточке; задаём явно, чтобы не зависеть от каскада темы. */
body.iza-on ul.products .c-img .iza-bdg-s { left: auto; right: 10px; top: 10px; font: 600 11.5px var(--a-f); line-height: 1.55; padding: 4px 8px; background: #fff; color: var(--a-ink); box-shadow: var(--a-sh-1); }
/* эталон: .card .bd/.spec/.pr — классы-алиасы на тех же узлах (ниже), геометрия уже как у .c-* */
body.iza-on ul.products.as-table .du, body.iza-on ul.products.as-table .tag { display: none; }
body.iza-on ul.products .st-prow:hover .c-img img { transform: scale(.86) translateX(-18%); opacity: .25; }
body.iza-on ul.products .st-prow:hover .c-img svg.xs { opacity: 1; transform: none; }
/* раунд 5: .c-name/.c-price раньше несли СВОИ горизонтальные margin:14px — остались с первой
 * версии (когда .bd-обёртки ещё не было). Теперь aliasCardProto() оборачивает их в div.bd
 * (card.css выше это описывает), а .bd уже получает padding:12px 14px 14px + gap:6px из
 * компилированного a.css (`.card .bd`, та же разметка proto) — старые margin ДВОИЛИ инсет
 * (28px лишних по бокам у .pr: эталон w198 vs факт w166, см. fid score.json .pr/.bd). Убираем,
 * оставляя только то, что .bd не даёт: margin-top:auto на цене (прижать к низу). */
body.iza-on ul.products .c-name {
  font-family: var(--a-f); font-size: 15px; font-weight: 600; margin: 0; line-height: 1.3;
  color: var(--a-ink); text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* раунд 11 (координатор): на Ду-landing эталонное имя мок-карточки — 2 строки; у реального товара
 * «Труба ППУ Ø159» имя короче, влезает в 1 строку — `.c-name` схлопывается ниже эталона и всё под
 * ним (`.spec`, цена) сдвигается выше (fid: .spec y792→773). Тот же приём, что у P-m `h1`
 * (EXCLUSIONS.md, раунд 6) — резервируем высоту под 2 строки, текст не меняем. Только Ду-landing:
 * обычный листинг (C-d) мок-имя в прото там короче, 2-строчный резерв там не нужен и даже вредит
 * (раунд 12: с резервом на всех `.spec` уезжал на +18px лишних, см. ниже про order). */
body.iza-du ul.products .c-name { min-height: calc(15px * 1.3 * 2); }
/* раунд 12 (найдено прямым осмотром computed style через getBoundingClientRect/matched CSS rules,
 * не догадкой): настоящая причина устойчивого сдвига `.spec` y854→827 на C-d — сетевая тема
 * (stalverk-next, чужой файл, не трогаем) задаёт `a.st-prow .c-name{order:1}` для СВОЕГО
 * горизонтального вида карточки; в нашем `.bd` (flex-column: name→spec→price) это протекает и
 * физически переставляет `.c-name` ПОСЛЕ `.spec` (у которого order:0 по умолчанию) — спека
 * рисуется выше имени. Явно фиксируем порядок внутри `.bd`, перебивая протечку. */
body.iza-on ul.products .bd .c-name { order: 1; }
body.iza-on ul.products .bd .spec { order: 2; }
body.iza-on ul.products .bd .c-price { order: 3; }
body.iza-on ul.products .c-d, body.iza-on ul.products .c-steel, body.iza-on ul.products .c-gost {
  font: 500 12px var(--a-mono); color: var(--a-muted); margin: 0; display: inline;
}
body.iza-on ul.products .c-d i.is-empty, body.iza-on ul.products .c-steel i.is-empty, body.iza-on ul.products .c-gost i.is-empty { display: none; }
body.iza-on ul.products .c-price {
  text-align: left; margin: auto 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: inherit !important; font-weight: 400 !important; color: inherit !important; padding-top: 0 !important;
  line-height: 1.55; min-height: 24.8px;
  /* сброс: тема/WooCommerce стилизует родной класс `price` (который сидит на том же узле) целиком
     18px/600/бренд-синим — эталон красит только дочерний <b>/.st-price-request, сам .pr обычный.
     раунд 8: line-height/min-height — та же находка, что у .tag (round 5): эталон наследует
     lh:1,55 (24,8px при font-size 16), сайт схлопывался до lh:normal/clipped (fid: lh24.8→20.8,
     h8→25) — задаём явно вместо надежды на каскад. */
}
/* раунд 8 (координатор, по аналогии с P-m min-height:2 строки у карточки): резервируем место под
 * спеку/цену/имя, как в proto/category.html .card .bd{padding:12px 14px 14px}+.spec(1 строка
 * реально может быть короче мок-текста — "стенка N мм"/реальный ГОСТ короче — fid:.spec h32→16
 * на Ду-landing) — не подменяем текст, просто не даём контейнеру схлопнуться ниже эталонной
 * высоты. 84px — обычный листинг (.c-name 2 строки+.spec 1 строка+.pr), 134px — Ду-landing
 * (renderDuCards: имя чуть длиннее, те же токены). */
body.iza-on ul.products .bd { min-height: 84px; }
body.iza-du ul.products .bd { min-height: 134px; }
/* раунд 12 (проверено отдельным замером): без min-height `.pr` (margin-top:auto, якорится на
 * низ `.bd`) съезжает выше цели (bd короче без форса) — fid: .pr y892→875. min-height:32 возвращён,
 * это резерв НИЗА контейнера (через margin-top:auto у цены), а не точная копия текста; при этом
 * известный неизбежный остаток — `.spec #1/#3` (реальный текст у этих карточек короче мок-строки
 * ровно там, где прото даёт 1 строку вместо 2 — геометрически не совпадёт с форсом без искл.). */
body.iza-on ul.products .spec { min-height: 32px; display: inline-block; }
/* раунд 10.1/12: Ду-landing — часть карточек эталона 2-строчная (fid: .spec h32→16, когда
 * форсили 1 строку в раунде 11) — природная высота, никакого форс-nowrap/ellipsis не нужно,
 * как и на обычном листинге выше. */
body.iza-du ul.products .card { min-height: 304px; }
body.iza-on ul.products .c-price b { font: 700 19px var(--a-mono); letter-spacing: -.02em; color: var(--a-ink); }
body.iza-on ul.products .c-price small { color: var(--a-muted); font-size: 12.5px; }
body.iza-on ul.products .c-price .st-from { font: 500 12.5px var(--a-f); color: var(--a-muted); }
body.iza-on ul.products .c-price .st-price-request { font: 600 15px var(--a-f); color: var(--a-steel); }
body.iza-on ul.products .c-price .c-stock { flex: 1 1 100%; order: 9; font: 500 11.5px var(--a-f); color: var(--a-muted); }
/* кнопка «Подробнее» сетевого стиля (оранжевая) запрещена по цели — вся карточка и так ссылка
 * (a.st-prow оборачивает всё), отдельная кнопка избыточна (координатор, приёмка поиска 2). */
body.iza-on ul.products .c-btn { display: none; }

/* --- вид «таблица» (переключатель только в листинге, listing.js добавляет .as-table — здесь же,
 * т.к. бьёт по тем же .c-* селекторам карточки) --- */
body.iza-on ul.products.as-table .st-prow { flex-direction: row; align-items: center; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--a-line); transform: none; gap: 14px; }
body.iza-on ul.products.as-table .c-img { width: 72px; aspect-ratio: 1; flex: none; margin: 10px 0 10px 10px; }
body.iza-on ul.products.as-table .c-name { margin: 0; flex: 1; }
body.iza-on ul.products.as-table .c-d, body.iza-on ul.products.as-table .c-steel, body.iza-on ul.products.as-table .c-gost { margin: 0 8px; }
body.iza-on ul.products.as-table .c-price { margin: 0 14px 0 0; }
/* сетевое появление карточек (mk-reveal-in, 36 шт.) конфликтует с hover-анимацией карточки и не уходит на композитор —
   основной вклад в TBT листинга; в эталоне сетка карточек без появления. Карточки сразу в конечном виде. */
body.iza-on ul.products li.st-prow-li { animation: none !important; opacity: 1 !important; transform: none !important; }