/*
 * Калькулятор стоимости KARAD — вёрстка по макету Figma (GKhjXPkRGhP0UUNuhbyGWj).
 *
 * Все классы с префиксом kcs-, переменные объявлены на .kcs, а не на :root:
 * на страницах подключён Bootstrap, и общие имена вроде .card или .btn с ним
 * столкнулись бы.
 *
 * Сетка макета: панель 1360, внутренние поля 40, колонки по 10.
 */

/*
 * Обёртка страницы в шаблоне сайта закрыта overflow: hidden, и это ломает
 * position: sticky у формы на четвёртом шаге. overflow: clip обрезает так же,
 * но не создаёт контейнер прокрутки, поэтому прилипание работает. Правило
 * действует только на страницах, где есть калькулятор.
 */
.page_wrapper:has(.kcs) { overflow: clip; }

/*
 * Фон страницы калькулятора — как в макете. Правило намеренно ограничено
 * страницами, где есть калькулятор: общий шаблон сайта не трогаем.
 */
body:has(.kcs),
body:has(.kcs) .page_wrapper { background-color: #0e1116; }

/*
 * Шапка сайта позиционирована абсолютно и лежит поверх контента, поэтому первый
 * блок страницы обязан отступить под неё сам. Именно padding, а не margin:
 * верхний margin первой секции схлопывается наружу main и утягивает вниз всю
 * обёртку вместе с шапкой — из-за этого над шапкой появлялась пустая полоса.
 * 121px — высота шапки (как в правиле шаблона для .page_banner), дальше воздух.
 */
.kcs-page { padding: 211px 0 100px; }

@media (max-width: 767px) {
    /* Мобильная шапка ниже — 120px, плюс воздух под заголовок. */
    .kcs-page { padding: 160px 0 60px; }
}

.kcs {
    --kcs-bg: #0e1116;
    --kcs-panel: #1a1e25;
    --kcs-accent: #947a63;
    --kcs-accent-soft: #c9a86a;
    --kcs-text: #ffffff;
    --kcs-muted: rgba(255, 255, 255, .5);
    --kcs-dim: rgba(255, 255, 255, .3);
    --kcs-hairline: rgba(255, 255, 255, .12);
    --kcs-pad: 40px;
    --kcs-gap: 10px;
    --kcs-cut: 20px;          /* срез угла у кнопок — как у остальных кнопок сайта */
    --kcs-sticky-top: 120px;  /* шапка сайта на прокрутке фиксируется */

    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--kcs-text);
    -webkit-font-smoothing: antialiased;
}

.kcs *,
.kcs *::before,
.kcs *::after { box-sizing: border-box; }

/*
 * Заголовки сайта приходят из общего bundle.css в верхнем регистре и своим
 * семейством. В макете калькулятора они обычные, поэтому здесь перебиваем.
 */
.kcs h1,
.kcs h2,
.kcs h3 {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}

/* ---------- шапка страницы ---------- */

.kcs__head { margin-bottom: 40px; }

.kcs__title {
    margin: 0;
    font-size: 44px;
    line-height: 48px;
    font-weight: 600;
    color: var(--kcs-text);
}

.kcs__subtitle {
    margin: 14px 0 0;
    max-width: 670px;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    color: var(--kcs-text);
}

.kcs__note {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--kcs-accent-soft);
}

/* ---------- панель ---------- */

.kcs__panel {
    background: var(--kcs-panel);
    border-radius: 4px;
    padding: var(--kcs-pad);
}

/* ---------- полоса шагов ---------- */

.kcs__steps {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kcs-accent);
}

/*
 * Линия примыкает к кружку вплотную (в макете они в одном ряду без зазора),
 * отступ 10px есть только между кружком и подписью.
 */
.kcs__step {
    display: flex;
    align-items: center;
    min-width: 0;
}

.kcs__step-text { margin-left: 10px; }

.kcs__step-line {
    flex: 0 0 50px;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

/* Перед текущим шагом линия бронзовая — так она отмечена в макете. */
.kcs__step.is-current .kcs__step-line {
    background: linear-gradient(90deg, rgba(148, 122, 99, 0) 0%, rgba(148, 122, 99, 1) 100%);
}

.kcs__step-bullet {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--kcs-text);
    color: var(--kcs-dim);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.kcs__step-check { display: none; }

.kcs__step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kcs__step-num {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--kcs-dim);
    text-transform: uppercase;
    transition: color .25s ease;
}

