/* =====================================================================
   Daysi Moda & Beleza — estilo próprio (sem Bootstrap/Tailwind)
   Mobile-first. Paleta: preto, dourado metálico, rosa de acento.
   Tipografia: sem web fonts externas (site precisa funcionar rápido em
   4G) — usamos a stack do sistema em peso pesado + caixa alta pra imitar
   uma condensada de destaque nos títulos.
   ===================================================================== */

:root {
    --preto: #121212;
    --preto-suave: #1f1f1f;
    --dourado: #c9a227;
    --dourado-claro: #e2c869;
    --rosa: #e6007e;
    --rosa-escuro: #b8005f;
    --branco: #ffffff;
    --fundo-claro: #faf8f5;
    --fundo-card: #ffffff;
    --texto: #1a1a1a;
    --texto-suave: #5c5c5c;
    --borda: #e4e0d8;
    --erro: #c0392b;
    --sucesso: #2f7d4f;

    --fonte-titulo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Arial Narrow", Arial, sans-serif;
    --fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --raio: 6px;
    --sombra: 0 2px 10px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    color: var(--texto);
    background: var(--fundo-claro);
    line-height: 1.5;
}

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

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
    color: var(--preto);
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

.site-main { max-width: 1200px; margin: 0 auto; padding: 1rem; min-height: 60vh; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.botao {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
    padding: 0.75rem 1.4rem;
    border-radius: var(--raio);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
}
.botao--primario { background: var(--rosa); color: var(--branco); }
.botao--primario:hover { background: var(--rosa-escuro); }
.botao--secundario { background: transparent; color: var(--preto); border-color: var(--preto); }
.botao--secundario:hover { background: var(--preto); color: var(--branco); }
.botao--perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao--perigo:hover { background: var(--erro); color: var(--branco); }
.botao--grande { padding: 1rem 2rem; font-size: 1rem; width: 100%; }
.botao--pequeno { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
button.botao { font-family: var(--fonte-titulo); }

/* ---------------------------------------------------------------------
   Header / navegação (preto + dourado)
   --------------------------------------------------------------------- */
.site-header {
    background: var(--preto);
    color: var(--dourado);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
}
.logo { display: block; line-height: 0; }
.logo img { height: 40px; width: auto; display: block; }

.menu-toggle {
    background: none;
    border: none;
    width: 32px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--dourado); border-radius: 2px; }

.carrinho-link { position: relative; font-size: 1.3rem; color: var(--dourado); }
.carrinho-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--rosa);
    color: var(--branco);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.site-nav {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: var(--preto-suave);
}
.site-nav.aberto { max-height: 300px; }
.site-nav a {
    color: var(--branco);
    padding: 0.85rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.site-nav a:hover, .site-nav a.ativo { color: var(--rosa); }

@media (min-width: 768px) {
    .menu-toggle { display: none; }
    .site-nav {
        flex-direction: row;
        max-height: none;
        overflow: visible;
        justify-content: center;
        background: var(--preto);
    }
    .site-nav a { border-top: none; padding: 0.6rem 1rem; }
}

/* ---------------------------------------------------------------------
   Rodapé (preto + dourado)
   --------------------------------------------------------------------- */
.site-footer {
    background: var(--preto);
    color: var(--dourado-claro);
    margin-top: 3rem;
    padding: 2rem 1rem;
    text-align: center;
}
.site-footer a { color: var(--dourado); }
.site-footer a:hover { color: var(--rosa); }
.site-footer__nome { color: var(--dourado); font-family: var(--fonte-titulo); text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Hero / atalhos categoria (fundo claro)
   --------------------------------------------------------------------- */
.hero { text-align: center; padding: 2rem 1rem; }
.hero h1 { font-size: 2rem; }
.hero__texto { color: var(--texto-suave); max-width: 40em; margin: 0 auto 1.2rem; }

.atalhos-categoria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.atalho-categoria {
    background: var(--preto);
    color: var(--dourado);
    text-align: center;
    padding: 1.2rem 0.5rem;
    border-radius: var(--raio);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 3px solid var(--rosa);
}

/* ---------------------------------------------------------------------
   Grid de produtos (fundo claro sempre)
   --------------------------------------------------------------------- */
.secao-produtos { margin: 2rem 0; }
.grid-produtos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 600px) { .grid-produtos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-produtos { grid-template-columns: repeat(4, 1fr); } }

.produto-card {
    background: var(--fundo-card);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
    display: block;
}
.produto-card__imagem { position: relative; aspect-ratio: 9 / 16; background: #f1efe9; overflow: hidden; }
.produto-card__imagem img { width: 100%; height: 100%; object-fit: cover; }
.produto-card--esgotado .produto-card__imagem img { opacity: 0.5; }
.produto-card__info { padding: 0.7rem 0.8rem 0.9rem; }
.produto-card__categoria { font-size: 0.68rem; color: var(--rosa); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }
.produto-card__nome { font-family: var(--fonte-corpo); font-weight: 600; font-size: 0.9rem; margin: 0.2rem 0 0.4rem; color: var(--texto); text-transform: none; }
.produto-card__preco { font-family: var(--fonte-titulo); font-weight: 800; }
.preco-atual { color: var(--preto); }
.preco-antigo { color: var(--texto-suave); text-decoration: line-through; font-size: 0.8rem; font-weight: 400; margin-right: 0.4rem; }

.selo {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
    color: var(--branco);
}
.selo--esgotado { background: var(--preto); }
.selo--promo { background: var(--rosa); }

/* ---------------------------------------------------------------------
   Catálogo (filtros, paginação)
   --------------------------------------------------------------------- */
.catalogo-topo { margin-bottom: 1.2rem; }
.catalogo-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0;
}
.catalogo-filtros input[type="search"] { flex: 1 1 200px; }
.catalogo-categorias { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.catalogo-categorias a {
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    border: 1px solid var(--borda);
    font-size: 0.8rem;
    font-weight: 600;
}
.catalogo-categorias a.ativo { background: var(--preto); color: var(--dourado); border-color: var(--preto); }

.paginacao { display: flex; gap: 0.4rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap; }
.paginacao a { padding: 0.4rem 0.75rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.paginacao a.ativo { background: var(--rosa); color: var(--branco); border-color: var(--rosa); }

.mensagem-vazio { text-align: center; padding: 3rem 1rem; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: 0.85rem; margin: 0.9rem 0 0.3rem; }
input, select, textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    background: var(--branco);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rosa); outline-offset: 1px; }
.form-checkbox { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.form-checkbox input { width: auto; }
.form-linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-linha > div, .form-linha > label { flex: 1 1 200px; }

.flash { padding: 0.8rem 1rem; border-radius: var(--raio); margin: 1rem 0; font-weight: 600; }
.flash--sucesso { background: #e7f5ec; color: var(--sucesso); }
.flash--erro { background: #fbe9e7; color: var(--erro); }

/* ---------------------------------------------------------------------
   Produto — detalhe
   --------------------------------------------------------------------- */
.trilha { font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 1rem; }
.produto-detalhe { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .produto-detalhe { grid-template-columns: 1fr 1fr; } }
.produto-detalhe__galeria { max-width: 420px; margin: 0 auto; }
.galeria-principal img, .galeria-principal { border-radius: var(--raio); overflow: hidden; background: #f1efe9; aspect-ratio: 9/16; object-fit: cover; width: 100%; }
.galeria-miniaturas { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.galeria-miniatura { border: 2px solid transparent; border-radius: 4px; overflow: hidden; padding: 0; width: 60px; height: 60px; background: none; cursor: pointer; }
.galeria-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.produto-detalhe__preco { font-size: 1.4rem; margin: 0.6rem 0; }
.produto-detalhe__descricao { color: var(--texto-suave); white-space: pre-line; }
.form-adicionar-carrinho { max-width: 320px; }
.estoque-info { font-size: 0.8rem; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Carrinho
   --------------------------------------------------------------------- */
.carrinho-tabela { display: flex; flex-direction: column; gap: 0.8rem; margin: 1rem 0; }
.carrinho-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    background: var(--fundo-card);
    padding: 0.9rem;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    align-items: center;
}
@media (min-width: 640px) {
    .carrinho-item { grid-template-columns: 2fr 1fr 1fr auto; }
}
.carrinho-item__preco-unit { display: block; font-size: 0.78rem; color: var(--texto-suave); }
.carrinho-item__quantidade { display: flex; gap: 0.4rem; align-items: center; }
.carrinho-item__quantidade input { width: 4.5rem; }
.carrinho-item__subtotal { font-weight: 700; }
.carrinho-item__remover { background: none; border: none; color: var(--erro); font-weight: 600; cursor: pointer; text-align: left; padding: 0; }
.carrinho-total { text-align: right; font-size: 1.2rem; margin: 1rem 0; }
.resumo-pedido { background: var(--fundo-card); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); margin: 1rem 0; }
.resumo-item { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--borda); font-size: 0.9rem; }
.resumo-total { text-align: right; padding-top: 0.6rem; font-size: 1.1rem; }

.form-finalizar { max-width: 420px; }
.confirmacao { text-align: center; max-width: 480px; margin: 0 auto; }
.confirmacao__codigo { font-size: 1.3rem; font-family: var(--fonte-titulo); }

/* ---------------------------------------------------------------------
   Admin — login
   --------------------------------------------------------------------- */
.admin-login-body { background: var(--preto); min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; }
.admin-login { background: var(--preto-suave); padding: 2rem; border-radius: var(--raio); width: 90%; max-width: 340px; text-align: center; }
.admin-login__logo { width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.admin-login__subtitulo { color: var(--branco); opacity: 0.7; margin: 0.6rem 0 1.2rem; font-size: 0.85rem; }
.admin-login__form { text-align: left; }
.admin-login label { color: var(--branco); }

/* ---------------------------------------------------------------------
   Admin — layout geral
   --------------------------------------------------------------------- */
.admin-body { margin: 0; background: var(--fundo-claro); }
.admin-topbar {
    background: var(--preto);
    color: var(--dourado);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.logo--admin { display: flex; align-items: center; gap: 0.5rem; }
.logo--admin img { height: 32px; }
.logo--admin__rotulo { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 0.75rem; color: var(--dourado-claro); letter-spacing: 0.1em; }
.admin-topbar__usuario { color: var(--dourado-claro); font-size: 0.8rem; display: none; }
@media (min-width: 768px) { .admin-topbar__usuario { display: inline; } }

.admin-sidebar {
    background: var(--preto-suave);
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.admin-sidebar.aberto { max-height: 400px; }
.admin-sidebar a { color: var(--branco); padding: 0.9rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; font-size: 0.9rem; }
.admin-sidebar a.ativo { color: var(--rosa); }

.admin-conteudo { padding: 1rem; max-width: 1100px; margin: 0 auto; }

@media (min-width: 900px) {
    .admin-layout { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
    .admin-topbar { grid-column: 1 / -1; }
    .admin-sidebar { max-height: none; overflow: visible; grid-row: 2; }
    .admin-conteudo { grid-row: 2; }
    .menu-toggle { display: none; }
}

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; }
.admin-card { background: var(--branco); border-radius: var(--raio); padding: 1.2rem; box-shadow: var(--sombra); text-align: center; }
.admin-card__numero { display: block; font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 900; color: var(--rosa); }
.admin-card__legenda { font-size: 0.78rem; color: var(--texto-suave); text-transform: uppercase; }

.admin-colunas { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .admin-colunas { grid-template-columns: 1fr 1fr; } }
.admin-lista { list-style: none; padding: 0; margin: 0; }
.admin-lista li { padding: 0.4rem 0; border-bottom: 1px solid var(--borda); font-size: 0.9rem; }

.admin-titulo-acao { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.admin-filtros { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.admin-filtros input, .admin-filtros select { width: auto; flex: 1 1 160px; }

.admin-tabela { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.admin-tabela__linha {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.admin-tabela__linha--link { color: var(--texto); }
.admin-tabela__linha--link:hover { outline: 2px solid var(--rosa); }
.admin-tabela__meta { display: block; font-size: 0.78rem; color: var(--texto-suave); }
.admin-tabela__acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }

.tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 700; background: var(--borda); text-transform: uppercase; }
.tag--ativo { background: #e7f5ec; color: var(--sucesso); }
.tag--inativo { background: #f1f1f1; color: var(--texto-suave); }
.tag--destaque { background: var(--dourado); color: var(--preto); }
.tag--status-novo { background: var(--rosa); color: var(--branco); }
.tag--status-em_contato { background: var(--dourado); color: var(--preto); }
.tag--status-concluido { background: var(--sucesso); color: var(--branco); }
.tag--status-cancelado { background: var(--texto-suave); color: var(--branco); }

.form-produto fieldset, .form-configuracoes { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; margin-bottom: 1.2rem; }
.form-produto legend { font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 800; padding: 0 0.5rem; }
.campo-estoque-simples.oculto, .campo-variantes.oculto { display: none; }
.linha-variante { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.fotos-existentes { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.8rem 0; }
.foto-existente { text-align: center; font-size: 0.75rem; }
.foto-existente img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--raio); margin-bottom: 0.3rem; }
.ajuda { font-size: 0.78rem; color: var(--texto-suave); }

.editar-categoria summary { cursor: pointer; list-style: none; display: inline-block; }
.editar-categoria summary::-webkit-details-marker { display: none; }
.editar-categoria[open] summary { margin-bottom: 0.5rem; }
.form-editar-categoria { display: flex; gap: 0.4rem; align-items: center; }
.form-editar-categoria input[type="text"] { width: auto; min-width: 160px; }

.pedido-detalhe { max-width: 600px; }
.form-status { display: flex; gap: 0.6rem; align-items: flex-end; max-width: 320px; }
.form-status select { margin: 0; }