/**
 * Nimbu Listings
 *
 * Deliberately restrained: fonts and page chrome come from the theme, so
 * listings look like part of the site rather than a bolted-on app. Colours are
 * CSS custom properties, so the whole thing can be re-skinned by overriding a
 * handful of values in the theme's Custom CSS box.
 */

/**
 * Colours are taken from the Nimbu Realty Avada palette.
 *
 * Each one reads Avada's own custom property first and only falls back to a
 * hard-coded hex if that is missing. So if the palette is ever changed in
 * Avada > Global Options, the listings follow automatically — there is nothing
 * to update here.
 *
 *   --awb-color1  #ffffff              white
 *   --awb-color2  #f4f5fa              off-white panels
 *   --awb-color3  rgba(167,179,166,.24) hairline borders
 *   --awb-color4  #a7b3a6              sage
 *   --awb-color5  #f0c86e              GOLD — the brand accent
 *   --awb-color6  #3d585a              deep teal
 *   --awb-color8  #142129              near-black, body text
 *
 * NOTE ON THE GOLD: #f0c86e sits at roughly 1.8:1 against white, which is far
 * below the 4.5:1 needed for readable text. It is therefore used only as a
 * block colour behind dark text, or as a decorative accent — never as text on
 * white. Prices and links use the deep teal instead, which reads at ~7:1.
 */
:where(.nimbu-listings-page, .nimbu-teaser) {
	--nimbu-gold: var(--awb-color5, #f0c86e);
	--nimbu-gold-dark: #e3b855;
	--nimbu-accent: var(--awb-color6, #3d585a);
	--nimbu-accent-dark: #2c4143;
	--nimbu-sage: var(--awb-color4, #a7b3a6);
	--nimbu-ink: var(--awb-color8, #142129);
	--nimbu-muted: #4a4e57;
	--nimbu-line: var(--awb-color3, rgba(167, 179, 166, .34));
	--nimbu-surface: var(--awb-color1, #ffffff);
	/* Panel and form backgrounds. Deliberately NOT bound to the theme's
	   --awb-color2: that shade read too heavy behind a form, and a panel
	   background wants to be barely there. */
	--nimbu-surface-alt: #fafbfc;
	--nimbu-heading-font: var(--awb-typography1-font-family, "Sora", Arial, Helvetica, sans-serif);
	--nimbu-body-font: var(--awb-typography4-font-family, "DM Sans", Arial, Helvetica, sans-serif);
	--nimbu-radius: 6px;
	--nimbu-shadow: 0 1px 2px rgba(20, 33, 41, .06), 0 8px 24px rgba(20, 33, 41, .08);
	--nimbu-gap: 24px;
	/* Clearance for the theme's sticky header. Anything jumped to via an anchor
	   would otherwise land underneath it. Adjust here if the header height
	   changes. */
	--nimbu-sticky-offset: 150px;
	/* Scrollbars inside listings components. The theme styles the page
	   scrollbar dark, which reads as harsh on a light panel. */
	--nimbu-scroll-thumb: #d6d9de;
	--nimbu-scroll-thumb-hover: #c1c6cd;
}

.nimbu-listings-page {
	color: var(--nimbu-ink);
	font-family: var(--nimbu-body-font);
	padding: 32px 0 64px;
}

/* Headings use the theme's display face so listings read as part of the site. */
.nimbu-page-header__title,
.nimbu-single__title,
.nimbu-single__headline,
.nimbu-section__title,
.nimbu-panel__title,
.nimbu-empty__title,
.nimbu-teaser__title,
.nimbu-card__title {
	font-family: var(--nimbu-heading-font);
	letter-spacing: -.02em;
}

.nimbu-container {
	/* Matches Avada's --site_width so listings line up with the rest of the site. */
	max-width: var(--site_width, 1320px);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------------------------------------------------------------- header */

.nimbu-page-header__title {
	margin: 0 0 20px;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
	line-height: 1.2;
}

/* ------------------------------------------------------------------ tabs */

/* Both levels sit on one line: segment, a divider, then channel. Stacking them
   left the second row looking stranded, especially when it held a single tab. */
.nimbu-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.nimbu-tabs__level {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nimbu-tabs__divider {
	width: 1px;
	height: 26px;
	background: var(--nimbu-line);
}

.nimbu-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--nimbu-line);
	border-radius: 999px;
	background: var(--nimbu-surface);
	color: var(--nimbu-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nimbu-tabs__link:hover,
.nimbu-tabs__link:focus-visible {
	border-color: var(--nimbu-accent);
	color: var(--nimbu-accent);
}

/* Gold block with near-black text — the brand colour used the only way it is
   legible. Dark-on-gold reads at roughly 10:1. */
.nimbu-tabs__link.is-current {
	background: var(--nimbu-gold);
	border-color: var(--nimbu-gold);
	color: var(--nimbu-ink);
}

.nimbu-tabs__link.is-current:hover,
.nimbu-tabs__link.is-current:focus-visible {
	background: var(--nimbu-gold-dark);
	border-color: var(--nimbu-gold-dark);
	color: var(--nimbu-ink);
}

.nimbu-tabs__level--segment .nimbu-tabs__link {
	font-size: 1.02rem;
}

/* Lighter than the segment tabs so the hierarchy reads on a single line. */
.nimbu-tabs__level--channel .nimbu-tabs__link {
	padding: 7px 14px;
	font-size: .92rem;
	font-weight: 500;
	border-color: transparent;
	background: var(--nimbu-surface-alt);
}

.nimbu-tabs__level--channel .nimbu-tabs__link.is-current {
	background: var(--nimbu-gold);
	border-color: var(--nimbu-gold);
}

.nimbu-tabs__count {
	display: inline-block;
	min-width: 1.4em;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .07);
	font-size: .8em;
	text-align: center;
}

.nimbu-tabs__link.is-current .nimbu-tabs__count {
	background: rgba(20, 33, 41, .14);
}

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

.nimbu-filters {
	margin-bottom: 20px;
	padding: 16px;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface-alt);
}

.nimbu-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}

.nimbu-filters__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	flex: 1 1 170px;
	min-width: 0;
}

.nimbu-filters__field label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--nimbu-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.nimbu-filters select,
.nimbu-filters input[type="number"] {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--nimbu-line);
	border-radius: 6px;
	background: var(--nimbu-surface);
	color: var(--nimbu-ink);
	font: inherit;
	font-size: .95rem;
}

.nimbu-filters__range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nimbu-filters__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	flex: 0 0 auto;
}

.nimbu-filters__clear {
	font-size: .9rem;
	color: var(--nimbu-muted);
}

/*
 * No underline on hover, anywhere in the listings.
 *
 * The theme turns underlines on globally via --awb-link_decoration_line_hover.
 * Overriding that variable on our own containers switches it off for
 * everything inside, without touching the rest of the site; the explicit
 * text-decoration rule then covers any link the theme styles directly.
 * A colour change is enough of a hover signal on its own.
 */
:where(.nimbu-listings-page, .nimbu-teaser) {
	--awb-link_decoration_line_hover: none;
}

:where(.nimbu-listings-page, .nimbu-teaser) a:hover,
:where(.nimbu-listings-page, .nimbu-teaser) a:focus,
:where(.nimbu-listings-page, .nimbu-teaser) a:focus-visible,
:where(.nimbu-listings-page, .nimbu-teaser) a:active {
	text-decoration: none;
}

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

/* Matches the site's own button idiom: outlined in near-black, filling with
   the deep teal on hover. Taken from Avada's --button_* settings. */
.nimbu-button {
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid var(--nimbu-ink);
	border-radius: var(--nimbu-radius);
	background: transparent;
	color: var(--nimbu-ink);
	font-family: var(--nimbu-body-font);
	font-size: .97rem;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nimbu-button:hover,
.nimbu-button:focus-visible {
	background: var(--nimbu-accent);
	border-color: var(--nimbu-accent);
	color: #fff;
}

.nimbu-button--block {
	display: block;
	width: 100%;
}

/* Filled dark variant, for the actions that should carry the most weight:
   getting back to the search, and starting an application. */
.nimbu-button--dark {
	background: var(--nimbu-ink);
	border-color: var(--nimbu-ink);
	color: #fff;
}

.nimbu-button--dark:hover,
.nimbu-button--dark:focus-visible {
	background: var(--nimbu-accent);
	border-color: var(--nimbu-accent);
	color: #fff;
}

/* ----------------------------------------------------------- results bar */

.nimbu-results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.nimbu-results-bar__count {
	margin: 0;
	color: var(--nimbu-muted);
	font-size: .95rem;
}

.nimbu-view-toggle {
	display: inline-flex;
	border: 1px solid var(--nimbu-line);
	border-radius: 6px;
	overflow: hidden;
}

.nimbu-view-toggle__button {
	padding: 7px 14px;
	background: var(--nimbu-surface);
	color: var(--nimbu-muted);
	font-size: .9rem;
	text-decoration: none;
}

.nimbu-view-toggle__button.is-current {
	background: var(--nimbu-accent);
	color: #fff;
}

/* ----------------------------------------------------------------- cards */

.nimbu-results {
	display: grid;
	gap: var(--nimbu-gap);
}

.nimbu-results--grid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.nimbu-results--list {
	grid-template-columns: 1fr;
}

.nimbu-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.nimbu-card:hover {
	box-shadow: var(--nimbu-shadow);
	transform: translateY(-2px);
}

.nimbu-card--list {
	flex-direction: row;
}

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

.nimbu-card--list .nimbu-card__media {
	width: 320px;
	max-width: 40%;
	aspect-ratio: auto;
}

.nimbu-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nimbu-card__image--placeholder {
	background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 12px, #e6e9ed 12px, #e6e9ed 24px);
}

.nimbu-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--nimbu-gold);
	color: var(--nimbu-ink);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.nimbu-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	flex: 1 1 auto;
}

