/* Калькулятор стоимости (views/constructor/calculator.php, скрипт — blocks/calculator.js) */
.cb .cb-calc {display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden}
.cb .cb-calc__inputs {display: flex; flex-direction: column; gap: 22px; padding: 30px 32px}
.cb .cb-calc__group {margin: 0; padding: 0; border: 0; min-width: 0}
.cb .cb-calc__label {display: block; margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--cb-heading)}
.cb .cb-calc__qty-head {display: flex; align-items: center; justify-content: space-between; gap: 12px}
.cb .cb-calc__qty-head .cb-calc__label {margin: 0}
.cb .cb-calc__qty-field {display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--cb-input-border); border-radius: var(--cb-radius-sm); background: var(--cb-input-bg)}
.cb .cb-calc__qty {width: 80px; padding: 4px 0; border: 0; background: transparent; color: var(--cb-heading); font: inherit; font-size: 20px; font-weight: 700; text-align: right; outline: none; -moz-appearance: textfield}
.cb .cb-calc__qty::-webkit-outer-spin-button, .cb .cb-calc__qty::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
.cb .cb-calc__qty-field:focus-within {border-color: var(--cb-primary); box-shadow: 0 0 0 3px var(--cb-accent-soft)}
.cb .cb-calc__unit {color: var(--cb-fg-muted); font-size: 15px}
.cb .cb-calc__range {display: block; width: 100%; height: 22px; margin: 12px 0 2px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none}
.cb .cb-calc__range::-webkit-slider-runnable-track {height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--cb-btn-bg) 0 var(--cb-fill, 50%), var(--cb-line) var(--cb-fill, 50%))}
.cb .cb-calc__range::-moz-range-track {height: 6px; border-radius: 3px; background: var(--cb-line)}
.cb .cb-calc__range::-moz-range-progress {height: 6px; border-radius: 3px; background: var(--cb-btn-bg)}
.cb .cb-calc__range::-webkit-slider-thumb {width: 22px; height: 22px; margin-top: -8px; border: 3px solid var(--cb-btn-bg); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); -webkit-appearance: none; appearance: none}
.cb .cb-calc__range::-moz-range-thumb {width: 16px; height: 16px; border: 3px solid var(--cb-btn-bg); border-radius: 50%; background: #fff}
.cb .cb-calc__range:focus-visible {outline: none}
.cb .cb-calc__range:focus-visible::-webkit-slider-thumb {box-shadow: 0 0 0 4px var(--cb-accent-soft)}
.cb .cb-calc__scale {display: flex; justify-content: space-between; font-size: 12px; color: var(--cb-fg-muted)}
.cb .cb-calc__choices {display: flex; flex-wrap: wrap; gap: 8px}
.cb .cb-calc__choice {position: relative; margin: 0; cursor: pointer}
.cb .cb-calc__choice input {position: absolute; opacity: 0; pointer-events: none}
.cb .cb-calc__choice > span {display: inline-block; padding: 9px 16px; border: 1px solid var(--cb-input-border); border-radius: 999px; background: var(--cb-input-bg);
    color: var(--cb-fg); font-size: 15px; line-height: 1.3; transition: border-color var(--cb-transition), background var(--cb-transition), color var(--cb-transition)}
.cb .cb-calc__choice:hover > span {border-color: var(--cb-accent)}
.cb .cb-calc__choice input:checked + span {border-color: var(--cb-btn-bg); background: var(--cb-btn-bg); color: var(--cb-btn-fg)}
.cb .cb-calc__choice input:focus-visible + span {box-shadow: 0 0 0 3px var(--cb-accent-soft)}
.cb .cb-calc__extras {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px}
.cb .cb-calc__extra {position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); cursor: pointer; font-weight: 400}
.cb .cb-calc__extra input {position: absolute; opacity: 0; pointer-events: none}
.cb .cb-calc__extra span {flex: 1; display: flex; align-items: center; gap: 10px; color: var(--cb-fg)}
.cb .cb-calc__extra span::before {content: ""; flex: 0 0 20px; height: 20px; border: 2px solid var(--cb-input-border); border-radius: 5px; background: var(--cb-input-bg) center / 14px no-repeat}
.cb .cb-calc__extra input:checked + span::before {border-color: var(--cb-btn-bg); background-color: var(--cb-btn-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3 8.5l3 3 7-7%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.4%27/%3E%3C/svg%3E")}
.cb .cb-calc__extra input:focus-visible + span::before {box-shadow: 0 0 0 3px var(--cb-accent-soft)}
.cb .cb-calc__extra:has(input:checked) {border-color: var(--cb-btn-bg)}
.cb .cb-calc__extra small {color: var(--cb-fg-muted); white-space: nowrap}
.cb .cb-calc__result {display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px; background: var(--cb-accent-soft)}
.cb .cb-calc__result-label {font-size: 15px; color: var(--cb-fg-muted)}
.cb .cb-calc__total {display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: var(--cb-heading); font-size: 44px; font-weight: 800; line-height: 1.05}
.cb .cb-calc__prefix, .cb .cb-calc__currency {font-size: 20px; font-weight: 600}
.cb .cb-calc__note {margin: 0; font-size: 14px; color: var(--cb-fg-muted)}
.cb .cb-calc__btn {margin-top: 8px}
/* по размерам: ширина × высота */
.cb .cb-calc__size {display: flex; align-items: flex-end; gap: 12px}
.cb .cb-calc__size-item {flex: 1 1 0; min-width: 0; margin: 0; font-weight: 400}
.cb .cb-calc__size-item .cb-calc__qty-field {display: flex}
.cb .cb-calc__size-item .cb-calc__qty {flex: 1; width: auto; min-width: 0; text-align: left}
.cb .cb-calc__size-x {padding-bottom: 12px; font-size: 20px; color: var(--cb-fg-muted)}
.cb .cb-calc__area {margin: 12px 0 0; font-size: 15px; color: var(--cb-fg-muted)}
.cb .cb-calc__area strong {color: var(--cb-heading)}
.cb .cb-calc__area-min {font-size: 13px}
/* рассрочка */
.cb .cb-calc__installments {margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--cb-fg)}
.cb .cb-calc__installments strong {color: var(--cb-heading)}
/* текст и калькулятор */
.cb .cb-calc-split {display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; align-items: center}
.cb .cb-calc-split .cb-calc {grid-template-columns: 1fr}
.cb .cb-calc-split__side .cb-rich {margin-top: 16px}
@media (max-width: 991px) {
    .cb .cb-calc, .cb .cb-calc-split {grid-template-columns: 1fr}
    .cb .cb-calc-split {gap: 24px}
}
@media (max-width: 575px) {
    .cb .cb-calc__inputs, .cb .cb-calc__result {padding: 22px 18px}
    .cb .cb-calc__total {font-size: 36px}
    .cb .cb-calc__size {gap: 8px}
    .cb .cb-calc__qty-field {padding: 4px 8px}
}
/* варианты с картинками (схема или фото + название) */
.cb .cb-calc__choices--img {display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px}
.cb .cb-calc__choices--img .cb-calc__choice > span {display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px 10px 11px; border-radius: var(--cb-radius-sm); text-align: center}
.cb .cb-calc__choice-img {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3}
.cb .cb-calc__choice-img img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain}
.cb .cb-calc__choice-name {font-size: 14px; line-height: 1.25}
.cb .cb-calc__choices--img .cb-calc__choice input:checked + span {border-color: var(--cb-btn-bg); background: var(--cb-accent-soft); color: var(--cb-heading); box-shadow: inset 0 0 0 1px var(--cb-btn-bg)}
.cb .cb-calc__choices--img .cb-calc__choice input:checked + span .cb-calc__choice-name {font-weight: 700}
/* фото под текстом слева (split) */
.cb .cb-calc-split__media {margin-top: 28px; overflow: hidden; border-radius: var(--cb-radius)}
.cb .cb-calc-split__media img {display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover}
.cb .cb-calc-split:has(.cb-calc-split__media) {align-items: start}
@media (max-width: 575px) {
    .cb .cb-calc__choices--img {grid-template-columns: repeat(2, minmax(0, 1fr))}
}