.main {
    margin-top: 60px;
}

.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: 20px;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
}

.product-name {
    height: 40px;
    margin-bottom: 5px;
}

.product-rating-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.product-rating-stars {
    width: 100px;
    margin-right: 6px;
}

.product-rating-count {
    color: rgb(1,124,182);
    cursor: pointer;
    margin-top: 3px;
}

.product-price  {
    font-weight: 700;
    margin-bottom: 10px;
}

/* BUG FIX 4: was ".rpoduct-quantity-container" (r and p swapped) — the typo
   meant this rule never matched the HTML element, so margin-bottom was lost */
.product-quantity-container {
    margin-bottom: 17px;
}

.product-spacer {
    flex: 1;
}

.added-to-cart {
    color: rgb(6,125,98);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}
.added-to-cart.show {
  opacity: 1;
}

.added-to-cart img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.add-to-cart-button {
    width: 100%;
    padding: 8px;
    border-radius: 50px;
}