/* Local parity guard: restore the approved shaped Services tab artwork after
   the shared global-menu stylesheet's rectangular gradient fallback. */
html body:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__trigger,
html body:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer:not(.is-open):not(:hover) .lux-event-drawer__trigger:not(:focus-visible),
html body:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__trigger:hover,
html body:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__trigger:focus-visible {
  background: center / 100% 100% no-repeat url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png") !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Keep the copied Live Instrumentation drawer authoritative over legacy,
   page-specific drawer declarations that remain in older page stylesheets. */
html body[class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class]:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__panel {
  --drawer-tab-size: 58px !important;
  width: 286px !important;
  grid-template-columns: 58px 228px !important;
}

html body[class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class]:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__trigger {
  grid-column: 1 !important;
  width: 58px !important;
  background: center / 100% 100% no-repeat url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png") !important;
  background-image: url("https://charlestonweddingdjs.com/wp-content/uploads/2026/05/drawer-tabe-desktop.png") !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body[class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class]:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__body {
  grid-column: 2 !important;
  width: 228px !important;
  min-width: 0 !important;
  max-width: none !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

html body[class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class]:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer:is(:hover, .is-open) .lux-event-drawer__panel,
html body[class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class][class]:is(.dj-piano-page, .live-instrumentation-page, .lighting-page, .photobooth-page, .song-editing-page, .afterparty-page) .lux-event-drawer .lux-event-drawer__panel:focus-within {
  transform: translateX(0) !important;
}

/* Restore the approved rest-to-photo card transition without touching the
   corrected Services drawer. */
html body.live-instrumentation-page.live-instrumentation-page
  #live-video-gallery-stack
  :is(#video-gallery, #video-gallery-duplicate)
  .dj-video-grid__hover {
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: center top !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.live-instrumentation-page.live-instrumentation-page
    #live-video-gallery-stack
    :is(#video-gallery, #video-gallery-duplicate)
    .dj-video-grid__card:is(:hover, :focus-visible)
    .dj-video-grid__rest {
    opacity: 0 !important;
    visibility: visible !important;
    transform: scale(0.82) !important;
    filter: saturate(0.88) !important;
  }

  html body.live-instrumentation-page.live-instrumentation-page
    #live-video-gallery-stack
    :is(#video-gallery, #video-gallery-duplicate)
    .dj-video-grid__card:is(:hover, :focus-visible)
    .dj-video-grid__hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(4%) scale(1) !important;
  }
}

html body.live-instrumentation-page .dj-video-grid__lightbox-native-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(56.25vw, 540px);
  object-fit: contain;
  background: #000;
}

html body.live-instrumentation-page .dj-video-grid__lightbox-native-video[hidden] {
  display: none !important;
}