.mobile-filter-toggle {
    display: none;
}

.directory-tools {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
}

.directory-filter-panel {
    display: grid;
    grid-template-columns: minmax(240px, 440px) auto;
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border), transparent 16%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface), transparent 22%);
}

.directory-filter-panel label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.directory-filter-panel input {
    min-height: 44px;
    background: var(--surface-2);
}

.directory-filter-count {
    align-self: center;
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
}

.directory-filter-count b {
    color: var(--text);
    font-size: .9rem;
}

.directory-filter-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
    text-align: center;
}

[data-directory-item][hidden],
.directory-filter-empty[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .mobile-filter-toggle {
        display: flex;
        width: 100%;
        min-height: 50px;
        align-items: center;
        gap: 11px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface);
        color: var(--text);
        font-weight: 800;
        text-align: left;
    }

    .mobile-filter-toggle > b {
        display: grid;
        min-width: 25px;
        height: 25px;
        margin-left: auto;
        padding-inline: 6px;
        place-items: center;
        border-radius: 50%;
        background: var(--surface-2);
        font-size: .68rem;
        font-variant-numeric: tabular-nums;
    }

    .mobile-filter-icon {
        position: relative;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
    }

    .mobile-filter-icon::before,
    .mobile-filter-icon::after {
        content: "";
        position: absolute;
        left: 2px;
        width: 16px;
        height: 1px;
        background: currentColor;
        box-shadow: 0 6px currentColor;
    }

    .mobile-filter-icon::before {
        top: 4px;
    }

    .mobile-filter-icon::after {
        top: 7px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--surface);
        box-shadow: 9px 6px 0 var(--surface);
        outline: 1px solid currentColor;
    }

    .mobile-filter-toggle[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--accent), transparent 42%);
        background: var(--surface-2);
    }

    [data-mobile-filter-panel]:not(.is-open) {
        display: none !important;
    }

    .catalog-mobile-filter-toggle {
        grid-column: 1 / -1;
    }

    .catalog .filters.is-open {
        display: block;
    }

    .directory-filter-panel.is-open {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    /* Keep taste overlays fully contained by narrow landing cards. */
    .home-category-list .seed-type-product > .seed-type-product-media {
        overflow: hidden !important;
        isolation: isolate;
    }

    .home-category-list .seed-type-product .seed-type-image-tastes {
        right: 6px;
        bottom: 6px;
        left: 6px;
        display: flex;
        width: auto;
        max-width: none;
        justify-content: center;
        gap: 4px;
        padding: 4px 2px;
        overflow: hidden;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 48%, transparent);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        transform: none;
    }

    .home-category-list .seed-type-product .seed-type-image-tastes .sensory-card-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .home-category-list .seed-type-product .seed-type-image-tastes .sensory-card-icon img {
        padding: 0 !important;
    }
}

@media (max-width: 700px) {
    .brands-hero,
    .terpenes-hero,
    .effects-hero,
    .taxonomy-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .brands-guide,
    .terpenes-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-directory-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 22px 0 !important;
    }

    .brand-directory-media {
        width: 100% !important;
        height: auto !important;
        max-height: 240px;
        aspect-ratio: 16 / 9 !important;
        padding: 12px !important;
    }

    .brand-directory-copy p {
        display: -webkit-box;
        max-width: none;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
    }

    .brand-directory-copy .brand-strain-preview {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .brand-directory-action {
        grid-column: 1 !important;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-top: 0;
        text-align: left;
    }

    .brands-pagination,
    .brands-pagination > div {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .terpenes-grid,
    .effects-grid,
    .taxonomy-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .terpene-directory-card,
    .effect-directory-card,
    .taxonomy-card {
        min-width: 0;
        padding: 18px;
    }

    .terpene-directory-card > header,
    .effect-directory-card > header {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .terpene-number,
    .effect-number {
        display: none;
    }

    .terpene-image,
    .effect-symbol {
        width: 58px;
        height: 58px;
    }

    .terpene-strains,
    .effect-strains {
        grid-template-columns: minmax(0, 1fr);
    }

    .taxonomy-card-media,
    .taxonomy-card-placeholder {
        aspect-ratio: 16 / 9;
    }

    .taxonomy-card-body {
        padding: 18px;
    }

    .taste-strain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .home-category-list .seed-type-product .seed-type-image-tastes .sensory-card-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
    }

    .taste-strain-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-directory-action {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Landing seed-type cards use the artwork itself without a pill or icon tile. */
.home-category-list .seed-type-product .seed-type-image-tastes {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.home-category-list .seed-type-product .seed-type-image-tastes .sensory-card-icon {
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}