/**
 * Listing pages.
 *
 * Scoped under body.propseller-listing / .pl-page so nothing leaks into the rest of the site and
 * so the specificity beats Listify's and the child theme's global typography rules.
 *
 * Design: Figma › Listing Pages — listing desktop 8063:18391, mobile 8626:71726, gallery
 * 8649:73940. Tokens mirror listify-child/style.css :root, like propseller-agent-profiles.
 */

.propseller-listing {
	--pl-blue: var(--propseller-blue, #3f5cd6);
	--pl-metallic: var(--metallic-blue, #eceffb);
	--pl-gold: var(--gold-yellow, #ffb400);
	--pl-onyx: var(--onyx-black, #221f2b);
	--pl-ash: var(--ash-grey, #6b6d84);
	--pl-mercury: #efefef;
	--pl-silver: #e5e5e5;
	--pl-white: #fff;

	--pl-container: 1140px;
	--pl-gutter: 24px;
	/* The site header is fixed and overlays the page; content starts below it. */
	--pl-header: 75px;
	--pl-radius: 10px;
	--pl-shadow: 0 0 50px 0 rgba(34, 31, 43, 0.1);

	--pl-serif: "Source Serif Pro", Georgia, serif;
	--pl-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Listify shrinks the fixed header to 55px below 992px, not at the 767px mobile breakpoint. */
@media (max-width: 991px) {
	.propseller-listing {
		--pl-header: 55px;
	}
}

/* Listify wraps everything in a padded, max-width #content. */
.propseller-listing #content.site-content {
	margin: 0;
	padding: 0 !important;
	max-width: none;
}

.pl-page {
	font-family: var(--pl-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--pl-onyx);
	background: var(--pl-white);
	margin-top: var(--pl-header);
	padding: 100px var(--pl-gutter);
	/* clip, not hidden: no scroll container, so the sticky agent card still sticks. */
	overflow-x: clip;
}

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

/* The id beats listify-child's `#content a { text-decoration: underline }`. */
#content #pl-page a,
#content #pl-page a:hover,
#content #pl-page a:focus,
#pl-page a,
#pl-page a:hover,
#pl-page a:focus {
	text-decoration: none;
}

/*
 * Every Figma text node is cap-trimmed, so its gaps are measured cap to cap. Trimming the
 * same way keeps the drawn rhythm. Buttons and pills are excluded: there the line box centres
 * the label. Firefox ignores this and keeps a slightly looser rhythm.
 */
.pl-page :is(h1, h2, h3, p, dt, dd, figcaption) {
	text-box: trim-both cap alphabetic;
}

/* :where() keeps the reset at zero specificity, so any component rule overrides it. */
.pl-page :where(h1, h2, h3, p, dl, dt, dd, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

/* Listify bolds headings and definition terms globally. */
.pl-page :is(h1, h2, h3, dt) {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pl-page img {
	display: block;
	max-width: 100%;
}

.pl-page button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.pl-container {
	width: 100%;
	max-width: var(--pl-container);
	margin: 0 auto;
}

.pl-h2 {
	font-family: var(--pl-serif) !important;
	font-size: 24px !important;
	line-height: 1.5 !important;
	color: var(--pl-onyx) !important;
}

/* A real underline, not a border. The ids beat the no-underline reset above. */
.pl-link,
#pl-page .pl-link,
#pl-page .pl-link:hover,
#pl-page .pl-link:focus,
#content #pl-page .pl-link,
#content #pl-page .pl-link:hover,
#content #pl-page .pl-link:focus {
	display: inline-block;
	padding: 0;
	border: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	background: none;
	color: var(--pl-blue);
	font-size: 16px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Page grid: main + sticky agent card, Similar Listings full width below.
   On mobile the agent card drops below Similar Listings, as the design orders it.
   --------------------------------------------------------------------------- */

.pl-listing__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 367px;
	grid-template-areas:
		"top     top"
		"main    aside"
		"similar similar";
	column-gap: 50px;
	row-gap: 36px;
}

.pl-listing__top {
	grid-area: top;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pl-listing__main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

.pl-listing__aside {
	grid-area: aside;
}

.pl-listing__aside .pl-agent {
	position: sticky;
	top: calc(var(--pl-header) + 35px);
}

.pl-similar {
	grid-area: similar;
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 14px; /* 36px grid gap + 14 = the design's 50px above the divider */
	padding-top: 50px;
	border-top: 1px solid var(--pl-mercury);
}

/* Sections inside the main column are divided by a hairline, 36px either side. */
.pl-listing__main > .pl-section {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-top: 36px;
	border-top: 1px solid var(--pl-mercury);
}

/* ---------------------------------------------------------------------------
   Breadcrumb, notice
   --------------------------------------------------------------------------- */

.pl-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	list-style: none;
	font-size: 18px;
	line-height: 1.5;
}

.pl-breadcrumb li + li::before {
	content: "/";
	margin-right: 6px;
	color: var(--pl-ash);
}

#pl-page .pl-breadcrumb a {
	color: var(--pl-ash);
}

#pl-page .pl-breadcrumb a:hover {
	color: var(--pl-blue);
}

.pl-notice {
	padding: 14px 20px;
	border-radius: var(--pl-radius);
	background: var(--pl-metallic);
	color: var(--pl-onyx);
}

/* ---------------------------------------------------------------------------
   Hero: 565 | 278 | 278 over two 245px rows, 10px gaps, 500px tall
   --------------------------------------------------------------------------- */

.pl-hero {
	position: relative;
}

.pl-hero__track {
	display: grid;
	grid-template-columns: 565fr 278fr 278fr;
	grid-template-rows: 245px 245px;
	gap: 10px;
	border-radius: var(--pl-radius);
	overflow: hidden;
}

.pl-hero__item {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--pl-mercury);
	overflow: hidden;
}

.pl-hero__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pl-hero__item:hover img {
	transform: scale(1.03);
}

.pl-hero__item:first-child {
	grid-row: span 2;
}

/* Fewer than five photos: the cover takes the whole width rather than leaving holes. */
.pl-hero--1 .pl-hero__track,
.pl-hero--2 .pl-hero__track,
.pl-hero--3 .pl-hero__track,
.pl-hero--4 .pl-hero__track {
	grid-template-columns: 1fr;
	grid-template-rows: 500px;
}

.pl-hero--1 .pl-hero__item:not(:first-child),
.pl-hero--2 .pl-hero__item:not(:first-child),
.pl-hero--3 .pl-hero__item:not(:first-child),
.pl-hero--4 .pl-hero__item:not(:first-child) {
	display: none;
}

.pl-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	/* Figma: 14px above and below the cap-trimmed text = 39px. A fixed height holds that in every
	   browser; text-box-trim would not in Firefox. */
	height: 39px;
	padding: 0 20px;
	border-radius: 50px;
	background-image: linear-gradient(51deg, #221f2b 0%, #42404f 100%);
	color: var(--pl-white);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

.pl-page .pl-hero__view {
	position: absolute;
	right: 20px;
	bottom: 20px;
	height: 51px;
	padding: 0 50px;
	border: 1px solid var(--pl-silver);
	border-radius: 3px;
	background: var(--pl-white);
	color: var(--pl-onyx);
	font-size: 16px;
	line-height: 1;
}

.pl-hero__nav,
.pl-hero .pl-dots {
	display: none;
}

/* ---------------------------------------------------------------------------
   Head: tags, H1, address line, price, configuration
   --------------------------------------------------------------------------- */

.pl-head {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.pl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
}

/* Figma: 12px above and below the cap-trimmed text = 35px, held with a fixed height. */
.pl-tag {
	display: flex;
	align-items: center;
	height: 35px;
	padding: 0 20px;
	border-radius: 50px;
	background: var(--pl-metallic);
	color: var(--pl-blue);
	font-size: 16px;
	line-height: 1;
}

.pl-head__address {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pl-page .pl-head__title {
	font-family: var(--pl-serif) !important;
	font-size: 30px !important;
	line-height: 1.5 !important;
	color: var(--pl-onyx) !important;
}

.pl-head__line {
	color: var(--pl-ash);
}

.pl-price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 16px;
}

.pl-price__amount {
	font-family: var(--pl-serif) !important; /* beats listify-child's `body p` */
	font-size: 36px;
	line-height: 1.5;
}

.pl-price__psf {
	margin-left: -10px; /* 6px from the amount, inside the row's 16px gap */
	color: var(--pl-ash);
	font-size: 12px;
}

.pl-price__tag {
	padding: 4px;
	border-radius: 3px;
	background: rgba(242, 242, 242, 0.75);
	color: #6c6c6c;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
}

/*
 * Figma 8601:62268: 36px | 40px divider | 36px between items, 16 × 30 padding, 74px tall.
 * Each item after the first draws its own divider in a [gap][line][gap][text] grid, so the
 * line sits halfway on mobile too, where the gaps stretch to fill the width.
 */
.pl-config {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-height: 74px;
	padding: 16px 30px;
	border: 1px solid var(--pl-mercury);
	border-radius: 20px;
}

/* Flexible rows above and below the text take up the 40px line, so value and label stay 10px apart. */
.pl-config__item {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr auto auto 1fr;
	justify-items: center;
	white-space: nowrap;
}

.pl-config__item + .pl-config__item {
	grid-template-columns: 36px 1px 36px auto;
}

.pl-config__item + .pl-config__item::before {
	content: "";
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	width: 1px;
	height: 40px;
	background: var(--pl-mercury);
}

/* dt comes first in the markup, as HTML requires; the value shows on top. */
.pl-config dd {
	grid-column: -2;
	grid-row: 2;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.pl-config dt {
	grid-column: -2;
	grid-row: 3;
	font-size: 12px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Property Details, About
   --------------------------------------------------------------------------- */

.pl-details__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, max-content));
	gap: 30px 60px;
}

.pl-details__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 154px;
}

.pl-details dt {
	color: var(--pl-ash);
}

.pl-about {
	padding-right: 30px;
}

.pl-about__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pl-about__text.is-collapsed {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.pl-about__text.is-collapsed > * + * {
	margin-top: 0;
}

.pl-about__text.is-collapsed p {
	display: inline;
	text-box: none;
}

.pl-about__text.is-collapsed p::after {
	content: " ";
}

.pl-about__headline {
	font-weight: 700;
}

/* Figma: cap-trimmed text + 4px + the 1px line = a 16px box. */
.pl-about__toggle,
#pl-page .pl-about__toggle,
#content #pl-page .pl-about__toggle {
	align-self: flex-start;
	padding-bottom: 5px;
	text-box: trim-both cap alphabetic;
}

/* ---------------------------------------------------------------------------
   Map, Take a Closer Look
   --------------------------------------------------------------------------- */

.pl-map__link {
	display: block;
	height: 350px;
	border-radius: var(--pl-radius);
	overflow: hidden;
	background: var(--pl-onyx);
}

.pl-map__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pl-closer {
	row-gap: 36px;
}

.pl-media {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pl-media + .pl-media {
	margin-top: 4px; /* 36 + 4 = the design's 40px between the two cards */
}

.pl-media__frame {
	position: relative;
	display: block;
	width: 100%;
	height: 350px;
	padding: 0;
	border: 0;
	border-radius: var(--pl-radius);
	overflow: hidden;
	background: var(--pl-onyx);
}

/* Not :first-child: Autoptimize lazy-load puts a <noscript> before the poster. */
.pl-media__frame > img:not(.pl-media__play) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pl-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 134px;
	height: 134px;
	max-width: none !important;
	transform: translate(-50%, -46%);
	pointer-events: none;
}

/*
 * <lite-youtube> fills the frame: page rules beat the component's own 16:9 `padding-bottom` on
 * :host, and its poster is object-fit: cover. Its play badge is the site-wide one (the child
 * theme makes the red plate transparent, leaving the white triangle).
 */
.pl-media__frame lite-youtube,
.pl-gallery__embed lite-youtube {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 0;
}

.pl-gallery__embed {
	position: relative;
}

.pl-media__frame iframe,
.pl-gallery__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

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

.pl-agent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 24px 24px 34px;
	border: 1px solid var(--pl-mercury);
	border-radius: var(--pl-radius);
	background: var(--pl-white);
	box-shadow: var(--pl-shadow);
}

