/* =========================================================
   LOVE OR DIE — CSS PRINCIPAL
   Loja Integrada / Tema Galeria
   VERSÃO ATUALIZADA
   ========================================================= */


/* =========================================================
   1. MENU SUPERIOR
   ========================================================= */

.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a .titulo,
.menu.superior .nivel-um > li .titulo {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

.menu.superior .nivel-um > li > a:hover,
.menu.superior .nivel-um > li > a:hover .titulo {
    color: #B83268 !important;
}


/* =========================================================
   2. CABEÇALHO
   ========================================================= */

#cabecalho .conteiner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#cabecalho .logo img {
    max-height: 65px !important;
    width: auto !important;
}


/* =========================================================
   3. BARRA PIX
   ========================================================= */

#cabecalho .barra-frase {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #6843A3 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

#cabecalho .barra-frase > .conteiner {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    line-height: 30px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}

#cabecalho .barra-frase > .conteiner > i {
    height: 30px !important;
    line-height: 30px !important;

    margin: 0 7px 0 0 !important;
    padding: 0 !important;

    vertical-align: middle !important;

    background: transparent !important;
}

#cabecalho .barra-frase > .conteiner > span {
    display: inline-block !important;

    height: 30px !important;
    min-height: 0 !important;
    max-height: 30px !important;

    line-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;
    background: transparent !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    vertical-align: middle !important;

    box-sizing: border-box !important;
}

#cabecalho .barra-frase img {
    max-width: 20px !important;
    max-height: 20px !important;

    width: auto !important;
    height: auto !important;

    vertical-align: middle !important;
}


/* =========================================================
   4. BUSCA
   ========================================================= */

.busca {
    max-width: 600px !important;
}

.busca input {
    height: 34px !important;
    min-height: 34px !important;

    box-sizing: border-box !important;
}

.busca .botao {
    height: 34px !important;
    min-height: 34px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   5. VITRINE / PRODUTOS
   ========================================================= */

.listagem .imagem-produto {
    height: 300px !important;
    min-height: 300px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.listagem .imagem-produto img {
    max-width: 225px !important;
    max-height: 280px !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
}

.listagem .nome-produto {
    color: #333333 !important;
}


/* =========================================================
   6. VÍDEO — LOVE OR DIE
   ========================================================= */

.video-tema {
    display: block !important;
    visibility: visible !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin-top: 25px !important;
    margin-bottom: 35px !important;

    padding: 0 !important;

    text-align: center !important;
}


/* =========================================================
   7. VÍDEO — DESKTOP
   ========================================================= */

@media screen and (min-width: 768px) {

    .video-tema > .conteiner {
        display: block !important;

        width: 500px !important;
        max-width: 500px !important;
        min-width: 0 !important;

        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        float: none !important;

        box-sizing: border-box !important;
    }

    .video-tema > img {
        display: block !important;

        width: 500px !important;
        max-width: 500px !important;
        min-width: 0 !important;

        height: 281px !important;
        max-height: 281px !important;
        min-height: 0 !important;

        object-fit: cover !important;

        margin: 0 auto !important;
        padding: 0 !important;

        float: none !important;

        cursor: pointer !important;

        box-sizing: border-box !important;
    }

    .video-tema > iframe,
    .video-tema iframe,
    .secao-secundaria .video-tema iframe {
        display: block !important;

        width: 500px !important;
        max-width: 500px !important;
        min-width: 0 !important;

        height: 281px !important;
        max-height: 281px !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        float: none !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   8. RODAPÉ — BRANCO + ROXO
   ========================================================= */

#rodape,
#rodape .institucional,
#rodape .institucional .conteiner {
    background: #FFFFFF !important;
}

#rodape .institucional,
#rodape .institucional * {
    color: #6843A3;
}

#rodape .titulo,
#rodape .institucional .titulo,
#rodape .institucional h4 {
    color: #6843A3 !important;
}

#rodape a {
    color: #6843A3 !important;
}

#rodape a:hover {
    color: #371E56 !important;
}


/* Títulos das colunas */

#rodape .institucional .titulo {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;

    border-color: #DDDDDD !important;
}


/* Textos e links */

#rodape .institucional a,
#rodape .institucional p,
#rodape .institucional li,
#rodape .institucional span {
    font-size: 12px !important;
    line-height: 18px !important;
}

