/* Конструктор уличной кухни `/kuhni/konstruktor` (04.10.2026) — поверх листов витрины и
   `kuhni.css` (схема сверху: классы `kp-*`). Раскладка по референсу владельца: слева сборки и
   модули, в центре кухня, справа сводка и кнопка. На телефоне — кухня сверху, ниже сборки,
   модули и сводка, кнопка — в полосе внизу экрана. */

.kb { padding-bottom: 40px; }

/* Шапка — столбиком: переключатель режимов слева первым, под ним заголовок (10.10.2026). */
.kb-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 8px 0 22px;
}

.kb-title h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}

.kb-sub {
  margin: 0;
  max-width: 560px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ── режимы: Собрать кухню | Отдельные модули ─────────────────────────────── */

.kb-modes {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-alt);
  gap: 2px;
}

.kb-mode {
  padding: 10px 18px;
  border-radius: 999px;
  font: 600 0.9rem 'Manrope', sans-serif;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.kb-mode:hover { color: var(--ink); }
.kb-mode.on { background: var(--surface); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(var(--ink-rgb), 0.5); }

.kb > .kb-series { margin: 0 0 18px; max-width: 640px; }

/* ── кухня: Urban | Metro ─────────────────────────────────────────────────── */

.kb-series {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: min(100%, 520px);
}

.kb-ser {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.kb-ser b { display: block; font-family: 'Manrope', sans-serif; font-size: 1.05rem; }
.kb-ser small { display: block; margin-top: 2px; color: var(--ink-mute); font-size: 0.78rem; line-height: 1.35; }
.kb-ser:hover { border-color: var(--ink-mute); }
.kb-ser.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── сетка (05.10, макет заказчика): слева «Добавить модуль», в центре кухня и «Ваша
   кухня», справа готовые сборки и отделка ─────────────────────────────────── */

/* 10.10.2026, «слева направо»: сборки и отделка (`kb-right`) → модули (`kb-left`) → кухня (`kb-center`). */
.kb-grid {
  display: grid;
  grid-template-columns: 320px 290px minmax(0, 1fr);
  grid-template-areas: 'right left center';
  gap: 18px;
  align-items: start;
}

.kb-grid[hidden] { display: none; }
/* Колонки — `minmax(0, 1fr)`: иначе лента готовых сборок на телефоне распирает колонку
   до своей ширины, и половина модулей уходит за край (`overflow: clip` прячет это даже от
   проверки прокрутки — поймано 04.10 по координатам кнопок). */
.kb-left, .kb-center, .kb-right { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.kb-box, .kb-stage { min-width: 0; }
.kb-left { grid-area: left; }
.kb-center { grid-area: center; }
.kb-right { grid-area: right; }

.kb-box {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 18px;
}

.kb-box h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
}

/* ── сцена ──────────────────────────────────────────────────────────────── */

/* Не липкая: под кухней теперь «Ваша кухня», и прилипшая сцена наезжала бы на неё. */
.kb-stage {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 14px 16px 16px;
}

.kb-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.kb-views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); }

.kb-view {
  border: 0;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font: 600 0.84rem 'Manrope', sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
}

.kb-view.on { background: var(--ink); color: var(--surface); }

.kb-size { margin: 0; font: 600 0.9rem 'Manrope', sans-serif; color: var(--ink); }

.kb-canvas {
  margin-top: 10px;
  min-height: 200px;
  border-radius: 12px;
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 28px 28px,
    #FAFBFB;
  display: flex;
  align-items: center;
}

/* Высота — по пропорциям самой кухни (у SVG свой viewBox): прямая 6 м в рамке 16:10 была
   полоской посреди пустоты. Потолок — чтобы Г с островом не вытягивалась на два экрана. */
.kb-canvas > svg { width: 100%; height: auto; max-height: 62vh; display: block; }

/* 3D — рамка фиксированной пропорции (сцене нужна высота), фон — та же сетка. Колонка по
   центру на ПК ~500 px — 16:10 давало полоску в 310 px, в которой не разглядеть модуль. */
.kb-canvas.is-3d { aspect-ratio: 4 / 3; }
.kb-3d { flex: 1 1 auto; align-self: stretch; min-height: 0; position: relative; overflow: hidden; border-radius: 12px; }
.kb-3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: 12px; }
.kb-3d-canvas:active { cursor: grabbing; }
.kb-3d-wait { margin: auto; padding: 24px; text-align: center; font-size: 0.9rem; color: var(--ink-mute); }

/* ── слой кнопок поверх 3D: позицию задаёт `transform` из кода, сдвиг к точке — `translate` ── */
.kb-ov { position: absolute; inset: 0; pointer-events: none; }
.kb-ov > * { position: absolute; left: 0; top: 0; pointer-events: auto; }
.kb-ov > [hidden] { display: none; }

/* Буква над модулем; у наведённого и выбранного раскрывается название. */
.kb-tag {
  translate: -50% -100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 3px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px -6px rgba(var(--ink-rgb), 0.35);
  font: 600 0.78rem 'Manrope', sans-serif;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.kb-tag b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 0.74rem; }
.kb-tag span { display: none; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; }
.kb-tag.hov, .kb-tag.on, .kb-tag:focus-visible { z-index: 3; }
.kb-tag.hov span, .kb-tag:focus-visible span { display: inline; }
/* У выбранного — только буква (18.10.2026): название росло в обе стороны и закрывало соседние
   буквы (Urban «Г-образная с островом»: «Узкий стеллаж» поверх F, на 360 — по 2–4 буквы).
   Название выбранного и так под холстом (`kb-tools-name`), рядом с «← → Убрать». */
.kb-tag.on span, .kb-tag.on.hov span, .kb-tag.on:focus-visible span { display: none; }
.kb-tag.hov, .kb-tag:focus-visible { border-color: var(--accent); }
.kb-tag.on { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.kb-tag.on b { background: var(--surface); color: var(--accent-ink); }
.kb-tag:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* «✕» выбранного — место выбирает `placeFloat` (над буквой, справа, слева, под), сдвиг целиком в JS. */
.kb-float { translate: none; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: 0 8px 22px -10px rgba(var(--ink-rgb), 0.45); z-index: 4; }
.kb-fbtn { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font: 600 0.92rem 'Manrope', sans-serif; color: var(--ink); cursor: pointer; }
.kb-fbtn:hover:not(:disabled) { border-color: var(--accent); }
.kb-fbtn:disabled { opacity: 0.35; cursor: default; }
.kb-fbtn.del { color: #A4472A; }

/* «+» у края ряда. */
.kb-add {
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), 0.7), 0 0 0 4px rgba(var(--accent-rgb), 0.16);
  font: 600 0.82rem 'Manrope', sans-serif;
  cursor: pointer;
  transition: box-shadow .2s;
}
.kb-add i { font: 500 1.35rem/1 'Manrope', sans-serif; font-style: normal; margin-top: -2px; }
.kb-add.wide { padding: 0 14px 0 10px; }
.kb-add:hover, .kb-add.on { box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), 0.7), 0 0 0 6px rgba(var(--accent-rgb), 0.24); }
.kb-add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* Список «+»: рядом с кнопкой; на узком холсте — снизу во всю ширину. */
.kb-pop {
  width: 300px;
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 44px -18px rgba(var(--ink-rgb), 0.55), 0 0 0 1px var(--hair);
  z-index: 5;
}
.kb-pop.sheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72%; }
.kb-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 6px 14px; font: 700 0.86rem 'Manrope', sans-serif; color: var(--ink); }
.kb-pop-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--bg); cursor: pointer; font-size: 0.86rem; color: var(--ink-soft); }
.kb-pop-list { display: grid; gap: 4px; padding: 4px 8px 8px; overflow-y: auto; overscroll-behavior: contain; }

