/* КАЛЬКУЛЯТОР ЦЕНЫ (SCRUM-544, 07.10.2026) - кирпич своей секции и секция каталога.

   Свой файл, не зеркало: макета калькулятора нет, вид - продолжение ролей и шкалы сайта.
   У эталонного конструктора флажки и кнопки срока системные белые коробки (замер 07.10.2026) -
   здесь каждый орган нарисован ролями темы: переключатель, ползунок, сегменты, список.

   ЦВЕТ - ТОЛЬКО РОЛЯМИ ТЕМЫ (`--ls-ink`, `--ls-muted`, `--ls-acc`, `--ls-line`, `--ls-band`),
   поэтому смена темы перекрашивает калькулятор. УЗОСТЬ - ПО ШИРИНЕ БУМАГИ (`@container ls`).
   Стороны - логические: на иврите карточка итога встаёт слева сама. */

.ls-calc{display:grid;gap:40px;align-items:start;color:var(--ls-ink)}
.ls-calc[data-layout="split"]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ls-calc[data-layout="stack"]{grid-template-columns:minmax(0,1fr)}
.ls-calc__in{display:grid;gap:24px;min-inline-size:0}

/* --- строка ввода --- */
.ls-calc__row{display:grid;gap:10px;margin:0;padding:0;border:0;min-inline-size:0}
.ls-calc__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ls-calc__lab,.ls-calc__leg{font-size:16px;line-height:1.4;color:var(--ls-ink)}
.ls-calc__leg{padding:0;margin-block-end:10px}
.ls-calc__val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ls-acc)}

