Styling the shopping cart icon and quantity

Site URL: https://capriva.shop

Hey,

is it possbile to style the shopping cart icon without actually replacing it? I know you can add custom icons with CSS but this just brings me more trouble because I would need seperate versions for dark and ligth backgrounds. 

The standard shopping cart icon is fine for me, I just would like to have a bold version of it.

I also want change the color and background of the little quantity numbers besides the shopping cart. I want to have a circle around the number (still deciding on the color) and want the text to be white.

I managed to kinda get the circle right with the following CSS, but I dont now how to edit the text. 

.icon-cart-quantity {
  display: inline-block;
  background-color: green;
    vertical-align: top;
    min-width: 1em;
    margin-top: 0em;
    margin-left: 1em;
    border-radius: 1em;
    padding: .5em;

}

Would be greatly appreciated if someone could help out with this!

Add to Design > Custom CSS

/* bold cart icon */
svg.icon.icon--cart {
    stroke-width: 3;
}
/* quantity color */
span.sqs-cart-quantity {
    color: red;
}

Is it possible to have a pop up with a preview of the item that has been added to the cart?

Example attached: