/* ARQUIVO: Padrinhos/css/padrinhos.css */

/* ... (Variáveis mantidas do arquivo anterior) ... */
:root {
    --card-glass-bg-padrinhos: rgba(0, 0, 0, 0.75); 
    --filter-active-bg: var(--mountbatten-pink);
    --filter-active-text: var(--white-ish);
    --filter-hover-bg: var(--dim-gray);
    --filter-hover-text: var(--white-ish);
    --filter-menu-bg-desktop: var(--timberwolf);
    --filter-menu-bg-mobile: rgba(86, 82, 100, 0.95);
    --white-ish: #f7f6f5;
    --header-height-desktop: 70px;
    --header-height-mobile: 110px;
    --davy-gray: #565264;
    --dim-gray: #706677;
    --mountbatten-pink: #a6808c;
    --pale-dogwood: #ccb7ae;
    --timberwolf: #d6cfcb;
    --bg-card: transparent; 
    --bg-main: white; 
    --payment-area: #9db89c; 
    --text-primary: var(--davy-gray);
    --text-secondary: var(--dim-gray);
    --button-primary-bg: var(--mountbatten-pink);
    --button-primary-hover: var(--dim-gray);
    --button-primary-text: var(--white-ish);
    --isabelline: #F6F2EE; 
}

body.filtro-aberto { overflow: hidden; }

/* ... (Estilos do Botão Filtro e Menu Lateral mantidos iguais) ... */
.filtro-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background-color: #ae9f8b; color: var(--button-primary-text); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin: 0; z-index: 102; position: relative;
}
.filtro-toggle-btn:hover { background-color: var(--button-primary-hover); }
.filtro-toggle-btn:hover .hamburger-icon span { background-color: var(--button-primary-text); }
.hamburger-icon { width: 18px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: opacity 0.3s ease; }
.hamburger-icon span { display: block; width: 100%; height: 2px; background-color: var(--button-primary-text); border-radius: 1px; transition: all 0.3s ease-in-out; }
.filtro-toggle-btn.open .hamburger-icon span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.filtro-toggle-btn.open .hamburger-icon span:nth-child(2) { opacity: 0; }
.filtro-toggle-btn.open .hamburger-icon span:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); }
.filtro-toggle-btn.open .hamburger-icon { display: none; }

.filtro-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(5px); z-index: 104; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.filtro-overlay.open { opacity: 1; visibility: visible; }
.filtro-container { position: fixed; left: 0; top: 7%; height: 75vh; width: 90%; max-width: 400px; background-color: rgb(255, 255, 255); padding: 50px 30px 30px 30px; border-radius: 0 16px 16px 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(86, 82, 100, 0.1); z-index: 104; display: flex; flex-direction: column; gap: 20px; transform: translateX(-100%); visibility: hidden; transition: transform 0.3s ease-in-out; overflow-y: auto; }
.filtro-container.open { transform: translateX(0); visibility: visible; }
.filtro-close-btn { position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 32px; color: var(--text-secondary); cursor: pointer; line-height: 1; padding: 5px; }
.filtro-close-btn:hover { color: var(--text-primary); }
.filtro-container h2 { font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--text-secondary); margin: 0 0 10px 0; text-align: center; font-weight: normal; }
.filtro-container .filtros-produtos { justify-content: flex-start; margin-bottom: 0; gap: 10px; display: flex; flex-wrap: wrap; }
.filtro-container .filtros-produtos h4 { font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--text-secondary); margin: 0 0 10px 0; width: 100%; text-align: left; font-weight: normal; }
.filtro-container .filtro-btn { padding: 8px 16px; background-color: var(--isabelline); border: 1px solid var(--pale-dogwood); color: var(--text-secondary); cursor: pointer; border-radius: 5px; font-size: 13px; transition: all 0.3s ease; font-family: 'Montserrat', sans-serif; margin-bottom: 10px; }
.filtro-container .filtro-btn:hover { background-color: var(--filter-hover-bg); color: var(--filter-hover-text); border-color: transparent; }
.filtro-container .filtro-btn.active { background-color: var(--filter-active-bg); border-color: transparent; color: var(--filter-active-text); }


/* === LAYOUT E GRID RESPONSIVO (A MÁGICA ACONTECE AQUI) === */
.secao-produtos {
    padding: 20px 4%; /* Margem lateral dinâmica */
    max-width: 1400px; /* Limite para telas gigantes */
    margin: 0 auto; /* Centraliza a seção no monitor */
}
main.conteudo-principal { box-sizing: border-box; }

.header-botoes-wrapper { display: flex; align-items: center; gap: 15px; }
.header-botoes-wrapper .navegacao { order: 1; }
.header-botoes-wrapper .filtro-toggle-btn { order: 2; margin: 0; }