/* Ползунок: дорожка линией темы, пройденная часть и ручка - акцентом. */
.ls-calc__range{appearance:none;-webkit-appearance:none;inline-size:100%;block-size:28px;margin:0;background:transparent;cursor:pointer;accent-color:var(--ls-acc)}
.ls-calc__range::-webkit-slider-runnable-track{block-size:6px;border-radius:var(--ls-r-pill,999px);background:color-mix(in oklab,var(--ls-line) 100%,transparent)}
.ls-calc__range::-moz-range-track{block-size:6px;border-radius:var(--ls-r-pill,999px);background:var(--ls-line)}
.ls-calc__range::-moz-range-progress{block-size:6px;border-radius:var(--ls-r-pill,999px);background:var(--ls-acc)}
.ls-calc__range::-webkit-slider-thumb{-webkit-appearance:none;inline-size:22px;block-size:22px;margin-block-start:-8px;border-radius:50%;background:var(--ls-acc);border:3px solid var(--ls-paper,#fff);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ls-calc__range::-moz-range-thumb{inline-size:16px;block-size:16px;border-radius:50%;background:var(--ls-acc);border:3px solid var(--ls-paper,#fff);box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* Число и список - поля темы. */
.ls-calc__num,.ls-calc__sel{inline-size:100%;min-block-size:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--ls-ink);background:var(--ls-paper,#fff);
  border:1px solid var(--ls-edge,var(--ls-line));border-radius:calc(12px * var(--ls-r-k,1))}
.ls-calc__num:focus-visible,.ls-calc__sel:focus-visible{outline:var(--ls-focus-w,2px) solid var(--ls-acc);outline-offset:0}

/* Переключатель: дорожка и бегунок ролями темы, флажок прячется, но остаётся органом. */
.ls-calc__tog{grid-template-columns:auto 1fr;align-items:center;gap:12px;cursor:pointer}
.ls-calc__chk{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.ls-calc__sw{position:relative;inline-size:44px;block-size:26px;border-radius:var(--ls-r-pill,999px);background:var(--ls-line);transition:background var(--ls-dur-base,.2s) var(--ls-ease,ease)}
.ls-calc__sw::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:20px;block-size:20px;border-radius:50%;background:var(--ls-paper,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start var(--ls-dur-base,.2s) var(--ls-ease,ease)}
.ls-calc__chk:checked + .ls-calc__sw{background:var(--ls-acc)}
.ls-calc__chk:checked + .ls-calc__sw::after{inset-inline-start:21px}
.ls-calc__chk:focus-visible + .ls-calc__sw{outline:var(--ls-focus-w,2px) solid var(--ls-acc);outline-offset:2px}

/* Сегменты: варианты в одну полосу, выбранный - акцентом. */
.ls-calc__segs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:calc(14px * var(--ls-r-k,1));background:var(--ls-band);box-shadow:inset 0 0 0 1px var(--ls-line)}
.ls-calc__seg{position:relative;flex:1 1 auto;cursor:pointer}
.ls-calc__seg input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.ls-calc__seg span{display:block;padding:10px 14px;text-align:center;border-radius:calc(10px * var(--ls-r-k,1));font-size:15px;color:var(--ls-ink);white-space:nowrap}
.ls-calc__seg input:checked + span{background:var(--ls-acc);color:var(--ls-acc-on)}
.ls-calc__seg input:focus-visible + span{outline:var(--ls-focus-w,2px) solid var(--ls-acc);outline-offset:2px}

/* --- карточка итога: липкая, как просил владелец (у эталона - только после правки словами) ---
   Отступ сверху - под липкую шапку сайта той же переменной, что `scroll-padding` страницы
   (`header.css`): с голыми 24px верх карточки уходил под шапку (замер на холсте 07.10.2026). */
.ls-calc__card{position:sticky;inset-block-start:calc(var(--ls-bar-h-min, 80px) + 16px);display:grid;gap:20px;padding:32px;border-radius:calc(20px * var(--ls-r-k,1));
  background:var(--ls-band);border:1px solid var(--ls-line)}
.ls-calc[data-edit] .ls-calc__card{position:static}
.ls-calc__main{display:grid;gap:6px}
.ls-calc__olab{font-size:14px;letter-spacing:.02em;color:var(--ls-muted)}
.ls-calc__big{font-family:var(--ls-head-face,inherit);font-size:44px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ls-ink);overflow-wrap:anywhere}
.ls-calc__lines{display:grid;gap:10px;padding-block-start:16px;border-block-start:1px solid var(--ls-line)}
.ls-calc__line{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ls-calc__oval{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ls-acc)}

/* Полоса: предел СЧИТАЕТСЯ сервером (`data-max`), доля приходит переменной. */
.ls-calc__bar{display:block;block-size:8px;border-radius:var(--ls-r-pill,999px);background:var(--ls-line);overflow:hidden}
.ls-calc__bar > span{display:block;block-size:100%;inline-size:calc(var(--ls-calc-fill,0) * 100%);border-radius:inherit;background:var(--ls-acc);
  transition:inline-size var(--ls-dur-base,.2s) var(--ls-ease,ease)}

.ls-calc__note{margin:0;font-size:13px;line-height:1.5;color:var(--ls-muted)}

/* --- заявка --- */
.ls-calc__ask > summary{list-style:none;justify-content:center;inline-size:100%;cursor:pointer}
.ls-calc__ask > summary::-webkit-details-marker{display:none}
/* Кожа кнопки сайта пишет display В АТРИБУТ style (`sc_site_v2_btn_skin`), и без !important
   кнопка оставалась над открытой формой (замер у посетителя 07.10.2026: inline-flex). */
.ls-calc__ask[open] > summary.ls-calc__go{display:none !important}
.ls-calc__form{display:grid;gap:12px}
.ls-calc__f{display:grid;gap:6px;font-size:14px;color:var(--ls-muted)}
.ls-calc__f input{min-block-size:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--ls-ink);background:var(--ls-paper,#fff);
  border:1px solid var(--ls-edge,var(--ls-line));border-radius:calc(12px * var(--ls-r-k,1))}
.ls-calc__f input:focus-visible{outline:var(--ls-focus-w,2px) solid var(--ls-acc);outline-offset:0}
.ls-calc__hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.ls-calc__send{justify-content:center;border:0;cursor:pointer;font:inherit}
.ls-calc__st{margin:0;font-size:14px;color:var(--ls-ink)}
.ls-calc__form[data-state="sending"] .ls-calc__send{opacity:.6;pointer-events:none}
.ls-calc__form[data-state="sent"] .ls-calc__f,.ls-calc__form[data-state="sent"] .ls-calc__send{display:none}

@container ls (max-width:700px){
  .ls-calc[data-layout="split"]{grid-template-columns:minmax(0,1fr);gap:28px}
  .ls-calc__card{position:static;padding:24px}
  .ls-calc__big{font-size:36px}
  .ls-calc__seg span{padding:10px 8px;font-size:14px}
}

/* --- СЕКЦИЯ КАТАЛОГА «Калькулятор цены» (`sc/calculator`, вид `pricecalc`) ---
   Контейнер и поля - те же, что у своей секции (`.ls-cus__in`): хедер = контент = футер.
   Три раскладки решают только состав ВОКРУГ калькулятора. */
.ls-pricecalc__in{display:grid;gap:48px;max-inline-size:var(--ls-max,1536px);margin-inline:auto;
  padding-inline:var(--ls-page-gut,24px);padding-block:80px}
.ls-pricecalc__head{display:grid;gap:14px;max-inline-size:720px}
.ls-pricecalc__k{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ls-acc)}
.ls-pricecalc__h{margin:0;font-family:var(--ls-head-face,inherit);font-size:44px;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:var(--ls-ink)}
.ls-pricecalc__p{margin:0;font-size:18px;line-height:1.6;color:var(--ls-muted,var(--ls-ink));max-inline-size:62ch}
.ls-pricecalc__body{min-inline-size:0}
.ls-pricecalc__sample{margin:0 0 16px;padding:10px 14px;border-radius:calc(10px * var(--ls-r-k,1));
  background:color-mix(in oklab,var(--ls-acc) 12%,var(--ls-paper,#fff));color:var(--ls-ink);font-size:14px}

/* a2 «Заголовок сбоку»: узкая колонка заголовка, калькулятор столбиком рядом. */
.ls-pricecalc__in[data-layout="a2"]{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.ls-pricecalc__in[data-layout="a2"] .ls-pricecalc__head{position:sticky;inset-block-start:calc(var(--ls-bar-h-min, 80px) + 16px)}

/* a3 «Карточка по центру»: заголовок по центру, калькулятор в карточке полосы; карточка итога
   внутри неё - на бумаге, иначе полоса на полосе сливалась бы. */
.ls-pricecalc__in[data-layout="a3"] .ls-pricecalc__head{justify-items:center;text-align:center;margin-inline:auto}
.ls-pricecalc__in[data-layout="a3"] .ls-pricecalc__body{max-inline-size:1120px;inline-size:100%;margin-inline:auto;padding:40px;
  border-radius:calc(24px * var(--ls-r-k,1));background:var(--ls-band);border:1px solid var(--ls-line)}
.ls-pricecalc__in[data-layout="a3"] .ls-calc__card{background:var(--ls-paper,#fff)}

@container ls (max-width:700px){
  .ls-pricecalc__in{gap:32px;padding-block:56px}
  .ls-pricecalc__h{font-size:32px}
  .ls-pricecalc__in[data-layout="a2"]{grid-template-columns:minmax(0,1fr)}
  .ls-pricecalc__in[data-layout="a2"] .ls-pricecalc__head{position:static}
  .ls-pricecalc__in[data-layout="a3"] .ls-pricecalc__body{padding:20px}
}

/* --- полоска итога (SCRUM-553): липкий элемент нулевой высоты в конце колонки вопросов ---
   Минус зазор колонки: пустой ребёнок сетки иначе добавил бы 24px под последним вопросом. */
.ls-calc__dock{position:sticky;inset-block-end:0;z-index:3;block-size:0;margin-block-start:-24px}
.ls-calc__dbar{position:absolute;inset-inline:0;inset-block-end:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:8px;padding-inline:14px 8px;border-radius:calc(16px * var(--ls-r-k,1));background:var(--ls-paper,#fff);
  border:1px solid var(--ls-line);box-shadow:0 8px 24px rgba(0,0,0,.14);animation:ls-calc-dock var(--ls-dur-base,.2s) var(--ls-ease,ease)}
.ls-calc__dbar[hidden]{display:none}
.ls-calc__dmain{display:grid;gap:2px;min-inline-size:0;overflow:hidden}
.ls-calc__dlab{font-size:12px;line-height:1.3;color:var(--ls-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Сумма не переносится: «UAH 30, / 800» на 375 читалась как две цены (замер). */
.ls-calc__dval{font-size:17px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ls-ink);white-space:nowrap}
/* Кнопка полоски компактнее кнопки карточки: рядом с виджетом доступности на 375 полная кнопка
   оставляла сумме 78px, и «UAH 30,800» обрезалась (замер). Кожа пишет поля и кегль в style - отсюда !important. */
.ls-calc__dgo{flex:none;justify-content:center;border:0;cursor:pointer;font:inherit;padding-inline:14px !important;font-size:14px !important;min-block-size:40px !important}
.ls-calc[data-edit] .ls-calc__dock{display:none}
@keyframes ls-calc-dock{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .ls-calc__sw,.ls-calc__sw::after,.ls-calc__bar > span{transition:none}
  .ls-calc__dbar{animation:none}
}
html.atx-rm .ls-calc__sw,html.atx-rm .ls-calc__sw::after,html.atx-rm .ls-calc__bar > span{transition:none}
html.atx-rm .ls-calc__dbar{animation:none}