/**
 * Coded service pages. They share one layout (the VRF page's, owner
 * 2026-11-12): the offer / price card at the top, then sections without card
 * boxes (.ak-sp-split: heading + intro left, content right ≥1024px, stacked
 * below, a thin line between them), the call band (services.css) and fine
 * print at the bottom. Content shapes: name | text rows (.ak-sp-rows,
 * template-parts/service-rows.php, optional photo per row), vertical timeline
 * (.ak-sp-timeline), checked points (.ak-sp-facts), quiet closing line with a
 * blue left rule (.ak-sp-line), text + button (.ak-sp-lead), FAQ with dividers
 * (.ak-sp-qs / .ak-sp-q).
 * Монтаж (tpl-service-montazh.php): the price board (navy "включено" list +
 * the three sizes with a power bar and price), then two price sections
 * ("text … price" rows, template-parts/service-pricebox.php). Профилактика
 * (tpl-service-profilaktika.php): package cards per size, then sections.
 * Оглед и консултация (tpl-service-ogled.php), Ремонтни услуги
 * (tpl-service-remont.php), Монтаж на термопомпени системи
 * (tpl-service-termopompi.php) and VRF / VRV (tpl-service-vrf.php): offer
 * card (.ak-sp-offer), then sections; Ремонт's long price list keeps its own
 * scrolling panel (.ak-sp-plist). Подово / Вентилация: the build pages
 * further down (.ak-fh-*), text on navy, no boxes either.
 * Section heads (.ak-mont-head / .ak-mont-h2) are shared.
 */

/* ---------- section heads ---------- */
.ak .ak-mont-head { margin-bottom: 28px; } /* left, in line with the hero and the sections below (owner 2026-11-12) */
.ak .ak-mont-h2 {
	font-family: var(--ak-font-d); font-size: 34px; font-weight: 800; line-height: 1.1;
	color: var(--ink); margin: 0; letter-spacing: -.01em;
}
.ak .ak-mont-head p { color: var(--ink-2); font-size: 16px; margin: 8px 0 0; }

/* ---------- price board: what's included (navy, left) + the three sizes ---------- */
.ak .ak-mont-std { margin-top: 20px; }
.ak .ak-mont-board {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card);
}
/* prices come first in the markup (phones see them first); desktop puts the list left */
.ak .ak-mont-inc { order: -1; background: var(--night); color: #fff; padding: 36px; }
.ak .ak-mont-inc-t { font-family: var(--ak-font-d); font-size: 28px; font-weight: 800; line-height: 1.1; color: #fff; margin: 0; }
.ak .ak-mont-inc-s { color: #a9c3db; font-size: 15px; margin: 6px 0 18px; }
.ak .ak-mont-list { list-style: none; margin: 0; padding: 0; }
.ak .ak-mont-list li {
	display: flex; align-items: flex-start; gap: 10px; margin: 0;
	padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.12);
	color: #d5e3f0; font-size: 15.5px; line-height: 1.4;
}
.ak .ak-mont-list li:last-child { border-bottom: 0; }
.ak .ak-mont-list svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--cold); }

.ak .ak-mont-prices { background: #fff; padding: 22px 36px 26px; display: flex; flex-direction: column; }
.ak .ak-mont-row {
	flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-content: center;
	padding: 22px 0; border-bottom: 1px solid var(--line);
}
.ak .ak-mont-btu {
	grid-column: 1; font-family: var(--ak-font-d); font-size: 30px; font-weight: 800; line-height: 1.05;
	color: var(--ink); margin: 0;
}
.ak .ak-mont-hint { grid-column: 1; color: var(--muted); font-size: 14.5px; margin: 6px 0 0; }
.ak .ak-mont-bar { grid-column: 1; display: block; height: 6px; border-radius: 99px; background: var(--cold-50); overflow: hidden; margin-top: 10px; }
.ak .ak-mont-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cold), var(--cold-ink)); }
.ak .ak-mont-price {
	grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; text-align: right;
	display: flex; flex-direction: column; align-items: flex-end;
}
.ak .ak-mont-price .v { font-family: var(--ak-font-d); font-size: 44px; font-weight: 800; line-height: 1; color: var(--hot); white-space: nowrap; }
.ak .ak-mont-price .vat { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.ak .ak-mont-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding-top: 20px; color: var(--ink-2); font-size: 15px;
}
.ak .ak-mont-foot .btn { text-decoration: none; }

/* ---------- price boxes (template-parts/service-pricebox.php): a split section,
   "text … price" rows in the content column ---------- */
