.sn-ingredients { max-width: 1280px; margin-inline: auto; }
.sn-ingredients__tools { display: grid; gap: .9rem; margin-bottom: 2rem; }
.sn-ingredients__search input { width: 100%; max-width: 30rem; min-height: 52px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--line, #E5DFE8); background: #fff; font: inherit; color: var(--wp--preset--color--ink, #2A2430); }
.sn-ingredients__search input::placeholder { color: #6D6578; }
.sn-ingredients__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sn-ingredients__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sn-ingredients__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sn-ingredients__grid { grid-template-columns: repeat(3, 1fr); } }
.sn-ing { border-radius: 30px; padding: 2rem 1.9rem 2rem; display: flex; flex-direction: column; gap: .2rem; transition: transform .45s cubic-bezier(.16,1,.3,1); background: #EDE7F2; color: var(--wp--preset--color--deep, #433856); }
.sn-ing:nth-child(5n+1) { background: #E8E1F0; } .sn-ing:nth-child(5n+2) { background: #F1E5E8; } .sn-ing:nth-child(5n+3) { background: #E2E5EE; } .sn-ing:nth-child(5n+4) { background: #EDE7F2; } .sn-ing:nth-child(5n) { background: #EFE8E1; }
.sn-ing:hover { transform: translateY(-5px); }
.sn-ing[hidden] { display: none; }
.sn-ing__icon { margin-bottom: 1.2rem; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.55); display: grid; place-items: center; }
.sn-ing__icon svg, .sn-ing__icon img { width: 54px; height: 54px; display: block; }
.sn-ing__img, .sn-ing__svg { width: 64px; height: 64px; display: block; object-fit: contain; }
.sn-ing__name { margin: 0; font-family: var(--wp--preset--font-family--quicksand, sans-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.15; }
.sn-ing__fn { margin: .3rem 0 0; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent, #6F5E92); }
.sn-ing__desc { margin: .8rem 0 0; color: #4A4256; font-size: 1rem; }
.sn-ing__inci { margin: .9rem 0 0; font-size: .8rem; color: #6D6578; font-style: italic; }
.sn-ingredients__empty { padding: 2rem 0; color: #5E566A; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }