/* Страница конструкции (v3, II.3). Светлая сетка сайта: белые карточки
   на сером фоне, тёмные заголовки, серые подписи — как на главной. */
/* .wrapper шаблона — флекс-контейнер, поэтому странице нужен явный min-width:0
   и width:100%, иначе широкая таблица растягивает её шире экрана. */
.kc{max-width:1180px;width:100%;min-width:0;flex:1 1 auto;margin:0 auto;padding:18px 16px 46px;color:#16181c}
.kc-bc{font-size:13px;color:#8a93a0;margin-bottom:14px}
.kc-bc a{color:#6b7280;text-decoration:none}
.kc-bc a:hover{color:#0f7a3d}
.kc-bc span{margin:0 6px;color:#c3c9d2}
.kc-head h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.03em;margin:0 0 12px;line-height:1.15}
.kc-lead{font-size:16.5px;line-height:1.6;color:#3a3f46;margin:0 0 10px;max-width:72ch}
.kc-where{margin-top:14px;background:#fff;border:1.5px solid #e9ebee;border-radius:14px;padding:14px 16px}
.kc-wl{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a93a0;margin-bottom:6px}
.kc-where ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:15px;color:#3a3f46}

.kc-s{margin-top:34px}
.kc-s h2{font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.kc-sub{font-size:14.5px;color:#6b7280;margin:0 0 14px;line-height:1.55;max-width:76ch}
.kc-note{font-size:13.5px;color:#8a93a0;margin:10px 0 0;line-height:1.5}

.kc-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:l}
.kc-layers li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;background:#fff;
  border:1.5px solid #eceff3;border-radius:11px;padding:11px 14px;font-size:15px;line-height:1.5}
.kc-ln{font-weight:800;color:#0f7a3d;font-variant-numeric:tabular-nums}

.kc-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kc-step{background:#fff;border:1.5px solid #eceff3;border-radius:14px;padding:15px 16px}
.kc-stn{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0f7a3d}
.kc-step h3{font-size:16px;font-weight:800;margin:5px 0 7px;letter-spacing:-.01em}
.kc-step p{margin:0;font-size:14.5px;line-height:1.55;color:#3a3f46}
.kc-stm{margin-top:9px;font-size:13px;color:#8a93a0;line-height:1.45}

.kc-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.kc-pl{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a93a0}
.kc-preset{height:34px;padding:0 15px;border:1.5px solid #e5e8ec;background:#fff;border-radius:10px;
  font:inherit;font-size:14px;font-weight:700;color:#202225;cursor:pointer;transition:.15s}
.kc-preset:hover{border-color:#c9ccd2}
.kc-preset.on{background:#202225;border-color:#202225;color:#fff}
.kc-pnote{font-size:13px;color:#8a93a0}

/* .kc-s — flex-колонка, у её детей min-width:auto: без явного нуля широкая
   таблица распирает страницу вместо того, чтобы прокручиваться внутри бокса.
   display:table у таблицы — страховка от глобального table{display:flex} в main.css. */
.kc-s > *{min-width:0}
.kc-tablebox{overflow-x:auto;background:#fff;border:1.5px solid #e9ebee;border-radius:14px;max-width:100%}
.kc-table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px;display:table}
.kc-table thead{display:table-header-group}
.kc-table tbody{display:table-row-group}
.kc-table tr{display:table-row}
.kc-table th,.kc-table td{display:table-cell}
.kc-table th,.kc-table td{text-align:left;padding:11px 14px;border-bottom:1px solid #f0f2f5;vertical-align:top;display:table-cell}
.kc-table th{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a93a0;white-space:nowrap}
.kc-table tr:last-child td{border-bottom:0}
.kc-secrow td{background:#f7f8fa;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5a6068}
.kc-row--info{background:#fbfbfc}
/* пресет прячет строки атрибутом hidden — глобальный display у tr его перебивает */
.kc-table tr[hidden]{display:none!important}
.kc-m b{display:block;line-height:1.35}
.kc-out{display:block;font-size:12px;color:#9aa3af;margin-top:2px}
.kc-prod{display:block;font-size:12.5px;color:#6b7280;margin-top:3px;text-decoration:none;line-height:1.35}
.kc-prod:hover{color:#0f7a3d}
.kc-purp{max-width:38ch;line-height:1.5;color:#3a3f46}
.kc-when{display:block;font-size:12.5px;color:#8a93a0;margin-top:4px;line-height:1.45}
.kc-skip{white-space:normal;max-width:22ch;color:#3a3f46}
.kc-qty{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:#202225}
.kc-st{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap;background:#f2f3f5;color:#5a6068}
.kc-st.st-core{background:#fdecea;color:#b8431a}
.kc-st.st-system{background:#fff3e6;color:#a85a10}
.kc-st.st-related{background:#fdf7e3;color:#8a6d12}
.kc-st.st-optional{background:#f2f3f5;color:#6b7280}

.kc-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.kc-cart{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:12px;
  background:#0fbc43;color:#fff;font-size:16px;font-weight:800;text-decoration:none;transition:.15s}
.kc-cart:hover{background:#0ca93b;color:#fff}
.kc-buyn{font-size:13.5px;color:#8a93a0;max-width:44ch;line-height:1.45}

.kc-expl{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.kc-ex{background:#fff;border:1.5px solid #eceff3;border-radius:14px;padding:16px}
.kc-ex h3{font-size:16.5px;font-weight:800;margin:0 0 9px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;letter-spacing:-.01em}
.kc-ex p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:#3a3f46}
.kc-ex p:last-child{margin-bottom:0}

.kc-faq{display:flex;flex-direction:column;gap:8px}
.kc-q{background:#fff;border:1.5px solid #eceff3;border-radius:12px;padding:0 16px}
.kc-q summary{cursor:pointer;padding:14px 0;font-size:15.5px;font-weight:700;list-style:none;line-height:1.45}
.kc-q summary::-webkit-details-marker{display:none}
.kc-q summary::after{content:"+";float:right;color:#9aa3af;font-weight:800;margin-left:12px}
.kc-q[open] summary::after{content:"−"}
.kc-a{padding:0 0 14px}
.kc-a p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:#3a3f46}
.kc-a p:last-child{margin-bottom:0}

@media(max-width:760px){
  .kc{padding:14px 14px 34px}
  .kc-steps,.kc-expl{grid-template-columns:1fr}
  .kc-buy{flex-direction:column;align-items:stretch}
  .kc-cart{justify-content:center}
}

/* 13.09.2026 — II.1a: материалы вне складского ассортимента. Строка остаётся
   серой и некликабельной как товар, но поставку можно запросить. */
.kc-ask{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px;
  font:inherit;font-size:13px;line-height:1.3;color:#3a3a3a;background:#f4f4f4;
  border:1px solid #d8d8d8;border-radius:4px;cursor:pointer}
.kc-ask:hover{background:#ececec;border-color:#c4c4c4}
.kc-ask i{font-style:normal}

/* 14.09.2026 — позиция есть в каталоге, но продаётся по запросу: отличаем её
   от той, которой у нас нет вовсе. Строка остаётся серой, пометка другая. */
.kc-out--req{color:#6b5a2a;background:#fbf5e4}

/* ==========================================================================
 * 14.09.2026 — мобильная вёрстка состава (аудит, п. 1).
 * На узком экране таблица из пяти колонок нечитаема и уезжает вбок, поэтому
 * каждая строка превращается в карточку: название сверху, под ним подписанные
 * поля. Подписи берутся из data-l ячеек — дублировать их в разметке не нужно.
 * ========================================================================== */

/* плашка про предварительный расчёт (п. 3) */
.kc-warn{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:11px 14px;
  background:#fff6e5;border:1px solid #f0d9a8;border-left:4px solid #d99a15;border-radius:10px;
  font-size:13.5px;line-height:1.45;color:#5a4a22}
.kc-warn::before{content:"!";flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:#d99a15;color:#fff;font-weight:800;font-size:12px;line-height:18px;text-align:center}
.kc-warn b{color:#4a3c19}
.kc-warn>span{flex:1 1 auto;min-width:0}

/* расшифровка пресетов (п. 4) */
.kc-plegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:0;font-size:12.5px;color:#6b7280}
.kc-plegend div{display:flex;gap:6px;align-items:baseline}
.kc-plegend dt{font-weight:700;color:#3a3f46}
.kc-plegend dd{margin:0}

/* метка технологического элемента (п. 2) */
.kc-tech{display:inline-block;margin:3px 0 2px;padding:1px 7px;border-radius:6px;
  background:#eceef1;color:#5a6068;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.kc-row--info{background:#f4f6f8}
.kc-row--info .kc-m b{color:#3a3f46}
.kc-row--info td{border-bottom-color:#e6e9ee}

@media(max-width:760px){
  /* таблица -> карточки */
  .kc-tablebox{overflow:visible;border:0;background:none;border-radius:0}
  .kc-table{display:block;width:100%;min-width:0;font-size:14px}
  .kc-table thead{display:none}
  .kc-table tbody,.kc-table tr{display:block;width:100%}
  .kc-table td{display:block;width:100%;border:0;padding:0;white-space:normal;max-width:none}

  .kc-table tr.kc-row{margin:0 0 10px;padding:12px 13px;background:#fff;
    border:1.5px solid #e9ebee;border-radius:13px}
  .kc-table tr.kc-row--info{background:#f4f6f8;border-color:#dfe4ea}

  /* подписи полей из data-l */
  .kc-table td[data-l]:not(.kc-m)::before{content:attr(data-l);display:block;
    margin:9px 0 2px;font-size:11px;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;color:#9aa3af}

  .kc-m b{font-size:15.5px}
  .kc-purp,.kc-skip{max-width:none}
  .kc-qty{white-space:normal;font-size:15px}

  /* заголовок секции — полоса над карточками */
  .kc-table tr.kc-secrow{margin:18px 0 8px;padding:0}
  .kc-table tr.kc-secrow:first-child{margin-top:0}
  .kc-table tr.kc-secrow td{background:#eef1f4;border-radius:8px;padding:7px 12px}

  /* кнопки запроса — на всю ширину, по одной в строке */
  .kc-ask{display:flex;width:100%;justify-content:center;margin-top:8px;padding:9px 12px;font-size:14px}
  .kc-prod{display:block}

  /* переключатель пресетов не должен вылезать за экран */
  .kc-presets{gap:6px}
  .kc-presets .kc-preset{flex:1 1 auto;min-width:0}
  .kc-pl{flex:1 0 100%}
  .kc-pnote{flex:1 0 100%;margin:0}
  .kc-plegend{flex-direction:column;gap:5px}

  .kc-warn{font-size:13px;padding:10px 12px}
}

/* 14.09.2026 — раздел «Конструкции»: список узлов по этапам (аудит, п. 7). */
.kc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.kc-list li{background:#fff;border:1.5px solid #e9ebee;border-radius:13px;padding:13px 15px}
.kc-list a{display:block;text-decoration:none;color:inherit}
.kc-list a b{display:block;font-size:16px;line-height:1.3;color:#15171b}
.kc-list a:hover b{color:#0f7a3d}
.kc-list a span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:#6b7280}
.kc-listm{display:block;margin-top:7px;font-size:12px;color:#9aa3af}
@media(max-width:760px){.kc-list{grid-template-columns:1fr}}

/* 14.09.2026 — данные упаковки товара противоречивы (аудит, п. 5). */
.kc-doubt{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:6px;
  background:#fdecea;color:#b8431a;font-size:11.5px;font-weight:700}

/* ==========================================================================
 * 14.09.2026 — II.10: короткий ответ, дата актуализации, блок «есть в каталоге».
 * ========================================================================== */
.kc-answer{margin:0 0 14px;padding:15px 17px;background:#f2f7f4;border-left:4px solid #0f7a3d;
  border-radius:0 10px 10px 0;font-size:17px;line-height:1.55;color:#22262b}
.kc-answer b{color:#15171b}
.kc-upd{margin:0 0 16px;font-size:12.5px;color:#9aa3af}
.kc-upd time{color:#6b7280}

.kc-have{margin:16px 0 0;padding:15px 17px;background:#fff;border:1.5px solid #e9ebee;border-radius:13px}
.kc-have h3{margin:0 0 9px;font-size:15px;color:#15171b}
.kc-have ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:5px 16px}
.kc-have li{font-size:13.5px;line-height:1.4}
.kc-have a{color:#3a3f46;text-decoration:none;border-bottom:1px solid #e2e5e9}
.kc-have a:hover{color:#0f7a3d;border-bottom-color:#0f7a3d}
.kc-haven{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#6b7280}
@media(max-width:760px){
  .kc-answer{font-size:16px;padding:13px 14px}
  .kc-have ul{grid-template-columns:1fr}
}