/**
 * Brickworks Properties — front end.
 *
 * Deliberately low-specificity and mostly custom properties, so the UiCore Pro
 * theme (or Elementor's global styles) can be layered on top without a fight.
 * Override the tokens below in your child theme rather than editing this file.
 */

.bwp-listing {
	--bwp-gap: 1.5rem;
	/* Square, flat brand — no rounding anywhere and no drop shadows for depth.
	   Kept as tokens rather than deleted so a theme that wants some rounding
	   back can still redefine just these two variables. */
	--bwp-radius: 0;
	--bwp-radius-button: 0;
	--bwp-border: 1px solid rgba(0, 0, 0, 0.1);
	/* The brand accent drives buttons, links and CTAs — keep it your theme's
	   own primary color via these two tokens. Availability itself is a
	   separate set of tokens below (--bwp-status-*), since "available" should
	   still read as good news even on a monochrome brand. */
	--bwp-accent: #111315;
	--bwp-accent-contrast: #fff;
	--bwp-status-available: #1c6b4f;
	--bwp-status-let: #8a3b2a;
	--bwp-muted: #5d6470;
	--bwp-surface: #fff;
	--bwp-surface-alt: #f6f7f8;
	--bwp-map-height: 620px;
	/* No container-type here: inside an Elementor flex container it makes the
	   widget's measured height disagree with the rendered one, leaving a large
	   blank gap under the grid on mobile. The grid below sizes its own columns
	   from the space it's given instead. */
}

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

/* ------------------------------------------------------------------ filters */

.bwp-filters {
	background: var(--bwp-surface-alt);
	border: var(--bwp-border);
	border-radius: var(--bwp-radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.bwp-filters__primary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.875rem;
	align-items: end;
}

.bwp-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bwp-filters__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bwp-muted);
}

.bwp-filters input[type="search"],
.bwp-filters input[type="text"],
.bwp-filters input[type="date"],
.bwp-filters input[type="number"],
.bwp-filters select {
	width: 100%;
	min-height: 42px;
	padding: 0.5rem 0.625rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface);
	font: inherit;
	font-size: 0.9375rem;
	color: inherit;
	/* Stops iOS Safari zooming the viewport on focus. */
	max-width: 100%;
}

.bwp-filters select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d6470' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 11px;
	padding-right: 2rem;
}

.bwp-filters input:focus-visible,
.bwp-filters select:focus-visible,
.bwp-listing button:focus-visible,
.bwp-listing a:focus-visible {
	outline: 2px solid var(--bwp-accent);
	outline-offset: 2px;
}

.bwp-filters__range {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.bwp-filters__range input {
	min-width: 0;
}

.bwp-filters__range-sep {
	color: var(--bwp-muted);
	flex: none;
}

.bwp-filters__actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.bwp-check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	cursor: pointer;
	line-height: 1.3;
}

.bwp-check input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	flex: none;
	accent-color: var(--bwp-accent);
}

/* ------------------------------------------------------------------ buttons */

.bwp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 42px;
	padding: 0.5rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--bwp-radius-button, 0);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bwp-btn--primary {
	background: var(--bwp-accent);
	color: var(--bwp-accent-contrast);
}

.bwp-btn--primary:hover,
.bwp-btn--primary:focus {
	background: color-mix(in srgb, var(--bwp-accent) 85%, #000);
	color: var(--bwp-accent-contrast);
}

.bwp-btn--ghost {
	background: var(--bwp-surface);
	border-color: rgba(0, 0, 0, 0.16);
	color: inherit;
}

.bwp-btn--ghost:hover {
	border-color: var(--bwp-accent);
	color: var(--bwp-accent);
}

.bwp-btn--link {
	background: none;
	padding-inline: 0.25rem;
	color: var(--bwp-muted);
	text-decoration: underline;
	min-height: auto;
}

/* ------------------------------------------------------------------ toolbar */

.bwp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.bwp-toolbar__count {
	margin: 0;
	font-weight: 600;
}

.bwp-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bwp-toolbar__sort label {
	font-size: 0.875rem;
	color: var(--bwp-muted);
	white-space: nowrap;
}

.bwp-toolbar__sort select {
	min-height: 40px;
	padding: 0.4rem 0.6rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface);
	font: inherit;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------- layout */

.bwp-listing__body {
	display: grid;
	gap: var(--bwp-gap);
}

.bwp-listing--split .bwp-listing__body {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
}

.bwp-listing--split .bwp-listing__map-col {
	position: sticky;
	top: 1.5rem;
}

.bwp-listing__results {
	position: relative;
	min-width: 0;
}

.bwp-listing--map-only .bwp-listing__body {
	grid-template-columns: 1fr;
}

@media (max-width: 860px) {
	.bwp-listing--split .bwp-listing__body {
		grid-template-columns: 1fr;
	}

	.bwp-listing--split .bwp-listing__map-col {
		position: static;
		order: -1;
	}

	.bwp-listing--split .bwp-map {
		--bwp-map-height: 340px;
	}
}

/* --------------------------------------------------------------------- grid */

/* Up to --bwp-cols columns, dropping one whenever a card would get narrower
   than --bwp-card-min — so it adapts to a narrow Elementor column as well as a
   narrow screen, with no container query needed. */
.bwp-grid {
	--bwp-card-min: 260px;
	display: grid;
	gap: var(--bwp-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--bwp-card-min), calc((100% - (var(--bwp-cols, 3) - 1) * var(--bwp-gap)) / var(--bwp-cols, 3)))),
			1fr
		)
	);
}

.bwp-grid--cols-1 { --bwp-cols: 1; }
.bwp-grid--cols-2 { --bwp-cols: 2; }
.bwp-grid--cols-3 { --bwp-cols: 3; }
.bwp-grid--cols-4 { --bwp-cols: 4; }

/* --------------------------------------------------------------------- card */

.bwp-card {
	display: flex;
	flex-direction: column;
	background: var(--bwp-surface);
	border: var(--bwp-border);
	border-radius: var(--bwp-radius);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.bwp-card:hover,
.bwp-card.is-map-hover {
	border-color: var(--bwp-accent);
}

.bwp-card--let {
	opacity: 0.85;
}

.bwp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bwp-surface-alt);
	overflow: hidden;
}

/* Scoped under .bwp-card so it outranks Elementor's `.elementor img
   { height: auto }`, which otherwise lets 3:2 photos shrink inside the 4:3
   frame and leave a strip of background under each one. */
.bwp-card .bwp-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bwp-card__image--placeholder {
	display: grid;
	place-items: center;
	color: rgba(0, 0, 0, 0.18);
}

.bwp-card__image--placeholder .bwp-icon {
	width: 42px;
	height: 42px;
}

.bwp-card__flags {
	position: absolute;
	inset-inline-start: 0.625rem;
	inset-block-start: 0.625rem;
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.bwp-flag {
	padding: 0.2rem 0.5rem;
	border-radius: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: rgba(17, 20, 24, 0.85);
	color: #fff;
}

.bwp-flag--featured {
	background: var(--bwp-accent);
}

.bwp-flag--let {
	background: var(--bwp-status-let);
}

.bwp-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------- card carousel */

.bwp-card__carousel {
	position: relative;
	width: 100%;
	height: 100%;
}

.bwp-card__carousel-track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Only affects the arrow buttons' JS-driven scrollLeft jump, not native
	   touch/trackpad swiping — and the browser's own smooth-scroll handles a
	   snap container far more reliably than a JS scrollTo({behavior:'smooth'})
	   racing against scroll-snap does. */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

@media (prefers-reduced-motion: reduce) {
	.bwp-card__carousel-track {
		scroll-behavior: auto;
	}
}

.bwp-card__carousel-track::-webkit-scrollbar {
	display: none;
}

.bwp-card__carousel-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.bwp-card__carousel-nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: rgba(17, 20, 24, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bwp-card__carousel-nav:hover,
.bwp-card__carousel-nav:focus-visible {
	background: rgba(17, 20, 24, 0.85);
}

.bwp-card__carousel-nav .bwp-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.bwp-card__carousel-nav--prev {
	inset-inline-start: 0.5rem;
}

.bwp-card__carousel-nav--next {
	inset-inline-end: 0.5rem;
}

.bwp-card__carousel-count {
	position: absolute;
	inset-inline-end: 0.625rem;
	inset-block-end: 0.625rem;
	padding: 0.15rem 0.45rem;
	background: rgba(17, 20, 24, 0.7);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	pointer-events: none;
}

.bwp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.875rem 1rem 1rem;
	flex: 1;
}

.bwp-card__rent {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0;
}

.bwp-card__rent-primary {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
}

.bwp-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 600;
}

