:root {
    /* Identidade: preto/tecnológico como base + dourado (perfumaria) e ciano (impressão 3D) como acentos */
    --cor-primaria: #17171b;
    --cor-primaria-escura: #000000;
    --cor-acento: #c9a24d;
    --cor-acento-escuro: #a3801f;
    --cor-acento-3d: #00b8d4;
    --cor-acento-3d-escuro: #008fa6;
    --cor-secundaria: #c9a24d;
    --cor-texto: #17171b;
    --cor-texto-suave: #6b6970;
    --cor-fundo: #fafafa;
    --cor-borda: #e6e5e9;
    --cor-sucesso: #1f9d55;
    --cor-erro: #d64545;
    --sombra: 0 2px 10px rgba(0, 0, 0, 0.08);
    --raio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.5;
}

a { color: var(--cor-acento-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------- Cabeçalho ---------- */
.topo { background: #fff; border-bottom: 1px solid var(--cor-borda); position: sticky; top: 0; z-index: 20; }
.topo-conteudo { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
.logo { display: flex; align-items: center; }
.logo:hover { text-decoration: none; }
.logo-imagem { height: 48px; width: auto; display: block; }

.menu { display: flex; align-items: center; gap: 24px; }
.menu a { color: var(--cor-texto); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; position: relative; }
.menu a.ativo, .menu a:hover { color: var(--cor-acento-escuro); text-decoration: none; }
.carrinho-link { display: flex; align-items: center; gap: 4px; }
.badge-carrinho {
    background: var(--cor-acento); color: #17171b; font-size: 0.72rem; font-weight: 700;
    border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; }

/* ---------- Conteúdo geral ---------- */
.conteudo-principal { padding: 30px 20px 60px; min-height: 60vh; }
.titulo-pagina { margin-bottom: 24px; }

.titulo-secao-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.mensagem-vazio { color: var(--cor-texto-suave); padding: 30px 0; }
.mensagem-erro { background: #fdecec; color: var(--cor-erro); padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; }
.mensagem-sucesso { background: #e9f9ee; color: var(--cor-sucesso); padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; }

/* ---------- Hero / Home ---------- */
.hero { text-align: center; padding: 44px 0 22px; }
.hero h1 { font-size: 2.1rem; margin-bottom: 8px; letter-spacing: 0.01em; }
.hero p { color: var(--cor-texto-suave); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.08em; }

.secoes-home { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0 50px; }
.cartao-secao {
    padding: 50px 30px; border-radius: var(--raio); text-align: center; color: #fff;
    box-shadow: var(--sombra); transition: transform .15s ease;
    position: relative; overflow: hidden;
}
.cartao-secao:hover { transform: translateY(-3px); text-decoration: none; }
.cartao-secao h2 { margin: 0 0 6px; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cartao-secao p { margin: 0; opacity: .85; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; }
.cartao-perfumaria { background: linear-gradient(135deg, #17171b 40%, #a3801f 130%); }
.cartao-3d { background: linear-gradient(135deg, #0b0f11 40%, #00b8d4 130%); }

/* ---------- Etiqueta de categoria nos cartões de produto ---------- */
.etiqueta-categoria {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
}
.etiqueta-categoria-perfumaria { background: rgba(23, 23, 27, 0.85); border: 1px solid var(--cor-acento); }
.etiqueta-categoria-impressao_3d { background: rgba(11, 15, 17, 0.85); border: 1px solid var(--cor-acento-3d); }

/* ---------- Grade de produtos ---------- */
.lista-produtos-secao { margin-bottom: 50px; }
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.cartao-produto {
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    overflow: hidden; transition: box-shadow .15s ease;
}
.cartao-produto:hover { box-shadow: var(--sombra); }
.cartao-produto-link { color: inherit; display: block; padding-bottom: 14px; }
.cartao-produto-link:hover { text-decoration: none; }
.cartao-produto-imagem { aspect-ratio: 1 / 1; background: #f1f0f5; overflow: hidden; position: relative; }
.cartao-produto-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-produto h3 { font-size: 0.98rem; margin: 12px 14px 4px; }
.cartao-produto .preco { margin: 0 14px; font-weight: 700; color: var(--cor-acento-escuro); }
.fora-de-estoque, .fora-de-estoque-aviso { color: var(--cor-erro); font-size: 0.85rem; margin: 4px 14px 0; }

/* ---------- Página de produto ---------- */
.trilha { color: var(--cor-texto-suave); font-size: 0.9rem; margin-bottom: 18px; }
.pagina-produto { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pagina-produto-imagem img { width: 100%; border-radius: var(--raio); background: #f1f0f5; }
.preco-grande { font-size: 1.7rem; font-weight: 700; color: var(--cor-acento-escuro); margin: 8px 0 20px; }
.descricao-produto { margin-bottom: 24px; color: var(--cor-texto); }
.form-adicionar-carrinho { display: flex; align-items: flex-end; gap: 12px; }
.form-adicionar-carrinho label { font-size: 0.85rem; color: var(--cor-texto-suave); }
.form-adicionar-carrinho input[type=number] { width: 70px; padding: 8px; border: 1px solid var(--cor-borda); border-radius: 6px; display: block; margin-top: 4px; }

/* ---------- Botões ---------- */
.botao {
    display: inline-block; padding: 11px 22px; border-radius: 8px; font-weight: 600;
    border: none; cursor: pointer; text-align: center;
}
.botao:hover { text-decoration: none; }
.botao-primario { background: var(--cor-primaria); color: #fff; }
.botao-primario:hover { background: var(--cor-primaria-escura); }
.botao-secundario { background: #fff; color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.botao-grande { width: 100%; font-size: 1.05rem; padding: 14px; }
.botao-link { background: none; border: none; color: var(--cor-acento-escuro); cursor: pointer; padding: 0; font: inherit; }
.botao-link-perigo { color: var(--cor-erro); }
.botao-remover { background: none; border: none; color: var(--cor-erro); font-size: 1.3rem; cursor: pointer; }

/* ---------- Carrinho ---------- */
.tabela-carrinho { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.linha-carrinho {
    display: grid; grid-template-columns: 70px 1fr 140px 100px 40px; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 12px;
}
.linha-carrinho-imagem { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; background: #f1f0f5; }
.linha-carrinho-info { display: flex; flex-direction: column; }
.linha-carrinho-preco-unit { color: var(--cor-texto-suave); font-size: 0.85rem; }
.linha-carrinho-quantidade input { width: 60px; padding: 6px; border: 1px solid var(--cor-borda); border-radius: 6px; }
.linha-carrinho-subtotal { font-weight: 700; text-align: right; }

.resumo-carrinho {
    display: flex; justify-content: space-between; font-size: 1.2rem; padding: 16px 0;
    border-top: 2px solid var(--cor-borda);
}
.acoes-carrinho { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* ---------- Checkout ---------- */
.pagina-checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.formulario-checkout, .formulario-admin { display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 24px; border-radius: var(--raio); border: 1px solid var(--cor-borda); }
.formulario-checkout label, .formulario-admin label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--cor-texto-suave); }
.formulario-checkout input, .formulario-checkout textarea, .formulario-checkout select,
.formulario-admin input, .formulario-admin textarea, .formulario-admin select {
    padding: 10px 12px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; color: var(--cor-texto);
}
.linha-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.campo-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }

.resumo-pedido { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 20px; }
.resumo-pedido-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); font-size: 0.9rem; }
.resumo-pedido-total { display: flex; justify-content: space-between; padding-top: 14px; font-size: 1.1rem; }

/* ---------- Páginas de retorno ---------- */
.pagina-retorno { text-align: center; padding: 60px 20px; max-width: 500px; margin: 0 auto; }
.pagina-retorno h1 { margin-bottom: 12px; }
.pagina-retorno p { color: var(--cor-texto-suave); margin-bottom: 20px; }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--cor-borda); padding: 24px 0; margin-top: 40px; color: var(--cor-texto-suave); font-size: 0.85rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 780px) {
    .menu-toggle { display: block; }
    .menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 14px;
        border-bottom: 1px solid var(--cor-borda);
    }
    .menu.aberto { display: flex; }
    .secoes-home, .pagina-produto, .pagina-checkout { grid-template-columns: 1fr; }
    .linha-carrinho { grid-template-columns: 60px 1fr; grid-template-areas: "img info" "img qtd" "img sub" "img rem"; }
    .linha-form { grid-template-columns: 1fr; }
}