/* ==========================================================================
   Property Detail Page
   Canonical Figma: 6020-88781
   ========================================================================== */

/* === Gallery Section === */
.wlre-gallery {
	background: var(--wlre-color-white);
	padding: var(--wlre-space-16) 0;
}

@media (min-width: 1024px) {
	.wlre-gallery .wlre-container {
		padding-inline: 60px;
	}
}

.wlre-gallery__back {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-4) 0;
	color: var(--wlre-color-text-900);
	text-decoration: none;
	margin: 0;
}

.wlre-gallery__back:hover {
	color: var(--wlre-color-accent-500);
}

.wlre-gallery__back:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Figma (node 6124:235957): container 1320×522. Left column 868px,
 * right column 440px, 12px gap. We preserve those proportions via fr
 * units and pin the container's aspect ratio so *both* columns always
 * share the same height — no dead space below the main image. */
.wlre-gallery__grid {
	display: grid;
	grid-template-columns: 868fr 440fr;
	gap: var(--wlre-space-12);
	aspect-ratio: 1320 / 522;
	/* Prevent the grid from exceeding a sane max height on huge
	 * viewports (1440+): we cap at the Figma-canonical 522px. */
	max-height: 522px;
}

/* Single-column fallback when a property has no extra gallery images.
 * Canonical Figma always shows 3 thumbs; this keeps the 0-thumb case
 * from leaving an empty right column. Still uses the main-image aspect
 * so the hero isn't squashed. */
.wlre-gallery__grid--single {
	grid-template-columns: 1fr;
	aspect-ratio: 868 / 522;
	max-height: 522px;
}

.wlre-gallery__main {
	position: relative;
	border-radius: var(--wlre-radius-lg);
	overflow: hidden;
	/* Fills its grid cell — the grid's aspect-ratio controls total height. */
	height: 100%;
	min-height: 0;
}

/* Two-layer cross-fade for the main hero image. Both <img> elements fill
 * the container; only the `.is-visible` one is opaque. JS primes the
 * hidden layer with the next image, then flips the classes so the new
 * image eases in over 380ms — a "serene" swap, no flash of blank space. */
.wlre-gallery__main .wlre-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.42s cubic-bezier(0.33, 0, 0.25, 1);
	will-change: opacity;
}
.wlre-gallery__main .wlre-gallery__img.is-visible {
	opacity: 1;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.wlre-gallery__main .wlre-gallery__img {
		transition-duration: 0.01ms;
	}
}

.wlre-gallery__all-btn {
	position: absolute;
	bottom: var(--wlre-space-20);
	left: var(--wlre-space-20);
	font-size: 14px;
	height: 44px;
}

.wlre-gallery__mobile-nav {
	display: none;
}

/* Thumbnail column — every gallery photo renders here except the one
 * currently showing as the main image (that one gets `.is-current-main`
 * and collapses smoothly via the transition below). The column is
 * scroll-snapping vertically so the user can swipe/wheel through the
 * full set when the property has more than 3 photos.
 */
.wlre-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
	/* Pin the column height to the grid row so ~3 fixed-height thumbs
	 * show above the fold; the rest are accessible via scroll. */
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
	/* Native scrollbar is suppressed globally (global.css). Scrolling
	 * still works via wheel/touch/drag/keyboard. Side padding keeps
	 * focus rings from clipping against the column edge. */
	padding-inline: 2px;
	margin-inline: -2px;
}

.wlre-gallery__thumb {
	/* Fixed one-third slot so three thumbs fill the column cleanly;
	 * additional thumbs scroll into view. The `flex: 0 0 …` keeps
	 * height locked so collapsing `.is-current-main` doesn't ripple
	 * height changes to neighbours — only the collapsed item animates
	 * its max-height, and flex/gap reflows smoothly around it. */
	flex: 0 0 auto;
	block-size: calc((100% - 2 * var(--wlre-space-12)) / 3);
	max-block-size: calc((100% - 2 * var(--wlre-space-12)) / 3);
	min-block-size: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	border-radius: var(--wlre-radius-lg);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	opacity: 1;
	transform: scale(1);
	scroll-snap-align: start;
	/* Transition max-height + margin so `.is-current-main` collapses
	 * smoothly and neighbours reflow each frame as the layout changes.
	 * Opacity + transform add a subtle "lift" on enter/exit. */
	transition:
		max-block-size 0.45s cubic-bezier(0.33, 0, 0.25, 1),
		block-size 0.45s cubic-bezier(0.33, 0, 0.25, 1),
		margin-block-end 0.45s cubic-bezier(0.33, 0, 0.25, 1),
		opacity 0.3s ease,
		transform 0.35s cubic-bezier(0.33, 0, 0.25, 1),
		box-shadow 0.25s ease;
}
.wlre-gallery__thumb:hover {
	transform: scale(1.015);
	box-shadow: 0 6px 16px rgba(10, 36, 56, 0.12);
}
.wlre-gallery__thumb:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

/* The thumb matching `.wlre-gallery__main[data-current-index]` —
 * collapsed to 0 height with the trailing flex gap cancelled so the
 * remaining thumbs flow together seamlessly. The negative
 * margin-block-end eats the 12px gap between the collapsed item and
 * the next sibling, giving us a clean "removed from the list" effect
 * without removing the DOM node. When the main advances to another
 * photo, this class moves to the new thumb and the previous one
 * smoothly expands back into view. */
.wlre-gallery__thumb.is-current-main {
	block-size: 0;
	max-block-size: 0;
	margin-block-end: calc(-1 * var(--wlre-space-12));
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
	visibility: hidden;
}

.wlre-gallery__thumb .wlre-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wlre-gallery__placeholder {
	width: 100%;
	height: 100%;
	background: var(--wlre-color-brand-900);
}

/* === Two-Column Layout === */
.wlre-property-detail {
	background: var(--wlre-color-white);
	padding: var(--wlre-space-40) 0 var(--wlre-space-80);
}

.wlre-property-detail__layout {
	display: grid;
	grid-template-columns: 1fr 404px;
	gap: var(--wlre-space-48);
	align-items: start;
}

/* Sidebar must stretch to match the main column height so position:sticky
 * has a tall enough containing block to scroll within. Without this the
 * <aside> is only as tall as the sidebar card itself and the sticky never
 * moves. Sticky stops at the bottom of <aside>, i.e. just before the
 * "Similar Properties" section — exactly the desired scroll boundary. */
.wlre-property-detail__sidebar {
	align-self: stretch;
}

/* === Sidebar Sticky === */
.wlre-pd-sidebar-sticky {
	position: sticky;
	top: var(--wlre-space-100); /* below fixed header */
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-24);
}

/* === Header (Price + Title + Specs) === */
.wlre-pd-header {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
	margin-bottom: var(--wlre-space-20);
}

.wlre-pd-header__price-block {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-24);
}

