/* 🌸 TEMA PADRÃO FLORBASE — CSS da HOME portado do artefato "Tema padrão FlorBase" (gerar.mjs, 07/11).
 * Prefixo lj- / ljg- / bn- (conferido com grep: nenhuma outra folha usa). No artefato a moldura era um contêiner
 * (@container + cqi); aqui a tela é a moldura, então @media + vw. NÃO editar à mão sem conferir com o artefato. */
/* Medida de caixa igual à do artefato (dono 07/11: "tudo parece menor"). O artefato não tem reset de box-sizing, então
   vale o padrão do navegador (content-box): `.lj-in { max-width:1200px; padding:40px }` dá 1280 por fora e 1200 de área.
   O site tem o reset global `* { box-sizing:border-box }` e a mesma regra dava 1200 por fora e 1120 de área: cards,
   bolinhas e banners saíam ~7% menores. Especificidade (0,1,0) e no TOPO: as regras do artefato que pedem border-box
   vêm depois e continuam vencendo. A caixa de compra da PDP (componentes da loja, não do artefato) fica de fora. */
[class*="lj"]:where(:not(.lj-pdp__compra *)),
[class*="lj"] :where(:not(.lj-pdp__compra, .lj-pdp__compra *)),
[class*="lj"] :where(:not(.lj-pdp__compra *))::before,
[class*="lj"] :where(:not(.lj-pdp__compra *))::after { box-sizing:content-box; }
/* Campo de formulário fica como estava: com content-box o campo de busca do topo (width:100% + padding) passava 44px
   da tela no celular (medido em 390). */
[class*="lj"] :where(input, textarea, select) { box-sizing:border-box; }
/* ===== A LOJA ===== */
.lj { background:var(--lj-bg); color:var(--lj-tx); font-family:var(--font-jakarta),system-ui,sans-serif; font-size:15px; line-height:1.5; }
.lj a { color:inherit; text-decoration:none; }
.lj h1, .lj h2, .lj h3 { margin:0; text-wrap:balance; }
.lj p { margin:0; }
.lj-in { max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }
.lj-chip { display:inline-flex; align-items:center; gap:6px; background:var(--lj-soft); color:var(--lj-ac-tx, var(--lj-ac)); font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; }
.lj-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; border-radius:999px; padding:13px 22px; border:1.5px solid transparent; transition:background .15s, border-color .15s; }
.lj-btn svg { width:18px; height:18px; }
/* ".lj .lj-btn--*" e não só a classe: ".lj a { color:inherit }" (0,1,1) vencia e o texto do botão verde saía escuro. */
.lj .lj-btn--p { background:var(--lj-ac); color:#fff; }
.lj .lj-btn--p:hover { background:var(--lj-ac2); color:#fff; }
.lj .lj-btn--l { border-color:var(--lj-li); color:var(--lj-tx); background:transparent; }
.lj-btn--l:hover { border-color:var(--lj-tx); }

/* Faixa do topo: clara, na cor suave da paleta (dono, 05/11: "nada de fundo preto no topo"). No computador os 3 avisos
   ficam fixos, lado a lado e centralizados; no celular passa 1 por vez. */
.lj-faixa { background:var(--lj-soft); color:var(--lj-tx); font-size:13px; font-weight:600; border-bottom:1px solid color-mix(in srgb, var(--lj-ac) 14%, transparent); }
.lj-faixa ul { list-style:none; margin:0; padding:10px 16px; display:flex; justify-content:center; align-items:center; gap:0; }
.lj-faixa li { display:inline-flex; align-items:center; gap:8px; padding:0 22px; }
.lj-faixa li + li { border-left:1px solid color-mix(in srgb, var(--lj-ac) 25%, transparent); }
.lj-faixa svg { width:17px; height:17px; color:var(--lj-ac-tx, var(--lj-ac)); flex:none; }
.lj-cab { background:var(--lj-bg); border-bottom:1px solid var(--lj-li); }
/* Faixa 1: logo · busca · entrar e sacola. Faixa 2: categorias, sempre centralizadas e numa linha só (o que não cabe vai pro "Mais"). */
.lj-cab__l1 { display:flex; align-items:center; gap:24px; min-height:72px; }
.lj-cab__l1 .lj-busca { flex:1; max-width:520px; width:auto; margin-inline:auto; }
.lj-entrar { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--lj-tx); padding:9px 12px; border-radius:999px; }
.lj-entrar:hover { background:var(--lj-soft); }
/* WhatsApp da loja no cabeçalho, à esquerda do Entrar: ícone + telefone (número vem do cadastro da loja). */
.lj-zap { display:inline-flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border-radius:999px; color:var(--lj-tx); }
.lj-zap:hover { background:var(--lj-soft); }
.lj-zap > svg { width:34px; height:34px; padding:7px; border-radius:50%; background:#25d366; color:#fff; flex:none; box-sizing:border-box; }
.lj-zap span { display:flex; flex-direction:column; line-height:1.15; }
.lj-zap small { font-size:11.5px; color:var(--lj-mu); font-weight:600; }
.lj-zap b { font-size:14px; font-weight:700; white-space:nowrap; }
.lj-entrar svg { width:20px; height:20px; }
.lj-catnav { border-top:1px solid var(--lj-li); }
.lj-catnav ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; align-items:center; gap:4px; min-height:48px; white-space:nowrap; }
.lj-catnav li { flex:none; position:relative; }
.lj-catnav a, .lj-catnav button { display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:14px; font-weight:600; color:var(--lj-mu); background:none; border:0; padding:8px 12px; border-radius:999px; cursor:pointer; }
.lj-catnav a:hover, .lj-catnav button:hover, .lj-catnav [aria-expanded="true"] { color:var(--lj-tx); background:var(--lj-soft); }
.lj-catnav li:first-child > a { color:var(--lj-ac-tx, var(--lj-ac)); }
.lj-catnav button svg { width:14px; height:14px; }
.lj-mais__painel { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:200px; background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:16px; padding:6px; box-shadow:0 18px 40px rgba(26,33,28,.14); display:flex; flex-direction:column; }
.lj-mais__painel a { justify-content:flex-start; border-radius:10px; }
.lj-catnav .lj-mais__painel a.lj-mais__sub { padding-left:24px; font-weight:500; font-size:13px; }
.lj-catnav li.tem-sub > a svg { width:14px; height:14px; opacity:.6; transition:transform .15s; }
.lj-catnav li.tem-sub > a[aria-expanded="true"] { color:var(--lj-tx); background:var(--lj-soft); }
.lj-catnav li.tem-sub > a[aria-expanded="true"] svg { transform:rotate(180deg); }
/* Painel da categoria: as filhas à esquerda, a foto da categoria à direita */
.lj-sub { position:absolute; z-index:25; left:50%; transform:translateX(-50%); top:100%; padding-top:8px; display:flex; }
.lj-sub[hidden] { display:none; }
.lj-sub--dir { left:auto; right:0; transform:none; }
.lj-sub::before { content:""; position:absolute; inset:8px 0 0; background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:20px; box-shadow:0 24px 50px rgba(26,33,28,.14); z-index:-1; }
.lj-sub__lista { display:flex; flex-direction:column; gap:2px; padding:16px 10px 14px 14px; min-width:200px; }
.lj-sub__lista strong { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lj-mu); padding:0 12px 8px; }
.lj-catnav .lj-sub__lista a { justify-content:flex-start; border-radius:10px; color:var(--lj-tx); font-weight:600; }
.lj-catnav .lj-sub__lista a.lj-sub__tudo { margin-top:6px; color:var(--lj-ac-tx, var(--lj-ac)); }
.lj-sub__tudo svg { width:14px; height:14px; }
/* Foto do painel: tamanho FIXO em todas as categorias (dono, 05/11), não importa quantas subcategorias. */
.lj-catnav a.lj-sub__foto, .lj-catnav a.lj-sub__foto:hover { position:relative; display:block; flex:none; align-self:flex-start; padding:0; background:none; width:230px; height:288px; margin:14px 14px 14px 0; border-radius:14px; overflow:hidden; }
.lj-sub__foto img { width:100%; height:100%; object-fit:cover; display:block; }
/* A lista tem a MESMA altura total da foto com as margens (288 + 14 + 14): o painel termina rente à foto, sem faixa vazia. */
.lj-sub__lista { box-sizing:border-box; min-height:316px; }

/* ===== Menu do celular no molde da Giuliana Flores (o mesmo da Cristel, cdr-), com a paleta da loja ===== */
button.lj-burger { display:none; place-items:center; width:42px; height:42px; margin-left:-8px; border:0; border-radius:50%; background:none; color:var(--lj-tx); cursor:pointer; flex:none; }
button.lj-burger svg { width:24px; height:24px; }
.ljg { position:fixed; top:0; bottom:0; z-index:60; overflow:hidden; font-family:var(--font-jakarta),system-ui,sans-serif; color:var(--lj-tx); }
.ljg[hidden] { display:none; }
/* A gaveta do celular é medida em border-box: com o content-box do topo (feito pro artefato), "width:100%" + recuo
   vazava 12px pra direita e a altura mínima de 60px virava 80 (dono 08/11, print do menu cortado). */
