/* KeyStone canary card — дизайн-система прототипа, scoped под .kn-card.
   Подключается только в preview-режиме (эталон 006-427 / ?preview). */
.kn-card {
    --bg:#FFFFFF; --surface:#F8F9FB; --ink:#2D2D2D; --ink-soft:#55595F;
    --ink-muted:#9A9A9A; --line:#E9EBEF; --accent:#EC1B22; --accent-dark:#C4151B;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --fz-small:13px; --fz-tiny:12px;
    --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
    --radius:10px; --radius-lg:14px;
    font-family:var(--font-body); color:var(--ink);
}
/* Тёмный режим сайта (html[data-theme="dark"]) — переопределяем палитру карточки */
html[data-theme="dark"] .kn-card {
    --bg:#1A212B; --surface:#232C38; --ink:#F2F5F8; --ink-soft:#AEB9C6;
    --ink-muted:#7D8A99; --line:#313C49; --accent:#EC1B22; --accent-dark:#C4151B;
}
html[data-theme="dark"] .kn-card .kn-buy,
html[data-theme="dark"] .kn-card .kn-kit-card,
html[data-theme="dark"] .kn-card .kn-lead-cta,
html[data-theme="dark"] .kn-card .kn-node,
html[data-theme="dark"] .kn-card .kn-plan { box-shadow:none; }

.kn-card *,.kn-card *::before,.kn-card *::after { box-sizing:border-box; }
.kn-card img { display:block; max-width:100%; }
.kn-card button { font:inherit; cursor:pointer; }

/* ---------- Раскладка карточки: галерея | панель (как в макете) ---------- */
.kn-card .catalog-element-information {
    display:block !important; position:relative !important;
    width:100% !important; max-width:100% !important; float:none !important; box-sizing:border-box;
}
.kn-card .catalog-element-information > .clearfix,
.kn-card .catalog-element-information > br { display:none !important; }
.kn-card .catalog-element-information-left {
    float:none !important; clear:none !important; box-sizing:border-box; margin:0; padding:0;
    width:63% !important; max-width:none !important; min-width:0;
}
.kn-card .catalog-element-information-right {
    position:absolute !important; top:0; right:0;
    float:none !important; clear:none !important; box-sizing:border-box; margin:0; padding:0;
    width:34% !important; max-width:none !important; min-width:0;
}
.kn-card .catalog-element-information-left .kn-gallery { width:100%; max-width:100%; }
@media (max-width:1080px) {
    .kn-card .catalog-element-information-left,
    .kn-card .catalog-element-information-right {
        position:static !important; width:100% !important; max-width:none !important; min-width:0 !important;
    }
    .kn-card .catalog-element-information-right { margin-top:var(--s5); }
    .kn-card .kn-buy { position:static; }
}

/* ---------- Галерея (секция 1) ---------- */
.kn-gallery { max-width:none; }
.kn-gallery-main {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--surface); aspect-ratio:16/10; cursor:zoom-in;
}
.kn-gallery-expand {
    position:absolute; top:var(--s3); right:var(--s3);
    width:38px; height:38px; border-radius:50%;
    background:rgba(45,45,45,.6); color:#fff;
    display:grid; place-items:center; transition:background .15s;
}
.kn-gallery-expand svg { width:18px; height:18px; }
.kn-gallery-main:hover .kn-gallery-expand { background:var(--accent); }
.kn-gallery-main img { width:100%; height:100%; object-fit:cover; transition:opacity .25s; }
.kn-gallery-badge {
    position:absolute; top:var(--s3); left:var(--s3);
    background:var(--accent); color:#fff;
    font-size:var(--fz-tiny); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:7px 14px; border-radius:var(--radius);
}
.kn-gallery-counter {
    position:absolute; bottom:var(--s3); right:var(--s3);
    background:rgba(45,45,45,.8); color:#fff;
    font-size:var(--fz-small); font-weight:600; padding:5px 12px; border-radius:var(--radius);
}
.kn-thumbs-wrap { position:relative; margin-top:var(--s2); }
.kn-gallery-thumbs {
    display:flex; gap:var(--s2);
    overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:6px;
}
.kn-gallery-thumbs::-webkit-scrollbar { height:6px; }
.kn-gallery-thumbs::-webkit-scrollbar-track { background:transparent; }
.kn-gallery-thumbs::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.kn-thumb {
    flex:0 0 calc((100% - 5 * var(--s2)) / 6); scroll-snap-align:start;
    border:2px solid var(--line); border-radius:var(--radius); overflow:hidden;
    padding:0; background:var(--surface); aspect-ratio:4/3;
    transition:border-color .15s,opacity .15s; opacity:.8;
}
.kn-thumb img { width:100%; height:100%; object-fit:cover; }
.kn-thumb:hover { opacity:1; }
.kn-thumb[aria-current="true"] { border-color:var(--accent); opacity:1; }

/* стрелки листания ленты */
.kn-thumbs-nav {
    position:absolute; top:calc(50% - 3px); transform:translateY(-50%); z-index:3;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.95); border:1px solid var(--line); color:var(--ink);
    display:grid; place-items:center; box-shadow:0 2px 10px rgba(45,45,45,.15);
    transition:background .15s,color .15s,border-color .15s;
}
.kn-thumbs-nav svg { width:16px; height:16px; }
.kn-thumbs-nav:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.kn-thumbs-nav[hidden] { display:none; }
.kn-thumbs-prev { left:-10px; }
.kn-thumbs-next { right:-10px; }

@media (max-width:600px) {
    .kn-thumb { flex-basis:calc((100% - 3 * var(--s2)) / 4); }
    .kn-thumbs-nav { display:none; }
}

/* ---------- Панель покупки (секция 2) ---------- */
.kn-buy {
    position:sticky; top:96px;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:var(--s5); box-shadow:0 4px 24px rgba(45,45,45,.06);
}
.kn-buy-article {
    font-size:var(--fz-tiny); font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--s2);
}
.kn-buy-title { font-size:clamp(22px,2.2vw,28px); font-weight:900; line-height:1.25; margin-bottom:var(--s3); }
.kn-chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.kn-chip {
    font-size:var(--fz-small); font-weight:600; color:var(--ink-soft);
    background:var(--surface); border:1px solid var(--line); border-radius:100px;
    padding:5px 13px; white-space:nowrap;
}
.kn-kit-label {
    font-size:var(--fz-small); font-weight:700; color:var(--ink-soft);
    margin-bottom:var(--s2); display:flex; justify-content:space-between; align-items:baseline;
}
.kn-kit-label a { font-weight:600; color:var(--accent); font-size:var(--fz-tiny); text-decoration:none; }
.kn-kit-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-bottom:var(--s4); }
.kn-kit-switch button {
    border:2px solid var(--accent); background:transparent; border-radius:var(--radius);
    padding:9px 4px; font-size:var(--fz-small); font-weight:600; color:var(--ink);
    transition:background .15s,color .15s;
}
.kn-kit-switch button:hover { color:var(--accent); }
.kn-kit-switch button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.kn-price-row { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.kn-price { font-size:clamp(28px,2.6vw,38px); font-weight:900; letter-spacing:-.01em; color:var(--ink); }
.kn-price-note { font-size:var(--fz-small); color:var(--ink-muted); margin:var(--s2) 0 var(--s4); }
.kn-buy-actions { display:grid; gap:var(--s2); margin-bottom:var(--s4); }
.kn-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
    padding:12px 26px; border-radius:var(--radius); font-weight:600; font-size:15px;
    border:2px solid var(--accent); text-decoration:none; width:100%;
    transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.kn-btn:active { transform:translateY(1px); }
.kn-btn-primary { background:var(--accent); color:#fff; }
.kn-btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.kn-btn-ghost { background:transparent; color:var(--accent); }
.kn-btn-ghost:hover { background:var(--accent); color:#fff; }
.kn-trust {
    list-style:none; margin:0; padding:var(--s4) 0 0; display:grid; gap:10px;
    border-top:1px solid var(--line);
}
.kn-trust li {
    display:flex; gap:10px; align-items:flex-start;
    font-size:var(--fz-small); color:var(--ink-soft);
}
.kn-trust li::before {
    content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%;
    background:var(--accent);
    -webkit-mask:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    mask:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ================= Секции 3-6 ================= */
/* сброс маркеров списков темы INTEC внутри наших секций (свои галочки — через svg) */
.kn-sections ul { list-style:none; }
.kn-sections li::before, .kn-sections li::after { content:none !important; }
.kn-sections { --container:1280px; }
.kn-wrap { max-width:var(--container); margin:0 auto; padding:0 var(--s5); }
.kn-sec { padding:var(--s7) 0; }
.kn-sec-head {
    margin-bottom:var(--s6); display:flex; align-items:flex-end; justify-content:space-between;
    gap:var(--s4); flex-wrap:wrap;
}
.kn-h2 { font-size:clamp(24px,2.6vw,34px); font-weight:900; line-height:1.2; color:var(--ink); }
.kn-sec-note { color:var(--ink-muted); font-size:var(--fz-small); max-width:360px; }
.kn-eyebrow {
    display:inline-flex; align-items:center; gap:var(--s2);
    font-size:var(--fz-tiny); font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent); margin-bottom:var(--s3);
}
.kn-eyebrow::before { content:""; width:24px; height:2px; background:var(--accent); }
.kn-sec .kn-btn { width:auto; }

/* Комплектации */
.kn-kits { background:var(--surface); border-block:1px solid var(--line); }
.kn-kits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.kn-kit-card {
    position:relative; background:var(--bg); border:2px solid var(--line); border-radius:var(--radius-lg);
    padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); transition:border-color .15s;
}
.kn-kit-card:hover { border-color:var(--ink-muted); }
.kn-kit-flagged { border-color:var(--accent); }
.kn-kit-flag {
    position:absolute; top:-13px; left:var(--s5); background:var(--accent); color:#fff;
    font-size:var(--fz-tiny); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:4px 12px; border-radius:100px;
}
.kn-kit-name { font-size:22px; font-weight:900; color:var(--ink); }
.kn-kit-price { font-size:20px; font-weight:900; color:var(--ink); }
.kn-kit-price small { display:block; font-size:var(--fz-tiny); font-weight:400; color:var(--ink-muted); margin-top:2px; }
.kn-kit-list { list-style:none; display:grid; gap:10px; font-size:14px; color:var(--ink-soft); flex:1; margin:0; padding:0; }
.kn-kit-list li { display:flex; gap:10px; }
.kn-kit-list svg { flex:none; width:14px; height:14px; margin-top:4px; color:var(--accent); }
.kn-kit-list b { color:var(--ink); font-weight:700; }
.kn-kit-card .kn-btn { width:100%; }

/* Конструктив (аккордеон) */
.kn-acc { border-top:1px solid var(--line); }
.kn-acc-item { border-bottom:1px solid var(--line); }
.kn-acc-btn {
    width:100%; display:flex; align-items:center; gap:var(--s4);
    background:none; border:0; text-align:left; padding:var(--s4) 0; color:var(--ink);
    cursor:default;
}
.kn-acc-num { font-size:var(--fz-tiny); font-weight:700; color:var(--ink-muted); min-width:28px; }
.kn-acc-title { font-size:20px; font-weight:900; flex:1; }
.kn-acc-icon {
    flex:none; width:34px; height:34px; border:2px solid var(--line); border-radius:50%;
    position:relative; transition:transform .2s,background .2s,border-color .2s;
}
.kn-acc-icon::before, .kn-acc-icon::after {
    content:""; position:absolute; top:50%; left:50%; background:var(--accent);
    transform:translate(-50%,-50%);
}
.kn-acc-icon::before { width:12px; height:2px; }
.kn-acc-icon::after { width:2px; height:12px; }
.kn-acc-item.is-open .kn-acc-icon { transform:rotate(45deg); background:var(--accent); border-color:var(--accent); }
.kn-acc-item.is-open .kn-acc-icon::before,
.kn-acc-item.is-open .kn-acc-icon::after { background:#fff; }
.kn-acc-body { display:none; padding:0 0 var(--s5) 44px; }
.kn-acc-item.is-open .kn-acc-body { display:block; }
.kn-acc-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); max-width:860px; }
.kn-acc-col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.kn-acc-col h4 { font-size:var(--fz-tiny); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); }
.kn-acc-col p { font-size:14px; color:var(--ink-soft); }

