/* ==========================================================================
   demo-property.css — the FW Real Estate FRONT skin (Phase 4).
   Themes the live `fwre-*` agency-template markup (fwre-list-item / fwre-item-price /
   fwre-item-icons / fwre-property / spec table / agent panel) with the demo tokens
   (teal/coral, dark default). The STRUCTURE/classes mirror the live product; only the
   look is the demo's. Scoped under #fwre #fwre so it never leaks into the frame.
   Tokens: demo-tokens-fwre.css. Green price = a real-estate convention (live fwk-text-green).
   ========================================================================== */

/* LIGHT ISLAND (round 6, owner-chosen): the product (PICTURE) region renders in the LIVE product's
   own light theme — NOT the demo's dark frame. We remap the dark-frame --demo-* tokens, scoped to
   #fwre, to the live fwre-design-styles.css :root values so the dark surfaces/ink stop bleeding in.
   The demo's dark left-sidebar frame stays; only this product island is light. The demo had invented
   THREE greens (#36c98f / #19A06E / #15805A) — none = live #0CAB9B; unify them all to the live green. */
#fwre #fwre, .fwre-site-page .fwre-info-cta, .fwre-site-page .fwre-info-stats, .fwre-site-page .fwre-info-lead {
    --fwre-green: #0CAB9B;          /* live --fwre-green (was #36c98f) */
    --demo-accent: #0CAB9B;         /* product green = live green (was #19A06E) */
    --demo-accent-hover: #0A8F82;
    --demo-on-accent: #ffffff;      /* live paints white text on the green (was dark #052016) */
    --demo-ink: #323232;            /* live --fwre-black — headings / strong text (was near-white #f1f5f3) */
    --demo-ink-muted: #6e7683;      /* live --fwre-grey-dark-deep */
    --demo-bg: #ffffff;             /* round-6 missed this: social popover / pagination / inputs were dark-frame #0f1613 */
    --demo-surface: #ffffff;        /* live card / surface white (non-featured) */
    --demo-surface-2: #F3F3F3;      /* live --fwre-grey-light */
    --demo-border: #E1E1E1;         /* live --fwre-grey-border */
    --demo-border-strong: #ADADAD;  /* live --fwre-grey */
    --demo-gradient: #0CAB9B;       /* round-12: the primary-button fill var was MISSED by the
                                       round-6 remap — #fwre .fwk-button-primary paints
                                       var(--demo-gradient), which still resolved to the invented
                                       #19A06E. Sweep EVERY var the region uses (round-6 lesson). */
    color: #666;                    /* live #fwre base text */
}

/* 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(--demo-ink);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    background: white;
    border: 1px solid transparent;
    border-radius: 3px;
}
#fwre .fwk-button-default { border-color: var(--demo-border) !important; }
#fwre .fwk-button-default svg { color: var(--demo-border-strong); }
#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(--demo-ink) !important;
    border-color: var(--fwre-green) !important;
    background: transparent !important;
}
#fwre .fwk-button-secondary {
    color: var(--fwre-green) !important;
    background-color: var(--demo-surface-2) !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(--demo-border-strong) !important; }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover svg { color: white !important; }

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

#fwre #fwre .fwk-text-muted { color: var(--demo-ink-muted) !important; }

/* ---- LISTING ---------------------------------------------------------- */
#fwre .fwre-listing-count { font-size: .9rem; }

#fwre .fwre-list-item {
    background: var(--demo-surface);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius);
    padding: 1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--demo-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#fwre .fwre-list-item:hover { border-color: var(--demo-border-strong); box-shadow: var(--demo-shadow); }

#fwre .fwre-item-media { position: relative; border-radius: var(--demo-radius-sm); overflow: hidden; }
#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 20px 20px; text-align: right;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    color: #fff; font-size: .8rem; 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 — 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(--demo-fast) var(--demo-ease), background var(--demo-fast) var(--demo-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: #fff; } /* 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) */
#fwre .fwre-status-label { position: absolute; top: .5rem; left: .5rem; z-index: 3; display: flex; flex-wrap: wrap; gap: .3rem; }
#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. */
    background: #1e87f0; color: #fff;
    padding: .12rem .5rem; border-radius: var(--demo-radius-sm); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
}

/* item options row (favorite / share / 3D / compare) */
#fwre .fwre-item-options { align-items: center; gap: .55rem; }
#fwre .fwre-favorite { color: var(--demo-ink-muted); 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; }
#fwre .fwre-item-count .fwre-3d-counter { color: #fff; } /* white only over the photo badge strip */
#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. */
.fwre-social-dropdown {
    width: auto !important;
    min-width: auto !important;
    padding: 10px !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: #fff; }
.fwre-social-dropdown a svg { color: #fff !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, #0CAB9B); }
/* 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: .6rem; flex-wrap: wrap; }
#fwre .fwre-toolbar-options-currency { display: inline-flex; }
#fwre .fwre-toolbar-options-currency .fwk-select { min-width: 96px; }
#fwre .fwre-listing-pagination { margin-top: 1.5rem; }
#fwre .pagination.fwre-pagination { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; justify-content: center; }
#fwre .fwre-pagination .page-item { display: inline-flex; }
#fwre .fwre-pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 .55rem;
    border: 1px solid var(--demo-border-strong); border-radius: var(--demo-radius-sm);
    color: var(--demo-ink); text-decoration: none; background: var(--demo-bg); font-weight: 600;
}
#fwre .fwre-pagination .page-link:hover { border-color: var(--demo-accent); color: var(--demo-accent); }
#fwre .fwre-pagination .fwk-active .page-link { background: var(--demo-accent); color: var(--demo-on-accent); border-color: var(--demo-accent); }
#fwre .fwre-pagination .fwre-page-gap .page-link { border-color: transparent; background: none; cursor: default; }

#fwre .fwre-item-data { padding: 0 .3rem; }
#fwre .fwre-item-price a { font-size: 1.7rem; font-weight: 700; }

#fwre .fwre-item-location { margin-top: .35rem; color: var(--demo-ink); }
#fwre .fwre-item-location [fwk-icon], #fwre .fwre-agent-listings [fwk-icon] { color: var(--demo-accent); }

#fwre .fwre-item-type { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
#fwre .fwre-item-type span {
    background: var(--demo-surface-2); color: var(--demo-ink-muted);
    padding: .15rem .55rem; border-radius: 999px; font-size: .78rem;
}

#fwre .fwre-item-icons { display: flex; flex-wrap: nowrap; gap: 1.1rem; margin-top: .6rem; align-items: center; }
#fwre .fwre-item-icons > div { display: flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; }
#fwre .fwre-item-icons [fwk-icon] { color: var(--demo-accent); }
@media (max-width: 639px) { #fwre .fwre-item-icons { flex-wrap: wrap; } }

#fwre .fwre-read-more {
    margin-top: .7rem;
    background: var(--demo-accent); color: var(--demo-on-accent);
    border: none; border-radius: var(--demo-radius-sm);
    padding: .45rem 1.1rem; font-weight: 600; display: inline-block; text-decoration: none;
}
#fwre .fwre-read-more:hover { background: var(--demo-accent-hover); }

#fwre .fwre-item-title { margin-top: .8rem; font-size: 1.05rem; font-weight: 700; }
#fwre .fwre-item-title a { color: var(--demo-ink); text-decoration: none; }
#fwre .fwre-item-title a:hover { color: var(--demo-accent); }
#fwre .fwre-item-text { color: var(--demo-ink-muted); font-size: .92rem; line-height: 1.5; }

#fwre .fwre-empty {
    background: var(--demo-surface); border: 1px dashed var(--demo-border-strong);
    border-radius: var(--demo-radius); padding: 1.4rem; color: var(--demo-ink-muted);
}

/* ---- SEARCH FORM ------------------------------------------------------ */
#fwre .fwre-search-form .fwk-form-label { font-size: .8rem; color: var(--demo-ink-muted); display: block; margin-bottom: .2rem; }
#fwre .fwre-search-form .fwk-input,
#fwre .fwre-search-form .fwk-select {
    width: 100%; background-color: var(--demo-bg); color: var(--demo-ink); /* -color: keep the caret glyph */
    border: 1px solid var(--demo-border-strong); border-radius: var(--demo-radius-sm);
    padding: .45rem .6rem;
}
#fwre .fwre-search-form .fwk-button-primary { background: var(--demo-accent); color: var(--demo-on-accent); border: none; }
#fwre .fwre-search-note { font-size: .78rem; }

/* ---- DETAIL ----------------------------------------------------------- */
#fwre .fwre-item-header { margin-bottom: 1.1rem; }
#fwre .fwre-item-header-title { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
#fwre .fwre-property-price { font-size: 1.7rem; font-weight: 800; margin-top: .25rem; }
#fwre .fwre-property-status .fwk-label {
    display: inline-block; margin-top: .4rem;
    background: var(--demo-accent); color: var(--demo-on-accent);
    padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
}

