/* ===== Brzozowa – Domy (kafle / tabela) ===== */

.brz-domy {
	--brz-akcent: #C1682B;
	--brz-navy: #232936;
	--brz-oliwka: #D9E08F;
	--brz-oliwka-txt: #232936;
	--brz-karta-bg: #FFFFFF;
	--brz-txt: #232936;
	--brz-txt-mut: #7A7E88;
	--brz-linia: #E3E1DA;
	--brz-obrys: #C4C0B5;
	--brz-wiersz-alt: #FAFAF7;
	--brz-wiersz-hover: #EFF3D2;
	--brz-radius: 5px;
	--brz-proporcja: 1.35;
	--brz-wkrotce-krycie: 0.55;

	color: var(--brz-txt);
}

.brz-domy *,
.brz-domy *::before,
.brz-domy *::after {
	box-sizing: border-box;
}

/* Elementy formularzowe nie dziedziczą fontu same z siebie */
.brz-domy button {
	font-family: inherit;
	font-size: inherit;
}

.brz-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.brz-kropeczka {
	margin: 0 0.45em;
	color: var(--brz-txt-mut);
}

/* ---------- Licznik i pasek narzędzi ---------- */

.brz-domy__licznik {
	margin: 0 0 30px;
	color: var(--brz-txt-mut);
	font-size: 14px;
}

.brz-domy__licznik b {
	color: var(--brz-txt);
	font-weight: 600;
}

.brz-domy__pasek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.brz-domy .brz-pigulki {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Przełącznik widoku + link do makiety trzymają się razem po prawej stronie paska */
.brz-domy__widok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

/* Link do makiety: podkreślenie do części szerokości, pełne po najechaniu */
.brz-domy .brz-makieta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 7px;
	color: var(--brz-txt);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.brz-domy .brz-makieta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 62%;
	background: currentColor;
	transition: width 0.35s ease;
}

.brz-domy .brz-makieta:hover::after,
.brz-domy .brz-makieta:focus-visible::after {
	width: 100%;
}

.brz-domy .brz-makieta .brz-ico {
	width: 15px;
	height: 15px;
}

/* Selektory z ".brz-domy" z premedytacją – motyw ma własne style dla button,
   przez które hover potrafił zjeść kolor tekstu. */
.brz-domy .brz-pigulka {
	margin: 0;
	padding: 13px 19px;
	border: 1px solid var(--brz-obrys);
	border-radius: 5px;
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--brz-txt);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.brz-domy .brz-pigulka:hover,
.brz-domy .brz-pigulka:focus-visible {
	background: var(--brz-navy);
	border-color: var(--brz-navy);
	color: #fff;
}

.brz-domy .brz-pigulka.is-aktywna {
	background: var(--brz-navy);
	border-color: var(--brz-navy);
	color: #fff;
}

/* ---------- Siatka kafli ---------- */

.brz-domy__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.brz-card {
	perspective: 1800px;
}

