/* Rebell Rooms — front end.
   Colours come from CSS custom properties printed in wp_head by
   RBR_Settings::output_css_vars(), so changing a hex in Settings restyles
   everything here. Fallbacks match the approved design. */

.rbr {
	--rbr-p: var(--rbr-primary, #95569e);
	--rbr-pd: var(--rbr-dark, #73427a);
	--rbr-t: var(--rbr-tint, #f8f3f9);
	--rbr-b: var(--rbr-border, #e7d7e9);
	--rbr-a: var(--rbr-accent, #ddb10a);
	--rbr-ak: var(--rbr-accent-ink, #3a2e05);
	--rbr-ok: var(--rbr-available, #1b9355);
	--rbr-k: var(--rbr-ink, #241f2a);
	--rbr-muted: #635d68;
	--rbr-line: #e8e4ea;
	--rbr-radius: 12px;

	/* The gallery and the content row below it share these, so the side
	   photos and the agent panel line up on both edges. */
	--rbr-aside: 340px;
	--rbr-gutter: 24px;

	color: var(--rbr-k);
	line-height: 1.55;
}

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

/* In theme mode the theme's own page wrapper supplies the outer spacing and
   width, so the container only needs to cap the line length. The full-width
   plugin template adds its own padding below. */
.rbr-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}

body.rbr-standalone .rbr-container {
	padding: 32px 20px 64px;
}

.rbr-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rbr-p);
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 18px;
}

.rbr-back:hover {
	text-decoration: underline;
}

/* Gallery -------------------------------------------------------------- */

/* Two columns: the photo and its thumbnails on the left, the other rooms in
   the house on the right. The right column uses the same width and gutter as
   the agent panel below, so both edges line up. A room with no siblings has
   nothing for the right column, so the gallery takes the full width. */
.rbr-gallery-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rbr-aside);
	gap: var(--rbr-gutter);
	align-items: stretch;
	margin-bottom: 26px;
}

.rbr-gallery-row--solo {
	grid-template-columns: minmax(0, 1fr);
}

.rbr-gallery-hero {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.rbr-gallery-hero figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--rbr-radius);
	background: var(--rbr-t);
}

/* Blurred backdrop. The same photo, scaled past the frame and softened, so a
   portrait or narrow photo sits on its own colours instead of bare bars. It
   overshoots the frame so the blur never fades to transparent at the edges. */
.rbr-gallery-hero__blur {
	position: absolute;
	inset: -40px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(26px) saturate(1.15);
	transform: translateZ(0);
	pointer-events: none;
}

/* The whole photo, never cropped, at its own proportions. */
.rbr-gallery-hero__main img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 440px;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}

.rbr-gallery-hero__count {
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: 14px;
	background: rgba(36, 31, 42, 0.78);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.rbr-gallery-hero__count:hover {
	background: var(--rbr-a);
	color: var(--rbr-ak);
}

/* Carousel arrows */

.rbr-gnav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--rbr-k);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(36, 31, 42, 0.22);
	transition: background-color 0.15s ease, color 0.15s ease;
	z-index: 2;
}

.rbr-gnav:hover,
.rbr-gnav:focus-visible {
	background: var(--rbr-p);
	color: #fff;
}

.rbr-gnav--prev { left: 12px; }
.rbr-gnav--next { right: 12px; }

/* Thumbnail strip. Every thumbnail is the same fixed box, whatever size of
   photo was uploaded. The photo is shown whole inside it (never cropped) on a
   blurred copy of itself, so tall, wide and tiny photos all sit neatly.

   The box size is set by two variables and the selectors are kept specific on
   purpose: themes commonly restyle every button and img, and the thumbnails
   must not pick up their padding, min sizes or auto heights. */

.rbr {
	--rbr-thumb-w: 104px;
	--rbr-thumb-h: 78px;
}

.rbr .rbr-thumbs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	margin: 0;
	scrollbar-width: thin;
}

.rbr .rbr-thumbs .rbr-thumbs__item {
	position: relative;
	display: block;
	flex: 0 0 var(--rbr-thumb-w);
	box-sizing: border-box;
	width: var(--rbr-thumb-w);
	min-width: var(--rbr-thumb-w);
	max-width: var(--rbr-thumb-w);
	height: var(--rbr-thumb-h);
	min-height: var(--rbr-thumb-h);
	max-height: var(--rbr-thumb-h);
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--rbr-t);
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

/* Blurred copy of the photo behind it. */
.rbr .rbr-thumbs .rbr-thumbs__item::before {
	content: "";
	position: absolute;
	inset: -8px;
	background: var(--rbr-bg, none) center / cover no-repeat;
	filter: blur(8px);
}

/* Positioned out of the flow, so the photo's own dimensions can never change
   the size of the box. */
.rbr .rbr-thumbs .rbr-thumbs__item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	object-position: center;
	display: block;
}

.rbr .rbr-thumbs .rbr-thumbs__item:hover {
	opacity: 1;
}

.rbr .rbr-thumbs .rbr-thumbs__item.is-active {
	opacity: 1;
	border-color: var(--rbr-a);
}

/* Map ------------------------------------------------------------------ */

.rbr-map {
	position: relative;
	border-radius: var(--rbr-radius);
	overflow: hidden;
	border: 1px solid var(--rbr-line);
	background: var(--rbr-t);
}

.rbr-map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
}

.rbr-map__canvas {
	width: 100%;
	height: 380px;
	z-index: 1;
}

/* Top right, clear of Leaflet's zoom control at top left. */
.rbr-map__badge {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 500;
	background: rgba(255, 255, 255, 0.94);
	color: var(--rbr-k);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 6px 11px;
	border-radius: 7px;
	box-shadow: 0 1px 5px rgba(36, 31, 42, 0.2);
	pointer-events: none;
}

/* Shown briefly when someone scrolls over the map, then fades. */
.rbr-map__hint {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 600;
	background: rgba(36, 31, 42, 0.86);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.rbr-map__hint.is-visible {
	opacity: 1;
}

/* Bottom left, inside the frame. Attribution keeps the bottom right. */
.rbr-map__actions {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 500;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	max-width: calc(100% - 24px);
}

/* The element selector keeps specificity above theme link rules without
   depending on an ancestor class. */
.rbr-map .rbr-map__actions a.rbr-map__action,
.rbr-map .rbr-map__actions a.rbr-map__action:link,
.rbr-map .rbr-map__actions a.rbr-map__action:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0;
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var(--rbr-k);
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 5px rgba(36, 31, 42, 0.22);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rbr-map .rbr-map__actions a.rbr-map__action:hover,
.rbr-map .rbr-map__actions a.rbr-map__action:focus {
	background-color: var(--rbr-p);
	color: #fff;
}

.rbr-map__walk {
	margin: -8px 0 14px;
	color: var(--rbr-muted);
	font-size: 14px;
}

.rbr-map__link a {
	color: var(--rbr-p);
	font-weight: 600;
}

/* Map pins */

.rbr-pin {
	display: block;
	width: 30px;
	height: 40px;
	position: relative;
	filter: drop-shadow( 0 3px 5px rgba(36, 31, 42, 0.35) );
}

/* Classic teardrop: a circle with a tapered tail beneath it. */
.rbr-pin::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background: var(--pin, #95569e);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	transform-origin: center;
}

.rbr-pin__dot {
	position: absolute;
	left: 50%;
	top: 15px;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	background: #fff;
	border-radius: 50%;
	z-index: 2;
}

.leaflet-popup-content {
	font-size: 14px;
}

.leaflet-container a.leaflet-popup-close-button {
	color: var(--rbr-muted);
}

/* Layout --------------------------------------------------------------- */

.rbr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rbr-aside);
	gap: 36px var(--rbr-gutter);
	align-items: start;
}

.rbr-main {
	min-width: 0;
}

/* Head ----------------------------------------------------------------- */

.rbr-head {
	border-bottom: 1px solid var(--rbr-line);
	padding-bottom: 22px;
	margin-bottom: 8px;
	padding-top: 2px;
}

