/* ════════════════════════════════════════════════════════════════════
   POS Retail · MOBILE (P8)  —  scoped stylesheet
   Source: views/pos/pos-p8.html  <style>
   Every rule scoped under `.pos-retail-mobile`.
   Edge-case decisions (same rules as the desktop sheet):
     • :root / html / body (bare)  → collapsed to `.pos-retail-mobile`
       (CSS vars + base reset now live on the container). `html, body`
       splits into two `.pos-retail-mobile` parts — harmless duplicate.
     • :root inside @media          → also `.pos-retail-mobile`.
     • @media / @keyframes / @font-face preludes untouched; selectors
       inside @media are scoped, keyframe selectors (0%/from/to) are not.
   Do NOT hand-edit — regenerate via tools/regenerate.py if the source changes.
   ════════════════════════════════════════════════════════════════════ */

/* ============================================================
   Fastboy POS — fb-pos design tokens (from rules.md)
   ============================================================ */
.pos-retail-mobile {
  --accent-50:#E6F0FF;--accent-100:#B2D8FF;--accent-200:#86C2FF;--accent-300:#74B9FF;--accent-400:#4580FF;--accent-500:#2E70FF;
  --danger-50:#FFECEC;--danger-100:#FFB0B0;--danger-200:#FE8F8F;--danger-300:#FE5F5F;--danger-400:#FE5F5F;--danger-500:#FE3E3E;
  --success-50:#EAF9EF;--success-100:#A6F3CD;--success-200:#6AEAAA;--success-300:#4CD38F;--success-400:#38C17C;--success-500:#20A567;
  --warning-50:#FFF8ED;--warning-100:#FFE4B4;--warning-200:#FFDEA5;--warning-300:#FFD07E;--warning-400:#FFC259;--warning-500:#FFAF22;
  --neutral-50:#F6F6F6;--neutral-100:#F2F4F5;--neutral-200:#D5D7D9;--neutral-300:#737373;--neutral-400:#474A4E;--neutral-500:#191919;
  --mono-white:#FFFFFF;--mono-black:#000000;

  --content-main:var(--neutral-500);
  --content-sub:var(--neutral-400);
  --content-placeholder:var(--neutral-300);
  --content-disabled:var(--neutral-200);

  --border-modal:var(--neutral-100);
  --border-divider:var(--neutral-200);
  --border-highlight:var(--neutral-400);

  --theme-canvas:var(--neutral-100);
  --theme-surface:var(--mono-white);
  --theme-in-modal:rgba(0,0,0,0.03);
  --theme-modal:var(--neutral-50);
  --theme-disabled:var(--neutral-50);

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;

  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;

  --fs-h1:28px;--fs-h2:22px;--fs-h3:20px;
  --fs-btn-xl:18px;--fs-btn-lg:16px;--fs-btn-md:15px;--fs-btn-sm:14px;
  --fs-body-20:16px;--fs-body-18:15px;--fs-body-16:14px;--fs-body-14:13px;--fs-body-12:12px;

  --shadow-sm:0 1px 2px rgba(25,25,25,0.06);
  --shadow-md:0 4px 12px rgba(25,25,25,0.08);
  --shadow-lg:0 12px 32px rgba(25,25,25,0.12);
}

/* ============================================================
   Layout overflow guards — P8 is 360px wide, ensure no text/element
   breaks the frame. Applied as base-level so component-specific
   rules can still override.
   ============================================================ */
.pos-retail-mobile .ellipsis-1 {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .wrap-break { word-break:break-word; overflow-wrap:anywhere; }

/* ============================================================
   Reset / base
   ============================================================ */
.pos-retail-mobile *,.pos-retail-mobile *::before,.pos-retail-mobile *::after { box-sizing: border-box; }
.pos-retail-mobile, .pos-retail-mobile { margin: 0; padding: 0; }
/* Make sure hidden attribute always wins over class-level display rules */
.pos-retail-mobile [hidden] { display: none !important; }

/* ============================================================
   Touch screen optimization (P8 Dual is touch-only, no mouse)
   ============================================================ */
.pos-retail-mobile button, .pos-retail-mobile a, .pos-retail-mobile [role="button"], .pos-retail-mobile .chip, .pos-retail-mobile .method, .pos-retail-mobile .acc-row, .pos-retail-mobile .cust-row, .pos-retail-mobile .hist-row,
.pos-retail-mobile .item-row, .pos-retail-mobile .inv-row, .pos-retail-mobile .stk-line, .pos-retail-mobile .order-tab, .pos-retail-mobile .doc-row, .pos-retail-mobile .pay-receipt__tile,
.pos-retail-mobile .pay-tip__tile, .pos-retail-mobile .qc-summary, .pos-retail-mobile .toggle, .pos-retail-mobile .perm-row, .pos-retail-mobile .role-chip, .pos-retail-mobile .gc-choice__option,
.pos-retail-mobile .acc-staff-row, .pos-retail-mobile .acc-connect-row, .pos-retail-mobile .mini-cart, .pos-retail-mobile .cart-foot__grand,
.pos-retail-mobile .cust-result, .pos-retail-mobile .stk-form-info__toggle, .pos-retail-mobile .inv-modes__tab, .pos-retail-mobile .form-select,
.pos-retail-mobile .form-locked, .pos-retail-mobile .perm-tabs__btn, .pos-retail-mobile .acc-card .acc-kv-row[onclick],
.pos-retail-mobile .tabs-more, .pos-retail-mobile .order-tab__add, .pos-retail-mobile .order-tab__close, .pos-retail-mobile .pf-head__btn {
  /* Prevent double-tap zoom on critical interactive elements */
  touch-action: manipulation;
  /* No text selection — touch users don't expect this */
  -webkit-user-select: none;
  user-select: none;
  /* No tap highlight color — we provide our own :active states */
  -webkit-tap-highlight-color: transparent;
}

/* Inputs need text selection */
.pos-retail-mobile input, .pos-retail-mobile textarea, .pos-retail-mobile [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-tap-highlight-color: rgba(46,112,255,0.1);
}
.pos-retail-mobile {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:var(--fs-body-16);
  color:var(--content-main);
  background:
    radial-gradient(1200px 800px at 20% 0%, #EEF3FA, transparent),
    radial-gradient(1200px 800px at 80% 100%, #F6F1FF, transparent),
    #F2F4F5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.pos-retail-mobile button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.pos-retail-mobile input, .pos-retail-mobile textarea { font:inherit; color:inherit; }

/* ============================================================
   Showcase shell
   ============================================================ */
.pos-retail-mobile .shell { max-width:1280px; margin:0 auto; padding:var(--s8) var(--s6); }
.pos-retail-mobile .shell__head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s8); flex-wrap:wrap;
}
.pos-retail-mobile .shell__title { font-size:var(--fs-h1); font-weight:600; line-height:1.2; letter-spacing:-0.02em; margin:0; }
.pos-retail-mobile .shell__sub   { font-size:var(--fs-body-16); color:var(--content-sub); margin:var(--s2) 0 0 0; }
.pos-retail-mobile .shell__chip  {
  display:inline-flex; align-items:center; gap:var(--s2);
  height:28px; padding:0 var(--s3); border-radius:var(--r-pill);
  background:var(--accent-500); color:var(--mono-white);
  font-size:var(--fs-body-14); font-weight:600;
}

.pos-retail-mobile .stage {
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.pos-retail-mobile .stage__caption { text-align:center; font-size:var(--fs-body-14); color:var(--content-sub); margin-top:var(--s3); }
.pos-retail-mobile .stage__caption strong { color:var(--content-main); font-weight:600; }

/* ============================================================
   Device frames
   Staff:    720 × 1600 device px → displayed at 0.5x = 360 × 800
   Customer: 536 ×  244 device px → displayed at ~0.9x = 480 × 218
   ============================================================ */
.pos-retail-mobile .device {
  background:#1A1A1F;
  border-radius:32px;
  padding:12px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.06);
  position:sticky; top:var(--s6);
}
.pos-retail-mobile .device--staff    { width:384px; max-width:100%; border-radius:36px; }
.pos-retail-mobile .device--customer { width:504px; max-width:100%; border-radius:20px; padding:10px; }

.pos-retail-mobile .screen {
  position:relative;
  background:var(--theme-canvas);
  border-radius:26px;
  overflow:hidden;
  width:100%;
}
.pos-retail-mobile .screen--staff    { height:800px; }
.pos-retail-mobile .screen--customer { height:218px; border-radius:14px; }

/* Status bar */
.pos-retail-mobile .statusbar {
  height:28px; background:var(--theme-surface);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s4); font-size:var(--fs-body-12); font-weight:600;
  color:var(--content-main); border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .statusbar__icons { display:flex; align-items:center; gap:6px; color:var(--content-sub); }
.pos-retail-mobile .statusbar__dot   { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--success-500); }

/* ============================================================
   App shell
   ============================================================ */
.pos-retail-mobile .app {
  display:flex; flex-direction:column;
  height:calc(100% - 28px);
  background:var(--theme-canvas);
}

.pos-retail-mobile .appbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  gap:var(--s3); flex-shrink:0;
}
.pos-retail-mobile .appbar__title { font-size:var(--fs-h3); font-weight:600; line-height:1.2; margin:0; }
.pos-retail-mobile .appbar__meta  { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .appbar__actions { display:flex; align-items:center; gap:var(--s2); }

/* ============================================================
   Buttons
   ============================================================ */
.pos-retail-mobile .btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s2); height:44px; padding:0 var(--s5);
  border-radius:var(--r-sm);
  font-size:var(--fs-btn-lg); font-weight:600; line-height:1;
  white-space:nowrap;
  transition:background 120ms ease, color 120ms ease, border-color 120ms ease;
  user-select:none;
}
.pos-retail-mobile .btn:active { transform:translateY(1px) scale(0.98); }
.pos-retail-mobile .btn--xl { height:52px; padding:0 var(--s6); font-size:var(--fs-btn-xl); }
.pos-retail-mobile .btn--md { height:40px; padding:0 var(--s4); font-size:var(--fs-btn-md); }
.pos-retail-mobile .btn--sm { height:32px; padding:0 var(--s3); font-size:var(--fs-btn-sm); }

.pos-retail-mobile .btn--filled  { background:var(--accent-500); color:var(--mono-white); }
.pos-retail-mobile .btn--filled:hover { background:var(--accent-400); }
.pos-retail-mobile .btn--tonal   { background:var(--accent-50); color:var(--accent-500); box-shadow:inset 0 0 0 1px var(--accent-500); }
.pos-retail-mobile .btn--outline { background:var(--theme-surface); color:var(--content-main); box-shadow:inset 0 0 0 1.5px var(--content-main); }
.pos-retail-mobile .btn--ghost   { background:transparent; color:var(--content-main); }
.pos-retail-mobile .btn--ghost:hover { background:var(--neutral-100); }
.pos-retail-mobile .btn--danger { background:var(--danger-500); color:var(--mono-white); }
.pos-retail-mobile .btn--danger:hover { background:var(--danger-400); }
.pos-retail-mobile .btn--ghost-danger { background:transparent; color:var(--danger-500); }
.pos-retail-mobile .btn--ghost-danger:hover { background:var(--danger-50); }

.pos-retail-mobile .btn--block { width:100%; }
.pos-retail-mobile .btn[disabled], .pos-retail-mobile .btn.is-disabled {
  background:var(--theme-disabled); color:var(--content-disabled);
  box-shadow:none; cursor:not-allowed;
}

.pos-retail-mobile .btn-icon {
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:var(--theme-surface);
  box-shadow:inset 0 0 0 1px var(--border-divider);
  color:var(--content-main);
}
.pos-retail-mobile .btn-icon:hover  { background:var(--neutral-100); }
.pos-retail-mobile .btn-icon:active { background:var(--neutral-200); transform:scale(0.92); }
.pos-retail-mobile .btn-icon--sm    { width:36px; height:36px; }
.pos-retail-mobile .btn-icon--ghost { background:transparent; box-shadow:none; }
.pos-retail-mobile .btn-icon--ghost:active { background:var(--neutral-100); transform:scale(0.92); }

/* Close button (circular dark) — touch-friendly 36px visual + 44px hit */
.pos-retail-mobile .close-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--neutral-500); color:var(--mono-white);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:0; padding:0;
  cursor:pointer;
  /* Extend tap area to 44px via negative margin trick */
  position:relative;
}
.pos-retail-mobile .close-btn::after {
  content:''; position:absolute;
  inset:-6px;
}
.pos-retail-mobile .close-btn:active { background:var(--neutral-400); transform:scale(0.92); }

/* ============================================================
   Chips / Pills — sized +20% from baseline for better touch
   ============================================================ */
.pos-retail-mobile .chip {
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 var(--s4);
  border-radius:var(--r-pill);
  background:var(--theme-surface); color:var(--content-main);
  box-shadow:inset 0 0 0 1px var(--border-divider);
  font-size:16px; font-weight:500;
  line-height:1;
  white-space:nowrap;
  flex-shrink:0;
  transition:all 120ms ease;
}
.pos-retail-mobile .chip--sm { height:34px; padding:0 var(--s3); font-size:var(--fs-body-16); gap:6px; }
.pos-retail-mobile .chip:hover { background:var(--neutral-100); }
.pos-retail-mobile .chip:active { background:var(--neutral-200); transform:scale(0.97); }
.pos-retail-mobile .chip.is-selected { background:var(--accent-500); color:var(--mono-white); box-shadow:none; }
.pos-retail-mobile .chip.is-selected:active { background:var(--accent-400); }
.pos-retail-mobile .chip.is-tonal    { background:var(--accent-50); color:var(--content-main); box-shadow:none; }
.pos-retail-mobile .chip svg { flex-shrink:0; width:16px; height:16px; }

/* Status badges */
.pos-retail-mobile .badge {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 var(--s3); border-radius:var(--r-pill);
  font-size:var(--fs-body-14); font-weight:600;
}
.pos-retail-mobile .badge--payment { background:var(--success-100); color:var(--success-500); }
.pos-retail-mobile .badge--redeem  { background:var(--warning-100); color:var(--warning-500); }
.pos-retail-mobile .badge--void    { background:var(--danger-100); color:var(--danger-500); }
.pos-retail-mobile .badge--add     { background:var(--accent-100); color:var(--accent-500); }
.pos-retail-mobile .badge--neutral { background:var(--neutral-100); color:var(--content-main); }

/* ============================================================
   Promo combined input — % / $ toggle inline + value + suffix
   ============================================================ */
.pos-retail-mobile .promo-input {
  display:flex; align-items:stretch;
  height:48px;
  background:var(--theme-surface);
  border:1.5px solid var(--border-divider);
  border-radius:var(--r-sm);
  overflow:hidden;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .promo-input:focus-within { border-color:var(--accent-500); }
.pos-retail-mobile .promo-input.is-error { border-color:var(--danger-500); }

.pos-retail-mobile .promo-input__toggle {
  display:flex; align-items:stretch;
  flex-shrink:0;
  background:var(--neutral-50);
  border-right:1px solid var(--border-divider);
}
.pos-retail-mobile .promo-input__toggle-btn {
  width:48px; height:100%;
  background:transparent; border:0; padding:0;
  font-size:18px; font-weight:700;
  color:var(--content-placeholder);
  cursor:pointer;
  transition:background 120ms ease, color 120ms ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.pos-retail-mobile .promo-input__toggle-btn:hover { background:var(--neutral-100); color:var(--content-main); }
.pos-retail-mobile .promo-input__toggle-btn.is-active {
  background:var(--accent-500); color:var(--mono-white);
}
.pos-retail-mobile .promo-input__toggle-btn.is-active:hover { background:var(--accent-400); }
.pos-retail-mobile .promo-input__toggle-btn + .promo-input__toggle-btn { border-left:1px solid var(--border-divider); }
.pos-retail-mobile .promo-input__toggle-btn.is-active + .promo-input__toggle-btn,
.pos-retail-mobile .promo-input__toggle-btn:has(+ .promo-input__toggle-btn.is-active) { border-left-color:transparent; }

.pos-retail-mobile .promo-input__field {
  flex:1; min-width:0;
  height:100%;
  border:0; outline:0;
  padding:0 var(--s3);
  background:transparent;
  font-size:var(--fs-body-18); font-weight:600;
  color:var(--content-main);
}
.pos-retail-mobile .promo-input__field::placeholder { color:var(--content-placeholder); font-weight:500; }
.pos-retail-mobile .promo-input__suffix {
  display:inline-flex; align-items:center;
  padding:0 var(--s3) 0 0;
  color:var(--content-sub);
  font-size:var(--fs-body-14);
  flex-shrink:0;
}

/* ============================================================
   Forms — text field, search
   ============================================================ */
.pos-retail-mobile .field { display:block; }
.pos-retail-mobile .field + .field { margin-top:var(--s3); }
.pos-retail-mobile .field__label {
  display:block; font-size:var(--fs-body-14); font-weight:500;
  color:var(--content-sub); margin-bottom:6px;
}
.pos-retail-mobile .field__shell {
  display:flex; align-items:center; gap:var(--s2);
  height:48px; padding:0 var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  transition:border-color 120ms ease;
}
.pos-retail-mobile .field__shell:focus-within {
  border-color:var(--accent-500); border-width:1.5px;
  padding:0 calc(var(--s3) - 0.5px);
}
.pos-retail-mobile .field__shell.is-error { border-color:var(--danger-500); border-width:1.5px; padding:0 calc(var(--s3) - 0.5px); }
.pos-retail-mobile .field__input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:var(--fs-body-16); color:var(--content-main);
}
.pos-retail-mobile .field__input::placeholder { color:var(--content-placeholder); }
.pos-retail-mobile .field__icon { color:var(--content-sub); flex-shrink:0; display:inline-flex; }
.pos-retail-mobile .field__hint { font-size:var(--fs-body-14); color:var(--content-sub); margin-top:6px; }
.pos-retail-mobile .field__hint.is-error { color:var(--danger-500); }

.pos-retail-mobile .search {
  display:flex; align-items:center; gap:var(--s2);
  height:40px; padding:0 var(--s3);
  background:var(--neutral-100); border-radius:var(--r-sm);
}
.pos-retail-mobile .search input {
  flex:1; background:transparent; border:0; outline:0;
  font-size:var(--fs-body-16); color:var(--content-main);
}
.pos-retail-mobile .search input::placeholder { color:var(--content-placeholder); }

/* Segmented control */
.pos-retail-mobile .segmented {
  display:inline-flex; background:var(--neutral-100);
  padding:4px; border-radius:var(--r-sm); gap:2px;
}
.pos-retail-mobile .segmented__item {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px var(--s3); border-radius:4px;
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--content-sub); background:transparent; flex:1;
}
.pos-retail-mobile .segmented__item.is-active {
  background:var(--theme-surface); color:var(--content-main);
  box-shadow:var(--shadow-sm);
}

/* Toggle */
.pos-retail-mobile .toggle {
  position:relative; display:inline-block;
  width:44px; height:24px; border-radius:var(--r-pill);
  background:var(--neutral-200);
  transition:background 120ms ease;
}
.pos-retail-mobile .toggle.is-on { background:var(--accent-500); }
.pos-retail-mobile .toggle__knob {
  position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--mono-white); box-shadow:var(--shadow-sm);
  transition:left 120ms ease;
}
.pos-retail-mobile .toggle.is-on .toggle__knob { left:22px; }

/* ============================================================
   Tabs (category strip) — scrollable left, sticky "all" button right
   ============================================================ */
