/* Mobile motion tokens plus the progressive legacy navigation fallback.
 * Values mirror the approved mobile shell in mobile-ux.css and styles.css.
 * Keep selectors here free of :has() and :is() for older Android browsers.
 */
@media (max-width: 760px) {
  /* One continuous reveal, without the old 920ms ease-out tail. */
  .site-nav[data-qilux-clip-reveal] {
    --reveal-open-ms: 140;
    --reveal-close-ms: 100;
    transition-duration: 140ms;
    --reveal-easing: linear;
  }

  .site-chrome.mobile-nav-compat:not(.mobile-drawer-visible) .menu-button {
    position: absolute !important;
    top: 50% !important;
    left: 6px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    transform: translateY(-50%) !important;
    background:
      linear-gradient(#4d4f54, #4d4f54) center 14px / 24px 2px no-repeat,
      linear-gradient(#4d4f54, #4d4f54) center 21px / 24px 2px no-repeat,
      linear-gradient(#4d4f54, #4d4f54) center 28px / 24px 2px no-repeat !important;
  }

  .site-chrome.mobile-nav-compat:not(.mobile-drawer-visible) .site-brand {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    left: 54px !important;
    width: auto !important;
    max-width: calc(100% - 164px) !important;
    min-height: 34px !important;
    gap: 0 !important;
    font-size: 14px !important;
    transform: translateY(-50%) !important;
  }

  body > .site-chrome.mobile-nav-compat:not(.mobile-drawer-visible) > a.play-now {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
    transform: translateY(-50%) !important;
  }

  body.has-active-promotion .site-chrome.mobile-nav-compat:not(.mobile-drawer-visible) {
    top: var(--floating-header-top) !important;
  }

  body > .site-chrome.mobile-nav-compat.mobile-drawer-visible {
    z-index: 36;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    /* A filtered ancestor contains position:fixed descendants to the 66px bar. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-chrome.mobile-nav-compat.mobile-drawer-visible::before,
  .site-chrome.mobile-nav-compat.mobile-drawer-visible::after,
  .site-chrome.mobile-nav-compat.mobile-drawer-visible .site-brand,
  .site-chrome.mobile-nav-compat.mobile-drawer-visible .play-now,
  .site-chrome.mobile-nav-compat.mobile-drawer-visible .top-nav,
  .site-chrome.mobile-nav-compat.mobile-drawer-closing .menu-button {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-chrome.mobile-nav-compat.mobile-drawer-visible .menu-button {
    position: fixed !important;
    top: 10px !important;
    left: 33px !important;
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  .site-chrome.mobile-nav-compat .site-nav {
    top: 0 !important;
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}