/**
 * Building Portfolio Pro — публичен изглед
 * ===========================================================================
 *
 * Слой 3 от дизайн системата, за публичната част. Всички стойности идват от
 * семантичните токени в tokens.css; тук няма шестнайсетичен цвят.
 *
 * Представката .bpp- е задължителна: този CSS живее в чужда тема, до чужди
 * правила, и няма как да знае какви класове вече съществуват.
 */

/* ---------------------------------------------------------------------------
 * Иконки
 *
 * Спрайтът е Material Symbols с тегло 300 — при 400 иконките изглеждат
 * по-тежки от текста до тях. Размерът е в `em`, за да следват реда, в който
 * стоят, а цветът е `currentColor`: иконка, която не се оцветява с текста си,
 * рано или късно остава сива на тъмен фон.
 * ------------------------------------------------------------------------- */

.bpp-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: currentColor;
	vertical-align: -0.25em;
}

.bpp-icon--sm { width: 1em; height: 1em; }
.bpp-icon--lg { width: 1.6em; height: 1.6em; }


/* flow-root: долното поле на последния раздел остава вътре в страницата. Без
 * него то излиза под нея и там, между списъка и долната част на темата, стои
 * ивица в цвета на темата вместо във фона на страницата. */
.bpp-page {
	position: relative;
	display: flow-root;
	background: var(--bpp-page-bg);
	color: var(--bpp-ink);
	font-family: var(--bpp-font-sans);
	line-height: var(--bpp-leading-normal);
}

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

.bpp-page :focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 2px;
}

/* Фокус, преместен от скрипта след докосване или клик (unit.js, moveFocus):
 * мястото остава за четеца на екрана, рамката е само за клавиатурата.
 * Прозрачна, а не махната: в режим с висок контраст тя пак се рисува. */
:is(.bpp-page, .bpp-search) .bpp-focus-quiet:is(:focus, :focus-visible) { outline-color: transparent; }

/* ---------------------------------------------------------------------------
 * Ширината и рамката
 *
 * Една мярка за всички раздели: иначе краищата им се разминават с по няколко
 * пиксела и страницата изглежда сглобена от парчета. Облечен в темата,
 * плъгинът взима нейната ширина и краищата съвпадат с тези на заглавната
 * лента и на долната част на сайта.
 * ------------------------------------------------------------------------- */

.bpp-hero__inner,
.bpp-band__inner,
.bpp-intro,
.bpp-explore,
.bpp-listing,
.bpp-siteplan,
.bpp-complex-buildings,
.bpp-photos,
.bpp-progress {
	width: min(100% - 2 * var(--bpp-gutter), var(--bpp-content-max));
	margin-inline: auto;
}

/* Вертикалните линии на темата: тънка черта по двата ръба на съдържанието,
 * от горе до долу на страницата. На тесен екран лягат на ръба на прозореца,
 * както в темата. Токенът е прозрачен, докато графичните елементи не са
 * включени в настройките. */
.bpp-page::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	z-index: 1;
	box-sizing: border-box;
	width: min(100%, var(--bpp-content-max) + 2px);
	border-inline: 1px solid var(--bpp-frame-line);
	transform: translateX(-50%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Горе: заглавието и снимката
 *
 * Заглавието вляво, снимката вдясно — не текст върху снимка. Надпис върху
 * фотография се чете само там, където снимката е тъмна, а заглавната лента на
 * темата често лежи прозрачна върху горната част на страницата.
 * ------------------------------------------------------------------------- */

.bpp-hero {
	position: relative;
	background: var(--bpp-hero-bg);
	color: var(--bpp-ink);
}

.bpp-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--bpp-space-10);
}

.bpp-hero--plain .bpp-hero__inner { grid-template-columns: minmax(0, 1fr); }

/* Чертата стои по целия текст — от надписа над заглавието до бутоните — като
 * при заглавията на началната страница. Отстъпът отгоре и отдолу е поле, не
 * вътрешен отстъп: иначе чертата стърчи над текста и под него. */
.bpp-hero__text {
	align-self: center;
	min-width: 0;
	margin-block: var(--bpp-space-8) var(--bpp-space-12);
	padding-left: var(--bpp-mark-gap);
	border-left: var(--bpp-mark-width) solid var(--bpp-mark);
}

/* Снимката стига до долния ръб на лентата и до ръба на съдържанието. */
.bpp-hero__media {
	position: relative;
	min-width: 0;
	min-height: clamp(280px, 32vw, 540px);
}

.bpp-hero__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Акцентният квадрат на темата при долния ъгъл на снимката. */
.bpp-hero__media::after {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 0;
	width: clamp(40px, 5vw, 80px);
	aspect-ratio: 1;
	background: var(--bpp-deco);
}

@media (max-width: 900px) {
	.bpp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.bpp-hero__text { margin-block: var(--bpp-space-6) var(--bpp-space-8); }
	/* В една колона снимката е първа: сградата се познава по нея, преди
	 * името. */
	.bpp-hero__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
	.bpp-hero__media::after { display: none; }
}

.bpp-hero__title {
	margin: 0 0 var(--bpp-space-4);
	font-size: var(--bpp-display-size);
	font-weight: var(--bpp-display-weight);
	line-height: var(--bpp-display-leading);
	letter-spacing: var(--bpp-display-tracking);
	text-transform: var(--bpp-display-transform);
	text-wrap: balance;
	color: inherit;
}

/* Видът и кварталът стоят над заглавието, дребно — като „Изберете своя нов
 * дом“ над „Имоти в продажба“ на началната. Отговарят на „какво е това“,
 * преди името да е казало кое е. */
.bpp-hero__subtitle {
	margin: 0 0 var(--bpp-space-3);
	font-size: var(--bpp-eyebrow-size);
	font-weight: var(--bpp-weight-normal);
	line-height: var(--bpp-leading-normal);
	color: var(--bpp-ink-body);
}

.bpp-hero__address {
	margin: 0;
	font-size: var(--bpp-text-md);
	color: var(--bpp-ink-faint);
}

/* Сграда в комплекс. Обектът е едрият ред, сградата — редът под него:
 * „Морска панорама“ е името, което купувачът помни, „Сграда Б“ отговаря на
 * въпрос, който още не си е задал. Двете са в едно <h1>, затова се разделят
 * със стил, а не с отделни елементи в потока. */
.bpp-hero__title--nested {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-2);
}

/* Името на обекта носи размера на заглавието — то е заглавието. Тук стои само
 * за да се намери, когато някой го търси в стиловете. */
.bpp-hero__complex { display: block; }

.bpp-hero__building {
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-normal);
	line-height: var(--bpp-leading-tight);
	letter-spacing: normal;
	text-transform: none;
	color: var(--bpp-ink-muted);
}

.bpp-hero__to-complex {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	margin-top: var(--bpp-space-4);
	font-size: var(--bpp-text-md);
	color: var(--bpp-ink);
	text-decoration: none;
	border-bottom: 1px solid currentcolor;
	opacity: 0.85;
	transition: opacity var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-hero__to-complex:hover,
.bpp-hero__to-complex:focus-visible { opacity: 1; color: var(--bpp-ink); }

.bpp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpp-space-3);
	margin-top: var(--bpp-space-8);
}

/* Основният бутон горе: с „Черта при заглавията“ е в нейния цвят и почернява
 * при посочване (Support\Appearance пише --bpp-cta-*). Без черта токените ги
 * няма и бутонът е като всеки основен. Резервата е тук, в var(), а не в
 * tokens.css: псевдоним, обявен на :root, би взел цвета на бутона оттам, а не
 * онзи, който Appearance пише в корена на страницата. */
.bpp-hero__cta .bpp-button--primary,
.bpp-hero__cta .bpp-button--primary:focus {
	background: var(--bpp-cta-bg, var(--bpp-button-bg));
	border-color: var(--bpp-cta-bg, var(--bpp-button-edge));
	color: var(--bpp-cta-ink, var(--bpp-button-ink));
}

