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/product-details.tsx

@@ -7,6 +7,7 @@ import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
@@ -31,7 +32,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
   if (!handle || loading || !product) {
     return (
       <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
           <div className="flex flex-col gap-4">
             <Skeleton className="aspect-[4/5] w-full" />
             <div className="flex gap-3">
@@ -62,7 +63,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               <Skeleton className="h-4 w-4/6" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -90,7 +91,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
 
   return (
     <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
         <div className="flex flex-col gap-4">
           <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
             {main ? (
@@ -214,7 +215,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             </div>
           ) : null}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }