/* ============================================================
   design-overrides.css
   ------------------------------------------------------------
   Project-specific overrides that sit ON TOP of design.css.
   Loaded only on plugin pages (alongside design.css). The
   transformer script that builds design.css will never touch
   this file, so safe place for hand-tuned tweaks.

   Naming: scope everything to body.mrpc-design so nothing leaks.
   ============================================================ */


/* ============================================================
   MOBILE RESCUE — universal horizontal-overflow + tap-target +
   reCAPTCHA-badge fixes. Audit at 390x844 surfaced a small set
   of high-impact issues that affect every plugin page:

     1. Footer's hardcoded 4-column grid (2fr 1fr 1fr 1.4fr) had
        no mobile breakpoint, producing a body that scrolled
        ~826px wide on a 375px iPhone viewport. Universal fix:
        collapse to 2 columns at ≤900 and 1 column at ≤600.
        Same for the newsletter input + button row.

     2. .mrpc-layout (search page) had `grid-template-columns:
        1fr` at ≤700px but the child columns refused to shrink
        below content min-content (~491px). Forcing `min-width: 0`
        on .filter-rail and .results lets them shrink to the
        viewport width. Selects/inputs inside also get `max-width:
        100%` so a long option label can't push the column wide.

     3. The reCAPTCHA v3 badge (`.grecaptcha-badge`) is rendered
        at `position: fixed; right: -186px` by Google's script when
        opacity is animated in — on a narrow viewport that
        right-offset still triggers horizontal scroll. Per Google's
        own guidance, we hide the badge on screens ≤600px (the
        privacy notice is still discoverable in our footer Privacy
        link). Use visibility:hidden + width:0 rather than
        display:none so the iframe inside the badge still loads
        for the no-CAPTCHA UX flow.

     4. Top-bar nav links rendered at 17px tap height inside the
        hamburger drawer — well below the 44pt iOS / 48dp Android
        minimum. Bumped padding and min-height to 44px on mobile.
   ============================================================ */

/* (1) Footer grid collapse — kills ~451px of horizontal overflow
   that was visible across every single plugin page. */
@media (max-width: 900px) {
    body.mrpc-design .footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 600px) {
    body.mrpc-design .footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    body.mrpc-design .footer {
        padding: 56px 0 24px;
    }
    body.mrpc-design .footer .container-wide {
        padding: 0 20px;
    }
    /* Newsletter input + button row — let the email field fill the
       column, button drops below it instead of trying to share a
       single line at narrow widths. */
    body.mrpc-design .footer .newsletter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    body.mrpc-design .footer .newsletter input,
    body.mrpc-design .footer .newsletter button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* The "legal" line below the grid is also a flex row — let the
       two pieces wrap rather than fighting for one line. */
    body.mrpc-design .footer .legal {
        flex-direction: column;
        gap: 8px;
    }
}

/* (2) Search-page layout — allow the single-column grid to shrink
   below content's natural min-content width. Without min-width:0
   the 1fr column inflates to whatever its widest child measures. */
@media (max-width: 700px) {
    body.mrpc-design .mrpc-layout {
        /* belt + suspenders — explicit single column and zero
           min-width so the previous 491px floor doesn't stick. */
        grid-template-columns: 1fr !important;
        min-width: 0;
    }
    body.mrpc-design .mrpc-layout > .filter-rail,
    body.mrpc-design .mrpc-layout > .results,
    body.mrpc-design .mrpc-layout > .map-panel {
        min-width: 0;
        max-width: 100%;
    }
    body.mrpc-design .filter-rail {
        padding: 20px 16px 32px;
    }
    body.mrpc-design .results {
        padding: 20px 16px 64px;
    }
    /* Native form controls don't auto-shrink — pin them to the
       column width so a long option label can't push the column. */
    body.mrpc-design .filter-rail .filter-select,
    body.mrpc-design .filter-rail .range input,
    body.mrpc-design .filter-rail .pill-row,
    body.mrpc-design .filter-rail .mrpc-checklist label {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Bed-count chip pills wrap rather than overflowing. */
    body.mrpc-design .filter-rail .pill-row,
    body.mrpc-design #mrpc-bed-pills.pill-row {
        flex-wrap: wrap;
    }
}

/* (3) reCAPTCHA badge — hide on small screens to prevent its
   fixed-position container from triggering horizontal scroll.
   Privacy notice is still surfaced via the footer Privacy link. */
@media (max-width: 600px) {
    .grecaptcha-badge {
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        right: 0 !important;
    }
}

/* (4) Section heads — `.section-head` is a flex row with H2 + meta-link;
   `.meta` has `white-space: nowrap` so a long link ("See all in
   Victoria →") + long H2 ("X neighbourhoods, each its own story.")
   couldn't share a 375px row. Caused 42px overflow on district pages.
   Let the row wrap and put the meta below the heading on mobile. */
@media (max-width: 700px) {
    body.mrpc-design .section-head {
        flex-wrap: wrap;
        gap: 12px 16px;
        margin-bottom: 28px;
    }
    body.mrpc-design .section-head .meta {
        white-space: normal;
    }
    /* Container-wide padding too tight for some grids on iPhone-class
       widths — drop side padding from 32 → 20 so 2-up grids actually fit. */
    body.mrpc-design .container-wide,
    body.mrpc-design .container {
        padding: 0 20px;
    }
    /* All three-column / four-column grids collapse to a single column at
       narrow widths. design.css already does this at ≤900 for cols-3 →
       cols-2, but cols-2 (155px cells) still overflowed on a few pages
       where card padding + gap > half-viewport. One column is safer and
       matches the editorial layout on every other narrow-width page. */
    body.mrpc-design .grid.cols-3,
    body.mrpc-design .grid.cols-4,
    body.mrpc-design .mrpc-related-grid,
    body.mrpc-design .mrpc-home-regions,
    body.mrpc-design .mrpc-home-editorial {
        grid-template-columns: 1fr;
    }
    /* Breadcrumbs ("Home / Search / Victoria / James Bay") — let them
       wrap rather than push the last segment past the viewport. */
    body.mrpc-design .crumbs {
        flex-wrap: wrap;
        word-break: break-word;
        line-height: 1.6;
    }
    /* Nearby-neighbourhood cards on the neighbourhood page used 28px
       padding which, in a 155px cell, ate the entire width. Slim the
       padding so the card content actually fits the cell. */
    body.mrpc-design .mrpc-nb-nearby__card {
        padding: 20px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* (5) Tap targets — bump the hamburger drawer's nav links and the
   "Condos by Area" dropdown to a minimum 44px tap height on mobile.
   Apple HIG / WCAG 2.5.5 minimum target size. */
@media (max-width: 900px) {
    body.mrpc-design .topbar.is-open .nav > a,
    body.mrpc-design .topbar.is-open .nav > .nav-item > a {
        min-height: 44px;
        padding: 12px 0;
        display: flex;
        align-items: center;
    }
    body.mrpc-design .topbar.is-open .mrpc-nav-region__head a {
        min-height: 36px;
        padding: 6px 0;
    }
    body.mrpc-design .topbar.is-open .mrpc-nav-region__list li a {
        padding: 6px 4px;
        display: inline-block;
        min-height: 28px;
    }
}


/* ------------------------------------------------------------
   Footer brand fix — the "BC" in "VictoriaBCCondos" uses the
   .italic-accent class, which design.css globally colors with
   var(--ink). The footer is also painted with var(--ink), so
   the BC text was invisible against the background. Override
   to the paper color when nested inside the dark footer brand.
   ------------------------------------------------------------ */
body.mrpc-design .footer .footer-brand .italic-accent,
body.mrpc-design .footer-brand em.italic-accent {
    color: var(--paper);
}

/* ------------------------------------------------------------
   Footer text legibility — design.css uses 75%/55%/45% paper-on-ink
   transparencies which read as low-contrast gray on dark blue and
   fail accessibility expectations. Bump everything that's body or
   meta-level text to higher opacity so the footer is actually
   readable, while keeping the muted/quiet visual hierarchy.
   ------------------------------------------------------------ */
body.mrpc-design .footer {
    /* Base text color (inherited by .footer-tag, generic <p>, etc.). */
    color: color-mix(in oklch, var(--paper) 90%, transparent);
}
body.mrpc-design .footer .footer-tag {
    /* Explicit for the brand description paragraph — the screenshot
       complaint was specifically about this text being unreadable. */
    color: color-mix(in oklch, var(--paper) 92%, transparent);
}
body.mrpc-design .footer h5 {
    /* Column headers (Explore / About / Stay in the loop) — were at 55%. */
    color: color-mix(in oklch, var(--paper) 78%, transparent);
}
body.mrpc-design .footer a {
    /* Footer links — were at 85%. */
    color: color-mix(in oklch, var(--paper) 92%, transparent);
}
body.mrpc-design .footer a:hover {
    color: var(--paper);
}
body.mrpc-design .footer .legal {
    /* Bottom legal line — was at 45%, painfully faint. */
    color: color-mix(in oklch, var(--paper) 70%, transparent);
}
body.mrpc-design .footer .newsletter input::placeholder {
    color: color-mix(in oklch, var(--paper) 65%, transparent);
}


/* ------------------------------------------------------------
   Building card (.bcard) — restyled to design tokens.
   We keep the existing markup structure from
   templates/partials/building-card.php and only override
   colors / fonts / spacing here. The card on theme pages
   (if any future caller) keeps its old look via css/css.css.
   ------------------------------------------------------------ */

body.mrpc-design .bcard {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    color: var(--ink-2);
    font-family: var(--sans);
}
body.mrpc-design .bcard:hover {
    border-color: color-mix(in oklch, var(--ink) 30%, var(--line));
    box-shadow: 0 8px 24px -12px rgba(26, 34, 48, 0.12);
}

body.mrpc-design .bcard__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}
body.mrpc-design .bcard__name {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.15;
    margin: 0;
    text-transform: none;
}
body.mrpc-design .bcard:hover .bcard__name { color: var(--accent-ink); }
body.mrpc-design .bcard__price {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent-ink);
    white-space: nowrap;
}

