@import url(../main.css);
.product-back {
  width: 100%;
  height: 900px;
}
.rounded-size {
  border: 1px solid gainsboro;
  padding: 5px 10px;
  font-size: 13.5px;
}
.product-fixed {
  display: flex;
}
.add-fixed {
  z-index: 4;
  transition: 0.8s;
  transform: translateY(100%);
}
.add-fixed.on {
  transform: translateY(0%);
}

.rounded-size:hover {
  color: var(--secondary-50);
  border: 1px solid var(--primary-900);
  background-color: var(--primary-900);
}
.rounded-size.on {
  color: var(--secondary-50);
  border: 1px solid var(--primary-900);
  background-color: var(--primary-900);
}
.product-quantity-change {
  width: fit-content;
}
.add-cart-fixed {
  width: 300px;
}
/* Progress bar */

.progress{
  position: relative;
  width: 350px; 
  height: 10px;
  border-radius: 10px; 
}
.progress-bar{
  border-radius: 10px;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--secondary-300);
}
.comment-container{
  border-left: 1px solid var(--primary-700);
}
.review-star{
  color: gainsboro;
}
.review-star:hover{
  color: var(--bs-warning);
}

@media (max-width: 565px) {
  .progress{
    width: 250px;
  }
  .add-fixed.on {
    transform: translateY(-80%);
  }
  .product-back {
    height: 600px;
  }
  .add-cart-fixed {
    width: 100px;
  }
  .product-fixed {
    display: none;
  }
}