.bwp-card__title a {
	color: inherit;
	text-decoration: none;
}

.bwp-card__title a:hover {
	text-decoration: underline;
}

.bwp-card__address {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--bwp-muted);
}

.bwp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.85rem;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--bwp-muted);
}

.bwp-card__meta li {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.bwp-card__summary {
	margin: 0.15rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bwp-muted);
}

.bwp-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: var(--bwp-border);
	font-size: 0.8125rem;
}

.bwp-card__available {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
	color: var(--bwp-status-available);
}

.bwp-card__furnished {
	color: var(--bwp-muted);
}

.bwp-icon {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.125em;
}

/* ---------------------------------------------------------------------- map */

.bwp-map {
	height: var(--bwp-map-height, 620px);
	min-height: 260px;
	border: var(--bwp-border);
	border-radius: var(--bwp-radius);
	overflow: hidden;
	background: var(--bwp-surface-alt);
	z-index: 0; /* Keeps Leaflet panes below sticky theme headers. */
}

.bwp-map__noscript {
	padding: 1rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--bwp-muted);
}

.bwp-map__controls {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.6rem;
}

.bwp-map__note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--bwp-muted);
}

/* Price-label markers instead of pins — the rent is the thing people scan for. */
.bwp-marker {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}

.bwp-marker__label {
	display: block;
	transform: translate(-50%, -130%);
	padding: 0.2rem 0.5rem;
	border-radius: 0;
	/* A pin's color is a status signal on this kind of map, not a branding
	   moment — available/let use the same dedicated tokens as the flags and
	   card text so a visitor can scan the map the same way they scan the grid. */
	background: var(--bwp-status-available, #1c6b4f);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.bwp-marker--let .bwp-marker__label {
	background: var(--bwp-status-let, #8a3b2a);
}

.bwp-marker.is-active .bwp-marker__label,
.bwp-marker:hover .bwp-marker__label {
	transform: translate(-50%, -145%) scale(1.08);
	background: #111418;
	z-index: 1000;
}

.bwp-popup .leaflet-popup-content,
.leaflet-popup-content .bwp-popup {
	margin: 0;
}

.bwp-popup {
	display: flex;
	flex-direction: column;
}

.bwp-popup__media img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.bwp-popup__body {
	padding: 0.6rem 0.75rem 0.75rem;
}

.bwp-popup__rent {
	margin: 0 0 0.15rem;
	font-size: 1rem;
	font-weight: 700;
}

.bwp-popup__title {
	margin: 0 0 0.15rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.bwp-popup__title a {
	color: inherit;
	text-decoration: none;
}

.bwp-popup__address,
.bwp-popup__spec {
	margin: 0 0 0.15rem;
	font-size: 0.8125rem;
	color: var(--bwp-muted, #5d6470);
}

.bwp-popup__link {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Leaflet injects its own popup wrapper; keep our padding from doubling up,
   and square off Leaflet's own rounded corners and shadows (its stylesheet
   is enqueued as a dependency of this one specifically so this cascade wins
   without needing !important — see BWP_Render::enqueue_assets()). */
.leaflet-container .leaflet-popup-content-wrapper {
	border-radius: 0;
	box-shadow: none;
	border: var(--bwp-border);
	padding: 0;
	overflow: hidden;
}

.leaflet-container .leaflet-popup-content {
	margin: 0;
	width: auto !important;
}

.leaflet-container .leaflet-popup-tip {
	box-shadow: none;
	border: var(--bwp-border);
	border-top: 0;
	border-left: 0;
}

.leaflet-container .leaflet-bar,
.leaflet-container .leaflet-control-layers {
	border-radius: 0;
	box-shadow: none;
	border: var(--bwp-border);
}

.leaflet-container .leaflet-bar a {
	border-radius: 0 !important;
}

.leaflet-container .leaflet-tooltip {
	border-radius: 0;
	box-shadow: none;
	border: var(--bwp-border);
}

/* Leaflet.markercluster's default count badges are circles; square them off
   to match — the outer "halo" ring and the inner count both get flattened. */
.leaflet-container .marker-cluster {
	border-radius: 0;
}

.leaflet-container .marker-cluster div {
	border-radius: 0;
}

/* ------------------------------------------------------- loading / empty */

.bwp-listing.is-loading .bwp-grid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bwp-listing__loading {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem 0;
	z-index: 2;
}

.bwp-listing__loading[hidden] {
	display: none;
}

/* A sliding bar rather than a spinning ring — no circle needed for a loading
   indicator, and a rectangle sliding along a track fits the square brand. */
.bwp-spinner {
	position: relative;
	width: 140px;
	height: 3px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
}

.bwp-spinner::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -40%;
	width: 40%;
	background: var(--bwp-accent);
	animation: bwp-loading-bar 1s ease-in-out infinite;
}

@keyframes bwp-loading-bar {
	0% { inset-inline-start: -40%; }
	100% { inset-inline-start: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bwp-spinner::after { animation-duration: 2.5s; }
	.bwp-marker__label { transition: none; }
}

.bwp-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--bwp-surface-alt);
	border: var(--bwp-border);
	border-radius: var(--bwp-radius);
}

.bwp-empty__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.bwp-empty__hint {
	margin: 0 0 1rem;
	color: var(--bwp-muted);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------- pagination */

.bwp-pagination {
	margin-top: 1.75rem;
}

.bwp-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bwp-pagination a,
.bwp-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.6rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface);
	font-size: 0.9375rem;
	text-decoration: none;
	color: inherit;
}

.bwp-pagination .current {
	background: var(--bwp-accent);
	border-color: var(--bwp-accent);
	color: var(--bwp-accent-contrast);
	font-weight: 700;
}

.bwp-pagination a:hover {
	border-color: var(--bwp-accent);
	color: var(--bwp-accent);
}

/* ------------------------------------------------------- single property */

.bwp-single {
	--bwp-radius: 0;
	--bwp-radius-button: 0;
	--bwp-border: 1px solid rgba(0, 0, 0, 0.1);
	--bwp-muted: #5d6470;
	--bwp-accent: #111315;
	--bwp-accent-contrast: #fff;
	--bwp-status-available: #1c6b4f;
	--bwp-status-let: #8a3b2a;
	--bwp-surface: #fff;
	--bwp-surface-alt: #f6f7f8;
	max-width: 1100px;
	margin: 2rem auto 0;
	container-type: inline-size;
}

/* -------------------------------------------------------------------- hero */

.bwp-hero {
	margin-bottom: 1.75rem;
}

.bwp-hero__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bwp-muted);
	text-decoration: none;
}

