/**
 * Property Listing page. Confirmed from file "02 - Public Website":
 *   - Desktop: property-listing-default, node 28:9
 *   - Mobile filter drawer: mobile-filter-drawer, node 29:153
 * No dedicated mobile listing-page frame was pulled for this pass (only
 * confirmed to exist, node 29:9, "mobile-property-listing") - the mobile
 * card grid below reuses the homepage's already-confirmed mobile grid-card
 * sizing (property-components.css) as the closest confirmed analog rather
 * than an independently-fetched value; worth re-confirming against 29:9
 * directly in a future pass.
 *
 * Requires (in this order): variables.css, header.css, footer.css,
 * whatsapp-fab.css, buttons.css, forms.css, property-components.css, then
 * this file.
 */

/* ---------------------------------------------------------------------
 * Page title bar - Figma's node 28:9 has no breadcrumb/title frame at all
 * in this position; what's actually there is a search bar panel (see
 * below). Built exactly what the frame shows rather than inventing a
 * breadcrumb it doesn't have.
 * --------------------------------------------------------------------- */

.listing-search-section {
    padding: 40px 80px;
    background-color: var(--color-ivory);
}

.listing-search-panel {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-shadow: 0px 8px 24px 0px rgba(26, 26, 26, 0.05);
}

.listing-search-field {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Keyword indicator - shown above the search bar panel when the header's
   global search sent the visitor here with a ?keyword=... . See
   properties.php's own comment for why this stays a separate element
   from #listing-results-count. */
.listing-keyword-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: var(--content-max-width);
    margin: 0 auto 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-charcoal);
}

.listing-keyword-indicator__clear {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-primary-green);
    text-decoration: underline;
}

.listing-search-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #717171;
}

.listing-search-trigger,
.listing-search-trigger:focus-visible {
    /* Only clears the boxed look (.field-native-select's border/bg/
       height) - background-position/-image/-repeat/-size are left alone
       so the chevron set there stays put; a shorthand "background: none"
       here would wipe it out along with the white fill. */
    border: none;
    background-color: transparent;
    background-position: right center;
    padding: 0 20px 0 0;
    height: auto;
    outline: none;
}

.listing-search-trigger:focus-visible {
    outline: 2px solid var(--color-primary-green);
    outline-offset: 4px;
}

.listing-search-divider {
    width: 1px;
    height: 40px;
    background-color: var(--color-border-light);
    margin: 0 24px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Layout - sidebar + main content
 * --------------------------------------------------------------------- */

.listing-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 40px 80px 120px;
}

.listing-sidebar-col {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
}

.listing-main-col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---------------------------------------------------------------------
 * Filter sidebar (desktop) - confirmed node 28:55
 * --------------------------------------------------------------------- */

.filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    padding: 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-sizing: border-box;
}

.filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.filter-sidebar__heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary-green);
    margin: 0;
}

.filter-sidebar__clear {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: #717171;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.filter-group__label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: #717171;
    margin: 0;
}

.filter-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0;
    width: 100%;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

.filter-checkbox input {
    /* Visually hidden but still keyboard/screen-reader operable - the
       label span below is the actual visible box. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-checkbox__box {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-border-light);
    border-radius: 4px;
}

.filter-checkbox input:checked ~ .filter-checkbox__box {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    background-image: url('/assets/images/icons/icon-form-check.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.filter-checkbox__label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
}

/* Real, functional price bracket control - replaces Figma's decorative
   slider (which was never a real drag control there either) so the
   sidebar can actually filter by price. Uses the same brand tokens as
   forms.css's .field-native-select (border color, radius, Inter, text
   color, gold chevron) so this dropdown's closed state matches the
   homepage hero and Property Listing top search bar's - just at the
   sidebar's own smaller/compact scale rather than that component's full
   44px height, since no functional price control exists in the confirmed
   Figma frame to pull an exact size from. appearance:none clears the
   browser's own arrow so the chevron below (already champagne-gold in
   the SVG file itself) can take its place. */
.filter-price-select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    background-color: var(--color-white);
    background-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-near-black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.filter-price-select::-ms-expand {
    display: none;
}

.filter-price-select:focus-visible {
    outline: none;
    border: 2px solid var(--color-primary-green);
    padding: 9px 31px 9px 11px;
}

.filter-sidebar__note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: #717171;
    margin: 0;
}

