.m360{--orange:#efa352;--orange-deep:#d98a35;--ink:#1f1f23;--ink-2:#2a2a2f;--bg:#f3f4f6;--card:#fff;--stage:#f6f6f7;--muted:#5b5d66;--sky:#9cc7e6;--font-display:var(--font-speeday), "Arial Black", sans-serif;--font-body:var(--font-poppins), system-ui, sans-serif;--m360-scroll:240vh;font-family:var(--font-body);color:var(--ink);background:var(--bg);box-sizing:border-box;padding:clamp(24px,4vw,56px) clamp(16px,4vw,56px)}.m360 *,.m360 :before,.m360 :after{box-sizing:border-box}.m360__inner{max-width:1400px;margin:0 auto}.m360__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;transform-origin:0 100%;margin:0 0 18px;font-size:clamp(24px,3.6vw,50px);font-style:italic;font-weight:900;line-height:1.05;transform:skew(-6deg)}.m360__title span{color:var(--orange);display:block}.m360__lead{color:#33343a;margin:0 0 28px;font-size:clamp(15px,1.4vw,19px)}.m360__grid{grid-template-columns:minmax(0,2.55fr) minmax(300px,1fr);align-items:stretch;gap:clamp(16px,2.4vw,36px);display:grid}.m360__viewer{background:var(--card);border-radius:32px;flex-direction:column;gap:14px;padding:clamp(12px,2.2vw,30px);display:flex}.m360__stage{width:100%;aspect-ratio:var(--aspect);background:var(--stage);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:20px;outline:none;max-height:680px;margin:0 auto;position:relative;overflow:hidden;container-type:size}.m360__stage.is-dragging{cursor:grabbing}.m360__stage:focus-visible{box-shadow:0 0 0 3px var(--orange)}.m360__canvas{width:100%;aspect-ratio:var(--aspect);margin:auto;position:absolute;inset:0}@supports (width:1cqw){.m360__canvas{width:min(100cqw, 100cqh * var(--aspect))}}.m360__zoom{transform-origin:0 0;will-change:transform;--inv:1;transition:transform .55s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0}.m360__reset{z-index:6;background:var(--ink);color:#fff;font:600 13px/1 var(--font-body);cursor:pointer;opacity:0;pointer-events:none;border:0;border-radius:999px;align-items:center;gap:8px;padding:9px 14px 9px 12px;transition:opacity .25s,transform .25s,background .2s;display:flex;position:absolute;top:14px;right:14px;transform:translateY(-6px);box-shadow:0 4px 12px #0003}.m360__reset svg{width:16px;height:16px}.m360__reset:hover{background:#000}.m360__stage.is-zoomed .m360__reset{opacity:1;pointer-events:auto;transform:none}.m360__stage.is-zoomed .m360__hint{opacity:0}.m360__frames{object-fit:contain;mix-blend-mode:multiply;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.m360__dot{aspect-ratio:1;background:var(--orange);width:clamp(28px,3.2vw,44px);color:var(--ink);font:700 clamp(13px, 1.3vw, 18px)/1 var(--font-body);cursor:pointer;transform:translate(-50%,-50%)scale(1);scale:var(--inv);border:3px solid #fff;border-radius:50%;margin:0;padding:0;transition:opacity .2s,background .2s,color .2s,transform .2s,scale .55s cubic-bezier(.2,.8,.2,1);position:absolute;box-shadow:0 0 0 5px #efa35259,0 6px 14px #00000040}.m360__dot:hover{transform:translate(-50%,-50%)scale(1.1)}.m360__dot.is-active{background:var(--ink);color:#fff;z-index:3;box-shadow:0 0 0 5px #1f1f2340,0 6px 14px #0000004d}.m360__dot.is-hidden{opacity:0;pointer-events:none;transition-duration:80ms;transform:translate(-50%,-50%)scale(.6)}.m360__dot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.m360__hint{color:#fff;white-space:nowrap;pointer-events:none;z-index:4;background:#1f1f23d9;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;transition:opacity .4s;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.m360__hint.is-off{opacity:0}.m360__hint svg{width:18px;height:18px;animation:1.6s ease-in-out infinite m360-nudge}@keyframes m360-nudge{0%,to{transform:translate(-3px)}50%{transform:translate(3px)}}.m360__loading{background:var(--stage);color:var(--muted);z-index:5;text-align:center;pointer-events:none;place-items:center;padding:20px;font-size:14px;transition:opacity .3s;display:grid;position:absolute;inset:0}.m360__loading.is-off{opacity:0;pointer-events:none}.m360__switch{background:var(--bg);border-radius:999px;align-self:flex-start;gap:4px;padding:4px;display:flex}.m360__switch button{color:var(--muted);font:600 14px/1 var(--font-body);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:9px 16px;transition:background .2s,color .2s}.m360__switch button:hover{color:var(--ink)}.m360__switch button[aria-pressed=true]{background:var(--ink);color:#fff}.m360__switch button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.m360__controls{align-items:center;gap:12px;display:flex}.m360__arrow{background:var(--bg);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;transition:background .2s;display:grid}.m360__arrow:hover{background:#e4e6ea}.m360__arrow svg{width:18px;height:18px}.m360__range{appearance:none;background:#e1e3e8;border-radius:999px;outline:none;flex:1;height:6px;margin:0}.m360__range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);cursor:grab;border:3px solid #fff;border-radius:999px;width:56px;height:18px;box-shadow:0 2px 6px #00000040}.m360__range::-moz-range-thumb{background:var(--ink);cursor:grab;border:3px solid #fff;border-radius:999px;width:50px;height:12px;box-shadow:0 2px 6px #00000040}.m360__range:focus-visible{box-shadow:0 0 0 3px var(--orange)}.m360__panel{background:var(--ink);color:#fff;border-radius:32px;flex-direction:column;min-height:420px;padding:clamp(22px,2.4vw,36px);display:flex}.m360__eyebrow{align-items:center;gap:14px;margin-bottom:26px;display:flex}.m360__badge{background:var(--orange);width:48px;height:48px;color:var(--ink);border-radius:50%;flex:none;place-items:center;font-size:19px;font-weight:700;display:grid}.m360__zone{color:var(--sky);letter-spacing:.12em;text-transform:uppercase;font-size:13px;font-weight:600}.m360__name{margin:0 0 18px;font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.15}.m360__desc{color:#d9dadf;margin:0 0 22px;font-size:clamp(15px,1.25vw,18px);line-height:1.6}.m360__products{gap:10px;margin:0 0 24px;padding:0;list-style:none;display:grid}.m360__product{background:var(--ink-2);border:1px solid #ffffff14;border-radius:16px;align-items:center;gap:14px;padding:12px;display:flex}.m360__product i{width:72px;height:72px;color:var(--ink);background:#fff;border-radius:12px;flex:none;place-items:center;display:grid;overflow:hidden}.m360__product i img{object-fit:contain;width:100%;height:100%;padding:6px;display:block}.m360__product i svg{width:28px;height:28px;display:none}.m360__product i.no-img img{display:none}.m360__product i.no-img svg{display:block}.m360__product b{font-size:16px;font-weight:600;display:block}.m360__product small{color:#b9bbc3;font-size:13.5px;display:block}.m360__pns{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.m360__pn{color:#f6c48f;letter-spacing:.02em;background:#efa35229;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600;display:inline-block}.m360__pn--oem{color:#cfe4f3;background:#9cc7e629}.m360__fade{animation:.35s both m360-in}@keyframes m360-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.m360__foot{gap:14px;margin-top:auto;display:grid}.m360__steps{color:#b9bbc3;justify-content:space-between;align-items:center;font-size:13.5px;display:flex}.m360__steps button{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:50%;place-items:center;width:44px;height:44px;transition:background .2s;display:grid}.m360__steps button:hover{background:#ffffff1a}.m360__steps button svg{width:16px;height:16px}.m360__steps div{gap:8px;display:flex}.m360__cta{text-align:center;background:var(--orange);color:var(--ink);border-radius:999px;padding:17px 20px;font-size:17px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s;display:block}.m360__cta:hover{background:var(--orange-deep);transform:translateY(-1px)}.m360__note{color:#44464e;margin:22px 0 0;font-size:14.5px}.m360--pin{padding:0}.m360--pin .m360__track{height:calc(100vh + var(--m360-scroll))}.m360--pin .m360__inner{flex-direction:column;max-width:1512px;height:100vh;padding:clamp(14px,3vh,40px) clamp(16px,4vw,56px);display:flex;position:sticky;top:0}.m360--pin .m360__title{margin-bottom:clamp(8px,1.6vh,18px);font-size:clamp(22px,min(3.6vw,5.4vh),50px)}.m360--pin .m360__lead{margin-bottom:clamp(10px,2.2vh,28px)}.m360--pin .m360__grid{flex:1;min-height:0}.m360--pin .m360__viewer{min-height:0;padding:clamp(12px,2.2vh,30px)}.m360--pin .m360__stage{aspect-ratio:auto;flex:1;min-height:0;max-height:none}.m360--pin .m360__panel{min-height:0;padding:clamp(18px,3vh,36px);overflow:hidden}.m360--pin .m360__body{scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;flex:1;min-height:0;margin-right:-8px;padding-right:8px;overflow-y:auto}.m360--pin .m360__foot{margin-top:12px}.m360--pin .m360__products{margin-bottom:4px}.m360--pin .m360__eyebrow{margin-bottom:clamp(12px,2.4vh,26px)}.m360--pin .m360__note{margin-top:clamp(8px,1.6vh,22px)}@media (max-height:760px){.m360--pin .m360__product{padding:8px}.m360--pin .m360__product i{width:56px;height:56px}.m360--pin .m360__desc{margin-bottom:14px;line-height:1.45}.m360--pin .m360__products{gap:8px;margin-bottom:14px}.m360--pin .m360__cta{padding:13px 20px}}@media (max-width:900px){.m360__grid{grid-template-columns:1fr}.m360__viewer,.m360__panel{border-radius:24px}.m360__panel{min-height:0}.m360__foot{margin-top:8px}}@media (prefers-reduced-motion:reduce){.m360__hint svg,.m360__fade{animation:none}.m360__zoom,.m360__dot{transition:none}}
