#fw-section-header {
--color-primary: #ff0000;
--color-primary-rgb: 255, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ff0000;
--color-on-background-rgb: 255, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* Your fixed menu - make sure it’s above the marquee */
.menu { /* replace .menu with your actual menu class or ID */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px; /* adjust if different */
  background: #222; /* or your menu background */
  z-index: 10000; /* high so it’s on top */
}

/* Marquee positioned below the menu */
.announcement-bar__ticker-container {
  position: fixed;
  top: 50px; /* exactly below the menu */
  left: 0;
  width: 100vw;
  background-color: #111;
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
  padding: 10px 0;
  z-index: 9999; /* just under menu */
  overflow: hidden;
}

/* Push content down so nothing is covered */
body {
  padding-top: 90px; /* menu height (50) + marquee height (about 40) */
}

}







#fw-section-announcement-bar-e92d8ece-40cd-4125-bd2d-0735e6513263 {
--color-primary: #ff0000;
--color-primary-rgb: 255, 0, 0;
--color-background: #ff0000;
--color-background-rgb: 255, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ff0000;
--color-on-background-rgb: 255, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 76;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-custom-html-6d9cd212-ebce-43fc-9c9d-7942c64a6406 {

/* Existing marquee container styles */
.announcement-bar__ticker-container {
  position: fixed;  /* keep it fixed at top */
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9999;
  background-color: #111;
  padding: 10px 0;
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
  overflow: hidden;
}

/* Push page content down so menu is not overlapped */
body {
  padding-top: 50px; /* adjust to marquee height */
}

/* Your existing marquee scrolling animation and styling below */
.announcement-bar__ticker-marquee {
  display: flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  white-space: nowrap;
  color: white;
  font-size: 1rem;
  user-select: none;
}

.announcement-bar__ticker-line {
  display: flex;
  align-items: center;
  padding-right: 50px;
}

.announcement-bar__ticker-line span {
  padding: 0 5px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Marquee below the fixed menu */
.announcement-bar__ticker-container {
  position: fixed;
  top: 50px;  /* adjust to menu height */
  left: 0;
  width: 100vw;
  z-index: 9999;  /* just below menu */
  background-color: #111;
  padding: 10px 0;
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
  overflow: hidden;
}
}