body.showAnnouncement #AnnouncementBar {
  display: flex !important;
}

body.showAnnouncement .ge-free-shipping-container,
body.showAnnouncement #FreeShippingBanner {
  display: none !important;
}

body.showAnnouncement #MainContent {
  position: relative;
}

facets-component.sticky {
  top: calc(var(--initial-header-height) - 65px);
}

#AnnouncementBar,
#StickyBar {
  height: var(--announcement-height);
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  gap: 24px;

  &:has(.marquee) {
    overflow: hidden;
    user-select: none;
    gap: 8px;
  }

  &.split {
    justify-content: space-between;
    gap: 8px;
  }

  .marquee {
    display: flex;
    align-items: center;
    gap: 60px;
    animation: scroll-left var(--scroll-speed) linear infinite;

    &.large {
      gap: 120px;
    }
  }

  .marquee__group {
    display: flex;
    align-items: center;
    gap: 60px;

    &:hover {
      animation-play-state: paused;
    }

    .marquee__item > * {
      white-space: nowrap;
    }
  }

  .marquee__item,
  .slide {
    color: var(--text-color);
    font-size: 13px;

    > * {
      margin: 0;
    }
  }

  .announcement__message {
    color: var(--text-color);
    font-size: 13px;

    > * {
      margin: 0;
      color: var(--text-color);
    }
  }

  .announcement__url {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .announcement__close {
    position: absolute;
    top: 50%;
    right: 0;
    width: 36px;
    height: var(--announcement-height);
    transform: translateY(-50%);
    background-color: inherit;
    z-index: 2;

    svg {
      width: auto;
      height: 100%;
    }
  }

  announcement-slider,
  .swiper {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

#StickyBar {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 20;
  padding: 0 10px;

  &.visible {
    display: flex;
  }

  &.text-static {
    justify-content: var(--text-align-mobile);

    &.split {
      justify-content: space-between;
      gap: 8px;
      padding-right: 40px;
    }
  }

  &.text-right {
    padding-right: 40px;
  }
}

@media screen and (min-width: 990px) {
  #StickyBar {
    padding: 0 20px;
    &.text-static {
      justify-content: var(--text-align);
    }
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}