.faq--question {
  transition: background-color 0.3s ease;
}

.icon--faq {
  transition: transform 0.3s ease;
}

.faq--question.open .icon--faq {
  transform: rotate(45deg);
}

.faq--question.open {
  background-color: var(--_colors---brown);
}

.faq--response {
  height: 0;
  overflow: hidden;
}

.navbar {
  transition: color 0.3s ease;
}

.navbar--bg {
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* Burger menu animations */
@media (max-width: 991px) {
  .navbar--menu {
    display: none;
    transform: translateY(-100vh);
    transition: transform 0.3s ease;
  }

  .menu--to-open {
    transition: opacity 0.3s ease;
  }

  .menu--to-close {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .container--navbar {
    transition: color 0.3s ease;
  }
}

/* Commodity item animations */
.commodity--item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.commodity--item .commodity--img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.commodity--item.active {
  background-color: #4d80dc;
  color: white;
}

.commodity--item.active .commodity--img {
  opacity: 1;
}