.pl-agent__profile,
.pl-agent__rating,
.pl-agent__buttons {
	width: 100%;
}

.pl-agent__profile {
	display: flex;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pl-mercury);
}

.pl-avatar {
	position: relative;
	flex: none;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	background-image: linear-gradient(197deg, #3f5cd6 5.86%, #221f2b 134.32%);
}

.pl-avatar--lg {
	width: 80px;
	height: 80px;
}

.pl-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pl-agent__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 10px;
}

.pl-agent__name {
	font-family: var(--pl-serif) !important; /* beats listify-child's `body p` */
	font-size: 20px;
}

.pl-agent__cea {
	color: var(--pl-ash);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* Figma: cap-trimmed text + 4px + the 1px line = a 16px box, 20px under the CEA line. */
#pl-page .pl-agent__text .pl-link,
#content #pl-page .pl-agent__text .pl-link {
	margin-top: 4px; /* 16 + 4 = 20px from the CEA line */
	padding-bottom: 5px;
	text-box: trim-both cap alphabetic;
}

.pl-agent__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: -6px; /* 30px card gap - 6 = 24px under the divider */
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pl-mercury);
	font-size: 16px;
}

/* The row is the stars' 20px, as in Figma, not the text's 24px line. */
.pl-agent__rating strong {
	line-height: 20px;
}

