/* อุปกรณ์ที่ใช้ร่วมกัน — แยกเป็นกลุ่มตามหมวด (มติ 50 · 15 ก.ย. 2569)

   ⚠ ไฟล์นี้เป็น "ตัวทับ" ของ storefront.css เท่านั้น
     โหลดหลัง storefront.css เสมอ และโหลดเฉพาะหน้าสินค้าเดี่ยว
     (ดู resources/views/components/ui/layout.blade.php)

   ⚠⚠ ไม่แตะ `.accessory-card` `.accessory-rail` ของชุดออกแบบเลยสักกฎเดียว
     ที่เพิ่มคือ "หัวข้อหมวด" กับ "ลิงก์ดูทั้งหมวด" ซึ่งชุดออกแบบไม่มีมาให้
     เพราะเขาร่างไว้เป็นแถวเดียวไม่แบ่งหมวด
*/

.accessory-group + .accessory-group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ⚠ หัวข้อหมวดเป็น h3 อยู่ใต้ h2 "อุปกรณ์ที่ใช้ร่วมกัน" — ลำดับหัวข้อต้องไม่ข้ามชั้น
   ตัวอ่านหน้าจอใช้ลำดับนี้กระโดดอ่าน ไม่ใช่ใช้ขนาดตัวอักษร */
.accessory-group-title {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.accessory-group-title::before {
  content: "";
  width: 3px;
  height: 15px;
  background: var(--yellow);
  border-radius: 2px;
}

/* ---------- จอกว้าง: เห็นครบทั้ง 6 ใบ ไม่ต้องเลื่อน ----------
   ⚠⚠ มติ 50 สั่งว่า "หมวดละ 6" · ชุดออกแบบทำแถวเลื่อนที่พอดี 4 ใบ
      **6 ใบที่ต้องเลื่อนถึงจะเห็นสองใบหลัง ไม่เท่ากับ 6 ใบ** สำหรับคนที่ไม่รู้ว่าเลื่อนได้
   ⚠⚠ **จุดตัดอยู่ที่ 1280 ไม่ใช่ 1024** — วัดจริงแล้วที่ 1024 การ์ดเหลือกว้าง 153 px
      ซึ่งแคบจนชื่อรุ่นอ่านไม่ออก · **แคบเกินจนอ่านไม่ออก แย่กว่าต้องเลื่อน**
      ต่ำกว่านั้นจึงคืนเป็นแถวเลื่อนของชุดออกแบบ ซึ่งเป็นท่าที่ถูกสำหรับจอแคบอยู่แล้ว
      (วัดที่ 1280 ได้ 196 px · ที่ 1440 ได้ 223 px) */
@media (min-width: 1280px) {
  .accessory-group .accessory-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    gap: 12px;
  }
  /* การ์ดแคบลงเหลือ ~6 ใบต่อแถว ตัวหนังสือจึงต้องลดตาม ไม่งั้นชื่อรุ่นตัดบรรทัดจนอ่านยาก */
  .accessory-group .accessory-photo { height: 120px; padding: 10px; }
  .accessory-group .accessory-body { padding: 10px; }
  .accessory-group .accessory-body h3 { font-size: 14px; line-height: 1.4; margin: 6px 0 0; }
  .accessory-group .accessory-price { font-size: 12px; margin: 0 0 10px; }
  .accessory-group .accessory-body .button { font-size: 12.5px; }
}

/* ลิงก์ "ดูทั้งหมวด" — ขึ้นเฉพาะตอนของในหมวดเกินที่โชว์
   ⚠ ต้องอ่านออกว่าเป็นลิงก์โดยไม่ต้องพึ่งสีอย่างเดียว จึงมีขีดเส้นใต้กับลูกศร */
.accessory-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .accessory-group + .accessory-group { margin-top: 18px; padding-top: 14px; }
  .accessory-group-title { font-size: 14px; }
  .accessory-more { font-size: 12.5px; }
}

/* ⚠⚠ เลื่อนได้เมื่อไหร่ **ต้องมีข้อความบอกเสมอ** — ชุดออกแบบโชว์คำใบ้แค่ ≤1100px
   แต่ตอนนี้แถวเลื่อนไปจนถึง 1279px · ช่วง 1101–1279 จะเลื่อนได้โดยไม่มีอะไรบอก
   **หน้าที่ทำงานถูกแต่ดูไม่ออก ผู้ใช้แยกไม่ออกจากหน้าที่พัง** */
@media (max-width: 1279px) {
  .accessory-scroll-hint { display: block; }
}