.filter-pill-group {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

/* Real radio inputs now (bedrooms) - visually hidden, same off-canvas
   technique as .filter-checkbox input above, with the visible .filter-pill
   span reflecting :checked via the sibling selector below instead of a
   JS-toggled .is-active class. */
.filter-pill-radio {
    display: flex;
    flex: 1 0 0;
    min-width: 32px;
    cursor: pointer;
}

.filter-pill-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-charcoal);
    box-sizing: border-box;
}

.filter-pill-radio input:checked ~ .filter-pill {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    color: var(--color-white);
}

/* ---------------------------------------------------------------------
 * Toolbar - confirmed node 28:126
 * --------------------------------------------------------------------- */

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 16px;
}

.listing-results-count {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
    margin: 0;
}

.listing-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 4px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

.view-toggle__btn.is-active {
    background-color: var(--color-primary-green);
}

.view-toggle__icon {
    width: 14px;
    height: 14px;
    background-color: #717171;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.view-toggle__btn.is-active .view-toggle__icon {
    background-color: var(--color-white);
}

.view-toggle__icon--grid {
    -webkit-mask-image: url('/assets/images/icons/icon-view-grid.svg');
    mask-image: url('/assets/images/icons/icon-view-grid.svg');
}

.view-toggle__icon--list {
    -webkit-mask-image: url('/assets/images/icons/icon-view-list.svg');
    mask-image: url('/assets/images/icons/icon-view-list.svg');
}

.sort-dropdown {
    position: relative;
}

.sort-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    cursor: pointer;
}

.sort-dropdown__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
    white-space: nowrap;
}

.sort-dropdown__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: #717171;
    -webkit-mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.15s ease;
}

.sort-dropdown.is-open .sort-dropdown__chevron {
    transform: rotate(180deg);
}

.sort-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    width: 200px;
    padding: 8px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0px 8px 24px 0px rgba(26, 26, 26, 0.1);
    box-sizing: border-box;
}

.sort-dropdown.is-open .sort-dropdown__menu {
    display: block;
}

.sort-dropdown__option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
    text-align: left;
    cursor: pointer;
}

.sort-dropdown__option:hover,
.sort-dropdown__option.is-selected {
    background-color: var(--color-ivory);
    color: var(--color-primary-green);
}

/* ---------------------------------------------------------------------
 * Mobile filter button (opens the mobile-filter-drawer bottom sheet) -
 * this trigger button itself has no separate confirmed frame; styled
 * consistently with the sort dropdown trigger next to it.
 * --------------------------------------------------------------------- */

.mobile-filter-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
    cursor: pointer;
}

