/* Start:/servisy/calc.css?178846859435822*/
/* Калькуляторы hit-ceramics.ru. Всё под .hcc, чтобы не пересекаться с Aspro. */

/* Тёмная тема. Aspro переключает её классом на body (theme-default — по системе,
   theme-light / theme-dark — принудительно) и тем же приёмом «space toggle»:
   переменная-переключатель равна либо initial (тогда var() берёт запасное значение),
   либо пустоте (тогда var() не даёт ничего). Держим свои переключатели, чтобы
   калькулятор не зависел от внутренних имён переменных шаблона. */
.hcc{--hc-l:initial;--hc-d: ;}
@media (prefers-color-scheme:dark){ .hcc{--hc-l: ;--hc-d:initial;} }
body.theme-light .hcc{--hc-l:initial;--hc-d: ;}
body.theme-dark  .hcc{--hc-l: ;--hc-d:initial;}

.hcc{
  --ac:#EE2C2D;
  /* красный на тёмном фоне тусклый — для текста и рамок берём осветлённый */
  --ac-t:var(--hc-l,#EE2C2D) var(--hc-d,#ff6b60);
  --ink:var(--hc-l,#2A2E32) var(--hc-d,#f2f3f5);
  --ink-on:var(--hc-l,#fff)     var(--hc-d,#1b1b1b);  /* текст на плашке цвета --ink */
  --mut:var(--hc-l,#6b7280)     var(--hc-d,#a8b0b8);
  --ln:var(--hc-l,#e5e7eb)      var(--hc-d,#3a3a3a);
  --bg:var(--hc-l,#f7f8f9)      var(--hc-d,#2b2b2b);  /* мягкая заливка внутри карточки */
  --card:var(--hc-l,#fff)       var(--hc-d,#232323);  /* панели поверх фона страницы */
  --field:var(--hc-l,#fff)      var(--hc-d,#1b1b1b);  /* поля ввода, кнопки-пилюли */
  --ok:var(--hc-l,#15803d)      var(--hc-d,#4ade80);
  --auto-bg:var(--hc-l,#f1f7f2) var(--hc-d,#1b2a20);
  --auto-ln:var(--hc-l,#cfe3d3) var(--hc-d,#2f5a3c);
  --warn-bg:var(--hc-l,#fdf3f0) var(--hc-d,#2c1d1b);
  --warn-ln:var(--hc-l,#f0cfc6) var(--hc-d,#6b3a34);
  /* нативные select, чекбоксы и скроллбары внутри калькулятора */
  color-scheme:var(--hc-l,light) var(--hc-d,dark);
  color:var(--ink);line-height:1.5;font-size:15px}
.hcc *{box-sizing:border-box}
/* UA-правило [hidden] не !important и проигрывает нашему .hcc label{display:block} —
   без этой строки «спрятанные» элементы (пустой селект «Формат» и т.п.) видны */
.hcc [hidden]{display:none!important}
.hcc-lead{font-size:16px;color:var(--mut);max-width:70ch;margin:0 0 24px}

.hcc-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media(max-width:900px){.hcc-grid{grid-template-columns:1fr}}

.hcc-step{border:1px solid var(--ln);border-radius:14px;padding:20px;margin-bottom:18px;background:var(--card)}
.hcc-step h2{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 16px;font-weight:600}
.hcc-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--ac);color:#fff;font-size:14px;flex:none}
.hcc-sub{font-size:15px;font-weight:600;margin:20px 0 10px}

.hcc label{display:block;font-size:13px;color:var(--mut);margin-bottom:12px}
.hcc input[type=number],.hcc input[type=text],.hcc input[type=tel],.hcc input[type=email],
.hcc select,.hcc textarea{
  display:block;width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--ln);
  border-radius:9px;font-size:15px;color:var(--ink);background:var(--field);font-family:inherit}
.hcc select{cursor:pointer}
.hcc input:focus,.hcc select:focus,.hcc textarea:focus{outline:2px solid var(--ac);outline-offset:-1px;border-color:var(--ac)}
.hcc-wide{grid-column:1/-1}

.hcc-row2,.hcc-row3,.hcc-row4{display:grid;gap:12px;align-items:end}
/* подписи бывают в одну и в две строки — без этого поля разъезжаются по высоте */
.hcc-row2>label,.hcc-row3>label,.hcc-row4>label,.hcc-filters>label{
  display:flex;flex-direction:column;justify-content:flex-end;height:100%;margin-bottom:0}
.hcc-row2>label>input,.hcc-row2>label>select,
.hcc-row3>label>input,.hcc-row3>label>select,
.hcc-row4>label>input,.hcc-row4>label>select,
.hcc-filters>label>input,.hcc-filters>label>select{margin-top:auto}
/* чекбокс в строке-сетке остаётся строкой: правило выше ставило ему flex-direction:column,
   и галка вставала НАД текстом («Округлять до целого поддона» в кирпиче и брусчатке) */
.hcc-row2>label.hcc-check,.hcc-row3>label.hcc-check,.hcc-row4>label.hcc-check{
  flex-direction:row;justify-content:flex-start;height:auto}
.hcc-row2{grid-template-columns:repeat(2,1fr)}
.hcc-row3{grid-template-columns:repeat(3,1fr)}
.hcc-row4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){
  .hcc-row3,.hcc-row4{grid-template-columns:repeat(2,1fr)}
  /* На узком экране две колонки по ~150 px хватает только числовым полям. Селекты
     («Основание», «Формат ступени», «Раскладка»), поля с подсказкой и чекбоксы
     занимают всю ширину — иначе текст обрезался, а подписи разъезжались по высоте. */
  .hcc-row2>label:has(select),.hcc-row3>label:has(select),.hcc-row4>label:has(select),
  .hcc-row2>label:has(.hcc-hint),.hcc-row3>label:has(.hcc-hint),
  .hcc-row2>.hcc-check,.hcc-row3>.hcc-check{grid-column:1/-1}
  .hcc-check.hcc-mid{margin:4px 0 6px}
}

.hcc-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.hcc-tab,.hcc-tab2{padding:8px 14px;border:1px solid var(--ln);background:var(--field);border-radius:999px;
  font-size:14px;cursor:pointer;color:var(--mut);font-family:inherit}
.hcc-tab.is-on,.hcc-tab2.is-on{background:var(--ink);color:var(--ink-on);border-color:var(--ink)}
.hcc-tabs-sm .hcc-tab2{padding:6px 12px;font-size:13px}

.hcc-presets{font-size:13px;color:var(--mut);margin:4px 0 14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hcc-presets button{padding:5px 11px;border:1px dashed var(--ln);background:var(--bg);border-radius:999px;
  font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit}
.hcc-presets button:hover{border-color:var(--ac-t);color:var(--ac-t)}

.hcc-check{display:flex!important;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink);
  cursor:pointer;margin:10px 0}
.hcc-check input{width:18px!important;height:18px;margin:1px 0 0!important;flex:none;accent-color:var(--ac)}
.hcc-check.hcc-sm{font-size:13px;color:var(--mut)}
.hcc-check.hcc-mid{align-self:end;margin-bottom:14px}
.hcc-hint{display:block;font-size:12.5px;color:var(--mut);font-weight:400;margin-top:2px;line-height:1.45}

.hcc-add{padding:8px 14px;border:1px dashed var(--ln);background:var(--bg);border-radius:9px;
  font-size:14px;cursor:pointer;color:var(--ink);font-family:inherit;margin-bottom:12px}
.hcc-add:hover{border-color:var(--ac-t);color:var(--ac-t)}

.hcc-line{display:grid;grid-template-columns:1fr 1fr 70px 34px;gap:8px;margin-bottom:8px;align-items:end}
.hcc-line label{margin:0}
.hcc-del{width:34px;height:36px;border:1px solid var(--ln);background:var(--field);border-radius:8px;
  cursor:pointer;color:var(--mut);font-size:17px;line-height:1}
.hcc-del:hover{border-color:var(--ac-t);color:var(--ac-t)}

.hcc-note{margin-top:14px;padding:12px 14px;background:var(--bg);border-radius:10px;font-size:14px}
.hcc-note b{font-weight:600}

.hcc-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;margin-bottom:12px}
@media(max-width:900px){.hcc-filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hcc-filters{grid-template-columns:1fr}}

.hcc-card{display:flex;gap:14px;padding:14px;border:1px solid var(--ln);border-radius:12px;
  background:var(--bg);margin:6px 0 14px}
/* фото товаров сняты на белом — подложка остаётся белой в обеих темах */
.hcc-card img{width:88px;height:88px;object-fit:cover;border-radius:8px;flex:none;background:#fff}
.hcc-card-b{min-width:0}
.hcc-card-t{font-weight:600;margin-bottom:4px}
.hcc-card-t a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ln)}
.hcc-card-t a:hover{color:var(--ac-t);border-color:var(--ac-t)}
.hcc-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hcc-specs span{font-size:12.5px;background:var(--card);border:1px solid var(--ln);border-radius:999px;padding:3px 9px;color:var(--mut)}
.hcc-specs b{color:var(--ink);font-weight:600}

/* Компактная шапка Aspro при прокрутке — фиксированная, 65 px: при top:16px заголовок
   «Результат» уезжал под неё. */
.hcc-res{position:sticky;top:82px}
.hcc-res-in{border:1px solid var(--ln);border-radius:14px;padding:20px;background:var(--card);min-width:0;overflow-wrap:anywhere}
.hcc-res{min-width:0}
/* Панель результата бывает вдвое выше экрана (СФТК, термопанели): при sticky её низ
   не показать, пока не кончится форма. На десктопе панель прокручивается сама,
   а итог и кнопка отправки стоят в шапке панели и видны всегда. */
@media(min-width:901px){.hcc-res-in{max-height:calc(100vh - 98px);overflow-y:auto}}
.hcc-res-head{padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.hcc-res-head h2{margin-bottom:8px}
.hcc-res-head .hcc-total{margin:0 0 12px;padding-top:0;border-top:0}
.hcc-res-head .hcc-total b{font-size:26px}
.hcc-res-head .hcc-btn{margin-top:0}
.hcc-res-head .hcc-hint{margin:10px 0 0}
.hcc{overflow-x:clip}
.hcc-res h2{font-size:18px;margin:0 0 14px;font-weight:600}
/* table-layout:fixed + перенос в обеих колонках: без этого длинное значение
   (например «0,5 WDF, 215×50×65 мм») распирало таблицу, а колонка подписей
   схлопывалась в один символ. nowrap здесь недопустим. */
.hcc-tbl{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.hcc-tbl td{padding:7px 0;border-bottom:1px solid var(--ln);vertical-align:baseline;
  overflow-wrap:anywhere;hyphens:auto}
.hcc-tbl td:first-child{color:var(--mut);width:50%}
.hcc-tbl td+td{text-align:right;font-weight:600;padding-left:10px}
.hcc-tbl td[colspan]{width:auto;font-weight:400;text-align:left;padding-left:0}
.hcc-tbl tr.hcc-sec td{padding-top:14px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);font-weight:600;border-bottom:none}
.hcc-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:16px 0 6px;padding-top:14px;border-top:2px solid var(--ink)}
.hcc-total span{font-size:14px;color:var(--mut)}
.hcc-total b{font-size:23px;font-weight:700;white-space:nowrap}

.hcc-btn{display:block;width:100%;padding:13px 18px;background:var(--ac);color:#fff;border:0;
  border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;margin-top:12px;font-family:inherit}
.hcc-btn:hover{filter:brightness(.93)}
.hcc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* flex-basis auto + nowrap: на 390 px третья кнопка рвалась по слогам («Распечатат/ь»),
   а с flex:1 обрезалась первая — теперь не влезающая кнопка переносится целиком */
.hcc-actions button{flex:1 0 auto;min-width:0;white-space:nowrap;padding:9px 10px;border:1px solid var(--ln);background:var(--field);
  border-radius:9px;font-size:13px;cursor:pointer;color:var(--mut);font-family:inherit}
.hcc-actions button:hover{border-color:var(--ac-t);color:var(--ac-t)}

.hcc-cmp{margin-top:16px;font-size:13px;border-top:1px solid var(--ln);padding-top:12px}
.hcc-cmp h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.hcc-cmp table{width:100%;border-collapse:collapse}
.hcc-cmp td{padding:5px 0;border-bottom:1px solid var(--ln)}
.hcc-cmp td:last-child{text-align:right;font-weight:600;white-space:nowrap}
/* шапка таблицы сравнения (термопанели): раньше это были td.hcc-hint, а .hcc-hint —
   display:block, и три заголовка складывались столбиком */
.hcc-cmp th{padding:4px 0 6px;border-bottom:1px solid var(--ln);font-size:12px;color:var(--mut);
  font-weight:400;text-align:left}
.hcc-cmp th:last-child{text-align:right}
.hcc-cmp td.hcc-hint{display:table-cell}
.hcc-cmp .hcc-del{width:24px;height:24px;font-size:14px}

.hcc-has-sticky{padding-bottom:92px}
.hcc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--ln);
  box-shadow:0 -4px 18px rgba(0,0,0,.08);padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.hcc-sticky span{display:block;font-size:12px;color:var(--mut)}
.hcc-sticky b{font-size:18px;font-weight:700}
.hcc-sticky button{padding:11px 18px;background:var(--ac);color:#fff;border:0;border-radius:9px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
@media(min-width:901px){.hcc-sticky{display:none!important}}

.hcc-modal{position:fixed;inset:0;z-index:100;background:rgba(20,22,25,.55);display:flex;
  align-items:center;justify-content:center;padding:16px;overflow:auto}
.hcc-modal-in{background:var(--card);border-radius:14px;padding:24px;max-width:420px;width:100%;position:relative}
.hcc-modal h3{margin:0 0 6px;font-size:19px;font-weight:600}
.hcc-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;
  line-height:1;cursor:pointer;color:var(--mut)}
.hcc-req{color:var(--ac-t)}
.hcc-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.hcc-msg{font-size:14px;margin:10px 0 0;min-height:20px}
.hcc-msg.ok{color:var(--ok)}
.hcc-msg.err{color:var(--ac-t)}

@media print{
  /* печать всегда на белой бумаге — гасим тёмную тему принудительно */
  .hcc{--hc-l:initial;--hc-d: ;color-scheme:light;background:#fff}
  .hcc-form,.hcc-sticky,.hcc-btn,.hcc-actions,.hcc-modal,
  header,footer,.header,.footer,.mobile-menu-btn{display:none!important}
  .hcc-grid{display:block}
  .hcc-res{position:static}
  .hcc-res-in{border:0;padding:0;max-height:none;overflow:visible}
  .hcc-related{display:none}
}

/* автоподбор раствора */
.hcc-auto{margin:2px 0 12px;padding:11px 13px;border-radius:10px;background:var(--auto-bg);
  border:1px solid var(--auto-ln);font-size:13.5px;line-height:1.5}
.hcc-auto b{font-weight:600}
.hcc-auto.is-warn{background:var(--warn-bg);border-color:var(--warn-ln)}
.hcc-pick{font-size:13px;color:var(--mut);margin:-4px 0 12px}
.hcc-pick a{color:var(--mut);border-bottom:1px solid var(--ln);text-decoration:none}
.hcc-pick a:hover{color:var(--ac-t);border-color:var(--ac-t)}

/* результат СФТК v2: строки вместо таблицы — имена переносятся по словам,
   без hyphens не бывает разрывов вида «основа-ния»; значения прижаты вправо */
.hcc-filters-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.hcc-filters-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.hcc-filters-3{grid-template-columns:1fr}}
.hcr{font-size:14px}
.hcr-sec{margin:16px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);font-weight:600}
.hcr-sec:first-child{margin-top:0}
.hcr-item{padding:8px 0;border-bottom:1px solid var(--ln)}
.hcr-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hcr-name{min-width:0;color:var(--mut);overflow-wrap:break-word}
.hcr-name a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ln)}
.hcr-name a:hover{color:var(--ac-t);border-color:var(--ac-t)}
.hcr-art{display:inline-block;font-size:12px;color:var(--mut);background:var(--bg);
  border:1px solid var(--ln);border-radius:999px;padding:0 7px;margin-left:2px;white-space:nowrap}
.hcr-val{flex:none;max-width:58%;text-align:right;font-weight:600;color:var(--ink)}
.hcr-sub{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.hcr-sub s{opacity:.7}
/* название состава переехало в подпись — красим как подпись, а не как ссылку Aspro */
.hcr-sub a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--ln)}
.hcr-sub a:hover{color:var(--ac-t);border-color:var(--ac-t)}
.hcr-sale{color:var(--ac-t);font-weight:600;white-space:nowrap}

/* калькулятор ступеней: переключатель объекта, схема, марши, расходники */
.hcc-tabs-top{margin-bottom:22px}
.hcc-tabs-top .hcc-tab{padding:10px 20px;font-size:15px}

/* схема ступени рисуется currentColor — сама подхватывает тёмную тему */
.hcc-diag{display:block;width:100%;max-width:430px;height:auto;margin:2px 0 10px;color:var(--ink)}
.hcc-diag-key{margin:0 0 16px;max-width:62ch}
.hcc-diag-key b{color:var(--ink);font-weight:600}

.hcc-march{border:1px solid var(--ln);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--bg)}
.hcc-march-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hcc-march-n{font-size:14px;font-weight:600}
.hcc-march .hcc-del:disabled{opacity:.35;cursor:default}
.hcc-march label:last-child{margin-bottom:0}

/* блок расходника — прижат к своему чекбоксу */
.hcc-mat{margin:-4px 0 14px;padding-left:18px;border-left:2px solid var(--ln)}
.hcc-mat label:last-child{margin-bottom:0}

/* хаб /servisy/ */
.hcc-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:22px}
.hcc-hub-card{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--ln);
  border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink);transition:.15s}
