Desktop header: login/profile state + theme toggle; hide about/faq header

- header shows "ورود / ثبت نام" when logged out (no profile/cart/bookmark icons,
  so the profile tab isn't reachable) and the avatar + cart + bookmarks when
  logged in
- add the light/dark SunMoonToggle to the desktop header
- about/faq: hide their mobile HeaderWithSupport at lg (content already
  width-constrained)

app/components/desktop/DesktopHeader.tsx

@@ -3,6 +3,7 @@ import { useState, type FormEvent } from "react";
 import { Search, Heart, ShoppingBag, User } from "lucide-react";
 import { useRootData } from "~/hooks/use-root-data";
 import { useCartCount } from "~/requestHandler/use-cart-hooks";
+import { SunMoonToggle } from "~/components/SunMoonToggle";
 import logo from "~/assets/logo/SVG-07.svg";
 
 const NAV = [
@@ -19,9 +20,10 @@ const NAV = [
 const DesktopHeader = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { user } = useRootData();
+  const { user, theme } = useRootData();
   const cartCount = useCartCount();
   const [q, setQ] = useState("");
+  const isLoggedIn = !!user?.access_token;
 
   const isActive = (to: string) =>
     to === "/" ? location.pathname === "/" : location.pathname.startsWith(to);
@@ -74,38 +76,51 @@ const DesktopHeader = () => {
           />
         </form>
 
-        <div className="flex items-center gap-1.5 shrink-0">
+        <div className="flex items-center gap-2.5 shrink-0">
-          <Link
+          <SunMoonToggle theme={theme} />
-            to="/profile/bookmarks"
+          {isLoggedIn ? (
-            aria-label="نشان‌شده‌ها"
+            <>
-            prefetch="intent"
+              <Link
-            className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
+                to="/profile/bookmarks"
-          >
+                aria-label="نشان‌شده‌ها"
-            <Heart size={21} />
+                prefetch="intent"
-          </Link>
+                className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
-          <Link
+              >
-            to="/cart"
+                <Heart size={21} />
-            aria-label="سبد خرید"
+              </Link>
-            prefetch="intent"
+              <Link
-            className="relative w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
+                to="/cart"
-          >
+                aria-label="سبد خرید"
-            {cartCount > 0 && user?.access_token ? (
+                prefetch="intent"
-              <span className="absolute top-1 left-1 min-w-[17px] h-[17px] bg-RED text-white rounded-full text-[10.5px] font-bold grid place-items-center px-1 border-2 border-WHITE">
+                className="relative w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
-                {cartCount}
+              >
-              </span>
+                {cartCount > 0 ? (
-            ) : null}
+                  <span className="absolute top-1 left-1 min-w-[17px] h-[17px] bg-RED text-white rounded-full text-[10.5px] font-bold grid place-items-center px-1 border-2 border-WHITE">
-            <ShoppingBag size={21} />
+                    {cartCount}
-          </Link>
+                  </span>
-          <Link
+                ) : null}
-            to="/profile"
+                <ShoppingBag size={21} />
-            aria-label="پروفایل"
+              </Link>
-            prefetch="intent"
+              <Link
-            className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
+                to="/profile"
-          >
+                aria-label="پروفایل"
-            <span className="w-9 h-9 rounded-full bg-WHITE3 grid place-items-center text-GRAY overflow-hidden">
+                prefetch="intent"
-              <User size={20} />
+                className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
-            </span>
+              >
-          </Link>
+                <span className="w-9 h-9 rounded-full bg-WHITE3 grid place-items-center text-GRAY overflow-hidden">
+                  <User size={20} />
+                </span>
+              </Link>
+            </>
+          ) : (
+            <Link
+              to="/login"
+              prefetch="intent"
+              className="inline-flex items-center h-10 px-4 rounded-xl bg-VITROWN_BLUE text-white text-[14px] font-bold hover:bg-[#012f6b] transition-colors whitespace-nowrap"
+            >
+              ورود / ثبت نام
+            </Link>
+          )}
         </div>
       </div>
     </header>

app/routes/profile.about.tsx

@@ -47,12 +47,14 @@ export default function AboutPage() {
 
   return (
     <div className="flex flex-col pb-20">
-      {/* Header */}
+      {/* Header (mobile) */}
-      <HeaderWithSupport
+      <div className="lg:hidden">
-        hideSupportButton={true}
+        <HeaderWithSupport
-        title="درباره ویترون"
+          hideSupportButton={true}
-        onBack={() => safeGoBack(navigate)}
+          title="درباره ویترون"
-      />
+          onBack={() => safeGoBack(navigate)}
+        />
+      </div>
       {/* Content */}
       <div className="flex flex-col gap-8 p-4 max-w-2xl mx-auto w-full">
         {/* Logo Section */}

app/routes/profile.faq.tsx

@@ -135,11 +135,13 @@ export default function FAQ() {
 
   return (
     <div>
-      <HeaderWithSupport
+      <div className="lg:hidden">
-        hideSupportButton={true}
+        <HeaderWithSupport
-        title="سوالات متداول"
+          hideSupportButton={true}
-        onBack={() => safeGoBack(navigate)}
+          title="سوالات متداول"
-      />
+          onBack={() => safeGoBack(navigate)}
+        />
+      </div>
       <div className="max-w-4xl mx-auto px-4 py-12">
         <div className="text-center mb-12">
           <h1 className="text-3xl font-bold mb-4">سوالات متداول</h1>