.ingredient-grid{position:relative}.ingredient-grid__container{display:flex;flex-direction:column;gap:var(--roots-rhythm-body-content)}.ingredient-grid__header{display:flex;flex-direction:column}@media screen and (max-width:749px){.ingredient-grid__title+.ingredient-grid__intro{margin-top:calc(var(--roots-rhythm-heading-body) - var(--roots-rhythm-body-content))}.ingredient-grid__header{display:contents}.ingredient-grid__header-cta{order:1}}.ingredient-grid__header:not(:has(.ingredient-grid__title,.ingredient-grid__intro,.ingredient-grid__header-cta)){display:none}.ingredient-grid__title{margin:0}.ingredient-grid__description{margin:0;max-width:65ch;text-wrap:balance}.ingredient-grid__header-cta{--section-button-margin: 0px}.ingredient-grid__header-cta:empty{display:none}.ingredient-grid__tabs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--roots-gap-tight));padding-inline:var(--roots-gap-tight)}.ingredient-grid__tabs-scroll::-webkit-scrollbar{display:none}.ingredient-grid__tabs-list{display:flex;gap:var(--roots-gap-tight);list-style:none;margin:0;padding:0}.ingredient-grid__tab{flex:0 0 auto;display:flex;align-items:center;gap:var(--roots-gap-tight);min-height:2.75rem;padding:var(--roots-gap-tight) var(--roots-gap-relaxed);border:1px solid rgb(var(--color-foreground-rgb) / .2);border-radius:var(--roots-radius-rounded);background:transparent;font-family:var(--font-body--family, system-ui, sans-serif);font-size:.875rem;color:rgb(var(--color-foreground-rgb));cursor:pointer;white-space:nowrap;transition:background-color .2s ease-out,border-color .2s ease-out}.ingredient-grid__tab:has(.ingredient-grid__tab-image){padding-inline-start:var(--roots-gap-tight)}@media(hover:hover){.ingredient-grid__tab:hover{border-color:rgb(var(--color-foreground-rgb) / .45)}}.ingredient-grid__tab.is-active{background-color:rgb(var(--color-foreground-rgb) / .08);border-color:rgb(var(--color-foreground-rgb) / .55)}.ingredient-grid__tab:focus-visible{outline:2px solid rgb(var(--color-primary-rgb, var(--color-foreground-rgb)));outline-offset:2px}@media(forced-colors:active){.ingredient-grid__tab:focus-visible{outline:2px solid CanvasText;outline-offset:2px}.ingredient-grid__tab.is-active{border-color:Highlight}}.ingredient-grid__tab-image{width:2.5rem;height:2rem;object-fit:contain;border-radius:var(--roots-gap-micro)}.ingredient-grid__grid{display:grid;grid-template-columns:repeat(var(--ingredient-grid-columns-mobile, 2),minmax(0,1fr));gap:var(--roots-rhythm-items)}@media screen and (max-width:749px){.ingredient-grid__grid--carousel{grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--page-margin, 1rem));padding-inline:var(--page-margin, 1rem);scroll-padding-inline-start:var(--page-margin, 1rem);padding-block:var(--roots-gap-tight) var(--roots-gap-spacious);margin-block:calc(-1 * var(--roots-gap-tight)) calc(-1 * var(--roots-gap-spacious))}.ingredient-grid__grid--carousel::-webkit-scrollbar{display:none}.ingredient-grid__grid--carousel>.ingredient-grid__item{scroll-snap-align:start}.ingredient-grid__grid--carousel:focus-visible{outline:2px solid rgb(var(--color-primary-rgb, var(--color-foreground-rgb)));outline-offset:4px}}.ingredient-grid__item{display:flex;flex-direction:column;background-color:rgb(var(--color-background-rgb));border:var(--roots-card-border);border-radius:var(--roots-radius-rounded);box-shadow:var(--roots-shadow-card);overflow:hidden;text-align:left;color:inherit}.ingredient-grid__item--interactive{cursor:pointer;transition:var(--roots-card-transition)}.ingredient-grid__item[hidden]{display:none}.ingredient-grid__item-image-wrap{position:relative;width:100%;aspect-ratio:1 / 1;background-color:rgb(var(--color-foreground-rgb) / .05);overflow:hidden}.ingredient-grid__item-image{width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.22,1,.36,1)}@media(hover:hover){.ingredient-grid__item--interactive:hover{transform:var(--roots-card-lift);box-shadow:var(--roots-shadow-card-hover)}.ingredient-grid__item--interactive:hover .ingredient-grid__item-image{transform:scale(1.03)}}.ingredient-grid__item--interactive:focus-within{transform:var(--roots-card-lift);box-shadow:var(--roots-shadow-card-hover)}.ingredient-grid__item--interactive:focus-within .ingredient-grid__item-image{transform:scale(1.03)}.ingredient-grid__item-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgb(var(--color-foreground-rgb) / .3)}.ingredient-grid__item-placeholder svg{width:40%;height:40%}.ingredient-grid__item-info{margin-block-start:auto;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--roots-gap-tight);padding:var(--roots-rhythm-inset)}.ingredient-grid__item-text{flex:1;min-width:0}.ingredient-grid__item-name{margin:0}.ingredient-grid__item-subtitle{margin:var(--roots-rhythm-bonded) 0 0}.ingredient-grid__item-btn{position:absolute;bottom:var(--roots-gap-tight);right:var(--roots-gap-tight);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:rgb(var(--color-background-rgb));border:1px solid rgb(var(--color-foreground-rgb) / .2);border-radius:50%;color:rgb(var(--color-foreground-rgb));cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out;-webkit-tap-highlight-color:transparent;z-index:2}.ingredient-grid__item-btn:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%}@media(hover:hover){.ingredient-grid__item-btn:hover{background-color:rgb(var(--color-foreground-rgb) / .1);border-color:rgb(var(--color-foreground-rgb) / .4)}}.ingredient-grid__item-btn:focus-visible{outline:2px solid rgb(var(--color-primary-rgb, var(--color-foreground-rgb)));outline-offset:2px}.ingredient-grid__item-btn svg{width:1rem;height:1rem}.ingredient-grid__item-detail[hidden]{display:none}.ingredient-grid__dialog{width:min(34rem,calc(100vw - 2 * var(--page-margin, 1rem)));max-height:min(44rem,calc(100dvh - 2 * var(--roots-gap-spacious)));padding:0;border:none;border-radius:var(--roots-radius-generous, 24px);background-color:rgb(var(--color-background-rgb));color:rgb(var(--color-foreground-rgb));overflow:hidden}.ingredient-grid__dialog::backdrop{background-color:rgb(var(--color-shadow-rgb, 12 19 14) / .5)}.ingredient-grid__dialog-inner{position:relative;max-height:inherit;overflow-y:auto;overscroll-behavior:contain}.ingredient-grid__dialog-media:not(:empty){aspect-ratio:16 / 9;overflow:hidden}.ingredient-grid__dialog-media img{width:100%;height:100%;object-fit:cover;display:block}.ingredient-grid__dialog-title{margin:0;padding:var(--roots-gap-relaxed) var(--roots-gap-relaxed) var(--roots-gap-tight)}.ingredient-grid__dialog-body{padding:0 var(--roots-gap-relaxed) var(--roots-gap-relaxed);color:rgb(var(--color-foreground-rgb))}.ingredient-grid__dialog-body:not(.rte){--color: var(--typo-color, rgb(var(--color-foreground-rgb)));color:var(--color)}.ingredient-grid__dialog-body>:first-child{margin-top:0}.ingredient-grid__dialog-body>:last-child{margin-bottom:0}.ingredient-grid__detail-link{display:inline-block;margin-top:var(--roots-gap-standard);color:var(--color-primary, currentColor)}.ingredient-grid__dialog-close{position:absolute;top:var(--roots-gap-tight);right:var(--roots-gap-tight);display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:none;border-radius:50%;background:rgb(var(--color-background-rgb) / .9);color:rgb(var(--color-foreground-rgb));cursor:pointer;z-index:2}.ingredient-grid__dialog-close svg{width:1.25rem;height:1.25rem}.ingredient-grid__dialog-close:focus-visible{outline:2px solid rgb(var(--color-primary-rgb, var(--color-foreground-rgb)));outline-offset:2px}.ingredient-grid__empty{margin:0;padding-block:var(--roots-gap-spacious);text-align:center}.ingredient-grid__empty[hidden]{display:none}.ingredient-grid__show-more{display:flex;align-items:center;justify-content:center;margin-block-start:var(--roots-rhythm-body-content)}.ingredient-grid__show-more[hidden]{display:none}.ingredient-grid__show-more-btn{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:var(--roots-gap-tight);border:none;background:none;font-family:var(--font-body--family, system-ui, sans-serif);font-size:1rem;color:var(--color-primary, currentColor);cursor:pointer;transition:opacity .2s ease-out}.ingredient-grid__show-more-btn>span{border-bottom:2px solid currentColor;padding-bottom:2px}@media(hover:hover){.ingredient-grid__show-more-btn:hover{opacity:.75}}.ingredient-grid__show-more-btn:focus-visible{outline:2px solid rgb(var(--color-primary-rgb, var(--color-foreground-rgb)));outline-offset:2px}@media screen and (min-width:750px){.ingredient-grid__header{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--roots-gap-spacious)}.ingredient-grid__title{flex:0 0 50%}.ingredient-grid__intro{flex:1 1 20rem;min-width:0}.ingredient-grid__header-cta{flex:0 0 auto}.ingredient-grid__grid{grid-template-columns:repeat(var(--ingredient-grid-columns-tablet, 3),minmax(0,1fr))}}@media screen and (min-width:990px){.ingredient-grid__header{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;column-gap:var(--roots-gap-spacious);align-items:end}.ingredient-grid__title,.ingredient-grid__intro,.ingredient-grid__header-cta{flex:none}.ingredient-grid__grid{grid-template-columns:repeat(var(--ingredient-grid-columns-desktop, 4),minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.ingredient-grid__item,.ingredient-grid__item--interactive,.ingredient-grid__item-image{transition:none}.ingredient-grid__item--interactive:hover,.ingredient-grid__item--interactive:focus-within{transform:none}.ingredient-grid__item--interactive:hover .ingredient-grid__item-image,.ingredient-grid__item--interactive:focus-within .ingredient-grid__item-image{transform:none}.ingredient-grid__grid--carousel{scroll-behavior:auto}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/ingredient-grid.css.map */