/* =========================================================
   LAYOUT DE 3 COLUNAS (ESTILO PRINT)
   ========================================================= */

.ml-produto-layout {
    display: grid;
    /* Aqui está a mágica das 3 colunas: Fotos (1.2), Info (1), Compra (350px) */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 350px;
    gap: 32px;
    max-width: 1240px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: var(--fonte-padrao, 'Inter', sans-serif);
    align-items: start;
}

/* Esconde elementos repetidos do WooCommerce padrão */
.ml-produto-layout .product_title,
.ml-produto-layout p.price,
.ml-produto-layout .woocommerce-product-gallery {
    display: none !important;
}

/* =========================================================
   COLUNA 1: FOTOS
   ========================================================= */
.ml-galeria-customizada {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: sticky;
    top: 40px;
}

.ml-miniaturas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60px;
    flex-shrink: 0;
}

.ml-thumb {
    width: 50px;
    height: 50px;
    border: 1px solid var(--cor-borda, #EAEAEA);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    transition: border 0.2s ease;
}

.ml-thumb:hover, .ml-thumb-ativo {
    border: 2px solid var(--cor-laranja-primaria, #FF914D);
}

.ml-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ml-imagem-destaque img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}

/* =========================================================
   COLUNA 2: INFORMAÇÕES
   ========================================================= */
.ml-topo-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.ml-produto-titulo {
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-preto-principal, #333);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.ml-rating-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #666;
}

.ml-badge-preco-baixou {
    background-color: #00A650;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.ml-current-price {
    font-size: 36px;
    font-weight: 400;
    color: #333;
    margin-bottom: 4px;
}

.ml-installments {
    color: #00A650;
    font-size: 16px;
}

.ml-resumo-caracteristicas {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #EAEAEA;
}

.ml-titulo-caracteristicas {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.ml-resumo-caracteristicas ul {
    padding-left: 20px;
    color: #444;
    line-height: 1.6;
}

/* =========================================================
   COLUNA 3: CAIXA DE COMPRA
   ========================================================= */
.ml-caixa-box {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 24px;
    background: #ffffff;
}

.ml-frete-badge {
    background-color: #00A650;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 16px;
}

.ml-frete-linha {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: #333;
}

.ml-verde { color: #00A650; }
.ml-link-azul { color: #3483FA; text-decoration: none; font-size: 14px; }

/* AJUSTE DO BOTÃO DO WOOCOMMERCE PARA FICAR COMO O PRINT */
#ml-botao-comprar-destino form.cart {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ml-botao-comprar-destino form.cart .quantity {
    display: flex;
    justify-content: flex-start;
}

#ml-botao-comprar-destino form.cart .quantity input {
    height: 48px;
    width: 80px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
}

#ml-botao-comprar-destino form.cart button.single_add_to_cart_button {
    background-color: #FF914D !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 48px !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.2s;
}

#ml-botao-comprar-destino form.cart button.single_add_to_cart_button:hover {
    opacity: 0.9;
}

.ml-vendedor-info { margin-top: 24px; font-size: 14px; }
.ml-garantias-info { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: #666; } 

/* =========================================================
   AJUSTES DA CAIXA DE FRETE E ÍCONES
   ========================================================= */

/* 1. Trava o tamanho do ícone para não ficar gigante */
.ml-frete-linha svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0; /* Impede que o ícone seja esmagado pelo texto */
    margin-top: 2px;
}

/* 2. Arruma o espaçamento do texto do frete */
.ml-frete-linha p {
    margin: 0;
    line-height: 1.4;
}

/* 3. Alinha os links azuis exatamente debaixo do texto (e não debaixo do ícone) */
.ml-frete-info a.ml-link-azul {
    display: block;
    margin-left: 34px; /* Compensa o tamanho do ícone (22px) + o gap (12px) */
    margin-top: 4px;
    margin-bottom: 20px;
}

/* 4. Ajuste na tag verde para ficar idêntica ao print */
.ml-frete-badge {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    font-size: 11px;
}

/* =========================================================
   CORREÇÕES DE TAMANHO E DESCRIÇÃO
   ========================================================= */

/* 1. Oculta a descrição padrão do WordPress */
.ml-detalhes-nativos {
    display: none !important;
}

/* 2. Força o tamanho correto (menor) para os textos de garantia */
.ml-garantia-item p {
    font-size: 13px !important;
    margin: 0;
    line-height: 1.4;
    color: #666;
}

/* 3. Trava o tamanho dos ícones de garantia */
.ml-garantia-item svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin-top: 2px;
    color: #999;
}

/* 4. Cor do texto de 3 meses de garantia */
.ml-texto-cinza {
    color: #999 !important;
}

/* Estilo do botão "Adicionar ao carrinho" */
.ml-btn-secundario-carrinho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FFF0E6; /* Cor de fundo do print */
    color: #FF914D;           /* Cor do texto/ícone do print */
    border: none;
    border-radius: 6px;
    height: 48px;
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.ml-btn-secundario-carrinho:hover {
    background-color: #FFE4D1;
}

