#sidebar_background {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 5rem; 
   display:none;
   z-index: 6;
}
#sidebar_main {
   --width:var(--sidebar_width);
   position: absolute;
   background-color: #580201;
   display: none;
   flex-direction: column;
   align-items: center;
   gap:var(--sidebar_spacing);
   padding:var(--sidebar_spacing);
   bottom: 0;
   top: 0;
   right: 0;
   animation-delay: 100ms;
   animation-duration: 400ms;
   animation-fill-mode: forwards;
   
   opacity: 0;
   z-index: 1;
   
   
   
}
#cart_main_wrapper {
   display: none;
   --width:var(--sidebar_width);
   background-color: var(--brand);
   padding:var(--sidebar_spacing);
   position: absolute;
   bottom: 0;
   top: 0;
   right: 0;
   animation-delay: 100ms;
   animation-duration: 400ms;
   animation-fill-mode: forwards;
   width: 0;
   
   

   color: black;
   overflow-x: hidden;
}
#cart_main {
   
   display: flex;
   flex-direction: column;
   background-color: var(--brand);
   color: black;
   overflow-x: hidden;
   padding-bottom: 7em;
   gap:var(--sidebar_spacing);
   
   padding-bottom: 7em;
}
#cart_main::-webkit-scrollbar {
   display: none;
 }
 
.cart_item {
   display:grid;
   grid-auto-flow: column;
   grid-template-columns: 1fr 4fr 3fr 0.2fr;
   align-items: center;  
   gap:0.3em;
   height: 5em;
   padding: var(--sidebar_spacing);
   width:calc(var(--sidebar_width) - var(--sidebar_spacing) * 2  );
   background-color: var(--white);
   animation-delay: 100ms;
   animation-duration: 400ms;
   animation-fill-mode: forwards;  
}
.cart_item_img {
  height: 5em;
   aspect-ratio: 3/4;
}
.cart_item_variant_name {
   font-size: 0.9em;
   color: var(--grey_3);
}
.cart_item_img > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   
}
.cart_item_price_box {
   display: flex;
   gap: 1rem;
   
   align-items: center;
}
.cart_item_quantity {
   font-weight: 500;
   
   border-radius: 100vw;
}

.cart_item_delete_button {
   height: 2.5em;
   width: 2.5em;
   background-color: var(--red_default);
   border-radius: 100vw;
   border: none;
}
.cart_item_delete_button > img {
   height: 1.6em;
   width: 1.6em;
   
}
.cart_buttons_container {
   position: absolute;
   padding: 0.5em;
   bottom: 0;
   left: 0;
   display: flex;
   
   gap: 1rem;
   
   justify-content: center;
   width: 100%;
   background-color: #00000052;
}
.cart_order_button {
   
   height: 2em;
  display: flex;
   background-color: var(--red_default);
   justify-content: center;
   align-items: center;
   padding: 0.5em;
   padding-left: 1em;
   padding-right: 1em;
   font-size: 1.3em;
   border-radius: 100vw;
}
.continue_button {
   height: 2em;
  display: flex;
   background-color: black;
   justify-content: center;
   align-items: center;
   padding: 0.5em;
   padding-left: 1em;
   padding-right: 1em;
   font-size: 1.3em;
   border-radius: 100vw;
}


@keyframes cart_item_delete {
   0% {
      width: 0;
      opacity: 0;
      
      
      
   }
   100% {
      width: var(--width);
      opacity: 1;
      
   }

}
#sidebar_top {
   --width: calc(var(--sidebar_width) + var(--sidebar_spacing) * 4);
    position: absolute;
    display: none;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    
   
    right: 0;
    height: 100%;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    background-color: var(--red_default);
    z-index: 1;
}
#sidebar_top > img {
   height: 1.5rem;
}
#sidebar_top_cart {
   --width: calc(var(--sidebar_width) + var(--sidebar_spacing) * 4);
    position: absolute;
    display: none;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    width: var(--width);
   
    right: 0;
    height: 100%;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    background-color: var(--red_default);
    z-index: 1;
}
#sidebar_top_cart > img{
   height: 1.8rem;
}
#sidebar_top_cart > a{
   font-size: 1.3em;
   display: flex;
   
   align-items: center;
   height: 2rem;
   background-color: var(--brand);
   padding: 0.5em;
   border-radius: 100vw;
}

@keyframes sidebar_open {
   0% {
      width: 0;
      opacity: 0;
      
      
      
   }
   100% {
      width: var(--width);
      opacity: 1;
      
   }

}
@keyframes sidebar_close {
   0% {
      width: var(--width);
      opacity: 1;  
   }
   40% {
      opacity: 1;
   }
   60% {
      opacity: 0;
   }
   100% {
      width: 0;
      display: none;
      opacity: 0; 
   }
      
}
.sidebar_menu_row {
   display:grid;
   grid-auto-flow: column;
   grid-template-columns: 1fr 3fr;
   align-items: center;
   padding: var(--sidebar_spacing);
   min-height: 2.8em;
   width:calc(var(--sidebar_width) - var(--sidebar_spacing) * 2  );
   background-color:var(--grey_1);
   
}
.sidebar_menu_row > img {
   height: 2em;
}

@media (max-width: 561px) {
   :root {
      --sidebar_width:95vw;
      --sidebar_spacing:2.5vw;
   }
   #nav_menu_bt {
      
      height: 4em;
      width: 4em;
     
      
    }
    .cart_buttons_container {
      font-size: 3.8vw + 0.1em;
      padding: 0.1em;
   }
   
   
}