/* Topo no celular para as páginas copiadas da versão de computador do site
   original (home, categoria, área do cliente). O original esconde a linha do
   logo abaixo de 768px (.hidden-sm-down) porque no celular entrega outro topo;
   aqui ela volta compacta: logo, login/conta e sacola na linha, busca embaixo.
   (A página de produto tem o topo de celular próprio, product-orion.js.) */
@media (max-width: 767px) {
  header > .container.hidden-sm-down {
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 10px; width: 100%; max-width: 100%; padding: 10px 20px 10px 12px; height: auto;
  }
  header > .container.hidden-sm-down > * { position: static !important; margin: 0 !important; transform: none !important; }
  header > .container.hidden-sm-down .pk-hamburger { order: 0; }
  header > .container.hidden-sm-down .logo { order: 1; flex: 1 1 0; min-width: 0; display: block; }
  header > .container.hidden-sm-down .logo a { display: block; }
  header > .container.hidden-sm-down .logo svg { width: 100%; max-width: 260px; height: auto; display: block; }
  header > .container.hidden-sm-down .logo h1 { font-size: 8px; line-height: 1.2; margin: 3px 0 0; white-space: normal; }
  header > .container.hidden-sm-down > svg { display: none; }
  /* Como no original do celular: ☰, logo e sacola; o login fica no menu. */
  header > .container.hidden-sm-down .userInfo { display: none !important; }
  header > .container.hidden-sm-down .cartInfo { order: 3; flex: 0 0 auto; position: relative !important; }
  header > .container.hidden-sm-down .cartInfo .countItens { right: -6px !important; left: auto !important; }
  header > .container.hidden-sm-down .searchContainer { order: 4; flex: 1 0 100%; width: 100%; max-width: none; }
  header > .container.hidden-sm-down .searchContainer form,
  header > .container.hidden-sm-down .searchContainer fieldset { width: 100%; max-width: none; }
}

/* Menu do topo: centralizado quando cabe; quando não cabe (celular), rola para
   o lado em vez de alargar a página (em telas de toque, e não só abaixo de 767px:
   se o menu alargasse a página no celular, a tela passaria de 767px e as
   regras acima não valeriam). No computador o menu fica como no original. */
@media (hover: none), (max-width: 767px) {
  html body.notMobile .menuBar ul.menu { justify-content: safe center !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html body.notMobile .menuBar ul.menu::-webkit-scrollbar { display: none; }
}