/* Start:/local/components/kermi/technical.drawings/templates/.default/style.css?179032242426937*/
/* ==========================================================================
   KERMI.PRO — библиотека чертежей трубчатых радиаторов.
   Токены совпадают с посадочной «Покраска радиаторов» (.kmr): те же чернила,
   бумага и зелёный шаблона. Кнопки и акценты — лаймовый темы #78b82a (наведение #5f9822),
   как во всём шаблоне; текстовые ссылки — #5f9822, чтобы мелкий текст читался.
   Шрифты — только шаблона. Шаблон dresscodeV2 снимает оформление с input/select
   (appearance: none) — поэтому переключатели и списки оформлены здесь явно.
   ========================================================================== */
.kd {
    /* цвет */
    --ink: #14161a;
    --ink-2: #3b4048;
    --ink-3: #5a616b;
    --green: #78b82a;
    --green-soft: #eef6e4;
    /* акцент = цвета темы сайта (themes/kermi): #78B82A, наведение #5F9822 */
    --green-ink: #78b82a;
    --green-ink-2: #5f9822;
    /* текстовые ссылки — оттенок наведения темы: лаймовый #78B82A мелким текстом на белом плохо читается */
    --green-text: #5f9822;
    --green-text-2: #4a7a18;
    --paper: #f1efea;
    --surface: #ffffff;
    --surface-2: #f7f6f2;
    --rule: #e2ded4;
    --rule-2: #cfc9bc;
    /* шрифты */
    --f-reg: "roboto_ltregular", arial, sans-serif;
    --f-med: "robotomedium", "roboto_ltregular", arial, sans-serif;
    --f-bold: "robotobold", "roboto_ltregular", arial, sans-serif;
    --f-mono: "JetBrains Mono", "roboto_ltregular", monospace;
    /* отступы: 4 / 8 / 16 / 24 / 40 / 64 */
    --s1: 4px;
    --s2: 8px;
    --s3: 16px;
    --s4: 24px;
    --s5: 40px;
    --s6: 64px;
    /* формы */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --shadow: 0 6px 20px rgba(20, 22, 26, .10);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --fast: .18s var(--ease);
    --control-h: 48px;
    box-sizing: border-box;
    max-width: 1248px;
    margin: 0 auto;
    padding-bottom: var(--s5);
    color: var(--ink-2);
    font-family: var(--f-reg);
    font-size: 16px;
    line-height: 1.6;
}
.kd *, .kd *::before, .kd *::after { box-sizing: inherit; }
.kd a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; transition: color var(--fast); }
.kd a:hover { color: var(--green-text-2); }
.kd :focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: var(--r-sm); }
.kd img { max-width: 100%; height: auto; }
.kd [hidden] { display: none !important; }
.kd-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kd-preview { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: #fff4d6; color: #5c4400; font-size: 14px; }

/* ---------- типографика: 34 / 24 / 18 / 16 / 14 ---------- */
.kd-h1 { margin: 0 0 var(--s3); color: var(--ink); font: 400 clamp(26px, 3.2vw, 36px)/1.2 var(--f-bold); }
.kd-h2 { margin: 0 0 var(--s2); color: var(--ink); font: 400 clamp(20px, 2.2vw, 24px)/1.3 var(--f-bold); }
.kd-h3 { margin: 0 0 var(--s2); color: var(--ink); font: 400 18px/1.35 var(--f-med); }
.kd-lead { max-width: 70ch; margin: 0 0 var(--s4); font-size: 17px; }
.kd-muted { max-width: 80ch; margin: 0 0 var(--s3); color: var(--ink-3); font-size: 15px; }
.kd-strong { color: var(--ink); font-family: var(--f-med); font-weight: 400; }
.kd-count { margin-left: var(--s2); color: var(--ink-3); font: 400 15px/1 var(--f-reg); white-space: nowrap; }
.kd-link { font-family: var(--f-med); }

.kd-hero { padding: var(--s2) 0 var(--s4); }
.kd-hero--index .kd-lead { margin: 0; color: var(--ink-3); font-size: 15px; }

/* Характеристики модели: одна полоса «метка — значение» без карточек */
.kd-specs { display: flex; flex-wrap: wrap; margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kd-specs div { padding: 0 var(--s4); border-left: 1px solid var(--rule); }
.kd-specs div:first-child { padding-left: 0; border-left: 0; }
.kd-specs dt { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.kd-specs dd { margin: 0; color: var(--ink); font: 400 17px/1.35 var(--f-med); white-space: nowrap; }

.kd-section { margin-top: var(--s6); }
.kd-band { padding: var(--s4); border-radius: var(--r-lg); background: var(--surface-2); }
.kd .kd-h2 { scroll-margin-top: 110px; }
.kd-mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kd-unit { margin-left: .25em; font-family: var(--f-reg); font-size: .78em; color: var(--ink-3); }

/* навигация по странице модели */
.kd-toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.kd .kd-toc a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 14px/1.2 var(--f-med); text-decoration: none; transition: border-color var(--fast), background var(--fast); }
.kd .kd-toc a:hover { border-color: var(--green-ink); background: var(--green-soft); }

/* ---------- кнопки ---------- */
.kd-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kd .kd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r-md);
    font: 400 15px/1.2 var(--f-med); text-align: center; text-decoration: none; cursor: pointer;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.kd .kd-btn--primary { background: var(--green-ink); color: #fff; }
.kd .kd-btn--primary:hover { background: var(--green-ink-2); color: #fff; }
.kd .kd-btn--ghost { border-color: var(--rule-2); background: var(--surface); color: var(--ink); }
.kd .kd-btn--ghost:hover { border-color: var(--green-ink); color: var(--ink); }
.kd .kd-btn.is-busy { opacity: .6; cursor: progress; }
.kd .kd-more { display: flex; width: 100%; max-width: 360px; margin: var(--s3) auto 0; }

/* ---------- подбор ---------- */
.kd-picker { padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface-2); }
.kd .kd-picker__title { margin-bottom: var(--s3); }
.kd-picker__form {
    display: grid; gap: var(--s3);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 2fr) auto;
    align-items: start;
}
.kd-js .kd-field--submit { display: none; }
.kd-js .kd-picker__form { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 2fr); }
.kd-field--submit { padding-top: 26px; }
.kd-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.kd-label { display: block; margin: 0 0 6px; padding: 0; color: var(--ink); font: 400 14px/20px var(--f-med); }

/* Выпадающий список: своя стрелка (шаблон убирает системную) */
.kd .kd-select {
    display: block; width: 100%; height: var(--control-h); padding: 0 40px 0 14px;
    border: 1px solid var(--rule-2); border-radius: var(--r-md);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
    -webkit-appearance: none; appearance: none;
    color: var(--ink); font: 400 15px/1.3 var(--f-reg); cursor: pointer;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.kd .kd-select:hover { border-color: var(--ink-3); }
.kd .kd-select:focus-visible { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(120, 184, 42, .35); outline: 0; }
.kd .kd-select:disabled { opacity: .55; cursor: not-allowed; }

/* Тип подключения: кнопки-сегменты с явным выбранным состоянием */
.kd-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.kd-seg__item { position: relative; display: block; margin: 0; cursor: pointer; }
.kd .kd-seg__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.kd-seg__box {
    display: flex; flex-direction: column; justify-content: center; min-height: var(--control-h); height: 100%;
    padding: 6px 12px 6px 38px; position: relative;
    border: 1px solid var(--rule-2); border-radius: var(--r-md); background: var(--surface);
    transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.kd-seg__box::before { /* индикатор выбора */
    content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    border: 2px solid var(--rule-2); border-radius: 50%; background: #fff;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.kd-seg__title { color: var(--ink); font: 400 15px/1.25 var(--f-med); }
.kd-seg__note { color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.kd-seg__item:hover .kd-seg__box { border-color: var(--ink-3); }
.kd-seg__input:checked + .kd-seg__box { border-color: var(--green-ink); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-ink); }
.kd-seg__input:checked + .kd-seg__box::before { border-color: var(--green-ink); box-shadow: inset 0 0 0 4px #fff; background: var(--green-ink); }
.kd-seg__input:focus-visible + .kd-seg__box { outline: 3px solid var(--green); outline-offset: 2px; }
.kd-seg__input:disabled + .kd-seg__box { background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.kd-seg__input:disabled + .kd-seg__box .kd-seg__title { color: var(--ink-3); }

.kd-result { margin-top: var(--s4); }
.kd-result__empty { margin: 0; padding: var(--s4); border: 1px dashed var(--rule-2); border-radius: var(--r-md); color: var(--ink-3); text-align: center; }
.kd-result.is-loading { opacity: .5; pointer-events: none; transition: opacity var(--fast); }
.kd-result__error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0; padding: var(--s3); border-radius: var(--r-md); background: #fdecea; color: #8a1c14; }

.kd-drawing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; }
.kd-drawing__media { position: relative; display: block; padding: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; cursor: zoom-in; }
.kd-drawing__media img { display: block; width: 100%; height: auto; }
/* размеры: сетка 2 × 2 без рамок, разделены линиями */
.kd-dims { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 var(--s2); border-top: 1px solid var(--rule); }
.kd-dims div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kd-dims div:nth-child(odd) { padding-right: var(--s3); }
.kd-dims div:nth-child(even) { padding-left: var(--s3); border-left: 1px solid var(--rule); }
.kd-dims dt { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: 13px; }
.kd-dims dt .kd-sym { width: 22px; height: 22px; margin: 0; font-size: 13px; }
.kd-dims dd { margin: var(--s1) 0 0; color: var(--ink); font-size: 24px; line-height: 1.15; }
.kd-dims dd .kd-unit { font-size: 14px; }

/* копирование размеров и ссылки */
.kd-copy { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: 12px; }
.kd:not(.kd-js) .kd-copy { display: none; }
.kd .kd-textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 2px; border: 0; background: none; color: var(--green-text); font: 400 14px/1.2 var(--f-med); cursor: pointer; }
.kd .kd-textbtn svg { width: 18px; height: 18px; }
.kd .kd-textbtn:hover span { text-decoration: underline; text-underline-offset: 2px; }
.kd .kd-textbtn.is-done { color: var(--ink); }
.kd-source { margin: 0 0 var(--s3); color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.kd-actions .kd-textbtn { min-height: 44px; }
.kd-dims dd .kd-na { font-size: 16px; }
.kd-colors { margin: var(--s3) 0 0; }

/* значок увеличения поверх схемы */
.kd-zoom-badge {
    position: absolute; right: var(--s2); top: var(--s2); display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink);
    box-shadow: 0 1px 4px rgba(20, 22, 26, .18); opacity: 0; transform: scale(.9);
    transition: opacity var(--fast), transform var(--fast);
}
a:hover > .kd-zoom-badge, a:focus-visible > .kd-zoom-badge { opacity: 1; transform: scale(1); }
@media (hover: none) { .kd-zoom-badge { opacity: 1; transform: none; } }

/* ---------- таблицы ---------- */
.kd-table-wrap { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; }
.kd-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kd-table th, .kd-table td { padding: 10px var(--s3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; white-space: nowrap; }
.kd-table thead th { background: var(--paper); color: var(--ink); font: 400 14px/1.3 var(--f-med); vertical-align: bottom; }
.kd-th-note { display: block; color: var(--ink-3); font: 400 12px/1.3 var(--f-reg); }
.kd-table tbody th { color: var(--ink); font: 400 15px/1.3 var(--f-med); }
.kd-table tbody tr:nth-child(even) { background: var(--surface-2); }
.kd-table tbody tr:hover { background: var(--green-soft); }
.kd-table tbody tr:last-child > * { border-bottom: 0; }
.kd-num { font-variant-numeric: tabular-nums; }
.kd-cell-links a { font-size: 14px; }
.kd-sep { margin: 0 6px; color: var(--rule-2); }
.kd-na { color: var(--ink-3); }

/* матрица моделей на главной */
.kd-matrix th, .kd-matrix td { text-align: center; }
.kd-matrix thead th:first-child, .kd-matrix tbody th { text-align: left; }
.kd .kd-matrix__link {
    display: inline-block; min-width: 64px; padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-md);
    background: #fff; color: var(--ink); font: 400 15px/1.2 var(--f-med); text-decoration: none; font-variant-numeric: tabular-nums;
    transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.kd .kd-matrix__link:hover { border-color: var(--green-ink); background: var(--green-ink); color: #fff; }
.kd .kd-matrix__link + .kd-matrix__link { margin-left: var(--s1); }
.kd-matrix tbody tr:hover { background: transparent; }
.kd-matrix tbody tr:nth-child(even) { background: var(--surface-2); }

/* ---------- галереи ---------- */
.kd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kd-gallery--series { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.kd-gallery li { scroll-margin-top: 110px; }
.kd-gallery li:target .kd-fig { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(120, 184, 42, .35); }
.kd-fig { display: flex; flex-direction: column; height: 100%; margin: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color var(--fast), box-shadow var(--fast); }
.kd-fig:hover, .kd-fig:focus-within { border-color: var(--green-ink); box-shadow: var(--shadow); }
.kd-fig__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 6 / 5; padding: var(--s2); cursor: zoom-in; }
.kd-fig__img img { width: 100%; height: 100%; object-fit: contain; }
.kd-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) 10px; margin-top: auto; padding: var(--s2) 12px 10px; border-top: 1px solid var(--rule); font-size: 14px; }
.kd-fig figcaption b { color: var(--ink); font-family: var(--f-med); font-weight: 400; }
.kd-fig figcaption span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kd-fig .kd-fig__stack { flex-direction: column; gap: 2px; }

/* ---------- пояснения ---------- */
.kd-explain__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; margin-bottom: var(--s3); }
.kd-glossary { margin: 0; }
.kd-glossary div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kd-glossary div:first-child { padding-top: 0; }
.kd-glossary dt { color: var(--ink); font: 400 17px/1.3 var(--f-med); }
.kd-glossary dd { margin: var(--s1) 0 0; }
.kd-sym { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: var(--s2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-family: var(--f-bold); }

.kd-conn { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--s5); margin: 0; }
.kd-conn div { padding: 12px 0; border-top: 1px solid var(--rule); }
.kd-conn dt { color: var(--ink); font: 400 17px/1.3 var(--f-med); }
.kd-conn dd { margin: var(--s1) 0 0; }

.kd-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }
.kd-links li { padding: 6px 0; border-bottom: 1px solid var(--rule); }

.kd-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 12px; padding: 0; list-style: none; }
.kd .kd-chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; text-decoration: none; transition: border-color var(--fast); }
.kd .kd-chip:hover { border-color: var(--green-ink); }
.kd .kd-chip small { color: var(--ink-3); }
.kd .kd-chip.is-current { border-color: var(--green-ink); background: var(--green-ink); color: #fff; }
.kd .kd-chip.is-current small { color: rgba(255, 255, 255, .85); }

/* ---------- CTA ---------- */
.kd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding: var(--s4); border-radius: var(--r-lg); background: var(--paper); }
.kd-cta p { margin: 0; }
.kd-cta__title { color: var(--ink); font: 400 20px/1.3 var(--f-bold); }

