/* ============================================================================
   design-theme.css: the Default FWRE design's THEME TIER.

   Maps the shared fwk-* UIKit components onto this design's tokens
   (design-tokens.css). It is the faithful agency look, restructured onto the
   canonical per-design file: every COLOUR references a --fwre-* token (no raw hex);
   structure comes from fwk-* markup: this file only re-tones it. Scoped to the
   listing/detail wrapper (#fwre, .demo-stage#fwre) so the demo-frame chrome
   (.demo-*) is untouched. Vendor fwk-* selectors are low-specificity, so these
   #fwre rules win without !important except where the vendor itself uses it.

   This design is css_standalone (Config\Designs): ?design=official loads ONLY this
   file + design-tokens.css (no parent overlay), so the canonical two-tier
   files alone reproduce the look. Named composed components (list card, grid card,
   agent card, featured item) are defined ONCE here and reused across views.

   Metrics are TOKENIZED (2026-07-12, redesign chunk 2): font-size/weight and
   padding/margin/gap reference the design-tokens.css type + spacing scales; the few
   off-scale values carry an inline "hold" marker and are listed in
   docs/showcase/figma-token-decisions.md round 2. Positional offsets (top/left),
   control heights and negative margins stay literal by design.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   SELF-SUFFICIENCY token bridge. The shared floor CSS this design loads
   (demo-property/-editor/-gallery + chosen) is written against the demo STAND's
   --demo-* tokens. The stand defines those (demo-tokens-fwre.css) and demo-property
   even remaps them per-product at `#fwre #fwre`: so without this block the design
   would BORROW its palette from the host stand and render differently off-stand
   (Joomla/WP, or any other host where --demo-* is undefined or differently themed).

   A design must be self-contained: it OWNS every token its output resolves. So here
   we define the full set of --demo-* the floor consumes, sourced from THIS design's
   own --fwre-* palette (design-tokens.css) + self-owned metric literals. Values match
   what renders on the stand today (no visual change on the demo), but now the design,
   not the stand, is the authority, so it renders identically in any host.

   Scope `#fwre, #fwre #fwre`: the inner pair ties demo-property's remap specificity and,
   loading AFTER it (design overlay > floor), wins; the single `#fwre` covers hosts with
   no double wrapper. Order alone wins, so no !important needed. */
#fwre,
#fwre #fwre {
    /* brand */
    --demo-accent: var(--fwre-green);
    --demo-accent-hover: var(--fwre-green-hover);          /* product hover green (live): no --fwre token yet */
    --demo-gradient: var(--fwre-green);     /* FLAT fill: primary button uses this var */
    --demo-on-accent: var(--fwre-white);
    /* ink */
    --demo-ink: var(--fwre-black);
    --demo-ink-muted: var(--fwre-grey-dark-deep);
    --demo-muted: var(--fwre-grey-dark-deep);
    /* surfaces */
    --demo-bg: var(--fwre-white);
    --demo-surface: var(--fwre-white);
    --demo-surface-2: var(--fwre-grey-light);
    /* hairlines / hover */
    --demo-border: var(--fwre-grey-border);
    --demo-border-strong: var(--fwre-grey);
    --demo-hover: var(--fwre-grey-light);
    /* geometry: sourced from the design's own token scale (design-tokens.css,
       values = the live agency template: 3px standard, 5px modal) */
    --demo-radius: var(--fwre-radius);
    --demo-radius-lg: var(--fwre-radius-lg);
    --demo-radius-sm: var(--fwre-radius-sm);
    /* elevation: the live agency single shadow recipe, via the token tiers */
    --demo-shadow-sm: var(--fwre-shadow-sm);
    --demo-shadow: var(--fwre-shadow);
    --demo-shadow-lg: var(--fwre-shadow-lg);
    /* motion */
    --demo-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --demo-fast: 120ms;
}

/* Parity: the PRODUCT region reads as the live WHITE page. Anchored on #fwre itself:
   the id exists on every host (CI4 stage / Joomla / WP), whereas the old compound
   `.demo-stage#fwre` matched nothing (the stage class and the id sit on DIFFERENT
   elements: <div class="demo-stage"><div id="fwre">…). On the CI4 stand this paints
   the white panel inside the (unchanged) dark demo-frame chrome. */
#fwre {
    color: var(--fwre-black) !important;
    background: var(--fwre-white) !important;
    border-color: var(--fwre-grey-border) !important;
}
/* The rounded white stage panel look is CI4-stand chrome only (live pages are plain
   full-bleed white). The stage itself is the ONE continuous white panel: a page can
   carry several sibling #fwre regions (search module + listing) with module titles
   between them, and live renders all of it on one white page. */