/* Модуль в списках (слева и в «+»): мини-фото впереди, название и размер, буква справа. */
.kb-mod, .kb-pop-i {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  min-height: 60px;
}
.kb-pop-i { border-color: transparent; }
.kb-mod:hover, .kb-pop-i:hover, .kb-pop-i:focus-visible { border-color: var(--accent); }
.kb-mod-pic { width: 64px; height: 48px; border-radius: 8px; background: linear-gradient(180deg, #F6F7F7 0%, #E9ECED 100%); display: grid; place-items: center; overflow: hidden; }
.kb-mod-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kb-mod-pic.has .kb-mod-code { display: none; }
.kb-mod-letter { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 7px; border: 1.3px solid var(--ink); font: 700 0.78rem 'Manrope', sans-serif; color: var(--ink); }

/* Модуль на схеме — кнопка: виден фокус, видно выделение. */
.kb-plan [data-row] { cursor: pointer; outline: none; }
.kb-plan [data-row]:hover > rect { fill: #EEF3F5; }
.kb-plan [data-row]:focus-visible > rect { stroke: var(--accent); stroke-width: 2.4; }
.kb-plan .kb-sel > rect { fill: var(--accent-on); stroke: var(--accent); stroke-width: 2.6; }

/* Пергола под кухней. */
.kb-perg-roof { fill: rgba(var(--accent-rgb), 0.06); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.kb-perg-post { fill: var(--ink-soft); }
.kb-perg-t { font: 600 150px 'Manrope', sans-serif; fill: var(--accent-ink); }

/* Вид спереди — стили рисунка в `kuhni.css` (он нужен и в каталоге). */

.kb-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--accent-on);
}

.kb-tools[hidden], .kb-hint[hidden] { display: none; }
.kb-tools-name { flex: 1; font: 600 0.88rem 'Manrope', sans-serif; color: var(--accent-ink); min-width: 0; }

.kb-tool {
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 600 0.9rem 'Manrope', sans-serif;
  color: var(--ink);
  cursor: pointer;
}

.kb-tool:disabled { opacity: 0.35; cursor: default; }
.kb-tool-del { color: #A4472A; }
.kb-hint { margin: 12px 0 0; font-size: 0.84rem; color: var(--ink-mute); }

/* Мостик в режим модулей у выделенного модуля — ссылкой, не кнопкой покупки. */
.kb-tool-buy { flex-basis: 100%; font: 600 0.82rem 'Manrope', sans-serif; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.kb-tools { flex-wrap: wrap; }

/* ── слева: готовые сборки и модули ──────────────────────────────────────── */

.kb-presets { display: grid; gap: 8px; }

.kb-preset {
  display: grid;
  grid-template-columns: 74px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.kb-preset-pic { grid-row: 1 / 3; height: 52px; display: flex; background: var(--bg); border-radius: 8px; }
.kb-preset-pic svg { width: 100%; height: 100%; }
.kb-preset-t { font: 600 0.88rem 'Manrope', sans-serif; align-self: end; }
.kb-preset small { color: var(--ink-mute); font-size: 0.76rem; align-self: start; }
.kb-preset:hover { border-color: var(--ink-mute); }
.kb-preset.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #F6FAFB; }

.kb-rows { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.kb-rows[hidden] { display: none; }

.kb-row {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 0.8rem 'Manrope', sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
}

.kb-row.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kb-row:disabled { opacity: 0.4; cursor: not-allowed; }

/* По одной в ряд в узкой левой колонке ПК; на планшете и телефоне — по две, где хватает места
   (сама кнопка — выше, вместе со списком «+»: мини-фото, название, буква справа). */
.kb-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }

/* Буква — заглушка мини-фото, пока рендер не готов или браузер без WebGL. */
.kb-mod-code { width: 30px; height: 30px; border-radius: 8px; border: 1.4px solid var(--ink); display: grid; place-items: center; font: 700 0.85rem 'Manrope', sans-serif; font-style: normal; background: var(--surface); }
.kb-mod-code.eq { background: #F4F6F7; }
.kb-mod-t { font: 600 0.8rem/1.25 'Manrope', sans-serif; min-width: 0; overflow-wrap: anywhere; }
.kb-mod-t small { display: block; margin-top: 2px; font: 500 0.7rem 'Manrope', sans-serif; color: var(--ink-mute); }

.kb-corner { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 0.84rem; color: var(--ink-soft); cursor: pointer; }
.kb-corner[hidden] { display: none; }
.kb-corner input { margin-top: 2px; accent-color: var(--accent); }

/* ── справа: сводка ──────────────────────────────────────────────────────── */

.kb-badge {
  display: inline-block;
  margin: -4px 0 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  font: 600 0.76rem 'Manrope', sans-serif;
  color: var(--ink-soft);
}

.kb-badge.own { background: var(--accent-on); color: var(--accent-ink); }

.kb-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.88rem;
}

/* «Ваша кухня» теперь своя карточка под 3D — черта и отступ отделяли факты от отделки ниже. */
.kb-sum .kb-facts { margin: 0; padding: 0; border: 0; }
.kb-facts dt { color: var(--ink-mute); }
.kb-facts dd { margin: 0; color: var(--ink); font-weight: 600; }

.kb-pick { margin-bottom: 12px; }
.kb-cap { display: block; margin: 0 0 6px; font: 600 0.8rem 'Manrope', sans-serif; color: var(--ink); }
.kb-cap span { color: var(--ink-mute); font-weight: 500; margin-left: 6px; }
.kb-right .swopt { padding: 7px 12px 7px 8px; font-size: 0.82rem; }
.kb-right .swchip { width: 22px; height: 22px; }

.kb-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.kb-segb {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 7px 12px;
  font: 500 0.82rem 'Manrope', sans-serif;
  color: var(--ink);
  cursor: pointer;
}

.kb-segb.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.kb-fit { margin: 4px 0 12px; padding-top: 12px; border-top: 1px solid var(--hair); }

.kb-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 500 0.88rem 'Manrope', sans-serif;
  color: var(--ink);
}

.kb-fit-res { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.45; }
.kb-fit-res:empty { display: none; }
.kb-fit-res.ok { color: #2F6B4A; }
.kb-fit-res.no { color: #A4472A; }


.kb-buy { padding-top: 12px; border-top: 1px solid var(--hair); }
.kb-price { margin: 0 0 10px; font: 700 1.2rem 'Manrope', sans-serif; color: var(--ink); }
/* Сумма модулей (09.10): крупно сумма, под ней — как сложилась. */
.kb-price.has { margin: 0; font-size: 1.6rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kb-price-how { margin: 2px 0 12px; font-size: 0.86rem; color: var(--ink-mute); }
.kb-stock { margin: -4px 0 12px; font-size: 0.84rem; line-height: 1.45; color: #8a4b00; }
.kb-stock[hidden] { display: none; }
.kb-buy .btn-order { width: 100%; }
.kb-buy .ctanote { margin-top: 10px; }

.kb-nojs { padding: 16px; border-radius: 14px; background: var(--surface); }

/* ── режим «Отдельные модули» ─────────────────────────────────────────────── */

.km-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }

.km-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.km-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  scroll-margin-top: 100px;
}

.km-card[hidden] { display: none; }
.km-card.km-hl { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.km-pic {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #F6F7F7 0%, #ECEFF0 100%);
  margin-bottom: 12px;
  padding: 8px;
}

/* Рамка картинки — одна на все карточки (06.10, заказчик: «рамки одинаковые, чтобы ровная
   линия»). `aspect-ratio` уступал содержимому: схема с высоким смесителем (Metro A) или крышкой
   гриля растягивала рамку, и заголовки в ряду вставали на разной высоте. Теперь картинка лежит
   внутри рамки абсолютно и в размер рамки не входит. */
.km-pic { position: relative; overflow: hidden; }
.km-pic > svg, .km-pic > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.km-svg { display: block; }
/* Мокап на белом — белое растворяется в подложке рамки, как кадры каталога. */
.km-pic-photo { padding: 0; }
.km-pic-photo > img { inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Что на мокапе — под выбором цвета и отделки (в рамке закрывала низ модуля). */
.km-pic-note { margin: 0; font-size: 0.74rem; line-height: 1.4; color: var(--ink-mute); }
.km-pic-note[hidden] { display: none; }
.km-svg rect, .km-svg path, .km-svg line, .km-svg circle, .km-svg ellipse { vector-effect: non-scaling-stroke; }
.km-kicker { margin: 0 0 2px; font: 600 0.72rem 'Manrope', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.km-name { margin: 0 0 4px; font: 700 1.05rem 'Manrope', sans-serif; color: var(--ink); }
.km-text { margin: 0 0 4px; font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); }
.km-size { margin: 0 0 12px; font-size: 0.8rem; color: var(--ink-mute); }

.km-pick { display: grid; gap: 10px; margin-bottom: 14px; }
.km-swatches { display: flex; align-items: center; gap: 8px; }
.km-sw { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--sw); cursor: pointer; padding: 0; }
.km-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.km-swname { font-size: 0.82rem; color: var(--ink-soft); }
.km-opt { display: grid; gap: 4px; }
.km-optcap { font: 600 0.74rem 'Manrope', sans-serif; color: var(--ink-mute); }

.km-buy {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.km-price { margin: 0; font: 700 1.15rem 'Manrope', sans-serif; color: var(--ink); }
/* Склад (09.10): кончился модуль выбранного цвета — продаём предзаказом. */
.km-stock { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.45; color: #8a4b00; }
.km-stock[hidden] { display: none; }
.km-price small { font-weight: 500; font-size: 0.76rem; color: var(--ink-mute); }

.km-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.km-qty button { width: 38px; height: 38px; border: 0; background: var(--surface); font: 600 1rem 'Manrope', sans-serif; color: var(--ink); cursor: pointer; }
.km-qty span { min-width: 28px; text-align: center; font: 600 0.92rem 'Manrope', sans-serif; }

.km-buy .km-add { grid-column: 1 / -1; width: 100%; margin: 0; }
.km .km-buy .btn-order.km-added { background: #2F6B4A; border-color: #2F6B4A; }
.km-done { grid-column: 1 / -1; text-align: center; font: 600 0.86rem 'Manrope', sans-serif; color: var(--accent-ink); }
.km-done[hidden] { display: none; }

.km-more { margin: 24px 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.km-more a { color: var(--accent-ink); font-weight: 600; }

/* Полоса с кнопкой — только телефон. */
.kb-bar { display: none; }

/* ── планшет: сцена на всю ширину, ниже две колонки ─────────────────────── */

@media (max-width: 1180px) {
  .kb-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'center center' 'right left';
  }
  .kb-canvas.is-3d { aspect-ratio: 16 / 10; }
}

/* ── телефон ─────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .kb-head { align-items: stretch; }
  .kb-modes { width: 100%; }
  .kb-mode { flex: 1; text-align: center; padding: 10px 8px; font-size: 0.84rem; }
  .km-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-series { min-width: 0; width: 100%; }
  .kb-ser { padding: 10px 12px; }
  .kb-ser small { font-size: 0.72rem; }
  .kb-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'center' 'left' 'right'; gap: 12px; }
  .kb-left, .kb-center, .kb-right { gap: 12px; }
  .kb-stage, .kb-box { padding: 12px; border-radius: 14px; }
  .kb-canvas { min-height: 160px; }
  /* Квадрат: над модулями буквы, по краям «+», снизу список — в 4:3 на 360 px им тесно. */
  .kb-canvas.is-3d { aspect-ratio: 1 / 1; }
  .kb-palette { grid-template-columns: minmax(0, 1fr); }
  /* Кружок «Назад» сайта (`.crumb-float`) висит у нижнего края — над полосой с кнопкой. */
  body:has(#kb-bar) .crumb-float { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Готовые сборки — лентой, чтобы не листать четыре строки. */
  .kb-presets { grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .kb-preset { scroll-snap-align: start; }
  .kb-tool { min-width: 48px; height: 44px; }
  .kb-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -22px rgba(var(--ink-rgb), 0.5);
  }
  .kb-bar[hidden] { display: none; }
  .kb-bar-t { flex: 1; min-width: 0; display: grid; }
  .kb-bar-t b { font: 700 0.92rem 'Manrope', sans-serif; }
  .kb-bar-t small { color: var(--ink-mute); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Кнопка витрины растянута на всю ширину (`product.css`) — в полосе она рядом с подписью. */
  .kb-bar .btn-order { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 12px 18px; font-size: 0.92rem; }
  .kb { padding-bottom: 90px; }
}

/* ── «Нужен только один модуль?» под «Добавить модуль» (08.10) ─────────────────
   Дубль вкладки «Отдельные модули». Ссылка-карточка в другом цвете, чем палитра модулей:
   палитра добавляет в сборку, эта уводит в покупку поштучно — путать их нельзя. */
/* 10.10: меньше — две строки (вопрос и ссылка), без пояснения. */
.kb-solo {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--dark, var(--ink));
  color: var(--dark-ink, #fff);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.kb-solo:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -26px rgba(var(--ink-rgb), 0.7); }
.kb-solo:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.kb-solo-eyebrow { font: 600 0.7rem 'Manrope', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.kb-solo-title { display: inline-flex; align-items: center; gap: 10px; font: 700 0.92rem 'Manrope', sans-serif; }
.kb-solo-title svg { flex: none; transition: transform .25s; }
.kb-solo:hover .kb-solo-title svg { transform: translateX(3px); }
.kb-solo-text { font: 400 0.84rem/1.45 'Manrope', sans-serif; color: rgba(255, 255, 255, 0.78); }
.kb-solo-text b { font-weight: 700; color: #fff; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .kb-solo, .kb-solo-title svg { transition: none; }
}