* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 0 20px;
    height: 50px;
    border-bottom: 1px solid #000000;
}

#nav-left {
    font-weight: bold;
    font-size: 1.2rem;
}

#nav-center a {
    margin-left: 20px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    gap: 10px;
}

#nav-right a {
    margin-left: 20px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
}

#product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 40px 20px 40px;
}

#product-grid div {
  flex: 1 1 calc(33.333% - 20px); /* max 3 per row with gap accounted */
  display: flex;
  flex-direction: column; /* stack image and text vertically */
  align-items: center;    /* center content horizontally */
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  box-sizing: border-box;  /* ← ensures border is inside width */
  overflow: hidden;         /* keeps content inside the box */
}

#product-grid div img {
    width: 100%;          /* make image fill the square */
    height: 100%;         /* make image fill the square */
    object-fit: cover;    /* crop image nicely if aspect ratio differs */
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#product-grid div p {
  margin: 5px 0 0 0;     /* space between image and text */
  text-align: center;

}