/*
 * tpl-product.css — Л4-card: карточка товара. Только transform/opacity для анимаций (Л-§2),
 * весь layout — flex/grid. Токены — из design/tokens.css (Д0), своя палитра/шрифт/иконки.
 * Перекладка галереи и чипы размеров — CSS над штатным DOM WooCommerce/stalverk-pokova-sizes.php,
 * сами файлы не трогаются (см. tpl-product.php).
 */

/* --- Cross-document View Transition: листинг → карточка. Имя по ID товара
   (pk-product-photo-<ID>) — согласовано с Л4-list (у него на плитках тот же формат), иначе на
   листинге с десятками карточек конфликт одинаковых view-transition-name в одном документе.
   Имя задаётся инлайн-стилем из tpl-product.php (hook wp_head) — тут только at-rule и
   reduced-motion (атрибут [style*="view-transition-name"] ловит инлайн-имя без знания ID). */
/* H1 карточки (В7-гейт): токен --pk-h1-product-size был в tokens.css, но не подключён — H1
   брал глобальный размер сети (next.css h1), крупнее эталон. Тот же приём !important, что у
   .pk-home-banner-text h1 (tpl-home.css) и .page-title (tpl-list.css). */
h1.product_title.entry-title {
  font-size: var(--pk-h1-product-size) !important;
  line-height: var(--pk-h1-product-lh) !important;
  font-weight: var(--pk-h1-product-w) !important;
}

@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    view-transition-name: none !important;
  }
}

/* --- 1. Галерея: миниатюры 72×72 рядом с фото (десктоп) / точки-свайп (моб., гейт п.1).
   Живой DOM этой версии WC НЕ добавляет класс .flexslider на обёртку (проверено) — старый
   селектор `.woocommerce-product-gallery.flexslider` никогда не совпадал, миниатюры оставались
   кадром в столбик. `.st-pc-top` — сетевой grid (stalverk-next/next.css, не трогаем): у него
   `.summary{display:contents}` — все дети .summary (H1, цена, вкладки) раскладываются как ПРЯМЫЕ
   grid-item'ы .st-pc-top по именованным grid-column/grid-row (.st-pc-head col2, .st-pc-buy col3
   sticky и т.д., только на ≥1200px — minmax(0,380px) minmax(0,1fr) 320px). Смена ЧИСЛА колонок
   (была ошибочная попытка 2 колонки) рушит эту раскладку — цена наезжает на H1, который
   схлопывается в colonку шириной с текст (гигантские вертикальные буквы, поймано на живом
   скрине). Трогаем ТОЛЬКО ширину первой колонки (фото), количество и grid-column детей — как
   в сети. */
@media (min-width: 1200px) {
  /* В6-карточка 18.10.2026: прежняя 3-колоночная сетка (фото | head+body | buy, сетевой
     next.css `@media(min-width:1200px)`) — источник находки L9_ACCEPT.md «pokova 3 колонки,
     буй-бокс со вторым списком». SPEC.md §6 требует 2 колонки (галерея | буй-бокс), остальное —
     ниже на всю ширину. Сетевой `.summary{display:contents}` не трогаем (н и один класс/тег не
     переименован) — просто перекладываем те же grid-item'ы (`.st-pc-head`/`.st-pc-buy`/
     `.st-pc-body`/`div.images`) в 2 колонки + 3 строки своим `!important` (тот же приём, что уже
     отбивал сетевой `grid-template-columns`). `.st-pc-head` (крошки — переносятся JS в начало
     страницы, 1d ниже, — и H1) встаёт НАД `.st-pc-buy` в одной col2-колонке — визуально это и
     есть «буй-бокс с H1» из SPEC; `.st-pc-body` (характеристики/соседние размеры/чипы страниц
     размеров `.mksz-links`) — на всю ширину строкой ниже, как «характеристики — ниже», без
     собственного переноса в вкладки (меньше риска, то же требование SPEC допускает оба варианта). */
  .st-pc-top {
    /* В9-ревью (family_after) п.1: сцена 3D крупнее (≈560×420 на 1440) — колонка галереи шире
       (480→560, тот же приём «трогаем только ширину первой колонки», комментарий выше). */
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }
  .st-pc-top > div.images {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    /* main 22.10: сетевой top:112px (от sticky) при position:relative сдвигал галерею с ползунками
       визуально, не в раскладке — кнопка КП наезжала на «Характеристики» */
    top: auto !important;
  }
  .st-pc-top .st-pc-head {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .st-pc-top .st-pc-buy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    /* сеть делала buy-колонку sticky, пока она была отдельной узкой 3-й колонкой во всю высоту
       экрана — теперь это обычный блок под H1 в той же колонке, sticky больше не нужен и мешал
       бы (прилипал бы поверх characteristics-блока ниже). */
    position: static !important;
    top: auto !important;
  }
  .st-pc-top .st-pc-body {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}
/* В7-скорость 18.10.2026 (раунд 2, «Галерея без flexslider»): flexslider отключён PHP-фильтром
   (woocommerce_single_product_flexslider_enabled → false, tpl-product.php) — он держал фото на
   opacity:0 до своей инициализации (JS в footer), это было главной причиной LCP ~5,1с (фото —
   LCP-кандидат, elementRenderDelay ~750мс). Без flexslider WC не строит `.flex-viewport` и
   `.flex-control-nav` вообще — сама вёрстка `.woocommerce-product-gallery__wrapper` +
   `.woocommerce-product-gallery__image` (по одной на фото) остаётся как есть (это печатает
   wc_get_gallery_image_html() независимо от флага). Лента теперь — чистый CSS scroll-snap,
   миниатюры/точки строит buildGalleryNav() (tpl-product.js) в свой `<div class="pk-gallery-nav">`
   из data-thumb, который WC всё равно печатает на каждом слайде. opacity:1 сразу — без ожидания
   JS-перестройки DOM, поэтому CLS не прыгает (старый баг CSS-костыля opacity:1!important на
   flexslider: CLS до 0,53, т.к. flexslider после init физически переставлял активный слайд). */
.woocommerce-product-gallery__wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  max-width: 100%;
  opacity: 1;
  scrollbar-width: none;
  /* В9-ревью: insertForgeSlide() (tpl-product.js) вставляет 3D-слайд ПЕРВЫМ после того, как лента
     уже отрисована — браузерный scroll anchoring компенсирует вставку, сдвигая scrollLeft на ширину
     слайда, чтобы старый первый слайд остался на месте. В итоге 3D уезжает за левый край (desktop,
     ≥2 слайдов; на мобильном у вала/кольца часто 1 слайд — баг не виден). overflow-anchor:none —
     штатное CSS-отключение якоря для этой ленты (без Safari, там якоря нет и так). */
  overflow-anchor: none;
}
.woocommerce-product-gallery__wrapper::-webkit-scrollbar {
  display: none;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}
/* Визуальный порядок фото → навигация → чертёж независимо от порядка в DOM (buildGalleryNav()
   вставляет .pk-gallery-nav следом за .woocommerce-product-gallery__wrapper, relocateDrawing()
   (tpl-product.js) добавляет .pk-vis последним ребёнком — order гарантирует порядок при любой
   перестройке). */
.woocommerce-product-gallery {
  display: flex;
  flex-direction: column;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  order: 1;
}
.woocommerce-product-gallery .pk-gallery-nav {
  order: 2;
}
.woocommerce-product-gallery .pk-vis {
  order: 3;
}
@media (min-width: 1024px) {
  /* Grid, не flex: .pk-vis (чертёж) — отдельная строка под фото+миниатюрами, см. комментарий у
     старой версии этого правила (до 18.10 — `.flex-control-nav`, теперь `.pk-gallery-nav`,
     логика та же: в одной flex-строке чертёж отнимал ширину у фото). */
  .woocommerce-product-gallery {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--pk-space-4);
    row-gap: var(--pk-space-4);
    align-items: start;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    overflow: hidden; /* на десктопе листаем только кликом по миниатюре, не свайпом */
  }
  .woocommerce-product-gallery .pk-gallery-nav {
    display: flex;
    grid-column: 1;
    /* span обе строки (фото + чертёж) — см. старый комментарий «пустота ~300px» (гейт п.3),
       причина та же независимо от того, кто строит миниатюры (flexslider раньше, JS теперь). */
    grid-row: 1 / 3;
    flex-direction: column;
    gap: var(--pk-space-2);
    width: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 620px;
    overflow-y: auto;
  }
  .woocommerce-product-gallery .pk-gallery-nav button {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--pk-color-border);
    border-radius: var(--pk-radius-sm);
    background: none;
    cursor: pointer;
    line-height: 0;
  }
  .woocommerce-product-gallery .pk-gallery-nav img {
    display: block;
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: inherit;
    transition: border-color var(--pk-dur-fast) var(--pk-ease-standard);
  }
  .woocommerce-product-gallery .pk-gallery-nav button.pk-active {
    border-color: var(--pk-color-brand);
    border-width: 2px;
  }
  .woocommerce-product-gallery .pk-vis {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (max-width: 1023px) {
  /* Точки вместо крупных миниатюр, мобильный peek-слайдер (SPEC): сама лента листается нативным
     скроллом/свайпом (scroll-snap выше), точки — только индикатор + клик = scrollIntoView.
     17.10.2026, гейт п.8: flex-wrap давал 2 ряда точек при 5+ фото — один ряд, горизонтальный
     скролл, пагинация скрыта (scrollbar-width none), сохранено. */
  .woocommerce-product-gallery .pk-gallery-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--pk-space-2);
    list-style: none;
    margin: var(--pk-space-3) 0 0;
    padding: 0 var(--pk-space-2);
    scrollbar-width: none;
  }
  .woocommerce-product-gallery .pk-gallery-nav::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-product-gallery .pk-gallery-nav button {
    flex-shrink: 0;
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  /* 17.10.2026, гейт раунд C п.2: кружок рисуется псевдоэлементом, саму картинку миниатюры
     (buildGalleryNav() кладёт <img> всегда, проще без JS-ветвления по ширине) на мобильном прячем —
     нужны только точки, не превью. */
  .woocommerce-product-gallery .pk-gallery-nav img {
    display: none;
  }
  .woocommerce-product-gallery .pk-gallery-nav button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pk-color-border-strong);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .woocommerce-product-gallery .pk-gallery-nav button.pk-active::after {
    width: 10px;
    height: 10px;
    background: var(--pk-color-brand);
  }
}

/* --- 1b. Селектор варианта (размер): сетевой `.st-wall-btns` (stalverk-next/stalverk.css,
   next-product.php — не трогаем) рисует ВСЕ типоразмеры стеной кнопок без ограничения высоты.
   На товарах с большим числом вариаций (найдено 748 на одном бойте) это растягивало карточку
   до ~13000px — не «компактный выпадающий блок» из SPEC §6. Ограничиваем высоту и даём свой
   скролл + токены вместо сетевого оранжевого акцента (#C98A1C), сам .st-wall-btns/кнопки/JS не
   трогаем, только CSS поверх. */
.variations.variations .st-wall-btns {
  /* сетевой `body.st-next .st-wall-btns{...!important}` — специфичность (0,2,1); есть и ВТОРОЕ
     правило `<style id="st-next-polish-2">` с тем же селектором, напечатанное инлайном в <body>
     ПОСЛЕ нашего <link> из <head> — при равной специфичности выигрывает более позднее по месту
     в документе, не наш файл. .variations.variations (класс дважды) даёт специфичность (0,3,0),
     которая выше (0,2,1) вне зависимости от порядка подключения — так и выигрываем каскад. */
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: var(--pk-space-1) var(--pk-space-2) var(--pk-space-1) 0;
  border: 1px solid var(--pk-color-border);
  border-radius: var(--pk-radius-md);
}
.variations .st-wall-btns button {
  border-radius: var(--pk-radius-sm);
  font-family: var(--pk-font-sans);
  /* длинные названия типоразмеров резались по ширине кнопки (гейт 17.10 п.4, «Болт М16 x 85
     ГОСТ 22353-77» обрезан) — сетевая кнопка однострочная nowrap+overflow:hidden; переносим
     текст на 2 строки вместо обрезки, высота у кнопки авто. */
  white-space: normal !important;
  height: auto !important;
  min-height: 36px;
  line-height: 1.25;
  text-align: center;
  padding: var(--pk-space-2) var(--pk-space-2) !important;
}
.variations .st-wall-btns button:hover {
  border-color: var(--pk-color-brand) !important;
}
.variations .st-wall-btns button.active {
  background: var(--pk-color-brand) !important;
  border-color: var(--pk-color-brand) !important;
  color: var(--pk-color-text-on-brand) !important;
}
/* Правила выше теперь страховка: tpl-product.js гасит сам сетевой скрипт (dataset.stbtns) до
   того, как он строит `.st-wall-btns`, — см. 1c ниже. Если скрипт всё же выиграл гонку (блок
   `.pk-wall-btns-hidden` ниже), прячем стену кнопок целиком — пользователь видит только наш
   комбобокс. */
.st-wall-btns.pk-wall-btns-hidden {
  display: none !important;
}

/* --- 1c. Свой компактный селектор размера (WAVE_BRIEFS В6-карточка п.1): поиск по вводу +
   список, рендер пунктов списка по требованию (только когда список открыт/отфильтрован — не на
   каждую из 797 option при загрузке страницы, см. L9_SPEED §8.2 "мainthread-work-breakdown").
   Строится tpl-product.js вокруг родного `<select>` WooCommerce, значение — то же самое поле
   формы (синхронизация через select.value + dispatchEvent('change'), ядро WC не трогаем). */
.pk-size-select {
  position: relative;
  max-width: 420px;
}
.pk-size-select-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 var(--pk-space-9, 40px) 0 var(--pk-space-4);
  border: 1px solid var(--pk-color-border-strong);
  border-radius: var(--pk-radius-md);
  font: inherit;
  font-size: var(--pk-text-base);
  color: var(--pk-color-text);
  background: var(--pk-color-bg);
}
.pk-size-select-input:focus {
  outline: none;
  border-color: var(--pk-color-brand);
  box-shadow: 0 0 0 3px var(--pk-color-bg-badge);
}
.pk-size-select-arrow {
  position: absolute;
  right: var(--pk-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--pk-color-text-muted);
  pointer-events: none;
}
.pk-size-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--pk-space-1);
  list-style: none;
  background: var(--pk-color-bg-elevated, #fff);
  border: 1px solid var(--pk-color-border-strong);
  border-radius: var(--pk-radius-md);
  box-shadow: var(--pk-shadow-lg, 0 8px 24px rgba(21, 24, 26, 0.16));
}
.pk-size-select-list[hidden] {
  display: none;
}
.pk-size-select-opt {
  padding: var(--pk-space-2) var(--pk-space-3);
  border-radius: var(--pk-radius-sm);
  font-size: var(--pk-text-sm);
  cursor: pointer;
}
.pk-size-select-opt:hover,
.pk-size-select-opt[aria-selected="true"] {
  background: var(--pk-color-bg-badge);
}
.pk-size-select-empty {
  padding: var(--pk-space-2) var(--pk-space-3);
  color: var(--pk-color-text-muted);
  font-size: var(--pk-text-sm);
}
/* Родной select остаётся в DOM и в форме (значение/submit не меняем), но визуально и для
   скринридера скрыт — всю доступность берёт на себя .pk-size-select (role=combobox/listbox).
   Не display:none: WooCommerce JS (wc-add-to-cart-variation.js) читает размеры/видимость в
   паре мест — стандартный visually-hidden паттерн безопаснее. */
.variations select.pk-size-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* --- 2. Наличие рядом с кнопкой --- */
.pk-avail {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  font-size: var(--pk-text-sm);
  color: var(--pk-color-text-muted);
  margin: var(--pk-space-2) 0 var(--pk-space-3);
}
.pk-avail-icon {
  color: var(--pk-success-600);
  flex-shrink: 0;
}

/* --- 3. Кнопки под/рядом с «В корзину».
   Л9г 18.10.2026 (В6-карточка, гейт п.8 шапки 360-375): бэйр `.pk-btn` здесь совпадал с тем же
   классом у кнопок ШАПКИ (`.pk-catalog-btn`/`.pk-cta`, pk-header.css/php) — на страницах товара
   этот файл грузится ПОСЛЕ pk-header.css и при равной специфичности (0,1,0) перебивал его
   padding (0 → var(--pk-space-3) var(--pk-space-5)), на 375px ширина «Заявка» росла 44→60px —
   этого хватало, чтобы `.pk-header-actions` не влезал в строку и переносился на вторую (гейт
   «шапка 185px вместо 140»), подтверждено живым CDP-замером (computed style). Скоуп на `.summary`
   (буй-бокс, см. `.st-pc-top>.summary{display:contents}`) и `.pk-sticky-buy` (мобильная липкая
   панель) — оба расположены только внутри карточки товара, шапка (печатается в wp_footer,
   `position:fixed`, НЕ потомок `.summary`) больше не попадает под это правило. */
/* В7-гейт: реальная кнопка «В корзину» WooCommerce — `.single_add_to_cart_button`, не `.pk-btn`
   (класс `pk-btn` на неё не навешивается, см. tpl-product.php) — радиус 10px шёл из дефолта
   сетевой темы (stalverk-next/stalverk.css, не трогаем файл, просто перекрываем своим CSS, грузится
   только на блоге 12). Замер SPEC: радиус кнопок/инпутов/ссылок хедера = 4px. */
body.single-product .summary button.single_add_to_cart_button.button,
body.single-product .pk-sticky-buy button.single_add_to_cart_button.button {
  border-radius: var(--pk-radius-control) !important;
}
.summary .pk-btn,
.pk-sticky-buy .pk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  border-radius: var(--pk-radius-control);
  padding: var(--pk-space-3) var(--pk-space-5);
  font-weight: var(--pk-fw-semibold);
  font-size: var(--pk-button-text-size);
  line-height: var(--pk-button-text-lh);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
/* В9-CSS 18.10.2026 (п.1, зона: только это правило высоты CTA): живой замер (w9_debug_cta2.py)
   нашёл настоящую CTA «Карточка (сотни вариаций)» — это `.single_add_to_cart_button` (48px,
   font 16px, высота задаётся WC-темой, не `.pk-btn` — тот уже был 40/15px и не совпадал с гейтом
   W7_TABLES.md «card: CTA высота 48, лемана 40»; `.pk-btn-kp` рядом — вторичная кнопка "Запросить
   счёт", не главная CTA, не трогал). Лемана-эталон 1440=40px, 375=48px (другой, не трогаем —
   уже близко, 49.4≈48, тач-цель и так ≥40) — тот же брейкпоинт 1024, что уже у border-radius
   строкой выше. */