/* detail-page slideshow — live .fwre-property-images stage + .fwre-property-slider-items thumbs */
#fwre .fwre-property-media { margin-bottom: 1rem; }
#fwre .fwre-property-images {
    position: relative; border-radius: var(--demo-radius); overflow: hidden; aspect-ratio: 16 / 10;
    background: var(--demo-surface-2); box-shadow: var(--demo-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(--demo-fast) var(--demo-ease), background var(--demo-fast) var(--demo-ease), color var(--demo-fast) var(--demo-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: 12px; z-index: 2;
    background: rgba(0,0,0,.55); color: #fff; font-size: .8rem;
    padding: .15rem .55rem; border-radius: var(--demo-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: 8px; 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: #fff; }

/* 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: .6rem; position: relative; display: flex; align-items: center; gap: .3rem;
}
#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: .45rem;
}
/* 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(--demo-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(--demo-accent); 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(--demo-ink); text-decoration: none; opacity: .7; transition: opacity var(--demo-fast) var(--demo-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 */
#fwre .fwre-media-tabs {
    list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; gap: 1.2rem;
    border-bottom: 1px solid var(--demo-border);
}
#fwre .fwre-media-tabs > li > a {
    display: block; padding: .5rem .1rem; color: var(--demo-muted); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .95rem;
}
#fwre .fwre-media-tabs > li.fwk-active > a { color: var(--demo-accent); border-bottom-color: var(--demo-accent); }

#fwre #fwre .fwre-item-categories { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
#fwre #fwre .fwre-item-categories span {
    background: var(--demo-surface-2); color: var(--demo-ink-muted);
    padding: .12rem .5rem; border-radius: 999px; font-size: .8rem;
}

/* specification */
#fwre .fwre-property-section-header {
    font-size: 1.25rem; font-weight: 700; margin: 0 0 .8rem;
    padding-bottom: .4rem; border-bottom: 2px solid var(--demo-accent);
    display: inline-block;
}
#fwre .fwre-spec-group { margin-bottom: 1.2rem; }
#fwre .fwre-spec-group-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--demo-accent); margin: 0 0 .4rem; }
#fwre .fwre-spec-table { width: 100%; border-collapse: collapse; }
#fwre .fwre-spec-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--demo-border); font-size: .92rem; }
#fwre .fwre-spec-table tr:nth-child(odd) { background: var(--demo-hover); }
#fwre .fwre-spec-name { color: var(--demo-ink-muted); width: 45%; }
#fwre .fwre-spec-value { color: var(--demo-ink); font-weight: 600; }

#fwre .fwre-property-description-status { font-size: .82rem; margin-bottom: .5rem; }
#fwre .fwre-property-description-body,
#fwre .fwre-property-description-text { color: var(--demo-ink); line-height: 1.6; }

/* ============================================================
 * Session C — property DETAIL layout (live agency item parity)
 * ============================================================ */
#fwre .fwre-property-head { margin-bottom: 1.2rem; }
#fwre .fwre-property-title { margin: 0 0 .2rem; color: var(--demo-ink); }
#fwre .fwre-listing-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#fwre .fwre-property-info { min-width: 0; }
#fwre .fwre-property-panel {
    background: var(--demo-surface); border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius); padding: 1.1rem; box-shadow: var(--demo-shadow-sm); margin-bottom: 1rem;
}
#fwre .fwre-property-summary .fwre-item-icons { color: var(--demo-ink); }
#fwre .fwre-property-summary .fwre-list-item-text a { color: var(--demo-accent); text-decoration: none; font-weight: 600; }
/* body sections — native <details> accordion (no JS dep) */
#fwre .fwre-property-body { margin-top: 1.4rem; }
#fwre .fwre-acc-item {
    border: 1px solid var(--demo-border); border-radius: var(--demo-radius);
    margin-bottom: .8rem; background: var(--demo-surface); overflow: hidden;
}
#fwre .fwre-acc-title {
    cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 700; color: var(--demo-ink);
    display: flex; align-items: center; justify-content: space-between;
}
#fwre .fwre-acc-title::-webkit-details-marker { display: none; }
#fwre .fwre-acc-title::after { content: '+'; color: var(--demo-accent); font-size: 1.3rem; line-height: 1; }
#fwre details[open] > .fwre-acc-title::after { content: '\2212'; }
#fwre .fwre-acc-content { padding: 0 1.1rem 1.1rem; }
#fwre .fwre-plain-sections .fwre-property-section { margin-bottom: 1.4rem; }
/* "Information grouping" = Tabs (display_tabs 1, incidental-findings #271): a fwk-tab strip over a
   fwk-switcher of bare panels. UIKit hides the inactive panels itself; this is only the seam. */
#fwre .fwre-property-tabs { margin: 1.4rem 0 0; }
#fwre .fwre-tabbed-sections > .fwk-switcher > .fwre-property-section { margin-top: 0; }

/* agent panel (module/special-page card — the DIRECTORY card is the live port further down) */
#fwre .fwre-agent-panel {
    background: var(--demo-surface); border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius); padding: 1.1rem; box-shadow: var(--demo-shadow-sm); height: 100%;
}
#fwre .fwre-agent-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 .15rem; color: var(--demo-ink); }
#fwre .fwre-property-section-header,
#fwre .fwre-item-header-title { color: var(--demo-ink); }
#fwre .fwre-agent-company { font-size: .88rem; margin-bottom: .7rem; }
#fwre .fwre-agent-contacts { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
#fwre .fwre-agent-contacts li { padding: .25rem 0; display: flex; align-items: baseline; gap: .4rem; }
#fwre .fwre-agent-contacts [fwk-icon] { color: var(--demo-accent); }
#fwre .fwre-agent-contact-label { color: var(--demo-ink-muted); }
#fwre .fwre-agent-listings { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--demo-border); }

/* ============================================================
 * P-C — Listing layout variants (grid / slideshow / map / YOOTheme)
 * ============================================================ */
/* Grid */
#fwre .fwre-grid-card { overflow: hidden; border-radius: var(--demo-radius); transition: transform var(--demo-fast) var(--demo-ease), box-shadow var(--demo-fast) var(--demo-ease); }
#fwre .fwre-grid-card:hover { transform: translateY(-3px); box-shadow: var(--demo-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(--demo-accent); color: var(--demo-on-accent); font-weight: 700; font-size: .92rem; padding: .25rem .6rem; border-radius: var(--demo-radius-sm); }
#fwre .fwre-grid-count { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .78rem; padding: .15rem .5rem; border-radius: var(--demo-radius-sm); }
#fwre .fwre-grid-body { padding: .85rem 1rem 1.1rem; }
#fwre .fwre-grid-body .fwre-item-title a { color: var(--demo-ink); text-decoration: none; }
#fwre .fwre-grid-body .fwre-item-icons { color: var(--demo-ink-muted); font-size: .86rem; gap: .4rem; }

/* 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: 20px 44px;                          /* live .fwre-slideshow-view padding + gutters for the -out arrows */
    box-shadow: var(--demo-shadow-sm);            /* live --fwre-shadow-small */
    border-radius: var(--demo-radius);
}
#fwre .fwre-slideshow-main {
    position: relative; border-radius: var(--demo-radius); overflow: visible;
    background: var(--demo-surface); border: 1px solid var(--demo-border);
}
#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: 1.2rem; padding: 1.2rem; align-items: stretch; margin: 0; }
#fwre .fwre-slideshow-info-col { flex: 0 0 33%; min-width: 0; }
/* side property card design — live .fwre-slideshow-view .fwre-item-info (fwre-design-styles.css:305-325):
   grey-light card + grey-dark full-bleed header band + inline status labels (not absolute) */
#fwre .fwre-slideshow-info-col .fwre-item-info {
    background: var(--demo-surface-2); border-radius: var(--demo-radius-sm); padding: 20px; overflow: hidden;
}
#fwre .fwre-slideshow-info-col .fwre-item-info-top {
    margin: -20px -20px 10px; padding: 15px 20px; background: #e6e6e6;
    border-radius: var(--demo-radius-sm) var(--demo-radius-sm) 0 0;
}
#fwre .fwre-slideshow-info-col .fwre-item-info-top .fwre-status-label { position: relative; top: auto; left: auto; margin: 0; }
#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(--demo-radius-sm); overflow: hidden; min-height: 360px; }
#fwre .fwre-slideshow-media-col .fwre-item-slideshow { position: absolute; inset: 0; }
#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; }
#fwre .fwre-slideshow-media-col .fwre-image-counter {
    position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff;
    font-size: .8rem; padding: .15rem .55rem; border-radius: var(--demo-radius-sm); z-index: 2;
}
/* 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;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--demo-surface-2); color: var(--demo-ink); border-radius: 999px; text-decoration: none;
    box-shadow: var(--demo-shadow-sm);
}
#fwre .fwre-slideshow-out-prev:hover, #fwre .fwre-slideshow-out-next:hover { background: var(--demo-accent); color: var(--demo-on-accent); }
/* 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: 4px; }
#fwre .fwre-slideshow-out-next { left: 100%; margin-left: 4px; }
/* property-thumbnail strip */
#fwre .fwre-slideshow-thumbs { margin-top: .7rem; }
#fwre .fwre-slideshow-thumb-items {
    list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(80px, 1fr); gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory;
}
#fwre .fwre-slideshow-thumb {
    aspect-ratio: 1 / 1; border-radius: var(--demo-radius-sm); overflow: hidden; cursor: pointer;
    border: 2px solid transparent; opacity: .75; transition: opacity .12s, border-color .12s; scroll-snap-align: start;
}
#fwre .fwre-slideshow-thumb .fwk-cover-container, #fwre .fwre-slideshow-thumb img { width: 100%; height: 100%; }
#fwre .fwre-slideshow-thumb img { object-fit: cover; display: block; }
#fwre .fwre-slideshow-thumb:hover { opacity: 1; }
#fwre .fwre-slideshow-thumb.fwre-active { border-color: var(--demo-accent); opacity: 1; }
#fwre .fwre-slideshow-note { font-size: .9rem; }
@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: 16px 8px; }
    #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: .5rem; min-height: 240px; background: var(--demo-surface-2); border: 1px dashed var(--demo-border-strong); color: var(--demo-accent); }
#fwre .fwre-map-canvas [fwk-icon] { font-size: 2.4rem; }
#fwre .fwre-map-pin-count { color: var(--demo-ink); font-weight: 600; }
#fwre .fwre-map-note { padding: .8rem 1rem; font-size: .85rem; }

/* 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. */
#fwre .fwre-map-view { display: flex; gap: .75rem; align-items: stretch; }
#fwre .fwre-map-view-map { flex: 1 1 auto; min-height: 460px; border-radius: var(--demo-radius); overflow: hidden; }
#fwre .fwre-map-view-map-items { flex: 0 0 33%; max-width: 360px; overflow-y: auto; max-height: 560px; }
#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); }
/* Overlay idiom (owner-requested 2026-07-22): full-width map, selected card floats
   top-left on it (fwk-position-top-left + fwk-position-small in the markup) */
#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;
}
#fwre .fwre-map-overlay .fwre-map-view-map-items .fwre-item,
#fwre .fwre-map-overlay .fwre-map-view-map-items .fwre-map-card {
    /* float tier: a floating-over-map card needs a stronger lift than the flat --demo-shadow */
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .20);
}
@media (max-width: 959px) {
    #fwre .fwre-map-view { flex-direction: column; }
    #fwre .fwre-map-view-map-items { max-width: none; max-height: 320px; }
}
/* Side property card — mirrors listing.table_item.php fields (image / price / address / beds-baths / title) */
#fwre .fwre-map-card { background: var(--demo-bg); border: 1px solid var(--demo-border); border-radius: var(--demo-radius); overflow: hidden; margin-bottom: .75rem; }
#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: .75rem .9rem; }
#fwre .fwre-map-card .fwre-item-price .fwk-text-green { color: var(--fwre-green); }
#fwre .fwre-map-card .fwre-item-address { font-size: .85rem; margin-top: .25rem; }
#fwre .fwre-map-card .fwre-item-title a { color: var(--demo-ink); }
#fwre .fwre-map-card .fwre-read-more { margin-top: .5rem; }

/* YOOTheme skin + note */
#fwre .fwre-yoo-note [fwk-icon] { color: var(--demo-accent); }
.fwre-yoo .fwre-grid-card { border-radius: var(--demo-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: 1.5rem; }
#fwre .fwre-agent-hero .fwre-agent-listings { display: inline-flex; align-items: center; gap: .35rem; border: 0; padding: 0; margin-top: .6rem; color: var(--demo-accent); }

#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(--demo-line, #e5e5e5); }
/* Fixed 130px label column: labels WRAP (nowrap overflowed long custom-field names into the
   value cell under table-layout fixed). */
#fwre .fwre-compare-table th.fwre-compare-label { text-align: left; color: var(--demo-ink-muted); white-space: normal; overflow-wrap: break-word; width: 130px; }
#fwre .fwre-compare-table td { vertical-align: top; min-width: 150px; }
/* Header card cell: one-line linked title (fwk-tooltip carries the full text) above the shared
   card_media region (slider + statuses + quick view), remove button below - full cell width. */
/* FIXED table layout + colgroup: card columns stay EQUAL (auto layout sized columns by text
   content, so the 4/3 sliders got unequal heights). Cols sum < container -> extra space is
   shared equally (cards >=280px); sum > container -> the table widens and the scroll kicks in. */
#fwre .fwre-compare-table { table-layout: fixed; width: 100%; }
#fwre .fwre-compare-table col.fwre-compare-label-col { width: 130px; }
#fwre .fwre-compare-table col.fwre-compare-card-col { width: 280px; }
/* width:0 + min-width:100% = take the column width the MEDIA region establishes, never widen it -
   so a long title ellipsizes instead of stretching the cell (table cells ignore max-width). */
#fwre .fwre-compare-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; margin-bottom: .45rem; }
#fwre .fwre-compare-title a { color: var(--demo-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
#fwre .fwre-compare-card-cell .fwre-item-media { border-radius: var(--demo-radius-sm); overflow: hidden; }
/* Danger = OUTLINE (owner call): red text + red border on the surface, light red fill on hover. */
#fwre .fwre-compare-remove.fwk-button-danger {
    display: block; margin: .6rem auto 0; font-size: .78rem; line-height: 30px;
    background: transparent; color: var(--fwre-red, #FF4C00); border: 1px solid var(--fwre-red, #FF4C00);
}
#fwre .fwre-compare-remove.fwk-button-danger:hover { background: #fff3f0; color: var(--fwre-red, #FF4C00); }
/* Grouped matrix (full-field compare): category header rows + the live winner/loser tints
   (fwre-design-styles.css compare block: winner #eaf4ec/#2e7d40, loser #fff3f0/#b84040). */
#fwre .fwre-compare-table {
    --demo-compare-winner-bg: #eaf4ec;
    --demo-compare-winner-ink: #2e7d40;
    --demo-compare-loser-bg: #fff3f0;
    --demo-compare-loser-ink: #b84040;
}
/* Whole line green (owner call): the group header paints the accent across the full row. */
#fwre .fwre-compare-table tr.fwre-compare-cat > th {
    text-align: left; color: var(--demo-on-accent, #fff); background: var(--demo-accent);
    font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em;
    padding: .8rem .75rem; white-space: nowrap;
}
#fwre .fwre-compare-table td.fwre-compare-winner { background: var(--demo-compare-winner-bg); color: var(--demo-compare-winner-ink); font-weight: 600; }
#fwre .fwre-compare-table td.fwre-compare-loser { background: var(--demo-compare-loser-bg); color: var(--demo-compare-loser-ink); }
#fwre .fwre-compare-table tr[data-hl-type="lower"] td { font-weight: 600; } /* live bolds the price row */

#fwre .fwre-manager-table a { color: var(--demo-accent); 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 .fwre-manager {
    background: var(--demo-bg); color: var(--demo-ink);
    border-radius: var(--demo-radius); padding: 26px 28px;
}
/* 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: 12px; margin-top: 30px; }
#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 .fwre-manager { font-size: 12px; line-height: 1.5; }
#fwre .fwre-manager form { font-size: 12px; }
#fwre .fwre-manager form .fwk-input,
#fwre .fwre-manager form .fwk-select {
    background-color: var(--demo-surface-2);
    border-radius: 3px;
    border: 1px solid var(--demo-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: 4px; list-style: none; padding: 0; margin: 0 0 18px;
    border-bottom: 1px solid var(--demo-border); }
#fwre .fwre-pm-tabs li a { display: block; padding: 10px 18px; color: var(--demo-ink-muted);
    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: 600; }
#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: 18px; }
@media (max-width: 720px) { #fwre .fwre-pm-cards { column-count: 1; } }
#fwre .fwre-pm-cards > div { break-inside: avoid; margin-bottom: 18px; }
#fwre .fwre-pm-row { margin-bottom: 12px; gap: 10px; }
#fwre .fwre-pm-dim { display: flex; align-items: center; gap: 6px; }
#fwre .fwre-pm-desc { width: 100%; min-height: 160px; }
#fwre .fwre-pm-yesno { display: inline-flex; gap: 4px; }
/* 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(--demo-border); padding: 6px 18px; }
#fwre .fwre-pm-yesno label.is-on.fwk-button-success { background: var(--fwre-green); color: #fff; border-color: var(--fwre-green); }
#fwre .fwre-pm-yesno label.is-on.fwk-button-danger { background: var(--fwre-red, #FF4C00); color: #fff; border-color: var(--fwre-red, #FF4C00); }
#fwre .fwre-pm-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
#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: 2px 6px; }
#fwre .fwre-pm-gallery-alt { width: 100%; margin-top: 4px; padding: 3px 6px; height: auto; font-size: 12px; }
#fwre .fwre-flag-featured { background: var(--demo-accent); color: var(--demo-on-accent); }

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

/* ============================================================
 * P-E — Module previews (search / latest / agent / mortgage / layout-anywhere)
 * ============================================================ */
