:root {
    --cor-primaria: #0b3d91;
    --cor-primaria-escura: #082a66;
    --cor-topo: #082a66;
    --cor-texto: #232323;
    --cor-fundo: #f5f6f8;
    --cor-botao: #0b3d91;
    --cor-botao-texto: #ffffff;
    --cor-rodape: #191d24;
    --cor-rodape-texto: #cfd3da;
    --borda: #e2e5ea;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Tamanho de fonte do site público, controlado em Configurações
       (--zoom-site, ex.: 110%/125%/140%) — aumenta texto e o restante da
       interface junto (botões, espaçamentos), na mesma proporção, em vez de
       só o texto ficar maior "solto" dentro de caixas que não cresceram
       junto. Sem nada configurado, --zoom-site vem 100% (sem efeito). */
    zoom: var(--zoom-site, 100%);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* Segurança extra para telas estreitas: nome do site, categorias e títulos
   são definidos livremente em Configurações, então nunca devem conseguir
   "estourar" a largura da tela mesmo se o texto escolhido for bem longo. */
h1, h2, h3, h4 { overflow-wrap: break-word; }

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

/* Topbar */
.topbar {
    background: var(--cor-topo);
    color: #fff;
    font-size: 13px;
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    padding: 6px 20px;
    flex-wrap: wrap;
    gap: 6px;
}
.topbar-contatos span { margin-right: 16px; }
.topbar-links a { margin-left: 16px; opacity: .9; }
.topbar-links a:hover { text-decoration: underline; }

/* Navbar */
.navbar {
    background: #fff;
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-inner {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 20px;
    flex-wrap: wrap;
}
.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-weight: 800;
}
.logo img { max-height: var(--logo-altura, 46px); max-width: min(360px, 60vw); width: auto; height: auto; display: block; }
.logo-sigla { font-size: 26px; color: var(--cor-primaria); letter-spacing: .5px; }
.logo-full { font-size: 11px; letter-spacing: 2px; color: #777; }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    order: 5;
    flex-basis: 100%;
    width: 100%;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid var(--borda);
}
.menu > li { position: relative; font-weight: 600; }
.menu > li > a { padding: 10px 2px; display: inline-block; }
.menu > li > a:hover { color: var(--cor-primaria); }

.tem-submenu .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--borda);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    min-width: 240px;
    padding: 10px 0;
    border-radius: 6px;
}
.tem-submenu:hover .submenu { display: block; }
.submenu-item { position: relative; }
.submenu-item > a { display: block; padding: 8px 18px; font-weight: 700; font-size: 14px; }
.submenu-item:hover > a { background: var(--cor-fundo); color: var(--cor-primaria); }
.submenu-nivel2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    border: 1px solid var(--borda);
    min-width: 220px;
    padding: 10px 0;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.submenu-item:hover .submenu-nivel2 { display: block; }
.submenu-nivel2 li a { display: block; padding: 6px 18px; font-size: 13px; font-weight: 400; }
.submenu-nivel2 li a:hover { color: var(--cor-primaria); }

