/* ==========================================================================
   Начална страница — стилове по секции.
   Селекторите стъпват на реалния HTML на Fusion Builder 3.0.2:
     .fusion-fullwidth > .fusion-row > .fusion-layout-column > .fusion-column-wrapper
   Класовете от шорткодовете седят на .fusion-fullwidth, .fusion-layout-column,
   .fusion-title и на самия <a class="fusion-button">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */

.hb-hero {
	position: relative;
	background-size: cover !important;
}

/* Фоновата снимка е светла, а картата е бяла. Лекият градиент отляво връща
   контраста, който в макета идва от тъмната снимка. */
.hb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(28, 40, 34, 0.42) 0%,
		rgba(28, 40, 34, 0.26) 45%,
		rgba(28, 40, 34, 0.04) 75%,
		rgba(28, 40, 34, 0) 100%
	);
	pointer-events: none;
	z-index: 0;
}

.hb-hero > .fusion-row {
	position: relative;
	z-index: 1;
}

/* Картата. Редът идва от самата Fusion (content_layout="row" на колоната) —
   не се презаписва оттук, защото Fusion го задава с по-специфичен селектор. */
.hb-hero-card .fusion-column-wrapper {
	align-items: center;
}

/* Заглавията и текстът заемат цял ред… */
.hb-hero-card .fusion-column-wrapper > .fusion-title,
.hb-hero-card .fusion-column-wrapper > .fusion-text {
	flex: 0 0 100%;
	width: 100%;
}

/* …а обвивките на двата бутона застават една до друга.
   Fusion не слага клас на обвивката в flex режим — оттам двата селектора. */
.hb-hero-card .fusion-column-wrapper > div[class=""] {
	flex: 0 0 auto;
}

.hb-hero-card .fusion-column-wrapper > div:has(> .fusion-button) {
	flex: 0 0 auto;
}

/* Eyebrow — size="div", значи вътре е div, а не heading. */
.hb-eyebrow .title-heading-left,
.hb-eyebrow .title-heading-center,
.hb-eyebrow .title-heading-right {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-eyebrow);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hb-teal);
}

.hb-hero-title h1 {
	font-family: var(--hb-font-head);
	font-size: var(--hb-fs-h1) !important;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--hb-ink);
	margin: 0;
}

.hb-hero-title h1 .hb-accent {
	color: var(--hb-teal);
}

.hb-hero-lead p {
	font-family: var(--hb-font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--hb-body);
	margin-bottom: 0;
}

.hb-hero-card .fusion-column-wrapper > .fusion-text {
	margin-bottom: 32px;
}

@media only screen and (max-width: 800px) {
	.hb-hero {
		min-height: 0 !important;
	}

	.hb-hero-card .fusion-column-wrapper > div[class=""],
	.hb-hero-card .fusion-column-wrapper > div:has(> .fusion-button) {
		flex: 0 0 100%;
	}

	.hb-hero-card .fusion-button {
		width: 100%;
		text-align: center;
	}

	.hb-hero-lead p {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   Общо за секциите: заглавен блок (eyebrow → H2 → подзаглавие → чертичка)
   -------------------------------------------------------------------------- */

.hb-section .hb-heading h2 {
	font-family: var(--hb-font-head);
	font-size: var(--hb-fs-h2) !important;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--hb-ink);
	margin: 0;
}

.hb-section .hb-subhead p {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.75;
	color: var(--hb-body);
	max-width: 640px;
	margin-bottom: 0;
}

/* Късата градиентна чертичка под подзаглавието */
.hb-rule::after {
	margin-top: 26px;
}

/* Заглавният блок може да е content_layout="row" (когато под него стоят бутони
   на един ред). Тогава заглавията и текстът трябва да заемат цял ред.
   Правилото важи САМО за row — при flex-direction: column `flex-basis: 100%`
   се отнася за височината и разкъсва блока. */
.hb-section-head .fusion-content-layout-row > .fusion-title,
.hb-section-head .fusion-content-layout-row > .fusion-text,
.hb-section-head .fusion-content-layout-row > .fusion-content-boxes,
.hb-section-head .fusion-content-layout-row > .fusion-tabs,
.hb-section-head .fusion-content-layout-row > .fusion-accordion {
	flex: 0 0 100%;
	width: 100%;
}

.hb-section-head .fusion-content-layout-row > div:has(> .fusion-button) {
	flex: 0 0 auto;
}

.hb-section-head .fusion-content-layout-row > .fusion-text.hb-link-inline {
	flex: 0 0 auto;
	width: auto;
	display: flex;
	align-items: center;
}

.hb-section-head .hb-link-inline p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. КАК ПРОТИЧА КОНСУЛТАЦИЯТА — timeline-horizontal с номерирани стъпки
   -------------------------------------------------------------------------- */

.hb-timeline {
	counter-reset: hb-step;
}

.hb-timeline .content-box-column {
	counter-increment: hb-step;
}

.hb-timeline .content-box-wrapper {
	text-align: left;
}

.hb-timeline .heading {
	position: relative;
	margin-bottom: 14px;
}

/* Кръгчето носи номера на стъпката вместо иконата. */
.hb-timeline .heading .icon {
	position: relative;
	z-index: 1;
}

.hb-timeline .heading .fontawesome-icon {
	width: 40px !important;
	height: 40px !important;
	line-height: 40px !important;
	font-size: 17px !important;
	font-family: var(--hb-font-head) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	border-width: 2px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.hb-timeline .heading .fontawesome-icon::before {
	content: counter(hb-step);
}

/* Линията, която свързва стъпките. Avada не я рисува за хоризонталния
   timeline, затова е добавена тук. */
.hb-timeline .content-box-column:not(:last-child) .heading::after {
	content: "";
	position: absolute;
	top: 21px;
	left: 52px;
	right: -24px;
	height: 2px;
	background: #dfe3e0;
	z-index: 0;
}

.hb-timeline .content-box-heading {
	font-family: var(--hb-font-head) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--hb-ink) !important;
	margin: 14px 0 0 0 !important;
	text-align: left !important;
}

.hb-timeline .content-container,
.hb-timeline .content-container p {
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--hb-body);
	text-align: left !important;
}

.hb-timeline .content-container {
	padding-right: 22px;
}

@media only screen and (max-width: 800px) {
	.hb-timeline .content-box-column:not(:last-child) .heading::after {
		display: none;
	}

	.hb-timeline .content-box-column {
		margin-bottom: 26px;
	}
}

/* --------------------------------------------------------------------------
   2. ДВЕ НАПРАВЛЕНИЯ — карти с изображение, чеклист и CTA
   -------------------------------------------------------------------------- */

.hb-card .fusion-column-wrapper {
	position: relative;
	align-items: flex-start;
	overflow: hidden;
	border-radius: 12px;
}

