fix: Apple HIG mobile responsiveness - hero typography, tables, SEO metadata

Mobile:
- HeroSection: scale typography 7xl → 4xl sm:5xl md:6xl lg:7xl, responsive px/py
- StorefrontFooter: newsletter input responsive w-full sm:w-52, larger touch targets
- AdminTable: add overflow-x-auto + min-w-[600px] for horizontal scroll
- AdminOrdersPanel: same table overflow fix
- AdminFilterTabs: increase text sizes sm:text-xs, add padding
- Tuxedo page: SectionHeader mobile-first sizing, feature grid grid-cols-1 sm:2
- Tuxedo feature labels: show on all screens (remove hidden sm:block)

SEO:
- Root layout: add viewport export, full OG/Twitter metadata, metadataBase
- Tuxedo layout: complete OG + Twitter card + canonical + keywords + robots
- Indian River layout: same complete SEO treatment

All TypeScript checks pass.

src/app/indian-river-direct/layout.tsx

@@ -1,8 +1,44 @@
 import type { Metadata } from "next";
 
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
+
 export const metadata: Metadata = {
-  title: "Indian River Direct | Peach & Citrus Truckload",
+  title: {
+    default: "Indian River Direct | Peach & Citrus Truckload",
+    template: "%s | Indian River Direct",
+  },
   description: "Fresh peaches and citrus from our Florida groves to truckload sales in your neighborhood. Family-owned since 1985. Pre-order now for 2026 season.",
+  keywords: ["peaches", "citrus", "Florida produce", "truckload sales", "fresh fruit", "Indian River", "wholesale peaches"],
+  openGraph: {
+    title: "Indian River Direct | Fresh Peaches & Citrus",
+    description: "Fresh peaches and citrus from our Florida groves to truckload sales in your neighborhood. Family-owned since 1985.",
+    url: `${BASE_URL}/indian-river-direct`,
+    siteName: "Indian River Direct",
+    locale: "en_US",
+    type: "website",
+    images: [
+      {
+        url: "/og-indian-river.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Indian River Direct - Fresh Peaches & Citrus",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Indian River Direct | Peach & Citrus Truckload",
+    description: "Fresh peaches and citrus from our Florida groves. Family-owned since 1985. Pre-order for 2026 season.",
+    site: "@IndianRiverDirect",
+    images: ["/og-indian-river.jpg"],
+  },
+  alternates: {
+    canonical: `${BASE_URL}/indian-river-direct`,
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
 };
 
 export default function IndianRiverLayout({ children }: { children: React.ReactNode }) {

src/app/layout.tsx

@@ -1,10 +1,45 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { Providers } from "@/components/Providers";
 
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: "#0a0a0a",
+};
+
 export const metadata: Metadata = {
-  title: "Route Commerce",
+  title: {
-  description: "B2B produce wholesale platform",
+    default: "Route Commerce | Fresh Produce Wholesale Platform",
+    template: "%s | Route Commerce",
+  },
+  description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution. Brands sell to customers who pick up at scheduled stops or receive shipments.",
+  keywords: ["wholesale produce", "farm fresh", "B2B e-commerce", "produce distribution", "pickup stops", "fresh produce"],
+  metadataBase: new URL(BASE_URL),
+  openGraph: {
+    title: "Route Commerce | Fresh Produce Wholesale Platform",
+    description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution.",
+    url: BASE_URL,
+    siteName: "Route Commerce",
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Route Commerce | Fresh Produce Wholesale Platform",
+    description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution.",
+    site: "@RouteCommerce",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
 };
 
 export default function RootLayout({

src/app/tuxedo/layout.tsx

@@ -1,12 +1,43 @@
 import type { Metadata } from "next";
 
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
+
 export const metadata: Metadata = {
-  title: "Tuxedo Corn | Fresh Produce Wholesale",
+  title: {
+    default: "Tuxedo Corn | Fresh Produce Wholesale",
+    template: "%s | Tuxedo Corn",
+  },
   description: "Premium sweet corn and seasonal produce delivered fresh from the farm to pickup stops near you. Shop wholesale pricing on Tuxedo Corn.",
+  keywords: ["sweet corn", "Olathe Sweet", "Colorado produce", "wholesale corn", "farm fresh", "pickup stops", "wholesale produce"],
   openGraph: {
-    title: "Tuxedo Corn",
+    title: "Tuxedo Corn | Olathe Sweet Sweet Corn",
-    description: "Premium sweet corn and seasonal produce, delivered fresh from our farm to your community.",
+    description: "Premium sweet corn and seasonal produce, delivered fresh from our Colorado farm to pickup stops near you.",
-    siteName: "Route Commerce",
+    url: `${BASE_URL}/tuxedo`,
+    siteName: "Tuxedo Corn",
+    locale: "en_US",
+    type: "website",
+    images: [
+      {
+        url: "/og-tuxedo.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Tuxedo Corn - Olathe Sweet Sweet Corn",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Tuxedo Corn | Fresh Produce Wholesale",
+    description: "Premium sweet corn and seasonal produce delivered fresh from our Colorado farm to pickup stops near you.",
+    site: "@TuxedoCorn",
+    images: ["/og-tuxedo.jpg"],
+  },
+  alternates: {
+    canonical: `${BASE_URL}/tuxedo`,
+  },
+  robots: {
+    index: true,
+    follow: true,
   },
 };
 

src/app/tuxedo/page.tsx

@@ -266,7 +266,7 @@ function FeatureCard({ feature, index }: { feature: Feature; index: number }) {
       </div>
 
       {/* Label */}
-      <p className={`hidden sm:block text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-300 ${
+      <p className={`text-[9px] sm:text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-300 ${
         feature.color === "emerald"
           ? "text-emerald-600/60 group-hover:text-emerald-400/80"
           : "text-amber-600/60 group-hover:text-amber-400/80"
@@ -317,9 +317,9 @@ function WhyTuxedoCorn() {
             initial={{ opacity: 0, y: 16 }}
             animate={headerInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
             transition={{ duration: 0.7, delay: 0.1 }}
-            className="text-5xl md:text-6xl font-black tracking-tight text-white leading-[1.05] mb-6"
+            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-white leading-[1.05] mb-6"
           >
-            Why Choose<br />Tuxedo Corn
+            Why Choose<br className="hidden sm:block" />Tuxedo Corn
           </motion.h2>
           <motion.div
             initial={{ scaleX: 0 }}
@@ -339,7 +339,7 @@ function WhyTuxedoCorn() {
         </div>
 
         {/* Asymmetric masonry grid with staggered offsets */}
-        <div className="grid grid-cols-2 gap-5 lg:grid-cols-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
           {/* Row 1: tall, normal, tall, normal — with vertical offset stagger */}
           <div>
             <FeatureCard feature={FEATURES[0]} index={0} />
@@ -397,15 +397,15 @@ function SectionHeader({
   accent?: "emerald" | "stone";
 }) {
   return (
-    <div className="mb-14">
+    <div className="mb-10 sm:mb-14">
-      <p className={`text-[11px] font-semibold uppercase tracking-widest ${accent === "emerald" ? "text-emerald-600" : "text-stone-500"} mb-4`}>
+      <p className={`text-[10px] sm:text-[11px] font-semibold uppercase tracking-widest ${accent === "emerald" ? "text-emerald-600" : "text-stone-500"} mb-3 sm:mb-4`}>
         {eyebrow}
       </p>
-      <h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 leading-[1.05]">
+      <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-stone-950 leading-[1.05]">
         {headline}
       </h2>
-      <div className="mt-6 h-px w-12 bg-emerald-600" />
+      <div className="mt-5 sm:mt-6 h-px w-10 sm:w-12 bg-emerald-600" />
-      <p className="mt-6 max-w-2xl text-lg text-stone-500 leading-relaxed">
+      <p className="mt-5 sm:mt-6 max-w-2xl text-base sm:text-lg text-stone-500 leading-relaxed">
         {subtext}
       </p>
     </div>

src/components/admin/AdminOrdersPanel.tsx

@@ -306,8 +306,8 @@ export default function AdminOrdersPanel({
           <p className="text-xs text-stone-400 mt-1">Try adjusting your filters</p>
         </div>
       ) : (
-        <div className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-white">
+        <div className="overflow-x-auto rounded-xl border border-[var(--admin-border)] bg-white">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm min-w-[700px]">
             <thead className="bg-stone-50">
               <tr className="border-b border-[var(--admin-border)]">
                 <th className="text-left px-4 py-3 font-semibold text-[var(--admin-text-muted)] text-xs">Order</th>

src/components/admin/design-system/AdminFilterTabs.tsx

@@ -31,11 +31,11 @@ type AdminFilterTabsProps = {
 const sizeClasses = {
   sm: {
     container: "p-0.5 gap-0.5",
-    tab: "px-2.5 py-1.5 text-[10px]",
+    tab: "px-2.5 sm:px-3 py-2 sm:py-1.5 text-xs sm:text-[10px]",
   },
   md: {
     container: "p-1 gap-0.5",
-    tab: "px-3 py-1.5 text-xs",
+    tab: "px-3 sm:px-4 py-2.5 sm:py-1.5 text-sm sm:text-xs",
   },
 };
 

src/components/admin/design-system/AdminTable.tsx

@@ -27,12 +27,12 @@ export default function AdminTable<T extends Record<string, unknown>>({
   className = "",
 }: AdminTableProps<T>) {
   return (
-    <div className={`overflow-hidden rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
+    <div className={`overflow-x-auto rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
-      <table className="w-full text-left text-sm">
+      <table className="w-full text-left text-sm min-w-[600px]">
         <thead>
           <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
             {columns.map((col) => (
-              <th key={col.key} className={`px-5 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] ${col.className ?? ""}`}>
+              <th key={col.key} className={`px-3 sm:px-5 py-3 text-xs sm:text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] whitespace-nowrap ${col.className ?? ""}`}>
                 {col.header}
               </th>
             ))}

src/components/storefront/HeroSection.tsx

@@ -47,25 +47,25 @@ export default function HeroSection({
             : "linear-gradient(135deg, rgba(0,0,0,0.20) 0%, transparent 45%), linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.15) 55%, transparent 100%)"
         }} />
 
-        <div className="mx-auto w-full max-w-6xl px-6 relative z-10">
+        <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 relative z-10">
           {eyebrow && (
-            <p className={`text-xs font-bold uppercase tracking-[0.25em] mb-6 ${isBlue ? "text-blue-200" : "text-white/60"}`}>
+            <p className={`text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 ${isBlue ? "text-blue-200" : "text-white/60"}`}>
               {eyebrow}
             </p>
           )}
-          <h1 className="text-7xl md:text-8xl font-black tracking-tight text-white leading-[1.0] max-w-3xl">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-white leading-[1.05] max-w-3xl">
             {title}
           </h1>
-          <p className="mt-8 text-2xl text-white/70 leading-relaxed max-w-lg font-light">
+          <p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl text-white/70 leading-relaxed max-w-lg font-light">
             {description}
           </p>
 
           {(primaryButton || secondaryButton) && (
-            <div className="mt-12 flex flex-wrap gap-4">
+            <div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
               {primaryButton && (
                 <button
                   onClick={onPrimaryClick}
-                  className={`rounded-full ${btnBg} px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5`}
+                  className={`rounded-2xl ${btnBg} active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all`}
                 >
                   {primaryButton}
                 </button>
@@ -73,7 +73,7 @@ export default function HeroSection({
               {secondaryButton && (
                 <button
                   onClick={onSecondaryClick}
-                  className="rounded-full bg-white/10 backdrop-blur-sm border border-white/25 px-10 py-4 text-sm font-bold tracking-wider text-white hover:bg-white/20 hover:border-white/40 transition-all"
+                  className="rounded-2xl bg-white/10 backdrop-blur-sm border border-white/25 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white hover:bg-white/20 hover:border-white/40 active:scale-95 transition-all"
                 >
                   {secondaryButton}
                 </button>
@@ -100,25 +100,25 @@ export default function HeroSection({
           background: "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.6) 72%, rgba(0,0,0,0.88) 100%)"
         }} />
 
-        <div className="mx-auto w-full max-w-6xl px-6 relative z-10">
+        <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 relative z-10">
           {eyebrow && (
-            <p className="text-xs font-bold uppercase tracking-[0.25em] mb-6 text-blue-200">
+            <p className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 text-blue-200">
               {eyebrow}
             </p>
           )}
-          <h1 className="text-7xl md:text-8xl font-black tracking-tight text-white leading-[1.0] max-w-3xl">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-white leading-[1.05] max-w-3xl">
             {title}
           </h1>
-          <p className="mt-8 text-2xl text-white/70 leading-relaxed max-w-lg font-light">
+          <p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl text-white/70 leading-relaxed max-w-lg font-light">
             {description}
           </p>
 
           {(primaryButton || secondaryButton) && (
-            <div className="mt-12 flex flex-wrap gap-4">
+            <div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
               {primaryButton && (
                 <button
                   onClick={onPrimaryClick}
-                  className="rounded-full bg-blue-600 hover:bg-blue-500 active:bg-blue-700 px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5"
+                  className="rounded-2xl bg-blue-600 hover:bg-blue-500 active:bg-blue-700 active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all"
                 >
                   {primaryButton}
                 </button>
@@ -126,7 +126,7 @@ export default function HeroSection({
               {secondaryButton && (
                 <button
                   onClick={onSecondaryClick}
-                  className="rounded-full bg-white/10 backdrop-blur-sm border border-white/25 px-10 py-4 text-sm font-bold tracking-wider text-white hover:bg-white/20 hover:border-white/40 transition-all"
+                  className="rounded-2xl bg-white/10 backdrop-blur-sm border border-white/25 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white hover:bg-white/20 hover:border-white/40 active:scale-95 transition-all"
                 >
                   {secondaryButton}
                 </button>
@@ -139,26 +139,26 @@ export default function HeroSection({
   }
 
   return (
-    <section className="py-28 px-6 bg-gradient-to-br from-stone-100 via-stone-50 to-stone-100">
+    <section className="py-16 sm:py-20 md:py-28 px-4 sm:px-6 bg-gradient-to-br from-stone-100 via-stone-50 to-stone-100">
       <div className="mx-auto max-w-6xl">
         {eyebrow && (
-          <p className={`text-xs font-bold uppercase tracking-[0.25em] mb-6 ${isBlue ? "text-blue-500" : "text-emerald-600"}`}>
+          <p className={`text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 ${isBlue ? "text-blue-500" : "text-emerald-600"}`}>
             {eyebrow}
           </p>
         )}
-        <h1 className="text-7xl md:text-8xl font-black tracking-tight leading-[1.0] max-w-3xl text-stone-950">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[1.05] max-w-3xl text-stone-950">
           {title}
         </h1>
-        <p className="mt-8 text-2xl leading-relaxed max-w-lg font-light text-stone-600">
+        <p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl leading-relaxed max-w-lg font-light text-stone-600">
           {description}
         </p>
 
         {(primaryButton || secondaryButton) && (
-          <div className="mt-12 flex flex-wrap gap-4">
+          <div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
             {primaryButton && (
               <button
                 onClick={onPrimaryClick}
-                className={`rounded-full ${btnBg} px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5`}
+                className={`rounded-2xl ${btnBg} active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all`}
               >
                 {primaryButton}
               </button>
@@ -166,7 +166,7 @@ export default function HeroSection({
             {secondaryButton && (
               <button
                 onClick={onSecondaryClick}
-                className="rounded-full bg-white px-10 py-4 text-sm font-bold tracking-wider text-stone-950 ring-1 ring-stone-300 hover:bg-stone-50 transition-all"
+                className="rounded-2xl bg-white px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-stone-950 ring-1 ring-stone-300 hover:bg-stone-50 active:scale-95 transition-all"
               >
                 {secondaryButton}
               </button>

src/components/storefront/StorefrontFooter.tsx

@@ -57,11 +57,12 @@ export default function StorefrontFooter({
               <input
                 type="email"
                 placeholder="your@email.com"
-                className="w-52 rounded-l-lg border border-stone-600 bg-stone-900 px-4 py-2.5 text-sm text-stone-200 placeholder-stone-500 focus:border-stone-400 focus:outline-none focus:ring-1 focus:ring-stone-400 sm:w-64"
+                aria-label="Email address"
+                className="w-full sm:w-52 lg:w-64 rounded-l-xl sm:rounded-l-lg border border-stone-600 bg-stone-900 px-4 py-3 sm:py-2.5 text-sm text-stone-200 placeholder-stone-500 focus:border-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/50"
               />
               <button
                 type="submit"
-                className={`rounded-r-lg ${subscribeBtnClass} px-5 py-2.5 text-sm font-medium text-white transition-colors`}
+                className={`rounded-r-xl sm:rounded-r-lg ${subscribeBtnClass} px-4 sm:px-5 py-3 sm:py-2.5 text-sm font-medium text-white transition-colors active:scale-95`}
               >
                 Subscribe
               </button>