.kcs__step-name {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--kcs-dim);
    transition: color .25s ease;
}

.kcs__step.is-current .kcs__step-bullet {
    background: var(--kcs-accent);
    border-color: var(--kcs-accent);
    color: var(--kcs-text);
}

.kcs__step.is-current .kcs__step-num { color: var(--kcs-accent); }
.kcs__step.is-current .kcs__step-name { color: var(--kcs-text); }

.kcs__step.is-done .kcs__step-bullet {
    background: var(--kcs-accent);
    border-color: var(--kcs-accent);
    color: var(--kcs-text);
}

.kcs__step.is-done .kcs__step-digit { display: none; }
.kcs__step.is-done .kcs__step-check { display: block; }

/* ---------- экран шага ---------- */

.kcs__screen { padding-top: 20px; }

.kcs__screen[hidden] { display: none; }

/* Смена шага — короткое проявление с лёгким подъёмом. */
.kcs__screen.is-active { animation: kcsScreenIn .28s ease both; }

@keyframes kcsScreenIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.kcs__screen-title {
    margin: 0;
    font-size: 28px;
    line-height: 31px;
    font-weight: 600;
    color: var(--kcs-text);
}

.kcs__screen-note {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 20px;
    color: var(--kcs-muted);
}

.kcs__screen-head + .kcs-grid,
.kcs__screen-head + .kcs-blocks,
.kcs__screen-head + .kcs-final { margin-top: 40px; }

.kcs__error {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 18px;
    color: #ff6b6b;
}

.kcs__error[hidden] { display: none; }

/* ---------- сетки карточек ---------- */

.kcs-grid {
    display: grid;
    gap: var(--kcs-gap);
}

.kcs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- карточка ---------- */

.kcs-card {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
    text-align: left;
    background: var(--kcs-bg);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.kcs-card:hover { border-color: rgba(148, 122, 99, .5); }

.kcs-card:focus-visible {
    outline: 2px solid var(--kcs-accent-soft);
    outline-offset: 2px;
}

.kcs-card.is-selected {
    border-color: var(--kcs-accent);
    background-image: linear-gradient(90deg, rgba(148, 122, 99, 0) 0%, rgba(148, 122, 99, .22) 100%);
}

/*
 * Точка центрируется флексом, а не смещением на половину размера: у кольца есть
 * обводка 1px, и отсчёт от top/left 50% давал бы точку выше и левее центра.
 */
.kcs-card__mark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--kcs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Отметка появляется коротким «щелчком», а не возникает мгновенно. */
    opacity: 0;
    visibility: hidden;
    transform: scale(.5);
    transition: opacity .16s ease, transform .16s cubic-bezier(.34, 1.56, .64, 1), visibility .16s;
}

/* Точка центрируется через inset: 0 + margin: auto — не зависит от округлений. */
.kcs-card__mark::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: var(--kcs-accent);
}

.kcs-card.is-selected .kcs-card__mark {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* карточка с фотографией — шаги 1 и 2 */

.kcs-card--media {
    align-items: center;
    gap: 20px;
    padding: 0 20px 0 0;
    min-height: 120px;
    overflow: hidden;
}

.kcs-card__media {
    flex: 0 0 180px;
    width: 180px;
    height: 120px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    background: var(--kcs-panel);
}

.kcs-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kcs-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* Справа оставлено место под отметку выбора, иначе длинный заголовок под неё подлезает. */
    padding: 10px 24px 10px 0;
}

.kcs-card__name {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--kcs-text);
}

.kcs-card__note {
    font-size: 14px;
    line-height: 18px;
    color: var(--kcs-muted);
}

/* карточка параметра — шаг 3 */

.kcs-card--option {
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    min-height: 120px;
}

.kcs-card--option .kcs-card__price {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: var(--kcs-accent);
}

/* ---------- блок направления на шаге 3 ---------- */

.kcs-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--kcs-gap);
}