.wlre-pd-header__price {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 36px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* "/month" suffix on rental prices — same weight and size as the amount,
 * separated by a single space (Figma: "€ 900 /mese"). */
.wlre-pd-header__price-period {
	margin-inline-start: 0.25em;
}

.wlre-pd-header__title-row {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-4);
}

.wlre-pd-header__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-pd-header__location-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-4) 0;
	color: var(--wlre-color-text-900);
	text-decoration: none;
	align-self: flex-start;
}

.wlre-pd-header__location-link:hover {
	color: var(--wlre-color-accent-500);
}

/* Icon wrappers: location at 20×20 (Figma button-link spec), spec/time at 16×16. */
.wlre-gallery__back-icon,
.wlre-pd-header__loc-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.wlre-pd-header__spec-icon,
.wlre-pd-header__time-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.wlre-pd-header__loc-icon svg,
.wlre-pd-header__spec-icon svg,
.wlre-pd-header__time-icon svg {
	width: 100%;
	height: 100%;
}

/* Specs row */
.wlre-pd-header__specs {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-pd-header__spec {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

.wlre-pd-header__spec-group {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

/* .wlre-pd-header__divider — uses global .wlre-spec-divider utility */

.wlre-pd-header__reference {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600, #666);
	margin: 0;
}

.wlre-pd-header__updated {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* === Sections === */
.wlre-pd-section {
	margin-bottom: 0;
}

.wlre-pd-section__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0 0 var(--wlre-space-20);
}

.wlre-pd-divider {
	border: none;
	border-top: 1px solid var(--wlre-color-neutral-200);
	margin: var(--wlre-space-40) 0;
}

/* === Description — Figma 6020:88798. Paragraphs share the 20px rhythm
 * of the surrounding heading block so the column reads as one cohesive
 * unit instead of visually detaching at the first <p>. === */
.wlre-pd-description {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-pd-description p {
	margin: 0 0 var(--wlre-space-20);
}
.wlre-pd-description p:last-child {
	margin-bottom: 0;
}

/* === Features — Figma 6043:116578 ===
 * Attribute cards in a 2-column grid. Each card: 0.5px neutral border,
 * 12px radius, 16px padding, 16px gap between the 24px icon and the
 * two-line text stack (16px bold label + 14px grey value). No tinted
 * icon circle; the icon sits naked on the card background. */
.wlre-pd-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: var(--wlre-space-20);
	column-gap: var(--wlre-space-12);
}

.wlre-pd-feature-card {
	display: flex;
	align-items: flex-start;
	gap: var(--wlre-space-16);
	padding: var(--wlre-space-16);
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: 12px;
	overflow: hidden;
}

.wlre-pd-feature-card__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: var(--wlre-color-text-900);
	flex-shrink: 0;
}
.wlre-pd-feature-card__icon svg {
	width: 100%;
	height: 100%;
}

.wlre-pd-feature-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-4);
	min-width: 0;
}

.wlre-pd-feature-card__label {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-pd-feature-card__value {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wlre-pd-features__toggle {
	margin-top: var(--wlre-space-20);
	font-size: 14px;
	border: 1px solid var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-sm);
	padding: var(--wlre-space-12) var(--wlre-space-24);
	align-self: flex-start;
}

.wlre-pd-features__expanded {
	margin-top: var(--wlre-space-20);
}

/* === Surface Details — Figma node 6045:117860 ==========================
 * Two-column bordered card grid. Each card: 0.5px Grey-4 (#D0D0D0) border,
 * 12px radius, 16px padding; label (14px semibold grey #666, leading-1.2)
 * stacked above value (18px bold navy, leading-1.48). The Figma layout
 * uses `flex items-start` on the card — labels left-align naturally.
 */
.wlre-pd-surface-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-12);
}

.wlre-pd-surface-card {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-16);
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: 12px;
}

.wlre-pd-surface-card__label {
	font-family: var(--wlre-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wlre-color-neutral-600, #666);
}

.wlre-pd-surface-card__value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

/* === Location — Figma node 6045:116618 =================================
 * Map fills the full 788px frame (380px tall, 20px radius). A compact
 * white info card is absolutely overlaid on the right side, centered
 * vertically-ish (Figma: ~42.8% wide, ~145px from top → bottom-right
 * feeling). Info card has a light-green (#F3FAF4) pin chip, city title,
 * address line, and a "View in map →" link styled as a right-aligned
 * Real-Estate Button-Link with only the arrow-forward icon.
 */
.wlre-pd-location {
	/* Grid overlay — both map and info card share the same cell so the
	 * card sits on top of the map. The row grows to the taller of the two,
	 * so a multi-line address never clips out of the container. */
	display: grid;
	isolation: isolate;
}

.wlre-pd-location__map {
	grid-area: 1 / 1;
	align-self: stretch;
	width: 100%;
	min-height: 380px;
	background: var(--wlre-color-surface-50);
	border-radius: var(--wlre-radius-20);
	overflow: hidden;
	/* Leaflet panes run up to z-index 700; the isolation on the parent
	 * (`.wlre-pd-location`) scopes that stacking context so the info
	 * card can safely overlap. */
	position: relative;
	z-index: 0;
}

.wlre-pd-location__map--static {
	background-image:
		var(--wlre-pd-static-map),
		linear-gradient(135deg, #f3faf4 0%, #f7fbff 42%, #eef6f5 100%);
	background-size: cover;
	background-position: center;
}

.wlre-pd-location__info {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	margin: var(--wlre-space-16);
	background: var(--wlre-color-white);
	border-radius: 16px;
	padding: var(--wlre-space-24);
	width: 42.78%;
	max-width: 340px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
	box-shadow: none;
	z-index: 1;
}

/* Pin chip — Figma fills with `New UI/Semantic/Success 2` (#F3FAF4),
 * pads 13px, rounds to a pill. Icon color uses Teal Dark #008D84. */
.wlre-pd-location__icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #f3faf4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wlre-pd-location__icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: #008d84;
}

.wlre-pd-location__icon svg {
	width: 100%;
	height: 100%;
}

.wlre-pd-location__city {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-pd-location__address {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600, #666);
	margin: 0;
}

/* "View in map" — opens Google Maps in a new tab. Styled as a
 * Real Estate Button-Link M (no surface, right-icon only). */
.wlre-pd-location__view-map {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: 4px 0;
	align-self: flex-start;
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	text-decoration: none;
	transition: color 0.18s ease;
}
.wlre-pd-location__view-map:hover,
.wlre-pd-location__view-map:focus-visible {
	color: #008d84;
}
.wlre-pd-location__view-map-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.wlre-pd-location__view-map-icon svg {
	width: 100%;
	height: 100%;
}

/* === Brochure CTA — Figma node 6238:160648 ===
 * Dark navy card with a subtle navy→aqua gradient, white heading split
 * (regular + Tiffany accent), white outline-style CTA with download icon.
 */
.wlre-pd-brochure {
	background: linear-gradient(179.27deg, var(--wlre-color-brand-900) 37%, var(--wlre-color-accent-500) 286%);
	border-radius: var(--wlre-radius-20);
	padding: var(--wlre-space-32);
	margin: var(--wlre-space-40) 0;
	color: var(--wlre-color-white);
}

.wlre-pd-brochure__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-24);
}

