/* ============================================================
   MAITRA MOBILE FINAL FIX
   Last-loaded mobile-only structural layer.
   ============================================================ */
@media (max-width: 700px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }

  /* Header / hamburger must always be a real touch target. */
  .site-header {
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important;
    width:100% !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:3000 !important;
    pointer-events:none !important;
  }
  .site-header .nav-toggle {
    position:fixed !important;
    top:max(12px, env(safe-area-inset-top)) !important;
    right:max(14px, env(safe-area-inset-right)) !important;
    left:auto !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
    z-index:3001 !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }
  .site-header .nav-toggle .icon { width:26px !important; height:26px !important; }

  /* The mobile command menu owns the complete viewport. */
  .mobile-menu[hidden] { display:none !important; }
  .mobile-menu:not([hidden]) {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:none !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:hidden !important;
    z-index:9999 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    background:#f4f7fa !important;
  }
  .mobile-menu:not([hidden]) .menu-shell {
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
  .mobile-menu:not([hidden]) .menu-layout {
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }
  .mobile-menu:not([hidden]) .menu-nav button,
  .mobile-menu:not([hidden]) .menu-close,
  .mobile-menu:not([hidden]) .menu-action {
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }

  /* Keep the bottom mobile command dock inside the viewport. */
  .hero-command-dock {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    z-index:1500 !important;
    box-sizing:border-box !important;
  }
  .hero-command-actions {
    width:100% !important;
    box-sizing:border-box !important;
  }
  .hero-command-item {
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }

  /* Mobile hero action buttons remain above the dock. */
  .mobile-hero-actions,
  .hero-actions { position:relative !important; z-index:10 !important; }

  /* Gallery image is never hidden while waiting for JS state. */
  .lightbox-figure img#lightboxImg {
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
  }
  .lightbox:not([hidden]) .lightbox-figure { z-index:2 !important; }
  .lightbox:not([hidden]) .lightbox-nav,
  .lightbox:not([hidden]) .lightbox-close,
  .lightbox:not([hidden]) .lightbox-head,
  .lightbox:not([hidden]) .lightbox-thumbs { z-index:5 !important; }
}