/* Fogão di Vó — versão estática */
:root{
  --bg:#FBF7F2;
  --brand:#7A3E2E;
  --accent:#A65A3B;
  --muted:#6B5E55;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#1f2937;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:Georgia,Times,serif;letter-spacing:-0.3px}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:20;background:white;border-bottom:1px solid rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;color:var(--brand);font-size:24px}
.brand small{color:#6b7280}
.logo{height:48px;width:48px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.hero{padding:32px 0 10px;text-align:center}
.hero h2{color:var(--brand);font-size:28px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 auto;max-width:640px}
.section{padding:24px 0 48px}
.section-title{color:var(--brand);font-size:26px;margin:28px 0 18px;font-weight:700}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:white;border-radius:18px;box-shadow:0 6px 16px rgba(0,0,0,.06);padding:12px;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{height:160px;width:100%;object-fit:cover;border-radius:12px}
.card h3{margin:10px 8px 0 8px;font-weight:700;color:#1f2937}
.card .price{color:var(--brand);font-weight:800;margin:6px 8px 8px}
.actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:600;display:inline-block;transition:opacity .15s ease}
.btn:hover{opacity:.92}
.btn-accent{background:var(--accent);color:white}
.btn-accent{background:#111827;color:white}
.btn-wa{background:#16a34a;color:white}
.footer{border-top:1px solid rgba(0,0,0,.06);padding:24px 0;text-align:center;color:#6b7280}
.badges{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.badge{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:6px 10px;color:#6b7280;font-size:12px}
nav a{color:#374151;margin-left:14px;font-weight:600}
nav a:hover{text-decoration:underline}


/* --- Carrossel horizontal simples --- */

.carousel-title {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: 20px;
  color: var(--brand);
  font-weight: 700;
}

/* contêiner do carrossel ocupando toda a largura da seção */
.carousel-strip {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start; /* alinhado à esquerda */
}

/* scrollbar fininho no desktop */
.carousel-strip::-webkit-scrollbar {
  height: 6px;
}
.carousel-strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

/* cada card do carrossel: largo o suficiente pra gerar scroll */
.card-carousel {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
}

.card-carousel img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
}

/* no mobile ainda continua largo o bastante pra ter rolagem */
@media (max-width: 768px) {
  .card-carousel {
    flex: 0 0 260px;
    max-width: 260px;
  }

  .card-carousel img {
    height: 170px;
  }
}