/*
Theme Name: Edmonton Homes Co
Theme URI: https://edmontonhomes.co
Author: Edmonton Homes Co
Description: Custom theme for edmontonhomes.co, built on top of RealtyPress Premium (CREA DDF/MLS listings). Classic (non-block) theme so it plugs directly into RealtyPress's template-override system.
Version: 0.1.0
Requires at least: 6.3
Requires PHP: 8.0
Text Domain: edmontonhomes
*/

/* Design tokens — see guidelines.md §1 for the source spec. Custom properties
   can't be referenced inside @media conditions without a preprocessor, so the
   canonical mobile/desktop breakpoint is a literal used throughout this file:
   900px. */

:root {
	--eh-color-ivory: #EDEAE1;
	--eh-color-panel: #F6F3EC;
	--eh-color-card: #FFFFFF;
	--eh-color-ink: #171712;
	--eh-color-ink-5: rgba(23, 23, 18, 0.05);
	--eh-color-ink-6: rgba(23, 23, 18, 0.06);
	--eh-color-ink-10: rgba(23, 23, 18, 0.10);
	--eh-color-ink-12: rgba(23, 23, 18, 0.12);
	--eh-color-ink-15: rgba(23, 23, 18, 0.15);
	--eh-color-ink-40: rgba(23, 23, 18, 0.40);
	--eh-color-ink-60: rgba(23, 23, 18, 0.60);
	--eh-color-ink-75: rgba(23, 23, 18, 0.75);
	--eh-color-ink-85: rgba(23, 23, 18, 0.85);
	--eh-color-coral: #FF5A3C;
	--eh-color-coral-hover: #E14A2C;
	--eh-color-forest: #17352A;

	--eh-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--eh-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--eh-lh-display: 1.05;
	--eh-lh-body: 1.5;

	/* Type-scale tokens for the single-listing page's recurring text roles
	   (guidelines.md §1 documents the size buckets; these give the CSS a
	   single source of truth instead of each selector hardcoding its own
	   literal — see WORKBOOK.md single-listing consistency pass). */
	--eh-text-eyebrow-size: 11px;
	--eh-text-eyebrow-tracking: 0.04em;
	--eh-text-h2: 1.3125rem;
	--eh-text-h3: 1.125rem;
	--eh-text-meta: 0.875rem;
	--eh-text-fine: 0.8rem;

	/* Sharp-shape design pass: flat everywhere. Tokens kept (rather than
	   deleted) since ~48 selectors reference them by name; true circles
	   (icon buttons, slider thumbs, map cluster badge) use a literal 50%
	   instead of these tokens and are unaffected. */
	--eh-radius-pill: 0;
	--eh-radius-card: 0;
	--eh-radius-lg: 0;

	--eh-shadow-card: 0 4px 16px rgba(23, 23, 18, 0.05);
	--eh-shadow-fab: 0 8px 24px rgba(23, 23, 18, 0.35);
	--eh-shadow-sheet: 0 -12px 36px rgba(23, 23, 18, 0.28);
	--eh-shadow-cta: 0 8px 20px rgba(255, 90, 60, 0.32);
	--eh-shadow-search-bar: 0 24px 60px rgba(23, 23, 18, 0.12);

	--eh-motion-duration: 300ms;
	--eh-motion-ease: ease-out;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--eh-font-body);
	color: var(--eh-color-ink);
	background: var(--eh-color-ivory);
	line-height: var(--eh-lh-body);
}

.eh-container {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}

a {
	color: var(--eh-color-coral);
	text-decoration: none;
	transition: color var(--eh-motion-duration) var(--eh-motion-ease);
}

a:hover,
a:focus-visible {
	color: var(--eh-color-coral-hover);
}

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

.eh-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--eh-color-ink-10);
}

.eh-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.85rem;
}

@media (min-width: 900px) {
	.eh-site-header__inner {
		padding-inline: 64px;
	}
}

.eh-site-header__logo {
	font-family: var(--eh-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--eh-color-ink);
}

.eh-site-header__logo-tld {
	color: var(--eh-color-coral);
}

.eh-site-header__logo:hover,
.eh-site-header__logo:focus-visible {
	color: var(--eh-color-ink-75);
}

/* Desktop nav row — hidden below the breakpoint, shown above it. */
.eh-site-header__nav {
	display: none;
}

@media (min-width: 900px) {
	.eh-site-header__nav {
		display: block;
	}
}

.eh-site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-site-header__nav a {
	font-size: 15px;
	font-weight: 600;
	color: var(--eh-color-ink-75);
}

.eh-site-header__nav a:hover,
.eh-site-header__nav a:focus-visible {
	color: var(--eh-color-coral);
}

/* Desktop dropdown for items with children (currently just Search's 4
   property-type + 4 price-band children). CSS-only hover/:focus-within
   reveal — no display:none toggling via JS, so children stay reachable by
   Tab and visible on keyboard focus, not just mouse hover. Two-column grid
   with a fixed row count + grid-auto-flow: column (not the default row
   flow) so the 8 flat children still read as two visual groups — property
   types down the left column, price bands down the right — without
   restructuring the menu itself into nested sub-groups. */
.eh-site-header__nav li.menu-item-has-children {
	position: relative;
}

.eh-site-header__nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 0.15rem 2rem;
	margin: 0;
	padding: 1rem 1.25rem;
	list-style: none;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-card);
	box-shadow: var(--eh-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease),
		transform var(--eh-motion-duration) var(--eh-motion-ease),
		visibility var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-site-header__nav li.menu-item-has-children:hover > .sub-menu,
.eh-site-header__nav li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.eh-site-header__nav .sub-menu a {
	display: block;
	padding: 0.4rem 0;
	font-size: 14px;
	white-space: nowrap;
}

/* Neighbourhoods mega-menu — same hover/:focus-within mechanism as the
   Search dropdown above, but overrides the grid for 27 flat, alphabetical
   children (no two-group column split needed) plus a full-width "view all"
   footer row. Targets the item by its WP-assigned menu-item-2982 ID class
   since menu items themselves live in the DB (Appearance > Menus), not
   theme code. Width is viewport-clamped, not container-clamped, because the
   panel is centered on the trigger link (which sits left-of-center in the
   nav) rather than on the page — a container-relative cap wouldn't stop it
   overflowing the *viewport* edge on narrower desktop widths. */
.eh-site-header__nav li.menu-item-2982 > .sub-menu {
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	grid-template-rows: none;
	grid-auto-flow: row;
	max-width: min(760px, calc(100vw - 2rem));
}

.eh-site-header__nav li.menu-item-2982 > .sub-menu .eh-submenu-viewall {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-site-header__nav li.menu-item-2982 > .sub-menu .eh-submenu-viewall a {
	font-weight: 700;
	color: var(--eh-color-coral);
	white-space: normal;
}

/* Surrounding Cities mega-menu — same mechanism again, 30 flat children
   (Edmonton pinned first via menu_order, then the 29 RAE-service-area towns
   alphabetically) plus the "view all" footer row. Targets menu-item-2984. */
.eh-site-header__nav li.menu-item-2984 > .sub-menu {
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	grid-template-rows: none;
	grid-auto-flow: row;
	max-width: min(760px, calc(100vw - 2rem));
}

.eh-site-header__nav li.menu-item-2984 > .sub-menu .eh-submenu-viewall {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-site-header__nav li.menu-item-2984 > .sub-menu .eh-submenu-viewall a {
	font-weight: 700;
	color: var(--eh-color-coral);
	white-space: normal;
}

/* Hamburger toggle — mobile only. */
.eh-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

@media (min-width: 900px) {
	.eh-nav-toggle {
		display: none;
	}
}

.eh-nav-toggle span,
.eh-nav-toggle::before,
.eh-nav-toggle::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	height: 2px;
	background: var(--eh-color-ink);
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease),
		opacity var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-nav-toggle::before {
	top: 16px;
}

.eh-nav-toggle span {
	top: 21px;
}

.eh-nav-toggle::after {
	top: 26px;
}

.eh-nav-toggle[aria-expanded="true"]::before {
	transform: translateY(5px) rotate(45deg);
}

.eh-nav-toggle[aria-expanded="true"] span {
	opacity: 0;
}

.eh-nav-toggle[aria-expanded="true"]::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Mobile drawer
   ------------------------------------------------------------------ */

html.eh-scroll-locked {
	overflow: hidden;
}

.eh-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

@media (min-width: 900px) {
	.eh-drawer {
		display: none;
	}
}

.eh-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--eh-color-ink-40);
	opacity: 0;
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(86vw, 360px);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--eh-color-card);
	box-shadow: var(--eh-shadow-sheet);
	padding: 1.25rem;
	padding-bottom: max(env(safe-area-inset-bottom), 16px);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-drawer.is-open {
	pointer-events: auto;
}

.eh-drawer.is-open .eh-drawer__backdrop {
	opacity: 1;
}

.eh-drawer.is-open .eh-drawer__panel {
	transform: translateX(0);
}

.eh-drawer__close {
	align-self: flex-end;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--eh-color-ink);
	cursor: pointer;
}

.eh-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-drawer__nav > ul > li {
	border-bottom: 1px solid var(--eh-color-ink-10);
	position: relative;
}

.eh-drawer__nav a {
	display: block;
	padding: 0.85rem 0;
	font-weight: 600;
	font-size: 15px;
	color: var(--eh-color-ink);
}

.eh-drawer__nav li.menu-item-has-children > a {
	padding-right: 44px;
}

.eh-drawer__nav a:hover,
.eh-drawer__nav a:focus-visible {
	color: var(--eh-color-coral);
}

/* Accordion — JS wraps each .sub-menu in a .eh-accordion-row div; this is
   the CSS grid-rows trick from guidelines.md §1 (0fr -> 1fr reaches auto
   height without JS measuring anything). */
.eh-drawer__nav .eh-accordion-row {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-drawer__nav .eh-accordion-row > .sub-menu {
	overflow: hidden;
	min-height: 0;
	padding-left: 1rem;
}

.eh-drawer__nav li.is-open > .eh-accordion-row {
	grid-template-rows: 1fr;
}

.eh-accordion-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.eh-accordion-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--eh-color-ink-60);
	border-bottom: 2px solid var(--eh-color-ink-60);
	transform: rotate(45deg);
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-accordion-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* ---------------------------------------------------------------------
   Site footer
   ------------------------------------------------------------------ */

.eh-site-footer {
	margin-top: 3rem;
	background: var(--eh-color-panel);
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-site-footer__inner {
	padding-block: 3rem 1.5rem;
}

.eh-site-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 1.5rem;
}

@media (min-width: 900px) {
	.eh-site-footer__grid {
		/* Back to guidelines.md §2's original 4-track layout — the "Browse
		   Homes" column now fills the slot that was reserved for an Agents
		   column (cut per CLAUDE.md rule #10) when this was narrowed to 3
		   tracks in Phase 2. */
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 2rem;
	}
}

.eh-site-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.eh-site-footer__brand {
		grid-column: auto;
	}
}

.eh-site-footer__logo {
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--eh-color-ink);
}

.eh-site-footer__tagline {
	margin-top: 0.5rem;
	max-width: 32ch;
	font-size: 14px;
	color: var(--eh-color-ink-60);
}

.eh-site-footer__col-title {
	margin: 0 0 0.75rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eh-color-coral);
}

.eh-site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-site-footer__col a {
	font-size: 14px;
	font-weight: 600;
	color: var(--eh-color-ink-60);
}

.eh-site-footer__col a:hover,
.eh-site-footer__col a:focus-visible {
	color: var(--eh-color-coral);
}

/* Full-site sitemap block (all neighbourhood/surrounding-city landing
   pages) — dense multi-column link lists via CSS columns rather than a
   grid, since each group can run 25-30+ links long. */
.eh-site-footer__sitemap {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--eh-color-ink-10);
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 900px) {
	.eh-site-footer__sitemap {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

.eh-site-footer__sitemap-list {
	columns: 2;
	column-gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.eh-site-footer__sitemap-list {
		columns: 3;
	}
}

.eh-site-footer__sitemap-list li {
	break-inside: avoid;
	padding-block: 0.3rem;
}

.eh-site-footer__sitemap-list a {
	font-size: 13px;
	color: var(--eh-color-ink-60);
}

.eh-site-footer__sitemap-list a:hover,
.eh-site-footer__sitemap-list a:focus-visible {
	color: var(--eh-color-coral);
}

.eh-site-footer__bottom {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-site-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: var(--eh-color-ink-40);
}

/* ---------------------------------------------------------------------
   Scroll-reveal (Phase 3)
   ------------------------------------------------------------------ */

.eh-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease),
		transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.eh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   Homepage hero (Phase 3)
   ------------------------------------------------------------------ */

.eh-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: 3rem;
	/* Matches the photo's dark tones — a brief-flash fallback only, visible
	   for the instant before .eh-hero__photo paints in. .eh-hero__backdrop
	   below has no fixed height of its own, so once the photo loads it always
	   covers .eh-hero's full rendered height exactly, regardless of how much
	   room the title/subtitle/search-card content needs. */
	background: var(--eh-color-forest);
}

.eh-hero__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.eh-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark gradient scrim over the photo — heavier toward the bottom, where the
   eyebrow/title/subtitle sit — so the light hero text (see .eh-hero__title/
   __subtitle below) stays legible regardless of the photo's own content or
   brightness. Uses the same forest tone as .eh-hero's dark fallback
   background, so the scrim and any overflow onto that fallback read as one
   continuous surface rather than two different darks. */
.eh-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(23, 53, 42, 0.35) 0%,
		rgba(23, 53, 42, 0.55) 60%,
		rgba(23, 53, 42, 0.8) 100%
	);
}

.eh-hero__content {
	position: relative;
	padding-top: 96px;
	/* Buffer matching .eh-hero__search-card's negative margin-top below, so
	   the card's pull-up overlaps empty hero backdrop rather than eating
	   into .eh-hero__subtitle's own text (was fully hidden behind the card
	   before this was added). */
	margin-bottom: 38px;
	text-align: center;
}

@media (min-width: 900px) {
	.eh-hero__content {
		max-width: 720px;
		margin-inline: auto;
		padding-top: 220px;
		margin-bottom: 48px;
	}
}

.eh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.9rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	color: var(--eh-color-forest);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: var(--eh-shadow-card);
}

.eh-hero__title {
	margin: 0.85rem 0 0.5rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 3.25rem);
	line-height: var(--eh-lh-display);
	color: var(--eh-color-card);
}

.eh-hero__subtitle {
	margin: 0;
	max-width: 46ch;
	margin-inline: auto;
	color: rgba(237, 234, 225, 0.82);
	font-size: 1rem;
}

@media (min-width: 900px) {
	.eh-hero__subtitle {
		font-size: 1.125rem;
	}
}

.eh-hero__search-card {
	position: relative;
	margin-top: -38px;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-lg);
	box-shadow: var(--eh-shadow-search-bar);
	padding: 1rem;
}

@media (min-width: 900px) {
	.eh-hero__search-card {
		max-width: 980px;
		margin-inline: auto;
		margin-top: -48px;
		padding: 0.75rem 1rem;
	}
}

/* Restyles [rps-listing-search-box]'s real emitted markup directly (see
   template-parts/homepage/hero.php) rather than loading Bootstrap for it. */
.eh-hero__search-card .sc-rps-search-location-form .input-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.eh-hero__search-card .tester {
	position: relative;
	flex: 1;
	min-width: 0;
}

/* Live city/neighbourhood/address suggestions (assets/js/hero-search.js) —
   absent entirely until JS populates it; plain Enter-to-submit works
   correctly with or without this ever appearing (eh_resolve_map_look()). */
.eh-hero-search__suggestions {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	/* .eh-site-header is sticky at z-index: 40 (style.css ~L101-104) — this
	   card sits high enough in the hero (negative margin-top pulling it up)
	   that the dropdown can end up underneath it, especially once mobile
	   Safari/Chrome scroll a focused input toward the top on keyboard open.
	   Must clear the header, not just look reasonable in isolation. */
	z-index: 50;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-lg);
	box-shadow: var(--eh-shadow-search-bar);
	/* min() against a small vh slice, not a flat 320px — on a short
	   landscape/keyboard-open viewport a fixed max-height can render mostly
	   off-screen with no way to reach lower items (iOS only auto-scrolls the
	   focused input into view, not content added after focus). */
	max-height: min(320px, 60vh);
	overflow-y: auto;
}

.eh-hero-search__suggestions li {
	margin: 0;
}

.eh-hero-search__suggestions a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.65rem 0.75rem;
	border-radius: var(--eh-radius-card);
	color: var(--eh-color-ink);
	text-decoration: none;
	font-size: 0.95rem;
}

.eh-hero-search__suggestions a:hover,
.eh-hero-search__suggestions a:focus-visible {
	background: var(--eh-color-ink-10);
	outline: none;
}

.eh-hero-search__hint {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--eh-color-ink-60);
}

.eh-hero__search-card .rps_input_map_look {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--eh-font-body);
	font-size: 1rem;
	padding: 0.85rem 0.25rem;
	color: var(--eh-color-ink);
}

.eh-hero__search-card .input-group-btn {
	flex-shrink: 0;
}

.eh-hero__search-card .btn-submit-look {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.75rem 1.25rem;
	cursor: pointer;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-hero__search-card .btn-submit-look:hover,
.eh-hero__search-card .btn-submit-look:focus-visible {
	background: var(--eh-color-coral-hover);
}

.eh-hero__search-card .fa-search {
	display: none;
}

.eh-hero__search-card .look-search-blurb {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--eh-color-ink-10);
	color: var(--eh-color-ink-60);
	font-size: 0.8rem;
}

@media (min-width: 900px) {
	.eh-hero__search-card .input-group-btn {
		border-left: 1px solid var(--eh-color-ink-10);
		padding-left: 0.75rem;
	}
}

/* ---------------------------------------------------------------------
   Featured listings + listing card (Phase 3)
   ------------------------------------------------------------------ */

.eh-featured {
	padding-block: 3rem;
}

.eh-featured__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.eh-featured__title {
	margin: 0 0 0.35rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--eh-color-ink);
}

.eh-featured__subtitle {
	margin: 0;
	color: var(--eh-color-ink-60);
	font-size: 0.95rem;
}

.eh-featured__view-all {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--eh-color-ink);
}

.eh-featured__view-all:hover,
.eh-featured__view-all:focus-visible {
	color: var(--eh-color-coral);
}

/* ---------------------------------------------------------------------
   Horizontal scroll-row nav buttons — shared by Featured Listings (mobile
   only, see the 900px breakpoint below) and Browse by Category (every
   breakpoint). Replaces the native scrollbar (hidden on the track itself,
   see .eh-featured__grid/.eh-category-row__grid) with round prev/next
   buttons floated over the row. JS (assets/js/main.js) wires the click
   handlers and toggles [disabled] at each scroll boundary; with JS blocked
   the buttons render inert but the row stays scrollable by touch/trackpad/
   shift+wheel, same progressive-enhancement approach as the mobile nav
   accordion.
   ------------------------------------------------------------------ */

.eh-scroll-row {
	position: relative;
}

.eh-scroll-row__btn {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--eh-color-card);
	color: var(--eh-color-ink);
	box-shadow: var(--eh-shadow-card);
	cursor: pointer;
}

.eh-scroll-row__btn:hover,
.eh-scroll-row__btn:focus-visible {
	color: var(--eh-color-coral);
}

.eh-scroll-row__btn:disabled {
	opacity: 0;
	pointer-events: none;
}

.eh-scroll-row__btn--prev {
	left: 0.5rem;
}

.eh-scroll-row__btn--next {
	right: 0.5rem;
}

.eh-featured__grid {
	display: flex;
	gap: 1rem;
	margin: 0 -1rem;
	padding: 0 1rem 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.eh-featured__grid::-webkit-scrollbar {
	display: none;
}

.eh-featured__grid .eh-listing-card {
	flex: 0 0 78vw;
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.eh-featured__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.eh-featured__grid .eh-listing-card {
		flex: initial;
	}

	/* Featured Listings stops scrolling at this breakpoint (static 3-col
	   grid above), so its nav buttons have nothing left to do. */
	.eh-featured .eh-scroll-row__btn {
		display: none;
	}
}

.eh-listing-card,
.eh-listing-card:hover,
.eh-listing-card:focus-visible {
	display: flex;
	flex-direction: column;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-card);
	box-shadow: var(--eh-shadow-card);
	overflow: hidden;
	color: var(--eh-color-ink);
	text-decoration: none;
}

.eh-listing-card__media {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--eh-color-ink-6);
}

.eh-listing-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Some source MLS photos are pre-cropped close enough to 4:3 that
	   object-fit:cover finds nothing to trim, so any pillarboxing baked into
	   those specific photos shows through untouched. A flat 15% overscale
	   forces a crop on every photo regardless of its native ratio, eating
	   into a thin band on every edge — trades a sliver of real photo content
	   for guaranteed removal of source-baked bars. Can't target only the
	   affected photos from CSS (the theme has no way to tell which ones are
	   padded), so this applies uniformly. */
	transform: scale(1.15);
}

/* Reserved save-heart slot per guidelines.md §3 — visual slot only, save
   functionality itself is out of scope for this build. */
.eh-listing-card__save {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
}

.eh-listing-card__save::before,
.eh-listing-card__save::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 7px;
	height: 11px;
	background: var(--eh-color-ink-40);
	border-radius: 7px 7px 0 0;
}

.eh-listing-card__save::before {
	left: 9px;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
}

.eh-listing-card__save::after {
	left: 16px;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

.eh-listing-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0.85rem 0.9rem 1rem;
}

/* Cards render a variable subset of price/address/city/meta/mls depending
   on which fields the listing (or its DDF consent flags) actually has —
   without this, a sparse card's .eh-listing-card__cta ends up several lines
   higher than a fully-populated card's in the same row. This ::before
   spacer sits between the (always order:0) content lines and the cta
   (order:10 below) and absorbs the leftover vertical space instead, so Get
   Info always sits flush with the card's bottom edge regardless of how much
   content is above it. */
.eh-listing-card__body::before {
	content: "";
	order: 5;
	flex: 1 1 auto;
}

.eh-listing-card__price {
	margin: 0 0 0.2rem;
	color: var(--eh-color-ink);
	font-weight: 800;
	font-size: 1.05rem;
}

.eh-listing-card__address {
	margin: 0;
	font-weight: 700;
	font-size: 0.9rem;
}

.eh-listing-card__city {
	margin: 0.15rem 0 0;
	color: var(--eh-color-ink-60);
	font-size: 0.8rem;
}

.eh-listing-card__mls {
	margin: 0.4rem 0 0;
	color: var(--eh-color-ink-40);
	font-size: 0.7rem;
}

.eh-listing-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	order: 10;
	flex-shrink: 0;
	margin-top: 0.75rem;
	padding: 0.6rem 1rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
}

.eh-listing-card:hover .eh-listing-card__cta,
.eh-listing-card:focus-visible .eh-listing-card__cta {
	background: var(--eh-color-coral-hover);
}

/* ---------------------------------------------------------------------
   Browse by Category — one horizontally-scrolling row of 6 listings per
   price band / property type (see template-parts/homepage/categories.php
   + category-row.php). Cards reuse .eh-listing-card as-is. Rows stay
   horizontal-scroll at every breakpoint, not just mobile like .eh-featured
   — with 8 rows on the page, letting them all expand into static grids on
   desktop would make the homepage extremely tall; a scannable scroll row
   per category (same pattern real-estate sites use for "similar homes"
   rails) keeps 8 categories browsable without that.
   ------------------------------------------------------------------ */

.eh-categories {
	padding-block: 1rem 2rem;
}

.eh-categories__title {
	margin: 0 0 0.5rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--eh-color-ink);
}

.eh-categories__section-label {
	/* margin-block only — this element also carries .eh-container, whose
	   margin-inline: auto centers it; a margin shorthand here would zero
	   out left/right and cancel that centering (later rule wins). */
	margin-block: 2rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eh-color-ink-60);
}

.eh-category-row {
	padding-block: 0.75rem;
}

.eh-category-row__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.eh-category-row__title {
	margin: 0;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--eh-color-ink);
}

.eh-category-row__subtitle {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--eh-color-ink-60);
}

.eh-category-row__view-all {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--eh-color-ink);
}

.eh-category-row__view-all:hover,
.eh-category-row__view-all:focus-visible {
	color: var(--eh-color-coral);
}

.eh-category-row__grid {
	display: flex;
	gap: 1rem;
	margin: 0 -1rem;
	padding: 0 1rem 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.eh-category-row__grid::-webkit-scrollbar {
	display: none;
}

.eh-category-row__grid .eh-listing-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.eh-category-row__grid .eh-listing-card {
		flex-basis: 280px;
	}
}

/* ---------------------------------------------------------------------
   Neighbourhood explorer (Phase 3)
   ------------------------------------------------------------------ */

.eh-neighbourhoods {
	padding-block: 3rem;
}

.eh-neighbourhoods__title {
	margin: 0 0 0.35rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--eh-color-ink);
}

.eh-neighbourhoods__subtitle {
	margin: 0 0 1.5rem;
	color: var(--eh-color-ink-60);
	font-size: 0.95rem;
}

.eh-neighbourhoods__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 900px) {
	.eh-neighbourhoods__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
}

.eh-neighbourhood-card,
.eh-neighbourhood-card:hover,
.eh-neighbourhood-card:focus-visible {
	display: block;
	color: var(--eh-color-ink);
	text-decoration: none;
}

.eh-neighbourhood-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--eh-radius-card);
	overflow: hidden;
	background: var(--eh-color-ink-10);
}

.eh-neighbourhood-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-neighbourhood-card:hover .eh-neighbourhood-card__media img,
.eh-neighbourhood-card:focus-visible .eh-neighbourhood-card__media img {
	transform: scale(1.04);
}

.eh-neighbourhood-card__name {
	margin: 0.65rem 0 0.15rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.eh-neighbourhood-card__stat {
	margin: 0;
	color: var(--eh-color-ink-60);
	font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
   Single listing page (Phase 5)
   ------------------------------------------------------------------ */

.eh-single-listing {
	/* Room for the fixed .eh-single-listing__cta-bar so it never covers the
	   last section's content — see that rule's own comment. 88px covers the
	   bar's actual rendered height (~83px: inner padding + button + border +
	   its own safe-area padding) with a small margin, verified via the
	   mobile-viewport-checker subagent — a flat 72px under-covered it by
	   ~10px on devices with no bottom safe-area inset. */
	padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.eh-single-listing__article {
	max-width: 860px;
	margin-inline: auto;
}

/* ---- Gallery ----
   Deliberately sits outside .eh-container entirely (not just outside
   .eh-single-listing__article) — full page width edge-to-edge, with its own
   small side padding instead of the container's 1200px cap, so the photo
   collage gets the most room the viewport can give it. See
   property-single-view.php. */

.eh-single-listing__gallery {
	position: relative;
	margin-top: 1.5rem;
	padding-inline: 1rem;
}

.eh-single-listing__gallery-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--eh-radius-lg);
	background: var(--eh-color-ink-6);
}

.eh-single-listing__gallery-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}

.eh-single-listing__gallery-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eh-single-listing__gallery-more {
	display: none;
}

/* ---- Desktop: 1 hero + 2x2 thumbnail grid, realtor.ca-style. Mobile keeps
   the full-bleed single-slide scroll-snap strip above unchanged — this is a
   pure CSS reflow of the same slide buttons already in the DOM, no markup
   duplication, matching this file's one-template-plus-min-width-breakpoint
   convention used everywhere else. Slides 6+ stay in the DOM (still reachable
   via the lightbox's prev/next/keyboard nav, which reads every slide
   regardless of CSS visibility) but are hidden from the grid itself. ---- */

@media (min-width: 900px) {
	.eh-single-listing__gallery-track {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 4px;
		/* Fixed viewport-relative height, not aspect-ratio — at full page
		   width, a 16:9 ratio made this nearly viewport-height tall (the
		   "full screen mosaic" the user flagged). A little over a third of
		   the viewport height reads as a hero band, not the whole page. */
		height: 38vh;
		min-height: 340px;
		overflow: hidden;
	}

	.eh-single-listing__gallery-slide {
		aspect-ratio: auto;
		/* Grid items default to min-height: auto, so a tall source photo's
		   intrinsic size can force its 1fr row taller than the track's own
		   38vh box — the track's declared height stops constraining anything
		   and the mosaic visually overflows it (this is what made the nav
		   arrows below read as "not centered": they center against the
		   correct 38vh box while the photos were rendering taller than it).
		   min-height: 0 + overflow: hidden makes the row actually stop at its
		   1fr share so object-fit: cover can crop into it as intended. */
		min-height: 0;
		overflow: hidden;
	}

	.eh-single-listing__gallery-slide:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.eh-single-listing__gallery-slide:nth-child(2) {
		grid-column: 3;
		grid-row: 1;
	}

	.eh-single-listing__gallery-slide:nth-child(3) {
		grid-column: 4;
		grid-row: 1;
	}

	.eh-single-listing__gallery-slide:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
	}

	.eh-single-listing__gallery-slide:nth-child(5) {
		grid-column: 4;
		grid-row: 2;
	}

	.eh-single-listing__gallery-slide:nth-child(n + 6) {
		display: none;
	}

	.eh-single-listing__gallery-more {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(23, 23, 18, 0.55);
		color: #fff;
		font-weight: 700;
		font-size: 1.1rem;
	}

	.eh-single-listing__gallery-counter {
		display: none;
	}
}

.eh-single-listing__ribbon {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: 0.35rem 0.9rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: var(--eh-text-eyebrow-size);
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
}

.eh-single-listing__gallery-counter {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink-85);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

/* ---- Lightbox ---- */

.eh-single-listing__lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(23, 23, 18, 0.92);
	--eh-lightbox-filmstrip-h: calc(64px + 2rem + env(safe-area-inset-bottom));
	padding-bottom: var(--eh-lightbox-filmstrip-h);
}

.eh-single-listing__lightbox[hidden] {
	display: none;
}

.eh-single-listing__lightbox-img {
	max-width: min(92vw, 1100px);
	max-height: calc(86dvh - var(--eh-lightbox-filmstrip-h, 0px));
	object-fit: contain;
}

.eh-single-listing__lightbox-close,
.eh-single-listing__lightbox-nav {
	position: absolute;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
}

.eh-single-listing__lightbox-close {
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
	line-height: 1;
}

.eh-single-listing__lightbox-nav {
	top: calc((100% - var(--eh-lightbox-filmstrip-h, 0px)) / 2);
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 1.25rem;
}

.eh-single-listing__lightbox-nav--prev {
	left: 1rem;
}

.eh-single-listing__lightbox-nav--next {
	right: 1rem;
}

.eh-single-listing__lightbox-filmstrip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
	background: rgba(23, 23, 18, 0.6);
	-webkit-overflow-scrolling: touch;
}

.eh-single-listing__lightbox-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border: 2px solid transparent;
	border-radius: var(--eh-radius-card);
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease),
		border-color var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-single-listing__lightbox-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eh-single-listing__lightbox-thumb:hover,
.eh-single-listing__lightbox-thumb:focus-visible {
	opacity: 0.85;
}

.eh-single-listing__lightbox-thumb.is-active {
	opacity: 1;
	border-color: var(--eh-color-coral);
}

/* ---- Content sheet (overlaps the gallery per guidelines.md §3) ---- */

.eh-single-listing__sheet {
	position: relative;
	z-index: 1;
	margin: -20px 0.75rem 0;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-lg) var(--eh-radius-lg) 0 0;
	box-shadow: var(--eh-shadow-card);
}

@media (min-width: 900px) {
	.eh-single-listing__sheet {
		margin-inline: 0;
		border-radius: var(--eh-radius-lg);
	}
}

@media (min-width: 700px) {
	.eh-single-listing__sheet {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem;
	}

	.eh-single-listing__sheet-info {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.eh-single-listing__sheet-utility {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

@media (min-width: 700px) {
	.eh-single-listing__sheet-utility {
		position: absolute;
		top: 1.25rem;
		right: 1.25rem;
		margin-bottom: 0;
	}
}

.eh-single-listing__utility-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.5rem 0.9rem;
	border: 1.5px solid var(--eh-color-ink-15);
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--eh-color-ink-60);
	cursor: pointer;
	transition: border-color var(--eh-motion-duration) var(--eh-motion-ease), color var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-single-listing__utility-btn:hover,
.eh-single-listing__utility-btn:focus-visible {
	border-color: var(--eh-color-coral);
	color: var(--eh-color-coral);
}

.eh-single-listing__utility-btn[aria-pressed="true"] {
	border-color: var(--eh-color-coral);
	background: var(--eh-color-coral);
	color: #fff;
}

.eh-single-listing__utility-btn[aria-pressed="true"] svg {
	fill: currentColor;
}

.eh-single-listing__sheet-actions {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
}

@media (min-width: 700px) {
	.eh-single-listing__sheet-actions {
		flex: 0 0 auto;
		margin-top: 0;
		padding-bottom: 0.15rem;
	}
}

@media (max-width: 699px) {
	.eh-single-listing__sheet-actions {
		flex-wrap: wrap;
	}

	.eh-single-listing__sheet-action {
		flex: 1 1 calc(50% - 0.3rem);
	}
}

.eh-single-listing__sheet-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 44px;
	padding: 0.7rem 1.1rem;
	border-radius: var(--eh-radius-pill);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease), color var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-single-listing__sheet-action--primary {
	border: none;
	background: var(--eh-color-coral);
	color: #fff;
	box-shadow: var(--eh-shadow-cta);
}

.eh-single-listing__sheet-action--primary:hover,
.eh-single-listing__sheet-action--primary:focus-visible {
	background: var(--eh-color-coral-hover);
}

.eh-single-listing__sheet-action--secondary {
	border: 1.5px solid var(--eh-color-ink-15);
	background: transparent;
	color: var(--eh-color-ink);
}

.eh-single-listing__sheet-action--secondary:hover,
.eh-single-listing__sheet-action--secondary:focus-visible {
	border-color: var(--eh-color-coral);
	color: var(--eh-color-coral);
}

.eh-single-listing__status-pill {
	display: inline-flex;
	padding: 0.3rem 0.8rem;
	border-radius: var(--eh-radius-pill);
	font-size: var(--eh-text-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
}

.eh-single-listing__status-pill.is-active {
	background: var(--eh-color-coral);
	color: #fff;
}

.eh-single-listing__status-pill.is-sold {
	background: var(--eh-color-ink-6);
	color: var(--eh-color-ink-60);
}

.eh-single-listing__address {
	margin: 0.65rem 0 0.25rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--eh-color-ink);
}

@media (min-width: 900px) {
	.eh-single-listing__address {
		font-size: 1.85rem;
	}
}

.eh-single-listing__city {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--eh-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--eh-color-ink-60);
}

.eh-single-listing__price {
	margin: 0.75rem 0 0;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 2rem;
	color: var(--eh-color-coral);
}

/* ---- Body sections ---- */

.eh-single-listing__body {
	padding: 1.5rem 0.75rem 0;
}

@media (min-width: 900px) {
	.eh-single-listing__body {
		padding-inline: 0;
	}
}

.eh-single-listing__stats {
	display: flex;
	padding: 1rem 0;
	margin-bottom: 1.5rem;
	border-top: 1px solid var(--eh-color-ink-10);
	border-bottom: 1px solid var(--eh-color-ink-10);
}

.eh-single-listing__stat {
	flex: 1;
	text-align: center;
	padding-inline: 0.5rem;
}

.eh-single-listing__stat + .eh-single-listing__stat {
	border-left: 1px solid var(--eh-color-ink-10);
}

.eh-single-listing__stat-value {
	display: block;
	font-family: var(--eh-font-display);
	font-weight: 700;
	/* Deliberately not var(--eh-text-h2) (21px) — this is guidelines.md's
	   "stat numbers 21-22px" bucket, kept at the top of that range and
	   distinct from the section-title token on purpose, not a missed token
	   application. */
	font-size: 1.375rem;
	color: var(--eh-color-ink);
}

.eh-single-listing__stat-label {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--eh-text-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--eh-color-ink-40);
}

.eh-single-listing__agent-line {
	margin: 0 0 1.5rem;
	font-size: var(--eh-text-meta);
	color: var(--eh-color-ink-60);
}

.eh-single-listing__mls {
	margin: 0.35rem 0 0.5rem;
	font-size: var(--eh-text-fine);
	color: var(--eh-color-ink-60);
}

/* Neighbourhood / days-on-market / nearby-active-count line — the sheet's
   own quick-glance market stats, distinct from the bigger bed/bath/sqft
   .eh-single-listing__stats strip further down the body. */
.eh-single-listing__sheet-meta {
	display: flex;
	flex-wrap: wrap;
	margin: 0.4rem 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: var(--eh-text-fine);
	font-weight: 600;
	color: var(--eh-color-ink-60);
}

.eh-single-listing__sheet-meta li + li::before {
	content: '\2022';
	margin: 0 0.45rem;
	color: var(--eh-color-ink-15);
}

.eh-single-listing__section-title {
	margin: 0 0 1rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: var(--eh-text-h2);
	color: var(--eh-color-ink);
}

/* ---- Listing Description ---- */

.eh-single-listing__description {
	margin-bottom: 1.5rem;
}

.eh-single-listing__description p {
	margin: 0 0 1rem;
	font-family: var(--eh-font-body);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--eh-color-ink);
}

.eh-single-listing__description p:last-child {
	margin-bottom: 0;
}

/* ---- Property Summary — same ivory-panel motif as the mortgage-estimate
   box (guidelines.md §3), a 2-column key/value grid. ---- */

.eh-single-listing__summary {
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: var(--eh-color-panel);
	border-radius: var(--eh-radius-card);
}

.eh-single-listing__summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
	margin: 0;
}

.eh-single-listing__summary-row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.eh-single-listing__summary-row dt {
	font-size: var(--eh-text-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--eh-color-ink-40);
}

.eh-single-listing__summary-row dd {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--eh-color-ink);
}

@media (max-width: 480px) {
	.eh-single-listing__summary-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Fact tables — restyles RealtyPress's own unmodified partials, which
   emit Bootstrap's .table/.table-bordered/.text-right classes. Bootstrap CSS
   is dequeued on this template (functions.php), so those classes need a
   plain-CSS equivalent here rather than doing nothing. Also styles the
   hand-built fact groups in template-parts/single-listing/facts.php, which
   emit plain (unclassed) <h3>/<table> markup matching this same look. ---- */

.eh-listing-facts {
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: var(--eh-color-panel);
	border-radius: var(--eh-radius-card);
}

.eh-listing-facts h3 {
	margin: 1.75rem 0 0.75rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: var(--eh-text-h3);
	color: var(--eh-color-ink);
}

.eh-listing-facts h3:first-child {
	margin-top: 0;
}

.eh-listing-facts table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.eh-listing-facts th,
.eh-listing-facts td {
	padding: 0.6rem 0.25rem;
	border-bottom: 1px solid var(--eh-color-ink-10);
	text-align: left;
	vertical-align: top;
}

.eh-listing-facts .text-right {
	text-align: right;
}

.eh-listing-facts thead th {
	font-size: var(--eh-text-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--eh-color-ink-40);
}

.eh-listing-facts__rooms-table {
	margin-bottom: 0.75rem;
}

.eh-listing-facts__rooms-table + .eh-listing-facts__rooms-table {
	margin-top: -0.25rem;
}

/* ---- Metric/imperial unit toggle (Rooms only — guidelines.md §3's
   segmented-control motif, active = solid ink pill). Toggling
   [data-eh-unit] on the .eh-listing-facts ancestor show/hides whichever
   pre-computed span each room row already has server-side — no live string
   parsing happens client-side. ---- */

.eh-single-listing__unit-toggle {
	display: inline-flex;
	margin: 0 0 1rem;
	padding: 3px;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-panel);
}

.eh-single-listing__unit-toggle-btn {
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: var(--eh-radius-pill);
	background: transparent;
	color: var(--eh-color-ink-60);
	font-family: var(--eh-font-body);
	font-size: var(--eh-text-fine);
	font-weight: 700;
	cursor: pointer;
}

.eh-single-listing__unit-toggle-btn.is-active {
	background: var(--eh-color-ink);
	color: #fff;
}

[data-eh-unit="metric"] [data-eh-dimension-imperial],
[data-eh-unit="imperial"] [data-eh-dimension-metric] {
	display: none;
}

/* ---- Map ---- */

.eh-single-listing__map-section {
	margin-bottom: 1.5rem;
}

.eh-single-listing__map {
	height: 320px;
	border-radius: var(--eh-radius-card);
	overflow: hidden;
	background: var(--eh-color-ink-6);
}

/* ---- Sticky bottom CTA bar ---- */

.eh-single-listing__cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--eh-color-ink-10);
	box-shadow: var(--eh-shadow-sheet);
	padding-bottom: max(env(safe-area-inset-bottom), 12px);
}

.eh-single-listing__cta-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	max-width: 860px;
	margin-inline: auto;
}

.eh-single-listing__cta-price {
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--eh-color-ink);
}

.eh-single-listing__cta-button,
.eh-single-listing__cta-button:hover,
.eh-single-listing__cta-button:focus-visible {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.25rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: var(--eh-shadow-cta);
}

.eh-single-listing__cta-button:hover,
.eh-single-listing__cta-button:focus-visible {
	background: var(--eh-color-coral-hover);
}

/* ---- CREA disclaimer / not-found fallback partials (Bootstrap-classed,
   plugin-owned, never edited — see CLAUDE.md rule #2) — a light plain-CSS
   equivalent for the .row/.col-*/.btn classes those partials emit, since
   Bootstrap CSS no longer loads on this template. ---- */

.eh-single-listing .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -0.5rem;
}

.eh-single-listing .row [class*="col-"] {
	padding-inline: 0.5rem;
	flex: 1 1 0;
	min-width: 0;
}

.eh-single-listing .text-center {
	text-align: center;
}

.eh-single-listing .rps-crea-terms-wrap {
	max-width: 720px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.eh-single-listing .rps-crea-terms-wrap .btn {
	display: inline-block;
	width: 100%;
	padding: 0.85rem 1.5rem;
	margin-top: 1rem;
	border: 0;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.eh-single-listing .rps-listing-not-found {
	padding: 4rem 1rem;
	text-align: center;
	color: var(--eh-color-ink-60);
}

/* ---- Footer MLS/copyright attribution (partials/footer-mls.php,
   partials/footer-copyright.php — hard-forced to the plugin's own
   unmodified files by RealtyPress_Template::get_template_part(), never
   overridable per CLAUDE.md rule #2). Scoped restyle only. ---- */

.eh-single-listing .rps-footer {
	max-width: 860px;
	margin: 2rem auto 0;
	padding-inline: 0.75rem;
	padding-top: 1.5rem;
	color: var(--eh-color-ink-60);
	font-size: var(--eh-text-fine);
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-single-listing .rps-footer img {
	max-width: 100%;
	height: auto;
}

.eh-single-listing .rps-footer label {
	font-weight: 700;
	color: var(--eh-color-ink);
}

/* Last Updated / Data Provider / Listing Office — markup already groups
   these in a .row of .col-sm-4s (Bootstrap grid classes), but the theme
   doesn't load Bootstrap, so lay them out with flexbox instead. */
.eh-single-listing .rps-footer .rps-listing-stats .row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.eh-single-listing .rps-footer .rps-listing-stats .row > div {
	flex: 1 1 0;
	min-width: 160px;
}

/* ---------------------------------------------------------------------
   Search & Results (Phase 4) — realtypress/property-results.php override.
   ------------------------------------------------------------------ */

.eh-search {
	padding-block: 1.5rem 3rem;
}

/* ---- Filter form ---- */

.eh-search-form {
	background: var(--eh-color-panel);
	border-radius: var(--eh-radius-lg);
	padding: 1rem;
	margin-bottom: 1rem;
}

.eh-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: end;
}

.eh-search-form__row + .eh-search-form__row {
	margin-top: 0.75rem;
}

.eh-search-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 140px;
	min-width: 0;
}

.eh-search-form__field--price {
	flex: 1 1 240px;
}

.eh-search-form__field--keyword {
	flex: 2 1 240px;
}

.eh-search-form__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eh-color-ink-60);
}

.eh-search-form__field select,
.eh-search-form__field input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-card);
	background: var(--eh-color-card);
	font-family: var(--eh-font-body);
	font-size: 0.85rem;
	color: var(--eh-color-ink);
}

.eh-search-form__submit {
	flex: 0 0 auto;
	align-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	box-shadow: var(--eh-shadow-cta);
	transition: background var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-search-form__submit:hover,
.eh-search-form__submit:focus-visible {
	background: var(--eh-color-coral-hover);
}

/* Dual-range price slider: two overlapping native <input type=range>, only
   the thumb is interactive on each (pointer-events re-enabled just on
   ::-webkit-slider-thumb/::-moz-range-thumb) so both handles stay
   independently draggable despite occupying the same track. */
.eh-range {
	position: relative;
	height: 28px;
	display: flex;
	align-items: center;
}

.eh-range__track {
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink-12);
}

.eh-range__fill {
	position: absolute;
	height: 4px;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
}

.eh-range input[type="range"] {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.eh-range input[type="range"]::-webkit-slider-runnable-track {
	background: transparent;
}

.eh-range input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--eh-color-coral);
	border: 2px solid #fff;
	box-shadow: var(--eh-shadow-fab);
	cursor: pointer;
	margin-top: 0;
}

.eh-range input[type="range"]::-moz-range-track {
	background: transparent;
	border: 0;
}

.eh-range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--eh-color-coral);
	border: 2px solid #fff;
	box-shadow: var(--eh-shadow-fab);
	cursor: pointer;
}

.eh-range__readout {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--eh-color-ink);
}

/* ---- Advanced filter form sections (2026-08-14 pass) — WHERE / PRICE &
   SIZE / BEDS & BATHS / HOME TYPE & OWNERSHIP / FEATURES ---- */

.eh-search-form__section + .eh-search-form__section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-search-form__section-title {
	margin: 0 0 0.85rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: var(--eh-text-h3);
	color: var(--eh-color-ink);
}

.eh-search-form__subfield + .eh-search-form__subfield {
	margin-top: 0.85rem;
}

/* ---- Collapsible form body (2026-08-15 pass) — assets/js/search-results.js
   adds/removes .is-collapsed on #eh-search-form-body; server HTML always
   renders every section, so <noscript> visitors see the full form with no
   CSS/JS collapse ever applied. ---- */

.eh-search-form__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	color: var(--eh-color-ink);
	font-family: var(--eh-font-body);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-search-form__toggle:hover,
.eh-search-form__toggle:focus-visible {
	border-color: var(--eh-color-coral);
}

.eh-search-form__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--eh-color-ink-60);
	border-bottom: 2px solid var(--eh-color-ink-60);
	transform: rotate(45deg);
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-search-form__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.eh-search-form__body.is-collapsed [data-eh-collapsible-section] {
	display: none;
}

/* ---- Pill-button groups: single-select (radio) and multi-select
   (checkbox) inputs share the same visual treatment — visually hidden input,
   its sibling <span> does the actual styling via :checked. ---- */

.eh-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.eh-pill {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.eh-pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
}

.eh-pill span {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	color: var(--eh-color-ink-75);
	font-size: 0.8rem;
	font-weight: 600;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease),
		border-color var(--eh-motion-duration) var(--eh-motion-ease),
		color var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-pill:hover span {
	border-color: var(--eh-color-ink-40);
}

.eh-pill input:checked + span {
	background: var(--eh-color-coral);
	border-color: var(--eh-color-coral);
	color: #fff;
}

.eh-pill input:focus-visible + span {
	outline: 2px solid var(--eh-color-coral);
	outline-offset: 2px;
}

/* ---- City/region multi-select (WHERE section) ---- */

.eh-city-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}

.eh-city-grid--full {
	grid-template-columns: 1fr;
	margin-top: 0.5rem;
}

.eh-city-grid .eh-pill {
	display: flex;
}

.eh-city-grid .eh-pill span {
	width: 100%;
	justify-content: center;
	text-align: center;
}

@media (min-width: 900px) {
	.eh-city-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- Range fields with editable number inputs (price / size / year built)
   — replaces the plain-text .eh-range__readout with inputs the dual-slider
   JS keeps bidirectionally in sync (assets/js/search-results.js). ---- */

.eh-range-numbers {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.eh-range-numbers__prefix,
.eh-range-numbers__suffix,
.eh-range-numbers__sep {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var(--eh-color-ink-60);
}

.eh-range-numbers input[type="number"] {
	width: 0;
	flex: 1 1 auto;
	min-width: 70px;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-card);
	background: var(--eh-color-card);
	font-family: var(--eh-font-body);
	font-size: 0.85rem;
	color: var(--eh-color-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.eh-range-numbers input[type="number"]::-webkit-outer-spin-button,
.eh-range-numbers input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Filter chips ---- */

.eh-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.eh-filter-chip,
.eh-filter-chip:hover,
.eh-filter-chip:focus-visible {
	display: inline-flex;
	padding: 0.4rem 0.85rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink-6);
	color: var(--eh-color-ink-75);
	font-size: 0.78rem;
	font-weight: 600;
}

.eh-filter-chip:hover,
.eh-filter-chip:focus-visible {
	background: var(--eh-color-ink-10);
}

.eh-filter-chip.is-active,
.eh-filter-chip.is-active:hover,
.eh-filter-chip.is-active:focus-visible {
	background: var(--eh-color-coral);
	color: #fff;
}

/* ---- Toolbar: result count, sort, view toggle ---- */

.eh-search-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.eh-search-toolbar__count {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--eh-color-ink);
}

.eh-search-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.eh-search-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.eh-search-toolbar__sort-label {
	font-size: 0.75rem;
	color: var(--eh-color-ink-60);
}

.eh-search-toolbar__sort select {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-card);
	background: var(--eh-color-card);
	font-size: 0.8rem;
	color: var(--eh-color-ink);
}

.eh-search-toolbar__sort-apply {
	margin-left: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--eh-color-ink-12);
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	font-size: 0.78rem;
	cursor: pointer;
}

.eh-view-toggle {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink-6);
}

.eh-view-toggle__item,
.eh-view-toggle__item:hover,
.eh-view-toggle__item:focus-visible {
	padding: 0.4rem 0.9rem;
	border-radius: var(--eh-radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--eh-color-ink-60);
}

.eh-view-toggle__item.is-active {
	background: var(--eh-color-ink);
	color: #fff;
}

/* ---- Results: grid + list ---- */

.eh-search-results--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.eh-search-results--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.eh-search-results--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.eh-listing-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--eh-color-ink-60);
}

.eh-search-results--list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.eh-listing-card--list {
	display: flex;
	flex-direction: column;
}

@media (min-width: 600px) {
	.eh-listing-card--list {
		flex-direction: row;
	}

	.eh-listing-card--list .eh-listing-card__media {
		flex: 0 0 260px;
		aspect-ratio: 4 / 3;
	}

	.eh-listing-card--list .eh-listing-card__body {
		flex: 1;
	}
}

/* ---- Empty state ---- */

.eh-search-empty {
	padding: 3rem 1rem;
	text-align: center;
	background: var(--eh-color-panel);
	border-radius: var(--eh-radius-lg);
}

.eh-search-empty__title {
	margin: 0 0 0.4rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.4rem;
}

.eh-search-empty__text {
	margin: 0;
	color: var(--eh-color-ink-60);
}

/* ---- Pagination (restyles RealtyPress_Helper::generate_pagination()'s own
   <nav><ul class="pagination"><li> markup — reused, not reimplemented, same
   approach as the Phase 5 fact-table partials). ---- */

.eh-search-pagination nav {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.eh-search-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-search-pagination li a,
.eh-search-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 0.5rem;
	border-radius: var(--eh-radius-pill);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--eh-color-ink-75);
}

.eh-search-pagination li a:hover,
.eh-search-pagination li a:focus-visible {
	background: var(--eh-color-ink-6);
	color: var(--eh-color-ink);
}

.eh-search-pagination li.active span {
	background: var(--eh-color-ink);
	color: #fff;
}

/* ---- Results map (Chunk 2) ---- */

.eh-search-results-map {
	height: 60vh;
	min-height: 420px;
	max-height: 720px;
	border-radius: var(--eh-radius-card);
	overflow: hidden;
	background: var(--eh-color-ink-6);
	margin-bottom: 1.5rem;
}

/* svh (static, smallest/chrome-expanded viewport), not dvh: this map is an
   in-flow block scrolled with the rest of the page, not a fixed/full-bleed
   surface (CLAUDE.md rule #5's 100dvh guidance targets that latter case) —
   dvh would resize this block live as mobile browser chrome collapses
   mid-scroll, reflowing the toolbar/pagination below it. svh stays stable
   after first paint, at the cost of leaving a little extra space once chrome
   collapses rather than growing to fill it — the right tradeoff for an
   in-flow element. */
@supports (height: 60svh) {
	.eh-search-results-map {
		height: 60svh;
	}
}

/* .eh-map-pill/.eh-map-cluster are Leaflet's own divIcon wrapper — sized to
   the ~44px touch-target minimum (iOS HIG / Material) via iconSize in
   search-results.js. The visible badge is the smaller inner element,
   centered via flexbox, so the tap target stays roomy on mobile without the
   pill/cluster looking oversized on the map itself. */

.eh-map-pill {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eh-map-pill__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 0.65rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-card);
	color: var(--eh-color-ink);
	font-size: 0.75rem;
	font-weight: 700;
	box-shadow: var(--eh-shadow-card);
	white-space: nowrap;
	cursor: pointer;
}

.eh-map-pill__badge.is-active {
	background: var(--eh-color-coral);
	color: #fff;
}

.eh-map-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eh-map-cluster__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--eh-color-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	box-shadow: var(--eh-shadow-card);
	cursor: pointer;
}

.eh-map-popup {
	display: block;
	width: 180px;
	color: var(--eh-color-ink);
	text-decoration: none;
}

.eh-map-popup img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: var(--eh-radius-card) var(--eh-radius-card) 0 0;
}

.eh-map-popup__price {
	display: block;
	padding: 0.5rem 0.15rem 0.15rem;
	font-weight: 700;
}

.leaflet-popup-content-wrapper {
	border-radius: var(--eh-radius-card);
	padding: 0;
	overflow: hidden;
}

.leaflet-popup-content {
	margin: 0;
}

/* ---- Neighbourhoods boundary map (/neighbourhoods/ only) ---- */

.eh-neighbourhoods-map {
	height: 60vh;
	min-height: 380px;
	max-height: 640px;
	margin-top: 1.5rem;
	border-radius: var(--eh-radius-card);
	overflow: hidden;
	background: var(--eh-color-forest);
}

/* svh over dvh: same in-flow-block reasoning as .eh-search-results-map
   above — this isn't a fixed/full-bleed surface, so it shouldn't resize
   live as mobile browser chrome collapses mid-scroll. */
@supports (height: 60svh) {
	.eh-neighbourhoods-map {
		height: 60svh;
	}
}

/* Hover popup (name + listing count) — Leaflet 0.7.3 has no bindTooltip(),
   so neighbourhoods-map.js uses a borderless bindPopup() instead; these
   overrides strip the default popup chrome (tip, shadow, close button) so
   it reads as a lightweight label rather than a clickable card. */
.eh-neighbourhood-map-popup .leaflet-popup-content-wrapper {
	box-shadow: var(--eh-shadow-card);
	padding: 0.4rem 0.65rem;
}

.eh-neighbourhood-map-popup .leaflet-popup-content {
	font-size: 0.8rem;
	line-height: 1.4;
}

.eh-neighbourhood-map-popup .leaflet-popup-tip {
	display: none;
}

/* Always-on zoomed-in labels (past LABEL_ZOOM_THRESHOLD in
   neighbourhoods-map.js) — plain L.divIcon markers, not popups: Leaflet's
   vendored FeatureGroup (what MultiPolygon boundaries render as) has no
   closePopup(), and Map.openPopup() only ever allows one popup open at a
   time anyway, so popups can't show multiple simultaneous labels. Centered
   on the marker's 0x0 icon box via transform rather than iconSize, since
   content length varies per neighbourhood. */
.eh-neighbourhood-map-label {
	pointer-events: none;
	white-space: nowrap;
	text-align: center;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: var(--eh-radius-card);
	box-shadow: var(--eh-shadow-card);
	padding: 0.4rem 0.65rem;
	font-size: 0.8rem;
	line-height: 1.4;
}

/* ---- Neighbourhood directory (/neighbourhoods/ only): full A-Z list of
   every Edmonton neighbourhood, not just the curated ones with their own
   landing page (see eh_get_neighbourhood_directory()). ---- */

.eh-neighbourhood-directory {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--eh-color-ink-10);
}

.eh-neighbourhood-directory__heading {
	font-size: var(--eh-text-h2);
	margin: 0 0 1rem;
}

.eh-neighbourhood-directory__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.eh-neighbourhood-directory__jump a {
	padding: 0.3rem 0.75rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink-6);
	color: var(--eh-color-ink-75);
	font-size: 0.8rem;
	font-weight: 600;
}

.eh-neighbourhood-directory__jump a:hover,
.eh-neighbourhood-directory__jump a:focus-visible {
	background: var(--eh-color-forest);
	color: #fff;
}

.eh-neighbourhood-directory__band {
	scroll-margin-top: 1rem;
	margin-bottom: 1.75rem;
}

.eh-neighbourhood-directory__band-label {
	font-weight: 700;
	font-size: var(--eh-text-h3);
	color: var(--eh-color-forest);
	margin: 0 0 0.5rem;
}

/* Same dense-list rationale as .eh-site-footer__sitemap-list: each band can
   run 60-90+ names long, so CSS columns rather than a grid. */
.eh-neighbourhood-directory__list {
	columns: 2;
	column-gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.eh-neighbourhood-directory__list {
		columns: 3;
	}
}

@media (min-width: 900px) {
	.eh-neighbourhood-directory__list {
		columns: 4;
	}
}

.eh-neighbourhood-directory__list li {
	break-inside: avoid;
	padding-block: 0.3rem;
}

.eh-neighbourhood-directory__list a {
	font-size: 13px;
	color: var(--eh-color-ink-60);
}

.eh-neighbourhood-directory__list a:hover,
.eh-neighbourhood-directory__list a:focus-visible {
	color: var(--eh-color-coral);
}

/* Curated entries (have their own landing page) get a small coral marker to
   match the boundary map's color-coding. */
.eh-neighbourhood-directory__list li.is-curated a {
	color: var(--eh-color-ink);
	font-weight: 600;
}

.eh-neighbourhood-directory__list li.is-curated a::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--eh-color-coral);
	margin-right: 0.4rem;
}

/* ---- Landing pages (Chunk 3): property-type / neighbourhood / city ---- */

.eh-page-hero {
	padding: 3rem 1rem 2rem;
	text-align: center;
	background: var(--eh-color-panel);
}

@media (min-width: 900px) {
	.eh-page-hero {
		padding: 4rem 1rem 2.5rem;
	}
}

.eh-page-hero__title {
	margin: 0;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 5vw, 2.25rem);
	line-height: var(--eh-lh-display);
	color: var(--eh-color-ink);
}

.eh-page-content {
	padding: 2rem 0 1rem;
}

/* Targets only the hand-written intro paragraphs (direct <p> children of
   the_content()'s wpautop output) — the embedded [rps-listings] shortcode
   renders its own block-level .eh-search div here as a sibling, which is
   deliberately left unconstrained so it keeps the same width as the
   standalone /listings/ archive rather than being squeezed by a prose
   measure meant for paragraph text. */
.eh-page-content > p {
	max-width: 68ch;
	margin: 0 auto 1.25rem;
	padding-inline: 1rem;
	color: var(--eh-color-ink-85);
}

.eh-page-content > p:first-of-type {
	font-size: 1.125rem;
}

/* ---- Landing index pages (Chunk 4): /neighbourhoods/, /surrounding-cities/ ---- */

.eh-landing-index__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-top: 0.5rem;
}

