/* Comprar em Conjunto
--------------------------------------------- */

/* =======================================================
   ESTILO BASE
   ======================================================= */

.compraram-tambem {
    background: #eeeeee !important;
    padding: 16px 18px !important;
    margin-top: 24px !important;
    border-radius: 0px !important;
}

.compraram-tambem h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 14px 0 !important;
    color: #333;
}


/* =======================================================
   DESKTOP — 3 colunas: IMG | INFO | BOTÃO
   ======================================================= */

.compraram-tambem > div {
    width: 100%;
}

.compraram-tambem .linha-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

/* IMAGEM */
.compraram-tambem .img-wrapper img,
.compraram-tambem img {
    width: 60px !important;
    height: auto !important;
    border-radius: 6px;
}

/* INFO (nome + preço) */
.compraram-tambem .detalhes-sugerido {
    flex: 1 1 auto;
    min-width: 0;
}

.compraram-tambem .detalhes-sugerido .info-linha {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.compraram-tambem .detalhes-sugerido h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compraram-tambem .detalhes-sugerido p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #444 !important;
}


/* =======================================================
   BOTÃO — ALTURA CORRETA NO DESKTOP
   ======================================================= */

.compraram-tambem .linha-topo > .single_add_to_cart_button.button.alt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* HERDA A ALTURA (varia por configuração) */
    height: var(--button-height, 48px) !important;
    min-height: var(--button-height, 48px) !important;
    line-height: var(--button-height, 48px) !important;

    padding-left: var(--button-padding-x, 24px) !important;
    padding-right: var(--button-padding-x, 24px) !important;

    font-size: var(--button-font-size, 15px) !important;
    font-weight: 600 !important;

    border-radius: 0 !important;
    white-space: nowrap !important;
}


/* =======================================================
   MOBILE — Botão 100% largura + altura correta (40px)
   ======================================================= */

@media (max-width: 680px) {

    .compraram-tambem .linha-topo {
        display: flex;
        flex-wrap: wrap;            /* Permite o botão descer */
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    /* Imagem reduzida em mobile */
    .compraram-tambem .img-wrapper img,
    .compraram-tambem img {
        width: 55px !important;
    }

    /* INFO ao lado da imagem */
    .compraram-tambem .detalhes-sugerido {
        flex: 1 1 calc(100% - 70px);
        min-width: 0;
    }

    .compraram-tambem .detalhes-sugerido,
    .compraram-tambem .detalhes-sugerido .info-linha {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .compraram-tambem .detalhes-sugerido h4 {
        font-size: 14px !important;
    }

    .compraram-tambem .detalhes-sugerido p {
        font-size: 13px !important;
    }

    /* BOTÃO — 100% largura + altura EXACTA igual ao botão principal */
    .compraram-tambem .linha-topo > .single_add_to_cart_button.button.alt {
        order: 3 !important;
        width: 100% !important;
        flex-basis: 100% !important;

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

        height: 40px !important;             /* valor do Customizer */
        min-height: 40px !important;
        line-height: 40px !important;
        padding: 0 24px !important;

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

        margin-top: 8px !important;
        border-radius: 0 !important;
    }
}

/* Produtos Relacionados - Altura
--------------------------------------------- */

/* Reduz altura da secção */
.related.products {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Força proporção 1:1 nas miniaturas */
.related.products ul.products li.product figure {
    aspect-ratio: 1 / 1 !important;
    max-height: 260px;      /* ajusta a altura total desejada */
    overflow: hidden;
}

/* Ajuste da imagem dentro do quadrado 1:1 */
.related.products ul.products li.product img {
    width: 100%;
    height: 100% !important;
    object-fit: contain !important;  /* mantém a imagem inteira, sem cortes */
    aspect-ratio: 1 / 1 !important;
}

/* Espaço entre produtos */
.related.products ul.products li.product {
    margin-bottom: 10px !important;
}

/* Título compacto */
.related.products h2.ct-module-title {
    font-size: 22px !important;
    margin-bottom: 10px !important;
}