/* Force-center + vertical offset for HERO carousel controls
   Load AFTER sd.css and other carousel CSS.
*/

:root{
  --hero-controls-offset: 100px; /* move DOWN (negative moves UP) */
  --hero-controls-maxw: 1200px;  /* max width of controls row */
}

#hero .hero-carousel-controls{
  width: min(var(--hero-controls-maxw), 92vw) !important;

  /* Center relative to the viewport (not the text column) */
  position: relative !important;
  left: 50vw !important;

  /* Move down + center in one transform so nothing else can cancel it */
  transform: translate(-50%, var(--hero-controls-offset)) !important;

  /* keep layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;

  margin-top: 18px !important;
  z-index: 3; /* above bg/overlay */
}