@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

* {
    -webkit-tap-highlight-color: transparent;
}


body{
    font-family:"Nunito",sans-serif; margin: 0;background: #f6f6f6;color: #222;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%239A9A9A' stroke-width='2' opacity='0.2'%3E%3Cg transform='translate(0 0) rotate(-25 50 50)'%3E%3Cpath d='M20 42 L50 25 L80 42 L50 59 Z'/%3E%3Cpath d='M28 47 V62 Q50 77 72 62 V47'/%3E%3Cpath d='M80 42 V61'/%3E%3Ccircle cx='80' cy='64' r='2' fill='%239A9A9A'/%3E%3C/g%3E%3Cg transform='translate(100 100) rotate(-25 50 50)'%3E%3Cpath d='M20 42 L50 25 L80 42 L50 59 Z'/%3E%3Cpath d='M28 47 V62 Q50 77 72 62 V47'/%3E%3Cpath d='M80 42 V61'/%3E%3Ccircle cx='80' cy='64' r='2' fill='%239A9A9A'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    background-repeat:repeat;
    background-size:110px 110px;
}

.page-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}


/* =========================================================
   PRODUCT LIST
   ========================================================= */

#productContainer{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  padding:20px;
  align-items:stretch;
}
#productContainer {
  transition: opacity 0.2s ease;
}

.product-card{
  height:100%;
  box-sizing:border-box;
}
/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card{
  display:flex;
  gap:20px;
  padding:20px;
  border-radius:5px;
  position:relative;
  align-items:flex-start;

  border:1px solid #a2ffba;

  background:#fff;

  box-shadow:0 3px 12px rgba(0,0,0,0.035);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.product-card:hover{
  transform:translateY(-3px);

  box-shadow:0 10px 25px rgba(0,0,0,0.07);

  border-color:rgba(45,203,57,0.22);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-card img,
.product-card .product-image,
.product-card .thumbnail{
  border-radius:3px !important;

  border: 1px solid #8fc097;


  box-shadow:0 5px 14px rgba(0,0,0,0.10);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.product-card img:hover,
.product-card .product-image:hover,
.product-card .thumbnail:hover{
  transform:translateY(-2px);

  box-shadow:0 9px 20px rgba(0,0,0,0.15);
}


/* =========================================================
   CONTROL BAR
   ========================================================= */

/*
   This is the redesigned section from your screenshot.
   The whole search/filter area becomes one clean workspace.
*/

.search-btn svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#controlBar{
  margin:0 20px 4px 20px;
  padding:28px;
  
  border-radius:5px;

  background:#fff;

  border:1px solid #a2ffba;

  box-shadow:
    0 4px 18px rgba(0,0,0,0.035);

  box-sizing:border-box;
}


/* =========================================================
   SEARCH
   ========================================================= */

#searchInput{
  display:block;

  width:100%;
  height:42px;

  box-sizing:border-box;

  padding:0 15px;

  margin:0 0 12px 0;

  border-radius:100px;

  border:1px solid rgba(0,0,0,0.07);

  background:#f7f8f7;

  outline:none;

  font-family:Arial,sans-serif;
  font-size:13px;
  color:#222;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#searchInput::placeholder{
  color:#888;
}

#searchInput:hover{
  background:#f4f6f4;
}

#searchInput:focus{
  background:#fff;

  border-color:#28A745;

  box-shadow:
    0 0 0 3px rgba(45,203,57,0.11);
}


/* =========================================================
   CONTROL ROW
   ========================================================= */

/*
   Keeps the category filters together on the left
   and Sort on the right.
*/

#controlBar > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


/* =========================================================
   FILTER BUTTON GROUP
   ========================================================= */

#controlBar > div > div{
  display:flex;
  align-items:center;
  gap:7px;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.tab-btn{
  height:32px;

  padding:0 13px;

  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:500;

  border-radius:100px;
  
  border-color:#7777771a !important;

  cursor:pointer;

  border:1px solid transparent;

  white-space:nowrap;

  background:#f6f7f6;

  color:#222;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.tab-btn:hover{
  background:#eef1ee;

  transform:translateY(-1px);
}

.active-tab{
  background:#28A745 !important;

  color:#fff !important;

  border-color:#7777777a !important;

  box-shadow:
    0 3px 8px rgba(45,203,57,0.18);
}


/* =========================================================
   SORT
   ========================================================= */

.sort-wrap{
  position:relative;

  display:inline-flex;

  flex-shrink:0;
}

#sortSelect{
  height:32px;

  min-width:120px;

  box-sizing:border-box;

  padding:0 30px 0 12px;

  border-radius:4px;

  border:1px solid rgba(0,0,0,0.07);

  outline:none;

  font-family:Arial,sans-serif;
  font-size:12px;

  background:#fff;

  color:#222;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#sortSelect:hover{
  border-color:rgba(0,0,0,0.14);
}

#sortSelect:focus{
  border-color:#28A745;

  box-shadow:
    0 0 0 3px rgba(45,203,57,0.11);
}

#sortSelect {
  /* Flips the triangle to point downwards (v) in a single locked layer */
  background-image: conic-gradient(from 315deg at 50% 100%, #666 90deg, transparent 0);

  /* Positioned and sized as a single unit */
  background-position: calc(100% - 12px) 48%;
  background-size: 10px 5px;
  background-repeat: no-repeat;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}





/* =========================================================
   PAGINATION
   ========================================================= */

#pagination{
  display:flex;

  justify-content:center;
  align-items:center;

  gap:8px;

  margin:22px 20px;
}

#pagination button{
  border:none;

  padding:8px 14px;

  border-radius:8px;

  background:#28A745;

  color:#fff;

  cursor:pointer;

  font-size:12px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#pagination button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 5px 12px rgba(45,203,57,0.18);
}

#pageInfo{
  font-size:12px;
  color:#666;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

#noResults{
  text-align:center;

  margin-top:20px;

  color:#777;

  font-size:13px;
}

/* ================= SEARCH WITH ICON ================= */

.search-wrap{
  position:relative;
  width:100%;
  margin-bottom:12px;
}

.search-wrap::before{
  content:"";

  position:absolute;

  left:14px;
  top:50%;

  width:13px;
  height:13px;

  border:2px solid #59635c;

  border-radius:50%;

  transform:translateY(-55%);

  box-sizing:border-box;

  pointer-events:none;
}

.search-wrap::after{
  content:"";

  position:absolute;

  left:26px;
  top:50%;

  width:6px;
  height:2px;

  background:#59635c;

  border-radius:2px;

  transform:translateY(3px) rotate(45deg);

  transform-origin:left center;

  pointer-events:none;
}

#searchInput{
  width:100%;
  height:42px;

  box-sizing:border-box;

  padding:0 15px 0 40px;

  margin:0;

  border-radius:11px;

  border:1px solid rgba(0,0,0,0.07);

  background:#f7f8f7;

  outline:none;

  font-family:Arial,sans-serif;
  font-size:13px;
  color:#222;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#searchInput::placeholder{
  color:#888;
}

#searchInput:hover{
  background:#f4f6f4;
}

#searchInput:focus{
  background:#fff;

  border-color:#28A745;

  box-shadow:
    0 0 0 3px rgba(45,203,57,0.11);
}

/* ================= SEARCH BAR ================= */

.search-wrap{
  position:relative;
  width:100%;
  margin-bottom:12px;
}


/* SEARCH ICON */

.search-wrap::before{
  content:"";

  position:absolute;

  left:15px;
  top:50%;

  width:13px;
  height:13px;

  border:2px solid #59635c;

  border-radius:50%;

  transform:translateY(-60%);

  box-sizing:border-box;

  pointer-events:none;

  z-index:2;
}

.search-wrap::after{
  content:"";

  position:absolute;

  left:27px;
  top:50%;

  width:6px;
  height:2px;

  background:#59635c;

  border-radius:2px;

  transform:translateY(3px) rotate(45deg);

  transform-origin:left center;

  pointer-events:none;

  z-index:2;
}


/* INPUT */

#searchInput{
  display:block;

  width:100%;
  height:44px;

  box-sizing:border-box;

  padding:0 105px 0 42px;

  margin:0;

  border-radius:100px;

  border:1px solid rgba(0,0,0,0.07);

  background:#f7f8f7;

  outline:none;

  font-family:Arial,sans-serif;

  font-size:13px;

  color:#222;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#searchInput::placeholder{
  color:#888;
}

#searchInput:hover{
  background:#f4f6f4;
}

#searchInput:focus{
  background:#fff;

  border-color:#28A745;

  box-shadow:
    0 0 0 3px rgba(45,203,57,0.11);
}


/* ================= SEARCH BUTTON ================= */

.search-btn{
  position:absolute;

  right:6px;
  top:5px;

  height:34px;
  width: 50px;
  
  padding:0 0px;

  border:1px solid;

  border-color: #d3d3d3c7;

  border-radius:100px;

  background:#28a752;

  color:#fff;

  font-family:Arial,sans-serif;

  font-size:12px;

  font-weight:600;

  cursor:pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  z-index:3;
}