/* Узлы конструктива (общие ассеты для всех проектов) */
.kn-nodes-label {
    margin:var(--s4) 0 var(--s2); font-size:var(--fz-tiny); font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
}
.kn-nodes { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); max-width:860px; }
.kn-node {
    display:block; text-decoration:none; background:var(--bg);
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    transition:border-color .15s, box-shadow .15s;
}
.kn-node:hover { border-color:var(--accent); box-shadow:0 4px 20px rgba(45,45,45,.08); }
.kn-node img {
    width:100%; aspect-ratio:1/1; object-fit:contain;
    background:var(--surface); display:block; padding:var(--s2);
}
.kn-node span {
    display:block; padding:10px var(--s3) var(--s3);
    font-size:var(--fz-small); font-weight:600; color:var(--ink-soft); line-height:1.35;
}
@media (max-width:640px) { .kn-nodes { grid-template-columns:1fr 1fr; } }

/* Этапы */
.kn-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); }
.kn-step { position:relative; padding-top:var(--s4); }
.kn-step::before { content:""; position:absolute; top:5px; left:0; right:calc(-1 * var(--s3)); height:2px; background:var(--line); }
.kn-step:last-child::before { right:0; }
.kn-step::after { content:""; position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); }
.kn-step b { display:block; font-size:15px; font-weight:700; margin-bottom:var(--s1); color:var(--ink); }
.kn-step small { display:block; font-size:var(--fz-small); color:var(--ink-muted); line-height:1.5; }
.kn-step-time { display:inline-block; margin-top:var(--s2); font-size:var(--fz-tiny); font-weight:700; color:var(--accent); }