#rodape .institucional a {
    font-weight: 500 !important;
}


/* =========================================================
   9. PAGAMENTOS — CARTÕES NA MESMA LINHA
   ========================================================= */

#rodape .pagamento .bandeiras-pagamento {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    gap: 6px !important;
}

#rodape .pagamento .bandeiras-pagamento li {
    margin: 0 !important;
    padding: 0 !important;

    flex-shrink: 0 !important;
}

#rodape .pagamento .bandeiras-pagamento img {
    max-width: 43px !important;

    width: auto !important;
    height: auto !important;
}


/* =========================================================
   10. INSTAGRAM
   ========================================================= */

#rodape .redes-sociais a[href*="instagram"] {
    display: inline-flex !important;
    align-items: center !important;

    text-decoration: none !important;
}

#rodape .redes-sociais a[href*="instagram"]::after {
    content: "Instagram";

    display: inline-block !important;

    margin-left: 8px !important;

    color: #6843A3 !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    vertical-align: middle !important;
}


/* =========================================================
   11. SPOTIFY — RÁDIO LOVE OR DIE
   ========================================================= */

#rodape .love-spotify {
    display: flex !important;
    align-items: center !important;

    width: fit-content !important;

    gap: 8px !important;

    margin-top: 8px !important;

    color: #6843A3 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;

    text-decoration: none !important;
}

#rodape .love-spotify:hover,
#rodape .love-spotify:hover .love-spotify-texto,
#rodape .love-spotify:hover .love-spotify-icone,
#rodape .love-spotify:hover .love-spotify-icone i {
    color: #371E56 !important;
}


/* Ícone Spotify */

#rodape .love-spotify-icone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    color: #6843A3 !important;

    font-size: 19px !important;
    line-height: 20px !important;
}

#rodape .love-spotify-icone i,
#rodape .love-spotify-icone .fa,
#rodape .love-spotify-icone .fa-spotify {
    color: #6843A3 !important;

    font-size: 19px !important;
    line-height: 20px !important;
}


/* Texto Rádio Love or Die */

#rodape .love-spotify-texto {
    color: #6843A3 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* =========================================================
   12. OCULTAR CPF VISUALMENTE
   ========================================================= */

#rodape .conteiner .row-fluid .span9.span12 p {
    display: none !important;
}


/* =========================================================
   13. PÁGINAS INTERNAS — CONTRASTE
   ========================================================= */

/* Categoria */

.pagina-categoria .titulo-categoria,
.pagina-categoria .titulo-categoria strong,
.pagina-categoria h1 {
    color: #444444 !important;
}

.pagina-categoria .menu.lateral .titulo,
.pagina-categoria .menu.lateral a,
.pagina-categoria .menu.lateral span {
    color: #555555 !important;
}

.pagina-categoria .menu.lateral .nivel-um > li.ativo > a,
.pagina-categoria .menu.lateral .nivel-um > li.ativo > a .titulo {
    color: #6843A3 !important;
    font-weight: 600 !important;
}

.pagina-categoria .menu.lateral .nivel-dois a {
    color: #555555 !important;
}

.pagina-categoria .filtro .titulo,
.pagina-categoria .filtro h4,
.pagina-categoria .filtro-coluna .titulo {
    color: #444444 !important;
}

.pagina-categoria .breadcrumb a,
.pagina-categoria .breadcrumb span {
    color: #555555 !important;
}


/* Produto */

.pagina-produto .codigo-produto,
.pagina-produto .codigo-produto span,
.pagina-produto .codigo-produto strong {
    color: #666666 !important;
}

.pagina-produto .marca-produto,
.pagina-produto .marca-produto span,
.pagina-produto .marca-produto strong,
.pagina-produto .marca-produto a {
    color: #555555 !important;
}


/* Atributos */

.pagina-produto .atributos,
.pagina-produto .atributos p,
.pagina-produto .atributos span,
.pagina-produto .atributos strong,
.pagina-produto .atributos label,
.pagina-produto .atributos .atributo-nome,
.pagina-produto .atributos [class*="atributo"] {
    color: #555555 !important;
    opacity: 1 !important;
}

.pagina-produto .atributos p *,
.pagina-produto .atributos span *,
.pagina-produto .atributos label * {
    color: #555555 !important;
    opacity: 1 !important;
}


/* Breadcrumb produto */

