.purchase-badge {
  flex: 0 0 auto;
  max-width: 190px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 8px DM Mono;
  letter-spacing: .02em;
  text-align: center;
}

.purchase-badge.warranty {
  color: var(--amber);
  background: rgba(255, 199, 107, .08);
  border-color: rgba(255, 199, 107, .22);
}

.purchase-badge.complete {
  color: var(--green);
  background: rgba(96, 230, 168, .08);
  border-color: rgba(96, 230, 168, .22);
}

.purchase-badge.overdue {
  color: var(--red);
  background: rgba(255, 125, 114, .08);
  border-color: rgba(255, 125, 114, .22);
}

@media (max-width: 620px) {
  .purchase-badge {
    max-width: 130px;
    white-space: normal;
  }
}