.bpp-hero__cta .bpp-button--primary:hover,
.bpp-hero__cta .bpp-button--primary:focus-visible {
	background: var(--bpp-cta-hover-bg, var(--bpp-button-hover-bg));
	border-color: var(--bpp-cta-hover-bg, var(--bpp-button-hover-bg));
	color: var(--bpp-cta-hover-ink, var(--bpp-button-hover-ink));
}

/* ---------------------------------------------------------------------------
 * Накратко: тъмната лента с числата
 *
 * Числата, заради които човек е дошъл — колко имота, колко свободни, колко
 * етажа, докъде е строежът — на една лента под заглавието, а не в колонка до
 * описанието, където стояха досега и се четяха след него.
 * ------------------------------------------------------------------------- */

.bpp-band {
	background: var(--bpp-band-outer);
	color: var(--bpp-band-ink);
}

/* Линиите на тъмната лента са светли: прозрачната черта на страницата върху
 * тъмен фон не се вижда. Сянка, не рамка — рамката би влязла в съдържанието
 * с един пиксел и линиите на лентата и на страницата биха се разминали. */
.bpp-band__inner {
	position: relative;
	padding: var(--bpp-space-6) var(--bpp-band-box-pad);
	background: var(--bpp-band-box);
	box-shadow: -1px 0 0 var(--bpp-band-line), 1px 0 0 var(--bpp-band-line);
}

/* Празната лента е само черта под горната част: без факти тя не е бокс,
 * а разделител — и стъпало под черта няма на какво да стъпи. */
.bpp-band--empty .bpp-band__inner { padding-block: var(--bpp-band-empty-pad); }

.bpp-band--empty .bpp-band__inner::after { display: none; }

/* Акцентният квадрат при десния ъгъл на лентата, както в страниците на
 * темата. */
.bpp-band__inner::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: clamp(40px, 5vw, 80px);
	aspect-ratio: 1;
	background: var(--bpp-deco);
}

.bpp-band__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--bpp-space-6) var(--bpp-space-8);
	margin: 0;
}

.bpp-band__fact { min-width: 0; margin: 0; }

/* Строежът е изречение, не число: иска повече място от броячите до него. */
.bpp-band__fact--wide { grid-column: span 2; }

/* На телефон колоните са две и тесни: изречението в едната от тях се чупеше на
 * четири реда. Цял ред под броячите. */
@media (max-width: 640px) {
	.bpp-band__fact--wide { grid-column: 1 / -1; }
}

.bpp-band__label {
	margin: 0 0 var(--bpp-space-2);
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-heading-weight);
}

.bpp-band__value {
	margin: 0;
	font-size: var(--bpp-text-2xl);
	font-weight: var(--bpp-display-weight);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.bpp-band__fact--accent .bpp-band__value { color: var(--bpp-band-accent); }

.bpp-band__value--text {
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-normal);
	line-height: var(--bpp-leading-normal);
}

.bpp-band__note {
	display: block;
	margin-top: var(--bpp-space-1);
	font-size: var(--bpp-text-sm);
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Описание
 * ------------------------------------------------------------------------- */

.bpp-intro { padding-block: var(--bpp-space-12); }

@media (max-width: 900px) {
	.bpp-intro { padding-block: var(--bpp-space-8); }
}

.bpp-intro__text {
	/* 65 знака на ред: под 60 окото скача твърде често, над 75 губи реда. */
	max-width: 65ch;
	font-size: var(--bpp-text-md);
	line-height: var(--bpp-leading-loose);
	/* Между приглушения и основния текст: описанието се чете, не се прелиства.
	 * Облечен в темата — цветът на текста ѝ. */
	color: var(--bpp-ink-body);
}

.bpp-intro__text > :first-child { margin-top: 0; }
.bpp-intro__text > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Бутони
 * ------------------------------------------------------------------------- */

.bpp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bpp-space-2);
	min-height: 46px;
	padding: var(--bpp-space-3) var(--bpp-space-5);
	border: 1px solid transparent;
	border-radius: var(--bpp-radius-lg);
	font-family: inherit;
	font-size: var(--bpp-text-md);
	font-weight: var(--bpp-weight-medium);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background var(--bpp-duration-fast) var(--bpp-ease),
	            border-color var(--bpp-duration-fast) var(--bpp-ease),
	            color var(--bpp-duration-fast) var(--bpp-ease);
}

/* Фокусът стои до покоя, не до посочването: темата боядисва фокусирания
 * бутон в своя цвят с правило, по-силно от един клас. */
.bpp-button--primary,
.bpp-button--primary:focus {
	background: var(--bpp-button-bg);
	border-color: var(--bpp-button-edge);
	color: var(--bpp-button-ink);
}

.bpp-button--primary:hover,
.bpp-button--primary:focus-visible {
	background: var(--bpp-button-hover-bg);
	border-color: var(--bpp-button-hover-bg);
	color: var(--bpp-button-hover-ink);
}

.bpp-button--ghost,
.bpp-button--ghost:focus {
	background: transparent;
	/* Мек ръб, не силен: редицата вторични бутони под имота иначе изглежда
	 * като таблица от рамки. Разликата с основния я носи запълването. */
	border-color: var(--bpp-button-ghost-edge);
	color: var(--bpp-ink);
}

.bpp-button--ghost:hover,
.bpp-button--ghost:focus-visible {
	background: var(--bpp-surface-hover);
	border-color: var(--bpp-button-ghost-edge);
	color: var(--bpp-ink);
}

/* „Редактирай“ вижда само вписан редактор. Пунктирът го отличава от
 * бутоните, които виждат посетителите — на страницата, която той проверява
 * „като клиент“, иначе изглежда като част от нея. */
.bpp-button--edit,
.bpp-button--edit:focus,
.bpp-button--edit:hover,
.bpp-button--edit:focus-visible { border-style: dashed; }

/* Иконката в бутон е с ръста на текста до нея, не по-едра. */
.bpp-button .bpp-icon { width: 1.15em; height: 1.15em; opacity: 0.75; }

/* ---------------------------------------------------------------------------
 * Изгледът
 * ------------------------------------------------------------------------- */

/* Адрес към етаж или имот отваря страницата тук — не залепено за ръба. */
.bpp-explore { scroll-margin-top: var(--bpp-space-5); }

.admin-bar .bpp-explore { scroll-margin-top: calc(var(--bpp-space-5) + 46px); }

.bpp-explore {
	position: relative;
	margin-bottom: var(--bpp-section-gap);
	scroll-margin-top: var(--bpp-space-6);
}

/* Текст само за екранния четец. position:relative на .bpp-explore по-горе е
 * условието: без позициониран родител абсолютният елемент се мери спрямо
 * страницата и я мести — точно това изнесе админа настрани на телефон. */
.bpp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bpp-explore--busy { opacity: 0.6; pointer-events: none; }

.bpp-explore__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpp-space-4);
	flex-wrap: wrap;
	padding-bottom: var(--bpp-space-3);
	margin-bottom: var(--bpp-space-4);
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-crumbs {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-2);
	font-size: var(--bpp-text-md);
	color: var(--bpp-ink-faint);
	flex-wrap: wrap;
}

.bpp-crumbs a { color: var(--bpp-ink-muted); text-decoration: none; }
.bpp-crumbs a:hover { color: var(--bpp-accent); }

.bpp-legend {
	display: flex;
	gap: var(--bpp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

.bpp-legend__item { display: flex; align-items: center; gap: var(--bpp-space-2); }

.bpp-legend__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
}

/* Две колони: лентата с етажите и сцената. Лентата стои вляво винаги — и
 * докато се гледа етаж, и докато е отворен имот. Тя е начинът да се смени
 * етажът, а най-честото движение е точно това. */
.bpp-explore__body {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: var(--bpp-space-5);
	align-items: start;
}

/* Сцената: етажът и имотът делят едно място. Имотът не отива под изгледа —
 * влиза върху него, а лентата с етажите остава на мястото си. */
.bpp-stage { min-width: 0; }

/* Вътре в сцената: списъкът с имотите и схемата на етажа. */
.bpp-stage__floor {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--bpp-space-5);
	align-items: start;
}