.pos-retail-mobile .tabs-wrap {
  display:flex; align-items:center;
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
  position:relative;
}
.pos-retail-mobile .tabs {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s2) var(--s3) var(--s4);
  overflow-x:auto;
  flex:1; min-width:0;
  scrollbar-width:none;
}
.pos-retail-mobile .tabs::-webkit-scrollbar { display:none; }
.pos-retail-mobile .tabs .chip { flex-shrink:0; }

.pos-retail-mobile .tabs-more {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 var(--s3);
  margin:0 var(--s3) 0 0;
  background:var(--accent-50); color:var(--accent-500);
  border:0; border-radius:var(--r-pill);
  font-size:var(--fs-body-14); font-weight:700;
  white-space:nowrap; cursor:pointer;
  position:relative; z-index:1;
  box-shadow:-12px 0 12px -4px var(--theme-surface), -16px 0 16px -8px var(--theme-surface);
  transition:background 120ms ease;
}
.pos-retail-mobile .tabs-more:hover { background:var(--accent-100); }
.pos-retail-mobile .tabs-more svg { flex-shrink:0; }

/* All-categories sheet — grid of category tiles */
.pos-retail-mobile .cat-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s2);
}
.pos-retail-mobile .cat-grid-tile {
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:var(--s2);
  padding:var(--s4);
  background:var(--theme-surface);
  border:1.5px solid var(--border-divider);
  border-radius:var(--r-md);
  cursor:pointer;
  text-align:left;
  transition:all 120ms ease;
}
.pos-retail-mobile .cat-grid-tile:hover {
  border-color:var(--accent-500);
  background:var(--accent-50);
}
.pos-retail-mobile .cat-grid-tile.is-selected {
  border-color:var(--accent-500);
  background:var(--accent-50);
}
.pos-retail-mobile .cat-grid-tile__icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.pos-retail-mobile .cat-grid-tile__body { width:100%; }
.pos-retail-mobile .cat-grid-tile__name {
  font-size:var(--fs-body-16);
  font-weight:700;
  color:var(--content-main);
  margin:0;
}
.pos-retail-mobile .cat-grid-tile.is-selected .cat-grid-tile__name { color:var(--accent-500); }
.pos-retail-mobile .cat-grid-tile__count {
  font-size:var(--fs-body-12);
  color:var(--content-sub);
  margin-top:2px;
}

/* ============================================================
   Categories CELL view — flat rows, no card chrome
   Used by sheetCategoriesAll (Phase 1+)
   ============================================================ */
.pos-retail-mobile .cat-cells {
  display:flex; flex-direction:column;
  background:var(--theme-surface);
  border-radius:var(--r-md);
  overflow:hidden;
}
.pos-retail-mobile .cat-cell {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-modal);
  cursor:pointer;
  text-align:left;
  width:100%;
  transition:background 120ms ease;
  min-height:56px;
}
.pos-retail-mobile .cat-cell:last-child { border-bottom:0; }
.pos-retail-mobile .cat-cell:hover,
.pos-retail-mobile .cat-cell:active { background:var(--neutral-50); }
.pos-retail-mobile .cat-cell.is-selected { background:var(--accent-50); }
.pos-retail-mobile .cat-cell__icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.pos-retail-mobile .cat-cell__body { flex:1; min-width:0; }
.pos-retail-mobile .cat-cell__name {
  font-size:var(--fs-body-16);
  font-weight:600;
  color:var(--content-main);
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .cat-cell.is-selected .cat-cell__name { color:var(--accent-500); }
.pos-retail-mobile .cat-cell__count {
  font-size:var(--fs-body-12);
  color:var(--content-sub);
  margin-top:2px;
}
.pos-retail-mobile .cat-cell__chev {
  color:var(--content-placeholder);
  flex-shrink:0;
}
.pos-retail-mobile .cat-cell.is-selected .cat-cell__chev { color:var(--accent-500); }

/* ============================================================
   Editable account rows (Phase 1 — Business, Connect, Settings, Support)
   ============================================================ */
.pos-retail-mobile .acc-kv-row--editable {
  cursor:pointer;
  transition:background 120ms ease;
}
.pos-retail-mobile .acc-kv-row--editable:active { background:var(--neutral-50); }
.pos-retail-mobile .acc-kv-row__value-wrap {
  display:flex; align-items:center; gap:var(--s2);
  min-width:0;
  flex:1; justify-content:flex-end;
}
.pos-retail-mobile .acc-kv-row__edit-chev {
  color:var(--content-placeholder);
  flex-shrink:0;
}

/* Setting card row with description below label (Square pattern) */
.pos-retail-mobile .set-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--border-modal);
  min-height:56px;
}
.pos-retail-mobile .set-row:last-child { border-bottom:0; }
.pos-retail-mobile .set-row__body { flex:1; min-width:0; }
.pos-retail-mobile .set-row__label {
  font-size:var(--fs-body-16);
  font-weight:600;
  color:var(--content-main);
  margin:0;
}
.pos-retail-mobile .set-row__desc {
  font-size:var(--fs-body-12);
  color:var(--content-sub);
  margin-top:2px;
  line-height:1.4;
}
.pos-retail-mobile .set-row__control { flex-shrink:0; }
.pos-retail-mobile .set-row--clickable { cursor:pointer; transition:background 120ms ease; padding-left:var(--s2); padding-right:var(--s2); margin-left:calc(var(--s2) * -1); margin-right:calc(var(--s2) * -1); border-radius:var(--r-sm); }
.pos-retail-mobile .set-row--clickable:active { background:var(--neutral-50); }
.pos-retail-mobile .set-row--nested {
  padding-left:var(--s5);
  border-left:2px solid var(--accent-100);
  margin-left:var(--s2);
  padding-top:var(--s3);
  padding-bottom:var(--s3);
}

/* Inline toggle switch (re-uses existing toggle if available) */
.pos-retail-mobile .toggle-sw {
  width:44px; height:26px;
  border-radius:var(--r-pill);
  background:var(--neutral-200);
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  border:0;
  padding:0;
  transition:background 200ms ease;
}
.pos-retail-mobile .toggle-sw::after {
  content:'';
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--mono-white);
  box-shadow:var(--shadow-sm);
  transition:transform 200ms ease;
}
.pos-retail-mobile .toggle-sw.is-on { background:var(--accent-500); }
.pos-retail-mobile .toggle-sw.is-on::after { transform:translateX(18px); }

/* Segmented control for Item View Grid/List */
.pos-retail-mobile .seg {
  display:inline-flex;
  background:var(--neutral-100);
  border-radius:var(--r-pill);
  padding:3px;
  gap:2px;
}
.pos-retail-mobile .seg__btn {
  height:28px; padding:0 var(--s3);
  display:inline-flex; align-items:center; gap:6px;
  background:transparent;
  border:0;
  border-radius:var(--r-pill);
  font-size:var(--fs-body-14);
  font-weight:600;
  color:var(--content-sub);
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .seg__btn.is-active {
  background:var(--mono-white);
  color:var(--content-main);
  box-shadow:var(--shadow-sm);
}
.pos-retail-mobile .seg__btn:active { transform:scale(0.96); }

/* Edit field sheet — text input form */
.pos-retail-mobile .edit-field {
  display:flex; flex-direction:column;
  gap:var(--s2);
}
.pos-retail-mobile .edit-field__label {
  font-size:var(--fs-body-12);
  font-weight:600;
  color:var(--content-sub);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.pos-retail-mobile .edit-field__hint {
  font-size:var(--fs-body-12);
  color:var(--content-sub);
  margin-top:4px;
  line-height:1.4;
}

/* ============================================================
   Persistent scan/search bar
   ============================================================ */
.pos-retail-mobile .scan-bar {
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  padding:var(--s2) var(--s4) var(--s3);
  flex-shrink:0;
}
.pos-retail-mobile .scan-bar__field {
  display:flex; align-items:center; gap:var(--s2);
  height:44px; padding:0 var(--s2) 0 var(--s3);
  background:var(--neutral-50);
  border:1.5px solid transparent;
  border-radius:var(--r-sm);
  transition:border-color 120ms ease, background 120ms ease;
}
.pos-retail-mobile .scan-bar__field:focus-within {
  border-color:var(--accent-500);
  background:var(--theme-surface);
}
.pos-retail-mobile .scan-bar__icon {
  color:var(--content-sub);
  display:inline-flex;
  flex-shrink:0;
}
.pos-retail-mobile .scan-bar__field input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:var(--fs-body-16); color:var(--content-main);
}
.pos-retail-mobile .scan-bar__field input::placeholder { color:var(--content-placeholder); }
.pos-retail-mobile .scan-bar__trigger {
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-500); color:var(--mono-white);
  border:0; border-radius:var(--r-sm);
  flex-shrink:0;
  cursor:pointer;
  transition:background 120ms ease;
}
.pos-retail-mobile .scan-bar__trigger:hover { background:var(--accent-400); }

.pos-retail-mobile .scan-bar__feedback {
  margin-top:var(--s2); padding:6px var(--s3);
  font-size:var(--fs-body-12); font-weight:600;
  background:var(--success-50); color:var(--success-500);
  border-radius:var(--r-sm);
  display:flex; align-items:center; gap:var(--s2);
  animation:toast-drop 220ms ease;
}
.pos-retail-mobile .scan-bar__feedback.is-error { background:var(--danger-50); color:var(--danger-500); }

/* ============================================================
   Order tab strip (multi-order) — sticky actions on the right
   ============================================================ */
.pos-retail-mobile .order-tabs {
  display:flex; align-items:center;
  background:var(--theme-canvas);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
  position:relative;
}
.pos-retail-mobile .order-tabs__scroll {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) 0 var(--s2) var(--s3);
  overflow-x:auto;
  flex:1; min-width:0;
  scrollbar-width:none;
}
.pos-retail-mobile .order-tabs__scroll::-webkit-scrollbar { display:none; }
.pos-retail-mobile .order-tabs__actions {
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  padding:var(--s2) var(--s3) var(--s2) var(--s2);
  background:var(--theme-canvas);
  position:relative;
  z-index:1;
  box-shadow:-12px 0 12px -4px var(--theme-canvas), -16px 0 14px -8px var(--theme-canvas);
}
.pos-retail-mobile .order-tab__view-all {
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  color:var(--content-main);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:all 120ms ease;
  position:relative;
}
.pos-retail-mobile .order-tab__view-all:hover {
  background:var(--accent-50);
  border-color:var(--accent-500);
  color:var(--accent-500);
}
.pos-retail-mobile .order-tab__view-all-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px;
  padding:0 4px; border-radius:var(--r-pill);
  background:var(--accent-500); color:var(--mono-white);
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--theme-canvas);
}

.pos-retail-mobile .order-tab {
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 var(--s2) 0 var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-pill);
  font-size:var(--fs-body-16); font-weight:600;
  color:var(--content-sub);
  flex-shrink:0;
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .order-tab:hover { background:var(--neutral-50); border-color:var(--neutral-300); }
.pos-retail-mobile .order-tab.is-active {
  background:var(--accent-50);
  border-color:var(--accent-500);
  color:var(--accent-500);
}
.pos-retail-mobile .order-tab__count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--neutral-200);
  color:var(--content-main);
  font-size:11px; font-weight:700;
}
.pos-retail-mobile .order-tab.is-active .order-tab__count {
  background:var(--accent-500); color:var(--mono-white);
}
.pos-retail-mobile .order-tab__close {
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--content-placeholder);
  transition:background 120ms ease, color 120ms ease;
  padding:5px;
  margin:-5px -5px -5px 0;
}
.pos-retail-mobile .order-tab__close:hover { background:var(--neutral-100); color:var(--content-main); }
.pos-retail-mobile .order-tab.is-active .order-tab__close:hover { background:rgba(46,112,255,0.15); color:var(--accent-500); }

.pos-retail-mobile .order-tab__add {
  flex-shrink:0;
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--theme-surface);
  border:1px dashed var(--border-divider);
  color:var(--content-sub);
  border-radius:var(--r-pill);
  transition:all 120ms ease;
}
.pos-retail-mobile .order-tab__add:hover { background:var(--accent-50); color:var(--accent-500); border-color:var(--accent-500); border-style:solid; }

/* All-orders sheet grid (restaurant-table-style overview) */
.pos-retail-mobile .ao-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s2);
  margin-bottom:var(--s4);
  max-height:380px;
  overflow-y:auto;
}
.pos-retail-mobile .ao-card {
  display:block;
  background:var(--theme-surface);
  border:1.5px solid var(--border-divider);
  border-radius:var(--r-md);
  padding:var(--s3);
  cursor:pointer;
  position:relative;
  text-align:left;
  width:100%;
  transition:all 120ms ease;
  overflow:hidden;
}
.pos-retail-mobile .ao-card:hover { border-color:var(--accent-300); background:var(--neutral-50); }
.pos-retail-mobile .ao-card.is-active {
  border-color:var(--accent-500);
  background:var(--accent-50);
}
.pos-retail-mobile .ao-card.is-empty { opacity:0.7; }
.pos-retail-mobile .ao-card__head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--s2);
}
.pos-retail-mobile .ao-card__label {
  font-size:var(--fs-body-16); font-weight:700;
  color:var(--content-main);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:75%;
}
.pos-retail-mobile .ao-card.is-active .ao-card__label { color:var(--accent-500); }
.pos-retail-mobile .ao-card__time {
  font-size:10px; color:var(--content-sub);
  font-weight:600;
  flex-shrink:0;
}
.pos-retail-mobile .ao-card__customer {
  font-size:var(--fs-body-12); color:var(--content-main);
  margin-bottom:var(--s2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:4px;
}
.pos-retail-mobile .ao-card__customer.is-empty { color:var(--content-placeholder); }
.pos-retail-mobile .ao-card__footer {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s2);
}
.pos-retail-mobile .ao-card__items {
  font-size:11px; color:var(--content-sub);
  white-space:nowrap;
}
.pos-retail-mobile .ao-card__total {
  font-size:var(--fs-body-16); font-weight:700;
  letter-spacing:-0.01em;
  color:var(--content-main);
}
.pos-retail-mobile .ao-card__status-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:3px;
  background:var(--neutral-200);
}
.pos-retail-mobile .ao-card__status-bar--ready { background:var(--success-500); }
.pos-retail-mobile .ao-card__status-bar--inprogress { background:var(--warning-500); }
.pos-retail-mobile .ao-card__rename, .pos-retail-mobile .ao-card__close-btn {
  position:absolute;
  width:24px; height:24px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:1px solid var(--border-divider);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--content-sub);
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .ao-card__rename { top:6px; right:32px; }
.pos-retail-mobile .ao-card__close-btn { top:6px; right:6px; }
.pos-retail-mobile .ao-card__rename:hover { background:var(--accent-50); color:var(--accent-500); border-color:var(--accent-500); }
.pos-retail-mobile .ao-card__close-btn:hover { background:var(--danger-50); color:var(--danger-500); border-color:var(--danger-500); }

.pos-retail-mobile .ao-add-card {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--s2);
  min-height:104px;
  background:var(--accent-50);
  border:1.5px dashed var(--accent-300);
  border-radius:var(--r-md);
  color:var(--accent-500);
  font-weight:700;
  font-size:var(--fs-body-14);
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .ao-add-card:hover {
  background:var(--accent-100);
  border-color:var(--accent-500);
  border-style:solid;
}

/* ============================================================
   Burger drawer
   ============================================================ */
.pos-retail-mobile .drawer-backdrop {
  position:absolute;
  inset:28px 0 0 0;
  background:rgba(25,25,25,0.4);
  display:none;
  z-index:25;
  animation:fade 200ms ease;
}
.pos-retail-mobile .drawer-backdrop.is-open { display:block; }
.pos-retail-mobile .drawer {
  position:absolute;
  top:0; left:0; bottom:0;
  width:288px;
  background:var(--theme-surface);
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation:slide-in 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes slide-in { from { transform:translateX(-100%); } to { transform:translateX(0); } }

.pos-retail-mobile .drawer__head {
  padding:var(--s5) var(--s4) var(--s4);
  display:flex; align-items:center; gap:var(--s3);
  border-bottom:1px solid var(--border-modal);
  background:var(--theme-canvas);
}
.pos-retail-mobile .drawer__avatar {
  width:48px; height:48px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-16);
  flex-shrink:0;
}
.pos-retail-mobile .drawer__user-name { font-size:var(--fs-body-16); font-weight:700; margin:0; }
.pos-retail-mobile .drawer__user-role { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }

.pos-retail-mobile .drawer__nav {
  flex:1; overflow-y:auto;
  padding:var(--s3) var(--s2);
  display:flex; flex-direction:column; gap:2px;
}
.pos-retail-mobile .drawer__item {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s3);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--content-main);
  font-size:var(--fs-body-18); font-weight:500;
  text-align:left;
  transition:background 120ms ease, color 120ms ease;
}
.pos-retail-mobile .drawer__item:hover { background:var(--neutral-100); }
.pos-retail-mobile .drawer__item.is-active {
  background:var(--accent-50);
  color:var(--accent-500);
  font-weight:600;
}
.pos-retail-mobile .drawer__item-icon {
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .drawer__item-label { flex:1; }
.pos-retail-mobile .drawer__item-badge {
  font-size:11px; font-weight:700;
  padding:2px 8px;
  background:var(--accent-500); color:var(--mono-white);
  border-radius:var(--r-pill);
}
.pos-retail-mobile .drawer__item-lock {
  width:14px; height:14px;
  color:var(--content-placeholder);
  flex-shrink:0;
}
.pos-retail-mobile .drawer__item-lock + .drawer__item-label { margin-right:auto; }
.pos-retail-mobile .drawer__divider {
  height:1px;
  background:var(--border-modal);
  margin:var(--s2) var(--s3);
}
.pos-retail-mobile .drawer__foot {
  padding:var(--s3) var(--s2) var(--s4);
  border-top:1px solid var(--border-modal);
}
.pos-retail-mobile .drawer__item--danger { color:var(--danger-500); }
.pos-retail-mobile .drawer__item--danger:hover { background:var(--danger-50); }

/* ============================================================
   Quick create item — form preview
   ============================================================ */
.pos-retail-mobile .qc-summary {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--accent-50);
  border:1px solid var(--accent-100);
  border-radius:var(--r-md);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .qc-summary__icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .qc-summary__body { flex:1; min-width:0; }
.pos-retail-mobile .qc-summary__name {
  font-size:var(--fs-body-16); font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .qc-summary__sub { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .qc-summary__price { font-size:var(--fs-h3); font-weight:700; color:var(--accent-500); }

/* ============================================================
   Gift card sheet
   ============================================================ */
.pos-retail-mobile .gc-card {
  background:linear-gradient(135deg, #2E70FF, #4580FF);
  color:var(--mono-white);
  border-radius:var(--r-lg);
  padding:var(--s4);
  margin-bottom:var(--s4);
  position:relative;
  overflow:hidden;
}
.pos-retail-mobile .gc-card::before {
  content:''; position:absolute;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  top:-40px; right:-40px;
}
.pos-retail-mobile .gc-card::after {
  content:''; position:absolute;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  bottom:-20px; left:40%;
}
.pos-retail-mobile .gc-card__head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s5);
  position:relative; z-index:1;
}
.pos-retail-mobile .gc-card__brand { font-size:var(--fs-body-12); font-weight:700; letter-spacing:0.1em; opacity:0.9; }
.pos-retail-mobile .gc-card__chip {
  width:32px; height:24px;
  border-radius:4px;
  background:linear-gradient(135deg, #FFE4B4, #FFC259);
}
.pos-retail-mobile .gc-card__number {
  font-family:'Courier New', monospace;
  font-size:18px; font-weight:600; letter-spacing:0.15em;
  margin-bottom:var(--s4);
  position:relative; z-index:1;
}
.pos-retail-mobile .gc-card__amount {
  display:flex; justify-content:space-between; align-items:flex-end;
  position:relative; z-index:1;
}
.pos-retail-mobile .gc-card__amount-label { font-size:11px; opacity:0.8; text-transform:uppercase; letter-spacing:0.08em; }
.pos-retail-mobile .gc-card__amount-val   { font-size:28px; font-weight:700; letter-spacing:-0.01em; }

/* ============================================================
   Split — by item / by amount panes
   ============================================================ */
.pos-retail-mobile .split-people-bar {
  display:flex; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap;
}
.pos-retail-mobile .split-people-bar .chip { min-width:48px; justify-content:center; padding:0 var(--s3); }

.pos-retail-mobile .split-item-row {
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .split-item-row:last-child { border-bottom:0; }
.pos-retail-mobile .split-item-row__info { flex:1; min-width:0; }
.pos-retail-mobile .split-item-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .split-item-row__meta { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .split-item-row__price { font-size:var(--fs-body-14); font-weight:600; }
.pos-retail-mobile .split-person-pick {
  display:flex; gap:6px; margin-top:6px; flex-wrap:wrap;
}
.pos-retail-mobile .split-person-pick button {
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--neutral-100); color:var(--content-sub);
  font-size:var(--fs-body-14); font-weight:700;
  border:1.5px solid transparent;
  transition:all 120ms ease;
}
.pos-retail-mobile .split-person-pick button:hover { background:var(--neutral-200); }
.pos-retail-mobile .split-person-pick button.is-active {
  background:var(--accent-500); color:var(--mono-white);
}

.pos-retail-mobile .split-summary {
  display:grid; gap:var(--s2);
  background:var(--accent-50);
  border:1px solid var(--accent-100);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  margin-top:var(--s3);
}
.pos-retail-mobile .split-summary__row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-body-14);
}
.pos-retail-mobile .split-summary__row strong { font-size:var(--fs-body-16); font-weight:700; color:var(--accent-500); }

.pos-retail-mobile .split-amount-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) 0;
}
.pos-retail-mobile .split-amount-row__label {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  font-weight:700; font-size:var(--fs-body-14);
  flex-shrink:0;
}
.pos-retail-mobile .split-amount-row__input {
  flex:1;
  display:flex; align-items:center;
  height:44px; padding:0 var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
}
.pos-retail-mobile .split-amount-row__input span { color:var(--content-sub); margin-right:4px; }
.pos-retail-mobile .split-amount-row__input input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:var(--fs-body-16); font-weight:600; color:var(--content-main);
}
.pos-retail-mobile .split-warn {
  font-size:var(--fs-body-14); color:var(--danger-500); margin-top:var(--s2);
}
.pos-retail-mobile .split-warn.is-ok { color:var(--success-500); }

