/* ==========================================================================
   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,
   Joomla, WordPress); 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-black);
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-medium);
    text-transform: none;
    background: white;
    border: 1px solid transparent;
    border-radius: var(--fwre-radius); /* official reference control tier (4px) */
}
#fwre .fwk-button-default { border-color: var(--fwre-grey-border) !important; }
#fwre .fwk-button-default svg { color: var(--fwre-grey); }
#fwre .fwk-button-primary {
    color: white !important;
    background: var(--fwre-green) !important;
    border-color: var(--fwre-green) !important;
}
#fwre .fwk-button-primary-inverse {
    color: var(--fwre-black) !important;
    border-color: var(--fwre-green) !important;
    background: transparent !important;
}
#fwre .fwk-button-secondary {
    color: var(--fwre-green) !important;
    background-color: var(--fwre-grey-light) !important;
}
#fwre .fwk-button-secondary svg { color: var(--fwre-green); }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover { color: white !important; background: var(--fwre-green) !important; }
#fwre .fwre-footer-pagination .fwk-button-secondary svg { color: var(--fwre-grey) !important; }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover svg { color: white !important; }

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

#fwre .fwk-text-muted { color: var(--fwre-grey-dark-deep) !important; }

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

#fwre .fwre-list-item {
    background: var(--fwre-white);
    border: 1px solid var(--fwre-grey-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-grey); 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: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    color: var(--fwre-white); 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: rgba(0,0,0,.45); color: rgba(255,255,255,.85); 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: rgba(0,0,0,.6); color: var(--fwre-white); } /* 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-status-default); color: var(--fwre-white);
    letter-spacing: 0;
}

/* item options row (compare / favorite / share / 3D) */
#fwre .fwre-item-options { align-items: center; gap: var(--fwre-space-8); }
/* 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-grey-dark-deep); cursor: pointer; display: inline-flex; }
#fwre .fwre-favorite:hover { color: #e0a800; }
#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: #f5b301; }
/* 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-white); }
#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; }
/* GLOBAL selectors (no #fwre/#fwre prefix): the drop renders with container:body, OUTSIDE the
   island scope: the demo stage's overflow:hidden otherwise forced UIkit to flip it below.
   Closed by default (FOUC guard, docs/engineering-gotchas.md "FOUC"): this carries the
   fwk-dropdown ATTRIBUTE for JS behaviour but not the framework's own .fwk-dropdown CLASS, so it
   never inherited fw-uikit's baseline display:none — gate on .fwk-open instead (the class the JS
   component already toggles), same fix as .fwre-ms-drop. */
.fwre-social-dropdown { display: none !important; }
.fwre-social-dropdown.fwk-open {
    display: block !important;
    width: auto !important;
    min-width: auto !important;
    padding: var(--fwre-space-10) !important;
    white-space: nowrap;
    border-radius: 90px;
}
/* each share link = a 40px brand-coloured circle with a white glyph (live a + a svg{color:white}) */
.fwre-social-dropdown a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fwre-white); }
.fwre-social-dropdown a svg { color: var(--fwre-white) !important; }
.fwre-social-dropdown a[fwk-icon="copy"]      { background: #6c757d; }
.fwre-social-dropdown a[fwk-icon="whatsapp"]  { background: #25D366; }
.fwre-social-dropdown a[fwk-icon="twitter"]   { background: #000000; }
.fwre-social-dropdown a[fwk-icon="facebook"]  { background: #334C8C; }
.fwre-social-dropdown a[fwk-icon="linkedin"]  { background: #0077B5; }
.fwre-social-dropdown a[fwk-icon="telegram"]  { background: #229ED9; }
.fwre-social-dropdown a[fwk-icon="pinterest"] { background: #E60019; }
.fwre-social-dropdown a[fwk-icon="comment"]   { background: #6c757d; }
.fwre-social-dropdown a[fwk-icon="mail"]      { background: var(--fwre-green); }
/* live fwre-design-styles.css: SMS share is mobile-only */
@media (min-width: 960px) {
    .fwre-sms-share { display: none !important; }
}

/* ---- 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-white);
    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;
}
#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: kills the root fwk-margin attr's injected fwk-margin-small-top (utility is !important); owner 2026-07-22 */
/* !important matches the fwk-margin-small-top utility these elements carry (UIKit margin
   utilities are !important) - without it the 10px utility margin beats the auto pin. */
#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) !important; }
/* 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); }
#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: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px; color: var(--fwre-white); 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-black); }
#fwre .fwre-item-location [fwk-icon], #fwre .fwre-agent-listings [fwk-icon] { color: var(--fwre-green); }

#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-black); text-decoration: none; }
#fwre .fwre-item-title a:hover { color: var(--fwre-green); }
#fwre .fwre-item-text { color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-lg); line-height: 1.5; }

#fwre .fwre-empty {
    background: var(--fwre-white); border: 1px dashed var(--fwre-grey);
    border-radius: var(--fwre-radius-card); padding: 1.4rem; /* hold: off-scale (decisions r2) */ color: var(--fwre-grey-dark-deep);
}

/* ---- SEARCH FORM ------------------------------------------------------ */
#fwre .fwre-search-form .fwk-form-label { font-size: var(--fwre-text-base); color: var(--fwre-grey-dark-deep); 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-white); color: var(--fwre-black); /* -color: keep the caret glyph */
    border: 1px solid var(--fwre-grey); 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-green); color: var(--fwre-white); 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-green); color: var(--fwre-white);
    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-grey-light); 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: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.85));
}
#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: rgba(255,255,255,.8); color: #333; 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: rgba(255,255,255,.95); color: #333; }
#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: rgba(0,0,0,.55); color: var(--fwre-white); 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: live .fwk-slideshow-nav.fwk-dotnav, 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: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7);
}
#fwre .fwre-slideshow-nav > li.fwre-active > a { background: var(--fwre-white); }

