/**
 * Shared mobile filter popovers.
 *
 * The filter markup is reused by the home hero, Listings and Map View. Keep
 * each popover tied to its trigger: compact selectors open at one-card width;
 * City and Types deliberately use the two-card grid width for a readable,
 * two-column choice list.
 */
@media (max-width: 767.98px) {
    html body [data-artbin-service-filter] {
        --artbin-mobile-popover-gap: 8px;
    }

    html body [data-artbin-service-filter] [data-artbin-control] {
        min-width: 0 !important;
    }

    /* Standard controls must never overflow their own mobile filter card. */
    html body [data-artbin-service-filter] [data-artbin-control="condition"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="category"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="price"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="area"] > .artbin-service-control-popover {
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        z-index: 90 !important;
    }

    /* Segment and category are concise vertical lists within their control. */
    html body [data-artbin-service-filter] [data-artbin-control="condition"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="category"] > .artbin-service-control-popover {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="condition"] .artbin-service-condition,
    html body [data-artbin-service-filter] [data-artbin-control="category"] .artbin-service-category {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="price"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="area"] .artbin-service-range-presets {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body [data-artbin-service-filter] .artbin-service-control-popover .artbin-service-quick {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* City and property types are intentionally as wide as both grid cards. */
    html body [data-artbin-service-filter] [data-artbin-control="city"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="types"] > .artbin-service-control-popover {
        box-sizing: border-box !important;
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        z-index: 90 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="types"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="city"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="city"] .artbin-service-city,
    html body [data-artbin-service-filter] [data-artbin-control="types"] .artbin-service-type {
        width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="types"] .artbin-service-type[data-artbin-type=""],
    html body [data-artbin-service-filter] [data-artbin-control="city"] .artbin-service-city-more {
        grid-column: 1 / -1 !important;
    }

    /* Feature cards stay full-width but retain the boundaries of their sheet. */
    html body [data-artbin-service-filter] [data-artbin-control="features"] > .artbin-service-control-popover {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        z-index: 90 !important;
    }

    /* The home card sheet used to force every popover to two-card width. Give
       the compact controls a more specific final rule than that legacy layer. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="condition"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="category"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="price"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="area"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="city"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--types > [data-artbin-control="types"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Results pages carry an older 360px popover rule. Replace it with the
       same trigger-bound geometry used by the home filter. */
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="condition"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="category"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="price"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="area"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="city"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-group--types [data-artbin-control="types"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Result listings, category archives and Map View use the same disclosure
 * geometry as the mobile home filter.  Keep every open sheet inside the
 * visible viewport; City and Types may span the two-card row, while Features
 * remains tied to its own full-width control. */
@media (max-width: 767.98px) {
    html body .artbin-service-filter--results [data-artbin-control],
    html body .artbin-service-filter--archive [data-artbin-control] {
        position: relative !important;
        min-width: 0 !important;
    }

    html body .artbin-service-filter--results .artbin-service-control-popover,
    html body .artbin-service-filter--archive .artbin-service-control-popover {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(420px, calc(100dvh - 128px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 110 !important;
    }

    html body .artbin-service-filter--results [data-artbin-control="city"] > .artbin-service-control-popover,
    html body .artbin-service-filter--results [data-artbin-control="types"] > .artbin-service-control-popover,
    html body .artbin-service-filter--archive [data-artbin-control="city"] > .artbin-service-control-popover,
    html body .artbin-service-filter--archive [data-artbin-control="types"] > .artbin-service-control-popover {
        width: calc(200% + var(--artbin-mobile-popover-gap)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    html body .artbin-service-filter--results [data-artbin-control="city"] > .artbin-service-control-popover,
    html body .artbin-service-filter--archive [data-artbin-control="city"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body .artbin-service-filter--results [data-artbin-control="types"] > .artbin-service-control-popover,
    html body .artbin-service-filter--archive [data-artbin-control="types"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
    }

    html body .artbin-service-filter--results [data-artbin-control="features"] > .artbin-service-control-popover,
    html body .artbin-service-filter--archive [data-artbin-control="features"] > .artbin-service-control-popover {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    html body .artbin-service-filter--results .artbin-service-features,
    html body .artbin-service-filter--results .artbin-service-types,
    html body .artbin-service-filter--archive .artbin-service-features,
    html body .artbin-service-filter--archive .artbin-service-types {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .artbin-service-filter--results .artbin-service-control-popover :is(.artbin-service-city, .artbin-service-type, .artbin-service-feature, .artbin-service-quick),
    html body .artbin-service-filter--archive .artbin-service-control-popover :is(.artbin-service-city, .artbin-service-type, .artbin-service-feature, .artbin-service-quick) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
}

/* Range selections need more room than a single two-column filter card.
 * Price, area, bedrooms and bathrooms therefore open across the whole filter
 * row on phones. This is deliberately limited to those four controls: City,
 * Types and Features keep their approved disclosure geometry. */
@media (max-width: 767.98px) {
    html body [data-artbin-service-filter] [data-artbin-control="price"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="area"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        box-sizing: border-box !important;
        width: calc(200% + 12px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(420px, calc(100dvh - 96px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 160 !important;
    }

    /* The right column anchors its sheet to the right edge; the left column
       anchors it to the left edge. Both produce the same full-row width. */
    html body [data-artbin-service-filter] [data-artbin-control="area"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="price"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="price"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="area"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] .artbin-service-range-presets,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] .artbin-service-range-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Final mobile homepage pass: keep the card grid compact while preserving
 * readable labels.  This file is loaded after the older home-card and range
 * layers, so these values are the single source of truth at phone widths. */
@media (max-width: 767.98px) {
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group {
        min-height: 52px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control] > summary,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group > .artbin-service-catalog-selector > summary {
        min-height: 52px !important;
        padding: 7px 9px !important;
        gap: 7px !important;
    }

    /* Features is the intentionally full-width final selector.  Give its
       label a touch more breathing room for translated two-line text. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector {
        min-height: 55px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector > summary {
        min-height: 55px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-control-icon {
        flex-basis: 19px !important;
        width: 19px !important;
        height: 19px !important;
    }

    /* The Types summary receives the same house/building pictogram family as
       Category.  A dedicated mask keeps the new icon visible even when a
       theme stylesheet omits the legacy type-summary rule. */
    html body [data-artbin-service-filter] [data-artbin-control="types"] > summary .artbin-service-control-icon--types {
        display: inline-block !important;
        flex: 0 0 19px !important;
        width: 19px !important;
        height: 19px !important;
        background-color: currentColor !important;
        --artbin-service-filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 21h18M5 21V9l7-5 7 5v12M8 21v-7h8v7M8 11h8M10 7h4'/%3E%3C/svg%3E") !important;
        -webkit-mask: var(--artbin-service-filter-icon) center / contain no-repeat !important;
        mask: var(--artbin-service-filter-icon) center / contain no-repeat !important;
    }

    /* Keep every feature option in the document flow.  The previous absolute
       popover could be clipped by the mobile viewport/scroll layer, making
       the lower options appear to disappear.  Flow layout expands the finder
       and lets the page scroll naturally through the complete list. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector > .artbin-service-control-popover {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin-top: 8px !important;
        overflow: visible !important;
        z-index: 170 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector > .artbin-service-control-popover .artbin-service-features {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Shared desktop/tablet finish: Types uses the same illustrated summary
 * language as the mobile selector.  The mobile rule above only changes its
 * size; this mask is intentionally available at every filter breakpoint. */
html body [data-artbin-service-filter] [data-artbin-control="types"] > summary .artbin-service-control-icon--types {
    display: inline-block !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: currentColor !important;
    --artbin-service-filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 21h18M5 21V9l7-5 7 5v12M8 21v-7h8v7M8 11h8M10 7h4'/%3E%3C/svg%3E") !important;
    -webkit-mask: var(--artbin-service-filter-icon) center / contain no-repeat !important;
    mask: var(--artbin-service-filter-icon) center / contain no-repeat !important;
}

/* Bedroom and bathroom intervals are short four-choice lists.  Keep their
 * disclosure sheet aligned with the selector width and distribute the four
 * choices across the whole sheet instead of leaving a narrow cluster. */
html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] .artbin-service-range-presets,
html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] .artbin-service-range-presets {
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Some legacy desktop rules make every popover a two-column grid and cap it
 * at 360px.  Override those rules for these two short interval lists so the
 * white sheet itself and its four choices use the complete available width. */
html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bedrooms"] > .artbin-service-control-popover .artbin-service-range-presets,
html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bathrooms"] > .artbin-service-control-popover .artbin-service-range-presets,
html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bedrooms"] > .artbin-service-control-popover .artbin-service-range-presets,
html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bathrooms"] > .artbin-service-control-popover .artbin-service-range-presets {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* On phones the selector occupies one of two columns, while its disclosure
 * sheet intentionally spans the complete row. */
@media (max-width: 767.98px) {
    html body [data-artbin-service-filter] [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body form.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bathrooms"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        display: block !important;
        width: calc(200% + 12px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Match the older direct-child selector as well; its max-width rule is
       intentionally more specific than the shared popover normalization. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bedrooms"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        display: block !important;
        width: calc(200% + 12px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Homepage phone range sheets share the complete two-card row.  Keep the
 * right-column controls anchored to that row's right edge: this prevents a
 * Bathroom or Area sheet from being pushed beyond the viewport.  Price stays
 * left-anchored.  These direct-child selectors deliberately come last because
 * the legacy home grid otherwise narrows Price and Area back to one card. */
@media (max-width: 767.98px) {
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="price"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="area"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        display: block !important;
        box-sizing: border-box !important;
        width: calc(200% + 12px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(420px, calc(100dvh - 96px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 180 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="price"] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="area"] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bathrooms"] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > :is([data-artbin-control="price"], [data-artbin-control="area"]) .artbin-service-range-presets {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control="bathrooms"] .artbin-service-range-presets {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
    }
}

/* Half Map mobile finder ---------------------------------------------------
 * Keep the result-map filter in the same calm, paired progression as the
 * homepage: criteria first, rooms second, then full-width Features and the
 * address action.  This only reorders the visual CSS grid; filtering and the
 * existing request handlers keep their original DOM order and behaviour. */
@media (max-width: 767.98px) {
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-grid > :is(.artbin-service-market, .artbin-service-control, .artbin-service-filter-group, .artbin-service-search-slot) {
        grid-row: auto !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-market {
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="condition"] {
        order: 2 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="category"] {
        order: 3 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-group--types {
        order: 4 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="city"] {
        order: 5 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="price"] {
        order: 6 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="area"] {
        order: 7 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bedrooms"] {
        order: 8 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="bathrooms"] {
        grid-column: auto !important;
        order: 9 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-group--features {
        grid-column: 1 / -1 !important;
        order: 10 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-search-slot {
        grid-column: 1 / -1 !important;
        order: 11 !important;
    }

    /* Features is a complete row; its choices retain a readable two-column
       catalogue when the selector is opened. */
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="features"] > .artbin-service-control-popover,
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results [data-artbin-control="features"] .artbin-service-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    /* The address field retains the useful width; the accessible Search
       button becomes a compact gold icon button. */
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search {
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 8px !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search button.half-map-search-js-btn,
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search button[type="submit"] {
        width: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
    }

    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search .artbin-service-submit-label {
        display: none !important;
    }

    /* Separate the chosen parameters from the action row without restoring
       the old oversized empty footer. */
    html body.houzez-halfmap-page form.houzez-search-filters-js.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-selection-summary {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(16, 35, 58, .10) !important;
    }
}

/* Long translated values --------------------------------------------------
 * This is the final filter stylesheet in the enqueue chain. A translated
 * value is kept within its own selector: it can use a second line but is
 * never ellipsized, clipped or allowed to overflow the open popover. */
html body [data-artbin-service-filter] .artbin-service-control > summary > :is([data-artbin-selection-label], [data-artbin-market-label]),
html body [data-artbin-service-filter] .artbin-service-catalog-selector-label,
html body [data-artbin-service-filter] .artbin-service-catalog-selector-values {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.18 !important;
}

html body [data-artbin-service-filter] .artbin-service-control > summary > :is([data-artbin-selection-label], [data-artbin-market-label]),
html body [data-artbin-service-filter] .artbin-service-catalog-selector-values {
    flex: 1 1 auto !important;
}

html body [data-artbin-service-filter] .artbin-service-control-popover :is(.artbin-service-market-option, .artbin-service-condition, .artbin-service-category, .artbin-service-city, .artbin-service-type, .artbin-service-feature, .artbin-service-quick) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 40px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.2 !important;
}

/* Some options (notably City) contain the caption as a text node after the
 * icon. Do not target the last span here: in that markup it is the icon
 * itself, and expanding it makes the pin stretch across the entire option. */

/* Open option alignment ---------------------------------------------------
 * Every selector, irrespective of page, viewport or active value, uses one
 * left-hand icon-to-label rail.  Earlier home styles centred Types, Features
 * and quick ranges, while the other filters stayed left-aligned; this made
 * icons visually detach from their labels in an open menu. */
html body.artbin-home-gold-search-active .artbin-service-filter--home .artbin-service-control-popover :is(
    .artbin-service-market-option,
    .artbin-service-condition,
    .artbin-service-category,
    .artbin-service-city,
    .artbin-service-type,
    .artbin-service-feature,
    .artbin-service-quick
),
html body [data-artbin-service-filter] .artbin-service-control-popover :is(
    .artbin-service-market-option,
    .artbin-service-condition,
    .artbin-service-category,
    .artbin-service-city,
    .artbin-service-type,
    .artbin-service-feature,
    .artbin-service-quick
) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 10px !important;
    text-align: left !important;
}

html body [data-artbin-service-filter] .artbin-service-control-popover :is(
    .artbin-service-market-icon,
    .artbin-service-option-icon,
    .artbin-service-feature-icon,
    .artbin-service-city-pin,
    .artbin-service-type-icon
) {
    flex: 0 0 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

html body [data-artbin-service-filter] .artbin-service-control-popover .artbin-service-city {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-inline: 14px !important;
}

html body [data-artbin-service-filter] .artbin-service-control-popover .artbin-service-city-pin {
    display: inline-block !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
}

/* Wide and tablet popovers ------------------------------------------------
 * A selector may contain longer ES/RU/EN values than its trigger. Keep the
 * menu readable by showing one complete option per row. The companion script
 * expands the popup only to the available width of its filter card; the
 * scrolling boundary here keeps a long City list inside the viewport. */
@media (min-width: 768px) {
    html body [data-artbin-service-filter] [data-artbin-control] > .artbin-service-control-popover {
        grid-template-columns: minmax(0, 1fr) !important;
        max-height: min(420px, calc(100dvh - 120px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body [data-artbin-service-filter] .artbin-service-control-popover :is(
        .artbin-service-market-options,
        .artbin-service-features,
        .artbin-service-types,
        .artbin-service-range-presets
    ) {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    html body [data-artbin-service-filter] .artbin-service-control-popover :is(
        .artbin-service-market-option,
        .artbin-service-condition,
        .artbin-service-category,
        .artbin-service-city,
        .artbin-service-type,
        .artbin-service-feature,
        .artbin-service-quick
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 10px 14px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

}

/* Mobile disclosure containment ------------------------------------------------
 * An open sheet must not change the two-column filter grid.  Earlier rules
 * promoted its trigger to a full grid row and kept the sheet in normal flow;
 * Price then pushed Area, Bedrooms and Bathrooms downward.  Keep each trigger
 * in place and use a full-row overlay contained by the same filter grid. */
@media (max-width: 767.98px) {
    html body [data-artbin-service-filter] .artbin-service-filter-grid {
        align-items: start !important;
        overflow: visible !important;
    }

    html body [data-artbin-service-filter] .artbin-service-filter-grid > [data-artbin-control][open] {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
        z-index: 260 !important;
    }

    html body [data-artbin-service-filter] .artbin-service-filter-grid > .artbin-service-filter-group:has([data-artbin-control][open]) {
        min-width: 0 !important;
        z-index: 260 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control][open] {
        position: relative !important;
        min-width: 0 !important;
        z-index: 260 !important;
    }

    html body [data-artbin-service-filter] .artbin-service-filter-grid > [data-artbin-control][open] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] .artbin-service-filter-grid > .artbin-service-filter-group > [data-artbin-control][open] > .artbin-service-control-popover {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
        width: calc(200% + var(--artbin-mobile-popover-gap, 8px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(440px, calc(100dvh - 152px)) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 260 !important;
    }

    /* The right-card trigger anchors the same full-row sheet to the right
       edge.  It therefore cannot cross either inner filter boundary. */
    html body [data-artbin-service-filter] .artbin-service-filter-grid > :is([data-artbin-control="category"], [data-artbin-control="city"], [data-artbin-control="area"], [data-artbin-control="bathrooms"])[open] > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body [data-artbin-service-filter] .artbin-service-filter-grid > :is([data-artbin-control="condition"], [data-artbin-control="price"], [data-artbin-control="bedrooms"])[open] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] .artbin-service-filter-grid > .artbin-service-filter-group--types > [data-artbin-control="types"][open] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
    }

    /* Deal type and Features already occupy a complete grid row, so their
       sheets use that row width rather than trying to span two cards again. */
    html body [data-artbin-service-filter] .artbin-service-filter-grid > .artbin-service-market [data-artbin-control][open] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] .artbin-service-filter-grid > .artbin-service-filter-group--features [data-artbin-control][open] > .artbin-service-control-popover {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Every expandable value sheet uses the same two-column rhythm.  Wrapper
       lists span the full sheet; their child options then occupy equal cells. */
    html body [data-artbin-service-filter] [data-artbin-control][open] > .artbin-service-control-popover,
    html body [data-artbin-service-filter] [data-artbin-control][open] > .artbin-service-control-popover > :is(
        .artbin-service-market-options,
        .artbin-service-features,
        .artbin-service-types,
        .artbin-service-range-presets
    ) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
        min-width: 0 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control][open] > .artbin-service-control-popover > :is(
        .artbin-service-market-options,
        .artbin-service-features,
        .artbin-service-types,
        .artbin-service-range-presets
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control][open] .artbin-service-control-popover :is(
        .artbin-service-market-option,
        .artbin-service-condition,
        .artbin-service-category,
        .artbin-service-city,
        .artbin-service-type,
        .artbin-service-feature,
        .artbin-service-quick
    ) {
        grid-column: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        column-gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 9px 12px !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* City and property types follow the same two-column sheet.  "More
       cities" remains the only intentional full-width control. */
    html body [data-artbin-service-filter] [data-artbin-control="city"][open] .artbin-service-city-more {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="types"][open] .artbin-service-type[data-artbin-type=""] {
        grid-column: auto !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control][open] .artbin-service-control-popover :is(
        .artbin-service-market-icon,
        .artbin-service-option-icon,
        .artbin-service-feature-icon,
        .artbin-service-city-pin,
        .artbin-service-type-icon
    ) {
        flex: 0 0 16px !important;
        width: 16px !important;
        min-width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }
}

/* Homepage desktop/tablet: every open selector uses the same two-column
 * catalogue.  This comes after the generic wide-screen fallback above and
 * mirrors the mobile card grid without changing the listings or map sheets.
 * Long localized labels use their natural second line inside an equal cell;
 * the City expand action remains the only intentional full-width item. */
@media (min-width: 768px) {
    html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control] > .artbin-service-control-popover {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home .artbin-service-control-popover > :is(
        .artbin-service-market-options,
        .artbin-service-features,
        .artbin-service-types,
        .artbin-service-range-presets
    ) {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home .artbin-service-control-popover :is(
        .artbin-service-market-option,
        .artbin-service-condition,
        .artbin-service-category,
        .artbin-service-city,
        .artbin-service-type,
        .artbin-service-feature,
        .artbin-service-quick
    ) {
        grid-column: auto !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home [data-artbin-control="city"] .artbin-service-city-more {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Homepage finder footer --------------------------------------------------
 * Older desktop layout passes reserved a full third grid row once a choice
 * had been made.  Keep the summary and the reset action in the same natural
 * height row instead: chips stay on the left, Clear stays at the right.
 * Extra height is allowed only when several selected chips genuinely wrap. */
@media (min-width: 768px) {
    html body.artbin-home-gold-search-active .artbin-service-filter--home {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-rows: auto auto !important;
        column-gap: 16px !important;
        row-gap: 0 !important;
        align-items: start !important;
        align-content: start !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: none !important;
        align-items: center !important;
        align-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(192, 210, 225, .24) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary.is-visible:not([hidden]) {
        display: flex !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary .artbin-service-selection-chips {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: none !important;
        align-self: center !important;
        justify-self: end !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(192, 210, 225, .24) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot.is-visible:not([hidden]) {
        display: flex !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot .artbin-service-clear-action {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }
}

/* Homepage finder footer — final cascade guard ---------------------------
 * Elementor's legacy homepage rail has a more specific selector that used
 * to put Clear in a separate fixed-height row.  The summary looked compact,
 * but the inherited row remained below it and enlarged the hero.  Match that
 * selector's specificity here so the selected values and reset action always
 * occupy one natural-height footer row. */
@media (min-width: 768px) {
    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-rows: auto min-content !important;
        column-gap: 16px !important;
        row-gap: 0 !important;
        align-content: start !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-filter-grid {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-selection-summary {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: none !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(192, 210, 225, .24) !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-selection-summary.is-visible:not([hidden]) {
        display: flex !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-selection-summary .artbin-service-selection-chips {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-clear-slot {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: none !important;
        align-self: center !important;
        justify-self: end !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(192, 210, 225, .24) !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-clear-slot.is-visible:not([hidden]) {
        display: flex !important;
    }

    html body.artbin-home-gold-search-active .elementor .artbin-service-filter.artbin-service-filter--home > .artbin-service-clear-slot :is(.artbin-service-clear-action, .reset-search-btn) {
        width: auto !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }
}

/* Selected filters / Clear -------------------------------------------------
 * Clear is part of the selected-filter rail, never a separate footer below
 * it.  The same two-column parent is used on the homepage, result list/map
 * and archive filters so localized chips may wrap on the left without moving
 * the reset action off the row on either mobile or desktop. */
html body.artbin-home-gold-search-active .artbin-service-filter--home,
html body form.artbin-results-filter-form .artbin-service-filter--results,
html body form.artbin-service-archive-form .artbin-service-filter--archive {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto min-content !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-content: start !important;
    align-items: start !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid,
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-filter-grid,
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-filter-grid {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary,
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-selection-summary,
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-selection-summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: none !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(192, 210, 225, .24) !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary.is-visible:not([hidden]),
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-selection-summary.is-visible:not([hidden]),
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-selection-summary.is-visible:not([hidden]) {
    display: flex !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary .artbin-service-selection-chips,
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-selection-summary .artbin-service-selection-chips,
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-selection-summary .artbin-service-selection-chips {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot,
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-clear-slot,
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-clear-slot {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: none !important;
    align-self: start !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(192, 210, 225, .24) !important;
}

html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot.is-visible:not([hidden]),
html body form.artbin-results-filter-form .artbin-service-filter--results > .artbin-service-clear-slot.is-visible:not([hidden]),
html body form.artbin-service-archive-form .artbin-service-filter--archive > .artbin-service-clear-slot.is-visible:not([hidden]) {
    display: flex !important;
}

html body [data-artbin-service-filter] > .artbin-service-clear-slot :is(.artbin-service-clear-action, .artbin-service-reset-wrap, .reset-search-btn) {
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
}

/* Mobile results grid -----------------------------------------------------
 * Each field in the compact Listings / Map filter uses the same 48px rail
 * and the same 8px gutter.  Earlier theme rules assigned a mixture of
 * implicit row heights and element margins, which made the visual gaps drift
 * whenever a translated value or a selected state changed.  These rules only
 * normalize the presentation layer: the existing form fields and filtering
 * behaviour remain untouched. */
@media (max-width: 767.98px) {
    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 48px !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-grid > :is(.artbin-service-control, .artbin-service-filter-group, .artbin-service-search-slot) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-group > .artbin-service-control,
    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-control > summary,
    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-filter-group > .artbin-service-control > summary {
        box-sizing: border-box !important;
        min-height: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-search-slot,
    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search {
        min-height: 48px !important;
        height: 48px !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search {
        grid-template-rows: 48px !important;
        gap: 8px !important;
    }

    html body form.artbin-results-filter-form .artbin-service-filter--results .artbin-service-native-search :is(input[name="keyword"], .elementor-field-group, button.half-map-search-js-btn, button[type="submit"], .elementor-field-type-submit) {
        box-sizing: border-box !important;
        min-height: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }
}

/* Mobile Price must use the same full-row disclosure geometry as Type.
 * Some older result-filter rules center its range sheet with a negative
 * offset.  Anchor it to the Price trigger instead, so both range columns
 * always remain inside the filter panel and viewport. */
@media (max-width: 767.98px) {
    html body [data-artbin-service-filter] [data-artbin-control="price"][open] {
        position: relative !important;
        z-index: 270 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="price"][open] > .artbin-service-control-popover {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        width: calc(200% + var(--artbin-mobile-popover-gap, 8px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        overflow-x: hidden !important;
        z-index: 270 !important;
    }

    html body [data-artbin-service-filter] [data-artbin-control="price"][open] .artbin-service-range-presets {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}