/* Shared tier badge styling -- single source of truth for size/position/
   shadow across every page. Colors are set inline per-badge via
   cv-badges.js, since they vary by tier.

   .tier-badge is the default/small size -- used on every grid card
   thumbnail (Listings, homepage, Product Detail mini-cards, Community
   Members, Shop Profile's own listing grid). This exact sizing matches
   the homepage's original values -- do not change without checking
   every page that relies on it.

   .tier-badge-lg is the large variant for bigger single-image contexts
   (e.g. a hero/header photo), where the small size would look tiny and
   lost. Add class="tier-badge tier-badge-lg" to opt into it. */
.tier-badge {
  position: absolute;
  top: 5px; left: 5px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15,27,45,0.12);
}
.tier-badge.tier-badge-lg {
  top: 14px; left: 14px;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(15,27,45,0.16);
}