main {
  display: flex;
  padding: 20px;
}

.sidebar {
  width: 20%;
  background-color: #fff;
  padding: 20px;
  border-radius: 1px;
  margin-right: 20px;
  border-right: 2px solid black;
}
.sidebar .search-form {
 display: flex; 
  width: 100%; 
  align-items: center;
}


.sidebar .search-bar input {

  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px 0 0 3px; /* Round only the left side */
  display: inline-block;
}

.sidebar .search-bar button {
  width: 20%;
  padding: 8px;
  border: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  border-radius: 3px;
  display: inline-block;
}

.sidebar .filter {
  margin-bottom: 20px;
}

.sidebar .filter h3 {
  margin-bottom: 10px;
}

.sidebar .filter input[type="range"] {
  width: 100%;
}

.sidebar .price-range {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.sidebar .categories {
  margin-top: 20px;
}

.sidebar .categories h3 {
  margin-bottom: 10px;
}

.sidebar .categories ul {
  list-style: none;
}

.sidebar .categories ul li {
  margin-bottom: 10px;
}

/* Shop Section */
.shop-section {
  width: 75%;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.shop-section h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

.shop-section .sort {

  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.shop-section .sort select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  padding: 20px;
  width: 300px;
}

.product-grid a{
  text-decoration: none;
  color: black;
}

.product-item {
  width: 300px;
  background-color: white;
  padding: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border: 3px solid black;
  text-align: center;
}
.product-text{
  width: 300px;
  background-color: #f4f4f4;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  border-left: 3px solid black;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}


.product-item img {
  height: 150px;
  width: 100px;
  background-color: #ddd;
  margin-bottom: 10px;
}

.product-item p {
  margin: 5px 0;
}

header ul li:nth-child(3) {
  background-color: lightgray;
}