/* CUBE: block — the till. A two-pane grid: catalogue search + results on the
   left, the cart panel on the right. Self-contained; owns its result rows,
   cart lines, qty stepper and totals. */

.sale {
  display: grid;
  grid-template-columns: 1fr 25rem;
  min-block-size: 0;
  block-size: 100%;
}

/* ---- left: search + results ---- */
.sale__catalogue {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
}
.sale__search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--color-border-subtle);
}
.sale__search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  min-inline-size: 0;
  block-size: var(--control-h-lg);
  padding-inline: var(--space-s);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  color: var(--color-muted);
}
.sale__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.sale__search-input {
  flex: 1;
  min-inline-size: 0;
  block-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg);
  font-size: var(--fs-md);
}
.sale__search-input:focus { outline: 0; box-shadow: none; }
.sale__scan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  padding-inline: var(--space-s);
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  box-shadow: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.sale__scan:hover:not(:disabled) { background: var(--color-bg); }

.sale__results {
  flex: 1;
  min-block-size: 0;
  overflow: auto;
  padding: var(--space-xs) var(--space-m) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.sale__result {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.sale__result:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.sale__result-name { font-size: var(--fs-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale__result-meta { display: flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-3xs); }
.sale__result-sku { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-muted); }
.sale__result-price { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.sale__add {
  inline-size: var(--control-h-lg);
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  padding: 0;
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: none;
}
.sale__add:hover:not(:disabled) { background: var(--mv-green-100); }

/* ---- right: cart ---- */
.sale__cart {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--color-surface);
}
.sale__cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--color-border-subtle);
}
.sale__cart-title { font-size: var(--fs-md); font-weight: 600; }
.sale__cart-count { color: var(--color-muted); font-weight: 400; }
.sale__cart-tools { display: flex; gap: var(--space-3xs); }
.sale__cart-tool {
  inline-size: var(--icon-btn);
  block-size: var(--icon-btn);
  min-block-size: var(--icon-btn);
  padding: 0;
  background: transparent;
  color: var(--color-muted);
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: none;
}
.sale__cart-tool:hover:not(:disabled) { background: var(--color-border-subtle); color: var(--color-fg); }
.sale__cart-tool[data-danger]:hover:not(:disabled) { background: var(--color-danger-soft); color: var(--color-danger); }

.sale__cart-list { flex: 1; min-block-size: 0; overflow: auto; }

.sale__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--color-border-subtle);
}
.sale__line-name { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale__line-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-muted); margin-block-start: var(--space-3xs); }
.sale__line-tools { display: flex; align-items: center; gap: var(--space-3xs); }
.sale__line-tool {
  inline-size: var(--icon-btn-sm);
  block-size: var(--icon-btn-sm);
  min-block-size: var(--icon-btn-sm);
  padding: 0;
  background: transparent;
  color: var(--color-muted);
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: none;
}
.sale__line-tool:hover:not(:disabled) { background: var(--color-border-subtle); color: var(--color-fg); }
.sale__line-tool[data-danger]:hover:not(:disabled) { background: var(--color-danger-soft); color: var(--color-danger); }

.sale__stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  inline-size: fit-content;
  overflow: hidden;
}
.sale__step {
  inline-size: var(--qty-step);
  block-size: 36px;
  min-block-size: 36px;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--fs-xl);
  font-weight: 400;
}
.sale__step:hover:not(:disabled) { background: var(--color-bg); }
.sale__step--dec { border-inline-end: 1px solid var(--color-border-subtle); }
.sale__step--inc { border-inline-start: 1px solid var(--color-border-subtle); }
.sale__qty { min-inline-size: 2.625rem; text-align: center; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.sale__line-amount { text-align: end; align-self: center; }
.sale__line-subtotal { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.sale__line-discount {
  display: inline-block;
  margin-block-start: var(--space-3xs);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sale__cart-empty {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-l);
  text-align: center;
}
.sale__cart-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--glyph);
  block-size: var(--glyph);
  border-radius: var(--radius-l);
  background: var(--color-border-subtle);
  color: var(--color-muted);
}
.sale__cart-empty-title { font-size: var(--fs-sm); font-weight: 500; color: var(--color-fg); }
.sale__cart-empty-body { font-size: var(--fs-xs); color: var(--color-muted); max-inline-size: 26ch; text-wrap: pretty; }

.sale__totals {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border-block-start: 1px solid var(--color-border);
}
.sale__totals-lines { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-xs); color: var(--color-muted); }
.sale__totals-row { display: flex; justify-content: space-between; }
.sale__totals-row--discount { color: var(--color-danger); }
.sale__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block-start: var(--space-s);
  border-block-start: 1px dashed var(--color-border-strong);
}
.sale__grand-label { font-size: var(--fs-md); font-weight: 600; }
.sale__grand-value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sale__actions { display: flex; gap: var(--space-xs); }
.sale__cancel {
  flex: 0 0 auto;
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  padding-inline: var(--space-l);
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  box-shadow: none;
  font-weight: 500;
}
.sale__cancel:hover:not(:disabled) { background: var(--color-bg); }
.sale__charge {
  flex: 1;
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  font-size: var(--fs-lg);
}