.drawer--cart {
  .drawer__inner {
    --DRAWER-WIDTH: 375px;

    @media only screen and (min-width: 750px) {
      --DRAWER-WIDTH: 443px;
    }
  }

  .cart-block--top {
    padding: 16px;
    border-bottom: 1px solid var(--color-divider);

    .drawer__heading {
      font-family: var(--FONT-STACK-HEADING);
      font-weight: 400;
      font-size: 20px;
      line-height: 140%;
      letter-spacing: normal;
      padding-right: 40px;
      color: var(--color-text-primary);

      @media only screen and (min-width: 750px) {
        font-size: 24px;
      }
    }

    .drawer__close {
      border-radius: 100px;
      width: 34px;
      height: 34px;
      background-color: var(--color-brand-light-mint);
      display: flex;
      align-items: center;
      justify-content: center;
      --icon-size: 20px;
      right: 16px;
      &:focus {
        outline: none; 
      }
    }
  }

  .free-shipping {
    padding: 0 0 10px 0;
    margin: 16px 16px 0 16px;
    border-bottom: 1px solid var(--color-brand-mint);

    >span {
      color: var(--color-text-primary);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 130%;

      strong {
        font-weight: 700;
      }
    }

    .free-shipping__progress {
      display: block;
      width: 100%;
      position: relative;
      margin: 12px 0 16px;

      .free-shipping__progress-bar {
        height: 4px;
        border-radius: 50px;
        --progress-bg: var(--color-brand-mint);
        --progress-value-bg: var(--color-brand-green);
        margin: 0;
        position: relative;
        z-index: 1;

      }

      .free-shipping__progress-icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 34px;
        height: 34px;
        border-radius: 100px;
        background: var(--color-brand-mint);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        z-index: 2;
      }

    }
  }


  cart-items {
    padding: 0 16px;

    .cart__item {
      padding: 24px 0;
      border-bottom: 1px solid var(--color-brand-mint);
      flex-wrap: nowrap;

      .cart__item__image {
        width: 113.374px;
        height: 113.374px;
        min-width: 113.374px;
        border-radius: 6px;

        @media only screen and (min-width: 750px) {
          width: 127.804px;
          height: 127.804px;
          min-width: 127.804px;
        }

        * {
          border-radius: 6px;
        }

        a {
          width: 100%;
          height: 100%;
        }

      }

      .cart__item__content {
        padding-left: 12px;
        gap: 12px;

        .cart__discount {
          margin: 6px 0;
        }

        .cart__item__title {
          color: var(--color-text-primary);
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 120%;
          margin-bottom: 4px;
        }

        .cart__item__meta {
          .cart__item__selected-options {
            margin: 0;
            color: var(--color-text-secondary);
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 130%;

            strong {
              font-weight: 400;
            }
          }
        }

        .cart__price {
          margin: 4px 0 0;
          color: var(--color-text-secondary);
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;

          ins {
            margin-right: 4px;
          }
        }

        quantity-input {
          margin-top: 6px;

          .cart__quantity {
            width: 82px;

            .cart__quantity-field {
              padding: 0 8px;
              height: 30px;
              width: 82px;
              border-radius: 50px;
              border: 1px solid var(--color-border-primary);
              color: var(--color-black);
              text-align: center;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }
          }
        }

        .cart__item__content__right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .cart__item__remove {
            margin: 0;
          }

          .cart__item__price {
            color: var(--color-text-primary);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
          }
        }
      }

      &.cart__item--free-gift {
        .cart__price {
          color: var(--color-sale);
        }
      }
    }
  }

  .drawer__foot {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);

    .cart__foot__inner {
      border-top: none;
      padding: 24px 16px;

      .cart__total {
        margin: 0 0 6px;

        span {
          color: var(--color-text-primary);
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 130%;
          letter-spacing: normal;
          text-transform: none;
        }
      }

      .cart__total--shipping {
        margin: 0 0 12px;

        span {
          color: var(--color-text-primary);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          text-transform: none;
          letter-spacing: normal;

          &:last-child {
            font-size: 12px;
          }
        }
      }

      .cart__note {
        color: var(--color-text-tertiary);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        margin: 0;
      }

      .cart__checkout {
        gap: 12px;
        height: 50px;
        margin-bottom: 0;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        margin-top: 16px;
      }
    }
  }
}

.drawer__empty {
  .drawer__empty__inner {
    padding: 24px 16px;
    gap: 24px;
    justify-content: flex-start;

    .drawer__empty__message {
      color: var(--color-text-primary);
      font-family: var(--FONT-STACK-HEADING);
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 120%;
      margin: 0;
    }

    .drawer__empty__buttons {
      gap: 12px;
      margin: 0;

      .btn {
        padding: 0 16px;
        height: 50px;
        color: var(--color-socials-hover);
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        border-radius: 50px;
        background-color: var(--color-btn-bg-secondary);
        border: none;
      }
    }

    .drawer__empty__product {
      padding: 12px 0;
      gap: 16px;

      .product-upsell {
        background-color: var(--color-brand-light-beige);
        border-radius: 6px;
        overflow: hidden;
        align-items: center;
        gap: 12px;

        .product-upsell__image {
          width: 97px;
        }

        .product-upsell__content {
          padding: 0;

          .product-upsell__title {
            color: var(--color-text-primary);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
            margin: 0 0 4px;
          }

          .product-upsell__price {
            margin: 0;
            color: var(--color-text-secondary);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
          }
        }

        .btn__outer {
          .product-upsell__btn {
            --btn-size: 44px;
            --btn-text: var(--color-text-primary);
            background-color: var(--color-input-bg-primary);
          }

          .btn__plus {
            --icon-size: 22px;
            background: var(--color-text-primary);
          }

          .btn__text {
            color: var(--color-text-primary);
          }

          .product-upsell__btn .btn__text {
            width: 0;
            min-width: 0;
            padding: 0;
            overflow: hidden;
          }
        }
      }
    }
  }

}

.cart-block--free-gift {

  .grid {
    --item-width: 318px;

    @media only screen and (min-width: 750px) {
      --item-width: 364px;
    }
  }



  .cart-free-gift {
    padding: 12px 16px;
    background-color: var(--color-brand-mint);

    &.cart-free-gift--hidden {
      display: none;
    }

    .cart-free-gift__heading {
      color: var(--color-text-primary);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%;
      margin: 0 0 16px;

      @media only screen and (min-width: 750px) {
        font-size: 20px;
      }
    }

    .cart-free-gift__card {
      .cart-free-gift__card-inner {
        display: flex;
        background-color: var(--color-brand-light-beige);
        gap: 12px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        align-items: center;

        @media only screen and (min-width: 750px) {
          gap: 24px;
        }

        .cart-free-gift__card-image {
          width: 100px;
          min-width: 100px;
          height: 100px;

          @media only screen and (min-width: 750px) {
            width: 124px;
            height: 124px;
            min-width: 124px;
          }
        }

        .cart-free-gift__card-content {
          .cart-free-gift__card-title {
            color: var(--color-text-primary);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
            margin: 0 0 8px;
          }

          .cart-free-gift__card-price {
            color: var(--color-sale);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            margin: 0;
          }
        }

        .cart-free-gift__card-actions.product-upsell__actions {
          .btn__outer {
            right: 20px;
            bottom: 20px;

            .product-upsell__btn {
              --btn-size: 34px;
              --btn-text: var(--color-text-primary);
              background-color: var(--color-input-bg-primary);
            }

            .btn__plus {
              --icon-size: 17px;
              background: var(--color-text-primary);
            }

            .product-upsell__btn .btn__text {
              width: 0;
              min-width: 0;
              padding: 0;
              overflow: hidden;
            }
          }
        }
      }
    }
  }

  .slider__arrows {
    .slider__button {
      width: 33px;
      height: 33px;
      --icon-size: 21px;
      display: block;
      transform: none;
      opacity: 1;

      &:disabled {
        transition: none;
      }

      @media only screen and (min-width: 750px) {
        &:hover {
          background: var(--color-input-bg-primary);
        }
      }

      @media only screen and (max-width: 750px) {
        &:hover {
          &:before {
            background: var(--color-input-bg-primary);
          }
        }
      }
    }
  }


}

.cart__widget--products {
  --inner: 16px;
  border: none;

  .grid {
    --item-width: 318px;

    @media only screen and (min-width: 750px) {
      --item-width: 364px;
    }
  }

  .cart__widget__products {
    display: block;
    min-width: 0;
  }

  .cart__widget__title {
    overflow: hidden;
    color: var(--color-text-primary);
    font-family: var(--FONT-STACK-HEADING);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;

    .icon {
      --icon-size: 24px;
    }

    @media only screen and (min-width: 750px) {
      font-size: 20px;
    }
  }

  .cart__widget__content__inner {
    padding: 0 16px 12px;

    .product-upsell {
      background-color: var(--color-brand-light-beige);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      align-items: center;
      flex-wrap: nowrap;

      .product-upsell__image {
        width: 100px;

        @media only screen and (min-width: 750px) {
          width: 124px;
        }
      }

      .product-upsell__content {
        --inner: 12px;

        @media only screen and (min-width: 750px) {
          --inner: 24px;
        }

        .product-upsell__title {
          color: var(--color-text-primary);
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 120%;
          margin: 0 0 8px;
        }

        .product-upsell__price {
          color: var(--color-text-secondary);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          margin: 0;
        }
      }

      .product-upsell__actions {
        .btn__outer {
          position: absolute;
          right: 20px;
          bottom: 20px;

          .product-upsell__btn {
            --btn-size: 34px;
            --btn-text: var(--color-text-primary);
            background-color: var(--color-input-bg-primary);
          }

          .btn__plus {
            --icon-size: 17px;
            background: var(--color-text-primary);
          }

          .product-upsell__btn .btn__text {
            width: 0;
            min-width: 0;
            padding: 0;
            overflow: hidden;
          }
        }
      }
    }
  }

  .slider__arrows {
    .slider__button {
      width: 33px;
      height: 33px;
      --icon-size: 21px;
      display: block;
      transform: none;
      opacity: 1;

      &:disabled {
        transition: none;
      }

      @media only screen and (min-width: 750px) {
        &:hover {
          background: var(--color-input-bg-primary);
        }
      }


      @media only screen and (max-width: 750px) {
        &:hover {
          &:before {
            background: var(--color-input-bg-primary);
          }
        }
      }
    }
  }
}