From 39ff692496083f0e7a0603c53f80f195470db4d3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 22:14:39 +0000
Subject: [PATCH] Changes

---
 src/components/MobileBottomNav.tsx |  6 +++++-
 src/hooks/use-mobile.tsx           | 26 ++++++++++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
index 1674718..39efe83 100644
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -1,11 +1,13 @@
 import { Home, Package, ShoppingCart } from 'lucide-react';
 import { Link, useLocation } from 'react-router-dom';
 import { useCart } from '@/context/CartContext';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { cn } from '@/lib/utils';
 
 export function MobileBottomNav() {
   const location = useLocation();
   const { items } = useCart();
+  const isMobile = useIsMobile();
   const cartCount = items.reduce((sum, item) => sum + item.quantity, 0);
 
   const navItems = [
@@ -14,8 +16,10 @@ export function MobileBottomNav() {
     { to: '#cart', icon: ShoppingCart, label: 'Cart', badge: cartCount },
   ];
 
+  if (!isMobile) return null;
+
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-700 border-t border-zinc-600 md:hidden">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-700 border-t border-zinc-600">
       <div className="flex justify-around items-center h-16 px-2 safe-area-inset-bottom">
         {navItems.map((item) => {
           const isActive = item.to === '/' 
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
index 502fd32..5efa4d1 100644
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -1,18 +1,32 @@
 import * as React from "react";
 
 const MOBILE_BREAKPOINT = 768;
+const TABLET_PORTRAIT_BREAKPOINT = 1024;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    const checkMobile = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      const isPortrait = height > width;
+      
+      // Mobile if: small screen OR tablet in portrait mode
+      const isMobileView = width < MOBILE_BREAKPOINT || (width < TABLET_PORTRAIT_BREAKPOINT && isPortrait);
+      setIsMobile(isMobileView);
+    };
+
+    // Listen for both resize and orientation changes
+    window.addEventListener("resize", checkMobile);
+    window.addEventListener("orientationchange", checkMobile);
+    
+    checkMobile();
+    
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+      window.removeEventListener("orientationchange", checkMobile);
     };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
   }, []);
 
   return !!isMobile;