/* AY Natural Topbar */
.ay-topbar {
  width: 100%;
  min-height: 36px;
  background: #6B4F3A;
  color: #FFF8F1;
  font-family: "Manrope", sans-serif;
  overflow: hidden;
  position: relative;
  z-index: 50;
}

.ay-topbar-track {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  min-height: 36px;
}

.ay-topbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.ay-topbar-item:not(:last-child) {
  border-right: 1px solid rgba(255, 248, 241, 0.16);
}

.ay-topbar-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 248, 241, 0.18);
  color: #FFF8F1;
}

.ay-topbar-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

/* Teesieb / Becher etwas größer */
.ay-topbar-item:nth-child(2) .ay-topbar-icon svg {
  width: 16px;
  height: 16px;
}

/* Mobile Slider */
@media (max-width: 767px) {
  .ay-topbar {
    height: 36px;
    min-height: 36px;
  }

  .ay-topbar-track {
    display: flex;
    width: 300%;
    max-width: none;
    min-height: 36px;
    animation: ayTopbarSlide 9s infinite;
  }

  .ay-topbar-item {
    width: 100vw;
    flex: 0 0 100vw;
    padding: 7px 16px;
    font-size: 12.5px;
    gap: 8px;
    white-space: nowrap;
  }

  .ay-topbar-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .ay-topbar-icon svg {
    width: 15px;
    height: 15px;
  }

  .ay-topbar-item:nth-child(2) .ay-topbar-icon svg {
    width: 16px;
    height: 16px;
  }

  .ay-topbar-item:not(:last-child) {
    border-right: none;
  }
}

@keyframes ayTopbarSlide {
  0%, 27% {
    transform: translateX(0);
  }

  33%, 60% {
    transform: translateX(-100vw);
  }

  66%, 93% {
    transform: translateX(-200vw);
  }

  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ay-topbar-track {
    animation: none;
  }
}