/* =====================================================================
   BX3 MENU (3.3.0) - daftar menu dengan saringan kategori + halaman.
   - Bar tombol kategori menempel di bawah header (geser ke samping bila tidak muat): Semua (bawaan),
     Best Seller, Baru, lalu kategori produk. Klik = hanya menu kategori itu.
   - Judul + satu kalimat kategori terpilih, lalu grid kartu (4 / 3 / 2 kolom) tanpa pembatas kategori,
     dibagi per halaman (bawaan 12) dengan tombol halaman di bawah.
   - Kartu: foto produk PNG di bingkai krem, label kecil (Best Seller / Baru), nama, 2 baris kalimat.
   - Klik kartu = popup detail (foto besar, kategori, label, kalimat, tombol pesan-antar berlogo).
     HP: popup muncul dari bawah. Tanpa JS: semua menu tampil, kartu membuka halaman produk.
   ===================================================================== */

.bx3.bx3-menu{--bx3-max:var(--bx3-wide);--bx3-mbar:68px;--bx3-cat-y:clamp(56px,6vw,104px);display:block;background:var(--bx3-white);padding:0 0 var(--bx3-sec-y)}
.bx3 .bx3-menu__mark{display:block;height:1px;margin-bottom:-1px}

/* ---------- Bar kategori ---------- */
.bx3 .bx3-menu__bar{position:sticky;top:var(--bx3-nav-h);z-index:5;background:var(--bx3-white);border-bottom:1px solid transparent;transition:border-color var(--bx3-t) var(--bx3-ease)}
.bx3.bx3-menu.is-stuck .bx3-menu__bar{border-bottom-color:var(--bx3-line)}
.bx3.bx3-menu--static .bx3-menu__bar{position:relative;top:auto}
/* Tema yang memberi html DAN body overflow-x:hidden membuat body jadi wadah scroll sendiri, sehingga bar
   tidak bisa menempel. clip tetap memotong konten yang melebar tanpa membuat wadah scroll. */
body:has(.bx3-menu:not(.bx3-menu--static)){overflow-x:clip}
.bx3.bx3-menu--static.is-stuck .bx3-menu__bar{border-bottom-color:transparent}
.bx3 .bx3-menu__chips{display:flex;gap:8px;max-width:calc(var(--bx3-max) + var(--bx3-pad-x) * 2);margin:0 auto;padding:clamp(14px,1.4vw,20px) var(--bx3-pad-x);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.bx3 .bx3-menu__chips::-webkit-scrollbar{display:none}
.bx3 .bx3-menu__chips.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.bx3 .bx3-menu__chips a.bx3-chip[href]{flex:0 0 auto;padding-left:1.1em;padding-right:1.1em}
.bx3 .bx3-menu__chips a.bx3-chip[href][aria-current="true"],.bx3 .bx3-menu__chips a.bx3-chip[href][aria-current="true"]:is(:hover,:focus-visible){background-color:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white)}

/* ---------- Judul kategori terpilih + grid ---------- */
.bx3 .bx3-menu__in{max-width:calc(var(--bx3-max) + var(--bx3-pad-x) * 2);margin:0 auto;padding:0 var(--bx3-pad-x)}
.bx3 .bx3-menu__head{display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(48px,5vw,88px);margin-bottom:clamp(24px,2.6vw,40px);scroll-margin-top:calc(var(--bx3-nav-h) + var(--bx3-mbar) - clamp(48px,5vw,88px) + 24px)}
.bx3.bx3-menu--static .bx3-menu__head{scroll-margin-top:calc(var(--bx3-nav-h) - clamp(48px,5vw,88px) + 24px)}
.bx3 .bx3-menu__title{font-size:clamp(1.375rem,1.9vw,2rem);font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:var(--bx3-ink)}
.bx3 .bx3-menu__intro{margin-top:10px;max-width:36em;font-size:var(--bx3-fs-body);line-height:1.7;color:var(--bx3-ink-soft)}
.bx3 .bx3-menu__intro:empty{display:none}
.bx3 .bx3-menu__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,2.8vw,48px) clamp(16px,1.8vw,32px)}
.bx3 .bx3-mi[hidden]{display:none!important}
/* Sebelum JS menyusun halaman: hanya halaman 1 "Semua" (tanpa kedipan daftar panjang). Tanpa JS: semua tampil. */
.bx3-js .bx3.bx3-menu:not(.is-ready) .bx3-mi.is-later{display:none}
.bx3 .bx3-menu__grid.is-swap{animation:bx3-menu-swap .35s var(--bx3-ease) both}
@keyframes bx3-menu-swap{from{opacity:0}to{opacity:1}}
.bx3 .bx3-menu__empty{padding:48px 0;color:var(--bx3-ink-soft)}
/* Label filter aktif tidak diulang di kartu */
.bx3.bx3-menu[data-filter="best-seller"] .bx3-menu__grid .bx3-mi__tag--bs,.bx3.bx3-menu[data-filter="baru"] .bx3-menu__grid .bx3-mi__tag--new{display:none}
.bx3.bx3-menu[data-filter="best-seller"] .bx3-menu__grid .bx3-mi__tags:not(:has(.bx3-mi__tag--new)),.bx3.bx3-menu[data-filter="baru"] .bx3-menu__grid .bx3-mi__tags:not(:has(.bx3-mi__tag--bs)){display:none}

