.product-parts-box,
.gift-product-box {
  margin: 40px 0;
  .product-parts-tag,
  .gift-product-tag {
    font-family: Manrope;
    font-weight: 700;
    font-style: Bold;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 130%;
    letter-spacing: 0%;
    color: #000000;
    margin-bottom: 16px;
  }
  .product-parts-wrapper,
  .gift-product-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    .product-parts-item {
      &.bg-color {
        background: var(--parts_background_color);
      }
      &.is-checked {
        border-color: var(--box_opt_border_color);
      }
      &.is-hover {
        border-color: var(--box_opt_border_color);
      }
    }
    .product-parts-item,
    .gift-product-item {
      padding: 13px 8px;
      border: 1px solid var(--box_not_border_color);
      backdrop-filter: blur(40px);
      border-radius: 4px;
      position: relative;
      width: 100%;

      .product-parts-checkbox,
      .product-gift-checkbox {
        position: absolute;
        right: 8px;
        top: 8px;
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 1px solid var(--parts_checkbox_border_color);
        border-radius: 4px;
        transition: all 0.3s ease;
        margin: 0;
        cursor: pointer;
        &:checked {
          background-color: var(--parts_check_background_color);
          border-color: var(--parts_check_background_color);
          &::after {
            content: "";
            position: absolute;
            top: 1.5px;
            left: 5px;
            width: 6px;
            height: 10px;
            border: solid var(--parts_check_color);
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg);
          }
        }

        &:not(:checked) {
          background-color: var(--parts_not_checkbox_background_color);
        }
      }
      .product-parts-label,
      .product-gift-label {
        display: flex;
        align-items: center;
        width: 100%;
      }
      .product-parts-image img,
      .gift-product-image img {
        width: 88px;
        height: 88px;
        display: block;
        object-fit: cover;
        cursor: pointer;
      }
      .product-parts-info,
      .gift-product-info {
        cursor: pointer;
        width: calc(100% - 88px - 40px);
        .product-parts-info-header,
        .gift-product-info-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
          width: 100%;
          .product-parts-title,
          .product-parts-quantity,
          .gift-product-title,
          .gift-product-quantity {
            font-family: Manrope;
            leading-trim: NONE;
            line-height: 130%;
            letter-spacing: 0%;
          }
          .product-parts-title,
          .gift-product-title {
            font-weight: 700;
            font-style: Bold;
            font-size: 18px;
            color: var(--parts_name_color);
          }
          .product-parts-quantity,
          .gift-product-quantity {
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            color: var(--parts_quantity_color);
            white-space: nowrap;
          }
        }
        .product-parts-price,
        .gift-product-price {
          display: flex;
          align-items: center;
          .save-price,
          .parts-current-price,
          .parts-original-price,
          .gift-current-price,
          .gift-original-price {
            font-family: Manrope;
            leading-trim: NONE;
            line-height: 130%;
            letter-spacing: 0%;
          }
          .save-price {
            font-weight: 700;
            font-style: Bold;
            font-size: 12px;
            color: var(--parts_save_text_color);
            background: var(--parts_save_background_color);
            padding: 4px 8px;
            margin-right: 8px;
            border-radius: 4px;
          }
          .parts-current-price,
          .gift-current-price {
            font-weight: 500;
            font-style: Medium;
            font-size: 18px;
            color: var(--parts_price_color);
            margin-right: 4px;
          }
          .parts-original-price,
          .gift-original-price {
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            text-decoration: line-through;
            color: var(--parts_original_price_color);
          }
        }
      }
    }
  }
}

.gift-product-box {
  .gift-product-tag-box{
    display:inline-block;
  }
  .gift-product-tag {
    color: var(--gift_tag_color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--gift_tag_background_color);
  }
  .gift-product-wrapper {
    .gift-product-item {
      border: 1px solid var(--gift_box_not_border_color);
      backdrop-filter: blur(40px);
      &.bg-color {
        background: var(--gift_background_color);
      }
      &.gift-product-item.is-checked::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: var(--gift_box_opt_border_color);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }
      &.is-hover::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: var(--gift_box_opt_border_color);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .product-gift-checkbox {
        border: 1px solid var(--gift_checkbox_border_color);
        &:checked {
          background-color: var(--gift_check_background_color);
          border-color: var(--gift_check_background_color);
          &::after {
            content: "";
            position: absolute;
            top: 1.5px;
            left: 5px;
            width: 6px;
            height: 10px;
            border: solid var(--gift_check_color);
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg);
          }
        }
        &:not(:checked) {
          background-color: var(--gift_not_checkbox_background_color);
        }
      }
      .gift-product-info {
        .gift-product-info-header {
          .gift-product-title {
            color: var(--gift_name_color);
          }
          .gift-product-quantity {
            color: var(--gift_quantity_color);
          }
        }
        .gift-product-price {
          .save-price {
            color: var(--gift_save_text_color);
            background: var(--gift_save_background_color);
          }
          .gift-current-price {
            color: var(--gift_price_color);
          }
          .gift-original-price {
            color: var(--gift_original_price_color);
          }
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .product-parts-box,
  .gift-product-box {
    .product-parts-tag,
    .gift-product-tag {
      margin-bottom: 8px;
    }
    .product-parts-wrapper,
    .gift-product-wrapper {
      gap: 8px;
      .product-parts-item,
      .gift-product-item {
        padding: 8px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 16px;
        .product-parts-checkbox,
        .product-gift-checkbox {
          position: relative;
          right: auto;
          top: auto;
          width: 24px;
          height: 24px;
          &:checked {
            &::after {
              content: "";
              position: absolute;
              top: 4px;
              left: 7px;
              width: 6px;
              height: 12px;
              border-width: 0px 2.5px 2.5px 0;
              transform: rotate(45deg);
            }
          }
        }
        .product-parts-label,
        .product-gift-label {
          gap: 4px;
        }
        .product-parts-image img,
        .gift-product-image img {
          width: 48px;
          height: 48px;
        }
        .product-parts-info,
        .gift-product-info {
          cursor: pointer;
          width: calc(100% - 52px);
          .product-parts-info-header,
          .gift-product-info-header {
            margin-bottom: 4px;
            .product-parts-title,
            .gift-product-title {
              font-weight: 600;
              font-size: 12px;
            }
            .product-parts-quantity,
            .gift-product-quantity {
              font-size: 12px;
            }
          }
          .product-parts-price,
          .gift-product-price {
            .save-price {
              font-size: 12px;
              padding: 0 4px;
              margin-right: 4px;
              list-style: 140%;
            }
            .parts-current-price,
            .gift-current-price {
              font-weight: 600;
              font-style: SemiBold;
              font-size: 12px;
              margin-right: 2px;
            }
            .parts-original-price,
            .gift-original-price {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}