/* =========================================================================
   estilo.css — Catálogo de Perfumes de Luxo
   Abordagem Mobile-First: estilos base pensados para telas pequenas
   (320px+), expandidos progressivamente via media queries (min-width).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@400;500;600&display=swap');

/* -------------------------------------------------------------------------
   1. TOKENS DE DESIGN (cores, tipografia, espaçamento)
------------------------------------------------------------------------- */
:root {
    /* Paleta */
    --cor-fundo:            #F7F5F0; /* marfim premium */
    --cor-fundo-alt:        #EFEBE2; /* marfim levemente mais escuro, para cards alternados */
    --cor-grafite:          #14171D; /* grafite / azul-noite profundo */
    --cor-grafite-suave:    #23262E;
    --cor-dourado:          #A9812E; /* dourado fosco — detalhes e CTA */
    --cor-dourado-claro:    #C9A652;
    --cor-rose-gold:        #C79277; /* rose gold oficial — header/rodapé */
    --cor-champagne:        #EBD3BC; /* links/textos de suporte no rodapé escuro */
    --cor-fundo-escuro:     #14171D; /* fundo unificado header + rodapé — igual ao botao-primario (--cor-grafite) */
    --cor-verde-joia:       #3E5A45; /* "Em Estoque" */
    --cor-bordo:            #7A2E2E; /* "Esgotado" / erros */
    --cor-texto:            #24262B;
    --cor-texto-claro:      #F2EFE9;
    --cor-texto-suave:      #6B6A63;
    --cor-borda:            #DCD5C6;

    /* Tipografia */
    --fonte-display: 'Cormorant Garamond', Georgia, serif;
    --fonte-corpo:   'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Espaçamento e forma */
    --raio-padrao: 2px;
    --raio-suave: 8px;
    --sombra-card: 0 4px 18px rgba(20, 23, 29, 0.08);
    --sombra-modal: -8px 0 32px rgba(20, 23, 29, 0.25);
    --transicao: 0.25s ease;
}

/* -------------------------------------------------------------------------
   2. RESET BÁSICO E ESTILOS GLOBAIS
------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

h1, h2, h3 {
    font-family: var(--fonte-display);
    color: var(--cor-grafite);
    margin: 0 0 0.5em;
    font-weight: 600;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Acessibilidade: foco visível em qualquer elemento interativo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cor-dourado);
    outline-offset: 2px;
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Rótulo tipográfico "selo": maiúsculas, tracked, usado em badges e labels */
.rotulo-selo {
    font-family: var(--fonte-corpo);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. BOTÕES (compartilhados entre todas as páginas)
------------------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.75em 1.4em;
    border: 1px solid transparent;
    border-radius: var(--raio-padrao);
    font-family: var(--fonte-corpo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
    background: none;
}

.botao-primario {
    background-color: var(--cor-grafite);
    color: var(--cor-texto-claro);
    border-color: var(--cor-grafite);
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}
.botao-primario:hover {
    background-color: var(--cor-grafite);
    border-color: var(--cor-rose-gold);
    color: var(--cor-texto-claro);
    opacity: 0.85;
}

.botao-secundario {
    background-color: transparent;
    color: var(--cor-grafite);
    border-color: var(--cor-grafite);
}
.botao-secundario:hover {
    background-color: var(--cor-grafite);
    color: var(--cor-texto-claro);
}

.botao-perigo {
    background-color: transparent;
    color: var(--cor-bordo);
    border-color: var(--cor-bordo);
}
.botao-perigo:hover {
    background-color: var(--cor-bordo);
    color: var(--cor-texto-claro);
}

.botao-desativado,
.botao:disabled {
    background-color: var(--cor-fundo-alt);
    color: var(--cor-texto-suave);
    border-color: var(--cor-borda);
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.botao-pequeno {
    padding: 0.45em 0.9em;
    font-size: 0.68rem;
}

.botao-whatsapp {
    width: 100%;
}

/* -------------------------------------------------------------------------
   4. BADGES (Em Estoque / Esgotado)
------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 0.35em 0.8em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid transparent;
    background-color: var(--cor-fundo);
}

.badge-estoque {
    color: var(--cor-verde-joia);
    border-color: var(--cor-verde-joia);
}

.badge-esgotado {
    color: var(--cor-bordo);
    border-color: var(--cor-bordo);
}

/* -------------------------------------------------------------------------
   5. ALERTAS (formulários / mensagens de sistema)
------------------------------------------------------------------------- */
.alerta {
    padding: 0.9em 1.2em;
    border-radius: var(--raio-suave);
    margin-bottom: 1.5em;
    font-size: 0.9rem;
    border-left: 4px solid transparent;
}
.alerta-sucesso {
    background-color: #EAF0EA;
    border-left-color: var(--cor-verde-joia);
    color: var(--cor-verde-joia);
}
.alerta-erro {
    background-color: #F5E9E9;
    border-left-color: var(--cor-bordo);
    color: var(--cor-bordo);
}

/* =========================================================================
   6. PÁGINA: LOGIN
   ========================================================================= */
.pagina-login {
    background-color: var(--cor-grafite);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-container {
    width: 100%;
    max-width: 380px;
    background-color: var(--cor-fundo);
    padding: 2.5rem 2rem;
    border-radius: var(--raio-suave);
    box-shadow: var(--sombra-card);
}

.login-titulo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.login-form label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cor-texto-suave);
    margin-top: 0.8rem;
}

.login-form input {
    padding: 0.7em 0.8em;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-padrao);
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
}

