/* ตะกร้า (cart/show) — โหลดเฉพาะหน้าตะกร้า หลัง product.css
   ★ 2026-10-24 รวมจาก product.css ที่เขียนทับกัน 5 รอบ (2026-10-09 → 2026-10-24) เหลือชุดเดียว · ตัดกฎที่ไม่มีผลแล้ว
     (.cart-summary · .cart-line-actions · .cart-thumb-col · กฎ 600px ที่กฎ 640px ทับหมด · ถังขยะใต้ .cart-qty ที่ไม่มีในหน้าแล้ว)
   ★ ใช้ของกลางจาก product.css ต่อ: .qty-stepper · .rv-edit · .rv-price/.price-total (กล่องสรุปขวา) · .design-preview-wait
   จอคอม = ตาราง 5 คอลัมน์ (สินค้า · รายละเอียด · ราคาต่อชิ้น · จำนวน · รวม) · มือถือ ≤640 = แบบที่เจ้าของวาด 2026-10-24 */

.cart-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--purple-lt, #F1ECFF); color: var(--ink-soft, #4A4658); font-size: .92rem; }
/* TASK-239 — แถบ "งานที่ทำไว้ก่อนเข้าสู่ระบบ" (ปุ่มใช้แทน) · ข้อความตัดบรรทัดได้บนมือถือ ปุ่มไม่ล้นจอ */
.cart-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line, #E6E3EE); border-radius: 10px; font-size: .92rem; }
.cart-empty { text-align: center; }

