/* Chips and filters */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-group {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.filter-label {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filter-bar {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.status-filter-chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.tag-filter-chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
}

.shop-filter-chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
}

.filter-chip:active {
  transform: scale(0.98);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.product-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.product-meta-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.product-meta-group .badge-row-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.product-meta-group .tag-chip,
.product-meta-group .set-badge {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 12px;
}

.badge-row-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-row-items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag-chip,
.set-badge,
.favorite-badge,
.count-badge,
.status-badge,
.chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tag-chip,
.chip {
  border-color: var(--color-tag-border);
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
}

.tag-chip-input {
  gap: 6px;
  cursor: pointer;
}

.tag-chip-input input {
  margin: 0;
  accent-color: var(--color-primary);
}

.set-badge {
  border-color: var(--color-set-border);
  background: var(--color-set-bg);
  color: var(--color-set-text);
}

.empty-meta-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.favorite-badge {
  border-color: var(--color-favorite-border);
  background: var(--color-favorite-bg);
  color: var(--color-favorite-text);
}

.favorite-toggle {
  cursor: pointer;
  border-color: var(--color-tag-border);
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
}

.favorite-toggle.is-active {
  border-color: var(--color-favorite-border);
  background: var(--color-favorite-bg);
  color: var(--color-favorite-text);
}

.favorite-toggle:disabled {
  cursor: wait;
  opacity: 0.7;
}

@media (hover: hover) {
  .favorite-toggle:hover {
    border-color: var(--color-favorite-border);
  }
}

.count-badge {
  border-color: var(--color-set-border);
  background: var(--color-set-bg);
  color: var(--color-set-text);
}

.status-badge {
  gap: 6px;
  border-radius: var(--radius);
}

.deadline-badge {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: normal;
}

.deadline-date {
  white-space: nowrap;
}

.deadline-badge .deadline-date:first-child {
  grid-column: 1 / -1;
}

.deadline-note {
  grid-column: 1 / -1;
  min-width: 0;
  color: currentColor;
  font-weight: 650;
  overflow-wrap: break-word;
  word-break: normal;
}

.badge-label {
  opacity: 0.72;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.status-review {
  background: var(--status-review-bg);
  color: var(--status-review-text);
}

.status-buy {
  background: var(--status-buy-bg);
  color: var(--status-buy-text);
}

.status-ordered {
  background: var(--status-ordered-bg);
  color: var(--status-ordered-text);
}

.status-done {
  background: var(--status-done-bg);
  color: var(--status-done-text);
}

.deadline-upcoming {
  background: var(--deadline-upcoming-bg);
  color: var(--deadline-upcoming-text);
}

.deadline-soon {
  background: var(--deadline-soon-bg);
  color: var(--deadline-soon-text);
}

.deadline-today {
  background: var(--deadline-today-bg);
  color: var(--deadline-today-text);
}

.deadline-expired {
  background: var(--deadline-expired-bg);
  color: var(--deadline-expired-text);
}