@media (max-width: 1100px) {
	.bpp-stage__floor { grid-template-columns: minmax(0, 1fr); }
	.bpp-plan { grid-row: 1; }
}

@media (max-width: 640px) {
	.bpp-explore__body { grid-template-columns: 1fr; }
	.bpp-floors { flex-direction: row !important; overflow-x: auto; }
}

/* Влизането на панел в сцената. Кратко и само при смяна: при щракване върху
 * съседен имот картата остава на място и повторното вмъкване би било мигане,
 * не преход. */
@keyframes bpp-slide-in {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: none; }
}

.bpp-slide-in {
	animation: bpp-slide-in var(--bpp-duration-base) var(--bpp-ease) 1;
}

@media (prefers-reduced-motion: reduce) {
	.bpp-slide-in { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Списъкът на страницата на сградата
 *
 * Същата търсачка като на „Имоти“, заключена за сградата. Стои под всичко, на
 * мястото на изгледа по етажи, и заема същата ширина.
 * ------------------------------------------------------------------------- */

.bpp-listing {
	margin-bottom: var(--bpp-section-gap);
	scroll-margin-top: var(--bpp-space-6);
}

.admin-bar .bpp-listing { scroll-margin-top: calc(var(--bpp-space-6) + 46px); }

/* Търсачката носи собствено поле и ширина за самостоятелна страница. Тук
 * мястото ѝ е решено от секцията. */
.bpp-listing .bpp-search {
	width: auto;
	padding: 0;
}

/* -- Лентата с етажите */

.bpp-floors {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: var(--bpp-space-4);
}

.bpp-floors__entrance {
	padding: var(--bpp-space-2) 0 var(--bpp-space-1);
	font-size: var(--bpp-text-xs);
	letter-spacing: var(--bpp-tracking-wide);
	text-transform: uppercase;
	color: var(--bpp-ink-faint);
}

.bpp-floor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpp-space-1);
	padding: var(--bpp-space-2) var(--bpp-space-3);
	border-radius: var(--bpp-radius-sm);
	background: var(--bpp-surface-sunk);
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-md);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background var(--bpp-duration-fast) var(--bpp-ease),
	            color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-floor:hover,
.bpp-floor--hover { background: var(--bpp-surface-hover); color: var(--bpp-ink); }

.bpp-floor--active {
	background: var(--bpp-accent);
	color: var(--bpp-accent-ink);
	font-weight: var(--bpp-weight-semibold);
}

.bpp-floor__count {
	font-size: var(--bpp-text-xs);
	opacity: 0.7;
}

.bpp-floor--active .bpp-floor__count { opacity: 0.85; }

/* -- Списъкът с имотите */

.bpp-units {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bpp-units__head {
	padding-bottom: var(--bpp-space-2);
	margin-bottom: var(--bpp-space-2);
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-units__floor {
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
}

.bpp-units__hint {
	padding: var(--bpp-space-6) 0;
	color: var(--bpp-ink-faint);
	font-size: var(--bpp-text-md);
}

.bpp-unit {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--bpp-space-3) var(--bpp-space-3) var(--bpp-space-3) var(--bpp-space-2);
	border-bottom: 1px solid var(--bpp-border-soft);
	border-left: 3px solid transparent;
	color: inherit;
	text-decoration: none;
	transition: background var(--bpp-duration-fast) var(--bpp-ease);
}

/* Цветът се повтаря при посочване: `a:hover` на темата е по-силен от един
 * клас и иначе боядисва реда в своя цвят. */
.bpp-unit:hover,
.bpp-unit--hover { background: var(--bpp-surface-hover); color: inherit; }

.bpp-unit--active {
	background: var(--bpp-accent-soft);
	border-left-color: var(--bpp-accent);
}

.bpp-unit--locked { opacity: 0.55; cursor: default; }

.bpp-unit__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpp-space-2);
}

.bpp-unit__number {
	font-size: var(--bpp-text-md);
	font-weight: var(--bpp-weight-medium);
}

.bpp-unit__dot {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex: none;
}

.bpp-unit__meta {
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}

/* -- Схемата */

.bpp-plan { min-width: 0; }

.bpp-plan__stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.bpp-plan__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.bpp-plan__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.bpp-plan__empty {
	padding: var(--bpp-space-12) var(--bpp-space-6);
	background: var(--bpp-surface-sunk);
	border-radius: var(--bpp-radius-lg);
	text-align: center;
	color: var(--bpp-ink-faint);
}

/* Контурът носи цвета на статуса — наличността се чете от схемата, а не само
 * от списъка. Това е и основната разлика спрямо анализираните сайтове, където
 * всички контури са с един и същ цвят. */
/* Контурите на сайта нямат линия — само запълване. Върху архитектурна схема
 * очертанието и без това стои върху начертани стени; втора линия отгоре им
 * прави чертежа мътен.
 *
 * Запълването взима цвета на статуса, освен ако в настройките е зададен
 * собствен. Незададената настройка не се изписва изобщо, затова var() пада на
 * втория си аргумент — виж Support\Appearance. */
.bpp-shape {
	--shape-color: var(--bpp-accent);
	fill: var(--bpp-polygon-fill, var(--shape-color));
	fill-opacity: var(--bpp-polygon-fill-opacity);
	stroke: none;
	cursor: pointer;
	transition:
		fill-opacity var(--bpp-duration-fast) var(--bpp-ease),
		fill var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-shape:hover,
.bpp-shape--hover {
	fill: var(--bpp-polygon-hover-fill, var(--bpp-polygon-fill, var(--shape-color)));
	fill-opacity: var(--bpp-polygon-hover-opacity);
}

/* Избраното се различава по контур, не по запълване — така избран продаден
 * имот остава четим и като избран, и като продаден. */
.bpp-shape--active {
	stroke: var(--bpp-accent);
	stroke-width: var(--bpp-polygon-selected-width);
	fill-opacity: var(--bpp-polygon-hover-opacity);
}

/* ---------------------------------------------------------------------------
 * Панел с имота
 * ------------------------------------------------------------------------- */

/* Картата заема мястото на етажа, не реда под него, затова няма горен отстъп
 * и започва от същата линия, от която започваше списъкът с имотите. */
.bpp-detail {
	background: var(--bpp-surface-raised);
	border: 1px solid var(--bpp-panel-border);
	border-radius: var(--bpp-card-radius);
	overflow: hidden;
}

.bpp-detail__inner { min-width: 0; }

/* -- Лентата: назад към етажа и съседните имоти */

.bpp-detail__bar {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-4);
	flex-wrap: wrap;
	padding: var(--bpp-space-3) var(--bpp-space-5);
	background: var(--bpp-surface-sunk);
	border-bottom: 1px solid var(--bpp-panel-border);
}

/* „Назад“ и пътят към сградата са бутони с рамка, не сив текст: клиентът ги
 * търсеше над отворения имот и не ги намираше. При посочване се пълнят в
 * основния цвят, като „Запитване“ под тях. */
.bpp-back,
.bpp-detail__building {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	border: 1px solid var(--bpp-border-strong);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface-raised);
	color: var(--bpp-ink);
	font: inherit;
	font-size: var(--bpp-text-md);
	font-weight: var(--bpp-weight-medium);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--bpp-duration-fast) var(--bpp-ease),
	            border-color var(--bpp-duration-fast) var(--bpp-ease),
	            color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-back { padding: var(--bpp-space-2) var(--bpp-space-4) var(--bpp-space-2) var(--bpp-space-3); }

.bpp-back:hover,
.bpp-detail__building:hover {
	background: var(--bpp-accent);
	border-color: var(--bpp-accent);
	color: var(--bpp-accent-ink);
}

.bpp-back__arrow { font-size: var(--bpp-text-xl); line-height: 1; }

/* Номерата на съседните имоти. Заместват бутоните „предишен“ и „следващ“:
 * всеки апартамент на етажа е на един клик, а не на толкова, колкото го дели
 * от текущия. */
.bpp-siblings {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-1);
	flex-wrap: wrap;
	margin-inline-start: auto;
}

.bpp-sibling {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	padding: var(--bpp-space-1) var(--bpp-space-3);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface);
	border: 1px solid var(--bpp-border);
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-sm);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background var(--bpp-duration-fast) var(--bpp-ease),
	            color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-sibling:hover { background: var(--bpp-surface-hover); color: var(--bpp-ink); }

.bpp-sibling--active {
	background: var(--bpp-accent);
	border-color: var(--bpp-accent);
	color: var(--bpp-accent-ink);
	font-weight: var(--bpp-weight-semibold);
}

.bpp-sibling--locked { opacity: 0.5; pointer-events: none; }

.bpp-sibling__dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

.bpp-sibling--active .bpp-sibling__dot { box-shadow: 0 0 0 1px var(--bpp-accent-ink); }

/* Пътят към сградата, когато имотът е отворен от списък извън нея. Стои
 * вдясно, където при етажите стоят номерата на съседите: отляво е откъде идва
 * човекът, отдясно — накъде може да продължи. */
.bpp-detail__building {
	min-width: 0;
	margin-inline-start: auto;
	padding: var(--bpp-space-2) var(--bpp-space-3) var(--bpp-space-2) var(--bpp-space-4);
}

.bpp-detail__building span { overflow: hidden; text-overflow: ellipsis; }

/* На телефон „Всички имоти“ и сградата не се събираха в един ред: сградата
 * падаше на втори ред, вдясно, и изглеждаше разместена. Там „назад“ е само
 * стрелка — надписът остава за четеца, — а сградата взима останалото място
 * в същия ред. По искане на клиента. */
@media (max-width: 640px) {
	.bpp-detail__bar { padding: var(--bpp-space-3) var(--bpp-space-4); }

	.bpp-detail__bar:has(> .bpp-detail__building) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--bpp-space-2);
	}

	.bpp-detail__bar:has(> .bpp-detail__building) > .bpp-back {
		justify-content: center;
		min-width: 44px;
		padding: var(--bpp-space-2);
	}

	.bpp-detail__bar:has(> .bpp-detail__building) .bpp-back__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bpp-detail__bar > .bpp-detail__building {
		justify-self: end;
		max-width: 100%;
		margin-inline-start: 0;
		font-size: var(--bpp-text-base);
	}
}

/* На най-тесните иконката на сградата отстъпва място на името ѝ. */
@media (max-width: 400px) {
	.bpp-detail__building > .bpp-icon:first-child { display: none; }
}

/* -- Тялото: скица вляво, данни вдясно */

.bpp-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--bpp-space-6);
	padding: var(--bpp-space-5);
	align-items: start;
}

@media (max-width: 900px) {
	.bpp-detail__grid { grid-template-columns: 1fr; }
}

.bpp-detail__media { margin: 0; min-width: 0; }

/* Скиците са в най-различни пропорции. Без таван висок портретен чертеж
 * изтласква данните на имота под сгъвката. */
.bpp-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	object-position: top;
	border-radius: var(--bpp-radius-md);
	background: var(--bpp-surface-sunk);
}

/* Скицата е връзка към файла: разглеждачът я отваря в голям размер. В
 * колоната чертежът е дребен и надписите по стаите не се четат, а курсорът
 * не казва нищо на телефон — затова надписът в ъгъла. */
.bpp-detail__zoom {
	position: relative;
	display: block;
	border-radius: var(--bpp-radius-md);
	text-decoration: none;
	cursor: zoom-in;
}

.bpp-detail__zoom-hint {
	position: absolute;
	top: var(--bpp-space-2);
	right: var(--bpp-space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-1);
	padding: var(--bpp-space-1) var(--bpp-space-2);
	border-radius: var(--bpp-radius-sm);
	background: var(--bpp-surface);
	color: var(--bpp-ink);
	font-size: var(--bpp-text-sm);
	line-height: 1.2;
	box-shadow: var(--bpp-shadow-sm);
	transition: box-shadow var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-detail__zoom:hover .bpp-detail__zoom-hint,
.bpp-detail__zoom:focus-visible .bpp-detail__zoom-hint { box-shadow: var(--bpp-shadow-md); }

/* Имот без собствена скица показва мястото си върху етажната. Слоят стои
 * върху изображението, не върху клетката — иначе се разминава с него, щом
 * пропорциите на схемата не са тези на колоната. */
.bpp-detail__stage {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: var(--bpp-radius-md);
	overflow: hidden;
}

.bpp-detail__noplan {
	margin: 0;
	padding: var(--bpp-space-12) var(--bpp-space-6);
	background: var(--bpp-surface-sunk);
	border-radius: var(--bpp-radius-md);
	text-align: center;
	color: var(--bpp-ink-faint);
	font-size: var(--bpp-text-md);
}

.bpp-detail__info {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-4);
	min-width: 0;
}

.bpp-detail__head {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-3);
	flex-wrap: wrap;
}

.bpp-detail__title {
	margin: 0;
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
	line-height: var(--bpp-leading-tight);
	letter-spacing: var(--bpp-tracking-tight);
	text-wrap: balance;
}

.bpp-detail__status {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	padding: var(--bpp-space-1) var(--bpp-space-3);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface-sunk);
	color: var(--status-color, var(--bpp-ink-muted));
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-medium);
}

/* При отворения имот — на свой ред под името и статуса. */
.bpp-detail__flags { flex-basis: 100%; }

.bpp-detail__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.bpp-detail__price {
	margin: 0;
	font-size: var(--bpp-text-2xl);
	font-weight: var(--bpp-price-weight);
	letter-spacing: var(--bpp-tracking-tight);
	font-variant-numeric: tabular-nums;
	color: var(--bpp-accent);
}

/* -- Едрите числа */

/* Площта, спалните и баните са това, което се търси първо. Като редове сред
 * осем други се четат наравно с вътрешния код на имота. */
.bpp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: var(--bpp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Контур, не запълване: четири запълнени правоъгълника до едра цена правят
 * блока пъстър, а плочките трябва да се четат като едно нещо. */
.bpp-fact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: var(--bpp-space-3) var(--bpp-space-3) var(--bpp-space-4);
	border: 1px solid var(--bpp-border-soft);
	border-radius: var(--bpp-radius-lg);
	background: var(--bpp-surface);
}

.bpp-fact__icon {
	width: 1.15em;
	height: 1.15em;
	margin-bottom: var(--bpp-space-2);
	color: var(--bpp-ink-faint);
}

/* Числата са къси, но изложението е дума: „Югозапад и Запад“ не се побира в
 * колона от 84 px и на телефон се режеше по средата. Пренася се. */
.bpp-fact__value {
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-semibold);
	letter-spacing: var(--bpp-tracking-tight);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.bpp-fact__label {
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}

/* -- Останалите данни */

.bpp-detail__rows { margin: 0; }

.bpp-detail__row {
	display: flex;
	justify-content: space-between;
	gap: var(--bpp-space-4);
	padding: var(--bpp-space-2) 0;
	border-bottom: 1px solid var(--bpp-border-soft);
}

.bpp-detail__row:last-child { border-bottom: none; }
.bpp-detail__row dt { color: var(--bpp-ink-faint); font-size: var(--bpp-text-md); }

