/*
  Tiga desain label promosi. Warnanya diatur dari layar admin lewat properti
  kustom --lb-latar dan --lb-teks, jadi berkas ini tidak pernah perlu diubah
  kalau admin ganti warna.

  Posisinya di KANAN atas. Kiri atas sudah dipakai badge diskon "-15%" dan
  penanda "Habis" yang sudah ada -- keduanya TIDAK diubah.
*/

.pm-label-wrap{
  position:absolute;
  top:6px;
  right:6px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  pointer-events:none;         /* jangan menghalangi klik kartu */
  max-width:68%;
}

.pm-label{
  --lb-latar:#e02424;
  --lb-teks:#ffffff;
  font-size:11px;
  line-height:1.25;
  font-weight:500;
  color:var(--lb-teks);
  background:var(--lb-latar);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* 1. Kotak -- paling netral, cocok untuk tulisan panjang */
.pm-label.b-kotak{
  padding:3px 8px;
  border-radius:5px;
}

/* 2. Pita sudut -- ujung kirinya meruncing seperti label harga */
.pm-label.b-pita{
  padding:3px 9px 3px 14px;
  border-radius:3px 5px 5px 3px;
  clip-path:polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
}

/* 3. Lingkaran -- untuk teks pendek saja, mis. "BARU" atau angka */
.pm-label.b-lingkaran{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px;
  font-size:10px;
  white-space:normal;
  line-height:1.15;
}

@media (max-width:575px){
  .pm-label{font-size:10px}
  .pm-label.b-lingkaran{width:38px;height:38px;font-size:9px}
  .pm-label-wrap{top:4px;right:4px;gap:3px}
}

/*
  Halaman produk: labelnya ikut tampil di atas galeri gambar.

  Selektornya dulu `.pg-galeri` dan `.product-gallery` -- dua-duanya TIDAK
  PERNAH ADA di HTML mana pun, jadi aturan ini tidak pernah berlaku. Ditulis
  sebagai persiapan waktu labelnya belum dipasang di halaman produk, dan
  nama kelasnya meleset. Pembungkus yang benar adalah .pg-utama.

  Di halaman produk gambarnya jauh lebih besar daripada di kartu, jadi
  labelnya ikut dibesarkan sedikit supaya seimbang -- 11px yang pas di
  kartu terlihat seperti debu di atas gambar 600px.
*/
.pg-utama .pm-label-wrap{top:10px;right:10px;max-width:55%}
.pg-utama .pm-label{font-size:12.5px;padding:4px 10px}
.pg-utama .pm-label.b-pita{padding:4px 11px 4px 16px}
.pg-utama .pm-label.b-lingkaran{width:52px;height:52px;font-size:11px;padding:5px}

@media (max-width:575px){
  .pg-utama .pm-label-wrap{top:7px;right:7px}
  .pg-utama .pm-label{font-size:11px;padding:3px 8px}
  .pg-utama .pm-label.b-lingkaran{width:44px;height:44px;font-size:10px}
}

/*
  ------------------------------------------------------------------
  BENTROK DENGAN LABEL PRE-ORDER -- sudah diantisipasi, jangan dibuang.

  Label pre-order punya TIGA gaya yang dipilih admin:
    pita   -> top:0 right:0, segitiga 104x104px (88x88 di layar <=420px)
              => memakai sudut yang SAMA dengan label promosi
    pil    -> kiri atas, tidak bertabrakan
    bilah  -> menempel dasar bingkai gambar, tidak bertabrakan

  Kalau keduanya muncul di satu kartu, label promosi digeser turun ke bawah
  pitanya. Aturan ini WAJIB ADA walaupun gaya yang aktif sekarang bukan pita:
  admin bisa menggantinya kapan saja dari layar Pre-order, dan kalau itu
  terjadi tanpa aturan ini, keduanya saling menimpa tanpa ada yang menyadari.

  :has() memang sudah dipakai preorder-label.css (baris .po-lb-pil), jadi
  ketergantungannya tidak baru.
*/
.card:has(.po-lb-pita) .pm-label-wrap,
.pc:has(.po-lb-pita) .pm-label-wrap,
.sh:has(.po-lb-pita) .pm-label-wrap{top:72px}

@media(max-width:420px){
  .card:has(.po-lb-pita) .pm-label-wrap,
  .pc:has(.po-lb-pita) .pm-label-wrap,
  .sh:has(.po-lb-pita) .pm-label-wrap{top:62px}
}

/*
  Banner promo berbatas waktu di halaman produk (partials/promosi-banner).
  Ditaruh di berkas ini, bukan berkas baru, karena halaman produk sudah
  memuatnya untuk label -- satu permintaan lebih sedikit.
*/
.pm-banner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px 0 4px;
  padding:9px 12px;
  border:1px solid #f0dca8;
  border-radius:8px;
  background:#fff8e5;
  color:#5c4a12 !important;
  font-size:13.5px;
  line-height:1.45;
}
.pm-banner b{color:#8a6d1a !important;font-weight:700}
.pm-banner-ikon{font-size:15px;line-height:1.3;flex-shrink:0}

@media (max-width:575px){
  .pm-banner{font-size:12.5px;padding:8px 10px}
}