/* Botões de produtos relacionados, categorias e listagens */

/* Ajuste geral para qualquer layout de produto (esconde o botão original) */
.products li.product .button, 
.woocommerce ul.products li.product .button,
.related.products ul.products li.product .button,
.woocommerce .related ul.products li.product .button {
    visibility: hidden; /* Oculta o botão original */
    position: relative; /* Necessário para criar o botão customizado */
}

/* Personaliza o botão "Comprar" */
.products li.product .button::after,
.woocommerce ul.products li.product .button::after,
.related.products ul.products li.product .button::after,
.woocommerce .related ul.products li.product .button::after {
    content: "Comprar"; /* Texto do botão */
    visibility: visible;
    position: absolute; /* Posicionado no centro do card */
    top: 50%; /* Centraliza verticalmente no card */
    left: 50%; /* Centraliza horizontalmente no card */
    transform: translate(-50%, -50%); /* Ajusta o alinhamento ao centro */
    background-color: #e43b13; /* Cor de fundo */
    color: #ffffff; /* Cor do texto */
    padding: 12px 30px; /* Espaçamento interno do botão */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: 14px; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    text-transform: uppercase; /* Texto em maiúsculas */
    text-align: center; /* Centraliza o texto no botão */
    cursor: pointer; /* Cursor interativo */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: all 0.3s ease; /* Suaviza transições no hover */
}

/* Estilo ao passar o mouse no botão */
.products li.product .button::after:hover,
.woocommerce ul.products li.product .button::after:hover,
.related.products ul.products li.product .button::after:hover,
.woocommerce .related ul.products li.product .button::after:hover {
    background-color: #c03410; /* Cor no hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Intensifica a sombra */
}

/* Configuração do card do produto */
.products li.product,
.woocommerce ul.products li.product,
.related.products ul.products li.product,
.woocommerce .related ul.products li.product {
    display: flex; /* Define o card como flexbox */
    flex-direction: column; /* Organiza os elementos verticalmente */
    justify-content: space-between; /* Espaçamento uniforme entre os elementos */
    align-items: stretch; /* Alinha os elementos à largura do card */
    min-height: 420px; /* Altura mínima */
    padding: 15px; /* Espaçamento interno do card */
    background-color: #fff; /* Fundo branco */
    position: relative; /* Define a posição relativa do card */
    border: 1px solid #ebebeb; /* Borda decorativa */
}

/* Garante que o botão seja empurrado para o final do card */
.products li.product .button,
.woocommerce ul.products li.product .button,
.related.products ul.products li.product .button,
.woocommerce .related ul.products li.product .button {
    margin-top: auto; /* Empurra o botão para o final */
    position: relative;
    align-self: center; /* Centraliza horizontalmente */
    display: flex;
}

/* Estiliza o título/nome do produto */
.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .related ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box; /* Suporte para limitar o texto a 3 linhas */
    -webkit-box-orient: vertical; /* Define orientação vertical */
    -webkit-line-clamp: 3; /* Limita o texto a no máximo 3 linhas */
    overflow: hidden; /* Oculta o texto excedente */
    text-overflow: ellipsis; /* Adiciona os "..." ao final */
    line-height: 1.5em; /* Define o espaçamento de linha */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    max-height: calc(1.7em * 3); /* Garante que 3 linhas sejam exibidas */
    margin-bottom: 20px; /* Espaço inferior entre o título e o preço */
    text-align: center; /* Centraliza o texto */
}

/* Estiliza o preço do produto */
.products li.product .price,
.woocommerce ul.products li.product .price,
.related.products ul.products li.product .price,
.woocommerce .related ul.products li.product .price {
    text-align: center; /* Centraliza o preço */
    font-size: 14px; /* Define o tamanho da fonte */
    font-weight: bold; /* Deixa o preço em negrito */
    color: #000; /* Cor do preço */
    margin-top: 15px; /* Espaço entre o título e o preço */
    margin-bottom: 10px; /* Espaço superior ao preço com desconto */
}

/* Adiciona um estilo para o preço personalizado */

/* Preço com Desconto (Pix) */
.products li.product .preco-pix,
.woocommerce ul.products li.product .preco-pix {
    font-size: 20px; /* Tamanho destacado para o preço Pix */
    font-weight: bold; /* Negrito */
    color: #D83610; /* Laranja mais escuro para o preço Pix */
    text-align: center; /* Centralização */
}

/* Texto "PIX" na cor preta */
.products li.product .preco-pix span,
.woocommerce ul.products li.product .preco-pix span {
    font-weight: normal;
    color: #000; /* Preto para a palavra "PIX" */
}

/* Preço Parcelado (alinhamento fluido) */
.products li.product .preco-parcelado,
.woocommerce ul.products li.product .preco-parcelado {
    font-size: 13px; /* Tamanho do texto */
    color: #666; /* Cinza escuro */
    text-align: center;
    line-height: 1.4; /* Ajusta linha para melhorar a leitura */
    margin-top: 2px; /* Pequeno espaçamento acima */
    white-space: nowrap; /* Garante que "R\$ 22,83" fique na mesma linha */
}

/* Esconder o preço padrão do WooCommerce */
.products li.product .price,
.woocommerce ul.products li.product .price,
.related.products ul.products li.product .price,
.woocommerce .related ul.products li.product .price {
    display: none !important; /* Esconde completamente o preço padrão */
}

/* Alinhar o preço customizado com o nome do produto */
.products li.product .preco-personalizado,
.woocommerce ul.products li.product .preco-personalizado {
    margin-top: 10px; /* Espaçamento entre o título e o preço */
    text-align: center; /* Centraliza o texto */
}