.bpp-detail__row dd {
	margin: 0;
	font-weight: var(--bpp-weight-medium);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.bpp-detail__actions {
	display: flex;
	gap: var(--bpp-space-2);
	flex-wrap: wrap;
}

.bpp-detail__actions:empty { display: none; }

/* На телефон плочките са по две на ред — в три колони изложението се чупеше
 * по средата на думата, — а бутоните запълват реда си, вместо да стоят
 * накъсани. */
@media (max-width: 640px) {
	.bpp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bpp-detail__actions > .bpp-button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.bpp-page * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * Комплекс
 * ------------------------------------------------------------------------- */

/* Ситуационният план: погледът отгоре върху парцела с очертани сгради.
 * Контурите са връзки, не обработчици — планът работи и без JavaScript. */
.bpp-siteplan { margin-bottom: var(--bpp-space-8); }

.bpp-siteplan .bpp-plan__stage { display: block; }

.bpp-siteplan .bpp-plan__image {
	width: 100%;
	border-radius: var(--bpp-radius-lg);
}

.bpp-complex-buildings { margin-bottom: var(--bpp-section-gap); }

.bpp-complex-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--bpp-space-5);
}

/* ---------------------------------------------------------------------------
 * Разглеждач на снимки
 *
 * Пак нативен <dialog>. Самият той е прозрачен: снимката лежи върху воала,
 * а не върху панел — рамка около снимка на апартамент отнема точно онова,
 * заради което разглеждачът е отворен.
 * ------------------------------------------------------------------------- */

.bpp-lightbox {
	width: min(1200px, calc(100vw - 2 * var(--bpp-space-4)));
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--bpp-scrim-ink);
	font-family: var(--bpp-font-sans);
	overflow: visible;
}

.bpp-lightbox::backdrop { background: var(--bpp-scrim-strong); }

.bpp-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bpp-space-3);
	margin: 0;
}

.bpp-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	border-radius: var(--bpp-radius-md);
}

.bpp-lightbox__caption {
	margin: 0;
	font-size: var(--bpp-text-md);
	text-align: center;
	text-wrap: balance;
}

.bpp-lightbox__close,
.bpp-lightbox__step {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--bpp-scrim);
	color: var(--bpp-scrim-ink);
	cursor: pointer;
	transition: background var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-lightbox__close:hover,
.bpp-lightbox__step:hover { background: var(--bpp-scrim-hover); }

.bpp-lightbox__close {
	top: var(--bpp-space-3);
	right: var(--bpp-space-3);
}

.bpp-lightbox__step {
	top: 50%;
	transform: translateY(-50%);
}

/* Авторският display бие [hidden] на браузъра. Една снимка няма накъде да се
 * прелиства и стрелките се крият от скрипта. */
.bpp-lightbox__step[hidden] { display: none; }

.bpp-lightbox__step--prev { left: calc(-1 * var(--bpp-space-6)); }
.bpp-lightbox__step--next { right: calc(-1 * var(--bpp-space-6)); }

/* На тесен екран стрелките нямат къде да стоят отстрани и лягат върху
 * долните ъгли на снимката. */
@media (max-width: 860px) {
	.bpp-lightbox__step--prev { left: var(--bpp-space-2); }
	.bpp-lightbox__step--next { right: var(--bpp-space-2); }
}

/* ---------------------------------------------------------------------------
 * Картата на обекта
 *
 * „Виж на картата“ горе на страницата. Пак нативен <dialog>, с картата на
 * Google вътре. Широк почти колкото екрана — карта в прозорче показва точката,
 * но не и квартала около нея, а точно него човек е дошъл да види.
 * ------------------------------------------------------------------------- */

.bpp-map-dialog {
	width: min(1100px, calc(100vw - 2 * var(--bpp-space-4)));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--bpp-space-4));
	padding: 0;
	border: none;
	border-radius: var(--bpp-radius-lg);
	background: var(--bpp-surface-raised);
	color: var(--bpp-ink);
	font-family: var(--bpp-font-sans);
	box-shadow: var(--bpp-shadow-lg);
	overflow: hidden;
}

.bpp-map-dialog::backdrop { background: var(--bpp-scrim); }

.bpp-map-dialog__head {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-4);
	padding: var(--bpp-space-4) var(--bpp-space-3) var(--bpp-space-4) var(--bpp-space-6);
	border-bottom: 1px solid var(--bpp-border-soft);
}

.bpp-map-dialog__names {
	flex: 1 1 auto;
	min-width: 0;
}

.bpp-map-dialog__title {
	margin: 0;
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
	line-height: 1.25;
	color: var(--bpp-ink);
}

.bpp-map-dialog__address {
	margin: var(--bpp-space-1) 0 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

/* Връзка, не бутон: води навън, в Google Maps. */
.bpp-map-dialog__external {
	flex: none;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink);
	border-bottom: 1px solid currentcolor;
	opacity: 0.85;
	transition: opacity var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-map-dialog__external:hover,
.bpp-map-dialog__external:focus-visible { opacity: 1; color: var(--bpp-ink); }

.bpp-map-dialog__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--bpp-ink-muted);
	cursor: pointer;
	transition: background var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-map-dialog__close:hover {
	background: var(--bpp-surface-hover);
	color: var(--bpp-ink);
}

.bpp-map-dialog__frame {
	display: block;
	width: 100%;
	height: min(70vh, 640px);
	border: 0;
	background: var(--bpp-surface-sunk);
}

/* На телефон връзката слиза под името — до кръстчето за нея няма място. */
@media (max-width: 600px) {
	.bpp-map-dialog__head {
		flex-wrap: wrap;
		padding-left: var(--bpp-space-4);
	}

	.bpp-map-dialog__names { flex-basis: calc(100% - 44px - var(--bpp-space-4)); }
	.bpp-map-dialog__external { order: 3; }
	.bpp-map-dialog__frame { height: 65vh; }
}

/* ---------------------------------------------------------------------------
 * Запитване
 *
 * Нативен <dialog>: Escape затваря, фокусът остава вътре, фонът се заключва.
 * Стилът само облича — поведението е на браузъра.
 * ------------------------------------------------------------------------- */

.bpp-enquiry {
	width: min(560px, calc(100vw - 2 * var(--bpp-space-4)));
	padding: 0;
	border: 1px solid var(--bpp-border);
	border-radius: var(--bpp-radius-lg);
	background: var(--bpp-surface-raised);
	color: var(--bpp-ink);
	font-family: var(--bpp-font-sans);
}

.bpp-enquiry::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.bpp-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-4);
	padding: var(--bpp-space-6);
}

.bpp-enquiry__head {
	position: relative;
	padding-right: var(--bpp-space-8);
	padding-bottom: var(--bpp-space-3);
	border-bottom: 1px solid var(--bpp-border-soft);
}

.bpp-enquiry__title {
	margin: 0;
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
}

.bpp-enquiry__unit {
	margin: var(--bpp-space-1) 0 0;
	color: var(--bpp-ink-muted);
}

/* Обяснението пред зает имот: защо формата пита за адрес, след като имотът
 * го няма. Появява се само в този режим. */
.bpp-enquiry__lead {
	margin: var(--bpp-space-2) 0 0;
	padding-right: var(--bpp-space-6);
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-sm);
	line-height: 1.5;
}

.bpp-enquiry__close {
	position: absolute;
	top: -4px;
	right: 0;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-2xl);
	line-height: 1;
	cursor: pointer;
}

.bpp-enquiry__close:hover { color: var(--bpp-ink); }

.bpp-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-1);
	min-width: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

.bpp-enquiry__field input,
.bpp-enquiry__field textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--bpp-space-2) var(--bpp-space-3);
	border: 1px solid var(--bpp-border-strong);
	border-radius: var(--bpp-radius-md);
	background: var(--bpp-surface);
	color: var(--bpp-ink);
	font-family: inherit;
	font-size: var(--bpp-text-md);
}

.bpp-enquiry__field textarea { resize: vertical; }

