/* ==========================================================================
   product.css: the Default FWRE design's AUTONOMOUS product skin.

   The FWRE PRODUCT theme owns its own skin: forked from the shared
   demo-property.css floor and retokenized so it speaks ONLY this design's own
   --fwre-* tokens (design-tokens.css): ZERO --demo-* (the outer demo/website
   theme's vocabulary). It themes the live `fwre-*` agency-template markup
   (fwre-list-item / fwre-item-price / fwre-item-icons / fwre-property / spec
   table / agent panel). A design must render the same in ANY host (demo stand,
   a packaged host); borrowing the outer theme's tokens broke that, so the
   design now carries its own.

   Migration state (uikit-theme-designer skill): tokens are fully self-owned;
   the LISTING layout loads this skin (Showcases default listing). Remaining,
   tracked: (1) a couple of outer-theme CLASS hooks still in non-listing sections
   (.demo-stage in the map view, .demo-editor-wrap in the edit form): selector
   portability is the next phase; (2) the search widgets (chosen/ion) still consume
   a few --demo-* via the shared bridge until native fwre-ms/UIKit search lands.
   ========================================================================== */


/* The live island button set, ported verbatim (fwre-design-styles.css:32-76), round 12. The
   demo skin's class rules (gradient primary, coral secondary, grey default) lose to these
   id-scoped live rules, like live's own #fwre overrides beat the vendored fw-uikit skin. */
#fwre .fwk-button {
    color: var(--fwre-color-text);
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-medium);
    text-transform: none;
    background: var(--fwre-color-surface);
    border: 1px solid transparent;
    border-radius: var(--fwre-radius); /* official reference control tier (4px) */
}
#fwre .fwk-button-default { border-color: var(--fwre-color-border); }
#fwre .fwk-button-default svg { color: var(--fwre-color-text-subtle); }
#fwre .fwk-button-primary {
    color: var(--fwre-color-on-primary);
    background: var(--fwre-color-primary);
    border-color: var(--fwre-color-primary);
}
#fwre#fwre .fwre-button-primary-inverse { /* doubled id: see design-theme.css (child :hover rules, years selector) */
    color: var(--fwre-color-text);
    border-color: var(--fwre-color-primary);
    background: transparent;
}
#fwre .fwk-button-secondary {
    color: var(--fwre-color-primary);
    background-color: var(--fwre-color-surface-muted);
}
#fwre .fwk-button-secondary svg { color: var(--fwre-color-primary); }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover { color: var(--fwre-color-on-primary); background: var(--fwre-color-primary); }
#fwre .fwre-footer-pagination .fwk-button-secondary svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover svg { color: var(--fwre-color-on-primary); }

/* price (green): list + detail */
#fwre .fwre-text-green,
#fwre .fwre-item-price a,
#fwre .fwre-property-price { color: var(--fwre-color-primary); text-decoration: none; }
#fwre .fwre-item-price a:hover { color: var(--fwre-color-primary-hover); }

#fwre .fwk-text-muted { color: var(--fwre-color-text-muted) !important; } /* vendor fwk-text-muted is !important */

/* ---- LISTING ---------------------------------------------------------- */
#fwre .fwre-listing-count { font-size: var(--fwre-text-md); }

#fwre .fwre-list-item {
    background: var(--fwre-color-surface);
    border: 1px solid var(--fwre-color-border);
    /* Reference row cards use the SMALL 4px radius (corner-zoom-sampled, round 21), not
       the 8px card radius. --fwre-row-radius keeps the photo clip below in lockstep. */
    --fwre-row-radius: var(--fwre-radius);
    border-radius: var(--fwre-row-radius);
    /* Reference: the row photo is full-bleed against the card's left/top/bottom edges,
       so the card itself has no padding - the data column carries it instead. */
    padding: 0;
    margin-bottom: var(--fwre-space-18);
    box-shadow: var(--fwre-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#fwre .fwre-list-item:hover { border-color: var(--fwre-color-border-strong); box-shadow: var(--fwre-shadow); }
#fwre .fwre-list-item .fwre-item-data { padding: var(--fwre-space-16); }
/* Media column fills the full row height (fwk-grid-match stretches it); the photo is
   clipped by the card radius on its outer corners: left side in the 3-col row, top when
   the columns stack. The inner wrapper absolute-fills the stretched media box while the
   media's own 4/3 aspect keeps a short-content row from squashing the photo. */
#fwre .fwre-list-item .fwre-item-media {
    height: 100%;
    border-radius: var(--fwre-row-radius) var(--fwre-row-radius) 0 0;
}
#fwre .fwre-list-item .fwre-item-slideshow { height: 100%; }
@media (min-width: 960px) {
    #fwre .fwre-list-item .fwre-item-media {
        aspect-ratio: 4 / 3;
        border-radius: var(--fwre-row-radius) 0 0 var(--fwre-row-radius);
    }
    #fwre .fwre-list-item .fwre-item-media > .fwk-position-relative { position: absolute; inset: 0; }
}

#fwre .fwre-item-media { position: relative; isolation: isolate; border-radius: var(--fwre-radius-sm); overflow: hidden; } /* isolate: the overlay z-layers (badges/slidenav/quick-view) must stay inside the card, or they beat the z-2 site header and paint over its open nav dropdown */
#fwre .fwre-item-media-link { display: block; aspect-ratio: 4 / 3; }
#fwre .fwre-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

#fwre .fwre-item-count {
    /* live card cover gradient (fwre-design-styles.css .fwre-item-count): a full-width bottom
       fade behind the count/3D icon, not a pill. pointer-events:none so it never blocks the
       slidenav hover-reveal beneath it. */
    position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
    padding: 50px var(--fwre-space-20) var(--fwre-space-18); /* 50px: hold, off-scale (decisions r2); 18px bottom = the shared bottom-row line (owner 2026-07-22) */ text-align: right;
    background: var(--fwre-color-media-fade);
    color: var(--fwre-color-on-media); font-size: var(--fwre-text-base); z-index: 2; pointer-events: none;
}

/* ---- listing-card feature parity (P2, l-0060): slideshow + badges + favorite + share ---- */
#fwre .fwre-item-slideshow { position: relative; aspect-ratio: 4 / 3; }
#fwre .fwre-item-slideshow .fwk-slideshow-items { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
#fwre .fwre-item-slide { position: absolute; inset: 0; display: none; }
#fwre .fwre-item-slide.is-active { display: block; }
#fwre .fwre-item-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fwre .fwre-item-media .fwre-slidenav-prev,
#fwre .fwre-item-media .fwre-slidenav-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    /* live .fwk-slidenav glyph = WHITE (rgba(255,255,255,.7)), NOT green, per fw-uikit-3.21.6.min.css.
       Round-6 wrongly set hover→green; the live arrows stay white (brighter on hover). */
    background: var(--fwre-color-media-scrim); color: var(--fwre-color-on-media-soft); border-radius: 50%; text-decoration: none; z-index: 3;
    opacity: 0; transition: opacity var(--fwre-fast) var(--fwre-ease), background var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-item-media:hover .fwre-slidenav-prev,
#fwre .fwre-item-media:hover .fwre-slidenav-next { opacity: 1; }
#fwre .fwre-item-media .fwre-slidenav-prev:hover,
#fwre .fwre-item-media .fwre-slidenav-next:hover { background: var(--fwre-color-media-scrim-hover); color: var(--fwre-color-on-media); } /* live .fwk-slidenav:hover = rgba(255,255,255,.95) white */
#fwre .fwre-item-media .fwre-slidenav-prev { left: 15px; }
#fwre .fwre-item-media .fwre-slidenav-next { right: 15px; }
#fwre .fwre-item-media .fwre-slidenav-prev svg,
#fwre .fwre-item-media .fwre-slidenav-next svg { width: 10px; height: 20px; } /* #7: live fwk-slidenav arrow size */
/* #7: counter on the BOTTOM-LEFT (live .fwre-item-count / .fwre-image-counter fwk-position-bottom-left);
   the prior left:auto;right:8px override forced it bottom-right. */
#fwre .fwre-item-media .fwre-image-counter { z-index: 2; }

/* status badges over the slideshow (live .fwre-status-label / statuslabels plugin) */
/* 10/10 + margin 0: the wrapper inherits a stray 15px margin (framework), which pushed the first
   chip to 23/23; pinned to mirror the quick-view pill's top/right 10/10 (owner 2026-07-22). */
#fwre .fwre-status-label { position: absolute; top: 12px; left: 10px; margin: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--fwre-space-5); }
/* open-house badge overlay: image bottom-center (owner request 2026-07-22; the openhours addon
   contributes into the media slot). Same overlay idiom as the status labels above. Bottom pinned
   to the .fwre-item-count icons line (its 20px pad) so the badge and the photo/video/3D counters
   sit on ONE row; the compact badge = icon + "Open", full schedule in the fwk-tooltip. */
#fwre .fwre-openhouse-overlay { position: absolute; bottom: var(--fwre-space-16); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; } /* one bottom line: the 20px live-spec pill centers at ~26px, with the 1/2 counter + count icons (owner 2026-07-22) */
#fwre .fwre-openhouse-overlay .fwre-openhouse-badge { display: inline-flex; align-items: center; gap: var(--fwre-space-5); }
#fwre .fwre-status-label .fwk-label {
    /* uncolored statuses (e.g. Available, id 18) fall to UIkit's default .fwk-label BLUE, matching
       live; statuses with an admin color override this via the inline style from the dictionary.
       Geometry comes from the shared live-verbatim pill (design-theme #fwre .fwk-label.fwk-label,
       20px/12px/500 - owner 2026-07-22); only the color fallback lives here. */
    background: var(--fwre-color-status-default); color: var(--fwre-color-status-default-text);
    letter-spacing: 0;
}

/* A tile's uncoloured status by meaning (the statuslabels tone class). A label the admin coloured
   carries no tone class, so its dictionary colour stays exactly as set; an unknown status keeps the
   default blue above. */
#fwre .fwre-status-label .fwk-label.fwre-status-tone-available { background: var(--fwre-color-status-available); color: var(--fwre-color-status-available-text); }
#fwre .fwre-status-label .fwk-label.fwre-status-tone-pending { background: var(--fwre-color-status-pending); color: var(--fwre-color-status-pending-text); }
#fwre .fwre-status-label .fwk-label.fwre-status-tone-closed { background: var(--fwre-color-status-closed); color: var(--fwre-color-status-closed-text); }

/* The Featured pill (design review 20 Oct 2026, dsn-18): a featured card says so on its photo, at the
   status pills' corner, and the status pills move down one row under it. The pale featured green with
   a deep teal ink and a star sets it apart from a status and from the primary buttons. */
#fwre .fwre-featured-flag { position: absolute; top: 12px; left: 10px; z-index: 3; }
#fwre .fwk-label.fwk-label.fwre-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fwre-space-4);
    background-color: var(--fwre-color-featured-flag);
    color: var(--fwre-color-featured-flag-text);
    font-weight: var(--fwre-weight-semibold);
}
/* 24px: the shared pill is 20px of line plus 2px padding above and below */
#fwre .fwre-item-media-featured .fwre-status-label { top: calc(12px + 24px + var(--fwre-space-6)); }

/* item options row (compare / favorite / share / 3D) */
#fwre .fwre-item-options { align-items: center; gap: var(--fwre-space-8); }
/* A grid tile's action row holds at any width (spec 011 sweep, 20 Oct 2026): View Details keeps one
   line and the options stay one row, and when a tile is too narrow for both the whole options row
   moves under the button, as on a phone. In a 275px tile the label broke in two and the star fell to
   a line of its own. */
#fwre .fwre-grid-view .fwre-item-footer { flex-wrap: wrap; gap: var(--fwre-space-8); }
#fwre .fwre-grid-view .fwre-item-footer .fwre-read-more { white-space: nowrap; }
#fwre .fwre-grid-view .fwre-item-footer .fwre-item-options { flex-wrap: nowrap; }
/* Touch widths: each option is its own 44x44 tap target below 960px, sized in design-theme.css with
   its bare-icon look (spec 012 FR-008). Here the row: the options stay one row (the foundation grid
   wraps its cells, which put the star on a line of its own in a 390 list row), and the row moves
   under View Details only when the card is too narrow to hold both. */
@media (max-width: 959px) {
    #fwre .fwre-item-footer { flex-wrap: wrap; row-gap: var(--fwre-space-8); }
    #fwre .fwre-item-options { gap: 0; flex-wrap: nowrap; }
    #fwre .fwre-item-options .fwk-margin-small-left { margin-left: 0 !important; } /* UIkit's fwk-margin-small-left is `margin-left: 10px !important` */
    /* View Details takes a 16px side padding, so the 44px options still fit beside it: three in a
       288px WordPress list row at 390 (they ran 7px past it), four (Show on map first) in a 768 map
       column tile (they dropped under it). */
    #fwre .fwre-item-footer .fwre-read-more { padding-left: var(--fwre-space-16); padding-right: var(--fwre-space-16); }
    /* The card's own buttons get the same 44px floor (design review dsn-12): View Details was 38px
       tall and the Quick view pill on the photo 27px. */
    #fwre .fwre-item a.fwre-read-more {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #fwre .fwre-item-media .fwre-quick-view-btn {
        box-sizing: border-box;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}
/* compare toggle: icon-only stateful button; the is-compared class swaps the two pre-rendered
   glyphs (same two-span pattern as the favorites star) and JS re-syncs the fwk-tooltip.
   Chrome-strip + colors (incl. the red remove state) live with the sibling toggles in
   design-theme.css. */
#fwre .fwre-compare-toggle { cursor: pointer; }
#fwre .fwre-compare-off { display: inline-flex; }
#fwre .fwre-compare-on { display: none; }
#fwre .fwre-compare-toggle.is-compared .fwre-compare-off { display: none; }
#fwre .fwre-compare-toggle.is-compared .fwre-compare-on { display: inline-flex; }
#fwre .fwre-favorite { color: var(--fwre-color-text-muted); cursor: pointer; display: inline-flex; }
#fwre .fwre-favorite:hover { color: var(--fwre-color-favorite-hover); }
#fwre .fwre-fav-on { display: none; }
#fwre .fwre-favorite.is-favorited .fwre-fav-off { display: none; }
#fwre .fwre-favorite.is-favorited .fwre-fav-on { display: inline-flex; color: var(--fwre-color-favorite); }
/* a saved star on a tile is gold too: the tile row's own glyph colour (`#fwre .fwre-item-options svg`
   and its featured and hover variants, design-theme.css, (1,2,1) at most) painted it grey, so the
   favourites page, where every star is on, showed nothing saved */
#fwre .fwre-item-options .fwre-favorite.is-favorited svg { color: var(--fwre-color-favorite); }
/* White only OVER the photo (card media badge strip); on the slideshow info band the glyph
   inherits the dark text color like its photo/video siblings (was invisible white on #e6e6e6). */
#fwre .fwre-item-count .fwre-3d-counter { color: var(--fwre-color-on-media); }
#fwre .fwre-3d-link { display: inline-flex; }

/* social share dropdown: the vendored UIkit fwk-dropdown OWNS show/hide + placement (the live
   page does exactly this); the skin below is the verbatim live override (fwre-design-styles.css
   223-237): an auto-width WHITE PILL (radius 90px, padding 10) of 40px brand-coloured circles.
   R9b: the previous CSS hover-reveal + manual positioning FOUGHT the UIkit drop JS, removed. */
#fwre .fwre-social-dropdown-wrapper { position: relative; display: inline-flex; }
#fwre .fwre-social-toggle { cursor: pointer; }
/* The drop mounts in the island (share_button.php: `container: #fwre`), so every rule here is
   scoped on #fwre (lesson l-0123: a drop UIkit re-parents to <body> loses the island's CSS).
   Closed by default (FOUC guard, docs/engineering-gotchas.md "FOUC"): before the JS component
   attaches, the element carries the fwk-dropdown ATTRIBUTE but not the .fwk-drop class, so the
   framework's baseline display:none doesn't reach it; gate on .fwk-open, the class the component
   toggles, same fix as .fwre-ms-drop. */
#fwre .fwre-social-dropdown { display: none; }
#fwre .fwre-social-dropdown.fwk-open {
    /* The links are inline boxes, so the word space between them is part of each gap. The drop
       used to mount on <body> and take the page's base face; it keeps UIkit's base face and size
       here so the pill measures as it did, not the island's smaller Poppins. */
    font-family: var(--fwre-font-system);
    font-size: var(--fwre-text-xl);
    display: block;
    width: auto;
    min-width: auto;
    padding: var(--fwre-space-10);
    white-space: nowrap;
    border-radius: 90px;
}
/* each share link = a 40px brand-coloured circle with a white glyph (live a + a svg{color:white}).
   The glyph rule is (1,2,2) so the card row's own icon colours (`#fwre .fwre-item-options svg`,
   the featured and :hover variants, `#fwre .fwre-copy-link:hover svg`, all (1,2,1) at most) don't
   reach into the drop. */
#fwre .fwre-social-dropdown a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fwre-color-on-brand); }
#fwre .fwre-social-dropdown a[fwk-icon] svg { color: var(--fwre-color-on-brand); }
#fwre .fwre-social-dropdown a[fwk-icon="copy"]      { background: var(--fwre-color-brand-neutral); }
#fwre .fwre-social-dropdown a[fwk-icon="whatsapp"]  { background: var(--fwre-color-brand-whatsapp); }
#fwre .fwre-social-dropdown a[fwk-icon="twitter"]   { background: var(--fwre-color-brand-x); }
#fwre .fwre-social-dropdown a[fwk-icon="facebook"]  { background: var(--fwre-color-brand-facebook); }
#fwre .fwre-social-dropdown a[fwk-icon="linkedin"]  { background: var(--fwre-color-brand-linkedin); }
#fwre .fwre-social-dropdown a[fwk-icon="telegram"]  { background: var(--fwre-color-brand-telegram); }
#fwre .fwre-social-dropdown a[fwk-icon="pinterest"] { background: var(--fwre-color-brand-pinterest); }
#fwre .fwre-social-dropdown a[fwk-icon="comment"]   { background: var(--fwre-color-brand-neutral); }
#fwre .fwre-social-dropdown a[fwk-icon="mail"]      { background: var(--fwre-color-primary); }
/* live fwre-design-styles.css: SMS share is mobile-only */
@media (min-width: 960px) {
    #fwre .fwre-social-dropdown a.fwre-sms-share { display: none; }
}

/* ---- toolbar currency selector + pagination (P3, l-0060) ---- */
#fwre .fwre-toolbar-options { display: flex; align-items: center; gap: var(--fwre-space-10); flex-wrap: wrap; }
#fwre .fwre-toolbar-options-currency { display: inline-flex; }
#fwre .fwre-toolbar-options-currency .fwk-select { min-width: 96px; }
/* Round 28: the official toolbar order is Ordering | Lease Term | currency | RSS - CSS
   order pins it regardless of the contributions' add-on boot order. */
#fwre .fwre-toolbar-options form > .fwre-toolbar-options-ordering { order: 1; }
#fwre .fwre-toolbar-options form > .fwre-toolbar-options-lease { order: 2; }
#fwre .fwre-toolbar-options form > .fwre-toolbar-options-currency { order: 3; }
#fwre .fwre-toolbar-options form > .fwre-toolbar-options-rss { order: 4; }
#fwre .fwre-toolbar-options-lease .fwk-select { min-width: 120px; }
#fwre .fwre-listing-pagination { margin-top: 1.5rem; /* hold: off-scale (decisions r2) */ }

/* Grid/table card chrome: live fwre-design-styles.css:257-261.
   Round 22 vs the official grid PNG: tiles use the SMALL 4px radius (corner-zoom-sampled,
   same as the round-21 list rows), the photo is ~7:5 (the list keeps 4:3), and the bottom
   stack (agent strip -> footer) PINS to the tile bottom - the slack from short
   content sits above it, so every footer lands at one constant line. */
#fwre .fwre-grid-view .fwre-item {
    background: var(--fwre-color-surface);
    border-radius: var(--fwre-radius);
    box-shadow: var(--fwre-shadow-sm);
    overflow: hidden;
    height: 100%; /* the outer wrapper div is stretched by the row's grid-match */
    display: flex;
    flex-direction: column;
}
/* VENDOR-IMPORTANT EXCEPTIONS (with fwk-text-muted, the only important flags in this file): the
   card's `fwk-margin` attribute makes UIkit's Margin component add `fwk-margin-small-top` to every
   child that starts a row, and that utility's 10px top margin carries the important flag
   (fw-uikit-3.25.25.css, Margin, Small). Only another one re-sets it: here, the body flush under
   the media and the auto pins of the agent strip and the footer. */
#fwre .fwre-grid-view .fwre-item > .fwre-item-info { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0 !important; } /* body flush under the media; owner 2026-07-22 */
#fwre .fwre-grid-view .fwre-item-info > .fwre-agent-trigger { margin-top: auto !important; padding-top: 0; }
/* Icons row → agent strip: margin-small (10px) IN TOTAL on vertical cards (owner request
   2026-07-22): icons drop their fwk-margin bottom (20px), the trigger's 10px pad moved into
   the agent margin below, and the theme's 25px item-agent hold is overridden to 10px. */
#fwre .fwre-grid-view .fwre-item-info .fwre-item-icons { margin-bottom: 0; }
/* Trim the price h2 line-box leading so the VISUAL air above the price cap matches the 20px
   body padding on the other three sides (owner 2026-07-22; box padding stays uniform 20px). */
#fwre .fwre-grid-view .fwre-item-price .fwk-h2 { display: inline-block; line-height: 1.15; }
#fwre .fwre-grid-view .fwre-agent-trigger .fwre-item-agent { margin-top: var(--fwre-space-10); }
/* Agents addon off: the pin degrades to the footer (compare now lives IN the footer options row). */
#fwre .fwre-grid-view .fwre-item-info:not(:has(> .fwre-agent-trigger)) > .fwre-item-footer { margin-top: auto !important; padding-top: var(--fwre-space-10); } /* vendor fwk-margin-small-top is !important */
#fwre .fwre-grid-view .fwre-item .fwre-item-media { border-radius: var(--fwre-radius) var(--fwre-radius) 0 0; }
#fwre .fwre-grid-view .fwre-item .fwre-item-media-link,
#fwre .fwre-grid-view .fwre-item .fwre-item-slideshow { aspect-ratio: 7 / 5; }
/* Quick-view hover pill: pill styling from live fwre-design-styles.css:973-1006; geometry is the
   demo's own (owner request 2026-07-22): image TOP RIGHT, on ALL cards that render card_media
   (grid tile, list card, us card) - live shows it grid-only at bottom-left. */
