/* JuLeon — prévia "sites incríveis". Tokens da marca e componentes comuns. */
:root {
  --branco: #ffffff;
  --superficie: #f7f5f3;
  --tinta: #3b3635;
  --cinza: #5e5756;
  --tinta-suave: #8f8784;
  --linha: #e6e1dd;
  --noite: #2b2726;
  --noite-alta: #3d3736;
  --papel: #f4ede2;
  --dourado: #f0b512;
  --dourado-escuro: #d9a10a;
  --verde: #2e7d4f;
  --vermelho: #c0392b;
  --fonte-titulo: "Morganite", "Arial Narrow", sans-serif;
  --fonte-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(59, 54, 53, .06), 0 6px 18px rgba(59, 54, 53, .06);
  --sombra-cartao: 0 1px 2px rgba(59, 54, 53, .05), 0 8px 22px rgba(59, 54, 53, .07);
  --doca-altura: 150px;
  --margem: clamp(16px, 3vw, 56px);
  --colunas: 2;
  --vao: 12px;
}
@media (min-width: 700px) { :root { --colunas: 3; --vao: 16px; } }
@media (min-width: 1000px) { :root { --colunas: 4; --vao: 16px; } }
@media (min-width: 1200px) { :root { --colunas: 5; } }
@media (min-width: 1600px) { :root { --colunas: 6; } }
@media (min-width: 1800px) { :root { --colunas: 7; } }
@media (min-width: 2200px) { :root { --colunas: 8; } }
@media (min-width: 2600px) { :root { --colunas: 9; } }
@media (min-width: 3000px) { :root { --colunas: 10; } }
@media (min-width: 3600px) { :root { --colunas: 12; } }
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html:has(.com-doca) { scroll-padding-bottom: calc(var(--doca-altura) + 16px); scroll-padding-top: 150px; }
body { font-family: var(--fonte-texto); color: var(--tinta); background: var(--branco); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; line-height: 1.45; font-size: 15px; }
h1, h2, h3, .titulo { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta); margin: 0; line-height: .9; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
a { color: inherit; }
img { display: block; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
::selection { background: var(--dourado); color: var(--tinta); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px var(--margem) 12px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo img { width: 32px; height: auto; view-transition-name: leao; }
.logo b { font-family: var(--fonte-titulo); font-size: 38px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); line-height: 1; margin-top: 2px; }
.ola { font-size: 11px; color: var(--tinta-suave); margin-left: auto; text-align: right; line-height: 1.25; }
.ola b { display: block; color: var(--cinza); font-weight: 600; font-size: 12.5px; }
.voltar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--cinza); margin-left: -8px; }
.carrinho-icone { position: relative; width: 44px; height: 44px; border: 0; background: none; color: var(--cinza); display: grid; place-items: center; text-decoration: none; }
.carrinho-icone .cont { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dourado); color: var(--tinta); font-size: 11px; font-weight: 700; display: grid; place-items: center; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.carrinho-icone .cont.pulo { transform: scale(1.35); }

/* Busca: pílula, lupa dourada, anel dourado no foco */
.busca { flex: 1 0 100%; order: 10; }
.busca label { display: flex; align-items: center; gap: 12px; height: 48px; border: 1px solid var(--linha); border-radius: 999px; padding: 0 8px 0 20px; background: var(--branco); color: var(--cinza); box-shadow: 0 1px 2px rgba(59, 54, 53, .04); transition: border-color .15s, box-shadow .15s; }
.busca label:focus-within { border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(240, 181, 18, .22), 0 4px 14px rgba(59, 54, 53, .08); }
.busca svg { color: var(--dourado-escuro); flex: 0 0 auto; }
.busca input { flex: 1; border: 0; background: none; font-size: 15px; color: var(--tinta); min-width: 0; }
.busca input::placeholder { color: var(--tinta-suave); }
.busca input:focus { outline: none; }
.busca .atalho { flex: 0 0 auto; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--branco); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 699px) { .busca .atalho { display: none; } .busca label { padding-right: 18px; } }
@media (min-width: 1000px) {
  .topo-linha { padding: 12px var(--margem); flex-wrap: nowrap; }
  .logo img { width: 38px; }
  .logo b { font-size: 44px; }
  .busca { order: 0; flex: 1 1 320px; max-width: 560px; margin: 0 auto; }
}

