:root {
  /* Colors */
  --primary: #FF6B6B;
  --primary-dark: #EE5A5A;
  --secondary: #FFD93D;
  --accent: #4ECDC4;
  --bg-body: #F9F9FB;
  --bg-card: #FFFFFF;
  --text-main: #2D3436;
  --text-muted: #636E72;
  --border-light: #F1F2F6;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  padding-bottom: 80px; /* Space for bottom nav */
}

a {
  text-decoration: none;
  color: inherit;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: 28px; line-height: 34px; }
h2 { font-size: 22px; line-height: 28px; }
h3 { font-size: 18px; line-height: 24px; }
p { font-size: 15px; color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.font-bold { font-weight: 700; }
.text-primary { color: var(--primary); }

/* Layout */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  background: var(--bg-body);
  min-height: 100vh;
}

.section {
  margin-bottom: var(--space-xl);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* Header */
.header {
  padding: var(--space-xl) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  overflow: hidden;
}

/* Search */
.search-bar {
  background: var(--bg-card);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  color: var(--text-muted);
}

/* Categories */
.category-scroller {
  display: flex;
  overflow-x: auto;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin: 0 calc(var(--space-md) * -1); /* Break out of container */
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  scrollbar-width: none; /* Firefox */
}
.category-scroller::-webkit-scrollbar { display: none; }

.category-pill {
  background: var(--bg-card);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.category-pill.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.food-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease;
  position: relative;
}

.food-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--border-light);
  position: relative;
}

.card-content {
  padding: var(--space-md);
}

.rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

/* Profile Styles */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) 0;
  text-align: center;
}

.profile-avatar-lg {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  margin-bottom: var(--space-md);
  overflow: hidden;
  border: 4px solid var(--bg-card);
  box-shadow: var(--shadow-md);
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  background: var(--bg-card);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 var(--space-sm);
  border-right: 1px solid var(--border-light);
}
.stat-item:last-child { border-right: none; }

.settings-list {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s;
}
.settings-item:last-child { border-bottom: none; }
.settings-item:active { background: var(--border-light); }

.icon-chevron-right {
  width: 16px;
  height: 16px;
  opacity: 0.3;
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background: currentColor;
}

/* Horizontal Card (Cart/List) */
.food-card-row {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}
.food-card-row .card-image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
}
.food-card-row .card-content {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Detail Page */
.hero-image {
  width: 100%;
  height: 300px;
  background: var(--border-light);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  position: relative;
}

.detail-content {
  padding: var(--space-lg);
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--border-light);
  padding: 4px;
  border-radius: var(--radius-full);
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: none;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 12px 24px 24px; /* Extra bottom padding for safe area */
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border-light);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.nav-item.active {
  color: var(--primary);
}

.nav-icon {
  width: 24px;
  height: 24px;
  background: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

/* Floating Action Button */
.fab-cart {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-main);
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  z-index: 90;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.4);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Placeholders */
.placeholder-avatar { width: 100%; height: 100%; background: #ddd; }
.placeholder-icon {
  width: 20px; height: 20px; background: currentColor; opacity: 0.5;
  border-radius: 2px;
}

/* Icons (CSS Shapes for now) */
.icon-home { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 22V12H15V22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 22V12H15V22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-heart { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.84 4.60999C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.60999L12 5.66999L10.94 4.60999C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.60999C2.1283 5.64169 1.54871 7.04096 1.54871 8.49999C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3094 9.93789 22.4518 9.22248 22.4518 8.49999C22.4518 7.77751 22.3094 7.0621 22.0329 6.39464C21.7563 5.72718 21.351 5.12075 20.84 4.60999V4.60999Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.84 4.60999C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.60999L12 5.66999L10.94 4.60999C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.60999C2.1283 5.64169 1.54871 7.04096 1.54871 8.49999C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3094 9.93789 22.4518 9.22248 22.4518 8.49999C22.4518 7.77751 22.3094 7.0621 22.0329 6.39464C21.7563 5.72718 21.351 5.12075 20.84 4.60999V4.60999Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-cart { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-user { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-search { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 21L16.65 16.65" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 21L16.65 16.65" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-back { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 19L5 12L12 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 19L5 12L12 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-plus { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-minus { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-star { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="black" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="black" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.icon-location { mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }

.bg-orange { background-color: #FFF3E0; color: #F57C00; }
.bg-red { background-color: #FFEBEE; color: #D32F2F; }
.bg-green { background-color: #E8F5E9; color: #388E3C; }
.bg-blue { background-color: #E3F2FD; color: #1976D2; }

/* Sticky Top Bar for Detail/Cart */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Mobile Responsive Styles */
@media (max-width: 767px) {
  /* Layout Adjustments */
  .container {
    padding: 0 var(--space-md);
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  .section {
    margin-bottom: var(--space-lg);
  }

  /* Grid System - Stack to 2 columns */
  .card-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Header Compactness */
  .header {
    padding: var(--space-md) 0;
  }
  
  h1 { font-size: 24px; line-height: 30px; }
  h2 { font-size: 20px; line-height: 26px; }
  
  /* Search Bar */
  .search-bar {
    margin-bottom: var(--space-md);
    padding: 10px 14px;
  }

  /* Category Scroller - Ensure touch friendly */
  .category-scroller {
    padding-bottom: var(--space-sm);
    margin: 0 -16px; /* Break out of container padding */
    padding: 0 16px 16px 16px;
    -webkit-overflow-scrolling: touch;
  }
  
  .category-pill {
    padding: 6px 14px;
    font-size: 13px;
  }

  /* Touch Targets */
  .btn, .nav-item, .category-pill, .food-card {
    min-height: 44px; /* Apple Human Interface Guidelines */
    cursor: pointer;
  }

  .nav-item {
    padding: 8px 0; /* Increase touch area */
  }

  /* Profile Adjustments */
  .stats-row {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
  }
  
  .stat-item p:first-child {
    font-size: 14px;
  }
  
  /* Cart/Food Row stacking if needed */
  .food-card-row {
    padding: var(--space-sm);
  }
  
  .food-card-row .card-image {
    width: 64px; 
    height: 64px;
  }

  /* Detail Page Mobile */
  .hero-image {
    height: 240px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .detail-content {
    padding: var(--space-md) 0;
  }

  /* Bottom Nav safe area */
  .bottom-nav {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 374px) {
  /* Very small screens (iPhone SE, Fold) */
  .card-grid {
    grid-template-columns: 1fr; /* Stack vertically on very narrow screens */
  }
  
  h1 { font-size: 22px; }
  
  .nav-item span {
    display: none; /* Hide labels if too cramped */
  }
}