/* 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!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-green); 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-black); 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-black); 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-grey-light); }
#fwre .fwre-media-tabs > li > a::before {
    content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: -1.5px;
    background: var(--fwre-green); 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-grey-light); color: var(--fwre-grey-dark-deep);
    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;
}
/* Featured island: same idiom as .fwre-item-type badges (design-theme.css) - the grey pill washes
   out on the light-green card, pin to the featured badge/ink pair. */
#fwre .fwre-item-featured .fwre-item-categories .fwre-item-cat-tag {
    background: var(--fwre-featured-badge-bg); color: var(--fwre-featured-ink);
}

/* 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-green); 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-grey-border); font-size: var(--fwre-text-lg); }
#fwre .fwre-spec-table tr:nth-child(odd) { background: var(--fwre-hover); }
#fwre .fwre-spec-name { color: var(--fwre-grey-dark-deep); width: 45%; }
#fwre .fwre-spec-value { color: var(--fwre-black); 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-black); 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-black); }
#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-white);
    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-black); }
#fwre .fwre-property-summary .fwre-list-item-text a { color: var(--fwre-green); 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-grey-border); border-radius: var(--fwre-radius-card);
    margin-bottom: var(--fwre-space-12); background: var(--fwre-white); 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-green); color: var(--fwre-white); }
#fwre details[open] > .fwre-acc-title::after { color: var(--fwre-white); 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-black);
    /* 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-green); 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 */
/* "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 */
.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-white); border: 1px solid var(--fwre-grey-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-black); }
#fwre .fwre-property-section-header,
#fwre .fwre-item-header-title { color: var(--fwre-black); }
#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-green); }
#fwre .fwre-agent-contact-label { color: var(--fwre-grey-dark-deep); }
#fwre .fwre-agent-listings { margin-top: var(--fwre-space-12); padding-top: var(--fwre-space-12); border-top: 1px solid var(--fwre-grey-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-green); color: var(--fwre-white); 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: rgba(0,0,0,.55); color: var(--fwre-white); 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-black); text-decoration: none; }
#fwre .fwre-grid-body .fwre-item-icons { color: var(--fwre-grey-dark-deep); 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-white);
}
#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-white); 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;
}
/* the vertical-card body rules, slideshow scope (mirrors the .fwre-grid-view set below) */
#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) !important; }
#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: rgba(102, 102, 102, .5); 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: rgba(102, 102, 102, .9); 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-white);
    box-shadow: var(--fwre-shadow-sm);
    border: 2px solid var(--fwre-grey-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-green); 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-black); }
#fwre .fwre-slideshow-thumb.fwre-active { border-color: var(--fwre-green); }

/* ── Slideshow View settings (Configuration → Add-ons) ─────────────────────────────────────────
   slideshow_height / _thumb / _sizing / _position, delivered by partials/slideshow.php as custom
   properties + a position class. 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-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; }
    /* 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; }
}

/* 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-grey-light); border: 1px dashed var(--fwre-grey); color: var(--fwre-green); }
#fwre .fwre-map-canvas [fwk-icon] { font-size: 2.4rem; /* hold: off-scale (decisions r2) */ }
#fwre .fwre-map-pin-count { color: var(--fwre-black); 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-white); border: 1px solid var(--fwre-grey-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 .fwk-text-green { color: var(--fwre-green); }
#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-black); }
#fwre .fwre-map-card .fwre-read-more { margin-top: var(--fwre-space-8); }

/* YOOTheme skin + note */
#fwre .fwre-yoo-note [fwk-icon] { color: var(--fwre-green); }
.fwre-yoo .fwre-grid-card { border-radius: var(--fwre-radius-lg); }
.fwre-yoo .demo-stage { letter-spacing: .002em; }

