@charset "utf-8";

   /* Sidepanel styles */
    #sidepanel {
      height: 100%;
      width: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #000;
      overflow-x: hidden;
      transition: width 0.3s;
      transition: 0.3s;
      z-index: 8000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #sidepanel .icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
    }

    #sidepanel .icon-container img {
      width: 40px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    
    #sidepanel .icon-container img:hover {
    transform: scale(1.5);
    }
    
    #sidepanel .logo-scrollbar {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
    }
    
    #sidepanel .logo-scrollbar img {
      width: 80px;
      padding-bottom: 24px;
    }

.store-icon {
  position: fixed;
  float: right;  /* just in case */
  right: 66px;   /* adjust horizontal position from right edge */  
  display: none;
  top: 22px;     /* adjust vertical position */
  z-index: 11000; /* keep it on top */
 
}

.store-icon img {
  float: right;  /* just in case */
  right: 0;   /* adjust horizontal position from right edge */     
  width: 18%;
  height: auto;
  display: block;
}

/* Hamburger Button: right corner (outside panel) */
#hamburger {
  position: fixed;
  top: 15px;
  right: 22px;
  width: 30px;
  font-size: 30px;
  background: none;
  border: none;
  color: #e53935;
  cursor: pointer;
  z-index: 8100;
  display: none;
}

#hamburger img {
  position: fixed;
  right: 22px;
  width: 33px;
  top: 23px; /* or however you want to align it */
}

/* Close Button: inside left panel, top-left */
#closeBtn {
  padding-top: 12px;
  transform: scale(1.7, 1.7);
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 30px;
  background: none;
  border: none;
  color: #e53935;
  cursor: pointer;
  z-index: 8101;
  display: none;
}

    body.open-panel {
      overflow: hidden;
    }

/* HIDE on large screens */
@media (min-width: 800px) {
  #hamburger {
    display: none !important;
  }

  /* Keep close button hidden by default (JS controls visibility) */
  #closeBtn {
    display: none;
  }

  #sidepanel {
    display: none;
  }

  .menu {
    display: flex;
  }
  
  .store-icon {
  display: none;
}

}

/* SHOW on smaller screens */
@media (max-width: 799px) {
  #hamburger {
    display: block !important;
  }

  /* Keep close button hidden by default (JS controls visibility) */
  #closeBtn {
    display: none;
  }

  #sidepanel {
    display: flex;
  }

  .menu {
    display: none;
  }
  
  .store-icon {
  display: block;
}
 
}