/* ============================================================
   Loyalty points
   ============================================================ */
.pos-retail-mobile .points-summary {
  background:linear-gradient(135deg, #FFAF22, #FFC259);
  color:var(--mono-white);
  border-radius:var(--r-md);
  padding:var(--s4);
  margin-bottom:var(--s4);
  display:flex; align-items:center; gap:var(--s3);
}
.pos-retail-mobile .points-summary__icon {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .points-summary__body { flex:1; min-width:0; }
.pos-retail-mobile .points-summary__name { font-size:var(--fs-body-14); font-weight:500; opacity:0.9; margin:0; }
.pos-retail-mobile .points-summary__count { font-size:24px; font-weight:700; line-height:1.1; margin-top:2px; }
.pos-retail-mobile .points-summary__hint { font-size:11px; opacity:0.85; margin-top:2px; }

.pos-retail-mobile .points-quick {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s2); margin-bottom:var(--s4);
}
.pos-retail-mobile .points-quick button {
  height:52px; border-radius:var(--r-sm);
  background:var(--warning-50); color:var(--warning-500);
  font-size:var(--fs-body-14); font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid transparent;
  transition:all 120ms ease;
}
.pos-retail-mobile .points-quick button:hover { border-color:var(--warning-500); }
.pos-retail-mobile .points-quick button[disabled] {
  background:var(--theme-disabled); color:var(--content-disabled);
  cursor:not-allowed; pointer-events:none;
}
.pos-retail-mobile .points-quick button small { font-size:10px; font-weight:500; opacity:0.85; margin-top:1px; }
.pos-retail-mobile .points-quick button.is-selected { background:var(--warning-500); color:var(--mono-white); border-color:var(--warning-500); }

/* ============================================================
   Modifier rows (variant sheet add-ons)
   ============================================================ */
.pos-retail-mobile .mod-section { margin-bottom:var(--s4); }
.pos-retail-mobile .mod-section__title { font-size:var(--fs-body-14); font-weight:600; margin-bottom:var(--s2); }

.pos-retail-mobile .mod-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  transition:background 120ms ease, border-color 120ms ease;
}
.pos-retail-mobile .mod-row.is-active { background:var(--accent-50); border-color:var(--accent-200); }
.pos-retail-mobile .mod-row__info { flex:1; min-width:0; }
.pos-retail-mobile .mod-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .mod-row__price { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .mod-row__qty { display:inline-flex; align-items:center; gap:var(--s2); }
.pos-retail-mobile .mod-row__qty button {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-main);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-16);
}
.pos-retail-mobile .mod-row__qty button:hover { background:var(--neutral-200); }
.pos-retail-mobile .mod-row__qty button[disabled] { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.pos-retail-mobile .mod-row__qty span {
  min-width:20px; text-align:center;
  font-weight:700; font-size:var(--fs-body-16);
  color:var(--content-main);
}

/* Cart line: make info area look tappable when editable */
.pos-retail-mobile .line__info.is-editable { cursor:pointer; padding:2px 0; }
.pos-retail-mobile .line__info.is-editable:hover .line__name { color:var(--accent-500); }
.pos-retail-mobile .line__edit-hint {
  font-size:11px; color:var(--accent-500); margin-top:2px;
  display:inline-flex; align-items:center; gap:2px;
}

/* ============================================================
   Cart customer section (primary, top of cart)
   ============================================================ */
.pos-retail-mobile .cart-customer {
  background:var(--theme-surface);
  border:1px solid var(--accent-100);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .cart-customer__title {
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-body-12);
  text-transform:uppercase; letter-spacing:0.04em;
  font-weight:700;
  color:var(--accent-500);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .cart-customer__title-opt {
  font-size:10px; color:var(--content-sub);
  font-weight:500; text-transform:none; letter-spacing:0;
  margin-left:auto;
}
.pos-retail-mobile .cart-customer__input {
  display:flex; align-items:center; gap:var(--s2);
  height:44px; padding:0 var(--s3);
  background:var(--neutral-50);
  border:1.5px solid transparent;
  border-radius:var(--r-sm);
  transition:border-color 120ms ease, background 120ms ease;
}
.pos-retail-mobile .cart-customer__input:focus-within {
  border-color:var(--accent-500);
  background:var(--theme-surface);
}
.pos-retail-mobile .cart-customer__input > span.lead-icon {
  color:var(--content-sub); flex-shrink:0;
  display:inline-flex; align-items:center;
}
.pos-retail-mobile .cart-customer__input input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:var(--fs-body-16); color:var(--content-main);
}
.pos-retail-mobile .cart-customer__input input::placeholder { color:var(--content-placeholder); }
.pos-retail-mobile .cart-customer__input .clear-btn {
  width:24px; height:24px; border-radius:50%;
  background:var(--neutral-200); color:var(--content-sub);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; border:0;
}
.pos-retail-mobile .cart-customer__input .clear-btn:hover { background:var(--neutral-300); color:var(--mono-white); }

.pos-retail-mobile .cart-customer__results {
  margin-top:var(--s2);
  display:grid; gap:2px;
}
.pos-retail-mobile .cart-customer__results:empty { margin-top:0; }
.pos-retail-mobile .cust-result {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background 120ms ease;
  background:transparent;
  border:0;
  text-align:left; width:100%;
}
.pos-retail-mobile .cust-result:hover { background:var(--accent-50); }
.pos-retail-mobile .cust-result__avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-body-12); font-weight:700;
  flex-shrink:0;
}
.pos-retail-mobile .cust-result__body { flex:1; min-width:0; }
.pos-retail-mobile .cust-result__name {
  font-size:var(--fs-body-14); font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--content-main);
}
.pos-retail-mobile .cust-result__meta {
  font-size:11px; color:var(--content-sub); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.pos-retail-mobile .cust-result--new {
  background:var(--accent-50);
  color:var(--accent-500);
  font-weight:700;
  font-size:var(--fs-body-14);
  justify-content:center;
  padding:var(--s3);
  margin-top:var(--s2);
  border:1px dashed var(--accent-200);
  gap:var(--s1);
}
.pos-retail-mobile .cust-result--new:hover { background:var(--accent-100); }

.pos-retail-mobile .cust-result__hint {
  padding:var(--s2) var(--s3);
  font-size:var(--fs-body-12);
  color:var(--content-sub);
}

/* Attached customer card */
.pos-retail-mobile .cust-attached {
  display:flex; align-items:center; gap:var(--s3);
  padding:4px 0;
}
.pos-retail-mobile .cust-attached__avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-16);
  flex-shrink:0;
}
.pos-retail-mobile .cust-attached__body { flex:1; min-width:0; }
.pos-retail-mobile .cust-attached__name { font-size:var(--fs-body-16); font-weight:700; margin:0; color:var(--content-main); }
.pos-retail-mobile .cust-attached__meta { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .cust-attached__remove {
  width:32px; height:32px; border-radius:50%;
  background:var(--neutral-100); color:var(--content-sub);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; border:0;
}
.pos-retail-mobile .cust-attached__remove:hover { background:var(--danger-50); color:var(--danger-500); }

/* Loyalty inline (appears under attached customer) */
.pos-retail-mobile .loyalty-inline {
  margin-top:var(--s3);
  padding:var(--s3);
  background:var(--warning-50);
  border:1px solid var(--warning-100);
  border-radius:var(--r-sm);
  display:flex; align-items:center; gap:var(--s3);
}
.pos-retail-mobile .loyalty-inline.is-active {
  background:linear-gradient(135deg, var(--success-50), #E8F5E9);
  border-color:var(--success-200);
}
.pos-retail-mobile .loyalty-inline.is-zero {
  background:var(--neutral-50);
  border-color:var(--border-divider);
  opacity:0.85;
}
.pos-retail-mobile .loyalty-inline__icon {
  width:36px; height:36px; border-radius:50%;
  background:var(--warning-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .loyalty-inline.is-active .loyalty-inline__icon { background:var(--success-500); }
.pos-retail-mobile .loyalty-inline.is-zero .loyalty-inline__icon { background:var(--neutral-200); color:var(--content-sub); }
.pos-retail-mobile .loyalty-inline__body { flex:1; min-width:0; }
.pos-retail-mobile .loyalty-inline__primary {
  font-size:var(--fs-body-14); font-weight:700;
  color:var(--content-main);
}
.pos-retail-mobile .loyalty-inline__secondary {
  font-size:11px; color:var(--content-sub);
  margin-top:1px;
}
.pos-retail-mobile .loyalty-inline__cta {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px;
  background:var(--warning-500); color:var(--mono-white);
  border:0; border-radius:var(--r-pill);
  font-size:var(--fs-body-12); font-weight:700;
  cursor:pointer;
  transition:background 120ms ease;
}
.pos-retail-mobile .loyalty-inline__cta:hover { background:var(--warning-400); }
.pos-retail-mobile .loyalty-inline.is-active .loyalty-inline__cta {
  background:var(--theme-surface); color:var(--success-500);
  box-shadow:inset 0 0 0 1px var(--success-500);
}
.pos-retail-mobile .loyalty-inline.is-active .loyalty-inline__cta:hover { background:var(--success-50); }

/* ============================================================
   Product grid
   ============================================================ */
.pos-retail-mobile .scroll-area { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; }
.pos-retail-mobile .scroll-area::-webkit-scrollbar { width:4px; }
.pos-retail-mobile .scroll-area::-webkit-scrollbar-thumb { background:var(--neutral-200); border-radius:var(--r-pill); }

.pos-retail-mobile .products {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s3);
  padding:var(--s4);
}
.pos-retail-mobile .prod {
  position:relative;
  background:var(--theme-surface);
  border-radius:var(--r-md);
  padding:var(--s3);
  border:1px solid var(--border-modal);
  display:flex; flex-direction:column;
  min-height:132px;
  transition:transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  cursor:pointer; text-align:left;
}
.pos-retail-mobile .prod:hover { border-color:var(--accent-300); box-shadow:var(--shadow-md); }
.pos-retail-mobile .prod:active { transform:scale(0.97); box-shadow:var(--shadow-sm); }
.pos-retail-mobile .prod__art {
  width:100%; height:92px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin-bottom:var(--s2);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .prod__name { font-size:var(--fs-body-14); font-weight:600; line-height:1.3; margin:0; }
.pos-retail-mobile .prod__price { margin-top:auto; font-size:var(--fs-body-14); font-weight:600; color:var(--accent-500); padding-top:var(--s2); }
.pos-retail-mobile .prod__mods {
  position:absolute; top:8px; right:8px;
  background:var(--accent-50); color:var(--accent-500);
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:var(--r-pill);
}

/* ============================================================
   Products LIST view (alternative to grid)
   Activated via state.productView = 'list' → .products.is-list
   ============================================================ */
.pos-retail-mobile .products.is-list {
  display:flex; flex-direction:column;
  grid-template-columns:none;
  gap:var(--s2);
}
.pos-retail-mobile .products.is-list .prod {
  flex-direction:row; align-items:center;
  min-height:64px;
  padding:var(--s2) var(--s3);
  gap:var(--s3);
}
.pos-retail-mobile .products.is-list .prod__art {
  width:56px; height:56px;
  margin-bottom:0;
  flex-shrink:0;
  border-radius:var(--r-sm);
  font-size:22px;
}
.pos-retail-mobile .products.is-list .prod__name {
  font-size:var(--fs-body-16);
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .products.is-list .prod__price {
  margin-top:0; padding-top:0;
  font-size:var(--fs-body-16);
  flex-shrink:0;
}
.pos-retail-mobile .products.is-list .prod__mods {
  position:static;
  margin-left:var(--s2);
}

/* View toggle (Grid / List segmented) */
.pos-retail-mobile .view-toggle {
  display:inline-flex;
  background:var(--neutral-100);
  border-radius:var(--r-pill);
  padding:3px;
  gap:2px;
  flex-shrink:0;
}
.pos-retail-mobile .view-toggle__btn {
  width:34px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:0;
  border-radius:var(--r-pill);
  color:var(--content-sub);
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .view-toggle__btn.is-active {
  background:var(--mono-white);
  color:var(--content-main);
  box-shadow:var(--shadow-sm);
}
.pos-retail-mobile .view-toggle__btn:active { transform:scale(0.92); }

/* ============================================================
   Mini cart bar — single CTA to Cart Review (Square/Shopify pattern)
   Pay button only lives in the Cart view after customer/promo/note step.
   ============================================================ */
.pos-retail-mobile .mini-cart {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--accent-500);
  color:var(--mono-white);
  border:0;
  flex-shrink:0;
  cursor:pointer;
  width:100%;
  text-align:left;
  transition:background 120ms ease;
  box-shadow:0 -4px 16px rgba(25,25,25,0.08);
}
.pos-retail-mobile .mini-cart:hover { background:var(--accent-400); }
.pos-retail-mobile .mini-cart:active { background:var(--accent-400); }
.pos-retail-mobile .mini-cart.is-empty {
  background:var(--neutral-100);
  color:var(--content-placeholder);
  cursor:not-allowed; pointer-events:none;
}

.pos-retail-mobile .mini-cart__icon {
  position:relative;
  width:44px; height:44px; border-radius:var(--r-sm);
  background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .mini-cart.is-empty .mini-cart__icon { background:var(--theme-surface); color:var(--content-placeholder); }
.pos-retail-mobile .mini-cart__badge {
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--warning-500); color:var(--mono-white);
  font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--accent-500);
}
.pos-retail-mobile .mini-cart.is-empty .mini-cart__badge { display:none; }

.pos-retail-mobile .mini-cart__info { flex:1; min-width:0; }
.pos-retail-mobile .mini-cart__label { font-size:var(--fs-body-12); opacity:0.85; line-height:1.2; }
.pos-retail-mobile .mini-cart__cta {
  font-size:var(--fs-body-18); font-weight:700; line-height:1.2; margin-top:2px;
}

.pos-retail-mobile .mini-cart__total {
  font-size:var(--fs-body-18); font-weight:600; letter-spacing:-0.005em;
  margin-left:auto; flex-shrink:0;
  opacity:0.92;
}
.pos-retail-mobile .mini-cart__arrow { opacity:0.8; flex-shrink:0; }
.pos-retail-mobile .mini-cart.is-empty .mini-cart__arrow { display:none; }

/* ============================================================
   Cart view (full screen)
   ============================================================ */
.pos-retail-mobile .cart-list { padding:var(--s4); }

.pos-retail-mobile .cart-section {
  background:var(--theme-surface);
  border-radius:var(--r-md);
  margin-bottom:var(--s3);
  overflow:hidden;
  border:1px solid var(--border-modal);
}
.pos-retail-mobile .cart-section__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .cart-section__title {
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--content-sub);
  text-transform:uppercase; letter-spacing:0.04em; margin:0;
}
.pos-retail-mobile .cart-section__action {
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--accent-500);
}

.pos-retail-mobile .line {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--s3); align-items:center;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .line:last-child { border-bottom:0; }
.pos-retail-mobile .line__qty { display:inline-flex; align-items:center; gap:var(--s2); }
.pos-retail-mobile .line__qty button {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-main);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-18);
  border:0;
  position:relative;
}
.pos-retail-mobile .line__qty button::after { content:''; position:absolute; inset:-4px; }
.pos-retail-mobile .line__qty button:hover { background:var(--neutral-200); }
.pos-retail-mobile .line__qty button:active { background:var(--neutral-300); transform:scale(0.92); }
.pos-retail-mobile .line__qty span { min-width:20px; text-align:center; font-weight:600; font-size:var(--fs-body-16); }
.pos-retail-mobile .line__info { min-width:0; }
.pos-retail-mobile .line__name { font-size:var(--fs-body-16); font-weight:600; margin:0;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .line__meta { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .line__price { font-size:var(--fs-body-16); font-weight:600; }

/* Empty state */
.pos-retail-mobile .empty {
  text-align:center;
  padding:var(--s12) var(--s4);
  color:var(--content-sub);
}
.pos-retail-mobile .empty__icon { font-size:48px; margin-bottom:var(--s3); }
.pos-retail-mobile .empty__title { font-size:var(--fs-body-18); font-weight:600; color:var(--content-main); margin:0 0 var(--s2); }
.pos-retail-mobile .empty__msg { font-size:var(--fs-body-14); margin:0; }

/* Attachment row inside cart */
.pos-retail-mobile .attach-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .attach-row:last-child { border-bottom:0; }
.pos-retail-mobile .attach-row__icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-sub);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .attach-row.is-on .attach-row__icon { background:var(--accent-50); color:var(--accent-500); }
.pos-retail-mobile .attach-row__body { flex:1; min-width:0; }
.pos-retail-mobile .attach-row__title { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .attach-row__sub   { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .attach-row__chev { color:var(--content-placeholder); flex-shrink:0; }

/* Totals */
.pos-retail-mobile .totals {
  background:var(--theme-surface);
  border-radius:var(--r-md);
  padding:var(--s4);
  display:grid; gap:6px;
  border:1px solid var(--border-modal);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .totals__row { display:flex; justify-content:space-between; font-size:var(--fs-body-14); color:var(--content-sub); }
.pos-retail-mobile .totals__row--grand {
  font-size:var(--fs-body-18); color:var(--content-main); font-weight:700;
  padding-top:var(--s2); border-top:1px solid var(--border-modal); margin-top:var(--s2);
}
.pos-retail-mobile .totals__row--discount { color:var(--success-500); }

/* Cart bottom actions */
.pos-retail-mobile .cart-actions {
  display:grid; grid-template-columns:1fr 2fr; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
}

/* ============================================================
   Cart foot — sticky bottom with collapsible summary + Pay
   ============================================================ */
.pos-retail-mobile .cart-foot {
  flex-shrink:0;
  background:var(--theme-surface);
  border-top:1px solid var(--border-modal);
  box-shadow:0 -6px 16px rgba(25,25,25,0.06);
}
.pos-retail-mobile #totalsBreakdown {
  display:grid; gap:6px;
  padding:var(--s3) var(--s4);
  background:var(--neutral-50);
  border-bottom:1px solid var(--border-modal);
  border:0; border-radius:0;
  margin:0;
  animation:slide-down 200ms ease;
}
@keyframes slide-down {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.pos-retail-mobile .cart-foot__grand {
  display:flex; align-items:center; gap:var(--s2);
  width:100%;
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border:0;
  cursor:pointer;
  transition:background 120ms ease;
}
.pos-retail-mobile .cart-foot__grand:hover { background:var(--neutral-50); }
.pos-retail-mobile .cart-foot__grand-label { font-size:var(--fs-body-14); color:var(--content-sub); font-weight:500; }
.pos-retail-mobile .cart-foot__grand-value { flex:1; text-align:right; font-size:26px; font-weight:700; letter-spacing:-0.01em; color:var(--content-main); }
.pos-retail-mobile .cart-foot__grand-chev { color:var(--content-sub); flex-shrink:0; transition:transform 180ms ease; }
.pos-retail-mobile .cart-foot__grand.is-open .cart-foot__grand-chev { transform:rotate(180deg); }

/* ============================================================
   Sheets / modals
   ============================================================ */
.pos-retail-mobile .sheet-backdrop {
  position:absolute; inset:0;
  background:rgba(25,25,25,0.4);
  display:none;
  align-items:flex-end;
  z-index:10;
  animation:fade 200ms ease;
}
.pos-retail-mobile .sheet-backdrop.is-open { display:flex; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

.pos-retail-mobile .sheet {
  width:100%;
  background:var(--theme-surface);
  border-top-left-radius:var(--r-xl);
  border-top-right-radius:var(--r-xl);
  padding:var(--s4);
  max-height:92%;
  overflow-y:auto;
  animation:rise 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes rise { from { transform:translateY(100%); } to { transform:translateY(0); } }
.pos-retail-mobile .sheet__head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s4);
  gap:var(--s3);
}
.pos-retail-mobile .sheet__title { font-size:var(--fs-h3); font-weight:600; margin:0; }

/* Payment method tile */
.pos-retail-mobile .method {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4);
  background:var(--theme-surface);
  border:1.5px solid var(--border-divider);
  border-radius:var(--r-md);
  cursor:pointer; transition:all 120ms ease;
}
.pos-retail-mobile .method:hover { border-color:var(--accent-300); }
.pos-retail-mobile .method:active { background:var(--neutral-50); }
.pos-retail-mobile .method.is-selected { border-color:var(--accent-500); background:var(--accent-50); }
.pos-retail-mobile .method.is-selected:active { background:var(--accent-100); }
.pos-retail-mobile .method__icon {
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--neutral-100);
  display:flex; align-items:center; justify-content:center;
  color:var(--content-main); flex-shrink:0;
}
.pos-retail-mobile .method.is-selected .method__icon { background:var(--accent-100); color:var(--accent-500); }
.pos-retail-mobile .method__info { flex:1; min-width:0; }
.pos-retail-mobile .method__name { font-weight:600; font-size:var(--fs-body-16); margin:0; }
.pos-retail-mobile .method__sub  { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .method__radio {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--border-divider);
  flex-shrink:0; position:relative;
}
.pos-retail-mobile .method.is-selected .method__radio { border-color:var(--accent-500); }
.pos-retail-mobile .method.is-selected .method__radio::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-500);
}
.pos-retail-mobile .methods { display:grid; gap:var(--s3); }

