/* ════════════════════════════════════════════════════════════════════
   POS Retail · DESKTOP  —  scoped stylesheet
   Source: views/pos/pos-landing.html  <style>
   Every rule scoped under `.pos-retail-desk`.
   Edge-case decisions:
     • :root / html / body (bare)  → collapsed to `.pos-retail-desk`
       (CSS vars + base typography/bg now live on the container).
     • body.pos-demo-open          → LEFT UNSCOPED (page scroll-lock when
       the POS modal is open — must hit the real <body>).
     • @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.
   ════════════════════════════════════════════════════════════════════ */

    /* ─────────────────────────────────────────────────────────────
   Tokens (subset of v4 design system, inlined for single-file)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk {
      --color-brand: #2563EB;
      --color-brand-hover: #1D4ED8;
      --color-brand-light: #EFF6FF;
      --color-brand-border: #BFDBFE;
      --color-brand-text: #1D4ED8;
      --color-ink: #111827;
      --color-ink-dark: #0D1117;
      --color-ink-mid: #1F2937;
      --color-ink-soft: #374151;
      --color-muted: #6B7280;
      --color-subtle: #9CA3AF;
      --color-divider: #E9ECEF;
      --color-border: #F3F4F6;
      --color-surface: #F8F9FA;
      --color-canvas: #FFFFFF;
      --color-success: #16A34A;
      --color-success-light: #F0FDF4;
      --color-warning: #F59E0B;
      --color-warning-light: #FFF7ED;
      --color-error: #DC2626;
      --color-error-light: #FEF2F2;
      --color-teal: #10B981;

      --font-family: 'Plus Jakarta Sans', sans-serif;
      --font-size-xs: 12px;
      --font-size-sm: 13px;
      --font-size-base: 14px;
      --font-size-md: 15px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 22px;
      --font-size-3xl: 28px;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-extrabold: 800;
      --font-weight-black: 900;

      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
      --space-20: 80px;

      --radius-sm: 8px;
      --radius-md: 10px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-pill: 999px;

      --shadow-card: 0 1px 3px rgba(0, 0, 0, .05);
      --shadow-float: 0 4px 24px rgba(0, 0, 0, .06);
      --shadow-brand: 0 4px 20px rgba(37, 99, 235, .1);
      --shadow-hover: 0 4px 16px rgba(37, 99, 235, .1);

      --nav-height: 60px;
      --max-width-page: 1440px;
    }

    /* ─────────────────────────────────────────────────────────────
   Reset + base
───────────────────────────────────────────────────────────── */
    .pos-retail-desk *,
    .pos-retail-desk *::before,
    .pos-retail-desk *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .pos-retail-desk {
      /* Pin the layout viewport to the device width so a stray
         fixed/absolute element (chatbot FAB, config toggle) can't
         expand the page and clip content off the right on phones.
         `clip` (not `hidden`) keeps the sticky configurator working. */
      overflow-x: clip;
    }

    .pos-retail-desk {
      font-family: var(--font-family);
      background: var(--color-canvas);
      color: var(--color-ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }

    .pos-retail-desk button,
    .pos-retail-desk input,
    .pos-retail-desk select,
    .pos-retail-desk textarea {
      font-family: inherit;
      font-size: inherit;
      outline: none;
    }

    .pos-retail-desk button {
      cursor: pointer;
      background: none;
      border: none;
      color: inherit;
    }

    .pos-retail-desk ::placeholder {
      color: var(--color-subtle);
    }

    .pos-retail-desk ul,
    .pos-retail-desk ol {
      list-style: none;
    }

    .pos-retail-desk img,
    .pos-retail-desk svg {
      display: block;
      max-width: 100%;
    }

    /* ─────────────────────────────────────────────────────────────
   Atoms (subset)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      font-family: inherit;
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      transition: opacity .15s, background .15s, border-color .15s, color .15s;
      white-space: nowrap;
    }

    .pos-retail-desk .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .pos-retail-desk .btn-sm {
      padding: 6px 14px;
      font-size: var(--font-size-xs);
      border-radius: var(--radius-sm);
    }

    .pos-retail-desk .btn-md {
      padding: 8px 16px;
      font-size: var(--font-size-base);
      border-radius: var(--radius-sm);
    }

    .pos-retail-desk .btn-lg {
      padding: 10px 22px;
      font-size: var(--font-size-md);
      border-radius: var(--radius-md);
    }

    .pos-retail-desk .btn-xl {
      padding: 13px 32px;
      font-size: 15px;
      border-radius: var(--radius-md);
    }

    .pos-retail-desk .btn-full {
      width: 100%;
    }

    .pos-retail-desk .btn-ink {
      background: var(--color-ink);
      color: #fff;
    }

    .pos-retail-desk .btn-ink:hover:not(:disabled) {
      background: var(--color-ink-dark);
    }

    .pos-retail-desk .btn-brand {
      background: var(--color-brand);
      color: #fff;
    }

    .pos-retail-desk .btn-brand:hover:not(:disabled) {
      background: var(--color-brand-hover);
    }

    .pos-retail-desk .btn-outline {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      color: var(--color-ink-soft);
    }

    .pos-retail-desk .btn-outline:hover:not(:disabled) {
      border-color: var(--color-ink-soft);
      color: var(--color-ink);
    }

    .pos-retail-desk .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      line-height: 1;
    }

    .pos-retail-desk .badge-brand {
      background: var(--color-brand-light);
      color: var(--color-brand);
    }

    .pos-retail-desk .badge-success {
      background: var(--color-success-light);
      color: var(--color-success);
    }

    .pos-retail-desk .badge-neutral {
      background: var(--color-border);
      color: var(--color-muted);
    }

    .pos-retail-desk .input,
    .pos-retail-desk .select {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: 11px 14px;
      font-size: var(--font-size-md);
      color: var(--color-ink);
    }

    .pos-retail-desk .input:focus,
    .pos-retail-desk .select:focus {
      border-color: var(--color-brand);
    }

    .pos-retail-desk .category-tab {
      padding: 7px 16px;
      border-radius: var(--radius-pill);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      background: var(--color-canvas);
      color: var(--color-muted);
      border: 1px solid var(--color-divider);
      transition: background .15s, color .15s, border-color .15s;
    }

    .pos-retail-desk .category-tab.is-active {
      background: var(--color-brand);
      color: var(--color-canvas);
      border-color: var(--color-brand);
    }

    .pos-retail-desk .section-label {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pos-retail-desk .section__title {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -1.5px;
      margin-top: var(--space-2);
    }

    /* Custom dropdown component (atom from styleguide) */
    .pos-retail-desk .dd {
      position: relative;
    }

    .pos-retail-desk .dd__trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: 11px 14px;
      font-size: var(--font-size-md);
      color: var(--color-ink);
      cursor: pointer;
      transition: border-color .15s;
    }

    .pos-retail-desk .dd__trigger:hover {
      border-color: var(--color-ink-soft);
    }

    .pos-retail-desk .dd--open .dd__trigger {
      border-color: var(--color-brand);
    }

    .pos-retail-desk .dd__label {
      flex: 1;
      text-align: left;
    }

    .pos-retail-desk .dd__caret {
      color: var(--color-muted);
      transition: transform .18s, color .18s;
      flex-shrink: 0;
    }

    .pos-retail-desk .dd--open .dd__caret {
      transform: rotate(180deg);
      color: var(--color-brand);
    }

    .pos-retail-desk .dd__menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
      padding: 6px;
      z-index: 50;
      max-height: 320px;
      overflow-y: auto;
    }

    .pos-retail-desk .dd__opt {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: left;
      padding: 8px 12px;
      font-size: var(--font-size-base);
      color: var(--color-ink);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background .12s, color .12s;
    }

    .pos-retail-desk .dd__opt:hover {
      background: var(--color-surface);
    }

    .pos-retail-desk .dd__opt[aria-selected="true"] {
      background: var(--color-brand-light);
      color: var(--color-brand);
      font-weight: var(--font-weight-bold);
    }

    /* ─────────────────────────────────────────────────────────────
   Demo section
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-demo-section {
      padding: var(--space-12) 24px var(--space-20);
      background: var(--color-surface);
    }

    .pos-retail-desk .pos-demo-grid {
      max-width: var(--max-width-page);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: var(--space-4);
      align-items: start;
    }

    /* Config panel */
    .pos-retail-desk .pos-demo-grid {
      transition: grid-template-columns .3s ease;
    }

    .pos-retail-desk .pos-demo-grid.is-config-collapsed {
      grid-template-columns: 48px 1fr;
    }

    .pos-retail-desk .pos-config {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      position: sticky;
      top: calc(var(--nav-height) + var(--space-4));
      box-shadow: var(--shadow-card);
      transition: padding .3s ease;
    }

    /* Collapse/expand toggle — sits top-right; centers when collapsed */
    .pos-retail-desk .pos-config__toggle {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--color-muted);
      transition: background .15s, border-color .15s, color .15s;
      z-index: 5;
    }

    .pos-retail-desk .pos-config__toggle:hover {
      background: var(--color-brand-light);
      border-color: var(--color-brand);
      color: var(--color-brand);
    }

    .pos-retail-desk .pos-config__toggle svg {
      width: 14px;
      height: 14px;
      transition: transform .3s ease;
    }

    /* Collapsed state — hide content, narrow padding, center toggle via flex */
    .pos-retail-desk .pos-config.is-collapsed {
      padding: var(--space-3) 0;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pos-retail-desk .pos-config.is-collapsed>*:not(.pos-config__toggle) {
      display: none;
    }

    .pos-retail-desk .pos-config.is-collapsed .pos-config__toggle {
      position: relative;
      top: auto;
      right: auto;
    }

    .pos-retail-desk .pos-config.is-collapsed .pos-config__toggle svg {
      transform: rotate(180deg);
    }

    .pos-retail-desk .pos-config__title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.3px;
      margin-bottom: var(--space-1);
    }

    .pos-retail-desk .pos-config__lead {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin-bottom: var(--space-5);
    }

    .pos-retail-desk .pos-config__field {
      margin-bottom: var(--space-4);
    }

    .pos-retail-desk .pos-config__field:last-of-type {
      margin-bottom: 0;
    }

    .pos-retail-desk .pos-config__label {
      display: block;
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-config__hint {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 6px;
      line-height: 1.5;
    }

    /* Industry selector pills */
    .pos-retail-desk .pos-industry-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .pos-retail-desk .pos-industry {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 10px 12px;
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-md);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }

    .pos-retail-desk .pos-industry:hover {
      border-color: var(--color-ink-soft);
    }

    .pos-retail-desk .pos-industry.is-active {
      border-color: var(--color-brand);
      background: var(--color-brand-light);
    }

    .pos-retail-desk .pos-industry__emoji {
      font-size: 18px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .pos-retail-desk .pos-industry__name {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
    }

    .pos-retail-desk .pos-industry.is-active .pos-industry__name {
      color: var(--color-brand-text);
    }

    /* Brand color swatches */
    .pos-retail-desk .pos-swatches {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .pos-retail-desk .pos-swatch {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      transition: transform .15s;
      border: 2px solid var(--color-canvas);
      box-shadow: 0 0 0 1px var(--color-divider);
    }

    .pos-retail-desk .pos-swatch:hover {
      transform: scale(1.08);
    }

    .pos-retail-desk .pos-swatch.is-active {
      box-shadow: 0 0 0 2px var(--color-ink);
    }

    .pos-retail-desk .pos-swatch.is-active::after {
      content: '✓';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: var(--font-weight-bold);
      font-size: 14px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }

    /* Custom color picker swatch — opens the native color input.
       Default (no color picked) shows a conic rainbow gradient + "+";
       once a color is picked the swatch shows that color and gets the ✓ checkmark. */
    .pos-retail-desk .pos-swatch--custom {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pos-retail-desk .pos-swatch--custom.pos-swatch--rainbow {
      background: conic-gradient(from 0deg,
        #ef4444, #f59e0b, #eab308, #84cc16,
        #10b981, #06b6d4, #3b82f6, #8b5cf6,
        #d946ef, #ec4899, #ef4444) !important;
    }
    .pos-retail-desk .pos-swatch--custom.pos-swatch--rainbow::before {
      content: '+';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: var(--font-weight-extrabold);
      font-size: 18px;
      line-height: 1;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
      pointer-events: none;
    }
    .pos-retail-desk .pos-swatch--custom input[type="color"] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      border: 0;
      padding: 0;
      background: transparent;
    }

    /* Toggle switch */
    .pos-retail-desk .pos-switch {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      cursor: pointer;
      user-select: none;
    }

    .pos-retail-desk .pos-switch__input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .pos-retail-desk .pos-switch__track {
      position: relative;
      width: 40px;
      height: 22px;
      background: var(--color-divider);
      border-radius: var(--radius-pill);
      transition: background .2s;
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-switch__track::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: var(--color-canvas);
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
      transition: transform .2s;
    }

    .pos-retail-desk .pos-switch__input:checked~.pos-switch__track {
      background: var(--color-brand);
    }

    .pos-retail-desk .pos-switch__input:checked~.pos-switch__track::after {
      transform: translateX(18px);
    }

    .pos-retail-desk .pos-switch__label {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink);
    }

    /* Feature hints */
    .pos-retail-desk .pos-config__hints-label {
      display: block;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-muted);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-hints {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .pos-retail-desk .pos-hint {
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-brand-text);
      background: var(--color-brand-light);
      border: 1px solid var(--color-brand-border);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }

    .pos-retail-desk .pos-config__divider {
      border: 0;
      border-top: 1px solid var(--color-divider);
      margin: var(--space-5) 0;
    }

    /* ─────────────────────────────────────────────────────────────
   Preview frame
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-preview {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-float);
    }

    .pos-retail-desk .pos-preview__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-4) 20px;
      border-bottom: 1px solid var(--color-divider);
      background: var(--color-canvas);
    }

    .pos-retail-desk .pos-preview__head-left {
      min-width: 0;
    }

    .pos-retail-desk .pos-preview__biz {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      letter-spacing: -.3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .pos-preview__meta {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin-top: 2px;
    }

    .pos-retail-desk .pos-preview__head-right {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .pos-retail-desk .pos-preview__dots {
      display: flex;
      gap: 5px;
    }

    .pos-retail-desk .pos-preview__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-divider);
    }

    .pos-retail-desk .pos-screens {
      position: relative;
      min-height: 560px;
    }

    .pos-retail-desk .pos-screen {
      display: none;
      padding: 16px 20px;
      animation: pos-screen-in .35s cubic-bezier(.4, 0, .2, 1);
    }

    .pos-retail-desk .pos-screen.is-active {
      display: block;
    }

    @keyframes pos-screen-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ─────────────────────────────────────────────────────────────
   Order screen
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-order {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: var(--space-5);
      min-height: 540px;
    }

    .pos-retail-desk .pos-cats {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
      flex-wrap: wrap;
    }

    .pos-retail-desk .pos-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
    }

    .pos-retail-desk .pos-item {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-3);
      text-align: center;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .1s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
    }

    .pos-retail-desk .pos-item:hover {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-hover);
    }

    .pos-retail-desk .pos-item:active {
      transform: translateY(1px);
    }

    .pos-retail-desk .pos-item__icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      background: var(--color-surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .pos-retail-desk .pos-item__name {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink);
      line-height: 1.3;
    }

    .pos-retail-desk .pos-item__price {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-brand);
    }

    .pos-retail-desk .pos-item__meta {
      font-size: 10px;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: var(--font-weight-semibold);
    }

    /* ── P8-style product card — real photo on top, left-aligned text,
          matching the mobile POS components. ── */
    .pos-retail-desk .pos-item--img {
      padding: 0;
      gap: 0;
      text-align: left;
      align-items: stretch;
      overflow: hidden;
    }
    .pos-retail-desk .pos-item__img {
      display: block;
      width: 100%;
      height: 116px;
      background-size: cover;
      background-position: center;
      background-color: var(--color-surface);
    }
    .pos-retail-desk .pos-item--img .pos-item__name { padding: 10px var(--space-3) 0; }
    .pos-retail-desk .pos-item--img .pos-item__meta { padding: 2px var(--space-3) 0; text-align: left; }
    .pos-retail-desk .pos-item--img .pos-item__price {
      padding: 4px var(--space-3) var(--space-3);
      font-size: var(--font-size-lg);
      margin-top: auto;
    }
    .pos-retail-desk .pos-item--img .pos-item__stock,
    .pos-retail-desk .pos-item--img .pos-item__mods { padding: 0 var(--space-3) var(--space-3); }
    .pos-retail-desk .pos-item--img .pos-item__options-flag {
      width: auto;
      height: auto;
      top: 8px;
      right: 8px;
      padding: 3px 9px;
      border-radius: var(--radius-pill);
      background: var(--color-brand-light);
      color: var(--color-brand-text);
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      letter-spacing: 0;
    }

    /* ──────────────────────────────────────────────────────────
       Configurator — centered modal dialog with overlay backdrop.
       Opens when a retail (or any) item with variants/modifiers is clicked.
       Dismiss via ✕, overlay click, or ESC key.
    ────────────────────────────────────────────────────────── */
    .pos-retail-desk #configurator:empty { display: none; }

    .pos-retail-desk .pos-configurator-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5);
      animation: pos-overlay-fade .18s ease-out;
    }
    @keyframes pos-overlay-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .pos-retail-desk .pos-configurator {
      width: 100%;
      max-width: 480px;
      max-height: calc(100vh - var(--space-10));
      overflow-y: auto;
      background: var(--color-canvas);
      border-radius: var(--radius-xl);
      padding: var(--space-5) var(--space-6);
      box-shadow:
        0 24px 64px rgba(15, 23, 42, .28),
        0 8px 20px rgba(15, 23, 42, .12);
      animation: pos-modal-pop .25s cubic-bezier(.16, 1, .3, 1);
    }
    @keyframes pos-modal-pop {
      from { opacity: 0; transform: scale(.94); }
      to   { opacity: 1; transform: scale(1); }
    }
    .pos-retail-desk .pos-configurator__head {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid var(--color-divider);
    }
    .pos-retail-desk .pos-configurator__icon {
      width: 44px; height: 44px;
      border-radius: var(--radius-md);
      background: var(--color-surface);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .pos-retail-desk .pos-configurator__info { flex: 1; min-width: 0; }
    .pos-retail-desk .pos-configurator__name {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
    }
    .pos-retail-desk .pos-configurator__meta {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
    .pos-retail-desk .pos-configurator__close {
      background: var(--color-surface);
      border: none;
      border-radius: var(--radius-sm);
      width: 30px; height: 30px;
      cursor: pointer;
      color: var(--color-muted);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px;
      transition: background .15s, color .15s;
    }
    .pos-retail-desk .pos-configurator__close:hover {
      background: var(--color-error-light);
      color: var(--color-error);
    }
    .pos-retail-desk .pos-configurator__group { margin-bottom: var(--space-3); }
    .pos-retail-desk .pos-configurator__group:last-of-type { margin-bottom: 0; }
    .pos-retail-desk .pos-configurator__group-label {
      display: block;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-muted);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    .pos-retail-desk .pos-configurator__options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .pos-retail-desk .pos-configurator__option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink-soft);
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }
    .pos-retail-desk .pos-configurator__option:hover { border-color: var(--color-ink-soft); }
    .pos-retail-desk .pos-configurator__option.is-active {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: #fff;
    }
    .pos-retail-desk .pos-configurator__option-delta {
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      opacity: .85;
    }
    .pos-retail-desk .pos-configurator__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      border-top: 1px solid var(--color-divider);
    }
    .pos-retail-desk .pos-configurator__total { display: flex; flex-direction: column; gap: 2px; }
    .pos-retail-desk .pos-configurator__total-label {
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-muted);
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .pos-retail-desk .pos-configurator__total-value {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-brand);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.3px;
    }
    .pos-retail-desk .pos-configurator__add {
      padding: 10px 22px;
      background: var(--color-brand);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      font-family: inherit;
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      transition: background .15s;
    }
    .pos-retail-desk .pos-configurator__add:hover { background: var(--color-brand-hover); }

    /* Cart row — variant & modifier tags shown under the item name */
    .pos-retail-desk .pos-cart__variant {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 3px;
      margin-bottom: 2px;
    }
    .pos-retail-desk .pos-cart__variant-tag {
      font-size: 10px;
      font-weight: var(--font-weight-bold);
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      background: var(--color-brand-light);
      color: var(--color-brand-text);
    }
    .pos-retail-desk .pos-cart__mod-tag {
      font-size: 10px;
      font-weight: var(--font-weight-semibold);
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      color: var(--color-ink-soft);
      border: 1px solid var(--color-divider);
    }

    /* Receipt — show variant/modifier subtitle under each line */
    .pos-retail-desk .receipt-panel__row-sub {
      display: block;
      font-size: 10px;
      color: var(--color-muted);
      font-weight: var(--font-weight-medium);
      margin-top: 1px;
    }

    /* ──────────────────────────────────────────────────────────
       Customer consent — DISPLAY-ONLY trust feature highlights.
       Three touchpoints: badges (payment head), info card (right column),
       and a subtle line on receipts. Nothing here interacts with checkout.
    ────────────────────────────────────────────────────────── */

    /* Trust-badge row — sits below the payment screen title */
    .pos-retail-desk .pos-trust-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 12px;
      background: var(--color-success-light);
      border: 1px solid rgba(22, 163, 74, .22);
      border-radius: var(--radius-md);
    }
    .pos-retail-desk .pos-trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      color: var(--color-success);
      padding: 4px 9px;
      background: var(--color-canvas);
      border: 1px solid rgba(22, 163, 74, .25);
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }
    .pos-retail-desk .pos-trust-badge svg {
      width: 12px;
      height: 12px;
      color: var(--color-success);
      flex-shrink: 0;
    }

    /* Informational consent card — right column on payment screen */
    .pos-retail-desk .pos-consent-card {
      margin-top: var(--space-3);
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-left: 3px solid var(--color-success);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
    }
    .pos-retail-desk .pos-consent-card__title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      margin-bottom: 4px;
    }
    .pos-retail-desk .pos-consent-card__title svg {
      width: 16px;
      height: 16px;
      color: var(--color-success);
      flex-shrink: 0;
    }
    .pos-retail-desk .pos-consent-card__body {
      font-size: 11px;
      color: var(--color-muted);
      line-height: 1.55;
      margin: 0;
    }
    .pos-retail-desk .pos-consent-card__hint {
      font-size: 10px;
      color: var(--color-subtle);
      font-style: italic;
      margin-top: 6px;
    }

    /* Subtle receipt footer note */
    .pos-retail-desk .receipt-panel__consent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 10px;
      color: var(--color-muted);
      margin-top: var(--space-2);
      padding-top: var(--space-2);
      border-top: 1px dashed var(--color-divider);
    }
    .pos-retail-desk .receipt-panel__consent svg {
      width: 11px;
      height: 11px;
      color: var(--color-success);
      flex-shrink: 0;
    }

    /* Visual hint on items that have variants/modifiers — small dot in corner */
    .pos-retail-desk .pos-item__options-flag {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-brand);
    }
    .pos-retail-desk .pos-item { position: relative; }

    /* Cart */
    .pos-retail-desk .pos-cart {
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
    }

    /* Staff-side customer check-in — sits above the cart header.
   Empty when no loyalty selectable; phone+button when not checked in; pill when checked in. */
    .pos-retail-desk .pos-cart__checkin {
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-cart__checkin:empty {
      display: none;
    }

    .pos-retail-desk .pos-cart__checkin-label {
      display: block;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-muted);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .pos-retail-desk .pos-cart__checkin-row {
      display: flex;
      gap: 6px;
    }

    .pos-retail-desk .pos-cart__checkin-row input {
      flex: 1;
      min-width: 0;
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-sm);
      padding: 7px 10px;
      font-size: var(--font-size-xs);
      color: var(--color-ink);
      font-family: inherit;
      letter-spacing: .03em;
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-cart__checkin-row input:focus {
      outline: none;
      border-color: var(--color-brand);
    }

    .pos-retail-desk .pos-cart__checkin-row button {
      padding: 0 12px;
      background: var(--color-ink);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, opacity .15s;
    }

    .pos-retail-desk .pos-cart__checkin-row button:hover:not(:disabled) {
      background: var(--color-ink-dark);
    }

    .pos-retail-desk .pos-cart__checkin-row button:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .pos-retail-desk .pos-cart__customer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: var(--color-brand-light);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-sm);
    }

    .pos-retail-desk .pos-cart__customer-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--color-brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: var(--font-weight-extrabold);
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-cart__customer-name {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-brand-text);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .pos-cart__customer-points {
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      color: var(--color-brand);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-cart__customer-clear {
      background: none;
      border: none;
      color: var(--color-muted);
      font-size: 14px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-cart__customer-clear:hover {
      background: var(--color-error-light);
      color: var(--color-error);
    }

    .pos-retail-desk .pos-cart__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-cart__title {
      font-weight: var(--font-weight-extrabold);
      font-size: var(--font-size-md);
      color: var(--color-ink);
    }

    .pos-retail-desk .pos-cart__count {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      font-weight: var(--font-weight-semibold);
    }

    .pos-retail-desk .pos-cart__items {
      flex: 1;
      overflow-y: auto;
      min-height: 220px;
      max-height: 320px;
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-cart__empty {
      color: var(--color-subtle);
      font-size: var(--font-size-sm);
      text-align: center;
      padding: var(--space-8) var(--space-3);
      line-height: 1.55;
    }

    .pos-retail-desk .pos-cart__row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-2);
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--color-divider);
    }

    .pos-retail-desk .pos-cart__row:last-child {
      border-bottom: 0;
    }

    .pos-retail-desk .pos-cart__row-main {
      min-width: 0;
    }

    .pos-retail-desk .pos-cart__name {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .pos-cart__qty-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: var(--space-1);
    }

    .pos-retail-desk .pos-qty-btn {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      font-size: 13px;
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, border-color .15s;
    }

    .pos-retail-desk .pos-qty-btn:hover {
      background: var(--color-brand-light);
      border-color: var(--color-brand);
      color: var(--color-brand);
    }

    .pos-retail-desk .pos-cart__qty {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      min-width: 18px;
      text-align: center;
    }

    .pos-retail-desk .pos-cart__row-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
    }

    .pos-retail-desk .pos-cart__price {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
    }

    .pos-retail-desk .pos-cart__remove {
      background: none;
      color: var(--color-subtle);
      font-size: 14px;
      padding: 0;
      transition: color .15s;
    }

    .pos-retail-desk .pos-cart__remove:hover {
      color: var(--color-error);
    }

    .pos-retail-desk .pos-totals {
      border-top: 1px solid var(--color-divider);
      padding-top: var(--space-3);
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-totals__row {
      display: flex;
      justify-content: space-between;
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      margin-bottom: var(--space-1);
    }

    .pos-retail-desk .pos-totals__row--total {
      font-weight: var(--font-weight-extrabold);
      font-size: var(--font-size-lg);
      color: var(--color-ink);
      margin-top: var(--space-2);
    }

    /* ─────────────────────────────────────────────────────────────
   Payment screen
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-payment {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .pos-retail-desk .pos-payment__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .pos-retail-desk .pos-payment__title h3 {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      margin: 0 0 2px;
      letter-spacing: -.3px;
    }

    .pos-retail-desk .pos-payment__sub {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin: 0;
    }

    .pos-retail-desk .pos-payment__body {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--space-5);
    }

    /* Payment methods */
    .pos-retail-desk .pos-paymethods {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-2);
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pay-method {
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: var(--space-3);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: border-color .15s, background .15s, transform .1s;
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .pos-retail-desk .pay-method:hover {
      border-color: var(--color-ink-soft);
    }

    .pos-retail-desk .pay-method:active {
      transform: translateY(1px);
    }

    .pos-retail-desk .pay-method.is-selected {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: #fff;
    }

    .pos-retail-desk .pay-method__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
    }

    .pos-retail-desk .pay-method__name {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
    }

    .pos-retail-desk .pay-method__icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: inherit;
    }

    .pos-retail-desk .pay-method__icon svg {
      width: 20px;
      height: 20px;
    }

    .pos-retail-desk .pay-method__price {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
    }

    .pos-retail-desk .pay-method__desc {
      font-size: 11px;
      opacity: .75;
      font-weight: var(--font-weight-medium);
    }

    /* Amount summary */
    .pos-retail-desk .pos-amount {
      background: var(--color-surface);
      border-radius: var(--radius-md);
      padding: var(--space-4);
    }

    .pos-retail-desk .pos-amount__row {
      display: flex;
      justify-content: space-between;
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-amount__row:last-child {
      margin-bottom: 0;
    }

    .pos-retail-desk .pos-amount__row--total {
      font-weight: var(--font-weight-extrabold);
      font-size: var(--font-size-lg);
      color: var(--color-ink);
      border-top: 1px solid var(--color-divider);
      padding-top: var(--space-3);
      margin-top: var(--space-2);
    }

    .pos-retail-desk .pos-amount__row--adjust {
      color: var(--color-warning);
      font-weight: var(--font-weight-semibold);
    }

    /* Dual pricing note */
    .pos-retail-desk .pos-dualnote {
      display: flex;
      gap: var(--space-2);
      padding: var(--space-3);
      background: var(--color-brand-light);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-md);
      font-size: var(--font-size-xs);
      color: var(--color-brand-text);
      line-height: 1.55;
    }

    .pos-retail-desk .pos-dualnote svg {
      flex-shrink: 0;
      color: var(--color-brand);
    }

    /* Receipt panel */
    .pos-retail-desk .receipt-panel {
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      font-size: var(--font-size-sm);
      display: flex;
      flex-direction: column;
    }

    .pos-retail-desk .receipt-panel__head {
      text-align: center;
      padding-bottom: var(--space-3);
      border-bottom: 1px dashed var(--color-divider);
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .receipt-panel__biz {
      font-weight: var(--font-weight-extrabold);
      font-size: var(--font-size-md);
      color: var(--color-ink);
    }

    .pos-retail-desk .receipt-panel__order {
      font-size: 11px;
      color: var(--color-muted);
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .receipt-panel__items {
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .receipt-panel__row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-2);
      margin-bottom: 6px;
      font-size: var(--font-size-xs);
    }

    .pos-retail-desk .receipt-panel__row-name {
      color: var(--color-ink-soft);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .receipt-panel__row-price {
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .pos-retail-desk .receipt-panel__totals {
      border-top: 1px dashed var(--color-divider);
      padding-top: var(--space-3);
    }

    .pos-retail-desk .receipt-panel__line {
      display: flex;
      justify-content: space-between;
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin-bottom: 4px;
    }

    .pos-retail-desk .receipt-panel__line--adjust {
      color: var(--color-warning);
    }

    .pos-retail-desk .receipt-panel__total {
      display: flex;
      justify-content: space-between;
      font-weight: var(--font-weight-extrabold);
      font-size: var(--font-size-base);
      color: var(--color-ink);
      margin-top: var(--space-2);
      padding-top: var(--space-2);
      border-top: 1px solid var(--color-divider);
    }

    .pos-retail-desk .receipt-panel__method {
      text-align: center;
      margin-top: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px dashed var(--color-divider);
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }

    .pos-retail-desk .receipt-panel__method strong {
      color: var(--color-ink);
      font-weight: var(--font-weight-bold);
    }

    /* Processing inline */
    .pos-retail-desk .pos-processing {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }

    .pos-retail-desk .pos-processing__spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, .3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: pos-spin .8s linear infinite;
    }

    @keyframes pos-spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pos-pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .4;
        transform: scale(1.4);
      }
    }

    /* ─────────────────────────────────────────────────────────────
   Success screen
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-success {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--space-6);
      align-items: start;
    }

    .pos-retail-desk .pos-success__main {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: var(--space-6) var(--space-4);
    }

    .pos-retail-desk .pos-success__check {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-4);
      box-shadow: 0 8px 24px rgba(34, 197, 94, .25);
      animation: pos-success-pop .5s cubic-bezier(.16, 1, .3, 1);
      position: relative;
    }

    .pos-retail-desk .pos-success__check::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 2px solid rgba(34, 197, 94, .35);
      animation: pos-success-ring 1.4s ease-out infinite;
    }

    .pos-retail-desk .pos-success__check svg {
      width: 36px;
      height: 36px;
    }

    @keyframes pos-success-pop {
      0% {
        transform: scale(.4);
        opacity: 0;
      }

      60% {
        transform: scale(1.08);
        opacity: 1;
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes pos-success-ring {
      0% {
        transform: scale(1);
        opacity: .7;
      }

      100% {
        transform: scale(1.35);
        opacity: 0;
      }
    }

    .pos-retail-desk .pos-success__title {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.3px;
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-success__sub {
      color: var(--color-muted);
      font-size: var(--font-size-sm);
      margin-bottom: var(--space-5);
      max-width: 360px;
    }

    .pos-retail-desk .pos-success__amount {
      background: var(--color-success-light);
      color: var(--color-success);
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-md);
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-black);
      letter-spacing: -.5px;
      margin-bottom: var(--space-6);
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-success__cta {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
      justify-content: center;
    }

    /* ─────────────────────────────────────────────────────────────
   Lead capture
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-lead-section {
      padding: var(--space-20) 24px;
      background: var(--color-canvas);
    }

    /* ──────────────────────────────────────────────────────────
       Ecosystem section — entry point after demo / success.
       Sells the rest of Fastboy's product modules + integrated CTA.
    ────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-eco {
      padding: var(--space-20) 24px;
      background: var(--color-surface);
    }
    .pos-retail-desk .pos-eco__inner {
      max-width: 1180px;
      margin: 0 auto;
    }
    .pos-retail-desk .pos-eco__head {
      text-align: center;
      max-width: 700px;
      margin: 0 auto var(--space-12);
    }
    .pos-retail-desk .pos-eco__title {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -1.5px;
      margin: var(--space-2) 0 var(--space-3);
      line-height: 1.15;
    }
    .pos-retail-desk .pos-eco__sub {
      font-size: var(--font-size-md);
      color: var(--color-muted);
      line-height: 1.65;
    }

    .pos-retail-desk .pos-eco__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
      margin-bottom: var(--space-12);
    }
    .pos-retail-desk .pos-eco-card {
      position: relative;
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-4);
      transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .pos-retail-desk .pos-eco-card:hover {
      border-color: var(--color-brand);
      box-shadow: 0 8px 24px rgba(37, 99, 235, .08);
      transform: translateY(-2px);
    }
    .pos-retail-desk .pos-eco-card--current {
      border-color: var(--color-brand);
      background: var(--color-brand-light);
    }
    .pos-retail-desk .pos-eco-card__icon {
      font-size: 28px;
      margin-bottom: var(--space-3);
      line-height: 1;
    }
    .pos-retail-desk .pos-eco-card__name {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      margin-bottom: 4px;
    }
    .pos-retail-desk .pos-eco-card__desc {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      line-height: 1.5;
    }
    .pos-retail-desk .pos-eco-card__pill {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
      display: inline-block;
      font-size: 9px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #fff;
      background: var(--color-brand);
      padding: 3px 8px;
      border-radius: var(--radius-pill);
    }

    /* CTA card at the bottom — keeps the lead-form on the right */
    .pos-retail-desk .pos-eco__cta {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: var(--space-10);
      background: linear-gradient(135deg, #0d1f2d 0%, #1a2f3a 50%, #1c2230 100%);
      border-radius: var(--radius-xl);
      padding: var(--space-10) var(--space-10);
      color: #fff;
    }
    .pos-retail-desk .pos-eco__cta::before {
      content: '';
      position: absolute;
      width: 320px; height: 320px;
      background: rgba(37, 99, 235, .22);
      border-radius: 50%;
      filter: blur(90px);
      top: -100px; left: 8%;
      pointer-events: none;
    }
    .pos-retail-desk .pos-eco__cta::after {
      content: '';
      position: absolute;
      width: 280px; height: 280px;
      background: rgba(20, 184, 166, .18);
      border-radius: 50%;
      filter: blur(90px);
      bottom: -80px; right: 8%;
      pointer-events: none;
    }
    .pos-retail-desk .pos-eco__cta-left,
    .pos-retail-desk .pos-eco__cta .pos-lead__form {
      position: relative;
      z-index: 1;
    }
    .pos-retail-desk .pos-eco__cta-title {
      font-size: clamp(22px, 2.8vw, 30px);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.6px;
      margin: 0 0 var(--space-3);
      line-height: 1.2;
    }
    .pos-retail-desk .pos-eco__cta-sub {
      font-size: var(--font-size-md);
      color: rgba(255, 255, 255, .7);
      line-height: 1.6;
      margin: 0 0 var(--space-4);
    }
    .pos-retail-desk .pos-eco__cta-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-5);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .pos-retail-desk .pos-eco__cta-bullets li {
      position: relative;
      padding-left: 22px;
      font-size: var(--font-size-sm);
      color: rgba(255, 255, 255, .85);
    }
    .pos-retail-desk .pos-eco__cta-bullets li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-teal);
      color: #fff;
      border-radius: 50%;
      font-size: 10px;
      font-weight: var(--font-weight-bold);
    }
    .pos-retail-desk .pos-eco__trust {
      font-size: var(--font-size-xs);
      color: rgba(255, 255, 255, .55);
      letter-spacing: .04em;
    }
    .pos-retail-desk .pos-eco__form {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    @media (max-width: 1024px) {
      .pos-retail-desk .pos-eco__grid { grid-template-columns: repeat(2, 1fr); }
      .pos-retail-desk .pos-eco__cta { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) var(--space-6); }
    }
    @media (max-width: 480px) {
      .pos-retail-desk .pos-eco { padding: var(--space-12) 16px; }
      .pos-retail-desk .pos-eco__grid { grid-template-columns: 1fr; }
    }


    .pos-retail-desk .pos-lead {
      position: relative;
      overflow: hidden;
      max-width: 880px;
      margin: 0 auto;
      background: linear-gradient(135deg, #0d1f2d 0%, #1a2f3a 50%, #1c2230 100%);
      border-radius: var(--radius-xl);
      padding: var(--space-12) var(--space-10);
      color: #fff;
    }

    .pos-retail-desk .pos-lead::before {
      content: '';
      position: absolute;
      width: 320px;
      height: 320px;
      background: rgba(37, 99, 235, .25);
      border-radius: 50%;
      filter: blur(90px);
      top: -100px;
      left: 8%;
      pointer-events: none;
    }

    .pos-retail-desk .pos-lead::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      background: rgba(20, 184, 166, .18);
      border-radius: 50%;
      filter: blur(90px);
      bottom: -80px;
      right: 8%;
      pointer-events: none;
    }

    .pos-retail-desk .pos-lead__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: var(--space-10);
      align-items: center;
    }

    .pos-retail-desk .pos-lead__title {
      font-size: clamp(24px, 3vw, 34px);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.8px;
      line-height: 1.2;
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-lead__sub {
      font-size: var(--font-size-md);
      color: rgba(255, 255, 255, .65);
      line-height: 1.6;
      margin-bottom: var(--space-5);
      max-width: 360px;
    }

    .pos-retail-desk .pos-lead__trust {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-4);
      font-size: var(--font-size-xs);
      color: rgba(255, 255, 255, .55);
    }

    .pos-retail-desk .pos-lead__form {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .pos-retail-desk .pos-lead__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
    }

    .pos-retail-desk .pos-lead__input {
      width: 100%;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: var(--font-size-sm);
      color: #fff;
      font-family: inherit;
    }

    .pos-retail-desk .pos-lead__input::placeholder {
      color: rgba(255, 255, 255, .4);
    }

    .pos-retail-desk .pos-lead__input:focus {
      border-color: rgba(255, 255, 255, .3);
      background: rgba(255, 255, 255, .12);
    }

    .pos-retail-desk .pos-lead__btn {
      width: 100%;
      padding: 13px;
      background: var(--color-brand);
      color: #fff;
      border-radius: var(--radius-md);
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
      transition: background .15s;
      margin-top: var(--space-2);
    }

    .pos-retail-desk .pos-lead__btn:hover {
      background: var(--color-brand-hover);
    }

    .pos-retail-desk .pos-lead__hint {
      text-align: center;
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      margin-top: var(--space-1);
    }

    /* Custom dropdown variant: dark */
    .pos-retail-desk .dd--dark .dd__trigger {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .1);
      color: #fff;
    }

    .pos-retail-desk .dd--dark .dd__trigger:hover {
      border-color: rgba(255, 255, 255, .25);
    }

    .pos-retail-desk .dd--dark.dd--open .dd__trigger {
      border-color: rgba(255, 255, 255, .4);
    }

    .pos-retail-desk .dd--dark .dd__caret {
      color: rgba(255, 255, 255, .6);
    }

    .pos-retail-desk .dd--dark.dd--open .dd__caret {
      color: #fff;
    }

    /* Success state on form */
    .pos-retail-desk .pos-lead__success {
      text-align: center;
      padding: var(--space-6) var(--space-3);
      color: #fff;
    }

    .pos-retail-desk .pos-lead__success-check {
      width: 56px;
      height: 56px;
      margin: 0 auto var(--space-3);
      background: var(--color-success);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #fff;
    }

    /* ─────────────────────────────────────────────────────────────
   Dual-screen stage: staff terminal (left) + customer display (right)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-stage {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 32px;
      position: relative;
    }

    .pos-retail-desk .pos-staff {
      min-width: 0;
      position: relative;
    }

    /* Divider line — sits in the center of the 32px gap between staff and customer */
    .pos-retail-desk .pos-staff::after {
      content: '';
      position: absolute;
      right: -16px;
      top: var(--space-4);
      bottom: var(--space-4);
      width: 1px;
      background: var(--color-divider);
      pointer-events: none;
    }

    .pos-retail-desk .pos-staff .pos-screens {
      min-height: 580px;
    }

    /* Inside dual-screen, staff has less width — adapt the order layout.
       Use fractional units (1.6fr / 0.9fr) so items + cart split available width
       proportionally instead of locking the cart to a fixed pixel size. */
    .pos-retail-desk .pos-staff .pos-order {
      grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
      gap: 20px;
      align-items: start;
    }

    .pos-retail-desk .pos-staff .pos-order > .pos-order__items,
    .pos-retail-desk .pos-staff .pos-order > .pos-cart {
      min-width: 0;
    }

    .pos-retail-desk .pos-staff .pos-grid {
      width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .pos-retail-desk .pos-staff .pos-payment__body {
      grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
      gap: 20px;
    }

    .pos-retail-desk .pos-staff .pos-payment__body > * { min-width: 0; }

    .pos-retail-desk .pos-staff .pos-success {
      grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
    }

    .pos-retail-desk .pos-staff .pos-success > * { min-width: 0; }

    /* ─────────────────────────────────────────────────────────────
   Customer display — vertical panel on the right of the staff POS.
   Themed via --season-* tokens + an SVG "scene" layer per theme.
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-customer {
      /* Season tokens — overridden via [data-season="..."] below */
      --season-bg: var(--color-canvas);
      --season-text: var(--color-ink);
      --season-text-soft: var(--color-muted);
      --season-accent: var(--color-brand);
      --season-soft: var(--color-brand-light);
      --season-card: rgba(255, 255, 255, .96);
      --season-card-text: var(--color-ink);
      --season-card-border: var(--color-divider);

      position: relative;
      background: var(--season-bg);
      color: var(--season-text);
      min-height: 580px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: background .4s ease, color .3s ease;
    }

    /* SVG scene layer — themed illustration drawn behind content.
   Each theme injects its own <svg> via applySeason(). */
    .pos-retail-desk .pos-customer__scene {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .pos-retail-desk .pos-customer__scene svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Floating decoration emoji — kept light, just a couple per theme */
    .pos-retail-desk .pos-customer__deco-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }

    .pos-retail-desk .pos-customer__deco {
      position: absolute;
      font-size: 22px;
      opacity: .85;
      animation: pos-deco-float 4s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
    }

    .pos-retail-desk .pos-customer__deco:nth-child(1) {
      top: 14%;
      left: 23%;
      animation-delay: 0s;
    }

    .pos-retail-desk .pos-customer__deco:nth-child(2) {
      top: 18%;
      right: 28%;
      animation-delay: .8s;
    }

    .pos-retail-desk .pos-customer__deco:nth-child(3) {
      bottom: 22%;
      left: 40%;
      animation-delay: 1.6s;
    }

    .pos-retail-desk .pos-customer__deco:nth-child(4) {
      top: 38%;
      right: 18%;
      animation-delay: 2.4s;
    }

    .pos-retail-desk .pos-customer__deco:nth-child(5) {
      bottom: 18%;
      right: 38%;
      animation-delay: 3.2s;
    }

    @keyframes pos-deco-float {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-8px) rotate(6deg);
      }
    }

    /* ──────────────────────────────────────────────────────────
       Seasonal motion — keyframes + per-season scoped animations.
       Each season has 2–4 distinct motions layered for life.
       Honors prefers-reduced-motion at the end of this block.
    ────────────────────────────────────────────────────────── */

    /* Generic twinkle — reused by Christmas stars + Halloween stars */
    @keyframes pos-twinkle {
      0%, 100% { opacity: .45; }
      50%      { opacity: 1; }
    }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .twinkle,
    .pos-retail-desk [data-season="halloween"] .pos-customer__scene .twinkle {
      animation: pos-twinkle 2.8s ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }

    /* ─── Christmas: big star pulse + falling snow with sideways drift ─── */
    @keyframes pos-cmas-bigstar {
      0%, 100% { transform: scale(1);    opacity: .85; }
      50%      { transform: scale(1.3);  opacity: 1; }
    }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .cmas-bigstar {
      transform-box: fill-box;
      transform-origin: center;
      animation: pos-cmas-bigstar 3s ease-in-out infinite;
    }

    @keyframes pos-snow-fall {
      0%   { transform: translate(0, -20px);  opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translate(18px, 620px); opacity: 0; }
    }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle {
      animation: pos-snow-fall 7s linear infinite;
    }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(2) { animation-delay: 1.2s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(3) { animation-delay: 2.4s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(4) { animation-delay: 3.6s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(5) { animation-delay: 4.8s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(6) { animation-delay: .6s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(7) { animation-delay: 1.8s; }
    .pos-retail-desk [data-season="christmas"] .pos-customer__scene .snowfall circle:nth-child(8) { animation-delay: 3.0s; }

    /* ─── Valentine: heart pulse + rising hearts + sparkle twinkle ─── */
    @keyframes pos-val-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.06); }
    }
    .pos-retail-desk [data-season="valentine"] .pos-customer__scene .val-big-heart,
    .pos-retail-desk [data-season="valentine"] .pos-customer__scene .val-heart {
      transform-box: fill-box;
      transform-origin: center;
      animation: pos-val-pulse 2.4s ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }

    @keyframes pos-val-rise {
      0%   { transform: translate(0, 0);          opacity: 0; }
      10%  { opacity: .85; }
      85%  { opacity: .6; }
      100% { transform: translate(18px, -620px); opacity: 0; }
    }
    .pos-retail-desk [data-season="valentine"] .pos-customer__scene .val-rise-heart {
      animation: pos-val-rise 10s linear infinite;
      animation-delay: var(--d, 0s);
    }

    @keyframes pos-sparkle {
      0%, 100% { opacity: .3; transform: scale(.7); }
      50%      { opacity: 1; transform: scale(1.4); }
    }
    .pos-retail-desk [data-season="valentine"] .pos-customer__scene .val-sparkle {
      transform-box: fill-box;
      transform-origin: center;
      animation: pos-sparkle 1.8s ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }

    /* ─── Halloween: moon glow + bats flying across with wobble ─── */
    @keyframes pos-hw-moon-glow {
      0%, 100% { filter: drop-shadow(0 0 4px  rgba(255, 242, 200, .45)); }
      50%      { filter: drop-shadow(0 0 18px rgba(255, 242, 200, .95)); }
    }
    .pos-retail-desk [data-season="halloween"] .pos-customer__scene .hw-moon {
      animation: pos-hw-moon-glow 3.5s ease-in-out infinite;
    }

    @keyframes pos-hw-bat-fly {
      0%   { transform: translate(-40px, var(--y, 200px)); }
      25%  { transform: translate(80px,  calc(var(--y, 200px) - 10px)); }
      50%  { transform: translate(170px, var(--y, 200px)); }
      75%  { transform: translate(260px, calc(var(--y, 200px) - 8px)); }
      100% { transform: translate(340px, var(--y, 200px)); }
    }
    .pos-retail-desk [data-season="halloween"] .pos-customer__scene .hw-bat {
      animation: pos-hw-bat-fly 14s linear infinite;
      animation-delay: var(--d, 0s);
    }

    /* Pumpkin: subtle flicker via brightness for jack-o'-lantern feel */
    @keyframes pos-hw-pumpkin-flicker {
      0%, 100% { filter: brightness(1); }
      50%      { filter: brightness(1.12); }
    }
    .pos-retail-desk [data-season="halloween"] .pos-customer__scene .hw-pumpkin {
      animation: pos-hw-pumpkin-flicker 2.6s ease-in-out infinite;
    }

    /* ─── Thanksgiving: leaf rotate + wheat sway + berry pulse + falling leaves ─── */
    @keyframes pos-tg-leaf-rotate {
      0%, 100% { transform: rotate(-3deg); }
      50%      { transform: rotate(3deg); }
    }
    .pos-retail-desk [data-season="thanksgiving"] .pos-customer__scene .tg-leaf-large {
      transform-box: fill-box;
      transform-origin: center;
      animation: pos-tg-leaf-rotate 5.5s ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }

    @keyframes pos-tg-wheat-sway {
      0%, 100% { transform: rotate(-2deg); }
      50%      { transform: rotate(2deg); }
    }
    .pos-retail-desk [data-season="thanksgiving"] .pos-customer__scene .tg-wheat--front {
      transform-box: view-box;
      transform-origin: 270px 560px;
      animation: pos-tg-wheat-sway 3.2s ease-in-out infinite;
    }
    .pos-retail-desk [data-season="thanksgiving"] .pos-customer__scene .tg-wheat--back {
      transform-box: view-box;
      transform-origin: 252px 560px;
      animation: pos-tg-wheat-sway 3.6s ease-in-out infinite;
      animation-delay: .4s;
    }

    @keyframes pos-tg-berry {
      0%, 100% { opacity: .55; transform: scale(.9); }
      50%      { opacity: 1;   transform: scale(1.18); }
    }
    .pos-retail-desk [data-season="thanksgiving"] .pos-customer__scene .tg-berry {
      transform-box: fill-box;
      transform-origin: center;
      animation: pos-tg-berry 2.4s ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }

    @keyframes pos-tg-leaf-fall {
      0%   { transform: translate(var(--x, 80px), -20px) rotate(0deg);   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translate(calc(var(--x, 80px) + 30px), 620px) rotate(540deg); opacity: 0; }
    }
    .pos-retail-desk [data-season="thanksgiving"] .pos-customer__scene .tg-fall-leaf {
      animation: pos-tg-leaf-fall 9s linear infinite;
      animation-delay: var(--d, 0s);
    }

    /* Respect reduced-motion — disable all seasonal animations + emoji floating */
    @media (prefers-reduced-motion: reduce) {
      .pos-retail-desk .pos-customer__scene *,
      .pos-retail-desk .pos-customer__deco {
        animation: none !important;
      }
    }

    /* Customer head — themed brand panel at the top of the vertical strip */
    .pos-retail-desk .pos-customer__head {
      position: relative;
      z-index: 2;
      padding: var(--space-5) var(--space-4) var(--space-4);
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .pos-retail-desk .pos-customer__season-name {
      display: inline-block;
      align-self: center;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .15em;
      text-transform: uppercase;
      background: var(--season-accent);
      color: var(--season-bg);
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-customer__brand {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.3px;
      color: var(--season-text);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .pos-customer__welcome {
      font-size: var(--font-size-xs);
      opacity: .85;
      color: var(--season-text);
    }

    /* Customer body — fills the rest of the panel below the head */
    .pos-retail-desk .pos-customer__body {
      position: relative;
      z-index: 2;
      flex: 1;
      padding: var(--space-4);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .pos-retail-desk .pos-customer__body::-webkit-scrollbar {
      width: 4px;
    }

    /* Section card on customer display — translucent over themed bg */
    .pos-retail-desk .pos-customer__card {
      background: var(--season-card);
      color: var(--season-card-text);
      border: 1px solid var(--season-card-border);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    }

    .pos-retail-desk .pos-customer__card-title {
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-bottom: var(--space-2);
    }

    /* Order section — items + totals */
    .pos-retail-desk .pos-customer__items {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: var(--space-3);
      max-height: 140px;
      overflow-y: auto;
    }

    .pos-retail-desk .pos-customer__items::-webkit-scrollbar {
      width: 4px;
    }

    .pos-retail-desk .pos-customer__row {
      display: flex;
      justify-content: space-between;
      font-size: var(--font-size-xs);
      color: var(--color-ink-soft);
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-customer__row-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: var(--space-2);
    }

    .pos-retail-desk .pos-customer__empty {
      font-size: var(--font-size-xs);
      color: var(--color-subtle);
      font-style: italic;
      text-align: center;
      padding: var(--space-3);
    }

    .pos-retail-desk .pos-customer__totals {
      border-top: 1px dashed var(--color-divider);
      padding-top: var(--space-2);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .pos-retail-desk .pos-customer__total-row {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--color-muted);
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-customer__total-row--main {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-black);
      color: var(--color-ink);
      margin-top: 4px;
      padding-top: var(--space-2);
      border-top: 1px solid var(--color-divider);
      letter-spacing: -.3px;
    }

    .pos-retail-desk .pos-customer__total-row--main span:last-child {
      color: var(--season-accent);
    }

    /* Check-in section */
    .pos-retail-desk .pos-customer__checkin-icon {
      font-size: 24px;
      text-align: center;
      margin-bottom: var(--space-1);
    }

    .pos-retail-desk .pos-customer__checkin-title {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      text-align: center;
      color: var(--color-ink);
      margin-bottom: 2px;
    }

    .pos-retail-desk .pos-customer__checkin-hint {
      font-size: 11px;
      text-align: center;
      color: var(--color-muted);
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-customer__phone {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      font-size: var(--font-size-sm);
      color: var(--color-ink);
      font-family: inherit;
      margin-bottom: var(--space-2);
      text-align: center;
      font-variant-numeric: tabular-nums;
      letter-spacing: .04em;
    }

    .pos-retail-desk .pos-customer__phone:focus {
      border-color: var(--season-accent);
    }

    .pos-retail-desk .pos-customer__checkin-btn {
      width: 100%;
      padding: 8px 12px;
      background: var(--season-accent);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      transition: opacity .15s;
    }

    .pos-retail-desk .pos-customer__checkin-btn:hover {
      opacity: .88;
    }

    .pos-retail-desk .pos-customer__checkin-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    /* Rewards display (after check-in) */
    .pos-retail-desk .pos-customer__rewards-greeting {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      text-align: center;
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-customer__rewards-greeting span {
      color: var(--season-accent);
    }

    .pos-retail-desk .pos-customer__points-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: var(--space-2) var(--space-3);
      background: linear-gradient(135deg, var(--season-accent), var(--season-accent));
      color: #fff;
      border-radius: var(--radius-md);
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-customer__points-icon {
      font-size: 18px;
    }

    .pos-retail-desk .pos-customer__points-num {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-black);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.3px;
    }

    .pos-retail-desk .pos-customer__points-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      opacity: .85;
      font-weight: var(--font-weight-bold);
    }

    .pos-retail-desk .pos-customer__earn-note {
      font-size: 11px;
      text-align: center;
      color: var(--color-success);
      font-weight: var(--font-weight-semibold);
    }

    /* Payment screen — Amount Due, vertical centered */
    .pos-retail-desk .pos-customer__pay {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-4);
      color: var(--season-text);
    }

    .pos-retail-desk .pos-customer__pay-tier {
      display: inline-block;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      margin-bottom: var(--space-3);
    }
    .pos-retail-desk .pos-customer__pay-tier--card {
      background: var(--color-warning-light);
      color: var(--color-warning);
    }
    .pos-retail-desk .pos-customer__pay-tier--noncard {
      background: var(--color-success-light);
      color: var(--color-success);
    }

    .pos-retail-desk .pos-customer__pay-label {
      font-size: 11px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .75;
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-customer__pay-amount {
      font-size: 44px;
      font-weight: var(--font-weight-black);
      letter-spacing: -1.6px;
      line-height: 1;
      margin-bottom: var(--space-4);
      color: var(--season-accent);
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-customer__pay-icon {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--season-accent);
      color: var(--season-bg);
      border-radius: 50%;
      margin-bottom: var(--space-3);
      animation: pos-deco-float 2.4s ease-in-out infinite;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    }

    .pos-retail-desk .pos-customer__pay-icon svg {
      width: 28px;
      height: 28px;
    }

    .pos-retail-desk .pos-customer__pay-method {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
    }

    /* Customer-display pricing chooser — shown before payment method is set
       when dual pricing is on. Two big tap targets stacked. */
    .pos-retail-desk .pos-customer__choose {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-1);
      color: var(--season-text);
    }
    .pos-retail-desk .pos-customer__choose-title {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-extrabold);
      text-align: center;
      letter-spacing: -.2px;
    }
    .pos-retail-desk .pos-customer__choose-sub {
      font-size: 11px;
      text-align: center;
      opacity: .8;
      margin-bottom: var(--space-2);
    }
    .pos-retail-desk .pos-customer__choose-options {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .pos-retail-desk .pos-customer__choose-option {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: var(--space-3) var(--space-4);
      background: var(--season-card);
      color: var(--season-card-text);
      border: 1.5px solid var(--season-card-border);
      border-radius: var(--radius-md);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
    }
    .pos-retail-desk .pos-customer__choose-option:hover {
      border-color: var(--season-accent);
      transform: translateY(-1px);
    }

    /* Recommended (Cash) option — success-toned highlight + pulsing glow */
    .pos-retail-desk .pos-customer__choose-option--recommended {
      border-color: var(--color-success);
      background: var(--color-success-light);
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .18), var(--shadow-card);
      animation: pos-cash-glow 2.4s ease-in-out infinite;
    }
    .pos-retail-desk .pos-customer__choose-option--recommended:hover {
      border-color: var(--color-success);
      transform: translateY(-2px);
    }
    .pos-retail-desk .pos-customer__choose-option--recommended .pos-customer__choose-price {
      color: var(--color-success);
    }
    .pos-retail-desk .pos-customer__choose-ribbon {
      position: absolute;
      top: -10px;
      right: var(--space-3);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      background: var(--color-success);
      color: #fff;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      text-transform: uppercase;
      letter-spacing: .4px;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 8px rgba(22, 163, 74, .35);
    }
    .pos-retail-desk .pos-customer__choose-ribbon svg {
      width: 11px;
      height: 11px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
    }
    @keyframes pos-cash-glow {
      0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .18), var(--shadow-card); }
      50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, .28), var(--shadow-card); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pos-retail-desk .pos-customer__choose-option--recommended { animation: none; }
    }
    .pos-retail-desk .pos-customer__choose-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .pos-retail-desk .pos-customer__choose-name {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
    }
    .pos-retail-desk .pos-customer__choose-savings {
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-success);
      background: var(--color-success-light);
      padding: 2px 8px;
      border-radius: var(--radius-pill);
    }
    .pos-retail-desk .pos-customer__choose-adjust {
      font-size: 10px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-warning);
      background: var(--color-warning-light);
      padding: 2px 8px;
      border-radius: var(--radius-pill);
    }
    .pos-retail-desk .pos-customer__choose-price {
      font-size: 24px;
      font-weight: var(--font-weight-black);
      letter-spacing: -.5px;
      color: var(--season-accent);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .pos-retail-desk .pos-customer__choose-hint {
      font-size: 10px;
      color: var(--color-muted);
    }

    /* Processing */
    .pos-retail-desk .pos-customer__processing {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--season-text);
    }

    .pos-retail-desk .pos-customer__spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(255, 255, 255, .25);
      border-top-color: var(--season-accent);
      border-radius: 50%;
      animation: pos-spin .8s linear infinite;
      margin-bottom: var(--space-4);
    }

    .pos-retail-desk .pos-customer__processing-title {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
      margin-bottom: 4px;
    }

    .pos-retail-desk .pos-customer__processing-sub {
      font-size: var(--font-size-xs);
      opacity: .75;
    }

    /* Success — vertical centered */
    .pos-retail-desk .pos-customer__success {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--season-text);
    }

    .pos-retail-desk .pos-customer__success-check {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--color-success);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-3);
      box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
      animation: pos-success-pop .5s cubic-bezier(.16, 1, .3, 1);
    }

    .pos-retail-desk .pos-customer__success-check svg {
      width: 32px;
      height: 32px;
    }

    .pos-retail-desk .pos-customer__success-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.3px;
      margin-bottom: var(--space-1);
    }

    .pos-retail-desk .pos-customer__success-amount {
      font-size: 36px;
      font-weight: var(--font-weight-black);
      letter-spacing: -1px;
      line-height: 1.05;
      color: var(--season-accent);
      margin-bottom: 4px;
      font-variant-numeric: tabular-nums;
    }

    .pos-retail-desk .pos-customer__success-method {
      font-size: var(--font-size-xs);
      opacity: .8;
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-3);
    }

    .pos-retail-desk .pos-customer__success-reward {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: var(--space-3) var(--space-4);
      background: var(--season-card);
      color: var(--season-card-text);
      border: 1px solid var(--season-card-border);
      border-radius: var(--radius-md);
      margin-top: var(--space-2);
    }

    .pos-retail-desk .pos-customer__success-reward-earned {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-success);
    }

    .pos-retail-desk .pos-customer__success-reward-balance {
      font-size: 11px;
      color: var(--color-muted);
      font-weight: var(--font-weight-semibold);
    }

    /* ─────────────────────────────────────────────────────────────
   Seasonal themes — applied via [data-season="X"] on <body>
   Overrides --season-* tokens on .pos-customer
───────────────────────────────────────────────────────────── */
    /* Solid backgrounds — visual interest comes from the SVG scene layer, not gradients */
    .pos-retail-desk [data-season="christmas"] .pos-customer {
      --season-bg: #0F3D2E;
      --season-text: #FFFFFF;
      --season-text-soft: rgba(255, 255, 255, .82);
      --season-accent: #F2C94C;
      --season-soft: rgba(242, 201, 76, .2);
      --season-card: rgba(255, 255, 255, .96);
      --season-card-text: var(--color-ink);
      --season-card-border: rgba(242, 201, 76, .35);
    }

    .pos-retail-desk [data-season="valentine"] .pos-customer {
      --season-bg: #E91E63;
      --season-text: #FFFFFF;
      --season-text-soft: rgba(255, 255, 255, .85);
      --season-accent: #FFE4E9;
      --season-soft: rgba(255, 228, 233, .25);
      --season-card: rgba(255, 255, 255, .96);
      --season-card-text: var(--color-ink);
      --season-card-border: rgba(220, 20, 60, .25);
    }

    .pos-retail-desk [data-season="halloween"] .pos-customer {
      --season-bg: #1B1138;
      --season-text: #FFFFFF;
      --season-text-soft: rgba(255, 255, 255, .82);
      --season-accent: #FF8E29;
      --season-soft: rgba(255, 142, 41, .2);
      --season-card: rgba(255, 255, 255, .94);
      --season-card-text: var(--color-ink);
      --season-card-border: rgba(255, 142, 41, .35);
    }

    .pos-retail-desk [data-season="thanksgiving"] .pos-customer {
      --season-bg: #9C5A2D;
      --season-text: #FFF8DC;
      --season-text-soft: rgba(255, 248, 220, .85);
      --season-accent: #F5C75A;
      --season-soft: rgba(245, 199, 90, .22);
      --season-card: rgba(255, 248, 220, .96);
      --season-card-text: #3D1F03;
      --season-card-border: rgba(139, 69, 19, .35);
    }

    /* On default (no data-season), no decorations; on themed, they appear */
    .pos-retail-desk [data-season="default"] .pos-customer__deco-layer,
    .pos-retail-desk :not([data-season]) .pos-customer__deco-layer {
      display: none;
    }

    /* Seasonal indicator badge in preview head (staff-side breadcrumb) */
    .pos-retail-desk .pos-preview__season {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .08em;
      background: var(--color-surface);
      color: var(--color-ink-soft);
      border: 1px solid var(--color-divider);
    }

    .pos-retail-desk .pos-preview__season[hidden] {
      display: none;
    }

    .pos-retail-desk [data-season="christmas"] .pos-preview__season {
      background: #FEF3C7;
      color: #8B0000;
      border-color: #FFD700;
    }

    .pos-retail-desk [data-season="valentine"] .pos-preview__season {
      background: #FCE7F3;
      color: #DC143C;
      border-color: #FBCFE8;
    }

    .pos-retail-desk [data-season="halloween"] .pos-preview__season {
      background: #FFEDD5;
      color: #C2410C;
      border-color: #FED7AA;
    }

    .pos-retail-desk [data-season="thanksgiving"] .pos-preview__season {
      background: #FEF3C7;
      color: #92400E;
      border-color: #FDE68A;
    }

    /* ─────────────────────────────────────────────────────────────
   Theme selector pills (in config panel)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-themes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .pos-retail-desk .pos-theme {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-md);
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: border-color .15s, background .15s, transform .1s;
    }

    .pos-retail-desk .pos-theme:hover {
      border-color: var(--color-ink-soft);
    }

    .pos-retail-desk .pos-theme:active {
      transform: translateY(1px);
    }

    .pos-retail-desk .pos-theme.is-active {
      border-color: var(--color-brand);
      background: var(--color-brand-light);
    }

    .pos-retail-desk .pos-theme__icon {
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-theme__name {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pos-retail-desk .pos-theme.is-active .pos-theme__name {
      color: var(--color-brand-text);
    }

    /* ─────────────────────────────────────────────────────────────
   POS Mode + capability badges — strip below preview head (staff side)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-mode-strip {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: 10px 20px;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      flex-wrap: wrap;
    }

    .pos-retail-desk .pos-mode {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--color-ink);
      color: #fff;
      font-size: 11px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .04em;
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      flex-shrink: 0;
    }

    .pos-retail-desk .pos-mode::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-teal);
      display: inline-block;
    }

    .pos-retail-desk .pos-caps {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .pos-retail-desk .pos-cap {
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink-soft);
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }

    /* ─────────────────────────────────────────────────────────────
   Industry context info — thin chip strip above the items area
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-context-info {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: var(--space-3);
      padding: 10px 12px;
      background: var(--color-brand-light);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-md);
    }

    .pos-retail-desk .pos-context-info__item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--font-size-xs);
    }

    .pos-retail-desk .pos-context-info__item-label {
      font-weight: var(--font-weight-bold);
      color: var(--color-brand-text);
      letter-spacing: .02em;
    }

    .pos-retail-desk .pos-context-info__item-value {
      color: var(--color-ink-soft);
      font-weight: var(--font-weight-medium);
    }

    .pos-retail-desk .pos-context-info__sep {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--color-brand-border);
      flex-shrink: 0;
    }

    /* Dine-in / Takeout interactive toggle inside the info row */
    .pos-retail-desk .pos-ordertype {
      display: inline-flex;
      background: var(--color-canvas);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-pill);
      padding: 2px;
      gap: 2px;
    }

    .pos-retail-desk .pos-ordertype__btn {
      font-family: inherit;
      font-size: 10px;
      font-weight: var(--font-weight-bold);
      background: transparent;
      border: none;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      color: var(--color-muted);
      transition: background .15s, color .15s;
    }

    .pos-retail-desk .pos-ordertype__btn.is-active {
      background: var(--color-brand);
      color: #fff;
    }

    /* ─────────────────────────────────────────────────────────────
   Industry-specific item details (modifier chips / stock)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-item__stock {
      font-size: 10px;
      font-weight: var(--font-weight-bold);
      color: var(--color-success);
      background: var(--color-success-light);
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      margin-top: 2px;
    }

    .pos-retail-desk .pos-item__stock--low {
      color: var(--color-warning);
      background: var(--color-warning-light);
    }

    .pos-retail-desk .pos-item__mods {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 2px;
    }

    .pos-retail-desk .pos-item__mod {
      font-size: 9px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-brand-text);
      background: var(--color-brand-light);
      padding: 2px 6px;
      border-radius: var(--radius-pill);
      letter-spacing: .02em;
    }

    /* ─────────────────────────────────────────────────────────────
   Dual Pricing comparison cards (Payment screen)
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-pay-compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }

    .pos-retail-desk .pos-pay-compare__card {
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      transition: border-color .15s, box-shadow .15s;
    }

    .pos-retail-desk .pos-pay-compare__card.is-selected {
      border-color: var(--color-brand);
      box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
    }

    .pos-retail-desk .pos-pay-compare__label {
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      color: var(--color-muted);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .pos-retail-desk .pos-pay-compare__card.is-selected .pos-pay-compare__label {
      color: var(--color-brand-text);
    }

    .pos-retail-desk .pos-pay-compare__detail {
      font-size: 11px;
      color: var(--color-muted);
      margin-bottom: var(--space-2);
      line-height: 1.4;
    }

    .pos-retail-desk .pos-pay-compare__amount {
      font-size: 26px;
      font-weight: var(--font-weight-black);
      color: var(--color-ink);
      letter-spacing: -.5px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .pos-retail-desk .pos-pay-compare__card.is-selected .pos-pay-compare__amount {
      color: var(--color-brand);
    }

    .pos-retail-desk .pos-pay-compare__adjust {
      font-size: 10px;
      color: var(--color-warning);
      font-weight: var(--font-weight-semibold);
      margin-top: 4px;
    }

    /* Pay-method price badge (only when Dual Pricing is on) */
    .pos-retail-desk .pay-method__badge {
      display: inline-block;
      font-size: 9px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: var(--radius-pill);
      margin-top: 2px;
      background: var(--color-warning-light);
      color: var(--color-warning);
      align-self: flex-start;
    }

    .pos-retail-desk .pay-method__badge--noncard {
      background: var(--color-success-light);
      color: var(--color-success);
    }

    .pos-retail-desk .pay-method.is-selected .pay-method__badge {
      background: rgba(255, 255, 255, .25);
      color: #fff;
    }

    /* Terminal-ready note (only when Card selected) */
    .pos-retail-desk .pos-terminal-note {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--color-brand-text);
      background: var(--color-brand-light);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-sm);
      padding: 6px 10px;
    }

    .pos-retail-desk .pos-terminal-note svg {
      width: 14px;
      height: 14px;
      color: var(--color-brand);
      flex-shrink: 0;
    }

    /* Branded receipt — accent stripe + brand-colored business name */
    .pos-retail-desk .receipt-panel {
      border-top: 3px solid var(--color-brand);
    }

    .pos-retail-desk .receipt-panel__biz {
      color: var(--color-brand-text);
    }

    /* Success note (subtle, below CTAs) */
    .pos-retail-desk .pos-success-note {
      margin-top: var(--space-5);
      padding: var(--space-3) var(--space-4);
      background: var(--color-brand-light);
      border-left: 3px solid var(--color-brand);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: var(--font-size-xs);
      color: var(--color-brand-text);
      line-height: 1.55;
      max-width: 540px;
      text-align: left;
    }

    .pos-retail-desk .pos-success-note strong {
      font-weight: var(--font-weight-bold);
    }

    /* ──────────────────────────────────────────────────────────
       Post-payment conversion — single Subscribe-or-leave-phone block.
       No add-on cards here. Goal: subscribe or capture a phone number.
    ────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-success__convert {
      grid-column: 1 / -1;
      margin-top: var(--space-6);
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-divider);
      max-width: 640px;
    }
    .pos-retail-desk .pos-success__convert--marketing {
      background: linear-gradient(135deg, var(--color-brand-light) 0%, #FFFFFF 70%);
      border: 1px solid var(--color-brand-border);
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-5);
      box-shadow: var(--shadow-card);
    }
    .pos-retail-desk .pos-success__convert-eyebrow {
      display: inline-block;
      font-size: 10px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--color-brand-text);
      background: var(--color-canvas);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      margin-bottom: var(--space-3);
      border: 1px solid var(--color-brand-border);
    }
    .pos-retail-desk .pos-success__convert-title {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      margin: 0 0 4px;
      letter-spacing: -.3px;
    }
    .pos-retail-desk .pos-success__convert-sub {
      font-size: var(--font-size-sm);
      color: var(--color-ink-soft);
      line-height: 1.6;
      margin: 0 0 var(--space-4);
      max-width: 540px;
    }
    .pos-retail-desk .pos-success__convert-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
    }
    .pos-retail-desk .pos-success__convert-actions[hidden] { display: none; }
    .pos-retail-desk .pos-success__convert-perks {
      list-style: none;
      padding: 0;
      margin: var(--space-4) 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
    }
    .pos-retail-desk .pos-success__convert-perks li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-xs);
      color: var(--color-ink-soft);
      font-weight: var(--font-weight-semibold);
    }
    .pos-retail-desk .pos-success__convert-perk-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--color-success);
      border-radius: 50%;
    }
    .pos-retail-desk .pos-success__convert-perk-strike {
      text-decoration: line-through;
      color: var(--color-subtle);
      font-weight: var(--font-weight-medium);
      margin-left: 4px;
    }
    .pos-retail-desk .pos-success__convert-thanks {
      margin-top: var(--space-4);
      padding: var(--space-3) var(--space-4);
      background: var(--color-success-light);
      border-left: 3px solid var(--color-success);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: var(--font-size-sm);
      color: var(--color-success);
      font-weight: var(--font-weight-semibold);
      max-width: 540px;
    }
    .pos-retail-desk .pos-success__convert-thanks[hidden] { display: none; }

    /* ────────────────────────────────────────────────────────────
       Subscribe modal (pos-sub-*) — Bamboo Pay onboarding form.
       Two-pane layout: dark marketing pane (left) + form pane (right).
    ──────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-sub { position: fixed; inset: 0; z-index: 9999; display: none; }
    .pos-retail-desk .pos-sub.is-open { display: block; }
    .pos-retail-desk .pos-sub__backdrop {
      position: absolute; inset: 0;
      background: rgba(13, 17, 23, .55);
      backdrop-filter: blur(2px);
      animation: pos-sub-fade .2s ease;
    }
    .pos-retail-desk .pos-sub__dialog {
      position: relative;
      max-width: 1080px;
      width: calc(100% - var(--space-8));
      max-height: calc(100vh - var(--space-8));
      margin: var(--space-4) auto;
      background: linear-gradient(180deg, #EEF1FB 0%, #FFFFFF 50%);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(13, 17, 23, .35);
      animation: pos-sub-rise .28s cubic-bezier(.4, 0, .2, 1);
      display: flex;
      flex-direction: column;
    }
    @keyframes pos-sub-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pos-sub-rise {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .pos-retail-desk .pos-sub__close {
      position: absolute;
      top: var(--space-4);
      right: var(--space-4);
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--color-divider);
      background: var(--color-canvas);
      color: var(--color-ink);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
      transition: background .15s, transform .15s;
    }
    .pos-retail-desk .pos-sub__close:hover { background: var(--color-surface); transform: rotate(90deg); }
    .pos-retail-desk .pos-sub__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
    .pos-retail-desk .pos-sub__title {
      text-align: center;
      font-size: 32px;
      font-weight: var(--font-weight-black);
      color: var(--color-ink);
      letter-spacing: -1px;
      margin: var(--space-6) 0 var(--space-4);
    }
    .pos-retail-desk .pos-sub__body {
      flex: 1;
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 0;
      padding: 0 var(--space-5) var(--space-5);
      min-height: 0;
      overflow: auto;
    }
    .pos-retail-desk .pos-sub__pane {
      padding: var(--space-6);
      min-width: 0;
    }
    .pos-retail-desk .pos-sub__pane--marketing {
      background: var(--color-ink-dark);
      color: #FFFFFF;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .pos-retail-desk .pos-sub__pane--form {
      background: var(--color-canvas);
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .pos-retail-desk .pos-sub__pane-title {
      font-size: 28px;
      font-weight: var(--font-weight-black);
      letter-spacing: -.5px;
      line-height: 1.1;
      margin: 0;
    }
    .pos-retail-desk .pos-sub__device {
      align-self: center;
      width: 180px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-12deg);
    }
    .pos-retail-desk .pos-sub__device svg { width: 100%; height: 100%; }
    .pos-retail-desk .pos-sub__copy {
      font-size: var(--font-size-sm);
      line-height: 1.6;
      color: rgba(255, 255, 255, .82);
      margin: 0;
      text-align: center;
    }
    .pos-retail-desk .pos-sub__price {
      text-align: center;
      margin: var(--space-2) 0 var(--space-3);
    }
    .pos-retail-desk .pos-sub__price-amount {
      display: block;
      font-size: 44px;
      font-weight: var(--font-weight-black);
      letter-spacing: -1px;
      line-height: 1;
    }
    .pos-retail-desk .pos-sub__price-period {
      display: block;
      font-size: var(--font-size-sm);
      color: rgba(255, 255, 255, .7);
      margin-top: 4px;
    }
    .pos-retail-desk .pos-sub__eco {
      margin-top: auto;
      padding-top: var(--space-4);
      border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .pos-retail-desk .pos-sub__eco-title {
      font-size: 11px;
      font-weight: var(--font-weight-extrabold);
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .65);
      margin-bottom: var(--space-3);
    }
    .pos-retail-desk .pos-sub__eco-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
    }
    .pos-retail-desk .pos-sub__eco-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--radius-sm);
      transition: background .15s, border-color .15s;
    }
    .pos-retail-desk .pos-sub__eco-item:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .2);
    }
    .pos-retail-desk .pos-sub__eco-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      color: var(--color-brand);
    }
    .pos-retail-desk .pos-sub__eco-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; }
    .pos-retail-desk .pos-sub__eco-name {
      font-size: 11px;
      font-weight: var(--font-weight-extrabold);
      color: #FFFFFF;
      line-height: 1.2;
    }
    .pos-retail-desk .pos-sub__eco-desc {
      font-size: 10px;
      color: rgba(255, 255, 255, .65);
      line-height: 1.3;
      margin-top: 2px;
    }
    .pos-retail-desk .pos-sub__field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }
    .pos-retail-desk .pos-sub__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pos-retail-desk .pos-sub__field--full { grid-column: 1 / -1; }
    .pos-retail-desk .pos-sub__label {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
    }
    .pos-retail-desk .pos-sub__input,
    .pos-retail-desk .pos-sub__select,
    .pos-retail-desk .pos-sub__textarea {
      width: 100%;
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-pill);
      padding: 12px 18px;
      font-size: var(--font-size-sm);
      font-family: inherit;
      color: var(--color-ink);
      transition: border-color .15s, box-shadow .15s;
    }
    .pos-retail-desk .pos-sub__textarea {
      border-radius: var(--radius-md);
      min-height: 110px;
      resize: vertical;
    }
    .pos-retail-desk .pos-sub__input::placeholder,
    .pos-retail-desk .pos-sub__textarea::placeholder { color: var(--color-subtle); }
    .pos-retail-desk .pos-sub__input:focus,
    .pos-retail-desk .pos-sub__select:focus,
    .pos-retail-desk .pos-sub__textarea:focus {
      outline: none;
      border-color: var(--color-brand);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    }
    .pos-retail-desk .pos-sub__select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 14px;
      padding-right: 40px;
    }
    .pos-retail-desk .pos-sub__readonly {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      background: var(--color-surface);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-pill);
      font-size: var(--font-size-sm);
      color: var(--color-ink);
      font-weight: var(--font-weight-semibold);
    }
    .pos-retail-desk .pos-sub__readonly-strike { text-decoration: line-through; color: var(--color-error); font-weight: var(--font-weight-semibold); }
    .pos-retail-desk .pos-sub__readonly-free { color: var(--color-success); font-weight: var(--font-weight-extrabold); margin-left: auto; }
    .pos-retail-desk .pos-sub__actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-top: var(--space-3);
    }
    .pos-retail-desk .pos-sub__submit {
      align-self: flex-end;
      min-width: 200px;
    }
    .pos-retail-desk .pos-sub__sales {
      width: 100%;
      padding: var(--space-3);
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .pos-retail-desk .pos-sub__sales:hover { border-color: var(--color-brand); color: var(--color-brand); }
    .pos-retail-desk .pos-sub__success {
      grid-column: 1 / -1;
      padding: var(--space-6);
      text-align: center;
    }
    .pos-retail-desk .pos-sub__success-icon {
      width: 64px; height: 64px;
      margin: 0 auto var(--space-3);
      border-radius: 50%;
      background: var(--color-success-light);
      color: var(--color-success);
      display: flex; align-items: center; justify-content: center;
    }
    .pos-retail-desk .pos-sub__success-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 3; }
    .pos-retail-desk .pos-sub__success-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-black); color: var(--color-ink); margin: 0 0 var(--space-2); }
    .pos-retail-desk .pos-sub__success-sub { font-size: var(--font-size-sm); color: var(--color-muted); margin: 0; }
    @media (max-width: 920px) {
      .pos-retail-desk .pos-sub__body { grid-template-columns: 1fr; }
      .pos-retail-desk .pos-sub__pane--marketing { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
      .pos-retail-desk .pos-sub__pane--form      { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
      .pos-retail-desk .pos-sub__field-grid      { grid-template-columns: 1fr; }
      .pos-retail-desk .pos-sub__title           { font-size: 26px; margin-top: var(--space-5); }
    }

    /* Legacy upsell-card styles — retained for the chatbot CTA paths but unused
       in the new compact conversion block. Hidden if no markup matches. */
    .pos-retail-desk .pos-success__upsell {
      grid-column: 1 / -1;
      margin-top: var(--space-6);
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-divider);
    }
    .pos-retail-desk .pos-success__upsell-head {
      margin-bottom: var(--space-4);
    }
    .pos-retail-desk .pos-success__upsell-head h4 {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      margin: 0 0 4px;
      letter-spacing: -.3px;
    }
    .pos-retail-desk .pos-success__upsell-head p {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin: 0;
      line-height: 1.5;
    }
    .pos-retail-desk .pos-success__upsell-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .pos-retail-desk .pos-upsell-card {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .pos-retail-desk .pos-upsell-card:hover {
      border-color: var(--color-brand);
      box-shadow: 0 6px 18px rgba(37, 99, 235, .08);
      transform: translateY(-1px);
    }
    .pos-retail-desk .pos-upsell-card--primary {
      background: var(--color-brand-light);
      border-color: var(--color-brand);
    }
    .pos-retail-desk .pos-upsell-card__icon {
      font-size: 22px;
      line-height: 1;
    }
    .pos-retail-desk .pos-upsell-card__title {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
    }
    .pos-retail-desk .pos-upsell-card__desc {
      font-size: 11px;
      color: var(--color-muted);
      line-height: 1.5;
      flex: 1;
    }
    .pos-retail-desk .pos-upsell-card__cta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--color-ink);
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-size: 11px;
      font-weight: var(--font-weight-bold);
      cursor: pointer;
      transition: background .15s, opacity .15s;
      margin-top: 4px;
    }
    .pos-retail-desk .pos-upsell-card__cta:hover { background: var(--color-ink-dark); opacity: .92; }
    .pos-retail-desk .pos-upsell-card--primary .pos-upsell-card__cta { background: var(--color-brand); }
    .pos-retail-desk .pos-upsell-card--primary .pos-upsell-card__cta:hover { background: var(--color-brand-hover); }
    .pos-retail-desk .pos-upsell-card.is-claimed {
      border-color: var(--color-success);
      background: var(--color-success-light);
    }
    .pos-retail-desk .pos-upsell-card.is-claimed .pos-upsell-card__cta {
      background: var(--color-success);
      pointer-events: none;
    }

    .pos-retail-desk .pos-success__upsell-actions {
      display: flex;
      gap: var(--space-2);
      align-items: center;
      flex-wrap: wrap;
      margin-top: var(--space-2);
    }
    .pos-retail-desk .pos-success__upsell-actions-note {
      font-size: 11px;
      color: var(--color-muted);
    }

    /* Sales section — shown when user clicks "Talk to Sales" on the success screen */
    .pos-retail-desk .pos-sales {
      padding: var(--space-12) 24px;
      background: var(--color-surface);
    }
    .pos-retail-desk .pos-sales[hidden] { display: none; }
    .pos-retail-desk .pos-sales__inner {
      max-width: 880px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: var(--space-8);
      align-items: center;
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      box-shadow: var(--shadow-card);
    }
    .pos-retail-desk .pos-sales__title {
      font-size: clamp(22px, 2.8vw, 30px);
      font-weight: var(--font-weight-extrabold);
      letter-spacing: -.6px;
      margin: var(--space-2) 0 var(--space-3);
      line-height: 1.2;
    }
    .pos-retail-desk .pos-sales__sub {
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      line-height: 1.6;
    }
    .pos-retail-desk .pos-sales__form {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .pos-retail-desk .pos-sales__form .pos-lead__input {
      background: var(--color-surface);
      color: var(--color-ink);
      border-color: var(--color-divider);
    }
    .pos-retail-desk .pos-sales__form .pos-lead__input::placeholder { color: var(--color-subtle); }
    .pos-retail-desk .pos-sales__form .pos-lead__btn { background: var(--color-brand); color: #fff; }
    .pos-retail-desk .pos-sales__form .pos-lead__hint { color: var(--color-muted); }
    @media (max-width: 768px) {
      .pos-retail-desk .pos-sales__inner { grid-template-columns: 1fr; padding: var(--space-5); gap: var(--space-5); }
      .pos-retail-desk .pos-success__upsell-grid { grid-template-columns: 1fr; }
    }

    /* ──────────────────────────────────────────────────────────
       Chatbot — floating FAB + expandable panel.
       Lightweight assistant available throughout the demo experience.
    ────────────────────────────────────────────────────────── */
    .pos-retail-desk .cb-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px; height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
      z-index: 8000;
      transition: transform .15s ease;
    }
    .pos-retail-desk .cb-fab:hover { transform: scale(1.05); }
    .pos-retail-desk .cb-fab:active { transform: scale(.95); }
    .pos-retail-desk .cb-fab svg { width: 24px; height: 24px; }
    .pos-retail-desk .cb-fab[hidden] { display: none; }

    .pos-retail-desk .cb-panel {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 360px;
      height: 540px;
      max-height: calc(100vh - 48px);
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-xl);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
      display: flex;
      flex-direction: column;
      z-index: 8001;
      overflow: hidden;
    }
    .pos-retail-desk .cb-panel[hidden] { display: none; }

    .pos-retail-desk .cb-panel__head {
      padding: var(--space-4);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--color-border);
    }
    .pos-retail-desk .cb-panel__title {
      display: flex; align-items: center;
      gap: var(--space-2);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
    }
    .pos-retail-desk .cb-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      font-weight: var(--font-weight-black);
    }
    .pos-retail-desk .cb-close {
      width: 28px; height: 28px;
      background: var(--color-surface);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      color: var(--color-muted);
      font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    .pos-retail-desk .cb-close:hover { background: var(--color-divider); color: var(--color-ink); }

    .pos-retail-desk .cb-messages {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .pos-retail-desk .cb-msg {
      max-width: 85%;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-lg);
      font-size: var(--font-size-sm);
      line-height: 1.55;
      word-wrap: break-word;
    }
    .pos-retail-desk .cb-msg--bot {
      align-self: flex-start;
      background: var(--color-surface);
      color: var(--color-ink);
      border-bottom-left-radius: 4px;
    }
    .pos-retail-desk .cb-msg--user {
      align-self: flex-end;
      background: var(--color-brand);
      color: #fff;
      border-bottom-right-radius: 4px;
    }

    .pos-retail-desk .cb-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 var(--space-4) var(--space-3);
    }
    .pos-retail-desk .cb-chips:empty { padding-bottom: 0; }
    .pos-retail-desk .cb-chip {
      background: var(--color-canvas);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-pill);
      padding: 6px 12px;
      font-size: 11px;
      font-family: inherit;
      color: var(--color-ink-soft);
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
      text-align: left;
    }
    .pos-retail-desk .cb-chip:hover {
      background: var(--color-brand-light);
      border-color: var(--color-brand);
      color: var(--color-brand-text);
    }

    .pos-retail-desk .cb-input-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--color-border);
    }
    .pos-retail-desk .cb-input {
      flex: 1;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: var(--radius-pill);
      padding: 8px 14px;
      font-family: inherit;
      font-size: var(--font-size-sm);
      color: var(--color-ink);
    }
    .pos-retail-desk .cb-input::placeholder { color: var(--color-subtle); }
    .pos-retail-desk .cb-input:focus { outline: none; border-color: var(--color-brand); background: var(--color-canvas); }
    .pos-retail-desk .cb-send {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--color-brand);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .15s;
    }
    .pos-retail-desk .cb-send:hover { background: var(--color-brand-hover); }
    .pos-retail-desk .cb-send svg { width: 16px; height: 16px; }

    @media (max-width: 480px) {
      .pos-retail-desk .cb-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 12px;
        height: calc(100vh - 24px);
      }
      .pos-retail-desk .cb-fab { right: 16px; bottom: 16px; }
    }

    /* ─────────────────────────────────────────────────────────────
   Order context picker (staff / table) — varies by industry
───────────────────────────────────────────────────────────── */
    .pos-retail-desk .pos-context {
      background: var(--color-surface);
      border: none;
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      margin-bottom: var(--space-4);
    }

    .pos-retail-desk .pos-context__head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-3);
      margin-bottom: var(--space-2);
    }

    .pos-retail-desk .pos-context__label {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-ink);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .pos-retail-desk .pos-context__hint {
      font-size: 11px;
      color: var(--color-muted);
      font-weight: var(--font-weight-medium);
    }

    .pos-retail-desk .pos-context__hint--ok {
      color: var(--color-success);
      font-weight: var(--font-weight-bold);
    }

    .pos-retail-desk .pos-context__list {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    .pos-retail-desk .pos-context__list::-webkit-scrollbar {
      display: none;
    }

    .pos-retail-desk .pos-context__list::-webkit-scrollbar-thumb {
      background: var(--color-divider);
      border-radius: var(--radius-pill);
    }

    /* Staff variant — avatar + name */
    .pos-retail-desk .pos-staff {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 2px;
      background: transparent;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform .12s;
      min-width: 56px;
    }

    .pos-retail-desk .pos-staff:hover {
      transform: translateY(-1px);
    }

    .pos-retail-desk .pos-staff__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-canvas);
      color: var(--color-ink-soft);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-extrabold);
      transition: background .15s, color .15s, box-shadow .15s;
    }

    .pos-retail-desk .pos-staff.is-active .pos-staff__avatar {
      background: var(--color-brand);
      color: #fff;
      box-shadow: 0 0 0 3px var(--color-brand-light);
    }

    .pos-retail-desk .pos-staff__name {
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-muted);
      line-height: 1.2;
      text-align: center;
    }

    .pos-retail-desk .pos-staff.is-active .pos-staff__name {
      color: var(--color-brand-text);
      font-weight: var(--font-weight-bold);
    }

    /* Table variant — flat pill */
    .pos-retail-desk .pos-table {
      padding: 8px 16px;
      background: var(--color-canvas);
      border: 1.5px solid var(--color-divider);
      border-radius: var(--radius-pill);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      color: var(--color-ink-soft);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: border-color .15s, background .15s, color .15s, transform .1s;
    }

    .pos-retail-desk .pos-table:hover {
      border-color: var(--color-ink-soft);
    }

    .pos-retail-desk .pos-table:active {
      transform: translateY(1px);
    }

    .pos-retail-desk .pos-table.is-active {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: #fff;
    }

    /* Cart header — context badge under "Order" */
    .pos-retail-desk .pos-cart__title-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .pos-retail-desk .pos-cart__context {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: var(--font-weight-bold);
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      background: var(--color-brand-light);
      color: var(--color-brand-text);
      align-self: flex-start;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pos-retail-desk .pos-cart__context--prompt {
      background: var(--color-warning-light);
      color: var(--color-warning);
    }

    /* Receipt — context line */
    .pos-retail-desk .receipt-panel__context {
      font-size: 11px;
      color: var(--color-ink-soft);
      margin-top: 4px;
      font-weight: var(--font-weight-semibold);
    }

    .pos-retail-desk .receipt-panel__context strong {
      color: var(--color-ink);
      font-weight: var(--font-weight-extrabold);
    }

    /* Sticky sidebar overflow handling for taller industry list */
    .pos-retail-desk .pos-config {
      max-height: calc(100vh - var(--nav-height) - var(--space-8));
      overflow-y: auto;
    }

    .pos-retail-desk .pos-config::-webkit-scrollbar {
      width: 4px;
    }

    .pos-retail-desk .pos-config::-webkit-scrollbar-thumb {
      background: var(--color-divider);
      border-radius: var(--radius-pill);
    }

    /* ─────────────────────────────────────────────────────────────
   Responsive (system breakpoints: 1024, 768, 480)
───────────────────────────────────────────────────────────── */
    /* Below 1024px the demo collapses: config stacks above the preview, and the
       dual-screen stacks (customer panel drops below the staff). Staff gets full
       preview width here, so items + cart can stay side-by-side at this breakpoint. */
    @media (max-width: 1024px) {
      .pos-retail-desk .pos-demo-grid {
        grid-template-columns: 1fr;
      }

      .pos-retail-desk .pos-config {
        position: static;
        max-height: none;
      }

      .pos-retail-desk .pos-lead__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }

      .pos-retail-desk .pos-stage {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .pos-retail-desk .pos-staff {
        border-bottom: 1px solid var(--color-divider);
        padding-bottom: 24px;
      }

      .pos-retail-desk .pos-staff::after {
        display: none;
      }

      .pos-retail-desk .pos-customer {
        min-height: 420px;
      }
    }

    /* Tablet/mobile: stack cart below items once the staff width can't comfortably
       hold the 300px-min cart alongside a usable items area. */
    @media (max-width: 720px) {
      .pos-retail-desk .pos-staff .pos-order {
        grid-template-columns: 1fr;
      }

      .pos-retail-desk .pos-staff .pos-payment__body {
        grid-template-columns: 1fr;
      }

      .pos-retail-desk .pos-staff .pos-success {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {

      .pos-retail-desk .pos-demo-section {
        padding: var(--space-8) 16px var(--space-12);
      }

      .pos-retail-desk .pos-paymethods {
        grid-template-columns: 1fr;
      }

      .pos-retail-desk .pos-lead-section {
        padding: var(--space-12) 20px;
      }

      .pos-retail-desk .pos-lead {
        padding: var(--space-8) var(--space-5);
      }

      .pos-retail-desk .pos-lead__row {
        grid-template-columns: 1fr;
      }

      /* Keep Business type as a 2-column grid on mobile so the list
         stays compact (less vertical scrolling). */
      .pos-retail-desk .pos-industry-list {
        grid-template-columns: 1fr 1fr;
      }

      .pos-retail-desk .pos-themes {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {

      .pos-retail-desk .pos-screen {
        padding: var(--space-4);
      }

      .pos-retail-desk .pos-grid {
        gap: var(--space-2);
      }

      .pos-retail-desk .pos-item {
        padding: var(--space-3) var(--space-2);
      }

      .pos-retail-desk .pos-pay-compare {
        grid-template-columns: 1fr;
      }

      .pos-retail-desk .pos-context-info {
        font-size: 11px;
        padding: 8px 10px;
      }
    }

    /* ─────────────────────────────────────────────────────────────
       Mobile POS — scale the live register down to a phone layout.
       The desktop dual-screen locks the cart to a 300px track and
       the item grid to a 160px-min track; on a phone those pixel
       minimums force the whole page wider than the viewport (every-
       thing then clips off the right edge). Here we drop those
       minimums and stack the register into one touch-friendly
       column. "Customize your demo" is untouched — it already
       stacks above the preview below 1024px.
    ───────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      /* Safety net: never let the demo push the page past the screen */
      .pos-retail-desk .pos-demo-section { overflow-x: hidden; }

      /* Register fills its column; drop the tall desktop min-heights */
      .pos-retail-desk .pos-screens,
      .pos-retail-desk .pos-staff .pos-screens { min-height: 0; }

      .pos-retail-desk .pos-screen { padding: 14px; }

      /* Order screen: single column (items, then cart below),
         both tracks fully shrinkable so nothing forces overflow. */
      .pos-retail-desk .pos-staff .pos-order {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .pos-retail-desk .pos-staff .pos-order > .pos-order__items,
      .pos-retail-desk .pos-staff .pos-order > .pos-cart {
        min-width: 0;
      }

      /* Items: 2-up grid with shrinkable tracks (no 160px floor) */
      .pos-retail-desk .pos-grid,
      .pos-retail-desk .pos-staff .pos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
      }

      /* Payment + success collapse to one column as well */
      .pos-retail-desk .pos-staff .pos-payment__body,
      .pos-retail-desk .pos-staff .pos-success {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      /* Customer-facing screen sits below as a compact panel */
      .pos-retail-desk .pos-customer { min-height: 300px; }
    }

    @media (max-width: 480px) {
      .pos-retail-desk .pos-demo-section {
        padding-left: 14px;
        padding-right: 14px;
      }

      .pos-retail-desk .pos-screen { padding: 12px; }

      .pos-retail-desk .pos-grid,
      .pos-retail-desk .pos-staff .pos-grid {
        gap: var(--space-2);
      }
    }

    /* -------------------------------------------------------------
       Mobile flow: Customize your demo  →  "Try the demo" launch card
       →  the P8 POS opens FULL-SCREEN (like a real app) in an overlay
       with an Exit control. Desktop keeps the inline dual-screen demo.
       ------------------------------------------------------------- */
    .pos-retail-desk .pos-p8-launch { display: none; }

    .pos-retail-desk .pos-demo-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9500;
      flex-direction: column;
      background: var(--color-canvas);
    }
    .pos-retail-desk .pos-demo-overlay.is-open { display: flex; }

    .pos-retail-desk .pos-demo-overlay__bar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
      background: var(--color-ink-dark);
      color: #fff;
    }
    .pos-retail-desk .pos-demo-overlay__brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
    }
    .pos-retail-desk .pos-demo-overlay__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-success);
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .25);
    }
    .pos-retail-desk .pos-demo-overlay__close {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: inherit;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      color: #fff;
      background: rgba(255, 255, 255, .14);
      border: none;
      border-radius: var(--radius-pill);
      padding: 7px 14px;
      cursor: pointer;
      transition: background .15s;
    }
    .pos-retail-desk .pos-demo-overlay__close:hover { background: rgba(255, 255, 255, .26); }
    .pos-retail-desk .pos-demo-overlay .pos-p8-embed__frame {
      flex: 1 1 auto;
      width: 100%;
      border: 0;
      display: block;
    }

    /* Lock the page behind the full-screen demo */
    body.pos-demo-open { overflow: hidden; }

    @media (max-width: 768px) {
      .pos-retail-desk .pos-preview { display: none; }

      /* Launch card sits under the configurator */
      .pos-retail-desk .pos-p8-launch {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-5);
        text-align: center;
        background: var(--color-canvas);
        border: 1px solid var(--color-divider);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
      }
      .pos-retail-desk .pos-p8-launch__badge {
        font-size: 11px;
        font-weight: var(--font-weight-bold);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-brand-text);
        background: var(--color-brand-light);
        border: 1px solid var(--color-brand-border);
        padding: 4px 10px;
        border-radius: var(--radius-pill);
      }
      .pos-retail-desk .pos-p8-launch__title {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-extrabold);
        color: var(--color-ink);
        letter-spacing: -.3px;
      }
      .pos-retail-desk .pos-p8-launch__sub {
        font-size: var(--font-size-sm);
        color: var(--color-muted);
        line-height: 1.5;
        max-width: 32ch;
      }
      .pos-retail-desk .pos-p8-launch .btn { width: 100%; }
    }
