/* ================= VARIÁVEIS DE COR DA MARCA ================= */
:root {
    /* Azul Marinho (Baseado no logo) */
    --protri-blue: #003366; 
    /* Verde Vibrante (Para destaque e botões de compra) */
    --protri-green: #28a745; 
    /* Amarelo/Dourado (Para acentos e ícones) */
    --protri-yellow: #FFC107; 
}

/* ================= GERAL ================= */
body {
    /* Garante que o footer fique no final mesmo em páginas curtas */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa; /* Fundo cinza bem claro */
    font-family: sans-serif; /* Pode substituir por uma fonte do Google Fonts depois */
}

/* ================= NAVBAR / HEADER ================= */
.navbar {
    /* Reduz um pouco a altura do navbar no mobile */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    /* Ajuste fino para o logo */
    line-height: 1;
}

/* Ajustes do Menu Dropdown para ficar mais bonito */
.dropdown-menu {
    border-radius: 0.5rem;
    overflow: hidden; /* Para os cantos arredondados funcionarem bem */
}
.dropdown-item {
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
}
.dropdown-item:hover {
    background-color: #f0f2f5;
    color: var(--protri-blue);
}


/* ================= HERO BANNER (FLUXO) ================= */
.hero-banner {
    background-color: var(--protri-blue) !important;
    /* Uma leve textura ou gradiente pode ser adicionado aqui se quiser */
}

/* Ajuste para as setas entre os passos no desktop */
@media (min-width: 768px) {
    .step-item:not(:last-child) {
        /* Adiciona um espaço para a seta não ficar colada */
        padding-right: 20px;
    }
}


/* ================= BOTÕES DE CATEGORIA ================= */
.cat-btn {
    transition: all 0.2s ease-in-out;
}

.cat-btn:hover {
    transform: translateY(-3px); /* Efeito sutil de "levantar" ao passar o mouse */
    border-color: var(--protri-blue) !important;
    background-color: #f8faff !important;
}


/* ================= CARDS DE PRODUTO ================= */
.product-card {
    transition: all 0.3s ease;
}
.product-card:hover {
    /* Sombra mais forte ao passar o mouse no desktop */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

.product-card img {
    /* Garante que as imagens fiquem do mesmo tamanho sem esticar */
    height: 200px; /* Altura fixa no mobile */
    object-fit: cover;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}
@media (min-width: 768px) {
    .product-card img {
        height: 250px; /* Um pouco mais alto no desktop */
    }
}

/* Sobrescrevendo as cores do Bootstrap com as da marca */
.text-primary { color: var(--protri-blue) !important; }
.bg-primary { background-color: var(--protri-blue) !important; }
.text-success { color: var(--protri-green) !important; }
.btn-success { 
    background-color: var(--protri-green);
    border-color: var(--protri-green);
}
.btn-success:hover {
    background-color: #218838; /* Um verde um pouco mais escuro para o hover */
    border-color: #1e7e34;
}
.text-warning { color: var(--protri-yellow) !important; }