.free-shipping--percentage {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}



.free-shipping {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 25px;
  font-weight: var(--font-body-medium-weight, 500);

  &.extended {
    padding: 16px;
    border-radius: 12px;

    &.green, &.purple, &.deep--green {
      .free-shipping--text-remaining, .free-shipping--text-full {
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-family: "Inter";
        font-size: 14px;
        line-height: 1.1;
        font-weight: 400;
        color: #E3E3E3;

        p {
          margin: 0;
        }

        span {
          font-weight: 600;
        }

        .icon--box {
          padding: 5px;
          border-radius: 4px;
        }
      }

      .free-shipping--bar {
        border: 2px solid transparent;
      }

      .free-shipping--percentage {
        inset: 0 0 0 0;
      }
    }

    &.green {
      background-color: #2C2D2E;

      .free-shipping--text-remaining, .free-shipping--text-full {

        .icon--box {
          background-color: #424631;
        }

      }

      .free-shipping--text-remaining {
        .icon--box {
          background-color: #424631;
          color: #E1FE4F;
        }

      }

      .free-shipping--text-full {
        .icon--box {
          background-color: #E1FE4F;
          color: #2C2D2E;
        }
      }

      .free-shipping--bar {
        background-color: #E1FE4F1F;
      }

      .free-shipping--percentage {
        background-color: #E1FE4F;
      }


    }

    &.deep--green {
      background-color: #073E2C;

      .free-shipping--text-remaining, .free-shipping--text-full {
        span {
          color: #E1FE4F;
        }
      }

      .free-shipping--text-remaining {
        .icon--box {
          background-color: #215430;
          color: #E1FE4F;
        }

      }

      .free-shipping--text-full {
        .icon--box {
          background-color: #E1FE4F;
          color: #2C2D2E;
        }
      }

      .free-shipping--bar {
        background-color: #E1FE4F1F;
      }

      .free-shipping--percentage {
        background-color: #E1FE4F;
      }
    }

    &.purple {
      background-color: #2C2D2E;

      .free-shipping--text-remaining, .free-shipping--text-full {
        span {
          color: #CF75FF;
        }
      }

      .free-shipping--text-remaining {
        .icon--box {
          background-color: #3E3146;
          color: #CF75FF;
        }

      }

      .free-shipping--text-full {
        .icon--box {
          background-color: #CF75FF;
          color: #FFFFFF;
        }
      }

      .free-shipping--bar {
        background-color: #CF75FF1F;
      }

      .free-shipping--percentage {
        background-color: #CF75FF;
      }
    }

    .free-shipping--bar {
      height: 8px;
      border-radius: 12px;
    }

    .free-shipping--percentage {
      transform: scale(var(--percentage, 0), 1);
    }
  }
}

.free-shipping--text {
  margin-bottom: 10px;
}

.free-shipping--text-remaining {
  display: none;
}

.free-shipping--text-full {
  display: block;
}

.free-shipping--bar {
  border: 1px solid var(--color-border, #dadce0);
  border-radius: 3px;
  height: 6px;
  width: 100%;
  position: relative;
}

.free-shipping--percentage {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 3px;
  transform: scale(var(--percentage, 0), 1);
  transform-origin: center left;
  background: var(--color-accent);
}

.gift--product {
  display: flex;
  align-items: stretch;

  gap: 12px;
  margin-top: 16px;

  .gift--product__image {
    width: 64px;
    height: 64px;

    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;

      object-position: center;
      object-fit: cover;
    }
  }

  .gift--product__parameters {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .gift--product__title {
      font-size: 14px;
      line-height: 1.1;
      font-weight: 500;
      color: #E3E3E3;
    }

    select {
      height: 32px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 4px;
      border: 1px solid rgba(227, 227, 227, 0.12);

      font-size: 13px;
      line-height: 1.1;
      font-weight: 400;
      color: #E3E3E3;

      width: 180px;
    }
  }

  .gift--product__cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 4px;

    margin-left: auto;

    .default--price, .current--price {
      font-size: 14px;
      line-height: 1.2;
    }

    .default--price {
      color: #E3E3E380;
      text-decoration: line-through;
    }

    .current--price {
      font-weight: 500;

      &.green, &.deep--green {
        color: #E1FE4F;
      }

      &.purple {
        color: #CF75FF;
      }
    }
  }
}

@media (width < 1024px) {
  .icon--box {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal !important;
  }
}