.wlre-pd-brochure__text {
	min-width: 0;
}

.wlre-pd-brochure__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	color: var(--wlre-color-white);
	margin: 0 0 var(--wlre-space-8);
}
.wlre-pd-brochure__heading-accent {
	color: var(--wlre-color-accent-500);
}

.wlre-pd-brochure__desc {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	color: var(--wlre-color-white);
	opacity: 0.88;
	margin: 0;
}

/* White button with navy text + download icon — Figma spec: 220×50,
 * 8px radius, 24px/16px padding, 14px Label-M bold text. Overrides the
 * .wlre-btn base inside this dark-gradient card. */
.wlre-pd-brochure__btn {
	flex-shrink: 0;
	width: 220px;
	height: 50px;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-16) var(--wlre-space-24);
	border-radius: 8px;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.48;
}
.wlre-pd-brochure__btn:hover,
.wlre-pd-brochure__btn:focus-visible {
	background: var(--wlre-color-surface-50);
	color: var(--wlre-color-text-900);
	box-shadow: 0 8px 16px rgba(10, 36, 56, 0.25);
}

.wlre-pd-brochure__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.wlre-pd-brochure__icon svg {
	width: 100%;
	height: 100%;
}

/* === Room Gallery — Figma node 6045:118159 =============================
 * Two-row mosaic on desktop: top row = 2 big tiles (span 3/6 each),
 * bottom row = 3 smaller tiles (span 2/6 each). All tiles are 220px
 * tall with 12px gaps and 12px radius. The last bottom tile carries
 * a dark 70% overlay + "+N photos" CTA when the gallery has >5 items.
 */
.wlre-pd-room-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 220px;
	gap: var(--wlre-space-12);
}

.wlre-pd-room-gallery__item {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.28s cubic-bezier(0.33, 0, 0.25, 1);
}

.wlre-pd-room-gallery__item:hover,
.wlre-pd-room-gallery__item:focus-visible {
	outline: none;
	transform: translateY(-2px);
}

/* Top-row tiles (1, 2) span half the grid; bottom-row tiles (3, 4, 5)
 * span a third. When fewer than 5 images exist, `grid-auto-flow: dense`
 * isn't needed — tiles just flow and fill available cells. */
.wlre-pd-room-gallery__item:nth-child(-n+2) {
	grid-column: span 3;
}
.wlre-pd-room-gallery__item:nth-child(n+3) {
	grid-column: span 2;
}

.wlre-pd-room-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* "+N photos" overlay on the final tile — Figma fills the tile with
 * a #1A1A18 @ 70% alpha darkening, centers a `+ N photos` label. */
.wlre-pd-room-gallery__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 24, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlre-pd-room-gallery__overlay-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-4) var(--wlre-space-8);
	color: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.48;
}

.wlre-pd-room-gallery__overlay-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
}

.wlre-pd-room-gallery__overlay-icon svg {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

/* === Enquiry Card === */
.wlre-pd-enquiry-card {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
	padding: var(--wlre-space-32);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wlre-space-24);
}

/* Agent info */
.wlre-pd-agent {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
	width: 100%;
}

.wlre-pd-agent__photo {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.wlre-pd-agent__photo--placeholder {
	background: var(--wlre-color-surface-50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--wlre-color-neutral-600);
}

.wlre-pd-agent__name {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-pd-agent__role,
.wlre-pd-agent__langs {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* Action buttons */
.wlre-pd-actions {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
	width: 100%;
}

/* Grid (not flex) so all 4 row buttons land at IDENTICAL widths
 * regardless of the natural width of their labels. With flex: 1,
 * "Scarica la brochure" was pushing wider than its row siblings
 * because flex respects min-content; grid 1fr|1fr enforces equal
 * column widths and lets us min-width: 0 the children. */
.wlre-pd-actions__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-12);
}

.wlre-pd-actions__row > * {
	min-width: 0;
}

/* Full-width action buttons (Visit, Download Brochure) are 50 tall;
   Save/WhatsApp row buttons bump to 52. Base styles come from .wlre-btn.
   Font-size override matches Figma 6808:350582 Label M (14px Lato Bold)
   instead of .wlre-btn's default 16px. Icon-text gap of 8px matches the
   effective Figma spacing (4px outer flex gap + 4px text-wrapper padding).
   `white-space: nowrap` matches Figma's `whitespace-nowrap` on every
   button label in this card. On mobile the row collapses to a column
   (see responsive override below) and the buttons go full-width, so
   nowrap is always safe. */
.wlre-pd-actions__btn {
	height: 50px;
	gap: var(--wlre-space-8);
	font-size: 14px;
	white-space: nowrap;
}

/* Row buttons (phone/whatsapp/save/brochure) use 16px horizontal padding
   per Figma instead of .wlre-btn--outline's default 24px. The 8px
   reclaimed on each side gives long labels like "Scarica la brochure"
   the breathing room they need without overflowing the column. */
.wlre-pd-actions__row > .wlre-pd-actions__btn {
	height: 52px;
	padding-inline: var(--wlre-space-16);
}

.wlre-pd-actions__btn--full {
	width: 100%;
}

.wlre-pd-actions__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.wlre-pd-actions__icon svg {
	width: 100%;
	height: 100%;
}

/* Share link — button-link layout; typography rides .wlre-label-m. */
.wlre-pd-share {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-4) 0;
	color: var(--wlre-color-text-900);
	text-decoration: none;
}

.wlre-pd-share:hover {
	color: var(--wlre-color-accent-500);
}

.wlre-pd-share__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.wlre-pd-share__icon svg {
	width: 100%;
	height: 100%;
}

/* === Mortgage CTA Card — Figma node 6124:235974 (cream variant) ============
 * Re-skinned per Figma 6124:235995: cream panel (#FAF8F4) with navy heading +
 * body + outlined navy CTA. Replaces the deep-navy variant from an earlier
 * iteration. Padding follows Figma's `pb-24 pt-32 px-32` (32/32/24/32) so the
 * button nuzzles the bottom edge a little tighter than the heading does the
 * top edge — aesthetically balanced because heading type sits higher than
 * button baseline. */
.wlre-pd-mortgage-cta {
	background: var(--wlre-color-surface-cream);
	color: var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-20);
	padding: var(--wlre-space-32) var(--wlre-space-32) var(--wlre-space-24);
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
}

.wlre-pd-mortgage-cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
}

