/* 
  Tema Chocolândia - Design E-commerce Profissional
  Inspirado na imagem correto.png
*/

/* --- Cores de Variáveis (Sincronizadas com o loader) --- */
:root {
  --background-page: #0c1014;
  --header-bg: #394d60;
  --card-bg: #121920;
  --primary-button: #363c44;
  --text-dark: #ffae8d;
}

/* --- Ajuste Global da Página --- */
body {
  background-color: var(--background-page) !important;
  color: var(--text-dark) !important;
}

/* --- Estilização do Header (Chocolândia) --- */
header {
  background-color: var(--header-bg) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
  color: #ffffff !important;
}

header .text-muted-foreground {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-foreground {
  color: rgba(255, 255, 255, 0.8) !important;
}

.header-logo-link span {
  display: none !important;
}

/* --- Cards de Produto (Fiel à Imagem) --- */
.product-card-container {
  background-color: var(--card-bg) !important;

  border: 1px solid rgba(61, 43, 36, 0.3) !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.product-card-container:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--text-dark) !important;
}

.product-card-container h3 {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

.product-card-container span {
  color: rgb(255, 255, 255) !important;
  font-weight: 600 !important;
}

/* Botão Adicionar ao Carrinho (Chocolate) */
.product-card-container button {
  background-color: var(--primary-button) !important;
  opacity: 0.9 !important;
  color: #e2e0e1 !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  transition: opacity 0.2s ease !important;
}

.product-card-container button:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Barra de Busca (Arredondada como na imagem) */
header input {
  border-radius: 20px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  color: var(--text-dark) !important;
}