/* header019.css — CABECALHO OFICIAL UNICO DO APP019 — v1.0 2026-08-12
   Gemeo visual do header da home (home-nova/index.html), empacotado para servir
   QUALQUER pagina/loja com uma linha de <link> + <script>.
   Tudo com prefixo .h019 — nao colide com os tokens da home nem com os da loja. */

.h019{
  --h019-bg:rgba(255,255,255,.82);
  --h019-linha:#EEF0F3;
  --h019-cartao:#FFFFFF;
  --h019-borda:rgba(233,169,48,.32);
  --h019-tinta:#1B1B1F;
  --h019-mut:#5F6368;
  position:sticky; top:0; z-index:60;
  background:var(--h019-bg);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--h019-linha);
  box-shadow:0 1px 8px rgba(27,27,31,.05);
}
header.h019.h019-escuro{
  --h019-bg:#000000; --h019-linha:#26262C; --h019-cartao:#1B1B1F;
  --h019-borda:rgba(233,169,48,.40); --h019-tinta:#EFE7D5; --h019-mut:#9b917d;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.h019 *{box-sizing:border-box}
.h019-wrap{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}

/* botao de menu — 46px, vidro, igual ao da home */
.h019-menu{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 55%,rgba(233,169,48,.16));
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(138,94,4,.28);
  box-shadow:0 2px 10px rgba(27,27,31,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}
header.h019.h019-escuro .h019-menu{
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,rgba(233,169,48,.14));
  border:1px solid rgba(233,169,48,.34);
}
.h019-menu svg{width:22px;height:22px;fill:none;stroke:var(--h019-tinta);stroke-width:2;stroke-linecap:round}
.h019-menu:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,27,31,.12)}
.h019-menu:active{transform:scale(.94)}

.h019-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;min-height:44px;padding:0 4px;margin:0 -4px}
.h019-logo img{height:30px;width:auto;display:block}
.h019-sp{flex:1}

/* ---------- busca ----------
   Medidas COPIADAS do padrao g19v1 que 15 paginas do site ja usam (missao front 30/07),
   nao inventadas: mesma pilula branca, mesma borda de ouro, mesmo botao. A loja tinha
   ficado sem busca no cabecalho; com isto ela passa a bater com o resto do site. */
