/* ---------- picking rows in My Products, and the bar that acts on them -------
   The bar lives inside .pantry-sticky-tools, so it stays put while you scroll
   the list looking for the next thing to tick. It only exists once something
   is picked — see js/product-bulk.js. */

.pkbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

.pkb-n {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--accent);
  white-space: nowrap;
  padding-right: 3px;
}

/* pushes "tick all shown" and Clear away from the actions, so a press that
   changes your stock never sits flush against one that only changes ticks */
.pkb-gap { flex: 1 1 12px; }

.pkbar .tool { padding: 5px 10px; font-size: 12px; }
.pkbar .tool .ic { width: 13px; height: 13px; }
.pkb-del { color: var(--red); }
.pkb-del:hover { background: color-mix(in srgb, var(--red) 11%, transparent); border-color: transparent; }
.pkb-clear { color: var(--text-muted); }

/* asking why something is going in the bin: the same bar, one question deep */
.pkbar.tossing { background: color-mix(in srgb, var(--amber) 11%, var(--surface));
                 border-color: color-mix(in srgb, var(--amber) 38%, transparent); }
.pkbar.tossing .pkb-n { color: var(--amber); }
.pkb-ask {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--text-soft);
}
.pkb-ask .ic { width: 14px; height: 14px; color: var(--amber); }

/* A picked row has to be obvious from the corner of your eye while you scroll
   away from it, and must not be mistaken for "in stock" — which is the green
   border already on the row. So: a bar down the side, in the accent. */
.prow.picked {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  /* the same however the row reads otherwise: an out-of-stock row has no green
     border of its own to carry the difference */
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card);
}
.prow.picked.hl { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.prow .ppick { cursor: pointer; }

@media (max-width: 600px) {
  /* the buttons wrap to two or three rows on a phone; the count stays on its
     own line above them so it reads as a heading for what follows */
  .pkbar { gap: 6px; padding: 8px; }
  .pkb-n { flex-basis: 100%; }
  .pkb-gap { display: none; }
  .pkbar .tool { flex: 1 1 auto; }
}