.pl-stars {
	display: inline-flex;
	gap: 1px;
	color: var(--pl-gold);
}

.pl-stars svg {
	display: block;
	width: 20px;
	height: 20px;
}

.pl-stars .is-empty {
	opacity: 0.3;
}

.pl-agent__divider {
	width: 1px;
	height: 18px;
	background: var(--pl-silver);
}

.pl-agent__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: -6px;
}

.pl-btn,
#pl-page .pl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 51px;
	padding: 0 50px;
	border-radius: 3px;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

#pl-page .pl-btn--primary {
	border: 1px solid var(--pl-blue);
	background: var(--pl-blue);
	color: var(--pl-white);
}

#pl-page .pl-btn--primary:hover {
	background: #3550c0;
}

#pl-page .pl-btn--ghost {
	border: 1px solid var(--pl-mercury);
	background: var(--pl-white);
	color: var(--pl-onyx);
}

#pl-page .pl-btn--ghost:hover {
	border-color: var(--pl-silver);
}

.pl-btn svg {
	width: 16px;
	height: 16px;
}

.pl-agent__note {
	color: var(--pl-ash);
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   Carousels — native scroll-snap; listings.js adds arrows and dots
   --------------------------------------------------------------------------- */

[data-pl-track] {
	scrollbar-width: none;
}

[data-pl-track]::-webkit-scrollbar {
	display: none;
}

.pl-arrows {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}

.pl-page .pl-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pl-blue);
	color: var(--pl-white);
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.pl-page .pl-arrow:disabled {
	background: var(--pl-metallic);
	color: var(--pl-blue);
	cursor: default;
}

.pl-page .pl-arrow--light {
	background: rgba(255, 255, 255, 0.85);
	color: var(--pl-onyx);
}

.pl-page .pl-arrow--light:disabled {
	opacity: 0;
	pointer-events: none;
}

.pl-arrow svg {
	width: 34px;
	height: 34px;
}

.pl-dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	display: flex;
	gap: 5px;
	transform: translateX(-50%);
	pointer-events: none;
}

.pl-dots span {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.6);
	transition: background-color 0.2s ease;
}

.pl-dots span.is-active {
	background: var(--pl-white);
}

/* ---------------------------------------------------------------------------
   Similar Listings + card
   --------------------------------------------------------------------------- */

