/* ============================================================================
   ACM Etiquetas — cabeçalho, menu e rodapé
   ========================================================================= */

/* ------------------------------------------------------------- cabeçalho */
.cabecalho { position: sticky; top: 0; z-index: 100; background: var(--cor-primaria); color: #fff; }

.cabecalho__topo { border-bottom: 1px solid rgb(255 255 255 / .1); }
.cabecalho__topo-interno {
  display: flex; align-items: center; gap: var(--esp-4);
  min-height: var(--cabecalho-altura);
}

.cabecalho__logo { flex-shrink: 0; }
.cabecalho__logo img { height: 40px; width: auto; }

.cabecalho__menu-botao {
  display: none; background: none; border: none; color: #fff;
  width: 44px; height: 44px; cursor: pointer; padding: 0;
}
.hamburguer, .hamburguer::before, .hamburguer::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.hamburguer { position: relative; margin-inline: auto; }
.hamburguer::before, .hamburguer::after { content: ""; position: absolute; left: 0; }
.hamburguer::before { top: -7px; }
.hamburguer::after  { top: 7px; }

/* ---------------------------------------------------------------- busca */
.busca { flex: 1; display: flex; max-width: 560px; }
.busca input {
  flex: 1; min-height: 44px; padding: .6rem 1rem;
  border: 1px solid transparent; border-radius: var(--raio) 0 0 var(--raio);
  font: inherit; background: #fff; color: var(--texto);
}
.busca button {
  min-width: 52px; min-height: 44px; border: none; cursor: pointer;
  background: var(--cor-acao); color: #fff; border-radius: 0 var(--raio) var(--raio) 0;
  display: grid; place-items: center;
}
.busca button:hover { background: var(--cor-acao-clara); }

/* ---------------------------------------------------------------- ações */
.cabecalho__acoes { display: flex; align-items: center; gap: var(--esp-4); margin-left: auto; }
.cabecalho__acao {
  display: flex; align-items: center; gap: var(--esp-2);
  color: #fff; font-size: .9rem; font-weight: 500; padding: .4rem;
}
.cabecalho__acao:hover { color: var(--cor-cinza-etiqueta); text-decoration: none; }

.cabecalho__carrinho { position: relative; }
.cabecalho__contador {
  position: absolute; top: -2px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--cor-acao); border-radius: 999px;
  font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}

/* ------------------------------------------------------------- mega menu */
.menu { background: var(--cor-primaria-escura); }
.menu__lista { display: flex; list-style: none; margin: 0; padding: 0; }
.menu__item { position: static; }
.menu__item--fim { margin-left: auto; }

.menu__link {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: .85rem 1.1rem; color: #fff; font-size: .95rem; font-weight: 500;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.menu__link:hover, .menu__item--aberto > .menu__link {
  background: var(--cor-acao); text-decoration: none;
}
.menu__seta { transition: transform .15s; }
.menu__item--aberto .menu__seta { transform: rotate(180deg); }

.menu__painel {
  position: absolute; left: 0; right: 0; z-index: 90;
  background: #fff; color: var(--texto);
  border-top: 3px solid var(--cor-acao); box-shadow: var(--sombra-g);
}
/* Sem JS o painel ainda abre por hover/foco: cabeçalho que só funciona com
   JavaScript deixa o site sem navegação quando um script falha. */
.menu__item--com-painel:hover .menu__painel,
.menu__item--com-painel:focus-within .menu__painel { display: block; }
.menu__painel[hidden] { display: none; }
.menu__item--com-painel:hover .menu__painel[hidden],
.menu__item--com-painel:focus-within .menu__painel[hidden] { display: block; }

.menu__painel-interno { padding: var(--esp-6) var(--esp-4); }
.menu__painel-titulo {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-suave); margin-bottom: var(--esp-4);
}
.menu__subs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--esp-2) var(--esp-6); list-style: none; padding: 0; margin: 0 0 var(--esp-4);
}
.menu__subs a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem 0; color: var(--texto);
}
.menu__subs a:hover { color: var(--cor-acao); }
.menu__contagem { color: var(--texto-suave); font-size: .82rem; }
.menu__ver-todos { font-weight: 600; display: inline-block; }

/* ----------------------------------------------------------- menu mobile */
.menu-mobile { position: fixed; inset: 0; z-index: 200; }
.menu-mobile[hidden] { display: none; }
.menu-mobile__fundo { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.menu-mobile__painel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 85vw);
  background: #fff; overflow-y: auto; box-shadow: var(--sombra-g);
}
.menu-mobile__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-4); background: var(--cor-primaria); color: #fff;
}
.menu-mobile__fechar {
  background: none; border: none; color: #fff; font-size: 1.75rem;
  width: 44px; height: 44px; cursor: pointer; line-height: 1;
}
.menu-mobile__voltar { background: none; border: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.menu-mobile__lista { list-style: none; margin: 0; padding: 0; }
.menu-mobile__item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: var(--esp-4); min-height: 52px;
  background: none; border: none; border-bottom: 1px solid var(--borda);
  font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.menu-mobile__item:hover { background: var(--fundo-suave); text-decoration: none; }
.menu-mobile__item--destaque { font-weight: 700; color: var(--cor-acao); }
.menu-mobile__separador { height: var(--esp-4); background: var(--fundo-suave); }
.menu-mobile__nivel { position: absolute; inset: 0; background: #fff; overflow-y: auto; }
.menu-mobile__nivel[hidden] { display: none; }

/* --------------------------------------------------------------- rodapé */
.rodape { background: var(--cor-primaria); color: #fff; margin-top: var(--esp-12); }
.rodape__colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-8); padding-block: var(--esp-12) var(--esp-8);
}
.rodape__titulo { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-cinza-etiqueta); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--esp-2); }
.rodape a { color: #fff; font-size: .93rem; }
.rodape a:hover { color: var(--cor-cinza-etiqueta); }
.rodape__frase { color: var(--cor-cinza-etiqueta); font-size: .9rem; margin-top: var(--esp-3); }
.rodape__base { border-top: 1px solid rgb(255 255 255 / .1); padding-block: var(--esp-4); }
.rodape__base p { margin: 0; font-size: .85rem; color: var(--cor-cinza-etiqueta); }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1023px) {
  .cabecalho__menu-botao { display: block; }
  .menu { display: none; }
  .cabecalho__acao span { display: none; }
  .cabecalho__logo img { height: 34px; }
}

@media (max-width: 640px) {
  .cabecalho__topo-interno { flex-wrap: wrap; padding-block: var(--esp-2); }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
}