Hover: ao passar o mouse em minha lista de produtos, nada acontece

Fala pessoal, tudo beleza?

Estou tentando utilizar o hover na lista de produtos, assim como foi feito com o menu de navegação. Entretanto, mesmo seguindo o mesmo código que foi passado em aula, o navegador não reconhece quando eu passo meu mouse pelos produtos.

Código HTML (referente aos produtos):

<main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                    <p class="produto-preco">R$ 35,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p class="produto-descricao">Corte e desenho progfissional de barba</p>
                    <p class="produto-preco">R$ 25,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="cabelo+barba.jpg">
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preco">R$ 45,00</p>
                </li>
            </ul>
       </main>

Código CSS

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;