/* punya.shop v6.3.1 — navigasi bawah menempel penuh: bar rata selebar layar, garis penanda yang meluncur dengan pegas di atas menu aktif,
   ikon aktif membesar halus, tombol tengah (aksi) berupa kapsul gradien sejajar menu lain. Dimuat paling akhir supaya menggantikan aturan lama di ps2.css dan ps-kartu.css.
   Tidak bergantung pada saklar animasi karena ini bagian dasar navigasi. */
html body .sf-mnav{left:0!important;right:0!important;bottom:0!important;border-radius:0!important;border:0!important;border-top:1px solid var(--border)!important;
  padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))!important;gap:0!important;background:var(--card)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 -6px 22px rgba(15,23,42,.08)!important;align-items:stretch}
:root[data-mode=dark] body .sf-mnav{background:#2b2b2b!important;box-shadow:0 -6px 22px rgba(0,0,0,.4)!important}
html body .sf-mnav a{border-radius:12px!important;min-height:52px;justify-content:center;padding:6px 2px 4px!important;gap:3px!important;font-size:11px!important;font-weight:700!important;
  color:var(--nav-off,var(--faint));background:transparent!important;transition:color .25s,transform .25s cubic-bezier(.3,1.5,.5,1)!important}
html body .sf-mnav a>i,html body .sf-mnav a>.ik{font-size:22px!important;width:1.1em!important;height:1.1em!important;margin:3px auto!important;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}   /* tinggi ikon sama dengan kapsul tengah supaya semua tulisan sejajar */
html body .sf-mnav a:active{transform:scale(.92)!important}
html body .sf-mnav a.on{color:var(--nav-on,var(--accent-text))!important;font-weight:800!important}
html body .sf-mnav a.on>i,html body .sf-mnav a.on>.ik{transform:translateY(-1px) scale(1.1)}
/* garis penanda di tepi atas bar: digeser skrip (.nv-ind); tanpa skrip, tiap menu aktif menggambar garisnya sendiri */
.nv-ind{top:0!important;bottom:auto!important;height:3px!important;border-radius:0!important;background:transparent!important;
  transition:transform .46s cubic-bezier(.34,1.45,.5,1),width .46s cubic-bezier(.34,1.45,.5,1)!important}
.nv-ind::after{content:'';position:absolute;left:50%;top:0;margin-left:-16px;width:32px;height:3px;border-radius:0 0 6px 6px;background:var(--nav-on,var(--accent))}
html body .sf-mnav:not(.nv-js) a.on::before{display:block!important;content:'';position:absolute;top:-4px;left:50%;margin-left:-16px;width:32px;height:3px;border-radius:0 0 6px 6px;background:var(--nav-on,var(--accent))}
html body .sf-mnav.nv-js a.on::before{display:none!important}
/* tombol tengah: kapsul sejajar dengan menu lain, tidak menonjol keluar bar */
html body .sf-mnav.has-mid a.mid{padding-top:6px!important}
html body .sf-mnav.has-mid a.mid .mid-btn{position:static!important;transform:none!important;display:grid!important;place-items:center;width:52px!important;height:30px!important;border:0!important;border-radius:15px!important;margin:0 auto;
  box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 30%,transparent)!important;transition:transform .3s cubic-bezier(.3,1.6,.5,1),filter .2s}