.login-form button {
    margin-top: 1.5rem;
}

/* =========================================================================
   7. PÁGINA: VITRINE PÚBLICA
   ========================================================================= */
.vitrine-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-claro);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Cabeçalho unificado (header.php): hambúrguer + logo colados à esquerda,
   busca e carrinho completam a linha. Mobile-first — a busca nasce numa
   segunda linha de largura total; no desktop (≥900px) tudo cabe numa
   única linha (ver seção 10). */
.vitrine-header-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.9rem 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.btn-trigger-sidebar-header {
    order: 1;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--cor-texto-claro);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transicao);
}
.btn-trigger-sidebar-header:hover {
    opacity: 0.7;
}

.vitrine-logo {
    order: 2;
    flex-grow: 1;
    min-width: 0;
    font-size: 1.4rem;
    color: var(--cor-texto-claro);
    margin: 0;
    padding-left: 0.3rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vitrine-logo span {
    color: var(--cor-rose-gold);
    font-style: italic;
}

.carrinho-indicador {
    order: 3;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--cor-texto-claro);
    padding: 0.4em;
    line-height: 0;
    cursor: pointer;
    transition: opacity var(--transicao);
}
.carrinho-indicador:hover {
    opacity: 0.7;
}

.vitrine-busca-form {
    order: 4;
    width: 100%;
    display: flex;
    box-sizing: border-box;
}
.busca-campo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.busca-input {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 0.9rem;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: inherit;
    font-size: 0.85rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.busca-input::placeholder {
    color: var(--cor-texto-suave);
}
.busca-input:focus {
    outline: none;
    border-color: var(--cor-rose-gold);
    box-shadow: 0 0 0 3px rgba(199, 146, 119, 0.18);
}
.busca-botao-lupa {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.busca-botao-lupa:hover {
    color: var(--cor-rose-gold);
    background-color: rgba(199, 146, 119, 0.08);
}
.busca-botao-lupa svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    display: block;
}

/* Sidebar off-canvas de categorias, acionada pelo hambúrguer do header */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
}
.sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: var(--cor-fundo);
    z-index: 2001;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    padding: 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
.sidebar-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}
.sidebar-cabecalho h3 {
    margin: 0;
    font-size: 1.1rem;
}
.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sidebar-aba-link {
    text-decoration: none;
    color: var(--cor-texto);
    font-weight: 600;
    padding: 0.75rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--cor-fundo-alt);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-aba-link:hover {
    background: var(--cor-borda);
}
.sidebar-aba-link.ativa {
    background: var(--cor-grafite);
    color: var(--cor-texto-claro);
}

/* Categoria-pai com subcategorias (ex: Body Splash > Masculinos/Femininos) */
.sidebar-grupo-cabecalho {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}
.sidebar-grupo-cabecalho .sidebar-aba-link {
    flex: 1;
}
.sidebar-toggle-filhos {
    background: var(--cor-fundo-alt);
    border: none;
    border-radius: 6px;
    width: 2.2rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--cor-texto);
    transition: transform 0.2s ease;
}
.sidebar-grupo.aberta .sidebar-toggle-filhos {
    transform: rotate(180deg);
}
.sidebar-subcategorias {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--cor-borda);
}
.sidebar-grupo.aberta .sidebar-subcategorias {
    display: flex;
}
.sidebar-aba-filha {
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
}

.carrinho-icone {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.carrinho-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--cor-rose-gold);
    color: var(--cor-texto-claro);
    box-shadow: 0 0 0 2px var(--cor-fundo-escuro);
    font-family: var(--fonte-corpo);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.vitrine-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem 4rem;
}

.vitrine-intro {
    text-align: center;
    padding: 1.5rem 0 1rem;
}
.vitrine-intro p {
    color: var(--cor-texto-suave);
    margin: 0;
}

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

/* --- Grid de produtos: 1 coluna no mobile, expande progressivamente --- */
.grid-produtos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.card-produto {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-suave);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-card);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-produto:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20, 23, 29, 0.14);
}

.card-imagem-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--cor-fundo-alt);
}

.card-imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-imagem-wrapper .badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    background-color: var(--cor-fundo);
}

.card-corpo {
    padding: 1.1rem 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-nome {
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.card-descricao {
    color: var(--cor-texto-suave);
    font-size: 0.85rem;
    margin: 0 0 0.9rem;
    flex-grow: 1;
}

.card-preco {
    font-family: var(--fonte-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-grafite);
    margin: 0 0 0.9rem;
}

.card-corpo .botao {
    width: 100%;
}

/* --- Paginação --- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.paginacao-info {
    font-size: 0.8rem;
    color: var(--cor-texto-suave);
    letter-spacing: 0.04em;
}

/* --- Overlay do carrinho --- */
.carrinho-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(20, 23, 29, 0.55);
    backdrop-filter: blur(2px);
    z-index: 9998;
}
.carrinho-overlay[hidden] {
    display: none;
}

/* --- Painel do carrinho: tela cheia no mobile, painel lateral no desktop ---
   Fixo à viewport (independente do fluxo/altura da página, mesmo com avisos
   fixos no topo). Apenas a lista de itens rola; cabeçalho e rodapé (com o
   botão de finalizar pedido) ficam sempre colados e visíveis. */
.carrinho-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    /* Fallbacks progressivos: dvh/svh recalculam instantaneamente quando a
       barra de navegação/URL do celular aparece ou some, evitando que o
       rodapé (botão Finalizar Pedido) fique escondido atrás dela. */
    height: 100vh;
    height: 100svh;
    height: 100dvh !important;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh !important;
    width: 100%;
    max-width: 100%;
    background-color: var(--cor-fundo);
    z-index: 9999 !important;
    /* Grid (em vez de flex) elimina a ambiguidade do cálculo de encolhimento:
       linha 1 (cabeçalho) e linha 3 (rodapé) SEMPRE ocupam sua altura de
       conteúdo; a linha 2 (itens) é matematicamente o restante — nunca pode
       "roubar" espaço do rodapé, então o botão nunca fica cortado. */
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    box-shadow: var(--sombra-modal);
    transform: translateX(0);
    overflow: hidden;
    box-sizing: border-box !important;
}
/* !important é obrigatório aqui: sem ele, esta regra perde para o
   "display: grid !important" acima (important sempre vence especificidade),
   e o carrinho nunca seria de fato escondido ao fechar. */
.carrinho-modal[hidden] {
    display: none !important;
}

