/* -------------------------------
   Variant group switcher (product page)
   ------------------------------- */
section.variant-group-switcher-section {
  padding-top: var(--padding-section-top, 0px);
  padding-bottom: var(--padding-section-bottom, 0px);
}
.sgsy-variant-switcher {
  margin-top: 24px;
}
.sgsy-variant-switcher__heading {
  font-family: var(--header-font-stack);
  font-weight: var(--header-font-weight);
  color: var(--color-dark-accent);
  margin: 20px 0 28px;
}
.product-details-wrapper .sgsy-variant-switcher__heading {
  font-size: 28px;
}
.sgsy-variant-switcher .sgsy-cards-list {
  margin-bottom: 10px;
}
.sgsy-variant-switcher .sgsy-cards-block {
  aspect-ratio: 1 / 1.5;
}
.sgsy-variant-card__flavor-separator {
  display: block;
}
/* SGsy Variant Switcher: green line above */
.sgsy-variant-switcher {
  position: relative;
  margin-top: 24px;
  padding-top: 12px;
}
/* I didn't want to do this, but the can looked bad */
.sgsy-cards-image.sparkling-energy img {
  object-fit: contain;
  object-position: 20% 25%;
}
.text-link-animated .viewAllBtn a {
  font-size: 18px;
  margin-left: 20px;
  color: var(--color-light-accent);
  font-weight: 500;
  --link-border-color: var(--color-light-accent);
}

.variant-group-switcher-section .sgsy-variant-switcher__heading {
  font-size: 46px;
  margin-bottom: 1.25em;
}
@media screen and (max-width: 767px) {
  .variant-group-switcher-section .sgsy-variant-switcher__heading {
    font-size: 34px;
  }
}

.variant-group-switcher-section .sgsy-variant-switcher__heading {
  text-align: center;
}

/* Recipe/article usage — the bottom link renders as a centred button that
   goes full-width on mobile (via the .btn--full-mobile utility). */
.sgsy-variant-switcher__more {
  margin-top: 3rem;
  text-align: center;
}