.ak .ak-mont-xlist { margin: 0; }
.ak .ak-mont-xrow {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ak .ak-mont-xrow:first-child { padding-top: 0; }
.ak .ak-mont-xrow:last-child { border-bottom: 0; padding-bottom: 0; }
.ak .ak-mont-xrow dt { color: var(--ink-2); font-weight: 400; font-size: 15.5px; line-height: 1.4; margin: 0; }
.ak .ak-mont-xrow dd { margin: 0; flex: 0 0 auto; color: var(--ink); font-weight: 800; font-size: 15.5px; white-space: nowrap; }

/* ---------- long price list (template-parts/service-pricelist.php): a split
   section (.ak-sp-split, no box): head + search left, the rows right in their
   own panel; on desktop the rows scroll inside it ---------- */
.ak .ak-sp-plist-head .ak-sp-plist-count { margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.ak .ak-sp-plist-count b { color: var(--ink); font-weight: 800; }
.ak .ak-sp-plist-search { position: relative; margin-top: 14px; }
.ak .ak-sp-plist-search[hidden] { display: none; }
.ak .ak-sp-plist-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); stroke: var(--muted); pointer-events: none; }
.ak .ak-sp-plist-search input[type="search"] {
	display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px 0 42px;
	border: 1px solid var(--line); border-radius: 12px; background: #fff;
	color: var(--ink); font: inherit; font-size: 16px; box-shadow: none; outline: 0;
	transition: border-color .15s, background-color .15s;
}
.ak .ak-sp-plist-search input[type="search"]:focus { border-color: var(--cold-ink); background: #fff; box-shadow: 0 0 0 3px var(--cold-50); }
.ak .ak-sp-plist-head .ak-sp-plist-status { margin-top: 8px; font-size: 14px; color: var(--muted); min-height: 1px; }
.ak .ak-sp-plist-status:empty { margin: 0; }

.ak .ak-sp-plist-panel { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.ak .ak-sp-plist-scroll {
	max-height: min(560px, 72vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b9c8d6 transparent;
}
.ak .ak-sp-plist-scroll:focus-visible { outline: 2px solid var(--cold-ink); outline-offset: -2px; }
.ak .ak-sp-plist-scroll::-webkit-scrollbar { width: 8px; }
.ak .ak-sp-plist-scroll::-webkit-scrollbar-thumb { background: #b9c8d6; border-radius: 99px; border: 2px solid #fff; }
/* fade at the bottom while there is more to scroll (home.js sets .is-end at the end) */
.ak .ak-sp-plist-panel::after {
	content: ""; position: absolute; left: 0; right: 10px; bottom: 0; height: 56px; pointer-events: none;
	background: linear-gradient(rgba(255,255,255,0), #fff); opacity: 0; transition: opacity .2s;
}
.ak .ak-sp-plist-panel.is-more::after { opacity: 1; }
.ak .ak-sp-plist-cols {
	position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 16px;
	background: var(--night); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 700;
}
.ak .ak-sp-plist-list { margin: 0; }
.ak .ak-sp-plist-row {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 12px 20px; border-top: 1px solid var(--line);
}
.ak .ak-sp-plist-row:first-child { border-top: 0; }
.ak .ak-sp-plist-row:nth-child(even) { background: #f6f9fb; }
/* while searching, home.js marks the visible rows: stripes and the first row follow the matches */
.ak .ak-sp-plist-box.is-searching .ak-sp-plist-row { background: none; border-top: 1px solid var(--line); }
.ak .ak-sp-plist-box.is-searching .ak-sp-plist-row.is-alt { background: #f6f9fb; }
.ak .ak-sp-plist-box.is-searching .ak-sp-plist-row.is-first { border-top: 0; }
.ak .ak-sp-plist-row[hidden] { display: none; }
.ak .ak-sp-plist-row dt { color: var(--ink-2); font-weight: 400; font-size: 15px; line-height: 1.45; margin: 0; }
.ak .ak-sp-plist-row dd { margin: 0; flex: 0 0 auto; color: var(--ink); font-weight: 800; font-size: 15.5px; white-space: nowrap; text-align: right; }
.ak .ak-sp-plist-empty { margin: 0; padding: 22px 20px; color: var(--ink-2); font-size: 15px; }
.ak .ak-sp-plist-empty[hidden] { display: none; }
.ak button.ak-sp-plist-more { display: none; }

/* ---------- Профилактика: package cards (one per size) ---------- */
.ak .ak-prof-std { margin-top: 20px; }
.ak .ak-prof-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0; }
.ak .ak-prof-plan {
	display: flex; flex-direction: column; background: #fff;
	border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.ak .ak-prof-plan-top { background: var(--night); color: #fff; padding: 24px 28px 22px; }
.ak .ak-prof-plan-k { font-size: 14px; font-weight: 700; color: var(--cold); }
.ak .ak-prof-plan-btu { font-family: var(--ak-font-d); font-size: 30px; font-weight: 800; line-height: 1.05; color: #fff; margin: 4px 0 0; }
.ak .ak-prof-plan-hint { color: #a9c3db; font-size: 14.5px; margin: 6px 0 0; }
.ak .ak-prof-price { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 22px 28px 6px; }
.ak .ak-prof-price .v { font-family: var(--ak-font-d); font-size: 48px; font-weight: 800; line-height: 1; color: var(--hot); white-space: nowrap; }
.ak .ak-prof-price .vat { font-size: 13px; font-weight: 700; color: var(--muted); }
.ak .ak-prof-list { list-style: none; margin: 0; padding: 8px 28px 0; flex: 1; }
.ak .ak-prof-list li {
	display: flex; align-items: flex-start; gap: 10px; margin: 0;
	padding: 8px 0; border-bottom: 1px solid var(--line);
	color: var(--ink-2); font-size: 15.5px; line-height: 1.4;
}
.ak .ak-prof-list li:last-child { border-bottom: 0; }
.ak .ak-prof-list svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--cold-ink); }
.ak .ak-prof-add {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin: 12px 28px 0; padding: 12px 14px; border-radius: 10px;
	background: var(--cold-50); color: var(--ink-2); font-size: 14.5px; line-height: 1.35;
}
.ak .ak-prof-add b { color: var(--ink); font-weight: 800; white-space: nowrap; }
.ak .ak-prof-plan-foot { padding: 18px 28px 26px; }
.ak .ak-prof-plan-foot .btn { width: 100%; justify-content: center; text-decoration: none; }
.ak .ak-prof-note { color: var(--ink-2); font-size: 15.5px; margin: 18px 0 0; }
.ak .ak-prof-note a { color: var(--cold-ink); font-weight: 700; }

/* ---------- shared: fine print under the call band ---------- */
.ak .ak-sp-fine { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; margin: 14px auto 0; max-width: 760px; }

/* ---------- shared: offer card (navy price + what you get + button): Оглед, Ремонт, Термопомпи, VRF ---------- */
.ak .ak-sp-offer {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: 980px; margin: 0; /* left edge in line with the sections below */
	border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); background: #fff;
}
.ak .ak-sp-offer-price { background: var(--night); color: #fff; padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.ak .ak-sp-offer-price .k { font-size: 14px; font-weight: 700; color: var(--cold); }
.ak .ak-sp-offer-price .v { font-family: var(--ak-font-d); font-size: 52px; font-weight: 800; line-height: 1; color: #fff; margin: 6px 0 0; }
.ak .ak-sp-offer-price .v.is-text { font-size: 40px; line-height: 1.05; }
.ak .ak-sp-offer-price .s { color: #a9c3db; font-size: 15px; margin-top: 10px; line-height: 1.45; }
.ak .ak-sp-offer-body { padding: 26px 32px 28px; }
.ak .ak-sp-offer-list { list-style: none; margin: 0; padding: 0; }
.ak .ak-sp-offer-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ak .ak-sp-offer-list li:first-child { padding-top: 0; }
.ak .ak-sp-offer-list svg { flex: 0 0 auto; margin-top: 3px; stroke: var(--cold-ink); }
.ak .ak-sp-offer-list b { display: block; color: var(--ink); font-size: 16px; }
.ak .ak-sp-offer-list span { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.45; margin-top: 2px; }
.ak .ak-sp-offer-body .btn { margin-top: 20px; width: 100%; justify-content: center; text-decoration: none; }

/* ---------- shared: FAQ (<details>, no JS): dividers, no boxes ---------- */
.ak .ak-sp-qs { display: grid; border-top: 1px solid var(--line); }
.ak .ak-sp-q { border-bottom: 1px solid var(--line); }
.ak .ak-sp-q summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 0; cursor: pointer; list-style: none;
	font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.35;
}
.ak .ak-sp-q summary::-webkit-details-marker { display: none; }
.ak .ak-sp-q summary svg { flex: 0 0 auto; stroke: var(--cold-ink); transition: transform .15s; }
.ak .ak-sp-q[open] summary svg { transform: rotate(180deg); }
.ak .ak-sp-q summary:focus-visible { outline: 2px solid var(--cold-ink); outline-offset: 2px; border-radius: 4px; }
.ak .ak-sp-q p { margin: 0; padding: 0 0 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 720px; }

/* ---------- link with an arrow under a text (Подово's heat-source cards) ---------- */
.ak .ak-tp-use-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; color: var(--cold-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.ak .ak-tp-use-more svg { stroke: currentColor; }
.ak .ak-tp-use-more:hover { text-decoration: underline; }

/* ---------- shared: sections without card boxes (VRF first, owner 2026-11-12).
   .ak-sp-split = heading + intro left (.ak-sp-side), content right (.ak-sp-body)
   ≥1024px, stacked below; a thin line between sections. Content shapes: check
   list (.ak-sp-facts), name | text rows (.ak-sp-rows, template-parts/service-rows.php),
   a vertical timeline (.ak-sp-timeline), a quiet closing line (.ak-sp-line),
   text + button (.ak-sp-lead), FAQ with dividers (.ak-sp-qs inside a split). ---------- */
.ak .ak-sp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 0; margin-top: 56px; }
.ak .ak-sp-split::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: 44px; } /* the divider, inside .dwrap's side padding */
.ak .ak-sp-side .ak-mont-h2 { font-size: 30px; }
.ak .ak-sp-side .ak-mont-h2::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--cold-ink); margin-bottom: 14px; }
.ak .ak-sp-side p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 12px 0 0; max-width: 340px; }
.ak .ak-sp-body { min-width: 0; margin: 0; }
.ak .ak-vrf-text p { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; }
.ak .ak-vrf-text b { color: var(--ink); }
.ak .ak-sp-lead { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; margin: 0 0 18px; max-width: 640px; }
.ak .ak-sp-body > .btn { text-decoration: none; }

/* checked points */
.ak .ak-sp-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.ak .ak-sp-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin: 0; }
.ak .ak-sp-facts svg { margin-top: 4px; stroke: var(--cold-ink); }
.ak .ak-sp-facts h3 { font-family: var(--ak-font); font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.ak .ak-sp-facts p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin: 4px 0 0; }

/* name | text rows */
.ak .ak-sp-rows { margin: 0; }
.ak .ak-sp-rows > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ak .ak-sp-rows > div:first-child { padding-top: 4px; }
.ak .ak-sp-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ak .ak-sp-rows dt { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.45; }
.ak .ak-sp-rows dd { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
/* rows with a photo (Термопомпи «Какво изграждаме»): photo left, name + text right; photo on top ≤640px */
.ak .ak-sp-rows > div.has-img { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 6px; }
.ak .ak-sp-rows > .has-img > .ak-sp-rows-img { grid-column: 1; grid-row: 1 / span 2; }
.ak .ak-sp-rows > .has-img > dt { grid-column: 2; grid-row: 1; }
.ak .ak-sp-rows > .has-img > dd:last-child { grid-column: 2; grid-row: 2; }
.ak .ak-sp-rows-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--cold-50); }
.ak .ak-sp-more { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 10px; color: var(--cold-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.ak .ak-sp-more svg { stroke: currentColor; }
.ak .ak-sp-more:hover { text-decoration: underline; }
.ak .ak-sp-line { margin: 22px 0 0; padding-left: 14px; border-left: 3px solid var(--cold-ink); color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ak .ak-sp-line b { color: var(--ink); }

/* how we work: vertical timeline */
.ak .ak-sp-timeline { list-style: none; margin: 0; padding: 0; counter-reset: ak-vstep; }
.ak .ak-sp-timeline li { counter-increment: ak-vstep; position: relative; margin: 0; padding: 0 0 26px 58px; min-height: 38px; }
.ak .ak-sp-timeline li:last-child { padding-bottom: 0; }
.ak .ak-sp-timeline li::before {
	content: counter(ak-vstep); position: absolute; left: 0; top: 0;
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 99px;
	background: var(--night); color: #fff; font-family: var(--ak-font-d); font-size: 17px; font-weight: 800;
}
.ak .ak-sp-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; background: var(--line); }
.ak .ak-sp-timeline h3 { font-family: var(--ak-font); font-size: 17.5px; font-weight: 800; color: var(--ink); margin: 0; padding-top: 7px; }
.ak .ak-sp-timeline p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin: 4px 0 0; max-width: 600px; }

@media (max-width: 1023px) {
	.ak .ak-sp-split { grid-template-columns: 1fr; margin-top: 44px; }
	.ak .ak-sp-split::before { margin-bottom: 34px; }
	.ak .ak-sp-split > .ak-sp-body { margin-top: 20px; }
	.ak .ak-sp-side p { max-width: 640px; }
}
@media (max-width: 860px) {
	.ak .ak-sp-side .ak-mont-h2 { font-size: 28px; } /* the shared tablet step */
}
@media (max-width: 640px) {
	.ak .ak-sp-side .ak-mont-h2 { font-size: 26px; }
	.ak .ak-sp-rows > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
	.ak .ak-sp-rows > div:first-child { padding-top: 0; }
	.ak .ak-sp-rows > div.has-img { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; }
	.ak .ak-sp-rows > .has-img > .ak-sp-rows-img { grid-row: 1; margin-bottom: 8px; }
	.ak .ak-sp-rows > .has-img > dt { grid-column: 1; grid-row: 2; }
	.ak .ak-sp-rows > .has-img > dd:last-child { grid-column: 1; grid-row: 3; }
	.ak .ak-sp-timeline li { padding-left: 52px; padding-bottom: 22px; }
	.ak .ak-sp-timeline p { font-size: 15px; }
	.ak .ak-sp-q summary { padding: 14px 0; }
	.ak .ak-sp-q p { padding: 0 0 16px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.ak .ak-mont-inc { padding: 30px 26px; }
	.ak .ak-mont-prices { padding: 16px 26px 22px; }
	.ak .ak-mont-btu { font-size: 26px; }
	.ak .ak-mont-price .v { font-size: 38px; }
}
@media (max-width: 1023px) {
	/* long price list: one column, the page scrolls (no list inside a list on touch screens);
	   home.js folds it behind «Покажи всички» (rows past the fold get .is-over) */
	.ak .ak-sp-plist-head .ak-sp-plist-count { margin-top: 12px; }
	.ak .ak-sp-plist-scroll { max-height: none; overflow: visible; }
	.ak .ak-sp-plist-cols { position: static; }
	.ak .ak-sp-plist-panel::after { display: none; }
	.ak .ak-sp-plist-box.is-folded:not(.is-searching) .ak-sp-plist-row.is-over { display: none; }
	.ak button.ak-sp-plist-more:not([hidden]) {
		display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin: 14px 0 0;
		padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
		color: var(--cold-ink); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: none;
	}
	.ak button.ak-sp-plist-more:not([hidden]):hover,
	.ak button.ak-sp-plist-more:not([hidden]):focus { background: var(--cold-50); color: var(--cold-ink); border-color: var(--line); }
	.ak .ak-sp-plist-box.is-searching button.ak-sp-plist-more { display: none; }
}
/* tablets + phones: one column, prices on top, the list under them */
@media (max-width: 860px) {
	.ak .ak-mont-board { grid-template-columns: 1fr; }
	.ak .ak-mont-inc { order: 0; padding: 26px 22px; }
	.ak .ak-mont-inc-t { font-size: 24px; }
	.ak .ak-mont-h2 { font-size: 28px; }
	.ak .ak-mont-head { margin-bottom: 18px; }
	.ak .ak-prof-plans { grid-template-columns: 1fr; max-width: 560px; }
	.ak .ak-sp-offer { grid-template-columns: 1fr; max-width: 560px; margin: 0; }
	.ak .ak-sp-fine { text-align: left; }
}
@media (max-width: 460px) {
	.ak .ak-mont-prices { padding: 8px 18px 20px; }
	.ak .ak-mont-inc { padding: 24px 18px; }
	.ak .ak-mont-row { padding: 18px 0; column-gap: 12px; }
	.ak .ak-mont-btu { font-size: 21px; }
	.ak .ak-mont-hint { font-size: 13.5px; }
	.ak .ak-mont-price .v { font-size: 32px; }
	.ak .ak-mont-foot .btn { width: 100%; }
	.ak .ak-mont-xrow { flex-direction: column; gap: 2px; }
	.ak .ak-mont-xrow dd { color: var(--hot); }
	.ak .ak-sp-plist-cols { padding: 10px 14px; font-size: 13px; }
	.ak .ak-sp-plist-row { gap: 14px; padding: 11px 14px; }
	.ak .ak-sp-plist-row dt { font-size: 14.5px; line-height: 1.4; }
	.ak .ak-sp-plist-row dd { font-size: 14.5px; }
	.ak .ak-prof-plan-top { padding: 20px 18px; }
	.ak .ak-prof-plan-btu { font-size: 24px; }
	.ak .ak-prof-price { padding: 18px 18px 4px; }
	.ak .ak-prof-price .v { font-size: 40px; }
	.ak .ak-prof-list { padding: 6px 18px 0; }
	.ak .ak-prof-add { margin: 10px 18px 0; }
	.ak .ak-prof-plan-foot { padding: 16px 18px 20px; }
	.ak .ak-sp-offer-price { padding: 22px 18px; }
	.ak .ak-sp-offer-price .v { font-size: 42px; }
	.ak .ak-sp-offer-price .v.is-text { font-size: 34px; }
	.ak .ak-sp-offer-body { padding: 20px 18px 22px; }
	.ak .ak-sp-q summary { font-size: 16px; }
}

/* ---------- Подово отопление (tpl-service-podovo.php) ----------
   <main> is one grid cell holding two layers: the build drawing
   (template-parts/build-stage.php + drawings/*.php), sticky and as tall as the screen,
   and the page content on top of it. The content scrolls over the drawing;
   home.js plays the build by how far <main> has been scrolled (.is-live,
   .is-on = current step). Desktop: content left (55 %), drawing right.
   ≤1023px: the drawing sits at the bottom of the screen behind the cards
   (normal spacing: the big gaps that let it show read as empty space). */
/* the whole page is navy (navy-open mode ak-fh-page): the breadcrumbs sit on it too, no light strip between the nav bar and <main> */
.ak.ak-fh-page { background: var(--night); }
.ak.ak-fh-page .ak-crumbs { color: #8fa9c2; }
.ak.ak-fh-page .ak-crumbs a { color: #c4d6e8; text-decoration-color: rgba(255,255,255,.25); }
.ak.ak-fh-page .ak-crumbs a:hover { color: #fff; text-decoration-color: currentColor; }
.ak.ak-fh-page .ak-crumbs svg { color: #6f8aa6; }
.ak.ak-fh-page .ak-crumbs .cur { color: #fff; }
.ak .ak-fh { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--night); padding-bottom: 0; } /* padding lives on the content: the sticky layer's cell is all of <main> */
.ak .ak-fh > .ak-fh-build, .ak .ak-fh > .ak-fh-content { grid-area: 1 / 1; min-width: 0; }
.ak .ak-fh-build { position: sticky; top: 0; z-index: 0; align-self: start; height: 100vh; height: 100svh; overflow: hidden; color: #d5e3f0; }
.ak .ak-fh-content { position: relative; z-index: 1; padding-bottom: 72px; width: 100%; box-sizing: border-box; } /* explicit: .dwrap's auto margins turn off grid stretch, and the photo row's min-content would widen it past the screen */

/* the drawing layer */
.ak .ak-fh-stage { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 55% minmax(0, 1fr); column-gap: 48px; align-items: center; padding-block: 28px; }
.ak .ak-fh-art { grid-column: 2; min-width: 0; }
.ak .ak-fh-svg { display: block; width: 100%; height: auto; max-height: 62vh; max-height: 62svh; }
.ak .ak-fh-copy { margin-top: 14px; }
.ak .ak-fh-count { display: none; margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cold); }
.ak .ak-fh-steps { list-style: none; margin: 0; padding: 0; }
.ak .ak-fh-step { margin: 0; padding: 7px 0; }
.ak .ak-fh-step h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--ak-font); font-size: 16px; font-weight: 800; line-height: 1.25; color: #fff; }
.ak .ak-fh-step .n {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 99px; background: rgba(255,255,255,.1); color: #fff;
	font-family: var(--ak-font-d); font-size: 13px; font-weight: 800;
}
.ak .ak-fh-step p { margin: 3px 0 0 36px; font-size: 14.5px; line-height: 1.5; color: #a9c3db; }
/* progress = a slider (home.js): the 3px line sits in a finger-sized hit area, the knob marks where the build is */
.ak .ak-fh-bar { display: none; position: relative; margin-top: 3px; padding: 11px 0; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.ak .ak-fh-bar-line { display: block; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.ak .ak-fh-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--cold); transform-origin: 0 50%; transform: scaleX(0); }
.ak .ak-fh-knob { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0,160,220,.35); pointer-events: none; transition: transform .15s; }
.ak .ak-fh-bar.is-drag .ak-fh-knob { transform: scale(1.25); }
.ak .ak-fh-bar:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; border-radius: 6px; }
/* live: only the current step, bigger */
.ak .ak-fh-build.is-live .ak-fh-count, .ak .ak-fh-build.is-live .ak-fh-bar { display: block; }
.ak .ak-fh-build.is-live .ak-fh-step { display: none; padding: 0; }
.ak .ak-fh-build.is-live .ak-fh-step.is-on { display: block; }
.ak .ak-fh-build.is-live .ak-fh-step .n { display: none; }
.ak .ak-fh-build.is-live .ak-fh-step h3 { font-size: 22px; }
.ak .ak-fh-build.is-live .ak-fh-step p { margin: 6px 0 0; font-size: 15.5px; max-width: 520px; }
.ak .ak-fh-build.is-live [data-fx="draw"] { stroke-dasharray: 1 1; }
/* data-fx="flow" (air, water): dashes that keep moving along the path once it shows (home.js sets .is-run);
   still dashes without JS / with reduced motion. The drawing gives them stroke-dasharray="6 10" (one period = 16) */
.ak .ak-fh-build.is-live [data-fx="flow"].is-run { animation: ak-fh-flow 1s linear infinite; }
@keyframes ak-fh-flow { to { stroke-dashoffset: -16; } }
.ak .ak-fh-build.is-away [data-fx="flow"] { animation-play-state: paused; }

/* the content column: text straight on the navy, no cards (owner 2026-11-10);
   sections split by thin lines, headings white, body light blue-grey */
.ak .ak-fh-col { width: 55%; pointer-events: auto; }
.ak .ak-fh-content { pointer-events: none; } /* its empty right part lies over the drawing column: let the progress slider there take the pointer */
.ak .ak-fh-hero { padding: 28px 0 8px; }
.ak .ak-fh-hero .ak-cpage-eyebrow { color: var(--cold); }
.ak .ak-fh-hero .ak-cpage-h1 { color: #fff; }
.ak .ak-fh-hero .ak-cpage-sub { color: #c4d6e8; }
.ak .ak-fh-sec { margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.12); }
.ak .ak-fh-h2, .ak .ak-fh-h2.is-light { font-family: var(--ak-font-d); font-size: 28px; font-weight: 800; line-height: 1.15; color: #fff; margin: 0 0 16px; }
.ak .ak-fh-why p { color: #c4d6e8; font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
.ak .ak-fh-ctl { margin-top: 22px; padding: 2px 0 2px 18px; border-left: 3px solid var(--cold); }
.ak .ak-fh-ctl h3 { font-family: var(--ak-font-d); font-size: 21px; font-weight: 800; color: #fff; margin: 0; line-height: 1.15; }
.ak .ak-fh-why .ak-fh-ctl p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: #a9c3db; }
.ak .ak-fh-srcs { display: grid; gap: 0; }
.ak .ak-fh-src { display: flex; flex-direction: column; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ak .ak-fh-src:first-child { border-top: 0; padding-top: 2px; }
.ak .ak-fh-src h3 { font-family: var(--ak-font); font-size: 19px; font-weight: 800; color: var(--cold); margin: 0; line-height: 1.25; }
.ak .ak-fh-src p { color: #c4d6e8; font-size: 15.5px; line-height: 1.65; margin: 8px 0 0; }
.ak .ak-fh-src .ak-tp-use-more { margin-top: 10px; padding-top: 0; color: #fff; }
.ak .ak-fh-src .ak-tp-use-more svg { stroke: var(--cold); }
.ak .ak-fh-ben-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ak .ak-fh-ben-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 0; color: #d5e3f0; font-size: 15.5px; line-height: 1.5; }
.ak .ak-fh-ben-list svg { flex: 0 0 auto; margin-top: 3px; stroke: var(--cold); }
/* Вентилация (tpl-service-ventilatsia.php): the docx's tagline, the paragraph after the points, a sub-heading,
   «Term – text» lists (components, schemes) split by thin lines */
.ak .ak-fh-lead { margin: 10px 0 0; font-family: var(--ak-font-d); font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--cold); }
.ak .ak-fh .ak-fh-after { margin: 14px 0 0; color: #c4d6e8; font-size: 16px; line-height: 1.7; }
.ak .ak-fh-h3 { margin: 26px 0 6px; font-family: var(--ak-font-d); font-size: 21px; font-weight: 800; line-height: 1.2; color: #fff; }
.ak .ak-fh-defs { list-style: none; margin: 0; padding: 0; }
.ak .ak-fh-defs li { margin: 0; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); color: #c4d6e8; font-size: 15.5px; line-height: 1.6; }
.ak .ak-fh-defs li:first-child { border-top: 0; }
.ak .ak-fh-defs strong { color: #fff; font-weight: 800; }
.ak .ak-fh-src .ak-fh-schemes-k { margin-top: 14px; color: #fff; font-weight: 700; }
.ak .ak-fh-src .ak-fh-schemes { margin-top: 4px; }
/* «По проект»: the shared offer card, flattened to text on the navy */
.ak .ak-fh .ak-sp-offer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; margin: 0; max-width: none; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.ak .ak-fh .ak-sp-offer-price { background: none; padding: 0; justify-content: flex-start; }
.ak .ak-fh .ak-sp-offer-price .v { font-size: 40px; }
.ak .ak-fh .ak-sp-offer-body { background: none; padding: 0; }
.ak .ak-fh-proj p { color: #c4d6e8; font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; }
/* call band: no card */
.ak .ak-fh-cta .ak-svc-cta { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.ak .ak-fh-cta .ak-svc-cta::before, .ak .ak-fh-cta .ak-svc-cta::after { display: none; }
.ak .ak-fh-cta .ak-svc-cta-txt h2 { color: #fff; font-size: 28px; }
.ak .ak-fh-cta .ak-svc-cta-txt p { color: #c4d6e8; }
.ak .ak-fh .ak-fh-fine { text-align: left; color: #8fa9c2; margin: 22px 0 0; max-width: none; }
/* photo row: swipe / scroll-snap, arrows on desktop (home.js unhides them) */
.ak .ak-fh-gal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.ak .ak-fh-gal-head .ak-fh-h2 { margin: 0; }
.ak .ak-fh-gal-side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.ak .ak-fh-gal-count { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #a9c3db; white-space: nowrap; }
.ak .ak-fh-gal-nav:not([hidden]) { display: flex; gap: 8px; flex: 0 0 auto; }
.ak button.ak-fh-gal-btn {
	display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0;
	border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: none; color: #fff; box-shadow: none; cursor: pointer;
}
.ak button.ak-fh-gal-btn svg { stroke: currentColor; }
.ak button.ak-fh-gal-btn:hover, .ak button.ak-fh-gal-btn:focus { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.ak button.ak-fh-gal-btn:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.ak button.ak-fh-gal-btn:disabled, .ak button.ak-fh-gal-btn:disabled:hover { opacity: .35; background: none; border-color: rgba(255,255,255,.25); cursor: default; }
.ak .ak-fh-gal-track {
	list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ak .ak-fh-gal-track::-webkit-scrollbar { display: none; }
.ak .ak-fh-gal-track:focus-visible { outline: 2px solid var(--cold); outline-offset: 4px; }
.ak .ak-fh-gal-track li { margin: 0; scroll-snap-align: start; }
.ak .ak-fh-gal-open { display: block; cursor: zoom-in; }
.ak .ak-fh-gal-open:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.ak .ak-fh-gal-track img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 568; object-fit: cover; background: var(--night-2); transition: opacity .15s; }
.ak .ak-fh-gal-open:hover img { opacity: .85; }
/* 'wide' photo sets (template-parts/photo-row.php, Вентилация): 4:3 site photos instead of 9:16 phone stills */
.ak .ak-fh-gal.is-wide .ak-fh-gal-track { grid-auto-columns: 300px; }
.ak .ak-fh-gal.is-wide .ak-fh-gal-track img { aspect-ratio: 4 / 3; }
/* full-screen viewer (built by home.js, moved to <body>, so no .ak parent):
   one photo per screen width, native swipe / scroll-snap between them */
html.ak-fhlb-open { overflow: hidden; }
html.ak-fhlb-open .chaty { display: none !important; }
.ak-fhlb {
	position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr);
	background: rgba(6, 17, 29, .985); color: #fff; font-family: var(--ak-font, system-ui, sans-serif);
	opacity: 0; transition: opacity .18s ease; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
}
.ak-fhlb[hidden] { display: none; }
.ak-fhlb.is-in { opacity: 1; }
.ak-fhlb button { font: inherit; color: inherit; text-transform: none; letter-spacing: 0; box-shadow: none; } /* Partdo base.css styles every button */
.ak-fhlb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; }
.ak-fhlb-count { font-size: 15px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: .9; }
.ak-fhlb .ak-fhlb-close {
	width: 44px; height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 12px; background: rgba(255,255,255,.1); cursor: pointer;
}
.ak-fhlb .ak-fhlb-close:hover, .ak-fhlb .ak-fhlb-close:focus { background: rgba(255,255,255,.2); color: #fff; }
.ak-fhlb button:focus-visible { outline: 3px solid var(--cold, #00a0dc); outline-offset: 1px; }
.ak-fhlb-track {
	list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ak-fhlb-track::-webkit-scrollbar { display: none; }
.ak-fhlb-track li {
	flex: 0 0 100%; margin: 0; min-height: 0; scroll-snap-align: center; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center; padding: 0 76px 20px; box-sizing: border-box;
}
.ak-fhlb-track img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; -webkit-user-drag: none; user-select: none; } /* original size (320×568), smaller only on a shorter screen */
.ak-fhlb .ak-fhlb-nav {
	position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin: -26px 0 0; padding: 0;
	display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); cursor: pointer; transition: background .15s, opacity .15s;
}
.ak-fhlb .ak-fhlb-nav:hover, .ak-fhlb .ak-fhlb-nav:focus { background: rgba(255,255,255,.24); color: #fff; }
.ak-fhlb .ak-fhlb-nav:disabled, .ak-fhlb .ak-fhlb-nav:disabled:hover { opacity: .3; background: rgba(255,255,255,.12); cursor: default; }
.ak-fhlb .ak-fhlb-nav svg { stroke: currentColor; }
.ak-fhlb .ak-fhlb-prev { left: 12px; }
.ak-fhlb .ak-fhlb-next { right: 12px; }
@media (max-width: 767px) {
	.ak-fhlb-bar { padding: 6px 6px 6px 16px; }
	.ak-fhlb-track li { padding: 0 0 calc(12px + env(safe-area-inset-bottom)); }
	.ak-fhlb .ak-fhlb-nav { display: none; } /* phones swipe */
}
@media (prefers-reduced-motion: reduce) { .ak-fhlb { transition: none; } }

/* tablets + phones: drawing at the bottom of the screen (above the tab bar),
   dimmed while the text runs over it, full when the text is hidden */
@media (max-width: 1023px) {
	.ak .ak-fh-build { height: calc(100svh - var(--ak-tabbar-h, 0px) - env(safe-area-inset-bottom)); }
	.ak .ak-fh-stage { grid-template-columns: 1fr; align-content: end; padding-block: 16px 20px; }
	.ak .ak-fh-art { grid-column: 1; width: 100%; max-width: 620px; margin: 0 auto; transition: opacity .3s; }
	.ak .ak-fh:not(.is-text-off) .ak-fh-build.is-live .ak-fh-art { opacity: .25; }
	.ak .ak-fh:not(.is-text-off) .ak-fh-build.is-live .ak-fh-copy { visibility: hidden; } /* the caption would collide with the text */
	/* no JS / reduced motion (no .is-live): nothing moves, so no background layer either: the finished
	   drawing and the 4 steps follow the text as a normal block */
	.ak .ak-fh > .ak-fh-build:not(.is-live) { grid-area: 2 / 1; position: static; height: auto; overflow: visible; }
	.ak .ak-fh > .ak-fh-build:not(.is-live) .ak-fh-stage { height: auto; padding-block: 0 48px; }
	.ak .ak-fh-svg { max-height: 46svh; }
	.ak .ak-fh-copy { margin-top: 6px; }
	.ak .ak-fh-build.is-live .ak-fh-step h3 { font-size: 18px; }
	.ak .ak-fh-build.is-live .ak-fh-step p { display: none; }
	.ak .ak-fh-col { width: auto; max-width: 640px; margin: 0 auto; }
	.ak .ak-fh-hero { padding: 16px 0 0; }
	.ak .ak-fh-sec { margin-top: 32px; padding-top: 28px; }
	.ak .ak-fh-h2, .ak .ak-fh-h2.is-light { font-size: 24px; }
	.ak .ak-fh-ben-list { grid-template-columns: 1fr; }
	.ak .ak-fh .ak-sp-offer { grid-template-columns: 1fr; gap: 14px; }
	.ak .ak-fh-cta .ak-svc-cta-txt h2 { font-size: 24px; }
	.ak .ak-fh-gal-nav:not([hidden]) { display: none; } /* phones + tablets swipe */
	.ak .ak-fh-gal-track { grid-auto-columns: 200px; }
	.ak .ak-fh-gal.is-wide .ak-fh-gal-track { grid-auto-columns: 280px; }
}
/* phones: the button under the intro hides the text (it keeps its place, so
   the scroll and the build's progress don't jump), the drawing moves to the
   middle with the step descriptions; «Обратно» under them goes back */
.ak .ak-fh-show, .ak .ak-fh-back, .ak .ak-fh-play { display: none; }
@media (max-width: 1023px) {
	.ak button.ak-fh-show:not([hidden]), .ak .ak-fh.is-text-off button.ak-fh-back:not([hidden]) {
		display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin: 20px 0 0;
		padding: 12px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
		background: var(--night-2); color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; line-height: 1.3; text-align: left;
		box-shadow: none; cursor: pointer;
	}
	.ak button.ak-fh-show::before {
		content: ""; flex: 0 0 auto; width: 0; height: 0; margin-left: 4px;
		border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--cold);
	}
	.ak button.ak-fh-show:hover, .ak button.ak-fh-show:focus,
	.ak .ak-fh.is-text-off button.ak-fh-back:hover, .ak .ak-fh.is-text-off button.ak-fh-back:focus { background: var(--night-2); color: #fff; border-color: rgba(255,255,255,.35); }
	.ak button.ak-fh-show:focus-visible, .ak button.ak-fh-back:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
	/* watching: «Стартирай» (plays it in 10 s) beside «Обратно» */
	.ak .ak-fh.is-text-off .ak-fh-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
	.ak .ak-fh.is-text-off .ak-fh-btns button.ak-fh-back:not([hidden]) { margin: 0; justify-content: center; text-align: center; background: #fff; color: var(--ink); border-color: #fff; }
	.ak .ak-fh.is-text-off .ak-fh-btns button.ak-fh-back:not([hidden]):hover, .ak .ak-fh.is-text-off .ak-fh-btns button.ak-fh-back:not([hidden]):focus { background: #fff; color: var(--ink); border-color: #fff; }
	.ak .ak-fh.is-text-off button.ak-fh-play:not([hidden]) {
		display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin: 0; padding: 12px 16px;
		border: 1px solid var(--hot); border-radius: 12px; background: var(--hot); color: #fff;
		font: inherit; font-size: 15.5px; font-weight: 800; line-height: 1.3; box-shadow: none; cursor: pointer;
	}
	.ak .ak-fh.is-text-off button.ak-fh-play:not([hidden])::before {
		content: ""; flex: 0 0 auto; width: 0; height: 0;
		border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff;
	}
	.ak .ak-fh.is-text-off button.ak-fh-play:not([hidden]):hover, .ak .ak-fh.is-text-off button.ak-fh-play:not([hidden]):focus { background: var(--hot); color: #fff; border-color: var(--hot); }
	.ak button.ak-fh-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	.ak .ak-fh-content { transition: opacity .3s, visibility .3s; }
	.ak .ak-fh.is-text-off .ak-fh-content { opacity: 0; visibility: hidden; }
	.ak .ak-fh.is-text-off .ak-fh-stage { align-content: center; }
	.ak .ak-fh.is-text-off .ak-fh-svg { max-height: 54svh; }
	.ak .ak-fh.is-text-off .ak-fh-build.is-live .ak-fh-step p { display: block; font-size: 15px; min-height: 4.5em; } /* 3 lines: the buttons under it don't jump between steps */
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.ak .ak-fh-content { transition: none; }
}
@media (max-width: 460px) {
	.ak .ak-fh-sec { margin-top: 28px; padding-top: 24px; }
	.ak .ak-fh-gal-track { grid-auto-columns: 58%; gap: 10px; margin: 0 -16px; padding: 0 16px; scroll-padding-inline: 16px; } /* to the screen edges, the next photo peeks in */
	.ak .ak-fh-gal.is-wide .ak-fh-gal-track { grid-auto-columns: 82%; }
	.ak .ak-fh .ak-sp-offer-price .v { font-size: 34px; }
}
@media (max-width: 359px) {
	.ak .ak-fh-gal-track { margin: 0 -12px; padding: 0 12px; scroll-padding-inline: 12px; } /* 12px page gutter */
}

/* ---------- Вентилация, «Основни видове»: four buttons switch a small animated room
   (template-parts/drawings/vent-types.php) and the matching text. home.js unhides the
   buttons and adds .is-js (one type at a time) + .is-live (air and fan move; not with
   reduced motion), .is-away pauses them off screen. Without JS: every text + the
   natural room (the first button), still. ---------- */
.ak .ak-vt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.ak .ak-vt-tabs[hidden] { display: none; }
.ak .ak-vt-tabs button.ak-vt-tab { appearance: none; margin: 0; padding: 9px 16px; min-height: 40px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: transparent; color: #fff; font: 700 14.5px/1.2 var(--ak-font); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.ak .ak-vt-tabs button.ak-vt-tab:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }
.ak .ak-vt-tabs button.ak-vt-tab[aria-selected="true"] { background: #fff; color: var(--navy, #0f2f52); border-color: #fff; }
.ak .ak-vt-tabs button.ak-vt-tab:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.ak .ak-vt-fig { margin: 0 0 6px; max-width: 440px; }
.ak .ak-vt-svg { display: block; width: 100%; height: auto; }
.ak .ak-vt-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; color: #c4d6e8; font-size: 13.5px; }
.ak .ak-vt-key span::before { content: ""; display: inline-block; width: 18px; height: 0; margin: 0 7px 3px 0; border-top: 3px dashed; vertical-align: middle; }
.ak .ak-vt-key .is-fresh::before { color: #7fd6ff; }
.ak .ak-vt-key .is-stale::before { color: #f4a259; }
.ak .ak-vt-type { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.ak .ak-vt-type.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.ak .ak-vt-spin { transform-box: fill-box; transform-origin: center; }
/* every type keeps moving (hidden ones are visibility:hidden), so a type fading out doesn't freeze */
.ak .ak-vt.is-live .ak-vt-air { animation: ak-fh-flow 1s linear infinite; }
.ak .ak-vt.is-live .ak-vt-air.is-fast { animation-duration: .55s; }
.ak .ak-vt.is-live .ak-vt-air.is-gust { animation: ak-fh-flow 1.8s linear infinite, ak-vt-gust 5s ease-in-out infinite; }
.ak .ak-vt.is-live .ak-vt-air.is-late { animation-delay: 0s, -2.2s; }
.ak .ak-vt.is-live .ak-vt-spin { animation: ak-vt-spin .7s linear infinite; }
.ak .ak-vt.is-live .ak-vt-spin.is-rev { animation-direction: reverse; }
/* after the rules above and more specific than them (their shorthand resets the play state) */
.ak .ak-vt.is-live.is-away .ak-vt-air, .ak .ak-vt.is-live.is-away .ak-vt-spin { animation-play-state: paused; }
@keyframes ak-vt-gust { 0%, 100% { opacity: .25; } 35% { opacity: 1; } 60% { opacity: .55; } 80% { opacity: .9; } }
@keyframes ak-vt-spin { to { transform: rotate(360deg); } }
/* with JS: only the chosen type's text; under Механична the chosen scheme stands out */
.ak .ak-vt.is-live .ak-fh-src { animation: ak-vt-in .35s ease-out; }
.ak .ak-vt.is-js .ak-fh-src:not(.is-on) { display: none; }
.ak .ak-vt.is-js .ak-fh-src.is-on { border-top: 0; padding-top: 2px; }
.ak .ak-vt.is-js .ak-fh-schemes li { transition: opacity .25s; }
.ak .ak-vt.is-js .ak-fh-schemes li:not(.is-on) { opacity: .72; }
@keyframes ak-vt-in { from { opacity: 0; } }
/* side by side only where the column is wide enough for both (≤1279px the drawing sits above the text) */
@media (min-width: 1280px) {
	.ak .ak-vt-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
	.ak .ak-vt-fig { max-width: none; }
}
@media (max-width: 460px) {
	.ak .ak-vt-tabs { display: grid; grid-template-columns: 1fr 1fr; }
	.ak .ak-vt-tabs button.ak-vt-tab { padding: 9px 8px; }
}

/* ---------- VRF «Как работи» (.ak-vrfx): the building drawing (template-parts/drawings/vrf.php).
   A room whose unit is off (.is-off, home.js) turns grey and its air + refrigerant
   line stop; the outdoor unit's load bar follows the rooms in use. Room switches
   under the drawing: connected square segments. The small unit drawings
   (.ak-vrfx-mini) sit in the «Вътрешни тела» rows. ---------- */
.ak .ak-vrfx-fig { margin: 0; max-width: 720px; }
.ak .ak-vrfx-svg { display: block; width: 100%; height: auto; -webkit-tap-highlight-color: transparent; }
.ak .ak-vrfx-svg text { font-family: var(--ak-font); }
.ak .ak-vrfx-room { fill: #e2f1fa; transition: fill .5s; }
.ak .ak-vrfx-room.is-off { fill: #f8fafb; }
.ak .ak-vrfx-flow, .ak .ak-vrfx-air { stroke: var(--cold); stroke-width: 2.4; stroke-dasharray: 6 10; transition: opacity .5s; }
.ak .ak-vrfx-air { stroke-width: 2.2; }
.ak .ak-vrfx-flow.is-off, .ak .ak-vrfx-air.is-off { opacity: 0; }
.ak .ak-vrfx-led { fill: var(--cold); transition: fill .4s; }
.ak .ak-vrfx-led.is-off { fill: #c3cdd6; }
.ak .ak-vrfx-name { fill: var(--ink); font-size: 16px; font-weight: 800; }
.ak .ak-vrfx-st { font-size: 14px; font-weight: 700; }
.ak .ak-vrfx-st-on { fill: var(--cold-ink); }
.ak .ak-vrfx-st-off { fill: var(--muted); display: none; }
.ak .ak-vrfx-st-on.is-off { display: none; }
.ak .ak-vrfx-st-off.is-off { display: inline; }
.ak .ak-vrfx-k { fill: var(--ink); font-size: 16px; font-weight: 800; }
.ak .ak-vrfx-s { fill: var(--muted); font-size: 13px; font-weight: 600; }
.ak .ak-vrfx-load { fill: var(--cold-ink); transform-box: fill-box; transform-origin: 0 50%; transition: transform .8s ease; }
.ak .ak-vrfx-hit { pointer-events: none; }
.ak .ak-vrfx.is-js .ak-vrfx-hit { pointer-events: all; cursor: pointer; }
.ak .ak-vrfx.is-live .ak-vrfx-flow { animation: ak-fh-flow 1s linear infinite; }
.ak .ak-vrfx.is-live .ak-vrfx-air { animation: ak-fh-flow 1.2s linear infinite; }
.ak .ak-vrfx.is-away .ak-vrfx-flow, .ak .ak-vrfx.is-away .ak-vrfx-air { animation-play-state: paused; }
.ak .ak-vrfx-cap { margin: 12px 0 0; max-width: 720px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.ak .ak-vrfx-cap b { color: var(--ink); }
.ak .ak-vrfx-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; margin: 18px 0 0; border: 1px solid var(--line); }
.ak .ak-vrfx-rooms[hidden] { display: none; }
.ak .ak-vrfx-rooms button { appearance: none; display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 11px 14px 12px; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; transition: background-color .2s; }
.ak .ak-vrfx-rooms button:first-child { border-left: 0; }
.ak .ak-vrfx-rooms button b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.ak .ak-vrfx-rooms button span { display: block; margin-top: 2px; color: var(--cold-ink); font-size: 13px; font-weight: 700; }
.ak .ak-vrfx-rooms button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 3px 0 var(--cold-ink); }
.ak .ak-vrfx-rooms button[aria-pressed="false"] b, .ak .ak-vrfx-rooms button[aria-pressed="false"] span { color: var(--muted); }
@media (hover: hover) { /* touch: a sticky :hover would keep a switch just turned off looking on */
	.ak .ak-vrfx-rooms button:hover { background: #fff; color: var(--ink); }
	.ak .ak-vrfx-rooms button:hover b { color: var(--cold-ink); }
}
.ak .ak-vrfx-rooms button:focus-visible { outline: 2px solid var(--cold); outline-offset: -2px; }
.ak .ak-sp-side p.ak-vrfx-hint { color: var(--ink); font-weight: 700; }
/* «Какво е VRF / VRV система»: our photo under the heading (desktop: left column, beside the
   text, which spans both rows); phones: after the text */
.ak .ak-vrf-photo { max-width: 420px; margin: 28px 0 0; }
.ak .ak-vrf-photo img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--cold-50); }
.ak .ak-vrf-photo figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (min-width: 1024px) {
	.ak .ak-vrf-what { grid-template-rows: auto auto 1fr; } /* extra text height goes below the photo, not between it and the heading */
	.ak .ak-vrf-what > .ak-sp-side { grid-column: 1; grid-row: 2; }
	.ak .ak-vrf-what > .ak-sp-body { grid-column: 2; grid-row: 2 / span 2; }
	.ak .ak-vrf-what > .ak-vrf-photo { grid-column: 1; grid-row: 3; align-self: start; max-width: 340px; }
}
.ak .ak-sp-rows-img.is-svg svg { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
	.ak .ak-vrfx-mini .ak-vrfx-flow { animation: ak-fh-flow 1s linear infinite; }
	.ak .ak-vrfx-mini .ak-vrfx-air { animation: ak-fh-flow 1.2s linear infinite; }
	.ak .ak-vrfx-mini.is-away .ak-vrfx-flow, .ak .ak-vrfx-mini.is-away .ak-vrfx-air { animation-play-state: paused; }
}
@media (max-width: 640px) {
	/* the drawing shrinks to ~.6: labels set bigger in drawing units (≈12–13px on screen), « тяло» dropped */
	.ak .ak-vrfx-name { font-size: 22px; transform: translateY(-3px); }
	.ak .ak-vrfx-tl { display: none; }
	.ak .ak-vrfx-st { font-size: 19px; }
	.ak .ak-vrfx-k { font-size: 21px; }
	.ak .ak-vrfx-s { font-size: 17px; }
	.ak .ak-vrfx-rooms { grid-template-columns: 1fr 1fr; }
	.ak .ak-vrfx-rooms button:nth-child(3) { border-left: 0; }
	.ak .ak-vrfx-rooms button:nth-child(n+3) { border-top: 1px solid var(--line); }
}