.rbr-head__title {
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.15;
	margin: 10px 0 6px;
	color: var(--rbr-k);
}

.rbr-head__address {
	margin: 0 0 4px;
	color: var(--rbr-muted);
	font-size: 16px;
}

.rbr-head__walk {
	margin: 0;
	color: var(--rbr-p);
	font-size: 14px;
	font-weight: 600;
}

.rbr-price {
	margin-top: 16px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.rbr-price__figure {
	font-size: 34px;
	font-weight: 700;
	color: var(--rbr-p);
	letter-spacing: -0.02em;
}

.rbr-price__unit {
	font-size: 14px;
	color: var(--rbr-muted);
}

.rbr-price__alt {
	font-size: 14px;
	color: var(--rbr-muted);
	width: 100%;
}

.rbr-price__poa {
	font-size: 20px;
	font-weight: 600;
	color: var(--rbr-muted);
}

/* Status pills --------------------------------------------------------- */

.rbr-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: #f1f0f4;
	color: var(--rbr-muted);
	white-space: nowrap;
}

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

.rbr-status--available {
	background: rgba(27, 147, 85, 0.12);
	color: var(--rbr-ok);
}

.rbr-status--coming_soon {
	background: rgba(176, 110, 0, 0.13);
	color: #8a5600;
}

/* Sections ------------------------------------------------------------- */

.rbr-section {
	padding: 26px 0;
	border-bottom: 1px solid var(--rbr-line);
}

.rbr-section:last-child {
	border-bottom: 0;
}

.rbr-section__title {
	font-size: 20px;
	margin: 0 0 16px;
	color: var(--rbr-k);
	padding-left: 12px;
	border-left: 4px solid var(--rbr-a);
	line-height: 1.4;
}

.rbr-prose p {
	margin: 0 0 14px;
}

/* Facts ---------------------------------------------------------------- */

.rbr-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 24px;
	margin: 0;
}

.rbr-facts__item {
	margin: 0;
}

.rbr-facts dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rbr-muted);
	margin: 0 0 3px;
	font-weight: 600;
}

.rbr-facts dd {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

/* Features ------------------------------------------------------------- */

.rbr-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 20px;
}

.rbr-features__item {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
}

.rbr-features__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 8px;
	border-left: 2.5px solid var(--rbr-p);
	border-bottom: 2.5px solid var(--rbr-p);
	transform: rotate(-45deg);
}

.rbr-features__item--off {
	color: #8b8798;
	text-decoration: line-through;
	text-decoration-color: #c9c5d4;
}

.rbr-features__item--off span {
	display: block;
	font-size: 12px;
	text-decoration: none;
	color: #8b8798;
}

.rbr-features__item--off::before {
	border-color: #c9c5d4;
	transform: none;
	top: 9px;
	height: 0;
	width: 13px;
	border-left: 0;
	border-bottom: 2.5px solid #c9c5d4;
}

/* Other rooms in this house -------------------------------------------- */

/* Sits in the right-hand column beside the main photo. It is taken out of the
   flow so the photo and thumbnails alone set the row height, and the list
   scrolls inside the panel when a house has more rooms than fit. */
.rbr-gallery-row__side {
	position: relative;
	min-width: 0;
}

.rbr-siblings {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 18px 16px 16px;
	border: 1px solid var(--rbr-line);
	border-radius: var(--rbr-radius);
	background: #fff;
}

.rbr-siblings__title {
	flex: 0 0 auto;
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 4px solid var(--rbr-a);
	font-size: 17px;
	line-height: 1.35;
	color: var(--rbr-k);
}

.rbr-siblings__summary {
	flex: 0 0 auto;
	margin: 0 0 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rbr-p);
}

