/* PremiumEcoBags hero navigation reliability patch — 2026-10-03 */

/* The hero art is exactly 1672:941, so percentage hotspots stay aligned. */
.hero-exact { position: relative; }
.hero-exact .hero-image { pointer-events: none; }
.hero-exact .hotspot {
  position: absolute;
  z-index: 40 !important;
  display: block;
  pointer-events: auto !important;
  background: transparent;
  cursor: pointer;
}

/* Top navigation baked into all six approved hero artworks. */
.hero-exact .hs-portfolio      { left: 30.7%; top: 0.2%; width: 6.7%; height: 7.8%; }
.hero-exact .hs-custom         { left: 37.6%; top: 0.2%; width: 8.8%; height: 7.8%; }
.hero-exact .hs-gigi           { left: 46.6%; top: 0.2%; width: 9.5%; height: 7.8%; }
.hero-exact .hs-sustainability { left: 56.2%; top: 0.2%; width: 9.6%; height: 7.8%; }
.hero-exact .hs-contact        { left: 65.8%; top: 0.2%; width: 6.6%; height: 7.8%; }
.hero-exact .hs-top-cta        { left: 85.0%; top: 0.2%; width: 13.4%; height: 7.8%; }

/* Two large hero CTAs. The controller swaps their destinations per artwork. */
.hero-exact .hs-main-portfolio,
.hero-exact .hs-main-contact {
  top: 49.5%;
  height: 8.4%;
}
.hero-exact .hs-main-portfolio { left: 3.0%; width: 16.7%; }
.hero-exact .hs-main-contact   { left: 19.8%; width: 13.5%; }

/* At tablet/mobile widths use the real HTML navigation, not tiny baked-in text. */
@media (max-width: 1150px) {
  .site-header {
    transform: translateY(0) !important;
  }
  .mobile-menu {
    z-index: 70 !important;
  }
}

@media (max-width: 720px) {
  .hero-exact .hotspot { display: none !important; }
}