/* ============================================================================
   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 by specificity. The file uses the important flag only against a vendor
   rule that carries it too (the fwk-text-muted utility), as designux asks.

   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
   (a packaged host, 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 needed. */
#fwre,
#fwre #fwre {
    /* brand */
    --demo-accent: var(--fwre-color-primary);
    --demo-accent-hover: var(--fwre-color-primary-hover);          /* product hover green (live): no --fwre token yet */
    --demo-gradient: var(--fwre-color-primary);     /* FLAT fill: primary button uses this var */
    --demo-on-accent: var(--fwre-color-on-primary);
    /* ink */
    --demo-ink: var(--fwre-color-text);
    --demo-ink-muted: var(--fwre-color-text-muted);
    --demo-muted: var(--fwre-color-text-muted);
    /* surfaces */
    --demo-bg: var(--fwre-color-surface);
    --demo-surface: var(--fwre-color-surface);
    --demo-surface-2: var(--fwre-color-surface-muted);
    /* hairlines / hover */
    --demo-border: var(--fwre-color-border);
    --demo-border-strong: var(--fwre-color-border-strong);
    --demo-hover: var(--fwre-color-surface-muted);
    /* 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, 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 stand this paints
   the white panel inside the (unchanged) dark demo-frame chrome.
   `:root #fwre#fwre` (2,1,0): the region root keeps this look over every rule that paints a root
   with one id (the search panel's `.fwre-search.fwre-mod-search:is(#fwre, #fwre *)`, the agents
   directory, the minimal search bar) and over the stand floor's `#fwre #fwre` (demo-property.css),
   which loads after this file. It used to take the important flag for the same result. */
:root #fwre#fwre {
    color: var(--fwre-color-text);
    background: var(--fwre-color-surface);
    border-color: var(--fwre-color-border);
}
/* The rounded white stage panel look is 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-color-surface);
    color: var(--fwre-color-text);
    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-color-surface); color: var(--fwre-color-text); }
#fwre .fwk-input,
#fwre .fwk-select,
#fwre .fwk-textarea { background-color: var(--fwre-color-surface-muted); color: var(--fwre-color-text); border: 1px solid var(--fwre-color-border); } /* background-COLOR: the shorthand would erase the select caret glyph (fwre-ms.css) */

/* The region keeps the framework's own box model. A host template may set `* { box-sizing:
   border-box }` for its whole page, and then every padded width in here shrinks by its padding
   (the compare columns on a phone lost 24px each, SC-003, 20 Oct 2026). `:where()` adds no
   specificity, so this outranks the host's bare `*` by loading after it and loses to every
   framework class that sets its own sizing (.fwk-input, .fwk-button and the rest). Tables and form
   controls are left out: the browser itself sizes those border-box, and any author rule, even this
   one, would override that default (the floor plan thumbnails and the map's buttons changed). */
:where(#fwre, #fwre :not(table, button, input, select, textarea, meter, progress)),
:where(#fwre, #fwre *)::before,
:where(#fwre, #fwre *)::after { box-sizing: content-box; }

/* The region carries its own face, weight and tracking: on the stand they came from the site
   chrome around it (site.css .fwre-site-main), so on a packaged host the island took the host
   theme's body face instead, a light weight with tight tracking on one and the system stack on
   the other (SC-003, 20 Oct 2026). */
#fwre {
    color: var(--fwre-color-text);
    font-family: var(--fwre-font);
    font-size: var(--fwre-text-sm);
    font-weight: var(--fwre-weight-normal);
    letter-spacing: normal;
    line-height: 1.5;
}
/* The region takes the host's WIDE measure, never its reading column: a block theme that caps its
   content children at a narrow content size must not fold the region (docs/design-guide.md, the
   19 Oct review findings). One id out-ranks that cap; the host's wide size still caps the region,
   and where a host defines no such variable it is `none`, so nothing changes. A module root with its
   own cap (`.fwre-mod-agent-card#fwre`) keeps it. */
#fwre { max-width: var(--wp--style--global--wide-size, none); }
/* One font family (spec 011 FR-010). The framework gives every heading and heading class its own
   system stack (the fw-uikit Headings block), which out-ranks the family the
   island inherits, and a host theme may set its own heading face; so headings, titles and the
   `.fwk-h2` prices took a second face beside the body's. The island's headings take the design's. */
#fwre h1, #fwre h2, #fwre h3, #fwre h4, #fwre h5, #fwre h6,
#fwre .fwk-h1, #fwre .fwk-h2, #fwre .fwk-h3, #fwre .fwk-h4, #fwre .fwk-h5, #fwre .fwk-h6,
#fwre .fwk-heading-small, #fwre .fwk-heading-medium, #fwre .fwk-heading-large,
#fwre .fwk-heading-xlarge, #fwre .fwk-heading-2xlarge, #fwre .fwk-heading-3xlarge { font-family: var(--fwre-font); }
#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); }
#fwre .fwre-text-bigger { font-size: var(--fwre-text-md); }
#fwre .fwk-text-bolder { font-weight: var(--fwre-weight-semibold); }

#fwre .fwk-button {
    color: var(--fwre-color-text);
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-medium);
    font-family: var(--fwre-font);
    text-transform: none;
    background: var(--fwre-color-surface);
    border: 1px solid transparent;
    border-radius: var(--fwre-radius);
}
#fwre .fwk-button-default {
    border-color: var(--fwre-color-border);
}
#fwre .fwk-button-default svg {
    color: var(--fwre-color-text-subtle);
}
#fwre .fwk-button-primary {
    color: var(--fwre-color-on-primary);
    background: var(--fwre-color-primary);
    border-color: var(--fwre-color-primary);
}
/* `#fwre#fwre`: out-ranks a child design's own `#fwre .fwre-button-primary-inverse` and its :hover
   (hhcom.css, loaded after this file on a packaged host) and the years selector's active pill. */
