styles enhancements

src/pages/menu/components/CategoriesList/CategoriesList.module.css

@@ -108,7 +108,7 @@
   -ms-overflow-style: none;
   position: sticky;
   top: 0;
-  background: #fff;
+  background: var(--background);
   z-index: 10;
   overflow: hidden;
   text-align: center;
@@ -132,7 +132,7 @@
   .categoriesContainer {
     cursor: grab;
   }
-  
+
   .categoriesContainer:active {
     cursor: grabbing;
   }
@@ -384,7 +384,9 @@
   width: 100vw !important;
   z-index: 1000 !important;
   border-bottom: 1px solid var(--ant-color-border) !important;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),
+    var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow) !important;
   background: #fff !important;
   animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
   transform-origin: top center !important;

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -251,9 +251,9 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     ...(xs || md
                       ? {
                           // backgroundColor: "#fff6e0",
-                          borderBottom: "solid 1px var(--primary)",
-                          borderRight: "solid 1px var(--primary)",
-                          borderLeft: "solid 1px var(--primary)",
+                          borderBottom: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+                          borderRight: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+                          borderLeft: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
                           borderTop: isCategoriesSticky
                             ? "solid 1px var(--primary)"
                             : 0,

src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css

@@ -112,11 +112,12 @@
 .restaurantInfoSkeleton {
   text-align: center;
   padding: 0 16px;
+  margin-top: 10px;
 }
 
 /* Loyalty Card Skeleton */
 .loyaltySkeleton {
-  margin: 16px 0;
+  margin-bottom: 16px;
   padding: 0 16px;
 }
 
@@ -278,7 +279,6 @@
     margin-bottom: 10px;
   }
 
-
   .restaurantInfoSkeleton {
     padding: 0 24px;
   }
@@ -291,7 +291,6 @@
     margin-bottom: 32px;
   }
 
-
   .skeletonContainer .ant-skeleton {
     margin-bottom: 16px;
   }