.demo-stage.ds-skin,
.demo-stage:has(#fwre) {
    background: var(--fwre-white);
    color: var(--fwre-black);
    padding: 24px 28px 32px;
    border-radius: 6px;
}
#fwre .fwk-card,
.demo-stage.ds-skin .fwk-card, /* module-card chrome sits on the stage OUTSIDE #fwre: same white surface */
#fwre .fwre-search-form { background: var(--fwre-white) !important; color: var(--fwre-black) !important; }
#fwre .fwk-input,
#fwre .fwk-select,
#fwre .fwk-textarea { background-color: var(--fwre-grey-light) !important; color: var(--fwre-black) !important; border: 1px solid var(--fwre-grey-border) !important; } /* background-COLOR: the shorthand would erase the select caret glyph (fwre-ms.css) */
#fwre .fwk-text-muted { color: var(--fwre-grey) !important; }

#fwre {
    color: var(--fwre-black);
    font-size: var(--fwre-text-sm);
    line-height: 1.5;
}
#fwre h1, #fwre h2, #fwre h3, #fwre h4,
#fwre .fwk-h1, #fwre .fwk-h2, #fwre .fwk-h3, #fwre .fwk-h4 { font-weight: var(--fwre-weight-semibold); }
#fwre .fwk-h1, #fwre .fwk-h2, #fwre .fwk-h3, #fwre .fwk-h4 { margin-bottom: 0; }
#fwre h1, #fwre .fwk-h1 { font-size: var(--fwre-text-hero); }
#fwre h2, #fwre .fwk-h2 { font-size: var(--fwre-text-3xl); }
#fwre h3, #fwre .fwk-h3 { font-size: var(--fwre-text-2xl); }
#fwre .fwk-text-lead { font-size: var(--fwre-text-xl) !important; }
#fwre .fwk-text-bigger { font-size: var(--fwre-text-md) !important; }
#fwre .fwk-text-medium { font-weight: var(--fwre-weight-medium) !important; }
#fwre .fwk-text-bolder { font-weight: var(--fwre-weight-semibold) !important; }

#fwre .fwk-button {
    color: var(--fwre-black);
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-medium);
    font-family: var(--fwre-font);
    text-transform: none;
    background: var(--fwre-white);
    border: 1px solid transparent;
    border-radius: var(--fwre-radius);
}
#fwre .fwk-button-default {
    border-color: var(--fwre-grey-border) !important;
}
#fwre .fwk-button-default svg {
    color: var(--fwre-grey);
}
#fwre .fwk-button-primary {
    color: var(--fwre-white) !important;
    background: var(--fwre-green) !important;
    border-color: var(--fwre-green) !important;
}
#fwre .fwk-button-primary-inverse {
    color: var(--fwre-black) !important;
    border-color: var(--fwre-green) !important;
    background: transparent !important;
}
#fwre .fwk-button-secondary {
    color: var(--fwre-green) !important;
    background-color: var(--fwre-grey-light) !important;
}
#fwre .fwk-button-secondary svg {
    color: var(--fwre-green);
}
#fwre .fwk-button-danger {
    background-color: var(--fwre-red);
    color: var(--fwre-white);
    border: 1px solid transparent;
}
#fwre .fwk-button-success {
    background-color: var(--fwre-green);
    color: var(--fwre-white);
    border: 1px solid transparent;
}
#fwre .fwk-select {
    background-color: var(--fwre-grey-light);
    border: 0;
    border-radius: var(--fwre-radius);
}

#fwre form {
    font-size: var(--fwre-text-sm);
}
#fwre form .fwk-input,
#fwre form .fwk-select,
#fwre form .fwk-textarea {
    background-color: var(--fwre-grey-light);
    border-radius: var(--fwre-radius);
    border: 1px solid var(--fwre-grey-border);
}
#fwre form .fwk-input:focus,
#fwre form .fwk-select:focus,
#fwre form .fwk-textarea:focus {
    background-color: var(--fwre-white);
    border-color: var(--fwre-green) !important;
}
#fwre form .fwk-checkbox,
#fwre.fwk-modal-dialog .fwk-checkbox {
    background-color: var(--fwre-white);
    border-radius: var(--fwre-radius);
    border: 1px solid var(--fwre-green);
}
#fwre form .fwk-checkbox[checked],
#fwre.fwk-modal-dialog .fwk-checkbox[checked] {
    background-color: var(--fwre-green);
}

#fwre .fwk-label.fwk-label { /* doubled class ties the stand skin's .ds-skin #fwre specificity; this file loads later and wins */
    /* LIVE-verbatim label pill (owner 2026-07-22, fwre-design-styles.css:109-117): 20px tall,
       12px medium, fully rounded. Colors stay DATA (the statuses dictionary color/text_color). */
    height: 20px;
    padding: 2px var(--fwre-space-12);
    line-height: 20px;
    font-size: var(--fwre-text-sm);
    font-weight: var(--fwre-weight-medium);
    text-transform: none;
    border-radius: var(--fwre-radius-pill);
    background: var(--fwre-status-default); /* live default for uncolored statuses = UIkit label blue; colored ones carry inline dictionary styles */
    color: var(--fwre-white);
}
#fwre .fwk-label-success { background: var(--fwre-green); }
/* Open-house badge (openhours addon): the official reference "Open TODAY, ..." pill is the
   product teal, not the default status blue. */
#fwre .fwre-openhouse-badge.fwre-openhouse-badge { background: var(--fwre-green); color: var(--fwre-white); }

#fwre a { color: var(--fwre-black); text-decoration: none; }

#fwre .fwk-text-black { color: var(--fwre-black) !important; }
#fwre .fwk-text-green { color: var(--fwre-green) !important; }
#fwre .fwk-text-muted { color: var(--fwre-grey) !important; }
#fwre .fwk-text-red { color: var(--fwre-red) !important; }

#fwre.fwk-modal-dialog { border-radius: var(--fwre-radius-lg); }
#fwre.fwk-modal-dialog > button { top: 20px; right: 15px; }
#fwre.fwk-modal-dialog .fwk-modal-header { padding: var(--fwre-space-20) var(--fwre-space-40); border-radius: var(--fwre-radius-lg) var(--fwre-radius-lg) 0 0; background: var(--fwre-green-alpha); }
#fwre.fwk-modal-dialog .fwk-modal-title { font-size: var(--fwre-text-4xl); }
#fwre.fwk-modal-dialog .fwk-modal-footer { padding: var(--fwre-space-20) var(--fwre-space-40); border-radius: 0 0 var(--fwre-radius-lg) var(--fwre-radius-lg); background: var(--fwre-grey-light); }

/* Tooltip — GLOBAL selectors (no #fwre prefix) and deliberately over-specific.
   Two facts make this block necessary, and both are easy to miss:
   1. the bubble is appended to <body> by the fwk JS (`container: body`), so it renders OUTSIDE the
      #fwre island — an #fwre-scoped rule would never match it (same reason as .fwre-social-dropdown
      in product.css). The --fwre-* tokens it reads are on :root, so they still resolve.
   2. the bubble carries `role="tooltip"`, and a HOST TEMPLATE styles that attribute. Joomla's
      Cassiopeia ships `[role="tooltip"]:not(.show) { max-width:100%; margin:.5em; right:5em;
      border:1px solid; background:#fff; color:#000; display:none; … }` — specificity (0,2,0), which
      beats the vendor's plain `.fwk-tooltip` (0,1,0). Symptom, seen on a stock Cassiopeia site
      2026-08-13: the tooltip is a thin strip stretched across the whole viewport (`right:5em` fights
      the inline `left:` the JS sets) in the template's colours. `display:none` in that same rule only
      loses to `.fwk-tooltip.fwk-active` on source order, so on a template loading after us the
      tooltip would vanish instead. Atum does the same on the admin side (fwa-admin-theme.css).
   Hence: `div.fwk-tooltip[role="tooltip"]` = (0,2,1), which wins on specificity regardless of load
   order, and every property a host can inject is answered here — including the ones the vendor never
   sets (right/bottom/border/box-shadow/margin), because "not set by us" is exactly what a host fills. */
div.fwk-tooltip[role="tooltip"] {
    box-sizing: border-box;
    position: absolute;
    right: auto;                     /* Cassiopeia's `right: 5em` + the JS's inline `left` = full-width strip */
    bottom: auto;
    margin: 0;                       /* the JS already applies --fwk-position-offset */
    max-width: 200px;
    padding: var(--fwre-space-4) var(--fwre-space-8);
    border: 0;
    border-radius: var(--fwre-radius-sm);
    background: var(--fwre-black);
    color: var(--fwre-white);
    box-shadow: var(--fwre-shadow-sm);
    font-size: var(--fwre-text-xs);
    line-height: var(--fwre-lh-xs);
    text-align: center;
}
/* Shown state: same specificity fight over `display`, one class up so it also beats our own
   vendor `.fwk-tooltip.fwk-active`. The closed state is left to the vendor's `display: none`. */