@media (min-width: 1024px) {
  body.single-product .summary button.single_add_to_cart_button.button,
  body.single-product .pk-sticky-buy button.single_add_to_cart_button.button {
    /* min-height — не только height: сетевой .st-pc-buy .single_add_to_cart_button (next.css,
       не трогаем) ставит min-height:48px, который как нижняя граница box-модели побеждает
       меньший height даже с !important (это не каскад/специфичность, а сам min-height —
       нашёл живым замером, w9_debug_h12.py: первая попытка только с height не сработала). */
    height: 40px !important;
    min-height: 40px !important;
  }
}
.summary .pk-btn-primary,
.pk-sticky-buy .pk-btn-primary {
  background: var(--pk-color-brand);
  color: var(--pk-color-text-on-brand);
}
.summary .pk-btn-primary:hover,
.pk-sticky-buy .pk-btn-primary:hover {
  background: var(--pk-color-brand-hover);
  color: var(--pk-color-text-on-brand);
}
.summary .pk-btn-secondary {
  background: var(--pk-color-bg);
  color: var(--pk-color-brand);
  border-color: var(--pk-color-brand);
}
.summary .pk-btn-secondary:hover {
  background: var(--pk-color-bg-badge);
}
.summary .pk-btn-kp {
  margin-top: var(--pk-space-3);
}
.pk-moq {
  display: flex;
  align-items: center;
  gap: var(--pk-space-1);
  font-size: var(--pk-text-sm);
  color: var(--pk-color-text-muted);
  margin-top: var(--pk-space-2);
}
.pk-moq-icon {
  color: var(--pk-color-brand);
}

/* --- 4. Вкладки документы/доставка/оплата --- */
.pk-doc-list {
  list-style: none;
  margin: 0 0 var(--pk-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-2);
}
.pk-doc-list li {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
}
.pk-doc-list .pk-icon,
.pk-tab-delivery .pk-icon,
.pk-tab-payment .pk-icon {
  color: var(--pk-color-brand);
  flex-shrink: 0;
}
.pk-tab-note {
  color: var(--pk-color-text-muted);
  font-size: var(--pk-text-sm);
}
.pk-tab-link {
  color: var(--pk-color-brand);
  font-weight: var(--pk-fw-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-1);
}
.pk-tab-link:hover {
  text-decoration: underline;
}
/* 20.10.2026 (приёмка Ш3 п.4): «Скачать паспорт (PDF)» — обычная <a> без класса-кнопки, нигде в
   сети не стилизована — показывала синий цвет ссылки браузера по умолчанию. Тот же токен, что у
   .pk-tab-link (текстовая ссылка, не кнопка). */
.st-cta-pdf {
  color: var(--pk-color-brand);
}
.st-cta-pdf:hover {
  color: var(--pk-color-brand-hover);
}
.pk-icon-inline {
  vertical-align: middle;
}

/* --- 5. Чипы размеров (над `.mksz-links`, который остаётся как есть — только оформляем) --- */
.pk-size-picker-head {
  margin-top: var(--pk-space-4);
}
.pk-size-picker-label {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  font-weight: var(--pk-fw-semibold);
  font-size: var(--pk-h3-product-size);
  line-height: var(--pk-h3-product-lh);
}
.pk-size-picker-label .pk-icon {
  color: var(--pk-color-brand);
}
/* Л9 17.10.2026 (коорд. п.1): `.mksz-links` — прямой grid-item сетевой `.st-pc-top` (п.1 выше,
   `.summary{display:contents}`), средняя дорожка `minmax(0,1fr)`. Без своего `min-width:0` у
   элемента дефолт `min-width:auto` считался по max-content (длинный ПОЛНЫЙ текст чипа из
   `_mk_size_h1`, п.1), чипы вылезали вправо под блок цены (3-я дорожка 320px, скрин
   l9d_card_1440.png) — тот же паттерн, что уже чинили в `.pk-often-search` (строка ниже по
   файлу) и в подвале `.pk-footer-grid`. Текст самих чипов теперь короче (JS, tpl-product.js:
   shortenSizeChips — только типоразмер, полное имя в title), но min-width:0 нужен в любом
   случае как структурная защита (длинные обозначения вроде «ТУ 10.20.42-387-00472012-2018»
   тоже не короткие). */
.mksz-links {
  margin-top: var(--pk-space-2) !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2);
  font-size: 0; /* прячем служебный текст-подпись узла, оставляя только чипы-ссылки */
  min-width: 0;
  width: 100%;
}
.mksz-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--pk-text-sm);
  border-radius: var(--pk-radius-pill);
  border: 1px solid var(--pk-color-border-strong);
  background: var(--pk-color-bg);
  color: var(--pk-color-text);
  padding: var(--pk-space-2) var(--pk-space-4);
  text-decoration: none;
  white-space: normal;
  max-width: 100%;
}
.mksz-links a:hover,
.mksz-links a:focus-visible {
  border-color: var(--pk-color-brand);
  color: var(--pk-color-brand);
}

/* --- 5b. Этап 4 (AUDIT_2026-10-22.md §2.4, вариант A): 3D-сцена «Кузня» (design/pk-forge.js) +
   ползунки D/L(/d_in) + «Ближайшие размеры»/вся таблица (.pksz-near/.pksz-all,
   stalverk-pokova-sizes.php). Фото-круг в маленькой пустой подложке (аудит В4) уходит — на его
   месте .pk-forge-wrap (design/pk-forge.css задаёт размер канвы, здесь — только раскладка блока
   относительно ползунков). */
.pk-forge-block {
  display: grid;
  gap: var(--pk-space-4);
  margin: var(--pk-space-4) 0;
}
@media (min-width: 640px) {
  .pk-forge-block {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}
/* tpl-product.js::insertForgeSlide() переносит #pk-forge-stage в галерею (слайд 0) — в
   .pk-forge-block остаются только ползунки, вторая колонка больше не нужна. */
.pk-forge-block:not(:has(#pk-forge-stage)) {
  grid-template-columns: 1fr;
}
.pk-forge-slide {
  display: flex;
}
.pk-forge-slide .pk-forge-wrap {
  width: 100%;
}
/* Ш9 CARD_NOTES п.2: слайд «Чертёж» — переиспользует pksz_fallback_svg() (тёмно-серая линия на
   белом, как на странице размера); галерея тут тёмная (#0E1114, см. ниже), поэтому слайду нужна
   своя светлая подложка — иначе чертёж не виден. Размер слайда задаёт сама галерея
   (flex:0 0 100% + aspect-ratio родителя), здесь только центрируем SVG. */
.pk-draw-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.pk-draw-slide .pk-draw-stage {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pk-draw-slide svg {
  width: 100%;
  height: 100%;
}
.pk-forge-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-3);
}
/* В9-ревью п.2: relocateSliders() (tpl-product.js) переносит блок в `.woocommerce-product-gallery`
   (левая колонка, сразу под 3D/навигацией миниатюр) — добавляем отступ сверху и явную подложку,
   раньше этот отступ шёл от родителя `.pk-forge-block`, которого здесь больше нет. */
.woocommerce-product-gallery > #pk-forge-sliders {
  margin-top: var(--pk-space-4);
  padding-top: var(--pk-space-4);
  border-top: 1px solid var(--pk-color-border);
}
.woocommerce-product-gallery > #pk-size-picker {
  margin-top: var(--pk-space-3);
}
.pk-forge-field label {
  display: flex;
  justify-content: space-between;
  font-size: var(--pk-text-sm);
  color: var(--pk-color-text-muted);
  margin-bottom: var(--pk-space-1);
}
.pk-forge-field output {
  color: var(--pk-color-text);
  font-weight: var(--pk-fw-semibold);
  font-variant-numeric: tabular-nums;
}
/* тач-цель ползунка ≥44px (SPEC мобайл): сама дорожка тонкая, но область клика/тапа — вся высота
   инпута, не только видимый трек. */
.pk-forge-field input[type="range"] {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--pk-color-brand);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* В9-ревью п.4: accent-color одного не хватает — Chrome не заливает трек до бегунка, Firefox даёт
   системно-синий фоллбэк на некоторых сборках. Свой трек/бегунок в --pk-color-brand, заливка до
   значения через --fs-fill (tpl-product.js::updateFill, 0-100%). Тач-цель — вся высота 44px input,
   видимый трек тоньше (6px), у thumb есть паддинг сверху/снизу внутри тех же 44px. */
.pk-forge-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pk-color-brand) 0%, var(--pk-color-brand) var(--fs-fill, 50%), var(--pk-color-border-strong) var(--fs-fill, 50%), var(--pk-color-border-strong) 100%);
}
.pk-forge-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pk-color-brand);
  border: 3px solid var(--pk-color-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  margin-top: -9px;
}
.pk-forge-field input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pk-color-border-strong);
}
.pk-forge-field input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--pk-color-brand);
}
.pk-forge-field input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pk-color-brand);
  border: 3px solid var(--pk-color-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.pk-forge-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pk-space-2);
  padding: var(--pk-space-3);
  border-radius: var(--pk-radius-md);
  background: var(--pk-color-bg-muted, #f4f4f4);
}
.pk-forge-result div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pk-forge-result span {
  font-size: var(--pk-text-xs, 12px);
  color: var(--pk-color-text-muted);
}
.pk-forge-result strong {
  font-size: var(--pk-text-base);
  font-variant-numeric: tabular-nums;
}
.pk-forge-kp {
  width: 100%;
  justify-content: center;
  height: 48px;
}
@media (max-width: 767px) {
  .pk-forge-result {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* «Ближайшие размеры» (6 кнопок) + раскрываемая «Вся таблица» — вместо стены ~200 размеров
   абзацем (аудит §1 «семейство»). */
.pksz-near {
  margin-top: var(--pk-space-4);
}
.pksz-near-title {
  font-weight: var(--pk-fw-semibold);
  font-size: var(--pk-h3-product-size);
  margin: 0 0 var(--pk-space-2);
}
.pksz-near-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--pk-space-2);
}
.pksz-near-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--pk-space-2) var(--pk-space-3);
  border-radius: var(--pk-radius-md);
  border: 1px solid var(--pk-color-border-strong);
  background: var(--pk-color-bg);
  color: var(--pk-color-text);
  text-decoration: none;
  text-align: center;
  font-size: var(--pk-text-sm);
}
.pksz-near-grid a:hover,
.pksz-near-grid a:focus-visible {
  border-color: var(--pk-color-brand);
  color: var(--pk-color-brand);
}
.pksz-all {
  margin-top: var(--pk-space-3);
}
.pksz-all summary {
  cursor: pointer;
  font-weight: var(--pk-fw-semibold);
  color: var(--pk-color-brand);
  padding: var(--pk-space-2) 0;
}
/* Ш11 CARD п.3: внутри #pksz-near (карточка семьи) «Вся таблица размеров» — полноширинная плашка,
   не просто текстовая строка, см. комментарий у #pksz-near align-self выше. */
body.single-product .st-pc-body > #pksz-near .pksz-all summary {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--pk-space-3) var(--pk-space-4); margin-top: var(--pk-space-2);
  border: 1px solid var(--pk-color-border); border-radius: 10px; list-style: none;
}
body.single-product .st-pc-body > #pksz-near .pksz-all summary::-webkit-details-marker { display: none; }
body.single-product .st-pc-body > #pksz-near .pksz-all summary::after { content: "▾"; transition: transform .2s ease; }
body.single-product .st-pc-body > #pksz-near .pksz-all[open] summary::after { transform: rotate(180deg); }
body.single-product .st-pc-body > #pksz-near .pksz-all summary:hover { border-color: var(--pk-color-brand); }
.pksz-all .pksz-sizetable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 480px;
  overflow-y: auto;
}
.pksz-all .pksz-sizetable table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--pk-text-sm);
}
.pksz-all .pksz-sizetable th,
.pksz-all .pksz-sizetable td {
  padding: var(--pk-space-2) var(--pk-space-3);
  border-bottom: 1px solid var(--pk-color-border);
  text-align: left;
}
.pksz-all .pksz-sizetable a {
  color: var(--pk-color-text);
  text-decoration: none;
}
.pksz-all .pksz-sizetable tr:hover {
  background: var(--pk-color-bg-muted, #f4f4f4);
}

/* Блок покупки: одна главная кнопка (.pk-forge-kp, слайдеры выше) — дубль «Запросить КП» в штатной
   форме WooCommerce прячем (сам узел не удаляем, он работал бы и без ползунков — на семействах без
   размерных метаданных слайдеров нет, pk-forge-kp не печатается, и этот :has() не сработает, тогда
   старая кнопка остаётся видимой как раньше). «В корзину»/«Очистить»/количество остаются
   функциональными, но мельче и ниже — второстепенные контролы, не 3 равноправные кнопки. */
body.single-product:has(#pk-forge-kp) .summary .pk-btn-kp {
  display: none;
}
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  margin-top: var(--pk-space-3);
  padding-top: var(--pk-space-3);
  border-top: 1px solid var(--pk-color-border);
}
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .pk-avail,
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .pk-moq {
  flex: 1 1 100%;
  margin: 0;
}
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
  height: 36px !important;
  min-height: 36px !important;
  font-size: var(--pk-text-sm) !important;
  padding: 0 var(--pk-space-3) !important;
}
body.single-product:has(#pk-forge-kp) .variations .reset_variations {
  font-size: var(--pk-text-sm);
  color: var(--pk-color-text-muted);
}
/* В9-ревью п.3: ползунки полностью заменяют выпадающий «Размер» — родной select остаётся в DOM
   и в форме (syncSelect(), tpl-product.js, шлёт туда change), но саму таблицу/комбобокс «Размер»
   прячем целиком, чтобы не было двух контролов выбора размера одновременно. */
body.single-product:has(#pk-forge-kp) table.variations {
  display: none;
}
/* Вторая кнопка «Запросить счёт / КП» — сетевая `.st-cta` (next-product.php, не трогаем файл),
   рядом с нашей главной `#pk-forge-kp` (тот же href /kontakty/, дубль). Телефон/email — обычные
   текстовые ссылки без класса st-cta, их не трогаем. */
/* .st-cta — ссылка внутри неклассованного <p> (st_pc_split(), next-product.php, кладёт весь <p>
   целиком в buy.cta) — не прямой потомок .st-pc-buy, нужен descendant-селектор, не child (>). */
body.single-product:has(#pk-forge-kp) .st-pc-buy .st-cta {
  display: none;
}
/* «В корзину» — вторичная кнопка (обводка), главная CTA — #pk-forge-kp у ползунков. */
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
  background: var(--pk-color-bg) !important;
  color: var(--pk-color-brand) !important;
  border: 1px solid var(--pk-color-brand) !important;
}
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button:hover {
  background: var(--pk-color-bg-badge) !important;
}

/* --- 6. Чертёж/3D (mkv_*, stalverk-pokova-visual.php) — сам .pk-vis/.mkv-dims не трогаем,
   только цветовая подгонка и место в новой позиции (JS переносит .pk-vis в конец галереи,
   .mkv-dims во вкладку «Характеристики» — tpl-product.js, гейт п.2/п.3). */
.woocommerce-product-gallery .pk-vis {
  margin-top: var(--pk-space-4);
}
.mkv-fig figcaption {
  color: var(--pk-color-text-muted) !important;
  font-size: var(--pk-text-sm) !important;
}
#tab-additional_information .mkv-dims {
  width: auto !important;
  margin: 0 0 var(--pk-space-4) !important;
  border-collapse: collapse;
}
#tab-additional_information .mkv-dims th,
#tab-additional_information .mkv-dims td {
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px solid var(--pk-color-border);
  text-align: left;
}
.mkv-dims th {
  color: var(--pk-color-text-muted) !important;
}

/* --- 8. «Тот же тип по другим стандартам» / «Другие типоразмеры этого стандарта»
   (секции pk-hubs/pk-parts, печатаются функциями сети вне этого файла) — список-колонки → чипы
   как .mksz-links (Д0, гейт п.5); бьём инлайн style="columns:2;..." самого <ul> через !important. */
.pk-hubs ul,
.pk-parts ul {
  columns: initial !important;
  padding-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2);
  list-style: none;
  margin: var(--pk-space-2) 0 0;
}
/* Разметка сети печатает счётчик ПОСЛЕ <a> как голый текст в <li> (`<a>Болты</a> (428)`, не мой
   файл) — раньше чип красили на <a>, и « (428)» торчало снаружи пилюли некрашеным текстом
   (гейт 17.10 п.6). Красим саму <li> как пилюлю (в неё попадают оба узла — ссылка и счётчик),
   <a> — обычный текст-ссылка без своей рамки. */
.pk-hubs li,
.pk-parts li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: var(--pk-text-sm);
  border-radius: var(--pk-radius-pill);
  border: 1px solid var(--pk-color-border-strong);
  background: var(--pk-color-bg);
  color: var(--pk-color-text-muted);
  padding: var(--pk-space-2) var(--pk-space-4);
  white-space: nowrap;
}
.pk-hubs a,
.pk-parts a {
  color: var(--pk-color-text);
  text-decoration: none;
}
.pk-hubs li:hover,
.pk-parts li:hover {
  border-color: var(--pk-color-brand);
}
.pk-hubs a:hover,
.pk-hubs a:focus-visible,
.pk-parts a:hover,
.pk-parts a:focus-visible {
  color: var(--pk-color-brand);
}
.pk-hubs h2,
.pk-parts h2 {
  font-size: var(--pk-h3-product-size) !important;
  font-weight: var(--pk-fw-semibold) !important;
  margin: 0 0 var(--pk-space-2) !important;
}
/* Длинный типоразмер/название категории в чипе (nowrap) шире 375px не влезал и не ужимался
   (flex-item без min-width:0 не сжимается ниже content-ширины) — раздвигал всю страницу по
   горизонтали (document.documentElement.scrollWidth=1200 на 375, гейт п.7). На узких экранах
   переносим текст внутри чипа вместо горизонтального распирания. */
@media (max-width: 600px) {
  .mksz-links a,
  .pk-hubs a,
  .pk-parts a {
    white-space: normal;
    max-width: 100%;
  }
}

/* --- 6b. «Часто ищут» / «С этим заказывают» (tpl-seo.php — не мой файл, не трогаю, только
   CSS поверх его public HTML, как и .mksz-links/.pk-hubs выше). На карточке товара `.pk-wrap`
   из этого блока — flex-item в `div.product` (WC/astra-woo, flex-direction:column), а
   `.pk-chip` внутри `.pk-chiprow` — nowrap; без `min-width:0` у флекс-айтема браузерный дефолт
   `min-width:auto` считается по max-content нерастягивающихся чипов — элемент растягивается до
   ~1180px вместо ширины страницы (гейт п.7: scrollWidth 1200 на 375 px). Тот же паттерн уже
   чинили в подвале, см. .pk-footer-grid (Л4-svc). overflow-x:auto у .pk-chiprow — свой, не трогаем,
   просто даём ему сжаться до контейнера, чтобы горизонтальный скролл сработал как задумано. */
.product .pk-wrap.pk-often-search {
  min-width: 0;
  width: 100%;
  /* 17.10.2026, гейт раунд C п.3: «С этим заказывают» стоял вплотную к H2 «Похожие»
     (следующий соседний блок .related.products, тот же родитель, подтверждено живым DOM) —
     нет общего ритма секций ≥32px. Тащим отступ снизу сюда, а не на .related.products
     (чужая секция WC), чтобы остаться в своём файле. */
  margin-bottom: var(--pk-space-8, 32px);
  /* 17.10.2026, повторный гейт п.7: .pk-wrap — сетевой контейнер max-width:1180px+24px паддинг
     (pk-header.css) — свой второй инсет ПОВЕРХ уже существующего отступа родителя внутри карточки
     товара (тот же родитель, что держит .st-pc-top без доп. паддинга в этом месте) — заголовок
     «С этим заказывают» съезжал правее фото/вкладок. У родителя уже есть нужный отступ —
     снимаем здесь свой, растягиваемся на всю его ширину (без центровки/паддинга). */
  max-width: none;
  padding: 0;
}
/* .pk-chiprow (pk-header.css) сам себе задаёт max-width+паддинг — внутри уже выровненного
   .pk-wrap это даёт двойной отступ слева у чипов относительно заголовка h2. Обнуляем здесь. */
.product .pk-often-search .pk-chiprow {
  max-width: none;
  margin: 0;
  padding: var(--pk-space-2) 0;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Стрелки прокрутки карусели (гейт п.7, «обрезана без стрелок») — добавляются JS (tpl-product.js)
   как кнопки поверх .pk-chiprow, сам DOM чипов (чужой tpl-seo.php) не трогаем. */
.pk-often-search {
  position: relative;
}
/* В7-гейт: «С этим заказывают» на карточке товара — та же непокрытая plain h2, здесь роль
   продуктовая (не раздел), берём --pk-h2-product-size; на разделах/поиске свой вариант
   в tpl-list.css (.pk-often-search h2, роль «раздел»). */
.product .pk-often-search h2 {
  font-size: var(--pk-h2-product-size) !important;
  line-height: var(--pk-h2-product-lh) !important;
}
/* В10-CSS 18.10.2026 (п.7): таблица W9_MEASURE считала "эталон 15 / pokova 24" НЕ ok — пересняли
   эталон явным селектором главной цены на карточке товара (Chrome 9223,
   (URL эталона),
   [data-qa="prices_mf-pdp"] → span с цифрой): старый замер ловил обёртку-контейнер
   (computed font-size 14px — просто line-height-блок), а не сам span с суммой (computed
   27px/700). 24px у нас и так были рядом (вес 700 совпадал уже) — подгоняем точно под
   доказанный эталон 27px, саму цену/наценку/НДС не трогаем, только размер шрифта. */
.single-product .summary .price {
  font-size: 27px !important;
  font-weight: 700 !important;
}
/* В10-CSS 18.10.2026 (п.4): остальные H2-секции карточки — «Похожие» (WC `.related.products`),
   «Частые вопросы» (`.st-pfaq`, наш блок), «Ещё в разделе» (`.stv4-near__h`, сетевой виджет) —
   тот же непокрытый plain h2/класс 34px/800, роль та же, что у «С этим заказывают» выше. CSS-
   правка поверх чужой разметки (как и .pk-often-search h2 выше), саму разметку не трогаем. */
.product .related.products h2,
.product .st-pfaq h2,
.stv4-near__h {
  font-size: var(--pk-h2-product-size) !important;
  line-height: var(--pk-h2-product-lh) !important;
  font-weight: var(--pk-fw-semibold) !important;
}
@media (max-width: 720px) {
  .product .pk-often-search h2,
  .product .related.products h2,
  .product .st-pfaq h2,
  .stv4-near__h {
    font-size: 19px !important;
    line-height: 24px !important;
  }
}
.pk-chip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--pk-color-border-strong);
  background: var(--pk-color-bg-elevated, #fff);
  color: var(--pk-color-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(21, 24, 26, 0.12);
}
.pk-chip-arrow:hover {
  border-color: var(--pk-color-brand);
  color: var(--pk-color-brand);
}
.pk-chip-arrow .pk-icon {
  width: 16px;
  height: 16px;
}
.pk-chip-arrow-prev {
  left: 0;
}
.pk-chip-arrow-next {
  right: 0;
}
.pk-chip-arrow[hidden] {
  display: none;
}
@media (max-width: 767px) {
  /* на мобильном карусель и так листается пальцем, кнопки только занимают место над чипами */
  .pk-chip-arrow {
    display: none !important;
  }
}

/* --- 7. Мобильная липкая нижняя панель --- */
.pk-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pk-z-header, 100);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-3);
  background: var(--pk-color-bg-elevated);
  border-top: 1px solid var(--pk-color-border);
  padding: var(--pk-space-3) var(--pk-space-4);
  box-shadow: 0 -4px 16px rgba(21, 24, 26, 0.08);
  transition: transform var(--pk-dur-base) var(--pk-ease-standard), opacity var(--pk-dur-base) var(--pk-ease-standard);
}
.pk-sticky-buy.pk-sticky-hidden {
  transform: translateY(100%);
  opacity: 0;
}
.pk-sticky-price {
  font-weight: var(--pk-fw-semibold);
  font-size: var(--pk-h3-product-size);
  color: var(--pk-color-text);
  white-space: nowrap;
}
.pk-sticky-unit {
  font-size: var(--pk-text-sm);
  color: var(--pk-color-text-muted);
  font-weight: var(--pk-fw-regular);
}
@media (max-width: 767px) {
  body.single-product .pk-sticky-buy {
    display: flex;
  }
  /* место под фикс-панель, чтобы не перекрывала нижний контент (CLS=0: отступ задан сразу) */
  body.single-product {
    padding-bottom: 76px;
  }
  /* сетевой плавающий «Запросить счёт» (#st-pbar, stalverk-next) дублирует нашу липкую
     панель цены/CTA на карточке — оставляем один CTA (гейт п.5). */
  body.single-product #st-pbar {
    display: none !important;
  }
  /* сетевой общесайтовый FAB (.st-fab — телефон + «Запросить счёт», stalverk.css) на мобильной
     карточке товара дублирует ту же цену/CTA, что уже даёт .pk-sticky-buy (гейт п.5, «дубль липкой
     цены и плавающей кнопки»). Прячем только на этой странице (single-product), на остальных
     страницах сайта (где нашей sticky-панели нет) FAB остаётся как есть — не трогаем его файл. */
  body.single-product .st-fab {
    display: none !important;
  }
}

/* Л9б 17.10.2026 п.4: нейтральный класс вместо .out-of-stock (тема/WC красит его в красный) —
   добавлен явно, а не оставлен на "цвет по умолчанию", чтобы будущая правка общих стилей
   .stock не могла случайно снова покрасить его (inc/tpl-product.php добавляет класс фильтром
   woocommerce_get_availability_class). */
