@charset "UTF-8";
/* =============================================================
   layout/shop.css — ร้านตู้ลำธารฝั่งผู้ซื้อ (pages/shop_list.php · shop_product.php · shop_order_form.php · app_orders.php · app_order.php)
   โหลดเฉพาะหน้าร้านผ่าน layout_start(['styles' => ['layout/shop.css']]) · ชิ้นส่วน HTML อยู่ layout/shop_ui.php
   อธิบายคลาสใน docs/UI-CLASSES.md ข้อ 9

   กติกาเดียวกับ app-theme.css และ chat.css
   1) mobile-first: กฎฐานเขียนสำหรับจอ 360px (คนซื้อปลาเปิดจากมือถือ) แล้วค่อยขยายด้วย @media (min-width: …) ท้ายไฟล์
   2) สีจากตัวแปร --lt-* ล้วน โหมดมืดสลับที่ :root ของ app-theme.css ไฟล์นี้จึงไม่มี prefers-color-scheme
      (พื้นผสมสีใช้ color-mix กับตัวแปร — เบราว์เซอร์เก่าทิ้งบรรทัดนั้นแล้วเหลือพื้นของบรรทัดก่อนหน้า)
   3) ตัวอักษรเป็น --lt-ink หรือ --lt-muted เสมอ สีสถานะอยู่ที่ขอบ จุด หรือพื้นอ่อน ผ่าน AA ทั้งสองโหมด
   4) ทุกอย่างที่กดได้สูง ≥ 44px · ปุ่มหลัก 48px (--lt-tap)
   5) QR พื้นขาวขอบขาวเสมอแม้โหมดมืด — แอปธนาคารอ่าน QR บนพื้นมืดไม่ออก

   แนว A "หินชนวนกับมอส" (26 ก.ย. 2569 · docs/DESIGN.md ข้อ 11)
   · ราคาสินค้า (การ์ด หน้าสินค้า หน้าสั่งซื้อ) เป็นตัวมีหัว --lt-font-display 600 — ที่เดียวของเว็บที่ตัวเลขใช้ตัวมีหัวได้
     ยอดที่ต้องโอน ยอดรวม เลขคำสั่งซื้อ เป็นตัวเลขที่ต้องพิมพ์/เทียบ จึงเป็น --lt-font-num ตัวหนา tabular-nums
   · การ์ดสินค้าเป็น a.lt-card ยกตัวจากฐานอยู่แล้ว ไฟล์นี้เติมแค่รูปขยายนิดเดียวตอนชี้ (เมาส์เท่านั้น · ปิดเมื่อลดการเคลื่อนไหว)
   · มุมโค้ง --lt-radius / --lt-radius-sm · ขีดสีซ้าย 3px · เวลาทรานซิชัน --lt-dur ตามฐาน ไม่มีกระจกฝ้า
   ============================================================= */

/* ── หัวหน้ารายการ ─────────────────────────────────────── */

.lt-shop-head { gap: 8px; }
.lt-shop-head .lt-page__lead { margin-bottom: 4px; }
.lt-shop-head .lt-shop-contact { align-self: flex-start; }

.lt-shop-contact svg { flex: none; }

/* แถวปุ่มท้ายหน้า: ติดต่อร้าน · กลับ */
.lt-shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}

/* ── ป้าย ──────────────────────────────────────────────── */

.lt-shop-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.lt-shop-badges:empty { display: none; }

.lt-shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: .875rem;   /* 14px อย่างน้อย — ป้ายสัตว์มีชีวิตและเหลือน้อยคือข้อมูลที่ต้องอ่านทัน (รีวิวหน้าจอ 14 ก.ย. 2569) */
  font-weight: 500;     /* แนว A: ป้ายน้ำหนัก 500 เท่า .lt-pill ของฐาน — จุดสีกับขอบบอกสถานะอยู่แล้ว */
  line-height: 1.6;
  white-space: nowrap;
}
.lt-shop-badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lt-shop-badge-color, var(--lt-border-strong));
}
.lt-shop-badge--live { --lt-shop-badge-color: var(--lt-accent); border-color: var(--lt-accent); }
.lt-shop-badge--low  { --lt-shop-badge-color: var(--lt-warn);   border-color: var(--lt-warn); }
.lt-shop-badge--out  { --lt-shop-badge-color: var(--lt-danger); border-color: var(--lt-danger); }

.lt-shop-count {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lt-surface-2);
  color: var(--lt-muted);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* ── กริดสินค้า /shop ───────────────────────────────────── */

