/* ============================================================
   Badges (extracted from main.css)
   Small circular count indicators — currently cart-only.
   ============================================================ */

/* The count beside a card's title.

   It used to be a red disc pulled 23px up and 5px left, so it floated over
   the card's top border rather than sitting in the header — and red, on a
   site that reserves red for destructive actions. A number of things in a
   basket is not a warning. */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--brand-black);
  color: var(--brand-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cart-badge-navbar {
  display: inline-block;
  background-color: var(--danger);
  color: var(--surface);
  font-size: 0.7em !important;
  font-weight: bold;
  text-align: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: relative;
  top: -9px;
  left: -4px;
  margin-right: -23px;
  padding: 1px;
}