#fwre#fwre .fwre-button-primary-inverse {
    color: var(--fwre-color-text);
    border-color: var(--fwre-color-primary);
    background: transparent;
}
#fwre .fwk-button-secondary {
    color: var(--fwre-color-primary);
    background-color: var(--fwre-color-surface-muted);
}
#fwre .fwk-button-secondary svg {
    color: var(--fwre-color-primary);
}
#fwre .fwk-button-danger {
    background-color: var(--fwre-color-accent);
    color: var(--fwre-color-on-accent);
    border: 1px solid transparent;
}
#fwre .fwre-button-success {
    background-color: var(--fwre-color-primary);
    color: var(--fwre-color-on-primary);
    border: 1px solid transparent;
}
#fwre .fwk-select {
    background-color: var(--fwre-color-surface-muted);
    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-color-surface-muted);
    border-radius: var(--fwre-radius);
    border: 1px solid var(--fwre-color-border);
}
#fwre form .fwk-input:focus,
#fwre form .fwk-select:focus,
#fwre form .fwk-textarea:focus {
    border-color: var(--fwre-color-primary);
}
#fwre form .fwk-checkbox,
#fwre.fwk-modal-dialog .fwk-checkbox {
    background-color: var(--fwre-color-surface);
    border-radius: var(--fwre-radius);
    border: 1px solid var(--fwre-color-primary);
}
#fwre form .fwk-checkbox[checked],
#fwre.fwk-modal-dialog .fwk-checkbox[checked] {
    background-color: var(--fwre-color-primary);
}

#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-color-status-default); /* live default for uncolored statuses = UIkit label blue; colored ones carry inline dictionary styles */
    color: var(--fwre-color-status-default-text);
}
#fwre .fwk-label-success { background: var(--fwre-color-primary); }
/* Viewing booking status on the property manager's bookings page: the framework has no success or
   danger badge, so all three states were its default blue. They take the status pill tones. */
#fwre .fwre-booking-status.fwk-badge { background: var(--fwre-color-status-pending); color: var(--fwre-color-status-pending-text); }
#fwre .fwre-booking-status.fwre-booking-confirmed { background: var(--fwre-color-status-available); color: var(--fwre-color-status-available-text); }
#fwre .fwre-booking-status.fwre-booking-cancelled { background: var(--fwre-color-status-closed); color: var(--fwre-color-status-closed-text); }
/* A primary alert (the brochure request hint, the saved-search notes) takes the primary wash, not the
   framework's own blue. */
#fwre .fwk-alert-primary { background: var(--fwre-color-primary-soft); color: var(--fwre-color-text); }
/* A value chip on the property manager's edit form (the price's currency sign, a slider's number) is
   not a status, so it doesn't take the status blue: a neutral chip in the body text colour. */
