content in FF not applying hover CSS styles

by Johnathan Kent

HTML

<!-- Using spans inside a button because content in buttons MUST be phrasing content:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content

The spans are also beneficial here, so we can apply schema attributes for SEO in the future: http://www.schema.org/Product
-->

<button class="product">
    <span class="offer">
        <span class="product-name">Product</span>
        <span class="product-price">$5.99</span>
    </span>
    <span class="product-features">
        <span class="list-item">HOVER ME</span>
        <span class="list-item">List Item 2</span>
        <span class="list-item hover">what i want to happen when one of these is hovered</span>
    </span>
</button>

CSS

/* === SCROLL TO BOTTOM TO SEE EFFECT THAT DOES NOT APPLY IN FF === */
.product {
    display: block;
    border: none;
    background: green;
    color: #fff;
    position: relative;
    min-width:150px;
    cursor: pointer;
}
.product .offer {
    display: block;
    border: solid 1px green;
    margin: 5px;
    padding: 10px;
}
/* This hover effect applies when .product is hovered, and is NOT the probelm. */
.product:hover .offer {
    border: solid 1px #FFF;
}
.product-name {
    font-size: 1.3em;
    display: block;
}
.product-price {
    display: block;
    font-size: 2em;
    font-weight: bold;
}
.product-features {
    display: block;
}
.product-features .list-item {
    display: block;
    text-align: center;
    line-height: 30px;
    font-style: italic;
    padding: 2px;
    height:auto; /* in case a feature needs to be on two lines, don't cut off or hide the text */
}

/* what I want to happen */
.product-features .list-item.hover,
/* WAT: this doesn't work in FF */
.product:hover .list-item:hover {
    background: lightgreen;
    color: #000;
}