/* shared-brand-chips — extracted from v1-category-18.html
   Source of truth — based on baseline file. */

.brand-chips {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

.brand-chips::-webkit-scrollbar { display: none; }

.brand-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px;
    background: white;
    border: 1.5px solid var(--color-border-tertiary);
    border-radius: 10px;
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0; min-height: 44px;
    transition: border-color 0.15s, color 0.15s;
  }

.brand-chip:hover { border-color: var(--green); color: var(--green-dark); }

.brand-chip.active {
    border-color: var(--green); color: var(--green-dark); background: var(--green-light);
  }

.brand-chip .count {
    font-size: 0.75rem; color: var(--color-text-tertiary); font-weight: 500;
  }

.brand-chip.active .count { color: var(--green); }