.offcanvas {
position: fixed;
top: 0;
right: -300px; height: 100%;
width: 300px; background-color: red;
box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
transition: right 0.3s ease-in-out;
z-index: 999;
}
.offcanvas-content {
padding: 20px;
}
.offcanvas-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.cart-toggle {
background: red;
border: none;
cursor: pointer;
font-size: 16px;
margin-right: 20px;
}
.cart-close {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: #555;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); z-index: 998; display: none; }