.category-btn {
  padding: var(--space-4);

  background: var(--button);
  color: var(--bg-white);

  border: 1px solid var(--button);
  border-radius: 16px 2px 16px 2px;

  font-weight: var(--font-medium);
}

.category-btn:hover {
  background: var(--bg-primary);
  color: var(--button);
  border-color: var(--button);
}
/* Every button in a row gets the row's height, text centred */
.card-category > div {
  display: flex;
}

.card-category .category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tablets fit 5 buttons in one row - less side padding keeps each label
   ("عروض سوفكس") on one line */
@media (min-width: 768px) and (max-width: 991.98px) {
  .card-category .category-btn {
    padding-inline: var(--space-2);
    font-size: 15px;
    white-space: nowrap;
  }
}

/* Phones (2 per row): a last button left alone on its row takes the full
   width instead of sitting in half of it. */
@media (max-width: 767.98px) {
  .card-category > :last-child:nth-child(odd) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}