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

/* --- Cross-document View Transition: листинг → карточка. Имя по ID товара
   (mk-product-photo-<ID>) — согласовано с Л4-list (у него на плитках тот же формат), иначе на
   листинге с десятками карточек конфликт одинаковых view-transition-name в одном документе.
   Имя задаётся инлайн-стилем из tpl-product.php (hook wp_head) — тут только at-rule и
   reduced-motion (атрибут [style*="view-transition-name"] ловит инлайн-имя без знания ID). */
@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) {
  .st-pc-top {
    /* 17.10.2026, повторный гейт: 600px разгонял фото до «50 % всей сетки», но третья колонка
       (.st-pc-buy, покупка) сетевая и ФИКСИРОВАННАЯ 320px — при первой(600)+третьей(320)+2×28
       гейпов на среднюю (.st-pc-head/.st-pc-body, инфо/H1/характеристики) оставалось всего
       224px: H1 ломался на 3 строки, «ГОСТ 34680-2020» рвалось по буквам (скрин гейта). 480px —
       фото ≈ 44 % от «фото+инфо» (без фикс. колонки покупки) при читаемой средней колонке
       (~344px); буквально 50% от всех 1200px физически несовместимо с фикс. 320px колонкой
       покупки без переделки сетки на 2 колонки (запрещено — ломает .summary{display:contents},
       см. комментарий блока выше). */
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr) 320px !important;
  }
}
/* Галерея на ВСЕХ ширинах: WC не всегда навешивает класс .flexslider на обёртку (версия темы/плагина
   не гарантирует инициализацию JS), а `.woocommerce-product-gallery__wrapper` без ограничения
   ширины — это трек слайдов (все фото в ряд, flex), который без overflow:hidden растягивает себя и
   всех предков по горизонтали на всю суммарную ширину фото (гейт п.7: на 375 px давал scrollWidth
   1200 — предок чипов «часто ищут» наследовал эту ширину). Сам слайдер/переключение фото (WC JS)
   не трогаем — только клипуем видимую область, как и должно быть у любого слайдера. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  max-width: 100%;
  overflow: hidden;
}
/* Визуальный порядок фото → точки → чертёж независимо от порядка в DOM. На живом сайте после
   relocateDrawing() (tpl-product.js, добавляет .mk-vis последним ребёнком) WC сам донастраивает
   галерею (flexslider/zoom init) и на деле переставляет .mk-vis ПЕРВЫМ потомком — живой скрин на
   375 px показывал чертёж над фото товара. CSS order не зависит от фактической позиции узла в DOM,
   поэтому гарантирует порядок при любой перестройке WC. */