/* ---------- Halaman ---------- */
.bx3 .bx3-menu__pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(44px,4.4vw,72px)}
.bx3 .bx3-menu__pager[hidden]{display:none}
.bx3 .bx3-menu__pages{display:flex;align-items:center;gap:8px}
.bx3 button.bx3-pg{display:grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border:1px solid var(--bx3-line-btn);border-radius:999px;font-size:var(--bx3-fs-sm);font-weight:400;line-height:1;color:var(--bx3-ink-soft);transition:background-color var(--bx3-t) var(--bx3-ease),border-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-pg:is(:hover,:focus-visible){border-color:var(--bx3-choc);color:var(--bx3-choc)}
.bx3 button.bx3-pg[aria-current="page"],.bx3 button.bx3-pg[aria-current="page"]:is(:hover,:focus-visible){background-color:var(--bx3-choc);border-color:var(--bx3-choc);color:var(--bx3-white);font-weight:700}
.bx3 button.bx3-pg:disabled{opacity:.35;cursor:default;border-color:var(--bx3-line-btn);color:var(--bx3-ink-soft)}
.bx3 button.bx3-pg:active:not(:disabled){transform:scale(.96)}
.bx3 .bx3-pg svg{width:18px;height:18px}
.bx3 .bx3-menu__gap{min-width:20px;text-align:center;color:var(--bx3-ink-soft)}

/* ---------- Kartu ---------- */
.bx3 .bx3-mi{min-width:0}
.bx3 a.bx3-mi__btn[href]{display:flex;flex-direction:column;height:100%;color:var(--bx3-ink)}
.bx3 .bx3-mi__img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--bx3-r);background:var(--bx3-cream);overflow:hidden;isolation:isolate}
.bx3.bx3-menu--prod-sand .bx3-mi__img{background:var(--bx3-sand)}
.bx3.bx3-menu--prod-white .bx3-mi__img{background:var(--bx3-white);box-shadow:inset 0 0 0 1px var(--bx3-line)}
/* 3.4.2 "Pola Bingxue": pola bunga krem + gradasi keemasan kanan bawah (assets/img/bg-pattern.jpg, 4:5), juga di popup */
.bx3.bx3-menu--prod-pattern .bx3-mi__img,.bx3.bx3-menu--prod-pattern .bx3-mdlg__media{background:var(--bx3-cream) url(../img/bg-pattern.jpg) 50% 50%/cover no-repeat}
.bx3 .bx3-mi__img>img{position:absolute;left:10%;top:7%;width:80%;height:86%;max-width:none;object-fit:contain;transition:transform .5s var(--bx3-ease)}
.bx3 a.bx3-mi__btn[href]:is(:hover,:focus-visible) .bx3-mi__img>img{transform:scale(1.05)}
.bx3 a.bx3-mi__btn[href]:active .bx3-mi__img{transform:scale(.99)}
.bx3 .bx3-mi__txt{display:flex;flex-direction:column;padding-top:16px}
.bx3 .bx3-mi__tags,.bx3 .bx3-mdlg__tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}
.bx3 .bx3-mi__tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--bx3-fs-xs);font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--bx3-ink)}
.bx3 .bx3-mi__tag svg{width:14px;height:14px;color:var(--bx3-orange)}
.bx3 .bx3-mi__name{font-size:clamp(1rem,1.2vw,1.1875rem);font-weight:700;line-height:1.3;transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-mi__btn[href]:is(:hover,:focus-visible) .bx3-mi__name{color:var(--bx3-orange)}
.bx3.bx3-menu--nodesc .bx3-mi__desc{display:none}
.bx3 .bx3-mi__desc{margin-top:6px;font-size:var(--bx3-fs-sm);line-height:1.6;color:var(--bx3-ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Popup detail ---------- */
.bx3 .bx3-mdlg{position:fixed;width:min(960px,calc(100vw - 48px));max-width:none;height:fit-content;max-height:min(680px,calc(100dvh - 48px));margin:auto;padding:0;border:0;border-radius:var(--bx3-r);background:var(--bx3-white);color:var(--bx3-ink);overflow:hidden;box-shadow:0 30px 80px -30px rgba(40,22,12,.55)}
.bx3 .bx3-mdlg[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);animation:bx3-mdlg-in .3s var(--bx3-ease) both}
.bx3 .bx3-mdlg::backdrop{background:rgba(40,22,12,.5);animation:bx3-mdlg-fade .3s var(--bx3-ease) both}
@keyframes bx3-mdlg-in{from{opacity:0;transform:translate3d(0,12px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes bx3-mdlg-fade{from{opacity:0}to{opacity:1}}
.bx3 button.bx3-mdlg__close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bx3-white);color:var(--bx3-ink);box-shadow:0 2px 10px rgba(40,22,12,.12);transition:background-color var(--bx3-t) var(--bx3-ease),color var(--bx3-t) var(--bx3-ease)}
.bx3 button.bx3-mdlg__close:is(:hover,:focus-visible){background:var(--bx3-choc);color:var(--bx3-white)}
.bx3 .bx3-mdlg__close svg{width:20px;height:20px}
.bx3 .bx3-mdlg__media{position:relative;min-height:440px;background:var(--bx3-cream)}
.bx3.bx3-menu--prod-sand .bx3-mdlg__media{background:var(--bx3-sand)}
.bx3 .bx3-mdlg__media>img{position:absolute;left:12%;top:8%;width:76%;height:84%;max-width:none;object-fit:contain}
.bx3 .bx3-mdlg.is-noimg .bx3-mdlg__media>img{display:none}
.bx3 .bx3-mdlg__body{display:flex;flex-direction:column;min-height:0;padding:clamp(32px,3.6vw,56px) clamp(28px,3.4vw,52px) clamp(28px,3vw,44px);overflow-y:auto}
.bx3 .bx3-mdlg__cat:empty,.bx3 .bx3-mdlg__desc:empty{display:none}
.bx3 .bx3-mdlg__cat{font-size:var(--bx3-fs-sm);line-height:1.4;color:var(--bx3-ink-soft)}
.bx3 .bx3-mdlg__name{margin-top:8px;padding-right:40px;font-size:clamp(1.5rem,2.2vw,2.125rem);font-weight:700;line-height:1.2;color:var(--bx3-ink)}
.bx3 .bx3-mdlg__tags{margin:14px 0 0}
.bx3 .bx3-mdlg__tags:empty{display:none}
.bx3 .bx3-mdlg__desc{margin-top:18px;max-width:30em;font-size:var(--bx3-fs-body);line-height:1.8;color:var(--bx3-ink-soft)}
.bx3 .bx3-mdlg__order{margin-top:auto;padding-top:clamp(28px,3vw,40px)}
.bx3 .bx3-mdlg__label{padding-top:20px;border-top:1px solid var(--bx3-line);font-size:var(--bx3-fs-sm);font-weight:700;color:var(--bx3-ink)}
/* Tombol aplikasi: satu baris bila muat, selebihnya turun ke baris berikutnya dan melebar rata */
.bx3 .bx3-mdlg__apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bx3 .bx3-mdlg__apps a.bx3-btn[href]{flex:1 1 auto;justify-content:center;gap:7px;margin-top:0;padding-left:.7em;padding-right:.85em;white-space:nowrap}
/* Logo aplikasi: warna brand; jadi putih saat tombol disorot (latar cokelat) */
.bx3 .bx3-app__logo{--h:18px;flex:none;height:calc(var(--h) * var(--s,1));width:calc(var(--h) * var(--s,1) * var(--ar,1));color:var(--bx3-app,currentColor);transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-app[href]:is(:hover,:focus-visible) .bx3-app__logo{color:currentColor}

@media (max-width:1100px){
  .bx3 .bx3-menu__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .bx3.bx3-menu{--bx3-mbar:60px}
  .bx3 .bx3-menu__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .bx3 .bx3-mi__txt{padding-top:12px}
  /* Popup jadi lembar dari bawah */
  .bx3 .bx3-mdlg{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--bx3-r) var(--bx3-r) 0 0}
  .bx3 .bx3-mdlg[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);animation-name:bx3-mdlg-up}
  .bx3 .bx3-mdlg__media{min-height:0;height:min(38dvh,300px)}
  .bx3 .bx3-mdlg__body{padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
  .bx3 .bx3-mdlg__apps{gap:6px}
  .bx3 .bx3-mdlg__apps a.bx3-btn[href]{gap:6px;padding-left:.5em;padding-right:.6em}
  .bx3 .bx3-mdlg__apps .bx3-app__logo{--h:16px}
  .bx3 button.bx3-pg{min-width:40px;height:40px}
}
@keyframes bx3-mdlg-up{from{transform:translate3d(0,40px,0);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-mdlg[open],.bx3 .bx3-mdlg::backdrop{animation:none}
  .bx3 .bx3-mi__img>img{transition:none}
  .bx3 .bx3-menu__grid.is-swap{animation:none}
}