#fwre .fwre-module-stage { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 26px; align-items: start; }
#fwre .fwre-module-stage--wide { grid-template-columns: 1fr; }
#fwre .fwre-module-card { overflow: hidden; }
#fwre .fwre-module-bar { display: flex; align-items: center; gap: .45rem; padding: .65rem 1rem; background: var(--demo-surface-2); border-bottom: 1px solid var(--demo-border); font-weight: 700; color: var(--demo-ink); }
#fwre .fwre-module-bar [fwk-icon] { color: var(--demo-accent); }
#fwre .fwre-module-about { padding-top: .25rem; }
#fwre .fwre-module-pos { font-size: .82rem; display: flex; gap: .4rem; align-items: baseline; margin-top: .8rem; }
#fwre .fwre-module-pos [fwk-icon] { color: var(--demo-accent); }
@media (max-width: 720px) { #fwre .fwre-module-stage { grid-template-columns: 1fr; } }

/* mini-list (latest/featured) */
#fwre .fwre-mod-minilist { list-style: none; margin: 0; padding: 0; }
#fwre .fwre-mod-mini { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--demo-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(--demo-radius-sm); flex-shrink: 0; }
#fwre .fwre-mod-mini-body { display: flex; flex-direction: column; }
#fwre .fwre-mod-mini-price { color: var(--demo-accent); font-weight: 700; font-size: .92rem; }
#fwre .fwre-mod-mini-addr { color: var(--demo-ink-muted); font-size: .82rem; }

/* search + mortgage widgets */
#fwre .fwre-mod-search-row { display: flex; gap: 8px; }
#fwre .fwre-mod-mortgage-out { font-size: 1.05rem; padding-top: .7rem; border-top: 1px solid var(--demo-border); }
#fwre .fwre-mod-mortgage-out strong { color: var(--demo-accent); }

/* ============================================================
 * P-F — Info pages (features / fields / prose) + Showcase skins
 * ============================================================ */
#fwre .fwre-feat-group { margin-bottom: 1.8rem; }
#fwre .fwre-feat-group-title { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .8rem; }
#fwre .fwre-feat-group-title [fwk-icon] { color: var(--demo-accent); }
#fwre .fwre-feat-card { height: 100%; display: flex; flex-direction: column; gap: .25rem; }
#fwre .fwre-feat-name { color: var(--demo-ink); }
#fwre .fwre-feat-desc { font-size: .85rem; flex: 1; }
#fwre .fwre-feat-link { color: var(--demo-accent); text-decoration: none; font-size: .85rem; font-weight: 600; margin-top: .4rem; display: inline-flex; align-items: center; gap: .2rem; }

#fwre .fwre-fieldcat-n { font-size: .8rem; font-weight: 400; }

/* Field-group cards (all-fields, visual round): banded header + calm table + proof foot. */
#fwre .fwre-spec-card { display: flex; flex-direction: column; border: 1px solid var(--demo-border); border-radius: 6px; overflow: hidden; background: var(--demo-surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.07); } /* no height:100%: masonry cards hug their rows */
#fwre .fwre-spec-card-head { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .8rem 1.1rem; background: var(--fwre-green-alpha, rgba(12,171,155,.075)); border-bottom: 1px solid var(--demo-border); color: var(--demo-ink); font-size: 1.08rem; font-weight: 700; }
#fwre .fwre-spec-card-head .fwre-fieldcat-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem; border-radius: 999px; background: var(--fwre-green, #0CAB9B); color: #fff; font-size: .8rem; font-weight: 700; }
#fwre .fwre-spec-card .fwre-spec-table { margin: 0; }
#fwre .fwre-spec-card-foot { margin-top: auto; padding: .7rem 1.1rem; border-top: 1px solid var(--demo-border); }
#fwre .fwre-spec-card-live { border-color: var(--fwre-green, #0CAB9B); }
#fwre .fwre-spec-card-live .fwre-spec-card-head { background: var(--fwre-green, #0CAB9B); color: #fff; }
/* Unlimited custom-fields claim (owner round): amber badge on the green head + claim foot. */
#fwre .fwre-unlimited-badge { margin-left: auto; font-size: .74rem; }
#fwre .fwre-unlimited-foot { display: flex; flex-direction: column; gap: .35rem; }
#fwre .fwre-unlimited-claim { color: var(--demo-ink); font-size: 1rem; line-height: 1.5; font-weight: 600; }
#fwre .fwre-spec-card-live .fwre-spec-card-head .fwre-fieldcat-n { background: #fff; color: var(--fwre-green, #0CAB9B); }

#fwre .fwre-prose > p { max-width: 760px; } /* text stays readable; bands/tables/proofs run full width */
#fwre .fwre-prose > h3:first-child { margin-top: 0; }
/* Promo scale (mls-idx round): the vendored fwk-scope island base is 12px, and the
   prose page's plain <p> inherited it. Scope the fix to the prose island, never the base. */
#fwre.fwre-prose { font-size: 1.05rem; }
#fwre .fwre-prose-sec { margin-bottom: 4.5rem; }
#fwre .fwre-prose-sec:last-child { margin-bottom: 1rem; }
#fwre .fwre-prose-sec:nth-of-type(even) { background: #FAFAFA; border: 1px solid var(--demo-border); border-radius: 10px; padding: 3rem; }
#fwre .fwre-prose-h { font-size: 2.1rem; font-weight: 700; color: var(--demo-ink); margin: 0 0 1rem; }
#fwre .fwre-prose p { color: var(--demo-ink-muted); font-size: 1.05rem; line-height: 1.6; max-width: 72ch; }
#fwre .fwre-step.fwk-card-body { padding: 1.6rem 1.5rem; }
#fwre .fwre-prose-list { list-style: none; margin: 0; padding: 0; }
#fwre .fwre-prose-list li { display: flex; gap: .5rem; align-items: baseline; padding: .3rem 0; color: var(--demo-ink); }
#fwre .fwre-prose-list [fwk-icon] { color: var(--demo-accent); }

/* Info-page schema v2 (docs/info-pages-spec.md): step strip + two-column tables (prose mode). */
#fwre .fwre-steps { margin: 1.2rem 0 2.2rem; }

/* Row spacing for every info-page grid rides UIkit's NATIVE seam: the JS-added
   .fwk-grid-margin class, with only the VALUE overridden (32px over the stock 30px).
   NEVER put CSS row-gap on an active fwk-grid: UIkit's component geometry (masonry,
   height-match, the margin classes themselves) computes from its own margins and a
   parallel gap model desynchronizes them - masonry sized the fieldcat container 64px
   short (2 gaps) and the last card overflowed into the closing band (owner report,
   2026-07-23). Same lesson as the :where() cleanup in fwre-ms.css. */
#fwre .fwre-gap-grid > .fwk-grid-margin { margin-top: 32px; }
#fwre .fwre-prose-table { margin-bottom: 1.6rem; }
#fwre .fwre-prose .fwre-chip-band { margin: .8rem 0 2rem; }
#fwre .fwre-prose-proof { margin: 1rem 0 2rem; }
#fwre .fwre-prose-callout { margin-top: 2.4rem; }
#fwre .fwre-step { height: 100%; display: flex; flex-direction: column; gap: .4rem; border-top: 3px solid var(--fwre-green, #0CAB9B); }
#fwre .fwre-step-top { display: flex; align-items: center; gap: .6rem; }
#fwre .fwre-step-top [fwk-icon] { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--fwre-green-alpha, rgba(12,171,155,.075)); color: var(--demo-accent); }
#fwre .fwre-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--demo-accent); color: #fff; font-size: 1rem; font-weight: 700; }
#fwre .fwre-step-title { color: var(--demo-ink); font-size: 1.15rem; }
#fwre .fwre-step-text { font-size: 1rem; line-height: 1.55; }

/* Prose extras (mls-idx): proof split (framed capture right), callout (the lead-capture card). */
#fwre .fwre-prose-proof { display: flex; gap: 2rem; align-items: center; margin: .4rem 0 1.2rem; }
#fwre .fwre-prose-proof-copy { flex: 1 1 46%; }
#fwre .fwre-prose-proof-panel { flex: 1 1 54%; }
#fwre .fwre-prose-proof-media { height: 250px; }
/* Lead-capture band (promo round): the paid-service pitch goes hero-grade amber, with
   dark ink for contrast, white-disc check bullets, navy CTA (amber-on-amber won't pop). */
#fwre .fwre-prose-callout { margin: 1.6rem 0 0; padding: 3rem 2.5rem; border-radius: 10px; background: linear-gradient(120deg, var(--fwre-amber, #FFC107), #f5b400); color: var(--fwre-on-amber, #212121); }
#fwre .fwre-prose-callout .fwre-prose-h { margin-top: 0; font-size: 2rem; color: var(--fwre-on-amber, #212121); }
#fwre .fwre-prose-callout p { color: var(--fwre-on-amber, #212121); max-width: 72ch; }
#fwre .fwre-prose-callout .fwre-prose-list li { color: var(--fwre-on-amber, #212121); font-size: 1.05rem; padding: .4rem 0; }
#fwre .fwre-prose-callout .fwre-callout-check {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--fwre-on-amber, #212121);
    transform: translateY(.2rem);
}
#fwre .fwre-prose-callout .fwre-callout-check svg { width: 16px; height: 16px; }
/* !important matches the base .fwre-nav-cta color rule (site.css) it must beat. */
#fwre .fwre-prose-callout .fwre-nav-cta { margin-left: 0; background: var(--fwre-navy-deep, #252f4b); color: #fff !important; }
#fwre .fwre-prose-callout .fwre-nav-cta:hover { background: var(--fwre-navy, #404c6c); color: #fff !important; filter: none; }
#fwre .fwre-prose .fwre-chip-band { margin: .4rem 0 1.2rem; }
@media (max-width: 959px) { #fwre .fwre-prose-proof { flex-direction: column; } }
/* -- Mapping visual (promo round): feed field -> arrow -> FW field, in a contained card. */
#fwre .fwre-map { max-width: 820px; margin: .6rem auto 1rem; border: 1px solid var(--demo-border); border-radius: 10px; background: var(--demo-surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); padding: .6rem 1.6rem; }
#fwre .fwre-map-head, #fwre .fwre-map-row { display: grid; grid-template-columns: minmax(240px, max-content) 2.4rem 1fr; align-items: center; gap: .8rem; padding: .7rem .2rem; }
#fwre .fwre-map-head { border-bottom: 1px solid var(--demo-border); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--demo-ink-muted); }
#fwre .fwre-map-row + .fwre-map-row { border-top: 1px solid var(--demo-border); }
#fwre .fwre-map-feed { justify-self: start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; font-weight: 600; color: #fff; background: var(--fwre-navy-deep, #252f4b); padding: .3rem .8rem; border-radius: 6px; }
#fwre .fwre-map-arrow { color: var(--fwre-green, #0CAB9B); display: inline-flex; justify-content: center; }
#fwre .fwre-map-field { font-size: 1.05rem; font-weight: 700; color: var(--demo-ink); }

/* Feature-card thumbs + badge (features-addons, schema v2 legacy cards - non-en locales). */
#fwre .fwre-feat-card { padding: 0; gap: 0; overflow: hidden; }
#fwre .fwre-feat-thumb { border-bottom: 1px solid var(--demo-border); background: var(--demo-surface-2); }
#fwre .fwre-feat-thumb img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; }
#fwre .fwre-feat-body { display: flex; flex-direction: column; gap: .25rem; flex: 1; padding: 1rem 1.2rem; }
#fwre .fwre-feat-badge { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--demo-surface-2); border: 1px solid var(--demo-border); color: var(--demo-ink-muted); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* Lead line under the page title (the article subhead). */
.fwre-site-page .fwre-info-lead { max-width: 760px; margin: -0.6rem 0 1.2rem; color: var(--demo-ink-muted); font-size: 1.02rem; }

/* Proof-number strip under the page title (legacy, pages without a hero). */
.fwre-site-page .fwre-info-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: -0.4rem 0 1.2rem; }
.fwre-site-page .fwre-info-stat { font-size: .92rem; color: var(--demo-ink-muted); }
.fwre-site-page .fwre-info-stat strong { color: var(--demo-accent); font-size: 1.05rem; }