.nimbu-card__price {
	margin: 0;
	color: var(--nimbu-accent);
	font-size: 1.12rem;
	font-weight: 700;
}

.nimbu-card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

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

.nimbu-card__street {
	display: block;
	font-weight: 600;
}

.nimbu-card__locality {
	display: block;
	color: var(--nimbu-muted);
	font-size: .92rem;
	font-weight: 400;
}

.nimbu-card__headline {
	margin: 0;
	color: var(--nimbu-muted);
	font-size: .95rem;
}

.nimbu-card__available {
	margin: 0;
	color: var(--nimbu-muted);
	font-size: .88rem;
}

.nimbu-card__link {
	margin-top: auto;
	color: var(--nimbu-accent);
	font-size: .93rem;
	font-weight: 600;
	text-decoration: none;
}

.nimbu-card__link:hover,
.nimbu-card__link:focus-visible {
	color: var(--nimbu-accent-dark);
}

/* ----------------------------------------------------------------- specs */

.nimbu-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nimbu-specs__item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--nimbu-ink);
	font-size: .95rem;
}

/* Inline SVG, so it takes the surrounding text colour and stays sharp at any
   size without an icon font or an extra request. */
.nimbu-specs__icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	color: var(--nimbu-muted);
}

.nimbu-specs__value {
	font-weight: 700;
}

.nimbu-specs__label {
	color: var(--nimbu-muted);
	font-size: .88rem;
}

.nimbu-specs--large {
	gap: 26px;
	margin-top: 14px;
}

.nimbu-specs--large .nimbu-specs__item {
	font-size: 1.05rem;
}

.nimbu-specs--large .nimbu-specs__icon {
	width: 1.3em;
	height: 1.3em;
}

/* ----------------------------------------------------------- empty state */

.nimbu-empty {
	max-width: 620px;
	margin: 48px auto;
	padding: 36px 28px;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface-alt);
	text-align: center;
}

.nimbu-empty__title {
	margin: 0 0 12px;
	font-size: 1.3rem;
}