.pl-carousel__track {
	display: flex;
	gap: 30px;
	/* A scroller clips what overflows it, card shadows included; padding keeps them whole and
	   the negative margin gives the space back. Sideways it is exactly the card gap, so the
	   next card starts where the padding ends and never peeks in. .pl-page clips the overhang
	   so it never widens the page. */
	margin: -50px -30px;
	padding: 50px 30px;
	/* The 50px shadow outgrows that 30px, so fade it out over it instead of cutting it off. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 30px;
}

.pl-carousel__track > .pl-card {
	flex: 0 0 calc((100% - 60px) / 3);
	scroll-snap-align: start;
}

.pl-card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 16px 16px 26px;
	border: 1px solid var(--pl-mercury);
	border-radius: var(--pl-radius);
	background: var(--pl-white);
	box-shadow: var(--pl-shadow);
}

.pl-card__media {
	position: relative;
	height: 220px;
	border-radius: var(--pl-radius);
	overflow: hidden;
	background: var(--pl-mercury);
}

.pl-card__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.pl-card__track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
}

.pl-card__media .pl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.pl-card__prev {
	left: 12px;
}

.pl-card__next {
	right: 12px;
}

.pl-card__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pl-card__property {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pl-mercury);
}

.pl-card__kicker {
	color: var(--pl-blue);
	font-weight: 700;
}

.pl-page .pl-card__title {
	font-family: var(--pl-serif) !important;
	font-size: 20px !important;
	line-height: 1.5 !important;
}

#pl-page .pl-card__title a {
	color: var(--pl-onyx);
}

#pl-page .pl-card__title a:hover {
	color: var(--pl-blue);
}

/* Pin on the first line, so a district that wraps does not push it to the middle. */
.pl-card__area {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 10px; /* 20 + 10 = the design's 30px */
}

.pl-card__area svg {
	flex: none;
	width: 14px;
	height: 18px;
	margin-top: 3px; /* centred on the 24px first line */
	color: var(--pl-blue);
}

.pl-card__details {
	color: var(--pl-ash);
}

.pl-card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px; /* 24 + 4 = 28px */
}

.pl-card__price {
	display: flex;
	flex: 1;
	align-items: flex-end;
	gap: 6px;
	white-space: nowrap;
}

.pl-card__amount {
	font-family: var(--pl-serif);
	font-size: 20px;
	line-height: 1;
}

.pl-card__psf {
	color: var(--pl-ash);
	font-size: 12px;
	line-height: 1.2;
}

/* Price fills the left; "Listed by" sits against the right edge and shortens with … if needed. */
.pl-card__agent {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-left: auto;
	font-size: 12px;
	white-space: nowrap;
}

.pl-card__agent > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Directory rows keep Figma's layout: "Listed by" starts right after the 203px price column. */
.pl-card--row .pl-card__agent {
	flex: 1;
	margin-left: 0;
}

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