/* Фокусът на темата (`input:focus`) е по-силен от класа на полето и сменяше
 * рамката с нейната. */
.bpp-enquiry__field :is(input, textarea):focus {
	border-color: var(--bpp-accent);
	outline: 2px solid var(--bpp-accent);
	outline-offset: -1px;
}

.bpp-enquiry__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--bpp-space-4);
}

.bpp-enquiry__note {
	margin: 0;
	min-height: 1.4em;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

.bpp-enquiry__note--error { color: var(--bpp-danger); }

.bpp-enquiry__send { min-height: 44px; }

.bpp-enquiry__privacy {
	margin: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

.bpp-enquiry__privacy a { color: inherit; text-decoration: underline; }

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

.bpp-enquiry__lead {
	margin: 0;
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-sm);
}

.bpp-enquiry__consent {
	display: flex;
	gap: var(--bpp-space-2);
	align-items: flex-start;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
	cursor: pointer;
}

/* Отметката е с размера на пръст, не на курсор. */
.bpp-enquiry__consent input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
}

/*
 * Отворен от сървъра, <dialog open> стои в потока на страницата, а не върху
 * нея: без showModal() няма ::backdrop и няма заключен фон. Тук диалогът
 * идва отворен точно когато JavaScript липсва — затова се поставя сам.
 */
.bpp-enquiry[open]:not(:modal) {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	box-shadow: var(--bpp-shadow-lg);
}

/* ---------------------------------------------------------------------------
 * Плъзгащи се ленти
 *
 * Галерията и ходът на строежа са едно и също движение: ред, който се чете
 * настрани. Общото стои тук, различното — при всеки от тях.
 *
 * Лентата е фокусируема (tabindex в шаблона), защото се плъзга; без видим
 * контур при фокус човек, който я е стигнал с Tab, не разбира къде е.
 * ------------------------------------------------------------------------- */

.bpp-rail {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--bpp-border-strong) transparent;
}

.bpp-rail:focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 4px;
}

.bpp-rail::-webkit-scrollbar { height: 6px; }
.bpp-rail::-webkit-scrollbar-track { background: transparent; }

.bpp-rail::-webkit-scrollbar-thumb {
	background: var(--bpp-border-strong);
	border-radius: 999px;
}

/* Заглавен ред: името вляво, броят или пояснението вдясно.
 *
 * Трите заглавия на раздели — списъкът, галерията и ходът на строежа — носят
 * чертата на началната страница. Пояснението вдясно е без нея: то е бележка
 * под линия, не заглавие. */
.bpp-section-title,
.bpp-photos__title,
.bpp-progress__title {
	padding-left: var(--bpp-mark-gap);
	border-left: var(--bpp-mark-width) solid var(--bpp-mark);
	line-height: 1.15;
}

.bpp-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bpp-space-4);
	margin-bottom: var(--bpp-space-6);
	flex-wrap: wrap;
}

.bpp-section-title {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-3);
	margin: 0;
	font-size: var(--bpp-text-2xl);
	font-weight: var(--bpp-heading-weight);
}

.bpp-section-title .bpp-icon {
	display: var(--bpp-heading-icon);
	color: var(--bpp-accent);
	width: 1.1em;
	height: 1.1em;
}

.bpp-section-aside {
	margin: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Стрелки за плъзгащите се ленти
 *
 * Лентата се плъзга и без тях. Но на десктоп с мишка това не е очевидно —
 * снимка, която наднича отдясно, казва „има още“, без да казва как. Затова
 * бутоните лягат върху ръбовете на лентата и се появяват само когато има
 * накъде; scroller.js ги отваря и ги крие.
 * ------------------------------------------------------------------------- */

.bpp-scroll-nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bpp-border);
	border-radius: 50%;
	background: var(--bpp-surface-raised);
	color: var(--bpp-ink);
	cursor: pointer;
	box-shadow: var(--bpp-shadow-md);
	transform: translateY(-50%);
	transition: background var(--bpp-duration-fast) var(--bpp-ease),
	            border-color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-scroll-nav:hover {
	background: var(--bpp-surface-hover);
	border-color: var(--bpp-border-strong);
}

/* Вътре в лентата, върху ръба на снимката. Отвън бутонът виси извън
 * страницата и се реже от прозорец, който е широк колкото съдържанието. */
.bpp-scroll-nav--prev { left: var(--bpp-space-3); }
.bpp-scroll-nav--next { right: var(--bpp-space-3); }

/* С пръст стрелките са излишни: лентата се бута. Скриват се по указание, не
 * по ширина — таблет в пейзаж е широк колкото лаптоп и пак се пипа с пръст. */
@media (pointer: coarse) {
	.bpp-scroll-nav { display: none; }
}

/* Лентата е фокусируема и трябва да ѝ остане място за контура при фокус;
 * бутоните ѝ висят отвън и не бива да бъдат отрязани. */
.bpp-photos__viewport,
.bpp-progress__viewport {
	position: relative;
}

/* Ръбът на хода на строежа избледнява там, където лентата продължава.
 * Стрелката казва „има още“ с думи, това го казва с поглед.
 *
 * Галерията е без него — по искане на клиента: преливането лягаше като сянка
 * върху снимките. Там съседната снимка, която наднича отдясно, вече казва
 * същото, а редът свършва остро. */
.bpp-progress__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 96px;
	background: linear-gradient(to right, transparent, var(--bpp-surface-page));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-scroller--more::after { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Галерия на обекта
 *
 * Един ред, който се плъзга. Решетка би растяла надолу с всяка следваща
 * снимка и при десет вече изтласква изгледа по етажи под сгъвката.
 *
 * Съседната снимка наднича отдясно: това е единственото, което казва на човек,
 * че редът продължава, преди да е бутнал нещо.
 * ------------------------------------------------------------------------- */

.bpp-photos { margin-bottom: var(--bpp-section-gap); }

.bpp-photos__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bpp-space-4);
	margin-bottom: var(--bpp-space-6);
	flex-wrap: wrap;
}

.bpp-photos__title {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-3);
	margin: 0;
	font-size: var(--bpp-text-2xl);
	font-weight: var(--bpp-heading-weight);
}

.bpp-photos__title .bpp-icon {
	display: var(--bpp-heading-icon);
	color: var(--bpp-accent);
	width: 1.05em;
	height: 1.05em;
}

.bpp-photos__count {
	margin: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
	white-space: nowrap;
}

.bpp-photos__track {
	display: flex;
	gap: var(--bpp-space-4);
	margin: 0;
	/* Отгоре и отдолу има място, защото лентата реже по двете оси: без него
	   повдигането при посочване и сянката под картината се отрязват. */
	padding: var(--bpp-space-2) 0 var(--bpp-space-4);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--bpp-border-strong) transparent;
}

.bpp-photos__track:focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 4px;
}

.bpp-photos__track::-webkit-scrollbar { height: 6px; }
.bpp-photos__track::-webkit-scrollbar-track { background: transparent; }

.bpp-photos__track::-webkit-scrollbar-thumb {
	background: var(--bpp-border-strong);
	border-radius: 999px;
}

.bpp-photos__item {
	flex: none;
	scroll-snap-align: start;
}