.nimbu-empty__text {
	margin: 0 0 20px;
	color: var(--nimbu-muted);
}

.nimbu-empty__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nimbu-empty__count {
	color: var(--nimbu-muted);
}

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

.nimbu-pagination {
	margin-top: 36px;
}

.nimbu-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nimbu-pagination a,
.nimbu-pagination span {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--nimbu-line);
	border-radius: 6px;
	background: var(--nimbu-surface);
	text-align: center;
	text-decoration: none;
	color: var(--nimbu-ink);
}

.nimbu-pagination .current {
	background: var(--nimbu-accent);
	border-color: var(--nimbu-accent);
	color: #fff;
}

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

/* Sits at the top of the sidebar as a filled dark button — on a property page
   this is the main route back into the search, so it carries real weight. */
.nimbu-back {
	margin: 0 0 20px;
}

.nimbu-back .nimbu-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.nimbu-back__arrow {
	font-size: 1.1em;
	line-height: 1;
	transition: transform .2s ease;
}

.nimbu-back .nimbu-button:hover .nimbu-back__arrow {
	transform: translateX(-3px);
}

/* Rent and headline figures, directly beneath the photo. */
.nimbu-single__facts {
	margin-bottom: 28px;
}

.nimbu-panel--map .nimbu-panel__note {
	margin-bottom: 4px;
}

/*
 * Three areas, two rows. The heading gets a row to itself so the sidebar
 * starts on the second row — level with the photo, not with the address.
 * The dot leaves the top-right cell empty.
 *
 * Row gap is zero: vertical spacing between the heading and the photo is a
 * margin on the heading, so it can be tuned without moving the columns apart.
 */
.nimbu-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas:
		"header ."
		"main   aside";
	gap: 0 40px;
	margin-top: 28px;
}

.nimbu-single__header {
	grid-area: header;
	margin-bottom: 22px;
}

.nimbu-single__main {
	grid-area: main;
	min-width: 0;
}

.nimbu-single__aside {
	grid-area: aside;
}

/* The rent is the first thing anyone looks for, so it is a filled block rather
   than coloured text. Gold behind near-black text reads at about 10:1 — the one
   way the brand colour is legible at this size. */
.nimbu-single__price {
	display: inline-block;
	margin: 0 0 14px;
	padding: 10px 20px;
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-gold);
	color: var(--nimbu-ink);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.nimbu-single__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
	line-height: 1.2;
}

.nimbu-single__categories {
	margin: 8px 0 0;
	color: var(--nimbu-muted);
}

.nimbu-single__headline {
	margin: 32px 0 12px;
	font-size: 1.25rem;
}

.nimbu-single__description {
	line-height: 1.7;
}

.nimbu-section {
	margin-top: 40px;
}

.nimbu-section__title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--nimbu-line);
	font-size: 1.2rem;
}

.nimbu-detail-table {
	width: 100%;
	border-collapse: collapse;
}

.nimbu-detail-table th,
.nimbu-detail-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--nimbu-line);
	text-align: left;
	vertical-align: top;
}

.nimbu-detail-table th {
	width: 42%;
	color: var(--nimbu-muted);
	font-weight: 500;
}

.nimbu-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nimbu-features__item {
	position: relative;
	padding-left: 22px;
}

.nimbu-features__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nimbu-gold);
}

/* The embedded map is gone — the Location panel is now an address and a link
   out to Google Maps, which is better at the job and costs no third-party
   request on page load. */

.nimbu-panel {
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface-alt);
}

