/* ทางเดินระหว่าง "ชิ้นส่วน" กับ "ชุด" บนหน้าสินค้า (มติ 198)
 *
 * ⚠⚠ **ไฟล์ทับ — โหลดเป็นตัวท้ายๆ ของหน้าสินค้าเท่านั้น**
 *    ห้ามแก้ `storefront.css` หรือ `tokens.css` ซึ่งเป็นของชุดออกแบบ (มติ 88)
 *    ทุกเฉดในไฟล์นี้อ้างตัวแปรที่ชุดออกแบบมีอยู่แล้ว **ไม่ประกาศสีใหม่สักตัว**
 *
 * ⚠ สองก้อนนี้อยู่คนละที่บนหน้าและตอบคนละคำถาม จึงหน้าตาไม่เหมือนกันโดยตั้งใจ
 *   แถบชุด = ของชวนให้เดินต่อ · รายการชิ้นส่วน = ของให้อ่านว่าได้อะไรบ้าง
 */

/* ───────── แถบ "รหัสนี้มีขายเป็นชุดด้วย" — ใต้กล่องเลือกสเปก ───────── */

.kit-strip {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
  background: var(--surface-muted, #f7f8fa);
}

.kit-strip > strong { display: block; }

/* ⚠ คำอธิบายใต้หัวข้อใช้ `.source-note` ของชุดออกแบบอยู่แล้ว ที่นี่แค่เก็บระยะ */
.kit-strip > .source-note { margin: 2px 0 0; }

.kit-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ⚠⚠ **ต้องสูงอย่างน้อย 44px** — เป็นเป้ากดบนมือถือ เท่ากับปุ่มอื่นทั้งหน้า (มติ 94)
   ⚠ `min-width:0` กันชื่อชุดยาวๆ ดันกล่องจนล้นขอบจอ (มติ 168) */
.kit-strip-links > a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 8px;
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
}

.kit-strip-links > a:hover,
.kit-strip-links > a:focus-visible { border-color: var(--ink, #1d2129); }

.kit-strip-links .product-code { flex: none; }

/* ⚠ ชื่อชุดยาวได้ไม่จำกัด — ตัดบรรทัดแทนการดันกล่อง ห้ามใช้ `nowrap` */
.kit-strip-links .kit-name { min-width: 0; overflow-wrap: anywhere; }

.kit-strip-links .kit-go { flex: none; margin-left: auto; }

/* ───────── รายการ "ชิ้นส่วนในชุด" — ท้ายหน้า ───────── */

.kit-items { margin-top: 28px; }

.kit-item-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--line, #e2e5ea);
}

.kit-item-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #e2e5ea);
}

/* ⚠⚠ **ชิ้นที่ซื้อแยกได้เป็น `<a>` ส่วนที่ซื้อแยกไม่ได้เป็น `<span>`**
   สองอันนี้ต้องดูไม่เหมือนกันด้วยตา ไม่ใช่ต่างกันแค่ในโครงหน้า
   ไม่งั้นลูกค้าจะกดอันที่กดไม่ได้แล้วคิดว่าเว็บค้าง */
.kit-item-list .kit-item-name { min-width: 0; overflow-wrap: anywhere; }

.kit-item-list a.kit-item-name { color: inherit; }

/* ⚠ จำนวนต่อชุดถูกดันไปขวาสุดเมื่อมีที่ · จอแคบมันตกลงมาเป็นบรรทัดของตัวเองเอง
   เพราะ `flex-wrap` ข้างบน — **ห้ามตรึงความกว้างเป็น px** */
.kit-item-list .kit-item-qty { margin-left: auto; white-space: nowrap; }