/* Двете бели кутии да са с ЕДНАКВА ширина (Фаза 20.3).

   Двете колони са точно еднакви — по 608,4 px при екран 1600. Разликата е
   вътре: отстоянието на решетката (`spacing_right="4%"`) пада ЦЯЛОТО върху
   лявата колона, затова бялата ѝ кутия излизаше 538,3 px срещу 561,7 —
   23,4 px, тоест 4,3 % разлика. Клиентът иска картите „визуално равнопоставени“,
   а това е единственото, което си личеше след останалите поправки.

   Отстоянието се разполовява между двете съседни страни. Външните ръбове НЕ се
   местят: лявата кутия остава подравнена със заглавието на секцията, дясната —
   с десния ръб на съдържанието, а разстоянието между тях остава същото.

   Лостът е ПОЛЕТО НА ОБВИВКАТА, не отстъпът на колоната. Avada държи решетката
   с `margin` върху `.fusion-column-wrapper`: лявата колона получава 3,84 % отляво
   и 6,84 % отдясно, дясната — по 3,84 % от двете страни. Оттам идва цялата
   разлика.

   ⚠️ Първият опит беше с `padding` върху самата колона и влоши нещата —
   процентите на `padding` се разрешават спрямо СЪДЪРЖАЩИЯ БЛОК (реда, 1216,8 px),
   не спрямо елемента, тоест 5,76 % даде 70 px вместо 35. Процентите на `margin`
   върху обвивката се разрешават спрямо колоната (608,4 px) и се държат както се
   очаква.

   3,84 % = 23,36 px (базовият отстъп, външните ръбове не мърдат)
   5,76 % = 35,04 px (половината отстояние на решетката, от двете съседни страни)
   → и двете бели кутии стават 550,0 px.

   Само за екрани, на които двете карти стоят една до друга; под 800 px те се
   редят една под друга и правилото не важи. */
@media only screen and (min-width: 801px) {
	.hb-directions .fusion-builder-row > .hb-card > .fusion-column-wrapper {
		margin-left: 3.84%;
		margin-right: 3.84%;
	}

	/* ⚠️ НЕ `:first-of-type`. Редът започва с колоната на заглавието
	   (`.hb-section-head`, 1_1) — тя е първият `div` в него, тоест
	   `:first-of-type` хваща нея, а не първата карта. CSS няма „първи от този
	   клас“, затова първата карта се описва като „картата, която не е
	   последната“. */
	.hb-directions .fusion-builder-row > .hb-card:not(:last-of-type) > .fusion-column-wrapper {
		margin-right: 5.76%;
	}

	.hb-directions .fusion-builder-row > .hb-card:last-of-type > .fusion-column-wrapper {
		margin-left: 5.76%;
	}
}

/* Обвивката е `flex-wrap: wrap` и всеки елемент заема цял ред. При началното
   `align-content: stretch` свободното място в изравнената по височина карта се
   раздава МЕЖДУ редовете: по-късата карта получава по няколко пиксела над всеки
   свой ред и вътрешностите на двете съседни карти престават да съвпадат.
   Измерено на началната: иконата 1359,5 срещу 1355,2 px, заглавието 1435,7
   срещу 1427,2 px — 8,5 px разминаване между два еднакво високи блока.

   Съдържанието се пакетира отгоре, както е и на `/uslugi/` (виж същото
   правило и обяснението към него в uslugi.css). Тогава заглавията лягат на
   един ред, а бутонът следва собствения си текст. */
.hb-card > .fusion-column-wrapper {
	align-content: flex-start;
}

/* Всичко в картата получава вътрешен отстъп… */
.hb-card .fusion-column-wrapper > * {
	padding-left: 32px;
	padding-right: 32px;
}

/* …освен изображението, което е full-bleed. Fusion го увива в div без клас,
   затова се хваща през :has(). */
.hb-card .fusion-column-wrapper > div:has(> .hb-card-image) {
	flex: 0 0 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.hb-card .hb-card-image {
	display: block;
	width: 100%;
	margin: 0;
}

.hb-card .hb-card-image a,
.hb-card .hb-card-image img {
	display: block;
	width: 100%;
}

.hb-card .hb-card-image img {
	height: 230px;
	object-fit: cover;
}

/* Карта БЕЗ снимка (Фаза 19.3 — снимката на Академията е разкачена, а нова от
   клиента още няма). Двете карти в секцията стоят една до друга: ако едната
   загуби снимката си, другата увисва с 230 px по-високо начало. Затова тук
   стои същият неутрален блок, който екипът ползва за липсващите портрети —
   не чужда стокова снимка.
   Маха се заедно с класа `hb-card-noimage`, когато дойде истинска снимка. */
.hb-card-noimage .fusion-column-wrapper::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 230px;
	background-color: var(--hb-surface-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 24 24' fill='none' stroke='%237fb3ab' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V6a2 2 0 0 1 2-2h11'/%3E%3Cpath d='M6 17h13V4.5'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H19v3H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Иконата-бадж ляга върху долния ръб на снимката. */
.hb-card .hb-card-badge {
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
	margin: -26px 0 20px 32px;
	padding: 0 !important;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: var(--hb-grad-diag);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(32, 31, 29, 0.18);
	box-sizing: border-box;
}

.hb-card .hb-card-title,
.hb-card .hb-card-body,
.hb-card .hb-check {
	flex: 0 0 100%;
	width: 100%;
}

.hb-card .hb-card-title h3 {
	font-family: var(--hb-font-head);
	font-size: var(--hb-fs-h3) !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-teal);
	margin: 0;
}

.hb-card .hb-card-body p {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.7;
	color: var(--hb-body);
	margin-bottom: 0;
}

.hb-card .hb-check {
	margin-top: 22px;
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--hb-border);
}

.hb-card .hb-check .fusion-li-item-content {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.5;
	color: var(--hb-body);
	margin-left: 26px !important;
}

.hb-card .hb-check li {
	margin-bottom: 10px;
}

/* Бутон и текстова връзка стоят на един ред. */
.hb-card .fusion-column-wrapper > div:has(> .fusion-button) {
	flex: 0 0 auto;
	padding-right: 0;
}

.hb-card .hb-link-arrow {
	flex: 0 0 auto;
	padding-left: 0 !important;
}

.hb-card .hb-link-arrow p {
	margin-bottom: 0;
}

.hb-btn-sm.fusion-button {
	padding: 13px 22px !important;
}

.hb-btn-sm.fusion-button .fusion-button-text {
	font-size: 12px;
}

@media only screen and (max-width: 800px) {
	.hb-card {
		margin-bottom: 26px !important;
	}

	.hb-card .hb-card-image img {
		height: 190px;
	}
}

/* При 375 px най-дългият етикет („Научете повече за консултациите") прави
   бутона 344 px широк. С 32 px ляв отстъп и без десен (правилото по-горе го
   маха, за да стои бутонът на един ред с текстовата връзка) десният му ъгъл
   излизаше 2 px извън картата и `overflow: hidden` на обвивката го отрязваше.
   На тесен екран бутонът и връзката така или иначе са един под друг, затова
   десният отстъп се връща и бутонът се ограничава до наличната ширина —
   дългият етикет се пренася на два реда, вместо да се реже. */