#fwre .fwre-quick-view-btn {
    display: inline-block; position: absolute; top: 10px; right: 10px;
    padding: var(--fwre-space-4) var(--fwre-space-10); background: var(--fwre-color-media-scrim); border: 1px solid var(--fwre-color-media-outline);
    border-radius: 20px; color: var(--fwre-color-on-media); font-size: var(--fwre-text-xs); font-weight: var(--fwre-weight-semibold);
    font-family: var(--fwre-font); letter-spacing: .6px; text-transform: uppercase;
    opacity: 0; transition: opacity .2s ease; z-index: 4; text-decoration: none;
}
#fwre .fwre-item-media:hover .fwre-quick-view-btn { opacity: 1; }
@media (pointer: coarse) { #fwre .fwre-quick-view-btn { opacity: 1; } }

#fwre .fwre-item-data { padding: 0 var(--fwre-space-5); }

/* Card address: always ONE line, ellipsis when longer; the full address rides a fwk-tooltip
   on the wrapper (owner request 2026-07-22). Covers all card variants. */
#fwre .fwre-item-address,
#fwre .fwre-item-location,
#fwre .fwre-slideshow-thumb-address,
#fwre .fwre-us-card-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fwre .fwre-item-price a { font-size: 1.7rem; /* hold: off-scale (decisions r2) */ font-weight: var(--fwre-weight-bold); }

#fwre .fwre-item-location { margin-top: var(--fwre-space-6); color: var(--fwre-color-text); }
#fwre .fwre-item-location [fwk-icon], #fwre .fwre-agent-listings [fwk-icon] { color: var(--fwre-color-primary); }

#fwre .fwre-item-type { margin-top: var(--fwre-space-6); } /* live: bare text spans, no chip styling */


#fwre .fwre-item-title { margin-top: var(--fwre-space-12); font-size: var(--fwre-text-xl); font-weight: var(--fwre-weight-bold); }
#fwre .fwre-item-title a { color: var(--fwre-color-text); text-decoration: none; }
#fwre .fwre-item-title a:hover { color: var(--fwre-color-primary); }
#fwre .fwre-item-text { color: var(--fwre-color-text-muted); font-size: var(--fwre-text-lg); line-height: 1.5; }

#fwre .fwre-empty {
    background: var(--fwre-color-surface); border: 1px dashed var(--fwre-color-border-strong);
    border-radius: var(--fwre-radius-card); padding: 1.4rem; /* hold: off-scale (decisions r2) */ color: var(--fwre-color-text-muted);
}

/* ---- SEARCH FORM ------------------------------------------------------ */
#fwre .fwre-search-form .fwk-form-label { font-size: var(--fwre-text-base); color: var(--fwre-color-text-muted); display: block; margin-bottom: var(--fwre-space-3); }
#fwre .fwre-search-form .fwk-input,
#fwre .fwre-search-form .fwk-select {
    width: 100%; background-color: var(--fwre-color-surface); color: var(--fwre-color-text); /* -color: keep the caret glyph */
    border: 1px solid var(--fwre-color-border-strong); border-radius: var(--fwre-radius-sm);
    padding: var(--fwre-space-8) var(--fwre-space-10);
}
#fwre .fwre-search-form .fwk-button-primary { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); border: none; }
#fwre .fwre-search-note { font-size: var(--fwre-text-sm); }

/* ---- DETAIL ----------------------------------------------------------- */
#fwre .fwre-item-header { margin-bottom: var(--fwre-space-18); }
#fwre .fwre-item-header-title { font-size: 1.9rem; /* hold: off-scale (decisions r2) */ font-weight: var(--fwre-weight-bold); line-height: 1.2; }
#fwre .fwre-property-price { font-size: 1.7rem; /* hold: off-scale (decisions r2) */ font-weight: var(--fwre-weight-bold); margin-top: var(--fwre-space-4); }
#fwre .fwre-property-status .fwk-label {
    display: inline-block; margin-top: var(--fwre-space-6);
    background: var(--fwre-color-primary); color: var(--fwre-color-on-primary);
    padding: var(--fwre-space-2) var(--fwre-space-10); border-radius: 999px; font-size: var(--fwre-text-sm); font-weight: var(--fwre-weight-semibold);
}

/* detail-page slideshow: live .fwre-property-images stage + .fwre-property-slider-items thumbs */
#fwre .fwre-property-media { margin-bottom: var(--fwre-space-16); }
#fwre .fwre-property-images {
    position: relative; isolation: isolate; /* isolate: keep the stage overlay z-layers (counter/slidenav/dotnav) from escaping and painting over the z-2 site header's open dropdown */
    border-radius: var(--fwre-radius-card); overflow: hidden; aspect-ratio: 16 / 10;
    background: var(--fwre-color-surface-muted); box-shadow: var(--fwre-shadow-sm);
}
#fwre .fwre-property-images .fwk-slideshow-items { list-style: none; margin: 0; padding: 0; height: 100%; }
#fwre .fwre-slide { display: none; height: 100%; }
#fwre .fwre-slide.is-active { display: block; }
#fwre .fwre-slide-img, #fwre .fwre-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* bottom gradient on the main stage (live .fwre-property-images-footer) for counter legibility */
#fwre .fwre-property-images::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    pointer-events: none; z-index: 1; background: var(--fwre-color-media-fade-stage);
}
#fwre .fwre-slidenav {
    /* live detail gallery arrows = raw UIkit fwk-overlay-default: small LIGHT circle, hover-revealed */
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--fwre-color-media-control); color: var(--fwre-color-media-control-text); border-radius: 50%; text-decoration: none;
    opacity: 0; transition: opacity var(--fwre-fast) var(--fwre-ease), background var(--fwre-fast) var(--fwre-ease), color var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-property-images:hover .fwre-slidenav { opacity: 1; }
/* live: the overlay arrow stays WHITE on hover (never green), rgba(255,255,255,.95) */
#fwre .fwre-slidenav:hover { background: var(--fwre-color-media-control-hover); color: var(--fwre-color-media-control-text); }
#fwre .fwre-slidenav-prev { left: 15px; }
#fwre .fwre-slidenav-next { right: 15px; }
/* live glyph = the 14×24 slidenav polyline, scaled to fit the 34px circle (live pad 5px 10px) */
#fwre .fwre-slidenav svg { width: 14px; height: 24px; max-height: 24px; }
#fwre .fwre-image-counter {
    position: absolute; left: 12px; bottom: 14px; z-index: 2; /* 14px: centers the pill on the shared bottom-row line (owner 2026-07-22) */
    background: var(--fwre-color-media-scrim-strong); color: var(--fwre-color-on-media); font-size: var(--fwre-text-base);
    padding: var(--fwre-space-2) var(--fwre-space-8); border-radius: var(--fwre-radius-sm);
}
#fwre .fwre-property-images .fwre-slidenav { z-index: 2; }
/* main-stage dot-nav: the live UIkit slideshow dot-nav, centered along the bottom */
#fwre .fwre-slideshow-nav {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--fwre-space-8); flex-wrap: wrap;
}
#fwre .fwre-slideshow-nav > li > a {
    display: block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--fwre-color-media-dot); border: 1px solid var(--fwre-color-media-dot-border);
}
#fwre .fwre-slideshow-nav > li.fwre-active > a { background: var(--fwre-color-on-media); }

/* thumb strip: single-row slider (live .fwre-property-slider-items fwk-slider, 4 visible @m) with
   prev/next arrows, NOT a wrapping grid. The viewport scrolls; demo-property.js drives the arrows. */
#fwre .fwre-property-slider-items {
    margin-top: var(--fwre-space-10); position: relative; display: flex; align-items: center; gap: var(--fwre-space-5);
}
#fwre .fwre-thumb-viewport { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
#fwre .fwre-thumb-viewport::-webkit-scrollbar { display: none; }
#fwre .fwre-property-slider-items .fwk-slider-items {
    list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--fwre-space-8);
}
/* the vendored fw-uikit sets .fwk-slider-items>*{flex:none} (flagged important), flex:none respects an
   explicit WIDTH, so the 4-visible sizing must be width-based, not flex-basis (a property with no
   resized med_ variants serves the full image and a basis-only rule blows past 25%; caught R9). */
#fwre .fwre-thumb {
    width: calc(25% - .3375rem); min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--fwre-radius-sm); overflow: hidden;
    cursor: pointer; border: 2px solid transparent; opacity: .82; transition: opacity .12s, border-color .12s;
}
#fwre .fwre-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fwre .fwre-thumb:hover { opacity: 1; }
#fwre .fwre-thumb.is-active { border-color: var(--fwre-color-primary); opacity: 1; }
#fwre .fwre-thumbnav {
    /* live thumb-slider arrows: 34×34 box, 14×24 slidenav polyline, ink #323232 */
    flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    color: var(--fwre-color-text); text-decoration: none; opacity: .7; transition: opacity var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-thumbnav:hover { opacity: 1; }
#fwre .fwre-thumbnav svg { width: 14px; height: 24px; }

/* media-tab header: live fwk-tab "Photo (N)" above the gallery stage */
/* live media tabs = grey-fill PILL family (fwre-design-styles.css:478-500, 588-604):
   12x20 padding, 15px/500 capitalize black, 5px top radius, grey-light fill on hover/active,
   plus the 3px teal ::before bar along the bottom of the active tab. */
#fwre .fwre-media-tabs {
    list-style: none; margin: 0 0 var(--fwre-space-12); padding: 0; display: flex; gap: var(--fwre-space-2);
}
#fwre .fwre-media-tabs > li > a {
    display: block; padding: var(--fwre-space-12) var(--fwre-space-20); color: var(--fwre-color-text); text-decoration: none;
    text-transform: capitalize; font-size: var(--fwre-text-lg); font-weight: var(--fwre-weight-medium); line-height: 28px;
    border-radius: 5px 5px 0 0; position: relative; transition: background .2s ease-in-out;
}
#fwre .fwre-media-tabs > li > a:hover,
#fwre .fwre-media-tabs > li.fwk-active > a { background: var(--fwre-color-surface-muted); }
#fwre .fwre-media-tabs > li > a::before {
    content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: -1.5px;
    background: var(--fwre-color-primary); border-radius: 3px; opacity: 0; transition: opacity .15s;
}
#fwre .fwre-media-tabs > li.fwk-active > a::before { opacity: 1; }

/* Compact tile (owner request 2026-07-22, deviation from live's bare-text line): categories/types
   render as muted pill tags - grey, distinct from the green open-house fwk-label badge. */
#fwre .fwre-item-categories { margin-top: var(--fwre-space-8); display: flex; flex-wrap: wrap; gap: var(--fwre-space-6); }
/* Doubled class out-ranks design-theme's `#fwre .fwk-label.fwk-label` badge pill (same trick, ours
   is one class more specific) - else the status-badge height/colors apply to these meta tags. */
#fwre .fwre-item-categories .fwre-item-cat-tag.fwre-item-cat-tag {
    background: var(--fwre-color-surface-muted); color: var(--fwre-color-text-muted);
    height: auto; padding: var(--fwre-space-2) var(--fwre-space-10); border-radius: var(--fwre-radius-pill);
    font-size: var(--fwre-text-sm); line-height: var(--fwre-lh-sm);
    font-weight: var(--fwre-weight-medium); text-transform: none;
}

/* specification */
#fwre .fwre-property-section-header {
    font-size: var(--fwre-text-4xl); font-weight: var(--fwre-weight-medium); line-height: 1.15; margin: 0 0 var(--fwre-space-12); /* live fwre-design-styles */
    display: inline-block;
}
/* A stacked spec section (Costs, the rental "Leasing Terms" contribution, any add-on's own)
   needs air above its header - .fwre-property-section-header carries margin-bottom only, so
   two sections in a row would butt the second heading against the first table. */
#fwre .fwre-specification { margin-top: var(--fwre-space-20); }
#fwre .fwre-spec-group { margin-bottom: var(--fwre-space-20); }
#fwre .fwre-spec-group-title { font-size: var(--fwre-text-base); text-transform: uppercase; letter-spacing: .05em; color: var(--fwre-color-primary); margin: 0 0 var(--fwre-space-6); }
#fwre .fwre-spec-table { width: 100%; border-collapse: collapse; }
#fwre .fwre-spec-table td { padding: var(--fwre-space-6) var(--fwre-space-10); border-bottom: 1px solid var(--fwre-color-border); font-size: var(--fwre-text-lg); }
#fwre .fwre-spec-table tr:nth-child(odd) { background: var(--fwre-color-surface-hover); }
#fwre .fwre-spec-name { color: var(--fwre-color-text-muted); width: 45%; }
#fwre .fwre-spec-value { color: var(--fwre-color-text); font-weight: var(--fwre-weight-semibold); }
/* Round 25 paired layout: label+value inline inside each half-width cell (the old
   td-based width:45% does not apply to the inline spans). */
#fwre .fwre-spec-table-paired td.fwre-spec-pair { width: 50%; }
#fwre .fwre-spec-table-paired .fwre-spec-name { width: auto; }

#fwre .fwre-property-description-status { font-size: var(--fwre-text-base); margin-bottom: var(--fwre-space-8); }
#fwre .fwre-property-description-body,
#fwre .fwre-property-description-text { color: var(--fwre-color-text); line-height: 1.6; }

/* ============================================================
 * Session C: property DETAIL layout (live agency item parity)
 * ============================================================ */
#fwre .fwre-property-head { margin-bottom: var(--fwre-space-20); }
#fwre .fwre-property-title { margin: 0 0 var(--fwre-space-3); color: var(--fwre-color-text); }
#fwre .fwre-listing-toolbar { display: flex; flex-wrap: wrap; gap: var(--fwre-space-8); align-items: center; }
#fwre .fwre-property-info { min-width: 0; }
#fwre .fwre-property-panel {
    /* live fwre-design-styles.css:543-547: square corners, NO border, shadow only */
    background: var(--fwre-color-surface);
    padding: 25px var(--fwre-space-30); /* 25px: hold, off-scale (decisions r2) */ box-shadow: var(--fwre-shadow-sm); margin-top: var(--fwre-space-30);
}
#fwre .fwre-property-summary .fwre-item-icons { color: var(--fwre-color-text); }
#fwre .fwre-property-summary .fwre-list-item-text a { color: var(--fwre-color-primary); text-decoration: none; font-weight: var(--fwre-weight-semibold); }
/* body sections: native <details> accordion (no JS dep) */
#fwre .fwre-property-body { margin-top: 1.4rem; /* hold: off-scale (decisions r2) */ }
#fwre .fwre-acc-item {
    border: 1px solid var(--fwre-color-border); border-radius: var(--fwre-radius-card);
    margin-bottom: var(--fwre-space-12); background: var(--fwre-color-surface); overflow: hidden;
}
/* Official reference accordion: the OPEN section's header bar is the product teal with white
   text + an up chevron; collapsed bars stay white with a down chevron. */
#fwre details[open] > .fwre-acc-title { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); }
#fwre details[open] > .fwre-acc-title::after { color: var(--fwre-color-on-primary); transform: rotate(-90deg); }
#fwre .fwre-acc-title {
    cursor: pointer; list-style: none; padding: var(--fwre-space-15) var(--fwre-space-18); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text);
    /* Round 25: reference bars are ~54px with ~18px sentence-case titles (was 12px/48px). */
    font-size: var(--fwre-text-2xl); line-height: var(--fwre-lh-2xl); text-transform: none;
    display: flex; align-items: center; justify-content: space-between;
}
/* Round 25: the reference accordion ORDER (Details, Description, Features, Valuation &
   Investment, Monthly Costs, PDF brochure, Floor/room plan, Location, Open House, Custom).
   PDF/Location/Open House arrive on ONE body-panels event bus (brochure -> map ->
   openhours) that cannot interleave with the core floor-plans section server-side -
   flex order on the body does the interleave presentationally. Anchors/scripts have no
   box, so their default order 0 is harmless. */
#fwre .fwre-property-body { display: flex; flex-direction: column; }
#fwre .fwre-property-body > #fwre-details { order: 1; }
#fwre .fwre-property-body > #fwre-description { order: 2; }
#fwre .fwre-property-body > #fwre-amenities-sec { order: 3; }
#fwre .fwre-property-body > #fwre-investment-sec { order: 4; }
#fwre .fwre-property-body > #fwre-monthly-costs-sec { order: 5; }
#fwre .fwre-property-body > #fwre-brochure,
#fwre .fwre-property-body > #fwre-brochure-modal { order: 6; }
#fwre .fwre-property-body > #fwre-floorplans-sec { order: 7; }
#fwre .fwre-property-body > #fwre-map-section { order: 8; }
#fwre .fwre-property-body > #fwre-openhours-section { order: 9; }
#fwre .fwre-property-body > #fwre-schools-section { order: 10; }
#fwre .fwre-property-body > #fwre-customfields-tab { order: 11; }
/* the mortgage calculator when its config card puts it BELOW the property (live's
   one_property_position = bottom) - last, after the custom tabs. */
#fwre .fwre-property-body > #fwre-mortgage-section { order: 12; }
/* Round 25: the reference sidebar puts the compare row BELOW Send Message. */
#fwre .fwre-property-summary { display: flex; flex-direction: column; }
#fwre .fwre-property-summary > div:has(.fwre-item-compare) { order: 99; }
#fwre .fwre-acc-title::-webkit-details-marker { display: none; }
#fwre .fwre-acc-title::after { content: '\203A'; color: var(--fwre-color-primary); font-size: var(--fwre-text-3xl); line-height: 1; transform: rotate(90deg); transition: transform var(--fwre-fast) var(--fwre-ease); }
#fwre .fwre-acc-content { padding: var(--fwre-space-14) var(--fwre-space-18) var(--fwre-space-18); }
#fwre .fwre-plain-sections .fwre-property-section { margin-bottom: 0; } /* spacing = the panel's live margin-top:30px */
/* List mode (no tabs, no accordion): a panel's own title takes its line, and a heading under it (Details,
   then Specification) reads as a subheading. Both were inline blocks, so they ran together as
   "Details Specification" (spec 011 phase 9). */
#fwre .fwre-plain-sections .fwre-property-panel > .fwre-property-section-header:first-child { display: block; }
#fwre .fwre-plain-sections .fwre-property-section-header + .fwre-property-section-header { display: block; font-size: var(--fwre-text-2xl); }
/* "Information grouping" = Tabs (display_tabs 1, incidental-findings #271): a fwk-tab strip over a
   fwk-switcher of bare panels, live agency item/main.php:249-330. UIKit hides the inactive panels
   (.fwk-switcher > :not(.fwk-active)) and the strip inherits the media-tab skin further down, so all
   this owes is the seam between the strip and the panel it sits on. The tab ORDER is not CSS here -
   the panels move inside the switcher, out of reach of the flex `order:` rules above, so tab mode is
   sorted server-side instead (fwre_sections_order() in the design's functions.php). */
#fwre .fwre-property-tabs { margin: var(--fwre-space-20) 0 0; }
#fwre .fwre-tabbed-sections > .fwk-switcher > .fwre-property-section { margin-top: 0; }

/* Search HERO (live menu-274 module id 180): white fwre-search panel over a cover photo */
/* Bare on purpose: .fwre-search-hero is the OUTER wrapper and the #fwre island is its child (minimal.php). */
.fwre-search-hero { position: relative; min-height: 420px; border-radius: 3px; overflow: hidden; }
/* .fwre-search-hero is `display:flex` further down (the AU showcase bar shares the class), so the panel
   must claim the row - without flex-basis it shrinks to its content and the field grid collapses. */
#fwre.fwre-search-hero-panel { position: relative; flex: 1 1 auto; margin: var(--fwre-space-40); max-width: 640px; }

/* Agent MODULE card: the directory flip-card rendered single, at live module width */
#fwre.fwre-mod-agent-card { max-width: 300px; }

/* agent panel (module/special-page card, the DIRECTORY card is the live port further down) */
#fwre .fwre-agent-panel {
    background: var(--fwre-color-surface); border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-18); box-shadow: var(--fwre-shadow-sm); height: 100%;
}
#fwre .fwre-agent-name { font-size: var(--fwre-text-2xl); font-weight: var(--fwre-weight-bold); margin: 0 0 var(--fwre-space-2); color: var(--fwre-color-text); }
#fwre .fwre-property-section-header,
#fwre .fwre-item-header-title { color: var(--fwre-color-text); }
#fwre .fwre-agent-company { font-size: var(--fwre-text-md); margin-bottom: var(--fwre-space-12); }
#fwre .fwre-agent-contacts { list-style: none; margin: 0; padding: 0; font-size: var(--fwre-text-md); }
#fwre .fwre-agent-contacts li { padding: var(--fwre-space-4) 0; display: flex; align-items: baseline; gap: var(--fwre-space-6); }
#fwre .fwre-agent-contacts [fwk-icon] { color: var(--fwre-color-primary); }
#fwre .fwre-agent-contact-label { color: var(--fwre-color-text-muted); }
#fwre .fwre-agent-listings { margin-top: var(--fwre-space-12); padding-top: var(--fwre-space-12); border-top: 1px solid var(--fwre-color-border); }

/* ============================================================
 * P-C: Listing layout variants (grid / slideshow / map / YOOTheme)
 * ============================================================ */
/* Grid */
#fwre .fwre-grid-card { overflow: hidden; border-radius: var(--fwre-radius-card); transition: transform var(--fwre-fast) var(--fwre-ease), box-shadow var(--fwre-fast) var(--fwre-ease); }
#fwre .fwre-grid-card:hover { transform: translateY(-3px); box-shadow: var(--fwre-shadow); }
#fwre .fwre-grid-media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
#fwre .fwre-grid-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fwre .fwre-grid-price { position: absolute; left: 10px; bottom: 10px; background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); font-weight: var(--fwre-weight-bold); font-size: var(--fwre-text-lg); padding: var(--fwre-space-4) var(--fwre-space-10); border-radius: var(--fwre-radius-sm); }
#fwre .fwre-grid-count { position: absolute; right: 10px; top: 10px; background: var(--fwre-color-media-scrim-strong); color: var(--fwre-color-on-media); font-size: var(--fwre-text-sm); padding: var(--fwre-space-2) var(--fwre-space-8); border-radius: var(--fwre-radius-sm); }
#fwre .fwre-grid-body { padding: var(--fwre-space-14) var(--fwre-space-16) var(--fwre-space-18); }
#fwre .fwre-grid-body .fwre-item-title a { color: var(--fwre-color-text); text-decoration: none; }
#fwre .fwre-grid-body .fwre-item-icons { color: var(--fwre-color-text-muted); font-size: var(--fwre-text-md); gap: var(--fwre-space-6); }

/* Slideshow, live slideshowview: one property per slide (info panel + image carousel) + thumb strip.
   Rotation arrows sit OUTSIDE the slide stage (live fwk-position-center-*-out = right/left:100%), so the
   view reserves side gutters and the stage stops clipping; the whole view is a live shadow card. */
#fwre .fwre-slideshow-view {
    padding: var(--fwre-space-20) 44px; /* 44px: hold, off-scale (decisions r2) */                          /* live .fwre-slideshow-view padding + gutters for the -out arrows */
    box-shadow: var(--fwre-shadow-sm);            /* live --fwre-shadow-small */
    border-radius: var(--fwre-radius-card);
}
/* Round 39: chrome-less stage - no border, no item padding; the info card + big image
   sit flush and carry their own chrome. */
#fwre .fwre-slideshow-main {
    position: relative; border-radius: var(--fwre-radius-card); overflow: visible;
    background: var(--fwre-color-surface);
}
#fwre .fwre-slideshow-slides { list-style: none; margin: 0; padding: 0; position: relative; }
#fwre .fwre-slideshow-slide { display: none; }
#fwre .fwre-slideshow-slide.is-active { display: block; }
#fwre .fwre-slideshow-item { display: flex; gap: var(--fwre-space-20); padding: 0; align-items: stretch; margin: 0; }
#fwre .fwre-slideshow-info-col { flex: 0 0 33%; min-width: 0; }
/* Round 38 (owner 2026-07-22): the side card IS the vertical card body - white card chrome,
   flex column with the agent/footer pinned to the bottom, boxed icons, tag pills. The old
   grey-light card + grey-dark header band + plain-glyph overrides are gone; statuses + the
   Open badge overlay the BIG image (dispatched in card_media, which renders it since round 40). */
#fwre .fwre-slideshow-info-col { display: flex; } /* the card stretches to the row height via flex, never a % of the media-driven 360 (that overflowed the stage) */
#fwre .fwre-slideshow-info-col .fwre-item-info {
    background: var(--fwre-color-surface); border-radius: var(--fwre-radius); padding: var(--fwre-space-20); overflow: hidden;
    box-shadow: var(--fwre-shadow-sm); display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin-top: 0 !important; /* vendor fwk-margin-small-top is !important */
}
/* the vertical-card body rules, slideshow scope (mirrors the .fwre-grid-view set below; the three
   important margins answer UIkit's important fwk-margin-small-top, see that set) */
