/* ==========================================================================
   WISHLIST OVERVIEW — list view of the dashboard (App Dashboard/Index.razor, Web Views/Dashboard/Index.cshtml)
   The same file lives in Wishy.Blazor.App/wwwroot/css and Wishy.Web/wwwroot/css; keep both copies identical
   (a test compares them). Breakpoints are container queries on the overview's own width, not the window:
     < 760 px   compact rows (68 px, 48 px thumbnail, meta line, "7/14" + bar + chevron)
     ≥ 760 px   table: Name · Anlass · Datum · Wünsche · Reserviert · Sichtbarkeit · Geändert
     < 1080 px  visibility as an icon only;  < 900 px  no "Geändert" column
   One DOM for both: a row is the same element in both layouts (one link, one data-vt-cover thumbnail), so the
   shared element, FLIP and the screen reader see a single row per list. Mirrored in WishlistOverview (C#).
   The Explore page uses the same blocks with its own columns (.wl-ex, see "Explore" below, ExploreOverview).
   ========================================================================== */

.wl-scope {
    --wl-raised: #fff;
    --wl-line: rgb(var(--neutral-100));
    --wl-line-2: rgb(var(--neutral-200));
    --wl-text: rgb(var(--neutral-900));
    --wl-text-2: rgb(var(--neutral-700));
    --wl-muted: rgb(var(--neutral-500));
    --wl-faint: rgb(var(--neutral-400));
    --wl-hover: rgb(var(--neutral-50));
    --wl-press: rgb(var(--neutral-100));
    --wl-track: rgb(var(--neutral-100));
    --wl-sunken: rgb(var(--neutral-100));
    --wl-accent-text: rgb(var(--primary-600));
    --wl-ring: rgb(var(--primary-500));
}
.dark .wl-scope {
    --wl-raised: rgb(var(--neutral-900));
    --wl-line: rgb(var(--neutral-800) / 0.6);
    --wl-line-2: rgb(var(--neutral-800));
    --wl-text: #fff;
    --wl-text-2: rgb(var(--neutral-300));
    --wl-muted: rgb(var(--neutral-400));
    --wl-faint: rgb(var(--neutral-500));
    --wl-hover: rgb(var(--neutral-800) / 0.5);
    --wl-press: rgb(var(--neutral-800));
    --wl-track: rgb(var(--neutral-800));
    --wl-sunken: rgb(var(--neutral-950));
    --wl-accent-text: rgb(var(--primary-400));
    --wl-ring: rgb(var(--primary-400));
}

/* ---------- Tab row with the toolbar (sort menu, Karten | Liste) ---------- */
.wl-bar-host { container: wlbar / inline-size; }
.wl-tabsbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid rgb(var(--neutral-200));
}
.dark .wl-tabsbar { border-bottom-color: rgb(var(--neutral-800)); }
.wl-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    min-width: 0;
}
.wl-count {
    margin-right: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--wl-muted);
    white-space: nowrap;
}
@container wlbar (min-width: 640px) {
    .wl-tabsbar { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .wl-tabs { flex: 1 1 auto; }
    .wl-toolbar { flex-shrink: 0; padding-bottom: 8px; }
    .wl-count { display: none; }
}

/* Sort menu: a native select (system picker on phones) dressed as a pill. */
.wl-sel {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--wl-line-2);
    background: var(--wl-raised);
    color: var(--wl-text-2);
    box-shadow: var(--shadow-sm);
}
.wl-sel > svg, .wl-sel > i {
    position: absolute;
    left: 10px;
    color: var(--wl-faint);
    pointer-events: none;
}
.wl-sel > .wl-sel-chev { left: auto; right: 9px; }
.wl-sel select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    width: 100%;
    height: 100%;
    /* !important: the web's global "select { padding: .75rem !important }" would put the text under the icon. */
    padding: 0 28px 0 30px !important;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
}
.wl-sel select:focus-visible { box-shadow: 0 0 0 2px var(--wl-raised), 0 0 0 4px var(--wl-ring); }
.dark .wl-sel select option { background: rgb(var(--neutral-900)); }

/* Segmented control Karten | Liste: a radiogroup, the pill glides 240 ms (--ease-move). */
.wl-seg {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    height: 36px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--wl-line-2);
    background: var(--wl-sunken);
}
.wl-seg-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 28px;
    border-radius: 8px;
    background: var(--wl-raised);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 1px 6px -2px rgb(15 23 42 / 0.12);
    transition: transform var(--dur-m, 240ms) var(--ease-move, cubic-bezier(.4, 0, .2, 1));
}
.dark .wl-seg-pill { background: rgb(var(--neutral-700)); box-shadow: none; }
.wl-seg[data-on="list"] .wl-seg-pill { transform: translateX(34px); }
.wl-seg button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--wl-faint);
    cursor: pointer;
    transition: color var(--dur-xs, 120ms) ease;
}
.wl-seg button[aria-checked="true"] { color: var(--wl-text); }
.wl-seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wl-raised), 0 0 0 4px var(--wl-ring); }

/* ---------- The list ---------- */
.wl-view { container: wl / inline-size; }
.wl-table {
    background: var(--wl-raised);
    border: 1px solid var(--wl-line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: clip;
}
.wl-head { display: none; }
.wl-body { list-style: none; margin: 0; padding: 0; }
.wl-item { position: relative; }
.wl-item.wishlist-card:active { transform: none; }
.wl-item + .wl-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 76px;
    right: 0;
    height: 1px;
    background: var(--wl-line);
    z-index: 2;
    pointer-events: none;
}

.wl-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 12px 10px 14px;
    background: var(--wl-raised);
    color: var(--wl-text-2);
    transition: background-color var(--dur-xs, 120ms) ease, transform var(--dur-m, 240ms) var(--ease-move, cubic-bezier(.4, 0, .2, 1));
    touch-action: pan-y;
}
.wl-row:hover { background-color: var(--wl-hover); }
.wl-row:active { background-color: var(--wl-press); }
.wl-row.is-dragging { transition: background-color var(--dur-xs, 120ms) ease; }

.wl-c { min-width: 0; }
.wl-c-name { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; }
.wl-c-occ, .wl-c-date, .wl-c-items, .wl-c-vis, .wl-c-upd { display: none; }

/* Cover thumbnail: photo, or the occasion glyph on the accent tile (as GeneratedCover Compact). Its own stacking
   context keeps a late-loaded image (web: first wish) under the row link. */
.wl-thumb {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
}
.wl-thumb:not(.wy-emblem) { background: var(--wl-sunken); }
.wl-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-thumb.wy-emblem { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
.wl-thumb.wy-emblem > svg { width: 22px; height: 22px; }
.wl-thumb.is-photo { box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.06); }

.wl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wl-tl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wl-link {
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    outline: none;
}
/* The whole row is the link; the action buttons sit above it. */
.wl-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.wl-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--wl-ring); }
.wl-vis-i { flex-shrink: 0; color: var(--wl-faint); }
.wl-sub { display: none; }

.wl-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--wl-muted);
    white-space: nowrap;
}
.wl-meta > span { flex-shrink: 0; }
.wl-meta > .wl-trunc { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-meta .wl-dot { color: var(--wl-faint); }
.wl-meta .wl-past { color: var(--wl-faint); }
.wl-who { display: inline-flex; align-items: center; gap: 4px; }
.wl-meta .wl-wcount, .wl-meta .wl-wdot { display: none; }
.wl-meta.has-who .wl-occ, .wl-meta.has-who .wl-occ + .wl-dot { display: none; }
@container wl (min-width: 600px) {
    .wl-meta .wl-wcount, .wl-meta .wl-wdot { display: inline; }
    .wl-meta.has-who .wl-occ, .wl-meta.has-who .wl-occ + .wl-dot { display: inline; }
}

/* Countdown pill (wy-countdown, smaller in rows and cells). */
.wy-countdown.wl-cd {
    display: inline-flex;
    gap: 3px;
    padding: 1px 7px 1px 6px;
    font-size: 11px;
    line-height: 16px;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.35);
}
.dark .wy-countdown.wl-cd { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5); }
.wy-countdown.wl-cd svg { width: 11px; height: 11px; }

