/* HBB POS — touch-first till polish. */
:root {
  --pay-pink: #d81b60;
  --pay-pink-dark: #b91550;
}

.catalog__bar { padding: 9px 10px; gap: 8px; }
.searchWrap { position: relative; min-width: 0; flex: 1; }
.searchWrap .input { width: 100%; min-height: 44px; padding-right: 38px; }
.searchClear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-3); cursor: pointer; font-size: 21px; line-height: 1;
}
.searchClear:hover { background: var(--panel-2); color: var(--ink); }

/* One row of departments, scrolled sideways. Wrapping cost three stacked rows of chrome
   above the products — the shelf is what the cashier is looking for. */
.cats { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 7px 10px; gap: 6px; }
.cats__btn { flex: none; min-height: 34px; white-space: nowrap; border-radius: 999px; }

.quickPicks {
  display: flex; align-items: center; gap: 6px; flex: none; min-width: 0;
  padding: 6px 10px; border-bottom: 1px solid var(--line-soft); background: var(--panel);
}
.quickPicks__label { flex: none; padding-right: 3px; color: var(--ink-3); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.quickPick {
  flex: 1 1 auto; min-width: 112px; display: inline-flex; align-items: center; justify-content: space-between;
  gap: 7px; min-height: 32px; max-width: 210px; padding: 0 10px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); cursor: pointer;
}
.quickPick:hover { border-color: var(--line); background: var(--panel); }
.quickPick__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; }
.quickPick__price { flex: none; color: var(--ink-2); font: 600 10.5px/1 var(--mono); }

.grid { gap: 8px; padding: 10px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }

/* The card is a real grid — art down the left, price rail across the bottom. The rows are
   auto / 1fr / auto against a stated height, so the price row is placed last and can never
   be pushed out of the card and clipped by the overflow. */
.tile {
  display: grid; height: 122px; padding: 9px 11px 8px 13px;
  border-radius: 10px; border-color: var(--line-soft);
  grid-template-columns: 48px minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  column-gap: 10px; align-items: start;
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.tile:hover { border-color: var(--line); transform: translateY(-1px); }
.tile:active { transform: translateY(1px); }
.tile .art--tile { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 62px; margin: 0; align-self: center; justify-self: center; }
.tile__cat { grid-column: 2; grid-row: 1; font-size: 9px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile.has-age .tile__cat { padding-right: 30px; }
.tile__name {
  grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px;
  font-size: 13px; line-height: 1.22; font-weight: 650;
}
.tile__foot { grid-column: 1 / -1; grid-row: 3; align-self: end; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.tile__price { font-size: 15px; font-weight: 750; }
.tile__stock { max-width: 84px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art { border-radius: 8px; overflow: hidden; }
.art__img { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); }
.art__svg { width: 100%; height: 100%; }

/* The "there is more behind this" tile. It sits in the grid as one more card so the
   eye finds it where it stopped reading, not pinned somewhere off the flow. */
.gridMore {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 62px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px;
  background: transparent; color: var(--ink-2); cursor: pointer; text-align: center;
}
.gridMore:hover { border-color: var(--acc); color: var(--ink); background: var(--panel); }
.gridMore strong { font-size: 13.5px; }
.gridMore span { font-size: 11.5px; color: var(--ink-3); }

.ticket { background: var(--bg-2); box-shadow: -8px 0 24px rgba(16,24,40,.035); }
.ticket__head { padding: 13px 14px; }
.ticket__title { font-size: 17px; }
/* Ticket rows have five visual children. Keep this scoped so refund rows retain their own layout. */
.ticket .line { grid-template-columns: 3px 24px minmax(0,1fr) auto 76px; gap: 8px; min-height: 58px; padding: 9px 12px 9px 0; }
.ticket .line .art--row { width: 23px; height: 31px; }
.ticket .line__name { font-size: 13px; font-weight: 650; }
.ticket .stepper { width: 29px; height: 29px; border-radius: 8px; background: var(--panel); }
.ticket .line__right { min-width: 76px; }
.ticket .line__tools { opacity: .65; }
.ticket .line:hover .line__tools, .ticket .line:focus-within .line__tools { opacity: 1; }
.ticket__totals { padding: 12px 14px 10px; gap: 5px; background: var(--panel); }
.tot--grand span:last-child { font-size: 30px; }
.ticket__acts .btn { min-height: 42px; }
.ticket > .btn--block.btn--primary {
  min-height: 58px; padding: 16px 18px; border-radius: 0;
  background: var(--pay-pink); border-color: var(--pay-pink); color: #fff;
  font-size: 17px; font-weight: 750; letter-spacing: -.015em;
}
.ticket > .btn--block.btn--primary:hover { background: var(--pay-pink-dark); border-color: var(--pay-pink-dark); filter: none; }

/* A truncated quick pick is not quick: once the catalog narrows, the row drops a pick
   rather than shortening every name in it. */
@media (max-width: 1180px) {
  .till { grid-template-columns: minmax(0,1fr) 365px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); }
  .ticket .line { grid-template-columns: 3px 20px minmax(0,1fr) auto 70px; gap: 6px; }
  .quickPick:nth-of-type(n+3) { display: none; }
}
@media (max-width: 900px) {
  .quickPicks__label { display: none; }
}
@media (max-width: 760px) {
  .till { grid-template-columns: 1fr; grid-template-rows: minmax(320px,1fr) auto; }
  .ticket { border-left: 0; border-top: 1px solid var(--line); max-height: 52vh; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); padding: 8px; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ticket .line { grid-template-columns: 3px 20px minmax(0,1fr) auto 66px; }
  .ticket .line__tools { display: none; }
}