/* Quick bill — the shelf as pictures, seven across.
 *
 * A grid, not a table: the eye finds a box it knows faster than a name in a
 * column. Seven across on a full-width window, fewer on a narrow one; the
 * tile is a fixed stack (picture, name, company, price, stock, Add) so a row
 * of seven lines up whatever the names are. */
#view-quick { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.qk-top .qk-q { flex: 1 1 auto; min-width: 0; }
.qk-top .qk-co { max-width: 240px; }
.qk-scroll { flex: 1 1 auto; overflow: auto; padding: 12px 16px 16px; min-height: 0; }
.qk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
@media (min-width: 1440px) { .qk-grid { grid-template-columns: repeat(7, 1fr); } }
.qk-tile {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 8px; background: #fff;
  border: 1px solid #dce7e3; border-radius: 10px;
}
.qk-tile.qk-in { border-color: #0e9e8e; box-shadow: inset 0 0 0 1px #0e9e8e; }
/* Off the national list, not on the shelf yet: dashed, so the eye knows
 * before the "Not on shelf" line says it. */
.qk-tile.qk-new { border-style: dashed; background: #fbfdfc; }
.qk-count { color: #5b6b67; font-size: 12px; white-space: nowrap; }
.qk-go { min-width: 150px; }
.qk-clear { color: #5b6b67; }
.qk-pic { position: relative; display: flex; justify-content: center; margin-bottom: 2px; }
.qk-pic .med-thumb {
  width: var(--mt, 118px); height: var(--mt, 118px);
  border-radius: 8px; object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center; font-size: 28px; font-weight: 800;
}
.qk-pic .med-thumb.none { background: #edf5f2; color: #0a7264; }
.qk-pic [data-info] { position: absolute; right: 0; top: 0; }
.qk-name { font-weight: 700; font-size: 12.5px; line-height: 1.2; height: 2.4em; overflow: hidden; }
.qk-co-line { font-size: 11px; color: #5b6b67; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qk-price { font-weight: 800; font-size: 13.5px; }
.qk-price.none { color: #e23744; font-weight: 600; }
.qk-stock { font-size: 10.5px; font-weight: 600; color: #5b6b67; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qk-stock.none { color: #e23744; }
.qk-stock.new { color: #0a7264; }
.qk-add {
  margin-top: auto; padding: 5px 0; font-weight: 800; font-size: 12.5px;
  border: 1px solid #0e9e8e; border-radius: 7px; background: #e3f5f1; color: #0a7264; cursor: pointer;
}
.qk-add:hover { background: #0e9e8e; color: #fff; }
.qk-add.on { background: #0e9e8e; color: #fff; }
.qk-more { padding: 14px; text-align: center; color: #5b6b67; font-size: 12.5px; }
.qk-empty { padding: 40px 16px; text-align: center; color: #5b6b67; grid-column: 1 / -1; }
.qk-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid #dce7e3; background: #fff;
}
.qk-sum { flex: 1 1 auto; font-weight: 700; }