Olá,
vou te passar alguns codigos que usei na minha lojinha, espero poder ter ajudado.
Todos em EDITAR CSS
/FONTE/
@import url(’//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Lato:300,400,700|Roboto+Condensed:300,400,700&display=swap’);
#modalNewsletter .newsletter .botao:before, .titulo, body, button, h1, h2, h3, h4, h5, h6, html, input, select, small, span, strong, textarea {
font-family: ‘Lato’, sans-serif;
}
.conteiner-principal .conteiner {
padding: 2px;
}
.conteudo-topo .superior {
padding: 0px 05;
}
.conteiner .logo {
margin: 0 0 7px;
}
.listagem .titulo-categoria:first-child {
margin-top: 0px;
}
.menu.lateral .nivel-um>li>a{border-radius:7px;}
.menu.lateral .nivel-dois>li>a{border-radius:7px; white-space: normal; line-height:35px;}
.menu.lateral .nivel-tres>li>a{border-radius:7px;}
.listagem .span3 .listagem-item .nome-produto, .listagem .produtos-carrossel[data-produtos-linha=“4”] .listagem-item .nome-produto {font-weight: 900;}
.listagem .listagem-item{text-align:center}
.listagem-linha .preco-produto{font-size:20px}
.listagem-linha .preco-produto .preco-parcela{font-size:14px}
.conteudo-topo .carrinho {border-radius: 30px;}
.conteudo-topo .carrinho>a i {border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
@media (max-width: 1024px)
.conteudo-topo .superior {
padding: 0px 0;
}
@media (max-width: 1024px)
.conteiner-principal .conteiner {
padding: 2px;
}
/DOIS PRODUTOS VITRINE/
@media (max-width: 768px){#listagemProdutos > ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}#listagemProdutos > ul li.listagem-linha ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}#listagemProdutos > ul li.listagem-linha ul li{width:50%;margin:0 0 10px}.listagem.com-caixa .listagem-item{border:0}.listagem.com-caixa .listagem-item .imagem-produto{border:0;padding:0}.listagem .listagem-item .info-produto{border:none!important;padding:5px 0} .busca .botao-busca{padding:5px 14px!important}.listagem .listagem-item .acoes-produto-responsiva,#btn-top{display:none!important}}
/*BARRA MENU PERSONALIZADA /
/ Cor do fundo e texto do menu /
#cabecalho > .conteiner > .menu.superior, #cabecalho > .conteiner > .menu.superior .com-filho > a i { background-color: #000000; }
#cabecalho > .conteiner > .menu.superior .titulo { color: #FFE6D7; }
.menu.superior {
margin-top: 0px;
}
/ Centralizar os itens do menu */
#cabecalho > .conteiner > .menu.superior { text-align: center; }
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; border-left: 0; margin-right: -3px; }
/* remove as linhas do menu*/
#cabecalho > .conteiner > .menu.superior .nivel-um > li {
border: 0;
padding: 0 14px;
}
/* Arredondar menu */
#cabecalho > .conteiner > .menu.superior {
border-radius: 15px;
box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 10.15)
}
.flexslider .slides img {
height: auto;
border-radius: 10px;
}
.conteudo>.row-fluid {
margin-bottom: 0px;
}
/BORDA DO MENU BUSCA/
@media only screen and (max-width: 768px) {
.conteudo-topo .busca-mobile {
border-radius: 25px;
}
@media screen and (max-width: 768px) {
/Remove borda entre os ícones/
.atalhos-mobile li {
border-right: 0px;
border-left: 0px;
}
.listagem .titulo-categoria {
font-size: 28px;
margin: 0px 0 0;
padding: 10px 0;
text-align: center;
}
/*Diminuir os espaços entre as fotos */
.listagem ul:not(.produtos-carrossel)>li {
padding: 0 1px !important; /*diminuindo o espaço lateral entre elas, consequentemente Aumenta a largura da foto, */
padding-bottom: 5px !important;
}
/cor do produto adicionado/
.listagem .bandeiras-produto .bandeira-carrinho {
background-color: #333;
}
//// Espero ter ajudado.
www.kuike.com.br