.lista-produtos {
    display: grid;
    /* GRID FLUIDO: Cria colunas de no mínimo 280px e divide o espaço restante */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* CARDS */
.produto-card {
    background-color: var(--bg-card);
    border: none;
    border-radius: 12px;
    padding: 15px;
    width: 100%;
    /* Centraliza o card se ele for menor que a coluna (opcional) */
    max-width: 400px; 
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.produto-card:hover { transform: translateY(-5px); background-color: var(--bg-main); }
.produto-titulo { font-family: 'Montserrat'; font-size: 15px; color: var(--text-primary); text-align: center; font-weight: 500; }
.preco-total { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.pagamento { font-family: 'Montserrat', sans-serif; font-size: 13px; color: white; padding: 4px 10px; border: none; background-color: var(--payment-area); border-radius: 5px; transition: all 0.3s; }
.btn-comprar { width: 100%; padding: 14px 0; margin-top: 15px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 0px; text-decoration: none; display: flex; align-items: center; justify-content: center; color: rgb(235, 235, 235); background-color: rgb(160, 177, 161); border-radius: 10px; transition: all 0.3s ease; }
.btn-comprar:hover { background-color: #7cdd8c; color: rgb(255, 255, 255); font-size: 17px; transform: translateY(-3px); }

/* Carrossel */
.carousel-container { width: 100%; overflow: hidden; border-radius: 10px; margin-bottom: 12px; position: relative; aspect-ratio: 3 / 4; }
.carousel-track { display: flex; transition: transform 0.3s ease-in-out; }
.carousel-image { width: 100%; height: 100%; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.info-preco-pagamento { margin: 10px 0; text-align: center; }
.metodos-pagamento { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.prev-button, .next-button { position: absolute; top: 90%; transform: translateY(-50%); z-index: 1; background: rgba(255, 255, 255, 0.9); border: none; cursor: pointer; padding: 6px 12px; border-radius: 50%; font-size: 18px; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.carousel-container:hover .prev-button, .carousel-container:hover .next-button { opacity: 1; visibility: visible; }
.prev-button { left: 10px; }
.next-button { right: 10px; }
@media (min-width: 769px) { [data-prev-button], [data-next-button] { display: none !important; } }

/* === MOBILE & TABLET === */
@media (max-width: 768px) {
    .secao-produtos { padding: 10px 10px 20px 10px; }
    .header-botoes-wrapper { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 15px; }
    .cabecalho .navegacao { margin-top: 0; width: auto; justify-content: flex-end; }
    .filtro-toggle-btn { margin: 0; }

    /* Força 2 colunas no mobile, mas com grid-gap menor */
    .lista-produtos {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    
    /* Proteção para telas MUITO pequenas (ex: Galaxy Fold fechado) */
    @media (max-width: 350px) {
        .lista-produtos { grid-template-columns: 1fr; }
    }

    /* Ajuste do menu lateral mobile */
    .filtro-container { width: 80%; max-width: 230px; padding: 50px 20px 20px 20px; }
    
    .carousel-track { display: block; }
    .carousel-image { display: none; }
    .carousel-image:first-child { display: block; }
    .prev-button, .next-button { display: none !important; }
    
    .produto-card { background-color: rgb(230, 229, 229); border-radius: 0px; padding: 10px; margin: 0; max-width: none; }
    .produto-card:hover { background-color: rgb(221, 218, 215); }

    .produto-titulo { font-size: 14px; margin: 5px 0; min-height: 40px; display: flex; align-items: center; justify-content: center; }
    .preco-total { font-size: 16px; }
    .btn-comprar { font-size: 14px; padding: 10px 0; margin-top: 10px; }
}

.mensagem-vazia { text-align: center; font-size: 1.6rem; color: var(--text-secondary); font-family: 'Montserrat', sans-serif; font-weight: 500; width: 100%; margin: 0; padding: 20px; }

/* PAGINAÇÃO */
.paginacao-container { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; flex-wrap: wrap; }
.paginacao-topo { margin-top: 10px; margin-bottom: 30px; }
.paginacao-rodape { margin-top: 40px; }
.paginacao-btn { padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; color: var(--button-primary-text); background-color: #929e88; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
.paginacao-btn:hover:not(:disabled) { background-color: #7cdd8c; transform: translateY(-2px); }
.paginacao-btn:disabled { background-color: var(--timberwolf); cursor: not-allowed; opacity: 0.7; }
.paginacao-info { font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--text-secondary); font-weight: 500; }

/* ARQUIVO: Padrinhos/css/padrinhos.css */

/* === MOBILE & TABLET === */
@media (max-width: 768px) {
    .secao-produtos { padding: 10px 10px 20px 10px; }
    .header-botoes-wrapper { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 15px; }
    .cabecalho .navegacao { margin-top: 0; width: auto; justify-content: flex-end; }
    .filtro-toggle-btn { margin: 0; }

    .lista-produtos {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    
    @media (max-width: 350px) {
        .lista-produtos { grid-template-columns: 1fr; }
    }

    .filtro-container { width: 80%; max-width: 230px; padding: 50px 20px 20px 20px; }
    
    .carousel-track { display: block; }
    .carousel-image { display: none; }
    .carousel-image:first-child { display: block; }
    .prev-button, .next-button { display: none !important; }
    
    .produto-card { 
        background-color: rgb(255, 255, 255); 
        border-radius: 0px; 
        padding: 10px; 
        margin: 0; 
        max-width: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        /* CORREÇÃO DO ERRO DE CLIQUE: */
        transition: none !important; 
    }
    
    /* IMPORTANTE: Remove o "pulo" no mobile para o clique ser imediato */
    .produto-card:hover { 
        transform: none !important; 
        background-color: rgb(221, 218, 215); 
    }

    .produto-titulo { font-size: 14px; margin: 5px 0; min-height: 40px; display: flex; align-items: center; justify-content: center; }
    .preco-total { font-size: 16px; }

    .btn-comprar { 
        display: none !important; 
    }
}