/* Vitrine da loja — mobile first. Cores da loja vêm de --cor e --destaque (definidas na página). */
:root {
  --cor: #7c3aed; --cor-texto: #6d28d9; --sobre-cor: #fff; --destaque: #f59e0b; --sobre-destaque: #14110f;
  --fundo: #f7f4f0; --cartao: #ffffff; --tinta: #1d1916; --suave: #6b625a; --linha: #e9e2da;
  --raio: 18px; --sombra: 0 1px 2px rgba(29,25,22,.06), 0 6px 20px rgba(29,25,22,.06);
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titulo: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 3px solid var(--cor); outline-offset: 2px; }

.faixa-demo { background: #1d1916; color: #fff; font-size: 13px; text-align: center; padding: 7px 16px; letter-spacing: .01em; }

/* Topo */
.topo { position: relative; padding: 28px 16px 20px; max-width: 1100px; margin: 0 auto; }
.topo-fundo { position: absolute; inset: 0 0 auto 0; height: 132px; background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--destaque) 55%, transparent) 0%, transparent 60%),
  linear-gradient(135deg, var(--cor), color-mix(in srgb, var(--cor) 70%, #000)); border-radius: 0 0 28px 28px; }
@media (min-width: 1100px) { .topo-fundo { border-radius: 0 0 32px 32px; } }
.marca { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 52px; }
.logo { width: 84px; height: 84px; border-radius: 24px; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: var(--sombra); flex: none; }
.logo-letra { display: grid; place-items: center; font: 800 38px/1 var(--titulo); color: var(--cor-texto); }
.marca h1 { margin: 0 0 2px; font: 800 clamp(24px, 6.4vw, 34px)/1.1 var(--titulo); letter-spacing: -.02em; }
.frase { margin: 0; color: var(--suave); font-size: 15px; }
.dados { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--suave); }
.dados li { display: flex; gap: 8px; align-items: flex-start; }
.dados svg { margin-top: 2px; color: var(--cor-texto); }
@media (min-width: 720px) { .dados { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; } }

/* Categorias */
.chips { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linha); }
.chips-in { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; max-width: 1100px; margin: 0 auto; scrollbar-width: none; }
.chips-in::-webkit-scrollbar { display: none; }
.chips a { flex: none; text-decoration: none; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.chips a.ativo { background: var(--cor); color: var(--sobre-cor); border-color: var(--cor); }

main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 120px; }
.categoria { margin-top: 22px; }
.categoria h2 { font: 800 21px/1.2 var(--titulo); letter-spacing: -.01em; margin: 0 0 12px; }
.grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.produto { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: #efe9e2; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
@media (hover: hover) { .produto:hover .foto img { transform: scale(1.04); } }
.sem-foto { display: grid; place-items: center; width: 100%; height: 100%; font: 800 42px var(--titulo); color: color-mix(in srgb, var(--cor) 45%, #fff); background: color-mix(in srgb, var(--cor) 8%, #fff); }
.selo { position: absolute; left: 8px; top: 8px; background: #1d1916; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.esgotado .foto img { filter: grayscale(.85); opacity: .7; }
.info { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.info h3 { margin: 0; font-size: 15px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.desc { margin: 4px 0 0; font-size: 13px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.linha { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 52px; }
.preco { font-weight: 800; font-size: 16px; white-space: nowrap; }
.indisp { font-size: 12px; color: var(--suave); font-weight: 600; }
.qtd { display: inline-flex; align-items: center; background: var(--cor); color: var(--sobre-cor); border-radius: 999px; }
.qtd button { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 22px; font-weight: 700; line-height: 1; border-radius: 999px; display: grid; place-items: center; }
.qtd .n { min-width: 18px; text-align: center; font-weight: 800; font-size: 15px; }
.qtd button:active { background: rgba(0,0,0,.12); }

.vazio-msg { text-align: center; color: var(--suave); padding: 40px 0; }
.rodape { max-width: 1100px; margin: 0 auto; padding: 0 16px 120px; color: var(--suave); font-size: 13px; text-align: center; }
.rodape .feito { font-size: 12px; }

/* Barra do carrinho */
.barra-carrinho { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 10; pointer-events: none; }
.barra-carrinho button { pointer-events: auto; width: 100%; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 16px; background: var(--cor); color: var(--sobre-cor); padding: 14px 18px; font-weight: 700; font-size: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: sobe .25s ease-out; }
.barra-carrinho strong { margin-left: auto; }
.bolha { background: var(--sobre-cor); color: var(--cor-texto); min-width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; padding: 0 6px; }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } }

/* Folhas (dialog) */
.folha { border: 0; padding: 0; width: 100%; max-width: 560px; max-height: 92vh; margin: auto auto 0; border-radius: 24px 24px 0 0; background: var(--cartao); color: var(--tinta); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.folha[open] { animation: sobe .22s ease-out; }
.folha::backdrop { background: rgba(20,16,14,.5); }
@media (min-width: 720px) { .folha { margin: auto; border-radius: 24px; } }
.folha-in { padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
.folha-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.folha-topo h2 { margin: 0; font: 800 21px var(--titulo); }
.fechar { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #f1ece6; font-size: 26px; line-height: 1; }
.itens { list-style: none; margin: 0; padding: 0; }
.itens li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.itens img, .itens .mini-vazia { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; background: #efe9e2; }
.itens .nome { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.itens .nome small { display: block; color: var(--suave); font-weight: 500; }
.itens .qtd { background: #f1ece6; color: var(--tinta); }
.total { display: flex; justify-content: space-between; font-size: 16px; margin: 14px 0 6px; }
.total strong { font-size: 20px; }
.campo { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; border: 0; padding: 0; }
.campo input, .campo textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; font-size: 16px; font-weight: 400; }
.campo input:focus, .campo textarea:focus { border-color: var(--cor); outline: none; }
.opcoes legend { padding: 0; margin-bottom: 6px; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes legend { width: 100%; }
.opcoes label { flex: 1; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 12px; font-weight: 600; min-height: 48px; }
.opcoes label:has(input:checked) { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 8%, #fff); }
.opcoes input { accent-color: var(--cor); width: 18px; height: 18px; }
.erro { color: #b42318; font-size: 14px; min-height: 1em; margin: 10px 0 0; }
.enviar { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; padding: 15px; background: #128c4a; color: #fff; font-weight: 800; font-size: 16px; min-height: 54px; }
.enviar svg { width: 22px; height: 22px; }
.enviar.secundario { background: var(--cor); color: var(--sobre-cor); }
.enviar.curto { width: auto; margin: 0; padding: 12px 20px; }
.vazio-carrinho { color: var(--suave); justify-content: center; }
.nota { text-align: center; color: var(--suave); font-size: 13px; margin: 10px 0 0; }
.demo-msg { white-space: pre-wrap; background: #e7f6ec; border-radius: 14px; padding: 14px; font: 14px/1.5 var(--fonte); color: #0f3d24; max-height: 50vh; overflow: auto; overflow-wrap: anywhere; }

.det-foto { margin: -18px -18px 14px; aspect-ratio: 4/3; background: #efe9e2; border-radius: 24px 24px 0 0; overflow: hidden; position: relative; }
.det-foto img { width: 100%; height: 100%; object-fit: cover; }
.det-foto .fechar { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); }
.det-cat { color: var(--cor-texto); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.det-nome { font: 800 23px/1.2 var(--titulo); margin: 4px 0 8px; overflow-wrap: anywhere; }
.det-desc { color: var(--suave); margin: 0 0 14px; white-space: pre-line; overflow-wrap: anywhere; }
.det-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.det-linha .preco { font-size: 22px; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #1d1916; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 20; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }

/* Página de aviso */
.vazio { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.aviso { text-align: center; max-width: 420px; }
.aviso h1 { font: 800 26px var(--titulo); }
.aviso p { color: var(--suave); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }