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/collection.tsx

@@ -13,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
+import { Container } from '@/components/layout/Container';
 import { cn } from '@/lib/utils';
 
 type FilterOption = { label: string };
@@ -425,7 +426,7 @@ export function CollectionView(props: CollectionProps) {
   if (!selected && !paramHandle) {
     return (
       <section className="bg-background pb-24 pt-12 md:pt-20">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
             <Skeleton className="h-3 w-24" />
             <Skeleton className="h-10 w-3/4" />
@@ -435,14 +436,14 @@ export function CollectionView(props: CollectionProps) {
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background pb-24 pt-12 md:pt-20">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {/* Cover image */}
         {showCoverImage === 'yes' && collectionImage && (
           <div className="mb-10 overflow-hidden rounded-lg">
@@ -545,7 +546,7 @@ export function CollectionView(props: CollectionProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }