/* ==========================================================================
   DISCOVER — index / listing page (modern redesign)
   Namespaced under .dcv so nothing here touches the detail page (.dcx),
   the admin catalog screens, or the legacy .discover-* rules in catalog.css.
   Palette matches the site: #667eea → #764ba2 brand, #ff6b35 accent.
   ========================================================================== */

.dcv {
    --dcv-brand: #667eea;
    --dcv-brand-2: #764ba2;
    --dcv-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --dcv-accent: #ff6b35;
    --dcv-ink: #1e2a3a;
    --dcv-ink-2: #46536a;
    --dcv-muted: #7a8699;
    --dcv-line: #e7e9f3;
    --dcv-tint: #f6f7fe;
    --dcv-radius: 20px;
    --dcv-shadow: 0 2px 14px rgba(18, 41, 63, .06);
    --dcv-shadow-lg: 0 18px 44px rgba(18, 41, 63, .13);

    /* Height of the site header. The two-tier desktop bar collapses on scroll,
       so discover-index.js measures it live and overwrites this; the value
       below is only a safe first-paint fallback. */
    --dcv-stick: 112px;

    display: block;
    background: #fff;
    color: var(--dcv-ink);
}

/* Self-contained sizing so the padding math holds even if this page is ever
   rendered without main.css's global reset. */
.dcv,
.dcv *,
.dcv *::before,
.dcv *::after {
    box-sizing: border-box;
}

.dcv-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.dcv-hero {
    position: relative;
    padding: 26px 0 30px;
    background: var(--dcv-tint);
    border-bottom: 1px solid var(--dcv-line);
    overflow: hidden;
}

/* Soft brand bloom instead of the old full-bleed purple slab — keeps the page
   feeling light while still reading as "ours". */
.dcv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 300px at 8% -30%, rgba(102, 126, 234, .16), transparent 70%),
        radial-gradient(520px 260px at 96% 130%, rgba(118, 75, 162, .13), transparent 70%);
    pointer-events: none;
}

.dcv-hero > .dcv-shell {
    position: relative;
    z-index: 1;
}

.dcv-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    font-size: .84rem;
    color: var(--dcv-muted);
}

.dcv-crumbs a {
    color: var(--dcv-muted);
    text-decoration: none;
    transition: color .15s;
}

.dcv-crumbs a:hover {
    color: var(--dcv-brand);
}

.dcv-crumbs i {
    font-size: .62rem;
    opacity: .6;
}

.dcv-crumbs [aria-current] {
    color: var(--dcv-ink-2);
    font-weight: 600;
}

.dcv-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--dcv-ink);
}

.dcv-lede {
    margin: 0;
    max-width: 62ch;
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--dcv-ink-2);
}

/* ---------- Search ---------- */
.dcv-search {
    position: relative;
    margin-top: 22px;
    max-width: 480px;
}

.dcv-search-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--dcv-muted);
    font-size: .95rem;
    pointer-events: none;
}

.dcv-search input {
    width: 100%;
    min-height: 52px;
    padding: 14px 46px 14px 46px;
    border: 1px solid var(--dcv-line);
    border-radius: 999px;
    background: #fff;
    color: var(--dcv-ink);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: var(--dcv-shadow);
    transition: border-color .15s, box-shadow .15s;
}

.dcv-search input::placeholder {
    color: var(--dcv-muted);
}

.dcv-search input:focus {
    outline: none;
    border-color: var(--dcv-brand);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15);
}

.dcv-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dcv-muted);
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.dcv-search-clear:hover {
    background: var(--dcv-tint);
    color: var(--dcv-ink);
}

.dcv-search.has-value .dcv-search-clear {
    display: flex;
}

/* ==========================================================================
   STICKY FILTER BAR
   ========================================================================== */

.dcv-filterbar {
    position: sticky;
    top: var(--dcv-stick);
    z-index: 40;
    /* Matches the header's own scrolled bar so the two read as one surface. */
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--dcv-line);
}

/* Desktop: both groups collapse onto ONE line. `display: contents` on the
   rows lifts their label + chip track into the shell's flex line, so Category
   and Region read as a single continuous bar rather than two stacked blocks. */
