/*
 * เมนู «สินค้า» แบบกดเปิด — ไฟล์ทับ (มติ 245 · เจ้าของเลือก 26 ก.ย. 2569)
 *
 * ⚠⚠⚠ **ห้ามแก้ `home.css` ซึ่งเป็นของชุดออกแบบ** (มติ 88 · 94)
 *    ไฟล์นี้ต้องโหลด **หลัง** `home.css` เสมอ ทั้งหน้าแรกและหน้าอื่น
 *
 * ⚠⚠ ใช้ `<details>` จึงเปิด/ปิดได้โดยไม่มี JavaScript (หน้าที่เซิร์ฟเวอร์วาดเสร็จไม่โหลดสคริปต์)
 *    ⚠ ผลที่รู้อยู่: กดที่อื่นแล้วเมนูไม่ปิดเอง ต้องกด «สินค้า» อีกครั้ง — ยอมรับเพื่อไม่ต้องมีสคริปต์
 *
 * ⚠ `home.css` ตั้ง `.main-nav a{height:100%;white-space:nowrap}` ไว้ให้ลิงก์แถวเมนู
 *   ลิงก์ในกล่องจึงต้องล้างสองค่านี้ ไม่งั้นชื่อหมวดยาวจะล้นกล่อง
 */
.nav-products{position:relative;display:flex;align-items:center;height:100%}
.nav-products>summary{display:flex;align-items:center;height:100%;cursor:pointer;list-style:none;white-space:nowrap}
.nav-products>summary::-webkit-details-marker{display:none}
.nav-products>summary::after{content:'▾';margin-left:6px;font-size:11px}
.nav-products[open]>summary::after{content:'▴'}
.nav-products>summary:hover,.nav-products[open]>summary{box-shadow:inset 0 -3px var(--yellow)}
.nav-products>summary:focus-visible{outline:0;box-shadow:var(--focus)}

.nav-products-panel{position:absolute;left:0;top:100%;z-index:60;width:min(760px,calc(100vw - 32px));max-height:70vh;overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 18px;align-items:start;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-raised);font-weight:400}
.nav-products-panel a{display:block;height:auto;white-space:normal;padding:6px 8px;border-radius:var(--radius-sm);line-height:1.35}
.nav-products-panel a:hover{box-shadow:none;background:var(--canvas)}
.nav-products-all{grid-column:1/-1;font-weight:700;border-bottom:1px solid var(--line);border-radius:0!important;margin-bottom:4px}
.nav-products-group p{font-size:var(--text-xs);font-weight:700;color:var(--muted);padding:6px 8px 2px}
.nav-products-group ul{list-style:none;margin:0;padding:0}

/* ⚠ จอแคบ: `home.css` จัดเมนูเป็นกริดสองคอลัมน์ — เมนูสินค้ากินเต็มแถว และกล่องไม่ลอย */
@media(max-width:600px){
  .nav-products{grid-column:1/-1;display:block;height:auto}
  .nav-products>summary{min-height:44px;font-size:13px;padding:5px 10px}
  .nav-products-panel{position:static;width:auto;max-height:none;box-shadow:none;grid-template-columns:1fr;padding:6px 8px;margin:0 0 6px}
  .nav-products-panel a{min-height:40px;display:flex;align-items:center}
}