/* Калькуляторы 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}
.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)}}

.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:auto!important;margin:2px 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}

.hcc-res{position:sticky;top:16px}
.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}
.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}
.hcc-actions button{flex:1;min-width:96px;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}
.hcc-cmp .hcc-del{width:24px;height:24px;font-size:14px}

.hcc-has-sticky{padding-bottom:76px}
.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}
}

/* автоподбор раствора */
.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}

/* хаб /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)}
.hcc-hub-ic{font-size:28px;line-height:1}
.hcc-hub-card b{font-size:17px;font-weight:600}
.hcc-hub-card span:not(.hcc-hub-ic){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}
.hcc-hub-card.is-soon{opacity:.62;background:var(--bg)}
.hcc-hub-card.is-soon em{color:var(--mut)}