/* store-wide.css — wide (≥901px). Panel ALWAYS fits viewport; tiles may scroll the page. * Active when */ html.ionic-store.store-wide, html.ionic-store.store-wide body { height: 100% !important; max-height: 100dvh !important; overflow: hidden !important; /* page itself doesn't scroll; stage does */ margin: 0 !important; } html.ionic-store.store-wide .app { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; height: 100% !important; max-height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Left rail: always within viewport height; never induces page scroll */ html.ionic-store.store-wide .rail { display: flex !important; flex-direction: column !important; flex: 0 0 268px !important; width: 268px !important; max-width: 268px !important; height: auto !important; max-height: calc(100dvh - 28px) !important; min-height: 0 !important; align-self: flex-start !important; margin: 14px 0 14px 14px !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } html.ionic-store.store-wide .nav, html.ionic-store.store-wide .nav.glass { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 10px 8px !important; margin: 0 !important; overflow: hidden !important; } html.ionic-store.store-wide .brand { flex: 0 0 auto !important; } html.ionic-store.store-wide .nav .pills, html.ionic-store.store-wide .pills { display: grid !important; grid-template-columns: 1fr 1fr !important; flex: 0 0 auto !important; overflow: hidden !important; gap: 6px !important; padding: 6px 0 !important; margin: 0 !important; } html.ionic-store.store-wide .pill { font-size: 12px !important; min-width: 0 !important; } html.ionic-store.store-wide .pill__label { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Music: stacked, fills rail width, shrinks so EQ always fits in viewport */ html.ionic-store.store-wide #radio, html.ionic-store.store-wide #radio.lmp, html.ionic-store.store-wide .radio { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; margin: 6px 0 0 !important; padding: 0 !important; gap: 6px !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; box-sizing: border-box !important; } html.ionic-store.store-wide #radio .lmp-art-slot { display: block !important; flex: 1 1 auto !important; min-height: 72px !important; max-height: 160px !important; width: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; overflow: hidden !important; border-radius: 10px !important; } html.ionic-store.store-wide #radio .lmp-art { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } html.ionic-store.store-wide #radio .lmp-title, html.ionic-store.store-wide #radio .lmp-seek, html.ionic-store.store-wide #radio input.lmp-seek, html.ionic-store.store-wide #radio .lmp-times, html.ionic-store.store-wide #radio .lmp-controls, html.ionic-store.store-wide #radio .lmp-vol-row, html.ionic-store.store-wide #radio .lmp-eq { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html.ionic-store.store-wide #radio .lmp-seek, html.ionic-store.store-wide #radio input.lmp-seek[type="range"] { display: block !important; height: 18px !important; margin: 0 !important; } html.ionic-store.store-wide #radio .lmp-times { display: flex !important; } html.ionic-store.store-wide #radio .lmp-vol-row { display: flex !important; align-items: center !important; gap: 8px !important; } html.ionic-store.store-wide #radio .lmp-eq { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; height: 56px !important; min-height: 40px !important; max-height: 56px !important; width: 100% !important; flex: 0 0 56px !important; } html.ionic-store.store-wide #radio .lmp-audio, html.ionic-store.store-wide #radio audio { position: absolute !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } html.ionic-store.store-wide .legal, html.ionic-store.store-wide #legal, html.ionic-store.store-wide .rail > .legal { flex: 0 0 auto !important; position: relative !important; margin: 6px 0 0 !important; padding: 0 4px 4px !important; text-align: center !important; width: 100% !important; } /* Tile column: ONLY this scrolls */ html.ionic-store.store-wide .store-stage { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 20px 28px 28px 26px !important; box-sizing: border-box !important; align-self: stretch !important; } html.ionic-store.store-wide .store-shelf { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; height: auto !important; align-content: start !important; } html.ionic-store.store-wide .store-tile { width: 100% !important; height: auto !important; min-height: min-content !important; max-height: none !important; align-self: start !important; overflow: hidden !important; } html.ionic-store.store-wide .store-tile__media { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; } /* --- store213 wide: cover MUST span full rail (min-width 100%) --- */ html.ionic-store.store-wide #radio .lmp-art-slot { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(200px, 28vh) !important; aspect-ratio: 1 / 1 !important; flex: 0 1 auto !important; align-self: stretch !important; margin: 0 !important; box-sizing: border-box !important; } html.ionic-store.store-wide #radio .lmp-art { width: 100% !important; min-width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; } html.ionic-store.store-wide #radio .lmp-eq { display: block !important; visibility: visible !important; height: 48px !important; min-height: 36px !important; flex: 0 0 48px !important; }