/* MEGAZORD - Detalhes compactos */

/* Desktop */
@media (min-width: 992px) {

    .container-promo-detalhes .content-promo-detalhes {
        display: grid !important;
        grid-template-columns: minmax(0, 35%) minmax(0, 65%) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: start !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .container-promo-detalhes .content-imagem-promo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        float: none !important;
        padding: 8px 20px 0 0 !important;
        box-sizing: border-box !important;
    }

    .container-promo-detalhes .content-imagem-promo img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .container-promo-detalhes .content-promo-mobile {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        float: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .container-promo-detalhes .content-promo {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .container-promo-detalhes .title-promocao {
        margin: 0 0 12px !important;
        line-height: 1.3 !important;
    }

    .container-promo-detalhes .preco {
        display: block !important;
        margin: 12px 0 !important;
    }

    .container-promo-detalhes .mz-instrucoes-desconto {
        margin: 12px 0 !important;
        padding: 12px 15px !important;
    }

    .container-promo-detalhes .btn-ir-loja {
        margin: 6px 0 0 !important;
    }

    /* Interações abaixo da oferta */
    .container-promo-detalhes .itens-promo-bottom {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 8px 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }

    .container-promo-detalhes .icons-promo-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Comentários próximos da promoção */
    .container-promo-detalhes #comentarios {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid #eee !important;
        box-sizing: border-box !important;
    }
}

/* Mobile */
@media (max-width: 991px) {

    .container-promo-detalhes .content-promo-detalhes {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .container-promo-detalhes .content-imagem-promo,
    .container-promo-detalhes .content-promo-mobile,
    .container-promo-detalhes .content-promo {
        width: 100% !important;
        float: none !important;
        height: auto !important;
    }

    .container-promo-detalhes .itens-promo-bottom {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        margin: 12px 0 0 !important;
        padding: 10px 0 !important;
        border: 0 !important;
    }

    .container-promo-detalhes .icons-promo-bottom {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .container-promo-detalhes #comentarios {
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 15px 0 0 !important;
        border-top: 1px solid #eee !important;
    }
}

/* ==========================================
   MEGAZORD - MOBILE CONSOLIDADO
   ========================================== */

@media (max-width: 767px) {

    .container-promo-detalhes .content-promo {
        margin-bottom: 0 !important;
    }

    .container-promo-detalhes .content-promo-mobile {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .container-promo-detalhes .content-promo-detalhes {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    .container-promo-detalhes .itens-promo-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        border: 0 !important;
    }

    .container-promo-detalhes .itens-promo-bottom > li {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-promo-detalhes .content-user-time {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .container-promo-detalhes .content-time {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .container-promo-detalhes .icons-promo-bottom {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-promo-detalhes .icons-promo-bottom > button {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    .container-promo-detalhes .icons-promo-bottom > .container-curtir {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: max-content !important;
        float: none !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-promo-detalhes
    .icons-promo-bottom > .container-curtir > button {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    .container-promo-detalhes #comentarios {
        margin-top: 12px !important;
    }

    .container-promo-detalhes #comentarios .box-comentar-detalhes {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
    }

    .container-promo-detalhes #comentarios .box-comentar-detalhes > h3,
    .container-promo-detalhes #comentarios .box-comentar-detalhes > #comentar {
        width: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .container-promo-detalhes #comentarios .form_comentario {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Megazord: remover divisória superior dos comentários no desktop */
@media (min-width: 992px) {
    .container-promo-detalhes #comentarios {
        border-top: 0 !important;
    }
}

/* Megazord - Remover borda superior das interações no desktop */
@media (min-width: 992px) {
    .container-promo-detalhes .content-promo-detalhes > .itens-promo-bottom {
        border-top: 0 !important;
    }
}