#search__form {
    padding: 0 16px;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-1);
    border-radius: 100px;
}

    #search__form-submit,
    #search__form-reset {
        width: 24px;
        height: 24px;
        display: flex;
    }

    #search__form-reset {
        display: none;
    }

    #main-header__search.active #search__form-reset {
        display: flex;
    }

        #search__form-submit > img,
        #search__form-reset > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

    #search__form-input {
        flex-grow: 1;
        font-size: 16px;
        font-weight: 400;
    }

#search__results {
    width: 100%;
    display: none;
    overflow-y: auto;
}

#main-header__search.active #search__results {
    display: flex;
}

    #search__results-empty {
        display: none;
    }

    #searc__results-empty.active {
        display: flex;
    }

    #search__results-inner {
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 16px;
    }

    #search__results-inner.active {
        display: flex;
    }

        #search__results-inner > span {
            font-size: 14px;
            font-weight: 500;
            color: var(--font-2);
        }

        #search__results-categories {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 16px;
            font-weight: 600;
        }

        #search__results-divider {
            width: 100%;
            height: 1px;
            background-color: var(--border-1);
        }

        #search__results-products {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, 243px);
            justify-content: space-between;
            gap: 24px;
        }

@media screen and (max-width: 1023px) {
    #search__form {
        height: 40px;
    }
}