.pl-gallery {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 100px var(--pl-gutter);
	border: 0;
	background: var(--pl-white);
	color: var(--pl-onyx);
	font-family: var(--pl-sans);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pl-gallery::backdrop {
	background: var(--pl-white);
}

.pl-gallery__inner {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.pl-gallery__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.pl-page .pl-gallery__close {
	display: flex;
	padding: 6px 0 0;
	border: 0;
	background: none;
	transform: rotate(180deg);
}

/* showModal() focuses the close button; keep the ring for keyboard users only. */
.pl-gallery__close:focus:not(:focus-visible) {
	outline: none;
}

.pl-gallery__tabs {
	display: flex;
	gap: 24px;
	margin-bottom: -26px; /* tabs sit 24px above the photos */
}

.pl-page .pl-gallery__tab {
	padding: 0 0 5px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.pl-page .pl-gallery__tab[aria-selected="true"] {
	border-bottom-color: var(--pl-blue);
}

.pl-gallery__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pl-gallery__panel[hidden] {
	display: none;
}

.pl-gallery__panel img {
	width: 100%;
	height: auto;
}

.pl-gallery__plan {
	background: var(--pl-white);
	object-fit: contain;
}

.pl-gallery__embed {
	aspect-ratio: 16 / 9;
	background: var(--pl-onyx);
}

html.pl-gallery-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Tablet: agent card leaves the sidebar
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.pl-listing__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top"
			"main"
			"similar"
			"aside";
	}

	.pl-listing__aside .pl-agent {
		position: static;
	}

	.pl-carousel__track > .pl-card {
		flex-basis: calc((100% - 30px) / 2);
	}
}

/* ---------------------------------------------------------------------------
   Mobile (design: 393 wide, 16px gutters)
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.propseller-listing {
		--pl-gutter: 16px;
	}

	.pl-card__area {
		margin-top: 5px;
	}

	.pl-page {
		padding: 36px var(--pl-gutter) 70px;
	}

	/* Figma 8626:71726: photos 30px above the tags. */
	.pl-listing__grid {
		row-gap: 30px;
	}

	/* 36px from the breadcrumb's capitals to the photos. Its 27px line box has 7.5px above the
	   capitals and 6.5px below the baseline; the margins take them back. */
	.pl-listing__top {
		gap: 29.5px;
	}

	.pl-breadcrumb {
		margin-top: -7.5px;
	}

	/* Sections: 50px, hairline, 50px. Price and the config box sit 36px apart. */
	.pl-listing__main {
		gap: 50px;
	}

	.pl-listing__main > .pl-price,
	.pl-listing__main > .pl-config {
		margin-top: -14px;
	}

	.pl-listing__main > .pl-section {
		padding-top: 50px;
	}

	.pl-similar {
		margin-top: 20px; /* 30px grid gap + 20 = 50px above the hairline */
	}

	/* Agent block: 30px, hairline, 30px under Similar Listings. */
	.pl-listing__aside {
		padding-top: 30px;
		border-top: 1px solid var(--pl-mercury);
	}

	.pl-breadcrumb ol {
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}

	/* The links keep their width; the current page shrinks and ends in "…". */
	.pl-breadcrumb li {
		flex: none;
	}

	.pl-breadcrumb li:last-child {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Hero becomes a swipeable strip. */
	.pl-hero__track,
	.pl-hero--1 .pl-hero__track,
	.pl-hero--2 .pl-hero__track,
	.pl-hero--3 .pl-hero__track,
	.pl-hero--4 .pl-hero__track {
		display: flex;
		height: 220px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0;
	}

	.pl-hero__item,
	.pl-hero--1 .pl-hero__item:not(:first-child),
	.pl-hero--2 .pl-hero__item:not(:first-child),
	.pl-hero--3 .pl-hero__item:not(:first-child),
	.pl-hero--4 .pl-hero__item:not(:first-child) {
		display: block;
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.pl-hero__item:hover img {
		transform: none;
	}

	.pl-badge {
		top: 12px;
		left: 12px;
	}

	.pl-page .pl-hero__view {
		display: none;
	}

	.pl-hero__nav {
		position: absolute;
		top: 50%;
		left: 12px;
		right: 12px;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.pl-hero__nav .pl-arrow {
		pointer-events: auto;
	}

	.pl-hero .pl-dots {
		display: flex;
	}

	/* Figma 8626:72047: full width, 16 × 24 padding, items spread evenly. */
	.pl-config {
		align-self: stretch;
		padding: 16px 24px;
	}

	.pl-config__item + .pl-config__item {
		flex: 1 1 auto;
		grid-template-columns: minmax(8px, 1fr) 1px minmax(8px, 1fr) auto;
	}

	.pl-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 40px;
	}

	.pl-details__item {
		min-width: 0;
	}

	.pl-about {
		padding-right: 0;
	}

	.pl-map__link,
	.pl-media__frame {
		height: 200px;
	}

	.pl-closer .pl-media + .pl-media {
		margin-top: -6px; /* 36 - 6 = the design's 30px */
	}

	.pl-carousel__track > .pl-card {
		flex-basis: 100%;
	}

	/* On mobile the agent block sits on the page, not in a card. */
	.pl-agent {
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.pl-gallery {
		padding: 36px var(--pl-gutter) 70px;
	}
}

/* ===========================================================================
   Directory — /property-for-sale/ and the per-type pages

   Design: Figma › Listing Pages › Listing Directory Page (desktop 7996:1017, mobile
   8589:48794, filter panels in section 7996:1010).
   =========================================================================== */

.propseller-listing {
	--pl-iron: #85868d;
	--pl-steel: #8a9deb;
	--pl-coal: #2b2935;
	--pl-panel-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.pl-page.pl-directory {
	padding: 0;
}

.pl-br-mobile {
	display: none;
}

/* --- Hero ---------------------------------------------------------------- */

.pl-dir-hero {
	position: relative;
	height: 450px;
	padding: 100px var(--pl-gutter) 0;
	background: var(--pl-onyx);
	color: var(--pl-white);
	text-align: center;
	isolation: isolate;
}

.pl-dir-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
	/* Figma anchors the photo top (desktop) and left (mobile). */
	object-position: left top;
	z-index: -2;
}

.pl-dir-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 31, 43, 0.7);
	z-index: -1;
}

.pl-dir-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.pl-dir-hero__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

/* The H1 keeps the design's eyebrow styling. */
.pl-page .pl-dir-hero__eyebrow {
	font-family: var(--pl-sans) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase !important;
	color: var(--pl-steel) !important;
}

.pl-page .pl-dir-hero__title {
	font-family: var(--pl-serif) !important;
	font-size: 50px;
	line-height: 1.5;
}

.pl-dir-hero__lead {
	font-size: 18px;
	line-height: 1.5;
}

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

.pl-search {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: calc(100% - 2 * var(--pl-gutter));
	max-width: 1000px;
	margin: -75px auto 0;
	padding: 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: var(--pl-radius);
	background: var(--pl-white);
	box-shadow: var(--pl-panel-shadow);
}

.pl-search__location {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pl-search__location:focus-within {
	border-color: var(--pl-blue);
	background: var(--pl-metallic);
}

.pl-search__input {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	color: var(--pl-onyx);
}

.pl-search__input svg {
	flex: none;
}

#pl-page .pl-search__input input {
	flex: 1;
	min-width: 0;
	height: 51px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--pl-onyx);
	font: inherit;
	font-size: 16px;
	outline: none;
}

#pl-page .pl-search__input input::placeholder {
	color: var(--pl-iron);
	opacity: 1;
}

#pl-page .pl-search__input input::-webkit-search-cancel-button {
	display: none;
}

#pl-page .pl-search__go {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--pl-blue);
	color: var(--pl-white);
}

#pl-page .pl-search__go:hover {
	background: #3550c0;
}

.pl-search__filters {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pl-search__divider {
	flex: none;
	align-self: stretch;
	width: 1px;
	background: var(--pl-mercury);
}

.pl-drop {
	position: relative;
	flex: 1;
	min-width: 0;
}

.pl-drop--all {
	flex: 0 0 209px;
}

/* Location suggestions */
.pl-suggest {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	width: min(600px, 100%);
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--pl-white);
	box-shadow: var(--pl-panel-shadow);
}

.pl-suggest li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 16px;
	border-bottom: 1px solid var(--pl-mercury);
	cursor: pointer;
}

.pl-suggest li:last-child {
	border-bottom: 0;
}

.pl-suggest li.is-active,
.pl-suggest li:hover {
	background: var(--pl-metallic);
}

.pl-suggest strong {
	font-weight: 700;
}

.pl-suggest__title {
	color: var(--pl-onyx);
}

.pl-suggest__sub {
	color: var(--pl-ash);
	font-size: 14px;
}

/* --- Closed fields (quick filters, sort) ---------------------------------- */

#pl-page .pl-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 51px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	background: var(--pl-white);
	color: var(--pl-iron);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	transition: border-color 0.2s ease;
}

#pl-page .pl-field.is-set {
	color: var(--pl-onyx);
}

#pl-page .pl-field:hover,
#pl-page .pl-field[aria-expanded="true"] {
	border-color: var(--pl-blue);
}

