#fw-section-hero-7d666b42-651a-4980-8c16-0d09a8c2cd08 {
--color-primary: #8a5a3e;
--color-primary-rgb: 138, 90, 62;
--color-background: #f3f3f3;
--color-background-rgb: 243, 243, 243;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #f3f3f3;
--color-background-brightness: 243;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-announcement-bar-5b73637a-5564-484b-9920-17cf9cd0cbb0 {

/* Pick your bar selector(s) here */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar){
  /* Base look (tweak as needed) */
  --bar-h: 56px;
  --bg: #0a0f1f;
  --bg2:#0d1430;
  --txt:#e8efff;
  --accent:#8fd3ff;
  --star: rgba(255,255,255,.9);
  --star-dim: rgba(255,255,255,.35);

  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--bar-h);
  color: var(--txt);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
  overflow: hidden;
}

/* Make inside links pop a bit */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar) a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar) a:hover{
  border-bottom-color: currentColor;
}

/* ★ Starfield layer (scrolling background) */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  /* two parallax star layers */
  --stars1:
    radial-gradient(1px 1px at 10% 20%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 75% 65%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 90% 35%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 42% 52%, var(--star-dim) 99%, transparent 100%),
    radial-gradient(1px 1px at 12% 60%, var(--star-dim) 99%, transparent 100%),
    radial-gradient(1px 1px at 82% 12%, var(--star-dim) 99%, transparent 100%);
  --stars2:
    radial-gradient(1px 1px at 5% 50%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, var(--star-dim) 99%, transparent 100%),
    radial-gradient(1px 1px at 48% 70%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 65% 30%, var(--star) 99%, transparent 100%),
    radial-gradient(1px 1px at 88% 75%, var(--star-dim) 99%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, var(--star) 99%, transparent 100%);
  background-image: var(--stars1), var(--stars2);
  background-repeat: repeat;
  background-size: 600px var(--bar-h), 900px var(--bar-h);
  animation: bar-drift-1 40s linear infinite, bar-drift-2 70s linear infinite;
}

/* 🪐 Tiny planet with glow (floats on the right) */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::after{
  content:"";
  position:absolute;
  right: clamp(12px, 6vw, 40px);
  top: 50%;
  width: 22px; height: 22px;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 30%, #e7f7ff 0 35%, #79c4ff 36% 60%, #1a6fa6 61% 100%);
  box-shadow:
    0 0 10px 2px rgba(143,211,255,.6),
    0 0 24px 8px rgba(143,211,255,.15);
  animation: bar-float 6s ease-in-out infinite;
}

/* Ring (using a second box-shadow via outline trick) */
@supports (mask: radial-gradient(#000, #000)){
  :is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::after{
    outline: 8px solid rgba(143,211,255,.35);
    outline-offset: 0px;
    mask: radial-gradient(circle at 50% 50%, transparent 60%, #000 61%);
    box-shadow:
      0 0 10px 2px rgba(143,211,255,.6),
      0 0 24px 8px rgba(143,211,255,.15);
  }
}

/* Keyframes */
@keyframes bar-drift-1{
  0%   { background-position:   0 0, 0 0; }
  100% { background-position: 600px 0, 0 0; }
}
@keyframes bar-drift-2{
  0%   { background-position: 0 0,   0 0; }
  100% { background-position: 0 0, 900px 0; }
}
@keyframes bar-float{
  0%,100%{ transform: translateY(-50%) translateY(-2px); }
  50%    { transform: translateY(-50%) translateY( 2px); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::before,
  :is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::after{
    animation: none;
  }
}

/* 🌙 Moon (left) + ☀️ Sun (right) addition */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::before,
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::after {
  z-index: 2;
}

/* Moon on left */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::before {
  content: "";
  position: absolute;
  left: clamp(12px, 5vw, 48px);
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #e7f7ff 0 40%, #a4bfff 41% 65%, #2c335f 66% 100%);
  box-shadow: 0 0 10px 3px rgba(173,205,255,0.5), 0 0 20px 8px rgba(173,205,255,0.2);
}

/* Sun on right */
:is(.announcement-bar, .site-announcement, .announce, #announcement-bar)::after {
  content: "";
  position: absolute;
  right: clamp(12px, 5vw, 48px);
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, #fff5cc 0 35%, #ffd44d 36% 60%, #e1a600 61% 100%);
  box-shadow: 0 0 10px 3px rgba(255,214,77,0.5), 0 0 20px 8px rgba(255,214,77,0.2);
}

}