refactor: dedupe nested page-width and scope checkout layout overrides

The frontStore Base already wraps the content area in `.page-width`
(Base.tsx `<Area id="content" className="page-width">`), so page components
that re-applied `page-width` were nesting it — a second max-width + 22px
padding that indented their content past the rest of the page. Drop the
redundant `page-width` from the frontStore page components and shared
components that render inside the content area: category/product/search,
blog views, cart/checkout, customer account + order pages, CMS page + 404,
breadcrumb, and CategoryInfo. The admin 404 dropped it too — `.page-width`
is defined only in the frontStore global.scss, so it was a no-op there.

Scope the checkout `.wrapper` header/footer overrides to their route body
class (`.checkout` / `.checkoutSuccess`) so they stop leaking to every page
in dev, where all route CSS is injected globally by style-loader (prod
already extracts CSS per route).

Section `boxed` now caps at the theme's 1200px page width and centers, so a
section stays visibly boxed even when dropped into a full-bleed area instead
of relying on an ancestor container to constrain it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: treoden

packages/evershop/src/components/frontStore/catalog/CategoryInfo.tsx

@@ -20,7 +20,7 @@ export function CategoryInfo() {
             priority={true}
           />
         )}
-        <div className="category__info prose prose-base page-width">
+        <div className="category__info prose prose-base">
           <h1 className="category__name">{name}</h1>
           <div className="category__description">
             <Editor rows={description} />

packages/evershop/src/modules/base/pages/frontStore/all/Breadcrumb.tsx

@@ -19,7 +19,7 @@ interface BreadcrumbProps {
 
 function Breadcrumb({ pageInfo: { breadcrumbs } }: BreadcrumbProps) {
   return breadcrumbs.length ? (
-    <div className="page-width">
+    <div>
       <div className="py-5">
         <BreadcrumbRoot>
           <BreadcrumbList>

packages/evershop/src/modules/blog/pages/frontStore/blogCategoryView/BlogCategoryView.tsx

@@ -24,7 +24,7 @@ export default function BlogCategoryView({
   }
   const items = category.posts?.items || [];
   return (
-    <div className="blog-category page-width py-8">
+    <div className="blog-category py-8">
       <h1 className="text-3xl font-bold mb-2">{category.name}</h1>
       {category.shortDescription && (
         <p className="text-gray-600 mb-6">{category.shortDescription}</p>

packages/evershop/src/modules/blog/pages/frontStore/blogHome/BlogHome.tsx

@@ -17,7 +17,7 @@ export default function BlogHome({
 }) {
   const items = blogPosts?.items || [];
   return (
-    <div className="blog-home page-width py-8">
+    <div className="blog-home py-8">
       <h1 className="text-3xl font-bold mb-6">{_('Blog')}</h1>
       {items.length === 0 ? (
         <p className="text-gray-500">{_('No posts published yet.')}</p>

packages/evershop/src/modules/blog/pages/frontStore/blogPostView/BlogPostView.tsx

@@ -38,7 +38,7 @@ export default function BlogPostView({ post }: BlogPostViewData) {
     return null;
   }
   return (
-    <div className="blog-post-single page-width">
+    <div className="blog-post-single">
       <article className="max-w-3xl mx-auto py-8">
         {post.category && (
           <a

packages/evershop/src/modules/blog/pages/frontStore/blogTagView/BlogTagView.tsx

@@ -23,7 +23,7 @@ export default function BlogTagView({
   }
   const items = tag.posts?.items || [];
   return (
-    <div className="blog-tag page-width py-8">
+    <div className="blog-tag py-8">
       <p className="text-sm uppercase tracking-wide text-gray-500 mb-1">
         {_('Tag')}
       </p>

packages/evershop/src/modules/catalog/pages/frontStore/catalogSearch/SearchPage.tsx

@@ -16,7 +16,7 @@ export default function SearchPage({ search }: SearchPageProps) {
   return (
     <SearchProvider searchData={search}>
       <Area id="searchPageTop" className="search__page__top" />
-      <div className="page-width grid grid-cols-1 ">
+      <div className="grid grid-cols-1 ">
         <SearchInfo />
         <SearchProducts />
       </div>

packages/evershop/src/modules/catalog/pages/frontStore/categoryView/CategoryView.tsx

@@ -20,7 +20,7 @@ export default function CategoryView({ category }: CategoryViewProps) {
     <CategoryProvider category={category}>
       <Area id="categoryPageTop" className="category__page__top" />
       <CategoryInfo />
-      <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-5">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-5">
         <Area
           id="categoryLeftColumn"
           className="md:col-span-1"

packages/evershop/src/modules/catalog/pages/frontStore/productView/ProductView.tsx

@@ -15,7 +15,7 @@ export default function ProductView({ product }: ProductData) {
     <ProductProvider product={product}>
       <div className="product__detail">
         <Area id="productPageTop" className="product__page__top" />
-        <div className="product__page__middle page-width">
+        <div className="product__page__middle">
           <div className="grid grid-cols-1 gap-7 md:grid-cols-2">
             <Area
               id="productPageMiddleLeft"

packages/evershop/src/modules/checkout/pages/frontStore/cart/ShoppingCart.tsx

@@ -24,7 +24,7 @@ interface ShoppingCartProps {
 export default function ShoppingCart({ checkoutUrl }: ShoppingCartProps) {
   const { data: cart } = useCartState();
   return (
-    <div className="cart page-width">
+    <div className="cart">
       {cart.items.length > 0 ? (
         <>
           <Title title={_('Shopping Cart')} />