/* Importação da fonte Poppins do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* --- Estilos Gerais --- */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Um cinza mais suave para o fundo */
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Cabeçalho (Header) --- */
header {
    background-color: #5b5093; /* Rosa vibrante */
    color: white;
    padding: 0.1rem 0; /* Mais padding para um visual mais imponente */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra mais destacada */
    position: relative; /* Para potencial uso futuro de pseudo-elementos ou fundos */
    overflow: hidden; /* Garante que elementos filhos não vazem */
}

/* Efeito sutil no cabeçalho (opcional, pode remover se não gostar)
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,105,180,0.9) 0%, rgba(255,160,200,0.8) 100%);
    z-index: 1;
    opacity: 0.9;
}*/

header h1 {
    margin: 0;
    font-size: 3.2em; /* Tamanho maior para o título */
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Sombra no texto do título */
    position: relative; /* Para sobrepor o pseudo-elemento */
    z-index: 2;
}

header p {
    font-size: 1.3em; /* Tamanho maior para a descrição */
    opacity: 0.95;
    margin-top: 10px;
    position: relative; /* Para sobrepor o pseudo-elemento */
    z-index: 2;
}

/* --- Contêiner do Catálogo --- */
.catalogo-container {
    display: grid;
    /* Ajustado para cards menores, permitindo mais biquínis por linha */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Min-width de 150px */
    gap: 20px; /* Espaçamento entre os cards */
    padding: 40px 15px; /* Mais padding superior e lateral para respirar */
}

/* --- Card de Produto Individual --- */
.produto-card {
    background-color: white;
    border-radius: 12px; /* Cantos mais arredondados */
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* Sombra mais suave e proeminente */
    overflow: hidden; /* Garante que a imagem não vaze */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Para flexbox interno, para organizar os elementos */
    flex-direction: column; /* Organiza os itens verticalmente */
}

.produto-card:hover {
    transform: translateY(-8px); /* Efeito de "levantar" mais notável */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* Sombra mais intensa no hover */
}

.produto-card a {
    text-decoration: none;
    color: inherit;
    display: flex; /* Para o link envolver tudo e ainda permitir flexbox */
    flex-direction: column;
    height: 100%; /* Garante que o link preencha todo o card */
}

/* --- Imagem do Produto --- */
.produto-card img {
    width: 100%;
    /* Definindo uma proporção quadrada para a imagem, garantindo que não seja cortada */
    aspect-ratio: 1 / 1; /* Imagem quadrada (largura / altura) */
    object-fit: contain; /* Garante que a imagem inteira caiba na proporção */
    background-color: #fdfdfd; /* Fundo claro para o espaço vazio se object-fit:contain for usado */
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    flex-shrink: 0; /* Impede que a imagem encolha se o conteúdo abaixo for grande */
}

.produto-card h2 {
    font-size: 1.4em; /* Levemente menor para caber melhor no card menor */
    color: #444;
    margin: 0 0 8px;
    padding: 0 10px; /* Padding ajustado para cards menores */
    flex-grow: 1; /* Permite que o título ocupe o espaço disponível */
    display: flex; /* Para centralizar texto verticalmente se houver múltiplas linhas */
    align-items: center;
    justify-content: center;
    min-height: 50px; /* Altura mínima para o título, para cards mais uniformes */
}

.produto-card .preco {
    font-size: 1.25em; /* Levemente menor */
    color: #008000; /* Verde vibrante */
    font-weight: 700; /* Mais negrito */
    margin-top: auto; /* Empurra o preço para baixo, útil com flex-grow no h2 */
    padding: 0 10px 15px; /* Padding ajustado para o preço */
}

/* --- Mensagem Sem Produtos --- */
.no-products {
    text-align: center;
    width: 100%;
    padding: 60px 0;
    font-size: 1.3em;
    color: #777;
    font-weight: 400;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin: 30px auto;
}

/* --- Rodapé (Footer) --- */
footer {
    background-color: #5b5093; /* Um azul marinho escuro */
    color: #ecf0f1; /* Cor de texto mais clara */
    text-align: center;
    padding: 35px 0;
    margin-top: 50px; /* Mais espaço acima do rodapé */
    font-size: 0.9em;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
}

