/* Estilos gerais do bloco */
.bloco-descricao-produto {
    padding: 20px;
    max-width: 400px; /* Mudado de 600px */
    font-family: Arial, sans-serif;
}

/* Estilos para o título do produto */
h1.titulo-produto {
    font-size: 1.8em; /* Mudado de 24px */
    color: #333;
    margin-top: 0;
    margin-bottom: 5px; /* Mudado de 10px */
}

/* Estilos para a seção de avaliação */
.avaliacao-produto {
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    gap: 5px; /* Adicionado */
    margin-bottom: 10px;
}
.avaliacao-produto .estrelas {
    color: #FFC107; /* Mudado de #f0c040 */
    font-size: 1.1em; /* Mudado de 18px */
}
.avaliacao-produto .avaliacoes {
    color: #555;
    font-size: 0.9em; /* Adicionado */
}

/* Estilos para referência */
.main_product_checkout_reference {
    font-size: 0.9em; /* Adicionado */
    color: #555; /* Adicionado */
    margin-bottom: 10px; /* Adicionado */
}
.main_product_checkout_reference b {
    font-weight: normal; /* Adicionado */
}

/* Estilos para o trecho da descrição */
.main_product_checkout_headline {
    margin-bottom: 20px; /* Adicionado */
}
.main_product_checkout_headline p {
    color: #555; /* Adicionado */
    font-size: 0.9em; /* Adicionado */
    margin-bottom: 5px; /* Adicionado */
}
.main_product_checkout_headline .j_anchor {
    color: #2196F3; /* Adicionado */
    text-decoration: underline; /* Adicionado */
    cursor: pointer; /* Adicionado */
    font-weight: normal; /* Adicionado */
    font-size: 0.9em; /* Adicionado */
}

/* Estilos para os preços */
.precos .preco-atual {
    color: #7B1FA2; /* Mudado de #8a2be2 */
    font-size: 1.8em; /* Mudado de 24px */
    font-weight: bold;
    display: block; /* Adicionado */
    margin-bottom: 15px; /* Adicionado */
}
.precos .preco-antigo {
    text-decoration: line-through;
    color: #888; /* Mudado de #999 */
    font-size: 1em; /* Mudado de 16px */
}
.precos .desconto {
    background-color: #f44336; /* Mudado de #b81c32 */
    color: white;
    padding: 2px 5px; /* Mudado de 2px 6px */
    border-radius: 3px; /* Mudado de 4px */
    font-size: 0.8em; /* Mudado de 13px */
    margin-left: 10px; /* Adicionado */
}
.parcelamento {
    font-size: 0.9em; /* Mudado de 14px */
    color: #555; /* Mudado de #666 */
    margin-top: 15px; /* Mudado de margin-bottom 20px */
    margin-bottom: 20px;
}
.parcelamento strong {
    font-weight: bold; /* Adicionado */
}
.parcelamento a {
    color: #2196F3; /* Mudado de #888 */
    text-decoration: underline;
    font-size: 0.9em; /* Mudado de 14px */
}

/* Estilos para o botão "EU QUERO!" que agora serão aplicados ao botão do carrinho */
.botao-comprar {
    background-color: #38C751; /* Mudado de #1db954 */
    color: white;
    text-align: center;
    padding: 15px 20px; /* Mudado de 14px 20px */
    border-radius: 8px; /* Mudado de 6px */
    border: none; /* Adicionado */
    cursor: pointer;
    font-size: 1.2em; /* Mudado de 16px */
    font-weight: bold;
    text-decoration: none;
    display: block; /* Mudado de inline-block */
    box-sizing: border-box; /* Adicionado */
    white-space: nowrap; /* Adicionado */
}

.botao-comprar:hover {
    opacity: 0.9; /* Mudado de background-color: #148f3d */
    text-decoration: none; /* Adicionado */
}

/* SOBRESCRITA: Estilo para o botão "Comprar agora" que é cinza na imagem */
.js-buy-now.botao-comprar {
    background-color: #888; /* Adicionado */
}
.js-buy-now.botao-comprar:hover {
    background-color: #777; /* Adicionado */
}

/* Estilos para o container que agrupa a quantidade e o botão */
.main_product_checkout_actions {
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    gap: 15px; /* Adicionado */
    flex-wrap: wrap; /* Adicionado */
    width: 100%; /* Adicionado */
}

/* Estilos para o seletor de quantidade */
.quantity-selector {
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* Adicionado */
    height: 48px; /* Adicionado */
    min-width: 120px; /* Adicionado */
    flex-shrink: 0; /* Adicionado */
}

.quantity-selector .btn.quantity-btn {
    background-color: transparent; /* Adicionado */
    border: none; /* Adicionado */
    padding: 0 15px;
    height: 100%; /* Adicionado */
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    cursor: pointer;
    font-size: 1.5em;
    color: #555; /* Mudado de #333 */
    outline: none; /* Adicionado */
    transition: background-color 0.2s ease; /* Adicionado */
}

