/* Legacy embedded preview only. The five-section customer app owns its layout. */
/* Customer Menu: two native panel scrollers inside the scrollable WebApp page.
 * The page owns header/hero/panels/footer scrolling. Its content does not shrink
 * to the viewport remainder below the hero. At a panel boundary, native scroll
 * chaining can reach #webapp; the sibling panel keeps its own scrollTop.
 * Home, full-screen Cart/Profile, booking and widths <= 900px keep their layout.
 */
@media (min-width:901px) {
  body.customer-direct #webapp {
    --cw-panel-wrap-width:calc(100% - 32px);
  }
  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) {
    /* This is the outer customer page, also when opened over the management UI.
     * Keep its existing scroll owner for customer navigation's root.scrollTo. */
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto;
  }

  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) > .webnav,
  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) > .cw-mobile-nav {
    flex-shrink:0;
    position:static!important;
  }

  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) > .cw-wrap {
    flex:0 0 auto!important;
    min-height:0;
    min-width:0;
    width:var(--cw-panel-wrap-width,100%);
    margin-block:0!important;
    overflow:visible;
  }

  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) > .cw-wrap > .cw-layout {
    min-height:0;
    min-width:0;
    align-items:start!important;
    overflow:visible;
  }

  body:not(.customer-direct) #webapp.on:not(.cw-view-home):not(.cw-view-cart):not(:has(> .cw-mobile-page:not([hidden]))):has(> .cw-wrap > .cw-layout) > .cw-wrap > .cw-layout > :is(.cw-menu,.cw-cart) {
    position:static!important;
    align-self:start;
    box-sizing:border-box;
    height:auto!important;
    /* Generous ceiling, independent of hero height; short panels stay natural.
     * svh keeps panel height stable as mobile browser chrome opens/closes.
     * On very short windows the outer page can scroll past a taller panel. */
    max-height:max(28rem,calc(100vh - 2rem));
    max-height:max(28rem,calc(100svh - 2rem));
    min-height:0;
    min-width:0;
    overflow-x:hidden;
    overflow-y:auto!important;
    overscroll-behavior-y:auto;
    scrollbar-gutter:stable;
    overflow-anchor:none;
    scroll-snap-type:none;
    scroll-behavior:auto;
    scroll-padding-block:16px;
    -webkit-overflow-scrolling:touch;
  }
}
@media (min-width:1200px) {
  body.customer-direct #webapp {
    --cw-panel-wrap-width:calc(100% - 64px);
  }
}