/* ============================================================
 * 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-green); }

#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-grey, #e5e5e5); }
#fwre .fwre-compare-table th.fwre-compare-label { text-align: left; color: var(--fwre-grey-dark-deep); 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-black); text-decoration: none; font-weight: var(--fwre-weight-semibold); font-size: var(--fwre-text-md); }

#fwre .fwre-manager-table a { color: var(--fwre-green); 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-white); color: var(--fwre-black);
    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 (a UIkit !important 40px); match
   !important to drop 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 {
    background-color: var(--fwre-grey-light);
    border-radius: 3px;
    border: 1px solid var(--fwre-grey-border);
}
#fwre .fwre-manager form .fwk-input:focus,
#fwre .fwre-manager form .fwk-select:focus { background-color: white; border-color: var(--fwre-green) !important; }
/* 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-grey-border); }
#fwre .fwre-pm-tabs li a { display: block; padding: var(--fwre-space-10) var(--fwre-space-18); color: var(--fwre-grey-dark-deep);
    text-decoration: none; border-bottom: 2px solid transparent; }
#fwre .fwre-pm-tabs li.is-active a { color: var(--fwre-green); border-bottom-color: var(--fwre-green); 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-grey-border); padding: var(--fwre-space-6) var(--fwre-space-18); }
#fwre .fwre-pm-yesno label.is-on.fwk-button-success { background: var(--fwre-green); color: var(--fwre-white); border-color: var(--fwre-green); }
#fwre .fwre-pm-yesno label.is-on.fwk-button-danger { background: var(--fwre-red); color: var(--fwre-white); border-color: var(--fwre-red); }
#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-green); color: var(--fwre-white); }

#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-black); display: inline-flex; align-items: center; gap: var(--fwre-space-6); }
#fwre .fwre-saved-name [fwk-icon] { color: var(--fwre-green); }
#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-grey-light); border-bottom: 1px solid var(--fwre-grey-border); font-weight: var(--fwre-weight-bold); color: var(--fwre-black); }
#fwre .fwre-module-bar [fwk-icon] { color: var(--fwre-green); }
#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-green); }
@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-grey-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-green); font-weight: var(--fwre-weight-bold); font-size: var(--fwre-text-lg); }
#fwre .fwre-mod-mini-addr { color: var(--fwre-grey-dark-deep); 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-grey-border); }
#fwre .fwre-mod-mortgage-out strong { color: var(--fwre-green); }

/* ============================================================
 * 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-green); }
#fwre .fwre-feat-card { height: 100%; display: flex; flex-direction: column; gap: var(--fwre-space-4); }
#fwre .fwre-feat-name { color: var(--fwre-black); }
#fwre .fwre-feat-desc { font-size: var(--fwre-text-md); flex: 1; }
#fwre .fwre-feat-link { color: var(--fwre-green); 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-grey-dark-deep); }
#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-black); }
#fwre .fwre-prose-list [fwk-icon] { color: var(--fwre-green); }

/* 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). */

/* Front design switcher (the per-menu `theme` selector analog) */
.fwre-design-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fwre-space-6); }
.fwre-design-switch-label { margin-right: var(--fwre-space-6); font-size: var(--fwre-text-md); }

/* 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; }

/* 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 (incidental #377).
   `: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). Scoped to
   .fwre-search with LITERAL light values (not theme tokens, which resolve dark in :root) so the
   panel stays light regardless of the demo's dark theme; the surrounding frame is untouched. */
.fwre-search.fwre-mod-search:is(#fwre, #fwre *) {
    --fwre-s-surface: #ffffff; --fwre-s-surface-2: #f1f5f3; --fwre-s-border: #d9e0dc;
    --fwre-s-border-strong: #b9c4be; --fwre-s-ink: #13201b; --fwre-s-ink-muted: #5b6a64;
    --fwre-s-accent: #0CAB9B; --fwre-s-on-accent: #ffffff; --fwre-s-accent-2: #D2564C; /* live --fwre-green (was #15805A) */
    background: var(--fwre-s-surface-2); border: 1px solid var(--fwre-s-border);
    border-radius: var(--fwre-radius-card); padding: var(--fwre-space-16) var(--fwre-space-18); color: var(--fwre-s-ink);
    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 CI4 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, incidental #377.) */
#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-white); border: 1px solid var(--fwre-grey-border); color: var(--fwre-black);
}
#fwre .fwre-currency-group .fwk-button.fwk-active {
    border-color: var(--fwre-green); color: var(--fwre-green); font-weight: var(--fwre-weight-semibold);
}
/* 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-s-ink); }
/* 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 (incidental #345).
   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-s-ink-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-s-ink-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. The --fwre-s-*
   literals are re-declared on #fwre (the front office is a light-only design; the
   search panel re-declares the same values for its own scope). */
#fwre {
    --fwre-s-surface: #ffffff; --fwre-s-surface-2: #f1f5f3; --fwre-s-border: #d9e0dc;
    --fwre-s-border-strong: #b9c4be; --fwre-s-ink: #13201b; --fwre-s-ink-muted: #5b6a64;
}
#fwre .fwk-input, #fwre .fwk-select, #fwre .fwk-textarea,
#fwre .fwre-ms-toggle {
    background-color: var(--fwre-s-surface) !important; color: var(--fwre-s-ink) !important; /* -color: keep the select caret glyph (fwre-ms.css) */
    border: 1px solid var(--fwre-s-border-strong) !important; border-radius: var(--fwre-radius-sm);
}
#fwre .fwk-input::placeholder, #fwre .fwk-textarea::placeholder { color: var(--fwre-s-ink-muted); opacity: 1; }
#fwre .fwre-ms-ph { color: var(--fwre-s-ink-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-white) !important; /* -color: a shorthand would erase the fwk-select caret on focus */
    border-color: var(--fwre-green) !important;
    box-shadow: 0 0 0 3px rgba(12, 171, 155, .15); /* --fwre-green #0CAB9B at 15% */
    outline: none;
}
#fwre .fwk-checkbox, #fwre .fwk-radio {
    border: 1px solid var(--fwre-s-border-strong) !important;
    background-color: var(--fwre-s-surface);
}
#fwre .fwk-checkbox:checked, #fwre .fwk-radio:checked, #fwre .fwk-checkbox:indeterminate {
    background-color: var(--fwre-green) !important;
    border-color: var(--fwre-green) !important;
}
#fwre .fwk-checkbox:focus-visible, #fwre .fwk-radio:focus-visible {
    border-color: var(--fwre-green) !important;
    box-shadow: 0 0 0 3px rgba(12, 171, 155, .15);
    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); }