.brz-card__flip {
	display: grid;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.75s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.brz-card.is-obrocona .brz-card__flip {
	transform: rotateY(180deg);
}

.brz-card__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	background: var(--brz-karta-bg);
	border: 1px solid var(--brz-linia);
	border-radius: var(--brz-radius);
	/* Bez overflow: hidden – ścianka obcinała dymek historii ceny wystający nad
	   kartę. Zaokrąglenie zdjęcia trzyma sam kadr (.brz-card__media). */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.brz-card__rewers {
	transform: rotateY(180deg);
}

/* Rewers nie łapie kliknięć, dopóki jest odwrócony tyłem */
.brz-card:not(.is-obrocona) .brz-card__rewers,
.brz-card.is-obrocona .brz-card__awers {
	pointer-events: none;
}

/* ---------- Media ---------- */

.brz-card__media {
	position: relative;
	aspect-ratio: var(--brz-proporcja);
	background: #F2F0EA;
	border-radius: var(--brz-radius) var(--brz-radius) 0 0;
	overflow: hidden;
}

.brz-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brz-card__media img[hidden] {
	display: none !important;
}

/* Obie strony leżą w tej samej komórce siatki, więc wyższa rozpycha drugą.
   Zamiast dawać rzutowi sztywne proporcje, pozwalamy mu zająć całą wysokość,
   która zostaje po liście danych i przyciskach: awers nie dostaje pustki nad
   przyciskiem, a rzut jest tak duży, jak się da. */
.brz-card__media--rzut {
	aspect-ratio: auto;
	/* baza 0, nie "auto" – inaczej naturalna wysokość rzutu dokłada się do wysokości
	   rewersu i to on zaczyna rozpychać awers. Tu kadr tylko wypełnia wolne miejsce. */
	flex: 1 1 0;
	min-height: 170px;
	background: var(--brz-karta-bg);
}

.brz-card__rewers .brz-card__body {
	flex: 0 0 auto;
}

.brz-card__media--rzut img {
	object-fit: contain;
	/* Bez dopełnienia – rzut ma wykorzystać cały kadr. Zakładki poziomów leżą
	   na nim (lewy dolny róg) i mogą go zasłaniać, tak jak w projekcie. */
	padding: 0;
}

/* Rewers oddaje wysokość rzutowi: ciaśniejsza lista danych i mniejsze dopełnienia
   u góry. Awers zostaje nietknięty, więc karta nie zmienia wysokości. */
.brz-card__rewers .brz-card__body {
	padding-top: 14px;
}

.brz-card__rewers .brz-card__tytul {
	margin-bottom: 4px;
}

.brz-card__rewers .brz-specy {
	margin-bottom: 14px;
}

.brz-card__rewers .brz-specy__wiersz {
	padding: 8px 0;
}

.brz-plakietka {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--brz-txt);
	font-size: 13px;
	line-height: 1;
}

.brz-kropka {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brz-txt-mut);
	flex: 0 0 auto;
}

.brz-plakietka--wolny .brz-kropka,
.brz-status--wolny .brz-kropka {
	background: #2F8F5B;
}

/* Morela — ten sam kolor rezerwacji co na makiecie. */
.brz-plakietka--rezerwacja .brz-kropka,
.brz-status--rezerwacja .brz-kropka {
	background: #C1682B;
}

.brz-plakietka--wkrotce .brz-kropka,
.brz-status--wkrotce .brz-kropka {
	background: #5B7FA6;
}

.brz-plakietka--niedostepny .brz-kropka,
.brz-status--niedostepny .brz-kropka {
	background: #8B95A1;
}

.brz-plakietka--sprzedany .brz-kropka,
.brz-status--sprzedany .brz-kropka {
	background: #C0392B;
}

/* ---------- Lokale "wkrótce w sprzedaży" ----------
   Cała karta jest przygaszona: nie ma jeszcze ceny, więc nie ma konkurować
   uwagą z lokalami w sprzedaży. Przygaszamy zdjęcie i plakietkę, a nie całą
   kartę – tekst i przyciski muszą zostać czytelne. */

.brz-card[data-status="wkrotce"] .brz-card__media img {
	opacity: var(--brz-wkrotce-krycie);
	filter: saturate(0.75);
}

.brz-card[data-status="wkrotce"] .brz-plakietka {
	background: rgba(255, 255, 255, 0.72);
	color: var(--brz-txt-mut);
}

.brz-card[data-status="wkrotce"] .brz-plakietka .brz-kropka {
	opacity: 0.65;
}

/* Rzut na rewersie zostaje w pełnej ostrości – to jedyna treść, jaką ten lokal
   ma do pokazania. */
.brz-card[data-status="wkrotce"] .brz-card__media--rzut img {
	opacity: 1;
	filter: none;
}

/* ---------- Treść kafla ---------- */

.brz-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 24px;
}

