body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
.hero-cover {
    background-image: url('https://placehold.co/1200x400/f59e0b/FFFFFF?text=Z%C3%A9+Express&font=poppins');
    background-size: cover;
    background-position: center;
}
/* Scrollbar customizada */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #fbbf24; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #f59e0b; }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Estilos do Carrinho */
#cart-content.collapsed #cart-expanded {
    display: none;
}
#cart-content:not(.collapsed) #cart-collapsed {
    display: none;
}
/* Estilo para o link de categoria */
.category-link {
    color: white;
}
.category-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* Estilo para a categoria da grade ativa */
.category-grid-item.active p {
    color: #f59e0b;
    font-weight: 700;
}
.category-grid-item.active div {
    border-color: #f59e0b;
    transform: scale(1.05);
}
/* Animação para destacar produto */
@keyframes highlight {
    0% { background-color: #fef3c7; } /* amber-100 */
    100% { background-color: transparent; }
}
.highlight-product {
    animation: highlight 2s ease-out;
}

/* =================================================================== */
/* CÓDIGO ATUALIZADO PARA A BARRA DE PESQUISA FIXA (29/08/2025) */
/* =================================================================== */
#search-container.fixed-search {
    position: fixed;
    /* Alterado para 0 para colar no topo da tela */
    top: 0; 
    left: 0;
    right: 0;
    /* Aumentado para ficar na frente de tudo */
    z-index: 30; 
    
    /* Alterado para a cor primária do site */
    background-color: #f59e0b; 
    
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

/* Melhoria de contraste para o campo de busca quando fixo */
#search-container.fixed-search input {
    background-color: white;
    border-color: #fbbf24; /* Tom de âmbar mais claro */
}

/* Classe para adicionar o espaçamento no 'main' e evitar o "pulo" do conteúdo */
main.search-is-fixed {
    /* A altura exata será definida via JavaScript para ser precisa */
    padding-top: 80px; 
}

/* =================================================================== */
/* NOVOS ESTILOS MODERNOS (EYE CANDY) */
/* =================================================================== */

/* Cards de Produtos Modernos */
.product-card-modern {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(229, 231, 235, 0.5);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(245, 158, 11, 0.3);
}

.product-image-container {
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    border-radius: 16px 16px 0 0;
}

.product-image-container img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 160px;
    object-fit: contain;
}

.product-card-modern:hover .product-image-container img {
    transform: scale(1.08);
}

/* Badge de Preço Flutuante */
.price-tag-modern {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
    display: inline-block;
}

/* Botão de Adicionar Moderno */
.btn-add-modern {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    border-radius: 12px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-add-modern:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.02);
}

.btn-add-modern:active {
    transform: scale(0.98);
}

/* Animação de Confete ao adicionar */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.btn-clicked {
    animation: pop 0.3s ease-out;
}

/* Navegação de Categorias Moderna */
.category-nav-modern {
    background: rgba(245, 158, 11, 0.95); /* Amber com transparência */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white; /* Texto branco inativo */
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    opacity: 0.9;
}

.category-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.category-pill.active {
    background: white;
    color: #d97706; /* Amber escuro texto */
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
    opacity: 1;
}