.pagina-produto .breadcrumb a,
.pagina-produto .breadcrumb span {
    color: #555555 !important;
}


/* Mais como esse */

.pagina-produto .produtos-relacionados .titulo,
.pagina-produto .produtos-relacionados h4,
.pagina-produto .listagem .titulo-categoria,
.pagina-produto .listagem > .titulo {
    color: #444444 !important;
    opacity: 1 !important;
}


/* =========================================================
   14. CABEÇALHO HOME — ELEMENTOS EXTRAS
   ========================================================= */

@media screen and (min-width: 768px) {

    .pagina-inicial #cabecalho .bem-vindo,
    .pagina-inicial #cabecalho .bem-vindo span,
    .pagina-inicial #cabecalho .bem-vindo a {
        display: none !important;
    }

    .pagina-inicial #cabecalho .atalhos-mobile {
        display: none !important;
    }

}


/* =========================================================
   15. CABEÇALHO DESKTOP MAIS FINO
   Sem alterar estrutura
   ========================================================= */

@media screen and (min-width: 768px) {

    #cabecalho > .conteiner {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    #cabecalho .logo img {
        max-height: 58px !important;
        width: auto !important;
    }

    #cabecalho .busca input {
        height: 32px !important;
        min-height: 32px !important;
    }

    #cabecalho .busca .botao {
        height: 32px !important;
        min-height: 32px !important;
    }

}


/* =========================================================
   16. VITRINE HOME MAIS COMPACTA
   ========================================================= */

@media screen and (min-width: 768px) {

    .secao-principal .listagem {
        margin-top: 0 !important;
    }

    .listagem .titulo-categoria {
        margin-top: 20px !important;
        margin-bottom: 20px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .listagem .titulo-categoria h2,
    .listagem .titulo-categoria strong,
    .listagem .titulo-categoria span {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .listagem .listagem-linha {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .listagem .imagem-produto {
        height: 260px !important;
        min-height: 260px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    .listagem .imagem-produto img {
        width: auto !important;
        height: auto !important;

        max-width: 220px !important;
        max-height: 240px !important;

        object-fit: contain !important;

        margin: auto !important;
    }

}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    #cabecalho .logo img {
        max-height: 55px !important;
        width: auto !important;
    }

    #cabecalho .barra-frase {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    #cabecalho .barra-frase > .conteiner {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        line-height: 30px !important;
    }

    #cabecalho .barra-frase > .conteiner > span {
        height: 30px !important;

        line-height: 30px !important;

        font-size: 11px !important;
    }

    #cabecalho .barra-frase > .conteiner > i {
        height: 30px !important;
        line-height: 30px !important;
    }

    #cabecalho .barra-frase img {
        max-width: 19px !important;
        max-height: 19px !important;
    }


    /* Vídeo */

    .video-tema {
        display: block !important;
        visibility: visible !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin-top: 20px !important;
        margin-bottom: 25px !important;

        padding: 0 !important;

        text-align: center !important;
    }

    .video-tema > .conteiner {
        width: calc(100% - 30px) !important;
        max-width: 500px !important;

        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        float: none !important;

        box-sizing: border-box !important;
    }

    .video-tema > img {
        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 500px !important;

        height: auto !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;

        object-fit: cover !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        float: none !important;

        cursor: pointer !important;

        box-sizing: border-box !important;
    }

    .video-tema > iframe,
    .video-tema iframe,
    .secao-secundaria .video-tema iframe {
        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 500px !important;

        height: auto !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        float: none !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   18. WHATSAPP
   ========================================================= */

a[href*="wa.me"],
a[href*="whatsapp.com"],
a[href*="api.whatsapp"] {
    z-index: 999999 !important;
}


/* =========================================================
   19. AVISO DE COOKIES
   ========================================================= */

#avisoCookies {
    display: none !important;
    visibility: hidden !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

#avisoCookies .conteiner {
    display: none !important;
}/* =========================================================
   LOVE OR DIE — ALINHAMENTO REDES SOCIAIS
   ========================================================= */

/* Instagram */
#rodape .redes-sociais a[href*="instagram"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: 0 !important;
}

/* Espaço fixo para o ícone do Instagram */
#rodape .redes-sociais a[href*="instagram"] i {
    width: 26px !important;
    min-width: 26px !important;
    text-align: center !important;
}