/* ============================================================================
   Info pages, VISUAL round (docs/info-pages-spec.md): hero band, per-section
   variants, chip band, closing CTA band. Token-bound to the official design's
   --fwre-* palette (design-tokens.css is loaded on these pages); the hero
   mirrors the official home-hero idiom (product.css .fwre-home-hero), which is
   not loaded on the info pages. Loud zones: hero + navy chip band + green CTA
   band; catalogs/tables stay calm (design canon KP4).
   ========================================================================== */

/* Box-model floor for every surface these pages own: the vendored fw-uikit build has NO
   global border-box reset (only per-component), so custom components default to
   content-box and anything combining height:100% with padding OVERFLOWS its grid cell
   (the icon tiles spilled 34px under the next row - the owner's overlap report). */
.fwre-info-hero, .fwre-info-hero *,
.fwre-info-ctaband, .fwre-info-ctaband *,
.fwre-info-page .demo-stage, .fwre-info-page .demo-stage * { box-sizing: border-box; }

/* -- Hero: the page's ONE dominant element (KP3). Full-bleed photo + scrim. */
.fwre-info-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background-color: var(--fwre-navy-deep, #252f4b);
    background-image: var(--fwre-info-hero-img);
    background-size: cover;
    background-position: center 62%;
}
.fwre-info-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.30) 0%, rgb(0 0 0 / 0.62) 100%);
}
.fwre-info-hero-inner { position: relative; z-index: 1; width: 100%; padding: 4rem 0; text-align: center; }
.fwre-info-hero-title {
    margin: 0 0 .8rem;
    color: #fff;
    font-size: clamp(40px, 4.5vw, 60px);
    line-height: 1.12;
    font-weight: 700;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}
