/* ===== SHOPPING CART PAGE ===== */

/* Quantity: sized to hold three digits, with the number centred.
   Each quantity is an individual gift, so the field needs to read clearly up
   to 999. Bootstrap's .form-control would otherwise stretch it to fill the
   whole table cell. The extra width beyond 3ch covers the input's own padding
   and the browser's spinner arrows, which sit inside the box. */
.quantity-edit-input {
  /* 3ch for the digits, plus room for the trimmed padding, the border and the
     browser's spinner arrows (which render inside the box, ~17px in Chrome). */
  width: calc(3ch + 2.75rem) !important;
  max-width: none;
  min-width: 0;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  text-align: center;
}

/* No margin here any more. These buttons used to sit in a row beside Update
   cart and needed separating from it; they are now stacked full width in the
   subtotal column, where an 8px left margin pushed the second and third off
   centre against the first. Their spacing comes from the column's own gap. */

/* "Upload Another Photo" / "Continue Shopping" are plain <a> links, not
   <input type="submit">, styled with the same .btn.btn-primary classes as
   "Update cart"/"Checkout"/"Remove" to match the theme. The theme's own
   generic `a.button` rule (element+class, specificity 0,1,1) unexpectedly
   outranks `.btn-primary` (0,1,0) for anchor tags specifically — inputs
   aren't affected since they can't match `a.button` — leaving these two
   links transparent instead of themed. Selector below is specific enough
   to win regardless; color values copied directly from the real rendered
   "Update cart" button rather than guessed. */
a.button.btn-primary.tl-cart-actions-extra {
  background: rgb(177, 181, 246);
  color: rgb(0, 0, 0);
}

a.button.btn-primary.tl-cart-actions-extra:hover {
  background: rgb(44, 197, 95);
  color: rgb(0, 0, 0);
}