.cart-button{position:relative;padding:10px;width:100%;height:44px;border:0;border-radius:9999px;background-color:hsl(var(--themeButton));outline:none;cursor:pointer;color:hsl(var(--themeBtnTextColor));transition:.3s ease-in-out;overflow:hidden}.cart-button:hover{background-color:hsl(var(--themeButton)/.8)}.cart-button:active{transform:scale(.9)}.cart-button .fa-shopping-cart{position:absolute;z-index:2;top:50%;left:-10%;font-size:25px;transform:translate(-50%,-50%)}.cart-button .fa-box{position:absolute;z-index:3;top:-30%;left:52%;font-size:15px;transform:translate(-70%,-50%)}.cart-button span{position:absolute;z-index:3;left:50%;top:50%;color:#fff;transform:translate(-50%,-50%)}.cart-button span.add-to-cart{opacity:1}.cart-button span.added{opacity:0}.cart-button.clicked .fa-shopping-cart{animation:cart 1.5s ease-in-out forwards}.cart-button.clicked .fa-box{animation:box 1.5s ease-in-out forwards}.cart-button.clicked span.add-to-cart{animation:txt1 1.5s ease-in-out forwards}.cart-button.clicked span.added{animation:txt2 1.5s ease-in-out forwards}@keyframes cart{0%{left:-10%}40%,60%{left:50%}to{left:110%}}@keyframes box{0%,40%{top:-20%}60%{top:40%;left:52%}to{top:40%;left:112%}}@keyframes txt1{0%{opacity:1}20%,to{opacity:0}}@keyframes txt2{0%,80%{opacity:0}to{opacity:1}}@media (min-width:768px){.cart-button .fa-box{left:50%;transform:translate(-100%,-50%)}}@media (min-width:1024px){.cart-button .fa-box{position:absolute;z-index:3;top:-30%;left:52%;font-size:15px;transform:translate(-50%,-50%)}}@media (min-width:1440px){.cart-button .fa-box{position:absolute;z-index:3;top:-30%;left:52%;font-size:15px;transform:translate(-70%,-50%)}}