:root {
  --fw-toggle-section-pt: 24px;
  --fw-toggle-section-pt-first: 36px;
  --fw-toggle-section-pb: 0;
  --fw-toggle-section-pt-md: 36px;
  --fw-toggle-section-pt-first-md: 48px;

  --collection-toggle-header-gap-x: 1rem;
  --collection-toggle-header-gap-y: 0.75rem;
  --collection-toggle-header-gap-x-md: 2rem;
  --collection-toggle-header-gap-y-md: 1rem;
  --collection-toggle-header-px: 0;
  --collection-toggle-header-px-md: 0;

  --collection-toggle-track-bg: rgba(15, 22, 36, 0.04);
  --collection-toggle-track-radius: 0.75rem;
  --collection-toggle-track-padding: 0.125rem;
  --collection-toggle-button-gap: 0.125rem;
  --collection-toggle-button-radius: 0.625rem;
  --collection-toggle-button-height: 2rem;
  --collection-toggle-button-color: #7d7d82;
  --collection-toggle-button-hover-bg: rgba(15, 22, 36, 0.05);
  --collection-toggle-button-active-bg: #fff;
  --collection-toggle-button-active-color: #000;
  --collection-toggle-button-border: 1px solid hsla(240, 0%, 92%, 1);
  --collection-toggle-button-shadow:
    0 1.503px 4.132px 0 rgba(0, 0, 0, 0.03),
    0 0.543px 1.495px 0 rgba(0, 0, 0, 0.02);
  --collection-header-button-gap: 0.25rem;
  --collection-header-button-px: 0.7rem;
  --collection-header-button-duration: 0.25s;
  --collection-header-button-icon-size: 1em;
  --collection-header-button-icon-hover-offset: calc(
    var(--collection-header-button-gap) + var(--collection-header-button-px)
  );
  --collection-header-button-label-shift: calc(
    var(--collection-header-button-icon-size) + var(--collection-header-button-gap)
  );
}

.collection-toggle-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--collection-toggle-header-gap-x);
  row-gap: var(--collection-toggle-header-gap-y);
  padding-left: var(--collection-toggle-header-px);
  padding-right: var(--collection-toggle-header-px);
}

.collection-toggle-header__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.4rem;
}

@media (min-width: 640px) {
  .collection-toggle-header__title {
    font-size: 1.8rem;
  }
}

.collection-toggle-header__buttons {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  background: var(--collection-toggle-track-bg);
  border-radius: var(--collection-toggle-track-radius);
  padding: var(--collection-toggle-track-padding);
  gap: var(--collection-toggle-button-gap);
}

.collection-toggle-header__buttons button {
  box-sizing: border-box;
  height: var(--collection-toggle-button-height);
  padding: 0 0.7rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--collection-toggle-button-radius);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--collection-toggle-button-color);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.collection-toggle-header__buttons button:hover:not([aria-selected="true"]) {
  background: var(--collection-toggle-button-hover-bg);
  color: var(--collection-toggle-button-active-color);
}

.collection-toggle-header__buttons button[aria-selected="true"] {
  background: var(--collection-toggle-button-active-bg);
  color: var(--collection-toggle-button-active-color);
  border: var(--collection-toggle-button-border);
  box-shadow: var(--collection-toggle-button-shadow);
}

.collection-header-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  height: var(--collection-toggle-button-height);
  padding: 0 var(--collection-header-button-px);
  border: var(--collection-toggle-button-border);
  border-radius: var(--collection-toggle-button-radius);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--collection-toggle-button-active-color);
  background: var(--collection-toggle-button-active-bg);
  box-shadow: var(--collection-toggle-button-shadow);
}

.collection-header-button__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--collection-header-button-gap);
}

.collection-header-button__icon[data-icon="before"] {
  position: absolute;
  right: calc(100% + var(--collection-header-button-icon-hover-offset));
  width: var(--collection-header-button-icon-size);
  text-align: center;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--collection-header-button-duration) ease;
}

.collection-header-button__label {
  flex-shrink: 0;
  transform: translateX(0);
  transition: transform var(--collection-header-button-duration) ease;
}

.collection-header-button__icon[data-icon="after"] {
  flex-shrink: 0;
  width: var(--collection-header-button-icon-size);
  text-align: center;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--collection-header-button-duration) ease;
}

.collection-header-button:hover .collection-header-button__icon[data-icon="before"],
.collection-header-button:focus-visible .collection-header-button__icon[data-icon="before"] {
  transform: translateX(calc(var(--collection-header-button-icon-hover-offset) + var(--collection-header-button-icon-size)));
}

.collection-header-button:hover .collection-header-button__label,
.collection-header-button:focus-visible .collection-header-button__label {
  transform: translateX(var(--collection-header-button-label-shift));
}

.collection-header-button:hover .collection-header-button__icon[data-icon="after"],
.collection-header-button:focus-visible .collection-header-button__icon[data-icon="after"] {
  transform: translateX(calc(100% + var(--collection-header-button-icon-hover-offset)));
}

.collection-header-button:hover,
.collection-header-button:focus-visible {
  color: var(--collection-toggle-button-active-color);
}

@media (min-width: 640px) {
  .collection-toggle-header {
    column-gap: var(--collection-toggle-header-gap-x-md);
    row-gap: var(--collection-toggle-header-gap-y-md);
    padding-left: var(--collection-toggle-header-px-md);
    padding-right: var(--collection-toggle-header-px-md);
  }
}

.fw-section.is-collection-hidden {
  display: none !important;
}

/* Fourthwall: Section-Padding für Toggle-Header überschreiben */
.main__sections > .fw-section:has(.collection-toggle-header) > :first-child {
  padding-top: var(--fw-toggle-section-pt) !important;
  padding-bottom: var(--fw-toggle-section-pb) !important;
}

.main__sections > .fw-section:first-child:has(.collection-toggle-header) > :first-child {
  padding-top: var(--fw-toggle-section-pt-first) !important;
}

@media (min-width: 640px) {
  .main__sections > .fw-section:has(.collection-toggle-header) > :first-child {
    padding-top: var(--fw-toggle-section-pt-md) !important;
  }

  .main__sections > .fw-section:first-child:has(.collection-toggle-header) > :first-child {
    padding-top: var(--fw-toggle-section-pt-first-md) !important;
  }
}