.nimbu-panel__title {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.nimbu-panel__list {
	margin: 0;
	padding-left: 18px;
}

.nimbu-panel__agent {
	margin: 0 0 4px;
	font-weight: 600;
}

.nimbu-panel__contact {
	margin: 0 0 10px;
}

/*
 * Links inside the panel, but NOT buttons.
 *
 * Without the :not(), this rule beat .nimbu-button--dark on specificity — one
 * class plus an element outranks a single class — and painted the "Apply for
 * this property" text teal on a near-black background. Dark on dark, and
 * invisible.
 */
.nimbu-panel__contact a:not(.nimbu-button) {
	color: var(--nimbu-accent);
}

/* Shown when a listing has no inspection times. Saying so plainly is more use
   than hiding the panel and leaving the visitor to wonder. */
.nimbu-panel__note {
	margin: 0;
	color: var(--nimbu-muted);
	font-size: .93rem;
	line-height: 1.55;
}

.nimbu-panel__action {
	margin: 14px 0 0;
}

.nimbu-panel--inspections .nimbu-panel__list {
	margin: 0;
}

/*
 * The whole sidebar follows the page, rather than one panel inside it.
 *
 * align-self: start is doing the real work here. A grid item stretches to fill
 * its row by default, so the aside was already as tall as the article beside
 * it — leaving nothing for sticky to move within, which is why it silently did
 * nothing. Sizing it to its content gives it somewhere to stick.
 *
 * top clears the theme's sticky header. max-height plus overflow keeps a tall
 * sidebar reachable: without it, anything past the fold would be stuck
 * off-screen and unscrollable.
 */
.nimbu-single__aside {
	scroll-margin-top: var(--nimbu-sticky-offset);
}

@media (min-width: 981px) {
	.nimbu-single__aside {
		align-self: start;
		position: sticky;
		top: var(--nimbu-sticky-offset);
		max-height: calc(100vh - var(--nimbu-sticky-offset) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

.nimbu-panel--contact {
	position: static;
}

/* -------------------------------------------------------- enquiry form */

.nimbu-enquiry {
	margin-top: 40px;
	padding: 28px;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface-alt);
	/* Clears the theme's sticky header when jumping to #enquire. */
	scroll-margin-top: var(--nimbu-sticky-offset);
}

.nimbu-enquiry__title {
	margin: 0 0 18px;
	font-size: 1.2rem;
}

.nimbu-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.nimbu-field label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--nimbu-ink);
}

.nimbu-required {
	color: #b3261e;
}

.nimbu-field input[type="text"],
.nimbu-field input[type="email"],
.nimbu-field input[type="tel"],
.nimbu-field textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--nimbu-line);
	border-radius: var(--nimbu-radius);
	background: var(--nimbu-surface);
	color: var(--nimbu-ink);
	font-family: var(--nimbu-body-font);
	font-size: 1rem;
}

.nimbu-field textarea {
	resize: vertical;
	min-height: 120px;
}

.nimbu-field.has-error input,
.nimbu-field.has-error textarea {
	border-color: #b3261e;
}

.nimbu-field__error {
	color: #b3261e;
	font-size: .85rem;
	font-weight: 500;
}

.nimbu-field--check label {
	flex-direction: row;
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
}

.nimbu-field--check input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.nimbu-field--submit {
	margin-bottom: 10px;
}

.nimbu-enquiry__privacy {
	margin: 0;
	color: var(--nimbu-muted);
	font-size: .88rem;
}

/* The honeypot must be invisible but NOT display:none — some bots skip
   hidden fields, and some browsers refuse to submit them. */
.nimbu-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nimbu-notice {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-left: 4px solid;
	border-radius: 4px;
	font-size: .95rem;
}

.nimbu-notice--success {
	border-color: #1e7d44;
	background: #e8f5ec;
	color: #14532d;
}

.nimbu-notice--warning {
	border-color: var(--nimbu-gold);
	background: #fdf6e4;
	color: #6b5312;
}

.nimbu-notice--error {
	border-color: #b3261e;
	background: #fdecea;
	color: #7f1d1a;
}

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

/* Now sits inside the left column, so it is sized to that width rather than
   the full page. */
.nimbu-gallery {
	margin-bottom: 26px;
}

/* Without JavaScript this is a plain, scrollable strip of every photo.
   The script collapses it into a single main image plus thumbnails. */
.nimbu-gallery__main {
	position: relative;
	border-radius: var(--nimbu-radius);
	overflow: hidden;
	background: var(--nimbu-surface-alt);
}