.pl-field__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pl-field > svg {
	flex: none;
	color: var(--pl-onyx);
	transition: transform 0.2s ease;
}

.pl-field[aria-expanded="true"] > svg:last-child {
	transform: rotate(180deg);
}

#pl-page .pl-field--filters {
	justify-content: flex-start;
}

.pl-field--filters .pl-field__text {
	flex: none;
}

.pl-field--filters > svg:last-child,
.pl-field--filters[aria-expanded="true"] > svg:last-child {
	transform: none;
}

.pl-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--pl-blue);
	color: var(--pl-white);
	font-size: 14px;
	line-height: 1;
}

/* --- Panels --------------------------------------------------------------- */

.pl-panel {
	margin: 0;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	background: var(--pl-white);
	box-shadow: var(--pl-panel-shadow);
	color: var(--pl-onyx);
	text-align: left;
}

.pl-panel[hidden] {
	display: none !important;
}

/* Figma: 10px below the field that opened it. */
.pl-panel--drop {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	width: 430px;
}

/* Figma: 34px from the panel's inner edge to the first title, 24px between sections. */
.pl-panel__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 34px 24px 24px;
}

.pl-panel__title,
#pl-page .pl-acc__toggle {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--pl-onyx);
}

/* Rooms: 24px gap + 24px = Figma's 48px from the Bedrooms circles to the Bathrooms title */
.pl-panel__body > * + .pl-panel__title {
	margin-top: 24px;
}

.pl-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid var(--pl-mercury);
	background: var(--pl-white);
}

#pl-page .pl-panel__clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pl-onyx);
	font-size: 16px;
}

#pl-page .pl-panel__clear:hover {
	color: var(--pl-blue);
}

#pl-page .pl-panel__apply {
	width: auto;
	min-width: 200px;
}

/*
 * All Filters opens like the agents directory's Filters panel (propseller-top-agents/
 * agents-grid.css), not like the Figma dropdown: a drawer pinned to the left edge, below the
 * fixed site header, sliding in from off-screen. On mobile (bottom of this file) the same rules
 * become a bottom sheet over a dimmed page.
 *
 * directory.js only toggles `hidden`, and display: none cannot animate, so the panel stays
 * displayed and hides with visibility + transform. visibility still takes it out of hit-testing
 * and the accessibility tree, and is delayed on close so the slide-out shows.
 */
.pl-panel--all {
	position: fixed;
	top: var(--pl-header);
	right: auto;
	bottom: 0;
	left: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 430px;
	max-width: 100vw;
	border: 0;
	border-right: 1px solid var(--pl-mercury);
	border-radius: 0;
	box-shadow: 5px 0 30px rgba(34, 31, 43, 0.12);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.pl-panel--all[hidden] {
	display: flex !important;
}

/* `transform: none` rather than a per-axis value, so mobile's translateY reuses this rule */
.pl-panel--all:not([hidden]) {
	transform: none;
	visibility: visible;
	transition: transform 0.3s ease, visibility 0s;
}

/* Mobile only; see the mobile block */
.pl-backdrop {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.pl-panel--all,
	.pl-panel--all:not([hidden]),
	.pl-backdrop,
	.pl-backdrop:not([hidden]) {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}

.pl-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 24px;
	border-bottom: 1px solid var(--pl-mercury);
}

.pl-panel__heading {
	font-family: var(--pl-serif) !important; /* beats listify-child's `body p` */
	font-size: 24px;
	line-height: 1.5;
}

#pl-page .pl-panel__close {
	display: flex;
	padding: 4px;
	margin: -4px;
	border: 0;
	background: none;
	color: var(--pl-onyx);
}

.pl-panel__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pl-acc + .pl-acc {
	border-top: 1px solid var(--pl-mercury);
}

.pl-page .pl-acc__heading {
	margin: 0;
}

#pl-page .pl-acc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 24px;
	border: 0;
	background: none;
	text-align: left;
}

.pl-acc__toggle svg {
	transition: transform 0.2s ease;
}

.pl-acc__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.pl-acc__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 24px 24px;
}

.pl-acc__body[hidden] {
	display: none;
}

/* Checkbox rows carry their own vertical padding. */
.pl-acc__body > .pl-checks:last-child,
.pl-acc__body > .pl-subtypes:last-child {
	margin-bottom: -10px;
}

/* Property type tiles */
.pl-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pl-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 51px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	color: var(--pl-onyx);
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pl-tile img {
	flex: none;
}

/* A real link for crawlers; the click belongs to the tile's radio. */
.pl-page .pl-tile__link {
	color: inherit !important;
	text-decoration: none !important;
	pointer-events: none;
}

.pl-tile:has(input:checked),
.pl-circle:has(input:checked) {
	background: var(--pl-metallic);
}

.pl-tile:has(input:focus-visible),
.pl-circle:has(input:focus-visible),
.pl-check:has(input:focus-visible) .pl-check__box {
	outline: 2px solid var(--pl-blue);
	outline-offset: 2px;
}

.pl-tile input,
.pl-circle input,
.pl-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Bedrooms / bathrooms */
.pl-circles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pl-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	margin: 0;
	border: 1px solid var(--pl-mercury);
	border-radius: 50%;
	color: var(--pl-onyx);
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* Checkboxes */
.pl-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
	margin-top: -10px;
}

.pl-subtypes[hidden] {
	display: none;
}

.pl-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 51px;
	margin: 0;
	padding: 14px 0;
	color: var(--pl-onyx);
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.pl-check[hidden] {
	display: none;
}

.pl-check__box {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--pl-coal);
	border-radius: 6px;
	color: var(--pl-white);
}