.kcs-block {
    padding: 20px;
    border: 1px solid var(--kcs-hairline);
    border-radius: 4px;
}

.kcs-block[hidden] { display: none; }

.kcs-block__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.kcs-block__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--kcs-panel);
}

.kcs-block__icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.kcs-block__title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
}

.kcs-block__subtitle {
    margin: 20px 0 10px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--kcs-text);
}

/* ---------- кнопки ---------- */

.kcs__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

.kcs__actions--end { justify-content: flex-end; }

.kcs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 40px;
    border: 0;
    background: var(--kcs-accent);
    color: var(--kcs-text);
    font-family: inherit;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .18s ease, background-color .18s ease;
    -webkit-clip-path: polygon(var(--kcs-cut) 0, 100% 0, 100% calc(100% - var(--kcs-cut)), calc(100% - var(--kcs-cut)) 100%, 0 100%, 0 var(--kcs-cut));
    clip-path: polygon(var(--kcs-cut) 0, 100% 0, 100% calc(100% - var(--kcs-cut)), calc(100% - var(--kcs-cut)) 100%, 0 100%, 0 var(--kcs-cut));
}

.kcs-btn:hover { opacity: .88; }

/*
 * Кнопка «Назад» обведена по всему контуру, включая скосы. Обычный border с
 * clip-path не годится — срез обрезает и рамку, углы остаются голыми. Поэтому
 * фон кнопки работает рамкой, а внутренний слой на 1px меньше закрывает
 * середину: линия получается ровной и на диагоналях тоже.
 */
.kcs-btn--back {
    position: relative;
    z-index: 0;
    background: var(--kcs-accent);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--kcs-cut)) 0, 100% var(--kcs-cut), 100% 100%, var(--kcs-cut) 100%, 0 calc(100% - var(--kcs-cut)));
    clip-path: polygon(0 0, calc(100% - var(--kcs-cut)) 0, 100% var(--kcs-cut), 100% 100%, var(--kcs-cut) 100%, 0 calc(100% - var(--kcs-cut)));
}

.kcs-btn--back::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--kcs-bg);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--kcs-cut) + 1px) 0, 100% calc(var(--kcs-cut) - 1px), 100% 100%, calc(var(--kcs-cut) - 1px) 100%, 0 calc(100% - var(--kcs-cut) + 1px));
    clip-path: polygon(0 0, calc(100% - var(--kcs-cut) + 1px) 0, 100% calc(var(--kcs-cut) - 1px), 100% 100%, calc(var(--kcs-cut) - 1px) 100%, 0 calc(100% - var(--kcs-cut) + 1px));
}

.kcs-btn--back:hover::before { background: rgba(148, 122, 99, .12); }

/* У кнопки формы в макете срезаны правый верхний и левый нижний углы. */
.kcs-btn--submit {
    width: 100%;
    min-height: 58px;
    background: var(--kcs-panel);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--kcs-cut)) 0, 100% var(--kcs-cut), 100% 100%, var(--kcs-cut) 100%, 0 calc(100% - var(--kcs-cut)));
    clip-path: polygon(0 0, calc(100% - var(--kcs-cut)) 0, 100% var(--kcs-cut), 100% 100%, var(--kcs-cut) 100%, 0 calc(100% - var(--kcs-cut)));
}

.kcs-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- шаг 4: смета и форма ---------- */

.kcs-final {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 20px;
    align-items: start;
}

.kcs-final__calc {
    padding: 20px;
    border: 1px solid var(--kcs-accent);
    border-radius: 4px;
}

.kcs-final__title {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 31px;
    font-weight: 600;
}

.kcs-summary__car {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kcs-accent);
}

.kcs-summary__label {
    font-size: 16px;
    line-height: 20px;
    color: var(--kcs-muted);
}

.kcs-summary__value {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    text-align: right;
}

.kcs-summary__row + .kcs-summary__row { border-top: 1px solid var(--kcs-accent); }

.kcs-summary__head {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.kcs-summary__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
}

.kcs-summary__price {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    white-space: nowrap;
}

.kcs-summary__toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--kcs-bg);
    color: var(--kcs-text);
    transition: transform .2s ease;
}

.kcs-summary__row.is-open .kcs-summary__toggle { transform: rotate(180deg); }