@media (min-width: 700px) {
	.eh-landing-index__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

@media (min-width: 1100px) {
	.eh-landing-index__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.eh-landing-index-card,
.eh-landing-index-card:hover,
.eh-landing-index-card:focus-visible {
	display: block;
	background: var(--eh-color-card);
	border-radius: var(--eh-radius-card);
	box-shadow: var(--eh-shadow-card);
	padding: 1rem 1.1rem;
	color: var(--eh-color-ink);
	text-decoration: none;
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-landing-index-card:hover,
.eh-landing-index-card:focus-visible {
	transform: translateY(-2px);
}

.eh-landing-index-card__title {
	display: block;
	font-weight: 700;
	font-size: 1rem;
}

.eh-landing-index-card__count {
	display: block;
	margin-top: 0.2rem;
	color: var(--eh-color-ink-60);
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Homepage CTA banners — placeholder promotional breaks between the three
   listing sections (see template-parts/homepage/cta-banner.php). Reuses
   the dark forest-band treatment guidelines.md §2 specifies for the
   (currently unbuilt) Market Trends section, since the same "we have a
   confident dark accent block" motif applies here.
   ------------------------------------------------------------------ */

.eh-cta-banner {
	padding-block: 0.5rem;
}

.eh-cta-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 2rem 1.5rem;
	border-radius: var(--eh-radius-lg);
	background: var(--eh-color-forest);
	color: var(--eh-color-ivory);
}

@media (min-width: 700px) {
	.eh-cta-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 2.5rem 3rem;
	}
}

.eh-cta-banner__copy {
	min-width: 0;
}

.eh-cta-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	margin-bottom: 0.6rem;
	border-radius: var(--eh-radius-pill);
	background: rgba(237, 234, 225, 0.12);
	color: var(--eh-color-ivory);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eh-cta-banner__heading {
	margin: 0 0 0.4rem;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--eh-color-ivory);
}

.eh-cta-banner__subtext {
	margin: 0;
	max-width: 46ch;
	color: rgba(237, 234, 225, 0.75);
	font-size: 0.9rem;
	line-height: var(--eh-lh-body);
}

.eh-cta-banner__button,
.eh-cta-banner__button:hover,
.eh-cta-banner__button:focus-visible {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0.75rem 1.35rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: var(--eh-shadow-cta);
	text-decoration: none;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-cta-banner__button:hover,
.eh-cta-banner__button:focus-visible {
	background: var(--eh-color-coral-hover);
}

/* ---------------------------------------------------------------------
   Homepage side rails — fixed promotional boxes flanking the page on wide
   desktop viewports only. Box is 120px wide (matches the IAB "Skyscraper" ad
   unit width) and tall (min-height ~480px, content spread via
   justify-content:space-between) rather than wide-and-short, so it fits the
   gutter available at more realistic desktop widths. .eh-container caps at
   1200px; at 120px wide with a 10px viewport-edge margin + 10px breathing
   room before the container edge (140px of gutter per side), that gutter
   exists once the viewport is >=1480px wide — chosen to clear the default
   logical width of a 14"/16" MacBook Pro (1512px/1728px) with real margin,
   since macOS's default Retina scaling means "regular" Mac laptops report a
   much narrower CSS viewport than their physical resolution. Below the
   breakpoint this is hidden (not reflowed) rather than risk overlapping
   content — 13" Mac laptops (1280px) and unscaled ~1440px displays still
   won't clear it; there's no room to fit a legible box any narrower. z-index
   30 sits below the sticky header (40) in the existing
   header/cta-bar/drawer/lightbox 40/45/50/60 scale.

   Visibility is scroll-triggered (assets/js/main.js), not just breakpoint-
   gated: hidden by default via visibility/opacity/pointer-events (not
   display:none, so it can transition, and visibility:hidden correctly pulls
   the link out of tab order while hidden with no extra ARIA needed) and
   toggled to .is-visible once the visitor has scrolled down about half a
   viewport height — and back off again if they scroll back above that
   point.
   ------------------------------------------------------------------ */

.eh-side-rail {
	display: none;
}

@media (min-width: 1480px) {
	.eh-side-rail {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		z-index: 30;
		width: 120px;
		min-height: 480px;
		padding: 2rem 1.25rem;
		border-radius: var(--eh-radius-lg);
		background: var(--eh-color-forest);
		color: var(--eh-color-ivory);
		box-shadow: var(--eh-shadow-card);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--eh-motion-duration) var(--eh-motion-ease),
			visibility 0s linear var(--eh-motion-duration);
	}

	.eh-side-rail.is-visible {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity var(--eh-motion-duration) var(--eh-motion-ease),
			visibility 0s linear 0s;
	}

	.eh-side-rail--left {
		left: 10px;
	}

	.eh-side-rail--right {
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eh-side-rail,
	.eh-side-rail.is-visible {
		transition: none;
	}
}

.eh-side-rail__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.7rem;
	border-radius: var(--eh-radius-pill);
	background: rgba(237, 234, 225, 0.12);
	color: var(--eh-color-ivory);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eh-side-rail__heading {
	margin: 0;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: var(--eh-lh-display);
	color: var(--eh-color-ivory);
}

.eh-side-rail__subtext {
	margin: 0;
	font-size: 0.85rem;
	line-height: var(--eh-lh-body);
	color: rgba(237, 234, 225, 0.75);
}

.eh-side-rail__button,
.eh-side-rail__button:hover,
.eh-side-rail__button:focus-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 0.75rem 0.6rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
	box-shadow: var(--eh-shadow-cta);
	text-decoration: none;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-side-rail__button:hover,
.eh-side-rail__button:focus-visible {
	background: var(--eh-color-coral-hover);
}

/* ---------------------------------------------------------------------
   Saved listings — sitewide floating "Saved" FAB + slide-out sidebar.
   Local-cache only (assets/js/main.js), no account/auth (CLAUDE.md #9).
   ------------------------------------------------------------------ */

.eh-saved-fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.15rem;
	border: none;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-ink);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	box-shadow: var(--eh-shadow-fab);
}

.eh-saved-fab[hidden] {
	display: none;
}

/* Single-listing pages have their own fixed bottom-right element, the
   sticky CTA bar (~88px tall including its own safe-area padding — see
   .eh-single-listing's own comment on that figure) — clear it instead of
   stacking on top, since both sit at the same z-index and DOM order alone
   would otherwise put the FAB visually over the Call/Email button. */
.single-rps_listing .eh-saved-fab {
	bottom: calc(88px + 1.25rem + env(safe-area-inset-bottom));
}

.eh-saved-fab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 0.3rem;
	border-radius: var(--eh-radius-pill);
	background: var(--eh-color-coral);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Hot-listings lead popup (ROADMAP.md Phase 5.5, leadsplan.md) — same
   overlay/dialog recipe as .eh-saved-sidebar below, but centered instead of
   a slide-in panel, plus Fluent Forms field overrides so the embedded form
   matches the theme instead of Fluent Forms' own default look. */
.eh-lead-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--eh-color-ink-40);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-lead-modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.eh-lead-modal-overlay[hidden] {
	display: none;
}

.eh-lead-modal {
	position: fixed;
	inset: 0;
	z-index: 61;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-lead-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.eh-lead-modal[hidden] {
	display: none;
}

.eh-lead-modal__panel {
	position: relative;
	width: min(90vw, 460px);
	max-height: 90dvh;
	overflow-y: auto;
	background: var(--eh-color-card);
	box-shadow: var(--eh-shadow-sheet);
	padding: 2.5rem 2rem 2rem;
}

.eh-lead-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--eh-color-ink-60);
	cursor: pointer;
}

.eh-lead-modal__close:hover,
.eh-lead-modal__close:focus-visible {
	color: var(--eh-color-ink);
}

.eh-lead-modal__eyebrow {
	font-size: var(--eh-text-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--eh-text-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--eh-color-coral);
	margin: 0 0 0.5rem;
}

.eh-lead-modal__title {
	font-size: var(--eh-text-h2);
	margin: 0 0 0.5rem;
}

.eh-lead-modal__subtext {
	color: var(--eh-color-ink-75);
	margin: 0 0 1.5rem;
}

.eh-lead-modal .ff-el-input--label label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eh-color-ink-60);
}

.eh-lead-modal .ff-el-form-control {
	width: 100%;
	border: 1px solid var(--eh-color-ink-15);
	background: var(--eh-color-panel);
	padding: 0.7rem 0.9rem;
	font-family: var(--eh-font-body);
	font-size: 0.95rem;
	color: var(--eh-color-ink);
}

.eh-lead-modal .ff-el-form-control:focus {
	outline: 2px solid var(--eh-color-coral);
	outline-offset: 1px;
}

.eh-lead-modal .ff-el-form-control[readonly] {
	background: var(--eh-color-ink-6);
	color: var(--eh-color-ink-60);
	cursor: not-allowed;
}

.eh-lead-modal .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: var(--eh-color-coral);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.85rem 1.25rem;
	cursor: pointer;
	transition: background var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-lead-modal .ff-btn-submit:hover,
.eh-lead-modal .ff-btn-submit:focus-visible {
	background: var(--eh-color-coral-hover);
}

.eh-saved-sidebar-overlay {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--eh-color-ink-40);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-saved-sidebar-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.eh-saved-sidebar-overlay[hidden] {
	display: none;
}

.eh-saved-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 56;
	display: flex;
	flex-direction: column;
	width: min(90vw, 400px);
	height: 100dvh;
	background: var(--eh-color-card);
	box-shadow: var(--eh-shadow-sheet);
	transform: translateX(100%);
	transition: transform var(--eh-motion-duration) var(--eh-motion-ease);
}

.eh-saved-sidebar[hidden] {
	display: none;
}

.eh-saved-sidebar.is-open {
	transform: translateX(0);
}

.eh-saved-sidebar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem;
	border-bottom: 1px solid var(--eh-color-ink-10);
}

.eh-saved-sidebar__title {
	margin: 0;
	font-family: var(--eh-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--eh-color-ink);
}

.eh-saved-sidebar__close {
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--eh-color-ink);
	cursor: pointer;
}

.eh-saved-sidebar__list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.5rem 1.25rem;
	padding-bottom: max(env(safe-area-inset-bottom), 1.25rem);
}

.eh-saved-sidebar__empty {
	padding: 2rem 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--eh-color-ink-40);
}

.eh-saved-sidebar__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--eh-color-ink-10);
}

.eh-saved-sidebar__item-photo {
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	border-radius: var(--eh-radius-card);
	background: var(--eh-color-ink-6);
	object-fit: cover;
}

.eh-saved-sidebar__item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.eh-saved-sidebar__item-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--eh-color-ink);
}

.eh-saved-sidebar__item-title:hover,
.eh-saved-sidebar__item-title:focus-visible {
	color: var(--eh-color-coral);
}

.eh-saved-sidebar__item-price {
	margin: 0.15rem 0 0;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--eh-color-coral);
}

.eh-saved-sidebar__item-remove {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--eh-color-ink-15);
	border-radius: var(--eh-radius-pill);
	background: transparent;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--eh-color-ink-60);
	cursor: pointer;
}

.eh-saved-sidebar__item-remove:hover,
.eh-saved-sidebar__item-remove:focus-visible {
	border-color: var(--eh-color-coral);
	color: var(--eh-color-coral);
}