#fwre .fwre-slideshow-info-col .fwre-item-info > .fwre-agent-trigger { margin-top: auto !important; padding-top: 0; }
#fwre .fwre-slideshow-info-col .fwre-item-info:not(:has(> .fwre-agent-trigger)) > .fwre-item-footer { margin-top: auto !important; padding-top: var(--fwre-space-10); }
#fwre .fwre-slideshow-info-col .fwre-item-info .fwre-item-icons { margin-bottom: 0; }
#fwre .fwre-slideshow-info-col .fwre-agent-trigger .fwre-item-agent { margin-top: var(--fwre-space-10); }
#fwre .fwre-slideshow-info-col .fwre-item-price .fwk-h2 { display: inline-block; line-height: 1.15; }
/* Round 40: the big image IS the card slider (partials/card_media) - card behaviour
   verbatim (hover arrows, hover 1/N inside the count row, no dotnav). The wrapper height
   rule sizes card_media's fwk-position-relative div to the stage (the retired
   slideshow_media carried fwk-height-1-1; precedent: the list-item rule above). */
#fwre .fwre-slideshow-media-col { flex: 1 1 auto; min-width: 0; }
#fwre .fwre-slideshow-media-col .fwre-item-media { height: 100%; position: relative; border-radius: var(--fwre-radius-card); overflow: hidden; min-height: 360px; }
#fwre .fwre-slideshow-media-col .fwre-item-media > .fwk-position-relative { height: 100%; }
#fwre .fwre-slideshow-media-col .fwre-item-slideshow { position: absolute; inset: 0; aspect-ratio: auto; } /* the base 4/3 ratio would out-rank the bottom:0 constraint (width-derived 563px box, clipped) and throw bottom-anchored overlays off the visible image */
#fwre .fwre-slideshow-media-col .fwk-slideshow-items { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
#fwre .fwre-slideshow-media-col .fwre-item-slide { position: absolute; inset: 0; display: none; }
#fwre .fwre-slideshow-media-col .fwre-item-slide.is-active { display: block; }
#fwre .fwre-slideshow-media-col .fwre-item-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* outer property prev/next (positioned outside the stage, live fwk-position-center-*-out) */
#fwre .fwre-slideshow-out-prev, #fwre .fwre-slideshow-out-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    padding: var(--fwre-space-30); /* live .fwk-overlay click-target padding: no visible box/circle/shadow */
    color: var(--fwre-color-slide-arrow); background: none; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
}
#fwre .fwre-slideshow-out-prev:hover, #fwre .fwre-slideshow-out-next:hover { color: var(--fwre-color-slide-arrow-hover); background: none; }
/* OUTSIDE the slide stage: live fwk-position-center-left-out{right:100%} / -right-out{left:100%} */
#fwre .fwre-slideshow-out-prev { right: 100%; margin-right: var(--fwre-space-4); }
#fwre .fwre-slideshow-out-next { left: 100%; margin-left: var(--fwre-space-4); }
/* property-thumbnail strip */
#fwre .fwre-slideshow-thumbs { margin-top: var(--fwre-space-12); }
#fwre .fwre-slideshow-thumb-items {
    /* 3 rich tiles visible (price + address + badges, trimmed grid tile) + horizontal scroll.
       auto-flow columns must be sized like the visible track: a bare 1fr auto-column made
       ALL items share the container width (37 slivers instead of N thumbs + overflow). */
    --fwre-thumb-cols: 3;
    list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--fwre-thumb-cols) - 1) * var(--fwre-space-8)) / var(--fwre-thumb-cols));
    gap: var(--fwre-space-8); overflow-x: auto; scroll-snap-type: x mandatory;
}
@media (max-width: 959px)  { #fwre .fwre-slideshow-thumb-items { --fwre-thumb-cols: 2; } }
@media (max-width: 639px)  { #fwre .fwre-slideshow-thumb-items { --fwre-thumb-cols: 1; } }
/* Round 38 (owner 2026-07-22): thumbs read as TRIMMED VERTICAL CARDS - full-color card chrome
   (white, card radius, shadow), image on top, price/address body under it; the old whole-card
   .52 dimming (the "modified image" look) is gone, the green border stays the active signal. */
/* Round 40: default cards carry a light grey border - the strip's overflow-x trims the
   box-shadow, so shadow alone blurred into the white background; active swaps it green. */
#fwre .fwre-slideshow-thumb {
    border-radius: var(--fwre-radius); overflow: hidden; cursor: pointer; background: var(--fwre-color-surface);
    box-shadow: var(--fwre-shadow-sm);
    border: 2px solid var(--fwre-color-border); transition: border-color .12s; scroll-snap-align: start;
}
/* Round 40: the thumb image is the SAME card slider (card_media) at a fixed 220px height;
   media corners top-only (vertical-card idiom). */
#fwre .fwre-slideshow-thumb .fwre-item-media { border-radius: var(--fwre-radius) var(--fwre-radius) 0 0; }
#fwre .fwre-slideshow-thumb .fwre-item-slideshow { aspect-ratio: auto; height: 220px; }
#fwre .fwre-slideshow-thumb-info { padding: var(--fwre-space-8) var(--fwre-space-10); text-align: left; }
#fwre .fwre-slideshow-thumb-price { color: var(--fwre-color-primary); font-size: var(--fwre-text-md); font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-slideshow-thumb-address { font-size: var(--fwre-text-sm); color: var(--fwre-color-text); }
#fwre .fwre-slideshow-thumb.fwre-active { border-color: var(--fwre-color-primary); }

/* ── Slideshow View settings (Configuration → Add-ons) ─────────────────────────────────────────
   slideshow_height / _thumb / _sizing / _position, delivered by partials/slideshow.php as data
   attributes (demo-property.js turns height and thumb into --fwre-ss-h / --fwre-ss-thumb), a sizing
   class and a position class; the view carries no inline style. All five were saved and read by nothing until 2026-07-29
   (incidental-findings #46): the card configured air. Fallbacks repeat the shipped look, so a site
   that never touched them renders exactly as before.
   `position: none` drops the strip in the template, so it needs no rule here. */
#fwre .fwre-slideshow-media-col .fwre-item-media { min-height: min(var(--fwre-ss-h, 800px), 70vh); }
#fwre .fwre-slideshow-thumb .fwre-item-slideshow { height: calc(var(--fwre-ss-thumb, 80px) * 2.75); }
/* slideshow_sizing: fill (cover, the default) vs fit (contain, the whole photo, letterboxed). */
#fwre.fwre-ss-fit-contain,
#fwre .fwre-ss-fit-contain { --fwre-ss-fit: contain; }
#fwre .fwre-slideshow-view .fwre-item-slideshow img,
#fwre .fwre-slideshow-view .fwre-item-media img { object-fit: var(--fwre-ss-fit, cover); }

/* slideshow_position: the thumbnail strip beside the stage instead of under it. The strip becomes a
   single scrolling COLUMN, so it keeps its own scrollbar rather than stretching the page. */
#fwre .fwre-ss-thumbs-left,
#fwre .fwre-ss-thumbs-right { display: flex; gap: var(--fwre-space-12); align-items: flex-start; }
#fwre .fwre-ss-thumbs-left .fwre-slideshow-main,
#fwre .fwre-ss-thumbs-right .fwre-slideshow-main { flex: 1 1 auto; min-width: 0; }
#fwre .fwre-ss-thumbs-left .fwre-slideshow-thumbs,
#fwre .fwre-ss-thumbs-right .fwre-slideshow-thumbs {
    flex: 0 0 calc(var(--fwre-ss-thumb, 80px) * 3); margin-top: 0;
    max-height: min(var(--fwre-ss-h, 800px), 70vh); overflow-y: auto;
}
#fwre .fwre-ss-thumbs-left .fwre-slideshow-thumb-items,
#fwre .fwre-ss-thumbs-right .fwre-slideshow-thumb-items {
    grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: y mandatory;
}
#fwre .fwre-ss-thumbs-left { flex-direction: row-reverse; }
@media (max-width: 959px) {
    /* Below the tablet break the side strip would leave the stage unusably narrow - fall back to the
       stacked layout, which is what every other listing layout does at this width. */
    #fwre .fwre-ss-thumbs-left,
    #fwre .fwre-ss-thumbs-right { display: block; }
    #fwre .fwre-ss-thumbs-left .fwre-slideshow-thumbs,
    #fwre .fwre-ss-thumbs-right .fwre-slideshow-thumbs { max-height: none; overflow-y: visible; margin-top: var(--fwre-space-12); }
    #fwre .fwre-ss-thumbs-left .fwre-slideshow-thumb-items,
    #fwre .fwre-ss-thumbs-right .fwre-slideshow-thumb-items { grid-auto-flow: column; overflow-x: auto; }
}
#fwre .fwre-slideshow-note { font-size: var(--fwre-text-md); }
@media (max-width: 959px) {
    #fwre .fwre-slideshow-item { flex-direction: column; }
    #fwre .fwre-slideshow-info-col, #fwre .fwre-slideshow-media-col { flex: 1 1 auto; }
    #fwre .fwre-slideshow-media-col .fwre-item-media { min-height: 240px; }
    /* Stacked, the media box has no height of its own (a column flex item, sized by min-height), so
       the photo wrapper's `height: 100%` came to 0 and the stage showed an empty white box with only
       the status pill in it. The wrapper takes the box's minimum height instead (its position is the
       framework's `fwk-position-relative`, which the framework forces, so it stays in flow). */
    #fwre .fwre-slideshow-media-col .fwre-item-media > .fwk-position-relative { height: auto; min-height: inherit; }
    /* no room for outside gutters on narrow screens, pull the arrows just inside the edges */
    #fwre .fwre-slideshow-view { padding: var(--fwre-space-16) var(--fwre-space-8); }
    #fwre .fwre-slideshow-out-prev { right: auto; left: 8px; margin: 0; }
    #fwre .fwre-slideshow-out-next { left: auto; right: 8px; margin: 0; }
    /* Stacked, the item's middle is the info card's foot, so the arrows sat over View Details. They
       centre on the photo instead, the last 240px of the item (bottom 80px + half the 80px tap box),
       and take the white glyph the card arrows use over a photo. */
    #fwre .fwre-slideshow-out-prev, #fwre .fwre-slideshow-out-next { top: auto; bottom: 80px; transform: none; color: var(--fwre-color-on-media-soft); }
    #fwre .fwre-slideshow-out-prev:hover, #fwre .fwre-slideshow-out-next:hover { color: var(--fwre-color-on-media); }
}

/* Map */
#fwre .fwre-map-static { padding: 0; overflow: hidden; }
#fwre .fwre-map-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fwre-space-8); min-height: 240px; background: var(--fwre-color-surface-muted); border: 1px dashed var(--fwre-color-border-strong); color: var(--fwre-color-primary); }
#fwre .fwre-map-canvas [fwk-icon] { font-size: 2.4rem; /* hold: off-scale (decisions r2) */ }
#fwre .fwre-map-pin-count { color: var(--fwre-color-text); font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-map-note { padding: var(--fwre-space-12) var(--fwre-space-16); font-size: var(--fwre-text-md); }

/* MAP view: live split layout (left info panel + map), get_listing_map.php:51-55. The panel is
   hidden until a marker is clicked, then shows the clicked property card(s) stacked.
   Round 23: flex-wrap MUST be nowrap - the markup also carries fwk-grid (flex-wrap: wrap),
   and the map's auto flex-basis overflowed the line, wrapping the map to a full-width row
   BELOW the column (the broken-split bug). Basis 0 + min-width 0 keeps it beside the column
   regardless of the Google-injected content. Items column height follows the map (~1000px
   reference proportion, 1113/1600 in the PNG). */
#fwre .fwre-map-view { display: flex; flex-wrap: nowrap; gap: var(--fwre-space-12); align-items: stretch; }
#fwre .fwre-map-view-map { flex: 1 1 0; min-width: 0; min-height: 460px; border-radius: var(--fwre-radius-card); overflow: hidden; }
#fwre .fwre-map-view-map-items { flex: 0 0 33%; max-width: 360px; overflow-y: auto; max-height: 1000px; }
#fwre .fwre-map-view-map-items[hidden] { display: none; }
/* fit=viewport (listing map page): one JS-set var sizes map AND panel; a taller card scrolls inside the panel */
#fwre .fwre-map-fit .fwre-map-view-map { height: var(--fwre-map-h, 620px); }
#fwre .fwre-map-fit .fwre-map-view-map-items { max-height: var(--fwre-map-h, 620px); }
@media (max-width: 959px) {
    /* column mode: flex-basis 0 would zero the height (main axis) - let the var height rule */
    #fwre .fwre-map-fit .fwre-map-view-map { flex: 0 0 auto; }
}
/* The panel's tiles are content-height like the reference (the grid view's height:100%
   would stretch one tile to the full 1000px column and open a gap mid-card). */
#fwre .fwre-map-view-map-items .fwre-item { height: auto; }
@media (max-width: 959px) {
    #fwre .fwre-map-view { flex-direction: column; }
    #fwre .fwre-map-view-map-items { max-width: none; max-height: 320px; }
}
/* Overlay idiom (owner-requested 2026-07-22, official-design-parity.md): the map spans the
   full content width; the selected-property card floats top-left ON TOP of it. The panel is
   fwk-position-top-left + fwk-position-small in the markup (kit inset ~15px); these rules
   retire the flex split and keep the floating card scrollable within the map's height. */
#fwre .fwre-map-overlay { display: block; }
#fwre .fwre-map-overlay .fwre-map-view-map { width: 100%; }
#fwre .fwre-map-overlay .fwre-map-view-map-items {
    flex: none;
    top: 60px; /* clear the Google Map/Satellite type switch at the map's top-left */
    width: 360px;
    max-width: calc(100% - 30px);
    max-height: calc(var(--fwre-map-h, 620px) - 90px); /* 60px offset + 15px inset both ends */
    z-index: 2;
}
/* shadow per card - the panel renders full grid tiles (.fwre-item, round 23) with
   .fwre-map-card as the no-tiles fallback; the scroll container itself is transparent,
   so a container shadow would outline the empty space after the last card's margin */
#fwre .fwre-map-overlay .fwre-map-view-map-items .fwre-item,
#fwre .fwre-map-overlay .fwre-map-view-map-items .fwre-map-card { box-shadow: var(--fwre-shadow-float); }
/* Side property card: mirrors listing.table_item.php fields (image / price / address / beds-baths / title) */
#fwre .fwre-map-card { background: var(--fwre-color-surface); border: 1px solid var(--fwre-color-border); border-radius: var(--fwre-radius-card); overflow: hidden; margin-bottom: var(--fwre-space-12); }
#fwre .fwre-map-card .fwre-item-media img { width: 100%; height: 250px; object-fit: cover; display: block; } /* live panel card media is 250px tall */
#fwre .fwre-map-card .fwre-item-info { padding: var(--fwre-space-12) var(--fwre-space-14); }
#fwre .fwre-map-card .fwre-item-price .fwre-text-green { color: var(--fwre-color-primary); }
#fwre .fwre-map-card .fwre-item-address { font-size: var(--fwre-text-md); margin-top: var(--fwre-space-4); }
#fwre .fwre-map-card .fwre-item-title a { color: var(--fwre-color-text); }
#fwre .fwre-map-card .fwre-read-more { margin-top: var(--fwre-space-8); }

/* MAP view, split (spec 011 FR-007, owner 20 Oct 2026): the results as the listing's own tiles beside
   the map. Below 960px the map sits on top at about half a phone screen and the tiles follow as the
   grid below. From 960px the tiles scroll in a column on the left and
   the map fills the right, both one viewport-tall row (--fwre-map-h, demo-map.js), so nothing depends
   on a sticky position a host theme's overflow could break. The markup puts the map first. */
#fwre .fwre-map-split { display: flex; flex-direction: column; gap: var(--fwre-space-20); }
#fwre .fwre-map-split .fwre-map-view-map { flex: none; width: 100%; min-height: 0; height: clamp(320px, 55vh, 480px); }
/* The result grid counts its columns by its own width (spec 011 sweep, 20 Oct 2026): a tile under
   320px could not hold View Details and its options on one line (WordPress at 960 made three 275px
   tiles), so the grid fits as many 320px tiles as its width takes, one on a phone. */
#fwre .fwre-map-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--fwre-space-20); }
@media (min-width: 960px) {
    #fwre .fwre-map-split {
        display: grid;
        grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr);
        grid-template-areas: "list map";
        height: var(--fwre-map-h, 620px);
    }
    #fwre .fwre-map-split-map { grid-area: map; min-height: 0; }
    #fwre .fwre-map-split .fwre-map-view-map { height: 100%; }
    #fwre .fwre-map-split-list {
        grid-area: list;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--fwre-space-2) var(--fwre-space-8) var(--fwre-space-2) var(--fwre-space-2);
    }
    #fwre .fwre-map-split-list > * { flex: none; }
    /* a column tile is wider than a grid tile: a wide photo keeps two tiles in view */
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwre-item-media-link,
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwre-item-slideshow { aspect-ratio: 16 / 9; }
}
/* FR-008: the tile whose pin is selected, and the pin's own control on it */
#fwre .fwre-map-results .fwre-item.fwre-map-item-hot { outline: 2px solid var(--fwre-color-primary); outline-offset: 0; }
/* (its bare-icon look and touch size are with the other card options in design-theme.css) */
#fwre .fwre-item-options .fwre-map-locate svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-options .fwre-map-locate:hover svg,
#fwre .fwre-map-item-hot .fwre-item-options .fwre-map-locate svg { color: var(--fwre-color-primary); }
/* The column's tiles as rows (spec 011 phase 7): from 440px of column (a 1280 page gives it about
   480px) the photo sits beside the details, so three homes show in the column where a stacked tile
   showed one and a half. The column is the `fwre-map-list` container, so a host's narrower content
   keeps the stacked tile. View Details, the options and "Show on map" stay in the tile's footer. */
@media (min-width: 960px) {
    #fwre .fwre-map-split-list { container: fwre-map-list / inline-size; }
}
@container fwre-map-list (min-width: 440px) {
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item { flex-direction: row; align-items: stretch; }
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item > .fwre-item-media {
        flex: 0 0 38%;
        min-height: 200px;
        border-radius: var(--fwre-radius) 0 0 var(--fwre-radius);
    }
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwre-item-media > .fwk-position-relative,
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwre-item-media-link,
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwre-item-slideshow { height: 100%; aspect-ratio: auto; }
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item .fwk-slideshow-items { height: 100%; }
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item > .fwre-item-info { min-width: 0; padding: var(--fwre-space-12) var(--fwre-space-14); }
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item-price .fwk-h2 { font-size: var(--fwre-text-2xl); }
    /* the category tags and the agent strip wait on the property page; the row keeps price, title,
       address, facts and the actions */
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item-info > .fwre-item-categories,
    #fwre .fwre-map-split-list.fwre-grid-view .fwre-item-info > .fwre-agent-trigger { display: none; }
}

/* The phone's map and list switch (spec 011 FR-020): one 44px pill fixed at the bottom centre while the
   split view is on screen (`fwre-map-switch-on`, demo-map.js), naming where it goes; from 960px the
   map and the list sit side by side and it never shows. */
#fwre .fwre-map-switch { display: none; }
@media (max-width: 959px) {
    #fwre .fwre-map-switch.fwre-map-switch-on {
        display: block;
        position: fixed;
        left: 50%;
        bottom: calc(var(--fwre-space-16) + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 980;
    }
    /* While the map's lower edge is in the pill's band (demo-map.js), the pill rises over the map,
       clear of the attribution row along the map's foot. */
    #fwre .fwre-map-switch.fwre-map-switch-on.fwre-map-switch-lift {
        bottom: calc(var(--fwre-space-16) + 80px + env(safe-area-inset-bottom, 0px));
    }
}
#fwre .fwre-map-switch .fwre-map-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fwre-space-8);
    box-sizing: border-box;
    height: 44px;
    line-height: 42px;
    padding: 0 var(--fwre-space-20);
    border-radius: var(--fwre-radius-pill);
    box-shadow: var(--fwre-shadow-float);
    font-weight: var(--fwre-weight-semibold);
    white-space: nowrap;
}
#fwre .fwre-map-switch[data-fwre-map-switch-show="list"] .fwre-map-switch-to-map,
#fwre .fwre-map-switch[data-fwre-map-switch-show="map"] .fwre-map-switch-to-list { display: none; }
/* the list scrolls to just under the page's top edge, not flush against it */
#fwre .fwre-map-split-list { scroll-margin-top: var(--fwre-space-16); }

/* YOOTheme skin + note */
#fwre .fwre-yoo-note [fwk-icon] { color: var(--fwre-color-primary); }

/* ============================================================
 * P-D: Special Pages (agent profile / compare / manager / favourites / saved search)
 * ============================================================ */
#fwre .fwre-agent-hero .fwre-agent-name { font-size: var(--fwre-text-4xl); }
#fwre .fwre-agent-hero .fwre-agent-listings { display: inline-flex; align-items: center; gap: var(--fwre-space-6); border: 0; padding: 0; margin-top: var(--fwre-space-10); color: var(--fwre-color-primary); }

#fwre .fwre-compare-scroll { overflow-x: auto; }
#fwre .fwre-compare-table { min-width: 560px; }
/* "striped and lined": row dividers must survive the scoped table resets, th cells included. */
#fwre .fwre-compare-table tr + tr > td,
#fwre .fwre-compare-table tr + tr > th { border-top: 1px solid var(--fwre-color-border-strong); }
#fwre .fwre-compare-table th.fwre-compare-label { text-align: left; color: var(--fwre-color-text-muted); white-space: nowrap; width: 130px; }
#fwre .fwre-compare-table td { vertical-align: top; min-width: 150px; }
#fwre .fwre-compare-img { width: 100%; max-width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fwre-radius-sm); display: block; }
#fwre .fwre-compare-title a { color: var(--fwre-color-text); text-decoration: none; font-weight: var(--fwre-weight-semibold); font-size: var(--fwre-text-md); }
/* the property's location under its name in the header row (design review 19 Oct 2026) */
#fwre .fwre-compare-location { margin: var(--fwre-space-4) 0 var(--fwre-space-8); font-size: var(--fwre-text-sm); }
/* The compare matrix, owned here since it reached the packaged hosts without it: they never load
   the stand's demo-* floor, which was the only place these rules lived (SC-003, 20 Oct 2026).
   Fixed layout + colgroup keeps the property columns equal, so the 4/3 sliders stay one height. */
#fwre .fwre-compare-table { table-layout: fixed; width: 100%; }
#fwre .fwre-compare-table col.fwre-compare-label-col { width: 130px; }
#fwre .fwre-compare-table col.fwre-compare-card-col { width: 280px; }
/* The official matrix reads the width it is given, not the viewport (spec 011 sweep, 20 Oct 2026).
   Beside a host theme's sidebar a 1280 page leaves it about 920px, and three 280px columns behind a
   130px label ran past that into an inner scroll nothing pointed at, cutting the third property. The
   scroll box is the size container: the property columns share what the label column leaves, and
   below 640px of container the rows stack (the `@container fwre-compare` block further down). */
#fwre .fwre-compare-scroll { container: fwre-compare / inline-size; }
#fwre .fwre-compare-table.fwre-compare-stack col.fwre-compare-card-col { width: auto; }
/* one-line title that takes the column the media sets and ellipsizes (the tooltip has the full text) */
#fwre .fwre-compare-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; margin-bottom: var(--fwre-space-6); }
#fwre .fwre-compare-card-cell .fwre-item-media { border-radius: var(--fwre-radius-sm); overflow: hidden; }
/* Remove is a danger OUTLINE (owner call): red text and border on the surface, a light wash on hover. */
#fwre .fwre-compare-remove.fwk-button-danger {
    display: block;
    margin: var(--fwre-space-10) auto 0;
    font-size: var(--fwre-text-sm);
    line-height: 30px;
    background-color: transparent;
    color: var(--fwre-color-accent);
    border: 1px solid var(--fwre-color-accent);
}
#fwre .fwre-compare-remove.fwk-button-danger:hover { background-color: var(--fwre-color-worse-surface); color: var(--fwre-color-accent); }
/* A group's header is a heading row (spec 011 phase 7): the group's name in the text colour over a
   primary rule, so the values below lead the eye. It used to be a full primary band on every group,
   five bands down the table that out-shouted the figures. The doubled class out-ranks the stand
   floor's band (demo-property.css, loaded after this file on the stand). */
