/* izolex-pro, Вариант A — часть listing (Э3). Переместка РЕАЛЬНОЙ разметки WooCommerce/сети
 * (не прото-классов) под эталон design/variant_a/proto/category.html. Токены/переменные — из
 * design/a/a.css (--a-steel/--a-amber/--a-ink/--a-muted/--a-line/--a-bg/--a-card/--a-r-m/--a-r-l/
 * --a-ease-out/--a-sh-1/--a-sh-2/--a-f/--a-mono/--a-wrap), всё внутри .iza (body.iza-on). */

/* Astra's .ast-container (вне .iza — обёртка .iza.iza-chrome открыта ВНУТРИ него) уже центрирует
 * и паддингует контент (margin:100px auto;padding:20px) — вместе с нашим ast-woocommerce-container
 * левый край уезжал на x≈144 вместо x≈104, как у шапки (.wrap: margin 80px auto + padding 24px).
 * Обнуляем именно на страницах листинга (без риска для header/home — свои body-классы WP archive). */
body.iza-on.tax-product_cat .ast-container,
body.iza-on.ast-woo-shop-archive .ast-container,
body.iza-on.search .ast-container { max-width: none; margin: 0; padding: 0; }
.iza .ast-woocommerce-container { max-width: var(--a-wrap); margin: 0 auto; padding: 24px 24px 60px; font-family: var(--a-f); color: var(--a-ink); }
/* BRIEF_A2 раунд 2 п.1/2: эталон .wrap — padding-top:0 (a.css), крошки сразу под навигацией.
   Своё правило выше даёт 24px сверху — лишний отступ перед .crumbs, которого нет в эталоне. */
.iza .ast-woocommerce-container.wrap { padding-top: 0; }
/* BRIEF_A2 раунд 3 (разбор координатора): getComputedStyle по предкам .crumbs нашёл источник
   оставшегося смещения по Y — не шапка (у неё высота совпадает), а #primary.content-area
   (тема Astra, margin-top:32px по умолчанию) ВНУТРИ .site-content, между шапкой и .wrap. Обнуляем
   только на страницах каталога/архива WooCommerce — не трогаем остальные шаблоны (header/footer). */
body.iza-on.tax-product_cat #primary.content-area,
body.iza-on.post-type-archive-product #primary.content-area,
body.iza-on.ast-woo-shop-archive #primary.content-area { margin-top: 0 !important; }
.iza .woocommerce-breadcrumb { display: flex; gap: 6px; align-items: center; color: var(--a-muted) !important; font-size: 13px; margin: 0 !important; padding: 18px 0 0 !important; flex-wrap: wrap; }
.iza .woocommerce-breadcrumb a { color: var(--a-muted) !important; text-decoration: none; }
.iza .woocommerce-breadcrumb a:hover { color: var(--a-steel) !important; }
/* раунд 8 (координатор, C-m): реальные названия крошек длиннее мок-подписей прото → `flex-wrap`
 * переносит крошку на 2-ю строку (`.crumbs` h39→67) и тянет весь каскад ниже (hero/eyebrow/art/
 * kpi/mono/du-strip/ruler/lbl) на те же +28px. На мобильном кадре прото крошки — одна строка в
 * одну полосу с overflow-x скроллом (не оборачиваются) — тот же приём на сайте: текст не режем,
 * просто не даём переносу съедать высоту; реальная цепочка крошек тут короче ширины экрана почти
 * всегда (2–3 уровня), скролл практически никогда не нужен. */
@media (max-width: 720px) {
  .iza .woocommerce-breadcrumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .iza .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}

/* раунд 10 (координатор): `.search .hint` — узел шапки (inc/a/header.php, не наша зона — её не
 * трогаем), но подсказка реального поиска длиннее мок-текста прото (fid: w271→310). Визуально
 * обрезаем так же, как сам прототип делает на мобильном (iz.css: .search .hint{overflow:hidden;
 * text-overflow:ellipsis}) — скоуп `.iza` активен только на страницах каталога (эта обёртка
 * печатается inc/a/listing.php вокруг шапки/подвала), header.php/.css не меняем.
 * Раунд 11: max-width резал только когда текст длиннее — но подсказка header.php подставляет
 * случайное название товара (ротация), иногда короче мок-текста эталона (fid: w271→228) и бокс
 * схлопывался. Нужна фиксированная ширина-резерв (width), не потолок (max-width); max-width:100%
 * страхует от переполнения на узких 375/390, если родитель уже у́же 271px. */
