/* Custom Styles for Output Solutions */

 /* -------------------------------------------------- */
 /* Slide-in Cart Styles
/* -------------------------------------------------- */

 /* Overlay for when the cart is open */
 .cart-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 998;
     /* Below the cart, above everything else */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }

 .cart-overlay.is-open {
     opacity: 1;
     visibility: visible;
 }

 /* The slide-in cart panel itself */
 .slide-in-cart {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     max-width: 400px;
     /* Adjust width as needed */
     height: 100%;
     background-color: white;
     box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
     z-index: 999;
     /* On top of everything */
     transform: translateX(100%);
     transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     display: flex;
     flex-direction: column;
 }

 .slide-in-cart.is-open {
     transform: translateX(0);
 }

 /* Allow the body of the cart to scroll if items overflow */
 .cart-body {
     flex-grow: 1;
     overflow-y: auto;
     padding: 1.5rem;
 }