/* ---------- orders page ---------- */
/* the way through to the printable list, kept on the right of the heading */
.orders-head-act { margin-left: auto; }
@media (max-width: 600px) { .orders-head-act { margin-left: 0; } }

.order-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ototal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; box-shadow: var(--shadow-card);
}
.ototal .oname { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ototal strong { font-size: 21px; font-weight: 800; }
.ototal small { display: block; color: var(--text-muted); font-size: 11.5px; }
.ototal.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-card); }

.order-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; flex-wrap: wrap;
}
.order-row .oimg { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }
.order-row .oinfo { flex: 1; min-width: 170px; }
.order-row .oinfo b { cursor: pointer; }
.order-row .oinfo b:hover { color: var(--accent); }
.order-row .osub { font-size: 11.5px; color: var(--text-muted); }
.order-qty { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.order-qty input {
  width: 62px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px;
  outline: none; text-align: center; font-weight: 700; background: var(--surface-2); color: var(--text);
}
/* the container word beside the number, so "buy 2" reads as "buy 2 bags" and a
   fraction of a pack can't look like a sensible answer */
.order-qty small { color: var(--text-muted); font-size: 11px; }

/* why this row is on the list — the line that used to be left to you to work
   out from a stock figure and a minimum */
.owhy {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 11.5px; font-weight: 600;
  color: var(--gold-dark, var(--text-muted));
}
.owhy .ic { width: 13px; height: 13px; flex: none; }
.owhy.hand { color: var(--text-muted); font-weight: 500; }

.oprice { min-width: 84px; text-align: right; font-size: 13px; font-weight: 700; }
.oprice small { display: block; font-weight: 500; color: var(--text-muted); font-size: 10.5px; }
.oprice.na { color: var(--text-muted); font-weight: 500; }
.oprice.best { color: var(--green-dark); }

/* On a phone the row can't be a row: name, quantity, three grocer prices,
   Purchased and a remove button want ~700px and have 350. Left to wrap on
   its own it came out as four ragged lines with a lone × at the bottom, so
   below 720px it's laid out on purpose — what it is, then what you're
   buying and what it costs, then the two buttons.

   The "—" cells for a grocer with no price linked keep their place rather
   than being hidden: an empty column is the honest answer to "what does
   Coles charge", and dropping it would read as "Coles is the same". */
@media (max-width: 720px) {
  .order-row { padding: 12px; gap: 9px 10px; align-items: center; }
  .order-row .oinfo { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .order-row .order-qty { order: 2; flex: none; margin-right: auto; }
  .order-row .oprice { order: 3; min-width: 0; font-size: 12.5px; }
  .order-row .oprice.na { opacity: .5; }
  .order-row .oprice small { font-size: 10px; }
  .order-row .tool { order: 4; flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .order-row .rowbtn.delbtn { order: 5; }
}