body.gadget-header-active {
  /* This class will be added to the body to prevent conflicts */
}

#gadget-header-wrapper {
  position: relative;
  z-index: 1000; /* Ensure it's in front of the theme header */
}

#gadget-header-container {
  width: 100%;
  max-width: 1260px;
  height: 0;
  padding-top: 19.0476%; /* (240 / 1260) * 100% */
  position: relative;
  margin: 0 auto; /* Center the container */
}

#gadget-header-container canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; /* Behind the video */
}

#gadget-header-container #overlayVideo {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10; /* In front of the canvas */
  pointer-events: none;
}

#gadget-header-container #frontImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 20; /* In front of video and canvas */
  pointer-events: none;
}
