/*
 * D.E.P.K03.03 - header/hdr.css
 * DEP-ID: LP-0460E1660E
 */
/* header/hdr.css — estrutura das headers (prefixo hd-). Só estrutura: cores vêm de --lp-* (gestor CSS/aparencia)
   ou, nas headers antigas, de --headerTextColor / --headerIconColor gravados pelo tema da header. */

.hd{ --hd-fg:var(--headerTextColor, var(--lp-ink,#102b42)); --hd-ic:var(--headerIconColor, var(--lp-heading,#073b60));
     box-sizing:border-box; position:relative; width:100%; color:var(--hd-fg); }
.hd *{ box-sizing:border-box; }

/* ---------- ilinks ---------- */
.hd-ils{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.hd-il{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:40px; height:40px; padding:0 12px;
        border-radius:var(--lp-r-btn,12px); color:var(--hd-fg); text-decoration:none; font-weight:600; font-size:14px;
        border:var(--lp-bw,1px) solid transparent; background:transparent; cursor:pointer;
        transition:background var(--lp-dur,.2s), border-color var(--lp-dur,.2s), transform var(--lp-dur,.2s); }
.hd-il i{ color:var(--hd-ic); font-size:18px; }
.hd-il:hover{ background:color-mix(in srgb, var(--hd-ic) 12%, transparent); }
.hd-il:focus-visible{ outline:var(--lp-ring-w,3px) solid var(--lp-ring,#ff941e); outline-offset:2px; }
.hd-il.is-ativo{ border-color:var(--hd-ic); }
.hd-ils--icone .hd-il{ padding:0; width:40px; }

/* ---------- categorias ---------- */
.hd-cats{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-width:0; }
.hd-cat{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--lp-r-chip,999px);
         color:var(--hd-fg); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; }
.hd-cat:hover{ background:color-mix(in srgb, var(--hd-ic) 12%, transparent); }
.hd-cat img{ width:20px; height:20px; border-radius:6px; object-fit:cover; }

/* ---------- aviso / contato ---------- */
.hd-aviso{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--lp-r-chip,999px);
           background:color-mix(in srgb, var(--hd-ic) 14%, transparent); color:var(--hd-fg); font-size:13px; font-weight:600; text-decoration:none; }
.hd-aviso i{ color:var(--hd-ic); }
.hd-contato{ display:flex; align-items:center; gap:14px; margin-left:auto; font-size:13px; }
.hd-contato__i{ display:inline-flex; align-items:center; gap:6px; color:var(--hd-fg); text-decoration:none; font-weight:600; }
.hd-contato__i i{ color:var(--hd-ic); }

/* ---------- faixa (plus: blocos de linha 2 / padraoSistema: segunda linha) ---------- */
.hd-faixa{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:6px 16px; min-height:40px; }

/* ---------- plus: blocos flutuantes no topo ---------- */
.hd-flut{ position:absolute; display:flex; align-items:center; z-index:15; }

/* =========================================================
   padraoSistema (visual do kitHome, ligado aos tokens lp-*)
   ========================================================= */
.hd-sys{ background:var(--hd-bg, var(--lp-card-bg,#fff)); border-bottom:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14));
         position:relative; z-index:20; }
.hd-sys__in{ width:min(1180px, 100% - 32px); margin-inline:auto; }
.hd-sys__row{ display:flex; align-items:center; gap:24px; height:var(--hd-h,100px); }
.hd-sys__row2{ display:flex; align-items:center; gap:12px; padding:0 0 10px; flex-wrap:wrap; }
.hd-logo{ display:block; flex:0 0 auto; text-decoration:none;
  width:var(--hd-logo-w,150px); height:min(78px, calc(var(--hd-h,100px) - 22px));
  background:var(--hd-logo-light) center / contain no-repeat; }
/* tema escuro (atributo do gestor de Aparência); sem o atributo, segue a preferência do sistema */
html[data-tema="escuro"] .hd-logo{ background-image:var(--hd-logo-dark); }
@media (prefers-color-scheme:dark){ html:not([data-tema]) .hd-logo{ background-image:var(--hd-logo-dark); } }
.hd-busca{ position:relative; flex:1 1 auto; max-width:600px; margin:0 auto; }
.hd-busca .search-container{ position:relative; width:100%; }
.hd-busca .search-container input{ width:100%; height:48px; padding:0 18px; font:inherit; font-size:15px;
        color:var(--lp-campo-fg,var(--lp-ink,#102b42)); background:var(--lp-campo-bg,#fff);
        border:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); border-radius:999px; outline:0;
        box-shadow:0 6px 22px rgba(var(--lp-shadow-rgb,11,39,59),.07); transition:border-color var(--lp-dur,.2s); }
.hd-busca .search-container input::placeholder{ color:var(--lp-campo-ph,#7a8a97); }
.hd-busca .search-container input:focus{ border-color:var(--lp-heading,#073b60); }
.hd-busca .search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60; list-style:none; margin:0; padding:8px;
        max-height:70vh; overflow:auto; background:var(--lp-card-bg,#fff); color:var(--lp-ink,#102b42);
        border:var(--lp-bw,1px) solid var(--lp-line,rgba(16,43,66,.14)); border-radius:var(--lp-r-card,18px);
        box-shadow:0 24px 70px rgba(var(--lp-shadow-rgb,11,39,59),.18); }
.hd-sys .hd-ils{ margin-left:auto; }
.hd-busca + .hd-ils{ margin-left:0; }

@media (max-width:768px){
  .hd-sys__row{ height:auto; flex-wrap:wrap; gap:10px; padding:12px 0 8px; }
  .hd-logo{ order:1; margin-right:auto; }
  .hd-logo{ height:52px; width:min(var(--hd-logo-w,150px), 60vw); }
  .hd-sys .hd-ils{ order:2; margin-left:0; }
  /* iLinks com texto não podem alargar a página no celular: quebram em linhas (nada fica escondido) */
  .hd-ils{ flex:0 1 auto; flex-wrap:wrap; min-width:0; max-width:100%; }
  .hd-menu-slot{ order:2; }
  .hd-busca{ order:3; flex:1 1 100%; max-width:none; margin:0; }
  .hd-contato{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .hd *{ transition:none !important; } }

/* campo de busca das headers de layout livre (plus/fallback): o container já traz fundo, borda e raio */
.hd:not(.hd-sys) .searchbar > input{ width:100%; height:100%; padding:0 14px; background:transparent; border:0; outline:0; font:inherit; color:#102b42; }
.hd:not(.hd-sys) .searchbar > .search-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; list-style:none; margin:0; padding:6px; max-height:60vh; overflow:auto; background:#fff; color:#102b42; border:1px solid rgba(16,43,66,.14); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.2); }

/* ---- espalhamento: o fundo da header esmaece na base e se estende por trás do conteúdo ---- */
.hd-sys--wash{ background:transparent !important; border-bottom:0; z-index:auto; }
.hd-sys--wash::before{ content:""; position:absolute; z-index:-1; pointer-events:none; left:0; right:0; top:0; bottom:calc(var(--hd-over,0px) * -1);
  background:var(--hd-bg,var(--lp-card-bg,#fff));
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--hd-solid,100%),transparent 100%); mask-image:linear-gradient(to bottom,#000 var(--hd-solid,100%),transparent 100%);
  -webkit-backdrop-filter:blur(var(--hd-blur,0px)); backdrop-filter:blur(var(--hd-blur,0px)); }

/* celular: troca pelo ícone (quando a loja tem ícone e a opção "Logo no celular = Ícone") */
@media (max-width:560px){
  html .hd-logo.hd-logo--ico{ width:52px; background-image:var(--hd-logo-icon) !important; }
}

/* ---- logo SVG único (hdr_logo_svg.php): cores por tema, vista por tela ---- */
.hd-logo.hd-logo--svg{ background:none !important; width:auto; max-width:var(--hd-logo-w,260px); display:flex; align-items:center; }
.hd-lg{ display:flex; align-items:center; height:100%; max-width:100%; }
.hd-lg__defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.hd-lg__v{ height:100%; width:auto; max-width:var(--hd-logo-w,260px); overflow:visible; }
@media (max-width:768px){ .hd-logo.hd-logo--svg{ width:auto; max-width:min(var(--hd-logo-w,260px), 60vw); } }

/* ---- linha 3: faixa de largura total abaixo da header (padraoSistema) ---- */
.hd-sys__row3{ position:relative; width:100%; border-top:var(--lp-bw,1px) solid color-mix(in srgb, var(--hd-fg,#102b42) 10%, transparent); }
.hd-sys__row3-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; min-height:40px; }
.hd-sys__row3 .hd-aviso{ display:flex; justify-content:center; flex:1 1 100%; width:100%; min-height:40px; padding:8px 16px;
  border-radius:0; border:0; font-size:14px; text-align:center; }
.hd-sys__row3 .hd-aviso:only-child{ margin:0; }
.hd-sys__row3 > .hd-sys__row3-in > :not(.hd-aviso){ padding:6px 0; }