.main-cart-drawer {
  display: flex;
  right: 0;
  top: 0;
  position: fixed;
  height: 100dvh;
  z-index: 100;
  background: white;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: var(--tr);
  overflow: hidden;
  &.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0%);
  }
  .cart-drawer-wrapper {
    max-width: 760px;
    height: 100%;
    width: 100vw;
    display: flex;
    padding: var(--s24);
    flex-direction: column;
    gap: var(--s20);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    .titles {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .close {
        cursor: pointer;
        svg {pointer-events: none;}
      }
    }
    .cart-contents {
      display: grid;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      position: relative;
      .loading {
        position: absolute;
        inset: 0;
        background-color: rgba(255,255,255,0.3);
        z-index: 5;
        display: none;
      }
      .whole-wrapper {
        display: grid;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        .no-items {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: var(--s20);
        }
      }
      form {
        display: grid;
        flex-direction: column;
        height: 100%;
        grid-template-rows: minmax(0, auto) 1fr;
        overflow: hidden;
      }
      .contents-wrapper {
        overflow-y: auto;
        padding-right: var(--s12);
        &::-webkit-scrollbar {
          width: 2px; /* width of the scrollbar */
        }
        
        &::-webkit-scrollbar-track {
          background-color: var(--tur_10); /* color of the track */
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: var(--tur_100); /* color of the scroll thumb */
          border-radius: 5px; /* roundness of the scroll thumb */
        }
        
        &::-webkit-scrollbar-thumb:hover {
          background-color: var(--tur_120); /* color of the scroll thumb on hover */
        }
        .products-wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--s4);
          .line-item {
            border-bottom: 1px solid var(--tur_10);
            padding-bottom: var(--s4);
          }
          .line-item__content-wrapper {
            display: block;
            grid-template-columns: var(--s54) auto;
            align-items: center;
            gap: var(--s4);
            
            .line-item__image-wrapper {
              display: none;
              aspect-ratio: 1/1;
              align-items: center;
              max-width: var(--s54);
              img {
                width: 100%;
                height: auto;
              }
            }
            .custom-set {
              font-size: var(--s14);
              font-weight: 600;
              height: auto;
              aspect-ratio: unset;
              align-self: start;
            }
            .line-item__info {
              display: grid;
              grid-template-columns: auto 1fr;
              gap: var(--s16);
              @media screen and (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: var(--s8);
              }
              .product-item-meta__title {
                display: flex;
                flex-direction: column;
                gap: var(--s4);
                .sku {
                  font-size: var(--s12);
                  color: var(--text_secondary);
                }
              }
              .product-item-meta {
                display: flex;
                justify-content: space-between;
                svg {
                  width: var(--s20);
                  height: var(--s20);
                  path {fill:var(--text_secondary)};
                }
                
              }
              .bundle-item {
                display: flex;
                .image {
                  min-width: var(--s54);
                  max-width: var(--s54);
                  display: flex;
                  aspect-ratio: 1/1;
                  align-items: center;
                  justify-content: center;
                  img {
                    width: 100%;
                    height: auto;
                  }
                }
              }
              .line-bottom {
                display: flex;
                /* grid-template-columns: 1fr 1fr 40px; */
                align-items: center;
                justify-content: end;
                gap: var(--s16);
                .line-item__quantity {
                  @media screen and (max-width: 767px) {
                    flex: 1 0 0;
                  }
                }
                .quantity-selector {
                    flex: 1 0 80px;
                    min-height: 38px;
                    background-color: var(--tur_05);
                    border: 1px solid var(--tur_20);
                    border-radius: 8px;
                    align-items: center;
                    display: flex;
                    gap:1px;
                    @media screen and (max-width: 767px) {
                      width: fit-content;
                    }
                    .quantity-selector__button {
                      display: flex;
                      border: none;
                      background-color: unset;
                      cursor: pointer;
                      padding: 6px;
                      svg {
                        width: 14px;
                        height: 14px;
                      }
                    }
                    svg {
                      width: 18px;
                      height: 18px;
                    }
                    input {
                      width: 3ch;
                      background-color: transparent;
                      pointer-events: none;
                      padding: unset;
                      border: unset;
                      font-size: 13px;
                      -moz-appearance: unset;
                      -webkit-appearance: unset;
                      appearance: unset;
                      text-align: center;
                      &::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                      }
                    }
                }
                .line-item__remove-button {
                  display: flex;
                  padding: 4px;
                  align-items: center;
                  justify-content: center;
                  border-radius: 4px;
                  &:hover {
                    background-color: var(--tur_05);
                  }
                  > * {
                    pointer-events: none;
                  }
                  svg {
                    width: 20px;
                    height: 20px;
                    @media screen and (max-width: 767px) {
                      width: 18px;
                      height: 18px;
                    }
                  }
                }
                .line-item__price-list-container {
                  display: flex;
                  align-items: end;
                  min-width: 150px;
                  gap: var(--s8);
                  .price--compare {
                    display: none;
                    font-size: var(--s14);
                    line-height: var(--s18);
                    color: var(--text_secondary);
                    text-decoration: line-through;
                  }
                }
              }
            }
          }
          .gift-item {
            padding: var(--s8) var(--s16);
            background-color: var(--tur_05);
            margin-top: var(--s16);
            border: none;
            border-radius: var(--s8);
            .product-item-meta {
              flex-direction: column;
              gap: var(--s4);
            }
            .line-item__info {
              flex-direction: row;
              justify-content: space-between;
            }
            .line-item__image-wrapper {
              display:none;
              background-color: white;
              border-radius: var(--s2);
            }
            button {
              align-self: center;
            }
          }
          .recommendations-wrapper {
            padding-top: var(--s16);
            max-height: 100%;
            display: flex;
            flex-direction: column;
            .recommendations {
              margin-top: var(--s12);
              height: 100%;
              display: flex;
              flex-direction: column;
              gap: var(--s4);
              .recommendation-product {
                display: grid;
                grid-template-columns: var(--s54) auto;
                align-items: center;
                gap: var(--s4);
                .image {
                  display: flex;
                  aspect-ratio: 1/1;
                  align-items: center;
                  max-width: var(--s88);
                  img {
                    width: 100%;
                    height: auto;
                  }
                }
                .content-wrapper {
                  display: flex;
                  flex-direction: column;
                  gap: var(--s4);
                  .bottom-wrapper {
                    display: flex;
                    justify-content: space-between; 
                    align-items: center;
                    .prices {
                      display: flex;
                      align-items: end;
                      gap: var(--s8);
                      .compare-price {
                        font-size: var(--s14);
                        line-height: var(--s18);
                        text-decoration: line-through;
                        color: var(--text_secondary);
                      }
                    }
                    button {
                      @media screen and (max-width: 767px) {
                        padding-inline: 10px;
                      }
                      > * {
                        pointer-events: none;
                      }
                    }
                  }
                }
              }
              
            }
          }
        }
        
        .discount-wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--s4);
          margin-bottom: var(--s16);
          padding: var(--s16);
          background-color: var(--bcg-1);
          border-radius: var(--s8);
          .discount-title {
            font-size: var(--s14);
            font-weight: 600;
            color: var(--text_secondary);
          }
          .progress-bar {
            width: 100%;
            height: 10px;
            background-color: var(--bcg-2);
            border-radius: 5px;
            .progress-bar-inner {
              height: 100%;
              background-color: var(--tur_100);
              border-radius: 5px;
            }
          }
          .discount-bottom-title {
            font-size: var(--s14);
            font-weight: 600;
            color: var(--text_secondary);
          }
        }
      }
      .totals-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: var(--s12);
        padding-top: var(--s20);
        align-self: end;
        .cart-discounts {
          display: flex;
          flex-direction: column;
          gap: var(--s16);
          .original-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .discount-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .totals {
          display: flex;
          align-items: end;
          justify-content: space-between;
        }
        .buttons-wrapper {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--s16);
          position: static;
          > * {
            width: 100%;
            height: 100%;
            
          }
        }
      }
      
    }
  }
}