Desktop responsive: collections grid + seller page

- HorizontalCollectionsList: 4-column grid at lg (overrides mobile fixed-width
  cards), hide scroll arrows on desktop
- seller page: contained desktop layout, hide mobile back-header at lg, show
  store name; feed uses the responsive masonry
- MyLayout: desktop chrome gate now includes /seller/*

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

app/components/HorizontalCollectionsList.tsx

@@ -116,14 +116,17 @@ const HorizontalCollectionsList = ({
       {/* Scroll Container */}
       <div
         ref={scrollContainerRef}
-        className="w-full overflow-x-auto scrollbar-hide snap-x snap-mandatory px-4"
+        className="w-full overflow-x-auto scrollbar-hide snap-x snap-mandatory px-4 lg:overflow-visible lg:px-0"
+      >
+        <div
+          className="flex lg:grid lg:grid-cols-4 lg:gap-4 lg:!w-full"
+          style={{ width: "max-content" }}
         >
-        <div className="flex" style={{ width: "max-content" }}>
           {collections.map((collection, index) => (
             <Link
               key={collection.id || index}
               to={`/collection/${collection.id}`}
-              className="flex flex-col pr-2 md:pr-4 snap-start group"
+              className="flex flex-col pr-2 md:pr-4 snap-start group lg:!w-auto lg:!max-w-none lg:pr-0"
               style={{ width: "calc(85vw)", maxWidth: "300px" }}
             >
               <div className="flex flex-col gap-3 p-3 bg-WHITE2 rounded-2xl border border-inner-border hover:border-gray-300 transition-all duration-300 hover:shadow-lg h-full">
@@ -174,7 +177,7 @@ const HorizontalCollectionsList = ({
           {showViewAllButton && (
             <Link
               to="/collections"
-              className="flex flex-col pr-2 md:pr-4 snap-start group"
+              className="flex flex-col pr-2 md:pr-4 snap-start group lg:!w-auto lg:!max-w-none lg:pr-0"
               style={{ width: "calc(85vw)", maxWidth: "300px" }}
             >
               <div className="flex flex-col items-center justify-center gap-3 p-3 bg-gradient-to-br from-black to-gray-800 rounded-2xl border border-inner-border hover:border-gray-600 transition-all duration-300 hover:shadow-lg h-full min-h-[304px]">
@@ -203,9 +206,9 @@ const HorizontalCollectionsList = ({
           )}
         </div>
       </div>
-      {/* Navigation Buttons Row */}
+      {/* Navigation Buttons Row (mobile only) */}
       {collections.length > 1 && (
-        <div className="flex items-center justify-center gap-3 px-4">
+        <div className="flex items-center justify-center gap-3 px-4 lg:hidden">
           <motion.button
             whileHover={!showRightButton ? {} : { scale: 1.1 }}
             whileTap={!showRightButton ? {} : { scale: 0.95 }}

app/components/MyLayout.tsx

@@ -32,7 +32,10 @@ const MyLayout = React.memo(({ children }: { children: React.ReactNode }) => {
   // experience at all widths so nothing regresses while we build the rest.
   const p = location.pathname;
   const isDesktopReady =
-    p === "/" || p.startsWith("/search/") || p === "/cart";
+    p === "/" ||
+    p.startsWith("/search/") ||
+    p.startsWith("/seller/") ||
+    p === "/cart";
   const isThread = !!location.pathname.split("threads")[1];
 
   return (

app/routes/seller.$sellerId._index.tsx

@@ -191,21 +191,26 @@ export default function Seller() {
       onRetry={refetch}
       type="seller"
     >
-      <div className="flex flex-col pb-20">
+      <div className="flex flex-col pb-20 lg:max-w-[1100px] lg:mx-auto lg:w-full lg:px-8 lg:pt-8">
         {/* Header */}
         <div className="relative">
+          <div className="lg:hidden">
             <HeaderWithSupport
               title={seller?.storeName || ""}
               onBack={handleBack}
             />
-          <div className="flex flex-col items-center justify-center gap-2 pt-2">
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2 pt-2 lg:pt-0">
             <SellerLogo src={seller?.storeLogo} alt="store logo" />
+            <h1 className="hidden lg:block text-[26px] font-extrabold mt-1">
+              {seller?.storeName}
+            </h1>
           </div>
         </div>
 
         <div className="w-full">
-          <div className="w-full p-4">
+          <div className="w-full p-4 lg:max-w-2xl lg:mx-auto">
-            <div className="flex px-4 border bg-WHITE3 rounded-[10px] w-full py-2">
+            <div className="flex px-4 border bg-WHITE3 rounded-[10px] w-full py-2 lg:py-4">
               <div className="w-full border-l flex-2 flex flex-col items-center justify-center">
                 <p className="text-R12">{seller?.followerCount}</p>
                 <p className="text-R12">دنبال کننده</p>
@@ -243,14 +248,14 @@ export default function Seller() {
               </div>
             </div>
           </div>
-          <div className="mt-6 px-4">
+          <div className="mt-6 px-4 lg:max-w-2xl lg:mx-auto lg:text-center">
             <ReadMoreText
               sellerData={seller}
               text={seller?.storeDescription || ""}
               maxLength={150}
             />
           </div>
-          <div className="mt-4 px-4 w-full flex py-4 gap-4">
+          <div className="mt-4 px-4 w-full flex py-4 gap-4 lg:max-w-2xl lg:mx-auto">
             <Button
               variant="dark"
               size="lg"