/* R91: a barra de navegação é uma casca só, no site (customer/base.html) e na landing (site/src/style.css importa
   este arquivo). Forma e posição saem só destes tokens; o tema (fundo, borda, texto) é da página e a lista de itens é
   do papel (a do site está no fim do app.css). header.barra-nav (0,1,1) ganha das regras .header da landing sem depender da
   ordem; o arranjo de dentro fica em .barra-nav (0,1,0), que a página pode trocar (a landing usa grade e posição fixa). */
:root{--barra-max:1120px;--barra-lado:20px;--barra-topo:12px;--barra-altura:64px;--barra-pad:18px;--barra-raio:999px;
  --barra-sombra:0 6px 24px rgba(22,19,28,.06);--barra-logo:30px}
@media(max-width:800px){:root{--barra-lado:16px;--barra-topo:10px;--barra-altura:60px;--barra-pad:12px;--barra-logo:27px}}
@media(max-width:360px){:root{--barra-pad:8px;--barra-logo:24px}}
.barra-nav{position:relative;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:16px}
header.barra-nav{box-sizing:border-box;width:min(var(--barra-max),calc(100% - 2 * var(--barra-lado)));height:var(--barra-altura);
  margin:var(--barra-topo) auto 0;padding:0 var(--barra-pad);border:1px solid var(--barra-borda-cor,var(--linha));
  border-radius:var(--barra-raio);background:var(--barra-fundo,var(--superficie));color:var(--barra-texto,var(--texto));
  box-shadow:var(--barra-sombra)}
@supports(backdrop-filter:blur(18px)){header.barra-nav{background:var(--barra-vidro,var(--glass));backdrop-filter:var(--barra-desfoque,blur(18px));
  -webkit-backdrop-filter:var(--barra-desfoque,blur(18px))}}
@media(prefers-reduced-transparency:reduce){header.barra-nav{background:var(--barra-fundo,var(--superficie));backdrop-filter:none;-webkit-backdrop-filter:none}}
header.barra-nav .wordmark{font:800 var(--barra-logo)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.032em;color:inherit;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;white-space:nowrap}
header.barra-nav .wordmark>span{display:inline-block;width:.44em;height:.86em;margin-left:.05em;border-radius:.1em;background:var(--tangerina)}
/* R102 F2: o carrinho é o último item da barra, fora do «Menu» e do ☰, com alvo de 44 px. A lista do site encosta nele
   (sem flutuar no meio). O selo (tangerina com tinta, 5,9:1) só aparece com itens; o tema vem dos tokens da página. */
header.barra-nav .barra-itens{margin-left:auto}
.barra-carrinho{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;
  border-radius:999px;color:inherit;text-decoration:none}
.barra-carrinho-icone{width:24px;height:24px}
.barra-carrinho-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;
  background:var(--tangerina,var(--orange));color:var(--texto,var(--ink));font:700 11px/18px 'Schibsted Grotesk',sans-serif;
  text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--barra-fundo,var(--superficie,#FBF8F0))}
.barra-carrinho:hover{background:var(--fundo-alt,rgba(127,127,127,.14))}
.barra-carrinho[aria-current=page]{background:var(--fundo-alt,rgba(127,127,127,.14));color:var(--acao,inherit)}
.barra-carrinho:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(forced-colors:active){.barra-carrinho-n{forced-color-adjust:none;background:Highlight;color:HighlightText;box-shadow:none;
  outline:1px solid CanvasText}}