/* Base */
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: Arial, sans-serif;
}

/* Header */
header {
  background-color: #4a6b7c; color:#fff;
  padding: 15px 40px; display:flex; align-items:center; justify-content:space-between; height:50px;
}
#img_logo { width:150px; }
.main-nav { display:flex; gap:30px; align-items:center; position:relative; }
.nav-link { color:#fff; text-decoration:none; font-weight:bold; font-size:14px; }
.nav-link:hover { color:#f4662c; }
.search-bar input { padding:5px 10px; border:none; border-radius:4px; }

/* Dropdown simples (sem JS) */
.dropdown { position:relative; }
.dropdown__toggle { cursor:pointer; }
.dropdown__panel {
  position:absolute; top:calc(100% + 10px); left:-6px; width:260px;
  background:#fff; color:#111; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.18);
  padding:10px; z-index:1000; opacity:0; transform:translateY(6px);
  pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.dropdown:hover .dropdown__panel,
.dropdown:focus-within .dropdown__panel {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.dropdown__panel::before {
  content:""; position:absolute; top:-8px; left:20px; width:16px; height:16px;
  background:#fff; transform:rotate(45deg); box-shadow:-3px -3px 6px rgba(0,0,0,.04);
}
.panel-link {
  display:block; background:#f7f9fb; border:1px solid #e3e8ee; border-radius:10px;
  padding:12px 14px; margin:8px 4px; text-decoration:none; color:#111;
  font-weight:700; text-transform:uppercase; letter-spacing:.2px;
  transition:background .15s, border-color .15s, transform .05s;
}
.panel-link:hover { background:#eef3f7; border-color:#d7dde1; transform:translateY(-1px); }
.dropdown:hover > .dropdown__toggle,
.dropdown:focus-within > .dropdown__toggle { color:#f4662c; }

/* Conteúdo */
.wrap { max-width:1200px; margin:40px auto 60px; padding:0 24px; width:100%; }
.titulo { font-size:24px; font-weight:700; margin:0 0 16px; }

/* Grade de produtos */
.produtos-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:28px;
}


/* Card */
.produto-card {
  display:grid; gap:10px; text-decoration:none; color:inherit;
  background:#e9ecef; border-radius:12px; padding:16px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.produto-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  background:#e3e7ea;
}
.produto-card figure { margin:0; display:grid; gap:10px; }
.produto-card img {
  width:100%; height:220px; object-fit:contain; display:block;
}
.nome { font-weight:700; font-size:16px; text-align:center; color:#111; }
.preco { font-size:14px; color:#444; text-align:center; }

/* Footer */
.footer {
  background:#e5e8ea; color:#000; text-transform:uppercase; font-weight:bold; font-size:12px;
  padding:20px 50px; line-height:1.5; width:94%; margin:0;
}

/* Responsivo */
@media (max-width:560px){
  .produto-card img { height:200px; }
}