/* NNB GIDA V320 — FINAL MOBILE PREMIUM OPTIMIZATION
   Loaded last. Mobile-only polish without changing desktop or admin behavior. */

@media (max-width:820px){
  :root{
    --nnb-mobile-side:max(12px,env(safe-area-inset-left));
    --nnb-mobile-side-r:max(12px,env(safe-area-inset-right));
    --nnb-mobile-bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px));
  }
  html{
    width:100%;
    overflow-x:hidden;
    scroll-padding-top:calc(env(safe-area-inset-top) + 72px);
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    background:#f5f5f7;
  }
  body{
    width:100%;
    min-width:0;
    overflow-x:clip;
    -webkit-tap-highlight-color:transparent;
    text-rendering:optimizeLegibility;
  }
  button,a,input{font-family:inherit}
  button,a,.card,.chip,.iconbtn,.detail-browser-close{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  body .app{
    width:100%;
    max-width:100%;
    padding-top:calc(env(safe-area-inset-top) + 7px)!important;
    padding-left:var(--nnb-mobile-side)!important;
    padding-right:var(--nnb-mobile-side-r)!important;
    padding-bottom:var(--nnb-mobile-bottom)!important;
  }

  /* Compact glass header that remains usable while browsing long catalogs. */
  body .apple-topbar{
    position:sticky!important;
    top:max(0px,env(safe-area-inset-top))!important;
    z-index:30!important;
    height:54px!important;
    margin:0 0 10px!important;
    padding:5px 6px!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:19px!important;
    background:rgba(247,247,249,.88)!important;
    box-shadow:0 10px 28px rgba(15,17,20,.055),inset 0 1px 0 rgba(255,255,255,.92)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
    transform:translateZ(0)!important;
  }
  body .iconbtn,body .center-mark{
    min-width:44px!important;
    width:44px!important;
    height:44px!important;
  }
  body .iconbtn:active{transform:scale(.94)!important}

  /* Banner uses the same material, radius and depth system as cards/chips. */
  body .apple-hero{margin:0 0 13px!important}
  body .apple-hero-visual{
    border-radius:28px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    box-shadow:0 18px 46px rgba(15,17,20,.065),inset 0 1px 0 rgba(255,255,255,.9)!important;
    transform:translateZ(0)!important;
  }
  body .apple-hero-visual img{
    transform:scale(1.018)!important;
    object-position:center 49%!important;
  }
  body.nnb-scrolling .banner-premium-shine:before{
    animation-play-state:paused!important;
  }

  /* Search + category control surface. 16px prevents Safari auto-zoom. */
  body .apple-tools{
    margin-bottom:17px!important;
    padding:7px!important;
    border-radius:25px!important;
    border:1px solid rgba(255,255,255,.76)!important;
    background:linear-gradient(180deg,rgba(251,251,252,.96),rgba(244,244,246,.97))!important;
    box-shadow:0 16px 38px rgba(15,17,20,.055),inset 0 1px 0 rgba(255,255,255,.94)!important;
  }
  body .search,body .apple-search{
    height:54px!important;
    min-height:54px!important;
    border-radius:18px!important;
    padding:0 15px!important;
  }
  body .apple-search input{
    min-width:0!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:730!important;
    caret-color:#111214;
  }
  body .apple-search input::placeholder{opacity:1!important;color:#92959b!important}
  body .apple-search input::-webkit-search-cancel-button{opacity:.62}

  body .chips{
    height:54px!important;
    min-height:54px!important;
    margin-top:7px!important;
    padding:5px!important;
    gap:6px!important;
    border-radius:18px!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:5px!important;
    touch-action:pan-x!important;
    overscroll-behavior-x:contain!important;
  }
  body .chip{
    min-height:42px!important;
    padding:0 13px!important;
    border-radius:14px!important;
    font-size:11px!important;
    scroll-snap-align:center!important;
    touch-action:pan-x!important;
  }
  body .chip small{min-width:21px!important;height:21px!important;font-size:9px!important}
  body .chip:active{transform:scale(.97)!important}

  /* High-density two-column catalog tuned for thumb use and stable fast scrolling. */
  body #grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
    align-items:stretch!important;
  }
  body #grid>.card{
    min-width:0!important;
    border-radius:22px!important;
    contain:layout paint style!important;
    content-visibility:auto!important;
    contain-intrinsic-size:270px 350px!important;
    touch-action:manipulation!important;
    box-shadow:0 12px 30px rgba(15,17,20,.055),0 2px 8px rgba(15,17,20,.025)!important;
  }
  body #grid>.card:active{
    transform:scale(.982)!important;
    box-shadow:0 7px 18px rgba(15,17,20,.045)!important;
  }
  body #grid .card-visual{
    margin:7px 7px 0!important;
    border-radius:17px!important;
  }
  body #grid .card-visual img{
    width:94%!important;
    height:94%!important;
    padding:7% 5% 13%!important;
  }
  body #grid .card-body{
    min-height:108px!important;
    padding:11px 11px 12px!important;
  }
  body #grid .name{
    min-height:40px!important;
    max-height:40px!important;
    margin:8px 0 9px!important;
    font-size:13.5px!important;
    line-height:1.08!important;
  }
  body #grid .cat{font-size:7px!important;letter-spacing:.14em!important}
  body #grid .card-weight{min-height:20px!important;padding:0 7px!important;font-size:7px!important}
  body #grid .card-brand{font-size:7px!important;letter-spacing:.13em!important}
  body #grid .card-open-label{display:none!important}
  body #grid .card-arrow{width:27px!important;height:27px!important;font-size:11px!important}
  body.nnb-scrolling #grid>.card,
  body.nnb-scrolling #grid .card-visual img,
  body.nnb-scrolling #grid .card-arrow{
    transition:none!important;
    animation:none!important;
  }

  /* Premium, viewport-safe mobile product sheet. */
  body #detailModal{
    top:max(7px,env(safe-area-inset-top))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    left:max(7px,env(safe-area-inset-left))!important;
    width:auto!important;
    height:calc(var(--nnb-mobile-vh,var(--nnb-visible-height,100dvh)) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px)!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:25px!important;
    box-shadow:0 28px 90px rgba(0,0,0,.25),0 2px 12px rgba(0,0,0,.07)!important;
    transform:translateY(18px) scale(.99)!important;
  }
  body #detailModal.show{transform:translateY(0) scale(1)!important}
  body #detailModal.closing{
    opacity:0!important;
    transform:translateY(15px) scale(.992)!important;
    transition:opacity .30s ease,transform .34s cubic-bezier(.4,0,.2,1)!important;
  }
  body #modalBack.detail-back.nnb-detail-back-closing{
    opacity:0!important;
    background:rgba(10,10,12,.18)!important;
    transition:opacity .30s ease!important;
    pointer-events:none!important;
  }
  body #detailModal .detail-wrap{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:8px!important;
    gap:8px!important;
  }
  body #detailModal .detail-browserbar{
    flex:0 0 auto!important;
    min-height:54px!important;
    margin:0!important;
    padding:6px 7px!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    border-radius:18px!important;
  }
  body #detailModal .detail-browser-brand,
  body #detailModal .detail-browser-close{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  body #detailModal .detail-browser-domain{font-size:13px!important}
  body #detailModal .detail-stage{
    flex:1 1 46%!important;
    min-height:190px!important;
    height:auto!important;
    border-radius:19px!important;
  }
  body #detailModal .detail-photo{height:100%!important;min-height:0!important}
  body #detailModal .detail-photo img{
    width:94%!important;
    height:94%!important;
    padding:5% 5% 13%!important;
    filter:drop-shadow(0 16px 19px rgba(13,15,18,.11))!important;
  }
  body #detailModal .detail-info{
    flex:1 1 50%!important;
    min-height:0!important;
    max-height:50%!important;
    padding:13px 12px 14px!important;
    border-radius:19px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body #detailModal .detail-kicker{min-height:25px!important;padding:0 9px!important;font-size:7px!important}
  body #detailModal .detail-title{
    margin:11px 0 6px!important;
    font-size:clamp(25px,7vw,34px)!important;
    line-height:.97!important;
  }
  body #detailModal .detail-sub{font-size:9px!important}
  body #detailModal .detail-specs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-top:13px!important;
  }
  body #detailModal .detail-spec{padding:9px 10px!important;border-radius:13px!important}
  body #detailModal .detail-spec small{font-size:7px!important}
  body #detailModal .detail-spec b{font-size:11.5px!important}

  body .signature-footer{padding-bottom:max(4px,env(safe-area-inset-bottom))!important}
}