.mobile-filter-trigger__icon {
    width: 14px;
    height: 14px;
    background-color: var(--color-primary-green);
    -webkit-mask-image: url('/assets/images/icons/icon-view-grid.svg');
    mask-image: url('/assets/images/icons/icon-view-grid.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---------------------------------------------------------------------
 * Property results grid - reuses .property-card / .property-card--grid
 * exactly as built (property-components.css); this page's own confirmed
 * sizing (240px image, 20px padding throughout, smaller type) is scoped
 * on top of that shared component rather than forking it.
 * --------------------------------------------------------------------- */

.listing-results {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr - grid items default to min-width:
       auto (their content's min-content size), not 0, same trap
       .listing-main-col's own min-width:0 already guards against one
       level up. A long, nowrap property title's min-content width was
       forcing this track - and the whole grid - wider than the viewport
       on mobile, pushing cards past the right edge instead of letting
       the title's overflow:hidden/text-overflow:ellipsis actually
       truncate it. minmax(0, 1fr) caps the track at its fair share
       regardless of what a child wants to be. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

/* The actual missing piece (the track fix above alone wasn't enough) -
   .property-card--grid is a shared, container-agnostic component; every
   container that hosts it is responsible for giving it min-width:0, the
   same way public/assets/css/homepage.css's OWN container already does
   (.property-grid .property-card--grid { min-width: 0 }) - that's why
   the exact same card renders correctly on the homepage with the exact
   same long titles. This container just never had its own copy of that
   line, so the grid item defaulted to min-width:auto (its title's
   min-content, driven by white-space:nowrap) and grew past its track
   regardless of the track itself being correctly capped. */
.listing-results .property-card--grid {
    min-width: 0;
}

.listing-results.is-list-view {
    grid-template-columns: minmax(0, 1fr);
}

.listing-results.is-hidden {
    display: none;
}

.listing-results .property-card--grid .property-card__image {
    height: 240px;
    padding: 20px;
}

.listing-results .property-card--grid .property-card__tag {
    padding: 6px 12px;
    font-size: 10px;
}

.listing-results .property-card--grid .property-favorite-btn {
    width: 32px;
    height: 32px;
}

.listing-results .property-card--grid .property-favorite-btn img {
    width: 16px;
    height: 16px;
}

.listing-results .property-card--grid .property-card__body {
    padding: 20px;
    gap: 20px;
}

.listing-results .property-card--grid .property-card__body > div:first-child {
    gap: 8px;
}

.listing-results .property-card--grid .property-price-inline {
    font-size: 20px;
}

.listing-results .property-card--grid .property-card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-results .property-card--grid .property-location-address {
    font-size: 13px;
}

.listing-results .property-card--grid .btn-primary {
    padding: 10px 24px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------
 * Pagination - confirmed node 28:429
 * --------------------------------------------------------------------- */

.listing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding-top: 8px;
}

.listing-pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background-color: var(--color-white);
    box-sizing: border-box;
    cursor: pointer;
}

.listing-pagination__arrow-icon {
    width: 14px;
    height: 14px;
    background-color: var(--color-charcoal);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.listing-pagination__arrow-icon--left {
    -webkit-mask-image: url('/assets/images/icons/icon-pagination-chevron-left.svg');
    mask-image: url('/assets/images/icons/icon-pagination-chevron-left.svg');
}

.listing-pagination__arrow-icon--right {
    -webkit-mask-image: url('/assets/images/icons/icon-pagination-chevron-right.svg');
    mask-image: url('/assets/images/icons/icon-pagination-chevron-right.svg');
}

.listing-pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-charcoal);
    box-sizing: border-box;
    cursor: pointer;
}

.listing-pagination__page.is-active {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    color: var(--color-white);
}

.listing-pagination__ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-charcoal);
}

/* ---------------------------------------------------------------------
 * Empty / loading states - confirmed to exist as their own Figma frames
 * (property-listing-no-results, property-listing-loading) but not
 * individually fetched this pass; built structurally consistent with the
 * rest of the page's tokens rather than pixel-matched to those frames.
 * --------------------------------------------------------------------- */

.listing-state {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
    padding: 80px 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-sizing: border-box;
}

.listing-state.is-visible {
    display: flex;
}

.listing-state__icon {
    width: 40px;
    height: 40px;
    background-color: #717171;
    opacity: 0.5;
    -webkit-mask-image: url('/assets/images/icons/icon-form-search.svg');
    mask-image: url('/assets/images/icons/icon-form-search.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.listing-state__heading {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 22px;
    color: var(--color-primary-green);
    margin: 0;
}

.listing-state__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #717171;
    max-width: 400px;
    margin: 0;
}

/* Hides the previous results while an AJAX filter fetch is in flight -
   #listing-loading-state (a persistent sibling, not part of this region)
   is what's shown in its place; see properties.js loadResults(). */
#listing-results-region.is-loading {
    display: none;
}

.listing-state--loading .listing-state__icon {
    -webkit-mask-image: url('/assets/images/icons/icon-spinner.svg');
    mask-image: url('/assets/images/icons/icon-spinner.svg');
    opacity: 1;
    background-color: var(--color-primary-green);
    animation: listing-spin 0.8s linear infinite;
}

@keyframes listing-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------
 * Mobile filter drawer (bottom sheet) - confirmed node 29:153
 * --------------------------------------------------------------------- */

