/*
 * ตัวช่วยออกแบบและสั่งตัดโปรไฟล์ — หน้าตาในเปลือกใหม่ (มติ 180 ก้อน 3)
 *
 * ⚠⚠ ค่าทั้งหมดยกมาจาก `shop/layout.blade.php` ของหน้าเก่า **แล้วเสียบตัวแปรของชุดใหม่ทับ
 *    เฉพาะที่มีตัวแปรอยู่จริง** — เขียนเป็น `var(--x, ค่าเดิม)` ทุกจุด
 *    ถ้าตัวแปรมี หน้าจะกลืนไปกับชุดใหม่ · ถ้าไม่มี หน้าจะหน้าตาเท่าเดิมเป๊ะ
 *    **ไม่ได้คิดสีขึ้นมาเอง** เพราะการเดาสีแบรนด์คือการตัดสินใจแทนคนออกแบบ
 *
 * ⚠ `.chip.on` ต้องอ่านออกว่า "เลือกอยู่" แม้ CSS ไม่โหลด — ใน Blade มีเครื่องหมาย ✓ กำกับไว้แล้ว
 *   **ห้ามเอา ✓ ออกแล้วพึ่งสีอย่างเดียว**
 */

.facet { border: 1px solid #ddd; border-radius: var(--radius-sm, 6px); margin: 0 0 12px; padding: 8px 12px 12px; }
.facet legend { font-size: var(--text-xs, 13px); color: #666; padding: 0 4px; }

.chip { display: inline-block; margin: 4px 6px 0 0; padding: 4px 12px; border: 1px solid #ccc;
        border-radius: 999px; text-decoration: none; color: var(--ink, #1a1a1a); font-size: 14px; }
.chip:hover { border-color: #888; }
.chip:focus-visible { outline: var(--focus, 2px solid #1d4ed8); outline-offset: 2px; }
.chip small { color: #888; }
.chip.on { background: var(--yellow, #1d4ed8); border-color: var(--yellow, #1d4ed8);
           color: var(--dark, #fff); font-weight: 600; }
.chip.on small { color: inherit; opacity: .75; }

.found { font-size: 22px; }
.hint  { color: #666; }

.summary { border: 1px solid #ddd; border-radius: var(--radius-sm, 6px); padding: 12px 16px; margin: 16px 0; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 12px; }
.summary dt { color: #666; }
.summary dd { margin: 0; text-align: right; }
.summary .sku { font-weight: 700; }
.summary .price { font-size: 26px; margin: 8px 0 0; }
.summary .price small { font-size: 14px; color: #666; font-weight: 400; }
.summary .pickup { margin: 12px 0 0; }
.summary .pickup small { display: block; color: #666; }

.accessories h3 { margin: 16px 0 4px; font-size: 16px; }
.accessories h3 small { color: #888; font-weight: 400; }
.accessories ul { margin: 0 0 8px; padding-left: 20px; }