/* layer-search.css — layer_search_and_book (sab) + layer_search_results. */

/* ─── layer_search_and_book ────────────────────────────────────────────── */
.layer__search-and-book {
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface, #fff);
}

/* ─── Matrix-modus (type=matrix) ──────────────────────────────────────── */
.layer__search-and-book[data-type="matrix"] .search-matrix__tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    /* Geen `margin-bottom` — die zou verloren gaan wanneer tabs sticky-
       fixed worden (placeholder houdt alleen de box-grootte vast, niet
       de externe margin). Spacing via padding-bottom (binnen de box) zit
       in `rect.height` en reist dus mee naar de stuck-state. */
    padding-bottom: 1rem;
    background: var(--color-surface, #fff);
}
.search-matrix__tab {
    padding: .6rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 3px solid transparent;
    font-weight: 500;
    transition: border-color 120ms, color 120ms;
}
.search-matrix__tab:hover { color: var(--color-primary); }
.search-matrix__tab.is-active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}
.search-matrix__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Spacing via padding (binnen de box) ipv margin — zelfde reden als tabs:
       margin verdwijnt bij sticky-fixed, padding niet. */
    padding-block: .5rem 1rem;
    background: var(--color-surface, #fff);
    flex-wrap: wrap;
}
.search-matrix__nights-label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .9rem;
}
.search-matrix__nights-label select {
    padding: .35rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elev);
}
.search-matrix__nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
}
.search-matrix__nav:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.search-matrix__nav--next { margin-left: auto; }

/* Geen CSS `position: sticky` op de head-row — site-header verbergt zich
   bij scroll waardoor een statische `top: var(--site-header-offset)`-offset
   niet meer klopt. Framework-module `mm-sticky.js` doet 't JS-side met
   live header-tracking; styling-state via `[data-mm-sticky-stuck="1"]`. */