.navbar-busca {
    display: flex;
    align-items: center;
    gap: 0;
    order: 3;
    flex: 1 1 140px;
    max-width: 380px;
    min-width: 120px;
}
.navbar-busca input {
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    font-family: inherit;
}
.navbar-busca input:focus { outline: none; border-color: var(--cor-primaria); }
.navbar-busca button {
    background: var(--cor-fundo);
    border: 1px solid var(--borda);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 9px 14px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
}
.navbar-busca button:hover { background: var(--cor-primaria); color: #fff; }

.navbar-acoes {
    display: flex;
    align-items: center;
    gap: 18px;
    order: 4;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.acao-carrinho { font-weight: 700; position: relative; }
.badge {
    background: var(--cor-primaria);
    color: #fff;
    font-size: 11px;
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 4px;
}
.botao-entrar {
    background: var(--cor-botao);
    color: var(--cor-botao-texto) !important;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 700;
}
.botao-entrar:hover { background: var(--cor-primaria-escura); }

.dropdown-conta { position: relative; font-weight: 700; }
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--borda);
    min-width: 180px;
    padding: 8px 0;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.dropdown-conta:hover .dropdown-menu { display: block; }
.dropdown-menu li a { display: block; padding: 8px 16px; font-weight: 400; }
.dropdown-menu li a:hover { background: var(--cor-fundo); }

/* Alertas */
.alerta { padding: 12px 16px; border-radius: 6px; margin: 16px 0; font-weight: 600; }
.alerta-erro { background: #fdecea; color: #a12622; border: 1px solid #f3c1bd; }
.alerta-sucesso { background: #e9f8ee; color: #1e7d3c; border: 1px solid #b7e6c4; }
.alerta-info { background: #e8f1fc; color: #0b3d91; border: 1px solid #c6dcf7; }

/* Carrossel de banners */
.carrossel {
    position: relative;
    width: 100%;
    height: var(--banner-altura, 480px);
    overflow: hidden;
    background: #e9ebef;
}
.carrossel-slides { position: relative; width: 100%; height: 100%; }
.carrossel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.carrossel-slide.ativo { opacity: 1; visibility: visible; }
.carrossel-slide a, .carrossel-slide { display: block; width: 100%; height: 100%; }
.carrossel-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.carrossel-legenda {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    padding: 30px 40px 20px;
    font-size: 22px;
    font-weight: 800;
}
.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.35);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.carrossel-seta:hover { background: rgba(0,0,0,.55); }
.carrossel-anterior { left: 16px; }
.carrossel-proximo { right: 16px; }
.carrossel-pontos {
    position: absolute;
    bottom: 14px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}
.carrossel-ponto {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: none;
    cursor: pointer;
    padding: 0;
}
.carrossel-ponto.ativo { background: #fff; }

@media (max-width: 760px) {
    .carrossel { height: clamp(180px, calc(var(--banner-altura, 480px) * 0.55), 340px); }
    .carrossel-legenda { font-size: 16px; padding: 18px 16px 14px; }
    .carrossel-seta { width: 36px; height: 36px; font-size: 20px; }
}

/* Grade de banners promocionais (abaixo de Destaques/Recentes na home) */
.grid-banners-promocionais {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 170px;
    gap: 18px;
}
.banner-promocional {
    border-radius: 10px;
    overflow: hidden;
    background: #e9ebef;
}
.banner-promocional-grande { grid-column: span 2; grid-row: span 2; }
.banner-promocional a, .banner-promocional { display: block; width: 100%; height: 100%; }
.banner-promocional img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.banner-promocional a:hover img { transform: scale(1.03); }

@media (max-width: 760px) {
    .grid-banners-promocionais { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 130px; gap: 12px; }
    .banner-promocional-grande { grid-column: span 2; grid-row: span 1; }
}

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff;
    padding: 70px 20px;
    text-align: center;
}
.hero h1 { font-size: 40px; margin: 0 0 12px; overflow-wrap: break-word; }
.hero p { font-size: 18px; opacity: .9; max-width: 640px; margin: 0 auto 24px; }
.hero .botao { background: #fff; color: var(--cor-primaria); }

.botao {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 6px;
    background: var(--cor-botao);
    color: var(--cor-botao-texto);
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: 15px;
}
.botao:hover { background: var(--cor-primaria-escura); }
.botao-secundario { background: #fff; color: var(--cor-primaria); border: 2px solid var(--cor-primaria); }
.botao-secundario:hover { background: var(--cor-fundo); }
.botao-perigo { background: #c0392b; }
.botao-perigo:hover { background: #922b21; }

/* Seções */
.secao { padding: 50px 0; }
.secao-titulo { text-align: center; font-size: 28px; margin-bottom: 32px; }

/* Categorias home */
.grid-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.card-categoria {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    font-weight: 700;
    transition: transform .15s, box-shadow .15s;
}
.card-categoria:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); color: var(--cor-primaria); }

/* Grid de produtos */
.grid-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}
.card-produto {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s;
    position: relative;
}
.card-produto:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.card-produto .imagem { aspect-ratio: 1/1; background: #f0f1f4; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
/* object-fit: contain (não "cover") — mesma regra usada na galeria do produto
   (produto.php) e no carrossel/banners: nunca cortar a foto que o admin
   enviou. Com "cover", uma foto que não seja exatamente quadrada (a maioria
   das fotos reais de produto) tinha as bordas de cima/baixo ou dos lados
   cortadas para preencher o quadrado — em fotos mais retangulares, isso
   cortava até partes do próprio produto, dando a impressão de a imagem
   "estourar" o quadro. Com "contain", a foto inteira sempre aparece, com uma
   faixa de fundo (mesma cor neutra do quadro) preenchendo o espaço que sobrar
   dos dois lados, quando a proporção da foto não for exatamente 1:1. */
.card-produto .imagem img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.card-produto .info { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-produto .codigo { font-size: 12px; color: #888; }
.card-produto .nome { font-weight: 700; font-size: 15px; flex: 1; }
.card-produto .preco { font-weight: 800; color: var(--cor-primaria); font-size: 17px; }
.card-produto .preco-bloqueado { font-size: 13px; color: #999; font-style: italic; }
.card-produto .botao { margin: 0 16px 16px; text-align: center; }

/* Mini-formulário "Adicionar" nos cards das listagens (catálogo, Ofertas,
   Início) — soma o produto ao pedido em andamento sem sair da página. */
.form-adicionar-rapido { display: flex; gap: 8px; margin: 0 16px 16px; }
.form-adicionar-rapido .input-quantidade-rapida { width: 60px; padding: 8px; border: 1px solid var(--borda); border-radius: 6px; text-align: center; }
.form-adicionar-rapido .botao { flex: 1; margin: 0; }

/* Tag "Promocional" — aparece nos cards de produtos que têm alguma
   embalagem com desconto percentual cadastrada. */
.tag-promocional {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.tag-promocional-produto { margin: 0 0 6px; }
.tag-promocional-produto .tag-promocional { position: static; display: inline-block; }

/* Oferta exclusiva de grupo de lojas (Nikkei/Okinalar) — mesma "pílula" da
   tag Promocional, mas em outra cor, para diferenciar visualmente os dois
   tipos de oferta (ver produtoOfertaExclusivaParaUsuario() em
   includes/functions.php — só aparece para quem recebe o desconto). */
.tag-oferta-exclusiva { background: #a15c00; }

/* Paginação — usada no catálogo (produtos.php), em Ofertas (ofertas.php) e
   na listagem de produtos do admin (admin/produtos.php, que também carrega
   este arquivo — ver admin/_header.php), sempre que a lista pode passar de
   uma página só. Os números de página não vizinhos da atual são
   escondidos com "…" (ver paginacaoHtml() em includes/functions.php) para
   não virar uma lista de dezenas de números num catálogo grande. */
.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 28px 0;
}
.paginacao a,
.paginacao span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}
.paginacao a {
    background: #fff;
    border: 1px solid var(--borda);
    color: var(--cor-texto);
}
.paginacao a:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.paginacao .paginacao-atual {
    background: var(--cor-primaria);
    color: var(--cor-botao-texto, #fff);
}
.paginacao .paginacao-desativado { color: #bbb; }
.paginacao .paginacao-reticencias { border: none; background: none; padding: 0 2px; color: #999; }

/* Grid de blog */
.grid-blog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.card-blog {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s;
}
.card-blog:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.card-blog .imagem { aspect-ratio: 16/9; background: #f0f1f4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-blog .imagem img { width: 100%; height: 100%; object-fit: cover; }
.card-blog .info { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.card-blog .data { font-size: 12px; color: #888; }
.card-blog .titulo { font-weight: 700; font-size: 17px; }
.card-blog .titulo a { color: #191d24; }
.card-blog .resumo { font-size: 14px; color: #555; flex: 1; }
.post-capa { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin-bottom: 20px; }
.post-data { font-size: 13px; color: #888; margin-bottom: 16px; }

/* Página de detalhe do produto (imagem + informações) */
.layout-produto { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* Galeria de fotos da página do produto: imagem principal grande + miniaturas
   clicáveis (imagem principal + imagens extras cadastradas no admin), no
   mesmo formato de coluna de miniaturas usado em grandes lojas online. */
.galeria-produto {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 14px;
    position: relative;
    /* Item de uma grid de "1fr 1fr" (.layout-produto): sem isso, o
       tamanho mínimo "auto" do item (baseado no conteúdo, que aqui inclui
       uma imagem em resolução alta) pode ultrapassar a coluna e estourar a
       largura da página — min-width:0 deixa a coluna encolher normalmente. */
    min-width: 0;
}
.galeria-produto .imagem {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1/1;
    background: #f0f1f4;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.galeria-produto .imagem img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.galeria-miniaturas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 66px;
    flex-shrink: 0;
    max-height: 460px;
    overflow-y: auto;
    /* No modo mobile (linha horizontal, ver media query abaixo) esta coluna
       vira uma faixa com rolagem própria — sem min-width:0 aqui, a largura
       "automática" mínima seria a soma de todas as miniaturas lado a lado
       (que não encolhem), estourando a largura da tela em produtos com
       várias fotos em vez de rolar. */
    min-width: 0;
}
.galeria-miniatura {
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0;
    border: 2px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f1f4;
    flex-shrink: 0;
}
.galeria-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-miniatura.ativa,
.galeria-miniatura:hover { border-color: var(--cor-primaria); }
@media (max-width: 760px) {
    .galeria-produto { flex-direction: column; }
    .galeria-miniaturas { flex-direction: row; width: auto; max-height: none; overflow-y: visible; overflow-x: auto; }
    .galeria-miniatura { width: 60px; flex: 0 0 60px; }
}

/* Lightbox: clicar na foto principal do produto abre ela em destaque, maior,
   sobre o resto da página — com setas para navegar entre as fotos da
   galeria quando houver mais de uma. */
.lightbox-galeria {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 30px;
}
.lightbox-galeria[hidden] { display: none; }
.lightbox-galeria img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 6px; background: #fff; }
.lightbox-fechar {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
}
.lightbox-anterior,
.lightbox-proximo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
}
.lightbox-anterior { left: 14px; }
.lightbox-proximo { right: 14px; }
.lightbox-anterior:hover,
.lightbox-proximo:hover,
.lightbox-fechar:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 600px) {
    .lightbox-anterior, .lightbox-proximo { width: 38px; height: 38px; font-size: 16px; }
}

/* Sidebar categorias na listagem */
.layout-produtos { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.sidebar-categorias { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 18px; }
.sidebar-categorias h3 { margin-top: 0; font-size: 15px; }
.sidebar-categorias li a { display: block; padding: 6px 0; font-size: 14px; }
.sidebar-categorias li a:hover, .sidebar-categorias li a.ativo { color: var(--cor-primaria); font-weight: 700; }
.sidebar-categorias .filhos { padding-left: 12px; }

/* Editor de texto rico (admin) */
.editor-rico-wrapper {
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: #f7f8fa;
    border-bottom: 1px solid var(--borda);
}
.editor-botao {
    border: 1px solid var(--borda);
    background: #fff;
    border-radius: 4px;
    min-width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    padding: 0 6px;
}
.editor-botao:hover { background: #eef1f5; }
/* Destaca o botão quando a formatação correspondente já está aplicada onde
   o cursor está agora (ex.: "N" fica marcado dentro de um trecho em
   negrito) — feedback visual que antes não existia: era preciso adivinhar
   ou clicar para descobrir como o texto selecionado estava formatado. */
.editor-botao.ativo { background: var(--cor-primaria, #0b3d91); border-color: var(--cor-primaria, #0b3d91); color: #fff; }
.editor-select {
    border: 1px solid var(--borda);
    border-radius: 4px;
    height: 30px;
    font-size: 13px;
    padding: 0 4px;
}
/* Divisor fino entre grupos de botões da barra (estilo de texto | negrito/
   itálico/sublinhado | alinhamento | listas | link/limpar | imagem/vídeo) —
   deixa mais claro que são grupos de opções diferentes, não uma fileira só. */
.editor-separador { display: inline-block; width: 1px; align-self: stretch; background: var(--borda); margin: 2px 2px; }
/* Ícone de alinhar desenhado com três barrinhas (CSS puro), no lugar de um
   símbolo de fonte (ex.: ⯇, ☰) que nem sempre é claro ou renderiza igual em
   todo sistema — a barra do meio mais curta já sugere "alinhado à
   esquerda"/"centralizado" de forma bem mais direta. */
.editor-icone-alinhar { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; width: 16px; height: 14px; vertical-align: middle; }
.editor-icone-alinhar span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.editor-icone-alinhar-esquerda span:nth-child(1) { width: 100%; }
.editor-icone-alinhar-esquerda span:nth-child(2) { width: 65%; }
.editor-icone-alinhar-esquerda span:nth-child(3) { width: 85%; }
.editor-icone-alinhar-centro span { margin: 0 auto; }
.editor-icone-alinhar-centro span:nth-child(1) { width: 100%; }
.editor-icone-alinhar-centro span:nth-child(2) { width: 60%; }
.editor-icone-alinhar-centro span:nth-child(3) { width: 80%; }
.editor-area {
    /* Área bem maior por padrão (o admin pediu para conseguir ver melhor
       como o texto está ficando enquanto edita) e redimensionável por
       arraste (resize: vertical) — o cantinho aparece no canto inferior
       direito da área, puxando pra baixo deixa ainda maior, sem precisar
       de nenhum botão/JavaScript novo, é um recurso nativo do navegador. */
    min-height: 420px;
    max-height: 900px;
    height: 420px;
    overflow-y: auto;
    resize: vertical;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}
.editor-area img { max-width: 100%; height: auto; cursor: pointer; border: 2px solid transparent; border-radius: 4px; }
.editor-area img.editor-imagem-selecionada { border-color: var(--cor-primaria, #0b3d91); }
.editor-imagem-toolbar {
    position: absolute;
    display: none;
    gap: 4px;
    background: #12213d;
    padding: 5px;
    border-radius: 6px;
    z-index: 999;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.editor-imagem-toolbar button {
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.editor-imagem-toolbar button:hover { background: rgba(255,255,255,.25); }

/* Conteúdo rico exibido no site público (produto, institucional) */
.conteudo-rico { line-height: 1.7; }
.conteudo-rico img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
.conteudo-rico h2 { font-size: 22px; margin: 20px 0 10px; }
.conteudo-rico h3 { font-size: 18px; margin: 16px 0 8px; }
.conteudo-rico ul, .conteudo-rico ol { padding-left: 22px; }

/* Vídeo incorporado (YouTube/Instagram/TikTok) inserido pelo botão "Inserir
   vídeo" do editor de texto rico — mesmo componente usado tanto na área do
   editor (admin) quanto no conteúdo já publicado (produto, páginas, blog,
   institucional). Proporção 16:9 por padrão (vídeo "deitado", caso comum do
   YouTube); Instagram/TikTok/Shorts usam ".video-vertical" (9:16, formato
   vertical desses vídeos) — a técnica do "padding-bottom" mantém a
   proporção certa em qualquer largura de tela, sem JavaScript nenhum. */
.editor-video-embed { position: relative; width: 100%; max-width: 640px; height: 0; padding-bottom: 56.25%; margin: 16px 0; background: #000; border-radius: 8px; overflow: hidden; }
.editor-video-embed.video-vertical { max-width: 360px; padding-bottom: 177.78%; }
.editor-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Modo "tela cheia" do editor (botão ⛶): o wrapper inteiro (barra de
   ferramentas + área de texto) passa a cobrir a tela toda, parecido com o
   modo de tela cheia do Word/Google Docs — pensado para telas que dividem
   o formulário numa coluna estreita ao lado de outra coisa (ex.: Blog,
   onde a listagem de posts fica ao lado do formulário de cadastro), onde
   mesmo uma área mais alta continua estreita. Só CSS (nenhuma mudança na
   estrutura HTML: mesmo wrapper, só ganha `position:fixed`) — sem esse
   botão/JavaScript, a área continua exatamente como antes (mais alta e
   redimensionável por arraste), nunca fica sem jeito nenhum de editar. */
.editor-rico-wrapper.editor-tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}
.editor-rico-wrapper.editor-tela-cheia .editor-toolbar { flex: 0 0 auto; }
.editor-rico-wrapper.editor-tela-cheia .editor-area {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
}
/* Trava a rolagem do restante da página enquanto o editor está em tela
   cheia, para não ter duas barras de rolagem (a da página e a do editor)
   competindo ao mesmo tempo. */
body.editor-tela-cheia-ativa { overflow: hidden; }

/* Formulários */
.form-card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 32px;
    max-width: 480px;
    margin: 40px auto;
}
.form-card.largo { max-width: 720px; }
.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-rodape { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }

/* Tabelas (carrinho / admin) — rolagem horizontal própria em telas estreitas,
   para a tabela nunca "estourar" a largura da página no celular. */
.tabela-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }
table.tabela th, table.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); text-align: left; font-size: 14px; }
table.tabela th { background: var(--cor-fundo); font-weight: 700; }
.quantidade-input { width: 70px; padding: 6px; }

/* Rodapé */
.rodape { background: var(--cor-rodape); color: var(--cor-rodape-texto); margin-top: 60px; }
.rodape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; padding: 50px 20px; }
.rodape h4 { color: var(--cor-rodape-texto); margin-top: 0; }
.rodape ul li { margin-bottom: 8px; }
.rodape a:hover { text-decoration: underline; }
.botao-whatsapp { display: inline-block; margin-top: 10px; background: #25d366; color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 700; }
.rodape-copy { background: var(--cor-rodape); padding: 16px 0; font-size: 13px; text-align: center; border-top: 1px solid rgba(120,120,120,.3); }
.form-newsletter-rodape { display: flex; gap: 8px; flex-wrap: wrap; }
.form-newsletter-rodape input[type="email"] { flex: 1; min-width: 140px; padding: 9px 10px; border-radius: 6px; border: 1px solid #3a4150; background: #232833; color: #fff; font-size: 13px; }
.form-newsletter-rodape input[type="email"]::placeholder { color: #9aa0ab; }
.form-newsletter-rodape .botao { padding: 9px 14px; font-size: 13px; white-space: nowrap; }

/* Página institucional / contato */
.pagina-texto { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 32px; max-width: 900px; margin: 40px auto; line-height: 1.7; }

/* Botão flutuante do WhatsApp (canto inferior direito, em toda página do
   site público) — implementado com <details>/<summary> em vez de
   JavaScript: abre/fecha nativamente no navegador, então continua
   funcionando normalmente mesmo com JavaScript desativado, seguindo a
   mesma filosofia já usada em outras partes do projeto (paginação, busca do
   cabeçalho, mostrar/esconder campo de cobrança). */
.whatsapp-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 400; }
.whatsapp-flutuante > summary {
    list-style: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    overflow: hidden;
}
.whatsapp-flutuante > summary::-webkit-details-marker,
.whatsapp-flutuante > summary::marker { display: none; content: ""; }
.whatsapp-flutuante > summary img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.whatsapp-flutuante .whatsapp-icone { font-size: 30px; line-height: 1; }
.whatsapp-flutuante[open] > summary { box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.whatsapp-popup {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: 290px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
    padding: 16px;
}
.whatsapp-popup-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.whatsapp-popup-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.whatsapp-popup-cabecalho div { flex: 1; line-height: 1.3; }
.whatsapp-popup-cabecalho strong { display: block; font-size: 14px; }
.whatsapp-popup-cabecalho span { font-size: 12px; color: #888; }
.whatsapp-popup-fechar { border: none; background: none; font-size: 16px; cursor: pointer; color: #888; padding: 2px 4px; }
.whatsapp-popup-mensagem { background: var(--cor-fundo); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.whatsapp-popup-botao { display: block; width: 100%; text-align: center; background: #25d366; font-size: 13px; box-sizing: border-box; }
.whatsapp-popup-botao:hover { background: #1ebc59; }

@media (max-width: 900px) {
    .layout-produtos { grid-template-columns: 1fr; }
    .layout-produto { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .logo img { max-height: clamp(24px, calc(var(--logo-altura, 46px) * 0.75), 60px); max-width: 55vw; }

    .hero { padding: 44px 16px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 15px; }

    .menu-toggle { display: block; }
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    .menu.aberto { display: flex; }
    .tem-submenu .submenu, .submenu-nivel2 { position: static; box-shadow: none; display: none; }
    .tem-submenu:hover .submenu { display: none; }
    .tem-submenu.aberto .submenu { display: block; }
    .form-linha { grid-template-columns: 1fr; }

    .navbar-busca { order: 1; flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
    .navbar-busca input { width: auto; flex: 1; }
    .navbar-acoes { order: 2; flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: space-between; }
}