.mobile-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba(7, 31, 22, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-filter-drawer.is-open {
    visibility: visible;
    opacity: 1;
}

@media (min-width: 1024px) {
    .mobile-filter-drawer {
        display: none;
    }
}

.mobile-filter-drawer__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* A definite height, not max-height - matches .mobile-nav-drawer's
       approach (pinned top+bottom) in header.css. Without a definite
       height here, the panel just shrink-wrapped its content instead of
       actually filling the screen, which left .mobile-filter-drawer__body's
       flex:1 0 0 + overflow-y:auto with no real space to distribute
       against - it collapsed toward a cramped minimum instead of
       expanding, which is what produced the tiny-scrollbar bug. */
    height: 90vh;
    background-color: var(--color-white);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.mobile-filter-drawer.is-open .mobile-filter-drawer__panel {
    transform: translateY(0);
}

.mobile-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--color-stone);
    flex-shrink: 0;
}

.mobile-filter-drawer__heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-green);
    margin: 0;
}

.mobile-filter-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: var(--color-ivory);
    border: none;
    border-radius: 14px;
    cursor: pointer;
}

.mobile-filter-drawer__close-icon {
    width: 12px;
    height: 12px;
    background-color: var(--color-charcoal);
    -webkit-mask-image: url('/assets/images/icons/icon-drawer-close-v2.svg');
    mask-image: url('/assets/images/icons/icon-drawer-close-v2.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.mobile-filter-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    overflow-y: auto;
    flex: 1 0 0;
    min-height: 0;
}

.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

/* Real checkbox inputs now (mobile location/type chips) - same
   visually-hidden-input + sibling-selector pattern as .filter-checkbox
   and .filter-pill-radio above. */
.filter-chip-checkbox {
    display: flex;
    cursor: pointer;
}

.filter-chip-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-chip {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--color-ivory);
    border: 1px solid var(--color-stone);
    border-radius: 20px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-charcoal);
}

.filter-chip-checkbox input:checked ~ .filter-chip {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
    color: var(--color-white);
}

.filter-pill--mobile {
    flex: none;
    width: 42px;
    height: 36px;
    padding: 0;
    border-color: var(--color-stone);
}

button.filter-pill--mobile:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mobile-filter-drawer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--color-stone);
    flex-shrink: 0;
}

.mobile-filter-drawer__clear {
    flex: 1 0 0;
    text-align: center;
    padding: 14px 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #717171;
    text-decoration: underline;
    cursor: pointer;
}

.mobile-filter-drawer__apply {
    flex: 1 0 0;
    text-align: center;
    padding: 14px 0;
    background-color: var(--color-primary-green);
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Mobile (<1024px)
 * --------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .listing-search-section {
        padding: 24px 20px;
    }

    .listing-search-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .listing-search-divider {
        display: none;
    }

    .listing-layout {
        flex-direction: column;
        /* The real fix for the mobile listings-page overflow bug (confirmed
           via actual getBoundingClientRect measurements at a genuine 360px
           viewport, not just theory): the base .listing-layout rule sets
           align-items: flex-start for its DESKTOP side-by-side sidebar +
           main-column layout - correct there, since the two columns
           shouldn't stretch to match each other's height. Once this
           breakpoint switches to flex-direction: column, cross-axis
           (align-items) now means WIDTH, and flex-start there means
           "don't stretch to fill the row, size to fit-content instead" -
           .listing-main-col (the only remaining child once the sidebar is
           hidden below) was fit-content-sizing itself to whatever its own
           content naturally wanted (~359px), instead of being forced to
           the ~305px actually available, and spilling past the right edge
           by the difference. This is exactly why the same .property-card
           component renders fine on the homepage: .property-grid's base
           rule already sets align-items: stretch, so it never had this
           bug to begin with. */
        align-items: stretch;
        gap: 24px;
        padding: 24px 20px 80px;
    }

    .listing-sidebar-col {
        display: none;
    }

    .mobile-filter-trigger {
        display: flex;
    }

    .listing-results {
        /* Same minmax(0, 1fr) fix as the base rule above - the single
           mobile column still needs this, it's not desktop-only. */
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .listing-results .property-card--grid .property-card__image {
        height: 220px;
        padding: 16px;
    }

    .listing-toolbar {
        padding: 12px 16px;
    }

    .listing-results-count {
        font-size: 13px;
    }
}