Como manter alteraçõs do "active" fixa?

Olá Vitor, tudo bem com você?

Então, normalmente esse comportamento a gente atinge utilizando o javascript habilitando ou desabilitando uma classe dentro do nosso elemento, mas podemos simular mais ou menos esse comportamento, a primeira é colocar em volta da li uma tag <a>, da seguinte maneira:

<a href="#a" type="">
    <li>
        <h2>Barba</h2>
        <img src="barba.jpg">
        <p class="produto-descricao">Corte e desenho profissional de barba</p>
        <p class="produto-preco">R$ 18,00</p>
    </li>
</a>

A tag <a> quando incorporada com href e type ela funciona como um botão (mas ai não temos os estilos padrão de um botão) , e o botão tem um pseudo elemento chamado focus, que é ativado quando clicamos

Dado isso podemos criar 2 css:

.produtos a:focus li {
    border-color: #088C19;    
}

Entretanto quando clicamos em um botão ele também ativa o visted que deixa os textos azuis quando clicamos em um link :)

.produtos a:visited h2, .produtos a:visited p {
    color: black;
}

Então eu estou trocando o texto de azul para preto, isso não é uma boa prática, o ideal mesmo como eu disse seria fazer via javascript, inclusive fazemos nas primeiras partes do curso de javascript: programando na linguagem da web

Mas dessa maneira já irá funcionar da maneira que você gostaria :)

Abraços e Bons Estudos!

Nossa muito obrigado, entendi! Agora que sei que não é uma boa prática eu não irei persistir no erro, mas só de ter esse conhecimento ja compensou muito e jaja eu chego no curso de javascript. Pretendo seguir todos os cursos disponiveis (que se complementam), de HTML, CSS, JAVASCRIPT, REACT, REACT NATIVE e NODE.JS e talvez ANGULAR (talvez), espero que em 2 meses eu ja consiga pelo menos fazer trabalhos freelancers oferecidos em algumas plataformas. Estou fazendo de 2 a 4 horas de estudo e prática por dia com esse interesse, espero conseguir...