/* Reserved / fulfilled: "7/14" and the two-colour bar (fulfilled accent, reserved amber). */
.wl-c-prog {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
@container wl (min-width: 600px) { .wl-c-prog { width: 96px; } }
.wl-fr { font-size: 12px; font-weight: 600; color: var(--wl-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-fr .wl-of { color: var(--wl-faint); font-weight: 500; }
.wl-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--wl-track);
    overflow: hidden;
}
.wl-bar > i { position: absolute; inset: 0; transform-origin: left; border-radius: inherit; }
.wl-bar > .wl-bar-f { background: rgb(var(--primary-500)); }
.wl-bar > .wl-bar-r { background: #fbbf24; }
.wl-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--wl-faint);
    white-space: nowrap;
}
.wl-note > i, .wl-note > svg { color: var(--wl-muted); }
.wl-c-prog.is-note { width: auto; max-width: 104px; }
.wl-dash { display: none; color: var(--wl-faint); }
.wl-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--wl-faint); }

/* Share / Edit on hover or keyboard focus (devices with a mouse); touch uses the swipe actions. */
.wl-acts {
    position: absolute;
    right: 38px;
    top: 50%;
    z-index: 3;
    display: none;
    gap: 4px;
    padding-left: 24px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--wl-hover) 22px);
    opacity: 0;
    transition: opacity var(--dur-s, 180ms) ease;
}
.wl-ab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: var(--wl-raised);
    box-shadow: 0 0 0 1px var(--wl-line-2);
    color: rgb(var(--neutral-600));
    cursor: pointer;
    text-decoration: none;
    transition: color var(--dur-xs, 120ms) ease;
}
.dark .wl-ab { background: rgb(var(--neutral-800)); box-shadow: none; color: rgb(var(--neutral-300)); }
.wl-ab:hover { color: var(--wl-accent-text); }
.wl-ab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wl-raised), 0 0 0 4px var(--wl-ring); }
@media (hover: hover) and (pointer: fine) {
    .wl-acts { display: flex; }
    .wl-row:hover .wl-acts, .wl-row:focus-within .wl-acts { opacity: 1; }
}

/* Swipe actions behind the row (touch): the row slides left and uncovers them. */
.wl-swipe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
}
.wl-swipe button, .wl-swipe a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 76px;
    border: 0;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.wl-swipe .wl-sw-share { background: rgb(var(--primary-600)); }
.wl-swipe .wl-sw-edit { background: #475569; }
.dark .wl-swipe .wl-sw-edit { background: rgb(var(--neutral-700)); }
.wl-item.is-swiped .wl-row { transform: translateX(calc(-1 * var(--wl-swipe-w, 152px))); }
.wl-item:not(.is-swiped) .wl-swipe { visibility: hidden; }
.wl-item.is-swiped .wl-swipe, .wl-item.is-dragging .wl-swipe { visibility: visible; }
@media (hover: hover) and (pointer: fine) { .wl-swipe { display: none; } }

/* ---------- Table (≥ 760 px content width) ---------- */
@container wl (min-width: 760px) {
    .wl-table {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) repeat(6, auto) 0;
    }
    .wl-head, .wl-hrow, .wl-body, .wl-item, .wl-row {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
    .wl-head {
        position: sticky;
        top: 0;
        z-index: 4;
        background: var(--wl-raised);
    }
    .wl-h {
        display: flex;
        align-items: center;
        padding: 0;
        border-bottom: 1px solid var(--wl-line-2);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--wl-faint);
        white-space: nowrap;
    }
    .wl-h.is-num { justify-content: flex-end; }
    .wl-h:first-child .wl-sb { padding-left: 16px; }

    .wl-item + .wl-item::before { left: 0; }
    .wl-row {
        gap: 0;
        min-height: 0;
        padding: 0;
        align-items: center;
        font-size: 13.5px;
    }
    .wl-c { padding: 10px 12px; }
    .wl-c-name { padding-left: 16px; }
    .wl-c-occ, .wl-c-items, .wl-c-vis, .wl-c-upd { display: block; white-space: nowrap; }
    .wl-c-date { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; }
    .wl-c-items { text-align: right; font-variant-numeric: tabular-nums; }
    .wl-c-act, .wl-h-act { padding: 0; width: 0; }

    .wl-c-name .wl-thumb { width: 36px; height: 36px; border-radius: 10px; }
    .wl-c-name .wl-thumb.wy-emblem > svg { width: 18px; height: 18px; }
    .wl-link {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
    }
    .wl-tl .wl-vis-i, .wl-meta, .wl-chev, .wl-swipe { display: none; }
    .wl-main { gap: 2px; }
    .wl-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--wl-muted); }

    .wl-c-prog {
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
    .wl-c-prog .wl-bar { order: -1; width: 64px; }
    .wl-c-prog .wl-fr { min-width: 38px; text-align: right; font-size: 12.5px; }
    .wl-c-prog.is-note { max-width: none; }
    .wl-empty-n { display: none; }
    .wl-dash { display: inline; }
    .wl-past-cell, .wl-none { color: var(--wl-faint); }
    .wl-vis { display: inline-flex; align-items: center; gap: 6px; }
    .wl-vis > i, .wl-vis > svg { color: var(--wl-faint); }
    .wl-ago { color: var(--wl-muted); }
    .wl-acts { right: 12px; }
}
@container wl (max-width: 1079.98px) {
    .wl-vis-l { display: none; }
    .wl-hl-l { display: none; }
}
@container wl (min-width: 1080px) {
    .wl-h .wl-hl-s { display: none; }
}
@container wl (max-width: 899.98px) {
    .wl-c-upd, .wl-h-upd { display: none !important; }
}

/* Older engines without subgrid: fixed column widths instead (same order). */
@supports not (grid-template-columns: subgrid) {
    @container wl (min-width: 760px) {
        .wl-table, .wl-head, .wl-body, .wl-item { display: block; }
        .wl-hrow, .wl-row { display: grid; grid-template-columns: minmax(200px, 1fr) 118px 118px 84px 140px 132px 110px 0; }
    }
    @container wl (min-width: 760px) and (max-width: 1079.98px) {
        .wl-hrow, .wl-row { grid-template-columns: minmax(200px, 1fr) 118px 118px 84px 140px 48px 110px 0; }
    }
    @container wl (min-width: 760px) and (max-width: 899.98px) {
        .wl-hrow, .wl-row { grid-template-columns: minmax(200px, 1fr) 118px 118px 84px 140px 48px 0; }
    }
}

/* Sortable column headers (aria-sort on the header, synchronous with the sort menu). */
.wl-sb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.wl-h.is-num .wl-sb { flex-direction: row-reverse; }
.wl-sb:hover { color: var(--wl-text-2); }
.wl-sb:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wl-ring); }
.wl-sb > svg, .wl-sb > i { flex-shrink: 0; }
.wl-sb .wl-si-asc, .wl-sb .wl-si-desc { display: none; }
.wl-sb .wl-si-none { opacity: 0; transition: opacity var(--dur-xs, 120ms) ease; }
.wl-sb:hover .wl-si-none, .wl-sb:focus-visible .wl-si-none { opacity: 0.5; }
.wl-h[aria-sort] .wl-sb { color: var(--wl-text); }
.wl-h[aria-sort] .wl-si-none { display: none; }
.wl-h[aria-sort="ascending"] .wl-si-asc, .wl-h[aria-sort="descending"] .wl-si-desc { display: inline-block; color: var(--wl-accent-text); }
.wl-hl-s { display: inline-flex; color: var(--wl-faint); }

