/* Hero rotation - Compact */
#sbv2-hero-image{
  transition:opacity .15s ease-in-out, transform 0.3s ease !important;
  transform-origin: center center !important;
  cursor: pointer;
  touch-action: manipulation;
}
#sbv2-hero-image.rotated {
  transform: rotate(10deg) !important;
}
#sbv2-hero-thumbs,#sbv2-hero-thumbs-mobile{pointer-events:auto;z-index:100}

#sbv2-hero-thumbs button,
#sbv2-hero-thumbs-mobile button {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

/* Active state for desktop thumbnails */
#sbv2-hero-thumbs button.is-active {
  background-color: #1a1a1a;
  color: white;
}

#sbv2-hero-thumbs button:not(.is-active) {
  background-color: rgba(255, 255, 255, 0.8);
  color: #1a1a1a;
}

/* Active state for mobile thumbnails */
#sbv2-hero-thumbs-mobile button.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px white;
}

#sbv2-hero-thumbs-mobile button:not(.is-active) {
  opacity: 0.6;
}

/* Hotspot tooltip - only show on hover/touch */
.group > div.absolute.bg-white.rounded-lg.shadow-lg.p-3,
.group > div[class*="bg-white"][class*="rounded-lg"][class*="shadow-lg"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-8px) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

.group:hover > div.absolute.bg-white.rounded-lg.shadow-lg.p-3,
.group:hover > div[class*="bg-white"][class*="rounded-lg"][class*="shadow-lg"],
.group:focus > div.absolute.bg-white.rounded-lg.shadow-lg.p-3,
.group:focus > div[class*="bg-white"][class*="rounded-lg"][class*="shadow-lg"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}

/* Keep the ping animation always visible */
.animate-ping {
  opacity: 0.75 !important;
  visibility: visible !important;
}

/* DESKTOP THUMBNAILS - pushed further right off the hero */
#sbv2-hero-thumbs {
  position: absolute;
  right: -140px !important;
  top: 50%;
  transform: translateY(-50%) !important;
}

/* Desktop thumbnails more transparent */
#sbv2-hero-thumbs button {
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px);
}

#sbv2-hero-thumbs button.is-active {
  background-color: rgba(26, 26, 26, 0.7) !important;
}

/* MOBILE THUMBNAILS - centered and transparent */
#sbv2-hero-thumbs-mobile {
  position: fixed;
  bottom: 24px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto;
  display: flex;
  justify-content: center;
  pointer-events: auto !important;
  z-index: 9999 !important;
  touch-action: manipulation !important;
}

#sbv2-hero-thumbs-mobile > div {
  display: flex;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 8px;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#sbv2-hero-thumbs-mobile button {
  background-color: transparent !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 9999 !important;
  position: relative !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Tablet and smaller: show mobile thumbs, hide desktop */
@media (max-width: 1023px) {
  #sbv2-hero-thumbs {
    display: none !important;
  }
}

/* Desktop: show desktop thumbs, hide mobile */
@media (min-width: 1024px) {
  #sbv2-hero-thumbs-mobile {
    display: none !important;
  }
}

/* Mobile thumbs - allow opacity transitions */
#sbv2-hero-thumbs-mobile {
  will-change: opacity;
}