/* Каталог 2027, v1 — свои стили страниц из компонентов сайта (lib/v1.php) и витрины компонентов (lib/ui_show.php).
   Компоненты сайта несут СВОЙ CSS дословно (инлайн из исходников, lib/ui.php); здесь — только новое: выбор (k27v-*),
   рамки витрины (k27u-*) и правило серого. Правила читаемости 03.09 для новых вставок: текст 15 px, подписи 14, цена 36,
   кнопка 16, серый только #5e6278, радиус 8, цели касания ≥ 44 px; кнопки — родные btn-primary / btn-light-primary (зелёные).
   Мобильные сначала; px, а не rem: корень темы 12 px до 768 px и 13 px шире. Метка версии ?v=filemtime (k27_asset). */

/* серый только #5e6278 (правило владельца 03.09): копии и подключённые блоки сайта красятся одним правилом, разметку не правим.
   Сюда же — неактивные вкладки «Сроки / Доставка / Гарантия» (btn-color-gray-400 = #b5b5c3, ≈1,9:1; ПРОВЕРКА2-look С4).
   «Как на сайте» — ?gray=site (полоса разработки) или K27_V1_GRAY = false. */
.k27-v1--gray .text-gray-600, .k27-v1--gray .text-gray-500, .k27-v1--gray .text-gray-400, .k27-v1--gray .text-muted,
.k27-v1--gray .btn.btn-color-gray-400:not(.active), .k27-v1--gray .btn.btn-color-gray-400:not(.active) .svg-icon { color: #5e6278 !important; }

.k27-v1 .k27v-tag { margin: 0 0 6px; }
.k27v-anchor, #lzCalcSht, #k27v-sobrat { scroll-margin-top: 90px; }

/* полоса разработки v1 */
.k27v-dev { border-top: 0; }
.k27v-dev a.k27v-dev__cur { font-weight: 700; text-decoration: none; }
.k27v-flag { display: inline-block; font-size: 12px; line-height: 1.3; border-radius: 6px; padding: 1px 6px; margin-left: 6px;
  background: #f1e9ff; color: #5a2ea6; border: 1px solid #d7c3ff; font-weight: 500; vertical-align: middle; }

/* «Этот забор у наших клиентов» (works_selected.php, подключён как есть): в колонке col-md-9 при 768–991 px плитка ~180 px,
   а .lzw-main не сжимается (flex: 0 0 auto из правила «.lzw-title > :not(.lzw-name)») — «· подробнее» уезжал за край и давал
   прокрутку страницы вбок. Здесь — сжатие с многоточием у названия; на сайте то же (предложение — перенести в works_selected.php). */
.k27-v1 .lzw-title > .lzw-main { flex: 0 1 auto; }

/* текущий вид в чипах прайса; на телефоне чипы — цели касания 44 px (правило 03.09) */
.lz-price .lz-chip.k27v-chip-cur { border: 1px solid var(--kt-primary, #5cb34e); }
@media (max-width: 767.98px) { .k27-v1 .lz-price .lz-chip { min-height: 44px; } }

/* ---------------------------------------------------------------- выбор b и c: родные элементы калькулятора
   Рисунок — копия CSS калькулятора в области .k27v-pick (lib/ui.php, ключ 'pick'). Здесь — только то, чего у калькулятора нет:
   кнопки вместо div (сброс шрифта), цели касания 44 px, разница в цене внутри кнопки, ссылки рядов #176d13, итог. */
.k27v-cfg { margin: 0; }
.k27v-ax { margin: 0 0 18px; }
.k27v-ax .form-label { display: block; margin-bottom: 10px; }
.k27v-ax__n { font-size: 14px; color: #5e6278; margin-top: 6px; max-width: 60ch; }
.k27v-pick button.lz-ch, .k27v-pick button.lz-sw, .k27v-pick button.lz-oc-s { font-family: inherit; line-height: 1.25; }
.k27v-pick .lz-ch { min-height: 44px; text-decoration: none; }
.k27v-pick .lz-ch:disabled { opacity: .45; cursor: not-allowed; }
.k27v-pick .lz-ch:focus-visible, .k27v-pick .lz-sw:focus-visible, .k27v-pick .lz-oc-s:focus-visible { outline: 2px solid #181c32; outline-offset: 2px; }
.k27v-pick button.lz-sw { width: 44px; height: 44px; }                  /* у калькулятора 40 px; button — чтобы перебить копию ниже по странице */
.k27v-pick .lz-oc-s { height: 100%; }
.k27v-pick a.k27v-link, .k27v-pick a.k27v-link:hover { color: #176d13; }
.k27v-d { font-weight: 400; margin-left: 6px; }
.k27v-d:empty { display: none; }

/* итог */
.k27v-tot { background: #fff; border-radius: 8px; padding: 14px 16px; }
.k27v-tot__l { font-size: 14px; color: #5e6278; }
.k27v-tot__v { font-size: 36px; line-height: 1.15; font-weight: 700; color: #181c32; margin: 2px 0; }
.k27v-tot__s { font-size: 14px; color: #5e6278; }
.k27v-tot__w { font-size: 14px; color: #5e6278; }
.k27v-tot__w:empty { display: none; }
.k27v-per { font-size: 14px; color: #3f4254; margin-top: 4px; }
.k27v-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; font-size: 16px; margin-top: 10px; }
.k27v-calcnote { font-size: 14px; color: #5e6278; margin-top: 8px; }
.k27v-calcnote[hidden] { display: none !important; }
.k27v-cfg__grid { display: grid; gap: 16px; }
@media (min-width: 992px) {
  .k27v-cfg__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .k27v-cfg--c .k27v-side { position: sticky; top: 90px; }
}

/* вариант a — один ряд высот в зелёной карточке (между пунктами и ценой). Подпись — рисунком пунктов карточки; кнопки белые
   с тёмным текстом (мелкий белый текст на градиенте ≈1,7:1 — нельзя), выбранная — #176d13 с зелёной рамкой. */
.k27v-cfg--a { margin: 6px 0 10px; }
.k27v-arow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k27v-arow > span { margin-right: 4px; }
.k27v-w { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 6px 14px;
  border: 2px solid #fff; border-radius: 8px; background: #fff; color: #181c32; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.k27v-w:hover { border-color: #176d13; }
.k27v-w.is-on { color: #176d13; border-color: #176d13; box-shadow: inset 0 0 0 1px #176d13; font-weight: 700; }
.k27v-w:focus-visible { outline: 2px solid #181c32; outline-offset: 2px; }

/* вариант b — выбор над калькулятором */
.k27v-cfg--b { padding: 16px; border-radius: 8px; }
.k27v-b0__t { font-size: 20px; font-weight: 700; color: #181c32; }
.k27v-b0__s { font-size: 15px; color: #5e6278; margin: 4px 0 14px; max-width: 70ch; }
@media (min-width: 992px) { .k27v-cfg--b { padding: 24px; } }

/* вариант c — блок «Собрать свой забор» после работ (липкой полосы нет: владелец снял её 03.09) */
.k27v-c__head { margin: 0 0 14px; }
.k27v-c__sub { font-size: 15px; font-weight: 600; color: #3f4254; }
.k27v-cfg--c .k27v-tot { background: #f5f8fa; }

/* ---------------------------------------------------------------- переключатель типов (решение 04.10: под H1, над фото)
   Плитки — ссылки на адреса типов; рисунок — карточка Metronic (.card) с рамкой; текущий тип — рамка фирменного зелёного
   #5cb34e и название #176d13 (#5cb34e на белом для текста бледен). На телефоне по умолчанию — сетка 2 × 2 без картинок
   (.k27v-types--2x2: все четыре типа на первом экране, ПРОВЕРКА3-look С2); вариант — лента со свайпом (.k27v-types--lenta,
   scroll-snap): плитка 232 px, видна часть следующей, у правого края затухание, пока там есть плитки (.is-more ставит k27-v1.js).
   Что оставить — решает владелец (K27_V1_TILES). 768–991 px — сетка 2 × 2 (лента в 946 px обрезала бы четвёртую плитку
   на 18 px — выглядит ошибкой); от 992 px — четыре колонки, плитка ужата до 52 px (картинка 64 × 38): кнопки заказа в карточке
   выше на ~22 px, при 1366 × 650 видны целиком (ПРОВЕРКА3-look С1). Цель касания — вся плитка, ≥ 48 px. */
.k27v-types-wrap { margin-top: 4px; }
.k27v-types { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 32px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }   /* у края видна часть соседней плитки с обеих сторон */
.k27v-types::-webkit-scrollbar { display: none; }
.k27v-types__i { flex: 0 0 232px; scroll-snap-align: start; display: flex; min-width: 0; }
.k27v-type.card { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px;
  border: 1px solid #e4e6ef; border-radius: 8px; background: #fff; color: #181c32; text-decoration: none; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.k27v-type.card:hover { border-color: #5cb34e; color: #181c32; }
.k27v-type.card:focus-visible { outline: 2px solid #181c32; outline-offset: 2px; }
.k27v-type.card.is-cur { border-color: #5cb34e; box-shadow: inset 0 0 0 1px #5cb34e; }
.k27v-type__img { flex: 0 0 72px; width: 72px; height: 43px; display: block; border-radius: 6px; overflow: hidden; background: #fff; }
.k27v-type__img picture, .k27v-type__img img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.k27v-type__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.k27v-type__n { font-size: 15px; font-weight: 600; color: #181c32; overflow-wrap: break-word; hyphens: auto; }
.k27v-type.is-cur .k27v-type__n { color: #176d13; }
.k27v-type__p { font-size: 14px; color: #5e6278; margin-top: 2px; white-space: nowrap; }
@media (max-width: 767.98px) {
  .k27v-types--lenta.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .k27v-types--2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .k27v-types--2x2 .k27v-types__i { flex: none; }
  .k27v-types--2x2 .k27v-type.card { min-height: 48px; padding: 6px 10px; }
  .k27v-types--2x2 .k27v-type__img { display: none; }
}
@media (min-width: 768px) {
  .k27v-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
  .k27v-types__i { flex: none; }
}
@media (min-width: 992px) {
  .k27v-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k27v-type.card { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .k27v-type__img { flex-basis: 64px; width: 64px; height: 38px; }
}

/* первый экран от 992 px: без меню фото выросло до 745 × 441, а lz-fit тянул зелёную карточку до его высоты — под кнопками
   ~136 px пустого градиента, плашки ниже края окна ноутбука. Кадр не выше 340 px (на бою 328): блок фото (.ribbon — с ним плашка
   «В наличии» и затемнение при наведении) не шире 574 px = 340 × 287:170 (пропорция всех рендеров, preset card), по центру колонки;
   уже — по ширине колонки. Карточка по высоте — по содержимому или кадру (ПРОВЕРКА3-look С1). В первом экране .col-md-7 > .ribbon
   один — фото товара (k27u_photo). */
@media (min-width: 992px) {
  .k27v-first .col-md-7 > .ribbon.ribbon-top { max-width: 574px; margin-left: auto; margin-right: auto; }
}

/* «вид клиента» в разработке: кнопки значений, которых после запуска нет (шахматка 9 см, серия Стандарт/Эконом), не видны
   (ПРОВЕРКА3-look С5; k27_v1_devonly в lib/v1.php) */
body.k27-clean [data-k27-devonly] { display: none !important; }

/* под чипами ворот у горизонтальных: цены — с вертикальной обшивкой */
.k27v-chipnote { font-size: 15px; line-height: 1.5; color: #5e6278; margin: 12px 0 0; max-width: 75ch; }

/* горизонтальные: на месте калькулятора — честная строка и кнопки заказа (варианты a и c) */
.k27v-nocalc__t { font-size: 15px; line-height: 1.5; color: #3f4254; margin: 0 0 14px; max-width: 75ch; }
.k27v-btn-i { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 16px; }

/* ---------------------------------------------------------------- витрина компонентов */
.k27u-page { padding: 8px 0 32px; }
.k27u-intro p { font-size: 15px; line-height: 1.5; color: #3f4254; max-width: 110ch; }
.k27u-warn { background: #fff8dd; border: 1px solid #f3dca0; color: #7a5a00 !important; border-radius: 8px; padding: 8px 12px; }
/* вверху — «Решить владельцу»: вопрос одной строкой и якорь; ниже — оглавление человеческими названиями с вердиктом */
.k27u-decide { background: #f8f5ff; border: 1px solid #d7c3ff; border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; }
.k27u-decide ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; color: #3f4254; }
.k27u-decide li { margin: 6px 0; }
.k27u-decide__h { font-size: 18px; font-weight: 700; color: #181c32; margin: 0 0 8px; }
.k27u-toc { padding-left: 20px; font-size: 15px; line-height: 1.5; color: #3f4254; }
.k27u-toc > li { margin: 10px 0; }
.k27u-toc__in { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.k27u-toc a { display: inline-block; min-height: 24px; }
.k27u-g { font-size: 22px; line-height: 1.25; font-weight: 700; color: #181c32; margin: 32px 0 12px; padding-top: 10px; border-top: 3px solid #181c32; }
.k27u { border: 2px dashed #c9d2dc; border-radius: 8px; margin: 0 0 20px; background: #fff; }
.k27u--ok { border-color: #9cd194; }
.k27u--fix { border-color: #ffd58a; }
.k27u--ask { border-color: #d7c3ff; }
.k27u--no { border-color: #e4e6ef; }
.k27u__cap { background: #f9fafb; border-bottom: 1px dashed #c9d2dc; padding: 10px 14px; font-size: 14px; line-height: 1.45; color: #3f4254; border-radius: 6px 6px 0 0; }
.k27u--no .k27u__cap { border-bottom: 0; border-radius: 6px; }
.k27u__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.k27u__id { font: 500 12px/1.4 monospace; background: #f1f1f4; color: #5e6278; border-radius: 6px; padding: 2px 8px; }
.k27u__ask { margin: 4px 0 2px; font-size: 15px; color: #3f4254; }
.k27u__ask b { color: #5a2ea6; }
.k27u__line { margin: 2px 0 0; font-size: 14px; color: #5e6278; }
.k27u__name { font-size: 16px; font-weight: 700; color: #181c32; }
.k27u__v { display: inline-block; font-size: 13px; line-height: 1.4; font-weight: 600; border-radius: 6px; padding: 2px 8px; }
.k27u__v--ok { background: #e8f8e5; color: #176d13; }
.k27u__v--fix { background: #fff4de; color: #8a5300; }
.k27u__v--ask { background: #f1e9ff; color: #5a2ea6; }
.k27u__v--no { background: #f5f8fa; color: #5e6278; }
.k27u__v--later { background: #eef3f7; color: #3f4254; }
.k27u__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; }
.k27u__dl dt { font-weight: 600; color: #5e6278; }
.k27u__dl dd { margin: 0; overflow-wrap: anywhere; }
.k27u__more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: #3b7a30; }
.k27u__body { padding: 16px 12px; }
.k27u__none { padding: 12px 14px; font-size: 14px; color: #5e6278; }
@media (max-width: 575.98px) {
  .k27u__dl { grid-template-columns: minmax(0, 1fr); }
  .k27u__dl dt { margin-top: 4px; }
  .k27u__body { padding: 12px; }
}
/* ===== Содержание страниц евроштакетника (lib/v1c.php, черновики 05; 05.10.2026) =====
   Всё на ширину раздела, как остальные блоки страницы. Группа текста — строка .k27c-row; если у неё есть цитата или схема
   (.k27c-row--aside), от 992 px они справа от текста (60 % + 40 %: так меньше пустоты под коротким абзацем), ниже — под ним. Таблицы и виджеты — .k27c-full. */
.k27c { font-size: 15px; line-height: 1.6; }
.k27c p { margin: 0 0 14px; }
.k27c-a { color: #3b7a30; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k27c-a:hover { color: #5cb34e; }
.k27c-h3 { font-size: 16.5px; font-weight: 700; color: #181c32; margin: 22px 0 8px; line-height: 1.35; }
.k27c-row--h3 { margin-top: 22px; }
.k27c-row--h3 .k27c-h3:first-child { margin-top: 0; }
.k27c-row--aside { display: grid; grid-template-columns: minmax(0, 1fr); }
.k27c-side > :last-child { margin-bottom: 14px; }
@media (min-width: 992px) {
  .k27c-row--aside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 32px; align-items: start; }
  .k27c-side .k27c-fig svg { max-width: 400px; }
  .k27c-side .k27c-quote, .k27c-side .k27c-fig { margin-top: 0; }
}
.k27c-list { margin: 0 0 16px; padding: 0; list-style: none; }
.k27c-list li { position: relative; padding: 4px 0 4px 22px; }
.k27c-list li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #5cb34e; }
.k27c-full { margin: 4px 0 16px; }
.k27c-tw { margin: 0; }
.k27c-table { margin: 0; }
.k27c-table--wide { min-width: 600px; }
.k27c-table th, .k27c-table td { text-align: center; vertical-align: middle; }
.k27c-table--price td:not(:first-child) { font-weight: 700; color: #181c32; white-space: nowrap; }
.k27c-quote { margin: 4px 0 18px; padding: 16px 18px; border-left: 4px solid #5cb34e; background: #f5f8fa; border-radius: 0 10px 10px 0; }
.k27c-quote blockquote { margin: 0 0 8px; font-size: 15px; color: #3f4254; font-style: normal; }
.k27c-quote figcaption { font-size: 14px; color: #7e8299; }
.k27c-quote__work { display: table; margin-top: 4px; font-size: 14px; }
.k27c-fig { margin: 8px 0 20px; padding: 16px; border: 1px solid #eff2f5; border-radius: 12px; background: #fff; }
.k27c-fig svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.k27c-fig figcaption { margin-top: 10px; font-size: 14px; color: #7e8299; text-align: center; }
.k27c-sws { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.k27c-sw { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid #eff2f5; border-radius: 10px; color: #3f4254; background: #fff; }
a.k27c-sw:hover { border-color: #5cb34e; color: #181c32; }
.k27c-sw__c { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.k27c-sw__t { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.k27c-sw__t b { font-size: 15px; color: #181c32; }
.k27c-sw__n { color: #3b7a30; font-weight: 600; }
.k27c-pline { font-size: 15px; line-height: 1.55; color: #5e6278; margin: 10px 0 0; }
.k27c-sec .lz-price { margin-top: 6px; }
.k27-note--warn { color: #b5172e; }
@media (max-width: 767.98px) {
  .k27c-h3 { font-size: 16px; }
  .k27c-row--h3 { margin-top: 18px; }
  .k27c-fig { padding: 10px; }
  .k27c-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== Мини-каталог евроштакетника (k27c_hub): карточки типов — плитки «Основные направления» главной (.dir-card, стили —
   k27u_css('dir'), дословно с главной и хабов). Здесь — только цена «от» на стеклянной плашке (её у плиток главной нет). */
.k27h-dir .dir-glass__row { align-items: center; }
.k27h-dir__kind { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(17, 24, 39, .5); margin-bottom: 3px; }
/* направление — значком в углу (от 768 px): плашка остаётся в три строки и стоит ниже, рисунку больше места */
.k27h-dir__chip { position: absolute; top: 16px; left: 16px; z-index: 3; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(2, 6, 23, .06); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(17, 24, 39, .6); }
@media (min-width: 768px) { .k27h-dir .dir-glass { padding: 12px 16px; } }
/* плашки одной высоты: строка описания — всегда место под две строки (иначе плашка с переносом выше и закрывает больше земли) */
@media (min-width: 768px) { .k27h-dir .dir-subtitle { min-height: calc(2 * 1.35em); } }
/* иллюстрация товара (3 : 2, с землёй и подписями): крупно — полоса земли уходит под плашку, как у плиток главной; подписи
   рисунка над плашкой. Плашка плотнее (трава под стеклом не мутнеет). Рисунок ~75 % ширины карточки (было ~55 %, владелец 05.10). */
.k27h-dir .dir-card__media { inset: 8px 12px 52px 12px; align-items: center; justify-content: center; }
.k27h-dir .dir-glass { background: rgba(255, 255, 255, .86); }
.k27h-dir:hover .dir-glass { background: rgba(255, 255, 255, .9); }
.k27h-dir .dir-card__media .img-skel, .k27h-dir:hover .dir-card__media .img-skel { transform: none !important; }
.k27h-dir .dir-card__media img { filter: drop-shadow(0 10px 14px rgba(2, 6, 23, .10)); transform: translateY(var(--gy, 0%)); transition: transform .28s ease; }
.k27h-dir:hover .dir-card__media img { transform: translateY(var(--gy, 0%)) scale(1.03); }
.k27h-dir__price { flex: 0 0 auto; margin-left: auto; font-size: 19px; font-weight: 800; line-height: 1.15; color: #111827; white-space: nowrap; }
.k27h-dir__price small { font-size: 13px; font-weight: 600; color: rgba(17, 24, 39, .6); }
.k27h-dir .dir-glass__arrow { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .k27h-dir .dir-glass__row { flex-wrap: wrap; gap: 6px 10px; }
  .k27h-dir .dir-glass__text { flex: 1 1 100%; }
  .k27h-dir__price { margin-left: 0; font-size: 18px; }
  .k27h-dir .dir-glass__arrow { margin-left: auto; }

}
/* до 768 px (карточка во всю ширину): рисунок — блоком сверху, плашка — под ним, без наложения (плашка в три строки выше) */
@media (max-width: 767.98px) {
  .k27h-dir { min-height: 0 !important; }
  .k27h-dir .dir-card__media { position: relative; inset: auto; height: 190px; margin: 16px 16px 0; z-index: 1; }
  .k27h-dir .dir-card__content { height: auto; padding: 8px 14px 14px; }
  /* плашка заходит на землю, как на компьютере: над ней видна узкая полоса почвы (владелец 05.10.2026) */
  .k27h-dir .dir-card__content { margin-top: -35px; }
}
/* работы мини-каталога — карточки портфолио (k27c_pf_card): четыре в ряд от 992 px, 2 × 2 от 768, на телефоне — лента со свайпом
   (владелец 05.10.2026: «4 в ряд и 1 ряд», «карточками как в портфолио») */
.k27h-pf .card-xl-stretch { margin-right: 0 !important; }
@media (max-width: 767.98px) {
  .k27h-pf { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .k27h-pf::-webkit-scrollbar { display: none; }
  .k27h-pf > [class*="col-"] { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; }
}
/* ===== Разделители между блоками (владелец 05.10.2026: «отступы везде одинаковые у каждого блока») =====
   Линия — k27u_sep() (lib/ui.php): 1,25rem над ней и под ней, как separator mt-5 mb-5 на карточках сайта. Блок перед линией —
   в обёртке .k27-part (k27c_parts): нижние поля его последних элементов обнулены, иначе они прибавлялись к отступу линии
   (над линией было от 1 до 49 px, под ней — 15–23). */
.k27-sep { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.k27-part > :last-child,
.k27-part > :last-child > :last-child,
.k27-part > :last-child > :last-child > :last-child,
.k27-part > :last-child > :last-child > :last-child > :last-child,
.k27-part .k27c > :last-child,
.k27-part .k27c-row:last-child > :last-child,
.k27-part .k27c-row:last-child > .k27c-side > :last-child { margin-bottom: 0 !important; }
/* текст и цитата рядом (от 992 px): у последнего абзаца левой колонки тоже; на телефоне цитата под текстом — там поле нужно */
@media (min-width: 992px) {
  .k27-part .k27c-row:last-child > .k27c-main > :last-child { margin-bottom: 0 !important; }
}
/* то же, пока идёт разработка: после абзаца стоит служебная пометка (.k27-dn, в «виде клиента» скрыта) — и :last-child не он.
   Отдельным правилом: браузер, который не знает «of S», отбросит только его, а после запуска пометок нет и хватает правила выше. */
.k27-part > :nth-last-child(1 of :not(.k27-dn)),
.k27-part > :nth-last-child(1 of :not(.k27-dn)) > :nth-last-child(1 of :not(.k27-dn)),
.k27-part > :nth-last-child(1 of :not(.k27-dn)) > :nth-last-child(1 of :not(.k27-dn)) > :nth-last-child(1 of :not(.k27-dn)),
.k27-part .k27c > :nth-last-child(1 of :not(.k27-dn)),
.k27-part .k27c-row:nth-last-child(1 of :not(.k27-dn)) > :nth-last-child(1 of :not(.k27-dn)),
.k27-part .k27c-row:nth-last-child(1 of :not(.k27-dn)) > .k27c-side > :nth-last-child(1 of :not(.k27-dn)) { margin-bottom: 0 !important; }
@media (min-width: 992px) {
  .k27-part .k27c-row:nth-last-child(1 of :not(.k27-dn)) > .k27c-main > :nth-last-child(1 of :not(.k27-dn)) { margin-bottom: 0 !important; }
}
/* калькулятор сайта: поле под кнопками шага (1rem, на телефоне 2rem) — внутри блока, над линией его не видно как отступ */
.k27-part #lzCalcSht .lz-step { padding-bottom: 0; }
/* первый экран: работы идут сразу под линией и заканчиваются перед линией — без своих полей (works_selected.php как есть: mt-2 mb-3) */
.k27v-first .lzw { margin-top: 0 !important; margin-bottom: 0 !important; }
/* работы мини-каталога: ряды карточек (2 × 2 на планшете) — через row-gap, у последней строки карточки (RAL, описание) поля нет */
.k27h-pf { row-gap: 1.25rem; }
.k27h-pf .card-xl-stretch > :last-child > :last-child { margin-bottom: 0 !important; }
/* ===== «Из чего сделан» над работами мини-каталога (k27c_hub_material; владелец 05–06.10.2026) =====
   Сверху H2; профили с работами — во всю ширину; внизу карточки профиля — «Верх планки» и «Покрытие» (глянец / муар), «цена одна» — в строке
   вкладок; сразу под карточкой — цвета (Р5, по числу работ), последней — вводная (07.10.2026, владелец: «текст ниже перенести»; «блок со
   штакетником и работами — во всю ширину»; «блок покрытия вписать в блок с планками»; две колонки и полосы под карточкой сняты в тот же день).
   Профили — вкладками (одна большая панель профиля; вариант «три карточки»
   снят 06.10.2026); планка и чертёж (все три — в одном масштабе) открываются во встроенном просмотрщике (FsLightbox), под
   профилем — работы портфолио с ним (число и три фото). Ниже — строка «цена и срез» и цвета (Р5). Фото цеха снято 06.10.2026. */
.k27m-lead { margin: 0; font-size: 15px; line-height: 1.6; color: #5e6278; }

.k27m-chip { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.35; color: #5e6278; }
.k27m-chip > div { display: flex; flex-direction: column; }

.k27m-chip + .k27m-chip { border-top: 1px solid #e4e6ef; }
.k27m-chip b { font-size: 15px; font-weight: 600; color: #181c32; }
.k27m-lead--low { margin-top: 20px; }
/* низ карточки профиля: «Верх планки» под картинками, «Покрытие» под описанием — по колонкам карточки (07.10.2026, владелец: «блок
   покрытия вписать в блок с планками»); уже 992 px карточка в одну колонку — группы друг под другом */
.k27m-opts { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 24px; padding-top: 16px; border-top: 1px solid #eff2f5; }
.k27m-opt__k { margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #a1a5b7; text-transform: uppercase; letter-spacing: .05em; }
.k27m-opt__k small { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.k27m-opt__cut { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; }
.k27m-opt__cut p { flex: 1 1 180px; align-self: center; margin: 0; font-size: 14px; line-height: 1.5; color: #5e6278; }
.k27m-opt__coat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.k27m-opt__coat .k27m-chip { padding: 0; }
.k27m-opt__coat .k27m-chip + .k27m-chip { border-top: 0; }
@media (max-width: 991.98px) { .k27m-opts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .k27m-opt__coat { grid-template-columns: minmax(0, 1fr); } }
/* «цена одна» — серой подсказкой в строке вкладок (07.10.2026: зелёная строка над вкладками «не к месту»); на телефоне — под вкладками */
.k27m-tabs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.k27m-tabs__bar .k27m-tabs__nav { margin-bottom: 0; min-width: 0; }
.k27m-tabs__bar .k27m-one { margin: 0; font-size: 14px; font-weight: 500; color: #7e8299; }
.k27m-tabs__bar .k27m-one i { font-size: 15px; }
/* общее: планка, чертёж, доля, работы с профилем */
.k27m-r { display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 8px; cursor: zoom-in; }
.k27m-r .overlay-wrapper { display: flex; justify-content: center; align-items: center; height: 100%; }
.k27m-r img { filter: drop-shadow(0 6px 10px rgba(15,23,42,.18)); }
.k27m-s { position: relative; display: block; padding: 6px 6px 16px; border-radius: 8px; background: #fff; cursor: zoom-in; }
.k27m-r:hover, .k27m-s:hover { box-shadow: 0 0 0 1px var(--bs-primary); }
.k27m-r .overlay-layer, .k27m-s .overlay-layer { border-radius: 8px; }
.k27m-s__lbl { position: absolute; right: 8px; bottom: 2px; font-size: 11px; color: #a1a5b7; }
.k27m-w { margin-top: 2px; font-size: 14px; color: #7e8299; }
/* место профиля словами (владелец 06.10.2026: «шкала с процентами — людям непонятно; типа хит, самый популярный») */
.k27m-pop { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: #5e6278; }
.k27m-pop--hit { padding: 4px 10px; border-radius: 8px; background: #e8f5e5; color: #2f7a24; }
.k27m-pop--hit i { color: #f5a623; }
.k27m-hit { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #5cb34e; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; }
.k27m-pf { margin-top: 14px; font-size: 14px; font-weight: 600; color: #3f4254; }
.k27m-phs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.k27m-ph { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f5f8fa; }
.k27m-ph picture, .k27m-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k27m-ph img { transition: transform .25s ease; }
.k27m-ph:hover img { transform: scale(1.04); }
.k27m-ph__v { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(15,23,42,.55); color: #fff; font-size: 12px; }
.k27m-ph__c { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(transparent, rgba(15,23,42,.7)); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* вкладки: одна большая панель профиля */
.k27m-tabs__nav { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.k27m-tabs__nav::-webkit-scrollbar { display: none; }
.k27m-tabs__nav .nav-link { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #f5f8fa; color: #3f4254; font-size: 15px; font-weight: 600; white-space: nowrap; }
.k27m-tabs__nav .nav-link.active { background: var(--bs-primary); color: #fff; }
.k27m-tabs__nav .nav-link.active .k27m-hit { background: #fff; color: #2f7a24; }
.k27m-pan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; padding: 16px; border: 1px solid #eff2f5; border-radius: 12px; background: #fff; }
.k27m-pan__vis { display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 16px; align-items: center; height: 300px; padding: 16px; border-radius: 10px; background: #f5f8fa; }
.k27m-pan__vis .k27m-r { height: 268px; }
.k27m-pan__n { font-size: 20px; font-weight: 700; color: #181c32; line-height: 1.25; }
@media (max-width: 991.98px) {
  .k27m-pan { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .k27m-pan__vis { height: 240px; }
  .k27m-pan__vis .k27m-r { height: 208px; }
}
@media (max-width: 575.98px) {
  .k27m-pan { padding: 12px; }
  .k27m-pan__vis { grid-template-columns: 30% minmax(0, 1fr); height: 196px; gap: 10px; padding: 12px; }
  .k27m-pan__vis .k27m-r { height: 172px; }
}
/* строка «цена и срез», цвета (Р5) */
.k27m-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #5e6278; }
.k27m-note span { color: #a1a5b7; }
.k27m-col { margin-top: 24px; }
.k27m-h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #181c32; line-height: 1.35; }
.k27m-col .k27c-full { margin: 12px 0 0; }
/* ===== «Из чего сделан», 06.10.2026 («делай все четыре») ===== */
/* «цену метра профиль не меняет» — над вкладками */
.k27m-one { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #2f7a24; }
.k27m-one i { font-size: 18px; color: #5cb34e; }
/* верхний срез — верх той же планки с рендера П: полукруглый и прямой (06.10.2026; силуэты сняты) */
.k27m-cut__i { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #3f4254; }
.k27m-cut__i img { filter: drop-shadow(0 4px 6px rgba(15,23,42,.15)); }
/* покрытие — кусок настоящего рендера П в глянце и в муаре 7024; клик — планка целиком в просмотрщике */
.k27m-tex { position: relative; flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: zoom-in; }
.k27m-tex:hover { box-shadow: 0 0 0 2px var(--bs-primary); }

/* подпись в просмотрщике у фото работ (k27c_lb_script) — как у видеоотзывов на карточке товара (works_selected.php, .lzw-lb) */
.k27m-lb { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; text-align: center; color: #fff; pointer-events: none; }
.k27m-lb__t { font-size: 15px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.k27m-lb__row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.k27m-lb__row a { pointer-events: auto; }
.k27m-lb__a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #9ce274 !important; text-decoration: none; }
.k27m-lb__b { display: inline-block; padding: 6.5px 14px; border-radius: .475rem; background: #5cb34e; color: #fff !important; font-size: 13px; font-weight: 500; line-height: 1.5; text-transform: uppercase; text-decoration: none; }
@media (max-width: 767.98px) {
  .k27m-lb { top: 52px; bottom: auto; }
  .k27m-lb__row { flex-wrap: wrap; gap: 12px; }
}
/* ===== «Что входит в цену» (Б4) двумя колонками (k27c_b4, 07.10.2026: «делай красиво, про сео не забывай») =====
   «Входит» — зелёная колонка с галочками, «Оплачивается отдельно» — серая с плюсами; пункт — название жирным и пояснение под ним.
   Ниже — формула про смету и договор и рядом цитата клиента; уже 992 px всё друг под другом. */
.k27c-b4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.k27c-b4__c { padding: 20px 22px; border-radius: 12px; }
.k27c-b4__c--in { background: #f1f9ef; }
.k27c-b4__c--out { background: #f5f8fa; }
.k27c .k27c-b4__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #181c32; }
.k27c-b4__c--in .k27c-b4__h i { color: #5cb34e; }
.k27c-b4__c--out .k27c-b4__h i { color: #a1a5b7; }
.k27c .k27c-b4__l { margin: 0; padding: 0; list-style: none; }
.k27c-b4__l li { display: flex; gap: 12px; padding: 10px 0; }
.k27c-b4__l li + li { border-top: 1px solid rgba(24, 28, 50, .07); }
.k27c-b4__l li > i { flex: 0 0 auto; margin-top: 1px; font-size: 17px; line-height: 1.2; }
.k27c-b4__c--in .k27c-b4__l li > i { color: #5cb34e; }
.k27c-b4__c--out .k27c-b4__l li > i { color: #a1a5b7; }
.k27c-b4__l li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k27c-b4__l b { font-size: 15px; font-weight: 600; line-height: 1.4; color: #181c32; }
.k27c-b4__l span { font-size: 14px; line-height: 1.5; color: #5e6278; }
.k27c-b4__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; align-items: center; margin-top: 20px; }
.k27c-b4__foot--one { grid-template-columns: minmax(0, 1fr); }
.k27c .k27c-b4__fm p { margin: 0 0 10px; }
.k27c .k27c-b4__fm > :last-child { margin-bottom: 0; }
.k27c-b4__fq .k27c-quote { margin: 0; }
@media (max-width: 991.98px) {
  .k27c-b4, .k27c-b4__foot { grid-template-columns: minmax(0, 1fr); }
  .k27c-b4__c { padding: 16px 18px; }
}
/* ===== «По соткам» (Р3) карточками (k27c_sotki_cards, 07.10.2026): тип — кнопками (вкладки как у профилей), участки 6/10/15 соток —
   карточками: длина забора и три суммы; уже 768 px карточки столбиком. Раньше — копия гармошки K18 с таблицей. */
.k27s-tabs .nav-link .k27s-pr { font-weight: 500; opacity: .75; }
.k27s-tabs .nav-link.active .k27s-pr { opacity: .9; }
/* обе кнопки видны всегда: переносом, а не прокруткой вбок (у вкладок профилей — прокрутка; здесь подпись длиннее) */
.k27s-tabs { flex-wrap: wrap; overflow: visible; }
.k27s-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k27s-card { padding: 18px 20px 8px; border: 1px solid #eff2f5; border-radius: 12px; background: #fff; }
.k27s-card__h { font-size: 20px; font-weight: 700; line-height: 1.25; color: #181c32; }
.k27s-card__len { margin: 2px 0 10px; font-size: 14px; color: #7e8299; }
.k27s-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid #eff2f5; }
.k27s-row span { font-size: 14px; line-height: 1.4; color: #5e6278; }
.k27s-row b { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: #181c32; white-space: nowrap; }
.k27s-row--main b { font-size: 19px; }
.k27s-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: #7e8299; }
@media (max-width: 767.98px) {
  .k27s-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .k27s-tabs .nav-item { flex: 1 1 100%; }
  .k27s-tabs .nav-link { width: 100%; justify-content: space-between; }
  .k27s-card { padding: 14px 16px 6px; }
}
/* ===== «Установка» (Б5) лентой шагов (k27c_b5, 07.10.2026: «хочется больше современными быть») =====
   Шаг — номер в зелёном кружке и линия к следующему. Справа от текста (от 992 px) — картинка шага: экран телефона с СМС (.k27p),
   календарь срока (.k27cal), разрез основания (SVG), фото пролёта с номерами деталей (.k27sp); у шага без картинки там цитата клиента.
   Уже 992 px всё под текстом. */
.k27c .k27c-steps { margin: 4px 0 0; padding: 0; list-style: none; }
.k27c-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; }
.k27c-step::before { content: ""; position: absolute; left: 21px; top: 56px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(#bfe3b8, #e4e6ef); }
.k27c-step:last-child::before { display: none; }
.k27c-step__n { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; line-height: 1; color: #fff; background: #5cb34e; box-shadow: 0 0 0 6px #eef7ec; }
.k27c-step__b { min-width: 0; padding: 8px 0 36px; }
.k27c-step:last-child .k27c-step__b { padding-bottom: 4px; }
.k27c .k27c-step__h { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.35; color: #181c32; }
.k27c-step__t > :last-child { margin-bottom: 0; }
.k27c-step__q .k27c-quote { margin: 16px 0 0; }
.k27c-step__v { min-width: 0; }
.k27c-step__v .k27c-quote, .k27c-step__v .k27c-fig { margin: 0; }
.k27c-step__v .k27c-fig svg { max-width: 420px; }
.k27c-step__v .k27c-fig--base svg { max-width: 350px; }
@media (min-width: 992px) {
  .k27c-step__row--vis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "t v" "q v"; column-gap: 36px; align-items: start; }
  .k27c-step__t { grid-area: t; }
  .k27c-step__v { grid-area: v; }
  .k27c-step__q { grid-area: q; }
}
@media (max-width: 991.98px) { .k27c-step__v { margin-top: 18px; } }
@media (max-width: 767.98px) {
  .k27c-step { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .k27c-step::before { left: 16px; top: 46px; }
  .k27c-step__n { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 0 0 4px #eef7ec; }
  .k27c-step__b { padding: 4px 0 28px; }
  .k27c .k27c-step__h { font-size: 17px; margin-bottom: 10px; }
}
/* шаг 2: экран «Сообщений» iOS — рамка телефона, «остров», строка состояния, заголовок с отправителем, серые пузыри с хвостиком;
   низ телефона растворяется (маска), чтобы не рисовать пустой экран */
.k27p { margin: 0 auto; max-width: 272px; }
.k27p__s { position: relative; height: 316px; padding: 44px 12px 0; border: 9px solid #1d2027; border-bottom: 0; border-radius: 46px 46px 0 0; background: #fff; box-shadow: 0 0 0 1px #3b3f4a; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif; color: #000; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
.k27p__isl { position: absolute; top: 9px; left: 50%; width: 84px; height: 25px; margin-left: -42px; border-radius: 14px; background: #1d2027; }
.k27p__bar { position: absolute; top: 14px; left: 24px; right: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; line-height: 1; }
.k27p__st { display: flex; align-items: center; gap: 5px; }
.k27p__sig { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.k27p__sig i { display: block; width: 3px; border-radius: 1px; background: #000; }
.k27p__sig i:nth-child(1) { height: 4px; }
.k27p__sig i:nth-child(2) { height: 6px; }
.k27p__sig i:nth-child(3) { height: 8px; }
.k27p__sig i:nth-child(4) { height: 10px; }
.k27p__bat { position: relative; display: block; width: 22px; height: 11px; padding: 1.5px; border: 1px solid rgba(0, 0, 0, .38); border-radius: 3.5px; }
.k27p__bat::after { content: ""; position: absolute; top: 3px; right: -3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0, 0, 0, .38); }
.k27p__bat i { display: block; width: 72%; height: 100%; border-radius: 1.5px; background: #000; }
.k27p__hd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0 -12px; padding: 2px 0 9px; border-bottom: 1px solid #ececf0; background: #f7f7f9; }
.k27p__back { position: absolute; left: 12px; top: 6px; font-size: 30px; line-height: 1; color: #0a84ff; }
.k27p__ava { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: linear-gradient(#a9adb8, #858a96); }
.k27p__ava i { font-size: 34px; line-height: 1; color: #fff; margin-bottom: -6px; }
.k27p__name { font-size: 11.5px; line-height: 1.2; color: #000; }
.k27p__name i { margin-left: 3px; font-style: normal; color: #a1a5b7; }
.k27p__th { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 0 0; }
.k27p__day { align-self: center; margin: 8px 0 6px; font-size: 10.5px; line-height: 1.3; color: #8e8e93; text-align: center; }
.k27p__day b { font-weight: 600; }
.k27p__msg { position: relative; max-width: 88%; margin: 0 0 2px 6px; padding: 7px 12px 8px; border-radius: 18px; background: #e9e9eb; font-size: 13.5px; line-height: 1.32; color: #000; overflow-wrap: break-word; }
.k27p__msg::before { content: ""; position: absolute; bottom: 0; left: -7px; width: 18px; height: 18px; background: #e9e9eb; border-bottom-right-radius: 15px; }
.k27p__msg::after { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 18px; background: #fff; border-bottom-right-radius: 10px; }
.k27p__msg u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* шаг 5: фото пролёта со двора с номерами деталей и подписью-списком */
.k27sp { margin: 0; }
.k27sp__i { position: relative; border-radius: 14px; overflow: hidden; background: #eef3f7; }
.k27sp__m { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; color: #fff; background: #5cb34e; box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 4px 10px rgba(0, 0, 0, .35); }
.k27c .k27sp__l { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: #3f4254; }
.k27sp__l li { display: flex; align-items: center; gap: 10px; }
.k27sp__l b { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: #5cb34e; }
.k27c .k27sp__src { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: #7e8299; }
@media (max-width: 575.98px) { .k27sp__m { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12.5px; } }
/* ===== Заголовки крупнее (07.10.2026, владелец: «во всех блоках хочется текст заголовков чуть больше») =====
   H2 всех блоков — один размер: свои разделы (k27_v1_sec, «Из чего сделан»), захваченные блоки сайта (работы, вопросы) и страницы
   типов. Было 19,5 px у блоков (fs-2) и 32,5 px у вопросов (fs-2hx) — теперь 26 / 22 px. H1 (fs-1) был 22,75 px, почти как H2, —
   теперь 30 / 24 px. Подзаголовки H3 разделов — на 1,5 px крупнее. Классы fs-* темы стоят с !important, поэтому перекрытие точнее
   и тоже с !important; калькулятор (заголовки — div) не задет. */
.k27-v1 h1.fs-1 { font-size: 30px !important; line-height: 1.25; }
.k27-v1 h2.fs-2, .k27-v1 h2.fs-2hx { font-size: 26px !important; line-height: 1.3; }
.k27c .k27c-h3 { font-size: 18px; }
.k27-v1 .k27m-h3 { font-size: 18.5px; }
.k27c .k27c-b4__h { font-size: 19.5px; }
.k27c .k27c-step__h { font-size: 20px; }
@media (max-width: 767.98px) {
  .k27-v1 h1.fs-1 { font-size: 24px !important; }
  .k27-v1 h2.fs-2, .k27-v1 h2.fs-2hx { font-size: 22px !important; }
  .k27c .k27c-h3 { font-size: 17px; }
  .k27c .k27c-step__h { font-size: 18px; }
}
/* ===== «Установка», 07.10.2026 (владелец: «сделай как считаешь будет лучше и красивее») =====
   Календарь шага 3 (.k27cal) — пример месяца: замер, «обычно около трёх недель», монтаж. Карточка отзыва с фото (.k27rv) в шагах 1 и 6:
   фото слева, цитата справа; три пробные лунки — квадратами в ряд; на телефоне фото сверху. Подписи деталей пролёта — в тексте шага. */
.k27cal { padding: 16px 18px 14px; border: 1px solid #eff2f5; border-radius: 14px; background: #fff; }
.k27cal__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.k27cal__h b { font-size: 16px; color: #181c32; }
.k27cal__h span { font-size: 12.5px; color: #a1a5b7; }
.k27cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 0; text-align: center; }
.k27cal__wd { padding-bottom: 4px; font-size: 11.5px; font-weight: 600; color: #a1a5b7; }
.k27cal__d { position: relative; z-index: 0; height: 34px; line-height: 34px; font-size: 14px; color: #3f4254; }
.k27cal__w { background: #eef7ec; color: #3b7a30; }
.k27cal__d:nth-child(7n + 1).k27cal__w { border-radius: 8px 0 0 8px; }
.k27cal__d:nth-child(7n).k27cal__w { border-radius: 0 8px 8px 0; }
.k27cal__z, .k27cal__m { font-weight: 700; }
.k27cal__z::before, .k27cal__m::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; box-sizing: border-box; border-radius: 50%; }
.k27cal__z::before { border: 2px solid #5cb34e; background: #fff; }
.k27cal__m::before { background: #5cb34e; }
.k27cal__z { color: #3b7a30; background: linear-gradient(90deg, transparent 50%, #eef7ec 50%); }
.k27cal__m { color: #fff; background: linear-gradient(90deg, #eef7ec 50%, transparent 50%); }
.k27cal__l { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: #5e6278; }
.k27cal__l span { display: inline-flex; align-items: center; gap: 6px; }
.k27cal__l i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.k27cal__dz { border: 2px solid #5cb34e; }
.k27cal__dw { border-radius: 3px !important; background: #eef7ec; box-shadow: inset 0 0 0 1px #cfe9c9; }
.k27cal__dm { background: #5cb34e; }
.k27rv { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; margin: 16px 0 0; border: 1px solid #eff2f5; border-radius: 14px; overflow: hidden; background: #f5f8fa; }
.k27rv__m { position: relative; min-height: 200px; background: #e4e6ef; }
.k27rv--one .k27rv__m picture, .k27rv--one .k27rv__m img { position: absolute; inset: 0; width: 100%; height: 100%; }
.k27rv--tri .k27rv__m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; align-content: start; min-height: 0; background: #f5f8fa; }
.k27rv--tri .k27rv__m picture { aspect-ratio: 1 / 1; overflow: hidden; }
.k27rv__note { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; line-height: 1.35; color: #fff; background: rgba(24, 28, 50, .72); }
.k27rv--tri .k27rv__note { position: static; grid-column: 1 / -1; max-width: none; margin: 6px 4px 4px; padding: 0; border-radius: 0; color: #7e8299; background: none; }
.k27rv__b { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; }
.k27rv__b blockquote { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: #3f4254; }
.k27rv__b figcaption { font-size: 14px; color: #7e8299; }
.k27c-step__t .k27sp__l { margin: 4px 0 0; font-size: 15px; color: #3f4254; }
.k27c-step__t .k27sp__l b { width: 24px; height: 24px; font-size: 12.5px; }
@media (max-width: 767.98px) {
  .k27rv { grid-template-columns: minmax(0, 1fr); }
  .k27rv--one .k27rv__m { min-height: 0; aspect-ratio: 4 / 3; }
  .k27rv__b { padding: 14px 16px; }
  .k27cal { padding: 14px 12px 12px; }
  .k27cal__d { height: 32px; line-height: 32px; font-size: 13.5px; }
  .k27cal__z::before, .k27cal__m::before { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
}
/* ===== «Ворота, калитки и сваи» мини-каталога карточками (k27c_hub_gates) ===== 07.10.2026 — карточки вместо чипов; 08.10.2026 —
   новые фото и вид «фото с ценой» (владелец выбрал из трёх): название и цена на снимке, строки с галочками под ним, подпись с работой.
   От 992 px — три в ряд, от 576 — две, на телефоне — лента с прокруткой вбок (следующая карточка выглядывает). Стили карточки — ниже,
   у блока «фото с ценой» (.k27ga). */
.k27g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.k27g__svai { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #f5f8fa; }
.k27g__svai > i { flex: 0 0 auto; margin-top: 2px; font-size: 18px; color: #5cb34e; }
.k27c .k27g__svai p { margin: 0; font-size: 15px; line-height: 1.55; color: #3f4254; }
@media (max-width: 991.98px) { .k27g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .k27g { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
  .k27g::-webkit-scrollbar { display: none; }
  .k27ga { flex: 0 0 84%; scroll-snap-align: start; }
  .k27c .k27ga__h { font-size: 19px; }
}
/* ===== «По районам» мини-каталога (k27c_districts, 08.10.2026) — карточки с гербами, как «Портфолио по районам» в хабах =====
   Белая карточка: герб по центру, район, «N заборов»; карточка — ссылка целиком. От 992 px — семь в ряд (14 районов — два ряда),
   уже — по ширине, на телефоне — три в ряд с гербом поменьше. */
.k27d { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.k27d__c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px 14px; border: 1px solid #eff2f5; border-radius: 14px; background: #fff; text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.k27d__c:hover { border-color: #cfe9c9; box-shadow: 0 10px 24px -14px rgba(24, 28, 50, .3); transform: translateY(-2px); }
.k27d__g { display: block; height: 72px; margin-bottom: 8px; }
.k27d__g img { display: block; width: auto; height: 72px; max-width: 80px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.k27d__c b { font-size: 15px; line-height: 1.3; color: #181c32; }
.k27d__c:hover b { color: #3b7a30; }
.k27d__c > span:last-child { font-size: 13.5px; color: #7e8299; }
@media (min-width: 992px) { .k27d { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .k27d { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .k27d__c { padding: 12px 6px 10px; }
  .k27d__g, .k27d__g img { height: 54px; }
  .k27d__c b { font-size: 13.5px; }
  .k27d__c > span:last-child { font-size: 12.5px; }
}
/* ===== «Вопросы» мини-каталога (08.10.2026): вопрос аккордеона — крупнее и темнее, в общей шкале заголовков (владелец 07.10:
   «во всех блоках хочется текст заголовков чуть больше»). Было fs-4 темы — 16,25 px серым #5e6278. */
.k27-v1 #faq_accordion h3.fs-4 { font-size: 17.5px !important; line-height: 1.4; }
.k27-v1 #faq_accordion h3.text-gray-700 { color: #181c32 !important; }
@media (max-width: 767.98px) { .k27-v1 #faq_accordion h3.fs-4 { font-size: 16.5px !important; } }
/* ===== Воздух (08.10.2026, владелец: «не хватает воздуха, слишком много текста, тяжеловато читается») =====
   Замер 08.10: текст 15 px серым #5e6278, строка ~96 знаков в колонке «Установки» и до 165 на всю ширину (удобно 60–75), между
   блоками по 1,25rem (16 px) над линией и под ней. Теперь: текст 16 px темнее, межстрочный 1,7; абзацы и списки не шире ~64 знаков
   (справа — поле); между блоками по 36 px (на телефоне 24). */
.k27c { font-size: 16px; line-height: 1.7; color: #3f4254; }
.k27c p { margin: 0 0 16px; }
.k27c p, .k27c .k27c-list, .k27-v1 .k27c-pline, .k27-v1 .k27s-note, .k27-v1 .k27m-lead { max-width: 64ch; }
.k27-v1 .k27c-pline, .k27-v1 .k27s-note { font-size: 15px; }
.k27-v1 .k27-sep { margin-top: 36px !important; margin-bottom: 36px !important; }
.k27s-row--note b { font-size: 15px; font-weight: 600; color: #7e8299; }
/* «Установка» на компьютере шахматкой: шаги 3 и 5 (календарь, фото пролёта) — картинка слева, текст справа; 2 и 4 — как были */
@media (min-width: 992px) {
  .k27c-step:nth-child(odd) .k27c-step__row--vis { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "v t" "v q"; }
}
@media (max-width: 767.98px) {
  .k27c { font-size: 15.5px; }
  .k27-v1 .k27-sep { margin-top: 24px !important; margin-bottom: 24px !important; }
}
/* «по соткам» на четыре варианта (08.10.2026): кнопки парами по направлению — вертикальные, затем горизонтальные. Телефон — по одной
   в строку; 768–991 px — сеткой 2 × 2 (в строку не входят); с 992 px — все четыре в один ряд (владелец: «почему не в 1 ряд на ПК?»):
   в кнопке две строки — название и «высота · цена» (k27c_sotki_cards), ширина поровну. В одну строку текста кнопки занимали ~1250 px
   и при экране 1100–1366 px ломались «три + одна» */
.k27-v1 .k27s-tabs .nav-item { margin: 0; }   /* у темы .nav-pills .nav-item — отступ справа 6,5 px (кроме последней): кнопки разной ширины */
@media (min-width: 768px) { .k27-v1 .k27s-tabs { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; } }
@media (min-width: 992px) {
  .k27-v1 .k27s-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k27-v1 .k27s-tabs .nav-item { min-width: 0; }
  .k27s-tabs .nav-link { width: 100%; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 16px; white-space: normal; text-align: left; line-height: 1.3; }
  .k27s-tabs .nav-link .k27s-pr { font-size: 14px; }
}
/* ===== Плашки с крупной цифрой (k27c_stats, 08.10.2026): доли из фактов вместо абзацев с цифрами — меньше текста, больше воздуха */
.k27c-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; }
.k27c-stat { display: flex; flex-direction: column; gap: 2px; min-width: 150px; max-width: 260px; padding: 12px 16px; border-radius: 12px; background: #f1f9ef; }
.k27c-stat b { font-size: 24px; font-weight: 700; line-height: 1.15; color: #3b7a30; white-space: nowrap; }
.k27c-stat span { font-size: 13.5px; line-height: 1.4; color: #5e6278; }
@media (max-width: 575.98px) { .k27c-stat { flex: 1 1 calc(50% - 6px); min-width: 0; } .k27c-stat b { font-size: 21px; } }
/* ===== «С воротами и калиткой» (Р6) — карточка «фото с ценой» (08.10.2026; владелец: «не сильно нравится визуал… или работы не
   подходящие» → «Оставляем А»). Фото gate2-*: ворота или калитка — главное в кадре. */
.k27ga { position: relative; display: flex; flex-direction: column; min-width: 0; }
.k27ga__ph { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e9eef3; }
.k27ga__ph img { transition: transform .45s ease; }
.k27ga:hover .k27ga__ph img { transform: scale(1.04); }
.k27ga__ov { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 64px 16px 14px; background: linear-gradient(to top, rgba(12, 15, 26, .82) 0%, rgba(12, 15, 26, .45) 55%, rgba(12, 15, 26, 0) 100%); }
.k27c .k27ga__h { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: #fff; }
.k27ga__p { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; color: #181c32; white-space: nowrap; }
.k27c .k27ga__l { margin: 14px 2px 10px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: #3f4254; }
.k27ga__l li { position: relative; padding: 3px 0 3px 24px; }
.k27ga__l li::before { content: ""; position: absolute; left: 5px; top: 8px; width: 6px; height: 11px; border: solid #5cb34e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.k27ga__src { display: flex; align-items: baseline; gap: 6px; margin: auto 2px 0; font-size: 13px; line-height: 1.45; color: #a1a5b7; }
.k27ga__src a { color: #7e8299; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.k27ga__src a:hover { color: #3b7a30; }
/* блок работ (08.10.2026): у картинки карточки и 16:9, и min-h-150px темы — при колонке уже 267 px (экран 992–1024) браузер растягивал
   её вширь ради пропорции, и страница получала горизонтальную прокрутку на 20–50 px */
.k27h-pf .project-card-ratio { min-height: 0 !important; }
/* ===== Галерея первого экрана «в 1 ряд» (k27c_type_gallery, 08.10.2026; владелец: «может ещё фотографий добавить… или схему главной +
   фотографии»; «и ещё фоток добавим всяких»): снимок 3:2 — рисунок товара и 10 фото работ; превью под снимком, кадр — во весь экран. */
.k27tg { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.k27tg__stage { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #e9eef3; }
.k27tg__s { position: absolute; inset: 0; margin: 0; }
.k27tg__s[hidden] { display: none; }
.k27tg__zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.k27tg__cap { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: baseline; gap: 6px; width: fit-content; max-width: calc(100% - 24px); padding: 5px 11px; border-radius: 12px; background: rgba(12, 15, 26, .55); color: #fff; font-size: 12.5px; line-height: 1.35; backdrop-filter: blur(6px); }
.k27tg__cap a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.k27tg__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.k27tg__thumbs::-webkit-scrollbar { display: none; }
.k27tg__t { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 0; border: 0; background: none; cursor: pointer; }
.k27tg__ti { display: block; width: 92px; height: 62px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #e9eef3; transition: border-color .15s ease; }
.k27tg__t:hover .k27tg__ti { border-color: #b9dfb0; }
.k27tg__t.is-on .k27tg__ti { border-color: #5cb34e; }
.k27tg__tl { font-size: 12.5px; line-height: 1.2; color: #7e8299; }
.k27tg__t.is-on .k27tg__tl { font-weight: 600; color: #3b7a30; }
/* таблица цены «в 1 ряд» (k27c_type_price_table): строка 3 см — «чаще всего», ячейка 1,8 м — её цена в карточке первого экрана */
.k27-v1 .k27tp tr.k27tp__pop > * { --bs-table-accent-bg: #eaf6e6; --bs-table-bg: #eaf6e6; box-shadow: inset 0 0 0 9999px #eaf6e6; }
.k27tp__b { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #5cb34e; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5; vertical-align: 2px; white-space: nowrap; }
.k27-v1 .k27tp td.k27tp__c { font-weight: 800; color: #3b7a30; }
@media (max-width: 575.98px) { .k27tg__t, .k27tg__ti { width: 78px; } .k27tg__ti { height: 54px; } }
/* галерея «в 1 ряд» (08.10.2026, владелец: «схема — рисунок, который у нас уже есть»): кадр-рисунок товара — на белом, целиком */
.k27tg__s--scheme { background: #fff; }
.k27tg__s--scheme .k27tg__cap { background: rgba(63, 66, 84, .82); }
.k27tg__ti--scheme { background: #fff; border-color: #e4e9ee; }
/* ===== Первый экран «в 1 ряд» — вариант А (k27c_hero_a, 08.10.2026; владелец: «Оставляем А… оставь обязательно ту версию, которая есть
   сейчас, но ещё давай посмотрим разные варианты исполнения этой версии»): слева галерея, справа H1, исполнение, цена, кнопки; плиток
   типов над экраном нет. Исполнения — только в разработке (?hero=): А2 — превью колонкой слева, А3 — мозаика и выбор переключателями,
   А4 — заголовок над экраном и цена в рамке. Варианты Б и В сняты. ===== */
.k27hv { margin-bottom: 6px; }
.k27hv h1 { margin: 0; }
.k27hv__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #5e6278; }
.k27hv__price { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 10px; }
.k27hv__plab { font-size: 14px; color: #7e8299; }
.k27hv__from { font-size: 34px; font-weight: 800; line-height: 1.1; color: #181c32; white-space: nowrap; }
.k27hv__from small { font-size: 19px; font-weight: 700; color: #5e6278; }
.k27hv__pop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #f1f9ef; font-size: 15px; line-height: 1.4; color: #3f4254; }
.k27hv__pop b { font-size: 17px; font-weight: 700; color: #3b7a30; white-space: nowrap; }
.k27-v1 .k27hv__l { margin: 0 0 16px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: #3f4254; }
.k27hv__l li { position: relative; padding: 3px 0 3px 26px; }
.k27hv__l li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 11px; border: solid #5cb34e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.k27hv__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k27hv__btns .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.k27hv__calc { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #3b7a30; }
.k27hv__calc:hover { color: #2f6326; }
/* страницы обшивок ворот и калиток (lib/v1go.php, 10.10.2026): под кнопками вторая ссылка — на страницу вида, строкой ниже и спокойнее */
.k27hv__calc--2 { display: block; margin-top: 6px; font-weight: 500; color: #5e6278; }
.k27hv__calc--2:hover { color: #3b7a30; }
/* А — карточка товара */
.k27hv--a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.k27hv--a .k27hv__buy { padding-top: 2px; }
.k27-v1 .k27hv--a h1.fs-1 { font-size: 28px !important; line-height: 1.25; }
.k27hv__sw { margin-top: 18px; }
.k27hv__lab { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #a1a5b7; }
.k27hv__prow { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 8px; }
.k27hv__pdir { font-size: 14px; color: #7e8299; }
.k27hv__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.k27hv__pill { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1.5px solid #e4e9ee; border-radius: 12px; background: #fff; color: #181c32; line-height: 1.25; transition: border-color .15s ease, background-color .15s ease; }
.k27hv__pill:hover { border-color: #b9dfb0; color: #181c32; }
.k27hv__pill.is-cur { border-color: #5cb34e; background: #f1f9ef; }
/* выбранная кнопка — не ссылка: галочка перед названием показывает, что вариант уже выбран (11.10.2026) */
.k27hv__pill.is-cur { cursor: default; }
.k27hv__pill.is-cur:hover { border-color: #5cb34e; }
.k27hv__pill.is-cur .k27hv__pn::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%235cb34e'/%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.k27hv__pn { font-size: 15px; font-weight: 600; }
.k27hv__pp { font-size: 13px; color: #7e8299; }
@media (max-width: 991.98px) {
  .k27hv--a { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 767.98px) {
  .k27-v1 .k27hv--a h1.fs-1 { color: #181c32 !important; font-size: 24px !important; }
}
@media (max-width: 575.98px) {
  .k27hv__btns { grid-template-columns: minmax(0, 1fr); }
  .k27hv__prow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .k27hv__from { font-size: 30px; }
}

/* галерея: стрелки, счётчик «1 / 11», свайп (исполнения А2 и А4; k27c_type_gallery 'side' / 'nav'); на телефоне стрелки видны всегда */
.k27tg__thumbs { position: relative; }
/* лента превью: затухание у края, пока за ним есть ещё превью (классы ставит скрипт галереи; колесо мыши листает ленту вбок) */
.k27tg__thumbs.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.k27tg__thumbs.is-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.k27tg__thumbs.is-less.is-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.k27tg__nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #181c32; box-shadow: 0 2px 10px rgba(24, 28, 50, .2); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.k27tg__nav--prev { left: 12px; }
.k27tg__nav--next { right: 12px; }
.k27tg__stage:hover .k27tg__nav, .k27tg__nav:focus-visible { opacity: 1; }
.k27tg__nav:hover { color: #3b7a30; }
.k27tg__n { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 9px; border-radius: 10px; background: rgba(12, 15, 26, .55); color: #fff; font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; pointer-events: none; backdrop-filter: blur(6px); }
@media (hover: none) { .k27tg__nav { opacity: 1; width: 36px; height: 36px; margin-top: -18px; } }
/* счётчик — справа внизу (вверху справа он закрывал подпись «Столб 60×60» рисунка); подпись кадра ему место оставляет */
.k27tg--nav .k27tg__cap, .k27tg--side .k27tg__cap { max-width: calc(100% - 84px); }
/* А2: превью без подписей колонкой слева от снимка (высота колонки — по снимку, лишнее прокручивается); на телефоне превью нет */
.k27tg--side { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
.k27tg--side .k27tg__stage { grid-column: 2; grid-row: 1; }
.k27tg--side .k27tg__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow-x: hidden; overflow-y: auto; contain: size; }
.k27tg--side .k27tg__t, .k27tg--side .k27tg__ti { width: 78px; }
.k27tg--side .k27tg__ti { height: 52px; }
.k27tg--side .k27tg__tl { display: none; }
@media (max-width: 767.98px) {
  .k27tg--side { grid-template-columns: minmax(0, 1fr); }
  .k27tg--side .k27tg__stage { grid-column: 1; }
  .k27tg--side .k27tg__thumbs { display: none; }
}
/* А3: мозаика — крупный кадр (рисунок) и пять малых 3:2, на шестом «ещё N фото»; кадр открывается во весь экран (FsLightbox k27-gal1);
   подпись малого кадра — ссылка на работу. Телефон — лента со свайпом, видна часть следующего кадра */
.k27tb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.k27tb__t { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #e9eef3; }
.k27tb__t--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; border-radius: 16px; }
.k27tb__t--scheme { background: #fff; box-shadow: inset 0 0 0 1px #e4e9ee; }
.k27tb__t--x { display: none; }
.k27tb__z { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.k27tb__z img { transition: transform .3s ease; }
.k27tb__t:hover .k27tb__z img { transform: scale(1.03); }
.k27tb__cap { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 10px; background: rgba(12, 15, 26, .55); color: #fff; font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.k27tb__t--big .k27tb__cap { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 11px; font-size: 12.5px; }
.k27tb__t--scheme .k27tb__cap { background: rgba(63, 66, 84, .82); }
.k27tb__cap a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.k27tb__more { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(12, 15, 26, .5); color: #fff; font-size: 16px; font-weight: 600; pointer-events: none; }
.k27tb__t--more .k27tb__cap { display: none; }
@media (max-width: 767.98px) {
  .k27tb { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .k27tb::-webkit-scrollbar { display: none; }
  .k27tb__t, .k27tb__t--big { flex: 0 0 86%; aspect-ratio: 3 / 2; border-radius: 14px; scroll-snap-align: start; }
  .k27tb__t--x { display: block; }
  .k27tb__more { display: none; }
  .k27tb__t--more .k27tb__cap { display: block; }
}
/* А3: исполнение двумя переключателями — направление и ряды; у соседнего варианта — его «от», у текущего — галочка */
.k27hv__seg { display: grid; gap: 12px; margin-top: 18px; }
.k27hv__srow { display: grid; gap: 6px; }
.k27hv__slab { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #a1a5b7; }
.k27hv__sbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #f1f3f6; }
.k27hv__sopt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 6px 10px; border-radius: 10px; color: #3f4254; line-height: 1.25; text-align: center; transition: background-color .15s ease, color .15s ease; }
.k27hv__sopt:hover { background: rgba(255, 255, 255, .7); color: #181c32; }
.k27hv__sopt.is-cur { background: #fff; color: #181c32; box-shadow: 0 1px 4px rgba(24, 28, 50, .14); }
.k27hv__sn { font-size: 15px; font-weight: 600; }
.k27hv__sopt.is-cur .k27hv__sn::before { content: ""; display: inline-block; width: 5px; height: 9px; margin: 0 8px 2px 0; border: solid #5cb34e; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.k27hv__sp { font-size: 12.5px; color: #7e8299; }
/* А4: заголовок, подзаголовок и плашки оценок — над экраном; справа исполнение, цена с кнопками в рамке, под ней строки состава */
.k27hv--a4 .k27hv__head { margin-bottom: 20px; }
.k27-v1 .k27hv--a4 h1.fs-1 { font-size: 30px !important; line-height: 1.25; }
.k27hv--a4 .k27hv__head .lzrb-row { margin-top: 14px; }
.k27hv--a4 .k27hv__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.k27hv--a4 .k27hv__sw { margin-top: 0; }
.k27hv__pcard { margin: 16px 0 14px; padding: 18px 20px 16px; border: 1px solid #e4e9ee; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px -20px rgba(24, 28, 50, .3); }
.k27hv__pcard .k27hv__price { margin-top: 0; }
@media (max-width: 991.98px) { .k27hv--a4 .k27hv__body { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 767.98px) { .k27-v1 .k27hv--a4 h1.fs-1 { font-size: 24px !important; } .k27hv__pcard { padding: 16px 14px 14px; } }
/* переключатель исполнений первого экрана «в 1 ряд» (k27c_hero_switch, только в разработке; виден и в «Виде клиента»): плашка внизу
   по центру; подписи вариантов — от 1200 px, на телефоне — выше кнопки «Разработка» (она слева внизу) */
.k27hs { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1060; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 16px; border-radius: 999px; background: #181c32; box-shadow: 0 10px 28px rgba(24, 28, 50, .35); transform: translateX(-50%); white-space: nowrap; }
.k27hs__t { margin-right: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.k27hs__o { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; }
.k27hs__o:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.k27hs__o.is-cur { background: #5cb34e; color: #fff; }
.k27hs__d { font-weight: 400; color: rgba(255, 255, 255, .75); }
.k27hs__o.is-cur .k27hs__d { color: #fff; }
@media (max-width: 1199.98px) { .k27hs__d { display: none; } }
@media (max-width: 575.98px) { .k27hs { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); padding-left: 12px; } .k27hs__t { font-size: 12px; } .k27hs__o { padding: 0 11px; } }
/* «Как устроен забор в 1 ряд» (Б13, k27c_type_size_sec, 08.10.2026): схема с живой страницы крупно, по клику — во весь экран;
   на телефоне — лентой вбок (на ширине экрана подписи схемы мельче 5 px) */
.k27sz { margin: 0 0 18px; }
.k27sz__a { display: block; border: 1px solid #e4e9ee; border-radius: 16px; background: #fff; overflow: hidden; cursor: zoom-in; }
.k27sz__a img { display: block; width: 100%; height: auto; }
.k27sz__cap { margin-top: 8px; font-size: 13px; line-height: 1.4; color: #7e8299; }
@media (max-width: 767.98px) {
  .k27sz__a { overflow-x: auto; border-radius: 12px; scrollbar-width: thin; }
  .k27sz__a picture, .k27sz__a img { width: 1000px; max-width: none; }
}
/* «Зазор» (Б7, k27c_gap_cards; 09.10.2026 — владелец: карточки «слишком большие по высоте», «добавить все варианты по зазорам»):
   лента компактных карточек от 0,5 до 10 см — фото 3:2, «N см» на снимке, цена или «в смете», просвет и доля, место работы;
   3 см — «чаще всего». Стрелки — на ПК, свайп — на телефоне; у края — затухание, пока есть ещё карточки */
.k27gpw { position: relative; margin: 4px 0 6px; }
.k27gp { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 0 4px; }
.k27gp::-webkit-scrollbar { display: none; }
.k27gpw.is-more .k27gp { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.k27gpw.is-less .k27gp { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.k27gpw.is-less.is-more .k27gp { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.k27gp__c { flex: 0 0 196px; display: flex; flex-direction: column; margin: 0; border: 1px solid #e4e9ee; border-radius: 14px; background: #fff; overflow: hidden; scroll-snap-align: start; }
.k27gp__c.is-pop { border-color: #5cb34e; box-shadow: inset 0 0 0 1px #5cb34e; }
.k27gp__ph { position: relative; display: block; aspect-ratio: 3 / 2; background: #e9eef3; cursor: zoom-in; }
.k27gp__ph > picture { position: absolute; inset: 0; }
.k27gp__z { position: absolute; left: 8px; top: 8px; padding: 2px 9px; border-radius: 10px; background: rgba(255, 255, 255, .94); color: #181c32; font-size: 17px; font-weight: 800; line-height: 1.3; box-shadow: 0 2px 6px rgba(24, 28, 50, .18); }
.k27gp__b { position: absolute; right: 8px; top: 10px; padding: 2px 8px; border-radius: 999px; background: #5cb34e; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.k27gp__t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 9px 11px 10px; }
.k27gp__p { font-size: 17px; font-weight: 800; line-height: 1.25; color: #181c32; white-space: nowrap; }
.k27gp__p--est { font-size: 14px; font-weight: 600; color: #7e8299; }
.k27gp__m { font-size: 13px; line-height: 1.35; color: #3f4254; }
.k27gp__src { margin-top: auto; padding-top: 2px; overflow: hidden; font-size: 12px; line-height: 1.35; color: #a1a5b7; white-space: nowrap; text-overflow: ellipsis; }
.k27gp__src a { color: #7e8299; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.k27gp__src a:hover { color: #3b7a30; }
.k27gpw__nav { position: absolute; top: 48px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e4e9ee; border-radius: 50%; background: #fff; color: #181c32; box-shadow: 0 4px 12px rgba(24, 28, 50, .16); cursor: pointer; }
.k27gpw__nav--prev { left: -12px; }
.k27gpw__nav--next { right: -12px; }
.k27gpw__nav:hover { color: #3b7a30; }
.k27gpw:not(.is-less) .k27gpw__nav--prev, .k27gpw:not(.is-more) .k27gpw__nav--next { display: none; }
@media (hover: none) { .k27gpw__nav { display: none !important; } }
@media (max-width: 767.98px) {
  .k27gp__c { flex-basis: 62%; }
  .k27gpw__nav { display: none !important; }
}
/* 09.10.2026 (владелец: карточки «с воротами и калиткой» и «у наших клиентов» — «большие… высоковато, хочется ниже»):
   ворота — фото 16:9 вместо 4:3, текст плотнее, подпись фото в одну строку; работы на страницах типов (works_selected.php) — снимок
   16:9 вместо 3:2; работы мини-каталога — без описания под заголовком, заголовок не больше двух строк */
.k27ga__ph { aspect-ratio: 16 / 9; }
.k27ga__ov { padding: 44px 14px 12px; }
.k27c .k27ga__h { font-size: 19px; }
.k27c .k27ga__l { margin: 10px 2px 6px; font-size: 14.5px; line-height: 1.45; }
.k27ga__l li { padding: 2px 0 2px 22px; }
.k27ga__l li::before { top: 6px; }
.k27ga__src { display: block; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.k27ga__src i { margin-right: 6px; }
.k27-v1 .lzw-shot { aspect-ratio: 16 / 9; }
.k27h-pf .card-xl-stretch > .mt-5 { margin-top: .75rem !important; }
.k27h-pf .card-xl-stretch > .mt-5 > p { display: none; }
.k27h-pf .card-xl-stretch > .mt-5 > a.fs-4 { display: -webkit-box; overflow: hidden; font-size: 16px !important; line-height: 1.35 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 09.10.2026, вечер (владелец: «переключатель картинок… когда на сайт смотришь»): в карточке ленты зазоров — снимки стопкой, виден
   один; «‹ • • ›» внизу снимка; значок зазора и «чаще всего» пропускают нажатие к снимку (открыть крупно) */
.k27gp__fr { position: relative; aspect-ratio: 3 / 2; background: #e9eef3; }
.k27gp__fr > .k27gp__ph { position: absolute; inset: 0; display: none; aspect-ratio: auto; }
.k27gp__fr > .k27gp__ph.is-on { display: block; }
.k27gp__z, .k27gp__b { pointer-events: none; }
.k27gp__src:not(.is-on) { display: none; }
.k27gp__sw { position: absolute; left: 50%; bottom: 7px; z-index: 1; display: flex; align-items: center; gap: 1px; padding: 0 2px; border-radius: 999px; background: rgba(24, 28, 50, .6); color: #fff; transform: translateX(-50%); }
.k27gp__sw button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.k27gp__sw button:hover { background: rgba(255, 255, 255, .2); }
.k27gp__dots { display: flex; gap: 5px; padding: 0 2px; }
.k27gp__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.k27gp__dots i.is-on { background: #fff; }
/* 09.10.2026, вечер (владелец: «переключатель картинок… когда на сайт смотришь… в хиро»): у первого экрана А — стрелки, счётчик и
   свайп, как у исполнений А2/А4; стрелки видны сразу, а не только при наведении; подпись кадра не заходит под счётчик */
.k27tg--a .k27tg__nav { opacity: .92; }
.k27tg--a .k27tg__nav:hover { opacity: 1; }
.k27tg--a .k27tg__cap { max-width: calc(100% - 84px); }
/* 09.10.2026 (владелец: «видео отзывы интегрируем?»): видеоотзыв в шаге «Сдача» мини-каталога — обложка 3:4, кнопка просмотра,
   длительность; видео — в просмотрщике по нажатию */
.k27vr { margin: 0 auto; max-width: 260px; }
.k27vr__a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: #e9eef3; box-shadow: 0 6px 18px rgba(24, 28, 50, .14); }
.k27vr__a > picture { position: absolute; inset: 0; }
.k27vr__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #3b7a30; box-shadow: 0 6px 18px rgba(24, 28, 50, .25); transition: transform .15s ease; }
.k27vr__play svg { margin-left: 3px; }
.k27vr__a:hover .k27vr__play { transform: scale(1.06); }
.k27vr__dur { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 8px; background: rgba(12, 15, 26, .6); color: #fff; font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.k27vr__cap { display: flex; gap: 6px; align-items: baseline; margin-top: 8px; font-size: 13px; line-height: 1.4; color: #5e6278; }
.k27vr__cap i { color: #3b7a30; }
.k27vr__cap a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 09.10.2026 (владелец: «в видеоотзыве текст на плеер заходит», затем «картинки… как и видео, чтобы текст был отдельно от
   картинок»): в просмотрщике мини-каталога снимок и ролик не заходят под подпись и под кнопки сверху — место под них меряет
   k27c_lb_script (fit(): --k27lb-t/-b — отступы, --k27lb-h/-w — сколько остаётся кадру). Отступ — только у обёрток кадров
   (у кнопок панели тот же класс fslightbox-flex-centered). Кадр не растягивается больше своего размера. */
.fslightbox-container.k27-lbf .fslightbox-absoluted.fslightbox-full-dimension.fslightbox-flex-centered { box-sizing: border-box; padding: var(--k27lb-t, 56px) 0 var(--k27lb-b, 96px); }
.fslightbox-container.k27-lbf .fslightbox-source { display: block; width: auto !important; height: auto !important; max-width: var(--k27lb-w, 92vw); max-height: var(--k27lb-h, calc(100vh - 152px)); }
/* 09.10.2026: гербы районов — со скелетоном загрузки (k27c_districts через img_preset); общее правило скелетона снимает filter у
   загруженной картинки и обрезает выступы рамкой — тень герба возвращаем и не режем */
.k27d__g > picture.img-skel { overflow: visible; }
.k27d__g > picture.img-skel.is-loaded img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
/* 09.10.2026 — страница профнастила (lib/v1p.php): фото парой (лист с одной и с двух сторон, грунт каркаса), схемы обоих наборов,
   таблица цены «высота × покрытие» с подписью колонки, плашки четырёх цветов */
.k27p-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 8px; }
.k27p-pair--sm { max-width: 760px; }
.k27p-ph { margin: 0; }
.k27p-ph__a { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: #e9eef3; cursor: zoom-in; }
.k27p-ph__a > picture { position: absolute; inset: 0; }
.k27p-ph--scheme .k27p-ph__a { background: #fff; border: 1px solid #eff2f5; }
.k27p-ph figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0; font-size: 14px; line-height: 1.4; color: #7e8299; }
.k27p-ph figcaption b { font-size: 15px; font-weight: 600; color: #181c32; }
.k27p-ph figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.k27tp--pn th small { display: block; font-size: 12.5px; font-weight: 500; color: #7e8299; }
.k27tp--pn th.k27tp__hc { color: #3b7a30; }
@media (max-width: 575.98px) { .k27p-pair { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .k27p-pair.k27p-pair--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .k27p-pair--2 figcaption b { font-size: 14px; } .k27p-pair--2 figcaption span { font-size: 12px; } }
.k27hv__prow--one { grid-template-columns: minmax(0, 1fr); }

/* профнастил: «Другие заборы, ворота и калитки» — ссылки на соседние страницы с ценой «от» (10.10.2026, lib/v1p.php k27p_other) */
.k27p-oth { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 768px) { .k27p-oth { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k27p-oth__c { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid #eff2f5; border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.k27p-oth__c:hover { border-color: #cfe9c9; box-shadow: 0 10px 24px -14px rgba(24, 28, 50, .3); transform: translateY(-2px); }
.k27p-oth__c b { font-size: 16px; font-weight: 700; line-height: 1.3; color: #181c32; }
.k27p-oth__c:hover b { color: #3b7a30; }
.k27p-oth__c span { font-size: 14px; font-weight: 600; line-height: 1.3; color: #7e8299; }
/* карточка ворот: материал («из профнастила») — второй строкой заголовка, мельче */
.k27c .k27ga__h small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; opacity: .92; }
/* профнастил: схема с обратной стороны — кадр 3:2 с крупными подписями; на ПК не шире 900 px, на телефоне лента 600 px (10.10.2026) */
.k27sz--pn { max-width: 900px; }
@media (max-width: 767.98px) { .k27sz--pn .k27sz__a picture, .k27sz--pn .k27sz__a img { width: 600px; } }
/* сетки (lib/v1m.php, 10.10.2026): три кнопки варианта у рабицы, две карточки ворот, три фото в ряд (цвета 3D-сетки) */
.k27hv__pills--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .k27hv__pills--3 { grid-template-columns: minmax(0, 1fr); } }
.k27g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.k27p-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
@media (max-width: 767.98px) { .k27p-pair--3 { grid-template-columns: minmax(0, 1fr); } }
.k27p-pair--1 { grid-template-columns: minmax(0, 520px); }

/* сетки: цвета варианта плашками портфолио (badge badge-light-<код RAL> из стилей сайта) под ценой в таблице и в подписи под ней (k27m_tags, lib/v1m.php) */
.k27m-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.k27m-leg__i .badge { flex: 0 0 auto; }
@media (max-width: 575.98px) { .k27m-tags .k27m-ral { display: none; } .k27m-tags .badge { padding: 4px 6px; } }
.k27-v1 .k27m-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #5e6278; }
.k27m-leg__t { font-weight: 600; color: #3f4254; }
.k27m-leg__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.k27m-leg__n { flex: 1 0 100%; }
.k27-v1 .k27m-leg + .k27c-pline { margin-top: 16px; }

/* ===== Раздел «Заборы» (lib/v1z.php, 10.10.2026): первый экран — заголовок с ценой и кнопками, четыре карточки видов «фото с ценой» ===== */
.k27z-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-bottom: 22px; }
.k27z-top__sub { margin: 8px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.5; color: #5e6278; }
.k27z-top__a { display: flex; align-items: center; gap: 14px 24px; }
.k27z-top__from { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.k27z-top__from small { font-size: 13px; font-weight: 500; color: #7e8299; }
.k27z-top__from b { font-size: 26px; font-weight: 800; color: #181c32; }
.k27z-top__btns { display: flex; gap: 10px; }
.k27z-top__btns .btn { white-space: nowrap; }
@media (max-width: 1199.98px) { .k27z-top { grid-template-columns: minmax(0, 1fr); } }
/* страницы заборов «по задаче» (12.10.2026): фото нашей работы на первом экране — справа от заголовка на компьютере, над заголовком на телефоне */
.k27-v1 .k27t-top { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: auto 1fr; grid-template-areas: "t ph" "a ph"; align-items: start; }
.k27t-top .k27z-top__t { grid-area: t; }
.k27t-top .k27z-top__a { grid-area: a; align-self: start; }
.k27t-ph { grid-area: ph; margin: 0; }
.k27t-ph__i { display: block; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #eff2f5; }
.k27t-ph figcaption { padding: 6px 2px 0; font-size: 13px; line-height: 1.4; color: #7e8299; }
.k27t-ph figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1199.98px) { .k27-v1 .k27t-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ph" "t" "a"; } .k27t-ph { max-width: 720px; } }
@media (max-width: 575.98px) {
  .k27z-top__a { flex-wrap: wrap; }
  .k27z-top__btns { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k27z-top__btns .btn { padding-left: 8px; padding-right: 8px; }
}
/* сводные таблицы раздела: вид — ссылкой, вариант — второй строкой мельче */
.k27-v1 .k27z-t td.k27z-tv { font-weight: 700; }
.k27z-tv small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.35; color: #7e8299; }
/* «Недорогие»: плашка «от» — ссылка на вид */
.k27z-stat { transition: background-color .15s ease; }
.k27z-stat:hover { background: #e6f4e2; }
.k27z-stat span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* отзывы в ряд */
.k27z-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.k27z-quotes .k27c-quote { margin: 0; }
@media (max-width: 991.98px) { .k27z-quotes { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* «Чем отличаются виды»: на телефоне строка таблицы — карточка «подпись — значение» */
@media (max-width: 767.98px) {
  .k27-v1 .k27z-cmp, .k27-v1 .k27z-cmp tbody { display: block; }
  .k27-v1 .k27z-cmp thead { display: none; }
  .k27-v1 .k27z-cmp tr { display: block; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #e4e9ee; border-radius: 12px; background: #fff; }
  .k27-v1 .k27z-cmp tr > td { display: flex; gap: 12px; padding: 5px 0 !important; border: 0; text-align: left; font-size: 15px; line-height: 1.4; background: none !important; box-shadow: none !important; }
  .k27-v1 .k27z-cmp tr > td.k27z-cmp__k { display: block; padding-left: 0 !important; padding-bottom: 6px !important; font-size: 17px; }
  .k27-v1 .k27z-cmp td[data-th]::before { content: attr(data-th); flex: 0 0 40%; min-width: 0; white-space: normal; font-weight: 500; color: #7e8299; }
}
/* сводные таблицы раздела на телефоне: поля ячеек меньше, чтобы четыре колонки помещались без прокрутки */
@media (max-width: 575.98px) {
  .k27-v1 .k27z-t td, .k27-v1 .k27z-t th { padding-left: 6px !important; padding-right: 6px !important; font-size: 15px; }
  .k27-v1 .k27z-t td:first-child, .k27-v1 .k27z-t th:first-child { padding-left: 8px !important; }
  .k27-v1 .k27z-t th small { font-size: 12px; }
}
/* раздел «Заборы»: карточки видов — компонент .dir-card, как на мини-каталоге евроштакетника (k27z_kind_cards) */
.k27z-dirs { margin-bottom: 20px; }
.k27-v1 .k27z-dir h2.dir-title { margin: 0 0 6px; }
/* раздел «Заборы»: призыв на замер (k27z_cta) */
.k27z-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 28px; border-radius: 16px; background: #f1f9ef; }
.k27-v1 .k27z-cta__h { margin: 0 0 6px; font-size: 21px; font-weight: 700; line-height: 1.25; color: #181c32; }
.k27-v1 .k27z-cta__t p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.5; color: #3f4254; }
.k27z-cta__b { flex: 0 0 auto; display: flex; gap: 10px; }
.k27z-cta__b .btn { white-space: nowrap; }
.k27z-cta__b .btn-light-primary { background-color: #fff; }
@media (max-width: 991.98px) {
  .k27z-cta { flex-direction: column; align-items: stretch; padding: 18px; }
  .k27z-cta__b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k27z-cta__b .btn { padding-left: 8px; padding-right: 8px; }
}
/* раздел «Заборы»: «Как проходит заказ» — шаги с номерами (k27z_steps) */
.k27-v1 .k27z-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.k27z-step { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid #e4e9ee; border-radius: 14px; background: #fff; }
.k27z-step__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; background: #5cb34e; color: #fff; font-size: 17px; font-weight: 700; }
.k27z-step b { font-size: 17px; font-weight: 700; line-height: 1.3; color: #181c32; }
.k27z-step__t { font-size: 15px; line-height: 1.5; color: #5e6278; }
.k27-v1 .k27z-steps + .k27c-pline { margin-top: 14px; }
@media (max-width: 991.98px) { .k27-v1 .k27z-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .k27-v1 .k27z-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .k27-v1 .k27z-steps--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .k27-v1 .k27z-steps--5 > li { grid-column: span 2; } .k27-v1 .k27z-steps--5 > li:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 576px) and (max-width: 991.98px) { .k27-v1 .k27z-steps--5 > li:last-child { grid-column: 1 / -1; } }
/* «Пример сметы по строкам» на страницах ворот (11.10.2026): цена не переносится, строка «Итого» — жирная */
.k27-v1 #smeta ~ * .k27c-table td:first-child, .k27-v1 #smeta ~ * .k27c-table th:first-child { text-align: left; }
.k27-v1 #smeta ~ * .k27c-table td:last-child { white-space: nowrap; }
.k27-v1 #smeta ~ * .k27c-table tbody tr:last-child td { font-weight: 700; color: #181c32; }
@media (max-width: 575.98px) {
  .k27-v1 .k27z-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .k27z-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; }
  .k27z-step__n { grid-row: 1 / span 2; margin: 0; }
}
/* «Забор на винтовых сваях» (lib/v1s.php): разрез основания в блоке «Как устроен» */
.k27s-fig { max-width: 520px; }
/* «на сваях»: под ценой метра забора — ориентир со сваями; на первом экране — строка «+ сваи отдельно» */
.k27s-sv { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #7e8299; white-space: nowrap; }
.k27z-top__from small.k27s-plus { margin-top: 3px; color: #3f4254; font-weight: 600; white-space: normal; }
.k27s-leg { display: none; }
@media (max-width: 575.98px) { .k27s-sv { font-size: 12px; } .k27s-sv span { display: none; }
  .k27-v1 .k27z-t th small.k27s-leg { display: block; font-weight: 500; line-height: 1.3; color: #7e8299; } }
/* Ворота (lib/v1g.php): строки цены на первом экране — варианты обшивки и привод; рисунок ворот в блоке «Как устроены» */
.k27g-pop { display: block; }
.k27g-pop__r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.k27g-pop__r + .k27g-pop__r { margin-top: 5px; }
.k27g-pop__r em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #dff0da; font-size: 12px; font-style: normal; font-weight: 600; color: #3b7a30; white-space: nowrap; }
.k27g-pop__r--add { padding-top: 6px; border-top: 1px dashed #cfe5c9; }
.k27g-pop__r--add b { color: #3f4254; }
.k27g-fig { max-width: 760px; margin: 0 0 18px; border: 1px solid #eef0f4; border-radius: 14px; overflow: hidden; background: #fff; }
.k27g-fig a { display: block; aspect-ratio: 25 / 13; overflow: hidden; cursor: zoom-in; }
.k27g-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1100px; margin: 0 0 14px; }
.k27g-two .k27g-fig { max-width: none; margin: 0; }
.k27g-two .k27p-pair { grid-template-columns: minmax(0, 1fr); margin: 0; }
.k27g-two--eq { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 767.98px) { .k27g-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .k27g-two--eq { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 575.98px) { .k27-v1 .k27z-cmp tr.k27tp__pop { border-color: #bfe0b8; background: #f4fbf2; } }
.k27g-fig figcaption { padding: 8px 14px; border-top: 1px solid #eef0f4; font-size: 13px; line-height: 1.4; color: #7e8299; }
/* Главная каталога (lib/v1r.php): группы плиток «все цены» по разделам */
.k27r-g { margin: 0 0 18px; }
/* вторая редакция главной (10.10.2026): первый экран — раскладка страниц товаров; разделы кнопками-ссылками, цены заборов строками-ссылками;
   карточки «фото с ценой» в четыре колонки; плашки цифр на всю ширину; две таблицы цен рядом; текст с фото сбоку */
.k27r-pf { margin-top: 3px; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: #3b7a30; }
.k27r-hero .k27hv__pill:hover { background: #f8fcf7; }
.k27r-lab { margin: 16px 0 8px; }
.k27r-hero .k27hv__pop { margin-bottom: 16px; }
a.k27r-pr { color: inherit; }
a.k27r-pr:hover span { color: #3b7a30; text-decoration: underline; text-underline-offset: 3px; }
.k27g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .k27g--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k27r-tail { margin-top: 18px; }
.k27c .k27r-tail p:last-child { margin-bottom: 0; }
.k27c .k27g + .k27r-g, .k27c .k27r-tail + .k27r-g { margin-top: 22px; margin-bottom: 0; }
.k27r-nums { margin: 0 0 22px; }
.k27r-nums .k27c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; }
a.k27r-num { transition: background-color .15s ease; }
a.k27r-num:hover { background: #e6f4e2; }
.k27r-nums .k27c-stat { max-width: none; min-width: 0; padding: 16px 20px; border-radius: 14px; }
.k27r-nums .k27c-stat b { font-size: 30px; }
.k27r-nums .k27c-stat span { font-size: 14.5px; }
@media (max-width: 767.98px) { .k27r-nums .k27c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .k27r-nums .k27c-stat { padding: 12px 14px; } .k27r-nums .k27c-stat b { font-size: 24px; } }
.k27r-wl { max-width: 70ch; }
.k27r-pt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 4px 0 12px; }
.k27r-pt__c { min-width: 0; }
.k27r-pt .k27c-tw { margin: 0; }
.k27-v1 .k27r-pt .k27c-pline { margin-top: 8px; }
@media (max-width: 991.98px) { .k27r-pt { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.k27r-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.k27r-two .k27p-pair { grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (max-width: 991.98px) { .k27r-two { grid-template-columns: minmax(0, 1fr); gap: 16px; } .k27r-two .k27p-pair { max-width: 560px; } }
.k27r-g__h { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #181c32; }
.k27r-g .k27p-oth { margin: 0; }

/* 15.10.2026 (оценка с нуля): кнопки и условия под карточками типов мини-каталога; мессенджеры под кнопками первого экрана и в карточке
   менеджера (k27u_msgr); выбор варианта над калькулятором (k27c_calc_step2) */
.k27h-cta { max-width: 560px; margin-top: 4px; }
.k27h-cta .k27hv__l { margin-bottom: 12px; }
.k27-msgr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font-size: 15px; line-height: 1.4; color: #5e6278; }
.k27-msgr a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #3b7a30; }
.k27-msgr a:hover { color: #2f6326; }
.k27-msgr__i { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background: no-repeat center / contain; }
.k27-msgr__i--wa { background-image: url(/assets/media/svg/social-logos/whatsapp.svg); }
.k27-msgr__i--max { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a8cff'/%3E%3Cstop offset='1' stop-color='%238a40ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='20' height='20' rx='6' fill='url%28%23g%29'/%3E%3Cpath d='M10 4.6c-3.2 0-5.7 2.2-5.7 5 0 1.5.7 2.9 1.9 3.8l-.4 2.3 2.4-1.3c.6.2 1.2.3 1.8.3 3.2 0 5.7-2.2 5.7-5.1S13.2 4.6 10 4.6z' fill='%23fff'/%3E%3C/svg%3E"); }   /* свой знак, не логотип MAX (16.10.2026) */
.k27-msgr--card { justify-content: center; margin-top: 10px; }
.k27z-top__a { flex-wrap: wrap; }
.k27z-top__a .k27-msgr { flex: 1 1 100%; margin-top: 0; }
.k27calc-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.k27calc-v__l { margin-right: 4px; font-size: 15px; font-weight: 600; color: #3f4254; }
.k27calc-v__n { margin: -6px 0 16px; font-size: 14px; color: #5e6278; }
@media (max-width: 575.98px) { .k27calc-v__l { flex: 1 1 100%; } }   /* подпись — своей строкой, обе кнопки — рядом под ней */