/* ============================================================ IPOO — Viewport Lock Forces every UI pixel inside the 430px centered frame. Loaded LAST so these rules win across every screen. Strategy: - html/body: never scroll, mask the desktop gutter - #shell: the one fixed column; its transform already clips all fixed/absolute descendants - the only elements that can ESCAPE #shell are the few mounted directly on : #splash-screen, #snack-wrap, plus the JS-created #np-snack-wrap / #home-notifications. Those are pinned to the frame explicitly below. ============================================================ */ /* 1. Hard page lock — no body/html scroll, ever */ html, body { position: relative !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100vw !important; min-width: 0 !important; overflow: hidden !important; overflow-x: clip !important; overflow-y: clip !important; background: #F5F0EC !important; /* warm desktop gutter */ overscroll-behavior: none !important; } /* 2. Desktop gutter behind the frame */ body::before { content: '' !important; position: fixed !important; inset: 0 !important; background: #F5F0EC !important; z-index: 0 !important; } /* 3. Shell — the single visible column */ #shell { position: fixed !important; left: 50% !important; top: 0 !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; height: 100dvh !important; overflow: hidden !important; z-index: 10 !important; background: var(--md-surface, #FFFFFF) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.06) !important; } /* 4. All screens — never wider than the frame */ .screen { left: 0 !important; right: 0 !important; width: min(430px, 100vw) !important; max-width: 430px !important; margin: 0 auto !important; overflow: hidden !important; } /* 5. Navigation — pinned inside the frame */ nav#nav-home, .bottom-nav { position: fixed !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; z-index: 50000 !important; } /* 6. Splash — body-level overlay, pinned to frame */ #splash-screen { position: fixed !important; left: 50% !important; top: 0 !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; z-index: 100000 !important; margin: 0 !important; } /* 6b. Splash restored INSIDE #shell — strictly within the 430px app border Fixed + high z-index so home/bottom nav never shows on top of splash. Visual result is exactly the shell's rectangle (430px centered), not full viewport. */ #shell #splash-screen { position: fixed !important; left: 50% !important; top: 0 !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; height: 100dvh !important; z-index: 100000 !important; margin: 0 !important; overflow: hidden !important; } #shell #splash-screen.hidden { z-index: -1 !important; pointer-events: none !important; } /* While splash is visible, bottom nav must stay underneath it */ body:has(#splash-screen:not(.hidden)) nav#nav-home, body:has(#shell #splash-screen:not(.hidden)) nav#nav-home { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* 7. Toast / snack — body-level, pinned to frame */ #snack-wrap, #np-snack-wrap, #home-notifications { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; box-sizing: border-box !important; padding: 0 8px !important; pointer-events: none !important; z-index: 90 !important; } /* 8. Bottom sheets — stay inside */ #shell > .sheet-bg { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: 430px !important; margin: 0 auto !important; z-index: 100 !important; } /* 9. Auth overlay — contained */ #ipoo-auth-root { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: 430px !important; margin: 0 auto !important; z-index: 1001 !important; } /* 10. Overflow fence for body-level overlays that may be created dynamically and appended to (modals, dialogs, scrims). Only constrains width/centering — never overrides the shell's own transform clipping for in-shell fixed descendants. */ body > .modal-overlay, body > [role="dialog"], body > .rdm-scrim, body > .toast-container { position: fixed !important; left: 50% !important; top: 0 !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; box-sizing: border-box !important; } /* 11. Floating cart / bottom action bars mounted on body */ body > #catpage-floating-cart-btn, body > [class*="bottom-bar"], body > [class*="bottom-btn"], body > [class*="floating-cart"], body > [class*="floating-btn"] { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 430px !important; box-sizing: border-box !important; } /* 12. Oversized media can never create horizontal scroll */ img, svg, video, canvas, iframe { max-width: 100% !important; height: auto !important; } /* 13. Decorative bleeds are clipped by the shell; keep them in-flow */ .wl-orb, .wl-ring { overflow: hidden !important; } /* 14. Print — full width, no restrictions */ @media print { html, body, #shell, .screen, #splash-screen, #snack-wrap, #np-snack-wrap, #home-notifications, .modal-overlay, nav#nav-home { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; box-shadow: none !important; } body::before { display: none !important; } } /* Samsung S21 and similar 360px Android screens. */ @media (min-width: 350px) and (max-width: 380px) { html { font-size: 16px !important; } button, input, select, textarea { font-size: 16px !important; } button, input, select { min-height: 46px; } .ipoo-auth-popup .ipoo-primary-btn, .ipoo-auth-popup .ipoo-auth-link { min-height: 48px !important; } .bottom-nav button, nav#nav-home button { min-height: 52px; } }