div.fwk-tooltip.fwk-active[role="tooltip"] { display: block; }

#fwre .fwk-table-labels-left tr > td:first-child { font-weight: var(--fwre-weight-semibold); }

/* Property listing: view-switch toolbar (named component) */
#fwre .fwre-listing-toolbar .fwk-button-default {
    width: 40px;
    height: 40px;
    color: var(--fwre-grey);
    padding: 0;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: var(--fwre-grey-light);
    border-color: var(--fwre-grey-light);
    border: 0;
    border-radius: var(--fwre-radius);
}
#fwre .fwre-listing-toolbar .fwk-button-default svg { color: var(--fwre-grey); }
#fwre .fwre-listing-toolbar .fwk-button-default:hover, #fwre .fwre-listing-toolbar .fwk-button-default.fwk-active { background: var(--fwre-green); border-color: var(--fwre-green); }
#fwre .fwre-listing-toolbar .fwk-button-default:hover svg, #fwre .fwre-listing-toolbar .fwk-button-default.fwk-active svg { color: var(--fwre-white); }


/* List view: the list CARD (named, reused component) */
/* Match the live item exactly: NO padding/border/extra background on the item itself (the
   demo-frame's demo-property.css adds padding:1rem + a border + margin-bottom: neutralise them),
   just the rounded shadowed shell. The image then sits flush to the edge, not inset. */
#fwre .fwre-list-item {
    margin-top: 35px; /* hold: off-scale (decisions r2) */
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    /* Reference row cards use the SMALL 4px radius (corner-zoom-sampled, round 21). This
       block wins the cascade over product.css's .fwre-list-item (same specificity, later
       stylesheet) - keep the two in step. */
    border-radius: var(--fwre-radius);
    box-shadow: var(--fwre-shadow-small);
}
#fwre .fwre-list-item:hover { box-shadow: var(--fwre-shadow-small); }
#fwre .fwre-item-media {
    border-radius: var(--fwre-radius) 0 0 var(--fwre-radius);
    overflow: hidden;
}
#fwre .fwre-item-media-link { display: block; }
#fwre .fwre-item-media-link img { width: 100%; height: 250px; object-fit: cover; display: block; }
/* Photo fills the full item height (flush, no gap below) when the card is side-by-side, like the
   live. The card markup carries BOTH fwk-flex-middle and fwk-grid-match: middle would centre the
   shorter media column and leave a gap, so force the columns to STRETCH; then drop the 4/3 ratio
   and run height:100% down the media → .fwk-position-relative → slideshow chain (the stretched
   column gives the definite height the chain resolves against; .fwk-slideshow-items is already
   height:100% in demo-property.css). Below @m the card stacks, so that file's 4/3 ratio still
   gives the photo its height. */
@media (min-width: 960px) {
    #fwre .fwre-list-item > div { align-items: stretch; }
    #fwre .fwre-list-item .fwre-item-media,
    #fwre .fwre-list-item .fwre-item-media > .fwk-position-relative,
    #fwre .fwre-list-item .fwre-item-slideshow { aspect-ratio: auto; height: 100%; }
}
#fwre .fwre-item-count {
    color: var(--fwre-white);
    width: 100%;
    padding: 50px var(--fwre-space-20) var(--fwre-space-20); /* 50px: hold, overlay fade depth */
    text-align: right;
    background: var(--fwre-count-overlay);
}
#fwre .fwre-status-label {
    position: absolute;
    top: 0;
    left: 0;
    margin: var(--fwre-space-15);
}
#fwre .fwre-item-data { padding: var(--fwre-space-20); }
/* Inner detail columns split by a divider: match the live padding (the divider line sits
   20px in, columns are padded 40px, the row pulled back -40px) so the list item isn't cramped. */
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-column-small,
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-small { margin-left: -40px; }
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-column-small > :not(.fwk-first-column)::before,
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-small > :not(.fwk-first-column)::before { left: 20px; }
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-column-small > *,
#fwre .fwre-item-data .fwk-grid-divider.fwk-grid-small > * { padding-left: var(--fwre-space-40); }

/* The title/text/agent column is the second cell of the divider grid; make it a flex column so the
   agent block settles at the bottom (margin-top:auto). The description CLAMPS to whole rows with a
   trailing ellipsis: the foundation ships only the single-line fwk-text-truncate, so this is the
   multi-line equivalent: a long write-up ends in "…" at the last fitting row and never pushes the
   card taller than its other content. */
#fwre .fwre-list-item .fwre-item-data > .fwk-grid-divider > div:last-child { display: flex; flex-direction: column; }
/* Let the two columns actually SHRINK. A flex item defaults to min-width:auto, i.e. it refuses to go
   narrower than its content — and the card address is `white-space: nowrap`, so its intrinsic width is
   the whole unbroken string. The left column therefore grew past its half and slid under the right one,
   and the address's `overflow:hidden; text-overflow:ellipsis` never engaged: nothing overflowed, the box
   had simply expanded (which is also why devtools greys those two declarations out — they change
   nothing). min-width:0 restores shrinking, so the ellipsis does its job. Both columns, and the inner
   flex wrapper, need it: each is itself a flex item in the chain. */
#fwre .fwre-list-item .fwre-item-data > .fwk-grid-divider > div { min-width: 0; }
/* Left detail column: distribute the three blocks down the card height: price/address/tags at the
   TOP, feature icons + compare in the MIDDLE, read-more + the options icon row at the BOTTOM. The
   grid cell stretches with the row (fwk-grid-match), so make it flex and let .fwr-item-info fill it
   and space-between its three groups. */
#fwre .fwre-list-item .fwre-item-data > .fwk-grid-divider > div:first-child { display: flex; }
#fwre .fwre-list-item .fwr-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0; /* see above — it is a flex item too, so it blocks the shrink just the same */
}
#fwre .fwre-list-item .fwre-info-mid { margin: var(--fwre-space-10) 0; }
#fwre .fwre-list-item .fwre-item-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}
#fwre .fwre-list-item .fwre-item-agent { margin-top: auto; }

#fwre .fwre-item-icons .fwk-button {
    width: 40px;
    height: 40px;
    color: var(--fwre-grey);
    padding: 0;
    margin-right: var(--fwre-space-8);
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: var(--fwre-grey-light);
    border: 0;
    border-radius: var(--fwre-radius);
}
#fwre .fwre-item-icons .fwk-button svg { color: var(--fwre-black); width: 23px; }
#fwre .fwre-item-options svg { color: var(--fwre-grey); }
#fwre .fwre-item-options *:hover svg { color: var(--fwre-green); }
/* Share toggle: a bare icon like its sibling favorite/compare icons (and the live),
   not a bordered button box. Strip the fwk-button-default chrome in the option row. */
#fwre .fwre-item-options .fwre-social-toggle {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}
#fwre .fwre-item-options .fwre-social-toggle svg { color: var(--fwre-grey); }
#fwre .fwre-item-options .fwre-social-toggle:hover svg { color: var(--fwre-green); }
/* 3D-tour link: a bare icon like its favorite/share siblings (not a filled secondary button box).
   Strip the fwk-button-secondary chrome in the option row so the action row reads uniformly. */
#fwre .fwre-item-options .fwre-3d-link {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}
#fwre .fwre-item-options .fwre-3d-link svg { color: var(--fwre-grey); }
#fwre .fwre-item-options .fwre-3d-link:hover svg { color: var(--fwre-green); }
/* Compare toggle: a bare stateful icon like its favorite/share siblings. Strip the fwk-button
   chrome in the option row and flex-center the glyph so it sits on the same axis as the
   siblings. Both glyph states behave like the siblings (grey, hover green); the remove
   glyph's corner mini-trashcan badge is self-colored red inside the SVG (fwk-preserve). */
#fwre .fwre-item-options .fwre-compare-toggle {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
}
#fwre .fwre-item-options .fwre-compare-toggle svg { color: var(--fwre-grey); }
#fwre .fwre-item-options .fwre-compare-toggle:hover svg { color: var(--fwre-green); }
/* The own-row margins/typography below belong to the detail-panel compare variant; inside the
   tile options row the wrapper is just a flex cell. */
#fwre .fwre-item-options .fwre-item-compare { margin: 0 !important; display: inline-flex; }
#fwre .fwre-item-compare { margin: var(--fwre-space-15) 0 !important; font-size: var(--fwre-text-sm); color: var(--fwre-grey); display: inline-flex; align-items: center; gap: var(--fwre-space-6); cursor: pointer; }
#fwre .fwre-item-options { gap: var(--fwre-space-14); }
#fwre .fwre-copy-link svg { color: var(--fwre-grey); }
#fwre .fwre-copy-link:hover svg, #fwre .fwre-copy-link.fwre-copied svg { color: var(--fwre-green); }
/* Floating compare bar: POSITIONING ONLY - the look comes from the theme's own
   #fwre .fwk-button-primary (the JS appends the bar inside the #fwre island for that). */
.fwre-compare-bar {
    position: fixed; right: 24px; bottom: 24px; z-index: 50;
    box-shadow: var(--fwre-shadow-small);
}
#fwre .fwre-item-agent {
    padding: var(--fwre-space-10) var(--fwre-space-15);
    margin-top: 25px !important; /* hold: off-scale (decisions r2) */
    background: var(--fwre-grey-light);
    border-radius: var(--fwre-radius);
}
#fwre .fwre-item-agent svg, .fwre-item-agent-company { color: var(--fwre-grey-agent); }
#fwre .fwre-item-agent-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; display: block; }
@media (min-width: 960px) {
    .fwre-sms-share { display: none !important; }
}


/* Grid view: the grid CARD (named, reused component) */
#fwre .fwre-grid-view .fwre-item {
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-small);
}
#fwre .fwre-grid-view .fwre-item .fwre-item-media { border-radius: var(--fwre-radius-card) var(--fwre-radius-card) 0 0; }
#fwre .fwre-item-info { padding: var(--fwre-space-20); }
#fwre .fwre-grid-card {
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-small);
    background: var(--fwre-white);
    overflow: hidden;
}
#fwre .fwre-grid-card .fwre-item-media { border-radius: var(--fwre-radius-card) var(--fwre-radius-card) 0 0; }


/* Featured item modifier: the green card background + border IS the featured signal; the
   "Featured" word is not written on the tile (#1). fwre-mod-mini-badge is used only for this badge. */
#fwre .fwre-mod-mini-badge { display: none; }
#fwre .fwre-list-item.fwre-item-featured.fwre-item-featured,
#fwre .fwre-item.fwre-item-featured.fwre-item-featured,
#fwre .fwre-item-info.fwre-item-featured.fwre-item-featured, /* slideshow side card (round 38): the body IS the card root */
#fwre .fwre-grid-card.fwre-item-featured.fwre-item-featured {
    --fwre-grey-light: var(--fwre-featured-soft);
    --fwre-grey-dark: var(--fwre-featured-soft);
    background: var(--fwre-featured-bg);
    border: 1px solid var(--fwre-green);
    /* No radius restated here: each variant keeps its base radius (list row 4px
       per the round-21 corner sampling, grid tile/card 8px). */
}

/* Featured island is ALWAYS light-green (no dark variant), so the muted greys that read fine
   on a white/dark surface wash out here. Pin them to --fwre-featured-ink for AA contrast on
   the green bg: the price "(Negotiable)" alt, the type badges, the option/compare icons, and
   the agent company line + its right-angle chevron. (demo-* badge tokens are theme-flipping:
   restate them theme-independently since this card is light in both themes.) */
#fwre .fwre-item-featured .fwre-item-price .fwk-text-muted { color: var(--fwre-featured-ink) !important; }
#fwre .fwre-item-featured .fwre-item-type span { background: var(--fwre-featured-badge-bg); color: var(--fwre-featured-ink); }
/* (the .fwre-item-cat-tag featured variant lives in product.css beside its base rule - this file loads
   earlier than product.css on the listing/home surfaces, so it cannot out-cascade the base there) */
#fwre .fwre-item-featured .fwre-item-options svg,
#fwre .fwre-item-featured .fwre-item-compare,
#fwre .fwre-item-featured .fwre-copy-link svg { color: var(--fwre-featured-ink); }
#fwre .fwre-item-featured .fwre-item-agent svg,
#fwre .fwre-item-featured .fwre-item-agent-company { color: var(--fwre-featured-ink); }


/* Single property page */
#fwre.fwre-property .fwk-h1 {
    font-size: 32px; /* hold: Figma 32/600/48 x1, no token (decisions r2) */
    margin: 0 0 var(--fwre-space-5);
}
#fwre.fwre-property .fwre-property-price {
    font-size: var(--fwre-text-4xl);
}
#fwre.fwre-property .fwre-property-panel {
    margin-top: var(--fwre-space-30);
    padding: 25px var(--fwre-space-30); /* 25px: hold, off-scale (decisions r2) */
    box-shadow: var(--fwre-shadow-small);
    /* no border-radius: the live .fwre-property-panel is square-cornered (fwre-design-styles.css:543-547) */
}
#fwre.fwre-property .fwre-image-counter { color: var(--fwre-white); }


/* Search module: the title is a heading ABOVE the box (like the live module chrome),
   rendered OUTSIDE #fwre, so it's themed here unscoped (tokens live at :root). */
.fwre-mod-search-title { font-size: var(--fwre-text-2xl); font-weight: var(--fwre-weight-semibold); line-height: 1.5; margin: 0 0 var(--fwre-space-12); color: var(--fwre-black); }
#fwre.fwre-search,
#fwre .fwre-search-form {
    padding: var(--fwre-space-30) 35px; /* 35px: hold, off-scale (decisions r2) */
    box-shadow: var(--fwre-shadow-small);
    border-radius: var(--fwre-radius-card);
    overflow: visible;
}
#fwre.fwre-search .fwk-input,
#fwre.fwre-search .fwk-select,
#fwre.fwre-search .fwk-textarea,
#fwre.fwre-search .chosen-container {
    margin-bottom: var(--fwre-space-14);
}
#fwre.fwre-search .fwk-text-bolder { margin-bottom: var(--fwre-space-3); }
#fwre.fwre-search .fwk-button-primary {
    color: var(--fwre-white);
    background: var(--fwre-green);
}
/* Search field layout: the official reference 4-column grid (owner PNGs 2026-07-14) defined
   in product.css (#fwre .fwre-mod-search-grid, container-query driven). The earlier flex-wrap
   "live horizontal" layout is superseded by the reference. */

/* Search widgets: chosen (multiselects/dropdowns) + ion.rangeSlider.
   The demo-property.css showcase rules target `#fwre .fwre-mod-search .*` (descendant),
   which never matches the `#fwre.fwre-mod-search` wrapper; and css_standalone default
   doesn't load agency.css. So theme the widgets here, on the agency palette. */
#fwre.fwre-mod-search .chosen-container { width: 100% !important; font-size: var(--fwre-text-md); }
/* default state: synced 1:1 with .fwk-input (grey-light fill, grey border) */
#fwre.fwre-mod-search .chosen-single,
#fwre.fwre-mod-search .chosen-choices {
    background: var(--fwre-grey-light) !important;
    border: 1px solid var(--fwre-grey-border) !important;
    border-radius: var(--fwre-radius) !important;
    min-height: 40px;
    color: var(--fwre-black) !important;
    box-shadow: none !important;
}
#fwre.fwre-mod-search .chosen-single { line-height: 38px; padding: 0 var(--fwre-space-10); color: var(--fwre-black) !important; }
#fwre.fwre-mod-search .chosen-single span { color: var(--fwre-black); }
#fwre.fwre-mod-search .chosen-single div b { background-position-y: 7px; }
/* the multiselect choices box: pad the inner row + vertically centre the pills */
#fwre.fwre-mod-search .chosen-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwre-space-4);
    padding: var(--fwre-space-4) var(--fwre-space-8);
}
#fwre.fwre-mod-search .chosen-choices li.search-field,
#fwre.fwre-mod-search .chosen-choices li.search-choice { margin: 0; }
/* active/open state: synced 1:1 with .fwk-input:focus (white fill, green border) */
#fwre.fwre-mod-search .chosen-container-active .chosen-single,
#fwre.fwre-mod-search .chosen-container-active .chosen-choices {
    background: var(--fwre-white) !important;
    border-color: var(--fwre-green) !important;
}
#fwre.fwre-mod-search .chosen-choices li.search-choice {
    background: var(--fwre-white) !important;
    border: 1px solid var(--fwre-grey-border) !important;
    color: var(--fwre-black) !important;
    box-shadow: none !important;
    border-radius: var(--fwre-radius);
    padding: var(--fwre-space-3) var(--fwre-space-20) var(--fwre-space-3) 7px; /* 7px: hold (chip pad) */
}
#fwre.fwre-mod-search .chosen-choices li.search-choice span { color: var(--fwre-black); }
#fwre.fwre-mod-search .chosen-choices li.search-choice .search-choice-close { opacity: .6; }
#fwre.fwre-mod-search .chosen-choices li.search-choice .search-choice-close:hover { opacity: 1; }
#fwre.fwre-mod-search .chosen-choices li.search-field input[type="text"] { color: var(--fwre-black) !important; height: auto; }
#fwre.fwre-mod-search .chosen-drop { background: var(--fwre-white); border: 1px solid var(--fwre-grey-border); box-shadow: var(--fwre-shadow-small); }
#fwre.fwre-mod-search .chosen-results li { color: var(--fwre-black); }
#fwre.fwre-mod-search .chosen-results li.highlighted { background: var(--fwre-green); color: var(--fwre-white); }

/* ion.rangeSlider: use the vendored green sprite skinFlat skin as-is (ion.rangeSlider.css +
   ion.rangeSlider.skinFlat.css), matching the live agency listing exactly. No geometry/colour
   override here: the earlier no-sprite re-skin diverged from the live because the sprite PNG
   (public/images/sprite-skin-flat.png) was missing; it's now vendored, so the stock skin renders. */

/* native (non-chosen) dropdowns in the search keep the agency field look */
#fwre.fwre-mod-search .fwk-select,
#fwre.fwre-mod-search .fwk-input {
    background-color: var(--fwre-grey-light);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius);
    color: var(--fwre-black);
    width: 100%;
}

/* fwre-ms: the UIKit-native select component (multi + single). STRUCTURE lives on the
   shared floor (public/css/fwre-ms.css); this skin delta re-asserts the input-look
   (grey-light fill, grey border; white + green when open) against the #fwre .fwk-button
   control rules above, which out-rank the floor by specificity. Keep it at (1,2,0),
   the strength the pre-unification #fwre.fwre-mod-search rules had. */
#fwre .fwre-ms .fwre-ms-toggle {
    height: 40px;
    padding: 0 var(--fwre-space-10);
    text-align: left;
    font-weight: var(--fwre-weight-normal);
    text-transform: none;
    color: var(--fwre-black);
    background: var(--fwre-grey-light);
    border: 1px solid var(--fwre-grey-border);
    border-radius: var(--fwre-radius);
}
#fwre .fwre-ms:focus-within .fwre-ms-toggle {
    background: var(--fwre-white);
    border-color: var(--fwre-green);
}
/* Caret standard: the ONE #666/20px chevron (fwre-ms.css), identical to the native
   fwk-select data-URI glyph - which cannot reference tokens, hence the literal hex.
   Re-asserted here at (1,3,1) because product.css's `#fwre .fwk-button-default svg`
   (1,2,1) would otherwise repaint it --fwre-grey. */
#fwre .fwre-ms .fwre-ms-caret svg { color: #666; }


/* Agent list */
#fwre .fwre-agent-item {
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-small);
}
#fwre .fwre-agent-card {
    border-radius: var(--fwre-radius-card);
    box-shadow: var(--fwre-shadow-small);
    background: var(--fwre-white);
}


/* Pagination: faithful to the live: a fwk-grid of UIKit buttons (secondary = grey/green pill,
   current = green primary; chevrons grey, green on hover). */
#fwre .fwre-footer-pagination .fwk-button { font-weight: var(--fwre-weight-normal); }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover {
    color: var(--fwre-white) !important;
    background: var(--fwre-green) !important;
}
#fwre .fwre-footer-pagination .fwk-button-secondary svg { color: var(--fwre-grey) !important; }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover svg { color: var(--fwre-white) !important; }
#fwre .fwre-footer-pagination .fwre-page-gap {
    border: 0 !important;
    background: transparent !important;
    color: var(--fwre-grey);
    cursor: default;
    pointer-events: none;
}


/* Read more + list resets */
#fwre a.fwre-read-more,
a.fwre-read-more {
    line-height: 16px;
    padding-top: var(--fwre-space-10);
    padding-bottom: var(--fwre-space-10);
    margin-top: 0;   /* drop the shared demo-property .7rem top gap: footer is vertically centred */
}
#fwre .fwk-slideshow-items,
#fwre .fwk-slider-items { list-style: none; }
#fwre .fwk-slideshow-items > li,
#fwre .fwk-slider-items > li { margin: 0; }

/* Comparison table */
.fwre-comparison .fwk-table tr > td:first-child { color: var(--fwre-green); font-weight: var(--fwre-weight-semibold); }

/* ── Showcase polish 2026-07-12: component rules that replaced inline view styles ──
   (uikit-theme-designer Law 3: structure in views, look in the design files). */
#fwre .fwre-brochure-iframe-wrap { position: relative; min-height: 420px; }
#fwre .fwre-brochure-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#fwre .fwre-brochure-preview-frame { width: 100%; height: 520px; border: none; }
#fwre .fwre-brochure-cover img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--fwre-radius-lg); }
#fwre .fwre-brochure-note { color: var(--fwre-grey); font-size: var(--fwre-text-base); text-align: center; margin-top: var(--fwre-space-20); }
#fwre .fwre-map-embed { height: 360px; }
#fwre .fwre-agent-photo { height: 200px; }
#fwre .fwre-agent-photo-sm { height: 120px; }
#fwre .fwre-agent-logo { height: 60px; }
#fwre .fwre-form-narrow { max-width: 520px; }
#fwre .fwre-video-lazy { cursor: pointer; }
#fwre .fwre-pannellum-container { width: 100%; height: 480px; background: var(--fwre-media-canvas); }

/* Print doc: spec tables wrap long values instead of pushing the bare page wider. */
#fwre.print .fwk-table td, #fwre.print .fwk-table th { word-break: break-word; }