/* ป้ายแปะทับรูปสินค้าบนการ์ดหน้ารายการ — ขายดี · สินค้าใหม่ · มาแรง · ลดราคา · หมดแล้วหมดเลย
   (เจ้าของสั่ง 15 ก.ย. 2569 · มติ 88)

   ⚠ ไฟล์นี้เป็น "ตัวทับ" เท่านั้น โหลดหลัง storefront.css และโหลดเฉพาะหน้า Catalog
     (ดู layout.blade.php) — หน้าสินค้าเดี่ยวมีป้ายของตัวเอง อยู่ที่ `variant-badge.css` (มติ 151)

   ⚠⚠ หนึ่งไฟล์ตอบหนึ่งเรื่อง — ไฟล์นี้ตอบเรื่อง "ป้าย" เท่านั้น
     สีของตัวหนังสือบนการ์ดอยู่ที่ `catalog-color.css` · ความกระชับอยู่ที่ `catalog-compact.css`

   ⚠⚠ **ข้อความบนป้ายมาจากเซิร์ฟเวอร์ ไม่ได้เขียนไว้ใน CSS** · สีอยู่ที่ `badge-color.css` ที่เดียว
     กฎว่าติดป้ายอะไรบ้างอยู่ที่ `Product::flags()` · กฎว่าป้ายไหนขึ้นการ์ดได้อยู่ที่ `Product::cardFlags()` */

/* ป้ายวางทับรูป จึงต้องให้กรอบรูปเป็นจุดอ้างอิง
   ⚠ `overflow:hidden` ของ `.product-card` ตัดส่วนที่ล้นอยู่แล้ว ป้ายจึงไม่โผล่ออกนอกการ์ด */
.product-photo { position: relative; }

.product-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .2px;
  /* ⚠ สีอยู่ที่ `badge-color.css` ที่เดียว (มติ 151) — ป้ายไปโผล่สองหน้าแล้ว
     ไฟล์นี้ตอบแค่เรื่อง "แปะทับรูปยังไง" */
}

/* ป้ายใบที่สองเลื่อนลงมา — เซิร์ฟเวอร์ส่งมามากสุด 2 ใบ (`Product::flags()`)
   ⚠ ใบที่สามไม่มีกฎรองรับ ถ้าวันหนึ่งมันโผล่มา มันจะทับใบที่สอง ซึ่งเป็นอาการที่มองเห็น
     ไม่ใช่อาการที่เงียบ — จงใจไม่เขียนกฎเผื่อไว้ */
.product-badge + .product-badge { top: 32px; }

@media (max-width: 767px) {
  .product-badge { font-size: 10px; padding: 2px 6px; top: 5px; left: 5px; }
  .product-badge + .product-badge { top: 28px; }
}