/* Виды оформления кабинета. Базовые стили — в classic.css, здесь только то,
   чем шасси отличаются друг от друга: Folder, CRM, Minimal и плитки выбора вида.
   Все четыре вида несут класс body.classic, поэтому таблицы, панели и формы
   не дублируются — меняется только расположение навигации. */

/* Крючок для навигационных кнопок: CRM и Minimal перекрашивают навигацию,
   не задевая такие же .kbtn внутри содержимого. */
.kbtn--nav { }

/* Аварийный выход, если шасси не отрисовало переключатель вида.
   В норме не появляется никогда — это страховка от «залип в виде». */
.kescape {
  position: fixed; top: 4px; right: 4px; z-index: 9000;
  background: var(--k-accent); color: var(--k-on, #000);
  border: 1px solid var(--k-line); padding: 4px 10px; font-size: 12px; cursor: pointer; opacity: 0.55;
}
.kescape:hover { opacity: 1; }

/* ================================================================
   Шапка по макету слайда 11: три полосы
   ================================================================ */

/* полоса 1 — контакты слева, за ними город и роль (П1, П4 29.09), служебные пилюли справа */
.kstrip {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  flex-wrap: wrap; padding: 9px 20px; background: var(--k-panel);
}
.kstrip__brand { display: flex; align-items: baseline; gap: 14px; font-size: 12.5px; }
.kstrip__brand b { font: italic 900 17px/1 Arial, sans-serif; letter-spacing: -0.03em; }
.kstrip__brand span { font-style: italic; font-weight: 700; }
.kstrip__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.kpill {
  background: var(--k-accent); color: var(--k-on, #000);
  border: 1px solid var(--k-line); border-radius: 999px;
  min-height: 22px; padding: 3px 16px; font-size: 12px; cursor: pointer;
  transition: transform 260ms var(--e), background 200ms var(--e);
}
.kpill:hover { background: var(--k-dark); color: #fff; transform: translateY(-1px); }

/* Город и «Вы: …» (П1, П4 29.09) — плашки одного размера во всех видах: город — кнопка цвета схемы (решение №15 о жёлтом
   городе отменено, жёлтая теперь «На рынке с»), роль — надпись того же вида, без указателя и подъёма при наведении.
   Блок .kplace стоит в полосе 1 (classic), в строке поиска (crm), в верхней строке (minimal), у знака (modern). */
.kplace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.kplace__city {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  min-height: 30px; font-size: 13px; white-space: nowrap;
}
.kplace__t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kplace__city .ic { flex: 0 0 auto; }
.kplace__role {
  display: inline-flex; align-items: center; min-height: 30px; padding: 3px 16px;
  border-radius: 999px; font-size: 13px; white-space: nowrap; cursor: default;
}
.kplace--kpill .kplace__role { background: var(--k-accent); color: var(--k-on, #000); border: 1px solid var(--k-line); }
/* Смена кабинета «покупаю / продаю» (правки 04.10, шаг В.13; Б27) — кнопка-плашка сразу за «Вы: …» у компаний с двумя кабинетами:
   того же размера, что город; не помещается в строку — уходит на следующую (блок .kplace переносит плашки) */
.kplace__mode { display: inline-flex; align-items: center; min-height: 30px; font-size: 13px; white-space: nowrap; }
/* под указателем плашка не приподнимается (как остальные .kpill): во второй строке блока промежуток до города стал бы 7 px */
.kplace .kplace__mode:hover { transform: none; }

/* П2 (29.09): «На рынке с 2023 года» под логотипом — надпись, а не кнопка: фирменный жёлтый, чёрный курсив, без указателя */
.ksince {
  display: inline-block; justify-self: start; background: #FFD400; color: #000;
  border: 1px solid rgba(0, 0, 0, .35); border-radius: 999px; padding: 3px 14px;
  font: italic 700 12px/1.25 Arial, sans-serif; white-space: nowrap; cursor: default;
}

/* полоса 2 — логотип раздела с «На рынке с …», поиск, кто вы, балансы */
.kbar--wide { display: grid; gap: 0; padding: 0; }
.kbar__main {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: clamp(14px, 2vw, 34px); align-items: center; padding: 14px 20px 12px;
}
.kbrand { display: grid; gap: 6px; justify-items: start; }
.kbrand__t { font: italic 900 26px/0.94 Arial, sans-serif; letter-spacing: -0.03em; }
.kbrand__t i { font-style: italic; }

.ksrch { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.ksrch__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.ksrch__row .kbar__search { min-height: 38px; }

.kwho { display: grid; gap: 2px; text-align: right; font-size: 12.5px; line-height: 1.3; }

.kbalbox {
  display: grid; gap: 2px; justify-items: center; cursor: pointer;
  background: #fff; color: var(--k-ink); border: 1px solid var(--k-line);
  padding: 8px 14px; transition: transform 260ms var(--e);
}
.kbalbox b { font-size: 17px; }
.kbalbox span { font-size: 12.5px; }
.kbalbox:hover { transform: translateY(-1px); }

/* полоса 3 — меню тремя группами */
.knav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 0 20px 12px;
}
.knav__i {
  background: none; border: 0; cursor: pointer;
  color: var(--k-on, #000); font-size: 13.5px; font-weight: 700;
  padding: 6px 10px; min-height: 30px; white-space: nowrap;
  transition: color 200ms var(--e), transform 260ms var(--e);
}
.knav__i:hover { transform: translateY(-1px); text-decoration: underline; text-underline-offset: 4px; }
.knav__i.is-on { color: #FFD400; }
/* Разрывы между группами: первый небольшой, второй растягивается —
   на макете личные разделы отброшены к правому краю. */
.knav__gap { flex: 0 0 30px; }
.knav__gap:nth-of-type(2) { flex: 1 1 60px; }
/* серая отбивка между шапкой и рабочей областью */
.kbar__rule { height: 14px; background: var(--k-bar); }
/* П3 (29.09, слайд 29-03): в classic тёмная шапка (логотип, поиск, кто вы, балансы, колокол, меню) с линией под ней
   закреплена: прилипает к верху окна при прокрутке, светлая полоса 1 уезжает вверх.
   Слой выше содержимого (панели, шапки таблиц — 1–2) и рельсы minimal (20), ниже окна «Доставки» (50), окон (60) и тоста (70);
   список уведомлений (40) — внутри шапки. На телефоне — отрицательный top: остаётся только меню (header-revisions.css). */
.khead { position: sticky; top: 0; z-index: 30; }

@media (max-width: 1180px) {
  .kbar__main { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .kwho, .kbalbox, .kbar__main .kbell { grid-column: span 1; }
  .knav__gap { flex-basis: 12px; min-width: 12px; }
}

/* вкладки личного кабинета (покупателя и, С8 30.09, продавца) — через 8 px на любой ширине (правило промежутков между целями) */
.kacct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* ================================================================
   Витрина интернет-магазина по макету слайда 11
   ================================================================ */
.kshop { display: grid; grid-template-columns: 214px minmax(0, 1fr) 232px; gap: 20px; align-items: start; }

.kshopf {
  border: 1px solid #C9C9C9; border-radius: 12px; padding: 16px 16px 18px;
  display: grid; gap: 20px; align-content: start; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.kshopf__t { font-size: 15px; font-weight: 700; border-bottom: 1px solid #C9C9C9; padding-bottom: 6px; }
.kshopf__grp { display: grid; gap: 8px; }
.kshopf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kshopf input[type="number"], .kshopf input[type="text"] {
  width: 100%; min-height: 30px; padding: 3px 10px;
  border: 1px solid #C9C9C9; border-radius: 7px; font-size: 12.5px;
}
.kshopf label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; min-height: 26px; }
.kshopf__brands { display: grid; gap: 4px; max-height: 210px; overflow: auto; }
.kshopf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kshopf__reset {
  background: none; border: 0; cursor: pointer; font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 3px; opacity: 0.7;
}
.kshopf__reset:hover { opacity: 1; }

.kshop__photo {
  border: 1px solid #C9C9C9; border-radius: 12px; background: var(--k-panel);
  min-height: 360px; display: grid; align-content: start; justify-items: center; gap: 10px;
  padding: 20px; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  /* панель держится в поле зрения, пока листаешь список товаров: витрина лежит прямо на странице, и панель прилипает
     под закреплённой шапкой (П3, --k-stuck-h — skins/common.js wirePin), а не уходит под неё */
  position: sticky; top: calc(var(--k-stuck-h, 0px) + 12px);
}
.kshop__photo .kmoney { font-size: 15px; font-weight: 700; }
/* строка, которую сейчас показывает панель */
.kshop .ktable tr.is-sel td { background: var(--k-selected); }
[data-photo] { cursor: zoom-in; }
.kshop__photo b { font-size: 13.5px; }
.kshop__photo span { font-size: 12px; opacity: 0.7; }
.kshop__ph {
  width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 8px;
  border: 1px solid #C9C9C9; display: grid; place-items: center; font-size: 12px; opacity: 0.55;
}
.kcartbtn {
  background: none; border: 1px solid var(--k-line); border-radius: 6px;
  width: 30px; height: 26px; cursor: pointer; display: inline-grid; place-items: center;
  transition: background 200ms var(--e), transform 260ms var(--e);
}
.kcartbtn:hover { background: var(--k-accent); color: var(--k-on, #000); transform: translateY(-1px); }
/* фокус подсвечен так же, как наведение: превью по Tab должно быть видно */
.kshop .kbtn:focus-visible, .kshop .kcartbtn:focus-visible {
  background: var(--k-selected); outline: 2px solid var(--k-dark); outline-offset: 1px;
}
.kqty { width: 46px; text-align: center; border: 1px solid var(--k-line); border-radius: 6px; min-height: 26px; }
/* Медиазапросы витрины стоят ПОСЛЕ базовых правил: при равной специфичности
   выигрывает последнее, и раньше min-height/position из них не применялись —
   на телефоне пустая карточка фото вставала между фильтрами и таблицей. */
@media (max-width: 1360px) {
  .kshop { grid-template-columns: 206px minmax(0, 1fr); gap: 16px; }
  .kshop__photo { grid-column: 1; grid-row: 2; min-height: 0; position: static; }
  .kshop__photo .kshop__ph { max-width: 170px; }
}
@media (max-width: 860px) {
  .kshop { grid-template-columns: 1fr; }
  /* в одну колонку панель уходит под таблицу, а не перед ней */
  .kshop__photo { grid-column: auto; grid-row: auto; }
  /* тач-цели в строке товара: «фото», количество и корзина рядом */
  .kshop .ktable .kbtn--sm { min-height: 40px; padding: 8px 12px; }
  .kshop .kcartbtn { width: 44px; height: 40px; }
  .kshop .kqty { min-height: 40px; width: 56px; }
  .kshop .ktable td.knowrap { display: flex; gap: 8px; align-items: center; }
}


/* ================================================================
   Объём и воздух по слайду 11
   ================================================================ */
/* Интерфейс занимает окно целиком: рамка вокруг всего приложения читалась
   как «страница внутри страницы». Поля живут внутри, у содержимого. */
body.k-classic { background: #fff; padding: 0; }
body.k-classic #app { background: #fff; }
/* №21 (13.09): нижнего блока больше нет — поле снизу даёт сама рабочая область */
body.k-classic #kwork { padding: 0 20px 20px; margin-top: 20px; }
/* П11, П15 (29.09, слайды 29-12, 29-16): биржа покупателя — левая колонка левее, правая панель правее: поля 8 px */
body.k-classic #kwork:has(> .kbuyer-exchange-panel) { padding-inline: 8px; }

/* Витрина идёт без заголовочной полосы окна: на макете содержимое лежит прямо на странице */
.kshop-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin-bottom: 18px; }
.kshop-head input {
  min-height: 38px; padding: 4px 14px; border: 1px solid #C9C9C9; border-radius: 8px; width: 100%;
}

/* Лёгкая таблица витрины: шапка серой полосой, строки на пунктире, без сплошной сетки */
.kshop .ktable { font-size: 12.5px; }
.kshop .ktable td:nth-child(3) { min-width: 170px; }
.kshop .ktable th {
  background: var(--k-th); border: 0; padding: 10px 7px; font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-ink);
}
.kshop .ktable thead th:first-child { border-radius: 6px 0 0 6px; }
.kshop .ktable thead th:last-child { border-radius: 0 6px 6px 0; }
.kshop .ktable td { border: 0; border-bottom: 1px dashed #C9C9C9; padding: 10px 7px; }
.kshop .ktable tr:hover td { background: #FAFAF7; }
.kshop .ktable tr.is-sel td { background: var(--k-selected); }
.kshop .kwrap { max-height: calc(100svh - var(--k-chrome, 250px) - 60px); overflow: auto; }
/* колонка «Гарантия» (правки 06.10, Б15.5; шаг Г4.4): на 1361–1560 px таблица из 11 колонок не помещалась между фильтрами
   и панелью фото и прокручивалась вбок — здесь боковые колонки и поля ячеек немного уже, а название переносится раньше */
@media (min-width: 1361px) and (max-width: 1560px) {
  .kshop { grid-template-columns: 200px minmax(0, 1fr) 196px; gap: 14px; }
  .kshop .ktable td:nth-child(3) { min-width: 140px; }
  .kshop .ktable :is(th, td) { padding-inline: 5px; }
}
/* Поиск по номеру в два шага (правка владельца 16.10.2026, classic.js drawShopPositions): заголовок шага — что открыто и
   кнопка рядом («Показать все предложения», «Вернуться к списку номеров»); список пар «бренд + номер» — строка целиком выбирает
   пару, «нет в наличии» — приглушённо. Подзаголовки «Похожие номера», «Искомый товар», «Аналоги» — строки kres__sep */
.kpos-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.kpos-head__t { margin: 0; flex: 1 1 220px; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.kshop .ktable tr.kpos { cursor: pointer; }
.kshop .ktable .kpos__none { color: #6B6B6B; }
.kshop .ktable tr.kres__sep td { padding: 8px 7px; letter-spacing: 0.02em; }
/* город склада под кодом продавца в строке предложения */
.kshop .ktable .kshop__city { margin-top: 3px; }
/* шаг 1 на телефоне: строка пары — карточка без прокрутки вбок (номер и производитель, название, «от … ₽» и «предложений: N»,
   кнопка во всю ширину); шапки таблицы нет — подпись числа предложений стоит перед числом */
@media (max-width: 600px) {
  .kshop .kpos-table thead { display: none; }
  .kshop .kpos-table, .kshop .kpos-table tbody { display: block; }
  .kshop .kpos-table tr.kpos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 12px 4px; border-bottom: 1px dashed #C9C9C9; background: #fff; }
  .kshop .kpos-table tr.kpos td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; background: transparent; }
  .kshop .kpos-table tr.kpos:hover td { background: transparent; }
  .kshop .kpos-table tr.kpos td:nth-child(1) { font-weight: 700; }
  .kshop .kpos-table tr.kpos td:nth-child(3), .kshop .kpos-table tr.kpos td:nth-child(6) { grid-column: 1 / -1; min-width: 0; }
  .kshop .kpos-table tr.kpos td:nth-child(5)::before { content: "предложений: "; color: #6B6B6B; }
  .kshop .kpos-table tr.kpos td:nth-child(6) .kres-btn { width: 100%; }
  .kshop .kpos-table tr.kres__sep { display: block; }
  .kshop .kpos-table tr.kres__sep td { display: block; }
}

/* ================================================================
   CRM — колонка разделов слева, ориентир 1С
   ================================================================ */
body.k-crm { background: #D9D9D9; }
.kshell {
  display: grid; grid-template-columns: minmax(168px, 19%) minmax(0, 1fr);
  gap: 8px; align-items: start; padding: 8px;
}
/* колонка уже съела часть ширины — делим остаток поровну, иначе правая панель
   схлопывается и заголовки переносятся построчно */
body.k-crm .kwork--2 { grid-template-columns: 1fr 1fr; }
.kside {
  background: var(--k-accent); color: var(--k-on, #000);
  border: 1px solid var(--k-line); border-radius: 10px 0 0 10px;
  min-height: calc(100svh - 16px); padding: 12px 0; display: grid; gap: 10px; align-content: start;
}
/* логотип и под ним «На рынке с …» (П2) */
.kside__brand { display: grid; gap: 8px; justify-items: start; padding: 0 12px 8px; }
.kside__logo { font: italic 900 26px/1 Arial, sans-serif; letter-spacing: -0.04em; }
.kside__nav { display: contents; }   /* обёртка групп меню без своего бокса; строкой становится на телефоне */
.kside__grp { display: grid; }
.kside__grp--tail { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 10px; }
.kside__item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: inherit; padding: 8px 12px; cursor: pointer; font-size: 13px;
  transition: background 200ms var(--e);
}
.kside__item:hover { background: rgba(0, 0, 0, .12); }
.kside__item.is-on { background: rgba(0, 0, 0, .22); font-weight: 700; }
.kside__foot { margin-top: 12px; padding: 10px 14px 0; border-top: 1px solid rgba(255, 255, 255, .35); display: grid; gap: 8px; }
.kside__foot .kbar__balance { width: 100%; }
.kside__svc { display: flex; gap: 4px; flex-wrap: wrap; }
.kmain { display: grid; gap: 8px; align-content: start; }
/* С третьей плашкой («Сменить кабинет», шаг В.13) блок города и роли не расширяется: он не шире 340 px, и плашка смены
   кабинета встаёт второй строкой под городом и ролью — поле поиска остаётся той же ширины, что без неё. Поле поиска не уже
   140 px и при длинном названии города (плашки тогда переносятся ещё раз, а не сжимают поле до нуля) */
.ksearch {
  display: grid; grid-template-columns: minmax(140px, 1fr) auto auto auto minmax(0, auto);
  gap: 8px; align-items: center;
  background: #fff; border: 1px solid var(--k-line); border-radius: 10px; padding: 10px;
}
.ksearch .kbar__user { font-size: 11.5px; }
.ksearch > .kplace--mode { max-width: 340px; }
/* П3 (29.09): колонка разделов и строка поиска закреплены. Колонка — по высоте окна, длинное меню прокручивается внутри неё.
   Тень цвета фона над строкой поиска закрывает зазор 8 px до края окна и уголки скругления: прокручиваемое содержимое
   там не мелькает. До 1100 px колонка становится шапкой — ниже. */
@media (min-width: 1101px) {
  .kside { position: sticky; top: 8px; z-index: 30; max-height: calc(100svh - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .ksearch { position: sticky; top: 8px; z-index: 30; box-shadow: 0 -9px 0 #D9D9D9; }
}
@media (max-width: 860px) {
  /* на узком экране колокол уходит к левому краю — список раскрываем на ширину строки поиска */
  .ksearch { position: relative; }
  .ksearch .kbell { position: static; }
  .ksearch .knotes-drop { left: 0; right: 0; width: auto; }
}
@media (max-width: 1100px) {
  .kshell { grid-template-columns: 1fr; }
  .kside { min-height: 0; border-radius: 10px; }
  .kside__grp { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .kside__grp--tail { margin-top: 0; border-top: 0; padding-top: 0; }
  /* П3 (29.09): колонка стала шапкой — прилипает отрицательным top, на месте остаётся только лента разделов (data-kkeep,
     skins/common.js wirePin). Для этого лента — последней в шапке: логотип, баланс и служебные кнопки — над ней */
  .kside { position: sticky; top: calc(var(--k-keep-h, 0px) - var(--k-head-h, 0px)); z-index: 30; }
  .kside__brand { order: -2; }
  .kside__foot { order: -1; margin-top: 0; }
}

/* ================================================================
   Minimal — пустой экран, навигация рельсой у правого края
   ================================================================ */
body.k-minimal { background: #fff; }
.kmin { padding: 10px 64px 10px 12px; display: grid; gap: 10px; align-content: start; }
/* П3 (29.09): верхняя строка закреплена — белая полоса над содержимым, ниже рельсы (20); поля 8 px сверху и снизу при
   отрицательных внешних — место строки в раскладке прежнее. На телефоне не закреплена: меню — рельса, она и так на месте */
.kmin__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  position: sticky; top: 0; z-index: 15; background: #fff; padding-block: 8px; margin-block: -8px;
}
.kmin__top [data-act="mode"] { white-space: nowrap; }
/* логотип и под ним «На рынке с …» (П2) */
.kmin__brand { display: grid; gap: 4px; justify-items: start; }
/* колокол стоит у левого края — список уведомлений раскрываем вправо, в пределах экрана */
.kmin__top .kbell { position: static; }
.kmin__top .knotes-drop { left: 0; right: auto; width: min(420px, calc(100vw - 80px)); }
.klogo { font: italic 900 30px/1 Arial, sans-serif; letter-spacing: -0.04em; color: var(--k-accent); }
body.k-minimal .kpanel { border-width: 1px; }
body.k-minimal .kpanel__head { background: #fff; color: var(--k-ink); border-bottom: 1px solid var(--k-line); }
/* в классике заголовок панели тёмный и кнопки в нём белые; здесь он белый,
   поэтому неактивные вкладки надо вернуть в чернила — активная остаётся на тёмной заливке */
body.k-minimal .kpanel__win button:not(.is-on) { color: var(--k-ink); }

/* Рельса едет целиком одним transform: анимация ширины у каждого язычка
   заставляла браузер пересчитывать раскладку на каждом кадре — отсюда рывки.
   Закрытая рельса показывает только колонку номеров, наведение на любую её часть
   выводит все названия разом, а не по одному. */
.krail {
  position: fixed; right: 0; top: 62px; z-index: 20;
  width: var(--rail-w, 210px);
  transform: translateX(calc(var(--rail-w, 210px) - var(--rail-peek, 52px)));
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.krail:hover, .krail:focus-within { transform: translateX(0); }
/* шаг подобран так, чтобы самая длинная навигация (покупатель, 13 пунктов)
   умещалась по высоте и не налезала на плашку баланса */
.krail__in { display: grid; gap: 5px; align-content: start; }
.krail__i {
  display: grid; grid-template-columns: var(--rail-peek, 52px) minmax(0, 1fr);
  align-items: center; width: 100%; min-height: 38px;
  background: var(--k-accent); color: var(--k-on, #000);
  border: 0; cursor: pointer; text-align: left; font-size: 13px;
  border-radius: 9px 0 0 9px;
  box-shadow: -2px 3px 12px rgba(0, 0, 0, .2);
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1),
              color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.krail__i i { font-style: normal; font-weight: 700; text-align: center; }
.krail__i span { padding-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krail__i:hover { background: var(--k-dark); color: #fff; }
.krail__i.is-on { font-weight: 700; box-shadow: inset 5px 0 0 var(--k-ink), -2px 3px 12px rgba(0, 0, 0, .2); }
.krail__i--svc { min-height: 30px; font-size: 12px; }
/* хвост рельсы уходит за правый край — гасим горизонтальную прокрутку,
   clip не создаёт контейнер прокрутки и не ломает position: fixed */
body.k-minimal { overflow-x: clip; }
/* на тач-устройствах наведения нет — держим рельсу раскрытой */
@media (hover: none) {
  .krail { transform: translateX(0); }
  body.k-minimal .kmin { padding-right: 222px; }
}
@media (prefers-reduced-motion: reduce) { .krail { transition: none; } }

.kmin__balance {
  position: fixed; right: 64px; bottom: 16px; z-index: 20;
  background: var(--k-accent); color: var(--k-on, #000); border: 0; border-radius: 10px;
  padding: 12px 26px; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform 420ms var(--e);
}
.kmin__balance:hover { transform: translateY(-2px); }
/* плашка баланса висит над низом окна (bottom 16px, высота от 44px) и закрывала последние кнопки раздела — на 400 px
   «Оформить заказ» корзины не нажимался: запас снизу, чтобы конец раздела прокручивался выше плашки */
body.k-minimal .kmin { padding-bottom: 76px; }
/* состав КП с колонкой «Гарантия» (правки 06.10, Б15.5; шаг Г4.4): в «Минимальном» справа рельса, и на 1251–1440 px таблица
   КП из 11 колонок не помещалась в панель предложений (колонка «Корзина» уходила за край) — карточка заявки здесь уже,
   как на узком компьютере, а поля раскрытого КП меньше */
@media (min-width: 1251px) and (max-width: 1440px) {
  body.k-minimal .kexchange-content { grid-template-columns: clamp(190px, 22%, 204px) minmax(0, 1fr); }
  body.k-minimal .kexchange-content--items { grid-template-columns: minmax(0, 1fr); }
  body.k-minimal .kexchange-offer-table .kexchange-offer-detail > td { padding: 8px 4px; }
}
@media (max-width: 760px) {
  .krail { --rail-w: 178px; --rail-peek: 46px; }
  .kmin { padding: 10px 56px 10px 8px; }
  .kmin__top { position: relative; z-index: auto; }
}

/* ================================================================
   Выбор вида: плитка показывает раскладку, а не название
   ================================================================ */
.skinpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.skinpick__t {
  display: grid; gap: 6px; justify-items: start; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--k-line, rgba(0, 0, 0, .3)); padding: 8px;
  transition: transform 420ms var(--e), box-shadow 320ms var(--e);
}
.skinpick__t:hover { transform: translateY(-2px); }
.skinpick__t.is-on { box-shadow: inset 0 0 0 3px var(--k-accent, #2F5BA8); }
.skinpick__t > b { font-size: 13px; }
.skinpick__h { font-size: 11px; opacity: 0.62; line-height: 1.35; }

/* мини-схема раскладки */
.pv { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; background: #EDEDEA; overflow: hidden; }
.pv i { position: absolute; display: block; background: var(--k-accent, #2F5BA8); }
.pv b { display: block; background: #BFBFBF; }
.pv__bar { left: 0; right: 0; top: 0; height: 22%; }
.pv__row { left: 0; right: 0; top: 24%; height: 12%; background: #9E9E9E !important; }
.pv__tabs { left: 4%; right: 4%; top: 24%; height: 14%; background: none !important; display: flex; gap: 3px; }
.pv__tabs b { flex: 1; height: 100%; border-radius: 2px 2px 0 0; background: #9E9E9E; }
.pv__tabs b.on { background: #fff; height: 120%; }
.pv__cards { left: 4%; right: 4%; top: 26%; height: 16%; background: none !important; display: flex; gap: 4px; }
.pv__cards b { flex: 1; height: 100%; }
.pv__work { left: 6%; right: 6%; top: 42%; bottom: 8%; background: #fff !important; box-shadow: inset 0 0 0 1px #C9C9C9; }
.pv__side { left: 0; top: 0; bottom: 0; width: 26%; }
.pv__work--right { left: 32%; right: 5%; top: 8%; bottom: 8%; }
.pv__work--wide { left: 5%; right: 22%; top: 12%; bottom: 8%; }
.pv__rail { right: 0; top: 14%; width: 12%; height: 62%; background: none !important; display: grid; gap: 12%; }
.pv__rail b { width: 100%; height: 100%; background: var(--k-accent, #2F5BA8); }

/* большое фото по клику: снимок слева, характеристики компактной колонкой справа */
.kphoto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
.kphoto__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #fff; border: 1px solid #C9C9C9; border-radius: 10px;
  display: grid; place-items: center; font-size: 13px; color: #8a8a8a;
}
.kphoto__side { display: grid; gap: 4px; align-content: start; }
.kphoto__t { font-size: 15px; font-weight: 700; }
@media (max-width: 720px) { .kphoto { grid-template-columns: 1fr; } }