.ingredient-carousel{display:block;padding-block:4.8rem;color:rgb(var(--color-foreground));container-type:inline-size;scroll-margin-top:var(--header-height, 0px)}@media screen and (min-width:750px){.ingredient-carousel{padding-block:8rem}}.ingredient-carousel__header{display:flex;align-items:flex-end;justify-content:space-between;gap:3.2rem;margin-bottom:4rem}.ingredient-carousel__intro{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;max-width:64rem}.ingredient-carousel__intro .stay-eyebrow{margin:0}.ingredient-carousel__heading{color:inherit}.ingredient-carousel__buttons{margin-top:.8rem}.ingredient-carousel__arrows{display:flex;flex-shrink:0;gap:1.2rem}.ingredient-carousel__arrows[hidden]{display:none}.ingredient-carousel__arrow{display:flex;align-items:center;justify-content:center;width:5.6rem;height:5.6rem;padding:0;border:0;border-radius:50%;background:rgb(var(--stay-color-grey));color:rgb(var(--color-foreground));cursor:pointer;transition:background-color var(--duration-default) ease,color var(--duration-default) ease,opacity var(--duration-default) ease}.ingredient-carousel__arrow .icon{width:1.6rem;height:1.6rem}.ingredient-carousel__arrow[data-carousel-prev] .icon{transform:rotate(180deg)}.ingredient-carousel__arrow:disabled{opacity:.35;cursor:default}@media(hover:hover){.ingredient-carousel__arrow:not(:disabled):hover{background:rgb(var(--color-foreground));color:rgb(var(--color-background))}}.ingredient-carousel__arrow:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem;background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.ingredient-carousel__list{--carousel-inset: max(var(--stay-gutter), (100cqi - var(--page-width)) / 2);display:flex;gap:1.6rem;margin:0;padding:.4rem var(--carousel-inset) .4rem;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--carousel-inset);scrollbar-width:none}.ingredient-carousel__list::-webkit-scrollbar{display:none}@media(hover:hover)and (pointer:fine){.ingredient-carousel__list.is-draggable{cursor:grab}.ingredient-carousel__list.is-draggable .ingredient-carousel__card{cursor:inherit}}.ingredient-carousel__list.is-dragging{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.ingredient-carousel__list:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:-.2rem}.ingredient-carousel__card{position:relative;display:flex;flex:0 0 auto;flex-direction:column;justify-content:space-between;gap:2.4rem;width:min(30rem,78vw);min-height:40rem;padding:2.4rem;border-radius:var(--stay-radius);background:rgb(var(--color-background));color:rgb(var(--color-foreground));scroll-snap-align:start;overflow:clip}.ingredient-carousel__card--image{justify-content:center;align-items:center}.ingredient-carousel__image{width:100%;height:auto;max-height:28rem;object-fit:contain;transition:scale 1.2s var(--stay-motion-ease, ease)}.ingredient-carousel__caption{margin:0;font-size:1.6rem;font-weight:600;text-align:center}.ingredient-carousel__top{display:flex;flex-direction:column;gap:1.6rem}.ingredient-carousel__count{font-size:1.2rem;font-weight:600;letter-spacing:.1em}.ingredient-carousel__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}.ingredient-carousel__tag{padding:.4rem 1rem;border:.1rem solid rgba(var(--color-foreground),.3);border-radius:var(--stay-radius-pill);font-size:1.1rem;font-weight:500;line-height:1.4;letter-spacing:.05em;text-transform:uppercase}.ingredient-carousel__info{display:flex;flex-direction:column;gap:.8rem}.ingredient-carousel__name{margin:0;font-family:var(--font-heading-family);font-size:2.8rem;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:inherit}.ingredient-carousel__benefit{margin:0;font-size:1.4rem;font-style:italic;font-weight:500;line-height:1.4}.ingredient-carousel__description{margin:0;font-size:1.6rem;line-height:1.5}@media(hover:hover){.ingredient-carousel__card--ingredient .ingredient-carousel__description{display:grid;max-height:0;opacity:0;transform:translateY(.8rem);transition:max-height .6s var(--stay-motion-ease, ease),opacity .6s var(--stay-motion-ease, ease),transform .6s var(--stay-motion-ease, ease)}.ingredient-carousel__card--ingredient:hover .ingredient-carousel__description,.ingredient-carousel__list:focus-visible .ingredient-carousel__card--ingredient .ingredient-carousel__description{max-height:12rem;opacity:1;transform:none}.ingredient-carousel__card--image:hover .ingredient-carousel__image{scale:1.06}}@media(prefers-reduced-motion:reduce){.ingredient-carousel__card--ingredient,.ingredient-carousel__description,.ingredient-carousel__image{transition:none}}.ingredient-carousel--graphic{--ingredient-focus: var(--color-foreground)}.ingredient-carousel__card--graphic{padding:0;justify-content:space-between;outline:none}.ingredient-carousel__card--graphic .ingredient-carousel__top{position:relative;margin:2.4rem 2.4rem 0}.ingredient-carousel__card--graphic:focus-visible{outline:.2rem solid rgb(var(--ingredient-focus));outline-offset:.2rem}.ingredient-carousel__graphic{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 84%);mask-image:linear-gradient(to bottom,#000 72%,transparent 84%);transition:opacity var(--stay-motion-duration, .9s) var(--stay-motion-ease, ease)}.ingredient-carousel__graphic>:is(svg,img){display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 38%;transition:transform 1.2s var(--stay-motion-ease, ease)}.formula-graphic :is(line,path){stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.5}.formula-graphic circle{fill:currentColor;opacity:.5}.formula-graphic .formula-graphic__accent{fill:rgb(var(--stay-color-warmth));opacity:1}.ingredient-carousel__card--graphic .ingredient-carousel__panel{position:relative;display:flex;flex-direction:column;gap:1.6rem;padding:2.4rem}.ingredient-carousel__card--graphic .ingredient-carousel__name{padding-right:4rem}.ingredient-carousel__card--graphic .ingredient-carousel__brief{display:flex;flex-direction:column;gap:.8rem;opacity:0;transform:translateY(1.6rem);transition:opacity var(--stay-motion-duration-ui, .6s) var(--stay-motion-ease, ease),transform var(--stay-motion-duration-ui, .6s) var(--stay-motion-ease, ease)}.ingredient-carousel__card--graphic:is(:focus-visible,.is-open) .ingredient-carousel__graphic{opacity:.14}.ingredient-carousel__card--graphic:is(:focus-visible,.is-open) .ingredient-carousel__graphic>:is(svg,img){transform:scale(1.35)}.ingredient-carousel__card--graphic:is(:focus-visible,.is-open) .ingredient-carousel__brief{opacity:1;transform:none}@media(hover:hover){.ingredient-carousel__card--graphic:hover .ingredient-carousel__graphic{opacity:.14}.ingredient-carousel__card--graphic:hover .ingredient-carousel__graphic>:is(svg,img){transform:scale(1.35)}.ingredient-carousel__card--graphic:hover .ingredient-carousel__brief{opacity:1;transform:none}}.ingredient-carousel__tap{display:none}@media(hover:none),(pointer:coarse){.ingredient-carousel__tap{position:absolute;right:2.4rem;bottom:3.2rem;display:flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:50%;background:rgba(var(--color-foreground),.1);transition:rotate var(--stay-motion-duration-ui, .6s) var(--stay-motion-ease, ease)}.ingredient-carousel__tap .icon{width:1.2rem;height:1.2rem}.ingredient-carousel__card--graphic.is-open .ingredient-carousel__tap{rotate:45deg}}@media(prefers-reduced-motion:reduce){.ingredient-carousel__graphic,.ingredient-carousel__graphic>:is(svg,img),.ingredient-carousel__card--graphic .ingredient-carousel__brief,.ingredient-carousel__tap{transition:none}.ingredient-carousel__card--graphic .ingredient-carousel__graphic>:is(svg,img){transform:none!important}}.ingredient-carousel__card--compact{align-items:center;justify-content:flex-start;gap:2.4rem;min-height:0;padding:4.8rem 3.2rem;text-align:center}.ingredient-carousel__icon{display:flex;flex-shrink:0;width:9.6rem;height:9.6rem}.ingredient-carousel__icon>:is(svg,img){display:block;width:100%;height:100%;object-fit:contain}.ingredient-carousel__card--compact .ingredient-carousel__info{align-items:center;gap:1.2rem}.ingredient-carousel__card--compact .ingredient-carousel__name{font-size:2.4rem}.ingredient-carousel__card--compact .ingredient-carousel__description{max-width:26rem;opacity:.85}.ingredient-carousel--science{scroll-margin-top:calc(var(--header-height, 0px) + 1.6rem)}.ingredient-carousel--science .ingredient-carousel__list{align-items:stretch}.ingredient-carousel--science .ingredient-carousel__list.has-card-height{align-items:flex-start}.ingredient-carousel--science .ingredient-carousel__list.has-card-height>.ingredient-carousel__card{min-height:var(--carousel-card-height)}.ingredient-carousel--science .ingredient-carousel__list.is-measuring{align-items:flex-start}.ingredient-carousel--science .ingredient-carousel__list.is-measuring>.ingredient-carousel__card{min-height:0}.ingredient-carousel__card--science{justify-content:flex-start;gap:2.4rem;width:80cqi;min-height:0;padding:1.2rem 1.2rem 2.4rem;border-radius:var(--stay-radius-l)}@media screen and (min-width:750px){.ingredient-carousel__card--science{width:clamp(30rem,26cqi,42rem)}}.ingredient-carousel__visual{aspect-ratio:3 / 2;border-radius:calc(var(--stay-radius-l) - 1.2rem);background:rgb(var(--stay-color-depth));color:rgb(var(--stay-color-cream));overflow:clip}.ingredient-carousel__visual>:is(svg,img){display:block;width:100%;height:100%;object-fit:cover}.ingredient-carousel__card--science .ingredient-carousel__info{gap:1.6rem;padding-inline:1.2rem}.ingredient-carousel__card--science .ingredient-carousel__name{font-size:2.6rem}.ingredient-carousel__card--science .ingredient-carousel__tag{padding:.6rem 1.2rem;border:0;background:rgb(var(--stay-color-cream));color:rgb(var(--stay-color-depth));font-size:1.3rem;letter-spacing:0;text-transform:none}.ingredient-carousel__card--science .ingredient-carousel__description{font-size:1.5rem}.ingredient-carousel__more{margin-top:auto;padding-inline:1.2rem}.ingredient-carousel__more-toggle{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:4.4rem;border-radius:var(--stay-radius-s);font-size:1.5rem;font-weight:600;line-height:1.3;list-style:none;cursor:pointer}.ingredient-carousel__more-toggle::-webkit-details-marker{display:none}.ingredient-carousel__more-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;background:rgb(var(--stay-color-depth));color:rgb(var(--stay-color-cream))}.ingredient-carousel__more-icon .icon{width:1.4rem;height:1.4rem;transition:transform var(--stay-motion-duration-state) var(--stay-motion-ease-state)}.ingredient-carousel__more[open] .ingredient-carousel__more-icon .icon{transform:rotate(45deg)}@media(hover:hover){.ingredient-carousel__more-toggle:hover .ingredient-carousel__more-icon{background:rgb(var(--stay-color-warmth));color:rgb(var(--stay-color-depth))}}.ingredient-carousel__more-toggle:focus-visible .ingredient-carousel__more-icon{background:rgb(var(--stay-color-warmth));color:rgb(var(--stay-color-depth))}.ingredient-carousel__more-text{padding-top:1.2rem;font-size:1.5rem;line-height:1.5}.ingredient-carousel__more-text>*{margin:0}@media(prefers-reduced-motion:reduce){.ingredient-carousel__more-icon .icon{transition:none}}.ingredient-carousel__dots{display:flex;justify-content:center;gap:.4rem;margin-top:2.4rem}.ingredient-carousel__dots[hidden]{display:none}.ingredient-carousel__dot{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}.ingredient-carousel__dot:before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:rgb(var(--color-foreground));opacity:.25;transition:opacity var(--stay-motion-duration-state) var(--stay-motion-ease-state),transform var(--stay-motion-duration-state) var(--stay-motion-ease-state)}.ingredient-carousel__dot[aria-current=true]:before{opacity:1;transform:scale(1.25)}@media(hover:hover){.ingredient-carousel__dot:hover:before{opacity:.6}.ingredient-carousel__dot[aria-current=true]:hover:before{opacity:1}}.ingredient-carousel__dot:focus-visible:before{opacity:.6}.ingredient-carousel__dot[aria-current=true]:focus-visible:before{opacity:1}@media(prefers-reduced-motion:reduce){.ingredient-carousel__dot:before{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/section-ingredient-carousel.css.map */
