@cimplify/cli 0.6.1 → 0.6.3

package/templates/storefront-fashion/components/json-ld.tsx

@@ -0,0 +1,34 @@
+import { brand } from "@/lib/brand";
+import { getSiteUrl } from "@/lib/site-url";
+
+/**
+ * Streams the organization JSON-LD script tag in async so it doesn't block
+ * the rest of the layout shell. `getSiteUrl` reads request headers, and
+ * any await on dynamic data inside `RootLayout` makes Next 16 mark the
+ * whole route as blocking.
+ */
+export async function OrganizationJsonLd(): Promise<React.ReactElement> {
+  const siteUrl = await getSiteUrl();
+  const ld = {
+    "@context": "https://schema.org",
+    "@type": brand.schemaType,
+    name: brand.name,
+    url: siteUrl,
+    description: brand.description,
+    email: brand.contact.email,
+    telephone: brand.contact.phoneTel,
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: brand.contact.streetAddress,
+      addressLocality: brand.contact.city,
+      addressCountry: brand.contact.countryCode,
+    },
+    sameAs: brand.socials.map((s) => s.href),
+  };
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
+    />
+  );
+}

package/templates/storefront-fashion/components/mobile-nav.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Hamburger button + slide-in drawer for narrow viewports. Header hides
+ * its inline nav links below `sm` and renders this in their place; the
+ * cart pill stays in the header chrome.
+ */
+export function MobileNav() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="Open menu"
+        aria-expanded={open}
+        aria-controls="mobile-nav-drawer"
+        className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div className="fixed inset-0 z-50 sm:hidden">
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            aria-label="Close menu"
+            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          />
+          <nav
+            id="mobile-nav-drawer"
+            aria-label="Mobile navigation"
+            className="absolute inset-y-0 right-0 w-[85%] max-w-sm flex flex-col bg-background border-l border-border shadow-2xl"
+          >
+            <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                Menu
+              </span>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="Close menu"
+                className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+            <ul className="flex flex-col gap-1 px-3 py-4">
+              {brand.header.nav.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/templates/storefront-fashion/components/policy-page.tsx

@@ -13,7 +13,7 @@ interface PolicyShape {
  */
 export function PolicyPage({ policy }: { policy: PolicyShape }) {
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {policy.eyebrow}
       </p>

package/templates/storefront-fashion/components/section-heading.tsx

@@ -9,7 +9,7 @@ interface SectionHeadingProps {
 
 export function SectionHeading({ eyebrow, title, description, link }: SectionHeadingProps) {
   return (
-    <div className="flex items-end justify-between gap-6 mb-8">
+    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 sm:gap-6 mb-6 sm:mb-8">
       <div className="max-w-2xl">
         <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
           {eyebrow}
@@ -24,7 +24,7 @@ export function SectionHeading({ eyebrow, title, description, link }: SectionHea
       {link && (
         <Link
           href={link.href}
-          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap inline-flex items-center gap-1 self-start sm:self-auto"
         >
           {link.label}
           <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>

package/templates/storefront-fashion/package.json

@@ -19,7 +19,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.46.1",
+    "@cimplify/sdk": "^0.47.0",
     "next": "^16.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/templates/storefront-grocery/app/about/page.tsx

@@ -10,7 +10,7 @@ export default function AboutPage() {
   const a = brand.about;
   const titleParts = a.title.split("\n");
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
         {a.eyebrow}
       </p>

package/templates/storefront-grocery/app/categories/[slug]/page.tsx

@@ -71,7 +71,7 @@ async function CategoryContent({
 
   const { category, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">
         <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
           Category
@@ -102,7 +102,7 @@ async function CategoryContent({
 
 function CategorySkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">
         <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
         <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />

package/templates/storefront-grocery/app/collections/[slug]/page.tsx

@@ -71,7 +71,7 @@ async function CollectionContent({
 
   const { collection, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">
         <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
           Collection
@@ -102,7 +102,7 @@ async function CollectionContent({
 
 function CollectionSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">
         <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
         <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />

package/templates/storefront-grocery/app/error.tsx

@@ -24,7 +24,7 @@ export default function GlobalError({
   }, [error]);
 
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
         Something broke
       </p>

package/templates/storefront-grocery/app/faq/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function FaqPage() {
   const f = brand.faq;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
         {f.eyebrow}
       </p>

package/templates/storefront-grocery/app/layout.tsx

@@ -6,6 +6,7 @@ import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
 import { CartDrawer } from "@/components/cart-drawer";
+import { OrganizationJsonLd } from "@/components/json-ld";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 import { getSiteUrl } from "@/lib/site-url";
@@ -16,57 +17,34 @@ const inter = Inter({
   display: "swap",
 });
 
-
 export async function generateMetadata(): Promise<Metadata> {
   const siteUrl = await getSiteUrl();
   return {
     metadataBase: new URL(siteUrl),
     title: {
-    default: brand.name,
-    template: `%s — ${brand.name}`,
+      default: brand.name,
+      template: `%s — ${brand.name}`,
     },
     description: brand.description,
     openGraph: {
-    type: "website",
-    siteName: brand.name,
-    locale: brand.locale,
+      type: "website",
+      siteName: brand.name,
+      locale: brand.locale,
     },
     twitter: { card: "summary_large_image" },
   };
 }
 
-async function organizationLd() {
-  const siteUrl = await getSiteUrl();
-  return {
-    "@context": "https://schema.org",
-    "@type": brand.schemaType,
-    name: brand.name,
-    url: siteUrl,
-    description: brand.description,
-    email: brand.contact.email,
-    telephone: brand.contact.phoneTel,
-    address: {
-    "@type": "PostalAddress",
-    streetAddress: brand.contact.streetAddress,
-    addressLocality: brand.contact.city,
-    addressCountry: brand.contact.countryCode,
-    },
-    sameAs: brand.socials.map((s) => s.href),
-  };
-}
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const ld = await organizationLd();
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning className={inter.variable}>
       <body
         suppressHydrationWarning
         className="min-h-screen flex flex-col bg-background text-foreground font-sans"
       >
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
-        />
+        <Suspense fallback={null}>
+          <OrganizationJsonLd />
+        </Suspense>
         <Providers>
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>

package/templates/storefront-grocery/app/not-found.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
         404
       </p>

package/templates/storefront-grocery/app/orders/[id]/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <h1 className="font-serif text-3xl mt-0 mb-3">Thanks — your order is confirmed</h1>
       <p className="text-muted-foreground">
         Order <code className="font-mono text-foreground">{id}</code>

package/templates/storefront-grocery/app/page.tsx

@@ -72,7 +72,7 @@ export default async function HomePage() {
 
 function StripSkeleton({ title }: { title: string }) {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">{title}</h2>
       <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
         {Array.from({ length: 5 }).map((_, i) => (
@@ -85,7 +85,7 @@ function StripSkeleton({ title }: { title: string }) {
 
 function CategoryGridSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-14">
       <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {Array.from({ length: 6 }).map((_, i) => (

package/templates/storefront-grocery/app/privacy/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function PrivacyPage() {
   const p = brand.privacy;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {p.eyebrow}
       </p>

package/templates/storefront-grocery/app/terms/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function TermsPage() {
   const t = brand.terms;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {t.eyebrow}
       </p>

package/templates/storefront-grocery/components/cart-pill.tsx

@@ -17,7 +17,7 @@ export function CartPill() {
       type="button"
       onClick={open}
       aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
+      className="inline-flex items-center gap-1.5 px-4 py-2.5 sm:py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
     </button>
@@ -28,7 +28,7 @@ export function CartPillSkeleton() {
   return (
     <span
       aria-hidden
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
+      className="inline-flex items-center gap-1.5 px-4 py-2.5 sm:py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
     >
       Cart · …
     </span>

package/templates/storefront-grocery/components/category-grid.tsx

@@ -11,7 +11,7 @@ import type { Category } from "@cimplify/sdk";
 export function CategoryGrid({ categories }: { categories?: Category[] }) {
   const router = useRouter();
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-14">
       <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
       <SdkCategoryGrid
         categories={categories}

package/templates/storefront-grocery/components/collection-strip.tsx

@@ -16,7 +16,7 @@ interface CollectionStripProps {
 export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
   if (products.length === 0) return null;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
         <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
         {collectionHref && (

package/templates/storefront-grocery/components/footer.tsx

@@ -51,7 +51,7 @@ export async function Footer() {
   "use cache";
   const year = new Date().getFullYear();
   return (
-    <footer className="mt-12 px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">
+    <footer className="mt-12 px-6 sm:px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">
       <div className="max-w-7xl mx-auto">
         <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
           <div>

package/templates/storefront-grocery/components/header.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Suspense } from "react";
 import { NavLink } from "./nav-link";
 import { CartPill, CartPillSkeleton } from "./cart-pill";
+import { MobileNav } from "./mobile-nav";
 import { brand } from "@/lib/brand";
 
 /**
@@ -11,25 +12,30 @@ import { brand } from "@/lib/brand";
  */
 export function Header() {
   return (
-    <header className="sticky top-0 z-30 flex items-center justify-between px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
+    <header className="sticky top-0 z-30 flex items-center justify-between px-6 sm:px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
       <Link href="/" className="flex items-baseline gap-2">
         <span className="font-serif text-[22px] font-semibold -tracking-[0.02em]">
           {brand.shortName}
         </span>
-        <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+        <span className="hidden sm:inline text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
           {brand.microTag}
         </span>
       </Link>
-      <nav className="flex items-center gap-6">
-        {brand.header.nav.map((link) => (
-          <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
-            <NavLink href={link.href}>{link.label}</NavLink>
-          </Suspense>
-        ))}
+      <div className="flex items-center gap-3 sm:gap-6">
+        <nav className="hidden sm:flex items-center gap-6">
+          {brand.header.nav.map((link) => (
+            <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
+              <NavLink href={link.href}>{link.label}</NavLink>
+            </Suspense>
+          ))}
+        </nav>
         <Suspense fallback={<CartPillSkeleton />}>
           <CartPill />
         </Suspense>
-      </nav>
+        <div className="sm:hidden">
+          <MobileNav />
+        </div>
+      </div>
     </header>
   );
 }

package/templates/storefront-grocery/components/hero.tsx

@@ -6,7 +6,7 @@ interface HeroProps {
 
 export function Hero({ badge, title, subtitle }: HeroProps) {
   return (
-    <section className="px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
+    <section className="px-6 sm:px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
       {badge && (
         <span className="inline-block mb-4 px-3.5 py-1.5 rounded-full bg-card border border-accent text-accent-foreground text-[11px] font-semibold uppercase tracking-[0.12em]">
           {badge}

package/templates/storefront-grocery/components/json-ld.tsx

@@ -0,0 +1,34 @@
+import { brand } from "@/lib/brand";
+import { getSiteUrl } from "@/lib/site-url";
+
+/**
+ * Streams the organization JSON-LD script tag in async so it doesn't block
+ * the rest of the layout shell. `getSiteUrl` reads request headers, and
+ * any await on dynamic data inside `RootLayout` makes Next 16 mark the
+ * whole route as blocking.
+ */
+export async function OrganizationJsonLd(): Promise<React.ReactElement> {
+  const siteUrl = await getSiteUrl();
+  const ld = {
+    "@context": "https://schema.org",
+    "@type": brand.schemaType,
+    name: brand.name,
+    url: siteUrl,
+    description: brand.description,
+    email: brand.contact.email,
+    telephone: brand.contact.phoneTel,
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: brand.contact.streetAddress,
+      addressLocality: brand.contact.city,
+      addressCountry: brand.contact.countryCode,
+    },
+    sameAs: brand.socials.map((s) => s.href),
+  };
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
+    />
+  );
+}

package/templates/storefront-grocery/components/mobile-nav.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Hamburger button + slide-in drawer for narrow viewports. Header hides
+ * its inline nav links below `sm` and renders this in their place; the
+ * cart pill stays in the header chrome.
+ */
+export function MobileNav() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="Open menu"
+        aria-expanded={open}
+        aria-controls="mobile-nav-drawer"
+        className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div className="fixed inset-0 z-50 sm:hidden">
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            aria-label="Close menu"
+            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          />
+          <nav
+            id="mobile-nav-drawer"
+            aria-label="Mobile navigation"
+            className="absolute inset-y-0 right-0 w-[85%] max-w-sm flex flex-col bg-background border-l border-border shadow-2xl"
+          >
+            <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                Menu
+              </span>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="Close menu"
+                className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+            <ul className="flex flex-col gap-1 px-3 py-4">
+              {brand.header.nav.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/templates/storefront-grocery/components/policy-page.tsx

@@ -13,7 +13,7 @@ interface PolicyShape {
  */
 export function PolicyPage({ policy }: { policy: PolicyShape }) {
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {policy.eyebrow}
       </p>