body.mrpc-design .bcard__image-wrap { position: relative; }
body.mrpc-design .bcard__img-container { aspect-ratio: 4/3; overflow: hidden; }
body.mrpc-design .bcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.mrpc-design .bcard__tags {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    display: flex; gap: 6px; flex-wrap: wrap;
    z-index: 2;
}
body.mrpc-design .bcard__tag {
    display: inline-flex; align-items: center;
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* "New Construction" tag gets the accent treatment */
body.mrpc-design .bcard__tag:first-child {
    /* heuristic: first tag is the most important */
}

body.mrpc-design .bcard__image-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(26,34,48,0.78), rgba(26,34,48,0.0));
    color: var(--paper);
    gap: 8px;
}
body.mrpc-design .bcard__unit-info {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper);
    flex: 1;
    min-width: 0;
}
body.mrpc-design .bcard__listings {
    font-weight: 500;
    color: color-mix(in oklch, var(--paper) 78%, transparent);
}
body.mrpc-design .bcard__listings.bcard__listings--has {
    color: var(--paper);
    background: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
}

body.mrpc-design .bcard__save {
    border: 0;
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    padding: 6px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
}
body.mrpc-design .bcard__save:hover { background: var(--paper); }
body.mrpc-design .bcard__save svg {
    width: 12px;
    height: 12px;
    /* Path inside the SVG uses fill="currentColor" — inherit from the
       button's text color so the bookmark icon stays visible against the
       light pill background. */
    color: var(--ink);
}
/* Default state: show the OUTLINE icon, hide the filled one.
   .is-favourited inverts that. */
body.mrpc-design .bcard__save .bcard__save-icon--filled { display: none; }
body.mrpc-design .bcard__save .bcard__save-icon--outline { display: inline-block; }
body.mrpc-design .bcard__save.is-favourited .bcard__save-icon--filled { display: inline-block; }
body.mrpc-design .bcard__save.is-favourited .bcard__save-icon--outline { display: none; }
/* When favourited, paint the flag icon (and the "Saved" label) in the
   accent red so the active state is unmissable. We keep the pill itself
   light — when the background was set to var(--ink) the icon used
   fill="currentColor" tracking color: var(--paper) which the eye reads
   as "almost black on a black pill"; the flag effectively disappeared.
   Switching to accent-on-paper gives a clear red flag, matching the
   user-facing expectation that "saved" reads as a red bookmark. */
body.mrpc-design .bcard__save.is-favourited {
    background: var(--paper);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
}
body.mrpc-design .bcard__save.is-favourited:hover {
    background: var(--paper);
    color: var(--accent-ink, var(--accent));
    box-shadow: inset 0 0 0 1px var(--accent);
}
body.mrpc-design .bcard__save.is-favourited .bcard__save-icon {
    color: var(--accent);
}