.rbr-siblings__list {
	flex: 1 1 auto;
	min-height: 0;
	list-style: none;
	margin: 0;
	padding: 0 4px 0 0;
	display: grid;
	align-content: start;
	gap: 10px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.rbr-sibling {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-areas:
		"media body"
		"media status";
	column-gap: 12px;
	row-gap: 6px;
	align-items: start;
	padding: 10px;
	border: 1px solid var(--rbr-line);
	border-radius: var(--rbr-radius);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rbr-sibling:hover {
	border-color: var(--rbr-b);
	box-shadow: 0 4px 16px rgba(149, 86, 158, 0.12);
}

.rbr-sibling--let {
	background: #faf9fb;
}

.rbr-sibling--let .rbr-sibling__media img,
.rbr-sibling--let .rbr-sibling__price {
	opacity: 0.6;
}

.rbr-sibling__media {
	grid-area: media;
}

.rbr-sibling__media img {
	width: 64px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.rbr-sibling__body {
	grid-area: body;
	min-width: 0;
}

.rbr-sibling > .rbr-status {
	grid-area: status;
	justify-self: start;
	padding: 3px 10px;
	font-size: 11.5px;
}

.rbr-sibling__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}

.rbr-sibling__title a {
	color: var(--rbr-k);
	text-decoration: none;
}

.rbr-sibling__title a:hover {
	color: var(--rbr-p);
	text-decoration: underline;
}

.rbr-sibling__meta {
	margin: 4px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.rbr-sibling__price {
	font-weight: 700;
	color: var(--rbr-p);
	font-size: 15px;
}

.rbr-sibling__price span {
	font-weight: 400;
	color: var(--rbr-muted);
	font-size: 13px;
}

.rbr-sibling__tag {
	font-size: 11px;
	font-weight: 600;
	background: var(--rbr-t);
	color: var(--rbr-p);
	border-radius: 5px;
	padding: 3px 8px;
}

/* Agent panel ---------------------------------------------------------- */

.rbr-aside {
	position: sticky;
	top: 24px;
}

.rbr-agent {
	border: 1px solid var(--rbr-b);
	border-radius: var(--rbr-radius);
	background: var(--rbr-t);
	padding: 22px;
}

.rbr-agent__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--rbr-p);
}

.rbr-agent__logo img {
	max-width: 150px;
	height: auto;
	margin-bottom: 12px;
}

.rbr-agent__name {
	margin: 0 0 6px;
	font-size: 19px;
}

.rbr-agent__address {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--rbr-muted);
}

.rbr-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px 18px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	margin-bottom: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rbr-btn--primary {
	background: var(--rbr-p);
	color: #fff;
}

.rbr-btn--primary:hover,
.rbr-btn--primary:focus {
	background: var(--rbr-pd);
	color: #fff;
}

/* The enquiry button uses the accent so it reads as the primary action in
   the agent panel, where everything else is already purple. */
.rbr-btn--ghost {
	background: var(--rbr-a);
	color: var(--rbr-ak);
	border: 1.5px solid var(--rbr-a);
}

.rbr-btn--ghost:hover,
.rbr-btn--ghost:focus {
	background: var(--rbr-accent-dark, #c69c07);
	border-color: var(--rbr-accent-dark, #c69c07);
	color: var(--rbr-ak);
}

.rbr a:focus-visible,
.rbr button:focus-visible {
	outline: 3px solid var(--rbr-p);
	outline-offset: 2px;
}

/* Lightbox ------------------------------------------------------------- */

.rbr-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(28, 22, 32, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	z-index: 99999;
	padding: 64px 20px;
}

.rbr-lightbox__stage {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rbr-lightbox img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: 8px;
	display: block;
}

.rbr-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 12px;
}

.rbr-lightbox__nav {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rbr-lightbox__nav:hover,
.rbr-lightbox__nav:focus-visible {
	background: var(--rbr-p);
}

.rbr-lightbox__count {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1120px) {
	.rbr {
		--rbr-aside: 300px;
		--rbr-gutter: 20px;
	}
}

@media (max-width: 980px) {
	.rbr-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* The aside drops underneath, so the other-rooms panel does too: back into
	   the flow under the gallery at its natural height. */
	.rbr-gallery-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.rbr-gallery-row__side {
		position: static;
	}

	.rbr-siblings {
		position: static;
	}

	.rbr-siblings__list {
		overflow: visible;
		padding-right: 0;
	}

	.rbr-aside {
		position: static;
	}
}

@media (max-width: 720px) {
	.rbr-gallery-hero__main img {
		height: 260px;
	}

	.rbr {
		--rbr-thumb-w: 78px;
		--rbr-thumb-h: 58px;
	}

	.rbr-lightbox {
		padding: 60px 8px;
	}

	.rbr-lightbox__nav {
		width: 42px;
		height: 42px;
		font-size: 24px;
	}

	body.rbr-standalone .rbr-container {
		padding: 20px 16px 48px;
	}
}

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

/* Search bar ----------------------------------------------------------- */

.rbr-search-app {
	margin-bottom: 32px;
}

.rbr-filters {
	background: #fff;
	border: 1px solid var(--rbr-line);
	border-radius: 16px;
	padding: 18px 20px 16px;
	box-shadow: 0 10px 30px rgba(36, 31, 42, 0.06);
	margin-bottom: 26px;
}

.rbr-filters__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 14px;
	align-items: end;
}

.rbr-filters__row--checks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--rbr-line);
}