.bpp-photos__link {
	display: block;
	width: 620px;
	max-width: 82vw;
	/* Снимките в страницата са със същия ъгъл като картите. */
	border-radius: var(--bpp-card-radius);
	overflow: hidden;
	background: var(--bpp-surface-sunk);
	line-height: 0;
	box-shadow: var(--bpp-shadow-sm);
	transition: box-shadow var(--bpp-duration-fast) var(--bpp-ease),
	            transform var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-photos__link:hover,
.bpp-photos__link:focus-visible {
	box-shadow: var(--bpp-shadow-md);
	transform: translateY(-2px);
}

.bpp-photos__link img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* Първата е по-широка: тя е снимката, с която обектът се представя, а редица
 * от еднакви правоъгълници не казва откъде да се започне. */
@media (min-width: 1100px) {
	.bpp-photos__item:first-child:not(:last-child) .bpp-photos__link { width: 840px; }
}

@media (max-width: 900px) {
	.bpp-photos__link img { height: 320px; }
}

@media (max-width: 640px) {
	.bpp-photos__link img { height: 240px; }
}

/* ---------------------------------------------------------------------------
 * Ход на строежа
 *
 * Лента с времето, не албум. Новината тук е докъде е стигнал строежът, а не
 * как изглежда кофражът — затова едрото е месецът, под него стои какво е
 * правено тогава, а снимките са дребни доказателства най-отдолу.
 *
 * Линията минава през цялата спирка и я допира до следващата: разстоянието
 * между месеците е отстъп вътре в спирката, не пролука между тях — иначе
 * линията се накъсва.
 * ------------------------------------------------------------------------- */

.bpp-progress { margin-bottom: var(--bpp-section-gap); }

.bpp-progress__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bpp-space-4);
	margin-bottom: var(--bpp-space-6);
	flex-wrap: wrap;
}

.bpp-progress__title {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-3);
	margin: 0;
	font-size: var(--bpp-text-2xl);
	font-weight: var(--bpp-heading-weight);
}

.bpp-progress__title .bpp-icon {
	display: var(--bpp-heading-icon);
	color: var(--bpp-accent);
	width: 1.05em;
	height: 1.05em;
}

.bpp-progress__hint {
	margin: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
	white-space: nowrap;
}

.bpp-progress__track {
	display: flex;
	margin: 0;
	/* Точките стърчат над линията, а лента с overflow-x реже и по вертикала:
	   без този отстъп горната им половина изчезва. */
	padding: var(--bpp-space-3) 0 var(--bpp-space-4);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--bpp-border-strong) transparent;
}

.bpp-progress__track:focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 4px;
}

.bpp-progress__track::-webkit-scrollbar { height: 6px; }
.bpp-progress__track::-webkit-scrollbar-track { background: transparent; }

.bpp-progress__track::-webkit-scrollbar-thumb {
	background: var(--bpp-border-strong);
	border-radius: 999px;
}

.bpp-progress__stop {
	display: flex;
	flex: none;
	flex-direction: column;
	width: 232px;
	padding-right: var(--bpp-space-8);
	scroll-snap-align: start;
}

.bpp-progress__rail {
	position: relative;
	height: 2px;
	margin-bottom: var(--bpp-space-5);
	background: var(--bpp-border);
}

.bpp-progress__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bpp-surface-page);
	box-shadow: 0 0 0 2px var(--bpp-border-strong);
	transform: translateY(-50%);
}

/* Най-новият месец е онова, което човек търси: точката му е плътна, месецът —
 * в цвета на акцента, линията до него — също. */
.bpp-progress__stop--latest .bpp-progress__rail { background: var(--bpp-accent); }

.bpp-progress__stop--latest .bpp-progress__dot {
	width: 14px;
	height: 14px;
	background: var(--bpp-accent);
	box-shadow: 0 0 0 3px var(--bpp-accent-soft);
}

.bpp-progress__stop--latest .bpp-progress__monthname { color: var(--bpp-accent); }

.bpp-progress__label {
	margin: 0;
	font-weight: var(--bpp-heading-weight);
	line-height: var(--bpp-leading-tight);
}

.bpp-progress__monthname {
	display: block;
	font-size: var(--bpp-text-xl);
	text-transform: capitalize;
	letter-spacing: var(--bpp-tracking-tight);
}

.bpp-progress__year {
	display: block;
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-normal);
	color: var(--bpp-ink-faint);
}

/* Какво е правено тогава. Това прави лентата история — без него тя е списък от
 * месеци със снимки.
 *
 * Излиза целият, без съкращаване: отрязан надпис не може да се прочете никъде
 * другаде. Дълъг надпис вдига всички спирки, защото те са еднакво високи —
 * миниатюрите остават подравнени на дъното. */
.bpp-progress__note {
	margin: var(--bpp-space-3) 0 0;
	font-size: var(--bpp-text-md);
	line-height: var(--bpp-leading-normal);
	color: var(--bpp-ink-muted);
	overflow-wrap: break-word;
}

/* Миниатюрите лягат на дъното на спирката, а не веднага под надписа: месец с
 * двуредов надпис иначе избутва своите надолу и редът им се накъсва. */
.bpp-progress__shots {
	display: flex;
	gap: var(--bpp-space-2);
	margin: auto 0 0;
	padding: var(--bpp-space-4) 0 0;
	list-style: none;
}

.bpp-progress__shot { flex: none; }

.bpp-progress__link {
	position: relative;
	display: block;
	width: 72px;
	height: 54px;
	border-radius: min(var(--bpp-card-radius), 6px);
	overflow: hidden;
	background: var(--bpp-surface-sunk);
	line-height: 0;
}

.bpp-progress__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-progress__link:hover img,
.bpp-progress__link:focus-visible img { opacity: 0.75; }

/* Колко още има зад третата. Числото стои върху снимка, не върху повърхност —
 * оттам и воалът. */
.bpp-progress__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--bpp-scrim);
	color: var(--bpp-scrim-ink);
	font-size: var(--bpp-text-sm);
	line-height: 1;
}

@media (max-width: 640px) {
	.bpp-progress__stop {
		width: 200px;
		padding-right: var(--bpp-space-6);
	}
}

/* ---------------------------------------------------------------------------
 * Подобни свободни
 *
 * Когато любимият апартамент е продаден, човек си тръгва. Три реда под картата
 * са евтиният начин да остане — затова са списък, а не картички: четат се за
 * секунда и не се борят за внимание със самия имот.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Картата на имот
 *
 * Един вид на две места: резултатите от търсенето и подобните имоти под
 * отворения. Стоеше само в search.css и подобните нямаха достъп до нея.
 * ------------------------------------------------------------------------- */

.bpp-card {
	display: flex;
	flex-direction: column;
	background: var(--bpp-surface-raised);
	border: 1px solid var(--bpp-card-border);
	border-radius: var(--bpp-card-radius);
	box-shadow: var(--bpp-card-shadow);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--bpp-duration-fast) var(--bpp-ease),
	            box-shadow var(--bpp-duration-fast) var(--bpp-ease);
}

/* Цветът се повтаря: `a:hover` на темата е по-силен от един клас и
 * боядисваше целия текст на картата при посочване. */
.bpp-card:hover {
	border-color: var(--bpp-card-hover-border);
	box-shadow: var(--bpp-card-hover-shadow);
	color: inherit;
}

.bpp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bpp-card-media-bg);
	overflow: hidden;
}

/* Скицата е чертеж на бяло: вписва се цялата и с въздух около себе си, иначе
 * рамката на листа опира в ръба на картата. */
.bpp-card__media img {
	width: 100%;
	height: 100%;
	padding: var(--bpp-space-3);
	object-fit: contain;
	display: block;
	transition: transform var(--bpp-duration-slow) var(--bpp-ease);
}

.bpp-card:hover .bpp-card__media img { transform: scale(1.03); }

/* Квадратът със стрелка — същият като на картите на сградите, малко по-малък. */
.bpp-card__media::after,
.bpp-card__media::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(var(--bpp-card-go-size) - 8px);
	height: calc(var(--bpp-card-go-size) - 8px);
	pointer-events: none;
}

