.products{
    margin-top: 20px;
}
.products-grid{
    display: grid;
    grid-template-columns: repeat(8,1fr);
}
@media (max-width: 2000px) {
    .products-grid {
      grid-template-columns: repeat(7, 1fr);
    }
  }
  
  /* This @media means when the screen width is 1600px or
     less, we will divide the grid into 6 columns. */
  @media (max-width: 1600px) {
    .products-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  
  @media (max-width: 1300px) {
    .products-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  
  @media (max-width: 1000px) {
    .products-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (max-width: 800px) {
    .products-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 575px) {
    .products-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 450px) {
    .products-grid {
      grid-template-columns: 1fr;
    }
  }
.product-container{
    padding-top: 40px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
  
    border-right: 1px solid rgb(231, 231, 231);
    border-bottom: 1px solid rgb(231, 231, 231);
  
    display: flex;
    flex-direction: column;
}
.product-image-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    margin-bottom: 10px;
}
.product-image{
    max-width: 100%;
    max-height: 100%;
}
.product-text{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.product-rating{
    margin-top: 10px;
    display: flex;
    align-items: center;
}
.product-rating-image{
    width: 100px;
}
.product-rating-counts{
    color: rgb(1, 124, 182);
    cursor: pointer;
    margin-left: 10px;
    margin-top: 3px;
}
.product-price{
  margin-top: 10px;
  font-weight: bold;
}
.product-quantity-container{
  margin-top: 8px;
}
.product-quantity{
  cursor: pointer;
  font-size: 15px;
  padding: 3px 5px;
  background-color:rgb(240, 240, 240) ;
  border: 2px rgb(213, 217, 217) solid;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
  outline: none;


}

  .quantity-bg {
    border: 2px rgb(227, 122, 41) solid; /* Keep orange border on focus */
  }

.extraspace{
  flex: 1;
  margin-top: 5px;
}
.variation-name{        
  margin-top: 10px;
  font-weight: 500;
}
.variation-button{
  background-color: white;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 7px;
  margin-top: 10px;
  margin-right: 5px;
  border:1px rgb(173, 177, 184) solid;
  border-radius: 7px;
}
.button-border{
  border: 2px rgb(227, 122, 41) solid;
  padding: 3px 6px;
}

.added-to-cart-text{
  margin-top: 15px;
  color: rgb(6, 125, 98);
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.added-success{
  opacity:1;
  
}

.product-add-to-cart-container{
  display: flex;
  align-items: center;
  justify-content: center;

}
.product-add-to-cart{
  cursor: pointer;
  width: 100%;
  background-color: rgb(255,216,20);
  padding: 8px;
  border: none;
  border-radius: 50px;

}