.nimbu-gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 480px;
	object-fit: cover;
}

/* Property type over the photo. Light text on a dark translucent pill so it
   stays readable whatever the image behind it. */
.nimbu-gallery__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(20, 33, 41, .78);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	backdrop-filter: blur(2px);
}

.nimbu-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--nimbu-ink);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.nimbu-gallery__nav--prev {
	left: 14px;
}

.nimbu-gallery__nav--next {
	right: 14px;
}

.nimbu-gallery__counter {
	position: absolute;
	right: 14px;
	bottom: 14px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: .85rem;
}

/*
 * One sliding row, as property sites generally do it — six visible at a time
 * on desktop, sliding for the rest. Wrapping onto several rows pushed the
 * description a long way down the page on a 19-photo listing.
 *
 * Each thumb is sized as a fraction of the visible width rather than a fixed
 * pixel size, so a whole number of them fits at any screen width and none is
 * left half-cut at the edge.
 */
.nimbu-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.nimbu-gallery__thumb {
	/* Six across: the row's width less the five gaps between them. */
	flex: 0 0 calc((100% - 5 * 8px) / 6);
	scroll-snap-align: start;
}

.nimbu-gallery__thumb button {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.nimbu-gallery__thumb.is-current button {
	border-color: var(--nimbu-gold);
}

/* Sized by the grid cell rather than fixed pixels, so they stay square-ish at
   any width instead of squashing. */
.nimbu-gallery__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

/* ------------------------------------------------------------ scrollbars */

/*
 * Avada styles the page scrollbar with a dark handle on a near-black track,
 * which is fine against the site chrome but harsh inside a white panel. These
 * rules are scoped to the two places this plugin creates a scroll area, so the
 * site-wide scrollbar is left as the theme intends.
 */
.nimbu-gallery__thumbs,
.nimbu-single__aside {
	scrollbar-width: thin;
	scrollbar-color: var(--nimbu-scroll-thumb) transparent;
}

.nimbu-gallery__thumbs::-webkit-scrollbar,
.nimbu-single__aside::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.nimbu-gallery__thumbs::-webkit-scrollbar-track,
.nimbu-single__aside::-webkit-scrollbar-track {
	background: transparent;
}

.nimbu-gallery__thumbs::-webkit-scrollbar-thumb,
.nimbu-single__aside::-webkit-scrollbar-thumb {
	background: var(--nimbu-scroll-thumb);
	border-radius: 999px;
}

.nimbu-gallery__thumbs:hover::-webkit-scrollbar-thumb,
.nimbu-single__aside:hover::-webkit-scrollbar-thumb {
	background: var(--nimbu-scroll-thumb-hover);
}

/* --------------------------------------------------------------- teaser */

/* The teaser inherits its palette from the shared :where() block above, so the
   homepage cards and the listings page can never drift apart. */
.nimbu-teaser {
	color: var(--nimbu-ink);
	font-family: var(--nimbu-body-font);
}

.nimbu-teaser__title {
	margin: 0 0 20px;
}

.nimbu-teaser__action {
	margin-top: 26px;
	text-align: center;
}

/* --------------------------------------------------------- accessibility */

.nimbu-listings-page .screen-reader-text,
.nimbu-teaser .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(.nimbu-listings-page, .nimbu-teaser) a:focus-visible,
:where(.nimbu-listings-page, .nimbu-teaser) button:focus-visible,
:where(.nimbu-listings-page, .nimbu-teaser) select:focus-visible,
:where(.nimbu-listings-page, .nimbu-teaser) input:focus-visible {
	outline: 2px solid var(--nimbu-accent);
	outline-offset: 2px;
}

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

@media (max-width: 980px) {
	/* One column: the areas stack in source order, heading first. */
	.nimbu-single__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"main"
			"aside";
		gap: 28px;
	}

	.nimbu-single__header {
		margin-bottom: 0;
	}

	.nimbu-panel--contact {
		position: static;
	}
}

