@property --steps-color{syntax: "<color>"; inherits: true; initial-value: #f7d9d6;}.step-by-step{--steps-ease: cubic-bezier(.22, 1, .36, 1);--steps-progress: 0;transition:--steps-color .8s var(--steps-ease)}.step-by-step__inner{display:grid;gap:clamp(32px,4vw,64px)}.step-by-step__intro{display:grid;gap:12px;max-width:720px;text-align:var(--theme-content-align-desktop, start)}.step-by-step__intro>*{margin:0}@media(max-width:767px){.step-by-step__intro{text-align:var(--theme-content-align-mobile, var(--theme-content-align-desktop, start))}}.step-by-step__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);align-items:start}.step-by-step--stage-right .step-by-step__stage-wrap{order:2}.step-by-step__stage-wrap{position:sticky;top:calc(var(--header-height, 72px) + 24px)}.step-by-step__stage{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:7%;border-radius:var(--radius-xl);background:color-mix(in srgb,var(--steps-color) 75%,var(--bg))}.step-by-step--circle .step-by-step__stage{border-radius:50%}.step-by-step--arch .step-by-step__stage{aspect-ratio:4 / 5;border-radius:999px 999px var(--radius-xl) var(--radius-xl)}.step-by-step__window{position:relative;display:grid;width:100%;height:100%;overflow:hidden;border-radius:inherit}.step-by-step--circle .step-by-step__window{border-radius:50%}.step-by-step--arch .step-by-step__window{border-radius:999px 999px calc(var(--radius-xl) - 8px) calc(var(--radius-xl) - 8px)}.step-by-step--rounded .step-by-step__window{border-radius:calc(var(--radius-xl) - 8px)}.step-by-step__frame{grid-area:1 / 1;min-width:0;min-height:0;clip-path:circle(0% at 50% 60%);transition:clip-path .9s var(--steps-ease)}.step-by-step__frame.is-active{z-index:2;clip-path:circle(75% at 50% 50%)}.step-by-step__frame.was-active{z-index:1;clip-path:circle(75% at 50% 50%);transition:none}.step-by-step__frame img,.step-by-step__placeholder{display:block;width:100%;height:100%;object-fit:cover}.step-by-step__frame.is-active img{animation:step-by-step-settle 1.4s var(--steps-ease) both}@keyframes step-by-step-settle{0%{transform:scale(1.12)}to{transform:scale(1)}}.step-by-step__ring{position:absolute;top:2.5%;right:2.5%;bottom:2.5%;left:2.5%;width:95%;height:95%;overflow:visible;fill:none;stroke:color-mix(in srgb,var(--fg) 14%,transparent);stroke-width:.6;transform:rotate(-90deg);pointer-events:none}.step-by-step:not(.step-by-step--circle) .step-by-step__ring{display:none}.step-by-step__ring-progress{stroke:var(--fg);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--steps-progress) * 100);stroke-linecap:round;stroke-width:1;transition:stroke-dashoffset .9s var(--steps-ease)}.step-by-step__big-number{position:absolute;bottom:4%;left:4%;z-index:3;display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;margin:0;overflow:hidden;border-radius:50%;background:var(--bg);color:var(--fg);font-family:var(--font-heading);font-size:clamp(22px,2.4vw,34px);font-variant-numeric:tabular-nums;box-shadow:var(--shadow-soft)}.step-by-step__big-number span{display:block}.step-by-step--circle .step-by-step__big-number{bottom:6%;left:6%}.step-by-step__list{display:grid;gap:0;margin:0;padding:0;list-style:none}.step-by-step__step{display:grid;gap:14px;align-content:center;min-height:72vh;padding:32px 0;border-top:1px solid color-mix(in srgb,var(--fg) 12%,transparent);opacity:.32;transition:opacity .5s ease}.step-by-step__step:first-child{border-top:0}.step-by-step__step.is-active{opacity:1}.step-by-step__meta{display:flex;gap:12px;align-items:center}.step-by-step__index{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--step-color);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .5s var(--steps-ease)}.step-by-step__step.is-active .step-by-step__index{transform:scale(1.12)}.step-by-step__time{padding:5px 12px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);border-radius:999px;font-size:max(9px,calc(var(--body-base-size, 13px) * 12 / 13));letter-spacing:.04em}.step-by-step__title,.step-by-step__copy>:first-child{margin:0}.step-by-step__copy{max-width:460px;color:color-mix(in srgb,var(--fg) 78%,transparent)}.step-by-step__product{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;max-width:420px;margin-top:6px;padding:10px 12px 10px 10px;border-radius:20px;background:color-mix(in srgb,var(--step-color) 40%,var(--bg))}.step-by-step__product-media{display:block;overflow:hidden;aspect-ratio:1;border-radius:14px;background:var(--bg)}.step-by-step__product-media img{display:block;width:100%;height:100%;object-fit:cover}.step-by-step__product-info{display:grid;gap:2px;min-width:0;font-size:14px}.step-by-step__product-title{overflow:hidden;color:inherit;font-weight:600;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}.step-by-step__add{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--button-bg, var(--fg));color:var(--button-fg, var(--bg));cursor:pointer;transition:transform .3s var(--steps-ease)}.step-by-step__add:hover{transform:rotate(90deg) scale(1.06)}.step-by-step__add svg{width:16px;height:16px}.step-by-step__mobile-media{display:none}@media(max-width:989px){.step-by-step__body{grid-template-columns:minmax(0,1fr)}.step-by-step__stage-wrap{display:none}.step-by-step__step{min-height:0;padding:28px 0;opacity:1}.step-by-step__mobile-media{display:block;overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--radius-lg);background:var(--step-color)}.step-by-step--circle .step-by-step__mobile-media,.step-by-step--arch .step-by-step__mobile-media{border-radius:999px 999px var(--radius-lg) var(--radius-lg)}.step-by-step__mobile-media:empty{display:none}.step-by-step__mobile-media img{display:block;width:100%;height:100%;object-fit:cover}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__list{position:relative;display:flex;gap:12px;margin-inline:calc(var(--layout-gutter, 16px) * -1);padding-inline:var(--layout-gutter, 16px);overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--layout-gutter, 16px);scroll-snap-type:x mandatory;scrollbar-width:none}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__list::-webkit-scrollbar{display:none}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__step{flex:0 0 min(84%,360px);align-content:start;padding:0;border-top:0;scroll-snap-align:start}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__product{max-width:none}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__swipe-progress{display:block;height:2px;margin-top:24px;overflow:hidden;border-radius:2px;background:color-mix(in srgb,var(--fg) 12%,transparent)}:is(.step-by-step--mobile-swipe,.step-by-step--mobile-stage) .step-by-step__swipe-progress span{display:block;width:calc(100% / var(--steps-n, 4));height:100%;background:var(--fg);transform:translate(calc(var(--swipe-progress, 0) * (var(--steps-n, 4) - 1) * 100%))}.step-by-step--mobile-stage .step-by-step__body{gap:28px}.step-by-step--mobile-stage .step-by-step__stage-wrap{position:static;display:block;touch-action:pan-y;width:min(100%,360px);margin-inline:auto}.step-by-step--mobile-stage .step-by-step__mobile-media{display:none}.step-by-step--mobile-stage .step-by-step__step:not(.is-active){opacity:.45}.step-by-step--mobile-compact .step-by-step__step{grid-template-columns:96px minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:start;align-content:start;padding:20px 0}.step-by-step--mobile-compact .step-by-step__mobile-media{grid-row:span 3;aspect-ratio:4 / 5}.step-by-step--mobile-compact .step-by-step__product{grid-column:1 / -1;max-width:none}}.step-by-step__swipe-progress{display:none}@media(prefers-reduced-motion:reduce){.step-by-step,.step-by-step__frame,.step-by-step__ring-progress,.step-by-step__step{transition:none}.step-by-step__frame.is-active img{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/38/assets/section-step-by-step.css.map */