/* ---------- просмотр чертежа ---------- */
.kd-lightbox {
    width: min(1200px, 100vw); max-width: 100vw; height: min(100dvh, 960px); max-height: 100dvh;
    margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: #fff; color: var(--ink);
    display: none; flex-direction: column;
}
.kd-lightbox[open] { display: flex; }
.kd-lightbox::backdrop { background: rgba(20, 22, 26, .78); }
.kd-lightbox__bar { display: flex; align-items: center; gap: 12px; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--rule); }
.kd-lightbox__text { flex: 1; min-width: 0; }
.kd-lightbox__title { margin: 0; color: var(--ink); font: 400 15px/1.3 var(--f-med); }
.kd-lightbox__caption { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.kd-lightbox__count { flex: none; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.kd-lightbox__tools { display: flex; flex: none; gap: var(--s1); }
.kd .kd-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; color: var(--ink); cursor: pointer;
    transition: border-color var(--fast), background var(--fast);
}
.kd .kd-icon-btn:hover { border-color: var(--green-ink); background: var(--green-soft); }
.kd .kd-icon-btn[aria-pressed="true"] { border-color: var(--green-ink); background: var(--green-soft); }
.kd .kd-icon-btn[hidden] { display: none; }
.kd-lightbox__stage { position: relative; flex: 1; overflow: auto; background: #fff; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.kd-lightbox__stage img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.kd-lightbox.is-zoomed .kd-lightbox__stage img { width: 200%; max-width: none; height: auto; cursor: zoom-out; }

/* ---------- поиск модели на главной ---------- */
.kd-search { position: relative; max-width: 640px; margin: 0 0 var(--s3); }
.kd-search__box { display: flex; align-items: center; gap: var(--s2); padding: 4px 4px 4px 14px; border: 2px solid var(--rule-2); border-radius: var(--r-lg); background: #fff; transition: border-color var(--fast), box-shadow var(--fast); }
.kd-search__box:focus-within { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(120, 184, 42, .3); }
.kd .kd-search__icon { flex: none; width: 22px; height: 22px; color: var(--ink-3); }
.kd .kd-search__input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; color: var(--ink); font: 400 17px/1.3 var(--f-reg); outline: 0; }
.kd .kd-search__input::placeholder { color: var(--ink-3); }
.kd .kd-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kd .kd-search__btn { flex: none; }
.kd-search__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 360px; overflow-y: auto; margin: 0; padding: var(--s1); list-style: none; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow); }
.kd-search__opt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }
.kd-search__opt b { color: var(--ink); font: 400 16px/1.3 var(--f-med); }
.kd-search__opt span { color: var(--ink-3); font-size: 14px; }
.kd-search__opt[aria-selected="true"], .kd-search__opt:hover { background: var(--green-soft); }
.kd-search__opt[aria-disabled="true"] { cursor: default; background: none; color: var(--ink-3); font-size: 14px; }
.kd-search__opt mark { background: none; color: var(--green-text); }