/* Remove margem antiga do texto Instagram */
#rodape .redes-sociais a[href*="instagram"]::after {
    margin-left: 0 !important;
}


/* Spotify */
#rodape .love-spotify {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin-left: 0 !important;
    margin-top: 8px !important;
}

/* Mesma largura reservada para o ícone */
#rodape .love-spotify-icone {
    width: 26px !important;
    min-width: 26px !important;
    height: 20px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}/* =========================================================
   LOVE OR DIE — CONTRASTE + OPÇÃO SELECIONADA
   Página do produto e breadcrumb
   ========================================================= */


/* 1. BREADCRUMB — categoria que estava muito clara */

.breadcrumb li,
.breadcrumb li a,
.breadcrumb li span,
.pagina-produto .breadcrumb li,
.pagina-produto .breadcrumb li a,
.pagina-produto .breadcrumb li span,
.pagina-categoria .breadcrumb li,
.pagina-categoria .breadcrumb li a,
.pagina-categoria .breadcrumb li span {
    color: #444444 !important;
    opacity: 1 !important;
}


/* 2. ESTOQUE — deixa "Estoque:" legível */

.pagina-produto .disponibilidade-produto,
.pagina-produto .disponibilidade-produto span,
.pagina-produto [class*="estoque"],
.pagina-produto [class*="estoque"] span {
    color: #555555 !important;
    opacity: 1 !important;
}


/* Mantém "Disponível" bem destacado */

.pagina-produto .disponibilidade-produto strong,
.pagina-produto [class*="estoque"] strong {
    color: #333333 !important;
    opacity: 1 !important;
}


/* =========================================================
   3. COR E TAMANHO — ESTADO NORMAL
   ========================================================= */

.pagina-produto .atributos ul li a,
.pagina-produto .atributos ul li label {
    border: 1px solid #555555 !important;
    background: #FFFFFF !important;
    color: #555555 !important;

    transition: all 0.15s ease !important;
}


/* =========================================================
   4. OPÇÃO SELECIONADA
   Roxo Love or Die + texto branco
   ========================================================= */

.pagina-produto .atributos ul li.active a,
.pagina-produto .atributos ul li.ativo a,
.pagina-produto .atributos ul li.selected a,
.pagina-produto .atributos ul li.active label,
.pagina-produto .atributos ul li.ativo label,
.pagina-produto .atributos ul li.selected label,

.pagina-produto .atributos ul li a.active,
.pagina-produto .atributos ul li a.ativo,
.pagina-produto .atributos ul li a.selected,

.pagina-produto .atributos ul li label.active,
.pagina-produto .atributos ul li label.ativo,
.pagina-produto .atributos ul li label.selected {

    background: #6843A3 !important;
    border-color: #6843A3 !important;

    color: #FFFFFF !important;

    box-shadow: 0 0 0 2px rgba(104, 67, 163, 0.18) !important;
}


/* Texto interno da opção selecionada */

.pagina-produto .atributos ul li.active a *,
.pagina-produto .atributos ul li.ativo a *,
.pagina-produto .atributos ul li.selected a *,
.pagina-produto .atributos ul li.active label *,
.pagina-produto .atributos ul li.ativo label *,
.pagina-produto .atributos ul li.selected label * {
    color: #FFFFFF !important;
}


/* =========================================================
   5. COR SELECIONADA
   Borda roxa forte ao redor da amostra
   ========================================================= */

.pagina-produto .atributos .atributo-cor ul li.active a,
.pagina-produto .atributos .atributo-cor ul li.ativo a,
.pagina-produto .atributos .atributo-cor ul li.selected a {
    border: 3px solid #6843A3 !important;
    box-shadow: 0 0 0 2px #FFFFFF,
                0 0 0 4px #6843A3 !important;
}


/* Hover — mostra que a opção é clicável */

.pagina-produto .atributos ul li a:hover,
.pagina-produto .atributos ul li label:hover {
    border-color: #6843A3 !important;
}/* LOVE OR DIE - Desativa troca de imagem dos produtos no hover */

.listagem-item .imagem-produto img {
    opacity: 1 !important;
}

.listagem-item .imagem-produto img + img,
.listagem-item .imagem-produto .imagem-secundaria,
.listagem-item .imagem-produto img.secundaria {
    display: none !important;
}

.listagem-item:hover .imagem-produto img:first-child {
    opacity: 1 !important;
    visibility: visible !important;
}