@media (max-width: 767px) {

    /* Mobile */


    .produto {
        /* Flexbox handles height now */
        height: 100% !important;
        /* Force fill container */
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
    }

    .produto .titulo {
        /* Allow title to expand */
        min-height: auto;
        margin-bottom: 0.5rem;
    }

    .imagem {
        width: 100%;
        height: 12em;
        /* Fixed height for image container */
        overflow: hidden;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    /* Adjust font sizes */
    .produto h3 {
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.1rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 4.4rem;
        /* 4 lines * 1.1 line-height */
    }

    .informacoes {
        padding: 1rem 0;
        /* Reduce side padding on mobile */
    }

    footer {
        /* Allow footer to grow */
        height: auto;
        padding: 2rem 0;
        position: relative;
        /* Not absolute on mobile to avoid overlap */
    }

    main {
        padding-bottom: 2rem;
        /* Reduce padding since footer is relative */
    }
}

@media (min-width: 768px) {

    /* Desktop */


    .login {
        border-radius: 5px;
    }

    .produto {
        height: 100%;
        overflow: hidden;
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }

    .produto h3 {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 2.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 8.8rem;
        /* 4 lines * 2.2 line-height */
    }

    .produto .titulo {
        /* min-height: 28%; REMOVED to avoid gaps */
        flex-grow: 1;
        /* Pushes content down */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Align title to top */
    }

    .imagem {
        width: 100%;
        height: 11rem;
        /* Fixed height for consistency */
        overflow: hidden;
        flex-shrink: 0;
        /* Prevent image from shrinking */
    }

    .imagem_principal {
        border-radius: 3px;
    }

    .loja {
        border-radius: 5px;
    }

    footer {
        /* Allow footer to grow dynamically */
        height: auto;
        min-height: 8em;
    }

    main {
        padding-bottom: 2rem;
    }
}



/* Ensure footer sticks to bottom only if content is short, 
   otherwise rely on flexbox structure or relative positioning */
footer {
    background-color: #4a207a;
    /* Fallback */
    background-image: linear-gradient(to right, #1a1563, #4a207a);
    width: 100%;
    margin-top: auto;
    color: white;
    /* Ensure text is readable */
}

/* Override text-muted inside footer for visibility */
footer .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

main {
    flex: 1;
    /* Pushes footer down */
    width: 100%;
}

.miniatura {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produto:hover,
.produto_carrinho:hover,
.loja:hover {
    transition: 0.1s;
    box-shadow: 0px 2px 5px gray !important;
}

a:hover {
    text-decoration: none;
    color: none;
}

.remover {
    z-index: 1020;
    left: 5px;
    top: 1.2em;
}

.acoes {
    background-color: white;
    padding: 3px;
    border-radius: 100px;
}

.acoes_carrinho {
    position: absolute;
    z-index: 1;
    background-color: white;
    padding: 3px;
    border-radius: 100px;
    margin: -10px 0 0 -30px;
}

.acoes:hover {
    transition: 0.1s;
    width: 3em;
}

.acoes_carrinho:hover {
    transition: 0.1s;
    width: 3em;
    margin: -5px 0 0 -35px;
}

.logo_loja {
    border-radius: 100px;
    width: 5em;
    height: 5em;
}

.faixa {
    background-image: linear-gradient(to right, #1a1563, #4a207a);
}

.paragrafo {
    line-height: 1.6em;
}

.legenda {
    color: #250f55;
}

.legenda_favorito {
    font-weight: 400;
}

.texto_azul {
    color: #37a5d4;
}

.botao_azul {
    background-color: #37a5d4;
    /* Rosa #9830ab*/
    color: #fff;
}