.bwp-hero__breadcrumb:hover {
	color: var(--bwp-accent);
}

.bwp-hero__breadcrumb .bwp-icon {
	width: 0.9em;
	height: 0.9em;
}

.bwp-hero__flags {
	display: flex;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.bwp-hero__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	border-bottom: var(--bwp-border);
}

.bwp-hero__heading {
	min-width: 0;
}

.bwp-hero__title {
	margin: 0 0 0.4rem;
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 700;
}

.bwp-hero__address {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.35rem;
	color: var(--bwp-muted);
	font-size: 1rem;
}

.bwp-hero__spec {
	margin: 0;
	color: var(--bwp-muted);
	font-size: 0.9375rem;
}

.bwp-hero__price {
	text-align: end;
	flex: none;
}

.bwp-hero__rent {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}

.bwp-hero__available {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3rem;
	margin: 0.5rem 0 0;
	color: var(--bwp-status-available);
	font-weight: 600;
	font-size: 0.875rem;
}

.bwp-hero__cta {
	display: inline-flex;
	margin-top: 0.85rem;
}

@container (max-width: 560px) {
	.bwp-hero__top {
		align-items: flex-start;
	}

	.bwp-hero__price {
		text-align: start;
	}

	.bwp-hero__available {
		justify-content: flex-start;
	}

	.bwp-hero__cta {
		width: 100%;
	}
}

/* ----------------------------------------------------------------- gallery */

.bwp-single__gallery {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 2rem;
	border-radius: var(--bwp-radius);
	overflow: hidden;
}

.bwp-single__gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bwp-surface-alt);
	cursor: pointer;
}

.bwp-single__gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bwp-single__gallery-item:hover img {
	transform: scale(1.03);
}

.bwp-single__gallery-expand {
	position: absolute;
	inset-inline-end: 0.75rem;
	inset-block-end: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	background: rgba(17, 20, 24, 0.75);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.bwp-single__gallery-expand .bwp-icon {
	width: 1rem;
	height: 1rem;
}

.bwp-single__gallery--count-1 {
	aspect-ratio: 16 / 8;
	grid-template-columns: 1fr;
}

.bwp-single__gallery--count-2 {
	aspect-ratio: 16 / 7;
	grid-template-columns: 1fr 1fr;
}

.bwp-single__gallery--count-3,
.bwp-single__gallery--count-4 {
	aspect-ratio: 16 / 8;
	grid-template-rows: 1fr 1fr;
}

.bwp-single__gallery--count-3 {
	grid-template-columns: 2fr 1fr;
}

.bwp-single__gallery--count-4 {
	grid-template-columns: 2fr 1fr 1fr;
}

.bwp-single__gallery--count-3 .bwp-single__gallery-item:first-child,
.bwp-single__gallery--count-4 .bwp-single__gallery-item:first-child {
	grid-row: 1 / 3;
}

.bwp-single__gallery--count-5plus {
	aspect-ratio: 16 / 9;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;
}

.bwp-single__gallery--count-5plus .bwp-single__gallery-item:first-child {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

/* The bento grid has exactly five cells. Photos past the fifth stay in the
   DOM so the lightbox (which collects every link) can still page through
   them via "View all N photos" — without this they spill into extra
   implicit rows and crush the fixed-aspect-ratio grid into thin strips. */
.bwp-single__gallery--count-5plus .bwp-single__gallery-item:nth-child(n+6) {
	display: none;
}

/* A four- or five-way bento grid reads as clutter once the container is
   narrow — fall back to a simple stack of ordinary-shaped photos instead of
   fighting for space. */
@container (max-width: 640px) {
	.bwp-single__gallery {
		aspect-ratio: auto !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: none !important;
	}

	.bwp-single__gallery-item,
	.bwp-single__gallery-item:first-child {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.bwp-single__gallery-item img {
		aspect-ratio: 4 / 3;
		height: auto;
	}
}

/* ---------------------------------------------------------------- lightbox */

.bwp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	background: rgba(10, 11, 12, 0.94);
}

.bwp-lightbox[hidden] {
	display: none;
}

.bwp-lightbox__stage {
	display: grid;
	place-items: center;
	width: min(94vw, 1400px);
	height: min(88vh, 900px);
	margin: 0;
}

.bwp-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
}

.bwp-lightbox__close,
.bwp-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bwp-lightbox__close:hover,
.bwp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.18);
}

.bwp-lightbox__close .bwp-icon,
.bwp-lightbox__nav .bwp-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.bwp-lightbox__close {
	inset-inline-end: 1rem;
	inset-block-start: 1rem;
}

.bwp-lightbox__nav--prev {
	inset-inline-start: 1rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.bwp-lightbox__nav--next {
	inset-inline-end: 1rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.bwp-lightbox__count {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	font-weight: 600;
}

/* A real viewport media query, not a container query — the lightbox is a
   fixed full-screen overlay, so its breakpoint should track the actual
   viewport rather than the width of the .bwp-single content column it
   happens to sit inside. */
@media (max-width: 640px) {
	.bwp-lightbox__close,
	.bwp-lightbox__nav {
		width: 2.5rem;
		height: 2.5rem;
	}

	.bwp-lightbox__stage {
		width: 92vw;
		height: 70vh;
	}
}

/* ------------------------------------------------------------------- video */

.bwp-single__video {
	margin-bottom: 2rem;
}

.bwp-single__video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.bwp-single__video-frame iframe,
.bwp-single__video-frame embed,
.bwp-single__video-frame object,
.bwp-single__video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ----------------------------------------------------------------- details */

.bwp-single__description {
	margin-bottom: 2rem;
	font-size: 1rem;
	line-height: 1.65;
}

.bwp-details {
	margin-bottom: 2rem;
}

.bwp-details__bills {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.25rem;
	border-radius: 0;
	background: color-mix(in srgb, var(--bwp-status-available) 10%, transparent);
	color: var(--bwp-status-available);
	font-size: 0.9375rem;
}

.bwp-details__bills strong {
	color: inherit;
}

.bwp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

.bwp-facts__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 9rem;
	flex: 1 1 9rem;
	padding: 0.85rem 1rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface-alt);
}

.bwp-facts__item .bwp-icon {
	width: 1.4rem;
	height: 1.4rem;
	flex: none;
	color: var(--bwp-muted);
}

.bwp-facts__item > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bwp-facts__value {
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.bwp-facts__label {
	color: var(--bwp-muted);
	font-size: 0.8125rem;
}

.bwp-details__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
}