/* Ajuste dos ícones das garantias para ficar tudo alinhado */
.ml-garantias-info {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre as linhas */
    margin-top: 20px;
}

.ml-garantia-item {
    display: flex;
    align-items: flex-start; /* Alinha o ícone com o topo do texto */
    gap: 10px;
}

.ml-garantia-item svg {
    width: 20px !important;
    height: 20px !important;
    color: #666;
    margin-top: 2px;
}

/* Correção do espaçamento entre botões */
.ml-botoes-compra-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Valor reduzido para aproximar os botões */
    margin-top: 16px;
}

/* Esconde o seletor de quantidade se quiser o visual limpo do print */
#ml-botao-comprar-destino form.cart .quantity {
    display: none; 
}

/* Botão principal (Comprar Agora) */
#ml-botao-comprar-destino form.cart button.single_add_to_cart_button {
    background-color: #FF8A4C !important;
    border-radius: 6px !important;
    height: 48px !important;
    width: 100% !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Botão secundário (Adicionar ao Carrinho) */
.ml-btn-secundario-carrinho {
    background-color: #FFF0E6 !important;
    color: #FF8A4C !important;
    border-radius: 6px !important;
    height: 48px !important;
    width: 100% !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
}

/* Ajuste dos ícones de cabeçalho */
.ml-acoes-topo {
    display: flex;
    gap: 12px;
}

.ml-btn-icone {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* =========================================================
   AJUSTE FINO: PAINEL DE COMPRA (COMPACTO)
   ========================================================= */

/* 1. Container Principal da Coluna de Compra */
.ml-coluna-compra {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Padroniza o espaço entre TODOS os elementos da coluna */
}

/* 2. Cabeçalho com Ícones (Compartilhar e Favorito) */
.ml-topo-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ml-acoes-topo {
    display: flex;
    gap: 10px;
}

/* 3. Ajuste nos botões para garantir alinhamento idêntico */
.ml-botoes-compra-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre o botão de comprar e o botão de carrinho */
    margin-top: 8px;
}

/* Força os botões a terem a mesma largura e altura */
#ml-botao-comprar-destino form.cart button.single_add_to_cart_button,
.ml-btn-secundario-carrinho {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600 !important;
    font-size: 16px !important;
    border: none !important;
    cursor: pointer;
}

/* Ajuste específico para remover margens extras do formulário do WooCommerce */
form.cart {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajuste de posição do Breadcrumb */
.woocommerce-breadcrumb {
    display: block !important; /* Garante que ele se comporte como um bloco */
    margin-top: 8px !important;    /* Aumente este valor para descer mais o breadcrumb */
    margin-bottom: 0px !important;  /* Espaço entre ele e a imagem */
    max-width: 1200px;              /* Mantém a largura alinhada ao resto do site */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 0px !important;     /* Garante o alinhamento lateral com o conteúdo */
}

/* =========================================================
   AJUSTE DE TAMANHO DO BLOCO DE PREÇO
   ========================================================= */

/* 1. Reduz o texto do desconto e preço antigo (Topo) */
.ml-price-row {
    font-size: 13px !important; /* Ajuste para ser menor que o preço principal */
}

/* 2. Reduz o Preço Principal (O valor grande) */
.ml-current-price {
    font-size: 28px !important; /* Estava 36px, reduzi para 28px */
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

/* 3. Reduz o texto de parcelamento (Rodapé) */
.ml-installments {
    color: #00A650;
    font-size: 14px !important; /* Ajuste para ficar proporcional ao preço */
}

/* Oculta a barra lateral (sidebar) apenas na página de produto */
.single-product #sidebar, 
.single-product .widget-area,
.single-product .sidebar {
    display: none !important;
}

/* Oculta os itens de busca, páginas e arquivos que estão aparecendo */
.single-product .widget_pages,
.single-product .widget_archive,
.single-product .widget_categories,
.single-product .widget_search {
    display: none !important;
}

.ml-secao-especificacoes {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #f0f0f0;
}

.ml-titulo-secao {
    font-size: 24px;
    margin-bottom: 30px;
}

.ml-grid-especificacoes table {
    width: 100%;
    border-collapse: collapse;
}

/* Garante que o bloco de características preencha a coluna 2 */
.ml-secao-especificacoes {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    width: 100%; /* Garante que ele ocupe a largura da coluna */
}

/* Ajuste das especificações para o visual "zebrado" dentro da coluna */
.ml-grid-especificacoes table {
    width: 100%;
    border-collapse: collapse;
}

.ml-grid-especificacoes tr:nth-child(even) {
    background-color: #f8f8f8;
}

.ml-grid-especificacoes td {
    padding: 12px;
    font-size: 14px;
}