@charset "utf-8";

#epagina { padding: 31px 0;}
#ecategoria { padding: 0;}
#eproduto { padding: 21px 0;}

#epagina .conteudo { padding: 11px 0;}

#ecategoria .nomesi { margin: 21px 0 0;}
#ecategoria .nomesi h1 { font-size: 1.5em;}
#ecategoria .nomesi h2 { font-size: 1em;}
#ecategoria .lado1 { width: 250px;}
#ecategoria .lado2 { flex: 1; padding: 0 1%;}
#ecategoria .filtros { padding: 0 10px; margin: 21px 0 0;}
#ecategoria .filtros .expandir { margin: 5px 0 0;}
#ecategoria .filtros .um span:hover { text-decoration: underline;}
#ecategoria .filtros .um b { display: none;}
#ecategoria .filtros .um.ativo b { display: block;}
#ecategoria .filtros .um:hover b { display: block !important;}
#ecategoria .filtros:hover .um.ativo b { display: none;}
#ecategoria .categorias { padding: 0 10px; margin: 21px 0;}
#ecategoria .categorias .expandir { margin: 5px 0 0;}
#ecategoria .categorias .um img { display: none;}
#ecategoria .categorias .um.ativo { background-color: rgb(255 255 255); -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);}
#ecategoria .categorias .um:hover { background-color: rgb(255 255 255); -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);}
#ecategoria .categorias .um.desk { display: block;}
#ecategoria .categorias .um.mobi { display: none;}
#ecategoria .categorias .dois.ativo { text-decoration: underline;}
#ecategoria .categorias .dois:hover { text-decoration: underline;}
#ecategoria .catsubs { padding: 0 10px; display: none;}
#ecategoria .produtos .ajax { flex-wrap: wrap; min-height: 200px;}
#ecategoria .produtos .item { width: 25%;}


#eproduto .comlado { gap: 25px;}
#eproduto .imagens { user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none;}
#eproduto .imagens .grande { justify-content: center; align-items: center;}
#eproduto .imagens .grande .image { max-width: 100%; max-height: 100%;}
#eproduto .imagens .pequenas { justify-content: center; align-items: center; gap: 5px; padding: 5px 0 10px;}
#eproduto .imagens .pequenas .image { margin: 10px 0 0; padding: 0 0 5px; border-bottom: 5px solid transparent;}
#eproduto .imagens .pequenas .image.ativo { border-bottom: 5px solid;}
#eproduto .imagens .nav { width: 30px; height: 30px; top: 50%; margin: -15px 0 0; background-size: 8px;}
#eproduto .imagens .nav.recuar { left: -15px; background-image: url('../imagens/seta-1.png');}
#eproduto .imagens .nav.avancar { right: -15px; background-image: url('../imagens/seta-2.png');}
#eproduto .imagens .nav:hover { transform: scale(1.07);}

#eproduto .nomesi h1 { font-size: 2em;}
#eproduto .nomesi h2 { font-size: 1em;}

#eproduto .preco h3 { font-size: 1em;}
#eproduto .preco h4 { font-size: 2em;}
#eproduto .preco h5 { font-size: 1.1em;}

#eproduto .quantidade { align-items: center; justify-content: space-between;}
#eproduto .quantidade .menos { background-color:  rgb(200 200 200); background-image: url('../imagens/eproduto-menos.png?v3');}
#eproduto .quantidade .mais { background-color:  rgb(200 200 200); background-image: url('../imagens/eproduto-mais.png?v3');}
#eproduto .quantidade :hover { background-color: rgb(180 180 180);}
#eproduto .adicionar .lk { width: 49%; height: 60px; font-size: 1.2em;}
#eproduto .adicionar .lk.carrinho { background-color: rgb(21 121 71); color: rgb(255 255 255) !important;}
#eproduto .adicionar .lk.carrinho:hover { background-color: rgb(15 104 59);}
#eproduto .adicionar .lk.comprar { outline: 2px solid rgb(21 121 71); outline-offset: -2px; color: rgb(21 121 71) !important;}
#eproduto .adicionar .lk.comprar:hover { background-color: rgb(21 121 71); color: rgb(255 255 255) !important;}

/* padding */
@media only screen and (max-width: 1000px){
  #epagina { padding: 21px 0;}
}

/* outros */
@media only screen and (max-width: 1000px){
  #ecategoria .produtos .item { width: 33.333%; padding: 5px;}
}
@media only screen and (max-width: 800px){
  #ecategoria .conteudo { flex-direction: column;}
  #ecategoria .nomesi { margin: 4px 0 0;}
  #ecategoria .lado1 { width: 100%;}
  #ecategoria .lado2 { padding: 0 2%;}
  #ecategoria .filtros {  padding: 0 2%; margin: 11px 0 0;}
  #ecategoria .filtros .expandir { display: flex; gap: 5px; padding: 2px; margin: 2px 0 0; overflow: auto;}
  #ecategoria .filtros .um { display: flex; flex-direction: column; align-items: center; flex: 0 0 110px; text-align: center;}
  #ecategoria .filtros .um span { margin: 10px 0 0;}
  #ecategoria .filtros .um b { display: none !important;}
  #ecategoria .filtros .um.ativo b { display: none !important;}
  #ecategoria .filtros .um.ativo span { text-decoration: underline;}
  #ecategoria .filtros .um:hover b { display: none !important;}
  #ecategoria .categorias { margin: 11px 0; padding: 0 2%;}
  #ecategoria .categorias .expandir { display: flex; gap: 5px; padding: 2px; margin: 2px 0 0; overflow: auto;}
  #ecategoria .categorias .um img { display: block; height: 45px;}
  #ecategoria .categorias .um { display: flex; flex-direction: column; align-items: center; flex: 0 0 110px; background-color: rgb(255 255 255); text-align: center; -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);}
  #ecategoria .categorias .um span { margin: 10px 0 0;}
  #ecategoria .categorias .um.ativo span { text-decoration: underline;}
  #ecategoria .categorias .um.desk { display: none;}
  #ecategoria .categorias .um.mobi { display: flex;}
  #ecategoria .catsubs { display: block; padding: 0 2%; margin: 0 0 11px;}
  #ecategoria .catsubs .expandir { display: flex; gap: 5px; padding: 2px; margin: 2px 0 0; overflow: auto;}
  #ecategoria .catsubs .dois { display: flex; flex-direction: column; align-items: center; flex: 0 0 110px; background-color: rgb(255 255 255); text-align: center; -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);}

  #eproduto .comlado { flex-direction: column;}
}
@media only screen and (max-width: 600px){
  #epagina .auto { width: 100%}
  #epagina .auto310 { max-width: 100%}
  #epagina .auto500 { max-width: 100%}

  #ecategoria .filtros .um span { font-size: 0.9em;}
  #ecategoria .produtos .item { width: 50%; padding: 2px;}
}