account-drawer-overlay {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
  
    &.active {
      display: block;
    }
  }
  
  .account-drawer-section {
      max-width: 420px;
      width: 100%;
      height: 100%;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 2000;
      background-color: white;
      transform: translateX(1000px);
      transition: all linear 300ms;

      * {
        font-family: founders-grotesk, sans-serif;
      }
  
      @media screen and (max-width: 768px) {
        max-height: calc(100% - 50px);
        top: unset;
        bottom: 0;
        transform: translateX(0);
        transform: translateY(1000px);
        transition: all linear 300ms;
      }
  
      &.active {
          transform: translateX(0);
          transform: translateY(0);
          transition: all linear 300ms;
      }
  
      account-drawer,
      account-drawer-2nd,
      account-drawer-3rd {
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column;
          position: relative;
          z-index: 99;
          transform: translateX(1000px);
          transition: all linear 200ms;
          background-color: white;

          input::placeholder {
            font-weight: 300!important;
          }

          .field {
            border: 1px solid rgb(140, 140, 140);
            margin-bottom: 0.7rem;

            & > input[type="text"]:not(:placeholder-shown) + label,
            & > input[type="email"]:not(:placeholder-shown) + label,
            & > input[type="tel"]:not(:placeholder-shown) + label,
            & > input[type="password"]:not(:placeholder-shown) + label,
            & > select:not(:placeholder-shown) + label {
              top: 10px;
              left: 0.5rem!important;
              padding-left: unset;
            }

            .select-arrow {
              right: 16px;
              width: 16px;
              height: 12px;
              margin-top: -6px;

              svg {
                width: 100%;
                height: auto;
              }
            }

            &.disabled {
              background-color: #eaeaea;
              border: 1px solid #eaeaea;

              label {
                background-color: #eaeaea;
              }
            }
          }

          .checkbox_field {
            margin-bottom: 0.7rem;
          }

          input[type="text"],
          input[type="tel"],
          input[type="email"],
          input[type="password"],
          select {
            font-weight: 300;
            border-bottom: unset;
            margin-bottom: unset;
            padding: 0.5rem!important;
            padding-top: 1.5rem!important;
            height: 55px;

            &:focus {
              & + label {
                top: 10px;
                left: 0.5rem!important;
                padding-left: unset!important;
              }
            }

            & + label {
              padding-left: 0.5rem;
            }
          }

          label {
            height: 55px;
            font-weight: 300;
          }
  
          &.active {
            z-index: 100;
            transform: translateX(0);
            transition: all linear 200ms;
            position: absolute;
            top: 0;
            left: 0;
          }
  
          .account-drawer__heading {
            font-weight: 300;

            & > span:nth-of-type(1) {
              cursor: pointer;
    
              & > svg {
                position: relative;
                left: 0;
                transition: all linear 100ms;
              }
    
              &:hover {
                & > svg {
                  position: relative;
                  left: -4px;
                  transition: all linear 100ms;
                }
              }
            }
          }
      }
  
      .account-drawer__heading {
          font-size: 21px;
          font-weight: 400;
          padding: 1rem;
          display: flex;
          flex-flow: row;
          justify-content: space-between;
  
          & > span:nth-last-of-type(1) {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              background-color: rgba(0, 0, 0, 0.1);
              text-align: center;
              line-height: 26px;
              cursor: pointer;
          }
  
          svg {
            width: 12px;
            height: 12px;
          }
      }
  
      .account-drawer__tabs {
          display: flex;
          border-bottom: 2px solid transparent;
  
          & > .tab{
              max-width: calc(100% / 3);
              width: 100%;
              font-size: 15px!important;
              text-align: center;
              color: rgb(109, 114, 120);
              display: inline-block;
              padding: 1rem;
              cursor: pointer;
              transition: color linear 100ms;
  
              &:hover {
                color: black;
                transition: color linear 100ms;
              }
  
              &.active {
                  border-bottom: 2px solid black;
                  color: black;
              }
          }
      }
  
      .account-drawer__card {
          width: 100%;
          height: 100%;
          display: none;
          flex-flow: column;
          gap: 1.5rem;
          padding: 1rem;
          overflow-y: auto;
  
          &.active {
              display: flex;
          }

          &.hide {
            display: none;
          }
      }
  
      .account-drawer__item {
          display: flex;
          flex-flow: column;
          gap: 0.8rem;
  
          .account-drawer__title {
              font-size: 19px;
              font-weight: 300;
              display: flex;
              flex-flow: row;
              gap: 0.6rem;
              align-items: center;
              cursor: pointer;
              transition: all linear 100ms;
  
              .arrow-with-bg {
                width: 15px;
                height: 15px;
                display: inline-block;
                background-color: rgba(0, 0, 0, 0.1);
                text-align: center;
                line-height: 15px;
                transform: rotate(180deg);
              }
  
              svg {
                width: 12px;
                height: 12px;
                transform: rotate(180deg);
                margin-top: 3px;
              }
  
              &:hover {
                gap: 0.8rem;
                transition: all linear 100ms;
              }
          }

          .account-drawer__link {
            font-size: 15px;
          }
      }
  
      .account-drawer__content-empty {
          font-size: 17px;
          color: rgb(109, 114, 120);
          text-align: center;
          padding: 2rem 1rem;
          border: 1px solid rgb(234, 234, 234);
      }
  
      .account-drawer__login {
          padding-bottom: 1.5rem;
          border-bottom: 1px solid rgb(234, 234, 234);
  
          .button {
            &:hover {
              color: white;
            }
          }
  
          .account-drawer__login-custom-content {
              margin: unset;
              margin-bottom: 0.5rem;
  
              * {
                  margin: unset;
              }
          }
  
          .account-drawer__login-text {
              font-size: 15px;
              text-align: left;

              a {
                font-size: 15px;
                font-weight: 300;
              }
          }
      }
  
      .account-drawer__profile {
          width: 100%;
          display: flex;
          flex-flow: column;
          border: 1px solid rgb(234, 234, 234);
          cursor: pointer;
          
          & > div {
              display: flex;
              flex-flow: column;
              padding: 1rem;
  
              & > span:nth-of-type(1) {
                  font-size: 13px;
                  color: rgb(109, 114, 120);
              }
  
              &:nth-last-of-type(1) {
                  border-top: 1px solid rgb(234, 234, 234);
              }
          }
      }
  
      .account-drawer__address {
          width: 100%;
          font-size: 15px;
          display: block;
          padding: 1rem;
          border: 1px solid rgb(234, 234, 234);
          cursor: pointer;

          span {
            display: block;
            margin-bottom: 8px;

            &:nth-child(n+3) {
              margin-bottom: 0;
            }
          }
          .default-tag {
            width: 70px;
            height: 22px;
            font-size: 15px;
            text-align: center;
            background-color: #eaeaea;
            display: inline-block;
            margin-left: 1rem;
          }
      }
  
      .account-drawer__order-item {
        display: flex;
        flex-flow: column;
        gap: 0.8rem;

        .account-drawer__order-item-title {
          font-size: 19px;
          font-weight: 300;
          display: flex;
          flex-flow: row;
          gap: 0.6rem;
          align-items: center;
          cursor: pointer;
          transition: all linear 100ms;

          .arrow-with-bg {
            width: 15px;
            height: 15px;
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.1);
            text-align: center;
            line-height: 15px;
            transform: rotate(180deg);
          }

          svg {
            width: 12px;
            height: 12px;
            transform: rotate(180deg);
            margin-top: 3px;
          }

          &:hover {
            gap: 0.8rem;
            transition: all linear 100ms;
          }
        }

        .account-drawer__order-item-images {
            width: 100%;
            overflow-x: auto;

            & > img {
                max-width: calc((100% - 10px) / 3);
                margin-bottom: 5px;
            }
        }
      }
  
      .account-drawer__recently-viewed {
        position: relative;
  
        .flickity-nav {
          top: 58px;

          &.flickity-prev {
            right: 35px!important;
          }

          &.flickity-next {
            right: -10px!important;
          }

          svg {
            width: 20px;
            height: 20px;
          }
        }
  
        recently-viewed-products {
          padding: unset;

          & > .carousel {
            padding: unset;
  
            .flickity-viewport {
              min-height: 160px!important;
              height: auto!important;
              overflow: hidden!important;
            }

            .flickity-slider {
              display: flex!important;
              flex-flow: row;
              gap: 5px;
              flex-wrap: wrap;
            }
  
            .carousel__slide {
              max-width: calc((100%) / 3);
              padding-right: 5px;
            }
  
            .product-card-info {
              flex-flow: column;
              gap: 0.5rem;
              padding: unset;
              margin-top: 1rem;
              display: none;

              .swatch-count,
              .product-card-swatches-new {
                display: none;
              }

              .price {
                text-align: left;
                margin-top: 0.5rem;

                .money {
                  font-weight: 300;
                }
              }
  
              .price {
                text-align: left;
              }
            }  
          }

          .product-card-wishlist {
            opacity: 1!important;
            visibility: visible!important;

                .swym-add-to-wishlist {
                    width: 20px!important;
                    height: 20px!important;
                    padding: unset!important;
                    opacity: 1!important;

                    .empty {
                        display: inline-block!important;
                    }

                    .full-fill {
                        display: none!important;
                    }

                    &.swym-added {
                        .empty {
                            display: none!important;
                        }

                        .full-fill {
                            display: inline-block!important;
                        }
                    }
                  
                }
          }
        }
      }

      .account-drawer__cta-button {
        height: 47px;
        min-height: unset;
        width: 100%;
        font-size: 15px;
        font-weight: 300;
        color: black;
        text-align: center;
        display: inline-block;
        padding: 11px 19px;
        border: 1px solid black;
        cursor: pointer;
        background-color: white;
        transition: all linear 100ms;

        &:hover {
            color: white;
            background-color: black;
            transition: all linear 100ms;
        }
      }
       
      .account-drawer-personal {
        .klaviyo-form {
          form {
            padding: unset!important;

            * {
              font-family: founders-grotesk, sans-serif!important;
              font-weight: 300!important;
            }

            input {
              padding: unset!important;
              padding-left: 0.5rem!important;
              border: 1px solid black!important;
              border-radius: 0!important;
              outline: unset!important;

              &::placeholder {
                font-family: founders-grotesk, sans-serif!important;
                font-weight: 300!important;
                font-size: 14px!important;
              }

              &[type="tel"] {
                height: auto!important;
                border: unset!important;
                outline: unset!important;
              }

              .needsclick {
                outline: unset!important;
              }
            }
          }
        }

        .account-drawer__content:nth-last-of-type(1) {
          .klaviyo-form {
            form {
              .kl-private-reset-css-Xuajs1 {
              }

              input, 
              select {
                outline: unset!important;
                border: unset!important;
              }
            }
          }
        }
      }

      .account-drawer-rencently-viewed {
        recently-viewed-products {
          .products {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;

            & > div {
              max-width: calc((100% - 10px) / 3) !important;
              width: 100% !important;
              padding-right: unset!important;
              flex: unset!important;
              
              img {
                height: 100%!important;
              }

              .product-card-info {
                flex-flow: column!important;
                padding: unset!important;
                padding-top: 0.5rem!important;
                padding-bottom: 0.5rem!important;

                .swatch-count,
                .product-card-swatches-new {
                  display: none;
                }

                .price {
                  text-align: left;
                  margin-top: 0.5rem;

                  .money {
                    font-weight: 300;
                  }
                }
              }
            }

            /* .flickity-viewport {
              height: 168px!important;
            } */
            
            &.products-2-col {
              & > div:not(.empty-state) {
                max-width: calc(50% - 5px) !important;
              }
            }
          }
        }
      }

      .wishlist-items-container .swym-title {
        text-transform: capitalize;
      }
  
      account-drawer .account-drawer-wishlist {
        .swym-wishlist-grid {
          display: flex!important;
          flex-flow: row!important;
          flex-wrap: wrap!important;
          gap: 5px;
  
          .swym-wishlist-item {
            max-width: calc((100% - 10px) / 3);
            width: 100%!important;
            margin-bottom: 2px;

            & > div,
            & > a {
              max-width: unset!important;
              width: 100%!important;

              & > .swym-wishlist-image-wrapper {
                max-width: unset!important;
                width: 100%!important;
              }
            }
            
            & > div:nth-last-of-type(1) {
              display: none!important;
            }
  
            .swym-wishlist-image {
              object-fit: cover;
            }
          }
        }
      }

      .account-drawer-orders {
        .account-drawer-order {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          display: none;

          &.active {
            display: flex;
            flex-flow: column;
          }

          .account-drawer__card {
            & > div {
              display: flex;
              flex-flow: column;
              gap: 1rem;
            }
          }

          .account-drawer__card-top {
            display: flex;
            flex-flow: row;
            gap: 1rem;

            .account-drawer__card-left {
              max-width: 100px;
              width: 100%;
              position: relative;

              & > span {
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background-color: #6d7278;
                border-radius: 50%;
                color: white;
                font-size: 13px;
                position: absolute;
                top: -10px;
                right: -10px;
              }
            }

            .account-drawer__card-right {
              display: flex;
              flex-flow: row;
              gap: 1rem;
              justify-content: space-between;

              * {
                font-size: 17px;
              }

              & > div {
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
              
                &:nth-of-type(1) {
                  align-items: flex-start;
                  justify-content: flex-start;

                  & > span {
                    color: rgb(109, 114, 120);
                  }
                }

                &:nth-last-of-type(1) {
                  font-size: 15px!important;
                }
              }
            }
          }

          .account-drawer__card-ctas {
            display: flex;
            flex-flow: column;
            gap: 0.8rem;
            cursor: pointer;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgb(234, 234, 234);

            & > div,
            & > buy-again-button {
              width: 100%;
              height: 45px;
              text-align: center;
              border: 1px solid black;
              transition: all linear 100ms;

              & > span,
              & > a {
                width: 100%;
                height: 100%;
                font-size: 15px;
                line-height: 45px;
                transition: all linear 100ms;
              }

              &:hover {
                background-color: black;
                transition: all linear 100ms;

                & > span,
                & > a {
                  color: white;
                  transition: all linear 100ms;
                }
              }

              &:first-child {
                background-color: black;
                border: unset;

                & > span,
                & > a {
                  color: white;
                }
              }
            }
          }

          .account-drawer__card-total {
            padding-bottom: 2rem;
            border-bottom: 1px solid rgb(234, 234, 234);

            & > div {
              margin-top: 0.5rem;
              display: flex;
              flex-flow: row;
              justify-content: space-between;

              & > span {
                font-size: 15px;
                * {
                  font-size: 15px;
                }
              }

              &.total {
                margin-top: 1rem;
                padding-top: 0.5rem;
                border-top: 1px solid rgb(234, 234, 234);

                & span {
                  font-size: 21px;
                  * {
                    font-size: 21px;
                  }
                }
              }
            }
          }

          .account-drawer__card-payment {
            display: flex;
            flex-flow: column;
            gap: 0.5rem;

            .account-drawer__card-payment-title {
              font-size: 21px;
              margin-bottom: 0.5rem;
            }

            .billing-address,
            .delivery-address {
              margin-top: 1rem;

              div {
                font-size: 15px!important;

                &:nth-of-type(1) {
                  margin-bottom: 0.3rem;
                }
              }
            }

            .billing-address {
              border-bottom: 1px solid rgb(234, 234, 234);
              padding-bottom: 2rem;
            }

            .delivery-address {
              border-bottom: 1px solid rgb(234, 234, 234);
              padding-bottom: 2rem;

              .account-drawer__card-payment-title {
                font-size: 20px!important;
                margin-bottom: 1rem!important;
              }

              div {
                &:nth-of-type(2) {
                  margin-bottom: 0.3rem;
                }
              }
            }
          }

          .account-drawer__card-additional {
            div {
              font-size: 15px;
            }
          }
        }
      }
  
      account-drawer-3rd  {
        & > span {
          width: 100%;
          font-size: 15px;
          font-weight: 400;
          text-align: center;
          display: inline-block;
          padding: 11px 19px;
          border: 1px solid black;
          cursor: pointer;
  
          &:hover {
              color: white;
              background-color: black;
          }
        }
      } 
  }

.custom-add-to-wishlist-button {
  width: 20px!important;
  height: 20px!important;
  padding: unset!important;
  opacity: 1!important;

  .empty {
      display: inline-block!important;
  }

  .full-fill {
      display: none!important;
  }

  &.swym-added {
      .empty {
          display: none!important;
      }

      .full-fill {
          display: inline-block!important;
      }
  }
}

.address-wrapper {
  position: relative;
}
.address-row {
  width: 100%;
  overflow-x: scroll;

  .address-row__list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 300px;

    .account-drawer__content {
      width: 300px;
      min-width: 300px;
      margin-right: 16px;
    }
  }
  .address__prev, .address__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgb(234, 234, 234);
    padding: 10px 4px;
    background-color: white;
    opacity: 0;
    display: none;

    @media screen and (min-width: 768px) {
      display: block;
    }
  }
  .address__prev {
    left: 0;
  }
  .address__next {
    right: 0;
  }
  &:hover {
    .address__prev, .address__next {
      opacity: 1;
    }
  }
}

.account-drawer__heading {
  text-transform: capitalize;
}

.account-drawer-section .account-drawer-personal {
  .klaviyo-email-form {
    input[type="email"] {
      opacity: 0.5;
      background-color: #eaeaea !important;
      border-color: #eaeaea !important;
    }
  }
}
.swym-wishlist-button-bar {
  span.custom-add-to-wishlist-button {
    width: 100% !important;
    height: 100% !important;
    background-color: black;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    svg {
      width: 20px;
      height: 20px;
      pointer-events: none;

      &.empty {
        stroke: white;
        path {
          stroke: white !important;
        }
      }
      &.full-fill {
        fill: white;
      }
    }
  }
}
.toast-message {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 300px;
  text-align: center;
  background-color: black;
  color: white;
  padding: 16px 32px;
  pointer-events: none;
  opacity: 0;
  z-index: 100;

  &.active {
    opacity: 1;    
  }
  p {
    margin-bottom: 0;
  }
}
.atc-btn {
  &:disabled {
    pointer-events: none;
    opacity: 0.5;
  }
}

.empty-state {
  display:none;
  text-align: center;
  width: 100%;
  padding: 32px;

  h2 {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 16px;
  }
}
.recently-viewed  {
  .product-recommendations {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .empty-state {
      display: block;
    }

    &.product-recommendations--loaded {
      display: block;

      .empty-state {
        display: none;
      }
    }
  }
}
.wishlist-card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  .empty-state {
    display: block;
  }
}