@media screen and (max-width:768px){#step-gallery{height:calc(100vh - 115px)!important;min-height:calc(100vh - 115px)!important;max-height:calc(100vh - 115px)!important;overflow:hidden!important;padding:0!important;margin:0!important}.gallery-scroll-container{height:100%!important;overflow:hidden!important}.gallery-scroll-layout{height:100%!important;display:flex!important;flex-direction:column!important;gap:.5rem!important;padding:.5rem!important;overflow:hidden!important}.gallery-mockup-sticky{position:relative!important;flex:0 0 auto!important;height:auto!important;padding:0!important;margin:0 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;max-height:45vh!important;overflow:visible!important}.gallery-left-col{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important}.mockup-preview-box,#gallery-mockup-box{width:160px!important;height:320px!important;max-width:160px!important;max-height:320px!important;margin:0 auto .5rem!important;flex-shrink:0!important}#gallery-preview-img,#gallery-case-overlay,.gallery-design-preview,.case-overlay-img{width:100%!important;height:100%!important;object-fit:contain!important}.gallery-design-clip-wrapper{width:100%!important;height:100%!important}.gallery-zoom-control,#gallery-zoom-control,.gallery-drag-hint,.gallery-sticky-title,#gallery-sticky-title{display:none!important}.gallery-designs-scroll{position:relative!important;flex:0 0 auto!important;height:110px!important;max-height:110px!important;overflow-x:auto!important;overflow-y:hidden!important;display:flex!important;flex-direction:row!important;gap:.5rem!important;padding:.5rem!important;margin:0!important;-webkit-overflow-scrolling:touch!important;scroll-behavior:smooth!important}.theme-section,.design-scroll-grid{display:flex!important;flex-direction:row!important;gap:.5rem!important;flex-shrink:0!important}.design-card{flex:0 0 auto!important;width:85px!important;height:85px!important;min-width:85px!important;min-height:85px!important;border-radius:8px!important;overflow:hidden!important;cursor:pointer!important;transition:transform .2s ease!important}.design-card:active{transform:scale(.95)!important}.design-card img{width:100%!important;height:100%!important;object-fit:cover!important}.mobile-action-buttons{position:relative!important;flex:0 0 auto!important;width:100%!important;padding:.5rem!important;background:#fff!important;display:flex!important;flex-direction:column!important;gap:.5rem!important;margin-top:auto!important}.mobile-upload-ai-row{display:flex!important;gap:.5rem!important;width:100%!important}.mobile-upload-ai-row button,.mobile-upload-ai-row .gallery-upload-btn,.mobile-upload-ai-row .gallery-ai-btn{flex:1!important;padding:.6rem .8rem!important;font-size:.85rem!important;border-radius:8px!important;font-weight:600!important}.mobile-order-btn,#mobile-order-btn{width:100%!important;padding:.8rem 1rem!important;font-size:1rem!important;font-weight:700!important;border-radius:10px!important;background:linear-gradient(135deg,#44e5c4,#31c1c1)!important;color:#1a2a3a!important;border:none!important;box-shadow:0 4px 15px #44e5c466!important}.gallery-upload-section,.gallery-back-btn:not(.gallery-back-btn-mobile),.gallery-right-col,.gallery-action-buttons,.mobile-action-bar,.mobile-action-buttons,.mobile-upload-ai-row,.action-buttons,#mobile-gallery-bar{display:none!important}.gallery-back-btn-mobile{position:absolute!important;top:.5rem!important;left:.5rem!important;z-index:10!important;background:#ffffffe6!important;padding:.4rem .8rem!important;border-radius:8px!important;font-size:.8rem!important;border:1px solid #ddd!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}.gallery-scroll-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:5!important;background:#ffffffe6!important;border:1px solid #ddd!important;border-radius:50%!important;width:32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.2rem!important;color:#1a2a3a!important;cursor:pointer!important;box-shadow:0 2px 8px #0000001a!important}.gallery-scroll-arrow.left{left:.5rem!important}.gallery-scroll-arrow.right{right:.5rem!important}.mobile-ai-overlay{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:#000c!important;z-index:9999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:1rem!important}.mobile-ai-overlay.hidden{display:none!important}.mobile-ai-box{background:#fff!important;border-radius:16px!important;padding:1.5rem!important;max-width:400px!important;width:100%!important}.mobile-ai-box h3{margin-top:0!important;margin-bottom:.5rem!important}.mobile-ai-box textarea{width:100%!important;min-height:80px!important;padding:.75rem!important;border:1px solid #ddd!important;border-radius:8px!important;font-size:1rem!important;resize:vertical!important}.mobile-ai-box button{width:100%!important;padding:.8rem!important;margin-top:1rem!important;background:linear-gradient(135deg,#4facfe,#00f2fe)!important;color:#1a2a3a!important;border:none!important;border-radius:10px!important;font-weight:700!important;font-size:1rem!important}.desktop-only{display:none!important}.mobile-controls-overlay{display:flex!important;flex-direction:column;gap:12px;position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:20}.mobile-controls-left{display:flex!important;flex-direction:column;gap:12px;position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:20}.mobile-control-btn{width:60px;height:60px;padding:2px;border-radius:18px;background:#fffffffa;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 12px #00000014;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:#2c3e50;transition:all .2s ease}.mobile-control-btn:active{transform:scale(.94);box-shadow:0 1px 6px #0000001a}.mobile-control-btn svg{width:22px;height:22px;stroke-width:2}.ai-btn-mobile{width:64px!important;height:64px!important;padding:0!important;background:linear-gradient(135deg,#4facfe,#00f2fe)!important;border:none!important;box-shadow:0 6px 20px #00f2fe73!important;animation:usp-pulse 2s ease-in-out infinite}.ai-btn-mobile svg{color:#fff!important;width:24px!important;height:24px!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.ai-btn-mobile span{color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1}.upload-btn-mobile{width:64px!important;height:64px!important;padding:0!important;background:linear-gradient(135deg,#20c997,#17a2b8)!important;border:none!important;box-shadow:0 6px 20px #20c99773!important;animation:usp-pulse 2s ease-in-out infinite .5s;margin-top:8px}.upload-btn-mobile svg{color:#fff!important;width:24px!important;height:24px!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.upload-btn-mobile span{color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1}.transform-btn-mobile{width:64px!important;height:64px!important;padding:0!important;background:linear-gradient(135deg,#e53ebc,#ff6b9d)!important;border:none!important;box-shadow:0 6px 20px #e53ebb73!important;animation:usp-pulse 2s ease-in-out infinite .25s;margin-bottom:8px}.transform-btn-mobile svg{color:#fff!important;stroke:#fff!important;width:24px!important;height:24px!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.transform-btn-mobile span{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1}@keyframes usp-pulse{0%,to{transform:scale(1);box-shadow:0 6px 20px #20c99759}50%{transform:scale(1.05);box-shadow:0 8px 28px #20c99780}}.enlarge-btn-mobile{background:linear-gradient(145deg,#e8fef6,#d8f5ec);border:1px solid rgba(32,201,151,.15);box-shadow:0 2px 8px #0000000f}.enlarge-btn-mobile svg{color:#4a5568}.back-btn-mobile{background:linear-gradient(145deg,#eef6ff,#e0efff);border:1px solid rgba(59,130,246,.15);box-shadow:0 2px 8px #0000000f}.back-btn-mobile svg{color:#4a5568}.clear-btn-mobile{background:linear-gradient(145deg,#fff2f2,#ffe8e8);border:1px solid rgba(239,68,68,.15);box-shadow:0 2px 8px #0000000f}.clear-btn-mobile svg{color:#718096}.mobile-info-corner{display:flex!important;position:relative;right:auto;top:auto;z-index:20;width:60px;height:60px;border-radius:18px;background:#fff;border:1px solid rgba(255,183,0,.2);box-shadow:0 4px 15px #ffb70040;align-items:center;justify-content:center;cursor:pointer;color:#fcc419;animation:bulb-float 3s ease-in-out infinite}.info-icon-inner{width:26px;height:26px;z-index:2;filter:drop-shadow(0 0 5px rgba(255,183,0,.6));animation:bulb-flicker 4s infinite}.pulse-ring{position:absolute;width:100%;height:100%;border-radius:18px;border:1px solid #fcc419;animation:pulse-expand-gold 2s ease-out infinite;opacity:0}@keyframes bulb-float{0%,to{transform:translateY(0);box-shadow:0 4px 15px #ffb70040}50%{transform:translateY(-2px);box-shadow:0 8px 20px #ffb70066}}@keyframes bulb-flicker{0%,to{opacity:1;filter:drop-shadow(0 0 5px rgba(255,183,0,.6))}90%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,183,0,.6))}92%{opacity:.8;filter:drop-shadow(0 0 2px rgba(255,183,0,.3))}94%{opacity:1;filter:drop-shadow(0 0 8px rgba(255,183,0,.8))}96%{opacity:.9;filter:drop-shadow(0 0 4px rgba(255,183,0,.5))}}@keyframes pulse-expand-gold{0%{transform:scale(1);opacity:.6}to{transform:scale(1.6);opacity:0}}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;display:flex;align-items:center;justify-content:center}.tutorial-overlay.hidden{display:none}.tutorial-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tutorial-content{position:relative;width:90%;max-width:340px;background:#fff;border-radius:20px;box-shadow:0 25px 80px #0000004d;overflow:hidden;animation:tutorialSlideIn .25s ease-out}@keyframes tutorialSlideIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.tutorial-header{display:flex;justify-content:center;align-items:center;padding:18px 20px;background:linear-gradient(135deg,#20c997,#0ca678);color:#fff;position:relative}.tutorial-header h3{margin:0;font-size:18px;font-weight:600}.tutorial-close{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:#fff3;border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.tutorial-list{padding:8px 0}.tutorial-row{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid #f0f0f0}.tutorial-row:last-child{border-bottom:none}.tutorial-btn-replica{width:50px;height:50px;border-radius:18px;background:#fffffffa;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 12px #00000014;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#2c3e50}.tutorial-btn-replica svg{width:22px;height:22px;stroke-width:2}.tutorial-btn-replica span{font-size:12px;font-weight:700;color:#b8860b}.tutorial-btn-replica.ai{background:linear-gradient(135deg,#4facfe,#00f2fe)!important;border:none;box-shadow:0 4px 12px #00f2fe59}.tutorial-btn-replica.ai svg{color:#fff}.tutorial-btn-replica.upload{background:linear-gradient(135deg,#20c997,#17a2b8)!important;border:none;box-shadow:0 4px 12px #20c99759}.tutorial-btn-replica.upload svg{color:#fff}.tutorial-btn-replica.enlarge{background:linear-gradient(145deg,#e8fef6,#d8f5ec);border:1px solid rgba(32,201,151,.12)}.tutorial-btn-replica.enlarge svg{color:#4a5568}.tutorial-btn-replica.back{background:linear-gradient(145deg,#eef6ff,#e0efff);border:1px solid rgba(59,130,246,.12)}.tutorial-btn-replica.back svg{color:#4a5568}.tutorial-btn-replica.delete{background:linear-gradient(145deg,#fff2f2,#ffe8e8);border:1px solid rgba(239,68,68,.12)}.tutorial-btn-replica.delete svg{color:#718096}.tutorial-text{display:flex;flex-direction:column;gap:2px}.tutorial-text strong{font-size:15px;font-weight:600;color:#1a2a3a}.tutorial-text span{font-size:13px;color:#6b7c8a}.tutorial-tip{text-align:center;padding:14px 20px;background:#f8f9fa;font-size:13px;color:#5a6a7a;border-top:1px solid #f0f0f0}}
/*# sourceMappingURL=/cdn/shop/t/15/assets/mobile-gallery.css.map */