/* ============================================================
   Калькулятор объёма теплоаккумулятора — редизайн 2026-08-29
   Дизайн-язык сайта: плоский editorial, Inter + Onest, radius 6,
   красный #d40029 только на главном действии, капители-ярлыки.
   ============================================================ */

#tt-calc{
	--tt-text:#2b3138;
	/* 2026-09-09: подписи затемнены до контраста ≥4,5:1 на белом (было #8a919b — 3,18:1, WCAG AA не проходил) */
	--tt-muted:#676e78;
	--tt-kicker:#6e7681;
	--tt-line:#eef0f2;
	--tt-border:#e2e5e9;
	--tt-red:#d40029;
	--tt-red-dark:#b80023;
	color:var(--tt-text);
	margin-top:8px;
}
#tt-calc *,#tt-calc *:before,#tt-calc *:after{box-sizing:border-box}

/* заголовок страницы + лид */
body:has(#tt-calc) #pagetitle{font-size:32px;line-height:1.2}
#tt-calc .tt-calc-lede{
	max-width:640px;
	font-size:15px;line-height:1.6;color:var(--tt-muted);
	margin:0 0 44px;
}

/* раскладка: форма | editorial-aside результата */
.tt-calc-layout{display:block}
@media (min-width:992px){
	.tt-calc-layout{
		display:grid;
		grid-template-columns:minmax(0,1fr) 340px;
		gap:0 56px;
		align-items:start;
	}
	.tt-calc-aside{
		position:sticky;top:16px;
		border-left:1px solid var(--tt-line);
		padding-left:40px;
	}
}

/* ---------- форма ---------- */
.tt-calc-form{max-width:640px}
.tt-calc-group{margin:0 0 42px}
.tt-calc-group:last-child{margin-bottom:0}

.tt-calc-kicker{
	font-size:12.5px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;
	color:var(--tt-kicker);
	margin:0 0 14px;
}
.tt-calc-hint{
	font-size:13px;line-height:1.55;color:var(--tt-muted);
	margin:10px 0 0;
}

