/* ===================================================================== Vitrine pública do Assamble Mesmo desenho aprovado na prévia do painel — capa, logo circular sobreposto, nome centralizado, foto de produto 4:5 e limpa. A cor vem de --loja-cor, definida no a partir do que a artesã escolheu, então uma folha de estilo só serve todas as lojas. Mobile-first: o público desta loja chega pelo link no Instagram ou no WhatsApp, quase sempre pelo celular. O desktop é o caso ampliado. ===================================================================== */ :root { --lj-tinta-900: #20303c; --lj-tinta-700: #46606f; --lj-tinta-500: #7a8f9b; --lj-tinta-300: #b3c3cb; --lj-linha: #eaeff1; --lj-fundo: #f7f9fa; --lj-largura: 940px; } * { box-sizing: border-box; } body { margin: 0; background: #fff; color: var(--lj-tinta-900); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; /* Espaço para o botão flutuante do WhatsApp não tapar o último item. */ padding-bottom: calc(84px + env(safe-area-inset-bottom)); } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* ------------------------------- topo -------------------------------- */ .lj-topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; padding-top: calc(13px + env(safe-area-inset-top)); } .lj-topo__voltar, .lj-sacola { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .12); flex: 0 0 auto; } .lj-topo__voltar svg, .lj-sacola svg { width: 19px; height: 19px; } .lj-topo__nome { flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lj-sacola { position: relative; } .lj-sacola b { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 99px; border: 2px solid currentColor; background: #16232d; color: #fff; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .lj-sacola b[hidden] { display: none; } .lj-aviso { padding: 9px 16px; font-size: 13px; font-weight: 600; text-align: center; color: var(--lj-tinta-900); } /* ---------------------------- identidade ----------------------------- */ .lj-capa { height: 150px; background-size: cover; background-position: center; } @media (min-width: 720px) { .lj-capa { height: 230px; } } .lj-identidade { max-width: var(--lj-largura); margin: -50px auto 0; padding: 0 24px 20px; text-align: center; } .lj-logo { width: 94px; height: 94px; margin: 0 auto 12px; display: block; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 8px 24px rgba(16, 40, 60, .18); } .lj-logo--vazio { display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; } .lj-identidade h1 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.022em; line-height: 1.18; text-wrap: balance; } .lj-identidade p { margin: 6px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--lj-tinta-500); } .lj-selo { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 14px 6px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700; } .lj-selo i { width: 7px; height: 7px; border-radius: 50%; } .lj-selo--aberta { background: #edf8f2; color: #157a4d; } .lj-selo--aberta i { background: #1faa63; box-shadow: 0 0 0 3px rgba(31, 170, 99, .18); } .lj-selo--fora { background: #f4f6f7; color: var(--lj-tinta-500); } .lj-selo--fora i { background: var(--lj-tinta-300); } /* ----------------------------- conteúdo ------------------------------ */ .lj-conteudo { max-width: var(--lj-largura); margin: 0 auto; padding: 0 16px; } @media (min-width: 720px) { .lj-conteudo { padding: 0 24px; } } /* ------------------------------ busca -------------------------------- */ .lj-busca { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0 15px; border-radius: 13px; border: 1px solid var(--lj-linha); background: var(--lj-fundo); color: var(--lj-tinta-500); } .lj-busca svg { width: 17px; height: 17px; flex: 0 0 auto; } .lj-busca input { flex: 1; min-width: 0; padding: 13px 0; border: 0; background: transparent; color: var(--lj-tinta-900); /* 16px evita o zoom automático do iOS ao focar o campo. */ font-size: 16px; font-family: inherit; } .lj-busca input:focus { outline: none; } .lj-busca input::placeholder { color: var(--lj-tinta-500); } .lj-busca__limpar { flex: 0 0 auto; font-size: 21px; line-height: 1; color: var(--lj-tinta-500); padding: 0 2px; } /* ---------------------------- categorias ----------------------------- */ .lj-abas { display: flex; gap: 22px; margin-bottom: 6px; padding-bottom: 0; border-bottom: 1px solid var(--lj-linha); overflow-x: auto; scrollbar-width: none; scroll-padding-left: 16px; } .lj-abas::-webkit-scrollbar { display: none; } .lj-aba { flex: 0 0 auto; padding-bottom: 11px; border-bottom: 2.5px solid transparent; color: var(--lj-tinta-500); font-size: 14.5px; font-weight: 600; white-space: nowrap; } .lj-aba--ativa { font-weight: 700; } /* ------------------------------ seções ------------------------------- */ .lj-secao { padding: 22px 0 4px; } .lj-secao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .lj-secao__topo h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.018em; } .lj-vertudo { font-size: 13px; font-weight: 700; white-space: nowrap; } .lj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; } @media (min-width: 720px) { .lj-grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 20px; } } /* --------------------------- cartão do produto ----------------------- */ .lj-item { display: block; min-width: 0; } .lj-item__foto { position: relative; margin-bottom: 9px; } /* 4:5 e não quadrado: peça em pé (bolsa, caderno, vestido) cabe inteira. A foto fica LIMPA — nada escrito por cima cobrindo o produto. */ .lj-item__foto img, .lj-item__semfoto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 15px; background: var(--lj-fundo); box-shadow: 0 3px 12px rgba(16, 40, 60, .09); display: block; } .lj-item__semfoto { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--lj-tinta-300); border: 1px dashed var(--lj-linha); box-shadow: none; } .lj-item--esgotado .lj-item__foto img { filter: grayscale(.7); opacity: .62; } .lj-tag { position: absolute; top: 9px; left: 9px; padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: #fff; box-shadow: 0 2px 8px rgba(16, 40, 60, .18); backdrop-filter: blur(3px); } .lj-tag--pronta { background: rgba(31, 170, 99, .94); } .lj-tag--promo { background: rgba(214, 61, 84, .95); } .lj-tag--esgotado { background: rgba(90, 108, 120, .94); } .lj-item h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.006em; color: #2c3d49; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lj-preco { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; flex-wrap: wrap; } .lj-preco s { color: var(--lj-tinta-300); font-size: 12px; } .lj-preco strong { font-size: 16px; font-weight: 800; letter-spacing: -.022em; } .lj-prazo { display: block; margin-top: 3px; font-size: 11.5px; color: var(--lj-tinta-500); } /* ------------------------------- vazio -------------------------------- */ .lj-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 28px 0; padding: 48px 28px; border: 1px dashed var(--lj-linha); border-radius: 18px; text-align: center; } .lj-vazio__icone { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; margin-bottom: 6px; } .lj-vazio strong { font-size: 15.5px; } .lj-vazio span { font-size: 13.5px; color: var(--lj-tinta-500); line-height: 1.55; } .lj-btn { display: inline-flex; align-items: center; gap: .5em; margin-top: 12px; padding: 11px 20px; border: 0; border-radius: 11px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; } /* ------------------------------ rodapé -------------------------------- */ .lj-rodape { max-width: var(--lj-largura); margin: 34px auto 0; padding: 26px 16px 10px; border-top: 1px solid var(--lj-linha); } @media (min-width: 720px) { .lj-rodape { padding: 32px 24px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; align-items: start; } .lj-rodape .lj-assinatura { grid-column: 1 / -1; } } .lj-bloco { margin-bottom: 22px; } .lj-bloco h2 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lj-tinta-500); } .lj-bloco p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lj-tinta-700); } .lj-nota { margin-top: 8px !important; font-size: 13px !important; color: var(--lj-tinta-500) !important; } .lj-lista { margin: 0; padding: 0; list-style: none; } .lj-lista li { font-size: 14px; line-height: 1.7; color: var(--lj-tinta-700); } .lj-horarios { margin: 0; padding: 0; list-style: none; } .lj-horarios li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 13.5px; color: var(--lj-tinta-700); } .lj-horarios strong { font-variant-numeric: tabular-nums; } .lj-redes { display: flex; gap: 16px; } .lj-redes a { font-size: 14px; font-weight: 600; color: var(--loja-cor); } .lj-assinatura { margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--lj-linha); font-size: 12.5px; color: var(--lj-tinta-500); text-align: center; } .lj-assinatura a { font-weight: 700; color: var(--loja-cor); } /* ---------------------------- WhatsApp -------------------------------- */ .lj-whats { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 420px; margin: 0 auto; padding: 15px; border-radius: 14px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 8px 26px rgba(16, 40, 60, .26); } .lj-whats svg { width: 20px; height: 20px; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ===================================================================== MELHORIAS DA VITRINE — 02/08/2026 Bloco acrescentado de uma vez, reunindo o CSS de cinco frentes que foram implementadas em paralelo: menu lateral, card de produto, 'Veja também' na interna, rodapé com bolha de WhatsApp e o passo de identificação do checkout. Vem ao FIM do arquivo de propósito: alguns componentes foram refeitos (.lj-item, .lj-busca, .lj-topo__nome) e as regras novas precisam vencer as antigas, que têm a mesma especificidade e ficaram acima. ===================================================================== */ /* ===================================================================== Menu lateral (drawer) + busca em destaque ===================================================================== */ /* ------------------------- botão do menu no topo --------------------- */ /* Mesmo desenho circular dos outros dois botões do topo, mas escrito aqui porque agora é um