.hcc-hub-card:hover{border-color:var(--ac);box-shadow:0 6px 22px rgba(0,0,0,.06);color:var(--ink)}
/* иконки хаба — inline SVG на currentColor: раньше стояли эмодзи вперемешку с
   юникод-фигурами и рисовались по-разному в каждой системе */
.hcc-hub-ic{display:block;width:36px;height:36px;color:var(--ac-t)}
.hcc-hub-ic svg{display:block;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.hcc-hub-card b{font-size:17px;font-weight:600}
.hcc-hub-card span:not(.hcc-hub-ic):not(.hcc-hub-tags){font-size:14px;color:var(--mut);line-height:1.5}
.hcc-hub-card em{margin-top:auto;padding-top:8px;font-style:normal;font-weight:600;color:var(--ac-t);font-size:14px}
/* чипы фактов — те же, что на карточках /services/ (03.09.2026) */
.hcc-hub-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.hcc-hub-tags i{font-style:normal;font-size:12px;line-height:1;padding:6px 9px;border-radius:999px;
  border:1px solid var(--ln);background:var(--bg);color:var(--ink);white-space:nowrap}
.hcc-hub-tags i.is-free{color:var(--ok);border-color:var(--auto-ln);background:var(--auto-bg);font-weight:600}
@media(max-width:640px){.hcc-hub-tags i{font-size:11.5px;padding:5px 8px}}
.hcc-hub-card.is-soon{opacity:.62;background:var(--bg)}
.hcc-hub-card.is-soon em{color:var(--mut)}

/* калькулятор брусчатки: у строки участка три поля (длина, ширина, площадь
   напрямую) — подпись «авто» в 70 px не помещается и обрезается */
.hcc-line.hcc-line-3{grid-template-columns:1fr 1fr 96px 34px}
@media(max-width:640px){.hcc-line.hcc-line-3{grid-template-columns:1fr 1fr 84px 34px}}

/* оценка по типовому формату в калькуляторе кирпича — пока позиция не выбрана */
.hcc-tbl td.hcc-est{background:var(--auto-bg);border:1px solid var(--auto-ln);border-radius:9px;
  padding:9px 11px;font-size:13px;line-height:1.45;font-weight:400;text-align:left}

/* блок «Другие сервисы» под калькулятором */
.hcc-related{margin-top:30px;padding-top:22px;border-top:1px solid var(--ln)}
.hcc-related h3{font-size:15px;font-weight:600;margin:0 0 10px}
.hcc-related-list{display:flex;flex-wrap:wrap;gap:8px}
.hcc-related-list a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--ln);
  border-radius:999px;font-size:14px;color:var(--ink);text-decoration:none;background:var(--card);transition:.15s}
.hcc-related-list a:hover{border-color:var(--ac-t);color:var(--ac-t)}
.hcc-related-list a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hcc-related-list .hcc-related-all{color:var(--mut);border-style:dashed}

/* клавиатура: у кнопок-пилюль не было видимого фокуса */
.hcc-tab:focus-visible,.hcc-tab2:focus-visible,.hcc-presets button:focus-visible,.hcc-add:focus-visible,
.hcc-btn:focus-visible,.hcc-actions button:focus-visible,.hcc-del:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ═════════ поиск по длинным селектам (hcpick.js) ═════════
   Панель живёт в <body>, вне .hcc, поэтому переменные темы задаём ей отдельно —
   тем же приёмом «space toggle», что и всему разделу. */
.hcp-pop,.hcp-back,.hcc-sheet{--hc-l:initial;--hc-d: ;}
@media (prefers-color-scheme:dark){ .hcp-pop,.hcp-back,.hcc-sheet{--hc-l: ;--hc-d:initial;} }
body.theme-light .hcp-pop,body.theme-light .hcp-back,body.theme-light .hcc-sheet{--hc-l:initial;--hc-d: ;}
body.theme-dark  .hcp-pop,body.theme-dark  .hcp-back,body.theme-dark  .hcc-sheet{--hc-l: ;--hc-d:initial;}
.hcp-pop,.hcc-sheet{
  --ac:#EE2C2D;
  --ac-t:var(--hc-l,#EE2C2D) var(--hc-d,#ff6b60);
  --ink:var(--hc-l,#2A2E32)  var(--hc-d,#f2f3f5);
  --mut:var(--hc-l,#6b7280)  var(--hc-d,#a8b0b8);
  --ln:var(--hc-l,#e5e7eb)   var(--hc-d,#3a3a3a);
  --bg:var(--hc-l,#f7f8f9)   var(--hc-d,#2b2b2b);
  --card:var(--hc-l,#fff)    var(--hc-d,#232323);
  --field:var(--hc-l,#fff)   var(--hc-d,#1b1b1b);
  --sel:var(--hc-l,#fdecec)  var(--hc-d,#3a2422);
  color-scheme:var(--hc-l,light) var(--hc-d,dark);
}

/* родной селект остаётся в DOM (его читает весь код калькуляторов), но не показывается:
   класс вешает сам скрипт — без JS поле работает как обычный select */
.hcc select.hcp-native{display:none!important}
.hcp{display:block;margin-top:5px}
.hcp-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:1px solid var(--ln);
  border-radius:9px;background:var(--field);color:var(--ink);font-size:15px;font-family:inherit;
  text-align:left;cursor:pointer;line-height:1.35;min-height:40px}
.hcp-btn:hover{border-color:var(--ac-t)}
.hcp-btn:focus-visible{outline:2px solid var(--ac);outline-offset:-1px;border-color:var(--ac)}
.hcp-btn[disabled]{cursor:default;opacity:.75}
.hcp-btn[disabled]:hover{border-color:var(--ln)}
.hcp-val{flex:1;min-width:0;overflow-wrap:anywhere}
.hcp-btn.is-empty .hcp-val{color:var(--mut)}
.hcp-caret{flex:none;width:9px;height:9px;border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);
  transform:rotate(45deg) translate(-2px,-2px)}
.hcp-btn[aria-expanded=true] .hcp-caret{transform:rotate(-135deg) translate(-3px,-3px)}
.hcp-btn[disabled] .hcp-caret{opacity:.4}

.hcp-pop{position:fixed;z-index:1200;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--ln);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.18);overflow:hidden;
  color:var(--ink);font-size:15px;line-height:1.4}
.hcp-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid var(--ln)}
/* 🔴 Шаблон Aspro красит input[type=search] в белый по типу элемента, и в тёмной теме
   поле поиска выходило белым со светлым текстом — ввода не видно. Селектор с типом
   (0-2-1) перебивает его без !important. */
.hcp-pop input.hcp-q{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--ln);border-radius:9px;
  background:var(--field);color:var(--ink);font-size:15px;font-family:inherit;-webkit-appearance:none;appearance:none}
.hcp-pop input.hcp-q::placeholder{color:var(--mut);opacity:1}
/* поле поиска получает фокус сразу при открытии — жирная красная рамка (как у полей формы)
   читалась бы как ошибка ввода, поэтому здесь мягкая подсветка */
.hcp-pop input.hcp-q:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--sel)}
.hcp-close{flex:none;border:0;background:none;color:var(--mut);font-size:24px;line-height:1;cursor:pointer;
  padding:2px 8px;border-radius:8px;font-family:inherit;display:none}
