/* ============================================================
   PortoUMKM - Gaya tambahan: mode B2C Ritel / B2B Grosir,
   popup Detail Produk, harga bertingkat, sertifikat, form Admin.
   Dimuat SETELAH css/style.css (file lama tidak diubah).
   ------------------------------------------------------------
   WARNA: diatur dari Admin > Pengaturan > "Warna Tampilan Etalase".
   Nilai bawaan mode Grosir (biru muda) ada di variabel --pu-b2b-*
   di bawah; mode Ritel memakai warna asli aplikasi bila Admin
   tidak mengaturnya.
   ============================================================ */

:root {
    --pu-b2b-main: #0284c7;
    --pu-b2b-dark: #0369a1;
    --pu-b2b-tint: #f0f9ff;
    --pu-b2b-border: #bae6fd;
    --pu-b2b-on: #ffffff;
}
/* Mode Ritel (bawaan): warna asli aplikasi */
body { --pu-tint: #fbf1f2; --pu-border-tint: #ecd3d6; --pu-on: #ffffff; --pu-accent: var(--primary); --pu-accent-dark: var(--primary); }
/* Mode Ritel dengan warna yang diatur Admin */
body[data-mode="b2c"].pu-b2c-custom {
    --pu-accent: var(--pu-b2c-main); --pu-accent-dark: var(--pu-b2c-dark);
    --pu-tint: var(--pu-b2c-tint); --pu-border-tint: var(--pu-b2c-border); --pu-on: var(--pu-b2c-on);
}
/* Mode Grosir */
body[data-mode="b2b"] {
    --pu-accent: var(--pu-b2b-main); --pu-accent-dark: var(--pu-b2b-dark);
    --pu-tint: var(--pu-b2b-tint); --pu-border-tint: var(--pu-b2b-border); --pu-on: var(--pu-b2b-on);
}
/* Warna diterapkan ke seluruh etalase (bukan halaman Admin) saat mode Grosir, atau Ritel yang diwarnai Admin */
body.pu-recolor:not(.admin-mode) { --primary: var(--pu-accent); }
body.pu-recolor:not(.admin-mode) .btn-primary { background: var(--pu-accent); border-color: var(--pu-accent); color: var(--pu-on); }
body.pu-recolor:not(.admin-mode) .btn-primary:hover { background: var(--pu-accent-dark); border-color: var(--pu-accent-dark); }
body.pu-recolor:not(.admin-mode) .nav-link.active { background: var(--pu-accent); color: var(--pu-on); }
body.pu-recolor:not(.admin-mode) .chip.active,
body.pu-recolor:not(.admin-mode) .chip-solid.active { background: var(--pu-accent); border-color: var(--pu-accent); color: var(--pu-on); }
body.pu-recolor:not(.admin-mode) .page-btn.active { background: var(--pu-accent); border-color: var(--pu-accent); color: var(--pu-on); }
body.pu-recolor:not(.admin-mode) .price-now { color: var(--pu-accent); }
body.pu-recolor:not(.admin-mode) .cart-badge { background: var(--pu-accent); color: var(--pu-on); }
body.pu-recolor:not(.admin-mode) .hero-badge { color: var(--pu-accent); border-color: var(--pu-border-tint); background: var(--pu-tint); }

/* ---------- BAR MODE DI ATAS HEADER ---------- */
.pu-mode-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--primary); color: var(--pu-on, #fff); font-size: 12px; line-height: 1.3; padding: 6px 16px;
}
.pu-mode-pill { background: rgba(255,255,255,.2); border-radius: 6px; padding: 2px 10px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
body.admin-mode .pu-mode-strip { display: none; }

/* ---------- TOMBOL PILIH MODE (B2C Ritel | B2B Grosir) ---------- */
.pu-mode-toggle { display: inline-flex; align-items: center; gap: 2px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px; flex-shrink: 0; }
.pu-mode-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #475569; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pu-mode-btn.active { background: var(--primary); color: var(--pu-on, #fff); }
.pu-lbl-short { display: none; }
@media (max-width: 640px) {
    .pu-mode-btn { padding: 6px 9px; }
    .pu-lbl-long { display: none; }
    .pu-lbl-short { display: inline; }
    .pu-mode-strip { padding: 5px 10px; font-size: 11px; }
}

/* ---------- KARTU PRODUK ---------- */
.pu-card { cursor: pointer; }
.pu-card-actions { display: flex; gap: 8px; }
.pu-card-actions > button { flex: 1; min-width: 0; white-space: nowrap; }
.pu-cert-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-cert-card { margin-top: 8px; }
.pu-cert { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.pu-cert i { color: #16a34a; }
.pu-cert-more { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.pu-b2b-box { background: var(--pu-tint); border: 1px solid var(--pu-border-tint); border-radius: 10px; padding: 10px; margin-top: 8px; }
.pu-b2b-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pu-b2b-row + .pu-b2b-row { margin-top: 6px; }
.pu-b2b-lbl { color: #64748b; }
.pu-b2b-price { color: var(--pu-accent); font-weight: 800; }
.pu-b2b-rfq { font-weight: 700; }
.pu-tiered-tag { margin-left: auto; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }

/* ---------- BANNER MODE B2B ---------- */
.pu-b2b-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--pu-tint); border: 1px solid var(--pu-border-tint); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.pu-b2b-banner-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--pu-accent); color: var(--pu-on); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pu-b2b-banner-txt { flex: 1; min-width: 200px; font-size: 12px; color: #475569; }
.pu-b2b-banner-title { font-size: 12px; font-weight: 800; color: #1e293b; margin-bottom: 2px; }

/* ---------- POPUP DETAIL PRODUK ---------- */
.modal-box.pu-detail-box { position: relative; width: min(980px, 96vw); max-width: 980px; max-height: 92vh; overflow-y: auto; padding: 0; border-radius: 20px; }
.pu-detail-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f5f9; color: #334155; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pu-detail-pad { padding: 28px; }
.pu-detail { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 22px; }
@media (min-width: 768px) { .pu-detail { grid-template-columns: 360px 1fr; gap: 28px; padding: 28px; } }
.pu-gallery-main { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.pu-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pu-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.pu-thumb { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #f1f5f9; cursor: pointer; }
.pu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-thumb.active { border-color: var(--primary); }
.pu-legal { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #f8fafc; }
.pu-legal-title { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #334155; margin-bottom: 8px; }
.pu-legal-title i { color: #16a34a; }
.pu-legal-sub { font-size: 11px; color: #64748b; margin-top: 8px; }
.pu-detail-right { min-width: 0; padding-right: 30px; }
.pu-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pu-pill-kat { background: var(--pu-tint); color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 6px; }
.pu-sub { font-size: 12px; color: #64748b; }
.pu-detail-title { font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--text-primary); margin: 8px 0 4px; }
.pu-detail-by { font-size: 13px; color: var(--text-muted); }
.pu-detail-desc { font-size: 13px; color: var(--text-body); line-height: 1.65; margin: 12px 0 0; white-space: pre-line; }
.pu-price-box { background: var(--pu-tint); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.pu-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pu-price { font-size: 26px; font-weight: 800; color: var(--primary); }
.pu-unit { font-size: 13px; color: var(--text-muted); }
.pu-minorder { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.pu-tier-box { border: 1px solid var(--pu-border-tint); border-radius: 12px; padding: 12px; margin-top: 14px; background: #fff; }
.pu-tier-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 800; color: #1e293b; }
.pu-tier-head i { color: var(--pu-accent); }
.pu-moq-badge { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.pu-tier-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.pu-tier-table th { text-align: left; font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: .03em; padding: 6px 8px 6px 0; border-bottom: 1px solid #e2e8f0; }
.pu-tier-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.pu-td-harga { font-weight: 800; white-space: nowrap; }
.pu-td-grosir { color: var(--pu-accent); }
.pu-td-ket { font-size: 11px; color: #64748b; }
.pu-tier-table tr.aktif td { background: var(--pu-tint); }
.pu-label { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #475569; text-transform: uppercase; margin-bottom: 6px; }
.pu-req { color: #dc2626; }
.pu-opt { text-transform: none; font-weight: 500; color: #94a3b8; letter-spacing: 0; }
.pu-warna { margin-top: 14px; border-radius: 10px; }
.pu-warna.pu-invalid { outline: 2px solid #dc2626; outline-offset: 4px; }
.pu-warna-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pu-warna-chip { padding: 6px 14px; border: 1.5px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 12px; color: #334155; cursor: pointer; }
.pu-warna-chip.active { border-color: var(--primary); background: var(--pu-tint); color: var(--primary); font-weight: 800; }
.pu-calc { margin-top: 14px; border: 1px solid var(--pu-border-tint); background: var(--pu-tint); border-radius: 12px; padding: 12px; }
.pu-calc-title { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #1e293b; }
.pu-calc-title i { color: var(--primary); }
.pu-calc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 10px; }
.pu-qty { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; overflow: hidden; }
.pu-qty button { border: 0; background: transparent; padding: 8px 10px; font-size: 12px; font-weight: 700; color: #334155; cursor: pointer; }
.pu-qty button:hover { background: #f1f5f9; }
.pu-qty input { width: 64px; text-align: center; border: 0; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; padding: 8px 4px; font-weight: 800; font-size: 14px; background: #fff; -moz-appearance: textfield; }
.pu-qty input::-webkit-outer-spin-button, .pu-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pu-total-wrap { text-align: right; }
.pu-total-label { font-size: 11px; color: #64748b; }
.pu-total { font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.pu-total-sub { font-size: 11px; color: #64748b; }
.pu-warn { display: none; margin-top: 10px; font-size: 12px; color: #b45309; background: #fffbeb; border-radius: 8px; padding: 6px 10px; }
.pu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: stretch; }
.pu-actions > button, .pu-actions > a.pu-wa { min-height: 42px; }
.pu-actions > button { flex: 1; min-width: 150px; }
.pu-btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #0f172a; color: #fff; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.pu-btn-dark:hover { background: #1e293b; }
.pu-wa { display: inline-flex; align-items: center; justify-content: center; width: 42px; flex: none; }
.pu-rfq-est { display: none; background: var(--pu-tint); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #334155; margin-top: 6px; }

/* ---------- FORM ADMIN: foto, tier harga, sertifikat ---------- */
.pf-foto-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pf-foto-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 2px solid #e2e8f0; background: #f1f5f9; }
.pf-foto-item.utama { border-color: var(--primary); }
.pf-foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-foto-item .pf-foto-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(15,23,42,.75); color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-foto-item .pf-foto-tag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,.7); color: #fff; font-size: 10px; text-align: center; padding: 2px 0; cursor: pointer; border: 0; width: 100%; }
.pf-foto-item.utama .pf-foto-tag { background: var(--primary); cursor: default; }
.pf-foto-item.baru { border-style: dashed; }
.pf-foto-info { font-size: 11px; color: #64748b; margin-top: 6px; }
.pf-section { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #f8fafc; }
.pf-section-title { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #475569; margin-bottom: 8px; }
.pf-cek { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.pf-cek input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.pf-cert-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.pf-cert-row .form-input { height: 34px; padding: 4px 10px; font-size: 12px; }
.pf-tier-row { display: grid; grid-template-columns: 90px 1fr 1.2fr 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.pf-tier-row .form-input { height: 34px; padding: 4px 8px; font-size: 12px; }
@media (max-width: 520px) { .pf-tier-row { grid-template-columns: 70px 1fr 34px; } .pf-tier-row .pf-tier-ket { grid-column: 1 / -1; } }
.pf-badge-mode { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.pf-badge-b2c { background: #e2e8f0; color: #334155; }
.pf-badge-b2b { background: #e0f2fe; color: #075985; }

/* Label tombol: versi panjang untuk layar lebar, versi pendek untuk HP */
.pu-t-long { display: inline; }
.pu-t-short { display: none; }

/* ---------- TAG CEPAT (otomatis dari sub-kategori) ---------- */
.tag-quick.active { background: var(--pu-accent, var(--primary)); border-color: var(--pu-accent, var(--primary)); color: var(--pu-on, #fff); }
.tag-quick .tag-quick-n { opacity: .65; font-size: 10px; margin-left: 2px; }

/* ---------- WIDGET RINGKASAN (Monitoring Pembayaran & Pesanan) ---------- */
.pu-stat-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .pu-stat-grid { grid-template-columns: repeat(3, 1fr); } }
.pu-stat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.pu-stat-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pu-stat-label { font-size: 11px; color: #64748b; font-weight: 600; }
.pu-stat-nilai { font-size: 18px; font-weight: 800; line-height: 1.25; }
.pu-stat-sub { font-size: 11px; color: #94a3b8; }
.pu-mode-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.pu-mode-b2c { background: #e2e8f0; color: #334155; }
.pu-mode-b2b { background: #e0f2fe; color: #075985; }
/* ---------- PILIH PAKET DI POPUP DETAIL ---------- */
.pu-paket { margin-top: 14px; border-radius: 10px; }
.pu-paket.pu-invalid { outline: 2px solid #dc2626; outline-offset: 4px; }
.pu-paket-menu { display: none; margin-top: 6px; font-size: 12px; color: var(--text-muted); background: var(--pu-tint); border-radius: 8px; padding: 6px 10px; }

/* ============================================================
   CHIP SEKTOR: ikon di kiri + warna khas tiap sektor
   ============================================================ */
.pu-chip { display: inline-flex; align-items: center; gap: 7px; }
.pu-chip > i { font-size: 14px; line-height: 1; }
/* Saat TIDAK aktif: latar putih, ikon berwarna khas sektornya */
.pu-chip-rasa > i   { color: #7c4a21; }   /* Kuliner  - coklat */
.pu-chip-tani > i   { color: #14532d; }   /* Pertanian - hijau tua */
.pu-chip-kriya > i  { color: #9d174d; }   /* Kerajinan - pink tua */
.pu-chip-promo > i  { color: #b45309; }
.pu-chip-sering > i { color: #c2410c; }
.pu-chip-netral > i { color: #475569; }
/* Saat aktif: kotaknya ikut berwarna, tulisan & ikon putih */
.chip.pu-chip-rasa.active   { background: #7c4a21; border-color: #7c4a21; color: #fff; }
.chip.pu-chip-tani.active   { background: #14532d; border-color: #14532d; color: #fff; }
.chip.pu-chip-kriya.active  { background: #9d174d; border-color: #9d174d; color: #fff; }
.chip.pu-chip-promo.active  { background: #b45309; border-color: #b45309; color: #fff; }
.chip.pu-chip-sering.active { background: #c2410c; border-color: #c2410c; color: #fff; }
.chip.pu-chip-netral.active { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
.chip.pu-chip.active > i { color: inherit; }
/* Warna sektor menang atas tema B2B/B2C supaya tiap sektor tetap dikenali */
body.pu-recolor:not(.admin-mode) .chip.pu-chip-rasa.active   { background: #7c4a21; border-color: #7c4a21; color: #fff; }
body.pu-recolor:not(.admin-mode) .chip.pu-chip-tani.active   { background: #14532d; border-color: #14532d; color: #fff; }
body.pu-recolor:not(.admin-mode) .chip.pu-chip-kriya.active  { background: #9d174d; border-color: #9d174d; color: #fff; }
body.pu-recolor:not(.admin-mode) .chip.pu-chip-promo.active  { background: #b45309; border-color: #b45309; color: #fff; }
body.pu-recolor:not(.admin-mode) .chip.pu-chip-sering.active { background: #c2410c; border-color: #c2410c; color: #fff; }
body.pu-recolor:not(.admin-mode) .chip.pu-chip-netral.active { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }

/* ============================================================
   MODE HP (lebar layar <= 720px)
   Hanya menata ulang komponen yang dibuat file ini; aturan lama
   di css/style.css tidak diubah.
   ============================================================ */
@media (max-width: 720px) {
    /* ---- pengaman: halaman tidak boleh bisa digeser ke samping ---- */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* ---- judul hero: satu baris, ukurannya dikecilkan oleh muatkanJudulHero() ----
       .page-wrap di hero memakai display:grid. Anak grid bawaannya min-width:auto,
       sehingga kolomnya ikut MELEBAR mengikuti teks yang nowrap dan halaman jadi
       lebih lebar dari layar. min-width:0 mengunci lebarnya ke lebar layar. */
    .hero-section .page-wrap, .hero-section .page-wrap > * { min-width: 0; }
    .hero-title { white-space: nowrap; overflow: hidden; max-width: 100%; }
    .hero-title > span { white-space: nowrap; }
    .hero-section p, .hero-section .pill-feature { max-width: 100%; }

    /* ---- tombol kartu produk: teks pendek & tidak pernah melewati kotak ---- */
    .pu-card-actions > button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pu-t-long { display: none; }
    .pu-t-short { display: inline; }

    /* ---- chip & tag: bisa digeser mendatar, tidak menumpuk berantakan ---- */
    #katalogSektorChips, #rfqJenisChips, #rfqFilterChips, #pesananModeChips, #pesananStatusChips {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; scrollbar-width: none;
    }
    #katalogSektorChips::-webkit-scrollbar, #rfqJenisChips::-webkit-scrollbar, #rfqFilterChips::-webkit-scrollbar,
    #pesananModeChips::-webkit-scrollbar, #pesananStatusChips::-webkit-scrollbar { display: none; }
    #katalogSektorChips > .chip, #rfqJenisChips > .chip, #rfqFilterChips > .chip,
    #pesananModeChips > .chip, #pesananStatusChips > .chip { flex: none; }
    .pu-chip > span { white-space: nowrap; }

    /* ---- popup detail produk ---- */
    .modal-box.pu-detail-box { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .pu-detail { padding: 16px; gap: 16px; }
    .pu-detail-right { padding-right: 0; }
    .pu-detail-title { font-size: 20px; }
    .pu-detail-close { top: 10px; right: 10px; }
    .pu-detail-meta { padding-right: 44px; }   /* beri ruang untuk tombol tutup */
    .pu-gallery-main { aspect-ratio: 4 / 3; }
    .pu-price { font-size: 22px; }
    .pu-tier-table { font-size: 11px; }
    .pu-tier-table th, .pu-tier-table td { padding-right: 4px; }
    .pu-td-ket { display: none; }              /* kolom keterangan disembunyikan agar tabel muat */
    .pu-tier-table th:nth-child(3) { display: none; }
    .pu-calc-row { flex-direction: column; align-items: stretch; gap: 10px; }
    /* Kotak jumlah mengikuti lebar kartu, tidak meluber keluar */
    .pu-qty { display: flex; width: 100%; box-sizing: border-box; max-width: 100%; }
    .pu-qty button { flex: none; padding: 8px 9px; }
    .pu-qty input { flex: 1 1 auto; width: auto; min-width: 0; }
    .pu-total-wrap { text-align: left; border-top: 1px dashed var(--pu-border-tint); padding-top: 8px; }
    /* Tombol WhatsApp dan tombol pesan tetap BERDAMPINGAN, tidak menumpuk */
    .pu-actions { flex-direction: row; flex-wrap: wrap; }
    .pu-actions > button { flex: 1 1 140px; width: auto; min-width: 0; }
    .pu-actions > a.pu-wa { width: 44px; flex: none; }

    /* ---- kartu produk: tombol tetap terbaca ---- */
    /* Tombol di kartu produk juga berdampingan */
    .pu-card-actions { flex-direction: row; gap: 6px; }
    .pu-card-actions > button { flex: 1 1 0; width: auto; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 11px; }
    .pu-b2b-row { font-size: 11px; }
    .pu-tiered-tag { margin-left: 0; }

    /* ---- banner & widget ---- */
    .pu-b2b-banner { padding: 12px; }
    .pu-b2b-banner > button { width: 100%; }
    .pu-stat { padding: 10px 12px; }
    .pu-stat-nilai { font-size: 16px; }

    /* ---- form di dalam popup: dua kolom jadi satu kolom ---- */
    #previewModalContent .grid.grid-cols-2 { grid-template-columns: 1fr; }
    .pf-cert-row { grid-template-columns: 1fr; gap: 4px; }
    .pf-tier-row { grid-template-columns: 1fr 1fr 34px; }
    .pf-tier-row .pf-tier-ket { grid-column: 1 / -1; }
    .pf-foto-item { width: 72px; height: 72px; }

    /* ---- TABEL ADMIN: berubah jadi kartu bertumpuk ----
       Label tiap baris diambil dari judul kolom oleh terapkanLabelTabelHp(). */
    .data-table.pu-tabel-hp thead { display: none; }
    .data-table.pu-tabel-hp, .data-table.pu-tabel-hp tbody, .data-table.pu-tabel-hp tr, .data-table.pu-tabel-hp td { display: block; width: 100%; }
    .data-table.pu-tabel-hp tr {
        border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px;
        margin-bottom: 10px; background: #fff;
    }
    .data-table.pu-tabel-hp td {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        border: 0; border-bottom: 1px dashed #eef2f7; padding: 6px 0; text-align: right;
        white-space: normal !important; max-width: none !important;
    }
    .data-table.pu-tabel-hp td:last-child { border-bottom: 0; justify-content: flex-end; padding-top: 10px; }
    .data-table.pu-tabel-hp td::before {
        content: attr(data-label); flex: none; text-align: left; max-width: 42%;
        font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .02em;
    }
    .data-table.pu-tabel-hp td[data-label=""]::before { display: none; }
    .data-table.pu-tabel-hp td > * { margin-left: auto; }
    .data-table.pu-tabel-hp td img { margin-left: auto; }
    .data-table.pu-tabel-hp .form-select { width: auto; max-width: 60%; }
    .data-table.pu-tabel-hp tr:first-child td:first-child { padding-top: 0; }
    .table-wrap:has(.pu-tabel-hp) { overflow-x: visible; }
}

/* ============================================================
   POPUP FLYER PROMO (rasio 1:1, bergulir otomatis)
   ============================================================ */
.modal-box.pu-promo-box {
    width: min(440px, 92vw); max-width: 440px; padding: 0;
    background: transparent; border: 0; box-shadow: none; overflow: visible;
}
#popupPromoBody { position: relative; }
.pu-promo-bingkai {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 16px; overflow: hidden; background: #0f172a;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
}
.pu-promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.pu-promo-slide.aktif { opacity: 1; pointer-events: auto; }
.pu-promo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-promo-tutup {
    position: absolute; top: -14px; right: -14px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: #fff; color: #0f172a; cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .3);
}
.pu-promo-tutup:hover { background: #f1f5f9; }
.pu-promo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.pu-promo-dot {
    width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 0; background: rgba(255, 255, 255, .55);
}
.pu-promo-dot.aktif { background: #fff; width: 22px; border-radius: 999px; }
@media (max-width: 720px) {
    .modal-box.pu-promo-box { width: calc(100vw - 36px); max-width: calc(100vw - 36px); }
    .pu-promo-tutup { top: -12px; right: -8px; width: 34px; height: 34px; }
}

/* ============================================================
   KONFIRMASI PESANAN (antrean kartu + lencana angka di menu)
   ============================================================ */
.pu-lencana {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
}
.pu-antri-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .pu-antri-grid { grid-template-columns: repeat(2, 1fr); } }
.pu-antri-kartu { border: 1px solid #e2e8f0; border-left: 4px solid #d97706; border-radius: 12px; padding: 14px; background: #fff; }
.pu-antri-kepala { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pu-antri-nomor { font-size: 13px; font-weight: 800; color: #0f172a; }
.pu-antri-waktu { margin-left: auto; font-size: 11px; color: #94a3b8; }
.pu-antri-baris { display: flex; gap: 10px; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #f1f5f9; font-size: 12px; }
.pu-antri-baris > span { color: #64748b; flex: none; max-width: 42%; }
.pu-antri-baris > b { color: #0f172a; text-align: right; font-weight: 600; white-space: pre-line; }
.pu-antri-item { margin-top: 10px; background: #f8fafc; border-radius: 8px; padding: 8px 10px; }
.pu-antri-item ul { margin: 0; padding-left: 18px; font-size: 12px; color: #334155; }
.pu-antri-item li + li { margin-top: 4px; }
.pu-antri-total { margin-top: 8px; text-align: right; font-size: 13px; color: #334155; }
.pu-antri-aksi { display: flex; gap: 8px; margin-top: 12px; }
.pu-antri-aksi > button { flex: 1; height: 40px; }

/* ============================================================
   PILIH MODEL / TIPE (berdasarkan nomor foto produk)
   ============================================================ */
.pu-model { margin-top: 14px; border-radius: 10px; }
.pu-model.pu-invalid { outline: 2px solid #dc2626; outline-offset: 4px; }
.pu-model-info { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; }
.pu-model-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pu-model-chip {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: 86px; padding: 6px; cursor: pointer;
    border: 2px solid #e2e8f0; border-radius: 10px; background: #fff;
}
.pu-model-chip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; }
.pu-model-chip span { font-size: 10px; font-weight: 700; color: #334155; text-align: center; line-height: 1.25; }
.pu-model-chip.active { border-color: var(--pu-accent, var(--primary)); background: var(--pu-tint); }
.pu-model-chip.active span { color: var(--pu-accent, var(--primary)); }
.pu-model-tag {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 4px; background: #fef3c7; color: #92400e;
}
/* Kolom nama per foto di form produk Admin */
.pf-foto-bungkus { display: flex; flex-direction: column; gap: 4px; width: 84px; }
.pf-foto-nomor { font-size: 10px; font-weight: 700; color: #475569; text-align: center; }
.pf-foto-nama {
    width: 100%; font-size: 10px; padding: 3px 5px;
    border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a;
}
@media (max-width: 720px) {
    .pu-model-chip { width: 76px; }
    .pf-foto-bungkus { width: 72px; }
}

/* ============================================================
   JAM SAMPAI PER PRODUK
   Satu pesanan boleh punya jam sampai berbeda tiap produknya.
   ============================================================ */
.pu-jam-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--border, #e2e8f0);
}
.pu-jam-item > label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.pu-jam-input.form-input {
    width: 112px;
    min-width: 0;
    height: 34px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.pu-jam-info {
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
}
.pu-jam-reset {
    background: none;
    border: none;
    padding: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}
/* Keterangan di bawah kolom jam umum pada form pemesan */
.pu-jam-ringkas {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: -6px 0 14px;
}
.pu-jam-ringkas-aktif {
    color: var(--text-body);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
    margin: -2px 0 14px;
}
/* Penanda jam pada rincian item di halaman Admin */
.pu-jam-tag {
    font-size: 11px;
    color: var(--text-body);
    margin-top: 2px;
}
.pu-jam-tag b { color: var(--text-primary); }

@media (max-width: 720px) {
    .pu-jam-item { gap: 6px; }
    .pu-jam-item > label { font-size: 11px; }
    .pu-jam-input.form-input { width: 100px; height: 36px; }
}

/* ============================================================
   RINCIAN MENU PAKET YANG BISA DIUBAH CUSTOMER
   Hanya pada baris keranjang & pesanan. Menu standar di kartu
   produk tidak pernah ikut berubah.
   ============================================================ */
.pu-menu-edit {
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
}
.pu-menu-edit.pu-menu-diubah {
    background: #fffbeb;
    border-color: #fcd34d;
}
.pu-menu-kepala {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.pu-menu-badge {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: #92400e;
    background: #fde68a;
    border-radius: 999px;
    padding: 1px 8px;
}
.pu-menu-teks {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 6px 8px;
}
.pu-menu-teks:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, .14);
}
.pu-menu-bantuan,
.pu-menu-asli {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 5px;
}
.pu-menu-reset {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}
/* Tampilan di halaman Admin (rincian item) */
.pu-menu-baris {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-body);
    margin-top: 3px;
}
.pu-menu-baris-ubah {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 5px 8px;
    color: var(--text-primary);
}
.pu-menu-asli-adm {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

@media (max-width: 720px) {
    .pu-menu-edit { padding: 7px; }
    .pu-menu-teks { font-size: 12px; }
}

/* ============================================================
   KESEPAKATAN RFQ / SAMPEL -> PESANAN
   ============================================================ */
.pu-btn-deal {
    height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
    white-space: nowrap;
}
.pu-deal-box { line-height: 1.4; }
.pu-deal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #065f46;
    background: #d1fae5;
    border-radius: 999px;
    padding: 2px 9px;
}
.pu-deal-rinci {
    font-size: 11.5px;
    color: var(--text-body);
    margin-top: 3px;
}
.pu-deal-rinci b { color: var(--text-primary); }
.pu-terkunci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    cursor: default;
}
/* Ringkasan pengajuan di dalam form kesepakatan */
.pu-deal-ringkas {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 14px;
}
.pu-deal-ringkas > div {
    display: flex;
    gap: 10px;
    font-size: 12px;
    padding: 2px 0;
}
.pu-deal-ringkas span {
    width: 108px;
    flex: none;
    color: var(--text-muted);
}
.pu-deal-ringkas b { color: var(--text-primary); }
.pu-deal-total {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-body);
}
.pu-deal-total b {
    font-size: 16px;
    color: var(--primary);
}

@media (max-width: 720px) {
    .pu-deal-ringkas span { width: 92px; }
    .pu-btn-deal { width: 100%; }
}

/* ============================================================
   PROMOSI WHATSAPP
   ============================================================ */
.pu-promo-langkah {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.pu-promo-kol { min-width: 0; }
.pu-btn-kecil { height: 30px; padding: 0 10px; font-size: 11.5px; }
.pu-promo-daftar {
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}
.pu-promo-baris {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid #f1f5f9;
}
.pu-promo-baris:last-child { border-bottom: none; }
.pu-promo-kecuali { background: #f8fafc; opacity: .72; }
.pu-promo-cek {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    font-size: 13px;
}
.pu-promo-cek input { margin-top: 3px; flex: none; }
.pu-promo-cek b { color: var(--text-primary); }
.pu-promo-pt { color: var(--text-muted); font-size: 12px; }
.pu-promo-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.45;
}
.pu-promo-aksi {
    flex: none;
    background: none;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.pu-promo-aksi:hover { background: #f1f5f9; }
.pu-promo-aksi-merah { color: #b91c1c; border-color: #fecaca; }
/* Pratinjau menyerupai gelembung pesan WhatsApp */
.pu-promo-pratinjau { margin-top: 4px; }
.pu-promo-gelembung {
    background: #dcf8c6;
    border-radius: 10px 10px 10px 2px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #111827;
    white-space: normal;
    word-break: break-word;
}
.pu-promo-hitung {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 6px;
}
.pu-promo-sampel { margin-top: 2px; }
/* Antrean pengiriman satu per satu */
.pu-antre-bar {
    height: 7px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pu-antre-isi {
    height: 100%;
    background: #16a34a;
    border-radius: 999px;
    transition: width .25s ease;
}
.pu-antre-kartu {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.pu-antre-nama { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.pu-antre-hp { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 860px) {
    .pu-promo-langkah { grid-template-columns: 1fr; }
    .pu-promo-daftar { max-height: 340px; }
}
@media (max-width: 720px) {
    .pu-promo-baris { flex-wrap: wrap; }
    .pu-promo-aksi { width: 100%; text-align: center; padding: 5px 9px; }
}

/* ============================================================
   PRODUK DISOROT (tampil paling depan)
   ============================================================ */
.pu-sorot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.pu-sorot:hover { background: #f1f5f9; }
.pu-sorot-aktif {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}
.pu-sorot-aktif:hover { background: #fde68a; }
/* Penanda pada kartu produk */
.pu-badge-sorot {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f59e0b;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 3px 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    z-index: 2;
}
/* Keterangan kuota di baris saringan Manajemen Produk */
.pu-sorot-kuota {
    align-self: center;
    margin-left: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .pu-sorot span { display: none; }
    .pu-sorot { padding: 5px 9px; }
    .pu-badge-sorot { font-size: 10px; padding: 2px 7px; }
}

/* ============================================================
   PENANDA "BERAPA KALI DIPESAN" DI KARTU PRODUK
   Angka ini dibaca pengunjung sebagai bukti sosial, jadi tampilannya
   tenang: baris kecil di bawah harga, bukan stiker besar yang bersaing
   dengan badge diskon maupun badge Pilihan.
   ============================================================ */
.pu-laris {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 9px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pu-laris > i { font-size: 11px; color: #64748b; }
.pu-laris > b { font-weight: 800; color: #1e293b; }
/* 10 pesanan ke atas: produk yang benar-benar laris, diberi warna hangat. */
.pu-laris-kuat {
    color: #9a3412;
    background: #fff7ed;
    border-color: #fed7aa;
}
.pu-laris-kuat > i { color: #ea580c; }
.pu-laris-kuat > b { color: #9a3412; }

@media (max-width: 720px) {
    .pu-laris { font-size: 10.5px; padding: 2px 8px; margin-top: 5px; }
    .pu-laris > i { font-size: 10px; }
}