fix tailwind error

Dockerfile

@@ -1,11 +1,9 @@
 FROM node:20-alpine AS base
 
-# Change Alpine repo
 RUN sed -i 's|https://dl-cdn.alpinelinux.org/alpine|https://mirror.de.velop.ir/alpine|g' /etc/apk/repositories
 
-# Configure npm registry mirror (Liara)
-# ENV NPM_CONFIG_REGISTRY=https://package-mirror.liara.ir/repository/npm/
-# RUN npm config set registry https://package-mirror.liara.ir/repository/npm/
+ENV NPM_CONFIG_REGISTRY=https://package-mirror.liara.ir/repository/npm/
+RUN npm config set registry https://package-mirror.liara.ir/repository/npm/
  
 
 WORKDIR /app

src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useParams, useRouter, usePathname } from 'next/navigation';
+import { glassSurfaceNav } from '@/lib/styles/glassSurface';
 import Button from '@/components/button/PrimaryButton';
 import { useGetProducts } from '@/app/[name]/(Main)/hooks/useMenuData';
 import type { Product } from '@/app/[name]/(Main)/types/Types';
@@ -105,7 +106,7 @@ const CartSummary = ({ isPremium }: CartSummaryProps) => {
             </div>
           )}
 
-          <div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
+          <div className={glassSurfaceNav('fixed bottom-0 left-0 right-0 z-50 border-t border-border p-4 w-full')}>
             <div className='flex justify-between items-center gap-4'>
               <div className='flex flex-col'>
                 <div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>

src/app/[name]/(Dialogs)/cart/hook/useCart.ts