.wlre-pd-mortgage-cta__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-pd-mortgage-cta__text {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* Outlined pill — 56px tall per Figma (larger than the 50/52 inside the Actions
 * card because it's the terminal call-to-action). Width:100% + align:center via
 * the flex column above. */
.wlre-pd-mortgage-cta__btn {
	height: 56px;
	font-size: 16px;
	width: 100%;
}

/* Branded WhatsApp icon: its SVG ships with its own gradient + white fills.
 * `color: initial` on the wrapper prevents the button's `color` cascade from
 * being read as currentColor by any descendant <path fill="currentColor"/>.
 * All three paths in whatsapp-brand.svg use hardcoded colours, but this is a
 * belt-and-braces guard against future edits that accidentally add a
 * currentColor path. */
.wlre-pd-actions__icon--brand {
	color: initial;
}

/* Similar properties — Figma 6808:350607. The property-detail instance
 * uses tighter desktop section rhythm than the shared homepage carousel:
 * 40px top, 80px bottom, H2 at 36px, and a flush 510px card track. */
.wlre-carousel-section--property-related {
	padding-block: var(--wlre-space-40) var(--wlre-space-80);
}

.wlre-carousel-section--property-related .wlre-carousel-header {
	align-items: center;
	margin-bottom: var(--wlre-space-24);
}

.wlre-carousel-section--property-related .wlre-carousel-header__title {
	font-size: 36px;
	text-align: left;
}

.wlre-carousel-section--property-related .wlre-carousel-track {
	padding-block: 0 var(--wlre-space-32);
}

.wlre-carousel-section--property-related .wlre-carousel-wrap::before,
.wlre-carousel-section--property-related .wlre-carousel-wrap::after {
	top: -14px;
	bottom: -48px;
	width: 57px;
}

/* ==========================================================================
   Lightbox — Figma nodes 6079:49712 (desktop) + 6079:49734 (mobile)

   White canvas, image card with rounded corners, sleek 40px arrows at the
   image edges, and a horizontally-scrollable thumb strip below. The slide-
   fade transition between images is driven by gallery.js (Web Animations
   API); the CSS here only declares geometry and the `will-change` hint.
   ========================================================================== */

.wlre-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--wlre-color-white);
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: auto;
	padding: 80px var(--wlre-space-40) var(--wlre-space-32);
}

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

/* Inner content frame — caps width at the Figma 1240px (image card
 * width) but fills the viewport on smaller screens. The frame stacks
 * the image stage above the thumb strip in a single column. */
.wlre-lightbox__frame {
	position: relative;
	width: 100%;
	max-width: 1240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wlre-space-20);
	margin: 0 auto;
}

/* Category segmented control — Figma 6079:49714, 166×48 with 4px
 * padding. The active side uses the teal 2px outline + tinted white fill
 * from the reference node; dimensions stay fixed so switching Interior /
 * Exterior never shifts the image stage. */
.wlre-lightbox__filters {
	width: 166px;
	height: 48px;
	display: flex;
	align-items: stretch;
	gap: 2px;
	padding: 4px;
	background: #FAF8F4;
	border-radius: 12px;
	box-sizing: border-box;
}

.wlre-lightbox__filter {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 2px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, font-weight 0.18s ease;
}

.wlre-lightbox__filter.is-active {
	border-color: #008D84;
	background: linear-gradient(0deg, rgba(129, 216, 208, 0.12), rgba(129, 216, 208, 0.12)), var(--wlre-color-white);
	font-weight: 700;
}

.wlre-lightbox__filter:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

/* Close — frosted-glass pill (Figma 6770:263689). ID selector beats any WP
 * global button reset. */
#wlre-lightbox .wlre-lightbox__close {
	position: absolute;
	top: -60px;
	right: -30px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	background: #f5f5f5;
	backdrop-filter: blur(8.7px);
	-webkit-backdrop-filter: blur(8.7px);
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	outline: none;
	border-radius: 13px;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.09;
	cursor: pointer;
	z-index: 5;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

#wlre-lightbox .wlre-lightbox__close:hover {
	background: rgba(245, 245, 245, 1);
}

/* Stage — wraps the image and the two nav arrows. Constrains the image to
 * the viewport (minus thumbs/close padding) while preserving the Figma
 * 20px-rounded corners. The fixed aspect-ratio of the visible image is
 * controlled by `object-fit: contain` on the <img>, so the stage adapts
 * to portrait / landscape gracefully. */
.wlre-lightbox__stage {
	position: relative;
	width: 100%;
	/* Cap height so the thumb strip + close button still fit on common
	 * laptop viewports. The Figma desktop height is 671px on a 1440×
	 * canvas; we compute viewport-relative so phones / large monitors
	 * each get a sensible image area. */
	height: clamp(320px, calc(100vh - 292px), 671px);
	border-radius: var(--wlre-radius-20);
	overflow: hidden;
	background: var(--wlre-color-surface-cream);
	isolation: isolate; /* scopes the animated <img> stacking context */
}

.wlre-lightbox__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* `will-change` hints the compositor to promote the img to its own
	 * layer before the first slide-fade fires — otherwise the first
	 * navigation has a micro-stall as the browser allocates a layer. */
	will-change: transform, opacity;
	transform: translateZ(0);
}

/* Nav arrows — 40×40 chips at the image left/right edges, vertically
 * centred. Per Figma, prev uses translucent-white (60%) and next uses
 * solid white. Both go to fully-opaque on hover for affordance. The 8px
 * radius matches Figma's `rounded-[8px]`. */
