` de largura cheia, cada um com o próprio `.wrap`; agora dividem um `.wrap` só com o menu lateral, e o espaçamento entre eles passa a ser deste seletor. */ .bloco-home + .bloco-home { margin-top: 56px; } /* O tapete dos destaques era uma faixa de ponta a ponta da tela. Dentro da coluna ele vira um painel: mesma cor, com respiro e canto arredondado, senão o fundo encostaria no texto. */ .bloco-destaque { background: rgba(0, 0, 0, .025); border-radius: var(--raio); padding: 28px; } .bloco-promocoes + .bloco-home { margin-top: 40px; } .titulo-complemento { color: var(--suave); font-weight: 500; } /* --------------------------------------------- unidade e regra de quantidade O B2B vende caixa e metro. A unidade fica COLADA no preço porque é parte dele — "R$ 12,50" e "R$ 12,50 / CX" são preços diferentes —, e a regra de quantidade fica embaixo, discreta: é informação que só existe em loja de atacado e não pode roubar a linha do preço. */ .preco-unidade { color: var(--suave); font-size: .875rem; font-weight: 500; } .produto-quantidade { display: block; margin-top: 4px; font-size: .75rem; color: var(--suave); } .regra-quantidade { margin: 4px 0 0; font-size: .875rem; color: var(--suave); } /* Disponibilidade. "Sob consulta" e "sob encomenda" são informação neutra e ficam na mesma cor discreta da regra de quantidade; o esgotado ganha destaque porque muda o que a pessoa pode fazer na página. */ .produto-disponibilidade { display: block; margin-top: 4px; font-size: .75rem; color: var(--suave); } .produto-esgotado { color: #c0392b; font-weight: 500; } .aviso-indisponivel { margin: 16px 0; padding: 12px 16px; border-radius: var(--raio); background: rgba(192, 57, 43, .08); color: #c0392b; font-size: .9375rem; } .quantidade-unidade { margin-left: 6px; font-size: .8125rem; color: var(--suave); align-self: center; } /* ----------------------------------------------------------- pedido rápido A grade e a caixa de colar lado a lado: são os dois caminhos para a mesma coisa, e quem chega com a planilha aberta precisa ver a caixa sem procurar. No celular empilham. */ .menu-rapido { font-weight: 500; } .pedido-rapido { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 24px; } .tabela-rapida { width: 100%; border-collapse: collapse; } .tabela-rapida th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; padding: 0 8px 8px 0; } .tabela-rapida td { padding: 0 8px 8px 0; } .tabela-rapida input { width: 100%; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9375rem; font-family: inherit; color: inherit; background: transparent; } .tabela-rapida input:focus { outline: none; border-color: var(--cor-primaria); } .celula-remover { border: none; background: transparent; color: var(--suave); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 4px 8px; } .celula-remover:hover { color: #c0392b; } .pedido-rapido-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .pedido-rapido-colar { padding: 20px; border: 1px solid var(--borda); border-radius: 12px; } .pedido-rapido-colar h2 { font-size: 1rem; margin: 0 0 8px; } .pedido-rapido-colar p { font-size: .875rem; color: var(--suave); margin: 0 0 12px; } .pedido-rapido-colar textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; color: inherit; background: transparent; margin-bottom: 12px; resize: vertical; } /* O resultado é uma lista de linhas com marca, não um bloco de texto: quem colou trinta códigos precisa achar de relance qual dos trinta falhou. */ .tabela-resultado { margin-top: 20px; font-size: .875rem; } .tabela-resultado td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--borda); } .linha-marca { width: 24px; font-weight: 700; } .linha-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .linha-ok .linha-marca { color: #1e8e5a; } .linha-erro .linha-marca { color: #c0392b; } .linha-erro td { color: #c0392b; } .linha-erro-resumo { margin-top: 12px; font-size: .875rem; color: #c0392b; } @media (max-width: 860px) { .pedido-rapido { grid-template-columns: 1fr; } } /* ------------------------------------------------- filtro fino da vitrine Código e faixa de preço, junto com a busca. É o último bloco do menu lateral, ABAIXO de categorias e marcas, porque é o filtro de quem já sabe o que quer — o visitante que está passeando navega pela lista de cima e nunca precisa olhar para cá. */ .filtro-fino { display: flex; flex-direction: column; gap: 12px; } /* "Preço de" e "até" só fazem sentido lado a lado, inclusive dentro da coluna estreita. */ .filtro-fino-faixa { display: flex; gap: 10px; } .filtro-fino-campo { display: flex; flex-direction: column; gap: 4px; } .filtro-fino-campo label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); } .filtro-fino-campo input { padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9375rem; font-family: inherit; color: inherit; background: transparent; width: 100%; min-width: 0; } .filtro-fino-campo input:focus { outline: none; border-color: var(--cor-primaria); } .filtro-fino-faixa .filtro-fino-campo { flex: 1 1 0; } .filtro-fino-acoes { display: flex; align-items: center; gap: 12px; } .filtro-fino-acoes .botao { flex: 1; } .filtro-fino-limpar { font-size: .875rem; color: var(--suave); text-decoration: underline; } .filtro-fino-limpar:hover { color: var(--cor-primaria); } /* ------------------------------------------------------------------ marca */ .marca-topo { padding-bottom: 0; } .marca-topo-linha { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--borda); } .marca-logo img { max-height: 70px; width: auto; } .marca-descricao { color: var(--suave); margin: 0; flex: 1 1 320px; } /* Etiqueta do fabricante no cartão. Fica ao lado da categoria, na mesma linha pequena. */ .produto-marca { font-weight: 700; } .produto-etiquetas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .produto-marca-link { color: var(--suave); } .produto-marca-link:hover { color: var(--cor-primaria); } .paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; } .pagina { padding: 9px 18px; border: 1px solid var(--borda); border-radius: 8px; text-decoration: none; font-size: .9375rem; font-weight: 500; } .pagina:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); } .pagina-info { color: var(--suave); font-size: .875rem; } /* Com o rolar-e-carregar ligado, a contagem de páginas some e este espaço vira o aviso de carga ("Carregando mais produtos..."). Vazio, ele não pode continuar ocupando o gap do flex: sobraria um buraco ao lado do botão sem nada dentro. */ .pagina-info:empty { display: none; } .vazio { text-align: center; padding: 56px 20px; color: var(--suave); } /* ----------------------------------------------------------------- rodapé */ .rodape { border-top: 1px solid var(--borda); margin-top: 24px; padding-top: 48px; } .rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding-bottom: 32px; } .rodape h3 { font-size: 1.125rem; } .rodape h4 { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); } .rodape p { font-size: .9375rem; margin-bottom: .4em; } .rodape a { text-decoration: none; } .rodape a:hover { color: var(--cor-primaria); } .rodape-horario { color: var(--suave); } .redes { display: flex; gap: 14px; margin-top: 10px; font-size: .9375rem; font-weight: 500; } .rodape-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-top: 1px solid var(--borda); font-size: .8125rem; color: var(--suave); } .assinatura a { color: var(--suave); } /* -------------------------------------------------------- whatsapp e avisos */ .whatsapp-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, .38); transition: transform .15s ease; } .whatsapp-flutuante:hover { transform: scale(1.06); color: #fff; } /* Voltar ao topo. Fica no canto direito, abaixo do WhatsApp quando a loja tem os dois, e z-index menor que o dele: se algum dia se cruzarem, quem manda é o contato. Escondido por padrão, com visibility além da opacidade — só a opacidade deixaria um botão invisível capturando o clique de quem está no topo da página. */ .voltar-ao-topo { position: fixed; right: 20px; bottom: 20px; z-index: 39; width: 46px; height: 46px; padding: 0; border: 1px solid var(--borda); border-radius: 50%; background: var(--cor-fundo); color: var(--cor-texto); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .voltar-ao-topo.topo-visivel { opacity: 1; visibility: visible; transform: translateY(0); } .voltar-ao-topo:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); } /* Com o WhatsApp na tela, o botão sobe para a linha de cima: 56px do balão mais o respiro. */ .whatsapp-flutuante ~ .voltar-ao-topo { bottom: 86px; } .aviso-loja { max-width: 620px; margin: 0 auto; padding: 96px 24px; text-align: center; } .aviso-loja h1 { font-size: clamp(1.5rem, 4vw, 2rem); } .menu-conta { font-weight: 600 !important; color: var(--cor-primaria) !important; } /* ------------------------------------------------------- área do cliente */ .painel-cliente { max-width: 760px; margin: 0 auto; } .painel-cliente.painel-largo { max-width: 980px; } .cartao { border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; margin-bottom: 20px; background: var(--cor-fundo); } .cartao h2 { font-size: 1.25rem; margin-bottom: 4px; } .cartao-texto { color: var(--suave); font-size: .9375rem; } .campo { margin-bottom: 16px; } .campo label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; } .campo input, .campo select { width: 100%; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 9px; font-size: .9375rem; background: var(--cor-fundo); color: var(--cor-texto); font-family: inherit; } .campo input:focus, .campo select:focus { outline: 2px solid var(--cor-primaria); outline-offset: 1px; } .campo-ajuda { display: block; font-size: .8125rem; color: var(--suave); margin-top: 5px; } /* Campo reprovado na validação: a mensagem fica no topo do cartão, e a borda aponta qual campo é o culpado. Sai sozinha quando a pessoa mexe nele. */ .campo input.campo-invalido, .campo select.campo-invalido { border-color: #dc2626; background: #fff5f5; } .linha { display: grid; gap: 16px; } .linha-2 { grid-template-columns: 1fr 1fr; } .linha-3 { grid-template-columns: 1fr 1fr 1fr; } .linha-cep { grid-template-columns: 160px 1fr 120px; } .erro-formulario { display: none; padding: 11px 14px; border-radius: 9px; background: #fee2e2; color: #991b1b; font-size: .875rem; margin-bottom: 16px; } .acoes-formulario { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .link-secundario { font-size: .9375rem; color: var(--suave); } /* O mesmo endereço serve a loja e o painel, e o "Entrar" da vitrine é o do CLIENTE. O lojista chega nestas telas por instinto e não tem como adivinhar que a porta dele é outra — o erro que ele vê é "e-mail e/ou senha inválido(s)", com a senha certa. Discreto de propósito: é recado para uma pessoa, não para os compradores da loja. */ .rodape-painel { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borda); color: var(--suave); font-size: .875rem; } .rodape-painel a { font-weight: 600; white-space: nowrap; } .endereco { border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 12px; } .endereco-topo { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 6px; } .endereco-apelido { font-weight: 600; } .etiqueta-principal { padding: 3px 10px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font-size: .6875rem; font-weight: 700; } .endereco-texto { color: var(--suave); font-size: .9375rem; margin: 0; } .endereco-acoes { display: flex; gap: 14px; margin-top: 10px; font-size: .875rem; } .endereco-acoes a { cursor: pointer; color: var(--cor-primaria); } .endereco-acoes .acao-remover { color: #dc2626; } /* ------------------------------------------------------------- carrinho */ .carrinho-botao { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--borda); border-radius: 10px; color: var(--cor-texto); text-decoration: none; } .carrinho-botao:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); } .carrinho-contador { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font-size: .6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .quantidade { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; } .quantidade button { width: 38px; height: 40px; border: 0; background: transparent; font-size: 1.125rem; cursor: pointer; color: var(--cor-texto); } .quantidade button:hover { background: rgba(0, 0, 0, .05); } .quantidade input { width: 52px; height: 40px; border: 0; border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); text-align: center; font-size: .9375rem; background: transparent; color: var(--cor-texto); -moz-appearance: textfield; } .quantidade input::-webkit-outer-spin-button, .quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .compra { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .compra .botao-grande { flex: 1; min-width: 200px; margin-bottom: 0; } .carrinho-grade { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; } .item-carrinho { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--borda); } .item-indisponivel { opacity: .6; } .item-foto { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .04); display: flex; align-items: center; justify-content: center; } .item-foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .item-nome { font-weight: 600; margin-bottom: 4px; } .item-nome a { text-decoration: none; } .item-nome a:hover { color: var(--cor-primaria); } .item-preco { color: var(--suave); font-size: .875rem; } .item-aviso { color: #dc2626; font-size: .875rem; font-weight: 500; } .item-subtotal { font-weight: 700; font-size: 1.0625rem; min-width: 110px; text-align: right; } .resumo { position: sticky; top: 92px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; } .resumo h2 { font-size: 1.125rem; margin-bottom: 16px; } .resumo-linha { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: .9375rem; } .resumo-total { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 14px; font-size: 1.125rem; } .resumo-total strong { font-size: 1.375rem; color: var(--cor-primaria); } .resumo .botao-grande { margin: 12px 0; } .resumo .link-secundario { display: block; text-align: center; } @media (max-width: 900px) { .carrinho-grade { grid-template-columns: 1fr; } .resumo { position: static; } .item-carrinho { grid-template-columns: 72px 1fr; row-gap: 12px; } .item-foto { width: 72px; height: 72px; } .item-quantidade { grid-column: 1 / -1; } .item-subtotal { grid-column: 1 / -1; text-align: left; } } /* -------------------------------------------------- checkout e pedidos */ .endereco-escolha { display: block; cursor: pointer; transition: border-color .12s ease; } .endereco-escolha:hover { border-color: var(--cor-primaria); } .endereco-ativo { border-color: var(--cor-primaria); box-shadow: 0 0 0 1px var(--cor-primaria) inset; } .endereco-escolha input[type=radio] { margin-right: 6px; } .cartao-confirmacao { text-align: center; } .cartao-confirmacao h1 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin: 12px 0 6px; } .confirmacao-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 1.75rem; font-weight: 700; } .etiqueta-status { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font-size: .8125rem; font-weight: 600; } .cartao-pedido { display: block; text-decoration: none; color: inherit; transition: border-color .12s ease; } .cartao-pedido:hover { border-color: var(--cor-primaria); } .pedido-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .pedido-direita { display: flex; align-items: center; gap: 14px; } .linha-tempo { position: relative; padding-left: 6px; } .etapa { position: relative; display: flex; gap: 14px; padding: 0 0 20px 22px; } .etapa::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -6px; width: 2px; background: var(--borda); } .etapa:last-child::before { display: none; } .etapa-marca { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--borda); } .etapa-atual .etapa-marca { background: var(--cor-primaria); box-shadow: 0 0 0 4px rgba(0, 0, 0, .06); } /* Aviso curto no canto — substitui a biblioteca de notificação do painel */ .aviso-site { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 60; max-width: 90vw; padding: 13px 22px; border-radius: 10px; background: var(--cor-secundaria); color: #fff; font-size: .9375rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); transition: transform .22s ease; } .aviso-site.aviso-visivel { transform: translate(-50%, 0); } .aviso-site.aviso-sucesso { background: #16a34a; } .aviso-site.aviso-erro { background: #dc2626; } @media (max-width: 620px) { .linha-2, .linha-3, .linha-cep { grid-template-columns: 1fr; } } /* ================================================================ TEMPLATES A empresa escolhe o template na tela de personalização; aqui ele só muda o arranjo, nunca o conteúdo. Trocar de template não exige republicar nada. */ /* Minimalista: mais respiro, sem banner cheio, cards sem moldura */ .tpl-minimalista .banner { padding: 72px 0; } .tpl-minimalista .banner::before { background: rgba(0, 0, 0, .25); } .tpl-minimalista .produtos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; } .tpl-minimalista .produto { border: 0; } .tpl-minimalista .produto:hover { box-shadow: none; transform: none; } .tpl-minimalista .produto-foto { border-radius: var(--raio); } .tpl-minimalista .produto-corpo { padding: 14px 2px; } .tpl-minimalista .secao-destaque { background: none; } .tpl-minimalista .bloco-destaque { background: none; padding: 0; } /* Visual: foco na imagem — cards maiores, texto sobre a foto no hover */ .tpl-visual .produtos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .tpl-visual .produto { border-radius: 16px; } .tpl-visual .produto-foto { aspect-ratio: 4 / 5; } .tpl-visual .produto-descricao { display: none; } .tpl-visual .banner { padding: 150px 0; } .tpl-visual .categoria img { width: 100%; height: 130px; border-radius: 10px; } /* ---------------------------------------------------------------- celular */ @media (max-width: 900px) { .produto-detalhe { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 900px) { /* O rótulo da conta sai antes do resto: o ícone sozinho já diz o que é, e são os 90px que a busca precisa para continuar utilizável. */ .acao-conta span { display: none; } .acao-conta { padding: 8px; } /* As iniciais ficam: no celular elas SÃO o ícone da conta, e escondê-las junto com o rótulo deixaria o botão vazio para quem está logado. */ .acao-conta span.acao-conta-iniciais { display: inline-flex; } .cabecalho-topo-linha { gap: 16px; } } @media (max-width: 760px) { .cabecalho-topo-linha { min-height: 64px; gap: 12px; flex-wrap: wrap; } /* No celular a busca desce para a própria linha, em largura inteira. É a mesma quebra de antes — a diferença é que agora ela é ESCOLHIDA, e não o que sobrou do wrap. */ .busca { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 12px; } .logo img { max-height: 38px; } .menu-botao { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--borda); border-radius: 9px; background: none; cursor: pointer; padding: 0 10px; } .menu-botao span { display: block; height: 2px; background: var(--cor-texto); border-radius: 2px; } /* A faixa da navegação some e vira a gaveta do botão sanduíche. */ .cabecalho-menu { display: none; } body.menu-aberto .cabecalho-menu { display: block; } .menu { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 6px 20px; } .menu a { padding: 12px 0; border-bottom: 0; } .banner { padding: 72px 0; } .secao { padding: 44px 0; } .produtos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .produto-corpo { padding: 12px; } .produto-nome { font-size: .9375rem; } .preco-atual { font-size: 1.0625rem; } .vitrine-cabecalho { flex-direction: column; gap: 16px; } } /* ------------------------------------------------------- preço escondido Loja que só mostra preço para cliente cadastrado, ou que atende por orçamento. O texto ocupa o MESMO lugar do preço para o cartão não mudar de altura entre um produto e outro. */ .preco-oculto { display: inline-block; font-size: .9375rem; font-weight: 600; color: var(--cor-primaria); line-height: 1.3; } .produto-preco-detalhe .preco-oculto { font-size: 1.125rem; } .aviso-preco { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; } .aviso-cadastro { background: rgba(0, 0, 0, .035); border-left: 3px solid var(--cor-primaria); border-radius: 6px; padding: 12px 14px; font-size: .9375rem; margin-bottom: 18px; } /* ------------------------------------------------- carrinho flutuante (gaveta) Desliza da direita sobre a página. Vive no layout, então está presente em toda tela do site — inclusive nas que não têm nada a ver com compra, por isso começa com [hidden] e não ocupa espaço nenhum até ser aberta. */ .gaveta-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); opacity: 0; transition: opacity .2s ease; z-index: 60; } .gaveta-fundo-visivel { opacity: 1; } .gaveta { position: fixed; top: 0; right: 0; z-index: 61; display: flex; flex-direction: column; width: min(420px, 100%); height: 100%; background: var(--cor-fundo); color: var(--cor-texto); box-shadow: -12px 0 40px rgba(0, 0, 0, .16); /* Fora da tela por padrão; a classe .gaveta-aberta traz para o lugar. Transform em vez de "right" negativo: transform anima na GPU e não força relayout da página inteira. */ transform: translateX(100%); transition: transform .22s ease; } .gaveta-aberta { transform: translateX(0); } .gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--borda); } .gaveta-topo h2 { margin: 0; font-size: 1.125rem; } .gaveta-fechar { border: 0; background: none; color: var(--suave); font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0 4px; } .gaveta-fechar:hover { color: var(--cor-texto); } /* A lista rola; topo e rodapé ficam parados. É o que mantém o total e o botão de finalizar sempre à vista, mesmo com carrinho grande. */ .gaveta-corpo { flex: 1; overflow-y: auto; padding: 8px 20px; } .gaveta-carregando, .gaveta-vazia { text-align: center; color: var(--suave); padding: 40px 0; } .gaveta-vazia .botao { margin-top: 10px; } .gaveta-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--borda); } .gaveta-item:last-child { border-bottom: 0; } .gaveta-item-foto { width: 64px; height: 64px; border-radius: 8px; background: rgba(0, 0, 0, .04); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gaveta-item-foto img { width: 100%; height: 100%; object-fit: contain; } .gaveta-item-nome { font-weight: 600; font-size: .9375rem; line-height: 1.3; } .gaveta-item-nome a { text-decoration: none; } .gaveta-item-nome a:hover { color: var(--cor-primaria); } .gaveta-item-lado { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .gaveta-remover { border: 0; background: none; padding: 0; color: var(--suave); font-size: .8125rem; cursor: pointer; text-decoration: underline; } .gaveta-remover:hover { color: #dc2626; } .quantidade-pequena { margin-top: 8px; transform: scale(.88); transform-origin: left center; } .gaveta-aviso { color: #dc2626; font-size: .875rem; font-weight: 500; margin: 12px 0 0; } .gaveta-rodape { padding: 16px 20px 20px; border-top: 1px solid var(--borda); } .gaveta-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .gaveta-total strong { font-size: 1.375rem; color: var(--cor-primaria); } .gaveta-rodape .botao { width: 100%; } .gaveta-rodape .link-secundario { display: block; text-align: center; margin-top: 10px; } /* Trava a rolagem da página atrás da gaveta: sem isso, rolar dentro dela leva a página junto quando a lista chega ao fim. */ body.gaveta-travada { overflow: hidden; } @media (max-width: 480px) { .gaveta { width: 100%; } } /* ------------------------------------------------------ carrossel de banners O HTML sai do servidor com todas as faixas empilhadas e VISÍVEIS. A classe .carrossel-ativo é adicionada pelo JavaScript e é ela que transforma a pilha em faixa deslizante — sem script, o visitante vê os banners um embaixo do outro, feio mas inteiro. */ .carrossel { position: relative; background: rgba(0, 0, 0, .04); } .carrossel-trilho { display: flex; flex-direction: column; } .carrossel-ativo { overflow: hidden; } .carrossel-ativo .carrossel-trilho { flex-direction: row; transition: transform .45s ease; } .carrossel-slide { position: relative; flex: 0 0 100%; min-width: 100%; } .carrossel-slide img { width: 100%; height: auto; aspect-ratio: 16 / 5; max-height: 340px; object-fit: cover; display: block; } /* Texto sobre a arte. O degradê existe porque banner é foto de cliente, e texto branco sobre uma foto clara some — o degradê garante contraste sem exigir arte preparada. */ .carrossel-texto { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05)); } .carrossel-texto h2 { font-size: clamp(1.5rem, 3.6vw, 2.75rem); margin: 0 0 .35em; max-width: 20ch; } .carrossel-texto p { font-size: clamp(.9375rem, 1.6vw, 1.125rem); margin: 0 0 1.2em; max-width: 42ch; } /* Faixa sem botão: o slide inteiro é clicável. */ .carrossel-link { position: absolute; inset: 0; z-index: 2; } .carrossel-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #111; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; } .carrossel:hover .carrossel-seta, .carrossel-seta:focus-visible { opacity: 1; } .carrossel-seta:hover { background: #fff; } .carrossel-anterior { left: 14px; } .carrossel-proxima { right: 14px; } .carrossel-pontos { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; } .carrossel-ponto { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .15s ease, transform .15s ease; } .carrossel-ponto-ativo { background: #fff; transform: scale(1.35); } /* Em telas pequenas as setas ficam pequenas demais para acertar; o gesto de arrastar e os pontos resolvem melhor. */ @media (max-width: 640px) { .carrossel-seta { display: none; } .carrossel-slide img { aspect-ratio: 3 / 2; max-height: 260px; } .carrossel-texto { background: linear-gradient(0deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .1)); align-items: flex-end; padding-bottom: 34px; } } /* ---------------------------------------------------- cartões promocionais */ .promocoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .promocao { position: relative; display: block; overflow: hidden; border-radius: var(--raio); background: rgba(0, 0, 0, .04); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } a.promocao:hover { transform: translateY(-2px); box-shadow: var(--sombra); } .promocao img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; } /* Cartão só com texto não pode virar um bloco cinza com letra escura em cima: sem imagem, o próprio cartão assume a cor da loja. Quem decide é o SERVIDOR, que já sabe se há arte — :has() resolveria em CSS, mas navegador sem suporte entregaria o bloco cinza. */ .promocao-sem-arte { background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)); color: #fff; min-height: 150px; display: flex; align-items: center; } .promocao-sem-arte .promocao-texto { position: static; background: none; padding: 28px 22px; } .promocao-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; color: #fff; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); } .promocao-texto h3 { margin: 0 0 .25em; font-size: 1.0625rem; } .promocao-texto p { margin: 0; font-size: .875rem; opacity: .9; } .promocao-botao { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 8px; background: #fff; color: var(--cor-secundaria); font-size: .8125rem; font-weight: 600; }