/*
  Label pre-order di kartu produk — tiga bentuk, warnanya dari admin.

  Warna datang sebagai dua peubah yang dipasang sebaris oleh partial:
  --po-lb-bg (latar) dan --po-lb-tk (tulisan). Nilai cadangan di sini dipakai
  kalau partialnya suatu saat dipanggil tanpa warna.

  Kartu produk SUDAH punya lencana diskon di pojok KIRI ATAS (.pc-bd / .bd),
  jadi ketiga bentuk ini sengaja menghindari titik itu.
*/

/* Judul untuk pembaca layar pada bentuk pita — pitanya sendiri cuma hiasan
   yang diputar, dan teks miring 45 derajat sulit dibacakan dengan benar. */
.po-lb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------ 1. pita sudut */
.po-lb-pita{position:absolute;top:0;right:0;z-index:3;width:104px;height:104px;
  overflow:hidden;pointer-events:none}
.po-lb-pita span{position:absolute;top:20px;right:-30px;transform:rotate(45deg);
  background:var(--po-lb-bg,#1e3a5f);color:var(--po-lb-tk,#fff);
  font:800 10px Inter,system-ui,sans-serif;letter-spacing:.06em;
  padding:5px 34px;text-align:center;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* ------------------------------------------------------- 2. pil bertumpuk */
/* top 42px = tepat di bawah lencana diskon yang tingginya ±24px pada top:10px. */
.po-lb-pil{position:absolute;top:42px;left:10px;z-index:3;
  background:var(--po-lb-bg,#1e3a5f);color:var(--po-lb-tk,#fff);
  font:800 10.5px Inter,system-ui,sans-serif;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;white-space:nowrap}

/* Kalau produknya TIDAK sedang diskon, tidak ada lencana di atasnya — pilnya
   naik ke posisi lencana supaya tidak menggantung di ruang kosong. */
.pc:not(:has(.pc-bd)) .po-lb-pil,
.card:not(:has(.bd)) .po-lb-pil{top:10px}

/* ---------------------------------------------------- 3. bilah bawah gambar */
.po-lb-bilah{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--po-lb-bg,#1e3a5f);color:var(--po-lb-tk,#fff);
  padding:6px 10px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;font:700 10.5px Inter,system-ui,sans-serif;letter-spacing:.04em}
.po-lb-bilah b{font-weight:800;white-space:nowrap}
.po-lb-bilah span{font-weight:600;opacity:.92;letter-spacing:0;font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bingkai gambar kartu wajib jadi acuan posisi, kalau tidak bilahnya melompat
   ke sudut kartu. Kedua nama kelas dipakai: .pc-im di kartu daftar, .im di
   kartu beranda. */
.pc-im,.card .im,.pob-gbr{position:relative}

@media(max-width:420px){
  .po-lb-pita{width:88px;height:88px}
  .po-lb-pita span{top:16px;right:-28px;padding:4px 30px;font-size:9px}
  .po-lb-bilah span{display:none}
}