/* 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-s-surface, #fff);
    border: 1px solid var(--fwre-s-border, #eee);
}
#fwre #fwre-smart-suggest li { padding: var(--fwre-space-12) var(--fwre-space-20); cursor: pointer; margin-bottom: 0; color: var(--fwre-s-ink); }
#fwre #fwre-smart-suggest li:hover,
#fwre #fwre-smart-suggest li.active { background: var(--fwre-s-surface-2); }
/* 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 !important; align-items: center; gap: 4px; padding: 2px 4px 2px 9px;
    font-size: 13px; line-height: 18px; border-radius: 4px;
    color: var(--fwa-green-hover, #1A8842); background: var(--fwa-green-light, #E6F7EC);
    border: 1px solid var(--fwa-green-pale, #D8F1E1); 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: #fff; background: var(--fwa-green, #34A55D); }
/* foot buttons need LIGHT defaults inside the light card */
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-default { background-color: var(--fwre-s-surface); color: var(--fwre-s-ink); border: 1px solid var(--fwre-s-border-strong); }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-default:hover { border-color: var(--fwre-s-accent); color: var(--fwre-s-accent); }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-primary { background: var(--fwre-s-accent); color: var(--fwre-s-on-accent); border: 1px solid transparent; }
.fwre-mod-search:is(#fwre, #fwre *) .fwk-button-secondary { background: var(--fwre-s-accent-2); color: var(--fwre-s-on-accent); border: 1px solid transparent; }
/* --- chosen → light (multiselect chips WITH COUNTS) --- */
.fwre-mod-search:is(#fwre, #fwre *) .chosen-container { width: 100% !important; font-size: var(--fwre-text-md); }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-single, .fwre-mod-search:is(#fwre, #fwre *) .chosen-choices {
    background: var(--fwre-s-surface) !important; border: 1px solid var(--fwre-s-border-strong) !important;
    border-radius: 6px !important; min-height: 38px; color: var(--fwre-s-ink) !important; box-shadow: none !important;
}
.fwre-mod-search:is(#fwre, #fwre *) .chosen-single { line-height: 36px; padding-left: var(--fwre-space-10); color: var(--fwre-s-ink) !important; }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-single span { color: var(--fwre-s-ink); }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-choices li.search-choice {
    background: var(--fwre-s-surface-2) !important; border: 1px solid var(--fwre-s-border-strong) !important;
    color: var(--fwre-s-ink) !important; box-shadow: none !important; border-radius: 5px; padding: var(--fwre-space-3) var(--fwre-space-20) var(--fwre-space-3) 7px; /* 7px: hold, off-scale (decisions r2) */
}
.fwre-mod-search:is(#fwre, #fwre *) .chosen-choices li.search-choice span { color: var(--fwre-s-ink); }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-choices li.search-choice .search-choice-close { opacity: .6; }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-choices li.search-choice .search-choice-close:hover { opacity: 1; }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-choices li.search-field input[type="text"] { color: var(--fwre-s-ink) !important; }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-drop { background: var(--fwre-s-surface); border: 1px solid var(--fwre-s-border-strong); box-shadow: var(--fwre-shadow-sm); }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-results li { color: var(--fwre-s-ink); }
.fwre-mod-search:is(#fwre, #fwre *) .chosen-results li.highlighted { background: var(--fwre-s-accent); color: var(--fwre-s-on-accent); }
/* --- ion.rangeSlider (skinFlat) → light; reproduce the live flat-skin GEOMETRY in CSS WITHOUT the
   sprite PNG (sprite-skin-flat.png is not vendored in the demo, so the vendored skinFlat.css renders
   blank line/bar/handle). The handle in this ion build (v2.1.2) is `.irs-slider`, NOT `.irs-handle > i`.
   Geometry now mirrors the live ion.rangeSlider.skinFlat.css EXACTLY (r6 P2): line/bar top:5px h:12px,
   handle top:2px 16x18 (was top:25px, the round-5 bug that sank the handle into the labels), labels
   top:25px DARK text (live --fwre-black, NOT white-on-green pills), min/max #999 on #e1e4e9, and the
   from/to pointer is `content:none` (live shows NO triangle). --- */
.fwre-mod-search:is(#fwre, #fwre *) .irs-line,
.fwre-mod-search:is(#fwre, #fwre *) .irs-line-left,
.fwre-mod-search:is(#fwre, #fwre *) .irs-line-mid,
.fwre-mod-search:is(#fwre, #fwre *) .irs-line-right { top: 5px; height: 12px; background: var(--fwre-s-border); border-radius: 6px; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-bar,
.fwre-mod-search:is(#fwre, #fwre *) .irs-bar-edge { top: 5px; height: 12px; background: var(--fwre-s-accent); }
.fwre-mod-search:is(#fwre, #fwre *) .irs-bar-edge { width: 9px; border-radius: 6px 0 0 6px; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-shadow { height: 3px; top: 34px; background: #000; opacity: .25; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-from, .fwre-mod-search:is(#fwre, #fwre *) .irs-to, .fwre-mod-search:is(#fwre, #fwre *) .irs-single { top: 25px; color: var(--fwre-black); background: transparent; font-size: var(--fwre-text-xs); line-height: 1.333; padding: 1px var(--fwre-space-5); /* 1px: hold, off-scale (decisions r2) */ border-radius: 4px; text-shadow: none; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-from:after, .fwre-mod-search:is(#fwre, #fwre *) .irs-to:after, .fwre-mod-search:is(#fwre, #fwre *) .irs-single:after { content: none; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-min, .fwre-mod-search:is(#fwre, #fwre *) .irs-max { top: 25px; color: #999; background: #e1e4e9; font-size: var(--fwre-text-xs); line-height: 1.333; padding: 1px var(--fwre-space-3); /* 1px: hold, off-scale (decisions r2) */ border-radius: 4px; text-shadow: none; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-slider { width: 16px; height: 18px; top: 2px; background: var(--fwre-s-surface); border: 1px solid var(--fwre-s-accent); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.25); cursor: pointer; }
.fwre-mod-search:is(#fwre, #fwre *) .irs-slider.state_hover, .fwre-mod-search:is(#fwre, #fwre *) .irs-slider:hover { background: var(--fwre-s-surface-2); }

/* #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-s-ink-muted, #6a6a6a); }

/* ============================================================
 * 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-white); color: var(--fwre-black);
    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;
}
#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: white;
    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-green);
    border: 3px solid white;
    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: white;
    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: white; width: 24px; height: 24px; }
#fwre .fwre-agent-item-mobile .fwk-icon-button { background: var(--fwre-green); }
#fwre .fwre-agent-item-zoom .fwk-icon-button { background: #2D8CFF; }
#fwre .fwre-agent-item-whatsapp .fwk-icon-button { background: #25D366; }
/* 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: #25D366; }
/* 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-green);
    color: var(--fwre-white);
    border-radius: var(--fwre-radius-sm);
    text-align: center;
    line-height: 38px;
    font-size: var(--fwre-text-md);
}

.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: rgba(20, 22, 40, .55); }
/* 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-white); color: var(--fwre-black); border-radius: 5px; padding: var(--fwre-space-40); box-shadow: 0 12px 40px rgba(20, 22, 40, .25); }
.fwre-agent-modal-close { position: absolute; top: 18px; right: 18px; border: 0; background: none; cursor: pointer; color: var(--fwre-black); 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-black); 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-black); }
.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-white); background: var(--fwre-green); flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.fwre-agent-profile-name { margin: 0 0 var(--fwre-space-6); }
.fwre-agent-profile-contact a { color: var(--fwre-black); }
.fwre-agent-profile-contact a:hover { color: var(--fwre-green); }
.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-grey-light); border-radius: 5px; }
.fwre-agent-profile-company-name { color: var(--fwre-black); margin-bottom: var(--fwre-space-4); }
.fwre-agent-profile-website { font-size: var(--fwre-text-base); }
.fwre-agent-profile-website a { color: var(--fwre-green); 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); }
.fwre-agent-tags .fwk-badge { background: var(--fwre-grey-border); color: var(--fwre-black); 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 .fwk-badge-primary { background: var(--fwre-green); color: var(--fwre-white); }
/* 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-white); 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-grey-border); padding-left: var(--fwre-space-20);
}
#fwre .fwre-agent-page .fwre-agent-profile-address [fwk-icon] { color: var(--fwre-green); }
/* 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: #666; font-size: var(--fwre-text-base); margin: var(--fwre-space-4) 0; }
.fwre-agent-profile-bio { color: #666; 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-white); color: var(--fwre-black);
    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-agent-reviews-section { margin-top: var(--fwre-space-26); }
.fwre-reviews-avg { color: #faa05a; font-size: var(--fwre-text-md); margin-left: var(--fwre-space-6); }
.fwre-reviews-list { margin: var(--fwre-space-12) 0; display: flex; flex-direction: column; gap: var(--fwre-space-10); }
.fwre-review-card { background: var(--fwre-grey-light); border-radius: 5px; padding: var(--fwre-space-12) var(--fwre-space-14); }
.fwre-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fwre-space-8); }
.fwre-review-name { font-weight: var(--fwre-weight-semibold); color: var(--fwre-black); }
.fwre-review-date { color: #999; font-size: var(--fwre-text-sm); }
.fwre-review-stars { color: #faa05a; font-size: var(--fwre-text-md); letter-spacing: 1px; margin-top: var(--fwre-space-2); }
.fwre-review-text { color: #666; font-size: var(--fwre-text-base); margin: var(--fwre-space-6) 0 0; }
.fwre-review-form { margin-top: var(--fwre-space-16); }
.fwre-rating-stars .fwre-star { cursor: pointer; font-size: 22px; /* hold: off-scale (decisions r2) */ color: #d0d0d0; transition: color .1s; }
.fwre-rating-stars .fwre-star.is-on { color: #faa05a; }
.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: rgba(0,0,0,.5); }
.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-white); color: var(--fwre-black); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg, 0 20px 60px rgba(0,0,0,.3)); 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-grey-dark-deep, #888);
}
.fwre-enquire-x:hover { color: var(--fwre-black); }
.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-black); }
#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; }
#fwre .fwre-mcalc-legend-name { flex: 1 1 auto; color: var(--fwre-grey-dark-deep, #666); }
#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-grey-dark-deep, #666); 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-grey-dark-deep, #888); border-right: 1px solid var(--fwre-grey-border);
}
#fwre .fwre-mcalc-icon-flip { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--fwre-grey-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-grey-light); color: var(--fwre-black);
    border-radius: 3px; cursor: pointer; text-align: center;
}
#fwre .fwre-years-selector .fwk-button.fwk-button-primary-inverse {
    background: var(--fwre-white); border-color: var(--fwre-green); color: var(--fwre-green);
}
/* live: the module's text inputs + select sit on grey-light with a grey border */
#fwre .mod-fwre-mcalculator input[type="text"],
#fwre .mod-fwre-mcalculator .fwk-select {
    background-color: var(--fwre-grey-light);
    border: 1px solid var(--fwre-grey-border); border-radius: 3px;
}
#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: #e8453c; 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-grey-dark-deep, #666); }

/* 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-green); color: var(--fwre-white); border-color: var(--fwre-green); }

/* 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: #fff;
}
#fwre .fwre-school-r-low { background: #e53935; }
#fwre .fwre-school-r-mid { background: #f57c00; }
#fwre .fwre-school-r-good { background: #2e7d32; }
#fwre .fwre-school-r-none { background: var(--fwre-grey-dark-deep, #9e9e9e); }
#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: rgba(0,0,0,.5); }
.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-white); color: var(--fwre-black); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg, 0 20px 60px rgba(0,0,0,.3)); 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-white); }

/* 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-black);
}
#fwre.fwre-property .fwk-tab > li.fwk-active > a { background: var(--fwre-grey-light); }
#fwre.fwre-property .fwk-tab > li > a::before {
    content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: -1.5px;
    background: var(--fwre-green); 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-grey-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-green); }
#fwre .fwre-invest-label { font-size: var(--fwre-text-base); color: var(--fwre-grey-dark-deep, #666); }
#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-grey-dark-deep, #666); 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-white); filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* 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-grey-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-green); margin-top: -4.5px;
}
#fwre .fwre-mcalc-field { margin-bottom: var(--fwre-space-10); }
#fwre .fwre-mcalc-legend .fwk-grid + .fwk-grid { 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-grey-dark-deep, #888); }

/* 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-brochure-dialog { width: min(560px, calc(100% - 2rem)); }
.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-brochure-dialog .fwk-form-label { display: block; font-size: var(--fwre-text-md); color: var(--fwre-grey-dark-deep, #666); margin: var(--fwre-space-8) 0 var(--fwre-space-3); }
.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-green); }
#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-grey-dark-deep, #666); }
#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-black); }

/* 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-white); color: var(--fwre-black); border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-lg, 0 8px 24px rgba(0,0,0,.25)); 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-agent-edit-panel {
    background: var(--fwre-white);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius-card);
    padding: var(--fwre-space-20) 1.5rem; /* 1.5rem: hold, off-scale (decisions r2) */
}
.fwre-agent-edit-row {
    gap: var(--fwre-space-16);
    padding: 0.85rem 0; /* hold: off-scale (decisions r2) */
    border-bottom: 1px solid var(--fwre-grey-border);
}
.fwre-agent-edit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fwre-agent-edit-row:first-child { padding-top: 0; }
.fwre-agent-edit-label {
    padding-top: 0.45rem; /* hold: off-scale (decisions r2) */
    color: var(--fwre-black);
}
/* Fields fill their column for an even, scannable form. */
.fwre-agent-edit-row .fwk-input,
.fwre-agent-edit-row .fwk-textarea,
.fwre-agent-edit-row .demo-editor-wrap { width: 100%; }
/* Image previews: sized here instead of an inline style (design-system K5). */
.fwre-agent-edit-photo { height: 140px; width: auto; object-fit: cover; }
.fwre-agent-edit-clogo { height: 60px;  width: auto; object-fit: contain; }
.fwre-agent-edit-hint  { margin-top: var(--fwre-space-6); }
@media (max-width: 640px) {
    .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. */
/* ========================================================================== */
.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 CI4 site root) — same rule as demo-property.css. */
    background: #2a2f33 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;
}
.fwre-search-hero-cap {
    color: var(--fwre-white);
    font-size: 28px; /* hold: off-scale (decisions r2) */
    font-weight: var(--fwre-weight-bold);
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    max-width: 60%;
}
/* the bar floats over the hero's bottom edge */
#fwre.fwre-search-minimal {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -28px;
    background: var(--fwre-white);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: var(--fwre-space-10) var(--fwre-space-12);
}
.fwre-search-hero + * { margin-top: 44px; /* hold: off-scale (decisions r2) */ } /* clear the floated bar */
.fwre-ms-bar { display: flex; align-items: center; gap: var(--fwre-space-4); flex-wrap: wrap; }
.fwre-ms-field { position: relative; }
.fwre-ms-field + .fwre-ms-field { border-left: 1px solid var(--fwre-grey-border); }
.fwre-ms-address { flex: 1 1 220px; min-width: 180px; border-left: 0 !important; }
.fwre-ms-trigger {
    display: flex; align-items: center; gap: var(--fwre-space-8);
    width: 100%; background: none; border: 0; cursor: pointer;
    padding: var(--fwre-space-10) var(--fwre-space-14); color: var(--fwre-black); font-size: var(--fwre-text-md);
    white-space: nowrap;
}
.fwre-ms-trigger [fwk-icon] { color: var(--fwre-green); flex: none; }
.fwre-ms-trigger .fwre-ms-sel { color: var(--fwre-grey-dark-deep); overflow: hidden; text-overflow: ellipsis; }
.fwre-ms-caret { margin-left: auto; color: var(--fwre-green); }
.fwre-ms-pop {
    background: var(--fwre-white);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius-sm);
    box-shadow: var(--fwre-shadow-sm, 0 6px 20px rgba(0, 0, 0, .12));
    padding: var(--fwre-space-16); min-width: 280px; z-index: 1010;
}
.fwre-ms-pop-wide { min-width: 360px; }
.fwre-ms-pop .fwre-mod-label { margin-bottom: var(--fwre-space-10); }
.fwre-ms-checks { display: flex; flex-wrap: wrap; gap: var(--fwre-space-6); }
.fwre-ms-checks .fwk-button { cursor: pointer; }
.fwre-ms-checks input { margin-right: var(--fwre-space-6); }
.fwre-ms-more .fwk-button, .fwre-ms-more { white-space: nowrap; }
.fwre-ms-submit .fwk-button-primary { min-width: 96px; }
/* modal grid */
.fwre-ms-modal-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fwre-space-16);
}
.fwre-ms-modal-grid .fwre-ms-mfull { grid-column: 1 / -1; }
.fwre-ms-mfield .fwre-mod-label { margin-bottom: var(--fwre-space-8); }
@media (max-width: 640px) {
    .fwre-search-hero-cap { max-width: 100%; font-size: 22px; /* hold: off-scale (decisions r2) */ }
    #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); }
    .fwre-ms-field + .fwre-ms-field { border-left: 0; }
    .fwre-ms-modal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Live-search AJAX update: loading overlay on the listing while results refresh (demo-search.js). */
.fwre-property-listing { position: relative; }
.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: rgba(255, 255, 255, 0.6);
}
#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 (inline --fwre-home-hero-img custom property set by the
   hero partial) + h1 + the search banner. Sections own their bands; the shell constrains content. */
