.info-item:nth-child(1) {
    gap: 8px;
}

.product-image-container .carousel-images {
    position: relative;
    /* Define o contexto para as imagens absolutas */
    width: 100%;
    /* Pode definir a altura exata do seu carrossel aqui se necessário */
    overflow: hidden;
}

.loja-description {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
}

.lojainfo-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 24px;
    align-items: flex-start;


}

.loja-showcase {
    display: flex;
    flex-direction: column;
    gap: 24px;

}

.product-description-loja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #ffffff;
    height: 350px;
    border-radius: 16px;
    width: 50%;
    gap: 16px;
    padding: 24px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
}

.map {
    height: 600px;
    margin-top: -24px;
    width: 100%;
}

.mapa-lojaDJI {
    height: 100%;
    flex-shrink: 0;
    align-self: stretch;
}

.product-showcase {
    margin-bottom: 0;
}

.button-content a {
    color: #333;
}

.card:hover .button-content a {
    color: #FFF;

}

.active-s {
    display: block;
    /* Torna a imagem visível no layout */
    opacity: 1;
    /* Faz a transição para 100% de opacidade (o efeito de "fade-in") */
}

.product-image {
        object-fit: cover;
        /* Garante que a imagem cobre o espaço sem distorcer */

        /* Oculta a imagem por defeito (o display: none do seu CSS original) */
        display: none;
        opacity: 0;

        /* A PROPRIEDADE CHAVE PARA A ANIMAÇÃO FADE */
        transition: opacity 0.7s ease-in-out;
        /* Ajuste '0.7s' para a velocidade que desejar */
}

.active-s {
    display: block;
    opacity: 1;
}

/*  **********************************************
*********** TABLET/MOBILE MEDIA QUERY   **********
**********************************************  */

@media (max-width: 1200px) {}

@media (max-width: 840px) {
    .product-description-loja {
        width: 100%;
    }

    .lojainfo-content {
        flex-direction: column;
    }

    .product-description-loja {
        height: fit-content;
    }
}

@media (max-width: 648px) {}