pdp-navigation-bar {
  transition: transform 0.3s, visibility 0.3s ease;
}

pdp-navigation-bar,
pdp-navigation-bar.is-enabled.is-scroll-hidden {
  transform: translateY(-300%);
  visibility: hidden;
  pointer-events: none;
}

pdp-navigation-bar.is-enabled {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 992px) {
  pdp-navigation-bar.is-enabled.is-scroll-hidden,
  pdp-navigation-bar {
    transform: translateY(100%);
  }
}