.woocommerce-product-gallery {
  display: flex;
  flex-direction: column;
}
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  order: 1;
}
.woocommerce-product-gallery .flex-control-nav {
  order: 2;
}
.woocommerce-product-gallery .mk-vis {
  order: 3;
}
@media (min-width: 1024px) {
  /* Grid, не flex: .mk-vis (чертёж, п.2/п.3) переносится JS внутрь галереи как ОТДЕЛЬНАЯ строка
     под фото+миниатюрами — в одной flex-строке он отнимал ширину у .flex-viewport (конкуренция
     за flex-basis роняла главное фото до ~68px, поймано на живом скрине). grid-column/row держат
     фото и миниатюры на месте независимо от порядка, в котором WC JS достраивает DOM. */
  .woocommerce-product-gallery {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--mk-space-4);
    row-gap: var(--mk-space-4);
    align-items: start;
  }
  .woocommerce-product-gallery .flex-viewport,
  .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
  }
  .woocommerce-product-gallery .flex-control-nav {
    display: flex !important;
    grid-column: 1;
    /* span обе строки (фото + чертёж) — иначе высота строки 1 равнялась max(фото, миниатюры), и
       когда миниатюр по сумме высот МЕНЬШЕ фото, визуально остаётся пустая полоса над чертежом
       (гейт п.3, «пустота ~300 px»); занимая обе строки, колонка миниатюр всегда равна полной
       высоте блока фото+чертёж — пустоты не остаётся ни в фото-колонке, ни рядом с миниатюрами. */
    grid-row: 1 / 3;
    flex-direction: column;
    gap: var(--mk-space-2);
    width: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 620px;
    overflow-y: auto;
  }
  .woocommerce-product-gallery .flex-control-nav li {
    /* WC свой дефолт `.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{width:calc(25% - .75em)}`
       специфичнее (0,4,3) моего (0,2,0) без !important — побеждал, сжимая миниатюру до ~8px
       (25% от 80px колонки минус отступ), гейт 17.10 п.1 «обрезанные полоски». !important и
       здесь перебивает каскад тем же приёмом, что и у .st-wall-btns выше. */
    width: 100% !important;
  }
  .woocommerce-product-gallery .flex-control-nav img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    border-radius: var(--mk-radius-sm);
    border: 1px solid var(--mk-color-border);
    cursor: pointer;
    transition: border-color var(--mk-dur-fast) var(--mk-ease-standard);
  }
  .woocommerce-product-gallery .flex-control-nav .flex-active img {
    border-color: var(--mk-color-brand);
    border-width: 2px;
  }
  .woocommerce-product-gallery .mk-vis {
    /* рядом с миниатюрами (колонка 1, теперь растянута на обе строки), не поверх них */
    grid-column: 2;
    grid-row: 2;
  }
}
@media (max-width: 1023px) {
  /* Точки вместо крупных миниатюр: сама лента листается штатным JS WooCommerce,
     здесь только визуал точек-пагинации под фото (гейт п.1, «на 375 — свайп-лента с точками»).
     17.10.2026, повторный гейт п.8: flex-wrap давал 2 разбросанных ряда точек при 5+ фото —
     убран wrap, вместо него горизонтальный скролл в один ряд, по центру пока помещается. */
  .woocommerce-product-gallery .flex-control-nav {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--mk-space-2);
    list-style: none;
    margin: var(--mk-space-3) 0 0;
    padding: 0 var(--mk-space-2);
    scrollbar-width: none;
  }
  .woocommerce-product-gallery .flex-control-nav::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-product-gallery .flex-control-nav li {
    width: auto !important;
    flex-shrink: 0;
    position: relative;
  }
  /* 17.10.2026, гейт раунд C п.2: 8px было правильным размером, но object-fit:cover рисовал
     реальное фото товара внутри кружка — на таком размере это читалось как «мусор»
     (крошечные обрезанные картинки), а не как точки-пагинация. Прячем саму фотографию
     (visibility:hidden — сохраняет блок и попадание в поток, убирает из hit-test, клик по <a>
     вокруг неё продолжает работать) и рисуем чистый кружок цветом темы псевдоэлементом. */
  .woocommerce-product-gallery .flex-control-nav img {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    aspect-ratio: 1 / 1;
    visibility: hidden;
  }
  .woocommerce-product-gallery .flex-control-nav li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mk-color-border-strong);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .woocommerce-product-gallery .flex-control-nav li.flex-active::after {
    width: 10px;
    height: 10px;
    background: var(--mk-color-brand);
  }
}