.search-matrix__grid {
    display: grid;
    gap: 2px;
    overflow-x: auto;
}
.search-matrix__row {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) repeat(7, minmax(4.5rem, 1fr));
    gap: 2px;
    min-width: 44rem;
}
.search-matrix__row--head {
    background: var(--color-surface, #fff);
    padding-block: .35rem;
}
.search-matrix__row--head[data-mm-sticky-stuck="1"] {
    box-shadow: 0 1px 0 var(--color-border, #e2e8f0);
}
.search-matrix__cell {
    padding: .5rem .35rem;
    background: var(--color-bg-elev, #f8fafc);
    border-radius: var(--radius-sm, 4px);
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 3rem;
}
.search-matrix__cell--corner { background: transparent; min-height: 0; }
.search-matrix__cell--date {
    background: transparent;
    flex-direction: column;
    gap: .1rem;
    color: var(--color-text-muted, #64748b);
    font-size: .75rem;
}
.search-matrix__date-day { text-transform: uppercase; }
.search-matrix__date-num { font-size: .95rem; font-weight: 600; color: var(--color-text); }
.search-matrix__cell--name {
    justify-content: flex-start;
    gap: .5rem;
    padding: .35rem;
    text-align: left;
}
.search-matrix__thumb {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 3rem; height: 2.25rem;
    display: block;
}
.search-matrix__thumb img,
.search-matrix__thumb .mm-media {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.search-matrix__name-text { display: flex; flex-direction: column; line-height: 1.2; }
.search-matrix__name-text strong { font-size: .9rem; }
.search-matrix__name-text small { color: var(--color-text-muted); font-size: .75rem; }
.search-matrix__cell--price {
    text-decoration: none;
    font-weight: 500;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elev));
    transition: background-color 80ms;
    font-variant-numeric: tabular-nums;
}
.search-matrix__cell--price:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-elev));
}
.search-matrix__cell--empty {
    color: var(--color-text-muted, #94a3b8);
    background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
}
.search-matrix__error,
.search-matrix__empty {
    padding: 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Loading-state tijdens fetch via search-matrix.js — subtle fade.
   mm-loader (search-matrix.js via loader.js) centreert in de panel. */
.search-matrix__panel {
    position: relative;
    transition: opacity 120ms;
    --mm-loader-color: var(--color-primary);
    --mm-loader-track: var(--color-border);
    --mm-loader-size: 1.5rem;
}
.search-matrix__panel[data-mm-loading] { opacity: .6; pointer-events: none; }
.sab__heading { text-align: center; margin-bottom: var(--space-4); }
.sab__title { font-size: 1.5rem; margin: 0; }
.sab__subtitle { margin: var(--space-1) 0 0; color: var(--color-fg-muted); }
.sab__form {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    max-width: 60rem;
    margin: 0 auto;
    background: var(--color-bg-soft, #fff);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
@media (min-width: 48rem) {
    .sab__form {
        grid-template-columns: 1fr 1fr 1fr auto;
        align-items: end;
    }
}
.sab__field { display: flex; flex-direction: column; gap: 0.25em; }
.sab__label { font-size: 0.85rem; font-weight: 600; color: var(--color-fg-muted); }
.sab__input {
    padding: 0.6em 0.8em;
    border: 1px solid var(--color-border, rgba(0,0,0,.15));
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
    color: var(--color-fg);
    min-height: 2.5rem;
}
.sab__input:focus {
    outline: 2px solid var(--color-primary, #c1272d);
    outline-offset: 1px;
}
.sab__submit {
    padding: 0 1.4em;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    /* Matcht .sab__form .mm-date-trigger / .sab__input--button — zelfde
       hoogte zodat de hele rij netjes uitgelijnd blijft in de grid. */
    min-height: 58px;
}
.sab__submit:hover { filter: brightness(1.1); }

/* ─── sab — gedeelde trigger-styling (date + guests) ──────────────────────
   Light stijl met kleine uppercase `<small>`-label bovenin en de waarde
   eronder (`<span>`). Beide trigger-types (date + guests) hetzelfde.
   `.sab__form .mm-date-trigger` heeft 2-class-specificity zodat 't wint
   van het framework-default in `/modules/date-picker.css` (1 class). */
.sab__form .mm-date-trigger,
.sab__input--button {
    display: grid;
    gap: .15rem;
    min-height: 58px;
    padding: .55rem .85rem;
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sab__form .mm-date-trigger:focus-visible,
.sab__form .mm-date-trigger.is-active,
.sab__input--button:focus-visible,
.sab__input--button.is-active {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
    box-shadow: none;
}
.sab__form .mm-date-trigger small,
.sab__input--button small {
    color: var(--color-fg-muted);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sab__form .mm-date-trigger span,
.sab__input--button span {
    display: block;
    font: 700 .92rem/1.2 system-ui;
    color: var(--color-fg);
}
.sab__form .mm-date-trigger[data-empty="1"] span,
[data-mm-guests][data-empty="1"] [data-guests-summary] {
    color: var(--color-fg-muted);
    font-weight: 500;
}

/* ─── sab — datepicker popup ───────────────────────────────────────────── */
.cal-popup {
    position: absolute;
    z-index: 100;
    margin-top: 0.25rem;
    background: #fff;
    color: var(--color-fg);
    border: 1px solid var(--color-border, rgba(0,0,0,.15));
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    min-width: 280px;
}
.cal-popup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-weight: 600;
}
.cal-popup__nav {
    width: 2rem; height: 2rem;
    background: transparent; border: 0;
    font-size: 1.2rem; cursor: pointer; color: inherit;
    border-radius: var(--radius-sm);
}
.cal-popup__nav:hover { background: rgba(0,0,0,.05); }
.cal-popup__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-popup__wd {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-fg-muted);
    text-transform: lowercase;
    padding: 0.25em 0;
}
.cal-popup__day,
.cal-popup__pad {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 36px;
}
.cal-popup__day:hover { background: var(--color-bg-soft, #f4f4f4); }
.cal-popup__day--unavailable {
    color: rgba(0,0,0,.25); cursor: not-allowed;
}
.cal-popup__day--unavailable:hover { background: transparent; }
.cal-popup__day:focus { outline: 2px solid var(--color-primary, #c1272d); outline-offset: 1px; }

.sab__field { position: relative; }

/* ── layer_search_results ─────────────────────────────────────────── */
.layer__search-results {
    padding: var(--space-5) var(--gutter);
    max-width: var(--content-max);
    margin: 0 auto;
}
.search-results__title {
    font-size: var(--fs-h1);
    margin: 0 0 var(--space-2);
}
.search-results__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--color-fg-muted);
    font-size: 0.95rem;
    margin-bottom: var(--space-5);
}
.search-results__meta-item--muted { font-style: italic; }

/* Filters-bar boven de grid: capacity-pill + category-select + apply/reset */
.search-results__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
.search-results__filter-pill {
    padding: 0.3rem 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--color-fg-muted);
}
.search-results__filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--color-fg-muted);
}
.search-results__filter-select {
    padding: 0.35rem 0.6rem;
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}
.search-results__filter-submit {
    margin-left: auto;
}
.search-results__filter-reset {
    color: var(--color-fg-muted);
    font-size: 0.85rem;
    text-decoration: underline;
}

.search-results__grid {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-auto-flow: dense;
    gap: var(--space-3);
}
.search-results__card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s;
}
.search-results__card[hidden] { display: none; }
.search-results__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.search-results__card-image {
    aspect-ratio: 4 / 3;
    background: var(--color-bg-soft);
    display: grid;
    place-items: center;
    font-size: 3rem;
    overflow: hidden;
}
.search-results__card-image > .mm-media,
.search-results__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.search-results__card:hover .search-results__card-image img {
    transform: scale(1.04);
}
.search-results__card-subtitle {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: 0.9rem;
}
.search-results__card-body {
    padding: var(--space-3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.search-results__card-title {
    font-size: 1.05rem;
    margin: 0;
}
.search-results__card-meta {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: 0.9rem;
}
.search-results__card-price {
    margin: auto 0 0;
    padding-top: var(--space-2);
    color: var(--color-fg);
    font-size: 1rem;
    font-weight: 600;
}
/* Hele card is een klikbare link */
.search-results__card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Empty-state als geen types door de filters komen */
.search-results__empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-fg-muted);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

/* Pager: prev / state / next */
.search-results__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.search-results__pager-link {
    color: var(--color-fg);
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.search-results__pager-link:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
}
.search-results__pager-state {
    color: var(--color-fg-muted);
    font-size: 0.9rem;
}

.search-results__footer {
    text-align: center;
    color: var(--color-fg-muted);
    font-size: 0.9rem;
}

/* Sort-bar boven de grid */
.search-results__sort {
    margin-bottom: var(--space-3);
}

/* Desktop: toolbar rechts, count links via order */
@media (min-width: 64rem) {
    .search-results__sort {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
    .search-results__toolbar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        order: 2;
        margin-left: auto;
    }
    .search-results__sort-count {
        flex: 1;
        order: 1;
    }
}

.search-results__sort-count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-fg);
    display: block;
}
.search-results__sort-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--color-fg-muted);
}
.search-results__sort-select {
    padding: 0.35rem 0.6rem;
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}