/* Customer result row in sheet */
.pos-retail-mobile .cust-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3); border-radius:var(--r-md);
  cursor:pointer;
  transition:background 120ms ease;
}
.pos-retail-mobile .cust-row:hover { background:var(--neutral-50); }
.pos-retail-mobile .cust-row__avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; flex-shrink:0;
}
.pos-retail-mobile .cust-row__body { flex:1; min-width:0; }
.pos-retail-mobile .cust-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .cust-row__meta { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .cust-row__chev { color:var(--content-placeholder); flex-shrink:0; }

.pos-retail-mobile .cust-not-found {
  padding:var(--s5) var(--s3);
  text-align:center;
  border:1px dashed var(--border-divider);
  border-radius:var(--r-md);
  background:var(--neutral-50);
}
.pos-retail-mobile .cust-not-found__icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--theme-surface);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--content-sub);
  margin-bottom:var(--s2);
  box-shadow:inset 0 0 0 1px var(--border-divider);
}
.pos-retail-mobile .cust-not-found__title { font-size:var(--fs-body-16); font-weight:600; margin:0 0 var(--s1); }
.pos-retail-mobile .cust-not-found__msg { font-size:var(--fs-body-14); color:var(--content-sub); margin:0 0 var(--s3); }

/* ============================================================
   Alert (in-page)
   ============================================================ */
.pos-retail-mobile .alert {
  position:relative;
  display:flex; gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s4) var(--s5);
  background:var(--theme-surface);
  border-radius:var(--r-md);
  box-shadow:inset 4px 0 0 var(--accent-500), inset 0 0 0 1px var(--border-modal);
}
.pos-retail-mobile .alert--success { box-shadow:inset 4px 0 0 var(--success-500), inset 0 0 0 1px var(--border-modal); }
.pos-retail-mobile .alert--warning { box-shadow:inset 4px 0 0 var(--warning-500), inset 0 0 0 1px var(--border-modal); }
.pos-retail-mobile .alert--danger  { box-shadow:inset 4px 0 0 var(--danger-500),  inset 0 0 0 1px var(--border-modal); }
.pos-retail-mobile .alert__body  { flex:1; min-width:0; }
.pos-retail-mobile .alert__title { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .alert__msg   { font-size:var(--fs-body-14); color:var(--content-sub); margin:4px 0 0; line-height:1.5; }

/* ============================================================
   Android-style on-screen keyboard
   Slides up from bottom when text inputs are focused
   ============================================================ */
.pos-retail-mobile .android-kb {
  position:absolute;
  bottom:0; left:0; right:0;
  background:#D2D5DB;
  z-index:35;
  transform:translateY(100%);
  transition:transform 220ms cubic-bezier(.2,.7,.2,1);
  user-select:none;
  font-family:'Roboto', 'Inter', sans-serif;
  box-shadow:0 -2px 8px rgba(0,0,0,0.15);
  padding-bottom:8px;
}
.pos-retail-mobile .android-kb.is-open { transform:translateY(0); }

.pos-retail-mobile .android-kb__bar {
  height:34px;
  padding:0 8px;
  display:flex; align-items:center;
  gap:6px;
  background:#DEE1E5;
  font-size:12px;
  color:#5F6368;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.pos-retail-mobile .android-kb__bar-handle {
  flex-shrink:0;
  font-weight:500;
  color:#5F6368;
}
.pos-retail-mobile .android-kb__bar-close {
  margin-left:auto;
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  color:#5F6368;
  cursor:pointer;
}

.pos-retail-mobile .kb-keys { padding:6px 4px 0; }
.pos-retail-mobile .kb-row {
  display:flex; gap:4px; margin-bottom:5px;
  padding:0 3px;
}
.pos-retail-mobile .kb-row:last-child { margin-bottom:0; }

.pos-retail-mobile .kb-key {
  flex:1;
  height:36px;
  background:#FFFFFF;
  color:#202124;
  border:0;
  border-radius:4px;
  font-size:15px;
  font-weight:400;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 0 rgba(0,0,0,0.18);
  cursor:pointer;
  font-family:inherit;
  position:relative;
  padding:0;
  transition:background 80ms ease;
}
.pos-retail-mobile .kb-key:active {
  background:#B8BBC0;
  box-shadow:0 0 0;
  transform:translateY(1px);
}
.pos-retail-mobile .kb-key--alt {
  background:#ABB0B7;
  color:#202124;
}
.pos-retail-mobile .kb-key--alt:active { background:#9CA0A6; }
.pos-retail-mobile .kb-key--accent {
  background:var(--accent-500);
  color:#FFFFFF;
}
.pos-retail-mobile .kb-key--accent:active { background:var(--accent-400); }
.pos-retail-mobile .kb-key--wide  { flex:1.6; font-size:12px; font-weight:600; }
.pos-retail-mobile .kb-key--space { flex:5; }
.pos-retail-mobile .kb-key--shift.is-on {
  background:#3C4043;
  color:#FFFFFF;
}

.pos-retail-mobile .kb-key__sub {
  position:absolute;
  top:3px; right:5px;
  font-size:9px;
  color:#5F6368;
  font-weight:500;
}

/* ============================================================
   Toast — top center, auto-dismiss 2s, doesn't overlap bottom CTAs
   ============================================================ */
.pos-retail-mobile .toast {
  position:absolute; top:36px; left:50%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:var(--s2);
  height:40px; padding:0 var(--s3) 0 var(--s4);
  border-radius:var(--r-pill);
  background:var(--success-500); color:var(--mono-white);
  font-size:var(--fs-body-14); font-weight:600;
  box-shadow:var(--shadow-md);
  z-index:30;
  animation:toast-drop 220ms cubic-bezier(.2,.7,.2,1);
  max-width:88%;
  white-space:nowrap;
}
@keyframes toast-drop {
  from { transform:translate(-50%, -120%); opacity:0; }
  to   { transform:translate(-50%, 0);     opacity:1; }
}
.pos-retail-mobile .toast.is-hidden { display:none; }
.pos-retail-mobile .toast__close {
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.8);
}

/* ============================================================
   Success view
   ============================================================ */
.pos-retail-mobile .success {
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:var(--s6);
  background:var(--theme-canvas);
}
.pos-retail-mobile .success__icon {
  width:88px; height:88px; border-radius:50%;
  background:var(--success-100); color:var(--success-500);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s5);
}
.pos-retail-mobile .success__title { font-size:var(--fs-h2); font-weight:600; margin:0 0 var(--s2); letter-spacing:-0.01em; }
.pos-retail-mobile .success__sub   { font-size:var(--fs-body-16); color:var(--content-sub); margin:0 0 var(--s6); max-width:280px; }
.pos-retail-mobile .success__amount{ font-size:40px; font-weight:700; letter-spacing:-0.02em; margin:0 0 var(--s2); }
.pos-retail-mobile .success__method{ font-size:var(--fs-body-14); color:var(--content-sub); margin:0 0 var(--s8); }
.pos-retail-mobile .success__actions { width:100%; display:grid; gap:var(--s2); }

/* ============================================================
   Gift Card flow (multi-step view)
   ============================================================ */

/* Step 0: Choice — pick scan OR manual input */
.pos-retail-mobile .gc-choice {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-canvas);
}
.pos-retail-mobile .gc-choice__body {
  flex:1; padding:var(--s4);
  display:flex; flex-direction:column;
  gap:var(--s3);
}
.pos-retail-mobile .gc-choice__intro {
  font-size:var(--fs-body-16); color:var(--content-sub);
  text-align:center; margin:var(--s4) 0 var(--s3);
}
.pos-retail-mobile .gc-choice__option {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  text-align:left;
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .gc-choice__option:hover { border-color:var(--accent-500); background:var(--accent-50); }
.pos-retail-mobile .gc-choice__icon {
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .gc-choice__text { flex:1; min-width:0; }
.pos-retail-mobile .gc-choice__text h3 { font-size:var(--fs-body-18); font-weight:600; margin:0; }
.pos-retail-mobile .gc-choice__text p  { font-size:var(--fs-body-14); color:var(--content-sub); margin:2px 0 0; }
.pos-retail-mobile .gc-choice__chev { color:var(--content-placeholder); flex-shrink:0; }

/* Step 1: Scan QR */
.pos-retail-mobile .gc-scan {
  height:100%;
  background:linear-gradient(160deg, #5b5b65 0%, #2a2a32 100%);
  color:var(--mono-white);
  display:flex; flex-direction:column;
}
.pos-retail-mobile .gc-scan__top { padding:var(--s3); }
.pos-retail-mobile .gc-scan__close {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  border:0;
}
.pos-retail-mobile .gc-scan__close:hover { background:rgba(255,255,255,0.18); }
.pos-retail-mobile .gc-scan__viewport {
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--s4); gap:var(--s5);
  text-align:center;
}
.pos-retail-mobile .gc-scan__frame {
  width:200px; height:200px;
  position:relative;
}
.pos-retail-mobile .gc-scan__corner {
  position:absolute;
  width:44px; height:44px;
  border-color:var(--mono-white);
  border-style:solid;
  border-width:0;
}
.pos-retail-mobile .gc-scan__corner--tl { top:0; left:0; border-top-width:3px; border-left-width:3px; }
.pos-retail-mobile .gc-scan__corner--tr { top:0; right:0; border-top-width:3px; border-right-width:3px; }
.pos-retail-mobile .gc-scan__corner--bl { bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; }
.pos-retail-mobile .gc-scan__corner--br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; }
.pos-retail-mobile .gc-scan__beam {
  position:absolute; left:14px; right:14px;
  height:34px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.55), transparent);
  border-radius:4px;
  animation:scan-beam 2.2s ease-in-out infinite;
}
@keyframes scan-beam {
  0%, 100% { top:12px; }
  50%      { top:calc(100% - 46px); }
}
.pos-retail-mobile .gc-scan__title { font-size:var(--fs-h3); font-weight:600; margin:0 0 var(--s1); }
.pos-retail-mobile .gc-scan__sub   { font-size:var(--fs-body-14); opacity:0.7; margin:0; }
.pos-retail-mobile .gc-scan__manual {
  margin:var(--s4); margin-top:0;
  padding:var(--s4);
  background:var(--accent-50); color:var(--accent-500);
  border-radius:var(--r-md);
  font-size:var(--fs-body-16); font-weight:700;
  display:flex; align-items:center; justify-content:center;
  gap:var(--s2);
  border:0;
  transition:background 120ms ease;
}
.pos-retail-mobile .gc-scan__manual:hover { background:var(--accent-100); }

/* Step 2: Input code */
.pos-retail-mobile .gc-input { height:100%; display:flex; flex-direction:column; }
.pos-retail-mobile .gc-input__body {
  flex:1;
  padding:var(--s6) var(--s4) var(--s4);
  display:flex; flex-direction:column;
  align-items:center;
}
.pos-retail-mobile .gc-input__label {
  font-size:var(--fs-body-16); font-weight:500;
  color:var(--content-main); margin:0 0 var(--s4);
}
.pos-retail-mobile .gc-input__field {
  font-family:'Inter', monospace;
  font-size:24px; font-weight:700;
  letter-spacing:1px;
  padding:var(--s2) 0;
  border-bottom:2px solid var(--accent-500);
  min-width:280px; max-width:100%;
  text-align:center;
  min-height:48px;
  color:var(--content-main);
}
.pos-retail-mobile .gc-input__field .placeholder { color:var(--content-disabled); font-weight:500; }
.pos-retail-mobile .gc-input__field .cursor {
  display:inline-block;
  width:2px; height:24px;
  background:var(--accent-500);
  animation:blink 1s steps(2) infinite;
  vertical-align:middle;
  margin:0 1px;
}
@keyframes blink { to { opacity:0; } }

/* Step 3: Detail */
.pos-retail-mobile .gc-detail {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-canvas);
}
.pos-retail-mobile .gc-detail__body {
  flex:1;
  padding:var(--s4);
  display:flex; flex-direction:column;
}
.pos-retail-mobile .gc-detail__balance-section {
  padding:var(--s10) 0 var(--s5);
  text-align:center;
}
.pos-retail-mobile .gc-detail__balance-label {
  font-size:var(--fs-body-16);
  color:var(--content-sub);
  margin:0 0 var(--s2);
}
.pos-retail-mobile .gc-detail__balance {
  font-size:48px; font-weight:700;
  letter-spacing:-0.02em;
  color:var(--content-main);
  margin:0;
}
.pos-retail-mobile .gc-detail__info {
  border-top:1px solid var(--border-divider);
  border-bottom:1px solid var(--border-divider);
  padding:var(--s2) 0;
  margin-bottom:var(--s4);
}
.pos-retail-mobile .gc-detail__row {
  display:flex; justify-content:space-between;
  padding:var(--s3) 0;
  font-size:var(--fs-body-16);
}
.pos-retail-mobile .gc-detail__row span { color:var(--content-sub); }
.pos-retail-mobile .gc-detail__row strong { color:var(--content-main); font-weight:700; }

/* Step 4: Funds */
.pos-retail-mobile .gc-funds { height:100%; display:flex; flex-direction:column; }
.pos-retail-mobile .gc-funds__body {
  flex:1; padding:var(--s5) var(--s4) var(--s4);
  display:flex; flex-direction:column; align-items:stretch;
}
.pos-retail-mobile .gc-funds__label {
  font-size:var(--fs-body-12); color:var(--content-placeholder);
  text-transform:uppercase; letter-spacing:0.04em;
  text-align:center; margin:0 0 var(--s2);
}
.pos-retail-mobile .gc-funds__amount {
  font-size:44px; font-weight:700;
  letter-spacing:-0.02em;
  text-align:center;
  margin:0 0 var(--s5);
  color:var(--content-main);
}
.pos-retail-mobile .gc-funds__quick {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s2);
}
.pos-retail-mobile .gc-funds__quick button {
  height:44px; border-radius:var(--r-sm);
  background:var(--accent-50); color:var(--accent-500);
  font-weight:700; font-size:var(--fs-body-14);
  border:1px solid transparent;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .gc-funds__quick button:hover { border-color:var(--accent-500); }

/* Reusable keypad panel docked at bottom of a view */
.pos-retail-mobile .keypad-panel {
  flex-shrink:0;
  background:var(--theme-surface);
  border-top:1px solid var(--border-modal);
  padding:var(--s3) var(--s4) var(--s4);
}
.pos-retail-mobile .keypad-panel .keypad { margin-bottom:var(--s3); }

/* ============================================================
   History view
   ============================================================ */
.pos-retail-mobile .hist__filters {
  display:flex; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  overflow-x:auto;
  flex-shrink:0;
  scrollbar-width:none;
}
.pos-retail-mobile .hist__filters::-webkit-scrollbar { display:none; }
.pos-retail-mobile .hist__filters .chip { flex-shrink:0; }

.pos-retail-mobile .hist__list { padding:var(--s3) var(--s4); }
.pos-retail-mobile .hist-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease, background 120ms ease;
}
.pos-retail-mobile .hist-row:hover { border-color:var(--accent-300); background:var(--neutral-50); }
.pos-retail-mobile .hist-row:active { background:var(--neutral-100); transform:scale(0.99); }
.pos-retail-mobile .hist-row__info { flex:1; min-width:0; }
.pos-retail-mobile .hist-row__head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:4px;
}
.pos-retail-mobile .hist-row__id { font-size:var(--fs-body-16); font-weight:700; color:var(--content-main); }
.pos-retail-mobile .hist-row__time { font-size:var(--fs-body-12); color:var(--content-sub); }
.pos-retail-mobile .hist-row__sub {
  display:flex; align-items:center;
  gap:var(--s2); flex-wrap:wrap;
  font-size:var(--fs-body-12);
  color:var(--content-sub);
}
.pos-retail-mobile .hist-row__total {
  font-size:var(--fs-body-18); font-weight:700;
  margin-left:var(--s2); flex-shrink:0;
  color:var(--content-main);
}

