/**
 * Listing detail page.
 *
 * Modelled on a modern luxury listing layout: a photo mosaic, key figures on
 * one line, description and grouped specification tables, agent card, similar
 * properties, and the MLS attribution.
 *
 * Flex, never grid, per CLAUDE.md §2 — except the hero mosaic, which is one
 * fixed arrangement rather than a fluid layout and cannot break the way an
 * Elementor-hosted grid does.
 *
 * No colour is hardcoded. Every value resolves to a design token.
 */

/* The wrapper is <div class="bbis bbis bbis-lp"> — the same element, not a
   descendant. `.bbis.bbis .bbis-lp` (with a space) therefore matched nothing,
   which is why the page ran edge to edge with no max-width and the sidebar
   never became sticky. Compound selector, no space. */
.bbis.bbis.bbis-lp {
	font-family: var(--bbis-font-body);
	/* Full width with a narrow gutter each side, rather than a 1280px column
	   that left a wide monitor mostly empty. The gutter floors at 18px so it
	   does not collapse to nothing on a phone, where 2% is only a few pixels. */
	max-width: none;
	margin: 0 auto;
	padding: 28px max(18px, 2%) 72px;
	box-sizing: border-box;
}

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

   A lead photograph with a 2x2 block beside it. Sized by aspect-ratio so the
   shape holds at every width, with a viewport cap so it cannot push the price
   and address below the fold on a laptop.

   `width: 100%` is load-bearing, not decoration. With `aspect-ratio` and an
   auto width, a browser that has to honour `max-height` satisfies the ratio by
   shrinking the *width* instead — so on a shorter window the gallery quietly
   pulled in from the right and stopped lining up with the rule and the price
   row beneath it. A definite width means the cap can only shorten the height,
   which is what was meant by it. */

.bbis.bbis .bbis-lp__hero {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	width: 100%;
	aspect-ratio: 20 / 9;
	max-height: 60vh;
	margin: 20px 0 28px;
	border-radius: var(--bbis-radius);
	overflow: hidden;
	background: var(--bbis-border);
}

.bbis.bbis .bbis-lp__shot {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--bbis-border);
	cursor: pointer;
	overflow: hidden;
}

.bbis.bbis .bbis-lp__shot--lead { grid-row: span 2; }

.bbis.bbis .bbis-lp__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.bbis.bbis .bbis-lp__shot:hover img { transform: scale(1.045); }

.bbis.bbis .bbis-lp__shot:focus-visible {
	outline: 3px solid var(--bbis-accent);
	outline-offset: -3px;
	z-index: 2;
}

/* The block beside the lead takes whatever photos exist rather than demanding
   exactly four. The first version fell back to a lone full-width photo below
   five, which meant a four-photo listing showed one image and hid three. */

/* Three: two across the top, one across the bottom.

   Counted by position rather than :last-of-type, because the last <button> in
   the hero is "See all photos" — it has no shot class, so :last-of-type matched
   nothing at all. The lead is button 1, so the third side tile is button 4. */
.bbis.bbis .bbis-lp__hero--side3 .bbis-lp__shot:nth-of-type(4) { grid-column: span 2; }

/* Two: a single column beside the lead. */
.bbis.bbis .bbis-lp__hero--side2 { grid-template-columns: 2fr 1fr; }

/* One: side by side, no second row to fill. */
.bbis.bbis .bbis-lp__hero--side1 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr;
}

.bbis.bbis .bbis-lp__hero--side1 .bbis-lp__shot--lead { grid-row: auto; }

/* None: the lead takes the whole frame. */
.bbis.bbis .bbis-lp__hero--side0 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 9;
}

.bbis.bbis .bbis-lp__hero--side0 .bbis-lp__shot--lead { grid-row: auto; }

/* "See all photos", pinned to the corner of the mosaic. */
.bbis.bbis .bbis-lp__all {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	transition: background .18s ease, transform .18s ease;
}

.bbis.bbis .bbis-lp__all:hover { background: var(--bbis-surface); transform: translateY(-1px); }

/* A four-pane grid, drawn rather than shipped as an icon font. */
.bbis.bbis .bbis-lp__all-icon {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 8px 0 / 5px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 0 8px / 5px 5px no-repeat,
		linear-gradient(currentColor, currentColor) 8px 8px / 5px 5px no-repeat;
}

.bbis.bbis .bbis-lp__hero--none { display: none; }

