:root{ 
  --bg:#06060a; 
  --card:#0f1114; 
  --accent:#f6b30a; 
  --gold: #ffd700; 
  --gold-dark: #d4af37; 
  --purple:#7b2cff; 
  --orange:#ff9a0a; 
  --green:#2f9b4a; 
  --muted:#9aa0a6; 
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
} 

*{box-sizing:border-box; margin:0; padding:0;}
html, body {overflow-x: hidden; width: 100%;}

body{
  margin:0;
  background:linear-gradient(180deg,#06060a 0%, #0b0b0f 100%);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  min-height: 100vh;
}

/* HEADER */
.topbar{ 
  padding:15px 5%; 
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0)); 
  display:flex; 
  align-items:center; 
  gap:20px; 
  max-width:1400px; 
  margin:0 auto; 
  width: 100%;
} 

.logo{ 
  width:50px; 
  height:50px; 
  border-radius:999px; 
  overflow:hidden; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  flex-shrink: 0;
} 

.logo img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
} 

.search{ 
  flex:0 1 400px; 
  display:flex; 
  align-items:center; 
  background:rgba(255,255,255,0.02); 
  padding:12px 16px; 
  border-radius:999px; 
  gap:10px; 
  margin:0 30px; 
} 

.search input{ 
  flex:1; 
  background:transparent; 
  border:0; 
  outline:none; 
  color:#fff; 
  font-size:15px; 
  width: 100%;
} 

.cart{ 
  width:50px; 
  height:50px; 
  background:var(--accent); 
  border-radius:12px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:18px; 
  flex-shrink: 0;
} 

/* HERO */
.hero{ 
  padding:30px 5%; 
  max-width:1400px; 
  margin:0 auto; 
  width: 100%;
} 

.hero-title{ 
  display:flex; 
  align-items:center; 
  gap:15px; 
} 

.title{ 
  font-size:28px; 
  font-weight:700; 
  display:flex; 
  align-items:center; 
  gap:12px; 
} 

/* BANNER */
.banner{ 
  margin-top:20px; 
  border-radius:16px; 
  overflow:hidden; 
  max-width:100%; 
  width: 100%;
} 

.banner img{ 
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:16px; 
} 

@media (max-width: 768px){ 
  .banner{ 
    max-height:200px; 
  } 
  .banner img{ 
    max-height:200px; 
    object-fit:cover; 
  } 
} 

@media (min-width: 769px){ 
  .banner{ 
    max-width:1200px; 
    margin-left:auto; 
    margin-right:auto; 
  } 
  .banner img{ 
    height:auto; 
    object-fit:contain; 
  } 
} 

/* PILL */
.pill{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  padding:8px 20px; 
  border-radius:10px; 
  background:linear-gradient(to right, var(--gold-dark), var(--gold)); 
  color:#000; 
  font-weight:bold; 
  font-size:16px; 
  cursor:pointer; 
  text-align:center; 
  box-shadow:0 2px 8px rgba(255,215,0,0.3); 
  transition:transform 0.2s ease, box-shadow 0.2s ease; 
  margin:0 5% 30px 5%; 
  max-width:1400px; 
  width: calc(100% - 10%);
} 

.pill:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 4px 12px rgba(255,215,0,0.5); 
} 

/* FILTROS */
.filtros {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 5% 30px;
  flex-wrap: wrap;
  max-width: 1400px;
  width: calc(100% - 10%);
}

.filtro-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filtro-btn.active,
.filtro-btn:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

/* GRID SEMPRE COM 2 COLUNAS - EM TODOS OS DISPOSITIVOS */
.grid{ 
  display:grid; 
  grid-template-columns: repeat(2, 1fr); /* SEMPRE 2 COLUNAS */
  gap:15px; 
  padding:0 5% 120px; 
  max-width:1400px; 
  margin:0 auto; 
  width: 100%;
} 

/* CELULAR PEQUENO (até 480px) - 2 colunas com gap menor */
@media (max-width: 480px){ 
  .grid{ 
    grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS */
    gap:12px; 
    padding:0 12px 120px; 
  }
  
  .card {
    min-height: 260px;
  }
  
  .card-media {
    height: 100px;
  }
  
  .product-title {
    font-size: 12px;
    min-height: 50px;
    -webkit-line-clamp: 3; /* Mais linhas para títulos longos */
  }
  
  .current-price {
    font-size: 14px;
  }
  
  .old-price {
    font-size: 12px;
  }
  
  .buy-button {
    padding: 10px;
    font-size: 12px;
  }
} 

/* CELULAR NORMAL (481px - 768px) - 2 colunas */
@media (min-width: 481px) and (max-width: 768px){ 
  .grid{ 
    grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS */
    gap:15px; 
    padding:0 16px 120px; 
  }
  
  .card-media {
    height: 120px;
  }
  
  .product-title {
    font-size: 13px;
  }
} 

/* TABLET (769px - 1024px) - 2 colunas */
@media (min-width: 769px) and (max-width: 1024px){ 
  .grid{ 
    grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS */
    gap:18px; 
  }
  
  .card-media {
    height: 140px;
  }
} 

/* DESKTOP (1025px - 1399px) - 2 colunas */
@media (min-width: 1025px) and (max-width: 1399px){ 
  .grid{ 
    grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS */
    gap:20px; 
  }
  
  .card-media {
    height: 160px;
  }
} 

/* DESKTOP GRANDE (1400px+) - 2 colunas */
@media (min-width: 1400px){ 
  .grid{ 
    grid-template-columns: repeat(2, 1fr); /* MANTÉM 2 COLUNAS */
    gap:25px; 
    max-width: 1000px;
  }
  
  .card-media {
    height: 180px;
  }
} 

/* CARD COM EFEITO PREMIUM */
.card{ 
  display:flex; 
  flex-direction:column; 
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); 
  border-radius:14px; 
  overflow:hidden; 
  border:2px solid rgba(255,255,255,0.05); 
  transition:all 0.3s ease; 
  cursor:pointer; 
  width: 100%;
  min-height: 300px;
} 

.card:hover{ 
  border:2px solid var(--gold); 
  box-shadow:0 8px 25px rgba(255,215,0,0.3); 
  transform:translateY(-5px); 
} 

.card-media{ 
  height:140px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  overflow:hidden; 
  width: 100%;
} 

.card-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform 0.3s ease; 
} 

.card:hover .card-media img{ 
  transform:scale(1.05); 
} 

.card-body{ 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  justify-content:space-between; 
  padding:12px; 
  width: 100%;
} 

.product-title{ 
  font-weight:800; 
  font-size:14px; 
  margin:6px 0; 
  min-height:42px; 
  line-height:1.3; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
} 

.price-row{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin:10px 0; 
  width: 100%;
} 

.old-price{ 
  color:var(--muted); 
  text-decoration:line-through; 
  font-size:13px; 
} 

.current-price{ 
  font-weight:800; 
  font-size:16px; 
  color:#2f9b4a; 
} 

.discount{ 
  background:var(--gold); 
  color:#000; 
  padding:4px 8px; 
  border-radius:6px; 
  font-size:12px; 
  font-weight:bold; 
  text-align:center; 
} 

/* ELEMENTOS PREMIUM */
.delivery-badge{ 
  background:var(--gold); 
  color:#000; 
  font-weight:bold; 
  text-align:center; 
  padding:6px 10px; 
  font-size:11px; 
  border-radius:6px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:4px; 
  margin:10px; 
  width: fit-content;
} 

.buy-button{ 
  display:block; 
  width:100%; 
  padding:10px; 
  background:linear-gradient(to right, var(--gold-dark), var(--gold)); 
  border:none; 
  border-radius:8px; 
  color:#000; 
  font-weight:bold; 
  margin-top:auto; 
  cursor:pointer; 
  text-align:center; 
  box-shadow:0 2px 8px rgba(255,215,0,0.3); 
  transition:all 0.3s ease; 
  font-size:13px; 
  text-decoration: none;
} 

.buy-button:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 4px 12px rgba(255,215,0,0.5); 
} 

/* FOOTER */
.footer{ 
  background:#0d0d0d; 
  text-align:center; 
  padding:20px; 
  margin-top:50px; 
  font-size:14px; 
  color:#aaa; 
  border-top:1px solid #222; 
  max-width:1400px; 
  margin-left:auto; 
  margin-right:auto; 
  width: 100%;
} 

/* BOTÕES FLUTUANTES */
.float-wrap{ 
  position:fixed; 
  right:20px; 
  bottom:20px; 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  align-items:flex-end; 
  z-index: 1000;
} 

.chat{ 
  width:50px; 
  height:50px; 
  border-radius:999px; 
  background:var(--accent); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  box-shadow:0 6px 20px rgba(0,0,0,0.4); 
  font-size:18px; 
  transition:transform 0.3s ease; 
} 

.chat:hover{ 
  transform:scale(1.1); 
} 

/* INDICADOR DE CARREGAMENTO */
.carregando{ 
  text-align:center; 
  padding:30px; 
  color:var(--muted); 
  font-size:16px; 
  grid-column:1/-1; 
  width: 100%;
}

/* MENSAGEM SEM PRODUTOS */
.sem-produtos {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  grid-column: 1 / -1;
  padding: 40px;
  width: 100%;
}

/* AJUSTES ESPECÍFICOS PARA CELULAR COM 2 COLUNAS */
@media (max-width: 768px) {
  .topbar {
    padding: 12px 4%;
    gap: 12px;
  }
  
  .search {
    margin: 0 10px;
    padding: 10px 12px;
    flex: 0 1 280px;
  }
  
  .cart {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
  
  .filtros {
    margin: 15px 4% 25px;
    gap: 8px;
  }
  
  .filtro-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .pill {
    margin: 0 4% 25px;
    width: calc(100% - 8%);
    font-size: 14px;
    padding: 6px 16px;
  }
}

/* GARANTIR QUE SEMPRE TERÁ 2 COLUNAS */
.grid {
  grid-template-columns: repeat(2, 1fr) !important;
}