.search {
    display: flex;

    input {
        padding: .75rem 1rem;
        width: 480px;
        border: 0;
        border-radius: 4px 0 0 4px;
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--color-grey);
        height: 45px;

    }

    #category-search-input:focus,
    #category-search-input:focus-visible {
        outline: none;
        box-shadow: none; /* some browsers use shadow instead of border */
        border: none;
    }


    #category-search-input::placeholder {
        color: var(--color-light-grey);
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 1;
        align-self: center;
    }

    button {
        background: var(--color-blue);
        border: 0;
        border-radius: 0 4px 4px 0;
        height: 45px;
        width: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 8px;
    }

    button:hover {
        background: var(--color-dark-purple);
    }

    button .ph {
        font-size: 1.75rem;
    }

    button .ph::before {
        color: var(--color-off-white);
    }
}