.stock.pk-on-request {
  color: var(--pk-graphite, #15191C);
}

/* 17.10.2026, гейт раунд C п.1: костыль «body.single-product .related.products .st-reveal
   {opacity:1!important}» снят (Л9) — живая проверка CDP (плавный скролл по 600px, 12 шагов)
   показала 4/4 .st-reveal в «Похожих» получают .st-in корректно; резкие прыжки на 2000px
   в первом тесте пропускали окно пересечения — это артефакт теста, не баг сайта. Корень
   чинится в одном месте — design/motion.js:initStRevealBackup() (свой наблюдатель поверх
   .st-reveal на случай, если сетевой IntersectionObserver из stalverk-alive.php когда-нибудь
   не успеет из-за AJAX-перерисовки вариативного товара) + noscript-фолбэк в functions.php. */

/* Л9с 17.10.2026 (бюджет скорости Л-§3.7, рычаг 2 — вес DOM/Style&Layout): «Похожие»
 * (.related.products, стандартный WC-блок из stalverk-next, файл не трогаем) и вкладки
 * (.woocommerce-tabs .panel) лежат ниже первого экрана — content-visibility:auto экономит
 * layout/paint до приближения к видимой области, финальный вид не меняется (тот же приём,
 * что уже даёт .st-reveal выше). contain-intrinsic-size — грубая оценка высоты, чтобы скролл
 * не прыгал до вычисления реального размера. Откат — удалить этот блок правил. */
.single-product .related.products,
.single-product .upsells.products,
.single-product .woocommerce-tabs .panel {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* В11-LCP-карточки 18.10.2026 (W11_CARD.md): место под мобильные точки .pk-gallery-nav
   (8px + отступ 12px) держим заранее, пока их не построил buildGalleryNav() на DOMContentLoaded.
   Иначе видимая сразу галерея сдвигала #st-buy (CLS ~0,01). Только при ≥2 фото: как и в JS. */
@media (max-width: 1023px) {
  .woocommerce-product-gallery:not(:has(.pk-gallery-nav)):has(.woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image)::after {
    content: "";
    order: 2;
    display: block;
    height: 8px;
    margin-top: var(--pk-space-3);
  }
}

/* В11-LCP-карточки 18.10.2026 (W11_CARD.md §4). Сетевой mu-plugin stalverk-mobile-toolbar.php прячет
   полосу крошек правилом `body:has(.woocommerce-breadcrumb) .st-crumbs{display:none}`. :has() срабатывает,
   только когда парсер дойдёт до крошек WC в .st-pc-head. До этого полоса (53px) уже нарисована, и весь
   #content прыгает вверх: CLS 0,078 на 375 под Slow4G+CPU×4. На карточке крошки WC есть всегда, поэтому
   прячем полосу сразу. */
body.single-product .st-crumbs {
  display: none;
}

/* main 22.10: галерея — грид «80px миниатюры | 464px сцена»; шапка подбора и ползунки — на всю ширину, иначе ползунки падают в колонку миниатюр 80px */
.woocommerce-product-gallery > #pk-size-picker,
.woocommerce-product-gallery > #pk-forge-sliders { grid-column: 1 / -1; }

/* r9 22.10 (PLAN_R9 п.7): на семействе две цены подряд — диапазон WC «521,85 – 134 675 ₽» и цена
   выбранного размера «48 098 ₽ / шт». Когда размер выбран, главная — его цена; диапазон уходит
   в мелкую серую строку с подписью. Без выбранного размера всё как было. */
/* RM Э8 rm6 п.9: подпись переехала ПОСЛЕ цены (tpl-product.js переносит узел) — margin сверху,
   кегль 13 px, как на рендере. */
.single-product .summary:has(.woocommerce-variation-price .price) p.price {
  font-size: 13px !important; font-weight: 500 !important; color: var(--pk-color-text-muted) !important; margin: 4px 0 0 !important;
}
.single-product .summary:has(.woocommerce-variation-price .price) p.price .amount { color: inherit !important; font-weight: 500 !important; }
.single-product .summary:has(.woocommerce-variation-price .price) p.price::before { content: "Диапазон по размерам: "; }
/* RM Э8 rm6 п.9: на рендере главная цена крупнее и жирнее (кегль 36–40, вес 800) */
.single-product .summary .woocommerce-variation-price .price { font-size: clamp(27px, 2.6vw, 38px) !important; font-weight: 800 !important; }

/* ===== RM Э7 22.10.2026: карточка ближе к рендеру r9 product_1440 (разметку достраивает rmCard() в tpl-product.js) ===== */
body.single-product .st-pc-head h1.product_title { font-size: clamp(30px, 3vw, 44px) !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.08; }
.pk-pmeta { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--pk-color-text); font-size: 15px; font-weight: 500; }
.pk-pmeta svg { color: var(--pk-color-text-muted); }

/* вьюер: одна колонка, вкладки и «во весь экран» поверх низа сцены */
@media (min-width: 1024px) {
  .woocommerce-product-gallery { grid-template-columns: 1fr; }
  .woocommerce-product-gallery .woocommerce-product-gallery__wrapper { grid-column: 1; grid-row: 1; border-radius: 12px; background: #0E1114; }
  .woocommerce-product-gallery .pk-vis { grid-column: 1; grid-row: auto; }
  .woocommerce-product-gallery .pk-gallery-nav.pk-gallery-tabs {
    grid-column: 1; grid-row: 1; align-self: end; justify-self: start; z-index: 3; position: relative;
    flex-direction: row; width: auto; max-height: none; overflow: visible; gap: 22px; padding: 0 22px 14px;
  }
  .woocommerce-product-gallery .pk-gallery-tabs button { border: 0 !important; border-radius: 0; background: none; line-height: 1.2; padding: 6px 2px; color: #C9D1D6; font-size: 14px; font-weight: 500; position: relative; }
  .woocommerce-product-gallery .pk-gallery-tabs img { display: none; }
  .woocommerce-product-gallery .pk-gallery-tabs button.pk-active { color: #F2C46B; }
  .woocommerce-product-gallery .pk-gallery-tabs button.pk-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #F2C46B; border-radius: 2px; }
  .woocommerce-product-gallery .pk-gallery-tabs button:hover { color: #fff; }
  .pk-gallery-fs {
    grid-column: 1; grid-row: 1; align-self: end; justify-self: end; z-index: 3; margin: 0 16px 14px 0;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(14,17,20,.7);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .pk-gallery-fs:hover { border-color: #F2C46B; color: #F2C46B; }
}
@media (max-width: 1023px) { .pk-gallery-tabs .pk-gtab-txt, .pk-gallery-fs { display: none; } }
.woocommerce-product-gallery__wrapper:fullscreen { background: #0E1114; display: flex; align-items: center; }

/* «Подберите размер» — белая карточка: заголовок + ползунки + серая плашка итогов */
.woocommerce-product-gallery #pk-size-picker { background: #fff; border: 1px solid #E3E6E9; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 18px 20px 4px; margin: 0; }
.woocommerce-product-gallery #pk-forge-sliders { background: #fff; border: 1px solid #E3E6E9; border-top: 0; border-radius: 0 0 12px 12px; padding: 8px 20px 20px; }
@media (min-width: 1024px) { .woocommerce-product-gallery #pk-forge-sliders { margin-top: calc(var(--pk-space-4) * -1); } }
#pk-forge-sliders .pk-forge-field label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#pk-forge-sliders .pk-forge-field label output { display: none; }
#pk-forge-sliders .pk-forge-num { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid #E3E6E9; border-radius: 8px; background: #fff; }
#pk-forge-sliders .pk-forge-num:focus-within { border-color: var(--pk-color-brand); }
#pk-forge-sliders .pk-forge-num input { width: 6ch; border: 0; padding: 0; background: transparent; font: inherit; font-weight: 600; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; outline: 0; -moz-appearance: textfield; box-shadow: none; min-height: 0; height: auto; }
#pk-forge-sliders .pk-forge-num input::-webkit-outer-spin-button, #pk-forge-sliders .pk-forge-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#pk-forge-sliders .pk-forge-num i { font-style: normal; color: var(--pk-color-text-muted); font-size: 12px; }
#pk-forge-sliders .pk-forge-minmax { display: flex; justify-content: space-between; color: var(--pk-color-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#pk-forge-sliders .pk-forge-result { background: #F1F3F5; border-radius: 10px; padding: 14px 18px; gap: 0; }
#pk-forge-sliders .pk-forge-result > div + div { border-left: 1px solid #DDE1E5; padding-left: 18px; }
#pk-forge-sliders .pk-forge-result strong { font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.01em; }

/* блок цены: степпер, главная CTA, «В корзину» рамкой — всё во всю ширину */
body.single-product .st-pc-buy { border-radius: 12px; }
body.single-product .st-pc-buy p.price { font-size: clamp(28px, 2.6vw, 40px) !important; font-weight: 800 !important; letter-spacing: -.02em; }
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button { border-top: 0; padding-top: 0; row-gap: 12px; }
body.single-product .variations_button .pk-avail { order: 1; }
body.single-product .variations_button .quantity { order: 2; }
body.single-product .variations_button #pk-forge-kp { order: 3; flex: 1 1 100%; height: 52px; font-size: 16px; font-weight: 700; }
body.single-product:has(#pk-forge-kp) .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button { order: 4; flex: 1 1 100%; height: 52px !important; min-height: 52px !important; font-size: 16px !important; font-weight: 600; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border-width: 1.5px !important; }
body.single-product .variations_button .pk-moq { order: 5; }
.pk-qty { display: inline-flex !important; align-items: stretch; border: 1px solid #DDE1E5; border-radius: 8px; overflow: hidden; height: 44px; }
.pk-qty .qty { width: 56px !important; border: 0 !important; border-left: 1px solid #DDE1E5 !important; border-right: 1px solid #DDE1E5 !important; border-radius: 0 !important; text-align: center; font-weight: 600; height: 100% !important; min-height: 0 !important; -moz-appearance: textfield; }
.pk-qty .qty::-webkit-outer-spin-button, .pk-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pk-qty-btn { width: 44px; border: 0; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--pk-color-text); }
.pk-qty-btn:hover { background: #F1F3F5; }
.pk-qty-btn:focus-visible { outline: 2px solid var(--pk-color-brand); outline-offset: -2px; }
/* контакты строкой с разделителем */
body.single-product .st-pc-buy p:has(> .st-phone) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 14px 0; margin: 14px 0 6px; border-top: 1px solid #E3E6E9; }
body.single-product .st-pc-buy .st-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
body.single-product .st-pc-buy p:has(> .st-phone) .st-geo-email { padding-left: 24px; border-left: 1px solid #E3E6E9; }
/* плашки «Оптовым…» и «Отгрузка по РФ» */
body.single-product .st-pc-buy .st-wholesale { background: #FFF6E6; border: 0 !important; border-radius: 10px; padding: 12px 14px; }
body.single-product .st-pc-buy .st-trust { background: #F1F6F2; border-radius: 10px; padding: 12px 14px; border-top: 0 !important; }

/* RM Э8 rm6 п.7: текст «…от объёма пар[тии]» обрезался (text-overflow сетевого .st-wholesale),
   «Отгрузка по РФ» была голой строкой без плашки — на рендере две плашки рядом. .pk-ship-grid
   собирает tpl-product.js (rmCard) оборачивая существующие .st-wholesale/.st-trust. */
body.single-product .st-pc-buy .st-wholesale { white-space: normal; overflow: visible; text-overflow: clip; }
body.single-product .pk-ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
body.single-product .pk-ship-grid .st-wholesale, body.single-product .pk-ship-grid .st-trust { margin: 0; }
/* Ш10 п.3 (s9 §4.3): вторая строка описания (tpl-product.js::rmCard) — align-items:flex-start,
   как у .st-wholesale (network inline style), иконка не едет вниз при переносе текста на 2 строки. */
body.single-product .pk-ship-grid .st-trust.pk-ship-ok { display: flex; align-items: flex-start; gap: 10px; background: #EEF7F0; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok b { display: inline; font-weight: 700; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok .pk-ship-desc { color: var(--pk-color-text-muted, #767676); font-weight: 400; overflow-wrap: anywhere; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok .st-ic { color: #2E8B4F; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok .st-ic svg { width: 24px; height: 24px; }
/* Ш10 п.3: на узких экранах колонка 1fr под текст описания слишком узкая — слово рвалось посимвольно
   (overflow-wrap:anywhere выше — просто страховка от переполнения). Складываем плашки в 1 колонку:
   тот же текст, но на всю ширину, переносится по словам нормально. */
@media (max-width: 560px) { body.single-product .pk-ship-grid { grid-template-columns: 1fr; } }

/* под карточкой: «Характеристики» | «Ближайшие размеры» + пункты доверия */
@media (min-width: 1024px) {
  body.single-product .st-pc-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  body.single-product .st-pc-body > * { grid-column: 1 / -1; }
  body.single-product .st-pc-body > .st-spec { grid-column: 1; grid-row: 1; }
  body.single-product .st-pc-body > #pksz-near { grid-column: 2; grid-row: 1; margin-top: 0; background: #fff; border: 1px solid #E3E6E9; border-radius: 12px; padding: 18px 20px; min-width: 0; }
  body.single-product .st-pc-body > .pk-forge-block:empty { display: none; }
  /* Ш11 CARD п.3 (render95 s10 §4 п.3): «Характеристики» слева обычно выше «Ближайших размеров»
     справа (align-items:start в гриде строкой выше — сознательно, иначе колонки той же высоты
     стретчились бы и ломали карточки без разницы по контенту) — разрыв ~100px под правой колонкой.
     Растягиваем именно #pksz-near на высоту строки и прижимаем «Вся таблица размеров (N)» к низу —
     ссылка не выдумана, это тот же <details class="pksz-all"> (stalverk-pokova-sizes.php), что уже
     печатается на странице, просто занимает освободившееся место на всю ширину колонки. */
  body.single-product .st-pc-body > #pksz-near { align-self: stretch; display: flex; flex-direction: column; }
  body.single-product .st-pc-body > #pksz-near .pksz-all { margin-top: auto; }
}
.pksz-near .pksz-near-title { font-size: 20px; font-weight: 800; }
.pksz-near-grid a[aria-current], .pksz-near-grid a.pk-cur { border-color: var(--pk-color-brand) !important; color: var(--pk-color-accent-text); background: #FFF6E6; }
/* Ш9 CARD_NOTES п.3: .pk-ptrust (дубль ленты доверия под «Ближайшими размерами») снят вместе
   с разметкой в tpl-product.js — осталась одна лента .pk-pband ниже. */
/* Ш11 CARD п.1 (render95 s10 §4 п.1): «Категория» теперь строкой в таблице .st-spec
   (inc/tpl-product.php), .product_meta остаётся на странице только ради артикула вариации —
   прячем в нём именно «Категория: …», не блок целиком. Astra даёт своему
   `.woocommerce-js div.product .product_meta > span` специфичность (0,3,2) — выше наших двух
   классов (0,2,0), без !important правило молча проигрывает (проверено Playwright: display
   оставался inline-block). */
.product_meta .posted_in { display: none !important; }
/* RM Э7 правки после локального прогона */
.woocommerce-product-gallery .pk-gallery-tabs img { display: none !important; }
.woocommerce-product-gallery #pk-size-picker { order: 4; }
.woocommerce-product-gallery #pk-forge-sliders { order: 5; }
@media (max-width: 1023px) { .woocommerce-product-gallery #pk-size-picker { margin-top: var(--pk-space-4); } }
#pk-size-picker .pk-size-picker-label { font-size: 17px; font-weight: 700; }
@media (min-width: 1024px) {
  body.single-product .st-pc-body > #pksz-near .pksz-near-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
/* RM Э7: тёмная полоса перед подвалом (inc/tpl-product.php, woocommerce_after_single_product) */
.pk-pband { position: relative; width: 100vw; margin: 40px 0 0 50%; transform: translateX(-50%); background: #0E1114; color: #F3F5F6; overflow: hidden; }
.pk-pband img { position: absolute; right: 0; top: 0; height: 100%; width: 46%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.pk-pband-in { position: relative; z-index: 1; max-width: var(--pk-container-max, 1200px); margin: 0 auto; padding: 36px var(--pk-space-6); display: flex; align-items: center; gap: 32px; }
.pk-pband-head { flex: none; max-width: 360px; }
body.st-next .pk-pband h2 { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.15; margin: 0 0 8px; }
.pk-pband-head p { margin: 0; color: #A9B4BA; font-size: 14px; }
.pk-pband ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; max-width: 760px; }
.pk-pband li { display: flex; gap: 10px; align-items: flex-start; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #A9B4BA; line-height: 1.4; }
.pk-pband li svg { color: #E2A33A; flex: none; }
.pk-pband li b { display: block; color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
@media (max-width: 1023px) {
  .pk-pband-in { flex-direction: column; align-items: flex-start; padding: 32px 20px 200px; gap: 20px; }
  .pk-pband ul { flex-direction: column; gap: 14px; }
  .pk-pband li { border-left: 0; padding: 0; }
  .pk-pband img { top: auto; bottom: 0; height: 190px; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
}
/* s4b CARD_NOTES п.3: было 3 пункта в один ряд (max-width:560, border-left-дорожки) — с 4-м пунктом
   («Контроль качества») дорожки стали слишком узкими, текст переносился и наезжал на соседей.
   На ≥1024 — сетка 2×2 без вертикальных разделителей вместо одной тесной строки. */
@media (min-width: 1024px) {
  .pk-pband ul { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); column-gap: 28px; row-gap: 16px; max-width: 620px; }
  .pk-pband li { border-left: 0; padding: 0; }
}

/* ===================== Ш3/Ш4 GOAL_RENDER95 (scores/s0.md §4): вьюер шире и «дороже», плотнее buy-box ===================== */
@media (min-width: 1024px) {
  .st-pc-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; column-gap: 40px !important; }
}
/* вьюер: сплошной графит, кадр 3:2 (фото gpt-image-2 — без обрезки), 3D-слайд той же высоты */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { background: #0E1114; border-radius: 12px; aspect-ratio: 3 / 2; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { height: 100%; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(.pk-forge-slide) img { height: 100%; object-fit: cover; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(.pk-forge-slide) a { display: block; height: 100%; }
/* плашки доверия одного тона, телефон тёмным 15/600 (рендер: контакты строкой, плашки одинаковые) */
body.single-product .st-pc-buy .st-wholesale, body.single-product .pk-ship-grid .st-trust.pk-ship-ok { background: #F5F6F7 !important; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok .st-ic { color: var(--pk-color-brand); }
body.single-product .st-pc-buy .st-phone { color: var(--pk-color-text) !important; font-size: 15px !important; font-weight: 600 !important; }
/* цена: копейки мельче и приглушённо (сама сумма не округляется — совпадает с корзиной) */
.pk-kop { font-size: .6em; color: var(--pk-color-text-muted); font-weight: 700; letter-spacing: 0; }
/* Ш4: форма вариаций — первая в buy-box, её верхняя линия висела пустой полосой над ценой */
body.single-product .st-pc-buy > form.variations_form:first-child { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
#pk-fs-price { white-space: nowrap; }
/* Ш4: «Похожие» карточками с фото (рендер r9), а не строками списка. Инлайн grid-template-columns у a.st-prow
   ставит сеть — гасим его через display:flex, колонки грида тогда не действуют. */
body.single-product section.related ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
body.single-product section.related ul.products > li { margin: 0 !important; width: auto !important; border: 0 !important; padding: 0 !important; }
body.single-product section.related a.st-prow { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 6px; height: 100%; padding: 0 0 14px !important; background: #fff; border: 1px solid var(--pk-color-border, #E3E6EA) !important; border-radius: 12px; overflow: hidden; }
body.single-product section.related a.st-prow:hover { border-color: var(--pk-color-brand) !important; }
body.single-product section.related .c-img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; margin: 0 0 6px !important; border-radius: 0 !important; overflow: hidden; background: #0E1114; }
body.single-product section.related .c-img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .3s; }
body.single-product section.related a.st-prow:hover .c-img img { transform: scale(1.04); }
body.single-product section.related .c-name, body.single-product section.related .c-steel, body.single-product section.related .c-price { padding: 0 14px !important; text-align: left !important; }
body.single-product section.related .c-name { font-size: 15px !important; font-weight: 700 !important; line-height: 1.3; }
body.single-product section.related .c-steel { font-size: 13px; color: var(--pk-color-text-muted); }
body.single-product section.related .c-price { margin-top: auto; font-size: 17px !important; font-weight: 800; color: var(--pk-color-text); }
body.single-product section.related .c-btn { display: none !important; }
@media (max-width: 768px) { body.single-product section.related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }
@media (prefers-reduced-motion: reduce) { body.single-product section.related .c-img img { transition: none; } body.single-product section.related a.st-prow:hover .c-img img { transform: none; } }
body.single-product h1.product_title, .pksz-page h1 { text-wrap: balance; }
/* s1 карточка п.2–3, п.5: первый экран выше на ~40px (у content-area сети mt 60px), чип раздела над H1 дублирует
   крошки — H1 вровень с верхом вьюера; вкладки вьюера на тёмной подложке; плашки одной высоты */
@media (min-width: 1024px) { body.single-product .content-area.primary { margin-top: 20px !important; } }
body.single-product .st-pc-head > .single-product-category { display: none !important; }
@media (min-width: 1024px) { body.single-product .st-pc-head h1.product_title { font-size: clamp(28px, 2.2vw, 34px) !important; } }
.woocommerce-product-gallery .pk-gallery-nav { background: rgba(0, 0, 0, .55); border-radius: 999px; padding: 2px 6px; }
body.single-product .pk-ship-grid { align-items: stretch; }
body.single-product .pk-ship-grid > * { display: flex; align-items: center; min-width: 0; }
/* Ш11 CARD п.2 (render95 s10 §4 п.2): .pk-ship-grid > * выше центрирует обе плашки — у .st-wholesale
   (сетевая разметка, 3 строки текста с суммой заказа) это роняет галочку на середину блока, визуально
   «перед второй строкой», а не рядом с заголовком. У .st-trust.pk-ship-ok уже было flex-start (строка
   выше, 1276), эта правка просто даёт первой плашке ту же специфичность/значение — «иконка в одной
   строке с заголовком» для обеих. */
body.single-product .pk-ship-grid .st-wholesale { align-items: flex-start; }
/* Ш10 п.3 (s9 §4.3): без min-width:0 грид/флекс-элементы не сжимались ниже content-width второй
   строки описания (tpl-product.js::rmCard) — на 390px текст вылезал за экран (scrollWidth 415).
   min-width:0 на каждом уровне вложенности даёт тексту переноситься внутри своей колонки. */
body.single-product .pk-ship-grid .st-trust.pk-ship-ok { min-width: 0; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok > span { min-width: 0; }

/* ===== s4b CARD_NOTES (render95 s3→s4b): плотность карточки ближе к рендеру r9 ===== */
/* п.1 — подбор размера компактнее: поля без лишних вертикальных отступов (как на рендере, где
   «Диаметр D» занимает одну строку с полем ввода, а не подпись+ползунок+строка min/max порознь). */
#pk-forge-sliders { gap: 8px; }
#pk-forge-sliders .pk-forge-field label { margin-bottom: 0; }
#pk-forge-sliders .pk-forge-minmax { margin-top: -2px; }
#pk-forge-sliders .pk-forge-result { padding: 10px 18px; }
#pk-size-picker { padding: 14px 20px 2px; }
@media (min-width: 1024px) {
  #pk-forge-sliders .pk-forge-field input[type="range"] { height: 34px; }
}

/* п.2 — «Характеристики»: 6–8 строк сразу (JS compactSpecs(), tpl-product.js прячет tbody tr
   начиная с 9-й), «Показать все» — текстовая ссылка-кнопка в стиле остальных .pk-tab-link. */
.pk-spec-more {
  display: inline-flex;
  align-items: center;
  margin-top: var(--pk-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-color-brand);
  font: inherit;
  font-weight: var(--pk-fw-semibold);
  font-size: var(--pk-text-sm);
  cursor: pointer;
}
.pk-spec-more:hover { text-decoration: underline; }

/* п.4 — секции ниже первого экрана (вкладки/похожие/FAQ/«ещё в разделе») — единый ритм 40px,
   вместо разных отступов, унаследованных от сетевых виджетов (каждый блок — чужая разметка,
   next-product.php/tpl-seo.php/stv4-near — трогаем только отступ сверху своим CSS). */
body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .st-pfaq,
body.single-product .product .pk-often-search,
body.single-product :has(> .stv4-near__h) {
  margin-top: 40px !important;
}

/* Ш8 CLS: у семейства >30 вариаций цена размера приходит AJAX-ом через ~2,5 с. Диапазон (90 px) до переноса
   скрыт, после переноса под .single_variation_wrap — мелкой строкой сразу; место под цену размера зарезервировано. */
.single-product #st-buy:has(.single_variation_wrap) > p.price { display: none !important; }
body.single-product .st-pc-buy .single_variation_wrap + p.price { font-size: 13px !important; font-weight: 500 !important; color: var(--pk-color-text-muted) !important; margin: 4px 0 0 !important; letter-spacing: 0; }
body.single-product .st-pc-buy .single_variation_wrap + p.price .amount { color: inherit !important; font-weight: 500 !important; }
body.single-product .st-pc-buy .single_variation_wrap + p.price::before { content: "Диапазон по размерам: "; }
.single-product .single_variation_wrap .woocommerce-variation.single_variation { min-height: 58px; }

/* Ш8 UI-тест (scores/ui_s6.md): вкладки «Фото/3D» поверх светлого фото — тёмная плашка (контраст текста ≥ 4,5);
   точки галереи на мобиле — тап-цель 24×24 (кружок 8 px рисует ::after по центру, вид тот же);
   числовые поля D/L — вся высота рамки 36 px кликабельна. */
@media (min-width: 1024px) { .woocommerce-product-gallery .pk-gallery-nav.pk-gallery-tabs { background: rgba(14,17,20,.72); border-radius: 0 10px 0 12px; padding-top: 4px; } }
@media (max-width: 1023px) { .woocommerce-product-gallery .pk-gallery-nav button { width: 24px; height: 24px; } .woocommerce-product-gallery .pk-gallery-nav { gap: 0; } }
#pk-forge-sliders .pk-forge-num input { align-self: stretch; }

/* 23.10.2026: «Ответим за 30 минут» под почтой (рендер r9; срок ответа подтверждён владельцем). Строка контактов — сетевая разметка, только CSS. */
.summary p:has(> .st-geo-email)::after { content: "Ответим за 30 минут"; display: block; margin: 4px 0 0 auto; width: max-content; font-size: 12px; color: #6b7280; }

/* 23.10.2026: «Отгрузка по РФ» разъезжалась — сетевой CSS делает span внутри .st-trust флексами с переносом:
   галка уезжала отдельной строкой, заголовок и текст вставали двумя колонками. Текст плашки — обычный поток, как у «Оптовым». */
body.single-product .pk-ship-grid .st-trust.pk-ship-ok { flex-wrap: nowrap; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok > span:not(.st-ic) { display: block; flex: 1 1 auto; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok .pk-ship-desc { display: inline; }
body.single-product .pk-ship-grid .st-trust.pk-ship-ok { border-radius: 10px !important; padding: 12px 14px !important; }

/* 23.10.2026: один размер — без ползунка, значение текстом (tpl-product.js .pk-forge-fixed) */
#pk-forge-sliders .pk-forge-fixed input[type="range"] { display: none; }
#pk-forge-sliders .pk-forge-fixed { padding: 6px 0; }
#pk-forge-sliders .pk-forge-val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

/* 24.10.2026: кнопка «Во весь экран» — сетевые стили button перекрашивали её в синий овал; полноэкранная галерея с кнопкой «Закрыть» */
body.single-product .woocommerce-product-gallery .pk-gallery-fs { width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; background: rgba(14,17,20,.7) !important; color: #fff !important; box-shadow: none !important; }
body.single-product .woocommerce-product-gallery:fullscreen { background: #0E1114; display: flex; flex-direction: column; justify-content: center; padding: 0; margin: 0; max-width: none; width: 100vw; height: 100vh; }
body.single-product .woocommerce-product-gallery:fullscreen .woocommerce-product-gallery__wrapper, body.single-product .woocommerce-product-gallery:fullscreen .flex-viewport { flex: 1 1 auto; height: 100% !important; }
body.single-product .woocommerce-product-gallery:fullscreen #pk-size-picker, body.single-product .woocommerce-product-gallery:fullscreen #pk-forge-sliders { display: none !important; }
body.single-product .woocommerce-product-gallery:fullscreen .woocommerce-product-gallery__image, body.single-product .woocommerce-product-gallery:fullscreen .woocommerce-product-gallery__image > a { height: calc(100vh - 56px) !important; display: flex !important; align-items: center; justify-content: center; aspect-ratio: auto !important; }
body.single-product .woocommerce-product-gallery:fullscreen .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; }
body.single-product .woocommerce-product-gallery:fullscreen .pk-gallery-fs { position: fixed; top: 16px; right: 16px; margin: 0; z-index: 10; width: 44px !important; height: 44px !important; }

/* 24.10.2026: пояснение к расчёту ползунков (точная цена / ориентир, что уйдёт в корзину) */
.pk-forge-note {
  margin: var(--pk-space-2) 0 0;
  font-size: var(--pk-text-xs, 12px);
  line-height: 1.4;
  color: var(--pk-color-text-muted, #5b6770);
}