/* строка «ярлык + значение» над ползунком */
.tt-calc-row{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:16px;margin-bottom:14px;
}
.tt-calc-row .tt-calc-kicker{margin:0}
.tt-calc-value{
	font-family:'Onest','Inter',sans-serif;
	font-size:22px;font-weight:700;line-height:1;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
.tt-calc-value small{
	font-family:'Inter',sans-serif;
	font-size:14px;font-weight:500;color:var(--tt-muted);
	margin-left:4px;
}

/* ползунки */
.tt-calc-range{
	-webkit-appearance:none;appearance:none;
	display:block;width:100%;height:4px;border-radius:2px;
	background:linear-gradient(to right,var(--tt-red) 0%,var(--tt-red) 50%,var(--tt-line) 50%,var(--tt-line) 100%);
	outline:none;margin:12px 0 4px;padding:0;border:0;cursor:pointer;
}
.tt-calc-range::-webkit-slider-thumb{
	-webkit-appearance:none;appearance:none;
	width:22px;height:22px;border-radius:50%;
	background:#fff;border:2px solid var(--tt-red);
	box-shadow:0 1px 4px rgba(43,49,56,.18);
	cursor:grab;
	transition:transform .15s ease;
}
.tt-calc-range::-moz-range-thumb{
	width:18px;height:18px;border-radius:50%;
	background:#fff;border:2px solid var(--tt-red);
	box-shadow:0 1px 4px rgba(43,49,56,.18);
	cursor:grab;
}
.tt-calc-range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.tt-calc-range:focus-visible{outline:2px solid var(--tt-red);outline-offset:6px}

/* скрытые радио + плоские опции */
.tt-calc-radio{
	position:absolute;width:1px;height:1px;
	clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
}

/* тип котла */
.tt-calc-types{display:flex;gap:12px;flex-wrap:wrap}
.tt-calc-type{
	flex:1 1 220px;
	display:block;
	border:1px solid var(--tt-border);border-radius:6px;
	padding:16px 20px;
	cursor:pointer;
	transition:border-color .15s ease,box-shadow .15s ease;
	margin:0;
}
.tt-calc-type b{
	display:block;font-size:15px;font-weight:600;line-height:1.3;
	color:var(--tt-text);
	transition:color .15s ease;
}
.tt-calc-type span{
	display:block;font-size:12.5px;line-height:1.45;color:var(--tt-muted);
	margin-top:4px;
}
.tt-calc-type:hover{border-color:#c9ced4}
.tt-calc-radio:checked+.tt-calc-type{
	border-color:var(--tt-red);
	box-shadow:inset 0 0 0 1px var(--tt-red);
}
.tt-calc-radio:checked+.tt-calc-type b{color:var(--tt-red)}
.tt-calc-radio:focus-visible+.tt-calc-type{outline:2px solid var(--tt-red);outline-offset:2px}

/* объём + время автономии */
.tt-calc-volumes{
	display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
@media (max-width:991px){.tt-calc-volumes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.tt-calc-volumes{grid-template-columns:repeat(2,1fr)}}
.tt-calc-vol{
	display:block;
	border:1px solid var(--tt-border);border-radius:6px;
	padding:12px 8px 11px;
	text-align:center;cursor:pointer;margin:0;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.tt-calc-vol b{
	display:block;font-size:15px;font-weight:600;line-height:1.2;
	color:var(--tt-text);
	font-variant-numeric:tabular-nums;
	transition:color .15s ease;
}
.tt-calc-vol span{
	display:block;font-size:12px;line-height:1.4;color:var(--tt-muted);
	margin-top:3px;white-space:nowrap;
	font-variant-numeric:tabular-nums;
}
.tt-calc-vol:hover{border-color:#c9ced4}
.tt-calc-radio:checked+.tt-calc-vol{
	border-color:var(--tt-red);
	box-shadow:inset 0 0 0 1px var(--tt-red);
}
.tt-calc-radio:checked+.tt-calc-vol b{color:var(--tt-red)}
.tt-calc-radio:focus-visible+.tt-calc-vol{outline:2px solid var(--tt-red);outline-offset:2px}

/* «Как считает калькулятор» */
.tt-calc-how{
	margin-top:44px;
	border-top:1px solid var(--tt-line);
	padding-top:22px;
}
.tt-calc-how summary{
	list-style:none;cursor:pointer;
	display:inline-flex;align-items:center;gap:6px;
	font-size:12.5px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;
	color:var(--tt-kicker);
	transition:color .15s ease;
}
.tt-calc-how summary::-webkit-details-marker{display:none}
.tt-calc-how summary:hover{color:var(--tt-text)}
.tt-calc-how summary .tt-arr{
	font-size:16px;font-weight:400;line-height:1;
	transition:transform .15s ease;
}
.tt-calc-how[open] summary .tt-arr{transform:rotate(90deg)}
.tt-calc-how ul{
	margin:16px 0 0;padding:0;list-style:none;
	max-width:640px;
}
.tt-calc-how li{
	font-size:13.5px;line-height:1.6;color:var(--tt-muted);
	margin:0 0 10px;
}
.tt-calc-how li b{color:var(--tt-text);font-weight:600}

/* ---------- результат ---------- */
.tt-calc-aside{margin-top:8px}
@media (max-width:991px){
	.tt-calc-aside{
		margin-top:44px;padding-top:32px;
		border-top:1px solid var(--tt-line);
	}
}
.tt-calc-hero{
	display:flex;align-items:baseline;gap:8px;
	margin:18px 0 6px;
}
.tt-calc-hero-num{
	font-family:'Onest','Inter',sans-serif;
	font-size:64px;font-weight:800;line-height:1;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
}
.tt-calc-hero-unit{
	font-family:'Onest','Inter',sans-serif;
	font-size:24px;font-weight:600;color:var(--tt-muted);
}
.tt-calc-hero-cap{
	font-size:13.5px;line-height:1.5;color:var(--tt-muted);
	margin:0 0 26px;
}
.tt-calc-times{display:flex;gap:28px;margin:0 0 10px}
.tt-calc-times-hint{margin:0 0 22px}
.tt-calc-time{flex:1 1 0;min-width:0}
.tt-calc-time-cap{
	display:block;
	font-size:12px;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;
	color:var(--tt-kicker);
	margin-bottom:6px;white-space:nowrap;
}
.tt-calc-time-val{
	display:block;
	font-family:'Onest','Inter',sans-serif;
	font-size:21px;font-weight:700;line-height:1.1;
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tt-calc-facts{margin:0 0 28px;padding:0}
.tt-calc-fact{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	padding:11px 0;
	border-bottom:1px solid var(--tt-line);
}
.tt-calc-fact:first-child{border-top:1px solid var(--tt-line)}
.tt-calc-fact dt{
	font-size:13.5px;color:var(--tt-muted);font-weight:400;margin:0;
}
.tt-calc-fact dd{
	margin:0;font-size:15px;font-weight:600;white-space:nowrap;
	font-variant-numeric:tabular-nums;
}
.tt-calc-flag{
	font-size:13px;line-height:1.55;font-weight:500;
	margin:-10px 0 24px;
	min-height:20px;
}
.tt-calc-flag.ok{color:#219653}
.tt-calc-flag.info{color:var(--tt-muted)}
.tt-calc-flag.bad{color:var(--tt-red)}
.tt-calc-cta{
	display:flex;align-items:center;justify-content:center;gap:8px;
	height:48px;border-radius:6px;
	background:var(--tt-red);
	font-size:15px;font-weight:600;color:#fff !important;
	text-decoration:none !important;
	transition:background .15s ease;
}
.tt-calc-cta:hover{background:var(--tt-red-dark);color:#fff}
.tt-calc-cta .tt-arr{font-size:19px;line-height:1;font-weight:400;position:relative;top:-1px}
.tt-calc-note{
	font-size:12.5px;line-height:1.55;color:var(--tt-muted);
	margin:14px 0 0;
}

/* блок товаров под калькулятором */
.similar_products_wrapp{margin-top:64px}

@media (max-width:767px){
	body:has(#tt-calc) #pagetitle{font-size:24px}
	#tt-calc .tt-calc-lede{margin-bottom:32px}
	.tt-calc-group{margin-bottom:34px}
	.tt-calc-hero-num{font-size:52px}
	.similar_products_wrapp{margin-top:48px}
}

@media (prefers-reduced-motion:reduce){
	#tt-calc *{transition:none !important}
}

/* ---------- FAQ под калькуляторами (2026-09-05): details-аккордеон + schema FAQPage, помощник calc/includes/tt_faq.php ---------- */
.tt-k-faq{margin:56px 0 0;max-width:760px;color:var(--tt-text)}
.tt-k-faq h2{font-size:20px;line-height:1.25;font-weight:700;margin:0 0 14px;text-align:left}
.tt-k-faq__item{border-top:1px solid var(--tt-line)}
.tt-k-faq__item:last-child{border-bottom:1px solid var(--tt-line)}
.tt-k-faq__item summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;font-size:15px;font-weight:600;position:relative;color:var(--tt-text)}
.tt-k-faq__item summary::-webkit-details-marker{display:none}
.tt-k-faq__item summary:after{content:"\203A";position:absolute;right:6px;top:14px;font-size:20px;line-height:1;color:var(--tt-kicker);transform:rotate(90deg);transition:transform .2s}
.tt-k-faq__item[open] summary:after{transform:rotate(-90deg)}
.tt-k-faq__a{padding:0 0 18px;font-size:14px;line-height:1.6;color:#4a4f57;max-width:680px}