html body .sf-mnav.has-mid a.mid .mid-btn i,html body .sf-mnav.has-mid a.mid .mid-btn .ik{font-size:18px!important;transform:none!important}
html body .sf-mnav.has-mid a.mid:active{transform:none!important}
html body .sf-mnav.has-mid a.mid:active .mid-btn{transform:scale(.9)!important}
html body .sf-mnav.has-mid a.mid.on .mid-btn{filter:brightness(1.08)}
/* bar Order dan tombol mengambang menyesuaikan tinggi bar baru */
html:not(.no-bnav) #psOrderBar{bottom:calc(63px + env(safe-area-inset-bottom,0px))!important}
@media(max-width:899px){
  html body .help,html body .fx-wa{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  body.ps-bar-on .help,body.ps-bar-on .fx-wa{bottom:calc(140px + env(safe-area-inset-bottom,0px))!important}
  html body .fx-wa{width:46px!important;height:46px!important;padding:0!important;justify-content:center}html body .help>button{width:50px!important;height:50px!important}}
@media(prefers-reduced-motion:reduce){.nv-ind,html body .sf-mnav a,html body .sf-mnav a i,html body .sf-mnav a .ik{transition:none!important}}
html body .sf-mnav.has-mid a.mid{color:var(--nav-on,var(--accent-text))!important;font-weight:800!important}

/* ===== Gaya lain (dipilih admin di Personal branding > Navigasi). Gaya "penuh" adalah aturan di atas. ===== */
/* --- Kapsul (bawaan): melayang, hanya menu aktif yang menampilkan tulisan dan melebar dengan pegas --- */
html body .sf-mnav.ng-pil,html body .sf-mnav.ng-ikon{display:flex!important;left:16px!important;right:16px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;border-radius:32px!important;border:0!important;
  padding:6px!important;gap:3px!important;background:var(--card)!important;box-shadow:0 12px 32px rgba(15,23,42,.18),0 0 0 1px color-mix(in srgb,var(--border) 75%,transparent)!important}
:root[data-mode=dark] body .sf-mnav.ng-pil,:root[data-mode=dark] body .sf-mnav.ng-ikon{background:#2b2b2b!important;box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)!important}
html body .sf-mnav.ng-pil a,html body .sf-mnav.ng-ikon a{flex:1 1 0;min-width:0;flex-direction:row!important;gap:6px!important;min-height:48px;border-radius:26px!important;font-size:0!important;padding:0 6px!important;overflow:visible;white-space:nowrap;
  transition:flex-grow .5s cubic-bezier(.34,1.3,.5,1),background .3s,color .3s,transform .25s cubic-bezier(.3,1.5,.5,1)!important}
html body .sf-mnav.ng-pil a>i,html body .sf-mnav.ng-pil a>.ik,html body .sf-mnav.ng-ikon a>i,html body .sf-mnav.ng-ikon a>.ik{margin:0!important}
html body .sf-mnav.ng-pil .nv-ind,html body .sf-mnav.ng-ikon .nv-ind,html body .sf-mnav.ng-pil a.on::before,html body .sf-mnav.ng-ikon a.on::before{display:none!important}
html body .sf-mnav.ng-pil a.on,html body .sf-mnav.ng-pil.nav-kustom.nv-js a.on,html body .sf-mnav.ng-pil.nav-kustom a.on{flex:2.4 1 0!important;background:var(--nav-on,var(--accent))!important;color:#fff!important;font-size:12.5px!important;justify-content:center}
html body .sf-mnav.ng-pil a.on>i,html body .sf-mnav.ng-pil a.on>.ik{transform:none}
html body .sf-mnav.ng-pil.has-mid a.mid,html body .sf-mnav.ng-ikon.has-mid a.mid,html body .sf-mnav.ng-pil.nav-kustom a.mid.on,html body .sf-mnav.ng-ikon.nav-kustom a.mid.on{flex:1.1 1 0!important;padding:0 2px!important;background:transparent!important;font-size:0!important}
html body .sf-mnav.ng-pil.has-mid a.mid .mid-btn,html body .sf-mnav.ng-ikon.has-mid a.mid .mid-btn{width:46px!important;height:46px!important;border-radius:50%!important;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent)!important}
html body .sf-mnav.ng-pil.has-mid a.mid .mid-btn i,html body .sf-mnav.ng-ikon.has-mid a.mid .mid-btn i{font-size:21px!important}
html body .sf-mnav.ng-pil .nv-b,html body .sf-mnav.ng-ikon .nv-b{top:3px;left:calc(50% + 4px)}
/* --- Ikon saja: kapsul lebih ramping di tengah, titik kecil menandai menu aktif --- */
html body .sf-mnav.ng-ikon{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(calc(100% - 40px),360px)}
html body .sf-mnav.ng-ikon a{min-height:44px}
html body .sf-mnav.ng-ikon a.on::after{content:'';position:absolute;bottom:3px;left:50%;margin-left:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--nav-on,var(--accent))}
html body .sf-mnav.ng-ikon a.on,html body .sf-mnav.ng-ikon.nav-kustom.nv-js a.on,html body .sf-mnav.ng-ikon.nav-kustom a.on{background:color-mix(in srgb,var(--nav-on,var(--accent)) 12%,transparent)!important}
/* --- Tombol bulat: bar penuh dengan tombol tengah bulat yang menonjol --- */
html body .sf-mnav.ng-bulat.has-mid a.mid{padding-top:30px!important}
html body .sf-mnav.ng-bulat.has-mid a.mid .mid-btn{position:absolute!important;top:-24px;left:50%;transform:translateX(-50%)!important;width:56px!important;height:56px!important;border:5px solid var(--bg)!important;border-radius:50%!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 42%,transparent)!important}
html body .sf-mnav.ng-bulat.has-mid a.mid .mid-btn i{font-size:24px!important}
html body .sf-mnav.ng-bulat.has-mid a.mid:active .mid-btn{transform:translateX(-50%) scale(.9)!important}
html body .sf-mnav.ng-bulat.has-mid a.mid.on .mid-btn{transform:translateX(-50%) scale(1.05)!important}
/* bar Order dan tombol mengambang untuk gaya melayang */
@media(max-width:899px){
  body:has(.sf-mnav.ng-pil) #psOrderBar,body:has(.sf-mnav.ng-ikon) #psOrderBar{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  body:has(.sf-mnav.ng-pil) .help,body:has(.sf-mnav.ng-pil) .fx-wa,body:has(.sf-mnav.ng-ikon) .help,body:has(.sf-mnav.ng-ikon) .fx-wa{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
  body.ps-bar-on:has(.sf-mnav.ng-pil) .help,body.ps-bar-on:has(.sf-mnav.ng-pil) .fx-wa,body.ps-bar-on:has(.sf-mnav.ng-ikon) .help,body.ps-bar-on:has(.sf-mnav.ng-ikon) .fx-wa{bottom:calc(152px + env(safe-area-inset-bottom,0px))!important}}

/* tombol mengambang (WhatsApp, chat) tetap diam saat berpindah halaman, bukan ikut memudar dan tampil dobel */
.fx-wa{view-transition-name:ps-wa}.help{view-transition-name:ps-help}
::view-transition-group(ps-wa),::view-transition-group(ps-help){animation:none}
::view-transition-old(ps-wa),::view-transition-old(ps-help){animation:none;display:none}
::view-transition-new(ps-wa),::view-transition-new(ps-help){animation:none}