How to customize specific Leaflet CSS class

I'm working on a Leaflet map and have successfully customized most of the pop-ups using the suggestions here:

How would I customise the look and feel of the leaflet popup?

My point layer is referencing a custom class imported from a .css file:

.bindPopup(content, {'className' : 'PastryPopUp'})

My .css file contains:

.PastryPopUp .leaflet-popup-tip, .PastryPopUp .leaflet-popup-content-wrapper { background: #f88479; color: #e6eee8; border: 5px dotted #208AAE } .PastryPopUp .leaflet-popup-close-button { color: #208AAE; }

The leaflet-popup-content-wrapper and leaflet-popup-tip-container classes are behaving how I would like, but I've been unable to have the leaflet-popup-close-button recognize the updated color.

It doesn't seem to make a difference whether I reference it as leaflet-popup-close-button or leaflet-popup-close-button a in the .css file.