/*
 * Art Division Property Modules - Frontend Styles
 *
 * Provides layout and presentation for property cards, the property grid,
 * and the property slider. Relies on Art Division Page Modules for the
 * section-level layout (padding, background colour, Swiper carousel) and
 * the Art Division AI theme's --art- custom properties for colour and spacing.
 *
 * Class prefixes:
 *   art-prop-   property-specific elements (card, grid, slider)
 *   art-pm-     shared page-module elements (inherited from Page Modules)
 */

/* ── Property grid ─────────────────────────────────────────────────────────── */

.art-prop-grid {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 1.5rem ) );
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 18rem ), 1fr ) );
}

/* ── Property card ─────────────────────────────────────────────────────────── */

.art-prop-card {
	background-color: var( --art-color-surface, #fff );
	border-radius: var( --art-radius, 0 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Swiper overrides: ensure cards fill their slide at full height */

.art-pm-module__inner--slider .art-prop-card {
	height: auto;
}

/* Thumbnail */

.art-prop-card__thumbnail {
	aspect-ratio: 4 / 3;
	display: block;
	overflow: hidden;
	position: relative;
}

.art-prop-card__thumbnail-link {
	display: block;
	height: 100%;
	width: 100%;
}

/* Property type: hidden on the Default card by default - unhide via CSS if needed.
   Scoped so the Detailed card's type line is unaffected. */

.art-prop-card:not( .art-prop-card--archive ) .art-prop-card__type {
	display: none;
}

.art-prop-card__image {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	width: 100%;
}

.art-prop-card__thumbnail:hover .art-prop-card__image,
.art-prop-card__thumbnail-link:focus-visible .art-prop-card__image {
	transform: scale( 1.04 );
}

/* Body */

.art-prop-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: var( --art-spacing, 1.25rem );
}

/* Title */

.art-prop-card__title {
	font-size: var( --art-text-base, 1rem );
	margin: 0;
}

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

.art-prop-card__title a:hover,
.art-prop-card__title a:focus-visible {
	text-decoration: underline;
}

/* Focus outline: WCAG 2.2 compliant 2px solid with sufficient contrast */

.art-prop-card__title a:focus-visible,
.art-prop-card__thumbnail-link:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* Price */

.art-prop-card__price {
	color: var( --art-color-accent, inherit );
	font-size: var( --art-text-lg, 1.125rem );
	margin: 0;
}

/* Meta (beds / baths) */

.art-prop-card__meta {
	color: var( --art-color-muted, #666 );
	display: flex;
	flex-wrap: wrap;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.75rem;
	margin: 0;
}

.art-prop-card__beds,
.art-prop-card__baths {
	align-items: center;
	display: inline-flex;
	gap: 0.25rem;
}

/* Best Match tick marks - only the wizard criteria this property matched,
   see Art_Division_Property_Modules_Best_Match::maybe_render_matched_criteria(). */

.art-prop-card__matched-criteria {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-prop-card__matched-criteria-item {
	align-items: center;
	color: var( --art-color-muted, #666 );
	display: inline-flex;
	font-size: var( --art-text-sm, 0.8125rem );
	gap: 0.3rem;
}

.art-prop-card__matched-criteria-tick {
	color: var( --art-color-accent, #1a4a6b );
	font-weight: 700;
}

/* ── Slider wrapper (additional property-specific overrides) ───────────────── */

/*
 * The swiper carousel is initialised by art-division-page-modules.js via
 * [data-art-pm-carousel]. These rules refine the property-specific appearance.
 */

.art-pm-module--property-slider .art-pm-module__inner--slider {
	--art-prop-slider-slide-width: min( 85vw, 20rem );
}

.art-pm-module--style-slider-fullwidth .art-pm-module__inner--slider {
	--art-prop-slider-slide-width: min( 80vw, 22rem );
}

/* On mobile the carousel already peeks the start of the next card at the
   slide's edge (no explicit columns/peek attribute is passed, so the shared
   carousel init's default mobile slidesPerView of 1.15 applies - see
   initCarousels() in art-division-page-modules.js), which is its own swipe
   affordance alongside the pagination dots below - the overlaid arrows are
   redundant there and were cramping the image on small screens. */
/* Arrows centred on the cards' photos, not the whole carousel - the
   position comes from the first card's photo (art-division-property-
   modules.js sets --art-prop-slider-nav-top); without it they stay centred
   as before. */
.art-pm-module--property-slider .art-prop-slider > .swiper-button-prev,
.art-pm-module--property-slider .art-prop-slider > .swiper-button-next {
	top: var( --art-prop-slider-nav-top, 50% );
}

@media ( max-width: 47.9375em ) {
	.art-pm-module--property-slider .swiper-button-prev,
	.art-pm-module--property-slider .swiper-button-next {
		display: none;
	}
}

/* ── Show More button ──────────────────────────────────────────────────────── */

.art-prop-show-more-wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: var( --art-spacing, 1.5rem );
	text-align: center;
}

.art-prop-show-more {
	align-items: center;
	background: transparent;
	border: 2px solid var( --art-color-accent, currentColor );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-accent, inherit );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-base, 1rem );
	gap: 0.5rem;
	justify-content: center;
	min-height: 44px; /* WCAG 2.2 Target Size */
	min-width: 44px;
	padding: 0.625rem 1.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.art-prop-show-more:hover,
.art-prop-show-more:focus-visible {
	background-color: var( --art-color-accent, currentColor );
	color: var( --art-color-on-accent, #fff );
}

/* WCAG 2.2 compliant focus outline */

.art-prop-show-more:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

.art-prop-show-more:disabled {
	cursor: wait;
	opacity: 0.7;
}

/* Spinner - shown via aria-busy state */

.art-prop-show-more__spinner {
	display: none;
	height: 1em;
	width: 1em;
}

.art-prop-show-more[aria-busy='true'] .art-prop-show-more__spinner {
	animation: art-prop-spin 0.7s linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	display: inline-block;
}

@keyframes art-prop-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Error message */

.art-prop-show-more__error {
	color: var( --art-color-accent, inherit );
	font-size: var( --art-text-sm, 0.875rem );
	margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROPERTY ARCHIVE — grid layouts
   ══════════════════════════════════════════════════════════════════════════════ */
.art-prop-archive__wrapper {
    display: block;
    margin-inline: auto;
    max-width: var(--art-max-width, 860px);
    padding-left: 15px;
    padding-right: 15px;
    /* Exposed as a variable so the single property Columns image style (the
       only image header that breaks out full-bleed) can cancel it out below -
       its horizontal breakout margin has no effect on this vertical padding,
       which would otherwise show as a gap above the full-width image strip. */
    --art-prop-archive-wrapper-pt: 2rem;
    padding-top: var(--art-prop-archive-wrapper-pt);
}

/* .art-prop-archive is always rendered inside .art-prop-archive__wrapper
   (opened by the theme's propertyhive/global/wrapper-start.php override on
   every PropertyHive page) - that ancestor already applies the site's
   margin-inline/max-width/side-padding, so this element only needs its own
   container-type for the child breakpoint queries below. */
.art-prop-archive {
	container-type: inline-size;
	display: block;
}

/* Small card grid — 1 / 2 / 3 columns. minmax( 0, 1fr ) rather than 1fr:
   a plain 1fr track grows to its widest item's minimum width, so one wide
   item (a long no-wrap line in a full-row panel) widened every card and
   the page past the screen on phones. */

.art-prop-archive__grid--small {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 1.5rem ) );
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 36em ) {
	.art-prop-archive__grid--small {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 64em ) {
	.art-prop-archive__grid--small {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Large card grid — 1 / 2 columns (minmax( 0, 1fr ), as above) */

.art-prop-archive__grid--large {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 2rem ) );
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 48em ) {
	.art-prop-archive__grid--large {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Archive pagination */

.art-prop-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	margin-block-start: var( --art-spacing, 2rem );
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCHIVE PROPERTY CARD — shared structure
   ══════════════════════════════════════════════════════════════════════════════ */

/* Media area — position context for overlaid elements */

.art-prop-card--archive .art-prop-card__media {
	display: block;
	overflow: hidden;
	position: relative;
}

.art-prop-card--archive-small .art-prop-card__media {
	aspect-ratio: 3 / 2;
}

.art-prop-card--archive-large .art-prop-card__media {
	aspect-ratio: 16 / 9;
}

/* Static image link — fills the media area */

.art-prop-card--archive .art-prop-card__media-link {
	display: block;
	height: 100%;
	width: 100%;
}

.art-prop-card--archive .art-prop-card__image {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	width: 100%;
}

@media ( hover: hover ) {
	/* Not on cards with more than one photo ([data-has-gallery]): those turn
	   into a Swiper slider on that same first hover, which drops the zoom,
	   so the photo zoomed in and then snapped straight back. */
	.art-prop-card--archive:not( .art-prop-card--archive-gallery ):hover .art-prop-card__media:not( [data-has-gallery] ) .art-prop-card__image {
		transform: scale( 1.04 );
	}

	.art-prop-card--archive .art-prop-card__media--slider-active .art-prop-card__image {
		transform: none;
	}
}

/* Availability badge */

.art-prop-card__badge {
	background-color: var( --art-color-accent, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
	font-size: var( --art-text-sm, 0.75rem );
	left: 0;
	padding: 0.35rem 0.65rem;
	position: absolute;
	top: 0;
	z-index: 2;
}

.art-prop-card__badge--right {
	left: auto;
	right: 0;
}

/* Extra badges (art_division_property_modules_card_badges filter): the
   availability badge and the extras share one positioned flex group. Extras
   carry the availability badge's own class, so they look identical unless the
   filter sets bg / color / border (applied inline). */

.art-prop-card__badges {
	display: flex;
	flex-wrap: wrap;
	left: 0;
	max-width: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}

.art-prop-card__badges--right {
	justify-content: flex-end;
	left: auto;
	right: 0;
}

.art-prop-card__badges > .art-prop-card__badge {
	left: auto;
	position: static;
	right: auto;
	top: auto;
}


/* Wishlist button — top-right on small cards, bottom-right via footer on large */

.art-prop-card--archive-small .art-prop-card__wishlist {
	align-items: center;
	background: rgba( 255, 255, 255, 0.85 );
	border: none;
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: flex;
	height: 2.25rem;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	transition: background-color 0.2s ease, color 0.2s ease;
	width: 2.25rem;
	z-index: 2;
}

.art-prop-card--archive-small .art-prop-card__wishlist:hover,
.art-prop-card--archive-small .art-prop-card__wishlist:focus-visible,
.art-prop-card--archive-small .art-prop-card__wishlist[aria-pressed='true'] {
	background: var( --art-color-text, #1a1a1a );
	color: var( --art-color-bg, #fff );
}

.art-prop-card--archive-small .art-prop-card__wishlist:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* Shortlisted heart is filled on every layout, so it reads as selected
   rather than just matching the hover colour. */

.art-prop-card__wishlist[aria-pressed='true'] svg {
	fill: currentColor;
}

/* Price overlay — bottom of image on small cards */

.art-prop-card__price-overlay {
	background-color: var( --art-color-text, #1a1a1a );
	bottom: 0;
	color: var( --art-color-bg, #fff );
	font-size: var( --art-text-lg, 1.125rem );
	left: 0;
	padding: 0.5rem 0.875rem;
	position: absolute;
	z-index: 2;
}

/* Card body */

.art-prop-card--archive .art-prop-card__body {
	background-color: var( --art-color-surface, #fff );
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: var( --art-spacing, 1.25rem );
}

/* Title */

.art-prop-card--archive .art-prop-card__title {
	font-size: var( --art-text-base, 1rem );
	margin: 0;
}

.art-prop-card--archive .art-prop-card__title a {
	color: inherit;
	text-decoration: none;
}

.art-prop-card--archive .art-prop-card__title a:hover,
.art-prop-card--archive .art-prop-card__title a:focus-visible {
	text-decoration: underline;
}

.art-prop-card--archive .art-prop-card__title a:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* Property type / availability line */

.art-prop-card__type {
	color: var( --art-color-muted, #666 );
	font-size: var( --art-text-sm, 0.8125rem );
	margin: 0;
}

/* Summary — large card only */

.art-prop-card__summary {
	color: var( --art-color-muted, #666 );
	font-size: var( --art-text-sm, 0.875rem );
	line-height: 1.55;
	margin: 0;
}

/* ── Large card: title + price header row ──────────────────────────────────── */

.art-prop-card__header-row {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.art-prop-card--archive-large .art-prop-card__title {
	flex: 1 1 auto;
	font-size: var( --art-text-lg, 1.125rem );
}

.art-prop-card--archive-large .art-prop-card__price {
	color: var( --art-color-text, inherit );
	flex-shrink: 0;
	font-size: var( --art-text-lg, 1.125rem );
	margin: 0;
	white-space: nowrap;
}

/* ── Footer row (rooms + wishlist) ─────────────────────────────────────────── */

.art-prop-card__footer {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-block-start: auto;
}

/* Rooms list */

.art-prop-card__rooms {
	align-items: center;
	color: var( --art-color-muted, #666 );
	display: flex;
	flex-wrap: wrap;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-prop-card__room {
	align-items: center;
	display: flex;
	gap: 0.25rem;
}

.art-prop-card__room-count {
}

.art-prop-card__room svg {
	flex-shrink: 0;
	height: 1.25rem;
	width: 1.25rem;
}

/* Large-card wishlist — inline in footer */

.art-prop-card--archive-large .art-prop-card__wishlist {
	align-items: center;
	background: none;
	border: none;
	color: var( --art-color-muted, #666 );
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0.25rem;
	transition: color 0.2s ease;
}

.art-prop-card--archive-large .art-prop-card__wishlist:hover,
.art-prop-card--archive-large .art-prop-card__wishlist:focus-visible,
.art-prop-card--archive-large .art-prop-card__wishlist[aria-pressed='true'] {
	color: var( --art-color-accent, currentColor );
}

.art-prop-card--archive-large .art-prop-card__wishlist:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Hover slider (desktop only) ───────────────────────────────────────────── */

/*
 * The Swiper is injected into .art-prop-card__media on first hover. Once
 * active the --slider-active modifier is added; image scale-on-hover is
 * suppressed so Swiper's own transitions take over.
 */

.art-prop-card__slider {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.art-prop-card__slider .swiper-slide {
	height: 100%;
	overflow: hidden;
}

.art-prop-card__slider .art-prop-card__image {
	height: 100%;
	object-fit: cover;
	transform: none !important;
	width: 100%;
}

/* Overlay the Swiper nav on top of badge / price overlay.
 *
 * These are real <button> elements (buildSwiper() in the JS, for native
 * keyboard/click semantics), so browser UA styles hand them a background,
 * border and padding by default - rendering as a solid button chrome behind
 * the chevron instead of Swiper's intended bare-arrow look. Reset that
 * chrome away here rather than switching to a non-interactive tag. */

/* Always white: the arrows sit on a photo, not the page, so the site's
   background colour (used before 1.7.75) disappeared on dark-themed sites.
   The shadow keeps them visible on pale photos, and hover/focus are pinned
   too so a theme's own button hover colours can't take over. */
.art-prop-card__slider .swiper-button-prev,
.art-prop-card__slider .swiper-button-next,
.art-prop-card__slider .swiper-button-prev:hover,
.art-prop-card__slider .swiper-button-next:hover,
.art-prop-card__slider .swiper-button-prev:focus,
.art-prop-card__slider .swiper-button-next:focus {
	--swiper-navigation-color: #ffffff;
	appearance: none;
	background: transparent;
	border: 0;
	color: #ffffff;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.5 ) );
	padding: 0;
	z-index: 3;
}

.art-prop-card__slider .swiper-button-prev::after,
.art-prop-card__slider .swiper-button-next::after {
	font-size: 1.125rem;
}

/* Blurred view-more slide
 *
 * The last gallery photo is placed as an <img> behind the overlay and
 * blurred directly. scale(1.08) prevents the blur from showing white edges.
 * The overlay darkens without backdrop-filter since the image is already blurred.
 */

.art-prop-card__slide--view-more {
	overflow: hidden;
	position: relative;
}

.art-prop-card__view-more-bg {
	display: block;
	filter: blur( 10px );
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transform: scale( 1.08 );
	width: 100%;
}

.art-prop-card__slide--view-more::before {
	background: rgba( 0, 0, 0, 0.45 );
	content: '';
	inset: 0;
	position: absolute;
	z-index: 1;
}

.art-prop-card__view-more-link {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 0.9375rem;
	inset: 0;
	justify-content: center;
	letter-spacing: 0.01em;
	min-height: 44px;
	min-width: 44px;
	position: absolute;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.5 );
	text-underline-offset: 3px;
	z-index: 2;
}

.art-prop-card__view-more-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCHIVE PROPERTY CARD — CLASSIC LAYOUT

   Three-column grid (same column counts as small). Image on top with a badge,
   then below: title, type in accent colour, price, summary, and a footer row
   of rooms + wishlist. The AJAX hover Swiper fires identically to small/large.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Classic grid — 1 / 2 / 3 columns matching the small grid breakpoints */

.art-prop-archive__grid--classic {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 1.5rem ) );
	grid-template-columns: 1fr;
}

@media ( min-width: 36em ) {
	.art-prop-archive__grid--classic {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 64em ) {
	.art-prop-archive__grid--classic {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Image aspect ratio */

.art-prop-card--archive-classic .art-prop-card__media {
	aspect-ratio: 4 / 3;
}

/* Type label in accent colour */

.art-prop-card--archive-classic .art-prop-card__type {
	color: var( --art-color-accent, #1a4a6b );
}

/* Standalone price block */

.art-prop-card--archive-classic .art-prop-card__price {
	color: var( --art-color-text, inherit );
	font-size: var( --art-text-xl, 1.375rem );
	margin: 0;
}

/* Wishlist — same style as large card footer wishlist */

.art-prop-card--archive-classic .art-prop-card__wishlist {
	align-items: center;
	background: none;
	border: none;
	color: var( --art-color-muted, #666 );
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0.25rem;
	transition: color 0.2s ease;
}

.art-prop-card--archive-classic .art-prop-card__wishlist:hover,
.art-prop-card--archive-classic .art-prop-card__wishlist:focus-visible,
.art-prop-card--archive-classic .art-prop-card__wishlist[aria-pressed='true'] {
	color: var( --art-color-accent, currentColor );
}

.art-prop-card--archive-classic .art-prop-card__wishlist:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCHIVE PROPERTY CARD — GALLERY LAYOUT
   ══════════════════════════════════════════════════════════════════════════════

   Desktop: full-width card with a two-thirds image panel (hero image left,
   up to 3 thumbnails stacked right) and a one-third content panel.

   Mobile: the image panel becomes a horizontal scroll strip (scroll-snap).
   When the property has more than 4 photos a 5th "view all" cell is shown
   after the last thumbnail and acts as a click-through to the single property
   page. The view-all cell is hidden on desktop because the content panel's
   "More Details" CTA already provides that link.

   Fewer-than-4-images handling:
     - 1 image:  hero only, no thumbs. Hero fills entire image panel.
     - 2 images: hero + 1 thumb. Grid fills remaining rows with nothing.
     - 3 images: hero + 2 thumbs.
     - 4 images: hero + 3 thumbs, no view-all cell.
   In all cases `grid-row: 1 / -1` on the hero makes it span whatever height
   the thumbs produce, so there are never empty visual slots.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Gallery archive grid - single column (cards are full-width) */

.art-prop-archive__grid--gallery {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 1.5rem ) );
	grid-template-columns: 1fr;
}

/* Gallery card — flex column on mobile, flex row on desktop */

.art-prop-card--archive-gallery {
	background: var( --art-color-surface, #fff );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media ( min-width: 48em ) {
	.art-prop-card--archive-gallery {
		flex-direction: row;
		min-height: 300px;
	}
}

/* ── Gallery image panel ────────────────────────────────────────────────────── */

/* Mobile default: horizontal scroll strip */

.art-prop-card--archive-gallery .art-prop-card__gallery {
	aspect-ratio: 16 / 9;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.art-prop-card--archive-gallery .art-prop-card__gallery::-webkit-scrollbar {
	display: none;
}

/* Desktop: CSS grid — hero left, thumbs stacked right */

@media ( min-width: 48em ) {
	.art-prop-card--archive-gallery .art-prop-card__gallery {
		aspect-ratio: unset;
		display: grid;
		flex: 0 0 66%;
		grid-template-columns: 2fr 1fr;
		overflow: hidden;
		scroll-snap-type: none;
		width: 66%;
	}
}

/* Image cells */

.art-prop-card__gallery-cell {
	display: block;
	flex: 0 0 85%; /* peek at next slide on mobile */
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
	text-decoration: none;
}

.art-prop-card__gallery-cell img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	width: 100%;
}

@media ( hover: hover ) {
	.art-prop-card__gallery-cell:hover img {
		transform: scale( 1.04 );
	}
}

@media ( min-width: 48em ) {
	.art-prop-card__gallery-cell {
		flex: none;
		min-width: 0;
		scroll-snap-align: none;
	}

	/* Hero spans all available rows regardless of thumb count */
	.art-prop-card__gallery-cell--hero {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	/* Thumbs auto-placed in column 2, one per row */
	.art-prop-card__gallery-cell--thumb {
		grid-column: 2;
	}

	/* View-all cell hidden on desktop; "More Details" CTA serves the same purpose */
	.art-prop-card__gallery-cell--more {
		display: none;
	}
}

/* View-all cell (mobile only) */

.art-prop-card__gallery-cell--more {
	align-items: center;
	background: var( --art-color-text, #1a1a1a );
	display: flex;
	flex: 0 0 75%;
	justify-content: center;
}

.art-prop-card__gallery-more-label {
	color: var( --art-color-bg, #fff );
	font-size: 0.9375rem;
	padding: 1rem;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.5 );
	text-underline-offset: 3px;
}

/* ── Gallery content panel ──────────────────────────────────────────────────── */

.art-prop-card--archive-gallery .art-prop-card__body {
	background: var( --art-color-surface, #fff );
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 3rem 1.5rem 1.5rem;
	position: relative;
}

/* Wishlist — absolute top-right of content panel, WCAG 44px touch target */

.art-prop-card--archive-gallery .art-prop-card__wishlist {
	align-items: center;
	background: none;
	border: none;
	color: var( --art-color-muted, #666 );
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	transition: color 0.2s ease;
}

.art-prop-card--archive-gallery .art-prop-card__wishlist:hover,
.art-prop-card--archive-gallery .art-prop-card__wishlist:focus-visible,
.art-prop-card--archive-gallery .art-prop-card__wishlist[aria-pressed='true'] {
	color: var( --art-color-accent, currentColor );
}

.art-prop-card--archive-gallery .art-prop-card__wishlist:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* Title */

.art-prop-card--archive-gallery .art-prop-card__title {
	font-size: var( --art-text-lg, 1.125rem );
	margin: 0;
}

/* Price */

.art-prop-card--archive-gallery .art-prop-card__price {
	font-size: 1.5rem;
	margin: 0;
}

/* Rooms — push to fill available space then CTA at bottom */

.art-prop-card--archive-gallery .art-prop-card__rooms {
	margin-block-start: auto;
}

/* CTA button */

.art-prop-card__cta {
	align-self: flex-start;
	background: var( --art-color-accent, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
	display: inline-block;
	font-size: var( --art-text-sm, 0.8125rem );
	letter-spacing: 0.08em;
	margin-block-start: 1rem;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.art-prop-card__cta:hover {
	opacity: 0.85;
}

.art-prop-card__cta:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Property search form ───────────────────────────────────────────────────── */

/* The slot wrapper is always in the HTML from the server response and reserves
   the form's height before CSS variables and fonts resolve, preventing CLS. */
.art-prop-archive__search-slot {
	margin-block-end: var( --art-spacing, 1.5rem );
	min-height: 2.75rem; /* matches control row height */
}

/* Belt-and-suspenders: reserve height on the form itself too. */
.art-prop-search--inline {
	min-height: 2.75rem;
}

/* ── Department tabs (tabs, top bar, labeled bar and compact styles) ─────────── */

/*
 * tabs/topbar/labeled/modal render .art-prop-search__dept-tab as a plain
 * <a> (real navigation to the archive, filtered by department). compact
 * renders it as a <label> wrapping a visually-hidden <input type="radio"
 * name="department"> instead (see property-search-compact.php) - a native
 * in-page selector, no JS required. Both share this base look; the rules
 * below that reference the radio are no-ops on the <a>-based styles since
 * they simply won't match anything there.
 */

.art-prop-search__dept-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-block-end: 0.75rem;
}

.art-prop-search__dept-tab {
	align-items: center;
	border: 1px solid var( --art-color-border, #d1d5db );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	justify-content: center;
	min-width: 8rem;
	padding-inline: 1.5rem;
	position: relative;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__dept-tab:not( :first-child ) {
	border-inline-start: 0;
}

.art-prop-search__dept-tab:first-child {
	border-end-start-radius: var( --art-radius, 0 );
	border-start-start-radius: var( --art-radius, 0 );
}

.art-prop-search__dept-tab:last-child {
	border-end-end-radius: var( --art-radius, 0 );
	border-start-end-radius: var( --art-radius, 0 );
}

/* .is-active is the compact style's server-rendered initial state (matches
   whichever department the page loaded with); :has(...:checked) is what
   keeps it correct after a visitor picks a different radio, since clicking
   one doesn't move a class - only the native checked state changes. */
.art-prop-search__dept-tab.is-active,
.art-prop-search__dept-tab:has( input[type='radio']:checked ) {
	background-color: var( --art-color-dept-active, #1a4a6b );
	border-color: var( --art-color-dept-active, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
}

.art-prop-search__dept-tab:focus-visible,
.art-prop-search__dept-tab:has( input[type='radio']:focus-visible ) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* compact style only - visually hidden but still focusable/keyboard-
   operable; the <label> carries the visual tab appearance above. */
.art-prop-search__dept-tab input[type='radio'] {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

/* Inline bar: single horizontal flex row */

.art-prop-search--inline .art-prop-search__form {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.art-prop-search--inline .art-prop-search__field {
	flex: 1 1 auto;
	min-width: 8rem;
}

/* PH renders a <label> inside the field wrapper when a field's search form has
   Show Label explicitly checked - see show_label_override in
   property-search-inline.php / property-search-tabs.php. Styled to match
   .art-prop-search__labeled-field's own label. */
.art-prop-search--inline .art-prop-search__field > label {
	color: var( --art-color-text, #1a1a1a );
	display: block;
	font-size: var( --art-text-sm, 0.875rem );
	margin-bottom: 0.25rem;
}

.art-prop-search--inline .art-prop-search__field--submit {
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
}

/* Select and input controls */

.art-prop-search--inline .art-prop-search__control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.625em;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem; /* 44 px minimum touch target */
	padding-inline: 0.875rem 2.25rem;
	width: 100%;
}

.art-prop-search--inline input.art-prop-search__control {
	background-image: none;
	padding-inline-end: 0.875rem;
}

.art-prop-search--inline .art-prop-search__control:focus {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 1px;
}

/* Submit button */

.art-prop-search--inline .art-prop-search__submit {
	background: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	letter-spacing: 0.05em;
	min-width: 7rem;
	padding-inline: 1.75rem;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
	white-space: nowrap;
	width: 100%;
}

.art-prop-search--inline .art-prop-search__submit:hover {
	opacity: 0.85;
}

.art-prop-search--inline .art-prop-search__submit:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Mobile: 2-up layout with full-width submit */

@media ( max-width: 47.9375em ) {
	.art-prop-search--inline .art-prop-search__field {
		flex: 1 1 calc( 50% - 0.25rem );
	}

	.art-prop-search--inline .art-prop-search__field--submit {
		flex: 1 1 100%;
	}
}

/* ── Search form: compact style ────────────────────────────────────────────────
 * Same field set/markup as --inline (every configured field, in order) - only
 * the sizing differs, tightened up for embedding somewhere space-constrained
 * (e.g. overlaid on a Hero). Never drop fields here; that's what the actual
 * "tabs"/"inline" styles are for otherwise - see property-search-compact.php.
 */

.art-prop-search--compact .art-prop-search__dept-tab {
	height: 2.25rem;
	min-width: 6rem;
	padding-inline: 1rem;
}

.art-prop-search--compact .art-prop-search__form {
	gap: 0.375rem;
}

.art-prop-search--compact .art-prop-search__field {
	min-width: 7rem;
}

/* Every other search style (--inline, the Filters panel, dept-select,
   --minimal) resets appearance and supplies its own chevron background-
   image - this one never did, despite already reserving the same 2rem of
   end-padding for one (see the input override just below, which exists
   specifically to give that reserved space back to non-select fields).
   Left as the browser's native <select> rendering, which on mobile draws
   its own dropdown indicator at native size/position rather than respecting
   that reserved padding - large and inconsistently placed compared to
   every other field. Same SVG chevron as --inline for visual consistency
   across styles. */
.art-prop-search--compact .art-prop-search__control {
	-webkit-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.625em;
	height: 2.25rem;
	padding-inline: 0.75rem 2rem;
}

.art-prop-search--compact input.art-prop-search__control {
	background-image: none;
	padding-inline-end: 0.75rem;
}

.art-prop-search--compact .art-prop-search__submit {
	height: 2.25rem;
	min-width: 5.5rem;
	padding-inline: 1.25rem;
}

/* ── Search form: tabs style ──────────────────────────────────────────────── */

/*
 * The bar row reuses Top Bar's .art-prop-search__bar* classes (bare
 * selectors, not scoped to a style) for the bordered location+submit box.
 * .art-prop-search__bar-row wraps just that box now (the availability
 * toggle used to sit alongside it here, pushed out to its own
 * .art-prop-search__filters-row below instead, next to the Filters
 * trigger) - kept as its own wrapper regardless since a future field could
 * still join the bar without one.
 */

.art-prop-search__bar-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.art-prop-search__bar-row .art-prop-search__bar {
	flex: 1 1 20rem;
}

/* Filters trigger + availability toggle share a row below the bar, the
 * toggle pushed to the far right so it lines up under the bar's Search
 * button - both are optional (either can be absent depending on Filter
 * Style/whether there's an availability taxonomy), so this stays a plain
 * flex row rather than a fixed two-child layout. */
.art-prop-search__filters-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

.art-prop-search__field--toggle {
	align-items: center;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.4rem;
	margin-left: auto;
	white-space: nowrap;
}

/* ── Filters: default style (plain link + slide panel) ───────────────────────
 *
 * The overflow fields not placed in the bar, revealed by a plain-text link
 * rather than a button (see render_filters_trigger()/render_default_filters_panel()
 * in class-art-division-property-modules-search.php). The panel animates
 * open/closed via a CSS grid-rows transition - no JS height measurement
 * needed, see initDefaultFilterPanel() in the frontend JS.
 * ────────────────────────────────────────────────────────────────────────── */

.art-prop-search__filters-link {
	background: none;
	border: none;
	color: var( --art-color-accent, #1a4a6b );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	margin-block-start: 0.75rem;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.art-prop-search__filters-link:hover {
	text-decoration-thickness: 2px;
}

.art-prop-search__filters-link:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

.art-prop-search__filters-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.art-prop-search__filters-panel.is-open {
	grid-template-rows: 1fr;
}

/* display: grid above has the same specificity as the UA [hidden] rule and
   loads after it, so it would silently win and defeat the server-rendered
   `hidden` attribute without this override. */
.art-prop-search__filters-panel[hidden] {
	display: none;
}

.art-prop-search__filters-panel-body {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-height: 0;
	overflow: hidden;
	padding-block-start: 0.75rem;
}

.art-prop-search__filters-field {
	flex: 1 1 10rem;
	min-width: 0;
}

.art-prop-search__filters-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.625em;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 0.875rem 2.25rem;
	width: 100%;
}

.art-prop-search__filters-panel input.art-prop-search__filters-control {
	background-image: none;
	padding-inline-end: 0.875rem;
}

.art-prop-search__filters-control:focus {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 1px;
}

.art-prop-search__filters-field label {
	color: var( --art-color-text, #1a1a1a );
	display: block;
	font-size: var( --art-text-sm, 0.875rem );
	margin-bottom: 0.25rem;
}

/* ── Search form: top bar style ────────────────────────────────────────────── */

.art-prop-search--topbar .art-prop-search__topbar-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
 * The classes below (.art-prop-search__bar*, __panel*, __drawer*) are bare
 * selectors, not scoped to .art-prop-search--topbar - the Tabs style reuses
 * the bar classes for its own bar row, and the drawer classes render for any
 * style whenever the 'slide_in' Filter Style is active (Property Settings →
 * Search Form → Filters), independent of Search Form Style.
 */

/* The horizontal bar row */
.art-prop-search__bar {
	align-items: stretch;
	border: 2px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
}

/* Dividers between bar segments */
.art-prop-search__bar > * + * {
	border-inline-start: 1px solid var( --art-color-border, #d1d5db );
}

/* Location input group */
.art-prop-search__bar-location {
	align-items: center;
	display: flex;
	flex: 1 1 14rem;
	gap: 0.25rem;
	min-width: 0;
	padding-inline: 0.75rem;
}

.art-prop-search__bar-search-icon {
	color: var( --art-color-muted, #6b7280 );
	flex-shrink: 0;
	line-height: 0;
}

.art-prop-search__bar-input {
	background: transparent;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	flex: 1 1 auto;
	font-size: var( --art-text-sm, 0.875rem );
	min-width: 0;
	outline: none;
	padding-block: 0.75rem;
}

.art-prop-search__bar-input::placeholder {
	color: var( --art-color-muted, #6b7280 );
}

.art-prop-search__bar-clear {
	background: none;
	border: none;
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-muted, #6b7280 );
	cursor: pointer;
	flex-shrink: 0;
	height: 1.5rem;
	line-height: 0;
	padding: 0;
	transition: color 0.15s ease;
	width: 1.5rem;
}

.art-prop-search__bar-clear:hover {
	color: var( --art-color-text, #1a1a1a );
}

/* Bar buttons (property type trigger + filters) */
.art-prop-search__bar-btn {
	align-items: center;
	background: none;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.4rem;
	min-height: 2.75rem;
	padding-inline: 1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__bar-btn:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__bar-btn:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: -2px;
}

.art-prop-search__bar-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.art-prop-search__bar-btn[aria-expanded="true"] .art-prop-search__bar-chevron {
	transform: rotate( 180deg );
}

/* Submit button */
.art-prop-search__bar-submit {
	align-items: center;
	background-color: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: 0 calc( var( --art-radius, 0 ) - 1px ) calc( var( --art-radius, 0 ) - 1px ) 0;
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.4rem;
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__bar-submit:hover {
	opacity: 0.85;
}

.art-prop-search__bar-submit:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Property type panel */
.art-prop-search__bar-panel-wrap {
	position: relative;
}

.art-prop-search__panel {
	background: var( --art-color-bg, #fff );
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
	left: 0;
	min-width: 13rem;
	padding: 0.75rem;
	position: absolute;
	top: calc( 100% + 0.375rem );
	z-index: 200;
}

.art-prop-search__panel[hidden] {
	display: none;
}

.art-prop-search__panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.art-prop-search__panel-list li {
	margin: 0;
}

.art-prop-search__panel-option {
	align-items: center;
	border-radius: calc( var( --art-radius, 0 ) / 2 );
	cursor: pointer;
	display: flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	transition: background-color 0.1s ease;
}

.art-prop-search__panel-option:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__panel-radio {
	accent-color: var( --art-color-accent, #1a4a6b );
	cursor: pointer;
	flex-shrink: 0;
}

/* Extra bar fields (admin-assigned via Search Field Placement) */
.art-prop-search__bar-extra {
	align-items: center;
	display: flex;
	min-width: 0;
	padding-inline: 0.75rem;
}

.art-prop-search__bar-extra-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-position: right 0 center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	min-height: 2.75rem;
	padding-inline: 0 1.25rem;
}

.art-prop-search__bar-extra-control:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: -2px;
}

/* Filters side drawer */
.art-prop-search__drawer {
	background: var( --art-color-bg, #fff );
	border-inline-start: 1px solid var( --art-color-border, #d1d5db );
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-width: 28rem;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX( 100% );
	transition: transform 0.25s ease, visibility 0.25s;
	visibility: hidden;
	width: 100%;
	z-index: 1000;
}

.art-prop-search__drawer.is-open {
	transform: translateX( 0 );
	visibility: visible;
}

/* display: flex above has the same specificity as the UA [hidden] rule and
   loads after it, so it would silently win and defeat the server-rendered
   `hidden` attribute without this override. */
.art-prop-search__drawer[hidden] {
	display: none;
}

.art-prop-search__drawer-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.art-prop-search__drawer-header {
	align-items: center;
	border-block-end: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.art-prop-search__drawer-title {
	font-size: 1rem;
	margin: 0;
}

.art-prop-search__drawer-close {
	background: none;
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	line-height: 0;
	padding: 0.375rem;
	transition: background-color 0.15s ease;
}

.art-prop-search__drawer-close:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__drawer-close:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

.art-prop-search__drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.5rem;
}

/* Drawer field rows (labels visible) */
.art-prop-search__drawer-field {
	margin-block-end: 1.25rem;
}

.art-prop-search__drawer-field label {
	color: var( --art-color-text, #1a1a1a );
	display: block;
	font-size: var( --art-text-sm, 0.875rem );
	margin-block-end: 0.375rem;
}

.art-prop-search__drawer-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-position: right 0.625rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 0.75rem 2rem;
	width: 100%;
}

.art-prop-search__drawer-control:focus {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 0;
}

.art-prop-search__drawer-footer {
	align-items: center;
	border-block-start: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.art-prop-search__drawer-clear {
	color: var( --art-color-muted, #6b7280 );
	font-size: var( --art-text-sm, 0.875rem );
	text-decoration: underline;
	transition: color 0.15s ease;
}

.art-prop-search__drawer-clear:hover {
	color: var( --art-color-text, #1a1a1a );
}

.art-prop-search__drawer-submit {
	background-color: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	min-height: 2.75rem;
	padding-inline: 1.5rem;
	transition: opacity 0.15s ease;
}

.art-prop-search__drawer-submit:hover {
	opacity: 0.85;
}

.art-prop-search__drawer-submit:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Dark overlay behind the drawer */
.art-prop-search__overlay {
	background: rgba( 0, 0, 0, 0.45 );
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 0.25s ease, visibility 0.25s;
	visibility: hidden;
	z-index: 999;
}

.art-prop-search__overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* Mobile: stack bar controls. Excludes "collapsing" (it keeps a single
   location + Filters row - see its own section below) and "minimal" (:not(.art-prop-search--minimal)
   on the shared ancestor, which carries both classes together - see
   property-search-minimal.php) - that style is meant to keep reading as
   the same compact single-row pill on mobile as on desktop, just full
   width, not stack into a tall column like topbar/tabs/labeled do. See
   .art-prop-search--minimal's own mobile rules further down for its
   equivalent (row-preserving) treatment. */
@media ( max-width: 47.9375em ) {
	.art-prop-search:not( .art-prop-search--minimal ):not( .art-prop-search--collapsing ) .art-prop-search__bar-location {
		flex: 1 1 100%;
		border-block-end: 1px solid var( --art-color-border, #d1d5db );
		border-inline-start: none;
	}

	.art-prop-search:not( .art-prop-search--minimal ):not( .art-prop-search--collapsing ) .art-prop-search__bar > * + * {
		border-inline-start: none;
	}

	.art-prop-search:not( .art-prop-search--minimal ):not( .art-prop-search--collapsing ) .art-prop-search__bar {
		flex-direction: column;
	}

	.art-prop-search:not( .art-prop-search--minimal ):not( .art-prop-search--collapsing ) .art-prop-search__bar > *:not( .art-prop-search__bar-location ) {
		border-block-start: 1px solid var( --art-color-border, #d1d5db );
	}

	.art-prop-search:not( .art-prop-search--minimal ):not( .art-prop-search--collapsing ) .art-prop-search__bar-submit {
		border-radius: 0 0 calc( var( --art-radius, 0 ) - 1px ) calc( var( --art-radius, 0 ) - 1px );
		justify-content: center;
		width: 100%;
	}
}

/* ── Filters: dropdown style ───────────────────────────────────────────────── */

/*
 * The 'dropdown' Filter Style (always used by Collapsing Bar, selectable for
 * the other bar styles too): a panel that drops down under the bar, right
 * aligned, on desktop, and goes full screen at 767px and below. Same markup
 * either way - see render_dropdown_filters_panel() and initDropdownFilters().
 */
.art-prop-search[data-filter-style="dropdown"] {
	position: relative;
}

.art-prop-search__dropdown {
	background: var( --art-color-bg, #fff );
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	color: var( --art-color-text, #1a1a1a );
	display: flex;
	flex-direction: column;
	max-height: min( 75vh, 44rem );
	position: absolute;
	right: 0;
	text-align: start;
	top: calc( 100% + 0.375rem );
	width: min( 40rem, 100% );
	z-index: 200;
}

/* display: flex above beats the UA [hidden] rule (author origin wins). */
.art-prop-search__dropdown[hidden] {
	display: none;
}

/* Desktop has no header - the bar's Filters button closes it. */
.art-prop-search__dropdown-header {
	display: none;
}

.art-prop-search__dropdown-title {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0;
}

.art-prop-search__dropdown-close {
	align-items: center;
	background: none;
	border: none;
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	width: 2.75rem;
}

.art-prop-search__dropdown-close:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__dropdown-close:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

.art-prop-search__dropdown-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem;
}

.art-prop-search__dropdown-fields {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.art-prop-search__dropdown-field[hidden] {
	display: none;
}

.art-prop-search__dropdown-field label {
	display: block;
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: 600;
	margin-block-end: 0.375rem;
}

/* Selects/inputs in the panel, including the bar fields Collapsing Bar moves
   in on smaller screens. */
.art-prop-search__dropdown-control,
.art-prop-search__dropdown .art-prop-search__bar-extra-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 0.75rem 2rem;
	width: 100%;
}

input.art-prop-search__dropdown-control {
	background-image: none;
	cursor: text;
	padding-inline-end: 0.75rem;
}

.art-prop-search__dropdown-control:focus-visible,
.art-prop-search__dropdown .art-prop-search__bar-extra-control:focus-visible {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 0;
}

.art-prop-search__dropdown-availability .art-prop-search__field--toggle {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: 600;
}

.art-prop-search__dropdown-availability input {
	accent-color: var( --art-color-accent, #1a4a6b );
	height: 1.125rem;
	width: 1.125rem;
}

.art-prop-search__dropdown-footer {
	align-items: center;
	border-block-start: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
	justify-content: space-between;
	padding: 1rem 1.25rem;
}

.art-prop-search__dropdown-clear {
	color: var( --art-color-text, #1a1a1a );
	font-size: var( --art-text-sm, 0.875rem );
	text-decoration: underline;
}

.art-prop-search__dropdown-submit {
	background-color: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: 600;
	min-height: 2.75rem;
	padding-inline: 1.5rem;
	transition: opacity 0.15s ease;
}

.art-prop-search__dropdown-submit:hover,
.art-prop-search__dropdown-submit:focus-visible {
	opacity: 0.85;
}

.art-prop-search__dropdown-submit:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Filters button: chevron on desktop, sliders icon on mobile. */
.art-prop-search__bar-btn--dropdown .art-prop-search__bar-btn-icon {
	display: none;
}

/* Field groups (Collapsing Bar). Empty and hidden on desktop;
   initCollapsingBar() fills and reveals them on smaller screens. */
.art-prop-search__collapse-groups {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.art-prop-search__collapse-groups:not( :has( > :not( [hidden] ) ) ) {
	display: none;
}

.art-prop-search__collapse-group {
	border: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.art-prop-search__collapse-group[hidden] {
	display: none;
}

/* Every field in the group hidden by the department (e.g. price for
   Commercial) - drop the heading too. */
.art-prop-search__collapse-group[data-art-collapse-group-target]:not( :has( [data-art-collapse-item]:not( [hidden] ) ) ) {
	display: none;
}

.art-prop-search__collapse-group-title {
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: 600;
	margin: 0 0 0.5rem;
	padding: 0;
}

.art-prop-search__collapse-group-fields {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.art-prop-search__collapse-group--type .art-prop-search__collapse-group-fields {
	grid-template-columns: minmax( 0, 1fr );
}

.art-prop-search__collapse-group .art-prop-search__bar-extra {
	border: none;
	padding: 0;
}

.art-prop-search__collapse-group .art-prop-search__bar-extra[hidden] {
	display: none;
}

.art-prop-search__type-checks {
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.art-prop-search__type-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.5rem;
	min-height: 2rem;
}

.art-prop-search__type-check input {
	accent-color: var( --art-color-accent, #1a4a6b );
	flex-shrink: 0;
	height: 1.125rem;
	margin: 0;
	width: 1.125rem;
}

/* ── Search form: Collapsing Bar style ─────────────────────────────────────── */

/*
 * One row on desktop: location, department, price and bedroom selects,
 * Filters, Search. At 1023px and below the bar fields move into the Filters
 * panel (initCollapsingBar()), leaving location + Filters + Search; at 767px
 * and below the panel goes full screen.
 */
.art-prop-search--collapsing .art-prop-search__topbar-form {
	display: flex;
	flex-direction: column;
}

.art-prop-search--collapsing .art-prop-search__bar {
	background: var( --art-color-bg, #fff );
	flex-wrap: nowrap;
}

.art-prop-search--collapsing .art-prop-search__bar-location {
	flex: 1 1 12rem;
}

.art-prop-search--collapsing .art-prop-search__collapse-slot {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
}

.art-prop-search--collapsing .art-prop-search__collapse-slot > * + * {
	border-inline-start: 1px solid var( --art-color-border, #d1d5db );
}

.art-prop-search--collapsing .art-prop-search__bar-extra[hidden] {
	display: none;
}

/* Padding on the select rather than its wrapper, so the focus outline
   (drawn round the select) doesn't sit tight against the text. */
.art-prop-search--collapsing .art-prop-search__bar .art-prop-search__bar-extra {
	padding-inline: 0;
}

.art-prop-search--collapsing .art-prop-search__bar .art-prop-search__bar-extra-control {
	background-position: right 0.75rem center;
	max-width: 11.5rem;
	padding-inline: 0.75rem 2rem;
}

.art-prop-search--no-desktop-filters .art-prop-search__bar-btn--dropdown {
	display: none;
}

/* Desktop uses the department tabs above the bar; the bar's department
   select stays in the DOM (it's the submitted field) but hidden until it
   moves into the Filters panel on smaller screens. */
.art-prop-search--collapsing .art-prop-search__bar > .art-prop-search__bar-extra--department {
	display: none;
}

@media ( max-width: 63.9375em ) {
	/* JS has moved the fields out; hiding the slot drops its divider too. */
	.art-prop-search--collapsing .art-prop-search__collapse-slot {
		display: none;
	}

	.art-prop-search--collapsing .art-prop-search__dept-tabs {
		display: none;
	}

	.art-prop-search--no-desktop-filters .art-prop-search__bar-btn--dropdown {
		display: inline-flex;
	}
}

@media ( max-width: 47.9375em ) {
	.art-prop-search--collapsing .art-prop-search__bar-location {
		flex-basis: 0;
		padding-inline: 0.625rem;
	}

	.art-prop-search--collapsing .art-prop-search__bar-btn--dropdown {
		padding-inline: 0.75rem;
	}

	/* Icon-only on phones; the label stays as the accessible name. */
	.art-prop-search--collapsing .art-prop-search__bar-submit {
		padding-inline: 0.875rem;
	}

	.art-prop-search--collapsing .art-prop-search__bar-submit-label {
		clip: rect( 0, 0, 0, 0 );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.art-prop-search__bar-btn--dropdown .art-prop-search__bar-btn-icon {
		display: block;
	}

	.art-prop-search__bar-btn--dropdown .art-prop-search__bar-chevron {
		display: none;
	}

	/* Full-screen panel. */
	.art-prop-search__dropdown {
		border: none;
		border-radius: 0;
		box-shadow: none;
		inset: 0;
		max-height: none;
		position: fixed;
		width: 100%;
		/* Above chat/cookie widgets, which sit near the 32-bit max. */
		z-index: 2147483600;
	}

	.art-prop-search__dropdown-header {
		align-items: center;
		border-block-end: 1px solid var( --art-color-border, #d1d5db );
		display: flex;
		flex-shrink: 0;
		justify-content: space-between;
		padding: 0.5rem 0.75rem 0.5rem 1.25rem;
	}

	.art-prop-search__dropdown-fields {
		grid-template-columns: minmax( 0, 1fr );
	}

	.art-prop-search__dropdown-footer {
		padding-block-end: calc( 1rem + env( safe-area-inset-bottom, 0px ) );
	}

	.art-prop-search__dropdown-clear,
	.art-prop-search__dropdown-submit {
		align-items: center;
		display: inline-flex;
		flex: 1 1 0;
		justify-content: center;
		min-height: 2.75rem;
	}

	.art-prop-search__dropdown-clear {
		border: 1px solid var( --art-color-border, #d1d5db );
		border-radius: var( --art-radius, 0 );
		text-decoration: none;
	}

	html.art-prop-search-dropdown-open,
	html.art-prop-search-dropdown-open body {
		overflow: hidden;
	}
}

/* ── Search form: minimal style ────────────────────────────────────────────── */

/*
 * Reuses the top-bar style's .art-prop-search__bar shell (border, radius,
 * divider-between-segments) - only the segments inside differ: department
 * is a plain, borderless native <select> instead of tab_labels' badge
 * treatment elsewhere, no search icon in the location field, and the
 * submit button's corner radius is a full pill cap instead of the top
 * bar's slight corner-matching one.
 */

/*
 * Every rule below is scoped under .art-prop-search--minimal, not bare
 * class selectors, matching the convention every other style section in
 * this file already uses (e.g. .art-prop-search--compact .art-prop-search__
 * dept-tab) - but confirmed live that raising specificity alone still
 * wasn't enough here (department links still rendered in the theme's own
 * link colour, location placeholder still invisible, even after rescoping
 * in 1.5.52). Whatever the site's theme is contesting these two specific
 * properties (dept-link colour, input/placeholder colour) with must be
 * doing so at a specificity or origin this can't out-rank through
 * selector weight alone, so those declarations carry !important - narrowly,
 * only where confirmed necessary, not on the whole rule block.
 */

.art-prop-search--minimal .art-prop-search__bar {
	/* A literal pixel value, not var(--art-radius-round, ...) - that token
	   is used elsewhere in this file for genuinely circular elements
	   (avatars, icon buttons) and, on this site, resolves to a *percentage*
	   (confirmed live: still a stretched-oval/pointed shape on this bar
	   after every other fix). border-radius as a % computes independently
	   per axis, giving an ellipse on any box whose width and height
	   differ - exactly this bar. A % of a pill-shaped bar is fine for a
	   near-square element but wrong here; only a plain pixel value clamps
	   correctly (browsers cap an over-large px radius to half the box's
	   own smaller dimension) into an actual stadium/pill shape regardless
	   of the box's aspect ratio.
	*/
	border-radius: 999px;
	/* .art-prop-search__bar is a bare block-level flex row with no width of
	   its own - without this it stretches to fill whatever wide container
	   it's embedded in (e.g. a Hero's search wrapper), leaving a large
	   visually-empty bordered gap after the (currently sparse) content
	   instead of a compact pill. */
	width: fit-content;
	/* Clips the submit button to this box's own rounded corner instead of
	   giving the button a second, independent border-radius - two separate
	   999px radii (this bar's, sized off the whole pill; the button's,
	   sized off just the button) clamp to *different* effective pixel
	   values since CSS clamps an over-large radius to the element's own
	   height, so the two curves never actually lined up - confirmed live
	   as a pointed/flag-shaped seam where they diverged. One clipped shape
	   can't disagree with itself. */
	overflow: hidden;
}

.art-prop-search--minimal .art-prop-search__bar-depts {
	align-items: center;
	display: flex;
	padding-inline-start: 1.25rem;
	position: relative;
}

/*
 * The arrow is a ::after on the wrapper, not a background-image on the
 * <select> itself - `currentColor`/any CSS colour baked into an SVG only
 * resolves against *that SVG's own* colour scope when it's loaded as a
 * referenced resource (background-image url(), <img>), not against the
 * host element's `color`; it rendered flat black regardless of accent
 * colour (confirmed live). A CSS mask, by contrast, only uses the SVG for
 * its alpha shape - the actual colour comes from this rule's own
 * background-color, which is a normal CSS value and inherits/vars
 * correctly. pointer-events:none lets clicks fall through to the <select>
 * beneath it.
 */
.art-prop-search--minimal .art-prop-search__bar-depts::after {
	background-color: var( --art-color-accent, #1a4a6b );
	content: '';
	height: 6px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	position: absolute;
	right: 0.375rem;
	top: 50%;
	transform: translateY( -50% );
	width: 10px;
}

/*
 * appearance:none only to drop the browser's own default arrow (replaced
 * by the accent-coloured ::after above) - it's still a real native
 * <select> underneath, so click, keyboard and mobile picker behaviour are
 * untouched. Only colour/font/border/arrow are reset.
 */
.art-prop-search--minimal .art-prop-search__bar-dept-select {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	color: var( --art-color-accent, #1a4a6b ) !important;
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: 600;
	padding-block: 0.75rem;
	padding-inline-end: 1.125rem;
}

.art-prop-search--minimal .art-prop-search__bar-dept-select:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

.art-prop-search--minimal .art-prop-search__bar-location--minimal {
	padding-inline-start: 1.25rem;
	/* Counteracts the base .art-prop-search__bar-location rule's
	   flex:1 1 14rem - that basis assumes a bar that fills its container;
	   here the bar itself is fit-content (see .art-prop-search--minimal
	   .art-prop-search__bar above), so let this size to whatever text is
	   actually typed/placeholder-sized instead of forcing a fixed 14rem
	   reservation that would fight the bar's own fit-content width. */
	flex: 0 1 auto;
	min-width: 8rem;
}

/* On mobile the bar's own width: fit-content (above) sizes the whole bar
   off this input's content/placeholder width, which routinely exceeds the
   viewport - .art-pm-hero is overflow:hidden, so the overrun clips
   silently instead of showing a scrollbar. Neither this rule nor the bar
   itself had a mobile override anywhere (Property Modules, Page Modules,
   or the Oakmans child theme), so this size just stayed computed for
   desktop at every width. Bar goes to a true 100% here, and the input
   grows to fill it - min-width:0 is required, not decorative, since a
   flex item's default min-width:auto floors it at its content size and
   blocks it from ever shrinking below the placeholder's own width.
   flex-direction stays row (the base rule's default, untouched here) -
   deliberately excluded from the generic mobile block above, which would
   otherwise stack it into a tall column like topbar/tabs/labeled do; this
   style keeps reading as the same single-row pill as desktop, just full
   width. Because it stays a wide row rather than becoming a tall column,
   the base rule's 999px border-radius (further up, .art-prop-search--minimal
   .art-prop-search__bar) still clamps to the correct stadium shape here and
   needs no override. */
@media ( max-width: 47.9375em ) {
	/* nowrap: the base .art-prop-search__bar rule's flex-wrap:wrap let the
	   location field (flex-basis auto = the input's ~20ch intrinsic width)
	   drop onto a second line below the department select on narrow
	   phones, doubling the bar's height and pushing the Hero's address
	   and phone lines past its overflow:hidden bottom edge. */
	.art-prop-search--minimal .art-prop-search__bar {
		flex-wrap: nowrap;
		width: 100%;
	}

	.art-prop-search--minimal .art-prop-search__bar-depts {
		flex-shrink: 0;
	}

	.art-prop-search--minimal .art-prop-search__bar-location--minimal {
		flex: 1 1 0;
		min-width: 0;
		padding-inline-start: 0.75rem;
	}

	.art-prop-search--minimal .art-prop-search__bar-input {
		width: 100%;
	}
}

/*
 * Hardcoded light values, not var(--art-color-text)/var(--art-color-muted) -
 * see the matching inline <style> in property-search-minimal.php (which
 * actually wins via ID-selector specificity) for why: this style always
 * sits on a dark Hero/photo backdrop, but those are general sitewide
 * tokens tuned for wherever else on a site has a light background.
 */
.art-prop-search--minimal .art-prop-search__bar-input {
	color: #ffffff !important;
}

.art-prop-search--minimal .art-prop-search__bar-input::placeholder {
	color: rgba( 255, 255, 255, 0.65 ) !important;
	opacity: 1 !important;
}

/*
 * No border-radius override needed here - .art-prop-search--minimal
 * .art-prop-search__bar's own overflow:hidden clips this button to the
 * bar's single pill shape regardless of whatever corner radius the base
 * .art-prop-search__bar-submit rule gives it. (A separate, fully circular
 * button - fixed square box, its own border-radius:50%, margin around it -
 * was tried and reverted: confirmed live against the reference design, the
 * button should read as flush with the bar's own end, not as a distinct
 * floating circle.)
 */

/* Magnifying-glass icon: the base .art-prop-search__bar-submit rule sets a
   hardcoded white (it doubles as a "Search" text-label colour on styles
   like tabs/topbar) - minimal's button is icon-only, so match the rest of
   this style's dark/light-neutral text treatment instead. */
.art-prop-search--minimal .art-prop-search__bar-submit {
	color: var( --art-color-text, #1a1a1a );
}

/* ── Search form: Bar style (pill bar) ─────────────────────────────────────── */

/* Pill bar - each control has its own pill border; no outer border on the bar */
.art-prop-search__pill-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Base pill style shared by buttons and select wrappers */
.art-prop-search__pill {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: var( --art-color-bg, #fff );
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.375rem;
	height: 2.5rem;
	padding-inline: 1rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__pill:hover {
	background-color: var( --art-color-surface, #f9fafb );
	border-color: var( --art-color-text, #1a1a1a );
}

.art-prop-search__pill:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Department pill - styled select with positioned chevron */
.art-prop-search__pill-wrap--dept {
	position: relative;
}

.art-prop-search__pill--dept {
	padding-inline-end: 2rem;
	width: 100%;
}

.art-prop-search__pill-chevron {
	pointer-events: none;
	position: absolute;
	right: 0.625rem;
	top: 50%;
	transform: translateY( -50% );
}

/* Active pill states */
.art-prop-search__pill--filters[aria-expanded="true"],
.art-prop-search__pill--type[aria-expanded="true"] {
	background-color: var( --art-color-surface, #f9fafb );
	border-color: var( --art-color-text, #1a1a1a );
}

/* Submit pill - filled accent colour */
.art-prop-search__pill--submit {
	background-color: var( --art-color-accent, #1a4a6b );
	border-color: var( --art-color-accent, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
}

.art-prop-search__pill--submit:hover {
	background-color: var( --art-color-accent, #1a4a6b );
	border-color: var( --art-color-accent, #1a4a6b );
	opacity: 0.85;
}

/* Location pill - flex input row, no button face */
.art-prop-search__pill-location {
	align-items: center;
	background: var( --art-color-bg, #fff );
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius-round, 0 );
	display: flex;
	flex: 1 1 12rem;
	gap: 0.375rem;
	height: 2.5rem;
	min-width: 0;
	padding-inline: 0.875rem;
	transition: border-color 0.15s ease;
}

.art-prop-search__pill-location:focus-within {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 0;
}

.art-prop-search__pill-location-icon {
	color: var( --art-color-muted, #6b7280 );
	flex-shrink: 0;
}

.art-prop-search__pill-input {
	background: transparent;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	flex: 1 1 auto;
	font-size: var( --art-text-sm, 0.875rem );
	min-width: 0;
	outline: none;
}

.art-prop-search__pill-input::placeholder {
	color: var( --art-color-muted, #6b7280 );
}

.art-prop-search__pill-clear {
	background: none;
	border: none;
	color: var( --art-color-muted, #6b7280 );
	cursor: pointer;
	flex-shrink: 0;
	height: 1.25rem;
	line-height: 0;
	padding: 0;
	transition: color 0.15s ease;
	width: 1.25rem;
}

.art-prop-search__pill-clear:hover {
	color: var( --art-color-text, #1a1a1a );
}

/* Extra bar fields (admin-assigned via Search Field Placement) */
.art-prop-search__pill-extra {
	display: inline-flex;
}

.art-prop-search__pill-extra-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.6875rem;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.5rem;
	padding-inline: 1rem 2rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.art-prop-search__pill-extra-control:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__pill-extra-control:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Mobile: hide "Search" label on submit pill to save space */
@media ( max-width: 39.9375em ) {
	.art-prop-search__pill-submit-label {
		display: none;
	}
}

/* ── Dialog modal (bare selectors - renders for any style when the 'popup'
   Filter Style is active) ────────────────────────────────────────────────── */

dialog.art-prop-search__modal-dialog {
	background: var( --art-color-bg, #fff );
	border: none;
	border-radius: var( --art-radius, 0 );
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.18 );
	display: flex;
	flex-direction: column;
	margin: auto;
	max-height: min( 90dvh, 90vh );
	max-width: 36rem;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	/* Closing state's duration - deliberately quicker than opening's below,
	   matching the shared dialog.art-modal pattern this mirrors. */
	transform: translateY( 16px ) scale( 0.96 );
	transition: opacity 0.1s ease, transform 0.1s ease;
	width: calc( 100% - 2rem );
}

dialog.art-prop-search__modal-dialog.art-prop-search__modal-dialog--visible {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	transition: opacity 0.22s ease, transform 0.22s ease;
}

dialog.art-prop-search__modal-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	transition: opacity 0.1s ease;
}

dialog.art-prop-search__modal-dialog.art-prop-search__modal-dialog--visible::backdrop {
	opacity: 1;
	transition: opacity 0.22s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	dialog.art-prop-search__modal-dialog,
	dialog.art-prop-search__modal-dialog::backdrop {
		transition: none;
	}
}

/* No-JS: show as plain block below the bar */
dialog.art-prop-search__modal-dialog:not( [open] ) {
	display: none;
}

/* Browsers without showModal() support never get the --visible class added
   (see initFiltersModal()'s canModal check), so without this the dialog
   would be stuck at the base state's opacity: 0 forever. */
dialog.art-prop-search__modal-dialog--no-anim {
	opacity: 1;
	transform: none;
	transition: none;
}

.art-prop-search__modal-inner {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.art-prop-search__modal-header {
	align-items: center;
	border-block-end: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.art-prop-search__modal-title {
	font-size: 1rem;
	margin: 0;
}

.art-prop-search__modal-close {
	background: none;
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	line-height: 0;
	padding: 0.375rem;
	transition: background-color 0.15s ease;
}

.art-prop-search__modal-close:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__modal-close:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Department tabs inside the modal */
.art-prop-search__modal-dept-tabs {
	border-block-end: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	padding: 0.75rem 1.5rem;
}

.art-prop-search__modal-dept-tab {
	align-items: center;
	border: 1px solid var( --art-color-border, #d1d5db );
	color: var( --art-color-muted, #6b7280 );
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.25rem;
	justify-content: center;
	min-width: 6rem;
	padding-inline: 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.art-prop-search__modal-dept-tab:not( :first-child ) {
	border-inline-start: 0;
}

.art-prop-search__modal-dept-tab:first-child {
	border-end-start-radius: 999px;
	border-start-start-radius: 999px;
}

.art-prop-search__modal-dept-tab:last-child {
	border-end-end-radius: 999px;
	border-start-end-radius: 999px;
}

.art-prop-search__modal-dept-tab.is-active {
	background-color: var( --art-color-text, #1a1a1a );
	border-color: var( --art-color-text, #1a1a1a );
	color: #fff;
}

.art-prop-search__modal-dept-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.art-prop-search__modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.5rem;
}

.art-prop-search__modal-footer {
	align-items: center;
	border-block-start: 1px solid var( --art-color-border, #d1d5db );
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
}

.art-prop-search__modal-clear {
	color: var( --art-color-muted, #6b7280 );
	font-size: var( --art-text-sm, 0.875rem );
	text-decoration: underline;
	transition: color 0.15s ease;
}

.art-prop-search__modal-clear:hover {
	color: var( --art-color-text, #1a1a1a );
}

.art-prop-search__modal-submit {
	background-color: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	min-height: 2.5rem;
	padding-inline: 1.5rem;
	transition: opacity 0.15s ease;
}

.art-prop-search__modal-submit:hover {
	opacity: 0.85;
}

.art-prop-search__modal-submit:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* ── Search form: labeled bar style ────────────────────────────────────────── */

.art-prop-search--labeled .art-prop-search__labeled-form {
	display: flex;
	flex-direction: column;
}

/* Horizontal bar - aligns to bottom so all controls share a baseline */
.art-prop-search__labeled-bar {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Each labeled column: label on top, control below */
.art-prop-search__labeled-field {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	gap: 0.25rem;
	min-width: 8rem;
}

.art-prop-search__labeled-field--location {
	flex: 1 1 14rem;
}

/* PH renders a <label> inside the field wrapper; style it consistently */
.art-prop-search__labeled-field > label,
.art-prop-search__labeled-label {
	color: var( --art-color-text, #1a1a1a );
	display: block;
	font-size: var( --art-text-sm, 0.875rem );
	min-height: 1.25rem;
	white-space: nowrap;
}

/* Location input group */
.art-prop-search__labeled-location-wrap {
	align-items: center;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	display: flex;
	height: 2.75rem;
	padding-inline: 0.75rem;
	transition: border-color 0.15s ease;
}

.art-prop-search__labeled-location-wrap:focus-within {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 0;
}

.art-prop-search__labeled-control--text {
	background: transparent;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	flex: 1 1 auto;
	font-size: var( --art-text-sm, 0.875rem );
	min-width: 0;
	outline: none;
}

.art-prop-search__labeled-control--text::placeholder {
	color: var( --art-color-muted, #6b7280 );
}

.art-prop-search__labeled-clear {
	background: none;
	border: none;
	color: var( --art-color-muted, #6b7280 );
	cursor: pointer;
	flex-shrink: 0;
	height: 1.25rem;
	line-height: 0;
	padding: 0;
	transition: color 0.15s ease;
	width: 1.25rem;
}

.art-prop-search__labeled-clear:hover {
	color: var( --art-color-text, #1a1a1a );
}

/* Select controls in the labeled bar */
.art-prop-search__labeled-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-position: right 0.625rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 0.75rem 2rem;
	transition: border-color 0.15s ease;
	width: 100%;
}

.art-prop-search__labeled-control:focus {
	border-color: var( --art-color-accent, #1a4a6b );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 0;
}

/* Actions group: Filters + Search sit at the bottom of the bar row */
.art-prop-search__labeled-field--actions {
	flex-shrink: 0;
	min-width: 0;
}

.art-prop-search__labeled-actions {
	align-items: stretch;
	display: flex;
	gap: 0.5rem;
}

/* Outlined Filters button */
.art-prop-search__labeled-filters {
	align-items: center;
	background: none;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.4rem;
	height: 2.75rem;
	padding-inline: 1rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__labeled-filters:hover {
	background-color: var( --art-color-surface, #f9fafb );
}

.art-prop-search__labeled-filters:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Filled Search button */
.art-prop-search__labeled-submit {
	background-color: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 1.5rem;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}

.art-prop-search__labeled-submit:hover {
	opacity: 0.85;
}

.art-prop-search__labeled-submit:focus-visible {
	opacity: 0.85;
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Mobile: stack to single column */
@media ( max-width: 47.9375em ) {
	.art-prop-search__labeled-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.art-prop-search__labeled-field {
		min-width: 0;
		width: 100%;
	}

	.art-prop-search__labeled-actions {
		width: 100%;
	}

	.art-prop-search__labeled-submit {
		flex: 1 1 auto;
	}
}

/* ── Archive toolbar: views + result count + sort ───────────────────────────── */

/* Three-zone layout: views left, count centre, sort right. */
.art-prop-archive__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: var( --art-spacing, 1.5rem );
}

.art-prop-archive__views {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 0.25rem;
}

.art-prop-archive__view-btn,
.art-prop-archive__shortlist-btn {
	align-items: center;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.4rem;
	height: 2.75rem;
	padding-inline: 0.875rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.art-prop-archive__view-btn.is-active {
	background-color: var( --art-color-text, #1a1a1a );
	border-color: var( --art-color-text, #1a1a1a );
	color: #fff;
}

.art-prop-archive__view-btn--map:not( .is-active ) {
	border-color: transparent;
	color: var( --art-color-map-pin, #1a4a6b );
}

.art-prop-archive__view-btn:focus-visible,
.art-prop-archive__shortlist-btn:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* Shortlist link sits after the view toggle, spaced off it as a separate
   action rather than a third view. */
.art-prop-archive__shortlist-btn {
	margin-inline-start: 0.5rem;
}

.art-prop-archive__shortlist-btn:hover {
	background-color: var( --art-color-text, #1a1a1a );
	border-color: var( --art-color-text, #1a1a1a );
	color: var( --art-color-bg, #fff );
}

/* Icon-only on mobile to save horizontal room in the toolbar row (view
   toggle + sort dropdown + result count all competing for the same line).
   The label stays in the DOM and aria-label is set on the <a> itself
   (see archive.php), so the accessible name is unaffected by hiding it
   visually - this isn't the same as removing the text from a screen
   reader's perspective. */
@media ( max-width: 47.9375em ) {
	.art-prop-archive__view-btn,
	.art-prop-archive__shortlist-btn {
		padding-inline: 0.75rem;
	}

	.art-prop-archive__view-btn-label {
		display: none;
	}
}

/* Block clicks on the region while a view swap is in-flight */
#art-prop-archive-region[aria-busy="true"] {
	pointer-events: none;
}

/* Map accordion wrapper - animates open/closed */
.art-prop-archive__map-wrap {
	height: 0;
	overflow: hidden;
	transition: height 0.4s ease;
}

.art-prop-archive__map-wrap.is-open {
	height: var( --art-prop-map-height, 75vh );
	margin-block-end: var( --art-spacing, 1.5rem );
	min-height: 500px;
}

/* Ensure PH's canvas wrapper fills our height-controlled wrapper rather than
   applying its own fixed 500 px when ph-map-search.css is loaded later. */
.art-prop-archive__map-wrap .propertyhive-map-canvas-wrapper {
	height: 100%;
}

.art-prop-archive__map-wrap .propertyhive-map-canvas {
	height: 100%;
	width: 100%;
}

/* Spinner shown on the Map View button while the map loads */
.art-prop-archive__view-btn--map.is-loading {
	pointer-events: none;
}

.art-prop-archive__view-btn--map.is-loading svg {
	display: none;
}

.art-prop-archive__view-btn--map.is-loading::before {
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: art-prop-btn-spin 0.6s linear infinite;
	vertical-align: middle;
	margin-right: 0.35em;
}

@keyframes art-prop-btn-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Empty shortlist state (?shortlisted=1 with nothing saved) */
.art-prop-archive__empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: calc( var( --art-spacing, 1.5rem ) * 2 );
	text-align: center;
}

.art-prop-archive__empty-title {
	font-size: var( --art-text-2xl, 1.5rem );
	margin: 0;
}

.art-prop-archive__empty-text {
	color: var( --art-color-muted, #6b7280 );
	margin: 0;
}

.art-prop-archive__count {
	color: var( --art-color-muted, #6b7280 );
	flex: 1;
	font-size: var( --art-text-sm, 0.875rem );
	margin: 0;
	text-align: center;
}

.art-prop-archive__sort {
	flex-shrink: 0;
}

.art-prop-archive__sort-select {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --art-color-bg, #fff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E" );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.625em;
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.75rem;
	padding-inline: 0.875rem 2.25rem;
}

.art-prop-archive__sort-select:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Single property page ──────────────────────────────────────────────────── */

.art-prop-single__images {
	margin-block-end: var( --art-spacing, 1.5rem );
}

.art-prop-single__body {
	display: grid;
	gap: var( --art-spacing, 1.5rem );
	grid-template-columns: 1fr;
}

.art-prop-single--has-sidebar .art-prop-single__body {
	grid-template-columns: minmax( 0, 1fr ) var( --art-prop-single-sidebar-width, 31rem );
}

/* 1210px (75.625em), not the usual 47.9375em mobile breakpoint - the
   two-column grid above is minmax(0,1fr) + a fixed --art-prop-single-
   sidebar-width (31rem default), so the content column starts getting
   squeezed well before the site's normal mobile width once the sidebar's
   own fixed width is accounted for. */
@media ( max-width: 75.625em ) {
	.art-prop-single--has-sidebar .art-prop-single__body {
		grid-template-columns: 1fr;
	}
}

.art-prop-single__sidebar .widget {
	margin-block-end: var( --art-spacing, 1.5rem );
}

.art-prop-single__sidebar .widget:last-child {
	margin-block-end: 0;
}

/* ── Single property actions (Gallery / Floor Plans / EPC / Brochure / Virtual Tour / Make Enquiry) ── */

.property_actions ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: var( --art-spacing, 1.5rem ) 0 0;
	padding: 0;
}

.property_actions ul li {
	margin: 0;
}

.property_actions ul li a {
	align-items: center;
	background-color: var( --art-color-surface, #f9fafb );
	border: 1px solid var( --art-color-border, #d1d5db );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.property_actions ul li a:hover {
	background-color: var( --art-color-bg, #fff );
	border-color: var( --art-color-accent, #1a4a6b );
}

.property_actions ul li a:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

/* Make Enquiry is the primary call to action, distinct from the info/media buttons */
.property_actions ul li.action-make-enquiry a {
	background-color: var( --art-color-accent, #1a4a6b );
	border-color: var( --art-color-accent, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
}

.property_actions ul li.action-make-enquiry a:hover {
	opacity: 0.85;
}

/* ── Single property image headers ────────────────────────────────────────── */

.art-prop-images__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Mosaic ─────────────────────────────────────────────────────────────────  */

/* aspect-ratio lives on the outer container, not on .__main itself - an
   aspect-ratio set directly on a grid item that's also being stretched to
   fill its row (align-items:stretch, the default) doesn't reliably resolve
   to that exact ratio in every browser, which left a sliver of unfilled
   space under the hero image where its actual rendered height fell just
   short of the grid row's height. 5/2 is chosen so the 60%-width hero
   column (3fr of the 3fr/2fr split) works out to exactly 3:2 on its own:
   at container width W, container height is W/(5/2) = 0.4W, and the hero
   column is 0.6W wide, giving 0.6W : 0.4W = 3:2.

   The explicit minmax(0, 1fr) row (instead of the implicit auto row) stops
   the grid items' content from sizing the row - see the thumbnail grid
   rule below for why that matters. */
.art-prop-images--mosaic {
	aspect-ratio: 5 / 2;
	display: grid;
	gap: var( --art-prop-images-gap, 3px );
	grid-template-columns: 3fr 2fr;
	grid-template-rows: minmax( 0, 1fr );
	overflow: hidden;
}

.art-prop-images--mosaic .art-prop-images__main {
	overflow: hidden;
}

/* min-height:0 and minmax(0, 1fr) rows keep the thumbnails' own proportions
   out of the layout. With plain 1fr rows and the default min-height:auto,
   each row grew to the tallest thumbnail's natural height at the cell's
   width (the img's height:100% behaves as auto during track sizing), and
   all three rows matched it - so a single portrait, square or 4:3 photo in
   slots 2-7 pushed the whole mosaic row (and the stretched hero with it)
   well past the container's 5:2 height, clipped by its overflow:hidden. */
.art-prop-images--mosaic .art-prop-images__grid {
	display: grid;
	gap: var( --art-prop-images-gap, 3px );
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat( 3, minmax( 0, 1fr ) );
	min-height: 0;
}

.art-prop-images--mosaic .art-prop-images__cell {
	overflow: hidden;
	position: relative;
}

@media ( max-width: 47.9375em ) {
	.art-prop-images--mosaic {
		aspect-ratio: unset;
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.art-prop-images--mosaic .art-prop-images__main {
		aspect-ratio: 16 / 9;
	}

	/* 2 columns x 3 rows now, not 2x2 - the old 2/1 ratio was tuned for
	   square-ish cells at 2 rows; at 3 rows it would crop each cell to a
	   3:1 sliver, so this widens to keep cells closer to landscape/3:2. */
	.art-prop-images--mosaic .art-prop-images__grid {
		aspect-ratio: 1 / 1;
	}
}

/* Mosaic on phones: the one-photo slider (image-header-mosaic.php) replaces
   the mosaic, whose 2x3 grid filled a screen before the address and price.
   Swipe, arrows and the "1 / N" counter come from the Feature slider's own
   rules/JS; the photo is 3:2 here rather than that track's 28rem height. */
.art-prop-images--mobile-slider {
	display: none;
}

@media ( max-width: 47.9375em ) {
	.art-prop-images--mosaic.art-prop-images--mosaic-has-slider {
		display: none;
	}

	.art-prop-images--mobile-slider {
		display: block;
	}

	.art-prop-images--mobile-slider .art-prop-images__track {
		aspect-ratio: 3 / 2;
		height: auto;
		min-height: 0;
	}

	.art-prop-images--mobile-slider .art-prop-images__nav {
		height: 2.75rem;
		width: 2.75rem;
	}

	.art-prop-images--mobile-slider .art-prop-images__counter {
		background: rgba( 0, 0, 0, 0.55 );
		border-radius: 999px;
		bottom: 0.75rem;
		color: #fff;
		font-size: var( --art-text-sm, 0.8125rem );
		font-weight: 600;
		left: 0.75rem;
		letter-spacing: 0.02em;
		padding: 0.35rem 0.85rem;
		position: absolute;
		z-index: 1;
	}
}

/* ── Columns ────────────────────────────────────────────────────────────────  */

.art-prop-images--strip {
	margin-inline: calc( 50% - 50vw );
	/* Cancels the .art-prop-archive__wrapper padding-top this sits inside on
	   single property pages (see that rule's comment) - falls back to 0 so
	   this doesn't pull the strip upward anywhere else it might be used. */
	margin-top: calc( -1 * var( --art-prop-archive-wrapper-pt, 0px ) );
	max-width: 100vw;
	position: relative;
	width: 100vw;
}

.art-prop-images--strip.art-prop-images--contained {
	margin-inline: 0;
	/* Stays within the wrapper's own width, so (unlike the full-bleed default
	   above) it doesn't need to cancel the wrapper's padding-top. */
	margin-top: 0;
	max-width: 100%;
	width: auto;
}

.art-prop-images--strip .art-prop-images__track {
	display: flex;
	gap: var( --art-prop-images-gap, 3px );
	overflow-x: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.art-prop-images--strip .art-prop-images__track::-webkit-scrollbar {
	display: none;
}

.art-prop-images--strip .art-prop-images__slide {
	aspect-ratio: 3 / 2;
	flex: 0 0 calc( ( 100% - ( var( --art-prop-images-columns, 3 ) - 1 ) * var( --art-prop-images-gap, 3px ) ) / var( --art-prop-images-columns, 3 ) );
	overflow: hidden;
	scroll-snap-align: start;
}

@media ( max-width: 47.9375em ) {
	.art-prop-images--strip .art-prop-images__slide {
		flex: 0 0 100%;
	}
}

/* ── Shared prev/next nav buttons (strip + feature) ────────────────────────  */

.art-prop-images__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 255, 255, 255, 0.9 );
	border: none;
	border-radius: var( --art-radius-round, 0 );
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
	transition: background 0.15s;
}

.art-prop-images__nav:hover {
	background: #fff;
}

.art-prop-images__nav--prev {
	left: 0.75rem;
}

.art-prop-images__nav--next {
	right: 0.75rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────────  */

.art-prop-images--hero {
	display: grid;
	gap: var( --art-prop-images-gap, 3px );
}

.art-prop-images--hero .art-prop-images__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --art-prop-images-gap, 3px );
}

.art-prop-images--hero .art-prop-images__main-wrap,
.art-prop-images--hero .art-prop-images__second-wrap {
	overflow: hidden;
	position: relative;
	aspect-ratio: 4 / 3;
}

.art-prop-images--hero .art-prop-images__overlay,
.art-prop-images--hero .art-prop-images__doc-links {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1rem 1.25rem;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.6 ) );
	color: #fff;
}

.art-prop-images--hero .art-prop-images__title {
	margin: 0 0 0.25rem;
	font-size: clamp( 1rem, 2vw, 1.35rem );
	line-height: 1.2;
}

.art-prop-images--hero .art-prop-images__badges {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.art-prop-images--hero .art-prop-images__badge {
	background: var( --art-color-accent, #2d5a8e );
	color: var( --art-color-on-accent, #fff );
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.art-prop-images--hero .art-prop-images__price {
	font-size: 0.95rem;
}

.art-prop-images--hero .art-prop-images__doc-links {
	display: flex;
	gap: 1.25rem;
	justify-content: flex-end;
}

.art-prop-images--hero .art-prop-images__doc-links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
}

.art-prop-images--hero .art-prop-images__doc-links a:hover {
	text-decoration: underline;
}

.art-prop-images--hero .art-prop-images__thumbs {
	display: flex;
	gap: var( --art-prop-images-gap, 3px );
	overflow: hidden;
}

.art-prop-images--hero .art-prop-images__thumb {
	flex: 0 0 calc( 16.666% - 3px );
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s;
}

.art-prop-images--hero .art-prop-images__thumb:hover,
.art-prop-images--hero .art-prop-images__thumb.is-active {
	opacity: 1;
}

@media ( max-width: 47.9375em ) {
	.art-prop-images--hero .art-prop-images__pair {
		grid-template-columns: 1fr;
	}

	.art-prop-images--hero .art-prop-images__second-wrap {
		display: none;
	}

	.art-prop-images--hero .art-prop-images__thumb {
		flex: 0 0 calc( 25% - 3px );
	}
}

/* ── Feature ────────────────────────────────────────────────────────────────  */

/* --art-prop-feature-image-max-width is read by both the grid column below
   and .art-prop-images__slider-panel's own max-width/aspect-ratio further
   down, so the image's cap and its container's cap can never drift apart
   again - that mismatch (grid column staying at a flexible 1.6fr while
   only the <img> itself was capped) was what pushed the nav buttons and
   counter, both positioned relative to the panel, out past the image's own
   visible edges, and left a gap between the panel and the page's own right
   edge instead of the two aligning. */
.art-prop-images--feature {
	--art-prop-feature-image-max-width: 860px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, var( --art-prop-feature-image-max-width ) );
	min-height: 28rem;
}

.art-prop-images__info-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 1.5rem, 5%, 3rem );
	background: var( --art-color-surface, #f8f8f6 );
	position: relative;
}

/* Back To Search - pinned to the panel's own top-left corner via absolute
   positioning rather than as a flex child, so it never affects the summary
   content's own vertical centring (justify-content:center above) below it. */
.art-prop-images__back-to-search {
	align-items: center;
	color: var( --art-color-accent, currentColor );
	display: inline-flex;
	font-size: var( --art-text-sm, 0.875rem );
	gap: 0.375em;
	left: clamp( 1.5rem, 5%, 3rem );
	position: absolute;
	text-decoration: none;
	top: clamp( 1.5rem, 5%, 3rem );
}

.art-prop-images__back-to-search:hover,
.art-prop-images__back-to-search:focus-visible {
	text-decoration: underline;
}

.art-prop-images__back-to-search-arrow {
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.art-prop-images__back-to-search:hover .art-prop-images__back-to-search-arrow {
	transform: translateX( -3px );
}

/*
 * The panel's title/price/tags/meta come from the Summary Layout block
 * builder (Property Settings → Single Property → Summary Layout) via
 * do_action( 'propertyhive_single_property_summary' ) - see
 * image-header-feature.php. These rules retarget the same generic block
 * classes used everywhere else (.property_title, .price,
 * .art-prop-single__tenure-text/-badge-tag/-badge-tagline/-badge-meta) to
 * this panel's own typography instead of duplicating a separate hardcoded
 * title/price/badges/attrs block set.
 */

.art-prop-images__info-panel .art-prop-single__custom {
	margin-block-end: 1.25rem;
}

.art-prop-images__info-panel h1.property_title {
	font-size: clamp( 1.1rem, 2.5vw, 1.6rem );
	line-height: 1.2;
}

.art-prop-images__info-panel .price {
	font-size: clamp( 1.3rem, 3vw, 2rem );
}

.art-prop-images__info-panel .art-prop-single__tenure-text,
.art-prop-images__info-panel .art-prop-single__badge-tag {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.art-prop-images__info-cta {
	display: inline-block;
	background: var( --art-color-accent, #2d5a8e );
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	padding: 0.65rem 1.5rem;
	font-size: 0.875rem;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	align-self: flex-start;
	transition: opacity 0.15s;
}

.art-prop-images__info-cta:hover {
	opacity: 0.85;
	color: var( --art-color-on-accent, #fff );
}

.art-prop-images__slider-panel {
	overflow: hidden;
	position: relative;
}

/* Desktop only (matches the max-width:47.9375em breakpoint below, where
   the grid collapses to one column and track/slide take over sizing via
   their own aspect-ratio instead) - align-self:start opts this out of the
   grid row's default stretch, since with a definite height already
   assigned by that stretch, aspect-ratio would be ignored entirely,
   leaving the panel (and everything positioned relative to it, or sized as
   100% of it - track, slide, and the <img> itself) at whatever height the
   row naturally resolves to rather than the intended 3:2 shape. max-height
   is a pixel-precise safety cap alongside the aspect-ratio, which alone
   could round to a fraction of a pixel over. */
@media ( min-width: 48em ) {
	.art-prop-images--feature .art-prop-images__slider-panel {
		align-self: start;
		aspect-ratio: 3 / 2;
		max-height: 573px;
		max-width: var( --art-prop-feature-image-max-width );
	}
}

.art-prop-images__slider-panel .art-prop-images__track {
	display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	height: 100%;
	min-height: 28rem;
}

.art-prop-images__slider-panel .art-prop-images__track::-webkit-scrollbar {
	display: none;
}

.art-prop-images__slider-panel .art-prop-images__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	overflow: hidden;
}

.art-prop-images--feature .art-prop-images__counter {
	background: rgba( 0, 0, 0, 0.55 );
	border-radius: 999px;
	bottom: 1rem;
	color: #fff;
	font-size: var( --art-text-sm, 0.8125rem );
	font-weight: 600;
	left: 1rem;
	letter-spacing: 0.02em;
	padding: 0.35rem 0.85rem;
	position: absolute;
	z-index: 1;
}

/* Thumbnail strip - a true sibling of .art-prop-images--feature now (see
   image-header-feature.php's docblock for why it's not nested inside that
   grid), so it's scoped via the shared ancestor both sit inside
   (.art-prop-single__images--feature, single-property.php's own wrapper)
   rather than via .art-prop-images--feature itself. */
.art-prop-single__images--feature .art-prop-images__thumbs {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.art-prop-single__images--feature .art-prop-images__thumb {
	aspect-ratio: 4 / 3;
	background: none;
	border: none;
	border-radius: var( --art-radius, 0 );
	cursor: pointer;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	transition: opacity 0.15s ease;
}

.art-prop-single__images--feature .art-prop-images__thumb:hover,
.art-prop-single__images--feature .art-prop-images__thumb:focus-visible {
	opacity: 0.8;
}

.art-prop-single__images--feature .art-prop-images__thumb .art-prop-images__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.art-prop-single__images--feature .art-prop-images__thumb-more {
	align-items: center;
	align-self: center;
	background: var( --art-color-surface, #f8f8f6 );
	border: none;
	border-radius: 999px;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.25rem;
	height: 2.75rem;
	justify-content: center;
	line-height: 1;
	width: 2.75rem;
}

/* 1300px (81.25em), not the site's usual 47.9375em mobile breakpoint - the
   desktop grid above is minmax(0,1fr) (info panel) + minmax(0,860px)
   (photo), so once the container drops much below ~1300px the info panel
   column gets squeezed into a sliver too narrow for the title/price/badges/
   CTA to read correctly, well before the site's normal mobile width.
   Confirmed live via screenshot - the "in-between" width showed exactly
   that overlap/squeeze, while the actual mobile (stacked) treatment below
   looked correct. */
@media ( max-width: 81.25em ) {
	.art-prop-images--feature {
		grid-template-columns: 1fr;
	}

	/* Below this breakpoint the grid collapses to one column, so DOM order
	   becomes visual order - the info panel (title/price/CTA) is first in
	   the markup (image-header-feature.php), so it rendered above the
	   photo instead of below it. order: -1 puts the image first on mobile
	   without touching the two-column desktop layout, which doesn't use
	   order/flow order at all. */
	.art-prop-images--feature .art-prop-images__slider-panel {
		order: -1;
	}

	.art-prop-images__slider-panel .art-prop-images__track,
	.art-prop-images__slider-panel .art-prop-images__slide {
		min-height: 0;
		aspect-ratio: 3 / 2;
	}

	/* "Back to Search" sits awkwardly over the now-edge-to-edge photo at
	   this width (it's absolutely positioned relative to the info panel,
	   which the photo has visually detached from via order:-1 above) -
	   hidden on mobile for every site using the Feature header style, not
	   just the one that first reported it. */
	.art-prop-images--feature .art-prop-images__back-to-search {
		display: none;
	}

	/* Prev/next nav buttons aren't needed once the track auto-advances on
	   its own at this breakpoint (see initFeatureAutoplay() in the JS) -
	   swiping still works without them. */
	.art-prop-images--feature .art-prop-images__nav {
		display: none;
	}

	/* The info panel's own side padding (base rule above:
	   clamp(1.5rem,5%,3rem)) is an extra inset the title/price/badges/CTA
	   don't need at this width once the photo above them is already
	   edge-to-edge - global for every site using the Feature header style,
	   not just the one that first reported it. padding-block is left
	   alone, so vertical rhythm inside the panel is unaffected. */
	.art-prop-images--feature .art-prop-images__info-panel {
		padding-inline: 0;
	}
}

/* Full-bleed to the true viewport edge on genuine phone widths only
   (47.9375em/767px, the site's usual mobile breakpoint) - regardless of
   how much side padding sits between here and the edge (the wrapper's
   15px, plus whatever a child theme adds on .art-prop-images--feature
   itself), same width:100vw + margin-inline:calc(50% - 50vw) trick already
   used by the "Columns" header style (.art-prop-images--strip above). The
   maths cancels out any symmetric ancestor padding automatically, so this
   doesn't need to know the exact padding value. Between this and the wider
   81.25em stacking breakpoint above, the photo instead stays centred with
   a normal max-width (see next rule) - full-bleed edge-to-edge reads fine
   on a narrow phone screen, but looked stretched/disconnected once the
   stacked column itself got as wide as a tablet. */
@media ( max-width: 47.9375em ) {
	.art-prop-images--feature .art-prop-images__slider-panel {
		margin-inline: calc( 50% - 50vw );
		max-width: 100vw;
		width: 100vw;
	}
}

/* Tablet-ish widths (between the two breakpoints above): centred, capped
   to the same width the desktop image column itself uses
   (--art-prop-feature-image-max-width, 860px) rather than full-bleed. */
@media ( min-width: 47.9375em ) and ( max-width: 81.25em ) {
	.art-prop-images--feature .art-prop-images__slider-panel {
		margin-inline: auto;
		max-width: var( --art-prop-feature-image-max-width, 860px );
	}
}

/* ── Single: features list ──────────────────────────────────────────────────── */

@media ( min-width: 30em ) {
	.art-prop-single__main .features ul {
		column-count: 2;
		column-gap: var( --art-spacing, 1.5rem );
	}

	/* A bullet that wraps in two columns switches the list to one, so the
	   bullets stay on one line each and evenly spaced (set by
	   initFeatureColumns() in art-division-property-modules.js). */
	.art-prop-single__main .features ul.is-single-column {
		column-count: 1;
	}
}

.art-prop-single__main .features li {
	break-inside: avoid;
}

/* ── Single: Full Description Read More ────────────────────────────────────── */

.art-prop-description__contents {
	max-width: var( --art-pm-content-max-width, 48rem );
	position: relative;
}

.art-prop-description__room-title {
	margin-block: 0 0.5rem;
}

.art-prop-description__room-title:not( :first-child ) {
	margin-block-start: 1.5rem;
}

.art-prop-description__contents::after {
	background: linear-gradient( to bottom, transparent, var( --art-color-bg, #ffffff ) );
	bottom: 0;
	content: '';
	height: 4rem;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transition: opacity 0.35s ease;
}

.art-prop-description--collapsed .art-prop-description__contents::after {
	opacity: 1;
}

.art-prop-description__more {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

.art-prop-description__toggle {
	background: none;
	border: 0;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: inline-block;
	font-size: var( --art-text-base, 1rem );
	margin-top: 0.75rem;
	padding: 0;
	text-decoration: underline;
}

.art-prop-description__toggle:hover,
.art-prop-description__toggle:focus {
	color: var( --art-color-muted, #005177 );
}

.art-prop-description__toggle:focus-visible {
	outline: 2px solid var( --art-color-accent, #0073aa );
	outline-offset: 2px;
}

@media ( max-width: 47.9375em ) {
	.art-prop-description__toggle {
		display: block;
		margin-inline: auto;
		width: fit-content;
	}
}

/* ── Single: widgets in the below-description area ───────────────────────────
   Widgets here (e.g. the Property Calculators block) default to their own,
   often page-wide, container width. Cap them to the same readable width as
   the description above rather than changing the block's own default, which
   is also used as a standalone full-width page block elsewhere. */

.art-prop-single__below-description-inner {
	margin-block-start: var( --art-spacing, 1.5rem );
}

.art-prop-single__below-description-inner .art-blocks-property-calculators__container {
	max-width: var( --art-pm-content-max-width, 48rem );
}

/* ══════════════════════════════════════════════════════════════════════════════
   SINGLE PROPERTY — SUMMARY LAYOUT
   ══════════════════════════════════════════════════════════════════════════════

   The property summary is always built from the admin's drag-and-drop block
   layout (Property Settings → Single Property → Summary Layout) - see
   render_custom_summary() / render_summary_block(). An empty layout (every
   row removed) renders nothing.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Summary blocks: tenure tag / availability tag / tagline / meta ──────────── */

.art-prop-single__tenure-text {
	color: var( --art-color-muted, #6b7280 );
	display: inline-block;
	font-size: var( --art-text-sm, 0.875rem );
	margin-block-end: 0.75rem;
}

/* Text uses --art-color-on-accent (the theme's readable colour for the accent),
   like every other accent-background element in this file - it used
   --art-color-bg, which on a dark-background site put dark text on the
   accent (1.7.79). */
.art-prop-single__badge-tag {
	background: var( --art-color-accent, #1a4a6b );
	color: var( --art-color-on-accent, #fff );
	display: inline-block;
	font-size: var( --art-text-sm, 0.875rem );
	margin-block-end: 0.75rem;
	padding: 0.3rem 0.75rem;
}

/* Extra badges (art_division_property_modules_card_badges filter) beside the
   tag. They share the tag's own class, so they look identical unless the
   filter sets bg / color / border (applied inline). */

.art-prop-single__badge-tag--extra {
	margin-inline-start: 0.35rem;
}

.art-prop-single__badge-tagline {
	color: var( --art-color-muted, #6b7280 );
	font-size: var( --art-text-sm, 0.875rem );
	margin-block-end: 0.75rem;
}

/* Price Qualifier (Guide Price / Offers Over / etc) - only rendered when
   set (see render_summary_block()'s 'price' case), directly above the
   price figure itself. */
.art-prop-single__price-qualifier {
	color: var( --art-color-accent, #1a4a6b );
	font-size: var( --art-text-sm, 0.875rem );
	margin: 0;
}

.art-prop-single__badge-meta {
	align-items: center;
	background: var( --art-color-surface, #f3f4f6 );
	display: inline-flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.75rem;
}

.art-prop-single__badge-meta li {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
}

.art-prop-single__badge-meta-icon {
	height: 1.1em;
	width: 1.1em;
}

/* ── Summary: block layout rows ────────────────────────────────────────────── */

/*
 * Rows stack vertically in their configured order; a row holding 2+ blocks
 * (art-prop-single__custom-row--multi) lays them out side by side instead,
 * packed together with a normal gap by default - edge-to-edge spacing only
 * happens if a Space Between spacer block has been dragged into that row
 * (see the spacer rule below), it isn't automatic just from having 2+
 * blocks in a row. Blocks reuse existing classes (property_title, price,
 * art-prop-single__badge-tag/-tagline/-meta, art-prop-single__share) for
 * their actual content, so no extra styling is needed beyond row/block
 * layout. Property Type Tag and Meta (curated Bedrooms/Bathrooms only, see
 * render_bed_bath_meta()) both share the same .art-prop-single__badge-meta
 * markup (render_property_type_tag() for the former) so they line up
 * identically wherever they're dragged, together or apart.
 */

.art-prop-single__custom-row {
	margin-block-end: 0.75rem;
}

.art-prop-single__custom-row:last-child {
	margin-block-end: 0;
}

/*
 * Blocks reuse ordinary elements (h1.property_title, .price, etc.) that
 * carry their own inherited margins from global/theme typography - those
 * fought the row's own margin-block-end above, producing uneven gaps
 * between rows instead of the uniform spacing the row gap is meant to
 * control. Zeroing every block's own vertical margin makes the row gap the
 * single source of truth for spacing between rows.
 */

.art-prop-single__custom-block > * {
	margin-block: 0;
}

.art-prop-single__custom {
	margin-block-end: 0.75rem;
}

.art-prop-single__custom-row--multi {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.art-prop-single__custom-block {
	min-width: 0;
}

/*
 * Spacer: a flex-grow item consumes free space before justify-content gets
 * any leftover to distribute, so this pushes the blocks either side of it
 * apart regardless of the row's own justify-content value.
 */

.art-prop-single__custom-block--spacer {
	flex: 1 1 auto;
}

/*
 * A row containing the title stays on one line (nowrap) rather than using
 * the general flex-wrap:wrap above - flex-wrap's own "does this item fit on
 * the current line" check uses each item's unshrunk hypothetical size, so a
 * long address title's full one-line width could already exceed the row's
 * available space and push the share block onto its own line entirely,
 * regardless of flex-shrink. A first attempt gave the title flex:1 1 0 to
 * work around that, but that made it compete equally with the spacer's own
 * flex-grow for leftover space - the two split it roughly in half, so the
 * title wrapped its text early even with plenty of empty spacer room still
 * visible before the share icon. nowrap sidesteps the line-fit check
 * entirely: with only one line possible, ordinary flex-shrink runs instead
 * (title, the only item with real content to give up, absorbs effectively
 * all of it via min-width:0 below, wrapping its own text only once it
 * actually runs out of room) and the spacer (near-zero content, so equally
 * near-zero shrink weight) is left to grow into whatever's genuinely left
 * over, still pushing the share icon to the row's far edge. Scoped to rows
 * with a title specifically, not every multi-block row, since other
 * combinations (e.g. several badges) may still want to wrap onto a second
 * line on narrow viewports rather than overflow.
 */
.art-prop-single__custom-row--multi:has( .art-prop-single__custom-block--title ) {
	flex-wrap: nowrap;
}

.art-prop-single__custom-block--share {
	flex-shrink: 0;
}

/* ── Summary: meta strip block ─────────────────────────────────────────────── */

/*
 * Rightmove-style property facts strip: a small uppercase caption above an
 * icon + value per column, with a converted-unit sub-line under Size and a
 * plain-text (no icon) value under Tenure. Used by the Custom style's Meta
 * Strip block - see render_meta_strip().
 */

.art-prop-single__meta-strip {
	border-block-end: 1px solid var( --art-color-border, #e5e7eb );
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	padding-block-end: 0.75rem;
}

.art-prop-single__meta-strip-col {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.art-prop-single__meta-strip-label {
	color: var( --art-color-muted, #6b7280 );
	font-size: var( --art-text-sm, 0.875rem );
}

.art-prop-single__meta-strip-value {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: 0.4rem;
}

.art-prop-single__meta-strip-value--plain {
	font-weight: 400;
}

.art-prop-single__meta-strip-icon {
	height: 1em;
	width: 1em;
}

.art-prop-single__meta-strip-sub {
	color: var( --art-color-muted, #6b7280 );
	font-size: 0.8125rem;
}

/* ── Summary: social share ──────────────────────────────────────────────────── */

/* Toggle button */

.art-prop-single__share {
	position: relative;
}

.art-prop-single__share-toggle {
	align-items: center;
	background: none;
	border: none;
	color: var( --art-color-muted, #6b7280 );
	cursor: pointer;
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	transition: color 0.2s ease;
	width: 2rem;
}

.art-prop-single__share-toggle:hover,
.art-prop-single__share-toggle:focus-visible,
.art-prop-single__share-toggle[aria-expanded="true"] {
	color: var( --art-color-accent, currentColor );
}

.art-prop-single__share-toggle:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

.art-prop-single__share-toggle svg {
	height: 1.125rem;
	width: 1.125rem;
}

/* Drop-down menu */

.art-prop-single__share-menu {
	background: var( --art-color-bg, #fff );
	border-radius: var( --art-radius, 0 );
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.14 );
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	position: absolute;
	right: 0;
	top: calc( 100% + 0.375rem );
	z-index: 200;
}

.art-prop-single__share-menu[hidden] {
	display: none;
}

/* Network links: filled circles with SVG icons */

.art-prop-single__share-link {
	align-items: center;
	background-color: var( --art-color-accent, #1a4a6b );
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-on-accent, #fff );
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	width: 2.25rem;
}

.art-prop-single__share-link:hover,
.art-prop-single__share-link:focus-visible {
	/* Without this, the theme's global a:hover rule (color: var(--color-
	   accent-hover)) overrides the icon's currentColor fill, which can land
	   close enough to the accent background colour to make the icon
	   effectively disappear on hover. */
	color: var( --art-color-on-accent, #fff );
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.2 );
	transform: translateY( -1px );
}

.art-prop-single__share-link:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

.art-prop-single__share-link svg {
	height: 1rem;
	width: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROPERTY GALLERY LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════════ */

/* Images that open the gallery get a zoom cursor */

.art-prop-images__img--trigger {
	cursor: zoom-in;
}

/* The "View Gallery" button in the hero doc-links overlay */

.art-prop-images__gallery-trigger {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 0.875rem;
	padding: 0;
	text-decoration: none;
}

.art-prop-images__gallery-trigger:hover {
	text-decoration: underline;
}

/* Mosaic "+N more" button (replaces the old pointer-events:none overlay div) */

.art-prop-images__more-btn {
	align-items: center;
	background: rgba( 0, 0, 0, 0.45 );
	border: none;
	color: #fff;
	cursor: zoom-in;
	display: flex;
	font-size: 1.25rem;
	inset: 0;
	justify-content: center;
	pointer-events: auto;
	position: absolute;
}

/* ── Dialog ──────────────────────────────────────────────────────────────────── */

.art-prop-gallery {
	--art-prop-gallery-thumbs-w: 15rem;
	background: var( --art-color-bg, #fff );
	border: none;
	color: var( --art-color-text, #1a1a1a );
	height: 100dvh;
	inset: 0;
	margin: 0;
	max-height: 100dvh;
	max-width: 100vw;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	/* Closing state's duration - deliberately quicker than opening's below,
	   matching the shared dialog.art-modal pattern this mirrors. */
	transform: scale( 0.97 );
	transition: opacity 0.1s ease, transform 0.1s ease;
	width: 100vw;
}

.art-prop-gallery.art-prop-gallery--visible {
	opacity: 1;
	transform: scale( 1 );
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.art-prop-gallery::backdrop {
	background: rgba( 0, 0, 0, 0.85 );
	opacity: 0;
	transition: opacity 0.1s ease;
}

.art-prop-gallery.art-prop-gallery--visible::backdrop {
	opacity: 1;
	transition: opacity 0.22s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.art-prop-gallery,
	.art-prop-gallery::backdrop {
		transition: none;
	}
}

/* Browsers without showModal() support never get the --visible class added
   (see openGallery()'s feature check), so without this the dialog would be
   stuck at the base state's opacity: 0 forever. */
.art-prop-gallery--no-anim {
	opacity: 1;
	transform: none;
	transition: none;
}

.art-prop-gallery__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */

.art-prop-gallery__header {
	align-items: center;
	border-bottom: 1px solid var( --art-color-border, #e5e7eb );
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
	height: 4rem;
	padding-inline: 1.5rem;
}

.art-prop-gallery__header-meta {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.1rem;
	min-width: 0;
}

.art-prop-gallery__header-title {
	font-size: var( --art-text-sm, 0.875rem );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.art-prop-gallery__header-price {
	color: var( --art-color-accent, #1a4a6b );
	font-size: var( --art-text-sm, 0.875rem );
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */

.art-prop-gallery__tabs {
	display: flex;
	flex-shrink: 0;
}

.art-prop-gallery__tab {
	background: none;
	border: 1px solid var( --art-color-border, #d1d5db );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	height: 2.25rem;
	padding-inline: 1.125rem;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.art-prop-gallery__tab:not( :first-child ) {
	border-inline-start: none;
}

.art-prop-gallery__tab:first-child {
	border-end-start-radius: var( --art-radius, 0 );
	border-start-start-radius: var( --art-radius, 0 );
}

.art-prop-gallery__tab:last-child {
	border-end-end-radius: var( --art-radius, 0 );
	border-start-end-radius: var( --art-radius, 0 );
}

.art-prop-gallery__tab:only-child {
	border-radius: var( --art-radius, 0 );
}

.art-prop-gallery__tab.is-active {
	background: var( --art-color-text, #1a1a1a );
	border-color: var( --art-color-text, #1a1a1a );
	color: var( --art-color-bg, #fff );
}

.art-prop-gallery__tab:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Close button ────────────────────────────────────────────────────────────── */

.art-prop-gallery__close {
	align-items: center;
	background: none;
	border: none;
	border-radius: var( --art-radius-round, 0 );
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 2.5rem;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	transition: background-color 0.15s ease;
	width: 2.5rem;
}

.art-prop-gallery__close:hover {
	background: var( --art-color-surface, #f3f4f6 );
}

.art-prop-gallery__close:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Body (desktop two-panel layout) ────────────────────────────────────────── */

.art-prop-gallery__body {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Thumbnails panel */

.art-prop-gallery__thumbs-panel {
	background: var( --art-color-surface, #f3f4f6 );
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 3px;
	overflow-y: auto;
	padding: 3px;
	scrollbar-width: thin;
	width: var( --art-prop-gallery-thumbs-w );
}

.art-prop-gallery__thumb-btn {
	aspect-ratio: 4 / 3;
	background: none;
	border: 2px solid transparent;
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: border-color 0.15s ease;
	width: 100%;
}

.art-prop-gallery__thumb-btn img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.art-prop-gallery__thumb-btn.is-active {
	border-color: var( --art-color-accent, #1a4a6b );
}

.art-prop-gallery__thumb-btn:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: -2px;
}

/* Viewer */

.art-prop-gallery__viewer-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.art-prop-gallery__viewer-row {
	align-items: center;
	display: flex;
	flex: 1;
	min-height: 0;
}

.art-prop-gallery__viewer {
	align-items: center;
	display: flex;
	flex: 1;
	height: 100%;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
}

.art-prop-gallery__main-img {
	display: block;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.2s ease;
	width: 100%;
}

.art-prop-gallery__main-img.is-loading {
	opacity: 0;
}

/* Prev / next nav buttons */

.art-prop-gallery__nav {
	align-items: center;
	background: rgba( 255, 255, 255, 0.9 );
	border: none;
	border-radius: var( --art-radius-round, 0 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 3rem;
	justify-content: center;
	margin-inline: 0.75rem;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	width: 3rem;
}

.art-prop-gallery__nav:hover {
	background: #fff;
}

.art-prop-gallery__nav:disabled {
	cursor: default;
	opacity: 0.3;
}

.art-prop-gallery__nav:focus-visible {
	outline: 2px solid var( --art-color-accent, currentColor );
	outline-offset: 2px;
}

/* ── Footer (full-width, two-column: spacer col matches thumbs panel) ────────── */

.art-prop-gallery__footer {
	border-top: 1px solid var( --art-color-border, #e5e7eb );
	display: grid;
	flex-shrink: 0;
	grid-template-columns: var( --art-prop-gallery-thumbs-w ) 1fr;
	height: 3rem;
}

.art-prop-gallery__footer-center {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	grid-column: 2;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	padding-inline: 1.5rem;
}

/* ── Many-thumbnail layout (10+ photos: 2-column 175px grid) ─────────────────── */

.art-prop-gallery--many-thumbs {
	--art-prop-gallery-thumbs-w: 359px; /* 2 × 175px cols + 3px gap + 6px panel padding */
}

.art-prop-gallery--many-thumbs .art-prop-gallery__thumbs-panel {
	display: grid;
	flex-direction: unset;
	grid-auto-rows: calc( 175px * 3 / 4 );
	grid-template-columns: 175px 175px;
}

.art-prop-gallery__counter {
	color: var( --art-color-muted, #6b7280 );
	font-size: var( --art-text-sm, 0.875rem );
	white-space: nowrap;
}

.art-prop-gallery__caption {
	color: var( --art-color-text, #1a1a1a );
	font-size: var( --art-text-sm, 0.875rem );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Mobile scroll list ──────────────────────────────────────────────────────── */

.art-prop-gallery__mobile-scroll {
	display: none;
}

/* ── Mobile breakpoint ───────────────────────────────────────────────────────── */

@media ( max-width: 47.9375em ) {

	.art-prop-gallery__body {
		display: none;
	}

	.art-prop-gallery__footer {
		display: none;
	}

	.art-prop-gallery__mobile-scroll {
		display: block;
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.art-prop-gallery__mobile-item {
		border-bottom: 1px solid var( --art-color-border, #e5e7eb );
	}

	.art-prop-gallery__mobile-item img {
		aspect-ratio: 4 / 3;
		display: block;
		object-fit: cover;
		width: 100%;
	}

	.art-prop-gallery__mobile-caption {
		color: var( --art-color-muted, #6b7280 );
		font-size: var( --art-text-sm, 0.875rem );
		margin: 0;
		padding: 0.625rem 1rem;
	}

	.art-prop-gallery__header {
		height: 3.5rem;
		padding-inline: 1rem;
	}

	.art-prop-gallery__header-meta {
		display: none;
	}

	.art-prop-gallery__tab {
		font-size: 0.8125rem;
		height: 2rem;
		padding-inline: 0.75rem;
	}

}

/* ── Property Material Information block ───────────────────────────────────── */

.art-prop-mi {
	container-type: inline-size;
}

/* Additional Information's field grid (Rightmove-style key facts strip) -
   now an accordion item's content (open by default, see render.php), not a
   separate always-visible block. */

.art-prop-mi__grid .art-prop-mi__term {
	color: var( --art-color-muted, #6b7280 );
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.art-prop-mi__grid .art-prop-mi__detail {
	color: var( --art-color-text, #111827 );
	font-size: var( --art-text-lg, 1.125rem );
}

/* Override PM accordion alignment and bleed - the shared accordion component
   centres itself with margin-inline: auto up to a content max-width, which
   fights this block's own (often wider, two-column-page) container. */

.art-prop-mi .art-pm-module__accordion-item {
	margin-inline: 0;
	max-width: none;
}

.art-prop-mi .art-pm-module__accordion-content {
	margin-inline: 0;
	max-width: none;
	padding-top: 1rem;
}

.art-prop-mi .art-pm-module__accordion-panel {
	max-height: 0;
	transition: max-height 0.35s ease, grid-template-rows 0.35s ease;
}

.art-prop-mi .art-pm-module__accordion-item.is-open .art-pm-module__accordion-panel {
	max-height: 1500px;
}

/* Accordion trigger: icon + title side by side */

.art-prop-mi__trigger .art-prop-mi__trigger-label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* Disclaimer at the bottom of each Material Information section. */
.art-prop-mi__disclaimer {
	font-size: var( --art-text-sm, 0.875rem );
	margin-block: 1rem 0;
	opacity: 0.7;
}

.art-prop-mi__trigger-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.art-prop-mi__trigger-icon svg {
	width: 100%;
	height: 100%;
}

/* Rows style trigger - no icon (see render.php, $icon is only resolved for
   Accordion style), title left/chevron far right, larger and more spaced
   out than Accordion style's compact icon+title row. */

.art-prop-mi__rows--rows .art-pm-module__accordion-trigger {
	font-size: var( --art-text-lg, 1.125rem );
	justify-content: space-between;
	padding-block: 1.5rem;
	width: 100%;
}

.art-prop-mi__rows--rows .art-pm-module__accordion-item {
	border-bottom: 1px solid var( --art-color-border, #e5e7eb );
}

.art-prop-mi__rows--rows .art-pm-module__accordion-item:first-child {
	border-top: 1px solid var( --art-color-border, #e5e7eb );
}

/* Compact "Label: Value" lines - Rows style's Utilities panel content,
   denser than the stacked art-prop-mi__list/__row/__term/__detail below
   (Accordion style). */

.art-prop-mi__lines {
	margin: 0;
	padding: 0;
}

.art-prop-mi__line {
	line-height: 1.6;
}

.art-prop-mi__line-label {
	color: var( --art-color-muted, #6b7280 );
	display: inline;
}

.art-prop-mi__line-value {
	color: var( --art-color-text, #111827 );
	display: inline;
	margin: 0;
}

/* Field list - stacked label / value */

.art-prop-mi__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.art-prop-mi__row {
	padding: 0.625rem 0;
	border-bottom: 1px solid var( --art-color-border, #e5e7eb );
}

.art-prop-mi__row:last-child {
	border-bottom: none;
}

.art-prop-mi__term {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 0.125rem;
}

.art-prop-mi__detail {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

/* Sub-group headings (Utility supply, Flood Risk, etc.) */

.art-prop-mi__group {
	margin-top: 1rem;
}

.art-prop-mi__group:first-child {
	margin-top: 0;
}

.art-prop-mi__group-title {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var( --art-color-text-muted, #6b7280 );
	margin: 0 0 0.5rem;
}

/* Additional Information - multi-column grid */

.art-prop-mi__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9rem, 1fr ) );
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.art-prop-mi__grid-item .art-prop-mi__term {
	margin-bottom: 0.25rem;
}

.art-prop-mi__grid-item .art-prop-mi__detail {
	margin: 0;
}

/* EPC images / download link */

.art-prop-mi__epc {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
}

.art-prop-mi__epc-trigger {
	background: none;
	border: none;
	padding: 0;
	cursor: zoom-in;
	display: block;
}

.art-prop-mi__epc-img {
	max-width: 200px;
	width: 100%;
	height: auto;
	display: block;
}

.art-prop-mi__epc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border: 1px solid currentColor;
	border-radius: var( --art-radius, 0 );
	font-size: 0.875rem;
	text-decoration: none;
}

/* EPC lightbox */

.art-prop-mi-lightbox {
	border: none;
	border-radius: var( --art-radius, 0 );
	padding: 0;
	max-width: min( 90vw, 900px );
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.45 );
	position: relative;
}

.art-prop-mi-lightbox::backdrop {
	background: rgba( 0, 0, 0, 0.75 );
}

.art-prop-mi-lightbox__close {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	border: none;
	border-radius: var( --art-radius-round, 0 );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.art-prop-mi-lightbox__close:hover {
	background: rgba( 0, 0, 0, 0.75 );
}

.art-prop-mi-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	height: auto;
	object-fit: contain;
}

/* ── Shared modal (Search Results Promo Gravity Form CTA) ────────────────────── */

dialog.art-modal {
	background: var( --art-color-bg, #fff );
	border: none;
	border-radius: var( --art-radius, 0 );
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.2 );
	max-width: min( 600px, calc( 100vw - 2rem ) );
	padding: 0;
	width: 100%;
}

/* The open/close animation (opacity+transform) and scroll clipping
   (max-height/overflow-y) live on .art-modal__inner, NOT the <dialog>
   element itself. `transform` on an ancestor makes it the containing block
   for any `position: fixed` descendant (e.g. a Google Places Autocomplete
   .pac-container an address field appends inside the dialog) - paired with
   overflow-y:auto that then clips/mispositions that dropdown against the
   dialog's own box instead of the viewport. Keeping <dialog> itself
   transform-free avoids creating that containing block at all. Also fixes
   a cross-plugin collision: this dialog often carries a second class too
   (e.g. Page Modules' art-pm-module__form-modal), whose own CSS targets
   the same element at equal specificity - whichever plugin's stylesheet
   happened to load last was winning and silently reintroducing this bug
   regardless of which single copy got fixed, so every copy needs it. */
dialog.art-modal .art-modal__inner {
	max-height: 90dvh;
	opacity: 0;
	overflow-y: auto;
	scrollbar-color: var( --art-color-accent, #999999 ) transparent;
	scrollbar-width: thin;
	transform: translateY( 16px ) scale( 0.96 );
	transition: opacity 0.1s ease, transform 0.1s ease;
}

/* Firefox picks up thin/coloured scrollbars from scrollbar-color above;
   Chromium/Safari need the ::-webkit- pseudo-elements instead. */
dialog.art-modal .art-modal__inner::-webkit-scrollbar {
	width: 8px;
}

dialog.art-modal .art-modal__inner::-webkit-scrollbar-track {
	background: transparent;
}

dialog.art-modal .art-modal__inner::-webkit-scrollbar-thumb {
	background-color: var( --art-color-accent, #999999 );
	border-radius: 9999px;
}

/* Locks the underlying page's own scrollbar while a modal is open (toggled
   by modal.js) - without this, opening a modal left two scrollbars visible
   (the page's and the dialog's own), and the page behind could still be
   wheel-scrolled despite the dialog being modal/inert. */
body.art-modal-locked {
	overflow: hidden;
}

dialog.art-modal.art-modal--visible .art-modal__inner {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	transition: opacity 0.22s ease, transform 0.22s ease;
}

dialog.art-modal::backdrop {
	backdrop-filter: blur( 2px );
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	transition: opacity 0.1s ease;
}

dialog.art-modal.art-modal--visible::backdrop {
	opacity: 1;
	transition: opacity 0.22s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	dialog.art-modal .art-modal__inner,
	dialog.art-modal::backdrop {
		transition: none;
	}
}

.art-modal__inner {
	padding: 2rem;
	position: relative;
}

.art-modal__close {
	background: transparent;
	border: none;
	color: var( --art-color-text, #1a1a1a );
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

.art-modal__close:focus-visible {
	border-radius: var( --art-radius, 0 );
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

.art-modal__content {
	padding-top: 1rem;
	text-align: left;
}

/* ── Search Results Promo card ────────────────────────────────────────────────
   Reuses the .art-prop-card / .art-prop-card--archive-{layout} wrapper classes
   for grid sizing/spacing; promo-specific content lives under this block. */

.art-prop-promo {
	color: var( --art-prop-promo-text-color, inherit );
	display: flex;
	flex-direction: column;
	position: relative;
	background-position: center;
	background-size: cover;
	text-decoration: none;
}

.art-prop-promo__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.art-prop-promo__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.art-prop-promo__title {
	margin: 0;
	color: inherit;
	font-size: var( --art-text-lg, 1.125rem );
}

.art-prop-promo__text {
	color: inherit;
}

.art-prop-promo__text > *:first-child {
	margin-top: 0;
}

.art-prop-promo__text > *:last-child {
	margin-bottom: 0;
}

.art-prop-promo__button {
	align-self: flex-start;
	background: var( --art-color-accent, #1a4a6b );
	border: none;
	border-radius: var( --art-radius, 0 );
	color: var( --art-color-on-accent, #fff );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.art-prop-promo__button:hover {
	opacity: 0.85;
}

.art-prop-promo__button:focus-visible {
	outline: 2px solid var( --art-color-accent, #1a4a6b );
	outline-offset: 2px;
}

a.art-prop-promo {
	display: block;
	overflow: hidden;
}

.art-prop-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Best Match heading + divider ─────────────────────────────────────────────
   "We matched N properties" heading above the grid, and a full-width break
   inside the grid between exact and partial Guided Wizard Best Match results -
   see Art_Division_Property_Modules_Best_Match. */

.art-prop-archive__best-match-heading {
	margin: 0 0 1rem;
	color: var( --art-color-text, inherit );
	font-size: var( --art-text-lg, 1.125rem );
	font-weight: 600;
	text-align: center;
}

.art-prop-archive__divider {
	grid-column: 1 / -1;
	border-top: 1px solid var( --art-color-border, #e5e7eb );
	margin-block-start: 0.5rem;
	padding-block-start: 1.5rem;
	text-align: center;
}

/* An h2 since 1.7.75 - inherit everything a theme's heading styles would
   otherwise change, so it still reads as the same small muted line. */
.art-prop-archive__divider-subtext {
	margin: 0;
	color: var( --art-color-muted, #6b7280 );
	font-family: inherit;
	font-size: var( --art-text-sm, 0.875rem );
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROPERTY VALUATION module
   ══════════════════════════════════════════════════════════════════════════════ */

/* Caps the section to the sitewide container width - the module's title/text
   header and its Valuations grid both sit inside a single .art-pm-module__inner
   (see modules/property-valuation/template.php), same as every other Page
   Modules module. Without this the module has no width constraint at all and
   both the header and the item grid stretch to the full section width; when a
   Background Image is set the section also becomes display:flex (see
   .art-pm-module--has-bg in art-division-page-modules.css), which - with no
   containing wrapper - laid the header and item grid out side by side as two
   flex items instead of stacked. */
.art-pm-module--property-valuation .art-pm-module__inner {
	margin-inline: auto;
	max-width: var( --art-max-width, 75rem );
	padding-left: 15px;
	padding-right: 15px;
}

/* Optional per-instance override for the module header's title/text colour
   (Content tab, template.php) - the custom properties are only set inline
   when an editor picks a colour, so the var() fallback keeps every existing
   Property Valuation section on the theme default. */
.art-pm-module--property-valuation .art-pm-module__title {
	color: var( --art-prop-valuation-title-color, inherit );
}

.art-pm-module--property-valuation .art-pm-module__intro {
	color: var( --art-prop-valuation-text-color, inherit );
}

/* Optional colour overlay on the Background Image (Styles tab) - same
   opacity/colour pattern as the Hero module's .art-pm-hero__overlay. Only
   rendered by template.php when a Background Image is set and Overlay
   Opacity > 0, sitting inside .art-pm-module__bg (already position:absolute;
   inset:0; overflow:hidden from art-division-page-modules.css) directly
   after the image, so DOM order alone puts it on top without needing its
   own z-index. */
.art-pm-module--property-valuation .art-pm-module__overlay {
	background: #000;
	inset: 0;
	position: absolute;
}

.art-prop-valuation--cards {
	display: grid;
	gap: var( --art-prop-card-gap, var( --art-spacing, 1.5rem ) );
	grid-template-columns: repeat( var( --art-prop-valuation-columns, 3 ), minmax( 0, 1fr ) );
	/* Cards Max Width (Styles tab) - only set inline when an editor fills the
	   field, so the var() fallback (none) keeps every existing section
	   filling the full .art-pm-module__inner width, unchanged. */
	margin-inline: auto;
	max-width: var( --art-prop-valuation-max-width, none );
}

.art-prop-valuation--list {
	display: flex;
	flex-direction: column;
	gap: var( --art-spacing, 1.5rem );
}

.art-prop-valuation-item {
	background-color: var( --art-color-surface, #fff );
	border-radius: var( --art-radius, 0 );
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var( --art-spacing, 1.5rem );
}

.art-prop-valuation-item__title {
	font-size: var( --art-text-lg, 1.125rem );
	margin: 0;
}

.art-prop-valuation-item__text {
	color: var( --art-color-text, inherit );
}

.art-prop-valuation-item__text > *:first-child {
	margin-block-start: 0;
}

.art-prop-valuation-item__text > *:last-child {
	margin-block-end: 0;
}

@media ( max-width: 47.9375em ) {
	.art-prop-valuation--cards {
		grid-template-columns: repeat( min( 2, var( --art-prop-valuation-columns, 2 ) ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 29.9375em ) {
	.art-prop-valuation--cards {
		grid-template-columns: 1fr;
	}
}

/* ── Property Valuation title / text alignment ────────────────────────────────
   Consumes the --art-pm-title-align-* / --art-pm-text-align-* custom
   properties set inline on the section by modules/property-valuation/template.php
   (same mobile/tablet/desktop convention as Page Modules' Content module and
   this plugin's own Property Slider, below). Title Alignment only affects the
   module-level header title (modules/shared/header.php); Text Alignment
   affects both the module-level intro AND each Valuation item's card
   (.art-prop-valuation-item) - title, text, and CTA all inherit it via the
   single text-align set on the card, since the item title/text/button have
   no alignment control of their own. */

@media ( max-width: 767px ) {
	.art-pm-module--property-valuation .art-pm-module__title {
		text-align: var( --art-pm-title-align-mobile, inherit );
	}

	.art-pm-module--property-valuation .art-pm-module__intro,
	.art-pm-module--property-valuation .art-prop-valuation-item {
		text-align: var( --art-pm-text-align-mobile, inherit );
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.art-pm-module--property-valuation .art-pm-module__title {
		text-align: var( --art-pm-title-align-tablet, inherit );
	}

	.art-pm-module--property-valuation .art-pm-module__intro,
	.art-pm-module--property-valuation .art-prop-valuation-item {
		text-align: var( --art-pm-text-align-tablet, inherit );
	}
}

@media ( min-width: 1024px ) {
	.art-pm-module--property-valuation .art-pm-module__title {
		text-align: var( --art-pm-title-align-desktop, inherit );
	}

	.art-pm-module--property-valuation .art-pm-module__intro,
	.art-pm-module--property-valuation .art-prop-valuation-item {
		text-align: var( --art-pm-text-align-desktop, inherit );
	}
}

/* ── Property Slider title / text alignment ───────────────────────────────────
   Consumes the --art-pm-title-align-* / --art-pm-text-align-* custom
   properties set inline on the section by modules/property-slider/template.php
   (same mobile/tablet/desktop convention as Page Modules - see
   art-division-page-modules.css). */

/* The CTA button centres by default, independent of Text Alignment -
   matching Page Modules' Content and Team Members modules, whose own
   .art-pm-module__cta gets this same unconditional text-align:center (see
   art-division-page-modules.css). Previously grouped into the Text
   Alignment media queries below alongside .art-pm-module__intro, which left
   it with no default alignment under "Inherit" (falling through to plain
   left/start) even though the title above it defaults to centred via
   .art-pm-module__header's own base rule - inconsistent with those other
   modules. An explicit Text Alignment choice still only affects the intro
   text, same as Content/Team Members. */
.art-pm-module--property-slider .art-pm-module__cta {
	text-align: center;
}

@media ( max-width: 767px ) {
	.art-pm-module--property-slider .art-pm-module__title {
		text-align: var( --art-pm-title-align-mobile, inherit );
	}

	.art-pm-module--property-slider .art-pm-module__intro {
		text-align: var( --art-pm-text-align-mobile, inherit );
	}

	/* Always stacked on mobile, regardless of alignment - see the "Property
	   Slider header + controls row" CSS section below for why. align-items:
	   stretch (its own initial value) is set explicitly here because
	   tablet/desktop's flex-end (below) is a cross-axis value meant for the
	   row case (bottom-aligns header/controls horizontally); once
	   flex-direction flips to column, the cross axis becomes horizontal
	   too, and flex-end would shrink the header and push it flush-right
	   instead of letting it stretch full width the way a stacked header
	   should. */
	.art-pm-module--property-slider .art-pm-module__top {
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.art-pm-module--property-slider .art-pm-module__title {
		text-align: var( --art-pm-title-align-tablet, inherit );
	}

	.art-pm-module--property-slider .art-pm-module__intro {
		text-align: var( --art-pm-text-align-tablet, inherit );
	}

	.art-pm-module--property-slider .art-pm-module__top {
		align-items: flex-end;
		display: var( --art-pm-top-display-tablet, flex );
	}
}

@media ( min-width: 1024px ) {
	.art-pm-module--property-slider .art-pm-module__title {
		text-align: var( --art-pm-title-align-desktop, inherit );
	}

	.art-pm-module--property-slider .art-pm-module__intro {
		text-align: var( --art-pm-text-align-desktop, inherit );
	}

	.art-pm-module--property-slider .art-pm-module__top {
		align-items: flex-end;
		display: var( --art-pm-top-display-desktop, flex );
	}
}

/* ── Property Slider department tabs ──────────────────────────────────────────
   Rendered when more than one department is selected. All panels are present
   in the DOM and initialised (including their Swiper carousels) at load time;
   switching tabs only toggles which panel is visible via .is-active - see
   art-division-property-modules.js for the click handler. Panels are stacked
   with the inactive ones absolutely positioned (not display:none) so Swiper
   always measures a real width, even before its panel is first shown. */

.art-pm-module--property-slider .art-pm-module__dept-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
}

.art-pm-module--property-slider .art-pm-module__dept-tab {
	background: transparent;
	border: none;
	border-radius: 9999px;
	color: var( --art-color-text, #111 );
	cursor: pointer;
	font-size: var( --art-text-sm, 0.875rem );
	padding: 0.5rem 1.25rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.art-pm-module--property-slider .art-pm-module__dept-tab:hover {
	color: var( --art-color-accent, #0073aa );
}

.art-pm-module--property-slider .art-pm-module__dept-tab.is-active {
	background: var( --art-color-accent, #0073aa );
	/* --art-pm-on-accent is Page Modules' own "text colour for an accent-
	   coloured background" variable (always in scope - property-slider is
	   one of its layouts, so its stylesheet is always loaded alongside this
	   one). As of Theme 1.0.226 it resolves to an actual computed value
	   (art_division_readable_text_color() in the Theme's theme-settings.php
	   picks white or dark text by WCAG luminance against whatever Accent
	   colour the site uses), not just a hardcoded #fff - so this tab reads
	   correctly whether Accent is light (e.g. yellow) or dark, with no
	   per-client override needed. Not color-contrast() - that CSS function
	   never shipped in any release browser (Safari flag only, since dropped
	   from the spec), so an invalid value there would just make this whole
	   declaration a no-op. */
	color: var( --art-pm-on-accent, #ffffff );
}

.art-pm-module--property-slider .art-pm-module__dept-tab:focus-visible {
	outline: 2px solid var( --art-color-accent, #0073aa );
	outline-offset: 2px;
}

/* Sliding pill: once initDeptPill() (art-division-property-modules.js) has
   measured the active tab, the group becomes one pill-shaped track and a
   single accent "thumb" (::before) slides and resizes to sit behind the
   active tab, instead of each tab painting its own background. Scoped to
   .has-pill so without JS the per-tab .is-active background above still
   works. --art-prop-dept-pill-x/-w are set by the script from the active
   tab's offsetLeft/offsetWidth. The track colour is a variable so a site
   can restyle it (e.g. on a dark background colour). */
.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill {
	background: var( --art-prop-dept-track-bg, rgba( 0, 0, 0, 0.06 ) );
	border-radius: 9999px;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 4px;
	position: relative;
}

.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill::before {
	background: var( --art-color-accent, #0073aa );
	border-radius: 9999px;
	bottom: 4px;
	content: '';
	left: 0;
	position: absolute;
	top: 4px;
	transform: translateX( var( --art-prop-dept-pill-x, 0px ) );
	width: var( --art-prop-dept-pill-w, 0px );
}

/* Animate only after the first placement, so the thumb doesn't slide in
   from the left edge on page load. */
.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill.is-pill-ready::before {
	transition: transform 0.3s ease, width 0.3s ease;
}

.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill .art-pm-module__dept-tab {
	position: relative;
	z-index: 1;
}

.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill .art-pm-module__dept-tab.is-active {
	background: transparent;
}

@media ( prefers-reduced-motion: reduce ) {
	.art-pm-module--property-slider .art-pm-module__dept-tabs.has-pill.is-pill-ready::before {
		transition: none;
	}
}

/* Compact Cards in a Property Slider on any Background Colour other than
   Default: the card body's own padding and surface colour made a boxed-in
   panel against the coloured section, so the text sits straight on the
   section instead - keeping only the gap above it, below the photo. */
.art-pm-module--property-slider:not( .art-pm-module--bg-white ) .art-prop-card--archive .art-prop-card__body {
	background-color: transparent;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.art-pm-module--property-slider .art-pm-module__dept-panels {
	position: relative;
}

.art-pm-module--property-slider .art-pm-module__dept-panel {
	inset: 0;
	position: absolute;
	visibility: hidden;
	width: 100%;
}

.art-pm-module--property-slider .art-pm-module__dept-panel.is-active {
	position: relative;
	visibility: visible;
}

/* ── Property Slider header + controls row ────────────────────────────────────
   Only rendered when Custom Links or the department tabs are present (see
   $has_top_controls in template.php) - otherwise the header renders alone,
   unwrapped, exactly as before. .art-pm-module__header keeps its shared
   max-width/centred box by default (no forcing to 100% width here - that
   was only ever needed for an older, less direct approach, see below).

   Left/Right title alignment: a plain flex row, header at its natural width
   beside the controls, controls pushed to the far right via margin-left:
   auto on .art-pm-module__controls.

   Centre/Inherit, tablet/desktop only: switches to a 3-column grid (empty
   1fr spacer / auto-width title / 1fr controls, see --art-pm-top-display-
   {bp} in the "Property Slider title / text alignment" media queries
   above) so the title stays genuinely centred in the row - the two equal
   1fr tracks keep it centred regardless of the controls' own width, which a
   plain flex row's justify-content:space-between can't do (that anchors the
   first item to the row's start, not the row's centre). Mobile is excluded
   and always stacks instead (see its own media query above) - grid columns,
   unlike flex, don't wrap onto a new line on their own if the title and
   controls don't both fit, and mobile is where that's most likely.

   (An earlier version also tried forcing the header to literal 100% row
   width whenever using the grid, to guarantee the middle column sized
   correctly - unnecessary: the grid's own two equal spacer columns already
   keep the title centred without it, and forcing 100% width fought the
   header's own natural max-width instead of just letting the grid's auto
   column size to it.)

   align-items:flex-end (tablet/desktop) bottom-aligns the controls against
   the header's last line of text (or the title, if there's no intro text).
   grid-template-columns/grid-column below are simply ignored by browsers
   whenever this row is in its flex state (Left/Right, or mobile), so
   they're always present rather than conditionally scoped to the grid
   case. */

.art-pm-module--property-slider .art-pm-module__top {
	column-gap: 2rem;
	flex-wrap: wrap;
	grid-template-columns: 1fr auto 1fr;
	justify-content: space-between;
	margin-bottom: 2rem;
	row-gap: 1rem;
	/* align-items and display are NOT set here - the media queries above
	   supply both per breakpoint (mobile: stretch/flex-column always;
	   tablet/desktop: flex-end, and display: var(--art-pm-top-display-{bp},
	   flex)). A static value here would silently win over those media
	   queries regardless of viewport - same selector, same specificity,
	   later in the file always wins the tie (this is what made
	   --art-pm-top-display-{bp}:grid dead code the first time this whole
	   mechanism was written, before it was split out the same way). */
}

/* When a Custom Links title is set, top-align the whole row instead of
   bottom-aligning it, so the custom title sits level with the module's own
   title - not floating above it (which is what bottom-aligning a taller
   controls column against a shorter header otherwise produces). Applies to
   the grid case too - align-items works the same way for a grid row.
   Scoped to tablet/desktop (min-width:768px) rather than left unconditional
   - "top-align the row" only means something for the row case; mobile
   always stacks (see its own media query above, which sets its own
   align-items:stretch for that layout) and an unconditional rule here would
   silently win the cascade tie there too, same issue as the display
   property above. */
@media ( min-width: 768px ) {
	.art-pm-module--property-slider .art-pm-module__top--controls-with-title {
		align-items: flex-start;
	}
}

.art-pm-module--property-slider .art-pm-module__top .art-pm-module__header {
	flex-grow: 0;
	flex-shrink: 1;
	grid-column: 2;
	margin-bottom: 0;
}

/* ── Property Slider controls (Custom Links + department tabs) ───────────────
   Shared right-aligned column; every piece renders independently of the
   others. */

.art-pm-module--property-slider .art-pm-module__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	grid-column: 3;
	/* Pushes controls to the right edge of whichever flex line it's on (or,
	   in the grid case, to the end of its own 1fr column - auto margins work
	   the same way in grid layout). Needed in addition to .art-pm-module__top's
	   justify-content:space-between: when the header/controls wrap onto
	   separate lines (flex case) or the row is stacked (mobile), controls
	   would otherwise be left/flex-start aligned instead of staying right-
	   aligned. */
	margin-left: auto;
}

.art-pm-module--property-slider .art-pm-module__custom-links-title {
	color: inherit;
	font-size: var( --art-text-sm, 0.875rem );
	margin: 0;
	text-align: right;
}

.art-pm-module--property-slider .art-pm-module__custom-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: flex-end;
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

.art-pm-module--property-slider .art-pm-module__custom-links-list a {
	color: var( --art-color-accent, #0073aa );
	font-size: var( --art-text-sm, 0.875rem );
	text-decoration: underline;
}

/* Mobile: centre the controls (department tabs, Custom Links) instead of
   right-aligning them - the row always stacks on mobile, so right-aligned
   controls sat off to one side under a full-width header. Placed after the
   base rules above (same selectors) so it wins the cascade at this width.
   margin-left: 0 undoes the base auto margin, which in the stacked column
   also stopped the controls stretching to the full row width. The tabs'
   own margin-bottom is dropped too: the stacked .art-pm-module__top row
   already has its own 2rem margin-bottom below it. */
@media ( max-width: 767px ) {
	.art-pm-module--property-slider .art-pm-module__controls {
		align-items: center;
		margin-left: 0;
	}

	.art-pm-module--property-slider .art-pm-module__dept-tabs {
		justify-content: center;
		margin-bottom: 0;
	}

	.art-pm-module--property-slider .art-pm-module__custom-links-list {
		justify-content: center;
	}

	.art-pm-module--property-slider .art-pm-module__custom-links-title {
		text-align: center;
	}
}


/* ── Recently Viewed Property Slider ──────────────────────────────────────────── */
/*
 * A Recently Viewed slider starts hidden (via the hidden attribute) until the
 * visitor's properties are loaded. Module styles may set display on the
 * section, which would beat the UA [hidden] rule, so make it explicit: hidden
 * means the whole module, heading, button and spacing included, is gone.
 */
.art-pm-module--recently-viewed[hidden] {
	display: none !important;
}

/* ── Property page Map popup (Property Actions > Map) ─────────────────────── */

dialog.art-modal.art-prop-map-modal {
	max-width: min( 1000px, 94vw );
	width: 100%;
}

.art-prop-map-modal__title {
	margin: 0 0 1rem;
}

.art-prop-map-modal__map {
	border-radius: var( --art-radius, 0 );
	height: min( 70vh, 640px );
	width: 100%;
}