/* สไตล์เฉพาะหน้า + breakpoint 768 / 1024 (design ข้อ 5.2, 7.3) */
.num { font-variant-numeric: tabular-nums; }
.err { color: var(--c-danger); font-size: var(--fs-sm); }
.ico { font-size: 2rem; line-height: 1.2; }
.alert { display: flex; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-card); }
.alert.warn { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.alert.bad { background: var(--c-danger-bg); color: var(--c-danger); }
.modal { background: var(--c-surface); width: 100%; max-width: 420px; border-radius: var(--radius-sheet); padding: var(--space-5); box-shadow: var(--shadow-sheet); max-height: 92vh; overflow-y: auto; }
.modal .btn-row { margin-top: var(--space-4); }
.xbtn { width: var(--touch-min); height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--c-text); font-size: var(--fs-lg); flex: none; }
.xbtn:active { background: var(--c-surface-alt); }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); min-height: var(--btn-h-primary); font-weight: 600; font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.stepper.sm button { width: 44px; height: 44px; }
.stepper .qty, .stepper.sm .qty { min-width: 36px; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-md); }

/* S01 หน้าขาย */
.sell { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sell-main .page { padding-bottom: 96px; }
.menugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.menucard { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0 0 var(--space-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden; min-height: var(--touch-min); }
.menucard:active { background: var(--c-surface-alt); }
.menucard .img { aspect-ratio: 1 / 1; width: 100%; background: var(--c-surface-alt); overflow: hidden; }
.menucard .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .92); }
.menucard .name { padding: 0 var(--space-3); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.6em; }
.menucard .price { padding: 0 var(--space-3); color: var(--c-primary); font-family: var(--font-head); font-weight: 500; }
.cartbar { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--space-2)); z-index: 25; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sheet); text-decoration: none; font-family: var(--font-head); font-size: var(--fs-md); }
.thumb { width: 56px; height: 56px; border-radius: var(--radius-card); overflow: hidden; flex: none; background: var(--c-surface-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* S02 ขนาด */
.sheet .field { margin-bottom: var(--space-4); }
.sizes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sizebtn { flex: 1 1 120px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid var(--c-line); border-radius: var(--radius-card); background: var(--c-surface); padding: var(--space-2); }
.sizebtn[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-primary); }
.sizebtn strong { font-family: var(--font-head); color: var(--c-primary); }

/* S03 ตะกร้า */
.cartpanel { min-width: 0; }
.cartline { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 4px; }
.sell-cart { display: none; }

/* S07 เลขคิว */
.done { max-width: 520px; }
.queue-no { font-size: var(--fs-queue); line-height: 1.1; font-family: var(--font-head); font-weight: 600; color: var(--c-primary); }

/* S06/S14 QR */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.qr-stamp { font-size: var(--fs-sm); color: var(--c-warning-fg); background: var(--c-warning-bg); border-radius: var(--radius-card); padding: var(--space-1) var(--space-3); text-align: center; }

/* S08 คิว */
.qcols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.qcard { display: block; }
.qno { font-size: var(--fs-xl); color: var(--c-primary); }

/* S09 ประวัติบิล */
.split { display: block; }
.billlist .list-item, .bill-row { cursor: pointer; }
.bill-row.active { border-color: var(--c-primary); background: var(--c-accent-soft); }
.billdetail { min-width: 0; }

/* แท็บเล็ต */
@media (min-width: 768px) {
  .menugrid { grid-template-columns: repeat(3, 1fr); }
  .sell.with-cart { display: grid; grid-template-columns: minmax(0, 1fr) var(--cart-w); align-items: start; flex-direction: row; }
  .sell.with-cart .sell-cart { display: block; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; padding: var(--space-4); background: var(--c-surface); border-left: 1px solid var(--c-line); }
  .sell-main .page { padding-bottom: var(--space-4); }
  .qcols { grid-template-columns: 1fr 1fr; align-items: start; }
  .split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .split-l, .split-r { min-width: 0; }
  .split-r { position: sticky; top: var(--space-4); }
  .toast-wrap { bottom: var(--space-5); }
}
@media (min-width: 1024px) {
  .menugrid { grid-template-columns: repeat(4, 1fr); }
}