body.mrpc-design .bcard__body { padding: 14px 16px 4px; }
body.mrpc-design .bcard__address-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.mrpc-design .bcard__address {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: none;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mrpc-design .bcard__arrow {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
body.mrpc-design .bcard__arrow svg { width: 12px; height: 12px; }
body.mrpc-design .bcard__excerpt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 10px 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.mrpc-design .bcard__excerpt a {
    color: var(--accent-ink);
    border-bottom: 1px solid currentColor;
}
body.mrpc-design .bcard__divider { display: none; }

/* The card upper-case the building name in the existing template;
 * the design uses title-case via the serif. Re-cast. */
body.mrpc-design .bcard__name {
    text-transform: none;
    text-decoration: none;
}


/* ------------------------------------------------------------
   Helper for the saved-favourites heart in the header.
   When fav count is 0 we hide the accent dot so the icon
   doesn't lie about there being saved items.
   ------------------------------------------------------------ */
body.mrpc-design .fav-icon.mrpc-fav-empty::after { display: none; }


/* ------------------------------------------------------------
   Topbar position offsets for the sticky search-top bar.
   When the design topbar is sticky at 72px tall, the search
   sub-bar sits beneath it. Sticky positioning inside scrolled
   pages needs the offsets to add up.
   ------------------------------------------------------------ */
body.mrpc-design .search-top { top: 72px; }
body.mrpc-design .filter-rail,
body.mrpc-design .map-panel { top: 192px; max-height: calc(100vh - 192px); }


/* ============================================================
   POLISH FIXES (issues #3, #6, #7, #11, #12)
   ============================================================ */

/* --- #12 Heart icon + #11 Talk-to-Realtor CTA alignment ----------
   The .nav row has mixed heights (text links ~26px, heart 36px,
   CTA pill ~31px). align-items:center on the flex parent puts
   them on a shared vertical centre line. Adjust heart so its
   accent dot indicator doesn't overlap the line, and ensure the
   CTA pill doesn't wrap onto two lines on mid-width displays. */
body.mrpc-design .topbar-inner { align-items: center; gap: 24px; }
body.mrpc-design .nav { align-items: center; flex-wrap: nowrap; }
body.mrpc-design .nav a {
    white-space: nowrap; /* prevents "Talk to a Realtor" from breaking */
    align-items: center;
}
/* Force ALL .nav children to share the same explicit height + line-height
   so flexbox can center them on a single clean baseline. Without this, the
   menu text (variable line-height), the heart icon (36px circle), and the
   CTA pill (text + 12px padding) all had different effective box heights
   and so their geometric centers drifted apart by ~3px. */
body.mrpc-design .nav a {
    height: 36px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

body.mrpc-design .fav-icon {
    /* Filled circle, no border — matches the .nav-cta button (also filled,
       no border) so they read as sibling controls. Both 36px tall so they
       align cleanly with the menu text items above. */
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-self: center;
    box-sizing: border-box;
    background: var(--mist);
    border: 0 !important;          /* defeat the inherited `.nav a` border-bottom */
    border-radius: 50%;
    transition: background 0.15s ease-out;
    /* No transform — `height: 36px` + `line-height: 1` on all .nav a
       items (set further up in this file) gives every nav child the
       same effective box height, so the parent flex's align-items:center
       centers everything on a single shared axis. Earlier translateY
       nudges (-3px, then -13px) were compensating for a layout
       inconsistency that's now fixed at the height level. */
}
body.mrpc-design .fav-icon:hover {
    background: var(--line);
}
body.mrpc-design .fav-icon::after {
    top: 6px; right: 6px;
    width: 7px; height: 7px;
}

/* CTA pill: same 36px height (set on .nav a above) — keep the horizontal
   padding for its text + the dark fill + rounded pill shape. */
body.mrpc-design .nav a.nav-cta {
    height: 36px;
    padding: 0 22px;
    line-height: 1;
}
body.mrpc-design .nav-cta {
    padding: 10px 18px;
    line-height: 1.1;
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- #6 Stack price range inputs vertically -----------------------
   Two number inputs side-by-side in a 320px column with 24px
   padding + 1px border = ~270px usable. Each input needs ~120px
   minimum to show "$ 1,000,000" without truncation. Stacking
   removes the horizontal-scroll on the rail. */
body.mrpc-design .filter-rail .range {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
body.mrpc-design .filter-rail .range .dash {
    display: block;
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    transform: rotate(90deg);
    transform-origin: center;
    margin: 2px auto;
}

/* --- #7 Toggle switch formatting ---------------------------------
   The .switch label uses span / input / span. The native checkbox
   default styling can leak through if the theme has a higher-
   specificity rule. Force the layout + hide native input + size
   knob explicitly. */
body.mrpc-design .filter-rail .switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    /* Use mono so the switch labels match "WHERE / PRICE / BEDS" — sans
       Geist on these labels made "Has Listings" / "New construction
       only" feel out of place against the rest of the filter rail. */
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    line-height: 1.3;
    /* Reset the original css/css.css `.switch { width: 50px; height: 26px }`
       rule that would squeeze the label text + knob into 50px and cause them
       to overlap. We want the label to fill the filter-rail row width.
       position: relative is kept so the absolute-positioned hidden input
       still anchors to this label. */
    width: 100%;
    height: auto;
    position: relative;
}
body.mrpc-design .filter-rail .switch > span:first-child {
    flex: 1;
    min-width: 0;
}
body.mrpc-design .filter-rail .switch input[type="checkbox"] {
    /* Hide the native checkbox but keep it accessible (don't display:none) */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
body.mrpc-design .filter-rail .switch .knob {
    flex: 0 0 38px;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line);
    position: relative;
    transition: background .15s;
    cursor: pointer;
    display: inline-block;
}
body.mrpc-design .filter-rail .switch .knob::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--paper);
    transition: left .15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
body.mrpc-design .filter-rail .switch input:checked ~ .knob {
    background: var(--ink);
}
body.mrpc-design .filter-rail .switch input:checked ~ .knob::after {
    left: 18px;
}

/* --- "Condos by Area" mega-menu (region columns) --------------------
   Each column now has a clickable region heading + districts flowing
   inline with mid-dot separators. Previous layout was a vertical list
   per column, which read ambiguously when "Central Saanich" appeared
   adjacent to one-word "Colwood" — the eye blurred them into one
   entry. Inline + dot makes each district a clearly bounded chip. */
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__head {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.15;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__head a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    color: var(--ink);
    text-decoration: none;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    transition: color .15s;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__head a:hover {
    color: var(--accent-ink, var(--accent));
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__arrow {
    font-family: var(--mono);
    font-size: 13px;
    opacity: 0.55;
    transition: transform .15s, opacity .15s;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__head a:hover .mrpc-nav-region__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Inline district list with mid-dot separators. The list resets default
   ul/li styling, lays out items inline, and uses ::before on each item
   except the first to render a separator. Using ::before (rather than
   word-spacing or border-left) keeps the dot semantically out of the
   link text — copy-paste and screen-readers see "Central Saanich" not
   "· Central Saanich". */
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 1.7;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__list li {
    display: inline;
    margin: 0;
    padding: 0;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__list li + li::before {
    content: '·';
    margin: 0 8px;
    color: var(--muted);
    /* Keep the dot from being a click target / focusable. */
    user-select: none;
    pointer-events: none;
    /* Slightly heavier so the dot reads as a separator, not a typo. */
    font-weight: 600;
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__list a {
    display: inline;
    padding: 0;
    font-size: 13px;
    color: var(--ink-2);
    border: 0;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap; /* keep "Central Saanich" together; dots break lines instead */
}
body.mrpc-design .mrpc-nav-dropdown--regions .mrpc-nav-region__list a:hover {
    color: var(--accent-ink, var(--accent));
}

/* --- Median hint under the price range — mono for consistency with the
   "WHERE / PRICE / BEDS" labels above it. Before this rule it inherited
   the body sans (Geist) and stood out as a font mismatch on the rail. */
body.mrpc-design .filter-rail .median-hint {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.4;
}

/* --- #3 Override [mrp] sibling-plugin listings white background --
   The sibling MRP plugin renders listings inside its own white
   .mrp-listing-* containers. On our Coastal Calm paper-cream
   background this looks like a misplaced spreadsheet. Reset the
   background to transparent so listings sit on the page colour. */
body.mrpc-design .mrpc-listings-content,
body.mrpc-design .mrpc-listings-content .mrp-listing-results,
body.mrpc-design .mrpc-listings-content .mrp-listing-result,
body.mrpc-design .mrpc-listings-content .mrp-listing-result-item,
body.mrpc-design .mrpc-listings-content [class*="mrp-listing"],
body.mrpc-design .mrpc-listings-content ul,
body.mrpc-design .mrpc-listings-content li,
body.mrpc-design .mrpc-listings-content > div {
    background: transparent !important;
    background-color: transparent !important;
}
/* Cards within the listing list keep a subtle paper-2 background
   so they read as cards, just not bright-white. */
body.mrpc-design .mrpc-listings-content .mrp-listing-result {
    background: var(--paper-2) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

/* Restore comfortable spacing between listing cards. MRP's own .mrp-listing-results
   ul is laid out as a flex row but with NO gap between cards, so the cards end up
   touching each other — looks like one big slab. Add a 16px gap and reset the
   default list padding/markers our blanket reset above doesn't touch. */
body.mrpc-design .mrpc-listings-content .mrp-listing-results {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
body.mrpc-design .mrpc-listings-content .mrp-listing-result {
    /* Make each card a flex item with a sensible min/max width so 3-4 fit per
       row on desktop and they wrap cleanly on narrower viewports. */
    flex: 1 1 240px;
    max-width: calc(25% - 12px); /* up to 4 across with the 16px gap */
    margin: 0 !important;        /* defeat MRP's own card margins */
}
@media (max-width: 1100px) {
    body.mrpc-design .mrpc-listings-content .mrp-listing-result {
        max-width: calc(33.333% - 11px);
    }
}
@media (max-width: 800px) {
    body.mrpc-design .mrpc-listings-content .mrp-listing-result {
        max-width: calc(50% - 8px);
    }
}
@media (max-width: 520px) {
    body.mrpc-design .mrpc-listings-content .mrp-listing-result {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* Restore the price-overlay background. The blanket [class*="mrp-listing"]
   transparent reset above stripped this, leaving "$515,900" as plain white
   text floating over the photo. Re-paint it as a dark pill so it pops against
   any image. */
body.mrpc-design .mrpc-listings-content .mrp-listing-price-container {
    background: rgba(26, 34, 48, 0.88) !important; /* var(--ink) at 88% */
    color: var(--paper) !important;
    padding: 4px 10px !important;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--r-sm);
    display: inline-block;
    line-height: 1.4;
}

/* MyRealPage renders its `.mrp-results-page-summary` block (which contains
   the "Sort by:" <select> + result-count + pagination) TWICE — once above
   and once below the list. On building pages the second one is redundant
   noise (the user already sorted from the top control). Hide every
   `.mrp-results-page-summary` after the first. */
body.mrpc-design .mrpc-listings-content .mrp-results-page-summary:not(:first-of-type) {
    display: none !important;
}


/* ============================================================
   MOBILE NAV  (hamburger + slide-down drawer)
   ------------------------------------------------------------
   Desktop nav fits everything inline. At <=900px the nav links
   wrap to multiple lines and the CTA overlaps page content.
   Fix: hide nav, show a hamburger button, toggle a drawer that
   slides down below the topbar via .topbar.is-open in JS.
   ============================================================ */

/* Hamburger button — hidden by default (desktop) */
body.mrpc-design .mrpc-nav-toggle {
    display: none;
    width: 42px; height: 42px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
body.mrpc-design .mrpc-nav-toggle:hover { border-color: var(--ink); }
body.mrpc-design .mrpc-nav-toggle__bar {
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform .2s ease, opacity .15s;
}
body.mrpc-design .topbar.is-open .mrpc-nav-toggle__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
body.mrpc-design .topbar.is-open .mrpc-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
body.mrpc-design .topbar.is-open .mrpc-nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 900px) {
    /* Show hamburger, hide the inline nav until the drawer opens */
    body.mrpc-design .mrpc-nav-toggle { display: inline-flex; }

    body.mrpc-design .nav {
        position: fixed;
        top: 72px;
        left: 0; right: 0;
        background: var(--paper);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 8px 24px 24px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
        z-index: 49;
        box-shadow: 0 14px 36px -18px rgba(26, 34, 48, 0.18);
        border-bottom: 1px solid var(--line);
    }
    body.mrpc-design .topbar.is-open .nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform .2s ease, opacity .2s ease, visibility 0s;
    }

    /* Each nav row */
    body.mrpc-design .nav > a,
    body.mrpc-design .nav > .nav-item {
        padding: 14px 0;
        border-bottom: 1px solid var(--line-2);
        font-size: 16px;
    }
    body.mrpc-design .nav > a:last-child,
    body.mrpc-design .nav > .nav-item:last-child {
        border-bottom: 0;
    }

    /* "Condos by Area" dropdown becomes inline, always-open inside drawer */
    body.mrpc-design .nav-item > a { padding: 0; }
    body.mrpc-design .nav-item > a .caret { display: none; }
    body.mrpc-design .nav-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        min-width: 0;
        padding: 12px 0 0;
        margin-top: 8px;
        background: transparent;
        border: 0;
        box-shadow: none;
        gap: 8px 16px;
    }
    body.mrpc-design .nav-dropdown a {
        padding: 4px 0;
        font-size: 14px;
        border: 0;
    }

    /* Heart icon: tuck in upper-right area but not stacked with toggle */
    body.mrpc-design .nav .fav-icon { align-self: flex-start; margin-bottom: 6px; }

    /* CTA — full width pill at the bottom of the drawer */
    body.mrpc-design .nav .nav-cta {
        text-align: center;
        margin-top: 8px;
        padding: 14px 16px;
        justify-content: center;
    }
}

/* ============================================================
   DISTRICT PAGE  (templates/district.php → design/area.html)
   ------------------------------------------------------------
   All page-specific classes are prefixed `mrpc-area-*` / `mrpc-neigh-*`
   / `mrpc-insights-*` to avoid collisions with theme/Elementor.
   ============================================================ */

/* ---- Hero ---- */
body.mrpc-design .mrpc-area-hero {
    border-bottom: 1px solid var(--line);
    padding: 56px 0 72px;
    background: var(--paper);
}
body.mrpc-design .mrpc-area-hero .container-wide {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
body.mrpc-design .mrpc-area-hero__title {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 88px);
    line-height: 1.02;
    margin: 16px 0 0;
    letter-spacing: -0.02em;
}
body.mrpc-design .mrpc-area-hero p.lede {
    margin: 24px 0 28px;
    max-width: 520px;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
}

/* District blurb — full text in the DOM, line-clamped initially via
   -webkit-line-clamp so wrapping always happens at word boundaries (the
   browser handles whitespace breaks for us — no more mid-word cuts
   from server-side wp_trim_words). The "Read more" button removes the
   clamp class on click; "Read less" puts it back. */
body.mrpc-design .mrpc-area-blurb { max-width: 520px; margin: 24px 0 28px; }
body.mrpc-design .mrpc-area-blurb .mrpc-area-blurb__text {
    margin: 0;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
}
body.mrpc-design .mrpc-area-blurb.is-clamped .mrpc-area-blurb__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
body.mrpc-design .mrpc-area-blurb__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 0 0;
    margin: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink, var(--accent));
    border-bottom: 1px solid currentColor;
    line-height: 1.2;
}
body.mrpc-design .mrpc-area-blurb__toggle:hover { color: var(--ink); }
body.mrpc-design .mrpc-area-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
body.mrpc-design .mrpc-area-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 32px 48px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    margin-top: 32px;
}
body.mrpc-design .mrpc-area-hero__map {
    width: 100%;
    aspect-ratio: 5 / 6;
    border-radius: var(--r-lg);
    background: var(--mist);
    overflow: hidden;
    position: relative;
}

/* ---- Quick filters strip ---- */
body.mrpc-design .mrpc-area-quick {
    background: var(--mist);
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-area-quick .container-wide {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}
body.mrpc-design .mrpc-area-quick .lab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
body.mrpc-design .mrpc-pill-row,
body.mrpc-design .pill-row {
    display: flex;
    gap: 10px 12px; /* row-gap | column-gap — more breathing room
                       between BEDROOMS chips and the top-of-page filter chips. */
    flex-wrap: wrap;
}
/* Bedrooms chip rail specifically — slightly more generous since the
   pills are short labels (Any / Studio / 1+ / 2+ / 3+) that otherwise
   crowd into a tight cluster. */
body.mrpc-design #mrpc-bed-pills {
    gap: 12px 14px;
}
body.mrpc-design #mrpc-bed-pills .chip {
    padding: 8px 16px;
}
body.mrpc-design .mrpc-area-quick__more {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
}
body.mrpc-design .mrpc-area-quick__more:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ---- Neighbourhoods grid ---- */
body.mrpc-design .mrpc-neigh-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-neigh-list a {
    padding: 24px 24px 28px;
    border-right: 1px solid var(--line);
    display: block;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
body.mrpc-design .mrpc-neigh-list a:last-child {
    border-right: 0;
}
body.mrpc-design .mrpc-neigh-list a:hover {
    background: var(--mist);
}
body.mrpc-design .mrpc-neigh-list__name {
    font-family: var(--display);
    font-size: 22px;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 6px;
}
body.mrpc-design .mrpc-neigh-list__count {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
}

/* ---- Buildings grid section ---- */
body.mrpc-design .mrpc-area-buildings-section {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-area-buildings-grid {
    margin-top: 24px;
}

/* ---- Insights table (adapted, no chart) ---- */
body.mrpc-design .mrpc-insights-tbl {
    border-top: 1px solid var(--line);
    margin-top: 24px;
}
body.mrpc-design .mrpc-insights-tbl__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.6fr;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-2);
    align-items: center;
    font-size: 14px;
    gap: 16px;
}
body.mrpc-design .mrpc-insights-tbl__row--h {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 0;
    border-bottom-color: var(--line);
}
body.mrpc-design .mrpc-insights-tbl__name {
    color: var(--ink);
    font-weight: 500;
}
body.mrpc-design .mrpc-insights-tbl__name a {
    color: inherit;
    text-decoration: none;
}
body.mrpc-design .mrpc-insights-tbl__name a:hover {
    text-decoration: underline;
}
body.mrpc-design .mrpc-insights-tbl__sub {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
body.mrpc-design .mrpc-insights-tbl__val {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
}

/* ---- Dark CTA band ---- */
body.mrpc-design .mrpc-area-cta {
    background: var(--ink);
    color: var(--paper);
    padding: 48px 0;
}
body.mrpc-design .mrpc-area-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
body.mrpc-design .mrpc-area-cta__eyebrow {
    color: color-mix(in oklch, var(--paper) 60%, transparent);
}
body.mrpc-design .mrpc-area-cta__h {
    color: var(--paper);
    margin-top: 10px;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.15;
}

/* ---- Responsive (matches design/area.html breakpoints) ---- */
@media (max-width: 1100px) {
    body.mrpc-design .mrpc-area-hero .container-wide {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    body.mrpc-design .mrpc-area-hero__map {
        aspect-ratio: 16 / 10;  /* less tall on smaller screens */
    }
    body.mrpc-design .mrpc-neigh-list {
        grid-template-columns: repeat(2, 1fr);
    }
    body.mrpc-design .mrpc-neigh-list a {
        border-bottom: 1px solid var(--line);
    }
    body.mrpc-design .mrpc-neigh-list a:nth-child(2n) {
        border-right: 0;
    }
    body.mrpc-design .mrpc-neigh-list a:nth-child(2n-1) {
        border-right: 1px solid var(--line);
    }
}
@media (max-width: 700px) {
    body.mrpc-design .mrpc-area-hero {
        padding: 32px 0 40px;
    }
    body.mrpc-design .mrpc-area-hero__stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px 24px;
    }
    body.mrpc-design .mrpc-area-quick .container-wide {
        gap: 12px;
    }
    body.mrpc-design .mrpc-area-quick__more {
        margin-left: 0;
    }
    body.mrpc-design .mrpc-neigh-list {
        grid-template-columns: 1fr;
    }
    body.mrpc-design .mrpc-neigh-list a {
        border-right: 0 !important;
    }
    body.mrpc-design .mrpc-insights-tbl__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 16px 0;
    }
    body.mrpc-design .mrpc-insights-tbl__row--h {
        display: none;
    }
    body.mrpc-design .mrpc-area-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   NEIGHBOURHOOD PAGE  (templates/neighbourhood.php → design/neighbourhood.html)
   ------------------------------------------------------------
   Hero reuses the District page's .mrpc-area-hero* classes
   (2-col light hero with map on right) — see those rules above.
   This block defines only the parts unique to neighbourhoods:
   the editorial single-column article and the "If you like X…"
   nearby cards section.
   ============================================================ */

/* ---- Article (single description block, editorial) ---- */
body.mrpc-design .mrpc-nb-article {
    max-width: 720px;
    margin: 0 auto;
}
body.mrpc-design .mrpc-nb-article p {
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink-2);
    font-weight: 300;
    margin: 0 0 20px;
}
body.mrpc-design .mrpc-nb-article p:last-child {
    margin-bottom: 0;
}
body.mrpc-design .mrpc-nb-article p em {
    font-style: italic;
    color: var(--ink);
}

/* ---- Nearby neighbourhoods ---- */
body.mrpc-design .mrpc-nb-nearby {
    background: var(--mist);
    border-top: 1px solid var(--line);
    padding: 64px 0;
}
body.mrpc-design .mrpc-nb-nearby__card {
    display: block;
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
body.mrpc-design .mrpc-nb-nearby__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in oklch, var(--ink) 12%, transparent);
    border-color: var(--ink-2);
}
body.mrpc-design .mrpc-nb-nearby__card .eyebrow {
    display: block;
    margin-bottom: 8px;
}
body.mrpc-design .mrpc-nb-nearby__name {
    font-family: var(--display);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 4px 0 12px;
    color: var(--ink);
}
body.mrpc-design .mrpc-nb-nearby__desc {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* (Neighbourhood-page responsive tweaks are inherited from the
   .mrpc-area-hero* breakpoints further up — same as the District page.
   The article + nearby-cards collapse cleanly via the default
   container/grid behaviour, so no extra rules needed here.) */

/* ============================================================
   NEIGHBOURHOODS INDEX  (pages/neighbourhoods.php)
   ------------------------------------------------------------
   Editorial intro + alphabetical districts, each district followed
   by a 4-col grid of its neighbourhoods (reuses .mrpc-neigh-list
   from the District page).
   ============================================================ */

/* ---- Intro ---- */
body.mrpc-design .mrpc-nbidx-intro {
    max-width: 760px;
}
body.mrpc-design .mrpc-nbidx-intro__h1 {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    color: var(--ink);
}
body.mrpc-design .mrpc-nbidx-intro__lede {
    margin: 24px 0 32px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 620px;
}
body.mrpc-design .mrpc-nbidx-intro__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 24px 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    justify-content: start;
}

/* ---- One district block ---- */
body.mrpc-design .mrpc-nbidx-district {
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-nbidx-district:first-child {
    padding-top: 0;
}
body.mrpc-design .mrpc-nbidx-district:last-child {
    border-bottom: 0;
}
body.mrpc-design .mrpc-nbidx-district__h2 {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 4px 0 0;
}
body.mrpc-design .mrpc-nbidx-district__h2 a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s ease-out;
}
body.mrpc-design .mrpc-nbidx-district__h2 a:hover {
    border-bottom-color: var(--ink);
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
    body.mrpc-design .mrpc-nbidx-intro__stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px 24px;
    }
    body.mrpc-design .mrpc-nbidx-district {
        padding: 24px 0;
    }
}

/* ============================================================
   FAVOURITES PAGE  (pages/favourites.php)
   ============================================================ */

/* ---- Intro ---- */
body.mrpc-design .mrpc-fav-intro {
    max-width: 720px;
}
body.mrpc-design .mrpc-fav-intro__h1 {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    color: var(--ink);
}
body.mrpc-design .mrpc-fav-intro__lede {
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 580px;
}
body.mrpc-design .mrpc-fav-intro__stats {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 24px 56px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    justify-content: start;
}

/* ---- Empty state ---- */
body.mrpc-design .mrpc-fav-empty {
    max-width: 540px;
    margin: 24px auto 0;
    text-align: center;
    padding: 16px 0;
}
body.mrpc-design .mrpc-fav-empty__icon {
    color: var(--muted);
    display: inline-flex;
    width: 84px;
    height: 84px;
    align-items: center;
    justify-content: center;
    background: var(--mist);
    border-radius: 50%;
    border: 1px solid var(--line);
    margin-bottom: 24px;
}
body.mrpc-design .mrpc-fav-empty__h {
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--ink);
}
body.mrpc-design .mrpc-fav-empty__p {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
}
body.mrpc-design .mrpc-fav-empty__ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
    body.mrpc-design .mrpc-fav-empty__icon {
        width: 72px;
        height: 72px;
    }
}

/* ============================================================
   TOP TEN PAGE  (pages/top_ten.php)
   ------------------------------------------------------------
   Editorial numbered list: huge italic serif rank number on the
   left, standard Coastal Calm building card on the right. One
   entry per row.
   ============================================================ */

/* ---- Intro (mirrors favourites / neighbourhoods index intros) ---- */
body.mrpc-design .mrpc-top10-intro {
    max-width: 760px;
}
body.mrpc-design .mrpc-top10-intro__h1 {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    color: var(--ink);
}
body.mrpc-design .mrpc-top10-intro__lede {
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 620px;
}
body.mrpc-design .mrpc-top10-intro__stats {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 24px 56px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    justify-content: start;
}

/* Variant switcher (chip-pills) on the Top Ten intro. Same .chip
   styling as elsewhere — just wrapped in a flex row with comfortable
   gap so it wraps onto two lines on narrower viewports. */
body.mrpc-design .mrpc-top10-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
body.mrpc-design .mrpc-top10-switcher .chip {
    /* The .chip class already sets background, border, etc. — these tweaks
       just tighten the visual rhythm for a tab-row context. */
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 7px 13px;
}

/* Single-column dropdown variant for the Top Ten menu. The default
   .nav-dropdown uses a 3-column grid (used by Condos by Area to fit ~15
   districts). For Top Ten's 7 short items, single-column reads cleaner.
   We also force the inner anchors to display: block so each variant lands
   on its own line — by default <a> is inline and they all run together
   when the column is wide enough to fit multiple. */
body.mrpc-design .nav-dropdown.nav-dropdown--single-col {
    grid-template-columns: 1fr;
    min-width: 220px;
}
body.mrpc-design .nav-dropdown.nav-dropdown--single-col > div {
    display: flex;
    flex-direction: column;
}
body.mrpc-design .nav-dropdown.nav-dropdown--single-col a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.2;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
    transition: color 0.15s ease-out;
}
body.mrpc-design .nav-dropdown.nav-dropdown--single-col a:last-child {
    border-bottom: 0;
}
body.mrpc-design .nav-dropdown.nav-dropdown--single-col a:hover {
    color: var(--ink);
}

/* ---- Numbered list (compact magazine-row layout) ----
   Each row is:
       [rank number] [photo] [text content] [price + save]
   Replaces the earlier full-width-vertical-card layout (which made the
   page very tall). Cards are now ~140-170px tall horizontal rows. */
body.mrpc-design .mrpc-top10-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    gap: 16px;
}
body.mrpc-design .mrpc-top10-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    align-items: center;
}
body.mrpc-design .mrpc-top10-item__rank {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(56px, 6.5vw, 96px);
    line-height: 0.9;
    color: var(--accent);
    text-align: right;
    letter-spacing: -0.04em;
    align-self: center;
}

body.mrpc-design .mrpc-top10-item__card {
    display: grid;
    grid-template-columns: 260px 1fr 200px;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    min-width: 0;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
body.mrpc-design .mrpc-top10-item__card:hover {
    border-color: var(--ink-2);
    box-shadow: 0 6px 18px color-mix(in oklch, var(--ink) 8%, transparent);
}

/* --- Media (photo) --- */
body.mrpc-design .mrpc-top10-item__media {
    position: relative;
    display: block;
    background: var(--mist);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
body.mrpc-design .mrpc-top10-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.mrpc-design .mrpc-top10-item__pill {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(26, 34, 48, 0.88);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

/* --- Body (text content) --- */
body.mrpc-design .mrpc-top10-item__body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
body.mrpc-design .mrpc-top10-item__meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
body.mrpc-design .mrpc-top10-item__name {
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ink);
}
body.mrpc-design .mrpc-top10-item__name a {
    color: inherit;
    text-decoration: none;
}
body.mrpc-design .mrpc-top10-item__name a:hover {
    color: var(--accent-ink);
}
body.mrpc-design .mrpc-top10-item__addr {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 8px;
}
body.mrpc-design .mrpc-top10-item__excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Aside (price + actions) --- */
body.mrpc-design .mrpc-top10-item__aside {
    padding: 18px 20px;
    border-left: 1px solid var(--line);
    background: var(--mist);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}
body.mrpc-design .mrpc-top10-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
body.mrpc-design .mrpc-top10-item__price-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
body.mrpc-design .mrpc-top10-item__price-amount {
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-top: 2px;
}
body.mrpc-design .mrpc-top10-item__save {
    /* inherits the .bcard__save base styles; just tweak placement */
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.mrpc-design .mrpc-top10-item__save:hover {
    border-color: var(--ink);
}
body.mrpc-design .mrpc-top10-item__save.is-favourited {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
body.mrpc-design .mrpc-top10-item__view {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
body.mrpc-design .mrpc-top10-item__view:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ---- Empty state ---- */
body.mrpc-design .mrpc-top10-empty {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 0;
}
body.mrpc-design .mrpc-top10-empty__h {
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--ink);
}
body.mrpc-design .mrpc-top10-empty__p {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    /* Drop the price-aside column at narrower widths — promote price into
       the body section instead. */
    body.mrpc-design .mrpc-top10-item__card {
        grid-template-columns: 220px 1fr;
    }
    body.mrpc-design .mrpc-top10-item__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 12px 20px;
    }
}
@media (max-width: 900px) {
    body.mrpc-design .mrpc-top10-item {
        grid-template-columns: 72px 1fr;
        gap: 16px;
    }
    body.mrpc-design .mrpc-top10-item__rank {
        font-size: clamp(48px, 8vw, 72px);
    }
    body.mrpc-design .mrpc-top10-item__card {
        grid-template-columns: 180px 1fr;
    }
    body.mrpc-design .mrpc-top10-item__name {
        font-size: 20px;
    }
}
@media (max-width: 600px) {
    body.mrpc-design .mrpc-top10-list {
        gap: 24px;
    }
    body.mrpc-design .mrpc-top10-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    body.mrpc-design .mrpc-top10-item__rank {
        text-align: left;
        font-size: 48px;
        padding-left: 4px;
    }
    body.mrpc-design .mrpc-top10-item__card {
        grid-template-columns: 1fr;
    }
    body.mrpc-design .mrpc-top10-item__media {
        aspect-ratio: 16 / 9;
    }
    body.mrpc-design .mrpc-top10-item__aside {
        flex-wrap: wrap;
        gap: 12px;
    }
    body.mrpc-design .mrpc-top10-intro__stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================================
   /contact/ page
   ------------------------------------------------------------
   Two-column editorial: form on left, team + reach on right.
   Mirrors design/contact.html. Scoped to body.mrpc-design so
   the theme can't bleed in (e.g. theme `form { display: flex }`
   would break the form grid otherwise — see search-all fix).
   ============================================================ */

body.mrpc-design .c-hero {
    padding: 80px 0 56px;
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-contact-h1 {
    font-size: clamp(48px, 6vw, 88px);
    margin-top: 24px;
}
body.mrpc-design .mrpc-contact-h1 .accent {
    font-style: italic;
    color: var(--accent-ink);
}
body.mrpc-design .c-hero p.lede {
    max-width: 620px;
    margin-top: 32px;
}

body.mrpc-design .mrpc-contact-section { padding: 0; }

body.mrpc-design .c-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .c-form {
    padding: 72px 64px 96px 0;
    border-right: 1px solid var(--line);
}
body.mrpc-design .c-form h2 { margin-bottom: 12px; }
body.mrpc-design .mrpc-contact-form__lede {
    margin-bottom: 40px;
    color: var(--ink-2);
    font-size: 17px;
    max-width: 460px;
}
body.mrpc-design .c-side { padding: 72px 0 96px 64px; }

/* Form — important: override theme's `form { display: flex }` */
body.mrpc-design #mrpcContactForm {
    display: block !important;
    margin: 0;
}

body.mrpc-design .field-group {
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
}
body.mrpc-design .field-group .lab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
body.mrpc-design .mrpc-contact-form__lab-note {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-2);
}
body.mrpc-design .field-group input,
body.mrpc-design .field-group textarea,
body.mrpc-design .field-group select {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    width: 100%;
    box-sizing: border-box;
}
body.mrpc-design .field-group input:focus,
body.mrpc-design .field-group textarea:focus,
body.mrpc-design .field-group select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}
body.mrpc-design .field-group textarea { min-height: 140px; resize: vertical; }

body.mrpc-design .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Interest checkbox cards */
body.mrpc-design .interest {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
body.mrpc-design .interest label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--paper);
    margin: 0;
}
body.mrpc-design .interest label:hover { border-color: var(--ink); }
body.mrpc-design .interest label.has-check {
    background: var(--mist);
    border-color: var(--ink);
}
body.mrpc-design .interest label input { display: none; }
body.mrpc-design .interest label .checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-2);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}
body.mrpc-design .interest label.has-check .checkbox {
    background: var(--ink);
    border-color: var(--ink);
}
body.mrpc-design .interest label.has-check .checkbox::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body.mrpc-design .interest label .nm {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
body.mrpc-design .interest label .sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* Honeypot — visually hide, but not via display:none (bots skip those). */
body.mrpc-design .mrpc-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.mrpc-design .submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
body.mrpc-design .submit-row .legal {
    font-size: 12px;
    color: var(--muted);
    max-width: 320px;
    line-height: 1.5;
}

body.mrpc-design .mrpc-contact-form__error {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid color-mix(in oklch, var(--accent) 50%, var(--line));
    background: color-mix(in oklch, var(--accent) 10%, var(--paper));
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 14px;
}

/* Thanks state */
body.mrpc-design .mrpc-contact-thanks {
    padding: 56px 0;
    text-align: center;
}
body.mrpc-design .mrpc-contact-thanks__title {
    font-family: var(--display);
    font-size: 48px;
    line-height: 1.1;
    color: var(--ink);
}
body.mrpc-design .mrpc-contact-thanks__lede {
    font-size: 17px;
    color: var(--ink-2);
    margin-top: 16px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
body.mrpc-design .mrpc-contact-thanks__cta { margin-top: 28px; }

/* Side — "Why bother with us" copy + bullet list. Replaced the
   invented Bridget / Marc / Sarah team members; no people named. */
body.mrpc-design .mrpc-contact-side__h2 {
    font-size: 36px;
    margin-top: 12px;
}
body.mrpc-design .mrpc-contact-side__lede {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 460px;
}
body.mrpc-design .mrpc-contact-bullets {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}
body.mrpc-design .mrpc-contact-bullets li {
    padding: 20px 0;
    border-bottom: 1px solid var(--line-2, var(--line));
    display: grid;
    gap: 6px;
}
body.mrpc-design .mrpc-contact-bullets li:last-child {
    border-bottom: 0;
}
body.mrpc-design .mrpc-contact-bullets__hd {
    font-family: var(--display);
    font-size: 20px;
    line-height: 1.15;
    color: var(--ink);
}
body.mrpc-design .mrpc-contact-bullets__bd {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 460px;
}

body.mrpc-design .mrpc-contact-side__reach-eyebrow {
    display: block;
    margin-top: 48px;
}
body.mrpc-design .reach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 36px;
}
body.mrpc-design .reach-card {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
}
body.mrpc-design .reach-card .l {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
body.mrpc-design .reach-card .v {
    font-family: var(--display);
    font-size: 19px;
    color: var(--ink);
    line-height: 1.2;
}
body.mrpc-design .reach-card .v.small { font-size: 16px; }
body.mrpc-design .reach-card .v.small a { color: inherit; text-decoration: none; }
body.mrpc-design .reach-card .v.small a:hover { color: var(--accent-ink); }

/* FAQ */
body.mrpc-design .faq {
    padding: 96px 0;
    background: var(--mist);
    border-top: 1px solid var(--line);
}
body.mrpc-design .mrpc-contact-faq__h2 { margin-top: 12px; }
body.mrpc-design .faq-list {
    max-width: 760px;
    margin: 40px auto 0;
}
body.mrpc-design .faq-item {
    border-top: 1px solid var(--line);
    padding: 22px 0;
}
body.mrpc-design .faq-item:last-child { border-bottom: 1px solid var(--line); }
body.mrpc-design .faq-item .q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    list-style: none;
}
body.mrpc-design .faq-item .q::-webkit-details-marker { display: none; }
body.mrpc-design .faq-item .q::after {
    content: '+';
    font-family: var(--mono);
    font-size: 20px;
    color: var(--accent-ink);
    transition: transform .2s;
}
body.mrpc-design .faq-item[open] .q::after { transform: rotate(45deg); }
body.mrpc-design .faq-item .a {
    margin-top: 12px;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 600px;
}

/* Crumbs (used on contact + may reuse elsewhere) */
body.mrpc-design .crumbs {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
body.mrpc-design .crumbs a {
    color: var(--ink-2);
    text-decoration: none;
}
body.mrpc-design .crumbs a:hover { color: var(--ink); }
body.mrpc-design .crumbs .sep { margin: 0 8px; opacity: 0.6; }
body.mrpc-design .crumbs .here { color: var(--ink); }

@media (max-width: 1024px) {
    body.mrpc-design .c-grid { grid-template-columns: 1fr; }
    body.mrpc-design .c-form {
        padding: 56px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    body.mrpc-design .c-side { padding: 56px 0; }
    body.mrpc-design .field-row,
    body.mrpc-design .interest { grid-template-columns: 1fr; }
    body.mrpc-design .reach { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body.mrpc-design .c-hero { padding: 56px 0 40px; }
    body.mrpc-design .submit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    body.mrpc-design .submit-row .legal { max-width: none; }
    body.mrpc-design .mrpc-contact-thanks__title { font-size: 36px; }
    body.mrpc-design .faq { padding: 64px 0; }
}


/* ============================================================
   Homepage (/ takeover) — pages/home.php
   ------------------------------------------------------------
   Two-column hero + region cards + new-construction grid +
   featured strip + how-it-works steps + neighbourhood preview +
   CTA band. Loosely mirrors design/index.html but wired to real
   district / building data.
   ============================================================ */

body.mrpc-design .mrpc-home-hero {
    position: relative;
    background: var(--paper);
    padding: 56px 0 0;
}
body.mrpc-design .mrpc-home-hero__grid {
    max-width: var(--container-wide, 1240px);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    gap: 56px;
    align-items: center;
    min-height: 560px;
}
body.mrpc-design .mrpc-home-hero__h1 {
    font-size: clamp(48px, 6vw, 88px);
    line-height: 1;
    color: var(--ink);
    margin: 0;
}
body.mrpc-design .mrpc-home-hero__h1 .accent {
    font-style: italic;
    color: var(--accent-ink);
    font-weight: 400;
}
body.mrpc-design .mrpc-home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
body.mrpc-design .mrpc-home-hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}
body.mrpc-design .mrpc-home-hero__lede {
    margin: 32px 0 36px;
    max-width: 540px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-2);
}
body.mrpc-design .mrpc-home-hero__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
body.mrpc-design .mrpc-home-hero__stats {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
    max-width: 540px;
}
body.mrpc-design .mrpc-home-hero__visual {
    position: relative;
    background: var(--mist);
    border-radius: var(--r-xl, 20px);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 5/4.4;
    box-shadow: 0 32px 80px -30px oklch(0.22 0.025 235 / 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.mrpc-design .mrpc-home-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.mrpc-design .mrpc-home-hero__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 40%,
        color-mix(in oklch, var(--ink) 20%, transparent) 100%);
    pointer-events: none;
}
body.mrpc-design .mrpc-home-hero__visual-meta {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: var(--paper);
    z-index: 2;
}
body.mrpc-design .mrpc-home-hero__visual-meta .l1 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
}
body.mrpc-design .mrpc-home-hero__visual-meta .l2 {
    font-family: var(--display);
    font-size: 24px;
    margin-top: 4px;
}

/* Region cards */
body.mrpc-design .mrpc-home-regions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
body.mrpc-design .mrpc-home-region {
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px);
    background: var(--paper);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
body.mrpc-design .mrpc-home-region:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}
body.mrpc-design .mrpc-home-region__body { padding: 24px 26px 26px; }
body.mrpc-design .mrpc-home-region__name {
    font-family: var(--display);
    font-size: 28px;
    line-height: 1;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
body.mrpc-design .mrpc-home-region__name .n {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.mrpc-design .mrpc-home-region__blurb {
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 16px;
    line-height: 1.55;
}
body.mrpc-design .mrpc-home-region__dists {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* New construction grid */
body.mrpc-design .mrpc-home-new {
    background: var(--paper-2, var(--mist));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Featured strip */
body.mrpc-design .mrpc-home-strip {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 0;
}
body.mrpc-design .mrpc-home-strip h2,
body.mrpc-design .mrpc-home-strip .eyebrow,
body.mrpc-design .mrpc-home-strip p,
body.mrpc-design .mrpc-home-strip .kpi-n,
body.mrpc-design .mrpc-home-strip .kpi-l {
    color: var(--paper);
}
body.mrpc-design .mrpc-home-strip .eyebrow {
    color: color-mix(in oklch, var(--paper) 60%, transparent);
}
body.mrpc-design .mrpc-home-strip .kpi-l {
    color: color-mix(in oklch, var(--paper) 55%, transparent);
}
body.mrpc-design .mrpc-home-strip p {
    color: color-mix(in oklch, var(--paper) 80%, transparent);
}
body.mrpc-design .mrpc-home-strip__panel {
    max-width: var(--container-wide, 1240px);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
body.mrpc-design .mrpc-home-strip__h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.1;
}
body.mrpc-design .mrpc-home-strip__lede {
    margin-top: 18px;
    max-width: 480px;
    font-size: 16px;
}
body.mrpc-design .mrpc-home-strip__meta {
    display: flex;
    gap: 32px;
    margin: 24px 0 28px;
}
body.mrpc-design .mrpc-home-strip__media {
    aspect-ratio: 4/3;
    border-radius: var(--r-lg, 14px);
    background: color-mix(in oklch, var(--paper) 8%, var(--ink));
    overflow: hidden;
    position: relative;
}
body.mrpc-design .mrpc-home-strip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.92;
}

/* Steps row */
body.mrpc-design .mrpc-home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-home-step {
    padding: 36px 32px 36px 0;
    display: flex;
    gap: 24px;
    border-right: 1px solid var(--line);
}
body.mrpc-design .mrpc-home-step:last-child {
    border-right: 0;
    padding-right: 0;
}
body.mrpc-design .mrpc-home-step__num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent-ink);
    padding-top: 6px;
}
body.mrpc-design .mrpc-home-step h4 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 8px;
    line-height: 1.15;
}
body.mrpc-design .mrpc-home-step p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.55;
}

