@unbox-plus/cli 0.20.4

package/template/app/(loja)/conta/pedidos/page.tsx

@@ -0,0 +1,104 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Image from "next/image";
+import { redirect } from "next/navigation";
+import { CaretRight, ArrowsClockwise, MapPin, Package } from "@phosphor-icons/react/dist/ssr";
+import { getCustomerClient } from "@/lib/customer-session";
+import { shapeOrderSummary, type ShapedOrderSummary } from "@/lib/orders";
+import { AccountShell } from "@/components/account/account-shell";
+import { EmptyState } from "@/components/empty-state";
+import { StatusBadge, statusTone } from "@/components/order-status";
+
+export const metadata: Metadata = { title: "Meus pedidos", robots: { index: false } };
+
+export default async function PedidosPage() {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+
+  const orders = await me.orders({ first: 30 }).catch(() => ({ nodes: [], totalCount: 0 }));
+  const list: ShapedOrderSummary[] = (orders.nodes ?? []).map((n: any) => shapeOrderSummary(n));
+
+  return (
+    <AccountShell title="Meus pedidos">
+      {list.length === 0 ? (
+        <EmptyState
+          title="Você ainda não tem pedidos"
+          description="Quando você fizer uma compra, ela aparece aqui com status, itens e rastreio."
+        >
+          <Link href="/produtos" className="font-display inline-flex h-11 items-center rounded-xl bg-[var(--store-primary,#18181B)] px-5 text-[14px] font-bold text-white no-underline transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">
+            Ver produtos
+          </Link>
+        </EmptyState>
+      ) : (
+        <div className="flex flex-col gap-3.5">
+          {list.map((o) => (
+            <Link
+              key={o.referenceId}
+              href={`/conta/pedidos/${o.referenceId}`}
+              className="group flex flex-col gap-3.5 rounded-lg border border-[var(--store-line)] bg-white p-4 no-underline transition-all hover:border-[var(--store-primary,#18181B)] hover:shadow-[0_8px_22px_rgba(24,24,27,.08)]"
+            >
+              {/* topo: ref + data + status */}
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="font-display text-[15.5px] font-extrabold text-[var(--store-ink)]">#{o.referenceId}</p>
+                  <p className="mt-0.5 flex items-center gap-1.5 text-[12.5px] text-[var(--store-muted)]">
+                    {o.createdAt ? new Date(o.createdAt).toLocaleDateString("pt-BR") : ""}
+                    {o.recurring && (
+                      <span className="inline-flex items-center gap-1 font-semibold text-[var(--store-primary,#18181B)]">
+                        <ArrowsClockwise weight="bold" className="text-[12px]" />assinatura
+                      </span>
+                    )}
+                  </p>
+                </div>
+                <div className="flex shrink-0 items-center gap-2">
+                  {o.delivered ? (
+                    <StatusBadge label="Entregue" tone="ok" />
+                  ) : o.dispatched ? (
+                    <StatusBadge label="Despachado" tone="warn" />
+                  ) : (
+                    <StatusBadge label={o.statusLabel} tone={statusTone(o.status)} />
+                  )}
+                  <CaretRight weight="bold" className="text-[var(--store-faint)] transition-transform group-hover:translate-x-0.5 group-hover:text-[var(--store-primary,#18181B)]" />
+                </div>
+              </div>
+
+              {/* produtos: miniaturas + resumo + total */}
+              <div className="flex items-center gap-3 border-t border-[var(--store-surface-2)] pt-3.5">
+                <div className="flex shrink-0 -space-x-2">
+                  {o.thumbnails.length > 0 ? (
+                    o.thumbnails.map((src, i) => (
+                      <span key={i} className="relative h-11 w-11 overflow-hidden rounded-md border border-[var(--store-line)] bg-[var(--store-surface)]">
+                        <Image src={src} alt="" fill sizes="44px" className="object-contain p-1" />
+                      </span>
+                    ))
+                  ) : (
+                    <span className="flex h-11 w-11 items-center justify-center rounded-md border border-[var(--store-line)] bg-[var(--store-surface)]"><Package className="text-[var(--store-faint)]" /></span>
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[13px] font-semibold text-[var(--store-ink-2)]">
+                    {o.firstTitles.join(" · ") || `${o.itemCount} item(ns)`}
+                  </p>
+                  <p className="text-[12px] text-[var(--store-muted)]">{o.itemCount} item(ns)</p>
+                </div>
+                {o.total && <span className="font-display shrink-0 text-[15px] font-extrabold text-[var(--store-primary,#18181B)]">{o.total}</span>}
+              </div>
+
+              {/* endereço de entrega */}
+              {o.address && (o.address.line || o.address.cityRegion) && (
+                <div className="flex items-start gap-2 rounded-md bg-[var(--store-surface)] px-3 py-2.5 text-[12.5px] text-[var(--store-ink-2)]">
+                  <MapPin weight="fill" className="mt-px shrink-0 text-[14px] text-[var(--store-primary,#18181B)]" />
+                  <span className="min-w-0">
+                    {o.address.fullName && <b className="text-[var(--store-ink)]">{o.address.fullName}</b>}
+                    {o.address.fullName && (o.address.line || o.address.cityRegion) ? " · " : ""}
+                    {[o.address.line, o.address.cityRegion].filter(Boolean).join(" · ")}
+                  </span>
+                </div>
+              )}
+            </Link>
+          ))}
+        </div>
+      )}
+    </AccountShell>
+  );
+}

package/template/app/(loja)/conta/preferencias/page.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getCustomerClient } from "@/lib/customer-session";
+import { AccountShell } from "@/components/account/account-shell";
+import { PreferencesForm } from "@/components/account/preferences-form";
+
+export const metadata: Metadata = { title: "Preferências", robots: { index: false } };
+
+export default async function PreferenciasPage() {
+  const me = await getCustomerClient();
+  if (!me) redirect("/conta/entrar");
+  const account = await me.me().catch(() => null);
+
+  return (
+    <AccountShell title="Preferências">
+      <PreferencesForm
+        initial={{
+          receiveNewOrderEmail: account?.metafields?.receiveNewOrderEmail ?? true,
+          reuseDataBetweenShops: account?.reuseDataBetweenShops ?? false,
+        }}
+      />
+    </AccountShell>
+  );
+}

package/template/app/(loja)/devolucoes/page.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = { title: "Trocas e devoluções", alternates: { canonical: "/devolucoes" } };
+
+export default function DevolucoesPage() {
+  return (
+    <article className="mx-auto max-w-2xl">
+      <h1 className="text-2xl font-bold">Trocas e devoluções</h1>
+
+      <h2 className="mt-6 text-lg font-semibold">Direito de arrependimento (CDC, art. 49)</h2>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Você pode desistir da compra em até <strong>7 dias corridos</strong> a partir do recebimento do
+        produto. Nesse caso, devolvemos o valor pago, incluindo o frete.
+      </p>
+
+      <h2 className="mt-6 text-lg font-semibold">Como solicitar</h2>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Entre na sua conta, localize o pedido em <Link href="/conta/pedidos" className="text-primary underline">Meus pedidos</Link> e
+        solicite o cancelamento/devolução, ou fale com nosso atendimento informando o código do pedido.
+        O reembolso é processado pelo mesmo meio de pagamento (Pix ou cartão).
+      </p>
+
+      <p className="mt-3 text-xs text-muted-foreground">
+        Observação: o cancelamento/reembolso total é tratado pela equipe da loja. Itens individuais de um
+        pedido podem ser cancelados conforme disponibilidade.
+      </p>
+
+      <div className="mt-6 flex gap-2">
+        <Button nativeButton={false} render={<Link href="/conta/pedidos" />}>Meus pedidos</Button>
+        <Button variant="outline" nativeButton={false} render={<Link href="/conta/entrar" />}>Acompanhar pedido</Button>
+      </div>
+    </article>
+  );
+}

package/template/app/(loja)/layout.tsx

@@ -0,0 +1,22 @@
+// Layout do GRUPO DE ROTAS da loja: header, barra de anúncio e rodapé vivem
+// AQUI, não no layout raiz. Assim qualquer página fora da loja (tela de acesso, erro,
+// landing avulsa) nasce limpa, sem chrome vazando por trás — basta criá-la fora de (loja).
+// O grupo não muda as URLs: app/(loja)/produtos/page.tsx continua sendo /produtos.
+import { CartProvider } from "@/components/cart/cart-provider";
+import { SiteHeader } from "@/components/site-header";
+import { SiteFooter } from "@/components/site-footer";
+
+export default function StoreLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <CartProvider>
+      {/* Coluna flex de altura mínima igual à tela: em página curta (confirmação, conta vazia) o
+          rodapé encosta no fim da viewport em vez de flutuar com fundo branco embaixo. */}
+      <div className="flex min-h-[100svh] flex-col">
+        <SiteHeader />
+        {/* .site-main / chrome: ocultos/expandidos em /checkout via CSS :has(.checkout-root) */}
+        <main className="site-main mx-auto w-full max-w-[1240px] flex-1 px-4 py-6 sm:px-6">{children}</main>
+        <SiteFooter />
+      </div>
+    </CartProvider>
+  );
+}

