.elvtd-buy-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;

  @media(max-width: 767px) {
    flex-direction: column;
  }

  .quantity-selector {
    width: 25%;
    display: flex;
    flex-direction: row;
    height: 74px;

    @media(max-width: 767px) {
      width: 100%;
    }

    .product-increase,
    .product-decrease {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      border: 2px solid #D3D3D3;
      font-size: 26px;
      font-weight: 500;
      color: #000;
      line-height: 1;
      cursor: pointer;
      align-items: center;

      @media(max-width: 767px) {
        width: 20%;
      }

      &[disabled] {
        color: #aaa;
        cursor: not-allowed;
      }
    }

    .product-decrease {
      border-right: none;
      border-radius: 50px 0 0 50px;
      padding: 10px 10px 10px 20px;

      @media (max-width: 1023px) {
        height: 54px;
      }
    }

    .product-increase {
      border-left: none;
      border-radius: 0 50px 50px 0;
      padding: 10px 20px 10px 10px;
      @media (max-width: 1023px) {
        height: 54px;
      }
    }

    #productQuantity,
    .product-quantity {
      width: 40%;
      height: 74px;
      background: #fff;
      border: 2px solid #D3D3D3;
      border-left: none;
      border-right: none;
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      color: #000;
      padding: 10px 5px;
      text-align: center;
      appearance: textfield;
      -moz-appearance: textfield;

      @media (max-width: 1023px) {
        height: 54px;        
      }

      @media(max-width: 767px) {
        width: 60%;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }

  .buy-button-area {
    display: flex;
    flex: 1;

    .elvtd-buy-button {
      display: flex;
      flex: 1;
      gap: 12px;
      justify-content: center;
      align-items: center;
      background: var(--base-btn-bg-color);
      border: none;
      border-radius: 50px;
      color: var(--base-btn-color);
      font-size: 1.56em;
      font-weight: 500;
      letter-spacing: 2px;
      cursor: pointer;
      transition: .2s;

      @media(max-width: 1023px) {
        height: 50px;
        font-size: 1.05em;
        letter-spacing: 1px;
        gap: 8px;
      }

      &:hover {
        background: var(--base-btn-bg-hover-color);
      }

      &:after {
        content: "";
        width: 12px;
        height: 10px;
        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMyAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjQ5OTkgNS4wMDAxQzEyLjQ5NTkgNS40Mzg1MiAxMi4zMTkyIDUuODU3NjkgMTIuMDA4MyA2LjE2Njc3TDguNDMzMjUgOS43NTAxQzguMjc3MTIgOS45MDUzMSA4LjA2NTkxIDkuOTkyNDMgNy44NDU3NSA5Ljk5MjQzQzcuNjI1NiA5Ljk5MjQzIDcuNDE0MzkgOS45MDUzMSA3LjI1ODI1IDkuNzUwMUM3LjE4MDE1IDkuNjcyNjMgNy4xMTgxNSA5LjU4MDQ3IDcuMDc1ODQgOS40Nzg5MkM3LjAzMzU0IDkuMzc3MzcgNy4wMTE3NSA5LjI2ODQ1IDcuMDExNzUgOS4xNTg0NEM3LjAxMTc1IDkuMDQ4NDMgNy4wMzM1NCA4LjkzOTUxIDcuMDc1ODQgOC44Mzc5NkM3LjExODE1IDguNzM2NDEgNy4xODAxNSA4LjY0NDI0IDcuMjU4MjUgOC41NjY3N0w5Ljk5OTkyIDUuODMzNDRIMS42NjY1OUMxLjQ0NTU3IDUuODMzNDQgMS4yMzM2MSA1Ljc0NTY0IDEuMDc3MzMgNS41ODkzNkMwLjkyMTA0OSA1LjQzMzA4IDAuODMzMjUyIDUuMjIxMTIgMC44MzMyNTIgNS4wMDAxQzAuODMzMjUyIDQuNzc5MDkgMC45MjEwNDkgNC41NjcxMyAxLjA3NzMzIDQuNDEwODVDMS4yMzM2MSA0LjI1NDU3IDEuNDQ1NTcgNC4xNjY3NyAxLjY2NjU5IDQuMTY2NzdIOS45OTk5Mkw3LjI1ODI1IDEuNDI1MUM3LjEwMTMzIDEuMjY5MjkgNy4wMTI3NCAxLjA1NzUyIDcuMDExOTYgMC44MzYzODNDNy4wMTExNyAwLjYxNTI0NiA3LjA5ODI3IDAuNDAyODU2IDcuMjU0MDkgMC4yNDU5MzZDNy40MDk5IDAuMDg5MDE2NCA3LjYyMTY3IDAuMDAwNDIwMDM5IDcuODQyODEgLTAuMDAwMzYxMzYyQzguMDYzOTQgLTAuMDAxMTQyNzYgOC4yNzYzMyAwLjA4NTk1NTUgOC40MzMyNSAwLjI0MTc3TDEyLjAwODMgMy44MjUxQzEyLjMyMTIgNC4xMzYyMyAxMi40OTgxIDQuNTU4NzkgMTIuNDk5OSA1LjAwMDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K') no-repeat center center;
        background-size: contain;
      }
    }
  }

  .text-line {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: #969696;
    margin-top: -10px;
    
     @media (max-width: 767px) {
        text-align: center;
      }
  }
}