.products-hero .ph{
  min-height:320px;
  background:center/cover no-repeat;
  filter:brightness(.88);
  position:relative;
}
.products-hero .ph::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(46,125,74,.06) 0%,rgba(46,125,74,.03) 100%);
}

.grid-products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:20px;
}
@media (max-width:1024px){
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grid-products{grid-template-columns:1fr;gap:16px}
}

.prod-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .32s cubic-bezier(.2,.8,.2,1);
}
.prod-card:hover{
  transform:translateY(-8px);
  border-color:var(--brand);
  box-shadow:0 18px 48px rgba(46,125,74,.12);
}

.prod-thumb{
  aspect-ratio:4/3;
  background:#f8f9fc;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.prod-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(46,125,74,.03),transparent 60%);
  opacity:0;
  transition:opacity .3s;
}
.prod-card:hover .prod-thumb::after{
  opacity:1;
}

.prod-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.prod-card:hover .prod-thumb img{
  transform:scale(1.06);
}

.prod-body{
  padding:16px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
.prod-name{
  margin:0 0 6px;
  color:var(--ink);
  font-weight:800;
  font-size:1.05rem;
  line-height:1.3;
}
.prod-meta{
  margin:0 0 8px;
  color:var(--muted);
  font-size:.94rem;
  flex-grow:1;
}

.prod-card .btn{
  margin-top:auto;
}
.filters{
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 20px;
}
.filter-btn{
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:600;
  font-size:.94rem;
  transition:all .25s ease;
}
.filter-btn:hover{
  border-color:var(--orange);
  color:var(--orange);
}
.filter-btn.active{
  border-color:var(--orange);
  background:var(--orange);
  color:#fff;
  box-shadow:0 4px 14px rgba(255,107,53,.22);
}

.filter-btn.green.active{
  background:var(--brand);
  border-color:var(--brand-600);
}
.empty{
  padding:32px 20px;
  border:2px dashed var(--line);
  border-radius:16px;
  text-align:center;
  color:var(--muted);
  font-size:1.1rem;
  background:var(--brand-light);
}

.lb{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  backdrop-filter:blur(4px);
}
.lb.open{display:flex}
.lb img{
  max-width:94vw;
  max-height:88vh;
  display:block;
  border-radius:16px;
  box-shadow:0 28px 72px rgba(0,0,0,.45);
  border:4px solid var(--brand);
}
.lb .close{
  position:absolute;
  top:16px;right:16px;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:999px;
  width:48px;height:48px;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:1.4rem;
  box-shadow:0 8px 28px rgba(46,125,74,.28);
  transition:all .2s;
}
.lb .close:hover{
  background:#fff;
  color:var(--brand);
  transform:scale(1.1);
}