/* ═══════════════════════════════════════════════════════════════════════════════════════════
   A CASCA DO SITE — o que o tema do WordPress fornecia e aqui precisa existir de verdade.

   ⚠ O CONTEÚDO DE CADA PÁGINA NÃO MORA AQUI. No ouro.express o CSS de cada página é INLINE e
   ESCOPADO por id (`#oe-home .oe-btn{…}`), com o bloco de tokens repetido em cada uma. Mantive
   exatamente esse desenho: uma folha por página, em `site/css/<pagina>.css`, com o mesmo escopo.
   Parece duplicação e é de propósito — cada página carrega UMA folha só (a dela e a do rodapé), e
   o escopo por id significa que mexer numa página não pode quebrar outra. Fidelidade vale mais
   que economia de bytes que ninguém baixa.

   Os números daqui foram MEDIDOS no site real, não estimados: altura da faixa do topo 120px,
   logo 100×50, menu Inter 700/12px em CAIXA ALTA cor #365951, container 1290px de máximo com
   92vw de largura, corpo Inter 16px/1.65 em #365951 sobre #FBFCFC.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --oe-verde-900:#063B2E; --oe-verde-950:#042A20;
  --oe-ouro-300:#E5D096; --oe-ouro-400:#DBC078; --oe-ouro-600:#BE9B54;
  --oe-ouro-gradiente:linear-gradient(135deg,#DBC078 0%,#BE9B54 100%);
  --oe-texto:#365951; --oe-titulo:#192c27; --oe-borda:#E6F0EE;
  --oe-foco:#CBAA63; --oe-sobre-verde:#FCFAF6; --oe-painel:rgba(18,21,25,.98);
  --oe-borda-escura:rgba(251,248,242,.16); --oe-sombra-verde:0 16px 40px rgba(6,59,46,.28);
  --oe-fundo:#FBFCFC; --oe-branco:#fff; --oe-sobre-escuro:#fff;
  --oe-container:1290px; --oe-topo:120px;
  --oe-fonte:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--oe-fundo);color:var(--oe-texto);
  font-family:var(--oe-fonte);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;}
a{color:var(--oe-ouro-400);}
a:hover{color:var(--oe-ouro-600);}
h1,h2,h3,h4,h5,h6{color:var(--oe-titulo);font-weight:700;line-height:1.5;}
:focus-visible{outline:2px solid var(--oe-foco);outline-offset:3px;}

/* ── o container do tema: 92vw, com teto de 1290px ─────────────────────────────────────── */
.oe-container{width:min(92vw,var(--oe-container));margin-inline:auto;}

/* ── pular para o conteúdo: primeiro alvo do Tab, invisível até receber foco ────────────── */
.oe-pular{
  position:absolute;left:16px;top:-64px;z-index:60;
  background:var(--oe-verde-900);color:var(--oe-sobre-verde);padding:12px 18px;border-radius:6px;
  font-weight:600;text-decoration:none;transition:top .15s;
}
.oe-pular:focus{top:16px;color:var(--oe-sobre-verde);}

/* ══ A FAIXA DO TOPO ═══════════════════════════════════════════════════════════════════════ */
.oe-topo{background:var(--oe-branco);width:100%;}
.oe-topo__linha{
  min-height:var(--oe-topo);display:flex;align-items:center;
  justify-content:space-between;gap:24px;
}
.oe-topo__logo{display:flex;align-items:center;flex:none;}
.oe-topo__logo img{width:100px;height:50px;object-fit:contain;display:block;}

.oe-nav{display:flex;align-items:center;}
.oe-nav__lista{display:flex;align-items:center;list-style:none;margin:0;padding:0;}
.oe-nav__lista a{
  display:block;padding:0 12.5px;
  font-weight:700;font-size:12px;line-height:1.3;text-transform:uppercase;
  color:var(--oe-texto);text-decoration:none;transition:color .15s;
}
.oe-nav__lista a:hover,.oe-nav__lista a[aria-current="page"]{color:var(--oe-ouro-600);}

