/* Delivery announcement — infinite marquee (own row above header) */
:root {
  --iamp-announcement-h: 40px;
}

.iamp-announcement {
  position: relative;
  z-index: 2003;
  width: 100%;
  overflow: hidden;
  background: #b5cdcd;
  color: #fff;
  font-size: 22.5px;
  line-height: var(--iamp-announcement-h);
  letter-spacing: .08em;
  white-space: nowrap;
}

.iamp-announcement__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: iamp-announcement-scroll 28s linear infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.iamp-announcement__group {
  display: flex;
  flex: 0 0 auto;
}

.iamp-announcement__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 0 42px;
}

.iamp-announcement__flower {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

@keyframes iamp-announcement-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 600px) {
  :root { --iamp-announcement-h: 36px; }
  .iamp-announcement { font-size: 19.5px; }
  .iamp-announcement__item { padding: 0 28px; gap: 8px; }
  .iamp-announcement__flower { width: 16px; height: 16px; }
  .iamp-announcement__track { animation-duration: 48s; }
}

@media (prefers-reduced-motion: reduce) {
  .iamp-announcement__track { animation-duration: 60s; }
}

/*
 * Transparent/fixed header must sit BELOW the ticker (not under it).
 * After scroll, pin header to the top again — same as before the ticker.
 */
body.header_opacity .header-container,
body.header_opacity .headers-container {
  top: var(--iamp-announcement-h);
}

body.header_opacity.header-scrolled .header-container,
body.header_opacity.header-scrolled .headers-container {
  top: 0;
}