.ingredient-banner{--ib-bg: #f6f2e9;--ib-panel: #faf8f2;--ib-ink: #1e2f22;--ib-ink-soft: #4b5a4e;--ib-accent: #2f4a34;--ib-accent-soft: #e7ecdf;--ib-line: rgba(30, 47, 34, .1);--ib-shadow: 0 20px 45px rgba(30, 47, 34, .08);--ib-shadow-hover: 0 24px 55px rgba(30, 47, 34, .16);--ib-radius-lg: 28px;--ib-radius-md: 18px;--ib-radius-sm: 12px;--ib-gap: clamp(24px, 4vw, 56px);--ib-pad: clamp(24px, 4vw, 56px);--ib-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;--ib-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;background:var(--ib-bg);padding:clamp(32px,6vw,80px) clamp(16px,4vw,32px);font-family:var(--ib-font-body);color:var(--ib-ink);-webkit-font-smoothing:antialiased}.ingredient-banner__inner{max-width:1600px;margin:0 auto;border-radius:var(--ib-radius-lg);padding:var(--ib-pad);display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}.ingredient-banner__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ib-gap);align-items:center}.ingredient-banner__content{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.ingredient-banner__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--ib-accent-soft);color:var(--ib-accent);font-size:13px;font-weight:600;letter-spacing:.02em}.ingredient-banner__badge-icon{width:14px;height:14px;flex-shrink:0}.ingredient-banner__heading{font-family:var(--ib-font-heading);font-weight:700;font-size:clamp(32px,4vw,52px);line-height:1.12;color:var(--ib-accent);margin:0}.ingredient-banner__description{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--ib-ink-soft);max-width:46ch}.ingredient-banner__description p{margin:0}.ingredient-banner__media{position:relative;border-radius:var(--ib-radius-md);overflow:hidden;aspect-ratio:4 / 3;background:var(--ib-accent-soft)}.ingredient-banner__image{width:100%;height:100%;object-fit:cover;display:block}.ingredient-banner__image--placeholder{display:flex;align-items:center;justify-content:center}.ingredient-banner__image--placeholder .ingredient-banner__placeholder-svg{width:60%;height:60%;opacity:.5}.ingredient-banner__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}.ingredient-card{--ib-card-scale: 1;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--ib-panel);border:1px solid var(--ib-line);border-radius:var(--ib-radius-sm);padding:22px 16px 20px;cursor:pointer;font-family:inherit;text-align:center;transform:scale(var(--ib-card-scale));transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease,transform .24s cubic-bezier(.22,1,.36,1);will-change:transform}.ingredient-card:hover,.ingredient-card:focus-visible{--ib-card-scale: 1.03;border-color:var(--ib-accent);box-shadow:var(--ib-shadow-hover);outline:none}.ingredient-card:focus-visible{outline:2px solid var(--ib-accent);outline-offset:3px}.ingredient-card:active{--ib-card-scale: .98}.ingredient-card.is-active{border-color:var(--ib-accent);background:var(--ib-accent-soft);box-shadow:var(--ib-shadow-hover)}.ingredient-card__image-wrap{width:84px;height:75px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .32s cubic-bezier(.22,1,.36,1)}.ingredient-card:hover .ingredient-card__image-wrap{transform:rotate(-3deg) scale(1.04)}.ingredient-card__image{width:100%;height:100%;object-fit:cover;display:block}.ingredient-card__icon-fallback{width:34px;height:34px;color:var(--ib-accent)}.ingredient-card__title{font-size:19px;font-weight:600;color:var(--ib-ink);line-height:1.3;transition:color .2s ease}.ingredient-card.is-active .ingredient-card__title{color:var(--ib-accent)}@media(max-width:989px){.ingredient-banner__top{grid-template-columns:1fr}.ingredient-banner__media{order:-1;aspect-ratio:16 / 10}.ingredient-banner__content{align-items:flex-start}}@media(max-width:749px){.ingredient-banner__inner{padding:clamp(20px,6vw,32px);border-radius:var(--ib-radius-md)}.ingredient-banner__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ingredient-card{padding:18px 12px 16px}.ingredient-card__image-wrap{width:68px;height:68px}}@media(max-width:420px){.ingredient-banner__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}@media(prefers-reduced-motion:reduce){.ingredient-card,.ingredient-card__image-wrap{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/ingredient-banner.css.map */