/* ปุ่ม "เพิ่มในรายการโปรด" ใต้ปุ่มซื้อ (มติ 200 · 23 ก.ย. 2569)
 *
 * ⚠⚠⚠ **ก่อนไฟล์นี้ ปุ่มนี้ไม่มี CSS สักบรรทัดในทั้งเว็บ**
 *    `home.css` รีเซ็ต `button{border:0;background:none}` และ `h1,h2,p{margin:0}`
 *    ปุ่มจึงกลายเป็นข้อความเปล่าที่ไม่มีระยะห่างอะไรเลย
 *    วัดจากหน้าจริง: ขอบล่างปุ่มเพิ่มตะกร้า 956.7 · ขอบบนปุ่มนี้ 956.7 = **ห่างกัน 0.0px**
 *    และปุ่มเพิ่มตะกร้ามีเงา `0 3px 0` ซึ่ง**ไม่กินพื้นที่** → เงาทับตัวอักษรพอดี
 *
 * ⚠⚠ **ไฟล์ทับ — โหลดหลัง `storefront.css` เฉพาะหน้าสินค้า**
 *    ห้ามแก้ `storefront.css` หรือ `tokens.css` ซึ่งเป็นของชุดออกแบบ (มติ 88)
 *    ทุกค่าสีในไฟล์นี้อ้างตัวแปรที่ชุดออกแบบมีอยู่แล้ว ไม่ประกาศสีใหม่สักตัว
 *
 * ⚠ **ตั้งใจให้เป็นของรอง ไม่ใช่ปุ่มใบที่สาม** — ปุ่มหลักสองใบคือซื้อกับขอใบเสนอราคา
 *   ทำให้มันเด่นเท่ากันเมื่อไหร่ ลูกค้าจะต้องอ่านสามทางเลือกก่อนตัดสินใจซื้อหนึ่งครั้ง
 */

/* ⚠ กล่องครอบเป็น `<p>` ทั้งสองเส้นทาง (ปุ่มของคนที่ล็อกอิน · ลิงก์ของคนที่ยังไม่ล็อกอิน)
 *   ระยะห่างจึงอยู่ที่กล่อง ไม่ใช่ที่ตัวปุ่ม — สองเส้นทางจะได้ระยะเท่ากันเสมอ
 *   12px นี้ต้องมากกว่าเงา 3px ของปุ่มเพิ่มตะกร้า ไม่งั้นตัวอักษรชนเงาเหมือนเดิม */
.wishlist-action {
  margin: 12px 0 0;
}

/* ⚠⚠ `min-height: 44px` คือขนาดเป้ากดขั้นต่ำบนมือถือ — ของเดิมสูง 26px ซึ่งพลาดง่าย
 *    และ `inline-flex` ทำให้กล่องกดครอบข้อความพอดี ไม่ลากเต็มบรรทัด
 *
 * ⚠ `gap: 6px` คือระยะระหว่างไอคอนหัวใจกับข้อความ (มติ 201)
 *   ใช้ `gap` ไม่ใช่ `margin` ที่ไอคอน เพราะวันที่ไม่มีไอคอน ระยะจะหายไปเอง
 *   ไม่ใช่เหลือช่องว่างลอยหน้าข้อความโดยไม่มีอะไรอยู่ในนั้น */
.wishlist-action button,
.wishlist-action a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-underline-offset: 3px;
}

/* ⚠⚠⚠ **เส้นใต้อยู่ที่ `<span>` ห้ามย้ายกลับไปที่ตัวปุ่ม** (มติ 201)
 *    ไอคอนเป็นลูกของปุ่ม — ขีดเส้นใต้ที่ปุ่ม เส้นจะลากใต้ไอคอนหัวใจไปด้วย
 *    ซึ่งอ่านว่า «ขีดฆ่าไอคอน» ไม่ได้อ่านว่า «นี่คือลิงก์» */
.wishlist-action button > span,
.wishlist-action a > span {
  text-decoration: underline;
}

/* ⚠⚠ **`flex: none` สำคัญกว่าที่ดู ห้ามถอด**
 *    ข้อความของคนที่ยังไม่ล็อกอิน («เข้าสู่ระบบเพื่อเก็บไว้ในรายการโปรด») ยาวกว่ามาก
 *    บนจอแคบกล่องกดจะถูกบีบ แล้วไอคอนที่ยืดหดได้จะโดนบีบก่อนเพื่อนจนแบนเป็นขีด
 *    **หัวใจที่แบนแล้วยังเป็นรูปอะไรสักอย่างอยู่ จึงไม่มีใครสังเกตว่ามันผิด**
 *
 * ⚠ ขนาดมาจากที่นี่ ไม่ได้มาจากแอตทริบิวต์ใน SVG — เปลี่ยนที่เดียวได้ทั้งสองเส้นทาง */
.wishlist-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ⚠⚠⚠ ปุ่มถูกปิดตอนยังไม่ได้เลือกรหัส (`storefront.js` ตั้ง `disabled` ให้)
 *    **ต้องหน้าตาต่างจากตอนกดได้จริง** ไม่งั้นลูกค้ากดแล้วนึกว่าเว็บพัง
 *    เหตุที่ปิด: ยังไม่รู้ว่าจะถูกใจรหัสไหน ซึ่งเป็นคำตอบที่ถูกกว่าการเดาให้
 *
 * ⚠⚠⚠ **ตัวถอดเส้นใต้ต้องชี้ `> span` ให้ตรงกับที่เส้นใต้อยู่จริง**
 *    ฉบับก่อนมติ 201 เขียน `.wishlist-action button:disabled { text-decoration: none }`
 *    ซึ่งถูกตอนที่เส้นใต้อยู่ที่ปุ่ม · พอย้ายเส้นใต้ไป `<span>` กฎนั้น**เลิกมีผลทันที**
 *    แล้วปุ่มที่กดไม่ได้จะยังขีดเส้นใต้อยู่เหมือนกดได้ — **สีจางลงแต่ยังดูเป็นลิงก์**
 *    เงียบสนิท เพราะทั้งสองกฎยังทำงานถูกของตัวเอง แค่ชี้คนละที่กัน
 *
 * ⚠ สีไม่ต้องย้ายตาม — `color` สืบทอดลงไปทั้ง `<span>` และไอคอน (ซึ่งใช้ `currentColor`)
 *   ต่างจาก `text-decoration` ที่ขีดครอบลูกทุกตัวโดยไม่สนใจการสืบทอด */
.wishlist-action button:disabled {
  color: var(--muted);
  cursor: default;
}

.wishlist-action button:disabled > span {
  text-decoration: none;
}