#fwre .fwre-compare-table.fwre-compare-table tr.fwre-compare-cat > th {
    text-align: left;
    color: var(--fwre-color-text);
    background-color: var(--fwre-color-surface);
    border-bottom: 2px solid var(--fwre-color-primary);
    font-weight: var(--fwre-weight-bold);
    text-transform: uppercase;
    font-size: var(--fwre-text-xs);
    letter-spacing: .06em;
    padding: var(--fwre-space-20) var(--fwre-space-12) var(--fwre-space-8);
    white-space: nowrap;
}
/* Values rank above their labels (spec 011 FR-021): the figure is 15px in the text colour at medium
   weight, the row's label a 12px muted caption, so a reader scans the numbers, not the names. */
#fwre .fwre-compare-table th.fwre-compare-label {
    font-size: var(--fwre-text-sm);
    font-weight: var(--fwre-weight-normal);
    letter-spacing: .04em;
}
#fwre .fwre-compare-table tr:not(.fwre-compare-cards) > td {
    font-size: var(--fwre-text-lg);
    line-height: var(--fwre-lh-lg);
    font-weight: var(--fwre-weight-medium);
    color: var(--fwre-color-text);
}
/* The better value in a row (demo-property.js marks it) keeps its wash, its weight and the check and
   "Best" that compare.php prints, so it never rests on the colour. The weaker value is not marked:
   red on pink said "worse" by colour alone (WCAG 1.4.1). The doubled class out-ranks the stand
   floor's own loser tint. */
#fwre .fwre-compare-table tr:not(.fwre-compare-cards) > td.fwre-compare-winner { background-color: var(--fwre-color-better-surface); color: var(--fwre-color-better-text); font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-compare-table.fwre-compare-table tr > td.fwre-compare-loser { background-color: transparent; color: var(--fwre-color-text); }
/* the better figure also says so without the colour (WCAG 1.4.1): a check and "Best" after the value,
   which compare.php prints in each winning cell, ties included */
#fwre .fwre-compare-table .fwre-compare-best {
    display: inline-flex;
    align-items: center;
    gap: var(--fwre-space-2);
    margin-left: var(--fwre-space-4);
    color: var(--fwre-color-better-text);
    font-size: var(--fwre-text-xs);
    font-weight: var(--fwre-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    vertical-align: middle;
}
#fwre .fwre-compare-table tr[data-hl-type="lower"] td { font-weight: var(--fwre-weight-semibold); }

#fwre .fwre-manager-table a { color: var(--fwre-color-primary); text-decoration: none; }
/* The manager island = a LIGHT surface (live dashboard is a light page); same H4 fix as
   .fwre-agent-page / .fwre-agents: the #fwre island remaps tokens but paints no bg. */
#fwre .fwre-manager {
    background: var(--fwre-color-surface); color: var(--fwre-color-text);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-26) var(--fwre-space-28);
}
/* live property_list.php inline sizes, moved to classes (canon: no inline CSS) */
#fwre .fwre-pm-cb { width: 20px; }
#fwre .fwre-pm-thumb { height: 120px; width: 180px; }
/* footer row: pagination keeps its centering, per-page limit pinned to the right */
#fwre .fwre-manager-footer { display: flex; align-items: center; gap: var(--fwre-space-12); margin-top: var(--fwre-space-30); }
#fwre .fwre-manager-footer .fwre-manager-footer-pages { flex: 1 1 auto; min-width: 0; }
/* the pagination wrapper carries fwk-margin-medium-top (UIkit's important 40px top margin); only
   another important flag drops it, else the buttons sit 40px below the limit select's vertical center */
#fwre .fwre-manager-footer .fwre-manager-footer-pages .fwre-footer { margin-top: 0 !important; }
#fwre .fwre-manager-footer .fwre-management-qty { flex: 0 0 auto; margin-left: auto; }
#fwre .fwre-manager .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* live #fwre base density (fwre-design-styles.css:18-19 + :82 form) scoped to the manager,
   the live island is 12px-based; the demo's other regions size per component (11 verified
   rounds), so the base lands here only. */
#fwre .fwre-manager { font-size: var(--fwre-text-sm); line-height: 1.5; }
#fwre .fwre-manager form { font-size: var(--fwre-text-sm); }
#fwre .fwre-manager form .fwk-input,
#fwre .fwre-manager form .fwk-select {
    border-radius: 3px; /* fill and border: the form-controls contract below */
}
#fwre .fwre-manager form .fwk-input:focus,
#fwre .fwre-manager form .fwk-select:focus { background-color: var(--fwre-color-surface); border-color: var(--fwre-color-primary); }
/* quick-edit inline inputs (live sets these widths inline; classes per canon) */
#fwre .fwre-manager .fwre-qe-text { width: 100px; }
#fwre .fwre-manager .fwre-qe-date { width: 140px; }

/* filter row on a SINGLE line: controls shrink to fit rather than wrap to a 2nd row */
#fwre .fwre-manager .fwre-management-filters { flex-wrap: nowrap; align-items: center; }
#fwre .fwre-manager .fwre-management-filters > * { min-width: 0; }
/* the search field flexes to absorb slack; everything else holds its intrinsic size */
#fwre .fwre-manager .fwre-management-filters .fwre-management-search { flex: 1 1 auto; min-width: 150px; }
#fwre .fwre-manager .fwre-management-filters .fwre-status-ms { flex: 0 0 auto; }
/* (the chosen-era .fwre-status-ms rules were dead code - the status filter is the shared
   fwre-ms component now, styled by public/css/fwre-ms.css; removed in unification slice 2) */

/* ---- property_edit form (live property_edit.php) ---- */
#fwre .fwre-pm-tabs { display: flex; gap: var(--fwre-space-4); list-style: none; padding: 0; margin: 0 0 var(--fwre-space-18);
    border-bottom: 1px solid var(--fwre-color-border); }
#fwre .fwre-pm-tabs li a { display: block; padding: var(--fwre-space-10) var(--fwre-space-18); color: var(--fwre-color-text-muted);
    text-decoration: none; border-bottom: 2px solid transparent; }
#fwre .fwre-pm-tabs li.is-active a { color: var(--fwre-color-primary); border-bottom-color: var(--fwre-color-primary); font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-pm-pane { display: none; }
#fwre .fwre-pm-pane.is-active { display: block; }
/* masonry card grid (CSS multicol): cards pack with no vertical column gaps,
   mirroring the admin .fwa-cat-cards idiom (demo-admin.css). */
#fwre .fwre-pm-cards { column-count: 2; column-gap: var(--fwre-space-18); }
@media (max-width: 720px) { #fwre .fwre-pm-cards { column-count: 1; } }
#fwre .fwre-pm-cards > div { break-inside: avoid; margin-bottom: var(--fwre-space-18); }
#fwre .fwre-pm-row { margin-bottom: var(--fwre-space-12); gap: var(--fwre-space-10); }
#fwre .fwre-pm-dim { display: flex; align-items: center; gap: var(--fwre-space-6); }
#fwre .fwre-pm-desc { width: 100%; min-height: 160px; }
#fwre .fwre-pm-yesno { display: inline-flex; gap: var(--fwre-space-4); }
/* both options render as bordered buttons (live radioGroup); the active one fills with its
   colour. The island base #fwre .fwk-button gives white bg + the live border treatment. */
#fwre .fwre-pm-yesno label { cursor: pointer; border: 1px solid var(--fwre-color-border); padding: var(--fwre-space-6) var(--fwre-space-18); }
#fwre .fwre-pm-yesno label.is-on.fwre-button-success { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); border-color: var(--fwre-color-primary); }
#fwre .fwre-pm-yesno label.is-on.fwk-button-danger { background: var(--fwre-color-accent); color: var(--fwre-color-on-accent); border-color: var(--fwre-color-accent); }
#fwre .fwre-pm-gallery { display: flex; flex-wrap: wrap; gap: var(--fwre-space-12); }
#fwre .fwre-pm-gallery-item { position: relative; width: 150px; }
#fwre .fwre-pm-gallery-item img { width: 150px; height: 110px; object-fit: cover; border-radius: 3px; display: block; }
#fwre .fwre-pm-gallery-item button { position: absolute; top: 4px; right: 4px; padding: var(--fwre-space-2) var(--fwre-space-6); }
#fwre .fwre-pm-gallery-alt { width: 100%; margin-top: var(--fwre-space-4); padding: var(--fwre-space-2) var(--fwre-space-6); height: auto; font-size: 12px; }
#fwre .fwre-flag-featured { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); }

#fwre .fwre-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--fwre-space-14); }
#fwre .fwre-saved-card { display: flex; flex-direction: column; gap: var(--fwre-space-5); text-decoration: none; transition: transform var(--fwre-fast) var(--fwre-ease), box-shadow var(--fwre-fast) var(--fwre-ease); }
#fwre .fwre-saved-card:hover { transform: translateY(-2px); box-shadow: var(--fwre-shadow); }
#fwre .fwre-saved-name { color: var(--fwre-color-text); display: inline-flex; align-items: center; gap: var(--fwre-space-6); }
#fwre .fwre-saved-name [fwk-icon] { color: var(--fwre-color-primary); }
#fwre .fwre-saved-desc { font-size: var(--fwre-text-md); }

/* ============================================================
 * P-E: Module previews (search / latest / agent / mortgage / layout-anywhere)
 * ============================================================ */
#fwre .fwre-module-stage { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--fwre-space-26); align-items: start; }
#fwre .fwre-module-stage--wide { grid-template-columns: minmax(0, 1fr); }
#fwre .fwre-module-card { overflow: hidden; }
#fwre .fwre-module-bar { display: flex; align-items: center; gap: var(--fwre-space-8); padding: var(--fwre-space-10) var(--fwre-space-16); background: var(--fwre-color-surface-muted); border-bottom: 1px solid var(--fwre-color-border); font-weight: var(--fwre-weight-bold); color: var(--fwre-color-text); }
#fwre .fwre-module-bar [fwk-icon] { color: var(--fwre-color-primary); }
#fwre .fwre-module-about { padding-top: var(--fwre-space-4); }
#fwre .fwre-module-pos { font-size: var(--fwre-text-base); display: flex; gap: var(--fwre-space-6); align-items: baseline; margin-top: var(--fwre-space-12); }
#fwre .fwre-module-pos [fwk-icon] { color: var(--fwre-color-primary); }
@media (max-width: 720px) { #fwre .fwre-module-stage { grid-template-columns: minmax(0, 1fr); } }

/* mini-list (latest/featured) */
#fwre .fwre-mod-minilist { list-style: none; margin: 0; padding: 0; }
#fwre .fwre-mod-mini { display: flex; gap: var(--fwre-space-12); align-items: center; padding: var(--fwre-space-8) 0; border-bottom: 1px solid var(--fwre-color-border); text-decoration: none; }
#fwre .fwre-mod-minilist li:last-child .fwre-mod-mini { border-bottom: 0; }
#fwre .fwre-mod-mini-img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--fwre-radius-sm); flex-shrink: 0; }
#fwre .fwre-mod-mini-body { display: flex; flex-direction: column; }
#fwre .fwre-mod-mini-price { color: var(--fwre-color-primary); font-weight: var(--fwre-weight-bold); font-size: var(--fwre-text-lg); }
#fwre .fwre-mod-mini-addr { color: var(--fwre-color-text-muted); font-size: var(--fwre-text-base); }

/* search + mortgage widgets */
#fwre .fwre-mod-search-row { display: flex; gap: var(--fwre-space-8); }
#fwre .fwre-mod-mortgage-out { font-size: var(--fwre-text-xl); padding-top: var(--fwre-space-12); border-top: 1px solid var(--fwre-color-border); }
#fwre .fwre-mod-mortgage-out strong { color: var(--fwre-color-primary); }

/* ============================================================
 * P-F: Info pages (features / fields / prose) + Showcase skins
 * ============================================================ */
#fwre .fwre-feat-group { margin-bottom: var(--fwre-space-28); }
#fwre .fwre-feat-group-title { display: flex; align-items: center; gap: var(--fwre-space-8); font-size: var(--fwre-text-2xl); margin-bottom: var(--fwre-space-12); }
#fwre .fwre-feat-group-title [fwk-icon] { color: var(--fwre-color-primary); }
#fwre .fwre-feat-card { height: 100%; display: flex; flex-direction: column; gap: var(--fwre-space-4); }
#fwre .fwre-feat-name { color: var(--fwre-color-text); }
#fwre .fwre-feat-desc { font-size: var(--fwre-text-md); flex: 1; }
#fwre .fwre-feat-link { color: var(--fwre-color-primary); text-decoration: none; font-size: var(--fwre-text-md); font-weight: var(--fwre-weight-semibold); margin-top: var(--fwre-space-6); display: inline-flex; align-items: center; gap: var(--fwre-space-3); }

#fwre .fwre-fieldcat-n { font-size: var(--fwre-text-base); font-weight: var(--fwre-weight-normal); }

#fwre .fwre-prose { max-width: 760px; }
#fwre .fwre-prose-h { font-size: var(--fwre-text-2xl); margin: 1.4rem 0 var(--fwre-space-8); /* 1.4rem: hold, off-scale (decisions r2) */ }
#fwre .fwre-prose p { color: var(--fwre-color-text-muted); }
#fwre .fwre-prose-list { list-style: none; margin: 0; padding: 0; }
#fwre .fwre-prose-list li { display: flex; gap: var(--fwre-space-8); align-items: baseline; padding: var(--fwre-space-5) 0; color: var(--fwre-color-text); }
#fwre .fwre-prose-list [fwk-icon] { color: var(--fwre-color-primary); }

/* Showcase design skins retired: per-design styling now lives in the cascade overlays
   public/css/designs/{common,agency,demo}.css, injected once by design_css() (ADR-0023). */

/* B1: live Special Pages usersection/management composition wrapper
   (fwre-user-page > fwre-management-body > fwre-management-section). The demo is a single
   full-width section (the live left management rail is account-bound / commented out in agency). */
#fwre .fwre-user-page { width: 100%; }
#fwre .fwre-management-body { display: flex; gap: var(--fwre-space-20); }
#fwre .fwre-management-section.fwk-width-expand { flex: 1 1 auto; min-width: 0; }

/* The account dashboard (spec 011, FR-005): one area card per thing the visitor keeps here, each with
   its count in the primary colour and its one next action at the foot (fwk-grid-match evens the row). */
#fwre .fwre-account-lead { margin: 0 0 var(--fwre-space-20); color: var(--fwre-color-text-muted); font-size: var(--fwre-text-lg); }
#fwre .fwre-account-lead strong { color: var(--fwre-color-text); }
#fwre .fwre-account-area { display: flex; flex-direction: column; align-items: flex-start; }
#fwre .fwre-account-area-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--fwre-color-primary-soft);
    color: var(--fwre-color-primary);
}
#fwre .fwre-account-area-icon svg { width: 24px; height: 24px; }
#fwre .fwre-account-area-title { margin: var(--fwre-space-14) 0 var(--fwre-space-4); font-size: var(--fwre-text-xl); }
#fwre .fwre-account-area-count { margin: 0 0 var(--fwre-space-18); color: var(--fwre-color-text-muted); }
#fwre .fwre-account-area-num { color: var(--fwre-color-primary); font-size: var(--fwre-text-2xl); font-weight: var(--fwre-weight-bold); }
/* The button sits at the card's foot; a label too long for its card wraps at normal line height inside
   the 44px floor instead of stacking 42px lines (the element in the selector out-ranks the phone's
   `#fwre.fwre-user-page .fwk-button` 42px line). */
#fwre .fwre-account-area a.fwre-account-area-action {
    margin-top: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--fwre-space-6);
    padding-bottom: var(--fwre-space-6);
    line-height: 1.3;
    text-align: center;
}
/* The row counts by the width the page gives it, not the viewport (spec 011 sweep, 20 Oct 2026):
   beside a host theme's sidebar a 1280 page left three cards about 285px each and "Open saved searches"
   broke in two. Three cards need about 1000px of row, so a narrower row holds two, and below 600px one. */
#fwre .fwre-account-areas { container: fwre-account-areas / inline-size; }
@container fwre-account-areas (max-width: 999px) { #fwre .fwre-account-areas > * { width: 50%; } }
@container fwre-account-areas (max-width: 599px) { #fwre .fwre-account-areas > * { width: 100%; } }
#fwre .fwre-account-signout { margin: var(--fwre-space-20) 0 0; }
#fwre .fwre-account-signout .fwk-button { min-height: 44px; line-height: 42px; }

/* B2, mod_fwre_search: the live agency search cover (chosen multiselects + ion.rangeSlider price
   slider). Vendored chosen.css + ion.rangeSlider(.skinFlat).css provide the widget base; these rules
   lay the form out and re-tint the widgets to the demo palette (token-bound). */
/* WHY `:is(#fwre, #fwre *)` AND NOT A PLAIN `#fwre ` PREFIX - read before adding a rule here.
   The search module's own root IS `<div id="fwre" class="… fwre-search fwre-mod-search">`
   (mod_search.php: `$domId` falls back to 'fwre'), so the module is BOTH the product token island
   and the thing being skinned. `#fwre .fwre-mod-search …` therefore asks for a descendant of the
   element itself and matches nothing wherever the module is the outermost product root - the
   listing, search and map pages, and any standalone sidebar placement. It matched only on a
   composed page, where the module happens to sit inside a SECOND `#fwre` (the page root). Half the
   module's skin had never rendered on the pages that matter.
   `:is(#fwre, #fwre *)` says "the module root, wherever the island is" and covers both. It is not
   cosmetic: `:is()` takes the specificity of its most specific argument, so `#fwre` (1,0,0) keeps
   these selectors at exactly the weight the `#fwre ` prefix gave them. Dropping the id entirely
   was tried first and REGRESSED the composed pages - at (0,n,0) the panel lost its padding to the
   stand's card rule and the foot buttons lost their ink to design-theme's `#fwre .fwk-button`
   (measured 2026-08-07). Rules with no such competitor stay on the bare class (the radius-hint
   group below): bare covers MORE placements, so it is the better form where weight is not needed.

   LIGHT 1:1 parity with live (white card, chosen chips-with-counts, light ion sliders). The panel
   reads the design's panel roles (--fwre-color-panel-*, design-tokens.css), which hold the search
   module's old light values (its --fwre-s-* set, folded in 7.2.0), so it renders as before. */
.fwre-search.fwre-mod-search:is(#fwre, #fwre *) {
    background: var(--fwre-color-panel-surface-muted); border: 1px solid var(--fwre-color-panel-border);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-16) var(--fwre-space-18); color: var(--fwre-color-panel-text);
    container-type: inline-size; /* the grid below collapses by THIS form's width, not the viewport */
}
/* #1: match live's grid by CONTAINER width, not viewport. The SAME fwre_mod_search helper renders
   full-width above the property listing (4-col is correct: Country/Region/City/Street · ZIP+Radius/
   Beds+Baths/Category/Type · 3 sliders) AND inside the narrow module/showcase cards (~320px, must
   stack). The card is narrow while the desktop viewport is wide, so the old viewport media queries
   kept it 4-col there and clipped 8/11 fields. Container queries collapse by the form's own width,
   the engine analogue of the live fwk-grid flex wrap. Mobile-first: 1-col → 2-col → 4-col. */
/* (The separate `#fwre.fwre-search.fwre-mod-search { container-type }` companion this block used to
   carry - added because the listing renders the wrapper AS #fwre itself and the @container queries
   never fired there - is gone: the panel rule above now matches the SELF case through :is() and
   sets container-type once. Removed 2026-08-07.) */
#fwre .fwre-mod-search-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fwre-space-28) var(--fwre-space-18); align-items: end; }
/* The grid gap is the ONLY vertical rhythm source. UIKit's fwk-grid-margin (margin-top)
   and the stand's control margin-bottom would stack on the gap and break the
   align-items:end baseline: cells end up 61px vs 75px tall, so Street floated 14px above
   State/City and the More-options Agent field sat 14px below its row peers. */
#fwre .fwre-mod-search-grid > * { margin-top: 0; }
#fwre .fwre-mod-field .fwk-input,
#fwre .fwre-mod-field .fwk-select,
#fwre .fwre-mod-field .fwre-ms { margin-bottom: 0; }
@container (min-width: 440px) { #fwre .fwre-mod-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 720px) { #fwre .fwre-mod-search-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Street is a normal 1-column cell in the official reference (row 1: Country|State|City|Street). */
#fwre .fwre-mod-field-text { grid-column: auto; }
#fwre .fwre-mod-field-range { min-width: 0; }
#fwre .fwre-mod-field-submit { display: flex; align-items: flex-end; }
#fwre .fwre-mod-field-submit .fwk-button { width: 100%; }
/* Currency segmented toggle (reference row 3, first cell): populated by uikit-search.js from
   the multicurrency toolbar select; stays hidden when that addon is absent. */
#fwre .fwre-currency-group { display: inline-flex; gap: var(--fwre-space-6); }
#fwre .fwre-currency-group .fwk-button {
    width: 40px; height: 40px; padding: 0; line-height: 38px; text-align: center;
    background: var(--fwre-color-surface); border: 1px solid var(--fwre-color-border); color: var(--fwre-color-text);
}
#fwre .fwre-currency-group .fwk-button.fwk-active {
    color: var(--fwre-color-primary); font-weight: var(--fwre-weight-semibold);
}
/* The border keeps the default button's grey, active or hovered, over a child design's own
   `#fwre .fwre-currency-group .fwk-button.fwk-active` (hhcom.css, loaded after this file on a host). */
#fwre#fwre .fwre-currency-group .fwk-button-default { border-color: var(--fwre-color-border); }
/* Foot row: reference splits it (More Options + Save left · Clear + Search right). */
#fwre .fwre-mod-search-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fwre-space-12); margin-left: 0; }
#fwre .fwre-mod-search-foot > div { padding-left: 0; }
#fwre .fwre-mod-foot-actions { margin-left: auto; min-width: 220px; }
.fwre-mod-search:is(#fwre, #fwre *) .fwre-mod-label, .fwre-mod-search:is(#fwre, #fwre *) .fwk-text-bolder { color: var(--fwre-color-panel-text); }
/* Radius hint: an icon on the field label, its text visually hidden behind it (2026-08-07). These
   rules have to live HERE and not only in the demo-* floor - this design OWNS the product skin, so on
   a product page `product.css` is the only one of the two that loads.
   BARE CLASS, no island scope at all - deliberate, and the lighter of the two forms explained at the
   top of this block: nothing competes for these declarations, so they need no id weight, and without
   one they also reach a module placed outside any `#fwre` (a sidebar on a non-product page, or an
   instance whose $domId is `fwre-mod-search-<id>` rather than `fwre`). `.fwre-mod-search` is a
   product-only class, so carrying no id scope leaks nothing. */
.fwre-mod-search .fwre-mod-hint { display: inline-flex; vertical-align: middle; margin-left: var(--fwre-space-4, .3rem); color: var(--fwre-color-panel-text-muted); }
.fwre-mod-search .fwre-mod-hint[hidden] { display: none; }
/* No cursor of its own: the icon VISUALISES the problem, it is not something to point at - the whole
   cell carries the tooltip (user, 2026-08-07, who read the help cursor as an invitation to click). */
.fwre-mod-search .fwre-mod-hint-icon { line-height: 0; }
.fwre-mod-search .fwre-mod-hint-icon svg { width: 15px; height: 15px; }
.fwre-mod-search .fwre-mod-hint-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The disabled radius, same correction: "muted + not-allowed so it reads as 'not yet'" is what the
   floor's comment promised and no page ever showed (opacity 1, cursor default, measured 2026-08-07). */
.fwre-mod-search .fwk-input:disabled { opacity: .55; cursor: not-allowed; }
/* The whole radius CELL carries the hint - see mod_search.php. `display: block` so wrapping the input
   does not shrink-wrap it out of its column; `pointer-events: none` on the disabled input hands every
   hover and click upwards, which is what makes the tooltip independent of whether a browser dispatches
   events to a disabled control at all. The cursor has to move up with them: `not-allowed` sits on the
   span around the box, so it reads over the box and NOT over the label, which is not a control. */
.fwre-mod-search .fwre-mod-radius { display: block; }
.fwre-mod-search [fwk-tooltip] .fwre-mod-radius,
.fwre-mod-search .fwre-mod-radius[fwk-tooltip] { cursor: not-allowed; }
.fwre-mod-search .fwre-mod-radius > .fwk-input:disabled { pointer-events: none; }
.fwre-mod-search:is(#fwre, #fwre *) .fwre-mod-field .fwk-form-label { display: block; font-size: var(--fwre-text-sm); margin-bottom: var(--fwre-space-4); color: var(--fwre-color-panel-text-muted); }
/* ---- form-controls contract (round 20): EVERY control shares one look --------------
   Text input / select / textarea / date field, the fwre-ms toggle, checkbox and radio:
   same border color, same placeholder ink, same teal focus treatment, from the panel roles
   (--fwre-color-panel-*). The old --fwre-s-* names stay declared on #fwre as aliases of those
   roles for one reader only: the stand's shared floor (public/css/demo-property.css and the two
   demo-sites copies) reads them outside its own search scope (#fwre-smart-suggest,
   .fwre-item-agent-title), and loaded after this file it would otherwise drop to its fallbacks.
   Nothing in this design reads them. */
#fwre {
    --fwre-s-surface: var(--fwre-color-panel-surface); --fwre-s-surface-2: var(--fwre-color-panel-surface-muted);
    --fwre-s-border: var(--fwre-color-panel-border); --fwre-s-border-strong: var(--fwre-color-panel-border-strong);
    --fwre-s-ink: var(--fwre-color-panel-text); --fwre-s-ink-muted: var(--fwre-color-panel-text-muted);
}
/* Doubled classes (1,2,0): the contract out-ranks every other control rule in this design, the
   `#fwre form .fwk-input` (1,1,1) and `#fwre.fwre-mod-search .fwk-select` (1,2,0) set in
   design-theme.css included, by specificity and, on a tie, by loading later. It used the important flag. */
#fwre .fwk-input.fwk-input, #fwre .fwk-select.fwk-select, #fwre .fwk-textarea.fwk-textarea,
#fwre .fwre-ms-toggle.fwre-ms-toggle {
    background-color: var(--fwre-color-panel-surface); color: var(--fwre-color-panel-text); /* -color: keep the select caret glyph (fwre-ms.css) */
    border: 1px solid var(--fwre-color-panel-border-strong);
}
/* A select toggle is also a default button: its ink stays the panel's, hovered or not, over the
   search panel's own hover and a child design's `#fwre .fwk-button-default:hover` (hhcom.css). */
#fwre#fwre .fwre-ms-toggle { color: var(--fwre-color-panel-text); }
/* The corner stays at the contract's old weight, so a more specific control rule (design-theme's
   `#fwre form .fwk-input`, 4px) still rounds it as before. */
#fwre .fwk-input, #fwre .fwk-select, #fwre .fwk-textarea,
#fwre .fwre-ms-toggle { border-radius: var(--fwre-radius-sm); }
#fwre .fwk-input::placeholder, #fwre .fwk-textarea::placeholder { color: var(--fwre-color-panel-text-muted); opacity: 1; }
#fwre .fwre-ms-ph { color: var(--fwre-color-panel-text-muted); }
#fwre .fwk-input:focus, #fwre .fwk-select:focus, #fwre .fwk-textarea:focus,
#fwre .fwre-ms:focus-within .fwre-ms-toggle {
    background-color: var(--fwre-color-surface); /* -color: a shorthand would erase the fwk-select caret on focus */
    border-color: var(--fwre-color-primary);
    box-shadow: var(--fwre-shadow-focus);
    outline: none;
}
#fwre .fwk-checkbox.fwk-checkbox, #fwre .fwk-radio.fwk-radio { /* doubled: beats `#fwre form .fwk-checkbox` (1,1,1) */
    border: 1px solid var(--fwre-color-panel-border-strong);
    background-color: var(--fwre-color-panel-surface);
}
#fwre .fwk-checkbox:checked, #fwre .fwk-radio:checked, #fwre .fwk-checkbox:indeterminate {
    background-color: var(--fwre-color-primary);
    border-color: var(--fwre-color-primary);
}
#fwre .fwk-checkbox:focus-visible, #fwre .fwk-radio:focus-visible {
    border-color: var(--fwre-color-primary);
    box-shadow: var(--fwre-shadow-focus);
    outline: none;
}
/* foot: More-options + Save (left) ⟂ Clear+Search (right, margin-left:auto) */
#fwre .fwre-mod-search-foot { display: flex; align-items: center; gap: var(--fwre-space-12); flex-wrap: wrap; }
#fwre .fwre-mod-search-foot .fwre-mod-foot-actions { margin-left: auto; min-width: 260px; }
#fwre .fwre-mod-search-foot .fwk-button { white-space: nowrap; } /* #5: Clear/Search never wrap */
#fwre .fwre-mod-more[hidden] { display: none; }
/* Expanded More-options rows continue the same 28px rhythm (fwk-margin-small-top is 10px). */
#fwre .fwre-mod-more { margin-top: var(--fwre-space-28); }
/* Folded filters (dsn-10): one field, Filters and Search, so the listings show first. Folded on a
   phone always, a filtered page included (its Filters button counts the filters that are on, review
   of 20 Oct 2026), and at every width on a site with few listings (`--few`), which the template sets
   only while nothing is filtered, so a filtered page shows its whole form from 640px up. `--open` is
   the visitor's Filters click (demo-search.js). The toggle shows only while a fold applies, so a
   desktop page with a full catalogue looks as before. City (or the combined Address) is the `--lead`
   field kept. */
/* Bare class, like the radius hint above: a search module outside any #fwre (its $domId may be fwre-mod-search-<id>) folds too. */
.fwre-mod-search .fwre-mod-filters-toggle { display: none; }
/* A filtered page had no Filters slot before it folded on a phone: from 640px up its empty slot goes
   too, or the foot's gap would push More options and Save search 12px right. */
@media (min-width: 640px) {
    .fwre-mod-search.fwre-search--filtered:not(.fwre-search--compact) .fwre-mod-foot-filters { display: none; }
}
/* The compact fold (spec 011 FR-017), the default layout's standard: the key fields (`--key`:
   location, type, bedrooms, price) stay and the rest opens with Filters, which counts the filters that
   are on. On a phone the `--folds` rules below keep the location field alone, as they did: four fields
   there put the first result under the first screen. A module set to keep its filters open has no
   `--compact` and folds as below. */
.fwre-mod-search.fwre-search--compact .fwre-mod-filters-toggle { display: inline-flex; align-items: center; }
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-search-grid > :not(.fwre-mod-field--key),
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-more,
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-search-foot > :not(.fwre-mod-foot-filters):not(.fwre-mod-foot-actions),
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-foot-clear { display: none; }
.fwre-mod-search.fwre-search--compact:is(#fwre, #fwre *):not(.fwre-search--open) .fwre-mod-foot-actions { min-width: 200px; }
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-foot-submit { width: 100%; }
.fwre-mod-search.fwre-search--compact:not(.fwre-search--open) .fwre-mod-search-foot { margin-top: var(--fwre-space-20); }
@media (max-width: 639.98px) {
    .fwre-mod-search.fwre-search--folds .fwre-mod-filters-toggle { display: inline-flex; align-items: center; }
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-search-grid > :not(.fwre-mod-field--lead),
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-more,
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-search-foot > :not(.fwre-mod-foot-filters):not(.fwre-mod-foot-actions),
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-foot-clear { display: none; }
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-field--lead { grid-column: 1 / -1; }
    .fwre-mod-search.fwre-search--folds:is(#fwre, #fwre *):not(.fwre-search--open) .fwre-mod-foot-actions { flex: 1; min-width: 0; margin-left: 0; }
    .fwre-mod-search.fwre-search--folds:not(.fwre-search--open) .fwre-mod-foot-submit { width: 100%; }
}
.fwre-mod-search.fwre-search--few .fwre-mod-filters-toggle { display: inline-flex; align-items: center; }
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-search-grid > :not(.fwre-mod-field--lead),
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-more,
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-search-foot > :not(.fwre-mod-foot-filters):not(.fwre-mod-foot-actions),
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-foot-clear { display: none; }
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-field--lead { grid-column: 1 / -1; }
.fwre-mod-search.fwre-search--few:is(#fwre, #fwre *):not(.fwre-search--open) .fwre-mod-foot-actions { flex: 1; min-width: 0; margin-left: 0; }
.fwre-mod-search.fwre-search--few:not(.fwre-search--open) .fwre-mod-foot-submit { width: 100%; }
/* Smart-address suggest popup (live default.php:1240-1247 inline styles → tokens). The input's
   wrapper is position:relative (fwk-position-relative / .fwk-width-1-1 in the minimal hero). */
#fwre #fwre-smart-suggest {
    left: 1px; top: 38px; z-index: 1000; max-height: 200px; overflow: auto;
    background: var(--fwre-color-panel-surface);
    border: 1px solid var(--fwre-color-panel-border);
}
#fwre #fwre-smart-suggest li { padding: var(--fwre-space-12) var(--fwre-space-20); cursor: pointer; margin-bottom: 0; color: var(--fwre-color-panel-text); }
#fwre #fwre-smart-suggest li:hover,
#fwre #fwre-smart-suggest li.active { background: var(--fwre-color-panel-surface-muted); }
/* Combined-address field spans half the 4-col search grid (live .fwre-mod-address fwk-width-1-2). */
#fwre .fwre-mod-search-grid .fwre-mod-address { grid-column: 1 / -1; }
@container (min-width: 720px) { #fwre .fwre-mod-search-grid .fwre-mod-address { grid-column: span 2; } }
/* Applied-filter chips - deliberately restyled to the multiselect's .fwre-ms-tag visual
   language (fwre-ms.css:65-107) so "selected filter" reads as ONE chip idiom form-wide. */
#fwre .fwre-search-chips { display: flex; flex-wrap: wrap; gap: var(--fwre-space-6); }
#fwre .fwre-search-chips[hidden] { display: none; }
#fwre .fwre-chip.fwk-label {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px;
    font-size: 13px; line-height: 18px; border-radius: 4px;
    color: var(--fwre-color-chip-text); background: var(--fwre-color-chip-surface);
    border: 1px solid var(--fwre-color-chip-border); white-space: nowrap;
}
#fwre .fwre-chip-remove {
    appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0; width: 16px; height: 16px;
    background: transparent; border: none; border-radius: 50%; color: inherit; opacity: .7;
    cursor: pointer; font-size: var(--fwre-text-xs); line-height: 1; padding: 0; transition: background .15s, opacity .15s;
}
#fwre .fwre-chip-remove:hover { opacity: 1; color: var(--fwre-color-on-primary); background: var(--fwre-color-chip-remove-hover); }
/* foot buttons need LIGHT defaults inside the light card */
/* (Border colours and the secondary button's fill come from the island button set at the top of this
   file, as they always rendered: the panel-coloured borders and the coral secondary fill these rules
   once carried never showed, so they're gone rather than left to win now that nothing is flagged important.) */
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-default { background-color: var(--fwre-color-panel-surface); color: var(--fwre-color-panel-text); border-width: 1px; border-style: solid; }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-default:hover { color: var(--fwre-color-primary); }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-primary { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); border-width: 1px; border-style: solid; }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-secondary { border-width: 1px; border-style: solid; }
/* --- ion.rangeSlider, flat skin → our tokens. Ion 2.3.1 (2026-08-19, up from 2.1.2) draws the flat
   skin in pure CSS - the sprite PNG these rules used to work around is gone from the library, and so
   is the hand-reproduced geometry that needed it. What is left is colour. Class names are 2.3.x:
   `.irs-handle`, not `.irs-slider`; one `.irs-line`, not left/mid/right. --- */
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-line { background: var(--fwre-color-panel-border); }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-bar { background: var(--fwre-color-primary); }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-handle > i:first-child { background: var(--fwre-color-primary); }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-handle.state_hover > i:first-child,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-handle:hover > i:first-child { background: var(--fwre-color-primary); filter: brightness(1.1); }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-from,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-to,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-single { color: var(--fwre-color-range-label); background: transparent; font-size: var(--fwre-text-sm); line-height: var(--fwre-lh-xs); padding: 1px 5px; border-radius: 4px; text-shadow: none; }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-from:before,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-to:before,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-single:before { display: none; }
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-min,
.fwre-mod-search:is(#fwre, #fwre *) .irs--flat .irs-max { color: var(--fwre-color-text-hint); background: var(--fwre-color-range-limit); font-size: var(--fwre-text-sm); line-height: var(--fwre-lh-xs); padding: 1px 3px; border-radius: 4px; text-shadow: none; }

/* #9: agent card is now a <button> trigger; strip native button chrome so it skins exactly like
   the live a.fwre-lightbox card, add the agent-title row, and the shared vanilla agent modal. */
#fwre .fwre-agent-trigger {
    display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
    text-align: left; font: inherit; color: inherit; cursor: pointer;
}
#fwre .fwre-item-agent-title { font-size: var(--fwre-text-md); color: var(--fwre-color-panel-text-muted); }

/* ============================================================
 * Agents directory: the live agency "Agent list" block, ported verbatim
 * (fwre-design-styles.css:889-929). Photo-cover card + teal fwre-home counter
 * pill + the hover slide-up .fwre-agent-info overlay (vendored fwk-transition
 * utilities drive the hover, no JS). Round 11.
 * ============================================================ */
/* The directory island = a LIGHT surface (live agents list is a light page); same H4 fix as
   .fwre-agent-page: the #fwre island remaps tokens but paints no bg. */
#fwre.fwre-agents {
    background: var(--fwre-color-surface); color: var(--fwre-color-text);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-26) var(--fwre-space-28);
}
#fwre .fwre-agent-item {
    border-radius: 3px;
    box-shadow: var(--fwre-shadow-small);
}
#fwre .fwre-agent-item-photo {
    width: 100%;
    height: 250px;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fwre-color-surface-muted);
}
/* An agent with no photo, or one that failed to load (fwre-behaviours.js hides it), shows a person
   glyph on the muted surface in the photo's place, so the card keeps its shape. A loaded photo covers it. */
#fwre .fwre-agent-photo-placeholder { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-agent-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--fwre-color-surface-strong);
}
#fwre .fwre-item-agent-photo img { position: absolute; inset: 0; height: 100%; }
#fwre .fwre-agent-profile-photo.fwre-photo-missing { display: none; }
#fwre .fwre-agent-item-name {
    position: relative;
    padding: 25px var(--fwre-space-15) var(--fwre-space-15); /* 25px: hold, off-scale (decisions r2) */
}
#fwre .fwre-agent-item-counter {
    color: var(--fwre-color-on-primary);
    padding: var(--fwre-space-4) var(--fwre-space-10);
    font-size: var(--fwre-text-sm);
    line-height: 16px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: var(--fwre-color-primary);
    border: 3px solid var(--fwre-color-surface);
    border-radius: 90px;
}
#fwre .fwre-agent-item-counter svg { width: 12px; margin-bottom: var(--fwre-space-2); }
#fwre .fwre-agent-info {
    height: 100%;
    padding: var(--fwre-space-20);
    text-align: center;
    background: var(--fwre-color-surface);
    border-radius: 3px;
    overflow: hidden;
}
#fwre .fwre-agent-info .fwk-button { padding-left: var(--fwre-space-15); padding-right: var(--fwre-space-15); text-transform: none; } /* live .fwk-button: no uppercase */
#fwre .fwre-agent-info .fwk-icon-button { color: var(--fwre-color-on-brand); width: 24px; height: 24px; }
#fwre .fwre-agent-item-mobile .fwk-icon-button { background: var(--fwre-color-primary); }
#fwre .fwre-agent-item-zoom .fwk-icon-button { background: var(--fwre-color-brand-zoom); }
#fwre .fwre-agent-item-whatsapp .fwk-icon-button { background: var(--fwre-color-brand-whatsapp); }
/* Hover-overlay contact block: compact type + tight rows so the zoom/whatsapp set never pushes
   the CTA buttons out of the card; merged phone+whatsapp row wears both icons. */
#fwre .fwre-agent-item-contacts { font-size: var(--fwre-text-md); }
#fwre .fwre-agent-item-contacts > div + div { margin-top: var(--fwre-space-8); }
#fwre .fwre-agent-item-contacts a { color: inherit; }
#fwre .fwre-agent-item-mobile .fwre-wa-icon { background: var(--fwre-color-brand-whatsapp); }
/* The Show-Profile button doubles as the modal trigger; re-assert the primary
   button look over the .fwre-agent-trigger chrome-strip reset (id beats classes). */
#fwre .fwre-agent-info .fwre-agent-trigger {
    display: inline-block;
    padding: 0 var(--fwre-space-15);
    background: var(--fwre-color-primary);
    color: var(--fwre-color-on-primary);
    border-radius: var(--fwre-radius-sm);
    text-align: center;
    line-height: 38px;
    font-size: var(--fwre-text-md);
}
/* The agents page (spec 011, FR-004): the directory card shows how to reach the agent at rest, on
   every width. The hover overlay above stays for the agent module's flip card only. Each card is a
   column, so the actions footer sits at the bottom of every card in a row (fwk-grid-match). The card
   inside the item drops its own shadow: the item carries one. */
#fwre .fwre-agents-list .fwre-agent-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--fwre-color-surface);
    border-radius: var(--fwre-radius-card);
}
#fwre .fwre-agents-list .fwre-agent-card { flex: 1 1 auto; box-shadow: none; border-radius: 0; }
#fwre .fwre-agents-list .fwre-agent-item-titles { margin-top: var(--fwre-space-2); color: var(--fwre-color-text-muted); }
#fwre .fwre-agents-list .fwre-agent-item-company-info { margin-top: var(--fwre-space-2); color: var(--fwre-color-text-faint); font-size: var(--fwre-text-sm); }
#fwre .fwre-agents-list .fwre-agent-item-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--fwre-space-6);
    min-height: 44px;
    margin-top: var(--fwre-space-4);
    color: var(--fwre-color-primary);
    font-weight: var(--fwre-weight-semibold);
    text-decoration: none;
}
#fwre .fwre-agents-list .fwre-agent-item-phone:hover { color: var(--fwre-color-primary-hover); }
/* the footer, as the listing tile's: the main button on the left, the icon actions on the right */
#fwre .fwre-agents-list .fwre-agent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fwre-space-8);
    padding: var(--fwre-space-12) var(--fwre-space-15) var(--fwre-space-15);
    border-top: 1px solid var(--fwre-color-border);
}
#fwre .fwre-agents-list .fwre-agent-actions .fwre-agent-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 0 var(--fwre-space-15);
    border: 1px solid var(--fwre-color-primary);
    border-radius: var(--fwre-radius-sm);
    font-size: var(--fwre-text-md);
    text-transform: none;
}
#fwre .fwre-agents-list .fwre-agent-links { display: flex; align-items: center; }
#fwre .fwre-agents-list .fwre-agent-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--fwre-radius-sm);
    color: var(--fwre-color-text-subtle);
}
#fwre .fwre-agents-list .fwre-agent-link svg { width: 20px; height: 20px; }
#fwre .fwre-agents-list .fwre-agent-link:hover,
#fwre .fwre-agents-list .fwre-agent-link:focus-visible { color: var(--fwre-color-primary); background-color: var(--fwre-color-surface-hover); }

/* The agents page with no published agent (FR-003): a framed empty state with a way on to the listings. */
#fwre .fwre-agents-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    margin: var(--fwre-space-20) auto;
    padding: var(--fwre-space-40) var(--fwre-space-20);
    text-align: center;
    background-color: var(--fwre-color-surface-muted);
    border: 1px dashed var(--fwre-color-border-strong);
    border-radius: var(--fwre-radius-card);
}
#fwre .fwre-agents-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--fwre-color-primary-soft);
    color: var(--fwre-color-primary);
}
#fwre .fwre-agents-empty-title { margin: var(--fwre-space-16) 0 var(--fwre-space-6); font-size: var(--fwre-text-2xl); }
#fwre .fwre-agents-empty-text { margin: 0 0 var(--fwre-space-20); color: var(--fwre-color-text-muted); font-size: var(--fwre-text-base); }
#fwre .fwre-agents-empty-action { min-height: 44px; line-height: 42px; }

.fwre-agent-modal-overlay[hidden] { display: none; }
.fwre-agent-modal-overlay { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: var(--fwre-space-20); }
.fwre-agent-modal-backdrop { position: absolute; inset: 0; background: var(--fwre-color-backdrop-agent); }
/* Agent modal: the LIVE .fwre-agent-profile design (r6 P4, verified by rendering the live fwlightbox):
   plain white 600px dialog, NO green/coloured header, NO name heading. Photo 200px left + contacts
   column (title, grey-icon contact rows, View-full-profile), then a grey (#F3F3F3) company box. */
.fwre-agent-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 600px; max-height: 90vh; overflow: auto; background: var(--fwre-color-surface); color: var(--fwre-color-text); border-radius: 5px; padding: var(--fwre-space-40); box-shadow: var(--fwre-shadow-modal); }
.fwre-agent-modal-close { position: absolute; top: 18px; right: 18px; border: 0; background: none; cursor: pointer; color: var(--fwre-color-text); padding: var(--fwre-space-6); line-height: 0; }
.fwre-agent-profile-grid { display: flex; gap: 24px; /* hold: off-scale (decisions r2) */ align-items: flex-start; }
.fwre-agent-profile-photo img { height: 200px; width: auto; max-width: 200px; object-fit: cover; border-radius: 5px; display: block; }
.fwre-agent-profile-side { flex: 1; min-width: 0; }
.fwre-agent-profile-title { font-size: var(--fwre-text-xl); color: var(--fwre-color-text); margin-bottom: var(--fwre-space-12); }
.fwre-agent-profile-info { display: flex; flex-direction: column; gap: var(--fwre-space-10); font-size: var(--fwre-text-base); color: var(--fwre-color-text); }
.fwre-agent-profile-contact { display: flex; align-items: center; gap: var(--fwre-space-8); }
/* Official reference: contact glyphs sit in teal circles with white icons. The #fwre variant
   out-specifies the shared demo-property floor copy of this rule. */
.fwre-agent-profile-contact [fwk-icon], .fwre-agent-profile-contact .fwk-icon,
#fwre .fwre-agent-profile-contact [fwk-icon], #fwre .fwre-agent-profile-contact .fwk-icon {
    color: var(--fwre-color-on-primary); background: var(--fwre-color-primary); flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.fwre-agent-profile-contact a { color: var(--fwre-color-text); }