footer p {
    margin: 7px 0;
    line-height: 1.5;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    header {
        padding: 2.5rem 0;
    }
    header h1 {
        font-size: 2.5em;
    }
    header p {
        font-size: 1.1em;
    }
    .catalogo-container {
        /* Ajuste para cards menores em tablets */
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Min-width de 130px */
        gap: 15px; /* Ajuste o gap */
        padding: 30px 15px;
    }
    .produto-card h2 {
        font-size: 1.2em;
        min-height: 40px; /* Altura mínima ajustada para títulos em telas menores */
    }
    .produto-card .preco {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2em;
    }
    header p {
        font-size: 1em;
    }
    .catalogo-container {
        /* Em celulares muito pequenos, uma coluna é mais legível */
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px 15px;
    }
    .produto-card img {
        aspect-ratio: 1 / 1; /* Mantém quadrado em telas pequenas para consistência */
    }
}


/* --- Estilos para a Página de Detalhes do Produto (produto_detalhe.php) --- */

.detalhe-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px 15px;
    max-width: 1000px; /* Limita a largura do conteúdo principal na página de detalhes */
    margin: 0 auto; /* Centraliza o contêiner */
    background-color: white; /* Fundo branco para o bloco de detalhes */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Sombra suave */
}

.galeria-imagens {
    flex: 1;
    min-width: 300px; /* Garante que a galeria não fique muito pequena */
    display: flex;
    flex-direction: column;
}

.imagem-principal img {
    width: 100%;
    height: auto;
    max-height: 500px; /* Limite a altura da imagem principal para que não ocupe demais */
    object-fit: contain; /* Garante que a imagem inteira seja visível */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #fdfdfd; /* Fundo claro para o espaço do object-fit */
}

.miniaturas {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto; /* Permite rolagem horizontal se houver muitas miniaturas */
    padding-bottom: 5px; /* Espaçamento para a barra de rolagem */
    justify-content: flex-start; /* Alinha miniaturas ao início */
}

.miniaturas img {
    width: 80px;
    height: 80px;
    object-fit: cover; /* Recorta miniaturas para preencher o espaço */
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.miniaturas img:hover, .miniaturas img.active {
    border-color: #ff69b4; /* Cor de destaque ao passar o mouse ou selecionar */
    transform: translateY(-2px); /* Pequeno efeito de elevação */
}

.info-produto {
    flex: 1;
    min-width: 300px; /* Garante que as informações não fiquem muito pequenas */
    padding: 0 15px; /* Padding interno para o texto */
}

.info-produto h1 {
    font-size: 2.5em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600; /* Um pouco mais negrito */
}

.info-produto .preco-detalhe {
    font-size: 1.8em;
    color: #008000; /* Verde vibrante para o preço */
    font-weight: bold;
    margin-bottom: 25px;
}

.info-produto p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #555;
}

.opcoes-variacao {
    margin-bottom: 25px;
}

.opcoes-variacao label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #444;
    font-size: 1.05em;
}

.opcoes-variacao select {
    width: 100%;
    padding: 12px 15px; /* Mais padding para o select */
    border: 1px solid #ccc;
    border-radius: 8px; /* Cantos mais arredondados */
    font-size: 1em;
    background-color: white;
    appearance: none; /* Remove estilo padrão do navegador */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M192%20320c-8.188%200-16.375-3.125-22.625-9.375L38.625%20182.625c-12.5-12.5-12.5-32.75%200-45.25s32.75-12.5%2045.25%200L192%20282.75l108.125-108.125c12.5-12.5%2032.75-12.5%2045.25%200s12.5%2032.75%200%2045.25L214.625%20310.625C208.375%20316.875%20200.188%20320%20192%20320z%22%3E%3C/path%3E%3C/svg%3E'); /* Ícone de seta para o select */
    background-repeat: no-repeat;
    background-position: right 15px center; /* Posição do ícone */
    background-size: 0.8em; /* Tamanho do ícone */
    cursor: pointer;
}

.opcoes-variacao select:focus {
    border-color: #ff69b4; /* Borda rosa ao focar */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,105,180,0.2); /* Sombra suave ao focar */
}

#estoque-info {
    font-weight: bold;
    margin-top: 10px;
    font-size: 1em;
}

.no-product-found {
    text-align: center;
    width: 100%;
    padding: 60px 0;
    font-size: 1.5em;
    color: #777;
    font-weight: 500;
    margin-top: 30px;
}