.fwre-home-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-color: var(--fwre-footer-bg);
    background-image: var(--fwre-home-hero-img);
    background-size: cover;
    background-position: center 62%;
}
.fwre-home-hero::after { /* legibility scrim behind headline + panel */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 40%, rgb(0 0 0 / 0.38) 100%);
}
.fwre-home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: var(--fwre-space-40);
    padding-bottom: var(--fwre-space-40);
}
.fwre-home-hero-title {
    margin: 0 0 var(--fwre-space-20);
    text-align: center;
    color: var(--fwre-white);
    font-size: var(--fwre-text-hero);
    line-height: var(--fwre-lh-hero);
    font-weight: var(--fwre-weight-bold);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

/* Search banner (module/search/banner): category quick-scope radio-tabs + white panel. */
.fwre-search-banner { max-width: 640px; margin: 0 auto; }
.fwre-banner-tabs { display: flex; }
.fwre-banner-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fwre-banner-tab span {
    display: inline-block;
    padding: var(--fwre-space-8) var(--fwre-space-16);
    background: rgb(0 0 0 / 0.55);
    color: var(--fwre-white);
    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-banner-tab input:checked + span { background: var(--fwre-green); }
.fwre-banner-tab input:focus-visible + span { outline: 2px solid var(--fwre-white); outline-offset: -2px; }
.fwre-banner-panel {
    background: var(--fwre-white);
    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-banner-row { display: flex; gap: var(--fwre-space-10); }
.fwre-banner-row-main .fwk-input { flex: 1 1 auto; }
.fwre-banner-submit { flex: 0 0 auto; }
.fwre-banner-row-facets { margin-top: var(--fwre-space-10); }
.fwre-banner-row-facets .fwk-select { flex: 1 1 0; min-width: 0; }

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

/* Home content bands (latest / featured / cities / agents): shared head + cta chrome. */
.fwre-home-band { padding: var(--fwre-space-40) 0; background: var(--fwre-white); }
.fwre-home-band-tint { background: var(--fwre-grey-light); }
.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-black); }
.fwre-home-band-sub { margin: 0; color: var(--fwre-grey-dark-deep); font-size: var(--fwre-text-md); }
.fwre-home-band-cta { text-align: center; margin-top: var(--fwre-space-26); }

/* 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-home-featured .mod-fwre-layout-vertical {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fwre-space-20);
}
.fwre-home-featured .mod-fwre-latest-vertical { margin: 0; }
@media (max-width: 639px) {
    .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). */
.mod-fwre-layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mod-fwre-latest-item-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}
.mod-fwre-latest-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.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-white);
    font-size: .9rem;
    line-height: 1.4;
    text-shadow: 0 1px 1px var(--fwre-black);
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
.mod-fwre-latest-address {
    font-size: .82rem;
    opacity: .95;
}
.mod-fwre-latest-title {
    font-weight: var(--fwre-weight-semibold);
    line-height: 1.25;
    margin-top: .1rem;
}
.mod-fwre-latest-price {
    font-weight: var(--fwre-weight-semibold);
    color: var(--fwre-sand);
    margin-top: .15rem;
}