#fwre .fwk-label.fwk-label.fwre-pm-value {
    background: var(--fwre-color-surface-strong);
    color: var(--fwre-color-text);
}
/* 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-color-primary); color: var(--fwre-color-on-primary); }

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

#fwre .fwre-text-black { color: var(--fwre-color-text); }
#fwre .fwre-text-green { color: var(--fwre-color-primary); }
/* Important on purpose: the vendor's `.fwk-text-muted` colour (fw-uikit-3.25.25.css, Color
   modifiers) carries the important flag itself, and only another one can re-tone it. */
#fwre .fwk-text-muted { color: var(--fwre-color-text-subtle) !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-color-primary-soft); }
#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-color-surface-muted); }

/* 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. One stock front-end
      template 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 host template
      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;                     /* that template'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-color-tooltip-surface);
    color: var(--fwre-color-tooltip-text);
    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; }

/* Property listing: view-switch toolbar (named component) */
#fwre .fwre-listing-toolbar .fwk-button-default {
    width: 40px;
    height: 40px;
    color: var(--fwre-color-text-subtle);
    padding: 0;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: var(--fwre-color-surface-muted);
    border-color: var(--fwre-color-surface-muted);
    border: 0;
    border-radius: var(--fwre-radius);
}
#fwre .fwre-listing-toolbar .fwk-button-default svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-listing-toolbar .fwk-button-default:hover, #fwre .fwre-listing-toolbar .fwk-button-default.fwk-active { background: var(--fwre-color-primary); border-color: var(--fwre-color-primary); }
#fwre .fwre-listing-toolbar .fwk-button-default:hover svg, #fwre .fwre-listing-toolbar .fwk-button-default.fwk-active svg { color: var(--fwre-color-on-primary); }
/* Phones: the labelled button that unfolds the ordering, lease-term and currency selects (list.php,
   design review dsn-10). Same chip as the view switches, sized to its label. */
#fwre .fwre-listing-toolbar .fwk-button-default.fwre-toolbar-options-toggle {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--fwre-space-6);
    padding: 0 var(--fwre-space-14);
    color: var(--fwre-color-text);
    font-size: var(--fwre-text-sm);
    text-transform: none;
}
#fwre .fwre-listing-toolbar .fwk-button-default.fwre-toolbar-options-toggle:hover { color: var(--fwre-color-on-primary); }


/* 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-color-on-media);
    width: 100%;
    padding: 50px var(--fwre-space-20) var(--fwre-space-20); /* 50px: hold, overlay fade depth */
    text-align: right;
    background: var(--fwre-color-media-fade);
}
#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-item-icons .fwk-button {
    width: 40px;
    height: 40px;
    color: var(--fwre-color-text-subtle);
    padding: 0;
    margin-right: var(--fwre-space-8);
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: var(--fwre-color-surface-muted);
    border: 0;
    border-radius: var(--fwre-radius);
}
#fwre .fwre-item-icons .fwk-button svg { color: var(--fwre-color-text); width: 23px; }
#fwre .fwre-item-options svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-options *:hover svg { color: var(--fwre-color-primary); }
/* The card option row: compare, share, 3D tour, show on map and the favourite star. This is the one
   place their size is set (spec 012 FR-008).
   - With a mouse (960px and up) each is a bare icon, like the live: share, 3D tour, compare and
     show on map drop their fwk-button chrome (default, secondary, plain) so the row reads as one
     set of glyphs; the star has no chrome to drop.
   - Below 960px each is its own 44x44 tap target (WCAG 2.5.5, spec 011 FR-023), glyph centred and
     unchanged in size; the row itself stays on one line (product.css, the footer layout). */