.rbr-filters__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--rbr-muted);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

.rbr-filters__control {
	position: relative;
}

.rbr-filters__control::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--rbr-p);
	border-bottom: 2px solid var(--rbr-p);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.rbr-filters select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 1px solid var(--rbr-b);
	border-radius: 10px;
	background: #fff;
	color: var(--rbr-k);
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	padding: 12px 38px 12px 14px;
	line-height: 1.3;
	cursor: pointer;
}

.rbr-filters select:focus-visible {
	outline: 2px solid var(--rbr-p);
	outline-offset: 1px;
}

.rbr-filters__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--rbr-p);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.rbr-filters__submit:hover,
.rbr-filters__submit:focus-visible {
	background: var(--rbr-pd);
}

.rbr-filters__icon {
	display: inline-flex;
}

/* Checkboxes */

.rbr-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: var(--rbr-k);
	user-select: none;
}

.rbr-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rbr-check__box {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid var(--rbr-b);
	background: #fff;
	position: relative;
	flex: 0 0 auto;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.rbr-check input:checked + .rbr-check__box {
	background: var(--rbr-p);
	border-color: var(--rbr-p);
}

.rbr-check input:checked + .rbr-check__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}

.rbr-check input:focus-visible + .rbr-check__box {
	outline: 2px solid var(--rbr-p);
	outline-offset: 2px;
}

.rbr-filters__clear {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--rbr-p);
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rbr-filters__clear:hover {
	color: var(--rbr-pd);
}

/* Results bar ---------------------------------------------------------- */

.rbr-results {
	transition: opacity 0.15s ease;
}

.rbr-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.rbr-results__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.rbr-results__count {
	font-size: 22px;
	margin: 0;
	font-weight: 500;
}

.rbr-results__count strong {
	color: var(--rbr-p);
	font-weight: 800;
}

.rbr-results__sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rbr-results__sort label {
	font-size: 14px;
	color: var(--rbr-muted);
	white-space: nowrap;
}

.rbr-results__sort select {
	min-width: 190px;
}

/* Grid ----------------------------------------------------------------- */

/* Column counts come from settings, with sensible defaults if the variables
   are missing. */
