.search{
  width:100%;
  padding:.8rem;
  margin:1.5rem 0;
  border:1px solid #ccc;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}

.product-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  transition:.2s;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

.product-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.product-info{
  padding:1rem;
}

.badge{
  background:#FF6B35;
  color:#fff;
  font-size:.75rem;
  padding:.2rem .5rem;
  border-radius:3px;
}

/* MODAL */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:2000;


}
.modalImage {
            width: 100%;
			text-align:center;
        }

#modalImage {
            max-width: 100%;
			max-height: 50vh;
			
            height: auto;
        }
.modal-content{
  background:#fff;
  width:90%;
  max-width:600px;
  margin:5% auto;
  padding:2rem;
  position:relative;
  border-radius:12px;
}

#closeModal{
  position:absolute;
  top:10px;
  right:15px;
  font-size:1.5rem;
  cursor:pointer;
}