Add Container component and fix radius/maxWidth theming

- Drop buttonRadius prop; button now uses --radius via rounded-md
- Inject @theme radius mappings into ThemeProvider so rounded-* utilities
  pick up --radius inside the Tailwind CDN iframe
- Add shared Container that consumes --container-max-width set from the
  global maxWidth prop, replacing ad-hoc "container mx-auto max-w-7xl px-6"
  wrappers across commerce, landing, footer, navigation, and others
- Simplify maxWidth options to Small/Medium/Large/X-Large/Full bleed and
  shift the scale up so Large (1280px) matches the previous default

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/commerce/featured-product.tsx

@@ -4,6 +4,7 @@ import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";
 
 export type FeaturedProductProps = {
@@ -33,7 +34,7 @@ export function FeaturedProductView({
           tone === "muted" ? "bg-muted/40" : "bg-background",
         )}
       >
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
           <div className={cn(align === "right" && "md:order-2")}>
             <Skeleton className="aspect-[4/5] w-full" />
           </div>
@@ -51,7 +52,7 @@ export function FeaturedProductView({
               <Skeleton className="h-11 w-32 rounded-md" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -75,7 +76,7 @@ export function FeaturedProductView({
           : "bg-background py-20 md:py-28"
       }
     >
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
         <div className={align === "right" ? "md:order-2" : ""}>
           {image ? (
             <img
@@ -123,7 +124,7 @@ export function FeaturedProductView({
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 }