.ljg, .ljg *, .ljg *::before, .ljg *::after { box-sizing:border-box; }
button.ljg-fundo { position:absolute; inset:0; border:0; padding:0; background:rgb(26 33 28 / .45); backdrop-filter:blur(2px); animation:ljg-fade .2s ease both; }
.ljg-gaveta { position:absolute; inset:0 auto 0 0; width:min(88%,400px); display:flex; flex-direction:column; overflow:hidden; background:var(--lj-sup); box-shadow:8px 0 32px -12px rgb(26 33 28 / .35); animation:ljg-entra .24s cubic-bezier(.2,.7,.2,1) both; }
.ljg-topo { display:flex; align-items:center; height:56px; padding:0 12px; border-bottom:1px solid var(--lj-li); flex:none; }
.ljg button.ljg-fechar { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px 0 8px; border:0; border-radius:999px; background:none; color:var(--lj-tx); cursor:pointer; font:600 14px/1 inherit; font-family:inherit; }
.ljg button.ljg-fechar svg { width:20px; height:20px; }
.ljg-corpo { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 12px 24px; }
.ljg-conta { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:var(--lj-soft); color:var(--lj-tx); text-decoration:none; }
.ljg-conta > svg:first-child { width:34px; height:34px; color:var(--lj-ac-tx, var(--lj-ac)); flex:none; }
.ljg-conta > span { flex:1; min-width:0; font-size:15px; line-height:1.3; }
.ljg-conta b { color:var(--lj-ac-tx, var(--lj-ac)); }
.ljg-conta small { display:block; font-size:12.5px; color:var(--lj-mu); margin-top:2px; }
.ljg-rotulo { margin:20px 4px 8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lj-mu); }
.ljg-lista { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ljg .ljg-linha { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px; border:0; border-radius:14px; background:color-mix(in srgb, var(--lj-bg) 70%, var(--lj-sup)); color:var(--lj-tx); text-align:left; cursor:pointer; font:600 15.5px/1.25 inherit; font-family:inherit; }
.ljg .ljg-linha:hover { background:var(--lj-soft); }
.ljg-ico { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; flex:none; background:var(--lj-sup); color:var(--lj-ac-tx, var(--lj-ac)); box-shadow:0 1px 0 var(--lj-li); }
.ljg-ico svg { width:20px; height:20px; }
.ljg-nome { flex:1; min-width:0; }
.ljg-seta { width:18px; height:18px; flex:none; color:var(--lj-mu); }
.ljg-painel { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--lj-sup); animation:ljg-painel .22s cubic-bezier(.2,.7,.2,1) both; }
.ljg button.ljg-voltar { display:flex; align-items:center; gap:8px; height:56px; padding:0 16px 0 10px; flex:none; border:0; border-bottom:1px solid var(--lj-li); background:none; color:var(--lj-tx); cursor:pointer; font:700 17px/1.2 inherit; font-family:inherit; text-align:left; }
.ljg button.ljg-voltar svg { width:22px; height:22px; color:var(--lj-ac-tx, var(--lj-ac)); }
.ljg-sub { list-style:none; margin:0; padding:6px 12px 24px; overflow-y:auto; flex:1; }
.ljg-sub a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:0 8px; border-bottom:1px solid var(--lj-li); color:var(--lj-tx); text-decoration:none; font-size:15px; font-weight:500; }
.ljg-sub a.ljg-tudo { color:var(--lj-ac-tx, var(--lj-ac)); font-weight:700; }
@keyframes ljg-fade { from { opacity:0; } }
@keyframes ljg-entra { from { transform:translateX(-100%); } }
@keyframes ljg-painel { from { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { button.ljg-fundo, .ljg-gaveta, .ljg-painel { animation:none; } }
.lj-catnav .lj-sub__foto span { position:absolute; left:8px; right:8px; bottom:8px; background:var(--lj-sup); border-radius:10px; padding:7px 10px; font-size:12px; font-weight:700; color:var(--lj-tx); white-space:normal; }
.lj-logo { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.03em; white-space:nowrap; }
.lj-logo > b { font-weight:800; }
.lj-logo span { width:34px; height:34px; border-radius:50%; background:var(--lj-ac); color:#fff; display:grid; place-items:center; font-size:15px; }
.lj-nav { display:flex; gap:22px; font-size:14px; font-weight:600; color:var(--lj-mu); }
.lj-nav a:hover { color:var(--lj-tx); }
.lj-cab__acoes { margin-left:auto; display:flex; gap:10px; align-items:center; }
.lj-busca { display:flex; align-items:center; gap:8px; border:1px solid var(--lj-li); background:var(--lj-sup); border-radius:999px; padding:9px 16px; color:var(--lj-mu); font-size:14px; width:240px; }
.lj-busca svg, .lj-ico svg { width:18px; height:18px; flex:none; }
.lj-ico { width:42px; height:42px; border-radius:50%; border:1px solid var(--lj-li); display:grid; place-items:center; background:var(--lj-sup); position:relative; }
.lj-ico b { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:999px; background:var(--lj-ac); color:#fff; font-size:11px; display:grid; place-items:center; padding:0 5px; }

/* ===== BANNERS DO TOPO (molde Giuliana): a cena é CSS e sai da paleta da loja; texto e preço vêm da loja. ===== */
.lj-bn { position:relative; overflow:hidden; }
.bn-trilho { display:grid; }
.bn-sl { grid-area:1/1; position:relative; isolation:isolate; display:flex; height:400px; overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s; --bn-tx:color-mix(in srgb, var(--lj-ac) 55%, #1b1414); }
.bn-sl.ativo { opacity:1; visibility:visible; }
/* Banner em imagem pronta: inteiro (contain), sobra preenchida com a cor do fundo dele. */
/* Banner em imagem pronta: a caixa tem a proporção do ARQUIVO (1920×400), em toda largura de tela. */
/* `--bn-ar` = formato escolhido no editor de banners (09/11); sem escolha, o 1920×400 de sempre. */
/* 13/11 (dono: "o banner se ajustar a cada tipo de foto... só não deixe estourar"): a caixa segue a FOTO, que aparece
   INTEIRA (contain). `--bn-ar` agora só reserva o lugar até a foto carregar. Teto de altura = `--lj-arte-teto`; passou do
   teto, a foto encolhe inteira e a sobra dos lados ganha a própria foto desfocada (`data-sobra`, posto pelo `home-interativa`). */
.lj-bn .bn-sl--img { display:block; height:auto; background:var(--lj-soft); --bn-tx:#fff; }
.bn-sl--img img { position:relative; width:100%; height:auto; aspect-ratio:auto var(--bn-ar, 1920 / 400); max-height:var(--lj-arte-teto); object-fit:contain; display:block; }
/* Do 2º banner em diante: a MESMA caixa do 1º (a página não sobe e desce quando o carrossel gira). */
.bn-trilho { position:relative; }
.lj-bn .bn-sl--img ~ .bn-sl--img { position:absolute; inset:0; }
.lj-bn .bn-sl--img ~ .bn-sl--img img { height:100%; max-height:none; aspect-ratio:auto; }
.bn-h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.bn-sl--img ~ .bn-pontos, .lj-bn:has(.bn-sl--img.ativo) .bn-pontos button { border-color:#fff; }
.lj-bn:has(.bn-sl--img.ativo) .bn-pontos button[aria-current="true"] { background:#fff; }
.bn-cena, .bn-cena > span { position:absolute; inset:0; z-index:-1; }
.bn-in { position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:24px; padding-block:24px 0; }
.bn-txt { display:flex; flex-direction:column; align-items:flex-start; gap:14px; color:var(--bn-tx); padding-left:clamp(0px,3vw,48px); }
.bn-sobre { font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
.bn-sobre::before, .bn-sobre::after { content:"•"; margin-inline:.5em; }
.bn-sobre::before { margin-left:0; }
.bn-tit { font-family:var(--font-fraunces),Georgia,'Times New Roman',serif; font-weight:300; font-size:clamp(46px,6.6vw,86px); line-height:.92; letter-spacing:-.02em; }
.bn-tit i { display:block; font-weight:300; }
.bn-tit b { font-style:italic; font-weight:800; }
.bn-tit small { font-size:.42em; font-style:italic; font-weight:500; margin-inline:.1em .15em; }
.bn-cta { background:var(--lj-ac); color:#fff; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:11px 28px; border-radius:999px; box-shadow:0 8px 20px -8px color-mix(in srgb, var(--lj-ac) 70%, transparent); transition:transform .15s, background .15s; }
.bn-sl:hover .bn-cta { background:var(--lj-ac2); transform:translateY(-1px); }
.bn-nota { font-size:12px; opacity:.75; }
.bn-prod { position:relative; justify-self:center; align-self:end; width:min(100%,330px); margin-bottom:22px; }
/* Foto de catálogo raramente é branco puro: a borda some num degradê pra não aparecer o quadrado da foto. */
.bn-prod img { position:relative; display:block; width:100%; aspect-ratio:1/1; object-fit:cover; mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(ellipse 50% 52% at 50% 50%, #000 62%, transparent 100%); mask:radial-gradient(ellipse 50% 52% at 50% 50%, #000 62%, transparent 100%); }
/* Pedestal: tampo (elipse) + corpo. Fica atrás da foto; o branco da foto some em cima dele. */
.bn-pedestal { position:absolute; left:6%; right:6%; bottom:-40px; height:96px; border-radius:0 0 50% 50% / 0 0 30px 30px;
  background:linear-gradient(90deg, var(--bn-p2) 0%, var(--bn-p1) 45%, var(--bn-p2) 100%); }
.bn-pedestal::before { content:""; position:absolute; left:0; right:0; top:-26px; height:52px; border-radius:50%; background:var(--bn-p0); box-shadow:inset 0 -6px 14px rgb(0 0 0 / .06); }
.bn-selo { position:absolute; left:-18%; top:6%; width:clamp(104px,10vw,132px); aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:var(--lj-ac); color:#fff; line-height:1; box-shadow:0 14px 30px -12px rgb(0 0 0 / .35); transform:rotate(-8deg); }
.bn-selo small { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.bn-selo b sup { font-size:.48em; vertical-align:.8em; margin-left:1px; letter-spacing:0; }
.bn-selo b { font-size:clamp(26px,2.6vw,32px); font-weight:800; letter-spacing:-.03em; margin-block:4px 0; }
.bn-pontos { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px; z-index:2; }
.bn-pontos button { width:10px; height:10px; padding:0; border-radius:50%; border:1.5px solid var(--bn-tx,#1a211c); border-color:color-mix(in srgb, var(--lj-ac) 55%, #1b1414); background:transparent; cursor:pointer; opacity:.6; }
.bn-pontos button[aria-current="true"] { background:color-mix(in srgb, var(--lj-ac) 55%, #1b1414); opacity:1; }

/* Cena 1 — cortina pregueada + chão (como o "aniversário" da Giuliana). */
.bn-sl--cortina { --bn-p0:color-mix(in srgb, var(--lj-ac) 10%, #fffaf7); --bn-p1:color-mix(in srgb, var(--lj-ac) 16%, #fbefe9); --bn-p2:color-mix(in srgb, var(--lj-ac) 30%, #e9d4cc); }
.bn-sl--cortina .bn-c1 { background:color-mix(in srgb, var(--lj-ac) 20%, #f8ebe5); }
.bn-sl--cortina .bn-c2 { bottom:24%; background:repeating-linear-gradient(90deg, rgb(255 255 255 / .38) 0 22px, rgb(255 255 255 / 0) 34px, rgb(0 0 0 / .07) 46px, rgb(255 255 255 / 0) 58px, rgb(255 255 255 / .38) 72px);
  -webkit-mask:linear-gradient(90deg, #000 0 52%, transparent 78%); mask:linear-gradient(90deg, #000 0 52%, transparent 78%); }
.bn-sl--cortina .bn-c3 { top:auto; height:24%; background:linear-gradient(color-mix(in srgb, var(--lj-ac) 28%, #ecd6cd), color-mix(in srgb, var(--lj-ac) 22%, #f2e1da)); }
/* Cena 2 — luz entrando na diagonal (como o "conheça a coleção"), em tom claro e quente. */
.bn-sl--luz { --bn-p0:#fffaf0; --bn-p1:#f6ead3; --bn-p2:#e7d5b5; }
.bn-sl--luz .bn-c1 { background:radial-gradient(ellipse 60% 80% at 70% 40%, #fffaf0, transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--lj-ac) 8%, #f7ecd6), color-mix(in srgb, var(--lj-ac) 14%, #ead9b9)); }
.bn-sl--luz .bn-c2 { background:linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .55) 24%, transparent 31%, transparent 38%, rgb(255 255 255 / .4) 43%, transparent 50%, transparent 58%, rgb(255 255 255 / .3) 62%, transparent 68%); filter:blur(6px); }
.bn-sl--luz .bn-c3 { top:auto; height:20%; background:linear-gradient(rgb(255 255 255 / 0), color-mix(in srgb, var(--lj-ac) 12%, #e3cfa9)); }
.bn-sl--luz .bn-selo { background:#fff; color:var(--lj-ac-tx, var(--lj-ac)); }
/* Cena 3 — arco + bolas (como os balões), na cor suave da paleta. */
.bn-sl--arco { --bn-p0:#ffffff; --bn-p1:color-mix(in srgb, var(--lj-ac) 8%, #fff); --bn-p2:color-mix(in srgb, var(--lj-ac) 22%, #e8ece6); }
.bn-sl--arco .bn-c1 { background:color-mix(in srgb, var(--lj-ac) 16%, #f1f3ee); }
.bn-sl--arco .bn-c2 { left:auto; right:6%; width:min(44%,470px); top:10%; bottom:0; border-radius:999px 999px 0 0; background:color-mix(in srgb, var(--lj-ac) 7%, #fbfcf9); }
.bn-sl--arco .bn-c3 { --b1:color-mix(in srgb, var(--lj-ac) 34%, #fff); --b2:color-mix(in srgb, var(--lj-ac) 22%, #fff);
  background:
  radial-gradient(circle closest-side at 38% 34%, rgb(255 255 255 / .95), var(--b1) 55%, color-mix(in srgb, var(--lj-ac) 48%, #fff) 96%, transparent 100%) 90% 14% / 110px 110px no-repeat,
  radial-gradient(circle closest-side at 38% 34%, rgb(255 255 255 / .95), var(--b2) 55%, var(--b1) 96%, transparent 100%) 97% 62% / 80px 80px no-repeat,
  radial-gradient(circle closest-side at 38% 34%, rgb(255 255 255 / .95), var(--b2) 55%, var(--b1) 96%, transparent 100%) 54% 10% / 58px 58px no-repeat; }
@media (prefers-reduced-motion: reduce) { .bn-sl { transition:none; } }
/* Respiro entre seções mais curto (dono 05/11: "parece que uma tem medo da outra"). */
.lj-sec { padding-block:clamp(18px,2.4vw,32px); }
.lj-sec__cab { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.lj-sec__cab h2 { font-weight:800; font-size:clamp(26px,3vw,38px); letter-spacing:-.035em; line-height:1.08; }
.lj-sec__cab p { color:var(--lj-mu); margin-top:6px; }
.lj-sec__cab a { font-weight:700; color:var(--lj-ac-tx, var(--lj-ac)); display:inline-flex; gap:6px; align-items:center; }
.lj-sec__cab a svg { width:16px; height:16px; }

/* Faixa "Compre por preço": fundo suave da paleta, título à esquerda, 4 faixas de valor. */
.lj-preco { background:var(--lj-soft); margin-block:8px 12px; }
.lj-preco .lj-in { display:flex; align-items:center; gap:clamp(16px,3vw,40px); padding-block:22px; }
.lj-preco h2 { font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.03em; flex:none; }
.lj-preco__lista { flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.lj-preco__lista a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:14px 10px; border-radius:16px;
  background:var(--lj-sup); border:1px solid var(--lj-li); transition:border-color .15s, background .15s, color .15s; }
.lj-preco__lista small { font-size:13px; font-weight:600; color:var(--lj-mu); line-height:1; }
.lj-preco__lista b { font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.03em; color:var(--lj-ac-tx, var(--lj-ac)); line-height:1; }
.lj-preco__lista a:hover { background:var(--lj-ac); border-color:var(--lj-ac); }
.lj-preco__lista a:hover small, .lj-preco__lista a:hover b { color:#fff; }
/* Categorias em CÍRCULO com o título embaixo (dono 05/11). */
.lj-cats { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(12px,2vw,24px); }
.lj-cat { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; text-align:center; }
.lj-cat img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:50%; background:var(--lj-sup);
  box-shadow:0 0 0 2px var(--lj-bg), 0 0 0 4px var(--lj-li); transition:transform .3s, box-shadow .2s; }
@media (hover: hover) { .lj-cat:hover img { transform:scale(1.04); box-shadow:0 0 0 2px var(--lj-bg), 0 0 0 4px var(--lj-ac); } }
.lj-cat span { font-weight:700; font-size:15px; line-height:1.25; }
@media (hover: hover) { .lj-cat:hover span { color:var(--lj-ac-tx, var(--lj-ac)); } }

.lj-grade { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.lj-card { background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; }
.lj-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(26,33,28,.1); border-color:var(--lj-ac); }
.lj-card__foto { position:relative; }
.lj-card__foto img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
/* Fotos do card: no computador só a capa; no celular arrasta com o dedo, com bolinhas. */
.lj-fotos { display:flex; overflow:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
.lj-fotos img { flex:0 0 100%; scroll-snap-align:start; }
.lj-pontos { display:none; }
.lj-card__selo { position:absolute; left:10px; top:10px; background:var(--lj-sup); }
/* Selos do card: empilhados no canto de cima, cada um com ícone e cor própria. */
.lj-card__selos { position:absolute; left:10px; top:10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.lj-selo { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; line-height:1; padding:6px 10px 6px 8px; border-radius:999px;
  background:var(--lj-sup); color:var(--lj-ac-tx, var(--lj-ac)); box-shadow:0 2px 8px rgb(0 0 0 / .1); }
.lj-selo svg { width:13px; height:13px; flex:none; }
.lj-selo--hoje { background:var(--lj-selo, var(--lj-tx)); color:var(--lj-selo-tx, var(--lj-bg)); } /* dono 10/11: "o rosa muito forte" em todo card; o selo vai na cor do TEXTO da loja (letra = cor do fundo, lê em tema claro e escuro) */
.lj-selo--expresso { background:#c2410c; color:#fff; }
.lj-selo--retirada { background:var(--lj-sup); color:var(--lj-tx); }
.lj-selo--amanha { background:var(--lj-soft); color:var(--lj-ac-tx, var(--lj-ac)); }
.lj-card__txt { padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lj-card h3 { font-size:15px; font-weight:700; line-height:1.3; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.lj-card h3 { min-height:2.6em; } /* nome sempre ocupa 2 linhas (dono 05/11) */
.lj-card__preco b { white-space:nowrap; } .lj-card__preco { font-size:16px; letter-spacing:-.02em; margin-top:auto; }
.lj-card__preco s { font-size:13px; color:var(--lj-mu); }
.lj-card__acoes { display:flex; gap:8px; padding-top:4px; }
.lj-card__acoes .lj-btn { flex:1; padding:10px 12px; font-size:14px; min-width:0; white-space:nowrap; }
.lj-btn--click svg { width:15px; height:15px; flex:none; }
.lj-card__nota { display:flex; align-items:center; gap:5px; font-size:13px; margin-top:-4px; line-height:1; }
.lj-card__nota span { color:#e8a317; letter-spacing:1px; font-size:13px; }
.lj-card__nota b { font-weight:700; }
.lj-card__nota small { color:var(--lj-mu); }
.lj-card__parc { font-size:13px; color:var(--lj-mu); margin-top:-6px; }
.lj-duo { padding-inline:0; }
.lj-duo .lj-in { display:block; max-width:none; padding-inline:0; container-type:inline-size; }
.lj-duo__b { display:block; overflow:hidden; background:var(--lj-soft); } /* 13/11: a caixa segue a foto (ver o topo); fundo claro da loja enquanto carrega */
.lj-duo__b img { position:relative; width:100%; height:auto; aspect-ratio:auto 1920 / 400; max-height:var(--lj-arte-teto); object-fit:contain; display:block; }
/* Mais vendidos: título, seletor de categoria e "Ver todos" na mesma linha. */
.lj-mv .lj-sec__cab { align-items:center; }
.lj-mv .lj-sec__cab h2 { margin-right:auto; }
.lj-abas { display:flex; gap:6px; flex-wrap:wrap; }
.lj-abas button { font:inherit; font-size:14px; font-weight:600; color:var(--lj-mu); background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:999px; padding:8px 16px; cursor:pointer; }
.lj-abas button:hover { color:var(--lj-tx); border-color:var(--lj-tx); }
.lj-abas button[aria-selected="true"] { background:var(--lj-ac); border-color:var(--lj-ac); color:#fff; }
.lj-grade[hidden] { display:none; }
/* Banner vertical + 3 produtos na mesma linha; --dir põe o banner à direita. */
.lj-bp { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch; }
.lj-bp--dir .lj-bp__banner { order:4; }
.lj-bp__mob, .lj-bp__prods { display:none; }
/* Banner com versão de celular: no computador só a deitada. */
.so-cel { display:none !important; }
.lj-bp__banner { display:grid; place-items:center; border-radius:20px; overflow:hidden; text-align:center; min-height:100%;
  background:linear-gradient(160deg, var(--lj-soft), color-mix(in srgb, var(--lj-ac) 22%, var(--lj-sup))); color:var(--lj-ac-tx, var(--lj-ac)); font-weight:800; font-size:20px;
  border:2px dashed color-mix(in srgb, var(--lj-ac) 30%, transparent); box-sizing:border-box; }
.lj-bp__banner small { display:block; font-size:13px; font-weight:600; color:var(--lj-mu); margin-top:4px; }
.lj-bp__banner img { width:100%; height:100%; object-fit:cover; display:block; }
.lj-bp__banner--arte { border:0; padding:0; position:relative; } .lj-bp__banner--arte img { position:absolute; inset:0; }
/* 13/11: a caixa aqui é a altura dos cards. Foto perto da proporção preenche (como sempre); muito fora, aparece inteira. */
.lj-bp__banner--arte[data-inteira] img { object-fit:contain; }
.lj-grade--5 { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.lj-grade--5 .lj-card h3 { font-size:14px; }
/* 3 banners lado a lado, borda arredondada, proporção 4:5 (arte 800 x 1000). No celular viram trilho de arrastar. */
.lj-tri { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lj-tri__b { display:block; background:#fff; box-shadow:0 0 0 1px var(--lj-li); border-radius:20px; overflow:hidden; text-align:center;
  color:var(--lj-ac-tx, var(--lj-ac)); font-weight:800; font-size:20px; }
/* 13/11: a fileira segue a foto do 1º banner (teto 480); os outros 2 ficam na mesma altura, com a foto inteira. */
.lj-tri__b img { position:relative; width:100%; height:auto; aspect-ratio:auto 1 / 1; max-height:480px; object-fit:contain; display:block; transition:transform .4s; }
.lj-tri__b ~ .lj-tri__b img { position:absolute; inset:0; height:100%; max-height:none; aspect-ratio:auto; }
.lj-tri__b:hover img { transform:scale(1.03); }
.lj-tri__b small { display:block; font-size:13px; font-weight:600; color:var(--lj-mu); margin-top:4px; }
.lj-tri__b--1 { background:var(--lj-soft); }
.lj-tri__b--2 { background:color-mix(in srgb, var(--lj-ac) 14%, var(--lj-sup)); }
.lj-tri__b--3 { background:color-mix(in srgb, var(--lj-ac) 8%, var(--lj-sup)); }
/* TESTE (dono 05/11): 1 card dos Mais vendidos sem o Comprar e sem o parcelamento; o WhatsApp fica à direita. */
 .lj-card--enxuto .lj-card__preco { margin-top:2px; }

.lj-wa { width:42px; height:42px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; flex:none; }
.lj-wa svg { width:20px; height:20px; }

.lj-dif { background:var(--lj-sup); border-block:1px solid var(--lj-li); }
.lj-dif { margin-bottom:8px; }
.lj-dif ul { list-style:none; margin:0; padding:20px 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lj-dif li { display:flex; gap:12px; align-items:center; justify-content:center; padding-inline:14px; min-width:0; }
.lj-dif li + li { border-left:1px solid var(--lj-li); }
.lj-dif li span { width:46px; height:46px; border-radius:50%; background:var(--lj-soft); color:var(--lj-ac-tx, var(--lj-ac)); display:grid; place-items:center; flex:none; }
.lj-dif li span svg { width:22px; height:22px; }
.lj-dif strong { display:block; font-size:15px; line-height:1.25; }
.lj-dif small { display:block; color:var(--lj-mu); font-size:13px; line-height:1.35; }

/* Avaliações: resumo do Google + trilho de depoimentos. */
.lj-g { width:20px; height:20px; flex:none; }
.lj-av-setas { display:flex; gap:8px; }
.lj-av-setas button { width:40px; height:40px; border-radius:50%; border:1px solid var(--lj-li); background:var(--lj-sup); font-size:22px; line-height:1; color:var(--lj-tx); cursor:pointer; }
.lj-av-setas button:hover { border-color:var(--lj-ac); color:var(--lj-ac-tx, var(--lj-ac)); }
.lj-av { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:stretch; }
.lj-av__resumo { box-sizing:border-box; background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:16px; }
.lj-av__g { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--lj-mu); }
.lj-av__g .lj-g { width:26px; height:26px; }
.lj-av__g b { color:var(--lj-tx); }
.lj-av__nota { display:flex; align-items:center; gap:14px; }
.lj-av__nota > b { font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.lj-av__nota .lj-estrelas { display:block; font-size:18px; }
.lj-av__nota small { font-size:13px; color:var(--lj-mu); }
.lj-av__barras { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.lj-av__barras li { display:grid; grid-template-columns:12px 1fr; align-items:center; gap:10px; font-size:12px; color:var(--lj-mu); }
.lj-av__barras i { height:7px; border-radius:99px; background:var(--lj-soft); overflow:hidden; }
.lj-av__barras i b { display:block; height:100%; background:#f4b400; border-radius:99px; }
.lj-av__acoes { display:grid; gap:8px; margin-top:auto; }
.lj-av__acoes .lj-btn { padding:11px 14px; font-size:14px; }
.lj-av__trilho { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; }
.lj-av__card { box-sizing:border-box; flex:0 0 calc((100% - 28px) / 3); scroll-snap-align:start; background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.lj-av__card header { display:flex; align-items:center; gap:10px; }
.lj-av__card header > div { flex:1; min-width:0; }
.lj-av__card header b { display:block; font-size:14px; }
.lj-av__card header small { font-size:12px; color:var(--lj-mu); }
.lj-av__card p::before { content:'\201C'; display:block; font-family:var(--font-fraunces),Georgia,serif; font-size:56px; line-height:.6; height:22px; color:color-mix(in srgb, var(--lj-ac) 30%, transparent); }
.lj-av__ava { width:38px; height:38px; flex:none; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; }
.lj-av__card p { font-size:15.5px; line-height:1.6; color:var(--lj-tx); }
.lj-av__card footer { margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--lj-li); font-size:12px; color:var(--lj-mu); min-width:0; }
.lj-av__card footer img { width:36px; height:36px; border-radius:10px; object-fit:cover; flex:none; }
.lj-av__card footer span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lj-av__card footer b { color:var(--lj-tx); font-weight:600; }
/* FAQ: título e WhatsApp à esquerda, acordeão à direita. */
.lj-faq .lj-in { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(20px,4vw,56px); align-items:start; }
.lj-faq__lado { display:flex; flex-direction:column; gap:10px; align-items:flex-start; position:sticky; top:20px; }
.lj-faq__eyebrow { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--lj-ac-tx, var(--lj-ac)); }
.lj-faq__lado h2 { font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.lj-faq__lado p { color:var(--lj-mu); font-size:15px; margin-bottom:6px; }
.lj-faq__lado .lj-btn { padding:12px 18px; font-size:14px; }
.lj-faq__lista { display:grid; gap:10px; }
.lj-faq__lista details { background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:16px; transition:border-color .15s; }
.lj-faq__lista details[open] { border-color:color-mix(in srgb, var(--lj-ac) 40%, var(--lj-li)); }
.lj-faq__lista summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 20px; font-weight:700; font-size:15.5px; }
.lj-faq__lista summary::-webkit-details-marker { display:none; }
.lj-faq__lista summary span { position:relative; width:26px; height:26px; flex:none; border-radius:50%; background:var(--lj-soft); }
.lj-faq__lista summary span::before, .lj-faq__lista summary span::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; translate:-50% -50%; background:var(--lj-ac); border-radius:2px; transition:rotate .2s; }
.lj-faq__lista summary span::after { rotate:90deg; }
.lj-faq__lista details[open] summary span::after { rotate:0deg; }
.lj-faq__lista details p { padding:0 20px 18px; color:var(--lj-mu); font-size:14.5px; line-height:1.6; }
.lj-aval { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lj-aval article { background:var(--lj-sup); border:1px solid var(--lj-li); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.lj-estrelas { color:#e2a12b; letter-spacing:2px; }
/* Sempre 5 estrelas, como no artefato: as que passam da nota ficam apagadas (rodada 2 do review 08/11). Vale PDP, card e home. */
.lj-estrela-apagada { opacity:.28; }
.lj-aval footer { font-size:13px; color:var(--lj-mu); margin-top:auto; }
.lj-aval footer b { color:var(--lj-tx); }

/* Instagram em formato de story: perfil da loja + 5 stories 9:16 com barra, avatar e legenda. */
.lj-ig__perfil { display:flex; align-items:center; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.lj-ig__ava { width:78px; height:78px; flex:none; border-radius:50%; padding:3px; background:conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.lj-ig__ava span { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--lj-ac); color:#fff; font-size:30px; font-weight:800; border:3px solid var(--lj-bg); box-sizing:border-box; }
.lj-ig__quem { flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; }
.lj-ig__quem > b { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.lj-ig__quem > span { font-size:14px; color:var(--lj-mu); }
.lj-ig__quem ul { list-style:none; margin:4px 0 0; padding:0; display:flex; gap:18px; font-size:14px; color:var(--lj-mu); flex-wrap:wrap; }
.lj-ig__quem ul b { color:var(--lj-tx); }
.lj .lj-ig__seguir { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:14px; padding:12px 20px; border-radius:999px;
  background:linear-gradient(90deg, #f58529, #dd2a7b 50%, #8134af); box-shadow:0 8px 20px -10px rgb(221 42 123 / .7); }
.lj-ig__seguir svg { width:18px; height:18px; }
.lj-ig { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.lj .lj-ig__story { color:#fff; } .lj-ig__story { position:relative; aspect-ratio:9 / 16; border-radius:18px; overflow:hidden; display:block; isolation:isolate; color:#fff; }
.lj-ig__fundo { position:absolute; inset:-20px; background-size:cover; background-position:center; filter:blur(18px) brightness(.85) saturate(1.2); z-index:-2; }
.lj-ig__story img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform .4s; }
.lj-ig__story:hover img { transform:scale(1.04); }
.lj-ig__story::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgb(0 0 0 / .5), transparent 24%, transparent 62%, rgb(0 0 0 / .65)); }
.lj-ig__barra { position:absolute; left:10px; right:10px; top:10px; height:3px; border-radius:3px; background:rgb(255 255 255 / .35); overflow:hidden; }
.lj-ig__barra i { display:block; height:100%; background:#fff; }
.lj-ig__topo { position:absolute; left:10px; right:10px; top:22px; display:flex; align-items:center; gap:7px; font-size:12px; }
.lj-ig__mini { width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--lj-ac); font-weight:800; font-size:12px; box-shadow:0 0 0 2px #fff; }
.lj-ig__topo small { opacity:.8; }
.lj-ig__reel { position:absolute; left:50%; top:50%; translate:-50% -50%; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgb(0 0 0 / .35); backdrop-filter:blur(4px); font-size:16px; padding-left:3px; box-sizing:border-box; }
.lj-ig__legenda { position:absolute; left:12px; right:12px; bottom:14px; font-size:13px; font-weight:700; line-height:1.3; text-shadow:0 1px 6px rgb(0 0 0 / .5); }
/* Selo da loja de DEMONSTRAÇÃO (lib/storefront/loja-demonstracao.ts): avaliações e Instagram de exemplo, sempre legível. */
.lj .lj-exemplo, .lj-ig__quem > .lj-exemplo { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:5px 12px; border-radius:999px;
  background:#fff4d6; color:#7a4a00; border:1px dashed #d9a23a; font-size:12.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1.2; }
.lj .lj-exemplo::before { content:"i"; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#d9a23a; color:#fff; font-size:11px; font-style:italic; font-family:Georgia,serif; text-transform:none; }
.lj span.lj-ig__seguir[aria-disabled="true"] { cursor:default; }
/* Visite a loja: mapa na largura do conteúdo, cartão branco por cima à esquerda. */
.lj-loja2 { position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--lj-li); min-height:440px; display:flex; align-items:center; }
.lj-loja2__mapa { position:absolute; inset:0; background:color-mix(in srgb, var(--lj-ac) 6%, #f3f1ea); }
.lj-loja2__mapa img { width:100%; height:100%; object-fit:cover; object-position:64% 50%; display:block; }
.lj-loja2__pino { position:absolute; left:64%; top:50%; width:26px; height:26px; translate:-50% -50%; }
.lj-loja2__pino::before { content:""; position:absolute; inset:-14px; border-radius:50%; background:color-mix(in srgb, var(--lj-ac) 25%, transparent); animation:lj-pulso 2.2s ease-out infinite; }
.lj-loja2__pino i { position:absolute; inset:0; border-radius:50%; background:var(--lj-ac); border:4px solid #fff; box-shadow:0 4px 12px rgb(0 0 0 / .25); }
@keyframes lj-pulso { from { transform:scale(.4); opacity:1; } to { transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .lj-loja2__pino::before { animation:none; } }
.lj-loja2__card { position:relative; margin:28px; width:min(380px, 100%); background:var(--lj-sup); border-radius:20px; padding:22px; box-shadow:0 20px 50px -18px rgb(26 33 28 / .35); display:flex; flex-direction:column; gap:14px; }
.lj-loja2__topo { display:flex; gap:12px; align-items:center; }
.lj-loja2__topo h2 { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.lj-loja2__topo p { font-size:13px; color:var(--lj-mu); line-height:1.35; }
.lj-loja2__logo { width:48px; height:48px; flex:none; border-radius:14px; background:var(--lj-ac); color:#fff; display:grid; place-items:center; font-weight:800; font-size:22px; }
/* ícone da loja (10/11): no lugar da inicial, em fundo branco com fio fino (a marca manda a cor) */
.lj-loja2__logo--img { background:#fff; box-shadow:inset 0 0 0 1px var(--lj-li); overflow:hidden; }
.lj-loja2__logo--img img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; display:block; }
.lj-ig__ava span.lj-ig__ava-img { background:#fff; overflow:hidden; }
.lj-ig__ava-img img { width:100%; height:100%; object-fit:contain; padding:16%; box-sizing:border-box; display:block; }
.lj-loja2__aberto { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--lj-ac-tx, var(--lj-ac)); background:var(--lj-soft); padding:6px 12px; border-radius:99px; }
.lj-loja2__aberto i { width:8px; height:8px; border-radius:50%; background:#22a55a; box-shadow:0 0 0 3px rgb(34 165 90 / .2); }
.lj-loja2__horas { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; border-block:1px solid var(--lj-li); padding-block:12px; }
.lj-loja2__horas li { display:flex; justify-content:space-between; gap:12px; }
.lj-loja2__horas span { color:var(--lj-mu); }
.lj-loja2__retira { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.lj-loja2__retira svg { width:18px; height:18px; color:var(--lj-ac-tx, var(--lj-ac)); flex:none; }
.lj-loja2__btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lj-loja2__btns .lj-btn { padding:11px 10px; font-size:14px; white-space:nowrap; }
.lj-loja2__eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--lj-ac-tx, var(--lj-ac)); margin-bottom:2px; }
.lj-loja2__end { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:14px; line-height:1.45; color:var(--lj-tx); }
.lj-loja2__copiar { flex:none; display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px; font-weight:700; color:var(--lj-ac-tx, var(--lj-ac)); background:var(--lj-soft); border:0; border-radius:99px; padding:6px 10px; cursor:pointer; }
.lj-loja2__copiar svg { width:14px; height:14px; }
.lj-loja2__horas li.hoje b, .lj-loja2__horas li.hoje span { color:var(--lj-ac-tx, var(--lj-ac)); font-weight:700; }
.lj-loja2__rota > span { display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--lj-mu); margin-bottom:8px; }
.lj-loja2__apps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.lj-app { display:flex; align-items:center; justify-content:center; gap:7px; height:46px; border-radius:14px; font-size:14px; font-weight:700; transition:transform .15s, box-shadow .15s; }
.lj-app:hover { transform:translateY(-2px); box-shadow:0 8px 18px -8px rgb(0 0 0 / .35); }
.lj-app svg { width:20px; height:20px; flex:none; }
.lj .lj-app--maps { background:#fff; color:#1a211c; box-shadow:inset 0 0 0 1.5px var(--lj-li); } .lj-app--maps svg { color:#4285F4; }
.lj .lj-app--waze { background:#33CCFF; color:#06202c; } .lj-app--waze svg { color:#06202c; }
.lj .lj-app--uber { background:#000; color:#fff; } .lj-app--uber svg { width:auto; height:44px; aspect-ratio:1; }
.lj-loja2__pino b { position:absolute; left:50%; bottom:calc(100% + 12px); translate:-50% 0; white-space:nowrap; background:var(--lj-tx); color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border-radius:8px; box-shadow:0 6px 16px rgb(0 0 0 / .2); }
.lj-loja2__pino b::after { content:""; position:absolute; left:50%; top:100%; translate:-50% 0; border:6px solid transparent; border-top-color:var(--lj-tx); }
.lj-loja2 + .lj-seo { margin-top:20px; }
.lj .lj-loja2__wa { background:#17A04D; color:#fff; } .lj .lj-loja2__wa:hover { background:#128C43; color:#fff; } /* dono 10/11: texto BRANCO; o verde desceu um tom pro branco ler (3,4; no verde claro dava 1,98) */
.lj-seo { color:var(--lj-mu); font-size:14px; max-width:75ch; margin-top:28px; }
/* Rodapé: escuro (dono aprovou), faixa de novidades em cima, grade de 4 colunas, pagamento e linha final. */
.lj-rod { background:var(--lj-tx); color:color-mix(in srgb, var(--lj-bg) 78%, transparent); margin-top:0; border-top:clamp(32px,5vw,64px) solid var(--lj-bg); font-size:14px; }
/* 07/11 (dono "arruma o espaço antes do rodapé"): no artefato o respiro de 64px acima do rodapé fica DENTRO da loja, na
   cor --lj-bg. No site o rodapé é irmão do <main> e a margem mostrava o fundo do <body> (quase branco): uma faixa clara
   entre a última seção e o rodapé em todas as páginas. Mesmo respiro, agora na cor da loja (borda de cima). */
.lj-rod a:hover { color:#fff; }
.lj-rod .lj-rod__tit { margin:0 0 14px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#fff; }
.lj-rod ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lj-rod__news { background:color-mix(in srgb, var(--lj-ac) 85%, #000); color:#fff; }
.lj-rod__news .lj-in { display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; padding-block:26px; }
.lj-rod__news h2 { margin:0 0 4px; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.lj-rod__news p { opacity:.85; }
.lj-rod__form { display:flex; gap:6px; background:#fff; border-radius:999px; padding:5px; width:min(100%,420px); }
.lj-rod__form input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:14px; padding:0 14px; color:#1a211c; }
.lj-rod__form button { border:0; cursor:pointer; font:inherit; font-weight:700; font-size:14px; padding:11px 18px; border-radius:999px; background:var(--lj-tx); color:#fff; white-space:nowrap; }
.lj-rod__grade { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:32px; padding-block:44px 32px; }
.lj-rod__logo { color:#fff; font-size:22px; }
/* Logomarca da loja (Aparência › Logomarca, 08/11): altura fixa, largura livre (logo deitada), nunca estoura o topo. */
.lj-logo--img { flex:none; min-width:0; }
.lj-logo--img img { display:block; height:56px; width:auto; max-width:min(320px, 52vw); object-fit:contain; } /* 10/11 (dono): logo maior (era 40) */
.lj-rod__logo--img { display:inline-flex; padding:10px 16px; border-radius:16px; background:#fff; }
.lj-rod__logo--img img { display:block; height:44px; width:auto; max-width:min(240px, 70vw); object-fit:contain; }
.lj-rod__marca p { margin:14px 0 18px; max-width:34ch; line-height:1.6; }
.lj-rod__redes { display:flex; gap:10px; }
.lj-rod__redes a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--lj-bg) 12%, transparent); color:#fff; transition:background .15s, transform .15s; }
.lj-rod__redes a:hover { background:var(--lj-ac); transform:translateY(-2px); }
.lj-rod__redes svg { width:18px; height:18px; }
.lj-rod__contato li { display:flex; gap:12px; align-items:flex-start; }
.lj-rod__contato svg { width:18px; height:18px; flex:none; margin-top:2px; color:color-mix(in srgb, var(--lj-ac) 55%, #fff); }
.lj-rod__contato span { display:flex; flex-direction:column; font-size:13px; }
.lj-rod__contato b { color:#fff; font-size:14px; font-weight:600; }
.lj-rod__pag { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding-block:24px; border-top:1px solid color-mix(in srgb, var(--lj-bg) 14%, transparent); }
.lj-rod__pag h4 { margin-bottom:10px; }
.lj-rod__chips { display:flex; gap:8px; flex-wrap:wrap; }
.lj-chip-pag { height:32px; min-width:52px; padding:0 10px; border-radius:8px; background:#fff; display:inline-grid; place-items:center; box-sizing:border-box; }
.lj-chip-pag svg { height:18px; width:auto; max-width:40px; }
.lj-chip-pag--pix svg { color:#32BCAD; } .lj-chip-pag--visa svg { color:#1A1F71; height:26px; max-width:44px; } .lj-chip-pag--americanexpress svg { height:24px; } .lj-chip-pag--mastercard svg { color:#EB001B; }
.lj-chip-pag--americanexpress svg { color:#2E77BC; } .lj-chip-pag--elo { font-weight:900; font-size:15px; color:#000; letter-spacing:-.02em; }
.lj-rod__seguro { display:flex; gap:12px; align-items:center; }
.lj-rod__seguro svg { width:30px; height:30px; color:color-mix(in srgb, var(--lj-ac) 45%, #fff); }
.lj-rod__seguro span { display:flex; flex-direction:column; font-size:12px; }
.lj-rod__seguro b { color:#fff; font-size:14px; }
/* Linha final BRANCA pra destacar a assinatura da plataforma. O logo da FlorBase entra em [data-logo-florbase] quando o arquivo oficial existir (hoje: o nome escrito). */
.lj-rod__fim { background:#fff; color:#5c665f; font-size:12px; }
.lj-rod__fim .lj-in { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-block:16px; }
.lj-rod__fim .lj-in { align-items:center; }
.lj .lj-fb { display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 14px; border-radius:999px; border:1px solid #e3e6df; color:#1a211c; transition:border-color .15s, box-shadow .15s, transform .15s; }
.lj .lj-fb:hover { color:#1a211c; border-color:#1e7a4c; box-shadow:0 6px 18px -10px rgb(30 122 76 / .5); transform:translateY(-1px); }
.lj-fb small { font-size:12px; color:#5c665f; }
.lj-fb__logo { display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:800; letter-spacing:-.03em; color:#1a211c; }
.lj-fb__sim { width:22px; height:auto; display:block; translate:0 -1px; }
.lj-fb__seta { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#1e7a4c; color:#fff; font-size:13px; transition:rotate .2s; }
.lj .lj-fb:hover .lj-fb__seta { rotate:45deg; }
/* Celular: a moldura é o contêiner, então a mesma página vira celular sem recarregar */
@media (max-width: 760px) {
  /* Celular: menu à esquerda, logo/nome SEMPRE centralizado, entrar e sacola à direita; busca na linha de baixo.
     Nome comprido encolhe e corta com "…" em vez de empurrar os ícones pra outra linha. */
  .lj-logo span { flex:none; width:30px; height:30px; font-size:14px; }
  .lj-logo--img img { height:44px; max-width:52vw; }
  .lj-logo { gap:8px; }
  .lj-cab__l1 .lj-ico { width:34px; height:34px; } .lj-cab__l1 .lj-ico svg { width:16px; height:16px; }
  .lj-cab__l1 .lj-ico b { min-width:15px; height:15px; font-size:9.5px; padding:0 4px; top:-3px; right:-3px; }
  .lj-cab__l1 { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,auto) minmax(80px,1fr); align-items:center; gap:10px 8px; padding-block:12px; min-height:0; }
  button.lj-burger { display:inline-grid; justify-self:start; }
  .lj-logo { justify-self:center; min-width:0; max-width:100%; font-size:18px; }
  .lj-logo { overflow:hidden; }
  .lj-logo > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lj-cab__acoes { margin-left:0; justify-self:end; gap:2px; grid-row:1; grid-column:3; }
  .lj-cab__l1 .lj-busca { grid-row:2; grid-column:1 / -1; max-width:none; margin:0; }
  .lj-zap { display:none; }
  .lj-entrar { padding:9px; }
  .lj-entrar span { display:none; }
  .lj-catnav { display:none; }
  .lj-faixa ul { display:grid; justify-items:center; padding:9px 12px; }
  .lj-faixa li { grid-area:1/1; padding:0; border:0 !important; opacity:0; animation:lj-aviso 12s infinite; text-align:center; }
  .lj-faixa li:nth-child(2) { animation-delay:4s; }
  .lj-faixa li:nth-child(3) { animation-delay:8s; }
  .lj-heroi .lj-in { grid-template-columns:1fr; }
  .bn-sl { height:auto; }
  .bn-in { grid-template-columns:1fr; gap:6px; padding-block:26px 30px; justify-items:center; text-align:center; }
  .bn-txt { align-items:center; padding-left:0; gap:10px; }
  .bn-sobre { font-size:10.5px; letter-spacing:.22em; }
  .bn-tit { font-size:44px; }
  .bn-cta { font-size:12px; padding:10px 22px; }
  .bn-prod { width:76%; margin-top:6px; }
  .bn-pedestal { bottom:-46px; }
  .bn-selo { left:auto; right:-14%; top:-2%; width:92px; }
  .bn-selo small { font-size:9.5px; } .bn-selo b { font-size:22px; }
  .bn-sl--cortina .bn-c2 { bottom:22%; -webkit-mask:none; mask:none; }
  .bn-sl--arco .bn-c2 { right:12%; left:12%; width:auto; top:44%; }
  .lj-heroi__foto { order:-1; }
  .lj-flut--prod { left:10px; right:10px; bottom:10px; }
  .lj-cats { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 8px 8px; margin-inline:-8px; scroll-padding-inline:8px; scrollbar-width:none; }
  .lj-cat { width:104px; flex:none; gap:8px; scroll-snap-align:start; }
  .lj-preco .lj-in { flex-direction:column; align-items:stretch; gap:12px; padding-block:18px; }
  .lj-preco h2 { font-size:20px; }
  .lj-preco__lista { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .lj-preco__lista a { padding:12px 8px; }
  .lj-cat span { font-size:13px; }
  .lj-grade { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .lj-card__txt { padding:10px 10px 12px; }
  .lj-card__acoes .lj-btn { font-size:12px; padding:9px 6px; gap:4px; }
  .lj-card__acoes .lj-wa { display:none; }
  /* CELULAR (dono 05/11): banner nunca escondido em trilho, 1 por linha e inteiro; a "dobra" (arrastar com o próximo aparecendo) é só de produto. */
  .lj-tri { display:grid; grid-template-columns:1fr; overflow:visible; }
  .lj-tri__b { flex:none; width:100%; }
  .lj-tri__b:nth-child(n+2) { display:none; }            /* os outros 2 quadrados descem pras faixas de baixo */
  .lj-bp__banner { display:none; }                       /* banner em pé lateral: só no computador */
  .lj-bp__mob { display:block; border-radius:16px; overflow:hidden; margin-bottom:12px; background:var(--lj-soft); }
  .lj-bp__mob img { position:relative; width:100%; height:auto; aspect-ratio:auto 1 / 1; max-height:var(--lj-arte-teto); object-fit:contain; display:block; }
  .lj-tri__b img { max-height:var(--lj-arte-teto); }
  .lj-bp { display:block; }
  .lj-bp > .lj-card { display:none; }
  .lj-bp__prods { display:flex; }
  /* Toda faixa de produto vira trilho com dobra: ~2 cards e o 3º aparecendo. */
  .lj-grade, .lj-grade--5, .lj-bp__prods { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:10px; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
  .lj-grade[hidden] { display:none; }
  .lj-grade > .lj-card, .lj-grade--5 > .lj-card, .lj-bp__prods > .lj-card { flex:0 0 72%; scroll-snap-align:start; }
  /* Trilho corta o que sai da borda: sem o "pulinho" do hover no celular e com folga em cima/embaixo. */
  .lj-grade, .lj-grade--5, .lj-bp__prods { padding-block:4px 8px; align-items:stretch; }
  .lj-card:hover { transform:none; box-shadow:none; }
  /* Preço sempre em 2 linhas (de/por): com ou sem desconto, todos os cards ficam com a mesma altura. */
  .lj-card__preco { display:flex; align-items:baseline; gap:6px; font-size:14px; white-space:nowrap; }
  .lj-card__preco s { font-size:11px; }
  .lj-grade--5 .lj-card h3 { font-size:15px; }
  /* Banners largos: no celular entra a arte em pé (800×1000), inteira. */
  .so-pc { display:none !important; }
  .so-cel { display:block !important; }
  /* 13/11: a caixa segue a foto também aqui. Com arte de celular cadastrada, o lugar reservado até carregar é o 4:5 dela. */
  .lj-bn .bn-sl--img[data-cel] img, .lj-duo__b[data-cel] img { aspect-ratio:auto 4 / 5; }
  .lj-duo .lj-in { padding-inline:16px; }
  .lj-duo__b { border-radius:16px; }
  .lj-fotos { overflow-x:auto; overscroll-behavior-x:contain; }
  .lj-pontos { display:flex; gap:4px; position:absolute; left:50%; translate:-50% 0; bottom:8px; padding:4px 6px; border-radius:99px; background:rgb(0 0 0 / .28); pointer-events:none; }
  .lj-pontos i { width:6px; height:6px; border-radius:50%; background:rgb(255 255 255 / .55); transition:width .2s, background .2s; }
  .lj-pontos i.on { width:14px; border-radius:3px; background:#fff; }
  .lj-card__selos { left:8px; top:8px; gap:4px; }
  .lj-selo { font-size:10.5px; padding:4px 8px 4px 6px; gap:3px; }
  .lj-selo svg { width:11px; height:11px; }
  .lj-grade--5 { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:10px; }


  /* Banner girassóis no celular: mais alto, título em cima, produto e oferta lado a lado. */
  /* Banner girassóis no celular: mais alto, texto em cima, a parte cheia do buquê embaixo. */
  .bn2 { aspect-ratio:4 / 3.4; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .bn2__txt { padding:6vw 0 0 7vw; gap:2vw; }
  .bn2__txt small { font-size:4.6vw; } .bn2__txt b { font-size:12vw; -webkit-text-stroke:1.1vw #fff; }
  .bn2__cta { font-size:3.4vw; padding:2.2vw 4.6vw; gap:1.2vw; } .bn2__cta svg { width:3.4vw; height:3.4vw; }
  .bn2__bola--a { width:46vw; left:-14vw; top:-16vw; } .bn2__bola--b { width:40vw; right:-12vw; bottom:-16vw; }
  .bn2__petala { width:2vw; }
  .bn2__foto img { left:50%; translate:-50% 0; top:-14%; height:150%; }
  .lj-card__parc { font-size:12px; }
  .lj-mv .lj-sec__cab { display:grid; grid-template-columns:1fr auto; }
  .lj-abas { grid-column:1 / -1; grid-row:2; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-4px; padding-inline:4px; }
  .lj-abas button { flex:none; font-size:13px; padding:7px 14px; }
  .lj-wa { width:38px; height:38px; }
  /* Trustbar no celular: 4 cartões iguais 2×2, ícone e texto alinhados à esquerda, títulos de 1 linha. */
  .lj-dif { background:transparent; border:0; }
  .lj-dif ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 0 4px; }
  .lj-dif li, .lj-dif li + li, .lj-dif li:nth-child(even), .lj-dif li:nth-child(n+3) { border:0; }
  .lj-dif li { flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; gap:8px; padding:12px 12px 14px; border-radius:14px; background:var(--lj-sup); box-shadow:0 0 0 1px var(--lj-li); }
  .lj-dif li span { width:34px; height:34px; } .lj-dif li span svg { width:18px; height:18px; }
  .lj-dif strong { font-size:13px; line-height:1.25; } .lj-dif small { font-size:11.5px; line-height:1.3; margin-top:2px; }
  .lj-destaque { grid-template-columns:1fr; }
  .lj-destaque img { min-height:240px; }
  .lj-aval { grid-template-columns:1fr; }
  .lj-faq .lj-in { grid-template-columns:1fr; gap:16px; } .lj-faq__lado { position:static; }
  .lj-faq__lista summary { padding:16px; font-size:15px; } .lj-faq__lista details p { padding:0 16px 16px; }
  .lj-av { grid-template-columns:1fr; }
  .lj-av-setas { display:none; }
  .lj-av__resumo { padding:18px; }
  .lj-av__acoes { grid-template-columns:1fr 1fr; }
  .lj-av__card { flex-basis:84%; }
  .lj-insta { grid-template-columns:repeat(5,62%); overflow-x:auto; scroll-snap-type:x mandatory; }
  .lj-ig { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:10px; }
  .lj-ig__story { flex:0 0 44%; scroll-snap-align:start; }
  .lj-ig__perfil { gap:12px; } .lj-ig__ava { width:62px; height:62px; } .lj-ig__quem { min-width:0; } .lj-ig__quem ul { gap:12px; font-size:13px; }
  .lj .lj-ig__seguir { width:100%; justify-content:center; }
  .lj-insta img { scroll-snap-align:start; }
  .lj-loja { grid-template-columns:1fr; }
  .lj-loja2 { display:block; min-height:0; }
  .lj-loja2__mapa { position:relative; height:220px; overflow:hidden; }
  .lj-loja2__mapa img { transform:scale(1.7); transform-origin:64% 45%; }
  .lj-loja2__pino { left:50%; }
  .lj-loja2__card { margin:-40px 12px 12px; width:auto; padding:18px; }
  .lj-rod__grade { grid-template-columns:1fr 1fr; gap:26px 18px; padding-block:32px 24px; }
  .lj-rod__marca, .lj-rod__contato { grid-column:1/-1; }
  .lj .lj-rod__logo { justify-self:start; justify-content:flex-start; margin:0; }
  .lj-rod__form { width:100%; } .lj-rod__news h2 { font-size:18px; } .lj-rod__fim .lj-in { flex-direction:column; }
}
@keyframes lj-aviso { 0%, 30% { opacity:1; } 33.3%, 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .lj-faixa li { animation:none !important; } .lj-faixa li:first-child { opacity:1; } }
.lj-loja2__aberto.fechado { color:var(--lj-mu); background:var(--lj-li); }
.lj-loja2__aberto.fechado i { background:#c2410c; box-shadow:0 0 0 3px rgb(194 65 12 / .18); }
@media (max-width: 760px) {
  .lj-rod ul:has(> li > a) { gap:0; }
  .lj-rod ul:has(> li > a) a { display:inline-block; padding-block:9px; }
  .lj-sec__cab a, .lj-loja2__copiar { position:relative; }
  .lj-sec__cab a::after, .lj-loja2__copiar::after { content:""; position:absolute; inset:-10px -6px; }
}
/* Preenchimento automático do navegador (e-mail, nome…): sem o fundo azul, mantém a cor do campo. */
.lj input:-webkit-autofill, .lj input:-webkit-autofill:hover, .lj input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px var(--lj-campo, var(--lj-sup)) inset !important; -webkit-text-fill-color:var(--lj-tx); caret-color:var(--lj-tx); transition:background-color 9999s ease-out 0s; }
.lj-sim-b { width:62%; height:auto; display:block; translate:0 -4%; }
.lj-rod__copy { display:flex; flex-direction:column; gap:4px; }
.lj-rod__copy small { font-size:11px; line-height:1.45; color:#7a837d; max-width:70ch; }
/* TESTE celular: 1º selo no lugar da avaliação (acima do preço), fora da foto. Linha vazia reserva a altura (cards alinhados). */
.lj-card__selo-txt { display:none; }
@media (max-width: 760px) {
  .lj-card__nota { display:none; }
  .lj-card__selo-txt { display:flex; min-height:22px; align-items:center; margin-top:-2px; }
  .lj-card__selos > .lj-selo:first-child { display:none; }
  .lj-card__selo-txt .lj-selo { font-size:11px; padding:4px 9px 4px 7px; gap:4px; }
  .lj-card__selo-txt .lj-selo svg { width:12px; height:12px; }
  .lj-card__selo-txt .lj-selo--retirada { box-shadow:inset 0 0 0 1px var(--lj-li); }
}

/* ===== Ajustes do porte pro site (não existem no artefato) ===== */
/* Busca: o campo é a busca DE VERDADE da loja (SfSearch); veste a pílula do artefato e passa a paleta pras sugestões. */
.lj-cab .lj-busca { display:block; padding:0; border:0; background:none; color:inherit;
  --surface:var(--lj-sup); --line:var(--lj-li); --line-soft:var(--lj-li); --ink:var(--lj-tx); --ink-soft:var(--lj-tx); --ink-mute:var(--lj-mu); --primary:var(--lj-ac); --primary-soft:var(--lj-soft); }
.lj-cab .lj-busca .sf-search { max-width:none; width:100%; }
.lj-cab .lj-busca .sf-search input { height:42px; border:1px solid var(--lj-li); background:var(--lj-sup); color:var(--lj-tx); font-family:inherit; font-size:14px; padding-left:42px; }
.lj-cab .lj-busca .sf-search input::placeholder { color:var(--lj-mu); }
/* Páginas da plataforma dentro do tema (perguntas, políticas, sobre, contato, blog, página de erro): os títulos vinham
   em Playfair (o --font-serif do topo da página). Este arquivo só carrega nas lojas do tema padrão, então aqui a serifada
   vira a fonte do tema, e título sem estilo próprio ganha o peso dos títulos do tema (varredura 08/11). */
main { --font-serif: var(--font-jakarta), system-ui, sans-serif; }
main h1.font-serif, main h2.font-serif, main .font-serif h2, main [class*="font-serif"] h2 { font-weight:800; letter-spacing:-.03em; }
/* Campo de e-mail da newsletter (rodapé): o placeholder padrão do navegador dava 3,23 (varredura 08/11). */
.lj-rod input::placeholder, .lj-rod__news input::placeholder { color:var(--lj-mu); opacity:1; }
.lj-cab .lj-busca .sf-search input:focus { border-color:var(--lj-ac); box-shadow:0 0 0 3px var(--lj-soft); }
.lj-cab .lj-busca .sf-search > svg { color:var(--lj-mu); width:18px; height:18px; left:16px; }
/* Mapa do Google embutido (no artefato era uma foto do mapa). */
/* O embed do Google tem um quadro próprio (endereço + "Abrir no Maps") no canto de cima à esquerda, que ficava ATRÁS do nosso cartão. O iframe sobe além da caixa (que corta com overflow:hidden) pra esse quadro sair de vista; o pino continua no meio. */
.lj-loja2__mapa { overflow:hidden; }
.lj-loja2__mapa iframe { position:absolute; top:-150px; left:0; width:100%; height:calc(100% + 150px); border:0; display:block; }
@media (max-width: 720px) { .lj-loja2__mapa iframe { top:-120px; height:calc(100% + 120px); } }
/* Loja com menos de 8 categorias: círculos do mesmo tamanho, alinhados à ESQUERDA com o título da seção (dono 07/11:
   centralizado deixava a 1ª bolinha no meio do título "Escolha por categoria"). */
@media (min-width: 761px) {
  .lj-cats--poucas { display:flex; justify-content:flex-start; }
  .lj-cats--poucas .lj-cat { flex:0 0 calc((100% - 7 * clamp(12px,2vw,24px)) / 8); }
}
/* Painel de categoria sem foto: a lista não precisa da altura da foto. */
.lj-sub__lista--sem-foto { min-height:0; }
/* Gaveta do celular: no artefato era presa à moldura; aqui é a tela inteira. */
.ljg { left:0; right:0; }
.ljg a.ljg-linha { text-decoration:none; }
.lj-rod__contato a { color:inherit; }
/* Banner de cena com nome de categoria comprido ("Buquês de Rosas"): letra menor pra caber em 2 linhas. */
.bn-tit--longo { font-size:clamp(34px,4.4vw,62px); }
.bn-tit--longo b { display:block; }
@media (max-width: 760px) { .bn-tit--longo { font-size:34px; } }
/* No site a gaveta mora dentro do .lj (no artefato ficava fora): ".lj p { margin:0 }" zerava o respiro do rótulo. */
.ljg .ljg-rotulo { margin:20px 4px 8px; }

/* Aviso de cookies (07/11, dono: "espaçamento no rodapé gigante"): o home.css empurra o fim da página a altura do aviso
   pra ele não cobrir botão no celular. No computador o aviso é um cartão de 340px no canto e não cobre nada; o empurrão
   virava uma faixa vazia de ~200px abaixo do rodapé. Só vale no celular. */
@media (min-width: 641px) {
  :root[data-cookie-aberto] body { padding-bottom: 0; }
}

/* Largura dos banners no computador. 07/11 (dono, "os banners ocupam o espaço inteiro"): eles iam até a borda da tela
   (1920) e foram presos em 1280. 08/11 (dono, print da Emily Flores: "o banner passa… a trustbar tem mais espaço nas
   laterais"): os 1280 ainda passavam 40 px do conteúdo de cada lado. Agora o banner do topo e os banners largos ficam na
   MESMA largura do conteúdo (a área de 1200 do `.lj-in`, com o mesmo recuo das laterais), e a trustbar vai de ponta a
   ponta dessa área: 1º item encostado à esquerda, último à direita, os do meio centralizados (as linhas entre eles
   continuam nas divisas das colunas). Celular (≤ 760) segue de ponta a ponta, como era. */
@media (min-width: 761px) {
  .lj-bn, .lj-duo .lj-in { box-sizing: border-box; max-width: 1200px; width: calc(100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
  .lj-dif li:first-child { justify-content: flex-start; padding-left: 0; }
  .lj-dif li:last-child { justify-content: flex-end; padding-right: 0; }
}

/* 08/11 (dono): selo do PROVEDOR de pagamento ligado na loja (Pagar.me, Stripe), embaixo das bandeiras. Texto com a cor
   da marca de cada um (sem logo redesenhado: a Pagar.me não tem SVG oficial no Simple Icons). */
.lj-rod__prov { margin-top:12px; }
.lj-rod__prov small { display:block; font-size:12px; color:#7a837d; margin-bottom:6px; }
.lj-chip-pag--prov { font-weight:800; font-size:13px; letter-spacing:-.01em; }
.lj-chip-pag--pagarme { color:#65a300; }
.lj-chip-pag--stripe { color:#635bff; }

/* BOTÕES DE COMPRA NO CARD (botoes-do-card.tsx; chave da loja `product_display.botoesDeCompra`, 10/11). Aparece na home,
   na listagem e nos "Você também vai amar" da página do produto. A base é do artefato e mora acima: `.lj-card__acoes`
   (linha com gap 8), `.lj .lj-btn--p` (pílula na cor da loja), `.lj-btn--click` (raio de 15px) e `.lj-wa` (bolinha verde).
   Aqui só o que faltava; prefixo `lj-cb` e seletores começando em `.lj` (vencem as regras de base por especificidade). */
.lj .lj-cb { margin-top: 2px; container-type: inline-size; }
.lj .lj-cb > span[role='link'] { cursor: pointer; user-select: none; }
.lj .lj-cb > span[role='link']:focus-visible { outline: 2px solid var(--lj-ac); outline-offset: 2px; }
/* 1 clique: rótulo longo no computador, "Comprar" no celular (o componente traz os dois, `cc1-l`/`cc1-s`). */
.lj .lj-cb__1c .cc1-s { display: none; }
.lj .lj-cb__1c .cc1-l { overflow: hidden; text-overflow: ellipsis; }
/* WhatsApp: logo oficial em branco (o símbolo do sprite pinta com `currentColor`). */
.lj .lj-cb__wa { color: #fff; }
.lj .lj-cb__wa svg { width: 20px; height: 20px; }
.lj .lj-cb__wa:hover { background: #1fb457; }
/* Só o WhatsApp (1 clique desligado): a bolinha fica à direita, como no artefato. */
.lj .lj-cb--so-wa { justify-content: flex-end; }
@media (max-width: 760px) {
  /* O artefato escondia a bolinha no celular; aqui ela fica (pedido da loja: os 2 botões como na Cristel). */
  .lj .lj-card__acoes.lj-cb .lj-wa { display: grid; width: 36px; height: 36px; }
  .lj .lj-cb__wa svg { width: 18px; height: 18px; }
  .lj .lj-cb { gap: 6px; }
}
/* Rótulo pela LARGURA DA LINHA dos botões (não da tela): card largo (1 por linha no celular, computador) mostra
   "Comprar com 1 clique"; card estreito (2 por linha) mostra "Comprar". */
@container (max-width: 209px) {
  .lj .lj-cb__1c .cc1-l { display: none; }
  .lj .lj-cb__1c .cc1-s { display: inline; }
}
/* 10/11 (dono, print "novo padrão"): pílula "Comprar com 1 clique" + bolinha verde EMBAIXO do preço. A versão de 2
   bolinhas ao lado do preço (estilo Cristel, `lj-cbr`) saiu. */
.lj .lj-card__acoes.lj-cb .lj-btn--click { border-radius: 999px; }
.lj .lj-card__acoes.lj-cb .lj-wa { background: #17a04d; }
/* 11/11 ESTRUTURA D (dono, laboratório do card da Emily): botão "Comprar com 1 clique" de ponta a ponta + WhatsApp como
   LINK discreto embaixo (logo oficial verde). Medidas do laboratório: botão 42px, link 13px peso 600 sublinhado. */
.lj .lj-card__acoes.lj-cb--d { flex-direction: column; align-items: stretch; gap: 9px; }
/* `box-sizing: border-box`: o tema é content-box (`[class*="lj"]`), e `width:100%` + padding estourava a linha (283 em 257px). */
.lj .lj-card__acoes.lj-cb--d .lj-btn--click { flex: none; box-sizing: border-box; width: 100%; min-height: 42px; justify-content: center; font-size: 14px; }
.lj .lj-cb--d .lj-cb__walink {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--lj-mu); background: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lj-li);
}
.lj .lj-cb--d .lj-cb__walink:hover { color: var(--lj-tx); }
.lj .lj-cb--d .lj-cb__walink svg { width: 15px; height: 15px; flex: none; color: #17a04d; }
.lj .lj-cb--d .lj-cb__walink-s { display: none; }
@container (max-width: 209px) {
  .lj .lj-card__acoes.lj-cb--d .lj-btn--click { min-height: 38px; font-size: 13px; padding: 0 10px; }
  .lj .lj-cb--d .lj-cb__walink { font-size: 12.5px; }
  .lj .lj-cb--d .lj-cb__walink-l { display: none; }
  .lj .lj-cb--d .lj-cb__walink-s { display: inline; }
}
/* Parcelas embaixo do preço ("3× de R$ 78,33"), como no card da Cristel. */
.lj .lj-card__parc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--lj-mu, #6b6b6b); white-space: nowrap; }
/* 11/11 (dono, print da Emily: "esse produto ficou quebrado"): preço + botões PRESOS no rodapé do card. O `margin-top:auto`
   do `.lj-card__preco` parou de valer quando o preço entrou no invólucro `.lj-card__base`; sem isso, card sem a linha da
   parcela subia os botões e sobrava um vão embaixo. A linha da parcela também fica guardada (botoes-do-card.tsx). */
.lj .lj-card__base { margin-top: auto; }
/* Linha das estrelas guardada (invisível) só serve pra alinhar com um vizinho que TEM nota: numa fileira em que nenhum
   card tem avaliação (loja nova), ela some e o vão embaixo do nome vai junto. */
.lj :has(> .lj-card):not(:has(> .lj-card .lj-card__nota:not([aria-hidden]))) > .lj-card .lj-card__nota[aria-hidden] { display: none; }

/* ===== 13/11 (dono): BANNER SEGUE A FOTO =====
   Teto de altura de todo banner em imagem: no computador 600 px ou 70% da altura da tela (o que for menor); no celular,
   no máximo 1,35 × a largura (cabe a arte em pé 4:5 e a 3:4, que antes perdia as bordas). `.lj-arte` = toda caixa de banner em imagem; `data-sobra` + `--lj-arte-fundo` são postos pelo
   `home-interativa.tsx` SÓ quando a foto não preenche a caixa (não baixa nada a mais: usa a foto que já carregou). */
.lj-home { --lj-arte-teto:min(600px, 70vh); }
@media (max-width: 760px) { .lj-home { --lj-arte-teto:135vw; } }
.lj-arte { position:relative; isolation:isolate; overflow:hidden; }
.lj-arte[data-sobra]::before { content:""; position:absolute; inset:-28px; z-index:-1; background:var(--lj-arte-fundo) center / cover no-repeat; filter:blur(22px); }