.pl-check__box svg {
	width: 24px;
	height: 24px;
	opacity: 0;
}

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

.pl-check input:checked + .pl-check__box svg {
	opacity: 1;
}

/* District: one column, five rows visible, then it scrolls. */
.pl-checks--list {
	grid-template-columns: minmax(0, 1fr);
	max-height: 255px;
	overflow-y: auto;
	margin-top: 0;
	overscroll-behavior: contain;
}

.pl-district {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pl-district__search {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 51px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	color: var(--pl-onyx);
	font-weight: 400;
}

.pl-district__search:focus-within {
	border-color: var(--pl-blue);
	background: var(--pl-metallic);
}

#pl-page .pl-district__search input {
	flex: 1;
	min-width: 0;
	height: 49px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 16px;
	outline: none;
}

#pl-page .pl-district__search input::-webkit-search-cancel-button {
	display: none;
}

#pl-page .pl-district__search input::placeholder {
	color: var(--pl-iron);
	opacity: 1;
}

/* Minimum / Maximum */
.pl-minmax {
	position: relative;
	display: flex;
	gap: 12px;
}

.pl-select {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	font-weight: 400;
}

/* A span, so the global cap trim (top of file) misses it; Figma draws it 9px tall, field 10px below. */
.pl-select__label {
	color: var(--pl-ash);
	font-size: 12px;
	line-height: 1.5;
	text-box: trim-both cap alphabetic;
}

.pl-select__field {
	position: relative;
	display: block;
}

#pl-page .pl-select select {
	display: block;
	width: 100%;
	height: 51px;
	margin: 0;
	padding: 0 40px 0 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	background: var(--pl-white);
	box-shadow: none;
	color: var(--pl-onyx);
	font: inherit;
	font-size: 16px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

#pl-page .pl-select select.is-empty {
	color: var(--pl-iron);
}

#pl-page .pl-select select:focus {
	border-color: var(--pl-blue);
	outline: none;
}

/* Listify's script wraps every select in span.select with its own arrow; ours is the svg. */
.pl-select__field .select {
	display: block;
	position: static;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.pl-select__field .select::before,
.pl-select__field .select::after {
	content: none !important;
	display: none !important;
}

.pl-select__field svg {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	color: var(--pl-onyx);
	pointer-events: none;
}

/*
 * Option list (Figma Price / Floor Size / Build Year Option 8046:7640): directory.js hides the
 * <select> behind a button and opens one list under both fields of the pair, 10px below them.
 * Rows are 51px (16px text, 20px cap-trimmed padding), five visible, the chosen one Metallic
 * Blue with Cobalt text. Hover shares the chosen row's fill, as the Sort menu does.
 */
.pl-select__field.is-enhanced select,
.pl-select__field.is-enhanced .select {
	display: none !important;
}

#pl-page .pl-select__button {
	display: flex;
	align-items: center;
	width: 100%;
	height: 51px;
	margin: 0;
	padding: 0 40px 0 16px;
	border: 1px solid var(--pl-mercury);
	border-radius: 3px;
	background: var(--pl-white);
	box-shadow: none;
	color: var(--pl-onyx);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

#pl-page .pl-select__button.is-empty {
	color: var(--pl-iron);
}

#pl-page .pl-select__button:hover,
#pl-page .pl-select__button:focus-visible,
#pl-page .pl-select__button[aria-expanded="true"] {
	border-color: var(--pl-blue);
	outline: none;
}

.pl-select__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pl-select__button[aria-expanded="true"] ~ svg {
	transform: translateY(-50%) rotate(180deg);
}

.pl-options {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	z-index: 40;
	max-height: 255px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border-radius: 3px;
	background: var(--pl-white);
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
	outline: none;
}

.pl-options[hidden] {
	display: none;
}

.pl-options li {
	display: flex;
	align-items: center;
	height: 51px;
	margin: 0;
	padding: 0 16px;
	color: var(--pl-onyx);
	font-size: 16px;
	cursor: pointer;
}

.pl-options li.is-active {
	background: var(--pl-metallic);
}

/* Pointer devices only: a tap leaves :hover stuck on the row under the finger. */
@media (hover: hover) {

	.pl-options li:hover {
		background: var(--pl-metallic);
	}
}

.pl-options li.is-selected {
	background: var(--pl-metallic);
	color: var(--pl-blue);
}

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

.pl-dir-results {
	padding: 45px var(--pl-gutter) 100px;
}

.pl-dir-results__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
	max-width: 900px;
	margin: 0 auto;
}

.pl-dir-results__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.pl-dir-count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.pl-dir-count__total {
	font-family: var(--pl-serif);
	font-size: 20px;
}

.pl-dir-count__where {
	color: var(--pl-ash);
}

.pl-sort {
	flex: 0 0 200px;
}

#pl-page .pl-sort__button {
	justify-content: flex-start;
}

.pl-sort__button > svg:first-child {
	transform: none !important;
}

.pl-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	width: 100%;
	min-width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--pl-white);
	box-shadow: var(--pl-panel-shadow);
}

.pl-menu li {
	margin: 0;
}

#pl-page .pl-menu a {
	display: block;
	padding: 13px 16px;
	color: var(--pl-onyx);
	line-height: 1.5;
}

#pl-page .pl-menu a:hover,
#pl-page .pl-menu a.is-current {
	background: var(--pl-metallic);
}

#pl-page .pl-menu a.is-current {
	color: var(--pl-blue);
}

.pl-dir-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.pl-dir-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 40px;
	border: 1px solid var(--pl-mercury);
	border-radius: var(--pl-radius);
}