/* สองคอลัมน์ตั้งแต่จอ 360px — การ์ดแคบแต่รูปจัตุรัสยังเห็นปลาชัด ชื่อตัดสองบรรทัด */
.lt-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-shop-grid__item { margin: 0; }
.lt-shop-grid__item .lt-card { margin-top: 0; }

.lt-shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--lt-ink);
  text-decoration: none;
  /* ยกตัว เงา ขอบตอนชี้มาจาก a.lt-card ของฐาน (ส่วน 2) — ที่นี่แค่ให้เวลาเดียวกับฐานเผื่อใช้กับแท็กอื่น */
  transition: transform var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
.lt-shop-card:hover { color: var(--lt-ink); border-color: var(--lt-border-strong); }
.lt-shop-card:focus-visible { outline: none; box-shadow: var(--lt-ring); }
/* สินค้าหมดยังกดดูได้ แต่รูปจางลงให้เห็นทันทีว่าซื้อไม่ได้ (ป้าย "สินค้าหมด" บอกเป็นคำด้วย) */
.lt-shop-card.is-out .lt-shop-card__img { opacity: .55; filter: grayscale(.6); }
/* รูปขยายนิดเดียวในกรอบตอนชี้ด้วยเมาส์ (กรอบ overflow: hidden ตัดขอบไว้) — จอสัมผัสไม่มี hover แท้ รูปจะค้างขยาย
   ลดการเคลื่อนไหว: ไม่ขยายเลย (ฐานตัดแค่เวลาทรานซิชัน ขนาดที่ขยายยังค้างอยู่ จึงต้องปิดที่นี่) */
@media (hover: hover) and (pointer: fine) {
  .lt-shop-card:hover .lt-shop-card__img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-shop-card:hover .lt-shop-card__img { transform: none; }
}

.lt-shop-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-shop-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lt-dur) var(--lt-ease), opacity var(--lt-dur) var(--lt-ease);
}
.lt-shop-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--lt-primary);
  opacity: .8;
}
/* ป้ายบนรูป: พื้นการ์ดทึบ + เงาบาง แยกจากรูปถ่ายทุกโทน (ไม่ใช้กระจกฝ้าตามกติกาของเจ้าของ) */
.lt-shop-card__media .lt-shop-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--lt-shadow-sm);
}

