Fixed Position Cart - Side of Page

https://cosmo-fluid.squarespace.com/?password=pearler

I've positioned my cart and social links to be fixed to the right side of the page. However, I'm noticing the position of the cart doesn't stay the same like the social links do. Here is my code:

@media screen and (min-width: 749px) {
  
  .header-layout-branding-center-nav-center .header-actions--left {
    right: 4vw !important;
  	left: unset !important;
	  margin-right: 3vw !important;
    flex: 0 1 25% !important;
  }

  .header .header-actions-action--cart .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .header-actions-action--social {
    position: fixed;
    top: 50%;
    flex-direction: column;
    right: 1vw;
  }
  
  .header-actions-action--social .icon {
    margin-left: -40px !important; //change as necessary
    margin-bottom: 20px;
  }

  .header-actions-action--cart {
    position: fixed;
    right: 30px;
    top: 45%;
  }

  .header-actions--right {
    justify-content: center;
  }
}

Any ideas? Thanks!

Hi @PEARLERwork, it seems to me the issue is because the 3 elements are moved independently, or rather moved in 2 groups; the cart and the social icons. And I think some of the code above is actually not doing anything.

The desktop breakpoint in the code is also different to internal SquareSpace breakpoints, so I'm seeing at a certain size, the social icons disappear, leaving only the cart. See below.

The best option would be to move them together in a group, to have them consistent across all sizes.