@media (max-width: 700px) {
	/*
	 * Measured on the live site at 375px: Avada's content wrapper already
	 * applies 30px each side, ours added 20px more, and the card another 18px —
	 * 75px of a 375px screen gone before any content. Avada's gutter is ample
	 * on its own, so ours drops to nothing here rather than stacking on top.
	 *
	 * Deliberately NOT using a negative margin to claw back Avada's padding
	 * too: if its gutter is ever smaller than assumed, that overhangs the
	 * viewport and produces horizontal scrolling, which is worse than a narrow
	 * column.
	 */
	.nimbu-container {
		padding: 0;
	}

	/*
	 * Trim the theme's gutter, but ONLY on listings pages and ONLY on small
	 * screens — scoped by the body class this plugin adds, so nothing else on
	 * the site is affected.
	 *
	 * Avada nests two of them: #main at 30px and .fusion-row at another 12px,
	 * putting content 42px from the edge of a 375px screen. The gutter is kept
	 * on #main, which Avada always renders, and removed from .fusion-row, which
	 * a Layout Builder section may or may not produce.
	 *
	 * !important is deliberate and load-bearing. Avada's rule is
	 * `html:not(.avada-has-site-width-percent) #main`, which has EXACTLY the
	 * same specificity as `body.nimbu-listings #main` — one id, one class, one
	 * element. A tie is broken by source order, and the theme's stylesheet
	 * loads after ours, so it won. Raising specificity would work until the
	 * theme raises its own; this states the intent unambiguously.
	 *
	 * Reducing the theme's padding is safe where a negative margin is not:
	 * content can never end up wider than its container, so no sideways scroll.
	 */
	html body.nimbu-listings #main,
	html body.nimbu-listings main.clearfix {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	html body.nimbu-listings .fusion-row {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.nimbu-listings-page {
		padding: 18px 0 40px;
		--nimbu-gap: 16px;
	}

	.nimbu-card__body {
		padding: 14px;
		gap: 8px;
	}

	.nimbu-card--list {
		flex-direction: column;
	}

	.nimbu-card--list .nimbu-card__media {
		width: 100%;
		max-width: none;
		aspect-ratio: 4 / 3;
	}

	.nimbu-filters {
		padding: 12px;
	}

	.nimbu-filters__row {
		gap: 10px;
	}

	.nimbu-filters__field {
		flex: 1 1 100%;
	}

	.nimbu-filters__actions {
		flex: 1 1 100%;
	}

	.nimbu-filters__actions .nimbu-button {
		flex: 1;
	}

	.nimbu-detail-table th {
		width: 50%;
	}

	/* Fewer, larger thumbnails read better than six tiny ones on a phone. */
	.nimbu-gallery__thumbs {
		gap: 6px;
	}

	.nimbu-gallery__thumb {
		flex-basis: calc((100% - 3 * 6px) / 4);
	}

	.nimbu-panel,
	.nimbu-enquiry {
		padding: 16px;
	}

	.nimbu-empty {
		margin: 28px auto;
		padding: 24px 18px;
	}

	.nimbu-single__price {
		font-size: 1.2rem;
		padding: 9px 16px;
	}

	.nimbu-specs--large {
		gap: 18px;
	}

	.nimbu-section {
		margin-top: 28px;
	}

	/* Tab rows stack rather than squeeze; the divider only makes sense inline. */
	.nimbu-tabs {
		gap: 8px;
	}

	.nimbu-tabs__divider {
		display: none;
	}
}

@media (max-width: 420px) {
	html body.nimbu-listings #main,
	html body.nimbu-listings main.clearfix {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.nimbu-gallery__thumb {
		flex-basis: calc((100% - 2 * 6px) / 3);
	}

	.nimbu-card__body {
		padding: 12px;
	}

	.nimbu-panel,
	.nimbu-enquiry {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nimbu-card,
	.nimbu-tabs__link,
	.nimbu-button {
		transition: none;
	}

	.nimbu-card:hover {
		transform: none;
	}
}