/* ============================================================
   1. VARIÁVEIS DE CORES - MUDE AQUI PARA MUDAR A LOJA TODA
   ============================================================ */
:root {
    --cor-principal: #184364;      /* Azul do topo e botões */
    --cor-fundo: #f4f7f6;          /* Cor de fundo da página */
    --cor-texto-escuro: #333333;   /* Cor dos títulos dos produtos */
    --cor-preco: #11342a;          /* Cor do valor R$ */
    --cor-sucesso: #25d366;        /* Verde do WhatsApp / Adicionado */
    --cor-oferta: #dc3545;         /* Vermelho do selo % */
    --cor-estrela: #ffc107;        /* Amarelo do selo TOP */
}

/* ============================================================
   2. GERAL E ESTRUTURA
   ============================================================ */
body { 
    background-color: var(--cor-fundo); 
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
}

.conteudo-principal { 
    margin-top: 20px; 
}

/* ============================================================
   3. MENU SUPERIOR (NAVBAR VITRINE)
   ============================================================ */
.frase-boas-vindas {
    color: #11342a;
    font-weight: 700;
}

.sacola-menu-icon {
    color: #09bb3e;
    font-size: 1.8rem;
    transition: 0.2s;
}

.sacola-menu-icon:hover {
    color: var(--cor-estrela);
}

/* Forçando o estilo do campo de busca */
input.busca-loja {
    border-radius: 8px !important; /* Deixa o campo quadradinho */
    padding-left: 40px !important; /* Espaço obrigatório para a lupa na esquerda */
    padding-right: 40px !important; /* Espaço para o X na direita */
    height: 38px !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important; /* Remove sombras internas se desejar */
}

/* ============================================================
   4. CARDS DE PRODUTOS
   ============================================================ */
.card-prod { 
    border: none; 
    border-radius: 12px; 
    transition: 0.3s; 
    height: 100%; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    background: #fff; 
    position: relative; 
}

.card-prod:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.img-container { 
    position: relative; 
    height: 160px; 
    overflow: hidden; 
    border-radius: 12px 12px 0 0; 
    background: #fff; 
}

.img-prod { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    padding: 10px; 
}

/* ============================================================
   5. SELOS E BADGES (PERFUMARIA)
   ============================================================ */
        .selo-promo, .selo-destaque, .selo-oferta {
            position: absolute;
            z-index: 10;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 5px;
            text-transform: uppercase;
            width: fit-content;
        }

        .selo-promo { 
            /* ... seu código atual ... */
            transform: rotate(45deg); /* Inclina 15 graus */
            box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Sombra para parecer que está flutuando */
        }

        /* PROMO e OFERTA ficam do lado esquerdo */
        .selo-promo {
            top: 60px;
            right: 8px;
            background: #28a745;
            color: #fff; }
        
        /* O contêiner que vai carregar a sombra */
        .wrapper-selo {
            position: absolute;
            top: 10px;
            left: 10px;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); /* Sombra aplicada aqui! */
            z-index: 10;
        }

        /* O selo em si, com o corte */
        .selo-oferta {
            background: var(--cor-oferta, #dc3545);
            color: #fff;
            padding: 10px 8px 15px 8px;
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 85%, 0% 100%);
            font-size: 0.75rem;
            font-weight: bold;
            text-align: center;
            display: block; /* Garante que preencha o wrapper */
        }    

        .selo-oferta {
            display: flex;
            flex-direction: row; 
            align-items: center;
            gap: 4px; /* Espaço entre ícone e texto */
            white-space: nowrap; /* Impede que o texto quebre linha */
            padding: 5px 10px 10px 10px; /* Ajuste o fundo do "V" */
        }

        /* DESTAQUE fica do lado direito */
        .selo-destaque {
            top: 5px;
            right: 5px;
            background: #ffc107;
            color: #000;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Sombra para parecer que está flutuando */
        }
            



/* ============================================================
    6. TEXTOS E BOTÕES DO PRODUTO (CORRIGIDO)
   ============================================================ */
.prod-title { 
    font-size: 1.0rem; 
    font-weight: 700; 
    color: var(--cor-texto-escuro); 
    height: 38px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    margin-bottom: 5px; 
}

.desc-comercial { 
    font-size: 0.8rem; 
    color: #777; 
    height: 32px; 
    overflow: hidden; 
    margin-bottom: 10px; 
}

.prod-price { 
    font-size: 1.1rem; 
    color: var(--cor-preco); 
    font-weight: 800; 
}

.btn-add { 
    border-radius: 8px; 
    font-weight: 700; 
    font-size: 0.75rem; 
    background-color: var(--cor-principal);
    border-color: var(--cor-principal) !important; /* Força a borda inicial */
    color: white;
    transition: 0.3s;
    outline: none !important;
    box-shadow: none !important; /* Tira a borda azul de foco do navegador */
}

