.elementor-29356 .elementor-element.elementor-element-19d4610{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-b6902f9 *//* Alphabet bar (stay horizontal, spaced out) */
.brand-alphabet-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.brand-alphabet-bar .brand-letter {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.2s;
}

/* Hover effect */
.brand-alphabet-bar .brand-letter:hover {
  background-color: #ffa368;
  color: #fff;
  border-color: #ffa368;
}

/* Active (selected letter stays highlighted) */
.brand-alphabet-bar .brand-letter.active {
  background-color: #abcc33; /* Motta green */
  color: #fff;
  border-color: #abcc33;
  font-weight: bold;
}

/* Brand list (multi-column grid) */
.brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 20px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.brand-list li {
  margin: 0;
}

.brand-list a {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.2s;
}

/* Brand hover */
.brand-list a:hover {
  background-color: #ffa368; /* Motta orange */
  color: #fff;
  border-color: #ffa368;
}/* End custom CSS */