@charset "utf-8";

header { -webkit-box-shadow: 0 15px 10px -10px rgb(0 0 0 / 20%); -moz-box-shadow: 0 15px 10px -10px rgb(0 0 0 / 20%); box-shadow: 0 15px 10px -10px rgb(0 0 0 / 20%);}

header .linha1 { display: none;}
header .linha2 { float: left; width: 86%; padding: 15px 0; margin: 0 7%; position: relative;}
header .linha3 { float: left; width: 86%; padding: 0 0 5px; margin: 0 7%; position: relative;}

header .chave { display: none; position: absolute; width: 40px; height: 40px; top: 0; left: 0; margin: 0;}
header .chave.abrir { background: 50% no-repeat;}
header .chave.fechar { background: 50% no-repeat;}

header .logo { float: left; font-size: 0;}

header .buscar { position: absolute; width: 50%; height: 40px; top: 50%; left: 50%; margin: -20px 0 0 -25%;}
header .buscar .like { float: left; width: 100%; height: 100%; padding: 10px 40px 10px 10px; outline: 1px solid rgb(90 90 90); position: relative; z-index: 9;}
header .buscar .lupa { position: absolute; width: 30px; height: 100%; top: 0; right: 5px; z-index: 10; background: 50% no-repeat;}
header .buscar .resul { position: absolute; width: 100%; top: 45px; left: 0; z-index: 10;}
header .buscar .resul .ajax { float: left; width: 100%;}
header .buscar .resul .tab { float: left; width: 100%; margin: 4px 0; position: relative;}
header .buscar .resul .tab .imagem { position: absolute; width: 70px; height: 70px; top: 0; left: 0; outline: 1px solid rgb(90 90 90 / 30%);}
header .buscar .resul .tab .detalhes { float: left; width: 100%; min-height: 70px; padding: 0 0 0 80px;}
header .buscar .resul .tab .detalhes h2 { float: left; width: 100%; font-weight: bold; font-size: 1em; line-height: 1;}
header .buscar .resul .tab .detalhes h3 { float: left; width: 100%; font-size: 1em;}
header .buscar .resul .fechar { position: absolute; width: 25px; height: 25px; top: 10px; right: 10px; background-color: rgb(230 0 50); font-weight: bold; color: rgb(250 250 250);}
header .buscar .resul .fechar:hover { background-color: rgb(255 0 0);}
header .buscar .desfoque { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 8; background-color:rgb(0 0 0 / 30%);}

header .checkout { position: absolute; width: 40px; height: 40px; top: 50%; right: 0; margin: -20px 0 0;}
header .checkout .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: 50% no-repeat;}
header .checkout .nun { position: absolute; z-index: 1; font-weight: bold; font-size: 0.8em;}
header .checkout .nun.carrinho { top: 3px; right: 15px;}

header .endereco { float: left; width: 150px; padding: 0 0 0 30px; background: rgb(90 90 90 / 10%) 0 50% no-repeat;}
header .endereco h3 { float: left; width: 100%; padding: 10px 0 8px; margin: 2px 0 0; font-size: 0.8em; line-height: 0;}
header .endereco h4 { float: left; width: 100%; padding: 10px 0; font-size: 0.9em; line-height: 0;}
header .endereco:hover { background-color: rgb(90 90 90 / 20%);}

header .links { position: absolute; top: 0; left: 0; margin: 0 100px 0 170px;}
header .links::-webkit-scrollbar { height: 2px;}
header .links .um { float: left; margin: 0 20px 0 2px;}
header .links .um .lk { float: left; width: 100%; padding: 20px 0 18px; border-bottom: 2px solid transparent; line-height: 0;}
header .links .um .lk:hover { border-bottom: 2px solid;}
header .links .seta { padding: 0 15px 0 0; background: 100% 50% no-repeat;}

header .auth { position: absolute; top: 0; right: 0; padding: 0 0 0 25px; background: 0 50% no-repeat;}
header .auth .bt { float: left; padding: 20px 0; text-transform: uppercase; font-weight: bold; line-height: 0;}

/* CLEAR */
header.clear .chave.abrir { background-image: url('../img/preto-header-chave-abrir.png');}
header.clear .chave.fechar { background-image: url('../img/preto-header-chave-fechar.png');}
header.clear .buscar .lupa { background-image: url('../img/preto-header-buscar.png');}
header.clear .checkout .ico { background-image: url('../img/preto-header-checkout.png');}
header.clear .endereco { background-image: url('../img/preto-header-endereco.png');}
header.clear .links .seta { background-image: url('../img/preto-header-link-seta.png');}
header.clear .auth { background-image: url('../img/preto-header-auth-entrar.png');}

/* DARK */
header.dark .chave.abrir { background-image: url('../img/branco-header-chave-abrir.png');}
header.dark .chave.fechar { background-image: url('../img/branco-header-chave-fechar.png');}
header.dark .buscar .lupa { background-image: url('../img/branco-header-buscar.png');}
header.dark .checkout .ico { background-image: url('../img/branco-header-checkout.png');}
header.dark .endereco { background-image: url('../img/branco-header-endereco.png');}
header.dark .links .seta { background-image: url('../img/branco-header-link-seta.png');}
header.dark .auth { background-image: url('../img/branco-header-auth-entrar.png');}

/* CATEGORIAS */
@media only screen and (min-width: 1001px){
  header .categorias { position: relative;}
  header .categorias .flutuante { display: none; position: absolute; width: 250px; top: 100%; left: 0; padding: 10px; -webkit-border-radius: 20px; -webkit-border-top-left-radius: 2px; -moz-border-radius: 20px; -moz-border-radius-topleft: 2px; border-radius: 20px; border-top-left-radius: 2px;}
  header .categorias .flutuante a { float: left; width: 100%; padding: 7px 0; border-bottom: 1px solid rgb(90 90 90 / 50%);}
  header .categorias .lk:hover { border-bottom: 2px solid transparent !important;}
  header .categorias:hover .flutuante { display: block;}
}
@media only screen and (max-width: 1000px){
  header .categorias { position: relative;}
  header .categorias .flutuante { display: none; float: left; width: 100%; padding: 10px;}
  header .categorias .flutuante a { float: left; width: 100%; padding: 10px 0; border-bottom: 1px solid rgb(90 90 90 / 50%);}
  header .categorias .lk:hover { border-bottom: 0 !important;}
}

@media only screen and (max-width: 1000px){
  header { padding: 0 0 8px;}
  header .linha2 { width: 96%; padding: 0; margin: 0 2%;}
  header .linha3 { display: none; width: 96%; padding: 0; margin: 0 2%;}

  header .chave { display: block;}

  header .logo { width: 100%; text-align: center;}
  header .logo img { padding: 10px 0 8px;}
  header .buscar { position: relative; float: left; width: 100%; top: 0; left: 0; margin: 0;}
  header .checkout { top: 0; margin: 0;}
  header .endereco { width: 100%; margin: 5px 0;}
  header .links { position: relative; float: left; width: 100%; margin: 0 0 10px; outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px;}
  header .links .um { width: 100%; margin: 0; border-bottom: 1px solid rgb(90 90 90 / 40%);}
  header .links .um .lk { padding: 20px 10px; border-bottom: 0; text-align: left;}
  header .links .um .lk:hover { border-bottom: 0; background-color: rgb(90 90 90 / 10%);}
  header .links .seta { padding: 0; background-position: 98%;}
  header .auth { position: relative; float: left; width: 100%; margin: 5px 0 0; background-color: rgb(90 90 90 / 20%); background-position: 7px 50%;}
  header .auth .bt { width: 100%; padding: 17px 0; text-align: center;}
}