/* Cities & Neighborhoods tiles: 3 photo tiles, name + live count caption (blueprint band). */
.fwre-home-cities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fwre-space-20);
}
.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-home-city:hover { filter: brightness(1.08); text-decoration: none; }
.fwre-home-city::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
}
.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-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.fwre-home-city-name {
    display: block;
    font-size: var(--fwre-text-2xl);
    font-weight: var(--fwre-weight-semibold);
}
.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-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). */
.fwre-home-cta { background: var(--fwre-footer-bg); }
.fwre-home-cta-inner { text-align: center; }
.fwre-home-cta-title {
    margin: 0 0 var(--fwre-space-20);
    color: var(--fwre-white);
    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-home-cta .fwk-button-default,
#fwre .fwre-home-cta .fwk-button-default {
    color: var(--fwre-white) !important;
    border-color: rgba(255, 255, 255, .55) !important;
    background: transparent !important;
}
.fwre-home-cta .fwk-button-default:hover,
#fwre .fwre-home-cta .fwk-button-default:hover { border-color: var(--fwre-white) !important; }

/* 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 CI4-only
   module-showcase.css, which meant the param had no effect on Joomla/WordPress 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). */
.mod-fwre-latest-slide,
.mod-fwre-latest-slide .mod-fwre-latest-item-photo {
    height: 100%;
}
.mod-fwre-latest-slide .mod-fwre-latest-item-photo {
    aspect-ratio: auto;
    border-radius: var(--fwre-radius-card, 8px);
}
.mod-fwre-latest-slide .mod-fwre-latest-info {
    padding: var(--fwre-space-18, 1rem);
    font-size: 1rem;
}
.mod-fwre-latest-slide .mod-fwre-latest-title {
    font-size: 1.25rem;
}