* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Arial", sans-serif;
  background-color: tan;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  padding: 20px;
  color: white;
  width: 100%;
  position: relative;
}
.navbar a {
  padding: 20px;
  text-decoration: none;
  color: white;
  font-size: 18px;
}
.navbar a:hover {
  color: brown;
}
.navbar .close {
  display: none;
}
svg {
  color: white;
  display: none;
}
h2 {
  margin: 20px;
  text-align: center;
}
.product-list {
  border-radius: 20px;
  padding: 20px;
  max-width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  background-color: sandybrown;
  color: white;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.product-item {
  background-color: darkseagreen;
  border-radius: 20px;
  padding: 20px;
  color: black;
  text-align: center;
  box-shadow: black 2px 4px 8px;
}
.product-info {
  margin-top: 10px;
  margin-bottom: 20px;
}
.product-item .shop-now {
  background-color: green;
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 20px;
  box-shadow: green 2px 4px 8px;
}
footer {
  font-weight: 18px;
  color: white;
  text-align: center;
  padding: 20px;
}
/* Responsive Styles */
@media (max-width: 768px) {
  /* Show hamburger icon */
  #hhamburger {
    color: white;
    display: block;
    cursor: pointer;
  }

  #hamburger svg {
    display: block;
    width: 2rem;
    height: 2rem;
  }

  /* Hide nav by default */
  .navbar {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: black;
    padding: 10px 0;
    z-index: 99;
  }

  /* Show nav when #navbar is targeted */
  .navbar:target {
    display: flex;
  }

  .navbar a {
    padding: 14px 20px;
    border-bottom: 1px solid #333;
  }

  /* Style the close button */
  .navbar .close {
    display: block;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2rem;
    color: brown;
    border-bottom: 1px solid #333;
  }
  /* Stack product cards vertically */
  .product-list {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  /* Make product cards full width */
  .product-item {
    width: 100%;
  }

  /* Make images fill the card */
  img {
    object-fit: cover;
    width: 100%;
    height: 200px;
  }
}
/* Tablet Styles (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Show hamburger icon on tablets too */
  #hamburger svg {
    display: block;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
  }

  /* Hide nav by default, show on target */
  .navbar {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: black;
    padding: 10px 0;
    z-index: 99;
  }

  .navbar:target {
    display: flex;
  }

  .navbar a {
    padding: 14px 20px;
    border-bottom: 1px solid #333;
  }

  .navbar .close {
    display: block;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2rem;
    color: brown;
    border-bottom: 1px solid #333;
  }

  /* 2-column product grid for tablets */
  .product-list {
    max-width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    justify-content: center;
  }

  /* Each card takes up ~45% so two fit per row */
  .product-item {
    width: calc(50% - 20px);
  }

  /* Slightly larger images */
  img {
    width: 100%;
    height: 220px;
  }
}