.pl-dir-empty__title {
	font-family: var(--pl-serif);
	font-size: 24px;
}

/* Directory card: photo left, details right. */
.pl-card--row {
	flex-direction: row;
	gap: 30px;
	padding: 16px;
}

.pl-card--row .pl-card__media {
	flex: 0 0 330px;
	height: auto;
	min-height: 300px;
}

.pl-card--row .pl-card__body {
	flex: 1;
	min-width: 0;
	padding: 30px 0;
}

.pl-page .pl-card--row .pl-card__title {
	font-size: 24px !important;
}

.pl-card--row .pl-card__amount {
	font-size: 24px;
}

.pl-card--row .pl-card__price {
	flex: 0 0 203px;
}

.pl-card--row .pl-card__foot {
	padding-right: 30px;
}

.pl-card--row .pl-avatar {
	width: 40px;
	height: 40px;
}

.pl-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

#pl-page .pl-card__buttons .pl-btn {
	width: auto;
	padding: 0 50px;
}

#pl-page .pl-card__buttons .pl-btn--ghost {
	border-color: var(--pl-silver);
}

#pl-page .pl-card__buttons .pl-btn--ghost:hover {
	border-color: var(--pl-blue);
}

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

.pl-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 14px; /* 36 + 14 = the design's 50 */
}

.pl-page .pl-pager__pages {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pl-pager__pages li {
	margin: 0;
}

.pl-pager__page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	line-height: 1;
}

#pl-page a.pl-pager__page {
	color: var(--pl-onyx);
}

#pl-page a.pl-pager__page:hover {
	background: var(--pl-metallic);
}

.pl-pager__page.is-current {
	background: var(--pl-onyx);
	color: var(--pl-white);
}

.pl-pager__gap {
	color: var(--pl-ash);
}

#pl-page a.pl-arrow:hover {
	background: #3550c0;
}

.pl-page .pl-arrow.is-disabled {
	background: var(--pl-metallic);
	color: var(--pl-blue);
}

/* --- Directory: tablet --------------------------------------------------- */

@media (max-width: 1199px) {
	/* The Price panel would run off the right edge; it opens leftwards instead. */
	.pl-drop--price .pl-panel--drop {
		left: auto;
		right: 0;
	}
}

@media (max-width: 1023px) {
	.pl-card--row .pl-card__media {
		flex-basis: 280px;
	}

	.pl-card--row .pl-card__foot {
		padding-right: 0;
	}

	.pl-card--row .pl-card__price {
		flex: 1;
	}
}

/* --- Directory: mobile --------------------------------------------------- */

@media (max-width: 767px) {
	.pl-br-mobile {
		display: inline;
	}

	.pl-dir-hero {
		height: 480px;
		padding-top: 70px;
	}

	.pl-page .pl-dir-hero__title {
		font-size: 28px;
	}

	.pl-search {
		margin-top: -111px;
	}

	.pl-search__filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pl-search__divider {
		display: none;
	}

	#pl-page .pl-field {
		gap: 8px;
		padding: 0 14px;
	}

	/* Panels take the bar's inner width (327px on the 393px design) under the field tapped. */
	.pl-drop {
		position: static;
	}

	.pl-panel--drop,
	.pl-drop--price .pl-panel--drop {
		left: 16px;
		right: 16px;
		width: auto;
		top: auto;
		margin-top: 10px;
	}

	#pl-page .pl-panel--drop .pl-panel__apply {
		min-width: 0;
		flex: 0 1 200px;
		padding: 0 24px;
	}

	/*
	 * Rooms dropdown (Figma 8601:59106): 45px circles on one row. Below the 393px design they
	 * shrink rather than wrap; five shared columns keep Bathrooms the same size as Bedrooms.
	 * The All Filters sheet keeps the 51px circles it is drawn with.
	 */
	.pl-panel--drop .pl-circles {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 45px));
	}

	.pl-panel--drop .pl-circle {
		width: auto;
		height: auto;
		aspect-ratio: 1;
	}

	/*
	 * All Filters becomes a bottom sheet over a dimmed page, sliding up from below the viewport,
	 * as on the agents directory. The backdrop also catches the tap that closes the sheet, so it
	 * cannot land on a card link behind it. The hide-and-animate mechanics live on the base rules.
	 */
	.pl-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		background: rgba(34, 31, 43, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.pl-backdrop:not([hidden]) {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s;
	}

	.pl-panel--all {
		top: auto;
		right: 0;
		width: auto;
		max-height: 70vh;
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -5px 30px rgba(34, 31, 43, 0.2);
		transform: translateY(100%);
	}

	.pl-suggest {
		width: 100%;
	}

	.pl-dir-results {
		padding: 50px var(--pl-gutter) 70px;
	}

	.pl-dir-results__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.pl-sort.pl-drop {
		position: relative;
		flex: none;
		width: 175px;
	}

	.pl-menu {
		left: 0;
		right: auto;
	}

	.pl-card--row {
		flex-direction: column;
	}

	.pl-card--row .pl-card__media {
		flex: none;
		height: 220px;
		min-height: 0;
	}

	.pl-card--row .pl-card__body {
		padding: 0;
	}

	.pl-page .pl-card--row .pl-card__title,
	.pl-card--row .pl-card__amount {
		font-size: 20px !important;
	}

	.pl-card--row .pl-avatar {
		width: 30px;
		height: 30px;
	}

	.pl-card__buttons {
		flex-wrap: nowrap;
	}

	#pl-page .pl-card__buttons .pl-btn {
		flex: 1;
		padding: 0 12px;
	}

}

html.pl-sheet-open,
html.pl-sheet-open body {
	overflow: hidden;
}