From 0da1f47573f813f6b2524c6e744517fd4838ae6b Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Sun, 13 Sep 2026 20:57:25 +0200
Subject: [PATCH] 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 | 24 ++++++++++++++++++++++--
 src/routes/basket.tsx         |  3 +++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/routes/basket.module.scss b/src/routes/basket.module.scss
index 648a789..c76dc6b 100644
--- a/src/routes/basket.module.scss
+++ b/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 {
diff --git a/src/routes/basket.tsx b/src/routes/basket.tsx
index d1b0203..2f489a2 100644
--- a/src/routes/basket.tsx
+++ b/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>
           ) : (