Match the basket's empty-state CTA styling to the orders page

Basket's "Browse the menu" button still had its original plain style
(flat opacity hover, no arrow) from before that button was reworked on
the orders page. Bring it in line: shadow, hover lift, and the shifting
arrow.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RvYdJ3os7tumimsLdLu2j9

src/routes/basket.module.scss

@@ -50,17 +50,37 @@
 }
 
 .emptyCta {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
   padding: $space-2 $space-4;
   border-radius: $radius;
   background: $color-primary;
   color: $color-primary-contrast;
   font-weight: 600;
   text-decoration: none;
-  transition: opacity 0.15s ease;
+  box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 
   &:hover {
-    opacity: 0.9;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px color-mix(in srgb, $color-primary 45%, transparent);
   }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  }
+}
+
+.emptyCtaArrow {
+  transition: transform 0.15s ease;
+}
+
+.emptyCta:hover .emptyCtaArrow {
+  transform: translateX(3px);
 }
 
 .lines {

src/routes/basket.tsx

@@ -78,6 +78,9 @@ const BasketPage = () => {
               </p>
               <Link to="/" className={styles.emptyCta}>
                 Browse the menu
+                <span className={styles.emptyCtaArrow} aria-hidden="true">
+                  →
+                </span>
               </Link>
             </motion.div>
           ) : (