.interactive-ingredients{overflow:hidden}.interactive-ingredients__mobile-layout{display:none}.interactive-ingredients__desktop-layout{display:block}@media screen and (max-width: 749px){.interactive-ingredients__mobile-layout{display:block}.interactive-ingredients__desktop-layout{display:none}}.interactive-ingredients__text-item{display:flex;align-items:stretch;column-gap:20px}.interactive-ingredients__grid{align-items:stretch;gap:6rem}@media screen and (max-width: 1024px) and (min-width: 750px){.interactive-ingredients__grid{gap:4rem}}.interactive-ingredients--reverse .interactive-ingredients__grid{direction:rtl}.interactive-ingredients--reverse .interactive-ingredients__text-item,.interactive-ingredients--reverse .interactive-ingredients__media-item{direction:ltr}.interactive-ingredients__content{max-width:70rem;display:flex;flex-direction:column;height:100%}.interactive-ingredients__heading{margin-bottom:2rem;font-size:13px;font-weight:500}.interactive-ingredients__description{margin-bottom:2.4rem;font-size:15px;opacity:.8;color:#000}.interactive-ingredients__list{margin-bottom:0;flex:1}.ingredient-item{transition:all .3s ease;cursor:pointer}.ingredient-button{display:flex;align-items:flex-start;width:100%;padding:1.5rem 0;background:transparent;border:none;text-align:left;transition:all .3s ease;color:#000;pointer-events:none}.ingredient-item:hover .ingredient-button,.ingredient-item.hover .ingredient-button{color:#000;transform:translate(.5rem)}.ingredient-number{font-size:13px;font-weight:400;min-width:3rem;margin-right:1.5rem;color:#000;margin-top:-1px}.ingredient-details{flex:1}.ingredient-name{font-size:13px;font-weight:400;margin:0 0 .4rem;letter-spacing:.1rem}.ingredient-benefit{margin:0;font-size:13px;opacity:.8;font-weight:400}.ingredient-item:hover .ingredient-name,.ingredient-item.hover .ingredient-name{color:#000}.ingredient-item:hover .ingredient-benefit,.ingredient-item.hover .ingredient-benefit{opacity:1}.interactive-ingredients__media-item{position:relative}.interactive-ingredients__media-container{position:relative;width:100%;height:0;padding-bottom:100%;overflow:hidden;background-color:rgba(var(--color-foreground),.04)}.interactive-ingredients__media{position:absolute;top:0;left:0;width:100%;height:100%;display:none;transition:opacity .4s ease-in-out}.interactive-ingredients__media.active,.interactive-ingredients__media.default-image.active{display:block;opacity:1}.interactive-ingredients__media img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .3s ease}.interactive-ingredients__media img.loaded,.interactive-ingredients__media img[loading=eager]{opacity:1}.interactive-ingredients__placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#000;background-color:rgba(var(--color-foreground),.04);border-radius:.8rem}.interactive-ingredients__placeholder.active{display:flex}.interactive-ingredients__placeholder svg{max-width:60px;max-height:60px;margin-bottom:1rem}.interactive-ingredients__placeholder p{margin:0;font-size:1.4rem}.interactive-ingredients__button{margin-top:3rem;padding-top:2rem;align-self:flex-start}@media screen and (max-width: 749px){.interactive-ingredients__mobile-layout{padding:0 1.5rem 5rem}.interactive-ingredients__mobile-header{display:flex;gap:1.5rem;margin-bottom:3rem;align-items:stretch}.interactive-ingredients__mobile-text{flex:0 0 50%}.interactive-ingredients__mobile-image{flex:0 0 50%;position:relative}.interactive-ingredients__mobile-image .interactive-ingredients__media,.interactive-ingredients__mobile-image .interactive-ingredients__placeholder{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.interactive-ingredients__mobile-image .interactive-ingredients__media{display:none;transition:opacity .4s ease-in-out}.interactive-ingredients__mobile-image .interactive-ingredients__media.active{display:block;opacity:1}.interactive-ingredients__mobile-image img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .3s ease}.interactive-ingredients__mobile-image img.loaded,.interactive-ingredients__mobile-image img[loading=eager]{opacity:1}.interactive-ingredients__mobile-ingredients{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:0;margin-bottom:3rem}.interactive-ingredients__mobile-ingredients .ingredient-item{cursor:pointer}.interactive-ingredients__mobile-ingredients .ingredient-button{padding:1.2rem 1rem 1.2rem 0;pointer-events:auto}.interactive-ingredients__mobile-ingredients .ingredient-number{min-width:2rem;margin-right:1rem;font-size:12px}.interactive-ingredients__mobile-ingredients .ingredient-name{font-size:12px;margin-bottom:.2rem}.interactive-ingredients__mobile-ingredients .ingredient-benefit{font-size:11px;line-height:1.3}.interactive-ingredients__mobile-button{display:flex;justify-content:center;margin-top:2rem}.interactive-ingredients__mobile-text .interactive-ingredients__heading{font-size:13px;margin-bottom:1rem}.interactive-ingredients__mobile-text .interactive-ingredients__description{font-size:14px;margin-bottom:0}}.ingredient-item{animation:fadeInUp .6s ease forwards;animation-delay:calc(var(--animation-order) * .1s)}.ingredient-item:nth-child(1){--animation-order: 1}.ingredient-item:nth-child(2){--animation-order: 2}.ingredient-item:nth-child(3){--animation-order: 3}.ingredient-item:nth-child(4){--animation-order: 4}.ingredient-item:nth-child(5){--animation-order: 5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}.ingredient-item:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px;border-radius:.4rem}.interactive-ingredient-image{transition:opacity .2s ease;opacity:0}.interactive-ingredient-image.loaded,.interactive-ingredient-image[loading=eager],.interactive-ingredients__media.default-image .interactive-ingredient-image{opacity:1}@media (hover: none) and (pointer: coarse){.ingredient-item{cursor:pointer}.ingredient-button{pointer-events:auto}.ingredient-item:active .ingredient-button{transform:translate(.25rem);transition:transform .1s ease}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-interactive-ingredients.css.map */