@media (min-width: 1280px) {
  .topo-linha { position: relative; }
  .catalogo-pagina .busca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(40vw, 640px); max-width: none; margin: 0; }
}

/* ---------- Botões ---------- */
.botao-ouro { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--dourado); color: var(--tinta); font-weight: 700; font-size: 15px; letter-spacing: .02em; box-shadow: 0 2px 0 var(--dourado-escuro); text-decoration: none; transition: transform .2s, background .2s; }
.botao-ouro:hover { background: var(--dourado-escuro); }
.botao-ouro:active { transform: translateY(1px); }
.botao-ouro[aria-disabled="true"] { background: var(--linha); color: var(--tinta-suave); box-shadow: none; pointer-events: none; }
.secundario { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: 1.5px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--cinza); font-weight: 600; font-size: 14px; text-decoration: none; }

/* ---------- Cartão de produto (grade uniforme) ---------- */
/* largura da coluna arredondada para pixel inteiro: fileiras e grade ficam idênticas até na fração */
.grade { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); grid-template-columns: repeat(var(--colunas), round(down, calc((100% - (var(--colunas) - 1) * var(--vao)) / var(--colunas)), 1px)); grid-auto-rows: 1fr; gap: var(--vao); }
.cartao { background: var(--branco); border: 0; box-shadow: var(--sombra-cartao); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; position: relative; min-width: 0; transition: box-shadow .25s, transform .25s; }
@media (hover: hover) { .cartao:hover { box-shadow: 0 2px 4px rgba(59, 54, 53, .06), 0 14px 32px rgba(59, 54, 53, .12); transform: translateY(-2px); } }
.codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--tinta); background: var(--dourado); padding: 6px 14px 5px; border-radius: 0 0 9px 9px; line-height: 1; white-space: nowrap; box-shadow: 0 2px 4px rgba(59, 54, 53, .15); }
.codigo::before { content: "CÓD "; }
@media (max-width: 699px) { .selo + .foto .codigo, .selo + .vfoto .codigo { left: 64%; } }
.cartao .foto { aspect-ratio: 1 / 1; width: 100%; background: var(--branco); display: grid; place-items: center; padding: 6px; text-decoration: none; }
.cartao .foto img { width: 100%; height: 100%; object-fit: contain; }
.selo { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1; background: linear-gradient(180deg, #f6c43a, var(--dourado)); color: var(--tinta); box-shadow: 0 2px 6px rgba(59, 54, 53, .18), inset 0 1px 0 rgba(255, 255, 255, .45); }
.selo::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.8 5.6 4.9 9.7 10.5 10.5-5.6.8-9.7 4.9-10.5 10.5C11.2 16.9 7.1 12.8 1.5 12 7.1 11.2 11.2 7.1 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.8 5.6 4.9 9.7 10.5 10.5-5.6.8-9.7 4.9-10.5 10.5C11.2 16.9 7.1 12.8 1.5 12 7.1 11.2 11.2 7.1 12 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.selo.promo { background: linear-gradient(180deg, #4a4342, var(--noite)); color: var(--dourado); box-shadow: 0 2px 6px rgba(59, 54, 53, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
.selo.promo::before { width: 7px; height: 7px; border-radius: 50%; -webkit-mask: none; mask: none; background: var(--dourado); box-shadow: 0 0 0 2px rgba(240, 181, 18, .25); }
.cartao .corpo { padding: 10px 12px 12px; display: grid; grid-template-rows: auto auto 46px 44px; row-gap: 4px; }
.cartao .nome { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--tinta); line-height: 1.35; height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.cartao .meta, .meta { font-size: 11px; height: 1.3em; color: var(--tinta-suave); display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.meta b { font-weight: 600; color: var(--cinza); }
.cartao .meta span, .vitrine-item .meta span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; color: var(--cinza); }
.cartao .preco { display: flex; flex-direction: column; justify-content: flex-end; font-size: 17px; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; line-height: 1.1; }
.cartao .preco small { font-size: 10.5px; font-weight: 500; color: var(--tinta-suave); margin-left: 2px; }
.cartao .preco .de { font-size: 11px; font-weight: 500; color: var(--tinta-suave); text-decoration: line-through; margin-bottom: 2px; }
.cartao .preco .por { color: var(--dourado-escuro); }
.cartao .preco .cond { font-size: 10.5px; font-weight: 500; color: var(--tinta-suave); margin: 2px 0 0; }
.adicionar { height: 44px; border: 0; border-radius: 10px; background: var(--dourado); color: var(--tinta); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s; }
.adicionar:hover { background: var(--dourado-escuro); }
.contador { height: 44px; border-radius: 10px; border: 1.5px solid var(--dourado); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: #fff8e3; }
.contador button { height: 100%; border: 0; background: none; font-size: 22px; font-weight: 500; color: var(--tinta); }
.contador .qtd { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; cursor: text; }
.contador input { width: 100%; min-width: 0; border: 0; border-radius: 6px; background: none; padding: 0; margin: 0; text-align: center; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.1; color: var(--tinta); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.contador input:focus { outline: 2px solid var(--dourado-escuro); outline-offset: 2px; background: var(--branco); }
.contador .qtd small { font-size: 9.5px; font-weight: 500; color: var(--tinta-suave); line-height: 1; margin-top: 1px; }
.contador .qtd small:empty { display: none; }
.contador button, .adicionar { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.contador button:active { background: rgba(240, 181, 18, .25); }
.contador output { text-align: center; font-weight: 700; font-size: 15px; color: var(--tinta); line-height: 1.05; }
.contador output small { display: block; font-size: 9.5px; font-weight: 500; color: var(--tinta-suave); line-height: 1; margin-top: 2px; }

@media (min-width: 1000px) { .cartao .corpo { padding: 12px 14px 14px; grid-template-rows: auto auto 48px 44px; } .cartao .nome { font-size: 12.5px; } .cartao .preco { font-size: 19px; } }

/* ---------- Doca: prateleira (movimento-assinatura) + totais ---------- */
.doca { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linha); box-shadow: 0 -10px 30px rgba(59, 54, 53, .08); padding: 0 var(--margem) calc(10px + env(safe-area-inset-bottom)); }
.doca .interno { width: 100%; }
.prateleira { position: relative; height: 58px; display: flex; align-items: flex-end; }
.prateleira .tabua { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--cinza); border-radius: 1px; transform-origin: center; }
.prateleira .tabua::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 6px; background: linear-gradient(rgba(59, 54, 53, .12), transparent); }
.prateleira .itens { list-style: none; margin: 0 0 8px; padding: 0; display: flex; align-items: flex-end; gap: 6px; min-height: 44px; }
.prateleira .itens li { position: relative; width: 44px; height: 44px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); box-shadow: 0 2px 6px rgba(59, 54, 53, .12); overflow: visible; }
.prateleira .itens li img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.prateleira .itens li b { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dourado); color: var(--tinta); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.prateleira .itens li.escondido { visibility: hidden; }
.prateleira .vazia { position: absolute; left: 0; bottom: 14px; font-size: 11.5px; color: var(--tinta-suave); }
.prateleira.cheia .rotulo-p { display: none; }
.prateleira .rotulo-p { position: absolute; right: 0; bottom: 14px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.tabua.peso { animation: peso .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes peso { 30% { transform: scaleY(2.2) translateY(2px); } 100% { transform: none; } }
.doca-linha { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.doca .total { flex: 1; line-height: 1.15; }
.doca .total small { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.doca .total b { font-size: 20px; color: var(--tinta); }
.doca .botao-ouro { width: auto; padding: 0 22px; height: 48px; }
.minimo { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--cinza); margin: 6px 0 4px; white-space: nowrap; }
.minimo b { color: var(--tinta); }
.minimo .meta-min { color: var(--tinta-suave); }
.progresso { height: 5px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.progresso i { display: block; height: 100%; width: 0; background: var(--dourado); border-radius: 3px; transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.voando { position: fixed; z-index: 60; pointer-events: none; object-fit: contain; background: var(--branco); border-radius: 8px; border: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(59, 54, 53, .22); }
.com-doca { padding-bottom: var(--doca-altura); }

/* ---------- Movimento reduzido: nada voa, tudo visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabua.peso { animation: none; }
  .cartao, .carrinho-icone .cont, .progresso i { transition: none; }
}