package/template/app/(loja)/oferta/page.tsx

@@ -0,0 +1,57 @@
+// Landing de OFERTA — mesma seção purchase-hero usada na home (componente do registry),
+// com a pilha de convencimento por receita (components/landing/landing-recipe.ts) abaixo.
+// A página existe como deep-link de campanha; nas receitas dos presets o hero de compra
+// pode entrar DIRETO na home (âncora #comprar), que é o padrão das lojas de produção.
+import type { Metadata } from "next";
+import { getCatalog, getTopTags } from "@/lib/queries";
+import { buildTagMap, buildCategories, mapCatalogItems } from "@/lib/catalog-map";
+import { FREE_SHIPPING_THRESHOLD } from "@/lib/store-config";
+import { resolveCombos } from "@/lib/enrichment/combos";
+import type { HomeData } from "@/components/home/sections/registry";
+// EDITOR: a pilha da landing dentro do container PRÓPRIO dela ("oferta", declarado em
+// lib/rotas-editaveis.ts). Renderizada solta, nada nela é editável e o gate reprova a página.
+import { OfertaSections } from "@/components/landing/oferta-sections";
+import { mockupOr } from "@/lib/mockup";
+
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: "Oferta especial",
+  description: "Leve mais, aproveite mais. Monte seu pedido com condições especiais.",
+  alternates: { canonical: "/oferta" },
+};
+
+const isCombo = (s: string) => /kit|combo/i.test(s);
+
+export default async function OfertaPage() {
+  const [catalog, tags] = await Promise.all([
+    mockupOr(getCatalog({ first: 100 }), { nodes: [] as any[] }, "oferta/getCatalog"),
+    mockupOr(getTopTags(), [], "oferta/getTopTags"),
+  ]);
+  const tagMap = buildTagMap(tags as any[]);
+  const items = mapCatalogItems(catalog.nodes ?? [], tagMap);
+
+  let combos = items.filter((it) => it.categories.some(isCombo));
+  if (combos.length < 2) {
+    const deals = items.filter((it) => it.oldPrice != null);
+    combos = deals.length >= 2 ? deals : items.slice(0, 8);
+  }
+  combos = combos.slice(0, 10);
+
+  const data: HomeData = {
+    combos,
+    featured: combos[0] ?? items[0] ?? null,
+    bundles: resolveCombos((catalog.nodes ?? []).map((n: any) => n.product ?? n)),
+    categories: buildCategories(tags as any[]),
+    combosTitle: "Destaques",
+    freeShipLabel: FREE_SHIPPING_THRESHOLD != null ? `R$${FREE_SHIPPING_THRESHOLD}` : null,
+  };
+
+  return (
+    <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+      <h1 className="sr-only">Oferta especial</h1>
+      <OfertaSections data={data} />
+      <div className="pb-14" />
+    </div>
+  );
+}

package/template/app/(loja)/page.tsx

@@ -0,0 +1,86 @@
+import type { Metadata } from "next";
+import { getCatalog, getTopTags } from "@/lib/queries";
+import { buildTagMap, buildCategories, mapCatalogItems } from "@/lib/catalog-map";
+import { FREE_SHIPPING_THRESHOLD } from "@/lib/store-config";
+import { resolveCombos } from "@/lib/enrichment/combos";
+import { CombosHome } from "@/components/home/combos-home";
+import { mockupOr } from "@/lib/mockup";
+import { DataLayerReady } from "@/components/analytics/data-layer-ready";
+import { ldJson } from "@/lib/json-ld";
+// EDITOR: o documento publicado (só a ESCOLHA das vitrines) e quem a transforma em produtos
+import { getPublishedContent } from "@/lib/editable/server";
+import { resolverVitrinesDoDocumento } from "@/lib/vitrine";
+
+// Canonical por página: o layout raiz não declara (seria herdado por todas as rotas).
+export const metadata: Metadata = { alternates: { canonical: "/" } };
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
+// Mesmo literal do app/layout.tsx: o create-unbox-store reescreve "Minha Loja" com o nome real.
+const SITE_NAME = "Minha Loja";
+
+export const revalidate = 300; // ISR — catálogo público e estável
+
+const isCombo = (s: string) => /kit|combo/i.test(s);
+
+export default async function HomePage() {
+  const [catalog, tags] = await Promise.all([
+    mockupOr(getCatalog({ first: 100 }), { nodes: [] as any[] }, "home/getCatalog"),
+    mockupOr(getTopTags(), [], "home/getTopTags"),
+  ]);
+  const tagMap = buildTagMap(tags as any[]);
+  const items = mapCatalogItems(catalog.nodes ?? [], tagMap);
+
+  // Combos reais: categoria "Kits & Combos" → senão produtos em oferta (compareAtPrice) → senão destaques.
+  let combos = items.filter((it) => it.categories.some(isCombo));
+  let title = "Nossos Combos em Destaque";
+  if (combos.length < 2) {
+    const deals = items.filter((it) => it.oldPrice != null);
+    if (deals.length >= 2) { combos = deals; title = "Ofertas em destaque"; }
+    else { combos = items.slice(0, 8); title = "Destaques"; }
+  }
+  combos = combos.slice(0, 10);
+  const featured = combos[0] ?? items[0] ?? null;
+
+  // Kits temáticos (combos de linha, edição de data…) montados a partir do products.json.
+  const bundles = resolveCombos((catalog.nodes ?? []).map((n: any) => n.product ?? n));
+
+  // ── AS VITRINES DA HOME (editor de loja) ─────────────────────────────────
+  // O documento publicado guarda só a ESCOLHA do lojista ("quais produtos esta vitrine mostra");
+  // quem a transforma em produto com preço e estoque é a LOJA, aqui, com o cliente da Unbox de
+  // sempre. Quais caminhos existem sai do PRÓPRIO DOCUMENTO, não de constante escrita à mão: a
+  // vitrine também é uma seção ADICIONÁVEL, cujo id só nasce quando o lojista clica no "+"
+  // (`novo-vitrine-de-produtos-2`), e nenhuma constante do repositório o conheceria.
+  //
+  // Sem editor, sem escolha, ou com a Unbox fora: `{}`, e cada vitrine mostra os produtos do
+  // CÓDIGO. Ligar isto não muda um pixel enquanto ninguém escolher nada.
+  const doc = await getPublishedContent();
+  const vitrines = await resolverVitrinesDoDocumento(doc, "home");
+
+  // Organization + WebSite: dá à marca uma entidade citável (busca e resposta de IA) e liga a
+  // busca interna ao Google (SearchAction). Só fatos deriváveis: nome, URL, logo, busca.
+  const jsonLd = [
+    { "@context": "https://schema.org", "@type": "Organization", name: SITE_NAME, url: siteUrl, logo: `${siteUrl}/brand/logo.svg` },
+    {
+      "@context": "https://schema.org", "@type": "WebSite", name: SITE_NAME, url: siteUrl,
+      potentialAction: { "@type": "SearchAction", target: { "@type": "EntryPoint", urlTemplate: `${siteUrl}/busca?q={search_term_string}` }, "query-input": "required name=search_term_string" },
+    },
+  ];
+
+  return (
+    <>
+    {/* dataLayerReady: é o ÚNICO gatilho de tipo de página do container central (medido: ele não
+        tem gatilho de `page_view`). Sem isto, a home fica invisível pro remarketing do Ads. */}
+    <DataLayerReady pageType="home" products={combos.slice(0, 6).map((c) => ({ id: c.productId, name: c.title, price: c.price }))} />
+    <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(jsonLd) }} />
+    <CombosHome
+      combos={combos}
+      featured={featured}
+      bundles={bundles}
+      categories={buildCategories(tags as any[])}
+      combosTitle={title}
+      freeShipLabel={FREE_SHIPPING_THRESHOLD != null ? `R$${FREE_SHIPPING_THRESHOLD}` : null}
+      vitrines={vitrines}
+    />
+    </>
+  );
+}

package/template/app/(loja)/pedido/[referenceId]/page.tsx

@@ -0,0 +1,78 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
+import { getOwnedOrder } from "@/lib/orders";
+import { OrderStatusCard } from "@/components/order-status";
+import { EmptyState } from "@/components/empty-state";
+import { PurchaseTracker } from "@/components/analytics/purchase-tracker";
+import { DataLayerReady } from "@/components/analytics/data-layer-ready";
+import { parseBRL } from "@/lib/format";
+import { mockupOr } from "@/lib/mockup";
+
+export const metadata: Metadata = { title: "Pedido", robots: { index: false } };
+
+export default async function PedidoPage({ params }: { params: Promise<{ referenceId: string }> }) {
+  const { referenceId } = await params;
+  const order = await mockupOr(getOwnedOrder(referenceId), null, "pedido/getOwnedOrder");
+
+  if (!order) {
+    return (
+      <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+        <div className="mx-auto max-w-[560px] px-4 py-12 sm:px-6">
+          <EmptyState
+            title="Não foi possível exibir este pedido"
+            description="Entre na sua conta para ver este pedido."
+          >
+            <div className="flex flex-wrap justify-center gap-2.5">
+              <Link href="/conta/entrar" className="font-display inline-flex h-11 items-center rounded-xl bg-[var(--store-primary,#18181B)] px-5 text-[14px] font-bold text-white no-underline transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">Entrar</Link>
+            </div>
+          </EmptyState>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+      <div className="mx-auto max-w-[560px] px-4 py-12 sm:px-6">
+        <div className="mb-6 flex items-center gap-3.5">
+          <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]">
+            <CheckCircle weight="fill" className="text-[30px]" />
+          </span>
+          <div>
+            <h1 className="font-display text-[26px] font-extrabold leading-[1.1]">Pedido recebido</h1>
+            <p className="mt-0.5 text-[14px] text-[var(--store-muted)]">
+              {order.paid ? "Pagamento confirmado." : "Acompanhe o status do pagamento abaixo."}
+            </p>
+          </div>
+        </div>
+
+        <OrderStatusCard order={order} />
+
+        {/* purchase / Purchase — só quando pago (ex.: cartão aprovado); dedupe por referenceId */}
+        <DataLayerReady
+          pageType={order.paid ? "purchase" : "other"}
+          products={order.items.map((it) => ({ id: it.productId ?? it.variantId ?? it.title, name: it.title, price: it.price, quantity: it.quantity }))}
+        />
+        <PurchaseTracker
+          transactionId={order.referenceId}
+          paid={order.paid}
+          value={parseBRL(order.total) ?? undefined}
+          items={order.items.map((it) => ({
+            id: it.productId ?? it.variantId ?? it.title,
+            name: it.title,
+            variant: it.variantTitle,
+            price: it.price,
+            quantity: it.quantity,
+          }))}
+          user={{ email: order.email, firstName: order.address?.fullName?.split(" ")[0], lastName: order.address?.fullName?.split(" ").slice(1).join(" ") || undefined }}
+        />
+
+        <div className="mt-6 flex flex-wrap gap-2.5">
+          <Link href="/produtos" className="font-display inline-flex h-12 items-center rounded-xl bg-[var(--store-primary,#18181B)] px-5 text-[14px] font-bold text-white no-underline transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">Continuar comprando</Link>
+          <Link href="/conta/pedidos" className="inline-flex h-12 items-center rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-5 text-[14px] font-bold text-[var(--store-ink-2)] no-underline transition-colors hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)]">Meus pedidos</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/app/(loja)/privacidade/page.tsx

@@ -0,0 +1,113 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Política de Privacidade",
+  robots: { index: true, follow: true },
+  alternates: { canonical: "/privacidade" },
+};
+
+// TODO [JURÍDICO]: revisar e completar este texto antes do lançamento.
+// Este é um placeholder estruturado para LGPD (Lei 13.709/2018).
+// Substituir [NOME DA LOJA], [CNPJ], [ENDEREÇO], [EMAIL DPO] pelos dados reais.
+
+export default function PrivacidadePage() {
+  return (
+    <article className="richtext mx-auto max-w-2xl py-8 px-4">
+      <h1>Política de Privacidade</h1>
+      <p className="text-sm text-muted-foreground">Última atualização: preencher data</p>
+
+      <h2>1. Quem somos</h2>
+      <p>
+        <strong>[NOME DA LOJA]</strong>, inscrita no CNPJ sob o nº <strong>[CNPJ]</strong>,
+        com sede em <strong>[ENDEREÇO COMPLETO]</strong>, é a controladora dos dados pessoais
+        tratados neste site, nos termos da Lei Geral de Proteção de Dados (LGPD, Lei 13.709/2018).
+      </p>
+
+      <h2>2. Dados coletados</h2>
+      <p>Coletamos os seguintes dados para operar a loja:</p>
+      <ul>
+        <li><strong>Cadastro e compra:</strong> nome, e-mail, CPF, telefone, endereço de entrega</li>
+        <li><strong>Pagamento:</strong> os dados de cartão são processados diretamente pela UnboxPay, e não armazenamos número de cartão</li>
+        <li><strong>Navegação:</strong> endereço IP, cookies de sessão, preferências de carrinho</li>
+        <li><strong>Analytics:</strong> eventos de navegação e compra (via Google Analytics / Meta Pixel)</li>
+      </ul>
+
+      <h2>3. Finalidade do tratamento</h2>
+      <ul>
+        <li>Processar pedidos e pagamentos</li>
+        <li>Enviar confirmações de pedido e atualizações de entrega por e-mail</li>
+        <li>Gerir assinaturas recorrentes, se aplicável</li>
+        <li>Personalizar a experiência de navegação</li>
+        <li>Cumprir obrigações legais (nota fiscal, CDC)</li>
+        <li>Melhorar nossos produtos e serviços com base em dados agregados</li>
+      </ul>
+
+      <h2>4. Base legal</h2>
+      <p>
+        O tratamento é baseado em: (a) execução de contrato, para processar seus pedidos;
+        (b) obrigação legal, para emissão de nota fiscal e cumprimento do CDC;
+        (c) legítimo interesse, para analytics e segurança; (d) consentimento, para envio de
+        ofertas por e-mail (você pode revogar a qualquer momento).
+      </p>
+
+      <h2>5. Compartilhamento</h2>
+      <p>Seus dados podem ser compartilhados com:</p>
+      <ul>
+        <li><strong>Unbox:</strong> plataforma de e-commerce que opera o back-end da loja</li>
+        <li><strong>Transportadoras:</strong> nome e endereço de entrega para despacho do pedido</li>
+        <li><strong>Gateway de pagamento (UnboxPay):</strong> dados de cobrança</li>
+        <li><strong>Google e Meta:</strong> dados de analytics e conversão (pseudonimizados)</li>
+      </ul>
+      <p>Não vendemos seus dados a terceiros.</p>
+
+      <h2>6. Cookies</h2>
+      <p>
+        Utilizamos cookies essenciais (sessão, carrinho) e opcionais de analytics (GA4, Meta Pixel).
+        Você pode gerenciar suas preferências a qualquer momento pelo banner de cookies ou nas
+        configurações do seu navegador.
+      </p>
+
+      <h2>7. Seus direitos (LGPD, art. 18)</h2>
+      <p>Você tem direito a:</p>
+      <ul>
+        <li>Confirmar a existência de tratamento dos seus dados</li>
+        <li>Acessar, corrigir ou atualizar seus dados</li>
+        <li>Solicitar a anonimização, bloqueio ou eliminação de dados desnecessários</li>
+        <li>Solicitar portabilidade dos seus dados</li>
+        <li>Revogar o consentimento para comunicações de marketing</li>
+        <li>Opor-se ao tratamento baseado em legítimo interesse</li>
+      </ul>
+      <p>
+        Para exercer seus direitos, entre em contato com nosso Encarregado de Proteção de Dados (DPO)
+        pelo e-mail <strong>[EMAIL DPO]</strong>.
+      </p>
+
+      <h2>8. Retenção dos dados</h2>
+      <p>
+        Mantemos seus dados pelo tempo necessário para cumprir as finalidades descritas acima e
+        obrigações legais (ex: registros fiscais por 5 anos). Após esse prazo, os dados são
+        eliminados ou anonimizados.
+      </p>
+
+      <h2>9. Segurança</h2>
+      <p>
+        Utilizamos HTTPS em todas as comunicações. Senhas de conta não são armazenadas em texto
+        puro. Dados de pagamento trafegam diretamente pela UnboxPay, certificada PCI-DSS.
+      </p>
+
+      <h2>10. Alterações nesta política</h2>
+      <p>
+        Podemos atualizar esta política periodicamente. A data de “última atualização” no topo da
+        página indica quando ocorreu a revisão mais recente. Alterações relevantes serão
+        comunicadas por e-mail ou banner no site.
+      </p>
+
+      <h2>11. Contato e DPO</h2>
+      <p>
+        Dúvidas, solicitações ou reclamações: <strong>[EMAIL DPO]</strong><br />
+        Você também pode registrar queixas na Autoridade Nacional de Proteção de Dados (ANPD):
+        <a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer">www.gov.br/anpd</a>
+      </p>
+    </article>
+  );
+}

package/template/app/(loja)/produto/[productSlug]/layout.tsx

@@ -0,0 +1,23 @@
+// Mesma razão do layout de categoria: o loading.tsx deste segmento abre um <Suspense>,
+// o shell sai com 200, e o notFound() da página chega tarde demais para mudar o status.
+// Produto inexistente ou despublicado precisa de 404 de verdade — é a rota mais
+// indexada da loja, e soft-404 aqui enche o índice do Google de página vazia.
+// getProductBySlug é React cache(): sem requisição extra.
+import { notFound } from "next/navigation";
+import { getProductBySlug } from "@/lib/queries";
+import { mockupOr } from "@/lib/mockup";
+
+export default async function ProdutoLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ productSlug: string }>;
+}) {
+  const { productSlug } = await params;
+  // mockupOr: falha da API com credenciais RELANÇA (500 não cacheado) — nunca vira 404 cacheado.
+  const wrapper = await mockupOr(getProductBySlug(decodeURIComponent(productSlug)), null, `produto/${productSlug}`);
+  const p = wrapper?.product;
+  if (!p || p.isVisible === false) notFound();
+  return <>{children}</>;
+}

package/template/app/(loja)/produto/[productSlug]/loading.tsx

@@ -0,0 +1,20 @@
+// Fronteira de Suspense da PDP: aparece imediatamente ao clicar num produto,
+// enquanto o servidor busca os dados do catálogo.
+export default function Loading() {
+  return (
+    <div>
+      <div className="mb-4 h-5 w-56 animate-pulse rounded bg-muted" />
+      <div className="grid gap-8 lg:grid-cols-2">
+        <div className="aspect-square animate-pulse rounded-xl bg-muted" />
+        <div className="space-y-4">
+          <div className="h-5 w-24 animate-pulse rounded bg-muted" />
+          <div className="h-9 w-3/4 animate-pulse rounded bg-muted" />
+          <div className="h-5 w-1/2 animate-pulse rounded bg-muted" />
+          <div className="h-8 w-1/3 animate-pulse rounded bg-muted" />
+          <div className="h-11 w-full animate-pulse rounded-lg bg-muted" />
+          <div className="h-11 w-full animate-pulse rounded-lg bg-muted" />
+        </div>
+      </div>
+    </div>
+  );
+}