body {
    text-align: center;
    padding: 40px; /* leave space between the edge of the webpage and content */
    background-color: #f7f5f2; /* sets the background color of the webpage */
}

img {
    max-width: 100%; /* ensures the image doesn't exceed the width of its container. This is important for responsive design, so the image scales down on smaller screens. */
    width: 100%; /* makes the image take up the full width of its container. The card is 320px wide, and it has 15px of padding, so the image will fill the space inside the card. */
    height: 250px; /* sets the height of the image to 250 pixels */
    object-fit: cover; /* "Fill the 100% × 250px area, but don't distort the photograph." This makes sure the image covers the entire area of its container without stretching or squishing. It may crop the image if it doesn't fit perfectly. */
    border-radius: 10px; /* makes the corners rounded */
}

/* Code for the orchid cards and container */
.orchid-container {
    display: flex; /* arrange the things inside this container next to each other. */
    justify-content: center; /* center the things inside this container horizontally. */
    gap: 20px; /* adds 20 pixels of space between the things inside this container. */
    flex-wrap: wrap; /* allows the things inside this container to wrap to the next line if there's not enough space. */
}
.orchid-card { /* This is a class selector. It applies styles to any element with the class "orchid-card". */
    width: 320px; /* sets the width of the card */
    margin: 20px auto; /* centers the card horizontally and adds space above and below, the auto part helps center the card horizontally */
    padding: 15px; /* adds space inside the card */
    max-width: 100%; /* ensures the card doesn't get wider than the screen on smaller devices */
    box-sizing: border-box; /* makes sure the padding is included in the width of the card */
    border: 1px solid #ccc;
    border-radius: 10px; /* makes the corners of the card rounded */
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.orchid-card h2 { /* This is a descendant selector. It applies styles to any h2 element that is inside an element with the class "orchid-card". */
    margin: 0;
}
.orchid-card p { /* This is a descendant selector. It applies styles to any p element that is inside an element with the class "orchid-card". */
    margin: 0;
}
.details {
    color: #666;
}
.stock {
    font-weight: bold;
}

/* code for filter buttons and dropdown menu */
.filter-container {
    margin: 30px 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-container label {
    font-weight: bold;
}
.filter-container select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
}
.filter-options button {
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 20px;
    background-color: white;
    cursor: pointer;
    font-size: 15px;
}
.filter-options button.active {
    background-color: #333;
    color: white;
}

/* Code for Pots and Accessories section */
.accessories-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #ddd;
}
.accessories-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.accessory-card {
    width: 320px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.accessory-card h2 {
    margin: 0;
}
.accessory-card p {
    margin: 0;
}
.accessory-card .details {
    color: #666;
}
.accessory-card .stock {
    font-weight: bold;
}