@import url("podbor-webasyst-v4.css");

.km-selector{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr);column-gap:24px;row-gap:22px;max-width:1390px;padding-top:35px}
.km-selector__intro,.km-selector__modes,.km-room,.km-breakdown{grid-column:1/-1}
.km-selector__intro{grid-row:1;margin:0}
.km-selector__modes{grid-row:2;margin:0;width:max-content;max-width:100%}
.km-selector__grid{display:contents}
.km-scene{grid-column:1;grid-row:3;align-self:start}
.km-scene__canvas{aspect-ratio:1.28;border-radius:14px}
.km-scene__canvas img{object-fit:cover}
.km-controls,.km-multi-controls{grid-column:2;grid-row:3;align-self:start;min-width:0;margin:0;padding:24px 25px 18px;border:1px solid #dee7e9;border-radius:14px;background:#fff;box-shadow:0 9px 30px rgba(27,61,73,.045)}
.km-controls__header{display:block;margin-bottom:7px}
.km-controls h2,.km-multi-controls h2{margin:5px 0 4px;font-size:25px}
.km-controls__note{line-height:1.45}
.km-presets{margin:16px 0 7px;flex-wrap:wrap}
.km-controls__groups{display:block}
.km-controls__group{min-height:0;padding:21px 0 15px;border:0;border-bottom:1px solid #e8eef0;border-radius:0;box-shadow:none}
.km-controls__group:last-child{padding-bottom:0;border-bottom:0}
.km-controls__group-head{margin-bottom:15px}
.km-field{margin-bottom:17px}
.km-field:last-child{margin-bottom:0}
.km-field__hint{margin:10px 0 0;color:#81939a;font-size:11px;line-height:1.5}
.km-room{grid-row:4;min-height:0;padding:25px 30px 26px;border-color:#e5e9e6;background:linear-gradient(115deg,#fffdfa,#f4f8f8)}
.km-room__top{margin-bottom:17px}
.km-single-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.37fr);column-gap:30px;align-items:center}
.km-result__label,.km-result__main,.km-result__context,.km-result__meta{grid-column:1}
.km-result__label{align-self:end}
.km-result__main{justify-content:flex-start;gap:25px;margin:1px 0 5px}
.km-result__kw{font-size:clamp(56px,6vw,84px)}
.km-result__btu{align-self:center;margin:9px 0 0}
.km-result__context{max-width:none;margin:0 0 11px}
.km-result__meta{margin-bottom:0}
.km-result__link{grid-column:2;grid-row:1/5;align-self:center;margin:0;min-height:64px}
.km-result__fine{grid-column:2;grid-row:5;margin:0;align-self:start}
.km-breakdown{grid-row:5;margin:0}
.km-breakdown__items{grid-template-columns:repeat(3,minmax(0,1fr))}
.km-multi-controls__head>span{color:#b87453;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.km-multi-controls__head p{margin:5px 0 17px;color:#819198;font-size:12px;line-height:1.5}
.km-multi-controls__common{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;padding:12px 0 18px;border-top:1px solid #edf1f2;border-bottom:1px solid #edf1f2}
.km-multi-controls__common>div>span,.km-multi-controls__common>label{display:block;color:#58717c;font-size:11px;font-weight:700}
.km-multi-controls__counter{display:flex;align-items:center;gap:13px;margin-top:8px}
.km-multi-controls__counter button{width:32px;height:32px;border:1px solid #dbe5e8;border-radius:7px;background:#f5f8f9;color:#2d5363;font-size:18px;cursor:pointer}
.km-multi-controls__counter output{min-width:18px;text-align:center;font-weight:800}
.km-multi-controls button:disabled{opacity:.4;cursor:default}
.km-multi-controls__common input{display:block;width:100%;margin-top:7px;padding:9px 10px;border:1px solid #dbe5e7;border-radius:7px;background:#fff;color:#24495b}
.km-multi-controls__rooms{display:grid;gap:11px;margin-top:14px}
.km-multi-room{padding:15px;border:1px solid #e0e9eb;border-radius:10px;background:#fbfcfc}
.km-multi-room__heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.km-multi-room__heading span{color:#2c4856;font-size:13px;font-weight:800}
.km-multi-room__heading strong{color:#b86139;font-size:12px;white-space:nowrap}
.km-multi-room__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.km-multi-room__fields label{min-width:0;color:#71848d;font-size:10px;font-weight:700}
.km-multi-room__fields input,.km-multi-room__fields select{display:block;width:100%;height:34px;margin-top:5px;padding:6px 8px;border:1px solid #dbe5e7;border-radius:6px;background:#fff;color:#294c5d;font-size:12px}
.km-multi-controls__hint{margin:15px 0 0;color:#92a1a7;font-size:10px;line-height:1.5}
.km-multi-result__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:19px}
.km-multi-result__metrics>div{display:flex;flex-direction:column;gap:3px}
.km-multi-result__metrics span{color:#687f89;font-size:12px}
.km-multi-result__metrics strong{color:#193d4f;font-size:37px;line-height:1.1}
.km-multi-result__metrics strong small{font-size:17px;font-weight:500}
.km-multi-result__metrics>div>small{color:#82949c;font-size:11px}
.km-multi-result__rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:9px}
.km-multi-result__room{display:grid;gap:5px;padding:13px 15px;border:1px solid #e0e8e9;border-radius:9px;background:#fff}
.km-multi-result__room span{color:#69808b;font-size:11px}
.km-multi-result__room strong{color:#244b5d;font-size:21px}
.km-multi-result__room small{color:#8a9ba2;font-size:10px;line-height:1.4}
.km-multi-scenarios{margin-top:24px;padding-top:21px;border-top:1px solid #e1e9e9}
.km-multi-scenarios__head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:15px}
.km-multi-scenarios__head>div>span{color:#b87453;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.km-multi-scenarios__head h3{margin:5px 0 0;color:#234454;font-size:20px;letter-spacing:-.02em}
.km-multi-scenarios__status{padding:7px 9px;border-radius:5px;background:#eaf1f2;color:#657d89;font-size:10px;font-weight:700;white-space:nowrap}
.km-multi-scenarios__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.km-multi-scenario{min-width:0;padding:18px 18px 17px;border:1px solid #dfe8e9;border-radius:10px;background:#fff}
.km-multi-scenario--priority{border-color:#d9dfd5;background:#f5f8f2}
.km-multi-scenario--avoid{background:#f7f8f8}
.km-multi-scenario>span{display:block;color:#8b9aa0;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.km-multi-scenario--priority>span{color:#6d9177}
.km-multi-scenario strong{display:block;margin-top:10px;color:#264959;font-size:32px;line-height:1.12;font-variant-numeric:tabular-nums}
.km-multi-scenario b{color:inherit;font:inherit}
.km-multi-scenario--priority b{color:#4e7a5d}
.km-multi-scenario--avoid b{color:#7f8c92}
.km-multi-scenario p{max-width:430px;margin:12px 0 0;color:#778a93;font-size:12px;line-height:1.5}
.km-multi-scenarios__fine,.km-multi-result__oversize{margin:13px 0 0;color:#81939a;font-size:11px;line-height:1.5}
.km-multi-result__oversize{padding:13px 15px;border-radius:8px;background:#fff7ef;color:#8b654f}
.km-multi-result__notice{margin:17px 0 12px;color:#687f89;font-size:11px;line-height:1.55}
.km-multi-result__link{display:inline-flex;align-items:center;gap:12px;padding:13px 16px;border-radius:7px;background:#173b4c;color:#fff;text-decoration:none;font-size:12px;font-weight:750}
.km-multi-result__link:hover{background:#28566b}
.km-selector [hidden]{display:none!important}

@media(max-width:1050px){.km-selector{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:18px}.km-controls,.km-multi-controls{padding:20px}.km-scene__canvas{aspect-ratio:1.15}.km-single-result{grid-template-columns:minmax(0,1fr) minmax(200px,.45fr)}}
@media(min-width:801px){.km-scene{align-self:stretch}.km-scene__canvas{aspect-ratio:auto;min-height:0}.km-scene__canvas img{position:absolute;inset:0}}
@media(max-width:800px){.km-selector{grid-template-columns:1fr}.km-selector__intro,.km-selector__modes,.km-scene,.km-controls,.km-multi-controls,.km-room,.km-breakdown{grid-column:1}.km-scene{grid-row:3}.km-controls,.km-multi-controls{grid-row:4}.km-room{grid-row:5}.km-breakdown{grid-row:6}.km-scene__canvas{aspect-ratio:1.6}.km-controls__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.km-controls__group{padding:15px;border:1px solid #e5ebed;border-radius:9px}.km-controls__group:last-child{grid-column:auto;border:1px solid #e5ebed;padding:15px}.km-single-result{grid-template-columns:minmax(0,1fr) minmax(220px,.55fr)}}
@media(max-width:800px) and (min-width:601px){.km-selector__modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.km-selector__mode{min-width:0;padding:10px 7px;font-size:11px}}
@media(max-width:700px){.km-multi-scenarios__grid{grid-template-columns:1fr}}
@media(max-width:600px){.km-multi-result__metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.km-multi-result__metrics>div:last-child{grid-column:1/-1}}
@media(max-width:600px){.km-selector{row-gap:14px}.km-selector__modes{display:grid;grid-template-columns:1fr 1fr;width:100%}.km-selector__mode:last-child{grid-column:1/-1}.km-controls,.km-multi-controls{padding:19px}.km-controls__groups{display:block}.km-controls__group,.km-controls__group:last-child{padding:17px 0;border:0;border-bottom:1px solid #e8eef0;border-radius:0}.km-controls__group:last-child{border:0;padding-bottom:0}.km-breakdown__items{grid-template-columns:1fr}.km-scene__canvas{aspect-ratio:1.25}.km-room{padding:22px}.km-single-result{display:block}.km-result__kw{font-size:64px}.km-result__main{gap:10px}.km-result__link{margin-top:21px}.km-result__fine{margin-top:10px}.km-multi-result__metrics strong{font-size:30px}.km-multi-result__rooms{grid-template-columns:1fr 1fr}.km-multi-result__room{padding:11px}.km-multi-result__room strong{font-size:18px}.km-multi-scenarios__head{display:block}.km-multi-scenarios__status{display:inline-block;margin-top:9px}}
@media(max-width:390px){.km-multi-result__rooms{grid-template-columns:1fr}.km-multi-room__fields{gap:6px}.km-multi-controls__common{gap:8px}}

/* Let Webasyst render its own header, breadcrumbs, title and footer. */
body:has(.km-selector) .main__wrap > .in-left{display:none}
body:has(.km-selector) .main__wrap > .in-right{width:100%;min-width:0;flex:1}
.page .km-selector{max-width:none;margin:0;padding:16px 0 68px}
.km-selector__intro h2{margin:0;color:#1c3a49;font-size:clamp(29px,3.1vw,42px);font-weight:750;line-height:1.12;letter-spacing:-.048em}
@media(max-width:600px){.page .km-selector{padding:12px 0 46px}.km-selector__intro h2{font-size:28px}}