.lt-shop-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 16px;
}
/* ชื่อสินค้าน้ำหนัก 500 ให้ราคาตัวมีหัวเป็นจุดเด่นของการ์ด */
.lt-shop-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* ราคาในร้าน = ตัวมีหัว (Noto Serif Thai 600 · โหลดแค่ 500/600 ห้าม 700) */
.lt-shop-card__price {
  font-family: var(--lt-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ── หน้าสินค้า /shop/{id} ───────────────────────────────── */

.lt-shop-product {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lt-shop-product__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.lt-shop-product__info > .lt-note { margin: 0; }
.lt-shop-product__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ลิงก์หมวดเหนือชื่อสินค้าเป็นชิปสูง 44px (เดิมข้อความเล็ก 22×17px กดยาก · ตรวจทานหน้าจอรอบสุดท้าย) */
.lt-shop-product__cat { margin: 0; }
.lt-shop-product__cat .lt-chip { font-size: .875rem; }
.lt-shop-product__title { margin: 0; }

.lt-shop-price {
  margin: 0;
  font-family: var(--lt-font-display);   /* ราคาในร้าน = ตัวมีหัว */
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* รูปสินค้า: เลื่อนแนวนอนด้วยนิ้ว (scroll-snap) ไม่มีสคริปต์ · รูปถัดไปโผล่ขอบให้รู้ว่ามีอีก
   ขอบซ้ายขวาชนขอบจอบนมือถือ (ยกเลิก padding ของ .lt-wrap ด้วย margin ติดลบ) */
.lt-shop-gallery {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lt-shop-gallery__item {
  flex: 0 0 88%;
  margin: 0;
  scroll-snap-align: start;
}
.lt-shop-gallery__item:only-child { flex-basis: 100%; }
.lt-shop-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  object-fit: cover;
}
.lt-shop-gallery--empty {
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  margin: 0;
  border: 1px dashed var(--lt-border-strong);
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  color: var(--lt-primary);
}
.lt-shop-gallery__hint { margin: 6px 0 0; }

/* กล่องปุ่มสั่งซื้อ — ต่อจากราคาทันที (คำเตือนปลามีชีวิตอยู่ใต้กล่อง) รูป 4:3 บนมือถือ ปุ่มจึงอยู่ในจอแรกของ 375×812 */
.lt-shop-buy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.lt-shop-buy__form { display: flex; flex-direction: column; gap: 12px; }
.lt-shop-buy__form .lt-field { margin: 0; }
.lt-shop-buy__note { margin: 0; line-height: 1.7; }
.lt-shop-buy__pay { margin: 0; }

.lt-shop-qty {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 220px;
}
.lt-shop-qty__btn {
  flex: none;
  width: var(--lt-tap);
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}
.lt-shop-qty__input { text-align: center; font-variant-numeric: tabular-nums; }

.lt-shop-block { margin: 0; }
.lt-section + .lt-shop-block,
.lt-shop-block + .lt-shop-block { margin-top: 8px; }

.lt-shop-methods {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  list-style: none;
}
.lt-shop-methods__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 12px 14px;
  line-height: 1.6;
}
.lt-shop-methods__item + .lt-shop-methods__item { border-top: 1px solid var(--lt-border); }
.lt-shop-methods__name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lt-shop-methods__fee { color: var(--lt-muted); font-variant-numeric: tabular-nums; }

.lt-shop-policy { margin: 0; }

/* ── หน้าสั่งซื้อ /shop/{id}/order ───────────────────────── */

.lt-shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.lt-shop-item__img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--lt-radius-sm);
  object-fit: cover;
  background: var(--lt-surface-2);
}
.lt-shop-item__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.lt-shop-item__title { margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.lt-shop-item__title a { color: var(--lt-ink); }
.lt-shop-item__price { margin: 0; font-family: var(--lt-font-display); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }   /* ราคาต่อชิ้น = ตัวมีหัว */

.lt-shop-checkout { display: flex; flex-direction: column; }
.lt-shop-checkout > .lt-field { margin-bottom: 20px; }
.lt-shop-checkout__pickup { margin: 0 0 12px; }

.lt-shop-method small { font-variant-numeric: tabular-nums; }

/* เลือกวิธีนัดรับแล้วซ่อนช่องที่อยู่ (ช่องไม่บังคับสำหรับนัดรับ เซิร์ฟเวอร์ไม่อ่านค่า)
   เบราว์เซอร์ที่ไม่รู้จัก :has() เห็นช่องที่อยู่ตลอด — กรอกหรือไม่กรอกก็สั่งนัดรับได้ */
.lt-shop-checkout:has(input[data-pickup]:checked) .lt-shop-address { display: none; }

.lt-shop-policybox {
  margin: 0 0 20px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-shop-policybox > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.lt-shop-policybox > summary:focus-visible { outline: none; box-shadow: var(--lt-ring); border-radius: var(--lt-radius); }
.lt-shop-policybox > .lt-shop-policy { padding: 0 14px 14px; }

.lt-shop-ack {
  margin: 0 0 20px;
  padding: 4px 12px;
  border: 1px solid var(--lt-warn);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  background: color-mix(in srgb, var(--lt-warn) 7%, var(--lt-surface));
}
.lt-shop-ack .lt-check { line-height: 1.6; }
.lt-shop-ack .lt-error { margin: 0 0 8px; }

.lt-shop-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lt-shop-summary > p { margin: 0; }
.lt-shop-summary__total {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.lt-shop-summary .lt-btn { margin-top: 6px; }

/* ── คำสั่งซื้อของฉัน /app/orders ───────────────────────── */

.lt-shop-orders {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.lt-shop-orderrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.lt-shop-orders > .lt-card + .lt-card { margin-top: 0; }
.lt-shop-orderrow__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--lt-ink);
  text-decoration: none;
}
.lt-shop-orderrow__link:hover { color: var(--lt-ink); }
.lt-shop-orderrow__link:focus-visible { outline: none; box-shadow: var(--lt-ring); border-radius: 8px; }
.lt-shop-orderrow__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.lt-shop-orderrow__code { font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lt-shop-orderrow__title { line-height: 1.6; overflow-wrap: anywhere; }
.lt-shop-orderrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  color: var(--lt-muted);
  font-size: .875rem;
}
.lt-shop-orderrow__amount { color: var(--lt-ink); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-shop-orderrow__pay { align-self: flex-start; }

/* ป้ายสถานะคำสั่งซื้อ: จุดสีบนป้าย lt-pill (ตัวอักษร ink) */
.lt-shop-status--awaiting_payment { --lt-pill-color: var(--lt-warn);          border-color: var(--lt-warn); }
.lt-shop-status--verifying        { --lt-pill-color: var(--lt-accent);        border-color: var(--lt-accent); }
.lt-shop-status--paid             { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }
.lt-shop-status--shipped          { --lt-pill-color: var(--lt-primary);       border-color: var(--lt-primary); }
.lt-shop-status--completed        { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }
.lt-shop-status--cancelled        { --lt-pill-color: var(--lt-border-strong); border-color: var(--lt-border-strong); }
.lt-shop-status--expired          { --lt-pill-color: var(--lt-border-strong); border-color: var(--lt-border-strong); }
.lt-shop-refund { border-color: var(--lt-danger); }

/* ป้ายของร้าน 14px ทั้งหน้าผู้ซื้อและหลังบ้าน (lt-pill ฐาน 13px · รีวิวหน้าจอ S40 และตรวจซ้ำ 14 ก.ย. 2569)
   lt-shop-status = ป้ายสถานะ (shop_ui_status_pill) · lt-shop-slips__pill = ป้ายสลิปแต่ละใบ · lt-shop-refund = ป้ายคืนเงินในรายการของผู้ซื้อ
   lt-shop-tag = ป้ายอื่นในหน้าคำสั่งซื้อหลังบ้าน (สลิปช้า สลิปซ้ำ ยอดซ้ำ รอคืนเงิน ค้างนาน) ให้สูงเท่าป้ายสถานะในแถวเดียวกัน
   ห้ามใส่ gap ให้ .lt-shop-status — ป้ายใช้ gap 6px ของ lt-pill (กล่อง #status ของหน้าผู้ซื้อใช้ .lt-shop-statusbox) */
.lt-shop-status,
.lt-shop-slips__pill,
.lt-shop-refund,
.lt-shop-tag { font-size: .875rem; }

/* รายการคำสั่งซื้อหลังบ้าน: กริดสองคอลัมน์มี gap แล้ว — ล้าง .lt-card + .lt-card { margin-top: 12px } ของ app-theme.css
   ไม่งั้นการ์ดใบแรกของคอลัมน์ขวาต่ำกว่าคอลัมน์ซ้าย 12px และทุกแถวถัดไปห่างเกิน (S40) */
.lt-shop-ordergrid > .lt-card + .lt-card { margin-top: 0; }

/* ── หน้าคำสั่งซื้อ /app/orders/{id} ─────────────────────── */

.lt-shop-order { display: flex; flex-direction: column; gap: 20px; }
.lt-shop-order > .lt-note { margin: 0; }
.lt-shop-order__head { margin-bottom: 0; }
.lt-shop-order__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: .9375rem;
}

/* ลิงก์ #status #pay #slip #messages จาก flash หลังส่งฟอร์ม ไม่ให้หัวข้อจมใต้แถบบน — ย้ายไปเป็น scroll-padding-top ของ html
   ในส่วน 1 ของ app-theme.css แล้ว (ใช้ทั้งเว็บ รวมการเลื่อนตามโฟกัสของแป้นพิมพ์) · ถ้าคง scroll-margin ไว้ด้วย ระยะจะบวกกันเป็นสองเท่า */

/* กล่อง #status (ขั้นต่อไป · สลิปที่ส่ง · ขนส่ง) — ชื่อต่างจากป้ายสถานะ lt-shop-status โดยตั้งใจ */
.lt-shop-statusbox { gap: 12px; }
.lt-shop-next { margin: 0; }
.lt-shop-next__reject { font-weight: 600; }

.lt-shop-current,
.lt-shop-shipped {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-shop-current > p,
.lt-shop-shipped > p,
.lt-shop-shipped > form { margin: 0; }
.lt-shop-current__text { font-weight: 600; line-height: 1.7; }
.lt-shop-current__link { align-self: flex-start; }
.lt-shop-current__img {
  display: block;
  width: 160px;
  height: auto;
  max-height: 240px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  object-fit: contain;
  background: var(--lt-surface-2);
}

.lt-shop-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* กล่องชำระเงิน: ยอด → เวลา → QR → เลขพร้อมเพย์และชื่อบัญชี → คำเตือน */
.lt-shop-pay {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-color: var(--lt-primary);
  border-width: 2px;
}
.lt-shop-pay > p { margin: 0; }

.lt-shop-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 12px;
}
.lt-shop-amount__label { flex: 1 0 100%; margin: 0; color: var(--lt-muted); font-size: .9375rem; }
.lt-shop-amount__baht { white-space: nowrap; }
/* ยอดที่ต้องโอน = ตัวเลขที่ผู้ซื้อต้องพิมพ์ตามทุกสตางค์ จึงเป็นตัวธรรมดา ไม่ใช่ตัวมีหัวของราคา */
.lt-shop-amount__value {
  margin: 0;
  font-family: var(--lt-font-num);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* เศษสตางค์ที่ใช้จับคู่ยอด — ขีดเส้นใต้หนาและพื้นอ่อน ไม่ใช่สีตัวอักษรอย่างเดียว
   inline-block + line-height ของตัวเอง: <mark> แบบ inline สูงตาม content area ของฟอนต์ ไม่ใช่ตามบรรทัด —
   IBM Plex Sans Thai ที่ 40px ได้กล่อง 70px ในบรรทัด 46px ขีดทองเหลืองลงไปทับแถว "ค่าสินค้า ฿1,790" ในหลังบ้าน 14px
   (ink บนขีดเหลือ 3.04:1 · มืด 1.36 — รอบตรวจอิสระ 26 ก.ย. 2569) · ตอนนี้กล่องสูงเท่าบรรทัดและดันแถวถัดไปลงเอง */
.lt-shop-amount__satang {
  display: inline-block;
  line-height: 1.15;
  padding: 0 4px;
  border-bottom: 4px solid var(--lt-warn);
  border-radius: 4px;
  background: var(--lt-surface-2);
  background: color-mix(in srgb, var(--lt-warn) 18%, var(--lt-surface));
  color: var(--lt-ink);
}
.lt-shop-amount .lt-shop-copy { margin-bottom: 6px; }

.lt-shop-deadline { font-weight: 600; line-height: 1.6; }
.lt-shop-deadline__left { color: var(--lt-muted); font-weight: 500; white-space: nowrap; }

.lt-shop-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* พื้นขาวรอบ QR ในทุกโหมด (quiet zone อยู่ในรูปแล้ว กรอบนี้กันขอบการ์ดสีเข้มชนรูป) */
.lt-shop-qr__img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  padding: 6px;
  border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius-sm);
  background: #ffffff;   /* สีดิบที่ตั้งใจ: พื้น QR ต้องขาวจริงทั้งสองโหมด (ข้อ 5 หัวไฟล์) ไม่ใช่สีธีม */
  image-rendering: pixelated;
}
.lt-shop-qr__img--svg svg { display: block; width: 100%; height: auto; }
.lt-shop-qr__save { align-self: center; }
.lt-shop-qr__howto { align-self: stretch; }
.lt-shop-qr__howto-title { margin: 0 0 4px; font-weight: 600; }
/* จอคอมพิวเตอร์ (เมาส์ จอกว้าง): หัวข้อ "สแกนด้วยมือถือ" ขึ้นก่อน ขั้นตอนบันทึกรูปของมือถือเครื่องนี้เป็นทางเลือกรอง */
.lt-shop-qr__desk { display: none; margin: 0; font-weight: 700; text-align: center; }
.lt-shop-qr__howto .lt-list { margin: 0 0 6px; line-height: 1.7; }

.lt-shop-payee {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.lt-shop-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
}
.lt-shop-copyrow__label { flex: 1 0 100%; margin: 0; color: var(--lt-muted); font-size: .875rem; font-weight: 500; }
.lt-shop-copyrow__value {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  user-select: all;     /* คัดลอกไม่ได้ (เบราว์เซอร์ในแอป LINE ไม่ให้ใช้คลิปบอร์ด) กดครั้งเดียวเลือกทั้งเลข */
  -webkit-user-select: all;
}
.lt-shop-copyrow__action { margin: 0; }
/* คำเตือนชื่อบัญชีเป็น <div class="lt-note"> ที่มี <p> ลูกตัวเดียว — .lt-note เป็น flex แนวตั้ง ข้อความกับ span ที่วางตรงในกล่องแตกเป็นสามบรรทัด */
.lt-shop-payee__warn { font-weight: 600; }
.lt-shop-payee__warn > p { display: block; }
.lt-shop-exact { line-height: 1.7; }

.lt-shop-slipform { display: flex; flex-direction: column; gap: 4px; }
.lt-shop-slipform > .lt-section__title { margin-bottom: 8px; }
.lt-shop-slipform .lt-btn { margin-top: 8px; }
/* ช่องแนบสลิป: ระยะในและปุ่มเลือกไฟล์มาจากกฎกลาง .lt-input[type="file"] ในส่วน 2 ของ app-theme.css แล้ว
   (รอบแก้ผลตรวจ 26 ก.ย. 2569 — ปุ่มมอสอ่อนแทนปุ่มเทาของเบราว์เซอร์ · padding 8px เดิมแพ้กฎกลางอยู่แล้ว)
   คงคลาสไว้เป็นจุดเกาะของช่องนี้ (tests/test_css_classes.php ต้องการนิยาม) */
.lt-shop-slipform__file { width: 100%; }

.lt-shop-slips {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-shop-slips__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
  margin: 0;
  padding: 6px 0;
  line-height: 1.6;
}
.lt-shop-slips__item + .lt-shop-slips__item { border-top: 1px solid var(--lt-border); }
.lt-shop-slips__pill { flex: none; }
.lt-shop-slips__when { color: var(--lt-muted); font-size: .875rem; }
.lt-shop-slips__note { flex: 1 0 100%; font-size: .9375rem; }
.lt-shop-slips__view { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: auto; }
/* ป้ายสลิป (shop_ui_slip_pill) — หน้าผู้ซื้อและหลังบ้านสีเดียวกันพร้อมจุด · รอตรวจ = ฟ้าแบบสถานะ "รอตรวจยอด" */
.lt-shop-slips__pill--pending   { --lt-pill-color: var(--lt-accent);        border-color: var(--lt-accent); }
.lt-shop-slips__pill--accepted  { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }
.lt-shop-slips__pill--rejected  { --lt-pill-color: var(--lt-danger);        border-color: var(--lt-danger); }
.lt-shop-slips__pill--withdrawn { --lt-pill-color: var(--lt-border-strong); border-color: var(--lt-border-strong); }

/* เส้นเวลา: จุดบนเส้นแนวตั้ง · เสร็จ = จุดมอสทึบมีวงในสีการ์ด · ตอนนี้ = วงหนาหินชนวน + ป้าย "ตอนนี้" · หยุด = จุดสีแดงขอบ
   · ยังไม่ถึง = วงกลวงขอบสีขอบช่องกรอก (≥ 3:1) ตัวอักษรสีรอง */
.lt-shop-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-shop-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding-inline-start: 34px;
  color: var(--lt-muted);
}
.lt-shop-steps__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: var(--lt-border);
}
.lt-shop-steps__item:first-child::before { top: 50%; }
.lt-shop-steps__item:last-child::before { bottom: 50%; }
.lt-shop-steps__item:only-child::before { display: none; }
.lt-shop-steps__dot {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  /* วงของขั้นที่ยังไม่ถึง — เดิม border-strong ได้ 1.45:1 (มืด 1.82) คนสายตาเลือนรางแทบไม่เห็นวง (รอบตรวจอิสระ 26 ก.ย. 2569)
     ใช้สีขอบช่องกรอก: 3.4:1 · มืด 4.0:1 */
  border: 2px solid var(--lt-input-border);
  border-radius: 50%;
  background: var(--lt-surface);
}
.lt-shop-steps__label { line-height: 1.5; }
.lt-shop-steps__item.is-done { color: var(--lt-ink); }
.lt-shop-steps__item.is-done::before { background: var(--lt-primary); }
.lt-shop-steps__item.is-done .lt-shop-steps__dot {
  border-color: var(--lt-primary);
  background: var(--lt-primary);
  box-shadow: inset 0 0 0 3px var(--lt-surface);
}
.lt-shop-steps__item.is-current { color: var(--lt-ink); font-weight: 700; }
.lt-shop-steps__item.is-current .lt-shop-steps__dot {
  width: 20px;
  height: 20px;
  left: 2px;
  margin-top: -10px;
  border-width: 5px;
  border-color: var(--lt-accent);
}
.lt-shop-steps__item.is-stopped { color: var(--lt-ink); font-weight: 600; }
.lt-shop-steps__item.is-stopped .lt-shop-steps__dot { border-color: var(--lt-danger); background: var(--lt-surface-2); }
.lt-shop-steps__now {
  padding: 0 8px;
  border: 1px solid var(--lt-accent);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
}