@media (max-width: 860px) {

	.bbis.bbis .bbis-lp__hero,
	.bbis.bbis .bbis-lp__hero--side0,
	.bbis.bbis .bbis-lp__hero--side1,
	.bbis.bbis .bbis-lp__hero--side2 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		aspect-ratio: 4 / 3;
		max-height: 46vh;
		gap: 0;
	}

	.bbis.bbis .bbis-lp__hero .bbis-lp__shot:not(.bbis-lp__shot--lead) { display: none; }
	.bbis.bbis .bbis-lp__hero .bbis-lp__shot--lead { grid-row: auto; }

	.bbis.bbis .bbis-lp__all { right: 12px; bottom: 12px; padding: 9px 14px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-lp__shot img,
	.bbis.bbis .bbis-lp__all { transition: none; }
	.bbis.bbis .bbis-lp__shot:hover img { transform: none; }
}

/* ------------------------------------------------------------------ head */

.bbis.bbis .bbis-lp__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--bbis-border);
}

.bbis.bbis .bbis-lp__headings { flex: 1 1 320px; min-width: 0; }

.bbis.bbis .bbis-lp__status {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: var(--bbis-radius);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Fallback for a status with no rule of its own. */
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
}

/* Match the search results exactly — the same badge should not be gold on one
   page and blue on the other. The modifiers are stated here rather than left to
   listing-card.css because both files use single-class selectors of equal
   specificity, so which colour won came down to stylesheet order. Compound
   selectors settle it, and the detail page no longer depends on the card
   stylesheet being loaded at all. */

.bbis.bbis .bbis-lp__status.bbis-card__status--soon {
	background: var(--bbis-primary);
	color: var(--bbis-primary-fg);
}

.bbis.bbis .bbis-lp__status.bbis-card__status--active {
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
}

.bbis.bbis .bbis-lp__status.bbis-card__status--contract {
	background: var(--bbis-secondary);
	color: var(--bbis-secondary-fg);
}

.bbis.bbis .bbis-lp__status.bbis-card__status--closed {
	background: var(--bbis-muted);
	color: var(--bbis-surface);
}

.bbis.bbis .bbis-lp__mls {
	margin: 0 0 6px;
	color: var(--bbis-muted);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.bbis.bbis .bbis-lp__addr {
	margin: 0 0 6px;
	font-family: var(--bbis-font-head);
	font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.9rem);
	font-weight: 700;
	line-height: 1.1;
}

.bbis.bbis .bbis-lp__place {
	margin: 0;
	color: var(--bbis-muted);
	font-size: 1.02rem;
}

.bbis.bbis .bbis-lp__keys {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	flex: 0 1 auto;
}

.bbis.bbis .bbis-lp__key { display: flex; flex-direction: column; gap: 3px; }

.bbis.bbis .bbis-lp__key-v {
	font-family: var(--bbis-font-head);
	font-size: 1.28rem;
	font-weight: 700;
	color: var(--bbis-ink);
	line-height: 1.1;
}

.bbis.bbis .bbis-lp__key--price .bbis-lp__key-v {
	font-size: 1.72rem;
	color: var(--bbis-primary);
}

.bbis.bbis .bbis-lp__key-l {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bbis-muted);
}

.bbis.bbis .bbis-lp__cta { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }

.bbis.bbis .bbis-lp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: var(--bbis-primary);
	color: var(--bbis-primary-fg) !important;
	border: 2px solid var(--bbis-primary);
	border-radius: var(--bbis-radius);
	font-family: var(--bbis-font-head);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .18s ease;
}

.bbis.bbis .bbis-lp__btn:hover { background: var(--bbis-primary-hi); border-color: var(--bbis-primary-hi); }

.bbis.bbis .bbis-lp__btn--ghost {
	background: transparent;
	color: var(--bbis-primary) !important;
}

.bbis.bbis .bbis-lp__btn--ghost:hover {
	background: var(--bbis-primary);
	color: var(--bbis-primary-fg) !important;
}

/* ------------------------------------------------------------------ body */

.bbis.bbis .bbis-lp__body {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-top: 32px;
	align-items: flex-start;
}

.bbis.bbis .bbis-lp__main { flex: 1 1 460px; min-width: 0; }
.bbis.bbis .bbis-lp__aside {
	flex: 0 1 320px;
	position: sticky;
	/* Clears a pinned site header; without the offset the card slides under it. */
	top: calc(var(--bbis-lp-top, 24px));
	align-self: flex-start;
}

.bbis.bbis .bbis-lp__section { margin-bottom: 36px; }

.bbis.bbis .bbis-lp__h2 {
	margin: 0 0 16px;
	font-family: var(--bbis-font-head);
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.2;
}

.bbis.bbis .bbis-lp__remarks {
	margin: 0;
	color: var(--bbis-ink);
	font-size: 1.02rem;
	line-height: 1.65;
}

.bbis.bbis .bbis-lp__dl { margin: 0; }

.bbis.bbis .bbis-lp__row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bbis-border);
}

.bbis.bbis .bbis-lp__row dt {
	margin: 0;
	color: var(--bbis-muted);
	font-size: .92rem;
	font-weight: 500;
}

.bbis.bbis .bbis-lp__row dd {
	margin: 0;
	color: var(--bbis-ink);
	font-size: .92rem;
	font-weight: 600;
	text-align: right;
}

/* ------------------------------------------------------------ accordions */

.bbis.bbis .bbis-lp__groups {
	border-top: 1px solid var(--bbis-border);
	margin-bottom: 36px;
}

.bbis.bbis .bbis-lp__group { border-bottom: 1px solid var(--bbis-border); }

.bbis.bbis .bbis-lp__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--bbis-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--bbis-ink);
}

/* Safari draws its own disclosure triangle unless this is removed. */
.bbis.bbis .bbis-lp__summary::-webkit-details-marker { display: none; }

.bbis.bbis .bbis-lp__summary:hover { color: var(--bbis-primary); }

.bbis.bbis .bbis-lp__summary:focus-visible {
	outline: 3px solid var(--bbis-accent);
	outline-offset: -3px;
}

.bbis.bbis .bbis-lp__group-chev {
	width: 18px; height: 18px;
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.bbis.bbis .bbis-lp__group[open] .bbis-lp__group-chev { transform: rotate(180deg); }

.bbis.bbis .bbis-lp__group .bbis-lp__dl { padding-bottom: 12px; }
.bbis.bbis .bbis-lp__group .bbis-lp__row:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-lp__group-chev { transition: none; }
}

/* ----------------------------------------------------------------- agent */

.bbis.bbis .bbis-lp__agent {
	padding: 24px;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	text-align: center;
}

.bbis.bbis .bbis-lp__agent-shot {
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.bbis.bbis .bbis-lp__agent-blurb {
	margin: 0 0 14px;
	color: var(--bbis-muted);
	font-size: .88rem;
	line-height: 1.5;
}

.bbis.bbis .bbis-lp__agent-name {
	margin: 0 0 12px;
	font-family: var(--bbis-font-head);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bbis-ink);
}

.bbis.bbis .bbis-lp__agent-link {
	display: block;
	margin-bottom: 8px;
	color: var(--bbis-primary);
	font-size: .95rem;
	text-decoration: none;
}

.bbis.bbis .bbis-lp__agent-link:hover { text-decoration: underline; }

.bbis.bbis .bbis-lp__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.bbis.bbis .bbis-lp__actions .bbis-lp__btn {
	width: 100%;
	margin: 0;
	justify-content: center;
	text-align: center;
}

.bbis.bbis .bbis-lp__btn--dark {
	background: var(--bbis-ink);
	border-color: var(--bbis-ink);
	color: #fff;
}

.bbis.bbis .bbis-lp__btn--dark:hover {
	background: var(--bbis-primary);
	border-color: var(--bbis-primary);
	color: var(--bbis-primary-fg);
}

.bbis.bbis .bbis-lp__agent-phone {
	margin: 14px 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--bbis-ink);
	letter-spacing: .01em;
}

/* ---------------------------------------------------------- enquiry modal */

.bbis.bbis .bbis-lp__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bbis.bbis .bbis-lp__modal[hidden] { display: none; }

.bbis.bbis .bbis-lp__modal-back {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .55);
}

.bbis.bbis .bbis-lp__modal-box {
	position: relative;
	width: 100%;
	max-width: 470px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 28px;
	background: #fff;
	border-radius: var(--bbis-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.bbis.bbis .bbis-lp__modal-x {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bbis-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.bbis.bbis .bbis-lp__modal-x:hover { color: var(--bbis-ink); }

.bbis.bbis .bbis-lp__modal-h {
	margin: 0 0 4px;
	font-family: var(--bbis-font-head);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--bbis-ink);
}

.bbis.bbis .bbis-lp__modal-sub {
	margin: 0 0 20px;
	color: var(--bbis-muted);
	font-size: .9rem;
	line-height: 1.4;
}

.bbis.bbis .bbis-lp__form { display: flex; flex-direction: column; gap: 14px; }

.bbis.bbis .bbis-lp__form label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bbis-muted);
}

