/* Page-scoped search experience. The site's header, footer and buttons are reused. */
.home-search-page { --search-teal: #063d45; --search-ink: #17383e; --search-line: #dce3e1; background: #fcfcfa; color: var(--search-ink); }
.home-search-page [hidden] { display: none !important; }
.home-search-page :is(input, textarea, select, button, a, summary):focus-visible { outline: 3px solid #b1842d; outline-offset: 3px; }
.home-search-page .site-header { background: var(--search-teal); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.search-skip-link { position: fixed; top: -100px; left: 20px; padding: 16px; background: white; z-index: 50; }
.search-skip-link:focus { top: 12px; }
.main-search-back { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; max-width: calc(100% - 32px); min-height: 26px; padding: 3px 10px; border: 1px solid #d7b66c; border-radius: 999px; background: #023842; color: #fffaf0; font-size: 8px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 2px 6px #001f2526; }
.main-search-back-arrow { color: #d6a84d; font-size: 12px; font-weight: 400; line-height: 1; transform: translateY(-1px); }
.main-search-back:hover, .main-search-back:focus-visible { border-color: #f0cd7b; background: #074751; color: #fff; }
/* A light scrim -- ~60% opacity at the far left (behind the headline,
   for accessible white-text contrast), fading fast to ~30% around the
   skyline/search area and ~10% over the house on the right, so the
   photo's own warm sunset color, water and skyline read through instead
   of a flat teal filter. Same overlay color already used here (#00333d);
   only the stop opacities changed. hero-search-tampa-sunset.webp is
   dedicated to this hero -- hero-stpete-waterfront-2(-mobile).webp
   remains in use elsewhere (about-ekin.html, calculators.html, several
   gallery-test fixtures). */
.search-hero { position: relative; color: white; background: linear-gradient(90deg, #00333d99 0%, #00333d4d 40%, #00333d1f 65%, #00333d14 100%), url('/assets/search-hero-sunset.webp') center 55%/cover; }
.search-hero-inner { position: relative; z-index: 1; max-width: 1500px; padding: 38px 5vw 28px; margin: auto; }
.search-hero .kicker { margin: 0 0 12px; color: #f6d480; font-size: 11px; letter-spacing: .22em; }
.search-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(44px, 4.5vw, 70px); font-weight: 500; line-height: .99; letter-spacing: -.035em; margin: 0; }
.search-hero h1 em { color: #f2cb75; font-weight: 500; }
.search-hero-subtitle { font-size: 16px; line-height: 1.6; margin: 16px 0 20px; }
.search-modes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 820px; margin-bottom: 14px; }
/* display:contents keeps the tablist's own ARIA semantics (a tablist may
   only contain tab children) while letting its two <button> children sit
   as direct, equal-width grid items alongside the Map Search button --
   this is a standalone action, not a third exclusive mode, so it stays
   outside the tablist itself; see setView()/displayUI() in home-search.js. */
.search-modes { display: contents; }
.search-modes button, .search-mode-map-button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #6f9294; border-radius: 8px; color: white; padding: 14px 10px; background: #023841ab; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; min-height: 52px; text-align: center; white-space: nowrap; }
.search-modes button[aria-selected='true'], .search-mode-map-button[aria-pressed='true'] { border-color: var(--gold); color: var(--search-ink); background: var(--gold); }
.search-modes button:hover, .search-mode-map-button:hover { border-color: var(--gold); }
.hero-search-form { display: flex; gap: 12px; align-items: center; background: white; border: 1px solid #e5d5b2; padding: 10px; max-width: 820px; border-radius: 10px; color: var(--search-ink); box-shadow: 0 14px 34px #00000022; }
.search-spark { flex: 0 0 30px; margin-left: 8px; color: #a97920; font-size: 28px; text-align: center; }
.hero-search-form textarea, .hero-search-form input { flex: 1; min-width: 0; border: 0; font-size: 13px; line-height: 1.6; padding: 6px 0; background: white; resize: none; }
.hero-search-form :is(textarea,input)::placeholder { color: #6b737a; opacity: 1; }
.hero-search-form .button { flex-shrink: 0; font-size: 12px; text-transform: none; letter-spacing: 0; gap: 20px; min-height: 52px; border-radius: 3px; padding: 14px 24px; }
.ai-preview-note { font-size: 11px; line-height: 1.6; color: #e1e9e7; margin: 9px 0 0; }
.search-hero-signoff { position: absolute; bottom: 34px; right: 5vw; margin: 0; font-family: Georgia, serif; font-style: italic; text-align: center; font-size: 27px; text-shadow: 0 2px 10px #003039; }
.search-hero-signoff span { display: block; font-family: Arial, sans-serif; font-size: 9px; font-style: normal; letter-spacing: .3em; margin-top: 10px; }
.search-trust { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--search-line); padding: 18px 5vw; background: #f5f5f1; }
.search-trust > div { display: flex; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid #d9e1df; }
.search-trust > div:last-child { border: 0; }
.search-trust svg { width: 20px; height: 20px; flex-shrink: 0; padding: 13px; box-sizing: content-box; border-radius: 50%; background: var(--search-teal); color: white; }
.search-trust strong, .search-trust small { display: block; font-size: 11px; line-height: 1.5; }
.search-trust small { font-size: 10px; font-weight: 400; margin-top: 3px; }
.lifestyle-section { padding: 34px 5vw 40px; max-width: 1500px; margin: auto; }
.lifestyle-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.lifestyle-heading .kicker { margin: 0 0 10px; }
.lifestyle-heading h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 500; margin: 0; color: var(--search-ink); }
.lifestyle-subtitle { font-size: 14px; line-height: 1.6; color: #5c6b6e; margin: 10px 0 0; }
.lifestyle-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "water water water water water water water city city city city city" "water water water water water water water fees fees fees fees fees" "new new new new pool pool pool pool inv inv inv inv"; gap: 16px; }
.lifestyle-card { position: relative; display: block; min-width: 0; border: 0; border-radius: 10px; overflow: hidden; padding: 0; background: var(--search-teal); color: white; text-align: left; }
.lifestyle-card-water { grid-area: water; }
.lifestyle-card-city { grid-area: city; aspect-ratio: 16 / 7; }
.lifestyle-card-fees { grid-area: fees; aspect-ratio: 16 / 7; }
.lifestyle-card-new { grid-area: new; aspect-ratio: 4 / 3; }
.lifestyle-card-pool { grid-area: pool; aspect-ratio: 4 / 3; }
.lifestyle-card-investment { grid-area: inv; aspect-ratio: 4 / 3; }
.lifestyle-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lifestyle-card-fees img { object-position: 65%; }
.lifestyle-card-new img { object-position: center 82%; }
.lifestyle-card-pool img { object-position: center 65%; }
.lifestyle-card-investment img { object-position: center 70%; }
.lifestyle-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, #052c2ab3 74%, #052c2ae3 100%); pointer-events: none; }
.lifestyle-card-copy { position: absolute; left: 0; right: 58px; bottom: 0; padding: 18px 20px; }
.lifestyle-card-copy strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.2; }
.lifestyle-card-copy small { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 6px; opacity: .92; }
.lifestyle-card-water .lifestyle-card-copy { right: 74px; padding: 26px; }
.lifestyle-card-water .lifestyle-card-copy strong { font-size: 30px; }
.lifestyle-card-water .lifestyle-card-copy small { font-size: 13px; margin-top: 8px; }
.lifestyle-card-arrow { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--search-ink); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background .2s ease, color .2s ease; }
.lifestyle-card-water .lifestyle-card-arrow { right: 22px; bottom: 22px; width: 44px; height: 44px; font-size: 17px; }
.lifestyle-card:hover img, .lifestyle-card:focus-visible img { transform: scale(1.045); }
.lifestyle-card:hover .lifestyle-card-arrow, .lifestyle-card:focus-visible .lifestyle-card-arrow { background: var(--gold); }
.search-notice { max-width: 1400px; margin: 0 auto 20px; padding: 16px 24px; background: #f9f0d9; border-left: 3px solid #be9140; font-size: 13px; line-height: 1.5; }
.search-workspace { display: grid; grid-template-columns: 285px minmax(0, 1fr) 285px; align-items: start; gap: 24px; max-width: 1500px; margin: auto; padding: 24px 32px 60px; border-top: 1px solid var(--search-line); }
.search-filter-sidebar { border-right: 1px solid var(--search-line); padding-right: 20px; }
.filter-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; }
.filter-heading h2 { font-size: 11px; text-transform: uppercase; margin: 0; }
.search-reset { border: 0; background: none; color: #8b600d; padding: 5px 0; font-size: 11px; min-height: 32px; }
.home-search-form details { border: 0; border-top: 1px solid var(--search-line); padding: 0 0 4px; background: transparent; }
.home-search-form summary { padding: 12px 0; cursor: pointer; list-style: none; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.home-search-form summary::after { content: '+'; color: #597377; font-size: 15px; }
.home-search-form details[open] > summary::after { content: '−'; }
.home-search-form summary::-webkit-details-marker { display: none; }
.home-search-form label { text-transform: none; letter-spacing: 0; font-size: 11px; gap: 7px; }
.home-search-form :is(input:not([type='checkbox']):not([type='radio']),select) { padding: 9px; min-height: 38px; border: 1px solid #ccd8da; border-radius: 3px; font-size: 12px; background: #fff; }
.home-search-form input::placeholder { color: #6f7d81; opacity: 1; }
.filter-price { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.filter-price label { min-width: 0; font-size: 10px; }
.filter-choice { border: 0; border-top: 1px solid var(--search-line); padding: 12px 0 14px; margin: 0; display: flex; gap: 5px; }
.open-house-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 10px; }
.open-house-dates label { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--search-muted, #55646a); }
.open-house-dates input { min-width: 0; min-height: 40px; border: 1px solid var(--search-line); border-radius: 8px; padding: 0 10px; font: inherit; color: var(--search-ink); background: #fff; }
/* The time window on one chosen day: the same two columns as the days. */
.open-house-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0 0; }
.open-house-times label { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--search-muted, #55646a); }
.open-house-times select { width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--search-line); border-radius: 8px; padding: 0 8px; font: inherit; color: var(--search-ink); background: #fff; }
.open-house-times select:disabled { color: #6e7777; background: #f3f5f5; cursor: not-allowed; }
.open-house-times select[aria-invalid="true"] { border-color: #a02d22; box-shadow: 0 0 0 1px #a02d22; }
.open-house-time-error { margin: 6px 0 0; }
.filter-choice legend { font-size: 11px; font-weight: 600; padding: 10px 0 0; }
.filter-choice label { flex: 1; position: relative; display: block; cursor: pointer; }
.filter-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-choice label > span { display: block; text-align: center; padding: 8px 2px; border: 1px solid #d1dcde; border-radius: 3px; background: #fff; }
.filter-choice input:checked + span { border-color: #30606b; box-shadow: inset 0 0 0 1px #30606b; background: #edf4f3; }
.filter-choice input:focus-visible + span { outline: 3px solid #b1842d; outline-offset: 2px; }
.filter-checks { display: grid; gap: 10px; padding-bottom: 12px; }
.home-search-form .check-option { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; }
.check-option input { width: 15px; height: 15px; margin: 0; accent-color: #063d45; flex-shrink: 0; }
.check-option:has(input:disabled) { color: #6e7777; }
.filter-note { color: #627173; font-size: 10px; line-height: 1.6; margin: 8px 0 10px; }
.search-apply { width: 100%; background: transparent; border: 1px solid #b98a30; color: #815805; margin-top: 15px; min-height: 42px; padding: 10px; }
.search-validation { font-size: 12px; line-height: 1.5; color: #a02d22; }
.filter-advisor { margin-top: 24px; }
.ekin-match-promo { position: relative; isolation: isolate; overflow: hidden; padding: 34px 24px 22px; border: 1px solid #dedfd8; border-radius: 7px; background: #fbf8f0; box-shadow: 0 4px 18px #17383e0a; }
.ekin-match-promo::before { content: ''; position: absolute; z-index: -2; top: 0; right: 0; width: 58%; height: 39%; background: url('/assets/hero-search-tampa-sunset.webp') 79% center / cover; }
.ekin-match-promo::after { content: ''; position: absolute; z-index: -1; top: -94px; right: 48px; width: 390px; height: 390px; border-radius: 48%; background: #fbf8f0; transform: rotate(28deg); box-shadow: 32px 20px 45px #f1eadc; }
.ekin-match-promo-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.ekin-match-sparkles { color: #a57a1f; font-size: 36px; line-height: 1; text-shadow: -13px 15px 0 #a57a1f, 7px 20px 0 #a57a1f; }
.ekin-match-promo-brand strong { font-size: 12px; letter-spacing: .28em; }
.ekin-match-promo h2 { max-width: 238px; margin: 0 0 20px; font: 400 35px/1.03 Georgia, serif; letter-spacing: -.02em; }
.ekin-match-promo h3 { max-width: 230px; margin: 0 0 15px; font: 700 18px/1.35 Manrope, Arial, sans-serif; }
.ekin-match-promo > p { max-width: 230px; margin: 0 0 22px; color: #52686c; font-size: 13px; line-height: 1.62; }
.ekin-match-promo .ekin-match-promo-cta { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 7px; width: 100%; min-height: 54px; padding: 13px 12px; border-radius: 4px; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.ekin-match-promo-cta > span { font-size: 18px; line-height: 1; }
/* Longer translations wrap onto a second line instead of being cut off. */
.ekin-match-promo .ekin-match-promo-cta { align-items: center; }
.ekin-match-promo .ekin-match-promo-cta > strong { white-space: normal; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
.ekin-match-promo > small { display: block; margin: 10px 0 22px; color: #5a7074; text-align: center; font-size: 10px; }
.ekin-match-promo-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; border-top: 1px solid #dddcd4; }
.ekin-match-promo-features > span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; color: #536b6f; text-align: center; font-size: 8px; line-height: 1.35; }
.ekin-match-promo-features svg { width: 25px; height: 25px; color: var(--search-teal); }
.map-search-promo { position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px 22px; border: 1px solid #dedfd8; border-radius: 7px; background: #fbf8f0; box-shadow: 0 4px 18px #17383e0a; }
.map-search-promo::before { content: ''; position: absolute; z-index: -1; top: -116px; left: -102px; width: 350px; height: 365px; border-radius: 47%; background: #fbf8f0; transform: rotate(-23deg); box-shadow: 26px 22px 42px #f1eadc; }
.map-search-promo-art { position: absolute; z-index: -2; top: 0; right: 0; width: 62%; height: 38%; object-fit: cover; }
.map-search-promo-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.map-search-promo-brand > svg { width: 28px; height: 28px; color: var(--search-teal); }
.map-search-promo-brand strong { font-size: 12px; letter-spacing: .27em; }
.map-search-promo h2 { max-width: 230px; margin: 0 0 12px; font: 400 34px/1.03 Georgia, serif; letter-spacing: -.02em; }
.map-search-promo h3 { max-width: 225px; margin: 0 0 14px; font: 700 18px/1.35 Manrope, Arial, sans-serif; }
.map-search-promo > p { max-width: 225px; margin: 0 0 20px; color: #52686c; font-size: 13px; line-height: 1.62; }
.map-search-promo .map-search-promo-cta { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 7px; width: 100%; min-height: 54px; padding: 13px 12px; border: 0; border-radius: 4px; color: var(--search-ink); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.map-search-promo-cta > svg { width: 20px; height: 20px; }
.map-search-promo-cta > span { font-size: 18px; line-height: 1; }
.map-search-promo > small { display: block; margin: 10px 0 22px; color: #5a7074; text-align: center; font-size: 10px; }
.map-search-promo-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; border-top: 1px solid #dddcd4; }
.map-search-promo-features > span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; color: #536b6f; text-align: center; font-size: 8px; line-height: 1.35; }
.map-search-promo-features svg { width: 25px; height: 25px; color: var(--search-teal); }
/* Mila Match card (Ekin, 14 October 2026): first card under the filters, links to /mila-match.
   Its gold button needs !important to beat styles.css's .button-gold, like the cards below it. */
.mila-match-promo { position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px 22px; border: 1px solid #e3d3ad; border-radius: 7px; background: radial-gradient(130% 62% at 100% 0%, #f2e2bb 0%, #f8efdb 34%, #fbf8f0 64%); box-shadow: 0 4px 18px #17383e0a; }
.mila-match-promo-avatar { position: absolute; top: 18px; right: 18px; width: 78px; height: 78px; padding: 3px; border-radius: 50%; background: linear-gradient(145deg, #f4d891, #b9862c); box-shadow: 0 8px 22px #6b4a1238; }
.mila-match-promo-avatar img { display: block; width: 100%; height: 100%; border: 2px solid #fbf8f0; border-radius: 50%; object-fit: cover; }
.mila-match-promo-brand { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 4px 92px 36px 0; }
.mila-match-promo-brand > svg { flex: none; width: 26px; height: 26px; color: #b9862c; }
.mila-match-promo-brand strong { font-size: 12px; letter-spacing: .27em; }
.mila-match-promo h2 { margin: 0 0 14px; font: 400 33px/1.05 Georgia, serif; letter-spacing: -.02em; }
.mila-match-promo h2 em { color: #a57a1f; }
.mila-match-promo h3 { max-width: 240px; margin: 0 0 12px; font: 700 18px/1.35 Manrope, Arial, sans-serif; }
.mila-match-promo > p { max-width: 240px; margin: 0 0 20px; color: #52686c; font-size: 13px; line-height: 1.62; }
/* Dark teal like the AI Search and Map Search cards' buttons (Ekin, 14 October 2026). */
.mila-match-promo .mila-match-promo-cta { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 7px; width: 100%; min-height: 54px; padding: 13px 12px; border: 1px solid #0f3b40 !important; border-radius: 4px; background: #0f3b40 !important; color: #fff !important; font-size: 10px; letter-spacing: .04em; box-shadow: none; }
.mila-match-promo .mila-match-promo-cta:hover, .mila-match-promo .mila-match-promo-cta:focus-visible { background: #155058 !important; color: #fff !important; }
.mila-match-promo-cta > svg { width: 18px; height: 18px; color: #d4a24c; }
.mila-match-promo-cta > strong { white-space: normal; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
.mila-match-promo-cta > span { font-size: 18px; line-height: 1; }
.mila-match-promo > small { display: block; margin: 10px 0 22px; color: #5a7074; text-align: center; font-size: 10px; }
.mila-match-promo-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; border-top: 1px solid #e3d8bf; }
.mila-match-promo-features > span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; color: #536b6f; text-align: center; font-size: 8px; line-height: 1.35; }
.mila-match-promo-features svg { width: 25px; height: 25px; color: #b9862c; }
.search-results { min-width: 0; scroll-margin-top: 180px; }
.search-results-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 14px; }
.search-results-toolbar h2 { font-family: 'DM Sans', Arial, sans-serif; font-size: 20px; line-height: 1.3; margin: 0; }
#search-summary { margin: 5px 0 0; color: #657577; font-size: 11px; line-height: 1.5; }
.search-sort { display: flex; align-items: center; gap: 5px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 10px; }
.search-sort select { width: 136px; border: 1px solid #d2dee0; border-radius: 3px; background: white; padding: 9px 5px; font-size: 10px; min-height: 36px; }
.search-view-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.search-view-controls { display: flex; gap: 6px; }
.search-view-controls button { min-height: 34px; padding: 7px 19px; border: 1px solid #cfdadc; background: white; color: var(--search-ink); border-radius: 3px; font-size: 11px; }
.search-view-controls button[aria-pressed='true'] { background: var(--search-teal); border-color: var(--search-teal); color: white; }
.mobile-filter-button { display: none; }
.search-active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.search-active-filters:empty { display: none; }
.search-active-filters button { background: #f6f0df; color: #65501f; border: 1px solid #ded0aa; border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; font-size: 11px; }
.search-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 46px 28px; min-height: 370px; text-align: center; border: 1px solid #dee4df; background: linear-gradient(135deg, #fff, #f4f5ef); border-radius: 4px; }
.search-state-icon { font-size: 44px; line-height: 1; color: #9d7b36; margin-bottom: 20px; }
.search-state h3 { font-family: Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.15; margin: 0 0 15px; }
.search-state p { font-size: 13px; color: #607173; line-height: 1.8; max-width: 400px; margin: 0 0 22px; }
.search-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.search-state-actions a, .search-state-actions button { min-height: 44px; }
.search-secondary { border: 1px solid #b7c7c8; border-radius: 3px; padding: 12px 16px; background: white; color: var(--search-ink); font-size: 12px; }
.listing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.listing-grid:empty { display: none; }
.search-secondary-tools { display: grid; gap: 16px; }
/* Saved homes and the map together (search.html): one box only where the map sits beside the results. */
.search-side-main { display: contents; }
.search-map { border: 1px solid #d6e1df; border-radius: 4px; background: #eef3ef; overflow: hidden; }
.map-toolbar h2 { font-size: 12px; margin: 0; }
/* A prominent route back to the main listing experience. On Search Homes
   it switches the current Map workspace back to Grid without a reload; on
   Ekin Match the matching link returns to /searchhomes. */
.map-exit-link { align-self: flex-start; margin: 14px 16px 0; }
.map-toolbar button[disabled] { cursor: default; }
.map-canvas { position: relative; min-height: 360px; background-image: linear-gradient(#dfe8e455 1px, transparent 1px), linear-gradient(90deg, #dfe8e455 1px, transparent 1px); background-size: 34px 34px; }
.map-surface { position: absolute; inset: 0; }
.map-status { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.map-status[hidden] { display: none; }
.map-status-panel { text-align: center; padding: 32px 22px; max-width: 320px; pointer-events: auto; }
.map-status-panel[hidden] { display: none; }
/* The "no homes in this drawn area" message sits directly over the map --
   now potentially over the translucent gold fill/gold boundary too -- so it
   gets a small, semi-transparent white surface for reliable contrast over
   bright satellite imagery. Scoped to this one panel only; the idle/error/
   unconfigured panels are unchanged. */
.map-status-panel[data-map-panel='empty'] { background: #ffffffe6; border-radius: 10px; box-shadow: 0 4px 18px #00000026; }
.map-status-panel svg { width: 52px; height: 52px; color: #8ba9a4; margin-bottom: 16px; }
.map-status-panel h3 { font-family: Georgia, serif; font-size: 24px; font-weight: 400; margin: 0 0 14px; }
.map-status-panel p { font-size: 12px; line-height: 1.8; color: #5f7371; margin: 0 0 20px; }
.map-status-panel .map-status-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.map-search-area-button { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; border: 1px solid var(--search-teal); border-radius: 20px; padding: 10px 20px; background: var(--search-teal); color: white; font-size: 11px; letter-spacing: .04em; box-shadow: 0 4px 14px #00000033; }
.map-search-area-button[hidden] { display: none; }
/* Homes on the map (Search Homes, Map Search, AI Search): dark teal price tags that turn gold under the pointer,
   with the keyboard, or when their home is the one chosen in the results (Ekin, 28 October 2026). */
.map-pin { position: absolute; transform: translate(-50%, -100%); background: var(--search-teal); border: 1px solid #fff; border-radius: 14px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px #0000003d; transition: background-color .15s ease, color .15s ease; }
.map-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--search-teal); transition: border-top-color .15s ease; }
.map-pin:is(:hover, :focus-visible, [data-selected='true']) { z-index: 2; background: var(--gold); color: var(--search-ink); }
.map-pin:is(:hover, :focus-visible, [data-selected='true'])::after { border-top-color: var(--gold); }
/* The home pointed at: its pin under the pointer (Map Search has no results beside it), or its card in the
   results or Map Search's preview (home-search-map.js). Gold with a soft halo, above every other pin. */
.map-pin:is(:hover, [data-hovered='true']) { z-index: 3; background: var(--gold); color: var(--search-ink); box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgb(214 168 77 / .45), 0 6px 22px rgb(214 168 77 / .75); }
.map-pin[data-hovered='true']::after { border-top-color: var(--gold); }
.map-pin[data-only='true'] { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .map-pin:is(:hover, [data-hovered='true']) { animation: map-pin-halo 1.6s ease-in-out infinite; } }
@keyframes map-pin-halo { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 12px rgb(214 168 77 / .22), 0 6px 28px rgb(214 168 77 / .85); } }
/* Redesigned (real-data UX pass): smaller, lighter, more transparent
   bubbles with a crisp white border and high-contrast dark text -- large
   opaque circles made city labels unreadable and overlapped heavily at a
   realistic metro-wide density. Cluster DENSITY itself is fixed server-
   side (idx_map_markers' cell size, 20260930170000_idx_map_marker_
   density.sql); this only fixes how each individual bubble looks. */
.map-cluster { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #06364073; border: 1.5px solid #ffffffe6; color: #ffffff; font-size: 10.5px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px #00000026;
  text-shadow: 0 1px 2px #00000080; backdrop-filter: blur(1px); }
.map-cluster:hover, .map-cluster:focus-visible { background: #063d45c2; }
/* Same-point group (idx_map_markers 'group' objects, 20260930220000): a
   real, specific number of homes sharing one exact geocode -- deliberately
   NOT shaped like .map-cluster (a broad-area summary a shopper still needs
   to zoom into) so the two are never confused. A compact gold pill with a
   real "N homes" label reads as "click to see the list", not "zoom in
   more" -- clicking it opens the grouped-results panel immediately. */
.map-group { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px;
  background: white; border: 1.5px solid var(--gold); border-radius: 20px; padding: 5px 11px; color: var(--search-ink);
  font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 6px #00000026; }
.map-group::before { content: '⌂⌂'; letter-spacing: -3px; font-size: 11px; color: var(--gold); }
.map-group:hover, .map-group:focus-visible { background: #fdf6e8; }
.map-summary { font-size: 10px; line-height: 1.6; padding: 12px; margin: 0; background: #ffffffa3; }
.saved-summary, .search-help { border: 1px solid #dfe3dd; border-radius: 4px; padding: 20px; background: #fff; }
.saved-summary h2 { font-size: 14px; margin: 0; display: flex; justify-content: space-between; }
.saved-summary p { font-size: 11px; color: #607173; line-height: 1.7; margin-bottom: 0; }
#saved-count { color: #826320; }
.search-help svg { width: 40px; height: 40px; float: left; margin: 0 14px 12px 0; }
.search-help h2 { font-family: Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.05; margin: 0 0 15px; }
.search-help p { font-size: 12px; line-height: 1.7; margin: 12px 0 18px; clear: both; }
.search-help .button { width: 100%; font-size: 10px; letter-spacing: 0; padding: 14px 10px; }
/* Map view is an added capability, not a Grid/List replacement: outside
   map mode the map section stays entirely out of the layout (and its
   provider script/library is never loaded) so Grid/List visitors pay
   nothing for it. */
.search-workspace:not([data-view='map']):not([data-map-side='true']) .search-map { display: none; }
.search-workspace[data-view='map'] :is(.saved-summary, .search-help) { display: none; }
/* Full-page Map workspace (Phase D). Map mode is a dedicated, app-like
   screen, not a section of the normal Search Homes page: home-search-map.js
   toggles body.map-mode the instant Map is selected, which hides the
   hero/trust/lifestyle content and the permanent filter sidebar and lets
   the map fill essentially the whole viewport below the sticky header.
   Grid/List never get this class and keep the exact page they always had.
   --map-header-height is set from JS to the real measured header height
   (safe-area-inset makes it non-constant), with a same-value fallback. */
body.map-mode { overflow: hidden; }
/* A swipe on the full-screen map never pulls the page to refresh. */
:root:has(body.map-mode) { overscroll-behavior: none; }
body.map-mode :is(.search-hero, .search-hero-signoff, .search-trust, .lifestyle-section, .search-notice) { display: none; }
body.map-mode .search-workspace { display: block; padding: 0; margin: 0; max-width: none; border-top: 0; height: calc(100vh - var(--map-header-height, 74px)); height: calc(100dvh - var(--map-header-height, 74px)); overflow: hidden; }
body.map-mode .search-workspace[data-view='map'] .search-filter-sidebar { display: none; }
body.map-mode .search-workspace[data-view='map'] .search-results { display: none; }
body.map-mode .search-workspace[data-view='map'] .search-secondary-tools { display: block; height: 100%; margin: 0; }
body.map-mode #search-map { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 0; background: white; }
body.map-mode #search-map .map-canvas { flex: 1; min-height: 0; }
/* Map Search toolbar redesign: one clean row on desktop -- a large search
   field that takes most of the width, one consolidated Filters button (not
   four), Draw Area, and a Map/Satellite segmented control. Gold is used
   ONLY for a real active/selected state (filters actually applied, Draw
   Area drawing or a drawn area existing, the selected map type); every
   other control stays white with dark-teal text, never low-contrast gray. */
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; }
.map-toolbar-search { position: relative; flex: 1 1 320px; min-width: 200px; display: flex; align-items: center; }
.map-toolbar-search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--search-ink); pointer-events: none; }
.map-toolbar-search input { width: 100%; height: 46px; border: 1px solid var(--search-line); border-radius: 6px; padding: 0 14px 0 42px; font-size: 14px; color: var(--search-ink); background: #fff; }
.map-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-toolbar-button { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--search-line); background: #fff; color: var(--search-ink); border-radius: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.map-toolbar-button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.map-toolbar-button[aria-expanded='true'], .map-toolbar-button[aria-pressed='true'], .map-toolbar-button[data-active='true'] { background: var(--gold); border-color: var(--gold); color: var(--search-ink); }
.map-clear-all-button { border-color: #bd8e2c; color: #765910; background: #fffaf0; }
.map-clear-all-button:hover, .map-clear-all-button:focus-visible { background: #f6ebca; border-color: #9c721c; }
.map-place-radius { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px 12px; background: #fff; border-top: 1px solid var(--search-line); color: var(--search-ink); font-size: 12px; }
.map-place-radius[hidden] { display: none; }
.map-place-radius div { display: flex; gap: 6px; }
.map-place-radius button { border: 1px solid #bd8e2c; border-radius: 999px; background: #fffaf0; color: var(--search-ink); padding: 6px 11px; font-weight: 700; cursor: pointer; }
.map-place-radius button:hover, .map-place-radius button:focus-visible { background: var(--gold); }
.map-custom-radius { display: inline-flex; align-items: center; gap: 4px; }
.map-custom-radius input { width: 76px; min-height: 30px; border: 1px solid #bd8e2c; border-radius: 999px; padding: 4px 10px; color: var(--search-ink); background: #fff; font: inherit; }
.map-place-anchor { width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: var(--gold); box-shadow: 0 2px 8px #001f2577; transform: translate(-50%, -100%) rotate(-45deg); }
.map-filter-count { font-weight: 700; }
.map-draw-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: #eef3ef; border: 1px solid var(--search-line); border-radius: 6px; padding: 8px 12px; }
.map-draw-status button { border: 0; background: none; color: var(--search-teal); text-decoration: underline; font-size: 12px; font-weight: 600; padding: 0; }
.map-type-toggle { display: flex; height: 46px; border: 1px solid var(--search-line); border-radius: 6px; overflow: hidden; }
.map-type-toggle button { height: 100%; border: 0; border-left: 1px solid var(--search-line); border-radius: 0; padding: 0 18px; font-size: 14px; font-weight: 600; background: #fff; color: var(--search-ink); cursor: pointer; }
.map-type-toggle button:first-child { border-left: 0; }
.map-type-toggle button[aria-pressed='true'] { background: var(--gold); color: var(--search-ink); }
.map-preview-card { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; width: min(320px, calc(100% - 24px)); background: white; border-radius: 6px; box-shadow: 0 8px 26px #00000040; overflow: hidden; }
.map-preview-card { max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
.map-preview-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ffffff99; background: #062b35d9; color: #fff; font-size: 20px; line-height: 1; z-index: 2; cursor: pointer; box-shadow: 0 2px 6px #00000040; display: grid; place-items: center; padding: 0; }
.map-preview-close:focus-visible { outline: 2px solid #d4a843; outline-offset: 2px; }
.map-preview-body { display: block; }
.map-preview-body img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: #eef3ef; }
.map-preview-body .map-preview-details { padding: 12px 14px 10px; }
.map-preview-body .map-preview-price { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.map-preview-body .map-preview-facts { font-size: 11px; color: #5f7371; margin: 0 0 4px; }
.map-preview-body .map-preview-address { font-size: 12px; margin: 0 0 2px; }
.map-preview-body .map-preview-city { font-size: 12px; color: #5f7371; margin: 0 0 4px; }
.map-preview-actions { display: grid; gap: 8px; padding: 0 14px 14px; }
.map-preview-body .map-preview-actions > :is(.sbe-compare-toggle, .sbe-admin-cart-toggle) { width: 100%; margin: 0; }
.map-preview-body .button { width: 100%; font-size: 10px; padding: 10px; }
.map-preview-body .map-preview-loading { padding: 16px 14px; margin: 0; font-size: 12px; color: #5f7371; }
/* Dense-cluster grouped-results panel (item 9): same floating-card base as
   .map-preview-card, with its own compact scrollable list instead of one
   listing's details. */
.map-group-panel { padding: 14px 14px 6px; max-height: min(360px, 60vh); overflow-y: auto; }
.map-group-heading { font-size: 13px; font-weight: 700; margin: 0 24px 10px 0; }
.map-group-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.map-group-row { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--search-line); border-radius: 4px; padding: 8px 10px; background: #fbfcfb; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
/* The home under the pointer (or the keyboard) in "N homes at this location" turns light gold (Ekin, 29 October 2026). */
.map-group-row:hover, .map-group-row:focus-visible { border-color: var(--gold); background: rgb(214 168 77 / .16); }
.map-group-row-price { font-weight: 700; font-size: 12px; white-space: nowrap; }
.map-group-row-address { font-size: 11px; color: #5f7371; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Draw Area on phones and tablets (map-touch-draw.js). While drawing, the
   map's own toolbar steps aside so the map gets the whole screen; a see-
   through layer over the map takes every touch (touch-action: none: no
   page scroll, pull-to-refresh or zoom under the finger). How to draw and
   Cancel sit at the top; Undo, Clear and Search This Area at the bottom,
   clear of the iPhone home bar. */
#search-map.is-touch-drawing :is(.map-exit-link, .map-toolbar, .map-place-radius) { display: none; }
#search-map.is-touch-drawing #map-draw-active-status, #search-map.is-touch-drawing .map-search-area-button { display: none !important; }
html.is-map-drawing, html.is-map-drawing body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
html.is-map-drawing body.map-mode :is(.site-header, .mobile-bar, .sbe-compare-tray) { display: none !important; }
html.is-map-drawing body.map-mode { padding-bottom: 0; }
html.is-map-drawing body.map-mode .search-workspace { height: 100vh; height: 100dvh; }
.map-touch-draw { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: var(--search-ink); font-family: inherit; }
.map-touch-draw-layer { position: absolute; inset: 0; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; background: #063d450f; }
.map-touch-draw-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-touch-draw-fill { fill: #D6A84D; fill-opacity: .16; stroke: none; }
.map-touch-draw-fill.is-closed { fill-opacity: .22; }
.map-touch-draw-line, .map-touch-draw-trace { fill: none; stroke: #D6A84D; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #063d45b3); }
.map-touch-draw-closing { stroke: #D6A84D; stroke-width: 2.5; stroke-dasharray: 6 7; stroke-linecap: round; opacity: .9; }
.map-touch-draw-point { fill: #fff; stroke: var(--search-teal); stroke-width: 3; filter: drop-shadow(0 1px 2px #0000004d); }
.map-touch-draw-point.is-first { fill: #D6A84D; stroke: #fff; }
.map-touch-draw-point.is-dragging { fill: #D6A84D; }
.map-touch-draw-top { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.map-touch-draw-top > *, .map-touch-draw-footer > * { pointer-events: auto; }
.map-touch-draw-modes { display: flex; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 3px 12px #00000033; }
.map-touch-draw button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.map-touch-draw button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.map-touch-draw-mode { padding: 0 14px; border-radius: 999px; background: transparent; color: var(--search-ink); min-height: 40px !important; }
.map-touch-draw-mode[aria-pressed='true'] { background: var(--search-teal); color: #fff; }
.map-touch-draw-cancel { padding: 0 16px; border-radius: 999px; background: #fff; color: var(--search-teal); box-shadow: 0 3px 12px #00000033; }
.map-touch-draw-hint { position: absolute; top: calc(66px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: #063d45e6; color: #fff; font-size: 13px; line-height: 1.35; text-align: center; pointer-events: none; }
.map-touch-draw-footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.map-touch-draw-tool { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: #fff; color: var(--search-teal); box-shadow: 0 3px 12px #00000033; }
.map-touch-draw-tool:disabled { color: #9fb1ae; cursor: default; }
.map-touch-draw-search { flex: 1 1 auto; min-height: 52px !important; padding: 0 20px; border-radius: 999px; background: var(--search-teal); color: #fff; font-size: 16px !important; letter-spacing: .01em; box-shadow: 0 6px 18px #063d4566; }
.map-touch-draw-search[hidden] { display: none; }
.map-touch-draw-search svg { color: #D6A84D; }
.map-touch-draw :focus-visible { outline: 3px solid #D6A84D; outline-offset: 2px; }
@media (max-width: 360px) { .map-touch-draw-mode { padding: 0 10px; font-size: 13px; } .map-touch-draw-cancel { padding: 0 12px; } }
/* Map Search on a phone (Ekin, 14 October 2026: "maximize visible map
   space"): two short rows instead of four. The search field shares its row
   with Filters (just its icon and count); Draw Area and Map/Satellite come
   next, with Clear all as an icon (its name stays for screen readers); a
   drawn area's Redraw/Clear gets its own row. */
@media (max-width: 700px) {
  body.map-mode .map-exit-link { margin: 8px 10px 0; }
  body.map-mode .map-toolbar { gap: 8px; padding: 8px 10px; }
  body.map-mode .map-toolbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  body.map-mode .map-toolbar-actions { display: contents; }
  body.map-mode .map-toolbar-search { order: 0; flex: 1 1 0; min-width: 0; }
  body.map-mode .map-toolbar-search input { height: 44px; }
  body.map-mode .map-toolbar-button, body.map-mode .map-type-toggle { height: 44px; }
  body.map-mode .map-toolbar-button { padding: 0 12px; font-size: 14px; gap: 6px; }
  body.map-mode .map-type-toggle button { padding: 0 12px; font-size: 14px; }
  body.map-mode #map-open-filters { order: 1; padding: 0 12px; }
  body.map-mode #map-open-filters > span:not(.map-filter-count), body.map-mode #map-clear-all > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.map-mode #map-draw-area { order: 3; }
  body.map-mode .map-type-toggle { order: 4; }
  body.map-mode #map-clear-all { order: 5; width: 44px; padding: 0; justify-content: center; }
  body.map-mode :is(#map-draw-status, #map-draw-active-status) { order: 6; flex-basis: 100%; justify-content: center; }
}
@media (max-width: 700px) {
  .map-toolbar-search { flex-basis: 100%; }
  .map-toolbar-actions { flex-basis: 100%; justify-content: space-between; }
  .map-preview-card { left: 0; right: 0; bottom: 0; transform: none; width: 100%; border-radius: 12px 12px 0 0; }
}
.search-workspace[data-view='list'] .listing-grid { grid-template-columns: 1fr; }
.search-workspace[data-view='list'] .listing-card { display: grid; grid-template-columns: .8fr 1fr; }
.search-workspace[data-view='list'] .listing-photo { height: 100%; min-height: 240px; aspect-ratio: auto; }
.filter-drawer { border: 0; width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0 0 0 auto; padding: 24px; color: var(--search-ink); }
.filter-drawer::backdrop, .search-brief-dialog::backdrop, .listing-inquiry-dialog::backdrop { background: #062b35b8; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.drawer-heading h2 { font-family: Georgia, serif; font-weight: 400; margin: 0; }
.drawer-heading button { border: 0; background: #eff3f0; width: 44px; height: 44px; font-size: 26px; }
.search-brief-dialog { width: min(560px, calc(100vw - 32px)); border: 0; padding: 0; color: var(--search-ink); }
.brief-body { padding: 40px 30px; }
.brief-body h2 { font-family: Georgia, serif; font-size: 32px; font-weight: 400; margin: 0 0 20px; }
.brief-body p:not(.kicker), .brief-body blockquote { font-size: 14px; line-height: 1.8; }
.brief-body blockquote { background: #f7f3e8; margin: 20px 0; padding: 18px; border-left: 2px solid #c1a155; white-space: pre-wrap; overflow-wrap: anywhere; }
.brief-body > :is(a,button) { margin-bottom: 12px; width: 100%; }
.listing-inquiry-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(92dvh, 900px); border: 0; padding: 0; border-radius: 12px; color: var(--search-ink); background: #fff; box-shadow: 0 24px 70px #061f2880; overscroll-behavior: contain; }
.listing-inquiry-dialog > .listing-close { position: absolute; z-index: 2; top: 14px; right: 14px; float: none; margin: 0; background: #fff; border: 1px solid #cfd9d6; }
.listing-inquiry-body { max-height: min(92dvh, 900px); padding: 28px 30px 24px; overflow-y: auto; overscroll-behavior: contain; }
.listing-inquiry-body h2 { font-family: Georgia, serif; font-size: 30px; font-weight: 400; margin: 0 48px 4px 0; }
.listing-inquiry-lede { max-width: 440px; font-size: 14px; line-height: 1.45; color: #40575b; margin: 0 0 14px; }
.listing-inquiry-property { display: flex; gap: 16px; align-items: center; min-height: 78px; background: #f4f6f5; border-radius: 9px; padding: 10px 12px; margin-bottom: 18px; }
.listing-inquiry-property img { width: 142px; height: 74px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.listing-inquiry-address { font-weight: 750; margin: 0; font-size: 15px; }
.listing-inquiry-location, .listing-inquiry-mls { margin: 3px 0 0; font-size: 13px; color: #5c6b6e; }
#listing-inquiry-form > label, .listing-inquiry-contact-row label { display: block; font-size: 12px; font-weight: 700; margin: 12px 0 5px; }
#listing-inquiry-form label > span[aria-hidden='true'], .listing-inquiry-group legend > span { color: #b3261e; }
#listing-inquiry-form :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { width: 100%; border: 1px solid #cbd5d3; border-radius: 7px; padding: 11px 13px; min-height: 44px; font: inherit; font-size: 14px; background: #fff; color: var(--search-ink); }
#listing-inquiry-form textarea { min-height: 86px; resize: vertical; line-height: 1.5; }
#listing-inquiry-form :is(input, select, textarea):focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#listing-inquiry-form [aria-invalid='true'] { border-color: #b3261e !important; }
.listing-inquiry-group { min-width: 0; border: 0; padding: 0; margin: 0 0 14px; }
.listing-inquiry-group legend { padding: 0; margin: 0 0 9px; font-size: 14px; font-weight: 750; }
.listing-inquiry-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.listing-inquiry-pills label { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.listing-inquiry-pills input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.listing-inquiry-pills label > span { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #cbd5d3; border-radius: 999px; padding: 7px 11px; color: #183b42; background: #fff; font-size: 12px; font-weight: 600; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.listing-inquiry-pills input:checked + span { border-color: #20845f; background: #edf8f2; box-shadow: inset 0 0 0 1px #20845f; }
.listing-inquiry-pills input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.listing-inquiry-pills input[type='checkbox']:checked + span::before { content: '✓'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; color: #fff; background: #20845f; font-size: 10px; }
.listing-inquiry-question-wrap { margin-bottom: 8px; }
.listing-inquiry-question-help { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; color: #6b797b; font-size: 10px; line-height: 1.4; }
.listing-inquiry-question-help span:last-child { flex: none; }
.listing-inquiry-contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.listing-inquiry-field-error { min-height: 15px; margin: 3px 0 0; color: #9b2419; font-size: 10px; line-height: 1.35; }
.listing-inquiry-contact-method { margin-top: 5px; }
.listing-inquiry-pills--single label > span { min-height: 44px; font-size: 13px; gap: 6px; }
.listing-inquiry-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; top: -9999px; }
.listing-inquiry-submit { width: 100%; min-height: 52px; font-size: 13px; margin-top: 18px; }
.listing-inquiry-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #5c6b6e; margin: 12px 0 0; }
.listing-inquiry-error { background: #fdecea; color: #7a271a; border: 1px solid #f3b8ab; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin: 0 0 16px; }
.listing-inquiry-sms { display: none; margin-top: 20px; border: 1px solid #5bb78e; border-radius: 14px; padding: 18px; background: linear-gradient(135deg, #f3fbf7, #fff); }
.listing-inquiry-sms-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: #16845d; color: #fff; }
.listing-inquiry-sms h3 { margin: 0 0 5px; font: 400 23px/1.2 Georgia, serif; }
.listing-inquiry-sms > p { color: #506467; font-size: 12px; line-height: 1.45; }
.listing-inquiry-sms .button { width: 100%; margin: 8px 0 12px; background: #075640; color: #fff; }
.listing-inquiry-sms .listing-inquiry-sms-label { margin: 0 0 5px; font-size: 10px; }
.listing-inquiry-sms .listing-inquiry-sms-preview { margin: 0 0 12px; border: 1px solid #d5dfdc; border-radius: 7px; padding: 10px; background: #fff; color: #344b50; }
.listing-inquiry-sms small { color: #607174; font-size: 10px; }
.listing-inquiry-success { text-align: center; padding: 12px 4px 4px; }
.listing-inquiry-success-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%; color: #fff; background: #218862; font-size: 34px; box-shadow: 0 8px 18px #21886233; }
.listing-inquiry-success-title { font: 400 28px/1.2 Georgia, serif; margin: 0 0 8px; }
.listing-inquiry-success-message { margin: 0 0 7px; font-size: 14px; font-weight: 650; }
.listing-inquiry-success-note { font-size: 12px; color: #5c6b6e; margin: 0 auto 18px; max-width: 360px; }
.listing-inquiry-success-property { max-width: 480px; margin: 0 auto 20px; text-align: left; }
.listing-inquiry-success .button { width: 100%; min-height: 48px; }
.listing-inquiry-done { background: #075640; color: #fff; }
.listing-tour-dialog { width: min(720px, calc(100vw - 32px)); }
#listing-tour-form > label, #listing-tour-form .listing-inquiry-contact-row label, .listing-tour-choice-row label, #listing-tour-note + * { display: block; font-size: 12px; font-weight: 700; }
#listing-tour-form label > span[aria-hidden='true'] { color: #b3261e; }
#listing-tour-form :is(input:not([type='radio']), select, textarea) { width: 100%; border: 1px solid #cbd5d3; border-radius: 7px; padding: 11px 13px; min-height: 44px; font: inherit; font-size: 14px; background: #fff; color: var(--search-ink); }
#listing-tour-form textarea { min-height: 86px; resize: vertical; line-height: 1.5; }
#listing-tour-form :is(input, select, textarea):focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#listing-tour-form [aria-invalid='true'] { border-color: #b3261e !important; }
.listing-tour-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listing-tour-type-options label > span { min-height: 52px; font-size: 14px; gap: 8px; }
.listing-tour-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.listing-tour-choice-row label { margin: 0 0 5px; }
.listing-tour-second-toggle { width: 100%; margin: 2px 0 14px; padding: 12px 0; border: 0; border-top: 1px solid #dce3e1; border-bottom: 1px solid #dce3e1; background: transparent; color: var(--search-ink); text-align: left; font: 700 13px/1.4 inherit; }
.listing-tour-second { margin-bottom: 14px; }
.listing-tour-section-title { margin: 6px 0 0; font-size: 16px; }
.listing-tour-optional { color: #657477; font-weight: 400; }
.listing-tour-ask { margin-top: 9px; background: #fff; color: #075640; border: 1px solid #075640; }
.listing-detail-actions .button { flex: 1 1 220px; text-align: center; }
.listing-detail-actions .listing-tour-action { order: 0; }
.listing-detail-actions .listing-inquiry-action { order: 1; background: #fff; color: var(--search-teal); border: 1px solid var(--search-teal); }
.ekin-contact-card { border: 1px solid #dfe3dd; border-radius: 8px; padding: 20px; background: #f7f5ee; box-shadow: 0 5px 20px #183b4208; }
.ekin-contact-identity { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ekin-contact-photo { display: block; width: 80px; height: 92px; flex: none; object-fit: cover; object-position: center 28%; border-radius: 7px; }
.ekin-contact-logo { display: block; width: 76px; height: 76px; flex: none; object-fit: contain; }
.ekin-contact-card h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.ekin-contact-card > p { margin: 0 0 18px; color: #53666a; font-size: 13px; line-height: 1.6; }
.ekin-contact-actions { display: grid; gap: 9px; }
.ekin-contact-actions > :is(button, a) { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; padding: 11px 8px; border: 1px solid #779b9e; border-radius: 5px; color: var(--search-ink); font: inherit; font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; text-decoration: none; }
.ekin-contact-actions > .button-gold { border-color: transparent; }
.ekin-contact-actions > a:hover { background: #fff; }
.ekin-contact-actions svg { width: 20px; height: 20px; flex: none; }
.ekin-contact-signature { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #d6d8d2; }
.ekin-contact-signature-copy strong { display: block; font: 700 13px/1.2 Georgia, serif; }
.ekin-contact-signature-copy span { display: block; margin-top: 5px; color: #456468; font-size: 8px; font-weight: 650; letter-spacing: .18em; }
.ekin-contact-lpt-lockup { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-left: 12px; border-left: 1px solid #d6d8d2; }
.ekin-contact-brokered { color: #456468; font-size: 7px; font-weight: 750; letter-spacing: .12em; white-space: nowrap; }
.ekin-contact-lpt-logo { display: block; width: 48px; height: 48px; color: #d6a84d; overflow: visible; }
.ekin-contact-lpt-logo text { font: 500 22px Arial, sans-serif; letter-spacing: -.08em; }
.ekin-contact-lpt-logo .ekin-contact-lpt-realty { font: 700 5px Arial, sans-serif; letter-spacing: .14em; }
.mobile-contact-slot:empty { display: none; }
.mobile-contact-slot:not(:empty) { margin: 24px 0; }
.search-workspace[data-view='map'] .ekin-contact-card { display: none; }
.website-message-dialog { width: min(560px, calc(100vw - 32px)); }
.website-message-dialog .ekin-contact-identity { padding-right: 38px; }
.website-message-dialog .ekin-contact-brand span { color: #876321; }
.website-message-dialog .listing-inquiry-lede { max-width: none; margin-top: 8px; }
#website-message-form > label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 5px; text-transform: none; letter-spacing: 0; }
#website-message-form label > span[aria-hidden='true'] { color: #b3261e; }
#website-message-form :is(input, textarea) { width: 100%; border: 1px solid #cbd5d3; border-radius: 7px; padding: 11px 13px; min-height: 46px; font: inherit; font-size: 16px; background: #fff; color: var(--search-ink); }
#website-message-form textarea { min-height: 115px; resize: vertical; line-height: 1.5; }
#website-message-form [aria-invalid='true'] { border-color: #b3261e; }
#website-message-form .listing-inquiry-field-error:empty { display: none; }
#website-message-form .listing-inquiry-question-help { min-height: 16px; }
#website-message-count { margin-left: auto; }
#website-message-form .listing-inquiry-privacy svg { width: 16px; height: 16px; flex: none; }
#website-message-form .listing-inquiry-submit { border: 0; border-radius: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; }
#website-message-form .listing-inquiry-submit:disabled { cursor: wait; opacity: .7; }
.ekin-contact-actions .button-gold:is(:hover, :focus-visible), #website-message-submit:is(:hover, :focus-visible) { background: #e4ba68 !important; color: var(--search-ink) !important; }
#website-message-success-title { margin: 0 0 12px; }
@media (max-width: 1200px) {
  .ekin-contact-card { padding: 18px; }
  .ekin-contact-identity { gap: 14px; margin-bottom: 14px; }
  .ekin-contact-photo { width: 64px; height: 72px; }
  .ekin-contact-logo { width: 60px; height: 60px; }
  .ekin-contact-card h2 { font-size: 19px; }
}
@media (max-width: 520px) {
  .listing-inquiry-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 8px auto; border-radius: 14px; }
  /* Firefox for iPhone keeps a floating address bar over the bottom of the page
     (not counted in dvh), which covered the send button. The extra room lets
     the button always scroll up above it. */
  .listing-inquiry-body { max-height: calc(100dvh - 16px); padding: 24px 16px calc(96px + env(safe-area-inset-bottom)); }
  .listing-inquiry-body h2 { font-size: 24px; margin-right: 40px; }
  .listing-inquiry-lede { font-size: 12px; margin-bottom: 12px; }
  .listing-inquiry-property { min-height: 64px; gap: 10px; margin-bottom: 15px; }
  .listing-inquiry-property img { width: 96px; height: 58px; }
  .listing-inquiry-address { font-size: 12px; }
  .listing-inquiry-location, .listing-inquiry-mls { font-size: 10px; }
  .listing-inquiry-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .listing-inquiry-pills label > span { min-height: 40px; padding: 7px 8px; font-size: 11px; }
  .listing-inquiry-contact-row { grid-template-columns: 1fr; gap: 0; }
  .listing-inquiry-pills--single { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-inquiry-pills--single label > span { min-height: 44px; }
  .listing-inquiry-question-help span:first-child { max-width: 78%; }
  .listing-inquiry-sms { display: block; }
  .listing-tour-choice-row, .listing-inquiry-contact-row { grid-template-columns: 1fr; gap: 0; }
  .listing-tour-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-detail-actions { flex-direction: column; }
  .listing-detail-actions .button { flex: none; width: 100%; }
}
/* html itself sets its own overflow-x (see styles.css), which stops the
   usual body->viewport overflow propagation -- so body's own overflow here
   would never actually reach the real scrolling element. Target html
   directly so the page genuinely stops scrolling while any dialog is open. */
html:has(dialog[open]), .home-search-page:has(dialog[open]) { overflow: hidden; }
.listing-card { background: #fff; border: 1px solid #dedfd9; overflow: hidden; transition: box-shadow .2s; }
.listing-card:hover { box-shadow: 0 8px 24px #2c313814; }
.listing-photo { aspect-ratio: 1.55; width: 100%; background: #e9e8e1; display: grid; place-items: center; overflow: hidden; position: relative; color: #5f685f; font-size: 12px; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.listing-status { position: absolute; top: 12px; left: 12px; background: #d5efdc; color: #205638; border: 1px solid #9fcea9; padding: 7px 10px; font-size: 10px; border-radius: 3px; }
/* Per-card photo carousel: elegant on the image edges, prominent on
   hover/focus rather than dominating every card by default. Touch devices
   (no hover) keep them visibly present since tapping is the only way in. */
.listing-card-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #17222180; color: #fff; font-size: 19px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.listing-card-arrow:hover, .listing-card-arrow:focus-visible { background: #172221cc; }
.listing-photo:hover .listing-card-arrow, .listing-photo:focus-within .listing-card-arrow, .listing-card-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .listing-card-arrow { opacity: .82; width: 38px; height: 38px; } }
.listing-card-arrow-previous { left: 8px; }
.listing-card-arrow-next { right: 8px; }
.listing-card-count { position: absolute; left: 12px; bottom: 10px; z-index: 1; background: #17222180; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.listing-card-body { padding: 22px; }
.listing-price { font-size: 25px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.02em; }
.listing-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 5px; line-height: 1.4; }
.listing-location { font-size: 12px; color: #646c66; margin: 0; }
.listing-facts { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 0; margin: 0; font-size: 12px; color: #3e4741; }
.listing-type { font-size: 11px; color: #606960; margin: 0 0 14px; }
.listing-details-button { display: flex; justify-content: space-between; width: 100%; border: 0; border-top: 1px solid #e6e6df; padding: 14px 0 4px; background: white; font-weight: 600; font-size: 12px; min-height: 44px; }
.listing-credit { font-size: 10px; line-height: 1.6; color: #616961; margin: 12px 0 0; overflow-wrap: anywhere; }
.search-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 30px 0; font-size: 12px; }
.search-pagination button { min-height: 44px; border: 1px solid #c5c8bf; background: white; padding: 10px 18px; }
.search-pagination button:disabled { opacity: .5; cursor: default; }
/* Compact "quiet, secondary" legal-footer treatment shared by Search Homes
   (.idx-legal--page) and the property modal (.idx-legal--modal). Every
   required disclosure string renders exactly as before -- only the
   presentation (type scale, spacing, an eyebrow label) changed. */
.idx-legal-eyebrow { margin: 0 0 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #5c6660; }
.idx-legal-text { margin: 0; }
.idx-legal-paragraph { margin: 0 0 8px; max-width: 74ch; font-size: 12px; line-height: 1.55; color: #5c6660; }
.idx-legal-paragraph:last-child { margin-bottom: 0; }
.idx-legal-links { margin: 10px 0 0; font-size: 12px; }
.idx-legal-links a { color: #5c6660; text-decoration: underline; text-underline-offset: 2px; }
.idx-legal-links a:hover { color: var(--search-ink); }
.idx-legal--page { margin: 0; padding: 12px 0 4px; border-top: 1px solid #e4e6e0; }
.idx-legal--modal { margin: 0; }
.idx-legal-more { margin-top: 6px; }
.idx-legal-more > summary { display: inline-flex; align-items: center; min-height: 32px; color: #3f4b48; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.idx-legal-more > summary:focus-visible { outline: 2px solid var(--gold, #d6a84d); outline-offset: 2px; }
.idx-legal-more[open] > summary { margin-bottom: 6px; }
.idx-legal-divider { border: 0; border-top: 1px solid #e4e6e0; margin: 22px 0 18px; }
.idx-legal-source { margin: 0 0 8px; font-size: 12px; color: #5c6660; }
.idx-legal-updated { margin: 10px 0 0; font-size: 11px; color: #6b7570; }
/* The property modal: the MLS GRID logo beside the source line, as in the
   strip under the results (without the strip's divider). */
.idx-legal-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.idx-legal-brand .idx-legal-source { margin: 0; min-width: 0; }
.idx-legal-brand .idx-logo::after { content: none; }
.idx-source-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 8px; padding: 10px 0; border-top: 1px solid #dce2dc; font-size: 10px; line-height: 1.35; color: #506064; }
.idx-disclosures[hidden], .idx-source-strip[hidden], .idx-legal--page[hidden] { display: none; }
.idx-source-copy { min-width: 0; }
.idx-source-strip p { margin: 0; }
.idx-source-strip p + p { margin-top: 2px; }
.idx-logo { position: relative; display: block; flex: none; background: var(--search-teal); padding: 4px; border-radius: 2px; }
.idx-logo::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: -9px; width: 1px; background: #d6dcd8; }
.idx-logo img { display: block; width: 56px; height: auto; }
.idx-disclosure-toggle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 36px; padding: 6px 0 6px 10px; border: 0; background: transparent; color: var(--search-ink); font: 700 10px/1.2 Manrope, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.idx-disclosure-toggle span { display: inline-block; font-size: 15px; text-decoration: none; transition: transform .18s ease; }
.idx-disclosure-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.idx-disclosure-toggle:hover { color: #8b620b; }
.idx-disclosure-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.search-help { margin-top: 44px; background: #eae8df; padding: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.search-help p:last-child { font-size: 13px; color: #5b625a; line-height: 1.7; margin-bottom: 0; }
.search-help .button { white-space: nowrap; }
.listing-dialog { width: min(780px, calc(100vw - 32px)); max-height: 90vh; border: 0; padding: 0; color: #2c3138; background: #fff; overscroll-behavior: contain; }
.listing-dialog::backdrop { background: #182126bd; }
.listing-close { position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 2; width: 44px; height: 44px; border: 1px solid #d7d9d3; border-radius: 50%; font-size: 28px; line-height: 1; background: white; }
.listing-detail-photo { aspect-ratio: 1.65; }
.listing-gallery { min-width: 0; }
.listing-gallery-frame { position: relative; min-height: 0; }
.listing-gallery-stage { touch-action: pan-y; background: #000; cursor: zoom-in; }
.listing-card .listing-photo { cursor: pointer; }
.listing-gallery-stage .listing-detail-photo { background: #000; color: #fff; }
.listing-gallery-stage .listing-detail-photo img { object-fit: contain; }
.listing-gallery-stage:focus-visible { outline: 3px solid #d6ac50; outline-offset: -3px; }
/* Progressive-load indicator: a background image swap (higher resolution,
   a refreshed signed URL, a slow neighbor) never blanks the photo already
   on screen -- this subtle spinner overlays it instead, positioned so it
   never covers the whole frame like the old placeholder text did. */
.listing-gallery-stage-loading { position: relative; }
.listing-gallery-stage-loading::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #ffffff55; border-top-color: #fff; animation: listing-gallery-spin .8s linear infinite; pointer-events: none; }
@keyframes listing-gallery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .listing-gallery-stage-loading::after { animation-duration: 2.4s; } }
.listing-gallery-controls { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px; font-size: 12px; }
.listing-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 58px; border: 1px solid #ffffff60; border-radius: 6px; background: #10282dde; color: #fff; font-size: 40px; line-height: 1; box-shadow: 0 2px 12px #0003; }
.listing-gallery-arrow:hover { background: #10282d; }
.listing-gallery-previous { left: 14px; }
.listing-gallery-next { right: 14px; }
.listing-gallery-enlarge { position: absolute; bottom: 12px; right: 14px; min-height: 44px; border: 1px solid #ffffff70; border-radius: 4px; padding: 8px 12px; background: #10282dde; color: #fff; font-size: 12px; }
.listing-gallery-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.listing-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px; max-width: 100%; }
.listing-gallery-thumb { flex: 0 0 76px; width: 76px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; background: #e9e8e1; color: #244349; border-radius: 3px; }
.listing-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-gallery-thumb[aria-pressed='true'] { border-color: #9c6e11; box-shadow: 0 0 0 1px #9c6e11; }
.listing-gallery-status { padding: 0 16px; font-size: 12px; line-height: 1.6; color: #4a5856; margin: 8px 0; }
.listing-gallery-retry { margin: 0 16px 12px; padding: 10px 16px; min-height: 44px; background: #fff; color: #123940; border: 1px solid #739698; }
.listing-detail-body { padding: 30px; }
.listing-detail-body h2 { font-size: 25px; line-height: 1.35; margin: 0 0 8px; }
.listing-detail-body h3 { font-size: 16px; margin: 24px 0 12px; }
.listing-remarks { white-space: pre-line; font-size: 14px; line-height: 1.8; }
.listing-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
/* Share: the home's own link (Copy link, and the device's share sheet). */
.listing-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 4px; }
.listing-share-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--search-teal); border-radius: 999px; background: #fff; color: var(--search-teal); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; cursor: pointer; }
.listing-share-toggle svg { width: 18px; height: 18px; flex: none; }
.listing-share-toggle:hover, .listing-share-toggle[aria-expanded="true"] { background: #eef4f2; }
.listing-share-toggle:focus-visible, .listing-share-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.listing-share-menu { position: absolute; z-index: 5; top: calc(100% + 6px); inset-inline-start: 0; display: grid; min-width: 220px; padding: 6px; background: #fff; border: 1px solid #d6dcd8; border-radius: 10px; box-shadow: 0 12px 30px #062e3326; }
.listing-share-menu[hidden] { display: none; }
.listing-share-option { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--search-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: start; cursor: pointer; }
.listing-share-option:hover { background: #eef4f2; }
.listing-share-status { margin: 0; font-size: 13px; color: #3d5a55; overflow-wrap: anywhere; }
.listing-share-status:empty { display: none; }
.listing-share-status a { color: var(--search-teal); }
/* 16px keeps iPhone Safari from zooming in when the box is selected. */
.listing-share-link { display: block; width: 100%; max-width: 420px; margin-top: 6px; padding: 8px 10px; border: 1px solid #c9d3cf; border-radius: 6px; background: #fff; color: var(--search-ink); font: inherit; font-size: 16px; }
/* A home's link that is no longer listed. */
.listing-unavailable { max-width: 560px; }
.listing-unavailable-text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #4a5856; }
.listing-photo-toolbar { display: none; }
.listing-dialog-photos { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; background: #000; color: white; border-radius: 0; }
.listing-dialog-photos::backdrop { background: #000; }
.listing-dialog-photos > .listing-close { position: absolute; top: 12px; right: 12px; float: none; margin: 0; color: #17383e; }
.listing-dialog-photos #listing-detail { height: 100%; display: flex; flex-direction: column; }
.listing-dialog-photos .listing-photo-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 20px; min-height: 68px; padding: 10px 76px 10px 20px; }
.listing-photo-title { flex: 1; min-width: 0; display: grid; gap: 2px; padding-left: 10px; border-left: 2px solid #e5ba66; }
.listing-photo-toolbar .listing-photo-address,
.listing-photo-toolbar .listing-photo-location { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-photo-toolbar .listing-photo-address { color: white; font-size: 15px; line-height: 1.25; font-weight: 700; }
.listing-photo-toolbar .listing-photo-location { color: #e5ba66; font-size: 11px; line-height: 1.25; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.listing-photo-details { flex: 0 0 auto; color: #17383e; background: var(--gold); border: 0; border-radius: 3px; min-height: 44px; padding: 9px 16px; font-size: 12px; font-weight: 400; }
.listing-photo-details:hover { filter: brightness(1.06); }
.listing-photo-details:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.listing-dialog-photos .listing-gallery { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.listing-dialog-photos .listing-gallery-frame { flex: 1; }
.listing-dialog-photos .listing-gallery-stage, .listing-dialog-photos .listing-detail-photo { height: 100%; aspect-ratio: auto; background: #000; }
.listing-dialog-photos .listing-gallery-stage { cursor: default; }
.listing-dialog-photos .listing-gallery-controls { flex: 0 0 auto; padding: 8px; }
.listing-dialog-photos .listing-gallery-thumbs { flex: 0 0 auto; padding: 4px 16px 8px; gap: 6px; }
.listing-dialog-photos .listing-gallery-thumb { flex-basis: 52px; width: 52px; height: 40px; }
.listing-dialog-photos .listing-gallery-thumb[aria-pressed='true'] { border-color: #e5ba66; box-shadow: 0 0 0 1px #e5ba66; }
.listing-dialog-photos .listing-gallery-status { color: #d6dfe0; flex: 0 0 auto; margin: 4px 0 10px; }
.listing-dialog-photos .listing-gallery-retry { align-self: flex-start; flex: 0 0 auto; }
.listing-dialog-photos .listing-detail-body, .listing-dialog-photos .listing-gallery-enlarge { display: none; }
@media (max-width: 600px) {
  .listing-dialog-photos .listing-photo-toolbar { gap: 10px; padding-left: 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .listing-dialog-photos > .listing-close { top: calc(12px + env(safe-area-inset-top)); }
  .listing-dialog-photos .listing-gallery-controls { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .listing-photo-toolbar .listing-photo-address { font-size: 12px; }
  .listing-photo-toolbar .listing-photo-location { font-size: 9px; }
  .listing-photo-details { font-size: 11px; padding: 6px 8px; }
  .listing-gallery-arrow { width: 44px; height: 50px; }
  .listing-gallery-previous { left: 8px; }
  .listing-gallery-next { right: 8px; }
}
/* Listing refinements and responsive layouts. */
.listing-card { border-radius: 4px; }
.listing-card-body { padding: 15px; }
.listing-price { font-size: 22px; margin-bottom: 8px; }
.listing-card h3 { font-size: 14px; }
.listing-facts { gap: 10px; padding: 12px 0; font-size: 11px; }
.listing-status { font-size: 12px; padding: 6px 8px; }
.listing-save { position: absolute; right: 9px; top: 8px; width: 38px; height: 38px; border: 1px solid #d6e0dd; border-radius: 50%; background: #fff; color: #174f57; font-size: 25px; z-index: 1; }
.listing-save[aria-pressed='true'] { color: #9f7626; }
.listing-extra-facts { display: flex; flex-wrap: wrap; gap: 7px 12px; font-size: 10px; padding: 0 0 12px; }
.listing-extra-facts span { padding: 6px 8px; background: #e4f1e8; color: #176044; border: 1px solid #c9e2d2; border-radius: 3px; line-height: 1.5; }
.listing-detail-body > .listing-extra-facts span { background: var(--gold); color: var(--search-ink); border: 1px solid #b8892f; font-weight: 700; }
.listing-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.listing-details-button { display: block; border: 1px solid #739698; border-radius: 3px; padding: 9px 4px; font-size: 10px; min-height: 38px; }
.listing-ask { display: flex; align-items: center; justify-content: center; background: var(--gold); color: #17383e; border: 0; border-radius: 3px; font-size: 10px; padding: 9px 4px; }
.listing-credit { font-size: 14px; color: var(--search-ink); white-space: pre-line; }
.search-help { margin: 0; display: block; }
/* Search Homes on a desktop screen: filters | results (Grid or List) | the
   right-hand column: Saved homes, then a tall map of the results that stays
   in view while the results scroll, then Ekin's card at the end of the
   column, level with the end of the results (Ekin, 29 October 2026). The
   map sticks inside its own box (saved homes and the map), so it never
   slides over Ekin's card. The map there is only a picture of the results:
   no search box, Draw Area, Clear or "Search this area" (those change the
   search; the full-screen Map Search keeps them). */
@media (min-width: 1201px) {
  /* overflow-x: hidden on html/body would stop the map from sticking. */
  html:has(> body.map-split), body.map-split { overflow-x: clip; }
  .search-workspace[data-map-side='true'] .search-secondary-tools { display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
  body.map-split .search-side-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; }
  body.map-split .search-side-main .saved-summary { order: 1; }
  body.map-split #search-map { order: 2; position: sticky; top: 16px; display: flex; flex-direction: column; height: min(920px, calc(100vh - 32px)); border-radius: 8px; background: #fff; }
  body.map-split #search-map .map-canvas { flex: 1; min-height: 0; }
  body.map-split :is(#map-exit-link, .map-toolbar-search, #map-open-filters, #map-draw-area, #map-clear-all, #map-draw-active-status, #map-draw-status, #map-place-radius, #map-search-area, .map-status-panel [data-show-grid]) { display: none !important; }
  body.map-split .map-toolbar { padding: 8px; }
  body.map-split .map-toolbar-actions { justify-content: flex-end; }
  body.map-split .map-type-toggle { height: 34px; }
  body.map-split .map-type-toggle button { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 1200px) {
  .search-workspace { grid-template-columns: 285px minmax(0, 1fr); padding: 24px; gap: 22px; }
  .search-secondary-tools { display: none; }
  .search-hero-signoff { display: none; }
  .lifestyle-heading h2 { font-size: 29px; }
  .search-results-toolbar h2 { font-size: 19px; }
}
@media (max-width: 900px) {
  .search-hero-inner { padding: 32px 28px 26px; }
  .search-hero h1 { font-size: 55px; }
  .search-hero-subtitle { font-size: 14px; }
  .search-trust { padding: 18px 24px; grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
  .search-trust > div { justify-content: start; }
  .search-trust > div:nth-child(2) { border: 0; }
  .lifestyle-section { padding: 24px; }
  .lifestyle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "water water"; }
  .lifestyle-card-water { aspect-ratio: 16 / 9; }
  .lifestyle-card-city, .lifestyle-card-fees, .lifestyle-card-new, .lifestyle-card-pool, .lifestyle-card-investment { grid-area: auto; aspect-ratio: 4 / 3; }
  .lifestyle-heading h2 { font-size: 23px; }
  .search-workspace, .search-workspace[data-view='map'] { display: block; padding: 22px 24px 40px; }
  .search-filter-sidebar { display: none; }
  .mobile-filter-button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 40px; border: 1px solid #92b0b0; border-radius: 3px; background: white; color: var(--search-ink); font-size: 12px; }
  .mobile-filter-button svg { width: 18px; height: 18px; }
  .search-view-controls button { min-height: 40px; }
  .home-search-form :is(input:not([type='checkbox']):not([type='radio']),select) { min-height: 44px; font-size: 16px; }
  .home-search-form summary { padding: 14px 0; font-size: 13px; }
  .filter-choice label > span { padding: 12px 2px; font-size: 13px; }
  .home-search-form .check-option { min-height: 34px; }
  .filter-drawer .search-apply { position: sticky; bottom: 0; background: #f4cf80; color: #17383e; border: 1px solid #b98a30; min-height: 48px; }
  /* The site-wide fixed mobile CTA bar (Schedule Meeting / Call Ekin)
     paints on top of everything at this same breakpoint; it isn't part
     of document flow, so body's own padding-bottom doesn't stop it
     overlapping a full-height Map workspace. Scoped to Map mode only --
     Grid/List already scroll past it normally. Matches the exact reserved
     height styles.css itself already uses for this bar. */
  /* dvh: the height left between an app's or browser's own toolbars. */
  body.map-mode .search-workspace { height: calc(100vh - var(--map-header-height, 74px) - 76px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - var(--map-header-height, 74px) - 76px - env(safe-area-inset-bottom, 0px)); }
  body.map-mode .map-preview-card { bottom: calc(18px + 76px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: the marker preview is a bottom sheet -- grab handle, a dark round
   close button, a rounded photo beside the price / street / "City, ST", and
   View Property + Compare side by side underneath. It stays inside the map
   (max-height) so the close button is always on screen, and it can also be
   dismissed by tapping the map or swiping it down. */
@media (max-width: 700px) {
  .map-preview-card:not(.map-group-panel), body.map-mode .map-preview-card:not(.map-group-panel) { left: 24px; right: 24px; bottom: 10px; width: auto; max-width: 360px; margin-inline: auto; border-radius: 16px; max-height: calc(100% - 20px); }
  .map-preview-card:not(.map-group-panel)::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: #c9d3d1; margin: 8px auto 0; }
  .map-preview-card:not(.map-group-panel) .map-preview-close { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 22px; border: 0; background: #0b3b44; }
  .map-preview-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 12px; padding: 8px 12px 12px; align-items: center; }
  .map-preview-body > img { grid-row: 1; grid-column: 1; width: 112px; height: 84px; aspect-ratio: auto; border-radius: 12px; }
  .map-preview-body > .map-preview-details { grid-row: 1; grid-column: 2; padding: 0 30px 0 0; min-width: 0; }
  .map-preview-body:not(:has(> img)) > .map-preview-details { grid-column: 1 / -1; padding-right: 44px; }
  .map-preview-body .map-preview-price { font-size: 22px; line-height: 1.1; margin: 0 0 4px; }
  .map-preview-body .map-preview-address { font-size: 14px; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-preview-body .map-preview-city { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-preview-body .map-preview-facts { display: none; }
  .map-preview-body > .map-preview-actions { grid-row: 2; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding: 0; }
  .map-preview-body .map-preview-actions > :is(.button, .sbe-compare-toggle, .sbe-admin-cart-toggle) { min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
  .map-preview-body .map-preview-actions > .sbe-compare-toggle { border: 1.5px solid var(--search-teal, #063d45); }
  .map-preview-body .map-preview-actions > .sbe-admin-cart-toggle { grid-column: 1 / -1; }
  .map-preview-body .map-preview-loading { grid-column: 1 / -1; padding: 6px 44px 8px 2px; }
}
/* Narrow phones (iPhone SE/mini, small Androids): a slightly smaller side gap and photo. */
@media (max-width: 380px) {
  .map-preview-card:not(.map-group-panel), body.map-mode .map-preview-card:not(.map-group-panel) { left: 20px; right: 20px; }
  .map-preview-body { grid-template-columns: 92px minmax(0, 1fr); }
  .map-preview-body > img { width: 92px; height: 72px; }
  .map-preview-body .map-preview-price { font-size: 19px; }
}
/* Short phones (iPhone SE/8 and smaller): a smaller photo and buttons so the
   whole card fits in the short map. */
@media (max-width: 700px) and (max-height: 740px) {
  .map-preview-body { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 10px; padding: 6px 10px 10px; }
  .map-preview-body > img { width: 84px; height: 60px; border-radius: 10px; }
  .map-preview-body .map-preview-price { font-size: 18px; margin-bottom: 2px; }
  .map-preview-body .map-preview-actions > :is(.button, .sbe-compare-toggle, .sbe-admin-cart-toggle) { min-height: 38px; padding: 6px 8px; font-size: 13px; }
}
/* Very short (320x568): no photo, so price, street and both buttons fit. */
@media (max-width: 700px) and (max-height: 600px) {
  .map-preview-body > img { display: none; }
  .map-preview-body > .map-preview-details { grid-column: 1 / -1; padding-right: 44px; }
  .map-preview-body .map-preview-city { display: none; }
  .map-preview-card:not(.map-group-panel)::before { margin-top: 4px; }
}
@media (max-width: 600px) {
  /* No dedicated portrait crop exists for this photo -- shift the same
     wide image's focal point toward the house/palms (right side), which
     reads better in a narrow column than the full panorama centered. */
  .search-hero { background-position: 78% 45%; }
  .search-hero-inner { padding: 28px 18px 25px; }
  .search-hero .kicker { font-size: 9px; letter-spacing: .18em; }
  .search-hero h1 { font-size: clamp(36px, 10vw, 54px); line-height: 1.05; }
  .search-hero-subtitle { font-size: 13px; max-width: 340px; }
  .search-modes-row { grid-template-columns: 1fr; gap: 8px; }
  .search-modes button, .search-mode-map-button { padding: 14px 10px; font-size: 11px; min-height: 50px; justify-content: flex-start; }
  .hero-search-form { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .search-spark { margin-left: 0; font-size: 25px; }
  .hero-search-form :is(textarea, input) { font-size: 16px; width: 100%; }
  .hero-search-form textarea { min-height: 95px; }
  .hero-search-form .button { grid-column: 1 / -1; width: 100%; min-height: 46px; }
  .search-trust { padding: 18px; gap: 20px 14px; }
  .search-trust svg { width: 16px; height: 16px; padding: 10px; }
  .search-trust > div { gap: 8px; border: 0; }
  .search-trust strong { font-size: 10px; }
  .search-trust small { font-size: 9px; }
  .lifestyle-section { padding: 24px 18px 16px; }
  .lifestyle-heading { display: block; margin-bottom: 16px; }
  .lifestyle-heading h2 { font-size: 22px; }
  .lifestyle-grid { grid-template-columns: 1fr; grid-template-areas: none; }
  .lifestyle-card-water, .lifestyle-card-city, .lifestyle-card-fees, .lifestyle-card-new, .lifestyle-card-pool, .lifestyle-card-investment { grid-area: auto; aspect-ratio: 4 / 3; }
  .lifestyle-card-water .lifestyle-card-copy { right: 58px; padding: 18px 20px; }
  .lifestyle-card-water .lifestyle-card-copy strong { font-size: 22px; }
  .lifestyle-card-water .lifestyle-card-copy small { font-size: 12px; margin-top: 6px; }
  .lifestyle-card-water .lifestyle-card-arrow { right: 16px; bottom: 16px; width: 36px; height: 36px; font-size: 15px; }
  .search-workspace, .search-workspace[data-view='map'] { padding: 20px 16px 40px; }
  .search-results-toolbar { flex-wrap: wrap; gap: 12px; }
  .search-results-toolbar h2 { font-size: 20px; }
  .search-sort { width: 100%; font-size: 12px; }
  .search-sort select { width: auto; flex: 1; min-height: 42px; font-size: 14px; padding: 8px; }
  .listing-grid { grid-template-columns: 1fr; gap: 18px; }
  .listing-card-body { padding: 18px; }
  .listing-card h3 { font-size: 16px; }
  .listing-price { font-size: 25px; }
  .listing-facts { font-size: 12px; }
  .listing-save { width: 44px; height: 44px; }
  .listing-card-arrow { width: 40px; height: 40px; }
  .listing-details-button, .listing-ask { min-height: 44px; font-size: 12px; }
  .listing-extra-facts { font-size: 11px; }
  .search-state { min-height: 350px; padding: 32px 22px; }
  .search-state h3 { font-size: 26px; }
  .search-state-actions { flex-direction: column; width: 100%; }
  .search-workspace[data-view='list'] .listing-card { display: block; }
  .search-workspace[data-view='list'] .listing-photo { min-height: 0; aspect-ratio: 2.1; }
  .listing-detail-body { padding: 24px 20px; }
  .search-notice { margin: 0 16px 16px; font-size: 12px; }
  .search-results { scroll-margin-top: 170px; }
  .search-pagination { gap: 14px; }
  .idx-source-strip { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 9px 0; }
  .idx-logo img { width: 48px; }
  .idx-logo::after { right: -8px; }
  .idx-disclosure-toggle { grid-column: 1 / -1; justify-self: end; min-height: 32px; padding: 2px 0; }
  .idx-legal--page { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .home-search-page *, .home-search-page { scroll-behavior: auto; transition: none; } }

/* Public IDX address/location suggestions. The input remains the focus owner. */
.idx-autocomplete { position: relative; flex: 1; min-width: 0; text-align: left; }
.idx-autocomplete > input, .idx-autocomplete > textarea { width: 100%; box-sizing: border-box; }
.idx-suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(460px, 55vh); overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #183d42; border: 1px solid #bccbc7; border-radius: 10px; box-shadow: 0 12px 32px #102b3233; }
/* "Searching..." / "No matches" under the filter panel's Location box, as on the home page box. */
.idx-suggestions-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #4f5859; font-size: 13px; line-height: 1.45; }
.idx-suggestions-note[data-state="loading"]::before { content: ""; flex: none; width: 15px; height: 15px; border: 2px solid #e8dcc0; border-top-color: #c9962f; border-radius: 50%; animation: search-suggest-spin .8s linear infinite; }
.idx-suggestions-note[data-state="error"] { color: #7a3b1d; }
@keyframes search-suggest-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .idx-suggestions-note[data-state="loading"]::before { animation: none; } }
.idx-suggestions[hidden] { display: none; }
.idx-suggestion-heading { padding: 10px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #626b66; }
.idx-suggestion { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-height: 48px; cursor: pointer; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #eff1ed; }
.idx-suggestion[aria-selected="true"], .idx-suggestion:hover { background: #edf3ed; outline: 2px solid #af812b; outline-offset: -2px; }
.idx-suggestion strong { font-size: 15px; }
.idx-suggestion-details { color: #5a6560; font-size: 13px; }
.search-hero:has(.idx-suggestions:not([hidden])) { position: relative; z-index: 35; overflow: visible; }

.search-pagination-top { justify-content: space-between; margin: 14px 0 18px; padding: 10px 0; border-block: 1px solid #dce2dc; }
.search-pagination[hidden] { display: none; }

/* One browser-based Saved Homes experience across results and details. */
.saved-heart-icon { display: inline-flex; width: 1em; height: 1em; flex: none; color: var(--search-teal); vertical-align: -.12em; }
.saved-heart-icon svg { display: block; width: 100%; height: 100%; fill: none; }
.saved-heart-icon[data-saved='true'] { color: var(--gold); }
.saved-heart-icon[data-saved='true'] svg { fill: currentColor; }
[data-saved-header-heart] { color: var(--gold); }
.listing-save .saved-heart-icon { width: 24px; height: 24px; }
.listing-save[aria-pressed='true'] { color: #8a641f; border-color: color-mix(in srgb, var(--gold) 72%, white); }
.listing-save:focus-visible, .saved-summary-heading:focus-visible, .saved-preview-view:focus-visible, .saved-device-info:focus-visible, .saved-toast-undo:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Only a title: the card's heart and words open nothing (signed-in buyers use View saved homes). */
.saved-summary-heading { display: flex; align-items: center; min-height: 44px; color: var(--search-ink); }
.saved-summary-title { display: inline-flex; align-items: center; gap: 8px; }
.saved-summary-title .saved-heart-icon { width: 24px; height: 24px; color: var(--gold); }
.saved-summary-empty { padding: 28px 2px 4px; text-align: center; }
.saved-summary-empty .saved-house-art { width: min(220px, 96%); margin: 0 auto 10px; opacity: .96; }
.saved-house-art svg { display: block; width: 100%; height: auto; }
.saved-summary-empty h3 { margin: 6px auto 10px; max-width: 230px; font-size: 19px; line-height: 1.25; }
.saved-summary-empty p { margin: 0 auto; max-width: 230px; }
.saved-summary-previews { display: grid; margin-top: 12px; }
.saved-summary-preview { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 4px; align-items: center; padding: 9px 0; border-top: 1px solid var(--search-line); }
.saved-preview-view { display: grid; grid-template-columns: 68px minmax(0, 1fr) 12px; gap: 9px; align-items: center; min-width: 0; min-height: 58px; padding: 0; border: 0; background: none; color: var(--search-ink); text-align: left; }
.saved-preview-view .saved-home-photo { width: 68px; aspect-ratio: 4 / 3; }
.saved-preview-info { display: flex; flex-direction: column; min-width: 0; font-size: 10px; line-height: 1.35; }
.saved-preview-info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-preview-price { font-size: 13px; }
.saved-preview-address { margin-top: 2px; font-weight: 650; }
.saved-preview-chevron { font-size: 24px; line-height: 1; }
.saved-summary-preview .listing-save { position: static; width: 40px; height: 40px; padding: 7px; }
.saved-summary-preview .saved-remove-label { display: none; }
.saved-summary .saved-view-cta { width: 100%; min-height: 46px; margin-top: 16px; padding: 12px 8px; border-radius: 4px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.saved-device-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 16px; background: #f2f6f5; border-radius: 6px; color: var(--search-ink); font-size: 12px; line-height: 1.55; }
.saved-device-icon { flex: none; width: 20px; height: 22px; }
.saved-device-icon svg { width: 100%; height: 100%; }
.saved-summary .saved-device-icon { color: #8b620b; }
.saved-device-copy { min-width: 0; }
.saved-device-copy strong { font-size: 13px; }
.saved-device-notice p { margin: 6px 0 0; color: #506468; font-size: inherit; }
.saved-device-notice .saved-sync-note { grid-column: 2 / -1; margin-top: 12px; padding-top: 10px; border-top: 1px solid #d8e0dd; }
.saved-device-notice-compact { grid-template-columns: 22px minmax(0, 1fr) 36px; }
.saved-device-info { display: grid; place-items: center; width: 36px; height: 36px; margin: -7px -7px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--search-teal); font-size: 20px; }
.saved-device-info:hover { background: #e5ece9; }
.saved-device-explanation { grid-column: 2 / -1; padding: 10px; border-radius: 5px; background: white; box-shadow: 0 2px 8px #17383e0a; }
.saved-device-notice-compact .saved-sync-note { grid-column: 2 / -1; }
.saved-device-notice .saved-sync-signin { display: block; width: 100%; border: 0; border-top: 1px solid #d8e0dd; background: none; padding: 10px 0 0; color: var(--search-teal); font: inherit; font-weight: 700; text-align: start; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.saved-summary .saved-device-notice { border: 0; background: #f8f5ee; padding: 15px 13px; margin-top: 22px; font-size: 11px; }
/* Accounts on and not signed in (account-gate.js): no list from this browser, only the way to an account. */
.saved-summary.is-guest .saved-device-notice { display: none; }
.saved-summary-guest { margin-top: 16px; padding: 16px 14px; border-radius: 6px; background: #f8f5ee; color: var(--search-ink); }
.saved-summary-guest[hidden] { display: none; }
.saved-summary-guest-title { display: block; font-size: 14px; line-height: 1.35; }
.saved-summary .saved-summary-guest p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: #506468; }
.saved-summary-guest-actions { display: grid; gap: 8px; margin-top: 14px; }
.saved-summary-guest-actions .button { width: 100%; min-height: 44px; padding: 10px 8px; border-radius: 4px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.saved-summary-guest-actions .saved-summary-signin { border: 1px solid #b7c7c8; background: #fff; color: var(--search-ink); }
.saved-summary-guest-actions .button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.saved-toolbar-button { display: none; border: 1px solid #b7c7c8; background: white; color: var(--search-ink); border-radius: 4px; min-height: 44px; padding: 9px 12px; font-size: 12px; }
.saved-toolbar-button { align-items: center; gap: 7px; }
.saved-toolbar-button > span:last-child { margin-left: 1px; font-weight: 750; }
.saved-toolbar-button .saved-heart-icon { width: 19px; height: 19px; }
.saved-toolbar-button .saved-heart-icon, .saved-drawer-heading h2 .saved-heart-icon { color: var(--gold); }
.saved-homes-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 0; border: 0; color: var(--search-ink); background: #fff; box-shadow: -12px 0 48px #10282d26; overflow: hidden; }
.saved-homes-drawer[open] { display: flex; flex-direction: column; }
.saved-homes-drawer::backdrop { background: #18212699; }
.saved-drawer-heading { display: flex; justify-content: space-between; align-items: center; flex: none; padding: 20px 24px 14px; border-bottom: 1px solid var(--search-line); }
.saved-drawer-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; }
.saved-drawer-heading h2 .saved-heart-icon { width: 28px; height: 28px; }
.saved-drawer-close, .saved-toast-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #dfe3dd; border-radius: 50%; background: #fff; color: var(--search-ink); font-size: 28px; }
.saved-drawer-body { padding: 20px 24px 32px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.saved-drawer-count { margin: 0 0 12px; font-size: 18px; font-weight: 750; }
.saved-home-list { display: grid; gap: 16px; margin-top: 22px; }
.saved-home-card { border: 1px solid #e1e6e3; border-radius: 7px; padding: 10px; box-shadow: 0 3px 12px #17383e0a; cursor: pointer; }
.saved-home-preview { display: grid; grid-template-columns: 110px minmax(0, 1fr) 54px; gap: 12px; align-items: start; }
.saved-home-photo { aspect-ratio: 1; background: #ecebe4; border-radius: 5px; display: grid; place-items: center; overflow: hidden; font-size: 11px; text-align: center; color: #586768; }
.saved-home-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.saved-home-info p, .saved-home-info h3 { margin: 0 0 6px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.saved-home-info .saved-home-price { font-size: 18px; font-weight: 800; }
.saved-home-info h3 { font-weight: 650; }
.saved-home-location, .saved-home-facts { color: #506468; }
.saved-home-preview .listing-save { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; min-height: 58px; height: auto; gap: 2px; padding: 5px 2px; border-radius: 7px; }
.saved-remove-label { color: var(--search-ink); font: 600 10px/1.2 Manrope, Arial, sans-serif; }
.saved-home-availability { font-size: 11px; line-height: 1.45; color: #506468; margin: 10px 0; }
.saved-view-home, .saved-load-more { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #779b9e; border-radius: 4px; background: white; color: var(--search-ink); font-size: 13px; font-weight: 750; }
.saved-view-home:hover, .saved-load-more:hover { background: #f2f6f5; }
.saved-load-more { margin-top: 16px; }
.saved-empty { margin-top: 20px; padding: 26px 14px; border-radius: 6px; background: #f7f8f5; text-align: center; }
.saved-empty .saved-house-art { width: min(240px, 84%); margin: 0 auto; }
.saved-empty h3 { font-size: 20px; margin: 16px 0 8px; }
.saved-empty p { font-size: 13px; line-height: 1.6; }
.saved-explore { min-height: 46px; margin-top: 12px; background: var(--search-teal); color: #fff; border-radius: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.saved-storage-warning, .saved-detail-notice { padding: 12px; background: #f8f2df; color: #61491e; border-radius: 5px; font-size: 13px; line-height: 1.5; }
.saved-drawer-disclosure { margin-top: 24px; font-size: 10px; }
.listing-gallery-frame > .listing-save { top: 68px; right: 14px; width: 44px; height: 44px; }
.listing-gallery-frame > .listing-save-labeled { width: auto; min-width: 92px; padding: 8px 13px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.saved-state-label { font-size: 12px; font-weight: 750; background: #fff; }
.saved-toast { position: fixed; inset: 20px 20px auto auto; margin: 0; display: flex; align-items: flex-start; gap: 12px; width: min(410px, calc(100vw - 32px)); padding: 18px; border: 1px solid #dfe3dd; border-radius: 9px; background: #fff; color: var(--search-ink); box-shadow: 0 10px 40px #10282d33; z-index: 1000; font: 13px/1.5 Manrope, Arial, sans-serif; pointer-events: none; }
.saved-toast button { pointer-events: auto; }
.saved-toast-icon { flex: none; color: #987020; font-size: 34px; line-height: 1.2; }
.saved-toast strong { display: block; font-size: 14px; }
.saved-toast p { margin: 5px 0 0; color: #506468; }
.saved-toast-undo { margin-top: 8px; padding: 3px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: #765611; font-weight: 800; }
.saved-toast-close { width: 32px; height: 32px; min-width: 32px; border: 0; font-size: 24px; margin: -8px -8px 0 0; }
.saved-view-cta:is(:hover, :focus-visible) { background: #e4ba68 !important; color: var(--search-ink) !important; }
@media (max-width: 1200px) {
  .saved-toolbar-button { display: block; margin-left: auto; }
  .search-view-row { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 520px) {
  .saved-homes-drawer { width: 100vw; }
  .saved-drawer-heading { padding: 14px 16px; }
  .saved-drawer-heading h2 { font-size: 24px; }
  .saved-drawer-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .saved-home-preview { grid-template-columns: 90px minmax(0, 1fr) 54px; gap: 8px; }
  .saved-home-info .saved-home-price { font-size: 17px; }
  .saved-toast { inset: auto 12px calc(16px + env(safe-area-inset-bottom)) auto; width: calc(100vw - 24px); }
  .saved-toast-close { width: 44px; height: 44px; min-width: 44px; }
}

/* Listing photos: a soft shimmer while a photo is on its way, a quiet house
   icon only when a home has no photo -- never an "unavailable" message. */
.listing-photo--loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #e9e8e1 20%, #f6f4ee 40%, #e9e8e1 60%); background-size: 220% 100%; animation: listing-photo-shimmer 1.4s ease-in-out infinite; }
.listing-photo:has(> img)::before { content: none; }
@keyframes listing-photo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .listing-photo--loading::before { animation: none; background: #eeece5; } }
.listing-photo-icon, .saved-home-photo-empty svg { width: 44px; height: 44px; color: #b9b3a3; }
.listing-photo:has(> img) .listing-photo-icon { display: none; }
.saved-home-photo-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.saved-home-photo-empty svg { width: 32px; height: 32px; }
/* The loading label: a gold spinner and "Loading photo…" over the shimmer. */
.listing-photo-loading-label { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: #4f5b5c; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.listing-photo-spinner { width: 28px; height: 28px; border: 3px solid rgba(214,168,77,.28); border-top-color: #c9962f; border-radius: 50%; animation: listing-photo-spin .9s linear infinite; }
@keyframes listing-photo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .listing-photo-spinner { animation-duration: 2.4s; } }
.listing-photo:has(> img) .listing-photo-loading-label { display: none; }

/* Filter headings: an icon tile in front of each section (Search Homes and
   Ekin Match share this form). */
.home-search-form summary { justify-content: flex-start; gap: 12px; }
.home-search-form summary::after { margin-left: auto; }
.filter-choice legend { display: flex; align-items: center; gap: 12px; }
.filter-icon { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #f3efe4; border: 1px solid #ebe3cf; color: #17383e; }
.filter-icon svg { width: 18px; height: 18px; }
.filter-title { min-width: 0; }

/* Apply Filters: a solid gold button that is easy to find. */
.search-apply { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-top: 18px; padding: 0 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #c8901f 0%, #d8a849 55%, #e7c27a 100%); color: #ffffff; font-size: 12px; letter-spacing: .14em; box-shadow: 0 10px 22px -12px rgba(140, 96, 15, .8); transition: filter .15s, box-shadow .15s, transform .15s; }
.search-apply:hover { filter: brightness(1.05); box-shadow: 0 14px 26px -12px rgba(140, 96, 15, .9); }
.search-apply:active { transform: translateY(1px); }
.search-apply-label { flex: 1; text-align: center; text-shadow: 0 1px 1px rgba(90, 60, 5, .35); }
.search-apply-icon svg, .search-apply-arrow svg { display: block; width: 22px; height: 22px; }
.filter-drawer .search-apply { background: linear-gradient(135deg, #c8901f 0%, #d8a849 55%, #e7c27a 100%); color: #ffffff; border: 0; min-height: 54px; }
@media (max-width: 900px) {
  .filter-icon { width: 38px; height: 38px; border-radius: 10px; }
  .filter-icon svg { width: 20px; height: 20px; }
  .search-apply { font-size: 14px; }
}
/* The Bedrooms/Bathrooms legend now holds an icon tile. A fieldset's own
   top edge sits at the middle of its legend, so a divider there would run
   through the taller legend: the legend carries the divider instead. */
.filter-choice { border-top: 0; }
.filter-choice legend { width: 100%; border-top: 1px solid var(--search-line); padding-top: 12px; }
@media (max-width: 900px) { .filter-choice legend { font-size: 13px; } }

/* Investment Properties: strategy chooser and arrival highlight */
.investment-dialog { width: min(640px, calc(100vw - 32px)); border-radius: 18px; background: linear-gradient(180deg, #fbf8f2, #f4eee3); }
.investment-dialog .brief-body { padding: 40px 34px 34px; }
.investment-dialog .brief-body .kicker { color: #8a6312; }
.investment-dialog .brief-body h2 { color: #12302f; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 500; }
.investment-dialog #investment-choose > p:not(.kicker), .investment-contact-intro { margin: -6px 0 22px; color: #4f5859; font-size: 15px; line-height: 1.6; }
.investment-dialog .listing-close { border: 1px solid rgba(184, 137, 47, .45); background: #fff; }
.investment-options { display: grid; gap: 14px; margin-bottom: 22px; }
.investment-option { display: flex; align-items: center; gap: 18px; width: 100%; padding: 16px 18px; border: 1px solid rgba(184, 137, 47, .14); border-radius: 16px; background: #fff; color: #12302f; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 14px 30px -20px rgba(18, 38, 43, .45); transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.investment-option-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 12px; background: #f1ece1; color: #12302f; transition: background .2s ease, color .2s ease; }
.investment-option-icon svg { width: 24px; height: 24px; }
.investment-option-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.investment-option-copy strong { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.2; }
.investment-option-copy small { color: #5f6566; font-size: 14px; line-height: 1.4; transition: color .2s ease; }
.investment-option-arrow { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #efe9dc; color: #12302f; font-size: 18px; transition: background .2s ease, color .2s ease; }
.investment-option:hover, .investment-option:focus-visible { background: linear-gradient(110deg, #b07f25 0%, #c4973a 55%, #d6af62 100%); color: #fff; box-shadow: 0 18px 34px -18px rgba(150, 105, 30, .65); transform: translateY(-1px); }
.investment-option:is(:hover, :focus-visible) .investment-option-copy small { color: rgba(255, 255, 255, .92); }
.investment-option:is(:hover, :focus-visible) .investment-option-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.investment-option:is(:hover, :focus-visible) .investment-option-arrow { background: rgba(255, 255, 255, .25); color: #fff; }
.investment-option:focus-visible { outline: 3px solid #12302f; outline-offset: 2px; }
.investment-talk { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: 8px; background: linear-gradient(110deg, #b58428, #c99c42); color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 600; cursor: pointer; transition: filter .2s ease, box-shadow .2s ease; }
.investment-talk svg { width: 22px; height: 22px; }
.investment-talk:hover, .investment-talk:focus-visible { filter: brightness(1.06); box-shadow: 0 14px 28px -16px rgba(150, 105, 30, .7); }
.investment-talk:focus-visible { outline: 3px solid #12302f; outline-offset: 3px; }
.investment-talk:disabled { opacity: .65; cursor: progress; }
.investment-back { margin: 0 0 18px; padding: 6px 0; border: 0; background: none; color: #8a6312; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.investment-back:hover, .investment-back:focus-visible { text-decoration: underline; }
.investment-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 16px; }
.investment-contact-grid label { display: grid; gap: 6px; color: #12302f; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.investment-wide { grid-column: 1 / -1; }
.investment-contact-grid :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d8ccb4; border-radius: 8px; background: #fff; color: #12262b; font: inherit; font-size: 15px; font-weight: 400; }
.investment-contact-grid textarea { min-height: 90px; resize: vertical; }
.investment-contact-grid :is(input, select, textarea):focus { outline: 2px solid #c9962f; outline-offset: 1px; border-color: #c9962f; }
.investment-contact-grid [aria-invalid="true"] { border-color: #b3261e; }
.investment-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.investment-contact-error { margin: 0 0 14px; color: #b3261e; font-size: 14px; }
.investment-contact-note { margin: 10px 0 0; color: #6d6a63; font-size: 12px; text-align: center; }
.investment-sent { padding: 18px 0 4px; text-align: center; }
.investment-sent-check { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 50%; background: #1f8a4c; color: #fff; }
.investment-sent-check svg { width: 40px; height: 40px; }
.investment-sent p { margin: 10px auto 24px; max-width: 420px; color: #4f5859; font-size: 15px; line-height: 1.6; }
@media (max-width: 560px) {
  .investment-dialog .brief-body { padding: 30px 18px 22px; }
  .investment-dialog .brief-body h2 { font-size: 28px; }
  .investment-option { gap: 12px; padding: 14px; }
  .investment-option-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .investment-option-copy strong { font-size: 18px; }
  .investment-option-arrow { flex-basis: 36px; width: 36px; height: 36px; }
  .investment-contact-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .investment-option, .investment-option-icon, .investment-option-arrow, .investment-talk { transition: none; } .investment-option:hover { transform: none; } }
.lifestyle-card.is-highlighted { animation: investment-highlight 2.4s ease-out 1; }
@keyframes investment-highlight { 0%, 60% { box-shadow: 0 0 0 4px #d4a24c, 0 18px 40px rgba(212, 162, 76, .35); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .lifestyle-card.is-highlighted { animation-duration: .01s; outline: 3px solid #d4a24c; } }

/* New SoldByEkin mark on a dark disc, as in the logo artwork */
.ekin-contact-logo { box-sizing: border-box; padding: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #0d3a42, #062e33 70%); box-shadow: 0 6px 16px #062e3333; }

/* Explore by Lifestyle: three equal cards in a row, then full-width banners (Open Houses, Investment). */
.lifestyle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; gap: 16px; }
.lifestyle-grid .lifestyle-card { grid-area: auto; aspect-ratio: 16 / 10; background: #0b2f2d; cursor: pointer; }
/* Each photo fills the top of its card; the dark green fade carries the title below it. */
.lifestyle-grid .lifestyle-card:not(.lifestyle-banner) img { position: absolute; inset: 0 0 auto; height: 84%; object-position: center top; }
.lifestyle-grid .lifestyle-card:not(.lifestyle-banner) .lifestyle-card-overlay { background: linear-gradient(180deg, transparent 40%, rgba(11, 47, 45, .55) 62%, #0b2f2d 86%); }
.lifestyle-grid .lifestyle-card .lifestyle-card-copy { right: 72px; padding: 0 22px 20px; }
.lifestyle-grid .lifestyle-card .lifestyle-card-copy strong { font-size: 22px; }
.lifestyle-grid .lifestyle-card .lifestyle-card-copy small { font-size: 13px; margin-top: 4px; }
.lifestyle-grid .lifestyle-card .lifestyle-card-arrow { right: 18px; bottom: 18px; width: 44px; height: 44px; font-size: 17px; }
.lifestyle-grid .lifestyle-card:focus-visible { outline: 3px solid #c9a050; outline-offset: 3px; }

.lifestyle-grid .lifestyle-banner { grid-column: 1 / -1; aspect-ratio: auto; display: flex; align-items: center; min-height: 290px; border-radius: 12px; background: #0b2f2d; }
.lifestyle-banner img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 60%; height: 100%; object-fit: cover; object-position: center 60%; }
.lifestyle-banner .lifestyle-card-overlay { background: linear-gradient(90deg, #0b2f2d 0%, #0b2f2d 40%, rgba(11, 47, 45, .7) 48%, rgba(11, 47, 45, .15) 62%, rgba(11, 47, 45, 0) 72%); }
.invest-banner-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 48px; color: #fff; }
.invest-banner-kicker { color: #d9b062; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.invest-banner-kicker::after { content: ""; display: block; width: 150px; height: 1px; margin: 14px 0 18px; background: rgba(201, 160, 80, .7); }
.invest-banner-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 3.3vw, 46px); font-weight: 500; line-height: 1.1; }
.invest-banner-sub { margin-top: 10px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.invest-banner-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 13px 30px; border-radius: 999px; background: #d4a24c; color: #12262b; font-size: 15px; font-weight: 700; transition: background .2s ease, box-shadow .2s ease; }
.lifestyle-invest-banner:hover .invest-banner-cta, .lifestyle-invest-banner:focus-visible .invest-banner-cta { background: #e2b45a; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
/* Open Houses banner: the photo carries its own sign and arrow, so it is anchored
   bottom right (never cropped away) and the copy needs no button. */
.lifestyle-openhouse-banner img { width: 54%; object-position: right bottom; }
.lifestyle-openhouse-banner .lifestyle-card-overlay { background: linear-gradient(90deg, #0b2f2d 0%, #0b2f2d 46%, rgba(11, 47, 45, .6) 52%, rgba(11, 47, 45, 0) 64%); }

@media (max-width: 900px) {
  .lifestyle-grid { grid-template-columns: 1fr; }
  .lifestyle-grid .lifestyle-card { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .lifestyle-grid .lifestyle-card { aspect-ratio: 4 / 3; }
  .lifestyle-grid .lifestyle-banner { flex-direction: column; align-items: stretch; min-height: 0; aspect-ratio: auto; }
  .lifestyle-banner img { position: relative; width: 100%; height: 190px; }
  .lifestyle-banner .lifestyle-card-overlay { inset: 0 0 auto; height: 190px; background: linear-gradient(180deg, rgba(11, 47, 45, 0) 50%, #0b2f2d 100%); }
  .invest-banner-copy { padding: 20px 22px 26px; }
  .invest-banner-cta { align-self: stretch; justify-content: center; }
  .lifestyle-openhouse-banner img { width: 100%; height: 220px; }
  .lifestyle-openhouse-banner .lifestyle-card-overlay { height: 220px; background: linear-gradient(180deg, rgba(11, 47, 45, 0) 60%, #0b2f2d 100%); }
}

/* Lifestyle redesign: three cards with an icon badge and their home count,
   Exclusive Listings and Open Houses side by side, then Investment. */
.lifestyle-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lifestyle-grid .lifestyle-card:not(.lifestyle-banner) { grid-column: span 2; }
.lifestyle-grid .lifestyle-half { grid-column: span 3; min-height: 260px; }
.lifestyle-grid .lifestyle-half[hidden] { display: none; }
.lifestyle-grid:has(.lifestyle-exclusive-banner[hidden]) .lifestyle-openhouse-banner { grid-column: 1 / -1; }
.lifestyle-card-icon { position: absolute; z-index: 1; left: 18px; top: 18px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(217, 176, 98, .75); border-radius: 50%; background: rgba(11, 47, 45, .88); color: #e2c07a; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.lifestyle-card-icon svg { width: 22px; height: 22px; }
.lifestyle-card-count { display: block; margin-top: 8px; color: #e2c07a; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lifestyle-card-count[hidden] { display: none; }
.lifestyle-half .invest-banner-copy { padding: 30px 34px; max-width: 62%; }
.lifestyle-half .invest-banner-title { font-size: clamp(28px, 2.5vw, 38px); }
.lifestyle-half .invest-banner-sub { font-size: 15px; }
.lifestyle-half img { width: 58%; }
.lifestyle-exclusive-banner img { object-position: center 70%; }
.lifestyle-openhouse-banner img { width: 58%; object-position: center bottom; }
.lifestyle-openhouse-banner .lifestyle-card-overlay, .lifestyle-exclusive-banner .lifestyle-card-overlay { background: linear-gradient(90deg, #0b2f2d 0%, #0b2f2d 40%, rgba(11, 47, 45, .7) 50%, rgba(11, 47, 45, .1) 68%, rgba(11, 47, 45, 0) 80%); }
.invest-banner-cta-light { background: #fff; color: #0b2f2d; }
.lifestyle-openhouse-banner:hover .invest-banner-cta-light, .lifestyle-openhouse-banner:focus-visible .invest-banner-cta-light { background: #f3ead8; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.lifestyle-exclusive-banner { text-decoration: none; }
.lifestyle-exclusive-banner:hover .invest-banner-cta, .lifestyle-exclusive-banner:focus-visible .invest-banner-cta { background: #e2b45a; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.invest-banner-icon { position: static; margin-bottom: 16px; }
body.map-mode .ekin-collection { display: none; }
@media (max-width: 1100px) {
  .lifestyle-half .invest-banner-copy { max-width: 70%; padding: 26px; }
}
@media (max-width: 900px) {
  .lifestyle-grid { grid-template-columns: 1fr; }
  .lifestyle-grid .lifestyle-card:not(.lifestyle-banner), .lifestyle-grid .lifestyle-half { grid-column: auto; }
  .lifestyle-half .invest-banner-copy { max-width: none; }
}
@media (max-width: 700px) {
  .lifestyle-grid .lifestyle-half { min-height: 0; }
  .lifestyle-half img, .lifestyle-openhouse-banner img { width: 100%; height: 200px; }
  .lifestyle-openhouse-banner img { object-position: center 62%; }
  .lifestyle-half .lifestyle-card-overlay, .lifestyle-openhouse-banner .lifestyle-card-overlay, .lifestyle-exclusive-banner .lifestyle-card-overlay { inset: 0 0 auto; height: 200px; background: linear-gradient(180deg, rgba(11, 47, 45, 0) 55%, #0b2f2d 100%); }
  .lifestyle-half .invest-banner-copy { padding: 18px 22px 24px; }
  .lifestyle-card-icon { left: 14px; top: 14px; width: 40px; height: 40px; }
}

/* Search Homes hero: deeper green fade on the left, icon tabs, pin field icon, lined signoff */
.search-hero { background: linear-gradient(90deg, rgba(4, 38, 40, .92) 0%, rgba(4, 38, 40, .78) 26%, rgba(4, 38, 40, .38) 50%, rgba(4, 38, 40, .08) 70%, rgba(4, 38, 40, 0) 100%), url('/assets/search-hero-sunset.webp') center 55%/cover; }
.search-modes button, .search-mode-map-button { gap: 10px; min-height: 54px; border-color: rgba(255, 255, 255, .38); border-radius: 6px; background: rgba(3, 35, 38, .55); font-size: 16px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
.search-modes button[aria-selected='true'], .search-mode-map-button[aria-pressed='true'] { border-color: #d4a24c; background: #d4a24c; color: #10292b; }
/* The other modes turn gold on hover/keyboard focus too; AI Search stays the selected default. */
.search-modes button[aria-selected='false']:hover, .search-modes button[aria-selected='false']:focus-visible,
.search-mode-map-button[aria-pressed='false']:hover, .search-mode-map-button[aria-pressed='false']:focus-visible { border-color: #d4a24c; background: #d4a24c; color: #10292b; }
/* While another mode is hovered, only that one is gold: the selected one steps back. */
.search-modes-row:has(.search-modes button[aria-selected='false']:hover, .search-mode-map-button[aria-pressed='false']:hover) :is(.search-modes button[aria-selected='true'], .search-mode-map-button[aria-pressed='true']) { border-color: rgba(255, 255, 255, .38); background: rgba(3, 35, 38, .55); color: white; }
.search-mode-icon { flex: 0 0 20px; width: 20px; height: 20px; }
/* Mila Match beside the search modes: a link to /mila-match, styled in styles.css as the glowing gold pill. */
.search-modes-row:has(.search-mode-mila) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.search-mode-mila { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 14px; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; }
.search-mode-mila:hover, .search-mode-mila:focus-visible { color: #fff; border-color: #f3d27f; box-shadow: 0 0 0 1px rgba(255, 222, 150, .45), 0 0 20px 3px rgba(232, 195, 107, .75), 0 0 44px rgba(232, 195, 107, .4), inset 0 0 16px rgba(232, 195, 107, .3); }
.search-mode-mila:focus-visible { outline: 3px solid #f0c46a; outline-offset: 3px; }
.search-mode-mila-new { position: absolute; display: block; border-radius: 999px; line-height: 1.1; white-space: nowrap; }
.search-spark-pin { display: grid; place-items: center; }
.search-spark-pin .search-mode-icon { width: 26px; height: 26px; color: #c9962f; }
.search-hero-signoff span { display: flex; align-items: center; justify-content: center; gap: 14px; text-transform: uppercase; }
.search-hero-signoff span::before, .search-hero-signoff span::after { content: ""; width: 48px; height: 1px; background: rgba(217, 176, 98, .85); }
@media (max-width: 600px) {
  .search-hero { background-image: linear-gradient(180deg, rgba(4, 38, 40, .88) 0%, rgba(4, 38, 40, .72) 60%, rgba(4, 38, 40, .55) 100%), url('/assets/search-hero-sunset.webp'); background-position: 78% 45%; }
  .search-modes button, .search-mode-map-button { min-height: 50px; font-size: 15px; }
  .search-modes-row:has(.search-mode-mila) { grid-template-columns: 1fr; }
  .search-mode-mila { justify-content: flex-start; min-height: 50px; margin-top: 4px; padding-inline: 12px; font-size: 14px; }
}

/* Apply Filters: dark green, white two-line label, easy to spot and tap */
.search-apply, .filter-drawer .search-apply { min-height: 62px; margin-top: 22px; padding: 0 20px; border: 0; border-radius: 14px; background: #0f3b40; color: #fff; box-shadow: 0 16px 30px -14px rgba(15, 59, 64, .75); }
.search-apply:hover, .search-apply:focus-visible { background: #155058; filter: none; box-shadow: 0 18px 34px -14px rgba(15, 59, 64, .85); }
.search-apply:focus-visible { outline: 3px solid #d4a24c; outline-offset: 3px; }
.search-apply-label { display: grid; gap: 2px; font-size: 17px; font-weight: 700; letter-spacing: .01em; text-transform: none; text-shadow: none; line-height: 1.2; }
.search-apply-label small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; opacity: .85; }
.search-apply-icon svg, .search-apply-arrow svg { color: #fff; }
/* Leave room above the first card (Mila Match) so Apply Filters stands on its own */
.search-filter-sidebar .mila-match-promo { margin-top: 40px; }

/* Ekin Match and Map Search promo buttons: green with white text */
.ekin-match-promo .ekin-match-promo-cta, .map-search-promo-cta, .map-search-promo .button-gold { background: #0f3b40 !important; border-color: #0f3b40 !important; color: #fff !important; }
.ekin-match-promo .ekin-match-promo-cta > span:first-child { color: #d4a24c; }
.ekin-match-promo .ekin-match-promo-cta:hover, .ekin-match-promo .ekin-match-promo-cta:focus-visible, .map-search-promo-cta:hover, .map-search-promo-cta:focus-visible { background: #155058 !important; color: #fff !important; }
.map-search-promo-cta svg { color: #fff; }

/* Areas picked in the filter panel, waiting for Apply Filters */
.filter-pending-areas { margin: 10px 0 4px; }
.filter-pending-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pending-chips button { min-height: 34px; padding: 6px 12px; border: 1px solid #d4b26a; border-radius: 999px; background: #fbf3e2; color: #12302f; font: inherit; font-size: 13px; cursor: pointer; }
.filter-pending-chips button:hover, .filter-pending-chips button:focus-visible { border-color: #b8892f; background: #f6e8c8; }
.filter-pending-note { margin: 8px 0 0; color: #8a6312; }

/* Clear all: an outlined pill with an icon so it is easy to find */
.filter-heading .search-reset { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1.5px solid #0f3b40; border-radius: 999px; background: #fff; color: #0f3b40; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease; }
.filter-heading .search-reset svg { width: 15px; height: 15px; }
.filter-heading .search-reset:hover, .filter-heading .search-reset:focus-visible { background: #0f3b40; color: #fff; }
.filter-heading .search-reset:focus-visible { outline: 3px solid #d4a24c; outline-offset: 2px; }
/* A home with no MLS photos: a calm light frame instead of a black box, and no enlarge control. */
.listing-gallery-stage:has(> .listing-photo--empty), .listing-gallery-stage > .listing-detail-photo.listing-photo--empty { background: #e9e8e1; cursor: default; }
.listing-gallery-stage > .listing-detail-photo.listing-photo--empty .listing-photo-icon { width: 64px; height: 64px; }
.listing-gallery-frame:has(> .listing-gallery-stage > .listing-photo--empty) .listing-gallery-enlarge { display: none; }

/* Property description in another language: translation, with the original MLS remarks one tap away. */
.listing-translation { margin: 4px 0 14px; }
.listing-translation-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.listing-translation-badge, .listing-translation-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 13px; border: 1px solid #dcd6c8; border-radius: 6px; background: #fff; color: var(--search-ink, #1b3c40); font: 600 13px/1.2 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.listing-translation-badge { background: #f8f4ea; }
.listing-translation-toggle { cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.listing-translation-toggle:hover, .listing-translation-toggle:focus-visible { border-color: #c79a3e; background: #fbf7ee; }
.listing-translation-toggle:focus-visible { outline: 2px solid #c79a3e; outline-offset: 2px; }
.listing-translation-badge svg, .listing-translation-toggle svg { flex: 0 0 auto; width: 17px; height: 17px; color: #b8892f; }
.listing-translation-note { flex: 1 1 260px; margin: 0; color: #747b78; font-size: 11.5px; line-height: 1.45; text-align: right; }
.listing-translation-status { margin: 0; color: #747b78; font-size: 12px; line-height: 1.5; }
.listing-translation-status.is-unavailable { color: #8a6a2c; }
.listing-translation .listing-translation-status.is-unavailable { margin-top: 8px; }
.listing-translation[data-busy] .listing-translation-status::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border: 2px solid #e4dccb; border-top-color: #b8892f; border-radius: 50%; vertical-align: -1px; animation: listing-translation-spin .8s linear infinite; }
@keyframes listing-translation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .listing-translation[data-busy] .listing-translation-status::before { animation: none; } }
@media (max-width: 720px) {
  .listing-translation-bar { gap: 8px; }
  .listing-translation-badge, .listing-translation-toggle { flex: 1 1 auto; justify-content: center; }
  .listing-translation-toggle.listing-translation-action { flex: 0 1 auto; }
  .listing-translation-note { flex-basis: 100%; text-align: left; }
}

/* Open houses: a gold badge on the card photo (bottom left, clear of the
   "View photos" button) and a short list in the property view. */
.listing-open-house { position: absolute; bottom: 10px; left: 10px; z-index: 1; max-width: calc(100% - 150px); padding: 6px 10px; border-radius: 3px; background: #d4a24c; color: #12262b; font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.listing-open-houses { margin: 18px 0 4px; padding: 18px; border: 1px solid #ecdcb6; border-radius: 14px; background: #faf6ee; }
.listing-open-houses-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.listing-open-houses-icon { display: inline-flex; flex: none; color: #b8862f; }
.listing-open-houses-icon svg { width: 24px; height: 24px; }
.listing-open-houses .listing-open-houses-heading { flex: 1 1 auto; min-width: 0; margin: 0; color: #17363b; font-size: 19px; line-height: 1.25; }
.listing-open-houses-count { flex: none; padding: 5px 11px; border-radius: 999px; background: #ebe9e4; color: #24302f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.listing-open-house-times { margin: 0; padding: 2px 16px; border-radius: 12px; background: #fff; list-style: none; }
.listing-open-house-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.listing-open-house-time + .listing-open-house-time { border-top: 1px solid #ebe6da; }
.listing-open-house-when { display: grid; gap: 4px; min-width: 0; }
.listing-open-house-day { color: #17363b; font-size: 16px; font-weight: 700; }
.listing-open-house-hours { color: #667275; font-size: 15px; }
.listing-open-house-next { flex: none; padding: 4px 11px; border-radius: 999px; background: #e6f3e8; color: #2e7a3a; font-size: 13px; font-weight: 600; }
.listing-open-house-note { margin: 10px 0 0; font-size: 13px; color: #56656a; }
/* Tour this open house with Ekin: the box's one button, dark and full width. */
.listing-open-house-meet { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; margin: 14px 0 0; padding: 12px 18px; border: 0; border-radius: 10px; background: #183a3f; color: #fff; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; transition: background-color .2s ease; }
.listing-open-house-meet svg { flex: none; width: 21px; height: 21px; }
.listing-open-house-arrow { flex: none; color: #d9b25e; transition: transform .2s ease; }
.listing-open-house-meet:hover, .listing-open-house-meet:focus-visible { background: #0f2c30; color: #fff; }
.listing-open-house-meet:hover .listing-open-house-arrow, .listing-open-house-meet:focus-visible .listing-open-house-arrow { transform: translateX(3px); }
.listing-open-house-meet:focus-visible { outline: 3px solid #d9b25e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .listing-open-house-meet, .listing-open-house-arrow { transition: none; } }
.listing-tour-openhouse select { width: 100%; }

/* ==== Arabic, right to left (html dir="rtl", set by i18n.js) ====
   Flex and grid rows turn by themselves; these turn what is placed with
   left/right. The photo galleries keep their arrows, swipes and thumbnail
   strip left to right (previous on the left, as home-search.js moves them);
   the badges, save buttons and counters around them turn. The Google map
   itself stays left to right. Prices, addresses, MLS lines and facts read
   left to right, on the right edge like the text around them. */
[dir="rtl"] .search-skip-link { left: auto; right: 20px; }
[dir="rtl"] .main-search-back-arrow { transform: translateY(-1px) scaleX(-1); }
[dir="rtl"] .search-hero { background: linear-gradient(270deg, rgba(4, 38, 40, .92) 0%, rgba(4, 38, 40, .78) 26%, rgba(4, 38, 40, .38) 50%, rgba(4, 38, 40, .08) 70%, rgba(4, 38, 40, 0) 100%), url('/assets/search-hero-sunset.webp') center 55%/cover; }
@media (max-width: 600px) { [dir="rtl"] .search-hero { background-image: linear-gradient(180deg, rgba(4, 38, 40, .88) 0%, rgba(4, 38, 40, .72) 60%, rgba(4, 38, 40, .55) 100%), url('/assets/search-hero-sunset.webp'); background-position: 78% 45%; } }
[dir="rtl"] .search-spark { margin-left: 0; margin-right: 8px; }
@media (max-width: 600px) { [dir="rtl"] .search-spark { margin-right: 0; } }
[dir="rtl"] .search-hero-signoff { left: 5vw; right: auto; }
[dir="rtl"] .search-trust > div { border-right: 0; border-left: 1px solid #d9e1df; }
[dir="rtl"] .search-trust > div:last-child { border: 0; }
[dir="rtl"] .idx-autocomplete, [dir="rtl"] .map-group-row, [dir="rtl"] .saved-summary-heading, [dir="rtl"] .saved-preview-view, [dir="rtl"] .investment-option, [dir="rtl"] .listing-tour-second-toggle, [dir="rtl"] .listing-inquiry-success-property { text-align: right; }

/* Lifestyle cards: the icon at the right, the arrow at the left, pointing left. */
[dir="rtl"] .lifestyle-card { text-align: right; }
[dir="rtl"] .lifestyle-card-copy { left: 58px; right: 0; }
[dir="rtl"] .lifestyle-card-water .lifestyle-card-copy { left: 74px; right: 0; }
[dir="rtl"] .lifestyle-grid .lifestyle-card .lifestyle-card-copy { left: 72px; right: 0; }
[dir="rtl"] .lifestyle-card-arrow { left: 16px; right: auto; transform: scaleX(-1); }
[dir="rtl"] .lifestyle-card-water .lifestyle-card-arrow { left: 22px; right: auto; }
[dir="rtl"] .lifestyle-grid .lifestyle-card .lifestyle-card-arrow { left: 18px; right: auto; }
[dir="rtl"] .lifestyle-card-icon { left: auto; right: 18px; }
[dir="rtl"] .lifestyle-banner img { left: 0; right: auto; }
@media (min-width: 701px) {
  [dir="rtl"] .lifestyle-banner .lifestyle-card-overlay { background: linear-gradient(270deg, #0b2f2d 0%, #0b2f2d 40%, rgba(11, 47, 45, .7) 48%, rgba(11, 47, 45, .15) 62%, rgba(11, 47, 45, 0) 72%); }
  [dir="rtl"] .lifestyle-openhouse-banner .lifestyle-card-overlay, [dir="rtl"] .lifestyle-exclusive-banner .lifestyle-card-overlay { background: linear-gradient(270deg, #0b2f2d 0%, #0b2f2d 40%, rgba(11, 47, 45, .7) 50%, rgba(11, 47, 45, .1) 68%, rgba(11, 47, 45, 0) 80%); }
}
@media (max-width: 700px) {
  [dir="rtl"] .lifestyle-card-icon { right: 14px; }
}
@media (max-width: 600px) {
  [dir="rtl"] .lifestyle-card-water .lifestyle-card-copy { left: 58px; }
  [dir="rtl"] .lifestyle-card-water .lifestyle-card-arrow { left: 16px; }
}

/* Filters: the sidebar's line on its inner (left) edge; the drawer slides from the left. */
[dir="rtl"] .search-notice { border-left: 0; border-right: 3px solid #be9140; }
[dir="rtl"] .search-filter-sidebar { border-right: 0; padding-right: 0; border-left: 1px solid var(--search-line); padding-left: 20px; }
[dir="rtl"] .home-search-form summary::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .filter-drawer { margin: 0 auto 0 0; }
[dir="rtl"] .search-apply-arrow svg, [dir="rtl"] .investment-talk svg, [dir="rtl"] .investment-option-arrow, [dir="rtl"] :is(.mila-match-promo-cta, .ekin-match-promo-cta, .map-search-promo-cta) > span:last-child { transform: scaleX(-1); }
[dir="rtl"] .investment-option-arrow { display: inline-block; }
/* The two promo cards: their picture at the top left, the pale curve mirrored. */
[dir="rtl"] .mila-match-promo { background: radial-gradient(130% 62% at 0% 0%, #f2e2bb 0%, #f8efdb 34%, #fbf8f0 64%); }
[dir="rtl"] .mila-match-promo-avatar { left: 18px; right: auto; }
[dir="rtl"] .mila-match-promo-brand { margin: 4px 0 36px 92px; }
[dir="rtl"] .ekin-match-promo::before { left: 0; right: auto; }
[dir="rtl"] .ekin-match-promo::after { left: 48px; right: auto; transform: rotate(-28deg); box-shadow: -32px 20px 45px #f1eadc; }
[dir="rtl"] .map-search-promo::before { left: auto; right: -102px; transform: rotate(23deg); box-shadow: -26px 22px 42px #f1eadc; }
[dir="rtl"] .map-search-promo-art { left: 0; right: auto; transform: scaleX(-1); }

/* Result cards: status and open-house badges at the right, the heart and
   "View photos" at the left, the photo count at the right. */
[dir="rtl"] .listing-gallery-thumbs { direction: ltr; }
[dir="rtl"] :is(.listing-card-count, .listing-gallery-count) { direction: ltr; unicode-bidi: isolate; }
/* The photo arrows stay put (previous on the left); "‹" and "›" would otherwise swap glyphs. */
[dir="rtl"] :is(.listing-gallery-arrow, .listing-card-arrow) { direction: ltr; }
[dir="rtl"] .listing-status { left: auto; right: 12px; }
[dir="rtl"] .listing-card-count { left: auto; right: 12px; }
[dir="rtl"] .listing-open-house { left: auto; right: 10px; }
[dir="rtl"] .listing-save { left: 9px; right: auto; }
[dir="rtl"] .listing-gallery-frame > .listing-save { left: 14px; right: auto; }
[dir="rtl"] .listing-gallery-enlarge { left: 14px; right: auto; }
[dir="rtl"] .listing-gallery-stage-loading::after { left: 14px; right: auto; }
/* The card, property and request-form price and address lines already hold
   their text in a left-to-right <bdi> (home-search.js) and keep the page's
   direction; the map's lines have no <bdi>. */
[dir="rtl"] :is(.listing-credit, .map-preview-price, .map-preview-address, .map-preview-city, .map-group-row-price, .map-group-row-address) { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .listing-facts > *, [dir="rtl"] .map-preview-facts { unicode-bidi: isolate; }
[dir="rtl"] .idx-suggestion-details { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Property details: the close button at the top left, the photo view's title line at the right. */
[dir="rtl"] .listing-close { float: left; margin: 12px 0 -56px 12px; }
[dir="rtl"] .listing-dialog-photos > .listing-close { left: 12px; right: auto; }
[dir="rtl"] .listing-dialog-photos .listing-photo-toolbar { padding: 10px 20px 10px 76px; }
[dir="rtl"] .listing-photo-title { padding-left: 0; border-left: 0; padding-right: 10px; border-right: 2px solid #e5ba66; }
@media (max-width: 600px) { [dir="rtl"] .listing-dialog-photos .listing-photo-toolbar { padding-left: 76px; padding-right: 12px; } }
[dir="rtl"] .listing-inquiry-dialog > .listing-close { left: 14px; right: auto; }
[dir="rtl"] .listing-inquiry-body h2 { margin: 0 0 4px 48px; }
@media (max-width: 520px) { [dir="rtl"] .listing-inquiry-body h2 { margin-right: 0; margin-left: 40px; } }
[dir="rtl"] .listing-inquiry-pills input[type='checkbox']:checked + span::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .brief-body blockquote { border-left: 0; border-right: 2px solid #c1a155; }
[dir="rtl"] .ekin-contact-lpt-lockup { padding-left: 0; border-left: 0; padding-right: 12px; border-right: 1px solid #d6d8d2; }
[dir="rtl"] .website-message-dialog .ekin-contact-identity { padding-right: 0; padding-left: 38px; }
[dir="rtl"] #website-message-count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .idx-logo::after { left: -9px; right: auto; }
@media (max-width: 600px) { [dir="rtl"] .idx-logo::after { left: -8px; } }
[dir="rtl"] .idx-disclosure-toggle { padding: 6px 10px 6px 0; }
[dir="rtl"] .listing-translation-note { text-align: left; }
@media (max-width: 720px) { [dir="rtl"] .listing-translation-note { text-align: right; } }
[dir="rtl"] .listing-translation[data-busy] .listing-translation-status::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .listing-open-house-arrow { transform: scaleX(-1); }
[dir="rtl"] .listing-open-house-meet:is(:hover, :focus-visible) .listing-open-house-arrow { transform: translateX(-3px) scaleX(-1); }

/* Map: the toolbar's search icon at the right, the preview's close button at the left. */
[dir="rtl"] .map-surface { direction: ltr; }
[dir="rtl"] .map-toolbar-search-icon { left: auto; right: 14px; }
[dir="rtl"] .map-toolbar-search input { padding: 0 42px 0 14px; }
[dir="rtl"] .map-type-toggle button { border-left: 0; border-right: 1px solid var(--search-line); }
[dir="rtl"] .map-type-toggle button:first-child { border-right: 0; }
[dir="rtl"] .map-preview-close { left: 6px; right: auto; }
[dir="rtl"] .map-group-heading { margin: 0 0 10px 24px; }
[dir="rtl"] .search-help svg { float: right; margin: 0 0 12px 14px; }

/* Saved homes: the drawer slides from the left, the toast sits top left. */
[dir="rtl"] .saved-homes-drawer { inset: 0 auto 0 0; box-shadow: 12px 0 48px #10282d26; }
[dir="rtl"] .saved-toast { inset: 20px auto auto 20px; }
@media (max-width: 520px) { [dir="rtl"] .saved-toast { inset: auto auto calc(16px + env(safe-area-inset-bottom)) 12px; } }
[dir="rtl"] .saved-toast-close { margin: -8px 0 0 -8px; }
[dir="rtl"] .saved-device-info { margin: -7px 0 0 -7px; }
@media (max-width: 1200px) { [dir="rtl"] .saved-toolbar-button { margin-left: 0; margin-right: auto; } }

/* Honeypot fields: off the right edge, which never scrolls in right to left. */
[dir="rtl"] .listing-inquiry-hp, [dir="rtl"] .investment-trap { left: auto; right: -10000px; }

/* ==== Arabic, Simplified Chinese, Japanese and Korean: no label under 11px ====
   These run at 7-10px for Latin capitals; Arabic, Chinese, Japanese and Korean letters need 11px at least. */
html:is(:lang(ar), :lang(zh-CN), :lang(ja), :lang(ko)) :is(.main-search-back, .search-hero-signoff span, .search-trust strong, .search-trust small, .filter-price label, .filter-note, .mila-match-promo .mila-match-promo-cta, .mila-match-promo > small, .mila-match-promo-features > span, .ekin-match-promo .ekin-match-promo-cta, .ekin-match-promo > small, .ekin-match-promo-features > span, .map-search-promo .map-search-promo-cta, .map-search-promo > small, .map-search-promo-features > span, .ekin-contact-signature-copy span, .ekin-contact-brokered, .listing-detail-actions .button, .search-help .button, .map-preview-body .button, .idx-source-strip, .idx-disclosure-toggle, .idx-legal-eyebrow) { font-size: 11px; }
@media (min-width: 601px) { html:is(:lang(ar), :lang(zh-CN), :lang(ja), :lang(ko)) :is(.search-sort, .search-sort select, .listing-details-button, .listing-ask) { font-size: 11px; } }

/* A home's details opened over another page (home-overlay.js): in that frame
   only the home's window shows, on a clear page, so the visitor's own page
   shows through, dimmed by the frame's backdrop; nothing of Search Homes. */
html[data-embed="home"], html[data-embed="home"] body { background: transparent !important; overflow: hidden; }
html[data-embed="home"] body > :is(.search-skip-link, .site-header, #main-content, .conversion-footer, .mobile-bar) { display: none !important; }
html[data-embed="home"] .listing-dialog::backdrop { background: transparent; }

/* ---- Compare (compare-tray.js): the button on each home, and the bar of
   homes picked for Compare Your Homes (/compare-homes) ---- */
.sbe-compare-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px; border: 1px dashed #9fbcbc; border-radius: 3px; background: #fff; color: var(--search-teal, #063d45); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sbe-compare-toggle[aria-pressed="true"] { border-style: solid; border-color: #b8892f; background: #f6ecd6; color: #4a3712; }
.sbe-compare-toggle:hover { border-color: #b8892f; }
.sbe-compare-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Accounts on and not signed in: the same button asks the visitor to register (account-gate.js). */
.sbe-compare-toggle.is-register { border-style: solid; border-color: var(--search-teal, #063d45); text-align: center; }
.sbe-compare-toggle.is-register:hover { border-color: #b8892f; background: #f6ecd6; }
.sbe-compare-icon { width: 16px; height: 16px; flex: none; }
.listing-actions .sbe-compare-toggle { grid-column: 1 / -1; }
.listing-detail-actions .sbe-compare-toggle { order: 2; flex: 1 1 100%; min-height: 46px; font-size: 11px; }
.map-preview-body .sbe-compare-toggle { width: 100%; margin-top: 8px; }
.sbe-compare-tray { position: fixed; z-index: 60; inset-inline: 0; bottom: 16px; width: min(calc(100% - 24px), 720px); margin: 0 auto; display: flex; align-items: center; gap: 10px 16px; padding: 10px 12px 10px 14px; border: 1px solid rgba(214, 168, 77, .55); border-radius: 16px; background: rgba(6, 41, 46, .96); color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
.sbe-compare-tray[hidden] { display: none; }
.sbe-compare-tray-homes { display: flex; flex: none; gap: 6px; }
.sbe-compare-tray-slot { width: 46px; height: 36px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: rgba(255, 255, 255, .12); }
.sbe-compare-tray-slot.is-empty { border-style: dashed; background: transparent; }
.sbe-compare-tray-slot img, .sbe-compare-tray-blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.sbe-compare-tray-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.sbe-compare-tray-count { font-size: 14px; font-weight: 700; }
.sbe-compare-tray-note { min-height: 1em; font-size: 12px; color: rgba(255, 255, 255, .78); }
.sbe-compare-tray-note.is-warning { color: #f1cf86; }
.sbe-compare-tray-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.sbe-compare-tray-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: linear-gradient(180deg, #e2b85f, #c9973c); color: #1f1606; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.sbe-compare-tray-go[aria-disabled="true"] { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78); cursor: not-allowed; }
.sbe-compare-tray-clear { min-height: 44px; padding: 8px 10px; border: 0; background: transparent; color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sbe-compare-tray a:focus-visible, .sbe-compare-tray button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
body.has-compare-tray { padding-bottom: 92px; }
@media (max-width: 900px) {
  .sbe-compare-toggle { min-height: 44px; font-size: 11px; }
  .sbe-compare-tray { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-compare-tray { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .sbe-compare-tray { width: calc(100% - 16px); gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; }
  .sbe-compare-tray-homes { display: none; }
  .sbe-compare-tray-count { font-size: 13px; line-height: 1.25; }
  .sbe-compare-tray-note { font-size: 11px; line-height: 1.3; }
  .sbe-compare-tray-note:empty { display: none; }
  .sbe-compare-tray-actions { gap: 2px; }
  .sbe-compare-tray-go { padding: 8px 12px; font-size: 13px; }
  .sbe-compare-tray-clear { padding: 6px 6px; font-size: 12px; }
  body.has-compare-tray { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media print { .sbe-compare-tray { display: none !important; } }

/* A home's own tour page (Ekin, 23 October 2026): a tag on the card photo,
   a gold button on the details photos and one beside Schedule a Tour. Each
   opens the tour in a new tab. Only homes with a real tour link get them. */
.listing-tour-badge { position: absolute; bottom: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 150px); padding: 6px 10px; border-radius: 3px; background: #10282dde; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.listing-tour-badge--raised { bottom: 44px; }
.listing-tour-play { font-size: .8em; line-height: 1; }
.listing-detail-actions .listing-virtual-tour-action { order: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--search-teal); border: 1px solid var(--search-teal); text-decoration: none; }
[dir="rtl"] .listing-tour-badge { left: auto; right: 10px; }

/* The site's own tour viewer: a Matterport tour or a YouTube/Vimeo video
   fills the screen above the home's details; the bar names the tour, offers
   it in a new tab and closes back to the home. */
.tour-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0c1d21; color: #fff; }
.tour-dialog[open] { display: flex; flex-direction: column; }
.tour-dialog::backdrop { background: rgba(5, 15, 18, .88); }
.tour-dialog-bar { display: flex; align-items: center; gap: 14px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: #10282d; border-bottom: 1px solid #ffffff1f; }
.tour-dialog-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tour-dialog-external { flex: none; color: #e7c88a; font-size: 13px; white-space: nowrap; }
.tour-dialog-close { flex: none; width: 44px; height: 44px; border: 1px solid #ffffff59; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.tour-dialog-close:is(:hover, :focus-visible) { background: #ffffff1a; }
.tour-dialog-frame { flex: 1; min-height: 0; }
.tour-dialog-iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
@media (max-width: 480px) { .tour-dialog-external { font-size: 12px; } .tour-dialog-title { font-size: 14px; } }

/* "Photos by room" (Ekin, 23 October 2026): a button beside the photo count
   opens the home's photos grouped by room, full screen above the details. A
   room name jumps to its photos; a photo opens in the large photo viewer. */
.listing-gallery-rooms { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid #063d45; border-radius: 18px; background: #fff; color: #063d45; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.listing-gallery-rooms:is(:hover, :focus-visible) { background: #eef5f4; }
.listing-gallery-rooms-icon { flex: none; width: 14px; height: 14px; fill: #d4a24c; }
.listing-dialog-photos .listing-gallery-rooms { border-color: #ffffff80; background: transparent; color: #fff; }
.listing-dialog-photos .listing-gallery-rooms:is(:hover, :focus-visible) { background: #ffffff1a; }
.rooms-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fcfcfa; color: #17383e; }
.rooms-dialog[open] { display: flex; flex-direction: column; }
.rooms-dialog::backdrop { background: rgba(5, 15, 18, .88); }
.rooms-dialog-bar { display: flex; align-items: center; gap: 14px; padding: max(10px, env(safe-area-inset-top)) 14px 10px 20px; background: #10282d; color: #fff; }
.rooms-dialog-heading { flex: 1; min-width: 0; }
.rooms-dialog-title { margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
.rooms-dialog-address { margin: 2px 0 0; overflow: hidden; color: #e5ba66; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.rooms-dialog-close { flex: none; width: 44px; height: 44px; border: 1px solid #ffffff59; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.rooms-dialog-close:is(:hover, :focus-visible) { background: #ffffff1a; }
.rooms-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 28px; scroll-padding-top: 64px; }
.rooms-chips { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; margin: 0 -20px 4px; padding: 12px max(20px, calc((100% - 1160px) / 2)); overflow-x: auto; background: #fcfcfa; border-bottom: 1px solid #dce3e1; scrollbar-width: none; }
.rooms-chips::-webkit-scrollbar { display: none; }
.rooms-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid #dce3e1; border-radius: 18px; background: #fff; color: #063d45; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rooms-chip:is(:hover, :focus-visible) { border-color: #063d45; }
.rooms-chip-count { color: #7a8d8f; font-weight: 400; }
.rooms-group, .rooms-note { max-width: 1200px; margin-inline: auto; }
.rooms-group { padding-top: 18px; }
.rooms-group-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 18px; }
.rooms-group-count { color: #7a8d8f; font-size: 13px; font-weight: 400; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rooms-photo { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #e8eeed; cursor: zoom-in; }
.rooms-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.rooms-photo:is(:hover, :focus-visible) img { transform: scale(1.03); }
.rooms-photo:focus-visible { outline: 3px solid #d4a24c; outline-offset: 2px; }
.rooms-photo-number { position: absolute; inset: 0; display: grid; place-items: center; color: #7a8d8f; font-size: 15px; }
.rooms-note { margin-top: 22px; margin-bottom: 0; color: #7a8d8f; font-size: 12px; }
.rooms-dialog-status { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; margin: 18vh auto 0; text-align: center; }
.rooms-status-title { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.rooms-status-note { margin: 0; color: #5d7174; font-size: 14px; }
.rooms-see-all { margin-top: 8px; }
.rooms-spinner { width: 34px; height: 34px; border: 3px solid #dce3e1; border-top-color: #d4a24c; border-radius: 50%; animation: rooms-spin 1s linear infinite; }
@keyframes rooms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rooms-spinner { animation-duration: 3s; } .rooms-photo img { transition: none; } }
@media (max-width: 600px) {
  .rooms-dialog-bar { padding-left: 14px; }
  .rooms-dialog-body { padding: 0 12px 24px; }
  .rooms-chips { margin: 0 -12px 4px; padding: 10px 12px; }
  .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rooms-group-title { font-size: 16px; }
}

/* ---- A home's details (Ekin's design, 29 October 2026) ----
   home-search.js details(): the photo, large, with the next three beside it
   and View all photos; then the price, address, facts and four key facts,
   Overview / Features / Location / Costs, and beside them the tour card,
   open houses and Ask Mila. The photo viewer (.listing-dialog-photos) is
   unchanged. */
.listing-dialog:not(.listing-dialog-photos) { width: min(1240px, calc(100vw - 32px)); max-height: 92vh; border-radius: 16px; }
/* Ekin's gallery mockup (29 October 2026): the large photo on the left (65%) and the next four in a
   2×2 grid on the right (35%), taller and fitted to the screen's height, narrow gaps, rounded outer corners. */
.listing-hero { position: relative; display: grid; grid-template-columns: minmax(0, 65fr) repeat(2, minmax(0, 17.5fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; height: clamp(320px, min(62vh, 46vw), 560px); overflow: hidden; border-radius: 16px 16px 0 0; background: #0f2a2e; }
.listing-hero.is-single { grid-template-columns: minmax(0, 1fr); }
.listing-hero > .listing-gallery { position: relative; grid-column: 1; grid-row: 1 / -1; min-width: 0; height: 100%; overflow: hidden; }
/* Fewer than four more photos: the ones there are share the right side. */
.listing-hero-tiles[data-count="1"] .listing-hero-tile { grid-column: 2 / -1; grid-row: 1 / -1; }
.listing-hero-tiles[data-count="2"] .listing-hero-tile, .listing-hero-tiles[data-count="3"] .listing-hero-tile:nth-child(3) { grid-column: 2 / -1; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #10282d; font-size: 34px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-arrow:hover { background: #fff; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-previous { left: 18px; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-next { right: 18px; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-frame,
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-stage,
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-stage > .listing-detail-photo { height: 100%; aspect-ratio: auto; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-stage > .listing-detail-photo img { object-fit: cover; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-thumbs,
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-status { display: none; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-controls { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 0; gap: 8px; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-count { min-width: 0; padding: 7px 14px; border-radius: 999px; background: rgba(8, 52, 58, .9); color: #fff; font-weight: 700; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-count:empty { display: none; }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-retry { position: absolute; left: 50%; top: 50%; z-index: 2; margin: 0; transform: translate(-50%, -50%); }
.listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-enlarge { right: 16px; bottom: 16px; padding: 8px 18px; border-radius: 999px; font-size: 14px; }
.listing-hero-tiles { display: contents; }
.listing-hero-tiles[hidden], .listing-hero-tile[hidden], .listing-hero-all[hidden] { display: none; }
.listing-hero-tile { position: relative; min-width: 0; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #2b4044; cursor: zoom-in; }
.listing-hero-tile:not(:has(img)) { background: linear-gradient(110deg, #2b4044 30%, #36504f 50%, #2b4044 70%); background-size: 220% 100%; animation: listing-hero-wait 1.6s ease-in-out infinite; }
@keyframes listing-hero-wait { to { background-position: -120% 0; } }
.listing-hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.listing-hero-tile:is(:hover, :focus-visible) img { transform: scale(1.04); }
.listing-hero-tile:focus-visible, .listing-hero-all:focus-visible { outline: 3px solid #d6ac50; outline-offset: -3px; }
.listing-hero-all { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: #fff; color: #10282d; font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; }
.listing-hero-all svg, .listing-detail-icon svg { width: 20px; height: 20px; flex: none; }
.listing-dialog-photos .listing-hero { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; gap: 0; border-radius: 0; background: #000; }
.listing-dialog-photos .listing-hero-tiles { display: none; }

.listing-dialog:not(.listing-dialog-photos) .listing-detail-body { padding: 28px 40px 36px; }
/* The two columns in their own grid, so the tour card (sticky) stops above the MLS / IDX information. */
.listing-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px 44px; align-items: start; }
.listing-detail-main { min-width: 0; }
.listing-detail-side { position: sticky; top: 16px; display: grid; gap: 16px; min-width: 0; }
.listing-detail-legal { margin-top: 28px; }
.listing-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; }
.listing-detail-title { min-width: 0; }
.listing-detail-status { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: #e5f3e8; color: #1f6336; font-size: 13px; font-weight: 700; }
.listing-detail-status i { width: 8px; height: 8px; border-radius: 50%; background: #2f9a50; }
.listing-detail-title .listing-price { margin: 0 0 6px; font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: #0b3b3c; }
.listing-detail-body .listing-detail-title h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.listing-detail-title .listing-location { margin: 4px 0 0; font-size: 15px; color: #5c6b6e; }
.listing-detail-tools { display: flex; gap: 20px; align-items: flex-start; flex: none; }
.listing-detail-tools .listing-save, .listing-detail-tools .listing-share-toggle { position: static; display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto; min-width: 64px; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #10282d; font-size: 14px; font-weight: 700; box-shadow: none; }
.listing-detail-tools .listing-save .saved-heart-icon, .listing-detail-tools .listing-share-toggle svg { box-sizing: border-box; width: 52px; height: 52px; padding: 13px; border: 1px solid #d6dcd8; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(16, 40, 45, .06); }
.listing-detail-tools .saved-state-label { padding: 0; background: none; font-size: 14px; font-weight: 700; }
.listing-detail-tools .listing-save[aria-pressed='true'] .saved-heart-icon { border-color: #e3c47e; background: #fbf3e2; }
.listing-detail-tools .listing-save:hover .saved-heart-icon, .listing-detail-tools .listing-share-toggle:hover svg { border-color: #10282d; }
.listing-detail-tools .listing-share { margin: 0; }
.listing-detail-tools .listing-share-menu { inset-inline-start: auto; inset-inline-end: 0; }
.listing-detail-tools .listing-share-status { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; width: max-content; max-width: 260px; }
.listing-detail-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 0; margin: 22px 0 0; padding: 0; font-size: 15px; color: #2c3138; }
.listing-detail-facts li { display: inline-flex; align-items: center; gap: 9px; padding: 2px 20px; border-inline-start: 1px solid #e1e4df; }
.listing-detail-facts li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.listing-detail-facts .listing-detail-icon { color: #4b5a5c; }
.listing-key-facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; }
.listing-key-facts li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 10px; background: #f7f3ea; }
.listing-key-facts .listing-detail-icon { color: #b2832a; }
.listing-key-facts .listing-detail-icon svg { width: 28px; height: 28px; }
.listing-key-fact { display: grid; gap: 2px; min-width: 0; }
.listing-key-fact small { font-size: 13px; color: #5c6b6e; }
.listing-key-fact strong { font-size: 15px; font-weight: 700; color: #10282d; overflow-wrap: anywhere; }

.listing-tabs { margin-top: 26px; }
.listing-tablist { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid #e1e4df; scrollbar-width: none; }
.listing-tab { position: relative; flex: none; min-height: 46px; padding: 10px 14px; border: 0; background: none; color: #3e4a4c; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.listing-tab[aria-selected='true'] { color: #0b3b3c; font-weight: 700; }
.listing-tab[aria-selected='true']::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px; background: #d4a24c; }
.listing-tab:focus-visible { outline: 3px solid #d6ac50; outline-offset: -3px; border-radius: 6px; }
.listing-tab-panel { padding-top: 4px; }
.listing-tab-panel:focus-visible { outline: 2px solid #d6ac50; outline-offset: 4px; }
.listing-tab-panel h3 { margin: 24px 0 10px; font-size: 22px; line-height: 1.25; color: #10282d; }
.listing-remarks-section .listing-remarks { font-size: 15.5px; line-height: 1.75; }
.listing-remarks-section.is-clamped .listing-remarks { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.listing-remarks-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: #0b3b3c; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.listing-remarks-more[aria-expanded='true'] .listing-remarks-arrow { transform: rotate(-90deg); }
.listing-remarks-more:hover span:first-child { text-decoration: underline; }
.listing-highlights { margin-top: 24px; padding: 14px 18px 16px; border: 1px solid #e3c47e; border-radius: 12px; background: #fffdf8; }
.listing-highlights h3 { margin: 0 0 10px; font-size: 20px; }
.listing-highlights ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; margin: 0; padding: 0; }
.listing-highlights li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.listing-highlights .listing-detail-icon { color: #b2832a; }
.listing-detail-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.listing-detail-table > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecefe9; }
.listing-detail-table dt { color: #5c6b6e; font-size: 14.5px; }
.listing-detail-table dd { margin: 0; color: #10282d; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.listing-feature-group h3 { font-size: 18px; }
.listing-feature-group ul { columns: 2; column-gap: 32px; margin: 0; padding-inline-start: 20px; font-size: 14.5px; line-height: 1.8; }
.listing-panel-empty { margin: 18px 0 0; color: #5c6b6e; }
.listing-location-map { position: relative; height: 340px; overflow: hidden; border: 1px solid #e1e4df; border-radius: 12px; background: #eef1ec; }
.listing-location-map-wrap { position: relative; margin: 20px 0 8px; }
.listing-dialog .listing-location-map-wrap .map-type-toggle { position: absolute; top: 12px; left: 12px; z-index: 2; height: 40px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.listing-dialog .listing-location-map-wrap .map-type-toggle button { padding: 0 16px; font-size: 14px; }
.listing-location-map-status { display: grid; place-items: center; height: 100%; margin: 0; padding: 16px; color: #5c6b6e; font-size: 14.5px; text-align: center; }
.listing-map-pin { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: #0b3b3c; color: #e5ba66; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transform: translate(-50%, -100%) rotate(-45deg); }
.listing-map-pin svg { width: 20px; height: 20px; transform: rotate(45deg); }
.listing-location-link { display: inline-flex; align-items: center; gap: 8px; color: #0b3b3c; font-weight: 700; text-decoration: none; }
.listing-location-link:hover span { text-decoration: underline; }
.listing-costs-table { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
.listing-costs-total { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 0; border-bottom: 2px solid #d4a24c; font-size: 17px; font-weight: 700; color: #0b3b3c; }
.listing-costs-note { margin: 12px 0 10px; font-size: 13px; line-height: 1.55; color: #5c6b6e; }
.listing-detail-main > .listing-credit { margin-top: 28px; font-size: 13px; line-height: 1.6; color: #4b5a5c; }

.listing-tour-card { padding: 22px; border: 1px solid #e3e6e1; border-top: 4px solid #d4a24c; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(16, 40, 45, .08); }
.listing-detail-side .listing-tour-card-title { margin: 0; font-size: 24px; line-height: 1.2; color: #0b3b3c; }
.listing-tour-card-lede { margin: 6px 0 16px; font-size: 15px; color: #3e4a4c; }
.listing-tour-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.listing-tour-slot { display: grid; justify-items: center; gap: 2px; min-height: 84px; padding: 10px 4px; border: 1px solid #dde1dc; border-radius: 10px; background: #fff; color: #2c3138; font: inherit; font-size: 13px; cursor: pointer; }
.listing-tour-slot strong { font-size: 15px; color: #10282d; }
.listing-tour-slot[aria-pressed='true'] { border: 2px solid #d4a24c; background: #fbf3e2; }
.listing-tour-slot:focus-visible { outline: 3px solid #d6ac50; outline-offset: 2px; }
.listing-tour-card .listing-detail-actions { display: grid; gap: 10px; margin: 16px 0 0; }
.listing-tour-card .listing-detail-actions .button { width: 100%; min-height: 50px; margin: 0; border-radius: 8px; font-size: 16px; letter-spacing: 0; text-transform: none; }
.listing-tour-card .listing-tour-action { background: #0b3b3c; border-color: #0b3b3c; color: #fff; }
.listing-tour-card .listing-tour-action:hover { background: #10504f; }
.listing-tour-card .listing-inquiry-action { background: #fff; color: #0b3b3c; border: 1px solid #0b3b3c; }
.listing-tour-card .listing-virtual-tour-action { justify-content: center; }
.listing-detail-more { display: grid; gap: 8px; margin-top: 10px; }
.listing-detail-more > * { width: 100%; }
.listing-detail-more .sbe-compare-toggle { min-height: 46px; border-radius: 8px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.listing-advisor { display: grid; gap: 2px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e8ebe6; font-size: 14.5px; color: #4b5a5c; }
.listing-advisor strong { font-size: 17px; color: #10282d; }
.listing-detail-side .listing-open-houses { margin: 0; }

/* Ask Mila, right on the page: a conversation under the home's details, with Mila's picture
   (home-search.js milaChat); the same answers as Saved Homes and Mila Match. */
.listing-mila-chat { margin: 28px 0 4px; padding: 20px; border: 1px solid #dbe7e4; border-radius: 16px; background: #eef5f3; }
.listing-mila-chat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.listing-mila-chat-avatar { flex: none; width: 56px; height: 56px; border: 2px solid #e5ba66; border-radius: 50%; object-fit: cover; }
.listing-mila-chat h3 { margin: 0; font-size: 20px; color: #10282d; }
.listing-mila-chat-role { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #8b620b; }
.listing-mila-thread { position: relative; display: grid; gap: 12px; max-height: min(480px, 62vh); margin-bottom: 14px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.listing-mila-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; justify-items: start; }
.listing-mila-msg-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.listing-mila-you { justify-self: end; max-width: 80%; margin: 0; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #0b3b3c; color: #fff; }
.listing-mila-reply { max-width: 100%; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 40, 45, .08); }
.listing-mila-reply p { margin: 2px 0 0; line-height: 1.5; }
.listing-mila-name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b620b; }
.listing-mila-link { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: #0b3b3c; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.listing-mila-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.listing-mila-chips:empty { display: none; }
.listing-mila-chip { min-height: 40px; padding: 6px 14px; border: 1px solid #d9cfb6; border-radius: 999px; background: #fffaf0; color: #10282d; font: inherit; font-size: 14px; cursor: pointer; }
.listing-mila-chip:hover { border-color: #b2832a; }
.listing-mila-form { display: flex; gap: 8px; }
.listing-mila-form input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 14px; border: 1px solid #cdd3cf; border-radius: 10px; background: #fff; font: inherit; }
.listing-mila-form .button { min-height: 48px; margin: 0; border-radius: 10px; background: #0b3b3c; border-color: #0b3b3c; color: #fff; }
.listing-mila-note { margin: 12px 0 0; font-size: 12.5px; color: #4f5d60; }
.listing-mila-note:empty { display: none; }
/* Phones: the quick questions in one row that scrolls sideways, so the conversation keeps the room. */
@media (max-width: 767px) {
  .listing-mila-chat { padding: 16px; }
  .listing-mila-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .listing-mila-chips::-webkit-scrollbar { display: none; }
  .listing-mila-chip { flex: none; }
}
/* Ask Mila: what's near this home and the conversation (mila-ask-ui.js; Google Maps places). */
.listing-mila-picks, .listing-mila-reply .mila-next { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.listing-mila-picks .listing-mila-chip, .mila-next .listing-mila-chip { min-height: 36px; padding: 4px 12px; font-size: 13.5px; }
.listing-mila-reply .mila-wait { color: #5c6b6e; font-style: italic; }
.mila-places { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.mila-places li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 10px; border: 1px solid #ece6d6; border-radius: 10px; background: #fbf8f1; }
.mila-place { color: #0b3b3c; font-weight: 700; text-decoration: underline; overflow-wrap: break-word; }
/* Narrow screens: the miles under the name, so a long name keeps its words whole. */
@media (max-width: 560px) { .mila-places li { grid-template-columns: minmax(0, 1fr); } }
.mila-place-miles { color: #9c6e11; font-weight: 700; white-space: nowrap; }
.mila-place-address { grid-column: 1 / -1; font-size: 13px; color: #5c6b6e; }
.listing-mila-reply .mila-note { margin-top: 6px; font-size: 12.5px; color: #5c6b6e; }
.listing-mila-reply .mila-source { margin-top: 6px; font-family: Roboto, Arial, sans-serif; font-size: 12px; color: #5e5e5e; text-align: end; }
/* The county's official links for the buyer's own research (safety, schools, taxes). */
.mila-research { margin-top: 10px; padding: 10px 12px; border: 1px solid #d9e4e3; border-radius: 10px; background: #f4f8f8; }
.mila-research-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #0b3b3c; }
.mila-research ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mila-research a { color: #0b3b3c; font-weight: 600; text-decoration: underline; overflow-wrap: break-word; }
.mila-research a[target="_blank"]::after { content: " \2197"; }

/* Tablets and phones: one column, the tour card after the home's facts. */
@media (max-width: 1023px) {
  .listing-dialog:not(.listing-dialog-photos) .listing-detail-body { padding: 24px 24px 32px; }
  .listing-detail-columns { grid-template-columns: minmax(0, 1fr); }
  .listing-detail-side { position: static; }
  .listing-key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* On a phone a home's details fill the screen like a page of their own. The :not() matches the design rule
     above (width minus 32px, 92vh, rounded corners), which otherwise won on phones (Ekin, 30 October 2026). */
  .listing-dialog, .listing-dialog:not(.listing-dialog-photos) { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .listing-hero { grid-template-columns: minmax(0, 1fr); height: min(75vw, 420px); border-radius: 0; }
  .listing-hero-tile { display: none; }
  .listing-hero-all { display: none !important; }
  .listing-dialog:not(.listing-dialog-photos) .listing-detail-body { padding: 18px 16px 28px; }
  .listing-detail-columns { gap: 20px; }
  .listing-detail-head { flex-direction: column; }
  .listing-detail-tools { gap: 16px; }
  .listing-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; font-size: 14.5px; }
  .listing-detail-facts li { padding: 0; border: 0; }
  .listing-key-facts li { padding: 12px; }
  .listing-tab { flex: 1 1 auto; padding: 10px 8px; font-size: 15px; }
  .listing-detail-table { grid-template-columns: minmax(0, 1fr); }
  .listing-location-map { height: 260px; }
  .listing-feature-group ul { columns: 1; }
  .listing-highlights ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .listing-hero-tile img { transition: none; } .listing-hero-tile:not(:has(img)) { animation: none; } }
[dir="rtl"] .listing-hero-all { right: auto; left: 16px; }
[dir="rtl"] .listing-dialog:not(.listing-dialog-photos) .listing-hero .listing-gallery-controls { left: auto; right: 12px; }

/* The address in the photo gallery uses the site's Playfair Display on computers too; the file is only
   downloaded once that text is on screen (search.html loads the full font for phones only). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/playfair-display-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* All photos, full screen: Ekin's cream-and-gold gallery (5 November 2026;
   "always remember we are elegant and high tech"). A warm ivory room, the
   address and the buttons in a header of their own above the photo, the
   photo itself whole (never cropped or stretched, and never blown up past
   its own size, which is what made it look blurry), with rounded corners
   and a soft shadow; white round arrows, a small count, Zoom, and a compact
   thumbnail strip with a thin gold frame on the photo shown. Everything fits
   the screen, on phones too. */
.listing-dialog-photos { --pv-ivory: #f8f5ef; --pv-teal: #123d40; --pv-gold: #be9b52; --pv-gold-text: #80632a; --pv-line: rgba(18, 61, 64, .13); --pv-shadow: 0 2px 10px rgba(18, 61, 64, .1); background: var(--pv-ivory); color: var(--pv-teal); }
.listing-dialog-photos::backdrop { background: var(--pv-ivory); }
.listing-dialog-photos #listing-detail { position: relative; height: 100%; display: flex; flex-direction: column; }
/* Header */
.listing-dialog-photos .listing-photo-toolbar { position: static; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 0; padding: 14px 84px 10px 28px; background: none; }
.listing-dialog-photos .listing-photo-title { padding-left: 12px; border-left: 2px solid var(--pv-gold); gap: 3px; }
.listing-dialog-photos .listing-photo-toolbar .listing-photo-address { color: var(--pv-teal); font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.listing-dialog-photos .listing-photo-toolbar .listing-photo-location { color: var(--pv-gold-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.listing-dialog-photos .listing-photo-toolbar .listing-save { position: static; flex: none; width: 40px; height: 40px; border: 1px solid var(--pv-line); border-radius: 50%; background: #fff; color: var(--pv-teal); box-shadow: var(--pv-shadow); }
.listing-dialog-photos .listing-photo-toolbar .listing-save[aria-pressed='true'] { color: var(--pv-gold); border-color: color-mix(in srgb, var(--pv-gold) 55%, white); }
.listing-dialog-photos .listing-photo-toolbar .listing-save .saved-heart-icon { width: 21px; height: 21px; }
.listing-dialog-photos .listing-photo-toolbar .listing-save:focus-visible, .listing-dialog-photos .listing-photo-details:focus-visible, .listing-dialog-photos > .listing-close:focus-visible { outline: 2px solid var(--pv-teal); outline-offset: 3px; }
.listing-dialog-photos .listing-photo-details { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--pv-gold); color: var(--pv-teal); font-size: 13px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(190, 155, 82, .3); }
.listing-dialog-photos .listing-photo-details:hover { filter: brightness(1.05); }
.listing-dialog-photos > .listing-close { position: absolute; z-index: 5; top: 14px; right: 28px; width: 40px; height: 40px; margin: 0; float: none; display: grid; place-items: center; padding: 0 0 3px; border: 1px solid var(--pv-line); border-radius: 50%; background: #fff; color: var(--pv-teal); font-size: 26px; box-shadow: var(--pv-shadow); }
/* Photo, count, Zoom and thumbnails */
.listing-dialog-photos .listing-hero { flex: 1; min-height: 0; background: none; }
.listing-dialog-photos .listing-gallery { position: relative; flex: 1; min-height: 0; display: grid; grid-template: "frame frame" minmax(0, 1fr) "controls thumbs" auto / auto minmax(0, 1fr); gap: 12px 18px; padding: 4px 28px 16px; }
.listing-dialog-photos .listing-gallery-frame { grid-area: frame; position: relative; min-height: 0; }
.listing-dialog-photos .listing-gallery-stage, .listing-dialog-photos .listing-gallery-stage > .listing-detail-photo { height: 100%; aspect-ratio: auto; background: transparent; }
.listing-dialog-photos .listing-gallery-stage { cursor: zoom-in; }
.listing-dialog-photos .listing-gallery-stage:focus-visible { outline: 2px solid var(--pv-gold); outline-offset: 4px; border-radius: 16px; }
.listing-dialog-photos .listing-detail-photo { position: relative; overflow: hidden; color: var(--pv-teal); }
.listing-dialog-photos .listing-detail-photo::before { content: none; }
.listing-dialog-photos .listing-detail-photo img { position: absolute; inset: 0; z-index: 1; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 24px rgba(18, 61, 64, .1), 0 1px 4px rgba(18, 61, 64, .08); transition: transform .25s ease, border-radius .25s ease; }
.listing-dialog-photos .listing-gallery-stage.is-zoomed { cursor: zoom-out; touch-action: none; }
.listing-dialog-photos .listing-gallery-stage.is-zoomed > .listing-detail-photo { border-radius: 14px; }
.listing-dialog-photos .listing-gallery-stage.is-zoomed > .listing-detail-photo img { transform: scale(2); transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); border-radius: 0; }
.listing-dialog-photos .listing-gallery-stage-loading::after { border-color: rgba(18, 61, 64, .18); border-top-color: var(--pv-gold); }
.listing-dialog-photos .listing-gallery-arrow { z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid var(--pv-line); border-radius: 50%; background: #fff; color: var(--pv-teal); font-size: 30px; line-height: 1; box-shadow: 0 4px 14px rgba(18, 61, 64, .16); }
.listing-dialog-photos .listing-gallery-arrow:hover { background: #fff; border-color: var(--pv-gold); }
.listing-dialog-photos .listing-gallery-arrow:focus-visible { outline: 2px solid var(--pv-teal); outline-offset: 3px; }
.listing-dialog-photos .listing-gallery-previous { left: 12px; }
.listing-dialog-photos .listing-gallery-next { right: 12px; }
.listing-dialog-photos .listing-gallery-controls { grid-area: controls; position: static; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; pointer-events: auto; }
.listing-dialog-photos .listing-gallery-count { min-width: 0; padding: 7px 14px; border: 1px solid var(--pv-line); border-radius: 999px; background: #fff; color: var(--pv-teal); font-size: 13px; font-weight: 600; box-shadow: var(--pv-shadow); }
.listing-gallery-zoom { display: none; }
.listing-dialog-photos .listing-gallery-zoom { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; min-height: 34px; padding: 6px 14px; border: 1px solid var(--pv-line); border-radius: 999px; background: #fff; color: var(--pv-teal); font: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--pv-shadow); }
.listing-dialog-photos .listing-gallery-zoom[aria-pressed='true'] { border-color: var(--pv-gold); color: var(--pv-gold-text); }
.listing-dialog-photos .listing-gallery-zoom:focus-visible, .listing-dialog-photos .listing-gallery-rooms:focus-visible { outline: 2px solid var(--pv-teal); outline-offset: 2px; }
.listing-dialog-photos .listing-gallery-frame:has(> .listing-gallery-stage > .listing-photo--empty) ~ .listing-gallery-controls .listing-gallery-zoom { display: none; }
.listing-dialog-photos .listing-gallery-rooms { min-height: 34px; border: 0; background: transparent; color: var(--pv-gold-text); box-shadow: none; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.listing-dialog-photos .listing-gallery-rooms:is(:hover, :focus-visible) { background: transparent; text-decoration-color: currentColor; }
.listing-dialog-photos .listing-gallery-thumbs { grid-area: thumbs; position: static; display: flex; gap: 8px; padding: 3px 3px 5px; overflow-x: auto; background: none; scrollbar-width: thin; scrollbar-color: rgba(18, 61, 64, .25) transparent; }
.listing-dialog-photos .listing-gallery-thumb { flex: 0 0 76px; width: 76px; height: 52px; border: 1px solid var(--pv-line); border-radius: 8px; background: #ece6da; box-shadow: 0 1px 4px rgba(18, 61, 64, .08); }
.listing-dialog-photos .listing-gallery-thumb img { border-radius: 7px; }
.listing-dialog-photos .listing-gallery-thumb[aria-pressed='true'] { border-color: var(--pv-gold); box-shadow: 0 0 0 1px var(--pv-gold); }
.listing-dialog-photos .listing-gallery-thumb:focus-visible { outline: 2px solid var(--pv-teal); outline-offset: 2px; }
.listing-dialog-photos .listing-gallery-status { position: absolute; left: 50%; bottom: 96px; z-index: 3; max-width: calc(100% - 32px); margin: 0; padding: 6px 14px; border: 1px solid var(--pv-line); border-radius: 999px; background: #fff; color: var(--pv-teal); transform: translateX(-50%); box-shadow: var(--pv-shadow); }
.listing-dialog-photos .listing-gallery-status:empty, .listing-dialog-photos .listing-gallery-status.is-hint { display: none; }
.listing-dialog-photos .listing-gallery-retry { position: absolute; left: 50%; bottom: 136px; z-index: 3; transform: translateX(-50%); }
.listing-dialog-photos .listing-gallery-stage > .listing-detail-photo.listing-photo--empty { background: #efe9dd; border-radius: 14px; }
/* Phones: the photo takes the width, the thumbnails sit under it and the count and Zoom under them. */
@media (max-width: 600px) {
  .listing-dialog-photos .listing-photo-toolbar { gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 60px 8px 14px; }
  .listing-dialog-photos .listing-photo-title { padding-left: 9px; }
  .listing-dialog-photos .listing-photo-toolbar .listing-photo-address { font-size: 15px; }
  .listing-dialog-photos .listing-photo-toolbar .listing-photo-location { font-size: 9.5px; letter-spacing: .1em; }
  .listing-dialog-photos .listing-photo-toolbar .listing-save { width: 36px; height: 36px; }
  .listing-dialog-photos .listing-photo-details { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .listing-dialog-photos > .listing-close { top: calc(10px + env(safe-area-inset-top)); right: 14px; width: 36px; height: 36px; font-size: 24px; }
  .listing-dialog-photos .listing-gallery { grid-template: "frame" minmax(0, 1fr) "thumbs" auto "controls" auto / minmax(0, 1fr); gap: 10px; padding: 2px 10px calc(10px + env(safe-area-inset-bottom)); }
  .listing-dialog-photos .listing-gallery-controls { justify-content: center; }
  .listing-dialog-photos .listing-detail-photo img { border-radius: 10px; }
  .listing-dialog-photos .listing-gallery-arrow { width: 38px; height: 38px; font-size: 26px; }
  .listing-dialog-photos .listing-gallery-previous { left: 6px; }
  .listing-dialog-photos .listing-gallery-next { right: 6px; }
  .listing-dialog-photos .listing-gallery-thumb { flex-basis: 58px; width: 58px; height: 42px; }
  .listing-dialog-photos .listing-gallery-status { bottom: 112px; }
}
/* Narrow phones: the full address on its own line, the buttons under it. */
@media (max-width: 430px) {
  .listing-dialog-photos .listing-photo-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .listing-dialog-photos .listing-photo-title { flex: 1 1 100%; }
  .listing-dialog-photos .listing-photo-toolbar .listing-photo-address { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .listing-dialog-photos .listing-photo-toolbar .listing-save { margin-left: auto; }
}
[dir="rtl"] .listing-dialog-photos .listing-photo-toolbar .listing-save { margin-left: 0; }
@media (max-width: 430px) { [dir="rtl"] .listing-dialog-photos .listing-photo-toolbar .listing-save { margin-right: auto; } }
/* Short screens (a phone on its side): a slimmer header and strip. */
@media (max-height: 500px) {
  .listing-dialog-photos .listing-photo-toolbar { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .listing-dialog-photos > .listing-close { top: calc(6px + env(safe-area-inset-top)); }
  .listing-dialog-photos .listing-gallery { grid-template: "frame frame" minmax(0, 1fr) "controls thumbs" auto / auto minmax(0, 1fr); gap: 6px 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .listing-dialog-photos .listing-gallery-thumb { flex-basis: 48px; width: 48px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .listing-dialog-photos .listing-detail-photo img { transition: none; } }
[dir="rtl"] .listing-dialog-photos .listing-photo-toolbar { padding: 14px 28px 10px 84px; }
[dir="rtl"] .listing-dialog-photos .listing-photo-title { padding-left: 0; border-left: 0; padding-right: 12px; border-right: 2px solid var(--pv-gold); }
[dir="rtl"] .listing-dialog-photos > .listing-close { left: 28px; right: auto; }
@media (max-width: 600px) {
  [dir="rtl"] .listing-dialog-photos .listing-photo-toolbar { padding: calc(10px + env(safe-area-inset-top)) 14px 8px 60px; }
  [dir="rtl"] .listing-dialog-photos > .listing-close { left: 14px; }
}