Height dinâmico em 'carrinho de produtos'

Eu tenho uma div que serve como um carrinho de produtos, ela fica fixa no topo da tela onde só aparece o subtotal de todos os produtos escolhidos e ao clicar sobre a div, ela faz um efeito de slide para baixo e mostra todos os produtos.

Eu fiz o efeito do slide com animação no css, e eu deixo a div fixa no topo com Top negativo, de acordo com o tamanho da div, por exemplo, top: -370px. O problema é que o tamanho da div é dinâmico, aumenta conforme vai sendo adicionados produtos,  então mesmo com o top negativo, a div não 'esconde' todos os produtos. Já tentei ir mudando a propriedade top conforme os botões de adicionar produto são clicados, o que dá certo, porém não sei como mudar o top da animação que faz descer e subir a div. Alguém sabe se tem como mudar essa propriedade ou se há uma forma melhor de fazer esse efeito?

Pra ficar mais fácil o entendimento: https://jsfiddle.net/84rczeds/2/