.sgsy-cards-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.sgsy-cards-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.sgsy-cards-footer {
  display: flex;
  margin-top: 1.25rem;
}
.sgsy-cards-title-align--left { justify-content: flex-start; text-align: left; }
.sgsy-cards-title-align--center { justify-content: center; text-align: center; }
.sgsy-cards-title-align--right { justify-content: flex-end; text-align: right; }
.sgsy-cards-title {
  color: var(--color-main-accent);
  font-weight: bold;
  margin: 0 0 1rem;
}

.sgsy-cards-view-all {
  color: var(--color-main-accent);
  text-decoration: underline;
  font-size: 1rem;
}
.sgsy-cards-list {
  width: 100%;
  display: flex;
  gap: 2rem;
  /* Plain "center" is "unsafe" by default: when the cards overflow, centering
     clips the leading edge and there's no way to scroll back to it (the
     trailing edge stays reachable since that's the normal overflow direction).
     "safe center" centers when everything fits and falls back to start-aligned
     when it doesn't, so the first card never gets stranded off-screen. */
  justify-content: flex-start;
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Hide scrollbar for aesthetics */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.product-details-wrapper .sgsy-cards-list {
  justify-content: flex-start;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .sgsy-cards-list.has-badge {
    padding-top: 3rem;
    overflow-x: visible;
  }
}
.sgsy-cards-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

@media screen and (max-width: 830px) {
  .sgsy-cards-list {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .sgsy-cards-list:not(.mobile-scroll) {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
  }
  .sgsy-cards-list.mobile-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    justify-content: flex-start;
  }
  .sgsy-cards-title {
    font-size: 40px;
  }
}

.sgsy-cards-header + .sgsy-cards-description {
  margin-top: -1rem;
}
@media screen and (min-width: 768px) {
  .sgsy-cards-description {
    margin-left: auto;
    margin-right: auto;
  }
}
.sgsy-cards-description {
  max-width: 100%;
  margin-bottom: 2.5rem;
}

.sgsy-cards-layout--center {
  margin-left: auto;
  margin-right: auto;
}
.sgsy-cards-layout--left {
  margin-left: 0;
}
.sgsy-cards-layout--right {
  margin-left: auto;
  margin-right: 0;
}
.sgsy-cards-button-container {
  display: flex;
  margin-top: 3rem;
}
.sgsy-cards-button-align--left { justify-content: flex-start; }
.sgsy-cards-button-align--center { justify-content: center; }
.sgsy-cards-button-align--right { justify-content: flex-end; }
@media screen and (max-width: 767px) {
  .sgsy-cards-button-container.hide-on-mobile {
    display: none;
  }
}

.sgsy-variant-switcher-description {
  width: 836px;
  max-width: 100%;
  margin: 0 auto 3rem;
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .sgsy-variant-switcher-description {
    margin: 0 0 1.5rem;
  }
}