/* ซ้าย 2 ส่วน = ตารางรายการ แบบ Lalapix/bedankjes · ขวา 1 ส่วน = สรุปรายการ + โค้ดส่วนลด (เจ้าของ 2026-10-09) */
.cart-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.cart-head, .cart-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) 100px 170px 110px; gap: 16px; }
.cart-head { padding: 0 0 10px; border-bottom: 1px solid var(--line, #E4E2EB); color: var(--ink-mute, #7C7889); font-size: .82rem; font-weight: 600; text-transform: uppercase; }
.cart-head span:nth-child(n+3) { text-align: center; }
.cart-head span:last-child { text-align: right; }
.cart-line { align-items: start; padding-top: 16px; }

/* รูปย่อ — ยึดกล่อง 3:4 แล้วย่อรูปให้พอดี (contain) ไม่ตัดขอบ ไม่มุมมนที่รูป (มติ 2026-10-09)
   พื้นเทาแบบหน้าดูตัวอย่าง + เงาตามขอบรูปจริง: drop-shadow ไม่ใช่ box-shadow เพราะรูป contain มีที่ว่างรอบ เงากล่องจะตกที่ว่าง
   (งานพื้นขาวจึงเห็นเป็นแผ่นงานบนโต๊ะ ไม่กลืนเป็นแถบเทา · 2026-10-24) */
.cart-thumb { position: relative; display: grid; place-items: center; width: 120px; aspect-ratio: 3 / 4; border-radius: 8px; background: #EEEDF2; color: var(--ink-soft, #4A4658); text-decoration: none; }
.cart-thumb img {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; border-radius: 0;
  filter: drop-shadow(0 1px 1.5px rgba(20, 16, 31, .16)) drop-shadow(0 6px 12px rgba(20, 16, 31, .10));
}
.cart-thumb-file { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.cart-thumb .design-preview-wait { min-height: 0; height: 100%; padding: 6px; font-size: .75rem; }
.cart-thumb .design-preview-wait.is-badge { bottom: 4px; padding: 2px 6px; font-size: .65rem; }

.cart-info h2 { margin: 0 0 4px; font-size: 1.1rem; }
.cart-edit { padding: 6px 12px; border: 1px solid var(--line, #E4E2EB); box-shadow: none; font-size: .82rem; white-space: nowrap; }

/* รายละเอียดย่อบรรทัดเดียว กดกางดูเต็ม (<details> · 2026-10-24) — ตะกร้าหลายรายการไล่ดูง่าย
   เปิด = "กลุ่ม: ค่า" เป็นข้อความต่อกัน ขึ้นบรรทัดใหม่ชิดซ้ายเต็มความกว้าง (ไม่ใช่ flex ที่ทำให้ค่าหดเป็นคอลัมน์แคบ) */
.cart-specs { margin: 2px 0 10px; color: var(--ink-soft, #4A4658); font-size: .9rem; }
.cart-specs summary { display: flex; align-items: center; gap: 4px; min-height: 30px; cursor: pointer; list-style: none; }
.cart-specs summary::-webkit-details-marker { display: none; }
.cart-specs summary:focus-visible { outline: 2px solid var(--sf-violet, #5B18F2); outline-offset: 2px; border-radius: 4px; }
.cart-specs-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-specs-less { display: none; color: var(--sf-violet, #5B18F2); font-weight: 600; }
.cart-specs .icon { flex: none; width: 16px; height: 16px; color: var(--sf-violet, #5B18F2); transform: rotate(90deg); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.cart-specs[open] .cart-specs-sum { display: none; }
.cart-specs[open] .cart-specs-less { display: inline; }
.cart-specs[open] .icon { transform: rotate(-90deg); }
.cart-opts { margin: 2px 0 0; color: var(--ink-soft, #4A4658); font-size: .9rem; }
.cart-opts div { display: block; }
.cart-opts dt, .cart-opts dd { display: inline; }
.cart-opts dt { font-weight: 600; }
.cart-opts dd { margin: 0; }
.cart-kind { margin: 4px 0 0; color: var(--ink-mute, #7C7889); font-size: .85rem; }

.cart-unit { text-align: center; font-weight: 600; }
.cart-qty { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.cart-qty select { padding: 6px 10px; border: 1px solid var(--line, #E4E2EB); border-radius: 8px; font: inherit; }
/* ช่องจำนวนแบบเล็ก "− 1 +" (2026-10-09) — สไตล์ช่องตัวเลขของ .qty-stepper ผูกกับ .qty-row (หน้าเลือกสินค้า) ตะกร้าไม่มี .qty-row จึงต้องตั้งเอง */
.cart-stepper { display: inline-flex; width: auto; max-width: 150px; }
.cart-stepper button { width: 34px; font-size: 18px; }
.cart-stepper input[type=number] {
  flex: none; width: 56px; padding: 7px 4px; border: 0; border-inline: 1.5px solid var(--line); border-radius: 0;
  font: inherit; font-size: 16px; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.cart-price { text-align: right; white-space: nowrap; }
.cart-price b { font-size: 1.1rem; }
.cart-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--sf-violet, #5B18F2); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.cart-link svg { width: 15px; height: 15px; }
.cart-link-del { color: #C0262D; }
.cart-mobile-lbl { display: none; }

/* ขวา: สรุปรายการ + โค้ดส่วนลด (ยังไม่มีระบบ) + ปุ่ม */
.cart-side { position: sticky; top: 110px; }
.cart-eta { margin: 0 0 12px; font-size: .92rem; }
.cart-later { color: var(--ink-mute, #7C7889); }
.cart-coupon { display: flex; gap: 8px; margin-top: 16px; }
.cart-coupon input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line, #E4E2EB); border-radius: 10px; font: inherit; background: #f7f7f9; }
.cart-coupon-title { margin: 16px 0 0; font-size: .9rem; font-weight: 600; color: var(--ink-soft, #4A4658); }
.cart-coupon-title + .cart-coupon { margin-top: 8px; }
.cart-coupon-note { margin: 6px 0 0; font-size: .88rem; color: var(--ink-soft, #4A4658); }
.cart-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cart-actions .btn { width: 100%; justify-content: center; text-align: center; }

/* ★ คอลัมน์ 1fr ไม่หดต่ำกว่าเนื้อหา (min-content) → การ์ดกว้าง 352px ในจอ 320 · minmax(0,1fr) ให้หดตามจอ (2026-10-24) */
@media (max-width: 960px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-side { position: static; }
}

/* มือถือ (แบบที่เจ้าของวาด 2026-10-24): รูปซ้าย · ชื่อ + "− 1 +" ขวาบน · รายละเอียด · แก้ไขแบบ + ถังขยะ · ราคาต่อชิ้น/รวม ชิดขวา
   กล่องลูก (info · qty · price) ใช้ display:contents ให้ของข้างในลงช่อง grid ตามแบบ โดย HTML ยังเรียงตามคอลัมน์จอคอม (ไม่ต้องมี HTML 2 ชุด) */
@media (max-width: 640px) {
  .cart-head { display: none; }
  .cart-card { padding: 14px 12px; }
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas:
      "thumb name  qty"
      "thumb err   err"
      "thumb specs specs"
      "thumb edit  del"
      "thumb unit  unit"
      "thumb price price";
    column-gap: 10px; row-gap: 0; align-items: center; padding-top: 2px;
  }
  .cart-info, .cart-qty, .cart-price { display: contents; }
  .cart-thumb { grid-area: thumb; align-self: start; width: 72px; }
  /* ไม่ใส่ overflow-wrap:anywhere — ตัดคำไทยกลางพยางค์ ("แบ/คด/รอป") · ปล่อยเบราว์เซอร์ตัดตามคำ */
  .cart-info h2 { grid-area: name; margin: 0; font-size: 1rem; line-height: 1.35; }
  .cart-specs { grid-area: specs; margin: 2px 0 0; }
  .cart-edit { grid-area: edit; justify-self: start; margin-top: 4px; }
  #cart-qty-form { grid-area: qty; justify-self: end; }
  .cart-qty .rv-price-error { grid-area: err; margin: 4px 0 0; }
  .cart-price > form { grid-area: del; justify-self: end; margin-top: 4px; }
  .cart-price .cart-link-del { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border-radius: 50%; }
  .cart-price .cart-link-del svg { width: 18px; height: 18px; }
  .cart-unit { grid-area: unit; display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 400; text-align: left; }
  .cart-mobile-lbl { display: inline; color: var(--ink-mute, #7C7889); font-size: .85rem; font-weight: 400; }
  .cart-qty > .cart-mobile-lbl { display: none; }
  .cart-price > .cart-mobile-lbl { grid-area: price; justify-self: start; align-self: baseline; }
  .cart-price > b, .cart-price > .eta { grid-area: price; justify-self: end; align-self: baseline; text-align: right; }
  .cart-price > b { font-size: 1.15rem; }
  .cart-price > .eta { white-space: normal; }   /* ข้อความ "ตัวเลือกเปลี่ยน/ไม่มีราคา" ยาว — เดิมได้ nowrap จาก .cart-price แล้วล้นจอ */
  .cart-price:has(> .eta) > .cart-mobile-lbl { display: none; }
  /* − 1 + แบบเล็ก (แบบ Shopee) ให้ชื่อสินค้ามีที่ข้างๆ · ช่องจำนวนกว้างตามหลักที่พิมพ์ (38px ตายตัวเคยตัดเลข "2000")
     Safari ยังไม่รองรับ field-sizing → 50px พอ 5 หลัก */
  .cart-stepper button { width: 30px; font-size: 16px; }
  .cart-stepper input[type=number] { width: 50px; padding: 5px 6px; font-size: 15px; }
  @supports (field-sizing: content) {
    .cart-stepper input[type=number] { field-sizing: content; width: auto; min-width: 38px; max-width: 72px; }
  }
}
@media (prefers-reduced-motion: reduce) { .cart-specs .icon { transition: none; } }