/* Каталог 2027 — свои стили (классы k27-*). Мобильные сначала: база — телефон 375 px, @media (min-width) — шире.
   Размеры в px: корень темы Metronic 12 px до 767,98 px и 13 px шире, поэтому rem здесь дали бы мелкий текст.
   Цвета — переменные темы (--kt-primary #5cb34e — фирменный зелёный: кнопкам и крупным ссылкам; btn-success синий — не
   использовать). Мелкий текст 12–13 px — gray-700 (#5e6278, ≈ 6 : 1), не gray-600 (3,8 : 1) (ПРОВЕРКА-ux С7).
   Цели касания: чипы, кнопки, телефон, summary — не меньше 44 px; ссылки в таблицах — зона касания расширена padding;
   крошки и полоса разработки — не меньше 32 px (WCAG 2.5.8 — 24). Подключается с меткой ?v=filemtime (k27_asset). */

.k27 { color: var(--kt-gray-800, #3f4254); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }
.k27 *, .k27 *::before, .k27 *::after { box-sizing: border-box; }
.k27 a { color: var(--kt-primary, #5cb34e); }
.k27 [id^="k27-"] { scroll-margin-top: 80px; }          /* якоря под липкой шапкой темы (65 px) */
.k27-sec { padding: 16px 0 8px; }
.k27-sec--hero { padding-top: 8px; }
.k27-h1 { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--kt-gray-900, #181c32); margin: 0 0 10px; }
.k27-h2 { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--kt-gray-900, #181c32); margin: 0 0 12px; }
.k27-lead { font-size: 15px; margin: 0 0 10px; }
.k27-note { font-size: 13px; color: var(--kt-gray-700, #5e6278); margin: 8px 0 0; }
.k27-lead, .k27-note, .k27-stub__d { max-width: 72ch; }
.k27-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.k27-list { margin: 0 0 8px; padding-left: 20px; }
.k27-list li { margin-bottom: 6px; }
.k27-list a { display: inline-flex; align-items: center; min-height: 44px; }
.k27-mt { margin-top: 12px; }
.k27-img-s { max-width: 360px; }

/* полоса режима разработки, подписи блоков; крошки */
.k27-devbar { background: #fff8dd; border-bottom: 1px solid #f3dca0; color: #7a5a00; font-size: 13px; line-height: 1.35; padding: 4px 16px; text-align: center; }
.k27-devbar a { color: #7a5a00; text-decoration: underline; display: inline-flex; align-items: center; min-height: 32px; }
.k27-devbar__b { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; margin-left: 2px; border: 1px solid #e0c36e; border-radius: 6px;
  background: #fff; color: #7a5a00; font: inherit; font-weight: 600; cursor: pointer; }
.k27-devbar__b[aria-pressed="true"] { background: #7a5a00; color: #fff; border-color: #7a5a00; }
.k27-devbar__b:focus-visible { outline: 2px solid #181c32; outline-offset: 2px; }
.k27-blk { display: inline-block; font: 11px/1.3 monospace; color: #7a5a00; background: #fff8dd; border: 1px dashed #f3dca0; border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; }
.k27-crumbs { flex-wrap: wrap; }
/* 12.10.2026: на телефоне крошки — одной строкой с прокруткой вбок. Перенос последней крошки при подгрузке шрифта сдвигал страницу
   (CLS 0,21 на «распашных с калиткой», замер tools/perf-audit.sh) */
@media (max-width: 767.98px) {
  #kt_toolbar .page-title { min-width: 0; max-width: 100%; }
  .k27-crumbs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .k27-crumbs::-webkit-scrollbar { display: none; }
  .k27-crumbs .breadcrumb-item { flex: 0 0 auto; }
}
.k27-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

/* «вид клиента» (кнопка в полосе разработки): служебного нет, полоса — одна строка 32 px (ПРОВЕРКА-ux С1) */
body.k27-clean .k27-blk, body.k27-clean .k27-dn, body.k27-clean .k27-badge--owner, body.k27-clean .k27-chip__flag,
body.k27-clean .k27-devwrap, body.k27-clean .k27-src { display: none !important; }
body.k27-clean .k27-devbar { display: none !important; }
.k27-devfab { display: none; }
body.k27-clean .k27-devfab { display: inline-flex; align-items: center; position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1040; min-height: 32px; padding: 0 12px; border: 1px solid #e4e6ef; border-radius: 16px; background: rgba(255,255,255,.92);
  color: #5e6278; font-size: 12px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer; opacity: .75; }
body.k27-clean .k27-devfab:hover, body.k27-clean .k27-devfab:focus-visible { opacity: 1; }
body.k27-clean .k27-devfab:focus-visible { outline: 2px solid #181c32; outline-offset: 2px; }
body.k27-clean .k27-drift { background: transparent !important; }
body.k27-clean .k27-preset--pending { outline: 0; }

/* значки происхождения чисел */
.k27-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.k27-badge { display: inline-block; font-size: 12px; line-height: 1.3; border-radius: 6px; padding: 3px 8px; margin: 2px 0 2px 6px; vertical-align: middle; }
.k27-badges .k27-badge { margin-left: 0; }
.k27-badge--draft { background: #fff4de; color: #8a5300; border: 1px solid #ffd58a; }
.k27-badge--owner, .k27-badge--ownerval { background: #f1e9ff; color: #5a2ea6; border: 1px solid #d7c3ff; }
.k27-badge--none  { background: var(--kt-gray-100, #f5f8fa); color: var(--kt-gray-700, #5e6278); border: 1px solid var(--kt-gray-300, #e4e6ef); }
.k27-badge--s { font-size: 11px; padding: 1px 5px; margin-left: 4px; }
.k27-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.k27-num--none { color: var(--kt-gray-700, #5e6278); font-style: italic; white-space: normal; }   /* «цена потом» может переноситься */
.k27-from { font-weight: 700; color: var(--kt-gray-900, #181c32); }
.k27-from--none { font-weight: 400; color: var(--kt-gray-700, #5e6278); }

/* заглушки картинок (SVG держит пропорцию сам) */
.k27-ph { display: block; width: 100%; height: auto; border-radius: 12px; }

/* первый экран */
.k27-hero { display: grid; gap: 16px; }
.k27-hero__price { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
.k27-hero__note, .k27-hero__sub { font-size: 13px; color: var(--kt-gray-700, #5e6278); margin: 0 0 4px; }
.k27-hero__sub, .k27-hero__note--lead { font-size: 15px; }

/* кнопки и телефон */
.k27-cta { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.k27-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px !important; font-weight: 600; padding: 10px 18px !important; border-radius: 10px !important; }
.k27-btn:focus-visible { outline: 2px solid #181c32 !important; outline-offset: 2px; }
.k27-phone { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 17px; font-weight: 700; color: var(--kt-gray-900, #181c32) !important; text-decoration: none; }

/* чипы: наборы, выбор, переключатель вариантов, ссылки */
.k27-presets, .k27-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k27-presets { margin: 12px 0 0; }
.k27-chip { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--kt-gray-300, #e4e6ef); border-radius: 10px; background: #fff; color: var(--kt-gray-800, #3f4254) !important;
  font-size: 14px; line-height: 1.25; text-decoration: none; cursor: pointer; user-select: none; max-width: 100%; }
@media (hover: hover) { .k27-chip:hover { border-color: var(--kt-primary, #5cb34e); } }
.k27-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
/* кольцо — только при фокусе с клавиатуры: после касания пальцем у выбранного чипа была двойная рамка */
.k27-chip:focus-visible, .k27-chip:has(input:focus-visible) { outline: 2px solid var(--kt-gray-900, #181c32); outline-offset: 2px; }
/* выбранный чип виден и до исполнения скрипта, и без JS (:has) — ПРОВЕРКА-ux С3.2 */
.k27-chip.is-on, .k27-chip:has(input:checked) { border-color: var(--kt-primary, #5cb34e); background: var(--kt-primary-light, #e8fff3); color: var(--kt-gray-900, #181c32) !important; box-shadow: inset 0 0 0 1px var(--kt-primary, #5cb34e); }
.k27-chip small { display: block; font-size: 12px; color: var(--kt-gray-700, #5e6278); margin-top: 2px; }
.k27-chip i { font-style: normal; color: var(--kt-gray-900, #181c32); }
.k27-chip__flag { color: #5a2ea6 !important; }
.k27-chip__d:empty { display: none; }
.k27-chip.is-null .k27-chip__d { color: #8a5300; }
.k27-chip__sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(0, 0, 0, .18); }
.k27-chip--preset { font-weight: 600; }
.k27-chip--link { border-style: dashed; }
.k27-chip--var span { font-weight: 600; }

/* сетки */
.k27-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.k27-grid--tiles, .k27-grid--works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k27-grid__i { min-width: 0; }

/* плитки */
.k27-tile { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit !important; }
.k27-tile .k27-ph { border-radius: 12px 12px 0 0; }
.k27-tile__b { padding: 10px 12px 12px; }
.k27-tile__t { font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--kt-gray-900, #181c32); margin-bottom: 4px; }
.k27-tile__p { font-size: 14px; margin-bottom: 2px; }
.k27-tile__s { font-size: 12px; color: var(--kt-gray-700, #5e6278); }
@media (hover: hover) { .k27-tile:hover .k27-tile__t { color: var(--kt-primary, #5cb34e); } .k27-tile--static:hover .k27-tile__t { color: var(--kt-gray-900, #181c32); } }
.k27-tile:focus-visible { outline: 2px solid var(--kt-gray-900, #181c32); outline-offset: 2px; }
.k27-tile .k27-badge { margin: 4px 0 0; }

/* конфигуратор */
.k27-cfg { margin: 0; }
.k27-cfg__axes { display: grid; gap: 14px; }
.k27-cfg__row { border: 0; margin: 0; padding: 0; min-width: 0; }
.k27-cfg__l { float: none; width: auto; font-size: 14px; font-weight: 700; color: var(--kt-gray-900, #181c32); margin: 0 0 6px; padding: 0; }
.k27-cfg__ro { font-size: 14px; }
.k27-cfg__ro small { color: var(--kt-gray-700, #5e6278); }
.k27-total { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--kt-primary-light, #e8fff3) !important; }
.k27-total__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.k27-total__l { font-size: 14px; color: var(--kt-gray-700, #5e6278); }
.k27-total__v { font-size: 24px; font-weight: 700; color: var(--kt-gray-900, #181c32); font-variant-numeric: tabular-nums; }
.k27-total__note, .k27-total__sum { font-size: 13px; color: var(--kt-gray-700, #5e6278); }
.k27-total__sum { margin-top: 4px; }
.k27-total__flags:empty, .k27-total__why:empty, .k27-total__per:empty, .k27-total__sum:empty { display: none; }
.k27-total__why { font-size: 13px; color: #8a5300; margin-top: 6px; }
.k27-total__per { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.k27-total__parts { margin-top: 8px; font-size: 13px; }
.k27-total__parts summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--kt-gray-700, #5e6278); }
.k27-total__parts ul { padding-left: 18px; margin: 0; }
.k27-src { display: block; font: 11px/1.3 monospace; color: var(--kt-gray-600, #7e8299); overflow-wrap: anywhere; }

/* липкая полоса итога (телефон; вариант на обсуждение, k27-cfg--split): k27.js показывает, пока оси на экране, а итог — нет */
.k27-bar { display: none; }
@media (max-width: 991.98px) {
  .k27-bar.is-shown { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--kt-gray-200, #eff2f5); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
  .k27-bar__v { font-size: 20px; font-weight: 700; color: var(--kt-gray-900, #181c32); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .k27-bar__b { flex: 0 0 auto; }
}

/* наборы */
.k27-preset { border-radius: 12px; }
.k27-preset__b { padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.k27-preset__t { font-size: 18px; font-weight: 700; color: var(--kt-gray-900, #181c32); }
.k27-preset__img { max-width: 160px; }
.k27-preset__c, .k27-preset__p { margin: 0; padding-left: 18px; font-size: 14px; }
.k27-preset .k27-btn { margin-top: auto; }
.k27-preset--pending { outline: 1px dashed #d7c3ff; }

/* таблицы: прокрутка вбок только внутри обёртки; тень у края, пока справа или слева есть ещё (background-attachment:
   local у заслонок и scroll у теней). Заголовки переносятся, nowrap — только числам (ПРОВЕРКА-ux В1). */
.k27-tbl { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat scroll; }
.k27-tbl table { width: 100%; margin: 0; font-size: 14px; border-collapse: collapse; }
.k27-tbl th, .k27-tbl td { padding: 9px 8px !important; border-bottom: 1px solid var(--kt-gray-200, #eff2f5); vertical-align: top; }
.k27-tbl th { font-weight: 700; color: var(--kt-gray-900, #181c32); background: var(--kt-gray-100, #f5f8fa); }
.k27-tbl tbody th { background: transparent; font-weight: 400; color: inherit; text-align: left; }
.k27-tbl__v { text-align: right; }
.k27-tbl td.k27-tbl__v { white-space: nowrap; }
.k27-tbl th.k27-tbl__v { white-space: normal; }
/* пометка в числовой ячейке — строкой под числом, а не справа (срезалась на 345 px) */
.k27-tbl__v .k27-badge { display: block; width: max-content; max-width: 150px; margin: 4px 0 0 auto; white-space: normal; text-align: left; }
.k27-tbl__v .k27-badge--s { display: inline-block; margin: 0 0 0 4px; }
.k27-tbl a { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* зона касания больше, высота строки та же */
.k27-drift { background: #fff4de !important; }
/* комплект на телефоне — карточками по участкам: подпись столбца из data-l (4 столбца в 345 px не помещались) */
@media (max-width: 575.98px) {
  .k27-tbl--stack { overflow: visible; background: none; }
  .k27-tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .k27-tbl--stack table, .k27-tbl--stack tbody, .k27-tbl--stack tr, .k27-tbl--stack th, .k27-tbl--stack td { display: block; width: 100%; }
  .k27-tbl--stack tr { border: 1px solid var(--kt-gray-200, #eff2f5); border-radius: 10px; margin: 0 0 8px; overflow: hidden; }
  .k27-tbl--stack tbody th { background: var(--kt-gray-100, #f5f8fa); font-weight: 700; color: var(--kt-gray-900, #181c32); }
  .k27-tbl--stack td.k27-tbl__v { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: normal; }
  .k27-tbl--stack td::before { content: attr(data-l); text-align: left; color: var(--kt-gray-700, #5e6278); }
  .k27-tbl--stack td:last-child { border-bottom: 0; }
}

/* карточки и заглушки блоков */
.k27-card { padding: 14px; border-radius: 12px; }
.k27-card__t { font-size: 17px; font-weight: 700; color: var(--kt-gray-900, #181c32); margin-bottom: 8px; }
.k27-stub { border: 1px dashed var(--kt-gray-300, #e4e6ef); border-radius: 12px; padding: 12px 14px; background: #fcfcfd; margin: 0 0 10px; }
.k27-stub__t { font-weight: 700; color: var(--kt-gray-900, #181c32); margin-bottom: 4px; }
.k27-stub__d { font-size: 14px; color: var(--kt-gray-700, #5e6278); }

/* работы */
.k27-work { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit !important; }
.k27-work__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--kt-gray-100, #f5f8fa); }
.k27-work__c { font-size: 13px; line-height: 1.3; color: var(--kt-gray-800, #3f4254); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.k27-work__p { font-size: 12px; color: var(--kt-gray-700, #5e6278); }
.k27-work__d { font-size: 12px; color: var(--kt-gray-600, #7e8299); }
.k27-more { margin: 10px 0; }
.k27-more summary, .k27-faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }

/* отзывы и рейтинги */
.k27-quote { margin: 0; padding: 14px; border-radius: 12px; }
.k27-quote blockquote { margin: 0 0 8px; font-size: 14px; }
.k27-quote figcaption { font-size: 12px; color: var(--kt-gray-700, #5e6278); }
.k27-quote figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.k27-ratings { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.k27-rating { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--kt-gray-300, #e4e6ef); border-radius: 10px; text-decoration: none; color: var(--kt-gray-900, #181c32) !important; }
.k27-rating small { font-size: 12px; color: var(--kt-gray-700, #5e6278); }

/* цвета */
.k27-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k27-swatch { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; font-size: 13px; }
.k27-swatch__c { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); }
.k27-swatch small { font-size: 12px; color: var(--kt-gray-700, #5e6278); }

/* вопросы, форма */
.k27-faq { border-bottom: 1px solid var(--kt-gray-200, #eff2f5); }
.k27-faq__a { font-size: 14px; color: var(--kt-gray-700, #5e6278); padding: 0 0 12px; }
.k27-form { padding: 14px; border-radius: 12px; }
.k27-form__f { display: grid; gap: 10px; margin-top: 10px; }
.k27-form__l { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.k27-form .form-control { min-height: 44px; font-size: 16px; }

/* панель разработчика: в потоке страницы, внизу — ничего не перекрывает */
.k27-devwrap { padding-top: 16px; padding-bottom: 24px; }
.k27-dev { border: 1px solid #f3dca0; border-radius: 12px; background: #fffdf3; font-size: 13px; }
.k27-dev > summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 12px; cursor: pointer; color: #7a5a00; }
.k27-dev__b { padding: 0 12px 12px; }
.k27-dev__b > p > a { display: inline-flex; align-items: center; min-height: 44px; }
.k27-dev details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.k27-dev h3 { font-size: 14px; font-weight: 700; margin: 14px 0 6px; color: var(--kt-gray-900, #181c32); }
.k27-dev code { font-size: 12px; overflow-wrap: anywhere; color: #5a2ea6; background: transparent; padding: 0; }
.k27-dev__kv { width: 100%; border-collapse: collapse; }
.k27-dev__kv th { width: 34%; text-align: left; vertical-align: top; padding: 4px 8px 4px 0; color: var(--kt-gray-700, #5e6278); font-weight: 600; }
.k27-dev__kv td { padding: 4px 0; vertical-align: top; overflow-wrap: anywhere; }
.k27-dev__kv ul, .k27-dev ol { margin: 2px 0; padding-left: 18px; }
.k27-dev__scroll { overflow-x: auto; }
.k27-dev__t { border-collapse: collapse; min-width: 560px; }
.k27-dev__t th, .k27-dev__t td { border: 1px solid #f3dca0; padding: 3px 6px; vertical-align: top; text-align: left; }
.k27-dev__k { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 5px; background: #eef7ec; color: #2c6b22; }
.k27-dev__k--draft { background: #fff4de; color: #8a5300; }
.k27-dev__k--owner { background: #f1e9ff; color: #5a2ea6; }
.k27-dev__k--none { background: #f5f8fa; color: #5e6278; }
.k27-dev__wait { color: #8a5300; }
.k27-dev__ok { color: #2c6b22; }
.k27-map td, .k27-map th { font-size: 13px; }
.k27-map a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.k27-devslots { background: #fffdf3; }

/* уведомление «режим разработки» от своих кнопок (контейнер role=status — с загрузки, k27.js) */
.k27-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100; background: var(--kt-gray-900, #181c32); color: #fff; border-radius: 12px; padding: 14px 16px;
  font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.k27-toast button { min-height: 44px; min-width: 44px; border: 0; border-radius: 8px; background: var(--kt-primary, #5cb34e); color: #fff; font-weight: 600; padding: 0 14px; }
.k27-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 576px) {
  .k27-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .k27-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k27-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k27-toast { left: auto; max-width: 420px; }
}
@media (min-width: 768px) {
  .k27-sec { padding: 24px 0 12px; }
  .k27-h1 { font-size: 30px; }
  .k27-h2 { font-size: 24px; }
  .k27-grid { gap: 16px; }
  .k27-grid--tiles, .k27-grid--works, .k27-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k27-hero__price { font-size: 26px; }
}
@media (min-width: 992px) {
  .k27-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
  .k27-hero--noimg { grid-template-columns: 1fr; }
  .k27-h1 { font-size: 34px; }
  .k27-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k27-cfg__axes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  /* оси слева (2/3), итог справа и липнет под шапкой (вариант на обсуждение, ПРОВЕРКА-ux С2) */
  .k27-cfg--split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
  .k27-cfg--split .k27-cfg__axes { display: block; }
  .k27-cfg--split .k27-cfg__row { margin-bottom: 14px; }
  .k27-cfg--split .k27-cfg__side { position: sticky; top: 81px; }
  .k27-cfg--split .k27-total { margin-top: 0; }
  .k27-tbl table { width: auto; min-width: min(100%, 560px); }
  .k27-dev__kv th { width: 22%; }
}
@media (min-width: 1200px) {
  /* две колонки осей без пустот: многоколоночная раскладка не равняет строки по самой высокой оси */
  .k27-cfg--split .k27-cfg__axes { columns: 2; column-gap: 32px; }
  .k27-cfg--split .k27-cfg__row { break-inside: avoid; display: inline-block; width: 100%; }
  .k27-grid--works { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k27-grid--2xl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}