/*
  เมนูหลักบนมือถือ สำหรับหน้าที่เซิร์ฟเวอร์วาดเสร็จแล้ว (เจ้าของเลือก 22 ก.ย. 2569)

  ⚠⚠⚠ **ไฟล์นี้โหลดเฉพาะหน้าที่ `serverRendered` เท่านั้น ห้ามโหลดทั้งเว็บ**
     หน้าที่มีสคริปต์ยังต้องใช้ปุ่มเมนูเหมือนเดิม กางไว้ตลอดจะกินพื้นที่บนจอแคบโดยไม่จำเป็น

  ── ที่มา ──────────────────────────────────────────────────────────────

  `home.css` ที่ `@media(max-width:600px)` เขียนไว้ว่า
      .main-nav    { display:none }          ← เมนูซ่อนอยู่
      .main-nav.open { display:grid }        ← เปิดด้วยคลาส `open`
      .menu-toggle { display:flex }          ← ปุ่มโผล่ให้กด

  **คลาส `open` มีแต่ JavaScript ที่ใส่ให้** (`home.js` · `storefront-shell.js`)
  หน้าที่ไม่โหลดสคริปต์ตามมติ 76/91 จึงได้ปุ่มที่กดแล้วไม่มีอะไรเกิดขึ้น
  และไม่มีทางเปิดเมนูได้เลยบนจอแคบ — ติดต่อ · ห้าหน้ากฎหมาย · ตะกร้า · บัญชี · ตัวช่วยออกแบบ

  ⚠⚠ **กฎข้อนี้หัวเว็บเขียนไว้เองแล้วตอนมติ 92** —
     *"ปุ่มที่กดแล้วไม่ติดแบบเงียบ แย่กว่าไม่มีปุ่ม เพราะคนจะคิดว่าเว็บพัง"*
     มติ 185 เอาไปใช้กับปุ่มค้นหา ตะกร้า บัญชี ขอใบเสนอราคาแล้ว
     **แต่ไม่มีใครเอากฎเดียวกันมาทาบกับปุ่มเมนู** (กับดัก 66 รูปเดิม)

  ── ทางที่เลือก ────────────────────────────────────────────────────────

  **กางเมนูไว้เลย แล้วซ่อนปุ่ม** (เจ้าของเลือก) — ไม่แตะ HTML ไม่เพิ่ม JavaScript
  หน้าตาที่ได้เท่ากับตอนกดปุ่มเปิดเป๊ะ เพราะยืมกฎของ `.main-nav.open` มาทั้งชุด
  ที่นี่เขียนแค่ `display` ตัวเดียว ส่วนสี ระยะ และการจัดคอลัมน์ยังเป็นของ `home.css`

  ⚠⚠ **ห้ามแก้ `home.css`** เป็นไฟล์ของคนออกแบบ · ไฟล์นี้เป็นไฟล์ทับ
     **ต้องโหลดหลัง `home.css` เสมอ** เพราะความเฉพาะเจาะจงเท่ากัน ตัวที่มาทีหลังชนะ
     ⚠ ตรวจแล้ว 22 ก.ย. 2569 ว่า `home.css` เป็นไฟล์เดียวทั้งโฟลเดอร์ที่แตะสองคลาสนี้
*/
@media (max-width: 600px) {
    /*
      ⚠ ต้องเป็น `grid` ไม่ใช่ `block` — `home.css` ตั้ง `grid-template-columns:1fr 1fr`
        ไว้ให้แล้วในกฎเดียวกับที่ซ่อนมัน · ใช้ค่าอื่นแล้วเมนูจะเรียงคนละแบบกับตอนกดเปิด
    */
    .main-nav {
        display: grid;
    }

    /*
      ปุ่มที่กดไม่ได้ต้องหายไป ไม่ใช่แค่จางลง
      ⚠ `display:none` ตัดออกจากสารบบของตัวอ่านหน้าจอด้วย — ปุ่มยังอยู่ใน HTML
        และ `aria-expanded="false"` ของมันก็ยังเขียนว่า "ยังไม่เปิด" ซึ่งสวนกับเมนูที่กางอยู่
        ซ่อนด้วย `visibility` หรือ `opacity` เมื่อไหร่ ตัวอ่านหน้าจอจะประกาศคำที่ขัดกันเอง
    */
    .menu-toggle {
        display: none;
    }

    /*
      ⚠⚠ หัวเว็บบนจอแคบเป็นกริดสามคอลัมน์ `85px 1fr 50px` และช่อง 50px นั้นมีไว้ให้ปุ่มเมนู
         ซ่อนปุ่มอย่างเดียวแล้วช่องนั้นยังกันที่ไว้ → ปุ่มตะกร้า/บัญชีลอยห่างขอบขวา 60px
         **ไม่ใช่การออกแบบใหม่ เป็นการเก็บที่ว่างที่เกิดจากการซ่อนปุ่มในไฟล์นี้เอง**
    */
    .header-main {
        grid-template-columns: 85px 1fr;
    }
}