.ingredient-cards,ingredient-cards-section{display:block;position:relative;overflow:visible;--sticky-header-offset: calc(var(--header-height, 72px) - 1px)}.ingredient-cards__tabs-shell{position:sticky;top:var(--sticky-header-offset, var(--header-height, 72px));z-index:12;width:100%;padding-inline:var(--page-margin, 16px);padding-block-start:12px;padding-block-end:12px;background-color:#9bcbeb;touch-action:pan-y}@media screen and (min-width:750px){.ingredient-cards__tabs-shell{padding-block-start:16px;padding-block-end:16px}}.ingredient-cards__tabs-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:50%;z-index:-1;width:100%;transform:translate(-50%);pointer-events:none;background:linear-gradient(180deg,#9bcbebd9,#9bcbeb8c);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ingredient-cards__tabs-wrap{position:relative;z-index:1;width:100%;max-width:var(--wide-page-width);margin-inline:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-y;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;text-align:center}.ingredient-cards__tabs-wrap.is-dragging{cursor:grabbing;scroll-behavior:auto}.ingredient-cards__tabs-wrap::-webkit-scrollbar{display:none}.ingredient-cards__tabs{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;width:100%;margin-inline:0;padding:6px;border-radius:100px;border:.5px solid var(--Blue-White-Gradient, #9BCBEB);background:#f9f9f94d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:fit-content}.ingredient-cards__tab{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;padding:12px;border:0;border-radius:999px;font-weight:500;font-size:12px;line-height:14px;background:transparent;color:var(--ingredient-cards-tab-inactive-color, #003550);font-family:var(--font-body--family);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease}.ingredient-cards__tab.is-active{background:var(--ingredient-cards-tab-active-bg, #ffffff);color:var(--ingredient-cards-tab-active-color, #003550)}.ingredient-cards__tab-label{position:relative;z-index:1}@media screen and (max-width:749px){.ingredient-cards__tabs-shell{padding-inline:0}.ingredient-cards__tabs-wrap{scroll-padding-inline:var(--page-margin, 16px);padding-inline:var(--page-margin, 16px)}}.ingredient-cards__list{display:flex;flex-direction:column;width:100%}.ingredient-cards__concern{position:relative;width:100%;overflow:visible;scroll-margin-top:var(--ingredient-cards-scroll-offset, calc(var(--header-height, 72px) + 80px))}.ingredient-cards__list>.ingredient-cards__concern+.ingredient-cards__concern{margin-block-start:var(--ingredient-cards-category-gap-mobile, 0)}.ingredient-cards__concern-background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.ingredient-cards__concern-background-image{width:100%;height:100%;object-fit:cover;object-position:center}.ingredient-cards__concern-background-image--desktop{display:none}.ingredient-cards__concern-background-image--mobile{display:block}.ingredient-cards__concern-container{position:relative;z-index:1;width:100%;max-width:var(--wide-page-width);margin-inline:auto;padding-inline:var(--page-margin, 16px)}.ingredient-cards__concern-head{display:flex;align-items:center;gap:6px;width:100%;margin-block-end:16px}.ingredient-cards__concern-pill{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;color:var(--ingredient-cards-name-color, #003550);font-size:12px;line-height:14px;white-space:nowrap;border-radius:999px;border:.5px solid var(--Blue-White-Gradient, #9BCBEB);background:#f9f9f94d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ingredient-cards__concern-line{flex:1 1 auto;min-width:0;height:1px;background:var(--gry-white, #F9F9F9)}.ingredient-cards__concern:nth-child(2n) .ingredient-cards__concern-line{background:linear-gradient(180deg,#9bcbeb,#f9f9f9)}.ingredient-cards__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ingredient-cards-gap-mobile, 16px);align-items:stretch}.ingredient-card{position:relative;height:100%;min-height:100%;perspective:1400px}.ingredient-card__toggle{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:29px;height:37px;padding:0;border:0;border-radius:100px;border:.5px solid var(--ingredient-cards-toggle-border, #9bcbeb);background:var(--ingredient-cards-toggle-bg, linear-gradient(180deg, #9bcbeb 0%, #f9f9f9 100%));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.ingredient-card__toggle :focus-visible{outline:none}.ingredient-card__toggle-icon{display:flex;width:14px;height:14px;color:inherit;transition:transform .35s ease}.ingredient-card__toggle-icon svg{width:100%;height:100%}.ingredient-card.is-flipped .ingredient-card__toggle-icon{transform:rotate(45deg)}.ingredient-card__inner{position:relative;display:grid;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.ingredient-card.is-flipped .ingredient-card__inner{transform:rotateY(180deg)}.ingredient-card__face{grid-area:1 / 1;display:flex;flex-direction:column;width:100%;min-width:0;padding:12px;border-radius:var(--ingredient-cards-card-radius-mobile, 24px);background:var(--ingredient-cards-card-bg, #ffffff);backface-visibility:hidden;-webkit-backface-visibility:hidden}.ingredient-card__face--front{position:relative;z-index:1}.ingredient-card__face--back{z-index:0;transform:rotateY(180deg);pointer-events:none}.ingredient-card__face--back>*:is(.ingredient-card__name){max-width:calc(100% - 37px)}.ingredient-card.is-flipped .ingredient-card__face--front{pointer-events:none}.ingredient-card.is-flipped .ingredient-card__face--back{z-index:2;pointer-events:auto}.ingredient-card__media{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin-block-end:12px}.ingredient-card__media-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ingredient-card__media-slot .metafield-file_reference,.ingredient-card__media-slot .metafield-file_reference img,.ingredient-card__image,.ingredient-card__media-slot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:var(--ingredient-cards-image-blend, multiply)}.ingredient-card__media-slot--placeholder,.ingredient-card__found-in-thumb--placeholder{display:block;background:linear-gradient(180deg,#e8f4fc,#d7eef8);border-radius:12px}.ingredient-card__media-slot--placeholder{width:72%;height:100%;border-radius:20px}.ingredient-card__name{margin:0 0 4px;color:var(--ingredient-cards-name-color, #003550);font-size:12px;font-weight:500;line-height:14px;font-family:var(--font-body--family)}.ingredient-card__face--back .ingredient-card__name{font-size:14px;line-height:18px}.ingredient-card__description{flex:1 1 auto;margin:0;color:var(--ingredient-cards-description-color, #003550);font-size:12px;line-height:14px}.ingredient-card__long-description{flex:1 1 auto;min-height:0;color:var(--ingredient-cards-description-color, #003550);font-size:12px;font-weight:400;line-height:14px}.ingredient-card__long-description>:first-child{margin-top:0}.ingredient-card__long-description>:last-child{margin-bottom:0}.ingredient-card__found-in{margin-block-start:auto;padding-block-start:20px;min-width:0;max-width:100%}.ingredient-card__found-in-label{margin:0 0 6px;color:var(--ingredient-cards-name-color, #003550);font-size:12px;font-weight:500;line-height:14px}.ingredient-card__found-in-list{display:flex;flex-wrap:nowrap;gap:16px;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;scrollbar-width:none}.ingredient-card__found-in-list.is-dragging{cursor:grabbing;scroll-behavior:auto;-webkit-user-select:none;user-select:none}.ingredient-card__found-in-list::-webkit-scrollbar{height:4px}.ingredient-card__found-in-list::-webkit-scrollbar-track{background:transparent}.ingredient-card__found-in-list::-webkit-scrollbar-thumb{background:#9bcbeb;border-radius:999px}.ingredient-card__found-in-item{flex:0 0 auto;width:60px}.ingredient-card__found-in-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}.ingredient-card__found-in-thumb{display:block;width:32px;height:32px;object-fit:cover;object-position:center;background:#eef6fb;border-radius:4px}.ingredient-card__found-in-name{display:-webkit-box;overflow:hidden;width:100%;color:var(--ingredient-cards-description-color, #666B7B);font-size:10px;line-height:12px;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:60px}@media screen and (min-width:750px){.ingredient-cards__tabs{padding:8px}.ingredient-cards__tab{padding:11px 16px;font-size:14px;line-height:18px}.ingredient-cards__list>.ingredient-cards__concern+.ingredient-cards__concern{margin-block-start:var(--ingredient-cards-category-gap, 0)}.ingredient-cards__concern-background-image--desktop{display:block}.ingredient-cards__concern-background-image--mobile{display:none}.ingredient-cards__concern-head{margin-block-end:32px;gap:6px}.ingredient-cards__concern-pill{font-size:14px;line-height:18px;padding:12px 16px}.ingredient-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ingredient-cards-gap, 24px)}.ingredient-card__toggle{top:24px;right:24px;width:37px;height:56px}.ingredient-card__face{padding:24px;border-radius:var(--ingredient-cards-card-radius, 24px)}.ingredient-card__media{height:140px;width:140px}.ingredient-card__name{font-size:16px;line-height:18px}.ingredient-card__face--back .ingredient-card__name{font-size:20px;line-height:24px}.ingredient-card__long-description{font-size:12px;line-height:16px}.ingredient-card__face--back .ingredient-card__long-description{font-size:14px;line-height:18px}.ingredient-card__face--back>*{max-width:calc(100% - 53px)}.ingredient-card__found-in-label{font-size:14px;line-height:18px}}@media screen and (min-width:1200px){.ingredient-cards__grid{grid-template-columns:repeat(var(--ingredient-cards-columns, 4),minmax(0,1fr))}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/ingredient-cards.css.map */