/* ============================================================
   Items management view
   ============================================================ */
.pos-retail-mobile .items__tabs {
  display:flex; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  overflow-x:auto;
  flex-shrink:0;
  scrollbar-width:none;
}
.pos-retail-mobile .items__tabs::-webkit-scrollbar { display:none; }
.pos-retail-mobile .items__tabs .chip { flex-shrink:0; }

.pos-retail-mobile .items__summary {
  padding:var(--s3) var(--s4);
  background:var(--neutral-50);
  border-bottom:1px solid var(--border-modal);
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-body-12);
  color:var(--content-sub);
}
.pos-retail-mobile .items__summary strong { color:var(--content-main); font-weight:700; }

.pos-retail-mobile .items__list { padding:var(--s3) var(--s4); }

.pos-retail-mobile .item-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .item-row:hover { border-color:var(--accent-300); }
.pos-retail-mobile .item-row:active { transform:scale(0.99); background:var(--neutral-50); }
.pos-retail-mobile .item-row__art {
  width:48px; height:48px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .item-row__body { flex:1; min-width:0; }
.pos-retail-mobile .item-row__name {
  font-size:var(--fs-body-16); font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--content-main);
}
.pos-retail-mobile .item-row__meta {
  font-size:var(--fs-body-12); color:var(--content-sub);
  margin-top:2px;
  display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;
}
.pos-retail-mobile .item-row__right { text-align:right; flex-shrink:0; }
.pos-retail-mobile .item-row__price { font-size:var(--fs-body-16); font-weight:700; color:var(--content-main); }
.pos-retail-mobile .item-row__stock {
  font-size:11px; margin-top:2px;
  font-weight:600;
}
.pos-retail-mobile .stock-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:var(--r-pill);
  font-size:10px; font-weight:700;
}
.pos-retail-mobile .stock-pill--ok    { background:var(--success-100); color:var(--success-500); }
.pos-retail-mobile .stock-pill--low   { background:var(--warning-100); color:var(--warning-500); }
.pos-retail-mobile .stock-pill--out   { background:var(--danger-100);  color:var(--danger-500); }

.pos-retail-mobile .cat-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
}
.pos-retail-mobile .cat-row__icon {
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.pos-retail-mobile .cat-row__body { flex:1; min-width:0; }
.pos-retail-mobile .cat-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .cat-row__count { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }

.pos-retail-mobile .opt-row, .pos-retail-mobile .mod-mgmt-row, .pos-retail-mobile .unit-row {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  margin-bottom:var(--s2);
}
.pos-retail-mobile .opt-row__head, .pos-retail-mobile .mod-mgmt-row__head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s2);
}
.pos-retail-mobile .opt-row__name, .pos-retail-mobile .mod-mgmt-row__name {
  font-size:var(--fs-body-16); font-weight:700;
}
.pos-retail-mobile .opt-row__meta, .pos-retail-mobile .mod-mgmt-row__meta {
  font-size:var(--fs-body-12); color:var(--content-sub);
}
.pos-retail-mobile .opt-row__values, .pos-retail-mobile .mod-mgmt-row__usage {
  display:flex; gap:6px; flex-wrap:wrap;
}
.pos-retail-mobile .opt-value {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:var(--r-pill);
  background:var(--neutral-100); color:var(--content-main);
  font-size:var(--fs-body-12); font-weight:600;
}
.pos-retail-mobile .opt-value__delta { color:var(--accent-500); font-weight:700; }

.pos-retail-mobile .unit-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s3) var(--s4);
}
.pos-retail-mobile .unit-row__name { font-size:var(--fs-body-16); font-weight:600; }
.pos-retail-mobile .unit-row__abbr {
  font-size:var(--fs-body-14);
  font-family:'Inter', monospace;
  color:var(--content-sub);
}
.pos-retail-mobile .unit-row__type {
  font-size:11px;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
  padding:2px 8px;
  background:var(--neutral-100);
  border-radius:var(--r-pill);
}

/* Item detail sheet styling */
.pos-retail-mobile .item-detail__head {
  display:flex; align-items:center; gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--border-modal);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .item-detail__art {
  width:64px; height:64px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .item-detail__name { font-size:var(--fs-h3); font-weight:700; margin:0; }
.pos-retail-mobile .item-detail__sku  { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:4px; font-family:'Inter', monospace; }

.pos-retail-mobile .item-detail__section { margin-bottom:var(--s4); }
.pos-retail-mobile .item-detail__section-title {
  font-size:var(--fs-body-12); text-transform:uppercase; letter-spacing:0.04em;
  font-weight:600; color:var(--content-sub);
  margin:0 0 var(--s2);
}
.pos-retail-mobile .item-detail__row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s2) 0;
  font-size:var(--fs-body-14);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .item-detail__row:last-child { border-bottom:0; }
.pos-retail-mobile .item-detail__row-label { color:var(--content-sub); }
.pos-retail-mobile .item-detail__row-value { color:var(--content-main); font-weight:600; }

.pos-retail-mobile .item-detail__chips {
  display:flex; gap:var(--s1); flex-wrap:wrap;
}
.pos-retail-mobile .item-detail__chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:var(--r-pill);
  background:var(--neutral-100); color:var(--content-main);
  font-size:var(--fs-body-12); font-weight:600;
}

/* ============================================================
   Account hub + sub-section details
   ============================================================ */
.pos-retail-mobile .acc-list { padding: var(--s3) var(--s4); }
.pos-retail-mobile .acc-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease, background 120ms ease;
}
.pos-retail-mobile .acc-row:hover { border-color:var(--accent-300); background:var(--neutral-50); }
.pos-retail-mobile .acc-row:active { background:var(--neutral-100); transform:scale(0.99); }
.pos-retail-mobile .acc-row__icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.pos-retail-mobile .acc-row__body { flex:1; min-width:0; }
.pos-retail-mobile .acc-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0; }
.pos-retail-mobile .acc-row__desc { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .acc-row__chev { color:var(--content-placeholder); flex-shrink:0; }

.pos-retail-mobile .acc-group {
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  font-weight:600; color:var(--content-placeholder);
  margin:var(--s4) var(--s4) var(--s2);
}
.pos-retail-mobile .acc-group:first-child { margin-top:var(--s2); }

.pos-retail-mobile .acc-detail__body { padding:var(--s4); }
.pos-retail-mobile .acc-card {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .acc-card__title {
  font-size:var(--fs-body-12); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
  margin:0 0 var(--s2);
}
.pos-retail-mobile .acc-kv-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:var(--s2) 0;
  font-size:var(--fs-body-14);
  border-bottom:1px solid var(--border-modal);
  gap:var(--s3);
}
.pos-retail-mobile .acc-kv-row:last-child { border-bottom:0; }
.pos-retail-mobile .acc-kv-row__label { color:var(--content-sub); flex-shrink:0; }
.pos-retail-mobile .acc-kv-row__value { color:var(--content-main); font-weight:600; text-align:right; }

.pos-retail-mobile .acc-staff-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .acc-staff-row:last-child { border-bottom:0; }
.pos-retail-mobile .acc-staff-row__avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-12);
  flex-shrink:0;
}
.pos-retail-mobile .acc-staff-row__body { flex:1; min-width:0; }
.pos-retail-mobile .acc-staff-row__name { font-size:var(--fs-body-14); font-weight:600; margin:0; }
.pos-retail-mobile .acc-staff-row__role { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .acc-staff-row__status {
  width:8px; height:8px; border-radius:50%;
  background:var(--success-500);
  flex-shrink:0;
}
.pos-retail-mobile .acc-staff-row__status.is-away { background:var(--warning-500); }
.pos-retail-mobile .acc-staff-row__status.is-offline { background:var(--neutral-200); }

.pos-retail-mobile .acc-connect-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .acc-connect-row:last-child { border-bottom:0; }
.pos-retail-mobile .acc-connect-row__icon {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-main);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .acc-connect-row__body { flex:1; min-width:0; }
.pos-retail-mobile .acc-connect-row__name { font-size:var(--fs-body-14); font-weight:600; }
.pos-retail-mobile .acc-connect-row__detail { font-size:11px; color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .acc-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:var(--r-pill);
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
}
.pos-retail-mobile .acc-pill--ok    { background:var(--success-100); color:var(--success-500); }
.pos-retail-mobile .acc-pill--warn  { background:var(--warning-100); color:var(--warning-500); }
.pos-retail-mobile .acc-pill--err   { background:var(--danger-100);  color:var(--danger-500); }

/* ============================================================
   Daily Report
   ============================================================ */
.pos-retail-mobile .dr-dates {
  display:flex; gap:var(--s2);
  padding:var(--s3) var(--s4);
  overflow-x:auto;
  scrollbar-width:none;
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
}
.pos-retail-mobile .dr-dates::-webkit-scrollbar { display:none; }

.pos-retail-mobile .dr-body { padding:var(--s4); }

/* Hero KPI */
.pos-retail-mobile .dr-hero {
  background:linear-gradient(135deg, var(--accent-500), #6B8FFF);
  color:var(--mono-white);
  border-radius:var(--r-md);
  padding:var(--s5);
  margin-bottom:var(--s3);
  position:relative;
  overflow:hidden;
}
.pos-retail-mobile .dr-hero::before {
  content:''; position:absolute;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  top:-80px; right:-60px;
}
.pos-retail-mobile .dr-hero__label {
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  opacity:0.85;
  position:relative; z-index:1;
}
.pos-retail-mobile .dr-hero__value {
  font-size:40px; font-weight:700;
  letter-spacing:-0.02em;
  margin:6px 0 var(--s2);
  position:relative; z-index:1;
}
.pos-retail-mobile .dr-hero__trend {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px;
  background:rgba(255,255,255,0.2);
  border-radius:var(--r-pill);
  font-size:var(--fs-body-12); font-weight:600;
  position:relative; z-index:1;
}

/* 2×2 KPI grid */
.pos-retail-mobile .dr-kpis {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--s2);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .dr-kpi {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3);
}
.pos-retail-mobile .dr-kpi__label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.pos-retail-mobile .dr-kpi__value { font-size:var(--fs-h3); font-weight:700; margin-top:4px; color:var(--content-main); line-height:1.1; }
.pos-retail-mobile .dr-kpi__sub { font-size:11px; color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .dr-kpi--warn .dr-kpi__value { color:var(--warning-500); }
.pos-retail-mobile .dr-kpi--danger .dr-kpi__value { color:var(--danger-500); }

/* Section header */
.pos-retail-mobile .dr-section { margin-bottom:var(--s5); }
.pos-retail-mobile .dr-section__head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--s3);
}
.pos-retail-mobile .dr-section__title {
  font-size:var(--fs-body-12); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
  margin:0;
}
.pos-retail-mobile .dr-section__action {
  font-size:var(--fs-body-12); font-weight:600;
  color:var(--accent-500);
}

/* Hourly bar chart */
.pos-retail-mobile .dr-chart {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3);
}
.pos-retail-mobile .dr-chart__bars {
  display:flex; align-items:flex-end; gap:6px;
  height:120px;
  padding-bottom:var(--s4);
  position:relative;
}
.pos-retail-mobile .dr-bar {
  flex:1;
  background:linear-gradient(to top, var(--accent-500), #74B9FF);
  border-radius:3px 3px 0 0;
  min-height:4px;
  position:relative;
  cursor:pointer;
  transition:opacity 120ms ease;
}
.pos-retail-mobile .dr-bar:hover { opacity:0.8; }
.pos-retail-mobile .dr-bar.is-peak {
  background:linear-gradient(to top, var(--success-500), var(--success-300));
}
.pos-retail-mobile .dr-bar__label {
  position:absolute;
  top:calc(100% + 4px); left:50%;
  transform:translateX(-50%);
  font-size:10px; color:var(--content-sub);
  white-space:nowrap;
}
.pos-retail-mobile .dr-bar__tooltip {
  position:absolute;
  bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:var(--content-main); color:var(--mono-white);
  padding:4px 8px; border-radius:var(--r-sm);
  font-size:11px; white-space:nowrap; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity 120ms ease;
}
.pos-retail-mobile .dr-bar:hover .dr-bar__tooltip { opacity:1; }
.pos-retail-mobile .dr-chart__meta {
  display:flex; justify-content:space-between;
  padding-top:var(--s3);
  border-top:1px dashed var(--border-divider);
  margin-top:var(--s3);
  font-size:11px; color:var(--content-sub);
}

/* Payment methods / category rows */
.pos-retail-mobile .dr-bar-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .dr-bar-row:last-child { border-bottom:0; }
.pos-retail-mobile .dr-bar-row__icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .dr-bar-row__info { flex:1; min-width:0; }
.pos-retail-mobile .dr-bar-row__head {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s2);
}
.pos-retail-mobile .dr-bar-row__name { font-size:var(--fs-body-14); font-weight:600; }
.pos-retail-mobile .dr-bar-row__value { font-size:var(--fs-body-14); font-weight:700; }
.pos-retail-mobile .dr-bar-row__count { font-size:11px; color:var(--content-sub); }
.pos-retail-mobile .dr-bar-row__progress {
  height:6px; background:var(--neutral-100);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-top:6px;
}
.pos-retail-mobile .dr-bar-row__fill {
  height:100%;
  border-radius:var(--r-pill);
  transition:width 200ms ease;
}

/* Top items list */
.pos-retail-mobile .dr-top-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) 0;
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .dr-top-row:last-child { border-bottom:0; }
.pos-retail-mobile .dr-top-row__rank {
  width:24px; height:24px; border-radius:50%;
  background:var(--neutral-100); color:var(--content-sub);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  flex-shrink:0;
}
.pos-retail-mobile .dr-top-row__rank.is-podium { background:var(--warning-100); color:var(--warning-500); }
.pos-retail-mobile .dr-top-row__art {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .dr-top-row__name { flex:1; font-size:var(--fs-body-14); font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .dr-top-row__qty {
  background:var(--accent-50); color:var(--accent-500);
  padding:2px 8px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700;
  flex-shrink:0;
}
.pos-retail-mobile .dr-top-row__rev { font-size:var(--fs-body-14); font-weight:700; flex-shrink:0; }

/* Reconciliation summary */
.pos-retail-mobile .dr-recon {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
}
.pos-retail-mobile .dr-recon__row {
  display:flex; justify-content:space-between;
  padding:6px 0;
  font-size:var(--fs-body-14);
}
.pos-retail-mobile .dr-recon__row span { color:var(--content-sub); }
.pos-retail-mobile .dr-recon__row strong { color:var(--content-main); font-weight:700; }
.pos-retail-mobile .dr-recon__row--credit strong { color:var(--success-500); }
.pos-retail-mobile .dr-recon__row--debit strong { color:var(--danger-500); }
.pos-retail-mobile .dr-recon__row--grand {
  border-top:1px solid var(--border-divider);
  padding-top:var(--s2); margin-top:6px;
  font-size:var(--fs-body-16);
  font-weight:700;
}
.pos-retail-mobile .dr-recon__row--grand strong { font-size:var(--fs-body-18); }

/* ============================================================
   Customers view
   ============================================================ */
.pos-retail-mobile .cust-summary {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
}
.pos-retail-mobile .cust-summary__stat { text-align:center; }
.pos-retail-mobile .cust-summary__value { font-size:var(--fs-body-18); font-weight:700; color:var(--content-main); line-height:1.1; }
.pos-retail-mobile .cust-summary__label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }

.pos-retail-mobile .cust-filters {
  display:flex; gap:var(--s2);
  padding:var(--s3) var(--s4) var(--s2);
  overflow-x:auto;
  scrollbar-width:none;
  flex-shrink:0;
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .cust-filters::-webkit-scrollbar { display:none; }

.pos-retail-mobile .cust-search {
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
}

.pos-retail-mobile .cust-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .cust-row:hover { border-color:var(--accent-300); }
.pos-retail-mobile .cust-row:active { background:var(--neutral-50); }
.pos-retail-mobile .cust-row__avatar {
  width:48px; height:48px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-body-16);
  flex-shrink:0; position:relative;
}
.pos-retail-mobile .cust-row__tier {
  position:absolute; bottom:-2px; right:-2px;
  font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:var(--r-pill);
  border:2px solid var(--theme-surface);
  letter-spacing:0.04em;
}
.pos-retail-mobile .cust-row__body { flex:1; min-width:0; }
.pos-retail-mobile .cust-row__name {
  font-size:var(--fs-body-16); font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .cust-row__contact {
  font-size:var(--fs-body-12); color:var(--content-sub);
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .cust-row__stats {
  font-size:11px; color:var(--content-sub);
  margin-top:2px;
}
.pos-retail-mobile .cust-row__right { text-align:right; flex-shrink:0; }
.pos-retail-mobile .cust-row__spent { font-size:var(--fs-body-16); font-weight:700; color:var(--content-main); }
.pos-retail-mobile .cust-row__points {
  font-size:11px; color:var(--warning-500); font-weight:700;
  margin-top:2px;
  display:inline-flex; align-items:center; gap:3px;
}

/* Customer detail sheet */
.pos-retail-mobile .cd-detail__head {
  text-align:center;
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--border-modal);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .cd-detail__avatar-wrap {
  display:flex; justify-content:center;
  margin-bottom:var(--s2);
}
.pos-retail-mobile .cd-detail__avatar {
  width:72px; height:72px; border-radius:50%;
  background:var(--accent-500); color:var(--mono-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:24px;
}
.pos-retail-mobile .cd-detail__name { font-size:var(--fs-h3); font-weight:700; margin:0; }
.pos-retail-mobile .cd-detail__joined { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:4px; }
.pos-retail-mobile .cd-detail__tier-row {
  display:flex; justify-content:center; gap:var(--s2);
  margin-top:var(--s2);
  align-items:center;
}
.pos-retail-mobile .tier-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
}

.pos-retail-mobile .cd-detail__metrics {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s2);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .cd-metric {
  background:var(--neutral-50);
  border-radius:var(--r-md);
  padding:var(--s3);
  text-align:center;
}
.pos-retail-mobile .cd-metric__value { font-size:var(--fs-body-18); font-weight:700; color:var(--content-main); line-height:1.1; }
.pos-retail-mobile .cd-metric__label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }

.pos-retail-mobile .cd-detail__orders-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s2) 0;
  font-size:var(--fs-body-14);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .cd-detail__orders-row:last-child { border-bottom:0; }
.pos-retail-mobile .cd-detail__order-id { font-weight:700; color:var(--accent-500); }
.pos-retail-mobile .cd-detail__order-time { font-size:11px; color:var(--content-sub); }
.pos-retail-mobile .cd-detail__order-amount { font-weight:600; }

.pos-retail-mobile .cd-detail__note {
  padding:var(--s3);
  background:var(--warning-50);
  border-left:3px solid var(--warning-500);
  border-radius:var(--r-sm);
  font-size:var(--fs-body-14);
  color:var(--content-main);
}

/* ============================================================
   Inventory view
   ============================================================ */
.pos-retail-mobile .inv-summary {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-canvas);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
}
.pos-retail-mobile .inv-stat {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  padding:var(--s3);
}
.pos-retail-mobile .inv-stat__label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; }
.pos-retail-mobile .inv-stat__value { font-size:var(--fs-h3); font-weight:700; margin-top:4px; color:var(--content-main); }
.pos-retail-mobile .inv-stat__sub   { font-size:11px; color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .inv-stat--alert .inv-stat__value { color:var(--warning-500); }
.pos-retail-mobile .inv-stat--danger .inv-stat__value { color:var(--danger-500); }

.pos-retail-mobile .inv-filters {
  display:flex; gap:var(--s2);
  padding:var(--s3) var(--s4);
  overflow-x:auto;
  scrollbar-width:none;
  flex-shrink:0;
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .inv-filters::-webkit-scrollbar { display:none; }

.pos-retail-mobile .inv-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .inv-row:hover { border-color:var(--accent-300); }
.pos-retail-mobile .inv-row:active { transform:scale(0.99); background:var(--neutral-50); }
.pos-retail-mobile .inv-row.is-low    { border-left:4px solid var(--warning-500); }
.pos-retail-mobile .inv-row.is-out    { border-left:4px solid var(--danger-500); }
.pos-retail-mobile .inv-row__art {
  width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .inv-row__body { flex:1; min-width:0; }
.pos-retail-mobile .inv-row__name { font-size:var(--fs-body-16); font-weight:600; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .inv-row__sku { font-size:10px; font-family:'Inter', monospace; color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .inv-row__right { text-align:right; flex-shrink:0; }
.pos-retail-mobile .inv-row__stock { font-size:var(--fs-body-16); font-weight:700; color:var(--content-main); }
.pos-retail-mobile .inv-row__stock-label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; }
.pos-retail-mobile .inv-row__value { font-size:11px; color:var(--content-sub); margin-top:4px; }

/* Inventory detail sheet — stock adjust */
.pos-retail-mobile .inv-detail__head {
  display:flex; align-items:center; gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--border-modal);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .inv-detail__art {
  width:56px; height:56px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pos-retail-mobile .inv-detail__name { font-size:var(--fs-body-18); font-weight:700; margin:0; }
.pos-retail-mobile .inv-detail__sku { font-family:'Inter', monospace; font-size:11px; color:var(--content-sub); margin-top:4px; }

.pos-retail-mobile .inv-current {
  background:linear-gradient(135deg, var(--accent-50), var(--accent-100));
  border-radius:var(--r-md);
  padding:var(--s4);
  text-align:center;
  margin-bottom:var(--s4);
}
.pos-retail-mobile .inv-current__label { font-size:10px; color:var(--accent-500); text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }
.pos-retail-mobile .inv-current__value {
  font-size:40px; font-weight:700;
  color:var(--accent-500); letter-spacing:-0.02em;
  margin:var(--s2) 0;
  line-height:1;
}
.pos-retail-mobile .inv-current__unit { font-size:var(--fs-body-14); color:var(--accent-500); opacity:0.85; }

.pos-retail-mobile .inv-adjust__title {
  font-size:var(--fs-body-12); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
  margin-bottom:var(--s2);
}
.pos-retail-mobile .inv-adjust__row {
  display:flex; align-items:center; gap:var(--s2);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .inv-adjust__btn {
  flex:1;
  height:48px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-main);
  font-size:var(--fs-body-16); font-weight:700;
  border:1px solid transparent;
  transition:all 120ms ease;
}
.pos-retail-mobile .inv-adjust__btn:hover { background:var(--neutral-200); }
.pos-retail-mobile .inv-adjust__btn--positive { background:var(--success-50); color:var(--success-500); }
.pos-retail-mobile .inv-adjust__btn--positive:hover { background:var(--success-100); }
.pos-retail-mobile .inv-adjust__btn--negative { background:var(--danger-50); color:var(--danger-500); }
.pos-retail-mobile .inv-adjust__btn--negative:hover { background:var(--danger-100); }

.pos-retail-mobile .inv-pending {
  background:var(--warning-50);
  border:1px solid var(--warning-100);
  border-radius:var(--r-md);
  padding:var(--s2) var(--s4);
  margin-bottom:var(--s3);
  display:flex; justify-content:space-between; align-items:center;
}
.pos-retail-mobile .inv-pending__label { font-size:var(--fs-body-12); color:var(--warning-500); font-weight:600; }
.pos-retail-mobile .inv-pending__value { font-weight:700; color:var(--warning-500); }
.pos-retail-mobile .inv-pending.is-hidden { display:none; }

.pos-retail-mobile .inv-mvmt {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s2) 0;
  font-size:var(--fs-body-12);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .inv-mvmt:last-child { border-bottom:0; }
.pos-retail-mobile .inv-mvmt__delta {
  font-weight:700; font-family:'Inter', monospace;
  min-width:40px; text-align:right;
}
.pos-retail-mobile .inv-mvmt__delta--in  { color:var(--success-500); }
.pos-retail-mobile .inv-mvmt__delta--out { color:var(--danger-500); }
.pos-retail-mobile .inv-mvmt__reason { flex:1; padding:0 var(--s3); color:var(--content-main); }
.pos-retail-mobile .inv-mvmt__when { color:var(--content-sub); font-size:10px; }

/* ============================================================
   Stock In / Out — full-screen create form
   ============================================================ */
.pos-retail-mobile .stk-form-info {
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
}
.pos-retail-mobile .stk-form-info__toggle {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:var(--s3) var(--s4);
  background:transparent; border:0;
  cursor:pointer;
}
.pos-retail-mobile .stk-form-info__title {
  font-size:var(--fs-body-14); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
}
.pos-retail-mobile .stk-form-info__chev {
  color:var(--content-sub);
  transition:transform 180ms ease;
}
.pos-retail-mobile .stk-form-info__toggle.is-open .stk-form-info__chev { transform:rotate(180deg); }

.pos-retail-mobile .stk-meta {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:var(--s2);
  padding:0 var(--s4) var(--s3);
}
.pos-retail-mobile .stk-meta__item {}
.pos-retail-mobile .stk-meta__label { font-size:10px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.pos-retail-mobile .stk-meta__value {
  font-size:var(--fs-body-14); font-weight:700;
  color:var(--content-main);
  margin-top:2px;
  font-family:'Inter', monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .stk-meta__pill {
  display:inline-flex; align-items:center;
  padding:3px 10px;
  background:var(--neutral-100); color:var(--content-sub);
  border-radius:var(--r-pill);
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  margin-top:2px;
}

.pos-retail-mobile .stk-form-info__fields {
  padding:0 var(--s4) var(--s3);
}

/* Locked input (read-only with lock icon) */
.pos-retail-mobile .form-locked {
  display:flex; align-items:center;
  height:44px; padding:0 var(--s3);
  background:var(--neutral-50);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  color:var(--content-main);
}
.pos-retail-mobile .form-locked__value { flex:1; font-size:var(--fs-body-16); font-weight:600; }
.pos-retail-mobile .form-locked__icon { color:var(--content-placeholder); flex-shrink:0; }

/* Form select (dropdown-like field — opens sheetSelect) */
.pos-retail-mobile .form-select {
  display:flex; align-items:center;
  width:100%;
  height:44px; padding:0 var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  text-align:left;
  cursor:pointer;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .form-select:hover { border-color:var(--accent-300); }
.pos-retail-mobile .form-select__value {
  flex:1; font-size:var(--fs-body-16); color:var(--content-main);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .form-select__value--placeholder { color:var(--content-placeholder); }
.pos-retail-mobile .form-select__chev { color:var(--content-sub); flex-shrink:0; margin-left:var(--s2); }

/* Items header inside form */
.pos-retail-mobile .stk-items-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4) var(--s2);
}
.pos-retail-mobile .stk-items-head__title { font-size:var(--fs-body-18); font-weight:700; }
.pos-retail-mobile .stk-items-head__hint { font-size:var(--fs-body-12); color:var(--content-sub); padding:0 var(--s4) var(--s2); }

.pos-retail-mobile .stk-search-row {
  display:flex; gap:var(--s2);
  padding:0 var(--s4) var(--s3);
}
.pos-retail-mobile .stk-search-row .search { flex:1; }
.pos-retail-mobile .stk-scan-btn {
  flex-shrink:0;
  width:44px; height:40px;
  background:var(--accent-500); color:var(--mono-white);
  border:0; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.pos-retail-mobile .stk-scan-btn:hover { background:var(--accent-400); }

/* Stock line item (rich version with photo + unit + qty + delete) */
.pos-retail-mobile .stk-line {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin:0 var(--s4) var(--s2);
  overflow:hidden;
}
.pos-retail-mobile .stk-line__head {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
}
.pos-retail-mobile .stk-line__num {
  font-family:'Inter', monospace; font-weight:700;
  font-size:11px; color:var(--content-sub);
  width:20px; text-align:center;
  flex-shrink:0;
}
.pos-retail-mobile .stk-line__art {
  width:44px; height:44px; border-radius:var(--r-sm);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  flex-shrink:0;
}
.pos-retail-mobile .stk-line__body { flex:1; min-width:0; }
.pos-retail-mobile .stk-line__name {
  font-size:var(--fs-body-14); font-weight:700; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-retail-mobile .stk-line__meta {
  font-size:11px; color:var(--content-sub);
  margin-top:2px;
  font-family:'Inter', monospace;
}
.pos-retail-mobile .stk-line__controls {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3) var(--s3);
  border-top:1px solid var(--border-modal);
  background:var(--neutral-50);
}
.pos-retail-mobile .stk-line__unit {
  display:flex; align-items:center; gap:4px;
  flex:1; min-width:0;
}
.pos-retail-mobile .stk-line__unit-label {
  font-size:11px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; font-weight:600;
}
.pos-retail-mobile .stk-line__unit-select {
  flex:1;
  height:32px; padding:0 var(--s2);
  font-size:var(--fs-body-14); font-weight:600;
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:4px;
}
.pos-retail-mobile .stk-line__qty-label {
  font-size:11px; color:var(--content-sub); text-transform:uppercase; letter-spacing:0.04em; font-weight:600;
}
.pos-retail-mobile .stk-line__qty-input {
  width:60px; height:32px; padding:0 var(--s2);
  text-align:center;
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  font-size:var(--fs-body-14); font-weight:700;
  background:var(--theme-surface);
  outline:0;
}
.pos-retail-mobile .stk-line__qty-input:focus { border-color:var(--accent-500); }
.pos-retail-mobile .stk-line__remove {
  width:40px; height:40px; border-radius:50%;
  background:transparent; color:var(--danger-500);
  border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
}
.pos-retail-mobile .stk-line__remove::after { content:''; position:absolute; inset:-4px; }
.pos-retail-mobile .stk-line__remove:hover  { background:var(--danger-50); }
.pos-retail-mobile .stk-line__remove:active { background:var(--danger-100); transform:scale(0.92); }

.pos-retail-mobile .stk-add-btn {
  margin:var(--s3) var(--s4) var(--s3);
  display:flex; align-items:center; justify-content:center;
  gap:var(--s2);
  height:48px;
  background:var(--accent-50);
  color:var(--accent-500);
  border:1px dashed var(--accent-300);
  border-radius:var(--r-md);
  font-weight:700; font-size:var(--fs-body-14);
  cursor:pointer;
  width:calc(100% - var(--s4) * 2);
  transition:all 120ms ease;
}
.pos-retail-mobile .stk-add-btn:hover { background:var(--accent-100); border-style:solid; }

.pos-retail-mobile .stk-total-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s3) var(--s4);
  background:var(--neutral-50);
  border-top:1px solid var(--border-modal);
  font-size:var(--fs-body-14);
}
.pos-retail-mobile .stk-total-bar__label { color:var(--content-sub); font-weight:500; }
.pos-retail-mobile .stk-total-bar__value { font-weight:700; color:var(--content-main); }

.pos-retail-mobile .stk-form-actions {
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border-top:1px solid var(--border-modal);
  flex-shrink:0;
  box-shadow:0 -4px 16px rgba(25,25,25,0.06);
}

/* Generic select sheet (for dropdowns inside form) */
.pos-retail-mobile .select-list { max-height:380px; overflow-y:auto; }
.pos-retail-mobile .select-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:transparent;
  border:0; border-bottom:1px solid var(--border-modal);
  width:100%;
  cursor:pointer;
  text-align:left;
  transition:background 120ms ease;
}
.pos-retail-mobile .select-row:hover { background:var(--neutral-50); }
.pos-retail-mobile .select-row.is-selected { background:var(--accent-50); }
.pos-retail-mobile .select-row__label { flex:1; font-size:var(--fs-body-16); color:var(--content-main); font-weight:500; }
.pos-retail-mobile .select-row.is-selected .select-row__label { color:var(--accent-500); font-weight:700; }
.pos-retail-mobile .select-row__check { color:var(--accent-500); flex-shrink:0; }

/* Inventory mode tabs (Stock / Stock In / Stock Out) */
.pos-retail-mobile .inv-modes {
  display:flex;
  background:var(--theme-surface);
  border-bottom:1px solid var(--border-modal);
  flex-shrink:0;
  padding:0;
}
.pos-retail-mobile .inv-modes__tab {
  flex:1;
  padding:var(--s3) var(--s2);
  background:transparent; border:0;
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--content-sub);
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:color 120ms ease, border-color 120ms ease;
}
.pos-retail-mobile .inv-modes__tab:hover { color:var(--content-main); }
.pos-retail-mobile .inv-modes__tab.is-active {
  color:var(--accent-500);
  border-bottom-color:var(--accent-500);
}

/* Stock document rows */
.pos-retail-mobile .doc-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s2);
  cursor:pointer;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .doc-row:hover { border-color:var(--accent-300); }
.pos-retail-mobile .doc-row__info { flex:1; min-width:0; }
.pos-retail-mobile .doc-row__head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:4px;
}
.pos-retail-mobile .doc-row__id { font-size:var(--fs-body-16); font-weight:700; color:var(--content-main); font-family:'Inter', monospace; }
.pos-retail-mobile .doc-row__date { font-size:var(--fs-body-12); color:var(--content-sub); }
.pos-retail-mobile .doc-row__sub {
  display:flex; align-items:center;
  gap:var(--s2); flex-wrap:wrap;
  font-size:var(--fs-body-12);
  color:var(--content-sub);
  margin-bottom:4px;
}
.pos-retail-mobile .doc-row__meta { font-size:11px; color:var(--content-sub); }
.pos-retail-mobile .doc-row__total {
  font-size:var(--fs-body-16); font-weight:700;
  margin-left:var(--s2); flex-shrink:0;
  color:var(--content-main);
}
.pos-retail-mobile .doc-row__total--in  { color:var(--success-500); }
.pos-retail-mobile .doc-row__total--out { color:var(--danger-500); }

/* Doc detail status banner */
.pos-retail-mobile .doc-status-banner {
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  margin-bottom:var(--s3);
  display:flex; align-items:center; gap:var(--s3);
}
.pos-retail-mobile .doc-status-banner__icon {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pos-retail-mobile .doc-status-banner__body { flex:1; min-width:0; }
.pos-retail-mobile .doc-status-banner__title { font-size:var(--fs-body-14); font-weight:700; margin:0; }
.pos-retail-mobile .doc-status-banner__sub { font-size:var(--fs-body-12); margin-top:2px; }

/* Doc line items in create/detail */
.pos-retail-mobile .doc-line {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-sm);
  margin-bottom:var(--s2);
}
.pos-retail-mobile .doc-line__art {
  width:36px; height:36px; border-radius:var(--r-sm);
  background-size:cover; background-position:center;
  flex-shrink:0;
}
.pos-retail-mobile .doc-line__body { flex:1; min-width:0; }
.pos-retail-mobile .doc-line__name { font-size:var(--fs-body-14); font-weight:600; margin:0;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-retail-mobile .doc-line__meta { font-size:11px; color:var(--content-sub); margin-top:2px;
                  font-family:'Inter', monospace; }
.pos-retail-mobile .doc-line__qty {
  display:inline-flex; align-items:center; gap:6px;
}
.pos-retail-mobile .doc-line__qty button {
  width:28px; height:28px; border-radius:var(--r-sm);
  background:var(--neutral-100); color:var(--content-main);
  border:0;
  font-weight:700;
}
.pos-retail-mobile .doc-line__qty span {
  min-width:24px; text-align:center; font-weight:700; font-size:var(--fs-body-14);
}
.pos-retail-mobile .doc-line__remove {
  width:36px; height:36px; border-radius:50%;
  background:var(--danger-50); color:var(--danger-500);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer;
  flex-shrink:0;
  position:relative;
}
.pos-retail-mobile .doc-line__remove::after { content:''; position:absolute; inset:-4px; }
.pos-retail-mobile .doc-line__remove:active { background:var(--danger-100); transform:scale(0.92); }

/* Add item picker — inline simple list */
.pos-retail-mobile .doc-picker {
  background:var(--neutral-50);
  border:1px dashed var(--border-divider);
  border-radius:var(--r-md);
  padding:var(--s3);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .doc-picker__title {
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  font-weight:700; color:var(--content-sub);
  margin-bottom:var(--s2);
}

/* ============================================================
   Staff Permissions — role chip selector + permission matrix
   ============================================================ */
.pos-retail-mobile .perm-tabs {
  display:flex;
  background:var(--neutral-100);
  padding:4px;
  border-radius:var(--r-sm);
  gap:2px;
  margin-bottom:var(--s4);
}
.pos-retail-mobile .perm-tabs__btn {
  flex:1;
  padding:8px var(--s2);
  border:0; background:transparent;
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--content-sub);
  border-radius:4px;
  cursor:pointer;
}
.pos-retail-mobile .perm-tabs__btn.is-active {
  background:var(--theme-surface);
  color:var(--content-main);
  box-shadow:var(--shadow-sm);
}

.pos-retail-mobile .role-chips {
  display:flex; gap:var(--s2);
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:var(--s3);
}
.pos-retail-mobile .role-chips::-webkit-scrollbar { display:none; }
.pos-retail-mobile .role-chip {
  display:inline-flex; align-items:center; gap:var(--s2);
  height:44px; padding:0 var(--s3);
  border-radius:var(--r-pill);
  background:var(--theme-surface);
  border:1.5px solid var(--border-divider);
  font-size:var(--fs-body-14); font-weight:600;
  color:var(--content-main);
  white-space:nowrap;
  flex-shrink:0;
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .role-chip__dot {
  width:8px; height:8px; border-radius:50%;
}
.pos-retail-mobile .role-chip__count {
  font-size:11px; color:var(--content-sub); font-weight:500;
}
.pos-retail-mobile .role-chip.is-selected {
  border-color:var(--accent-500);
  background:var(--accent-50);
}

.pos-retail-mobile .perm-group { margin-bottom:var(--s4); }
.pos-retail-mobile .perm-group__title {
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  font-weight:700; color:var(--content-sub);
  margin-bottom:var(--s2);
  padding:0 var(--s2);
}

.pos-retail-mobile .perm-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  margin-bottom:6px;
  border-radius:var(--r-sm);
}
.pos-retail-mobile .perm-row__body { flex:1; min-width:0; }
.pos-retail-mobile .perm-row__name { font-size:var(--fs-body-14); font-weight:600; color:var(--content-main); }
.pos-retail-mobile .perm-row__meta {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--content-sub);
  margin-top:3px;
}
.pos-retail-mobile .perm-row__lock {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 6px;
  background:var(--warning-50); color:var(--warning-500);
  border-radius:var(--r-pill);
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
}
.pos-retail-mobile .perm-row__lock svg { width:10px; height:10px; }

/* ============================================================
   History Detail view
   ============================================================ */
.pos-retail-mobile .detail__hero {
  background:var(--theme-surface);
  border-radius:var(--r-md);
  padding:var(--s5);
  margin-bottom:var(--s3);
  border:1px solid var(--border-modal);
  text-align:center;
}
.pos-retail-mobile .detail__hero.is-voided { background:var(--neutral-50); }
.pos-retail-mobile .detail__hero-label {
  font-size:var(--fs-body-12);
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--content-sub);
  margin:0 0 var(--s2);
}
.pos-retail-mobile .detail__hero-total {
  font-size:36px; font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 var(--s3);
  color:var(--content-main);
}
.pos-retail-mobile .detail__hero.is-voided .detail__hero-total {
  color:var(--content-sub);
  text-decoration:line-through;
}
.pos-retail-mobile .detail__hero-status {
  display:flex; justify-content:center; align-items:center;
  gap:var(--s2); flex-wrap:wrap;
}
.pos-retail-mobile .detail__hero-method {
  font-size:var(--fs-body-12);
  color:var(--content-sub);
}

.pos-retail-mobile .detail-section {
  background:var(--theme-surface);
  border:1px solid var(--border-modal);
  border-radius:var(--r-md);
  margin-bottom:var(--s3);
  overflow:hidden;
}
.pos-retail-mobile .detail-section__head {
  padding:var(--s2) var(--s4);
  font-size:var(--fs-body-12);
  text-transform:uppercase; letter-spacing:0.04em;
  font-weight:600;
  color:var(--content-sub);
  border-bottom:1px solid var(--border-modal);
  background:var(--neutral-50);
}
.pos-retail-mobile .detail-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s3);
  padding:var(--s3) var(--s4);
  font-size:var(--fs-body-14);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .detail-row:last-child { border-bottom:0; }
.pos-retail-mobile .detail-row__label { color:var(--content-sub); flex-shrink:0; }
.pos-retail-mobile .detail-row__value { color:var(--content-main); font-weight:600; text-align:right; }

.pos-retail-mobile .detail-line {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border-modal);
}
.pos-retail-mobile .detail-line:last-child { border-bottom:0; }
.pos-retail-mobile .detail-line__qty {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:24px;
  background:var(--neutral-100); color:var(--content-main);
  font-weight:700; font-size:var(--fs-body-12);
  border-radius:var(--r-sm); padding:0 6px;
  flex-shrink:0;
}
.pos-retail-mobile .detail-line__info { min-width:0; }
.pos-retail-mobile .detail-line__name { font-size:var(--fs-body-14); font-weight:600; margin:0; }
.pos-retail-mobile .detail-line__meta { font-size:var(--fs-body-12); color:var(--content-sub); margin-top:2px; }
.pos-retail-mobile .detail-line__price { font-weight:600; font-size:var(--fs-body-14); }

.pos-retail-mobile .detail__actions {
  padding:var(--s4);
  display:grid; gap:var(--s2);
  background:var(--theme-surface);
  border-top:1px solid var(--border-modal);
  flex-shrink:0;
}

/* ============================================================
   Touch-friendly help system (replaces title= which doesn't work on touch)
   ============================================================ */
.pos-retail-mobile .help-trigger {
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  color:var(--content-placeholder);
  vertical-align:middle;
  cursor:pointer;
  padding:0;
  margin:0 0 0 4px;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
}
.pos-retail-mobile .help-trigger::after { content:''; position:absolute; inset:-6px; }
.pos-retail-mobile .help-trigger:hover  { color:var(--accent-500); }
.pos-retail-mobile .help-trigger:active { color:var(--accent-500); background:var(--accent-50); }

/* Help content blocks */
.pos-retail-mobile .help-body h4 {
  font-size:var(--fs-body-16); font-weight:700; margin:var(--s3) 0 var(--s2);
  color:var(--content-main);
}
.pos-retail-mobile .help-body h4:first-child { margin-top:0; }
.pos-retail-mobile .help-body p {
  font-size:var(--fs-body-14); line-height:1.5;
  color:var(--content-main); margin:0 0 var(--s2);
}
.pos-retail-mobile .help-body ul {
  margin:0 0 var(--s3); padding-left:var(--s4);
  font-size:var(--fs-body-14); line-height:1.6;
  color:var(--content-main);
}
.pos-retail-mobile .help-body li { margin-bottom:4px; }
.pos-retail-mobile .help-body strong { color:var(--content-main); font-weight:700; }
.pos-retail-mobile .help-body code {
  background:var(--neutral-100);
  padding:1px 6px; border-radius:3px;
  font-family:'Inter', monospace;
  font-size:var(--fs-body-12);
  color:var(--accent-500);
}
.pos-retail-mobile .help-callout {
  background:var(--accent-50);
  border-left:3px solid var(--accent-500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3);
  margin:var(--s3) 0;
  font-size:var(--fs-body-13);
  color:var(--content-main);
}
.pos-retail-mobile .help-callout strong { color:var(--accent-500); }
.pos-retail-mobile .help-callout--warn {
  background:var(--warning-50);
  border-left-color:var(--warning-500);
}
.pos-retail-mobile .help-callout--warn strong { color:var(--warning-500); }
.pos-retail-mobile .help-callout--danger {
  background:var(--danger-50);
  border-left-color:var(--danger-500);
}
.pos-retail-mobile .help-callout--danger strong { color:var(--danger-500); }

/* Manager PIN dots */
.pos-retail-mobile .mgr-pin-dot {
  width:16px; height:16px; border-radius:50%;
  background:transparent;
  border:2px solid var(--border-divider);
  transition:all 120ms ease;
}
.pos-retail-mobile .mgr-pin-dot.is-filled {
  background:var(--accent-500);
  border-color:var(--accent-500);
}
.pos-retail-mobile .mgr-pin-dot.is-error {
  background:var(--danger-500);
  border-color:var(--danger-500);
  animation:shake 200ms ease;
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-4px); }
  75%     { transform:translateX(4px); }
}

/* Confirm void modal */
.pos-retail-mobile .confirm-sheet {
  padding:var(--s5);
  text-align:center;
}
.pos-retail-mobile .confirm-sheet__icon {
  width:64px; height:64px; border-radius:50%;
  background:var(--danger-50); color:var(--danger-500);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--s3);
}
.pos-retail-mobile .confirm-sheet__title { font-size:var(--fs-h3); font-weight:600; margin:0 0 var(--s2); }
.pos-retail-mobile .confirm-sheet__msg { font-size:var(--fs-body-14); color:var(--content-sub); margin:0 0 var(--s5); }
.pos-retail-mobile .confirm-sheet__actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }

/* ============================================================
   Integrated Payment App flow (customer-facing terminal screens)
   ============================================================ */

/* Common back/close header */
.pos-retail-mobile .pf-head {
  padding:var(--s4) var(--s4) 0;
  display:flex; align-items:center; justify-content:space-between;
}
.pos-retail-mobile .pf-head__btn {
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  color:var(--content-sub);
  cursor:pointer;
}

/* Step 1: Tip selection */
.pos-retail-mobile .pay-tip {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-surface);
}
.pos-retail-mobile .pay-tip__title-block {
  text-align:center;
  padding:var(--s4) var(--s4) var(--s5);
}
.pos-retail-mobile .pay-tip__title { font-size:32px; font-weight:700; margin:0 0 var(--s2); letter-spacing:-0.02em; }
.pos-retail-mobile .pay-tip__bill { font-size:var(--fs-body-18); color:var(--content-main); }
.pos-retail-mobile .pay-tip__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
  padding:0 var(--s4);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .pay-tip__tile {
  background:#D6E4FF;
  border-radius:var(--r-md);
  padding:var(--s10) var(--s4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:0;
  cursor:pointer;
  transition:background 120ms ease, transform 80ms ease;
  min-height:160px;
}
.pos-retail-mobile .pay-tip__tile:hover { background:#B8CDFF; }
.pos-retail-mobile .pay-tip__tile:active { transform:scale(0.98); }
.pos-retail-mobile .pay-tip__tile-pct {
  font-size:36px; font-weight:700;
  color:var(--accent-500);
  letter-spacing:-0.02em;
}
.pos-retail-mobile .pay-tip__tile-amt {
  font-size:var(--fs-body-18); font-weight:500;
  color:var(--accent-500);
  margin-top:var(--s2);
}
.pos-retail-mobile .pay-tip__custom {
  margin:0 var(--s4) var(--s3);
  background:#D6E4FF;
  color:var(--accent-500);
  border:0;
  padding:var(--s4);
  font-size:var(--fs-body-18); font-weight:700;
  border-radius:var(--r-md);
  cursor:pointer;
}
.pos-retail-mobile .pay-tip__custom:hover { background:#B8CDFF; }
.pos-retail-mobile .pay-tip__no {
  background:transparent; color:var(--content-main);
  padding:var(--s3) var(--s4) var(--s5);
  text-align:center; font-size:var(--fs-body-18);
  border:0; cursor:pointer;
}

/* Step 2: Insert/Tap/Swipe */
.pos-retail-mobile .pay-insert {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-surface);
}
.pos-retail-mobile .pay-insert__tap {
  display:flex; flex-direction:column; align-items:center;
  padding:var(--s4) var(--s4) 0;
  gap:var(--s2);
}
.pos-retail-mobile .pay-insert__chevrons {
  display:flex; flex-direction:column; gap:2px; align-items:center;
  color:var(--accent-500);
  animation:tap-chev 1.6s ease-in-out infinite;
}
@keyframes tap-chev {
  0%, 100% { transform:translateY(0); opacity:0.6; }
  50%      { transform:translateY(-4px); opacity:1; }
}
.pos-retail-mobile .pay-insert__chevrons svg:nth-child(1) { opacity:0.3; }
.pos-retail-mobile .pay-insert__chevrons svg:nth-child(2) { opacity:0.6; }
.pos-retail-mobile .pay-insert__chevrons svg:nth-child(3) { opacity:1; }
.pos-retail-mobile .pay-insert__tap-text {
  font-size:var(--fs-body-18); font-weight:700;
  color:var(--content-main);
}
.pos-retail-mobile .pay-insert__nfc {
  width:120px; height:80px;
  display:flex; align-items:center; justify-content:center;
}
.pos-retail-mobile .pay-insert__amount-section {
  text-align:center;
  padding:var(--s6) var(--s4);
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.pos-retail-mobile .pay-insert__amount-label {
  font-size:var(--fs-body-18); color:var(--content-main);
}
.pos-retail-mobile .pay-insert__amount {
  font-size:48px; font-weight:700;
  letter-spacing:-0.03em;
  color:var(--content-main);
  margin:var(--s2) 0 var(--s2);
}
.pos-retail-mobile .pay-insert__breakdown {
  font-size:var(--fs-body-16);
  color:var(--content-sub);
}
.pos-retail-mobile .pay-insert__brands {
  display:flex; justify-content:center; align-items:center;
  gap:var(--s4);
  padding:var(--s4);
}
.pos-retail-mobile .pay-insert__brand {
  height:24px;
  display:inline-flex; align-items:center;
}
.pos-retail-mobile .pay-insert__insert {
  padding:var(--s4) var(--s4) var(--s5);
  text-align:center;
}
.pos-retail-mobile .pay-insert__insert-text {
  font-size:var(--fs-body-18); font-weight:700;
  margin-bottom:var(--s3);
}
.pos-retail-mobile .pay-insert__slot {
  width:80%; max-width:200px;
  height:60px;
  margin:0 auto;
  background:linear-gradient(180deg, #DCE9FF 0%, #B8CDFF 100%);
  border-radius:var(--r-md) var(--r-md) 0 0;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.pos-retail-mobile .pay-insert__slot::before {
  content:''; position:absolute;
  top:6px; left:10%; right:10%; height:3px;
  background:var(--accent-500); border-radius:2px;
}

/* Step 3: Processing */
.pos-retail-mobile .pay-processing-view {
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--theme-surface);
  gap:var(--s5);
  padding:var(--s4);
}
.pos-retail-mobile .pay-processing__card {
  width:240px; height:150px;
  background:linear-gradient(135deg, #74B9FF 0%, #2E70FF 100%);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(46,112,255,0.3);
}
.pos-retail-mobile .pay-processing__card::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px);
  animation:card-shimmer 2s linear infinite;
}
@keyframes card-shimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.pos-retail-mobile .pay-processing__chip {
  position:absolute;
  top:var(--s4); left:var(--s4);
  width:40px; height:32px;
  background:rgba(255,255,255,0.9);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.pos-retail-mobile .pay-processing__chip svg { width:24px; height:20px; color:#2E70FF; }
.pos-retail-mobile .pay-processing__shimmer-top {
  position:absolute;
  top:-8px; left:0; right:0;
  height:8px;
  background:repeating-linear-gradient(90deg, #DDD 0, #DDD 4px, transparent 4px, transparent 8px);
  animation:shimmer-pixel 0.8s linear infinite;
}
.pos-retail-mobile .pay-processing__shimmer-bottom {
  position:absolute;
  bottom:-12px; left:0; right:0;
  height:8px;
  background:linear-gradient(90deg, transparent 0%, var(--success-500) 40%, var(--warning-500) 80%, transparent 100%);
}
.pos-retail-mobile .pay-processing__shimmer-side {
  position:absolute;
  top:50%; left:-20px;
  width:30px; height:4px;
  background:linear-gradient(90deg, transparent 0%, var(--warning-500) 50%, transparent 100%);
}
.pos-retail-mobile .pay-processing__shimmer-side2 {
  position:absolute;
  top:60%; left:-20px;
  width:30px; height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--accent-300) 50%, transparent 100%);
}
@keyframes shimmer-pixel {
  0%, 100% { opacity:0.3; }
  50%      { opacity:1; }
}
.pos-retail-mobile .pay-processing__dots {
  display:flex; gap:8px;
  margin-top:var(--s5);
}
.pos-retail-mobile .pay-processing__dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-100);
  transition:background 200ms ease;
}
.pos-retail-mobile .pay-processing__dot.is-on { background:var(--accent-500); }
.pos-retail-mobile .pay-processing__label {
  font-size:28px; font-weight:700;
  color:var(--content-main);
  margin-top:var(--s4);
}

/* Step 4: Remove card */
.pos-retail-mobile .pay-remove {
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--theme-surface);
  padding:var(--s4);
  gap:var(--s5);
}
.pos-retail-mobile .pay-remove__label {
  font-size:36px; font-weight:700;
  text-align:center;
  letter-spacing:-0.02em;
  color:var(--content-main);
  line-height:1.2;
}
.pos-retail-mobile .pay-remove__chevrons {
  display:flex; flex-direction:column; gap:2px; align-items:center;
  color:var(--accent-400);
  margin-top:var(--s8);
}
.pos-retail-mobile .pay-remove__chevrons svg { animation:remove-chev 1.6s ease-in-out infinite; }
.pos-retail-mobile .pay-remove__chevrons svg:nth-child(1) { opacity:1; animation-delay:0s; }
.pos-retail-mobile .pay-remove__chevrons svg:nth-child(2) { opacity:0.6; animation-delay:0.2s; }
.pos-retail-mobile .pay-remove__chevrons svg:nth-child(3) { opacity:0.3; animation-delay:0.4s; }
@keyframes remove-chev {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(4px); }
}
.pos-retail-mobile .pay-remove__card {
  width:200px; height:200px;
  background:linear-gradient(135deg, #74B9FF, #2E70FF);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.pos-retail-mobile .pay-remove__card::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px);
}
.pos-retail-mobile .pay-remove__card svg { color:white; width:60px; height:60px; position:relative; z-index:1; }

/* Step 5: Signature */
.pos-retail-mobile .pay-signature {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-surface);
}
.pos-retail-mobile .pay-signature__head {
  text-align:center;
  padding:var(--s4);
}
.pos-retail-mobile .pay-signature__label {
  font-size:var(--fs-body-18);
  color:var(--content-main);
  margin:0 0 var(--s2);
}
.pos-retail-mobile .pay-signature__amount {
  font-size:32px; font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 var(--s2);
}
.pos-retail-mobile .pay-signature__breakdown {
  font-size:var(--fs-body-16);
  color:var(--content-sub);
  margin:0;
}
.pos-retail-mobile .pay-signature__canvas-wrap {
  flex:1;
  margin:var(--s3) var(--s4);
  background:var(--neutral-50);
  border-radius:var(--r-md);
  display:flex; flex-direction:column;
  position:relative;
}
.pos-retail-mobile .pay-signature__prompt {
  padding:var(--s3);
  text-align:center;
  font-size:var(--fs-body-14);
  color:var(--content-sub);
  flex-shrink:0;
}
.pos-retail-mobile .pay-signature__canvas {
  flex:1;
  width:100%;
  cursor:crosshair;
  touch-action:none;
}
.pos-retail-mobile .pay-signature__actions {
  display:grid; grid-template-columns:1fr 2fr; gap:var(--s2);
  padding:var(--s4);
}

/* Step 6: Payment successful (full green flash) */
.pos-retail-mobile .pay-success-flash {
  height:100%;
  background:var(--success-500);
  color:var(--mono-white);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--s4);
}
.pos-retail-mobile .pay-success-flash__check {
  width:140px; height:140px; border-radius:50%;
  border:6px solid rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s5);
  animation:pop-in 400ms cubic-bezier(.2,.7,.2,1);
}
@keyframes pop-in {
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.1); }
  100% { transform:scale(1); opacity:1; }
}
.pos-retail-mobile .pay-success-flash__check svg { color:white; width:80px; height:80px; }
.pos-retail-mobile .pay-success-flash__text {
  font-size:42px; font-weight:700;
  text-align:center;
  letter-spacing:-0.02em;
  line-height:1.1;
}

/* Step 7: Loyalty phone capture */
.pos-retail-mobile .pay-loyalty {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-surface);
  padding:var(--s4);
}
.pos-retail-mobile .pay-loyalty__title-block {
  text-align:center;
  padding:var(--s4) 0 var(--s5);
}
.pos-retail-mobile .pay-loyalty__title {
  font-size:24px; font-weight:700;
  margin:0; letter-spacing:-0.01em;
  line-height:1.3;
}
.pos-retail-mobile .pay-loyalty__points {
  color:var(--success-500);
}
.pos-retail-mobile .pay-loyalty__phone {
  text-align:center;
  font-size:36px; font-weight:700;
  letter-spacing:-0.01em;
  margin:var(--s4) 0 var(--s5);
  min-height:48px;
}
.pos-retail-mobile .pay-loyalty__placeholder { color:var(--content-placeholder); font-weight:500; }
.pos-retail-mobile .pay-loyalty__keypad {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s3);
  margin-bottom:var(--s4);
}
.pos-retail-mobile .pay-loyalty__keypad button {
  height:64px;
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-md);
  font-size:28px; font-weight:600;
  color:var(--content-main);
  cursor:pointer;
  transition:background 80ms ease;
}
.pos-retail-mobile .pay-loyalty__keypad button:active { background:var(--neutral-100); }
.pos-retail-mobile .pay-loyalty__actions {
  display:grid; grid-template-columns:1fr 2fr; gap:var(--s2);
  padding-top:var(--s2);
}