.lt-shop-lines { padding: 12px 14px; }
.lt-shop-lines__items,
.lt-shop-lines__sums {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-shop-lines__sums { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lt-border); }
.lt-shop-lines__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 3px 0;
  line-height: 1.6;
}
.lt-shop-lines__row > * { margin: 0; }
.lt-shop-lines__row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.lt-shop-lines__money { flex: none; font-variant-numeric: tabular-nums; }
.lt-shop-lines__row--total { font-size: 1.0625rem; font-weight: 700; }

.lt-shop-shipto { margin-top: 12px; }
.lt-shop-shipto__line { display: block; }
.lt-shop-print-note { margin: 8px 0 0; }

.lt-shop-cancel { margin: 0; }
.lt-shop-cancel > summary { list-style: none; }
.lt-shop-cancel > summary::-webkit-details-marker { display: none; }
.lt-shop-cancel__toggle { width: 100%; }
.lt-shop-cancel__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  border-color: var(--lt-danger);
}
.lt-shop-cancel__body > p,
.lt-shop-cancel__body > form { margin: 0; }

/* ข้อความในคำสั่งซื้อ: ของร้านชิดซ้ายมีขอบซ้ายสีฟ้า · ของเราชิดขวาพื้น primary-soft (ตำแหน่งกับขอบบอกด้วย ไม่ใช่สีอย่างเดียว) */
.lt-shop-msgs { margin: 0; }
.lt-shop-msgs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-shop-msg {
  max-width: 88%;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
.lt-shop-msg--shop { align-self: flex-start; border-inline-start: 3px solid var(--lt-accent); border-end-start-radius: 4px; }
.lt-shop-msg--mine { align-self: flex-end; background: var(--lt-primary-soft); border-end-end-radius: 4px; }
.lt-shop-msg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 2px;
  font-size: .8125rem;
}
.lt-shop-msg__who { font-weight: 700; }
.lt-shop-msg__when { color: var(--lt-muted); }
.lt-shop-msg__body { margin: 0; }
.lt-shop-msgform { display: flex; flex-direction: column; align-items: flex-start; }
.lt-shop-msgform .lt-field { align-self: stretch; margin-bottom: 8px; }

