:root{
  --bg:#f4f5f8;
  --dark:#0b1220;
  --dark2:#131c31;
  --gold:#d4af37;
  --gold-light:#f3d876;
  --green:#1a9c5c;
  --red:#d5433f;
  --amber:#c98a1b;
  --text:#1c2333;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --app-w: 480px; /* lebar "bingkai HP" — dipakai supaya tampilan di desktop/browser besar tetap sama seperti di HP, tidak melebar jelek */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:Arial, "Segoe UI", Roboto, sans-serif;
  background:#0b1220; /* latar di luar "bingkai HP" waktu dibuka di layar lebar (desktop) */
  color:var(--text);
  overscroll-behavior-y:none;
}
/* Di layar lebar (desktop/tablet), seluruh aplikasi dibatasi selebar HP (--app-w)
   dan ditaruh di tengah — supaya tetap ringan & terlihat sama persis seperti di
   HP, bukan melebar penuh ke seluruh layar. Di HP asli (viewport < --app-w),
   ini tidak berpengaruh sama sekali karena lebar HP memang sudah lebih kecil. */
#app{
  max-width:var(--app-w);margin:0 auto;position:relative;
  background:var(--bg);
  box-shadow:0 0 40px rgba(0,0,0,.25);
}
.hidden{display:none!important;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ---------- boot screen ---------- */
.boot-screen{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-w);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 20%, var(--dark2), var(--dark) 70%);gap:22px;z-index:50;
}
.boot-logo-icon{filter:drop-shadow(0 0 14px rgba(154,224,44,.4));animation:logoFloat3d 5s ease-in-out infinite;}
.boot-logo{
  font-size:28px;font-weight:bold;letter-spacing:3px;color:#fff;
}
.boot-logo span{color:var(--gold-light);margin-left:6px;}
.boot-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(212,175,55,.25);border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- layout shell ---------- */
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(135deg, var(--dark2), var(--dark));
  color:#fff;padding:calc(14px + var(--safe-t)) 16px 12px;
  display:flex;flex-direction:column;gap:10px;
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
/* Kotak pencarian di bawah logo -- sengaja dibikin kelihatan jelas kayak
   kolom input beneran (bukan cuma ikon kaca pembesar kecil yang gampang
   kelewatan), lengkap dengan tulisan ajakan biar customer sadar ada fitur
   cari produk di sini. Tetap berupa <button> yang mengarah ke halaman
   Temukan, bukan input asli -- pengetikan sungguhan terjadi di halaman itu. */
.topbar-search-bar{
  display:flex;align-items:center;gap:9px;width:100%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:10px 14px;color:rgba(255,255,255,.75);
  font-size:13.5px;text-align:left;
}
.topbar-search-bar .ico{font-size:15px;flex-shrink:0;}
.topbar-search-bar .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar .brand{font-weight:bold;font-size:18px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;}
.topbar .brand svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.topbar .brand .brand-txt span{color:var(--gold-light);}
.topbar .icon-btn{
  position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
}
/* lonceng notifikasi "hidup" — cuma transform (murah buat browser), diam
   sebagian besar waktu lalu goyang sebentar tiap beberapa detik biar tidak
   mengganggu tapi tetap kelihatan hidup. Tidak menambah beban walau produk
   sampai ribuan, karena ini cuma 1 elemen kecil & animasi CSS murni. */
#bellBtn{animation:bellRing 3.6s ease-in-out infinite;}
@keyframes bellRing{
  0%,73%{transform:rotate(0deg);}
  76%{transform:rotate(-13deg);}79%{transform:rotate(11deg);}82%{transform:rotate(-8deg);}85%{transform:rotate(5deg);}88%,100%{transform:rotate(0deg);}
}
.icon-btn .badge{
  position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:bold;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.search-bar{padding:10px 16px 14px;background:var(--dark);}
.search-bar input{
  width:100%;padding:11px 14px;border-radius:12px;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:15px;
}
.search-bar input::placeholder{color:rgba(255,255,255,.55);}

main{flex:1;padding:14px 14px calc(98px + var(--safe-b));max-width:640px;margin:0 auto;width:100%;}

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-w);z-index:30;
  background:#fff;border-top:1px solid #e7e8ee;
  display:flex;padding-bottom:var(--safe-b);
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.bottom-nav button{
  flex:1;background:none;border:none;padding:11px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--muted);font-size:12.5px;position:relative;
}
.bottom-nav button .ico{font-size:23px;line-height:1;display:inline-block;}
.bottom-nav button.active{color:var(--dark);}
.bottom-nav button.active .ico{color:var(--gold);animation:navPop .35s ease-out;}
@keyframes navPop{0%{transform:scale(1);}45%{transform:scale(1.28);}100%{transform:scale(1);}}
.bottom-nav .nav-badge{
  position:absolute;top:4px;right:calc(50% - 22px);background:var(--red);color:#fff;font-size:9px;font-weight:bold;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}

/* ---------- product grid ---------- */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.product-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(20,20,40,.08);
  display:flex;flex-direction:column;
}
.product-photo{
  aspect-ratio:1/1;background:linear-gradient(135deg,#eef0f6,#e2e5ee);display:flex;align-items:center;justify-content:center;
  color:#b7bccb;font-size:30px;position:relative;overflow:hidden;
}
.product-photo img{width:100%;height:100%;object-fit:cover;}
.po-badge{
  position:absolute;top:8px;left:8px;background:var(--dark);color:var(--gold-light);font-size:10px;font-weight:bold;
  padding:3px 7px;border-radius:8px;letter-spacing:.3px;
}
.stok-badge{
  position:absolute;top:8px;right:8px;background:rgba(213,67,63,.92);color:#fff;font-size:10px;font-weight:bold;
  padding:3px 7px;border-radius:8px;
}
.stok-badge-terbatas{background:rgba(201,138,27,.94);}
.product-info{padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;flex:1;}
.product-name{font-size:13px;font-weight:bold;line-height:1.3;min-height:34px;}
.product-price{font-size:14.5px;font-weight:bold;color:var(--dark);}
.product-price small{font-size:10px;color:var(--muted);font-weight:normal;}
/* Status stok: Habis (merah, sama dengan .stok-badge), Terbatas (kuning/amber,
   kasih rasa urgensi tapi tanpa nunjukin angka pasti), Tersedia (hijau, netral). */
.product-price small.stok-habis, .detail-desc + .stok-habis, div.stok-habis{color:var(--red,#d5433f) !important;}
.product-price small.stok-terbatas, div.stok-terbatas{color:var(--amber,#c98a1b) !important;}
.product-price small.stok-tersedia, div.stok-tersedia{color:var(--green,#2f9e5b) !important;}
.price-coret{font-size:11.5px;color:var(--muted);font-weight:normal;text-decoration:line-through;}
/* Badge "Terjual X" -- angka ASLI dari pesanan yang sudah lunas/dikirim/
   selesai (dihitung server, lihat tk_get_sold_counts()), bukan karangan.
   Netral/abu-abu sengaja dipilih (bukan hijau/merah) biar tidak dikira
   status stok. */
.terjual-badge{display:inline-block;font-size:10.5px;color:var(--muted);margin:2px 0 4px;}
.detail-photo{position:relative;aspect-ratio:4/3;max-height:130px;background:linear-gradient(135deg,#eef0f6,#e2e5ee);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#b7bccb;overflow:hidden;margin-bottom:8px;}
.detail-photo img{width:100%;height:100%;object-fit:cover;}
/* Baris aksi (Favorit/Bagikan/Tanya WA) sengaja diletakkan DI LUAR foto
   (bukan melayang di atas gambar) supaya tidak menutupi foto produk & lebih
   jelas dipencet — tiap tombol full lebar-rata, ikon di atas label kecil. */
.detail-actions-row{display:flex;gap:8px;margin:0 0 14px;}
.detail-action-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 8px;border-radius:13px;border:1px solid #e5e7ee;background:#fff;
  font-size:11px;font-weight:600;color:var(--text);cursor:pointer;transition:transform .15s,background .15s,border-color .15s;
}
.detail-action-btn .ico{font-size:19px;line-height:1;}
.detail-action-btn:active{transform:scale(.94);}
.detail-action-btn.favorit-btn.active{border-color:#ffb8cc;background:#fff0f4;color:#e0537c;}
.detail-action-btn.favorit-btn.active .ico{animation:favPop .35s ease-out;}
.detail-action-btn.wa-btn{border-color:#bfe8cf;background:#f2fbf5;color:#1f8a4c;}
@keyframes favPop{0%{transform:scale(1);}45%{transform:scale(1.3);}100%{transform:scale(1);}}
.detail-gallery-thumbs{display:flex;gap:8px;margin:-4px 0 12px;overflow-x:auto;padding-bottom:2px;}
.detail-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#eef0f6;opacity:.65;transition:opacity .15s,border-color .15s;}
.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.detail-thumb.active{border-color:var(--gold);opacity:1;}
.detail-name{font-size:16px;font-weight:bold;line-height:1.35;}
.detail-desc{font-size:13px;color:var(--text);line-height:1.6;white-space:pre-line;margin-top:6px;}
.product-actions{margin-top:auto;}
.btn-add{
  width:100%;background:var(--dark);color:#fff;border:none;border-radius:10px;padding:8px;font-size:12.5px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.qty-stepper{
  display:inline-flex;align-items:center;gap:2px;
  background:#eef0f6;border-radius:999px;padding:3px;
  box-shadow:inset 0 0 0 1px rgba(11,18,32,.06);
}
.qty-stepper button{
  background:var(--dark);color:#fff;border:none;width:32px;height:32px;min-width:32px;
  border-radius:999px;font-size:17px;font-weight:bold;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .1s, background .15s;
}
.qty-stepper button:active{transform:scale(.9);background:var(--dark2, var(--dark));}
.qty-stepper .qty-val{
  min-width:34px;text-align:center;font-weight:bold;font-size:15px;color:var(--dark);
  padding:0 8px;
}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-state .ico{font-size:40px;margin-bottom:10px;}

/* ---------- cart fab ---------- */
.cart-fab{
  position:fixed;left:50%;transform:translateX(-50%);width:calc(var(--app-w) - 28px);bottom:calc(76px + var(--safe-b));z-index:25;
  background:linear-gradient(135deg, var(--dark2), var(--dark));color:#fff;border:none;border-radius:16px;
  padding:13px 16px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 6px 18px rgba(11,18,32,.35);
}
.cart-fab .cnt{background:var(--gold);color:var(--dark);border-radius:50%;width:24px;height:24px;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center;margin-right:8px;}
.cart-fab .left{display:flex;align-items:center;font-weight:bold;font-size:14px;}
.cart-fab .right{font-weight:bold;color:var(--gold-light);}

/* ---------- sheets/modals ---------- */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(11,18,32,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;
}
.sheet{
  background:#fff;width:100%;max-width:640px;border-radius:20px 20px 0 0;max-height:88vh;display:flex;flex-direction:column;
  animation:sheetUp .22s ease-out;
}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.4;}to{transform:translateY(0);opacity:1;}}
.sheet-handle{width:38px;height:4px;background:#dcdfe6;border-radius:2px;margin:10px auto 4px;}
.sheet-head{padding:8px 18px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;}
.sheet-head h3{margin:0;font-size:16px;}
.sheet-close{background:#f0f1f5;border:none;width:30px;height:30px;border-radius:50%;font-size:16px;color:var(--muted);}
.sheet-body{padding:14px 18px;overflow-y:auto;flex:1;}
.sheet-foot{padding:12px 18px calc(14px + var(--safe-b));border-top:1px solid #eee;}

/* ---------- Detail Produk — kartu kecil melayang di TENGAH layar (bukan
   sheet penuh dari bawah kayak modal lain), lengkap dengan tombol kembali (‹)
   DAN tutup (✕) di header-nya. ---------- */
.pd-modal-overlay{
  position:fixed;inset:0;background:rgba(11,18,32,.55);z-index:40;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.pd-modal{
  background:#fff;width:100%;max-width:320px;max-height:60vh;border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,15,30,.35);
  animation:pdModalIn .18s ease-out;
}
@keyframes pdModalIn{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.pd-modal-head{padding:7px 9px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #eee;}
.pd-modal-head h3{margin:0;font-size:13px;flex:1;text-align:center;}
.pd-back-btn,.pd-close-btn{
  background:#f0f1f5;border:none;width:26px;height:26px;border-radius:50%;
  color:var(--muted);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.pd-back-btn{font-size:17px;line-height:1;}
.pd-close-btn{font-size:13px;}
.pd-modal-body{padding:10px 12px;overflow-y:auto;flex:1;}
.pd-modal-foot{padding:9px 12px calc(9px + var(--safe-b));border-top:1px solid #eee;}
.detail-photo img{cursor:zoom-in;}
@media (max-width:380px){
  .pd-modal{max-width:100%;}
}

/* ---------- Zoom foto Detail Produk — nge-zoom foto YANG SEDANG DILIHAT saja
   (bukan buka galeri baru), tapi tetap di dalam kotak (bukan 1 layar penuh),
   ada tombol ✕ buat nutup. z-index lebih tinggi dari pd-modal supaya numpuk
   di atasnya. ---------- */
.pd-lightbox-overlay{
  position:fixed;inset:0;background:rgba(11,18,32,.75);z-index:45;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.pd-lightbox{
  position:relative;width:100%;max-width:320px;aspect-ratio:1/1;
  background:#111;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  animation:pdModalIn .16s ease-out;
}
.pd-lightbox img{width:100%;height:100%;object-fit:contain;}
.pd-lightbox-close{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);border:none;
  width:28px;height:28px;border-radius:50%;color:#fff;font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:1;
}

.center-modal-overlay{
  position:fixed;inset:0;background:rgba(11,18,32,.6);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
}
.center-modal{background:#fff;border-radius:18px;max-width:380px;width:100%;padding:22px 20px;max-height:86vh;overflow-y:auto;}

/* ---- popup konfirmasi kustom (gantikan confirm() bawaan browser) — muncul
   di TENGAH layar, tema gelap-emas transparan mewah, senada sama popup
   konfirmasi yang dipakai di panel admin. ---- */
.app-confirm-overlay{
  position:fixed;inset:0;background:rgba(8,12,24,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;z-index:70;padding:20px;
  animation:appConfirmFade .15s ease-out;
}
@keyframes appConfirmFade{from{opacity:0;}to{opacity:1;}}
.app-confirm-box{
  width:100%;max-width:360px;text-align:center;color:#fff;padding:28px 24px 22px;
  border-radius:22px;border:1px solid rgba(212,175,55,.45);
  background:linear-gradient(165deg, var(--dark2), var(--dark));
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation:appConfirmPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes appConfirmPop{from{opacity:0;transform:scale(.9) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.app-confirm-icon{font-size:34px;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(212,175,55,.35));}
.app-confirm-msg{font-size:14px;line-height:1.6;color:#dfe2ee;margin:4px 0 20px;}
.app-confirm-actions{display:flex;gap:10px;}
.app-confirm-actions button{flex:1;padding:12px 10px;border-radius:13px;border:1px solid transparent;font-weight:700;font-size:13.5px;cursor:pointer;}
.app-confirm-cancel{background:rgba(255,255,255,.08);color:#dfe2ee;border-color:rgba(255,255,255,.2) !important;}
.app-confirm-ok{background:linear-gradient(135deg, var(--gold-light), var(--gold));color:var(--dark);}
.app-confirm-ok.danger{background:linear-gradient(135deg,#ff7377,#d5433f);color:#fff;}

/* ---------- cart items ---------- */
.cart-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #f0f1f5;}
.cart-item .thumb{width:56px;height:56px;border-radius:10px;background:#eef0f6;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#b7bccb;overflow:hidden;}
.cart-item .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-item .info{flex:1;min-width:0;}
.cart-item .info .nm{font-size:13.5px;font-weight:bold;margin-bottom:2px;}
.cart-item .info .pr{font-size:12.5px;color:var(--muted);}
.cart-item .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.cart-item .remove-link{color:var(--red);font-size:11.5px;font-weight:bold;background:none;border:none;padding:4px 0;}
.dp-note{font-size:11px;color:var(--amber);margin-top:3px;}

.summary-row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;color:var(--muted);}
.summary-row.total{color:var(--text);font-weight:bold;font-size:15.5px;border-top:1px solid #eee;padding-top:10px;margin-top:4px;}
.summary-row.sisa{color:var(--amber);}

.btn-primary{
  width:100%;background:linear-gradient(135deg, var(--dark2), var(--dark));color:#fff;border:none;border-radius:13px;
  padding:14px;font-size:15px;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:disabled{opacity:.5;}
.btn-secondary{
  width:100%;background:#f0f1f5;color:var(--text);border:none;border-radius:13px;padding:13px;font-size:14.5px;font-weight:bold;
}
.btn-wa{
  width:100%;background:#1fac54;color:#fff;border:none;border-radius:13px;padding:14px;font-size:15px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-gold{
  width:100%;background:linear-gradient(135deg, var(--gold-light), var(--gold));color:#3a2e05;border:none;border-radius:13px;
  padding:14px;font-size:15px;font-weight:bold;
}
.btn-danger-outline{width:100%;background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:13px;padding:12px;font-size:14px;font-weight:bold;}

/* ---------- auth screen ---------- */
.auth-wrap{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(32px + var(--safe-b));
  background:radial-gradient(circle at 50% 0%, var(--dark2), var(--dark) 65%);
}
/* tombol kecil pojok kanan atas -- pintasan buka panel admin (admin/) buat
   yang butuh, sengaja dibikin kecil & samar (bukan tombol besar mencolok)
   supaya tidak mengganggu tampilan buat customer biasa */
.auth-admin-link{
  position:absolute;top:calc(14px + var(--safe-t));right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  font-size:15px;text-decoration:none;opacity:.65;transition:opacity .15s,background .15s;
}
.auth-admin-link:active{opacity:1;background:rgba(255,255,255,.16);}
.auth-footer{
  position:relative;z-index:1;text-align:center;color:rgba(255,255,255,.45);
  font-size:11px;margin-top:18px;
}
/* efek RGB: bola cahaya warna-warni yang mengambang pelan di background */
.rgb-orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.35;z-index:0;pointer-events:none;animation:orbFloat 9s ease-in-out infinite;}
.rgb-orb.orb1{width:220px;height:220px;background:#ff2fb0;top:-60px;left:-60px;animation-duration:11s;}
.rgb-orb.orb2{width:260px;height:260px;background:#2fd2ff;bottom:-80px;right:-70px;animation-duration:13s;animation-delay:1.5s;}
.rgb-orb.orb3{width:180px;height:180px;background:#c9ff2f;top:40%;right:10%;animation-duration:10s;animation-delay:.7s;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(18px,-22px) scale(1.12);}
}

.auth-logo{position:relative;z-index:1;text-align:center;margin-bottom:26px;}
/* Catatan: sengaja TIDAK pakai rotateX/rotateY yang terus-menerus berjalan di
   sini (versi sebelumnya begitu) — animasi 3D tilt yang jalan tanpa henti
   bikin logo & teks di sekitarnya kelihatan buram/pecah di browser (sudut
   rotasi 3D pecahan derajat bikin sub-pixel rendering jadi tidak tajam).
   Cukup gerakan naik-turun (translateY) saja supaya tetap ada efek "melayang"
   tapi gambar tetap tajam & jernih. */
.logo-3d-spin{display:flex;justify-content:center;margin-bottom:8px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));animation:logoFloat3d 5s ease-in-out infinite;}
@keyframes logoFloat3d{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.logo-glow{filter:drop-shadow(0 0 10px rgba(154,224,44,.55)) drop-shadow(0 0 18px rgba(244,196,48,.35));}
.auth-logo-img{height:132px;width:auto;display:block;}
.auth-logo .tag{color:rgba(255,255,255,.75);font-size:12.5px;margin-top:2px;}

/* kartu login/daftar: bingkai RGB yang JALAN/RUNNING mengelilingi tepi kotak
   (bukan muter berputar) + efek 3D settle-in sekali saat muncul. */
.card-3d-wrap{
  position:relative;z-index:1;perspective:1000px;
  border-radius:23px;padding:3px;
  background:linear-gradient(90deg, #ff2f6e, #ff9d2f, #f4e02f, #58ff2f, #2fd2ff, #7b2fff, #ff2f6e, #ff9d2f, #f4e02f, #58ff2f, #2fd2ff, #7b2fff, #ff2f6e);
  background-size:400% 100%;
  animation:rgbRun 6s linear infinite;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}
@keyframes rgbRun{
  0%{background-position:0% 0;}
  100%{background-position:-400% 0;}
}
.auth-card{
  position:relative;z-index:1;background:#fff;border-radius:20px;padding:22px 20px;
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset;
  animation:cardSettle3d .7s ease-out forwards;
}
/* Tilt 3D cuma kelihatan SESAAT waktu kartu pertama muncul (settle-in), lalu
   BERHENTI PERSIS DI POSISI DATAR (rotateX/rotateY 0deg) — sebelumnya berhenti
   di sudut miring sepersekian derajat yang bikin teks & input di dalam kartu
   kelihatan buram terus-menerus. Sekarang teks tetap tajam & jernih setelah
   animasi selesai, karena kartu benar-benar rata/flat saat siap dipakai isi form. */
@keyframes cardSettle3d{
  0%{transform:rotateX(10deg) rotateY(-16deg) translateY(18px);opacity:0;}
  100%{transform:rotateX(0deg) rotateY(0deg) translateY(0);opacity:1;}
}
.auth-tabs{display:flex;background:#f0f1f5;border-radius:12px;padding:4px;margin-bottom:18px;}
.auth-tabs button{flex:1;background:none;border:none;padding:9px;border-radius:9px;font-size:13.5px;font-weight:bold;color:var(--muted);}
.auth-tabs button.active{background:var(--dark);color:#fff;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:12px;font-weight:bold;color:var(--muted);margin-bottom:5px;}
.field input{width:100%;padding:12px 13px;border-radius:11px;border:1.5px solid #e5e7ee;font-size:14.5px;}
.field input:focus{outline:none;border-color:var(--gold);}
.field-error{color:var(--red);font-size:12px;margin-top:4px;}

/* ---------- kolom password + tombol mata (lihat/sembunyikan isian) ---------- */
.pw-field-wrap{position:relative;}
.pw-field-wrap input{padding-right:42px;}
.pw-toggle-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:17px;line-height:1;color:var(--muted);
  cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;
}
.form-error{background:#fdeceb;color:var(--red);font-size:12.5px;padding:9px 12px;border-radius:10px;margin-bottom:12px;}
.form-success{background:#e9f8ef;color:var(--green);font-size:12.5px;padding:9px 12px;border-radius:10px;margin-bottom:12px;}

/* ---------- account page ---------- */
.account-hero{
  background:linear-gradient(135deg, var(--dark2), var(--dark));color:#fff;border-radius:18px;padding:20px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.account-avatar{
  width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg, var(--gold-light), var(--gold));
  display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--dark);font-size:19px;flex-shrink:0;
}
.account-hero .nm{font-weight:bold;font-size:16px;}
.account-hero .id{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;}
.points-pill{
  margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(212,175,55,.18);
  border:1px solid rgba(212,175,55,.4);color:var(--gold-light);font-size:12px;font-weight:bold;padding:4px 10px;border-radius:20px;
}
.menu-list{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.menu-item{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #f0f1f5;font-size:14px;font-weight:bold;
  background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;color:var(--text);
}
.menu-item:last-child{border-bottom:none;}
.menu-item .ico{font-size:18px;width:22px;text-align:center;}
.menu-item .arrow{margin-left:auto;color:var(--muted);}
.menu-item.danger{color:var(--red);}

/* ---------- orders ---------- */
.order-card{background:#fff;border-radius:16px;padding:14px 15px;margin-bottom:12px;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.order-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.order-id{font-size:13px;font-weight:bold;}
.order-date{font-size:11px;color:var(--muted);margin-top:2px;}
.status-pill{font-size:10.5px;font-weight:bold;padding:4px 9px;border-radius:20px;white-space:nowrap;}
.status-menunggu_konfirmasi{background:#fef3e0;color:var(--amber);}
.status-lunas{background:#e9f8ef;color:var(--green);}
.status-dibatalkan{background:#fdeceb;color:var(--red);}
.status-selesai{background:#e8ecf7;color:#3855c9;}
.status-retur-menunggu{background:#fef3e0;color:var(--amber);}
.status-retur-diterima{background:#e9f8ef;color:var(--green);}
.status-retur-ditolak{background:#fdeceb;color:var(--red);}
.status-retur-selesai{background:#e8ecf7;color:#3855c9;}
.order-items{font-size:12.5px;color:var(--muted);margin:6px 0;line-height:1.6;}
.order-totals{font-size:13px;font-weight:bold;display:flex;justify-content:space-between;padding-top:8px;border-top:1px dashed #eee;}

/* ---------- notifications ---------- */
.notif-item{background:#fff;border-radius:14px;padding:13px 14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(20,20,40,.06);display:flex;gap:11px;}
.notif-item.unread{border-left:3px solid var(--gold);}
.notif-ico{width:38px;height:38px;border-radius:10px;background:#fef3e0;color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.notif-item .t{font-size:13.5px;font-weight:bold;margin-bottom:2px;}
.notif-item .b{font-size:12.5px;color:var(--muted);line-height:1.4;}
.notif-item .d{font-size:10.5px;color:#a7abb8;margin-top:5px;}

/* ---------- kartu notifikasi (halaman Pemberitahuan, gaya tab+chip) ---------- */
.notif-card{background:#fff;border:1px solid #eceef3;border-radius:12px;padding:13px 14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:11px;}
.notif-card .notif-body{flex:1;min-width:0;}
.notif-card .t{font-size:13.5px;font-weight:bold;margin-bottom:3px;}
.notif-card .b{font-size:12.5px;color:var(--muted);line-height:1.45;}
.notif-meta{display:flex;align-items:center;gap:8px;margin-top:8px;}
.notif-tipe{font-size:10px;font-weight:bold;color:var(--red);background:#fdeceb;padding:2px 8px;border-radius:8px;}
.notif-meta .d{font-size:10.5px;color:#a7abb8;}
.notif-chevron{font-size:20px;color:#c7cad4;flex-shrink:0;line-height:1;padding-top:2px;}

/* ---------- toast ---------- */
/* toast sengaja ditaruh DI BAWAH topbar (bukan menimpanya) — sebelumnya
   nongol pas di atas logo/tulisan "SOLO MICRO" & tombol lonceng, jadi
   keliatan berantakan/numpuk. */
.toast-root{position:fixed;top:calc(78px + var(--safe-t));left:50%;transform:translateX(-50%);width:100%;max-width:calc(var(--app-w) - 24px);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px;}
.toast{background:var(--dark);color:#fff;font-size:13px;font-weight:bold;padding:11px 18px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.25);max-width:100%;text-align:center;animation:toastIn .18s ease-out;}
.toast.err{background:var(--red);}
.toast.ok{background:var(--green);}
@keyframes toastIn{from{transform:translateY(-8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ---------- home banner ---------- */
.home-banner{
  background:linear-gradient(135deg,#1a9c5c,#0b1220 130%);color:#fff;border-radius:18px;padding:22px 20px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.home-banner .t{font-size:22px;font-weight:bold;letter-spacing:1px;color:var(--gold-light);}
.home-banner .s{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:4px;max-width:80%;}

/* ---------- info jam operasional toko (banner kecil paling atas Beranda) ---------- */
.store-hours-banner{
  display:flex;align-items:center;gap:10px;border-radius:14px;padding:11px 14px;
  margin-bottom:14px;background:var(--card,#fff);border:1px solid #eceef3;
  box-shadow:0 1px 3px rgba(20,20,40,.05);
}
.store-hours-banner .dot-wrap{position:relative;width:9px;height:9px;flex-shrink:0;}
.store-hours-banner .dot{
  position:absolute;inset:0;width:9px;height:9px;border-radius:50%;
}
.store-hours-banner .dot-ping{
  position:absolute;inset:0;width:9px;height:9px;border-radius:50%;
  animation:storeDotPing 2.2s ease-out infinite;
}
.store-hours-banner.is-open .dot,
.store-hours-banner.is-open .dot-ping{background:#1a9c5c;}
.store-hours-banner.is-closed .dot,
.store-hours-banner.is-closed .dot-ping{background:var(--muted,#9aa1ae);}
.store-hours-banner.is-closed .dot-ping{animation:none;}
@keyframes storeDotPing{
  0%{transform:scale(1);opacity:.55;}
  75%{transform:scale(2.4);opacity:0;}
  100%{transform:scale(2.4);opacity:0;}
}
.store-hours-banner .txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.store-hours-banner .status{font-size:12.5px;font-weight:700;letter-spacing:.1px;}
.store-hours-banner.is-open .status{color:#0f7a44;}
.store-hours-banner.is-closed .status{color:var(--text);}
.store-hours-banner .hours{font-size:11px;color:var(--muted);font-weight:500;}

/* ---------- promo banner (carousel info promo, paling atas Beranda) ---------- */
.promo-banner{position:relative;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 4px 14px rgba(20,20,40,.1);background:#eef0f6;}
.promo-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.promo-slide{
  flex:0 0 100%;position:relative;aspect-ratio:16/7;cursor:pointer;background:#eef0f6;
  background-size:cover;background-position:center;
}
/* thumbnail blur super kecil (base64, dari server) langsung tampil begitu
   slide dirender -- tanpa nunggu jaringan -- gambar resolusi penuh baru
   di-fade-in menimpanya begitu selesai diunduh, biar tidak ada kotak kosong
   yang bikin kesan "lelet". */
.promo-slide img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease;}
.promo-slide img.pi-loaded{opacity:1;}
.promo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 10px;color:#fff;font-size:13px;font-weight:bold;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));
}
.promo-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none;}
.promo-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .25s,background .25s;pointer-events:auto;cursor:pointer;}
.promo-dots .dot.active{width:16px;border-radius:4px;background:#fff;}

/* ---------- Flash Sale — jadwal segera dimulai (bar tipis di atas grid) ---------- */
.flash-upcoming{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff3e6,#ffe6d1);border-radius:14px;padding:10px 14px;margin-bottom:14px;
}
.flash-upcoming .s{font-size:12.5px;font-weight:bold;color:var(--amber);}

/* ---------- Flash Sale — countdown kotak digit (bergerak/animasi) ---------- */
.section-row.flash-sale-header{align-items:center;flex-wrap:wrap;gap:8px 12px;}
.flash-cd{display:inline-flex;align-items:center;gap:4px;}
.flash-cd-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:30px;padding:3px 5px 2px;
  border-radius:8px;background:linear-gradient(135deg,var(--red,#d5433f),#a92a26);color:#fff;
  box-shadow:0 2px 6px rgba(213,67,63,.35);animation:flashPulse 1s ease-in-out infinite;
}
.flash-cd-box span{font-size:13px;font-weight:bold;line-height:1.1;font-variant-numeric:tabular-nums;}
.flash-cd-box i{font-size:7.5px;font-style:normal;opacity:.85;line-height:1;margin-top:1px;}
.flash-cd-box.flash-cd-sec{animation:flashPulseStrong 1s ease-in-out infinite;}
.flash-cd-colon{font-weight:bold;color:var(--red,#d5433f);font-size:13px;}
.flash-cd-done{font-size:12px;font-weight:bold;color:var(--muted);}
@keyframes flashPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes flashPulseStrong{0%,100%{transform:scale(1);box-shadow:0 2px 6px rgba(213,67,63,.35);}50%{transform:scale(1.14);box-shadow:0 2px 10px rgba(213,67,63,.55);}}

/* ---------- quick icon grid (beranda) ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin-bottom:18px;}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;}
.quick-item .ico{
  width:46px;height:46px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 1px 3px rgba(20,20,40,.08);
}
.quick-item .lb{font-size:10.5px;color:var(--text);font-weight:600;line-height:1.2;}
/* ikon Promo (api) berkedip halus terus-menerus — animasi CSS ringan saja
   (transform+opacity), tidak pakai gambar/gif jadi tidak menambah berat. */
.quick-item .ico-flame{animation:flamePulse 1.6s ease-in-out infinite;}
@keyframes flamePulse{0%,100%{transform:scale(1) rotate(0deg);opacity:1;}50%{transform:scale(1.12) rotate(-3deg);opacity:.85;}}

.section-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;flex-wrap:wrap;gap:6px 10px;}
.sort-harga-select{
  font-size:11.5px;font-weight:bold;color:var(--dark);background:#fff;border:1.5px solid var(--border);
  border-radius:10px;padding:6px 8px;max-width:150px;
}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;-webkit-overflow-scrolling:touch;}
.mini-card{flex:0 0 100px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(20,20,40,.08);cursor:pointer;}
.mini-photo{width:100px;height:100px;background:linear-gradient(135deg,#eef0f6,#e2e5ee);display:flex;align-items:center;justify-content:center;font-size:26px;color:#b7bccb;}
.mini-photo img{width:100%;height:100%;object-fit:cover;}

/* ---------- menu brand (Beranda) — kartu bentuknya sama seperti versi
   sebelumnya (kotak foto + nama di bawahnya, rounded, shadow), ditaruh lagi
   di ATAS Produk Terbaru. Baris brand ini adalah scroll container biasa
   (overflow-x:auto) yang digeser otomatis pelan-pelan ke kiri lewat JS
   (lihat initBrandAutoScroll() di app.js) — TAPI karena masih scroll
   container asli, customer tetap bisa geser manual pakai jari ke kanan/kiri
   kapan saja buat lihat lagi brand yang sudah lewat. Auto-scroll otomatis
   berhenti sebentar begitu customer sentuh/geser sendiri. ---------- */
.brand-row-outer{overflow-x:auto;margin-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.brand-row-outer::-webkit-scrollbar{display:none;}
.brand-grid{display:flex;gap:8px;padding:2px 2px 8px;}
.brand-card{
  flex:0 0 118px;width:118px;cursor:pointer;
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(20,20,40,.08);
  display:flex;flex-direction:column;
}
.brand-card-img{
  width:100%;aspect-ratio:1.3/1;background:linear-gradient(135deg,#eef0f6,#e2e5ee);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#b7bccb;overflow:hidden;
}
.brand-card-img img{width:100%;height:100%;object-fit:contain;padding:8px;}
.brand-card-nama{padding:5px 6px;font-size:10.5px;font-weight:bold;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mini-price{padding:7px 8px;font-size:12px;font-weight:bold;color:var(--red);}
.promo-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:10px;font-weight:bold;padding:3px 7px;border-radius:8px;}

/* ---------- kategori chips ---------- */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:8px;-webkit-overflow-scrolling:touch;}
.chip{flex-shrink:0;background:#fff;border:1.5px solid #e5e7ee;border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:bold;color:var(--muted);}
.chip.active{background:var(--dark);border-color:var(--dark);color:#fff;}

/* ---------- halaman Kategori/Brand (tab + sidebar, gaya katalog) ---------- */
.katalog-tabs{display:flex;gap:22px;border-bottom:1.5px solid #e5e7ee;margin-bottom:12px;}
.katalog-tab{background:none;border:none;padding:10px 2px;font-size:14.5px;font-weight:bold;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;}
.katalog-tab.active{color:var(--red);border-bottom-color:var(--red);}
.katalog-search{margin-bottom:12px;}
.katalog-search input{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid #e5e7ee;font-size:13.5px;background:#f4f5f8;}
.katalog-search input:focus{outline:none;border-color:var(--gold);background:#fff;}
.katalog-body{display:flex;align-items:stretch;border-radius:12px;overflow:hidden;background:#f4f5f8;min-height:320px;}
.katalog-sidebar{width:84px;flex-shrink:0;background:#eceef3;max-height:calc(100vh - 260px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.katalog-sidebar-item{padding:13px 6px;text-align:center;cursor:pointer;border-left:3px solid transparent;}
.katalog-sidebar-item .ico{display:block;font-size:19px;margin-bottom:4px;}
.katalog-sidebar-item .lb{display:block;font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.25;}
.katalog-sidebar-item.active{background:#fff;border-left-color:var(--red);}
.katalog-sidebar-item.active .lb{color:var(--red);font-weight:bold;}
.katalog-content{flex:1;background:#fff;padding:12px;max-height:calc(100vh - 260px);overflow-y:auto;-webkit-overflow-scrolling:touch;min-width:0;}
.katalog-brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.katalog-brand-card{background:#fff;border:1.5px solid #e5e7ee;border-radius:12px;overflow:hidden;cursor:pointer;}
.katalog-brand-card-img{aspect-ratio:1.6/1;display:flex;align-items:center;justify-content:center;font-size:20px;color:#b7bccb;overflow:hidden;background:#fff;}
.katalog-brand-card-img img{width:100%;height:100%;object-fit:contain;padding:10px;}
.katalog-brand-card-nama{padding:6px 6px 9px;font-size:11px;font-weight:bold;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- search page (Temukan) ---------- */
.search-bar-inline{margin-bottom:14px;}
.search-bar-inline input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid #e5e7ee;font-size:14.5px;background:#fff;}
.search-bar-inline input:focus{outline:none;border-color:var(--gold);}

/* ---------- lapisan cari dari topbar (BUKAN pindah ke tab Temukan) ----------
   Muncul di ATAS halaman yang lagi dibuka customer (mis. Beranda), supaya
   ngetiknya langsung di situ tanpa berasa "pindah menu". z-index sengaja di
   antara topbar (20) & modal Detail Produk (40) -- biar kalau customer ketuk
   salah satu hasil pencarian, popup Detail Produk tetap tampil DI ATAS
   lapisan cari ini. */
.search-overlay{
  position:fixed;inset:0;background:#fff;z-index:35;
  display:flex;flex-direction:column;
  animation:searchOverlayIn .16s ease-out;
}
@keyframes searchOverlayIn{from{opacity:0;}to{opacity:1;}}
.search-overlay-head{
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + var(--safe-t)) 14px 10px;
  border-bottom:1px solid #eee;background:#fff;flex-shrink:0;
}
.search-overlay-body{flex:1;overflow-y:auto;padding:14px 14px calc(14px + var(--safe-b));}

/* ---------- page header (sub pages with back button) ---------- */
.page-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.page-header h2{font-size:16px;margin:0;flex:1;}
.page-header-plain{margin-bottom:16px;}
.page-header-plain h2{font-size:16px;margin:0;}
.back-btn{
  width:34px;height:34px;border-radius:50%;background:#fff;border:none;font-size:22px;color:var(--text);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(20,20,40,.08);flex-shrink:0;
}

/* ---------- cart page (Troli) ---------- */
.cart-list{background:#fff;border-radius:16px;padding:4px 15px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.cart-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #f0f1f5;align-items:flex-start;}
.cart-item:last-child{border-bottom:none;}
/* 🆕 SEBELUMNYA pakai left:0;right:0; (selebar jendela browser) -- di HP itu
   memang sudah sama saja lebarnya sama layar, TAPI di PC/desktop (layar
   lebar) jadinya pita Total/Pembelian ini melebar penuh ke seluruh jendela,
   tidak ngikut lebar "bingkai HP" (--app-w) yang dipakai elemen fixed
   lainnya (mis. .bottom-nav di atas) -- kelihatan aneh, ke luar dari kotak
   putih. Sekarang disamakan polanya (left:50%+translateX+max-width:var(--app-w))
   supaya di PC ikut center pas selebar bingkai HP, seperti elemen fixed lain.
   Di HP asli (viewport < --app-w) TIDAK ada bedanya sama sekali, karena
   lebarnya memang sudah otomatis mentok 100% layar. */
.cart-foot-bar{
  position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-w);bottom:calc(64px + var(--safe-b));z-index:26;background:#fff;border-top:1px solid #e7e8ee;
  padding:10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 -2px 10px rgba(0,0,0,.05);
}
.check-all{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:bold;color:var(--muted);white-space:nowrap;}
.cart-foot-bar .total-txt{flex:1;font-size:13px;}
.cart-foot-bar .total-txt b{color:var(--red);font-size:15px;}

/* ---------- pemilihan metode pengiriman (Troli) ---------- */
.shipping-box{background:#fff;border-radius:16px;padding:16px 15px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.shipping-box select{width:100%;padding:11px 12px;border-radius:11px;border:1.5px solid #e5e7ee;font-size:14px;background:#fff;}
.shipping-box textarea{width:100%;padding:11px 12px;border-radius:11px;border:1.5px solid #e5e7ee;font-size:13.5px;resize:vertical;font-family:inherit;}
/* ---------- info "Ambil Sendiri di Toko" — alamat dipisah rapi dari
   keterangan batas waktu, bukan digabung jadi satu paragraf panjang ---------- */
.pickup-info{margin-top:10px;background:#f6f8fc;border:1px solid #e7e8ee;border-radius:12px;padding:12px 13px;}
.pickup-info-label{font-size:11.5px;font-weight:bold;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.pickup-info-addr{font-size:13.5px;font-weight:bold;color:var(--text);line-height:1.45;margin-bottom:8px;}
.pickup-info-note{font-size:12px;color:var(--muted);line-height:1.5;padding-top:8px;border-top:1px dashed #dfe2ea;}
.countdown-txt{display:inline-block;}

/* ---------- akun grid & extras ---------- */
.cust-code{font-size:11px;font-weight:normal;color:rgba(255,255,255,.55);}
.stars{margin-top:6px;color:var(--gold-light);font-size:14px;letter-spacing:2px;}
.notice-banner{
  background:#fef3e0;color:var(--amber);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:12.5px;font-weight:bold;
  display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 1px 3px rgba(20,20,40,.05);
}
.account-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;background:#fff;border-radius:16px;padding:16px 8px;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.acc-grid-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;}
.acc-grid-item .ico-wrap{position:relative;font-size:21px;}
.acc-grid-item .ico-wrap .badge{
  position:absolute;top:-8px;right:-10px;background:var(--red);color:#fff;font-size:9px;font-weight:bold;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.acc-grid-item .lb{font-size:10.5px;font-weight:600;color:var(--text);line-height:1.2;}

/* ---------- order thumbs / invoice / unpaid ---------- */
.order-thumbs{display:flex;gap:6px;margin:8px 0;}
.order-thumb{width:44px;height:44px;border-radius:8px;background:#eef0f6;display:flex;align-items:center;justify-content:center;font-size:16px;color:#b7bccb;overflow:hidden;flex-shrink:0;}
.order-thumb img{width:100%;height:100%;object-fit:cover;}
.invoice-card{background:#fff;border-radius:16px;padding:14px 15px;margin-bottom:12px;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.invoice-card .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.kv-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--muted);}
.unpaid-hero{background:linear-gradient(135deg,#e0524d,var(--red));color:#fff;border-radius:16px;padding:18px 20px;margin-bottom:14px;text-align:center;}
.unpaid-hero .lb{font-size:12.5px;opacity:.85;}
.unpaid-hero .amt{font-size:26px;font-weight:bold;margin-top:4px;}
.info-box{background:#f7f8fb;border-radius:12px;padding:14px;font-size:12.5px;color:var(--text);line-height:1.6;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-card{background:#fff;border-radius:14px;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(20,20,40,.06);}
.stat-card .v{font-size:22px;font-weight:bold;color:var(--dark);}
.stat-card .l{font-size:11.5px;color:var(--muted);margin-top:3px;}

/* ---------- misc ---------- */
.section-title{font-size:15px;font-weight:bold;margin:4px 0 12px;}
.skeleton{background:linear-gradient(90deg,#eceef3 25%,#f6f7fa 37%,#eceef3 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius);}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:0 0;}}
.spinner-sm{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;}
.link-btn{background:none;border:none;color:var(--dark);font-weight:bold;font-size:13px;text-decoration:underline;padding:0;}
.checkout-success-ico{width:64px;height:64px;border-radius:50%;background:#e9f8ef;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px;}