/* ZUPIX MOBILE-024 — robust mobile catalogue portal.
   Fixes catalogue sheet clipping/partial rendering inside the header on Android browsers. */

@media (max-width:760px){
  /* The hidden attribute must always win over older mobile layers that force
     display:flex on the catalogue shell. */
  html body > .z18-catalog-mega[hidden]{
    display:none!important;
  }

  /* MOBILE-024 portals the catalogue directly under BODY. This prevents
     position:fixed from being clipped/rebased by header/backdrop/transform
     contexts on Android Chromium and embedded browsers. */
  html body > .z18-catalog-mega{
    position:fixed!important;
    z-index:4900!important;
    inset:max(8px,env(safe-area-inset-top,0px)) 8px calc(var(--z22-mobile-nav-h,74px) + var(--z20-safe-bottom,0px) + 8px)!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:1px solid rgba(221,225,236,.98)!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 28px 90px rgba(16,24,48,.25),0 3px 12px rgba(16,24,48,.08)!important;
    transform:translateY(16px) scale(.985)!important;
    transform-origin:50% 100%!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s!important;
    box-sizing:border-box!important;
  }
  html body.z24-catalog-open > .z18-catalog-mega:not([hidden]){
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Backdrop separates the catalogue from the page while the bottom nav stays
     above it and remains the secondary close affordance. */
  html body > .z24-catalog-backdrop[hidden]{display:none!important}
  html body > .z24-catalog-backdrop{
    position:fixed!important;
    z-index:4850!important;
    inset:0!important;
    display:block!important;
    background:rgba(18,24,39,.24)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .18s ease,visibility .18s!important;
  }
  html body.z24-catalog-open > .z24-catalog-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.z24-catalog-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  /* Ensure the same desktop catalogue content has a predictable mobile frame. */
  html body > .z18-catalog-mega .z23-mobile-catalog-head{
    display:grid!important;
    flex:0 0 58px!important;
  }
  html body > .z18-catalog-mega .z18-catalog-mega-inner{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body > .z18-catalog-mega .z18-catalog-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body > .z18-catalog-mega .z18-mega-panel{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  /* Bottom navigation remains above backdrop/sheet and always responds. */
  html body .z20-mobile-nav{z-index:5000!important}
}

@media (max-width:390px){
  html body > .z18-catalog-mega{
    left:6px!important;
    right:6px!important;
    border-radius:21px!important;
  }
  html body > .z18-catalog-mega .z23-mobile-catalog-head{
    grid-template-columns:minmax(0,1fr) auto 40px!important;
    padding-left:13px!important;
  }
  html body > .z18-catalog-mega .z23-mobile-catalog-head>b{font-size:17px!important}
}

@media (prefers-reduced-motion:reduce){
  html body > .z18-catalog-mega,
  html body > .z24-catalog-backdrop{transition:none!important}
}