.products-page {
  background:#fff
}
.products-hero {
  background:linear-gradient(90deg,#1b1e28e8,#1b1e2899),url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1600&q=85') center/cover;
  color:#fff;
  padding:65px 0
}
.products-hero h1 {
  font-weight:800;
  font-size:42px
}
.products-hero p {
  color:#e3e4e9
}
.product-search {
  max-width:480px;
  background:#fff;
  border-radius:9px;
  padding:4px 13px;
  display:flex;
  align-items:center;
  color:#8c8e98
}
.product-search input {
  border:0;
  outline:0;
  padding:10px;
  flex:1
}
.chips {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.chips button {
  border:1px solid #e7e7e7;
  background:#fff;
  padding:8px 16px;
  border-radius:20px;
  font-family:inherit;
  font-size:12px
}
.chips button.active,.chips button:hover {
  background:#1d2028;
  color:#fff;
  border-color:#1d2028
}
.product-card {
  border:1px solid #ededed;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  transition:.2s
}
.product-card:hover {
  box-shadow:0 12px 24px #00000013;
  transform:translateY(-4px)
}
.product-image {
  height:195px;
  position:relative
}
.product-image img {
  width:100%;
  height:100%;
  object-fit:cover
}
.product-image span {
  position:absolute;
  right:10px;
  top:10px;
  background:#ffb800;
  padding:4px 8px;
  border-radius:5px;
  font-size:10px;
  font-weight:700
}
.product-image button {
  position:absolute;
  left:10px;
  top:10px;
  background:#fff;
  border:0;
  border-radius:50%;
  width:30px;
  height:30px
}
.product-info {
  padding:14px
}
.product-info small {
  color:#d18c00;
  font-weight:600;
  font-size:11px
}
.product-info h3 {
  font-size:16px;
  font-weight:700;
  margin:6px 0
}
.product-info p {
  color:#8b8e98;
  font-size:11px;
  margin:0 0 12px
}
.product-info>div {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.product-info b {
  font-size:15px
}
.product-info a {
  display:grid;
  place-items:center;
  background:#ffb800;
  width:31px;
  height:31px;
  border-radius:8px;
  color:#1d2028
}
@media(max-width:575px) {
  .products-hero h1 {
    font-size:32px
  }
}