/* ═══════════════════════════════════════════════════════════════════
   K-PROMO — ЕДИНЫЙ CSS КОМПОНЕНТОВ (kp.css)
   Собран 04.07.2026 слиянием 80 patch-*.css один-в-один, в порядке их
   каскада. История слоёв — в git (файлы patch-*.css до коммита слияния).

   КАСКАД САЙТА: main.css (токены + база + фундамент) → kp.css (этот файл).
   Порядок секций менять НЕЛЬЗЯ: поздние осознанно перебивают ранние.

   ПРАВИЛА РАБОТЫ (для любой сессии, любого ПК):
   • Правка = дифф в секции нужного компонента ЭТОГО файла.
     Новые patch-*.css НЕ создавать — эпоха патчей закрыта 04.07.2026.
   • После правки пересобрать сжатую копию:  python3 tools/build-kp-min.py
     Забыли пересобрать — не страшно: functions.php сравнивает mtime и
     отдаст полный kp.css, правка не потеряется.
   • Маркеры «ex-patch-N.N» — прежние имена слоёв (для трассировки истории).
   ═══════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 01 · ШАПКА, ТОПБАР, МЕГА-МЕНЮ — надстройки над main (быв. 1.4–1.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-1.4.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.4
 * ───────────────────────────────────────────────────────────────
 * Фиксит 3 конкретные проблемы, выявленные по скринам:
 *
 *   1. Белая полоса слева у топ-бара / шапки / sticky-меню
 *      Причина: WoodMart-овский .website-wrapper / body имеет
 *      внутренний padding/margin, из-за чего fullwidth-блоки не
 *      доходят до края экрана слева.
 *      Решение: break-out из контейнера через 100vw + margin
 *      компенсация. Плюс гасим body-овские отступы на главной.
 *
 *   2. Мега-меню разваливается в одну колонку при открытии
 *      Причина: PATCH 1.2 в main.css использовал display:revert,
 *      который отменяет .kp-mega { display:grid } и возвращает
 *      user-agent default (block).
 *      Решение: убрать костыль revert, оставить только !important
 *      на .kp-mega-hidden, восстановить display:grid.
 *
 *   3. Futura PT не применяется к топ-бару / шапке / снаву
 *      Причина: font-family назначен на .kp-page, но топ-бар,
 *      шапка и sticky-меню находятся ВНЕ <main class="kp-page">.
 *      Решение: назначить на body.kp-body и на корневые элементы
 *      .kp-topbar/.kp-header/.kp-snav-wrap явно.
 *
 * Подключается в functions.php после kp-main, чтобы перебить.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * FIX 1 — Fullwidth для топ-бара, шапки и sticky-меню
 * ═══════════════════════════════════════════════════════════════ */

/* Гасим WoodMart-овские внешние отступы у body на главной.
 * .kp-body — наш класс (см. header.php), цепляется только когда
 * активна kpromo-страница, не трогает другие шаблоны. */
body.kp-body {
  margin: 0 !important;
  padding: 0 !important;
}

/* WoodMart обычно оборачивает контент в .website-wrapper или
 * .full-width-wrapper с боковыми padding. Если они есть — убираем
 * для нашего топ-блока. Селектор узкий, не сломает другие страницы. */
body.kp-body .website-wrapper,
body.kp-body > .website-wrapper,
body.kp-body .main-page-wrapper,
body.kp-body .site-content,
body.kp-body .kp-fullwidth-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: clip; /* защита от горизонтального скролла */
}

/* WoodMart-овский .container на главной может мешать — заменяем
 * на наш .kp-container внутри template-parts. На случай если родительский
 * .container остаётся выше по дереву — сбрасываем его max-width. */
body.kp-body > .container,
body.kp-body .website-wrapper > .container {
  max-width: none !important;
  padding: 0 !important;
}

/* Гарантируем, что наши full-width блоки занимают всю ширину
 * viewport, даже если родитель уже их подсуживает. */
.kp-topbar,
.kp-header,
.kp-snav-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Защита от случайного появления горизонтального скролла */
body.kp-body {
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 2 — Мега-меню: восстанавливаем 3-колоночный grid
 * ═══════════════════════════════════════════════════════════════ */

/* Перебиваем PATCH 1.2 (display:revert ломал grid). 
 * Просто и надёжно: видимое состояние — всегда grid. */
.kp-mega {
  display: grid !important;
  grid-template-columns: 280px 1fr 380px;
}

/* Стартовое скрытие до инициализации JS (FOUC-защита).
 * Использует ту же логику, что и mega-hidden — display:none. */
.kp-mega:not(.kp-mega-init),
.kp-mega-scrim:not(.kp-mega-init) {
  display: none !important;
}

/* Скрытое состояние через класс — приоритет над display:grid */
.kp-mega.kp-mega-hidden,
.kp-mega-scrim.kp-mega-hidden,
.kp-mega-group-pane.kp-mega-hidden {
  display: none !important;
}

/* Скрим — fixed, без grid */
.kp-mega-scrim {
  display: block !important;
}
.kp-mega-scrim.kp-mega-hidden {
  display: none !important;
}

/* Подкатегории — flex/grid внутри pane */
.kp-mega-group-pane {
  display: block;
}
.kp-mega-group-pane.kp-mega-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — Futura PT на body и корневых блоках темы
 * ═══════════════════════════════════════════════════════════════ */

/* Применяем Futura PT глобально на наших страницах (через body.kp-body)
 * с высокой специфичностью, чтобы перебить WoodMart-овский CSS,
 * который ставит свой font-family на body. */
body.kp-body,
body.kp-body .kp-topbar,
body.kp-body .kp-header,
body.kp-body .kp-snav-wrap,
body.kp-body .kp-snav,
body.kp-body .kp-page,
body.kp-body .kp-footer,
body.kp-body button,
body.kp-body input,
body.kp-body select,
body.kp-body textarea {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Сглаживание шрифта и feature-settings — на всех корневых блоках,
 * не только на .kp-page (раньше было только на .kp-page) */
body.kp-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ═══════════════════════════════════════════════════════════════
 * BONUS — небольшие правки по дизайну (соответствие Claude Design)
 * ═══════════════════════════════════════════════════════════════ */

/* Логотип в шапке — высота 34px (дизайн), не 40px */
.kp-logo img,
.kp-logo .kp-logo-mark-img {
  height: 34px;
}

/* ─────────── ex-patch-1.5.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.5
 * ───────────────────────────────────────────────────────────────
 * Цель: восстановить визуал к референсу из Claude Design.
 *
 * Корневая причина расхождений: WoodMart-родитель грузит свой CSS
 * с более высокой специфичностью (через body.theme-default, через
 * .website-wrapper .btn, через a { ... } без префиксов) и перебивает
 * наши .kp-* правила, у которых специфичность всего 0,0,1,0.
 *
 * Решение: префиксуем критичные правила селектором body.kp-body —
 * это даёт 0,0,1,1 (плюс класс на body), что покрывает большинство
 * WoodMart-овских селекторов. На самых упорных местах добавляем !important.
 *
 * Подключается ПОСЛЕ patch-1.4.css → перебивает и main, и patch-1.4.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * FIX A — Sticky-меню: UPPERCASE + чёткие стили ссылок
 * ═══════════════════════════════════════════════════════════════ */

/* WoodMart перебивает text-transform на ссылках через .website-wrapper a.
 * Поднимаем специфичность + !important */
body.kp-body .kp-snav-link,
body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-allcats span {
  text-transform: uppercase !important;
  letter-spacing:normal!important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

/* Кнопка корзины в sticky — UPPERCASE убираем, она остаётся "0 ₽" */

/* ═══════════════════════════════════════════════════════════════
 * FIX B — Hero: заголовок жирный, без межбуквенного воздуха
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * FIX C — Кнопки: восстанавливаем заливку и обводку
 * ═══════════════════════════════════════════════════════════════ */

/* Базовая кнопка — все ключевые свойства с !important. 
 * WoodMart перебивает background, color, padding, border-radius. */
body.kp-body .kp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 56px !important;
  padding: 0 28px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all .15s !important;
}

/* Primary — тёмная заливка, белый текст */
body.kp-body .kp-btn-primary,
body.kp-body button.kp-btn-primary,
body.kp-body a.kp-btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.kp-body .kp-btn-primary:hover {
  background: #1a1a1a !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-card) !important;
  color: #fff !important;
}
body.kp-body .kp-btn-primary span {
  color: #fff !important;
}

/* Ghost — прозрачная с обводкой */
body.kp-body .kp-btn-ghost,
body.kp-body button.kp-btn-ghost,
body.kp-body a.kp-btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  border: 0 !important;
}
body.kp-body .kp-btn-ghost:hover {
  background: var(--yellow) !important;
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX D — Hero trust-items (✓ БЕЗНАЛ С НДС и т.д.)
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * FIX E — Точки-индикаторы слайдера hero (в дизайне они есть!)
 * ═══════════════════════════════════════════════════════════════ */

/* Баг: в hero.php класс button — "dot", но в main.css селектор — ".kp-dot".
 * Селектор не находит элементы → точки не видны.
 * Решение: подхватываем оба варианта класса для совместимости. */

/* ═══════════════════════════════════════════════════════════════
 * FIX G — Общая защита от WoodMart: ссылки и кнопки
 * ═══════════════════════════════════════════════════════════════ */

/* WoodMart часто добавляет underline/color на все a-теги внутри
 * .website-wrapper. Снимаем для наших блоков. */
body.kp-body .kp-topbar a,
body.kp-body .kp-header a,
body.kp-body .kp-snav a,
body.kp-body .kp-page a,
body.kp-body .kp-footer a {
  text-decoration: none;
}

/* WoodMart-овская тень на кнопках */
body.kp-body .kp-snav-cart,
body.kp-body .kp-snav-icon,
body.kp-body .kp-cta-call,
body.kp-body .kp-btn {
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX H — Контейнер hero: расстояние, выравнивание
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * FIX I — Чтобы не было лишнего верхнего отступа у main.kp-home
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body main.kp-home,
body.kp-body main.kp-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX J — Lighter z-index fix для админ-бара WP
 * ═══════════════════════════════════════════════════════════════ */
body.admin-bar .kp-snav-wrap {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .kp-snav-wrap {
    top: 46px;
  }
}

/* ─────────── ex-patch-1.6.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.6
 * ───────────────────────────────────────────────────────────────
 * Финальный фикс расхождений с дизайном (после попиксельного сравнения):
 *
 *   1. Точки слайдера складываются в столбик, должны быть в ряд
 *      Причина: WoodMart грузит на button-элементах внутри hero
 *      flex-direction: column через какой-то родительский селектор,
 *      либо overflow родителя обрезает их позиционирование.
 *      Фикс: жёсткий flex-direction:row + overflow:visible на hero.
 *
 *   2. "ВСЕ КАТЕГОРИИ" блёкло-серое вместо чисто белого
 *      Причина: WoodMart ставит color на button-элементах.
 *      Фикс: цвет белый с !important на всех вложенных элементах.
 *
 *   3. "Заказать звонок" и "0 ₽" — не должны быть uppercase.
 *
 *   4. Точки слайдера обрезаются из-за overflow:hidden у hero.
 *
 * Подключается ПОСЛЕ patch-1.5.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * FIX 1 — Точки слайдера: горизонтальный ряд
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-dots {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.kp-body .kp-hero-dots > button,
body.kp-body .kp-hero-dots .kp-dot,
body.kp-body .kp-hero-dots .dot {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ink) !important;
  opacity: 0.18 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  display: block !important;
  outline: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

body.kp-body .kp-hero-dots > button.is-active,
body.kp-body .kp-hero-dots .kp-dot.is-active,
body.kp-body .kp-hero-dots .dot.is-active {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

body.kp-body .kp-hero-dots > button:hover,
body.kp-body .kp-hero-dots .kp-dot:hover,
body.kp-body .kp-hero-dots .dot:hover {
  opacity: 0.5 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 2 — "ВСЕ КАТЕГОРИИ" — чисто белый
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats {
  background: var(--ink) !important;
  color: #fff !important;
}
body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-allcats *,
body.kp-body .kp-snav-allcats span,
body.kp-body .kp-snav-allcats svg {
  color: #fff !important;
  fill: currentColor;
}
body.kp-body .kp-snav-allcats:hover,
body.kp-body .kp-snav-allcats.is-open {
  background: #1a1a1a !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — "Заказать звонок" и "0 ₽" — НЕ uppercase
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart,
body.kp-body .kp-snav-cart-sum {
  text-transform: none !important;
  letter-spacing:normal!important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 4 — Заголовок hero
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * FIX 5 — Защита от overflow:hidden, который резал точки
 * ═══════════════════════════════════════════════════════════════ */

/* ─────────── ex-patch-1.7.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.7
 * ───────────────────────────────────────────────────────────────
 * Шапка: корректные веса шрифта по эталону Claude Design.
 * Гарнитура (Futura PT) у всех элементов та же, разница только
 * в font-weight. В предыдущих патчах я задал слишком слабые
 * веса — теперь по эталону.
 *
 * Поле поиска: высота 52px (вместо 64), убран внутренний padding,
 * кнопка-лупа примыкает к правому краю без отступа.
 *
 * Подключается ПОСЛЕ patch-1.6.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — Телефоны: правильные веса (800 для верхнего, 700 для нижнего)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phone-line {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
 * FIX 4 — Кнопка "Заказать звонок": жирный 800
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * FIX 5 — Топ-бар: Futura PT, размер 15px (вес — наследуемый 400, не форсим)
 * ═══════════════════════════════════════════════════════════════ */

/* ─────────── ex-patch-1.8.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.8
 * ───────────────────────────────────────────────────────────────
 * Корневая причина расхождений по шрифту в шапке:
 *
 * В эталоне (styles.css из Claude Design):
 *   html, body { font: 400 16px/1.55 "Futura PT", ... }
 *   → Futura применяется ГЛОБАЛЬНО ко всему документу
 *
 * В нашем main.css:
 *   .kp-page { font-family: "Futura PT", ... }
 *   → Futura применяется только к <main class="kp-page">
 *   → шапка, топ-бар, sticky-меню — ВНЕ .kp-page, наследуют
 *     font-family от WoodMart body (не Futura)
 *
 * Поэтому "ВСЕ КАТЕГОРИИ", телефоны, "Заказать звонок", placeholder
 * поиска визуально выглядят другим шрифтом, чем в эталоне.
 *
 * Этот патч приводит к поведению эталона — Futura на html/body
 * глобально, с приоритетом над WoodMart.
 *
 * Подключается ПОСЛЕ всех остальных патчей.
 * ─────────────────────────────────────────────────────────────── */

/* PATCH 3.4: scope сужен с `html body.kp-body *` до списка .kp-*
 * обёрток. Класс kp-body теперь сидит на body всех страниц (header.php
 * подключается везде), и `*` с !important роняла Futura PT на WC-контент
 * корзины/чекаута. Теперь Futura применяется только внутри наших
 * визуальных обёрток — chrome и .kp-page. */
html body.kp-body .kp-page,
html body.kp-body .kp-page *,
html body.kp-body .kp-topbar,
html body.kp-body .kp-topbar *,
html body.kp-body .kp-header,
html body.kp-body .kp-header *,
html body.kp-body .kp-snav-wrap,
html body.kp-body .kp-snav-wrap *,
html body.kp-body .kp-footer,
html body.kp-body .kp-footer *,
html body.kp-body .kp-mega,
html body.kp-body .kp-mega * {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Базовые параметры font/color — только внутри наших обёрток,
 * чтобы не перебивать WC-стили на корзине/чекауте. */
html body.kp-body .kp-page,
html body.kp-body .kp-topbar,
html body.kp-body .kp-header,
html body.kp-body .kp-snav-wrap,
html body.kp-body .kp-footer,
html body.kp-body .kp-mega {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

/* Сглаживание шрифта — безвредно, оставляем глобально на body */
html body.kp-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─────────── ex-patch-1.9.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.9
 * ───────────────────────────────────────────────────────────────
 * Сброс моих ошибочных правок в патчах 1.5/1.6/1.7 для элементов
 * шапки. Возвращаю ТОЧНЫЕ значения из эталонного styles.css.
 *
 * Эталон → Что было у меня в патчах → Что должно быть:
 *
 *   .search height           48px  → 52px/56px → 48px ✓
 *   .search-input padding    0 16px → 0 20px  → 0 16px ✓
 *   .search-input font-weight (наследуется) → 500 → не трогать
 *   .search-btn               48×48 r-sm → 52×52 r:0 → 48×48 r-sm ✓
 *   .cta-call height          48px → 56px/52px → 48px ✓
 *   .cta-call padding         0 22px → 0 28px → 0 22px ✓
 *   .cta-call font-size       15px → 14px → 15px ✓
 *   .cta-call font-weight     600 → 800 → 600 ✓
 *   .cta-call letter-spacing  (нет) → .04em → нет ✓
 *
 * Подключается ПОСЛЕ всех остальных патчей и переопределяет их.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * Поле поиска — ТОЧНО как в эталоне
 *   .search { height:48px; max-width:520px; ... }
 *   .search-input { padding:0 16px; font-size:15px }
 *   .search-btn { width:48px; height:48px; border-radius:var(--radius-sm) }
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * Телефоны — ТОЧНО как в эталоне
 *   .phones { gap:2px; text-align:right }
 *   .phone-line { font-weight:700; font-size:16px; letter-spacing:-.01em }
 *   .phone-mobile { color:var(--ink-2); font-weight:600; font-size:14px }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: right !important;
}

body.kp-body .kp-phone-line {
  letter-spacing:normal!important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

body.kp-body .kp-phone-mobile,
body.kp-body a.kp-phone-mobile,
body.kp-body .kp-phone-line.kp-phone-mobile {
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * "Заказать звонок" — ТОЧНО как в эталоне
 *   .cta-call {
 *     height:48px; padding:0 22px;
 *     background:var(--yellow); color:var(--ink);
 *     font-weight:600; font-size:15px;
 *     border-radius:var(--radius-sm);
 *     gap:8px;
 *     (НЕТ letter-spacing, НЕТ text-transform)
 *   }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cta-call,
body.kp-body button.kp-cta-call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 22px !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing:normal!important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
}

body.kp-body .kp-cta-call:hover {
  background: var(--yellow-hover) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * Топ-бар — ТОЧНО как в эталоне
 *   .topbar { font-size:15px; line-height:1 }
 *   .tb-item { color:rgba(255,255,255,.78); letter-spacing:.01em }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-topbar {
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

body.kp-body .kp-tb-item {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing:normal!important;
  font-weight: 400 !important;
  transition: color .15s !important;
}

body.kp-body .kp-tb-item:hover {
  color: #fff !important;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 02 · HERO ГЛАВНОЙ (быв. 2.0)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-2.0.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 2.0
 * ───────────────────────────────────────────────────────────────
 * Hero: приведение к эталону styles.css / sections1.jsx из handoff.
 *
 * Источник истины — inline-стили на h1 в эталоне (перебивают
 * CSS-класс). Реальные значения, которые применяются в браузере:
 *   h1.kp-hero-title { font-size:56px; font-weight:700;
 *                      line-height:1.4; letter-spacing:-0.035em }
 *
 * Этот патч переопределяет patch-1.4/1.5/1.6 для Hero и
 * восстанавливает работающий адаптив 1100/768 (его сломали
 * !important-правила в patch-1.5/1.6 без медиа-запросов).
 *
 * Подключается ПОСЛЕ patch-1.9.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * 1 — Контейнер Hero
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero {
  padding: 64px 0 80px !important;
  background: #FFFFFF !important;
  position: relative;
  overflow: visible !important;
}

body.kp-body .kp-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  min-height: 520px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 2 — Kicker ("Корпоративные подарки · СПб · с 2024")
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-kicker {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  color: #3D3D3D !important;
  margin-bottom: 24px !important;
}

body.kp-body .kp-hero-kicker-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--yellow, #FECE15) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px #FFF4B8 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 3 — H1 (главное расхождение)
 *
 *   Было (patch-1.5/1.6):  64px / weight 900 / line-height 0.98
 *   Эталон (inline):       56px / weight 700 / line-height 1.4
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-title {
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  margin: 0 0 28px !important;
  color: #0A0A0A !important;
  white-space: normal !important;
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
 * 4 — Подзаголовок
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-sub {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #3D3D3D !important;
  max-width: 520px !important;
  margin: 0 0 36px !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 5 — Кнопочный блок
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-ctas {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 40px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 6 — Блок доверия (Безнал / ЭДО / Отгрузка)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-trust {
  display: flex !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

body.kp-body .kp-hero-trust-item {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  color: #3D3D3D !important;
}

body.kp-body .kp-hero-trust-item svg {
  color: var(--yellow, #FECE15) !important;
  stroke: #0A0A0A !important;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * 7 — Правая колонка + blob
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-right {
  position: relative !important;
  height: 520px !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body.kp-body .kp-hero-blob {
  position: absolute !important;
  inset: 0 !important;
  background: var(--yellow, #FECE15) !important;
  border-radius: 50% 16% 50% 16% / 50% 50% 50% 50% !important;
  transform: rotate(-8deg) translateX(20px) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 8 — Картинка товара / слайды
 *
 * Сохраняем поведение слайдера: неактивный — rotate(-4deg) scale(.96)
 * opacity 0, активный — rotate(2deg) scale(1) opacity 1.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-product,
body.kp-body .kp-hero-product-slide {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 62% !important;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.25)) !important;
}

body.kp-body .kp-hero-product-slide {
  opacity: 0;
  transition: opacity .5s ease, transform .6s ease;
  transform: translate(-50%,-50%) rotate(-4deg) scale(.96) !important;
}

body.kp-body .kp-hero-product-slide.is-active {
  opacity: 1;
  transform: translate(-50%,-50%) rotate(2deg) scale(1) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 9 — Плашка "18 000 SKU в каталоге"
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-tag {
  position: absolute !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
}

body.kp-body .kp-hero-tag-1 {
  left: -20px !important;
  top: 60px !important;
  right: auto !important;
  bottom: auto !important;
}

body.kp-body .kp-hero-tag-num {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing:normal!important;
  line-height: 1 !important;
  font-feature-settings: "tnum" !important;
}

body.kp-body .kp-hero-tag-lbl {
  font-size: 11px !important;
  color: #8A8A8A !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 10 — Плашка "МЕТОД | УФ-печать"
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-tag-2 {
  right: -20px !important;
  bottom: 60px !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.kp-body .kp-hero-tag-meta {
  font-size: 10px !important;
  color: #8A8A8A !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  border-right: 1px solid #E5E5E5 !important;
  padding-right: 10px !important;
}

body.kp-body .kp-hero-tag-name {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 11 — Точки слайдера
 *
 * patch-1.5/1.6 уже описали точки. Дублирую здесь, чтобы Hero
 * был в одном файле и эталоне (значения те же — расхождений нет).
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * 12 — Адаптив (чинит сломанные брейкпоинты из main.css)
 *
 * В main.css @media(max-width:1100) и (max-width:760) ужимают h1
 * до 56/40, но patch-1.5/1.6 форсили 64px !important без медиа →
 * адаптив не работал ни на одном экране.
 *
 * Брейкпоинт ≤768 (а не 760 из main.css) — по ТЗ.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  body.kp-body .kp-hero-title {
    font-size: 56px !important;
  }
}

@media (max-width: 768px) {
  body.kp-body .kp-hero-grid {
    grid-template-columns: 1fr !important;
  }
  body.kp-body .kp-hero-right {
    height: 360px !important;
  }
  body.kp-body .kp-hero-ctas .kp-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 03 · STICKY-НАВИГАЦИЯ, КНОПКИ, КАРТОЧКИ, ПОИСК v1 (быв. 3.0–3.4)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-3.0.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.0
 * ───────────────────────────────────────────────────────────────
 * Шапка: приведение к ЭФФЕКТИВНЫМ значениям эталона. В JSX многие
 * элементы шапки имеют inline-стили, которые перебивают CSS-классы
 * из styles.css. Patch-1.7/1.9 ориентировались только на классы и
 * пропустили inline-overrides. Этот патч их закрывает.
 *
 *   Селектор             CSS-класс       inline JSX       Эффект.
 *   .phone-line          16/700          18/600           18/600
 *   .phone-mobile        14/600          16/(inherit)     16/600
 *   .cta-call            15/600          18/600 (span)    18/600
 *   .snav-allcats span   inherit 800/15  600/14           600/14
 *   .snav-link           15/700 caps     600/14           600/14 caps
 *   .snav-cart-sum       (inherit)       600              600
 *   .badge-count (fav)   11/800          600 на span      11/600
 *   .snav-allcats svg    color=#fff      color="#FFCF02"  жёлтая
 *
 * Подключается ПОСЛЕ patch-2.0.css (handle kp-patch-30, deps
 * ['kp-patch-20']). patch-1.6 / 1.7 / 1.9 переопределяются здесь.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * 1 — Телефон верхний (десктоп)
 *   inline JSX: fontSize 18, fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phone-line:not(.kp-phone-mobile) {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 2 — Телефон нижний (мобильный)
 *   inline JSX: fontSize 16 (вес 600 наследуется из patch-1.9)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phone-mobile,
body.kp-body a.kp-phone-mobile,
body.kp-body .kp-phone-line.kp-phone-mobile {
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 3 — CTA "Заказать звонок"
 *   inline JSX на span внутри button: fontSize 18, fontWeight 600
 *   В нашем header.php span'а нет — текст лежит прямо в кнопке,
 *   поэтому таргет — сама кнопка.
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * 4 — Текст "ВСЕ КАТЕГОРИИ" в sticky-nav кнопке
 *   inline JSX на span: fontSize 14, fontWeight 600
 *   uppercase / letter-spacing .1em / тёмный фон — уровнем выше
 *   на .kp-snav-allcats, не меняем.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats span {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 5 — Ссылки sticky-nav ("Доставка и оплата" и т. д.)
 *   inline JSX: fontSize 14, fontWeight 600
 *   uppercase / letter-spacing .08em — из main.css, не трогаем.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-link {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 6 — Сумма в корзине
 *   inline JSX на span.cart-sum: fontWeight 600
 *   patch-1.6 ставит 800 — здесь возвращаем 600 (text-transform
 *   и letter-spacing из 1.6 остаются как есть).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart-sum {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 7 — Бэйдж избранного (НЕ корзины)
 *   inline JSX на span с favCount: fontWeight 600
 *   .kp-badge-cart inline не имеет — остаётся 800 из main.css.
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * 8 — Иконка menu в кнопке "ВСЕ КАТЕГОРИИ" — жёлтая
 *   Эталон JSX: <KP.Icon name="menu" color="#FFCF02"/>
 *   patch-1.6 ставит stroke:#fff на ВСЕ svg внутри .kp-snav-allcats —
 *   здесь точечно красим обратно в жёлтый.
 *
 *   PHP-правка в header.php не требуется: kp_ui_icon() не имеет
 *   параметра color (4-й аргумент — class, см. inc/icons.php:94),
 *   SVG генерится с stroke="currentColor", поэтому цветом управляем
 *   через CSS на родителе.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats svg {
  color: var(--yellow, #FECE15) !important;
  stroke: var(--yellow, #FECE15) !important;
}

/* ─────────── ex-patch-3.1.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.1
 * ───────────────────────────────────────────────────────────────
 * GLOBAL FONT-WEIGHT NORMALIZATION
 *
 * В дочерней теме подключены только 4 веса Futura PT:
 *   400 (book) · 500 (medium) · 600 (demi) · 700 (bold)
 *
 * Веса 800 и 900 браузер синтезирует искусственно (рисует жирнее
 * имеющегося Bold), что даёт "размазанный" контур и расхождения
 * с эталоном. В эталоне inline-стили JSX на каждом таком элементе
 * перебивают CSS-класс на 600/700.
 *
 * Этот патч закрывает всё разом:
 *   • 800/900 → 600, где в эталонной JSX явный inline 600
 *   • 800/900 → 700 в остальных случаях
 *   • main.css НЕ трогаем — только перебиваем через body.kp-body + !important
 *
 * Цель: после patch-3.1 максимальный вес во всём проекте = 700.
 * Подключается ПОСЛЕ patch-3.0.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * GROUP 1 — Заголовки секций (sec-title, clients-title, nl-title)
 *   эталон JSX: inline fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-sec-title,
body.kp-body .kp-clients-title,
body.kp-body .kp-nl-title {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 2 — Крупные цифры (stat-num)
 *   эталон JSX: inline fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-stat-num {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 3 — Кнопки .kp-btn (primary / ghost / sec-foot CTA и т.д.)
 *   эталон JSX: inline fontWeight 600 (на span или самой кнопке)
 *   Перебивает в т.ч. patch-1.5:121, который ставил 800!important.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-btn,
body.kp-body .kp-btn-primary,
body.kp-body .kp-btn-ghost,
body.kp-body .kp-btn span,
body.kp-body button.kp-btn,
body.kp-body a.kp-btn {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 4 — Названия в карточках с inline 600 в эталоне
 *   .kp-print-name → 600 (sections2:28)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-print-name {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 5 — Sticky-nav кнопки-shell
 *   текст внутри уже 600 (patch-3.0), сам shell-вес → 700
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-cart {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 6 — Мега-меню
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-mega-allcats,
body.kp-body .kp-mega-col-title,
body.kp-body .kp-mega-hit-price,
body.kp-body .kp-mega-promo-title {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 7 — Логотип (на случай если когда-нибудь будет .kp-logo-word)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-logo-word {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 8 — Бэйджи (избранное уже 600 в patch-3.0; корзина → 700)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-badge-count {
  font-weight: 700 !important;
}
/* Сохраняем приоритет patch-3.0 для не-cart бейджей (600). */
body.kp-body .kp-badge-count:not(.kp-badge-cart) {
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 9 — Карточки категорий / каталог-карты / кейсов
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cat-name,
body.kp-body .kp-catmap-grouplabel,
body.kp-body .kp-catmap-name,
body.kp-body .kp-case-tag,
body.kp-body .kp-case-title,
body.kp-body .kp-case-more {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 10 — Табы и продукт
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-tab,
body.kp-body .kp-prod-badge,
body.kp-body .kp-prod-price-num,
body.kp-body .kp-prod-price-req {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 11 — Методы нанесения (print-more) и ссылки-стрелки
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-print-more,
body.kp-body .kp-link-yellow {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 12 — Преимущества, бренды, клиенты
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-adv-title,
body.kp-body .kp-brand-cell,
body.kp-body .kp-client-word {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 13 — Newsletter (kicker / button / done state)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-nl-kicker,
body.kp-body .kp-nl-btn,
body.kp-body .kp-nl-done {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 14 — Footer и мобильный CTA
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-footer-h,
body.kp-body .kp-mobile-cta {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 15 — Hero-варианты stack/mosaic (не активны при variant=product,
 * но фиксируем на будущее)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hstack-chip,
body.kp-body .kp-hstack-flag-num,
body.kp-body .kp-hmos-chip,
body.kp-body .kp-hmos-badge-num,
body.kp-body .kp-hero-mosaic-pill {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP 16 — Убрать унаследованный разделитель перед первой
 *            ссылкой sticky-nav (patch-1.5 рисует ::before-полоску,
 *            в эталоне такого разделителя нет)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-left .kp-snav-link:first-of-type {
  padding-left: 0 !important;
}
body.kp-body .kp-snav-left .kp-snav-link:first-of-type::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ─────────── ex-patch-3.2.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.2
 * ───────────────────────────────────────────────────────────────
 * Popular Categories — фикс цветов на тёмной карточке (.cat-tone-ink).
 *
 * Корневая причина: наш main.css:42 содержит правило
 *   .kp-page a { color: inherit; text-decoration: none }
 * со специфичностью 0,0,1,1. Оно перебивает
 *   .kp-cat-tone-ink { color: #fff }  (0,0,1,0)
 * → карточка «Электроника» унаследовала ink-цвет от .kp-page и
 * рендерила текст заголовка и стрелку чёрным на чёрном фоне.
 *
 * В эталоне правило `a { color: inherit }` — тип-селектор без обёртки
 * (0,0,0,1), оно проигрывает классу .cat-tone-ink → текст белый.
 *
 * Решение точечное: явно белый цвет на tone-ink и нужных потомках
 * с высокой специфичностью (body.kp-body + двойной класс + !important).
 *
 * См. BACKLOG.md п.8 — этот же паттерн проверить в Advantages и Cases
 * перед работой над теми секциями.
 *
 * Подключается ПОСЛЕ patch-3.1.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Popular Categories: tone-ink белый текст
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cat-tone-ink,
body.kp-body a.kp-cat-tone-ink {
  color: #fff !important;
}

body.kp-body .kp-cat-tone-ink .kp-cat-name {
  color: #fff !important;
}

body.kp-body .kp-cat-tone-ink .kp-cat-foot > svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ─────────── ex-patch-3.3.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.3
 * ───────────────────────────────────────────────────────────────
 * Products Carousel — комплексный фикс. 4 группы правил (GROUP E удалена
 * вместе с разметкой quick-view, см. ниже):
 *
 *   GROUP A — Главный визуальный баг: фикс скрытия неактивной панели
 *             табов. UA-rule [hidden]{display:none} проигрывает
 *             .kp-prod-grid{display:grid} из-за равной специфичности +
 *             порядка → обе панели (new + hit) рендерятся одновременно,
 *             видно 10 карточек вместо 5. Принудительно display:none.
 *
 *   GROUP B — Inline-overrides из эталонной JSX (sections1.jsx):
 *               .prod-name        inline 600/16 (CSS-класс — 700/14)
 *               .prod-sku         inline 15px  (класс — 11px)
 *               .prod-stock       inline 14px  (класс — 12px)
 *               .sec-foot .btn-ghost inline 700 (patch-3.1 форсит 600)
 *
 *   GROUP C — Защита от WoodMart-сброса обводки кнопки "В корзину".
 *             WoodMart-родитель глобально режет box-shadow на кнопках.
 *             Жёстко возвращаем inset-border + bg + color на .kp-prod-add.
 *
 *   GROUP D — Защита позиции сердечка-избранного. WoodMart-wishlist
 *             может перебивать right→left → сердце уезжает в левый угол.
 *             Жёстко фиксируем right:8, left:auto на .kp-prod-fav.
 *
 *   GROUP E — [УДАЛЕНА] Защита hover-эффекта "Быстрый просмотр".
 *             Сам quick-view вырезан из шаблонов, правила стали мёртвыми.
 *
 * Подключается ПОСЛЕ patch-3.2.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Скрытие неактивной панели табов
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-grid[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP B — Inline-overrides JSX
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-name {
  font-weight: 600 !important;
  font-size: 16px !important;
}

body.kp-body .kp-prod-sku {
  font-size: 15px !important;
}

body.kp-body .kp-prod-stock {
  font-size: 14px !important;
}

body.kp-body .kp-sec-prods .kp-sec-foot .kp-btn-ghost,
body.kp-body .kp-sec-prods .kp-sec-foot a.kp-btn-ghost {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP C — Защита обводки .kp-prod-add от WoodMart-сброса
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-add {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  border: 0 !important;
}

body.kp-body .kp-prod-add:hover {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP D — Защита позиции сердечка от WoodMart-wishlist
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 3 !important;
}

/* ─────────── ex-patch-3.4-search.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.4: Header AJAX live-search.
 * ───────────────────────────────────────────────────────────────
 * В header.php заменили статичную .kp-search на вызов
 * woodmart_search_form([ ajax => true, ... ]). Woodmart рендерит
 * свою разметку (form.searchform.woodmart-ajax-search + input.s
 * + button.searchsubmit + .wd-search-results-wrapper) и сам
 * подключает autocomplete-lib + ajaxSearch.js + инлайн-стили.
 *
 * Здесь мы:
 *   A. перекрашиваем woodmart-классы под визуал старого .kp-search
 *      (var(--fog) фон, --radius-sm, focus-within → белый+ink-бордер,
 *      жёлтая квадратная кнопка с лупой через инлайн-data-URI SVG);
 *   B. восстанавливаем мобильное правило display:none — на mobile
 *      строка main.css:589 ".kp-search{display:none}" больше не
 *      работает (класса .kp-search в шапке нет), нужен новый
 *      селектор .kp-search-wrap.
 *
 * SVG в data-URI — Lucide search (тот же path, что в
 * kp_ui_icons_registry()['search']), stroke захардкожен в --ink
 * (#0A0A0A), потому что currentColor в фоновых SVG не работает.
 *
 * Подключается ПОСЛЕ patch-3.3.css.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Скин формы под Claude Design
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search-wrap {
  position: relative;
  width: 100%;
  /* Собственный stacking context выше .kp-snav-wrap (50),
     .kp-mega-menu (60) и hero-isolation (0). Toast (1000) остаётся
     поверх по дизайну. */
  z-index: 250;
}

/* Обёртка, которую woodmart_search_form() рендерит */
body.kp-body .kp-search-wrap .wd-search-form {
  width: 100%;
}

/* Сама форма */
body.kp-body .kp-search-wrap form.searchform {
  display: flex;
  align-items: center;
  background: var(--fog);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  height: 48px;
  padding: 0;
  margin: 0;
  transition: background .15s, border-color .15s;
}

body.kp-body .kp-search-wrap form.searchform:focus-within {
  background: #fff;
  border-color: var(--ink);
}

/* Инпут */
body.kp-body .kp-search-wrap form.searchform input.s {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
}

body.kp-body .kp-search-wrap form.searchform input.s::placeholder {
  color: var(--ink-3);
}

/* Крестик "очистить" — выровнять по центру, не ломать высоту */
body.kp-body .kp-search-wrap form.searchform .wd-clear-search {
  margin-right: 8px;
}

/* Кнопка submit */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
  display: grid;
  place-items: center;
  padding: 0;
}

body.kp-body .kp-search-wrap form.searchform button.searchsubmit:hover {
  background: var(--yellow-hover);
}

/* Прячем текст "Search" (он остаётся в DOM для a11y) */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Иконка-лупа: inline SVG вставляется JS-ом (header.php) строго по Claude Design.
   Здесь гасим возможную родную иконку Woodmart (::before/::after font-icon)
   и центрируем наш svg. */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit::before,
body.kp-body .kp-search-wrap form.searchform button.searchsubmit::after {
  content: none !important;
}
body.kp-body .kp-search-wrap form.searchform button.searchsubmit svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Дропдаун результатов: внутри stacking context .kp-search-wrap (250). */
body.kp-body .kp-search-wrap .wd-search-results-wrapper {
  z-index: 200;
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP B — Мобильное скрытие
 * (заменяет main.css:589 ".kp-search{display:none}", который
 *  больше ни во что не попадает после смены разметки)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  body.kp-body .kp-search-wrap {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * GROUP C — Компактность карточек (опционально).
 * Дефолт Woodmart: --wd-search-sp:15px на десктопе, 10px на мобиле.
 * При body{font-size:16px} карточки визуально просторнее, чем на
 * parent-теме с 14px. Поджимаем паддинг и иконку миниатюры до
 * мобильных значений (10px / 50px) скоупно — только внутри
 * .kp-search-wrap, чтобы не зацепить другие места.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search-wrap .wd-dropdown-results {
  --wd-search-sp: 10px;
}
body.kp-body .kp-search-wrap .wd-dropdown-results .wd-suggestion-thumb {
  max-width: 50px;
  margin-inline-end: 10px;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 04 · КОРЗИНА, СТРАНИЦА ТОВАРА v1, СЧЁТЧИК КОРЗИНЫ (быв. 4.0–4.2)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-4.0-cart.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — Корзина (Cart page), редизайн v2, 08.07.2026.
 * ───────────────────────────────────────────────────────────────
 * Чистая B2B-корзина по макету `K-Promo Cart (redesign) v2 modal`.
 * Скоуп .kp-cart-* / .kp-sum-* + обёртка body.kp-body, чтобы не задевать
 * стандартные WC-классы (.cart_item, .quantity и др.).
 * Заявка — в модалке .kp-cm-* (mu-plugin kp-request), стили модалки — ниже
 * по каскаду (ex-callmodal). Токены (--paper/--ink/--line/--fog/--yellow-*/
 * --eco/--hot/--radius/--shadow-*) определены в main.css.
 * Брейкпоинты темы: 1240 / 980 / 760 / 480.
 * ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
 * Page header
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-page{background:var(--paper);padding:32px 0 80px;min-height:60vh}
body.kp-body .kp-cart-back{display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:13px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;margin-bottom:24px;transition:color .15s}
body.kp-body .kp-cart-back:hover{color:var(--ink)}
body.kp-body .kp-cart-back svg{transform:rotate(180deg);stroke:currentColor}

body.kp-body .kp-cart-head{margin-bottom:40px}
body.kp-body .kp-cart-head-kicker{font-weight:700;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
body.kp-body .kp-cart-head-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;flex-wrap:wrap}
body.kp-body .kp-cart-head-h{margin:0;font-weight:700;font-size:56px;line-height:1;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-head-blurb{margin:0;max-width:420px;font-size:15px;line-height:1.55;
  color:var(--ink-2);padding-top:8px}
body.kp-body .kp-cart-bar{display:block;width:64px;height:4px;background:var(--yellow);margin-top:18px}

/* ═══════════════════════════════════════════════════════════════
 * Two-column grid
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;
  align-items:start;margin-top:32px}

/* ═══════════════════════════════════════════════════════════════
 * LEFT — items panel
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-panel{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
body.kp-body .kp-cart-panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
body.kp-body .kp-cart-panel-head-left{display:flex;align-items:center;gap:14px}
body.kp-body .kp-cart-panel-h{font-weight:700;font-size:14px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-panel-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;padding:0 7px;background:var(--ink);color:var(--yellow);
  font-weight:700;font-size:11px;border-radius:4px;font-feature-settings:"tnum"}
body.kp-body .kp-cart-clear{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;cursor:pointer;font-weight:700;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-radius:4px;
  font-family:inherit;transition:all .15s;text-decoration:none}
body.kp-body .kp-cart-clear:hover{color:var(--hot);background:var(--fog)}
body.kp-body .kp-cart-clear svg{stroke:currentColor;stroke-width:2}

/* ═══════════════════════════════════════════════════════════════
 * Empty state
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-empty{display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:64px 32px;gap:18px}
body.kp-body .kp-cart-empty-icon{width:96px;height:96px;border-radius:50%;
  background:var(--yellow-soft);display:grid;place-items:center;color:var(--ink);position:relative}
body.kp-body .kp-cart-empty-icon::after{content:"0";position:absolute;right:-4px;top:-4px;
  width:36px;height:36px;background:var(--ink);color:var(--yellow);font-weight:700;font-size:16px;
  border-radius:50%;display:grid;place-items:center;font-feature-settings:"tnum";
  border:3px solid var(--paper)}
body.kp-body .kp-cart-empty-h{margin:0;font-weight:700;font-size:24px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-empty-sub{margin:0;max-width:360px;font-size:14px;line-height:1.55;
  color:var(--ink-2)}
body.kp-body .kp-cart-empty-cta{display:inline-flex;align-items:center;gap:10px;height:48px;
  padding:0 22px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px;
  letter-spacing:normal;text-transform:uppercase;border-radius:8px;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;margin-top:6px;transition:all .15s}
body.kp-body .kp-cart-empty-cta:hover{background:var(--yellow-hover);transform:translateY(-1px);
  box-shadow:var(--shadow-card)}

/* ═══════════════════════════════════════════════════════════════
 * Item rows  (thumb | meta | qty | price | ✕)
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-items{display:flex;flex-direction:column}
body.kp-body .kp-cart-row{display:grid;
  grid-template-columns:96px minmax(0,1fr) 120px 150px 32px;
  gap:20px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);
  transition:background .15s}
body.kp-body .kp-cart-row:last-child{border-bottom:0}
body.kp-body .kp-cart-row:hover{background:var(--fog)}
body.kp-body .kp-cart-thumb{width:96px;height:96px;border-radius:8px;overflow:hidden;
  background:var(--fog);flex-shrink:0}
body.kp-body .kp-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.kp-body .kp-cart-thumb a{display:block;width:100%;height:100%}

body.kp-body .kp-cart-meta{display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden}
body.kp-body .kp-cart-meta>*{min-width:0;max-width:100%}
body.kp-body .kp-cart-name{font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);
  text-decoration:none;text-wrap:pretty}
body.kp-body .kp-cart-name:hover{color:var(--ink-2)}
body.kp-body .kp-cart-info{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-3);font-feature-settings:"tnum"}
body.kp-body .kp-cart-info span{display:inline-flex;align-items:center;gap:4px}
body.kp-body .kp-cart-info b{font-weight:700;color:var(--ink-2);letter-spacing:normal}

/* Характеристики (замена «Склад»): чипы значений вариации.
 * .kp-cart-attr--swatch + --dot зарезервированы под цветной кружок (follow-up). */
body.kp-body .kp-cart-attrs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
body.kp-body .kp-cart-attr{display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;background:var(--fog);border-radius:5px;font-size:12px;font-weight:700;
  color:var(--ink-2);letter-spacing:normal}
body.kp-body .kp-cart-attr-dot{width:12px;height:12px;border-radius:50%;
  border:1px solid rgba(0,0,0,.14);flex-shrink:0}

/* Галочка «С нанесением логотипа» — инфо для менеджера (собирается в заявку) */
body.kp-body .kp-cart-brandcheck{display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;user-select:none;font-size:13px;font-weight:500;color:var(--ink-2);
  align-self:flex-start;margin-top:2px}
body.kp-body .kp-cart-brandcheck-i{position:absolute;opacity:0;width:0;height:0}
body.kp-body .kp-cart-brandcheck-box{width:20px;height:20px;border:1.5px solid var(--ink-3);
  border-radius:6px;display:grid;place-items:center;background:#fff;color:transparent;
  transition:all .15s;flex-shrink:0}
body.kp-body .kp-cart-brandcheck-box svg{stroke:currentColor}
body.kp-body .kp-cart-brandcheck:hover .kp-cart-brandcheck-box{border-color:var(--ink)}
body.kp-body .kp-cart-brandcheck-i:checked + .kp-cart-brandcheck-box{background:var(--yellow);
  border-color:var(--ink);color:var(--ink)}
body.kp-body .kp-cart-brandcheck-i:focus-visible + .kp-cart-brandcheck-box{outline:2px solid var(--ink);outline-offset:2px}

body.kp-body .kp-cart-qty-cell{display:flex;justify-content:center}
body.kp-body .kp-cart-qty{display:inline-flex;align-items:stretch;background:#fff;
  border:1.5px solid var(--ink);border-radius:6px;height:38px;overflow:hidden;width:fit-content}
/* WC рендерит свой div.quantity внутри — подмажем под наш layout */
body.kp-body .kp-cart-qty .quantity{display:flex;align-items:stretch;margin:0;border:0}
body.kp-body .kp-cart-qty input.qty,
body.kp-body .kp-cart-qty input[type="number"]{flex:1;width:60px;min-width:0;border:0;outline:0;
  background:transparent;text-align:center;font-weight:700;font-size:14px;color:var(--ink);
  font-feature-settings:"tnum";font-family:inherit;height:100%;padding:0;
  -moz-appearance:textfield}
body.kp-body .kp-cart-qty input.qty::-webkit-outer-spin-button,
body.kp-body .kp-cart-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.kp-body .kp-cart-qty-fixed{display:grid;place-items:center;padding:0 18px;
  font-weight:700;font-size:14px;color:var(--ink)}

body.kp-body .kp-cart-price-cell{display:flex;flex-direction:column;align-items:flex-end;
  gap:4px;text-align:right}
body.kp-body .kp-cart-price{font-weight:700;font-size:18px;color:var(--ink);
  font-feature-settings:"tnum";letter-spacing:normal;white-space:nowrap}
body.kp-body .kp-cart-price-u{font-weight:700;font-size:13px;color:var(--ink-3);margin-left:3px}
body.kp-body .kp-cart-price-per{font-size:11px;color:var(--ink-3);font-feature-settings:"tnum";
  white-space:nowrap}

body.kp-body .kp-cart-x{width:32px;height:32px;border-radius:50%;background:transparent;
  border:0;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;
  transition:all .15s;justify-self:end;text-decoration:none}
body.kp-body .kp-cart-x:hover{background:#FFE5E5;color:var(--hot)}

/* Скрытая стандартная WC update_cart кнопка — нужна форме для update/coupon */
body.kp-body .kp-cart-actions[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
 * RIGHT — summary sidebar
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}

body.kp-body .kp-sum-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
body.kp-body .kp-sum-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-h{font-weight:700;font-size:14px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink)}
body.kp-body .kp-sum-h-count{font-size:13px;color:var(--ink-3);font-feature-settings:"tnum"}

body.kp-body .kp-sum-rows{padding:16px 22px;display:flex;flex-direction:column;gap:10px;
  border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:14px;color:var(--ink-2)}
body.kp-body .kp-sum-row b{color:var(--ink);font-weight:700;font-feature-settings:"tnum";
  font-size:16px}
body.kp-body .kp-sum-row.is-total b{font-size:26px;letter-spacing:-.5px}
body.kp-body .kp-sum-row.is-total span{color:var(--ink);font-weight:700}
body.kp-body .kp-sum-row-u{font-weight:700;font-size:13px;color:var(--ink-3);margin-left:3px}

body.kp-body .kp-sum-foot{padding:18px 22px;display:flex;flex-direction:column;gap:0}
body.kp-body .kp-sum-hint{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
body.kp-body .kp-sum-cta{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px;
  letter-spacing:normal;text-transform:uppercase;border:0;border-radius:8px;cursor:pointer;
  font-family:inherit;transition:all .15s;text-decoration:none;box-sizing:border-box}
body.kp-body .kp-sum-cta:hover{background:var(--yellow-hover);transform:translateY(-1px);
  box-shadow:var(--shadow-card)}
body.kp-body .kp-sum-cta svg{stroke:currentColor}
/* Phase 2: вторичная кнопка «Скачать КП (PDF)» — тихая, обводкой */
body.kp-body .kp-sum-cta-2{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:46px;margin-top:10px;background:#fff;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:8px;font-weight:700;font-size:12px;
  letter-spacing:normal;text-transform:uppercase;cursor:pointer;font-family:inherit;
  transition:all .15s;text-decoration:none;box-sizing:border-box}
body.kp-body .kp-sum-cta-2:hover{background:var(--fog)}
body.kp-body .kp-sum-cta-2 svg{stroke:currentColor}
body.kp-body .kp-sum-trust{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:12.5px;color:var(--ink-2);margin-top:14px}
body.kp-body .kp-sum-trust svg{color:var(--eco);stroke:currentColor;flex-shrink:0}

/* Блок фактов (замена аккордеонов + нижнего баннера) */
body.kp-body .kp-sum-facts{display:flex;flex-direction:column;gap:12px;background:var(--fog);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
body.kp-body .kp-sum-fact{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;
  line-height:1.45;color:var(--ink-2)}
body.kp-body .kp-sum-fact svg{color:var(--ink-3);stroke:currentColor;flex-shrink:0;margin-top:1px}
body.kp-body .kp-sum-fact b{font-weight:700;color:var(--ink)}
body.kp-body .kp-sum-facts-link{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-weight:700;font-size:12px;letter-spacing:normal;text-transform:uppercase;color:var(--ink);
  text-decoration:none}
body.kp-body .kp-sum-facts-link svg{stroke:currentColor}
body.kp-body .kp-sum-facts-link:hover{color:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════════
 * Заявка-модалка (kp-request) — доп. под v2. Скоуп #kp-cart-request,
 * чтобы НЕ задеть общую callback-модалку «Заказать нанесение» (.kp-cm-*).
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body #kp-cart-request .kp-cm-lbl{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.kp-body #kp-cart-request .kp-cm-kicker{font-weight:700;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
body.kp-body #kp-cart-request .kp-cm-order{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--fog);border-radius:10px;padding:12px 16px;margin-bottom:18px;
  font-size:13px;color:var(--ink-2)}
body.kp-body #kp-cart-request .kp-cm-order b{color:var(--ink);font-weight:700;font-feature-settings:"tnum"}
body.kp-body #kp-cart-request .kp-cm-order-dot{color:var(--ink-3)}
body.kp-body #kp-cart-request .kp-cm-consent{font-size:11.5px;color:var(--ink-3);line-height:1.5;
  margin-top:12px;text-align:center}
body.kp-body #kp-cart-request .kp-cm-consent a{color:var(--ink-2);text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
 * Responsive — брейкпоинты темы 1240 / 980 / 760 / 480
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  body.kp-body .kp-cart-grid{grid-template-columns:1fr 340px;gap:24px}
  body.kp-body .kp-cart-row{grid-template-columns:96px minmax(0,1fr) 110px 130px 32px;gap:16px}
  body.kp-body .kp-cart-head-h{font-size:48px}
}
@media (max-width:980px){
  body.kp-body .kp-cart-grid{grid-template-columns:1fr}
  body.kp-body .kp-cart-side{position:static}
  body.kp-body .kp-cart-head-h{font-size:40px}
}
@media (max-width:760px){
  /* строка перестраивается: thumb+meta сверху, qty/price/✕ снизу */
  body.kp-body .kp-cart-row{grid-template-columns:88px minmax(0,1fr) 32px;
    gap:10px 16px;padding:18px;align-items:start}
  body.kp-body .kp-cart-thumb{grid-column:1;grid-row:1;width:88px;height:88px}
  body.kp-body .kp-cart-meta{grid-column:2;grid-row:1}
  body.kp-body .kp-cart-x{grid-column:3;grid-row:1;justify-self:end}
  body.kp-body .kp-cart-qty-cell{grid-column:1 / -1;grid-row:2;justify-content:flex-start;
    padding-top:4px}
  body.kp-body .kp-cart-price-cell{grid-column:1 / -1;grid-row:3;flex-direction:row;
    align-items:baseline;gap:10px;text-align:left}
  body.kp-body .kp-cart-head-h{font-size:34px}
}
@media (max-width:480px){
  body.kp-body .kp-cart-row{grid-template-columns:64px minmax(0,1fr) 28px;gap:8px 12px;padding:16px}
  body.kp-body .kp-cart-thumb{width:64px;height:64px}
  body.kp-body .kp-cart-panel-head{padding:16px}
  body.kp-body .kp-cart-head-h{font-size:28px}
  body.kp-body .kp-cart-head-blurb{font-size:14px}
}
/* ─────────── ex-patch-4.1-product.css ─────────── */
/**
 * PATCH 4.1 — Single Product page
 *
 * Скоуп: body.kp-body.single-product
 *
 * Решает:
 *  1. Карточка товара шире .kp-container.
 *     Elementor/Woodmart site_width = 1400px против нашего .kp-container = 1240px.
 *  2. Хлебные крошки оверлап-ятся со sticky-nav (.kp-snav-wrap = 57px).
 */

/* ───── 1. ШИРИНА: Elementor-контейнеры на single-product → 1240px ───── */
body.kp-body.single-product .wd-content-area .e-con-boxed {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ───── 3. SCROLL-MARGIN: при якорных переходах учитываем sticky-nav ───── */
body.kp-body.single-product .wd-content-area [id] {
  scroll-margin-top: 72px; /* 57px snav + 15px воздуха */
}

/* ───── 4. MOBILE (980px) ───── */
@media (max-width: 980px) {
  body.kp-body.single-product .wd-content-area {
    padding-top: 24px;
  }
}

/* ───── 5. MOBILE (760px) ───── */
@media (max-width: 760px) {
  body.kp-body.single-product .wd-content-area {
    padding-top: 20px;
  }
  body.kp-body.single-product .wd-content-area .e-con-boxed {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ───── 6. MOBILE (480px) ───── */
@media (max-width: 480px) {
  body.kp-body.single-product .wd-content-area .e-con-boxed {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ─────────── ex-patch-4.2-cart-counter.css ─────────── */
/* ═══════════════════════════════════════════════════════════════
 * PATCH 4.2 — Cart counter: AJAX-обновление счётчика в шапке
 * ───────────────────────────────────────────────────────────────
 * .kp-snav-cart-badge — всегда-присутствующая обёртка-цель для
 * WC-фрагмента (replaceWith требует элемент в DOM). Она НЕ должна
 * быть flex-айтемом внутри .kp-snav-cart (display:inline-flex;
 * gap:8px), иначе пустая обёртка добавит фантомные 8px.
 * display:contents убирает обёртку из box-дерева — внутренний
 * .kp-badge-count по-прежнему абсолютно позиционируется
 * относительно .kp-snav-cart (position:relative).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart-badge {
  display: contents;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 05 · МОБ. ШАПКА v1; ГЛАВНАЯ И КАТАЛОГ: категории, карусели, бренды, FAQ, рассылка, футер (быв. 5.0–5.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-5.0-mobile-header.css ─────────── */
/**
 * PATCH 5.0 — Mobile Header Fix (Stage 0)
 *
 * Скоуп: body.kp-body (баг СИСТЕМНЫЙ — общий header.php грузится на всех
 *        kp-страницах через kp_is_kpromo_template).
 *
 * Решает:
 *   .kp-topbar-row = flex (по умолчанию nowrap) + длинный контент
 *   (полный адрес + часы + email + ЛК + 3 мессенджера). На мобиле
 *   скрыт только .kp-tb-item:nth-child(2) (main.css:587) — остаток
 *   переполняет ~390px, body.kp-body{overflow-x:clip} (patch-1.4)
 *   обрезает overflow → топбар «ломается» и при скролле sticky
 *   .kp-snav-wrap (z-index:50) «наезжает» поверх него.
 *
 * Причина — НЕ Woodmart sticky-clone: в DOM нет ни одного
 * <header>/.whb-header (header.php полностью перекрывает Woodmart),
 * JS-шаблон whb-sticky-header whb-clone инертен. Фикс — только CSS.
 *
 * Стратегия (вариант A — компактный, B2B-контакты сохраняем):
 *   ≤760  — прячем длинную левую группу (адрес+часы),
 *           email + ЛК + мессенджеры остаются по центру;
 *   ≤480  — дополнительно прячем текст email (мессенджеры + ЛК остаются).
 *
 * !important — точечно (font-size + ≤480 mailto): перебиваем
 * существующие !important из patch-1.9 (body.kp-body .kp-topbar
 * { font-size:15px !important } и .kp-tb-item { display:inline-flex
 * !important }). Перебить !important можно только !important —
 * это «необходимость» по правилу CLAUDE.md, не произвол.
 * Все остальные правила — без !important, через специфичность.
 */

/* ───── ≤980 — ужимаем, разрешаем перенос, мельче шрифт ───── */
@media (max-width: 980px) {
  body.kp-body .kp-topbar-row {
    flex-wrap: wrap;
    gap: 4px 16px;
    min-height: 0;
    padding: 6px 0;
  }
  /* перебивает patch-1.9 `body.kp-body .kp-topbar{font-size:15px!important}` */
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 13px !important;
  }
}

/* ───── ≤760 — компактный топбар по центру ───── */
@media (max-width: 760px) {
  /* длинный адрес + часы не нужны на мобиле (специфичность 0,0,2,1 >
     main.css .kp-topbar-left 0,0,1,0 — !important не требуется) */
  body.kp-body .kp-topbar-left {
    display: none;
  }
  body.kp-body .kp-topbar-row {
    padding: 5px 0;
  }
  body.kp-body .kp-topbar-right {
    gap: 16px;
  }
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 12px !important;
  }
}

/* ───── ≤480 — ещё компактнее: прячем текст email ───── */
@media (max-width: 480px) {
  /* .kp-tb-item имеет display:inline-flex !important из patch-1.9 —
     перебиваем !important'ом (необходимость, не произвол) */
  body.kp-body .kp-topbar-right .kp-tb-item[href^="mailto"] {
    display: none !important;
  }
  body.kp-body .kp-topbar-right {
    gap: 14px;
  }
}

/* ─────────── ex-patch-5.1-category.css ─────────── */
/* patch-5.1-category.css — Страница категории товаров
 * Дизайн из handoff v3 (category.css / category-pens.jsx)
 * Все правила отскоуплены на body.kp-body .kp-cat-*
 */

/* ───── page wrapper ───── */
body.kp-body .kp-cat-page {
    background: #fff;
    min-height: 100vh;
}

/* ───── breadcrumbs ───── */
body.kp-body .kp-cat-crumbs {
    font-size: 15px;
    color: var(--ink-2, #6b6b6b);
}
body.kp-body .kp-cat-crumbs-link {
    color: var(--ink-2, #6b6b6b);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
body.kp-body .kp-cat-crumbs-link:hover {
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-crumbs-sep {
    margin: 0 8px;
    font-weight: 600;
}
body.kp-body .kp-cat-crumbs-cur {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* ───── category header ───── */
body.kp-body .kp-cat-head-title-row {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-head-title {
    font-weight: 700;
    line-height: .98;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin: 0;
    flex: 1;
    min-width: 0;
    text-wrap: balance;
}
body.kp-body .kp-cat-head-count {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: var(--yellow, #FECE15);
    padding: 14px 22px;
    border-radius: var(--radius, 12px);
    align-self: flex-start;
    margin-top: 6px;
}
body.kp-body .kp-cat-head-count-num {
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    letter-spacing:normal;
    font-feature-settings: "tnum";
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-head-count-lbl {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink, #0a0a0a);
    letter-spacing:normal;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 4px;
}
body.kp-body .kp-cat-head-bar {
    display: inline-block;
    width: 64px;
    height: 4px;
    background: var(--yellow, #FECE15);
}
body.kp-body .kp-cat-head-lead {
    line-height: 1.55;
    color: var(--ink-2, #6b6b6b);
    margin: 0 0 20px;
    text-wrap: pretty;
}
body.kp-body .kp-cat-head-lead p {
    margin: 0 0 8px;
}
body.kp-body .kp-cat-head-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--ink-2, #6b6b6b);
    font-weight: 600;
}
body.kp-body .kp-cat-head-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing:normal;
    text-transform: uppercase;
}

/* ───── subcategory chips ───── */
body.kp-body .kp-cat-chips {
    padding: 0 0 12px;
}
body.kp-body .kp-cat-chips-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0 8px;
}
body.kp-body .kp-cat-chips-track::-webkit-scrollbar {
    display: none;
}
body.kp-body .kp-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    background: var(--fog, #f5f5f5);
    border-radius: 24px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    transition: all .15s;
    white-space: nowrap;
    scroll-snap-align: start;
    letter-spacing:normal;
    text-decoration: none;
}
body.kp-body .kp-cat-chip:hover {
    background: var(--yellow-soft, #fff8d6);
}
body.kp-body .kp-cat-chip.is-active {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-chip-count {
    font-size: 11px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 700;
    font-feature-settings: "tnum";
}
body.kp-body .kp-cat-chip.is-active .kp-cat-chip-count {
    color: var(--ink, #0a0a0a);
    opacity: .65;
}

/* ───── filter bar ───── */
body.kp-body .kp-cat-fbar {
    padding: 20px 0 0;
}
body.kp-body .kp-cat-fbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line, #e5e5e5);
    padding-top: 20px;
}
body.kp-body .kp-cat-fbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-fbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
body.kp-body .kp-cat-fpill:hover {
    border-color: var(--ink, #0a0a0a);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.kp-body .kp-cat-fpill.is-active {
    border: 2px solid var(--ink, #0a0a0a);
    padding: 0 15px;
}
body.kp-body .kp-cat-fpill-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-feature-settings: "tnum";
}
body.kp-body .kp-cat-fpill-all {
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    /* 12px «выбивался гарнитурой» на фоне пилюль 15px (Nick, 06.07) — выровнен */
    font-size: 14px;
}
body.kp-body .kp-cat-fsort-lbl {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 600;
}
body.kp-body .kp-cat-fsort-select {
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
}

/* ───── results bar ───── */
body.kp-body .kp-cat-rbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 18px;
    flex-wrap: wrap;
    gap: 14px;
}
body.kp-body .kp-cat-rbar-count {
    font-size: 14px;
    color: var(--ink-3, #a0a0a0);
}
body.kp-body .kp-cat-rbar-count b {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    font-feature-settings: "tnum";
}

/* ───── product grid ───── */
body.kp-body .kp-cat-grid {
    display: grid;
    gap: 24px;
    padding: 8px 0;
}
body.kp-body .kp-cat-grid .kp-prod {
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius, 12px);
    padding: 16px;
    transition: all .2s;
}
body.kp-body .kp-cat-grid .kp-prod:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: transparent;
}

/* ───── empty state ───── */
body.kp-body .kp-cat-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--ink-2, #6b6b6b);
    font-size: 18px;
}

/* ───── pager ───── */
body.kp-body .kp-cat-pager-wrap {
    padding: 32px 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
body.kp-body .kp-cat-pager {
    display: flex;
    gap: 6px;
    align-items: center;
}
body.kp-body .kp-cat-pager-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-2, #6b6b6b);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
body.kp-body .kp-cat-pager-btn:hover {
    background: var(--fog, #f5f5f5);
    border-color: var(--ink, #0a0a0a);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-pager-btn.is-active {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    border-color: var(--yellow, #FECE15);
}
body.kp-body .kp-cat-pager-btn:first-child svg {
    transform: rotate(180deg);
}
body.kp-body .kp-cat-pager-ell {
    width: 24px;
    display: grid;
    place-items: center;
    color: var(--ink-3, #a0a0a0);
}
body.kp-body .kp-cat-pager-meta {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-feature-settings: "tnum";
}

/* ───── SEO spoiler ───── */
body.kp-body .kp-cat-seo {
    background: var(--fog, #f5f5f5);
    padding: 48px 0;
}
body.kp-body .kp-cat-seo-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 0;
    font-family: inherit;
}
body.kp-body .kp-cat-seo-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-seo-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--ink, #0a0a0a);
    flex-shrink: 0;
}
body.kp-body .kp-cat-seo-body {
    margin-top: 28px;
    color: var(--ink-2, #6b6b6b);
    font-size: 16px;
    line-height: 1.65;
}
body.kp-body .kp-cat-seo-body h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink, #0a0a0a);
    margin: 24px 0 8px;
}
body.kp-body .kp-cat-seo-body h3:first-child {
    margin-top: 0;
}
body.kp-body .kp-cat-seo-body p {
    margin: 0 0 14px;
}
body.kp-body .kp-cat-seo-body a {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    border-bottom: 1px solid var(--yellow, #FECE15);
}
body.kp-body .kp-cat-seo-body a:hover {
    background: var(--yellow-soft, #fff8d6);
}

/* ───── lead form ───── */
body.kp-body .kp-cat-lead {
    background: var(--yellow, #FECE15);
    padding: 80px 0;
}
body.kp-body .kp-cat-lead-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
body.kp-body .kp-cat-lead-kicker {
    font-weight: 700;
    font-size: 12px;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin-bottom: 14px;
}
body.kp-body .kp-cat-lead-title {
    font-weight: 700;
    font-size: 48px;
    line-height: .98;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin: 0 0 20px;
}
body.kp-body .kp-cat-lead-sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink, #0a0a0a);
    max-width: 480px;
    margin: 0 0 24px;
    opacity: .85;
}
body.kp-body .kp-cat-lead-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.kp-body .kp-cat-lead-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-trust-item svg {
    stroke: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-form {
    background: #fff;
    border-radius: var(--radius-lg, 16px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
body.kp-body .kp-cat-lead-field input {
    height: 54px;
    padding: 0 18px;
    border: 2px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink, #0a0a0a);
    width: 100%;
    transition: border-color .15s;
    background: #fff;
    box-sizing: border-box;
}
body.kp-body .kp-cat-lead-field input:focus {
    outline: 0;
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    background: var(--ink, #0a0a0a);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 14px;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
body.kp-body .kp-cat-lead-btn:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}
body.kp-body .kp-cat-lead-tos {
    font-size: 12px;
    color: var(--ink-3, #a0a0a0);
    margin: 0;
    line-height: 1.5;
}
body.kp-body .kp-cat-lead-tos a {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    border-bottom: 1px solid var(--yellow, #FECE15);
    text-decoration: none;
}

/* ───── chips fade-arrow ───── */
body.kp-body .kp-cat-chips {
    position: relative;
}
body.kp-body .kp-cat-chips-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    color: var(--ink, #0a0a0a);
    pointer-events: none;
    z-index: 2;
}

/* ───── active tags ───── */
body.kp-body .kp-cat-atags {
    padding: 14px 0 0;
}
body.kp-body .kp-cat-atags-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-atags-lbl {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing:normal;
}
body.kp-body .kp-cat-atags-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
body.kp-body .kp-cat-atag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: var(--yellow-soft, #fff8d6);
    color: var(--ink, #0a0a0a);
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
}
body.kp-body .kp-cat-atag-x {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-2, #6b6b6b);
    transition: all .15s;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
body.kp-body .kp-cat-atag-x:hover {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-atags-clear {
    background: transparent;
    border: 0;
    color: var(--ink-2, #6b6b6b);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-underline-offset: 4px;
    cursor: pointer;
}
body.kp-body .kp-cat-atags-clear:hover {
    color: var(--ink, #0a0a0a);
}

/* ───── results bar controls ───── */
body.kp-body .kp-cat-rbar-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}
body.kp-body .kp-cat-rbar-view {
    display: flex;
    gap: 0;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}
body.kp-body .kp-cat-rbar-vbtn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ink-3, #a0a0a0);
    border: 0;
    cursor: pointer;
    transition: all .15s;
}
body.kp-body .kp-cat-rbar-vbtn.is-active {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-rbar-vbtn:not(.is-active):hover {
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-rbar-perpage {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-rbar-seg {
    display: flex;
    background: var(--fog, #f5f5f5);
    border-radius: var(--radius-sm, 8px);
    padding: 3px;
}
body.kp-body .kp-cat-rbar-seg a {
    height: 30px;
    padding: 0 14px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    font-feature-settings: "tnum";
    text-decoration: none;
}
body.kp-body .kp-cat-rbar-seg a.is-active {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-rbar-seg a:hover:not(.is-active) {
    color: var(--ink, #0a0a0a);
}

/* ───── sort pill button ───── */
body.kp-body .kp-cat-fsort {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fsort-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    position: relative;
}
body.kp-body .kp-cat-fsort-pill:hover {
    border-color: var(--ink, #0a0a0a);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.kp-body .kp-cat-fsort-drop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 20;
    padding: 6px 0;
    display: none;
}
body.kp-body .kp-cat-fsort-pill.is-open .kp-cat-fsort-drop {
    display: block;
}
body.kp-body .kp-cat-fsort-opt {
    display: block;
    width: 100%;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    text-align: left;
    text-decoration: none;
    transition: background .1s;
}
body.kp-body .kp-cat-fsort-opt:hover {
    background: var(--fog, #f5f5f5);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fsort-opt.is-active {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* ───── show more button ───── */
body.kp-body .kp-cat-showmore {
    display: flex;
    justify-content: center;
    padding: 32px 0 0;
}
body.kp-body .kp-cat-showmore-btn {
    height: 56px;
    min-width: 280px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    background: #fff;
    color: var(--ink, #0a0a0a);
    box-shadow: inset 0 0 0 2px var(--ink, #0a0a0a);
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 15px;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
body.kp-body .kp-cat-showmore-btn:hover {
    background: var(--yellow, #FECE15);
}

/* ───── hits section ───── */
body.kp-body .kp-cat-hits {
    padding: 48px 0 0;
}
body.kp-body .kp-cat-hits .kp-prods-head {
    margin-bottom: 28px;
}

/* ───── product card swatches ───── */
body.kp-body .kp-prod-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.12);
    flex-shrink: 0;
}
body.kp-body .kp-prod-swatch-more {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3, #a0a0a0);
    margin-left: 2px;
}

/* ───── responsive ───── */
@media (max-width: 1100px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    body.kp-body .kp-cat-head-title {
        font-size: 48px;
    }
    body.kp-body .kp-cat-lead-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 760px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    /* заголовок во всю ширину, плашка-счётчик отдельной строкой ниже
       (по макету 06.07; раньше flex-ряд — плашка давила/наезжала на H1) */
    body.kp-body .kp-cat-head-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    body.kp-body .kp-cat-head-title {
        flex: none;
        width: 100%;
    }
    body.kp-body .kp-cat-head-count {
        padding: 10px 16px;
        margin-top: 0;
    }
    body.kp-body .kp-cat-head-count-num {
        font-size: 32px;
    }
    body.kp-body .kp-cat-fbar-left {
        overflow-x: auto;
        width: 100%;
    }
    body.kp-body .kp-cat-fbar-left::-webkit-scrollbar {
        display: none;
    }
    body.kp-body .kp-cat-lead-title {
        font-size: 32px;
    }
    body.kp-body .kp-cat-lead-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    body.kp-body .kp-cat-rbar-controls {
        display: none;
    }
    body.kp-body .kp-cat-chips-arrow {
        display: none;
    }
    body.kp-body .kp-cat-atags-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    body.kp-body .kp-cat-atags-list::-webkit-scrollbar {
        display: none;
    }
    body.kp-body .kp-cat-showmore-btn {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    body.kp-body .kp-cat-head-title-row {
        gap: 20px;
    }
    body.kp-body .kp-cat-fbar-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─────────── ex-patch-5.2-home-categories.css ─────────── */
/* PATCH 5.2 — вернуть 5 колонок секции "Популярные категории" на главной.
   Причина: patch-5.1 переиспользовал .kp-cat-grid под архив категорий
   (там 4 кол.) и перебивает главную. Скоупим строго на .kp-sec-pop.
   Брейкпоинты: эталон styles.css (1100 / 760) + 1-кол. на 480 по
   MOBILE-GUIDELINES (на 375px иначе карточка <200px).
*/
body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:repeat(5,1fr);gap:20px;padding:0}
@media (max-width:1100px){body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px) {body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:1fr}}

/* ─────────── ex-patch-5.3-prods-carousel.css ─────────── */
/* PATCH 5.3 — Витрина: шапка влево + .kp-prod-grid → горизонтальная лента.
   Скоуп строго .kp-sec-prods, сетки других секций не задеты. */
body.kp-body .kp-sec-prods .kp-prods-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
body.kp-body .kp-sec-prods .kp-prod-grid{display:flex;grid-template-columns:none;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
body.kp-body .kp-sec-prods .kp-prod-grid::-webkit-scrollbar{display:none}
body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex:0 0 calc((100% - 80px)/5);scroll-snap-align:start}
@media (max-width:1100px){body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:calc((100% - 60px)/3.5)}}
@media (max-width:760px) {body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:calc((100% - 40px)/2.2)}}
@media (max-width:480px) {body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:82%}}

/* ─────────── ex-patch-5.4-adv-title.css ─────────── */
/* PATCH 5.4 — Advantages: заголовки карточек всегда белые.
   .kp-adv-title наследует цвет и теряет его на тёмной секции (ловушка .kp-page a:inherit).
   Форсим белый, скоуп .kp-sec-adv — выше специфичности .kp-page a и WoodMart. */
body.kp-body .kp-sec-adv .kp-adv-card,
body.kp-body .kp-sec-adv .kp-adv-title{color:#fff}

/* ─────────── ex-patch-5.5-brands-color.css ─────────── */
/* PATCH 5.5 — Brands: названия брендов серые (--ink-3), как дескриптор.
   .kp-brand-cell — ссылка, .kp-page a{color:inherit} перебивает базовый серый
   и уводит в чёрный. Возвращаем серый со скоупом, hover-инверсию сохраняем. */
body.kp-body .kp-brand-cell{color:var(--ink-3)}
body.kp-body .kp-brand-cell:hover{color:var(--ink)}

/* ─────────── ex-patch-5.6-faq.css ─────────── */
/* PATCH 5.6 — FAQ: .kp-faq-q это <button>, WoodMart навешивает capitalize,
   серый фон (рвёт жёлтый открытый айтем) и центрирование. Сбрасываем. */
body.kp-body .kp-sec-faq .kp-faq-q{background:transparent;border:0;text-transform:none}
body.kp-body .kp-sec-faq .kp-faq-qtext{text-transform:none;color:var(--ink)}
/* Заголовок вопроса НЕ сереет при наведении: WoodMart красит <button>:hover в серый,
   а qtext не имел своего цвета и наследовал его. Пиним собственный цвет — наследование отваливается. */
body.kp-body .kp-sec-faq .kp-faq-q:hover .kp-faq-qtext,
body.kp-body .kp-sec-faq .kp-faq-q:focus .kp-faq-qtext{color:var(--ink)}

/* ─────────── ex-patch-5.7-newsletter-cta.css ─────────── */
/* PATCH 5.7 — Рассылка + фикс мобильной кнопки "Заказать звонок".
   1) Newsletter: дескриптор в верхний регистр; сброс WoodMart-стилей с инпута,
      placeholder и кнопки подписки (WoodMart перебивает фон кнопки и оформление поля).
   2) .kp-mobile-cta протекает на десктоп (WoodMart button{display:...!important}).
      Жёстко прячем на десктопе, оставляем только <480px. */
body.kp-body .kp-sec-newsletter .kp-nl-kicker{text-transform:uppercase}
/* Вертикальное центрирование: поле центрирует инпут по вертикали, а кнопка тянется
   на всю высоту через align-self:stretch (ниже), чтобы остаться полноразмерной. */
body.kp-body .kp-sec-newsletter .kp-nl-field{align-items:center}
body.kp-body .kp-sec-newsletter .kp-nl-field input{padding:0 24px;font-size:16px;font-weight:600;line-height:normal;background:transparent;border:0;box-shadow:none}
/* placeholder под оригинал: 16px (равен инпуту — WoodMart иначе ужимает), вес 600 (не 400). */
body.kp-body .kp-sec-newsletter .kp-nl-field input::placeholder{color:var(--ink-3);font-weight:600;font-size:16px;opacity:1}
/* font-weight:600 !important — на ступень легче (по факту рендерилось 700 из patch-3.1);
   align-self:stretch — кнопка во всю высоту поля, т.к. поле теперь align-items:center. */
body.kp-body .kp-sec-newsletter .kp-nl-btn{padding:0 28px;background:var(--ink);color:#fff;font-weight:600 !important;font-size:15px;letter-spacing:normal;text-transform:uppercase;border:0;align-self:stretch}
body.kp-body .kp-sec-newsletter .kp-nl-btn:hover{background:#1a1a1a}
@media (max-width: 600px) {
  body.kp-body .kp-sec-newsletter .kp-nl-field {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.kp-body .kp-sec-newsletter .kp-nl-field input,
  body.kp-body .kp-sec-newsletter .kp-nl-field input[type="email"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    line-height: 56px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm, 8px) !important;
    padding: 0 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1D1D1B !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    margin: 0 !important;
  }
  body.kp-body .kp-sec-newsletter .kp-nl-field input::placeholder {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--ink-3, #8A8A8A) !important;
    line-height: normal !important;
  }
  body.kp-body .kp-sec-newsletter .kp-nl-btn {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 20px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
    margin: 0 !important;
  }
  body.kp-body .kp-sec-newsletter .kp-nl-title {
    font-size: 32px;
    line-height: 1.05;
  }
}
body.kp-body .kp-mobile-cta{display:none !important}

/* ─────────── ex-patch-5.8-footer.css ─────────── */
/* PATCH 5.8 — Футер к эталону: убрать наслоения WoodMart на списках, вернуть жёлтую почту. */
/* TODO: убрать !important — специфичности 0,0,3,1 достаточно, WoodMart не перебивает.
   Оставлено до проверки регрессий (изначально казалось, что виноват каскад, но
   реальная причина была — кэш браузера, см. ловушку №8 в CLAUDE.md). */
body.kp-body .kp-footer-col ul{margin:0;padding:0;list-style:none;gap:10px}
body.kp-body .kp-footer-col li{margin:0}
body.kp-body .kp-footer-col li a{font-size:14px;font-weight:400;color:rgba(255,255,255,.6)}
body.kp-body .kp-footer-col li a:hover{color:var(--yellow)}
body.kp-body .kp-footer .kp-footer-phone{font-size:18px !important;font-weight:600 !important;color:#fff !important;letter-spacing:normal}
body.kp-body .kp-footer .kp-footer-mail{font-size:14px !important;font-weight:600 !important;color:var(--yellow) !important}

/* ─────────── ex-patch-5.9-faq-layout.css ─────────── */
/* PATCH 5.9 — FAQ: раскладка строки и кегли точно по эталону styles.css.
   База занижена (num 12→15, qtext 16/700→18/600, answer/blurb 15→16). Приводим к эталону. */
/* TODO: убрать !important — специфичности 0,0,3,1 достаточно, WoodMart не перебивает.
   Оставлено до проверки регрессий (изначально казалось, что виноват каскад, но
   реальная причина была — кэш браузера, см. ловушку №8 в CLAUDE.md). */
body.kp-body .kp-sec-faq .kp-faq-q{display:grid !important;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;width:100%;padding:20px 24px;text-align:left}
body.kp-body .kp-sec-faq .kp-faq-num{font-size:15px !important;font-weight:700}
body.kp-body .kp-sec-faq .kp-faq-qtext{font-size:18px !important;font-weight:600}
body.kp-body .kp-sec-faq .kp-faq-a{font-size:16px !important}
body.kp-body .kp-sec-faq .kp-faq-blurb{font-size:16px !important}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 06 · КАТАЛОГ: свотчи, бейджи, карточки товара, шаблон категории, чипы (быв. 6.0–6.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-6.0-swatches.css ─────────── */
/* patch-6.0-swatches.css
   Свотчи = мини-фото товаров-соседей по группе (_gifts_group_id).
   Источник перенесён с pa_czvet (никогда не заполнялся) на kp_get_product_colors()
   через postmeta (RESUME 2026-05-29). Покрывает оба рендера:
     .kp-swatch          — карусель главной (template-parts/home/products-carousel.php)
     .kp-prod-swatch     — универсальная карточка (template-parts/product-card.php)
   Скоуп: body.kp-body.
*/

/* контейнер */
body.kp-body .kp-prod-swatches{
  display:flex;
  gap:6px;
  align-items:center;
  height:auto;
  margin-top:6px;
  flex-wrap:nowrap;
}

/* свотч-ссылка (общие правила для обеих обёрток) */
body.kp-body .kp-prod-swatches .kp-swatch,
body.kp-body .kp-prod-swatches .kp-prod-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12);
  background:#fff;
  padding:0;
  overflow:hidden;
  flex-shrink:0;
  display:block;
  line-height:0;
  transition:transform .15s, border-color .15s, opacity .15s;
  opacity:.85;
}

body.kp-body .kp-prod-swatches .kp-swatch img,
body.kp-body .kp-prod-swatches .kp-prod-swatch img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

body.kp-body .kp-prod-swatches .kp-swatch:hover,
body.kp-body .kp-prod-swatches .kp-prod-swatch:hover{
  transform:scale(1.15);
  opacity:1;
  border-color:rgba(0,0,0,.25);
}

body.kp-body .kp-prod-swatches .kp-swatch.is-active,
body.kp-body .kp-prod-swatches .kp-prod-swatch.is-active{
  border:2px solid var(--yellow,#ffca28);
  opacity:1;
}

/* счётчик "+K" */
body.kp-body .kp-prod-swatches .kp-swatch-more,
body.kp-body .kp-prod-swatches .kp-prod-swatch-more{
  font-size:11px;
  font-weight:700;
  color:var(--ink-3,#a0a0a0);
  margin-left:2px;
  font-feature-settings:"tnum";
}

/* ─────────── ex-patch-6.1-badges.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.1-badges.css
 *
 * Поддержка НЕСКОЛЬКИХ бейджей на одной карточке: НОВИНКА / ХИТ / ЭКО / РОССИЯ.
 * Источник данных — _gifts_special_ids (CSV спецфильтров type=8), мапинг
 * см. inc/helpers.php::kp_get_product_badges().
 *
 * ВАЖНО — финальная спека Nick'а отличается от main.css:357-361 (там старые
 * цвета: NEW/HIT оба жёлтые, RUS чёрный). Поэтому здесь ПЕРЕБИВАЕМ цвета
 * через скоуп body.kp-body (специфичность 0,0,2,1 vs 0,0,1,0 у main.css —
 * мы выигрываем без !important). И патч грузится после main.css, что даёт
 * дополнительную страховку при равной специфичности.
 *
 * Раскладка: горизонтальный ряд вдоль верха, слева направо, flex-wrap для
 * переноса. max-width оставляет 56px справа под кнопку .kp-prod-fav.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Контейнер группы бейджей: абсолют в левом-верхнем углу .kp-prod-imgwrap */
body.kp-body .kp-prod-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 56px);
  z-index: 2;
}

/* Сам бейдж — теряет position:absolute (он на родителе), inline-flex нужен
 * для флажка слева от текста (РОССИЯ) и для вертикального выравнивания. */
body.kp-body .kp-prod-badges .kp-prod-badge {
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Цвета по финальной спеке (перебивают main.css:357-361) ───────────────── */
body.kp-body .kp-prod-badge-new { background: var(--ink);    color: var(--yellow); }   /* НОВИНКА — инверсия */
body.kp-body .kp-prod-badge-hit { background: var(--yellow); color: var(--ink);    }
body.kp-body .kp-prod-badge-eco { background: var(--eco);    color: #fff;          }
body.kp-body .kp-prod-badge-rus {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e0e0;
}

/* Флажок России внутри бейджа РОССИЯ — круглый 16×16 с рамкой.
 * border-radius:50% + overflow:hidden обрезает триколор в круг без clipPath. */
body.kp-body .kp-prod-badge-rus svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* ─────────── ex-patch-6.2-cards.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.2-cards.css
 *
 * Полировка карточек товара по эталону:
 *   1. Рамка hover не режется — padding-top на сетке.
 *   2. Заголовок карточки без uppercase, размер 16px.
 *   3. Изображение 1:1 (контейнер задаёт пропорции, object-fit:contain).
 *   4. Цены: блок "от 50 шт · с НДС" удалён из шаблонов (см. коммит) —
 *      здесь страховка-display:none на случай если где-то ещё рендерится.
 *   5. Кнопка "В корзину" — возврат font-weight 800 (patch-3.1:140 ослабил
 *      до 700 — это противоречит эталону main.css:387).
 *
 * Свотчи-кружки В СЕТКЕ — отдельный заход, нужен словарь "цвет→hex"
 * (см. BACKLOG.md и разведку: pa_czvet таксономия + ручной маппинг).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Сетка карточек: padding-top, чтобы hover translateY(-4px) не резался ─
 *
 * Причина: .kp-cat-grid имеет padding:0 (patch-5.2:7), карточкам некуда
 * "всплыть". Даём 8px воздуха сверху (translateY(-4) + 4px запаса). Применяем
 * к обеим сеткам — .kp-cat-grid (страница категории и .kp-sec-pop) и
 * .kp-prod-grid (main.css:352, используется в каталоге).
 */
body.kp-body .kp-cat-grid,
body.kp-body .kp-prod-grid {
  padding-top: 8px;
}

/* ── 2) Заголовок без капса, 16px ────────────────────────────────────────────
 *
 * patch-3.3:46-49 уже даёт font-size:16px/font-weight:600. Но uppercase
 * прилетает откуда-то из woodmart/woocommerce — здесь снимаем явно.
 */
body.kp-body .kp-prod-name,
body.kp-body .kp-prod-name a {
  text-transform: none;
  letter-spacing:normal;
}

/* ── 3) Картинка 1:1 — контейнер задаёт квадрат, img внутри вписывается ─────
 *
 * main.css:366 ставит aspect-ratio:1/1 на .kp-prod-img, но такого класса
 * в шаблонах НЕТ (есть .kp-prod-imgwrap и .kp-prod-img-link). Поэтому
 * правило бесполезно. Переносим квадрат на сам контейнер.
 * object-fit:contain — товар не обрезается (товары на белом фоне поставщика,
 * cover дал бы обрезку у вытянутых бутылок/пледов).
 */
body.kp-body .kp-prod-imgwrap {
  aspect-ratio: 1 / 1;
}
body.kp-body .kp-prod-imgwrap .kp-prod-img-link,
body.kp-body .kp-prod-imgwrap .kp-prod-img-link img,
body.kp-body .kp-prod-imgwrap > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── 4) Страховка от "от 50 шт · с НДС" если где-то ещё рендерится ──────────
 *
 * В шаблонах строки удалены этим же коммитом, но мок-ветка карусели
 * (захардкоженные товары для развёртки) её ещё содержит — на боевой
 * рендерится только WC-ветка, мок не виден. На случай если придёт ещё
 * откуда-то — прячем по классу.
 */
body.kp-body .kp-prod-price-from {
  display: none;
}

/* ── 5а) Выравнивание карточек: высота ряда свотчей зарезервирована ─────────
 *
 * Шаблоны теперь ВСЕГДА рендерят <div class="kp-prod-swatches"> (даже пустой).
 * main.css:372 уже даёт .kp-prod-swatches{height:20px}, здесь страховка через
 * min-height — на случай если где-то height перебит. Без этой гарантии у
 * товара без свотчей блок коллапсировался бы в 0 и тянул заголовок/цену вверх,
 * ряд карточек терял бы общий baseline.
 */
body.kp-body .kp-prod-swatches {
  min-height: 20px;
}

/* ── 5) Кнопка "В корзину": полная защита от Woodmart/WC ─────────────────────
 *
 * На странице каталога WC дорисовывает к нашей кнопке классы
 * .ajax_add_to_cart .add_to_cart_button (см. product-card.php:97). Через них
 * Woodmart/WC перебивает border-radius, padding, font-size, letter-spacing,
 * text-transform — main.css:387 их даёт без !important и проигрывает.
 *
 * Защищаем эти 5 свойств + font-weight (patch-3.1:140 GROUP 10 ослабил
 * до 700; main.css:387 эталонно 800). Цвета/обводка/hover уже защищены
 * patch-3.3:69-80 GROUP C.
 *
 * Селекторы:
 *   .kp-prod-add                       — спецификация 0,0,2,1 (с body.kp-body)
 *   .kp-prod-add.add_to_cart_button    — 0,0,3,1, перебивает WC-варианты
 *   a.kp-prod-add                      — 0,0,2,2, для <a> в product-card.php
 */
body.kp-body .kp-prod-add,
body.kp-body .kp-prod-add.add_to_cart_button,
body.kp-body a.kp-prod-add {
  border-radius:  var(--radius-sm) !important;
  padding:        10px 14px        !important;
  font-size:      11px             !important;
  font-weight:    700              !important;
  letter-spacing:normal!important;
  text-transform: uppercase        !important;
}

/* ── 6) Убрать ссылку "Просмотр корзины" после AJAX-добавления ───────────────
 *
 * WC после wc_ajax_add_to_cart вставляет в DOM <a class="added_to_cart wc-forward">
 * сразу после нажатой кнопки. У нас корзина уже есть в шапке + работает тост-
 * подтверждение, эта ссылка только ломает высоту карточки и ряд.
 * Источник — ядро WooCommerce (см. разведку 30.05), не наш код.
 * Корзину/счётчик/тост не задеваем — скрываем ТОЛЬКО эту ссылку.
 */
body.kp-body .added_to_cart.wc-forward {
  display: none !important;
}

/* ─────────── ex-patch-6.3-swatches.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.3-swatches.css
 *
 * Свотчи-кружки в СЕТКЕ каталога: один цветной кружок на каждый цвет-сосед
 * по _gifts_group_id. Источник цвета — pa_czvet (атрибут WC) через
 * kp_color_to_hex() (см. inc/color-map.php).
 *
 * На странице ТОВАРА (single-product галерея) — НЕ применяется: там
 * используются миниатюры (thumb_url из kp_get_product_colors), которые
 * Woodmart-core рендерит своими шаблонами.
 *
 * Высота ряда .kp-prod-swatches (выравнивание карточек) — уже задана в
 * main.css:372 height:20px + страховка min-height в patch-6.2.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Цветной кружок 16×16 — внутри ссылки .kp-prod-swatch / .kp-swatch.
 * border:1px rgba(0,0,0,.12) — лёгкая обводка, чтобы белые/молочные/прозрачные
 * не сливались с белым фоном карточки. flex-shrink:0 — не сжимается, когда
 * соседних кружков несколько и ряд тесный. */
body.kp-body .kp-prod-swatch-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─────────── ex-patch-6.4-swatches-color.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.4-swatches-color.css
 *
 * Цветные свотчи (путь B): кружок из filter type=21 поставщика, gradient для
 * двухцветных, спецрендер для "прозрачный" и "полноцвет".
 *
 * Источник: _gifts_colors (CSV до 2 filterid) → kp_color_id_to_hex().
 * Рендер: kp_render_swatch_dot() в inc/helpers.php — 4 ветки:
 *   обычный hex / gradient / special (transparent|rainbow) / fallback-thumb.
 *
 * patch-6.3 ставил базовый .kp-prod-swatch-dot с border .12 — оставляем.
 * Здесь добавляем спецрендеры и стили для fallback-миникартинки.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Прозрачный (filterid 22) — клетка-фотошоп ──────────────────────────────
 * Шахматный паттерн 4×4 через линейный gradient (репитингом). Используем
 * conic-free вариант для совместимости со старыми движками.
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* ── Полноцвет (filterid 17152) — радужный conic ───────────────────────────
 * Conic-gradient поддерживается во всех современных браузерах (Chrome 69+,
 * Safari 12.1+, Firefox 83+).
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-rainbow {
  background: conic-gradient(
    #D32F2F, #F57C00, #FBC02D, #43A047,
    #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
  );
}

/* ── Fallback-миникартинка (товар без _gifts_colors, ~11%) ─────────────────
 * <img class="kp-prod-swatch-thumb"> внутри ссылки .kp-prod-swatch/.kp-swatch.
 * Размер и форма — те же 16×16 кружком, чтобы выровнять с цветными свотчами.
 * Рамка через box-shadow inset (не border) для единообразия с .kp-prod-swatch-dot.
 */
body.kp-body .kp-prod-swatch-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  flex-shrink: 0;
  object-fit: cover;
  vertical-align: middle;
}

/* ── Рамка кружка через box-shadow inset, НЕ border ─────────────────────────
 *
 * Перебиваем patch-6.3:25 (`border: 1px solid rgba(0,0,0,.12)`). Проблема
 * border-а на градиентном фоне: на диагонали 135° стык двух половин и
 * пиксели border'а дают визуальную "грязь" + тёмный угол на стыке.
 *
 * box-shadow inset рисуется ВНУТРИ кружка, поверх любого background
 * (хоть одноцветного, хоть gradient, хоть conic), одинаково по всему периметру
 * — никаких артефактов на стыке градиента. Также чуть увеличиваем непрозрачность
 * (.18 vs .12) — белый/прозрачный/неокрашенный не сливаются с фоном карточки.
 */
body.kp-body .kp-prod-swatch-dot {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* ── Активный (текущий товар группы) ───────────────────────────────────────
 *
 * Перебиваем patch-6.3:32-36, где было border-color:ink + box-shadow:1px ink —
 * двойная обводка давала "зацеп" в углу. Здесь — два слоя в одном shadow:
 *   inset — базовая рамка (как у обычных свотчей);
 *   outer — жёлтое кольцо-маркер "вы здесь", не накладывается на круг.
 *
 * border оставляем none (перебивает patch-6.3:34 `border-color:ink` —
 * на нашем border:none он ни на что не влияет, но явное none для ясности).
 */
body.kp-body .kp-prod-swatch.is-active .kp-prod-swatch-dot,
body.kp-body .kp-swatch.is-active .kp-prod-swatch-dot {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    0 0 0 2px var(--yellow);
}

/* ─────────── ex-patch-6.5-carousel-nav.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.5-carousel-nav.css
 *
 * Защита стрелок навигации каруселей (.kp-rndbtn) от WoodMart-перебивок
 * на button/button:hover. По образцу patch-6.2 для .kp-prod-add: правила в
 * main.css:347-349 уже соответствуют эталону Nick (44×44, border-radius:50%,
 * bg:#fff, border 1px var(--line), display:grid place-items:center, transition,
 * color:var(--ink), hover yellow), но WoodMart-каскад на button может их
 * перебивать без !important.
 *
 * Используется в 4 местах:
 *   - template-parts/home/products-carousel.php:226-227 (Новинки на главной)
 *   - woocommerce/archive-product.php:407-408 (Хиты категории внизу архива)
 * Все 4 кнопки одного типа — селектор .kp-rndbtn узкий, без коллизий.
 *
 * Селектор body.kp-body .kp-rndbtn = специфичность 0,0,2,1, выигрывает у
 * WoodMart-стилей на button (0,0,0,1) даже без !important. !important —
 * страховка от любых :is(button,…)-блоков с высокой специфичностью.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-rndbtn {
  width:           44px              !important;
  height:          44px              !important;
  border-radius:   50%               !important;
  background:      #fff              !important;
  border:          1px solid var(--line) !important;
  color:           var(--ink)        !important;   /* SVG-стрелка через currentColor */
  display:         grid              !important;
  place-items:     center            !important;
  transition:      all .15s          !important;
  padding:         0                 !important;   /* WoodMart может задавать кнопке padding */
  cursor:          pointer           !important;
}

body.kp-body .kp-rndbtn:hover {
  background:      var(--yellow)     !important;
  border-color:    var(--yellow)     !important;
  color:           var(--ink)        !important;   /* стрелка остаётся чёрной на жёлтом */
}

/* ─────────── ex-patch-6.6-cat-template.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.6-cat-template.css
 *
 * Полировка шаблона категории под референс:
 *   A) Сетка товаров — 5 колонок (как на главной), вместо 4 из patch-5.1.
 *   B) Разделитель хлебных крошек — жёлтый (•) вместо серого (·).
 *
 * Дескриптор родительской категории (.kp-cat-head-pre) — удалён из шаблона
 * archive-product.php в этом же коммите. CSS-правила .kp-cat-head-pre в
 * patch-5.1:41-48 становятся мёртвыми (не вредят, по политике "не редактируем
 * старое" оставляем).
 *
 * Безопасность: .kp-cat-grid используется И на странице категории, И в секции
 * "Популярные категории" главной (через .kp-sec-pop .kp-cat-grid из patch-5.2).
 * Наше правило body.kp-body .kp-cat-grid имеет специфичность 0,0,2,1 — ниже
 * чем у patch-5.2 (.kp-sec-pop .kp-cat-grid = 0,0,3,1), поэтому ГЛАВНАЯ
 * не пострадает: там патч-5.2 всё ещё перебивает.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── A) Сетка категории 5 колонок ──────────────────────────────────────────
 * patch-5.1:290 ставил repeat(4, 1fr). Перебиваем на 5 — приводим категорию
 * к консистентности с главной (.kp-prod-grid из main.css:352).
 * Брейкпоинты patch-5.1 (1100→3, 760→2, 480→1) оставляем — они совпадают с
 * каскадом главной (main.css:573 / :598).
 */
/* 05.11.2026 фикс «фильтры поехали»: правило было без медиа-запроса и стояло
 * ПОСЛЕ брейкпоинтов patch-5.1 → на мобиле тоже 4 колонки (сетка шире экрана).
 * Теперь 4 колонки только на десктопе (>1100). minmax(0,1fr) вместо 1fr во всех
 * брейкпоинтах: иначе колонку распирает внутренняя ширина карточки — с 03.11
 * content-visibility + contain-intrinsic-size:auto 460px (functions.php, kp-cv)
 * дают карточкам 5+ ширину 460px → колонки по 494px, сетка вылезала за контейнер. */
@media (min-width: 1101px) {
  body.kp-body .kp-cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── B) Жёлтый разделитель в хлебных крошках ───────────────────────────────
 * patch-5.1:27-31 ставит .kp-cat-crumbs-sep color: var(--ink-3) (серый ·).
 * По референсу разделитель цветовой акцент — жёлтый кружок •.
 * Меняем символ через ::before/font-size, цвет — на yellow.
 */
body.kp-body .kp-cat-crumbs-sep {
  color: var(--yellow);
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}

/* ─────────── ex-patch-6.7-cat-head.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.7-cat-head.css
 *
 * Шапка категории — этап A из CATEGORIES.md, часть 1 (вёрстка).
 *
 *   A1) Иконки мета-строки (".kp-cat-head-meta-item svg") — жёлтые.
 *   A2) Поджимаем отступы крошек/шапки, переставляем жёлтую полосу
 *       и meta-строку под эталон-скрины Nick.
 *
 * patch-5.1 (база) трогать не редактируем — перебиваем только новыми
 * правилами с тем же или большим скоупом.
 *
 * Без `!important`: специфичность 0,0,3,1 совпадает с patch-5.1, побеждаем
 * порядком загрузки (этот патч идёт позже в каскаде). См. CLAUDE.md
 * ловушка №8 — анти-паттерн ставить `!important` "на всякий случай".
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── A1) Иконки мета-строки жёлтые ─────────────────────────────────────────
 * patch-5.1:127-130 ставит `stroke: var(--ink)` (чёрный) и оставляет
 * `color: var(--yellow)` без эффекта (kp_ui_icon рендерит фикс. атрибут
 * stroke="currentColor", но CSS-свойство `stroke` его перебивает).
 * Меняем `stroke` на жёлтый напрямую. Текст пункта остаётся серым
 * (.kp-cat-head-meta наследует color: var(--ink-2)).
 */
body.kp-body .kp-cat-head-meta-item svg {
    stroke: var(--yellow, #FECE15);
}

/* ── A2) Отступы крошек / шапки / полосы под эталон ────────────────────────
 * patch-5.1 (исх.):
 *   .kp-cat-crumbs   padding: 18px 0 0;
 *   .kp-cat-head     padding: 8px 0 28px;
 *   .kp-cat-head-bar margin: 24px 0 20px;  (width 64, height 4)
 *   .kp-cat-head-meta gap: 24px;
 *
 * Подгонка под скрин Nick: крошки чуть выше и с небольшим воздухом
 * до заголовка; жёлтая полоса ближе к H1; meta-пункты шире разнесены.
 * Точные пиксели — пропорционально скрину; Nick сверит на стейдже.
 */
body.kp-body .kp-cat-crumbs {
    padding: 14px 0 6px;
}
body.kp-body .kp-cat-head {
    padding: 4px 0 24px;
}
body.kp-body .kp-cat-head-bar {
    margin: 18px 0 18px;
}
body.kp-body .kp-cat-head-meta {
    gap: 32px;
}

/* ─────────── ex-patch-6.8-cat-chips-wrap.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.8-cat-chips-wrap.css
 *
 * Ряд пилюль подкатегорий — wrap вместо горизонтального скролла, с collapse
 * до 2 рядов и кнопкой «Показать все (N) / Свернуть» когда контента больше.
 *
 * Перебиваем patch-5.1:
 *   - :136-143 — flex+overflow-x:auto+scroll-snap (трек скроллился).
 *   - :550-553 — mask-image+padding-right:60px (fade-arrow стиль).
 *   - .kp-cat-chips-arrow (:555-570, :887) — стрелка больше не используется,
 *     её разметку убрали в archive-product.php. Старые правила становятся
 *     мёртвыми (по политике «не редактируем patch-5.1» оставляем как есть).
 *
 * Высота пилюли — 42px (patch-5.1:151).
 * 2 ряда = padding-top 4 + chip 42 + row-gap 10 + chip 42 + padding-bottom 8 = 106px.
 *
 * Mobile ≤760: max-height:none — пилюли переносятся естественно, всё видно,
 * тогглер скрывается JS-ом (clientHeight == scrollHeight).
 *
 * Без `!important`: специфичность совпадает с patch-5.1, побеждаем порядком
 * загрузки (этот патч позже). См. CLAUDE.md ловушка №8.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Трек: wrap, 2 ряда по умолчанию ──────────────────────────────────── */
body.kp-body .kp-cat-chips-track {
    flex-wrap: wrap;
    overflow: visible;                /* снимаем overflow-x:auto из patch-5.1:139 */
    overflow-y: hidden;               /* нужно для клипа третьего ряда */
    mask-image: none;                 /* снимаем fade из patch-5.1:551 */
    -webkit-mask-image: none;
    padding-right: 0;                 /* снимаем резерв под стрелку из patch-5.1:553 */
    padding-left: 0;
    row-gap: 10px;                    /* отступ между рядами (gap из 5.1 = 10 на оба) */
    max-height: 106px;                /* ровно 2 ряда: 4 + 42 + 10 + 42 + 8 */
    transition: max-height .3s ease;
    scroll-snap-type: none;           /* снимаем scroll-snap из patch-5.1:142 */
}

/* ── Раскрыто — JS вешает .is-expanded на .kp-cat-chips ────────────────── */
body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track {
    max-height: 2000px;               /* достаточно для любого реалистичного числа */
}

/* ── Кнопка-тогглер: текст-ссылка с жёлтым underline ───────────────────── */
body.kp-body .kp-cat-chips-toggle {
    display: none;                    /* база — скрыта; JS показывает при is-clipped */
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .15s;
}
body.kp-body .kp-cat-chips-toggle:hover {
    color: var(--ink, #0a0a0a);
}

/* Видим, только если контент реально клипается (JS ставит .is-clipped) */
body.kp-body .kp-cat-chips.is-clipped .kp-cat-chips-toggle {
    display: inline-block;
}

/* ── Mobile ≤760: тот же collapse-механизм, но на 4 ряда ─────────────────
 * Каскад-аудит подтвердил: .kp-cat-chip height/padding/font НЕ переопределяются
 * в патчах под @760/@480 — пилюля на мобильном остаётся 42px высотой.
 * 4 ряда: 4 + 4×42 + 3×10 + 8 = 210px.
 *
 * is-expanded в раскрытом состоянии работает без отдельной mobile-правки:
 * `body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track` имеет
 * специфичность 0,0,3,1 — выше чем у mobile-правила ниже (0,0,2,1), поэтому
 * max-height:2000px из базы побеждает специфичностью независимо от media.
 */
@media (max-width: 760px) {
    body.kp-body .kp-cat-chips-track {
        max-height: 210px;            /* 4 ряда — см. расчёт выше */
    }
}

/* ─────────── ex-patch-6.9-cat-filters.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.9-cat-filters.css
 *
 * Фильтр-пилюли категории — дропдауны (паттерн на все будущие фильтры).
 * Первая рабочая пилюля — «Цена» (min_price/max_price через URL → WC бэк).
 *
 * Архитектура:
 *   <div class="kp-cat-fpill" role="button" tabindex="0"
 *        data-kp-fpill-toggle aria-expanded="false">
 *     <span>Цена</span> [<span class="kp-cat-fpill-count">N</span>] <chevron>
 *     <div class="kp-cat-fpill-drop" data-kp-fpill-drop>
 *       … input[data-kp-fpill-input="min_price"] …
 *       … button[data-kp-fpill-apply] …
 *     </div>
 *   </div>
 *
 * is-active и .kp-cat-fpill-count бейдж — уже стилизованы в patch-5.1:226-242,
 * переиспользуем без переопределения.
 *
 * Сортировка (.kp-cat-fsort-pill) — отдельный механизм, не трогаем.
 *
 * patch-5.1 не редактируем. Скоуп строго .kp-cat-fpill* / [data-kp-fpill-*].
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Пилюля как div: position-relative + cursor ─────────────────────────── */
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle] {
    position: relative;
    cursor: pointer;
    user-select: none;
}
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle]:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* ── Сам дропдаун ───────────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 20;
    padding: 16px;
    display: none;
    cursor: default;             /* перебиваем cursor:pointer родителя */
    white-space: normal;         /* родитель имеет white-space:nowrap (patch-5.1:218) */
}
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop {
    display: block;
}

/* ── Ряд инпутов от/до ─────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
body.kp-body .kp-cat-fpill-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.kp-body .kp-cat-fpill-field-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink-3, #a0a0a0);
}

/* ── Сброс WoodMart-overrides на input[type=number] ─────────────────────── */
body.kp-body .kp-cat-fpill-field input[type=number] {
    height: 40px;
    padding: 0 12px;
    margin: 0;                   /* WoodMart любит ставить margin */
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;              /* WoodMart может ставить высокий line-height */
    color: var(--ink, #0a0a0a);
    width: 100%;
    box-sizing: border-box;
    -moz-appearance: textfield;  /* убрать спинеры в Firefox */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-outer-spin-button,
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;    /* убрать спинеры в WebKit */
    margin: 0;
}
body.kp-body .kp-cat-fpill-field input[type=number]:focus {
    outline: 0;
    border-color: var(--ink, #0a0a0a);
}

/* ── Подвал: reset слева (опц.), apply справа ──────────────────────────── */
body.kp-body .kp-cat-fpill-drop-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fpill-reset {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
body.kp-body .kp-cat-fpill-reset:hover {
    color: var(--ink, #0a0a0a);
}

/* Тёмная CTA «Применить». margin-left:auto всегда — apply справа независимо
 * от наличия reset (когда фильтр не активен, reset не рендерится). */
body.kp-body .kp-cat-fpill-apply {
    margin-left: auto;
    height: 40px;
    padding: 0 22px;
    background: var(--ink, #0a0a0a);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-apply:hover {
    background: #1a1a1a;
}

/* ── Mobile ≤760: drop на всю ширину контейнера ─────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Дроп фильтра «Цвет» — multi-select свотчей.
 * data-kp-fpill-multi на кнопках-свотчах; toggle .is-selected по клику.
 * Спецсвотчи (filterid 22/17152) — классы .kp-swatch-transparent /
 * .kp-swatch-rainbow; стилевые паттерны зеркалят patch-6.4 (шахматка/радуга),
 * но привязаны к нашему .kp-cat-fpill-color-swatch, чтобы изменения свотчей
 * карточек не задели фильтр и наоборот.
 * ════════════════════════════════════════════════════════════════════════ */

/* Дроп шире — нужна сетка из 4 свотчей.  Sticky footer + скролл при много цветов.
 * display НЕ задаём здесь: иначе display:flex со специфичностью 0,0,2,1 перебивал бы
 * базовый display:none (стр. 48) у закрытого дропа — дроп был виден всегда. flex-колонка
 * включается ниже только при .is-open. */
body.kp-body .kp-cat-fpill-drop--colors {
    min-width: 360px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние Цвета: flex-колонка (sticky footer + скролл грида).
 * Специфичность 0,0,3,1 == общему .is-open .kp-cat-fpill-drop {display:block} (стр. 52),
 * порядок ниже в файле — flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--colors {
    display: flex;
    flex-direction: column;
}

body.kp-body .kp-cat-fpill-colors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Кнопка-свотч: круг + имя под ним. */
body.kp-body .kp-cat-fpill-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-color:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-color.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Сам кружок. Размер крупнее, чем в карточках (32 vs 16) — нужна узнаваемость. */
body.kp-body .kp-cat-fpill-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12);
    box-sizing: border-box;
    transition: box-shadow .15s;
    flex-shrink: 0;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-swatch {
    box-shadow: inset 0 0 0 2.5px var(--ink, #0a0a0a);
}

/* Спецсвотчи в фильтре — зеркальный код шахматки и радуги из patch-6.4:19-39,
 * но узко привязанные к нашему классу, чтобы не сцепляться с карточками. */
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-transparent {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-rainbow {
    background: conic-gradient(
        #D32F2F, #F57C00, #FBC02D, #43A047,
        #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
    );
}

/* Имя цвета. */
body.kp-body .kp-cat-fpill-color-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-2, #6b6b6b);
    text-align: center;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Sticky footer внутри дропа Цвета (кнопки всегда видны над скроллом грида). */
body.kp-body .kp-cat-fpill-drop--colors .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: 3 свотча в ряд, дроп на всю ширину контейнера. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--colors {
        min-width: 0;
        max-height: 360px;
    }
    body.kp-body .kp-cat-fpill-colors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 07 · ФИЛЬТРЫ КАТАЛОГА, ПОДБОРКИ, WISHLIST, ПОДТВЕРЖДЕНИЕ (быв. 7.0–7.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-7.0-cat-stock.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.0-cat-stock.css
 *
 * Фильтр «Наличие» в шапке категории — два чекбокса (В наличии / Под заказ),
 * multi-select по паттерну Цвета (data-kp-fpill-multi).
 *
 * URL: ?filter_stock=instock,ondemand (CSV). Backend в catalog-filter.php:
 * условие добавляется только при ровно 1 выбранном (0/2 = всё доступное).
 *
 * Архитектура дропа:
 *   <div class="kp-cat-fpill-drop kp-cat-fpill-drop--stock" data-kp-fpill-drop>
 *     <div class="kp-cat-fpill-stock-list">
 *       <button class="kp-cat-fpill-stock [is-selected]"
 *               data-kp-fpill-input="filter_stock"
 *               data-kp-fpill-value="instock|ondemand"
 *               data-kp-fpill-multi>
 *         <span class="kp-cat-fpill-stock-check"></span>
 *         <span class="kp-cat-fpill-stock-name">В наличии</span>
 *         <span class="kp-cat-fpill-stock-count">12152</span>
 *       </button>
 *       … вторая строка …
 *     </div>
 *     <div class="kp-cat-fpill-drop-foot"> Сбросить · Применить </div>
 *   </div>
 *
 * ВАЖНО (баг Цвета не повторяем):
 *   На модификаторе .kp-cat-fpill-drop--stock НЕ задаём display:flex/grid —
 *   только min-width / padding. Видимость гейтит базовое правило
 *   patch-6.9:48 (display:none) и .is-open .kp-cat-fpill-drop {display:block}.
 *   Внутри списка/футера flex задаётся НЕ на самом дропе, а на .stock-list /
 *   .drop-foot — они не отвечают за видимость родителя.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-stock* / .kp-cat-fpill-drop--stock.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Ширина дропа — компактнее Цвета (нужны только 2 строки). display не трогаем. */
body.kp-body .kp-cat-fpill-drop--stock {
    min-width: 260px;
}

/* Список чекбоксов: вертикально, с отступами. flex-on-list ОК — не влияет
 * на видимость самого drop'а. */
body.kp-body .kp-cat-fpill-stock-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* Строка-кнопка чекбокса. Подложка как .kp-cat-fpill-color: нейтрально/желтоватая
 * при выбранном. clickable вся строка целиком. */
body.kp-body .kp-cat-fpill-stock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-stock:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-stock.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс слева. Имитирует нативный checkbox без <input>: квадрат +
 * галочка через ::after при .is-selected. Тёмная заливка при выборе. */
body.kp-body .kp-cat-fpill-stock-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя варианта — тянется на свободное место (счётчик прижат справа). */
body.kp-body .kp-cat-fpill-stock-name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа — приглушённый, чуть мельче. */
body.kp-body .kp-cat-fpill-stock-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-count {
    color: var(--ink-2, #6b6b6b);
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительных правил не нужно — list-колонка адаптируется сама. */

/* ─────────── ex-patch-7.1-cat-material.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.1-cat-material.css
 *
 * Фильтр «Материал» в шапке категории — multi-select чекбоксов из pa_material.
 * URL: ?filter_pa_material=slug,slug — WC layered_nav обрабатывает сам
 * (OR-семантика закреплена фильтром woocommerce_layered_nav_default_query_type
 * в catalog-filter.php). Counts — kp_cat_available_materials.
 *
 * Архитектура зеркалит Наличие (patch-7.0) + скролл/sticky-footer Цвета (patch-6.9):
 *   <div class="kp-cat-fpill-drop kp-cat-fpill-drop--material" data-kp-fpill-drop>
 *     <div class="kp-cat-fpill-mat-list">  // скроллируемый список
 *       <button class="kp-cat-fpill-mat [is-selected]"
 *               data-kp-fpill-input="filter_pa_material"
 *               data-kp-fpill-value="khlopok"
 *               data-kp-fpill-multi>
 *         <span class="kp-cat-fpill-mat-check"></span>
 *         <span class="kp-cat-fpill-mat-name">Хлопок</span>
 *         <span class="kp-cat-fpill-mat-count">2163</span>
 *       </button>
 *       … 17 строк ещё (Одежда даёт 18 материалов) …
 *     </div>
 *     <div class="kp-cat-fpill-drop-foot"> Сбросить · Применить </div>
 *   </div>
 *
 * ВАЖНО (баг Цвета не повторяем):
 *   На модификаторе .kp-cat-fpill-drop--material НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--material (как у patch-6.9:180-183 для
 *   Цвета). Иначе закрытый дроп будет виден всегда — баг patch-5.8/5.9.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-mat* / .kp-cat-fpill-drop--material.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--material {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер).
 * Зеркалит patch-6.9:180-183. Специфичность 0,0,3,1 == правилу
 * .is-open .kp-cat-fpill-drop {display:block} (patch-6.9:52) — порядок ниже
 * в каскаде, flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--material {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (Одежда=18 материалов). */
body.kp-body .kp-cat-fpill-mat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн зеркалит .kp-cat-fpill-stock из patch-7.0,
 * но строки чуть плотнее (список длинный — нужно вместить 10-18 строк без скролла). */
body.kp-body .kp-cat-fpill-mat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-mat:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-mat.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Тот же приём, что в patch-7.0:64-91 для Наличия —
 * имитация нативного checkbox без <input> (квадрат + ::after-галочка). */
body.kp-body .kp-cat-fpill-mat-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя материала — flex-grow, влезает за счёт min-width:0 в overflow если нужно. */
body.kp-body .kp-cat-fpill-mat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    /* На случай длинных названий вроде «Переработанный полиэстер» — wrap по словам. */
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-mat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer — кнопки всегда видны над скроллом списка. Зеркалит patch-6.9:265-270. */
body.kp-body .kp-cat-fpill-drop--material .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительно — чуть меньше max-height. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--material {
        min-width: 0;
        max-height: 360px;
    }
}

/* ─────────── ex-patch-7.2-cat-brand.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.2-cat-brand.css
 *
 * Фильтр «Бренд» в шапке категории — multi-select чекбоксов из pa_brend.
 * URL: ?filter_pa_brend=slug,slug — WC layered_nav обрабатывает сам
 * (OR-семантика закреплена фильтром woocommerce_layered_nav_default_query_type
 * в catalog-filter.php). Counts — kp_cat_available_attr_terms(.,.,'pa_brend').
 *
 * Визуально полностью повторяет «Материал» (patch-7.1) — те же размеры дропа,
 * скролл-список, sticky-footer. Разделили на отдельный класс kp-cat-fpill-brand*
 * чтобы (а) сохранить семантику DOM, (б) дать возможность точечно отличать
 * Бренд в будущем (например, добавить логотипы) не задев Материал.
 *
 * ВАЖНО — баг patch-5.8/5.9 не повторяем:
 *   На модификаторе .kp-cat-fpill-drop--brand НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--brand (как у Цвета patch-6.9:180-183
 *   и Материала patch-7.1:46-48). Иначе закрытый дроп будет виден всегда.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-brand* / .kp-cat-fpill-drop--brand.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--brand {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер).
 * Зеркалит patch-7.1:45-48. Специфичность 0,0,3,1 == правилу
 * .is-open .kp-cat-fpill-drop {display:block} (patch-6.9:52) — порядок ниже
 * в каскаде, flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--brand {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (Одежда=23 бренда). */
body.kp-body .kp-cat-fpill-brand-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн идентичен .kp-cat-fpill-mat (patch-7.1:63-78). */
body.kp-body .kp-cat-fpill-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-brand:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-brand.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Имитация нативного checkbox без <input>
 * (квадрат + ::after-галочка). Идентично patch-7.1:88-113. */
body.kp-body .kp-cat-fpill-brand-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя бренда — flex-grow. Wrap по словам на длинных названиях (например,
 * «James Harvest», «Matteo Tantini»). */
body.kp-body .kp-cat-fpill-brand-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-brand-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer — кнопки всегда видны над скроллом списка. */
body.kp-body .kp-cat-fpill-drop--brand .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительно — чуть меньше max-height. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--brand {
        min-width: 0;
        max-height: 360px;
    }
}

/* ─────────── ex-patch-7.3-cat-special.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.3-cat-special.css
 *
 * Фильтр «Подборка» в шапке категории — multi-select чекбоксов из type=8
 * (мета _gifts_special_ids, CSV). URL: ?filter_special=ID,ID. Backend — наш,
 * ветка в woocommerce_product_query (catalog-filter.php), REGEXP-OR по CSV,
 * та же семантика что filter_color. Whitelist + counts — kp_special_id_to_name
 * и kp_cat_available_specials в catalog-filter.php.
 *
 * Визуально полностью повторяет «Бренд» (patch-7.2) и «Материал» (patch-7.1) —
 * чекбокс-список, sticky-footer. Отдельный класс kp-cat-fpill-special* —
 * по той же причине что Бренд: семантика DOM + локальные правки в будущем.
 *
 * ВАЖНО — баг patch-5.8/5.9 не повторяем:
 *   На модификаторе .kp-cat-fpill-drop--special НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--special (как у Цвета patch-6.9:180-183,
 *   Материала patch-7.1:45-48, Бренда patch-7.2:38-41).
 *
 * Скоуп: body.kp-body .kp-cat-fpill-special* / .kp-cat-fpill-drop--special.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--special {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер). */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--special {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (макс 6 опций, скролл редок,
 * но max-height на дропе всё равно ограничивает). */
body.kp-body .kp-cat-fpill-special-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн идентичен .kp-cat-fpill-mat (patch-7.1:63-78)
 * и .kp-cat-fpill-brand (patch-7.2:51-69). */
body.kp-body .kp-cat-fpill-special {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-special:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-special.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Имитация нативного checkbox без <input>. */
body.kp-body .kp-cat-fpill-special-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя подборки — flex-grow. Имена короткие (≤18 символов: «Сделано в России»),
 * wrap по словам не нужен, но оставлен для подстраховки. */
body.kp-body .kp-cat-fpill-special-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-special-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer. */
body.kp-body .kp-cat-fpill-drop--special .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп на всю ширину контейнера через patch-6.9:150-156. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--special {
        min-width: 0;
        max-height: 360px;
    }
}

/* ─────────── ex-patch-7.4-collections-index.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.4-collections-index.css
 *
 * Индексная страница /collections/ (templates/collections-index.php, ЭТАП B2b).
 * Шапка/крошки переиспользуют kp-cat-head/kp-cat-crumbs (patch-5.1 + patch-6.7),
 * новые стили — только сетка карточек коллекций и сама карточка.
 *
 * Карточка коллекции: обложка-фото (4:3) + имя + count. Кликабельная (вся
 * карточка — <a>), ведёт на /collections/{slug}/ (taxonomy-product_collection).
 * Без цены, без «В корзину» — это не товар, а навигационный узел.
 *
 * Скоуп: body.kp-body .kp-coll-grid* / .kp-coll-card*.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Грид карточек: 4 колонки на десктопе, тот же breakpoint-набор что у
 * .kp-cat-grid (категории) — patch-5.1. */
body.kp-body .kp-coll-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 24px 0 48px;
}

@media (max-width: 1100px) {
    body.kp-body .kp-coll-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    body.kp-body .kp-coll-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-coll-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Карточка — link-обёртка вокруг обложки и подписи. */
body.kp-body .kp-coll-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
    border: 1px solid var(--line, #e5e5e5);
}
body.kp-body .kp-coll-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* Обложка — 4:3 для предсказуемости в гриде разных по форме фото поставщика. */
body.kp-body .kp-coll-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--fog, #f5f5f5);
    overflow: hidden;
}
body.kp-body .kp-coll-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
body.kp-body .kp-coll-card:hover .kp-coll-card-cover img {
    transform: scale(1.04);
}
/* Fallback без обложки — серый плейсхолдер (на практике сейчас не срабатывает:
 * у всех 37 коллекций есть фото; оставлен на случай новых пустых импортов). */
body.kp-body .kp-coll-card-cover-fallback {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 45%, rgba(0,0,0,.04) 50%, transparent 55%)
        var(--fog, #f5f5f5);
}

/* Подпись — имя + count. */
body.kp-body .kp-coll-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.kp-body .kp-coll-card-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-coll-card-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}

/* Тонкий jet-ввод: на мобильных уменьшаем кегль имени на 1px. */
@media (max-width: 480px) {
    body.kp-body .kp-coll-card-name  { font-size: 17px; }
    body.kp-body .kp-coll-card-body  { padding: 12px 14px 16px; }
}

/* ─────────── ex-patch-7.5-wishlist-heart.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.5 — Сердце в карточке товара: рабочая кнопка + новый стиль.
 *
 * Контекст:
 *   До 7.5 в шаблонах карточки рендерилась мёртвая <button class="kp-prod-fav">
 *   без data-атрибутов — Woodmart-JS на неё не цеплялся. В 7.5 хелпер
 *   kp_wishlist_btn() (inc/helpers.php) рендерит разметку под контракт
 *   wishlist.js:37 — <div class="kp-prod-fav wd-wishlist-btn ..."><a data-product-id
 *   data-key data-added-text> — и Woodmart сам обрабатывает клик
 *   (cookie для гостей / AJAX для авторизованных).
 *
 *   Demo-плитки на главной идут с тем же контейнером .kp-prod-fav, но без
 *   wd-wishlist-* / data-* — это .kp-prod-fav-demo, чисто визуальный.
 *
 * Что делает патч:
 *   1) Перебивает старое правило main.css:362-365 (.kp-prod-fav — серый круг,
 *      hover только меняет цвет иконки) под новый эталон Image 4/5:
 *      белый круг 34×34 + border 1px line, иконка-контур var(--ink-3),
 *      hover → красная заливка var(--hot), иконка белая.
 *   2) Состояние .added (a.added внутри .kp-prod-fav) — постоянная красная
 *      заливка + залитое сердце. Wishlist.js навешивает .added на <a>
 *      при добавлении и на загрузке (updateWishlistButtonState).
 *   3) Сбрасывает родные Woodmart-стили .wd-wishlist-btn / .wd-action-btn,
 *      которые могут перебивать наш позиционирующий absolute (background,
 *      padding, position relative и т.д.).
 *   4) Прячет .wd-action-text (Woodmart-текст, который JS заменит на
 *      data-added-text после добавления — нам он не нужен визуально,
 *      но удалять его нельзя: wishlist.js:377 ищет именно его, иначе
 *      fallback на $button.text() сотрёт наш SVG).
 *
 * Скоуп:
 *   body.kp-body .kp-prod-imgwrap .kp-prod-fav — высокая специфичность,
 *   перебивает и main.css, и parent woodmart CSS без !important (где можно).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. База: круглая кнопка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
    /* absolute top:8/right:8 уже заданы в patch-3.3 (GROUP D, с !important) */
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-3);       /* цвет SVG-контура */
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

/* Кнопка-обёртка для реального товара — это <div>, внутри <a>. Растягиваем <a> */
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
    /* Сброс родных .wd-action-btn padding/background — Woodmart рисует свою
       подложку, нам она не нужна. */
    padding: 0;
    background: transparent;
}

/* Прячем родные Woodmart-элементы: .wd-added-icon (их check-иконка) и
   .wd-action-text (текст, который JS подменит после добавления). Текст
   оставляем в DOM ради корректности wishlist.js:377-381 — там logic
   "if .wd-action-text exists → replace its text, else replace whole button". */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-added-icon {
    display: none;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-action-text,
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Иконка-сердце */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-prod-fav-svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: fill .15s;
}

/* ───────── 2. Hover: красная заливка, иконка белая ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}

/* ───────── 3. Состояние .added (товар уже в избранном) ─────────
 * wishlist.js навешивает .added на <a> при успешном добавлении и
 * восстанавливает её на загрузке для товаров из cookie.
 * Контейнер при этом остаётся обычным — селектор идёт через :has() для
 * современных браузеров и через дублирующее правило с .added на <a>. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:has(a.added) {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav a.added .kp-prod-fav-svg {
    fill: currentColor;        /* заливает контур сердца */
}

/* ───────── 4. Сбросы для Woodmart-классов на нашем контейнере ─────────
 * .wd-action-btn / .wd-wishlist-btn могут принести из parent CSS
 * собственный position, background, before-псевдо. Сбрасываем то, что
 * мешает нашему круглому виду. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn {
    /* перебивает woodmart .wd-action-btn default sizing */
    line-height: 0;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn::before,
body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn > a::before {
    display: none !important;  /* Woodmart рисует свою иконку через ::before */
}

/* ───────── 5. Доступность: фокус-обводка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:focus-visible,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 2px;
}

/* ─────────── ex-patch-7.6-wishlist-fix.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.6 — Wishlist heart: добивка patch-7.5.
 *
 * Контекст:
 *   В 7.5 мы повесили на контейнер .kp-prod-fav классы Woodmart
 *   (.wd-wishlist-btn .wd-action-btn .wd-style-icon .wd-wishlist-icon) для
 *   совместимости с wishlist.js. Они подтянули из woodmart base.min.css
 *   правило `.wd-action-btn>a:hover { color: var(--wd-action-color-hover,
 *   var(--color-gray-500)) }` (специфичность 0,0,1,2), которое перекрывает
 *   наш цвет наследования от .kp-prod-fav:hover (0,0,3,1) — потому что
 *   наследование (color:inherit) проигрывает явному color на <a>:hover.
 *
 *   Визуально это выглядит как серое hover-сердце вместо нашего белого
 *   на красном фоне.
 *
 *   Аналогично для .added — у Woodmart жёсткого color на a.added нет,
 *   но мы хотим белую иконку поверх красной заливки контейнера, и без
 *   явного правила inherit может не дойти.
 *
 * Что делает патч:
 *   Явно ставит color:#fff на <a> при :hover контейнера, при :hover самого <a>
 *   и при состоянии .added. Специфичность 0,0,4,2 — победит Woodmart 0,0,1,2
 *   без !important.
 *
 *   Дополнительно — таймминг: совпадает transition контейнера, чтобы цвет
 *   иконки переключался синхронно с заливкой.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. Цвет иконки в hover/added — белый ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover > a,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a:hover,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a.added {
    color: #fff;
    transition: color .15s;
}

/* ───────── 2. .added — постоянная красная заливка контейнера ─────────
 * patch-7.5 уже ставит это через :has(a.added). Дублируем здесь без :has()
 * на случай старых браузеров — Safari 15.4+ / Firefox 121+ поддерживают,
 * но запасной путь не помешает: селектор .wd-wishlist-btn + a.added — то же
 * самое, только без :has(). */

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn > a.added {
    /* На <a> мы не ставим background — он на контейнере. Тут только
       страховочный color для .added (что уже сделано в блоке 1). */
}

/* ───────── 3. SVG в .added — заполненное сердце ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav > a.added .kp-prod-fav-svg {
    fill: currentColor;        /* currentColor = #fff (см. блок 1) */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Счётчик избранного в шапке.
 *
 * header.php теперь рендерит <span class="wd-tools-count kp-badge-count">
 * ВСЕГДА (даже при 0) — иначе wishlist.js (updateCountWidget, строки 267-273)
 * не найдёт куда писать новое число после add/remove. Скрываем span когда
 * число = 0 (пустой текст или data-count="0" на родителе).
 *
 * Селекторы:
 *   :empty — span без текста (рендер при count=0)
 *   .kp-snav-icon[data-count="0"] .wd-tools-count — на случай, если число
 *   обновлено JS-ом и стало "0" (текст не пустой, но семантически ноль)
 * ═══════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-icon.wd-header-wishlist .wd-tools-count:empty,
body.kp-body .kp-snav-icon.wd-header-wishlist[data-count="0"] .wd-tools-count {
    display: none;
}

/* Класс wd-header-wishlist может прийти с CSS-инъекциями от Woodmart
 * header-builder (margin, padding, alignment). Сбрасываем — наш
 * .kp-snav-icon уже знает, как себя позиционировать. */

body.kp-body .kp-snav-icon.wd-header-wishlist {
    /* Сброс на случай, если Woodmart-CSS прилетит позже */
    margin: 0;
    padding: 0;
}

/* ─────────── ex-patch-7.7-wishlist-shape.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.7 — Wishlist heart: возврат видимости белого круга.
 *
 * Контекст:
 *   В patch-7.5 я снял `box-shadow: var(--shadow-soft)` (которое было в
 *   main.css:363 на старой .kp-prod-fav), посчитав его лишним. Оказалось,
 *   именно эта тень держала «белый круг» на эталоне Image 4/5: продуктовые
 *   фото в каталоге часто на белом фоне, у имгврапа фон тоже белый, у
 *   нашей кнопки фон белый, а border 1px #E5E5E5 в этом white-on-white
 *   стэке визуально неотличим от фона. Без тени круг просто исчезал —
 *   Nick видел только SVG-сердце без обрамления.
 *
 * Что делает патч:
 *   1) Возвращает читаемую box-shadow на .kp-prod-fav (drop+lift, чуть
 *      сильнее, чем shadow-soft, чтобы на любом фоне круг был виден).
 *   2) При hover/active тень убирается — заливка var(--hot) сама даёт
 *      контраст, а тень бы загрязняла красный.
 *   3) Border слегка усилен только для нашего контекста (всё ещё через
 *      переменные, без слепых hex).
 *
 * Скоуп: тот же body.kp-body .kp-prod-imgwrap .kp-prod-fav, специфичность
 * 0,0,3,1 — перебивает patch-7.5 (тот же селектор, но позже в каскаде).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. Белый круг — снова виден ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
    /* Двухслойная тень: жёсткое 1px-кольцо + мягкий drop.
       Первый слой эмулирует чёткую границу (как outline, но без баунд-боксов).
       Второй даёт лёгкий «приподнятый» эффект — круг отделяется от фото. */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.10);
    /* border у нас уже есть в patch-7.5 (1px solid var(--line)) — оставляем
       как fallback, но в стэке поверх тени он практически не работает. */
}

/* ───────── 2. Hover / .added — тень убираем, заливка сама держит контраст ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover,
body.kp-body .kp-prod-imgwrap .kp-prod-fav:has(a.added) {
    /* Лёгкий лифт сохраняем, чтобы движение «нажалось» — но без серого ринга */
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.30);  /* красный соответствует --hot */
}

/* ─────────── ex-patch-7.8-wishlist-page.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.8 — Страница «Избранное» (/wishlist/) по дизайну Nick.
 *
 * Рендер из child theme/page-wishlist.php (через WP template hierarchy —
 * page-{slug}.php перебивает дефолтный Elementor-widget wd_wishlist).
 *
 * Структура:
 *   .kp-wl-page
 *     .kp-cat-crumbs               — крошки (стиль наследует от каталога)
 *     .kp-wl-head                  — kicker + H1 + плашка-счётчик + интро
 *       .kp-wl-kicker              — «Личный список»
 *       .kp-wl-title-row
 *         .kp-wl-title (H1)        — «ИЗБРАННОЕ»
 *         .kp-wl-count             — жёлтая плашка-счётчик «N товаров в списке»
 *       .kp-wl-intro               — текст про cookies + действия
 *     .kp-wl-actions               — «В корзину всё (N)» + «Очистить»
 *     .kp-wl-grid-sec > .kp-cat-grid.kp-wl-grid  — сетка наших карточек
 *     .kp-wl-empty                 — пустое состояние (сердце в круге + текст + кнопка)
 *
 * Скоупинг: всё под body.kp-body / .kp-wl-page. Никаких голых .kp-* без обёртки.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. Контейнер страницы ───────── */

body.kp-body .kp-wl-page {
    padding-bottom: 80px;
}

/* ───────── 1a. Перебивка [hidden] для display:flex/grid элементов ─────────
 *
 * Причина: UA-стайл `[hidden] { display: none }` имеет специфичность 0,0,1,0.
 * У нас .kp-wl-count (плашка-счётчик) задана `display: inline-flex` (0,0,2,1),
 * у .kp-wl-empty-icon — `display: grid` и т.д. Наши display-правила
 * перебивают UA `[hidden]`, и атрибут html `hidden` визуально игнорируется.
 *
 * Проявление багов:
 *   BAG 2 — при count>0 пустое состояние и грид рендерятся одновременно
 *           (хотя <section class="kp-wl-empty" hidden> в HTML корректный);
 *   BAG 3 — после «Очистить» JS ставит plate.setAttribute('hidden',''),
 *           но плашка остаётся видна (display:inline-flex побеждает).
 *
 * Фикс: явное правило с теми же скоупами, но 100% перебивает любой наш display.
 * !important здесь оправдан — это override НАШИХ собственных более ранних
 * display-правил, не Woodmart'овых. */

body.kp-body .kp-wl-page [hidden],
body.kp-body .kp-wl-page[hidden] {
    display: none !important;
}

/* ───────── 2. Шапка: kicker + H1 + плашка-счётчик ───────── */

body.kp-body .kp-wl-head {
    padding-top: 24px;
    padding-bottom: 12px;
}

body.kp-body .kp-wl-kicker {
    font-size: 13px;
    letter-spacing:normal;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: 14px;
}

body.kp-body .kp-wl-title-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    font-weight: 700;
    letter-spacing:normal;
    color: var(--ink);
    margin: 0;
    flex: 0 0 auto;
}

/* Плашка-счётчик «N товаров в списке» — повторяет паттерн .kp-cat-head-count,
 * но в жёлтом (var(--yellow)) — это акцент дизайна для главной CTA-зоны. */
body.kp-body .kp-wl-count {
    background: var(--yellow);
    color: var(--ink);
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

body.kp-body .kp-wl-count-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

body.kp-body .kp-wl-count-lbl {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing:normal;
}

body.kp-body .kp-wl-intro {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
}

/* ───────── 3. Действия ───────── */

body.kp-body .kp-wl-actions {
    padding: 8px 0 20px;
}

body.kp-body .kp-wl-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    letter-spacing:normal;
    text-decoration: none;
    transition: all .15s;
}

body.kp-body .kp-wl-btn-primary {
    background: var(--ink);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
}

body.kp-body .kp-wl-btn-primary:hover {
    background: var(--yellow);
    color: var(--ink);
}

body.kp-body .kp-wl-btn-primary svg {
    flex: 0 0 auto;
}

body.kp-body .kp-wl-btn-ghost {
    background: transparent;
    color: var(--ink-2);
    padding: 14px 8px;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.kp-body .kp-wl-btn-ghost:hover {
    color: var(--hot);
}

body.kp-body .kp-wl-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ───────── 4. Сетка — наследует от каталога (.kp-cat-grid из patch-5.1) ───────── */

body.kp-body .kp-wl-grid-sec {
    padding: 12px 0 0;
}

/* На странице избранного нет фильтров/панели сверху — карточки прямо в грид. */
body.kp-body .kp-wl-grid {
    /* Используем те же 4 колонки, что в архиве категории (patch-5.1). */
    /* В patch-5.1 уже задано body.kp-body .kp-cat-page .kp-cat-grid — у нас
     * .kp-wl-page (не .kp-cat-page), поэтому базовая 5-кол. из main.css
     * сработает не так. Дублируем явно. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ───────── 5. Пустое состояние ───────── */

body.kp-body .kp-wl-empty {
    padding: 40px 0;
}

body.kp-body .kp-wl-empty-box {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 24px;
}

body.kp-body .kp-wl-empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: var(--yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
}

body.kp-body .kp-wl-empty-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing:normal;
}

body.kp-body .kp-wl-empty-text {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 28px;
}

/* ───────── 6. Мини-тост (используется и из main.js, и из kp-wishlist.js) ─────────
 * Если стили уже есть в main.css — этот блок их продублирует через :where(),
 * но безопаснее задать здесь — main.js может не быть на странице, а тост
 * нужен.
 *
 * Скоупинг: фикс позицию, обычный стиль тоста. Без !important. */

body.kp-body .kp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-weight: 600;
    animation: kp-toast-in .2s ease-out;
}

body.kp-body .kp-toast-t {
    line-height: 1.3;
}

@keyframes kp-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ───────── 7. Адаптив ───────── */

@media (max-width: 980px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.kp-body .kp-wl-title-row {
        gap: 16px;
    }
    body.kp-body .kp-wl-title {
        font-size: clamp(28px, 7vw, 40px);
    }
}

@media (max-width: 760px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.kp-body .kp-wl-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.kp-body .kp-wl-btn-primary {
        justify-content: center;
    }
    body.kp-body .kp-wl-btn-ghost {
        text-align: center;
    }
}

@media (max-width: 480px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    body.kp-body .kp-wl-count {
        padding: 8px 12px;
    }
    body.kp-body .kp-wl-count-num {
        font-size: 24px;
    }
}

/* ─────────── ex-patch-7.9-kp-confirm.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.9 — kp-confirm: переиспользуемое модальное подтверждение.
 *
 * Заменяет нативный window.confirm() на красивый модал в стиле K-Promo.
 * Используется в:
 *   • Очистка вишлиста (kp-wishlist.js — программный вызов kpConfirm)
 *   • Очистка корзины (woocommerce/cart/cart.php → .kp-cart-clear с
 *     data-kp-confirm — авто-привязка из kp-confirm.js)
 *   • Любой другой <a>/<button> с data-kp-confirm в будущем.
 *
 * Не требует ни Woodmart, ни jQuery — vanilla, скоупится через ID-классы.
 *
 * Структура DOM (рисуется из kp-confirm.js):
 *   .kp-confirm-backdrop                    — затемнённый фон
 *     .kp-confirm                           — карточка модала
 *       .kp-confirm-title (H3)              — заголовок
 *       .kp-confirm-message (P)             — опциональное описание
 *       .kp-confirm-actions                 — кнопки
 *         .kp-confirm-btn.kp-confirm-btn-cancel  — «Отмена»
 *         .kp-confirm-btn.kp-confirm-btn-ok      — «Подтвердить»
 *
 * Не используем body.kp-body скоуп — модал может всплыть и на не-kp страницах
 * (если когда-нибудь добавим data-kp-confirm на чужой шаблон). Скоуп через
 * собственное имя класса .kp-confirm-* уникально.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Бэкдроп ───────── */

.kp-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 20px;
    animation: kp-confirm-bd-in .15s ease-out;
}

@keyframes kp-confirm-bd-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ───────── Модал ───────── */

.kp-confirm {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    animation: kp-confirm-in .18s ease-out;
    box-sizing: border-box;
}

@keyframes kp-confirm-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kp-confirm-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #0a0a0a);
    line-height: 1.25;
}

.kp-confirm-message {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2, #555);
}

/* Если message пустой — modal-title должен сохранить нижний отступ перед actions. */
.kp-confirm-title:last-of-type:not(:last-child) ~ .kp-confirm-actions,
.kp-confirm-title + .kp-confirm-actions {
    margin-top: 22px;
}

/* ───────── Кнопки ───────── */

.kp-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.kp-confirm-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
    letter-spacing:normal;
}

.kp-confirm-btn:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* Отмена — ghost (без фона, контур). */
.kp-confirm-btn-cancel {
    background: #fff;
    color: var(--ink, #0a0a0a);
    border: 1px solid var(--line, #E5E5E5);
}

.kp-confirm-btn-cancel:hover {
    background: var(--fog, #F7F7F7);
    border-color: var(--ink-3, #8A8A8A);
}

/* Подтвердить — акцент (чёрный → жёлтый на hover, как у .kp-prod-add). */
.kp-confirm-btn-ok {
    background: var(--ink, #0a0a0a);
    color: #fff;
}

.kp-confirm-btn-ok:hover {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}

/* ───────── Мобилка: кнопки во всю ширину, ордер reverse (ok сверху) ───────── */

@media (max-width: 480px) {
    .kp-confirm {
        padding: 22px 20px 18px;
        border-radius: 14px;
    }
    .kp-confirm-title {
        font-size: 18px;
    }
    .kp-confirm-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .kp-confirm-btn {
        width: 100%;
        padding: 14px 22px;
    }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 08 · PDP — КАРТОЧКА ТОВАРА; КРОШКИ, МОДАЛКИ, ТАБЛИЦА ЗАКАЗА, КОНТАКТЫ, ДОКИ, УНИФИКАЦИЯ (быв. 9.0–9.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-9.0-product.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 9.0: Страница товара (PDP), ядро.
 * ───────────────────────────────────────────────────────────────
 * Кастомный шаблон woocommerce/single-product/content-single-product.php
 * (уводит рендер от дефолта Woodmart). Дизайн — Claude-design:
 *   - левая колонка: галерея (product.css)
 *   - правая колонка: вариант V1 «refined classic» (product-variants.css)
 *
 * Всё скоупится под `body.kp-body .kp-pdp`, веса ≤700, жёлтый = var(--yellow)
 * (канон #FECE15). Токены, которых может не быть в теме, объявлены локально
 * на .kp-pdp (не текут наружу). --yellow / --ink наследуются из темы.
 *
 * Контентный рельс (Описание/Характеристики), секция методов и «Похожие» —
 * следующим заходом (patch-9.1).
 * ─────────────────────────────────────────────────────────────── */

/* Токены наследуются из единого слоя patch-8.0 (источник правды).
   Локальные дубли убраны 27.06 — карточка использует канон. */
body.kp-body .kp-pdp {
  background: var(--paper);
}

/* Контейнер по ширине сайта. Верхний отступ убран в 0 — крошки идут первыми
   и должны ПРИМЫКАТЬ к жёлтому sticky-меню (внутренний отступ крошек 16px даёт
   воздух до текста). Нижний паддинг 0 — отступ под hero даёт margin-bottom
   грид-сетки; контентные полосы держат свой ритм сами (patch-9.1). */
body.kp-body.single-product .wd-content-area { padding-top: 0; }
body.kp-body .kp-pdp-main {
  padding: 0;
}

/* 2 колонки: галерея (уже) + инфо (шире) */
body.kp-body .kp-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px; /* единый ритм: hero → первая полоса (56 + 56 паддинг полосы) */
}
body.kp-body .kp-pdp-grid > .kp-pdp-gallery,
body.kp-body .kp-pdp-grid > .kp-pdp-info { min-width: 0; }

/* галерея sticky на десктопе */
@media (min-width: 1025px) {
  body.kp-body .kp-pdp-gallery { position: sticky; top: 24px; }
}

/* ═══════════════ ГАЛЕРЕЯ (product.css) ═══════════════ */
body.kp-body .kp-pdp .gal { display: flex; flex-direction: column; gap: 16px; }
body.kp-body .kp-pdp .gal-main-wrap {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
body.kp-body .kp-pdp .gal-main { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
body.kp-body .kp-pdp .gal-badges {
  position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column;
  gap: 6px; z-index: 2;
}
body.kp-body .kp-pdp .gal-badge {
  padding: 6px 10px; border-radius: 4px; font-weight: 700; font-size: 11px;
  letter-spacing:normal; text-transform: uppercase; width: fit-content;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
body.kp-body .kp-pdp .gb-new { background: var(--eco); color: #fff; }
body.kp-body .kp-pdp .gb-rus { background: var(--ink); color: var(--yellow); }
body.kp-body .kp-pdp .gb-sale { background: var(--hot); color: #fff; }
body.kp-body .kp-pdp .gb-hit { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .gal-tools {
  position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;
  gap: 8px; z-index: 2;
}
body.kp-body .kp-pdp .gal-tool {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-soft); display: grid; place-items: center;
  color: var(--ink-3); transition: all .15s; border: 0; cursor: pointer;
}
body.kp-body .kp-pdp .gal-tool:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-card); }
body.kp-body .kp-pdp .gal-tool.is-fav { color: var(--hot); }
body.kp-body .kp-pdp .gal-thumbs {
  display: flex; gap: 12px; align-items: center; min-width: 0;
  overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar { height: 6px; }
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
body.kp-body .kp-pdp .gal-thumb {
  scroll-snap-align: start; width: 80px; height: 80px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; background: #fff;
  padding: 6px; transition: border-color .15s, transform .15s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.kp-body .kp-pdp .gal-thumb img { width: 100%; height: 100%; object-fit: contain; }
body.kp-body .kp-pdp .gal-thumb:hover { border-color: var(--ink); transform: translateY(-2px); }
body.kp-body .kp-pdp .gal-thumb.is-active { border: 2px solid var(--ink); padding: 5px; }
/* Видео товара в галерее (тот же _kp_video, что hover-превью каталога):
   миниатюра с ▶ как маркер видео на карточке каталога; плеер — на месте главного фото. */
body.kp-body .kp-pdp .gal-video { width: 100%; height: 100%; object-fit: contain; background: #fff; }
body.kp-body .kp-pdp .gal-video[hidden],
body.kp-body .kp-pdp .gal-main[hidden] { display: none; }
body.kp-body .kp-pdp .gal-video-thumb { position: relative; }
body.kp-body .kp-pdp .gal-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10, 10, 10, .55); color: #FFF;
  display: grid; place-items: center; pointer-events: none;
}
body.kp-body .kp-pdp .gal-video-play svg { margin-left: 2px; }

/* ═══════════════ ПРАВАЯ КОЛОНКА — V1 (product-variants.css) ═══════════════ */
/* На реальной странице .pv — это сама колонка, без карточки-обёртки. */
body.kp-body .kp-pdp .pv { width: auto; background: none; box-shadow: none; padding: 0; border-radius: 0; }
body.kp-body .kp-pdp .pv * { font-feature-settings: "tnum" 0; }

body.kp-body .kp-pdp .pv-brand {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px;
  background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 15px;
  letter-spacing:normal; text-transform: uppercase; margin-bottom: 18px;
}
body.kp-body .kp-pdp .pv-brand svg { color: var(--yellow); }
body.kp-body .kp-pdp a.pv-brand { text-decoration: none; transition: background .15s; }
body.kp-body .kp-pdp a.pv-brand:hover { background: #222; }
body.kp-body .kp-pdp .pv-title {
  margin: 0 0 18px; font-weight: 700; font-size: 30px; line-height: 1.12;
  letter-spacing:normal; color: var(--ink);
}
body.kp-body .kp-pdp .pv-ids { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
body.kp-body .kp-pdp .pv-id { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; color: var(--ink-3); }
body.kp-body .kp-pdp .pv-id-lbl { font-weight: 500; letter-spacing:normal; }
body.kp-body .kp-pdp .pv-id-val { font-weight: 600; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp button.pv-id-copy {
  display: inline; appearance: none; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-weight: 600; line-height: inherit; color: var(--ink);
  text-transform: none; letter-spacing: normal; cursor: pointer;
  text-underline-offset: 3px;
}
body.kp-body .kp-pdp button.pv-id-copy:hover { text-decoration: underline; }
body.kp-body .kp-pdp button.pv-id-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.kp-body .kp-pdp .pv-copy-status {
  position: absolute; top: 100%; left: 0; padding-top: 3px;
  font-size: 12px; line-height: 1.3; color: var(--ink); pointer-events: none;
}
body.kp-body .kp-pdp .pv-id-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

body.kp-body .kp-pdp .pv-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
body.kp-body .kp-pdp .pv-price-num { font-weight: 700; font-size: 38px; line-height: 1; letter-spacing:normal; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-price-unit { font-size: 15px; font-weight: 500; color: var(--ink-3); }

body.kp-body .kp-pdp .pv-lbl { font-weight: 600; font-size: 15px; letter-spacing:normal; text-transform: uppercase; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-block { margin-bottom: 24px; }
body.kp-body .kp-pdp .pv-rule { height: 1px; background: var(--line); border: 0; margin: 0 0 24px; }

/* цвет — thumbnails */
body.kp-body .kp-pdp .pv-thumb-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-thumb-head .pv-cur { font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-thumb-head .pv-mut { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-thumb-dot { color: var(--ink-3); }
body.kp-body .kp-pdp .pv-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-thumb {
  width: 76px; height: 76px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
  padding: 6px; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
}
body.kp-body .kp-pdp .pv-thumb:hover { border-color: var(--ink-3); transform: translateY(-2px); }
body.kp-body .kp-pdp .pv-thumb.is-on { border: 2px solid var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); padding: 5.5px; }
body.kp-body .kp-pdp .pv-thumb-vis { width: 100%; height: 100%; border-radius: 8px; background: var(--fog); overflow: hidden; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-thumb-vis img { width: 100%; height: 100%; object-fit: contain; }

body.kp-body .kp-pdp .pv-pantone { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--fog); border-radius: 10px; }
body.kp-body .kp-pdp .pv-pantone-chip { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
body.kp-body .kp-pdp .pv-pantone-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.kp-body .kp-pdp .pv-pantone-code { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing:normal; }
body.kp-body .kp-pdp .pv-pantone-sub { font-size: 15px; color: var(--ink-3); font-weight: 500; }

/* методы — плитки 2×2 */
body.kp-body .kp-pdp .pv-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.kp-body .kp-pdp a.pv-pm-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* 16.10.2026: ссылка на посадочную «товар × нанесение» */
body.kp-body .kp-pdp a.pv-pm-more:hover { text-decoration-color: var(--yellow); }
body.kp-body .kp-pdp .pv-method { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: all .15s; }
body.kp-body .kp-pdp .pv-method:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
body.kp-body .kp-pdp .pv-mglyph { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); flex-shrink: 0; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-mglyph svg { width: 24px; height: 24px; }
body.kp-body .kp-pdp .pv-method-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.kp-body .kp-pdp .pv-method-nm { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.15; }

/* наличие */
body.kp-body .kp-pdp .pv-avail { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-avail-cell { flex: 1; min-width: 96px; background: var(--fog); border-radius: 10px; padding: 10px 12px; }
body.kp-body .kp-pdp .pv-avail-k { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
body.kp-body .kp-pdp .pv-avail-v { font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-avail-v.is-zero { color: var(--ink-3); }

/* тираж + сумма */
body.kp-body .kp-pdp .pv-qty { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-qty-l { display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .pv-stepper { display: inline-flex; align-items: stretch; height: 56px; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
body.kp-body .kp-pdp .pv-step-btn { width: 54px; display: grid; place-items: center; background: var(--fog); color: var(--ink); transition: background .14s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-step-btn:hover { background: var(--yellow); }
body.kp-body .kp-pdp .pv-step-btn:disabled { color: var(--ink-3); background: #fff; cursor: not-allowed; }
body.kp-body .kp-pdp .pv-step-input { width: 92px; border: 0; outline: 0; text-align: center; font-weight: 700; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; background: transparent; }
body.kp-body .kp-pdp .pv-step-hint { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-step-hint b { font-weight: 600; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-qty-sum { text-align: right; }
body.kp-body .kp-pdp .pv-qty-sum-cap { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
body.kp-body .kp-pdp .pv-qty-sum-num { font-weight: 700; font-size: 26px; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; line-height: 1; }

/* CTA */
body.kp-body .kp-pdp .pv-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
body.kp-body .kp-pdp .pv-btn { height: 54px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing:normal; text-transform: uppercase; transition: all .15s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-btn-cart { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.kp-body .kp-pdp .pv-btn-cart:hover { background: var(--ink); color: #fff; }
body.kp-body .kp-pdp .pv-btn-cart.is-added { background: var(--eco); color: #fff; box-shadow: none; }
body.kp-body .kp-pdp .pv-btn-print { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .pv-btn-print:hover { background: var(--yellow-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* факты */
body.kp-body .kp-pdp .pv-facts { display: flex; flex-direction: column; }
body.kp-body .kp-pdp .pv-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact:first-child { border-top: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact-k { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-fact-v { font-weight: 600; font-size: 15px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* склад-плашка */
body.kp-body .kp-pdp .pv-stock { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; background: rgba(124,179,66,.12); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eco); box-shadow: 0 0 0 4px rgba(124,179,66,.22); }
body.kp-body .kp-pdp .pv-stock b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* консультация */
body.kp-body .kp-pdp .pv-consult { margin-top: 20px; padding: 18px; background: var(--fog); border-radius: 14px; }
body.kp-body .kp-pdp .pv-consult-h { margin: 0 0 12px; font-weight: 600; font-size: 16px; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-consult-line { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-line svg { color: var(--ink-2); }
body.kp-body .kp-pdp .pv-consult-msgs { display: flex; gap: 8px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-msg { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: all .15s; }
body.kp-body .kp-pdp .pv-msg:hover { transform: translateY(-1px); border-color: var(--ink); }
body.kp-body .kp-pdp .pv-msg img { width: 22px; height: 22px; display: block; border-radius: 6px; }

/* ═══════════════ Адаптив ═══════════════ */
@media (max-width: 1024px) {
  body.kp-body .kp-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  body.kp-body .kp-pdp .pv-title { font-size: 24px; }
  body.kp-body .kp-pdp .pv-price-num { font-size: 32px; }
  body.kp-body .kp-pdp .pv-methods-grid { grid-template-columns: 1fr; }
  body.kp-body .kp-pdp .pv-ctas { grid-template-columns: 1fr; }
  /* поле ввода — 16px, чтобы iOS не зумил */
  body.kp-body .kp-pdp .pv-step-input { font-size: 18px; }
}

/* Гл.фото галереи = <picture> (woodmart-images-optimizer): класс .gal-main уехал на <picture>,
   а object-fit на обёртку не действует — только на сам <img>. Дублируем размер/contain на вложенный <img>. */
body.kp-body .kp-pdp .gal-main > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ─────────── ex-patch-9.1-product-blocks.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.1 — Страница товара: контентные секции.
   Источник: Claude-design product.css (.det / .ov).
   Два блока, каждый — 2 колонки, правая колонка STICKY:
     Блок 1: Описание (слева) | Характеристики (справа, sticky)
     Блок 2: Доставка и оплата (слева, стопкой) | Упаковка (справа, sticky)
   Полноширинные полосы (full-bleed), чередование фона paper/fog, тонкие
   линии-разделители. Заголовки БЕЗ номеров, без рамок-карточек.
   Текст — ЧЁРНЫЙ (без серого). НЕТ letter-spacing; жирность ≤ 700.
   Токены из patch-9.0 (.kp-pdp: --ink, --fog, --line, --yellow…).
   ════════════════════════════════════════════════════════════════════ */

/* ── полоса-секция: во всю ширину, чередование фона, линия сверху ── */
body.kp-body .kp-pdp .kp-det {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
body.kp-body .kp-pdp .kp-det--alt { background: var(--fog); }

body.kp-body .kp-pdp .kp-det-h {
  font-weight: 700; font-size: 28px; line-height: 1.1;
  text-transform: uppercase; margin: 0; color: var(--ink);
}
body.kp-body .kp-pdp .kp-det-bar {
  display: block; width: 48px; height: 3px;
  background: var(--yellow); border-radius: 0; margin: 12px 0 24px;
}

/* ── 2-колоночный блок: контент слева | правая колонка sticky ── */
body.kp-body .kp-pdp .kp-det2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
body.kp-body .kp-pdp .kp-det2-main { min-width: 0; }
body.kp-body .kp-pdp .kp-det2-aside {
  min-width: 0; align-self: start; position: sticky; top: 24px;
}
body.kp-body .kp-pdp .kp-aside-h {
  font-weight: 700; font-size: 18px; line-height: 1.1;
  text-transform: uppercase; margin: 0; color: var(--ink);
}

/* ── описание (лид + контент поставщика), ЧЁРНЫЙ, 16/1.65, pretty ── */
body.kp-body .kp-pdp .kp-ov-lead {
  font-size: 16px; line-height: 1.65; color: var(--ink); text-wrap: pretty;
}
body.kp-body .kp-pdp .kp-ov-lead > :first-child { margin-top: 0; }
body.kp-body .kp-pdp .kp-ov-lead > :last-child { margin-bottom: 0; }
body.kp-body .kp-pdp .kp-ov-lead p { margin: 0 0 14px; }
body.kp-body .kp-pdp .kp-ov-lead a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
/* 22.10.2026 (seo/63): строка условий под описанием — цена с логотипом, тираж, заказ */
body.kp-body .kp-pdp .kp-cond { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
body.kp-body .kp-pdp .kp-cond-row { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--ink); }
body.kp-body .kp-pdp .kp-cond-row b { font-weight: 600; }
body.kp-body .kp-pdp .kp-ov-lead ul,
body.kp-body .kp-pdp .kp-ov-lead ol,
body.kp-body .kp-pdp .kp-ov-lead ul.list {
  margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
body.kp-body .kp-pdp .kp-ov-lead li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start; }
body.kp-body .kp-pdp .kp-ov-lead li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 9px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-ov-lead table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: 13px; }
body.kp-body .kp-pdp .kp-ov-lead td, body.kp-body .kp-pdp .kp-ov-lead th { border: 1px solid var(--line); padding: 6px 8px; text-align: center; color: var(--ink); }
body.kp-body .kp-pdp .kp-ov-lead img { max-width: 100%; height: auto; }
body.kp-body .kp-pdp .kp-ov-lead b, body.kp-body .kp-pdp .kp-ov-lead strong { font-weight: 600; }

/* ── список характеристик / упаковки: • <b>Ключ</b> — значение ── */
body.kp-body .kp-pdp .kp-charlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.kp-body .kp-pdp .kp-charlist li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start;
  font-size: 16px; line-height: 1.55; color: var(--ink);
}
body.kp-body .kp-pdp .kp-charlist li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 8px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-charlist b { font-weight: 600; }

/* ── Доставка и оплата: стопкой (Доставка, ниже Оплата) ── */
body.kp-body .kp-pdp .kp-deliv-stack { display: flex; flex-direction: column; gap: 26px; max-width: 620px; }
body.kp-body .kp-pdp .kp-deliv-h {
  margin: 0 0 10px; font-weight: 600; font-size: 15px; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
body.kp-body .kp-pdp .kp-deliv-h svg { color: var(--ink); }
body.kp-body .kp-pdp .kp-deliv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .kp-deliv-list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: 15px; line-height: 1.55; color: var(--ink); }
body.kp-body .kp-pdp .kp-deliv-list li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 8px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-deliv-list b { font-weight: 600; color: var(--ink); }

body.kp-body .kp-pdp .kp-pack-note { margin: 14px 0 0; font-size: 14px; color: var(--ink); line-height: 1.5; }

/* ── «Как мы работаем»: 5 шагов-карточек со стрелками-связками ──
   Источник: product.css .process-*. Адаптировано под канон: вес ≤700,
   БЕЗ letter-spacing, острые углы (без скруглений). */
body.kp-body .kp-pdp .kp-process-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  position: relative; align-items: stretch;
}
body.kp-body .kp-pdp .kp-process-step {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px;
  min-height: 196px; transition: border-color .18s, box-shadow .18s, transform .18s;
}
body.kp-body .kp-pdp .kp-process-step:hover {
  border-color: var(--ink); box-shadow: var(--shadow-card); transform: translateY(-2px);
}
body.kp-body .kp-pdp .kp-process-num {
  font-weight: 700; font-size: 30px; line-height: 1; color: var(--yellow);
  font-feature-settings: "tnum";
}
body.kp-body .kp-pdp .kp-process-icon {
  width: 40px; height: 40px; background: var(--fog); color: var(--ink);
  border-radius: 8px; display: grid; place-items: center;
}
body.kp-body .kp-pdp .kp-process-name {
  margin: 0; font-weight: 700; font-size: 14px; line-height: 1.25;
  text-transform: uppercase; color: var(--ink);
}
body.kp-body .kp-pdp .kp-process-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink);
}
/* стрелка-связка между шагами: БЕЛЫЙ круг с ЖЁЛТОЙ стрелкой (без жёлтого
   круга и без обводки), лежит в зазоре; мягкая тень для лёгкого подъёма */
body.kp-body .kp-pdp .kp-process-arrow {
  position: absolute; right: -18px; top: 36px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--yellow);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
body.kp-body .kp-pdp .kp-process-arrow svg { width: 20px; height: 20px; }
body.kp-body .kp-pdp .kp-process-step:last-child .kp-process-arrow { display: none; }

/* ── Частые вопросы: аккордеон (single-open), без letter-spacing ──
   Источник: styles.css .faq-*. Острые углы, текст чёрный, фон-плитка
   контрастирует с полосой (на белой полосе — fog, на fog — paper). */
body.kp-body .kp-pdp .kp-faq { display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .kp-faq-item {
  background: var(--fog); border: 1px solid transparent; overflow: hidden;
  transition: background .18s, border-color .18s;
}
body.kp-body .kp-pdp .kp-det--alt .kp-faq-item { background: var(--paper); border-color: var(--line); }
body.kp-body .kp-pdp .kp-faq-item.is-open,
body.kp-body .kp-pdp .kp-det--alt .kp-faq-item.is-open { background: var(--yellow-soft); border-color: var(--yellow); }
body.kp-body .kp-pdp .kp-faq-q {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 18px 22px; font: inherit; color: var(--ink);
}
body.kp-body .kp-pdp .kp-faq-num { font-weight: 700; font-size: 14px; color: var(--ink-3); font-feature-settings: "tnum"; }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-num { color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-qtext { font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-toggle {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
  background: var(--paper); border: 1px solid var(--line);
}
body.kp-body .kp-pdp .kp-faq-toggle::before,
body.kp-body .kp-pdp .kp-faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transform: translate(-50%, -50%);
}
body.kp-body .kp-pdp .kp-faq-toggle::before { width: 12px; height: 2px; }   /* горизонталь (всегда) */
body.kp-body .kp-pdp .kp-faq-toggle::after  { width: 2px; height: 12px; }   /* вертикаль → исчезает при open */
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle { background: var(--ink); border-color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle::before { background: var(--yellow); }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle::after { display: none; }
body.kp-body .kp-pdp .kp-faq-a-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-a-wrap { max-height: 600px; }
body.kp-body .kp-pdp .kp-faq-a { margin: 0; padding: 0 22px 22px 56px; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* ── Похожие товары: сетка карточек .kp-prod (5 в ряд) ── */
body.kp-body .kp-pdp .kp-sim-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* ── адаптив: на узких — одна колонка, sticky выключаем ── */
@media (max-width: 1024px) {
  body.kp-body .kp-pdp .kp-sim-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  body.kp-body .kp-pdp .kp-det { padding: 40px 0; }
  body.kp-body .kp-pdp .kp-det-h { font-size: 22px; }
  body.kp-body .kp-pdp .kp-det2 { grid-template-columns: 1fr; gap: 32px; }
  body.kp-body .kp-pdp .kp-det2-aside { position: static; top: auto; }
  body.kp-body .kp-pdp .kp-process-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  body.kp-body .kp-pdp .kp-process-step { min-height: 0; }
  body.kp-body .kp-pdp .kp-process-arrow { display: none; }
}
@media (max-width: 700px) {
  body.kp-body .kp-pdp .kp-sim-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.kp-body .kp-pdp .kp-faq-q { padding: 16px; gap: 12px; }
  body.kp-body .kp-pdp .kp-faq-qtext { font-size: 16px; }
  body.kp-body .kp-pdp .kp-faq-a { padding: 0 16px 16px 44px; font-size: 15px; }
}
@media (max-width: 560px) {
  body.kp-body .kp-pdp .kp-process-row { grid-template-columns: 1fr; }
}

/* ─────────── ex-patch-9.2-crumbs.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.2 — Хлебные крошки: ЕДИНЫЙ компонент для всего сайта.
   Источник: Claude-design nav.crumbs — серые ссылки (#3D3D3D) +
   жёлтая точка-разделитель «•». Рендер — kp_render_crumbs() (inc/helpers.php),
   используется на странице товара, категории, коллекции, вишлиста.
   Кладётся ВНУТРЬ .kp-container (выравнивание по контенту).
   Без letter-spacing; вес ≤ 600.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 0; font-size: 17px; line-height: 1.3;
}
body.kp-body .kp-crumbs-link {
  color: var(--ink-2, #3D3D3D); text-decoration: none; transition: color .15s;
}
body.kp-body .kp-crumbs-link:hover { color: var(--ink, #0A0A0A); }
body.kp-body .kp-crumbs-sep {
  color: var(--yellow); font-size: 24px; line-height: 1;
}
body.kp-body .kp-crumbs-cur { color: var(--ink, #0A0A0A); }

@media (max-width: 700px) {
  body.kp-body .kp-crumbs { font-size: 15px; gap: 8px; padding: 12px 0; }
  body.kp-body .kp-crumbs-sep { font-size: 20px; }
}

/* ─────────── ex-patch-9.3-callmodal.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.3 — Модалка «Рассчитать тираж» (обратный звонок).
   Дизайн: проект Omlet (скриншот). Белая карточка со скруглением, поля
   с рамкой, чёрная кнопка-пилюля, снизу мессенджеры. БЕЗ letter-spacing.
   Скоуп — body.kp-body .kp-cm-*. Рендер — inc/callback-modal.php (wp_footer).
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-cm-scrim {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(10, 10, 10, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
body.kp-body .kp-cm-scrim[hidden] { display: none; }

body.kp-body .kp-cm-card {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 22px; padding: 36px 36px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
body.kp-body .kp-cm-x {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #F0F0F0; color: #0A0A0A;
  display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-cm-x:hover { background: #E2E2E2; }

body.kp-body .kp-cm-h {
  margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.1; color: #0A0A0A;
}
body.kp-body .kp-cm-lead {
  margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #6B6B6B; max-width: 92%;
}

body.kp-body .kp-cm-field { display: block; margin-bottom: 16px; }
body.kp-body .kp-cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.kp-body .kp-cm-lbl {
  display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #0A0A0A;
}
body.kp-body .kp-cm-lbl em { color: var(--yellow, #FECE15); font-style: normal; }
body.kp-body .kp-cm-field input[type="text"],
body.kp-body .kp-cm-field input[type="email"],
body.kp-body .kp-cm-field textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid #E2E2E2; border-radius: 12px;
  padding: 14px 16px; font-size: 16px; font-family: inherit; color: #0A0A0A; background: #fff;
  transition: border-color .15s;
}
body.kp-body .kp-cm-field input::placeholder,
body.kp-body .kp-cm-field textarea::placeholder { color: #9A9A9A; }
body.kp-body .kp-cm-field input:focus,
body.kp-body .kp-cm-field textarea:focus { outline: none; border-color: #0A0A0A; }
body.kp-body .kp-cm-field textarea { resize: vertical; min-height: 84px; }

/* drop-зона «прикрепить макет» */
body.kp-body .kp-cm-drop {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px dashed #CFCFCF; border-radius: 12px; padding: 14px 16px; color: #6B6B6B;
  transition: border-color .15s, background .15s;
}
body.kp-body .kp-cm-drop:hover { border-color: #0A0A0A; background: #FAFAFA; }
body.kp-body .kp-cm-drop svg { flex-shrink: 0; color: #0A0A0A; }
body.kp-body .kp-cm-drop-text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
body.kp-body .kp-cm-drop-text b { font-weight: 600; color: #0A0A0A; font-size: 14px; }
body.kp-body .kp-cm-drop-text span { color: #9A9A9A; }
body.kp-body .kp-cm-file { margin-top: 8px; font-size: 13px; color: #0A0A0A; word-break: break-all; }

body.kp-body .kp-cm-agree {
  display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px;
  font-size: 13px; line-height: 1.45; color: #6B6B6B; cursor: pointer;
}
body.kp-body .kp-cm-agree input { margin-top: 2px; width: 18px; height: 18px; accent-color: #0A0A0A; flex-shrink: 0; }
body.kp-body .kp-cm-agree a { color: #0A0A0A; text-decoration: underline; }

body.kp-body .kp-cm-submit {
  width: 100%; border: 0; border-radius: 14px; background: #0A0A0A; color: #fff;
  font-size: 16px; font-weight: 600; padding: 17px; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-cm-submit:hover { background: #222; }
body.kp-body .kp-cm-submit:disabled { opacity: .6; cursor: default; }

body.kp-body .kp-cm-status { margin-top: 12px; font-size: 14px; line-height: 1.4; }
body.kp-body .kp-cm-status.is-ok { color: #2E7D32; }
body.kp-body .kp-cm-status.is-err { color: #C62828; }

body.kp-body .kp-cm-msgs { display: flex; gap: 10px; margin-top: 16px; }
body.kp-body .kp-cm-msg {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid #E2E2E2; border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 500;
  color: #0A0A0A; text-decoration: none; transition: border-color .15s, background .15s;
}
body.kp-body .kp-cm-msg:hover { border-color: #0A0A0A; background: #FAFAFA; }
body.kp-body .kp-cm-msg img { width: 20px; height: 20px; }

@media (max-width: 560px) {
  body.kp-body .kp-cm-card { padding: 28px 20px 22px; border-radius: 18px; }
  body.kp-body .kp-cm-h { font-size: 26px; }
  body.kp-body .kp-cm-msg span { display: none; }
  body.kp-body .kp-cm-row { grid-template-columns: 1fr; gap: 0; }
}

/* ─────────── ex-patch-9.4-order-table.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.4 — Таблица заказа товара (.kp-order).
   Эталон: kpromo-order-table.html (Nick). Матрица размеров со стоком/ценой
   на строку, степпер без рамки, итог + 2 кнопки. Цена на строку + бейдж +N ₽.
   Скоуп — body.kp-body .kp-pdp .kp-order. Шрифты наследуем от страницы.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-pdp .kp-order {
  --kp-ink:#16130C; --kp-accent:var(--yellow,#FECE15); --kp-surface:#FAF9F4;
  --kp-line:#EBE9E1; --kp-muted:#8C887D; --kp-danger:#C8442B; --kp-rctrl:11px;
  color:var(--kp-ink); width:100%;
}
body.kp-body .kp-pdp .kp-order * { box-sizing:border-box; }
body.kp-body .kp-pdp .kp-order .kp-num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ── Таблица ── */
body.kp-body .kp-pdp .kp-order .kp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.kp-body .kp-pdp .kp-matrix { width:100%; border-collapse:collapse; }
body.kp-body .kp-pdp .kp-matrix th { text-align:right; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--kp-muted); font-weight:600; padding:0 0 10px; border-bottom:1px solid var(--kp-line); white-space:nowrap; }
body.kp-body .kp-pdp .kp-matrix th.left, body.kp-body .kp-pdp .kp-matrix td.left { text-align:left; }
body.kp-body .kp-pdp .kp-matrix td { padding:12px 0; text-align:right; font-size:15px; border-bottom:1px solid var(--kp-line); vertical-align:middle; white-space:nowrap; }
body.kp-body .kp-pdp .kp-matrix tbody tr:last-child td { border-bottom:0; }
body.kp-body .kp-pdp .kp-matrix td.left { font-weight:700; }
body.kp-body .kp-pdp .kp-matrix tbody tr:hover td { background:var(--kp-surface); }
body.kp-body .kp-pdp .kp-matrix th:not(.left), body.kp-body .kp-pdp .kp-matrix td:not(.left) { padding-left:14px; }
body.kp-body .kp-pdp .kp-size-stock.low { color:var(--kp-danger); }
body.kp-body .kp-pdp .kp-size-out { color:var(--kp-muted); }

/* ── Цена + дельта ── */
body.kp-body .kp-pdp .kp-price.diff { font-weight:700; color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-delta { display:inline-block; font-size:11px; font-weight:700; line-height:1; padding:3px 7px; margin-left:7px; border-radius:999px; background:rgba(254,206,21,.22); color:var(--kp-ink); vertical-align:middle; }

/* ── Степпер (без рамки, чёрные кружки −/+) ── */
body.kp-body .kp-pdp .kp-stepper { display:inline-flex; align-items:center; gap:10px; }
body.kp-body .kp-pdp .kp-stepper button { flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%; background:var(--kp-ink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
body.kp-body .kp-pdp .kp-stepper button:hover:not(:disabled) { background:var(--kp-accent); color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-stepper button:disabled { background:#EBE9E1; color:#fff; cursor:not-allowed; }
body.kp-body .kp-pdp .kp-stepper button svg { width:11px; height:11px; display:block; }
body.kp-body .kp-pdp .kp-qty { width:78px; border:0; text-align:center; font-size:19px; font-weight:700; color:var(--kp-ink); background:transparent; -moz-appearance:textfield; appearance:textfield; padding:0; }
body.kp-body .kp-pdp .kp-qty::-webkit-inner-spin-button, body.kp-body .kp-pdp .kp-qty::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; display:none; }
body.kp-body .kp-pdp .kp-qty:focus { outline:0; }
body.kp-body .kp-pdp .kp-stepper.is-disabled { opacity:.45; }

/* ── Подсказки ── */
body.kp-body .kp-pdp .kp-order-hint { font-size:12.5px; color:var(--kp-muted); margin-top:12px; }
body.kp-body .kp-pdp .kp-order-hint.warn { color:var(--kp-danger); }
body.kp-body .kp-pdp .kp-order-note { font-size:12.5px; color:var(--kp-muted); margin-top:6px; }

/* ── Итого ── */
body.kp-body .kp-pdp .kp-order .kp-summary { display:flex; align-items:baseline; justify-content:space-between; gap:16px; background:var(--kp-surface); border-radius:var(--kp-rctrl); padding:14px 16px; margin:16px 0 18px; }
body.kp-body .kp-pdp .kp-summary .s-lbl { font-size:13px; color:var(--kp-muted); }
body.kp-body .kp-pdp .kp-summary .s-qty { font-weight:700; }
body.kp-body .kp-pdp .kp-summary .s-total { font-size:26px; font-weight:700; letter-spacing:-.01em; }

/* ── Кнопки ── */
body.kp-body .kp-pdp .kp-order .kp-actions { display:flex; gap:12px; }
body.kp-body .kp-pdp .kp-actions button, body.kp-body .kp-pdp .kp-actions a { flex:1; height:54px; border-radius:var(--kp-rctrl); font-size:15px; font-weight:700; cursor:pointer; transition:filter .15s, background .15s, color .15s; border:1.5px solid var(--kp-ink); display:flex; align-items:center; justify-content:center; text-decoration:none; }
body.kp-body .kp-pdp .kp-btn-cart { background:#fff; color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-btn-cart:hover, body.kp-body .kp-pdp .kp-btn-cart.is-added { background:var(--kp-ink); color:#fff; }
body.kp-body .kp-pdp .kp-btn-primary { background:var(--kp-accent); color:var(--kp-ink); border-color:var(--kp-accent); }
body.kp-body .kp-pdp .kp-btn-primary:hover { filter:brightness(.95); }

@media (max-width:480px) {
  body.kp-body .kp-pdp .kp-order .kp-actions { flex-direction:column; }
  body.kp-body .kp-pdp .kp-summary .s-total { font-size:22px; }
}

/* ════════════════════════════════════════════════════════════════════
   ПЕРЕБИВКА темы Woodmart — она агрессивно стилизует любые <button>/<a>
   (раздувает степперы в чёрные круги, красит кнопки). Бьём !important.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-pdp .kp-order .kp-stepper button {
  width:30px !important; height:30px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important; border-radius:50% !important;
  background:var(--kp-ink) !important; color:#fff !important; box-shadow:none !important;
  line-height:1 !important; letter-spacing:0 !important; text-transform:none !important; font-size:0 !important;
}
body.kp-body .kp-pdp .kp-order .kp-stepper button:hover:not(:disabled) { background:var(--kp-accent) !important; color:var(--kp-ink) !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper button:disabled { background:#EBE9E1 !important; color:#fff !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper button svg { width:11px !important; height:11px !important; display:block !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper .kp-qty { width:78px !important; box-shadow:none !important; }

body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart,
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary {
  height:54px !important; border-radius:var(--kp-rctrl) !important; min-width:0 !important;
  text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; font-size:15px !important; font-weight:700 !important;
}
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart { background:#fff !important; color:var(--kp-ink) !important; border:1.5px solid var(--kp-ink) !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart:hover,
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart.is-added { background:var(--kp-ink) !important; color:#fff !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary { background:var(--kp-accent) !important; color:var(--kp-ink) !important; border:1.5px solid var(--kp-accent) !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary:hover { filter:brightness(.95) !important; }

/* ─────────── ex-patch-9.5-contacts.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.5-contacts.css — Страница «Контакты» (/kontakty/, page-kontakty.php)
 *
 * Скоуп строго body.kp-body .kp-contacts-* — в WC/Woodmart не утекает.
 * Цвета/шрифт — токены дизайн-системы с fallback (как patch-6.7): если токен
 * в main.css есть, берётся он (единый стиль); если нет — разумный дефолт.
 * Заголовок H1 наследует .kp-cat-head-title (тот же, что на категориях) —
 * здесь его не переопределяем. Брейкпоинты: 1240 / 980 / 760 / 480.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Лид под H1 — 18px, ширина по контейнеру (унификация, правка Николая 16.06).
   Размер/ширина лида сведены к единому виду в patch-9.7; здесь держим цвет/интервал. ── */
body.kp-body .kp-contacts .kp-cat-head-lead {
    max-width: none;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2, #3D3D3D);
}

/* ── H2 секций (Реквизиты / Как добраться) — UPPERCASE 600, как H2 ДС ── */
body.kp-body .kp-contacts-h2 {
    font-weight: 600;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink, #0A0A0A);
}

/* ════ 3. КАНАЛЫ + ФОРМА ════════════════════════════════════════════════════ */
body.kp-body .kp-contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 8px 0 64px;
}

/* ── список каналов ── */
body.kp-body .kp-contacts-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-row {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-ic {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--fog, #F7F7F7);
    color: var(--ink, #0A0A0A);
    display: grid;
    place-items: center;
}
body.kp-body .kp-contacts-ic svg { width: 22px; height: 22px; display: block; }
body.kp-body .kp-contacts-k {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    margin-bottom: 4px;
}
body.kp-body .kp-contacts-v {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink, #0A0A0A);
}
body.kp-body a.kp-contacts-v:hover { color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-v-sm { font-size: 17px; font-weight: 600; }
body.kp-body .kp-contacts-sub {
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    margin-top: 3px;
}
body.kp-body .kp-contacts-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
body.kp-body .kp-contacts-chip {
    display: inline-flex;
    align-items: center;
}

/* ── форма заявки ── */
body.kp-body .kp-contacts-formwrap {
    background: var(--fog, #F7F7F7);
    border-radius: 12px;
    padding: 34px;
}
body.kp-body .kp-contacts-formhead {
    font-weight: 600;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-contacts-formlead {
    margin: 8px 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-contacts-field { display: block; margin-bottom: 16px; }
/* Ряд «Компания | Email» в форме «Оставить заявку» — класс УНИКАЛЬНЫЙ:
   .kp-contacts-row занят сеткой левой колонки (kp.css:5991), не переиспользовать! */
body.kp-body .kp-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { body.kp-body .kp-cf-row { grid-template-columns: 1fr; gap: 0; } }
body.kp-body .kp-contacts-lbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink, #0A0A0A);
    margin-bottom: 7px;
}
body.kp-body .kp-contacts-lbl em { color: var(--yellow, #FECE15); font-style: normal; }
body.kp-body .kp-contacts-form input,
body.kp-body .kp-contacts-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    padding: 14px 15px;
    border: 1px solid var(--line, #E5E5E5);
    border-radius: 8px;
    background: var(--paper, #FFFFFF);
    color: var(--ink, #0A0A0A);
    transition: .15s;
}
body.kp-body .kp-contacts-form textarea { min-height: 100px; resize: vertical; }
body.kp-body .kp-contacts-form input::placeholder,
body.kp-body .kp-contacts-form textarea::placeholder { color: var(--ink-3, #8A8A8A); }
body.kp-body .kp-contacts-form input:focus,
body.kp-body .kp-contacts-form textarea:focus { outline: none; border-color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-agree {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 6px 0 20px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-contacts-agree input { width: auto; margin-top: 2px; accent-color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-agree a { text-decoration: underline; text-decoration-color: var(--yellow, #FECE15); text-decoration-thickness: 2px; text-underline-offset: 2px; }
body.kp-body .kp-contacts-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 8px;
    background: var(--yellow, #FECE15);
    color: var(--ink, #0A0A0A);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .15s;
}
body.kp-body .kp-contacts-submit:hover { filter: brightness(1.04); transform: translateY(-1px); }
body.kp-body .kp-contacts-submit:active { transform: scale(.98); }
body.kp-body .kp-contacts-submit:disabled { opacity: .7; cursor: default; transform: none; }
body.kp-body .kp-contacts-status { margin-top: 12px; font-size: 14px; font-weight: 600; }
body.kp-body .kp-contacts-status.is-ok { color: #1a7a3c; }
body.kp-body .kp-contacts-status.is-err { color: #c2371f; }
body.kp-body .kp-contacts-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-3, #8A8A8A); }

/* ════ 4. РЕКВИЗИТЫ — светлая подложка (читаемо, в общем стиле) ═══════════════ */
body.kp-body .kp-contacts-req { padding: 8px 0 56px; }
body.kp-body .kp-req-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
    margin-top: 24px;
}
body.kp-body .kp-req-k {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    margin-bottom: 5px;
}
body.kp-body .kp-req-v { font-size: 17px; font-weight: 600; color: var(--ink, #0A0A0A); }
body.kp-body .kp-req-actions { margin-top: 32px; }
body.kp-body .kp-req-pdf {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--ink, #0A0A0A);
    color: var(--ink, #0A0A0A);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    transition: .15s;
}
body.kp-body .kp-req-pdf:hover { background: var(--yellow, #FECE15); color: var(--ink, #0A0A0A); }
body.kp-body .kp-req-pdf svg { width: 18px; height: 18px; }

/* ════ 5. КАРТА — во всю ширину окна (full-bleed) ════════════════════════════ */
body.kp-body .kp-contacts-map { padding: 8px 0 0; }
body.kp-body .kp-contacts-ori { margin-top: 2px; font-size: 15px; color: var(--ink-2, #3D3D3D); }
body.kp-body .kp-contacts-map-actions { margin: 16px 0 26px; }
body.kp-body .kp-contacts-route {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--ink, #0A0A0A);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    transition: .15s;
}
body.kp-body .kp-contacts-route:hover { background: var(--yellow, #FECE15); color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-route svg { width: 18px; height: 18px; }
body.kp-body .kp-contacts-map-embed {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: clamp(320px, 42vw, 460px);
    border-top: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ════ АДАПТИВ ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    body.kp-body .kp-contacts-grid { gap: 40px; }
    body.kp-body .kp-req-grid { gap: 22px 28px; }
}
@media (max-width: 760px) {
    body.kp-body .kp-contacts-grid { grid-template-columns: 1fr; gap: 36px; }
    body.kp-body .kp-req-grid { grid-template-columns: 1fr 1fr; }
    body.kp-body .kp-contacts-formwrap { padding: 26px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-req-grid { grid-template-columns: 1fr; }
    body.kp-body .kp-contacts-v { font-size: 18px; }
    body.kp-body .kp-contacts-row { gap: 14px; }
}

/* ─────────── ex-patch-9.6-doc.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.6-doc.css — Типографика контентных/юридических страниц (.kp-prose)
 *
 * Шаблон templates/page-kpromo-doc.php выводит the_content() в .kp-prose.
 * Используется для: Политика, Согласие, Пользовательское соглашение,
 * Доставка и оплата, О компании, Как заказать, Услуги нанесения.
 *
 * Скоуп строго body.kp-body .kp-prose — в WC/Woodmart не утекает.
 * Цвет/шрифт — токены ДС с fallback. Ширина строки ограничена для читаемости.
 * Брейкпоинты: 760 / 480.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-doc-body { padding: 8px 0 64px; }

body.kp-body .kp-prose {
    /* Ширина текста = ширина контейнера (правка Николая 16.06): без узкого
       предела, как и остальные блоки сайта. Если строки юр-текста покажутся
       длинноваты — вернуть комфортный предел (~820px). */
    max-width: none;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2, #3D3D3D);
}

/* Заголовки разделов */
body.kp-body .kp-prose h2 {
    margin: 40px 0 14px;
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.2;
    letter-spacing: .2px;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-prose h2:first-child { margin-top: 0; }
body.kp-body .kp-prose h3 {
    margin: 28px 0 10px;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    color: var(--ink, #0A0A0A);
}

/* Абзацы и списки */
body.kp-body .kp-prose p { margin: 0 0 16px; }
body.kp-body .kp-prose ul,
body.kp-body .kp-prose ol { margin: 0 0 18px; padding-left: 22px; }
body.kp-body .kp-prose li { margin-bottom: 8px; }
body.kp-body .kp-prose ul li { list-style: none; position: relative; }
body.kp-body .kp-prose ul li::before {
    content: "";
    position: absolute;
    left: -18px; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yellow, #FECE15);
}
body.kp-body .kp-prose ol { padding-left: 24px; }
body.kp-body .kp-prose ol li { padding-left: 4px; }
body.kp-body .kp-prose ol li::marker { color: var(--ink-3, #8A8A8A); font-weight: 600; }

body.kp-body .kp-prose strong { font-weight: 600; color: var(--ink, #0A0A0A); }
body.kp-body .kp-prose a {
    color: var(--ink, #0A0A0A);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
body.kp-body .kp-prose a:hover { color: var(--ink, #0A0A0A); background: var(--yellow-soft, #FFF4B8); }

/* Таблицы (доставка, методы нанесения, реквизиты) */
body.kp-body .kp-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 22px;
    font-size: 15px;
}
body.kp-body .kp-prose thead th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    padding: 10px 14px;
    border-bottom: 2px solid var(--ink, #0A0A0A);
}
body.kp-body .kp-prose tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #E5E5E5);
    vertical-align: top;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-prose tbody tr:hover { background: var(--fog, #F7F7F7); }

/* Адаптив */
@media (max-width: 760px) {
    body.kp-body .kp-prose { font-size: 15.5px; }
    body.kp-body .kp-prose h2 { margin-top: 32px; }
    body.kp-body .kp-prose table { font-size: 14px; }
    body.kp-body .kp-prose thead th,
    body.kp-body .kp-prose tbody td { padding: 9px 10px; }
}
@media (max-width: 480px) {
    /* узкие таблицы прокручиваем, чтобы не ломать вёрстку */
    body.kp-body .kp-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ─────────── ex-patch-9.7-unify.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.7-unify.css — Унификация по правкам Николая (16.06.2026).
 *
 * Грузится последним → перебивает базу порядком каскада (та же специфичность).
 *
 *   1) КАП ЗАГОЛОВКОВ ≤ 56px. Эталон — H1 на главной (56px). Заголовок
 *      категорий/контактов/документов (.kp-cat-head-title) был 64px на десктопе
 *      (patch-5.1) — приводим к 56px. Брейкпоинты ниже сохраняем 1:1 с patch-5.1,
 *      чтобы НЕ раздувать мобайл (иначе non-media правило перебило бы media-кап).
 *
 *   2) ФИКС ПРОТЁКШЕГО БЕЛОГО E-MAIL. В Custom CSS темы (Woodmart, инлайн
 *      <style id="wd-style-theme_settings_default-css">) висит правило
 *      `a[href="mailto:zakaz@kelvika.ru"]{color:#fff!important}` — задумано для
 *      e-mail В ВЕРХНЕЙ ПОЛОСКЕ, но селектор глобальный → красил ВСЕ e-mail
 *      ссылки сайта белым (контакты, .kp-prose, консультация в карточке товара) —
 *      белым по белому, нечитаемо. Возвращаем читаемый цвет на светлых блоках.
 *      Топбар (.kp-tb-item) и футер (.kp-footer-mail) сохраняют свой цвет —
 *      у них собственные !important-правила с большей специфичностью.
 *      `!important` здесь оправдан (ловушка №8): перебиваем РЕАЛЬНОЕ чужое
 *      !important-правило, спецификой 0,0,3,1 > 0,0,1,1.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Кап заголовков: .kp-cat-head-title 42px (дизайн-канон Futura PT) ─────── */
body.kp-body .kp-cat-head-title { font-size: 42px; line-height: 1.15; }

@media (max-width: 980px) { body.kp-body .kp-cat-head-title { font-size: 36px; } }
@media (max-width: 760px) { body.kp-body .kp-cat-head-title { font-size: 30px; } }
@media (max-width: 480px) { body.kp-body .kp-cat-head-title { font-size: 26px; } }

/* ── 2) Читаемый e-mail на светлых блоках (перебиваем протёкший белый !important) ── */
body.kp-body .kp-contacts-v[href^="mailto:"],
body.kp-body .kp-prose a[href^="mailto:"],
body.kp-body .pv-consult-line[href^="mailto:"] {
    color: var(--ink, #0A0A0A) !important;
}
/* e-mail в мобильном меню (drawer) — та же протечка, свой цвет строки */
body.kp-body .kp-mm-contact-row[href^="mailto:"] {
    color: var(--ink-2, #3D3D3D) !important;
}

/* ── 3) Лид/интро под заголовком — ЕДИНЫЙ размер 18px и ширина по контейнеру ───
 * Раньше размер «плясал»: контакты 18px (зажат 640px), категории 16px,
 * документы (интро-абзац) 16px. Сводим к 18px и снимаем лимит ширины.
 *   • .kp-cat-head-lead — лид категорий и контактов (контактам лимит снят в 9.5);
 *   • .kp-prose > p:first-child — ведущий интро-абзац документов (только если
 *     страница реально начинается с абзаца; формальные доки с <h2> в начале —
 *     напр. «Политика» — не трогаются).
 * ГЛАВНУЮ НЕ ЗАТРАГИВАЕМ: на ней лид — это .kp-hero-*, эти классы там не нужны.
 */
body.kp-body .kp-cat-head-lead { font-size: 18px; max-width: none; }
body.kp-body .kp-prose > p:first-child { font-size: 18px; }

/* Расширенный SEO-текст категории — по ширине контейнера (правка Николая 17.06),
   снимаем лимит 840px из patch-5.1:405, чтобы текст не сужался «абы как». */
body.kp-body .kp-cat-seo-body { max-width: none; }

/* ─────────── ex-patch-9.8-stock-order.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.8-stock-order.css — PDP: плашка наличия под ценой + строка «под заказ».
 *
 * Правка Николая (17.06): плашку наличия поднять сразу под цену; для товаров
 * «под заказ» (ondemand=true) показывать отдельную плашку и РАЗРЕШИТЬ заказ
 * (степпер активен — логика в content-single-product.php + inc/cart.php).
 *
 * Три состояния (.pv-stockline--*):
 *   • is-in    — «N шт. в наличии»   → зелёная (эталон существующей .pv-stock);
 *   • is-order — «под заказ · N дней» → ЯНТАРНАЯ/песочная (не красная: красный
 *                читается как «стоп/недоступно» и отпугивает от заявки — а нам
 *                нужно ровно обратное; янтарный = «изготовим, срок поставки»);
 *   • is-none  — «нет в наличии»      → нейтрально-серая (реально снятые товары).
 *
 * Скоуп строго body.kp-body .kp-pdp — в WC/Woodmart не утекает.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Плашка-пилюля под ценой (общий вид) ─────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    margin: -10px 0 2px;           /* подтянуть ближе к цене (у .pv-price mb 26px) */
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: normal;
}
body.kp-body .kp-pdp .pv-stockline-ic { display: inline-flex; flex-shrink: 0; }
body.kp-body .kp-pdp .pv-stockline-ic svg { display: block; }
body.kp-body .kp-pdp .pv-stockline-tx { font-variant-numeric: tabular-nums; }

/* ── В наличии — зелёная (как .pv-stock в patch-9.0) ─────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-in {
    background: rgba(124,179,66,.12);
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-pdp .pv-stockline--is-in .pv-stockline-ic { color: var(--eco, #7CB342); }

/* ── Под заказ — янтарная/песочная ──────────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-order {
    background: rgba(245,166,35,.14);
    color: #6E4E11;                /* тёмно-янтарный текст — читаемо на песочном */
}
body.kp-body .kp-pdp .pv-stockline--is-order .pv-stockline-ic { color: #D98A00; }

/* ── Нет в наличии — нейтрально-серая ───────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-none {
    background: var(--fog, #F2F2F2);
    color: var(--ink-3, #8A8A8A);
}
body.kp-body .kp-pdp .pv-stockline--is-none .pv-stockline-ic { color: var(--ink-3, #8A8A8A); }

/* ── Таблица заказа: ячейка «под заказ» — янтарный акцент (в тон плашке) ──────── */
body.kp-body .kp-pdp .kp-matrix .kp-size-order {
    color: #B9760A;
    font-weight: 700;
}

/* ─────────── ex-patch-9.9-no-capitalize.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.9-no-capitalize.css — Полный запрет text-transform:capitalize.
 *
 * Правка Николая (17.06): стиль «Каждое Слово С Заглавной» (Title Case) на сайте
 * НЕ используется нигде. Источник — родительская тема WoodMart (base.min.css
 * навешивает capitalize на <button> и часть компонентов); наши элементы без
 * своего text-transform его наследуют (заметно на FAQ карточки товара).
 *
 * Наш намеренный UPPERCASE задаётся классами .kp-*{text-transform:uppercase}
 * (специфичность ≥ 0,0,1,0) и здесь НЕ затрагивается.
 *
 * Скоуп строго body.kp-body — в WC/Woodmart UI (страницы без .kp-body) не течёт.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Сеть-страховка: любой <button> в нашем скоупе. :where() добавляет 0 к
 * специфичности → правило весит 0,0,0,1: перебивает голый button{capitalize}
 * WoodMart (тоже 0,0,0,1, но мы грузимся позже), и при этом ПРОИГРЫВАЕТ любому
 * нашему .kp-*{uppercase} — намеренный КАПС сохраняется. */
:where(body.kp-body) button { text-transform: none; }

/* FAQ на карточке товара: .kp-faq (вне .kp-sec-faq — patch-5.6 туда не достаёт).
 * Спецификация 0,0,3,0 — как у рабочего сброса на главной. */
body.kp-body .kp-faq .kp-faq-q,
body.kp-body .kp-faq .kp-faq-qtext { text-transform: none; }

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 09 · КОНТЕНТНЫЕ СТРАНИЦЫ: FAQ, ТЕХТРЕБОВАНИЯ, ФАЙЛЫ PDP, БРЕНД-УНИФИКАЦИЯ, ЧИСТКА КАТЕГОРИИ (быв. 10.0–10.4)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-10.0-faq.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.0-faq.css — страница «Частые вопросы» (/faq/).
 *
 * Стиль = стиль ГЛАВНОЙ. Каждый раздел — двухколоночный блок (.kp-faq-grid:
 * слева .kp-faq-side с .kp-sec-kicker/.kp-sec-title/.kp-sec-bar, справа Q&A).
 * Типографику аккордеона и сетку даёт класс .kp-sec-faq (patch-5.6/5.9) +
 * база main.css:489-501. Здесь — только чередование фона блоков, контраст
 * карточек на тёмном бэнде, plus/minus-глиф тоггла, sticky-чипы и хедер/CTA.
 * Скоуп — body.kp-body .kp-faqp / .kp-faqp-band. Без !important.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Хедер страницы (стиль секции главной) ────────────────────────────────── */
body.kp-body .kp-faqp-hero { padding: 40px 0 14px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-lead {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2, #4a4a4a);
    margin: 18px 0 0;
}

/* ── Sticky-навигация по разделам (чипы-якоря) ────────────────────────────────
 * top = высота липкой шапки .kp-snav-wrap (56px с 06.07 — border-bottom снят,
 * см. секцию правок 06.07); точный офсет кликов считается в JS (header+nav).
 * Чипы — компонент .kp-cat-chip категории.
 */
body.kp-body .kp-faqp-nav {
    position: sticky;
    top: 56px;
    z-index: 40;
    background: var(--paper, #fff);
    border-bottom: 1px solid var(--line, #ececec);
    padding: 12px 0;
}
body.kp-body .kp-faqp-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Блоки разделов: чередование фона ─────────────────────────────────────────
 * .kp-sec даёт padding 80px и белый фон; ужимаем и красим каждый второй в fog.
 * scroll-margin-top — чтобы заголовок не уезжал под sticky-чипы при переходе.
 */
body.kp-body .kp-faqp-band { padding: 56px 0; scroll-margin-top: 130px; }
body.kp-body .kp-faqp-band--alt { background: var(--fog, #f7f7f7); }

/* Контраст карточек аккордеона: на fog-бэнде карточки делаем белыми
 * (иначе fog-карточка на fog-фоне сливается), тоггл-кружок — fog.
 * Открытая карточка остаётся жёлтой на обоих бэндах (выше специфичность). */
body.kp-body .kp-faqp-band--alt .kp-faq-item { background: var(--paper, #fff); }
body.kp-body .kp-faqp-band--alt .kp-faq-item.is-open { background: var(--yellow-soft, #fff7d6); }
body.kp-body .kp-faqp-band--alt .kp-faq-toggle { background: var(--fog, #f7f7f7); }

/* ── Ответ: отступы (база .kp-faq-a без паддинга) ─────────────────────────── */
body.kp-body .kp-faqp .kp-faq-a {
    padding: 0 24px 22px 66px;   /* левый = под текст вопроса, мимо номера */
    margin: 0;
}

/* ── Глиф тоггла — plus → minus, без иконки внутри (база main.css даёт круг) ── */
body.kp-body .kp-faqp .kp-faq-toggle { position: relative; }
body.kp-body .kp-faqp .kp-faq-toggle::before,
body.kp-body .kp-faqp .kp-faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink, #0a0a0a);
    border-radius: 2px;
}
body.kp-body .kp-faqp .kp-faq-toggle::before { width: 12px; height: 2px; }
body.kp-body .kp-faqp .kp-faq-toggle::after  { width: 2px; height: 12px; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::after  { display: none; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::before { background: var(--yellow, #FECE15); }

/* ── Нижний CTA ───────────────────────────────────────────────────────────── */
body.kp-body .kp-faqp-cta { padding: 8px 0 64px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--fog, #f7f7f7);
    border-radius: var(--radius, 16px);
    padding: 32px 36px;
}
body.kp-body .kp-faqp-cta-title { font-size: 24px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 6px 0 8px; }
body.kp-body .kp-faqp-cta-sub   { font-size: 16px; line-height: 1.5; color: var(--ink-2, #4a4a4a); margin: 0; max-width: 46ch; }
body.kp-body .kp-faqp-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-faqp-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    text-decoration: none;
}
body.kp-body .kp-faqp-cta-phone svg { stroke: var(--yellow, #FECE15); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-faqp-nav { padding: 10px 0; }
    /* На узком — горизонтальный скролл чипов вместо переноса в много рядов. */
    body.kp-body .kp-faqp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.kp-body .kp-faqp-chips::-webkit-scrollbar { display: none; }
    body.kp-body .kp-faqp-band { padding: 40px 0; }
    body.kp-body .kp-faqp .kp-faq-a { padding: 0 16px 18px 16px; }
    body.kp-body .kp-faqp-cta-inner { padding: 24px 20px; }
}

/* ─────────── ex-patch-10.1-tech.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.1-tech.css — страница «Требования к макетам» (/trebovaniya-k-maketam/).
 *
 * Скелет (хедер/sticky-чипы/чередующиеся блоки/CTA) переиспользуется из
 * patch-10.0-faq.css (классы .kp-faqp-*) — страница носит обе обёртки
 * .kp-faqp .kp-trp. Здесь — только tech-контент: списки с жёлтыми маркерами,
 * чек-листы, сетка карточек методов, блок шаблонов. Жёлтый — акцент (маркеры,
 * полосы), без подложки за текстом. Скоуп body.kp-body .kp-trp.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Список «термин — пояснение» с жёлтым маркером-точкой ──────────────────── */
body.kp-body .kp-trp .kp-trp-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
body.kp-body .kp-trp .kp-trp-list li { position: relative; padding-left: 28px; }
body.kp-body .kp-trp .kp-trp-list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-list li strong {
    display: block; font-size: 16px; font-weight: 700; color: var(--ink, #0a0a0a); margin-bottom: 3px;
}
body.kp-body .kp-trp .kp-trp-list li span {
    display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}

/* ── Чек-лист с жёлтым кружком и тёмной галочкой ───────────────────────────── */
body.kp-body .kp-trp .kp-trp-checklist {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
}
body.kp-body .kp-trp .kp-trp-checklist li {
    position: relative; padding-left: 32px;
    font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-checklist li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 19px; height: 19px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-checklist li::after {
    content: ""; position: absolute; left: 6px; top: 6px;
    width: 5px; height: 9px; border: solid var(--ink, #0a0a0a); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Правая колонка двухколоночных блоков (без flex-gap аккордеона) ────────── */
body.kp-body .kp-trp .kp-faq-list-col { align-self: start; }

/* ── Методы: полноширинный заголовок + сетка карточек ─────────────────────── */
body.kp-body .kp-trp .kp-trp-head { max-width: 760px; margin: 0 0 36px; }
body.kp-body .kp-trp .kp-trp-methods {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
body.kp-body .kp-trp .kp-trp-card {
    background: var(--fog, #f7f7f7);           /* на белом бэнде — fog для контраста */
    border: 1px solid var(--line, #ececec);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
/* на fog-бэнде — белые карточки */
body.kp-body .kp-faqp-band--alt .kp-trp-card { background: var(--paper, #fff); }

body.kp-body .kp-trp .kp-trp-card-name { font-size: 17px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 0; }
body.kp-body .kp-trp .kp-trp-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.kp-body .kp-trp .kp-trp-specs li {
    position: relative; padding-left: 15px;
    font-size: 14px; line-height: 1.4; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-specs li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-card-use {
    margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #ececec);
    font-size: 13px; line-height: 1.4; color: var(--ink-3, #9a9a9a);
}

/* ── Блок «Шаблоны макетов» ───────────────────────────────────────────────── */
body.kp-body .kp-trp .kp-trp-download-note { font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a); margin: 0 0 20px; }
body.kp-body .kp-trp .kp-trp-download-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-trp .kp-trp-download-mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink, #0a0a0a); text-decoration: none; }
body.kp-body .kp-trp .kp-trp-download-mail svg { stroke: var(--yellow, #FECE15); }
body.kp-body .kp-trp .kp-trp-download-soon { margin: 18px 0 0; font-size: 13px; color: var(--ink-3, #9a9a9a); }

/* ── Адаптив сетки методов ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    body.kp-body .kp-trp .kp-trp-head { margin-bottom: 26px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: 1fr; }
}

/* ─────────── ex-patch-10.2-pdp-files.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.2-pdp-files.css — блок «Файлы для скачивания» в правой колонке PDP.
 *
 * Источник данных:
 *   • «Конструктор макета» — per-article файл Проект111 (мета _kp_maket_pdf /
 *     _kp_maket_cdr), заполняется серверным импортом (перенос по артикулам).
 *   • «Технические требования» — глобальный PDF (опция kp_tech_req_pdf) либо
 *     ссылка на страницу /trebovaniya-k-maketam/.
 *
 * Стиль согласован с .pv-msg / .pv-consult (patch-9.0): белые карточки-строки,
 * 1px var(--line), ховер — тёмная рамка + лёгкий подъём. Жёлтый НЕ используется —
 * акцент даёт красный бейдж типа файла (PDF), как на референсе Nick. Скоуп .kp-pdp.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-pdp .pv-files { margin-bottom: 20px; }
body.kp-body .kp-pdp .pv-files .pv-lbl { display: block; margin-bottom: 12px; }

body.kp-body .kp-pdp .pv-files-list { display: flex; flex-direction: column; gap: 10px; }

/* строка-кнопка файла */
body.kp-body .kp-pdp .pv-file {
    display: flex; align-items: center; gap: 13px;
    min-height: 56px; padding: 10px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    text-decoration: none; color: var(--ink);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
body.kp-body .kp-pdp .pv-file:hover {
    border-color: var(--ink); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
/* primary (глобальные техтребования) — рамка потемнее, как на референсе */
body.kp-body .kp-pdp .pv-file.is-primary { border-width: 1.5px; border-color: var(--ink); }

/* бейдж типа файла */
body.kp-body .kp-pdp .pv-file-badge {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 26px; padding: 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    border-radius: 7px;
    background: #FDEAEA; color: #D6342C;            /* PDF — красный (по умолчанию) */
}
body.kp-body .kp-pdp .pv-file-badge--cdr { background: #E4F4E8; color: #1E8E3E; } /* CDR — зелёный (CorelDRAW), не голубой */
body.kp-body .kp-pdp .pv-file-badge--web { background: var(--fog); color: var(--ink-3); }

body.kp-body .kp-pdp .pv-file-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.kp-body .kp-pdp .pv-file-ic {
    flex: none; display: inline-flex; color: var(--ink-3); transition: color .15s;
}
body.kp-body .kp-pdp .pv-file:hover .pv-file-ic { color: var(--ink); }

@media (max-width: 480px) {
    body.kp-body .kp-pdp .pv-file { min-height: 52px; padding: 9px 13px; gap: 11px; }
    body.kp-body .kp-pdp .pv-file-name { font-size: 14px; }
}

/* ── Лайтбокс галереи (клик по главному фото открывает полноэкранный просмотр) ── */
body.kp-body .kp-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    padding: 24px; background: rgba(10, 10, 10, .92); cursor: zoom-out;
}
body.kp-body .kp-lightbox.is-open { display: flex; }
body.kp-body .kp-lightbox img {
    max-width: 95vw; max-height: 92vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
}
body.kp-body .kp-lightbox-close {
    position: fixed; top: 16px; right: 22px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* ── Кнопка избранного в галерее PDP: рабочий Woodmart-wishlist, вид и состояния —
 * 1-в-1 как на карточках каталога (patch-7.5/7.6, но те скоуплены на .kp-prod-imgwrap).
 * Гасим карточное абсолютное позиционирование + родную жёлтую галку .wd-added-icon
 * (это и было «сердечко поверх сердечка»), на .added — красная заливка + залитое сердце. ── */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav {
    position: static; inset: auto; top: auto; right: auto; margin: 0; padding: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    display: grid; place-items: center; color: var(--ink-3); line-height: 0;
    transition: background .15s, border-color .15s, color .15s;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: inherit; text-decoration: none; border-radius: 50%; padding: 0; background: transparent;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .kp-prod-fav-svg { width: 18px; height: 18px; display: block; transition: fill .15s; }
/* прячем родную check-иконку Woodmart (жёлтая галка) и служебный текст */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .wd-added-icon { display: none; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .wd-action-text,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .kp-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav.wd-wishlist-btn::before,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav.wd-wishlist-btn > a::before { display: none !important; }
/* hover + .added → красная заливка, белое залитое сердце */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:hover,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:has(a.added) { background: var(--hot); border-color: var(--hot); color: #fff; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:hover > a,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a:hover,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a.added { color: #fff; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a.added .kp-prod-fav-svg { fill: currentColor; }

/* ── Плашка наличия + пилюля минимального тиража в одну строку ── */
body.kp-body .kp-pdp .pv-stockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
body.kp-body .kp-pdp .pv-stockrow .pv-stockline { margin: 0; }
/* Условия «под заказ» поставщика (минималка бренда/склада) — сразу под плашкой, 07.10.2026 */
body.kp-body .kp-pdp .pv-ordnote { margin: 10px 0 0; max-width: 560px; font-size: 14px; line-height: 1.45; color: var(--ink-2, #3D3D3D); }
body.kp-body .kp-pdp .pv-minpill {
    display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
    background: var(--fog, #F2F1EC); color: var(--ink-2, #4A4A46);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/* ── Бейдж «ЧЗ» (Честный знак) в галерее PDP — спокойный слейт, не конкурирует с маркетинговыми ── */
body.kp-body .kp-pdp .gal-badge.gb-chz { background: #3F4D63; color: #fff; }

/* ── Стрелки лайтбокса (перелистывание между фото галереи) ── */
body.kp-body .kp-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; display: none; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 34px; line-height: 1; cursor: pointer; transition: background .15s; z-index: 1;
}
body.kp-body .kp-lightbox.is-multi .kp-lightbox-nav { display: flex; }
body.kp-body .kp-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
body.kp-body .kp-lightbox-prev { left: 18px; }
body.kp-body .kp-lightbox-next { right: 18px; }
@media (max-width: 600px) {
    body.kp-body .kp-lightbox-nav { width: 42px; height: 42px; font-size: 28px; }
    body.kp-body .kp-lightbox-prev { left: 6px; }
    body.kp-body .kp-lightbox-next { right: 6px; }
}

/* ─────────── ex-patch-10.3-brand-unify.css ─────────── */
/* ============================================================
 * PATCH 10.3 — приведение блоков к фирменному стилю
 *
 *  Категория, блок «ХИТЫ КАТЕГОРИИ» (.kp-cat-hits):
 *    • шапка как у карусели «НОВИНКИ» на главной (patch-5.3): слева стопкой
 *      дескриптор + заголовок + жёлтая полоса (.kp-sec-bar), стрелки справа;
 *    • стандартный верхний отступ между блоками (как .kp-sec = 80px),
 *      чтобы блок не прилипал вплотную к секции выше.
 *
 *  Карточка товара, блок «Частые вопросы» переведён на двухколоночный паттерн
 *  главной (.kp-faq-grid / .kp-faq-side / .kp-sec-*) — он на глобальных классах
 *  main.css, отдельный CSS не нужен.
 *
 *  Скоуп: body.kp-body .kp-cat-hits.
 * ============================================================ */

/* Шапка хитов: дескриптор сверху, заголовок, полоса — слева; стрелки — справа. */
body.kp-body .kp-cat-hits .kp-prods-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
}

/* Отступы: сверху 80px (как между секциями .kp-sec), снизу 56px — чтобы карточки
 * не прилипали вплотную к блоку ниже. */
body.kp-body .kp-cat-hits{
    padding-top:80px;
    padding-bottom:56px;
}

@media (max-width:768px){
    /* На узких экранах шапку складываем: заголовок над стрелками. */
    body.kp-body .kp-cat-hits .kp-prods-head{
        align-items:flex-start;
    }
    body.kp-body .kp-cat-hits{
        padding-top:56px;
        padding-bottom:40px;
    }
}

/* ─────────── ex-patch-10.4-category-cleanup.css ─────────── */

/* 1. Обычный регистр на сорте + именах опций фильтров (цвет/наличие/материал/
 *    бренд/подборки и т.д. — все .kp-cat-fpill-*). */
body.kp-body .kp-cat-fsort-pill,
body.kp-body .kp-cat-fsort-pill span,
body.kp-body .kp-cat-fsort-drop a,
body.kp-body [class*="kp-cat-fpill-"]{
    text-transform:none;
}

/* 2. Счётчик «Показано» под сеткой: слева, приглушённый, с отступом сверху. */
body.kp-body .kp-cat-rbar-count--bottom{
    margin-top:28px;
    color:var(--ink-3,#8A8A8A);
    font-size:14px;
}

/* 3. Верхняя rbar убрана — небольшой отступ сетки от панели фильтров. */
body.kp-body .kp-cat-grid-sec{
    padding-top:8px;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 10 · ВИДЖЕТЫ, ФУТЕР-РЕКВИЗИТЫ, МОБ. ФИЛЬТРЫ, РАЗМЕРНАЯ СЕТКА, ЛОГО, ПОИСК v2, МЕГА-МЕНЮ v2 (быв. 11.0–11.8)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-11.0-widgets.css ─────────── */
/* ============================================================
 * PATCH 11.0 — виджеты (Goal-батч 20.06):
 *   1. Плавающий контакт-виджет + кнопка «Наверх» (#19)
 *   2. Cookie-баннер 152-ФЗ (#8)
 *   3. Блок реквизитов в подвале (#8)
 * Токены берём из patch-8.0; для надёжности — фолбэки в var().
 * ============================================================ */

/* ───── 1. Контакт-виджет (вариант A — минимал-стек) ───── */
.cw{position:fixed;right:20px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:14px;z-index:50}
.cw-btn{position:relative;display:block;width:56px;height:56px;
        animation:cw-in .5s cubic-bezier(.2,.7,.3,1) backwards}
.cw-btn:nth-child(1){animation-delay:.05s}
.cw-btn:nth-child(2){animation-delay:.12s}
.cw-btn:nth-child(3){animation-delay:.19s}
.cw-btn:nth-child(4){animation-delay:.26s}
@keyframes cw-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cw-ic{width:56px;height:56px;border-radius:50%;background:var(--ink,#0A0A0A);color:#fff;
       display:grid;place-items:center;box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));
       transition:background .18s,color .18s,transform .18s}
.cw-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cw-btn:hover .cw-ic:not(.brand){background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);transform:scale(1.06)}
.cw-ic.brand svg{fill:#fff;stroke:none}
.cw-ic.tg{background:#019be5}
.cw-ic.max{background:linear-gradient(145deg,#4cf,#53e 66%,#93d)}
.cw-ic.max svg{width:31px;height:31px}
.cw-ic.tg svg{transform:translate(-1.2px,1px)}
.cw-btn:hover .cw-ic.brand{transform:scale(1.06)}
.cw-pill{position:absolute;right:68px;top:50%;transform:translateY(-50%) translateX(10px);
         background:var(--ink,#0A0A0A);color:#fff;border-radius:999px;padding:9px 18px;white-space:nowrap;
         box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));opacity:0;pointer-events:none;
         transition:opacity .18s,transform .18s;display:flex;flex-direction:column;justify-content:center}
.cw-pill .k{font-size:11px;font-weight:500;letter-spacing:.4px;color:#9a9a9a;line-height:1.2}
.cw-pill .v{font-size:14px;font-weight:700;letter-spacing:.2px;color:#fff;line-height:1.25}
.cw-btn:hover .cw-pill{opacity:1;transform:translateY(-50%) translateX(0)}
.cw-btn.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:-1;
    box-shadow:0 0 0 0 rgba(254,206,21,.55);animation:cw-pulse 2.4s ease-out infinite}
@keyframes cw-pulse{0%{box-shadow:0 0 0 0 rgba(254,206,21,.5)}70%{box-shadow:0 0 0 14px rgba(254,206,21,0)}100%{box-shadow:0 0 0 0 rgba(254,206,21,0)}}
/* Скоуп body.kp-body ОБЯЗАТЕЛЕН: woodmart перебивает голый .cw-top своим
 * сбросом :is(.btn,.button,button,...){position:relative;display:inline-flex;
 * background:#F3F3F3;border-radius:0} — он той же специфичности (0,0,1,0), но
 * грузится позже. body.kp-body .cw-top = 0,0,2,1 → чисто выигрывает без !important.
 * transform: при появлении кнопка ВКРУЧИВАЕТСЯ (rotate -180°→0) + выезжает снизу. */
body.kp-body .cw-top{position:fixed;right:20px;bottom:22px;width:52px;height:52px;border:0;cursor:pointer;
        border-radius:50%;background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);
        box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));display:grid;place-items:center;z-index:50;
        opacity:0;transform:translateY(14px) rotate(-180deg);pointer-events:none;
        transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.28,.5,1),background .15s}
body.kp-body .cw-top svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.kp-body .cw-top:hover{background:var(--yellow-hover,#FFD933)}
body.kp-body .cw-top.show{opacity:1;transform:translateY(0) rotate(0);pointer-events:auto}

/* ───── 2. Cookie-баннер (по умолчанию скрыт, JS показывает) ───── */
.kp-cookie{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
           background:var(--ink,#0A0A0A);color:#fff;border-radius:var(--r,12px);
           box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));
           padding:9px 12px 9px 22px;max-width:620px;margin:0 auto;
           align-items:center;gap:16px}
.kp-cookie.is-visible{display:flex}
.kp-cookie-text{font-size:13px;line-height:1.4;color:#d8d8d8}
.kp-cookie-text a{color:var(--yellow,#FECE15);text-decoration:underline}
/* Скоуп body.kp-body: иначе woodmart-сброс :is(...button...) делает кнопку белой/квадратной (как было у .cw-top) */
body.kp-body .kp-cookie-btn{flex:0 0 auto;border:0;cursor:pointer;background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);
               font-weight:700;font-size:13px;padding:9px 22px;border-radius:10px;transition:background .15s;white-space:nowrap}
body.kp-body .kp-cookie-btn:hover{background:var(--yellow-hover,#FFD933)}

/* ───── 3. Реквизиты в подвале ───── */
.kp-footer-rekviz{font-size:12px;line-height:1.6;color:var(--ink-3,#8A8A8A);margin-top:6px}

/* ───── 4. «Все фильтры» ─────
   Интерим-заглушка (.kp-fbar-expanded, раскрытие ряда пилюль) удалена 06.07 —
   кнопка теперь открывает полноценный drawer (секция в конце файла). */

/* ───── Адаптив ───── */
@media (max-width:768px){
  .cw{right:14px;gap:12px}
  .cw-btn,.cw-ic{width:52px;height:52px}
  body.kp-body .cw-top{width:48px;height:48px;right:14px}
  /* 06.07.2026 (Вебвизор): колоночный баннер с кнопкой на всю ширину закрывал
     пол-экрана 320px вместе с ценой товара. Компакт: одна строка, мелкий текст. */
  .kp-cookie{left:8px;right:8px;bottom:8px;flex-direction:row;align-items:center;text-align:left;gap:10px;padding:8px 12px}
  .kp-cookie-text{font-size:11px;line-height:1.35}
  body.kp-body .kp-cookie-btn{width:auto;flex:0 0 auto;padding:8px 14px;font-size:12px}
}

/* ─────────── pickbar: sticky-CTA каталога (06.07.2026) ───────────
   Вывод Вебвизора дня 1 рекламы: целевые посетители листают пагинацию
   (до 19-й страницы) и уходят, не долистав до лид-формы. Бар появляется
   после скролла ~900px (template-parts/pickbar.php из archive-product.php),
   кнопка ведёт к .kp-cat-lead. z-index 59 — на 1 ниже cookie-баннера (60). */
.kp-pickbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:59;
            transform:translateY(110%);transition:transform .25s ease;
            background:var(--ink,#0A0A0A);color:#fff;
            box-shadow:0 -6px 24px rgba(0,0,0,.18);
            padding:10px 48px 10px 20px;align-items:center;gap:14px;justify-content:center}
.kp-pickbar.is-visible{transform:translateY(0)}
.kp-pickbar-text{font-size:14px;line-height:1.35;color:#d8d8d8}
.kp-pickbar-text strong{color:#fff;margin-right:6px}
body.kp-body .kp-pickbar-btn{flex:0 0 auto;border:0;cursor:pointer;background:var(--yellow,#FECE15);
            color:var(--ink,#0A0A0A);font-weight:700;font-size:13px;padding:10px 22px;
            border-radius:10px;transition:background .15s;white-space:nowrap}
body.kp-body .kp-pickbar-btn:hover{background:var(--yellow-hover,#FFD933)}
body.kp-body .kp-pickbar-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);
            border:0;background:transparent;color:#8A8A8A;font-size:22px;line-height:1;
            cursor:pointer;padding:6px 10px}
/* cookie-баннер виден → бар уступает ему место (класс ставит cookie-banner.php).
   С правки 06.07 (ночь) JS вообще не показывает бар при видимой куке — правило
   «один нижний слой за раз»; сдвиг остаётся страховкой. */
body.kp-has-cookie .kp-pickbar{bottom:64px}
/* бар виден → контакт-виджеты (.cw: телефон/TG/MAX/почта) приподнимаются, не перекрываются */
body.kp-pickbar-on .cw{transform:translateY(-56px);transition:transform .25s ease}
@media (max-width:768px){
  .kp-pickbar{padding:10px 40px 10px 12px;gap:10px}
  .kp-pickbar-text{font-size:12px}
  .kp-pickbar-text span{display:none} /* на мобильном — только сильная строка */
  body.kp-body .kp-pickbar-btn{padding:9px 14px;font-size:12px}
  body.kp-has-cookie .kp-pickbar{bottom:52px}
  body.kp-pickbar-on .cw{transform:translateY(-60px)}
}

/* ─────────── ex-patch-11.1-footer-rekviz.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 11.1 — Реквизиты ООО «К-ПРИНТ» одной строкой НАД разделителем футера.
   Было: реквизиты мелким текстом ПОД разделителем (внутри .kp-footer-copy).
   Стало: отдельная строка .kp-footer-rekviz-line между 5-колоночным рядом
   и нижним баром; разделитель (border-bottom) перенесён сюда с .kp-footer-row.
   Скоуп — body.kp-body .kp-footer. Суммарный вертикальный отступ сохранён.
   ════════════════════════════════════════════════════════════════════ */

/* Снимаем разделитель с ряда колонок и ужимаем его нижний отступ
   (был 48px → 16px, остаток отступа добирает сама строка реквизитов). */
body.kp-body .kp-footer .kp-footer-row {
  border-bottom: 0;
  padding-bottom: 16px;
}

/* Строка реквизитов = новый разделитель. .kp-container уже даёт ширину/центровку
   и горизонтальные поля — трогаем только вертикаль, цвет, выравнивание. */
body.kp-body .kp-footer .kp-footer-rekviz-line {
  padding-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .42);
  text-align: center;
  white-space: nowrap;            /* десктоп: строго одна строка */
}

/* Мобайл/планшет — разрешаем перенос, чтобы длинная строка не давала
   горизонтальный скролл. */
@media (max-width: 760px) {
  body.kp-body .kp-footer .kp-footer-rekviz-line {
    white-space: normal;
  }
}

/* ─────────── ex-patch-11.2-contacts-msg.css ─────────── */
/* ════════════════════════════════════════════════════════════════════
   PATCH 11.2 — Кнопки мессенджеров на странице «Контакты» = как в блоке
   «Нужна консультация?» на странице товара (.pv-msg, patch-9.0).
   Просьба Nick 23.06: «сделать такие же кнопки».
   Было (patch-9.5): чип с inset-обводкой 2px, без иконки, жёлтый ховер.
   Стало: белая кнопка + рамка --line + цветная иконка бренда 22px + текст,
   ховер — лёгкий подъём + тёмная рамка. Точное зеркало .pv-msg.
   Тот же селектор, что в patch-9.5 → грузится позже → перебивает.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-contacts-chip {
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;                 /* снять inset-обводку 2px из patch-9.5 */
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;                /* у .pv-msg трекинга нет */
  transition: all .15s;
}
body.kp-body .kp-contacts-chip img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 6px;
}
body.kp-body .kp-contacts-chip:hover {
  background: #fff;                 /* перебить жёлтый ховер из patch-9.5 */
  transform: translateY(-1px);
  border-color: var(--ink);
}

/* ─────────── ex-patch-11.3-cat-filters-mobile.css ─────────── */
/* ════════════════════════════════════════════════════════════════════════════
 * PATCH 11.3 — Мобильный фильтр каталога: выпадашки больше не обрезаются.
 *
 * БАГ (ROADMAP 23.06, «фильтр карточек не работает»):
 *   На ≤760px .kp-cat-fbar-left имел overflow-x:auto + flex-wrap:nowrap
 *   (горизонтальный скролл пилюль, patch-5.1:868). overflow-x:auto создаёт
 *   clipping-контекст (по спецификации overflow-y тоже становится auto) →
 *   абсолютная выпадашка .kp-cat-fpill-drop обрезалась по высоте и уезжала
 *   за правый край экрана. Вдобавок мобильное правило left:0;right:0
 *   (patch-6.9:151) анкерилось к УЗКОЙ пилюле, а не к контейнеру.
 *   Итог: тап по пилюле → она желтела (is-open), но панель выбора была
 *   невидима → пользователь видел «кнопка просто желтеет, фильтр не работает».
 *   Подтверждено в браузере на 390px: drop.right=480 при ширине вьюпорта 390.
 *
 * ФИКС:
 *   • Пилюли переносятся (flex-wrap:wrap, overflow:visible) — нет clipping.
 *   • Выпадашка анкерится к полноширинному .kp-cat-fbar-inner (а не к пилюле)
 *     и раскрывается панелью во всю ширину ПОД баром: left:0/right:0 → панель
 *     никогда не уходит за экран и не обрезается.
 *   • z-index поднят над плавающим виджетом мессенджеров (.cw, z-index:50).
 *   • «Применить» во всю ширину — крупный тач-таргет, не прячется под виджет.
 *
 * «ВСЕ ФИЛЬТРЫ» (.kp-cat-fpill-all): 06.07 стала РАБОЧЕЙ — открывает
 * drawer-панель (секция «ВСЕ ФИЛЬТРЫ (drawer)» в конце файла), скрытие снято.
 *
 * Скоуп строго .kp-cat-* / [data-kp-fpill-*]. patch-5.1 / 6.9 не редактируем
 * (перекрываем порядком загрузки + равной/большей специфичностью).
 * ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

    /* 1. Пилюли переносятся в строки; контейнер НЕ клиппит выпадашки. */
    body.kp-body .kp-cat-fbar-left {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 8px;
        padding-bottom: 0;
    }

    /* 2. Анкер выпадашки — полноширинный inner, не узкая пилюля.
     *    (.kp-cat-fpill[data-kp-fpill-toggle] держал position:relative —
     *    перебиваем тем же селектором, равная специфичность + порядок ниже.) */
    body.kp-body .kp-cat-fbar-inner {
        position: relative;
    }
    body.kp-body .kp-cat-fpill[data-kp-fpill-toggle] {
        position: static;
    }

    /* 3. Выпадашка (и обычная, и «Цвет» — у обеих класс .kp-cat-fpill-drop) —
     *    панель во всю ширину под баром, поверх виджета мессенджеров (.cw=50).
     *    display НЕ трогаем: открытие управляется .is-open в patch-6.9. */
    body.kp-body .kp-cat-fpill .kp-cat-fpill-drop {
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 6px;
        min-width: 0;
        max-width: none;
        z-index: 60;
    }

    /* 4. «Применить» во всю ширину — не прячется под плавающий виджет. */
    body.kp-body .kp-cat-fpill-drop-foot {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    body.kp-body .kp-cat-fpill-apply {
        width: 100%;
        margin-left: 0;
    }
}

/* ─────────── ex-patch-11.4-sizechart.css ─────────── */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 11.4 — Таблица размеров (размерная сетка tablemer П111).
 *
 * Источник данных: мета _kp_size_table (чистый HTML, наполняет
 * import_woo.py --sizetable-only из сырого catalogue.xml). Рендер:
 * woocommerce/content-single-product.php — триггер ПОД блоком «Методы нанесения»,
 * над матрицей заказа + скрытый <template>. Механика модалки:
 * assets/js/kp-sizechart.js (клон template → .kp-sizechart-modal в бэкдропе).
 *
 * Специфичность модальных правил поднята префиксом .kp-sizechart-backdrop —
 * чтобы кнопочные/типографские сбросы Woodmart не перебивали позиционирование
 * (баг v1: кнопка закрытия уезжала влево серым квадратом на заголовок).
 * Futura PT — максимум 700.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Триггер (под «Методы нанесения», над матрицей) — фирменная кнопка ───────── */

.pv-sizechart-row { margin-top: 6px; }

/* Скоуп body.kp-body .pv-sizechart-row … — перебиваем дефолтный стиль кнопок
   Woodmart (он красил триггер серым). Специфичность 0,0,3,1 выигрывает. */
body.kp-body .pv-sizechart-row .kp-sizechart-trigger {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink, #0a0a0a);
    background: #fff;
    border: 1.5px solid var(--ink, #0a0a0a);
    border-radius: 10px;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger svg { flex: 0 0 auto; }

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:hover {
    background: var(--yellow, #FECE15);
    border-color: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* ───────── Бэкдроп ───────── */

.kp-sizechart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.58);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    animation: kp-sizechart-bd-in .15s ease-out;
}

@keyframes kp-sizechart-bd-in { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Модал — крупнее ───────── */

.kp-sizechart-backdrop .kp-sizechart-modal {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 30px 36px 28px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    animation: kp-sizechart-in .18s ease-out;
    box-sizing: border-box;
}

@keyframes kp-sizechart-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kp-sizechart-backdrop .kp-sizechart-modal:focus { outline: none; }

/* ───────── Кнопка закрытия — справа, тёмный круг, белый × ───────── */

.kp-sizechart-backdrop .kp-sizechart-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--ink, #0a0a0a);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background .15s, color .15s, transform .12s;
}

.kp-sizechart-backdrop .kp-sizechart-close:hover {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    transform: scale(1.06);
}

.kp-sizechart-backdrop .kp-sizechart-close:focus-visible {
    outline: 2px solid var(--yellow, #FECE15);
    outline-offset: 2px;
}

.kp-sizechart-backdrop .kp-sizechart-close svg { display: block; }

/* ───────── Шапка (заголовок не залезает под крестик) ───────── */

.kp-sizechart-backdrop .kp-sizechart-head { margin: 0 56px 20px 0; }

.kp-sizechart-backdrop .kp-sizechart-title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    color: var(--ink, #0a0a0a);
    line-height: 1.2;
}

.kp-sizechart-backdrop .kp-sizechart-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.4;
}

/* ───────── Тело: чертёж + таблица ───────── */

.kp-sizechart-backdrop .kp-sizechart-body { overflow-x: auto; }

/* Чертёж (рехостнутый SVG) — над таблицей, слева, крупнее. */
.kp-sizechart-backdrop .kp-sizechart-body img {
    display: block;
    max-width: 150px;
    height: auto;
    margin: 0 0 18px;
}

/* Таблица мерок — бренд-стиль, читаемый размер. Шапка = первый <tr>. */
.kp-sizechart-backdrop .kp-sizechart-body table {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-size: 14px;
    color: var(--ink, #0a0a0a);
}

.kp-sizechart-backdrop .kp-sizechart-body th,
.kp-sizechart-backdrop .kp-sizechart-body td {
    border: 1px solid var(--line, #E5E5E5);
    padding: 10px 14px;
    text-align: center;
    line-height: 1.35;
    white-space: nowrap;
}

/* Первая строка (шапка размеров) — тёмный фон, белый текст. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th,
.kp-sizechart-backdrop .kp-sizechart-body thead td,
.kp-sizechart-backdrop .kp-sizechart-body thead th {
    background: var(--ink, #0a0a0a);
    color: #fff;
    font-weight: 700;
}

/* Первая колонка (метка замера A/B/…) — полужирная, левый край, светлый фон. */
.kp-sizechart-backdrop .kp-sizechart-body tr td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr th:first-child {
    font-weight: 700;
    text-align: left;
    background: var(--fog, #F7F7F7);
    color: var(--ink, #0a0a0a);
}

/* Угловая ячейка (шапка ∩ первая колонка) — тёмная, читаемая. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th:first-child {
    background: var(--ink, #0a0a0a);
    color: #fff;
    text-align: left;
}

/* Зебра по строкам данных (кроме шапки). */
.kp-sizechart-backdrop .kp-sizechart-body tr:nth-child(even):not(:first-child) td { background: #FCFCFC; }

/* Приписка-сноска поставщика (<p> после таблицы). */
.kp-sizechart-backdrop .kp-sizechart-body p {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.5;
    white-space: normal;
}

/* ───────── Мобилка ───────── */

@media (max-width: 600px) {
    .kp-sizechart-backdrop { padding: 14px; }
    .kp-sizechart-backdrop .kp-sizechart-modal {
        padding: 24px 18px 18px;
        border-radius: 14px;
        max-height: calc(100vh - 28px);
    }
    .kp-sizechart-backdrop .kp-sizechart-title { font-size: 19px; }
    .kp-sizechart-backdrop .kp-sizechart-head { margin-right: 48px; }
    .kp-sizechart-backdrop .kp-sizechart-close { top: 14px; right: 14px; width: 36px; height: 36px; }
    .kp-sizechart-backdrop .kp-sizechart-body table { font-size: 13px; min-width: 480px; }
    .kp-sizechart-backdrop .kp-sizechart-body th,
    .kp-sizechart-backdrop .kp-sizechart-body td { padding: 8px 10px; }
}

/* ─────────── ex-patch-11.5-logo-size.css ─────────── */
.kp-header .kp-logo img { height: 62px; width: auto; }
.kp-footer .kp-logo img { height: 72px; width: auto; }

/* ─────────── ex-patch-11.6-search.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 11.5: кастомный AJAX live-search.
 * ───────────────────────────────────────────────────────────────
 * Заменяет Woodmart-поиск (patch-3.4) на свой компонент по дизайну
 * Claude: форма + выпадашка с пустым состоянием (популярные запросы
 * + категории) и живой выдачей (категории + товары с подсветкой,
 * артикулом, наличием, ценой, кнопкой «показать все», клав-навигацией).
 *
 * Разметка — header.php ([data-kp-search]); логика — assets/js/search.js;
 * backend — inc/search.php. Скоуп body.kp-body по конвенции темы.
 * Подключается ПОСЛЕ patch-11.4.
 * ─────────────────────────────────────────────────────────────── */

/* ── Ширина строки поиска: во всю колонку шапки (как референс) ───
 * Переопределяет patch-3.4 (.kp-search-wrap max-width:520px). */
body.kp-body .kp-search-wrap { max-width: none; }

/* ── Форма ─────────────────────────────────────────────────────── */
body.kp-body .kp-search-form {
  display: flex;
  align-items: center;
  background: var(--fog);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  height: 48px;
  padding: 0;
  margin: 0;
  transition: background .15s, border-color .15s;
}
body.kp-body .kp-search-wrap.is-open .kp-search-form,
body.kp-body .kp-search-form:focus-within {
  background: #fff;
  border-color: var(--ink);
}
body.kp-body .kp-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 8px 0 16px;
  font-size: 15px;
  color: var(--ink);
}
body.kp-body .kp-search-input::placeholder { color: var(--ink-3); }
/* убрать нативный крестик у input[type=search] (свой) */
body.kp-body .kp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

body.kp-body .kp-search-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-3);
  cursor: pointer;
}
body.kp-body .kp-search-clear:hover { color: var(--ink); }

body.kp-body .kp-search-submit {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .15s;
}
body.kp-body .kp-search-submit:hover { background: var(--yellow-hover); }

/* ── Выпадашка ─────────────────────────────────────────────────── */
body.kp-body .kp-search-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: -140px; /* окно шире строки поиска (как в референсе) */
  background: #fff;
  border: 1px solid var(--line, #ececec);
  border-radius: var(--radius, 16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 200;
  padding: 8px 0;
}
/* индикатор загрузки выдачи (пока идёт запрос) */
body.kp-body .kp-search-loading {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}
body.kp-body .kp-search-drop[hidden] { display: none; }

/* ── Секции и заголовки ────────────────────────────────────────── */
body.kp-body .kp-search-sect { padding: 12px 16px 4px; }
body.kp-body .kp-search-sect-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
body.kp-body .kp-search-sect-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
body.kp-body .kp-search-found { font-weight: 600; letter-spacing: 0; text-transform: none; }
body.kp-body .kp-search-allcat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.kp-body .kp-search-allcat:hover { color: var(--yellow-hover, #e0b400); }

/* ── Чипы популярных запросов ──────────────────────────────────── */
body.kp-body .kp-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.kp-body .kp-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fog);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.kp-body .kp-search-chip:hover { background: #fff; border-color: var(--yellow); }
body.kp-body .kp-search-chip svg { color: var(--ink-3); }

/* ── Категории (пустое состояние, 2 колонки) ──────────────────── */
body.kp-body .kp-search-catgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
body.kp-body .kp-search-catitem,
body.kp-body .kp-search-catrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 10px;
  color: var(--ink);
}
body.kp-body .kp-search-catitem:hover,
body.kp-body .kp-search-catrow:hover,
body.kp-body .kp-search-catrow.is-active { background: var(--fog); }
body.kp-body .kp-search-caticon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--yellow-soft, #fff7d6);
  border-radius: 9px;
}
body.kp-body .kp-search-caticon svg { width: 18px; height: 18px; }
body.kp-body .kp-search-catname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
body.kp-body .kp-search-catcount { color: var(--ink-3); font-size: 13px; }

/* категории в выдаче — списком (не грид) */
body.kp-body .kp-search-catlist { display: flex; flex-direction: column; }

/* ── Карточки товаров в выдаче (2 колонки, как в дизайне) ───────── */
body.kp-body .kp-search-prodlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}
body.kp-body .kp-search-prod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  color: var(--ink);
}
body.kp-body .kp-search-prod:hover,
body.kp-body .kp-search-prod.is-active { background: var(--fog); }
body.kp-body .kp-search-prod-thumb {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fog);
}
body.kp-body .kp-search-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
body.kp-body .kp-search-prod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.kp-body .kp-search-prod-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.kp-body .kp-search-prod-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
body.kp-body .kp-search-prod-sku { color: var(--ink-3); }
body.kp-body .kp-search-prod-stock { color: #1E8E3E; font-weight: 600; }
body.kp-body .kp-search-prod-price { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* подсветка совпадения */
body.kp-body .kp-search-drop mark { background: var(--yellow); color: inherit; padding: 0 1px; border-radius: 2px; }

/* ── Кнопка «показать все» ─────────────────────────────────────── */
body.kp-body .kp-search-all {
  display: block;
  margin: 8px 16px 4px;
  padding: 13px;
  text-align: center;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  transition: background .15s;
}
body.kp-body .kp-search-all:hover { background: #000; color: #fff; }
body.kp-body .kp-search-all.is-active { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ── Пусто / подсказка ─────────────────────────────────────────── */
body.kp-body .kp-search-empty { padding: 24px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }
body.kp-body .kp-search-hint {
  display: flex;
  gap: 20px;
  padding: 12px 16px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--line, #ececec);
  font-size: 12px;
  color: var(--ink-3);
}
body.kp-body .kp-search-hint kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--fog);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
}

/* Страница результатов: чипы категорий не показываем.
   Правило жило только в kp-bundle.min.css (дописано туда без исходника),
   возвращено в исходник 04.07 при сверке бандл↔патчи. */
body.kp-search-page .kp-cat-chips { display: none; }

/* ── Мобильная адаптация ───────────────────────────────────────── */
@media (max-width: 760px) {
  body.kp-body .kp-search-catgrid { grid-template-columns: 1fr; }
}

/* ─────────── ex-patch-11.7-megamenu.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 11.7: доработки мега-меню «Все категории».
 * ───────────────────────────────────────────────────────────────
 * Правки Николая (01.07):
 *   1. Колонка подкатегорий (col-2): убраны маркеры-точки у <li> и
 *      дефолтный левый отступ <ul> — блок выравнивается под заголовок.
 *   2. Пункты групп (col-1) — sentence case: «Одежда и мерч» вместо
 *      Title Case «Одежда И Мерч». Родительский WoodMart навешивает на
 *      <button> text-transform из переменной --btn-transform:capitalize,
 *      перебивая наш uppercase в main.css → нужен явный сброс.
 *   3. Промо-баннер «Новогодние наборы»: заголовок при наведении
 *      становится ЖЁЛТЫМ (был тёмный из-за общего a:hover → не читался).
 *
 * Разметка — template-parts/home/mega-menu.php. Скоуп body.kp-body.
 * Подключается ПОСЛЕ patch-11.6.
 * ─────────────────────────────────────────────────────────────── */

/* ── 1. Список подкатегорий: без точек, без левого отступа ──────── */
body.kp-body .kp-mega-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.kp-body .kp-mega-sublist > li {
  list-style: none;
}

/* ── 2. Пункты групп — только первое слово с заглавной ───────────
 * WoodMart применяет к <button> text-transform:var(--btn-transform)
 * (=capitalize) с приоритетом выше нашего uppercase → без !important
 * не перебить. Сбрасываем и на кнопке, и на её <span> с текстом. */
body.kp-body .kp-mega .kp-mega-cat,
body.kp-body .kp-mega .kp-mega-cat > span {
  text-transform: none !important;
}

/* ── 3. Промо-баннер: заголовок жёлтым при наведении ─────────────
 * Дочерние узлы (kicker/arrow) имеют собственный цвет, а заголовок
 * наследовал цвет ссылки → на hover темнел. Даём ему свой цвет. */
body.kp-body .kp-mega-promo:hover {
  color: #fff;
}
body.kp-body .kp-mega-promo:hover .kp-mega-promo-title {
  color: var(--yellow);
}

/* ─────────── ex-patch-11.8-catmap-count.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 11.8: счётчик в карте каталога не разъезжается.
 * ───────────────────────────────────────────────────────────────
 * Правка Николая (01.07): в блоке «Весь каталог — по темам»
 * (template-parts/home/catalog-map.php) число вроде «3 432» ломалось
 * на две строки, когда название категории занимало две строки.
 *
 * Правки:
 *   1. Число («3 432») не переносится на 2 строки — white-space:nowrap.
 *   2. Единообразие позиции (01.07, вторая правка): раньше строка была
 *      flex и число стояло сразу за названием → позиция скакала (у коротких
 *      имён близко, у имён в 2 строки уезжало вправо). Переводим строку на
 *      grid [название 1fr | число auto] — число всегда в правой колонке,
 *      одинаково у всех плиток, вне зависимости от длины названия.
 *
 * Скоуп body.kp-body. Подключается ПОСЛЕ patch-11.7.
 * ─────────────────────────────────────────────────────────────── */

body.kp-body .kp-catmap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 10px;
}
body.kp-body .kp-catmap-count {
  white-space: nowrap;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 11 · МОБИЛЬНАЯ АДАПТАЦИЯ: шапка, hero, статистика, категории, отступы, методы, бренды (быв. 11.9–12.9)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─────────── ex-patch-11.9-mobile-header.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 11.9: мобильная шапка ПО МАКЕТУ (≤760).
 * ───────────────────────────────────────────────────────────────
 * Приводим мобильную шапку к дизайн-макету (K-Promo Mobile Preview):
 *   строка 1 (60px): бургер ≡ + логотип + избранное + корзина;
 *   поиск / телефоны / большой CTA «Заказать звонок» — СКРЫТЫ;
 *   жёлтый бар «Все категории» (.kp-snav-row) — СКРЫТ, им управляет
 *   бургер, открывающий мега-меню как full-width drawer;
 *   «Заказать звонок» — липкая нижняя полоса .kp-mobile-cta (уже есть).
 *
 * Разметка: header.php (.kp-mobile-burger + .kp-header-actions),
 * mega-menu.php (.kp-mm — мобильное меню в drawer),
 * main.js (мега-тоггл биндит ВСЕ [data-kp-mega-toggle]).
 *
 * !important — точечно, перебиваем !important из patch-1.9
 * (.kp-phones/.kp-cta-call). Скоуп body.kp-body. После patch-11.8.
 * ─────────────────────────────────────────────────────────────── */

/* убираем вудмартовскую нижнюю мобильную панель «Wishlist/Cart»
   (.wd-toolbar) — избранное и корзина уже есть в нашей шапке */
body.kp-body .wd-toolbar { display: none !important; }

/* десктоп: мобильные элементы скрыты */
body.kp-body .kp-mobile-burger { display: none; }
body.kp-body .kp-header-actions { display: none; }
body.kp-body .kp-mm { display: none; }
body.kp-body .kp-tb-phone-m { display: none; }

@media (max-width: 760px) {
  /* ── одна компактная строка ── */
  body.kp-body .kp-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
  }

  /* бургер слева (открывает мега-меню) */
  body.kp-body .kp-mobile-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -8px;
    color: var(--ink);
    border-radius: 8px;
    flex: 0 0 auto;
    /* убираем серую заливку (WoodMart красит <button> в --fog) */
    background: transparent !important;
    border: 0;
  }
  /* SVG внутри inline-flex сплющивался до 2px — фиксируем размер явно */
  body.kp-body .kp-mobile-burger svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto;
    stroke: currentColor;
  }

  /* ── топбар: телефон слева + мессенджеры справа (как в макете) ──
     patch-5.0 на мобиле обнулял боковой padding (padding:5px 0) → телефон и
     мессенджеры упирались в края экрана, шире контента. Возвращаем 20px,
     чтобы совпадало с полями контейнера и кнопкой «Оставить заявку». */
  body.kp-body .kp-topbar-row {
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
  }
  body.kp-body .kp-topbar-right { width: auto; justify-content: flex-end; }
  body.kp-body .kp-tb-phone-m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
  }
  body.kp-body .kp-tb-phone-m svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto;
    stroke: currentColor;
  }
  /* e-mail в топбаре на мобиле прячем — оставляем телефон + мессенджеры */
  body.kp-body .kp-topbar-right .kp-tb-item[href^="mailto"] { display: none !important; }

  /* логотип компактный, отжимает действия вправо */
  body.kp-body .kp-header .kp-logo img { height: 34px; }
  body.kp-body .kp-header-row .kp-logo { margin-right: auto; }

  /* прячем то, что в мобильную шапку не идёт */
  body.kp-body .kp-header-row .kp-search-wrap { display: none; }
  body.kp-body .kp-header-row .kp-phones { display: none !important; }
  body.kp-body .kp-header-row .kp-cta-call { display: none !important; }

  /* быстрые действия справа: избранное + корзина (иконки) */
  body.kp-body .kp-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }
  body.kp-body .kp-header-actions .kp-snav-icon { width: 42px; height: 42px; }
  /* мини-корзина: только иконка + бейдж, без тёмной плашки и суммы */
  body.kp-body .kp-header-actions .kp-snav-cart--mini {
    background: none !important;
    color: var(--ink) !important;
    padding: 0 !important;
    width: 42px;
    height: 42px;
    justify-content: center;
    position: relative;
  }

  /* ── жёлтый бар «Все категории» скрыт — им рулит бургер ── */
  body.kp-body .kp-snav-row { display: none; }
  body.kp-body .kp-snav { background: none; border: 0; }

  /* ── мега-меню как full-width drawer (по макету 06.07) ──
     Десктопные колонки скрыты целиком, вместо них мобильное меню .kp-mm
     (mega-menu.php): «Весь каталог» → аккордеон групп → ссылки разделов
     → контакт-блок. Аккордеон переключает main.js (is-open на .kp-mm-group). */
  body.kp-body .kp-mega {
    grid-template-columns: 1fr;
    max-width: 100%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
  }
  body.kp-body .kp-mega-col { display: none; }

  body.kp-body .kp-mm { display: block; padding: 16px 16px 24px; }
  /* страховка от сплющивания SVG во flex/grid (грабли patch-11.9) */
  body.kp-body .kp-mm svg { flex: 0 0 auto; }

  /* плавающий контакт-виджет перекрывал низ drawer — прячем, пока меню открыто */
  body.kp-body.kp-mega-open .cw-dock { display: none; }

  /* жёлтая кнопка «Весь каталог» */
  body.kp-body .kp-mm-allcats {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    background: var(--yellow);
    color: var(--ink);
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 16px;
  }
  body.kp-body .kp-mm-allcats .kp-mm-chev { margin-left: auto; }

  /* аккордеон групп каталога */
  body.kp-body .kp-mm-groups { margin-top: 8px; }
  body.kp-body .kp-mm-group { border-bottom: 1px solid var(--line); }
  body.kp-body .kp-mm-group:last-child { border-bottom: 0; }
  body.kp-body .kp-mm-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 2px;
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    border: 0;
    /* сбросы WoodMart на <button>: серая заливка + capitalize */
    background: transparent !important;
    text-transform: none !important;
  }
  body.kp-body .kp-mm-group-btn .kp-mm-chev {
    color: var(--ink-2);
    transition: transform .2s;
  }
  body.kp-body .kp-mm-group.is-open .kp-mm-group-btn .kp-mm-chev { transform: rotate(180deg); }

  body.kp-body .kp-mm-pane { display: none; }
  body.kp-body .kp-mm-group.is-open .kp-mm-pane {
    display: block;
    background: var(--fog);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 14px;
  }
  body.kp-body .kp-mm-sub {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 2px;
    color: var(--ink);
    font-weight: 500;
    font-size: 15px;
  }
  body.kp-body .kp-mm-sub-count {
    color: var(--ink-3);
    font-size: 14px;
    font-feature-settings: "tnum";
  }

  /* ссылки разделов с иконками */
  body.kp-body .kp-mm-links {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  body.kp-body .kp-mm-links a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 2px;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
  }
  body.kp-body .kp-mm-links a .kp-mm-chev { color: var(--ink-3); }

  /* контакт-блок */
  body.kp-body .kp-mm-contact {
    margin-top: 12px;
    background: var(--fog);
    border-radius: var(--radius);
    padding: 20px 18px;
  }
  body.kp-body .kp-mm-phone {
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
  }
  body.kp-body .kp-mm-contact-row {
    display: block;
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 14px;
  }
  body.kp-body .kp-mm-callback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 13px 22px;
    color: var(--ink);
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    background: var(--yellow) !important;
    text-transform: uppercase !important;
  }
  body.kp-body .kp-mm-msgs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }
  body.kp-body .kp-mm-msgs img {
    display: block;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  body.kp-body .kp-header .kp-logo img { height: 30px; }
  body.kp-body .kp-header-row { gap: 6px; }
}

/* ─────────── ex-patch-12.0-mobile-hero.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.0: мобильный герой главной (≤768).
 * ───────────────────────────────────────────────────────────────
 * Баг (аудит 01.07): h1.kp-hero-title содержит &nbsp; между словами
 * («вашей&nbsp;компании») + word-break:keep-all (patch-2.0) → строки
 * неразрывны. Самая длинная строка при 40px ≈ 392px, а контейнер на
 * 390px экране — 335px. Колонка грида (1fr, min-width:auto) не может
 * сжаться ниже min-content строки → .kp-hero-left раздувается до 392px
 * и вылезает вправо, унося за собой заголовок И подзаголовок (оба
 * обрезаются, т.к. body overflow-x:clip).
 *
 * Решение: на мобиле уменьшаем шрифт заголовка (строки влезают) +
 * min-width:0 на элементы грида (страховка — трек может сжаться) +
 * подзаголовку max-width:100%.
 *
 * !important на font-size/max-width — перебиваем patch-2.0 (там !important).
 * Скоуп body.kp-body. Подключается ПОСЛЕ patch-11.9.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* отступ от линии шапки до кикера «Корпоративные подарки» — вдвое (64→32).
     !important: в бандле «запеклось» body.kp-body .kp-hero{padding:64px…!important}
     (из старого патча, в исходниках его уже нет) — перебиваем. */
  body.kp-body .kp-hero { padding-top: 32px !important; }

  /* трек грида должен уметь сжиматься ниже min-content ребёнка */
  body.kp-body .kp-hero-grid > * { min-width: 0; }

  /* 40px → 34px: самая длинная строка «ВАШЕЙ КОМПАНИИ» влезает в 335px */
  body.kp-body .kp-hero-title { font-size: 34px !important; }

  body.kp-body .kp-hero-sub { max-width: 100% !important; }
}

@media (max-width: 480px) {
  /* узкие телефоны (360px, контейнер ~320px) — ещё компактнее */
  body.kp-body .kp-hero-title { font-size: 30px !important; }
}

/* ─────────── ex-patch-12.1-mobile-stats.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.1: блок статистики на мобиле (≤760).
 * ───────────────────────────────────────────────────────────────
 * Баг: .kp-stat-num = 56px (main.css). На мобиле в 2-колоночной сетке
 * (~165px колонка) числа «18 000+», «2 часа» ломались/обрезались.
 * Уменьшаем размер цифр под мобилу — как на референсе (аккуратные
 * 2 колонки, число в одну строку).
 *
 * ВНИМАНИЕ: тут только РАЗМЕР (вёрстка). Набор цифр/подписей на живом
 * сайте отличается от референса — это отдельный вопрос по контенту
 * (см. stats.php), решается с Николаем, не молча.
 *
 * Скоуп body.kp-body. Подключается ПОСЛЕ patch-12.0.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body.kp-body .kp-stat-num { font-size: 32px; }
}

@media (max-width: 480px) {
  body.kp-body .kp-stat-num { font-size: 28px; }
}

/* ─────────── ex-patch-12.2-mobile-extras.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.2: мобильные доработки (≤760).
 *   A. Плавающий контакт-виджет .cw — из вертикального стека справа
 *      в ГОРИЗОНТАЛЬНУЮ строку внизу экрана.
 *   B. Основная шапка .kp-header — липнет к верху при скролле.
 * Скоуп body.kp-body. Подключается ПОСЛЕ patch-12.1.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* ── A. контакт-виджет: горизонтально по центру внизу ── */
  body.kp-body .cw {
    top: auto;
    bottom: 12px;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  /* кнопка «наверх» уводим левее, чтобы не пересекалась с рядом виджета */
  body.kp-body .cw-top { right: 14px; bottom: 76px; }

  /* ── B. шапка липнет к верху ── */
  body.kp-body .kp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper, #fff);
  }
}

/* ─────────── ex-patch-12.3-mobile-popcats.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.3: «Популярные категории» на мобиле (≤760).
 * ───────────────────────────────────────────────────────────────
 * По референсу Николая: вертикальный список горизонтальных карточек —
 * [картинка] [жёлтая иконка] [название + счётчик] [стрелка].
 * Последняя карточка (Электроника, tone-ink) — тёмная (уже есть в main).
 * Реальные картинки категорий (assets/images/cat-<slug>.png) уже
 * подставляются шаблоном вместо плейсхолдеров.
 *
 * Скоуп body.kp-body .kp-sec-pop — НЕ трогаем .kp-cat-grid архива
 * категорий (общий класс, см. CLAUDE.md, ловушка #7). После patch-12.2.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* один столбец — список карточек */
  body.kp-body .kp-sec-pop .kp-cat-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* карточка — горизонтальная строка */
  body.kp-body .kp-sec-pop .kp-cat-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px;
  }

  /* порядковый номер 01/02 не нужен в списке */
  body.kp-body .kp-sec-pop .kp-cat-num { display: none; }

  /* картинка — компактная плитка слева */
  body.kp-body .kp-sec-pop .kp-cat-img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
  body.kp-body .kp-sec-pop .kp-cat-img .kp-card-photo,
  body.kp-body .kp-sec-pop .kp-cat-img .kp-placeholder {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
  }

  /* правая часть: иконка + название/счётчик + стрелка */
  body.kp-body .kp-sec-pop .kp-cat-foot {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ─────────── ex-patch-12.4-mobile-spacing.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.4: единые вертикальные отступы блоков на мобиле.
 * ───────────────────────────────────────────────────────────────
 * Правка Николая: у ВСЕХ блоков сверху и снизу одинаковый отступ 32px
 * (как у героя сверху). База: .kp-sec = 80px, .kp-hero = 64/80.
 *
 * .kp-sec — без !important (body.kp-body .kp-sec = 0,0,2,1 бьёт базовое).
 * .kp-hero — с !important (в бандле «запеклось» .kp-hero{padding…!important}).
 * Скоуп body.kp-body, только ≤760. После patch-12.3.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body.kp-body .kp-sec {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  body.kp-body .kp-hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ─────────── ex-patch-12.5-mobile-widget-row.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.5: нижний ряд виджета — единый «док» (≤760).
 * ───────────────────────────────────────────────────────────────
 * .cw (мессенджеры) и .cw-top (кнопка «наверх») — соседние fixed-элементы,
 * из-за чего жёлтая стояла особняком. Оборачиваем в .cw-dock (разметка —
 * contact-widget.php) и на мобиле делаем ОДИН центрированный ряд с равным
 * gap: жёлтая встаёт в ряд с иконками, отступы равномерные.
 * Кнопка «наверх» появляется по .show (JS), того же размера (52px).
 *
 * Десктоп: .cw-dock{display:contents} — дети сохраняют свои fixed-позиции.
 * После patch-12.4.
 * ─────────────────────────────────────────────────────────────── */

/* десктоп — контейнер прозрачен, поведение не меняется */
body.kp-body .cw-dock { display: contents; }

@media (max-width: 760px) {
  /* единый ряд по центру внизу; клики — только по кнопкам */
  body.kp-body .cw-dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 22px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    z-index: 50;
    pointer-events: none;
  }

  /* мессенджеры — в ряд, статикой внутри дока */
  body.kp-body .cw-dock .cw {
    position: static;
    transform: none;
    flex-direction: row;
    gap: 14px;
    padding: 0;
    pointer-events: auto;
  }

  /* «наверх» — статикой в том же ряду, размер как у иконок; скрыта до .show */
  body.kp-body .cw-dock .cw-top {
    position: static;
    width: 52px;
    height: 52px;
    display: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  body.kp-body .cw-dock .cw-top.show { display: grid; }
  body.kp-body .cw-dock .cw-top svg { width: 22px; height: 22px; }
}

/* ─────────── ex-patch-12.6-mobile-hero-order.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.6: порядок героя на мобиле (≤768).
 * ───────────────────────────────────────────────────────────────
 * Правка Николая: на мобиле порядок —
 *   1) кикер + заголовок «Подарки и мерч…»
 *   2) жёлтый блок со слайдером (.kp-hero-right)
 *   3) описание (.kp-hero-sub)
 *   4) кнопки (.kp-hero-ctas)
 *   5) трасты (.kp-hero-trust)
 *
 * Слайдер лежит в DOM ПОСЛЕ всего hero-left, поэтому «поднять» его между
 * заголовком и описанием обычным order нельзя — разворачиваем hero-left
 * через display:contents (его дети становятся flex-элементами грида),
 * затем расставляем order. gap:20 + сброс крупных margin — ровные отступы.
 *
 * После patch-12.5.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.kp-body .kp-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 20px !important;
  }
  /* разворачиваем обёртку — дети идут напрямую в flex-колонку */
  body.kp-body .kp-hero-left { display: contents; }

  body.kp-body .kp-hero-kicker { order: 1; margin: 0; }
  body.kp-body .kp-hero-title  { order: 2; margin: 0 !important; }
  body.kp-body .kp-hero-right  { order: 3; margin: 14px 0; }  /* воздух сверху/снизу у жёлтого блока */
  body.kp-body .kp-hero-sub    { order: 4; margin: 0 !important; }
  body.kp-body .kp-hero-ctas   { order: 5; margin: 0 !important; }
  body.kp-body .kp-hero-trust  { order: 6; }
}

/* 17.10.2026: строка «Нанесение на изделиях» под карточками методов на главной. */
body.kp-body .kp-sec-print .kp-print-items {
    margin-top: 40px;
}

/* ─────────── ex-patch-12.7-mobile-methods.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.7: «Методы нанесения» на мобиле (≤760).
 * ───────────────────────────────────────────────────────────────
 * По аналогии с «Популярными категориями» (patch-12.3): вертикальный
 * список горизонтальных карточек — [картинка] [название+описание] [→].
 * Реальные картинки методов (assets/images/method-<slug>.png) уже есть.
 * Скоуп body.kp-body .kp-sec-print. После patch-12.6.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body.kp-body .kp-sec-print .kp-print-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.kp-body .kp-sec-print .kp-print-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "img name more"
      "img desc more";
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 12px;
  }

  body.kp-body .kp-sec-print .kp-print-num { display: none; }

  body.kp-body .kp-sec-print .kp-print-img {
    grid-area: img;
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
  }
  body.kp-body .kp-sec-print .kp-print-img .kp-card-photo,
  body.kp-body .kp-sec-print .kp-print-img .kp-placeholder {
    width: 64px;
    height: 64px;
  }

  body.kp-body .kp-sec-print .kp-print-name {
    grid-area: name;
    align-self: end;
    font-size: 15px;
  }
  body.kp-body .kp-sec-print .kp-print-desc {
    grid-area: desc;
    align-self: start;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* «Подробнее» → только стрелка справа (как у категорий) */
  body.kp-body .kp-sec-print .kp-print-more {
    grid-area: more;
    font-size: 0;
  }
  body.kp-body .kp-sec-print .kp-print-more svg { width: 18px; height: 18px; }
}

/* ─────────── ex-patch-12.8-mobile-brands.css ─────────── */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 12.8: бренды на мобиле в 2 строки (≤760).
 * ───────────────────────────────────────────────────────────────
 * Было: длинная 2-колоночная лента (много строк). Нужно: 2 строки
 * с горизонтальной прокруткой (брендовая лента, как на референсе).
 * grid-auto-flow:column + grid-template-rows:repeat(2,…) + overflow-x:auto.
 * Скоуп body.kp-body .kp-sec-brands. После patch-12.7.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body.kp-body .kp-sec-brands .kp-brand-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    grid-template-rows: repeat(2, 1fr);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body.kp-body .kp-sec-brands .kp-brand-grid::-webkit-scrollbar { display: none; }
  body.kp-body .kp-sec-brands .kp-brand-cell {
    height: 64px;
    scroll-snap-align: start;
  }
}

/* ─────────── ex-patch-12.9-stats-align.css ─────────── */
/* ═══════════════════════════════════════════════════════════════
 * PATCH 12.9 — Блок статистики главной: сетка + перенос + юнит «часа»
 *
 * 1) Выравнивание по сетке страницы. У .kp-stat padding 8px 24px —
 *    первая колонка начиналась на 24px правее левой границы
 *    kp-container (hero h1 x=112.5, цифры x=137 при 1440px).
 *    Убираем левый отступ у колонок, начинающих ряд, — по каждому
 *    брейкпоинту сетки (5 → 3 → 2 колонки).
 *
 * 2) Перенос «18 000+». При 56px строка занимает 195px, а контент
 *    колонки был 240−48=192px → перенос на 2 строки. После снятия
 *    боковых отступов первой колонки контент 240px; nowrap — страховка
 *    для узкого десктопа (1101–1135px, колонка 212px).
 *
 * 3) «2 часа»: слово-юнит уменьшено до .58em (≈32px при 56px) —
 *    цифра доминирует, слово читается как подпись, не спорит с цифрой.
 *    Разметка в stats.php: 2 <span class="kp-stat-unit">часа</span>
 *    (.58em, а не px — чтобы масштабировалось с цифрой на мобиле 32/28px).
 * ═══════════════════════════════════════════════════════════════ */

.kp-stat:first-child {
  padding-left: 0;
  padding-right: 0;
}

.kp-stat-num {
  white-space: nowrap;
}

.kp-stat-num .kp-stat-unit {
  font-size: .58em;
  font-weight: 600;
}

@media (max-width: 1100px) {
  /* сетка 3 колонки: ряды начинают 1-й и 4-й */
  .kp-stats-row .kp-stat:nth-child(3n+1) {
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  /* сетка 2 колонки: ряды начинают нечётные;
     4-му (попал под 3n+1 выше) отступ вернуть */
  .kp-stats-row .kp-stat:nth-child(odd) {
    padding-left: 0;
  }
  .kp-stats-row .kp-stat:nth-child(even) {
    padding-left: 24px;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 12 · «ВСЕ ФИЛЬТРЫ» — drawer-панель архива (06.07.2026)
   ╚═══════════════════════════════════════════════════════════════════╝
   Дизайн: design-reference/category.jsx → FilterDrawer (.drawer* → .kp-fdrawer*).
   Разметка: template-parts/archive-filters-drawer.php (include из
   archive-product.php и taxonomy-product_collection.php).
   Открытие — body.kp-fdrawer-open (archive-filters-js.php). Видимость только
   классом (атрибут [hidden] на этой теме ненадёжен — перебивался WoodMart,
   см. mega-menu). z-index 95/96 — выше .cw и .kp-snav-wrap (оба 50). */

body.kp-body .kp-cat-fpill-all svg { flex: 0 0 auto; }

body.kp-body .kp-fdrawer-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    z-index: 95;
}
body.kp-body .kp-fdrawer {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: #fff;
    z-index: 96;
    flex-direction: column;
}
body.kp-body.kp-fdrawer-open .kp-fdrawer-scrim { display: block; animation: kp-fdrawer-fade .2s; }
body.kp-body.kp-fdrawer-open .kp-fdrawer { display: flex; animation: kp-fdrawer-slide .25s ease; }
body.kp-body.kp-fdrawer-open { overflow: hidden; }
@keyframes kp-fdrawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kp-fdrawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

body.kp-body .kp-fdrawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-fdrawer-title {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.kp-body .kp-fdrawer-x {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink, #0A0A0A);
    background: var(--fog, #F7F7F7) !important; /* сброс WoodMart-заливки <button> */
    flex: 0 0 auto;
}
body.kp-body .kp-fdrawer-x:hover {
    background: var(--ink, #0A0A0A) !important;
    color: #fff;
}

body.kp-body .kp-fdrawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 28px 24px;
}
body.kp-body .kp-fdrawer-acc {
    border-bottom: 1px solid var(--line, #E5E5E5);
    padding: 16px 0;
}
body.kp-body .kp-fdrawer-acc summary {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-fdrawer-acc summary::-webkit-details-marker { display: none; }
body.kp-body .kp-fdrawer-acc summary span:first-child { flex: 1; }
body.kp-body .kp-fdrawer-acc summary svg { transition: transform .2s; flex: 0 0 auto; }
body.kp-body .kp-fdrawer-acc[open] summary svg { transform: rotate(180deg); }

body.kp-body .kp-fdrawer-opts {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}
body.kp-body .kp-fdrawer-price {
    display: flex;
    gap: 12px;
}
body.kp-body .kp-fdrawer-price .kp-cat-fpill-field { flex: 1; }

/* опция-чекбокс: сброс WoodMart <button> + строка чекбокс|свотч|имя|счётчик */
body.kp-body .kp-fdrawer-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    transition: background .15s;
    background: transparent !important;
    text-transform: none !important;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-fdrawer-opt:hover { background: var(--fog, #F7F7F7) !important; }
body.kp-body .kp-fdrawer-check {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--line, #E5E5E5);
    border-radius: 4px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #fff;
    transition: all .15s;
}
body.kp-body .kp-fdrawer-opt.is-selected .kp-fdrawer-check {
    background: var(--yellow, #FECE15);
    border-color: var(--yellow, #FECE15);
}
body.kp-body .kp-fdrawer-opt.is-selected .kp-fdrawer-check::after {
    content: "";
    width: 5px;
    height: 9px;
    border: 2px solid var(--ink, #0A0A0A);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
body.kp-body .kp-fdrawer-opt .kp-cat-fpill-color-swatch { flex: 0 0 auto; }
body.kp-body .kp-fdrawer-opt-name {
    flex: 1;
    font-size: 14px;
    min-width: 0;
}
body.kp-body .kp-fdrawer-opt-count {
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    font-feature-settings: "tnum";
}

body.kp-body .kp-fdrawer-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 20px 28px;
    border-top: 1px solid var(--line, #E5E5E5);
    background: #fff;
}
body.kp-body .kp-fdrawer-reset {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0A0A0A);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
body.kp-body .kp-fdrawer-show {
    flex: 1;
    border: 0;
    border-radius: var(--radius, 12px);
    padding: 16px 24px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    cursor: pointer;
    background: var(--yellow, #FECE15) !important;
    color: var(--ink, #0A0A0A);
    text-transform: uppercase !important;
    transition: background .15s;
}
body.kp-body .kp-fdrawer-show:hover { background: var(--yellow-hover, #FFD933) !important; }

@media (max-width: 760px) {
    body.kp-body .kp-fdrawer { width: 100vw; }
    body.kp-body .kp-fdrawer-head { padding: 18px 20px; }
    body.kp-body .kp-fdrawer-body { padding: 4px 20px 20px; }
    body.kp-body .kp-fdrawer-foot { padding: 14px 20px; }

    /* мобильный фильтр-бар (Nick, 06.07): отдельные пилюли скрыты — вся
       фильтрация через drawer; в ряду только «ВСЕ ФИЛЬТРЫ» + сортировка */
    body.kp-body .kp-cat-fbar-left > .kp-cat-fpill:not(.kp-cat-fpill-all) { display: none; }
    body.kp-body .kp-cat-fbar-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    body.kp-body .kp-cat-fsort-lbl { display: none; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 13 · МОБИЛЬНЫЙ ПОИСК — полноэкранный оверлей (06.07.2026)
   ╚═══════════════════════════════════════════════════════════════════╝
   Иконка поиска в мобильной шапке (header.php .kp-msearch-btn) открывает
   .kp-search-wrap оверлеем: body.kp-msearch-open (main.js initMobileSearch).
   Поиск тот же (search.js): фокус открывает дроп с популярными запросами /
   категориями / живой выдачей — на мобиле дроп статичный, во весь экран. */

body.kp-body .kp-msearch-back { display: none; }

/* иконка поиска в мобильной шапке: сбросы WoodMart <button> (серая заливка)
   + явный размер SVG (сплющивался — грабли patch-11.9) */
body.kp-body .kp-msearch-btn {
    border: 0;
    color: var(--ink, #0A0A0A);
    background: transparent !important;
}
body.kp-body .kp-msearch-btn svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto;
    stroke: currentColor;
}

@media (max-width: 760px) {
    body.kp-body.kp-msearch-open { overflow: hidden; }

    /* перебиваем display:none мобильной шапки (patch-11.9) доп. классом */
    body.kp-body.kp-msearch-open .kp-header-row .kp-search-wrap {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: center;
        gap: 6px;
        position: fixed;
        inset: 0;
        z-index: 120;
        background: #fff;
        padding: 12px 16px;
    }
    body.kp-body.kp-msearch-open .kp-msearch-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: -8px;
        border: 0;
        color: var(--ink, #0A0A0A);
        background: transparent !important;
        flex: 0 0 auto;
    }
    body.kp-body.kp-msearch-open .kp-msearch-back svg {
        transform: scaleX(-1); /* arrow-right → «назад» */
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 auto;
    }
    body.kp-body.kp-msearch-open .kp-search-form {
        flex: 1;
        min-width: 0;
    }
    /* дроп — не выпадашка, а тело оверлея на всю высоту */
    body.kp-body.kp-msearch-open .kp-search-drop {
        position: static;
        flex: 1 1 100%;
        width: 100%;
        left: auto;
        right: auto;
        border: 0;
        border-top: 1px solid var(--line, #E5E5E5);
        border-radius: 0;
        box-shadow: none;
        max-height: none;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        margin-top: 6px;
    }
}

/* ── Мобильная шапка, полировка 06.07 (Nick): лого/иконки/бейджи ──
   1) Лого: на мобиле горизонтальный без «типография» (logo-mobile.svg);
   2) иконки лупа/избранное/корзина выровнены по центру 42px-боксов;
   3) бейджи-счётчики в ЕДИНОМ стиле (жёлтый + белая обводка) — раньше
      сердце было чёрным с жёлтым, корзина жёлтой с чёрным. */
body.kp-body .kp-logo-img-m { display: none; }

@media (max-width: 760px) {
    body.kp-body .kp-header .kp-logo .kp-logo-img-d { display: none; }
    body.kp-body .kp-header .kp-logo .kp-logo-img-m { display: block; height: 34px; width: auto; }

    body.kp-body .kp-header-actions { align-items: center; }
    body.kp-body .kp-header-actions .kp-snav-icon,
    body.kp-body .kp-header-actions .kp-snav-cart--mini {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    body.kp-body .kp-header-actions .kp-badge-count {
        top: 1px;
        right: 1px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        font-size: 10px;
        font-weight: 700 !important;
        background: var(--yellow, #FECE15);
        color: var(--ink, #0A0A0A);
        border: 1.5px solid #fff;
        border-radius: 8px;
    }

    /* выдача мобильного поиска: одна строка — один товар (референс),
       2 колонки не влезали и уезжали за край */
    body.kp-body .kp-search-prodlist { grid-template-columns: 1fr; }
    body.kp-body .kp-search-prod { min-width: 0; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 14 · МОБИЛЬНЫЙ ФУТЕР — 2 колонки (макет Nick, 06.07.2026)
   ╚═══════════════════════════════════════════════════════════════════╝
   ≤760 наследовались планшетные 3 колонки (main.css @1100) — ссылки
   сжимались. По макету: бренд-блок на всю ширину, ниже пары
   Каталог|Услуги и Компания|Контакты. Контакты — обычная колонка
   (перебиваем span 3 из @1100). */

@media (max-width: 760px) {
    body.kp-body .kp-footer-row {
        grid-template-columns: 1fr 1fr;
        gap: 36px 20px;
    }
    body.kp-body .kp-footer-col-brand { grid-column: span 2; }
    body.kp-body .kp-footer-col-contact { grid-column: auto; }
    /* телефоны в полколонки на 390px: 18px переносились */
    body.kp-body .kp-footer-phone { font-size: 16px; white-space: nowrap; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 15 · СТРАНИЦА 404 (референс Nick, 06.07.2026) — шаблон 404.php
   ╚═══════════════════════════════════════════════════════════════════╝
   Максимум существующих компонентов: кикер .kp-hero-kicker, кнопки
   .kp-btn-primary/-ghost, блоб .kp-hero-blob (тот же, что в хиро главной,
   внутри .kp-404-scene). Своё здесь — сетка, заголовок с подложкой,
   поиск, плашки артикул/статус и чипы категорий. */

body.kp-body .kp-404 { padding: 24px 0 72px; }

body.kp-body .kp-404-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 32px 0 56px;
    border-bottom: 1px solid var(--line, #E5E5E5);
}

/* ── левая колонка ── */
body.kp-body .kp-404-title {
    margin: 0;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-404-title-hl {
    background: var(--yellow, #FECE15);
    padding: 0 10px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
body.kp-body .kp-404-text {
    margin: 22px 0 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2, #3D3D3D);
}

body.kp-body .kp-404-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 460px;
    margin-top: 28px;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--line, #E5E5E5);
    border-radius: var(--radius, 12px);
    background: #fff;
}
body.kp-body .kp-404-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 15px;
    background: transparent;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-404-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: var(--yellow, #FECE15) !important;
    color: var(--ink, #0A0A0A);
    text-transform: uppercase !important;
    letter-spacing: .04em;
}
body.kp-body .kp-404-search-btn:hover { background: var(--yellow-hover, #FFD933) !important; }
body.kp-body .kp-404-search-btn svg { flex: 0 0 auto; }

body.kp-body .kp-404-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* ── правая сцена: блоб героя + 404 + плашки ── */
body.kp-body .kp-404-right { display: flex; justify-content: center; }
body.kp-body .kp-404-scene {
    position: relative;
    width: min(460px, 100%);
    height: 420px;
    isolation: isolate;
}
body.kp-body .kp-404-num {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(120px, 15vw, 180px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    color: var(--ink, #0A0A0A);
    text-shadow: 6px 6px 0 #fff;
    font-feature-settings: "tnum";
}
body.kp-body .kp-404-tag {
    position: absolute;
    background: #fff;
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, .08));
    padding: 10px 16px;
    z-index: 1;
}
body.kp-body .kp-404-tag-sku { top: 6%; left: -4%; }
body.kp-body .kp-404-tag-status { bottom: 12%; right: -3%; }
body.kp-body .kp-404-tag-k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
}
body.kp-body .kp-404-tag-v {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #0A0A0A);
    white-space: nowrap;
}

/* ── популярные категории ── */
body.kp-body .kp-404-cats { padding-top: 32px; }
body.kp-body .kp-404-cats-h {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    margin-bottom: 16px;
}
body.kp-body .kp-404-cats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.kp-body .kp-404-cat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid var(--line, #E5E5E5);
    border-radius: var(--radius-pill, 999px);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0A0A0A);
    transition: border-color .15s, background .15s;
}
body.kp-body .kp-404-cat:hover { border-color: var(--ink, #0A0A0A); background: var(--fog, #F7F7F7); }
body.kp-body .kp-404-cat-ic { display: inline-flex; }
body.kp-body .kp-404-cat-ic svg { width: 16px; height: 16px; flex: 0 0 auto; }
body.kp-body .kp-404-cat-count { color: var(--ink-3, #8A8A8A); font-size: 13px; font-feature-settings: "tnum"; }

@media (max-width: 980px) {
    body.kp-body .kp-404-title { font-size: 44px; }
    body.kp-body .kp-404-grid { gap: 32px; }
}
@media (max-width: 760px) {
    body.kp-body .kp-404-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 16px 0 40px;
    }
    body.kp-body .kp-404-title { font-size: 34px; }
    body.kp-body .kp-404-right { order: -1; }  /* сцена с 404 сверху */
    body.kp-body .kp-404-scene { width: min(320px, 86%); height: 300px; }
    body.kp-body .kp-404-num { text-shadow: 4px 4px 0 #fff; }
    body.kp-body .kp-404-tag-sku { left: 0; }
    body.kp-body .kp-404-tag-status { right: 0; }
    body.kp-body .kp-404-ctas .kp-btn { flex: 1; justify-content: center; }
}

/* ─────────── правки 06.07.2026 — шапка (корзина, плашка) + PDP minpill ─────────── */
/* ═══════════════════════════════════════════════════════════════
 * 1) Корзина в шапке (a.kp-snav-cart): WoodMart-овский a:hover
 *    перебивал color:#fff тёмно-серым — иконка (stroke:currentColor)
 *    и сумма пропадали на чёрной кнопке. По ховеру — жёлтые.
 * 2) Жёлтая плашка sticky-меню была 57px (row 56px + border-bottom
 *    1px), а кнопка «Все категории» — 56px: под кнопкой светилась
 *    1px полоса. Границу снимаем → плашка ровно 56px = кнопка.
 *    Сопутствующее: sticky-чипы FAQ (.kp-faqp-nav) top 57px → 56px
 *    (правка в их секции выше).
 * 3) PDP: пилюля минимального тиража (.pv-minpill) выводится для
 *    ЛЮБОГО товара — «от N шт» (content-single-product.php); без
 *    заливки, чёрная обводка, шрифт как у плашки наличия (15px).
 *    База (inline-flex/radius/weight 600/nowrap) — в секции выше,
 *    здесь только перекрытие вида.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart {
  transition: background .15s, color .15s;
}
body.kp-body .kp-snav-cart:hover {
  color: var(--yellow, #FECE15) !important;
}

body.kp-body .kp-snav {
  border-bottom: 0;
}

body.kp-body .kp-pdp .pv-minpill {
  height: 42px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ─────────── hover-превью карточки: видео / второй ракурс ───────────
 * ═══════════════════════════════════════════════════════════════
 * КАРТОЧКА КАТАЛОГА — HOVER-ПРЕВЬЮ (13.07.2026)
 *
 * Наведение на фото карточки: поверх обложки кроссфейдом появляется
 * <video> (товары с видео П111, мета _kp_video) или <img> второго
 * ракурса (первая картинка галереи). Элемент рисует JS лениво при
 * первом hover (main.js: initCardHoverPreview) — до наведения каталог
 * не тяжелеет. Разметка: product-card.php (data-kp-video /
 * data-kp-hover-img на .kp-prod-imgwrap + маркер .kp-prod-videomark).
 *
 * 1) .kp-prod-preview — абсолютный слой на весь imgwrap (тот 1:1
 *    квадрат из секции ex-patch-3.3). object-fit:contain как у фото.
 *    pointer-events:none — клики/ховер проходят сквозь на ссылку.
 * 2) Бейджи и избранное поднимаем над превью (z-index 2 > 1).
 * 3) Маркер «есть видео» — нейтральный тёмный кружок ▶ (жёлтый на
 *    экране один — у CTA, канон п.1). Прячется, пока крутится превью,
 *    и на touch-устройствах (hover-видео там не проигрывается).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-imgwrap {
  position: relative;
}

body.kp-body .kp-prod-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--fog, #F7F7F7);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
}
body.kp-body .kp-prod-preview.is-on {
  opacity: 1;
}

body.kp-body .kp-prod-badges,
body.kp-body .kp-prod-imgwrap .kp-prod-fav {
  z-index: 2;
}

body.kp-body .kp-prod-videomark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .55);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  transition: opacity .2s;
}
body.kp-body .kp-prod-imgwrap.is-previewing .kp-prod-videomark {
  opacity: 0;
}
@media (hover: none) {
  body.kp-body .kp-prod-videomark {
    display: none;
  }
}

/* Видео П111 — 16:9 в квадрате 1:1: contain давал пустые поля сверху/снизу
 * («обрезанная полоса», Nick 13.07). cover заполняет квадрат целиком, срезая
 * бока кадра — товар в роликах в центре. img-ракурс остаётся contain
 * (кадрирование как у обложки). */
body.kp-body video.kp-prod-preview {
  object-fit: cover;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 22 · ШАПКА — ДОВОДКА ПО ЭТАЛОНУ (v2, внедрено 22.07.2026)
   ║ Источник: design-reference/home-etalon.html (утверждён Николаем;
   ║ v2 подтверждена 22.07 по живому превью home-live-header.html).
   ║ Состав: правка 21.07 (7eb2df9) + фиксы её брака (иконки-точки,
   ║ «×» в пустом поиске, овальная лупа) + шрифтовой слой эталона
   ║ (Rubik — текст шапки, Futura — лого) + метрика эталона (ярус 98,
   ║ меню 52, корзина 38/13) + hover-подчёрк меню (реф. whatsapp.com).
   ║ Десктоп скоуплен @media 761+ — мобильная шапка 06.07 не тронута.
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Rubik 400/500 — текстовый шрифт шапки (woff2 в assets/fonts/) */
@font-face{font-family:'Rubik';src:url('../fonts/rubik-cyrillic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';src:url('../fonts/rubik-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+20BD,U+2122}
@font-face{font-family:'Rubik';src:url('../fonts/rubik-cyrillic-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';src:url('../fonts/rubik-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+20BD,U+2122}

@media (min-width: 761px) {
  /* Топбар: 34px, кегль 12.5, без иконок у адреса/времени/почты —
     читается служебной строкой, а не «крышкой» */
  html body.kp-body .kp-topbar { font-size: 12.5px !important; }
  html body.kp-body .kp-topbar-row {
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html body.kp-body .kp-topbar-left .kp-tb-item svg,
  html body.kp-body .kp-topbar-right .kp-tb-item svg { display: none !important; }

  /* Поиск: пилюля. Покой — серая заливка без обводки; hover/фокус —
     фон белеет + мягкая внутренняя окантовка (габарит не прыгает) */
  html body.kp-body .kp-search-form {
    border-radius: 999px !important;
    border: 0 !important;
    padding-right: 5px !important;
  }
  html body.kp-body .kp-search-wrap.is-open .kp-search-form,
  html body.kp-body .kp-search-form:focus-within,
  html body.kp-body .kp-search-form:hover {
    background: #fff !important;
    box-shadow: inset 0 0 0 1.5px var(--line-2, #D4D4D4) !important;
  }
  html body.kp-body .kp-search-input { padding-left: 20px !important; }
  /* Кнопка поиска: чёрный круг 38 (жёлтый бережём для CTA);
     stroke в CSS перебивает атрибут stroke="#0A0A0A" в svg разметки.
     min-габариты прижаты — прод-min-height:42 плющил круг в овал */
  html body.kp-body .kp-search-submit {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: var(--ink, #0A0A0A) !important;
  }
  html body.kp-body .kp-search-submit svg { stroke: #fff !important; width: 17px; height: 17px; }
  html body.kp-body .kp-search-submit:hover { background: #1f1f1f !important; }

  /* Touch-зоны мессенджеров ≥44px по вертикали — невидимо.
     Габарит <a> отпущен (width:auto): прод-ширина 22px border-box
     оставляла контенту 6px и max-width:100% плющил иконку в точку */
  html body.kp-body .kp-tb-msg {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 11px 8px !important;
    margin: -11px -8px !important;
  }
  html body.kp-body .kp-tb-msg img { flex: 0 0 auto; max-width: none; }
}

/* «×» в ПУСТОМ поиске — старый баг: у кнопки очистки стоит hidden,
   но каскад перебивает display. Возвращаем силу атрибуту (глобально) */
html body.kp-body .kp-search-clear[hidden] { display: none !important; }

/* Телефоны: основной 16/500, второй 14/400 серым —
   иерархия размером и цветом, не жиром (потолок 500) */
html body.kp-body .kp-phone-line:not(.kp-phone-mobile) {
  font-size: 16px !important;
  font-weight: 500 !important;
}
html body.kp-body .kp-phone-line.kp-phone-mobile {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ink-2, #3D3D3D) !important;
}

/* «Заказать звонок»: пилюля, 14/500 — единственная жёлтая кнопка в белом ярусе */
html body.kp-body .kp-cta-call,
html body.kp-body button.kp-cta-call {
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Полоса меню (жёлтая — как утверждено): веса к потолку 500, корзина-пилюля */
html body.kp-body .kp-snav-allcats,
html body.kp-body .kp-snav-allcats span,
html body.kp-body .kp-snav-link,
html body.kp-body .kp-snav-cart,
html body.kp-body .kp-snav-cart-sum {
  font-weight: 500 !important;
}
html body.kp-body .kp-snav-allcats span,
html body.kp-body .kp-snav-link { font-size: 13px !important; }
html body.kp-body .kp-snav-cart { border-radius: 999px !important; }

/* ШРИФТОВОЙ СЛОЙ ЭТАЛОНА: в home-etalon.html вся шапка, кроме лого,
   набрана Rubik (текстовый), Futura — лого и крупные заголовки.
   .kp-topbar * — потому что .kp-tb-item несут Futura напрямую */
@media (min-width: 761px) {
  html body.kp-body .kp-topbar,
  html body.kp-body .kp-topbar *,
  html body.kp-body .kp-search-input,
  html body.kp-body .kp-phone-line,
  html body.kp-body .kp-cta-call,
  html body.kp-body button.kp-cta-call,
  html body.kp-body .kp-snav-allcats span,
  html body.kp-body .kp-snav-link,
  html body.kp-body .kp-snav-cart,
  html body.kp-body .kp-snav-cart-sum {
    font-family: 'Rubik', system-ui, sans-serif !important;
  }
  /* трекинг капса в меню — как в эталоне */
  html body.kp-body .kp-snav-allcats span { letter-spacing: .5px !important; }
  html body.kp-body .kp-snav-link { letter-spacing: .4px !important; }
}

/* МЕТРИКА ЭТАЛОНА — попиксельная сверка 22.07 (замеры DOM на 1920px):
   белый ярус 98px (было 90), жёлтое меню 52px (было 56, жёсткие
   height:56 сидят на .kp-snav/.kp-snav-row/-left/-right/-link),
   корзина-пилюля 38px/кегль 13 (было 36/15) */
@media (min-width: 761px) {
  html body.kp-body .kp-header-row { min-height: 98px !important; }
  html body.kp-body .kp-snav-link,
  html body.kp-body .kp-snav-allcats {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body.kp-body .kp-snav-cart { height: 38px !important; font-size: 13px !important; }
  html body.kp-body .kp-snav-cart-sum { font-size: 13px !important; }
  html body.kp-body .kp-snav-left,
  html body.kp-body .kp-snav-right {
    height: 52px !important;
    min-height: 52px !important;
  }
  html body.kp-body .kp-snav,
  html body.kp-body .kp-snav-row { height: 52px !important; }
}

/* HOVER-ПОДЧЁРК МЕНЮ (референс Николая — whatsapp.com):
   полоска 2px растёт слева направо при наведении; при уходе курсора
   сжимается вправо (смена transform-origin — линия «проезжает»
   насквозь). Только transform — без перерисовок */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html body.kp-body .kp-snav-link { position: relative !important; }
  html body.kp-body .kp-snav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  }
  html body.kp-body .kp-snav-link:hover::after,
  html body.kp-body .kp-snav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  /* штатный ховер-приглуш убран — работает полоска */
  html body.kp-body .kp-snav-link:hover { opacity: 1 !important; }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 23 · КОРЗИНА — ПЕРЕСТРОЙКА ПО ЭТАЛОНУ (внедрено 26.07.2026)
   ║ Источник: design-reference/cart-etalon.html (утв. Николаем 08.07,
   ║ подтверждён 22.07). Сверка не на глаз, а замерами DOM:
   ║ 15 контрольных точек сошлись с эталоном 1:1.
   ║ Состав: панель товаров без карточки, строка товара, степпер-
   ║ пилюля с SVG −/+, сводка «Итого» (ОДИН слой паддингов),
   ║ кнопки-пилюли (одна жёлтая на экран), крестик 24px.
   ║ Правки Николая 26.07: «Назад» sentence case, верхний отступ
   ║ как на категориях (68px десктоп / 12px мобайл от шапки),
   ║ серая заливка строки при hover убрана, заметка по правому краю.
   ║ Живое превью: design-reference/КОРЗИНА-превью-v5.html
   ╚════════════════════════════════════════════════════════════════╝ */

/* arabic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 23 · КОРЗИНА — ВИЗУАЛ ПО ЭТАЛОНУ cart-etalon.html (22-23.07.2026)
   ║ Эталон утверждён Николаем 08.07, подтверждён 22.07. PHP-разметка
   ║ корзины v2 (08.07) НЕ трогается — только стилевой слой поверх.
   ║ Состав: Rubik-текст (дисплей Futura — кикер/H1/ИТОГО/ТОВАРЫ),
   ║ кнопки-пилюли 500 sentence (одна жёлтая CTA), степпер-пилюля без
   ║ разделителей, чекбокс 20/r6→чёрный, ₽/шт чёрные .72em, панель
   ║ и сводка по метрике эталона.
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Rubik добавочные веса 600/700 (текстовые акценты эталона) */

/* ── Шрифтовой слой: текст — Rubik, дисплей — Futura ── */
html body.kp-body .kp-cart-page,
html body.kp-body .kp-cart-page * {
  font-family: 'Rubik', system-ui, sans-serif !important;
}
html body.kp-body .kp-cart-head-kicker,
html body.kp-body .kp-cart-head-h,
html body.kp-body .kp-cart-panel-h,
html body.kp-body .kp-sum-h {
  font-family: "Futura PT", "Helvetica Neue", Arial, sans-serif !important;
}

/* ── Хлебная «Назад» и шапка страницы ── */
html body.kp-body .kp-cart-back { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-3, #6B6B6B) !important; }
html body.kp-body .kp-cart-back:hover { color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-cart-head-kicker {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--ink-3, #6B6B6B) !important;
}
html body.kp-body .kp-cart-head-h {
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  line-height: 1 !important;
}
html body.kp-body .kp-cart-bar {
  width: 56px !important;
  height: 5px !important;
  border-radius: 2px !important;
  margin-top: 14px !important;
}
html body.kp-body .kp-cart-head-blurb { font-size: 13px !important; color: var(--ink-3, #6B6B6B) !important; max-width: 340px !important; line-height: 1.55 !important; }
html body.kp-body .kp-cart-head-blurb b { color: var(--ink-2, #3D3D3D) !important; font-weight: 600 !important; }

/* ── Панель товаров ── */
html body.kp-body .kp-cart-panel-h { font-size: 14px !important; font-weight: 600 !important; letter-spacing: .8px !important; text-transform: uppercase !important; }
html body.kp-body .kp-cart-panel-count {
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 11px !important;
  background: var(--ink, #0A0A0A) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body.kp-body .kp-cart-clear { font-size: 13px !important; font-weight: 400 !important; color: var(--ink-3, #6B6B6B) !important; text-transform: none !important; letter-spacing: normal !important; }
html body.kp-body .kp-cart-clear:hover { color: var(--ink, #0A0A0A) !important; }

html body.kp-body .kp-cart-thumb {
  border-radius: var(--radius, 12px) !important;
  background: var(--fog, #F7F7F7) !important;
  border: 0 !important;
}
html body.kp-body .kp-cart-name { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; }
html body.kp-body .kp-cart-name:hover { color: var(--ink-2, #3D3D3D) !important; }
html body.kp-body .kp-cart-info { font-size: 12.5px !important; color: var(--ink-3, #6B6B6B) !important; }

/* чекбокс «С нанесением логотипа» — 20×20, r6, checked → чёрный */
html body.kp-body .kp-cart-brandcheck { font-size: 13px !important; color: var(--ink-2, #3D3D3D) !important; }
html body.kp-body .kp-cart-brandcheck-box {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--line, #E6E6E6) !important;
  border-radius: 6px !important;
  background: var(--paper, #fff) !important;
  color: transparent !important;
  transition: all .15s !important;
}
html body.kp-body .kp-cart-brandcheck:hover .kp-cart-brandcheck-box { border-color: var(--ink-3, #6B6B6B) !important; }
html body.kp-body .kp-cart-brandcheck-i:checked + .kp-cart-brandcheck-box {
  background: var(--ink, #0A0A0A) !important;
  border-color: var(--ink, #0A0A0A) !important;
  color: #fff !important;
}

/* степпер — пилюля без разделителей (референс Rivian, утв. 08.07) */
html body.kp-body .kp-cart-qty .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 999px !important;
  background: var(--paper, #fff) !important;
  overflow: hidden !important;
}
html body.kp-body .kp-cart-qty .quantity .minus,
html body.kp-body .kp-cart-qty .quantity .plus {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-3, #6B6B6B) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.kp-body .kp-cart-qty .quantity .minus:hover,
html body.kp-body .kp-cart-qty .quantity .plus:hover { color: var(--ink, #0A0A0A) !important; background: transparent !important; }
html body.kp-body .kp-cart-qty .quantity .qty {
  width: 56px !important;
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink, #0A0A0A) !important;
  text-align: center !important;
  box-shadow: none !important;
}
html body.kp-body .kp-cart-qty-stock { font-size: 11.5px !important; color: var(--ink-3, #6B6B6B) !important; margin-top: 7px !important; }

/* цены строки: ₽ чёрный .72em, «₽/шт» серым */
html body.kp-body .kp-cart-price { font-size: 19px !important; font-weight: 600 !important; }
html body.kp-body .kp-cart-price-u { font-size: .72em !important; font-weight: 500 !important; color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-cart-price-per { font-size: 12px !important; color: var(--ink-3, #6B6B6B) !important; margin-top: 4px !important; }
html body.kp-body .kp-cart-x { color: var(--ink-3, #6B6B6B) !important; }
html body.kp-body .kp-cart-x:hover { color: var(--ink, #0A0A0A) !important; }

/* ── Сводка «Итого» ── */
html body.kp-body .kp-sum-card {
  border: 1px solid var(--line, #E6E6E6) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05) !important;
}
html body.kp-body .kp-sum-h { font-size: 15px !important; font-weight: 600 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-sum-h-count { font-size: 13px !important; color: var(--ink-3, #6B6B6B) !important; }
html body.kp-body .kp-sum-row { font-size: 14px !important; color: var(--ink-2, #3D3D3D) !important; }
html body.kp-body .kp-sum-row b { font-size: 15px !important; font-weight: 600 !important; color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-sum-row.is-total > span { font-size: 15px !important; font-weight: 600 !important; color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-sum-row.is-total b { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.5px !important; }
html body.kp-body .kp-sum-row-u { font-size: .72em !important; font-weight: 600 !important; color: var(--ink, #0A0A0A) !important; }
html body.kp-body .kp-sum-hint { font-size: 12.5px !important; color: var(--ink-3, #6B6B6B) !important; line-height: 1.5 !important; }

/* кнопки: одна жёлтая пилюля-CTA + ghost, 500, sentence case */
html body.kp-body .kp-sum-cta {
  height: 52px !important;
  border-radius: 999px !important;
  background: var(--yellow, #FECE15) !important;
  color: var(--ink, #0A0A0A) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body.kp-body .kp-sum-cta:hover { background: #FFD933 !important; }
html body.kp-body .kp-sum-cta-2 {
  height: 48px !important;
  border-radius: 999px !important;
  background: var(--paper, #fff) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--ink, #0A0A0A) !important;
  color: var(--ink, #0A0A0A) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 10px !important;
}
html body.kp-body .kp-sum-cta-2:hover { background: var(--fog, #F7F7F7) !important; }
html body.kp-body .kp-sum-trust { font-size: 12.5px !important; color: var(--ink-3, #6B6B6B) !important; margin-top: 16px !important; }

/* факты под сводкой */
html body.kp-body .kp-sum-facts {
  background: var(--fog, #F7F7F7) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 16px 18px !important;
}
html body.kp-body .kp-sum-fact { font-size: 12.5px !important; color: var(--ink-2, #3D3D3D) !important; line-height: 1.45 !important; }
html body.kp-body .kp-sum-fact b { color: var(--ink, #0A0A0A) !important; font-weight: 600 !important; }
html body.kp-body .kp-sum-facts-link { font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink, #0A0A0A) !important; text-transform: none !important; letter-spacing: normal !important; }

/* ── Метрика строки товара (десктоп) ── */
@media (min-width: 761px) {
  html body.kp-body .kp-cart-row {
    position: relative !important;
    grid-template-columns: 88px 1fr auto auto !important;
    gap: 20px !important;
    padding: 24px 34px 24px 0 !important;
    border-bottom: 1px solid var(--line, #E6E6E6) !important;
  }
  html body.kp-body .kp-cart-thumb { width: 88px !important; height: 88px !important; }
  html body.kp-body .kp-cart-x { position: absolute !important; top: 24px !important; right: 0 !important; }
}

/* галочка trust — серая, как вся строка (эталон), не зелёная */
html body.kp-body .kp-sum-trust svg { color: inherit !important; stroke: currentColor !important; }

/* ── ИСПРАВЛЕНИЕ 23.07: панель товаров БЕЗ карточки (как в эталоне) ──
   Прод v2 обернул товары в .kp-cart-panel с рамкой+скруглением+тенью —
   в эталоне панель borderless, строки на белом с разделителями. */
html body.kp-body .kp-cart-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body.kp-body .kp-cart-panel-head {
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--line, #E6E6E6) !important;
  margin-bottom: 0 !important;
}
html body.kp-body .kp-cart-items { padding: 0 !important; }

@media (min-width: 761px) {
  /* колонки строки — фикс ширины цены/количества (в эталоне 88/1fr/auto/auto,
     но price-cell держит min-width, чтобы не сжималось до 60px) */
  html body.kp-body .kp-cart-row { padding-left: 0 !important; }
  html body.kp-body .kp-cart-price-cell { min-width: 112px !important; text-align: right !important; }
  html body.kp-body .kp-cart-qty-cell { text-align: center !important; }
}

/* Артикул — вся строка серая без жира (эталон: .art однотонный) */
html body.kp-body .kp-cart-info,
html body.kp-body .kp-cart-info b { font-weight: 400 !important; color: var(--ink-3, #6B6B6B) !important; }

/* ── ИСПРАВЛЕНИЕ 23.07 v2 (замеры vs эталон) ──────────────────────
   1) Кнопки сводки у́же (286 vs 330): .kp-sum-foot добавлял боковой
      паддинг 22px — обнуляем, кнопки на всю ширину карточки. */
html body.kp-body .kp-sum-foot { padding-left: 0 !important; padding-right: 0 !important; }

/* 2) Степпер: высота рамки 40 (была 36), глиф +/- тоньше и мельче,
      ближе к SVG-иконкам эталона (текстовые input-кнопки SVG не станут,
      но 15px/300 вместо 17px даёт тонкий крест, а не жирный). */
html body.kp-body .kp-cart-qty .quantity { height: 40px !important; }
html body.kp-body .kp-cart-qty .quantity .minus,
html body.kp-body .kp-cart-qty .quantity .plus {
  height: 40px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

/* 3) Кикер — ограничить ширину, чтобы не тянулся на всю строку */
html body.kp-body .kp-cart-head-kicker { display: inline-block !important; width: auto !important; }

/* ── ПЕРЕСТРОЙКА 23.07: SVG-иконки степпера (как эталон) ──────────────
   Текст «+»/«−» у input-кнопок скрываем, рисуем тонкую SVG через фон.
   Разметку/JS не трогаем — механика −/+ (WooDmart + kp_update_cart_qty)
   работает по полю .qty, кнопки остаются те же.
   ВАЖНО (баг 23.07): у WooDmart есть :hover c шорткатом `background`,
   который сбрасывал repeat→repeat (SVG тиражировался сеткой) и рисовал
   рамку. Поэтому ВСЕ фон-свойства + сброс рамки дублируем и в :hover. */
html body.kp-body .kp-cart-qty .quantity .minus,
html body.kp-body .kp-cart-qty .quantity .plus,
html body.kp-body .kp-cart-qty .quantity .minus:hover,
html body.kp-body .kp-cart-qty .quantity .plus:hover,
html body.kp-body .kp-cart-qty .quantity .minus:focus,
html body.kp-body .kp-cart-qty .quantity .plus:focus {
  color: transparent !important;
  font-size: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html body.kp-body .kp-cart-qty .quantity .minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
html body.kp-body .kp-cart-qty .quantity .plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
html body.kp-body .kp-cart-qty .quantity .minus:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
html body.kp-body .kp-cart-qty .quantity .plus:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
/* рамка-пилюля живёт на контейнере .quantity, кнопки внутри — без своей */
html body.kp-body .kp-cart-qty .quantity {
  border: 1px solid #D4D4D4 !important;
  overflow: hidden !important;
}

/* строка наличия под степпером (добавляется в шаблон) */
html body.kp-body .kp-cart-qty-stock { text-align: center !important; }

/* строка наличия — под степпером по центру (эталон .qty-cell/.qty-stock) */
html body.kp-body .kp-cart-qty-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
html body.kp-body .kp-cart-qty-stock { margin-top: 7px !important; text-align: center !important; }

/* ── ФИКС 23.07: внешний бокс степпера .kp-cart-qty (прод: рамка чёрная
   + радиус 6px) перекрывал внутреннюю пилюлю .quantity. Гасим внешний —
   видимая рамка-пилюля остаётся одна (на .quantity, 999px). */
html body.kp-body .kp-cart-qty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ══ КОРНЕВЫЕ ФИКСЫ 23.07 (по аудиту вычисленных стилей vs эталон) ══
   1) Токены серого на проде расходятся с эталоном: прод --ink-3=#8A8A8A,
      эталон=#6B6B6B. Скоупим канон-значения на страницу корзины —
      чинит ВСЕ серые разом (мета, артикул, хинт, иконки степпера). */
html body.kp-body .kp-cart-page {
  --ink-3: #6B6B6B !important;
  --ink-2: #3D3D3D !important;
  line-height: 1.5 !important;   /* 2) как эталон (body lh 1.5) */
}

/* 3) «Тень»/мыло у +/−: кнопка 38px, иконка должна быть ЧЁТНОЙ (14px),
      иначе центрирование даёт полупиксель → размытие. 14px → отступ 12px
      целый → иконка резкая. Плюс crispEdges для стабильного рендера. */
html body.kp-body .kp-cart-qty .quantity .minus,
html body.kp-body .kp-cart-qty .quantity .plus,
html body.kp-body .kp-cart-qty .quantity .minus:hover,
html body.kp-body .kp-cart-qty .quantity .plus:hover,
html body.kp-body .kp-cart-qty .quantity .minus:focus,
html body.kp-body .kp-cart-qty .quantity .plus:focus {
  background-size: 14px 14px !important;
}

/* ══ ДОВОДКА ПО АВТОСВЕРКЕ 23.07 (21 дельта → закрываем) ══ */
/* токен линии тоже расходился: прод --line=#E5E5E5, эталон=#E6E6E6 */
html body.kp-body .kp-cart-page { --line: #E6E6E6 !important; }

/* счётчик товаров: паддинг 0 6px (был 7) */
html body.kp-body .kp-cart-panel-count { padding: 0 6px !important; }

/* «Очистить»: убрать остаточные радиус/паддинг прод-ссылки */
html body.kp-body .kp-cart-clear { border-radius: 0 !important; padding: 0 !important; }

/* галочка нанесения: текст 400, без margin-top */
html body.kp-body .kp-cart-brandcheck { font-weight: 400 !important; margin-top: 0 !important; }
html body.kp-body .kp-cart-brandcheck-box { font-weight: 400 !important; }

/* поле количества: line-height normal (было 22.5) */
html body.kp-body .kp-cart-qty .quantity .qty { line-height: normal !important; }

/* хинт сводки: паддинг 16px 0 20px (эталон .hint) */
html body.kp-body .kp-sum-hint { padding: 16px 0 20px !important; }

/* кнопки сводки: line-height normal + ghost по центру */
html body.kp-body .kp-sum-cta,
html body.kp-body .kp-sum-cta-2 { line-height: normal !important; }
html body.kp-body .kp-sum-cta-2 { text-align: center !important; justify-content: center !important; }

/* ══ СТРУКТУРА СВОДКИ 23.07 (визуальная сверка — слепая зона автопроверки) ══
   Шапка сводки: убрать лишнюю рамку-разделитель, margin-bottom 20 (как эталон:
   линия только под .sum-rows перед хинтом). Ряды: gap 12, padding-bottom 20. */
html body.kp-body .kp-sum-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
}
html body.kp-body .kp-sum-rows {
  gap: 12px !important;
  row-gap: 12px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #E6E6E6 !important;
}

/* ══ ДОВОДКА 26.07 (замеры v4 vs cart-etalon, 1440px) ═══════════════════
   Осталось 6 дельт — все про отступы и мелкие контролы. */

/* 1) ГЛАВНОЕ: сводка «Итого» держала ВТОРОЙ слой паддингов внутри карточки
      (карточка 24 + head/rows ещё 22 по бокам) → строки «Общий тираж/Сумма»
      были 287px против 331 у кнопок, т.е. вдавлены на 44px и не выровнены
      с CTA под ними. Плюс вертикальные 18/16/18 добавляли карточке +86px.
      Эталон: паддинг ОДИН — на карточке. Обнуляем внутренние. */
html body.kp-body .kp-sum-head {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.kp-body .kp-sum-rows {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.kp-body .kp-sum-foot {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Степпер: пилюля была 40px внутри обёртки 38px — вылезала на 2px.
      Эталон: пилюля 39, кнопки 38. Обёртке отдаём высоту по содержимому. */
html body.kp-body .kp-cart-qty { height: auto !important; }
html body.kp-body .kp-cart-qty .quantity { height: 39px !important; }
html body.kp-body .kp-cart-qty .quantity .minus,
html body.kp-body .kp-cart-qty .quantity .plus { height: 38px !important; }

/* 3) Крестик удаления: прод даёт 32×32 круг, эталон — голые 24×24 без фона */
html body.kp-body .kp-cart-x,
html body.kp-body .kp-cart-x:hover {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) «₽» в итоговой сумме: .72em от 26px давало 18.7px — крупнее эталона.
      В обычных строках .72em совпадает (10.8) и остаётся как есть. */
html body.kp-body .kp-sum-row.is-total b .kp-sum-row-u { font-size: 15px !important; }

/* 5) Блок фактов под сводкой: в эталоне рамки нет — только серая заливка */
html body.kp-body .kp-sum-facts { border: 0 !important; }

/* 6) Мелкие зазоры под эталон: «Товары»+счётчик 10 (было 14),
      факты 11 (было 12), строка факта 10 (было 11);
      у цены зазор задавался дважды (gap 4 + margin-top 4) → 8px. */
html body.kp-body .kp-cart-panel-head-left { gap: 10px !important; }
html body.kp-body .kp-sum-facts { gap: 11px !important; }
html body.kp-body .kp-sum-fact { gap: 10px !important; }
html body.kp-body .kp-cart-price-per { margin-top: 0 !important; }

/* 7) Подсказка над кнопкой держала ещё и margin-bottom 16 поверх своего
      padding-bottom 20 — карточка была выше эталона ровно на эти 16px. */
html body.kp-body .kp-sum-hint { margin-bottom: 0 !important; }

/* ══ ПРАВКИ ПО ЗАМЕЧАНИЯМ НИКОЛАЯ 26.07 ════════════════════════════════ */

/* 1) «Назад» — прод гнал UPPERCASE, в эталоне sentence case.
      Отступ снизу 28px (эталон .back), было 24. */
html body.kp-body .kp-cart-back {
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 28px !important;
}

/* 2) Страница корзины прилипала к жёлтой полосе меню — вертикального
      отступа не было вовсе (padding 0).
      ВЕРХНИЙ отступ — по живым страницам категорий (решение Николая 26.07).
      Там контейнер страницы стартует на 52px ниже шапки (общий отступ
      шаблона, у корзины он такой же), а крошки добавляют своим padding
      ещё 16px → текст первой строки стоит на 68px от шапки.
      Значит корзине нужно ровно 16px сверху (десктоп) и 12px (мобильный) —
      тогда «Назад» встаёт точно на место крошек и переход
      каталог → корзина не «прыгает».
      НИЖНИЙ — ритм секций главной: 64 десктоп / 32 мобильный. */
html body.kp-body .kp-cart-page {
  padding-top: 16px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 760px) {
  html body.kp-body .kp-cart-page {
    padding-top: 12px !important;
    padding-bottom: 32px !important;
  }
}

/* 3) Заливка строки товара при наведении (прод: серый --fog) — в эталоне
      hover-состояния у строки нет вообще. Гасим. */
html body.kp-body .kp-cart-row:hover { background: transparent !important; }

/* 4) Заметка «Минимум заказа — 10 000 ₽» — по правому краю (эталон
      .head-note text-align:right); на узком экране возвращаем влево. */
html body.kp-body .kp-cart-head-blurb { text-align: right !important; }
@media (max-width: 600px) {
  html body.kp-body .kp-cart-head-blurb { text-align: left !important; }
}

/* 5) Ряд характеристик (свотч цвета + размер/материал) — шаблон его раньше
      не выводил, поэтому стилей не было. Числа эталона (.attrs/.swatch/.dot). */
html body.kp-body .kp-cart-attrs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px 14px !important;
}
html body.kp-body .kp-cart-swatch,
html body.kp-body .kp-cart-attr {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-2, #3D3D3D) !important;
  /* прод рисовал чип пилюлей с рамкой и заливкой — в эталоне это простой
     текст рядом с точкой цвета, без подложки */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* точку рисует общий kp_render_swatch_dot() (тот же, что в каталоге и на
   карточке) — задаём ей габарит эталона, не заводя вторую реализацию */
html body.kp-body .kp-cart-attrs .kp-prod-swatch-dot,
html body.kp-body .kp-cart-attrs .kp-prod-swatch-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
}

/* 6) Наличие под степпером — тоже новый вывод шаблона (kp_get_stock_info) */
html body.kp-body .kp-cart-qty-stock {
  font-size: 11.5px !important;
  color: var(--ink-3, #6B6B6B) !important;
  margin-top: 7px !important;
  text-align: center !important;
}

/* Эталон «Кружки»: ориентир цен нанесения в первом экране (06.08.2026).
   21.08.2026: пилюли как .kp-cat-chip; жёлтый только фоном цены (DS v2: не жёлтый текст). */
body.kp-body .kp-cat-methods-from {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
body.kp-body .kp-cat-methods-from li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 0;
    padding: 0 6px 0 14px;
    background: var(--fog, #F7F7F7);
    border-radius: 24px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-cat-methods-from-name {
    font-weight: 500;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-cat-methods-from-price {
    font-weight: 500;
    color: var(--ink, #0A0A0A);
    background: var(--yellow, #FECE15);
    border-radius: 16px;
    padding: 6px 10px;
    white-space: nowrap;
    font-feature-settings: "tnum";
}
/* 16.10.2026: метод со своей страницей — пилюля-ссылка; ниже — ссылка на посадочную «товар × нанесение». */
body.kp-body a.kp-cat-methods-from-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
body.kp-body .kp-cat-methods-from li:has(a.kp-cat-methods-from-link):hover { background: var(--line, #E5E5E5); }
body.kp-body a.kp-cat-methods-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #0A0A0A);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.kp-body a.kp-cat-methods-more:hover { text-decoration-color: var(--yellow, #FECE15); }

/* ═══════════════════════════════════════════════════════════════
 * Страницы нанесения: общие классы .kp-method (16.10.2026 — старый шаблон
 * page-kpromo-method удалён, оставлены только правила, которые использует
 * templates/page-kpromo-pm.php: .kp-method, -h1, -chip, -faq)
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-method { padding-bottom: 0; }
body.kp-body .kp-method-h1 {
  margin: 8px 0 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink, #0A0A0A);
  text-transform: uppercase;
}
body.kp-body .kp-method-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #E6E6E3);
  background: #fff;
  color: var(--ink, #0A0A0A);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
body.kp-body .kp-method-chip.is-active {
  background: var(--yellow, #FECE15);
  border-color: var(--yellow, #FECE15);
  color: var(--ink, #0A0A0A);
}
body.kp-body .kp-method-faq { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 980px) {
  body.kp-body .kp-method-h1 { font-size: 36px;}
}
@media (max-width: 760px) {
  body.kp-body .kp-method-h1 { font-size: 30px;}
  body.kp-body .kp-method-faq { padding: 36px 0;}
}

/* ─── КАТЕГОРИИ: МАТРИЦА ОРИЕНТИРОВОЧНЫХ ЦЕН С НАНЕСЕНИЕМ (B2B КЕЛЬВИКА) ─── */
body.kp-body .kp-cat-matrix-sec {
    padding: 8px 0 28px;
}
body.kp-body .kp-price-matrix-card {
    background: #FFFFFF;
    border: 1px solid var(--line, #EAEAEA);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}
body.kp-body .kp-price-matrix-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--yellow, #FECE15);
}
body.kp-body .kp-matrix-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
body.kp-body .kp-matrix-title-group {
    max-width: 820px;
}
body.kp-body .kp-matrix-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #0A0A0A);
    margin: 0;
}
body.kp-body .kp-matrix-subtitle {
    font-size: 13px;
    color: var(--ink-2, #6B6B6B);
    margin: 6px 0 0;
    line-height: 1.5;
}
body.kp-body .kp-matrix-cta-quick {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #0A0A0A);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--yellow, #FECE15);
    white-space: nowrap;
    align-self: center;
    transition: color 0.15s;
}
body.kp-body .kp-matrix-cta-quick:hover {
    color: #000;
    text-decoration-color: #000;
}
body.kp-body .kp-matrix-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
}
body.kp-body table.kp-price-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
    min-width: 680px;
}
body.kp-body table.kp-price-table th {
    background: var(--fog, #F5F5F5);
    padding: 12px 14px;
    font-weight: 700;
    color: var(--ink, #0A0A0A);
    border-bottom: 2px solid var(--line, #EAEAEA);
    white-space: nowrap;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
body.kp-body table.kp-price-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #EAEAEA);
    color: var(--ink-2, #6B6B6B);
    vertical-align: middle;
}
body.kp-body table.kp-price-table tr:hover td {
    background: #FAF8F2;
}
body.kp-body .kp-matrix-tag-hit {
    background: var(--yellow, #FECE15);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
}
body.kp-body .is-hit-tier {
    background: #FFFDF5;
}
body.kp-body .kp-cell-name {
    font-weight: 700;
    color: var(--ink, #0A0A0A);
    font-size: 14px;
}
body.kp-body .kp-cell-note {
    font-size: 12px;
    color: var(--ink-3, #999999);
    margin-top: 2px;
}
body.kp-body .kp-cell-price {
    font-weight: 700;
    color: var(--ink, #0A0A0A);
    font-size: 15px;
    white-space: nowrap;
}
body.kp-body .kp-cell-price small {
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-3, #999999);
}
body.kp-body .kp-cell-total {
    font-size: 12px;
    color: var(--ink-2, #6B6B6B);
    margin-top: 2px;
    white-space: nowrap;
}
body.kp-body .kp-matrix-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--line, #EAEAEA);
    flex-wrap: wrap;
    gap: 12px;
}
body.kp-body .kp-matrix-foot-note {
    font-size: 12px;
    color: var(--ink-3, #999999);
    max-width: 680px;
    line-height: 1.4;
}
body.kp-body .kp-matrix-foot-btn {
    background: var(--ink, #0A0A0A);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}
body.kp-body .kp-matrix-foot-btn:hover {
    background: #2A2A2A;
    color: #FFFFFF !important;
}

@media (max-width: 760px) {
    body.kp-body .kp-price-matrix-card {
        padding: 16px;
        margin-top: 12px;
    }
    body.kp-body .kp-matrix-title {
        font-size: 17px;
    }
    body.kp-body .kp-matrix-foot {
        flex-direction: column;
        align-items: stretch;
    }
    body.kp-body .kp-matrix-foot-btn {
        justify-content: center;
        text-align: center;
    }
}

/* ─────────── 23.10.2026: минимальный заказ в топбаре (решение Н.) ───────────
 * Десктоп — между адресом и почтой; ≤1100 — отдельной строкой по центру
 * (иначе не влезает рядом с адресом); мобила — второй строкой под телефоном. */
body.kp-body .kp-tb-min {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  line-height: 1;
}
body.kp-body .kp-tb-min b { color: var(--yellow, #FECE15); font-weight: 600; }
@media (max-width: 1100px) {
  body.kp-body .kp-topbar-row { flex-wrap: wrap; row-gap: 6px; }
  body.kp-body .kp-tb-min { order: 3; flex: 0 0 100%; justify-content: center; }
}
@media (max-width: 760px) {
  body.kp-body .kp-tb-min {
    order: -1 !important;
    flex: 0 0 100%;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 7px;
    margin-bottom: 2px;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
  }
}

/* ───────── Карта на главной (канон kelvika.ru) ───────── */
.kp-sec-map { width: 100%; padding: 0; margin: 0; background: #f1f1f1; }
.kp-sec-map .map-container { width: 100%; height: 500px; position: relative; }
.kelvika-map { height: 100%; width: 100%; background: #f1f1f1; }
.kelvika-map.leaflet-container { font-family: 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.kelvika-map.leaflet-container .leaflet-tile-pane { filter: grayscale(1) contrast(.94) brightness(1.04) !important; }
.kelvika-map.leaflet-container .leaflet-bottom.leaflet-left { left: 16px; bottom: 16px; }
.kelvika-map.leaflet-container .kv-map-ui { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kelvika-map.leaflet-container a.kv-map-open,
.kelvika-map.leaflet-container a.kv-map-route {
  display: inline-block;
  font-family: 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  transition: background .15s, color .15s;
}
.kelvika-map.leaflet-container a.kv-map-open { background: #FECE15; color: #000; }
.kelvika-map.leaflet-container a.kv-map-open:hover { background: #E6BF00; }
.kelvika-map.leaflet-container a.kv-map-route { background: #fff; color: #1D1D1B; border-color: #E0E0E0; }
.kelvika-map.leaflet-container a.kv-map-route:hover { background: #f4f4f4; }
.kelvika-map.leaflet-container a.kv-map-copy {
  font-family: 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #555;
  background: rgba(255,255,255,.9);
  padding: 6px 10px;
  border-radius: 25px;
  box-shadow: none;
  text-decoration: none;
}
.kelvika-map.leaflet-container .leaflet-top.leaflet-left { left: 16px; top: 16px; }
.kelvika-map.leaflet-container .leaflet-bar { display: flex; flex-direction: column; gap: 8px; border: 0; box-shadow: none; background: none; }
.kelvika-map.leaflet-container .leaflet-bar a,
.kelvika-map.leaflet-container .leaflet-bar a:first-child,
.kelvika-map.leaflet-container .leaflet-bar a:last-child {
  width: 44px;
  height: 44px;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  background: #fff;
  color: #1D1D1B;
  font: 400 24px/42px 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-indent: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.kelvika-map.leaflet-container .leaflet-bar a:hover { background: #f4f4f4; }
.kelvika-map.leaflet-container .leaflet-bar a.leaflet-disabled { color: #bbb; background: #f4f4f4; }
@media (max-width: 768px) {
  .kp-sec-map .map-container { height: 260px; }
  .kelvika-map.leaflet-container .kv-map-ui { gap: 8px; }
  .kelvika-map.leaflet-container a.kv-map-open,
  .kelvika-map.leaflet-container a.kv-map-route { padding: 11px 14px; font-size: 14px; }
  .kelvika-map.leaflet-container .leaflet-bottom.leaflet-left { left: 10px; bottom: 10px; }
  .kelvika-map.leaflet-container .leaflet-top.leaflet-left { left: 10px; top: 10px; }
}

/* ─────────── 23.10.2026: кнопка «Заказать звонок» на 761–1100 ───────────
 * main.css ≤1100 даёт шапке 3 колонки и прячет телефоны, но телефоны
 * показываются снова → 4 элемента в 3 колонках, кнопка уезжала вторым рядом
 * под жёлтое меню. Возвращаем 4 колонки; поиск ужимается первым. */
@media (min-width: 761px) and (max-width: 1100px) {
  html body.kp-body .kp-header-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 20px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  html body.kp-body .kp-header-row { gap: 14px !important; }
  html body.kp-body .kp-cta-call { padding: 0 16px !important; font-size: 12px !important; }
}

/* ─────────── 23.10.2026: планшет 761–980: топбар и жёлтое меню ───────────
 * Топбар: правило ≤980 (padding:6px 0) обнуляло боковые поля — текст и MAX
 * упирались в края. Меню: 5 пунктов не влезали — переносились в 2 строки,
 * «0 ₽» ломалось, корзина уезжала за край. Теперь пункты в одну строку,
 * лишнее листается вбок (затухание справа), «Все категории» и корзина на месте. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.kp-body .kp-topbar-row { padding-left: 20px !important; padding-right: 20px !important; }
  html body.kp-body .kp-snav-left {
    flex: 1 1 auto; min-width: 0; gap: 18px;
    margin-left: -20px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
  }
  html body.kp-body .kp-snav-left::-webkit-scrollbar { display: none; }
  html body.kp-body .kp-snav-allcats { position: sticky; left: 0; z-index: 1; flex: 0 0 auto; margin: 0 !important; padding: 0 16px 0 20px !important; white-space: nowrap; }
  html body.kp-body .kp-snav-link { flex: 0 0 auto; white-space: nowrap; font-size: 12px !important; }
  html body.kp-body .kp-snav-right { flex: 0 0 auto; margin-left: 12px; gap: 14px; }
  html body.kp-body .kp-snav-cart { white-space: nowrap; }
}