@charset "utf-8";

header .fundo { float: left; width: 90%; padding: 0 5%; background-color: rgb(220 0 0);}

header .chave { display: none; top: 22px; left: 2%;}
header .chave.abrir { background: url('../../imagens/loja/header-chave-abrir.png?v9') 50% no-repeat;}
header .chave.fechar { background: url('../../imagens/loja/header-chave-fechar.png?v3') 50% no-repeat;}

header .logo { float: left; padding: 15px 0;}

header .buscar { float: left; width: 270px; margin: 20px 0 0 3%;}
header .buscar .like { padding: 10px 40px 10px 10px; z-index: 2;}
header .buscar .like:focus { -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 30%); -moz-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 30%); box-shadow: 0 5px 10px 0 rgb(0 0 0 / 30%);}
header .buscar .lupa { top: 0; right: 0; z-index: 3; background: url('../../imagens/loja/header-buscar.png?v4') 50% no-repeat;}
header .buscar .resul { top: 45px; left: 0; z-index: 4;}
header .buscar .resul .tab .imagem { width: 70px; height: 70px; top: 5px; left: 5px;}
header .buscar .resul .tab .detalhes { min-height: 70px; padding: 0 0 0 80px;}
header .buscar .resul .tab .detalhes h2 { font-size: 1em;}
header .buscar .resul .tab .detalhes h3 { font-size: 1em;}
header .buscar .resul .tab:hover { background-color: rgb(90 90 90 / 15%);}
header .buscar .resul .fechar { top: 5px; right: 5px;}
header .buscar .desfoque { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color:rgb(0 0 0 / 30%);}

header .links { float: left; margin: 0 0 0 2%;}
header .links .um { float: left; padding: 43px 12px 42px; color: rgb(255 255 255) !important;}
header .links .um:hover { padding: 45px 12px 40px; background-color: rgb(0 0 0 / 20%) !important;}
header .links .um.ativo { background-color: rgb(0 0 0 / 20%);}
header .links:hover .um.ativo { background-color: rgb(0 0 0 / 0);}

header .checkout { float: right; margin: 23px 0 0;}
header .checkout .icon { float: left; width: 35px; height: 35px; background: rgb(255 255 255) url('../../imagens/loja/header-checkout.png?v4') 40% 60% no-repeat;}
header .checkout .nun { float: left; margin: 7px 0 0 5px; color: rgb(255 255 255);}

header .login { float: right; margin: 23px 4px 0 0;}
header .login .icon { float: left; width: 35px; height: 35px; background: rgb(255 255 255) url('../../imagens/loja/header-login.png?v4') 50% no-repeat;}

header .lojafisica { float: right; margin: 20px 2% 0 0; outline: 2px solid rgb(255 255 255);}
header .lojafisica .icon { position: absolute; width: 25px; height: 100%; top: 0; left: 5px; background: url('../../imagens/loja/header-lojafisica.png?v4') 50% no-repeat;}
header .lojafisica .nome { float: left; padding: 20px 10px 20px 33px; line-height: 0; color: rgb(255 255 255);}
header .lojafisica:hover { background-color: rgb(5 5 5 / 10%);}

@media only screen and (max-width: 1000px){
  header .fundo { width: 100%; padding: 0;}

  header .chave { display: block;}
  header .buscar { display: none;}
  header .links { display: none;}
  header .lojafisica { display: none;}

  header .logo { width: 100%;}

  header .buscar { width: 96%; margin: 0 2%;}
  header .buscar .like { width: 100%;}

  header .links { width: 96%; margin: 11px 2% 0; outline: 1px solid rgb(0 0 0 / 20%);}
  header .links .um { width: 100%; padding: 21px 0; border-top: 1px solid rgb(0 0 0 / 20%); text-align: center;}
  header .links .um:hover { padding: 21px 0;}
  header .links .um.home { border-top: 0;}
  header .lojafisica { margin: 11px 2%;}
  header .login { position: absolute; top: 25px; right: 2%; margin: 0 52px 0 0;}
  header .checkout { position: absolute; top: 25px; right: 2%; margin: 0;}
}
@media only screen and (max-width: 450px){
  header .logo img { height: 30px;}

  header .chave { top: 10px;}
  header .login { top: 12px;}
  header .checkout { top: 12px;}
}