.hcp-list{flex:1;overflow-y:auto;padding:6px;min-height:0;-webkit-overflow-scrolling:touch}
.hcp-list:focus{outline:none}
.hcp-g{position:sticky;top:0;background:var(--card);padding:9px 10px 5px;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--mut);z-index:1}
.hcp-row{padding:9px 10px;border-radius:8px;cursor:pointer;overflow-wrap:anywhere}
.hcp-row.is-cur{background:var(--bg)}
.hcp-row.is-sel{background:var(--sel);color:var(--ac-t);font-weight:600}
.hcp-none{padding:16px 10px;color:var(--mut);font-size:14px}
.hcp-foot{border-top:1px solid var(--ln);padding:8px 12px;font-size:12.5px;color:var(--mut)}
.hcp-back{position:fixed;inset:0;z-index:1199;background:rgba(20,22,25,.5)}

/* телефон: нижний лист во весь экран — иначе список в 448 позиций живёт в щели над клавиатурой */
.hcp-pop.is-sheet{left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:auto!important;max-height:86vh!important;border-radius:14px 14px 0 0;border-bottom:0}
.hcp-pop.is-sheet .hcp-close{display:block}
.hcp-pop.is-sheet .hcp-row{padding:12px 10px}
.hcp-pop.is-sheet .hcp-list{padding-bottom:14px}

/* ═════════ мобильная плашка итога и лист сметы ═════════ */
.hcc-sticky-open{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* .hcc-sticky span (0-1-1) красит все подписи плашки в серый — приглашение «Смотреть смету»
   должно читаться как действие, поэтому селектор с родителем */
.hcc-sticky .hcc-sticky-more{display:block;font-size:12.5px;color:var(--ac-t);font-weight:600;margin-top:2px}
.hcc-sticky-more:after{content:' ▲';font-size:9px}
.hcc-sticky-open:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}

.hcc-noscroll{overflow:hidden}
.hcc-sheet{position:fixed;inset:0;z-index:1100;color:var(--ink);font-size:15px;line-height:1.5}
.hcc-sheet[hidden]{display:none}
.hcc-sheet-back{position:absolute;inset:0;background:rgba(20,22,25,.5)}
.hcc-sheet-in{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:16px 16px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.3);
  color-scheme:var(--hc-l,light) var(--hc-d,dark)}
.hcc-sheet-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--ln)}
.hcc-sheet-h b{flex:1;font-size:17px;font-weight:600}
.hcc-sheet-x{flex:none;border:0;background:none;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;
  padding:4px 10px;border-radius:8px;font-family:inherit;min-height:44px}
.hcc-sheet-b{flex:1;overflow-y:auto;padding:12px 16px;min-height:0;-webkit-overflow-scrolling:touch}
.hcc-sheet-b .hcc-tbl{width:100%}
.hcc-sheet-b .hcc-hint{margin:12px 0 0}
.hcc-sheet-f{border-top:1px solid var(--ln);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--card)}
.hcc-sheet-f>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.hcc-sheet-f span{font-size:14px;color:var(--mut)}
.hcc-sheet-f b{font-size:23px;font-weight:700;white-space:nowrap}
.hcc-sheet-f .hcc-btn{margin-top:0}

