#ingredient-glossary-container { width: 100%; }
.glossary-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.glossary-filters .filter-btn { background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 16px; cursor: pointer; border-radius: 20px; transition: all 0.2s ease-in-out; color: #333; display: flex; align-items: center; justify-content: center; }
.glossary-filters .filter-btn:hover { background-color: #e0e0e0; }
.glossary-filters .filter-btn.active { background-color: #008d36; color: #fff; border: none; }
.letter-group-wrapper { display: grid; grid-template-columns: 80px 1fr; gap: 20px; margin-bottom: 30px; }
.letter-group-wrapper.hidden { display: none; }
.letter-heading { font-size: 4em; font-weight: bold; color: #008d36; position: sticky; top: 20px; align-self: start; padding-top: 20px; }
.ingredients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ingredient-card { border: 1px solid #eee; border-radius: 8px; padding: 20px; transition: opacity 0.3s ease-in-out; }
.ingredient-card.hidden { display: none; }
.ingredient-card .ingredient-title { margin: 0 0 4px 0; font-size: 1.2em; }
.ingredient-card .ingredient-title a { text-decoration: none; color: #101020 !important; }
.ingredient-card .ingredient-title a:hover { color: #008d36 !important; }
.ingredient-card .ingredient-alternate-name { margin: 0 0 8px 0; font-size: 0.6em; color: #555; font-weight: 500; }
.ingredient-card .ingredient-concerns-list { margin: 0; font-size: 0.9em; color: #777; }
@media (max-width: 767px) {
    .letter-group-wrapper { display: block; grid-template-columns: 1fr; }
    .letter-heading { position: static; font-size: 2.5em; margin-bottom: 15px; height: auto; color: #008d36; }
}