/* ================================================================
   Brand Favorite Button  –  pink pill style
   ================================================================ */
.brand-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  padding-top: 3px;
  background-color: #68461c;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  color: #d3a56e;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.brand-fav-btn .fa-heart { font-weight: 400; }
.brand-fav-btn--active .fa-heart { font-weight: 900; }
.brand-fav-text { display: none; }

.brand-fav-btn:hover,
.brand-fav-btn:focus {
  background-color: #68461c;
  color: #d3a56e;
  border-color: transparent;
  transform: scale(1.05);
}

.brand-fav-btn--active {
  background-color: #68461c;
  color: #d3a56e;
}

.brand-fav-btn--active:hover,
.brand-fav-btn--active:focus {
  background-color: #68461c;
  color: #d3a56e;
}

.brand-fav-btn--active .fa {
  animation: brand-fav-pop 0.35s ease;
}

.brand-fav-btn--loading {
  pointer-events: none;
  opacity: 0.5;
}

.brand-fav-text {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: "Raleway", sans-serif;
}

@keyframes brand-fav-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@media (max-width: 575px) {
  .brand-fav-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    padding-top: 3px;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  .brand-fav-btn .brand-fav-text {
    display: none;
  }
}