/* --- 1b. Селектор варианта (размер): сетевой `.st-wall-btns` (stalverk-next/stalverk.css,
   next-product.php — не трогаем) рисует ВСЕ типоразмеры стеной кнопок без ограничения высоты.
   На товарах с большим числом вариаций (найдено 748 на одном бойте) это растягивало карточку
   до ~13000px — не «компактный выпадающий блок» из SPEC §6. Ограничиваем высоту и даём свой
   скролл + токены вместо сетевого оранжевого акцента (#e8a33d), сам .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(--mk-space-1) var(--mk-space-2) var(--mk-space-1) 0;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
}
.variations .st-wall-btns button {
  border-radius: var(--mk-radius-sm);
  font-family: var(--mk-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(--mk-space-2) var(--mk-space-2) !important;
}
.variations .st-wall-btns button:hover {
  border-color: var(--mk-color-brand) !important;
}
.variations .st-wall-btns button.active {
  background: var(--mk-color-brand) !important;
  border-color: var(--mk-color-brand) !important;
  color: var(--mk-color-text-on-brand) !important;
}

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

/* --- 3. Кнопки под/рядом с «В корзину» --- */
.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-3) var(--mk-space-5);
  font-weight: var(--mk-fw-semibold);
  font-size: var(--mk-button-text-size);
  line-height: var(--mk-button-text-lh);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.mk-btn-primary {
  background: var(--mk-color-brand);
  color: var(--mk-color-text-on-brand);
}
.mk-btn-primary:hover {
  background: var(--mk-color-brand-hover);
  color: var(--mk-color-text-on-brand);
}
.mk-btn-secondary {
  background: var(--mk-color-bg);
  color: var(--mk-color-brand);
  border-color: var(--mk-color-brand);
}
.mk-btn-secondary:hover {
  background: var(--mk-color-bg-badge);
}
.mk-btn-kp {
  margin-top: var(--mk-space-3);
}
.mk-moq {
  display: flex;
  align-items: center;
  gap: var(--mk-space-1);
  font-size: var(--mk-text-sm);
  color: var(--mk-color-text-muted);
  margin-top: var(--mk-space-2);
}
.mk-moq-icon {
  color: var(--mk-color-brand);
}

/* --- 4. Вкладки документы/доставка/оплата --- */
.mk-doc-list {
  list-style: none;
  margin: 0 0 var(--mk-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
}
.mk-doc-list li {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
}
.mk-doc-list .mk-icon,
.mk-tab-delivery .mk-icon,
.mk-tab-payment .mk-icon {
  color: var(--mk-color-brand);
  flex-shrink: 0;
}
.mk-tab-note {
  color: var(--mk-color-text-muted);
  font-size: var(--mk-text-sm);
}
.mk-tab-link {
  color: var(--mk-color-brand);
  font-weight: var(--mk-fw-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-1);
}
.mk-tab-link:hover {
  text-decoration: underline;
}
.mk-icon-inline {
  vertical-align: middle;
}

/* --- 5. Чипы размеров (над `.mksz-links`, который остаётся как есть — только оформляем) --- */
.mk-size-picker-head {
  margin-top: var(--mk-space-4);
}
.mk-size-picker-label {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-weight: var(--mk-fw-semibold);
  font-size: var(--mk-h3-product-size);
  line-height: var(--mk-h3-product-lh);
}
.mk-size-picker-label .mk-icon {
  color: var(--mk-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) — тот же паттерн, что уже чинили в `.mk-often-search` (строка ниже по
   файлу) и в подвале `.mk-footer-grid`. Текст самих чипов теперь короче (JS, tpl-product.js:
   shortenSizeChips — только типоразмер, полное имя в title), но min-width:0 нужен в любом
   случае как структурная защита (длинные обозначения вроде «ТУ 10.20.42-387-00472012-2018»
   тоже не короткие). */
.mksz-links {
  margin-top: var(--mk-space-2) !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-2);
  font-size: 0; /* прячем служебный текст-подпись узла, оставляя только чипы-ссылки */
  min-width: 0;
  width: 100%;
}
.mksz-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--mk-text-sm);
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border-strong);
  background: var(--mk-color-bg);
  color: var(--mk-color-text);
  padding: var(--mk-space-2) var(--mk-space-4);
  text-decoration: none;
  white-space: normal;
  max-width: 100%;
}
.mksz-links a:hover,
.mksz-links a:focus-visible {
  border-color: var(--mk-color-brand);
  color: var(--mk-color-brand);
}

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

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

/* --- 6b. «Часто ищут» / «С этим заказывают» (tpl-seo.php — не мой файл, не трогаю, только
   CSS поверх его public HTML, как и .mksz-links/.mk-hubs выше). На карточке товара `.mk-wrap`
   из этого блока — flex-item в `div.product` (WC/astra-woo, flex-direction:column), а
   `.mk-chip` внутри `.mk-chiprow` — nowrap; без `min-width:0` у флекс-айтема браузерный дефолт
   `min-width:auto` считается по max-content нерастягивающихся чипов — элемент растягивается до
   ~1180px вместо ширины страницы (гейт п.7: scrollWidth 1200 на 375 px). Тот же паттерн уже
   чинили в подвале, см. .mk-footer-grid (Л4-svc). overflow-x:auto у .mk-chiprow — свой, не трогаем,
   просто даём ему сжаться до контейнера, чтобы горизонтальный скролл сработал как задумано. */