.fwre-agent-profile-contact a:hover { color: var(--fwre-color-primary); }
.fwre-agent-profile-links { margin-top: var(--fwre-space-6); }
.fwre-agent-modal-dialog .fwk-button { text-transform: none; } /* live .fwk-button: no uppercase */
.fwre-agent-profile-company { margin-top: 22px; /* hold: off-scale (decisions r2) */ padding: var(--fwre-space-15); background: var(--fwre-color-surface-muted); border-radius: 5px; }
.fwre-agent-profile-company-name { color: var(--fwre-color-text); margin-bottom: var(--fwre-space-4); }
.fwre-agent-profile-website { font-size: var(--fwre-text-base); }
.fwre-agent-profile-website a { color: var(--fwre-color-primary); text-decoration: none; }
.fwre-agent-modal-active { overflow: hidden; }
@media (max-width: 640px) {
    .fwre-agent-modal-dialog { padding: 24px; /* hold: off-scale (decisions r2) */ }
    .fwre-agent-profile-grid { flex-direction: column; }
    .fwre-agent-profile-photo img { width: 100%; max-width: none; height: auto; }
}

/* Agent profile: languages / specializations badges + company box w/ logo (live profile_public.php).
   Shared by the modal AND the full profile page (both use .fwre-agent-profile-*). */
.fwre-agent-languages, .fwre-agent-specializations { font-size: var(--fwre-text-base); }
.fwre-agent-tags { display: flex; flex-wrap: wrap; gap: var(--fwre-space-6); margin-top: var(--fwre-space-4); }
/* The framework forces white text on .fwk-badge (an important flag), so a neutral chip takes a fill
   dark enough for it: the light grey fill gave the language chips 1.3:1. */
.fwre-agent-tags .fwk-badge { background: var(--fwre-color-tag-surface); color: var(--fwre-color-on-inverse); border-radius: 3px; padding: var(--fwre-space-2) var(--fwre-space-8); font-size: var(--fwre-text-xs); line-height: 1.7; }
.fwre-agent-tags .fwre-badge-primary { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); }
/* Round 26: the FULL profile page per the official reference - a white card with a LARGE
   photo and a horizontal wrapping contact row. Scoped under .fwre-agent-page so the shared
   agent MODAL (600px dialog, 200px photo, vertical contacts) keeps its own anatomy. */
#fwre .fwre-agent-page .fwre-agent-profile {
    background: var(--fwre-color-surface); border-radius: var(--fwre-radius);
    box-shadow: var(--fwre-shadow-sm); padding: var(--fwre-space-30);
}
#fwre .fwre-agent-page .fwre-agent-profile-photo img {
    width: 285px; max-width: 285px; height: auto; aspect-ratio: 285 / 405; object-fit: cover;
}
#fwre .fwre-agent-page .fwre-agent-profile-contacts .fwre-agent-profile-info {
    /* space-26: the 24 token does not exist - an unknown var voids the whole gap shorthand */
    flex-direction: row; flex-wrap: wrap; gap: var(--fwre-space-10) var(--fwre-space-26);
}
/* company block: logo | vertical divider | name + address + link (reference idiom) */
#fwre .fwre-agent-page .fwre-agent-profile-company { background: transparent; padding: 0; }
#fwre .fwre-agent-page .fwre-agent-profile-company .fwre-agent-profile-info {
    border-left: 1px solid var(--fwre-color-border); padding-left: var(--fwre-space-20);
}
#fwre .fwre-agent-page .fwre-agent-profile-address [fwk-icon] { color: var(--fwre-color-primary); }
/* Round 26: the agent-profile EMBEDDED listing renders the reference's tile variant -
   no agent strip (the whole page is this agent), full-width View Details, one
   share/star/compare row below the button. */
#fwre.fwre-listing-embedded .fwre-grid-view .fwre-agent-trigger { display: none; }
#fwre.fwre-listing-embedded .fwre-grid-view .fwre-item-footer { flex-wrap: wrap; row-gap: var(--fwre-space-10); }
#fwre.fwre-listing-embedded .fwre-grid-view .fwre-item-footer .fwre-item-more { width: 100%; }
#fwre.fwre-listing-embedded .fwre-grid-view .fwre-item-footer .fwre-read-more { width: 100%; }
/* Compare sits IN the footer options row with share/star now, so the old absolute-position
   merge hack (round 26) is gone: the icons row is one natural flex line. */
.fwre-agent-page + #fwre.fwre-listing-embedded { margin-top: var(--fwre-space-30); }

.fwre-agent-profile-company-row { display: flex; gap: var(--fwre-space-16); align-items: center; }
.fwre-agent-profile-company-logo { flex: 0 0 25%; max-width: 120px; }
.fwre-agent-profile-company-logo img { max-width: 100%; height: auto; border-radius: 5px; display: block; }
.fwre-agent-profile-address { color: var(--fwre-color-text-soft); font-size: var(--fwre-text-base); margin: var(--fwre-space-4) 0; }
#fwre .fwre-agent-profile-bio { color: var(--fwre-color-text-soft); font-size: var(--fwre-text-md); line-height: 1.6; }

/* Agent profile page = a LIGHT surface (live profile is a light page); the #fwre island remaps tokens
   but paints no bg, so headings would sit on the dark stage without this. */
#fwre .fwre-agent-page {
    background: var(--fwre-color-surface); color: var(--fwre-color-text);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-26) var(--fwre-space-28);
}

/* Agent reviews (live profile_public.php:216-328): list + star-rating submit form */
#fwre .fwre-agent-reviews-section { margin-top: var(--fwre-space-26); }
#fwre .fwre-reviews-avg { color: var(--fwre-color-star); font-size: var(--fwre-text-md); margin-left: var(--fwre-space-6); }
#fwre .fwre-reviews-list { margin: var(--fwre-space-12) 0; display: flex; flex-direction: column; gap: var(--fwre-space-10); }
#fwre .fwre-review-card { background: var(--fwre-color-surface-muted); border-radius: 5px; padding: var(--fwre-space-12) var(--fwre-space-14); }
#fwre .fwre-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fwre-space-8); }
#fwre .fwre-review-name { font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }
#fwre .fwre-review-date { color: var(--fwre-color-text-hint); font-size: var(--fwre-text-sm); }
#fwre .fwre-review-stars { color: var(--fwre-color-star); font-size: var(--fwre-text-md); letter-spacing: 1px; margin-top: var(--fwre-space-2); }
#fwre .fwre-review-text { color: var(--fwre-color-text-soft); font-size: var(--fwre-text-base); margin: var(--fwre-space-6) 0 0; }
#fwre .fwre-review-form { margin-top: var(--fwre-space-16); }
#fwre .fwre-rating-stars .fwre-star { cursor: pointer; font-size: 22px; /* hold: off-scale (decisions r2) */ color: var(--fwre-color-star-off); transition: color .1s; }
#fwre .fwre-rating-stars .fwre-star.is-on { color: var(--fwre-color-star); }
#fwre .fwre-review-msg { margin: var(--fwre-space-8) 0; }

/* enquiry popup (P5): live item.contact_form #fwre-enquire-popup fwk-modal, opened by the
   full-width "Send message" button; vanilla modal so no UIkit JS dependency. */
#fwre .fwre-enquire-open { margin-top: var(--fwre-space-3); }
.fwre-enquire-modal[hidden] { display: none; }
.fwre-enquire-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
.fwre-enquire-backdrop { position: absolute; inset: 0; background: var(--fwre-color-backdrop); }
.fwre-enquire-dialog {
    position: relative; z-index: 1; width: min(560px, calc(100% - 2rem)); margin: 6vh auto 2rem; /* hold: off-scale (decisions r2) */
    background: var(--fwre-color-surface); color: var(--fwre-color-text); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg); padding: var(--fwre-space-26); max-height: 88vh; overflow: auto;
}
.fwre-enquire-x {
    position: absolute; top: .6rem; right: .8rem; background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; /* hold: off-scale (decisions r2) */ line-height: 1; color: var(--fwre-color-text-muted);
}
.fwre-enquire-x:hover { color: var(--fwre-color-text); }
.fwre-enquire-title { font-size: var(--fwre-text-3xl); font-weight: var(--fwre-weight-semibold); margin-bottom: var(--fwre-space-16); }

/* mortgage calculator (P7): live mod_fwre_mortgage donut (yearly payment) + legend + inputs. */
#fwre .fwre-mod-mortgage .fwre-module-bar { font-weight: var(--fwre-weight-semibold); margin-bottom: var(--fwre-space-12); }
#fwre .mod-fwre-mcalc-chart { position: relative; margin-bottom: var(--fwre-space-16); }
/* live: the chart title flows ABOVE the donut; the donut centre carries the $ total text */
#fwre .mod-fwre-mcalc-chart-title { font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }
#fwre .fwre-mcalc-donut { display: block; margin: 0 auto; max-width: 200px; }
#fwre .fwre-mcalc-legend { margin-top: var(--fwre-space-12); text-align: left; }
#fwre .fwre-mcalc-legend-row { display: flex; align-items: center; gap: var(--fwre-space-8); padding: var(--fwre-space-2) 0; font-size: var(--fwre-text-md); }
#fwre .fwre-mcalc-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; background-color: var(--fwre-color-chart-1); }
/* The chart's parts take the design's chart roles (spec 011 FR-014): demo-mortgage.js sets the part
   class on each slice and its legend swatch. */
#fwre .fwre-mcalc-slice { stroke: var(--fwre-color-chart-1); }
#fwre .fwre-mcalc-part-2.fwre-mcalc-slice { stroke: var(--fwre-color-chart-2); }
#fwre .fwre-mcalc-part-3.fwre-mcalc-slice { stroke: var(--fwre-color-chart-3); }
#fwre .fwre-mcalc-part-4.fwre-mcalc-slice { stroke: var(--fwre-color-chart-4); }
#fwre .fwre-mcalc-part-2.fwre-mcalc-dot { background-color: var(--fwre-color-chart-2); }
#fwre .fwre-mcalc-part-3.fwre-mcalc-dot { background-color: var(--fwre-color-chart-3); }
#fwre .fwre-mcalc-part-4.fwre-mcalc-dot { background-color: var(--fwre-color-chart-4); }
#fwre .fwre-mcalc-total { fill: var(--fwre-color-text); font-family: var(--fwre-font); font-size: var(--fwre-text-2xl); font-weight: var(--fwre-weight-bold); }
#fwre .fwre-mcalc-legend-name { flex: 1 1 auto; color: var(--fwre-color-text-muted); }
#fwre .fwre-mcalc-legend-val { font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-mod-mortgage .fwk-form-label { display: block; font-size: var(--fwre-text-base); color: var(--fwre-color-text-muted); margin: var(--fwre-space-8) 0 var(--fwre-space-3); }
#fwre .fwre-mcalc-field { position: relative; }
#fwre .fwre-mcalc-field .fwk-input { width: 100%; padding-left: var(--fwre-space-30); }
#fwre .fwre-mcalc-icon {
    position: absolute; left: 0; top: 0; bottom: 0; width: 1.7rem; display: flex; align-items: center;
    justify-content: center; color: var(--fwre-color-text-muted); border-right: 1px solid var(--fwre-color-border);
}
#fwre .fwre-mcalc-icon-flip { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--fwre-color-border); }
#fwre .fwre-mcalc-field .fwk-input { padding-left: var(--fwre-space-30); }
/* the years row is a live fwk-grid + fwk-child-width-1-6 (vendored flex), do NOT own the layout
   with display:grid here, it collapses the child tracks (C2: the framework vocab carries layout). */
/* live fwre-design-styles.css:771: grey-light pills, black ink; the active one is
   primary-inverse (white bg, teal border + ink). #fwre needed to beat the island's
   `#fwre .fwk-button` base rule on specificity. */
#fwre .fwre-years-selector .fwk-button {
    padding: 0; min-height: 30px; border: 1px solid transparent;
    background: var(--fwre-color-surface-muted); color: var(--fwre-color-text);
    border-radius: 3px; cursor: pointer; text-align: center;
}
/* The active year is the island's primary-inverse pill (the `#fwre#fwre` rule at the top of this file). */
/* The module's text inputs + select: fill and border come from the form-controls contract below,
   as they always rendered; only the 3px corner is the module's own. */
#fwre .mod-fwre-mcalculator input[type="text"],
#fwre .mod-fwre-mcalculator .fwk-select {
    border-radius: 3px;
}
#fwre .mod-fwre-mcalculator input[type="text"]:not(.fwk-input) { /* a plain text field (the email form's honeypot) keeps the module look */
    background-color: var(--fwre-color-surface-muted);
    border: 1px solid var(--fwre-color-border);
}
#fwre .mod-fwre-mcalculator .fwk-form-label { font-size: var(--fwre-text-sm); font-weight: var(--fwre-weight-semibold); }

/* PDF brochure block (P8), live brochure tab body: large red fwre-pdf icon + text + request CTA. */
#fwre .fwre-brochure-block { display: flex; align-items: center; gap: var(--fwre-space-16); }
#fwre .fwre-brochure-icon { color: var(--fwre-color-pdf); flex: 0 0 auto; }
#fwre .fwre-brochure-icon [fwk-icon] { width: 56px; height: 56px; }
#fwre .fwre-brochure-icon [fwk-icon] svg { width: 56px; height: 56px; }
#fwre .fwre-brochure-text { color: var(--fwre-color-text-muted); }

/* The second price beside the first (multicurrency, secondary_currency_id) - live's
   .fwre-price-secondary. Muted and small on purpose: it is a reference figure, and it must never
   compete with the price the property is actually sold at. */
#fwre .fwre-price-secondary { margin-left: var(--fwre-space-6, 6px); white-space: nowrap; font-weight: 400; }

/* Tax-inclusive/exclusive switch in the listing toolbar (multicurrency, tax_display=user_toggle):
   the active state reads as "on" like the other toolbar pills. */
#fwre .fwre-toolbar-options-tax { display: inline-flex; align-items: center; }
#fwre .fwre-tax-toggle-active { background: var(--fwre-color-primary); color: var(--fwre-color-on-primary); border-color: var(--fwre-color-primary); }

/* Nearby schools (fields add-on, GreatSchools NearbySchools API): a rating-band chip + the school's
   name/meta, live's fwre-school-card shape. Live's numeric 1-10 badge is a BAND string in the current
   API ("Below average" | "Average" | "Above average"), so the chip is pill-shaped and its colour comes
   from the band slug; --none is the grey "no rating" state live also had. */
#fwre .fwre-schools-list { display: flex; flex-direction: column; gap: var(--fwre-space-10); }
#fwre .fwre-school-card { display: flex; align-items: center; gap: var(--fwre-space-12); }
#fwre .fwre-school-rating {
    flex: 0 0 auto; min-width: 92px; padding: var(--fwre-space-4) var(--fwre-space-10); border-radius: 999px;
    text-align: center; font-size: var(--fwre-text-xs); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-school-text);
}
#fwre .fwre-school-r-low { background: var(--fwre-color-school-low); }
#fwre .fwre-school-r-mid { background: var(--fwre-color-school-mid); }
#fwre .fwre-school-r-good { background: var(--fwre-color-school-good); }
#fwre .fwre-school-r-none { background: var(--fwre-color-school-none); }
#fwre .fwre-school-name { font-weight: var(--fwre-weight-semibold); }
#fwre .fwre-schools-credit { margin-top: var(--fwre-space-10); }

/* R9: shared iframe modal (the live fwre-lightbox iframe: print layout, data-width huge). */
.fwre-iframe-modal-overlay[hidden] { display: none; }
.fwre-iframe-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
.fwre-iframe-modal-backdrop { position: absolute; inset: 0; background: var(--fwre-color-backdrop); }
.fwre-iframe-modal-dialog {
    position: relative; z-index: 1; width: min(1100px, calc(100% - 2rem)); margin: 4vh auto 2rem; /* hold: off-scale (decisions r2) */
    background: var(--fwre-color-surface); color: var(--fwre-color-text); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg); padding: var(--fwre-space-10) var(--fwre-space-12) var(--fwre-space-12); display: flex; flex-direction: column;
}
.fwre-iframe-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--fwre-space-3) var(--fwre-space-3) var(--fwre-space-8); font-weight: var(--fwre-weight-semibold); }
.fwre-iframe-modal-head .fwre-enquire-x { position: static; }
.fwre-iframe-modal-frame { width: 100%; height: 80vh; border: 0; border-radius: 4px; background: var(--fwre-color-surface); }

/* Live header toolbar: share / star / print / pdf, pinned top-right on the title row. Event
   listeners register alphabetically, so the visual order is owned here via flex order. */
#fwre.fwre-property .fwre-property-head { flex-wrap: nowrap; align-items: flex-start; }
#fwre.fwre-property .fwre-listing-toolbar { flex-wrap: nowrap; }
#fwre.fwre-property .fwre-listing-toolbar > * { order: 9; }
#fwre.fwre-property .fwre-listing-toolbar .fwre-social-links { order: 1; }
#fwre.fwre-property .fwre-listing-toolbar .fwre-fav-btn { order: 2; }
#fwre.fwre-property .fwre-listing-toolbar .fwre-print { order: 3; }
#fwre.fwre-property .fwre-listing-toolbar .fwre-show-brochure-modal { order: 4; }
#fwre.fwre-property .fwre-listing-toolbar .fwre-property-open-house { display: none; } /* live header carries no open-house pill */

/* R9, header status badge: the detail page RESETS the card-overlay positioning
   (live fwre-design-styles.css:471, inline next to the price, 15px left gap). */
#fwre.fwre-property .fwre-property-price .fwre-status-label {
    display: inline-flex; position: relative; top: auto; left: auto; margin: 0 0 0 var(--fwre-space-15); vertical-align: middle;
}

/* R9, media tabs: live #fwre.fwre-property .fwk-tab > li > a (fwre-design-styles.css:478):
   15px, capitalize, no border, 12×20 padding; the ACTIVE tab gets the grey-light bg + a 3px teal
   bar along the bottom edge (the live ::before, bottom -1.5px). */
#fwre.fwre-property .fwk-tab > li > a {
    font-size: var(--fwre-text-lg); text-transform: capitalize; border: 0;
    position: relative; padding: var(--fwre-space-12) var(--fwre-space-20); color: var(--fwre-color-text);
}
#fwre.fwre-property .fwk-tab > li.fwk-active > a { background: var(--fwre-color-surface-muted); }
#fwre.fwre-property .fwk-tab > li > a::before {
    content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: -1.5px;
    background: var(--fwre-color-primary); opacity: 0; transition: opacity .15s;
}
#fwre.fwre-property .fwk-tab > li.fwk-active > a::before { opacity: 1; }

/* R9, body blocks: investment cards (render-unverified styling, the live demo property has no
   GRI so live never paints them; token-bound minimal cards), custom-group wrappers, video poster. */
#fwre .fwre-invest-card {
    border: 1px solid var(--fwre-color-border); border-radius: var(--fwre-radius-card);
    padding: var(--fwre-space-12) var(--fwre-space-14); height: 100%;
}
#fwre .fwre-invest-card-highlight { border-color: var(--fwre-color-primary); }
#fwre .fwre-invest-label { font-size: var(--fwre-text-base); color: var(--fwre-color-text-muted); }
#fwre .fwre-invest-value { font-weight: var(--fwre-weight-bold); font-size: var(--fwre-text-2xl); }
#fwre .fwre-invest-unit { font-weight: var(--fwre-weight-normal); font-size: var(--fwre-text-base); color: var(--fwre-color-text-muted); margin-left: var(--fwre-space-3); }
#fwre .fwre-group-wrapper { margin-bottom: var(--fwre-space-16); }
#fwre .fwre-video-lazy img { display: block; width: 100%; }
#fwre .fwre-video-play-btn { color: var(--fwre-color-on-media); filter: drop-shadow(var(--fwre-shadow-icon)); }

/* R9, mortgage rebuild: range sliders under the inputs (live fwk-range fwk-position-bottom),
   the wide Details report modal, legend grid rows. */
#fwre .fwre-mcalc-field input[type="range"] {
    position: absolute; bottom: -8px; left: 0; width: 100%; height: 8px; margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
#fwre .fwre-mcalc-field input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--fwre-color-border); border-radius: 2px; }
#fwre .fwre-mcalc-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: var(--fwre-color-primary); margin-top: -4.5px;
}
#fwre .fwre-mcalc-field { margin-bottom: var(--fwre-space-10); }
#fwre .fwre-mcalc-legend .fwre-mcalc-legend-row + .fwre-mcalc-legend-row { margin-top: var(--fwre-space-6); }
.fwre-mortgage-details-dialog { width: min(1100px, calc(100% - 2rem)); }
.fwre-mortgage-details-dialog .fwre-mortgage-report { max-height: 70vh; overflow: auto; }
.fwre-mortgage-details-dialog .fwre-mortgage-table-header { font-weight: var(--fwre-weight-bold); margin: var(--fwre-space-12) 0 var(--fwre-space-6); }
.fwre-mortgage-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fwre-space-16); }
@media (max-width: 760px) { .fwre-mortgage-report-grid { grid-template-columns: minmax(0, 1fr); } }
#fwre .fwre-mortgage-print { margin-left: var(--fwre-space-8); color: var(--fwre-color-text-muted); }

/* Brochure modal: compact form-first dialog at the standard 560px enquiry width (was the
   860px fwk-modal-dialog-large; the preview step scrolls inside the same narrower frame). */
#fwre .fwre-brochure-dialog { width: min(560px, calc(100% - 2rem)); }
#fwre .fwre-brochure-dialog .fwk-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--fwre-space-16); margin-top: var(--fwre-space-16); }
#fwre .fwre-brochure-dialog .fwk-form-label { display: block; font-size: var(--fwre-text-md); color: var(--fwre-color-text-muted); margin: var(--fwre-space-8) 0 var(--fwre-space-3); }
#fwre .fwre-brochure-iframe-wrap iframe { border-radius: 4px; }

/* R9b, floor plans (#fwre-floorplans): the live plugin's inline styles, ported. */
#fwre .fwre-fp-thumbs { overflow-x: auto; }
#fwre .fwre-fp-thumb {
    background: none; border: 2px solid transparent; border-radius: 4px; cursor: pointer; padding: var(--fwre-space-4);
    transition: border-color .2s; display: flex; flex-direction: column; align-items: center; gap: var(--fwre-space-4); max-width: 90px;
}
#fwre .fwre-fp-thumb img { width: 80px; height: 56px; object-fit: cover; border-radius: 2px; }
#fwre .fwre-fp-thumb-active, #fwre .fwre-fp-thumb:hover { border-color: var(--fwre-color-primary); }
#fwre .fwre-fp-thumb-label { font-size: .75em; /* hold: off-scale (decisions r2) */ text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fwre .fwre-fp-room-name { margin-bottom: .5em; /* hold: off-scale (decisions r2) */ }
#fwre .fwre-fp-room-size { margin-bottom: .5em; /* hold: off-scale (decisions r2) */ color: var(--fwre-color-text-muted); }
#fwre .fwre-fp-plan img { width: 100%; display: block; border-radius: 4px; }
#fwre .fwre-fp-plan.fwk-hidden, #fwre .fwre-fp-details.fwk-hidden { display: none; }
#fwre .fwre-fp-nav, #fwre .fwre-fp-tour-link { display: flex; align-items: center; }
#fwre .fwre-fp-tour-link { justify-content: flex-end; }
#fwre .fwre-fp-nav { justify-content: space-between; }

/* R9b, agent modal title bar (live: the lightbox header shows the agent name as the title). */
.fwre-agent-modal-dialog .fwk-modal-header { padding: 0 0 var(--fwre-space-10); }
.fwre-agent-modal-dialog .fwre-agent-modal-title { font-size: var(--fwre-text-3xl); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }

/* R9: toast fallback when the vendored UIkit notification is unavailable. */
.fwre-toast {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1100;
    background: var(--fwre-color-surface); color: var(--fwre-color-text); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg); padding: var(--fwre-space-10) var(--fwre-space-20); font-size: var(--fwre-text-lg);
}