@media only screen and (max-width: 640px) {
	.hb-card .fusion-column-wrapper > div:has(> .fusion-button) {
		padding-right: 32px;
		max-width: 100%;
	}

	.hb-card .fusion-button {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   3. ЗАЩО НИЕ — четири икон-карти на сив фон
   -------------------------------------------------------------------------- */

.hb-why-card .hb-why-icon {
	width: 44px;
	height: 44px;
	margin: 0 0 18px 0;
	border-radius: 9px;
	background: var(--hb-grad-diag);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hb-why-card .hb-why-title h3 {
	font-family: var(--hb-font-head);
	font-size: 19px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-ink);
	margin: 0;
}

.hb-why-card .hb-why-body p {
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--hb-body);
	margin-bottom: 0;
}

/* На таблет четири колони по 196px са твърде тесни за текста — стават две. */
@media only screen and (min-width: 641px) and (max-width: 1000px) {
	.hb-why .fusion-row .hb-why-card {
		width: 48% !important;
		margin-right: 4% !important;
		margin-bottom: 22px !important;
	}

	.hb-why .fusion-row .hb-why-card:nth-of-type(odd) {
		margin-right: 0 !important;
	}

	.hb-team .fusion-row .hb-person-col {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 22px !important;
	}
}

@media only screen and (max-width: 800px) {
	.hb-why-card {
		margin-bottom: 20px !important;
	}
}

/* --------------------------------------------------------------------------
   5. ОБУЧЕНИЕ — изображение вляво, спецификации вдясно
   -------------------------------------------------------------------------- */

.hb-training-media .fusion-imageframe,
.hb-training-media .fusion-imageframe a {
	display: block;
	width: 100%;
}

.hb-training-image img {
	border-radius: 12px;
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	box-shadow: var(--hb-shadow);
}

@media only screen and (max-width: 800px) {
	.hb-training-image img {
		height: 240px;
	}
}

.hb-training-body .hb-subhead p {
	margin-bottom: 0;
}

.hb-specs {
	margin-top: 28px;
	margin-bottom: 30px;
}

.hb-specs dl {
	margin: 0;
	border-top: 1px solid var(--hb-border);
}

.hb-specs dt {
	float: left;
	clear: left;
	width: 150px;
	padding: 14px 0;
	font-family: var(--hb-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hb-teal);
	line-height: 1.5;
}

.hb-specs dd {
	margin: 0 0 0 150px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hb-border);
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--hb-body);
}