.h019-busca{
  flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  background:#FFFFFF;border:1px solid rgba(168,99,5,.35);border-radius:999px;
  padding:5px 6px 5px 16px;box-shadow:0 1px 4px rgba(27,27,31,.06);
}
header.h019.h019-escuro .h019-busca{background:#17171B;border-color:rgba(233,169,48,.38);box-shadow:none}
.h019-busca>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:#8A5E04;stroke-width:2;stroke-linecap:round}
header.h019.h019-escuro .h019-busca>svg{stroke:#E9A930}
/* o campo estica ate a altura da pilula: tocar em qualquer ponto dela foca a busca.
   Medido: o <input> sozinho tinha 19px de altura dentro de uma pilula de 54px. */
.h019-busca input{flex:1;align-self:stretch;min-height:42px;border:none;outline:none;background:transparent;font-size:15px;color:#1B1B1F;min-width:40px}
header.h019.h019-escuro .h019-busca input{color:#EFE7D5}
.h019-busca input::placeholder{color:#5F6368}
header.h019.h019-escuro .h019-busca input::placeholder{color:#9b917d}
.h019-mic{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;cursor:pointer;
  border:1px solid rgba(168,99,5,.4);background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease;
}
header.h019.h019-escuro .h019-mic{background:#17171B;border-color:rgba(233,169,48,.42)}
.h019-mic svg{width:18px;height:18px;fill:none;stroke:#8A5E04;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
header.h019.h019-escuro .h019-mic svg{stroke:#E9A930}
.h019-mic:active{transform:scale(.92)}
.h019-mic.ouvindo{background:#A86305;border-color:#A86305}
.h019-mic.ouvindo svg{stroke:#fff}
.h019-btn-buscar{
  min-height:40px;padding:0 16px;border:none;border-radius:12px;flex-shrink:0;cursor:pointer;
  background:linear-gradient(180deg,#A86305,#8A5E04);color:#FFFFFF;font-weight:700;font-size:14px;
  box-shadow:0 2px 8px rgba(138,94,4,.30);transition:transform .18s ease,box-shadow .18s ease;
}
.h019-btn-buscar:hover{box-shadow:0 4px 14px rgba(138,94,4,.4)}
.h019-btn-buscar:active{transform:scale(.96)}
.h019-acao{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* botao Entrar — ouro de vidro (branco sobre ouro ESCURO no claro; nunca fonte preta) */
.h019-entrar{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;border-radius:12px;font-size:13.5px;font-weight:800;text-decoration:none;
  background:linear-gradient(135deg,#A86305 0%,#96590A 45%,#8A5E04 100%);
  color:#FFFFFF;border:1px solid rgba(255,224,154,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(138,94,4,.28);
  text-shadow:0 1px 2px rgba(60,35,0,.45);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.h019-entrar:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 20px rgba(138,94,4,.34)}
.h019-entrar:active{transform:scale(.96)}

/* ---------- gaveta ---------- */
.h019-painel{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.h019-painel.aberto{visibility:visible;pointer-events:auto}
.h019-veu{position:absolute;inset:0;background:rgba(11,11,13,.55);opacity:0;transition:opacity .28s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.h019-painel.aberto .h019-veu{opacity:1}
.h019-gaveta{
  position:absolute;top:0;left:0;height:100%;width:min(310px,86vw);overflow-y:auto;
  background:var(--h019-cartao,#fff);color:var(--h019-tinta,#1B1B1F);
  padding:16px 14px 30px;transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:6px 0 30px rgba(0,0,0,.28);
  --h019-cartao:#FFFFFF;--h019-tinta:#1B1B1F;--h019-mut:#5F6368;
}
header.h019.h019-escuro ~ .h019-painel .h019-gaveta{--h019-cartao:#141418;--h019-tinta:#EFE7D5;--h019-mut:#9b917d;background:#141418;color:#EFE7D5}
.h019-painel.aberto .h019-gaveta{transform:translateX(0)}
.h019-fechar{
  width:100%;text-align:left;border:1px solid var(--h019-borda,rgba(233,169,48,.32));background:transparent;
  color:var(--h019-mut);font:inherit;font-size:13px;font-weight:700;padding:10px 12px;border-radius:10px;cursor:pointer;margin-bottom:12px;
}
.h019-grp{margin:16px 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--h019-mut);font-weight:800}
.h019-gaveta a{
  display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;
  color:inherit;text-decoration:none;font-size:14.5px;font-weight:600;
}
.h019-gaveta a:hover{background:rgba(233,169,48,.12)}
.h019-gaveta a .h019-dot{width:6px;height:6px;border-radius:50%;background:#A86305;flex-shrink:0}
.h019-emerg{
  border:1px solid rgba(217,48,37,.45);color:#D93025!important;font-weight:800!important;
  background:rgba(217,48,37,.07);margin-bottom:4px;
}
header.h019.h019-escuro ~ .h019-painel .h019-emerg{color:#FF8A80!important;border-color:rgba(255,138,128,.45);background:rgba(217,48,37,.14)}
.h019-emerg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* O botao "Compartilhar" do lojashare.js se prende a ESQUERDA do menu (ordem Rafael 23/07)
   procurando [aria-label="Abrir menu"] — que e exatamente o meu. Ele mora, portanto, DENTRO
   do meu wrap, e eu nao mando nele (o arquivo e outro).
   Medido 12/08 na mrsteel a 375px: com o rotulo em texto ele ocupa 127px e empurra o header
   para 5 linhas (177px, contra 129px da flora). No celular fica so o ICONE — a ordem que o
   Rafael pediu e preservada, e o `!important` e necessario porque o lojashare estiliza inline. */
/* O botao do lojashare tem padding proprio e fica com 33px de altura. Enquanto ele
   estiver DENTRO do meu wrap, eu garanto o piso de 38px da casa sem mexer no arquivo dele. */
.h019-wrap > #a19shhd{min-height:38px}

@media(max-width:620px){
  .h019-wrap > #a19shhd{
    font-size:0!important;      /* esconde o rotulo; o SVG tem width/height proprios e sobrevive */
    gap:0!important;
    padding:0!important;
    width:42px;height:42px;flex-shrink:0;justify-content:center;
  }
}

@media(max-width:620px){
  .h019-wrap{flex-wrap:wrap;gap:8px 10px}
  .h019-busca{order:9;flex-basis:100%}
  .h019-btn-buscar{display:none}          /* no celular o Enter ja busca; o botao so roubava espaco */
}
@media(max-width:520px){
  .h019-wrap{padding:10px 12px;gap:10px}
  .h019-menu{width:42px;height:42px;border-radius:12px}
  .h019-logo img{height:26px}
  .h019-entrar{min-height:38px;padding:0 13px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .h019-menu,.h019-entrar,.h019-gaveta,.h019-veu{transition:none!important}
}