/* Editorial neighbourhood preview */
body.mrpc-design .mrpc-home-editorial-section {
    background: var(--mist);
}
body.mrpc-design .mrpc-home-editorial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
body.mrpc-design .mrpc-home-ed {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    text-decoration: none;
    color: inherit;
    display: block;
}
body.mrpc-design .mrpc-home-ed__eyebrow {
    display: block;
    margin-bottom: 10px;
}
body.mrpc-design .mrpc-home-ed h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-family: var(--display);
    font-weight: 400;
    color: var(--ink);
    transition: color .2s;
}
body.mrpc-design .mrpc-home-ed:hover h3 {
    color: var(--accent-ink);
}
body.mrpc-design .mrpc-home-ed p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.55;
}

/* CTA band */
body.mrpc-design .mrpc-home-cta {
    background: var(--mist);
    padding: 96px 0;
    text-align: center;
}
body.mrpc-design .mrpc-home-cta h2 {
    max-width: 720px;
    margin: 0 auto 18px;
}
body.mrpc-design .mrpc-home-cta p {
    max-width: 540px;
    margin: 0 auto 32px;
}
body.mrpc-design .mrpc-home-cta__row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    body.mrpc-design .mrpc-home-hero__grid { grid-template-columns: 1fr; }
    body.mrpc-design .mrpc-home-regions { grid-template-columns: 1fr; }
    body.mrpc-design .mrpc-home-editorial { grid-template-columns: 1fr; }
    body.mrpc-design .mrpc-home-steps { grid-template-columns: 1fr; }
    body.mrpc-design .mrpc-home-step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 28px 0;
    }
    body.mrpc-design .mrpc-home-step:last-child { border-bottom: 0; }
    body.mrpc-design .mrpc-home-strip__panel { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
    body.mrpc-design .mrpc-home-hero { padding: 32px 0 0; }
    body.mrpc-design .mrpc-home-hero__grid {
        padding: 0 20px;
        gap: 32px;
        min-height: 0;
    }
    body.mrpc-design .mrpc-home-hero__stats {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    body.mrpc-design .mrpc-home-cta { padding: 64px 0; }
    body.mrpc-design .mrpc-home-strip { padding: 56px 0; }
}

/* ============================================================
   HEADER POLISH — fixes for two visual issues users reported:
   ------------------------------------------------------------
   1. The heart icon SVG inside <a class="fav-icon"> uses
      stroke="currentColor". The .nav a rule sets color=ink-2
      but some upstream rule (theme/Elementor) appears to be
      neutralising it on the SVG, so the heart was rendering
      invisibly inside the otherwise-styled circle. Force an
      explicit color + stroke fallback.
   2. The "Talk to a Realtor" .nav-cta pill had .nav a
      padding (6px 2px) sometimes winning over the .nav-cta
      padding (10px 18px) — same specificity, so source order
      should resolve it, but a higher-specificity rule keeps
      things robust against further theme/plugin CSS load-order
      changes. Also bumping padding a notch for visual weight.
   ============================================================ */

/* --- 1. Heart icon visibility --- */
body.mrpc-design .fav-icon,
body.mrpc-design .nav a.fav-icon {
    color: var(--ink);
}
/* Unicode heart glyph (♡) inside .fav-icon. We use a glyph instead of an
   inline SVG because every SVG heart path we tried rendered with its tip
   clipped at the bottom edge — the path goes to ~88% of the viewBox
   height and the stroke pushes past. A character has no such issue. */
body.mrpc-design .fav-icon .fav-icon__glyph {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Symbol',
                  'Apple Color Emoji', 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1;
    color: var(--ink);
    display: inline-block;
    /* Pull it up half a pixel so the optical center of the heart matches
       the geometric center of the surrounding circle. Most heart glyphs
       have their visual mass slightly below the baseline. */
    transform: translateY(-1px);
}

/* --- 2. Talk-to-a-Realtor pill: explicit specificity + extra padding --- */
body.mrpc-design .nav a.nav-cta {
    padding: 12px 22px;
    line-height: 1.1;
    font-size: 13px;
    font-weight: 500;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    border-bottom: 0;          /* .nav a sets a transparent bottom border; cancel here */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
body.mrpc-design .nav a.nav-cta:hover {
    background: var(--ink-2);
    color: var(--paper);
    border-bottom: 0;
}

/* ============================================================
   STATIC EDITORIAL PAGES — about, terms, privacy
   ------------------------------------------------------------
   Shared shell for pages/about.php, pages/terms.php, pages/privacy.php.
   Hero intro + max-720px article with serif body type + H3 section heads.
   ============================================================ */

body.mrpc-design .mrpc-static-intro {
    max-width: 760px;
}
body.mrpc-design .mrpc-static-intro__h1 {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    color: var(--ink);
}
body.mrpc-design .mrpc-static-intro__lede {
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 620px;
}

body.mrpc-design .mrpc-static-article {
    max-width: 720px;
    margin: 0 auto;
}
body.mrpc-design .mrpc-static-article h3 {
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    color: var(--ink);
    margin: 40px 0 12px;
    letter-spacing: -0.01em;
}
body.mrpc-design .mrpc-static-article h3:first-child {
    margin-top: 0;
}
body.mrpc-design .mrpc-static-article p {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2);
    font-weight: 300;
    margin: 0 0 18px;
}
body.mrpc-design .mrpc-static-article p:last-child {
    margin-bottom: 0;
}
body.mrpc-design .mrpc-static-article p em {
    font-style: italic;
    color: var(--ink);
}
body.mrpc-design .mrpc-static-article p strong {
    font-weight: 500;
    color: var(--ink);
}
body.mrpc-design .mrpc-static-article a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklch, var(--accent-ink) 35%, transparent);
}
body.mrpc-design .mrpc-static-article a:hover {
    text-decoration-color: var(--accent-ink);
}
body.mrpc-design .mrpc-static-article code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--mist);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    color: var(--ink);
}