.search-btn:hover{
  background:#28A745;

  transform:translateY(-1px);

  box-shadow:
    0 4px 10px rgba(45,203,57,0.20);
}

.search-btn:active{
  transform:translateY(0);
}


/* ================= MOBILE ================= */

@media (max-width:768px){

  #searchInput{
    height:42px;

    padding-left:40px;
    padding-right:92px;
  }

  .search-btn{
    right:5px;
    top:5px;

    height:30px;

    padding:0 0px;
  }

  .search-wrap::after{
  top:40%;
  }

  .search-wrap::before{
  top:40%;
  }
}

/* MOBILE */

@media (max-width:768px){

  .search-wrap{
    margin-bottom:12px;
  }

  #searchInput{
    height:40px;
    padding-left:39px;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

  .page-container{
    max-width:none;
    padding:0;
  }

  /*
     Control panel stays clean on mobile.
  */

  #controlBar{
    margin:0 12px 4px 12px;

    padding:14px;

    
  }

  #searchInput{
    height:40px;

    margin-bottom:12px;

    font-size:13px;
  }

  /*
     Category filters become horizontally scrollable
     rather than wrapping awkwardly.
  */

  #controlBar > div{
    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:8px;

    overflow:visible;
  }

  #controlBar > div > div{
    display:flex;

    gap:6px;

    overflow-x:auto;

    overflow-y:hidden;

    flex:1;

    min-width:0;

    padding-bottom:2px;

    scrollbar-width:none;
  }

  #controlBar > div > div::-webkit-scrollbar{
    display:none;
  }

  .tab-btn{
    flex-shrink:0;

    height:31px;

    padding:0 12px;

    font-size:11px;
  }

  .sort-wrap{
    flex-shrink:0;
  }

  #sortSelect{
    min-width:88px;

    height:31px;

    font-size:11px;
  }


  /* ================= PRODUCT LIST ================= */

  #productContainer{
    grid-template-columns:1fr;
    padding:14px 12px;
    gap:12px;
  }

  .product-card{
    gap:14px;
    padding:20px;
    align-items:flex-start;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

  #controlBar{
    margin-left:10px;
    margin-right:10px;

    padding:12px;
  }

  #productContainer{
    grid-template-columns:1fr;
    padding-left:10px;
    padding-right:10px;
  }

  .product-card{
    gap:12px;

    padding:20px;

    align-items:flex-start;
  }

  #sortSelect{
    min-width:82px;
  }

}

/* ================= PRODUCT DESCRIPTION ================= */

.product-description{
  font-size:12px;
  font-style:italic;
  line-height:1.4;
  color:#777;

  margin-top:5px;
  margin-bottom:4px;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  overflow:hidden;

  max-width:600px;
}

/* ================= PRODUCT META ================= */

.product-meta{
  display:flex;
  align-items:center;
  gap:18px;

  margin-top:10px;
  margin-bottom:8px;

  color:#69736f;

  font-size:12px;

  white-space:nowrap;
}

.meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.meta-icon{
  width:16px;
  height:16px;

  fill:none;

  stroke:#69736f;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;

  flex-shrink:0;
}


/* MOBILE */

@media (max-width:600px){

  .product-meta{
    gap:12px;
    font-size:11px;
  }

  .meta-icon{
    width:15px;
    height:15px;
  }

}

/* ================= SELLER ROW ================= */

.seller-row{
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:8px;
}

.seller-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  border: 1px solid #e0e0e0;

  background:#e5f7ea;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.seller-icon svg{
  width:16px;
  height:16px;

  fill:none;

  stroke:#159447;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.seller-name{
  color:#555;

  text-decoration:none;

  font-size:12px;

  font-weight:400;

  line-height:1;
}

.seller-name:hover{
  color:#2DCB39;
}

/* =========================================================
   TABLET / MOBILE LANDSCAPE
   ========================================================= */

@media (min-width:601px) and (max-width:900px){

  #productContainer{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:16px;
  }

  .product-card{
    gap:12px;
    padding:15px;
    min-width:0;
    box-sizing:border-box;
  }

  .product-card > *{
    min-width:0;
    max-width:100%;
  }

  .product-card img,
  .product-card .product-image,
  .product-card .thumbnail{
    max-width:100%;
  }

  .product-description{
    max-width:100%;
  }

  .product-meta{
    gap:10px;
    white-space:normal;
    flex-wrap:wrap;
  }

  .seller-row{
    min-width:0;
  }

  .seller-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}