.how-to-steps{position:relative;overflow:hidden;background:var(--bg)}.how-to-steps__layout{position:relative;width:100%;max-width:var(--how-to-layout-max, 90rem);margin-inline:auto}.how-to-steps__header{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:37rem;margin-bottom:4rem;padding-right:9rem}.how-to-steps__label{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:.5rem .75rem;border:1px solid color-mix(in srgb,var(--text) 32%,transparent);border-radius:var(--RADIUS, 1.5rem);text-transform:none;letter-spacing:normal}.how-to-steps__heading{margin:0;max-width:20ch;text-wrap:balance}.how-to-steps__description{margin:0;max-width:36ch;color:var(--text-light)}.how-to-steps__description p:first-child{margin-top:0}.how-to-steps__description p:last-child{margin-bottom:0}.how-to-steps__slider{position:relative;width:100%;min-width:0}.how-to-steps__slider grid-slider{display:block;width:100%;min-width:0}.how-to-steps__grid.grid--slider{--item-width: min(var(--how-to-slide-width, 33.125rem), calc(100vw - var(--outer) * 2 - 2rem));--gap: var(--how-to-slide-gap, 8px);overflow-x:auto;overflow-y:visible}@media only screen and (min-width:750px){.how-to-steps__grid.grid--slider{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding:0;--item-width: min( var(--how-to-slide-width, 33.125rem), calc((var(--how-to-layout-max, 90rem) - var(--how-to-slide-gap, 8px) * 3) / 4) )}.how-to-steps__slider .slider__arrows{right:0}}.how-to-steps__slide{min-width:0}.how-to-steps__card{position:relative;display:flex;flex-direction:column;height:var(--how-to-card-height, 520px);padding:2rem;border-radius:var(--how-to-card-radius, 8px);overflow:hidden;color:var(--COLOR-BG, #fff);background:var(--text)}.how-to-steps__card-media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.how-to-steps__card-image.image-wrapper,.how-to-steps__card-media .image-wrapper{width:100%;height:100%;min-height:100%}.how-to-steps__card-image.image-wrapper img,.how-to-steps__card-media .image-wrapper img{width:100%;height:100%;object-fit:cover}.how-to-steps__card-gradient{position:absolute;right:0;bottom:0;left:0;z-index:1;height:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--how-to-card-overlay, var(--text)) 0%,transparent) 0%,var(--how-to-card-overlay, var(--text)) 100%)}.how-to-steps__card-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:2.5rem;height:100%}.how-to-steps__step-number{margin:0;color:color-mix(in srgb,currentColor 64%,transparent)}.how-to-steps__card-foot{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;width:100%}.how-to-steps__step-title{margin:0;text-wrap:balance}.how-to-steps__step-text{margin:0;color:color-mix(in srgb,currentColor 64%,transparent)}.how-to-steps__step-text p:first-child{margin-top:0}.how-to-steps__step-text p:last-child{margin-bottom:0}.how-to-steps grid-slider .slider__button{display:flex!important;--icon-size: 1.25rem}@media only screen and (min-width:750px){.how-to-steps__slider grid-slider{--how-to-arrow-size: 3rem;padding-top:calc(var(--how-to-arrow-size) + 1rem);margin-top:calc((var(--how-to-arrow-size) + 4rem) * -1)}.how-to-steps__slider .slider__arrows{top:0;right:var(--outer);bottom:auto;left:auto;width:auto;max-width:none;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;gap:1rem;overflow:visible;pointer-events:none}.how-to-steps__slider .slider__button{--btn-size: var(--how-to-arrow-size, 3rem);--icon-size: 1.375rem;--bg: var(--COLOR-BG, #fff);--bg-brighter: color-mix(in srgb, var(--COLOR-BG, #fff) 92%, var(--text));position:relative;flex:0 0 auto;left:auto!important;right:auto!important;top:0;margin-top:0;transform:none!important;opacity:1;color:var(--text);border-radius:50%;box-shadow:0 1px 4px #0000001f}.how-to-steps__slider .slider__button:before{background:var(--text);opacity:1}.how-to-steps__slider .slider__button--prev:disabled:before,.how-to-steps__slider .slider__button--next:disabled:before{opacity:.32}.how-to-steps__slider .slider__button:disabled{visibility:visible;pointer-events:none;cursor:default}.how-to-steps__slider .slider__button--prev:disabled{opacity:1}.how-to-steps__slider .slider__button--next:disabled{opacity:.32}}@media only screen and (min-width:750px)and (hover:hover){.how-to-steps__slider .slider__button--prev,.how-to-steps__slider .slider__button--next{transform:none!important}.how-to-steps__slider grid-slider:hover .slider__button:not(:disabled),.how-to-steps__slider .slider__button:focus-visible{opacity:1;transform:none!important}}@media only screen and (max-width:989px){.how-to-steps__header{padding-right:0;margin-bottom:2.5rem}}@media only screen and (max-width:749px){.how-to-steps__header{gap:.75rem;margin-bottom:2rem}body.template-product-matcha-powder .how-to-steps__header,body.template-product-whisk-set .how-to-steps__header,body.template-product-bundle .how-to-steps__header{align-items:center;text-align:center;margin-inline:auto}body.template-product-matcha-powder .how-to-steps__heading,body.template-product-whisk-set .how-to-steps__heading,body.template-product-bundle .how-to-steps__heading{max-width:none}.how-to-steps__slider grid-slider{padding-top:0;margin-top:0}.how-to-steps__grid.grid--mobile-slider{--gap: var(--how-to-slide-gap, 8px);display:flex;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.how-to-steps__grid.grid--mobile-slider .how-to-steps__slide{flex:0 0 auto;width:calc(100% - 50px);scroll-snap-align:start}.how-to-steps__card{height:var(--how-to-card-height-tablet, 380px);padding:1.5rem}.how-to-steps__slider .slider__arrows{top:auto;bottom:calc(100% + 1rem);right:var(--outer);left:auto;width:auto;display:flex;gap:.75rem;pointer-events:none}.how-to-steps__slider .slider__button{--btn-size: 2.5rem;--icon-size: 1.125rem;--bg: var(--COLOR-BG, #fff);position:relative;left:auto!important;right:auto!important;top:auto;margin-top:0;transform:none!important;border-radius:50%;box-shadow:0 1px 4px #0000001f}}@media only screen and (max-width:479px){.how-to-steps__card{height:var(--how-to-card-height-mobile, 340px)}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/how-to-steps.css.map */