/* ==========================================================================
   Agent OWN-profile edit form (fwre_agent_own_edit): a proper card panel with
   top-aligned label rows, full-width fields and the rich-text editor on
   Company details. Token-bound so it reads correctly in both themes.
   ========================================================================== */
#fwre .fwre-agent-edit-panel {
    background: var(--fwre-color-surface);
    border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius-card);
    padding: var(--fwre-space-20) 1.5rem; /* 1.5rem: hold, off-scale (decisions r2) */
}
#fwre .fwre-agent-edit-row {
    gap: var(--fwre-space-16);
    padding: 0.85rem 0; /* hold: off-scale (decisions r2) */
    border-bottom: 1px solid var(--fwre-color-border);
}
#fwre .fwre-agent-edit-row:last-child { border-bottom: 0; padding-bottom: 0; }
#fwre .fwre-agent-edit-row:first-child { padding-top: 0; }
#fwre .fwre-agent-edit-label {
    padding-top: 0.45rem; /* hold: off-scale (decisions r2) */
    color: var(--fwre-color-text);
}
/* Fields fill their column for an even, scannable form. */
#fwre .fwre-agent-edit-row .fwk-input,
#fwre .fwre-agent-edit-row .fwk-textarea,
#fwre .fwre-agent-edit-row .demo-editor-wrap { width: 100%; }
/* Image previews: sized here instead of an inline style (design-system K5). */
#fwre .fwre-agent-edit-photo { height: 140px; width: auto; object-fit: cover; }
#fwre .fwre-agent-edit-clogo { height: 60px;  width: auto; object-fit: contain; }
#fwre .fwre-agent-edit-hint  { margin-top: var(--fwre-space-6); }
/* Below 960px the label column (`fwk-width-1-4@m`) has no width, so label and field sat side by side
   and the editor's toolbar ran past a phone's edge: the row stacks, label above its field. */
@media (max-width: 959px) {
    #fwre .fwre-agent-edit-row { flex-direction: column; gap: var(--fwre-space-6); }
    #fwre .fwre-agent-edit-row > * { width: 100%; min-width: 0; }
    #fwre .fwre-agent-edit-label { padding-top: 0; }
}

/* ========================================================================== */
/* mod_fwre_search `minimal` layout: the AU showcase hero search bar (menu 352) */
/* Token-bound to the #fwre light island (round 6). Glyphs in demo-icons.js. */
/* ========================================================================== */
/* Bare on purpose: .fwre-search-hero is the island's PARENT (minimal.php), and its next sibling is
   outside the island too, so `#fwre .fwre-search-hero` would never match. */
.fwre-search-hero {
    position: relative;
    border-radius: var(--fwre-radius-card);
    /* url() is relative to THIS file, which ships next to its own assets/images dir on every platform
       (never asset(), which only resolves to a site root on some hosts), the same rule as demo-property.css. */
    background: var(--fwre-color-hero-fallback) url(../images/minimal_search_bg.jpg) center/cover no-repeat;
    padding: 56px var(--fwre-space-28) 88px; /* 56px, 88px: hold, off-scale (decisions r2) */
    margin-bottom: var(--fwre-space-16);
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}
/* the bar floats over the hero's bottom edge */
#fwre.fwre-search-minimal {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -28px;
    background: var(--fwre-color-surface);
    border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-hero-bar);
    padding: var(--fwre-space-10) var(--fwre-space-12);
}
.fwre-search-hero + * { margin-top: 44px; /* hold: off-scale (decisions r2) */ } /* clear the floated bar */
/* The shared select's caret (mod_search.php emits it). Bare like the search hint rules: a search
   module whose island id is fwre-mod-search-<id> keeps it. */
.fwre-ms-caret { margin-left: auto; color: var(--fwre-color-primary); }
@media (max-width: 640px) {
    #fwre.fwre-search-minimal { position: static; left: auto; right: auto; bottom: auto; margin-top: var(--fwre-space-12); }
    .fwre-search-hero + * { margin-top: var(--fwre-space-12); }
}

/* Live-search AJAX update: loading overlay on the listing while results refresh (demo-search.js). */
#fwre.fwre-property-listing { position: relative; } /* the listing root IS the island (listing/list.php) */
#fwre .fwre-ajax-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 96px; /* hold: off-scale (decisions r2) */
    background: var(--fwre-color-loading-veil);
}
#fwre-search-results.fwre-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* ================= HOME product view (home-view-spec.md; agency_v7 blueprint) ================= */
/* Hero band: full-bleed licensed photo + h1 + the search banner. Sections own their bands; the shell
   constrains content. The design's hero partial puts the photo in an <img fwk-cover> (no inline
   style); the stand's own demo chrome still hands it over as the --fwre-home-hero-img custom
   property, so the background rule stays for it. */
#fwre .fwre-home-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-color: var(--fwre-color-surface-inverse);
    background-image: var(--fwre-home-hero-img);
    background-size: cover;
    background-position: center 62%;
}
#fwre .fwre-home-hero-img { object-position: center 62%; }
#fwre .fwre-home-hero::after { /* legibility scrim behind headline + panel */
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fwre-color-hero-scrim);
}
#fwre .fwre-home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: var(--fwre-space-40);
    padding-bottom: var(--fwre-space-40);
}
/* Bare on purpose, like the band rules below: the block theme's patterns
   (themes/fw-real-estate-theme/block-patterns/) put these heading and band classes on core blocks
   outside any #fwre island. */
.fwre-home-hero-title {
    margin: 0 0 var(--fwre-space-20);
    text-align: center;
    color: var(--fwre-color-on-media);
    font-size: var(--fwre-text-hero);
    line-height: var(--fwre-lh-hero);
    font-weight: var(--fwre-weight-bold);
    text-shadow: var(--fwre-shadow-text-title);
}

/* Search banner (module/search/banner): category quick-scope radio-tabs + white panel. The layout
   opens its own #fwre island when placed alone; the home hero passes `nested`, being one already. */
#fwre .fwre-search-banner { max-width: 640px; margin: 0 auto; }
#fwre .fwre-banner-tabs { display: flex; }
#fwre .fwre-banner-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#fwre .fwre-banner-tab span {
    display: inline-block;
    padding: var(--fwre-space-8) var(--fwre-space-16);
    background: var(--fwre-color-media-scrim-strong);
    color: var(--fwre-color-on-media);
    font-size: var(--fwre-text-xs);
    font-weight: var(--fwre-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-banner-tab input:checked + span { background: var(--fwre-color-primary); }
#fwre .fwre-banner-tab input:focus-visible + span { outline: 2px solid var(--fwre-color-on-media); outline-offset: -2px; }
#fwre .fwre-banner-panel {
    background: var(--fwre-color-surface);
    border-radius: 0 var(--fwre-radius-card) var(--fwre-radius-card) var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg);
    padding: var(--fwre-space-16);
}
#fwre .fwre-banner-row { display: flex; gap: var(--fwre-space-10); }
#fwre .fwre-banner-row-main .fwk-input { flex: 1 1 auto; }
#fwre .fwre-banner-submit { flex: 0 0 auto; }
#fwre .fwre-banner-row-facets { margin-top: var(--fwre-space-10); }
#fwre .fwre-banner-row-facets .fwk-select { flex: 1 1 0; min-width: 0; }

@media (max-width: 639px) {
    #fwre .fwre-home-hero { min-height: 460px; }
    #fwre .fwre-search-banner { max-width: 100%; }
    #fwre .fwre-banner-row-main { flex-wrap: wrap; }
    #fwre .fwre-banner-submit { width: 100%; }
    #fwre .fwre-banner-row-facets { flex-direction: column; }
}

/* Home content bands (latest / featured / cities / agents): shared head + cta chrome.
   Bare on purpose: the block theme's front-page patterns use these classes on core
   blocks outside the island (a font-size here renders there, where no `#fwre h2` out-ranks it). */
.fwre-home-band { padding: var(--fwre-space-40) 0; background: var(--fwre-color-surface); }
.fwre-home-band-tint { background: var(--fwre-color-surface-muted); }
.fwre-home-band-head { text-align: center; max-width: 640px; margin: 0 auto var(--fwre-space-30); }
.fwre-home-band-title { margin: 0 0 var(--fwre-space-8); font-size: var(--fwre-text-4xl); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }
.fwre-home-band-sub { margin: 0; color: var(--fwre-color-text-muted); font-size: var(--fwre-text-md); }
.fwre-home-band-cta { text-align: center; margin-top: var(--fwre-space-26); }
/* The home is full-bleed bands, so nothing in it may widen the page: the Latest slider's
   `fwk-slider-container-offset` reaches 25px past the 20px shell gutter to keep the card shadows,
   which scrolled the page sideways by 5px at 390 and 1280. `clip` cuts that overhang at the
   viewport edge without making the home a scroll container (sticky children keep working). */
#fwre.fwre-home { overflow-x: clip; }

/* Slider controls under a card row (mod_fwre_latest cards_slider): previous, UIkit's dot nav, next.
   They sit below the cards instead of over them, and each arrow is a 44px tap target. */
#fwre .fwre-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fwre-space-12);
    margin-top: var(--fwre-space-16);
}
#fwre .fwre-slider-controls .fwk-dotnav { margin: 0; }
#fwre .fwre-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--fwre-radius-pill);
    color: var(--fwre-color-text-muted);
    transition: background-color var(--fwre-fast) var(--fwre-ease), color var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-slider-arrow:hover,
#fwre .fwre-slider-arrow:focus-visible { color: var(--fwre-color-primary); background-color: var(--fwre-color-surface-muted); }

/* Featured band: the vertical layout's stacked wide cards laid as a 2-col grid (same markup,
   band-scoped presentation). Band alternation per the blueprint: latest white, cities tint,
   featured white, agents tint (the tint class lives on the section markup). */
#fwre .fwre-home-featured .mod-fwre-layout-vertical {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fwre-space-20);
}
#fwre .fwre-home-featured .mod-fwre-latest-vertical { margin: 0; }
@media (max-width: 639px) {
    #fwre .fwre-home-featured .mod-fwre-layout-vertical { grid-template-columns: minmax(0, 1fr); }
}

/* Latest module photo cards (live mod-fwre-latest-*; moved from module-showcase.css so the
   modules showcase AND the home strips share one design-owned skin; values preserved). */
#fwre .mod-fwre-layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#fwre .mod-fwre-latest-item-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}
#fwre .mod-fwre-latest-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#fwre .mod-fwre-latest-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* live mod_fwre_latest/assets/css/styles.css:29-41 */
    padding: .5rem;
    color: var(--fwre-color-on-media);
    font-size: .9rem;
    line-height: 1.4;
    text-shadow: var(--fwre-shadow-text-latest);
    background: var(--fwre-color-latest-fade);
}
#fwre .mod-fwre-latest-address {
    font-size: .82rem;
    opacity: .95;
}
#fwre .mod-fwre-latest-title {
    font-weight: var(--fwre-weight-semibold);
    line-height: 1.25;
    margin-top: .1rem;
}
#fwre .mod-fwre-latest-price {
    font-weight: var(--fwre-weight-semibold);
    color: var(--fwre-color-price-accent);
    margin-top: .15rem;
}

/* Cities & Neighborhoods tiles: 3 photo tiles, name + live count caption (blueprint band). */
#fwre .fwre-home-cities-grid, #fwre.fwre-home-cities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fwre-space-20);
}
#fwre .fwre-home-city {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    transition: filter var(--fwre-fast) var(--fwre-ease);
}
#fwre .fwre-home-city:hover { filter: brightness(1.08); text-decoration: none; }
/* The tile's photo is an <img> (no inline background since 7.2.0). Behind it, the dark band surface
   and a location glyph: what a row without an image, or a photo that failed to load (it hides
   itself, fwre-behaviours.js), shows instead of a white tile or a broken-image icon. */
#fwre .fwre-home-city { background-color: var(--fwre-color-surface-inverse); }
#fwre .fwre-home-city-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#fwre .fwre-home-city-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--fwre-space-28);
    color: var(--fwre-color-border-inverse);
}
#fwre .fwre-home-city::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fwre-color-city-fade);
}
#fwre .fwre-home-city-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--fwre-space-14);
    text-align: center;
    color: var(--fwre-color-on-media);
    text-shadow: var(--fwre-shadow-text-caption);
}
#fwre .fwre-home-city-name {
    display: block;
    font-size: var(--fwre-text-2xl);
    font-weight: var(--fwre-weight-semibold);
}
#fwre .fwre-home-city-qty {
    display: block;
    font-size: var(--fwre-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: .9;
}
@media (max-width: 639px) {
    #fwre .fwre-home-cities-grid, #fwre.fwre-home-cities-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Closing CTA band: navy surface, centered actions (product CTAs only; vendor CTA stays
   in the stand toolbar per market-themes-plan.md §7). */
/* The band, title and actions stay bare: the block theme's call-to-action pattern uses them outside the island. */
.fwre-home-cta { background: var(--fwre-color-surface-inverse); }
#fwre .fwre-home-cta-inner { text-align: center; }
.fwre-home-cta-title {
    margin: 0 0 var(--fwre-space-20);
    color: var(--fwre-color-on-inverse);
    font-size: var(--fwre-text-4xl);
    font-weight: var(--fwre-weight-semibold);
}
.fwre-home-cta-actions { display: flex; justify-content: center; gap: var(--fwre-space-12); flex-wrap: wrap; }

/* Home band context fixes: the agent module grid is a 300px SIDEBAR widget by default
   (#fwre.fwre-mod-agent-card cap); on the home band it spans the shell. The default
   (ghost) button needs white ink on the navy CTA band. */
.fwre-home-agents .fwre-mod-agent-card#fwre,
.fwre-home-agents #fwre.fwre-mod-agent-card { max-width: none; }
/* `#fwre#fwre` inside the island: out-ranks a child design's `#fwre .fwk-button-default:hover`
   (hhcom.css, loaded after this file on a host), so the ghost button keeps its white ink on hover. */
#fwre#fwre .fwre-home-cta .fwk-button-default {
    color: var(--fwre-color-on-inverse);
    border-color: var(--fwre-color-border-inverse);
    background: transparent;
}
#fwre#fwre .fwre-home-cta .fwk-button-default:hover { border-color: var(--fwre-color-on-inverse); }

/* mod_fwre_search `orientation` param: the design template emits .fwre-search--horizontal /
   --vertical, so the hooks belong to the design skin (they used to sit in the stand-only
   module-showcase.css, which meant the param had no effect on a packaged host at all). */
#fwre .fwre-search--horizontal .fwre-mod-search-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwre-space-8, .5rem);
}
#fwre .fwre-search--vertical .fwre-mod-search-grid > * {
    width: 100%;
}

/* the slideshow layout: the slide IS the photo, so the card fills the slide instead of keeping the
   4:3 aspect box the grid layouts use (the info plate stays where it is, over the bottom edge). */
#fwre .mod-fwre-latest-slide,
#fwre .mod-fwre-latest-slide .mod-fwre-latest-item-photo {
    height: 100%;
}
#fwre .mod-fwre-latest-slide .mod-fwre-latest-item-photo {
    aspect-ratio: auto;
    border-radius: var(--fwre-radius-card, 8px);
}
#fwre .mod-fwre-latest-slide .mod-fwre-latest-info {
    padding: var(--fwre-space-18, 1rem);
    font-size: 1rem;
}
#fwre .mod-fwre-latest-slide .mod-fwre-latest-title {
    font-size: 1.25rem;
}

/* ==========================================================================
 * Module layouts on official (7.2.0): every mod_fwre_* layout render-checked at 390 and 1280
 * (docs/design-guide.md, "Module layouts"). Last in the file: the phone tap-target rules below
 * out-rank the module rules above at equal specificity.
 * ========================================================================== */

/* Latest `default`: a sidebar card like the agent panel, the module bar on top, mini-list rows inside. */
#fwre .fwre-mod-latest-list {
    background-color: var(--fwre-color-surface);
    border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-sm);
    overflow: hidden;
}
#fwre .fwre-mod-latest-list .fwre-mod-minilist { padding: var(--fwre-space-4) var(--fwre-space-16); }
#fwre .fwre-mod-latest-list .fwre-mod-mini { color: var(--fwre-color-text); }
#fwre .fwre-mod-latest-list .fwre-mod-mini:hover .fwre-mod-mini-addr { color: var(--fwre-color-primary); }
#fwre .fwre-mod-latest-list .fwre-mod-mini-body { min-width: 0; }

/* Latest `cards_slider` placed on its own: the container offset reaches 25px past the module, so the
   module clips it (the home band, `nested`, clips at the viewport instead: `#fwre.fwre-home`). */
#fwre.fwre-mod-latest-slider { overflow-x: clip; }

@media (max-width: 639px) {
    /* Search banner on a phone: the facet selects stack in a column, where `flex: 1 1 0` let them
       collapse to a 20px sliver. */
    #fwre .fwre-banner-row-facets .fwk-select { flex: none; }

    /* Search `minimal` on a phone: the panel's 40px margin left the fields a 210px column inside the
       photo; the actions stack full width instead of three ragged buttons. */
    #fwre.fwre-search-hero-panel { margin: 0; }
    #fwre .fwre-search-hero-actions > * { width: 100%; }
    #fwre .fwre-search-hero-actions .fwk-button { width: 100%; }

    /* 44px tap targets (WCAG 2.5.5, as the listing card's buttons since design review dsn-12): the
       search and mortgage modules' fields and buttons, the mortgage years pills, and the two buttons
       on an agent card's overlay. The search panel is either the island itself (`minimal`) or inside it.
       Two child designs' own search layouts keep their sizes (`.fwre-search-minimal`, `.fwre-hh-search`):
       a child design isn't uplifted here. */
    #fwre .fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-input,
    #fwre.fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-input,
    #fwre .fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-select,
    #fwre.fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-select,
    #fwre .fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwre-ms-toggle,
    #fwre.fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwre-ms-toggle,
    #fwre .mod-fwre-mcalculator .fwk-input, #fwre .mod-fwre-mcalculator .fwk-select {
        min-height: 44px;
    }
    #fwre .fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-button,
    #fwre.fwre-mod-search:not(.fwre-search-minimal):not(.fwre-hh-search) .fwk-button,
    #fwre .mod-fwre-mcalculator .fwk-button,
    #fwre .fwre-agent-info .fwk-button {
        /* Height through line-height, never `display`: a stronger display here would show a button
           another rule hides (the search's Filters toggle when no fold applies). 42px of line plus the
           1px borders makes 44. */
        box-sizing: border-box;
        min-height: 44px;
        line-height: 42px;
    }
}

/* ==========================================================================
 * Add-on views on official (7.2.0): every plugin contributions/ and special/ view render-checked at
 * 390 and 1280 (docs/design-guide.md, "Add-on views on official"). Last in the file, after the
 * module block, for the same reason: the phone rules out-rank the rules above at equal specificity.
 * ========================================================================== */

/* Latest horizontal and vertical cards: three lines of white text sat on a 60% fade that a bright
   photo (a white facade, a sunlit room) washed out; their plate takes the deeper scrim. */
#fwre .mod-fwre-layout-horizontal .mod-fwre-latest-info,
#fwre .mod-fwre-layout-vertical .mod-fwre-latest-info {
    background: var(--fwre-color-latest-scrim);
    padding-top: var(--fwre-space-28);
}

/* A hosted 3D tour and a provider's video player fill their pane at 16:9 (the size used to ride
   inline on each iframe). */
#fwre .fwre-tour3d-frame,
#fwre .fwre-video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Compare: a row label sits level with its values, and a long one ("Neighborhood", "Energy &
   sustainability") breaks between syllables instead of mid-letter. The doubled class out-ranks the
   stand floor's `break-word` rule. */
#fwre .fwre-compare-table th.fwre-compare-label.fwre-compare-label {
    vertical-align: top;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: auto;
}

/* The multicurrency tax toggle follows the currency select (with no `order` of its own it led the
   toolbar, ahead of Ordering). The view switches' 40px icon-chip rule caught it too: its label was
   cut to "Excl." in a 40px square, in the faint icon grey, and its "on" fill never showed. It is a
   labelled chip like the Ordering toggle instead, filled with the primary colour when on. */
#fwre .fwre-toolbar-options form > .fwre-toolbar-options-tax { order: 3; }
#fwre .fwre-listing-toolbar .fwk-button-default.fwre-tax-toggle {
    width: auto;
    padding: 0 var(--fwre-space-14);
    color: var(--fwre-color-text);
    font-size: var(--fwre-text-sm);
    text-transform: none;
    white-space: nowrap;
}
#fwre .fwre-listing-toolbar .fwk-button-default.fwre-tax-toggle:hover,
#fwre .fwre-listing-toolbar .fwk-button-default.fwre-tax-toggle.fwre-tax-toggle-active {
    background-color: var(--fwre-color-primary);
    border-color: var(--fwre-color-primary);
    color: var(--fwre-color-on-primary);
}

/* Compare in a narrow column, official (dsn-20, then the spec 011 sweep of 20 Oct 2026): the sticky
   label column left room for one property and a sliver of the next. Below 640px of container (a
   phone, or a page a host sidebar narrows) each row is a grid: its label is a caption across the row,
   above the values, and the property columns share the width, so every property shows in full with
   no sideways scroll. Three used to take 40% each and scroll, which cut the third property's values
   and its "Best" mark. Three share the width at a smaller cell padding, a value's "Best" mark wraps
   under it, and four go two to a line below 480px (the cards row too, so a value sits where its
   property's card sits). */
@container fwre-compare (max-width: 639px) {
    #fwre .fwre-compare-table.fwre-compare-stack { display: block; width: 100%; min-width: 0; table-layout: auto; }
    #fwre .fwre-compare-table.fwre-compare-stack > colgroup { display: none; }
    #fwre .fwre-compare-table.fwre-compare-stack > tbody { display: block; }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n1 { --fwre-compare-n: 1; }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n2 { --fwre-compare-n: 2; }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n3 { --fwre-compare-n: 3; }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n4 { --fwre-compare-n: 4; }
    #fwre .fwre-compare-table.fwre-compare-stack tr {
        display: grid;
        grid-template-columns: repeat(var(--fwre-compare-n), minmax(0, 1fr));
        width: 100%;
    }
    #fwre .fwre-compare-table.fwre-compare-stack tr + tr { border-top: 1px solid var(--fwre-color-border-strong); }
    #fwre .fwre-compare-table.fwre-compare-stack tr + tr > td,
    #fwre .fwre-compare-table.fwre-compare-stack tr + tr > th { border-top: 0; }
    #fwre .fwre-compare-table.fwre-compare-stack tr > th {
        grid-column: 1 / -1;
        justify-self: start;
    }
    #fwre .fwre-compare-table.fwre-compare-stack th.fwre-compare-label.fwre-compare-label {
        width: auto;
        min-width: 0;
        max-width: none;
        padding: var(--fwre-space-12) var(--fwre-space-12) 0;
    }
    #fwre .fwre-compare-table.fwre-compare-stack tr.fwre-compare-cards > th { display: none; }
    /* the group's heading row: the rule runs under the whole row, not only under the name */
    #fwre .fwre-compare-table.fwre-compare-stack tr.fwre-compare-cat { background-color: var(--fwre-color-surface); border-bottom: 2px solid var(--fwre-color-primary); }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-table tr.fwre-compare-cat > th { background-color: transparent; border-bottom: 0; }
    #fwre .fwre-compare-table.fwre-compare-stack td { width: auto; min-width: 0; max-width: none; overflow-wrap: anywhere; }
    #fwre .fwre-compare-table.fwre-compare-stack:is(.fwre-compare-n3, .fwre-compare-n4) td { padding-left: var(--fwre-space-8); padding-right: var(--fwre-space-8); }
    /* a third of a phone: the value steps down to 14px, still above its 12px label */
    #fwre .fwre-compare-table.fwre-compare-stack:is(.fwre-compare-n3, .fwre-compare-n4) tr:not(.fwre-compare-cards) > td { font-size: var(--fwre-text-md); line-height: var(--fwre-lh-md); }
    /* Remove stays on one line in a narrow column (it wrapped its icon above the word). */
    #fwre .fwre-compare-table.fwre-compare-stack .fwre-compare-remove.fwk-button-danger { width: 100%; padding: 0 var(--fwre-space-4); white-space: nowrap; }
}
@container fwre-compare (max-width: 479px) {
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n4 { --fwre-compare-n: 2; }
    /* A third of a phone leaves the photo about 90px tall: its status pills and photo count would
       cover it, and the Status row below says the same in text. The Featured pill stays. */
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n3 .fwre-compare-card-cell .fwre-status-label,
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n3 .fwre-compare-card-cell .fwre-item-count { display: none; }
}
/* the same for four columns, until they go two to a line, and in a table under 800px, where four
   share what the label leaves (about 140px each): Remove keeps its icon beside the word there */