/*
 * Аккордеон раскрывается плавно: внешний слой анимирует grid-строку от 0fr к
 * 1fr, внутренний прячет содержимое. Так не нужно знать высоту заранее.
 */
.kcs-summary__list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.kcs-summary__row.is-open .kcs-summary__list { grid-template-rows: 1fr; }

.kcs-summary__items {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/*
 * Отступ снизу висит на последнем пункте, а не на списке: собственный padding
 * списка не сжимается вместе с grid-строкой и в закрытом виде оставлял полоску,
 * сквозь которую просвечивал первый пункт.
 */
.kcs-summary__items > li:last-child { padding-bottom: 10px; }

.kcs-summary__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    line-height: 20px;
    color: var(--kcs-muted);
}

.kcs-summary__item svg {
    flex: 0 0 16px;
    margin-top: 4px;
    color: var(--kcs-accent);
}

.kcs-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--kcs-accent);
}

.kcs-summary__label--total {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--kcs-text);
}

.kcs-summary__sum {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--kcs-accent);
    white-space: nowrap;
}

/* форма */

.kcs-final__form {
    position: -webkit-sticky;
    position: sticky;
    top: var(--kcs-sticky-top);
}

.kcs-form {
    padding: 20px;
    border-radius: 4px;
    background: var(--kcs-accent);
}

.kcs-form__price {
    font-size: 28px;
    line-height: 31px;
    font-weight: 600;
    text-align: center;
    color: var(--kcs-text);
}

.kcs-form__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
}

.kcs-form__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.kcs-form__note {
    font-size: 14px;
    line-height: 18px;
    color: rgba(255, 255, 255, .6);
}

.kcs-form__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.kcs-form__field { display: block; }

.kcs-form__label-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.kcs-form__input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(255, 255, 255, .2);
    color: #0a0a0b;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
}

.kcs-form__input::placeholder { color: rgba(10, 10, 11, .5); }

.kcs-form__input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .32);
}

.kcs-form__input.is-invalid { border-color: #ff3b3b; }

.kcs-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kcs-form__agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    cursor: pointer;
}

.kcs-form__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kcs-form__agree-box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kcs-text);
    border-radius: 2px;
    color: transparent;
    background: transparent;
}