/* Step 8: Receipt selection with confetti */
.pos-retail-mobile .pay-receipt {
  height:100%;
  display:flex; flex-direction:column;
  background:var(--theme-surface);
  padding:var(--s4);
  position:relative;
  overflow:hidden;
}
.pos-retail-mobile .pay-receipt__head {
  text-align:center;
  padding:var(--s5) 0 var(--s4);
  position:relative; z-index:1;
}
.pos-retail-mobile .pay-receipt__check {
  width:64px; height:64px;
  border-radius:50%;
  background:var(--success-500);
  color:white;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:var(--s2);
}
.pos-retail-mobile .pay-receipt__complete {
  font-size:var(--fs-body-16);
  color:var(--content-main);
  margin:0;
}
.pos-retail-mobile .pay-receipt__earned {
  font-size:36px; font-weight:700;
  text-align:center;
  letter-spacing:-0.02em;
  margin:var(--s4) 0 var(--s8);
  line-height:1.2;
}
.pos-retail-mobile .pay-receipt__earned-label {
  font-size:24px; font-weight:600;
  display:block;
}
.pos-retail-mobile .pay-receipt__divider {
  display:flex; align-items:center;
  font-size:var(--fs-body-16);
  color:var(--content-main);
  margin:var(--s4) 0;
}
.pos-retail-mobile .pay-receipt__divider::before,
.pos-retail-mobile .pay-receipt__divider::after {
  content:''; flex:1; height:1px;
  background:var(--border-divider);
}
.pos-retail-mobile .pay-receipt__divider span { padding:0 var(--s3); }
.pos-retail-mobile .pay-receipt__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
}
.pos-retail-mobile .pay-receipt__tile {
  height:110px;
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-md);
  font-size:var(--fs-body-18); font-weight:700;
  cursor:pointer;
  transition:all 120ms ease;
}
.pos-retail-mobile .pay-receipt__tile:hover {
  border-color:var(--accent-500);
  background:var(--accent-50);
  color:var(--accent-500);
}

/* Confetti */
.pos-retail-mobile .confetti {
  position:absolute; top:0; left:0; right:0; height:60%;
  pointer-events:none;
  overflow:hidden;
}
.pos-retail-mobile .confetti__bit {
  position:absolute;
  width:8px; height:8px;
  opacity:0;
  animation:confetti-fall 3s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { opacity:0; transform:translateY(-20px) rotate(0); }
  10%  { opacity:1; }
  100% { opacity:0; transform:translateY(400px) rotate(720deg); }
}

/* ============================================================
   Numeric keypad (cash payment)
   ============================================================ */
.pos-retail-mobile .keypad {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s2);
}
.pos-retail-mobile .keypad button {
  height:56px;
  border-radius:var(--r-md);
  background:var(--theme-surface);
  color:var(--content-main);
  border:1px solid var(--border-divider);
  font-size:var(--fs-h3); font-weight:600;
  transition:background 80ms ease;
}
.pos-retail-mobile .keypad button:active { background:var(--neutral-100); }
.pos-retail-mobile .keypad button.is-action {
  background:var(--neutral-100);
  color:var(--content-sub);
  font-size:var(--fs-body-16);
  border-color:transparent;
}
.pos-retail-mobile .keypad button.is-action:active { background:var(--neutral-200); }

/* Cash quick-amounts row */
.pos-retail-mobile .cash-quick {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--s2);
  margin-bottom:var(--s3);
}
.pos-retail-mobile .cash-quick button {
  height:40px;
  border-radius:var(--r-sm);
  background:var(--accent-50);
  color:var(--accent-500);
  font-size:var(--fs-body-14); font-weight:600;
  border:1px solid transparent;
  transition:all 120ms ease;
}
.pos-retail-mobile .cash-quick button:hover { border-color:var(--accent-500); }

/* Change preview */
.pos-retail-mobile .change-card {
  background:var(--success-50);
  border:1px solid var(--success-200);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s3);
}
.pos-retail-mobile .change-card.is-short { background:var(--danger-50); border-color:var(--danger-200); }
.pos-retail-mobile .change-card__label { font-size:var(--fs-body-14); color:var(--content-sub); }
.pos-retail-mobile .change-card__value { font-size:var(--fs-h3); font-weight:700; color:var(--success-500); }
.pos-retail-mobile .change-card.is-short .change-card__value { color:var(--danger-500); }

/* ============================================================
   Processing overlay (during card / NFC transaction)
   ============================================================ */
.pos-retail-mobile .processing-overlay {
  position:absolute; inset:0;
  background:rgba(25,25,25,0.85);
  display:none;
  flex-direction:column;
  align-items:center; justify-content:center;
  z-index:30;
  color:var(--mono-white);
  text-align:center; padding:var(--s6);
}
.pos-retail-mobile .processing-overlay.is-on { display:flex; }
.pos-retail-mobile .processing-overlay__icon {
  width:88px; height:88px;
  border-radius:50%;
  background:rgba(46,112,255,0.2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s5);
  position:relative;
}
.pos-retail-mobile .processing-overlay__icon::after {
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--accent-400);
  border-top-color:transparent;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.pos-retail-mobile .processing-overlay__title { font-size:var(--fs-h3); font-weight:600; margin:0 0 var(--s2); }
.pos-retail-mobile .processing-overlay__msg   { font-size:var(--fs-body-14); color:rgba(255,255,255,0.7); margin:0 0 var(--s6); max-width:240px; }
.pos-retail-mobile .processing-overlay__cancel {
  color:rgba(255,255,255,0.7);
  font-size:var(--fs-body-14); font-weight:600;
  padding:var(--s2) var(--s4);
}
.pos-retail-mobile .processing-overlay__cancel:hover { color:var(--mono-white); }

/* ============================================================
   Text area (note sheet)
   ============================================================ */
.pos-retail-mobile .textarea {
  width:100%;
  min-height:120px;
  padding:var(--s3);
  background:var(--theme-surface);
  border:1px solid var(--border-divider);
  border-radius:var(--r-sm);
  font-size:var(--fs-body-16);
  color:var(--content-main);
  resize:none;
  outline:none;
  transition:border-color 120ms ease;
}
.pos-retail-mobile .textarea:focus { border-color:var(--accent-500); border-width:1.5px; padding:calc(var(--s3) - 0.5px); }
.pos-retail-mobile .textarea::placeholder { color:var(--content-placeholder); }

/* ============================================================
   Util
   ============================================================ */
.pos-retail-mobile .hidden { display:none !important; }
.pos-retail-mobile .row { display:flex; align-items:center; gap:var(--s2); }
.pos-retail-mobile .spacer { flex:1; }

/* ============================================================
   LAYOUT FIXES — overflow guards, alignment, consistent spacing
   P8 staff display is 360px wide; ensure no text or element
   breaks the frame. Loaded last to override any earlier rules.
   ============================================================ */

/* --- Appbar / page titles -------------------------------- */
.pos-retail-mobile .appbar__title,
.pos-retail-mobile .appbar__sub,
.pos-retail-mobile .appbar__meta {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.pos-retail-mobile .appbar__center { min-width:0; flex:1; }

/* --- Sheet headers --------------------------------------- */
.pos-retail-mobile .sheet__head h3,
.pos-retail-mobile .sheet__title { min-width:0; }
.pos-retail-mobile .sheet__head { gap:var(--s2); }

/* --- Help trigger inline alignment ----------------------- */
.pos-retail-mobile .help-trigger {
  vertical-align:middle;
  flex-shrink:0;
}
.pos-retail-mobile .field__label .help-trigger,
.pos-retail-mobile .section-title .help-trigger,
.pos-retail-mobile .cart-section__title .help-trigger {
  margin-left:4px;
}

/* --- Customer attached card ----------------------------- */
.pos-retail-mobile .cust-attached__body { min-width:0; flex:1; }
.pos-retail-mobile .cust-attached__name,
.pos-retail-mobile .cust-attached__meta {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* --- Cart line items ------------------------------------ */
.pos-retail-mobile .line__body { min-width:0; }
.pos-retail-mobile .line__variant,
.pos-retail-mobile .line__mods { word-break:break-word; }

/* --- History rows --------------------------------------- */
.pos-retail-mobile .hist-row__main { min-width:0; }
.pos-retail-mobile .hist-row__id { flex-shrink:0; }
.pos-retail-mobile .hist-row__time { flex-shrink:0; }
.pos-retail-mobile .hist-row__customer,
.pos-retail-mobile .hist-row__method {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}

/* --- Customer list/picker ------------------------------- */
.pos-retail-mobile .cust-row__body { min-width:0; flex:1; }
.pos-retail-mobile .cust-row__name,
.pos-retail-mobile .cust-row__contact {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pos-retail-mobile .cust-result__body { min-width:0; flex:1; }
.pos-retail-mobile .cust-result__name,
.pos-retail-mobile .cust-result__contact {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* --- Items / inventory management ----------------------- */
.pos-retail-mobile .item-row__body,
.pos-retail-mobile .inv-row__body { min-width:0; flex:1; }
.pos-retail-mobile .item-row__name,
.pos-retail-mobile .item-row__sku,
.pos-retail-mobile .inv-row__name,
.pos-retail-mobile .inv-row__sku {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* --- Stock doc rows + lines ----------------------------- */
.pos-retail-mobile .doc-row__body { min-width:0; flex:1; }
.pos-retail-mobile .doc-row__id { flex-shrink:0; }
.pos-retail-mobile .doc-row__supplier,
.pos-retail-mobile .doc-row__reason {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pos-retail-mobile .stk-line__body,
.pos-retail-mobile .doc-line__body { min-width:0; flex:1; }
.pos-retail-mobile .stk-line__name,
.pos-retail-mobile .doc-line__name {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pos-retail-mobile .stk-line__meta,
.pos-retail-mobile .doc-line__meta { word-break:break-word; }

/* --- Account sub-section rows --------------------------- */
.pos-retail-mobile .acc-staff-row__body,
.pos-retail-mobile .acc-connect-row__body,
.pos-retail-mobile .acc-supplier-row__body,
.pos-retail-mobile .acc-pricelist-row__body,
.pos-retail-mobile .acc-tag-row__body { min-width:0; flex:1; }
.pos-retail-mobile .acc-staff-row__name,
.pos-retail-mobile .acc-staff-row__role,
.pos-retail-mobile .acc-connect-row__name,
.pos-retail-mobile .acc-connect-row__detail,
.pos-retail-mobile .acc-supplier-row__name,
.pos-retail-mobile .acc-supplier-row__detail,
.pos-retail-mobile .acc-pricelist-row__name,
.pos-retail-mobile .acc-tag-row__name {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pos-retail-mobile .acc-kv-row { gap:var(--s2); }
.pos-retail-mobile .acc-kv-row__label { flex-shrink:0; }
.pos-retail-mobile .acc-kv-row__value {
  text-align:right;
  word-break:break-word;
  min-width:0;
}

/* --- Category / option / modifier / unit rows ----------- */
.pos-retail-mobile .cat-row__body,
.pos-retail-mobile .opt-row__body,
.pos-retail-mobile .mod-mgmt-row__body,
.pos-retail-mobile .unit-row__body { min-width:0; flex:1; }
.pos-retail-mobile .cat-row__name,
.pos-retail-mobile .opt-row__name,
.pos-retail-mobile .mod-mgmt-row__name,
.pos-retail-mobile .unit-row__name {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* --- Daily report rows ---------------------------------- */
.pos-retail-mobile .dr-top-row__name,
.pos-retail-mobile .dr-bar-row__name,
.pos-retail-mobile .dr-method-row__name {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; flex:1;
}
.pos-retail-mobile .dr-section__title { word-break:break-word; }

/* --- Permissions matrix --------------------------------- */
.pos-retail-mobile .perm-row__label { word-break:break-word; min-width:0; flex:1; }
.pos-retail-mobile .perm-row__lock { flex-shrink:0; }

/* --- Confirm / mgrPin sheets ---------------------------- */
.pos-retail-mobile .confirm-sheet__msg,
.pos-retail-mobile .mgr-pin__action { word-break:break-word; }

/* --- Help body ------------------------------------------ */
.pos-retail-mobile .help-body { word-break:break-word; }
.pos-retail-mobile .help-body code {
  word-break:break-all;
  white-space:normal;
}
.pos-retail-mobile .help-callout { word-break:break-word; }

/* --- Chip / pill overflow ------------------------------- */
.pos-retail-mobile .chip,
.pos-retail-mobile .pill,
.pos-retail-mobile .method__label,
.pos-retail-mobile .tab-strip__tab { white-space:nowrap; }

/* --- Sheet content ----------------------------- */
.pos-retail-mobile .sheet__body { padding-bottom:var(--s4); }
.pos-retail-mobile .sheet { max-width:100%; }

/* --- Toast inside the device frame --------------------- */
.pos-retail-mobile .toast {
  max-width:calc(100% - var(--s6));
  word-break:break-word;
}

/* --- Filter strips wrap when many ---------------------- */
.pos-retail-mobile .filter-strip {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pos-retail-mobile .filter-strip::-webkit-scrollbar { display:none; }

/* --- Form fields long hints ---------------------------- */
.pos-retail-mobile .field__hint { word-break:break-word; }
.pos-retail-mobile .field__label { word-break:break-word; }

/* --- Tab order strip — long names --------------------- */
.pos-retail-mobile .order-tab > span {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:120px; display:inline-block;
}

/* --- Payment method tiles ----------------------------- */
.pos-retail-mobile .method__title { word-break:break-word; }
.pos-retail-mobile .method__sub { word-break:break-word; }

/* --- Long status banners ------------------------------ */
.pos-retail-mobile .doc-status-banner__sub,
.pos-retail-mobile .status-banner__sub { word-break:break-word; }

/* --- Receipt preview ---------------------------------- */
.pos-retail-mobile .receipt-preview,
.pos-retail-mobile .receipt-preview * { word-break:break-word; }

/* --- Generic select sheet items ----------------------- */
.pos-retail-mobile .select-sheet__opt-label,
.pos-retail-mobile .select-sheet__opt-sub {
  word-break:break-word;
}

/* --- Force min-width:0 on common flex children -------- */
.pos-retail-mobile .flex-grow-min0 > * { min-width:0; }

/* --- Heading hierarchy: keep h2/h3 from overflowing --- */
.pos-retail-mobile .view-title,
.pos-retail-mobile .section__title,
.pos-retail-mobile .acc-card__title { word-break:break-word; }

/* --- Quick create / variant sheet --------------------- */
.pos-retail-mobile .qa-tile__name,
.pos-retail-mobile .var-opt__label {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* ============================================================
   MOBILE / EMBED MODE — strip the device-frame chrome so the
   P8 POS fills the viewport (used standalone on phones and when
   embedded in an <iframe> inside the landing page). The app fills
   100% of its viewport (the iframe), product list scrolls inside,
   and the checkout bar sticks to the bottom.
   ============================================================ */
.pos-retail-mobile, .pos-retail-mobile {
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:var(--theme-canvas);
  overscroll-behavior-y:none;
  overflow-x:hidden;
}
.pos-retail-mobile { position:relative; }

/* Hide the showcase chrome */
.pos-retail-mobile .shell__head,
.pos-retail-mobile .stage__caption,
.pos-retail-mobile .statusbar { display:none !important; }

.pos-retail-mobile .shell {
  max-width:none; margin:0; padding:0; width:100%;
  min-height:100vh; min-height:100dvh;
}
.pos-retail-mobile .stage {
  display:block; width:100%;
  min-height:100vh; min-height:100dvh;
}

/* Remove the dark device bezel */
.pos-retail-mobile .device,
.pos-retail-mobile .device--staff {
  background:transparent; border-radius:0; padding:0;
  box-shadow:none; position:static; width:100%; max-width:none;
}

.pos-retail-mobile .screen,
.pos-retail-mobile .screen--staff {
  border-radius:0; width:100%;
  height:100vh; height:100dvh; overflow:hidden;
}

.pos-retail-mobile .app { height:100%; }

/* Safe-area insets (resolve to 0 inside an iframe) */
.pos-retail-mobile .appbar {
  padding-top:calc(var(--s3) + env(safe-area-inset-top));
  padding-left:calc(var(--s4) + env(safe-area-inset-left));
  padding-right:calc(var(--s4) + env(safe-area-inset-right));
}
.pos-retail-mobile .cart-foot,
.pos-retail-mobile .pay-cta,
.pos-retail-mobile .btn--block.sticky-bottom,
.pos-retail-mobile .checkout-bottom,
.pos-retail-mobile .pf-foot,
.pos-retail-mobile .payflow-foot,
.pos-retail-mobile .success-actions {
  padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
}
.pos-retail-mobile .sheet { padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom)); }
.pos-retail-mobile .drawer,
.pos-retail-mobile .drawer__nav { padding-bottom:env(safe-area-inset-bottom); }
.pos-retail-mobile .drawer-backdrop { inset:0 !important; }
.pos-retail-mobile .drawer { padding-top:env(safe-area-inset-top); }
.pos-retail-mobile .toast { top:calc(var(--s4) + env(safe-area-inset-top)) !important; }

/* Responsive type scaling */
@media (min-width: 414px) {
  .pos-retail-mobile {
    --fs-h1:30px; --fs-h2:24px; --fs-h3:21px;
    --fs-body-20:17px; --fs-body-18:16px; --fs-body-16:15px;
  }
  .pos-retail-mobile .appbar { padding-left:calc(var(--s5) + env(safe-area-inset-left));
            padding-right:calc(var(--s5) + env(safe-area-inset-right)); }
}
@media (min-width: 480px) {
  .pos-retail-mobile .appbar { padding-left:calc(var(--s6) + env(safe-area-inset-left));
            padding-right:calc(var(--s6) + env(safe-area-inset-right)); }
  .pos-retail-mobile .order-tab > span { max-width:160px; }
  .pos-retail-mobile .cart-list,
  .pos-retail-mobile .scroll-area > .checkout-content,
  .pos-retail-mobile .scroll-area { padding-left:var(--s4); padding-right:var(--s4); }
}
@media (max-width: 360px) {
  .pos-retail-mobile { --fs-h1:24px; --fs-h2:20px; --fs-h3:18px; }
  .pos-retail-mobile .btn { padding:0 var(--s4); }
  .pos-retail-mobile .order-tab > span { max-width:88px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pos-retail-mobile .sheet { max-height:88vh; }
  .pos-retail-mobile .modal { max-height:90vh; }
}

/* iOS / touch fixes */
.pos-retail-mobile input, .pos-retail-mobile textarea, .pos-retail-mobile select { font-size:16px !important; }
.pos-retail-mobile .field__label,
.pos-retail-mobile .appbar__title,
.pos-retail-mobile .appbar__meta,
.pos-retail-mobile .section__title,
.pos-retail-mobile .view-title { font-size:revert; }
.pos-retail-mobile * { touch-action:manipulation; }
.pos-retail-mobile .scroll-area,
.pos-retail-mobile .sheet,
.pos-retail-mobile .drawer__nav,
.pos-retail-mobile .cart-list,
.pos-retail-mobile .items__grid,
.pos-retail-mobile .items__list,
.pos-retail-mobile .hist-list,
.pos-retail-mobile .cust-list,
.pos-retail-mobile .inv-list,
.pos-retail-mobile .acc-grid,
.pos-retail-mobile .acc-list,
.pos-retail-mobile .doc-list,
.pos-retail-mobile .dr-content,
.pos-retail-mobile .checkout-content {
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.pos-retail-mobile .filter-strip,
.pos-retail-mobile .order-tabs__scroll,
.pos-retail-mobile .items__tabs,
.pos-retail-mobile .cats-strip,
.pos-retail-mobile .inv-modes,
.pos-retail-mobile .tabs-strip { touch-action:pan-x; }