@layer components {
    .search-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        align-items: end;
        padding: var(--space-4);
        background: var(--haze);
        border-radius: var(--radius-l);
        margin-block-end: var(--space-3);
    }

    .search-bar .field {
        display: grid;
        gap: var(--space-1);
    }

    .search-bar .btn {
        min-height: 48px;
    }

    @media (min-width: 720px) {
        .search-bar {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
        }
    }

    .search-kbd-hint {
        margin-block-end: var(--space-5);
    }

    .search-kbd-hint kbd {
        font-family: var(--font-data);
        font-size: 0.85em;
        padding: 1px 6px;
        border: 1px solid var(--line);
        border-block-end-width: 2px;
        border-radius: var(--radius-s);
        background: var(--paper);
    }

    .search-single-cta {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        min-height: var(--touch-target);
        background: var(--wheat-tint);
        border: 1px solid var(--wheat);
        border-radius: var(--radius-m);
        font-weight: 600;
        text-decoration: none;
        color: var(--soil);
    }

    .search-single-cta:hover,
    .search-single-cta:focus-visible {
        box-shadow: var(--shadow-1);
    }

    .search-single-cta .icon {
        color: var(--sky-deep);
    }

    .search-section {
        display: grid;
        gap: var(--space-3);
        padding-block-start: var(--space-4);
        border-block-start: 1px solid var(--line);
    }

    .search-section-head {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .search-section-head h2 {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--size-h3);
    }

    .search-section-head .icon {
        color: var(--sky);
    }

    .search-section-all {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
        font-weight: 600;
    }
}