.fwre-info-hero-sub { max-width: 720px; margin: 0 auto 1.6rem; color: rgb(255 255 255 / 0.92); font-size: 1.25rem; line-height: 1.55; text-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }
/* Worksection-style proof numbers: three big figures, no pill chrome. */
.fwre-info-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3.5rem; margin-bottom: 2rem; }
.fwre-info-hero-stat {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    color: rgb(255 255 255 / 0.92); font-size: 1rem; text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
.fwre-info-hero-stat strong { color: var(--fwre-amber, #FFC107); font-size: 2.4rem; line-height: 1.1; font-weight: 700; }
.fwre-info-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* Split hero (all-fields): copy left + a framed live-UI capture right, navy gradient bg. */
.fwre-info-hero-split { background-image: linear-gradient(120deg, var(--fwre-navy-deep, #252f4b), var(--fwre-navy, #404c6c)); min-height: 360px; }
.fwre-info-hero-split::after { display: none; }
.fwre-info-hero-split .fwre-info-hero-inner { display: flex; align-items: center; gap: 2.5rem; text-align: left; }
.fwre-info-hero-split .fwre-info-hero-copy { flex: 1 1 46%; }
.fwre-info-hero-split .fwre-info-hero-sub { margin-left: 0; }
.fwre-info-hero-split .fwre-info-hero-stats,
.fwre-info-hero-split .fwre-info-hero-actions { justify-content: flex-start; }
.fwre-info-hero-panel { flex: 1 1 54%; }
.fwre-info-hero-panel .fwre-frame { display: block; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 8px; overflow: hidden; box-shadow: 0 14px 40px rgb(0 0 0 / 0.35); background: #fff; }
.fwre-info-hero-panel .fwre-frame-bar { display: flex; gap: 5px; align-items: center; height: 24px; padding: 0 10px; background: #e8e8e8; }
.fwre-info-hero-panel .fwre-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: #b5b5b5; }
.fwre-info-hero-panel-media { display: block; height: 320px; background-size: cover; background-position: top center; }
@media (max-width: 959px) {
    .fwre-info-hero-split .fwre-info-hero-inner { flex-direction: column; text-align: center; }
    .fwre-info-hero-split .fwre-info-hero-stats, .fwre-info-hero-split .fwre-info-hero-actions { justify-content: center; }
    .fwre-info-hero-panel { width: 100%; }
}

/* Shared big-CTA sizing + the white ghost secondary (hero + CTA band). */
.fwre-info-cta-lg { font-size: 1.1rem !important; padding: .85rem 2rem !important; margin-left: 0 !important; }
.fwre-info-ghost-btn {
    display: inline-flex; align-items: center; padding: .85rem 2rem;
    border: 2px solid rgb(255 255 255 / 0.85); border-radius: var(--fwre-radius-cta, 999px);
    background: rgb(255 255 255 / 0.14);
    color: #fff !important; font-size: 1.1rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease;
}
.fwre-info-ghost-btn:hover { background: rgb(255 255 255 / 0.15); text-decoration: none; }

/* -- Vertical rhythm (owner review 2026-07-22: generous section separation, bigger over
      smaller). Sections alternate a tinted inset band for unmistakable separation. */
.fwre-site-page.fwre-info-page { padding-top: 3.4rem; padding-bottom: 3.4rem; }
#fwre.fwre-features > .fwre-feat-group { margin-bottom: 7rem; }
#fwre.fwre-features > .fwre-feat-group:nth-of-type(even) { background: #FAFAFA; border: 1px solid var(--demo-border); border-radius: 10px; padding: 3rem; } /* near-white band (owner: #F3F3F3 read too dark) */
#fwre.fwre-features > .fwre-feat-group:last-child { margin-bottom: 3.5rem; }
#fwre .fwre-pack-band { margin-top: 0; }

/* -- Tier legend (features pages): the chip decoder, up front under the hero. */
#fwre .fwre-tier-legend { margin: 0 0 2.6rem; color: var(--demo-ink-muted); font-size: 1.02rem; }
#fwre .fwre-tier-legend .fwre-tier { margin-left: 0; margin-right: .25rem; }
#fwre .fwre-tier-legend-sep { margin: 0 .7rem; color: var(--demo-border-strong); }

/* -- Per-group proof CTA: one findable amber action per section. */
#fwre .fwre-group-cta { text-align: center; margin-top: 2rem; }
#fwre .fwre-group-cta .fwre-nav-cta { margin-left: 0; font-size: 1.02rem; padding: .7rem 1.8rem; }

/* -- Section heads: big icon disc + title + goal caption. */
#fwre .fwre-feat-group { margin-bottom: 2.6rem; }
#fwre .fwre-feat-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2rem; }
#fwre .fwre-feat-head-icon {
    flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fwre-green, #0CAB9B); color: #fff;
}
#fwre .fwre-feat-head-icon svg { width: 27px; height: 27px; }
#fwre .fwre-feat-group-title { margin: 0; font-size: 2.1rem; font-weight: 700; color: var(--demo-ink); }
#fwre .fwre-feat-caption { margin: .25rem 0 0; color: var(--demo-ink-muted); font-size: 1.12rem; }

/* -- Browser frame around feature-preview captures (UI in a frame reads as "the product"). */
#fwre .fwre-frame { display: block; border: 1px solid var(--demo-border); border-radius: 6px 6px 0 0; overflow: hidden; background: #fff; }
#fwre .fwre-frame-bar { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; background: #E8E8E8; border-bottom: 1px solid var(--demo-border); } /* darker than the #FAFAFA band so framed cards don't melt into it */
#fwre .fwre-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-border-strong); opacity: .55; }
#fwre .fwre-frame-media { display: block; height: 300px; background-size: cover; background-position: top center; }
#fwre .fwre-photo-card .fwre-frame { border: 0; border-bottom: 1px solid var(--demo-border); border-radius: 0; }
#fwre .fwre-lead-card-frame { flex: 1 1 58%; border-radius: 0; border: 0; border-right: 1px solid var(--demo-border); display: flex; flex-direction: column; }
#fwre .fwre-lead-card-frame .fwre-frame-media { flex: 1; min-height: 280px; }

/* -- Free-vs-add-on tier chips (the live promo table's Core/Free vs Add-on/Subscription split). */
#fwre .fwre-tier { display: inline-block; margin-left: .35rem; padding: .16rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
#fwre .fwre-tier-core { background: var(--fwre-green-alpha, rgba(12,171,155,.075)); color: var(--fwre-green, #0CAB9B); border: 1px solid var(--fwre-green, #0CAB9B); }
#fwre .fwre-tier-addon { background: rgb(255 193 7 / 0.12); color: #8a6d00; border: 1px solid var(--fwre-amber, #FFC107); }

/* -- Packaging band: the free-core + add-ons + subscription story. Second-loudest zone
      (marketing round 2): full green gradient, white copy, centered, hero-grade CTAs. */
#fwre .fwre-pack-band { margin-top: .4rem; padding: 3rem 2.5rem 3.2rem; border-radius: 10px; background: linear-gradient(120deg, var(--fwre-green, #0CAB9B), var(--fwre-green-hover, #0A8F82)); text-align: center; }
#fwre .fwre-pack-title { font-size: 2.2rem; font-weight: 700; color: #fff; margin-bottom: 1.2rem; }
#fwre .fwre-pack-points { list-style: none; margin: 0 auto 1.8rem; padding: 0; max-width: 760px; text-align: left; }
#fwre .fwre-pack-points li { display: flex; gap: .6rem; align-items: baseline; padding: .45rem 0; color: #fff; font-size: 1.1rem; line-height: 1.55; }
/* Round 4: visible bullets, white disc + green check (the amber play-arrow outlines
   disappeared on the green band). */
#fwre .fwre-pack-points .fwre-pack-check {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--fwre-green, #0CAB9B);
    transform: translateY(.2rem);
}
#fwre .fwre-pack-points .fwre-pack-check svg { width: 16px; height: 16px; }
#fwre .fwre-pack-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
#fwre .fwre-pack-actions .fwre-nav-cta { margin-left: 0; font-size: 1.1rem; padding: .85rem 2rem; }
#fwre .fwre-pack-ghost { display: inline-flex; align-items: center; padding: .85rem 2rem; border: 2px solid rgb(255 255 255 / 0.85); border-radius: var(--fwre-radius-cta, 999px); background: rgb(255 255 255 / 0.14); color: #fff !important; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: background .15s ease; }
#fwre .fwre-pack-ghost:hover { background: rgb(255 255 255 / 0.25); text-decoration: none; }

/* -- photo-cards: big property-photography cards with a label bar. */
#fwre .fwre-photo-card {
    display: flex; flex-direction: column; height: 100%; border-radius: 6px; overflow: hidden;
    background: var(--demo-surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.10);
    text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
#fwre .fwre-photo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.16); text-decoration: none; }
#fwre .fwre-photo-card-media { display: block; height: 168px; background-size: cover; background-position: center; }
#fwre .fwre-photo-card-bar { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem 1.2rem; }
#fwre .fwre-photo-card-name { color: var(--demo-ink); font-size: 1.15rem; font-weight: 700; }
#fwre .fwre-photo-card-name::after { content: ' \2192'; color: var(--fwre-green, #0CAB9B); font-weight: 700; }
#fwre .fwre-photo-card-desc { color: var(--demo-ink-muted); font-size: 1.02rem; }

/* -- feature-grid: one BIG lead card (photo left, story right) + photo cards below. */
#fwre .fwre-lead-card {
    display: flex; margin-bottom: 2rem; border-radius: 6px; overflow: hidden;
    background: var(--demo-surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.10);
    text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
#fwre .fwre-lead-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.16); text-decoration: none; }
#fwre .fwre-lead-card-media { flex: 1 1 58%; min-height: 280px; background-size: cover; background-position: center; }
#fwre .fwre-lead-card-body { flex: 1 1 42%; padding: 2.5rem 2.75rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; align-items: flex-start; }
#fwre .fwre-photo-badge {
    display: inline-block; padding: .2rem .8rem; border-radius: 999px;
    background: var(--fwre-amber, #FFC107); color: var(--fwre-on-amber, #212121);
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
#fwre .fwre-lead-card-name { color: var(--demo-ink); font-size: 1.8rem; font-weight: 700; }
#fwre .fwre-lead-card-desc { margin: 0; color: var(--demo-ink-muted); font-size: 1.1rem; line-height: 1.55; }
/* The card itself is the <a>, so the go-affordance is a button-styled span (no nested link). */
#fwre .fwre-lead-card-go {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem;
    padding: .7rem 1.8rem; border-radius: var(--fwre-radius-cta, 999px);
    background: var(--fwre-amber, #FFC107); color: var(--fwre-on-amber, #212121);
    font-weight: 700; font-size: 1.02rem; transition: background .15s ease;
}
#fwre .fwre-lead-card:hover .fwre-lead-card-go { background: var(--fwre-amber-hover, #e6ad00); }

/* -- icon-tiles: white benefit cards (round 4: the mint strips read like a settings
      list; these get card weight, two-line copy and a See-it affordance). */
#fwre .fwre-icon-tile {
    display: flex; align-items: flex-start; gap: 1.1rem; height: 100%;
    padding: 1.5rem 1.6rem; border-radius: 6px;
    background: var(--demo-surface); border: 1px solid var(--demo-border);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#fwre a.fwre-icon-tile:hover { border-color: var(--fwre-green, #0CAB9B); box-shadow: 0 8px 20px rgb(0 0 0 / 0.14); text-decoration: none; }
#fwre .fwre-icon-tile-disc {
    flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fwre-green, #0CAB9B); color: #fff;
}
#fwre .fwre-icon-tile-disc svg { width: 24px; height: 24px; }
#fwre .fwre-icon-tile-text { display: flex; flex-direction: column; gap: .3rem; }
#fwre .fwre-icon-tile-name { color: var(--demo-ink); font-size: 1.15rem; font-weight: 700; }
#fwre .fwre-icon-tile-desc { color: var(--demo-ink-muted); font-size: 1rem; line-height: 1.55; }
#fwre .fwre-icon-tile-go { margin-top: .15rem; color: var(--fwre-green, #0CAB9B); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .2rem; }

/* -- chip-band: navy provider band (loud zone #2). */
#fwre .fwre-chip-band {
    display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
    margin-bottom: 1rem; padding: 1.6rem 1.8rem; border-radius: 6px;
    background: linear-gradient(120deg, var(--fwre-navy-deep, #252f4b), var(--fwre-navy, #404c6c));
}
#fwre .fwre-chip-band-title { color: #fff; font-size: 1.25rem; font-weight: 700; }
#fwre .fwre-chip-band-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
#fwre .fwre-chip {
    padding: .3rem .85rem; border-radius: 999px;
    background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.25);
    color: #fff; font-size: .9rem; font-weight: 600;
}
#fwre .fwre-chip-band .fwre-nav-cta { margin-left: 0; align-self: center; margin-top: .6rem; }

/* Provider variant of the band: feed-network line art fills the empty bottom-right
   (decorative, low opacity, kept clear of the cards by the reserved padding). */
#fwre .fwre-chip-band-providers {
    position: relative; overflow: hidden;
}
#fwre .fwre-chip-band-providers::before {
    content: ''; position: absolute; right: 80px; bottom: 140px;
    width: 460px; height: 300px;
    background: url('../assets/img/info-photos/feed-network.svg') no-repeat right bottom / contain;
    opacity: .18; pointer-events: none;
}
#fwre .fwre-chip-band-providers > * { position: relative; }

/* -- v2.4 provider cards: region-grouped white cards ON the navy band. */
#fwre .fwre-provider-region {
    margin-top: .6rem; color: rgb(255 255 255 / 0.72);
    font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}
#fwre .fwre-provider-region:first-of-type { margin-top: 0; }
#fwre .fwre-provider-grid { width: 100%; }
#fwre .fwre-provider-grid > .fwk-grid-margin { margin-top: 16px; } /* native seam, not row-gap */
#fwre .fwre-provider-card {
    height: 100%; padding: 1.1rem 1.25rem; border-radius: 6px;
    background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.20);
    display: flex; flex-direction: column; gap: .4rem;
}
#fwre .fwre-provider-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
#fwre .fwre-provider-name { color: var(--demo-ink); font-size: 1.08rem; font-weight: 700; }
#fwre .fwre-provider-type {
    flex: 0 0 auto; padding: .14rem .65rem; border-radius: 999px;
    background: var(--demo-surface-2); color: var(--demo-ink-muted);
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
#fwre .fwre-provider-desc { color: var(--demo-ink-muted); font-size: .95rem; line-height: 1.5; }

