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

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

body.showAnnouncement #MainContent {
  position: relative;
}

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

#AnnouncementBar,
#VeeMarketTopbar {
  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-slider,
  .swiper {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

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