.wlre-lightbox__prev,
.wlre-lightbox__next {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
	border: none;
	color: var(--wlre-color-text-900);
	cursor: pointer;
	border-radius: 8px;
	z-index: 4;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, transform 0.18s ease;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.wlre-lightbox__prev {
	left: var(--wlre-space-16);
	background: rgba(255, 255, 255, 0.6);
}

.wlre-lightbox__next {
	right: var(--wlre-space-16);
	background: var(--wlre-color-white);
}

.wlre-lightbox__prev:hover,
.wlre-lightbox__next:hover {
	background: var(--wlre-color-white);
}

.wlre-lightbox__prev:active,
.wlre-lightbox__next:active {
	transform: translateY(-50%) scale(0.92);
}

.wlre-lightbox__prev:focus-visible,
.wlre-lightbox__next:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

/* Reduced-motion users get the state change without the slide — JS also
 * checks `prefers-reduced-motion` and falls back to instant src swaps,
 * but this CSS ensures any in-flight transforms snap to neutral. */
@media (prefers-reduced-motion: reduce) {
	.wlre-lightbox__img {
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	.wlre-lightbox__prev:active,
	.wlre-lightbox__next:active {
		transform: translateY(-50%);
	}
}

/* === Thumb strip ====================================================
 * Horizontally scrollable when total count exceeds visible row width.
 * The active thumb is slightly taller (Figma 81 vs 72) and gets a 2px
 * navy border — the size step prevents the active state from shifting
 * neighbours since taller pushes its own row but the row is centred.
 * `flex-shrink: 0` keeps each thumb at its declared size during scroll. */
.wlre-lightbox__thumbs {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	padding: 4px 8px; /* room for the 2px active border without clipping */
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	/* Hide the scrollbar — global suppression is already in place but
	 * declare locally so the rule survives any future global change. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.wlre-lightbox__thumbs::-webkit-scrollbar { display: none; }

.wlre-lightbox__thumb {
	flex-shrink: 0;
	width: 109px;
	height: 72px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: center;
	transition: width 0.22s ease, height 0.22s ease, box-shadow 0.18s ease, opacity 0.18s ease;
	opacity: 0.7;
	position: relative;
}

.wlre-lightbox__thumb[hidden] {
	display: none;
}

.wlre-lightbox__thumb:hover {
	opacity: 1;
}

.wlre-lightbox__thumb:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

.wlre-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

/* Active thumb — slightly larger (Figma 123×81 vs 109×72) with a 2px
 * navy outline. We use `box-shadow: inset` instead of `border` so the
 * size doesn't change between states (otherwise the row jitters as
 * thumbs grow/shrink mid-flow). */
.wlre-lightbox__thumb.is-active {
	width: 123px;
	height: 81px;
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--wlre-color-text-900);
}

/* Counter — visually hidden but available for screen readers. The Figma
 * design omits the numeric counter (the thumb strip is the position
 * indicator), but ATs benefit from the live region announcing the
 * current image when navigation happens. */
.wlre-lightbox__counter {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* === Mobile lightbox — Figma 6770:264019 ============================
 * Full-bleed white sheet. Close icon is fixed at top-right, image stage
 * flexes to fill the space between header zone and thumb strip. */
@media (max-width: 767px) {
	/* Remove outer padding — frame handles its own insets. */
	.wlre-lightbox {
		flex-direction: column;
		padding: 0;
		align-items: stretch;
	}

	/* Frame fills the viewport, padding reserves space for the fixed close
	 * button (101px top = 43px status bar + 58px close zone) and the 24px
	 * safe bottom. Gap 20px between stage and thumb strip per Figma. */
	.wlre-lightbox__frame {
		flex: 1;
		min-height: 0;
		padding: 101px 16px 24px;
		gap: 20px;
	}

	/* Close button — fixed so it sits above the frame's top padding, at the
	 * Figma position (63px from top, 16px from right). Bare icon, no chrome. */
	#wlre-lightbox .wlre-lightbox__close {
		position: fixed;
		top: 63px;
		right: 16px;
		padding: 0;
		width: 24px;
		height: 24px;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		gap: 0;
		box-shadow: none;
	}

	#wlre-lightbox .wlre-lightbox__close svg {
		width: 24px;
		height: 24px;
	}

	#wlre-lightbox .wlre-lightbox__close:hover {
		background: none;
	}

	.wlre-lightbox__close-label {
		display: none;
	}

	/* Stage grows to fill all space between top padding and thumb strip. */
	.wlre-lightbox__stage {
		flex: 1 1 0;
		min-height: 0;
		height: auto;
		border-radius: 16px;
	}

	.wlre-lightbox__prev,
	.wlre-lightbox__next {
		width: 32px;
		height: 32px;
	}

	.wlre-lightbox__prev svg,
	.wlre-lightbox__next svg {
		width: 18px;
		height: 18px;
	}

	/* Thumb strip — fixed at bottom of frame, same sizes as Figma. */
	.wlre-lightbox__thumbs {
		flex-shrink: 0;
	}

	.wlre-lightbox__thumb {
		width: 80px;
		height: 52px;
	}

	.wlre-lightbox__thumb.is-active {
		width: 90px;
		height: 59px;
	}
}

/* === Mobile-only content-column elements (Figma 6808:352455-458, 6808:352501)
 * Hidden on desktop; CSS surfaces them at ≤767px and hides the sidebar instead
 * so all sidebar content is distributed into the linear mobile flow. */
.wlre-pd-mobile-top-ctas,
.wlre-pd-mobile-agent {
	display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
	.wlre-property-detail__layout {
		grid-template-columns: 1fr;
		gap: var(--wlre-space-32);
	}

	.wlre-pd-sidebar-sticky {
		position: static;
	}
}

@media (max-width: 767px) {
	.wlre-gallery {
		padding-block: var(--wlre-space-16) var(--wlre-space-12);
	}

	.wlre-gallery .wlre-container {
		padding-inline: var(--wlre-space-16);
	}

	.wlre-gallery__header-row {
		margin-block-end: 18px;
	}

	.wlre-gallery__grid {
		display: block;
		aspect-ratio: auto;
		max-height: none;
	}

	.wlre-gallery__main {
		aspect-ratio: 343 / 280;
		height: auto;
	}

	.wlre-gallery__thumbs {
		display: none;
	}

	.wlre-gallery__all-btn {
		bottom: var(--wlre-space-12);
		left: var(--wlre-space-16);
	}

	.wlre-gallery__mobile-nav {
		position: absolute;
		top: 50%;
		z-index: 4;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid rgba(10, 36, 56, 0.24);
		border-radius: var(--wlre-radius-sm);
		background: rgba(255, 255, 255, 0.86);
		color: var(--wlre-color-text-900);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transform: translateY(-50%);
		box-shadow: 0 4px 10px rgba(10, 36, 56, 0.12);
		cursor: pointer;
	}

	.wlre-gallery__mobile-nav--prev {
		left: var(--wlre-space-12);
	}

	.wlre-gallery__mobile-nav--next {
		right: var(--wlre-space-12);
	}

	.wlre-gallery__mobile-nav svg {
		width: 24px;
		height: 24px;
	}

	.wlre-pd-header__price {
		font-size: 28px;
	}

	/* Room gallery: keep the same 6-col mosaic as desktop at mobile size.
	 * Figma 6808:352540 shows 2 top tiles + 3 bottom tiles — matches the
	 * nth-child span rules already set on the grid items. Row height shrinks
	 * from 220px (desktop) to 160px to fit the 375px canvas. */
	.wlre-pd-room-gallery {
		grid-auto-rows: 160px;
	}

	.wlre-pd-features__grid,
	.wlre-pd-surface-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wlre-space-12);
	}

	.wlre-pd-features__expanded {
		margin-top: var(--wlre-space-12);
	}

	.wlre-pd-feature-card {
		gap: var(--wlre-space-12);
		padding: var(--wlre-space-12);
	}

	.wlre-pd-feature-card__icon {
		width: 20px;
		height: 20px;
	}

	.wlre-pd-feature-card__label {
		font-size: 14px;
	}

	.wlre-pd-feature-card__value {
		font-size: 13px;
		white-space: normal;
	}
	.wlre-pd-brochure__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.wlre-pd-location__map {
		min-height: 360px;
	}

	.wlre-pd-location__info {
		/* Keep grid overlay — card sits on top of map at bottom-left.
		 * Desktop is bottom-right (justify-self: end); mobile goes full-width
		 * minus 32px margin so it reads as a card resting on the map. */
		align-self: end;
		justify-self: stretch;
		margin: var(--wlre-space-16);
		width: auto;
		max-width: none;
		min-width: 0;
		border-radius: 16px;
		padding: var(--wlre-space-20);
		box-shadow: var(--wlre-shadow-card);
	}

	/* Action-row flips to column on mobile — override flex:1 so each button
	 * keeps its natural height (52 / 50). Without this, flex:1 in a
	 * column-flex parent collapses the buttons to ~26px. */
	.wlre-pd-actions__row {
		flex-direction: column;
	}

	.wlre-pd-actions__row > .wlre-pd-actions__btn {
		flex: 0 0 auto;
		width: 100%;
	}

	.wlre-gallery__back,
	.wlre-gallery__share,
	.wlre-pd-header__location-link,
	.wlre-pd-share {
		min-height: var(--wlre-tap-target);
		padding-block: var(--wlre-space-8);
	}

	/* Sidebar hidden — its content is distributed into the main column via
	 * .wlre-pd-mobile-top-ctas and .wlre-pd-mobile-agent below. */
	.wlre-property-detail__sidebar {
		display: none;
	}

	/* Mobile-only Save + Brochure + Mortgage CTA strip */
	.wlre-pd-mobile-top-ctas {
		display: flex;
		flex-direction: column;
		gap: var(--wlre-space-20);
		margin-bottom: var(--wlre-space-20);
	}

	.wlre-pd-mobile-top-ctas__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wlre-space-12);
	}

	.wlre-pd-mobile-top-ctas__actions .wlre-pd-actions__btn {
		height: 52px;
		padding-inline: var(--wlre-space-12);
		font-size: 14px;
		white-space: nowrap;
	}

	/* Mobile-only agent card (between amenities and surface details) */
	.wlre-pd-mobile-agent {
		display: block;
	}

	.wlre-pd-mobile-agent .wlre-pd-agent {
		display: flex;
		align-items: center;
		gap: var(--wlre-space-12);
	}
}

