/* =============================================================================
   AVE CHIPS - filtro di secondo livello (sotto-categorie)
   Sta sotto il menu di sezione (.cs-menu), che porta il PRIMO livello: percio'
   non ne ripete la forma - niente sottolineatura, niente bordi a tutta larghezza
   - ma usa le pillole, cosi' la gerarchia fra le due righe si legge a colpo
   d'occhio invece di sembrare due menu pari grado.
   ============================================================================= */
.df-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.df-chips__item {
  /*
   * Pillola piena: il raggio e' meta' dell'altezza, non il --ave-button-radius
   * del kit. E' voluto - la forma e' cio' che distingue un filtro da un bottone
   * di azione, e qui le chips stanno subito sotto il menu di sezione.
   */
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--ave-color-border, #e5e5e5);
  border-radius: 999px;
  background: var(--ave-color-white, #fff);
  color: var(--e-global-color-text, #1a1a1a);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.df-chips__item:hover,
.df-chips__item:focus-visible {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

/*
 * L'attiva e' il nero pieno del design nuovo, scritto LETTERALE e non con
 * var(--e-global-color-*): le variabili di colore Elementor si ereditano, e un
 * container che ne ridefinisca una spegnerebbe lo stato attivo senza che niente
 * lo segnali (e' gia' successo con la freccia delle card cataloghi).
 */
.df-chips__item.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 767px) {
  .df-chips {
    /* In riga sola con scorrimento: a capo mangerebbe mezzo schermo. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  .df-chips__item {
    font-size: 13px;
    padding: 8px 14px;
  }
}