/*
 * HOMENEX map-search mobile layer
 * Sample3 mobile reference implementation.
 * Loaded after home-map-redesign.css. Desktop is intentionally untouched.
 */

.home-mobile-list-trigger,
.home-mobile-sheet-head,
.home-mobile-filter-pill-group,
.home-mobile-filter-segment,
.home-mobile-number-segment {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --hn-mobile-header: 68px;
        --hn-mobile-search: 82px;
        /* Keep a real map peek above the opened list sheet.  The previous
           fixed 96px top sat behind the combined header/search bar, so the
           sheet visually started at the search border and covered the map. */
        --hn-mobile-map-peek: 64px;
        --hn-mobile-sheet-top: calc(var(--hn-mobile-header) + var(--hn-mobile-search) + var(--hn-mobile-map-peek));
        --hn-mobile-blue: #0647a8;
        --hn-mobile-ink: #102a55;
        --hn-mobile-border: #c7d3e7;
        --hn-mobile-soft: #f2f5ff;
        --hn-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html,
    body.map-search-redesign {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        background: #eef3ff !important;
    }

    /* ---------------------------------------------------------------
       Header + compact search: these two bars are pinned together.
       This prevents the blank desktop spacer that moved search down.
       --------------------------------------------------------------- */
    body.map-search-redesign .hn-navbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 6100 !important;
        width: 100% !important;
        height: var(--hn-mobile-header) !important;
        min-height: var(--hn-mobile-header) !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-bottom: 1px solid #d9e1ee !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .hn-navbar .hn-nav-inner {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 8px !important;
    }

    body.map-search-redesign .hn-navbar .hn-nav-links,
    body.map-search-redesign .hn-navbar .hn-navbar-actions,
    body.map-search-redesign .hn-navbar .nav-links,
    body.map-search-redesign .hn-navbar .header-actions {
        display: none !important;
    }

    body.map-search-redesign .hn-navbar .hn-mobile-toggle {
        left: 14px !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #ffd5db !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .hn-navbar .hn-mobile-toggle__line {
        width: 18px !important;
        background: #e21337 !important;
    }

    body.map-search-redesign .hn-navbar .hn-logo img {
        width: auto !important;
        max-width: 152px !important;
        height: 29px !important;
        object-fit: contain !important;
    }

    body.map-search-redesign .home-top-searchbar {
        position: fixed !important;
        top: var(--hn-mobile-header) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 6000 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: var(--hn-mobile-search) !important;
        min-height: var(--hn-mobile-search) !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-top: 0 !important;
        border-bottom: 1px solid #dbe3ef !important;
        background: #fff !important;
        transform: none !important;
    }

    body.map-search-redesign .home-top-searchbar__keyword {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.map-search-redesign .home-top-searchbar__keyword>i {
        top: 50% !important;
        left: 15px !important;
        font-size: 15px !important;
        transform: translateY(-50%) !important;
    }

    body.map-search-redesign .home-top-searchbar__keyword input {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 43px 0 41px !important;
        border: 1px solid #c1cee6 !important;
        border-radius: 12px !important;
        background: var(--hn-mobile-soft) !important;
        color: #324866 !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .home-top-searchbar__enter {
        top: 50% !important;
        right: 8px !important;
        padding: 4px 7px !important;
        font-size: 10px !important;
        transform: translateY(-50%) !important;
    }

    body.map-search-redesign .home-top-searchbar__filter {
        flex: 0 0 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .home-top-searchbar__filter span {
        display: none !important;
    }

    /* ---------------------------------------------------------------
       Map canvas: always uses the remaining viewport. The list overlays it;
       the map never changes width or leaves a white panel behind.
       --------------------------------------------------------------- */
    body.map-search-redesign .map-page {
        position: fixed !important;
        top: calc(var(--hn-mobile-header) + var(--hn-mobile-search)) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #b6dceb !important;
        isolation: isolate !important;
    }

    body.map-search-redesign .map-page>.map-area {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #b6dceb !important;
    }

    body.map-search-redesign .map-page>.map-area>#leafletMap,
    body.map-search-redesign .map-page>.map-area>.leaflet-map,
    body.map-search-redesign #leafletMap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.map-search-redesign .map-info-panel,
    body.map-search-redesign .map-debug-card,
    body.map-search-redesign .home-map-sidebar-toggle,
    body.map-search-redesign .home-map-sidebar-resizer {
        display: none !important;
    }

    body.map-search-redesign .map-area .maplibregl-ctrl-bottom-right {
        right: 12px !important;
        bottom: 18px !important;
        z-index: 5 !important;
    }

    body.map-search-redesign .map-area .maplibregl-ctrl-group {
        overflow: hidden !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 14px rgba(19, 48, 92, .20) !important;
    }

    /* Mobile list entry button stays above the map. */
    body.map-search-redesign .home-mobile-list-trigger {
        position: fixed !important;
        bottom: calc(24px + var(--hn-mobile-safe-bottom)) !important;
        left: 50% !important;
        z-index: 4200 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 46px !important;
        padding: 0 18px !important;
        border: 1px solid rgba(255, 255, 255, .95) !important;
        border-radius: 999px !important;
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
        box-shadow: 0 10px 22px rgba(3, 57, 143, .30) !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .home-mobile-list-trigger b {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: var(--hn-mobile-blue) !important;
        font-size: 11px !important;
    }

    body.map-search-redesign.home-mobile-list-open .home-mobile-list-trigger,
    body.map-search-redesign.home-filter-open .home-mobile-list-trigger {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ---------------------------------------------------------------
       Sample3 bottom sheet. It opens as a full-width overlay from the bottom
       with only a thin map strip visible under the main header.
       --------------------------------------------------------------- */
    body.map-search-redesign .map-page>#side-list,
    body.map-search-redesign .map-page>.property-panel {
        position: fixed !important;
        top: var(--hn-mobile-sheet-top) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 4700 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        background: #fff !important;
        box-shadow: 0 -12px 28px rgba(12, 36, 75, .20) !important;
        transform: translateY(calc(100% + 36px)) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .30s cubic-bezier(.22, .82, .28, 1), visibility 0s linear .30s !important;
        will-change: transform !important;
    }

    body.map-search-redesign.home-mobile-list-open .map-page>#side-list,
    body.map-search-redesign.home-mobile-list-open .map-page>.property-panel,
    body.map-search-redesign .map-page>#side-list.is-mobile-sheet-open,
    body.map-search-redesign .map-page>.property-panel.is-mobile-sheet-open {
        transform: translateY(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform .30s cubic-bezier(.22, .82, .28, 1) !important;
    }

    body.map-search-redesign.home-mobile-list-open .home-top-searchbar {
        display: none !important;
    }

    body.map-search-redesign.home-mobile-list-open .map-page {
        top: var(--hn-mobile-header) !important;
    }

    /* The top of the sheet must remain an obvious collapse target.
       Use a CSS chevron as well as the icon markup so it still shows when
       the icon font is delayed or unavailable on a mobile browser. */
    body.map-search-redesign .home-mobile-sheet-head {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        flex: 0 0 46px !important;
        height: 46px !important;
        border-bottom: 1px solid #d9e2f0 !important;
        border-radius: 24px 24px 0 0 !important;
        background: #fff !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        background: transparent !important;
        color: #44526b !important;
        cursor: pointer !important;
    }

    body.map-search-redesign .home-mobile-sheet-handle {
        position: absolute !important;
        top: 9px !important;
        left: 50% !important;
        display: block !important;
        width: 38px !important;
        height: 4px !important;
        border-radius: 999px !important;
        background: #bec7d8 !important;
        transform: translateX(-50%) !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss i {
        display: none !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss::after {
        content: "" !important;
        position: absolute !important;
        top: 22px !important;
        left: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #5c6c86 !important;
        border-bottom: 2px solid #5c6c86 !important;
        transform: translateX(-50%) rotate(45deg) !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss:active {
        background: #f4f7fc !important;
    }

    body.map-search-redesign .map-page>#side-list .list-scroll {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-head.compact {
        flex: 0 0 auto !important;
        padding: 20px 24px 14px !important;
        background: #fff !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-head__eyebrow {
        margin: 0 0 5px !important;
        color: #54627b !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-heading-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-heading-row h2 {
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #0c2e61 !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 94px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 850 !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count strong {
        display: none !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count-label {
        font-size: 0 !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count-label::after {
        content: "View List" !important;
        font-size: 12px !important;
    }

    body.map-search-redesign .map-page>#side-list .home-active-filters {
        flex: 0 0 auto !important;
        margin: 0 20px 10px !important;
        padding: 0 0 4px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    body.map-search-redesign .map-page>#side-list .home-active-filters::-webkit-scrollbar {
        display: none !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-navigation {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 20px 14px !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-tabs {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 3px !important;
        overflow: hidden !important;
        border: 1px solid #c9d4e8 !important;
        border-radius: 11px !important;
        background: var(--hn-mobile-soft) !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-tab {
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 0 5px !important;
        border-radius: 8px !important;
        color: #3e4d66 !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-tab.is-active {
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-layout-toggle {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 3px !important;
        min-height: 44px !important;
        padding: 3px !important;
        border: 1px solid #c9d4e8 !important;
        border-radius: 11px !important;
        background: var(--hn-mobile-soft) !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-layout-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #34455f !important;
        font-size: 15px !important;
    }

    body.map-search-redesign .map-page>#side-list .home-list-layout-btn.is-active {
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list,
    body.map-search-redesign .map-page>#side-list #sidebar-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 24px calc(24px + var(--hn-mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: #aab8d0 transparent !important;
    }

    body.map-search-redesign .map-page>#side-list .property-scroll-hint,
    body.map-search-redesign .map-page>#side-list .property-list-actions,
    body.map-search-redesign .map-page>#side-list .property-list-load-more {
        display: none !important;
    }

    /* Sample3 default: one wide large-image card. */
    body.map-search-redesign .map-page>#side-list .property-list.is-grid .property-card,
    body.map-search-redesign .map-page>#side-list .property-list:not(.is-list) .property-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 350px !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 2px solid #0d50b2 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: 0 2px 7px rgba(14, 44, 89, .08) !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-grid .property-card-image,
    body.map-search-redesign .map-page>#side-list .property-list:not(.is-list) .property-card-image {
        flex: 0 0 220px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 220px !important;
        min-height: 220px !important;
        overflow: hidden !important;
        background: #e8edff !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-grid .property-card-image img,
    body.map-search-redesign .map-page>#side-list .property-list:not(.is-list) .property-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-grid .property-card-body,
    body.map-search-redesign .map-page>#side-list .property-list:not(.is-list) .property-card-body {
        flex: 1 1 auto !important;
        min-height: 128px !important;
        padding: 12px 14px 11px !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-list .property-card {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 132px !important;
        min-height: 132px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #c4d0e6 !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-list .property-card-image {
        flex: 0 0 128px !important;
        width: 128px !important;
        min-width: 128px !important;
        height: 130px !important;
        min-height: 130px !important;
        overflow: hidden !important;
        background: #e8edff !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-list .property-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-list .property-card-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 130px !important;
        padding: 10px 11px !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-image-badges {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        max-width: calc(100% - 50px) !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-flags,
    body.map-search-redesign .map-page>#side-list .property-card-broker-marks {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-flag,
    body.map-search-redesign .map-page>#side-list .property-card-broker-mark {
        min-height: 20px !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-heart {
        position: absolute !important;
        top: 9px !important;
        right: 9px !important;
        z-index: 4 !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        border: 1px solid #d7e0ef !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .94) !important;
        color: #d81838 !important;
        box-shadow: 0 2px 7px rgba(17, 41, 79, .13) !important;
    }

    body.map-search-redesign .map-page>#side-list .mypage-property-card__thumb-fallback,
    body.map-search-redesign .map-page>#side-list .property-card-image .is-empty {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 100% !important;
        padding: 10px !important;
        color: #435572 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        background: #e9edff !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-top {
        display: block !important;
        min-width: 0 !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-title-area h3 {
        margin: 0 0 4px !important;
        overflow: hidden !important;
        color: #092b5b !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-location {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #54647e !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-location i {
        margin-right: 4px !important;
        color: #0b55b3 !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-price {
        display: block !important;
        margin-top: 8px !important;
        overflow: hidden !important;
        color: #0750b3 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-specs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 10px !important;
        padding-top: 9px !important;
        border-top: 1px solid #d7dfed !important;
        color: #344865 !important;
        font-size: 11px !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-specs span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        gap: 3px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-specs i {
        color: #526b8e !important;
    }

    body.map-search-redesign .map-page>#side-list .property-card-stats {
        display: none !important;
    }

    /* ---------------------------------------------------------------
       Mobile filter — Sample3 visual language, using the live HOMENEX
       controls underneath.  The native selects and dual-handle meters
       remain the source of truth; mobile-only decorative proxy controls
       are intentionally hidden.
       --------------------------------------------------------------- */
    body.map-search-redesign.home-filter-open .home-top-searchbar {
        display: none !important;
    }

    body.map-search-redesign.home-filter-open .map-page {
        top: var(--hn-mobile-header) !important;
    }

    body.map-search-redesign .home-filter-panel,
    body.map-search-redesign .home-filter-panel.home-filter-panel--viewport {
        position: fixed !important;
        top: var(--hn-mobile-header) !important;
        right: 0 !important;
        bottom: calc(112px + var(--hn-mobile-safe-bottom)) !important;
        left: 0 !important;
        z-index: 7000 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-top: 1px solid #d7dfed !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #2d3d56 !important;
        opacity: 1 !important;
        box-shadow: 0 8px 22px rgba(28, 53, 93, .08) !important;
        isolation: isolate !important;
    }

    body.map-search-redesign .home-filter-panel[hidden] {
        display: none !important;
    }

    /* The old desktop backdrop is the element that made the panel blue/unclickable. */
    body.map-search-redesign .home-filter-panel::before,
    body.map-search-redesign .home-filter-panel::after {
        display: none !important;
        content: none !important;
    }

    body.map-search-redesign .home-filter-panel__head--compact {
        display: none !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-panel__close--viewport,
    body.map-search-redesign .home-filter-panel .home-filter-panel__close[data-home-filter-close] {
        position: absolute !important;
        top: 16px !important;
        right: 20px !important;
        z-index: 12 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #eff3ff !important;
        color: #3f4d65 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .home-filter-panel__body--new {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 24px 22px 98px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: #a3adbd transparent !important;
    }

    /* Make all sections direct flex items so their visual order follows Sample3. */
    body.map-search-redesign .home-filter-new-grid--selects,
    body.map-search-redesign .home-filter-new-detail-grid--ranges,
    body.map-search-redesign .home-filter-new-range-grid {
        display: contents !important;
    }

    body.map-search-redesign .home-filter-group--new {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Mobile reference has one location field. Region 2 and desktop sort stay available on desktop. */
    body.map-search-redesign .home-filter-panel .home-filter-group--region-secondary,
    body.map-search-redesign .home-filter-panel .home-filter-group--sort {
        display: none !important;
    }

    body.map-search-redesign .home-filter-group--region-primary {
        order: 1 !important;
        padding-right: 50px !important;
    }

    body.map-search-redesign .home-filter-group--property {
        order: 2 !important;
    }

    body.map-search-redesign .home-filter-group--trade {
        order: 3 !important;
    }

    body.map-search-redesign .home-filter-group--price {
        order: 4 !important;
    }

    body.map-search-redesign .home-filter-group--beds {
        order: 5 !important;
    }

    body.map-search-redesign .home-filter-group--baths {
        order: 6 !important;
    }

    body.map-search-redesign .home-filter-group--area {
        order: 7 !important;
    }

    body.map-search-redesign .home-filter-actions {
        order: 20 !important;
    }

    body.map-search-redesign .home-filter-group__head,
    body.map-search-redesign .home-filter-metric-card__head {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 24px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    body.map-search-redesign .home-filter-group__head strong,
    body.map-search-redesign .home-filter-metric-card__head strong {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #3d4657 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: .06em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    body.map-search-redesign .home-filter-group__head strong i,
    body.map-search-redesign .home-filter-metric-card__head strong i {
        display: inline-block !important;
        color: #3d4657 !important;
        font-size: 17px !important;
    }

    body.map-search-redesign .home-filter-metric-card__head>span {
        color: #0647a8 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    /* Preserve the actual select elements. There are no non-functional mock buttons. */
    body.map-search-redesign .home-filter-field--select {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.map-search-redesign .home-filter-field--select select {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 42px 0 15px !important;
        border: 1px solid #c6d2e9 !important;
        border-radius: 12px !important;
        background: #f2f5ff !important;
        color: #47546b !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 44px !important;
        outline: 0 !important;
        box-shadow: none !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }

    body.map-search-redesign .home-filter-group--region-primary .home-filter-field--select select {
        padding-left: 42px !important;
    }

    body.map-search-redesign .home-filter-group--region-primary .home-filter-field--select::before {
        position: absolute !important;
        top: 50% !important;
        left: 15px !important;
        z-index: 2 !important;
        color: #67748d !important;
        content: "\f002" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        pointer-events: none !important;
        transform: translateY(-50%) !important;
    }

    body.map-search-redesign .home-filter-field--select select:focus {
        border-color: #084cae !important;
        box-shadow: 0 0 0 3px rgba(8, 76, 174, .12) !important;
    }

    /* Disable the prior mobile proxy controls. The selects above are live. */
    body.map-search-redesign .home-mobile-filter-pill-group,
    body.map-search-redesign .home-mobile-filter-segment,
    body.map-search-redesign .home-mobile-number-segment {
        display: none !important;
    }

    /* The live two-handle range widgets used for price, bedrooms, bathrooms and area. */
    body.map-search-redesign .home-filter-metric-card {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    body.map-search-redesign .home-filter-meter {
        position: relative !important;
        width: 100% !important;
        height: 30px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-filter-meter__track,
    body.map-search-redesign .home-filter-meter__fill {
        position: absolute !important;
        top: 50% !important;
        height: 6px !important;
        border-radius: 999px !important;
        transform: translateY(-50%) !important;
    }

    body.map-search-redesign .home-filter-meter__track {
        right: 0 !important;
        left: 0 !important;
        background: #dbe5fb !important;
    }

    body.map-search-redesign .home-filter-meter__fill {
        background: #0647a8 !important;
    }

    body.map-search-redesign .home-filter-meter__dot {
        position: absolute !important;
        top: 50% !important;
        z-index: 3 !important;
        width: 16px !important;
        height: 16px !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        background: #0647a8 !important;
        box-shadow: 0 0 0 1px #0647a8 !important;
        transform: translate(-50%, -50%) !important;
    }

    body.map-search-redesign .home-filter-meter__slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 4 !important;
        display: block !important;
        width: 100% !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background: transparent !important;
        opacity: 0 !important;
        cursor: pointer !important;
        touch-action: none !important;
    }

    body.map-search-redesign .home-filter-meter-labels {
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-top: 6px !important;
        color: #63708a !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
    }

    /* Text inputs are still the data model for the meters; do not expose duplicate fields. */
    body.map-search-redesign .home-filter-field--sr {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Footer stays inside the filter layer, leaving a visible strip of map below it. */
    body.map-search-redesign .home-filter-actions {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(112px + var(--hn-mobile-safe-bottom)) !important;
        left: 0 !important;
        z-index: 7010 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 80px !important;
        margin: 0 !important;
        padding: 13px 22px 14px !important;
        border-top: 1px solid #d8e1f0 !important;
        background: #f0f4ff !important;
        box-shadow: 0 -6px 16px rgba(22, 48, 89, .06) !important;
    }

    body.map-search-redesign .home-filter-reset,
    body.map-search-redesign .home-filter-submit {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    body.map-search-redesign .home-filter-reset {
        border: 1px solid #c4d0e6 !important;
        background: #fff !important;
        color: #0647a8 !important;
    }

    body.map-search-redesign .home-filter-submit {
        border: 1px solid #0647a8 !important;
        background: #0647a8 !important;
        color: #fff !important;
    }

}

@media (max-width: 390px) {

    body.map-search-redesign .map-page>#side-list .property-list,
    body.map-search-redesign .map-page>#side-list #sidebar-list {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list.is-grid .property-card-image,
    body.map-search-redesign .map-page>#side-list .property-list:not(.is-list) .property-card-image {
        flex-basis: 196px !important;
        height: 196px !important;
        min-height: 196px !important;
    }

    body.map-search-redesign .home-filter-panel__body--new {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    body.map-search-redesign .home-filter-actions {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

/* ========================================================================== 
   2026-06-24 · MOBILE FILTER INTERACTION / REGION 2 RESTORE FIX
   - The desktop body::before dimmer was above the mobile filter (z-index 9400),
     causing the entire panel to look gray and blocking every select/range input.
   - Keep the existing inset mobile layout, but restore Region 2 as a live select.
   ========================================================================== */
@media (max-width: 760px) {

    /* Remove ONLY the desktop backdrop on mobile: it must not sit over live controls. */
    body.map-search-redesign.home-filter-open::before {
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* The filter must be above every desktop overlay and must accept touch input. */
    body.map-search-redesign .home-filter-panel,
    body.map-search-redesign .home-filter-panel.home-filter-panel--viewport {
        z-index: 9700 !important;
        pointer-events: auto !important;
        background: #fff !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body.map-search-redesign .home-filter-panel__body--new,
    body.map-search-redesign .home-filter-panel__body--new * {
        pointer-events: auto !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-panel__close--viewport,
    body.map-search-redesign .home-filter-panel .home-filter-panel__close[data-home-filter-close] {
        z-index: 9720 !important;
        pointer-events: auto !important;
    }

    body.map-search-redesign .home-filter-actions {
        z-index: 9710 !important;
        pointer-events: auto !important;
    }

    /* Mobile uses both live regional selects. Do not hide Region 2. */
    body.map-search-redesign .home-filter-panel .home-filter-group--region-secondary {
        display: block !important;
        order: 2 !important;
        padding-right: 0 !important;
    }

    /* Sort stays desktop-only; the mobile visual matches the approved compact flow. */
    body.map-search-redesign .home-filter-panel .home-filter-group--sort {
        display: none !important;
    }

    /* Actual vertical order: Region 1 → Region 2 → Property → Trade → ranges. */
    body.map-search-redesign .home-filter-group--region-primary {
        order: 1 !important;
        padding-right: 50px !important;
    }

    body.map-search-redesign .home-filter-group--region-secondary {
        order: 2 !important;
    }

    body.map-search-redesign .home-filter-group--property {
        order: 3 !important;
    }

    body.map-search-redesign .home-filter-group--trade {
        order: 4 !important;
    }

    body.map-search-redesign .home-filter-group--price {
        order: 5 !important;
    }

    body.map-search-redesign .home-filter-group--beds {
        order: 6 !important;
    }

    body.map-search-redesign .home-filter-group--baths {
        order: 7 !important;
    }

    body.map-search-redesign .home-filter-group--area {
        order: 8 !important;
    }

    /* Region 2 uses the same live select styling, with a clear section label. */
    body.map-search-redesign .home-filter-group--region-secondary .home-filter-group__head {
        margin-top: 0 !important;
    }

    body.map-search-redesign .home-filter-group--region-secondary .home-filter-group__head strong {
        color: #3d4657 !important;
        text-transform: none !important;
    }

    /* Native selects and transparent range inputs must remain interactive on touch. */
    body.map-search-redesign .home-filter-field--select,
    body.map-search-redesign .home-filter-field--select select,
    body.map-search-redesign .home-filter-meter,
    body.map-search-redesign .home-filter-meter__slider {
        pointer-events: auto !important;
        touch-action: pan-y !important;
    }

    body.map-search-redesign .home-filter-meter__slider {
        cursor: ew-resize !important;
    }
}


/* ========================================================================== 
   2026-06-24 · MOBILE FILTER CLOSE-BUTTON REFERENCE ALIGNMENT
   Match Sample3: the close control lives in the same visual header row as
   LOCATION. It is not a standalone 60px strip and must never push the form.
   ========================================================================== */
@media (max-width: 760px) {

    /* No blank close strip above the first filter section. */
    body.map-search-redesign .home-filter-panel__head--compact {
        display: none !important;
    }

    /* Keep the X at the top-right of the LOCATION heading row, like Sample3. */
    body.map-search-redesign .home-filter-panel .home-filter-panel__close--viewport,
    body.map-search-redesign .home-filter-panel .home-filter-panel__close[data-home-filter-close] {
        position: absolute !important;
        top: 16px !important;
        right: 20px !important;
        z-index: 9730 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #eff3ff !important;
        color: #3f4d65 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        box-shadow: none !important;
        pointer-events: auto !important;
    }

    /* Content begins immediately below the main site header. */
    body.map-search-redesign .home-filter-panel__body--new {
        height: 100% !important;
        max-height: 100% !important;
        padding-top: 24px !important;
    }

    /* The field remains full-width; only its heading leaves breathing room
       for the close action that shares the same horizontal band. */
    body.map-search-redesign .home-filter-group--region-primary {
        padding-right: 0 !important;
    }

    body.map-search-redesign .home-filter-group--region-primary .home-filter-group__head {
        min-height: 40px !important;
        padding-right: 56px !important;
        margin-bottom: 8px !important;
    }

    body.map-search-redesign .home-filter-group--region-primary .home-filter-field--select,
    body.map-search-redesign .home-filter-group--region-secondary .home-filter-field--select {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Source-of-truth multiselect dropdowns inside the mobile filter. */
@media (max-width: 760px) {
    .home-filter-panel .home-multi-select {
        position: static;
    }

    .home-filter-panel .home-multi-select__menu {
        position: absolute !important;
        top: auto !important;
        left: 22px !important;
        right: 22px !important;
        bottom: 76px !important;
        max-height: 42dvh !important;
        z-index: 10020 !important;
    }

    .home-filter-panel .home-multi-select__option {
        min-height: 42px;
        font-size: 14px;
    }
}

/* ==========================================================================
   2026-06-24 · MOBILE MULTI-SELECT TRUE ANCHOR
   The old rule positioned the menu from the filter-panel bottom.  That made
   the menu float under the header or above an unrelated field.  Each menu is
   now anchored to its own Property Type / Transaction Type trigger.
   ========================================================================== */
@media (max-width: 760px) {

    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select,
    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select>.home-multi-select {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-group--property,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade {
        position: relative !important;
        isolation: isolate !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__menu {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: auto !important;
        max-height: min(320px, 42dvh) !important;
        padding: 7px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 10090 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__menu[hidden] {
        display: none !important;
    }

    /* Keep the sticky reset/apply bar behind an open menu, but do not use it
       as the menu's positioning reference. */
    body.map-search-redesign .home-filter-panel .home-filter-actions {
        z-index: 100 !important;
    }
}

/* ========================================================================== 
   2026-06-24 · MOBILE MULTI-SELECT FINAL POPOVER
   Keep the check-list attached to its own field with no visual gap. The active
   group is raised above later range controls, while JS caps it before Apply.
   ========================================================================== */
@media (max-width: 760px) {

    body.map-search-redesign .home-filter-panel .home-filter-group--property,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade {
        position: relative !important;
        isolation: auto !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-group--property.is-home-multi-open,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade.is-home-multi-open {
        z-index: 12000 !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select,
    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select>.home-multi-select {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__trigger[aria-expanded="true"] {
        position: relative !important;
        z-index: 2 !important;
        border-bottom-color: transparent !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__menu {
        position: absolute !important;
        top: calc(100% - 1px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        z-index: 3 !important;
        width: 100% !important;
        max-height: var(--home-multi-menu-max-height, 228px) !important;
        margin: 0 !important;
        padding: 7px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid #c5d3ec !important;
        border-radius: 0 0 12px 12px !important;
        background: #fff !important;
        box-shadow: 0 14px 28px rgba(23, 52, 96, .20) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__menu[hidden] {
        display: none !important;
    }

    /* The fixed action bar remains visible, but the open option list is capped
       immediately above it by JS rather than overlapping it. */
    body.map-search-redesign .home-filter-panel .home-filter-actions {
        z-index: 30 !important;
    }
}


/* ========================================================================
   2026-06-24 · MOBILE CHECK SELECT: ATTACHED + BOUNDED
   Keep the popover inside the visible filter sheet. It may scroll itself,
   but it never grows through the reset/apply bar or onto the Google map.
   ======================================================================== */
@media (max-width: 760px) {
    body.map-search-redesign .home-filter-panel {
        overflow: hidden !important;
    }

    body.map-search-redesign .home-filter-panel__body--new {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select__menu {
        top: calc(100% - 1px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        z-index: 200 !important;
        max-height: var(--home-multi-menu-max-height, 210px) !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select[data-home-multi-direction="up"] .home-multi-select__menu {
        top: auto !important;
        bottom: calc(100% - 1px) !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 250 !important;
    }
}

/* ========================================================================
   2026-06-24 · MOBILE MULTI-SELECT COLLISION FIX
   The custom checkbox menu uses fixed geometry calculated from its own
   trigger.  This prevents the meter handles and the fixed action bar from
   drawing through the open select layer.
   ======================================================================== */
@media (max-width: 760px) {

    body.map-search-redesign .home-filter-panel .home-filter-group--property.is-home-multi-open,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade.is-home-multi-open {
        position: relative !important;
        isolation: isolate !important;
        z-index: 12000 !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__menu {
        position: fixed !important;
        top: var(--home-multi-menu-top, auto) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--home-multi-menu-left, 0px) !important;
        z-index: 12001 !important;
        width: var(--home-multi-menu-width, auto) !important;
        max-height: var(--home-multi-menu-max-height, 210px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid #c5d3ec !important;
        border-radius: 0 0 12px 12px !important;
        background: #fff !important;
        box-shadow: 0 14px 28px rgba(23, 52, 96, .20) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open[data-home-multi-direction="up"] .home-multi-select__menu {
        top: auto !important;
        bottom: var(--home-multi-menu-bottom, auto) !important;
        border-radius: 12px 12px 0 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__trigger {
        position: relative !important;
        z-index: 12002 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open[data-home-multi-direction="up"] .home-multi-select__trigger {
        border-top-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-right-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    /* Keep the fixed confirmation strip visible, but it never enters the
       calculated popover rectangle. */
    body.map-search-redesign .home-filter-actions {
        z-index: 110 !important;
    }

    /* Native range hit areas must stay below an open checkbox layer. */
    body.map-search-redesign .home-filter-group--beds,
    body.map-search-redesign .home-filter-group--baths,
    body.map-search-redesign .home-filter-group--price,
    body.map-search-redesign .home-filter-group--area {
        z-index: 1 !important;
    }
}


/* ========================================================================
   2026-06-24 · MOBILE CHECK SELECT FLOW FIX
   Property/transaction check menus are deliberately in document flow on
   phones.  This keeps them visually connected to their own select box while
   pushing price / beds / baths / area down; no slider or action bar can cut
   through the menu.
   ======================================================================== */
@media (max-width: 760px) {

    body.map-search-redesign .home-filter-panel .home-filter-group--property,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade,
    body.map-search-redesign .home-filter-panel .home-filter-group--property.is-home-multi-open,
    body.map-search-redesign .home-filter-panel .home-filter-group--trade.is-home-multi-open {
        position: static !important;
        isolation: auto !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select,
    body.map-search-redesign .home-filter-panel .home-filter-field--select.is-home-multi-select>.home-multi-select {
        position: relative !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    /* The menu grows from the bottom edge of the trigger like a real select,
       but stays inside the filter's scroll area instead of floating over it. */
    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-height: 232px !important;
        min-height: 0 !important;
        margin: -1px 0 0 !important;
        padding: 7px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid #c5d3ec !important;
        border-radius: 0 0 12px 12px !important;
        background: #fff !important;
        box-shadow: 0 10px 22px rgba(23, 52, 96, .13) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__trigger {
        position: relative !important;
        z-index: 1 !important;
        border-bottom-color: #c5d3ec !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__menu[hidden] {
        display: none !important;
    }

    /* There is only one persistent action bar.  It stays above ordinary form
       controls but below the filter panel's fixed header/close control. */
    body.map-search-redesign .home-filter-panel .home-filter-actions {
        position: fixed !important;
        z-index: 9710 !important;
    }

    /* Range hit areas and decorative dots must never establish a higher
       stacking level than the expanded in-flow select. */
    body.map-search-redesign .home-filter-panel .home-filter-meter,
    body.map-search-redesign .home-filter-panel .home-filter-meter__dot,
    body.map-search-redesign .home-filter-panel .home-filter-meter__slider {
        z-index: auto !important;
    }

    body.map-search-redesign .home-filter-panel__body--new {
        padding-bottom: 182px !important;
    }
}


/* ==========================================================================
   2026-06-24 · MOBILE FILTER ACTION BAR — FINAL SOURCE PATCH
   Applied on top of the user-approved full mobile CSS.
   The action bar is a direct child of .home-filter-panel (outside the
   scroll body), so keep the panel as a two-row flex shell:
   - body: the only scroll area
   - actions: always visible at the popup bottom
   This replaces older fixed/sticky experiments that left a blank gap.
   ========================================================================== */
@media (max-width: 760px) {

    /* Filter popup = scroll body + persistent action row. */
    body.map-search-redesign .home-filter-panel,
    body.map-search-redesign .home-filter-panel.home-filter-panel--viewport {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Only the form area scrolls. Do not reserve fake action-bar space. */
    body.map-search-redesign .home-filter-panel__body--new {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /*
     * The action bar is outside .home-filter-panel__body--new in index.php.
     * Keep it in the popup layout instead of fixed to the browser viewport.
     * It therefore never creates a blank spacer and never moves over Google Map.
     */
    body.map-search-redesign .home-filter-panel>.home-filter-actions,
    body.map-search-redesign .home-filter-panel .home-filter-actions {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 40 !important;
        flex: 0 0 80px !important;
        width: 100% !important;
        min-height: 80px !important;
        margin: 0 !important;
        padding: 13px 22px 14px !important;
        border-top: 1px solid #d8e1f0 !important;
        background: #f0f4ff !important;
        box-shadow: 0 -6px 16px rgba(22, 48, 89, .06) !important;
    }

    /*
     * Expanded check-selects remain in the scrolling form flow.
     * They push later controls down, while the persistent action row stays
     * visible below the scroll body rather than being covered or duplicated.
     */
    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__menu {
        position: static !important;
        width: 100% !important;
        max-height: 232px !important;
        margin: -1px 0 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.map-search-redesign .home-filter-panel .home-multi-select.is-open .home-multi-select__trigger {
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    /* No old action-bar reservation after returning to the flex popup shell. */
    body.map-search-redesign .home-filter-panel__body--new {
        padding-bottom: 24px !important;
    }
}

@media (max-width: 390px) {

    body.map-search-redesign .home-filter-panel>.home-filter-actions,
    body.map-search-redesign .home-filter-panel .home-filter-actions {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

/* ========================================================================
   2026-06-25 · MOBILE HEADER TOOLS + CLOSED-BY-DEFAULT FILTER
   Keep one compact header: logo row, then search left / filter right.
   The filter drawer is never rendered until JS explicitly opens it.
   ======================================================================== */
@media (max-width: 760px) {
    body.map-search-redesign {
        --hn-mobile-header: 64px;
        --hn-mobile-search: 62px;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 6100 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: calc(var(--hn-mobile-header) + var(--hn-mobile-search)) !important;
        min-height: calc(var(--hn-mobile-header) + var(--hn-mobile-search)) !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .hn-nav-inner {
        flex: 0 0 var(--hn-mobile-header) !important;
        width: 100% !important;
        height: var(--hn-mobile-header) !important;
        min-height: var(--hn-mobile-header) !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .hn-map-header-tools {
        flex: 0 0 var(--hn-mobile-search) !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--hn-mobile-search) !important;
        min-height: var(--hn-mobile-search) !important;
        padding: 9px 14px !important;
        border-top: 1px solid #edf1f8 !important;
        border-bottom: 1px solid #dbe3ef !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        transform: none !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__keyword {
        flex: 1 1 auto !important;
        width: auto !important;
        height: 44px !important;
        min-width: 0 !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__keyword input {
        height: 44px !important;
    }

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__filter {
        flex: 0 0 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    /* Do not hide header tools while the drawer is open; the Filter button is
       also the visible control the user returns to after closing the drawer. */
    body.map-search-redesign.home-filter-open .hn-navbar.hn-navbar--map-tools .home-top-searchbar {
        display: flex !important;
    }

    body.map-search-redesign .map-page,
    body.map-search-redesign.home-filter-open .map-page,
    body.map-search-redesign.home-mobile-list-open .map-page {
        top: calc(var(--hn-mobile-header) + var(--hn-mobile-search)) !important;
    }

    /* The list sheet starts below this map canvas top plus a 64px preview. */
    body.map-search-redesign .map-page>#side-list,
    body.map-search-redesign .map-page>.property-panel {
        top: var(--hn-mobile-sheet-top) !important;
    }

    /* A stale class or the old CSS cannot make the drawer appear by itself. */
    body.map-search-redesign:not(.home-filter-open) .home-filter-panel,
    body.map-search-redesign:not(.home-filter-open) .home-filter-panel.home-filter-panel--viewport,
    body.map-search-redesign .home-filter-panel[hidden] {
        display: none !important;
        pointer-events: none !important;
    }

    body.map-search-redesign.home-filter-open .home-filter-panel,
    body.map-search-redesign.home-filter-open .home-filter-panel.home-filter-panel--viewport {
        top: calc(var(--hn-mobile-header) + var(--hn-mobile-search)) !important;
        display: flex !important;
        pointer-events: auto !important;
    }
}


/* ========================================================================== 
   2026-06-25 · MOBILE HEADER SEARCH + LIST SHEET STABILITY
   - Search and filter stay together on header row 2.
   - Search uses a real button (not only the virtual keyboard Enter action).
   - The opened list begins lower so a map preview and a clear down affordance
     remain visible above the sheet.
   ========================================================================== */
@media (max-width: 760px) {
    :root {
        --hn-mobile-map-peek: 88px;
        --hn-mobile-sheet-top: calc(var(--hn-mobile-header) + var(--hn-mobile-search) + var(--hn-mobile-map-peek));
    }

    /* The three controls are always one compact second header row. */
    body.map-search-redesign .home-top-searchbar {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        height: var(--hn-mobile-search) !important;
        padding: 14px 16px !important;
    }

    body.map-search-redesign .home-top-searchbar__keyword {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.map-search-redesign .home-top-searchbar__keyword input {
        padding: 0 12px 0 41px !important;
    }

    body.map-search-redesign .home-top-searchbar__enter {
        display: none !important;
    }

    body.map-search-redesign .home-top-searchbar__submit,
    body.map-search-redesign .home-top-searchbar__filter {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    body.map-search-redesign .home-top-searchbar__submit {
        position: static !important;
        border: 0 !important;
        background: #173f83 !important;
        color: #fff !important;
    }

    body.map-search-redesign .home-top-searchbar__submit:active,
    body.map-search-redesign .home-top-searchbar__submit:focus-visible {
        background: #0d47a1 !important;
    }

    body.map-search-redesign .home-top-searchbar__submit .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Never let an old layout revision leave the filter control floating on the map. */
    body.map-search-redesign .map-area>.home-top-searchbar__filter,
    body.map-search-redesign .map-page>.home-top-searchbar__filter {
        display: none !important;
    }

    /* Closed sheet: only the floating list trigger is visible. */
    body.map-search-redesign .map-page>#side-list,
    body.map-search-redesign .map-page>.property-panel {
        top: var(--hn-mobile-sheet-top) !important;
    }

    /* The sheet's close target is intentionally obvious and remains fixed while
       the cards themselves scroll in the inner property list. */
    body.map-search-redesign .home-mobile-sheet-head,
    body.map-search-redesign .home-mobile-sheet-dismiss {
        flex-basis: 52px !important;
        height: 52px !important;
    }

    body.map-search-redesign .home-mobile-sheet-handle {
        top: 10px !important;
        width: 42px !important;
        height: 4px !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss::after {
        content: "⌄" !important;
        top: 22px !important;
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        color: #526681 !important;
        font-family: Arial, sans-serif !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 18px !important;
        transform: translateX(-50%) !important;
    }

    /* Keep the vertical scroll inside the card area; header, tabs and the close
       control never scroll away. */
    body.map-search-redesign .map-page>#side-list .property-list-shell {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.map-search-redesign .map-page>#side-list .property-list,
    body.map-search-redesign .map-page>#side-list #sidebar-list {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Keep the compact 44px search and filter controls even after the search bar
   is moved into the mobile header tool slot. */
@media (max-width: 760px) {

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__submit,
    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__filter {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }
}

/* Keep the mobile second-row controls in their existing place while giving
   the search and filter buttons the same visual weight. */
@media (max-width: 760px) {

    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__submit,
    body.map-search-redesign .hn-navbar.hn-navbar--map-tools .home-top-searchbar__filter {
        background: #173f83 !important;
    }
}


/* --------------------------------------------------------------------------
   2026-06-25 · MOBILE BOTTOM SHEET HANDLE POLISH
   - make the sheet opener/closer feel natural and refined
   - remove any odd fallback icon rendering around the close control
   - keep a generous tap target while visually showing a subtle handle + pill
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.map-search-redesign .home-mobile-sheet-head {
        position: relative !important;
        flex: 0 0 54px !important;
        height: 54px !important;
        border-bottom: 1px solid #e4ebf5 !important;
        border-radius: 28px 28px 0 0 !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
        box-shadow: 0 -10px 24px rgba(16, 42, 84, 0.08) !important;
        overflow: visible !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 28px 28px 0 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        outline: none !important;
        color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.map-search-redesign .home-mobile-sheet-handle {
        top: 10px !important;
        left: 50% !important;
        width: 40px !important;
        height: 4px !important;
        border-radius: 999px !important;
        background: #c4cedd !important;
        transform: translateX(-50%) !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss i,
    body.map-search-redesign .home-mobile-sheet-dismiss svg,
    body.map-search-redesign .home-mobile-sheet-dismiss [class*="fa-"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss::before {
        content: "" !important;
        position: absolute !important;
        top: 23px !important;
        left: 50% !important;
        width: 34px !important;
        height: 20px !important;
        border: 1px solid #dce5f2 !important;
        border-radius: 999px !important;
        background: #f5f8fc !important;
        box-shadow: 0 4px 10px rgba(16, 42, 84, 0.08) !important;
        transform: translateX(-50%) !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss::after {
        content: "" !important;
        position: absolute !important;
        top: 29px !important;
        left: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #5b6d87 !important;
        border-bottom: 2px solid #5b6d87 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        background: none !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: translateX(-50%) rotate(45deg) !important;
    }

    body.map-search-redesign .home-mobile-sheet-dismiss:active::before {
        background: #eef3f9 !important;
    }
}

/* --------------------------------------------------------------------------
   2026-06-25 · MOBILE VIEW LIST CTA
   Restore the CTA in its original title-row slot. Do not replace it with an
   active-listing chip or inject English copy through CSS.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.map-search-redesign .map-page>#side-list .panel-count.panel-view-list {
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 0 13px !important;
        border: 1px solid var(--hn-mobile-blue) !important;
        border-radius: 999px !important;
        background: var(--hn-mobile-blue) !important;
        color: #fff !important;
        box-shadow: 0 5px 12px rgba(3, 57, 143, .18) !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count.panel-view-list .panel-count-label {
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count.panel-view-list .panel-count-label::after {
        content: none !important;
        display: none !important;
    }

    body.map-search-redesign .map-page>#side-list .panel-count.panel-view-list>i {
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}