.bwp-details__amenities li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.bwp-details__amenities .bwp-icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--bwp-status-available);
}

.bwp-details__heading {
	margin: 0 0 0.85rem;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Separates the always-visible details from the facts strip/amenities above —
   this used to be the top edge of a <details> disclosure; now it's just the
   first heading in the section. */
.bwp-details__heading:first-of-type {
	padding-top: 1rem;
	border-top: var(--bwp-border, 1px solid rgba(0, 0, 0, 0.1));
}

.bwp-details__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem 1.5rem;
	margin: 0 0 1.75rem;
}

.bwp-details__grid-item {
	padding-bottom: 0.75rem;
	border-bottom: var(--bwp-border, 1px solid rgba(0, 0, 0, 0.1));
}

.bwp-details__grid-item dt {
	margin: 0 0 0.2rem;
	color: var(--bwp-muted, #5d6470);
	font-size: 0.8125rem;
	font-weight: 600;
}

.bwp-details__grid-item dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Three columns on a wide single-property page, dropping a column as the
   container narrows rather than at a fixed viewport width — this template
   can render inside a narrow Elementor column too. */
@container (max-width: 720px) {
	.bwp-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 420px) {
	.bwp-details__grid {
		grid-template-columns: 1fr;
	}
}

.bwp-details__features {
	margin-bottom: 1.75rem;
}

.bwp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bwp-chip {
	padding: 0.35rem 0.8rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface-alt);
	font-size: 0.875rem;
}

.bwp-details__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.bwp-details__disclaimer {
	font-size: 0.8125rem;
	color: var(--bwp-muted);
	margin: 0;
	padding-top: 1.25rem;
	border-top: var(--bwp-border);
}

.bwp-single__map {
	margin-top: 2rem;
}

.bwp-single__map-title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

/* ------------------------------------------------------ viewing shortlist */

.bwp-viewing-toggle {
	display: inline-block;
	width: 100%;
	margin: 0;
}