@@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
 import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
 import { useReceiptStore } from "@/zustand/receiptStore";
 import {
+  useBulkCart,
   useClearCart,
   useDecrementCart,
   useGetCartItems,
@@ -19,6 +20,7 @@ export const useCart = () => {
     clear,
     increment,
     decrement,
+    setQuantity,
     items,
     slug,
     setSlug,
@@ -32,6 +34,10 @@ export const useCart = () => {
     isPending: isDecrementPending,
   } = useDecrementCart();
   const { mutate: mutateClearCart } = useClearCart();
+  const {
+    mutate: mutateBulkCart,
+    isPending: isBulkPending,
+  } = useBulkCart();
   const { data: cartItems } = useGetCartItems(isSuccess);
 
   const addToCart = (id: string | number) => {
@@ -62,6 +68,24 @@ export const useCart = () => {
     }
   };
 
+  const setCartQuantity = (id: string | number, quantity: number) => {
+    if (isSuccess) {
+      mutateBulkCart(
+        { items: [{ variantId: String(id), quantity }] },
+        {
+          onError: (error) => {
+            toast(extractErrorMessage(error), "error");
+          },
+        }
+      );
+    } else {
+      if (currentSlug && slug !== currentSlug) {
+        setSlug(currentSlug);
+      }
+      setQuantity(id, quantity);
+    }
+  };
+
   const clearCart = useCallback(() => {
     if (isSuccess) {
       mutateClearCart(undefined, {
@@ -92,7 +116,7 @@ export const useCart = () => {
     }
   }, [isSuccess, cartItems?.data?.items, items]);
 
-  const isCartMutating = isIncrementPending || isDecrementPending;
+  const isCartMutating = isIncrementPending || isDecrementPending || isBulkPending;
 
   // برای کاربران لاگین شده، slug از API می‌آید (در cartItems.data.shopId)
   // برای کاربران لاگین نشده، slug از receiptStore می‌آید
@@ -111,6 +135,7 @@ export const useCart = () => {
     clear,
     addToCart,
     removeFromCart,
+    setCartQuantity,
     clearCart,
     isCartMutating,
   };

src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import { useGetAddresses } from '@/app/[name]/(Profile)/profile/address/hooks/useAddressData';
 import { Address } from '@/app/[name]/(Profile)/profile/address/types/Types';

src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import InputField from '@/components/input/InputField';
 import { useCheckoutStore } from '../../store/Store';

src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import InputField from '@/components/input/InputField';
 import clsx from 'clsx';

src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import { Card, Icon, Wallet2 } from 'iconsax-react';
 import { useCallback, useMemo } from 'react';

src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import Combobox from '@/components/combobox/Combobox';
 import { Box, Location, Car, Building } from 'iconsax-react';

src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx

@@ -13,6 +13,8 @@ import { useGetCartItems, useSaveAllMethod } from '@/app/[name]/(Dialogs)/cart/h
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
 import { useCallback, useMemo } from 'react';
 import { useGetShipmentMethod } from '../../hooks/useOrderData';
+import { useGetProducts } from '@/app/[name]/(Main)/hooks/useMenuData';
+import { isVariablePricing } from '@/app/[name]/(Main)/types/Types';
 import CartItemsList from '@/app/[name]/(Dialogs)/cart/components/CartItemsList';
 import { useCartStore } from '@/app/[name]/(Dialogs)/cart/store/Store';
 
@@ -33,8 +35,22 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
     const name = params.name as string;
     const { isSuccess } = useGetProfile();
     const { data: cartData } = useGetCartItems(isSuccess);
+    const { data: productsResponse } = useGetProducts();
     const { data: shipmentMethod } = useGetShipmentMethod();
 
+    const hasVariablePricingItem = useMemo(() => {
+        const cartItems = cartData?.data?.items;
+        const products = productsResponse?.data;
+        if (!cartItems?.length || !products?.length) return false;
+
+        return cartItems.some((item) => {
+            const product = products.find((p) =>
+                p.variants?.some((v) => String(v.id) === String(item.variantId))
+            );
+            return product != null && isVariablePricing(product);
+        });
+    }, [cartData?.data?.items, productsResponse?.data]);
+
     const selectedDeliveryMethod = useMemo(() => {
         if (!shipmentMethod?.data || !deliveryType) return null;
         return shipmentMethod.data.find((item) => item.id === deliveryType);
@@ -132,8 +148,8 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
                     onSuccess: (data) => {
                         clear();
                         resetCart();
-                        if (data?.data?.paymentUrl) {
-                            window.location.href = data?.data?.paymentUrl;
+                        if (!hasVariablePricingItem && data?.data?.paymentUrl) {
+                            window.location.href = data.data.paymentUrl;
                             toast('در حال ریدایرکت به صفحه پرداخت...', 'success');
                         } else {
                             window.location.href = `/${name}/order/track/${data?.data?.order?.id}`;
@@ -193,7 +209,7 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
                             <div className='text-sm mt-2 font-semibold'>{formatPrice(total)} تومان</div>
                         </div>
                         <Button pending={isCreateOrderPending || isSaveAllMethodPending} onClick={handleSubmit} className='px-10 w-fit dark:bg-white dark:text-black! dark:hover:bg-gray-100'>
-                            {t("ButtonSubmit")}
+                            {hasVariablePricingItem ? t("ButtonRegister") : t("ButtonSubmit")}
                         </Button>
                     </div>
                 </div>

src/app/[name]/(Dialogs)/order/checkout/[id]/components/TableSection.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import { MinusIcon, PlusIcon } from 'lucide-react';
 import { motion } from 'framer-motion';

src/app/[name]/(Dialogs)/order/checkout/service/OrderService.ts

@@ -4,6 +4,7 @@ import {
   PaymentMethodsResponse,
   CreateOrderResponse,
   OrderDetailResponse,
+  PayOrderResponse,
 } from "../types/Types";
 
 export const getShipmentMethod = async (): Promise<ShipmentMethodsResponse> => {
@@ -81,7 +82,7 @@ export const cancelOrder = async (id: string) => {
   return data;
 };
 
-export const confirmOrder = async (id: string) => {
-  const { data } = await api.get(`/public/payments/pay-order/${id}`);
+export const confirmOrder = async (id: string): Promise<PayOrderResponse> => {
+  const { data } = await api.get<PayOrderResponse>(`/public/payments/pay-order/${id}`);
   return data;
 };

src/app/[name]/(Dialogs)/order/checkout/types/Types.ts

@@ -1,4 +1,4 @@
-import { BaseResponse } from "@/app/[name]/(Main)/types/Types";
+import { BaseResponse, Product } from "@/app/[name]/(Main)/types/Types";
 
 export interface ShipmentMethod {
   id: string;
@@ -272,6 +272,12 @@ export interface CreateOrderData {
 
 export type CreateOrderResponse = BaseResponse<CreateOrderData>;
 
+export interface PayOrderData {
+  paymentUrl?: string;
+}
+
+export type PayOrderResponse = BaseResponse<PayOrderData>;
+
 export interface OrderDetailUser {
   id: string;
   createdAt: string;
@@ -361,28 +367,15 @@ export interface OrderDetailPaymentMethod {
   merchantId: string | null;
 }
 
-export interface OrderDetailFood {
+export interface OrderDetailVariant {
   id: string;
   createdAt: string;
   updatedAt: string;
   deletedAt: string | null;
-  restaurant: string;
-  category: string;
-  title: string;
-  desc: string;
-  content: string[];
+  value: string;
   price: number;
-  order: number | null;
-  prepareTime: number | null;
-  weekDays: number[];
-  mealTypes: string[];
-  isActive: boolean;
-  images: string[];
-  inPlaceServe: boolean;
-  pickupServe: boolean;
-  score: number;
-  discount: number;
-  isSpecialOffer: boolean;
+  stock: number | null;
+  product: Product;
 }
 
 export interface OrderDetailItem {
@@ -391,11 +384,12 @@ export interface OrderDetailItem {
   updatedAt: string;
   deletedAt: string | null;
   order: string;
-  food: OrderDetailFood;
+  variant: OrderDetailVariant;
   quantity: number;
   unitPrice: number;
   discount: number;
   totalPrice: number;
+  status?: string;
 }
 
 export interface OrderDetailHistory {
@@ -454,6 +448,7 @@ export interface OrderDetail {
   tableNumber: string | null;
   status:
     | "pendingPayment"
+    | "needConfirmation"
     | "new"
     | "preparing"
     | "ready"

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -1,32 +1,58 @@
-'use client';
+"use client";
 
-import { useParams, useRouter } from 'next/navigation';
-import React from 'react';
-import Button from '@/components/button/PrimaryButton';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Clock } from 'iconsax-react';
-import clsx from 'clsx';
-import useToggle from '@/hooks/helpers/useToggle';
-import Prompt from '@/components/utils/Prompt';
-import { useCancelOrder, useGetOrderDetail } from '../../checkout/hooks/useOrderData';
-import ordersTranslations from '@/locales/fa/orders.json';
-import { toast } from '@/components/Toast';
-import { extractErrorMessage } from '@/lib/func';
-import { useQueryClient } from '@tanstack/react-query';
+import type { Product, ProductCategory } from "@/app/[name]/(Main)/types/Types";
+import { isVariablePricing } from "@/app/[name]/(Main)/types/Types";
+import Button from "@/components/button/PrimaryButton";
+import MenuItem from "@/components/listview/MenuItem";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import { toast } from "@/components/Toast";
+import { Skeleton } from "@/components/ui/skeleton";
+import Prompt from "@/components/utils/Prompt";
+import useToggle from "@/hooks/helpers/useToggle";
+import { extractErrorMessage } from "@/lib/func";
+import ordersTranslations from "@/locales/fa/orders.json";
+import { useQueryClient } from "@tanstack/react-query";
+import clsx from "clsx";
+import { Clock } from "iconsax-react";
+import { useParams, useRouter } from "next/navigation";
+import React from "react";
+import { useCancelOrder, useConfirmOrder, useGetOrderDetail } from "../../checkout/hooks/useOrderData";
+import type { OrderDetailItem } from "../../checkout/types/Types";
+
+const orderItemToProduct = (item: OrderDetailItem): Product => {
+  const { product, ...variant } = item.variant;
+  const categoryId = typeof product.category === "string" ? product.category : (product.category?.id ?? "");
+
+  return {
+    ...product,
+    category: (typeof product.category === "object" && product.category ? product.category : { id: categoryId }) as ProductCategory,
+    variants: [
+      {
+        id: variant.id,
+        createdAt: variant.createdAt,
+        updatedAt: variant.updatedAt,
+        deletedAt: variant.deletedAt,
+        product: product.id,
+        value: variant.value,
+        price: item.unitPrice,
+      },
+    ],
+  } as Product;
+};
 
 const getDeliveryMethodTitle = (method: string) => {
-    switch (method) {
-        case 'deliveryCourier':
-            return 'ارسال توسط پیک';
-        case 'deliveryCar':
-            return 'تحویل به خودرو';
-        case 'pickup':
-            return 'تحویل حضوری';
-        case 'dineIn':
-            return 'سرو در فروشگاه';
-        default:
-            return 'روش ارسال';
-    }
+  switch (method) {
+    case "deliveryCourier":
+      return "ارسال توسط پیک";
+    case "deliveryCar":
+      return "تحویل به خودرو";
+    case "pickup":
+      return "تحویل حضوری";
+    case "dineIn":
+      return "سرو در فروشگاه";
+    default:
+      return "روش ارسال";
+  }
 };
 
 // const getStatusPercentage = (status: string) => {
@@ -53,17 +79,17 @@ const getDeliveryMethodTitle = (method: string) => {
 // };
 
 const getStatusText = (status: string): string => {
-    const statusKey = status as keyof typeof ordersTranslations.status;
-    return ordersTranslations.status[statusKey] || 'نامشخص';
+  const statusKey = status as keyof typeof ordersTranslations.status;
+  return ordersTranslations.status[statusKey] || "نامشخص";
 };
 
 const formatDate = (dateString: string): string => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('fa-IR', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric'
-    });
+  const date = new Date(dateString);
+  return date.toLocaleDateString("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 };
 
 // const formatTime = (dateString: string): string => {
@@ -75,150 +101,213 @@ const formatDate = (dateString: string): string => {
 // };
 
 function OrderTrackingPage() {
-    const { id, name } = useParams();
-    const router = useRouter();
-    const queryClient = useQueryClient();
-    const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
-    const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
-    const { mutate: cancelOrder } = useCancelOrder();
+  const { id, name } = useParams();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
+  const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
+  const { mutate: cancelOrder } = useCancelOrder();
+  const { mutate: payOrder, isPending: isPaying } = useConfirmOrder();
 
-    const onCancelOrder = (e: React.MouseEvent | null) => {
-        if (!e || !id) return;
+  const orderStatus = orderDetail?.data?.status;
+  const showPayButton = orderStatus === "pendingPayment" || orderStatus === "needConfirmation";
+  const isPayDisabled = orderStatus === "needConfirmation";
 
-        cancelOrder(id as string, {
-            onSuccess: () => {
-                toggleCancelModal();
-                queryClient.invalidateQueries({ queryKey: ['order-detail', id] });
-                toast('سفارش با موفقیت لغو شد', 'success');
-            },
-            onError: (error) => {
-                toast(extractErrorMessage(error), 'error');
-            }
-        });
-    };
+  const onPayOrder = () => {
+    if (!id || isPayDisabled) return;
 
-    return (
-        <div className="fixed inset-0 bg-container flex flex-col">
-            <div className='flex-1 overflow-y-auto px-4 py-6'>
-                <div className='max-w-2xl mx-auto flex flex-col gap-6'>
-                    {isLoading ? (
-                        <>
-                            <Skeleton className='h-6 w-48 mx-auto' />
-                            <div className='flex flex-col gap-4'>
-                                <Skeleton className='h-5 w-full' />
-                                <Skeleton className='h-5 w-full' />
-                                <Skeleton className='h-20 w-full' />
-                                <Skeleton className='h-5 w-full' />
-                            </div>
-                        </>
-                    ) : orderDetail?.data ? (
-                        <>
-                            <h1 className='text-lg font-semibold text-center'>
-                                {getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}
-                            </h1>
+    payOrder(id as string, {
+      onSuccess: (data) => {
+        const paymentUrl = data?.data?.paymentUrl;
+        if (paymentUrl) {
+          toast("در حال ریدایرکت به صفحه پرداخت...", "success");
+          window.location.href = paymentUrl;
+        } else {
+          queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
+          toast("پرداخت با موفقیت انجام شد", "success");
+        }
+      },
+      onError: (error) => {
+        toast(extractErrorMessage(error), "error");
+      },
+    });
+  };
 
-                            <div className='flex flex-col'>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground flex items-center gap-2'>
-                                        <Clock className='stroke-current' size={16} />
-                                        زمان سفارش
-                                    </span>
-                                    <div className='flex  items-end gap-0.5'>
-                                        <span className='text-sm font-semibold'>{formatDate(orderDetail.data.createdAt)}</span>
-                                        {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
-                                    </div>
-                                </div>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>نوع ارسال</span>
-                                    <span className='text-sm font-semibold'>{orderDetail.data?.deliveryMethod?.description}</span>
-                                </div>
-                                {orderDetail.data.carAddress && (
-                                    <div className='flex justify-between items-center h-16 border-b border-border'>
-                                        <div className='text-sm text-muted-foreground mb-1'>اطلاعات خودرو</div>
-                                        <div className='text-sm font-semibold'>
-                                            {orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
-                                        </div>
-                                    </div>
-                                )}
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>شماره سفارش</span>
-                                    <span className='text-sm font-semibold'>#{orderDetail.data.orderNumber}</span>
-                                </div>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>وضعیت سفارش</span>
-                                    <span className='text-sm font-semibold'>{getStatusText(orderDetail.data.status)}</span>
-                                </div>
+  const onCancelOrder = (e: React.MouseEvent | null) => {
+    if (!e || !id) return;
 
-                                {orderDetail.data.tableNumber && (
-                                    <div className='flex justify-between items-center h-16 border-b border-border'>
-                                        <span className='text-sm text-muted-foreground'>شماره میز</span>
-                                        <span className='text-sm font-semibold'>#{orderDetail.data.tableNumber}</span>
-                                    </div>
-                                )}
+    cancelOrder(id as string, {
+      onSuccess: () => {
+        toggleCancelModal();
+        queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
+        toast("سفارش با موفقیت لغو شد", "success");
+      },
+      onError: (error) => {
+        toast(extractErrorMessage(error), "error");
+      },
+    });
+  };
 
-                                {orderDetail.data.userAddress && (
-                                    <div className='py-3 border-b border-border'>
-                                        <div className='text-sm text-muted-foreground mb-1'>آدرس تحویل</div>
-                                        <div className='text-sm'>{orderDetail.data.userAddress.address}</div>
-                                    </div>
-                                )}
-
-                                <div className='flex justify-between items-center py-4 border-t border-border'>
-                                    <span className='text-sm font-medium'>مجموع سفارش</span>
-                                    <span className='text-sm font-bold '>
-                                        {orderDetail.data.total.toLocaleString('fa-IR')} تومان
-                                    </span>
-                                </div>
-                            </div>
-                        </>
-                    ) : (
-                        <div className='text-center text-muted-foreground py-12'>
-                            اطلاعات سفارش یافت نشد
-                        </div>
-                    )}
+  return (
+    <div className="fixed inset-0 bg-container flex flex-col">
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-2xl mx-auto flex flex-col gap-6">
+          {isLoading ? (
+            <>
+              <Skeleton className="h-6 w-48 mx-auto" />
+              <div className="flex flex-col gap-4">
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-5 w-full" />
+              </div>
+            </>
+          ) : orderDetail?.data ? (
+            <>
+              {orderDetail.data.status === "needConfirmation" && (
+                <div className="rounded-2xl bg-red-50 px-4 py-3 text-center">
+                  <p className="text-sm text-red-800 leading-6">لطفاً پس از دریافت پیامک، حداکثر تا ۲ ساعت نسبت به پرداخت اقدام کنید؛ در غیر این صورت سفارش به‌صورت خودکار لغو خواهد شد.</p>
                 </div>
-            </div>
+              )}
 
-            <div className='p-4 border-t border-border bg-container'>
-                <div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
-                    <Button
-                        className='dark:bg-white dark:text-black! dark:hover:bg-gray-100'
-                        onClick={() => router.push(`/${name}`)}
-                        type='button'>
-                        بازگشت به منو
-                    </Button>
-                    <Button
-                        type='submit'
-                        onClick={toggleCancelModal}
-                        className='bg-disabled! text-foreground!'
-                        disabled={
-                            orderDetail?.data?.status === 'cancelled' ||
-                            orderDetail?.data?.status === 'delivered' ||
-                            orderDetail?.data?.status === 'delivering'
-                        }
-                    >
-                        لغو سفارش
-                    </Button>
+              <h1 className="text-lg font-semibold text-center">{getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}</h1>
+
+              <div className="flex flex-col">
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground flex items-center gap-2">
+                    <Clock className="stroke-current" size={16} />
+                    زمان سفارش
+                  </span>
+                  <div className="flex  items-end gap-0.5">
+                    <span className="text-sm font-semibold">{formatDate(orderDetail.data.createdAt)}</span>
+                    {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
+                  </div>
+                </div>
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">نوع ارسال</span>
+                  <span className="text-sm font-semibold">{orderDetail.data?.deliveryMethod?.description}</span>
+                </div>
+                {orderDetail.data.carAddress && (
+                  <div className="flex justify-between items-center h-16 border-b border-border">
+                    <div className="text-sm text-muted-foreground mb-1">اطلاعات خودرو</div>
+                    <div className="text-sm font-semibold">
+                      {orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
+                    </div>
+                  </div>
+                )}
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">شماره سفارش</span>
+                  <span className="text-sm font-semibold">#{orderDetail.data.orderNumber}</span>
+                </div>
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">وضعیت سفارش</span>
+                  <span className="text-sm font-semibold">{getStatusText(orderDetail.data.status)}</span>
                 </div>
-            </div>
 
-            <div className={clsx(
-                'fixed inset-0 z-1001',
-                !cancelModal && 'pointer-events-none'
-            )}>
-                <Prompt
-                    title={'لغو سفارش'}
-                    description={'آیا از درخواست خود اطمینان دارید؟'}
-                    textConfirm={'بله'}
-                    textCancel={'منصرف شدم'}
-                    onConfirm={onCancelOrder}
-                    visible={cancelModal}
-                    onClick={toggleCancelModal}
-                    onCancel={toggleCancelModal}
-                />
-            </div>
+                {orderDetail.data.tableNumber && (
+                  <div className="flex justify-between items-center h-16 border-b border-border">
+                    <span className="text-sm text-muted-foreground">شماره میز</span>
+                    <span className="text-sm font-semibold">#{orderDetail.data.tableNumber}</span>
+                  </div>
+                )}
+
+                {orderDetail.data.userAddress && (
+                  <div className="py-3 border-b border-border">
+                    <div className="text-sm text-muted-foreground mb-1">آدرس تحویل</div>
+                    <div className="text-sm">{orderDetail.data.userAddress.address}</div>
+                  </div>
+                )}
+
+                {orderDetail.data.items?.length > 0 && (
+                  <div className="py-4 mt-7 border-b border-border">
+                    <div className="text-sm font-medium mb-4">اقلام سفارش</div>
+                    <div className="flex flex-col gap-4">
+                      {orderDetail.data.items.map((item) => {
+                        const product = orderItemToProduct(item);
+                        const needsConfirmation = isVariablePricing(product) || product.needAdminAcceptance;
+
+                        return (
+                          <MenuItemRenderer key={item.id}>
+                            <MenuItem
+                              product={product}
+                              variantId={item.variant.id}
+                              variantValue={item.variant.value}
+                              readOnly
+                              displayQuantity={item.quantity}
+                              badge={
+                                needsConfirmation ? (
+                                  item.status === "confirmed" ? (
+                                    <span className="inline-block rounded-lg bg-green-50 dark:bg-green-950/40 px-3 py-1.5 text-xs text-green-600 dark:text-green-400">
+                                      {ordersTranslations.itemStatus.confirmed}
+                                    </span>
+                                  ) : (
+                                    <span className="inline-block rounded-lg bg-orange-50 dark:bg-orange-950/40 px-3 py-1.5 text-xs text-orange-600 dark:text-orange-400">
+                                      {ordersTranslations.itemStatus.needConfirmation}
+                                    </span>
+                                  )
+                                ) : undefined
+                              }
+                            />
+                          </MenuItemRenderer>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex justify-between items-center py-4 border-t border-border">
+                  <span className="text-sm font-medium">مجموع سفارش</span>
+                  <span className="text-sm font-bold ">{orderDetail.data.total.toLocaleString("fa-IR")} تومان</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="text-center text-muted-foreground py-12">اطلاعات سفارش یافت نشد</div>
+          )}
         </div>
-    );
+      </div>
+
+      <div className="p-4 border-t border-border bg-container">
+        <div className="max-w-2xl mx-auto grid grid-cols-2 gap-4">
+          <Button className="bg-disabled! text-foreground!" onClick={() => router.push(`/${name}`)} type="button">
+            بازگشت به منو
+          </Button>
+          {showPayButton ? (
+            <Button
+              type="button"
+              onClick={onPayOrder}
+              disabled={isPayDisabled}
+              pending={isPaying}
+            >
+              پرداخت
+            </Button>
+          ) : (
+            <Button
+              type="submit"
+              onClick={toggleCancelModal}
+              className="bg-disabled! text-foreground!"
+              disabled={orderDetail?.data?.status === "cancelled" || orderDetail?.data?.status === "delivered" || orderDetail?.data?.status === "delivering"}
+            >
+              لغو سفارش
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className={clsx("fixed inset-0 z-1001", !cancelModal && "pointer-events-none")}>
+        <Prompt
+          title={"لغو سفارش"}
+          description={"آیا از درخواست خود اطمینان دارید؟"}
+          textConfirm={"بله"}
+          textCancel={"منصرف شدم"}
+          onConfirm={onCancelOrder}
+          visible={cancelModal}
+          onClick={toggleCancelModal}
+          onCancel={toggleCancelModal}
+        />
+      </div>
+    </div>
+  );
 }
 
 export default OrderTrackingPage;

src/app/[name]/(Main)/[id]/page.tsx

@@ -1,270 +1,348 @@
-'use client'
+"use client";
 
-import { CartQuantityControl } from '@/components/CartQuantityControl'
-import { ef } from '@/lib/helpers/utfNumbers'
-import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
-import { getPrimaryVariantId } from '@/app/[name]/(Main)/types/Types'
-import { ArrowLeft, Cup, Heart, TruckTick } from 'iconsax-react'
-import Image from 'next/image'
-import { useParams, useRouter } from 'next/navigation'
-import React, { useEffect, useMemo, useState } from 'react'
-import { useGetProduct, useToggleFavorite } from './hooks/useProductData'
-import { useGetAbout } from '../about/hooks/useAboutData'
-import { useGetProfile } from '../../(Profile)/profile/hooks/userProfileData'
-import { toast } from '@/components/Toast'
-import { getToken } from '@/lib/api/func'
+import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
+import { getPrimaryVariantId, getPurchaseUnitLabel, getVariableQuantityRange, isVariablePricing } from "@/app/[name]/(Main)/types/Types";
+import { CartQuantityControl } from "@/components/CartQuantityControl";
+import PlusIcon from "@/components/icons/PlusIcon";
+import { VariableWeightSlider } from "@/components/product/VariableWeightSlider";
+import { toast } from "@/components/Toast";
+import { getToken } from "@/lib/api/func";
+import { ef } from "@/lib/helpers/utfNumbers";
+import { ArrowLeft, Cup, Heart, TruckTick } from "iconsax-react";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useGetProfile } from "../../(Profile)/profile/hooks/userProfileData";
+import { useGetAbout } from "../about/hooks/useAboutData";
+import { useGetProduct, useToggleFavorite } from "./hooks/useProductData";
 
-type Props = object
+type Props = object;
 
-function ProductPage({ }: Props) {
+function ProductPage({}: Props) {
+  const { id, name } = useParams();
+  const router = useRouter();
+  const { isSuccess } = useGetProfile();
+  const { data: product, isLoading } = useGetProduct(id as string);
+  const { data: about } = useGetAbout();
+  const { items, addToCart, removeFromCart, setCartQuantity, isCartMutating } = useCart();
+  const [isFavorite, setIsFavorite] = useState<boolean>(false);
+  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
+  const [selectedWeight, setSelectedWeight] = useState<number>(1);
+  const isUserInteractingRef = useRef(false);
+  const cartSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingCartWeightRef = useRef<number | null>(null);
+  const { mutate: toggleFavorite } = useToggleFavorite();
 
-    const { id, name } = useParams();
-    const router = useRouter();
-    const { isSuccess } = useGetProfile();
-    const { data: product, isLoading } = useGetProduct(id as string);
-    const { data: about } = useGetAbout();
-    const { items, addToCart, removeFromCart, isCartMutating } = useCart();
-    const [isFavorite, setIsFavorite] = useState<boolean>(false);
-    const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
-    const { mutate: toggleFavorite } = useToggleFavorite();
+  const productId = product?.data?.id || (id as string);
+  const cartId = useMemo(() => {
+    if (!product?.data) return null;
+    return selectedVariantId ?? getPrimaryVariantId(product.data) ?? productId;
+  }, [product?.data, selectedVariantId, productId]);
+  const quantity = useMemo(() => {
+    if (!cartId) return 0;
+    const item = items?.[cartId] ?? items?.[String(cartId)];
+    if (item && typeof item === "object" && "quantity" in item) {
+      return item.quantity || 0;
+    }
+    return 0;
+  }, [items, cartId]);
 
-    const productId = product?.data?.id || id as string;
-    const cartId = useMemo(() => {
-        if (!product?.data) return null;
-        return selectedVariantId ?? getPrimaryVariantId(product.data) ?? productId;
-    }, [product?.data, selectedVariantId, productId]);
-    const quantity = useMemo(() => {
-        if (!cartId) return 0;
-        const item = items?.[cartId] ?? items?.[String(cartId)];
-        if (item && typeof item === 'object' && 'quantity' in item) {
-            return item.quantity || 0;
-        }
-        return 0;
-    }, [items, cartId]);
+  const handleAddToCart = () => {
+    if (cartId) {
+      addToCart(cartId);
+    }
+  };
 
-    const handleAddToCart = () => {
-        if (cartId) {
-            addToCart(cartId);
-        }
-    };
+  const handleAddVariableToCart = () => {
+    if (!cartId) return;
+    if (cartSyncTimerRef.current) {
+      clearTimeout(cartSyncTimerRef.current);
+      cartSyncTimerRef.current = null;
+    }
+    pendingCartWeightRef.current = null;
+    isUserInteractingRef.current = false;
+    setCartQuantity(cartId, selectedWeight);
+  };
 
-    const handleRemoveFromCart = () => {
-        if (cartId) {
-            removeFromCart(cartId);
-        }
-    };
+  const clearCartSyncTimer = useCallback(() => {
+    if (cartSyncTimerRef.current) {
+      clearTimeout(cartSyncTimerRef.current);
+      cartSyncTimerRef.current = null;
+    }
+  }, []);
 
-    const handleToggleFavorite = async () => {
-        if (!productId) return;
+  const handleVariableWeightChange = useCallback(
+    (weight: number) => {
+      isUserInteractingRef.current = true;
+      setSelectedWeight(weight);
+      clearCartSyncTimer();
+      pendingCartWeightRef.current = null;
+    },
+    [clearCartSyncTimer],
+  );
 
-        const token = await getToken();
-        if (!token || !isSuccess) {
-            toast('ابتدا لاگین کنید', 'error');
-            return;
+  const handleVariableWeightCommit = useCallback(
+    (weight: number) => {
+      if (!isSuccess || !cartId || quantity <= 0) {
+        isUserInteractingRef.current = false;
+        return;
+      }
+
+      pendingCartWeightRef.current = weight;
+      clearCartSyncTimer();
+
+      cartSyncTimerRef.current = setTimeout(() => {
+        cartSyncTimerRef.current = null;
+        const pendingWeight = pendingCartWeightRef.current;
+        pendingCartWeightRef.current = null;
+
+        if (pendingWeight == null || !cartId) {
+          isUserInteractingRef.current = false;
+          return;
         }
 
-        // به‌روزرسانی خوش‌بینانه: تغییر state قبل از ارسال درخواست
-        const previousFavorite = isFavorite;
-        setIsFavorite(!isFavorite);
+        const currentItem = items?.[cartId] ?? items?.[String(cartId)];
+        const currentQty = currentItem && typeof currentItem === "object" && "quantity" in currentItem ? currentItem.quantity : 0;
 
-        toggleFavorite(productId, {
-            onSuccess: () => {
-                // تایید تغییر در صورت موفقیت
-            },
-            onError: () => {
-                // بازگرداندن به حالت قبلی در صورت خطا
-                setIsFavorite(previousFavorite);
-                toast('خطا در تغییر وضعیت علاقه‌مندی', 'error');
-            },
-        });
-    };
-
-    useEffect(() => {
-        const typed = product as unknown as { data?: { isFavorite?: boolean } };
-        const isFav = Boolean(typed?.data?.isFavorite);
-        setIsFavorite(isFav);
-    }, [product]);
-
-    useEffect(() => {
-        if (!product?.data) return;
-        const variants = product.data.variants ?? [];
-        if (!variants.length) {
-            setSelectedVariantId(product.data.id);
-            return;
+        if (Math.abs(pendingWeight - currentQty) > 0.0001) {
+          setCartQuantity(cartId, pendingWeight);
         }
-        setSelectedVariantId((prev) => prev ?? variants[0].id);
-    }, [product?.data]);
+        isUserInteractingRef.current = false;
+      }, 1000);
+    },
+    [isSuccess, cartId, quantity, clearCartSyncTimer, items, setCartQuantity],
+  );
 
-    if (isLoading) {
-        return (
-            <div className='flex items-center justify-center min-h-[400px]'>
-                <p className='text-disabled-text'>در حال بارگذاری...</p>
-            </div>
-        );
+  const handleRemoveFromCart = () => {
+    if (cartId) {
+      removeFromCart(cartId);
+    }
+  };
+
+  const handleToggleFavorite = async () => {
+    if (!productId) return;
+
+    const token = await getToken();
+    if (!token || !isSuccess) {
+      toast("ابتدا لاگین کنید", "error");
+      return;
     }
 
-    if (!product?.data) {
-        return (
-            <div className='flex items-center justify-center min-h-[400px]'>
-                <p className='text-disabled-text'>کالا یافت نشد</p>
-            </div>
-        );
+    // به‌روزرسانی خوش‌بینانه: تغییر state قبل از ارسال درخواست
+    const previousFavorite = isFavorite;
+    setIsFavorite(!isFavorite);
+
+    toggleFavorite(productId, {
+      onSuccess: () => {
+        // تایید تغییر در صورت موفقیت
+      },
+      onError: () => {
+        // بازگرداندن به حالت قبلی در صورت خطا
+        setIsFavorite(previousFavorite);
+        toast("خطا در تغییر وضعیت علاقه‌مندی", "error");
+      },
+    });
+  };
+
+  useEffect(() => {
+    const typed = product as unknown as { data?: { isFavorite?: boolean } };
+    const isFav = Boolean(typed?.data?.isFavorite);
+    setIsFavorite(isFav);
+  }, [product]);
+
+  useEffect(() => {
+    if (!product?.data) return;
+    const variants = product.data.variants ?? [];
+    if (!variants.length) {
+      setSelectedVariantId(product.data.id);
+      return;
     }
+    setSelectedVariantId((prev) => prev ?? variants[0].id);
+  }, [product?.data]);
 
-    const productData = product.data;
-    const productName = productData.title || productData.name || '';
-    const productImage = typeof productData.image === 'string'
-        ? productData.image
-        : Array.isArray(productData.images) && productData.images.length > 0
-            ? typeof productData.images[0] === 'string'
-                ? productData.images[0]
-                : typeof productData.images[0] === 'object' && productData.images[0] !== null && 'url' in productData.images[0]
-                    ? (productData.images[0] as { url: string }).url
-                    : '/assets/images/no-image.png'
-            : '/assets/images/no-image.png';
-    const categoryName = productData.category?.title;
-    const variants = productData.variants ?? [];
-    const hasVariants = Boolean(productData.attribute?.trim());
-    const selectedVariant = selectedVariantId
-        ? variants.find((v) => v.id === selectedVariantId) ?? variants[0]
-        : variants[0];
-    const price = hasVariants
-        ? (selectedVariant?.price ?? 0)
-        : (productData.price ?? selectedVariant?.price ?? 0);
-    // const prepareTime = productData.prepareTime || 0;
-    const content = Array.isArray(productData.content)
-        ? productData.content.join('، ')
-        : productData.content || productData.desc || '';
+  useEffect(() => {
+    if (!product?.data || !isVariablePricing(product.data) || !cartId) return;
+    if (isUserInteractingRef.current) return;
 
-    const handleBackToMenu = () => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const categoryParam = urlParams.get('category') || productData.category?.id;
-        if (categoryParam) {
-            router.push(`/${name}?category=${categoryParam}`);
-        } else {
-            router.push(`/${name}`);
-        }
-    };
+    const { min } = getVariableQuantityRange(product.data);
+    const targetWeight = quantity > 0 ? quantity : min;
+    setSelectedWeight((prev) => (Math.abs(prev - targetWeight) < 0.0001 ? prev : targetWeight));
+  }, [product?.data, cartId, quantity]);
 
+  useEffect(
+    () => () => {
+      clearCartSyncTimer();
+    },
+    [clearCartSyncTimer],
+  );
+
+  if (isLoading) {
     return (
-        <div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10'>
-            <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
-                <Image
-                    className='w-full object-cover bg-[#F2F2F9] h-full'
-                    src={productImage}
-                    alt={productName}
-                    height={100}
-                    width={100}
-                    unoptimized
-                    priority
-                />
-                <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
-                    <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
-                        {categoryName || '-'}
-                    </div>
-                    <button onClick={handleBackToMenu} className='p-2 rounded-full bg-container/40'>
-                        <ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
-                    </button>
-                </div>
-            </div>
+      <div className="flex items-center justify-center min-h-100">
+        <p className="text-disabled-text">در حال بارگذاری...</p>
+      </div>
+    );
+  }
 
-            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
-                <div className="w-full inline-flex justify-between items-center">
-                    <h5 className="text-base font-bold">
-                        {productName}
-                    </h5>
-                    <button
-                        onClick={handleToggleFavorite}
-                        className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'
-                    >
-                        <Heart
-                            variant={isFavorite ? 'Bold' : 'Outline'}
-                            size={24}
-                            color='currentColor'
-                            className={isFavorite ? 'fill-primary dark:fill-foreground' : ''}
-                        />
-                    </button>
-                </div>
+  if (!product?.data) {
+    return (
+      <div className="flex items-center justify-center min-h-100">
+        <p className="text-disabled-text">کالا یافت نشد</p>
+      </div>
+    );
+  }
 
-                <div className="mt-4 text-xs">
-                    {/* <div className='flex items-center gap-1'>
+  const productData = product.data;
+  const productName = productData.title || productData.name || "";
+  const productImage =
+    typeof productData.image === "string"
+      ? productData.image
+      : Array.isArray(productData.images) && productData.images.length > 0
+        ? typeof productData.images[0] === "string"
+          ? productData.images[0]
+          : typeof productData.images[0] === "object" && productData.images[0] !== null && "url" in productData.images[0]
+            ? (productData.images[0] as { url: string }).url
+            : "/assets/images/no-image.png"
+        : "/assets/images/no-image.png";
+  const categoryName = productData.category?.title;
+  const variants = productData.variants ?? [];
+  const hasVariants = Boolean(productData.attribute?.trim());
+  const selectedVariant = selectedVariantId ? (variants.find((v) => v.id === selectedVariantId) ?? variants[0]) : variants[0];
+  const price = hasVariants ? (selectedVariant?.price ?? 0) : (productData.price ?? selectedVariant?.price ?? 0);
+  const isVariable = isVariablePricing(productData);
+  const weightRange = isVariable ? getVariableQuantityRange(productData) : null;
+  const unitPriceLabel = isVariable ? getPurchaseUnitLabel(productData.purchaseUnit) : "";
+  const calculatedPrice = isVariable ? Math.round(price * selectedWeight) : price;
+  // const prepareTime = productData.prepareTime || 0;
+  const content = Array.isArray(productData.content) ? productData.content.join("، ") : productData.content || productData.desc || "";
+
+  const handleBackToMenu = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const categoryParam = urlParams.get("category") || productData.category?.id;
+    if (categoryParam) {
+      router.push(`/${name}?category=${categoryParam}`);
+    } else {
+      router.push(`/${name}`);
+    }
+  };
+
+  return (
+    <div
+      className={`lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-71.25 lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10`}
+    >
+      <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
+        <Image className="w-full object-cover bg-[#F2F2F9] h-full" src={productImage} alt={productName} height={100} width={100} unoptimized priority />
+        <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
+          <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">{categoryName || "-"}</div>
+          <button onClick={handleBackToMenu} className="p-2 rounded-full bg-container/40">
+            <ArrowLeft size={18} className="stroke-primary dark:stroke-foreground" />
+          </button>
+        </div>
+      </div>
+
+      <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
+        <div className="w-full inline-flex justify-between items-center">
+          <h5 className="text-base font-bold">{productName}</h5>
+          <button onClick={handleToggleFavorite} className="p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg">
+            <Heart variant={isFavorite ? "Bold" : "Outline"} size={24} color="currentColor" className={isFavorite ? "fill-primary dark:fill-foreground" : ""} />
+          </button>
+        </div>
+
+        <div className="mt-4 text-xs">
+          {/* <div className='flex items-center gap-1'>
                         <Clock size={14} className='stroke-disabled-text' />
                         <span className='text-disabled-text'>
                             زمان پخت و آماده سازی: {prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : '-'}
                         </span>
                     </div> */}
-                    <div className='flex items-center gap-2 mt-2'>
-                        <Cup size={14} className='stroke-disabled-text' />
-                        <span className='text-disabled-text flex gap-1'>
-                            {about?.data?.plan === 'base' ? (
-                                <>
-                                    <div>۰</div>
-                                    <span>امتیاز برای هر بار خرید</span>
-                                </>
-                            ) : about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
-                                <>
-                                    <div>
-                                        {ef(
-                                            Math.round(
-                                                price *
-                                                (Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))
-                                            ).toLocaleString('en-US')
-                                        )}
-                                    </div>
-                                    <span>امتیاز برای هر بار خرید</span>
-                                </>
-                            ) : (
-                                <span>-</span>
-                            )}
-                        </span>
-                    </div>
-                    <div className='flex items-center gap-2 mt-2'>
-                        <TruckTick size={14} className='stroke-disabled-text' />
-                        <span className='text-disabled-text'>
-                            {productData.pickupServe ? 'ارسال با پیک' : '-'}
-                        </span>
-                    </div>
-                </div>
-
-                <div className="mt-7 text-xs">
-                    <p className='font-bold'>محتویات:</p>
-                    <p className='mt-2 leading-6'>{content || '-'}</p>
-                </div>
-
-                {hasVariants && variants.length > 0 && (
-                    <div className='mt-6 text-xs'>
-                        <p className='font-bold'>{productData.attribute}</p>
-                        <div className='flex flex-wrap gap-2 mt-2'>
-                            {variants.map((variant) => (
-                                <button
-                                    key={variant.id}
-                                    type="button"
-                                    onClick={() => setSelectedVariantId(variant.id)}
-                                    className={`px-3 py-1 rounded-full border text-xs ${variant.id === selectedVariant?.id
-                                        ? 'bg-primary text-white border-primary'
-                                        : 'bg-background text-foreground border-border'
-                                        }`}
-                                >
-                                    {variant.value}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                <div className='mt-12 flex justify-between items-center'>
-                    <span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
-                    <CartQuantityControl
-                        quantity={quantity}
-                        onAdd={handleAddToCart}
-                        onRemove={handleRemoveFromCart}
-                        isMutating={isCartMutating}
-                        addDisabled={!cartId}
-                    />
-                </div>
-            </div>
+          <div className="flex items-center gap-2 mt-2">
+            <Cup size={14} className="stroke-disabled-text" />
+            <span className="text-disabled-text flex gap-1">
+              {about?.data?.plan === "base" ? (
+                <>
+                  <div>۰</div>
+                  <span>امتیاز برای هر بار خرید</span>
+                </>
+              ) : about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
+                <>
+                  <div>{ef(Math.round(price * (Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))).toLocaleString("en-US"))}</div>
+                  <span>امتیاز برای هر بار خرید</span>
+                </>
+              ) : (
+                <span>-</span>
+              )}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <TruckTick size={14} className="stroke-disabled-text" />
+            <span className="text-disabled-text">{productData.pickupServe ? "ارسال با پیک" : "-"}</span>
+          </div>
         </div>
-    )
+
+        <div className="mt-7 text-xs">
+          <p className="font-bold">محتویات:</p>
+          <p className="mt-2 leading-6">{content || "-"}</p>
+        </div>
+
+        {hasVariants && variants.length > 0 && (
+          <div className="mt-6 text-xs">
+            <p className="font-bold">{productData.attribute}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+              {variants.map((variant) => (
+                <button
+                  key={variant.id}
+                  type="button"
+                  onClick={() => setSelectedVariantId(variant.id)}
+                  className={`px-3 py-1 rounded-full border text-xs ${variant.id === selectedVariant?.id ? "bg-primary text-white border-primary" : "bg-background text-foreground border-border"}`}
+                >
+                  {variant.value}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {isVariable && weightRange ? (
+          <div className="mt-8">
+            <p className="text-sm font-bold">
+              قیمت هر {unitPriceLabel} <span dir="ltr">T {ef(price.toLocaleString("en-US"))}</span>
+            </p>
+
+            <VariableWeightSlider
+              className="mt-10 mb-8"
+              value={selectedWeight}
+              min={weightRange.min}
+              max={weightRange.max}
+              step={weightRange.pitch}
+              purchaseUnit={productData.purchaseUnit}
+              onChange={handleVariableWeightChange}
+              onCommit={handleVariableWeightCommit}
+            />
+
+            <div className="flex items-center gap-3">
+              <div dir="ltr" className="flex-1 rounded-xl bg-[#EAECF0] dark:bg-neutral-700 px-4 py-3.5 text-sm font-semibold text-center">
+                {ef(calculatedPrice.toLocaleString("en-US"))} T
+              </div>
+              <button
+                type="button"
+                onClick={handleAddVariableToCart}
+                disabled={isCartMutating || !cartId}
+                className="flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-black text-white px-4 py-3.5 text-sm font-semibold disabled:opacity-60 disabled:cursor-not-allowed"
+              >
+                {isCartMutating ? <span className="size-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <PlusIcon className="text-white" />}
+                <span>{quantity > 0 ? "بروزرسانی" : "افزودن"}</span>
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-12 flex justify-between items-center">
+            <span dir="ltr">{ef(price.toLocaleString("en-US"))} T</span>
+            <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} addDisabled={!cartId} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
 
-export default ProductPage
+export default ProductPage;

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -13,6 +13,7 @@ import Image from 'next/image';
 import React from 'react'
 import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
 import AboutSkeleton from './components/AboutSkeleton';
+import { glassSurfaceCard, glassSurfaceCardFlat, glassSurfaceFlat } from '@/lib/styles/glassSurface';
 
 const sortings = [
   'جدیدترین',
@@ -81,7 +82,7 @@ function AboutPage() {
     return (
       <section aria-labelledby="about-title" className='py-4'>
         <section
-          className="bg-container rounded-container shadow-container p-4">
+          className={glassSurfaceCard('p-4')}>
           <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
             <div className="">
               <h2 className='text-sm2 font-bold leading-5'>{shop.name}</h2>
@@ -123,7 +124,7 @@ function AboutPage() {
 
         {(shop.phone || shop.telegram || shop.whatsapp || shop.instagram) && (
           <section
-            className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+            className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
             <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
             <div className='col-span-1 text-center flex justify-center gap-4'>
               {shop.phone &&
@@ -151,7 +152,7 @@ function AboutPage() {
         )}
 
         {shop.address && (
-          <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+          <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
             <h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
             <p className='text-sm2 mt-[9px] leading-5'>{shop.address}</p>
             {shop.latitude && shop.longitude && (
@@ -166,7 +167,7 @@ function AboutPage() {
         {schedules.length > 0 && getTodaySchedule() && (
           <section
             aria-label='ساعات کاری'
-            className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+            className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
             <div className="flex items-center gap-2 justify-start">
               <Clock size={16} className='stroke-disabled-text' />
               <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
@@ -254,7 +255,7 @@ function AboutPage() {
       <section aria-labelledby="reviews-title" className='py-4'>
         <section
           aria-label='امتیاز کاربران'
-          className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+          className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
           <div className="text-center font-bold text-5xl">
             {averageRating.toFixed(1)}
           </div>
@@ -267,10 +268,10 @@ function AboutPage() {
           </div>
         </section>
 
-        <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+        <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
           <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
             <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
               <EqualizerIcon className='dark:text-white' />
               <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
             </button>

src/app/[name]/(Main)/about/components/AboutSkeleton.tsx

@@ -3,13 +3,13 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import TabContainer from "@/components/tab/TabContainer";
 import { TabHeader } from "@/components/tab/TabHeader";
+import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';
 import { InfoCircle, Star1 } from 'iconsax-react';
 
 const AboutSkeleton = () => {
   const firstTabSkeleton = () => (
     <section className='py-4'>
-      {/* اطلاعات فروشگاه */}
-      <section className="bg-container rounded-container shadow-container p-4">
+      <section className={glassSurfaceCard('p-4')}>
         <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
           <div className="flex-1">
             <Skeleton className="h-6 w-32 rounded-md mb-4" />
@@ -30,8 +30,7 @@ const AboutSkeleton = () => {
         </div>
       </section>
 
-      {/* ارتباط */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
         <Skeleton className="h-5 w-16 rounded-md" />
         <div className='col-span-1 text-center flex justify-center gap-4'>
           {[...Array(3)].map((_, index) => (
@@ -40,8 +39,7 @@ const AboutSkeleton = () => {
         </div>
       </section>
 
-      {/* آدرس */}
-      <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+      <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
         <Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
         <Skeleton className="h-4 w-full rounded-md mb-2" />
         <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
@@ -51,8 +49,7 @@ const AboutSkeleton = () => {
         </div>
       </section>
 
-      {/* ساعات کاری امروز */}
-      <section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+      <section className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
         <div className="flex items-center gap-2">
           <Skeleton className="w-4 h-4 rounded-full" />
           <Skeleton className="h-5 w-8 rounded-md" />
@@ -62,11 +59,10 @@ const AboutSkeleton = () => {
         <Skeleton className="w-4 h-4 rounded-md" />
       </section>
 
-      {/* ساعات کاری هفته */}
       {[...Array(3)].map((_, index) => (
         <div
           key={index}
-          className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+          className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
           <Skeleton className="h-5 w-20 rounded-md" />
           <Skeleton className="h-5 w-24 rounded-md" />
         </div>
@@ -76,8 +72,7 @@ const AboutSkeleton = () => {
 
   const secondTabSkeleton = () => (
     <section className='py-4'>
-      {/* امتیاز کاربران */}
-      <section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+      <section className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
         <Skeleton className="h-16 w-20 rounded-md mx-auto" />
         <div className="flex flex-col w-fit items-end gap-1">
           {[...Array(5)].map((_, index) => (
@@ -86,8 +81,7 @@ const AboutSkeleton = () => {
         </div>
       </section>
 
-      {/* نظرات کاربران */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
         <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
           <Skeleton className="h-5 w-24 rounded-md" />
           <Skeleton className="h-8 w-28 rounded-xl" />
@@ -130,4 +124,3 @@ const AboutSkeleton = () => {
 };
 
 export default AboutSkeleton;
-

src/app/[name]/(Main)/about/hooks/useAboutData.ts

@@ -1,21 +1,43 @@
 import { useQuery } from "@tanstack/react-query";
-import * as api from "../service/AboutService";
 import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import * as api from "../service/AboutService";
+import {
+  getPersistedAboutData,
+  setPersistedAboutData,
+} from "@/lib/helpers/themeCache";
 
 export const useGetAbout = () => {
   const { name } = useParams<{ name: string }>();
-  return useQuery({
-    queryKey: ["about"],
-    queryFn: () => api.getAbout(name),
+  const query = useQuery({
+    queryKey: ["about", name],
+    queryFn: async () => {
+      const data = await api.getAbout(name);
+      setPersistedAboutData(name, data);
+      return data;
+    },
     enabled: !!name,
     retry: false,
+    staleTime: 60 * 60_000,
+    gcTime: 24 * 60 * 60_000,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: false,
+    placeholderData: () => (name ? getPersistedAboutData(name) : undefined),
   });
+
+  useEffect(() => {
+    if (name && query.data) {
+      setPersistedAboutData(name, query.data);
+    }
+  }, [name, query.data]);
+
+  return query;
 };
 
 export const useGetReviews = () => {
   const { name } = useParams<{ name: string }>();
   return useQuery({
-    queryKey: ["reviews"],
+    queryKey: ["reviews", name],
     queryFn: () => api.getReviews(name),
     enabled: !!name,
     retry: false,
@@ -25,7 +47,7 @@ export const useGetReviews = () => {
 export const useGetSchedules = () => {
   const { name } = useParams<{ name: string }>();
   return useQuery({
-    queryKey: ["schedules"],
+    queryKey: ["schedules", name],
     queryFn: () => api.getSchedules(name),
     enabled: !!name,
     retry: false,

src/app/[name]/(Main)/about/types/Types.ts

@@ -26,6 +26,11 @@ export interface Shop {
   logo: string | null;
   address: string | null;
   menuColor: string | null;
+  bgType?: "pattern" | "custom" | "color";
+  bgBlur?: number;
+  bgOpacity?: number;
+  bgOverlay?: string;
+  bgUrl?: string;
   latitude: number | null;
   longitude: number | null;
   serviceArea: ServiceArea;

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -1,11 +1,61 @@
-'use client';
+"use client";
 
-import Image from "next/image";
-import clsx from "clsx";
-import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import { Category } from "@/app/[name]/(Main)/types/Types";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
-import { Category } from "@/app/[name]/(Main)/types/Types";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import { GLASS_SURFACE_DISABLED, GLASS_SURFACE_SELECTED } from "@/lib/styles/glassSurface";
+import clsx from "clsx";
+import { usePathname } from "next/navigation";
+
+/** TODO: remove when backend sends avatarRenderMode */
+const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);
+
+const SVG_MASK_STYLE = {
+  maskSize: "contain",
+  maskRepeat: "no-repeat",
+  maskPosition: "center",
+  WebkitMaskSize: "contain",
+  WebkitMaskRepeat: "no-repeat",
+  WebkitMaskPosition: "center",
+} as const;
+
+function CategoryImage({ src, size, alt, tintWithPrimary = true, disabled = false }: { src: string; size: number; alt: string; tintWithPrimary?: boolean; disabled?: boolean }) {
+  const isSvg = src.endsWith(".svg");
+  const shouldUseSvgMask = isSvg && tintWithPrimary;
+
+  if (shouldUseSvgMask) {
+    return (
+      <div
+        className={clsx("shrink-0 bg-primary", disabled && "opacity-40")}
+        style={{
+          width: size,
+          height: size,
+          maskImage: `url(${src})`,
+          WebkitMaskImage: `url(${src})`,
+          ...SVG_MASK_STYLE,
+        }}
+        role="img"
+        aria-label={alt}
+      />
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      width={size}
+      height={size}
+      alt={alt}
+      loading="lazy"
+      className={clsx("shrink-0 object-contain", disabled && "opacity-40")}
+      onError={(event) => {
+        event.currentTarget.src = "/assets/images/food-image.png";
+      }}
+    />
+  );
+}
 
 type Variant = "large" | "small";
 
@@ -34,17 +84,11 @@ type Props = {
   className?: string;
 };
 
-const CategoryScroll = ({
-  categories,
-  selectedCategory,
-  onSelect,
-  variant = "large",
-  className,
-}: Props) => {
+const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
+  const segment = usePathname()?.split("/").filter(Boolean)[0];
+  const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
   const { renderer: Renderer, imageSize } = variantConfig[variant];
-  const selectedParent =
-    categories.find((c) => c.id === selectedCategory) ??
-    categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
+  const selectedParent = categories.find((c) => c.id === selectedCategory) ?? categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
   const children = selectedParent?.children ?? [];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
@@ -53,51 +97,32 @@ const CategoryScroll = ({
     <div className="flex flex-col">
       <HorizontalScrollView
         className={clsx(
-          "w-full noscrollbar pt-4! pb-1!",
-          variant === "large" && "mt-4!",
-          className
+          "w-full noscrollbar",
+          children.length > 0 ? "pt-4! pb-1!" : "py-4!",
+          // variant === "large" && "mt-4!",
+          className,
         )}
       >
         {categories.map((item) => {
-          const isSelected =
-            item.id === selectedCategory ||
-            item.children?.some((ch) => ch.id === selectedCategory);
+          const isSelected = item.id === selectedCategory || item.children?.some((ch) => ch.id === selectedCategory);
 
           return (
-            <Renderer
-              key={item.id}
-              className={clsx(isSelected && "bg-container!")}
-              onClick={handleSelect(item.id)}
-            >
-              <Image
-                priority
-                src={item.avatarUrl || "/assets/images/food-image.png"}
-                width={imageSize}
-                height={imageSize}
-                alt="category image"
-              />
-              <span className="text-xs text-foreground text-center">{item.title}</span>
+            <Renderer key={item.id} className={clsx(!isSelected && GLASS_SURFACE_DISABLED, isSelected && GLASS_SURFACE_SELECTED)} onClick={handleSelect(item.id)}>
+              <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} disabled={!item.isActive} />
+              <span className={clsx("text-xs text-foreground text-center", !item.isActive && "text-disabled-text")}>{item.title}</span>
             </Renderer>
           );
         })}
       </HorizontalScrollView>
 
       {children.length > 0 && (
-        <HorizontalScrollView
-          className={clsx(
-            "w-full noscrollbar py-2!",
-            variant === "small" && "py-1!"
-          )}
-        >
+        <HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "small" && "py-1!")}>
           {children.map((child) => {
             const isChildSelected = child.id === selectedCategory;
 
             return (
-              <CategorySmallItemRenderer
-                key={child.id}
-                className={clsx(isChildSelected && "bg-container!")}
-                onClick={handleSelect(child.id)}
-              >
+              <CategorySmallItemRenderer key={child.id} compact className={clsx(isChildSelected && GLASS_SURFACE_SELECTED, !isChildSelected && GLASS_SURFACE_DISABLED)} onClick={handleSelect(child.id)}>
+                {child.avatarUrl && <CategoryImage src={child.avatarUrl} size={16} alt="category image" tintWithPrimary={!usesColoredSvg} />}
                 <span className="text-[10px] text-foreground whitespace-nowrap">{child.title}</span>
               </CategorySmallItemRenderer>
             );
@@ -109,4 +134,3 @@ const CategoryScroll = ({
 };
 
 export default CategoryScroll;
-

src/app/[name]/(Main)/components/MenuSkeleton.tsx

@@ -1,15 +1,15 @@
-'use client';
+"use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import VerticalScrollView from "@/components/listview/VerticalScrollView";
-import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import type { MenuItemViewMode } from "@/components/listview/MenuItem";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface MenuSkeletonProps {
   viewMode?: MenuItemViewMode;
 }
 
-const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
+const MenuSkeleton = ({ viewMode = "list" }: MenuSkeletonProps) => {
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8">
       <div className="w-full">
@@ -31,7 +31,7 @@ const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
         </div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
-          {viewMode === 'grid' ? (
+          {viewMode === "grid" ? (
             <div className="grid grid-cols-2 gap-3">
               {[...Array(6)].map((_, index) => (
                 <MenuItemRenderer key={index} variant="grid">
@@ -52,20 +52,18 @@ const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
           ) : (
             [...Array(6)].map((_, index) => (
               <MenuItemRenderer key={index} variant="list">
-                <div className="flex gap-4 w-full h-full items-center">
-                  <Skeleton className="min-w-28 w-28 h-28 rounded-xl" />
-                  <div className="w-full inline-flex flex-col justify-between">
+                <div className="flex gap-4 w-full min-h-28 items-stretch">
+                  <Skeleton className="min-w-28 w-28 h-28 rounded-xl shrink-0 self-center" />
+                  <div className="flex-1 flex flex-col justify-between min-w-0">
                     <div>
                       <Skeleton className="h-5 w-32 rounded-md mb-2" />
                       <Skeleton className="h-4 w-full rounded-md mb-1" />
                       <Skeleton className="h-4 w-3/4 rounded-md" />
                     </div>
-                    <div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
-                      <div className="w-full flex flex-col gap-1">
-                        <Skeleton className="h-4 w-16 rounded-md" />
-                      </div>
-                      <Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
-                    </div>
+                    <Skeleton className="h-4 w-16 rounded-md mt-2" />
+                  </div>
+                  <div className="flex flex-col justify-end shrink-0">
+                    <Skeleton className="h-8 w-20 rounded-full" />
                   </div>
                 </div>
               </MenuItemRenderer>

src/app/[name]/(Main)/hooks/useMenuData.ts

@@ -1,23 +1,56 @@
 import { useQuery } from "@tanstack/react-query";
 import * as api from "../service/MenuService";
 import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import {
+  getPersistedCategoriesData,
+  getPersistedMenuData,
+  setPersistedCategoriesData,
+  setPersistedMenuData,
+} from "@/lib/helpers/themeCache";
 
 export const useGetProducts = () => {
   const { name } = useParams<{ name: string }>();
-  return useQuery({
-    queryKey: ["menu"],
-    queryFn: () => api.getProducts(name),
+  const query = useQuery({
+    queryKey: ["menu", name],
+    queryFn: async () => {
+      const data = await api.getProducts(name);
+      setPersistedMenuData(name, data);
+      return data;
+    },
     enabled: !!name,
+    placeholderData: () => (name ? getPersistedMenuData(name) : undefined),
   });
+
+  useEffect(() => {
+    if (name && query.data) {
+      setPersistedMenuData(name, query.data);
+    }
+  }, [name, query.data]);
+
+  return query;
 };
 
 export const useGetCategories = () => {
   const { name } = useParams<{ name: string }>();
-  return useQuery({
-    queryKey: ["categories"],
-    queryFn: () => api.getCategories(name),
+  const query = useQuery({
+    queryKey: ["categories", name],
+    queryFn: async () => {
+      const data = await api.getCategories(name);
+      setPersistedCategoriesData(name, data);
+      return data;
+    },
     enabled: !!name,
+    placeholderData: () => (name ? getPersistedCategoriesData(name) : undefined),
   });
+
+  useEffect(() => {
+    if (name && query.data) {
+      setPersistedCategoriesData(name, query.data);
+    }
+  }, [name, query.data]);
+
+  return query;
 };
 
 export const useGetNotificationsCount = () => {

src/app/[name]/(Main)/page.tsx

@@ -1,21 +1,22 @@
-'use client';
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import SearchBox from "@/components/input/SearchBox";
-import TextAlignIcon from "@/components/icons/TextAlignIcon";
-import VerticalScrollView from "@/components/listview/VerticalScrollView";
-import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
-import MenuItem, { type MenuItemViewMode } from "@/components/listview/MenuItem";
-import { useQueryState } from "next-usequerystate";
-import clsx from "clsx";
-import { motion } from "framer-motion";
-import { useTranslation } from "react-i18next";
-import useToggle from "@/hooks/helpers/useToggle";
+"use client";
 import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
 import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
 import MenuSkeleton from "@/app/[name]/(Main)/components/MenuSkeleton";
-import { useGetCategories, useGetProducts } from "./hooks/useMenuData";
-import type { Product, Category } from "./types/Types";
+import TextAlignIcon from "@/components/icons/TextAlignIcon";
+import SearchBox from "@/components/input/SearchBox";
+import MenuItem, { type MenuItemViewMode } from "@/components/listview/MenuItem";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import useToggle from "@/hooks/helpers/useToggle";
+import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import clsx from "clsx";
+import { motion } from "framer-motion";
 import { RowHorizontal, RowVertical } from "iconsax-react";
+import { useQueryState } from "next-usequerystate";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useGetCategories, useGetProducts } from "./hooks/useMenuData";
+import type { Category, Product } from "./types/Types";
 
 const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
 
@@ -26,13 +27,13 @@ const MenuIndex = () => {
   const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
 
   const isLoading = productsLoading || categoriesLoading;
-  const { t: tCommon } = useTranslation('common');
-  const { t: tMenu } = useTranslation('menu', { keyPrefix: "Menu" });
+  const { t: tCommon } = useTranslation("common");
+  const { t: tMenu } = useTranslation("menu", { keyPrefix: "Menu" });
   const { state: filterSortModal, toggle: toggleFilterSortModal } = useToggle();
-  const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
-  const [search, setSearch] = useQueryState("q", { defaultValue: '' });
-  const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
-  const [filterSearch, setFilterSearch] = useQueryState('ingredients', { defaultValue: '' });
+  const [sorting, setSorting] = useQueryState("sortBy", { defaultValue: "0" });
+  const [search, setSearch] = useQueryState("q", { defaultValue: "" });
+  const [selectedCategory, setSelectedCategory] = useQueryState("category", { defaultValue: "0" });
+  const [filterSearch, setFilterSearch] = useQueryState("ingredients", { defaultValue: "" });
   const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
@@ -76,38 +77,49 @@ const MenuIndex = () => {
     const parent = wrapperRef.current.parentElement?.parentElement;
     if (!parent) return;
 
-    parent.addEventListener('scroll', onScroll);
+    parent.addEventListener("scroll", onScroll);
 
     return () => {
-      parent.removeEventListener('scroll', onScroll);
-    }
+      parent.removeEventListener("scroll", onScroll);
+    };
   }, [onScroll]);
 
+  const updateSearch = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+    },
+    [setSearch],
+  );
 
-  const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value);
-  }, [setSearch]);
-
-  const updateCategory = useCallback((categoryId: string) => {
-    setSelectedCategory(categoryId);
-  }, [setSelectedCategory]);
+  const updateCategory = useCallback(
+    (categoryId: string) => {
+      setSelectedCategory(categoryId);
+    },
+    [setSelectedCategory],
+  );
 
   const sortingIndex = Number(sorting);
   const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
 
-  const changeSorting = useCallback((index: number) => {
-    setSorting(() => String(index));
-  }, [setSorting]);
+  const changeSorting = useCallback(
+    (index: number) => {
+      setSorting(() => String(index));
+    },
+    [setSorting],
+  );
 
-  const changeFilterSearch = useCallback((value: string) => {
-    setFilterSearch(value);
-  }, [setFilterSearch]);
+  const changeFilterSearch = useCallback(
+    (value: string) => {
+      setFilterSearch(value);
+    },
+    [setFilterSearch],
+  );
 
   const filteredReceiptItems = useMemo(() => {
     if (!products.length) return [];
     const lowerSearch = search.toLowerCase();
     const lowerFilterQuery = filterSearch ? filterSearch.toLowerCase() : "";
-    const selectedCatId = selectedCategory === '0' ? null : selectedCategory;
+    const selectedCatId = selectedCategory === "0" ? null : selectedCategory;
 
     // اگر دستهٔ اصلی انتخاب شده، خودش + همهٔ زیردسته‌ها را در نظر بگیر تا غذاهای زیردسته هم بیایند
     const effectiveCategoryIds = (() => {
@@ -120,24 +132,20 @@ const MenuIndex = () => {
     })();
 
     const filtered = products.filter((item) => {
-      const matchesCategory =
-        !selectedCatId ||
-        (item.category?.id != null && effectiveCategoryIds?.has(item.category.id));
+      const matchesCategory = !selectedCatId || (item.category?.id != null && effectiveCategoryIds?.has(item.category.id));
       const itemName = item.name ?? item.title;
-      const matchesSearch =
-        !search || itemName.toLowerCase().includes(lowerSearch);
+      const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
 
       // جستجو در عنوان و توضیحات (و در صورت وجود در محتویات)
-      const matchesFilterSearch = !filterSearch ||
+      const matchesFilterSearch =
+        !filterSearch ||
         (() => {
           const titleMatch = itemName.toLowerCase().includes(lowerFilterQuery);
           const description = item.description || item.desc || "";
           const descMatch = description.toLowerCase().includes(lowerFilterQuery);
           if (titleMatch || descMatch) return true;
           if (item.content && Array.isArray(item.content) && item.content.length > 0) {
-            return item.content.some((content: string) =>
-              content.toLowerCase().includes(lowerFilterQuery)
-            );
+            return item.content.some((content: string) => content.toLowerCase().includes(lowerFilterQuery));
           }
           return false;
         })();
@@ -168,30 +176,22 @@ const MenuIndex = () => {
   }
 
   return (
-    <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
+    <div className="flex flex-col gap-2 items-center pt-4 mb-8" ref={wrapperRef}>
       <div className="w-full">
-        <SearchBox value={search} placeholder={tCommon('SearchPlaceholder')} onChange={updateSearch} />
-        <CategoryScroll
-          categories={categories}
-          selectedCategory={selectedCategory}
-          onSelect={updateCategory}
-        />
+        <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
       </div>
 
       <section className="w-full">
-        <div className="flex gap-2 justify-between items-center relative" ref={smallCategoriesRef} >
-          <span className="sm:text-base text-sm font-medium">
-            {selectedCategory === '0' ? '' : categories.find(c => c.id === selectedCategory)?.title || ''}
-          </span>
+        <div className="flex gap-2 justify-between items-center relative" ref={smallCategoriesRef}>
+          <span className="sm:text-base text-sm font-medium">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
           <div className="inline-flex gap-2 justify-end items-center">
-            <div className="inline-flex rounded-xl h-8 bg-container p-1">
+            <div className={glassSurfaceFlat("inline-flex rounded-xl h-8 p-1")}>
               <button
                 onClick={() => setViewModeAndPersist("list")}
                 className={clsx(
                   "rounded-lg h-6 w-8 inline-flex items-center justify-center transition-colors",
-                  viewMode === "list"
-                    ? "bg-background text-foreground"
-                    : "text-foreground/60 hover:text-foreground"
+                  viewMode === "list" ? "bg-background text-foreground" : "text-foreground/60 hover:text-foreground",
                 )}
                 title="نمایش یک ستونه"
               >
@@ -201,21 +201,16 @@ const MenuIndex = () => {
                 onClick={() => setViewModeAndPersist("grid")}
                 className={clsx(
                   "rounded-lg h-6 w-8 inline-flex items-center justify-center transition-colors",
-                  viewMode === "grid"
-                    ? "bg-background text-foreground"
-                    : "text-foreground/60 hover:text-foreground"
+                  viewMode === "grid" ? "bg-background text-foreground" : "text-foreground/60 hover:text-foreground",
                 )}
                 title="نمایش دو ستونه"
               >
                 <RowHorizontal color="black" className="w-4 h-4" />
               </button>
             </div>
-            <button
-              onClick={toggleFilterSortModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
-            >
+            <button onClick={toggleFilterSortModal} className={glassSurfaceFlat("rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2")}>
               <TextAlignIcon className="text-foreground" />
-              <span className="text-xs leading-5 font-medium">{tMenu('MenuFilterDrawer.Label')}</span>
+              <span className="text-xs leading-5 font-medium">{tMenu("MenuFilterDrawer.Label")}</span>
             </button>
           </div>
         </div>
@@ -223,24 +218,15 @@ const MenuIndex = () => {
         <motion.div
           initial={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
           animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
-          transition={{ duration: .1 }}
-          className={clsx(
-            'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
-            ``
-          )}>
-          <CategoryScroll
-            categories={categories}
-            selectedCategory={selectedCategory}
-            onSelect={updateCategory}
-            variant="small"
-          />
+          transition={{ duration: 0.1 }}
+          className={clsx(glassSurfaceFlat("fixed left-0 z-10 top-0 px-4 pt-16 right-0 xl:pr-72 xl:pt-20 border-x-0 border-t-0 rounded-none"), !smallCategoriesVisible && "pointer-events-none")}
+        >
+          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
         </motion.div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
           {filteredReceiptItems.length === 0 ? (
-            <div className="text-center text-foreground/60 py-8">
-              {productsData ? 'کالایی یافت نشد' : 'در حال بارگذاری...'}
-            </div>
+            <div className="text-center text-foreground/60 py-8">{productsData ? "کالایی یافت نشد" : "در حال بارگذاری..."}</div>
           ) : viewMode === "grid" ? (
             <div className="grid grid-cols-2 gap-3">
               {filteredReceiptItems.map((product) => (
@@ -264,7 +250,7 @@ const MenuIndex = () => {
         onClose={toggleFilterSortModal}
         searchQuery={filterSearch}
         onSearchChange={changeFilterSearch}
-        onApply={() => { }}
+        onApply={() => {}}
         sortings={sortings}
         activeSortIndex={activeSortingIndex}
         onSortChange={changeSorting}

src/app/[name]/(Main)/types/Types.ts

@@ -47,6 +47,18 @@ export interface ProductVariant {
   price: number;
 }
 
+export enum PurchaseUnit {
+  NUMBER = "number",
+  KILOGRAM = "kilogram",
+  GRAM = "gram",
+  CENTIMETER = "centimeter",
+  METER = "meter",
+  MILLILITER = "milliliter",
+  LITER = "liter",
+}
+
+export type PricingType = "fixed" | "variable";
+
 export interface Product {
   id: string;
   createdAt: string;
@@ -65,6 +77,12 @@ export interface Product {
   isSpecialOffer: boolean;
   price: number | null;
   variants: ProductVariant[];
+  pricingType?: PricingType;
+  purchaseUnit?: PurchaseUnit | string;
+  purchasePitch?: string;
+  minPurchaseQuantity?: string;
+  maxPurchaseQuantity?: string;
+  needAdminAcceptance?: boolean;
   /** Backward compatibility / other APIs */
   name?: string;
   description?: string;
@@ -99,6 +117,127 @@ export function getProductEffectivePrice(product: Product): number {
   return first?.price ?? 0;
 }
 
+export function isVariablePricing(product: Product): boolean {
+  return product.pricingType === "variable";
+}
+
+export function getPurchaseUnitLabel(unit: string | undefined): string {
+  switch (unit) {
+    case PurchaseUnit.NUMBER:
+      return "عدد";
+    case PurchaseUnit.KILOGRAM:
+      return "کیلوگرم";
+    case PurchaseUnit.GRAM:
+      return "گرم";
+    case PurchaseUnit.CENTIMETER:
+      return "سانتی‌متر";
+    case PurchaseUnit.METER:
+      return "متر";
+    case PurchaseUnit.MILLILITER:
+      return "میلی‌لیتر";
+    case PurchaseUnit.LITER:
+      return "لیتر";
+    default:
+      return unit ?? "";
+  }
+}
+
+/** برچسب کوتاه برای نمایش روی اسلایدر */
+export function getPurchaseUnitShortLabel(unit: string | undefined): string {
+  switch (unit) {
+    case PurchaseUnit.KILOGRAM:
+      return "kg";
+    case PurchaseUnit.GRAM:
+      return "gr";
+    case PurchaseUnit.CENTIMETER:
+      return "cm";
+    case PurchaseUnit.METER:
+      return "m";
+    case PurchaseUnit.MILLILITER:
+      return "ml";
+    case PurchaseUnit.LITER:
+      return "L";
+    case PurchaseUnit.NUMBER:
+      return "";
+    default:
+      return unit ?? "";
+  }
+}
+
+export function formatPurchaseQuantity(value: number, unit: string | undefined): string {
+  const short = getPurchaseUnitShortLabel(unit);
+
+  if (unit === PurchaseUnit.KILOGRAM) {
+    const grams = Math.round(value * 1000);
+    if (grams < 1000) {
+      return `${grams} gr`;
+    }
+    if (Number.isInteger(value)) {
+      return `${value} kg`;
+    }
+    return `${parseFloat(value.toFixed(3))} kg`;
+  }
+
+  if (unit === PurchaseUnit.GRAM) {
+    return `${Math.round(value)} gr`;
+  }
+
+  if (unit === PurchaseUnit.MILLILITER) {
+    if (value >= 1000) {
+      const liters = value / 1000;
+      return Number.isInteger(liters) ? `${liters} L` : `${parseFloat(liters.toFixed(2))} L`;
+    }
+    return `${Math.round(value)} ml`;
+  }
+
+  if (unit === PurchaseUnit.LITER) {
+    if (value < 1) {
+      return `${Math.round(value * 1000)} ml`;
+    }
+    return Number.isInteger(value) ? `${value} L` : `${parseFloat(value.toFixed(2))} L`;
+  }
+
+  if (unit === PurchaseUnit.CENTIMETER) {
+    if (value >= 100) {
+      const meters = value / 100;
+      return Number.isInteger(meters) ? `${meters} m` : `${parseFloat(meters.toFixed(2))} m`;
+    }
+    return `${Math.round(value)} cm`;
+  }
+
+  if (unit === PurchaseUnit.METER) {
+    if (value < 1) {
+      return `${Math.round(value * 100)} cm`;
+    }
+    return Number.isInteger(value) ? `${value} m` : `${parseFloat(value.toFixed(2))} m`;
+  }
+
+  if (unit === PurchaseUnit.NUMBER) {
+    return `${value}`;
+  }
+
+  return short ? `${value} ${short}` : `${value}`;
+}
+
+export function parsePurchaseQuantity(value: string | undefined, fallback: number): number {
+  const parsed = Number.parseFloat(value ?? "");
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+export function getVariableQuantityRange(product: Product) {
+  const pitch = parsePurchaseQuantity(product.purchasePitch, 0.05);
+  const min = parsePurchaseQuantity(product.minPurchaseQuantity, 1);
+  const max = parsePurchaseQuantity(product.maxPurchaseQuantity, min);
+  return {
+    min,
+    max: Math.max(max, min),
+    pitch: pitch > 0 ? pitch : 0.05,
+  };
+}
+
+/** @deprecated use getVariableQuantityRange */
+export const getVariableWeightRange = getVariableQuantityRange;
+
 export interface NotificationsCountData {
   count: number;
 }

src/app/[name]/(Profile)/profile/address/page.tsx

@@ -1,5 +1,7 @@
 "use client";
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
+import clsx from 'clsx';
 import Button from '@/components/button/PrimaryButton';
 import { ef } from '@/lib/helpers/utfNumbers';
 import { ArrowLeft, Edit2, TickCircle, Trash } from 'iconsax-react';
@@ -102,7 +104,7 @@ function UserAddressesPage({ }: Props) {
                     addresses.map((address) => (
                         <div
                             key={address.id}
-                            className={`bg-container rounded-container w-full shadow-xl px-4 py-4 flex flex-col justify-between ${address.isDefault ? 'border border-primary' : ''}`}
+                            className={glassSurfaceCard('w-full px-4 py-4 flex flex-col justify-between', address.isDefault && 'border border-primary')}
                         >
                             <div className="flex justify-between items-start mb-2">
                                 <h2 className='text-sm font-medium'>{address.title}</h2>

src/app/[name]/(Profile)/profile/edit/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import Button from '@/components/button/PrimaryButton';
 import { Button as ShadButton } from '@/components/ui/button';
@@ -197,7 +198,7 @@ function ProfileIndex({ }: Props) {
                 <h1 className='text-sm2 place-self-center font-medium'>ویرایش اطلاعات</h1>
             </div>
 
-            <form onSubmit={formik.handleSubmit} className="mt-8 flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <form onSubmit={formik.handleSubmit} className={glassSurfaceCard('mt-8 flex-1 w-full py-6 px-4 flex flex-col justify-between')}>
                 <div className="bg-inherit">
                     <div className="justify-self-center w-fit relative text-center pb-10">
                         <input

src/app/[name]/(Profile)/profile/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import Button from '@/components/button/PrimaryButton';
 // import { useProfile } from '@/hooks/auth/useProfile';
@@ -43,7 +44,7 @@ function ProfileIndex({ }: Props) {
                 />
             </div>
 
-            <div className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <div className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
 
                 <div className="">
                     <div className="flex items-center justify-start gap-3 pb-6 border-b-[1.5px] border-border">

src/app/[name]/(Profile)/profile/settings/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import Button from '@/components/button/PrimaryButton';
 import PasswordField from '@/components/input/PasswordField';
@@ -38,7 +39,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
                 <section
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="flex justify-between items-center pb-[25px]">
                         <h2 className='text-sm leading-5'>{data.TabNotifications.Heading}</h2>
@@ -94,7 +95,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="reviews-title" className='py-4'>
                 <section
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="flex justify-between items-center pb-[25px]">
                         <h2 className='text-sm leading-5'>{data.TabPassword.Heading}</h2>
@@ -154,7 +155,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="reviews-title" className='py-4'>
                 <div
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="pb-4">
                         <h2 className='text-sm leading-5'>{data.TabAuthenticator.Heading}</h2>
@@ -236,7 +237,7 @@ function UserSettingsIndex() {
                 />
             </div>
 
-            <section className='bg-container rounded-container shadow-container p-4'>
+            <section className={glassSurfaceCard('p-4')}>
                 <div className='flex justify-between items-center pb-4'>
                     <h2 className='text-sm leading-5'>{data.StatisticalParticipation.Heading}</h2>
                     <Switch

src/app/[name]/(Profile)/profile/wallet/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
@@ -34,7 +35,7 @@ function UserWalletIndex({ }: Props) {
 
             <form
                 onSubmit={chargeAction}
-                className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+                className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
 
                 <div className="">
                     <div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">

src/app/[name]/api/proxy-svg/route.ts

@@ -0,0 +1,48 @@
+import { fetchWithTimeout } from "@/lib/helpers/fetchWithTimeout";
+import { NextRequest, NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+const CACHE_MAX_AGE = "public, max-age=3600";
+
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl.searchParams.get("url");
+  if (!url) {
+    return NextResponse.json({ error: "url is required" }, { status: 400 });
+  }
+  try {
+    const parsed = new URL(url);
+    if (!["http:", "https:"].includes(parsed.protocol)) {
+      return NextResponse.json({ error: "Invalid URL" }, { status: 400 });
+    }
+    const res = await fetchWithTimeout(url, {
+      timeoutMs: 15_000,
+      headers: { Accept: "image/svg+xml, text/xml, text/plain" },
+    });
+    if (!res.ok) {
+      return NextResponse.json(
+        { error: "Failed to fetch SVG" },
+        { status: res.status }
+      );
+    }
+    const text = await res.text();
+    if (!text.trim().toLowerCase().includes("<svg")) {
+      return NextResponse.json(
+        { error: "Response is not SVG" },
+        { status: 400 }
+      );
+    }
+    return new NextResponse(text, {
+      headers: {
+        "Content-Type": "image/svg+xml",
+        "Cache-Control": CACHE_MAX_AGE,
+      },
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Failed to fetch SVG" },
+      { status: 502 }
+    );
+  }
+}

src/app/[name]/layout.tsx

@@ -1,10 +1,8 @@
-import PreferenceWrapper from '@/components/wrapper/PreferenceWrapper'
+import RestaurantLayoutClient from '@/components/RestaurantLayoutClient'
 import React from 'react'
 import type { Metadata, Viewport } from 'next'
 import { getShop } from './lib/getShop'
 import { notFound } from 'next/navigation'
-import CartChecker from '@/components/CartChecker'
-import ActiveChecker from '@/components/ActiveChecker'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -97,11 +95,7 @@ export default async function Layout({
   try {
     const { name } = await params
     await getShop(name)
-    return <>
-      <PreferenceWrapper>{children}</PreferenceWrapper>
-      <CartChecker />
-      <ActiveChecker />
-    </>
+    return <RestaurantLayoutClient>{children}</RestaurantLayoutClient>
   } catch (error) {
     if (error instanceof Error && error.message === 'SHOP_NOT_FOUND') {
       notFound()

src/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "../../public/assets/css/fonts.css";
 @import "tw-animate-css";
+@import "../styles/glass.css";
 
 /* @custom-variant dark (&:is(.dark *)); */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@@ -386,3 +387,37 @@ html[data-theme="dark"] {
 .game-explanation {
   display: none;
 }
+
+html[data-pattern-bg="true"] #root {
+  position: relative;
+  z-index: 1;
+}
+
+html[data-pattern-bg="true"] [data-slot="dialog-content"] {
+  background-color: var(--container) !important;
+}
+
+html[data-pattern-bg="true"] [data-slot="splash-screen"] {
+  background-color: var(--container) !important;
+}
+
+html[data-pattern-bg="true"] .pattern-secondary-bg {
+  background-color: var(--primary-light) !important;
+}
+
+html[data-image-bg="true"] #root {
+  position: relative;
+  z-index: 1;
+}
+
+html[data-image-bg="true"] [data-slot="dialog-content"] {
+  background-color: var(--container) !important;
+}
+
+html[data-image-bg="true"] [data-slot="splash-screen"] {
+  background-color: var(--container) !important;
+}
+
+html[data-image-bg="true"] .pattern-secondary-bg {
+  background-color: var(--primary-light) !important;
+}

src/app/layout.tsx

@@ -7,6 +7,7 @@ import initTranslations from '@/lib/i18n';
 import TranslationsProvider from "@/components/utils/TranslationsProdiver";
 import ToastContainer from "@/components/Toast";
 import { ThemeColorSetter } from "@/components/ThemeColorSetter";
+import { ThemeBootScript } from "@/components/ThemeBootScript";
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -43,7 +44,9 @@ export default async function RootLayout({
       dir='rtl'
       className="h-svh overflow-hidden"
       data-theme="light" >
-      <head />
+      <head>
+        <ThemeBootScript />
+      </head>
       <body
 
         className={`antialiased bg-background h-svh overflow-hidden`}

src/components/RestaurantLayoutClient.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import ActiveChecker from "@/components/ActiveChecker";
+import AppBackground from "@/components/background/AppBackground";
+import CartChecker from "@/components/CartChecker";
+import { PatternBackgroundProvider } from "@/components/background/PatternBackgroundProvider";
+import PreferenceWrapper from "@/components/wrapper/PreferenceWrapper";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function RestaurantLayoutClient({ children }: Props) {
+  return (
+    <>
+      <PatternBackgroundProvider>
+        <PreferenceWrapper>
+          <AppBackground />
+          {children}
+        </PreferenceWrapper>
+      </PatternBackgroundProvider>
+      <CartChecker />
+      <ActiveChecker />
+    </>
+  );
+}

src/components/ThemeBootScript.tsx

@@ -0,0 +1,10 @@
+import { getThemeBootScript } from "@/lib/helpers/themeBootScript";
+
+export function ThemeBootScript() {
+  return (
+    <script
+      id="theme-boot"
+      dangerouslySetInnerHTML={{ __html: getThemeBootScript() }}
+    />
+  );
+}

src/components/ThemeColorSetter.tsx

@@ -1,12 +1,20 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 import { hexToOklch, calculateBrightness } from '@/lib/helpers/colorUtils'
+import { getCachedMenuColor, getRestaurantSlugFromPath, getThemeCache, applyCachedThemeToDom } from '@/lib/helpers/themeCache'
 
 export function ThemeColorSetter() {
-  useEffect(() => {
+  useLayoutEffect(() => {
     try {
-      const savedColor = localStorage.getItem('theme-primary-color')
+      const slug = getRestaurantSlugFromPath()
+      const cachedTheme = slug ? getThemeCache(slug) : null
+      if (cachedTheme) {
+        applyCachedThemeToDom(cachedTheme)
+        return
+      }
+
+      const savedColor = getCachedMenuColor(slug)
       if (savedColor) {
         const oklchColor = hexToOklch(savedColor)
         
@@ -25,4 +33,3 @@ export function ThemeColorSetter() {
 
   return null
 }
-

src/components/background/AppBackground.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { usePatternBackground } from "@/components/background/PatternBackgroundProvider";
+import usePreference from "@/hooks/helpers/usePreference";
+import { THEME_BG_ELEMENT_ID } from "@/lib/helpers/themeCache";
+import { useLayoutEffect } from "react";
+
+const THEME_BG_IMG_ID = "cached-theme-bg-img";
+const THEME_BG_OVERLAY_ID = "cached-theme-bg-overlay";
+
+export default function AppBackground() {
+  const { state: nightMode } = usePreference("night-mode", false);
+  const { isPattern, backgroundStyle, isCustomImage, customImageSettings } =
+    usePatternBackground();
+
+  useLayoutEffect(() => {
+    if (nightMode || (!isPattern && !isCustomImage)) {
+      document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
+      return;
+    }
+
+    let element = document.getElementById(THEME_BG_ELEMENT_ID);
+    if (!element) {
+      element = document.createElement("div");
+      element.id = THEME_BG_ELEMENT_ID;
+      element.setAttribute("aria-hidden", "true");
+      element.style.position = "fixed";
+      element.style.inset = "0";
+      element.style.pointerEvents = "none";
+      element.style.zIndex = "0";
+      document.body.appendChild(element);
+    }
+
+    if (isPattern) {
+      element.style.overflow = "";
+      document.getElementById(THEME_BG_IMG_ID)?.remove();
+      document.getElementById(THEME_BG_OVERLAY_ID)?.remove();
+      Object.assign(element.style, backgroundStyle as Record<string, string>);
+      return;
+    }
+
+    if (isCustomImage && customImageSettings) {
+      const { bgUrl, bgBlur, bgOpacity, bgOverlay } = customImageSettings;
+
+      element.style.backgroundColor = "";
+      element.style.backgroundImage = "";
+      element.style.overflow = "hidden";
+
+      let imgLayer = document.getElementById(THEME_BG_IMG_ID);
+      if (!imgLayer) {
+        imgLayer = document.createElement("div");
+        imgLayer.id = THEME_BG_IMG_ID;
+        imgLayer.style.position = "absolute";
+        imgLayer.style.inset = "-40px";
+        imgLayer.style.backgroundSize = "cover";
+        imgLayer.style.backgroundPosition = "center";
+        imgLayer.style.backgroundRepeat = "no-repeat";
+        element.appendChild(imgLayer);
+      }
+
+      imgLayer.style.backgroundImage = `url("${bgUrl}")`;
+      imgLayer.style.filter = bgBlur ? `blur(${bgBlur}px)` : "";
+      imgLayer.style.opacity =
+        bgOpacity != null ? String(bgOpacity / 100) : "1";
+
+      let overlayLayer = document.getElementById(THEME_BG_OVERLAY_ID);
+      if (!overlayLayer) {
+        overlayLayer = document.createElement("div");
+        overlayLayer.id = THEME_BG_OVERLAY_ID;
+        overlayLayer.style.position = "absolute";
+        overlayLayer.style.inset = "0";
+        element.appendChild(overlayLayer);
+      }
+
+      const overlayOpacity =
+        bgOverlay != null ? Number(bgOverlay) / 100 : 0;
+      overlayLayer.style.backgroundColor =
+        overlayOpacity > 0 ? `rgba(0,0,0,${overlayOpacity})` : "";
+    }
+  }, [backgroundStyle, isCustomImage, isPattern, customImageSettings, nightMode]);
+
+  return null;
+}

src/components/background/PatternBackgroundProvider.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useGetAbout } from "@/app/[name]/(Main)/about/hooks/useAboutData";
+import {
+  applyColorBackgroundCssVariables,
+  applyCustomImageCssVariables,
+  applyPatternCssVariables,
+  clearCustomImageCssVariables,
+  clearPatternCssVariables,
+  colorizeSvg,
+  hexToRgba,
+  normalizeBgNumber,
+  PATTERN_BACKGROUND_OPACITY,
+  resolveBgType,
+} from "@/lib/helpers/backgroundUtils";
+import usePreference from "@/hooks/helpers/usePreference";
+import {
+  applyCachedThemeToDom,
+  buildThemeCacheFromRestaurant,
+  clearRestaurantBackgroundOverrides,
+  getThemeCache,
+  removeCachedThemeBackground,
+  setThemeCache,
+  svgToDataUrl,
+  themeBackgroundMatches,
+  type CachedRestaurantTheme,
+} from "@/lib/helpers/themeCache";
+import { useParams } from "next/navigation";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+const DEFAULT_MENU_COLOR = "#1E3A8A";
+
+export type CustomImageSettings = {
+  bgUrl: string;
+  bgBlur: number | null;
+  bgOpacity: number | null;
+  bgOverlay: string | null;
+};
+
+type PatternBackgroundContextValue = {
+  isPattern: boolean;
+  isCustomImage: boolean;
+  backgroundStyle: CSSProperties;
+  customImageSettings: CustomImageSettings | null;
+};
+
+const PatternBackgroundContext = createContext<PatternBackgroundContextValue>({
+  isPattern: false,
+  isCustomImage: false,
+  backgroundStyle: {},
+  customImageSettings: null,
+});
+
+export function PatternBackgroundProvider({ children }: { children: ReactNode }) {
+  const { name: restaurantSlug } = useParams<{ name: string }>();
+  const { state: nightMode } = usePreference("night-mode", false);
+  const { data: aboutData } = useGetAbout();
+  const restaurant = aboutData?.data;
+  const [hydratedCache, setHydratedCache] = useState<CachedRestaurantTheme | null>(null);
+  const [patternImageUrl, setPatternImageUrl] = useState<string | null>(null);
+
+  const bgType = restaurant
+    ? resolveBgType(restaurant)
+    : hydratedCache
+      ? resolveBgType(hydratedCache)
+      : "color";
+
+  const isPattern = !nightMode && bgType === "pattern";
+  const isCustomImage = !nightMode && bgType === "custom";
+  const menuColor =
+    restaurant?.menuColor || hydratedCache?.menuColor || DEFAULT_MENU_COLOR;
+  const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
+
+  useLayoutEffect(() => {
+    if (!restaurantSlug) return;
+
+    const cached = getThemeCache(restaurantSlug);
+    setHydratedCache(cached);
+
+    if (!cached) return;
+
+    applyCachedThemeToDom(cached);
+    if (!nightMode && cached.patternDataUrl) {
+      setPatternImageUrl(cached.patternDataUrl);
+    }
+  }, [nightMode, restaurantSlug]);
+
+  useEffect(() => {
+    if (!restaurantSlug) {
+      clearPatternCssVariables();
+      clearCustomImageCssVariables();
+      removeCachedThemeBackground();
+      setPatternImageUrl(null);
+      return;
+    }
+
+    if (nightMode) {
+      clearPatternCssVariables();
+      clearCustomImageCssVariables();
+      clearRestaurantBackgroundOverrides();
+      setPatternImageUrl(null);
+      return;
+    }
+
+    if (!restaurant) return;
+
+    const themeBase = buildThemeCacheFromRestaurant(restaurant);
+    const currentBgType = themeBase.bgType;
+
+    if (currentBgType === "color") {
+      clearCustomImageCssVariables();
+      removeCachedThemeBackground();
+      setPatternImageUrl(null);
+      applyColorBackgroundCssVariables(menuColor);
+      setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
+      return;
+    }
+
+    if (currentBgType === "custom") {
+      clearPatternCssVariables();
+      setPatternImageUrl(null);
+      applyCustomImageCssVariables();
+      setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
+      return;
+    }
+
+    clearCustomImageCssVariables();
+
+    applyPatternCssVariables(menuColor);
+
+    if (!themeBase.bgUrl) {
+      setPatternImageUrl(null);
+      setThemeCache(restaurantSlug, {
+        ...themeBase,
+        patternDataUrl: null,
+      });
+      const saved = getThemeCache(restaurantSlug);
+      if (saved) {
+        applyCachedThemeToDom(saved);
+      }
+      return;
+    }
+
+    const cached = getThemeCache(restaurantSlug);
+    const cacheHit =
+      cached &&
+      themeBackgroundMatches(cached, restaurant) &&
+      cached.isPattern &&
+      cached.patternDataUrl;
+
+    if (cacheHit) {
+      setPatternImageUrl(cached.patternDataUrl!);
+      setThemeCache(restaurantSlug, {
+        ...themeBase,
+        patternDataUrl: cached.patternDataUrl,
+      });
+      applyCachedThemeToDom(cached);
+      return;
+    }
+
+    let cancelled = false;
+    const proxyUrl = `/${restaurantSlug}/api/proxy-svg?url=${encodeURIComponent(themeBase.bgUrl)}`;
+
+    fetch(proxyUrl)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Failed to fetch background pattern");
+        }
+        return response.text();
+      })
+      .then((svg) => {
+        if (cancelled) return;
+
+        const dataUrl = svgToDataUrl(colorizeSvg(svg, menuColor));
+        setPatternImageUrl(dataUrl);
+
+        const nextCache = {
+          ...themeBase,
+          patternDataUrl: dataUrl,
+        };
+        setThemeCache(restaurantSlug, nextCache);
+
+        const saved = getThemeCache(restaurantSlug);
+        if (saved) {
+          applyCachedThemeToDom(saved);
+        }
+      })
+      .catch(() => {
+        if (!cancelled && cached?.patternDataUrl) {
+          setPatternImageUrl(cached.patternDataUrl);
+          applyCachedThemeToDom(cached);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [menuColor, nightMode, restaurant, restaurantSlug]);
+
+  const backgroundStyle = useMemo<CSSProperties>(
+    () => ({
+      backgroundColor: baseTint,
+      ...(patternImageUrl
+        ? {
+            backgroundImage: `url("${patternImageUrl}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: "auto",
+          }
+        : {}),
+    }),
+    [baseTint, patternImageUrl],
+  );
+
+  const customImageSettings = useMemo<CustomImageSettings | null>(() => {
+    const src = restaurant?.bgUrl || hydratedCache?.bgUrl;
+    if (!isCustomImage || !src) return null;
+    return {
+      bgUrl: src,
+      bgBlur: normalizeBgNumber(restaurant?.bgBlur ?? hydratedCache?.bgBlur),
+      bgOpacity: normalizeBgNumber(restaurant?.bgOpacity ?? hydratedCache?.bgOpacity),
+      bgOverlay: restaurant?.bgOverlay ?? hydratedCache?.bgOverlay ?? null,
+    };
+  }, [isCustomImage, restaurant, hydratedCache]);
+
+  const value = useMemo(
+    () => ({ isPattern, isCustomImage, backgroundStyle, customImageSettings }),
+    [backgroundStyle, isPattern, isCustomImage, customImageSettings],
+  );
+
+  return (
+    <PatternBackgroundContext.Provider value={value}>
+      {children}
+    </PatternBackgroundContext.Provider>
+  );
+}
+
+export function usePatternBackground() {
+  return useContext(PatternBackgroundContext);
+}

src/components/input/SearchBox.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import SearchIcon from '../icons/SearchIcon'
-import clsx from 'clsx'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 interface SearchboxProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'results'> {
@@ -19,9 +19,9 @@ export default function SearchBox({
 }: SearchboxProps) {
   return (
     <div
-      className={clsx(
-        'bg-container inline-flex rounded-xl px-4 h-10 w-full items-center content-center',
-        className
+      className={glassSurfaceFlat(
+        'inline-flex rounded-xl px-4 h-10 w-full items-center content-center',
+        className,
       )}
     >
       <SearchIcon stroke='#8C90A3' />

src/components/listview/CategoryItemRenderer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { glassSurface } from '@/lib/styles/glassSurface';
 import React from 'react';
 
 type Props = {
@@ -8,10 +9,10 @@ type Props = {
 
 function CategoryItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40`}>
+        <div className={glassSurface(rest.className, 'cursor-pointer transition-[background-color,box-shadow,opacity] duration-200 ease-out rounded-xl outline-none [-webkit-tap-highlight-color:transparent]')}>
             <div
                 {...rest}
-                className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
+                className="rounded-normal w-[108px] h-[88px] flex flex-col justify-center items-center gap-2 overflow-hidden"
             >
                 {children}
             </div>

src/components/listview/CategorySmallItemRenderer.tsx

@@ -1,17 +1,23 @@
 'use client';
 
+import { glassSurface } from '@/lib/styles/glassSurface';
 import React from 'react';
 
 type Props = {
     children: React.ReactNode;
+    compact?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-function CategorySmallItemRenderer({ children, ...rest }: Props) {
+function CategorySmallItemRenderer({ children, compact = false, className, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
+        <div className={glassSurface(className, 'cursor-pointer transition-[background-color,box-shadow,opacity] duration-200 ease-out rounded-xl outline-none [-webkit-tap-highlight-color:transparent]')}>
             <div
                 {...rest}
-                className="rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
+                className={
+                    compact
+                        ? "rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
+                        : "rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
+                }
             >
                 {children}
             </div>

src/components/listview/MenuItem.tsx

@@ -1,19 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
-'use client'
+"use client";
 
-import { memo, useMemo } from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { CartQuantityControl } from "@/components/CartQuantityControl";
 import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
 import type { Product, ProductImage } from "@/app/[name]/(Main)/types/Types";
-import {
-  hasVariants,
-  getPrimaryVariantId,
-  getProductEffectivePrice,
-} from "@/app/[name]/(Main)/types/Types";
+import { formatPurchaseQuantity, getPrimaryVariantId, getProductEffectivePrice, getPurchaseUnitLabel, hasVariants, isVariablePricing } from "@/app/[name]/(Main)/types/Types";
+import { CartQuantityControl } from "@/components/CartQuantityControl";
+import { ArrowLeft } from "iconsax-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { memo, useMemo, type ReactNode } from "react";
 
-export type MenuItemViewMode = 'list' | 'grid';
+export type MenuItemViewMode = "list" | "grid";
 
 interface MenuItemProps {
   product: Product;
@@ -23,19 +20,24 @@ interface MenuItemProps {
   variantValue?: string | null;
   /** حالت نمایش: list = یک ستونه (پیش‌فرض)، grid = دو ستونه */
   viewMode?: MenuItemViewMode;
+  /** فقط نمایش اطلاعات بدون دکمه‌های افزودن/جزئیات */
+  readOnly?: boolean;
+  /** تعداد انتخاب‌شده — در حالت readOnly نمایش داده می‌شود */
+  displayQuantity?: number;
+  /** برچسب اختیاری بالای آیتم */
+  badge?: ReactNode;
 }
 
-const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValueProp, viewMode = 'list' }: MenuItemProps) => {
+const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValueProp, viewMode = "list", readOnly = false, displayQuantity, badge }: MenuItemProps) => {
   const { items, addToCart, removeFromCart, isCartMutating } = useCart();
   const params = useParams<{ name: string }>();
   const name = params?.name || "";
   const variantId = variantIdProp ?? getPrimaryVariantId(product);
-  const selectedVariant = variantId
-    ? product.variants?.find((v) => v.id === variantId)
-    : undefined;
+  const selectedVariant = variantId ? product.variants?.find((v) => v.id === variantId) : undefined;
   const withVariants = hasVariants(product);
-  /** در لیست منو اگر تنوع داشت دکمه جزئیات؛ در سبد همیشه افزودن/کم کردن */
-  const showDetailsInsteadOfAdd = withVariants && variantIdProp == null;
+  const withVariablePricing = isVariablePricing(product);
+  /** در لیست منو اگر تنوع یا قیمت متغیر داشت دکمه جزئیات؛ در سبد همیشه افزودن/کم کردن */
+  const showDetailsInsteadOfAdd = (withVariants || withVariablePricing) && variantIdProp == null;
 
   const quantity = useMemo(() => {
     if (!variantId) return 0;
@@ -58,10 +60,7 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
     return fallbackImage;
   }, [product.image, product.images]);
 
-  const productName = useMemo(
-    () => product.name || product.title || 'بدون نام',
-    [product.name, product.title]
-  );
+  const productName = useMemo(() => product.name || product.title || "بدون نام", [product.name, product.title]);
 
   /** فقط در سبد خرید تنوع نمایش داده شود */
   const isInCart = variantIdProp != null;
@@ -69,25 +68,22 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
 
   const productContent = useMemo(() => {
     const content = product.content;
-    if (!content) return '';
+    if (!content) return "";
 
     if (Array.isArray(content)) {
-      return content.filter(item => item && typeof item === 'string').join('، ');
+      return content.filter((item) => item && typeof item === "string").join("، ");
     }
 
-    return '';
+    return "";
   }, [product.content]);
 
   const productDescription = useMemo(() => {
     const desc = product.description || product.desc;
-    if (!desc || typeof desc !== 'string') return '';
-    return desc.replace(/,/g, '،');
+    if (!desc || typeof desc !== "string") return "";
+    return desc.replace(/,/g, "،");
   }, [product.description, product.desc]);
 
-  const effectivePrice =
-    selectedVariant != null
-      ? selectedVariant.price
-      : getProductEffectivePrice(product);
+  const effectivePrice = selectedVariant != null ? selectedVariant.price : getProductEffectivePrice(product);
   const finalPrice = useMemo(() => {
     const discount = product.discount || 0;
     if (discount > 0) {
@@ -96,21 +92,30 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
     return effectivePrice;
   }, [effectivePrice, product.discount]);
 
-  const formattedPrice = useMemo(
-    () => (finalPrice ? finalPrice.toLocaleString("fa-IR") : "0"),
-    [finalPrice]
-  );
+  const formattedPrice = useMemo(() => (finalPrice ? finalPrice.toLocaleString("fa-IR") : "0"), [finalPrice]);
 
-  const formattedOriginalPrice = useMemo(
-    () =>
-      effectivePrice ? effectivePrice.toLocaleString("fa-IR") : "0",
-    [effectivePrice]
-  );
+  const variablePriceLabel = useMemo(() => {
+    if (!withVariablePricing) return null;
+    const unitLabel = getPurchaseUnitLabel(product.purchaseUnit);
+    return `قیمت هر ${unitLabel} T ${formattedPrice}`;
+  }, [withVariablePricing, product.purchaseUnit, formattedPrice]);
 
-  const hasDiscount = useMemo(
-    () => (product.discount || 0) > 0,
-    [product.discount]
-  );
+  const formattedOriginalPrice = useMemo(() => (effectivePrice ? effectivePrice.toLocaleString("fa-IR") : "0"), [effectivePrice]);
+
+  const hasDiscount = useMemo(() => (product.discount || 0) > 0, [product.discount]);
+  const isSpecialOffer = product.isSpecialOffer === true;
+
+  const specialOfferBadge = isSpecialOffer ? (
+    <span className="inline-block rounded-md bg-primary text-primary-foreground text-[10px] font-medium px-1.5 py-0.5 leading-tight">پیشنهاد ویژه</span>
+  ) : null;
+
+  const quantityLabel = useMemo(() => {
+    if (displayQuantity == null) return null;
+    if (withVariablePricing) {
+      return formatPurchaseQuantity(displayQuantity, product.purchaseUnit);
+    }
+    return `${displayQuantity.toLocaleString("fa-IR")}×`;
+  }, [displayQuantity, withVariablePricing, product.purchaseUnit]);
 
   const handleAddToCart = () => {
     if (variantId) addToCart(variantId);
@@ -121,60 +126,39 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
   };
 
   const productDetailUrl = `/${name}/${product.id}?category=${product.category.id}`;
+  const actionButtonClass = "bg-background active:drop-shadow-xs rounded-md h-8 inline-flex p-1 justify-center items-center gap-2 relative overflow-hidden";
+  const actionButtonLabelClass = "text-sm2 pt-0.5 font-normal text-foreground";
 
-  if (viewMode === 'grid') {
+  if (viewMode === "grid") {
     return (
-      <div className="flex flex-col w-full h-full">
-        <Link href={productDetailUrl} className="cursor-pointer rounded-xl aspect-square overflow-hidden flex items-center justify-center max-h-[100px]">
-          <img
-            className="rounded-xl max-w-full max-h-full  object-center"
-            src={resolvedImage}
-            alt={productName}
-          />
+      <div className="relative flex flex-col w-full h-full">
+        {specialOfferBadge && <div className="absolute top-0 left-0 z-10">{specialOfferBadge}</div>}
+        <Link href={productDetailUrl} className="cursor-pointer rounded-xl aspect-square overflow-hidden flex items-center justify-center max-h-25">
+          <img className="rounded-xl max-w-full max-h-full  object-center" src={resolvedImage} alt={productName} />
         </Link>
         <Link href={productDetailUrl} className="cursor-pointer min-w-0 mt-4 flex items-center justify-between gap-2">
-          <div className="text-sm2 font-normal text-black dark:text-white wrap-break-word line-clamp-2 min-w-0">
-            {productName}
-          </div>
-          {variantValueDisplay && (
-            <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">
-              {variantValueDisplay}
-            </span>
-          )}
+          <div className="text-sm2 font-normal text-black dark:text-white wrap-break-word line-clamp-2 min-w-0">{productName}</div>
+          {variantValueDisplay && <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">{variantValueDisplay}</span>}
         </Link>
         <div className="flex flex-col gap-2 mt-1">
           <div className="flex flex-col gap-1 min-h-10 justify-center" dir="ltr">
-            {hasDiscount ? (
+            {variablePriceLabel ? (
+              <span className="text-sm text-right">{variablePriceLabel}</span>
+            ) : hasDiscount ? (
               <>
-                <span className="text-xs text-disabled-text line-through">
-                  {formattedOriginalPrice} T
-                </span>
-                <span className="text-sm font-medium text-primary dark:text-foreground">
-                  {formattedPrice} T
-                </span>
+                <span className="text-xs text-disabled-text line-through">{formattedOriginalPrice} T</span>
+                <span className="text-sm font-medium text-primary dark:text-foreground">{formattedPrice} T</span>
               </>
             ) : (
-              <span className="text-sm text-right">
-                {formattedPrice} T
-              </span>
+              <span className="text-sm text-right">{formattedPrice} T</span>
             )}
           </div>
           {showDetailsInsteadOfAdd ? (
-            <Link
-              href={productDetailUrl}
-              className="bg-background active:drop-shadow-xs w-full rounded-md h-8 inline-flex justify-center items-center gap-2 px-2 text-sm2 font-normal text-foreground"
-            >
-              جزئیات
+            <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
+              <span className={actionButtonLabelClass}>جزئیات</span>
             </Link>
           ) : (
-            <CartQuantityControl
-              quantity={quantity}
-              onAdd={handleAddToCart}
-              onRemove={handleRemoveFromCart}
-              isMutating={isCartMutating}
-              fullWidth
-
-            />
+            <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} fullWidth />
           )}
         </div>
       </div>
@@ -182,71 +166,64 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
   }
 
   return (
-    <div className="flex gap-4 w-full h-full items-center">
-      <Link href={productDetailUrl} className="cursor-pointer">
-        <img
-          className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 aspect-square object-cover"
-          src={resolvedImage}
-          height={112}
-          width={112}
-          alt={productName}
-        />
-      </Link>
-      <div className="w-full inline-flex flex-col justify-between min-w-0">
-        <Link href={productDetailUrl} className="cursor-pointer min-w-0">
-          <div className="min-w-0">
-            <div className="flex items-center justify-between gap-2 min-w-0">
-              <div className="text-sm2 font-normal text-black dark:text-white wrap-break-word min-w-0">
-                {productName}
+    <>
+      {(badge || specialOfferBadge) && (
+        <div className="absolute top-3 left-3 z-10 flex flex-col items-start gap-1">
+          {specialOfferBadge}
+          {badge}
+        </div>
+      )}
+      <div className="flex gap-4 w-full min-h-28 items-stretch">
+        <Link href={productDetailUrl} className="cursor-pointer shrink-0 self-center">
+          <img className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 aspect-square object-cover" src={resolvedImage} height={112} width={112} alt={productName} />
+        </Link>
+        <div className="flex-1 flex flex-col justify-between min-w-0">
+          <Link href={productDetailUrl} className="cursor-pointer min-w-0">
+            <div className="min-w-0">
+              <div className="flex items-center justify-between gap-2 min-w-0">
+                <div className="text-sm2 font-bold text-black dark:text-white wrap-break-word min-w-0">{productName}</div>
+                {variantValueDisplay && <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">{variantValueDisplay}</span>}
               </div>
-              {variantValueDisplay && (
-                <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">
-                  {variantValueDisplay}
-                </span>
+              {(productContent || productDescription) && (
+                <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-4 wrap-break-word overflow-hidden">{productContent || productDescription}</div>
               )}
             </div>
-            {(productContent || productDescription) && (
-              <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2 wrap-break-word overflow-hidden">
-                {productContent || productDescription}
+          </Link>
+          <div className="flex flex-col gap-1 mt-2" dir="ltr">
+            {variablePriceLabel ? (
+              <span className="text-sm text-right">{variablePriceLabel}</span>
+            ) : hasDiscount ? (
+              <>
+                <span className="text-xs text-disabled-text line-through">{formattedOriginalPrice} T</span>
+                <span className="text-sm font-medium text-primary dark:text-foreground">{formattedPrice} T</span>
+              </>
+            ) : (
+              <span className="text-sm text-right">{formattedPrice} T</span>
+            )}
+          </div>
+        </div>
+        {readOnly && quantityLabel ? (
+          <div className="flex flex-col justify-end shrink-0">
+            <span className="text-sm font-semibold text-foreground">{quantityLabel}</span>
+          </div>
+        ) : !readOnly ? (
+          <div className="flex flex-col justify-end shrink-0">
+            {showDetailsInsteadOfAdd ? (
+              <div className="w-28.75">
+                <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
+                  <span className={actionButtonLabelClass}>جزئیات</span>
+                  <ArrowLeft size={16} className="stroke-foreground" />
+                </Link>
+              </div>
+            ) : (
+              <div className="w-28.75">
+                <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} />
               </div>
             )}
           </div>
-        </Link>
-        <div className="flex flex-col mt-2 gap-2 w-full">
-          <div className="flex flex-col gap-1 min-h-10 justify-center" dir="ltr">
-            {hasDiscount ? (
-              <>
-                <span className="text-xs text-disabled-text line-through">
-                  {formattedOriginalPrice} T
-                </span>
-                <span className="text-sm  font-medium text-primary dark:text-foreground">
-                  {formattedPrice} T
-                </span>
-              </>
-            ) : (
-              <span className="text-sm text-right">
-                {formattedPrice} T
-              </span>
-            )}
-          </div>
-          {showDetailsInsteadOfAdd ? (
-            <Link
-              href={productDetailUrl}
-              className="bg-background active:drop-shadow-xs w-full rounded-md h-8 inline-flex justify-center items-center gap-2 px-2 text-sm2 font-normal text-foreground"
-            >
-              جزئیات
-            </Link>
-          ) : (
-            <CartQuantityControl
-              quantity={quantity}
-              onAdd={handleAddToCart}
-              onRemove={handleRemoveFromCart}
-              isMutating={isCartMutating}
-            />
-          )}
-        </div>
+        ) : null}
       </div>
-    </div>
+    </>
   );
 };
 

src/components/listview/MenuItemRenderer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { glassSurface } from '@/lib/styles/glassSurface';
 import React from 'react';
 
 type Props = {
@@ -12,18 +13,20 @@ function MenuItemRendererComponent({ children, variant = 'list', ...rest }: Prop
   return (
     <div
       {...rest}
-      className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full bg-container rounded-3xl ${
-        isGrid
-          ? 'p-3 flex flex-col'
-          : 'py-4 pb-4! px-4 flex items-center justify-between gap-4'
-      }`}
+      className={glassSurface(
+        rest.className,
+        `transition-all duration-200 ease-out w-full rounded-3xl ${
+          isGrid
+            ? 'p-3 flex flex-col'
+            : 'relative py-4 pb-4! px-4 flex items-stretch overflow-visible'
+        }`,
+      )}
     >
       {children}
     </div>
   );
 }
 
-// Memoize with shallow comparison of props
 const MenuItemRenderer = React.memo(MenuItemRendererComponent, (prevProps, nextProps) => {
   return (
     prevProps.className === nextProps.className &&

src/components/menu/SideMenu.tsx

@@ -19,6 +19,7 @@ import { useGetAbout } from '@/app/[name]/(Main)/about/hooks/useAboutData';
 import Image from 'next/image';
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
 import { toast } from '../Toast';
+import { glassSurface } from '@/lib/styles/glassSurface';
 
 type MenuItemType = {
     href: string | undefined;
@@ -324,13 +325,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                             data-visible={menuState}
                             data-isvisible={menuStateMemo}
                             onClick={(e) => { e.stopPropagation(); }}
-                            className="fixed top-0 bottom-0 right-0 bg-container w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:rounded-s-none!"
+                            className={glassSurface("fixed top-0 bottom-0 right-0 w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:rounded-s-none!")}
                         >
                             {renderMenu()}
                         </motion.nav>
                     </BlurredOverlayContainer>
                     <nav
-                        className="hidden fixed top-4 bottom-4 right-4 bg-container xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
+                        className={glassSurface('hidden fixed top-4 bottom-4 right-4 xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl')}
                     >
                         {renderMenu()}
                     </nav>

src/components/navigation/BottomNavBar.tsx

@@ -1,46 +1,63 @@
 'use client';
 
-import React from 'react'
-import Link from 'next/link'
-import BottomNavLink from './BottomNavLink'
-import BottomNavHighlightLink from './BottomNavLinkBig'
-import BagIcon from '../icons/BagIcon'
-import HeartIcon from '../icons/HeartIcon'
-import { useParams, usePathname, useRouter } from 'next/navigation'
-import HomeIcon from '../icons/HomeIcon'
-import { useTranslation } from 'react-i18next';
 import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
-import { Building, Receipt21 } from 'iconsax-react';
-import clsx from 'clsx';
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
+import { glassSurfaceNav } from '@/lib/styles/glassSurface';
+import clsx from 'clsx';
+import type { Icon } from 'iconsax-react';
+import { Bag2, Building, Heart, Home2, Receipt21 } from 'iconsax-react';
+import Link from 'next/link';
+import { useParams, usePathname, useRouter } from 'next/navigation';
+import { useMemo } from 'react';
 import { toast } from '../Toast';
 
-function BottomNavBar() {
+type NavItemProps = {
+  href?: string;
+  isActive: boolean;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  Icon: Icon;
+  badge?: number;
+};
 
+function NavItem({ href, isActive, onClick, Icon, badge }: NavItemProps) {
+  const className = clsx('flex-1 flex items-center justify-center h-full rounded-full', isActive && 'bg-primary/12');
+
+  const icon = (
+    <span className="relative">
+      <Icon size={20} color="currentColor" variant={isActive ? 'Bold' : 'Linear'} className={isActive ? 'text-primary' : 'text-icon-deactive'} />
+      {badge != null && badge > 0 && (
+        <span className="absolute -right-1.5 -top-1 flex min-w-3.5 h-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-medium text-container dark:bg-white dark:text-black">
+          {badge > 99 ? '99+' : badge}
+        </span>
+      )}
+    </span>
+  );
+
+  return (
+    <Link href={href ?? '#'} onClick={onClick} className={className}>
+      {icon}
+    </Link>
+  );
+}
+
+function BottomNavBar() {
   const params = useParams();
-  const { name } = params;
+  const name = params.name as string;
   const pathname = usePathname();
-  const isHomeRoute = pathname === `/${name}`;
-  const isAboutRoute = pathname.includes('about');
-  const isOrderRoute = pathname.includes('order');
-  const buildingVariant = React.useMemo(() => {
-    return (isAboutRoute ? 'Bold' : 'Outline') as 'Bold' | 'Outline';
-  }, [isAboutRoute]);
-  const orderVariant = React.useMemo(() => {
-    return (isOrderRoute ? 'Bold' : 'Outline') as 'Bold' | 'Outline';
-  }, [isOrderRoute]);
-  const { isSuccess } = useGetProfile()
-  const router = useRouter()
-  const { t } = useTranslation('common', {
-    keyPrefix: 'BottomNavbar'
-  });
+  const router = useRouter();
+  const { isSuccess } = useGetProfile();
   const { items } = useCart();
 
-  const cartItemsCount = React.useMemo(() => {
-    return Object.values(items).reduce((total, item) => {
-      return total + (item?.quantity || 0);
-    }, 0);
-  }, [items]);
+  const cartItemCount = useMemo(
+    () => Object.values(items).reduce((sum, item) => sum + (item?.quantity ?? 0), 0),
+    [items],
+  );
+
+  const isCartActive = pathname.startsWith(`/${name}/cart`);
+  const isOrderActive = pathname.includes('/order');
+  const isHomeActive = pathname === `/${name}`;
+  const isAboutActive = pathname.startsWith(`/${name}/about`);
+  const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
 
   const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -51,156 +68,17 @@ function BottomNavBar() {
       toast('ابتدا لاگین کنید', 'error');
       router.replace(`/${name}/auth`);
     }
-  }
+  };
 
   return (
-    <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
-      <div className="max-w-md mx-auto w-full aspect-436/104 relative z-30">
-        <svg
-          viewBox="0 0 436 104"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="w-full h-full block"
-          preserveAspectRatio="xMidYMid meet"
-        >
-          <g filter="url(#filter0_d_9095_18036)" className='fill-container'>
-            <path
-              className='pointer-events-auto'
-              d="M218 16C229.034 16 238.711 22.0313 244.148 31.0943C245.844 33.9222 248.724 36 252.022 36H406C414.837 36 422 43.1634 422 52V80C422 88.8366 414.837 96 406 96H30C21.1634 96 14 88.8366 14 80V52C14 43.1634 21.1634 36 30 36H183.979C187.277 36 190.157 33.9222 191.853 31.0943C197.29 22.0315 206.966 16.0001 218 16Z"
-            />
-          </g>
-
-          {/* 🔽 Your HTML content inside SVG */}
-          <foreignObject x="0" y="10" width="100%" height="80">
-            <nav
-              className="h-full px-4 grid grid-cols-5 gap-x-1 text-[10px] items-end"
-            >
-              <BottomNavLink
-                href={`/${name}/cart`}
-                icon={<BagIcon width={20} height={20} />}
-                value={t('Cart')}
-              />
-
-              <Link
-                href={`/${name}/order/history`}
-                className={clsx(
-                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white'
-                )}
-              >
-                <div className="shrink-0 text-primary dark:text-white">
-                  <Receipt21
-                    key={`receipt-${orderVariant}-${isOrderRoute}`}
-                    size={20}
-                    variant={orderVariant}
-                    color="currentColor"
-                    className='stroke-0'
-                  />
-                </div>
-                <span className="text-xs2 text-center truncate w-full dark:text-white">
-                  {t('Orders')}
-                </span>
-              </Link>
-              {/* <BottomNavLink href={`/${name}/order/history`} icon={<ReceiptIcon width={20} height={20} />} value={t('Orders')} /> */}
-              <BottomNavHighlightLink
-                href={`/${name}`}
-                icon={
-                  <HomeIcon
-                    className={clsx(
-                      'transition-all duration-200 stroke-primary dark:stroke-black! dark:text-white'
-                    )}
-                    fill="white"
-                    stroke="currentColor"
-                    variant={isHomeRoute ? 'Bold' : 'Outline'}
-                    width={20}
-                    height={20} />}
-                value={t('Menu')} />
-              <Link
-                href={`/${name}/about`}
-                className={clsx(
-                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white'
-                )}
-              >
-                <div className="shrink-0 text-primary dark:text-white">
-                  <Building
-                    key={`building-${buildingVariant}-${isAboutRoute}`}
-                    size={20}
-                    variant={buildingVariant as 'Bold' | 'Outline'}
-                    color="currentColor"
-                    className='stroke-0'
-                  />
-                </div>
-                <span className="text-xs2 text-center truncate w-full dark:text-white">
-                  {t('about')}
-                </span>
-              </Link>
-              <BottomNavLink href={`/${name}/favorite`} onClick={handleFavoritesClick} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
-            </nav>
-          </foreignObject>
-
-          <defs>
-            <filter
-              id="filter0_d_9095_18036"
-              x="0"
-              y="0"
-              width="100%"
-              height="100%"
-              filterUnits="userSpaceOnUse"
-              colorInterpolationFilters="sRGB"
-            >
-              <feFlood floodOpacity="0" result="BackgroundImageFix" />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha"
-              />
-              <feOffset dy="-2" />
-              <feGaussianBlur stdDeviation="7" />
-              <feComposite in2="hardAlpha" operator="out" />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="BackgroundImageFix"
-                result="effect1_dropShadow_9095_18036"
-              />
-              <feBlend
-                mode="normal"
-                in="SourceGraphic"
-                in2="effect1_dropShadow_9095_18036"
-                result="shape"
-              />
-            </filter>
-          </defs>
-        </svg>
-
-        {/* Badge Layer - خارج از SVG - دقیقاً مثل foreignObject */}
-        {cartItemsCount > 0 && (
-          <div
-            className="absolute left-0 right-0 pointer-events-none"
-            style={{
-              top: 'calc(10 / 104 * 100%)',
-              height: 'calc(80 / 104 * 100%)'
-            }}
-          >
-            <div className="h-full px-4 grid grid-cols-5 gap-x-1 items-end">
-              <div className="flex flex-col items-center gap-[5px]">
-                <div className="relative shrink-0">
-                  <div className="w-5 h-5 opacity-0"></div>
-                  <span className="absolute sm:-top-1 sm:-right-1 top-0 -right-1 flex items-center justify-center min-w-[14px] min-h-[14px] px-1 text-[8px] font-medium text-white dark:bg-white dark:text-black bg-primary rounded-full z-50">
-                    {cartItemsCount > 99 ? '99+' : cartItemsCount}
-                  </span>
-                </div>
-                <span className="text-xs2 opacity-0">{t('Cart')}</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
+    <div className={glassSurfaceNav('mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5')}>
+      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} badge={cartItemCount} />
+      <NavItem href={`/${name}/order/history`} isActive={isOrderActive} Icon={Receipt21} />
+      <NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
+      <NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={Building} />
+      <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
     </div>
-  )
+  );
 }
 
-export default BottomNavBar
+export default BottomNavBar;

src/components/product/VariableWeightSlider.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { formatPurchaseQuantity } from '@/app/[name]/(Main)/types/Types'
+import { ef } from '@/lib/helpers/utfNumbers'
+import { cn } from '@/lib/utils'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+interface VariableWeightSliderProps {
+  value: number
+  min: number
+  max: number
+  step: number
+  purchaseUnit?: string
+  onChange: (value: number) => void
+  onCommit?: (value: number) => void
+  className?: string
+}
+
+export function VariableWeightSlider({
+  value,
+  min,
+  max,
+  step,
+  purchaseUnit,
+  onChange,
+  onCommit,
+  className,
+}: VariableWeightSliderProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [tooltipLeft, setTooltipLeft] = useState(0)
+
+  const updateTooltipPosition = useCallback(() => {
+    const root = rootRef.current
+    if (!root) return
+    const thumb = root.querySelector<HTMLElement>('[data-slot="slider-thumb"]')
+    if (!thumb) return
+    const rootRect = root.getBoundingClientRect()
+    const thumbRect = thumb.getBoundingClientRect()
+    setTooltipLeft(thumbRect.left - rootRect.left + thumbRect.width / 2)
+  }, [])
+
+  useEffect(() => {
+    updateTooltipPosition()
+    window.addEventListener('resize', updateTooltipPosition)
+    return () => window.removeEventListener('resize', updateTooltipPosition)
+  }, [value, min, max, updateTooltipPosition])
+
+  const quantityLabel = ef(formatPurchaseQuantity(value, purchaseUnit))
+
+  return (
+    <div ref={rootRef} className={cn('relative w-full', className)}>
+      <div
+        className="pointer-events-none absolute -top-10 z-10 -translate-x-1/2 whitespace-nowrap rounded-lg bg-[#EAECF0] px-3.5 py-1.5 text-xs font-semibold text-foreground"
+        style={{ left: tooltipLeft }}
+      >
+        {quantityLabel}
+      </div>
+
+      <SliderPrimitive.Root
+        data-slot="slider"
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={(values) => onChange(values[0] ?? min)}
+        onValueCommit={(values) => onCommit?.(values[0] ?? min)}
+        className="relative flex w-full touch-none select-none items-center py-3"
+      >
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative h-[3px] w-full grow overflow-hidden rounded-full bg-[#EAECF0]"
+        >
+          <SliderPrimitive.Range
+            data-slot="slider-range"
+            className="absolute h-full bg-black"
+          />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          className="block size-5 shrink-0 cursor-grab rounded-full bg-black shadow-none outline-none active:cursor-grabbing focus-visible:ring-0"
+        />
+      </SliderPrimitive.Root>
+    </div>
+  )
+}

src/components/tab/TabContainer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { glassSurfaceNav } from "@/lib/styles/glassSurface";
 import React, { ReactElement, ReactNode, useCallback, useState } from 'react'
 import HorizontalScrollView from '../listview/HorizontalScrollView'
 import { TabHeader, TabItemProps } from './TabHeader';
@@ -38,7 +39,7 @@ export type TabContainerClassName = {
 
 export const TabContainerClassNames: TabContainerClassName = {
     wrapper: 'h-full',
-    scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] dark:bg-container/70 justify-center rounded-[32px] inline-flex items-center gap-10',
+    scrollView: glassSurfaceNav('h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden justify-center rounded-[32px] inline-flex items-center gap-10 !shadow-none'),
     header: '',
     headerDeactive: '',
     headerActive: '',

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import TopBar from '../topbar/TopBar'
 import SideMenu from '../menu/SideMenu'
 import BottomNavBar from '../navigation/BottomNavBar'
 import useToggle from '@/hooks/helpers/useToggle';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import usePreference from '@/hooks/helpers/usePreference';
+import { glassSurface } from '@/lib/styles/glassSurface';
+import clsx from 'clsx';
 
 type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
 
@@ -15,7 +17,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
   const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
   const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
   const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
-  const router = useRouter();
   const pathname = usePathname();
 
   const toggleProfileDrop = () => {
@@ -35,6 +36,12 @@ function ClientMenuRouteWrapper({ children }: Props) {
   }
 
   const location = usePathname();
+  const hideBottomNav = pathname.endsWith('/cart');
+  const mainRef = useRef<HTMLElement>(null);
+  const navContainerRef = useRef<HTMLDivElement>(null);
+  const targetProgressRef = useRef(0);
+  const currentProgressRef = useRef(0);
+  const rafIdRef = useRef(0);
 
   useEffect(() => {
     if (menuState) {
@@ -43,10 +50,54 @@ function ClientMenuRouteWrapper({ children }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location])
 
+  useEffect(() => {
+    const scrollEl = mainRef.current;
+    const navEl = navContainerRef.current;
+
+    if (!navEl) return;
+
+    if (!scrollEl || hideBottomNav) {
+      cancelAnimationFrame(rafIdRef.current);
+      navEl.style.transform = '';
+      targetProgressRef.current = 0;
+      currentProgressRef.current = 0;
+      return;
+    }
+
+    const SCROLL_RANGE = 150;
+    const LERP_FACTOR = 0.1;
+    const MIN_SCALE = 0.82;
+
+    const tick = () => {
+      const diff = targetProgressRef.current - currentProgressRef.current;
+      if (Math.abs(diff) < 0.0005) {
+        currentProgressRef.current = targetProgressRef.current;
+      } else {
+        currentProgressRef.current += diff * LERP_FACTOR;
+        rafIdRef.current = requestAnimationFrame(tick);
+      }
+      const scale = 1 - (1 - MIN_SCALE) * currentProgressRef.current;
+      navEl.style.transform = `scale(${scale.toFixed(4)})`;
+    };
+
+    const onScroll = () => {
+      targetProgressRef.current = Math.min(1, Math.max(0, scrollEl.scrollTop / SCROLL_RANGE));
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = requestAnimationFrame(tick);
+    };
+
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => {
+      scrollEl.removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [hideBottomNav, location]);
+
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
 
-      <div className="z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-container justify-between rounded-[32px] xl:w-[calc(100%-305px)]">
+      <div data-menu-topbar className={glassSurface('z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 justify-between rounded-[32px] xl:w-[calc(100%-305px)]')}>
         <TopBar
           profileDropState={profileDrop}
           toggleProfileDropState={toggleProfileDrop}
@@ -59,11 +110,16 @@ function ClientMenuRouteWrapper({ children }: Props) {
         />
       </div>
 
-
-      <div className="fixed bottom-0 left-0 right-0 z-45 px-4">
-        <BottomNavBar />
-      </div>
-
+      {!hideBottomNav && (
+        <div
+          ref={navContainerRef}
+          data-menu-bottom-nav
+          className="fixed bottom-7 left-0 right-0 z-45 px-4"
+          style={{ willChange: 'transform', transformOrigin: 'center bottom' }}
+        >
+          <BottomNavBar />
+        </div>
+      )}
 
       <SideMenu
         nightModeState={nightMode}
@@ -72,14 +128,13 @@ function ClientMenuRouteWrapper({ children }: Props) {
         toggleMenuState={toggleMenuState}
       />
 
-
       <main
-        className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end"
+        ref={mainRef}
+        className={clsx('relative noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end', hideBottomNav ? 'pb-4' : 'pb-12')}
       >
         {children}
       </main>
     </div>
-
   )
 }
 

src/components/wrapper/PreferenceWrapper.tsx

@@ -2,15 +2,23 @@
 
 import usePreference from '@/hooks/helpers/usePreference';
 import React, { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
 import { useGetAbout } from '@/app/[name]/(Main)/about/hooks/useAboutData';
 import SplashScreen from '@/components/overlays/SplashScreen';
 import { hexToOklch, calculateBrightness } from '@/lib/helpers/colorUtils';
+import {
+    applyCachedThemeToDom,
+    buildThemeCacheFromRestaurant,
+    clearRestaurantBackgroundOverrides,
+    getCachedMenuColor,
+    getThemeCache,
+    setThemeCache,
+} from '@/lib/helpers/themeCache';
 
 type Props = {
     children: React.ReactNode
 }
 
-// تابع برای اعمال رنگ primary
 function applyPrimaryColor(colorHex: string) {
     const root = document.documentElement;
     const oklchColor = hexToOklch(colorHex);
@@ -25,10 +33,12 @@ function applyPrimaryColor(colorHex: string) {
 }
 
 function PreferenceWrapper({ children }: Props) {
+    const params = useParams();
+    const restaurantSlug = typeof params.name === 'string' ? params.name : '';
+
     const { state: nightMode } = usePreference('night-mode', false);
     const { data: aboutData } = useGetAbout();
 
-    // بررسی اینکه آیا باید اسپلش نمایش داده بشه
     const [showSplash, setShowSplash] = useState(() => {
         if (typeof window === 'undefined') return true;
         const navigationEntries = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
@@ -39,50 +49,75 @@ function PreferenceWrapper({ children }: Props) {
     const [cachedLogo, setCachedLogo] = useState<string | null>(null);
     const [cachedName, setCachedName] = useState<string | null>(null);
 
-    // بارگذاری رنگ و اطلاعات از localStorage در اولین رندر
     useEffect(() => {
-        // بارگذاری رنگ
-        const savedColor = localStorage.getItem('theme-primary-color');
-        if (savedColor) {
+        const savedColor = getCachedMenuColor(restaurantSlug);
+        const cachedTheme = restaurantSlug ? getThemeCache(restaurantSlug) : null;
+        if (cachedTheme) {
+            applyCachedThemeToDom(cachedTheme);
+        } else if (savedColor) {
             applyPrimaryColor(savedColor);
         }
 
-        // بارگذاری لوگو و نام
         const savedLogo = localStorage.getItem('shop-logo');
         const savedName = localStorage.getItem('shop-name');
         if (savedLogo) setCachedLogo(savedLogo);
         if (savedName) setCachedName(savedName);
 
-        // ثبت اینکه app لود شده
         sessionStorage.setItem('app-loaded', 'true');
-    }, []);
+    }, [restaurantSlug]);
 
-    // اعمال رنگ primary از about (با ذخیره در localStorage)
     useEffect(() => {
-        if (aboutData?.data?.menuColor) {
-            // ذخیره رنگ و اطلاعات در localStorage
-            localStorage.setItem('theme-primary-color', aboutData.data.menuColor);
+        const menuColor = aboutData?.data?.menuColor;
+        if (!menuColor || !restaurantSlug) return;
 
-            // ذخیره لوگو و نام برای اسپلش
-            if (aboutData.data.logo) {
-                localStorage.setItem('shop-logo', aboutData.data.logo);
-            }
-            if (aboutData.data.name) {
-                localStorage.setItem('shop-name', aboutData.data.name);
-            }
+        const restaurant = aboutData.data;
+        const cached = getThemeCache(restaurantSlug);
+        const themeBase = buildThemeCacheFromRestaurant(restaurant);
 
-            applyPrimaryColor(aboutData.data.menuColor);
+        setThemeCache(restaurantSlug, {
+            menuColor,
+            bgType: themeBase.bgType,
+            bgUrl: restaurant.bgUrl,
+            bgBlur: themeBase.bgBlur,
+            bgOpacity: themeBase.bgOpacity,
+            bgOverlay: themeBase.bgOverlay,
+            isPattern: themeBase.isPattern,
+            patternDataUrl: cached?.patternDataUrl ?? null,
+        });
+
+        const updatedTheme = getThemeCache(restaurantSlug);
+        if (updatedTheme) {
+            applyCachedThemeToDom(updatedTheme);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [aboutData?.data?.menuColor]);
 
-    // اعمال تم تاریک/روشن
+        localStorage.setItem('theme-primary-color', menuColor);
+
+        if (restaurant.logo) {
+            localStorage.setItem('shop-logo', restaurant.logo);
+        }
+        if (restaurant.name) {
+            localStorage.setItem('shop-name', restaurant.name);
+        }
+
+        applyPrimaryColor(menuColor);
+    }, [aboutData?.data, restaurantSlug]);
+
     useEffect(() => {
-        const theme = nightMode;
-        document.documentElement.setAttribute("data-theme", theme ? "dark" : "light");
-    }, [nightMode]);
+        document.documentElement.setAttribute('data-theme', nightMode ? 'dark' : 'light');
+
+        if (nightMode) {
+            clearRestaurantBackgroundOverrides();
+            return;
+        }
+
+        if (!restaurantSlug) return;
+
+        const cached = getThemeCache(restaurantSlug);
+        if (cached) {
+            applyCachedThemeToDom(cached);
+        }
+    }, [nightMode, restaurantSlug]);
 
-    // بستن اسپلش بعد از مدت زمان مشخص
     useEffect(() => {
         if (showSplash) {
             const timer = setTimeout(() => {
@@ -93,7 +128,6 @@ function PreferenceWrapper({ children }: Props) {
         }
     }, [showSplash]);
 
-    // استفاده از داده‌های cache شده برای اسپلش
     const splashLogo = aboutData?.data?.logo || cachedLogo || undefined;
     const splashName = aboutData?.data?.name || cachedName || undefined;
 

src/config/const.ts

@@ -1,5 +1,5 @@
 // export const API_BASE_URL = "https://dmenuplus-api.dev.danakcorp.com";
 export const API_BASE_URL = "https://dkala-api.danakcorp.com";
-// export const API_BASE_URL = "http://10.191.241.88:4000";
+// export const API_BASE_URL = "http://192.168.99.131:4000";
 export const TOKEN_NAME = "dkala-t";
 export const REFRESH_TOKEN_NAME = "dkala-rt";

src/features/auth/components/AuthFormWrapper.tsx

@@ -2,6 +2,7 @@
 
 // import LoadingOverlay from '@/components/overlays/LoadingOverlay';
 import React from 'react'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = {
   isPending: boolean,
@@ -24,7 +25,7 @@ function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props)
       onSubmit={handleSubmit}
       className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
     >
-      <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
+      <div className={glassSurfaceCard('relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] overflow-clip lg:flex-row justify-between')}>
         {children}
         {/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
       </div>

src/features/providers/ReactQueryProvider.tsx

@@ -1,16 +1,45 @@
-'use client'
+"use client";
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { useState } from 'react'
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import {
+  getRestaurantSlugFromPath,
+  restorePersistedRestaurantQueries,
+} from "@/lib/helpers/themeCache";
 
-export function ReactQueryProvider({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient())
+function createQueryClient() {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        retryOnMount: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+
+  if (typeof window !== "undefined") {
+    const slug = getRestaurantSlugFromPath();
+    if (slug) {
+      restorePersistedRestaurantQueries(client, slug);
+    }
+  }
+
+  return client;
+}
+
+export function ReactQueryProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [queryClient] = useState(createQueryClient);
 
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
-  )
+  );
 }

src/lib/helpers/backgroundUtils.ts

@@ -0,0 +1,155 @@
+export const PATTERN_BACKGROUND_OPACITY = 0.05;
+export const PATTERN_VECTOR_OPACITY = 0.1;
+export const PRIMARY_LIGHT_OPACITY = 0.15;
+
+export type BgType = "pattern" | "custom" | "color";
+
+export type RestaurantBackgroundSettings = {
+  bgType?: BgType | string | null;
+  bgUrl?: string | null;
+  bgBlur?: number | string | null;
+  bgOpacity?: number | string | null;
+  bgOverlay?: string | null;
+  menuColor?: string | null;
+  isPattern?: boolean;
+};
+
+export const normalizeBgNumber = (value: unknown): number | null => {
+  if (value == null || value === "") return null;
+  const parsed = typeof value === "string" ? Number(value) : value;
+  if (typeof parsed !== "number" || Number.isNaN(parsed)) return null;
+  return parsed;
+};
+
+export const hexToRgba = (hex: string, alpha: number): string => {
+  const normalized = hex.replace("#", "");
+  if (normalized.length !== 6) {
+    return `rgba(0, 0, 0, ${alpha})`;
+  }
+
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const isUnsetBgValue = (value: unknown): boolean =>
+  value == null || value === "" || value === 0;
+
+const isCustomImageBackgroundLegacy = (
+  settings: RestaurantBackgroundSettings,
+): boolean => {
+  if (!settings.bgUrl) return false;
+
+  return (
+    !isUnsetBgValue(settings.bgBlur) ||
+    !isUnsetBgValue(settings.bgOpacity) ||
+    !isUnsetBgValue(settings.bgOverlay)
+  );
+};
+
+export const resolveBgType = (
+  settings: RestaurantBackgroundSettings,
+): BgType => {
+  if (settings.bgType === null) return "color";
+
+  const normalized = settings.bgType?.toLowerCase();
+  if (
+    normalized === "pattern" ||
+    normalized === "custom" ||
+    normalized === "color"
+  ) {
+    return normalized;
+  }
+
+  if (settings.isPattern === true) return "pattern";
+  if (settings.isPattern === false && settings.bgUrl && isCustomImageBackgroundLegacy(settings)) {
+    return "custom";
+  }
+  if (settings.isPattern === false) return "color";
+  if (isCustomImageBackgroundLegacy(settings)) return "custom";
+  if (settings.bgUrl) return "pattern";
+
+  return "color";
+};
+
+export const isCustomImageBackground = (
+  settings: RestaurantBackgroundSettings,
+): boolean => resolveBgType(settings) === "custom";
+
+export const isPatternBackground = (
+  settings: RestaurantBackgroundSettings,
+): boolean => resolveBgType(settings) === "pattern";
+
+export const isColorBackground = (
+  settings: RestaurantBackgroundSettings,
+): boolean => resolveBgType(settings) === "color";
+
+export const colorizeSvg = (
+  svg: string,
+  color: string,
+  vectorOpacity: number = PATTERN_VECTOR_OPACITY,
+): string => {
+  let result = svg.replace(/fill="(?!black|none)[^"]+"/g, `fill="${color}"`);
+  result = result.replace(
+    /fill-opacity="[^"]+"/g,
+    `fill-opacity="${vectorOpacity}"`,
+  );
+  result = result.replace(
+    /(<(?:path|circle|rect|ellipse|polygon)[^>]*fill="(?!black|none)[^"]+")(?![^>]*fill-opacity)/g,
+    `$1 fill-opacity="${vectorOpacity}"`,
+  );
+  return result;
+};
+
+export const applyColorBackgroundCssVariables = (menuColor: string) => {
+  const root = document.documentElement;
+  root.removeAttribute("data-pattern-bg");
+  root.removeAttribute("data-image-bg");
+  root.style.removeProperty("--bg-pattern-base");
+  root.style.removeProperty("--bg-pattern-vector");
+  root.style.setProperty(
+    "--background",
+    hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY),
+  );
+  root.style.setProperty(
+    "--primary-light",
+    hexToRgba(menuColor, PRIMARY_LIGHT_OPACITY),
+  );
+};
+
+export const applyPatternCssVariables = (menuColor: string) => {
+  const root = document.documentElement;
+  const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
+
+  root.setAttribute("data-pattern-bg", "true");
+  root.style.setProperty("--bg-pattern-base", baseTint);
+  root.style.setProperty(
+    "--bg-pattern-vector",
+    hexToRgba(menuColor, PATTERN_VECTOR_OPACITY),
+  );
+  root.style.setProperty(
+    "--primary-light",
+    hexToRgba(menuColor, PRIMARY_LIGHT_OPACITY),
+  );
+  root.style.setProperty("--background", baseTint);
+};
+
+export const clearPatternCssVariables = () => {
+  const root = document.documentElement;
+  root.removeAttribute("data-pattern-bg");
+  root.style.removeProperty("--bg-pattern-base");
+  root.style.removeProperty("--bg-pattern-vector");
+  root.style.removeProperty("--primary-light");
+  root.style.removeProperty("--background");
+};
+
+export const applyCustomImageCssVariables = () => {
+  const root = document.documentElement;
+  root.setAttribute("data-image-bg", "true");
+  root.removeAttribute("data-pattern-bg");
+};
+
+export const clearCustomImageCssVariables = () => {
+  document.documentElement.removeAttribute("data-image-bg");
+};

src/lib/helpers/fetchWithTimeout.ts

@@ -0,0 +1,13 @@
+const DEFAULT_TIMEOUT_MS = 5000;
+
+export async function fetchWithTimeout(
+  url: string,
+  options: RequestInit & { timeoutMs?: number } = {},
+): Promise<Response> {
+  const { timeoutMs = DEFAULT_TIMEOUT_MS, ...fetchOptions } = options;
+
+  return fetch(url, {
+    ...fetchOptions,
+    signal: AbortSignal.timeout(timeoutMs),
+  });
+}

src/lib/helpers/themeBootScript.ts

@@ -0,0 +1,3 @@
+export function getThemeBootScript(): string {
+  return `(function(){try{function isNight(){try{var p=localStorage.getItem("preference-storage");if(!p)return false;var o=JSON.parse(p);return o&&o.state&&o.state.items&&o.state.items["night-mode"]&&o.state.items["night-mode"].value===true}catch(v){return false}}var night=isNight(),e=document.documentElement;e.setAttribute("data-theme",night?"dark":"light");var s=location.pathname.split("/").filter(Boolean)[0],t=null;if(s&&s!=="auth"){var r=localStorage.getItem("restaurant-theme:"+s);if(r)t=JSON.parse(r)}if(!t||t.version!==1||!t.menuColor){var l=localStorage.getItem("theme-primary-color");if(l&&!night){var x=l.replace("#","");if(x.length===6){var p=parseInt(x.slice(0,2),16),f=parseInt(x.slice(2,4),16),m=parseInt(x.slice(4,6),16),b="rgba("+p+","+f+","+m+",0.05)";e.style.setProperty("--background",b)}}return}function h(n,a){var u=n.replace("#","");if(u.length!==6)return null;var v=parseInt(u.slice(0,2),16),g=parseInt(u.slice(2,4),16),y=parseInt(u.slice(4,6),16);return"rgba("+v+","+g+","+y+","+a+")"}function isUnset(v){return v==null||v===""||v===0}function isCustomImg(th){if(!th.bgUrl)return false;return !isUnset(th.bgBlur)||!isUnset(th.bgOpacity)||!isUnset(th.bgOverlay)}function resolveBgType(th){if(th.bgType===null)return"color";var bt=(th.bgType||"").toLowerCase();if(bt==="pattern"||bt==="custom"||bt==="color")return bt;if(th.isPattern===true)return"pattern";if(th.isPattern===false&&th.bgUrl&&isCustomImg(th))return"custom";if(th.isPattern===false)return"color";if(isCustomImg(th))return"custom";if(th.bgUrl)return"pattern";return"color"}if(t.primaryOklch){e.style.setProperty("--primary",t.primaryOklch);e.style.setProperty("--primary-foreground",t.primaryForeground||"oklch(1 0 0)")}if(night)return;var bt=resolveBgType(t);if(bt==="color"){var k=t.backgroundTint||h(t.menuColor,0.05),z=t.primaryLight||h(t.menuColor,0.15);k&&e.style.setProperty("--background",k);z&&e.style.setProperty("--primary-light",z);return};if(bt==="pattern"){e.setAttribute("data-pattern-bg","true");var k=t.backgroundTint||h(t.menuColor,0.05),w=t.bgPatternVector||h(t.menuColor,0.1),z=t.primaryLight||h(t.menuColor,0.15);k&&(e.style.setProperty("--background",k),e.style.setProperty("--bg-pattern-base",k));w&&e.style.setProperty("--bg-pattern-vector",w);z&&e.style.setProperty("--primary-light",z);if(k){var d=document.createElement("div");d.id="cached-theme-bg";d.setAttribute("aria-hidden","true");d.style.cssText="position:fixed;inset:0;pointer-events:none;z-index:0;background-color:"+k+(t.patternDataUrl?';background-image:url("'+t.patternDataUrl+'");background-repeat:repeat;background-size:auto':"")+";";document.body.appendChild(d)}}else if(bt==="custom"){e.setAttribute("data-image-bg","true");var d2=document.createElement("div");d2.id="cached-theme-bg";d2.setAttribute("aria-hidden","true");d2.style.cssText="position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;";var i=document.createElement("div");i.id="cached-theme-bg-img";i.style.cssText="position:absolute;inset:-40px;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:url(\\""+t.bgUrl+"\\");"+(t.bgBlur?"filter:blur("+t.bgBlur+"px);":"")+"opacity:"+(t.bgOpacity!=null?t.bgOpacity/100:1)+";";d2.appendChild(i);var ov=document.createElement("div");ov.id="cached-theme-bg-overlay";ov.style.cssText="position:absolute;inset:0;"+(t.bgOverlay&&Number(t.bgOverlay)>0?"background-color:rgba(0,0,0,"+Number(t.bgOverlay)/100+");":"");d2.appendChild(ov);document.body.appendChild(d2)}}catch(u){}})();`;
+}

src/lib/helpers/themeCache.ts

@@ -0,0 +1,456 @@
+import { calculateBrightness, hexToOklch } from "@/lib/helpers/colorUtils";
+import {
+  hexToRgba,
+  resolveBgType,
+  normalizeBgNumber,
+  PATTERN_BACKGROUND_OPACITY,
+  PATTERN_VECTOR_OPACITY,
+  PRIMARY_LIGHT_OPACITY,
+  type BgType,
+  type RestaurantBackgroundSettings,
+} from "@/lib/helpers/backgroundUtils";
+import type { AboutResponse } from "@/app/[name]/(Main)/about/types/Types";
+import type {
+  CategoriesResponse,
+  ProductsResponse,
+} from "@/app/[name]/(Main)/types/Types";
+import type { QueryClient } from "@tanstack/react-query";
+
+export type CachedRestaurantTheme = {
+  version: 1;
+  menuColor: string;
+  bgType?: BgType;
+  bgUrl?: string | null;
+  bgBlur?: number | null;
+  bgOpacity?: number | null;
+  bgOverlay?: string | null;
+  isPattern: boolean;
+  patternDataUrl?: string | null;
+  primaryOklch?: string;
+  primaryForeground?: string;
+  backgroundTint?: string;
+  bgPatternVector?: string;
+  primaryLight?: string;
+};
+
+const CACHE_VERSION = 1;
+const CACHE_KEY_PREFIX = "restaurant-theme";
+const LEGACY_COLOR_KEY = "theme-primary-color";
+const ABOUT_CACHE_PREFIX = "restaurant-about";
+const MENU_CACHE_PREFIX = "restaurant-menu";
+const CATEGORIES_CACHE_PREFIX = "restaurant-categories";
+export const THEME_BG_ELEMENT_ID = "cached-theme-bg";
+const THEME_BG_IMG_ID = "cached-theme-bg-img";
+const THEME_BG_OVERLAY_ID = "cached-theme-bg-overlay";
+const PREFERENCE_STORAGE_KEY = "preference-storage";
+
+export function isNightModeEnabled(): boolean {
+  if (typeof window === "undefined") return false;
+
+  try {
+    const raw = localStorage.getItem(PREFERENCE_STORAGE_KEY);
+    if (!raw) return false;
+    const parsed = JSON.parse(raw) as {
+      state?: { items?: Record<string, { value?: unknown }> };
+    };
+    return parsed?.state?.items?.["night-mode"]?.value === true;
+  } catch {
+    return false;
+  }
+}
+
+export function clearRestaurantBackgroundOverrides(): void {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+  root.removeAttribute("data-pattern-bg");
+  root.removeAttribute("data-image-bg");
+  root.style.removeProperty("--background");
+  root.style.removeProperty("--bg-pattern-base");
+  root.style.removeProperty("--bg-pattern-vector");
+  root.style.removeProperty("--primary-light");
+  document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
+}
+
+export function getThemeCacheKey(slug: string): string {
+  return `${CACHE_KEY_PREFIX}:${slug}`;
+}
+
+export function getAboutCacheKey(slug: string): string {
+  return `${ABOUT_CACHE_PREFIX}:${slug}`;
+}
+
+export function getMenuCacheKey(slug: string): string {
+  return `${MENU_CACHE_PREFIX}:${slug}`;
+}
+
+export function getCategoriesCacheKey(slug: string): string {
+  return `${CATEGORIES_CACHE_PREFIX}:${slug}`;
+}
+
+export function getRestaurantSlugFromPath(pathname?: string): string | null {
+  const path =
+    pathname ?? (typeof window !== "undefined" ? window.location.pathname : "");
+  const segment = path.split("/").filter(Boolean)[0];
+  if (!segment || segment === "auth") return null;
+  return segment;
+}
+
+export function computeThemeCssValues(menuColor: string) {
+  const primaryOklch = hexToOklch(menuColor);
+  const brightness = calculateBrightness(menuColor);
+
+  return {
+    primaryOklch: primaryOklch ?? undefined,
+    primaryForeground: brightness > 0.5 ? "oklch(0 0 0)" : "oklch(1 0 0)",
+    backgroundTint: hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY),
+    bgPatternVector: hexToRgba(menuColor, PATTERN_VECTOR_OPACITY),
+    primaryLight: hexToRgba(menuColor, PRIMARY_LIGHT_OPACITY),
+  };
+}
+
+export function getThemeCache(slug: string): CachedRestaurantTheme | null {
+  if (!slug || typeof window === "undefined") return null;
+
+  try {
+    const raw = localStorage.getItem(getThemeCacheKey(slug));
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as CachedRestaurantTheme;
+    if (parsed.version !== CACHE_VERSION || !parsed.menuColor) return null;
+
+    if (!parsed.primaryOklch) {
+      const enriched: CachedRestaurantTheme = {
+        ...parsed,
+        ...computeThemeCssValues(parsed.menuColor),
+        version: CACHE_VERSION,
+      };
+
+      try {
+        localStorage.setItem(getThemeCacheKey(slug), JSON.stringify(enriched));
+      } catch {
+        // Ignore quota errors during migration
+      }
+
+      return enriched;
+    }
+
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function getCachedMenuColor(slug?: string | null): string | null {
+  if (slug) {
+    const cached = getThemeCache(slug);
+    if (cached?.menuColor) return cached.menuColor;
+  }
+
+  if (typeof window === "undefined") return null;
+
+  try {
+    return localStorage.getItem(LEGACY_COLOR_KEY);
+  } catch {
+    return null;
+  }
+}
+
+export function getPersistedAboutData(slug: string): AboutResponse | undefined {
+  if (!slug || typeof window === "undefined") return undefined;
+
+  try {
+    const raw = localStorage.getItem(getAboutCacheKey(slug));
+    if (!raw) return undefined;
+    return JSON.parse(raw) as AboutResponse;
+  } catch {
+    return undefined;
+  }
+}
+
+export function setPersistedAboutData(slug: string, data: AboutResponse): void {
+  if (!slug || typeof window === "undefined") return;
+
+  try {
+    localStorage.setItem(getAboutCacheKey(slug), JSON.stringify(data));
+  } catch {
+    // Ignore quota errors
+  }
+}
+
+function readPersistedQueryData<T>(key: string): T | undefined {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return undefined;
+    return JSON.parse(raw) as T;
+  } catch {
+    return undefined;
+  }
+}
+
+function writePersistedQueryData<T>(key: string, data: T): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch {
+    // Ignore quota errors
+  }
+}
+
+export function getPersistedMenuData(slug: string): ProductsResponse | undefined {
+  if (!slug || typeof window === "undefined") return undefined;
+  return readPersistedQueryData<ProductsResponse>(getMenuCacheKey(slug));
+}
+
+export function setPersistedMenuData(slug: string, data: ProductsResponse): void {
+  if (!slug || typeof window === "undefined") return;
+  writePersistedQueryData(getMenuCacheKey(slug), data);
+}
+
+export function getPersistedCategoriesData(
+  slug: string,
+): CategoriesResponse | undefined {
+  if (!slug || typeof window === "undefined") return undefined;
+  return readPersistedQueryData<CategoriesResponse>(getCategoriesCacheKey(slug));
+}
+
+export function setPersistedCategoriesData(
+  slug: string,
+  data: CategoriesResponse,
+): void {
+  if (!slug || typeof window === "undefined") return;
+  writePersistedQueryData(getCategoriesCacheKey(slug), data);
+}
+
+export function restorePersistedRestaurantQueries(
+  client: QueryClient,
+  slug: string,
+): void {
+  const about = getPersistedAboutData(slug);
+  if (about) {
+    client.setQueryData(["about", slug], about);
+  }
+
+  const menu = getPersistedMenuData(slug);
+  if (menu) {
+    client.setQueryData(["menu", slug], menu);
+  }
+
+  const categories = getPersistedCategoriesData(slug);
+  if (categories) {
+    client.setQueryData(["categories", slug], categories);
+  }
+}
+
+export function setThemeCache(
+  slug: string,
+  theme: Omit<CachedRestaurantTheme, "version">,
+): void {
+  if (!slug || typeof window === "undefined") return;
+
+  const existing = getThemeCache(slug);
+  const css = computeThemeCssValues(theme.menuColor);
+  const payload: CachedRestaurantTheme = {
+    ...theme,
+    ...css,
+    patternDataUrl:
+      theme.patternDataUrl !== undefined
+        ? theme.patternDataUrl
+        : (existing?.patternDataUrl ?? null),
+    version: CACHE_VERSION,
+  };
+
+  try {
+    localStorage.setItem(getThemeCacheKey(slug), JSON.stringify(payload));
+    localStorage.setItem(LEGACY_COLOR_KEY, theme.menuColor);
+  } catch {
+    try {
+      const { patternDataUrl: _pattern, ...withoutPattern } = payload;
+      localStorage.setItem(
+        getThemeCacheKey(slug),
+        JSON.stringify({ ...withoutPattern, patternDataUrl: null }),
+      );
+      localStorage.setItem(LEGACY_COLOR_KEY, theme.menuColor);
+    } catch {
+      // Ignore quota errors
+    }
+  }
+}
+
+export function buildThemeCacheFromRestaurant(
+  settings: RestaurantBackgroundSettings,
+): Pick<
+  CachedRestaurantTheme,
+  | "menuColor"
+  | "bgType"
+  | "bgUrl"
+  | "bgBlur"
+  | "bgOpacity"
+  | "bgOverlay"
+  | "isPattern"
+> {
+  const bgType = resolveBgType(settings);
+
+  return {
+    menuColor: settings.menuColor || "#1E3A8A",
+    bgType,
+    bgUrl: settings.bgUrl,
+    bgBlur: normalizeBgNumber(settings.bgBlur),
+    bgOpacity: normalizeBgNumber(settings.bgOpacity),
+    bgOverlay: settings.bgOverlay ?? null,
+    isPattern: bgType === "pattern",
+  };
+}
+
+export function themeBackgroundMatches(
+  cached: CachedRestaurantTheme,
+  settings: RestaurantBackgroundSettings,
+): boolean {
+  const next = buildThemeCacheFromRestaurant(settings);
+  return (
+    cached.menuColor === next.menuColor &&
+    cached.bgType === next.bgType &&
+    cached.bgUrl === next.bgUrl &&
+    cached.bgBlur === next.bgBlur &&
+    cached.bgOpacity === next.bgOpacity &&
+    cached.bgOverlay === next.bgOverlay &&
+    cached.isPattern === next.isPattern
+  );
+}
+
+export function svgToDataUrl(svg: string): string {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+function ensureBgElement(): HTMLElement {
+  let bgElement = document.getElementById(THEME_BG_ELEMENT_ID);
+  if (!bgElement) {
+    bgElement = document.createElement("div");
+    bgElement.id = THEME_BG_ELEMENT_ID;
+    bgElement.setAttribute("aria-hidden", "true");
+    bgElement.style.position = "fixed";
+    bgElement.style.inset = "0";
+    bgElement.style.pointerEvents = "none";
+    bgElement.style.zIndex = "0";
+    document.body.appendChild(bgElement);
+  }
+  return bgElement;
+}
+
+export function applyCachedThemeToDom(theme: CachedRestaurantTheme): void {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+
+  if (theme.primaryOklch) {
+    root.style.setProperty("--primary", theme.primaryOklch);
+    root.style.setProperty(
+      "--primary-foreground",
+      theme.primaryForeground ?? "oklch(1 0 0)",
+    );
+  }
+
+  if (isNightModeEnabled()) {
+    clearRestaurantBackgroundOverrides();
+    return;
+  }
+
+  const bgType = resolveBgType(theme);
+
+  if (bgType === "color") {
+    document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
+    const tint =
+      theme.backgroundTint ??
+      hexToRgba(theme.menuColor, PATTERN_BACKGROUND_OPACITY);
+    const primaryLight =
+      theme.primaryLight ??
+      hexToRgba(theme.menuColor, PRIMARY_LIGHT_OPACITY);
+    root.removeAttribute("data-pattern-bg");
+    root.removeAttribute("data-image-bg");
+    root.style.removeProperty("--bg-pattern-base");
+    root.style.removeProperty("--bg-pattern-vector");
+    root.style.setProperty("--background", tint);
+    root.style.setProperty("--primary-light", primaryLight);
+    return;
+  }
+
+  if (bgType === "pattern") {
+    root.setAttribute("data-pattern-bg", "true");
+    root.removeAttribute("data-image-bg");
+
+    if (theme.backgroundTint) {
+      root.style.setProperty("--background", theme.backgroundTint);
+      root.style.setProperty("--bg-pattern-base", theme.backgroundTint);
+    }
+    if (theme.bgPatternVector) {
+      root.style.setProperty("--bg-pattern-vector", theme.bgPatternVector);
+    }
+    if (theme.primaryLight) {
+      root.style.setProperty("--primary-light", theme.primaryLight);
+    }
+
+    if (!theme.backgroundTint) return;
+
+    const bgElement = ensureBgElement();
+    bgElement.style.overflow = "";
+
+    document.getElementById(THEME_BG_IMG_ID)?.remove();
+    document.getElementById(THEME_BG_OVERLAY_ID)?.remove();
+
+    bgElement.style.backgroundColor = theme.backgroundTint;
+    if (theme.patternDataUrl) {
+      bgElement.style.backgroundImage = `url("${theme.patternDataUrl}")`;
+      bgElement.style.backgroundRepeat = "repeat";
+      bgElement.style.backgroundSize = "auto";
+    } else {
+      bgElement.style.removeProperty("background-image");
+      bgElement.style.removeProperty("background-repeat");
+      bgElement.style.removeProperty("background-size");
+    }
+    return;
+  }
+
+  if (bgType === "custom" && theme.bgUrl) {
+    root.setAttribute("data-image-bg", "true");
+    root.removeAttribute("data-pattern-bg");
+
+    const bgElement = ensureBgElement();
+    bgElement.style.backgroundColor = "";
+    bgElement.style.backgroundImage = "";
+    bgElement.style.overflow = "hidden";
+
+    let imgLayer = document.getElementById(THEME_BG_IMG_ID);
+    if (!imgLayer) {
+      imgLayer = document.createElement("div");
+      imgLayer.id = THEME_BG_IMG_ID;
+      imgLayer.style.position = "absolute";
+      imgLayer.style.inset = "-40px";
+      imgLayer.style.backgroundSize = "cover";
+      imgLayer.style.backgroundPosition = "center";
+      imgLayer.style.backgroundRepeat = "no-repeat";
+      bgElement.appendChild(imgLayer);
+    }
+
+    imgLayer.style.backgroundImage = `url("${theme.bgUrl}")`;
+    imgLayer.style.filter = theme.bgBlur ? `blur(${theme.bgBlur}px)` : "";
+    imgLayer.style.opacity =
+      theme.bgOpacity != null ? String(theme.bgOpacity / 100) : "1";
+
+    let overlayLayer = document.getElementById(THEME_BG_OVERLAY_ID);
+    if (!overlayLayer) {
+      overlayLayer = document.createElement("div");
+      overlayLayer.id = THEME_BG_OVERLAY_ID;
+      overlayLayer.style.position = "absolute";
+      overlayLayer.style.inset = "0";
+      bgElement.appendChild(overlayLayer);
+    }
+
+    const overlayOpacity =
+      theme.bgOverlay != null ? Number(theme.bgOverlay) / 100 : 0;
+    overlayLayer.style.backgroundColor =
+      overlayOpacity > 0 ? `rgba(0,0,0,${overlayOpacity})` : "";
+  }
+}
+
+export function removeCachedThemeBackground(): void {
+  document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
+}

src/lib/styles/glassSurface.ts

@@ -0,0 +1,33 @@
+import clsx, { type ClassValue } from "clsx";
+
+export const GLASS_SURFACE = "glass-surface";
+export const GLASS_SURFACE_FLAT = "glass-surface--flat";
+export const GLASS_SURFACE_SELECTED = "glass-surface--selected";
+export const GLASS_SURFACE_DISABLED = "glass-surface--disabled";
+export const GLASS_SURFACE_NAV = "glass-surface-nav";
+
+export function glassSurfaceNav(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE_NAV, extra);
+}
+
+export function glassSurface(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, extra);
+}
+
+export function glassSurfaceFlat(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, extra);
+}
+
+export function glassSurfaceSelected(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_SELECTED, extra);
+}
+
+/** Page-level card sections (about, cart, profile, etc.) */
+export function glassSurfaceCard(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, "rounded-container", extra);
+}
+
+/** Nested / secondary card sections with no shadow */
+export function glassSurfaceCardFlat(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, "rounded-container", extra);
+}

src/locales/fa/orders.json

@@ -19,8 +19,13 @@
     "Online": "پرداخت آنلاین",
     "Wallet": "پرداخت با کیف پول"
   },
+  "itemStatus": {
+    "needConfirmation": "در انتظار تایید قیمت نهایی",
+    "confirmed": "تایید شده"
+  },
   "status": {
     "new": "سفارش جدید",
+    "needConfirmation": "نیاز به تایید فروشگاه",
     "pendingPayment": "در انتظار پرداخت",
     "paid": "پرداخت شده",
     "confirmed": "تایید شده",

src/locales/fa/parallels.json

@@ -111,6 +111,7 @@
       "Title": "اقلام سفارش"
     },
     "ButtonSubmit": "پرداخت",
+    "ButtonRegister": "ثبت",
     "PayableAmountLabel": "مبلغ قابل پرداخت"
   }
 }

src/styles/glass.css

@@ -0,0 +1,72 @@
+/* Glass surface — Figma: white 60%, border, shadow, backdrop blur */
+
+.glass-surface {
+  background-color: rgba(255, 255, 255, 0.6);
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
+}
+
+html[data-pattern-bg="true"] .glass-surface,
+html[data-image-bg="true"] .glass-surface {
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+}
+
+html[data-theme="dark"] .glass-surface {
+  background-color: color-mix(in oklch, var(--container) 60%, transparent);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+}
+
+.glass-surface--flat {
+  box-shadow: none;
+}
+
+.glass-surface--selected {
+  background-color: rgba(255, 255, 255, 0.85) !important;
+}
+
+html[data-theme="dark"] .glass-surface--selected {
+  background-color: color-mix(in oklch, var(--container) 85%, transparent) !important;
+}
+
+/* Figma disabled category: white 40%, 2px border, blur 12 */
+.glass-surface--disabled {
+  background-color: rgba(255, 255, 255, 0.4) !important;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  box-shadow: none;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+html[data-pattern-bg="true"] .glass-surface--disabled,
+html[data-image-bg="true"] .glass-surface--disabled {
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+html[data-theme="dark"] .glass-surface--disabled {
+  background-color: color-mix(in oklch, var(--container) 40%, transparent) !important;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.glass-surface-nav {
+  background-color: rgba(255, 255, 255, 0.32);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: 0px -2px 14px 0px rgba(0, 0, 0, 0.15);
+}
+
+html[data-pattern-bg="true"] .glass-surface-nav,
+html[data-image-bg="true"] .glass-surface-nav {
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+html[data-theme="dark"] .glass-surface-nav {
+  background-color: color-mix(in oklch, var(--container) 32%, transparent);
+  border-color: rgba(255, 255, 255, 0.2);
+}

src/zustand/receiptStore.ts

@@ -14,6 +14,7 @@ type ReceiptStore = {
   setSlug: (slug: string) => void;
   increment: (id: string | number) => void;
   decrement: (id: string | number) => void;
+  setQuantity: (id: string | number, quantity: number) => void;
   clear: () => void;
 };
 
@@ -45,6 +46,13 @@ export const useReceiptStore = create<ReceiptStore>()(
             },
           };
         }),
+      setQuantity: (id, quantity) =>
+        set((state) => ({
+          items: {
+            ...state.items,
+            [id]: { quantity },
+          },
+        })),
     }),
     {
       name: "receipt-storage",