.dcv-filterbar > .dcv-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Fades the right edge while the row still has chips scrolled out of view, so
   the overflow is discoverable on narrower desktops. JS toggles the classes. */
.dcv-filterbar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .96) 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.dcv-filterbar.has-overflow:not(.at-end)::after {
    opacity: 1;
}

.dcv-filterbar > .dcv-shell::-webkit-scrollbar {
    display: none;
}

.dcv-filterrow {
    display: contents;
}

.dcv-filterrow-label {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dcv-muted);
    white-space: nowrap;
}

/* Divider between the two groups on one line. */
.dcv-filterrow + .dcv-filterrow > .dcv-filterrow-label {
    padding-left: 10px;
    border-left: 1px solid var(--dcv-line);
}

.dcv-chiprow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Sheet-only chrome, hidden until the mobile breakpoint takes over. */
.dcv-filter-btn,
.dcv-sheet-head,
.dcv-sheet-foot,
.dcv-filter-backdrop {
    display: none;
}

.dcv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--dcv-line);
    border-radius: 999px;
    background: #fff;
    color: var(--dcv-ink-2);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: border-color .16s, color .16s, background .16s, box-shadow .16s, transform .16s;
}

.dcv-chip i {
    font-size: .88rem;
    color: var(--dcv-brand);
    transition: color .16s;
}

.dcv-chip:hover {
    border-color: rgba(102, 126, 234, .45);
    color: var(--dcv-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(102, 126, 234, .13);
}

.dcv-chip.is-active {
    background: var(--dcv-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(102, 126, 234, .3);
}

.dcv-chip.is-active i {
    color: #fff;
}

/* Count of matching places, inside the chip. */
.dcv-chip-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--dcv-tint);
    color: var(--dcv-muted);
    font-size: .72rem;
    font-weight: 700;
    transition: background .16s, color .16s;
}

.dcv-chip.is-active .dcv-chip-n {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

/* A category/region with nothing in it stays reachable but reads as inert. */
.dcv-chip.is-empty {
    opacity: .5;
}

/* ==========================================================================
   TOOLBAR — result count, applied filters, sort
   ========================================================================== */

.dcv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 26px 0 20px;
}

.dcv-count {
    margin: 0;
    font-size: .96rem;
    color: var(--dcv-ink-2);
}

.dcv-count strong {
    color: var(--dcv-ink);
    font-weight: 700;
}

.dcv-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dcv-applied-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 6px 5px 13px;
    border: 1px solid rgba(102, 126, 234, .3);
    border-radius: 999px;
    background: var(--dcv-tint);
    color: var(--dcv-brand-2);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.dcv-applied-pill:hover {
    border-color: rgba(102, 126, 234, .6);
    background: #eef1fe;
}

.dcv-applied-pill i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(102, 126, 234, .16);
    font-size: .62rem;
}

.dcv-clear {
    color: var(--dcv-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

.dcv-clear:hover {
    color: var(--dcv-brand);
    border-bottom-color: currentColor;
}

.dcv-sort {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* It's a <label>, which picks up a bottom margin from main.css. Left
       unchecked that inflates its margin box and knocks the control 4px out of
       line with its flex-row neighbours. */
    margin: 0 0 0 auto;
    font-size: .87rem;
    color: var(--dcv-muted);
}

.dcv-sort select {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--dcv-line);
    border-radius: 10px;
    background: #fff;
    color: var(--dcv-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.dcv-sort select:focus {
    outline: none;
    border-color: var(--dcv-brand);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}

/* ==========================================================================
   CARD GRID
   ========================================================================== */

.dcv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 24px;
    padding-bottom: 8px;
}

.dcv-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dcv-line);
    border-radius: var(--dcv-radius);
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--dcv-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dcv-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, .35);
    box-shadow: var(--dcv-shadow-lg);
}

.dcv-card-media {
    position: relative;
    aspect-ratio: 16 / 11;
    background: var(--dcv-tint);
    overflow: hidden;
}

.dcv-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.dcv-card:hover .dcv-card-media img {
    transform: scale(1.06);
}

.dcv-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef1fe 0%, #f3eefb 100%);
    color: var(--dcv-brand);
    font-size: 2.2rem;
}