/* Note: inline enquiry-form styles (`.wlre-pd-enquiry` / `.wlre-pd-enquiry__subtitle`)
 * were removed alongside the inline form — Figma 6020:88781 keeps Request-a-Visit
 * exclusively in the sidebar-modal flow. The sidebar agent/actions card still uses
 * `.wlre-pd-enquiry-card` above; only the content-column section styles were dropped. */

/* ==========================================================================
 * Property Detail layout variants (Figma 6238-156428 / 6238-158182 / 6124-235995)
 *
 * Default = canonical Option #1 (agent card + action buttons in sidebar).
 *
 * Body-class opt-ins toggled by ?pd_layout=<variant> — see setup.php
 * body_class filter. Each variant below is a CSS-only override on the
 * standard sidebar structure.
 * ========================================================================== */

/* Sidebar-form is hidden unless form-first layout is active. */
.wlre-pd-sidebar-form {
	display: none;
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-lg);
	box-shadow: var(--wlre-shadow-card);
	padding: var(--wlre-space-24);
	margin-bottom: var(--wlre-space-24);
}

.wlre-pd-sidebar-form__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.28;
	color: var(--wlre-color-text-900);
	margin: 0 0 var(--wlre-space-8);
}

.wlre-pd-sidebar-form__subtitle {
	color: var(--wlre-color-neutral-600);
	margin: 0 0 var(--wlre-space-16);
}

.wlre-pd-sidebar-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
}

.wlre-pd-sidebar-form__submit {
	width: 100%;
	margin-top: var(--wlre-space-4);
}

/* === form-first (Figma 6238-158182) ==================================== */
.wlre-pd--layout-form-first .wlre-pd-sidebar-form {
	display: block;
}

.wlre-pd--layout-form-first .wlre-pd-agent {
	display: none;
}

/* === buttons-only (Figma 6124-235995) ================================== */
.wlre-pd--layout-buttons-only .wlre-pd-agent {
	display: none;
}

/* === agent-compact (Figma 6238-156428) ================================= */
.wlre-pd--layout-agent-compact .wlre-pd-agent {
	/* Condense agent block: shrink to a single-row photo + name, no langs. */
	padding: var(--wlre-space-12);
	gap: var(--wlre-space-8);
}

.wlre-pd--layout-agent-compact .wlre-pd-agent__photo {
	width: 40px;
	height: 40px;
}

.wlre-pd--layout-agent-compact .wlre-pd-agent__role,
.wlre-pd--layout-agent-compact .wlre-pd-agent__langs {
	display: none;
}

.wlre-pd--layout-agent-compact .wlre-pd-sidebar-sticky {
	/* Slightly higher sticky offset so compact card sits clear of header. */
	top: var(--wlre-space-24);
}

/* === Features — rich card variant (Figma 6043-116578) ==================
 * Rich cards: icon + title + optional description row, 388×81 per canonical.
 * Falls back to icon + label when no description is set (backward compat).
 */
.wlre-pd-feature-card--rich {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: flex-start;
	gap: var(--wlre-space-12);
	padding: var(--wlre-space-16);
	min-height: 81px;
	background: var(--wlre-color-white);
	border: 1px solid var(--wlre-color-neutral-200);
	border-radius: var(--wlre-radius-md);
}

.wlre-pd-feature-card--rich .wlre-pd-feature-card__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wlre-color-green-50);
	color: var(--wlre-color-success-700);
	border-radius: 50%;
}

.wlre-pd-feature-card--rich .wlre-pd-feature-card__icon svg {
	width: 20px;
	height: 20px;
}

.wlre-pd-feature-card--rich .wlre-pd-feature-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wlre-pd-feature-card--rich .wlre-pd-feature-card__label {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: var(--wlre-color-text-900);
}

.wlre-pd-feature-card--rich .wlre-pd-feature-card__desc {
	font-family: var(--wlre-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--wlre-color-neutral-600);
}

/* === Amenities — Figma node 6045:117795 ================================
 * Cream panel (20px radius) wrapping a 2-column check-list. Figma spec:
 * bg #FAF8F4, 20px/24px padding, 12px gaps, 368px items → we use 1fr/1fr
 * grid so the columns stay aligned at every breakpoint. Row item is a
 * 18px check icon + 8px gap + 16px Body-L label.
 */
.wlre-pd-amenities {
	list-style: none;
	margin: 0;
	padding: var(--wlre-space-24) var(--wlre-space-20);
	background: var(--wlre-color-surface-50);
	border-radius: var(--wlre-radius-20);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-12);
}

.wlre-pd-amenities__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.48;
}

.wlre-pd-amenities__check {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wlre-color-text-900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wlre-pd-amenities__check svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 767px) {
	.wlre-pd-amenities {
		grid-template-columns: 1fr;
		padding: var(--wlre-space-20);
	}
}

/* === Header row — Back link on the left, share button on the right ==== */
.wlre-gallery__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-16);
	margin-block-end: 18px;
	flex-wrap: wrap;
}

.wlre-gallery__header-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wlre-space-16);
	margin-left: auto;
}

.wlre-gallery__share {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	padding: var(--wlre-space-4) 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wlre-color-text-900);
	text-decoration: none;
	cursor: pointer;
}

