/* main menu */
nav.menu-list {
  margin: 2.5px 0 0;

  .overflow-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--menu-horizontal-gap);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    column-gap: 1rem;
    justify-content: center;
    line-height: 1.75rem;

    li {
      line-height: 1.75rem;
    }

    .menu-list__link-title {
      padding-inline: 0.5rem;
    }
  }
}

/* facets */
.facets__inputs-wrapper {
  .facets__inputs-list--swatches {
    gap: 1rem !important;

    &.facets__inputs-list--swatches-grid {
      label {
        max-width: 70px !important;
      }
    }
  }
}

dialog {
  .facets__inputs-wrapper {
    .facets__inputs-list--swatches-grid {
      --swatch-columns: 4 !important;
    }
  }

  .facets__inputs-list--swatches .facets__swatch-label {
    white-space: nowrap !important;
  }
}

.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
  --focus-outline: var(--focus-outline-width) solid var(--color-neutral-900);
}

.facets--horizontal .facets__clear {
  padding: 1.125rem var(--facets-clear-padding) !important;
  justify-content: center !important;
  color: var(--color-brand-violet);
  border-top: 0.0625rem solid var(--color-border);
  margin-top: 0.5rem;
  font-weight: var(--font-weight-bold);

  button {
    color: inherit;
    line-height: 1rem;
  }
}

details > .facets__drawer-actions {
  display: none;
}

/* clear all */
.facets-horizontal-remove {
  display: none !important;
}

.facets-remove--mobile-and-vertical {
  facet-remove-component {
    display: flex;

    .facets__clear-all-link {
      font-weight: bold;
      display: block;
    }
  }
}

.facets--drawer {
  .button-secondary,
  .facets__see-results {
    white-space: nowrap;

    @media screen and (max-width: 767px) {
      padding-inline: var(--padding-lg);
    }

    @media screen and (max-width: 420px) {
      padding-inline: var(--padding-lg);
    }
  }
}

/* clear single filter in drawer */
#filters-drawer {
  .facets__form-wrapper.facets-drawer__form-wrapper {
    z-index: 9999;

    accordion-custom details[open] {
      bottom: 90px;

      facet-clear-component {
        display: none;
      }

      .facets__drawer-actions {
        position: absolute;
        bottom: -90px;
        left: 0;
        display: flex !important;
        background: #fff;
        width: 100%;

        &:not(:has(.facets__clear--active)) {
          display: none !important;
        }

        facet-clear-component {
          display: block;

          .facets__clear {
            display: block;
          }
        }
      }
    }
  }
}

/* bugfix for iOS issue where random images are shown in slideshow */
@media screen and (max-width: 767px) {
  product-card slideshow-slides {
    scroll-snap-type: none !important;
    overflow: hidden !important;
    display: block !important;
  }

  product-card slideshow-slide:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
  }

  product-card slideshow-slide:first-child {
    display: block !important;
    width: 100% !important;
  }
}