/* Web: both views are in the page (switching needs no request); the collection's data-view shows one of them.
   The empty state and the phone's + button live in the card grid and stay. */
#dashboardCollection[data-view="list"] #wishlistGrid > .wishlist-card,
#dashboardCollection[data-view="list"] #dashboardCreateCard,
#dashboardCollection[data-view="list"] [data-removed-ghost] { display: none !important; }
#dashboardCollection[data-view="cards"] #dashboardListHost { display: none; }

/* ==========================================================================
   EXPLORE — list view of other people's lists (App Pages/Explore.razor + ExploreListView.razor, Web
   Views/Home/_ExploreListView.cshtml). The rules above, with other columns:
     < 880 px   compact rows: thumbnail, title, "Thomas W. · Geburtstag · in 12 T.", wishes (gift + number), chevron
     ≥ 880 px   table: Name · Erstellt von · Anlass · Datum · Wünsche · Geändert (from 1040 px)
   No reservation status or progress (surprise, other people's lists), no visibility, no edit action.
   The table starts later than the overview's (six columns, the owner with avatar): the section host is the
   container "wlx"; from 880 px it also names the view "wl", so the table rules above apply unchanged. Below 880 px
   the view is only "wl-ex" and keeps the compact rows. Mirrored in ExploreOverview (C#).
   ========================================================================== */
.wl-ex-host { container: wlx / inline-size; }
.wl-view.wl-ex { container-name: wl-ex; }
@container wlx (min-width: 880px) {
    .wl-view.wl-ex { container-name: wl wl-ex; }
}

.wl-ex .wl-c-own { display: none; }
.wl-ex .wl-c-items {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wl-text-2);
    font-variant-numeric: tabular-nums;
}
.wl-ex .wl-c-items > svg, .wl-ex .wl-c-items > i { color: var(--wl-faint); }
/* Meta line "Thomas W. · Geburtstag · in 12 T.": the occasion (with its dot) only from 600 px. */
.wl-ex .wl-meta > .wl-xo { display: none; flex-shrink: 1; min-width: 0; align-items: center; gap: 6px; }
.wl-ex .wl-xo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container wl-ex (min-width: 600px) {
    .wl-ex .wl-meta > .wl-xo { display: inline-flex; }
}

.wl-own { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wl-own .wl-av { display: inline-flex; flex-shrink: 0; font-size: 11px; line-height: 1; }
.wl-own-n { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--wl-text-2); }

@container wl (min-width: 760px) {
    .wl-ex .wl-table { grid-template-columns: minmax(220px, 1fr) repeat(5, auto) 0; }
    .wl-ex .wl-c-own { display: flex; align-items: center; white-space: nowrap; }
    .wl-ex .wl-c-items { display: block; text-align: right; font-size: inherit; font-weight: inherit; }
    .wl-ex .wl-c-items > svg, .wl-ex .wl-c-items > i { display: none; }
}
@container wl (max-width: 1039.98px) {
    .wl-ex .wl-c-upd, .wl-ex .wl-h-upd { display: none !important; }
}
@supports not (grid-template-columns: subgrid) {
    @container wl (min-width: 760px) {
        .wl-ex .wl-hrow, .wl-ex .wl-row { grid-template-columns: minmax(200px, 1fr) 196px 118px 128px 84px 110px 0; }
    }
    @container wl (min-width: 760px) and (max-width: 1039.98px) {
        .wl-ex .wl-hrow, .wl-ex .wl-row { grid-template-columns: minmax(200px, 1fr) 196px 118px 128px 84px 0; }
    }
}

/* Web: cards and rows are both in the page; the results' data-view shows one of them. Empty states live in the
   card grid and stay. */
[data-ex-results][data-view="list"] [data-ex-grid] > .wishlist-card { display: none !important; }
[data-ex-results][data-view="cards"] .wl-ex-host { display: none; }