.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

/* Sizes */
.badge--sm {
  height: 20px;
  padding: 0 var(--space-2);
  font-size: 10px;
}

.badge--md {
  height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
}

.badge--lg {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* Product variants */
.badge--sale {
  background-color: var(--color-badge-sale-bg);
  color: var(--color-badge-sale);
}

.badge--new {
  background-color: var(--color-badge-new-bg);
  color: var(--color-badge-new);
}

.badge--hit {
  background-color: var(--color-badge-hit-bg);
  color: var(--color-badge-hit);
}

.badge--novelty {
  background-color: var(--color-badge-novelty-bg);
  color: var(--color-badge-novelty);
  border: 1px solid var(--color-badge-novelty);
}

.badge--out-of-stock {
  background-color: var(--color-badge-out-of-stock-bg);
  color: var(--color-badge-out-of-stock);
}

/* Status badges */
.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge--danger {
  background-color: #fde8e9;
  color: var(--color-danger);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.badge--muted {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

/* Filter toggle badges */
.badge-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-badge);
  cursor: pointer;
  transition: var(--transition-fast);
}

.badge-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.badge-toggle--active {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* Active filter tags (removable) */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  transition: border-color var(--transition-fast);
}

.filter-tag:hover {
  border-color: transparent;
}

.filter-tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

.filter-tag__remove:hover {
  color: var(--color-danger);
  background-color: var(--color-surface);
  border-radius: 50%;
}

/* Cart counter badge */
.counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-family: var(--font-heading);
  color: #ffffff;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}