.bwp-viewing-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 42px;
	padding: 0.5rem 1rem;
	border: var(--bwp-border);
	border-radius: var(--bwp-radius-button, 0);
	background: var(--bwp-surface, #fff);
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Without this, a narrow flex slot (the card's 50/50 action row) shrinks the
   label below its natural width and wraps it across several lines instead
   of just letting flex-shrink narrow the button itself. */
.bwp-viewing-toggle__btn [data-bwp-viewing-toggle-label] {
	white-space: nowrap;
}

.bwp-viewing-toggle__btn:hover {
	border-color: var(--bwp-accent);
}

.bwp-viewing-toggle__btn.is-added {
	background: var(--bwp-accent);
	border-color: var(--bwp-accent);
	color: var(--bwp-accent-contrast);
}

.bwp-viewing-toggle__btn .bwp-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* Card placement: "More Details" and the viewing toggle share a 50/50 row. */
.bwp-card__actions {
	display: flex;
	gap: 0.6rem;
	padding: 0 1rem 1rem;
}

.bwp-card__actions > * {
	flex: 1 1 0;
	min-width: 0;
}

/* On the card, the toggle reads as a secondary action: outlined until
   hovered, rather than always-black — "More Details" is the solid one. */
.bwp-card__actions .bwp-viewing-toggle__btn:not(.is-added) {
	background: transparent;
	border-color: var(--bwp-accent);
	color: inherit;
}

.bwp-card__actions .bwp-viewing-toggle__btn:not(.is-added):hover,
.bwp-card__actions .bwp-viewing-toggle__btn:not(.is-added):focus-visible {
	background: var(--bwp-accent);
	color: var(--bwp-accent-contrast);
}

/* Hero placement: where the old direct "Book a Viewing" button was. */
.bwp-hero__cta {
	display: inline-block;
	width: auto;
	margin-top: 0.85rem;
}

.bwp-hero__cta .bwp-viewing-toggle__btn {
	width: auto;
	padding: 0.6rem 1.4rem;
}

/* ------------------------------------------------------- floating indicator */

.bwp-viewing-indicator {
	position: fixed;
	inset-inline-end: 1rem;
	inset-block-end: 1rem;
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem 0.65rem 1rem;
	background: var(--bwp-accent, #111315);
	color: var(--bwp-accent-contrast, #fff);
	max-width: calc(100vw - 2rem);
}

.bwp-viewing-indicator[hidden] {
	display: none;
}

.bwp-viewing-indicator__icon {
	display: flex;
	flex: none;
}

.bwp-viewing-indicator__icon .bwp-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.bwp-viewing-indicator__count {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bwp-viewing-indicator__link {
	flex: none;
	min-height: auto;
	padding: 0.4rem 0.85rem;
	background: var(--bwp-accent-contrast, #fff);
	color: var(--bwp-accent, #111315);
	font-size: 0.8125rem;
}

.bwp-viewing-indicator__link:hover,
.bwp-viewing-indicator__link:focus {
	background: color-mix(in srgb, var(--bwp-accent-contrast, #fff) 85%, transparent);
	color: var(--bwp-accent, #111315);
}

.bwp-viewing-indicator__link[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.bwp-viewing-indicator {
		inset-inline: 1rem;
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------- visit us */

.bwp-viewing-page {
	/* This shortcode is typically the only plugin markup on its page (a
	   standalone "Visit Us" page), so it can't rely on .bwp-listing or
	   .bwp-single further up the tree to define these — same fallback
	   pattern as .bwp-single itself. */
	--bwp-radius-button: 0;
	--bwp-border: 1px solid rgba(0, 0, 0, 0.1);
	--bwp-accent: #111315;
	--bwp-accent-contrast: #fff;
	--bwp-muted: #5d6470;
	--bwp-surface: #fff;
	--bwp-surface-alt: #f6f7f8;
	max-width: 800px;
	margin: 0 auto;
	container-type: inline-size;
}

.bwp-viewing-page__heading {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.bwp-viewing-page__error {
	padding: 0.85rem 1rem;
	margin: 0 0 1.5rem;
	border: 1px solid #c0392b;
	background: rgba(192, 57, 43, 0.08);
	color: #922b21;
	font-size: 0.9375rem;
}

.bwp-viewing-page__success,
.bwp-viewing-page__empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--bwp-surface-alt, #f6f7f8);
	border: var(--bwp-border);
}

.bwp-viewing-page__success h2 {
	margin-top: 0;
}

.bwp-viewing-page__empty p:first-child {
	margin-top: 0;
	font-weight: 600;
}

.bwp-viewing-page__empty-hint {
	max-width: 32rem;
	margin-inline: auto;
	color: var(--bwp-muted, #5d6470);
}

.bwp-viewing-page__items {
	margin-bottom: 2rem;
}

.bwp-viewing-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: var(--bwp-border);
}

.bwp-viewing-item__media {
	display: block;
	flex: none;
	width: 72px;
	height: 54px;
	overflow: hidden;
	background: var(--bwp-surface-alt, #f6f7f8);
}

.bwp-viewing-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bwp-viewing-item__body {
	flex: 1;
	min-width: 0;
}

.bwp-viewing-item__title {
	display: block;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.bwp-viewing-item__title:hover {
	text-decoration: underline;
}

.bwp-viewing-item__rent {
	margin: 0.15rem 0 0;
	color: var(--bwp-muted, #5d6470);
	font-size: 0.875rem;
}

.bwp-viewing-item__remove {
	flex: none;
	width: auto;
}

.bwp-viewing-item__remove .bwp-viewing-toggle__btn {
	width: auto;
	padding: 0.45rem 0.75rem;
	font-size: 0.8125rem;
}

.bwp-viewing-form[hidden] {
	display: none;
}

.bwp-viewing-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.bwp-viewing-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.bwp-viewing-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.bwp-viewing-form__field--full {
	grid-column: 1 / -1;
}

.bwp-viewing-form__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bwp-muted, #5d6470);
}

.bwp-viewing-form__field input,
.bwp-viewing-form__field textarea {
	padding: 0.55rem 0.7rem;
	border: var(--bwp-border);
	border-radius: 0;
	background: var(--bwp-surface, #fff);
	font: inherit;
	font-size: 0.9375rem;
	color: inherit;
}

.bwp-viewing-form__field textarea {
	resize: vertical;
}

@container (max-width: 560px) {
	.bwp-viewing-form__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ archive */

.bwp-archive {
	max-width: 1280px;
	margin-inline: auto;
	padding: 2rem 1.25rem 3rem;
}

.bwp-archive__header {
	margin-bottom: 1.5rem;
}

.bwp-archive__title {
	margin: 0 0 0.35rem;
}

/* Shared with WP core, but plugins can't rely on the theme shipping it. */
.bwp-listing .screen-reader-text,
.bwp-single .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}