/* o carrinho: ícone + valor, como no site — o alvo de quem já escolheu a barra */
.oe-topo__carrinho{
  display:inline-flex;align-items:center;gap:9px;margin-left:12px;
  color:var(--oe-texto);text-decoration:none;
  font-weight:600;font-size:12px;text-transform:uppercase;
}
.oe-topo__carrinho:hover{color:var(--oe-ouro-600);}
.oe-topo__carrinho svg{width:15px;height:15px;fill:currentColor;flex:none;}
.oe-topo__conta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--oe-ouro-gradiente);color:var(--oe-verde-950);
  font-size:10px;font-weight:700;line-height:1;
}

/* ── o menu do celular ─────────────────────────────────────────────────────────────────────
   ⚠ SEM JAVASCRIPT, por caixa de seleção escondida. `<details>` não serve: o navegador esconde
   o conteúdo de um details fechado com `content-visibility`, e nenhum `display` meu reabre — no
   desktop o menu ficava com largura zero e o CSS parecia certíssimo. A caixa só depende de
   `:checked`, sem regra de agente de usuário no caminho, e ainda recebe foco: abre pelo teclado. */
.oe-topo__caixa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.oe-topo__botao{
  display:none;flex:none;cursor:pointer;color:var(--oe-texto);
  /* 44×44 de alvo com um ícone de 18×14: é o mínimo de toque do DESIGN.md §11, e este é o único
     jeito de abrir o menu no celular — errar nele é o menu não abrir. */
  padding:15px 13px;margin-right:-13px;
}
.oe-topo__botao svg{display:block;width:18px;height:14px;fill:currentColor;}

@media (max-width:999px){
  .oe-topo__linha{min-height:84px;}
  .oe-topo__botao{display:block;}
  .oe-nav{
    position:fixed;inset:0 0 0 auto;width:min(500px,86vw);z-index:50;
    background:var(--oe-painel);backdrop-filter:blur(6px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:96px 32px 32px;gap:0;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;visibility:hidden;
  }
  .oe-topo__caixa:checked ~ .oe-nav{transform:none;visibility:visible;}
  .oe-nav__lista{flex-direction:column;align-items:stretch;}
  .oe-nav__lista a{
    padding:14px 0;font-size:20px;font-weight:700;text-transform:none;color:var(--oe-sobre-escuro);
  }
  .oe-nav__lista a:hover,.oe-nav__lista a[aria-current="page"]{color:var(--oe-ouro-300);}
  .oe-topo__carrinho{margin:20px 0 0;color:var(--oe-sobre-escuro);font-size:14px;}
  .oe-topo__carrinho:hover{color:var(--oe-ouro-300);}
  /* o próprio rótulo vira o X, por cima do painel */
  .oe-topo__caixa:checked ~ .oe-topo__botao{position:fixed;right:24px;top:24px;z-index:51;color:var(--oe-sobre-escuro);}
}
@media (min-width:1000px){
  .oe-topo__caixa,.oe-topo__botao{display:none;}
}

/* ══ AVISO DE COOKIES ══════════════════════════════════════════════════════════════════════
   Fica no fim do corpo e por cima de tudo. Enquanto ninguém decide, NADA é medido. */
.oe-cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:70;
  max-width:560px;margin-inline:auto;
  background:var(--oe-verde-900);color:var(--oe-sobre-verde);
  border:1px solid var(--oe-borda-escura);border-radius:16px;
  padding:20px 22px;box-shadow:var(--oe-sombra-verde);
  font-size:14px;line-height:1.6;
}
.oe-cookies[hidden]{display:none;}
.oe-cookies p{margin:0 0 14px;}
.oe-cookies a{color:var(--oe-ouro-300);text-decoration:underline;text-underline-offset:2px;}
.oe-cookies__acoes{display:flex;gap:10px;flex-wrap:wrap;}
.oe-cookies button{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
  padding:11px 18px;border-radius:6px;border:1.5px solid transparent;
}
.oe-cookies__sim{background:var(--oe-ouro-gradiente);color:var(--oe-verde-950);}
.oe-cookies__nao{background:transparent;border-color:var(--oe-borda-escura);color:var(--oe-ouro-300);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}