.carrinho-modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid var(--cor-borda);
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--cor-fundo);
}
.carrinho-modal-cabecalho h2 {
    margin: 0;
    font-size: 1.4rem;
}

.botao-fechar {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--cor-texto-suave);
    padding: 0.2rem 0.4rem;
}
.botao-fechar:hover {
    color: var(--cor-grafite);
}

.carrinho-itens {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.3rem;
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.carrinho-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--cor-fundo-alt);
}

.carrinho-item-imagem {
    width: 56px;
    height: 56px;
    border-radius: var(--raio-padrao);
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--cor-fundo-alt);
}

.carrinho-item-info {
    flex-grow: 1;
    min-width: 0;
}
.carrinho-item-nome {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carrinho-item-subtotal {
    font-size: 0.8rem;
    color: var(--cor-texto-suave);
    margin: 0;
}

.carrinho-item-quantidade {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.carrinho-item-quantidade button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo);
    border-radius: 50%;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-grafite);
}
.carrinho-item-quantidade button:hover {
    border-color: var(--cor-dourado);
    color: var(--cor-dourado);
}
.carrinho-item-quantidade span {
    min-width: 1.2em;
    text-align: center;
    font-size: 0.85rem;
}

.carrinho-item-remover {
    background: none;
    border: none;
    color: var(--cor-bordo);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.carrinho-item-remover:hover {
    text-decoration: underline;
}

.carrinho-vazio-msg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cor-texto-suave);
    margin: 0;
    padding: 2.5rem 1.3rem;
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    overflow: hidden;
}
.carrinho-vazio-msg[hidden] {
    display: none !important;
}

.carrinho-modal-rodape {
    padding: 1.1rem 1.3rem 1.4rem;
    /* Respeita a área segura do celular (home indicator / barra de gestos)
       para o botão nunca disputar espaço com a navegação nativa. */
    padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--cor-borda);
    grid-row: 3 !important;
    grid-column: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--cor-fundo);
}
.carrinho-modal-rodape[hidden] {
    display: none;
}
.carrinho-total {
    display: flex;
    justify-content: space-between;
    font-family: var(--fonte-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.9rem;
}

/* =========================================================================
   8. PÁGINA: ADMIN
   ========================================================================= */
.pagina-admin {
    background-color: var(--cor-fundo-alt);
}

.admin-header {
    background-color: var(--cor-grafite);
    color: var(--cor-texto-claro);
    padding: 1rem 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.admin-header h1 {
    color: var(--cor-texto-claro);
    font-size: 1.3rem;
    margin: 0;
}
.admin-header-usuario {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.85rem;
}

.admin-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.admin-formulario-secao,
.admin-listagem-secao {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-suave);
    padding: 1.5rem;
}

.formulario-produto {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.formulario-produto label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cor-texto-suave);
    margin-top: 0.9rem;
}
.formulario-produto input[type="text"],
.formulario-produto input[type="number"],
.formulario-produto input[type="file"],
.formulario-produto textarea {
    padding: 0.65em 0.8em;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-padrao);
    font-family: var(--fonte-corpo);
    font-size: 0.9rem;
    width: 100%;
}
.formulario-produto textarea {
    resize: vertical;
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--cor-texto) !important;
    font-size: 0.9rem !important;
}
.checkbox-label input {
    width: auto;
}

.admin-preview-imagem-atual {
    margin-top: 0.6rem;
}
.admin-preview-imagem-atual img {
    border-radius: var(--raio-padrao);
    border: 1px solid var(--cor-borda);
}

