/* Pango Browse Listings v1 — brings houses.php into the same fixed-header,
   scroll-only-middle, reveal-on-scroll-footer app shell already used by
   Notifications and the single Public Listing page. Loaded after style.css. */

body.browse-page > .bg-orb { pointer-events: none; }

/* HEADER RESET — own the browse header completely (62px flat bar, matches v10 header-fixed pattern). */
body.browse-page > header.page-header.browse-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    flex: 0 0 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}
body.browse-page > header.page-header::before,
body.browse-page > header.page-header::after,
body.browse-page > header.page-header .header-row::before,
body.browse-page > header.page-header .header-row::after {
    content: none !important;
    display: none !important;
}
body.browse-page > header.page-header > .container.header-stack {
    width: min(100%, 1280px) !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
}
body.browse-page > header.page-header .header-row {
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    flex-wrap: nowrap !important;
}
body.browse-page > header.page-header .title-cluster {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
}
body.browse-page > header.page-header .title-cluster h1 {
    margin: 0 !important;
    font-size: clamp(1rem, 3vw, 1.28rem) !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Unused teleport target — keep it out of flow so it can't render as a stray empty block. */
body.browse-page > header.page-header .header-search-slot { display: none !important; }
body.browse-page > header.page-header .header-actions {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .45rem !important;
    flex-wrap: nowrap !important;
}

/* Scrollable middle pane — only this area scrolls, header and footer stay put. */
body.browse-page > .app-shell-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0 calc(var(--footer-h, 0px) + 1.25rem) !important;
    scrollbar-gutter: stable;
}

/* Keep the filter card comfortable inside the fixed shell. */
body.browse-page .smart-filter-shell { margin-top: 0; }

/* Fixed, reveal-on-scroll footer — matches Notifications / Public Listing. */
body.browse-page > .site-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 240 !important;
    margin: 0 !important;
    transform: translateY(105%) !important;
    opacity: 0 !important;
    transition: transform .22s ease, opacity .22s ease !important;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .12) !important;
}
body.browse-page.has-scrolled > .site-footer {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    body.browse-page > header.page-header.browse-header,
    body.browse-page > header.page-header > .container.header-stack,
    body.browse-page > header.page-header .header-row {
        min-height: 58px !important;
        height: 58px !important;
        max-height: 58px !important;
    }
    body.browse-page > header.page-header.browse-header { flex-basis: 58px !important; }
    body.browse-page > header.page-header > .container.header-stack { padding: 0 .7rem !important; }
    body.browse-page > header.page-header .title-cluster h1 { font-size: 1rem !important; }
    body.browse-page > header.page-header .header-actions .button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        display: grid !important;
        place-items: center !important;
    }
    body.browse-page > header.page-header .header-actions .button svg { width: 20px; height: 20px; }
    body.browse-page > .app-shell-scroll { padding-top: .8rem !important; }
}