/* ============================================================
   Listing-detail (VRP) — MRP sidebar action button rescue.
   ------------------------------------------------------------
   The sibling MyRealPage plugin renders the listing-detail
   sidebar (Photos List / Schedule a Viewing / Send Listing /
   Mortgage Calc / Print Listing) via JS after page load. Their
   stock CSS was modded somewhere upstream and the result is
   light-on-light pills with invisible text on our paper-cream
   background.

   The shared class on every sidebar action link is
       a.mrp-listing-link
   (confirmed from the live DOM, e.g.
       <a class="mrp-listing-link contact-link"
          data-event="mrp.listing.contact">Schedule / Email</a>)
   The per-tool modifier class varies (contact-link, mortgage-
   calc-link, print-link, photos-list-link, etc.) but they all
   share .mrp-listing-link, so one targeted rule covers them
   all. Scoped under .listing-vrp-wrap so we never touch the
   .mrp-listing-result cards in the listings grid elsewhere.

   We use !important throughout because the upstream mod uses
   per-tool ID/class selectors that beat any sane specificity
   we could write here.
   ============================================================ */

/* Container baseline — neutral default ink colour so anything
   we don't explicitly target still has a fighting chance of
   being legible. */
body.mrpc-design .listing-vrp-wrap,
body.vrp-listing-page .listing-vrp-wrap {
    color: var(--ink);
}