/* Hover padrão: Amarelo conforme seu último desejo */
.btn-add:hover {
    background-color: #fad014 !important;
    border-color: #fad014 !important; /* Muda a borda para amarelo também, tirando o preto */
    color: #363636 !important;
}

/* REGRA DE OURO: Quando clicado (Verde), ignora o amarelo e o preto */
.btn-add.btn-success, 
.btn-add.btn-success:hover {
    background-color: var(--cor-sucesso) !important;
    border-color: var(--cor-sucesso) !important;
    color: white !important;
}

/* ============================================================
   7. AJUSTES PARA CELULAR (RESPONSIVIDADE)
   ============================================================ */
@media (max-width: 576px) {
    .frase-boas-vindas {
        font-size: 0.7rem !important;
        flex: 1.5 !important;
    }
    .img-container {
        height: 130px; /* Fotos um pouco menores no celular */
    }
    .prod-title {
        font-size: 0.75rem;
    }
    .prod-price {
        font-size: 0.95rem;
    }
}

/* Container da Busca */
.busca-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Lupa dentro do input (Esquerda) */
.lupa-busca {
    position: absolute;
    left: 12px;
    color: #999;
    z-index: 5;
    font-size: 0.9rem;
}

/* Input de Busca Ajustado */
.busca-loja {
    border-radius: 20px !important;
    padding-left: 35px !important; /* Espaço para a lupa */
    padding-right: 35px !important; /* Espaço para o X */
    border: none !important;
    height: 38px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Botão de Limpar (Direita) */
.btn-limpar-busca {
    position: absolute;
    right: 12px;
    color: var(--cor-oferta); /* Usa o vermelho que definimos no root */
    z-index: 5;
    text-decoration: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    transition: 0.2s;
}

.btn-limpar-busca:hover {
    color: #85141e;
    transform: scale(1.1);
}

.navbar-vitrine { 
    background-color: #ffffff !important; 
    
    /* --- CONTROLE DE ALTURA --- */
    /* Ajuste os 15px para aumentar ou diminuir a altura vertical */
    padding-top: 15px !important;
    padding-bottom: 15px !important;

    /* --- CONTROLE DE SOMBRA --- */
    /* 0 (horizontal) 4px (vertical) 10px (espalhamento) rgba (cor e transparência) */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
    
    /* Garante que a sombra fique por cima do conteúdo ao rolar */
    z-index: 1000; 
}

/* Paginação Padrão SOMI */
.paginacao-ekim {
    display: flex;
    justify-content: center;
}

.paginacao-ekim ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
}

.paginacao-ekim li a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #666;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: 0.2s;
}

.paginacao-ekim li.ativo a {
    background: var(--cor-principal) !important;
    color: #fff !important;
    border-color: var(--cor-principal) !important;
}

.paginacao-ekim li.disabled a {
    pointer-events: none;
    opacity: 0.5;
    background: #eee;
}

.paginacao-ekim li a:hover:not(.ativo) {
    background: #f8f9fa;
    color: var(--cor-principal);
}

.desc-comercial {
    font-size: 0.85rem;
    color: #666;
    height: 42px; /* Altura exata para 3 linhas de texto */
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Número de linhas visíveis */
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.btn-success.btn-add {
    animation: pulse-verde 0.5s ease-in-out;
}

@keyframes pulse-verde {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Tamanho padrão para computadores */
.logo-vitrine {
    height: 40px;
    width: auto; /* Mantém a proporção do logo */
    transition: height 0.3s ease; /* Deixa a mudança suave */
}

/* Ajuste específico para Celulares (telas menores que 768px) */
@media (max-width: 767px) {
    .logo-vitrine {
        height: 28px; /* Diminui o logo para sobrar espaço para o texto */
    }
    
    /* Aproveitando, vamos garantir que o "Nossa Loja" tenha um tamanho bom */
    .frase-boas-vindas {
        font-size: 0.85rem; 
        white-space: nowrap; /* Impede que o texto quebre linha */
    }
}

@media (max-width: 767px) {
    /* Aumenta o texto curto no celular */
    .frase-mobile {
        font-size: 1.2rem; /* Aumente este valor se quiser ainda maior */
        display: block;    /* Faz o texto ocupar a linha dele */
        color: #184364;       /* Cor de sua preferência */
    }

    /* Opcional: Se quiser dar um destaque a mais, pode mudar a cor ou peso */
    .frase-boas-vindas {
        margin-top: 2px;
        letter-spacing: -0.5px; /* Deixa as letras mais juntas se o espaço acabar */
    }
}