/* Ensure the transition is smooth */
.Sticky-Scroll-Header {
  transition: transform 0.3s ease-in-out,
              background-color 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out !important;
  top: 0 !important;
}

/* State: Scrolled down (Hidden) */
.Sticky-Scroll-Header.hide-on-scroll {
  transform: translateY(-100%) !important;
}

/* State: Scrolled up (Visible) */
.Sticky-Scroll-Header.show-on-scroll {
  transform: translateY(0) !important;
  background-color: #fff !important;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

/* State: At the very top */
.Sticky-Scroll-Header.at-top {
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Keyboard users: bring the header back when keyboard focus moves into it.
   :focus-visible (not :focus-within), so a menu button that keeps focus
   after a tap/click — e.g. closing the off-canvas — doesn't pin it open. */
.Sticky-Scroll-Header.hide-on-scroll:has(:focus-visible) {
  transform: translateY(0) !important;
}