/* Importa a família de fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* Variáveis de Cor */
:root {
    --primary-red: #d9272d;
    --text-dark: #333333;
    --text-light: #767676;
    --background-light: #f7f7f7;
    --green-status: #2ecc71; /* Verde mais vivo para o status */
    --border-color: #eeeeee;
}

/* Estilos Gerais */
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: var(--background-light);
    color: var(--text-dark);
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- CABEÇALHO ATUALIZADO --- */
.store-header {
    margin-bottom: 20px; /* Reduzimos a margem inferior */
}

.header-banner {
    width: 100%;
    height: 160px;
    background-color: #333;
}

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

.header-details {
    position: relative;
    top: -60px;
}

.store-presentation {
    display: flex;
    flex-direction: column; /* Organiza logo e info em coluna */
    align-items: center;  /* Centraliza tudo */
    text-align: center;
}

.store-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    background-color: white;
    margin-bottom: 10px; /* Espaço abaixo do logo */
}

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

.store-info h1 {
    margin: 0 0 8px 0;
    font-size: 2.2em;
    font-weight: 800;
}

.store-meta {
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 15px;
}
.store-meta .separator {
    margin: 0 10px;
}

.store-badge-wrapper {
    display: flex;
    justify-content: center;
}

.status-badge {
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.9em;
}
.status-badge.open {
    background-color: var(--green-status);
    color: white;
    /* Aplica a nossa nova animação */
    animation: pulse 2s infinite ease-in-out;
}

/* --- ANIMAÇÃO DE PULSAR (PISCANDO SUAVEMENTE) --- */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}
/* --- FIM DO CABEÇALHO ATUALIZADO --- */


/* Títulos das Categorias e Cards de Produtos (sem alterações) */
main { padding-top: 30px; } /* Adiciona espaço para o cabeçalho não ficar colado */
.category-title { font-size: 1.8em; font-weight: 800; color: var(--text-dark); margin-top: 40px; margin-bottom: 25px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.product-card { background-color: white; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; display: flex; transition: box-shadow 0.2s ease-in-out; cursor: pointer; }
.product-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.product-card .product-image { width: 120px; height: 120px; flex-shrink: 0; }
.product-card .product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card .product-info { padding: 15px; }
.product-card .product-info h3 { margin: 0 0 5px 0; font-size: 1.1em; font-weight: 700; }
.product-card .product-info .description { font-size: 0.9em; color: var(--text-light); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.product-card .price { font-size: 1.2em; font-weight: 800; color: var(--text-dark); margin-top: 10px; }

/* Modal de Detalhes (sem alterações) */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; }
.modal-content { background-color: #fefefe; border-radius: 8px; width: 90%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; }
.close-btn { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 35px; font-weight: bold; cursor: pointer; }
.close-btn:hover { color: black; }
#modal-body { overflow-y: auto; }
.modal-image { width: 100%; height: 300px; object-fit: cover; }
.modal-info { padding: 30px; }
.modal-info h2 { font-size: 2em; margin: 0 0 15px 0; font-weight: 800; }
.modal-info .description { font-size: 1em; line-height: 1.7; color: var(--text-light); margin-bottom: 30px; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background-color: #f9f9f9; border-top: 1px solid var(--border-color); }
.modal-price { font-size: 1.8em; font-weight: 800; color: var(--text-dark); }
.modal-add-btn { background-color: var(--primary-red); color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: opacity 0.3s; }
.modal-add-btn:hover { opacity: 0.9; }

/* Rodapé */
.footer { text-align: center; padding: 30px 20px; margin-top: 60px; background-color: #e9ecef; color: #6c757d; }