.kcs-form__checkbox:checked + .kcs-form__agree-box { color: #26ad60; }

.kcs-form__checkbox:focus-visible + .kcs-form__agree-box {
    outline: 2px solid var(--kcs-text);
    outline-offset: 2px;
}

.kcs-form__agree.is-invalid .kcs-form__agree-box { border-color: #ff3b3b; }

.kcs-form__agree-text {
    font-size: 14px;
    line-height: 17px;
    color: var(--kcs-text);
}

.kcs-form__agree-text a { color: var(--kcs-text); text-decoration: underline; }

.kcs-form__error {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 18px;
    color: #ffe3e3;
}

.kcs-form__error[hidden],
.kcs-form__done[hidden] { display: none; }

.kcs-form__done {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--kcs-text);
}

.kcs-form__body .kcs-btn--submit { margin-top: 12px; }

/* ---------- планшет ---------- */

@media (max-width: 1199px) {
    .kcs { --kcs-pad: 24px; }

    .kcs__title { font-size: 36px; line-height: 40px; }

    .kcs-grid--3,
    .kcs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kcs-final { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- бережный режим ---------- */

@media (prefers-reduced-motion: reduce) {
    .kcs *,
    .kcs *::before,
    .kcs *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- мобильная раскладка: с 991px ---------- */

@media (max-width: 991px) {
    .kcs { --kcs-pad: 20px; --kcs-gap: 10px; }

    .kcs__head { margin-bottom: 20px; }
    .kcs__title { font-size: 30px; line-height: 34px; }
    .kcs__subtitle { font-size: 15px; line-height: 19px; }

    .kcs__screen-title { font-size: 22px; line-height: 26px; }
    .kcs__screen-note { font-size: 15px; line-height: 19px; }
    .kcs__screen-head + .kcs-grid,
    .kcs__screen-head + .kcs-blocks,
    .kcs__screen-head + .kcs-final { margin-top: 20px; }

    /* Две колонки на такой ширине уже рвут карточки — переходим на одну. */
    .kcs-grid--3,
    .kcs-grid--4 { grid-template-columns: minmax(0, 1fr); }

    .kcs-card--media { min-height: 100px; gap: 16px; padding-right: 16px; }
    .kcs-card__media { flex-basis: 140px; width: 140px; height: 100px; }
    .kcs-card__name { font-size: 17px; line-height: 21px; }
    .kcs-card__note { font-size: 14px; line-height: 18px; }
    .kcs-card__body { padding: 8px 32px 8px 0; }
    .kcs-card--option { padding: 16px; min-height: 0; }

    .kcs-block { padding: 16px; }
    .kcs-block__icon { flex-basis: 40px; width: 40px; height: 40px; }
    .kcs-block__icon img { width: 26px; height: 26px; }

    /* Форма уходит под смету: рядом ей на такой ширине уже тесно. */
    .kcs-final { grid-template-columns: minmax(0, 1fr); }
    .kcs-final__form { position: static; }
    .kcs-final__calc { padding: 16px; }
    .kcs-final__title { font-size: 22px; line-height: 26px; margin-bottom: 16px; }

    .kcs-summary__name,
    .kcs-summary__price,
    .kcs-summary__value,
    .kcs-summary__label--total,
    .kcs-summary__sum { font-size: 16px; line-height: 21px; }

    .kcs-summary__item,
    .kcs-summary__label { font-size: 15px; line-height: 19px; }

    .kcs-summary__head { gap: 12px; }

    .kcs__actions { margin-top: 24px; }

    .kcs-btn {
        min-height: 52px;
        padding: 0 28px;
        font-size: 16px;
        line-height: 18px;
    }

    .kcs-form__price { font-size: 24px; line-height: 28px; }
    .kcs-form__head { margin-top: 24px; }
}

/* ---------- телефоны ---------- */

@media (max-width: 767px) {
    .kcs { --kcs-pad: 16px; --kcs-cut: 14px; }

    .kcs__title { font-size: 26px; line-height: 29px; }
    .kcs__subtitle { font-size: 14px; line-height: 17px; }

    .kcs__steps {
        gap: 6px;
        justify-content: center;
        padding-bottom: 16px;
    }

    /* Подписи на узком экране не помещаются — остаются кружки, как в макете */
    .kcs__step-text { display: none; }
    .kcs__step { flex: 0 0 auto; }
    .kcs__step-line { flex: 0 0 28px; width: 28px; }
    .kcs__step-bullet { flex-basis: 28px; width: 28px; height: 28px; font-size: 14px; }
    .kcs__step-check { width: 14px; height: 10px; }

    .kcs__screen-title { font-size: 20px; line-height: 24px; }
    .kcs__screen-note { font-size: 14px; line-height: 18px; }

    .kcs-card--media { min-height: 96px; gap: 12px; padding-right: 12px; }
    .kcs-card__media { flex-basis: 110px; width: 110px; height: 96px; }
    .kcs-card__name { font-size: 16px; line-height: 20px; }
    .kcs-card__note { font-size: 13px; line-height: 17px; }
    .kcs-card--option { padding: 14px; }

    .kcs-block { padding: 14px; }
    .kcs-block__icon { flex-basis: 36px; width: 36px; height: 36px; }
    .kcs-block__icon img { width: 24px; height: 24px; }

    .kcs-final__calc { padding: 14px; }
    .kcs-final__title { font-size: 20px; line-height: 24px; margin-bottom: 14px; }

    .kcs-summary__name,
    .kcs-summary__price,
    .kcs-summary__value,
    .kcs-summary__label--total,
    .kcs-summary__sum { font-size: 15px; line-height: 20px; }

    .kcs-summary__item,
    .kcs-summary__label { font-size: 14px; line-height: 18px; }

    .kcs-summary__head { gap: 10px; }

    .kcs__actions { margin-top: 20px; }

    .kcs-btn {
        min-height: 48px;
        padding: 0 24px;
        font-size: 15px;
    }

    .kcs-form__price { font-size: 22px; line-height: 26px; }
    .kcs-form__head { margin-top: 20px; }
}