/* Cabeçalho fixo e transparente, só com o logo. Altura de 56px, compensada no .hero e no .manifesto. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  background: transparent;
}

/* Logo fiel ao oficial: cubo de aresta 16px (altura projetada 32px) e palavra SVG de 41×9px.
   Entre o cubo e a palavra há 16px visíveis; a margem do cubo compensa a projeção das faces. */
.logo {
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--cinza-800);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Cubo: o externo tem a inclinação em X; o interno (.logo__giro) gira em Y. Aresta de 24.5px (cubo de 40px). */
.logo__cubo {
  position: relative;
  flex: none;
  width: 24.5px;
  height: 24.5px;
  /* 19px: a projeção do cubo passa ~5px da caixa; o vão visível fica em 14px */
  margin-right: 19px;
  transform-style: preserve-3d;
}

.logo__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.logo__face {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Faces com letra: o SVG da face é o fundo (fundo cinza, letra e acento já incluídos). O "y" fica no fundo
   do cubo e só aparece no giro da rolagem */
.logo__face--topo { background-image: url('../img/logo/face-e.svg'); }
.logo__face--esquerda { background-image: url('../img/logo/face-a.svg'); }
.logo__face--direita { background-image: url('../img/logo/face-z.svg'); }
.logo__face--fundo { background-image: url('../img/logo/face-y.svg'); }
.logo__face--tras { background-image: url('../img/logo/face-y.svg'); }
.logo__face--oposta { background-image: url('../img/logo/face-a.svg'); }

/* Materialização do cubo (materializar-logo.js): enquanto as células convergem, nenhuma face aparece, nem as de trás
   (que têm cor lisa e apareceriam através das da frente). As células são filhas das faces e voltam a ficar visíveis */
.logo__cubo--materializando .logo__face { visibility: hidden; }
.logo__cubo--materializando .logo__celula { visibility: visible; }

/* Células da materialização do cubo (materializar-logo.js): pixels que voam sobre a face até o lugar */
.logo__celula {
  position: absolute;
  display: block;
  pointer-events: none;
}

.logo__palavra {
  display: flex;
  transform-style: preserve-3d;
}

.logo__palavra svg {
  display: block;
  overflow: visible;
}

/* Após 140px de rolagem a palavra já se desfez e sai do fluxo, sem receber cliques */
.logo__palavra--ida {
  width: 0;
  pointer-events: none;
}

/* Ações no canto direito do cabeçalho, sempre na mesma linha do logo: a conta (icones.py, "usuario") e, na loja,
   o carrinho (icones.py, "sacola"). Anônimo leva a /entrar/; logado leva ao painel, com um ponto no canto do ícone */
.site-header__acoes {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.site-header__conta,
.site-header__carrinho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cinza-800);
  -webkit-tap-highlight-color: transparent;
}

.site-header__conta .icone,
.site-header__carrinho .icone { display: block; }

.site-header__conta:hover,
.site-header__carrinho:hover { background: rgba(43, 43, 48, 0.06); }

.site-header__conta:focus-visible,
.site-header__carrinho:focus-visible {
  outline: 2px solid var(--cinza-800);
  outline-offset: 2px;
}

/* Contador de itens do carrinho como badge sobre o ícone */
.site-header__contador {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cinza-800);
  color: var(--branco);
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--branco);
}

.site-header__conta--logado::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cinza-800);
  box-shadow: 0 0 0 2px var(--branco);
}