/* Scrim so the badges stay legible over any photo. */
.dcv-card-media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    background: linear-gradient(180deg, rgba(12, 20, 34, .42) 0%, transparent 100%);
    pointer-events: none;
}

.dcv-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--dcv-ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.dcv-card-cat i {
    color: var(--dcv-brand);
    font-size: .74rem;
}

.dcv-card-star {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--dcv-accent);
    font-size: .78rem;
}

.dcv-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: 16px 18px 18px;
}

.dcv-card-body h2 {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--dcv-ink);
}

.dcv-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: .91rem;
    line-height: 1.55;
    color: var(--dcv-muted);
}

.dcv-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Pins the footer to the bottom so cards of differing text length still
       line their meta rows up across the grid. */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--dcv-line);
}

.dcv-card-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .87rem;
    color: var(--dcv-ink-2);
}

.dcv-card-loc i {
    color: var(--dcv-brand);
    font-size: .82rem;
    flex-shrink: 0;
}

.dcv-card-loc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcv-card-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--dcv-brand);
}

.dcv-card-go i {
    font-size: .76rem;
    transition: transform .2s ease;
}

.dcv-card:hover .dcv-card-go i {
    transform: translateX(3px);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.dcv-empty {
    padding: 64px 24px;
    border: 1px dashed var(--dcv-line);
    border-radius: var(--dcv-radius);
    background: var(--dcv-tint);
    text-align: center;
}

.dcv-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--dcv-brand);
    font-size: 1.5rem;
    box-shadow: var(--dcv-shadow);
}

.dcv-empty h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: var(--dcv-ink);
}

.dcv-empty p {
    margin: 0 auto 20px;
    max-width: 46ch;
    color: var(--dcv-muted);
    line-height: 1.6;
}

.dcv-empty [hidden] {
    display: none;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.dcv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 24px;
    border: 1px solid var(--dcv-line);
    border-radius: 12px;
    background: #fff;
    color: var(--dcv-ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s, transform .16s, opacity .16s;
}

.dcv-btn:hover {
    border-color: rgba(102, 126, 234, .45);
    box-shadow: 0 8px 18px rgba(102, 126, 234, .15);
    transform: translateY(-1px);
}

.dcv-btn-primary {
    border-color: transparent;
    background: var(--dcv-grad);
    color: #fff;
    box-shadow: 0 8px 20px rgba(102, 126, 234, .3);
}

.dcv-btn-primary:hover {
    border-color: transparent;
    opacity: .96;
    box-shadow: 0 12px 26px rgba(102, 126, 234, .36);
}

/* ==========================================================================
   "LIST YOUR BUSINESS" — lead capture
   ========================================================================== */

.dcv-cta {
    margin-top: 60px;
    padding: 56px 0 72px;
    background: var(--dcv-tint);
    border-top: 1px solid var(--dcv-line);
}

.dcv-cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

.dcv-cta-intro h2 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--dcv-ink);
}

.dcv-cta-intro p {
    margin: 0 0 22px;
    max-width: 46ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--dcv-ink-2);
}

.dcv-cta-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dcv-cta-points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--dcv-ink-2);
    font-size: .95rem;
    line-height: 1.5;
}

.dcv-cta-points i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--dcv-brand);
    font-size: .88rem;
}

.dcv-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 28px 26px;
    border: 1px solid var(--dcv-line);
    border-radius: var(--dcv-radius);
    background: #fff;
    box-shadow: var(--dcv-shadow-lg);
}

.dcv-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.dcv-field-full {
    grid-column: 1 / -1;
}

.dcv-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dcv-ink-2);
}

.dcv-field input,
.dcv-field select,
.dcv-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d7dbe6;
    border-radius: 11px;
    background: #fff;
    color: var(--dcv-ink);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}

.dcv-field textarea {
    min-height: 104px;
    resize: vertical;
}

.dcv-field input:focus,
.dcv-field select:focus,
.dcv-field textarea:focus {
    outline: none;
    border-color: var(--dcv-brand);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}

.dcv-form .dcv-btn {
    grid-column: 1 / -1;
    width: 100%;
}

.dcv-honeypot {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 900px) {
    .dcv-cta-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 48px;
    }
}

/* ==========================================================================
   MOBILE — filters move behind a button into a slide-up sheet
   ========================================================================== */