.rbr-grid {
	display: grid;
	grid-template-columns: repeat(var(--rbr-cols-desktop, 4), minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 1024px) {
	.rbr-grid {
		grid-template-columns: repeat(var(--rbr-cols-tablet, 2), minmax(0, 1fr));
		gap: 18px;
	}
}

@media (max-width: 640px) {
	.rbr-grid {
		grid-template-columns: repeat(var(--rbr-cols-mobile, 1), minmax(0, 1fr));
		gap: 16px;
	}
}

.rbr-card {
	border: 1px solid var(--rbr-line);
	border-radius: var(--rbr-radius);
	background: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.rbr-card:hover {
	border-color: var(--rbr-b);
	box-shadow: 0 10px 28px rgba(149, 86, 158, 0.16);
	transform: translateY(-2px);
}

.rbr-card--let {
	opacity: 0.72;
}

/* Every card photo is the same 4:3 box, whatever shape the uploaded photo is.
   The whole photo is shown (never cropped) over a blurred copy of itself, so a
   tall or narrow shot fills the box neatly instead of stretching the card.

   The link and image are taken out of the flow and pinned to the box, so the
   photo's own dimensions can never change the card height, and the selectors
   are specific enough that theme image and link styles do not override them. */
.rbr .rbr-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto;
	overflow: hidden;
	background: var(--rbr-t);
	line-height: 0;
}

.rbr .rbr-card__media::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--rbr-bg, none) center / cover no-repeat;
	filter: blur(18px) saturate(1.1);
}

.rbr .rbr-card__media > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.rbr .rbr-card__media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	display: block;
}

.rbr-card__status {
	z-index: 2;
	position: absolute;
	left: 12px;
	top: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(36, 31, 42, 0.14);
}

.rbr-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
}

.rbr-card__title {
	font-size: 17px;
	margin: 0;
	line-height: 1.3;
}

.rbr-card__title a {
	color: var(--rbr-k);
	text-decoration: none;
}

.rbr-card__title a:hover {
	color: var(--rbr-p);
}

.rbr-card__walk {
	margin: 0;
	font-size: 13px;
	color: var(--rbr-muted);
	display: flex;
	align-items: center;
	gap: 5px;
}

.rbr-card__pin {
	color: var(--rbr-p);
	display: inline-flex;
}

