.order-flow{--orange-1:#ff8a4d;--orange-2:#ff5000;--orange-3:#c93f00;--ink:#1b1310;--ink-2:#6f625c;--paper:#ffffff;--paper-2:#fbf3ee;--dark:#241a17;--dark-2:#3a2c27;--accent:#ff5000;--ok:#12a150;--sun:#ffc735;color-scheme:light}.order-flow *{box-sizing:border-box}.order-flow{color:#fff;background:radial-gradient(120% 90% at 85% 40%,var(--orange-1) 0,var(--orange-2) 45%,var(--orange-3) 100%)}.order-flow.of-compact{background:none}.order-flow.of-compact .flow{max-width:460px;margin:0 auto}.order-flow .hero{max-width:1180px;margin:0 auto;padding:56px 24px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}@media (max-width:920px){.order-flow .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:36px 48px;padding-inline:16px}}.order-flow .pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border-radius:999px;padding:9px 18px;font-weight:600;font-size:15px}.order-flow .pill i{width:9px;height:9px;border-radius:50%;background:var(--sun);display:block}.order-flow h2.of-title{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin:22px 0 18px;text-wrap:balance}.order-flow .lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:34em;color:rgba(255,255,255,.92);margin:0}.order-flow .legend{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;max-width:30em}.order-flow .legend li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:15px;color:rgba(255,255,255,.95)}.order-flow .legend b{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:13px;flex:none}.order-flow .flow{min-width:0}.order-flow .stage-wrap{position:relative;width:100%;max-width:520px;margin:0 auto}.order-flow .stage{position:absolute;left:0;top:0;width:500px;height:400px;transform-origin:0 0}.order-flow .deco{position:absolute;left:120px;top:6px;width:360px;height:250px;border-radius:26px;background:var(--dark);transform:rotate(4deg);box-shadow:0 30px 60px rgba(60,20,5,.25)}.order-flow .deco span{position:absolute;left:28px;top:24px;font-size:13px;letter-spacing:.32em;color:rgba(255,255,255,.75);font-weight:600}.order-flow .scene{position:absolute;left:14px;top:46px;width:450px;height:318px;border-radius:26px;opacity:0;transform:translateY(14px) rotate(-1.5deg) scale(.98);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none;box-shadow:0 30px 70px rgba(70,20,0,.28)}.order-flow .scene.active{opacity:1;transform:translateY(0) rotate(-1.5deg) scale(1)}.order-flow .light{background:var(--paper);color:var(--ink)}.order-flow .darkc{background:var(--dark);color:#fff}.order-flow .bar{display:flex;align-items:center;gap:8px;padding:14px 18px 0}.order-flow .dots{display:flex;gap:6px}.order-flow .dots i{width:9px;height:9px;border-radius:50%;background:#EADFD8;display:block}.order-flow .url{flex:1;min-width:0;background:var(--paper-2);padding:6px 12px;font-size:12px;color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis}.order-flow .chip,.order-flow .url{border-radius:999px;white-space:nowrap}.order-flow .chip{font-size:11px;font-weight:700;letter-spacing:.06em;background:#F3ECE8;color:#8B7C75;padding:5px 10px}.order-flow .s1body{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:18px 20px 0}.order-flow .pimg{height:170px;border-radius:18px;background:linear-gradient(160deg,#FDF1EA,#F7E3D8);display:grid;place-items:center;overflow:hidden}.order-flow .pimg img{height:150px;width:auto;mix-blend-mode:multiply}.order-flow .store{font-size:11px;letter-spacing:.14em;font-weight:700;color:#A29189}.order-flow .pname{font-size:19px;font-weight:800;line-height:1.2;margin:6px 0 10px;letter-spacing:-.01em}.order-flow .opts{display:flex;gap:6px;margin-bottom:14px}.order-flow .opts span{font-size:11px;font-weight:700;border:1.5px solid #ede3de;border-radius:8px;padding:4px 8px;color:#6F625C}.order-flow .opts span.on{border-color:var(--accent);color:var(--accent)}.order-flow .price{position:relative;height:60px}.order-flow .cap{position:absolute;left:0;top:0;font-size:12px;font-weight:600;color:var(--ink-2);transition:opacity .3s}.order-flow .s1.conv .cap{opacity:0}.order-flow .eur{top:16px;font-size:30px}.order-flow .eur,.order-flow .rub{position:absolute;left:0;font-weight:800;letter-spacing:-.02em;transition:all .5s cubic-bezier(.2,.8,.2,1)}.order-flow .rub{top:22px;font-size:32px;opacity:0;transform:translateY(10px);font-variant-numeric:tabular-nums}.order-flow .eur .ins{display:none}.order-flow .s1.conv .eur .ins{display:inline}.order-flow .s1.conv .eur{top:0;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:line-through}.order-flow .s1.conv .rub{opacity:1;transform:none}.order-flow .rubnote{display:inline-flex;font-size:12px;color:#137A50;background:#DDF3E8;border-radius:999px;padding:4px 10px;font-weight:800;margin:2px 0 10px;opacity:0;transform:scale(.8);transform-origin:left center;transition:opacity .3s 1s,transform .4s cubic-bezier(.3,1.6,.5,1) 1s}.order-flow .rubnote i{width:8px;height:8px;border-radius:50%;background:var(--sun);display:block}.order-flow .s1.conv .rubnote{opacity:1;transform:none}.order-flow .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;font-size:14px;border:0}.order-flow .btn .t2{display:none}.order-flow .added .btn{background:var(--ok)}.order-flow .added .btn .t1{display:none}.order-flow .added .btn .t2{display:inline}.order-flow .btn:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);opacity:0}.order-flow .btn.press:after,.order-flow .press .btn:after{animation:of-ripple .6s ease-out}@keyframes of-ripple{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(22)}}.order-flow .s2head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 10px}.order-flow .s2head h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}.order-flow .cart{position:relative;width:46px;height:46px;border-radius:14px;background:var(--paper-2);display:grid;place-items:center}.order-flow .badge{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;transform:scale(0)}.order-flow .s2.b1 .badge{animation:of-pop .45s cubic-bezier(.3,1.6,.5,1) forwards}@keyframes of-pop{to{transform:scale(1)}}.order-flow .item{display:flex;align-items:center;gap:14px;margin:0 22px;padding:12px;border-radius:16px;background:var(--paper-2);opacity:0;transform:translateY(8px);transition:all .45s cubic-bezier(.2,.8,.2,1)}.order-flow .s2.in1 .item{opacity:1;transform:none}.order-flow .thumb{width:56px;height:56px;border-radius:12px;background:linear-gradient(160deg,#FDF1EA,#F4DCCF);display:grid;place-items:center;flex:none;overflow:hidden}.order-flow .thumb img{width:44px;height:auto;mix-blend-mode:multiply}.order-flow .item .nm{font-weight:800;font-size:14px}.order-flow .item .sub{font-size:12px;color:var(--ink-2);font-weight:600;margin-top:3px}.order-flow .item .pr{margin-left:auto;font-weight:800;font-size:16px;white-space:nowrap}.order-flow .sum{margin:10px 22px 0;display:grid;gap:7px;opacity:0;transition:opacity .4s}.order-flow .s2.in2 .sum{opacity:1}.order-flow .row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink-2)}.order-flow .row.save{color:#137A50;font-weight:800}.order-flow .row.tot{color:var(--ink);font-size:17px;font-weight:800;border-top:1.5px dashed #eadfd8;padding-top:10px}.order-flow .s2 .btn{position:absolute;left:22px;right:22px;bottom:20px;height:46px}.order-flow .s2 .btn .sbp{font-size:11px;letter-spacing:.2em;background:rgba(255,255,255,.2);border-radius:6px;padding:3px 6px}.order-flow .s3in{display:grid;grid-template-columns:176px 1fr;gap:24px;padding:26px}.order-flow .s3lab{position:absolute;left:26px;top:22px;font-size:13px;letter-spacing:.32em;color:rgba(255,255,255,.75);font-weight:600}.order-flow .qrbox{position:relative;margin-top:30px;width:176px;height:176px;background:#fff;border-radius:18px;padding:13px;overflow:hidden}.order-flow .qr{display:grid;grid-template-columns:repeat(15,1fr);gap:1.5px;width:150px;height:150px}.order-flow .qr i{background:var(--dark);border-radius:2px;transform:scale(0);display:block}.order-flow .qr i.off{background:transparent}.order-flow .s3.active .qr i{animation:of-pop .3s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--d)}.order-flow .scan{position:absolute;left:8px;right:8px;top:10px;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 14px 4px rgba(234,93,39,.55);opacity:0}.order-flow .s3.active .scan{animation:of-scan 1.3s ease-in-out .9s 1 forwards}@keyframes of-scan{0%{opacity:1;top:10px}50%{top:160px}90%{opacity:1;top:10px}to{opacity:0;top:10px}}.order-flow .paidmark{position:absolute;inset:0;background:rgba(18,161,80,.94);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .35s cubic-bezier(.3,1.5,.5,1)}.order-flow .s3.paid .paidmark{opacity:1;transform:none}.order-flow .s3r{padding-top:38px}.order-flow .s3r .k{font-size:13px;color:rgba(255,255,255,.65);font-weight:600}.order-flow .s3r .amt{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:4px 0 18px}.order-flow .status{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;background:var(--dark-2);border-radius:12px;padding:12px 14px;min-height:46px}.order-flow .status .ld{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:of-spin .8s linear infinite;flex:none}@keyframes of-spin{to{transform:rotate(1turn)}}.order-flow .status .wait{display:flex;align-items:center;gap:10px}.order-flow .status .done{display:none;color:#6BE3AE}.order-flow .s3.paid .status .wait{display:none}.order-flow .s3.paid .status .done{display:flex;align-items:center;gap:10px}.order-flow .bank{margin-top:12px;font-size:12px;color:rgba(255,255,255,.6);font-weight:600;line-height:1.5}.order-flow .s4head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 4px}.order-flow .s4head h3{margin:0;font-size:20px;font-weight:800}.order-flow .route{display:block;margin:0 auto}.order-flow .route .lbl{font:700 11px inherit;fill:#8B7C75}.order-flow .track{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:4px 22px 0}.order-flow .st{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:700;color:#B9ABA4;transition:color .3s}.order-flow .st i{width:20px;height:20px;border-radius:50%;border:2px solid #eadfd8;flex:none;display:grid;place-items:center;transition:all .3s}.order-flow .st i svg{opacity:0;transition:opacity .2s}.order-flow .st.on{color:var(--ink)}.order-flow .st.on i{background:var(--ok);border-color:var(--ok)}.order-flow .st.on i svg{opacity:1}.order-flow .got{position:absolute;right:22px;bottom:18px;left:22px;height:44px;border-radius:12px;background:var(--ok);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:all .4s cubic-bezier(.3,1.5,.5,1)}.order-flow .s4.fin .got{opacity:1;transform:none}.order-flow .conf{position:absolute;left:50%;bottom:40px;width:0;height:0}.order-flow .conf i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0}.order-flow .s4.fin .conf i{animation:of-burst 1.1s cubic-bezier(.2,.7,.3,1) forwards}@keyframes of-burst{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(260deg)}}.order-flow .cursor{position:absolute;left:0;top:0;width:26px;height:26px;opacity:0;z-index:5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}.order-flow .fly{position:absolute;left:0;top:0;width:58px;height:58px;border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);display:grid;place-items:center;opacity:0;z-index:6;overflow:hidden}.order-flow .fly img{width:44px;height:auto;mix-blend-mode:multiply}.order-flow .steps{list-style:none;margin:18px auto 0;padding:0;max-width:520px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.order-flow .steps li{display:flex}.order-flow .steps button{all:unset;cursor:pointer;display:block;width:100%;height:100%;box-sizing:border-box;border-radius:14px;padding:10px 10px 12px;background:rgba(255,255,255,.12);transition:background .3s}.order-flow .steps button:focus-visible{outline:2px solid #fff;outline-offset:2px}.order-flow .steps button.on{background:rgba(255,255,255,.24)}.order-flow .steps .n{font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.75)}.order-flow .steps .l{display:block;font-size:13px;font-weight:800;margin-top:3px;line-height:1.25;color:#fff}.order-flow .prog{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.22);margin-top:9px;overflow:hidden}.order-flow .prog b{display:block;height:100%;width:0;background:#fff;border-radius:3px}.order-flow .steps button.done .prog b{width:100%}.order-flow .steps button.on .prog b{animation:of-fill var(--dur) linear forwards}.order-flow .paused .steps button.on .prog b{animation-play-state:paused}@keyframes of-fill{to{width:100%}}.order-flow .ctrl{display:flex;justify-content:center;margin-top:12px}.order-flow .ctrl button{all:unset;cursor:pointer;font-size:13px;font-weight:700;color:rgba(255,255,255,.85);padding:6px 12px;border-radius:999px}.order-flow .ctrl button:focus-visible{outline:2px solid #fff}@media (max-width:480px){.order-flow .steps .l{font-size:11.5px}.order-flow .steps button{padding:8px 7px 10px}}@media (prefers-reduced-motion:reduce){.order-flow .eur,.order-flow .got,.order-flow .item,.order-flow .rub,.order-flow .scene{transition-duration:.01s!important}.order-flow .s3.active .qr i{animation-duration:.01s;animation-delay:0s!important}.order-flow .s3.active .scan,.order-flow .s4.fin .conf i,.order-flow .status .ld{animation:none}}