.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.product-card {
  background-color: #f1f2f3;
  color: #363942;
  width: 300px;
  padding: 20px;
  margin: 15px 15px 15px 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 2px 6px #888888;
}

.database-card {
  background-color: #f1f2f3;
  color: #363942;
  width: auto;
  padding: 20px;
  margin: 15px 15px 15px 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 2px 6px #888888;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 5px;
}

.product-card h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.product-card p {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.product-card .price {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-card button {
  background-color: #E7CEAC;
  color: #363942;
  padding: 5px 10px;
	margin-left: 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.product-card button:hover {
  background-color: #fff;
  color: #363942;
}

.remove-btn {
	float: right;
	margin-right: 10px;
}

#remove-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

#remove-btn:hover {
  color: red;
}

table.database {
    width: 100%; /* Breedte van de tabel */
    border-collapse: collapse; /* Zorg ervoor dat cellen geen dubbele randen hebben */
    margin-top: 20px; /* Ruimte boven de tabel */
}

th, td {
    border: 1px solid #ddd; /* Rand voor cellen */
    padding: 10px; /* Ruimte binnen de cellen */
    text-align: center; /* Tekst centreren */
    width: 100%;
margin: 15px 15px 15px 15px;
}

th {
    background-color: #363942; /* Achtergrondkleur voor koppen */
    color: E7CEAC; /* Tekstkleur voor koppen */
}

tr:nth-child(even) {
    background-color: #f2f2f2; /* Achtergrondkleur voor even rijen */
}

tr:hover {
    background-color: #ddd; /* Achtergrondkleur bij hover */
}

.sold-out {
    opacity: 0.5;
    pointer-events: none; /* Kan niet meer aangeklikt worden */
}

.out-of-stock {
    color: red;
    font-weight: bold;
}