:root {
    --ml-lilas: #FFE600;
    --ml-lilas-escuro: #2968c8;
    --ml-lilas-claro: #FFF9CC;
    --ml-lilas-hover: #FFD400;
    --ml-texto: #2c2c34;
    --ml-cinza: #6b6b76;
    --ml-borda: #e6e0f0;
    --ml-branco: #ffffff;
    --ml-verde-whats: #25d366;
    --ml-sombra: 0 2px 10px rgba(94, 59, 150, 0.10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, Arial, sans-serif;
    background: #f7f5fb;
    color: var(--ml-texto);
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

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

/* ===== TOPBAR ===== */
.ml-topbar {
    background: var(--ml-lilas);
    color: var(--ml-lilas-escuro);
    box-shadow: var(--ml-sombra);
}

.ml-topbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    flex-wrap: wrap;
}

.ml-logo-text { font-size: 20px; font-weight: 700; color: var(--ml-lilas-escuro); }

.ml-search-form {
    flex: 1;
    display: flex;
    min-width: 220px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.ml-search-form input {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.ml-search-form button {
    background: var(--ml-lilas-claro);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    font-size: 16px;
}

.ml-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ml-link { color: var(--ml-lilas-escuro); font-size: 14px; opacity: 0.85; }
.ml-link:hover { opacity: 1; text-decoration: underline; }

.ml-btn-anunciar {
    background: var(--ml-lilas-escuro);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}
.ml-btn-anunciar:hover { background: #163b7a; }

.ml-btn-outline {
    background: transparent;
    border: 2px solid var(--ml-lilas-escuro);
    color: var(--ml-lilas-escuro);
}

.ml-categorias-nav {
    background: var(--ml-lilas-escuro);
}

.ml-categorias-scroll {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 10px 20px;
}

.ml-categorias-scroll a {
    color: #f1e9fc;
    font-size: 13px;
    white-space: nowrap;
}
.ml-categorias-scroll a:hover { color: #fff; text-decoration: underline; }

/* ===== HERO ===== */
.ml-hero {
    background: var(--ml-lilas-escuro);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.ml-hero h1 { font-size: 34px; margin: 0 0 10px; }
.ml-hero p { font-size: 16px; opacity: 0.92; margin: 0 0 26px; }
.ml-btn-hero {
    display: inline-block;
    background: var(--ml-lilas);
    color: var(--ml-lilas-escuro);
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
}
.ml-btn-hero:hover { background: var(--ml-lilas-hover); }

/* ===== TÍTULOS DE SEÇÃO ===== */
.ml-section-title {
    font-size: 22px;
    margin: 40px 0 20px;
    color: var(--ml-lilas-escuro);
}

/* ===== CATEGORIAS GRID ===== */
.ml-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}
.ml-cat-card {
    background: #fff;
    border: 1px solid var(--ml-borda);
    border-radius: 10px;
    padding: 20px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ml-texto);
    transition: transform .15s, box-shadow .15s;
}
.ml-cat-card:hover { transform: translateY(-3px); box-shadow: var(--ml-sombra); border-color: var(--ml-lilas); }
.ml-cat-icon { display: block; font-size: 30px; margin-bottom: 8px; }

/* ===== GRID DE PRODUTOS / CARDS ===== */
.ml-produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.ml-card {
    background: #fff;
    border: 1px solid var(--ml-borda);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.ml-card:hover { transform: translateY(-4px); box-shadow: var(--ml-sombra); }

.ml-card-img { position: relative; aspect-ratio: 4/3; background: var(--ml-lilas-claro); overflow: hidden; }
.ml-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ml-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--ml-lilas-escuro); }

.ml-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--ml-lilas-escuro);
    color: #fff;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
}

.ml-card-body { padding: 12px 14px; }
.ml-card-preco { display: block; font-size: 17px; font-weight: 700; color: var(--ml-lilas-escuro); }
.ml-card-titulo { font-size: 14px; margin: 4px 0; font-weight: 500; color: var(--ml-texto); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-card-local { font-size: 12px; color: var(--ml-cinza); }

.ml-vazio { color: var(--ml-cinza); padding: 20px 0; }

/* ===== ARCHIVE / CATEGORIA ===== */
.ml-archive-wrap { display: flex; gap: 30px; align-items: flex-start; padding-top: 20px; }
.ml-sidebar { width: 220px; flex-shrink: 0; background: #fff; border: 1px solid var(--ml-borda); border-radius: 10px; padding: 18px; }
.ml-sidebar h3 { margin-top: 0; color: var(--ml-lilas-escuro); font-size: 15px; }
.ml-sidebar-lista { list-style: none; margin: 0; padding: 0; }
.ml-sidebar-lista li { padding: 8px 0; border-bottom: 1px solid var(--ml-borda); font-size: 14px; }
.ml-sidebar-lista li:last-child { border-bottom: none; }
.ml-sidebar-lista a:hover { color: var(--ml-lilas-escuro); }
.ml-sidebar-lista li.ml-ativo a { color: var(--ml-lilas-escuro); font-weight: 700; }
.ml-archive-conteudo { flex: 1; min-width: 0; }

.ml-paginacao { display: flex; gap: 8px; padding: 20px 0 50px; }
.ml-paginacao .page-numbers { padding: 8px 14px; background: #fff; border: 1px solid var(--ml-borda); border-radius: 6px; }
.ml-paginacao .page-numbers.current { background: var(--ml-lilas-escuro); color: #fff; border-color: var(--ml-lilas-escuro); }

/* ===== PÁGINA DO ANÚNCIO (SINGLE) ===== */
.ml-single-wrap { display: flex; gap: 40px; padding: 30px 20px 60px; flex-wrap: wrap; }
.ml-single-galeria { flex: 1 1 480px; }
.ml-galeria-principal { border-radius: 12px; overflow: hidden; background: var(--ml-lilas-claro); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.ml-galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.ml-sem-foto { color: var(--ml-lilas-escuro); font-size: 40px; }
.ml-galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.ml-miniatura { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; }
.ml-miniatura:hover { border-color: var(--ml-lilas); }

.ml-single-info { flex: 1 1 320px; }
.ml-single-categoria { color: var(--ml-lilas-escuro); font-size: 13px; font-weight: 600; text-transform: uppercase; }
.ml-single-titulo { font-size: 26px; margin: 6px 0 10px; }
.ml-single-preco { font-size: 30px; font-weight: 700; color: var(--ml-lilas-escuro); margin-bottom: 16px; }
.ml-single-meta { list-style: none; padding: 0; margin: 0 0 20px; font-size: 14px; }
.ml-single-meta li { padding: 6px 0; border-bottom: 1px solid var(--ml-borda); }

.ml-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ml-verde-whats);
    color: #fff;
    padding: 14px 22px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 24px;
}
.ml-btn-whatsapp:hover { background: #1eb857; }

.ml-single-descricao h3 { color: var(--ml-lilas-escuro); font-size: 16px; }

/* ===== FORMULÁRIO ANUNCIAR / MEUS ANÚNCIOS ===== */
.ml-form-wrap { padding: 20px 20px 60px; max-width: 700px; margin: 0 auto; }
.ml-aviso { background: #fff; border: 1px solid var(--ml-borda); border-radius: 10px; padding: 30px; text-align: center; }
.ml-aviso .ml-btn-anunciar { margin: 6px; display: inline-block; }
.ml-erro { background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }

.ml-form-anuncio { background: #fff; border: 1px solid var(--ml-borda); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.ml-form-anuncio label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ml-texto); }
.ml-form-anuncio input, .ml-form-anuncio select, .ml-form-anuncio textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ml-borda);
    border-radius: 6px;
    font-weight: 400;
    outline: none;
}
.ml-form-anuncio input:focus, .ml-form-anuncio select:focus, .ml-form-anuncio textarea:focus { border-color: var(--ml-lilas); }
.ml-form-linha { display: flex; gap: 16px; }
.ml-form-linha label { flex: 1; }
.ml-form-anuncio button { align-self: flex-start; margin-top: 10px; }

.ml-tabela-anuncios { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.ml-tabela-anuncios th, .ml-tabela-anuncios td { padding: 12px 14px; border-bottom: 1px solid var(--ml-borda); text-align: left; font-size: 14px; }
.ml-tabela-anuncios th { background: var(--ml-lilas-claro); color: var(--ml-lilas-escuro); }

/* ===== LOGIN / CADASTRO ===== */
.ml-login-tabs { display: flex; gap: 6px; margin-top: 20px; }
.ml-login-tabs a {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--ml-borda);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--ml-cinza);
}
.ml-login-tabs a.ml-tab-ativa { color: var(--ml-lilas-escuro); background: var(--ml-lilas-claro); }
.ml-login-troca { text-align: center; margin-top: 16px; font-size: 14px; color: var(--ml-cinza); }
.ml-login-troca a { color: var(--ml-lilas-escuro); font-weight: 600; }

.ml-login-embutido { background: #fff; border: 1px solid var(--ml-borda); border-radius: 12px; padding: 28px; }
.ml-login-intro { margin-top: 0; color: var(--ml-cinza); font-size: 14px; }
.ml-login-embutido .ml-login-tabs { margin-top: 0; }
.ml-login-painel { display: none; padding-top: 20px; }
.ml-login-painel.ml-painel-ativo { display: block; }
.ml-login-embutido .ml-form-anuncio { border: none; padding: 0; }

/* ===== PÁGINA SIMPLES / 404 ===== */
.ml-pagina-simples { padding: 30px 20px 60px; max-width: 800px; margin: 0 auto; }
.ml-404 { text-align: center; padding: 80px 20px; }
.ml-404 h1 { font-size: 60px; color: var(--ml-lilas-escuro); margin: 0; }

/* ===== RODAPÉ ===== */
.ml-footer { background: var(--ml-lilas-escuro); color: #e8f0fc; margin-top: 40px; }
.ml-footer-inner { display: flex; gap: 40px; flex-wrap: wrap; padding: 40px 20px; }
.ml-footer-col { flex: 1; min-width: 180px; }
.ml-footer-col h4 { color: #fff; margin-top: 0; }
.ml-footer-col a { display: block; font-size: 13px; opacity: 0.85; padding: 4px 0; }
.ml-footer-col a:hover { opacity: 1; text-decoration: underline; }
.ml-footer-bottom { background: #163b7a; text-align: center; padding: 14px 20px; font-size: 12px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
    .ml-topbar-inner { flex-direction: column; align-items: stretch; }
    .ml-topbar-actions { justify-content: center; }
    .ml-archive-wrap { flex-direction: column; }
    .ml-sidebar { width: 100%; }
    .ml-single-wrap { flex-direction: column; }
    .ml-form-linha { flex-direction: column; }
    .ml-hero h1 { font-size: 26px; }
}