.product .mk-wrap.mk-often-search {
  min-width: 0;
  width: 100%;
  /* 17.10.2026, гейт раунд C п.3: «С этим заказывают» стоял вплотную к H2 «Похожие»
     (следующий соседний блок .related.products, тот же родитель, подтверждено живым DOM) —
     нет общего ритма секций ≥32px. Тащим отступ снизу сюда, а не на .related.products
     (чужая секция WC), чтобы остаться в своём файле. */
  margin-bottom: var(--mk-space-8, 32px);
  /* 17.10.2026, повторный гейт п.7: .mk-wrap — сетевой контейнер max-width:1180px+24px паддинг
     (mk-header.css) — свой второй инсет ПОВЕРХ уже существующего отступа родителя внутри карточки
     товара (тот же родитель, что держит .st-pc-top без доп. паддинга в этом месте) — заголовок
     «С этим заказывают» съезжал правее фото/вкладок. У родителя уже есть нужный отступ —
     снимаем здесь свой, растягиваемся на всю его ширину (без центровки/паддинга). */
  max-width: none;
  padding: 0;
}
/* .mk-chiprow (mk-header.css) сам себе задаёт max-width+паддинг — внутри уже выровненного
   .mk-wrap это даёт двойной отступ слева у чипов относительно заголовка h2. Обнуляем здесь. */
.product .mk-often-search .mk-chiprow {
  max-width: none;
  margin: 0;
  padding: var(--mk-space-2) 0;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Стрелки прокрутки карусели (гейт п.7, «обрезана без стрелок») — добавляются JS (tpl-product.js)
   как кнопки поверх .mk-chiprow, сам DOM чипов (чужой tpl-seo.php) не трогаем. */
.mk-often-search {
  position: relative;
}
.mk-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(--mk-color-border-strong);
  background: var(--mk-color-bg-elevated, #fff);
  color: var(--mk-color-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(21, 24, 26, 0.12);
}
.mk-chip-arrow:hover {
  border-color: var(--mk-color-brand);
  color: var(--mk-color-brand);
}
.mk-chip-arrow .mk-icon {
  width: 16px;
  height: 16px;
}
.mk-chip-arrow-prev {
  left: 0;
}
.mk-chip-arrow-next {
  right: 0;
}
.mk-chip-arrow[hidden] {
  display: none;
}
@media (max-width: 767px) {
  /* на мобильном карусель и так листается пальцем, кнопки только занимают место над чипами */
  .mk-chip-arrow {
    display: none !important;
  }
}

/* --- 7. Мобильная липкая нижняя панель --- */
.mk-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--mk-z-header, 100);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-3);
  background: var(--mk-color-bg-elevated);
  border-top: 1px solid var(--mk-color-border);
  padding: var(--mk-space-3) var(--mk-space-4);
  box-shadow: 0 -4px 16px rgba(21, 24, 26, 0.08);
  transition: transform var(--mk-dur-base) var(--mk-ease-standard), opacity var(--mk-dur-base) var(--mk-ease-standard);
}
.mk-sticky-buy.mk-sticky-hidden {
  transform: translateY(100%);
  opacity: 0;
}
.mk-sticky-price {
  font-weight: var(--mk-fw-semibold);
  font-size: var(--mk-h3-product-size);
  color: var(--mk-color-text);
  white-space: nowrap;
}
.mk-sticky-unit {
  font-size: var(--mk-text-sm);
  color: var(--mk-color-text-muted);
  font-weight: var(--mk-fw-regular);
}
@media (max-width: 767px) {
  body.single-product .mk-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, что уже даёт .mk-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.mk-on-request {
  color: var(--mk-graphite, #21282b);
}

/* 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;
}