.wlre-gallery__share:hover,
.wlre-gallery__share:focus-visible {
	color: var(--wlre-color-accent-500);
}

.wlre-gallery__share:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
	border-radius: 2px;
}

.wlre-gallery__share-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.wlre-gallery__share-icon svg {
	width: 100%;
	height: 100%;
}

/* On narrow phones the header row uses a tighter gap. */
@media (max-width: 480px) {
	.wlre-gallery__header-row {
		gap: var(--wlre-space-8);
	}
}

/* === Inline Mortgage Calculator — Figma node 6046:124631 ==============
 * Compact single-column calculator embedded in the content column.
 * Cream panel (#FAF8F4), 40px padding, 12px radius, soft drop shadow.
 * Sliders use a 2px navy-on-grey rail with a 28px white knob.
 */
.wlre-pd-mortgage-section {
	padding-bottom: var(--wlre-space-12);
	/* Anchor target for the sidebar's "Calculate your Mortgage" CTA
	 * (Figma 6124:236025). The site header is ~88px; add breathing room
	 * so the calculator title isn't pressed against the header when the
	 * hash-scroll lands. Browsers respect `scroll-margin-top` natively
	 * for both anchor navigation and JS `scrollIntoView`. */
	scroll-margin-top: var(--wlre-space-32);
}

.wlre-pd-mortgage {
	background: var(--wlre-color-surface-cream);
	border-radius: 12px;
	padding: var(--wlre-space-40);
	box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-24);
}

.wlre-pd-mortgage__field {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
}

.wlre-pd-mortgage__label {
	font-family: var(--wlre-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

.wlre-pd-mortgage__input-wrap {
	position: relative;
}

.wlre-pd-mortgage__input {
	width: 100%;
	height: 52px;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-600, #666);
	border-radius: 8px;
	padding: 14px 24px;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	box-sizing: border-box;
	appearance: none;
}

.wlre-pd-mortgage__input:focus {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 1px;
	border-color: transparent;
}

/* Slider — 2px rail, navy fill up to knob, grey to the right, 28px white
 * knob with soft elevation (Figma: New UI/Elevation/1). */
.wlre-pd-mortgage__slider {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wlre-pd-mortgage__range {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		to right,
		var(--wlre-color-brand-900) 0,
		var(--wlre-color-brand-900) var(--wlre-range-progress, 20%),
		var(--wlre-color-neutral-400, #D0D0D0) var(--wlre-range-progress, 20%),
		var(--wlre-color-neutral-400, #D0D0D0) 100%
	);
	border-radius: 8px;
	outline: none;
	cursor: pointer;
	margin: 13px 0;
}

.wlre-pd-mortgage__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-500, #999);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: transform 0.12s ease;
}

.wlre-pd-mortgage__range::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-500, #999);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.wlre-pd-mortgage__range:focus-visible::-webkit-slider-thumb {
	transform: scale(1.05);
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

.wlre-pd-mortgage__range-labels {
	display: flex;
	justify-content: space-between;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

/* === Rate row — label + pills on left, +/– stepper on right ========== */
.wlre-pd-mortgage__rate-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wlre-space-16);
}

.wlre-pd-mortgage__rate-left {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
}

.wlre-pd-mortgage__rate-heading {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

.wlre-pd-mortgage__info {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--wlre-color-neutral-600);
}

.wlre-pd-mortgage__info svg {
	width: 16px;
	height: 16px;
}

.wlre-pd-mortgage__pills {
	display: inline-flex;
	gap: var(--wlre-space-8);
}

.wlre-pd-mortgage__pill {
	height: 40px;
	padding: 0 28px;
	border-radius: 52px;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #D0D0D0);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	cursor: pointer;
	/* Figma marks "Fixed rate" / "Variable rate" with `whitespace-nowrap`.
	 * Without this the flex-column rate-left wraps the labels onto two
	 * lines once the container's width drops below ~195px each, which
	 * happens whenever the stepper shares the row. */
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, font-weight 0.18s ease;
}

.wlre-pd-mortgage__pill:hover {
	background: var(--wlre-color-surface-50);
}

/* Active pill — Figma: 2px Teal Dark (#008D84) border, subtle aqua
 * 12% tint overlay, bold label. */
.wlre-pd-mortgage__pill.is-active {
	background: linear-gradient(
		90deg,
		rgba(129, 216, 208, 0.12) 0%,
		rgba(129, 216, 208, 0.12) 100%
	), var(--wlre-color-white);
	border: 2px solid #008D84;
	font-weight: 700;
}

/* Stepper: [ − ] [ 2.85% ] [ + ] — all three are 40px tall with 0.5px
 * navy borders and 8px radius, 4px gaps. Center box grows to fit. */
.wlre-pd-mortgage__stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: 235px;
}

.wlre-pd-mortgage__step {
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 8px;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-brand-900);
	color: var(--wlre-color-text-900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.wlre-pd-mortgage__step:hover {
	background: var(--wlre-color-surface-50);
}

.wlre-pd-mortgage__step-icon {
	display: none; /* hidden — we use the text glyph for compatibility */
}

.wlre-pd-mortgage__step-value {
	flex: 1 1 0;
	height: 40px;
	padding: 7px 20px;
	border-radius: 8px;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-brand-900);
	text-align: center;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	min-width: 0;
}

/* === Divider between inputs and results ============================== */
.wlre-pd-mortgage__divider {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--wlre-color-neutral-400, #D0D0D0);
	width: 100%;
}

/* === Result rows ==================================================== */
.wlre-pd-mortgage__result {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wlre-space-16);
}

.wlre-pd-mortgage__result-label {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-pd-mortgage__result-value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	text-align: right;
	white-space: nowrap;
}

.wlre-pd-mortgage__result--primary .wlre-pd-mortgage__result-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wlre-pd-mortgage__result-heading {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-pd-mortgage__result-sub {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600, #666);
}

.wlre-pd-mortgage__result-value--strong {
	font-size: 18px;
}

/* === CTA ============================================================ */
.wlre-pd-mortgage__cta {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
	align-items: flex-start;
}

.wlre-pd-mortgage__cta-btn {
	width: 338px;
	max-width: 100%;
	height: 56px;
	padding: var(--wlre-space-16) var(--wlre-space-24);
	border-radius: 8px;
	font-size: 16px;
}

.wlre-pd-mortgage__disclaimer {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600, #666);
	margin: 0;
}

/* === Mobile spec — Figma node 6126:240579 =============================
 * Card padding tightens, result text steps down to 16, stepper grows to
 * 52px (to match tap-target + Figma ratio), CTA takes full width.
 * Rate row stacks vertically. */
@media (max-width: 640px) {
	.wlre-pd-mortgage {
		padding: var(--wlre-space-24) var(--wlre-space-16);
	}
	.wlre-pd-mortgage__rate-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wlre-space-16);
	}
	.wlre-pd-mortgage__stepper {
		width: 100%;
	}
	/* Larger tap targets per Figma mobile node. */
	.wlre-pd-mortgage__step,
	.wlre-pd-mortgage__step-value {
		height: 52px;
	}
	.wlre-pd-mortgage__step-value {
		font-size: 16px;
	}
	/* Mobile typography step-down for results (Figma: Desktop/Body XL 18 →
	 * Mobile/Body XL 16, keeps the bold/regular relationship intact). */
	.wlre-pd-mortgage__result-label,
	.wlre-pd-mortgage__result-value,
	.wlre-pd-mortgage__result-heading,
	.wlre-pd-mortgage__result-value--strong {
		font-size: 16px;
	}
	/* CTA spans the full card width (Figma mobile shows full-bleed-within-
	 * card Tiffany Aqua button, no 338px max). */
	.wlre-pd-mortgage__cta-btn {
		width: 100%;
	}
}

