/* Keep the offer and sound controls together inside the hero content grid.
   They share one baseline and do not drift to opposite screen corners. */
@media (min-width: 761px) {
  html:has(main > .hero > .photo video, main > .w-hero > .w-hero-media video) .offer-trigger {
    left: max(6vw, calc((100vw - 1320px) / 2)) !important;
    bottom: 24px !important;
  }

  html:has(main > .hero > .photo video, main > .w-hero > .w-hero-media video)
    :is(main > .hero, main > .w-hero) > .hero-sound-button {
    top: auto !important;
    right: auto !important;
    left: calc(max(6vw, (100vw - 1320px) / 2) + 154px) !important;
    bottom: 24px !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html:has(main > .hero > .photo video, main > .w-hero > .w-hero-media video) .offer-trigger {
    left: 12px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  /* Full-bleed mobile heroes use one consistent lower-right position.
     The homepage keeps its sound control on the framed video itself. */
  html:not([data-page="home"]):has(main > .hero > .photo video, main > .w-hero > .w-hero-media video)
    :is(main > .hero, main > .w-hero) > .hero-sound-button {
    top: auto !important;
    right: 6% !important;
    bottom: 20px !important;
    left: auto !important;
    transform: none !important;
  }
}