@container fwre-compare (min-width: 480px) and (max-width: 799px) {
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n4 .fwre-compare-remove.fwk-button-danger { width: 100%; padding: 0 var(--fwre-space-4); white-space: nowrap; }
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n4 .fwre-compare-card-cell .fwre-status-label,
    #fwre .fwre-compare-table.fwre-compare-stack.fwre-compare-n4 .fwre-compare-card-cell .fwre-item-count { display: none; }
}

@media (max-width: 639px) {
    /* Compare on a phone: the label column stays put while the properties scroll under it, and each
       property column is 170px wide, so one whole property shows and the next one peeks in at the
       edge, the cue that there's more. It used to show one property cut mid-address, with the others
       behind an inner scroll nothing pointed at. The label cell takes its row's stripe so a scrolled
       value never shows through it. The doubled classes out-rank the stand floor's fixed layout. */
    /* A compare table a child design renders itself, without `fwre-compare-stack`, keeps that layout. */
    #fwre .fwre-compare-table:not(.fwre-compare-stack) { min-width: 0; width: auto; table-layout: auto; }
    #fwre .fwre-compare-table tbody tr:nth-of-type(even) { background-color: var(--fwre-color-surface); }
    #fwre .fwre-compare-table:not(.fwre-compare-stack) th.fwre-compare-label.fwre-compare-label {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        background-color: inherit;
    }
    #fwre .fwre-compare-table:not(.fwre-compare-stack) td { width: 170px; min-width: 170px; max-width: 170px; }

    /* The brochure request button takes its column's full width with a smaller side padding, so
       "PDF Brochure Request" stays on one line (it wrapped onto two lines of 42px). */
    #fwre .fwre-property-brochure-fwk-button .fwk-button { width: 100%; padding: 0 var(--fwre-space-8); white-space: nowrap; }

    /* Property head: the title takes its own row and the share, favourite, print and brochure buttons
       go under it. Side by side, the title folded into a 180px column and the toolbar ran past the
       phone's edge. */
    #fwre.fwre-property .fwre-property-head { flex-wrap: wrap; }
    #fwre.fwre-property .fwre-property-head > .fwre-property-head-main { width: 100%; }

    /* Property manager filters: one per row. On a single line they ran past the phone's edge and
       squeezed the search field to 80px. */
    #fwre .fwre-manager .fwre-management-filters { flex-wrap: wrap; }
    #fwre .fwre-manager .fwre-management-filters > * { width: 100%; }
    /* the manager pages' heading takes its own row: beside the greeting it ran under "Hi <name>" */
    #fwre.fwre-user-page .fwk-h1.fwk-width-expand { flex: 0 0 100%; }

    /* 44px tap targets (WCAG 2.5.5), as the listing card and the modules have: the add-on pages'
       buttons and fields (agent profile and its edit form, My activity, compare, favourites, saved
       searches, the property manager), the share and brochure dialogs, the viewing calendar, the
       brochure request, the open house RSVP forms, the map's travel-time buttons, the property
       head's icon buttons and the tab strips (the manager's pages, its edit form). Height through
       min-height and line-height, never `display`, so no button another rule hides comes back. */
    #fwre.fwre-user-page .fwk-button,
    #fwre.fwre-activity .fwk-button,
    #fwre .fwre-enquire-modal .fwk-button,
    #fwre .fwre-viewing-calendar .fwk-button,
    #fwre .fwre-property-brochure-fwk-button .fwk-button,
    #fwre .fwre-openhours-rsvp .fwk-button,
    #fwre .fwre-isochrone-panel .fwk-button {
        box-sizing: border-box;
        min-height: 44px;
        line-height: 42px;
    }
    #fwre.fwre-user-page .fwk-input,
    #fwre.fwre-user-page .fwk-select,
    #fwre .fwre-enquire-modal .fwk-input,
    #fwre .fwre-enquire-modal .fwk-select,
    #fwre .fwre-openhours-rsvp .fwk-input {
        min-height: 44px;
    }
    #fwre.fwre-property .fwre-listing-toolbar .fwk-button {
        min-width: 44px;
        min-height: 44px;
    }
    #fwre.fwre-user-page .fwk-tab > li > a { min-height: 44px; box-sizing: border-box; }
    #fwre .fwre-enquire-modal .fwre-enquire-x {
        min-width: 44px;
        min-height: 44px;
        top: 0;
        right: 0;
    }
    /* the property page's "Compare" link: a 15px line of text was its whole target */
    #fwre .fwre-item-compare .fw-link-compare-add {
        display: inline-block;
        line-height: 44px;
    }
}

/* The property manager's pages and the account pages, second pass (7.2.0, the render sweep). These
   lived in the stand's demo-* floor, which no packaged host loads, so a customer never got them
   (SC-003, 20 Oct 2026). */

/* The page's one h1, printed by the island itself, so no host adds a second one above it: the
   manager's own heading ("Property Manager", "My Inquiries") and, on the views with no heading of
   their own (agents, compare, favourites, saved searches, the account and agent pages), a page
   heading. Sized like the listing's and the property's h1. */
#fwre.fwre-user-page .fwk-h1.fwk-width-expand,
#fwre .fwk-h1.fwre-page-heading {
    font-size: var(--fwre-text-hero);
    line-height: var(--fwre-lh-hero);
    font-weight: var(--fwre-weight-semibold);
    letter-spacing: -0.02em;
}
#fwre .fwk-h1.fwre-page-heading { margin: 0 0 var(--fwre-space-18); }
/* the greeting and the Logout button beside it share a centre line */
#fwre.fwre-user-page .fwk-h1.fwk-width-expand ~ * { align-self: center; }
#fwre.fwre-user-page .fwk-h1.fwk-width-expand ~ .fwk-margin-small-top { margin-top: 0; }

@media (max-width: 639px) {
    /* A table that reads as one card per row on a phone (the manager's inquiries and bookings, the
       account listings): the header row goes, and each cell carries its column's name. */
    #fwre .fwre-stack-table thead { display: none; }
    #fwre .fwre-stack-table,
    #fwre .fwre-stack-table tbody,
    #fwre .fwre-stack-table tr,
    #fwre .fwre-stack-table td { display: block; width: 100%; box-sizing: border-box; }
    #fwre .fwre-stack-table tr {
        margin-bottom: var(--fwre-space-12);
        padding: var(--fwre-space-12) var(--fwre-space-14);
        border: 1px solid var(--fwre-color-border);
        border-radius: var(--fwre-radius-card);
        background-color: var(--fwre-color-surface);
    }
    #fwre .fwre-stack-table td { padding: var(--fwre-space-4) 0; border: 0; white-space: normal; }
    #fwre .fwre-stack-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fwre-text-xs);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--fwre-color-text-muted);
    }

    /* The manager's property list: each row a card. The tick and the id on top with the feature and
       publish buttons beside them, the photo full width, then the title, price and address, then the
       type, category, status and views, each named. */
    #fwre .fwre-pm-table thead { display: none; }
    #fwre .fwre-pm-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--fwre-space-8) var(--fwre-space-12);
        margin-bottom: var(--fwre-space-12);
        padding: var(--fwre-space-12) var(--fwre-space-14);
        border: 1px solid var(--fwre-color-border);
        border-radius: var(--fwre-radius-card);
        background-color: var(--fwre-color-surface);
    }
    #fwre .fwre-pm-table tbody td { display: block; padding: 0; border: 0; text-align: left; }
    #fwre .fwre-pm-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--fwre-space-8); color: var(--fwre-color-text-muted); }
    #fwre .fwre-pm-table tbody td:nth-child(1) > div { margin: 0; }
    #fwre .fwre-pm-table tbody td:nth-child(8) { grid-column: 2; grid-row: 1; display: flex; gap: var(--fwre-space-8); }
    #fwre .fwre-pm-table tbody td:nth-child(8) > div { margin: 0; }
    #fwre .fwre-pm-table tbody td:nth-child(n+2):nth-child(-n+7) { grid-column: 1 / -1; }
    #fwre .fwre-pm-table .fwre-pm-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    #fwre .fwre-pm-table td.fwre-pm-meta { font-size: var(--fwre-text-sm); color: var(--fwre-color-text-muted); }
    #fwre .fwre-pm-table td.fwre-pm-meta::before { content: attr(data-label) ": "; font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }

    /* The manager's edit form: label above its field, the field full width (side by side, Region,
       City and the price were cut to a few letters and the date ran under its calendar icon). The
       add-ons' own cards on the same form (rental pricing and the like) build the same label and
       field pair without the class, so they're matched by their two columns. */
    #fwre :is(.fwre-pm-row, .fwre-pm-cards .fwk-flex:has(> .fwk-width-2-5\@m + .fwk-width-3-5\@m)) { flex-direction: column; align-items: stretch; gap: var(--fwre-space-6); }
    #fwre :is(.fwre-pm-row, .fwre-pm-cards .fwk-flex:has(> .fwk-width-2-5\@m + .fwk-width-3-5\@m)) > * { width: 100%; min-width: 0; }
    #fwre :is(.fwre-pm-row, .fwre-pm-cards .fwk-flex:has(> .fwk-width-2-5\@m + .fwk-width-3-5\@m)) > :last-child > :is(.fwk-input, .fwk-select, .fwre-pm-dim, .fwk-flex, .fwre-ms) { flex: 1 1 auto; min-width: 0; }
    #fwre .fwre-pm-row .fwre-pm-dim .fwk-input { width: 100%; }

    /* The agent's working days: the four columns fit the phone instead of scrolling the To column away. */
    #fwre .fwre-availability-table { width: 100%; }
    #fwre .fwre-availability-table th,
    #fwre .fwre-availability-table td { padding: var(--fwre-space-6) var(--fwre-space-4); }
    #fwre .fwre-availability-table .fwk-input,
    #fwre .fwre-availability-table .fwk-select { width: 100%; min-width: 0; padding: 0 var(--fwre-space-6); }
}

/* ==========================================================================
 * The property page leads with photo, title, price and facts (spec 011 FR-011 to FR-014;
 * docs/design-guide.md, "The property page leads"). `.fwre-property-lead` is set by item/main.php
 * when the design's own summary panel handed the title and the facts to the head; a child design
 * with its own panel keeps its page as it was, so every head and layout rule here sits under it.
 * ========================================================================== */

/* The head: the title (h1), the address with its pin and the categories, the price with its status,
   then the key facts. One ranked block above the photos at every width. */
#fwre.fwre-property-lead .fwre-property-head { margin-bottom: var(--fwre-space-16); }
#fwre.fwre-property-lead .fwre-property-title { margin-bottom: var(--fwre-space-6); line-height: 1.25; }
#fwre .fwre-property-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fwre-space-6) var(--fwre-space-12);
    color: var(--fwre-color-text-muted); font-size: var(--fwre-text-md); line-height: var(--fwre-lh-md);
}
#fwre .fwre-property-address { display: inline-flex; align-items: flex-start; gap: var(--fwre-space-6); }
#fwre .fwre-property-address-icon { flex: 0 0 auto; color: var(--fwre-color-primary); }
#fwre .fwre-property-address-icon svg { width: 16px; height: 16px; }
#fwre .fwre-property-cat {
    padding: var(--fwre-space-2) var(--fwre-space-10); border-radius: var(--fwre-radius-pill);
    background-color: var(--fwre-color-surface-muted); color: var(--fwre-color-text-muted);
    font-size: var(--fwre-text-sm); line-height: var(--fwre-lh-sm);
}
#fwre.fwre-property-lead .fwre-property-price { margin-top: var(--fwre-space-12); line-height: var(--fwre-lh-4xl); }
#fwre .fwre-property-facts {
    list-style: none; margin: var(--fwre-space-14) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--fwre-space-10) var(--fwre-space-30);
}
/* A fact: its icon and value on one line, the field's name under them. */
#fwre .fwre-property-fact {
    display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
    column-gap: var(--fwre-space-8); margin: 0; white-space: nowrap;
}
#fwre .fwre-property-fact-icon { color: var(--fwre-color-text-muted); line-height: 0; }
#fwre .fwre-property-fact-icon svg { width: 20px; height: 20px; }
#fwre .fwre-property-fact-value { font-size: var(--fwre-text-xl); line-height: var(--fwre-lh-xl); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }
#fwre .fwre-property-fact-label { grid-column: 1 / -1; font-size: var(--fwre-text-base); line-height: var(--fwre-lh-base); color: var(--fwre-color-text-muted); }

/* The contact panel keeps the contact actions and the add-on panels; with nothing in it, no box. */
#fwre .fwre-property-contact:not(:has(*)) { display: none; }
/* Its full-width buttons (Send message, Schedule a viewing, the alerts button) take a 12px side padding
   and, when a label is still longer than the column (a 300px aside beside a host's sidebar), wrap at
   text line height inside the 44px floor; at the framework's 38px line height "Schedule a viewing" was
   two 38px lines in a 78px button. */
#fwre .fwre-property-contact .fwk-button.fwk-width-1-1 {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: 44px; padding: var(--fwre-space-8) var(--fwre-space-12); line-height: var(--fwre-lh-base);
}

/* The gallery leads the main column (FR-013): a 4:3 stage, about 860 x 645 beside a 350px aside at
   1280 (was 776 x 485 under a two-thirds column). */
#fwre.fwre-property-lead .fwre-property-images { aspect-ratio: 4 / 3; }
@media (min-width: 1200px) {
    #fwre.fwre-property-lead .fwre-property-grid > .fwre-property-info { flex: 1 1 0; width: auto; min-width: 0; }
    /* 380px beside a full page; a third of a narrow host column (a 920px component beside a host
       template's sidebar), never under 300px. */
    #fwre.fwre-property-lead .fwre-property-grid > .fwre-property-aside { flex: 0 0 auto; width: clamp(300px, 32%, 380px); }
}
/* The thumbnail strip (item_gallery prints it from four photos): four to six fill the row with no
   arrows; beyond six, six show at a time and the arrows scroll the rest (four on a phone). */
#fwre .fwre-thumbs-fit .fwre-thumbnav { display: none; }
#fwre .fwre-thumbs-n4 .fwre-thumb { width: calc((100% - 3 * var(--fwre-space-8)) / 4); }
#fwre .fwre-thumbs-n5 .fwre-thumb { width: calc((100% - 4 * var(--fwre-space-8)) / 5); }
#fwre .fwre-thumbs-n6 .fwre-thumb { width: calc((100% - 5 * var(--fwre-space-8)) / 6); }
@media (min-width: 640px) {
    #fwre .fwre-thumbs-scroll .fwre-thumb { width: calc((100% - 5 * var(--fwre-space-8)) / 6); }
}

/* The phone's contact block (FR-014, FR-022): the agent and Send message in the head, right after the
   key facts, between two rules, as Houzez's agent row sits under its overview. It is in the page flow:
   the sticky bar it replaces was painted over the specification table by a full-page capture, and
   over the content under it while the page scrolled. The name wraps rather than ending in an ellipsis.
   From 960px the contact panel sits beside the photos, so the block isn't shown. */
#fwre .fwre-contact-bar { display: none; }
@media (max-width: 959px) {
    #fwre .fwre-contact-bar {
        display: flex; align-items: center; gap: var(--fwre-space-12);
        margin-top: var(--fwre-space-16); padding: var(--fwre-space-12) 0;
        border-top: 1px solid var(--fwre-color-border); border-bottom: 1px solid var(--fwre-color-border);
    }
    #fwre .fwre-contact-bar-agent { display: flex; align-items: center; gap: var(--fwre-space-10); flex: 1 1 auto; min-width: 0; }
    #fwre .fwre-contact-bar-photo {
        position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
        display: flex; align-items: center; justify-content: center; background-color: var(--fwre-color-surface-strong);
    }
    #fwre .fwre-contact-bar-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    #fwre .fwre-contact-bar-name {
        min-width: 0; overflow-wrap: anywhere; line-height: var(--fwre-lh-base);
        font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text);
    }
    #fwre .fwre-contact-bar .fwre-contact-bar-action {
        flex: 0 0 auto; box-sizing: border-box; min-height: 44px; line-height: 42px; padding: 0 var(--fwre-space-18);
    }
    #fwre .fwre-contact-bar .fwre-contact-bar-action:only-child { flex: 1 1 auto; }
}

@media (max-width: 639px) {
    /* The head on a phone: a title size that keeps a long title to two or three lines. */
    #fwre.fwre-property-lead .fwre-property-title { font-size: var(--fwre-text-4xl); }
    #fwre .fwre-property-facts { gap: var(--fwre-space-10) var(--fwre-space-20); }
    /* The brochure panel stacks its PDF glyph over the text, and its two buttons sit one under the
       other at their own width: side by side the text column was 180px, and at full width the
       Download PDF link's framework left margin (fwk-margin-small-left) pushed it 10px out. */
    #fwre #fwre-brochure .fwk-width-auto { width: 100%; }
    #fwre #fwre-brochure .fwk-width-auto + .fwk-width-expand { flex-basis: 100%; }
    #fwre .fwre-property-brochure-fwk-button { display: flex; flex-direction: column; align-items: center; gap: var(--fwre-space-8); }
    #fwre .fwre-property-brochure-fwk-button .fwk-button { width: auto; max-width: 100%; }
    /* The mortgage sliders: a 44px tall track to tap and drag (the thumb stays 12px to look at),
       under its field rather than over the field's bottom edge. */
    #fwre .fwre-mcalc-field:has(input[type="range"]) { margin-bottom: 44px; }
    #fwre .fwre-mcalc-field input[type="range"] { bottom: -44px; height: 44px; }
}

/* ============================================================
 * List rows, the facts line and titled tiles (spec 011 phase 6, FR-015, FR-016, FR-019)
 * ============================================================ */
/* The facts line: icon and value, one line on every card and tile (partials/icons with `line`). The
   old 40px grey boxes were `fwk-button`s and read as buttons; in a 300px tile the area went to a
   second row. The name of each fact is in the line for a screen reader, visually hidden. When a tile
   is too narrow even so, the last fact (the area) ends in an ellipsis instead of wrapping. */
#fwre .fwre-item-facts {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--fwre-space-16);
    margin: var(--fwre-space-12) 0 0; padding: 0; list-style: none; min-width: 0;
    font-size: var(--fwre-text-md); line-height: var(--fwre-lh-md); color: var(--fwre-color-text);
}
#fwre .fwre-item-fact { display: inline-flex; align-items: center; gap: var(--fwre-space-6); flex: 0 0 auto; min-width: 0; margin: 0; white-space: nowrap; }
#fwre .fwre-item-fact:last-child { flex: 0 1 auto; overflow: hidden; }
#fwre .fwre-item-fact-value { font-weight: var(--fwre-weight-semibold); overflow: hidden; text-overflow: ellipsis; }
#fwre .fwre-item-fact-icon { flex: none; line-height: 0; color: var(--fwre-color-text-muted); }
#fwre .fwre-item-fact-icon svg { width: 18px; height: 18px; }

/* A tile's title: one line with an ellipsis, between the price and the address, linked to the
   property (FR-019). The full title rides the tooltip, as the address does. */
#fwre .fwre-item-title.fwre-tile-title {
    margin: var(--fwre-space-6) 0 0; font-size: var(--fwre-text-xl); line-height: var(--fwre-lh-xl);
    font-weight: var(--fwre-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fwre .fwre-item-title.fwre-tile-title a { color: var(--fwre-color-text); text-decoration: none; }
#fwre .fwre-item-title.fwre-tile-title a:hover { color: var(--fwre-color-primary); }
#fwre .fwre-item-title.fwre-tile-title + .fwre-item-address { margin-top: var(--fwre-space-4); }

/* A list row (FR-015): from 640px the photo sits beside one info column (fwk-width-2-5@s, 1-3@m),
   ranked title, address, the facts line, the tags and a two-line description, with the price and
   the call to action at the column's foot. The photo stretches to the column's height, so nothing
   is left empty under the button; below 640px the row stacks as before. */
#fwre .fwre-list-item .fwre-list-info {
    display: flex; flex-direction: column; height: 100%; min-width: 0;
    padding: var(--fwre-space-20); box-sizing: border-box;
}
#fwre .fwre-list-info .fwre-item-title {
    margin: 0; font-size: var(--fwre-text-3xl); line-height: 1.35; font-weight: var(--fwre-weight-semibold);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#fwre .fwre-list-info .fwre-item-location { margin-top: var(--fwre-space-6); font-weight: var(--fwre-weight-medium); }
#fwre .fwre-list-info .fwre-item-categories { margin-top: var(--fwre-space-12); }
#fwre .fwre-list-info .fwre-item-text {
    margin-top: var(--fwre-space-12); font-size: var(--fwre-text-md); line-height: var(--fwre-lh-md);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#fwre .fwre-list-info .fwre-item-agent { margin-top: var(--fwre-space-12); padding: var(--fwre-space-8) var(--fwre-space-12); }
/* In a row the agent is a line of its own, a small photo beside the name, not a 150px portrait. */
#fwre .fwre-list-info .fwre-item-agent > .fwk-grid > :first-child { width: 56px; flex: none; }
#fwre .fwre-list-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--fwre-space-10) var(--fwre-space-16); margin-top: auto; padding-top: var(--fwre-space-16);
}
#fwre .fwre-list-foot .fwre-item-price a { font-size: var(--fwre-text-4xl); line-height: 1.2; }
#fwre .fwre-list-foot .fwre-item-footer { gap: var(--fwre-space-16); flex-wrap: nowrap; }
#fwre .fwre-list-foot .fwre-read-more { white-space: nowrap; }
@media (min-width: 640px) {
    #fwre .fwre-list-item .fwre-list-row { align-items: stretch; }
    #fwre .fwre-list-item .fwre-list-row .fwre-item-media {
        position: relative; height: 100%; min-height: 240px; aspect-ratio: auto;
        border-radius: var(--fwre-row-radius) 0 0 var(--fwre-row-radius);
    }
    /* height, not absolute: the framework's position utility on that wrapper carries the important flag */
    #fwre .fwre-list-item .fwre-list-row .fwre-item-media > .fwk-position-relative { height: 100%; aspect-ratio: auto; }
    #fwre .fwre-list-item .fwre-list-row .fwre-item-slideshow { height: 100%; aspect-ratio: auto; }
    #fwre .fwre-list-item .fwre-list-row .fwk-slideshow-items { height: 100%; }
}

/* The results say what was searched (FR-018): the count under the h1 as the results' own heading,
   "55 properties" or "12 results for your search", and the active filters as removable chips under
   it, at every width. */
#fwre .fwre-listing-found { margin-top: var(--fwre-space-4); font-size: var(--fwre-text-xl); line-height: var(--fwre-lh-xl); font-weight: var(--fwre-weight-semibold); color: var(--fwre-color-text); }
#fwre .fwre-listing-chips { margin-top: var(--fwre-space-10); }
#fwre .fwre-listing-chips .fwre-chip-remove { width: 24px; height: 24px; }