/* =================================================_
   Estilo Exclusivo: Página Individual de Produtos
   ================================================= */

/* 1. Container Centralizado */
.produto-estilizado {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 2. Tipografia Elegante */
.produto-estilizado h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 3.5rem !important;
    font-weight: 400;
    color: #1a1a1a;
}

.produto-estilizado h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 1.5rem !important;
}

/* 3. Estrutura de Colunas do Gutenberg */
.produto-estilizado .wp-block-columns {
    display: flex;
    gap: 60px !important;
    align-items: center;
    margin-bottom: 80px !important;
}

/* 4. Parágrafos e Listas (Fonte Inter refinada) */
.produto-estilizado p, 
.produto-estilizado li {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.8;
    color: #4a4a4a;
}

/* 5. Controle Rigoroso das Imagens (Deixa com aprox. 50% a 60% e centralizadas) */
.produto-estilizado .wp-block-column img,
.produto-estilizado .wp-block-image img {
    max-width: 60% !important; /* Controla o tamanho elegante das imagens secundárias */
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto !important;
    object-fit: contain;
}

/* 6. Separadores discretos */
.produto-estilizado .wp-block-separator {
    border-top: 1px solid #e5e5e5 !important;
    margin: 3rem 0 !important;
}

/* 7. Responsividade para Celular e Tablet */
@media (max-width: 768px) {
    .produto-estilizado { 
        padding: 0 20px; 
    }
    
    .produto-estilizado .wp-block-columns { 
        flex-direction: column; 
        gap: 30px !important; 
    }

    .produto-estilizado .wp-block-column img,
    .produto-estilizado .wp-block-image img {
        max-width: 90% !important; /* No celular ocupa mais espaço para boa visualização */
    }
}