close to the header and keep the social feed at the same logical width/gutters used by the desktop Products reference. The parent reference canvas handles browser zoom, so these values must not shrink at page-level media-query breakpoints. */ :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-account .page-wrapper > main[role="main"], :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-account main[role="main"] { margin-top: 0 !important; padding-top: 0 !important; } :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-account .page-wrapper > .right-sidebar, :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-account aside.right-sidebar { display: block !important; visibility: visible !important; position: fixed !important; top: 72px !important; right: 12px !important; width: 400px !important; min-width: 400px !important; max-width: 400px !important; height: calc(var(--vsl-desktop-canvas-height) - 72px) !important; min-height: 0 !important; margin: 0 !important; padding: 0 17px 0 24px !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; pointer-events: auto !important; } /* ------------------------------------------------------------------------- Generic/profile desktop right rail ------------------------------------------------------------------------- Named routes already receive a fixed rail above. Profile/u.php and other shared-header routes may use the same product feed without a route-specific lock, so give those routes the same 1920-reference rail from first paint. */ :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body:is(.vsl-layout-profile,.vsl-layout-auto,.vsl-layout-messages) .page-wrapper > .right-sidebar, :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body:is(.vsl-layout-profile,.vsl-layout-auto,.vsl-layout-messages) aside.right-sidebar { display: block !important; visibility: visible !important; position: fixed !important; top: 72px !important; right: 12px !important; bottom: auto !important; width: 400px !important; min-width: 400px !important; max-width: 400px !important; height: calc(var(--vsl-desktop-canvas-height) - 72px) !important; min-height: 0 !important; max-height: calc(var(--vsl-desktop-canvas-height) - 72px) !important; margin: 0 !important; padding: 0 17px 0 24px !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; pointer-events: auto !important; } /* ------------------------------------------------------------------------- Messages desktop top alignment ------------------------------------------------------------------------- Keep the messages main workspace on the requested shared-header desktop start line without changing its columns, widths, or internal message UI. */ :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-messages .page-wrapper > main[role="main"], :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-messages main[role="main"] { margin-top: -9px !important; } /* The live Messages markup uses a plain

without role="main". Keep the page's existing top placement, but provide a first-paint logical-height fallback until viewport-layout.js measures the exact remaining viewport. */ :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-messages .page-wrapper > main, :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-layout-messages main { height: calc(var(--vsl-desktop-canvas-height) - var(--vsl-header-h) - 24px) !important; max-height: calc(var(--vsl-desktop-canvas-height) - var(--vsl-header-h) - 24px) !important; min-height: 0 !important; } /* ------------------------------------------------------------------------- Final desktop rail viewport lock ------------------------------------------------------------------------- All shared product-feed rails keep their route-specific top and width, but their lower edge is always the visible browser viewport. This prevents a calculated logical height from being clipped by browser chrome, zoom or OS display scaling on compact desktop devices. */ :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-adaptive-desktop-route .page-wrapper > .right-sidebar, :is(html.vsl-reference-desktop-active, html.vsl-standard-desktop-boot) body.vsl-adaptive-desktop-route aside.right-sidebar { bottom: 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; }