/* ═════════ пальцевые размеры на телефоне ═════════
   Рекомендация 44 px: у вкладок было 39, у пресетов 32, у кнопки удаления 34×36. */
@media(max-width:640px){
  .hcc-tab,.hcc-tab2{min-height:44px;padding:10px 16px}
  .hcc-tabs-sm .hcc-tab2{padding:9px 14px}
  .hcc-presets button{min-height:40px;padding:8px 14px}
  .hcc-add{min-height:44px}
  .hcc-actions button{min-height:44px}
  .hcc-related-list a{min-height:44px}
  .hcc-check input{width:20px!important;height:20px}
  .hcp-btn{min-height:44px}
  .hcc-del{width:44px;height:44px;font-size:19px}
  .hcc-close{min-width:44px;min-height:44px;font-size:28px}
  .hcc-line{grid-template-columns:1fr 1fr 64px 44px}
  .hcc-line.hcc-line-3{grid-template-columns:1fr 1fr 72px 44px}
  /* два фильтра в ряд: в одну колонку три селекта отъедали пол-экрана */
  .hcc-filters,.hcc-filters-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  .hcc-filters,.hcc-filters-3{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* поля шире на 12 px — на 390 px это заметно */
  .hcc-step{padding:14px}
  .hcc-res-in{padding:14px}
}

/* Калькулятор термопанелей, шаг 1 «Сколько утеплителя нужно дому» (03.09.2026) */
.hcc-th-res{margin-top:4px;padding:16px 18px;border-radius:12px;background:var(--auto-bg);border:1px solid var(--auto-ln)}
.hcc-th-big{font-size:19px;font-weight:600;line-height:1.35;margin:0 0 8px}
.hcc-th-big b{color:var(--ac-t)}
.hcc-th-txt{font-size:14.5px;margin:0 0 14px;color:var(--ink)}
.hcc-th-txt b{font-weight:600}
.hcc-th-bars{display:grid;gap:8px;margin-bottom:14px}
.hcc-th-bar{display:grid;grid-template-columns:minmax(120px,190px) 1fr 52px;gap:10px;align-items:center;font-size:13px;color:var(--mut)}
.hcc-th-bar i{display:block;height:12px;border-radius:6px;background:var(--card);border:1px solid var(--ln);overflow:hidden}
.hcc-th-bar b{display:block;height:100%;background:var(--ac);border-radius:6px;transition:width .25s}
.hcc-th-bar.is-ok b{background:var(--ok)}
.hcc-th-bar em{font-style:normal;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap}
.hcc-th-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hcc-th-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px;padding:8px 10px;border:1px solid var(--ln);
  border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;line-height:1.2}
.hcc-th-chip small{font-size:11.5px;font-weight:400;color:var(--mut);white-space:nowrap}
.hcc-th-chip.is-ok{border-color:var(--auto-ln)}
.hcc-th-chip.is-ok small{color:var(--ok)}
.hcc-th-chip.is-rec{border-color:var(--ac-t);box-shadow:0 0 0 1px var(--ac-t) inset}
.hcc-th-chip.is-sel{background:var(--ink);color:var(--ink-on)}
.hcc-th-chip.is-sel small{color:var(--ink-on);opacity:.8}
.hcc-th-chip:hover{border-color:var(--ac-t)}
@media(max-width:640px){
  .hcc-th-bar{grid-template-columns:1fr 46px;grid-template-areas:"l v" "b b"}
  .hcc-th-bar span{grid-area:l}.hcc-th-bar i{grid-area:b}.hcc-th-bar em{grid-area:v}
  .hcc-th-big{font-size:17px}
  .hcc-thermo .hcc-row3{grid-template-columns:1fr}
}

/* 03.09.2026, мобильный проход термопанелей: подсказка чекбокса на ≤640 уходит под подпись,
   иначе «Цокольный профиль» и «Пена низкого расширения» ломались в узкий столбик рядом с ней */
