/* Normal public page background (Search results, Site Map, listing Detail). It reads --pw-page-bg — a theme-aware, very light surface the page.tsx root derives from the site's Color 1 (a low 5% tint mixed toward the standard light surface), so it is far lighter than the app's neutral --color-bg while still picking up a hint of the palette. The CSS fallback mixes the app's --color-primary the same way, so the surface stays light-and-tinted (never the darker --color-bg) even if the inline var is ever absent. Cards/footer/hero/header keep their own surfaces — only this page canvas lightens. Text stays --color-text (near-black) on this near-white surface, so contrast remains WCAG-safe across all themes. */ .pw-portal { --pw-portal-max: 1200px; background: var(--pw-page-bg, color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))); color: var(--color-text); } .pw-portal-inner { max-width: var(--pw-portal-max); margin: 0 auto; padding: var(--space-6) var(--space-5); } .pw-portal-head { padding-top: calc(var(--pw-header-h) + var(--space-6)); } /* Site Map — a simple, accessible index of the site's public destinations. Single-column headed lists that flow into a responsive multi-column grid on wider viewports. Uses only the shared design tokens (no palette hex). */ /* The Site Map is rendered inside the shared pw-cms-page layout wrapper (see page.tsx sitemap branch) which supplies max-width, padding, and sidebar column. Do not add another max-width / centered margin / extra padding here — that produced the "indented" look Michael flagged where the sitemap content sat noticeably inside its article container while every other page (CMS pages, blog index, posts) stayed flush-left. Left as an empty rule for now so downstream selectors below still inherit color from the article. */ .pw-sitemap { max-width: none; margin: 0; padding: 0; } .pw-sitemap-title { font-size: var(--text-2xl, 1.5rem); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-2); line-height: 1.2; } .pw-sitemap-lead { color: var(--color-text-muted); margin: 0 0 var(--space-6); font-size: var(--text-sm); } .pw-sitemap-nav { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } /* Section headings (Navigation / Site Pages / Blog Posts) render as prominent dark, medium-weight labels — not the small-caps muted style the sub-groups used to inherit. They should read as the primary structural landmarks of the page. */ .pw-sitemap-heading { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-3); text-transform: none; letter-spacing: normal; } .pw-sitemap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .pw-sitemap-link { color: var(--pw-bar-color, var(--color-primary)); text-decoration: underline; font-size: var(--text-sm); border-radius: var(--radius-sm); } .pw-sitemap-link:hover { text-decoration: underline; filter: brightness(0.9); } .pw-sitemap-link:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Navigation-section dropdown grouping: a non-link parent label followed by its visible children in a nested list. The parent label uses a small-caps muted style so it reads as a sub-section within Navigation, not competing with the Navigation section heading above it. Indented to match the sibling links. The nested list is indented one step deeper; no border on the left — the heading style alone is enough of a hierarchy cue. */ .pw-sitemap-group-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0; padding-left: var(--space-4); } .pw-sitemap-sublist { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } /* Page H1 — the single semantic heading for the search-results page. Sits directly above the controls so it reads as the page title, not an SEO-only element. */ .pw-srp-title { font-size: var(--text-2xl, 1.5rem); font-weight: 800; color: var(--color-text); margin: 0 0 var(--space-4); line-height: 1.2; } /* Search controls bar */ .pw-srp-controls { display: flex; flex-wrap: nowrap; gap: var(--space-3); align-items: flex-end; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); } /* Toolbar icon buttons (Search always visible; Filters only in compact mode) — fixed 44px touch targets, centered glyph, no text width. Search fills Theme Color 1 (accent) and Filters Theme Color 2 (filtersColor), both applied inline. Their show/hide across the wide↔compact modes is driven by the container query on .pw-search-subheader-inner below. The compound selector .pw-srp-btn.pw-srp-save-search-btn raises specificity above the base .pw-srp-btn rule below so the icon actually fits the 44px square (a 20px SVG inside a 20px-padded button becomes 4px wide and clips its glyph — that was the invisible-heart bug on the Save Search button, 2026-08-07). */ .pw-srp-btn.pw-srp-search-btn, .pw-srp-btn.pw-srp-filters-btn, .pw-srp-btn.pw-srp-save-search-btn { flex: 0 0 auto; width: 44px; min-width: 44px; padding: 0; align-items: center; justify-content: center; } .pw-srp-btn.pw-srp-search-btn { display: inline-flex; } /* Save Search sits immediately RIGHT of the Filters button and is visible at every viewport (wide + compact), so no container-query toggle is needed. The click handler routes logged-out visitors through the auth modal (see useSaveSearch) and logged-in visitors through the name-prompt modal. */ .pw-srp-btn.pw-srp-save-search-btn { display: inline-flex; } .pw-msrp-btn-icon { flex: 0 0 auto; } .pw-srp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pw-srp-field label, .pw-srp-for-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .pw-srp-field input, .pw-srp-field .pw-select-btn { min-height: 44px; box-sizing: border-box; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); } /* Accessible focus ring for public text inputs/textareas — the site theme's Color 1, supplied as --pw-focus-ring on the .pw-page root (see page.tsx), with the app's brand primary as the fallback when no theme color is set. */ .pw-srp-field input:focus-visible, .pw-srp-field textarea:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Location flex-grows to consume ALL free width remaining on the controls row (it is the only growable field; every other field/button keeps intrinsic width), so there is never unexplained empty space — only the normal --space-3 control gap separates it from the Type field beside it. It has NO max-width and min-width:0 so it can shrink/truncate its placeholder at narrower widths instead of forcing the row to wrap. */ .pw-srp-field--loc { flex: 1 1 auto; min-width: 0; position: relative; } .pw-srp-btn { min-height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-sm); color: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 150ms ease; } .pw-srp-btn:hover { opacity: 0.9; } .pw-srp-btn--ghost { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } /* Hollow variant used by the Filters button (2026-08-07): a transparent background with a 2px stroke and glyph in the theme Filters color. The stroke color is delivered via inline style as color: (see SearchShell), which this rule picks up through currentColor for both the 1px border and the SVG stroke. Rationale: the toolbar had two solid pills (Search + Filters) side by side; the second solid pill added visual weight without adding meaning — hollow reads clearly as secondary control and lets the primary Search button carry the emphasis. */ .pw-srp-btn--hollow { background: transparent !important; border: 2px solid currentColor; } .pw-srp-btn--hollow:hover { opacity: 0.75; } .pw-srp-btn--hollow svg { stroke: currentColor; } /* Applied-filter emphasis for fields inside the Filters drawer (2026-08-21). When a drawer field's value differs from its default, its input / select trigger fills with theme Color 3 (--pw-applied-bg) and its value renders bold in theme Color 2 (--pw-applied-fg) so the visitor sees at a glance which fields are actively narrowing the result set. The two CSS custom properties are threaded down from the shell inline on the drawer root (SearchShell.tsx) so they follow the same palette-editor live-preview pipeline as filtersColor / successColor. Fallbacks preserve the current look when a theme leaves either color unset. */ .pw-srp-field--applied input, .pw-srp-field--applied textarea, .pw-srp-field--applied .pw-select-btn { background: var(--pw-applied-bg, var(--color-surface-alt, var(--color-surface))) !important; color: var(--pw-applied-fg, var(--color-text)) !important; font-weight: 700; border-color: var(--pw-applied-bg, var(--color-border)); } .pw-srp-field--applied input::placeholder { color: var(--pw-applied-fg, var(--color-text-muted)); opacity: 0.85; font-weight: 700; } /* Applied-count badge on the Filters button. Renders top-right of the hollow Filters pill (see pw-srp-filters-btn) as a small solid circle in theme Color 3 with the numeric count in theme Color 2 — mirroring the Bluefield Cloud Transactions-page filter badge treatment so visitors get the same "filters active" cue across surfaces. Absolutely positioned inside a relatively-positioned button; pointer-events:none so it never swallows the click. */ .pw-srp-filters-btn { position: relative; } .pw-srp-filters-btn__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pw-applied-bg, var(--color-primary)); color: var(--pw-applied-fg, #fff); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--color-surface, #fff); } /* Autocomplete combobox */ .pw-ac-wrap { position: relative; } /* Multi-pill chip row (revised 2026-08-08 pt.2). Michael's spec: - Single flat field (no "field within a field"): the outer .pw-ac-wrap already owns the border/background from the SRP toolbar, so this row is intentionally frameless — no border, no background, no focus outline of its own. - Leading magnifying-glass icon, then chips, then live draft input, all on ONE line. - Field size never grows: nowrap + overflow-x:auto so adding pills scrolls the content horizontally instead of wrapping to a new row. - The stays borderless / transparent and flex-grows to fill the remaining space so an empty field still shows the full "Search ..." placeholder from a normal input caret position. */ .pw-ac-wrap--chips { display: block; } /* The chip row IS the field — it adopts the same border/height/padding as .pw-srp-field input so it looks like a single native input, not a nested pair of boxes. It never grows: content scrolls horizontally when pills overflow. */ .pw-ac-chiprow { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); /* Match .pw-srp-field input min-height so this field sits at the same visual height as every other SRP toolbar field (Type, Min/Max Price, etc.). Any change here should mirror the SRP field height at line 1043. */ min-height: 44px; height: 44px; box-sizing: border-box; padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); cursor: text; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; width: 100%; } .pw-ac-chiprow:focus-within { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Suppress the focus-within outline on the homepage hero chip row: the hero search bar is a marketing surface, not a form field, and the blue ring around the input (which was applied by :focus-within on the chip row that wraps the input) reads as an error / unfinished state. On the Search page we keep the ring so keyboard users see focus. */ .pw-hero-search .pw-ac-chiprow:focus-within { outline: none; } :root[data-pw-input-modality="keyboard"] .pw-hero-search .pw-ac-chiprow:focus-within { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-ac-chiprow::-webkit-scrollbar { height: 6px; } .pw-ac-chiprow::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; } .pw-ac-chiprow-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); flex-shrink: 0; padding-left: 2px; padding-right: 2px; } .pw-ac-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; /* Theme palette wiring: Color 3 background + Color 2 text. The parent

declares --pw-chip-bg and --pw-chip-fg from SearchShell props; the fallbacks here keep the chip legible if the vars are ever unset. */ background: var(--pw-chip-bg, var(--color-surface-offset)); color: var(--pw-chip-fg, var(--color-text)); border: 1px solid var(--pw-chip-bg, var(--color-border)); border-radius: 999px; font-size: var(--text-xs); font-weight: 500; line-height: 1.4; flex-shrink: 0; white-space: nowrap; min-height: 22px; } .pw-ac-chip-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; color: inherit; } .pw-ac-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; background: transparent; color: inherit; opacity: 0.75; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; border-radius: 999px; flex-shrink: 0; } .pw-ac-chip-x:hover { opacity: 1; background: rgba(255,255,255,0.18); } /* Chip-row input. IMPORTANT: the generic .pw-srp-field input rule (min-height 44px + border + background) would otherwise apply here — that creates a nested oval inside the chiprow oval. Force-override with higher-specificity selectors plus !important so the input reads as a frameless caret inside the shared chiprow. The input shrinks to a narrow caret zone so pills to its right remain fully visible; horizontal scroll of the chiprow handles the case where many pills add up beyond the field width. */ .pw-srp-field .pw-ac-wrap--chips .pw-ac-chip-input, .pw-ac-wrap--chips .pw-ac-chip-input, .pw-ac-chip-input { /* Intrinsic-content sizing (Chromium 123+ / Safari 17+): the input starts just wide enough for the current value or its placeholder, then grows naturally as the visitor types. This keeps the Search... placeholder tight against the pills instead of leaving a fixed-width gap. The size HTML attribute gives a modest fallback for older engines. */ field-sizing: content; flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; min-height: 0 !important; height: auto !important; border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: var(--text-sm); padding: 0 !important; color: var(--color-text); } .pw-srp-field .pw-ac-wrap--chips .pw-ac-chip-input:focus, .pw-srp-field .pw-ac-wrap--chips .pw-ac-chip-input:focus-visible { outline: none !important; box-shadow: none !important; } .pw-ac-chip-input:disabled { cursor: not-allowed; opacity: 0.6; } .pw-ac-opt--dim { opacity: 0.5; } .pw-ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; margin: 0; padding: 4px 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 320px; overflow-y: auto; /* Reset the text color so an ancestor's inherited color (e.g. the hero section forces color:#fff over its dark image) does NOT bleed into the dropdown — which would render the option rows as white text on the popup's white surface, i.e. invisible. */ color: var(--color-text); } .pw-ac-opt { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--color-text); } .pw-ac-opt[aria-selected="true"], .pw-ac-opt:hover { background: var(--color-surface-offset); } .pw-ac-opt-sub { color: var(--color-text-faint); font-size: var(--text-xs); } /* Category subheader inside the location autocomplete popup (2026-08-07): groups results by City / County / Neighborhood so "Greenville" surfaces BOTH Greenville, SC (city) AND Greenville County, SC (county) under clearly labeled sections. Muted uppercase caption, non-interactive. */ .pw-ac-group { padding: var(--space-2) var(--space-3); pointer-events: none; user-select: none; } /* Category label rendered as a pill — Color 1 background, white text. Sits inside .pw-ac-group so the surrounding padding gives the pill breathing room from the edge of the popup. */ .pw-ac-group-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Thin ruled divider between category sections (never before the first). Purely decorative — aria-hidden, non-interactive, no keyboard stop. */ .pw-ac-divider { height: 1px; margin: var(--space-1) var(--space-3); background: var(--color-border); padding: 0; pointer-events: none; user-select: none; } /* Inert loading/error message shown inside the popup — never selectable, and deliberately isolated from the listing results (a flaky suggestion proxy must not make the grid look broken). */ .pw-ac-msg { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-faint); cursor: default; } /* Custom select (PortalSelect) — the theme-styled, cross-browser replacement for native and the autocomplete chip row wrapper. */ .pw-page[data-button-style="rectangles"] .pw-entry-group--no-for .pw-srp-field--loc input, .pw-page[data-button-style="rectangles"] .pw-entry-group--no-for .pw-srp-field--loc .pw-ac-chiprow { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; } /* Pills mode: the For + Location controls detach into two separate pills (each with a fully-rounded outline) instead of the joined “one widget” look Rectangles mode uses. Re-add a small gap between them, restore the For dropdown’s right corners, restore the Location input’s left corners + left border, and match the button broad-rule pill radius on the Location input so both fields read as first-class pills. Keyed on the .pw-page[data-button-style="pills"] wrapper that the Button Style toggle stamps (see publicChromeStyles.ts). */ .pw-page[data-button-style="pills"] .pw-entry-group { gap: var(--space-2); } .pw-page[data-button-style="pills"] .pw-entry-group .pw-entry-for .pw-select-btn { border-top-right-radius: var(--radius-full, 9999px) !important; border-bottom-right-radius: var(--radius-full, 9999px) !important; } .pw-page[data-button-style="pills"] .pw-entry-group .pw-srp-field--loc input { border-top-left-radius: var(--radius-full, 9999px) !important; border-bottom-left-radius: var(--radius-full, 9999px) !important; border-top-right-radius: var(--radius-full, 9999px) !important; border-bottom-right-radius: var(--radius-full, 9999px) !important; border-left: 1px solid var(--color-border); padding-left: var(--space-4); } .pw-page[data-button-style="pills"] .pw-entry-group .pw-srp-field--loc .pw-ac-chiprow { border-top-left-radius: var(--radius-full, 9999px) !important; border-bottom-left-radius: var(--radius-full, 9999px) !important; border-top-right-radius: var(--radius-full, 9999px) !important; border-bottom-right-radius: var(--radius-full, 9999px) !important; border-left: 1px solid var(--color-border); padding-left: var(--space-4); } /* The submit button holds BOTH a text label and a magnifying-glass icon; only one shows at a time. Desktop shows the word (icon hidden here); the mobile query below flips to icon-only. The button keeps its accessible name via aria-label. */ .pw-entry-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .pw-entry-btn .pw-entry-btn-icon { display: none; } /* Homepage Location field AND the For Sale/For Rent dropdown trigger: suppress the pointer/tap focus highlight (the tap flash and the ring shown on click/tap — note text inputs match :focus-visible even for pointer, and a tapped button retains a sticky :focus ring on mobile), and show the accessible ring ONLY for a genuine keyboard Tab. The modality is recorded on by HeroSearchBar. This is scoped to .pw-hero-search, so the Search-page fields are unaffected. */ .pw-hero-search .pw-srp-field--loc input, .pw-hero-search .pw-entry-for .pw-select-btn { -webkit-tap-highlight-color: transparent; } .pw-hero-search .pw-srp-field--loc input:focus, .pw-hero-search .pw-srp-field--loc input:focus-visible, .pw-hero-search .pw-entry-for .pw-select-btn:focus, .pw-hero-search .pw-entry-for .pw-select-btn:focus-visible { outline: none; box-shadow: none; } :root[data-pw-input-modality="keyboard"] .pw-hero-search .pw-srp-field--loc input:focus-visible, :root[data-pw-input-modality="keyboard"] .pw-hero-search .pw-entry-for .pw-select-btn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Detail page */ /* Gallery: mobile shows only the hero tile (secondary tiles hidden below); the desktop composition is a large hero LEFT + up to three secondary tiles RIGHT (realtor.com intent), enabled from 700px up. Rounded outer corners; every tile is object-fit cover so photos never distort. */ /* The gap between photos reveals THIS element's background, which must match the surface the gallery sits on so the seams are invisible (not the old gray --color-surface-offset). On the standalone page that surface is the page canvas (--pw-page-bg); inside the drawer it is --color-surface (overridden below). Tiles keep --color-surface-offset only as an image-load placeholder. */ .pw-pgal { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--pw-page-bg, var(--color-surface)); } .pw-pgal--empty { aspect-ratio: 16 / 9; max-height: 560px; } /* The tile paints the SAME surface as the container, not the gray offset: at fractional 1fr / grid-auto-rows track heights the browser rounds each cell and a thin sliver of the tile box shows flush against the 8px gap, so a gray tile background bleeds a visible gray line right at the seam even though the gap itself is surface. Matching the tile to the container surface keeps that sliver invisible. A genuinely dead image still gets a neutral gray placeholder via .pw-pgal-imgfail below, so the image-load fallback is preserved. */ .pw-pgal-tile { position: relative; margin: 0; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--pw-page-bg, var(--color-surface)); aspect-ratio: 16 / 9; } .pw-pgal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Property scope: no visible focus highlight (per presentation spec). Keyboard focus/activation is preserved; only the visible ring/shadow is removed and the UA default ring is explicitly suppressed so nothing leaks. */ .pw-pgal-tile:focus, .pw-pgal-tile:focus-visible { outline: none; box-shadow: none; } .pw-pgal-imgfail { display: block; width: 100%; height: 100%; background: var(--color-surface-offset); } .pw-pgal-badge { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-text) 72%, transparent); color: var(--color-surface); font-size: var(--text-xs); font-weight: 700; } /* Virtual Tour pill on the gallery hero. Clickable — opens the tour directly inside the full-page photo viewer. Hover flips to Color 3 background (successColor / --pw-cms-color-3) with Color 2 text (unseenMarkerColor / --pw-cms-color-2) so the interactive state uses the tenant's accent pair rather than a filter darken. */ .pw-pgal-vtbadge { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 88%, transparent); color: #fff; font-size: var(--text-xs); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.24); border: 0; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .pw-pgal-vtbadge:hover, .pw-pgal-vtbadge:focus-visible { background: var(--pw-cms-color-3, var(--color-primary)); color: var(--pw-cms-color-2, #fff); outline: none; } .pw-pgal-vtbadge svg { flex: 0 0 auto; } /* Pending pill on the hero photo (Michael 2026-08-22). Overrides the base .pw-badge positioning to sit at the top-left of the .pw-pgal grid so it overlays the hero tile whichever composition variant (n1..n4) is active. Sibling of the tile buttons — same trick as .pw-pgal-vtbadge, only anchored to the opposite corner. Grid parent is position: relative already. */ .pw-pgal-pending { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; pointer-events: none; } /* The badge comes in two variants that share the same styling but appear at different breakpoints: --desktop rides the last visible secondary tile (≥4 photos, ≥700px), --mobile rides the hero tile for viewports below 700px where the secondary tiles are hidden. Below 700px only the mobile badge is visible; at 700px+ only the desktop badge is visible. */ .pw-pgal-badge--desktop { display: none; } /* Hide secondary tiles on mobile — the hero alone fills the width. */ .pw-pgal .pw-pgal-tile:not(.pw-pgal-tile--hero) { display: none; } @media (min-width: 700px) { .pw-pgal { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; max-height: 520px; } .pw-pgal-tile { aspect-ratio: auto; } .pw-pgal .pw-pgal-tile:not(.pw-pgal-tile--hero) { display: block; } .pw-pgal-badge--desktop { display: inline-flex; } .pw-pgal-badge--mobile { display: none; } /* Hero spans all rows in the left column; secondary tiles stack in the right. */ .pw-pgal--n2 { grid-template-rows: 1fr; } .pw-pgal--n2 .pw-pgal-tile--hero { grid-row: 1; } .pw-pgal--n3 { grid-template-rows: 1fr 1fr; } .pw-pgal--n3 .pw-pgal-tile--hero { grid-row: 1 / span 2; } .pw-pgal--n4 { grid-template-rows: 1fr 1fr 1fr; } .pw-pgal--n4 .pw-pgal-tile--hero { grid-row: 1 / span 3; } /* A lone photo simply fills the row. */ .pw-pgal--n1 { grid-template-columns: 1fr; } } /* Single column on mobile. minmax(0, 1fr) (not a bare 1fr, which resolves to minmax(auto, 1fr)) so a wide grid child — the Location map, a facts ribbon, a long unbreakable token — can never blow the track past the viewport and cause page-level horizontal scrolling. The ≥900px rule already uses minmax(0, 1fr) for the same reason; this keeps mobile consistent. */ .pw-detail-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-5); } .pw-detail-price { font-size: var(--text-xl); font-weight: 800; } .pw-detail-addr { font-size: var(--text-base); color: var(--color-text-muted); margin-top: 4px; } /* Facts ribbon: NO top divider (the address/overview → facts rule was removed on purpose); the items live in a rounded card filled with the theme's Color 4 (inline --pw-for-bg from the palette; --color-surface-offset fallback so it is never unstyled and never a hardcoded palette). box-sizing + max-width keep the card inside its column (no global border-box reset exists). Labels are the theme's near-black text (not muted) for a strong, accessible contrast on the light Color-4 tint. */ .pw-detail-facts { /* Single source of truth for the card's horizontal geometry: the card's left/right OUTER padding AND the gutter on each side of every inter-item divider both resolve to this token, so the divider whitespace is EXACTLY the outer padding — not an approximate hardcoded near-match. */ --pw-facts-gutter: var(--space-4); display: flex; flex-wrap: nowrap; align-items: stretch; margin: var(--space-5) 0 0; padding: var(--space-4) var(--pw-facts-gutter); box-sizing: border-box; max-width: 100%; background: var(--pw-for-bg, var(--color-surface-offset)); border-radius: var(--radius-lg); } /* Each fact is an equal-width, shrinkable column (flex: 1 1 0 + min-width: 0) so the row NEVER wraps and NEVER overflows a narrow mobile viewport — it just divides the card evenly. Every item carries the shared gutter on both sides, so a divider (the left border of each item after the first) sits between two equal --pw-facts-gutter gutters. The first item's leading gutter and the last item's trailing gutter are dropped so their outer edge uses ONLY the card's outer padding (the same token) — no doubled inset, no leading/trailing divider. */ .pw-detail-fact { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 var(--pw-facts-gutter); text-align: center; } .pw-detail-fact:first-child { padding-left: 0; } .pw-detail-fact:last-child { padding-right: 0; } .pw-detail-fact + .pw-detail-fact { border-left: 1px solid var(--color-border); } .pw-detail-fact svg { flex: 0 0 auto; color: var(--color-text); } /* Market-data card variant: same layout tokens as the property-detail facts ribbon, plus a subtle drop shadow so it matches Content-section cards, and a 2×2 mobile reflow with both horizontal + vertical dividers. Desktop inherits the 4-equal-columns + vertical dividers from .pw-detail-fact above; mobile switches to CSS Grid (2 columns × 2 rows) and rebuilds the dividers with :nth-child rules because border-left-only doesn't produce a horizontal rule between rows. */ .pw-listings-market { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); } .pw-detail-fact b { display: block; font-size: var(--text-lg); color: var(--color-text); } /* LABEL typography is scoped to the DIRECT-CHILD label span only (> span). The value can itself contain nested variant spans (.pw-fact-mobile/.pw-fact-desktop for the compact vs full SQFT value) inside the ; a descendant selector here would wrongly shrink those to the small label size (--text-xs), making the compact mobile SQFT value (e.g. "10.8k") look smaller than Beds/Baths/Acres. Direct-child scoping keeps every value — plain or variant-span — at the value typography (--text-lg), while the label span (and its own Year variant spans) keeps the small uppercase label style. */ .pw-detail-fact > span { font-size: var(--text-xs); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; } /* Responsive fact variants (Year label + long SQFT value). Both variants are ALWAYS in the server-rendered DOM; CSS alone picks which shows, so there is no JS viewport detection and no hydration mismatch. display:none also removes the inactive variant from the accessibility tree, so a screen reader reads exactly ONE coherent label/value per breakpoint (never both). Desktop-first: the full label ("Year Built") + full value show by default; the swap to the short label ("Year") + compact value happens in the shared portal mobile media query (max-width:600px) further below. */ .pw-fact-mobile { display: none; } .pw-fact-desktop { display: inline; } /* Every content section carries a top divider so the page reads as an evenly ruled stack (Open Houses → About → Location → Key Facts → Features → Mortgage → Sale History → Similar). The facts ribbon above provides its own top rule, so the first section's divider doubles as the ribbon's bottom rule — one line, no doubling. Sections that self-hide when empty simply omit their divider. */ .pw-detail-section { margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .pw-detail-section h2 { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-3); } /* ── Listing-detail in-page tab ribbon ───────────────────────────────────────── A sticky, horizontally-scrollable set of anchor tabs rendered between the photo gallery and the content columns. --pw-tabs-h is the ribbon's reserved height, reused both for the section scroll-margins (so an anchored section lands just below the ribbon, never under it) and to offset the sticky contact aside. On the standalone page the ribbon sticks below the fixed site header (top:--pw-header-h); inside the drawer the scroll container is the offset parent so it sticks at top:0, directly below the non-scrolling Back/Share/Save toolbar. */ /* The listing-detail surface is white end-to-end (standalone page AND Search drawer). The content column paints white so the two-column area and every section surface read white; on the standalone page the .pw-portal canvas is whitened too (compound .pw-portal.pw-pd-page, higher specificity than the tinted .pw-portal base) so no tinted strip shows beside the centered content. Search/map and other portal pages keep their tinted canvas untouched. The Color-4 facts card keeps its own --pw-for-bg fill. */ .pw-pd-content { --pw-tabs-h: 52px; background: #fff; } .pw-portal.pw-pd-page { background: #fff; } /* CMS pages and posts render on a white canvas end-to-end, matching the listing-detail surface. Without this override the .pw-portal base tint shows through around the .article wrapper, which reads as a floating card on a gray background — not the look operator sites like bluefieldgroup.com use. Higher specificity than the tinted .pw-portal base; scoped to .pw-cms-page so search/map/etc keep their tinted canvas. */ .pw-portal.pw-cms-page { background: #fff; } /* The standalone property page wraps the detail content in .pw-portal-head, which already reserves the fixed site-header height PLUS one --space-6 of breathing room above the content. The shared .pw-portal-inner then adds ANOTHER --space-6 of top padding, doubling the empty band above the page toolbar (address/Share/ Save). Drop the inner TOP padding on the page so the toolbar sits a single --space-6 below the header — compact and vertically balanced immediately above the gallery. Scoped to .pw-pd-page: the drawer has no .pw-portal-head and already zeroes its inner top padding (.pw-pd-scroll .pw-pd-content), and Search/Site Map keep their own spacing. Side/bottom padding and sticky-ribbon offsets are intact. */ .pw-pd-page .pw-pd-content { padding-top: 0; } .pw-pd-tabs { position: sticky; top: var(--pw-header-h); z-index: 15; margin: var(--space-4) 0 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .pw-pd-scroll .pw-pd-tabs { top: 0; } .pw-pd-tablist { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pw-pd-tablist::-webkit-scrollbar { display: none; } .pw-pd-tab { display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--pw-tabs-h); padding: 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; } .pw-pd-tab:hover { color: var(--color-text); } .pw-pd-tab.is-active { color: var(--color-text); border-bottom-color: var(--pw-focus-ring, var(--color-primary)); } .pw-pd-tab:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: -2px; } /* Reserve the sticky ribbon (+ site header on the standalone page) so anchored sections and the empty overview anchor land just below the ribbon. Inside the drawer only the ribbon needs reserving — the header is not present there. */ .pw-pd-content [id^="pd-"] { scroll-margin-top: calc(var(--pw-header-h) + var(--pw-tabs-h) + var(--space-3)); } .pw-pd-scroll .pw-pd-content [id^="pd-"] { scroll-margin-top: calc(var(--pw-tabs-h) + var(--space-3)); } .pw-pd-anchor { height: 0; } .pw-detail-desc { line-height: 1.7; white-space: pre-line; color: var(--color-text); } .pw-detail-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); } .pw-detail-facts-grid div { font-size: var(--text-sm); } .pw-detail-facts-grid b { color: var(--color-text-muted); font-weight: 600; } .pw-detail-contact { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); } .pw-detail-contact h2 { margin-top: 0; } .pw-detail-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm); color: #fff; font-weight: 600; text-decoration: none; margin-top: var(--space-2); } .pw-detail-cta:hover { opacity: 0.9; } .pw-attribution { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .pw-detail-openhouse { display: flex; flex-wrap: wrap; gap: var(--space-3); } .pw-detail-oh { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } /* ── Listing-detail Location map ─────────────────────────────────────────────── The single-property map on the detail page. Reuses the shared Google Maps loader + the Search map's bottom-left style toggle (.pw-map-bottomleft etc.); only the container needs its own sizing + positioning context so the toggle can overlay it. */ /* box-sizing:border-box keeps the 1px border inside the 100% width (this project has no global border-box reset), and max-width:100% guarantees the wrapper can never exceed its column — together they stop the map from pushing the mobile viewport wider and causing horizontal scroll. overflow:hidden already clips Google's internal canvas/controls to these bounds. */ .pw-detail-map-wrap { box-sizing: border-box; position: relative; width: 100%; max-width: 100%; height: 360px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-offset); } /* Own stacking context (position + z-index) so Google's Street View panorama — whose internal controls use very high z-indexes — stays contained BELOW the sibling Map/Street View toggle (.pw-map-bottomleft, z-index 4); without this the panorama would paint over the toggle and trap the visitor in Street View. */ .pw-detail-map { width: 100%; height: 100%; position: relative; z-index: 0; } /* Street View status: a small, accessible, non-destructive banner shown while the nearest-panorama lookup runs and when no panorama is available for this location (so the visitor is never dropped onto a black canvas without explanation). Sits top-center above the panorama/toggle, styled with tenant surface tokens. */ .pw-map-sv-note { position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 5; max-width: calc(100% - var(--space-6)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); color: var(--color-text); font-size: var(--text-sm); text-align: center; pointer-events: none; } /* Street-View-only custom compass (Google's native pan/compass control is disabled on the detail panorama). Bluefield-styled to match the custom zoom cluster (surface/border/radius/shadow, currentColor icon); sits top-right, clear of the bottom corners' zoom + Map/Street-View toggle. */ .pw-map-compass { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .pw-map-compass svg { flex: none; } .pw-map-compass:hover { background: var(--color-surface-offset); } .pw-map-compass:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* ── Listing-detail Mortgage calculator ──────────────────────────────────────── A compact estimator: three inputs on a responsive grid, then the estimated monthly payment (accent-colored inline by the component) with a small down-payment / loan-amount breakdown and an "estimate only" note. */ .pw-mortgage { display: flex; flex-direction: column; gap: var(--space-4); } .pw-mortgage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); } .pw-mortgage-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); } .pw-mortgage-field > span:first-child { color: var(--color-text-muted); font-weight: 600; } .pw-mortgage-inputwrap { position: relative; display: flex; align-items: center; } .pw-mortgage-inputwrap input { width: 100%; min-height: 44px; padding: 0 var(--space-6) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; } .pw-mortgage-inputwrap input:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 1px; } .pw-mortgage-suffix { position: absolute; right: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); pointer-events: none; } /* Estimated Monthly Payment lives in a rounded card filled with the theme's Color 4 (inline --pw-for-bg from the palette; --color-surface-offset fallback so it is never unstyled and never a hardcoded palette), visually consistent with the Beds/Baths/SQFT facts card (.pw-detail-facts). box-sizing + max-width keep it inside its column on narrow mobile widths. */ .pw-mortgage-summary { padding: var(--space-4); box-sizing: border-box; max-width: 100%; background: var(--pw-for-bg, var(--color-surface-offset)); border-radius: var(--radius-lg); } .pw-mortgage-monthly b { display: block; font-size: var(--text-xl); font-weight: 800; color: var(--color-text); } .pw-mortgage-monthly span { font-size: var(--text-xs); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; } .pw-mortgage-note { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; } /* ── Listing-detail Similar Listings carousel ────────────────────────────────── A single-line horizontal carousel reusing ListingCard. The left/right controls sit on the same row as the "Similar Listings" title, right-aligned. The track is a non-wrapping flex row that scrolls horizontally (fixed-width items → no layout shift); its native scrollbar is hidden since the buttons drive it. */ .pw-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); } .pw-carousel-head h2 { margin: 0; } .pw-carousel-nav { display: flex; gap: var(--space-2); flex: 0 0 auto; } .pw-carousel-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--text-lg); line-height: 1; cursor: pointer; } .pw-carousel-btn:hover:not(:disabled) { background: var(--color-surface-2); } .pw-carousel-btn:disabled { opacity: 0.4; cursor: default; } .pw-carousel-btn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Block SVG so the chevron centers exactly (no inline-baseline gap) inside the flex-centered round button. */ .pw-carousel-btn svg { display: block; } .pw-carousel-track { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Cards lift (translateY -2px) and gain --shadow-md on hover. Because overflow-x is auto, the block axis (overflow-y) also computes to auto, so without interior room the lift + shadow get sheared off the top/bottom of the scroll box. Pad the block axis to give them room INSIDE the clip, then pull the box back with equal negative margins so the track's outer footprint, the card alignment, and — critically — the horizontal geometry are all unchanged (no page-level horizontal overflow). Net bottom gap stays var(--space-2), matching before. */ padding-top: var(--space-4); padding-bottom: var(--space-6); margin-top: calc(-1 * var(--space-4)); margin-bottom: calc(-1 * var(--space-4)); } .pw-carousel-track::-webkit-scrollbar { display: none; } /* display:flex makes the fixed-width item a container for its single card. The track already stretches its items to the tallest one's height (default align-items:stretch), so the card filling the item (height:100% below) gives every card in the row an equal outer height — no JS measuring. */ .pw-carousel-item { flex: 0 0 auto; width: 260px; max-width: 80%; scroll-snap-align: start; display: flex; } /* The card fills the stretched item; its flex-column body top-aligns price → metrics → address → brokerage and any height difference falls as equal empty space at the bottom, so card bottom edges line up even with 1- vs 2-line addresses or a missing brokerage. The fixed 4/3 media keeps the image region identical across cards. */ .pw-carousel-item > .pw-card { width: 100%; height: 100%; } /* Keep beds/baths/sqft on ONE line in the carousel. Compact SQFT (>=10k → "12.1k") keeps the run short; nowrap + a tighter gap + min-width:0 prevent a second metrics line at supported card widths without crushing the icons/text. Each fact already sets white-space:nowrap globally. */ .pw-carousel-item .pw-card-facts { flex-wrap: nowrap; gap: var(--space-2); min-width: 0; } /* ── Property inquiry widget (Contact Agent / Request Tour) ─────────────────── */ /* Desktop: a tabbed card living in the .pw-detail-contact aside. The tabs are a local (URL-independent) mode switch — an accessible tablist/tabpanel pair, NOT page/drawer navigation. The active tab carries an underline indicator built from a bottom border in the site's Color 1 (--pw-inq-accent, applied inline by the widget). Padding is trimmed to 0 because the card padding already gutters it. Hidden below the layout breakpoint, where the mobile footer bar takes over. */ .pw-inq-card { padding: 0; } /* Two tabs, each EXACTLY half the header width. No gap and no side padding on the row so the pair fills the header edge to edge; each tab is flex: 1 1 0 with min-width: 0 and border-box sizing so their padding/2px underline can never break the 50/50 split. The active underline (border-bottom on the selected tab) therefore spans a clean half-width. */ .pw-inq-tabs { display: flex; margin: var(--space-4) 0 0; border-bottom: 1px solid var(--color-border); } .pw-inq-tab { flex: 1 1 0; min-width: 0; box-sizing: border-box; text-align: center; appearance: none; background: none; border: 0; cursor: pointer; padding: var(--space-3) var(--space-2); margin-bottom: -1px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; /* Force straight underline corners — some UA/theme resets add a subtle button border-radius which makes the 2px active underline visibly curl at each end where it meets the tab edge. Zeroing radius on the button element itself keeps the tab underline dead-straight. */ border-radius: 0; transition: color 150ms ease, border-color 150ms ease; } .pw-inq-tab:hover { color: var(--color-text); } .pw-inq-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--pw-inq-accent, var(--color-primary)); } .pw-inq-tab:focus, .pw-inq-tab:focus-visible { outline: none; box-shadow: none; } .pw-inq-tabpanel { padding: var(--space-5); } /* Shared form controls, used identically by the desktop tabpanel and the mobile modal, so the two presentations never diverge. */ .pw-inq-form { display: flex; flex-direction: column; gap: var(--space-3); } .pw-inq-field { display: flex; flex-direction: column; gap: 4px; } .pw-inq-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); } .pw-inq-optional { font-weight: 400; color: var(--color-text-faint); } .pw-inq-input, .pw-inq-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); } .pw-inq-textarea { min-height: 88px; resize: vertical; line-height: 1.5; } .pw-inq-input:focus, .pw-inq-textarea:focus, .pw-inq-submit:focus, .pw-inq-input:focus-visible, .pw-inq-textarea:focus-visible, .pw-inq-submit:focus-visible { outline: none; box-shadow: none; } /* The Date/Time PortalSelect renders the shared .pw-select-btn; scope its focus ring off ONLY inside the inquiry form so Search's own .pw-select-btn ring (rule above) survives untouched. */ .pw-inq-form .pw-select-btn:focus, .pw-inq-form .pw-select-btn:focus-visible { outline: none; box-shadow: none; } .pw-inq-input[aria-invalid="true"] { border-color: #c0392b; } .pw-inq-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .pw-inq-submit { appearance: none; cursor: pointer; margin-top: 2px; min-height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-sm); background: var(--pw-inq-accent, var(--color-primary)); color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 700; transition: opacity 150ms ease; } .pw-inq-submit:hover { opacity: 0.92; } .pw-inq-submit:disabled { opacity: 0.6; cursor: default; } .pw-inq-error { margin: 0; font-size: var(--text-sm); color: #c0392b; } .pw-inq-success { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--pw-inq-success, var(--color-primary)); } .pw-inq-note { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--color-text-faint); } /* Mobile sticky footer bar: two equal buttons opening the inquiry modals. Fixed above the safe area so it never covers content; a normal-flow spacer of the same height is rendered alongside it so the last content clears the bar in both the standalone page and the property drawer. Hidden at desktop widths. */ .pw-inq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .pw-inq-bar-btn { flex: 1 1 0; appearance: none; cursor: pointer; min-height: 46px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--pw-inq-accent, var(--color-primary)); font: inherit; font-size: var(--text-sm); font-weight: 700; } .pw-inq-bar-btn--primary { background: var(--pw-inq-accent, var(--color-primary)); color: #fff; } .pw-inq-bar-btn--ghost { background: var(--color-surface); color: var(--pw-inq-accent, var(--color-primary)); } .pw-inq-bar-btn:focus, .pw-inq-bar-btn:focus-visible { outline: none; box-shadow: none; } .pw-inq-bar-spacer { display: none; } /* Modal head (mobile): title + close X, mirroring the auth modal layout. */ .pw-inq-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .pw-inq-modal-title { font-size: var(--text-lg); font-weight: 700; } .pw-inq-close { appearance: none; background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--color-text-muted); padding: 0 4px; } .pw-inq-close:hover { color: var(--color-text); } .pw-inq-close:focus, .pw-inq-close:focus-visible { outline: none; box-shadow: none; } @media (min-width: 900px) { .pw-detail-cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .pw-detail-contact { position: sticky; top: calc(var(--pw-header-h) + var(--pw-tabs-h) + var(--space-4)); } /* In the drawer the scroll container is the offset parent and there is no site header, so the aside clears only the sticky ribbon. */ .pw-pd-scroll .pw-detail-contact { top: calc(var(--pw-tabs-h) + var(--space-4)); } } @media (max-width: 600px) { .pw-portal-inner { padding: var(--space-4) var(--space-4); } .pw-srp-controls { padding: var(--space-3); } /* Facts ribbon: swap to the short Year label + compact SQFT value on mobile (see .pw-fact-mobile/.pw-fact-desktop above). */ .pw-fact-mobile { display: inline; } .pw-fact-desktop { display: none; } /* Market-data card: 2×2 grid on mobile. Reset the flex row set on the base .pw-detail-facts, wipe the flex divider (border-left on every .pw-detail- fact after the first) so nothing shows on the wrong edges, then paint the four cell borders explicitly: row 1 (children 1,2): bottom border creates the horizontal divider right cell (children 2,4): left border creates the vertical divider Padding is symmetric on every cell so the crosshair sits centered. */ .pw-listings-market { display: grid; grid-template-columns: 1fr 1fr; row-gap: 0; column-gap: 0; } .pw-listings-market .pw-detail-fact { border: 0; padding: var(--space-4) var(--pw-facts-gutter); } .pw-listings-market .pw-detail-fact:nth-child(1), .pw-listings-market .pw-detail-fact:nth-child(2) { border-bottom: 1px solid var(--color-border); } .pw-listings-market .pw-detail-fact:nth-child(2n) { border-left: 1px solid var(--color-border); } /* Home hero search on mobile: For + Location stay JOINED (the desktop seam — collapsed adjoining borders/radii — is intentionally kept, NOT restored to standalone controls) and the Search button collapses to a compact magnifying- glass icon, so For + Location + button all fit on ONE horizontal row without wrapping at 320/375/390/430px. The row must not wrap (that would drop the button to a second line), and Location (min-width:0) absorbs the free width. */ .pw-hero-search .pw-entry-form { flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); } .pw-hero-search .pw-srp-btn { width: auto; flex: 0 0 auto; padding: 0; min-width: 44px; } .pw-hero-search .pw-entry-btn .pw-entry-btn-label { display: none; } .pw-hero-search .pw-entry-btn .pw-entry-btn-icon { display: inline-flex; } } /* ── Search page: sub-header controls + map/results split ──────────────────── */ /* The whole search view. Clears the fixed site header so the sub-header sits directly beneath it. */ .pw-search-shell { display: block; } /* --pw-subheader-h is published by StickySubheader (ResizeObserver) so the sticky map column can offset itself below BOTH the fixed site header and the (variable-height, wrapping) filter bar. It defaults to 0 for the pre-hydration / no-JS render, where the subheader still sits in normal flow. */ .pw-search-layout { --pw-subheader-h: 0px; display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--pw-header-h); } /* Full-width filter bar. It is STICKY directly beneath the fixed site header (top: --pw-header-h) so it stays put while the map/results scroll. It provides the bar chrome (opaque surface + bottom border + subtle shadow so content scrolls cleanly under it); the SearchControls form inside is stripped of its own card styling so it reads as one continuous sub-header. z-index sits above the map column but below the fixed site header (z-index: 100). */ .pw-search-subheader { flex: 0 0 auto; position: sticky; top: var(--pw-header-h); z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } /* The subheader content fills the SAME usable width as the fixed site header: full-bleed (no max-width / centering band) with the header's shared horizontal gutter token (--space-6, matching .pw-sticky-header's padding) so the filter row's left/right edges line up with the header's logo/nav instead of sitting in from them. Vertical padding stays compact (--space-3). */ /* container-type: inline-size makes the inner a query container so the toolbar below can switch between its WIDE (all fields inline) and COMPACT (fields collapsed into the Filters drawer) layouts based on the ACTUAL width available to it — reacting to window resize AND the editor/tenant preview iframe width, with no JS and so no hydration mismatch or flicker. */ .pw-search-subheader-inner { padding: var(--space-3) var(--space-6); container-type: inline-size; } .pw-search-subheader .pw-srp-controls { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* Stable filter field widths (desktop sub-header only). Each dropdown/price input gets a FIXED flex basis (flex: 0 0 ) sized to its LONGEST visible option, so the control never grows or shrinks with the selected label — e.g. picking "Price (high to low)" vs "Newest to oldest", or "Residential" vs "Land", leaves every neighbor perfectly still. Widths are shared tokens so the sizing stays consistent and tunable in one place. Location is intentionally omitted here: it remains the sole flex-grow field (flex: 1 1 auto) that fills whatever width the fixed fields leave. These rules are scoped to the desktop sub-header, so the mobile top bar and the Filters drawer (which size fields to 100%) are unaffected. */ .pw-search-subheader .pw-srp-controls { --pw-field-view: 8rem; /* trigger width parity with For (same token size); "AI Chat" + icon + chevron fit within the shared field padding */ --pw-field-for: 8rem; /* fits "For Sale" / "For Rent" + chevron */ --pw-field-type: 9rem; /* fits "Residential" / "Commercial" + chevron */ --pw-field-beds: 8rem; /* fits "N + Beds" fully incl. chevron + padding */ --pw-field-baths: 8.5rem; /* fits "N + Baths" (wider word) incl. chevron + padding */ --pw-field-price: 8.5rem; /* fits "Max: $9,999,999" and the "Max Price" hint */ } .pw-search-subheader .pw-srp-field--view { flex: 0 0 var(--pw-field-view); width: var(--pw-field-view); } /* View trigger fill = the site theme's Color 1 (the SAME palette color R6b puts on the solid-header account button), threaded in as --pw-view-fill via inline style so no palette hex is baked in (var(--color-primary) is only the unset fallback). Applies to the TRIGGER only — the opened listbox is portaled to outside this subtree, so its items keep the standard menu styling untouched. The label, leading icon, and chevron all flip to white for contrast on the filled trigger. */ .pw-search-subheader .pw-srp-field--view .pw-select-btn { background: var(--pw-view-fill, var(--color-primary)); border-color: var(--pw-view-fill, var(--color-primary)); color: #fff; } .pw-search-subheader .pw-srp-field--view .pw-select-btn .pw-select-icon, .pw-search-subheader .pw-srp-field--view .pw-select-btn .pw-select-chevron { color: #fff; } .pw-search-subheader .pw-srp-field--for { flex: 0 0 var(--pw-field-for); width: var(--pw-field-for); } .pw-search-subheader .pw-srp-field--type { flex: 0 0 var(--pw-field-type); width: var(--pw-field-type); } .pw-search-subheader .pw-srp-field--beds { flex: 0 0 var(--pw-field-beds); width: var(--pw-field-beds); } .pw-search-subheader .pw-srp-field--baths { flex: 0 0 var(--pw-field-baths); width: var(--pw-field-baths); } .pw-search-subheader .pw-srp-field--minprice, .pw-search-subheader .pw-srp-field--maxprice { flex: 0 0 var(--pw-field-price); width: var(--pw-field-price); } /* Location owns the row's leftover width. The field flex-grows (base .pw-srp-field--loc rule), but its autocomplete wrap must also stretch to 100% — otherwise the field grows while the default-width text input stays narrow, leaving a blank band between the input and Type (the gap this release removes). Mirrors the hero + mobile top-bar fill rules; scoped to the desktop sub-header. NOTE: excludes .pw-ac-wrap--chips — the chip-row variant owns its own inner layout (icon + fixed-width input + pills). Applying width:100% to its inner input would push every chip out of view to the right of a full-width input (broken 2026-08-08 pt.2 through pt.4). */ .pw-search-subheader .pw-srp-field--loc .pw-ac-wrap:not(.pw-ac-wrap--chips), .pw-search-subheader .pw-srp-field--loc .pw-ac-wrap:not(.pw-ac-wrap--chips) input { width: 100%; } .pw-search-subheader .pw-srp-field--loc .pw-ac-wrap--chips { width: 100%; } /* ── Toolbar wide ↔ compact mode (container query) ────────────────────────── The sticky toolbar is ONE non-wrapping flex form whose DOM order is For · Location · Type · Min · Max · Beds · Baths · Search(icon) · Filters(icon). Sort is NOT inline — it lives only in the Filters drawer. Two modes, chosen purely from the container's own width: • COMPACT (default / mobile-first) — the inline filter group (For, Type, prices, Beds, Baths) is hidden and folded into the Filters drawer, leaving exactly Location(grows) · Search · Filters, in that order. Filters sits immediately RIGHT of Search. • WIDE (>= 84rem, when the full sequence fits comfortably on one line) — the inline filter group shows, leaving For · Location · Type · Min · Max · Beds · Baths · Filters. The Filters button stays visible at EVERY width (it opens the drawer that holds Sort + the extra filters — Garage/Sqft/Acres/HOA — which are never inline) and REPLACES the Search button on desktop; live auto-apply (each select/location selection commits immediately, prices on blur, Enter in Location submits) makes an explicit Search button redundant, so it is dropped in wide mode. The 84rem threshold covers the summed fixed field widths (For 8 + Type 9 + Min 8.5 + Max 8.5 + Beds 8 + Baths 8.5 + Filters 2.75 = 53.25rem) plus the inline gaps and a comfortable ~12rem Location — retained unchanged after Sort moved to the drawer, so it stays biased HIGH and fields never wrap. The whole group toggles atomically at the threshold. */ .pw-search-subheader .pw-srp-field--for, .pw-search-subheader .pw-srp-field--type, .pw-search-subheader .pw-srp-field--minprice, .pw-search-subheader .pw-srp-field--maxprice, .pw-search-subheader .pw-srp-field--beds, .pw-search-subheader .pw-srp-field--baths { display: none; } .pw-search-subheader .pw-srp-filters-btn { display: inline-flex; } /* Mobile/compact (2026-08-08): hide the redundant Search button — the Location autocomplete commits on Enter/select and Filters + Save Search remain visible. Every viewport now hides .pw-srp-search-btn (base + desktop). */ .pw-search-subheader .pw-srp-search-btn { display: none; } @container (min-width: 84rem) { .pw-search-subheader .pw-srp-field--for, .pw-search-subheader .pw-srp-field--type, .pw-search-subheader .pw-srp-field--minprice, .pw-search-subheader .pw-srp-field--maxprice, .pw-search-subheader .pw-srp-field--beds, .pw-search-subheader .pw-srp-field--baths { display: flex; } /* Desktop: the Filters button replaces the (now-redundant) Search button. */ .pw-search-subheader .pw-srp-filters-btn { display: inline-flex; } .pw-search-subheader .pw-srp-search-btn { display: none; } } /* Split workspace. Base rules are the shared skeleton; the desktop split and the mobile map-first overlay are set in the media blocks below. */ .pw-search-workspace { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; } .pw-search-map-col { flex: 0 0 auto; height: 320px; isolation: isolate; background: var(--color-surface-offset); } .pw-search-results-col { flex: 1 1 auto; min-width: 0; } .pw-search-results-inner { padding: var(--space-5); } /* Mobile map-first chrome (the persistent bottom Map/List bar). Hidden by default; the mobile media block below shows it. The filter toolbar itself is the SAME sticky sub-header used on desktop (it adapts via the container query above), so there is no separate mobile top bar. */ .pw-search-mobile-bar { display: none; } /* Desktop view control (Map · Grid · AI Chat) that lives in the sub-header search form, immediately LEFT of the For dropdown. It is a DROPDOWN — the shared PortalSelect (.pw-select-btn), wrapped in a .pw-srp-field so it inherits the EXACT same height + typography as the For Sale/For Rent field — NOT a segmented pill. Hidden by default; the desktop split breakpoint (>=900px) reveals it. Below that width the fixed bottom bar owns the toggle, so there is NO desktop footer. The field width mirrors the other subheader field-width tokens (see --pw-field-*). */ .pw-srp-field--view { display: none; } /* The results grid lives in a narrower column than the full page. The card min track (--pw-card-min) is deliberately large so that on typical desktop widths the 50%-wide results column fits exactly TWO cards per row (not three): at a 17.5rem/280px min, 3 tracks (3*280 + 2*20 gap = 880px) never fit the ~760px inner column at 1600px, while 2 tracks (580px) fit down to ~1280px; below that the auto-fill grid drops cleanly to one column. Tokenized so the two-up target can be retuned in one place. */ .pw-grid--split { --pw-card-min: 17.5rem; grid-template-columns: repeat(auto-fill, minmax(var(--pw-card-min), 1fr)); } /* Results map (Google Maps) + loading placeholder. The map fills its sticky column; the listing popup is a custom absolutely-positioned overlay inside the map container (see .pw-map-pop-wrap) so we control above/below placement via computePopupPlacement and avoid Google's default InfoWindow auto-pan. */ .pw-map-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); font-size: var(--text-sm); } .pw-search-map-col .pw-gmap-wrap { position: relative; width: 100%; height: 100%; } .pw-search-map-col .pw-gmap { width: 100%; height: 100%; background: var(--color-surface-offset); } /* Map popup — a compact mirror of the grid card (see ListingCard): photo on top, then price → beds/baths/sqft facts (Color-5 icons via --pw-icon-color, inherited from the .pw-page root) → address → brokerage. The card classes (.pw-card-price/-facts/-fact/-addr/-broker/-noimg) are reused verbatim so the two never drift. Positioned (left/top) inline by computePopupPlacement. */ .pw-map-pop-wrap { position: absolute; width: 264px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden; z-index: 5; } .pw-map-pop-close { position: absolute; top: 6px; right: 6px; z-index: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .pw-map-pop { display: block; text-decoration: none; color: var(--color-text); } .pw-map-pop-media { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface-offset); overflow: hidden; } .pw-map-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pw-map-pop-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } /* Tooltip is wide enough to keep beds/baths/sqft on ONE line, so pin the facts row to nowrap (the shared card facts allow wrapping for the narrower grid card). The address and brokerage each stay a single line and ellipsis-truncate when long; the full text remains in the DOM (read by assistive tech) and is mirrored into a title attribute for pointer users. */ .pw-map-pop .pw-card-facts { flex-wrap: nowrap; } .pw-map-pop .pw-card-addr, .pw-map-pop .pw-card-broker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Map controls (base-style segmented control + Draw/Radius geo tools) ─────── Overlaid inside .pw-gmap-wrap (its positioning context). The style segment + current-location button sit bottom-left; the custom zoom controls sit bottom-right (raised above Google's attribution/legal links, which replace Google's own disabled zoom/camera controls); the geo tools sit top-right (clear of the sub-header). Colors are theme-driven: the active segment/tool takes Theme Color 1 inline (accentColor), everything else uses surface/text/border tokens — no hard-coded palette. Icons inherit currentColor. z-index 4 keeps them under the listing popup (z-index 5). */ /* Bottom-left cluster: the base-style segmented control with the Current-location button immediately to its RIGHT, sharing one positioning context so they stay aligned + gapped by a token. */ .pw-map-bottomleft { position: absolute; left: var(--space-3); bottom: calc(var(--space-4) + 18px); z-index: 4; display: inline-flex; align-items: stretch; gap: var(--space-2); } /* Bottom-right custom zoom controls (Google's own zoom/camera controls are disabled). A vertically-stacked +/- pair matching the style toggle's surface, border, radius, and shadow tokens; raised above the Google attribution/legal links so it never covers them. */ .pw-map-zoom { position: absolute; right: var(--space-3); bottom: calc(var(--space-4) + 18px); z-index: 4; display: inline-flex; flex-direction: column; gap: 2px; padding: 3px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,.18); } .pw-map-zoombtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; } .pw-map-zoombtn svg { width: 16px; height: 16px; flex: none; } .pw-map-zoombtn:hover { background: var(--color-surface-offset); } .pw-map-zoombtn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-map-styleseg { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,.18); } /* Icon-only current-location control — matches the style toggle's surface/height. */ .pw-map-loc { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); } /* When the location chip sits directly above the zoom pill on a map, its bottom offset must mirror .pw-map-zoom's bottom offset so the gap between the two chips stays constant on desktop and mobile. Pill height = 3px pad + 2×28px + 2px gap + 2px border = 66px; the chip's own height (~34px) + a --space-2 gap keeps the two chips hugging. */ .pw-map-loc-above-zoom { position: absolute; right: var(--space-3); bottom: calc(var(--space-4) + 18px + 66px + var(--space-2)); z-index: 4; } @media (max-width: 900px) { .pw-map-loc-above-zoom { bottom: calc(var(--space-3) + 66px + var(--space-2)); } } .pw-map-loc svg { flex: none; } .pw-map-loc:hover:not(:disabled) { background: var(--color-surface-offset); } .pw-map-loc:disabled { cursor: default; color: var(--color-text-muted); } .pw-map-loc:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-map-loc-spin { animation: pw-map-loc-rot 0.8s linear infinite; transform-origin: center; } @keyframes pw-map-loc-rot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pw-map-loc-spin { animation: none; } } .pw-map-stylebtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font-size: var(--text-xs); line-height: 1; white-space: nowrap; } .pw-map-stylebtn svg { flex: none; } .pw-map-stylebtn:hover:not(.is-active) { background: var(--color-surface-offset); } .pw-map-stylebtn.is-active { color: #fff; } .pw-map-stylebtn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-map-tools { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); } .pw-map-toolrow { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,.18); } .pw-map-toolbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font-size: var(--text-xs); line-height: 1; white-space: nowrap; } .pw-map-toolbtn svg { flex: none; } .pw-map-toolbtn:hover:not(.is-active) { background: var(--color-surface-offset); } .pw-map-toolbtn.is-active { color: #fff; } .pw-map-toolbtn:focus-visible, .pw-map-toolaction:focus-visible, .pw-map-toolclear:focus-visible, .pw-map-radius-input:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-map-toolaction, .pw-map-toolclear { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: var(--text-xs); line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .pw-map-toolaction:hover, .pw-map-toolclear:hover { background: var(--color-surface-offset); } .pw-map-radius { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: var(--text-xs); color: var(--color-text); } .pw-map-radius-lbl { color: var(--color-text-muted); white-space: nowrap; } .pw-map-radius-input { width: 4.5em; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: var(--text-xs); } .pw-map-radius-readout { color: var(--color-text-muted); white-space: nowrap; } @media (min-width: 900px) { /* Desktop: map LEFT 50%, results RIGHT 50%. The map is sticky under the fixed header and fills the viewport height, so it stays a useful viewport while the page scroll moves the results past it — a single (page) scroller, so no nested-scroll trap. */ .pw-search-workspace { flex-direction: row; align-items: flex-start; } .pw-search-map-col { flex: 0 0 50%; max-width: 50%; position: sticky; top: calc(var(--pw-header-h) + var(--pw-subheader-h)); height: calc(100vh - var(--pw-header-h) - var(--pw-subheader-h)); } .pw-search-results-col { flex: 1 1 50%; max-width: 50%; } /* GRID view: the map is removed and the listing grid fills the full width. */ .pw-search-workspace[data-view="list"] .pw-search-map-col { display: none; } .pw-search-workspace[data-view="list"] .pw-search-results-col { flex-basis: 100%; max-width: 100%; } /* AI CHAT view: a strict 50/50 split — map LEFT, chat RIGHT — with the results grid hidden. The chat column mirrors the map column's sticky full-height geometry so both halves fill the viewport under the fixed header/sub-header. The map itself keeps tracking the AI-suggested listings (see SearchMapPane / searchChatMapStore), so the left half updates as the conversation refines. */ .pw-search-workspace[data-view="chat"] .pw-search-results-col { display: none; } .pw-search-workspace[data-view="chat"] .pw-search-map-col { display: block; flex: 0 0 50%; max-width: 50%; } .pw-search-workspace[data-view="chat"] .pw-search-chat-col { display: flex; flex: 0 0 50%; max-width: 50%; min-width: 0; position: sticky; top: calc(var(--pw-header-h) + var(--pw-subheader-h)); height: calc(100vh - var(--pw-header-h) - var(--pw-subheader-h)); } /* The Map/Grid/AI-Chat dropdown lives in the sub-header (left of For) on desktop; below the split breakpoint the fixed bottom bar owns the toggle instead. It is a normal .pw-srp-field (flex column: hidden label + PortalSelect), so reveal it as flex, matching the For field beside it. */ .pw-search-subheader .pw-srp-field--view { display: flex; } } /* ── Mobile (< 900px): map-first search UX ─────────────────────────────────── */ @media (max-width: 899.98px) { /* The sticky filter sub-header stays (in its COMPACT container-query layout: Location · Search · Filters); only the bottom Map/List bar is added. */ .pw-search-mobile-bar { display: flex; } /* The map/list panes share a fixed-height stage below the sticky sub-header. Both are absolutely stacked so the map keeps a real size even while the list shows (no blank map after a direct ?view=list load). The stage height subtracts the sub-header height (--pw-subheader-h, published by StickySubheader at every width). */ .pw-search-workspace { flex: 0 0 auto; display: block; position: relative; height: calc(100vh - var(--pw-header-h) - var(--pw-subheader-h, 0px)); height: calc(100dvh - var(--pw-header-h) - var(--pw-subheader-h, 0px)); } .pw-search-map-col, .pw-search-results-col { position: absolute; left: 0; right: 0; top: 0; bottom: 0; flex: none; max-width: none; height: auto; } /* Map pane stops above the fixed bottom bar so Google's attribution/controls are never covered. */ .pw-search-map-col { bottom: calc(var(--pw-mobile-bar-h, 64px) + env(safe-area-inset-bottom, 0px)); } /* The map pane already stops above the fixed bottom bar, so the bottom-left controls sit within the visible map — a smaller inset is enough. They wrap if the location button + style toggle can't fit on one row at narrow widths. */ .pw-map-bottomleft { bottom: var(--space-3); right: var(--space-3); flex-wrap: wrap; } /* The map pane already stops above the fixed bottom bar, so the zoom controls sit within the visible map — a smaller inset matches the bottom-left cluster. */ .pw-map-zoom { bottom: var(--space-3); } /* List pane scrolls internally with bottom padding so the last card clears the fixed bottom bar. */ .pw-search-results-col { overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--pw-page-bg, var(--color-surface)); padding-bottom: calc(var(--pw-mobile-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--space-4)); } /* Toggle by view. The hidden map keeps its size (visibility, not display) so switching back reveals an already-rendered map with no re-init flash. */ .pw-search-workspace[data-view="map"] .pw-search-results-col { display: none; } .pw-search-workspace[data-view="list"] .pw-search-map-col { visibility: hidden; pointer-events: none; } /* AI CHAT view on mobile is a SINGLE pane (no side-by-side split at this width): the chat fills the stage and the map/results panes are removed. The chat pane stops above the fixed bottom bar so the composer is never covered. When the software keyboard is up, SearchChat publishes its occluded height as --pw-kb-inset (see the visualViewport effect) and we lift the whole pane by that much so the fixed composer stays visible and the messages aren't pushed under it; it collapses back to 0 on keyboard dismiss. */ .pw-search-workspace[data-view="chat"] .pw-search-map-col, .pw-search-workspace[data-view="chat"] .pw-search-results-col { display: none; } .pw-search-workspace[data-view="chat"] .pw-search-chat-col { display: flex; position: absolute; left: 0; right: 0; top: 0; bottom: calc( var(--pw-mobile-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--pw-kb-inset, 0px) ); } /* Mobile composer: fixed above the Map/List/AI Chat sticky bar so it stays visible whether the visitor scrolls the SRP page or the chat log itself. Before this rule the composer lived inline at the bottom of .pw-search-chat-col — correct-looking on first paint, but if the page scrolled (visible site footer, cards pushed up) the composer scrolled out of the viewport with everything else. Pinning to the viewport matches the pattern the Map/List bar and inquiry bar already use. The composer sits (mobileBarH + safeArea + kbInset) above the viewport bottom so it clears (a) the fixed Map/List bar, (b) the iOS home-indicator safe area, and (c) the on-screen keyboard when the input is focused. */ .pw-search-workspace[data-view="chat"] .pw-chat-form { position: fixed; left: 0; right: 0; bottom: calc( var(--pw-mobile-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--pw-kb-inset, 0px) ); z-index: 40; /* above map controls (30) and below full-screen scrims (≥ 90) */ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); } /* Reserve space at the bottom of the scroll log for the fixed composer so the last bubble / suggested-listings row / Start-new+Report row is never hidden behind it. The 56px is a min-composer-height ceiling for the input row (14px padding top+bottom on .pw-chat-form + 44px min-height on .pw-chat-send). If the composer wraps to two lines the small overlap is acceptable—the user is actively typing and can scroll the log freely. The Start-new / Report row now lives inside .pw-chat-scroll (parked at the bottom via margin-top:auto), so this single padding covers both. */ .pw-search-workspace[data-view="chat"] .pw-chat-scroll { padding-bottom: calc(56px + var(--space-3)); } /* Bottom bar: fixed, safe-area padded, touch-sized. Holds only the Map/List toggle now (Filters moved to the top toolbar), centered horizontally. */ .pw-search-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 10px rgba(0,0,0,.08); } /* Intrinsic width, centered (not stretched). Height/padding/border/shadow all come from .pw-map-styleseg (the shared Satellite/Hybrid/Map control class) so this footer toggle renders at the EXACT same height as that toggle. */ .pw-msrp-viewseg { flex: 0 0 auto; } /* The footer view buttons REUSE .pw-map-stylebtn for every height-determining property (padding, border, line-height, icon size). These rules only augment COLOR/WEIGHT and the touch width — never anything that changes the rendered height — so height parity with the map style toggle is preserved. The selected state is signalled by MORE than color (bolder weight + an inset rule) so it reads without relying on the accent hue. */ .pw-msrp-viewbtn { flex: 0 0 auto; min-width: 64px; justify-content: center; color: var(--color-text-muted); font-weight: 600; transition: background .15s, color .15s; } .pw-msrp-viewbtn-icon { flex: none; } .pw-msrp-viewbtn.is-active { background: var(--color-primary); color: #fff; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); } .pw-msrp-viewbtn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; z-index: 1; } /* Map is the default mobile view and must be map-only: the global public footer must not display or extend the scrollable page below the map. In list view the footer returns after the cards. Desktop is unaffected — this lives only in the mobile media query. :has() is required because the DOM shape puts .pw-search-shell inside .pw-body-stretch and .pw-footer as a sibling of .pw-body-stretch (not of the shell), so a plain ~ .pw-footer from the shell can never match. :has() on .pw-page reaches the footer regardless of nesting depth. Same rationale applies to the chat and list view rules below. */ .pw-page:has(.pw-search-shell[data-view="map"]) .pw-footer, .pw-page:has(.pw-search-shell[data-view="list"]) .pw-footer, .pw-page:has(.pw-search-shell[data-view="chat"]) .pw-footer { display: none; } /* Property detail inquiry: below the two-column layout breakpoint the desktop tabbed card is removed and the sticky footer bar (with its flow spacer) takes over. Kept in this single shared breakpoint block so there is one canonical max-width:899.98px media query. */ .pw-inq-card { display: none; } .pw-inq-bar { display: flex; } .pw-inq-bar-spacer { display: block; height: calc(64px + env(safe-area-inset-bottom)); } } /* Filters drawer — a bottom sheet holding every sub-header control except Location (which lives in the mobile top bar). Rendered only when open and only reachable from the mobile bottom bar, but the styles carry no media query so the sheet is correct whenever it mounts. */ .pw-msrp-drawer-root { position: fixed; inset: 0; z-index: 1000; } .pw-msrp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: pw-msrp-fade .28s ease; } .pw-msrp-backdrop--closing { animation: pw-msrp-fade-out .28s ease forwards; } @keyframes pw-msrp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pw-msrp-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Filters drawer geometry is responsive — ONE component, two placements: • Mobile (< 900px): a bottom sheet pinned to bottom/left/right that RISES from the bottom edge (transform-origin bottom; translateY 100%→0 in, 0→100% out). • Desktop (≥ 900px, see the media query below): a right-edge SLIDE-OVER pinned to top/right/bottom with a fixed width + full height that slides horizontally (transform-origin right; translateX 100%→0 in, 0→100% out). Animation uses transform only (no layout props) so neither placement jumps. The component (state, content, focus trap/return, Escape, backdrop + body-scroll lock, role="dialog") is shared — only the positioning/animation differs. */ .pw-msrp-drawer { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85dvh; display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text); border-radius: 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); transform-origin: bottom center; animation: pw-msrp-rise .28s ease; } .pw-msrp-drawer--closing { animation: pw-msrp-fall .28s ease forwards; } @keyframes pw-msrp-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pw-msrp-fall { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes pw-msrp-slide-left { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes pw-msrp-slide-right { from { transform: translateX(0); } to { transform: translateX(100%); } } @media (min-width: 900px) { .pw-msrp-drawer { left: auto; right: 0; top: 0; bottom: 0; width: min(420px, 100%); max-height: none; height: 100dvh; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.25); transform-origin: right center; animation: pw-msrp-slide-left .28s ease; } .pw-msrp-drawer--closing { animation: pw-msrp-slide-right .28s ease forwards; } } @media (prefers-reduced-motion: reduce) { .pw-msrp-drawer, .pw-msrp-drawer--closing, .pw-msrp-backdrop, .pw-msrp-backdrop--closing { animation: none; } } .pw-msrp-drawer-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .pw-msrp-drawer-title { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); margin: 0; line-height: 1.2; } .pw-msrp-drawer-close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: 24px; line-height: 1; cursor: pointer; } .pw-msrp-drawer-close:hover { background: var(--color-surface-offset); } .pw-msrp-drawer-close:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-msrp-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } .pw-msrp-drawer-body .pw-srp-field, .pw-msrp-drawer-body .pw-srp-field--for { width: 100%; } /* Scope 2C: pair a Min/Max range on one row inside the drawer. */ .pw-msrp-range { display: flex; gap: var(--space-3); } .pw-msrp-range .pw-srp-field { flex: 1 1 0; min-width: 0; } .pw-msrp-drawer-foot { flex: 0 0 auto; display: flex; gap: var(--space-3); padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); } .pw-msrp-drawer-foot .pw-srp-btn { flex: 1 1 0; width: auto; } /* Clear all is the secondary action — outlined rather than filled. */ .pw-msrp-clear-btn { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } /* ── Property detail drawer ────────────────────────────────────────────────── A bottom-rising sheet that overlays the still-mounted Search page when a card or map marker is clicked. Distinct class family from the Filters drawer (.pw-msrp-*) so the two never collide. Desktop: centered with visible left+ right gutters (NOT edge-to-edge), rounded top corners, large but capped height, internal scroll. Mobile: near-full width + tall viewport with safe areas. Uses shared tokens only. */ .pw-pd-drawer-root { position: fixed; inset: 0; z-index: 1100; } .pw-pd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: pw-pd-fade .24s ease; } /* Exit: fade the backdrop back out. The host keeps the drawer mounted for the duration of this animation (see EXIT_MS) so the close visibly completes before unmount + history/scroll restoration. */ .pw-pd-backdrop--closing { animation: pw-pd-fade-out .3s ease forwards; } .pw-pd-drawer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text); /* Square top edges on every viewport (mobile bottom sheet + desktop panel). */ border-radius: 0; box-shadow: 0 -8px 40px rgba(0,0,0,.3); /* Mobile: full-height sheet that reaches the viewport top. It still rises from the bottom on open (translateY 100%→0) and falls on close; the toolbar's safe-area-inset-top keeps the buttons clear of the notch, and .pw-pd-scroll keeps the safe-area bottom padding. */ animation: pw-pd-rise .34s cubic-bezier(.2,.7,.3,1); } /* Exit: slide back down off the bottom of the viewport (mobile bottom sheet). */ .pw-pd-drawer--closing { animation: pw-pd-fall .3s cubic-bezier(.4,0,1,1) forwards; } /* Drawer toolbar — a token-styled bar ABOVE the photos (never overlaying them): left = Back to search (closes via the host lifecycle), right = share + heart. flex: 0 0 auto so it stays pinned while .pw-pd-scroll scrolls beneath it. */ /* No divider under the toolbar. Padding is symmetric so the gap from the top of the toolbar down to the buttons equals the gap from the buttons down to the photos: top = bottom = var(--space-4). The buttons-to-photos gap is exactly this bottom padding because the drawer zeroes the detail body's own top padding (see .pw-pd-scroll .pw-pd-content below). env(safe-area-inset-top) is ADDED on top only as hardware notch clearance now that the mobile drawer reaches the viewport top. */ .pw-pd-toolbar { /* Three-column grid so the street address centers on the TOOLBAR's midline regardless of the (asymmetric) Back and actions widths: 1fr | auto | 1fr puts the center track exactly between two equal side tracks. The center child owns min-width:0 so a long street truncates instead of shoving the buttons. */ flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-4); padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); background: var(--color-surface); } /* Centered street-only address between Back (left) and Share/Save (right). */ .pw-pd-address { justify-self: center; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); font-weight: 700; color: var(--color-text); text-align: center; } .pw-pd-back { justify-self: start; } .pw-pd-back { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; min-height: 40px; } .pw-pd-back:hover { background: var(--color-surface-2); } .pw-pd-back svg { display: block; width: 20px; height: 20px; } /* The "Back to search" label is hidden on the mobile drawer (chevron only); the button keeps an aria-label so the control stays announced. */ .pw-pd-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-2); } .pw-pd-share { position: relative; } /* Share + heart are borderless in their default state — no ring around the icon. Selected state is conveyed by the filled heart + its Theme Color 2 fill (inline style), not by a border. Per product decision, the drawer toolbar controls (.pw-pd-back / .pw-pd-share-btn / .pw-pd-heart / .pw-pd-share-item) are intentionally ring-free in ALL focus states — mouse, touch, AND keyboard (:focus and :focus-visible) — so no navigation ever leaves a lingering outline. The controls keep their aria-labels, so name/announcement is unaffected. */ .pw-pd-share-btn, .pw-pd-heart { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .pw-pd-share-btn:hover, .pw-pd-heart:hover { background: var(--color-surface-2); } .pw-pd-share-btn svg, .pw-pd-heart svg { display: block; width: 20px; height: 20px; } .pw-pd-back:focus, .pw-pd-share-btn:focus, .pw-pd-heart:focus, .pw-pd-share-item:focus, .pw-pd-back:focus-visible, .pw-pd-share-btn:focus-visible, .pw-pd-heart:focus-visible, .pw-pd-share-item:focus-visible { outline: none; box-shadow: none; } /* Share dropdown — anchored to the share button, right-aligned so it never spills off the drawer's right edge. z-index sits ABOVE the sticky section-tab ribbon (.pw-pd-tabs, z-index 15) so the open menu is never covered by the tabs when it overhangs the scroll area below the toolbar. Both the menu and the ribbon live in the same drawer stacking context (neither .pw-pd-share/.pw-pd-actions/ .pw-pd-toolbar establishes one), so raising just this local z-index is enough — no global bump that would break the map overlays or the drawer/lightbox roots. */ .pw-pd-share-menu { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 30; min-width: 12rem; display: flex; flex-direction: column; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 8px 28px rgba(0,0,0,.18); } .pw-pd-share-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: var(--text-sm); text-align: left; cursor: pointer; white-space: nowrap; } .pw-pd-share-item:hover { background: var(--color-surface-2); } .pw-pd-share-ico { display: inline-flex; } .pw-pd-share-ico svg { display: block; width: 18px; height: 18px; } /* Standalone property page toolbar — the page has no drawer toolbar (no Back-to-search control), so per spec the street address is LEFT-aligned here and takes the remaining width, with Share + Save pinned to the right. It shares the .pw-pd-address / .pw-pd-share / .pw-pd-share-btn / .pw-pd-heart styling with the drawer; the buttons get a visible ring here (they sit on the page surface, not a toolbar) so they are clearly present and hittable at desktop and mobile. position:relative anchors the absolutely-positioned share menu; z-index keeps the open menu above the sticky section tabs. min-width:0 lets the address truncate instead of pushing the actions off-screen on a narrow mobile viewport. */ .pw-pd-page-toolbar { position: relative; z-index: 20; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .pw-pd-page-toolbar .pw-pd-address { flex: 1 1 auto; justify-self: start; text-align: left; } .pw-pd-page-toolbar .pw-pd-actions { flex: 0 0 auto; } .pw-pd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Always keep normal breathing room at the end of the scroll, and ADD the mobile safe-area inset on top where it is nonzero. env() resolves to 0 on desktop/test environments, so the --space-6 base guarantees the computed bottom padding is never 0 (the live-QA bug was a bare env() → 0px). */ padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } /* The shared detail body inside the drawer loses its own max-width cap (the drawer supplies the gutters) AND its own top padding: the buttons-to-photos gap is then owned solely by the toolbar's bottom padding, so it matches the toolbar's (equal) top padding. Horizontal + bottom padding are unchanged. */ .pw-pd-scroll .pw-pd-content { max-width: none; padding-top: 0; } /* Gallery seams inside the drawer must match the DRAWER surface (--color-surface), not the inherited page canvas var, so override BOTH the container background and the per-tile background (the latter is what bleeds a gray sliver at the seam). */ .pw-pd-scroll .pw-pgal, .pw-pd-scroll .pw-pgal-tile { background: var(--color-surface); } .pw-pd-state { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-muted); } /* Mobile drawer: show only the left chevron for "Back to search" (the button keeps its aria-label, so it stays announced). The label returns at ≥700px. */ @media (max-width: 699.98px) { .pw-pd-back-label { display: none; } } @media (min-width: 700px) { /* Desktop: a Zillow-style near-full-height centered panel. It reaches the viewport top (top:0) and bottom, stays wide but keeps visible left/right backdrop gutters (never edge-to-edge horizontally), and still rises/falls vertically. */ .pw-pd-drawer { left: 50%; right: auto; top: 0; bottom: 0; transform: translateX(-50%); width: min(1200px, calc(100vw - 2 * var(--space-8))); max-height: none; height: 100dvh; animation: pw-pd-rise-centered .34s cubic-bezier(.2,.7,.3,1); } .pw-pd-drawer--closing { animation: pw-pd-fall-centered .3s cubic-bezier(.4,0,1,1) forwards; } } @keyframes pw-pd-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pw-pd-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes pw-pd-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pw-pd-fall { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes pw-pd-rise-centered { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } } @keyframes pw-pd-fall-centered { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 100%); } } /* ── Full-screen photo lightbox ────────────────────────────────────────────── Opened from any gallery tile. Dark stage, prev/next arrows (clamped at ends — disabled, no wrap), count, close, and a desktop thumbnail strip. */ .pw-plb-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: rgba(0,0,0,.94); animation: pw-pd-fade .18s ease; } .pw-plb-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); color: #fff; } .pw-plb-count { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .pw-plb-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .pw-plb-close:hover { background: rgba(255,255,255,.24); } .pw-plb-bar-actions { display: inline-flex; align-items: center; gap: var(--space-2); } /* Virtual Tour button in the top bar of the full-screen photo viewer. Behaves like a native button (opens the embedded tour inline — no new tab, no popup). Hover mirrors the gallery hero pill: Color 3 bg, Color 2 text. */ .pw-plb-vt { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; /* border-radius is set by the .pw-plb-root[data-button-style] rules below so the Photos toggle mirrors the site's Rectangles / Pills theme setting. */ background: var(--color-primary); color: #fff; font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .pw-plb-vt:hover, .pw-plb-vt:focus-visible { background: var(--pw-cms-color-3, var(--color-primary)); color: var(--pw-cms-color-2, #fff); outline: none; } .pw-plb-vt:focus, .pw-plb-vt:focus-visible { outline: none; box-shadow: none; } /* When the viewer is in "virtual tour" mode, the button reads as active — apply the same hover treatment at rest so it's obviously the currently-selected surface. */ .pw-plb-vt[aria-pressed="true"] { background: var(--pw-cms-color-3, var(--color-primary)); color: var(--pw-cms-color-2, #fff); } /* "Launch Virtual Tour" CTA rendered on the fallback poster when the tour URL can't be embedded (unknown host / branded landing page that sets frame-ancestors). Uses the tenant's primary color and mirrors the Photos toggle sizing so the pair reads as a visually consistent family. Border-radius is theme-controlled via .pw-plb-root's data-button-style attribute (see the block below). */ .pw-plb-launch { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--color-primary); color: #fff; font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .pw-plb-launch:hover, .pw-plb-launch:focus-visible { background: var(--pw-cms-color-3, var(--color-primary)); color: var(--pw-cms-color-2, #fff); outline: none; } /* The lightbox portals to so it lives outside the .pw-page root that carries the site's data-button-style. PropertyGallery mirrors that attribute onto .pw-plb-root so its Photos toggle + Launch Virtual Tour CTA honor the Rectangles / Pills theme setting. */ .pw-plb-root[data-button-style="pills"] .pw-plb-vt, .pw-plb-root[data-button-style="pills"] .pw-plb-launch { border-radius: var(--radius-full, 9999px); } .pw-plb-root[data-button-style="rectangles"] .pw-plb-vt, .pw-plb-root[data-button-style="rectangles"] .pw-plb-launch { border-radius: 8px; } /* Iframe stage — fills the same box the photo would occupy. The surrounding .pw-plb-stage is a flex container that centers its child; an iframe with only percentage height collapses to the default 300 by 150 there. align-self stretch plus flex 1 1 auto and min-width or min-height 0 force the iframe to fill the stage on both axes. */ .pw-plb-tour-frame { display: block; align-self: stretch; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; border: 0; border-radius: var(--radius-lg, 8px); background: #000; } .pw-plb-close:focus, .pw-plb-nav:focus, .pw-plb-thumb:focus, .pw-plb-close:focus-visible, .pw-plb-nav:focus-visible, .pw-plb-thumb:focus-visible { outline: none; box-shadow: none; } /* Stage padding mirrors the top-bar spacing so the virtual-tour frame (and the photo stage) has the same air on all four sides. Previously the stage only padded horizontally (0 var(--space-3)), so the iframe / photo bled to the bottom of the viewport while the sides kept their gutter — Michael flagged the asymmetric spacing on the VT fallback card. Match padding-bottom to padding-left/right for a symmetric frame; the top edge stays flush against the .pw-plb-bar which already supplies its own bottom padding. */ .pw-plb-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--space-3) var(--space-3); } .pw-plb-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; } .pw-plb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; } /* SVG chevron centers geometrically (no font baseline/line-box offset that made the old ‹/› glyphs sit visually low). block display removes the inline descender gap so flex centering is exact. */ .pw-plb-nav svg { display: block; width: 24px; height: 24px; } .pw-plb-nav:hover { background: rgba(255,255,255,.28); } .pw-plb-nav:disabled { opacity: .3; cursor: default; } .pw-plb-nav--prev { left: var(--space-3); } .pw-plb-nav--next { right: var(--space-3); } .pw-plb-thumbs { flex: 0 0 auto; display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; } .pw-plb-thumb { flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.1); cursor: pointer; opacity: .6; } .pw-plb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pw-plb-thumb[aria-current="true"] { border-color: #fff; opacity: 1; } /* Thumbnails are desktop-only; mobile relies on arrows + swipe-adjacent nav. */ @media (max-width: 699.98px) { .pw-plb-thumbs { display: none; } } /* Respect reduced-motion for every entrance AND exit animation above. The host also collapses its exit delay to 0 under reduced-motion so teardown is immediate (see EXIT_MS / prefers-reduced-motion in PropertyDrawerHost). */ @media (prefers-reduced-motion: reduce) { .pw-pd-backdrop, .pw-pd-backdrop--closing, .pw-pd-drawer, .pw-pd-drawer--closing, .pw-plb-root { animation: none; } } /* ── AI Chat view (third mode beside Map and List) ───────────────────────────── Base state only. The actual chat-view layout is defined per-breakpoint: the mobile block (single full-bleed pane) and the desktop >=900px block (strict 50/50 split — map LEFT, chat RIGHT). Hidden by default so Map/List behavior is completely unchanged when no chatSlot is supplied. */ .pw-search-chat-col { display: none; flex: 1 1 100%; min-width: 0; min-height: 0; } /* Chat fills the viewport at mobile width, so suppress the sibling footer for the whole shell in chat view (the desktop split keeps the footer hidden too — there is no desktop footer toggle). :has() reaches .pw-footer even though it isn't a direct sibling of .pw-search-shell (see mobile-block comment above). */ .pw-page:has(.pw-search-shell[data-view="chat"]) .pw-footer { display: none; } /* Chat panel. A flex column: a scrolling transcript that grows, then a pinned composer at the bottom. Colors are all theme tokens so it repaints with the tenant palette. */ .pw-chat { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; min-width: 0; background: var(--pw-page-bg, var(--color-surface)); } .pw-chat-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* At rest (no messages) the intro fills the pane's full inner width (inside the scroll container's own padding) instead of a narrow 30rem column; margin-block auto keeps it vertically centered, and text-align/justify-content keep the copy and chips centered inside the now full-width container. */ .pw-chat-empty { margin: auto 0; width: 100%; text-align: center; color: var(--color-text-muted); } .pw-chat-empty-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2); } .pw-chat-beta-pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } .pw-chat-empty-sub { font-size: var(--text-sm); margin: 0 0 var(--space-4); } .pw-chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .pw-chat-suggestion { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); cursor: pointer; } .pw-chat-suggestion:hover { background: var(--color-surface-offset); } .pw-chat-suggestion:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } /* Each turn fills the pane's full inner width (parity with .pw-chat-empty at rest and .pw-chat-cards once results load). Without this, the loading state — a user bubble + typing indicator, no cards — leaves .pw-chat with only max-width:100% children, so its shrink-to-fit width collapses to the bubble's natural width and the pane (and composer) render as a narrow column. */ .pw-chat-turn { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 100%; min-width: 0; } .pw-chat-turn--user { align-items: flex-end; } .pw-chat-turn--assistant { align-items: flex-start; } .pw-chat-bubble { max-width: min(90%, 42rem); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .pw-chat-turn--user .pw-chat-bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: var(--radius-sm); } .pw-chat-turn--assistant .pw-chat-bubble { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); } .pw-chat-bubble--typing { display: inline-flex; align-items: center; gap: 4px; } .pw-chat-bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); animation: pw-chat-dot 1.2s infinite ease-in-out; } .pw-chat-bubble--typing span:nth-child(2) { animation-delay: .2s; } .pw-chat-bubble--typing span:nth-child(3) { animation-delay: .4s; } @keyframes pw-chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Suggested listings render as the shared single-row ListingCarousel (never a wrapping grid or vertical stack). width:100% + min-width:0 lets the flex-column turn hold the internally-scrolling track without pushing horizontal page overflow; the .pw-carousel-* rules own the one-row layout, snapping, and card widths. */ .pw-chat-cards { width: 100%; min-width: 0; } .pw-chat-cards .pw-carousel-head { margin: 0 0 var(--space-2); } .pw-chat-cards-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); } .pw-chat-error { margin: 0 var(--space-5) var(--space-2); color: var(--color-danger, #b00020); font-size: var(--text-sm); } /* Start-new / Report Issue row. Lives INSIDE .pw-chat-scroll (a flex column) as its last child, so margin-top: auto parks it at the bottom of the visible scroll pane whenever the transcript is shorter than the pane. On long transcripts it trails the last bubble in normal flow. This is what keeps the two buttons visually inside the chat window and always at the bottom on mobile without a separate fixed footer. "Start new conversation" clears the transcript, accumulated criteria, suggested listings, map markers, and the persisted thread (see SearchChat.startNewConversation). */ .pw-chat-reset { flex: 0 0 auto; display: flex; justify-content: center; padding: var(--space-3) var(--space-4); margin-top: auto; } .pw-chat-reset-btn { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; } .pw-chat-reset-btn:hover { background: var(--color-surface-offset); color: var(--color-text); } .pw-chat-reset-btn:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-chat-form { flex: 0 0 auto; display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface); } .pw-chat-input { flex: 1 1 auto; min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font: inherit; } .pw-chat-input:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } .pw-chat-send { flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .pw-chat-send:disabled { opacity: .5; cursor: default; } .pw-chat-send:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--color-primary)); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pw-chat-bubble--typing span { animation: none; } } /* Location-phrase pill: rendered inline inside a user chat bubble around the substring the server parsed as the location filter. Reads as a token/chip (rounded, subtle border, tiny pin icon) so the shopper can see the chat understood their place phrase rather than ignoring it. Contrast-safe defaults inside the primary-colored user bubble; on the assistant bubble the pill flips to a light surface color instead. */ .pw-chat-loc-pill { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 1px 8px 1px 6px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 0.92em; font-weight: 500; line-height: 1.35; white-space: nowrap; vertical-align: baseline; } .pw-chat-turn--assistant .pw-chat-loc-pill { background: var(--color-surface-offset, #f4f6fa); color: var(--color-text, #0f172a); border-color: var(--color-border, #d1d5db); } .pw-chat-loc-pill-lbl { color: inherit; white-space: nowrap; } /* Keywords block — bottom of the Filters drawer (Michael 2026-08-29). Renders as its own section: full-width hairline divider, header row with the label left + AND/OR segmented control right, then the chip-row input beneath. The chip visuals reuse .pw-ac-chip / .pw-ac-chip-x / .pw-ac-chiprow so the look matches the location chips already in the app. */ .pw-kw-block { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); } .pw-kw-divider { height: 1px; background: var(--color-border, #e5e7eb); margin-bottom: var(--space-1); } .pw-kw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .pw-kw-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text, #0f172a); line-height: 1.2; } /* Segmented AND/OR toggle. Two pills share one rounded track. is-active gets the primary-fill treatment; the inactive pill keeps a subtle text-muted color so the pair reads as one control, not two loose buttons. */ .pw-kw-op { display: inline-flex; border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px; overflow: hidden; background: var(--color-surface, #fff); } .pw-kw-op-btn { appearance: none; border: 0; background: transparent; color: var(--color-text-muted, #6b7280); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; cursor: pointer; line-height: 1.2; min-height: 24px; } .pw-kw-op-btn:hover { color: var(--color-text, #0f172a); } .pw-kw-op-btn.is-active { background: var(--color-primary, #0f172a); color: var(--color-primary-contrast, #ffffff); } /* Nudge the chiprow inside the keywords field so pills sit with a little breathing room and the input caret hugs the leading edge. */ .pw-srp-field--keywords .pw-ac-chiprow { padding: 6px var(--space-3); gap: 6px; flex-wrap: wrap; align-items: center; } /* When the field is at 10 chips the input hides itself — give the row a min-height so it doesn't visually collapse. */ .pw-srp-field--keywords .pw-ac-chiprow { min-height: 44px; }

upgrades

A Homeowner’s Guide to Exterior Siding Materials: Cost, Durability, and Design Options