/* Cabeçalho único Napel: site, catálogo e loja usam ESTE arquivo.
   Prefixos nph- (cabeçalho), npb- (barra do celular), nps- (blocos novos do site) para não colidir com nada. */
.nph, .nph *, .npb, .npb * { box-sizing: border-box; }

.nph {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid #E3EBF1;
  font-family: 'Inter', system-ui, sans-serif; color: #082E49; line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.nph a { color: inherit; text-decoration: none; }
.nph svg { display: block; flex: 0 0 auto; }
.nph-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; gap: 20px; }

.nph-logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 48px; }
.nph-logo img { height: 36px; width: auto; display: block; }

.nph-nav { display: none; align-items: center; gap: 28px; margin: 0 auto; font-size: 15px; font-weight: 500; }
.nph-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; white-space: nowrap; }
.nph-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: #2f7cbf;
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.nph-nav a:hover::after, .nph-nav a[aria-current]::after { transform: scaleX(1); }
.nph-nav a[aria-current] { font-weight: 700; }
.nph-nav svg { width: 18px; height: 18px; color: #2f7cbf; }
.nph-nav .nph-loja { font-weight: 600; }
.nph-nav .nph-loja[aria-current] { font-weight: 700; }

.nph-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.nph-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; height: 48px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; transition: background .15s;
}
.nph-cart:hover { background: #EEF4F9; }
.nph-cart svg { width: 22px; height: 22px; }
.nph-cart span { display: none; }

.nph-wa {
  display: none; align-items: center; gap: 8px; height: 48px; padding: 0 18px; margin-left: 6px;
  border-radius: 10px; background: #047857; color: #fff !important;
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s;
}
.nph-wa:hover { background: #065f46; }
.nph-wa svg { width: 18px; height: 18px; }

.nph-burger {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: #082E49; cursor: pointer;
}
.nph-burger:hover { background: #EEF4F9; }
.nph-burger svg { width: 24px; height: 24px; }
.nph-burger .nph-x { display: none; }
.nph.open .nph-burger .nph-x { display: block; }
.nph.open .nph-burger .nph-m { display: none; }

.nph-panel { display: none; border-top: 1px solid #E3EBF1; background: #fff; max-height: calc(100vh - 64px); overflow-y: auto; }
.nph.open .nph-panel { display: block; }
.nph-panel nav { display: flex; flex-direction: column; padding: 4px 24px 20px; }
.nph-panel nav > a {
  display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: 8px 0;
  border-bottom: 1px solid #EEF3F6; font-size: 16px; font-weight: 500;
}
.nph-panel nav > a { position: relative; }
.nph-panel nav > a[aria-current] { font-weight: 700; }
.nph-panel nav > a[aria-current]::before { content: ''; position: absolute; left: -12px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: #2f7cbf; }
.nph-panel small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: #4a6375; }
.nph-panel .nph-wa { display: inline-flex; justify-content: center; margin: 18px 0 0; border-bottom: 0; flex-direction: row; font-size: 15px; }

.nph a:focus-visible, .nph button:focus-visible, .npb a:focus-visible { outline: 2px solid #2f7cbf; outline-offset: 2px; }

@media (max-width: 639.98px) {
  .nph-in { height: 64px; padding: 0 16px; gap: 8px; }
  .nph-logo img { height: 32px; }
  .nph-panel nav { padding: 4px 16px 20px; }
}
@media (min-width: 1024px) { .nph-in > .nph-acts .nph-wa { display: inline-flex; } }
@media (min-width: 1100px) {
  .nph-nav { display: flex; }
  .nph-burger, .nph-panel, .nph.open .nph-panel { display: none; }
}
@media (min-width: 1280px) {
  .nph-cart span { display: inline; }
  .nph-nav { gap: 32px; }
}

/* ---------- Barra fixa do celular (substitui o botão flutuante de WhatsApp) ---------- */
.npb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #D6E4EE;
  font-family: 'Inter', system-ui, sans-serif;
}
.npb a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border-radius: 10px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap;
}
.npb svg { width: 19px; height: 19px; flex: 0 0 auto; }
.npb-loja { background: #0A3C5F; }
.npb-wa { background: #047857; }
@media (max-width: 1023.98px) { body:has(.npb) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1024px) { .npb { display: none; } }