/* Compact Catalog — การ์ดเล็กลง เห็นสินค้าได้มากขึ้นในหน้าจอเดิม
   ตาม AIC_Claude_Compact_Catalog_Prompt.md (15 ก.ย. 2569)

   ⚠ ไฟล์นี้เป็น "ตัวทับ" ของ storefront.css เท่านั้น
     โหลดหลัง storefront.css เสมอ และโหลดเฉพาะหน้า Catalog
     (ดู resources/views/components/ui/layout.blade.php)
     ห้ามย้ายไปโหลดทุกหน้า — กฎในนี้ทับ `.product-card` `.shop-main` `.listing-layout`
     ซึ่งหน้า Detail กับ Cart ใช้ร่วมอยู่

   ⚠⚠ ไม่ย่อด้วย zoom / transform / ลดฟอนต์ทั้งหน้า
     ทุกบรรทัดในนี้ลดพื้นที่ที่ไม่ได้พาข้อมูลอะไรไปด้วย — กรอบ เงา ช่องว่าง แถบดำ
     ตัวหนังสือลดจาก 19px เหลือ 14px เฉพาะชื่อรุ่นในการ์ด ซึ่งยังอยู่ในช่วง 14–16px ที่ตกลงกัน

   ⚠ ไม่แตะ storefront.js และไม่แตะราคา/สต็อก/Engine เลยสักบรรทัด
*/

/* ---------- พื้นที่แนวนอน ---------- */
.shop-main { max-width: 1760px; }
.breadcrumbs { padding: 10px 0; }

/* ---------- หัวหมวด: แถบกระชับ ไม่ใช่ Landing Page ---------- */
/* ⚠ min-height เดิม 148px ถูกกำหนดโดยความสูงมาสคอต ไม่ใช่โดยเนื้อหา
   ห้ามตั้ง min-height ใหญ่เพื่อรอรูป — ตัวละครต้องไม่เป็นตัวกำหนดความสูงของหัวหมวด */
.catalog-heading {
  min-height: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  gap: 12px;
}
.catalog-heading img { height: 56px; width: 44px; }
.catalog-heading h1 { font-size: 22px; line-height: 1.35; margin: 0 0 3px; }
.catalog-heading p { font-size: 12.5px; line-height: 1.5; }
/* ป้าย PARTS COMMERCE ซ้ำกับ breadcrumb และ h1 ที่อยู่ติดกัน — ตัดออกทั้งจากตาและจากตัวอ่านหน้าจอ */
.catalog-heading .eyebrow { display: none; }

/* ---------- แถบเครื่องมือเดียว: หัวข้อ + จำนวนผล + การเรียง ---------- */
/* ⚠ `#result-count` ถูกย้ายเข้ามาอยู่ใน `.results-toolbar` ใน Blade แล้ว
   ลำดับใน DOM คือ h2 → select → p · จัดลำดับที่เห็นด้วย `order` ไม่ย้าย DOM ซ้ำ
   เพราะ `role="status"` ของมันต้องอยู่ที่เดิมเพื่อให้ตัวอ่านหน้าจอประกาศผลค้นหา */
.results-toolbar {
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 8px;
}
.results-toolbar h2 { font-size: 18px; order: 1; }
.results-toolbar #result-count { order: 2; margin: 0 auto 0 0; font-size: 12.5px; }
.results-toolbar label { order: 3; font-size: 12.5px; }
.source-note { margin: 10px 0 0; }

/* ---------- ตัวกรอง ---------- */
.listing-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
.filter-panel { padding: 14px; border-radius: 8px; }
.filter-panel h2 { font-size: 16px; margin-bottom: 10px; }
.filter-panel form { gap: 6px; }
.filter-panel label { font-size: 13px; margin-top: 4px; }
.filter-panel select { padding: 7px 10px; min-height: 38px; }
.filter-help { margin-top: 16px; padding-top: 14px; }

/* ---------- ตาราง 6 คอลัมน์ ---------- */
.product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }

.product-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: none;
}
.product-card:hover { border-color: #cfa715; }

/* ⚠ กรอบรูปสูง 116px และใช้ `contain` — ห้าม crop ร่องหรือหน้าตัดทิ้ง
   รูปที่ถูกตัดขอบ ทำให้ลูกค้าเลือกผิดรุ่นได้ ซึ่งแพงกว่าการ์ดที่สูงขึ้นสิบพิกเซล */
.product-photo {
  height: 116px;
  padding: 7px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* ⚠ ของจริงวันนี้ยังไม่มีรูปสักรหัส — ต้องใช้กรอบเดียวกับการ์ดที่มีรูป
   ห้ามสงวนช่องขาวใหญ่กว่านี้ไว้รอ และห้ามซ่อนข้อความทิ้ง
   กรอบเปล่าเฉยๆ อ่านได้ว่า "รูปโหลดไม่ขึ้น" ซึ่งเป็นคนละเรื่องกับ "ยังไม่มีรูป" */
.product-photo .missing-media {
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  margin: 0;
  color: #9aa2ac;
}

.product-card-body { padding: 8px 10px 0; }
.product-code { font-size: 11.5px; letter-spacing: .3px; }
.product-card h3 {
  font-size: 14px;
  line-height: 1.45;
  margin: 3px 0 5px;
}
.product-spec, .product-colors { font-size: 12px; line-height: 1.45; }
/* ⚠⚠ `display:block` ของสองสแปนคือสิ่งที่ทำให้ราคากับฐานราคาอยู่คนละบรรทัด
   **เดิมใช้ `white-space:pre-line` กับ `\n` ในข้อความก้อนเดียว — เลิกแล้ว 15 ก.ย. 2569**
   เพราะ CSS ระบายสีครึ่งข้อความไม่ได้ ต้องเป็น element แยกถึงจะทำสีคนละสีได้ (มติ 88)
   ⚠ เอาสองบรรทัดนี้ออกเมื่อไหร่ สองท่อนจะกลับมาต่อกันเป็นบรรทัดเดียว
   และเส้นคั่นด้านบนจะกลายเป็นเส้นที่คั่นข้อความก้อนเดียวโดยไม่มีเหตุผล */
.product-price {
  font-size: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 5px;
}
.product-price .price-lead,
.product-price .price-basis { display: block; }

/* ---------- ปุ่ม: เลิกแถบดำเต็มความกว้าง ---------- */
/* ⚠ `margin-top:auto` ต้องอยู่ — มันคือสิ่งที่ทำให้ปุ่มของทุกการ์ดในแถวเดียวกันอยู่ระดับเดียวกัน
   ถ้าเปลี่ยนเป็นตัวเลข ปุ่มจะกระโดดตามความยาวชื่อรุ่น ซึ่งเป็นข้อที่ผู้ตรวจชี้ไว้ (VIS-04) */
.product-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: auto -10px 0;
  padding: 7px 10px;
  min-height: 34px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
/* เหลืองใช้กับ hover / focus เท่านั้น ไม่ทำทุกการ์ดเหลืองหรือดำทั้งแถบ */
.product-card:hover .product-open { background: var(--yellow); color: #111; }
.product-card-link:focus-visible .product-open { background: var(--yellow); color: #111; }

/* ---------- จำนวนคอลัมน์ตามความกว้าง ---------- */
@media (max-width: 1439px) {
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .listing-layout { grid-template-columns: 200px minmax(0, 1fr); }
}

/* ⚠ ยุบตัวกรองที่ 1023px ไม่ใช่ 800px เหมือนไฟล์ฐาน
   เพราะที่ 768–1023 การมี Sidebar ทำให้การ์ดแคบกว่าที่อ่านได้
   กฎสี่บรรทัดนี้ซ้ำกับ `@media(max-width:800px)` ใน storefront.css โดยตั้งใจ —
   เป็นการ "เลื่อนจุดตัด" ไม่ใช่การนิยามใหม่ · แก้ที่ไฟล์ฐานเมื่อไหร่ ต้องมาดูที่นี่ด้วย */
@media (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-layout { grid-template-columns: 1fr; gap: 12px; }
  .filter-panel { padding: 0; border: 0; background: transparent; }
  .filter-panel h2 { display: none; }
  .filter-panel form { display: none; }
  .filter-panel.expanded form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    background: white;
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
  }
  .filter-help { display: none; }
  #filter-toggle {
    display: block;
    background: var(--yellow);
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    min-height: 40px;
    font: inherit;
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-main { --page-pad: 14px; }
  .product-photo { height: 112px; padding: 6px; }
  .product-card h3 { font-size: 14px; }
  .product-spec, .product-colors, .product-price { font-size: 11.5px; }
  .product-open { font-size: 12px; min-height: 40px; }
  .catalog-heading h1 { font-size: 20px; }
  .catalog-heading img { height: 48px; width: 38px; }
}

/* ⚠ 320px คือจอที่แคบที่สุดที่ตกลงว่าต้องตรวจ — ยังคงสองคอลัมน์
   ไม่ยุบเหลือคอลัมน์เดียว เพราะเป้าหมายของงานนี้คือเห็นสินค้าได้มากขึ้น */
@media (max-width: 360px) {
  /* ⚠ หกพิกเซลนี้มีเหตุผล — จอ 320 สูง 740 กับการ์ด 329 ทำให้แถวแรกเลยขอบจอไป 3 px
     ผลคือเปิดหน้ามาแล้วไม่เห็นสินค้าเต็มใบสักใบ ซึ่งอ่านว่า "หน้ายังโหลดไม่เสร็จ"
     ที่ลดคือช่องว่างใต้หัวหมวด ไม่ใช่เนื้อหา · วัดแล้วได้ 2 ใบเต็มกลับมา */
  .catalog-heading { margin-bottom: 8px; padding-bottom: 8px; }
  .product-grid { gap: 8px; }
  .product-card-body { padding: 8px 8px 0; }
  .product-open { margin: auto -8px 0; padding: 8px; }
  .product-photo { height: 100px; }
}

/*
 * กล่องกรองสินค้า — ช่องกรองถูกสร้างด้วย JavaScript ลงใน `#filter-fields` (17 ก.ย. 2569)
 *
 * ⚠⚠ กล่องนั้นไม่เคยมีกฎจัดวางเลยตั้งแต่วันที่ตัวกรองกลายเป็นของที่สร้างจากข้อมูล (16 ก.ย.)
 *    กฎเดิมเขียนไว้ที่ `.filter-panel form` ซึ่ง**ไม่ใช่พ่อของช่องกรองอีกต่อไป**
 *    ป้ายกับกล่องเลือกจึงไหลต่อกันเป็นบรรทัดเดียว
 *
 * ⚠ หนึ่งช่องกรอง = หนึ่ง `.filter-field` — กฎอยู่ที่ตัวคู่ ไม่ได้อยู่ที่ตัวลูกแต่ละตัว
 */
#filter-fields { display: grid; gap: 14px; }
.filter-field { display: grid; gap: 6px; min-width: 0; }
.filter-field label { margin: 0; line-height: 1.4; }
.filter-field select { width: 100%; }

/* จอแคบ — วางสองช่องต่อแถว ให้กล่องกรองไม่สูงจนดันรายการสินค้าลงไป */
@media (max-width: 800px) {
  #filter-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
}