/* Планировки */
.kn-plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.kn-plan {
    display:block; background:var(--bg); border:1px solid var(--line);
    border-radius:var(--radius-lg); overflow:hidden; transition:border-color .15s,box-shadow .15s;
}
.kn-plan:hover { border-color:var(--accent); box-shadow:0 4px 24px rgba(45,45,45,.08); }
.kn-plan img { width:100%; height:auto; max-height:460px; object-fit:contain; display:block; background:var(--surface); }

/* Форма / смета */
.kn-lead { background:var(--surface); border-block:1px solid var(--line); }
.kn-lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center; }
.kn-lead-points { list-style:none; display:grid; gap:var(--s3); margin:var(--s4) 0 0; padding:0; }
.kn-lead-points li { display:flex; gap:12px; font-size:15px; color:var(--ink-soft); }
.kn-lead-points svg { flex:none; width:16px; height:16px; margin-top:3px; color:var(--accent); }
.kn-lead-cta {
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:var(--s5); display:grid; gap:var(--s2);
}
.kn-lead-cta-title { font-size:var(--fz-h3, 20px); font-weight:900; color:var(--ink); margin-bottom:var(--s2); }
.kn-lead-cta .kn-btn { width:100%; }
.kn-fine { font-size:var(--fz-tiny); color:var(--ink-muted); margin-top:var(--s2); }

@media (max-width:1080px) {
    .kn-kits-grid { grid-template-columns:1fr; }
    .kn-steps { grid-template-columns:1fr; gap:var(--s5); }
    .kn-step::before { display:none; }
    .kn-lead-grid { grid-template-columns:1fr; gap:var(--s5); }
    .kn-plans-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
    .kn-wrap { padding:0 var(--s3); }
    .kn-sec { padding:var(--s6) 0; }
    .kn-acc-cols { grid-template-columns:1fr; }
    .kn-acc-body { padding-left:0; }
    .kn-plans-grid { grid-template-columns:1fr; }
}