/* QasirNet /app layout: WebView reserves system bars. Consistent compact bottom navigation. */
:root{--qn-bottom:58px;--qn-nav:58px;--qn-native-top:21px}
html body.qnd-native{padding-bottom:62px!important}
html body.qnd-native .qnd-bottom{position:fixed!important;inset:auto 0 0!important;bottom:0!important;top:auto!important;width:100%!important;max-width:760px!important;height:58px!important;min-height:58px!important;padding:0 7px!important;margin:0 auto!important;align-items:center!important;align-content:center!important;row-gap:0!important;box-shadow:none!important;background:#fff!important;border-radius:0!important;box-sizing:border-box!important}
html body.qnd-native .qnd-bottom>a,html body.qnd-native .qnd-bottom>span{height:57px!important;min-height:0!important;max-height:57px!important;margin:0!important;padding:2px 0!important;gap:2px!important;line-height:1.1!important;align-self:center!important}
html body.app-shell.qnd-native.qno-native{padding-bottom:62px!important}
html body.app-shell.qnd-native.qno-native .qnd-bottom{bottom:0!important;top:auto!important;height:58px!important;min-height:58px!important;padding:0 7px!important;margin:0 auto!important}
html body.qn-native:not(.qn-auth){padding-bottom:62px!important}
html body.qn-native .qn-bottom-nav{position:fixed!important;bottom:0!important;top:auto!important;height:58px!important;min-height:58px!important;padding:0 7px!important;margin:0 auto!important;row-gap:0!important;align-items:center!important;align-content:center!important;box-sizing:border-box!important}
html body.qn-native .qn-bottom-nav>a,html body.qn-native .qn-bottom-nav>.qn-nav-disabled{height:57px!important;min-height:0!important;padding:2px 1px!important;gap:2px!important;line-height:1.1!important}
html body.qn-native .qn-sheet{bottom:58px!important}
html body.qnd-native .qnd-hero{padding-top:1px!important}
html body.qnd-native .qnd-hero .qnd-heading{padding-top:20px!important}
html body.qnd-native.qna-native .qna-hero,
html body.qnd-native.qnt-native .qnt-hero,
html body.qnd-native.qnb-native .qnb-hero,
html body.qnd-native.qns-native .qns-hero,
html body.qnd-native.qnst-native .qnst-hero,
html body.qnd-native.qnbl-native .qnbl-hero,
html body.qnd-native.qnbh-native .qnbh-hero,
html body.qnd-native.qpay-native .qpay-hero,
html body.qnd-native.qno-native .qno-hero,
html body.app-shell.qnd-native.qno-native .qno-hero{padding-top:var(--qn-native-top)!important}
html body.qnd-native.qnp-native .qnp-main{padding-top:0!important;margin-top:0!important}
html body.qnd-native.qnp-native .qnp-main>.qnp-hero{padding-top:var(--qn-native-top)!important;margin-top:0!important}
html body.qnd-native.qnpos-native .qnpos-main{padding-top:var(--qn-native-top)!important}
html body.qnd-native.qnpos-native.qnpos-catalog .qnpos-main{padding-top:0!important;margin-top:0!important}
html body.qnd-native.qnpos-native.qnpos-catalog .qnpos-main>.qnpos-title.qnpos-hero{padding-top:var(--qn-native-top)!important;margin-top:0!important}
html body.qn-native.qn-route-produk .wrap,html body.qn-native.qn-route-produk main.wrap{padding-top:var(--qn-native-top)!important}
html body.qn-native.qn-route-produk{padding-top:0!important}
/* Explicit centering. The former inset:auto 0 0 plus desktop translateX(-50%) shifted the nav left. */
@media(max-width:759.98px){html body.qnd-native .qnd-bottom,html body.app-shell.qnd-native.qno-native .qnd-bottom,html body.qn-native .qn-bottom-nav{left:0!important;right:0!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important}}
@media(min-width:760px){html body.qnd-native .qnd-bottom,html body.app-shell.qnd-native.qno-native .qnd-bottom,html body.qn-native .qn-bottom-nav{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:100%!important;max-width:760px!important;margin:0!important}}
@supports (-webkit-touch-callout:none){@media (display-mode:standalone){
html body.qnd-native .qnd-bottom,html body.qn-native .qn-bottom-nav{height:calc(58px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)!important}
html body.qnd-native,html body.qn-native:not(.qn-auth){padding-bottom:calc(62px + env(safe-area-inset-bottom))!important}
html body.qnd-native .qnd-hero{padding-top:env(safe-area-inset-top)!important}
html body.qnd-native.qna-native .qna-hero,html body.qnd-native.qnt-native .qnt-hero,html body.qnd-native.qnb-native .qnb-hero,html body.qnd-native.qns-native .qns-hero,html body.qnd-native.qnst-native .qnst-hero,html body.qnd-native.qnbl-native .qnbl-hero,html body.qnd-native.qnbh-native .qnbh-hero,html body.qnd-native.qpay-native .qpay-hero,html body.qnd-native.qno-native .qno-hero,html body.app-shell.qnd-native.qno-native .qno-hero,html body.qnd-native.qnp-native .qnp-main>.qnp-hero,html body.qnd-native.qnpos-native.qnpos-catalog .qnpos-main>.qnpos-title.qnpos-hero,html body.qn-native.qn-route-produk .wrap,html body.qn-native.qn-route-produk main.wrap{padding-top:calc(var(--qn-native-top) + env(safe-area-inset-top))!important}
html body.qnd-native.qnpos-native:not(.qnpos-catalog) .qnpos-main{padding-top:calc(var(--qn-native-top) + env(safe-area-inset-top))!important}
}}