.categories button {
  background: var(--bg-color);
  border: 2px solid var(--accent);
  color: var(--text);
  padding: 0.5rem 1.2rem;
  margin: 0 0.2rem;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.categories button.active, .categories button:focus {
  background: var(--accent);
  color: var(--bg-color);
  border-color: var(--text);
}
.categories button:hover:not(.active) {
  background: var(--accent);
  color: var(--bg-light);
  border-color: var(--accent);
}