.lt-shop-copy { flex: none; }

/* ── ตรวจทานหน้าจอรอบสุดท้าย (14 ก.ย. 2569) ─────────────────
   .lt-shop-qr__deskcheck  บรรทัดตรวจชื่อบัญชีและยอดใต้ QR — ขึ้นเฉพาะจอคอมพิวเตอร์ (ขั้นตอนของมือถือซ่อน · ดูบล็อก pointer: fine)
   .lt-shop-digits         เลขพร้อมเพย์และเบอร์ของผู้ซื้อแบ่งกลุ่มด้วยระยะ ไม่มีอักขระคั่น (shop_ui_digits · shop_ui_phone งานค้างรอบ C · คัดลอกได้ตัวเลขติดกัน)
   .lt-shop-paidsame       กล่องส้ม "คำสั่งซื้อที่จ่ายแล้วยอดเท่ากัน" ของหลังบ้าน (การ์ดยอด · ก่อนคำถามเรื่องเงิน · ฟอร์มต้องคืนเงิน)
   .lt-shop-itemscard      การ์ดรายการสินค้าหลังบ้านเป็น container — ตารางเรียงเป็นแถวซ้อนตามความกว้างการ์ด ไม่ใช่ความกว้างจอ
   .lt-shop-dl             dl ในการ์ดแคบของหลังบ้าน: หัวข้อกว้างตามข้อความไม่เกิน 40% ค่าได้ที่ที่เหลือ (เดิมหัวข้อจอง 15rem วันที่และชื่อตัดบรรทัด)
   .lt-shop-orderstats     การ์ดตัวเลขห้าใบของ /admin/orders เรียงเต็มแถว (เดิมสี่ใบแล้วใบที่ห้าอยู่แถวใหม่คนเดียว)
   .lt-shop-orderchips     แถวชิปกรองของ /admin/orders เว้นจากการ์ดตัวเลข */