/* ==========================================================================
 * Hero gallery video overlays + lightbox enhancements
 * Figma: 6238:156430 (gallery hero), 6079:49712 / 49734 (lightbox).
 * ========================================================================== */

/* Thumb video play overlay (Figma 11). Centered Material 'play_circle' on
 * the designated thumbnail (3rd in the grid). */
.wlre-gallery__thumb {
	position: relative;
}
.wlre-gallery__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 36, 56, 0.4);
	pointer-events: none;
	z-index: 3;
}
.wlre-gallery__thumb-play svg {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 1px 6px rgba(10, 36, 56, 0.4));
}

/* "View all photos" CTA — gain the photo_library Material icon to its left. */
.wlre-gallery__all-btn-icon {
	display: inline-flex;
	margin-inline-end: 8px;
	width: 18px;
	height: 18px;
}
.wlre-gallery__all-btn-icon svg {
	width: 100%;
	height: 100%;
}

/* MP4 video fills the stage canvas, no browser chrome. */
.wlre-lightbox__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

/* YouTube iframe fills the stage canvas. */
.wlre-lightbox__youtube {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: #000;
}

/* Lightbox video overlays — only visible when current slide is a video. */
.wlre-lightbox__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 5;
	transition: transform 0.15s, opacity 0.15s;
}
.wlre-lightbox__play:hover {
	opacity: 0.85;
	transform: translate(-50%, -50%) scale(1.06);
}
.wlre-lightbox__play svg {
	width: 100px;
	height: 100px;
}
.wlre-lightbox__play[hidden] {
	display: none;
}

/* Chevron hover-fade behavior (point 14): chevrons start invisible, fade in
 * on hover/focus or when the lightbox has been touched (mobile is-touched). */
.wlre-lightbox__prev,
.wlre-lightbox__next {
	opacity: 0;
	transition: background-color 0.2s ease, transform 0.18s ease, opacity 0.2s ease;
}
.wlre-lightbox:hover .wlre-lightbox__prev,
.wlre-lightbox:hover .wlre-lightbox__next,
.wlre-lightbox:focus-within .wlre-lightbox__prev,
.wlre-lightbox:focus-within .wlre-lightbox__next,
.wlre-lightbox.is-touched .wlre-lightbox__prev,
.wlre-lightbox.is-touched .wlre-lightbox__next,
.wlre-lightbox__prev:focus-visible,
.wlre-lightbox__next:focus-visible {
	opacity: 1;
}
@media (hover: none) {
	/* Touch devices: chevrons stay visible for tappability unless JS drives
	 * the .is-touched fade-out timer. */
	.wlre-lightbox__prev,
	.wlre-lightbox__next {
		opacity: 0.85;
	}
	.wlre-lightbox.is-touched .wlre-lightbox__prev,
	.wlre-lightbox.is-touched .wlre-lightbox__next {
		opacity: 1;
	}
}

/* === Phone-CTA reveal: matches the agent enquiry sidebar's "Call agent"
 * button. Desktop reveals the number inline; mobile renders as a tel: link. */
.wlre-pd-actions__btn--phone[aria-expanded="true"] {
	background: var(--wlre-color-brand-900);
	color: var(--wlre-color-white);
	border-color: var(--wlre-color-brand-900);
}
.wlre-pd-actions__btn--phone[aria-expanded="true"] svg {
	color: var(--wlre-color-white);
}

/* === Property-detail mobile sticky bar (point 34, Figma 6238:158220) ===
 * Three equal CTAs above the bottom-nav: Appointment / WhatsApp / Call.
 * Hidden on desktop; shown only when ≤767px. Sets the layout-side CSS
 * variable --wlre-pd-mobile-bar-height so the WhatsApp FAB stacks above. */
:root {
	--wlre-pd-mobile-bar-height: 0px;
}

.wlre-pd-mobile-bar {
	display: none;
}

@media (max-width: 767px) {
	body.single-property .wlre-bottom-nav,
	body.single.post-type-property .wlre-bottom-nav {
		display: none;
	}

	body.single-property,
	body.single.post-type-property {
		--wlre-pd-mobile-bar-height: calc(128px + var(--wlre-bottom-nav-safe-area, 24px));
		padding-bottom: var(--wlre-pd-mobile-bar-height);
	}

	.wlre-pd-mortgage-cta {
		padding: var(--wlre-space-20) var(--wlre-space-16) var(--wlre-space-16);
	}

	.wlre-pd-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		display: flex;
		flex-wrap: wrap;
		row-gap: 12px;
		column-gap: 8px;
		padding: 8px 16px calc(12px + var(--wlre-bottom-nav-safe-area, 24px));
		background: var(--wlre-color-white);
		border-top-left-radius: var(--wlre-radius-md);
		border-top-right-radius: var(--wlre-radius-md);
		box-shadow: 0 -4px 7px -1px rgba(99, 99, 99, 0.04);
	}

	.wlre-pd-mobile-bar__btn {
		flex: 1;
		min-height: 48px;
		height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 0 var(--wlre-space-16);
		border-radius: var(--wlre-radius-sm, 8px);
		font-size: 14px;
		font-weight: 700;
		font-family: var(--wlre-font-body);
		text-decoration: none;
		cursor: pointer;
		text-align: center;
	}

	.wlre-pd-mobile-bar__btn--primary {
		flex: 0 0 100%;
		min-width: 100px;
		background: var(--wlre-color-accent-500);
		color: var(--wlre-color-text-900);
		border: 0;
	}
	.wlre-pd-mobile-bar__btn--primary:hover {
		background: var(--wlre-color-accent-600);
	}

	.wlre-pd-mobile-bar__btn--outline {
		background: transparent;
		color: var(--wlre-color-text-900);
		border: 1px solid var(--wlre-color-text-900);
		flex: 1 1 calc(50% - 4px);
		min-width: 100px;
	}

	.wlre-pd-mobile-bar__icon {
		display: inline-flex;
		width: 18px;
		height: 18px;
	}
	.wlre-pd-mobile-bar__icon svg {
		width: 100%;
		height: 100%;
	}
}