.ui-pos-register { position: relative; box-sizing: border-box; display: flex; width: 100%; height: 100%; min-height: 420px; container-type: inline-size; color: var(--ui-fg); background: var(--ui-subtle); font: 15px/1.3 var(--ui-font); }
.ui-pos-register-main { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.ui-pos-register-shop { display: flex; flex-direction: column; flex: 1 1 44%; min-width: 0; min-height: 0; }
.ui-pos-register-cats { display: flex; flex: none; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px max(8px, env(safe-area-inset-left)); scrollbar-width: none; }
.ui-pos-register-cat { flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-pos-register-cat[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pos-register-cat:focus-visible, .ui-pos-register-item:focus-visible, .ui-pos-register-key:focus-visible, .ui-pos-register-btn:focus-visible, .ui-pos-register-line-pick:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pos-register-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-rows: 84px; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px max(8px, env(safe-area-inset-left)); }
.ui-pos-register-item { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.ui-pos-register-item:active { background: var(--ui-accent-soft); }
.ui-pos-register-item b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-pos-register-item span { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-pos-register-ticket { display: flex; flex-direction: column; flex: 1 1 56%; min-width: 0; min-height: 0; border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-pos-register-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 48px; padding: 2px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-pos-register-head h3 { margin: 0; font-size: 16px; }
.ui-pos-register-split { display: flex; flex: 1; min-height: 0; }
.ui-pos-register-lines { flex: 1; min-width: 0; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ui-pos-register-empty { padding: 24px 12px; color: var(--ui-muted); text-align: center; }
.ui-pos-register-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--ui-radius-sm); }
.ui-pos-register-line-on { background: var(--ui-accent-soft); }
.ui-pos-register-line-pick { flex: 1 1 120px; min-width: 0; min-height: 44px; padding: 2px 4px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-pos-register-line-pick b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-pos-register-line-pick small { color: var(--ui-muted); font-size: 12px; }
.ui-pos-register-qty { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-pos-register-net { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ui-pos-register-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pos-register-btn:disabled { opacity: .5; cursor: default; }
.ui-pos-register-btn[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-pos-register-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-pos-register-side { display: flex; flex-direction: column; flex: 0 0 min(300px, 44%); min-height: 0; overflow-y: auto; border-left: 1px solid var(--ui-border); }
.ui-pos-register-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.ui-pos-register-sums dt { color: var(--ui-muted); }
.ui-pos-register-sums dd { margin: 0; text-align: right; }
.ui-pos-register-total { padding-top: 4px; color: var(--ui-fg) !important; font-size: 20px; font-weight: 700; }
.ui-pos-register-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); }
.ui-pos-register-wide { grid-column: 1 / -1; }
.ui-pos-register-panel { display: grid; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); outline: none; }
.ui-pos-register-panel h4 { margin: 0; font-size: 15px; }
.ui-pos-register-entry { min-height: 44px; padding: 6px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); font: 600 22px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.ui-pos-register-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-pos-register-key { min-height: 52px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); color: var(--ui-fg); font: 600 19px var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-pos-register-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ui-pos-register-msg { margin: 0; color: var(--ui-muted); font-size: 14px; }
.ui-pos-register-bad { color: var(--ui-danger); }
.ui-pos-register-change { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
/* With the width of a turned tablet the ticket stands beside the grid and the sums under the lines. */
@container (min-width: 960px) {
  .ui-pos-register-main { flex-direction: row; }
  .ui-pos-register-shop { flex: 1 1 56%; }
  .ui-pos-register-ticket { flex: 0 0 440px; border-top: 0; border-left: 1px solid var(--ui-border); }
  .ui-pos-register-split { flex-direction: column; }
  .ui-pos-register-side { flex: 0 1 auto; max-height: 72%; border-top: 1px solid var(--ui-border); border-left: 0; }
}