Enable tablet mobile layout

Implemented orientation-aware mobile detection and adjusted mobile bottom nav:
- Added useIsMobile hook with portrait+width logic and orientation/resize listeners.
- Updated MobileBottomNav to render only on mobile via hook and removed md:hidden behavior.
- Kept desktop layout for landscape/tablets while enabling portrait tablets to use mobile bottom navigation.

X-Lovable-Edit-ID: edt-c679e4a6-21e3-4b78-a806-0022cd9e911f

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 === '/' 

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;