наследование размера шрифта css не применяется

У меня есть структура, как следует

<div class="panel">
    <div class="product">
        <div class="title">My little pony</div>
    </div>
</div>

и в заголовке div установлен его размер шрифта, но также и панель div.

.panel {
    font-size: 0.89em;
}
.product .title {
    font-size: 1em;
    font-weight: bold;
    height: 3.8em;
    line-height: 1.2em;
}

Когда я смотрю на это в браузере, кажется, что размер шрифта для класса панели применяется к заголовку div, firebug показывает стиль панели как перечеркнутый, но при переключении размера шрифта в div раздела он не делает разница до размера.

Если я переключу шрифт класса панели, то я могу увидеть это изменение, которое я ожидаю.

Что происходит здесь, я пропущу что-то очевидное?

Примечание: css упрощен

скрипка