.variants-badge {
  cursor: pointer;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--borderColor);
  background: var(--backgroundColor);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 14px;
  color: var(--darkFontColor) !important;
}
.variants-badge-out {
  color: #dc3545 !important;
  font-weight: 400;
}
.variants-badge.is-embed {
  margin-bottom: 0.5rem;
  margin-top: 0;
  border-width: 2px;
}
.variants-badge.is-embed:last-child {
  margin-bottom: 0;
}
.variants-badge.is-embed .variants-badge-title {
  color: var(--lightFontColor) !important;
}
.variants-badge.is-embed .variants-badge-info b {
  color: var(--lightFontColor);
}
.variants-badge.is-cart {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.variants-badge.is-cart .variants-badge-info {
  font-size: 1rem;
}
.variants-badge.is-cart .variants-badge-info b {
  color: var(--lightFontColor) !important;
}
.variants-badge.is-cart .variants-badge-title {
  color: var(--lightFontColor) !important;
  font-size: 1rem;
}
.variants-badge.is-cart .variants-badge-description {
  font-size: 14px;
}
@media (max-width: 768px) {
  .variants-badge {
    /*max-width: 340px;*/
    margin: 0 auto;
    margin-top: 1rem;
  }
}
@media (max-width: 640px) {
  .variants-badge {
    max-width: 100%;
  }
}
.variants-badge-title {
  color: var(--darkFontColor) !important;
}
.variants-badge-description {
  display: flex;
  font-weight: 400;
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
  font-size: 12px;
  color: var(--darkFontColor);
  opacity: 0.7;
}
.variants-badge-info {
  display: flex;
  font-weight: 400;
  font-size: 12px;
  color: var(--darkFontColor);
  justify-content: space-between;
}
.variants-badge-info b {
  font-weight: 600;
}
.variants-badge.embed {
  width: 2.4rem;
  right: auto;
  left: 1rem;
}
.variants-badge.active {
  border-color: var(--buttonColor);
}