.bbis.bbis .bbis-lp__form input,
.bbis.bbis .bbis-lp__form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 13px;
	background: #fff;
	border: 1px solid var(--bbis-border);
	border-radius: calc(var(--bbis-radius) / 2);
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	box-sizing: border-box;
}

.bbis.bbis .bbis-lp__form input:focus,
.bbis.bbis .bbis-lp__form textarea:focus {
	outline: 2px solid var(--bbis-primary);
	outline-offset: 1px;
	border-color: var(--bbis-primary);
}

.bbis.bbis .bbis-lp__form textarea { resize: vertical; }
.bbis.bbis .bbis-lp__form .bbis-lp__btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.bbis.bbis .bbis-lp__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Result notice, shown after the redirect back. */
.bbis.bbis .bbis-lp__notice {
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: calc(var(--bbis-radius) / 2);
	font-size: .92rem;
	line-height: 1.45;
}

.bbis.bbis .bbis-lp__notice--ok {
	background: rgba(22, 122, 63, .09);
	border: 1px solid rgba(22, 122, 63, .32);
	color: #10502a;
}

.bbis.bbis .bbis-lp__notice--bad {
	background: rgba(170, 40, 40, .08);
	border: 1px solid rgba(170, 40, 40, .3);
	color: #8a2020;
}

@media (max-width: 600px) {
	.bbis.bbis .bbis-lp__modal { padding: 0; align-items: flex-end; }
	.bbis.bbis .bbis-lp__modal-box {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--bbis-radius) var(--bbis-radius) 0 0;
	}
}

/* --------------------------------------------------------------- similar */

.bbis.bbis .bbis-lp__similar { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--bbis-border); }

.bbis.bbis .bbis-lp__similar-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.bbis.bbis .bbis-lp__similar-list > .bbis-card__item { flex: 1 1 240px; max-width: calc(33.333% - 14px); }

@media (max-width: 860px) {
	.bbis.bbis .bbis-lp__similar-list > .bbis-card__item { max-width: calc(50% - 10px); }
}

@media (max-width: 560px) {
	.bbis.bbis .bbis-lp__similar-list > .bbis-card__item { max-width: 100%; }
}

/* ------------------------------------------------------- MLS attribution

   Required by the IDX agreement. Muted, but never hidden. */

.bbis.bbis .bbis-lp__legal {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--bbis-border);
	color: var(--bbis-muted);
	font-size: .78rem;
	line-height: 1.55;
}

.bbis.bbis .bbis-lp__courtesy { margin: 0 0 8px; font-weight: 600; }
.bbis.bbis .bbis-lp__disclaimer { margin: 0; }

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

.bbis-lp__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* A legibility scrim, not a brand surface — photographs must sit on black. */
	background: rgb(0 0 0 / 92%);
}

.bbis-lp__lightbox[hidden] { display: none; }

.bbis-lp__lb-img {
	max-width: 92vw;
	max-height: 86vh;
	object-fit: contain;
	display: block;
}

.bbis-lp__lb-close,
.bbis-lp__lb-prev,
.bbis-lp__lb-next {
	position: absolute;
	border: 0;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
	line-height: 1;
	border-radius: 50%;
}

.bbis-lp__lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.bbis-lp__lb-prev  { left: 20px; width: 52px; height: 52px; font-size: 30px; }
.bbis-lp__lb-next  { right: 20px; width: 52px; height: 52px; font-size: 30px; }

.bbis-lp__lb-close:hover,
.bbis-lp__lb-prev:hover,
.bbis-lp__lb-next:hover { background: rgb(255 255 255 / 24%); }

.bbis-lp__lb-count {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: rgb(255 255 255 / 80%);
	font-size: .86rem;
}

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-lp__shot img { transition: none; }
	.bbis.bbis .bbis-lp__shot:hover img { transform: none; }
}


/* --------------------------------------------------------- listed by ----

   Attribution for the brokerage that actually holds the listing. Sits under the
   site agent's card so a visitor cannot mistake one for the other. */