/* The action pills themselves. Every sidebar tool link in the
   VRP shares .mrp-listing-link. We re-paint these as readable
   ink-on-paper pills with a faint line border so the row reads
   as a stack of buttons rather than five empty rectangles. */
body.mrpc-design .listing-vrp-wrap a.mrp-listing-link,
body.vrp-listing-page .listing-vrp-wrap a.mrp-listing-link {
    color: var(--ink) !important;
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    /* Preserve whatever shape the mod gave them, but ensure the
       label has breathing room and the pill is clickable to its
       edges. */
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.25;
    border-radius: var(--r-md);
    transition: background .15s, color .15s, border-color .15s;
}
body.mrpc-design .listing-vrp-wrap a.mrp-listing-link:hover,
body.vrp-listing-page .listing-vrp-wrap a.mrp-listing-link:hover {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* The <li> wrapper around each action gets some breathing room so
   the buttons aren't crammed against each other. The MRP markup is
   <ul><li class="contact-link-outer"><a class="mrp-listing-link…">…
   so we target list items inside the VRP sidebar generically. */
body.mrpc-design .listing-vrp-wrap li[class*="-outer"],
body.vrp-listing-page .listing-vrp-wrap li[class*="-outer"] {
    margin-bottom: 8px;
    list-style: none;
    padding-left: 0;
}
body.mrpc-design .listing-vrp-wrap li[class*="-outer"]:last-child,
body.vrp-listing-page .listing-vrp-wrap li[class*="-outer"]:last-child {
    margin-bottom: 0;
}

/* Form inputs inside the sidebar (in-person / virtual radios,
   name/email/phone fields when the schedule form is open). Force
   readable text colour and a sensible background so typing into
   them isn't a guessing game. */
body.mrpc-design .listing-vrp-wrap input[type="text"],
body.mrpc-design .listing-vrp-wrap input[type="email"],
body.mrpc-design .listing-vrp-wrap input[type="tel"],
body.mrpc-design .listing-vrp-wrap textarea,
body.mrpc-design .listing-vrp-wrap select,
body.vrp-listing-page .listing-vrp-wrap input[type="text"],
body.vrp-listing-page .listing-vrp-wrap input[type="email"],
body.vrp-listing-page .listing-vrp-wrap input[type="tel"],
body.vrp-listing-page .listing-vrp-wrap textarea,
body.vrp-listing-page .listing-vrp-wrap select {
    color: var(--ink) !important;
    background: var(--paper) !important;
}

/* Radio + checkbox label text ("in-person" / "virtual"). */
body.mrpc-design .listing-vrp-wrap label,
body.vrp-listing-page .listing-vrp-wrap label {
    color: var(--ink) !important;
}

/* ==================================================================
 * 2026-10-16 — Header heart alignment + myRealPage listing cards
 * ================================================================== */

/* Header heart: the empty-favourites state reuses the class .mrpc-fav-empty,
   which also styles the "no favourites yet" message block on /favourites/
   (margin-top 24px, padding 16px 0, max-width 540px). That pushed the heart
   12px below the menu line. Undo it for the icon only. margin-bottom is left
   alone so the mobile rule (margin-bottom: 6px) still applies. */
body.mrpc-design .fav-icon.mrpc-fav-empty {
    max-width: none !important;
    margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    padding: 0 2px !important;
    text-align: initial !important;
}

/* Listing cards (myRealPage results inside .mrpc-listings-content), restyled
   to match the .bcard building cards. myRealPage injects its own colours with
   "#listing-results-view.mrp-style-area ... !important", so every selector
   below includes #listing-results-view to outrank it. */
body.mrpc-design .mrpc-listings-content #listing-results-view ul.mrp-listing-results {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    grid-auto-rows: auto !important; align-items: stretch !important;
    gap: 20px !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view ul.mrp-listing-results::before,
body.mrpc-design .mrpc-listings-content #listing-results-view ul.mrp-listing-results::after { display: none !important; content: none !important; }

body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result {
    display: flex !important; flex-direction: column !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    flex: none !important; float: none !important;
    margin: 0 !important; padding: 0 !important;
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-family: var(--sans) !important;
    color: var(--ink-2) !important;
    transition: border-color .15s, box-shadow .15s;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result:hover {
    border-color: color-mix(in oklch, var(--ink) 30%, var(--line)) !important;
    box-shadow: 0 8px 24px -12px rgba(26, 34, 48, 0.12) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result * { font-family: inherit; }
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > * { flex-shrink: 0 !important; position: relative; }

/* Photo first, full bleed */
body.mrpc-design .mrpc-listings-content #listing-results-view .listing-image-and-toolbar-wrapper {
    order: 1; position: relative !important; margin: 0 !important; padding: 0 !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-main-image-container {
    position: relative !important; width: 100% !important; height: auto !important;
    aspect-ratio: 4 / 3; margin: 0 !important; padding: 0 !important; border: 0 !important;
    overflow: hidden !important; background: var(--paper-2) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-main-image-container .inner {
    width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view img.mrp-listing-main-image {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    transition: transform .4s ease;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result:hover img.mrp-listing-main-image { transform: scale(1.03); }

/* Red "NEW LISTING" sash becomes a site-style pill tag */
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result span.results-ribbon {
    position: absolute !important; top: 10px !important; left: 10px !important;
    width: auto !important; height: auto !important; transform: none !important; -webkit-transform: none !important;
    background: var(--paper) !important; background-color: var(--paper) !important; background-image: none !important;
    border: 1px solid var(--line) !important; border-radius: 999px !important;
    padding: 4px 10px !important; z-index: 2 !important; box-shadow: none !important; line-height: 1 !important;
    color: var(--accent-ink) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .results-ribbon::before {
    position: static !important; display: inline !important; transform: none !important;
    background: none !important; border: 0 !important; padding: 0 !important; width: auto !important;
    color: var(--accent-ink) !important; font-family: var(--mono) !important;
    font-size: 9.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    box-shadow: none !important; text-shadow: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result:not([class*="BANNER"]) .results-ribbon { display: none !important; }

/* Overlays not needed on a building page */
body.mrpc-design .mrpc-listings-content #listing-results-view .listing-item-top-menu,
body.mrpc-design .mrpc-listings-content #listing-results-view .summary-property-type,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-owner-contact-container,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-attribution-top-wrapper,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-links-section,
body.mrpc-design .mrpc-listings-content #listing-results-view .top-divider,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-results-sub-categories:empty { display: none !important; }

/* Price below the photo, display face */
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > .mrp-listing-price-container {
    order: 2; position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important;
    background: none !important; color: var(--ink) !important; box-shadow: none !important;
    font-family: var(--display) !important; font-weight: 400 !important;
    font-size: 26px !important; line-height: 1.1 !important; letter-spacing: -0.01em !important;
    padding: 16px 16px 2px !important; margin: 0 !important; border: 0 !important; text-align: left !important;
}

/* Short unit + street address ("#1301 777 Herald St") instead of MRP's long SEO title */
body.mrpc-design .mrpc-listings-content #listing-results-view h3.listing-item-entry-title { display: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > alt {
    order: 3; display: block !important; padding: 2px 16px 0 !important; margin: 0 !important;
    font-family: var(--sans) !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--ink-2) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > alt .alt-addr { display: inline !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > alt .alt-subarea,
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > alt .alt-city,
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result > alt .alt-postal-code { display: none !important; }

/* Facts row: MLS / beds / baths / floor area in mono, like the building cards */
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-outer {
    order: 4; margin: 12px 16px 0 !important; padding: 10px 0 0 !important;
    border: 0 !important; border-top: 1px solid var(--line) !important; background: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-outer,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-description-and-attribution-wrapper,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-attribution-wrapper {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section {
    display: flex !important; flex-wrap: wrap !important; gap: 6px 18px !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section::before,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section::after { display: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section > div {
    display: flex !important; flex-direction: column !important; gap: 2px !important;
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; text-align: left !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section .summary-status { display: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section dt {
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; float: none !important;
    font-family: var(--mono) !important; font-size: 9.5px !important; font-weight: 400 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: color-mix(in oklch, var(--ink-2) 75%, var(--paper)) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result .mrp-listing-summary-section dt::before,
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result .mrp-listing-summary-section dt::after { display: none !important; content: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section dd {
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; float: none !important;
    font-family: var(--mono) !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section dd .mrp-i-unit { display: inline !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-summary-section dd .mrp-m-unit { display: none !important; }

/* Description + brokerage attribution (attribution stays visible: board rules) */
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-description-and-attribution-wrapper {
    order: 5; margin: 12px 16px 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-description {
    margin: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important;
    font-size: 13.5px !important; line-height: 1.5 !important; color: var(--ink-2) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-description .inner {
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-description .more-details,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-description .full-text-tab { display: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-attribution-wrapper,
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-attribution-container {
    margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
    font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: 0.04em !important;
    color: color-mix(in oklch, var(--ink-2) 70%, var(--paper)) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Button: dark pill, same as "Talk to a Realtor" */
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-details-link {
    order: 6; margin: auto 16px 16px !important; padding: 16px 0 0 !important;
    float: none !important; width: auto !important; text-align: left !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-details-link a {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; height: auto !important; min-height: 0 !important;
    background: var(--ink) !important; background-color: var(--ink) !important; color: var(--paper) !important;
    border: 1px solid var(--ink) !important; border-radius: 999px !important;
    padding: 10px 18px !important; box-shadow: none !important; text-shadow: none !important;
    font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: 0 !important; text-transform: none !important; line-height: 1 !important; text-decoration: none !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result .mrp-listing-details-link a::before,
body.mrpc-design .mrpc-listings-content #listing-results-view li.mrp-listing-result .mrp-listing-details-link a::after { display: none !important; content: none !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-listing-details-link a:hover {
    background: var(--accent-ink) !important; background-color: var(--accent-ink) !important; border-color: var(--accent-ink) !important;
}

/* Sort + count bar above the grid */
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-results-page-summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important;
    font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.08em !important; color: var(--ink-2) !important;
}
body.mrpc-design .mrpc-listings-content #listing-results-view .mrp-results-page-summary > select { margin-right: auto !important; }
body.mrpc-design .mrpc-listings-content #listing-results-view .search-results-sort-by-select {
    font-family: var(--sans) !important; font-size: 13px !important; color: var(--ink) !important;
    background-color: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 999px !important;
    padding: 8px 32px 8px 14px !important; height: auto !important; width: auto !important; box-shadow: none !important;
}

/* ------------------------------------------------------------------
 * 2026-10-16 — Listing detail pages (/building/<slug>/listing.<id>/)
 * myRealPage's details view, brought onto the site's type and colours.
 * Icon fonts (.mdicon, .glyphicon) are left alone. Every rule carries
 * the #listing-details-view ID so it beats MRP's own ID-scoped CSS.
 * ------------------------------------------------------------------ */
body.mrpc-design .mrpc-listing-crumbs {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 0 16px !important;
  box-sizing: border-box !important;
}
@media (max-width: 1232px) {
  body.mrpc-design .mrpc-listing-crumbs,
  body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mrp-details-listing-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Type */
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area *:not(.mdicon):not([class*="glyphicon"]):not([class*="mdi-"]) {
  font-family: var(--sans) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area {
  color: var(--ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h1.mrp-listing-title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h1.mrp-listing-title .sub-location,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h1.mrp-listing-title .sub-location *,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h2.mrp-listing-price-info .sub-info,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h2.mrp-listing-price-info .sub-info * {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--ink-2) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h2.mrp-listing-price-info .price {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  color: var(--ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h1.mrp-form-title-main,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h3,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h4 {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area h1.mrp-form-title-main {
  font-size: 22px !important;
}

/* Panels: summary, contact, mortgage */
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area section.mrp-details-main-summary,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area section.inline-contact-form,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area section.inline-mortgage-calc-form,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .listing-contact-info,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mortgage-calculation.well {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

/* Buttons: MRP blue -> site ink */
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area span.mdicon,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.view-photos-link-outer,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.contact-link-outer,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.send-listing-link-outer,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.mortgage-calc-link-outer,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.mortgage-calc-link-outer ~ li,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .details-sm-share-item,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mrp-ll-footer,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mrp-area-stats-save-search {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--r-sm) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.view-photos-link-outer a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.contact-link-outer a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.send-listing-link-outer a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.mortgage-calc-link-outer a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area li.mortgage-calc-link-outer ~ li a {
  color: var(--paper) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Tabs, links, inputs */
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mrp-listing-details-tabs > li.active > a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area .mrp-listing-details-tabs > li > a:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area td a,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area dd a {
  color: var(--accent-ink) !important;
}
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area input[type="text"],
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area input[type="email"],
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area input[type="tel"],
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area textarea,
body.mrpc-design .listing-vrp-wrap #listing-details-view.mrp-style-area select {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}

/* Display and mono type for the listing header. The doubled ID beats the
   blanket font rule above (which carries extra :not() classes). */
body.mrpc-design #listing-details-view#listing-details-view h1.mrp-listing-title,
body.mrpc-design #listing-details-view#listing-details-view h2.mrp-listing-price-info .price,
body.mrpc-design #listing-details-view#listing-details-view h1.mrp-form-title-main,
body.mrpc-design #listing-details-view#listing-details-view h3,
body.mrpc-design #listing-details-view#listing-details-view h4 {
  font-family: var(--display) !important;
  font-weight: 400 !important;
}
body.mrpc-design #listing-details-view#listing-details-view h1.mrp-listing-title .sub-location,
body.mrpc-design #listing-details-view#listing-details-view h1.mrp-listing-title .sub-location *,
body.mrpc-design #listing-details-view#listing-details-view h2.mrp-listing-price-info .sub-info,
body.mrpc-design #listing-details-view#listing-details-view h2.mrp-listing-price-info .sub-info * {
  font-family: var(--mono) !important;
}

/* Listing pages: hide myRealPage's inquiry form and its triggers (leads
   would go to the MRP account); our own panel takes the slot. 2026-10-16 */
body.mrpc-design #listing-details-view#listing-details-view section.inline-contact-form,
body.mrpc-design #listing-details-view#listing-details-view li.contact-link-outer,
body.mrpc-design #listing-details-view#listing-details-view li.send-listing-link-outer,
body.mrpc-design #listing-details-view#listing-details-view .mrp-area-stats-save-search,
body.mrpc-design #listing-details-view#listing-details-view .mrp-listing-quick-actions span.mdicon.inquire {
  display: none !important;
}
body.mrpc-design .mrpc-listing-cta {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--r-md) !important;
  padding: 22px 22px 24px !important;
  margin: 0 0 16px !important;
}
body.mrpc-design .mrpc-listing-cta__eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 6px !important;
}
body.mrpc-design #listing-details-view#listing-details-view .mrpc-listing-cta__title,
body.mrpc-design .mrpc-listing-cta__title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  color: var(--paper) !important;
  margin: 0 0 10px !important;
}
body.mrpc-design .mrpc-listing-cta__text {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--paper) !important;
  opacity: 0.85;
  margin: 0 0 16px !important;
}
body.mrpc-design .mrpc-listing-cta__btn,
body.mrpc-design .mrpc-listing-cta__btn:visited {
  display: inline-block !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
body.mrpc-design .mrpc-listing-cta__btn:hover { background: var(--paper-2) !important; }

/* ------------------------------------------------------------------
 * 2026-10-16 — Top Ten: unit-level lists (condos for sale)
 * ------------------------------------------------------------------ */
body.mrpc-design .mrpc-top10-switcher__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 18px 0 8px;
}
body.mrpc-design .mrpc-top10-switcher__label:first-of-type { margin-top: 22px; }
body.mrpc-design .mrpc-top10-item--unit .mrpc-top10-item__addr a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
body.mrpc-design .mrpc-top10-item--unit .mrpc-top10-item__addr a:hover { border-bottom-color: var(--ink); }
body.mrpc-design .mrpc-top10-item__view--secondary {
  opacity: 0.7;
  margin-top: 6px;
}
body.mrpc-design .mrpc-top10-item__view--secondary:hover { opacity: 1; }

/* Top Ten: "How this list works" section (2026-10-16) */
body.mrpc-design .mrpc-top10-about-section { border-top: 1px solid var(--line); }
body.mrpc-design .mrpc-top10-about { max-width: 760px; }
body.mrpc-design .mrpc-top10-about__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 10px 0 14px;
  color: var(--ink);
}
body.mrpc-design .mrpc-top10-about__p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 12px;
}
body.mrpc-design .mrpc-top10-about__p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }