.sav-ingredient-ampel {
  --sav-green: #e5f2e8;
  --sav-green-border: #558968;
  --sav-yellow: #fff2c9;
  --sav-yellow-border: #b68a20;
  --sav-red: #fae3df;
  --sav-red-border: #a34a3b;
  --sav-gray: #ececef;
  --sav-gray-border: #767680;
  --sav-ink: #3e473f;
  --sav-line: #d8d5ce;
  color: var(--sav-ink);
  margin-block: 1.5rem;
}

.sav-ingredient-ampel * { box-sizing: border-box; }
.sav-ia__intro { max-width: 76ch; margin: 0 0 1rem; }
.sav-ia__legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.5rem; }
.sav-ia__badge { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; font-size: .88em; font-weight: 650; line-height: 1.3; padding: .28rem .68rem; }
.sav-ia__badge--safe { background: var(--sav-green); border-color: var(--sav-green-border); color: #244b31; }
.sav-ia__badge--limited { background: var(--sav-yellow); border-color: var(--sav-yellow-border); color: #5b4811; }
.sav-ia__badge--avoid, .sav-ia__badge--toxic { background: var(--sav-red); border-color: var(--sav-red-border); color: #66271e; }
.sav-ia__badge--unknown { background: var(--sav-gray); border-color: var(--sav-gray-border); color: #3e3e47; }

.sav-ia__search { max-width: 58rem; margin: 1.3rem 0 .75rem; }
.sav-ia__search label { display: block; font-weight: 700; margin-bottom: .45rem; }
.sav-ia__search-row { display: flex; gap: .5rem; }
.sav-ia__query { flex: 1; min-width: 0; border: 1px solid #8f928d; border-radius: 5px; background: #fff; color: #222; font: inherit; padding: .72rem .85rem; }
.sav-ia__query:focus { outline: 3px solid rgba(79, 119, 91, .25); border-color: #496e54; }
.sav-ia__clear { min-width: 2.8rem; border: 1px solid #777; border-radius: 5px; background: #fff; color: #333; cursor: pointer; font: inherit; font-size: 1.25rem; }
.sav-ia__clear:hover, .sav-ia__letter:hover { background: #f1f0ec; }
.sav-ia__hint { font-size: .9em; margin: .45rem 0 0; }
.sav-ia__count { font-size: .95em; font-weight: 700; margin: 1rem 0 .65rem; }

.sav-ia__letters { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 1.2rem; }
.sav-ia__letter { min-width: 2.1rem; border: 1px solid var(--sav-line); border-radius: 4px; background: #fff; color: inherit; cursor: pointer; font: inherit; padding: .32rem .5rem; }
.sav-ia__letter.is-active { border-color: #496e54; background: #e8eee8; font-weight: 700; }

.sav-ia__group { margin: 1.2rem 0 1.5rem; scroll-margin-top: 2rem; }
.sav-ia__group > h3 { border-bottom: 1px solid var(--sav-line); font-size: 1.25rem; margin: 0 0 .45rem; padding: 0 0 .25rem; }
.sav-ia__item { border-bottom: 1px solid var(--sav-line); }
.sav-ia__item summary { align-items: center; cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem .8rem; list-style: none; padding: .78rem .25rem; }
.sav-ia__item summary::-webkit-details-marker { display: none; }
.sav-ia__item summary::before { content: '+'; color: #4b6552; font-weight: 700; width: .8rem; }
.sav-ia__item[open] summary::before { content: '−'; }
.sav-ia__item-name { font-weight: 700; }
.sav-ia__item-body { padding: 0 .5rem 1rem 1.55rem; }
.sav-ia__detail { margin: .65rem 0; }
.sav-ia__detail h4 { font-size: 1rem; margin: 0 0 .2rem; }
.sav-ia__detail p { margin: 0; }
.sav-ia__detail ul { margin: .15rem 0 0 1.2rem; }
.sav-ia__similar, .sav-ia__empty { border-left: 4px solid #777; margin: .7rem 0; padding: .6rem .85rem; background: #f4f3f0; }
.sav-ia__safety { border: 1px solid var(--sav-line); border-radius: 5px; margin: 2rem 0 0; padding: .6rem .85rem; }
.sav-ia__safety summary { cursor: pointer; font-size: 1.08em; font-weight: 700; padding: .3rem; }
.sav-ia__safety-body { padding: .25rem .35rem .5rem; }
.sav-ia__safety-body section { margin: 1rem 0; }
.sav-ia__safety-body h3 { font-size: 1rem; margin: 0 0 .25rem; }
.sav-ia__safety-body p { margin: 0; }

@media (max-width: 600px) {
  .sav-ia__legend { gap: .35rem; }
  .sav-ia__badge { font-size: .82em; }
  .sav-ia__item summary { align-items: flex-start; }
}