Make counter vanish when no items in wishlist

Hi,

I customised the wishlist product counter in the menu and set it to show how many products there are in the wishlist.

.wishlist_products_counter_number {
width: 21px;
height: 21px;
background: #e95600;
border-radius: 100%;
color: #fff;
position: relative;
top: -13px;
font-size: 12px;
line-height: 22px;
right: 8px;
margin-right: -15px;
}

However, when there are no items instead of just disappearing the orange background circle stays there with no text.

How can I make it disappear?

Thanks