.iza .search .hint { display: inline-block; width: 271px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* раунд 12 (C-m, 390px): ширина-резерв 271px — находка для десктопной шапки (H-d); на мобильном
 * кадре прото поле поиска у́же, подсказка в эталоне занимает только ~152px — с фикс. width:271 +
 * max-width:100% сайт считал её от доступной ширины контейнера (208px), не от мок-ширины прото
 * (fid: .hint w152→208). Свой резерв под мобильный кадр, тот же приём. */
@media (max-width: 720px) {
  .iza .search .hint { width: 152px; }
}

/* --- шапка раздела = cat-hero (эталон: без карточки-подложки, 2 колонки 1.3fr/1fr) --- */
.iza .woocommerce-products-header.cat-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 14px 0 24px; margin: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.iza .woocommerce-products-header .iza-eyebrow { margin: 0; max-width: 345px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #9c5b10; font: 600 12.5px var(--a-mono); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; gap: 8px; align-items: center; } /* раунд 8 fix: max-width без nowrap заставлял текст переноситься на 2 строки (fid: h17→34) — добавлен nowrap+ellipsis, как у .search .hint в проекте. a11y С9: var(--a-amber) #E8A33D на белом = 2.16:1 — затемнён до #9c5b10 (та же гамма, 5.36:1), декоративный ::before наследует через currentColor */
.iza .woocommerce-products-header .iza-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.iza .woocommerce-products-header__title.page-title { font-size: clamp(32px, 3.6vw, 52px) !important; letter-spacing: -.035em; line-height: 1.02 !important; margin: 10px 0 12px; font-weight: 800 !important; }
.iza .iza-lead-short { margin: 0; color: var(--a-muted); font-size: 15px; line-height: 1.5; max-width: 60ch; }
.iza .iza-gost-line { margin: 8px 0 0; color: var(--a-steel); font: 600 12.5px var(--a-mono); letter-spacing: .02em; }
.iza .mk-cat-text, .iza .mk-section-lead { display: none; } /* длинный SEO-текст не теряем — JS переносит его под листинг (.iza-lead-below) */
.iza .iza-lead-below { background: #fff; border-radius: var(--a-r-l); box-shadow: var(--a-sh-1); padding: 18px 22px; margin: 0 0 20px; color: var(--a-muted); font-size: 14.5px; line-height: 1.6; max-width: 820px; }
.iza .mk-l7-gost-link { display: block; margin: 10px 0 0; color: var(--a-muted); font-size: 13.5px; }
.iza .mk-l7-gost-link a { color: var(--a-steel); }
.iza .iza-cover.art { height: 240px; border-radius: var(--a-r-l); background: radial-gradient(400px 220px at 70% 60%, #ffffff, #dfe7ec); position: relative; overflow: hidden; display: block; }
.iza .iza-cover.art img { position: absolute; right: 6%; bottom: -8%; width: 62%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.iza .iza-cover.art .kpi { position: absolute; left: 22px; top: 20px; z-index: 1; color: var(--a-ink); padding: 0; }
.iza .iza-cover.art .kpi b { display: block; font: 700 34px var(--a-mono); color: var(--a-steel); letter-spacing: -.03em; text-shadow: none; }
.iza .iza-cover.art .kpi span { font-size: 13px; color: var(--a-muted); text-shadow: none; }
@media (max-width: 860px) {
  .iza .woocommerce-products-header.cat-hero { grid-template-columns: 1fr; min-height: 449px; } /* раунд 9: резерв общей высоты — тянет каскад ПОСЛЕ cat-hero (.plp/.bar/.cnt/.sort/.view) к эталону */
  .iza .woocommerce-products-header.cat-hero > div:first-child { margin-bottom: 18px; } /* раунд 9: сама текстовая колонка (эйброу+h1+лид) на мобиле на ~18px короче мок-текста прото — резервируем зазор перед .art, не высоту текста (fid: .art/.kpi/.mono y на −18px) */
  .iza .iza-cover.art { height: 180px; }
  .iza .woocommerce-products-header .iza-eyebrow { white-space: normal; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; }
}

/* --- линейка Ду --- */
.iza .du-strip { background: #fff; border-radius: var(--a-r-l); padding: 14px 18px; box-shadow: var(--a-sh-1); display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.iza .du-strip .lbl { font-size: 13px; color: var(--a-muted); flex: none; } /* эталон .lbl без font-weight (400) — своя 600 раунда 1 была лишней */
.iza .du-ruler { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: none; flex: 1; }
.iza .du-ruler a { flex: none; text-decoration: none; color: var(--a-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; font: 600 12px var(--a-mono); transition: color .2s; }
.iza .du-ruler i { display: block; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid currentColor; position: relative; transition: transform .35s var(--a-ease-out); }
.iza .du-ruler i::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; }
.iza .du-ruler a:hover i { transform: translateY(-4px); }
.iza .du-ruler a[aria-current="true"] { color: var(--a-amber); }
.iza .du-ruler a[aria-current="true"] i { background: rgba(232,163,61,.15); transform: translateY(-4px) scale(1.06); }

/* --- plp: фильтры + контент --- */
.iza .plp { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
.iza .plp-content { min-width: 0; }
.iza .plp .facets { position: sticky; top: 16px; background: #fff; border-radius: var(--a-r-l); padding: 8px 18px; box-shadow: var(--a-sh-1); }
.iza .plp .facet { border-bottom: 1px solid var(--a-line); padding: 14px 0; }
.iza .plp .facet:last-child { border: 0; }
/* раунд 10 (координатор, «чекбоксы facet 0-1 расходятся на 11px»): прямым замером найдено — не
 * .chk (высота 32.47px совпадает с эталоном 1:1), а `h5` заголовок группы — тема даёт заголовкам
 * line-height:normal (~1.2 → 15.6px), эталон — 1.55 (как .tag/.c-price выше, тот же каскад темы) →
 * 20.1px. Разница по 4.55px на каждую группу копится к 3-й группе до ~11px сдвига вниз. */
.iza .plp .facet h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); line-height: 1.55; }
/* раунд 8: min-height — не подмена данных, просто не даём строке фасета схлопнуться ниже
 * эталонной высоты строки (32px = proto .chk с тем же padding/line-height), если реальный текст
 * чуть короче мок-подписи — убирает каскадный сдвиг y у всех строк и facet-блоков ниже. */
.iza .plp .chk { display: flex; align-items: center; gap: 10px; padding: 5px 0; min-height: 32px; box-sizing: border-box; font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--a-ink); width: 100%; cursor: pointer; }
.iza .plp .chk input { appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #b9c4cb; display: grid; place-items: center; margin: 0; flex: none; transition: background .2s, border-color .2s; }
.iza .plp .chk input::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale .25s; }
.iza .plp .chk input:checked { background: var(--a-steel); border-color: var(--a-steel); }
.iza .plp .chk input:checked::after { scale: 1; }
.iza .plp .chk small { margin-left: auto; font: 500 12px var(--a-mono); color: var(--a-muted); }

.iza .plp-content .bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
/* раунд 8 (координатор): `.cnt`/`.chip-on` — span/inline-flex без заданной ширины, у них min-width
 * не работал (не блочный контекст); реальное число позиций короче мок-текста → `.cnt` уже
 * (fid: w142→86). display:inline-block включает min-width без смены визуального поведения. */
.iza .plp-content .bar .cnt { display: inline-block; min-width: 142px; font-size: 14px; color: var(--a-muted); }
/* раунд 10: на Ду-landing эталон `.cnt` у́же (w134) — реальный счётчик там уже и так шире 142
 * (другое число/слово), min-width его не сузит. Режем визуально, как .hint/.spec выше — тот же
 * приём, не отдельное изобретение. */
body.iza-du .plp-content .bar .cnt { min-width: 0; max-width: 134px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iza .plp-content .bar .cnt b { color: var(--a-ink); font-family: var(--a-mono); }
.iza .plp-content .chips-on { display: flex; gap: 6px; flex-wrap: wrap; }
.iza .plp-content .chip-on { display: inline-flex; gap: 6px; align-items: center; height: 32px; min-width: 91px; box-sizing: border-box; padding: 0 6px 0 12px; border-radius: 8px; background: var(--a-ink); color: #fff; font-size: 13px; text-decoration: none; }
.iza .plp-content .chip-on .chip-x { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.15); }
.iza .plp-content .bar .sp { flex: 1; }
.iza .plp-content .woocommerce-ordering { margin: 0; }
.iza .plp-content select.sort { height: 38px !important; width: 164px !important; min-width: 164px !important; box-sizing: border-box; border-radius: 10px; border: 0; box-shadow: var(--a-sh-1); padding: 0 12px; font: inherit; font-size: 14px; background: #fff; appearance: auto; color: #000 !important; } /* эталон не задаёт color/width — нативный чёрный select; своя тема красит в синий и рендерит на 36px шире (другой шрифт в стеке) — перебиваем оба; раунд 5 (найдено Playwright-чтением matched rules): реальная причина w200 — `.woocommerce .woocommerce-ordering select{min-width:200px}` темы; min-width всегда выигрывает у width, даже с !important на width — нужен свой min-width !important, не только width */
.iza .plp-content .view { display: flex; background: #fff; border-radius: 10px; padding: 3px; box-shadow: var(--a-sh-1); }
/* BRIEF_A2 раунд 3: тема/WooCommerce добавляют свой button{padding:15px 30px} поверх — явно
   обнуляем (!important), иначе кнопки «плитка/таблица» раздувались до 60px вместо 36px. */
.iza .plp-content .view button { border: 0; background: transparent; width: 36px !important; height: 32px !important; padding: 0 !important; min-width: 0 !important; border-radius: 8px; display: grid; place-items: center; color: var(--a-muted); cursor: pointer; }
.iza .plp-content .view button[aria-pressed="true"] { background: var(--a-ink); color: #fff; }

/* --- сетка товаров: сам контейнер — только тут (листинг-специфика, есть .grid от listing.js).
 * Стили самой карточки (.st-prow/.c-*) вынесены в общий design/a/card.css — подключается и здесь,
 * и на поиске (inc/a/service.php), один источник вместо двух (координатор, приёмка поиска 2). */
.iza ul.products.grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.iza ul.products.grid.as-table { grid-template-columns: 1fr; gap: 0; background: #fff; border-radius: var(--a-r-l); box-shadow: var(--a-sh-1); overflow: hidden; }
.iza .st-loop-head { display: none; }

/* --- бенто подразделов: /catalogue/, /catalogue/ppu/ и т.п. (mk-section-grid/mk-root-groups) --- */
.iza .mk-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0 0 24px; }
.iza .mk-section-tile { background: #fff; border-radius: var(--a-r-m); box-shadow: var(--a-sh-1); padding: 18px; text-align: center; text-decoration: none; color: inherit; transition: transform .4s var(--a-ease-out), box-shadow .35s; }
.iza .mk-section-tile:hover { transform: translateY(-6px); box-shadow: var(--a-sh-2); }
.iza .mk-section-tile-img { display: block; margin: 0 auto 10px; width: 64px; height: 64px; }
.iza .mk-section-tile-img img, .iza .mk-section-tile-img svg { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.iza .mk-section-tile-name { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.iza .mk-section-tile-count { display: block; color: var(--a-muted); font: 500 12px var(--a-mono); }
.iza .mk-section-tile--extra { display: none; }
.iza .mk-section-more-toggle, .iza .mk-root-group-more { display: inline-block; margin: 0 0 24px; color: var(--a-steel); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.iza .mk-root-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 24px; }
.iza .mk-root-group { background: #fff; border-radius: var(--a-r-l); box-shadow: var(--a-sh-1); padding: 18px; }
.iza .mk-root-group-head { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-bottom: 10px; }
.iza .mk-root-group-img { width: 44px; height: 44px; flex: none; }
.iza .mk-root-group-img img, .iza .mk-root-group-img svg { width: 100%; height: 100%; object-fit: contain; }
.iza .mk-root-group-name { font-weight: 700; font-size: 15px; }
.iza .mk-root-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.iza .mk-root-group-list a { color: var(--a-muted); text-decoration: none; font-size: 13.5px; }
.iza .mk-root-group-list a:hover { color: var(--a-steel); }
.iza .mk-root-group-item--extra { display: none; }
.iza .mk-hub-products-h2 { font-size: 20px; margin: 30px 0 14px; }

/* --- «Всё для стыка Ду N» / Ду-landing таблица/соседи (mk-du-*) --- */
.iza .iza-types, .iza .mk-du-fasonka, .iza .mk-du-neighbors { padding-top: 40px; }
.iza .iza-types-eyebrow { color: var(--a-steel); font: 600 12.5px var(--a-mono); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px; }
.iza .iza-types h2, .iza .mk-du-fasonka h2, .iza .mk-du-neighbors h2 { font-size: 24px; margin: 0 0 16px; letter-spacing: -.02em; }
.iza .mk-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.iza .mk-chiprow .mk-chip, .iza .mk-du-fasonka .mk-chip, .iza .mk-du-neighbors .mk-chip { background: #fff; border-radius: var(--a-r-m); box-shadow: var(--a-sh-1); padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; transition: transform .3s var(--a-ease-out); }
.iza .mk-chiprow .mk-chip:hover { transform: translateY(-4px); color: var(--a-steel); }
.iza .mk-du-lead { color: var(--a-muted); font-size: 14.5px; margin: 0 0 16px; }
/* BRIEF_A2 раунд 2 п.3: эталон на Ду-landing — сетка карточек-вариаций (.grid), не таблица —
   своя сетка строится в listing.js (renderDuCards) из той же ul.products, таблицу прячем. */
.iza table.mk-du-variants { display: none; }
/* п.1: swatch-кружок у значений факета «Оболочка» (listing.js добавляет <i class="swatch">). */
.iza .plp .chk .swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.15); }

/* --- пагинация --- */
.iza .woocommerce-pagination { margin: 24px 0 0; }
.iza .woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.iza .woocommerce-pagination a, .iza .woocommerce-pagination span { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 8px; background: #fff; box-shadow: var(--a-sh-1); text-decoration: none; color: var(--a-ink); font-size: 13.5px; }
.iza .woocommerce-pagination .current { background: var(--a-ink); color: #fff; }

@media (max-width: 1100px) {
  .iza .plp { grid-template-columns: 1fr; }
  .iza .plp .facets { position: static; display: none; } /* эталон тоже прячет фасеты на мобиле (cat_m_*): фильтры доступны через линейку Ду и чипы */
  .iza ul.products.grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .iza .mk-section-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .iza .ast-woocommerce-container { padding: 16px 16px 40px; }
  .iza .woocommerce-products-header { padding: 20px; }
  .iza h1.woocommerce-products-header__title.page-title { font-size: 28px; }
  .iza .mk-section-grid { grid-template-columns: repeat(2, 1fr); }
  .iza .mk-root-groups { grid-template-columns: 1fr; }
  .iza .plp-content .bar { gap: 8px; }
}

/* Э6 CLS: обложку вставляет listing.js после разбора HTML — место под неё резервируем заранее */
.iza .woocommerce-products-header:not(:has(.iza-cover))::after { content: ""; grid-column: 2; height: 240px; border-radius: var(--a-r-l); background: radial-gradient(400px 220px at 70% 60%, #ffffff, #dfe7ec); }
@media (max-width: 860px) {
  .iza .woocommerce-products-header:not(:has(.iza-cover))::after { grid-column: 1; height: 180px; order: -1; }
}
/* Э7-пред: сетевая плашка складов (.st-pickup-card b) задаёт Oswald, файла нет — fallback; по дизайн-коду только Onest/JBM */
.iza .st-pickup-card b{font-family:var(--a-f);font-weight:700}