responsive

app/category/components/CategoryHero.tsx

@@ -14,10 +14,10 @@ const CategoryHero: FC = () => {
           backgroundImage: "linear-gradient(108.5deg, rgba(33, 88, 140, 0.1) 89.65%, rgba(237, 243, 248, 0.3) 100%)",
         }}
       >
-        <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-10">
-          <div className="flex-1 space-y-3 sm:space-y-4">
-            <h1 className="text-[#0A1B2C] text-2xl sm:text-3xl lg:text-[32px] font-bold">{CATEGORY_TITLE}</h1>
-            <p className="text-sm text-[#0A1B2C]/80 leading-7 max-w-140">{CATEGORY_DESCRIPTION}</p>
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:gap-10">
+          <div className="min-w-0 flex-1 space-y-3 sm:space-y-4">
+            <h1 className="text-2xl font-bold text-[#0A1B2C] sm:text-3xl lg:text-[32px]">{CATEGORY_TITLE}</h1>
+            <p className="max-w-140 text-sm leading-7 text-[#0A1B2C]/80">{CATEGORY_DESCRIPTION}</p>
           </div>
 
           <div className="relative z-10 mx-auto shrink-0 lg:mx-0 lg:-mb-28">
@@ -27,13 +27,13 @@ const CategoryHero: FC = () => {
               width={360}
               height={360}
               priority
-              className="aspect-square w-55 sm:w-70 lg:w-[320px] rounded-2xl sm:rounded-3xl object-cover shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)]"
+              className="aspect-square w-48 rounded-2xl object-cover shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)] sm:w-60 sm:rounded-3xl lg:w-80"
             />
           </div>
         </div>
       </section>
 
-      <nav aria-label="مسیر صفحه" className="relative z-0 flex items-center justify-start gap-2 bg-secondary px-4 sm:px-8 lg:px-30 py-3 text-sm text-[#3F4D5A]">
+      <nav aria-label="مسیر صفحه" className="relative z-0 flex items-center justify-start gap-2 overflow-x-auto bg-secondary px-4 py-3 text-sm whitespace-nowrap text-[#3F4D5A] sm:px-8 lg:px-30">
         <Link href="/" className="transition-colors hover:text-primary">
           صفحه اصلی
         </Link>

app/category/components/CategoryProducts.tsx

@@ -5,7 +5,7 @@ import { CATEGORY_PRODUCTS } from "../constants";
 
 const CategoryProducts: FC = () => {
   return (
-    <GridWrapper desktop={4} mobile={2} gapDesktop={24} gapMobile={12}>
+    <GridWrapper desktop={4} mobile={2} gapDesktop={24} gapMobile={12} className="sm:gap-4">
       {CATEGORY_PRODUCTS.map((title, index) => (
         <ProductCard key={`${title}-${index}`} title={title} />
       ))}

app/category/components/CategoryToolbar.tsx

@@ -5,13 +5,13 @@ import { SORT_OPTIONS } from "../constants";
 
 const CategoryToolbar: FC = () => {
   return (
-    <div className="flex items-center gap-4">
-      <div className="max-w-50">
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+      <div className="min-w-0 flex-1">
         <Input variant="search" placeholder="جستجو..." className="rounded-xl border-[#E9EFF4]" />
       </div>
 
-      <div className="max-w-50">
-        <Select options={SORT_OPTIONS} placeholder="مرتب‌سازی" className="min-w-50 rounded-xl border-[#E9EFF4]" />
+      <div className="min-w-0 w-full sm:w-auto sm:max-w-50">
+        <Select options={SORT_OPTIONS} placeholder="مرتب‌سازی" className="w-full rounded-xl border-[#E9EFF4] sm:min-w-50" />
       </div>
     </div>
   );

app/category/page.tsx

@@ -9,14 +9,12 @@ const CategoryDetailPage = () => {
     <div>
       <CategoryHero />
 
-      <div className="space-y-4 px-4 mt-10 sm:space-y-5 sm:px-8 lg:px-30 pt-8 sm:pt-10 pb-8 sm:pb-10">
-        <div className="lg:grid lg:gap-x-6">
-          <CategoryToolbar />
-        </div>
-
+      <div className="px-4 pb-8 pt-8 sm:px-8 sm:pb-10 sm:pt-10 lg:px-30 lg:pb-10 lg:pt-16">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-6">
           <CategoryFilters />
-          <div className="min-w-0 flex-1">
+
+          <div className="min-w-0 flex-1 space-y-4 sm:space-y-5">
+            <CategoryToolbar />
             <CategoryProducts />
           </div>
         </div>