/* -- Closing CTA band (loud zone #3): full-bleed navy, distinct from the green
      packaging band directly above it (owner review, round 4). */
.fwre-info-ctaband { background: linear-gradient(120deg, var(--fwre-navy-deep, #252f4b), var(--fwre-navy, #404c6c)); }
.fwre-info-ctaband-inner { padding: 3.5rem 0 3.7rem; text-align: center; }
.fwre-info-ctaband-title { margin: 0 0 .5rem; color: #fff; font-size: 2.2rem; font-weight: 700; }
.fwre-info-ctaband-text { max-width: 680px; margin: 0 auto 1.6rem; color: rgb(255 255 255 / 0.92); font-size: 1.15rem; }
.fwre-info-ctaband-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

@media (max-width: 639px) {
    .fwre-info-hero { min-height: 340px; }
    #fwre .fwre-lead-card { flex-direction: column; }
    #fwre .fwre-lead-card-media { min-height: 200px; }
    #fwre .fwre-lead-card-body { padding: 1.2rem 1.3rem; }
}

/* 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: .4rem; }
.fwre-design-switch-label { margin-right: .35rem; font-size: .85rem; }

/* 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: 1.2rem; }
#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(--demo-radius); padding: 1rem 1.1rem; 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. */
#fwre .fwre-mod-search-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; align-items: end; }
@container (min-width: 440px) { #fwre .fwre-mod-search-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 720px) { #fwre .fwre-mod-search-grid { grid-template-columns: repeat(4, 1fr); } }
#fwre .fwre-mod-field-text { grid-column: 1 / -1; }
#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%; }
.fwre-mod-search:is(#fwre, #fwre *) .fwre-mod-label, .fwre-mod-search:is(#fwre, #fwre *) .fwk-text-bolder { color: var(--fwre-s-ink); }
.fwre-mod-search:is(#fwre, #fwre *) .fwre-mod-field .fwk-form-label { display: block; font-size: .78rem; margin-bottom: .25rem; color: var(--fwre-s-ink-muted); }
/* native inputs/selects: light field, dark text */
.fwre-mod-search:is(#fwre, #fwre *) .fwk-input, .fwre-mod-search:is(#fwre, #fwre *) .fwk-select {
    background-color: var(--fwre-s-surface) !important; color: var(--fwre-s-ink) !important; /* -color: keep the caret glyph */
    border: 1px solid var(--fwre-s-border-strong) !important; border-radius: var(--demo-radius-sm);
}
.fwre-mod-search:is(#fwre, #fwre *) .fwk-input::placeholder { color: var(--fwre-s-ink-muted); }
/* Radius is disabled until a place is entered (it measures FROM an address) — testing-findings #2.
   Muted + not-allowed so it reads as "not yet", and the reason sits under the field. */
/* The hint is an ICON WITH A TOOLTIP, not a caption (2026-08-07): as prose it ran to three lines under
   a short field and pushed the whole first column of the grid down. Its TEXT stays in the DOM,
   visually hidden — aria-describedby has to resolve to something readable and a tooltip is
   hover/focus-only. Keep .fwre-mod-hint-text unreachable to the eye but never `display:none`, which
   would take it out of the accessibility tree as well and defeat the point.
   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 .fwk-input:disabled { opacity: .55; cursor: not-allowed; }
/* The whole radius CELL carries the hint (see mod_search.php): `display: block` so the span does not
   shrink-wrap the input out of its column, and `pointer-events: none` on the disabled input hands the
   hover/click upwards instead of relying on a browser dispatching to a disabled control. `not-allowed`
   stays on the span around the box, so it reads over the box and not over the label. */
.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 .fwre-mod-hint { display: inline-flex; vertical-align: middle; margin-left: .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, the cell is what you point at (2026-08-07). */
.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;
}
/* foot: More-options + Save (left) ⟂ Clear+Search (right, margin-left:auto) */
#fwre .fwre-mod-search-foot { display: flex; align-items: center; gap: .8rem; 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; }
/* 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: 12px 20px; 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 - 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: 6px; }
#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: .7rem; 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: .9rem; }
.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: .6rem; 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: 3px 20px 3px 7px;
}
.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(--demo-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: #323232; background: transparent; font-size: 10px; line-height: 1.333; padding: 1px 5px; 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: 10px; line-height: 1.333; padding: 1px 3px; 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: .85rem; 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.fwre-agents {
    background: var(--demo-bg); color: var(--demo-ink);
    border-radius: var(--demo-radius); padding: 26px 28px;
}
#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 15px 15px;
}
#fwre .fwre-agent-item-counter {
    color: white;
    padding: 4px 10px;
    font-size: 12px;
    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: 2px; }
#fwre .fwre-agent-info {
    height: 100%;
    padding: 20px;
    text-align: center;
    background: white;
    border-radius: 3px;
    overflow: hidden;
}
#fwre .fwre-agent-info .fwk-button { padding-left: 15px; padding-right: 15px; 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: 1rem; }
#fwre .fwre-agent-item-contacts > div + div { margin-top: 8px; }
#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 15px;
    background: var(--demo-gradient);
    color: var(--demo-on-accent);
    border-radius: var(--demo-radius-sm);
    text-align: center;
    line-height: 38px;
    font-size: .875rem;
}

.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: 20px; }
.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: #fff; color: #323232; border-radius: 5px; padding: 40px; 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: #323232; padding: 6px; line-height: 0; }
.fwre-agent-profile-grid { display: flex; gap: 24px; 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: 16px; color: #323232; margin-bottom: 12px; }
.fwre-agent-profile-info { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: #323232; }
.fwre-agent-profile-contact { display: flex; align-items: center; }
.fwre-agent-profile-contact [fwk-icon], .fwre-agent-profile-contact .fwk-icon { color: #adadad; flex: 0 0 auto; }
.fwre-agent-profile-contact a { color: #323232; }
.fwre-agent-profile-contact a:hover { color: #0CAB9B; }
.fwre-agent-profile-links { margin-top: 6px; }
.fwre-agent-modal-dialog .fwk-button { text-transform: none; } /* live .fwk-button: no uppercase */
.fwre-agent-profile-company { margin-top: 22px; padding: 15px; background: #F3F3F3; border-radius: 5px; }
.fwre-agent-profile-company-name { color: #323232; margin-bottom: 4px; }
.fwre-agent-profile-website { font-size: 13px; }
.fwre-agent-profile-website a { color: #0CAB9B; text-decoration: none; }
.fwre-agent-modal-active { overflow: hidden; }
@media (max-width: 640px) {
    .fwre-agent-modal-dialog { padding: 24px; }
    .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: 13px; }
.fwre-agent-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fwre-agent-tags .fwk-badge { background: #e1e1e1; color: #323232; border-radius: 3px; padding: 2px 8px; font-size: 11px; line-height: 1.7; }
.fwre-agent-tags .fwk-badge-primary { background: #0CAB9B; color: #fff; }
.fwre-agent-profile-company-row { display: flex; gap: 16px; 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: 13px; margin: 4px 0; }
.fwre-agent-profile-bio { color: #666; font-size: 14px; 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 .fwre-agent-page {
    background: var(--demo-bg); color: var(--demo-ink);
    border-radius: var(--demo-radius); padding: 26px 28px;
}

/* Agent reviews (live profile_public.php:216-328) — list + star-rating submit form */
.fwre-agent-reviews-section { margin-top: 26px; }
.fwre-reviews-avg { color: #faa05a; font-size: 14px; margin-left: 6px; }
.fwre-reviews-list { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.fwre-review-card { background: var(--demo-surface-2, #F3F3F3); border-radius: 5px; padding: 12px 14px; }
.fwre-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fwre-review-name { font-weight: 600; color: #323232; }
.fwre-review-date { color: #999; font-size: 12px; }
.fwre-review-stars { color: #faa05a; font-size: 14px; letter-spacing: 1px; margin-top: 2px; }
.fwre-review-text { color: #666; font-size: 13px; margin: 6px 0 0; }
.fwre-review-form { margin-top: 16px; }
.fwre-rating-stars .fwre-star { cursor: pointer; font-size: 22px; color: #d0d0d0; transition: color .1s; }
.fwre-rating-stars .fwre-star.is-on { color: #faa05a; }
.fwre-review-msg { margin: 8px 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: .2rem; }
.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;
    background: var(--demo-surface, #fff); color: var(--demo-ink, #323232); border-radius: var(--demo-radius);
    box-shadow: var(--demo-shadow-lg, 0 20px 60px rgba(0,0,0,.3)); padding: 1.6rem; max-height: 88vh; overflow: auto;
}
.fwre-enquire-x {
    position: absolute; top: .6rem; right: .8rem; background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--demo-muted, #888);
}
.fwre-enquire-x:hover { color: var(--demo-ink, #323232); }
.fwre-enquire-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

/* mortgage calculator (P7) — live mod_fwre_mortgage: donut (yearly payment) + legend + inputs. */
#fwre .fwre-mod-mortgage .fwre-module-bar { font-weight: 600; margin-bottom: .8rem; }
#fwre .mod-fwre-mcalc-chart { position: relative; margin-bottom: 1rem; }
/* live: the chart title flows ABOVE the donut; the donut centre carries the $ total text */
#fwre .mod-fwre-mcalc-chart-title { font-weight: 600; color: var(--demo-ink, #323232); }
#fwre .fwre-mcalc-donut { display: block; margin: 0 auto; max-width: 200px; }
#fwre .fwre-mcalc-legend { margin-top: .8rem; text-align: left; }
#fwre .fwre-mcalc-legend-row { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; font-size: .9rem; }
#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(--demo-muted, #666); }
#fwre .fwre-mcalc-legend-val { font-weight: 600; }
#fwre .fwre-mod-mortgage .fwk-form-label { display: block; font-size: .82rem; color: var(--demo-muted, #666); margin: .55rem 0 .2rem; }
#fwre .fwre-mcalc-field { position: relative; }
#fwre .fwre-mcalc-field .fwk-input { width: 100%; padding-left: 1.9rem; }
#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(--demo-muted, #888); border-right: 1px solid var(--demo-border, #e1e1e1);
}
#fwre .fwre-mcalc-icon-flip { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--demo-border, #e1e1e1); }
#fwre .fwre-mcalc-field .fwk-input { padding-left: 1.9rem; }
/* 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 .fwre-years-selector .fwk-button {
    padding: 0; min-height: 30px; border: 1px solid transparent;
    background: var(--demo-surface-2, #F3F3F3); color: var(--demo-ink, #323232);
    border-radius: 3px; cursor: pointer; text-align: center;
}
#fwre #fwre .fwre-years-selector .fwk-button.fwk-button-primary-inverse {
    background: var(--demo-surface, #fff); border-color: var(--fwre-green, #0CAB9B); color: var(--fwre-green, #0CAB9B);
}
/* live: the module's text inputs + select sit on grey-light with a grey border */
#fwre #fwre .mod-fwre-mcalculator input[type="text"],
#fwre #fwre .mod-fwre-mcalculator .fwk-select {
    background-color: var(--demo-surface-2, #F3F3F3);
    border: 1px solid var(--demo-border, #e1e1e1); border-radius: 3px;
}
#fwre #fwre .mod-fwre-mcalculator .fwk-form-label { font-size: 12px; font-weight: 600; }

/* 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: 1rem; }
#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(--demo-muted, #666); }

/* 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;
    background: var(--demo-surface, #fff); color: var(--demo-ink, #323232); border-radius: var(--demo-radius);
    box-shadow: var(--demo-shadow-lg, 0 20px 60px rgba(0,0,0,.3)); padding: .6rem .8rem .8rem; display: flex; flex-direction: column;
}
.fwre-iframe-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .5rem; font-weight: 600; }
.fwre-iframe-modal-head .fwre-enquire-x { position: static; }
.fwre-iframe-modal-frame { width: 100%; height: 80vh; border: 0; border-radius: 4px; background: #fff; }

/* 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.fwre-property .fwre-property-price .fwre-status-label {
    display: inline-flex; position: relative; top: auto; left: auto; margin: 0 0 0 15px; 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.fwre-property .fwk-tab > li > a {
    font-size: 15px; text-transform: capitalize; border: 0;
    position: relative; padding: 12px 20px; color: var(--demo-ink, #323232);
}
#fwre #fwre.fwre-property .fwk-tab > li.fwk-active > a { background: var(--demo-surface-2, #F3F3F3); }
#fwre #fwre.fwre-property .fwk-tab > li > a::before {
    content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: -1.5px;
    background: var(--fwre-green, #0CAB9B); opacity: 0; transition: opacity .15s;
}
#fwre #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(--demo-border, #e1e1e1); border-radius: var(--demo-radius);
    padding: .7rem .9rem; height: 100%;
}
#fwre .fwre-invest-card-highlight { border-color: var(--fwre-green, #0CAB9B); }
#fwre .fwre-invest-label { font-size: .8rem; color: var(--demo-muted, #666); }
#fwre .fwre-invest-value { font-weight: 700; font-size: 1.15rem; }
#fwre .fwre-invest-unit { font-weight: 400; font-size: .8rem; color: var(--demo-muted, #666); margin-left: .2rem; }
#fwre .fwre-group-wrapper { margin-bottom: 1rem; }
#fwre .fwre-video-lazy img { display: block; width: 100%; }
#fwre .fwre-video-play-btn { color: #fff; 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(--demo-border, #e1e1e1); 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, #0CAB9B); margin-top: -4.5px;
}
#fwre .fwre-mcalc-field { margin-bottom: 10px; }
#fwre .fwre-mcalc-legend .fwk-grid + .fwk-grid { margin-top: .35rem; }
.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: 700; margin: .8rem 0 .4rem; }
.fwre-mortgage-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .fwre-mortgage-report-grid { grid-template-columns: 1fr; } }
#fwre .fwre-mortgage-print { margin-left: .5rem; color: var(--demo-muted, #888); }

/* R9 — brochure modal: the live fwk-modal-dialog-large is 860px; footer hint + button row. */
.fwre-brochure-dialog { width: min(860px, calc(100% - 2rem)); }
.fwre-brochure-dialog .fwk-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.fwre-brochure-dialog .fwk-form-label { display: block; font-size: .85rem; color: var(--demo-muted, #666); margin: .5rem 0 .2rem; }
.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: 4px;
    transition: border-color .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; 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, #0CAB9B); }
#fwre .fwre-fp-thumb-label { font-size: .75em; text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fwre .fwre-fp-room-name { margin-bottom: .5em; }
#fwre .fwre-fp-room-size { margin-bottom: .5em; color: var(--demo-muted, #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 .6rem; }
.fwre-agent-modal-dialog .fwre-agent-modal-title { font-size: 1.25rem; font-weight: 600; color: var(--demo-ink, #323232); }

/* 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(--demo-surface, #fff); color: var(--demo-ink, #323232); border-radius: var(--demo-radius);
    box-shadow: var(--demo-shadow-lg, 0 8px 24px rgba(0,0,0,.25)); padding: .6rem 1.2rem; font-size: .95rem;
}

/* ==========================================================================
   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(--demo-surface);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius);
    padding: 1.25rem 1.5rem;
}
.fwre-agent-edit-row {
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--demo-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;
    color: var(--demo-ink);
}
/* 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: 0.35rem; }
@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 #fwre light island (round 6). Glyphs in demo-icons.js. */
/* ========================================================================== */
.fwre-search-hero {
    position: relative;
    border-radius: var(--demo-radius);
    /* Hero background via CSS (was a broken <img src=asset('images/…')> — asset() maps to the site
       root, which only exists on CI4). url() is relative to THIS file, which ships next to an images/
       dir on every platform (public/images on CI4; the design's assets/images on WP/Joomla). */
    background: #2a2f33 url(../images/minimal_search_bg.jpg) center/cover no-repeat;
    padding: 56px 28px 88px;
    margin-bottom: 16px;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}
.fwre-search-hero-cap {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    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.fwre-search-minimal {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -28px;
    background: var(--demo-bg, #fff);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: 10px 12px;
}
.fwre-search-hero + * { margin-top: 44px; } /* clear the floated bar */
/* (the old .fwre-ms-bar/.fwre-ms-pop popover widget CSS was dead code — removed with
   public/js/demo-search-minimal.js in the fwre-ms unification; the live fwre-ms component
   is styled by the shared public/css/fwre-ms.css) */
@media (max-width: 640px) {
    .fwre-search-hero-cap { max-width: 100%; font-size: 22px; }
    .fwre-search-hero + * { margin-top: 12px; }
}

/* 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;
    background: rgba(255, 255, 255, 0.6);
}
#fwre-search-results.fwre-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* Bare component-only document shells (print / brochure iframe targets). Forced-white on
   purpose: these are print-destined documents, independent of the stand theme. */
body.demo-doc-bare { background: #fff; margin: 0; }
body.demo-doc-bare--print { padding: 16px; }
body.demo-doc-bare--brochure { padding: 24px; }