@charset "utf-8";

#header .linha1 { padding: 40px 0 7px;}
#header .linha2 { padding: 0;}
#header .linha3 { position: absolute; width: 100%; height: 30px; top: 0; left: 0; font-size: 0.9em;}

/* LINHA1 */
#header .chave { display: none; top: 25px; left: 2%;}
#header .chave.abrir { background: url('../imagens/header-chave-abrir.png?1') 50% no-repeat;}
#header .chave.fechar { background: url('../imagens/header-chave-fechar.png?1') 50% no-repeat;}

#header .logo { float: left; font-size: 0;}
#header .logo img { height: 100px;}

#header .buscar { float: left; width: 45%; margin: 27px 5% 0;}
#header .buscar .ico { position: absolute; width: 40px; height: 40px; top: 0; right: 0; background-image: url('../imagens/header-buscar.png?v1');}
#header .buscar .campo { height: 40px; padding: 0 40px 0 10px;}

#header .auth { display: flex; align-items: center; float: left; margin: 27px 0 0;}
#header .auth .ico { float: left; width: 40px; height: 40px; background-image: url('../imagens/header-auth.png?v1');}
#header .auth .entre { float: left; margin: 0 0 0 10px; line-height: 1;}
#header .auth .entre a:hover { text-decoration: underline;}

#header .sacola { float: right; width: 40px; height: 40px; margin: 27px 0 0; background-image: url('../imagens/header-sacola.png?v1');}
#header .sacola b { position: absolute; width: 85%; top: -5px; right: 0; text-align: center;}

/* LINHA2 */
#header .divisao { opacity: 0.3;}
#header .categorias { display: flex; justify-content: space-between;}
#header .categorias .um { padding: 12px 0;}

/* LINHA3 */
#header .atalhos { float: left;}
#header .atalhos .um { float: left; padding: 6px 0; margin: 0 20px 0 0;}
#header .atalhos .um:hover { text-decoration: underline;}

#header .telefone { float: right; margin: 6px 0 0; padding: 0 0 0 20px;}
#header .telefone .ico { position: absolute; width: 20px; height: 100%; top: 0; left: 0; background-image: url('../imagens/htop-telefone.png?v1');}

#header .sociais { float: right; margin: 0 0 0 20px; border-right: 1px solid rgb(200 200 200 / 50%);}
#header .sociais a { float: left; width: 40px; height: 30px; margin: 0 0 0 2px; border-left: 1px solid rgb(200 200 200 / 50%);}
#header .sociais a.instagram { background-image: url('../imagens/htop-instagram.png?v1');}
#header .sociais a.youtube { background-image: url('../imagens/htop-youtube.png?v1');}
#header .sociais a.tiktok { background-image: url('../imagens/htop-tiktok.png?v1');}

@media only screen and (max-width: 1000px){
  #header .linha1 { padding: 0;}
  #header .linha3 { position: relative; height: auto; font-size: 1em;}

  #header .chave { display: block;}
  #header .auth { display: none;}
  #header .linha2 { display: none;}
  #header .linha3 { display: none;}

  /* LINHA1 */
  #header .logo { width: 100%; margin: 8px 0 0; text-align: center;}
  #header .buscar { width: 100%; margin: 8px 0;}
  #header .auth { margin: 12px 0 20px;}
  #header .sacola { position: absolute; top: 27px; right: 2%; margin: 0;}

  /* LINHA2 */
  #header .categorias { flex-direction: column; padding: 10px 0;}
  #header .categorias .um { padding: 15px 10px; text-align: center;}

  /* LINHA3 */
  #header .atalhos { width: 100%; padding: 15px 0;}
  #header .atalhos .um { width: 100%; padding: 15px 0; margin: 0; text-align: center;}
  #header .sociais { display: flex; justify-content: center; float: left; width: 100%; margin: 0; border-right: 0;}
  #header .sociais a { width: 50px; height: 50px; margin: 2px; border: 1px solid rgb(200 200 200 / 50%); border-radius: 5px;}
  #header .telefone { margin: 21px 0;}
}