.bbis.bbis .bbis-lp__listed-by {
	margin-top: 16px;
	padding: 16px 18px;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	text-align: center;
}

.bbis.bbis .bbis-lp__listed-by-l {
	margin: 0 0 6px;
	color: var(--bbis-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bbis.bbis .bbis-lp__listed-by-v {
	margin: 0 0 2px;
	color: var(--bbis-ink);
	font-size: .92rem;
	font-weight: 600;
}

.bbis.bbis .bbis-lp__listed-by-o {
	margin: 0;
	color: var(--bbis-muted);
	font-size: .84rem;
}

.bbis.bbis .bbis-lp__more { display: none; }

/* Back to results. Quiet — it is an escape hatch, not a call to action. */
/* ------------------------------------------------------- back-to-results bar

   Fixed, not sticky.

   position:sticky was tried and does not survive this environment — page
   builder themes stack enough wrappers, overflow and transforms that a sticky
   element silently scrolls away with nothing wrong in its own CSS. `fixed`
   answers only to the viewport, so no ancestor can break it.

   The cost of fixed is that it leaves the document flow, so a spacer of equal
   height stands in for it — without one the gallery slides up underneath.

   `top` is written by the script: the height of the pinned header when that
   header is showing, and 0 when it has slid away, so the bar tucks under it
   going up and takes its place going down instead of leaving a white gap. */

.bbis.bbis .bbis-lp__bar {
	position: fixed;
	top: var(--bbis-lp-top, 0px);
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	/* Back on the left, save on the right — the two things somebody mid-search
	   wants, at opposite thumbs on a phone. */
	justify-content: space-between;
	gap: 12px;
	padding: 10px max(18px, 2%);
	background: #fff;
	border-bottom: 1px solid var(--bbis-border);
	box-shadow: 0 1px 12px rgb(0 0 0 / 6%);
	box-sizing: border-box;
	/* Matches the header plugin's own 0.3s reveal so the two move together
	   rather than one chasing the other. */
	transition: top .3s cubic-bezier(.4, 0, .2, 1);
}

/* Holds the bar's place in the flow. */
.bbis.bbis .bbis-lp__spacer {
	height: var(--bbis-lp-bar-h, 0px);
	margin-bottom: 22px;
}

.bbis.bbis .bbis-lp__bar[hidden],
.bbis.bbis .bbis-lp__spacer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-lp__bar { transition: none; }
}

/* The button itself. Deliberately a button rather than a quiet link — the
   muted pill it replaced was easy to miss. */

.bbis.bbis .bbis-lp__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 18px 9px 14px;
	background: transparent;
	border: 1.5px solid var(--bbis-accent);
	border-radius: 999px;
	color: var(--bbis-ink);
	font-family: var(--bbis-font-body);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.bbis.bbis .bbis-lp__back:hover,
.bbis.bbis .bbis-lp__back:focus-visible {
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
}

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

.bbis.bbis .bbis-lp__back svg { width: 16px; height: 16px; transition: transform .15s ease; }
.bbis.bbis .bbis-lp__back:hover svg { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-lp__back,
	.bbis.bbis .bbis-lp__back svg { transition: none; }
	.bbis.bbis .bbis-lp__back:hover svg { transform: none; }
}

.bbis.bbis .bbis-lp__back[hidden] { display: none; }


/* ------------------------------------------------ who the enquiry reaches

   A listing on an IDX site usually belongs to another brokerage, so "Request
   information" on its own does not say who is about to receive it. This names
   them, with the same face the sidebar uses. */

.bbis.bbis .bbis-lp__modal-to {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.9rem 0 0.2rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--bbis-radius);
	background: color-mix(in srgb, var(--bbis-accent) 10%, var(--bbis-surface));
	border: 1px solid color-mix(in srgb, var(--bbis-accent) 26%, transparent);
}

.bbis.bbis .bbis-lp__modal-to-shot {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.bbis.bbis .bbis-lp__modal-to-text {
	margin: 0 !important;
	font-size: 0.86rem;
	line-height: 1.35;
	color: var(--bbis-ink) !important;
}

.bbis.bbis .bbis-lp__modal-to-text strong { font-weight: 700; }

.bbis.bbis .bbis-lp__modal-to-text a {
	color: var(--bbis-ink) !important;
	text-decoration: none;
	white-space: nowrap;
}

.bbis.bbis .bbis-lp__modal-to-text a:hover { text-decoration: underline; }