.kd-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); }
.kd-quick__title { color: var(--ink-3); font-size: 14px; }
.kd .kd-quick__chip { padding: 5px 12px; }

/* матрица: значки сечения, перекрёстная подсветка, закреплённый первый столбец */
.kd .kd-tubes { display: block; width: auto; height: 12px; margin: 0 auto 6px; color: var(--green-ink); stroke-width: 1.6; }
.kd-matrix thead th:first-child, .kd-matrix tbody th { position: sticky; left: 0; z-index: 1; background: inherit; }
.kd-matrix thead th:first-child { background: var(--paper); }
.kd-matrix tbody tr { background: #fff; }
.kd-matrix tbody tr:nth-child(even) { background: var(--surface-2); }
.kd-matrix tbody tr.is-row > *, .kd-matrix .is-col { background-color: var(--green-soft); }
.kd-matrix thead th.is-col { color: var(--green-text); }

/* собственная схема H/L/T/N */
.kd .kd-diagram { display: block; width: 100%; height: auto; stroke-width: 1.4; }
.kd-diagram__body rect, .kd-diagram__body circle { fill: #fff; stroke: var(--ink-2); stroke-width: 1.6; }
.kd-diagram__body text { fill: var(--ink-3); stroke: none; font: 400 13px var(--f-reg); }
.kd-dim { color: var(--ink-3); cursor: default; transition: color var(--fast); }
.kd-dim path { fill: none; stroke: currentColor; stroke-width: 1.4; transition: stroke-width var(--fast); }
.kd-dim circle { fill: #fff; stroke: currentColor; stroke-width: 1.4; transition: fill var(--fast); }
.kd-dim text { fill: currentColor; stroke: none; font: 400 13px var(--f-bold); }
.kd-dim.is-active { color: var(--green-ink); }
.kd-dim.is-active path { stroke-width: 2.4; }
.kd-dim.is-active circle { fill: var(--green-ink); }
.kd-dim.is-active text { fill: #fff; }
.kd-glossary div { cursor: default; border-radius: var(--r-sm); transition: background var(--fast); }
.kd .kd-glossary div { padding: 12px; }
.kd-glossary div.is-active { background: var(--green-soft); }
.kd-glossary div.is-active .kd-sym { background: var(--green-ink); color: #fff; }

/* ---------- адаптив ---------- */
@media (max-width: 1023px) {
    .kd-picker__form, .kd-js .kd-picker__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kd-field--conn, .kd-field--submit { grid-column: 1 / -1; }
    .kd-field--submit { padding-top: 0; }
}
@media (max-width: 767px) {
    .kd-picker { padding: var(--s3); }
    .kd-picker__form, .kd-js .kd-picker__form { grid-template-columns: minmax(0, 1fr); }
    .kd-seg { grid-template-columns: 1fr; }
    .kd-drawing, .kd-explain__grid { grid-template-columns: minmax(0, 1fr); }
    .kd-field--submit .kd-btn, .kd-actions .kd-btn { width: 100%; }
    .kd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--s3); }
    .kd-specs div { padding: 0; border-left: 0; }
    .kd-specs .kd-specs__wide { grid-column: 1 / -1; }
    .kd-specs dd { font-size: 16px; white-space: normal; }
    .kd-section { margin-top: var(--s5); }
    .kd-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); }
    .kd-table th, .kd-table td { padding: var(--s2) 10px; }
    /* ссылки в ячейках — столбиком, чтобы таблица помещалась в 375 px без прокрутки */
    .kd-cell-links { white-space: normal; line-height: 1.5; }
    .kd-cell-links a { display: block; }
    .kd-cell-links .kd-sep { display: none; }
    .kd-th-note { white-space: normal; }
    .kd .kd-matrix__link { min-width: 0; padding: 6px 8px; }
    .kd-lightbox { border-radius: 0; height: 100dvh; }
    .kd-band { padding: 12px; }
    .kd-dims dd { font-size: 20px; }
    .kd-actions .kd-textbtn { width: 100%; justify-content: center; }
    .kd .kd-search__btn { padding: 10px 14px; }
    .kd .kd-search__input { font-size: 16px; }
    .kd-toc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
    .kd .kd-toc a { flex: none; }
    .kd-lightbox__bar { flex-wrap: wrap; }
    .kd-lightbox__caption { display: none; }
    .kd-lightbox__tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .kd *, .kd *::before, .kd *::after { transition: none !important; }
}

/* End */
/* /local/components/kermi/technical.drawings/templates/.default/style.css?179032242426937 */