.lt-shop-qr__deskcheck { display: none; margin: 0; font-weight: 600; text-align: center; }

.lt-shop-digits { white-space: nowrap; }
.lt-shop-digits > span + span { margin-inline-start: .3em; }

.lt-shop-paidsame > p:last-child { font-size: .9375rem; }

.lt-shop-itemscard { container-type: inline-size; }
/* ตารางสี่คอลัมน์ต้องการกรอบในการ์ดราว 520px (ชื่อสินค้า · จำนวน · ราคาต่อหน่วย · ยอดรวม ไม่ตัดบรรทัด) — แคบกว่านั้นเรียงเป็นแถวซ้อน
   กฎเดียวกับ @media (max-width: 639px) ของ .lt-table-stack ใน app-theme.css (เบราว์เซอร์ที่ไม่รู้จัก @container ยังได้แบบจอแคบ) */
@container (max-width: 559px) {
  .lt-shop-itemscard .lt-table-stack { border: 0; overflow-x: visible; }
  .lt-shop-itemscard .lt-table-stack .lt-table thead { display: none; }
  .lt-shop-itemscard .lt-table-stack .lt-table,
  .lt-shop-itemscard .lt-table-stack .lt-table tbody,
  .lt-shop-itemscard .lt-table-stack .lt-table tr,
  .lt-shop-itemscard .lt-table-stack .lt-table td { display: block; width: 100%; }
  .lt-shop-itemscard .lt-table-stack .lt-table tr { padding: 8px 0; border-bottom: 1px solid var(--lt-border); }
  .lt-shop-itemscard .lt-table-stack .lt-table td { padding: 2px 0; border: 0; white-space: normal; }
  .lt-shop-itemscard .lt-table-stack .lt-table td[data-label]:not(:first-child)::before {
    content: attr(data-label) " ";
    color: var(--lt-muted);
    font-size: .875rem;
  }
}

