/* Multi Variant Popup Wrapper start */
.multi-variant-popup-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.502);
    z-index: 9999;
    overflow-y: auto;
    &.active {
      display: flex;
    }
    &.open {
      .multi-variant-popup-inner {
        transform: scale(1);
        &.fix-height-popup {
          height: 400px;
          overflow-y: scroll;      
        }
      }
    }
    .product-card-atc {
      position: relative;
      font-size: 1rem;
      color: #723400;
      background-color: #e8dacf;
      border: 1px solid #723400;
      font-weight: 700;
      margin-top: 15px;
      width: 100%;
      height: 44px;
      border-radius: calc(var(--button-border-radius, 16px));
      &.btn-loading {
        .spinner {
          opacity: 1;
          .spinner-path {
            stroke: #ffff;
          }
        }
        .product-card--add-to-cart-text {
          opacity: 0;
        }
      }
      .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 20;
        opacity: 0;
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        padding: 7px;
      }
    }
    .product-card-atc[disabled] {
      background-color: #D6D6D6;
      color: #999999;
      pointer-events: none;
    }
    .multi-variant-popup-inner {
      padding: 20px 20px 10px;
      background-color: #fff;
      border: 2px solid #E8E8E8;
      box-shadow: 10px 10px 20px #0000000d;
      border-radius: 18px;
      max-width: 524px;
      width: 90%;
      height: fit-content;
      margin: auto;
      transform: scale(0);
      transition: all 0.5s ease;
      &::-webkit-scrollbar {
        display: none;
      }
      @media only screen and (max-width: 767px) {
        width: 100%;
        max-width: 400px;
        padding: 20px 5px 10px;
      }
      .multi-variant-popup-content {
        .details-wrapper {
          .product-title-js {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 5px;
            .product-title {
              display: block;
              margin-bottom: 10px;
              font-size: 20px;

              @media only screen and (max-width: 321px) {
                font-size: 16px;
              }
            }
            .close-button {
              margin-bottom: 10px;
            }
          }
          .variant-picker-quantity-section {
            .variant-picker-quantity-wrapper {
              .swatches-wrapper {
                width: 100%;
                max-width: 100%;
                @media only screen and (max-width: 767px) {
                  max-width: 100%;
                }
                variant-radios {
                  fieldset {
                    padding: 0;
                    border: none;
                  }
                }
                .form-label {
                  font-size: 15px;
                  line-height: normal;
                  margin-bottom: 6px;
                }
                .options-wrapper {
                  .option-value {
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    padding: 5px 15px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    align-items: center;
                    cursor: pointer;
  
                  }
                }
                .option-list {
                  cursor: pointer;
                  width: 100%;
                  border-radius: 4px;
                  height: 45px;
                  line-height: 45px;
                  padding: 0px 15px;
                  border: 1px solid #D6D6D6;
                  margin-bottom: 10px;
                  display: flex;
                  justify-content: space-between;
                  @media only screen and (max-width: 767px) {
                    width: 100%;
                  }
                  &.selected {
                    border: 1px solid #723400;
                    .option-label {
                      font-weight: bold;
                    }
                  }
                  .variant-image-wrapper {
                    display: flex;
                    margin-right: 10px;
                    padding: 4px 0;
                    width: 42px;
                    height: 42px;
                    img {
                      width: 100%;
                      height: auto;
                      max-width: 100%;
                    }
                  }
                  .option-details {
                    cursor: pointer;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                    width: 100%;
                  }
                  .option-label {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;
                    line-height: normal;
                    width: 100%;
                    @media only screen and (max-width: 767px) {
                      justify-content: flex-start;
                      gap: 10px;
                    }
                  }
                  .price-wrapper {
                    display: flex;
                    width: 50%;
                    font-size: 15px;
                    line-height: normal;
                    span {
                      color: #010101;
                      opacity: .4;
                      padding-left: 3px;
                      text-decoration: line-through;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .multi-variant-popup-footer {
        margin-top: 5px;
        text-align: center;
        .multi-popup-close {
          font-size: 16px;
          border: 0;
          vertical-align: baseline;
          word-wrap: break-word;
          text-transform: uppercase;
          text-decoration: underline;
        }
      }
    }
  }
  
  /* Customize styling for pdp swatch radio btn */
  input[type='radio'] {
    -webkit-appearance: none;
    width: 15px;
    height: 13px;
    margin: auto;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 0 1px #D6D6D6;
    position: relative;
  }
  input[type='radio']:checked {
    box-shadow: 0 0 0 1px #281A1B;
  }
  input[type='radio']:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
  }
  input[type='radio']:checked:before {
    background: #723400;
  }
  /* Multi Variant Popup Wrapper end */