/* Kolor tytułu ustawiamy wprost – motyw kolorował h3 na jasny szary */
.brz-domy .brz-card__tytul {
	margin: 0 0 8px;
	color: var(--brz-txt);
	font-size: 27px;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	line-height: 1.1;
}

.brz-card__uklad {
	margin: 0 0 12px;
	color: var(--brz-akcent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.brz-card__meta {
	margin: 0 0 16px;
	color: var(--brz-txt-mut);
	font-size: 14px;
}

.brz-card__cena {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 5px;
	color: var(--brz-txt);
	/* Krój nagłówków bierze się z motywu, więc nie da się go zapisać na sztywno.
	   --brz-font-tytul ustawia JS, odczytując rodzinę pisma z .brz-card__tytul. */
	font-family: var(--brz-font-tytul, inherit);
	font-size: 27px;
	font-variant-numeric: lining-nums;
	line-height: 1.15;
}

.brz-card__m2 {
	margin: 0 0 20px;
	min-height: 1.2em;
	color: var(--brz-txt-mut);
	font-size: 13px;
}

/* Lokal bez ceny – "wkrótce". Ta sama wysokość wiersza, stonowany kolor. */
.brz-cena-brak {
	color: var(--brz-txt-mut);
}

/* Na awersie stopka z przyciskami siedzi przy dolnej krawędzi, niezależnie od
   długości treści. Na rewersie przyciski idą tuż pod listą danych – dopychanie
   ich w dół zostawiało dziurę, gdy rewers był niższy od awersu. */
.brz-card__stopka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 10px;
	margin-top: auto;
}

.brz-domy .brz-card__stopka .brz-btn {
	width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}

/* ---------- Podświetlenie lokalu (sygnał z makiety) ---------- */

.brz-card.is-podswietlona .brz-card__face {
	border-color: var(--brz-akcent);
	box-shadow: 0 0 0 3px rgba(193, 104, 43, 0.35);
	animation: brzPuls 1.2s ease-in-out 2;
}

.brz-domy .brz-tabela tbody tr.is-podswietlona td {
	background: var(--brz-wiersz-hover, #EFF3D2);
}

.brz-domy .brz-tabela tbody tr.is-podswietlona td:first-child {
	box-shadow: inset 4px 0 0 var(--brz-akcent);
}

@keyframes brzPuls {
	0%, 100% { box-shadow: 0 0 0 3px rgba(193, 104, 43, 0.35); }
	50%      { box-shadow: 0 0 0 8px rgba(193, 104, 43, 0.12); }
}

.brz-card__akcje {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 10px;
}

/* ---------- Powiększanie zdjęcia i rzutu ---------- */

/* Przycisk kryje cały kadr, ale widać go dopiero na hover – bez ramki i tła,
   żeby nie przykrywał zdjęcia. */
.brz-domy .brz-lupa {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: zoom-in;
	z-index: 2;
}

.brz-lupa__kolo {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(35, 41, 54, 0.72);
	color: #fff;
	opacity: 0;
	transform: scale(0.88);
	transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.brz-lupa__kolo .brz-ico {
	width: 24px;
	height: 24px;
}

.brz-card__media:hover .brz-lupa__kolo,
.brz-domy .brz-lupa:focus-visible .brz-lupa__kolo {
	opacity: 1;
	transform: scale(1);
}

.brz-domy .brz-lupa:hover .brz-lupa__kolo {
	background: rgba(35, 41, 54, 0.85);
}

/* ---------- Przełącznik poziomów rzutu ---------- */

/* Na kadrze, nie w treści – inaczej rewers rośnie i rozpycha awers pustką. */
.brz-rzut-tabs {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.brz-domy .brz-rzut-tab {
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--brz-obrys);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.92);
	background-image: none;
	box-shadow: none;
	color: var(--brz-txt);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.brz-domy .brz-rzut-tab:hover,
.brz-domy .brz-rzut-tab.is-aktywna {
	background: var(--brz-navy);
	border-color: var(--brz-navy);
	color: #fff;
}

/* ---------- Lightbox rzutów (galeria) ---------- */

.brz-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	flex-direction: column;
	background: rgba(20, 24, 32, 0.94);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.brz-lightbox.is-otwarty {
	display: flex;
	opacity: 1;
}

/* --- pasek narzędzi --- */

.brz-lightbox__pasek {
	position: relative;
	z-index: 2;
	flex: none;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
}

.brz-lightbox__tytul {
	flex: 1 1 auto;
	min-width: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brz-lightbox__tabs {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

/* Motyw ma własne style dla button – stąd wymuszone wartości */
.brz-lightbox .brz-lightbox__tab {
	margin: 0 !important;
	padding: 10px 18px !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.10) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.brz-lightbox .brz-lightbox__tab:hover,
.brz-lightbox .brz-lightbox__tab:focus-visible {
	background: rgba(255, 255, 255, 0.24) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.brz-lightbox .brz-lightbox__tab.is-aktywna {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--brz-navy, #232936) !important;
}

/* --- zoom --- */

.brz-lightbox__zoom {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.10);
}

.brz-lightbox .brz-lightbox__zbtn {
	display: grid;
	place-items: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.18s ease;
}

.brz-lightbox .brz-lightbox__zbtn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

.brz-lightbox__zoom-poziom {
	min-width: 52px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- krzyżyk --- */

.brz-lightbox .brz-lightbox__zamknij {
	display: grid;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.brz-lightbox .brz-lightbox__zamknij:hover,
.brz-lightbox .brz-lightbox__zamknij:focus-visible {
	background: rgba(255, 255, 255, 0.26) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #fff !important;
}

/* --- scena z rzutem --- */

.brz-lightbox__scena {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px 28px;
	overflow: hidden;
}

/* Powiększony rzut przewija się w obu osiach */
.brz-lightbox__scena.is-powiekszony {
	overflow: auto;
	align-items: safe center;
	justify-content: safe center;
	cursor: grab;
}

.brz-lightbox .brz-lightbox__scena img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--brz-radius, 5px);
	background: #fff;
	transform-origin: center center;
	transition: transform 0.2s ease;
}

@media (max-width: 780px) {
	.brz-lightbox__pasek {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px;
	}

	.brz-lightbox__tytul {
		flex: 1 1 100%;
		order: -1;
		font-size: 17px;
	}

	.brz-lightbox .brz-lightbox__tab {
		padding: 9px 14px !important;
		font-size: 13px !important;
	}

	.brz-lightbox__scena {
		padding: 0 12px 16px;
	}
}

body.brz-blokada {
	overflow: hidden;
}

/* ---------- Specyfikacja na rewersie ---------- */

.brz-specy {
	margin: 0 0 18px;
	border-top: 1px solid var(--brz-linia);
}

.brz-specy__wiersz {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--brz-linia);
}

.brz-specy dt {
	margin: 0;
	color: var(--brz-txt-mut);
	font-size: 13px;
}

.brz-specy dd {
	margin: 0;
	color: var(--brz-txt);
	font-size: 13px;
	text-align: right;
}

/* ---------- Przyciski ---------- */

.brz-domy .brz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--brz-radius);
	background-image: none;
	box-shadow: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.brz-domy .brz-btn--kontur {
	border-color: var(--brz-obrys);
	background: transparent;
	color: var(--brz-txt);
}

.brz-domy .brz-btn--kontur:hover,
.brz-domy .brz-btn--kontur:focus-visible {
	background: var(--brz-navy);
	border-color: var(--brz-navy);
	color: #fff;
}

.brz-domy .brz-btn--oliwka {
	background: var(--brz-oliwka);
	color: var(--brz-oliwka-txt);
}

.brz-domy .brz-btn--oliwka:hover,
.brz-domy .brz-btn--oliwka:focus-visible {
	background: var(--brz-navy);
	color: #fff;
}

.brz-domy .brz-btn--maly {
	padding: 9px 16px;
	font-size: 13px;
}


.brz-card__obrot--kolo {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--brz-linia);
	border-radius: 50%;
	background: var(--brz-karta-bg);
	color: var(--brz-txt);
	cursor: pointer;
	z-index: 3;
	transition: border-color 0.25s ease;
}

/* Pod kursorem kółko robi się ciemne, a znak biały – wcześniej ikona zostawała
   szara na jasnym tle i po prostu znikała. */
.brz-card__obrot--kolo:hover,
.brz-card__obrot--kolo:focus-visible {
	background: var(--brz-navy);
	border-color: var(--brz-navy);
	color: #fff;
}

/* Pod kursorem obraca się sam znak, nie przycisk – stąd transform na .brz-ico,
   a nie na całym guziku. Dotyczy obu stron karty: „Szczegóły” i kółka powrotu. */
.brz-domy .brz-card__obrot .brz-ico {
	transition: transform 0.45s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.brz-domy .brz-card__obrot:hover .brz-ico,
.brz-domy .brz-card__obrot:focus-visible .brz-ico {
	transform: rotate(180deg);
}

.brz-ico {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.brz-ico--info {
	width: 14px;
	height: 14px;
}

/* ---------- Dymek z historią ceny ---------- */

.brz-info {
	position: relative;
	display: inline-flex;
	color: var(--brz-txt-mut);
	cursor: help;
}

.brz-info__dymek {
	position: absolute;
	bottom: calc(100% + 11px);
	left: 50%;
	z-index: 6;
	transform: translateX(-50%) translateY(4px);
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--brz-navy);
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.brz-info__dymek::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 6px solid transparent;
	border-top-color: var(--brz-navy);
	transform: translateX(-50%);
}

.brz-info__dymek b {
	display: block;
	font-weight: 600;
}

/* Pełna historia z rejestru (wtyczka Brzozowa – Ceny): tytuł, wiersze data → cena,
   bieżąca cena wyróżniona, pod spodem najniższa z 30 dni. */
.brz-info__tytul {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: #fff;
}

.brz-info__wiersz {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	color: rgba(255, 255, 255, 0.72);
}

.brz-info__wiersz b {
	display: inline;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}

.brz-info__wiersz.is-biezaca,
.brz-info__wiersz.is-biezaca b {
	color: #fff;
	font-weight: 600;
}

.brz-info__min {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
}

.brz-info__min b {
	display: inline;
	color: #fff;
}

/* Na telefonie dymek CSS nie ma szans: kafle leżą w przewijanym pasie slidera,
   który obcina wszystko poza swoim obrysem. JS (domy.js) kopiuje więc treść do
   .brz-info-popover przypiętego do okna i ustawia go pod ikoną po tapnięciu. */
@media (max-width: 767px) {
	.brz-info__dymek {
		display: none;
	}
}

.brz-info-popover {
	position: fixed;
	z-index: 2147483000;
	display: none;
	max-width: calc(100vw - 24px);
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--brz-navy, #232936);
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.brz-info-popover.is-otwarty {
	display: block;
}

.brz-info-popover::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var(--brz-strzalka-x, 50%);
	border: 6px solid transparent;
	border-bottom-color: var(--brz-navy, #232936);
	transform: translateX(-50%);
}

.brz-info-popover b {
	display: block;
	font-weight: 600;
}

.brz-info-popover .brz-info__wiersz b,
.brz-info-popover .brz-info__min b {
	display: inline;
}

.brz-info:hover .brz-info__dymek,
.brz-info:focus .brz-info__dymek,
.brz-info:focus-visible .brz-info__dymek {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Tabela ---------- */

/* Na szerokim ekranie bez przewijania – overflow-x: auto robiłby z kontenera
   scroll container, który obcina też dymek historii ceny nad pierwszymi
   wierszami. Poniżej 1025 px tabela może nie zmieścić się w szerokości,
   wtedy wraca przewijanie w poziomie. */
.brz-domy__tabela-wrap {
	overflow: visible;
}

@media (max-width: 1024px) {
	.brz-domy__tabela-wrap {
		overflow-x: auto;
	}
}

.brz-tabela {
	width: 100%;
	border-collapse: collapse;
	background: var(--brz-karta-bg);
	font-size: 14px;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Motyw (Astra i spółka) rysuje ramkę wokół KAŻDEJ komórki – stąd pionowe kreski
   między kolumnami. Zdejmujemy je i zostawiamy samą poziomą linię między wierszami. */
.brz-domy .brz-tabela,
.brz-domy .brz-tabela thead,
.brz-domy .brz-tabela tbody,
.brz-domy .brz-tabela tr,
.brz-domy .brz-tabela th,
.brz-domy .brz-tabela td {
	border: 0;
}

.brz-domy .brz-tabela thead th {
	padding: 16px 18px;
	background: var(--brz-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.brz-domy .brz-tabela tbody td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--brz-linia);
	background: transparent;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.brz-domy .brz-tabela tbody tr:last-child td {
	border-bottom: 0;
}

/* Delikatna zebra + podświetlenie całego wiersza pod kursorem.
   Tło siedzi na komórkach, nie na <tr> – przy border-collapse tło wiersza
   potrafi chować się pod tłem komórek. */
.brz-domy .brz-tabela tbody tr:nth-child(odd) td {
	background: var(--brz-wiersz-alt, #FAFAF7);
}

.brz-domy .brz-tabela tbody tr:hover td {
	background: var(--brz-wiersz-hover, #EFF3D2);
}

.brz-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
}

.brz-tabela__cena {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.brz-tabela__akcja {
	text-align: right;
}

/* Dwa przyciski w ostatniej kolumnie: „Pokaż na makiecie” (kontur) i akcja
   wg statusu (oliwka). Trzymają się prawej krawędzi i nie łamią wierszy. */
.brz-tabela__akcja .brz-btn {
	white-space: nowrap;
}

.brz-tabela__akcja .brz-btn + .brz-btn {
	margin-left: 8px;
}

.brz-domy .brz-pokaz .brz-ico {
	width: 15px;
	height: 15px;
}

.brz-pobierz {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brz-txt);
	text-decoration: none;
}

.brz-pobierz:hover {
	color: var(--brz-akcent);
}

.brz-brak {
	color: var(--brz-txt-mut);
}

/* ---------- Widok i filtrowanie ----------
   Przełącznika Kafle / Tabela nie ma. Domyślnie (data-widok="auto") desktop
   dostaje tabelę, telefon kafle; „kafle” i „tabela” wymuszają jeden widok.
   Granica 768 px = breakpoint mobile Elementora. */

.brz-domy[data-widok="kafle"] .brz-domy__tabela-wrap,
.brz-domy[data-widok="tabela"] .brz-domy__grid {
	display: none;
}

@media (min-width: 768px) {
	.brz-domy[data-widok="auto"] .brz-domy__grid {
		display: none;
	}
}

@media (max-width: 767px) {
	.brz-domy[data-widok="auto"] .brz-domy__tabela-wrap {
		display: none;
	}
}

.brz-domy .is-ukryty {
	display: none !important;
}

.brz-domy__pusto {
	margin: 0;
	padding: 40px 20px;
	border: 1px dashed var(--brz-linia);
	color: var(--brz-txt-mut);
	text-align: center;
}

/* ---------- Responsywność ---------- */

@media (max-width: 1024px) {
	.brz-domy__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.brz-domy__pasek {
		flex-direction: column;
		align-items: stretch;
	}

	/* Tabela zostaje tabelą i przewija się w poziomie. Rozbijanie jej na karty
	   gubiło możliwość porównania kolumn między lokalami. */
	.brz-domy__tabela-wrap {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.brz-tabela {
		min-width: 760px;
		font-size: 14px;
	}

	.brz-tabela thead th {
		padding: 14px;
	}

	.brz-tabela tbody td {
		padding: 13px 14px;
	}
}

/* ---------- Slider kafli na telefonie ----------
   767px = domyślny breakpoint mobile Elementora. Siatka zmienia się w poziomy
   pas z scroll-snap: widać jeden kafel i ćwiartkę następnego, strzałka przewija
   o jeden kafel. Reguła kontrolki „Kolumn w siatce” ustawia tylko
   grid-template-columns, więc display: flex ją unieważnia. */

.brz-domy__slider {
	position: relative;
}

.brz-domy .brz-domy__strzalka {
	display: none;
}

@media (max-width: 767px) {
	.brz-domy__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Zapas z prawej, żeby ostatni kafel dał się dosunąć do lewej krawędzi. */
		padding-right: 10%;
		scroll-padding-left: 0;
	}

	.brz-domy__grid::-webkit-scrollbar {
		display: none;
	}

	/* Kafel prawie na całą szerokość — z następnego widać tylko ok. 10 %. */
	.brz-domy__grid .brz-card {
		flex: 0 0 calc(90% - 12px);
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Przyciski jedno pod drugim na całą szerokość: „Szczegóły” nad „Pokaż na
	   makiecie” (awers), „Karta lokalu” nad „Zapytaj” (rewers). Obok siebie
	   nie mieściły się w wąskim kaflu. */
	.brz-card__stopka,
	.brz-card__akcje {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.brz-domy .brz-card__stopka .brz-btn,
	.brz-domy .brz-card__akcje .brz-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Ciaśniej: obie strony karty dzielą jedną wysokość, więc każdy zaoszczędzony
	   piksel na rewersie to mniej pustki nad przyciskami awersu. */
	.brz-card__body {
		padding: 16px 16px 18px;
	}

	.brz-card__rewers .brz-card__body {
		padding-top: 10px;
	}

	.brz-card__media--rzut {
		min-height: 140px;
	}

	.brz-card__rewers .brz-specy {
		margin-bottom: 10px;
	}

	.brz-card__rewers .brz-specy__wiersz {
		padding: 6px 0;
	}

	.brz-card__uklad {
		margin-bottom: 8px;
	}

	.brz-card__meta {
		margin-bottom: 10px;
	}

	.brz-card__m2 {
		margin-bottom: 14px;
	}

	/* Strzałki na wysokości zdjęcia, nie na środku karty – tam zasłaniały nazwę
	   lokalu. Środek zdjęcia liczymy z szerokości kafla (90 % pasa) i proporcji
	   zdjęcia (--brz-proporcja); clamp trzyma go w rozsądnym zakresie. */
	.brz-domy .brz-domy__strzalka {
		position: absolute;
		top: clamp(70px, calc((90vw - 60px) / var(--brz-proporcja, 1.35) / 2), 160px);
		z-index: 4;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--brz-obrys);
		border-radius: 50%;
		background: var(--brz-karta-bg);
		background-image: none;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
		color: var(--brz-txt);
		transform: translateY(-50%);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.brz-domy .brz-domy__strzalka[hidden] {
		display: none;
	}

	.brz-domy .brz-domy__strzalka--lewo {
		left: 6px;
	}

	.brz-domy .brz-domy__strzalka--prawo {
		right: 6px;
	}

	.brz-domy .brz-domy__strzalka:hover,
	.brz-domy .brz-domy__strzalka:focus-visible {
		background: var(--brz-navy);
		border-color: var(--brz-navy);
		color: #fff;
	}

	.brz-domy .brz-domy__strzalka .brz-ico {
		width: 20px;
		height: 20px;
	}

	.brz-card__tytul,
	.brz-card__cena {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brz-card__flip,
	.brz-domy .brz-card__obrot .brz-ico {
		transition: none;
	}

	.brz-domy .brz-card__obrot:hover .brz-ico {
		transform: none;
	}
}