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-grid.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { shopifyFetch } from "@/services/shopify/client";
 import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type CollectionGridProps = {
   tagline: string;
@@ -45,7 +46,7 @@ export function CollectionGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mx-auto mb-12 max-w-2xl text-center">
           {tagline ? (
             <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
@@ -110,7 +111,7 @@ export function CollectionGrid({
             </Link>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

components/commerce/products-carousel.tsx

@@ -12,6 +12,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsCarouselProps = {
   collection: ShopifyCollection | null;
@@ -71,7 +72,7 @@ export function ProductsCarousel({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
           <div className="max-w-xl">
             {tagline ? (
@@ -120,7 +121,7 @@ export function ProductsCarousel({
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-grid.tsx

@@ -5,6 +5,7 @@ import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
@@ -59,7 +60,7 @@ export function ProductsGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
           <div className="max-w-xl">
             {tagline ? (
@@ -94,7 +95,7 @@ export function ProductsGrid({
               ))
             : products.map((p) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/recommended-products.tsx

@@ -6,6 +6,7 @@ import {
 import { ProductCard } from "./product-card";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
@@ -27,7 +28,7 @@ export function RecommendedProductsView({
   if (!selected) {
     return (
       <section className="bg-background py-20 md:py-28">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <div className="mb-12 flex max-w-xl flex-col gap-3">
             {tagline ? <Skeleton className="h-3 w-24" /> : null}
             <Skeleton className="h-8 w-2/3" />
@@ -37,14 +38,14 @@ export function RecommendedProductsView({
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 max-w-xl">
           {tagline ? (
             <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
@@ -61,7 +62,7 @@ export function RecommendedProductsView({
               ))
             : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/search-products.tsx

@@ -8,6 +8,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Container } from '@/components/layout/Container';
 import { cn } from '@/lib/utils';
 
 type FilterOption = { label: string };
@@ -397,7 +398,7 @@ export function SearchProductsView(props: SearchProductsProps) {
 
   return (
     <section className="bg-background py-12 md:py-16">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
 
         {/* Page header */}
         <div className="mb-10">
@@ -523,7 +524,7 @@ export function SearchProductsView(props: SearchProductsProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }