/* ==============================
   VARIÁVEIS DE CORES – CATOLIGEEK
============================== */
:root {
  --laranja-principal: #F59E0B;
  --laranja-escuro: #F97316;
  --amarelo: #FCD34D;
  --preto: #111111;
  --branco: #FFFFFF;
  --cinza-claro: #F9FAFB;
}

/* ==============================
   CONFIGURAÇÕES GERAIS
============================== */
body {
  font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
  background: var(--branco);
  color: var(--preto);
}

a {
  color: var(--preto);
  transition: 0.3s;
}

a:hover {
  color: var(--laranja-principal);
  text-decoration: none;
}

/* ==============================
   CABEÇALHO
============================== */
.header {
  background: var(--branco);
  border-bottom: 2px solid var(--amarelo);
}

.header .logo img {
  max-height: 70px;
}

.menu {
  background: var(--branco);
}

.menu a {
  font-weight: 600;
  padding: 12px 16px;
}

.menu a:hover {
  color: var(--laranja-principal);
}

/* ==============================
   BARRA SUPERIOR
============================== */
.top-bar {
  background: var(--amarelo);
  color: var(--preto);
  font-weight: 600;
}

/* ==============================
   BOTÕES
============================== */
.btn,
.botao,
button,
.buy-button {
  background: var(--laranja-principal) !important;
  color: var(--branco) !important;
  border-radius: 14px;
  font-weight: 700;
  padding: 12px 18px;
  border: none;
  transition: 0.3s;
}

.btn:hover,
.botao:hover,
button:hover {
  background: var(--laranja-escuro) !important;
  transform: translateY(-2px);
}

/* Botão secundário */
.btn-secundario {
  background: transparent !important;
  color: var(--laranja-principal) !important;
  border: 2px solid var(--laranja-principal);
}

/* ==============================
   BANNERS
============================== */
.banner {
  border-radius: 20px;
  overflow: hidden;
}

.banner h2 {
  font-size: 2.2rem;
  font-weight: 800;
}

/* ==============================
   VITRINE / PRODUTOS
============================== */
.product,
.listagem-item {
  background: var(--branco);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: 0.3s;
}

.product:hover,
.listagem-item:hover {
  transform: translateY(-6px);
}

/* Nome do produto */
.nome-produto,
.product-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--preto);
}

/* Preço */
.preco,
.price {
  color: var(--laranja-escuro);
  font-size: 1.3rem;
  font-weight: 800;
}

/* ==============================
   SELOS E TAGS
============================== */
.tag,
.selo,
.label {
  background: var(--amarelo);
  color: var(--preto);
  border-radius: 10px;
  padding: 4px 10px;
  font-weight: 700;
}

/* ==============================
   CATEGORIAS
============================== */
.categorias-item {
  background: var(--cinza-claro);
  border-radius: 18px;
  padding: 20px;
  transition: 0.3s;
}

.categorias-item:hover {
  background: var(--amarelo);
}

/* ==============================
   PÁGINA DO PRODUTO
============================== */
.produto-detalhe {
  background: var(--branco);
}

.produto-detalhe h1 {
  font-size: 2rem;
  font-weight: 800;
}

.produto-detalhe .preco {
  font-size: 1.8rem;
}

/* ==============================
   CARRINHO
============================== */
.carrinho {
  background: var(--cinza-claro);
  border-radius: 20px;
  padding: 20px;
}

.carrinho-total {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--laranja-escuro);
}

/* ==============================
   FORMULÁRIOS
============================== */
input,
select,
textarea {
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 10px;
}

input:focus,
textarea:focus {
  border-color: var(--laranja-principal);
  outline: none;
}

/* ==============================
   FOOTER
============================== */
.footer {
  background: var(--preto);
  color: var(--branco);
  padding: 40px 20px;
}

.footer a {
  color: var(--amarelo);
}

.footer a:hover {
  color: var(--laranja-principal);
}

/* ==============================
   RESPONSIVO
============================== */
@media (max-width: 768px) {
  .menu {
    text-align: center;
  }

  .banner h2 {
    font-size: 1.6rem;
  }

  .product {
    margin-bottom: 20px;
  }
}