@media (max-width: 899px) {

    /* ---------- Toolbar: [Filters] [Sort] on line 1, count/pills below ----- */
    .dcv-toolbar {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .dcv-filter-btn {
        display: inline-flex;
        order: 1;
        flex: 0 0 auto;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 12px 18px;
        border: 1px solid var(--dcv-line);
        border-radius: 12px;
        background: #fff;
        color: var(--dcv-ink);
        font-family: inherit;
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--dcv-shadow);
    }

    /* Basis 0 (not auto) so Sort shrinks into whatever space the Filters
       button leaves instead of wrapping onto its own line. */
    .dcv-toolbar .dcv-sort {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
    }

    .dcv-toolbar .dcv-sort select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    /* Each gets its own line under the controls. */
    .dcv-toolbar .dcv-count {
        order: 3;
        flex: 1 1 100%;
    }

    .dcv-toolbar .dcv-applied {
        order: 4;
        flex: 1 1 100%;
    }

    .dcv-filter-btn i {
        color: var(--dcv-brand);
    }

    .dcv-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--dcv-grad);
        color: #fff;
        font-size: .74rem;
        font-weight: 700;
    }

    /* ---------- Backdrop ---------- */
    .dcv-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(18, 25, 40, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .dcv-filter-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* ---------- The sheet itself ---------- */
    .dcv-filterbar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        max-height: 84vh;
        border: none;
        border-radius: 22px 22px 0 0;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.4, 0, .2, 1);
        visibility: hidden;
    }

    .dcv-filterbar.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    /* The sheet scrolls vertically — no horizontal edge fade here. */
    .dcv-filterbar::after {
        content: none;
    }

    .dcv-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--dcv-line);
    }

    .dcv-sheet-head span {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--dcv-ink);
    }

    .dcv-filter-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: var(--dcv-tint);
        color: var(--dcv-ink);
        font-size: 1rem;
        cursor: pointer;
    }

    /* Back to stacked groups with visible headings inside the sheet.
       `width: 100%` / `margin: 0` are load-bearing: .dcv-shell carries
       `margin: 0 auto`, and an auto cross-axis margin on a flex item cancels
       stretch — the shell collapsed to its shrink-to-fit width (217px inside a
       375px sheet), dragging every chip narrow with it. */
    .dcv-filterbar > .dcv-shell {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .dcv-filterrow {
        display: block;
        padding: 16px 0;
    }

    .dcv-filterrow + .dcv-filterrow {
        border-top: 1px solid var(--dcv-line);
    }

    .dcv-filterrow-label {
        display: block;
        margin-bottom: 12px;
    }

    /* No side-divider in sheet mode — the row border already separates them. */
    .dcv-filterrow + .dcv-filterrow > .dcv-filterrow-label {
        padding-left: 0;
        border-left: none;
    }

    /* Full-width tappable rows read better than a cramped chip wrap. */
    .dcv-chiprow {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .dcv-chip {
        justify-content: flex-start;
        min-height: 48px;
        border-radius: 12px;
    }

    .dcv-chip .dcv-chip-n {
        margin-left: auto;
    }

    .dcv-sheet-foot {
        display: block;
        flex: 0 0 auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--dcv-line);
    }

    .dcv-sheet-foot .dcv-btn {
        width: 100%;
    }

    body.dcv-filter-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .dcv-shell {
        padding: 0 16px;
    }

    .dcv-hero {
        padding: 20px 0 24px;
    }

    .dcv-search {
        max-width: none;
    }

    .dcv-toolbar {
        padding: 24px 0 16px;
    }

    .dcv-sort {
        margin-left: 0;
        width: 100%;
    }

    .dcv-sort select {
        flex: 1;
    }

    .dcv-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px;
    }

    .dcv-cta {
        margin-top: 44px;
        padding: 40px 0 52px;
    }

    .dcv-form {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }
}

@media (max-width: 480px) {
    .dcv-grid {
        grid-template-columns: 1fr;
    }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {

    .dcv-card,
    .dcv-card-media img,
    .dcv-chip,
    .dcv-btn,
    .dcv-card-go i {
        transition: none !important;
    }

    .dcv-card:hover {
        transform: none;
    }

    .dcv-card:hover .dcv-card-media img {
        transform: none;
    }
}