/* ==========================================
   COMPONENTES (Cabeçalho, Menu e Rodapé)
   ========================================== */
.header-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 5%; background-color: var(--bg-branco); border-bottom: 1px solid var(--borda); box-shadow: 0 4px 12px rgba(10, 37, 64, 0.03); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto-preto); transition: transform 0.3s ease-in-out; }
.logo:hover { transform: scale(1.02); }
.logo img { height: 65px; width: auto; object-fit: contain; }
.logo-texto-centralizado { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.logo-titulo { font-size: 26px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--texto-preto); }
.logo-sub { font-size: 11px; font-weight: 500; letter-spacing: 2.5px; color: var(--cor-destaque); text-transform: uppercase; margin-top: 4px; }

.search-bar { flex: 1; max-width: 600px; display: flex; margin: 0 40px; position: relative; }
.search-bar input { width: 100%; padding: 15px 20px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px; outline: none;}
.search-bar input:focus { border-color: var(--cor-destaque); }

.header-actions { display: flex; align-items: center; gap: 25px; }
.action-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #555; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; padding: 5px; }
.action-item:hover { color: var(--cor-destaque); transform: translateY(-4px); }
.action-item .icon { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; position: relative; }
.action-item svg { width: 100%; height: 100%; fill: currentColor; }

.cart-badge { position: absolute; top: -8px; right: -10px; background-color: var(--cor-destaque); color: white; font-size: 9px; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid white; animation: cartPop 0.4s ease-out; transition: background-color 0.3s; }
.action-item:hover .cart-badge { background-color: var(--cor-perigo); }

@keyframes cartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

@media (max-width: 1024px) {
    .header-top { flex-direction: column; padding: 15px; gap: 15px; }
    .search-bar { width: 100%; margin: 15px 0; order: 3; }
    .logo-texto-centralizado { display: none; }
    .header-actions { width: 100%; justify-content: space-around; gap: 10px; order: 2; }
}

/* --- MENU DE DEPARTAMENTOS --- */
.nav-menu-container { background-color: var(--cor-destaque); color: white; padding: 10px 5%; display: flex; align-items: center; gap: 30px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.btn-departamentos { background: rgba(255,255,255,0.1); padding: 12px 20px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.btn-departamentos:hover { background: rgba(255,255,255,0.2); }
.nav-menu-links { display: flex; gap: 20px; }
.nav-menu-links a:hover { color: #f0f0f0; }

/* --- BARRA DE CONFIANÇA (RODAPÉ) --- */
.trust-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; padding: 30px 5%; background-color: var(--bg-cinza-claro); margin-top: 40px; font-size: 11px; font-weight: 600; color: #555; }
.trust-item { display: flex; align-items: center; gap: 10px; text-transform: uppercase; }

/* --- AUTOCOMPLETE DA BUSCA --- */
.busca-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid var(--borda); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); max-height: 400px; overflow-y: auto; z-index: 1000; }
.busca-item { display: flex; align-items: center; gap: 15px; padding: 10px 15px; border-bottom: 1px solid var(--bg-cinza-claro); cursor: pointer; transition: background 0.2s; text-align: left; }
.busca-item:hover { background: var(--bg-cinza-claro); }
.busca-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.busca-item-info { display: flex; flex-direction: column; }
.busca-item-nome { font-size: 12px; font-weight: 600; color: var(--texto-preto); line-height: 1.2;}
.busca-item-preco { font-size: 13px; font-weight: 800; color: var(--cor-destaque); margin-top: 3px;}