.rbr-card__price {
	margin: 4px 0 2px;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.rbr-card__price .rbr-price__figure {
	font-size: 24px;
}

.rbr-card__price .rbr-price__unit {
	font-size: 12px;
}

.rbr-card__specs {
	list-style: none;
	margin: 4px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rbr-card__specs li {
	font-size: 12px;
	font-weight: 600;
	background: var(--rbr-t);
	color: var(--rbr-p);
	border-radius: 6px;
	padding: 4px 9px;
	margin: 0;
}

.rbr-card__spec--off {
	background: #f2f1f5 !important;
	color: var(--rbr-muted) !important;
}

.rbr-card__years {
	margin: 2px 0 10px;
	font-size: 12px;
	color: var(--rbr-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.rbr-card__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c4c1cd;
	flex: 0 0 auto;
}

.rbr-card__dot--available { background: var(--rbr-ok); }
.rbr-card__dot--coming_soon { background: #b06e00; }

.rbr-card__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1.5px solid var(--rbr-p);
	color: var(--rbr-p);
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rbr-card__cta:hover,
.rbr-card__cta:focus {
	background: var(--rbr-p);
	color: #fff;
}

/* Pagination ----------------------------------------------------------- */

.rbr-pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.rbr-page {
	padding: 9px 14px;
	border-radius: 8px;
	border: 1px solid var(--rbr-line);
	background: #fff;
	color: var(--rbr-k);
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rbr-page:hover,
.rbr-page.is-current {
	background: var(--rbr-p);
	border-color: var(--rbr-p);
	color: #fff;
}

.rbr-page--gap {
	border: 0;
	background: none;
	cursor: default;
	color: var(--rbr-muted);
	padding: 9px 4px;
}

.rbr-page--gap:hover {
	background: none;
	color: var(--rbr-muted);
}

/* Empty state ---------------------------------------------------------- */

.rbr-empty {
	padding: 56px 24px;
	text-align: center;
	color: var(--rbr-muted);
	background: var(--rbr-t);
	border-radius: var(--rbr-radius);
}

.rbr-empty__title {
	font-size: 19px;
	font-weight: 700;
	color: var(--rbr-k);
	margin: 0 0 6px;
}

.rbr-btn--inline {
	display: inline-block;
	width: auto;
	margin-top: 14px;
}

/* Search responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
	.rbr-filters__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rbr-filters__field--action {
		grid-column: 1 / -1;
	}

	.rbr-filters__submit {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.rbr-filters__row {
		grid-template-columns: 1fr;
	}

	.rbr-filters {
		padding: 16px;
	}

	.rbr-results__bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.rbr-results__sort {
		width: 100%;
	}

	.rbr-results__sort .rbr-filters__control {
		flex: 1 1 auto;
	}
}

/* Mobile action bar ---------------------------------------------------- */

/* Fixed to the bottom on phones, so calling or enquiring is always one tap
   away without scrolling back to the agent panel. */
.rbr-actionbar {
	display: none;
}

@media (max-width: 780px) {
	.rbr-actionbar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9000;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--rbr-line);
		box-shadow: 0 -4px 18px rgba(36, 31, 42, 0.12);
	}

	.rbr-actionbar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 13px 10px;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		line-height: 1.2;
		text-align: center;
	}

	.rbr-actionbar__btn--call {
		background: var(--rbr-p);
		color: #fff;
	}

	.rbr-actionbar__btn--enquire {
		background: var(--rbr-a);
		color: var(--rbr-ak);
	}

	.rbr-actionbar__btn svg {
		flex: 0 0 auto;
	}

	/* Room for the bar so it never covers the last of the page. */
	.rbr-single {
		padding-bottom: 78px;
	}
}

/* Icons ---------------------------------------------------------------- */

.rbr-icon {
	flex: 0 0 auto;
	vertical-align: -2px;
}

.rbr-card__specs li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rbr-facts dt {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rbr-facts dt .rbr-icon {
	color: var(--rbr-p);
}

.rbr-card__pin {
	display: inline-flex;
	color: var(--rbr-p);
}

/* Icons ---------------------------------------------------------------- */

.rbr-icon {
	flex: 0 0 auto;
	vertical-align: -2px;
}

.rbr-card__specs li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rbr-card__pin .rbr-icon {
	width: 13px;
	height: 13px;
}

.rbr-features__item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding-left: 0;
	font-size: 15px;
}

.rbr-features__item::before {
	content: none;
}

.rbr-features__item .rbr-icon {
	color: var(--rbr-p);
	margin-top: 3px;
	width: 16px;
	height: 16px;
}

.rbr-features__item--off {
	color: #8b8798;
	text-decoration: none;
}

.rbr-features__item--off .rbr-icon {
	color: #b9b5c2;
}

.rbr-features__item--off > span {
	text-decoration: line-through;
	text-decoration-color: #c9c5d4;
}

.rbr-features__item--off em {
	display: block;
	font-size: 12px;
	font-style: normal;
	text-decoration: none;
	color: #8b8798;
}

.rbr-facts__value {
	display: flex;
	align-items: center;
	gap: 7px;
}

.rbr-facts__value .rbr-icon {
	color: var(--rbr-p);
	width: 16px;
	height: 16px;
}

/* Featured strip ------------------------------------------------------- */

.rbr-featured {
	margin: 0 0 32px;
}

.rbr-featured__title {
	font-size: clamp(22px, 2.6vw, 30px);
	margin: 0 0 20px;
	color: var(--rbr-k);
	padding-left: 12px;
	border-left: 4px solid var(--rbr-a);
	line-height: 1.35;
}

.rbr-featured__more {
	margin: 26px 0 0;
	text-align: center;
}

.rbr-featured .rbr-btn--inline {
	display: inline-block;
	width: auto;
	min-width: 200px;
	margin: 0;
}

/* Search form help text --------------------------------------------------
   Small print under a filter, written by the admin and empty by default.
   8px is below the 12px most browsers will render, and is unreadable on a
   phone, so this scales up from a 9px floor and lifts to 11px on desktop —
   still visibly secondary to the 12px label above it. */

.rbr-filters__help {
	margin: 5px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--rbr-muted);
}

@media (max-width: 560px) {
	.rbr-filters__help {
		font-size: 12px;
	}
}

.rbr-filters__help--row {
	flex: 1 0 100%;
	margin: 2px 0 0;
}