/* Filter-toggle knop — alleen op mobiel zichtbaar */
.search-results__filter-toggle {
    display: none;
}
@media (max-width: 64rem) {
    .search-results__filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.45rem 0.9rem;
        background: var(--color-bg);
        color: var(--color-fg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: 0.9rem;
        cursor: pointer;
        white-space: nowrap;
    }
    .search-results__filter-toggle:hover {
        background: var(--color-bg-soft);
        border-color: var(--color-border-strong);
    }

    /* Toolbar op mobiel altijd zichtbaar; mm-sticky maakt hem fixed bij scrollen */
    .search-results__toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        background: var(--color-bg);
        padding: var(--space-2) 0;
        margin-bottom: var(--space-2);
        transition: box-shadow .2s;
    }
    /* Wanneer mm-sticky hem fixed zet: volle breedte met padding + schaduw */
    .search-results__toolbar[data-mm-sticky-stuck="1"] {
        padding-left: var(--mm-sticky-inset, var(--space-4));
        padding-right: var(--mm-sticky-inset, var(--space-4));
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 2px 10px rgba(0,0,0,.09);
    }

    /* Count onder de toolbar */
    .search-results__sort-count {
        padding-bottom: var(--space-2);
    }
}

/* Sidebar-header (titel + sluit-knop) — alleen zichtbaar als overlay */
.search-results__sidebar-header {
    display: none;
}

/* Mobile sidebar-header + sluit-knop */
@media (max-width: 64rem) {
    .search-results__sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 0;
    }
    .search-results__sidebar-header strong {
        font-size: 1rem;
        font-weight: 600;
    }
    .search-results__sidebar-close {
        background: none;
        border: none;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        color: var(--color-fg-muted);
        padding: 0.2rem 0.4rem;
    }
}

/* Collapsed-state: cards na de 6e zichtbare match zijn verborgen tot de
   show-more knop klikt. JS zet/verwijdert `.is-collapsed-hidden` per card. */
.search-results__card.is-collapsed-hidden { display: none; }
.search-results__show-more[hidden]        { display: none; }
.search-results__show-more {
    display: block;
    margin: var(--space-3) auto var(--space-4);
    padding: 0.55rem 1.1rem;
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.search-results__show-more:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
}
.search-results__empty {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-fg-muted);
}

/* Sidebar-layout — sidebar links, listing rechts. Op smal scherm stapelt
   het (sidebar boven listing). */
.search-results__layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
    .search-results__layout {
        grid-template-columns: 16rem 1fr;
        align-items: start;
    }
}
.search-results__main { min-width: 0; /* prevent grid overflow on long titles */ }

/* Sidebar zelf: een form-element met groups (legend) en per-property lijst */
.search-results__sidebar {
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (min-width: 64rem) {
    .search-results__sidebar {
        position: sticky;
        top: calc(var(--site-header-height, 64px) + var(--space-3));
    }
}
.search-filters__group {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.search-filters__group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-fg);
    margin-bottom: var(--space-2);
    padding: 0;
}
.search-filters__property {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.search-filters__property-title {
    font-size: 0.78rem;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.search-filters__options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.search-filters__option-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    padding: 0.2rem 0;
    font-size: 0.92rem;
    color: var(--color-fg);
    user-select: none;
}
.search-filters__option-label:hover .search-filters__option-text {
    color: var(--color-primary);
}
.search-filters__option-label input[type="checkbox"],
.search-filters__option-label input[type="radio"] {
    accent-color: var(--color-primary);
}
.search-filters__option-count {
    margin-left: auto;
    color: var(--color-fg-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
/* Datum + gasten bovenaan de sidebar — checkin/checkout onder elkaar,
   gasten breed. Zelfde aanpak als .accommodation-detail__aside. */
.search-filters__date-guests {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.search-filters__date-guests .sab__field,
.search-filters__date-guests .sab__field-inner,
.search-filters__date-guests .sab__input,
.search-filters__date-guests .sab__input--button {
    width: 100%;
    min-width: 0;
}
.search-filters__date-guests .mm-date-trigger-row {
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr;
}
.search-filters__date-guests .mm-date-trigger {
    min-width: 0;
}

.search-filters__actions {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.search-filters__reset {
    color: var(--color-fg-muted);
    text-decoration: underline;
    font-size: 0.9rem;
}
.search-filters__reset:hover { color: var(--color-primary); }

/* Wanneer JS de live-filter heeft overgenomen vervalt de submit-knop —
   change-events activeren dan automatisch de fetch. */
.search-results__sidebar[data-mm-live="1"] .search-filters__actions button[type="submit"] {
    display: none;
}

/* Sidebar: position:relative al gezet, plus mm-loader context vars (lichte achtergrond). */
.search-results__sidebar {
    position: relative;
    --mm-loader-color: var(--color-primary);
    --mm-loader-track: var(--color-border);
    --mm-loader-size: 2rem;
}
/* Mobile sidebar als bottom-sheet overlay — staat ná `position:relative` zodat
   de cascade klopt (beide hebben gelijke specificiteit). */
@media (max-width: 64rem) {
    .search-results__sidebar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 200;
        max-height: 85dvh;
        overflow-y: auto;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.18);
        transform: translateY(100%);
        transition: transform 0.28s var(--ease-out, ease-out);
    }
    .search-results__sidebar.is-open {
        transform: translateY(0);
    }
    body.search-sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(0,0,0,.4);
    }
}

/* Main-grid vervaagt terwijl de sidebar een filter-fetch doet. */
.search-results__sidebar[data-mm-loading] ~ .search-results__main {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s;
}

/* Ad-card: volledige breedte van de grid. Positie via inline `style.order`
   gezet door search-results-grid.js (na N-de zichtbare match). Default: end
   van de grid wanneer JS niet draait. */
.search-results__ad-card {
    grid-column: 1 / -1;
    order: 2;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    list-style: none;
    transition: transform .15s, box-shadow .15s;
}
.search-results__ad-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.search-results__ad-link {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    min-height: 8rem;
}
@media (min-width: 48rem) {
    .search-results__ad-link {
        grid-template-columns: minmax(10rem, 28%) 1fr;
    }
}
.search-results__ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-bg-soft);
}
.search-results__ad-body {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
}
.search-results__ad-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    font-weight: 600;
}
.search-results__ad-title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 600;
}

/* Filter-state micro-animaties — kaart-inkomst, count-flash, empty-state fade-in.
   Achter prefers-reduced-motion: animaties spelen alleen voor gebruikers die dat willen. */
@keyframes mm-card-enter {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
}
@keyframes mm-count-flash {
    0% { color: var(--color-primary); }
}
@keyframes mm-fade-up {
    from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: no-preference) {
    .search-results__card.is-filter-entering {
        animation: mm-card-enter .22s ease forwards;
    }
    .search-results__count.is-count-updated {
        animation: mm-count-flash .4s ease;
    }
    .search-results__empty:not([hidden]) {
        animation: mm-fade-up .3s ease;
    }
}