body { font-family: system-ui; background:#f6f7f9; margin:0; }
.wrap { max-width:900px; margin:40px auto; padding:0 16px; }
.card { background:#fff; padding:16px; border-radius:12px; margin:16px 0; box-shadow:0 2px 10px rgba(0,0,0,.06); }

.row { display:flex; gap:10px; margin-top:10px; }
input { flex:1; padding:10px; border-radius:10px; border:1px solid #ddd; }
button { padding:10px 14px; border-radius:10px; border:0; background:#111; color:#fff; }

.products{ display:grid; gap:16px; margin-top:12px; }

.product{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#fff;
}

.product.has-img .product-img{
  flex:0 0 96px;
  width:96px;
}

.product.has-img .product-img img{
  width:96px;
  height:96px;
  object-fit:contain;
  border-radius:10px;
  background:#fafafa;
  border:1px solid #eee;
}

.product-body{
  flex:1 1 auto;
  min-width:0;
}

.product h3{ margin:0 0 6px; font-size:16px; }
.product p{ margin:0 0 10px; font-size:14px; color:#444; }

.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}

.btn-primary{
  background:#111;
  color:#fff;
}

.reco-list{ padding-left:18px; }
.reco-list li{ margin:8px 0; }
.reco-list a{ font-weight:700; text-decoration:none; }