/* Final mobile-only overrides: clean Ketabika drawer and eliminate trailing blank area. */
@media (max-width:700px) {
  html { height:auto !important; min-height:100% !important; }
  html body {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:clip !important;
  }
  body > header.site-header { flex:0 0 auto !important; }
  body > main {
    display:block !important;
    flex:1 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
  }
  body > footer.footer {
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
    position:relative !important;
    inset:auto !important;
  }
  body > #back-to-top,
  body > .cart-drawer-overlay,
  body > .cart-drawer { flex:0 0 auto !important; }

  /* Mobile navigation: tidy light panel, coordinated with Ketabika indigo branding. */
  html body .site-header nav#primary-navigation,
  html body .site-header .header-row > nav#primary-navigation {
    display:none !important;
    position:fixed !important;
    top:64px !important;
    left:10px !important;
    right:10px !important;
    bottom:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 76px) !important;
    margin:0 !important;
    padding:10px !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    background:#fff !important;
    color:#29286f !important;
    border:1px solid #dedcff !important;
    border-radius:16px !important;
    box-shadow:0 14px 38px rgba(48,45,150,.22) !important;
    z-index:100002 !important;
    white-space:normal !important;
    transform:none !important;
  }
  html body.mobile-nav-open .site-header nav#primary-navigation,
  html body.mobile-nav-open .site-header .header-row > nav#primary-navigation {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  html body .site-header nav#primary-navigation > a,
  html body .site-header nav#primary-navigation > .nav-item,
  html body .site-header nav#primary-navigation > .nav-item > .nav-main-link {
    display:flex !important;
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 12px !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    color:#302e83 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:9px !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    text-align:right !important;
    white-space:normal !important;
    box-shadow:none !important;
    transform:none !important;
  }
  html body .site-header nav#primary-navigation > .nav-item {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  html body .site-header nav#primary-navigation > a:hover,
  html body .site-header nav#primary-navigation > .nav-item.submenu-open > .nav-main-link {
    color:#fff !important;
    background:linear-gradient(100deg,#3737bd,#5b4cf0) !important;
  }
  html body .site-header nav#primary-navigation .nav-chevron { color:#6254ed !important; }
  html body .site-header nav#primary-navigation .nav-submenu,
  html body .site-header nav#primary-navigation .nav-item:hover > .nav-submenu,
  html body .site-header nav#primary-navigation .nav-item:focus-within > .nav-submenu {
    display:none !important;
    position:static !important;
    inset:auto !important;
    float:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:3px 0 7px !important;
    padding:6px !important;
    overflow:visible !important;
    background:#f4f3ff !important;
    border:1px solid #e2e0ff !important;
    border-radius:11px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  html body .site-header nav#primary-navigation .nav-item.submenu-open > .nav-submenu {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  html body .site-header nav#primary-navigation .nav-submenu a {
    display:flex !important;
    align-items:center !important;
    min-height:38px !important;
    width:100% !important;
    padding:9px 10px !important;
    color:#34316f !important;
    background:transparent !important;
    border-radius:7px !important;
    font-size:13px !important;
    line-height:1.45 !important;
    white-space:normal !important;
  }
  html body .site-header nav#primary-navigation .nav-submenu a:hover {
    color:#302e83 !important;
    background:#e6e4ff !important;
  }
  html body .site-header .mobile-nav-toggle {
    top:8px !important;
    left:12px !important;
    right:auto !important;
    z-index:100003 !important;
    background:#3737bd !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 3px 10px rgba(55,55,189,.22) !important;
  }
}