/* KERMI: выбор цвета покраски в карточке панельного радиатора
   Отступы 4/8/12/16/24 px. Текст: основной #000, второстепенный #444, подписи #6f6f6f (5:1).
   Зелёный: рамки и заливки #78b82a как у сайта, мелкий зелёный текст #4a7a1a (5:1). */
.kp,.kp *,.kp-status,.kp-status *,.kp-modal,.kp-modal *,.kp-breakdown{box-sizing:border-box}
.kp{width:100%;margin:0 0 16px;font-size:13px;line-height:1.4;color:#000}
/* в правой колонке блок не шире кнопки «В корзину»: при закреплении колонки тема делает её 400 px */
#elementTools .kp,#elementTools .kp-status,#elementTools .kp-breakdown{max-width:220px}
/* на планшете блок покупки во всю ширину карточки: варианты не растягиваем на 800 px */
#smallElementTools .kp,#smallElementTools .kp-status{max-width:400px}
.kp-title{margin:0 0 8px;font-family:robotomedium,arial,sans-serif;font-size:14px}
.kp-seg{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}

.kp-opt,.kp-pick,.kp-finish button{margin:0;border:1px solid #e2ded4;border-radius:6px;background:#fff;color:#000;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.kp-opt:hover,.kp-pick:hover,.kp-finish button:hover:not(:disabled){border-color:#78b82a}
.kp-opt.is-on,.kp-finish button.is-on{border-color:#78b82a;box-shadow:inset 0 0 0 1px #78b82a}

.kp-opt{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:8px 10px}
.kp-opt-t{display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;font-family:robotomedium,arial,sans-serif}
.kp-opt-t span{min-width:0;overflow-wrap:anywhere}
.kp-opt-t small{flex:none;font-family:roboto_ltregular,arial,sans-serif;font-size:12px;color:#6f6f6f;white-space:nowrap}
.kp-opt.is-on .kp-opt-t small{color:#4a7a1a}
.kp-sw{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.kp-sw--any{background:conic-gradient(#c1121c,#f7b500,#48a43f,#2874b2,#83639d,#c1121c)!important}

.kp-body{display:none;margin:8px 0 0}
.kp.is-paint .kp-body{display:block}
.kp-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:8px 8px 8px 10px}
.kp-pick .kp-sw{width:32px;height:32px;border-radius:4px}
.kp-pick-t{display:flex;flex:1;flex-direction:column;min-width:0}
.kp-pick-t b{font-family:robotomedium,arial,sans-serif;font-weight:400;white-space:nowrap}
.kp-pick-t span{color:#444;font-size:12px;overflow-wrap:anywhere;hyphens:auto}
.kp-pick-a{flex:none;width:16px;height:16px;fill:none;stroke:#4a7a1a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.kp-finish{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 0}
.kp-finish button{min-width:0;min-height:36px;padding:4px 6px;text-align:center}
.kp-finish button:disabled{color:#9a9a9a;background:#f6f6f6;border-color:#eee;box-shadow:none;cursor:not-allowed}
.kp-note{margin:8px 0 0;color:#444;font-size:12px;overflow-wrap:anywhere}
.kp-note:empty{display:none}
.kp-help{display:inline-block;margin:4px 0 0;padding:4px 0;border:0;background:none;color:#4a7a1a;font:inherit;font-size:12px;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.kp-help:hover{color:#2f4d10}
.kp-help-t{margin:4px 0 0;color:#444;font-size:12px}
.kp-help-t[hidden]{display:none}
/* срок изготовления: отдельной строкой, тёмным текстом, виден и в закреплённой колонке */
.kp-lead{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:6px;background:#f4f7ef;color:#000;font-size:13px}
.kp-ico{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:#4a7a1a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* под ценой: из чего она складывается */
.kp-breakdown{margin:-6px 0 12px;color:#444;font-size:12px;font-family:roboto_ltregular,arial,sans-serif}
.kp-breakdown[hidden]{display:none}

/* закреплённая колонка при прокрутке: без заголовка и пояснений, срок и цена остаются */
#elementTools.fixed .kp{margin-bottom:12px}
#elementTools.fixed .kp-title,#elementTools.fixed .kp-note,#elementTools.fixed .kp-help,#elementTools.fixed .kp-help-t{display:none}

.kp-status{width:100%;font-size:13px;line-height:1.4;color:#000}
.kp-quick{display:none;margin:8px 0 0;color:#444;font-size:12px}
.kp-on .kp-quick{display:block}
.kp-quick a{color:#4a7a1a;text-decoration:underline}
.kp-err:empty,.kp-done:empty{display:none}
.kp-err{margin:8px 0 0;color:#c0392b}
.kp-done{margin:8px 0 0;padding:8px 10px;border-radius:6px;background:#f1f8e8;overflow-wrap:anywhere}
.kp-done b{display:block;margin:0 0 2px;font-family:robotomedium,arial,sans-serif;font-weight:400}
.kp-done a{color:#3f6a14;text-decoration:underline}
.kp button:focus-visible,.kp-status a:focus-visible,.kp-modal button:focus-visible{outline:2px solid #4a7a1a;outline-offset:2px}
/* при покраске «Купить в 1 клик» скрыта: тот заказ ушёл бы по белой цене. Правило темы с #smallElementTools сильнее, поэтому id и !important */
#elementTools .kp-on .mobileFastBackContainer,#smallElementTools .kp-on .mobileFastBackContainer,.kp-on .mobileFastBackContainer{display:none!important}
/* в правой колонке отступ до «Нашли дешевле» давала скрытая кнопка: возвращаем те же 24 px */
#elementTools .kp-on .kp-status{padding-bottom:24px}

.kp-lock,.kp-lock body{overflow:hidden}
.kp-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.kp-modal[hidden]{display:none}
.kp-back{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.kp-dlg{position:relative;display:flex;flex-direction:column;width:100%;max-width:760px;max-height:calc(100vh - 32px);padding:20px;border-radius:8px;background:#fff;color:#000;font-size:13px;line-height:1.4;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.kp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.kp-h{font-family:robotomedium,arial,sans-serif;font-size:18px}
.kp-sub{margin:4px 0 0;color:#6f6f6f;font-size:12px}
.kp-x{position:relative;flex:none;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:6px;background:#f3f3f3;cursor:pointer}
.kp-x:hover{background:#e9e9e9}
.kp-x:before,.kp-x:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#000;transform:rotate(45deg)}
.kp-x:after{transform:rotate(-45deg)}
.kp-modal .kp-q{display:block;width:100%;height:40px;min-height:40px;margin:0;padding:0 12px;border:1px solid #e2ded4;border-radius:6px;background:#fff;font:inherit;font-size:14px;line-height:38px;-webkit-appearance:none;appearance:none}
.kp-modal .kp-q:focus{outline:none;border-color:#78b82a;box-shadow:0 0 0 1px #78b82a}
.kp-tabs{flex:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.kp-tabs button{margin:0;padding:6px 12px;border:1px solid #e2ded4;border-radius:16px;background:#fff;color:#000;font:inherit;font-size:12px;cursor:pointer}
.kp-tabs button:hover{border-color:#78b82a}
.kp-tabs button.is-on{border-color:#4a7a1a;background:#eef6e4;color:#2f4d10;box-shadow:inset 0 0 0 1px #4a7a1a}
.kp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;min-height:120px;padding:2px}
.kp-c{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:6px;border:1px solid #eee;border-radius:6px;background:#fff;color:#000;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.kp-c[hidden]{display:none}
.kp-c:hover{border-color:#78b82a}
.kp-c.is-on{border-color:#78b82a;box-shadow:inset 0 0 0 1px #78b82a}
.kp-c-sw{flex:none;width:36px;height:36px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.kp-c-t{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.kp-c-t b{display:block;font-family:robotomedium,arial,sans-serif;font-weight:400;font-size:13px}
.kp-empty{margin:12px 0;color:#444}
.kp-empty[hidden]{display:none}
.kp-foot{margin:12px 0 0;color:#6f6f6f;font-size:12px}
@media (max-width:600px){
	.kp-opt,.kp-finish button{min-height:44px}
	.kp-help{min-height:44px;padding:12px 0}
	.kp-modal{padding:0;align-items:stretch}
	.kp-dlg{max-width:none;max-height:none;height:100%;border-radius:0;padding:16px}
	.kp-x{width:44px;height:44px}
	.kp-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
	.kp-tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
	.kp-tabs button{flex:none;min-height:44px;padding:0 14px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
	.kp-opt,.kp-pick,.kp-finish button{transition:none}
}