.step-by-step{--sbs-step-collapsed: var(--sbs-step-collapsed-mobile);--sbs-radius: var(--sbs-radius-mobile);--sbs-rule-length: 15.5rem;--sbs-rule-min: 1.6rem;--sbs-duration: .6s;--sbs-ease: cubic-bezier(.22, .61, .36, 1);--sbs-nav-offset: var(--liv-nav-stack, var(--header-height, 0px));--sbs-viewport: 100vh;display:block;width:100%}@supports (height: 100svh){.step-by-step{--sbs-viewport: 100svh}}@media(min-width:769px){.step-by-step{--sbs-step-collapsed: var(--sbs-step-collapsed-desktop);--sbs-radius: var(--sbs-radius-desktop);--sbs-rule-length: 15.1rem}}.step-by-step__stack{display:block;width:100%}.step-by-step__inner{display:flex;flex-direction:column;width:100%}.step-by-step__header{width:100%;row-gap:1.2rem}.step-by-step__track{counter-reset:sbs-step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;border-start-start-radius:var(--sbs-radius);border-start-end-radius:var(--sbs-radius);overflow:hidden;overflow:clip}.step{counter-increment:sbs-step;position:relative;flex:none;width:100%;min-height:min(54rem,var(--sbs-viewport) - var(--sbs-nav-offset));overflow:hidden;overflow:clip;background-color:var(--liv-charcoal, #272727)}.step__media,.step__overlay,.step__toggle,.step__badge,.step__media-image{position:absolute;top:0;right:0;bottom:0;left:0}.step__media-image img{display:block;width:100%;height:100%;object-fit:cover}.step__media-image--mobile{display:none}@media(max-width:768px){.step__media-image--mobile{display:block}.step__media-image--desktop{display:none}}.step__overlay{background:#000;opacity:var(--sbs-overlay-open, 0);transition:opacity var(--sbs-duration) var(--sbs-ease)}.step__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:inherit;padding-block:6rem;color:#fff;transition:opacity var(--sbs-duration) var(--sbs-ease);--color-text: #fff;--color-text-rgb: 255, 255, 255;--color-heading: #fff}.step__inner{display:flex;flex-direction:column;align-items:center;row-gap:1.3rem;width:min(var(--sbs-content-width),calc(100% - 4.3rem));min-height:0;text-align:center}.step__blocks{display:flex;flex-direction:column;align-items:center;flex:none;width:100%}.step-by-step .step__number,.step-by-step .step__badge{font-family:var(--mono-font);font-weight:var(--mono-weight);font-size:var(--num-sm);line-height:var(--lh-num-sm);letter-spacing:var(--ls-num-sm);font-feature-settings:"dlig" 1}.step__number{flex:none}.step-by-step .step__number:empty:before,.step-by-step .step__badge:empty:before{content:counter(sbs-step,decimal-leading-zero)}.step__rule{flex:0 1 var(--sbs-rule-length);width:1px;min-height:var(--sbs-rule-min);background:#fff}.step__badge,.step__toggle{display:none}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__pin{display:flex;flex-direction:column;min-height:min(var(--sbs-min-height, 0px),var(--sbs-viewport) - var(--sbs-nav-offset));max-height:calc(var(--sbs-viewport) - var(--sbs-nav-offset))}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__inner,.js .step-by-step__stack:not([data-mode=static]) .step-by-step__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track{flex:1 1 calc(var(--sbs-open-natural, 49.2rem) + 4.8rem + (var(--sbs-step-count) - 1) * var(--sbs-step-collapsed));min-height:0;container-type:size}.step-by-step__body.swiper-vertical{touch-action:pan-y}.js .step-by-step__stack:not([data-mode=static]) .step__badge{display:flex;align-items:center;justify-content:center;inset-block-end:auto;height:var(--sbs-step-collapsed);color:#fff;transition:opacity var(--sbs-duration) var(--sbs-ease);z-index:2}.js .step-by-step__stack:not([data-mode=static]) .step__toggle{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;z-index:3}.js .step-by-step__stack:not([data-mode=static]) .step.is-open .step__toggle{pointer-events:none;cursor:default}.js .step-by-step__stack:not([data-mode=static]) .step:not(.is-open) .step__toggle{inset-block-end:auto;height:var(--sbs-step-collapsed)}.js .step-by-step__stack:not([data-mode=static]) .step__toggle:focus-visible{outline:2px solid #fff;outline-offset:-6px}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(2){--sbs-i: 1}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(3){--sbs-i: 2}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(4){--sbs-i: 3}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(5){--sbs-i: 4}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(6){--sbs-i: 5}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(7){--sbs-i: 6}.js .step-by-step__stack:not([data-mode=static]) .step:nth-child(8){--sbs-i: 7}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track{position:relative}.js .step-by-step__stack:not([data-mode=static]) .step{position:absolute;inset-inline:0;top:0;isolation:isolate;height:calc(100cqh - (var(--sbs-step-count) - 1 - var(--sbs-i, 0)) * var(--sbs-step-collapsed));min-height:0;border-start-start-radius:0;border-start-end-radius:0;--sbs-shift: calc( 100cqh - (var(--sbs-step-count) - var(--sbs-i, 0)) * var(--sbs-step-collapsed) );transform:translateY(var(--sbs-shift));transition:transform var(--sbs-duration) var(--sbs-ease),border-radius var(--sbs-duration) var(--sbs-ease),visibility 0s}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track:not([data-active-step])>.step:first-child,.js .step-by-step__stack:not([data-mode=static]) .step.is-open,.js .step-by-step__stack:not([data-mode=static]) .step.is-passed{--sbs-shift: 0px;border-start-start-radius:var(--sbs-radius);border-start-end-radius:var(--sbs-radius)}.js .step-by-step__stack:not([data-mode=static]) .step.is-passed{visibility:hidden;transition:transform var(--sbs-duration) var(--sbs-ease),border-radius var(--sbs-duration) var(--sbs-ease),visibility 0s linear var(--sbs-duration)}.js .step-by-step__stack:not([data-mode=static]) .step__media{transform:translateY(calc(-1 * var(--sbs-shift)));transition:transform var(--sbs-duration) var(--sbs-ease)}.js .step-by-step__stack:not([data-mode=static]) .step__content{position:absolute;inset-inline:0;top:0;height:100%;min-height:0;padding-block:2.4rem;opacity:0}.js .step-by-step__stack:not([data-mode=static]) .step__overlay{opacity:var(--sbs-overlay-collapsed, .2)}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track:not([data-active-step])>.step:first-child .step__content,.js .step-by-step__stack:not([data-mode=static]) .step.is-open .step__content,.js .step-by-step__stack:not([data-mode=static]) .step.is-passed .step__content{opacity:1}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track:not([data-active-step])>.step:first-child .step__badge,.js .step-by-step__stack:not([data-mode=static]) .step.is-open .step__badge,.js .step-by-step__stack:not([data-mode=static]) .step.is-passed .step__badge{opacity:0}.js .step-by-step__stack:not([data-mode=static]) .step-by-step__track:not([data-active-step])>.step:first-child .step__overlay,.js .step-by-step__stack:not([data-mode=static]) .step.is-open .step__overlay,.js .step-by-step__stack:not([data-mode=static]) .step.is-passed .step__overlay{opacity:var(--sbs-overlay-open, 0)}.js .step-by-step__stack[data-fit=compact] .step-by-step__pin{height:calc(var(--sbs-viewport) + var(--sbs-lead, 0px));min-height:0;max-height:none}.js .step-by-step__stack[data-fit=compact] .step__blocks{zoom:var(--sbs-type-scale, 1)}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step{height:calc(100cqh - (var(--sbs-step-count) - 1) * var(--sbs-step-collapsed))}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step__media{inset-block-end:auto;height:100cqh}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-open,.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-passed{--sbs-shift: calc(var(--sbs-i, 0) * var(--sbs-step-collapsed))}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-passed{visibility:visible;border-start-start-radius:0;border-start-end-radius:0;transition:transform var(--sbs-duration) var(--sbs-ease),border-radius var(--sbs-duration) var(--sbs-ease)}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-passed .step__content{opacity:0}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-passed .step__badge{opacity:1}.js .step-by-step__stack[data-strips]:not([data-mode=static]) .step.is-passed .step__overlay{opacity:var(--sbs-overlay-collapsed, .2)}
/*# sourceMappingURL=/cdn/shop/t/31/assets/component-step-by-step.css.map */