@media (min-width: 768px) {
  .lt-dl.lt-shop-dl { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
}

.lt-statgrid.lt-shop-orderstats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.lt-shop-orderchips { margin-top: 16px; }

/* ── จอกว้าง ────────────────────────────────────────────── */

@media (min-width: 560px) {
  .lt-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lt-shop-gallery { margin: 0; padding: 0; }
  .lt-shop-gallery__item { flex-basis: 70%; }
  .lt-shop-gallery__img { aspect-ratio: 1 / 1; }
  .lt-shop-cancel__toggle { width: auto; }
}

/* จอคอมพิวเตอร์ใช้เมาส์: "สแกนด้วยมือถือ" เหนือ QR · ขั้นตอนกดค้างบันทึกรูปของ "มือถือเครื่องนี้" ซ่อน เหลือบรรทัดตรวจชื่อและยอดใต้ QR */
@media (min-width: 768px) and (pointer: fine) {
  .lt-shop-qr__desk { display: block; }
  .lt-shop-qr__other { display: none; }
  .lt-shop-qr__howto { display: none; }
  .lt-shop-qr__deskcheck { display: block; }
}

@media (min-width: 900px) {
  .lt-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }   /* แนว A: ระยะโปร่งขึ้นบนจอกว้าง */
  /* จอกว้างใช้เมาส์ ปัดไม่ได้ — รูปทั้งหมดเรียงให้เห็นพร้อมกัน (รูปแรกเต็มกว้าง ที่เหลือสองคอลัมน์) ไม่ต้องมีคำว่า "ปัด" */
  .lt-shop-gallery { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
  .lt-shop-gallery__item { flex: 0 0 calc(50% - 4px); }
  .lt-shop-gallery__item:first-child { flex-basis: 100%; }
  .lt-shop-gallery__hint { display: none; }
  .lt-shop-product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  .lt-shop-product__media { position: sticky; top: calc(var(--lt-topbar-h) + 16px); }
  .lt-shop-order { max-width: 720px; }
  .lt-shop-checkout,
  .lt-shop-item { max-width: 640px; }
}

/* ── หน้าคำสั่งซื้อหลังบ้าน /admin/orders/{id} บนมือถือ ─────────
   คอลัมน์เดียว: ยอดเงิน → ผู้ซื้อและที่อยู่ → รายการสินค้า ขึ้นก่อนฟอร์ม (ตรวจสลิป จัดส่ง คืนเงิน ยกเลิก)
   สองคอลัมน์ถูกคลี่เป็นลูกของกริดด้วย display: contents แล้วเรียงด้วย order — จอกว้าง 768px ขึ้นไปเหมือนเดิม
   ตรวจทานภาพหน้าจอ 19 ก.ย. 2569: เดิมคนแพ็กของต้องเลื่อนผ่านสามฟอร์มก่อนเจอที่อยู่ */
@media (max-width: 767px) {
  .lt-shop-ordergrid > .lt-stack { display: contents; }
  .lt-shop-ordergrid > .lt-stack > * { order: 10; margin-top: 0; }
  .lt-shop-ordergrid .lt-shop-ord1 { order: 1; }
  .lt-shop-ordergrid .lt-shop-ord2 { order: 2; }
  .lt-shop-ordergrid .lt-shop-ord3 { order: 3; }
}

/* ── พิมพ์รายการสั่งซื้อ (ไม่ใช่ใบกำกับภาษี) ─────────────── */

@media print {
  .lt-shop-pay,
  .lt-shop-slipform,
  .lt-shop-cancel,
  .lt-shop-msgform,
  .lt-shop-actions,
  .lt-shop-current form,
  .lt-shop-shipped form,
  .lt-shop-copy { display: none !important; }
  .lt-shop-order { max-width: none; }
  .lt-shop-lines,
  .lt-shop-next { box-shadow: none; }
}