#fwre .fwre-item-options .fwre-compare-toggle,
#fwre .fwre-item-options .fwre-social-toggle,
#fwre .fwre-item-options .fwre-3d-link,
#fwre .fwre-item-options .fwre-map-locate {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0;
    border: 0;
    background: transparent;
}
/* compare and show on map centre their glyph on the row's axis; share and 3D tour sit on its baseline */
#fwre .fwre-item-options .fwre-compare-toggle,
#fwre .fwre-item-options .fwre-map-locate { display: inline-flex; align-items: center; }
@media (max-width: 959px) {
    #fwre .fwre-item-options .fwre-compare-toggle,
    #fwre .fwre-item-options .fwre-favorite,
    #fwre .fwre-item-options .fwre-social-toggle,
    #fwre .fwre-item-options .fwre-3d-link,
    #fwre .fwre-item-options .fwre-map-locate {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
#fwre .fwre-item-options .fwre-social-toggle svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-options .fwre-social-toggle:hover svg { color: var(--fwre-color-primary); }
#fwre .fwre-item-options .fwre-3d-link svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-options .fwre-3d-link:hover svg { color: var(--fwre-color-primary); }
/* Compare toggle: 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 svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-item-options .fwre-compare-toggle:hover svg { color: var(--fwre-color-primary); }
/* 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; display: inline-flex; }
#fwre .fwre-item-compare { margin: var(--fwre-space-15) 0; font-size: var(--fwre-text-sm); color: var(--fwre-color-text-subtle); 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-color-text-subtle); }
#fwre .fwre-copy-link:hover svg, #fwre .fwre-copy-link.fwre-copied svg { color: var(--fwre-color-primary); }
/* 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).
   Bare on purpose: on a page with no island the JS falls back to <body> (demo-property.js barHost()),
   and the bar must still float there. */
.fwre-compare-bar {
    position: fixed; right: 24px; bottom: 24px; z-index: 50;
    box-shadow: var(--fwre-shadow-small);
}
/* On the compare page itself the bar only links back to the page you're on, and on a phone it sat
   over the first property's price; it isn't shown there. Elsewhere on a phone the island keeps
   room at its foot, so the bar never covers the last row. */
:root:has(.fwre-compare-table) #fwre > .fwre-compare-bar { display: none; }
@media (max-width: 639px) {
    #fwre:has(> .fwre-compare-bar) { padding-bottom: 72px; }
}
#fwre .fwre-item-agent {
    padding: var(--fwre-space-10) var(--fwre-space-15);
    margin-top: 25px; /* hold: off-scale (decisions r2) */
    background: var(--fwre-color-surface-muted);
    border-radius: var(--fwre-radius);
}
#fwre .fwre-item-agent svg, #fwre .fwre-item-agent-company { color: var(--fwre-color-text-faint); }
#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 .fwre-social-dropdown a.fwre-sms-share { display: none; } /* (1,2,1): beats the drop's `#fwre .fwre-social-dropdown a` */
}


/* 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-color-surface);
    overflow: hidden;
}
#fwre .fwre-grid-card .fwre-item-media { border-radius: var(--fwre-radius-card) var(--fwre-radius-card) 0 0; }


/* A featured card is a normal white card: the Featured pill card_media puts on its photo marks it
   (spec 011 FR-019; the filled mint card with a teal border read as a styling bug next to the pill).
   `.fwre-item-featured` stays on the card as a hook for a child design. fwre-mod-mini-badge is used
   only for the old featured word, which the pill replaced. */
#fwre .fwre-mod-mini-badge { display: none; }


/* 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-color-on-media); }


/* 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-family: var(--fwre-font); 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-color-text); }
/* The heading takes the panel's measure (spec 011 FR-017): a block theme caps its content children at
   the narrow content size and centres them, so the heading sat 270px right of the panel it names, which
   takes the wide size (`#fwre` above). The element raises it over the theme's one-class cap. */
h3.fwre-mod-search-title { max-width: var(--wp--style--global--wide-size, none); }
#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 {
    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-color-on-primary);
    background: var(--fwre-color-primary);
}
/* 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. */

/* 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 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-color-surface-muted);
    border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius);
    color: var(--fwre-color-text);
    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-color-text);
    background: var(--fwre-color-surface-muted);
    border: 1px solid var(--fwre-color-border);
    border-radius: var(--fwre-radius);
}
#fwre .fwre-ms:focus-within .fwre-ms-toggle {
    background: var(--fwre-color-surface);
    border-color: var(--fwre-color-primary);
}
/* Caret standard: the ONE 20px chevron (fwre-ms.css), identical to the native fwk-select
   data-URI glyph, which cannot reference tokens and so keeps its own copy of the
   --fwre-color-caret value. Re-asserted here at (1,3,1) because product.css's
   `#fwre .fwk-button-default svg` (1,2,1) would otherwise repaint it the subtle grey. */
#fwre .fwre-ms .fwre-ms-caret svg { color: var(--fwre-color-caret); }


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


/* 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-color-on-primary);
    background: var(--fwre-color-primary);
}
#fwre .fwre-footer-pagination .fwk-button-secondary svg { color: var(--fwre-color-text-subtle); }
#fwre .fwre-footer-pagination .fwk-button-secondary:hover svg { color: var(--fwre-color-on-primary); }
#fwre .fwre-footer-pagination .fwre-page-gap {
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: none;
}


/* Read more + list resets */
#fwre 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; }

/* ── 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-color-text-subtle); 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-color-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; }