.btn-whatsapp-detalhe {
    display: inline-block;
    background-color: #25D366; /* Verde WhatsApp */
    color: white;
    padding: 15px 30px; /* Mais padding */
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em; /* Texto maior */
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-whatsapp-detalhe:hover {
    background-color: #1DA851;
    transform: translateY(-3px); /* Efeito de elevação maior no hover */
}
.btn-whatsapp-detalhe[style*="opacity: 0.5"] { /* Estilo para botão desabilitado */
    cursor: not-allowed;
}


/* --- Responsividade para a Página de Detalhes --- */
@media (max-width: 768px) {
    .detalhe-container {
        flex-direction: column; /* Empilha os blocos em telas menores */
        padding: 20px 15px;
        gap: 20px;
    }
    .galeria-imagens, .info-produto {
        min-width: unset; /* Remove min-width para permitir que se ajustem à coluna */
        width: 100%; /* Ocupa a largura total */
    }
    .imagem-principal img {
        max-height: 400px;
    }
    .miniaturas {
        justify-content: center; /* Centraliza as miniaturas em telas menores */
    }
    .info-produto h1 {
        font-size: 2em;
        text-align: center; /* Centraliza o título em telas pequenas */
    }
    .info-produto .preco-detalhe {
        font-size: 1.5em;
        text-align: center; /* Centraliza o preço em telas pequenas */
    }
    .info-produto p {
        text-align: center; /* Centraliza o texto em telas pequenas */
    }
    .opcoes-variacao {
        text-align: center; /* Centraliza label e select em telas pequenas */
    }
    .opcoes-variacao label {
        display: inline-block; /* Para centralizar com text-align */
    }
    .btn-whatsapp-detalhe {
        width: 90%; /* Botão quase na largura total */
        margin: 20px auto 10px; /* Centraliza e ajusta margem */
        display: block; /* Para que text-align: center funcione se for pai */
    }
}

/* --- Estilos para Botão Voltar e Categoria na Página de Detalhes --- */
.navegacao-detalhe {
    width: 100%; /* Ocupa a largura total */
    display: flex;
    justify-content: space-between; /* Alinha o botão à esquerda e a categoria à direita */
    align-items: center;
    margin-bottom: 30px; /* Espaço abaixo da navegação */
    padding-bottom: 15px;
    border-bottom: 1px solid #eee; /* Linha divisória sutil */
}

.btn-voltar {
    display: inline-flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    background-color: #f8f8f8; /* Cor de fundo suave */
    color: #666; /* Cor de texto discreta */
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.btn-voltar i {
    margin-right: 8px; /* Espaço entre o ícone e o texto */
    font-size: 1em;
}

.btn-voltar:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
    color: #333;
    transform: translateY(-2px); /* Pequeno efeito de elevação */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.categoria-produto {
    font-size: 1em;
    color: #666;
    font-weight: 400;
}

.categoria-produto strong {
    color: #ff69b4; /* Cor vibrante para a categoria */
    font-weight: 600;
}

/* Responsividade para o bloco de navegação */
@media (max-width: 768px) {
    .navegacao-detalhe {
        flex-direction: column; /* Empilha o botão e a categoria */
        align-items: flex-start; /* Alinha à esquerda */
        margin-bottom: 20px;
        padding-bottom: 10px;
    }
    .btn-voltar {
        width: 100%; /* Ocupa largura total em telas pequenas */
        justify-content: center; /* Centraliza o conteúdo do botão */
        margin-bottom: 10px; /* Espaço entre o botão e a categoria */
    }
    .categoria-produto {
        width: 100%;
        text-align: center; /* Centraliza a categoria */
    }
}

/* Estilos para os links sociais no cabeçalho */
.social-links {
    margin-top: 15px; /* Adiciona um espaço acima dos ícones no cabeçalho */
}

.social-links a {
    color: #ffffff; /* Define a cor dos ícones como branco */
    font-size: 1.8em; /* Aumenta um pouco o tamanho dos ícones */
    margin: 0 8px; /* Espaçamento entre os ícones */
    transition: color 0.3s ease; /* Adiciona uma transição suave para o hover */
}

.social-links a:hover {
    color: #cccccc; /* Cor mais clara ao passar o mouse para um efeito de hover */
}

/* Estilos para os links sociais no rodapé */
.social-links-footer {
    margin-top: 15px;
}

.social-links-footer a {
    color: #ffffff; /* Define a cor dos ícones como branco */
    font-size: 1.5em; /* Tamanho um pouco menor no rodapé */
    margin: 0 7px; /* Espaçamento entre os ícones */
    transition: color 0.3s ease;
}

.social-links-footer a:hover {
    color: #cccccc; /* Cor mais clara ao passar o mouse */
}

/* Estilos para os links de e-mail e URL do site no rodapé */
footer a {
    color: #ffffff; /* Define a cor do texto do link como branco */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    transition: color 0.3s ease;
}

footer a:hover {
    color: #cccccc; /* Cor mais clara ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado no hover para indicar que é um link */
}