Depois de muito tempo batendo cabeça e 1001 soluções frustradas...
Primeio iniciei incluindo o "display: none" ao style.css para que a .lista não estivesse na página até que pressionado o botão:
.lista {
padding: 20px;
list-style-type: none;
border: 4mm ridge rgba(234, 122, 11, 0.992);
display: none;
}
O segundo passo foi adicionar a classe "botao" a tag que iria executar a função de mostrar/esconder o estoque:
<button class="botao" onclick="mostraTintas(this)">Aluratintas em estoque:</button>
Finalizei executando um addEventListener no botão alterando o display entre none e block:
const botao = document.querySelector(".botao")
const tintas = document.querySelector(".lista")
botao.addEventListener('click', () => {
if(tintas.style.display === "none") {
tintas.style.display = "block";
} else {
tintas.style.display = "none";
}
})