.formulario-acoes {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.admin-tabela-wrapper {
    overflow-x: auto;
}
.tabela-produtos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 560px;
}
.tabela-produtos th,
.tabela-produtos td {
    padding: 0.7em 0.6em;
    text-align: left;
    border-bottom: 1px solid var(--cor-fundo-alt);
    vertical-align: middle;
}
.tabela-produtos th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    color: var(--cor-texto-suave);
}
.tabela-produtos img {
    border-radius: var(--raio-padrao);
}
.acoes-tabela {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================================
   9. MEDIA QUERIES — TABLET (≥600px)
   ========================================================================= */
@media (min-width: 600px) {
    .grid-produtos {
        grid-template-columns: repeat(2, 1fr);
    }

    .login-container {
        padding: 3rem 2.5rem;
    }
}

/* =========================================================================
   10. MEDIA QUERIES — DESKTOP (≥900px)
   ========================================================================= */
@media (min-width: 900px) {
    /* Cabeçalho vira uma única linha: hambúrguer + logo colados à esquerda,
       busca no centro, carrinho à direita — sem quebrar para uma 2ª linha. */
    .vitrine-header-conteudo {
        flex-wrap: nowrap;
    }
    .btn-trigger-sidebar-header {
        margin-right: 0.9rem;
    }
    .vitrine-logo {
        flex-grow: 0;
    }
    .vitrine-busca-form {
        order: 3;
        width: auto;
        flex: 1;
        max-width: 400px;
        margin: 0 1.25rem;
    }
    .carrinho-indicador {
        order: 4;
    }

    .grid-produtos {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
    }

    /* Painel do carrinho vira slide-out lateral, não mais tela cheia */
    .carrinho-modal {
        width: 420px;
    }

    .formulario-produto {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }
    .formulario-produto label,
    .formulario-produto input,
    .formulario-produto textarea,
    .formulario-produto .admin-preview-imagem-atual,
    .formulario-produto .checkbox-label,
    .formulario-produto .formulario-acoes {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   11. MEDIA QUERIES — DESKTOP GRANDE (≥1200px)
   ========================================================================= */
@media (min-width: 1200px) {
    .grid-produtos {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================================================
   12. RODAPÉ INSTITUCIONAL (dark premium)
   Mobile-first: colunas empilhadas e centralizadas por padrão; viram uma
   linha lado a lado a partir do breakpoint desktop (≥900px).
   ========================================================================= */
.rodape-site {
    background-color: var(--cor-fundo-escuro);
    color: #EDEAE2;
    margin-top: 3rem;
    padding: 3rem 1.2rem 1.5rem;
}
.rodape-conteudo {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
    text-align: center;
}
.rodape-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.rodape-titulo {
    font-family: var(--fonte-display);
    color: var(--cor-rose-gold);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    font-weight: 600;
}
.rodape-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.rodape-links a {
    color: #C9C6BE;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}
.rodape-links a:hover {
    color: var(--cor-champagne);
}
.rodape-selos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.selo-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #C9C6BE;
}
.selo-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--cor-rose-gold);
}
.rodape-texto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #C9C6BE;
    margin: 0 0 1rem;
}
.rodape-icone-inline {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--cor-rose-gold);
}
.botao-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--cor-rose-gold);
    border-radius: 999px;
    color: var(--cor-rose-gold);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.botao-instagram svg {
    width: 18px;
    height: 18px;
}
.botao-instagram:hover {
    background-color: var(--cor-rose-gold);
    color: var(--cor-fundo-escuro);
}
.selo-seguranca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(199, 146, 119, 0.35);
    border-radius: 8px;
    background: rgba(199, 146, 119, 0.06);
}
.selo-seguranca svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--cor-rose-gold);
}
.selo-seguranca-texto {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    font-weight: 600;
    color: #EDEAE2;
    text-align: left;
}
.selo-seguranca-texto small {
    font-weight: 400;
    font-size: 0.72rem;
    color: #9C9890;
}
.rodape-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    text-align: center;
}
.rodape-copyright p {
    margin: 0;
    font-size: 0.78rem;
    color: #8C897F;
}

@media (min-width: 900px) {
    .rodape-conteudo {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
        gap: 2rem;
    }
    .rodape-coluna {
        align-items: flex-start;
        width: auto;
        flex: 1;
    }
    .rodape-links,
    .rodape-selos {
        align-items: flex-start;
    }
    .rodape-texto {
        justify-content: flex-start;
    }
}