.quantity-selector .btn.quantity-btn:hover {
    background-color: #f0f0f0;
}

.quantity-selector .qtd_item {
    padding: 0 10px;
    text-align: center;
    border-left: 1px solid #eee; /* Adicionado */
    border-right: 1px solid #eee; /* Adicionado */
    height: 100%; /* Adicionado */
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    justify-content: center; /* Adicionado */
    font-size: 1.2em;
    min-width: 40px; /* Adicionado */
    font-weight: bold;
    color: #333; /* Mudado de #555 */
}

/* Estilo para o botão de adicionar ao carrinho dentro do flex container */
.main_product_checkout_actions .add-to-cart-btn,
.main_product_checkout_actions .whatsapp-btn {
    flex-grow: 1; /* Adicionado */
    margin: 0; /* Adicionado */
    padding: 15px 20px; /* Adicionado */
    box-sizing: border-box; /* Adicionado */
}

/**********************************************
Estilos para a mensagem de feedback (avisos)
************************************************/
.cart-feedback {
    position: fixed; /* Adicionado */
    top: 20px; /* Adicionado */
    right: 20px; /* Adicionado */
    padding: 10px 20px; /* Adicionado */
    border-radius: 5px; /* Adicionado */
    color: white; /* Adicionado */
    font-weight: bold; /* Adicionado */
    z-index: 9999; /* Adicionado */
    display: none; /* Adicionado */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adicionado */
}

.cart-feedback.success {
    background-color: #4CAF50; /* Adicionado */
}

.cart-feedback.error {
    background-color: #f44336; /* Adicionado */
}

/* Efeito de loading para botões */
button.loading, a.loading {
    opacity: 0.7; /* Adicionado */
    cursor: not-allowed; /* Adicionado */
}

    /* Estilos para o botão "EU QUERO!" que agora serão aplicados ao botão do carrinho */
    .botao-comprar {
        background-color: #38C751; /* Exemplo de verde, ajuste conforme o seu */
        color: white;
        text-align: center;
        padding: 15px 20px; /* Ajuste o padding para corresponder ao seu design */
        border-radius: 8px; /* Ajuste o raio da borda */
        border: none;
        cursor: pointer;
        font-size: 1.2em; /* Ajuste o tamanho da fonte */
        font-weight: bold;
        text-decoration: none; /* Para links (<a>), garante que não tenha sublinhado */
        display: block; /* Garante que ele ocupe a largura disponível no flex item */
        box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
        white-space: nowrap; /* Evita que o texto quebre linha dentro do botão */
    }

    .botao-comprar:hover {
        opacity: 0.9; /* Efeito de hover sutil */
        text-decoration: none; /* Mantém sem sublinhado no hover para links */
    }

    /* Estilos para o container que agrupa a quantidade e o botão */
    .main_product_checkout_actions {
        display: flex; /* Habilita o Flexbox */
        align-items: center; /* Alinha os itens verticalmente ao centro */
        gap: 15px; /* Adiciona um espaçamento entre os itens */
        flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
        width: 100%; /* Garante que o container ocupe a largura total disponível */
    }

    /* Estilos para o seletor de quantidade */
    .quantity-selector {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 8px; /* Mantém o raio da borda consistente */
        overflow: hidden;
        height: 48px; /* Ajuste a altura para corresponder à altura do botão se necessário */
        min-width: 120px; /* Largura mínima para o seletor de quantidade */
        flex-shrink: 0; /* Impede que o seletor encolha mais do que o necessário */
    }

    .quantity-selector .btn.quantity-btn {
        background-color: transparent;
        border: none;
        padding: 0 15px; /* Ajuste o padding */
        height: 100%; /* Preenche a altura do container */
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 1.5em; /* Ajuste o tamanho da fonte dos sinais */
        color: #333;
        outline: none; /* Remove o outline de foco padrão do navegador */
    }

    .quantity-selector .btn.quantity-btn:hover {
        background-color: #f0f0f0;
    }

    .quantity-selector .qtd_item {
        padding: 0 10px; /* Ajuste o padding */
        text-align: center;
        border-left: 1px solid #eee; /* Linha divisória */
        border-right: 1px solid #eee; /* Linha divisória */
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em; /* Ajuste o tamanho da fonte do número */
        min-width: 40px; /* Garante espaço para o número */
        font-weight: bold;
        color: #555;
    }

    /* Estilo para o botão de adicionar ao carrinho dentro do flex container */
    .main_product_checkout_actions .add-to-cart-btn,
    .main_product_checkout_actions .whatsapp-btn {
        flex-grow: 1; /* Permite que o botão ocupe o espaço restante */
        /* Remove padding/margin que possam estar vindo de outras classes e causando quebra de linha */
        margin: 0;
        padding: 15px 20px; /* Garante que o padding original do 'botao-comprar' seja aplicado */
        box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
    }