@media(max-width:640px){
  .hcc-check{flex-wrap:wrap}
  .hcc-check>.hcc-hint{flex-basis:100%;margin-left:29px}
}
/* шаг 1 термопанелей: три селекта на одной линии, переключатель режима с воздухом */
.hcc-thermo .hcc-row3{align-items:start}
.hcc-thermo .hcc-row3>label{height:auto;justify-content:flex-start;margin-bottom:0}
.hcc-thermo .hcc-row3>label>select{margin-top:6px}
.hcc-thermo .hcc-th-note{margin:10px 0 14px}
.hcc-thermo .hcc-tabs{margin:0 0 16px}

/* 03.09.2026 (ночь): точка росы в шаге 1 термопанелей — разрез стены, окрашенный по температуре,
   капля = точка росы. Карточка внутри зелёного блока результата, поэтому фон — --card. */
.hcc-dew{margin:4px 0 12px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--ln)}
.hcc-dew-head{font-size:14.5px;margin:0 0 14px;line-height:1.45}
.hcc-dew-head b{font-weight:600;color:var(--ac-t)}
.hcc-dew-row{margin:0 0 14px}
.hcc-dew-lab{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:24px} /* воздух под каплю */
.hcc-dew-vis{display:flex;align-items:flex-start;gap:10px}
.hcc-dew-end{flex:0 0 auto;font-size:11.5px;color:var(--mut);line-height:1.25;text-align:center;padding-top:3px;min-width:52px}
.hcc-dew-end b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.hcc-dew-bar{position:relative;flex:1 1 auto;min-width:0}
.hcc-dew-wall{position:relative;height:28px;border-radius:5px;border:1px solid var(--ln);overflow:hidden}
.hcc-dew-sep{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.4)}
.hcc-dew-pps{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 2px,transparent 2px 6px)}
.hcc-dew-tile{position:absolute;top:0;bottom:0;min-width:4px;background:#8a3b2a}
.hcc-dew-drop{position:absolute;top:-22px;width:16px;height:20px;margin-left:-8px;color:var(--ac-t);pointer-events:none}
.hcc-dew-drop svg{display:block;width:16px;height:20px;fill:currentColor;filter:drop-shadow(0 0 1px rgba(255,255,255,.9))}
.hcc-dew-drop:after{content:"";position:absolute;left:7px;top:20px;width:2px;height:30px;background:currentColor;opacity:.85}
.hcc-dew-row.is-ok .hcc-dew-drop{color:var(--ok)}
.hcc-dew-row.is-so .hcc-dew-drop{color:var(--hc-l,#d97706) var(--hc-d,#fbbf24)}
.hcc-dew-labs{display:flex;margin-top:3px;font-size:11.5px;color:var(--mut);line-height:1.2}
.hcc-dew-labs span{display:block;flex:0 0 auto;text-align:center;white-space:nowrap}
.hcc-dew-txt{font-size:14px;margin:8px 0 0;color:var(--ink);line-height:1.45}
.hcc-dew-note{font-size:13.5px;margin:0 0 8px;line-height:1.45}
.hcc-dew-note b{font-weight:600}
@media(max-width:640px){
  .hcc-dew{padding:12px}
  .hcc-dew-vis{gap:6px}
  .hcc-dew-end{min-width:44px;font-size:11px}
  .hcc-dew-end b{font-size:12px}
}

/* End */


/* Start:/servisy/calc-ux.css?17890707226478*/
/* Consistent calculator interface; scoped away from the services hub. */
.hcc.hcux{font-family:Montserrat,Arial,sans-serif;font-size:15px;line-height:1.6;--ln:var(--hc-l,#dededb) var(--hc-d,#444);--bg:var(--hc-l,#f6f6f3) var(--hc-d,#292929)}
.hcux .hcc-lead{max-width:78ch;font-size:16px;line-height:1.75;margin-bottom:24px}
.hcux-intro{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--ln);font-size:12px;color:var(--mut)}
.hcux-intro a{color:var(--ink);font-weight:600;text-decoration:none}.hcux-intro span{display:flex;align-items:center;gap:8px}.hcux-intro span:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok)}
.hcux-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;padding:0}.hcux-nav a{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--ln);border-radius:10px;background:var(--card);font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;min-height:44px}.hcux-nav a:hover,.hcux-nav a[aria-current=step]{border-color:var(--ac);color:var(--ac-t)}.hcux-nav b{font-size:11px;color:var(--mut)}
.hcux .hcc-grid{grid-template-columns:minmax(0,1fr) minmax(320px,370px);gap:28px}.hcux .hcc-step{padding:26px;border-radius:16px;margin-bottom:20px;scroll-margin-top:125px;box-shadow:0 4px 18px #00000003}.hcux .hcc-step h2{font-size:20px;line-height:1.4;margin-bottom:10px}.hcux .hcc-num{width:30px;height:30px;font-size:12px;background:var(--bg);border:1px solid var(--ln);color:var(--ink)}
.hcux-step-help{font-size:13px;color:var(--mut);margin:0 0 22px;max-width:64ch}.hcux .hcc-step label{font-size:13px;color:var(--ink);font-weight:500}.hcux .hcc-hint{font-weight:400;color:var(--mut);line-height:1.6;font-size:12px}.hcux .hcc-row2,.hcux .hcc-row3,.hcux .hcc-row4,.hcux .hcc-filters{gap:16px}.hcux input[type=number],.hcux input[type=text],.hcux input[type=email],.hcux input[type=tel],.hcux select{min-height:48px;font-size:16px;border-radius:9px;padding:11px 12px}.hcux input[type=number]{font-variant-numeric:tabular-nums}.hcux select{max-width:100%;text-overflow:ellipsis}.hcux .hcc-check{padding:9px 0;line-height:1.6}.hcux .hcc-check input{width:21px!important;height:21px}.hcux .hcc-tab,.hcux .hcc-tab2,.hcux .hcc-presets button,.hcux .hcc-add,.hcux .hcc-del{min-height:44px}.hcux .hcc-del{min-width:44px}.hcux .hcc-tab,.hcux .hcc-tab2{border-radius:9px;font-size:13px}.hcux .hcc-tab.is-on,.hcux .hcc-tab2.is-on{background:var(--ink);color:var(--ink-on)}
.hcux .hcc-res{scroll-margin-top:120px}.hcux .hcc-res-in{border-radius:16px;overflow:hidden}.hcux .hcc-res-head{padding:24px;background:var(--bg)}.hcux .hcc-res-head h2{font-size:20px}.hcux #resTotal{font-variant-numeric:tabular-nums;font-size:32px;letter-spacing:-1px}.hcux #resTbl td{font-size:13px;line-height:1.6;padding-top:11px;padding-bottom:11px}.hcux #resTbl td:last-child{font-variant-numeric:tabular-nums}.hcux .hcc-sec td{font-size:11px!important;text-transform:uppercase;letter-spacing:.06em;padding-top:20px!important}.hcux .hcr-row{gap:10px}.hcux .hcr-name{overflow-wrap:anywhere}.hcux .hcc-btn{min-height:48px;border-radius:9px}.hcux :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--ac);outline-offset:3px}.hcux .hcux-field-error{display:block;color:var(--ac-t);font-size:12px;font-weight:400;margin-top:6px}.hcux [aria-invalid=true]{border-color:var(--ac)!important;background:var(--warn-bg)!important}.hcux-validation,.hcux-load-error{padding:16px;border:1px solid var(--warn-ln);background:var(--warn-bg);border-radius:10px;margin:12px 0;color:var(--ink);font-size:13px}.hcux-validation a{color:var(--ac-t);text-decoration:underline}.hcux-load-error button{min-height:44px;color:var(--ink);background:var(--card);border:1px solid var(--ln);border-radius:8px;padding:8px 12px;cursor:pointer}
.hcux-terms{font-size:12px;color:var(--mut);border-top:1px solid var(--ln);padding-top:14px;line-height:1.7}.hcux .hcc-filters label{min-width:0}.hcux .hcc-card{border-radius:12px;background:var(--bg)}.hcux .hcc-note{padding:14px 16px;line-height:1.7;border-radius:9px}.hcux .hcux-next{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--ln)}.hcux-next a{font-size:13px;font-weight:600;min-height:44px;display:flex;align-items:center;color:var(--ac-t);text-decoration:none}
.hcux .hcux-invalid-total #resTotal,.hcux.hcux-has-errors #stTotal{font-size:0!important}.hcux .hcux-invalid-total #resTotal:after,.hcux.hcux-has-errors #stTotal:after{content:'Проверьте размеры';font-size:18px;letter-spacing:0}
@media(max-width:1100px){.hcux .hcc-grid{grid-template-columns:minmax(0,1fr) 320px;gap:18px}.hcux .hcc-step{padding:20px}}
@media(max-width:900px){.hcux .hcc-grid{grid-template-columns:minmax(0,1fr)}.hcux-nav{flex-wrap:nowrap;overflow:auto;padding:2px 2px 10px;scrollbar-width:thin}.hcux-nav a{flex:none}.hcux .hcc-res{width:100%}.hcux .hcc-res-in{position:static}.hcux #resTotal{font-size:30px}}
@media(max-width:480px){.hcux .hcc-step{padding:18px 14px;border-radius:12px}.hcux .hcc-step h2{font-size:18px}.hcux .hcc-row2,.hcux .hcc-row3,.hcux .hcc-row4{gap:12px}.hcux .hcc-filters{grid-template-columns:1fr!important}.hcux-intro{font-size:11px}.hcux .hcc-res-head{padding:20px}.hcux .hcc-line{gap:8px}.hcux .hcc-step label{font-size:12px}.hcux input,.hcux select{min-width:0}.hcux .hcc-presets{gap:6px}.hcux .hcc-presets button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hcux *{scroll-behavior:auto!important;transition:none!important}}
@media print{.hcux-nav,.hcux-intro,.hcux-next{display:none!important}.hcux .hcc-grid{display:block}.hcux .hcc-res{width:100%}.hcux .hcc-res-in{box-shadow:none}}

.hcux-article{border:1px solid #dededb;border-radius:12px;padding:18px 22px;margin:24px 0;font-family:Montserrat,Arial,sans-serif}.hcux-article>summary{cursor:pointer;font-size:15px;font-weight:600;min-height:32px}.hcux-article>section{margin-top:20px!important}@media print{.hcux-article{display:none}}

.hcux-share{border:1px solid #dededb;border-radius:16px;padding:24px;width:min(540px,calc(100% - 32px));font-family:Montserrat,Arial,sans-serif}.hcux-share::backdrop{background:#0008}.hcux-share input{display:block;width:100%;padding:12px;margin:12px 0;font-size:16px}.hcux-share button{min-height:44px;padding:10px 20px;background:#ee2c2d;color:white;border:0;border-radius:8px}.hcux-share label{font-size:13px}

/* End */
/* /servisy/calc.css?178846859435822 */
/* /servisy/calc-ux.css?17890707226478 */