.bpp-card__media::after {
	z-index: 1;
	background: var(--bpp-card-go-bg);
	transition: background-color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-card__media::before {
	z-index: 2;
	background: var(--bpp-card-go-ink);
	-webkit-mask: var(--bpp-card-go-arrow) center / 45% no-repeat;
	mask: var(--bpp-card-go-arrow) center / 45% no-repeat;
	transition: transform var(--bpp-duration-base) var(--bpp-ease);
}

.bpp-card:hover .bpp-card__media::after,
.bpp-card:focus-visible .bpp-card__media::after { background: var(--bpp-card-go-hover); }

.bpp-card:hover .bpp-card__media::before { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.bpp-card:hover .bpp-card__media img,
	.bpp-card:hover .bpp-card__media::before { transform: none; }
}

/* Празното състояние е нарисувано, не счупено изображение. */
.bpp-card__noimage {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			45deg,
			var(--bpp-surface-sunk),
			var(--bpp-surface-sunk) 10px,
			var(--bpp-border-soft) 10px,
			var(--bpp-border-soft) 20px
		);
}

.bpp-card__status {
	position: absolute;
	top: var(--bpp-space-2);
	left: var(--bpp-space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-1);
	padding: 2px var(--bpp-space-2);
	border-radius: var(--bpp-card-badge-radius);
	background: var(--bpp-card-badge-bg);
	color: var(--status-color, var(--bpp-ink-muted));
	font-size: var(--bpp-text-xs);
	font-weight: var(--bpp-weight-medium);
	box-shadow: var(--bpp-card-badge-shadow);
}

.bpp-card__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.bpp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 2px;
	padding: var(--bpp-space-4) var(--bpp-space-5) var(--bpp-space-5);
	background: var(--bpp-card-body-bg);
}

.bpp-card__title {
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-heading-weight);
}

.bpp-card__place,
.bpp-card__specs {
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}

.bpp-card__specs { margin-bottom: var(--bpp-space-3); }

/* -- Баджовете: „Завършено до ключ“, „С включено паркомясто“
 *
 * Отметките, които фирмата е направила баджове в „Полета“. Един и същ вид на
 * картата, в таблицата и при статуса на отворения имот. Плътни, в основния
 * цвят: статусът е тих и казва може ли да се купи; баджът е онова, което
 * фирмата иска да се види — какво има в цената. */
.bpp-flags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpp-space-1);
}

.bpp-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 3px var(--bpp-space-2);
	border-radius: var(--bpp-card-badge-radius);
	background: var(--bpp-accent);
	color: var(--bpp-accent-ink);
	font-size: var(--bpp-text-xs);
	font-weight: var(--bpp-weight-semibold);
	line-height: 1.35;
	white-space: nowrap;
}

/* Без избрана иконка — отметка. С иконка — самата иконка, в цвета на текста. */
.bpp-flag:not(.bpp-flag--icon)::before {
	content: "✓";
	font-weight: var(--bpp-weight-bold);
}

.bpp-flag .bpp-flag__icon {
	width: 1.3em;
	height: 1.3em;
	margin-inline-start: -0.15em;
	vertical-align: 0;
}

/* На картата — точно под характеристиките, над чертата с цената. */
.bpp-card__flags { margin: calc(var(--bpp-space-1) - var(--bpp-space-3)) 0 var(--bpp-space-3); }

/* Цената стои на дъното, под косъм: в ред от карти с различно дълги описания
 * цените иначе скачат на различна височина и не се сравняват с един поглед. */
.bpp-card__price {
	margin-top: auto;
	padding-top: var(--bpp-space-3);
	border-top: 1px solid var(--bpp-border-soft);
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-price-weight);
	color: var(--bpp-accent);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Подобни свободни имоти
 *
 * Долу и на цяла ширина, под целия панел: това е предложение след прочетеното,
 * а не поредният ред с данни. Редът се плъзга настрани, вместо да се пренася —
 * три карти една до друга се обхождат с един поглед, а пренесената четвърта
 * изглежда като нова секция.
 * ------------------------------------------------------------------------- */

.bpp-similar {
	margin-top: var(--bpp-space-6);
	padding-top: var(--bpp-space-5);
	border-top: 1px solid var(--bpp-border);
}

.bpp-similar__title {
	margin: 0 0 var(--bpp-space-4);
	font-size: var(--bpp-text-md);
	font-weight: var(--bpp-weight-semibold);
	color: var(--bpp-ink-muted);
}

.bpp-similar__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: var(--bpp-space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* Място за сянката при посочване и за фокусния пръстен. */
	padding-bottom: var(--bpp-space-2);
}

/* Под четири карти редът не бива да се разтяга през целия екран: две карти,
 * всяка по половин лист, изглеждат като нещо друго, а не като предложение. */
@media (min-width: 900px) {
	.bpp-similar__track { grid-auto-columns: minmax(260px, 320px); }
}

.bpp-similar__track > .bpp-card { scroll-snap-align: start; }

.bpp-card--similar .bpp-card__media { aspect-ratio: 3 / 2; }

.bpp-card--similar .bpp-card__body { padding: var(--bpp-space-3) var(--bpp-space-4) var(--bpp-space-4); }

.bpp-card--similar .bpp-card__title { font-size: var(--bpp-text-md); }

.bpp-card--similar .bpp-card__price { font-size: var(--bpp-text-md); }

/* ---------------------------------------------------------------------------
 * Защита от темата
 *
 * Темата стилизира голите елементи — button, input, table, a:hover — и
 * правилата ѝ стигат до компонентите на плъгина. Равните по сила губят, защото
 * стиловете на плъгина се зареждат след темата. Остават по-силните: `button:
 * focus` и `[type=button]:focus` на темата боядисваха фокусирания бутон в
 * нейния цвят. Тук фокусът без посочване се връща към покоя на компонента.
 * ------------------------------------------------------------------------- */

.bpp-back:focus:not(:hover) {
	background: var(--bpp-surface-raised);
	border-color: var(--bpp-border-strong);
	color: var(--bpp-ink);
}

.bpp-scroll-nav:focus:not(:hover) {
	background: var(--bpp-surface-raised);
	border-color: var(--bpp-border);
	color: var(--bpp-ink);
}

.bpp-enquiry__close:focus:not(:hover),
.bpp-map-dialog__close:focus:not(:hover) {
	background: none;
	color: var(--bpp-ink-muted);
}

.bpp-lightbox__close:focus:not(:hover),
.bpp-lightbox__step:focus:not(:hover) {
	background: var(--bpp-scrim);
	color: var(--bpp-scrim-ink);
}

/* Темата подчертава всяка връзка в съдържанието на страницата
 * (`.page-content a`) — там стои shortcode-ът, и заглавията на картите, „Всички
 * имоти“ и бутоните излизаха подчертани. Връзките на плъгина се познават по
 * класа си; връзките в описанията, писани от хора, остават каквито ги иска
 * темата. */
:is(.bpp-page, .bpp-search, .bpp-portfolio, .bpp-quick, .bpp-map) a[class*="bpp-"],
:is(.bpp-page, .bpp-search, .bpp-portfolio, .bpp-quick, .bpp-map) a[class*="bpp-"]:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Груб показалец
 *
 * Пръстът не е курсор. Целите под 44 px се уцелват от втория или третия опит, а
 * лентата с етажите и номерата на съседните имоти са точно онова, което човек
 * натиска най-често на телефон.
 *
 * По указание, не по ширина на екрана: таблет в пейзаж е широк колкото лаптоп и
 * пак се пипа с пръст, а тесен прозорец на десктоп — не.
 * ------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.bpp-floor {
		min-height: 46px;
		padding-inline: var(--bpp-space-4);
	}

	.bpp-back { min-height: 44px; }

	.bpp-sibling {
		min-width: 44px;
		min-height: 44px;
	}

	.bpp-detail__building { min-height: 44px; }

	.bpp-unit { min-height: 56px; }

	/* Трохите са текст, не бутони: разширяват се по височина, без да
	 * разкъсват реда — отрицателното поле връща разположението. */
	.bpp-crumbs a {
		display: inline-block;
		padding-block: var(--bpp-space-2);
		margin-block: calc(var(--bpp-space-2) * -1);
	}

	.bpp-shape { stroke-width: 2px; }
}