@media only screen and (max-width: 800px) {
	.hb-specs dt {
		float: none;
		width: auto;
		padding-bottom: 2px;
	}

	.hb-specs dd {
		margin-left: 0;
		padding-top: 0;
	}

	.hb-training-media {
		margin-bottom: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   5б. ОБУЧЕНИЕ — подготовка за carousel (Фаза 20.4)

   Едно обучение = един `.hb-training-item` (вложен ред на Fusion със снимка и
   текст). Докато обучението е ЕДНО, тук няма какво да важи: класът
   `.hb-carousel-on` се слага само от `training-carousel.js` и само когато
   намери 2 или повече блока. Тоест секцията изглежда точно както преди, а
   стрелки и точки се появяват в деня, в който клиентът добави второ обучение.

   Затова всички правила отдолу са под `.hb-carousel-on` — нито едно от тях не
   се прилага при сегашното състояние на страницата.
   -------------------------------------------------------------------------- */

.hb-training-track .fusion-column-wrapper {
	position: relative;
}

/* Разстоянието между две обучения важи само когато СА повече от едно и още не е
   пуснат каруселът (например при изключен JavaScript) — тогава блоковете се
   изреждат един под друг и трябва да дишат. */
.hb-training-item + .hb-training-item {
	margin-top: 46px;
}

.hb-carousel-on .hb-training-item + .hb-training-item {
	margin-top: 0;
}

/* Показва се само активният слайд. `display: none`, а не прозрачност — иначе
   скритите слайдове държат височина и секцията става три пъти по-висока. */
.hb-carousel-on .hb-training-item {
	display: none;
}

.hb-carousel-on .hb-training-item-active {
	display: flex;
}

.hb-carousel-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
}

.hb-carousel-arrow {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 1px solid var(--hb-border);
	border-radius: 50%;
	background: var(--hb-surface);
	color: var(--hb-teal);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hb-carousel-arrow:hover,
.hb-carousel-arrow:focus-visible {
	background: var(--hb-teal);
	border-color: var(--hb-teal);
	color: #fff;
}

.hb-carousel-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Точката е 10 px, но целта за пръст е 24 px — WCAG 2.5.8. Затова бутонът е
   голям и прозрачен, а видимата точка е негов псевдоелемент. */
.hb-carousel-dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hb-carousel-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c9d3d1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.hb-carousel-dot-active::before {
	background: var(--hb-teal);
	transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
	.hb-carousel-arrow,
	.hb-carousel-dot::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   6. ЕКИП — fusion_person без снимки (реалните чакат клиента)
   -------------------------------------------------------------------------- */

.hb-person-col .fusion-column-wrapper {
	border-radius: 12px;
	overflow: hidden;
}

/* Секцията с ЕДИН специалист (Фаза 19 — д-р Спасова и Марио Васев вече не
   работят в центъра). Картата остава 1_3, за да се върне решетката с чисто
   копиране, когато клиентът даде новите хора — маха се само класът
   `hb-team-solo` от контейнера и `last="true"` от колоната.

   Картата стои ВЛЯВО, не центрирана: така се чете като първата от редица,
   която ще се напълни с новите хора, а и се подрежда под заглавието на
   секцията, което също е ляво подравнено. (До 12.08.2026 тук стоеше
   `margin-left: auto`, което я центрираше и я откъсваше от заглавието.)
   `.fusion-row` е flex, затова само дясното автоматично поле е нужно. */
.hb-team-solo .fusion-row .hb-person-col {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.hb-person {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	margin: 0 !important;
}

/* Мястото за снимка, когато снимка НЯМА.

   Фаза 20.5: д-р Русев вече има истинска снимка (прикачен файл 6892), затова
   блокът се рисува само за карти БЕЗ снимка — иначе излизаше и плейсхолдърът, и
   снимката, една под друга. `:has()` пита за обвивката, която Fusion слага около
   изображението (`person-shortcode-image-wrapper`), и се появява само когато
   `picture` е попълнено.

   Блокът остава, защото решетката ще се пълни с новите хора на клиента и не
   всеки ще дойде със снимка от първия път. */
.hb-person:not(:has(.person-shortcode-image-wrapper))::before {
	content: "";
	display: block;
	height: 180px;
	flex: 0 0 auto;
	background-color: var(--hb-surface-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 24 24' fill='none' stroke='%237fb3ab' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.9 3.4-6 7.5-6s7.5 2.1 7.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Истинската снимка заема ТОЧНО мястото на плейсхолдъра — 180 px, цялата ширина
   на картата. Така картите с и без снимка се подреждат на един ред, без да си
   разместват заглавията (Фаза 20.5).

   `object-fit: cover` реже, вместо да деформира. `object-position` е малко над
   центъра, защото при портрет центърът на кадъра пада в гърдите. */
.hb-person .person-shortcode-image-wrapper {
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	line-height: 0;
}

.hb-person .person-image-container,
.hb-person .person-shortcode-image-wrapper a {
	display: block;
	width: 100%;
}

.hb-person .person-shortcode-image-wrapper img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: center 22%;
}

.hb-person .person-desc {
	padding: 26px 26px 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.hb-person .person-author {
	border: 0;
	padding: 0;
	margin: 0 0 12px 0;
}

.hb-person .person-author-wrapper {
	display: block;
}

.hb-person .person-name {
	display: block;
	font-family: var(--hb-font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-ink);
}

.hb-person .person-title {
	display: block;
	margin-top: 4px;
	font-family: var(--hb-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hb-teal);
}

.hb-person .person-content {
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--hb-body);
	flex: 1 1 auto;
}

.hb-person .person-content p:last-child {
	margin-bottom: 0;
}

.hb-person-links {
	display: block;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--hb-border);
}

.hb-person-links a {
	font-family: var(--hb-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--hb-teal);
	text-decoration: none;
	margin-right: 18px;
	border-bottom: 1px solid transparent;
}

.hb-person-links a:hover {
	border-bottom-color: currentColor;
}

/* Незапълнените профили се маркират видимо. */
.hb-person-empty .person-name,
.hb-person-empty .person-title {
	color: #8a5c00;
}

.hb-person-empty .person-name {
	border-bottom: 1px dashed #d08b00;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   7. ОТЗИВИ — табове „пациенти“ / „курсисти“
   -------------------------------------------------------------------------- */

.hb-tabs {
	margin-top: 34px;
	border: 0 !important;
}

.hb-tabs .nav-tabs {
	border: 0 !important;
	background: transparent !important;
	display: flex;
	gap: 8px;
	margin-bottom: 30px;
}

.hb-tabs .nav-tabs > li {
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}

.hb-tabs .nav-tabs > li > a {
	border: 1px solid var(--hb-border) !important;
	border-radius: var(--hb-radius-pill) !important;
	background: #fff !important;
	padding: 11px 24px !important;
	font-family: var(--hb-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--hb-body) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hb-tabs .nav-tabs > li.active > a,
.hb-tabs .nav-tabs > li > a:hover {
	background: var(--hb-teal) !important;
	border-color: var(--hb-teal) !important;
	color: #fff !important;
}

.hb-tabs .tab-content,
.hb-tabs .tab-pane {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Каруселът с отзиви. Макетът показва две карти една до друга; Fusion Builder
   3.0.2 предлага само карусел, затова тук е карусел с точки за навигация.
   Реалната структура на design="clean" е:
     .review > .testimonial-thumbnail + blockquote > q + .author */
.hb-testimonial-slider .review {
	background: #fff !important;
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	padding: 32px 34px 28px !important;
	box-sizing: border-box;
	max-width: 100%;
	box-shadow: var(--hb-shadow);
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-areas:
		"quote  quote"
		"avatar author";
	column-gap: 14px;
	align-items: center;
}

.hb-testimonial-slider .review blockquote {
	grid-area: quote;
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 22px 0 !important;
	margin: 0 0 20px 0 !important;
	border-bottom: 1px solid var(--hb-border) !important;
}

.hb-testimonial-slider .review blockquote q,
.hb-testimonial-slider .review blockquote p {
	font-family: var(--hb-font-body) !important;
	font-size: 16px !important;
	font-style: italic;
	line-height: 1.8 !important;
	color: var(--hb-body) !important;
	text-align: left !important;
	display: block;
}

.hb-testimonial-slider .review .testimonial-thumbnail {
	grid-area: avatar;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden;
	background: var(--hb-surface-tint) !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hb-testimonial-slider .review .testimonial-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Фаза 20.6 — неутрални инициали вместо силуета на Avada.

   Реални снимки на пациентите няма и съгласие няма, затова по документа на
   клиента се прилага втората възможност. В шорткодовете `avatar` е `none`, тоест
   Avada не рисува нищо; кръгчето се вмъква от
   `hb_child_testimonial_initials()` в `functions.php`.

   Заема СЪЩАТА клетка от решетката, която заемаше силуетът — оформлението на
   картата не се променя, а ако някога дойдат истински снимки със съгласие,
   `avatar="image"` връща `.testimonial-thumbnail` на същото място.

   Цветовете са от дизайн системата, не са нови: светъл тюркоазен кръг и
   петролено зелен текст. */
.hb-testimonial-slider .review .hb-initials {
	grid-area: avatar;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hb-surface-tint);
	color: var(--hb-teal);
	font-family: var(--hb-font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Едно име може да даде една буква („Камелия“) — кръгът остава същият. */
	flex: 0 0 auto;
	user-select: none;
}

.hb-testimonial-slider .review .author {
	grid-area: author;
	text-align: left !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--hb-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--hb-ink) !important;
}

.hb-testimonial-slider .review .author .company-name {
	display: block;
	font-weight: 400;
	font-size: 13px;
	color: var(--hb-muted) !important;
}

.hb-testimonial-slider .testimonial-pagination {
	margin-top: 22px;
	text-align: center;
}

.hb-testimonial-slider .testimonial-pagination a {
	background: #cfd6d2 !important;
	border-color: #cfd6d2 !important;
}

.hb-testimonial-slider .testimonial-pagination a.activeSlide {
	background: var(--hb-teal) !important;
	border-color: var(--hb-teal) !important;
}

.hb-testimonials-note {
	margin-top: 26px;
}

.hb-empty-tab p {
	font-family: var(--hb-font-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--hb-body);
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   8./9. ПОЛЕЗНИ СТАТИИ и НОВИНИ И СЪБИТИЯ — fusion_blog, grid
   -------------------------------------------------------------------------- */

/* Avada подрежда grid блога с Isotope (абсолютно позициониране от JS).
   Тук се заменя с CSS grid — не зависи от JS, не се чупи при бавно зареждащи
   се изображения и дава еднакво високи карти. */
/* Avada добавя inline `margin: -15px` през собствен <style> със селектор
   .fusion-blog-shortcode-N; оттам двойният клас, за да бие по специфичност. */
.hb-blog-grid.hb-blog-grid .fusion-posts-container,
.hb-blog-grid .fusion-posts-container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	height: auto !important;
	position: static !important;
	margin: 0 !important;
	max-width: 100%;
	box-sizing: border-box;
}

.hb-blog-grid .fusion-post-grid {
	box-sizing: border-box;
	position: static !important;
	width: auto !important;
	left: auto !important;
	top: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

@media only screen and (max-width: 1000px) {
	.hb-blog-grid.hb-blog-grid .fusion-posts-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}

@media only screen and (max-width: 640px) {
	.hb-blog-grid.hb-blog-grid .fusion-posts-container {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hb-blog-grid .fusion-post-wrapper {
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--hb-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.hb-blog-grid .fusion-image-wrapper,
.hb-blog-grid .fusion-post-slideshow {
	margin: 0 !important;
	border-radius: 0 !important;
}

.hb-blog-grid .fusion-image-wrapper img,
.hb-blog-grid .fusion-post-slideshow img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
}

.hb-blog-grid .fusion-post-content-wrapper {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.hb-blog-grid .fusion-meta-info {
	border: 0 !important;
	padding: 0 0 10px 0 !important;
	margin: 0 !important;
	font-family: var(--hb-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hb-teal);
}

.hb-blog-grid .fusion-meta-info a {
	color: var(--hb-teal);
}

.hb-blog-grid .blog-shortcode-post-title,
.hb-blog-grid .entry-title {
	font-family: var(--hb-font-head) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 0 10px 0 !important;
}

.hb-blog-grid .blog-shortcode-post-title a,
.hb-blog-grid .entry-title a {
	color: var(--hb-ink) !important;
}

.hb-blog-grid .blog-shortcode-post-title a:hover,
.hb-blog-grid .entry-title a:hover {
	color: var(--hb-teal) !important;
}

.hb-blog-grid .fusion-post-content,
.hb-blog-grid .fusion-post-content p {
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--hb-body);
}

.hb-blog-grid .fusion-read-more {
	font-family: var(--hb-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--hb-teal) !important;
	white-space: nowrap;
	text-transform: none !important;
}

/* Чертичката под подзаглавието не бива да опира в решетката отдолу. */
.hb-articles .hb-rule,
.hb-news .hb-rule,
.hb-testimonials .hb-rule {
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   10. ЧЗВ — акордеон
   -------------------------------------------------------------------------- */

.hb-accordion {
	margin-top: 40px;
	max-width: 900px;
}

.hb-accordion .fusion-panel {
	border: 0 !important;
	border-bottom: 1px solid var(--hb-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.hb-accordion .panel-title {
	margin: 0 !important;
}

.hb-accordion .panel-title a {
	display: block;
	padding: 20px 40px 20px 0 !important;
	font-family: var(--hb-font-head);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hb-ink) !important;
	position: relative;
}

.hb-accordion .panel-title a:hover,
.hb-accordion .panel-title.active a,
.hb-accordion .fusion-toggle-boxed .panel-title a[aria-expanded="true"] {
	color: var(--hb-teal) !important;
}

.hb-accordion .fusion-toggle-icon-wrapper {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.hb-accordion .panel-body,
.hb-accordion .fusion-panel .panel-body {
	padding: 0 40px 22px 0 !important;
	border: 0 !important;
	font-family: var(--hb-font-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--hb-body);
}

.hb-accordion .panel-body a {
	color: var(--hb-teal);
	border-bottom: 1px solid transparent;
}

.hb-accordion .panel-body a:hover {
	border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   11. КОНТАКТИ — данни вляво, форма вдясно
   -------------------------------------------------------------------------- */

.hb-contact-title h3 {
	font-family: var(--hb-font-head) !important;
	font-size: 21px !important;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hb-ink) !important;
	margin: 0;
}

.hb-contact-lead p {
	font-family: var(--hb-font-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--hb-body);
	margin-bottom: 26px;
}

.hb-contact-list ul {
	list-style: none;
	margin: 0 0 26px 0;
	padding: 0;
}

.hb-contact-list .hb-ci {
	position: relative;
	padding-left: 58px;
	margin-bottom: 18px;
	font-family: var(--hb-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--hb-ink);
}

.hb-contact-list .hb-ci::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background-color: var(--hb-surface-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
}

.hb-contact-list .hb-ci-phone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009584' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.hb-contact-list .hb-ci-mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009584' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.hb-contact-list .hb-ci-pin::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009584' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.hb-contact-list .hb-ci-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hb-muted);
	margin-bottom: 2px;
}

.hb-contact-list .hb-ci a {
	color: var(--hb-ink);
	border-bottom: 1px solid transparent;
}

.hb-contact-list .hb-ci a:hover {
	color: var(--hb-teal);
	border-bottom-color: currentColor;
}

/* Колоната е content_layout="row", за да застанат двата бутона един до друг. */
.hb-contact-info .fusion-content-layout-row > .fusion-title,
.hb-contact-info .fusion-content-layout-row > .fusion-text {
	flex: 0 0 100%;
	width: 100%;
}

.hb-contact-info .fusion-content-layout-row > div:has(> .fusion-button) {
	flex: 0 0 auto;
}

.hb-contact-info .hb-medical-note {
	margin-top: 26px;
}

/* Падащото меню на Formidable има собствена височина, която реже текста. */
.hb-form select {
	height: auto !important;
	min-height: 44px;
	line-height: 1.4 !important;
	appearance: auto;
}

/* Formidable формата */
.hb-form .frm_forms,
.hb-form .with_frm_style {
	margin: 0;
}

.hb-form .frm_form_field > label,
.hb-form .frm_primary_label {
	font-family: var(--hb-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hb-ink) !important;
	margin-bottom: 6px !important;
}

.hb-form input[type="text"],
.hb-form input[type="email"],
.hb-form input[type="tel"],
.hb-form input[type="date"],
.hb-form input[type="time"],
.hb-form select,
.hb-form textarea {
	font-family: var(--hb-font-body) !important;
	font-size: 15px !important;
	border: 1px solid var(--hb-border) !important;
	border-radius: var(--hb-radius-sm) !important;
	padding: 11px 14px !important;
	background: #fff !important;
	color: var(--hb-ink) !important;
	box-shadow: none !important;
	/* Avada има глобална настройка `form_input_height = 29px` и я изписва като
	   `height` върху `input[type=text]`, `[type=email]` и `textarea` — но НЕ
	   върху `[type=tel]` и `select`. С `box-sizing: border-box` фиксираната
	   височина побеждава отстъпа отгоре: полетата с тип text/email оставаха
	   32 px, а „Телефон“ и падащото меню, до които правилото не стига, ставаха
	   43,5 / 44 px от същия този отстъп.

	   На началната „Име“ и „Телефон“ са В ЕДИН РЕД — измерено 32 px до 43,5 px.
	   Височината се връща на съдържанието, за да важи отстъпът, който тази
	   дизайн система вече е избрала, и всички полета да са еднакви. */
	height: auto !important;
}

.hb-form input:focus,
.hb-form select:focus,
.hb-form textarea:focus {
	border-color: var(--hb-teal) !important;
	outline: none !important;
}

.hb-form .frm_submit .frm_button_submit,
.hb-form .frm_submit input[type="submit"],
.hb-form button[type="submit"] {
	background: var(--hb-grad) !important;
	border: 0 !important;
	border-radius: var(--hb-radius-sm) !important;
	color: #fff !important;
	font-family: var(--hb-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 15px 30px !important;
	cursor: pointer;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 3px 12px rgba(123, 179, 177, 0.32);
}

.hb-form .frm_submit input[type="submit"]:hover,
.hb-form button[type="submit"]:hover {
	filter: brightness(1.05);
	box-shadow: 0 8px 22px rgba(123, 179, 177, 0.42);
}

.hb-form .frm_required {
	color: #c0392b;
}

.hb-form .frm_checkbox label {
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.6;
	color: var(--hb-body) !important;
}

.hb-form .frm_checkbox a {
	color: var(--hb-teal);
	text-decoration: underline;
}

@media only screen and (max-width: 800px) {
	.hb-contact-info {
		margin-bottom: 34px !important;
	}
}

/* --------------------------------------------------------------------------
   Бутони — общи за цялата страница.
   Avada рисува вертикален градиент; макетът иска брандовия хоризонтален.
   -------------------------------------------------------------------------- */

.fusion-button.hb-btn-primary,
.fusion-button.hb-btn-primary:hover,
.fusion-button.hb-btn-primary:focus,
.fusion-button.hb-btn-primary:active {
	background: var(--hb-grad) !important;
	background-image: var(--hb-grad) !important;
	border: 0 !important;
	border-radius: var(--hb-radius-sm) !important;
	padding: 16px 26px;
	box-shadow: 0 3px 12px rgba(123, 179, 177, 0.32);
	transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.fusion-button.hb-btn-primary:hover {
	filter: brightness(1.05);
	box-shadow: 0 8px 22px rgba(123, 179, 177, 0.42);
	transform: translateY(-1px);
}

.fusion-button.hb-btn-primary .fusion-button-text {
	color: #fff !important;
	font-family: var(--hb-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.fusion-button.hb-btn-outline {
	background: transparent !important;
	background-image: none !important;
	border: 2px solid var(--hb-teal) !important;
	border-radius: var(--hb-radius-sm) !important;
	padding: 14px 24px;
	transition: background-color 0.25s ease;
}

.fusion-button.hb-btn-outline .fusion-button-text {
	color: var(--hb-teal) !important;
	font-family: var(--hb-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: color 0.25s ease;
}

.fusion-button.hb-btn-outline:hover {
	background: var(--hb-teal) !important;
	background-image: none !important;
}

.fusion-button.hb-btn-outline:hover .fusion-button-text {
	color: #fff !important;
}

/* ==========================================================================
   МОБИЛЕН ИЗГЛЕД — Фаза 17

   Всичко тук е в @media заявка и не докосва десктопа. Проверките от Фази
   12–16 (преливане, счупени снимки, дребен текст, цели за пръст) минаваха и
   преди тези правила — те мерят механика, не четимост. Поправките по-долу са
   от визуален оглед по парчета при 375, 414 и 768 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. СТРАНИЧЕН ОТСТЪП НА СЕКЦИИТЕ — най-тежкият дефект.

   Единайсетте контейнера на началната страница са записани с
   `padding_left="0px" padding_right="0px"`. На десктоп това не личи: Avada
   ограничава `.fusion-row` до 1216,8 px и го центрира, така че страничният
   въздух идва от реда, не от контейнера. Под тази ширина обаче редът заема
   целия екран и текстът ляга направо върху ръба — измерено **0 px отстъп в
   единайсетте секции при 375, 768 и 1024 px**. Оттам идва усещането за
   „текст на блокове“: заглавия, абзаци, акордеон и медицинската бележка
   опират и в двата ръба.

   Вътрешните страници не са засегнати — там контейнерите нямат изрично
   нулиране и получават 30 px от Avada. Затова тук се връща същата стойност,
   а не някаква нова: сайтът трябва да е с един отстъп навсякъде.

   Прагът е 1024 px, защото това е ширината, до която сме проверявали.
   Между 1025 и 1216 px дефектът остава — виж docs/build-status.md, Фаза 17.

   Без `!important`, но със стъпало по специфичност: Avada изписва нулата на два
   реда — веднъж като `.fusion-builder-row-N` (един клас) и веднъж като
   `.fusion-body .fusion-flex-container.fusion-builder-row-N` (три класа), при
   това в inline `<style>` след стиловете на темата. Затова първите два
   селектора тук са с четири класа, а вторите два покриват контейнерите, които
   не са flex.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	.fusion-body .fusion-fullwidth.fusion-flex-container.hb-section,
	.fusion-body .fusion-fullwidth.hb-section {
		padding-left: 30px;
		padding-right: 30px;
	}

	/* Картите вече носят собствен вътрешен отстъп от 32 px. С новите 30 px
	   отвън текстът в тях остава 251 px — колкото е и на /uslugi/, където
	   четимостта е добра. */

	/* Изключение: hero-ът. Там съдържанието е в бяла карта със собствен
	   отстъп от 26 px. При пълните 30 px отгоре заглавието остава 263 px и
	   се пренася на шест реда. 16 px стигат картата да не опира в ръба, без
	   да ядат от заглавието — и са с 1 px повече от отрицателния margin на
	   `.fusion-row` при 768 px (15,36 px), така че редът остава в секцията. */
	.fusion-body .fusion-fullwidth.fusion-flex-container.hb-hero,
	.fusion-body .fusion-fullwidth.hb-hero {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* --------------------------------------------------------------------------
   2. БУТОНИТЕ — на цяла ширина.

   При 375 px най-дългите етикети („Научете повече за консултациите“,
   „Прочетете подробно за всеки етап“) не се събират на един ред и Avada ги
   пренася вътре в кутия по мярка на текста. Получава се центриран правоъгълник
   на два реда до други бутони с различна ширина — редицата изглежда случайна.

   На телефон бутоните стават на цяла ширина. Това е и обичайното мобилно
   поведение, и решава три неща наведнъж: няма разнобой в ширините, дългият
   етикет има място, а целта за пръст става цялата ширина на екрана.

   Обхватът е изрично нашите секции. `.fusion-button` носи и лентата за
   бисквитки на Avada (`.fusion-privacy-bar-acceptance`) — тя не бива да се
   разтяга.

   `!important` при margin: Avada изписва отстъпите на бутона в inline `style`
   (`margin-right:18px`), който иначе би оставил бутона по-тесен от реда.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-hero .fusion-button,
	.hb-section .fusion-button {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-right: 0 !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}


	/* Стрелката вдясно от етикета не бива да се лепи за него. */
	.hb-hero .fusion-button > i,
	.hb-section .fusion-button > i {
		margin-left: 10px;
	}

	/* Обвивката на бутона е div без клас — при `flex: 0 0 auto` (правилото за
	   „бутон и връзка на един ред“) тя се свива по съдържанието и 100 % на
	   бутона се мери спрямо нея. На телефон двата елемента и без това са един
	   под друг.

	   ВАЖНО защо `width`, а не `flex-basis: 100%`. В контейнер с
	   `flex-direction: column` главната ос е вертикалната и `flex-basis: 100%`
	   значи 100 % от ВИСОЧИНАТА — обвивката на бутона става висока колкото
	   цялата колона и изхвърля следващите елементи върху съседната секция.
	   (Същият капан е описан и в uslugi.css при подравняването на бутоните.)
	   Класът `fusion-content-layout-row` не помага да се различат двата случая:
	   uslugi.css обръща някои от тези обвивки на колона с `!important`, а
	   класът остава „row“.

	   `width: 100%` работи и в двете посоки: в колона е напречната ос, а в
	   ред кара елемента да заеме целия ред и следващият се пренася. Проверява
	   се от `_local/qa-overlap.js`. */
	.hb-section .fusion-column-wrapper > div:has(> .fusion-button),
	.hb-hero .fusion-column-wrapper > div:has(> .fusion-button) {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   3. ТЕКСТОВАТА ВРЪЗКА ДО БУТОНА (`.hb-link-arrow`).

   На десктоп тя стои вдясно от бутона, затова `.hb-card .hb-link-arrow` има
   `padding-left: 0 !important` — иначе би получила вътрешния отстъп на картата
   втори път. На телефон обаче двата елемента са един под друг и връзката
   оставаше изнесена чак до ръба на картата, 32 px вляво от бутона, при това
   залепена за него.

   Тук отстъпът се връща и се добавя въздух над връзката. Целта за пръст от
   44 px (style.css, Фаза 15) остава — отрицателните ѝ margin-и се компенсират
   от `margin-top`.
   -------------------------------------------------------------------------- */

/* Прагът е 800 px, не 640. При 768 px двете карти още стоят една до друга и
   всяка е ~325 px, тоест по-тясна, отколкото при 375 px в една колона. Точно
   там най-дългият етикет („Научете повече за консултациите“) излизаше извън
   картата и `overflow: hidden` на обвивката го отрязваше по средата.
   Поправката от Фаза 12 покриваше само ≤ 640 px и този случай ѝ убягна. */
@media only screen and (max-width: 800px) {
	.hb-card .fusion-column-wrapper > div:has(> .fusion-button) {
		padding-right: 32px;
		width: 100%;
		max-width: 100%;
	}

	.hb-card .fusion-button {
		display: flex;
		width: 100%;
		max-width: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-right: 0 !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}

	.hb-card .fusion-button > i {
		margin-left: 10px;
	}

	.hb-card .hb-link-arrow {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.hb-card .hb-link-arrow p,
	.hb-section .hb-link-arrow p {
		margin-top: 22px;
	}

	/* Два бутона един под друг се допираха: Avada изписва нулеви вертикални
	   отстъпи в inline `style`, а на десктоп разстоянието идва от
	   `margin-right`, който тук отпада.

	   Отстъпът е ОТДОЛУ, а не отгоре на втория. Между 641 и 800 px двата
	   бутона понякога още стоят на един ред — горен отстъп само на втория би
	   ги разместил по вертикала. Долен отстъп на двата не проличава. */
	.hb-hero .fusion-column-wrapper > div:has(> .fusion-button),
	.hb-section .fusion-column-wrapper > div:has(> .fusion-button) {
		margin-bottom: 12px;
	}
}

/* --------------------------------------------------------------------------
   4. „КАК ПРОТИЧА КОНСУЛТАЦИЯТА“ — четирите стъпки.

   На телефон timeline-ът се разпада на четири блока: кръгче с номер само на
   един ред, под него заглавие, под него текст, после 26 px празно до
   следващото кръгче. Няма линия, която да ги свързва (тя се крие при 800 px,
   защото е хоризонтална), и последователността не се чете като
   последователност — това е част от „разбърканата подредба“.

   Тук стъпката става ред: номер вляво, заглавие вдясно от него, текстът
   подравнен под заглавието, и отвесна линия, която слиза до следващия номер.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	/* Avada дава на `.fusion-content-boxes` симетрични отрицателни margin-и от
	   15 px и връща същите като padding на колоните. При четири колони в
	   редица това е правилно, но на телефон колоната е една и резултатът е,
	   че кръгчетата с номера увисват на самия ръб на екрана (измерено: иконата
	   започва на x = 0 при 30 px отстъп на секцията), а текстът е навътре.
	   На телефон и двете се неутрализират. */
	.hb-timeline.fusion-content-boxes {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.hb-timeline .content-box-column {
		position: relative;
		padding-left: 0 !important;
		padding-right: 0 !important;
		/* `!important`: Avada задава 55 px през генерираното за страницата CSS
		   (`.fusion-content-boxes-1 .content-box-column`), което се изписва
		   след стиловете на темата и печели при равна специфичност. */
		margin-bottom: 0 !important;
		padding-bottom: 30px;
	}

	.hb-timeline .content-box-column:last-child {
		padding-bottom: 0;
	}

	/* Линията тръгва под кръгчето (40 px високо, центърът му е на 20 px от
	   левия ръб на колоната) и стига до следващото. */
	.hb-timeline .content-box-column:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 19px;
		top: 46px;
		bottom: 4px;
		width: 2px;
		background: #dfe3e0;
		z-index: 0;
	}

	.hb-timeline .heading {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 8px;
	}

	.hb-timeline .heading .icon {
		flex: 0 0 auto;
	}

	.hb-timeline .content-box-heading {
		margin: 0 !important;
	}

	/* Текстът се подравнява под заглавието: 40 px кръгче + 14 px разстояние. */
	.hb-timeline .content-container {
		padding-left: 54px;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   5. ОТЗИВИТЕ — курсив с разредка при 16 px/1,8 се чете трудно на тесен екран.
   Размерът и междуредието слизат, курсивът остава (той разделя цитата от
   останалия текст). Вътрешният отстъп от 34 px също е много при 315 px карта.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-testimonial-slider .review {
		padding: 26px 22px 22px !important;
	}

	.hb-testimonial-slider .review blockquote q,
	.hb-testimonial-slider .review blockquote p {
		font-size: 15px !important;
		line-height: 1.65 !important;
		letter-spacing: 0 !important;
	}

	/* Avada превръща табовете в акордеон на телефон: заглавието на всеки таб
	   застава над своя панел. Хапчетата обаче остават широки колкото текста и
	   изглеждат като разхвърляни етикети, а не като превключватели. Тук стават
	   ленти на цяла ширина — същото поведение, четимо оформление. */
	.hb-tabs .nav-tabs > li {
		display: block;
		width: 100%;
	}

	.hb-tabs .nav-tabs > li > a {
		display: block;
		width: 100%;
		text-align: left;
		border-radius: var(--hb-radius-sm) !important;
		padding: 14px 18px !important;
	}
}

/* --------------------------------------------------------------------------
   6. ДЪЛГИТЕ ТЕКСТОВЕ В КАРТИТЕ — абзаците се нуждаят от повече въздух
   помежду си, отколкото вътре в себе си. Иначе три абзаца изглеждат като
   един блок и точно това клиентът нарече „стена от текст“.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-card .hb-card-body p + p {
		margin-top: 18px;
	}
}

/* --------------------------------------------------------------------------
   7. ФАЗА 22 — линк към „За центъра“ под „Защо ние“
   -------------------------------------------------------------------------- */

.hb-why-cta {
	margin-top: 10px !important;
	text-align: center;
}

/* Колоната идва след четирите карти, а те носят собствен долен отстъп на
   таблет и телефон. Без нулиране бутонът увисва твърде ниско. */
@media only screen and (max-width: 1000px) {
	.hb-why-cta {
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   8. ФАЗА 22 — трите нива на обучение
   Три карти под „Представено обучение“. Извън `hb-training-track`, за да не
   ги брои `training-carousel.js` за слайдове.
   -------------------------------------------------------------------------- */

.hb-levels {
	margin-top: 46px !important;
}

.hb-levels .hb-level-card {
	background: var(--hb-surface);
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	padding: 26px 24px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.hb-levels .hb-level-card .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: none !important;
	padding: 0 !important;
	/* Fusion изписва улея на вложената колона като `margin-left/right: 5.76%`
	   в <style> блок в тялото на страницата. Върху обвивката това значи ~20 px
	   вляво, при това БЕЗ обвивката да се свие — тя остава широка колкото
	   картата и излиза вдясно извън нейния отстъп. Резултатът: текстът стои на
	   45 px от левия ръб и на 5 px от десния, а картата е с 24 px и от двете.
	   Улеят вече идва от `column-gap` на реда, затова тук се нулира. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	/* ⚠️ Никакъв flex-basis тук. В колонна обвивка `flex-basis: 100%` значи
	   ВИСОЧИНА, не ширина — това е капанът от Фаза 19, който дава застъпен
	   текст и минава през всички стандартни проверки. */
}

.hb-levels .hb-level-title h3 {
	font-family: var(--hb-font-head);
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-ink);
	margin: 0 0 12px 0;
}

.hb-levels .hb-level-body p {
	font-family: var(--hb-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--hb-body);
	margin: 0;
}

/* Бутонът се притиска към дъното, за да са на една линия и трите карти,
   независимо че редовете им текст са с различна дължина. */
.hb-levels .hb-level-card .fusion-button {
	margin-top: auto !important;
	align-self: flex-start;
}

.hb-levels .hb-level-card > .fusion-column-wrapper > div:has(> .fusion-button) {
	margin-top: auto;
	padding-top: 20px;
}

@media only screen and (max-width: 1000px) {
	.hb-levels {
		margin-top: 32px !important;
	}

	.hb-levels .hb-level-card {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 18px !important;
	}
}

/* Просветът между трите карти.
   `spacing="0"` на всяка `fusion_builder_column_inner` в шорткода изключва
   улея на Avada, а за десктоп разстояние никога не е било писано — оттам
   слепените карти. Улеят се дава тук, на реда, а не с margin по картите.

   ⚠️ `flex: 1 1 0` е задължително вместо фиксираните 33.33 % от Fusion:
   три пъти 33.33 % плюс двата улея дават 100 % + 36 px и картите преливат. */
.hb-levels .fusion-builder-row-inner {
	display: flex;
	column-gap: 18px;
}

.hb-levels .hb-level-card {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
}

@media only screen and (max-width: 640px) {
	.hb-levels .fusion-builder-row-inner {
		flex-wrap: wrap;
		column-gap: 0;
	}

	.hb-levels .hb-level-card {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   9. ФАЗА 22 — отзиви по три на екран, със стрелки

   `.review` ВЕЧЕ е готова карта от Фаза 20.6: `display: grid` с области
   „quote / avatar author“, бял фон, рамка, сянка и вътрешен отстъп. Тук НИЩО
   от това не се пипа — единственото, което трябва, е картата да стане елемент
   на подвижна лента с ширина 1/N от видимото поле.

   ⚠️ Първата реализация даде на `.review > div` и `blockquote` височина 100%
   „за да се изравнят картите“ и вместо това разтегна кръгчето с инициалите на
   1066 px — трите карти излязоха като тесни високи ивици. Изравняването идва
   от `align-items: stretch` на лентата, не от височини по деца. Това е същият
   капан, който вече беше документиран за `flex-basis: 100%`: в такъв контекст
   размерът значи ВИСОЧИНА.

   Всичко важи само под `.hb-tst-on`, който слага
   `assets/js/testimonials-carousel.js`. Не се ли зареди скриптът, Avada върти
   отзивите по един както преди.
   -------------------------------------------------------------------------- */

.hb-testimonial-slider.hb-tst-on {
	/* Чете се и от скрипта — стъпката на преместване е поле + една междина. */
	--hb-tst-gap: 24px;
}

.hb-testimonial-slider.hb-tst-on .hb-tst-viewport {
	overflow: hidden;
	width: 100%;
}

.hb-testimonial-slider.hb-tst-on .hb-reviews {
	display: flex;
	flex-wrap: nowrap;
	/* НЕ `stretch`: лентата е ЕДИН flex ред с всичките отзиви, затова stretch
	   изравнява по най-високия от ВСИЧКИ. Един отзив от два абзаца правеше
	   тринайсетте карти по 1173 px, включително страници, в които най-дългият
	   текст е три реда. Изравняването е по СТРАНИЦА и се прави от скрипта. */
	align-items: flex-start;
	gap: var(--hb-tst-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.45s ease;
	will-change: transform;
}

/* Avada скрива всеки отзив с `.fusion-testimonials .review { display: none }`.
   Тук се връща — и то на `grid`, което е стойността от Фаза 20.6, а не `block`. */
.hb-testimonial-slider.hb-tst-on .hb-reviews .review {
	display: grid;
	flex: 0 0 calc(
		(100% - (var(--hb-tst-cols, 3) - 1) * var(--hb-tst-gap)) / var(--hb-tst-cols, 3)
	);
	max-width: calc(
		(100% - (var(--hb-tst-cols, 3) - 1) * var(--hb-tst-gap)) / var(--hb-tst-cols, 3)
	);
	height: auto;
}

/* Вградената точкова навигация на Avada остава скрита — нашата я замества. */
.hb-testimonial-slider.hb-tst-on .testimonial-pagination {
	display: none;
}

.hb-tst-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}

.hb-tst-nav[hidden] {
	display: none;
}

@media only screen and (max-width: 640px) {
	.hb-testimonial-slider.hb-tst-on {
		--hb-tst-gap: 14px;
	}
}

/* Ограничение на височината на цитата.

   Измерено на живо: цитатите са от 303 до 1043 px, медиана 447. Без таван една
   страница на карусела става 1173 px висока — стрелките падат под екрана и
   „по три със стрелки“ на практика не работи. Затова цитатът се реже на 340 px
   (около 12 реда) с плавно затихване вместо рязък край.

   Текстът НЕ е съкращаван в базата — режещият слой е само визуален и е
   ограничен до карусела на началната страница. Пълните отзиви си остават
   такива, каквито клиентът ги е подал.

   Засегнати са 7 от 13 отзива. Ако клиентът предпочете пълния текст, това
   правило се маха и картите стават по-високи — нищо друго не зависи от него. */
.hb-testimonial-slider.hb-tst-on .hb-reviews .review blockquote {
	position: relative;
	max-height: 340px;
	overflow: hidden;
}

.hb-testimonial-slider.hb-tst-on .hb-reviews .review blockquote::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;   /* над разделителната черта, идваща от Фаза 20.6 */
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
	pointer-events: none;
}

/* На телефон картата е на цяла ширина и има място за повече текст. */
@media only screen and (max-width: 640px) {
	.hb-testimonial-slider.hb-tst-on .hb-reviews .review blockquote {
		max-height: 460px;
	}
}