/* =========================================
   ESTILOS DO BANNER SLIM (TOPO)
   ========================================= */

/* Container Principal */
.macoleco-vitrine-slim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 25px; /* Espaço para separar o banner do texto do evento */
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Imagem do Produto */
.macoleco-slim-img img {
    max-width: 60px;
    height: auto;
    object-fit: contain;
}

/* Área de Texto (ocupa o meio) */
.macoleco-slim-txt {
    flex: 1;
}

.macoleco-slim-txt h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #111;
    line-height: 1.2;
}

.macoleco-slim-txt p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* Área do Botão e Preço (Alinhado à direita) */
.macoleco-slim-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.macoleco-slim-btn span {
    font-size: 12px;
    color: #333;
    font-weight: 600;
}

.macoleco-slim-btn a {
    background-color: #ff9900;
    color: #fff;
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.macoleco-slim-btn a:hover {
    background-color: #e68a00;
}
/* =========================================
   RESPONSIVIDADE (CELULAR) - GRID ULTRA COMPACTO
   ========================================= */
   @media (max-width: 600px) {
    .macoleco-vitrine-slim {
        display: grid;
        grid-template-columns: 85px 1fr; /* Coluna da imagem (85px) e o restante para o Título */
        grid-template-areas: 
            "img title"   /* Linha 1: Imagem na esquerda, Título na direita */
            "btn btn";    /* Linha 2: Botão ocupando tudo embaixo */
        gap: 15px;
        align-items: center;
        padding: 15px;
    }

    .macoleco-slim-txt {
        display: contents !important; 
    }

    /* 1. Título (Agora ao lado da imagem) */
    .macoleco-slim-txt h4 {
        grid-area: title;
        margin: 0;
        font-size: 15px; /* Tamanho levemente ajustado para encaixar bem ao lado */
        line-height: 1.3;
    }

    /* 2. Imagem (Na esquerda) */
    .macoleco-slim-img {
        grid-area: img;
        margin: 0;
    }
    
    .macoleco-slim-img img {
        width: 100%;
        height: auto;
    }

    /* 3. Oculta a descrição no celular para economizar espaço */
    .macoleco-slim-txt p {
        display: none;
    }

    /* 4. Botão e Preço (Embaixo, esticado) */
    .macoleco-slim-btn {
        grid-area: btn;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }
    
    .macoleco-slim-btn span {
        display: block;
        margin-bottom: 6px;
    }

    .macoleco-slim-btn a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        background-color: #ff9900 !important;
        color: #ffffff !important;
    }
}