#container {
  display: grid;
  grid-template-rows: 130px auto 200px;
}



.product-detail-wrapper {
  grid-row: 2/3;
  margin-top: 100px;
  margin-bottom: 200px;
}

.header {
  grid-row: 1/2;
}

.footer {
  grid-row: 3/4;
}

.product-detail {
  display: grid;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  grid-template-columns: 5% 37.2% 52% 5%;
  grid-template-areas: ". img info .";
  width: 900px;
  height: 650px;
  justify-self: center;
  align-self: center;

}

.product-detail__img {
  display: grid;
  justify-self: center;
  align-self: center;
  height: 300px;
  width: 300px;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  grid-area: img;
  background-color: rgb(245, 245, 241);
}

.product-detail__img img {
  justify-self: center;
  align-self: center;

  width: 90%;
}

.product-detail__info {
  display: grid;
  grid-template-rows: 20% 10% 50% 20%;
  justify-self: center;
  align-self: center;
  height: 90%;
  width: 100%;
  border-radius: 7px;
  row-gap: 15px;
  padding: 10px;
  grid-area: info;
}

.product-detail__title {
  font-size: 35px;
  color: black;
  display: grid;
  font-weight: bolder;
  align-items: center;
  grid-row: 1/2;
  text-transform: capitalize;
  background-color: rgb(245, 245, 241);
  border-radius: 5px;
}

.product-detail__unitComparison {
  font-size: 15px;
  color: rgb(164, 164, 164);
  display: grid;
  align-items: center;
  grid-row: 2/3;
  background-color: rgb(245, 245, 241);
  border-radius: 5px;
}

.product-detail__price-wrapper {
  display: grid;
  align-content: center;
  grid-template-rows: 33% 33% 33%;
  row-gap: 5px;
  grid-row: 3/4;
  background-color: rgb(245, 245, 241);
  border-radius: 5px;
  width: 70%;
  height: 100%;
}

.product-detail__price {
  display: grid;
  grid-template-rows: 30% 40% 30%;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(245, 245, 241);
}

.product-detail__price-min-quant {
  font-size: 14px;
  grid-column: 1/2;
  grid-row: 1/2;
}

.product-detail__price-quant {
  grid-column: 1/2;
  grid-row: 2/3;
}

.product-detail__price-button {
  display: grid;
  grid-column: 2/2;
  grid-row: 2/3;
  justify-content: left;
}

.product-detail__price-button button {
  justify-self: center;
  width: 40px;
  border-radius: 20px;
  height: 40px;
  font-weight: bold;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  font-size: 10px;
  white-space: nowrap;
  display: block;
  letter-spacing: -1.1px;
  color: white(71, 71, 71);


}

.product-detail__scheduledPrice {
  grid-column: 1/2;
  grid-row: 3/4;

}

.product-detail__scheduledPrice span {
  color: #14c86e;
  font-weight: 900;
  font-size: 18px;
}

.product-detail__retailer-scheduledPrice .product-detail__disocunt-scheduledPrice .product-detail__wholesaler-scheduledPrice {
  display: inline;


}

.product-detail__scheduled-img {
  display: inline;
  height: 20px;
  width: 100px;
  margin-left: 8px;

}



.product-detail__plus-btn {
  font-size: 12px;
  font-weight: bold;
}

.product-detail__unitWeight-btn,
.product-detail__minQuantity-btn {
  font-size: 12px;

}

.product-detail__retailerUnit-btn,
.product-detail__productUnit-btn {
  font-size: 10px;

}



.product-detail__retailerPrice,
.product-detail__wholesalerPrice,
.product-detail__discountPrice {
  color: rgb(71, 71, 71);
  font-weight: 500;
  display: inline;
  font-size: 18px;
}

.product-detail__retailerUnit,
.product-detail__wholesalerUnit,
.product-detail__discountUnit {
  font-size: 14px;
  color: rgb(71, 71, 71);
  display: inline;
}

.product-detail__quantity-bar {
  display: grid;
  grid-row: 4/5;
  display: grid;

  align-items: center;
  justify-content: center;
  grid-template-columns: 68% 32%;
  align-items: center;
  border-radius: 7px;
  background-color: rgb(245, 245, 241);
  border-radius: 5px;
}




.quantity-bar-controls {
  display: grid;
  grid-row: 1/2;
  grid-column: 1/2;
  grid-template-columns: 30% 35% 35%;
  align-items: center;
}

.quantity-bar-buttons {
  display: grid;
  grid-row: 1/2;
  grid-column: 1/2;
  grid-template-columns: 50% 50%;
  align-items: center;
}

#btn-plus-retailer {
  display: grid;
  grid-row: 1/2;
  grid-column: 1/2;
  justify-self: right;
  height: 25px;
  width: 25px;
  justify-content: center;
  align-items: center;
}

#btn-minus-retailer {
  display: grid;
  grid-row: 1/2;
  grid-column: 2/3;
  justify-self: left;
  height: 25px;
  width: 25px;
  justify-content: center;
  align-items: center;
}

.quantity-bar-sum {
  grid-row: 1/2;
  grid-column: 2/3;
  grid-template-columns: 50% 50%;
  display: grid;
  align-content: center;
  height: 20px;
}


.quantity-bar-sum input {
  width: 30px;
  margin-right: 5px;
  justify-self: right;
  align-self: center;
  border-radius: 5px;
  border: 2px solid lightgray;
  outline: none;
}

.productUnit {
  display: inline;
  font-size: 14px;
}

.quantity-bar-value-sum {
  grid-row: 1/2;
  grid-column: 3/4;
  justify-self: left;
  align-self: center;
}

#quantity-sum {
  text-align: center;
  max-width: 50px;
  min-width: 40px;
  width: auto;



}

.value-sum-text {
  font-size: 16px;
}

.quantity-bar-add-cart {
  display: grid;
  grid-row: 1/2;
  grid-column: 2/3;
  justify-self: center;
  align-self: center;

  border-left: 1px solid lightgray;
}

/* Chrome, Safari, Edge, Opera */
.quantity-bar-sum input::-webkit-outer-spin-button,
.quantity-bar-sum input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.quantity-bar-sum input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-bar-add-cart {
  display: grid;
  justify-content: center;
  align-items: center;
}

.quantity-bar-add-cart button {
  width: 90%;
  color: white;
}

.quantity-bar-button {
  display: grid;
  justify-self: center;
  align-self: center;
}

/* Responsive overrides aligning with main.css breakpoints */
@media (max-width: 1199.98px) {
  .product-detail {
    width: min(900px, 95%);
    height: auto;
    grid-template-columns: 5% 38% 52% 5%;
  }

  .product-detail__img {
    height: 280px;
    width: 280px;
  }

  .product-detail__title {
    font-size: 32px;
  }
}

@media (max-width: 991.98px) {
  .product-detail {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    width: min(700px, 96%);
    height: auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
      ". img ."
      ". info .";
    row-gap: 16px;
    padding: 8px 0;
  }

  .product-detail__img {
    width: 60%;
    max-width: 520px;
    height: auto;
  }

  .product-detail__img img {
    width: 90%;
    max-width: 400px;
  }

  .product-detail__info {
    width: 100%;
    height: auto;
    grid-template-rows: auto auto auto auto;
  }

  .product-detail__price-wrapper {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767.98px) {
  .product-detail__title {
    font-size: 24px;
  }

  .product-detail__retailerUnit,
  .product-detail__wholesalerUnit,
  .product-detail__discountUnit {
    font-size: 11px;
  }

  .product-detail__quantity-bar {
    width: 90%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
    min-width: 200px;
  }

  .quantity-bar-controls {
    grid-row: 1/2;
  }

  .quantity-bar-add-cart {
    width: 100%;
    grid-row: 2/3;
    grid-column: 1/-1;
    border-left: none;
    padding-top: 10px;
  }

  #quantity-bar-add-cart__form {
    width: 100vw;
    height: 100%;
  }

  .quantity-bar-button {
    width: 100%;
    height: 100%;
  }

  .value-sum-text {
    font-size: 14px;
  }

  #btn-plus-retailer,
  #btn-minus-retailer {
    height: 28px;
    width: 28px;
  }
}

@media (max-width: 575.98px) {

  .container {
    padding: 0px;

  }
  

  .product-detail-wrapper {

    margin-top: 50px;
    margin-bottom: 300px;


  }

  .product-detail {
    width: 320px;
    height: 100%;

  }

  .product-detail__img{
    width: 80%;
    height: auto;
  }

  .product-detail__info {

    width: 100%;
  }


  .product-detail__title {
    font-size: 24px;
  }

  .product-detail__retailerUnit,
  .product-detail__wholesalerUnit,
  .product-detail__discountUnit {
    font-size: 11px;
  }

  .product-detail__plus-btn {
    letter-spacing: -2px;
  }

  .product-detail__quantity-bar {
    width: 90%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;

    grid-template-rows: 50% 50%;
    width: 300px;

  }


  .product-detail__scheduled-img {

    margin-top: 5px;
    height: 18px;
  }



  .quantity-bar-controls {
    grid-row: 1/2;
  }

  .quantity-bar-add-cart {
    width: 100%;
    grid-row: 2/3;
  }

  #quantity-bar-add-cart__form {
    width: 300px;
    height: 100%;
  }

  .quantity-bar-button {
    width: 100%;
    height: 100%;
  }

.product-detail__price-button {
  padding: 2px;
}

  .value-sum-text {
    font-size: 14px;
  }

  #btn-plus,
  #btn-minus {
    height: 28px;
    width: 28px;
  }
}