.how-to-use{background-color:var(--htu-bg, #f3f0eb);overflow:hidden}.how-to-use__inner{display:flex;flex-direction:column;gap:0;touch-action:pan-y}.how-to-use__media{position:relative;width:100%;height:51.4rem;overflow:hidden}.how-to-use__image-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s ease;transform:translateY(100%);opacity:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.how-to-use__image-wrapper.is-active{transform:translateY(0);opacity:1}.how-to-use__image-wrapper.is-above{transform:translateY(-100%);opacity:0}.how-to-use__image-wrapper.is-resetting{transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease}.how-to-use__image{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}.how-to-use__image--placeholder{background-color:rgba(var(--color-foreground),.08)}.how-to-use__media-gradient{display:none}.how-to-use__steps{list-style:none;margin:0;padding:0 2.9rem 3.9rem;position:relative;z-index:1;margin-top:-1.5rem;height:18rem}.how-to-use__step{position:absolute;top:0;left:50%;display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 2.4rem;border-radius:1.2rem;border:.2rem solid transparent;background-color:#ffffff85;width:calc((100% - 5.8rem) - var(--step-depth, 0) * 3rem);overflow:hidden;cursor:default;z-index:calc(10 - var(--step-depth, 0));transform-origin:top center;transform:translate(-50%,calc(var(--step-depth, 0) * 7rem)) scale(calc(1 - var(--step-visual, 0) * .14));opacity:calc(1 - var(--step-depth, 0) * .2);transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease,background-color .3s ease,background-image .3s ease,border-color .3s ease;will-change:transform}.how-to-use__step.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,16.5rem) scale(.6)}.how-to-use__step:focus-visible{outline:.2rem solid var(--htu-active, #e63329);outline-offset:.3rem}.how-to-use__step.is-active{border-color:var(--htu-active-border, var(--htu-active, #e63329));background-color:var(--htu-active-bg, #000000);background-image:linear-gradient(0deg,var(--htu-active, #e63329) 0%,var(--htu-active-soft, rgba(230, 51, 41, .4)) 100%)}.how-to-use__step-label,.how-to-use__step-number{margin:0;font-family:var(--font-heading-family);font-weight:700;font-size:1.6rem;line-height:1.375;letter-spacing:.007rem;text-transform:uppercase;color:var(--htu-text, #a7a7a7);transition:color .3s ease}.how-to-use__step-description{margin:0;font-family:var(--font-body-family);font-weight:500;font-size:1.6rem;line-height:1.375;letter-spacing:.007rem;color:var(--htu-text, #cbcbcb);transition:color .3s ease}.how-to-use__step.is-active .how-to-use__step-label,.how-to-use__step.is-active .how-to-use__step-number,.how-to-use__step.is-active .how-to-use__step-description{color:var(--htu-text-active, #ffffff)}.how-to-use__step.is-active .how-to-use__step-description{opacity:.75}.how-to-use--align-mobile-left .how-to-use__step{text-align:left;align-items:flex-start}.how-to-use--align-mobile-center .how-to-use__step{text-align:center;align-items:center}.how-to-use--align-mobile-right .how-to-use__step{text-align:right;align-items:flex-end}@media screen and (min-width:750px){.how-to-use__inner{flex-direction:row;align-items:flex-start;justify-content:right}.how-to-use__media{order:2;flex:0 0 auto;width:65.8rem;max-width:55%;height:70.9rem;border-radius:1.2rem}.how-to-use__image-wrapper{transform:none;opacity:0;transition:opacity .4s ease}.how-to-use__image-wrapper.is-active{opacity:1}.how-to-use__image-wrapper.is-above{opacity:0}.how-to-use__image{border-radius:1.2rem}.how-to-use__steps{order:1;width:43rem;padding:0;margin-block:auto;display:flex;flex-direction:column;gap:2rem;height:auto}.how-to-use__step{position:relative;top:auto;left:auto;width:100%;max-width:none;padding:2.4rem 3.2rem;cursor:pointer;transform:none!important;order:0!important;z-index:auto;opacity:1!important;pointer-events:auto!important}.how-to-use__step.is-hidden{transform:none!important;opacity:1!important;pointer-events:auto!important}.how-to-use__step-label{font-size:2.4rem;line-height:1.333;letter-spacing:-.003rem;text-transform:none}.how-to-use__step-description{font-size:2rem;line-height:1.3}.how-to-use--align-desktop-left .how-to-use__step{text-align:left;align-items:flex-start}.how-to-use--align-desktop-center .how-to-use__step{text-align:center;align-items:center}.how-to-use--align-desktop-right .how-to-use__step{text-align:right;align-items:flex-end}}@media screen and (min-width:750px)and (max-width:1299px){.how-to-use__inner{gap:3.2rem}}@media screen and (min-width:1300px){.how-to-use__inner{gap:9.6rem}.how-to-use__steps{max-width:35%}}@media(prefers-reduced-motion:reduce){.how-to-use__image-wrapper{transition:none}}.how-to-use__note{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:4px;align-self:stretch;border-radius:16px;background:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.how-to-use__note-icon-label{display:flex;align-items:center;gap:8px}.how-to-use__note-icon{width:20px;height:20px;aspect-ratio:1/1}.how-to-use__note-label{color:var(--color-body-text);font-feature-settings:"liga" off,"clig" off;font-size:16px;font-style:normal;font-weight:700;line-height:1.375;letter-spacing:.07px}.how-to-use__note-icon-img{width:100%;height:100%;object-fit:contain;display:block}.how-to-use__note-text{color:var(--color-body-text);font-feature-settings:"liga" off,"clig" off;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.07px}.how-to-use__note-text strong{color:var(--color-body-text, #1a1a1a);font-weight:700;display:block;margin-bottom:.2rem}.how-to-use__note-banner{display:flex;align-items:center;justify-content:center;list-style:none;width:100%;padding:6px;background-color:var(--note-banner-bg, #1b3f8b);color:var(--note-banner-color, #f5dc46);font-family:var(--font-heading-family);font-weight:700;font-size:1.6rem;line-height:1.375;letter-spacing:4px;text-transform:uppercase;text-align:center;margin-top:-8px}@media screen and (min-width:750px){.note-mobile{display:none}}@media screen and (max-width:749px){.how-to-use__note,.how-to-use__note-banner{display:none}.note-mobile{margin-top:3.2rem}.note-mobile .how-to-use__note,.note-mobile .how-to-use__note-banner{display:block}.note-mobile .how-to-use__note-banner{margin-top:12px}}@media screen and (max-width:749px){.how-to-use__inner{touch-action:unset}.how-to-use__steps{height:auto;display:flex;flex-direction:column;padding-bottom:0}.how-to-use__step{position:static;transform:none;margin:0 calc(var(--step-depth) * 15px);width:calc(100% - (var(--step-depth) * 30px));order:var(--step-depth)}.how-to-use__image-wrapper{transform:none!important;opacity:0!important}.how-to-use__image-wrapper.is-active{opacity:1!important}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/section-how-to-use.css.map */