@media (max-width:390px){
  body .app{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  body .apple-topbar{border-radius:17px!important}
  body .apple-hero-visual{border-radius:25px!important}
  body .apple-tools{padding:6px!important;border-radius:22px!important}
  body .search,body .apple-search{height:52px!important;min-height:52px!important;border-radius:17px!important}
  body .chips{height:52px!important;min-height:52px!important;border-radius:17px!important}
  body .chip{min-height:40px!important;padding:0 11px!important;font-size:10.5px!important}
  body #grid{gap:9px!important}
  body #grid>.card{border-radius:20px!important}
  body #grid .card-visual{margin:6px 6px 0!important;border-radius:16px!important}
  body #grid .card-body{padding:10px!important}
  body #grid .name{font-size:12.8px!important}
}

@media (max-width:350px){
  body #grid{gap:8px!important}
  body #grid .card-weight{display:none!important}
  body #grid .name{font-size:12.2px!important}
  body #detailModal{left:5px!important;right:5px!important;top:max(5px,env(safe-area-inset-top))!important;bottom:max(5px,env(safe-area-inset-bottom))!important}
  body #detailModal .detail-wrap{padding:6px!important;gap:6px!important}
  body #detailModal .detail-browserbar{grid-template-columns:38px minmax(0,1fr) 38px!important}
  body #detailModal .detail-browser-brand,body #detailModal .detail-browser-close{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  body #detailModal .detail-title{font-size:23px!important}
}

@media (orientation:landscape) and (max-height:620px) and (max-width:950px){
  body #detailModal .detail-wrap{
    display:grid!important;
    grid-template-columns:minmax(0,45%) minmax(0,55%)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:7px 9px!important;
  }
  body #detailModal .detail-browserbar{grid-column:1/-1!important;grid-row:1!important}
  body #detailModal .detail-stage{grid-column:1!important;grid-row:2!important;min-height:0!important}
  body #detailModal .detail-info{grid-column:2!important;grid-row:2!important;max-height:none!important;padding:8px 9px!important}
  body #detailModal .detail-title{font-size:clamp(22px,4.2vw,30px)!important}
  body #detailModal .detail-specs{margin-top:9px!important}
}

@media (hover:none) and (pointer:coarse){
  body #grid>.card:hover,
  body .chip:hover,
  body .apple-search:hover,
  body .apple-hero-visual:hover{transform:none!important}
  body #grid>.card:hover .card-visual img{transform:translateY(-1%) scale(1)!important}
}

@media (prefers-reduced-motion:reduce){
  body .apple-topbar,body .apple-hero-visual,body .apple-hero-visual img,
  body .apple-search,body .apple-search svg,body .chip,body #grid>.card,
  body #detailModal,body #detailModal *{transition:none!important;animation:none!important}
}