/* =====================================================================
   BX3 POPUP PRODUK (3.11.0) - <dialog> detail produk, dipakai bersama BX3 Menu dan BX3 Carousel (isi produk).
   Dulu bagian dari bx3-menu.css (3.3.0); dipindah ke sini supaya satu tampilan untuk kedua widget.
   - Desktop: dua kolom (foto | kategori, nama, label, kalimat, "Pesan lewat" + tombol pesan-antar berlogo).
   - HP: lembar dari bawah.
   - Latar foto: krem (bawaan), .bx3-mdlg--sand (pasir), .bx3-mdlg--pattern (Pola Bingxue).
   ===================================================================== */

.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}

/* Foto: PNG transparan utuh di atas latar warna / pola */
.bx3 .bx3-mdlg__media{position:relative;min-height:440px;background:var(--bx3-cream)}
.bx3 .bx3-mdlg--sand .bx3-mdlg__media{background:var(--bx3-sand)}
/* "Pola Bingxue": pola bunga krem + gradasi keemasan kanan bawah (assets/img/bg-pattern.jpg, 4:5) */
.bx3 .bx3-mdlg--pattern .bx3-mdlg__media{background:var(--bx3-cream) url(../img/bg-pattern.jpg) 50% 50%/cover no-repeat}
.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}

/* Tulisan */
.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__cat:empty+.bx3-mdlg__name{margin-top:0}
.bx3 .bx3-mdlg__tags{display:flex;flex-wrap:wrap;gap:6px 14px;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)}

/* Tombol pesan-antar */
.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:767px){
  /* 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}
}
@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}
}