From e4d1f8bb307cdf3198421cfb7ae6c59bcad73003 Mon Sep 17 00:00:00 2001
From: Varun Bisoi <vishu700t@gmail.com>
Date: Mon, 13 Jul 2026 23:53:07 +0530
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=93=A6=20[Theme=20Add]=20fixed=20ligh?=
 =?UTF-8?q?t/dark=20toggle=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cart.html     | 10 ----------
 css/style.css | 26 +++-----------------------
 js/main.js    | 14 --------------
 js/theme.js   | 18 ++++++++++++++++++
 orders.html   |  8 --------
 5 files changed, 21 insertions(+), 55 deletions(-)
 create mode 100644 js/theme.js

diff --git a/cart.html b/cart.html
index 7638139..947bbe8 100644
--- a/cart.html
+++ b/cart.html
@@ -263,16 +263,6 @@ <h3>Contact Us</h3>
   window.cartManager.subscribe(renderCart);
 </script>
 
-<!-- Optional scripts -->
-<script src="js/accessibility.js"></script>
-<script src="js/geolocation.js"></script>
-<script src="js/sanitization.js"></script>
-<script src="js/loyalty.js"></script>
-<script src="js/translations.js"></script>
-<script src="js/i18n.js"></script>
-<script src="js/main.js"></script>
-<script src="js/auth.js"></script>
-<script src="js/delivery-tracker.js"></script>
 
 </body>
 </html>
diff --git a/css/style.css b/css/style.css
index 9a3ad1e..893c6f2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2611,8 +2611,8 @@ body.dark p{
 
 /* Header & Navigation */
 body.dark header {
-  background: #2c2c2c;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
+  /* Keep orange brand background — only deepen the shadow for dark mode depth */
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
 }
 body.dark nav a {
   color: #f5f5f5;
@@ -2960,27 +2960,7 @@ select:focus-visible {
   }
 }
 
-/* Dark mode support for better contrast */
-@media (prefers-color-scheme: light) {
-  body {
-    background: #1a1a1a;
-    color: #e0e0e0;
-  }
-
-  .card {
-    background: #2d2d2d;
-  }
-
-  .suggestion-item {
-    background: #2d2d2d;
-    color: #e0e0e0;
-  }
-
-  .suggestion-item.focused {
-    background: #bf360c;
-    color: #fff;
-  }
-}
+/* Note: theme switching is handled via body.dark class (see auth.js setupThemeToggle) */
 
 
 /* Improve contrast of disabled buttons */
diff --git a/js/main.js b/js/main.js
index 3f7292d..8327b5e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1550,19 +1550,5 @@ function showSkeletonCartItems(count = 2) {
   for (let i = 0; i < count; i++) cartItemsContainer.appendChild(createSkeletonCartItem());
 }
  
-// ===== Dark Mode =====
-const toggleBtn = document.getElementById("theme-toggle");
  
-document.addEventListener("DOMContentLoaded", () => {
-  if (localStorage.getItem("theme") === "dark") {
-    document.body.classList.add("dark");
-  }
-});
- 
-if (toggleBtn) {
-  toggleBtn.addEventListener("click", () => {
-    document.body.classList.toggle("dark");
-    localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
-  });
-}
  
diff --git a/js/theme.js b/js/theme.js
new file mode 100644
index 0000000..d9e6cda
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,18 @@
+// ===== Theme Toggle (standalone — for pages that don't load main.js) =====
+document.addEventListener("DOMContentLoaded", () => {
+  // Restore saved theme on page load
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+
+  const toggleBtn = document.getElementById("theme-toggle");
+  if (toggleBtn) {
+    toggleBtn.addEventListener("click", () => {
+      document.body.classList.toggle("dark");
+      localStorage.setItem(
+        "theme",
+        document.body.classList.contains("dark") ? "dark" : "light"
+      );
+    });
+  }
+});
diff --git a/orders.html b/orders.html
index 932d146..ecff3cf 100644
--- a/orders.html
+++ b/orders.html
@@ -411,14 +411,6 @@ <h4 class="checkout-section-title" style="margin-top: 1.25rem;">Have a promo cod
   <script src="js/auth.js"></script>
   <script src="js/live-tracking.js"></script>
   <script src="js/delivery-tracker.js"></script>
-  <script src="js/geolocation.js"></script>
-  <script src="js/sanitization.js"></script>
-  <script src="js/loyalty.js"></script>
-  <script src="js/translations.js"></script>
-  <script src="js/i18n.js"></script>
-  <script src="js/live-tracking.js"></script>
-  <script src="js/main.js"></script>
-  <script src="js/auth.js"></script>
 
   <script>
     const params = new URLSearchParams(window.location.search);

From d76ce616956bb860d84acedfdd08d384a5b1c6ba Mon Sep 17 00:00:00 2001
From: Varun Bisoi <57100019+vishu786-vb@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:13:58 +0530
Subject: [PATCH 2/6] Delete css/style.css

---
 css/style.css | 3884 -------------------------------------------------
 1 file changed, 3884 deletions(-)
 delete mode 100644 css/style.css

diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 74da7d4..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,3884 +0,0 @@
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Light.ttf') format('truetype');
-  font-weight: 300;
-}
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
-  font-weight: 700;
-}
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
-  font-weight: 500;
-}
-    * {
-      margin: 0; padding: 0; box-sizing: border-box;
-    }
-    html {
-      scroll-behavior: smooth;
-    }
-    body {
-      font-family: 'Poppins', sans-serif;
-      background: #fff8f0;
-      color: var(--text-color, #3e3e3e);
-      line-height: 1.6;
-      font-size: 16px;
-      overflow-x: hidden;
-    }
-    :root {
-      --primary: #bf360c;
-      --secondary: #fff3e0;
-      --accent: #ff5722;
-      --card-bg: #ffffff;
-      --section-bg: #fff3e0;
-      --text-color: #3e2723;
-      --button-bg: #ff7b54;
-      --button-hover: #e64a19;
-    }
-    a {
-      text-decoration: none;
-      color: inherit;
-    }
-    img {
-      max-width: 100%;
-      display: block;
-      border-radius: 12px;
-    }
-    button {
-      cursor: pointer;
-      font-family: inherit;
-    }
-
-    /* ===== Container ===== */
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 1rem;
-    }
-
-    /* ===== Toast Notification ===== */
-
-.toast-notification {
-  position: fixed;
-  top: 90px;
-  left: 50%;
-  transform: translateX(-50%) translateY(-20px);
-
-  background: linear-gradient(135deg, #ff7a00, #ff9a3c);
-  color: #fff;
-
-  padding: 14px 24px;
-  border-radius: 14px;
-
-  font-size: 15px;
-  font-weight: 600;
-
-  min-width: 280px;
-  text-align: center;
-
-  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
-
-  opacity: 0;
-  transition: all 0.35s ease;
-
-  z-index: 9999;
-  pointer-events: none;
-
-  border: 1px solid rgba(255,255,255,0.2);
-  backdrop-filter: blur(8px);
-}
-
-.toast-notification.show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-.coupon-section {
-  background: #fff3e0;
-  border: 1px dashed #ff8f4b;
-  border-radius: 14px;
-  padding: 1rem;
-  margin: 1.5rem 0;
-}
-
-.coupon-section h2 {
-  margin-bottom: 0.75rem;
-  font-size: 1.05rem;
-  color: #d84315;
-}
-
-.coupon-input-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.coupon-input-row input {
-  flex: 1 1 220px;
-  padding: 0.95rem 1rem;
-  border: 1px solid #ffcc9b;
-  border-radius: 12px;
-  background: #fff;
-  color: #3e3e3e;
-}
-
-.coupon-input-row button,
-.secondary-btn {
-  padding: 0.95rem 1.25rem;
-  border: none;
-  border-radius: 12px;
-  font-weight: 700;
-}
-
-.coupon-input-row button {
-  background: #ff7b54;
-  color: #fff;
-}
-
-.secondary-btn {
-  background: #eceff1;
-  color: #263238;
-  border: 1px solid #cfd8dc;
-}
-
-.coupon-message {
-  margin-top: 0.75rem;
-  font-size: 0.95rem;
-  min-height: 1.2rem;
-}
-
-.coupon-message.success {
-  color: #2e7d32;
-}
-
-.coupon-message.error {
-  color: #c62828;
-}
-
-.coupon-applied-label {
-  margin-top: 0.5rem;
-  font-size: 0.95rem;
-  color: #4e342e;
-}
-
-.price-breakdown {
-  background: #fff;
-  border: 1px solid #ffe0b2;
-  border-radius: 14px;
-  padding: 1rem;
-}
-
-.price-breakdown p {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  margin: 0 0 0.75rem;
-}
-
-.price-breakdown .grand-total {
-  font-weight: 700;
-  color: #bf360c;
-}
-
-@media (max-width: 600px) {
-  .coupon-input-row {
-    flex-direction: column;
-  }
-}
-
-/* ===== Mobile Responsive ===== */
-
-@media (max-width: 600px) {
-  .toast-notification {
-    width: calc(100% - 32px);
-    min-width: unset;
-
-    left: 16px;
-    right: 16px;
-
-    transform: translateY(-20px);
-
-    font-size: 14px;
-    padding: 12px 16px;
-  }
-
-  .toast-notification.show {
-    transform: translateY(0);
-  }
-}
-
-/* Cart Count Bounce */
-
-.cart-bounce {
-  animation: cartBounce 0.4s ease;
-}
-
-@keyframes cartBounce {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.3);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-    /* ===== Header ===== */
-    header {
-      position: sticky;
-      top: 0;
-      z-index: 1000;
-      background: #ff5722;
-      box-shadow: 0 3px 10px rgb(255 87 34 / 0.7);
-      user-select: none;
-    }
-    .header-inner {
-      max-width: 1600px;
-      margin: 0 auto;
-      padding: 1rem 1.8rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .logo {
-      font-weight: 700;
-      font-size: 1.8rem;
-      color: #fff;
-      letter-spacing: 1px;
-      user-select: none;
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-      gap: 0.4rem;
-      margin-right: 2rem;
-    }
-    .navbar-logo-img {
-      height: 42px;
-      width: 42px;
-      object-fit: cover;
-      border-radius: 50%;
-      background: white;
-      padding: 2px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-    .logo:hover .navbar-logo-img {
-      transform: scale(1.08);
-    }
-    nav {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-      font-weight: 600;
-    }
-    nav a {
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      transition: background 0.3s ease;
-    }
-    nav a:hover,
-    nav a.active {
-      background: #e64a19;
-      box-shadow: 0 0 8px rgb(230 74 25 / 0.8);
-    }
-
-    /* ===== Modern Cart Button ===== */
-    .cart-btn-modern {
-      display: inline-flex !important;
-      align-items: center;
-      gap: 0.6rem;
-      position: relative;
-      padding: 0.4rem 1.1rem !important;
-      border-radius: 50px !important;
-      background: rgba(255, 255, 255, 0.1) !important;
-      border: 1px solid rgba(255, 255, 255, 0.15) !important;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-      overflow: visible !important;
-      text-decoration: none !important;
-      white-space: nowrap !important;
-    }
-    .cart-btn-modern:hover {
-      background: #e64a19 !important;
-      border-color: #ff5722 !important;
-      box-shadow: 0 4px 15px rgba(230, 74, 25, 0.4) !important;
-      transform: translateY(-1px);
-    }
-    .cart-btn-modern.active {
-      background: #ff5722 !important;
-      border-color: #ff7b54 !important;
-      box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
-    }
-    .cart-icon-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .cart-svg-icon {
-      width: 18px;
-      height: 18px;
-      stroke: #ffffff;
-      stroke-width: 2.2;
-      transition: transform 0.2s ease;
-    }
-    .cart-btn-modern:hover .cart-svg-icon {
-      transform: scale(1.1);
-    }
-    .cart-badge {
-      position: absolute;
-      top: -9px;
-      right: -9px;
-      background-color: #ffc107;
-      color: #3e2723;
-      font-size: 0.65rem;
-      font-weight: 800;
-      min-width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-      border: 1.5px solid #ff5722;
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-    
-    /* Bounce animation when item added to cart */
-    .cart-bounce {
-      animation: badgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
-    }
-    @keyframes badgeBounce {
-      0%, 100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.45);
-      }
-    }
-
-    /* ===== Dropdown Nav ===== */
-    .dropdown {
-      position: relative;
-    }
-    .dropdown-toggle {
-      display: flex;
-      align-items: center;
-      gap: 0.3rem;
-      user-select: none;
-    }
-    .dropdown-toggle::after {
-      content: "▼";
-      font-size: 0.6rem;
-      color: white;
-    }
-    .dropdown-menu {
-      position: absolute;
-      top: 2.8rem;
-      left: 0;
-      background: #ff5722;
-      border-radius: 8px;
-      min-width: 140px;
-      box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(10px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-    .dropdown-menu a {
-      display: block;
-      padding: 0.6rem 1rem;
-      color: white;
-      font-weight: 600;
-      border-radius: 8px;
-      transition: background 0.3s ease;
-    }
-    .dropdown-menu a:hover {
-      background: #e64a19;
-    }
-    .dropdown:hover .dropdown-menu,
-    .dropdown:focus-within .dropdown-menu {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-    /* When JS toggles the open class (keyboard interaction), show the menu the same way as hover */
-    .dropdown.open .dropdown-menu {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    /* Force-hide override for dropdown when JS needs to hide it despite :hover */
-    .dropdown.force-hide .dropdown-menu {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      transform: translateY(10px) !important;
-      pointer-events: none !important;
-    }
-
-    /* ===== Auth/Profile Nav ===== */
-    .auth-nav-item {
-      display: inline-flex;
-      align-items: center;
-      margin-left: 0.25rem;
-      position: relative;
-      z-index: 12;
-    }
-
-    .login-btn-nav {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      padding: 0.55rem 1.1rem;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #ff5722;
-      font-weight: 700;
-      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
-      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
-    }
-
-    .login-btn-nav:hover,
-    .login-btn-nav:focus-visible {
-      transform: translateY(-1px);
-      background: #fff2e9;
-      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
-    }
-
-    .profile-menu {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .profile-toggle {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 42px;
-      height: 42px;
-      border: none;
-      border-radius: 50%;
-      background: #ffffff;
-      color: #ff5722;
-      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
-      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
-      padding: 0;
-    }
-
-    .profile-toggle:hover,
-    .profile-toggle:focus-visible {
-      transform: translateY(-1px);
-      background: #fff2e9;
-      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
-    }
-
-    .profile-avatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-    }
-
-    .profile-avatar svg {
-      width: 22px;
-      height: 22px;
-      stroke-width: 1.9;
-    }
-
-    .profile-dropdown {
-      position: absolute;
-      top: calc(100% + 0.8rem);
-      right: 0;
-      width: min(260px, calc(100vw - 1.5rem));
-      padding: 0.85rem;
-      border-radius: 20px;
-      background: #ffffff;
-      border: 1px solid rgba(255, 87, 34, 0.14);
-      box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(10px);
-      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-      z-index: 1002;
-    }
-
-    .profile-menu.open .profile-dropdown {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .profile-dropdown-header {
-      padding: 0.25rem 0.55rem 0.85rem;
-      border-bottom: 1px solid rgba(255, 87, 34, 0.1);
-      margin-bottom: 0.35rem;
-    }
-
-    .profile-dropdown-name {
-      display: block;
-      font-weight: 700;
-      color: #2d2a26;
-      word-break: break-word;
-    }
-
-    .profile-dropdown-email {
-      display: block;
-      margin-top: 0.2rem;
-      font-size: 0.82rem;
-      color: #6c757d;
-      word-break: break-word;
-    }
-
-    .profile-dropdown a,
-    .profile-dropdown button {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: flex-start;
-      padding: 0.8rem 0.95rem;
-      border: none;
-      border-radius: 14px;
-      background: transparent;
-      color: #2d2a26;
-      font: inherit;
-      font-weight: 600;
-      text-align: left;
-      transition: background-color 0.2s ease, color 0.2s ease;
-    }
-
-    .profile-dropdown a:hover,
-    .profile-dropdown a:focus-visible,
-    .profile-dropdown button:hover,
-    .profile-dropdown button:focus-visible {
-      background: #fff2e9;
-      color: #ff5722;
-    }
-
-    .profile-dropdown-logout {
-      margin-top: 0.15rem;
-      color: #c2410c;
-    }
-
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    @media (max-width: 860px) {
-      .profile-dropdown {
-        right: 0;
-        left: auto;
-      }
-    }
-
-    @media (max-width: 600px) {
-      .auth-nav-item {
-        margin-left: 0;
-      }
-
-      .login-btn-nav {
-        min-height: 44px;
-        padding: 0.55rem 1rem;
-      }
-
-      .profile-toggle {
-        width: 44px;
-        height: 44px;
-      }
-
-      .profile-dropdown {
-        width: min(240px, calc(100vw - 1rem));
-      }
-    }
-
-    /* ===== Search Bar ===== */
-    .search-bar {
-      position: relative;
-      margin-left: 1.2rem;
-      display: flex;
-      align-items: center;
-    }
-    .search-bar input {
-      padding: 0.5rem 2.4rem 0.5rem 1rem;
-      border-radius: 24px;
-      border: 1px solid rgba(255, 87, 34, 0.15);
-      background-color: #fdfbf8;
-      outline: none;
-      font-size: 0.95rem;
-      color: #3e2723;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      width: 210px;
-      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
-    }
-    .search-bar input::placeholder {
-      color: #a1887f;
-      opacity: 0.8;
-    }
-    .search-bar input:hover {
-      border-color: rgba(255, 87, 34, 0.4);
-    }
-    .search-bar input:focus {
-      background-color: #ffffff;
-      border-color: #ff5722;
-      box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15), 0 4px 12px rgba(255, 87, 34, 0.08);
-    }
-    .search-bar button {
-      position: absolute;
-      right: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      border: none;
-      background: transparent;
-      color: #ff5722;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      border-radius: 50%;
-      transition: all 0.2s ease;
-      user-select: none;
-    }
-    .search-bar button:hover {
-      background-color: rgba(255, 87, 34, 0.08);
-    }
-    .search-bar button:active {
-      transform: translateY(-50%) scale(0.9);
-    }
-    .search-bar button .search-svg {
-      width: 16px;
-      height: 16px;
-      stroke-width: 2.5;
-      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s ease;
-    }
-    .search-bar button:hover .search-svg {
-      transform: scale(1.1);
-      stroke: #bf360c;
-    }
-
-    /* ===== Hero Section ===== */
-    .hero {
-      background: rgb(255, 228, 205);
-      padding: 5rem 1rem 6rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 4.5rem;
-      flex-wrap: wrap;
-      height: 90vh;
-    }
-    .hero-content {
-      flex: 1 1 400px;
-      max-width: 640px;
-    }
-    .hero-content h1 {
-      color: #ff5722;
-      font-size: 3rem;
-      font-weight: 700;
-      margin-bottom: 2rem;
-      user-select: none;
-      line-height: 3.7rem;
-    }
-    .hero-content p {
-      font-size: 1.1rem;
-      margin-bottom: 2rem;
-      font-weight: 600;
-      user-select: text;
-      line-height: 1.4;
-      color: black;
-    }
-    .btn-primary {
-      background: #e64a19;
-      color: white;
-      font-weight: 700;
-      padding: 1rem 2.5rem;
-      border-radius: 50px;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.4);
-      border: none;
-      transition: background 0.3s ease, color 0.3s ease;
-      user-select: none;
-    }
-    .btn-primary:hover {
-      background: #ff6333;
-      color: #fff;
-      box-shadow: 0 10px 30px rgb(230 74 25 / 0.6);
-    }
-    .hero-image {
-      flex: 1 1 400px;
-      max-width: 480px;
-      border-radius: 25px;
-      overflow: hidden;
-    }
-    .hero-image img {
-      width: 100%;
-      height: auto;
-      display: block;
-      user-select: none;
-    }
-
-    .festival-banner {
-      display: none;
-      padding: 2rem 0;
-      background: linear-gradient(135deg, var(--primary), var(--secondary));
-      color: #ffffff;
-      overflow: hidden;
-    }
-    .festival-banner-inner {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1.5rem;
-      padding: 1.5rem 0;
-    }
-    .festival-banner-copy {
-      max-width: 620px;
-    }
-    .festival-chip {
-      display: inline-block;
-      background: rgba(255,255,255,0.22);
-      color: #fff;
-      padding: 0.55rem 1rem;
-      border-radius: 999px;
-      font-weight: 700;
-      letter-spacing: 0.04em;
-      margin-bottom: 1rem;
-    }
-    .festival-banner-copy h2 {
-      font-size: clamp(2rem, 3vw, 3rem);
-      margin-bottom: 0.75rem;
-      color: #fff;
-    }
-    .festival-banner-copy p {
-      font-size: 1.05rem;
-      line-height: 1.8;
-      max-width: 620px;
-      color: rgba(255,255,255,0.92);
-    }
-    .festival-banner-image img {
-      width: min(100%, 320px);
-      border-radius: 24px;
-      box-shadow: 0 20px 45px rgba(0,0,0,0.18);
-      border: 4px solid rgba(255,255,255,0.18);
-    }
-
-    /* ===== Specials & Menu Section ===== */
-    section.specials,
-    section.menu,
-    section.recently-viewed,
-    section.state-explorer {
-      padding: 4rem 1rem 5rem;
-      background: var(--section-bg);
-    }
-
-    .state-explorer {
-      background: linear-gradient(180deg, #fff7ed 0%, #fff3e0 100%);
-    }
-
-    .state-scroll-wrapper {
-      display: grid;
-      grid-auto-flow: column;
-      grid-template-rows: repeat(3, auto);
-      grid-auto-columns: minmax(220px, 1fr);
-      gap: 1rem;
-      overflow-x: auto;
-      overflow-y: hidden;
-      scroll-behavior: smooth;
-      padding-bottom: 0.35rem;
-      scrollbar-width: none;
-    }
-
-    .state-scroll-wrapper::-webkit-scrollbar {
-      display: none;
-    }
-
-    .state-card {
-      display: flex;
-      flex-direction: column;
-      width: 220px;
-      min-height: 220px;
-      border: 1px solid #ffe0b2;
-      border-radius: 18px;
-      overflow: hidden;
-      background: #fff;
-      box-shadow: 0 10px 28px rgb(191 54 12 / 0.12);
-      cursor: pointer;
-      text-align: left;
-      transition: transform 0.25s ease, box-shadow 0.25s ease;
-      padding: 0;
-      color: inherit;
-    }
-
-    .state-card:hover,
-    .state-card:focus-visible {
-      transform: translateY(-4px) scale(1.02);
-      box-shadow: 0 16px 32px rgb(191 54 12 / 0.18);
-      outline: none;
-    }
-
-    .state-card img {
-      width: 100%;
-      height: 130px;
-      object-fit: cover;
-      border-radius: 0;
-      margin-bottom: 0;
-    }
-
-    .state-card p {
-      padding: 0.9rem 1rem 1rem;
-      margin: 0;
-      font-weight: 700;
-      color: #3e2723;
-      line-height: 1.35;
-    }
-
-    .state-card span {
-      display: block;
-      font-size: 0.92rem;
-      color: #795548;
-      padding: 0 1rem 1rem;
-    }
-    .section-title {
-      text-align: center;
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: var(--primary);
-      margin-bottom: 2.5rem;
-      user-select: none;
-    }
-    .cards {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 2rem;
-      justify-content: center;
-    }
-    .menu-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 2rem;
-      justify-content: center;
-      justify-items: center;
-      width: 100%;
-      margin-top: 2rem;
-    }
-    .card {
-      background: var(--card-bg);
-      border-radius: 20px;
-      box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-      width: 260px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 1rem 1rem 1.8rem;
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
-      user-select: none;
-      cursor: default;
-    }
-    .card:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 15px 35px rgb(0 0 0 / 0.2);
-    }
-    .add-btn{
-      background-color: green;
-      padding: 3px 8px;
-      border-radius: 15px;
-      color: white;
-      border: none;
-    }
-    .card.festival-featured {
-      border: 2px solid var(--accent);
-      box-shadow: 0 18px 40px rgba(255,87,34,0.15);
-    }
-    .festival-badge {
-      display: inline-block;
-      background: rgba(255,255,255,0.95);
-      color: var(--accent);
-      border-radius: 999px;
-      font-weight: 700;
-      padding: 0.35rem 0.75rem;
-      font-size: 0.8rem;
-      margin-bottom: 0.75rem;
-    }
-    .card img {
-      border-radius: 15px;
-      width: 250px;
-      height: 170px;
-      object-fit: cover;
-      margin-bottom: 1rem;
-      pointer-events: none;
-      user-select: none;
-    }
-    .card h3 {
-      font-size: 1.4rem;
-      font-weight: 700;
-      margin-bottom: 0.6rem;
-      color: #3e2723;
-      user-select: text;
-    }
-    .card p.price {
-      font-weight: 600;
-      color: #bf360c;
-      margin-bottom: 1rem;
-      user-select: text;
-    }
-    .card p.description {
-      font-size: 0.9rem;
-      color: #5d4037;
-      margin-bottom: 1.3rem;
-      text-align: center;
-      user-select: text;
-    }
-    .btn-add {
-      background: #ff5722;
-      color: white;
-      border-radius: 40px;
-      padding: 0.5rem 1.8rem;
-      border: none;
-      font-weight: 700;
-      font-size: 1rem;
-      box-shadow: 0 6px 15px rgb(255 87 34 / 0.6);
-      user-select: none;
-      transition: background 0.3s ease;
-    }
-    .btn-add:hover {
-      background: #e64a19;
-      box-shadow: 0 8px 20px rgb(230 74 25 / 0.8);
-    }
-
-    /* ===== Menu Filters ===== */
-    .filter-buttons {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 3rem;
-      flex-wrap: wrap;
-      user-select: none;
-    }
-    .filter-btn {
-      background: #fff3e0;
-      border: 2px solid var(--accent);
-      color: var(--accent);
-      padding: 0.6rem 1.8rem;
-      border-radius: 50px;
-      font-weight: 600;
-      font-size: 1rem;
-      transition: all 0.3s ease;
-    }
-    .filter-btn.active,
-    .filter-btn:hover {
-      background: var(--accent);
-      color: white;
-      box-shadow: 0 6px 20px rgba(255, 87, 34, 0.6);
-    }
-
-    /* ===== Cart Sidebar ===== */
-    #cart-sidebar {
-      position: fixed;
-      top: 0;
-      right: -400px;
-      width: 380px;
-      height: 100vh;
-      background: #fff3e0;
-      box-shadow: -6px 0 25px rgb(0 0 0 / 0.25);
-      transition: right 0.4s ease;
-      display: flex;
-      flex-direction: column;
-      z-index: 1500;
-      user-select: none;
-    }
-    #cart-sidebar.open {
-      right: 0;
-    }
-    #cart-header {
-      background: #ff5722;
-      color: white;
-      padding: 1.3rem 1.5rem;
-      font-weight: 700;
-      font-size: 1.4rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    #cart-close {
-      background: transparent;
-      border: none;
-      color: white;
-      font-size: 1.6rem;
-      font-weight: 900;
-      cursor: pointer;
-      user-select: none;
-    }
-    #cart-items {
-      flex-grow: 1;
-      overflow-y: auto;
-      padding: 1rem 1.5rem;
-    }
-    .cart-item {
-      display: flex;
-      gap: 1rem;
-      margin-bottom: 1.4rem;
-      border-radius: 15px;
-      background: white;
-      box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
-      padding: 1rem;
-      align-items: center;
-    }
-    .cart-item img {
-      width: 80px;
-      height: 60px;
-      border-radius: 12px;
-      object-fit: cover;
-      user-select: none;
-    }
-    .cart-item-info {
-      flex: 1;
-      user-select: text;
-    }
-    .cart-item-info h4 {
-      font-weight: 700;
-      color: #3e2723;
-      margin-bottom: 0.3rem;
-    }
-    .cart-item-info p {
-      color: #5d4037;
-      font-size: 0.9rem;
-      margin-bottom: 0.5rem;
-    }
-    .qty-controls {
-      display: flex;
-      gap: 0.4rem;
-      align-items: center;
-      font-weight: 700;
-      user-select: none;
-    }
-    .qty-controls button {
-      background: #ff5722;
-      color: white;
-      border: none;
-      padding: 0.3rem 0.7rem;
-      font-size: 1.1rem;
-      border-radius: 5px;
-      transition: background 0.3s ease;
-      cursor: pointer;
-    }
-    .qty-controls button:hover {
-      background: #e64a19;
-    }
-    .qty-controls span {
-      min-width: 24px;
-      text-align: center;
-      font-size: 1rem;
-      user-select: none;
-    }
-    .cart-item-remove {
-      background: transparent;
-      border: none;
-      color: #bf360c;
-      font-weight: 700;
-      cursor: pointer;
-      font-size: 0.95rem;
-      user-select: none;
-      transition: color 0.3s ease;
-    }
-    .cart-item-remove:hover {
-      color: #e64a19;
-    }
-    #cart-footer {
-      padding: 1rem 1.5rem;
-      border-top: 2px solid #ff5722;
-      font-weight: 700;
-      font-size: 1.3rem;
-      color: #bf360c;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    #checkout-btn {
-      background: #ff5722;
-      border: none;
-      padding: 0.7rem 2rem;
-      border-radius: 50px;
-      font-weight: 700;
-      color: white;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
-      transition: background 0.3s ease;
-      user-select: none;
-    }
-    #checkout-btn:hover:not(:disabled) {
-      background: #e64a19;
-      box-shadow: 0 10px 30px rgb(230 74 25 / 0.9);
-    }
-    #checkout-btn:disabled {
-      background: #ffb399;
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    /* ===== About Section ===== */
-    section.about {
-      padding: 5rem 1rem 7rem;
-      background: white;
-      color: #3e3e3e;
-      user-select: text;
-    }
-    .about .container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    .about h2 {
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: #bf360c;
-      margin-bottom: 2rem;
-      text-align: center;
-      user-select: none;
-    }
-    .about p {
-      font-size: 1.1rem;
-      line-height: 1.5;
-      color: #5d4037;
-      margin-bottom: 2rem;
-    }
-    .team {
-      display: flex;
-      gap: 2rem;
-      justify-content: center;
-      flex-wrap: wrap;
-      margin-bottom: 3rem;
-    }
-   
-   .team-member {
-   width: 100%;
-   max-width: 420px;
-   min-width: 280px;
-   height: 320px;
-   flex: 1 1 320px;
-   perspective: 1000px;
-   background: transparent;
-   border-radius: 20px;
-   box-shadow: none;
-   padding: 0;
-   text-align: center;
-   user-select: none;
-}
-
-.team-member-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.8s ease;
-  transform-style: preserve-3d;
-}
-
-.team-member:hover .team-member-inner,
-.team-member:focus .team-member-inner {
-  transform: rotateY(180deg);
-}
-
-.team-member-front,
-.team-member-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: #fff3e0;
-  border-radius: 20px;
-  box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
-  backface-visibility: hidden;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  padding: 1.5rem 1.2rem;
-  box-sizing: border-box;
-}
-
-.team-member-front:hover,
-.team-member-back:hover {
-  box-shadow: 0 12px 28px rgb(0 0 0 / 0.15);
-}
-
-.team-member-back {
-  transform: rotateY(180deg);
-}
-
-.team-member img {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  margin-bottom: 1rem;
-  object-fit: cover;
-  user-select: none;
-}
-
-.team-member h4 {
-  font-weight: 700;
-  margin-bottom: 0.3rem;
-  color: #3e2723;
-}
-
-.team-member p {
-  font-size: 0.9rem;
-  color: #5d4037;
-  user-select: text;
-}
-
-.team-member-back p {
-  max-width: 85%;
-  line-height: 1.5;
-}
-
-    /* ===== Contact Section ===== */
-    section.contact {
-      padding: 5rem 1rem 7rem;
-      background: white;
-      color: #3e3e3e;
-      user-select: text;
-    }
-    section.contact .container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    section.contact h2 {
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: #bf360c;
-      margin-bottom: 3rem;
-      text-align: center;
-      user-select: none;
-    }
-
-    /* ===== Contact Form ===== */
-    form.contact-form {
-      max-width: 500px;
-      margin: 0 auto;
-      background: #fff3e0;
-      padding: 2rem 2.5rem;
-      border-radius: 20px;
-      box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
-      user-select: text;
-    }
-    form.contact-form label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-weight: 600;
-      color: #bf360c;
-      user-select: none;
-    }
-    form.contact-form input,
-    form.contact-form textarea {
-      width: 100%;
-      padding: 0.7rem 1rem;
-      border-radius: 12px;
-      border: 2px solid #ffcc99;
-      font-size: 1rem;
-      margin-bottom: 1.3rem;
-      font-family: inherit;
-      resize: vertical;
-      transition: border-color 0.3s ease;
-      user-select: text;
-    }
-    form.contact-form input:focus,
-    form.contact-form textarea:focus {
-      border-color: #ff5722;
-      outline: none;
-    }
-    form.contact-form textarea {
-      min-height: 100px;
-    }
-    .error-msg {
-      font-size: 0.85rem;
-      color: #c0392b;
-      margin-top: -1rem;
-      margin-bottom: 0.8rem;
-      min-height: 1rem;
-      display: block;
-      user-select: none;
-    }
-    .form-success-msg {
-      margin-top: 0.8rem;
-      margin-bottom: 1rem;
-      padding: 0.8rem 1rem;
-      background-color: #e8f5e9;
-      color: #2e7d32;
-      border-left: 4px solid #43a047;
-      border-radius: 8px;
-      font-size: 0.95rem;
-      font-weight: 600;
-      animation: fadeInDown 0.4s ease;
-    }
-    @keyframes fadeInDown {
-      from { opacity: 0; transform: translateY(-8px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-    .btn-submit {
-      background: #ff5722;
-      color: white;
-      font-weight: 700;
-      padding: 0.9rem 2rem;
-      border-radius: 50px;
-      border: none;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
-      transition: background 0.3s ease;
-      user-select: none;
-      width: 100%;
-    }
-    .btn-submit:hover {
-      background: #e64a19;
-    }
-
-    /* ===== Testimonials ===== */
-    section.testimonials {
-      padding: 5rem 1rem 7rem;
-      background: #fff3e0;
-      color: #3e2723;
-      user-select: none;
-    }
-    .testimonial-cards {
-      max-width: 900px;
-      margin: 0 auto;
-      display: flex;
-      gap: 2rem;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-    .testimonial {
-      background: white;
-      padding: 1.8rem 2rem;
-      border-radius: 20px;
-      box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
-      max-width: 320px;
-      position: relative;
-      font-style: italic;
-      user-select: text;
-    }
-    .testimonial::before {
-      content: "“";
-      position: absolute;
-      font-size: 4rem;
-      top: -20px;
-      left: 20px;
-      color: #ff5722;
-      font-weight: 900;
-      user-select: none;
-    }
-    .testimonial p {
-      margin-bottom: 1rem;
-    }
-    .testimonial .author {
-      font-weight: 700;
-      text-align: right;
-      color: #bf360c;
-      user-select: text;
-    }
-
-    /* ===== Newsletter Signup ===== */
-    section.newsletter {
-      background: #ff5722;
-      color: white;
-      padding: 3rem 1rem 5rem;
-      text-align: center;
-      user-select: none;
-    }
-    section.newsletter h2 {
-      font-weight: 700;
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-    }
-    section.newsletter p {
-      font-weight: 500;
-      margin-bottom: 1.5rem;
-    }
-    .newsletter-form {
-      max-width: 400px;
-      margin: 0 auto;
-      display: flex;
-      gap: 0.6rem;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    .newsletter-form input {
-      padding: 0.8rem 1rem;
-      border-radius: 40px;
-      border: none;
-      flex-grow: 1;
-      font-size: 1rem;
-      outline: none;
-      font-family: inherit;
-    }
-    .newsletter-form button {
-      padding: 0.8rem 1.8rem;
-      background: #fff;
-      border: none;
-      border-radius: 40px;
-      color: #ff5722;
-      font-weight: 700;
-      box-shadow: 0 6px 15px rgb(255 87 34 / 0.8);
-      transition: background 0.3s ease;
-      user-select: none;
-      font-size: 1rem;
-      cursor: pointer;
-    }
-    .newsletter-form button:hover {
-      background: #fbe9e7;
-    }
-
-    /* ===== Modern Premium Footer ===== */
-    footer {
-      background: #fff3e0; /* Warm cream background */
-      color: #3e2723; /* Deep warm brown text */
-      padding: 4rem 2rem 2rem;
-      border-top: 1px solid rgba(255, 87, 34, 0.15);
-      user-select: text; /* Allow selecting text */
-      font-family: 'Poppins', sans-serif;
-    }
-    
-    .footer-container {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      gap: 2rem;
-      margin-bottom: 3rem;
-    }
-    
-    @media (max-width: 1024px) {
-      .footer-container {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-    
-    @media (max-width: 768px) {
-      .footer-container {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-    
-    @media (max-width: 480px) {
-      .footer-container {
-        grid-template-columns: 1fr;
-      }
-    }
-    
-    .footer-brand {
-      font-size: 1.8rem;
-      font-weight: 700;
-      color: #ff5722; /* Vibrant orange logo */
-      margin-bottom: 1rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-family: 'Poppins', sans-serif;
-    }
-    .footer-logo-img {
-      height: 40px;
-      width: 40px;
-      object-fit: cover;
-      border-radius: 50%;
-      background: white;
-      padding: 2px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-    .footer-brand:hover .footer-logo-img {
-      transform: scale(1.08);
-    }
-    
-    .footer-desc {
-      font-size: 0.95rem;
-      color: #5d4037;
-      line-height: 1.6;
-      max-width: 320px;
-    }
-    
-    .footer-column h3 {
-      font-size: 1.15rem;
-      font-weight: 700;
-      color: #bf360c; /* Deep brand orange */
-      margin-bottom: 1.25rem;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    
-    .footer-links {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-    
-    .footer-links li a {
-      color: #5d4037;
-      font-size: 0.95rem;
-      font-weight: 500;
-      transition: all 0.2s ease;
-      display: inline-block;
-    }
-    
-    .footer-links li a:hover {
-      color: #ff5722;
-      transform: translateX(3px);
-    }
-    
-    .footer-contact-info {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      color: #5d4037;
-      font-size: 0.95rem;
-    }
-    
-    .footer-contact-info li {
-      line-height: 1.5;
-    }
-    
-    .footer-contact-info strong {
-      color: #bf360c;
-    }
-    
-    .footer-social-wrapper {
-      margin-bottom: 1.5rem;
-    }
-    
-    .footer-social-icons {
-      display: flex;
-      gap: 1rem;
-      margin-top: 0.5rem;
-    }
-    
-    .footer-social-icons a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 38px;
-      height: 38px;
-      border-radius: 50%;
-      background: #ff5722;
-      color: white !important;
-      font-size: 1.1rem;
-      transition: all 0.3s ease;
-    }
-    
-    .footer-social-icons a:hover {
-      background: #bf360c;
-      transform: translateY(-3px);
-      box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
-    }
-    
-    .footer-bottom {
-      border-top: 1px solid rgba(255, 87, 34, 0.1);
-      padding-top: 1.5rem;
-      text-align: center;
-      font-size: 0.9rem;
-      color: #8d6e63;
-      font-weight: 500;
-    }
-    
-    .footer-bottom p {
-      margin: 0;
-    }
-    
-    /* Dark Mode Overrides */
-    body.dark footer {
-      background: #1e1e1e;
-      border-top-color: rgba(255, 87, 34, 0.1);
-      color: #ccc;
-    }
-    
-    body.dark .footer-desc, 
-    body.dark .footer-links li a, 
-    body.dark .footer-contact-info {
-      color: #aaa;
-    }
-    
-    body.dark .footer-links li a:hover {
-      color: #ff7b54;
-    }
-    
-    body.dark .footer-bottom {
-      border-top-color: rgba(255, 255, 255, 0.05);
-      color: #777;
-    }
-
-    /* ===== Enhanced Animations & Transitions ===== */
-    .card {
-      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-
-    .card:hover {
-      animation: cardBounce 0.6s ease-out;
-    }
-
-    @keyframes cardBounce {
-      0% {
-        transform: translateY(0);
-      }
-      50% {
-        transform: translateY(-12px);
-      }
-      100% {
-        transform: translateY(-8px);
-      }
-    }
-
-    /* Button enhancements */
-    button {
-      transition: all 0.3s ease;
-      position: relative;
-    }
-
-    .btn-primary:active,
-    .btn-add:active,
-    .filter-btn:active {
-      transform: scale(0.98);
-    }
-
-    /* Card image zoom on hover */
-    .card img {
-      transition: transform 0.4s ease;
-    }
-
-    .card:hover img {
-      transform: scale(1.05);
-    }
-
-    /* Smooth filter transitions */
-    .filter-btn {
-      transition: all 0.3s ease;
-    }
-
-    .filter-btn.active {
-      animation: filterPulse 0.5s ease;
-    }
-
-    @keyframes filterPulse {
-      0%, 100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.05);
-      }
-    }
-
-    /* Navigation link enhancements */
-    nav a {
-      position: relative;
-      overflow: hidden;
-    }
-
-    nav a:hover::after {
-      left: 0;
-    }
-
-    /* Search input enhancement */
-    .search-bar input {
-      transition: all 0.3s ease;
-    }
-
-    .search-bar input::placeholder {
-      transition: color 0.3s ease;
-    }
-
-    .search-bar input:focus::placeholder {
-      color: transparent;
-    }
-
-    /* Cart animations */
-    .cart-item {
-      animation: slideInCart 0.3s ease-out;
-    }
-
-    @keyframes slideInCart {
-      from {
-        opacity: 0;
-        transform: translateX(-20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-
-    /* Responsive button text for mobile */
-    @media (max-width: 480px) {
-      .btn-primary,
-      .btn-add {
-        padding: 0.8rem 1.5rem;
-        font-size: 0.95rem;
-      }
-    }
-
-    /* ===== Responsive ===== */
-    @media (max-width: 1024px) {
-      .hero {
-        flex-direction: column;
-        padding: 4rem 1rem 5rem;
-      }
-      .hero-content,
-      .hero-image {
-        max-width: 100%;
-      }
-      nav {
-        gap: 1rem;
-      }
-      #cart-sidebar {
-        width: 100%;
-        max-width: 400px;
-      }
-    }
-    @media (max-width: 600px) {
-      .cards {
-        flex-direction: column;
-        align-items: center;
-      }
-      .team {
-        flex-direction: column;
-        align-items: center;
-      }
-      .testimonial-cards {
-        flex-direction: column;
-        align-items: center;
-      }
-      .search-bar input {
-        width: 130px;
-      }
-      .filter-buttons {
-        gap: 0.8rem;
-      }
-    }
-
-    /*=====Team member layout Fix===*/
-
-    @media (max-width: 980px) {
-      .state-scroll-wrapper {
-        grid-auto-columns: minmax(190px, 72vw);
-      }
-    }
-
-    @media (max-width: 768px) {
-    .team-member {
-    min-width: 100%;
-    max-width: 100%;
-  }
-  }
-    /* ===== Mobile Navbar Fix ===== */
-@media (max-width: 480px) {
-
-  .header-inner {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.8rem;
-    padding: 1rem;
-  }
-
-  .logo {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-
-  nav {
-    width: 100%;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  nav a {
-    padding: 0.4rem 0.7rem;
-    font-size: 0.9rem;
-  }
-
-  .search-bar {
-    margin-left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  .search-bar input {
-    width: 100%;
-    max-width: 220px;
-  }
-}
-
-/* ===== Skeleton UI ===== */
-
-/* Base skeleton element */
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    #f0e0d0 25%,
-    #ffe0c8 50%,
-    #f0e0d0 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: 8px;
-  display: block;
-}
-
-@keyframes shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* Skeleton Card — mirrors .card layout exactly */
-.skeleton-card {
-  background: white;
-  border-radius: 20px;
-  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-  width: 260px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1rem 1rem 1.8rem;
-  gap: 0.8rem;
-}
-
-.skeleton-card .sk-image {
-  width: 100%;
-  height: 170px;
-  border-radius: 15px;
-}
-
-.skeleton-card .sk-title {
-  width: 70%;
-  height: 20px;
-  border-radius: 6px;
-}
-
-.skeleton-card .sk-desc-line {
-  height: 13px;
-  border-radius: 6px;
-}
-
-.skeleton-card .sk-desc-line:nth-child(1) { width: 90%; }
-.skeleton-card .sk-desc-line:nth-child(2) { width: 75%; }
-
-.skeleton-card .sk-price {
-  width: 40%;
-  height: 16px;
-  border-radius: 6px;
-  margin-top: 0.2rem;
-}
-
-.skeleton-card .sk-btn {
-  width: 120px;
-  height: 38px;
-  border-radius: 40px;
-  margin-top: 0.4rem;
-}
-
-/* Skeleton Cart Item — mirrors .cart-item layout */
-.skeleton-cart-item {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.4rem;
-  border-radius: 15px;
-  background: white;
-  box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
-  padding: 1rem;
-  align-items: center;
-}
-
-.skeleton-cart-item .sk-thumb {
-  width: 80px;
-  height: 60px;
-  border-radius: 12px;
-  flex-shrink: 0;
-}
-
-.skeleton-cart-item .sk-lines {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.skeleton-cart-item .sk-line-name {
-  height: 14px;
-  width: 60%;
-  border-radius: 6px;
-}
-
-.skeleton-cart-item .sk-line-price {
-  height: 12px;
-  width: 35%;
-  border-radius: 6px;
-}
-
-.skeleton-cart-item .sk-line-qty {
-  height: 28px;
-  width: 90px;
-  border-radius: 6px;
-}
-
-/* ===== Autocomplete Search Suggestions ===== */
-.search-suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(100% + 20px);
-  min-width: 350px;
-  max-width: 90vw;
-  background: rgba(255, 255, 255, 0.98);
-  backdrop-filter: blur(10px);
-  border-radius: 16px;
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
-  margin-top: 0.8rem;
-  z-index: 1001;
-  overflow: hidden;
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.suggestion-item {
-  padding: 1rem 1.4rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1.5rem;
-  border-bottom: 1px solid rgba(255, 87, 34, 0.08);
-  transition: background 0.2s ease, transform 0.2s ease;
-  min-height: 50px;
-}
-
-.suggestion-item:last-child {
-  border-bottom: none;
-}
-
-.suggestion-item:hover {
-  background: rgba(255, 87, 34, 0.08);
-  transform: translateX(4px);
-}
-
-.suggestion-item:active {
-  background: rgba(255, 87, 34, 0.15);
-}
-
-.suggestion-item.no-matches {
-  color: #bf360c;
-  font-weight: 500;
-  text-align: center;
-  justify-content: center;
-  cursor: default;
-  background: transparent !important;
-  padding: 1.5rem;
-}
-
-.suggestion-name {
-  font-weight: 600;
-  color: #2c1810;
-  font-size: 1rem;
-  line-height: 1.4;
-  flex: 1;
-  min-width: 150px;
-}
-
-.suggestion-category {
-  font-size: 0.8rem;
-  background: rgba(255, 87, 34, 0.15);
-  color: #bf360c;
-  padding: 0.35rem 0.75rem;
-  border-radius: 24px;
-  font-weight: 700;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  flex-shrink: 0;
-}
-
-/* ===== Advanced Filters UI ===== */
-.filter-toggle-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-}
-
-.btn-filter-toggle {
-  background: white;
-  border: 2px solid #ff5722;
-  color: #ff5722;
-  padding: 0.6rem 1.5rem;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.1);
-}
-
-.btn-filter-toggle:hover {
-  background: #fbe9e7;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.2);
-}
-
-.btn-filter-toggle.active {
-  background: #ff5722;
-  color: white;
-  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
-}
-
-.advanced-filters {
-  max-width: 800px;
-  margin: 0 auto 3rem;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 2rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  animation: fadeIn 0.4s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.filter-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
-}
-
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.filter-group label {
-  font-weight: 700;
-  color: #bf360c;
-  font-size: 0.95rem;
-}
-
-/* Slider Custom Styles */
-.filter-group input[type="range"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-   appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: #ffe0b2;
-  outline: none;
-}
-
-.filter-group input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #ff5722;
-  cursor: pointer;
-  transition: transform 0.1s ease;
-  box-shadow: 0 0 8px rgba(255, 87, 34, 0.4);
-}
-
-.filter-group input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-#price-slider-val {
-  font-weight: 700;
-  color: #ff5722;
-}
-
-/* Selectors custom styles */
-.filter-group select {
-  padding: 0.6rem 0.8rem;
-  border-radius: 10px;
-  border: 2px solid #ffcc99;
-  background: white;
-  font-size: 0.95rem;
-  color: #5d4037;
-  outline: none;
-  cursor: pointer;
-  font-family: inherit;
-  transition: border-color 0.3s ease;
-}
-
-.filter-group select:focus {
-  border-color: #ff5722;
-}
-
-/* Dietary custom checkboxes */
-.checkbox-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  margin-top: 0.2rem;
-}
-
-.custom-checkbox {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.custom-checkbox input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  accent-color: #ff5722;
-  cursor: pointer;
-}
-
-.checkbox-label {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #5d4037 !important;
-}
-
-.filter-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 87, 34, 0.1);
-}
-
-.btn-reset-filters {
-  background: transparent;
-  border: 2px solid #bf360c;
-  color: #bf360c;
-  padding: 0.5rem 1.5rem;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
-}
-
-.btn-reset-filters:hover {
-  background: #bf360c;
-  color: white;
-  box-shadow: 0 4px 15px rgba(191, 54, 12, 0.3);
-}
-
-/* ===== Highlights & Food Metadata Styles ===== */
-mark.highlight {
-  background: #ffd54f;
-  color: #3e2723;
-  padding: 0.05rem 0.15rem;
-  border-radius: 3px;
-  font-weight: 700;
-}
-
-.card-meta {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 0.5rem;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.card-meta .rating {
-  color: #ffb300;
-}
-
-.card-meta .spice {
-  color: #bf360c;
-}
-
-.card-tags {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-top: 0.8rem;
-}
-
-.tag {
-  font-size: 0.7rem;
-  padding: 0.2rem 0.6rem;
-  border-radius: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.tag-vegan {
-  background: #e8f5e9;
-  color: #2e7d32;
-  border: 1px solid rgba(46, 125, 50, 0.2);
-}
-
-.tag-gluten-free {
-  background: #e0f7fa;
-  color: #00838f;
-  border: 1px solid rgba(0, 131, 143, 0.2);
-}
-
-/* Fix description layout on food card */
-.card-content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.card-content h3 {
-  margin-bottom: 0.4rem;
-}
-
-.card-content p {
-  font-size: 0.9rem;
-  color: #5d4037;
-  line-height: 1.4;
-  margin-bottom: auto;
-}
-
-.card-footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 1.2rem;
-  padding-top: 0.8rem;
-  border-top: 1px solid #fbe9e7;
-}
-
-.card-footer .price {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #bf360c;
-}
-
-.card-footer .add-btn {
-  background: #2e7d32;
-  color: white;
-  padding: 0.4rem 1.2rem;
-  border-radius: 50px;
-  border: none;
-  font-weight: 700;
-  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
-  transition: all 0.3s ease;
-}
-
-.card-footer .add-btn:hover {
-  background: #1b5e20;
-  box-shadow: 0 6px 15px rgba(27, 94, 32, 0.5);
-  transform: translateY(-1px);
-}
-
-/* ===== Orders Dashboard Layout ===== */
-.orders-page {
-  padding-top: 4rem;
-  padding-bottom: 5rem;
-}
-
-.orders-page h1 {
-  font-size: 2.2rem;
-  color: #bf360c;
-  margin-bottom: 2.5rem;
-  text-align: center;
-  font-weight: 700;
-}
-
-.orders-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-/* Empty Orders Page */
-.empty-orders {
-  text-align: center;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 4rem 2rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-}
-
-.empty-orders h2 {
-  font-size: 1.6rem;
-  color: #3e2723;
-  margin-bottom: 0.8rem;
-}
-
-.empty-orders p {
-  color: #5d4037;
-  font-size: 1.05rem;
-  margin-bottom: 1.5rem;
-}
-
-/* Order Progress Card */
-.order-card {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 2rem;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.order-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 35px rgba(255, 87, 34, 0.1);
-}
-
-.order-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #fbe9e7;
-  padding-bottom: 1.2rem;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.order-meta-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.order-id {
-  font-size: 1.1rem;
-  color: #3e2723;
-}
-
-.order-date {
-  font-size: 0.85rem;
-  color: #8d6e63;
-}
-
-/* Status Badges */
-.status-badge {
-  font-size: 0.85rem;
-  font-weight: 700;
-  padding: 0.4rem 1rem;
-  border-radius: 20px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  display: inline-block;
-}
-
-.status-badge.status-pending {
-  background: #fff8e1;
-  color: #ffb300;
-  border: 1px solid rgba(255, 179, 0, 0.3);
-}
-
-.status-badge.status-preparing {
-  background: #fbe9e7;
-  color: #ff5722;
-  border: 1px solid rgba(255, 87, 34, 0.3);
-}
-
-.status-badge.status-on-the-way {
-  background: #e1f5fe;
-  color: #0288d1;
-  border: 1px solid rgba(2, 136, 209, 0.3);
-}
-
-.status-badge.status-delivered {
-  background: #e8f5e9;
-  color: #2e7d32;
-  border: 1px solid rgba(46, 125, 50, 0.3);
-}
-
-/* Graphical Progress Stepper Track */
-.order-timeline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 2rem 0 2.5rem;
-  padding: 0 1rem;
-}
-
-.timeline-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  gap: 0.5rem;
-}
-
-.step-circle {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: #e0e0e0;
-  color: #757575;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.9rem;
-  transition: all 0.4s ease;
-  border: 2px solid transparent;
-}
-
-.step-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #9e9e9e;
-  transition: all 0.4s ease;
-}
-
-/* Timeline Connectors */
-.timeline-line {
-  flex: 1;
-  height: 4px;
-  background: #e0e0e0;
-  margin-top: -1.2rem;
-  z-index: 1;
-  transition: all 0.4s ease;
-}
-
-/* Highlighted Progress Active Steps states */
-.timeline-step.active .step-circle {
-  background: #ffe0b2;
-  color: #ff5722;
-  border-color: #ff5722;
-}
-
-.timeline-step.active .step-label {
-  color: #ff5722;
-}
-
-.timeline-step.current .step-circle {
-  background: #ff5722;
-  color: white;
-  box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
-  transform: scale(1.15);
-}
-
-.timeline-step.current .step-label {
-  font-weight: 700;
-  color: #bf360c;
-}
-
-.timeline-line.active {
-  background: #ffaa66;
-}
-
-/* Order Item Row Summary Layout */
-.order-items-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  background: #fafafa;
-  border-radius: 12px;
-  padding: 1.2rem;
-  margin-bottom: 1.5rem;
-  border: 1px solid #fbe9e7;
-}
-
-.order-item-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  color: #5d4037;
-}
-
-.order-item-row span:first-child {
-  font-weight: 600;
-}
-
-.order-item-row span:last-child {
-  font-weight: 700;
-}
-
-/* Order Card Footer */
-.order-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.order-total-price {
-  font-size: 1.05rem;
-  color: #5d4037;
-}
-
-.order-total-price strong {
-  font-size: 1.3rem;
-  color: #bf360c;
-  margin-left: 0.4rem;
-}
-
-/* Reorder Button styling */
-.btn-reorder {
-  background: #ff5722;
-  color: white;
-  border: none;
-  padding: 0.6rem 1.6rem;
-  border-radius: 50px;
-  font-weight: 700;
-  font-size: 0.95rem;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.btn-reorder:hover {
-  background: #bf360c;
-  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.4);
-  transform: translateY(-1px);
-}
- 
-
-.price-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.original-price {
-  text-decoration: line-through;
-  color: gray;
-  font-size: 14px;
-}
-
-.discount-badge {
-  background-color: #ff4d4dc1;
-  color: white;
-  padding: 1.5px 4.5px;
-  border-radius: 5px;
-  font-size: 10.5px;
-  font-weight: bold;
-}
-/* ===== Dark Mode Theme ===== */
-.theme-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 68px;
-  height: 32px;
-  padding: 3px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 99px;
-  background-color: #f2f4f7;
-  cursor: pointer;
-  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
-}
-
-.theme-toggle:hover {
-  border-color: rgba(255, 87, 34, 0.3);
-}
-
-.theme-toggle:focus-visible {
-  outline: 2px solid #ff5722 !important;
-  outline-offset: 2px;
-}
-
-.theme-toggle-track {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  padding: 0 4px;
-}
-
-.theme-toggle-thumb {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #ffa726; /* vibrant orange/yellow for light mode */
-  box-shadow: 0 2px 6px rgba(255, 167, 38, 0.4);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-}
-
-.theme-toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  z-index: 2;
-  pointer-events: none;
-  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.theme-toggle-icon svg {
-  width: 13px;
-  height: 13px;
-  stroke-width: 2.5;
-}
-
-.theme-toggle-icon.sun-icon {
-  color: #ffffff; /* Active in light mode */
-}
-
-.theme-toggle-icon.moon-icon {
-  color: #8e9aa8; /* Inactive in light mode */
-}
-
-/* Dark mode specific overrides for theme toggle */
-body.dark .theme-toggle {
-  background-color: #15191e;
-  border-color: rgba(255, 255, 255, 0.05);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
-}
-
-body.dark .theme-toggle-thumb {
-  transform: translateX(36px);
-  background-color: #2b3648; /* Slate blue for dark mode */
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-}
-
-body.dark .theme-toggle-icon.sun-icon {
-  color: #5f6d7e; /* Inactive in dark mode */
-}
-
-body.dark .theme-toggle-icon.moon-icon {
-  color: #ffffff; /* Active in dark mode */
-}
-
-body.dark .login-btn-nav,
-body.dark .profile-toggle {
-  background: #2b2b2b;
-  color: #ffffff;
-  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
-}
-
-body.dark .login-btn-nav:hover,
-body.dark .login-btn-nav:focus-visible,
-body.dark .profile-toggle:hover,
-body.dark .profile-toggle:focus-visible {
-  background: #3a2d27;
-  color: #ffd0c2;
-}
-
-body.dark .profile-dropdown {
-  background: #232323;
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
-}
-
-body.dark .profile-dropdown-header {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
-body.dark .profile-dropdown-name {
-  color: #ffffff;
-}
-
-body.dark .profile-dropdown-email {
-  color: #b0b7c3;
-}
-
-body.dark .profile-dropdown a,
-body.dark .profile-dropdown button {
-  color: #f3f3f3;
-}
-
-body.dark .profile-dropdown a:hover,
-body.dark .profile-dropdown a:focus-visible,
-body.dark .profile-dropdown button:hover,
-body.dark .profile-dropdown button:focus-visible {
-  background: rgba(255, 87, 34, 0.16);
-  color: #ffb39d;
-}
-
-body.dark .profile-dropdown-logout {
-  color: #ffb39d;
-}
-/* body */
-body.dark {
-  background: #1e1e1e;
-  color: #f5f5f5;
-}
-
-/* Headings  */
-body.dark h1,
-body.dark h2,
-body.dark h3,
-body.dark h4{
-  color: #ff5722;
-}
-body.dark p{
-  color: #ffab91;
-}
-
-/* Header & Navigation */
-body.dark header {
-  /* Keep orange brand background — only deepen the shadow for dark mode depth */
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
-}
-body.dark nav a {
-  color: #f5f5f5;
-}
-body.dark nav a:hover,
-body.dark nav a.active {
-  background: #ff5722;
-  box-shadow: 0 0 8px rgba(255, 87, 34, 0.8);
-}
-body.dark .dropdown-menu {
-  background: #333;
-}
-body.dark .dropdown-menu a:hover {
-  background: #ff5722;
-}
-
-/* Hero Section */
-body.dark .hero {
-  background: linear-gradient(120deg, #3b1f17, #2c150d);
-  color: #fff3e0;
-}
-body.dark .btn-primary {
-  background: #ff5722;
-  color: #fff;
-}
-body.dark .btn-primary:hover {
-  background: #e64a19;
-}
-
-/* Cards & Containers */
-body.dark .card,
-body.dark .skeleton-card,
-body.dark .skeleton-cart-item {
-  background: #2a2a2a;
-  color: #eee;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-}
-body.dark .card h3 {
-  color: #ff5722;
-}
-body.dark .card p.price {
-  color: #ffab91;
-}
-body.dark .card p.description {
-  color: #ccc;
-}
-
-/* Sections */
-body.dark section.menu,
-body.dark section.specials,
-body.dark section.about,
-body.dark section.testimonials {
-  background: #252525;
-  color: #eee;
-}
-body.dark .filter-btn {
-  background: transparent;
-  border: 2px solid #ff5722;
-  color: #ff5722;
-}
-body.dark .filter-btn.active,
-body.dark .filter-btn:hover {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Cart Sidebar */
-body.dark #cart-sidebar {
-  background: #2b2b2b;
-  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.6);
-}
-body.dark #cart-header {
-  background: #ff5722;
-}
-body.dark .cart-item {
-  background: #333;
-}
-
-body.dark #checkout-btn {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Forms */
-body.dark section.contact {
-  background: #252525;
-  color: #eee;
-}
-body.dark section.contact h2 {
-  color: #ff5722;
-}
-body.dark form.contact-form {
-  background: #2b2b2b;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-body.dark form.contact-form input,
-body.dark form.contact-form textarea {
-  background: #1e1e1e;
-  color: #f5f5f5;
-  border-color: #444;
-}
-body.dark form.contact-form label {
-  color: #ffab91;
-}
-body.dark .btn-submit {
-  background: #ff5722;
-}
-
-/* Testimonials */
-body.dark .testimonial {
-  background: #2a2a2a;
-  color: #ddd;
-}
-body.dark .testimonial::before {
-  color: #ff5722;
-}
-
-/* Newsletter */
-body.dark section.newsletter {
-  background: #2c2c2c;
-  color: #fff;
-}
-body.dark .newsletter-form button {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Footer */
-body.dark footer {
-  background: #111;
-  color: #eee;
-}
-body.dark .social-icons a:hover {
-  color: #ff5722;
-}
-
-/* Skeleton Animation background  */
-body.dark .skeleton {
-  background: linear-gradient(
-    90deg,
-    #534949 25%,
-    #444 50%,
-    #3a3a3a 75%
-  );
-}
-
-/* Dark Mode Search Bar overrides */
-body.dark .search-bar input {
-  background-color: #2c2c2c;
-  color: #f5f5f5;
-  border-color: rgba(255, 255, 255, 0.12);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-body.dark .search-bar input::placeholder {
-  color: #8d6e63;
-}
-body.dark .search-bar input:hover {
-  border-color: rgba(255, 87, 34, 0.4);
-}
-body.dark .search-bar input:focus {
-  background-color: #1e1e1e;
-  border-color: #ff5722;
-  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-body.dark .search-bar button {
-  color: #ff5722;
-}
-body.dark .search-bar button:hover {
-  background-color: rgba(255, 87, 34, 0.15);
-}
-body.dark .search-bar button:hover .search-svg {
-  stroke: #ff7b54;
-}
-body.dark .search-suggestions {
-  background: rgba(30, 30, 30, 0.98);
-  border-color: rgba(255, 87, 34, 0.3);
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
-}
-body.dark .suggestion-item {
-  border-bottom: 1px solid rgba(255, 87, 34, 0.12);
-}
-body.dark .suggestion-name {
-  color: #eee;
-}
-body.dark .suggestion-category {
-  color: #ffab91;
-}
-body.dark .suggestion-item:hover {
-  background: rgba(255, 87, 34, 0.15);
-}
-body.dark .suggestion-item.no-matches {
-  color: #ff7b54;
-}
-
-/* Dark Mode Cart Button overrides */
-body.dark .cart-btn-modern {
-  background: rgba(255, 255, 255, 0.05) !important;
-  border-color: rgba(255, 255, 255, 0.12) !important;
-}
-body.dark .cart-btn-modern:hover {
-  background: #ff5722 !important;
-  border-color: #ff7b54 !important;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4) !important;
-}
-body.dark .cart-btn-modern.active {
-  background: #ff5722 !important;
-  border-color: #ff7b54 !important;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
-}
-body.dark .cart-badge {
-  background-color: #ffb300;
-  border-color: #ff5722;
-  color: #1e1e1e;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  background: #fff3e0;
-}
-::-webkit-scrollbar-thumb {
-  background: #ff5722;
-  border-radius: 999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #e64a19;
-}
-/*Accessibility Styles */
-
-/* ===== Accessibility Styles ===== */
-
-
-/* Skip link - visible on focus */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: #ff5722;
-  color: white;
-  padding: 0.6rem 1rem;
-  text-decoration: none;
-  z-index: 10000;
-  border-radius: 0 0 8px 0;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
-/* Enhanced focus states for keyboard navigation */
-body.keyboard-nav button:focus,
-body.keyboard-nav a:focus,
-body.keyboard-nav input:focus,
-body.keyboard-nav textarea:focus,
-body.keyboard-nav select:focus {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Focus states for all interactive elements */
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-/* Card focus state */
-.card:focus {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
-}
-
-/* Search suggestion focused state */
-.suggestion-item.focused {
-  background: #ffe0d0;
-  color: #3e3e3e;
-}
-
-.suggestion-item:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 1px;
-}
-
-/* Improved focus for navigation links */
-nav a:focus-visible {
-  box-shadow: 0 0 8px #ff5722;
-}
-
-/* Filter button focus state */
-.filter-btn:focus-visible,
-.menu-filter:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Checkbox and radio focus states */
-input[type="checkbox"]:focus-visible,
-input[type="radio"]:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Range slider focus state */
-input[type="range"]:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 4px;
-}
-
-/* Select dropdown focus state */
-select:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: more) {
-  button:focus-visible,
-  a:focus-visible,
-  input:focus-visible,
-  textarea:focus-visible,
-  select:focus-visible {
-    outline-width: 4px;
-  }
-
-  .card:focus {
-    outline-width: 4px;
-    box-shadow: 0 0 30px rgba(255, 87, 34, 0.8);
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Note: theme switching is handled via body.dark class (see auth.js setupThemeToggle) */
-
-
-/* Improve contrast of disabled buttons */
-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Out of Stock Badge */
-.out-of-stock-badge {
-  background-color: #6c757d !important;  /* Grey color */
-  color: white;
-  padding: 5px 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 600;
-  display: inline-block;
-  margin: 10px 0 5px 0;
-  letter-spacing: 0.5px;
-  text-align: center;
-  width: fit-content;
-}
-
-/* Disabled button styling */
-.add-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  background-color: #cccccc !important;
-  transform: none !important;
-}
-
-/* Hover effect for disabled button */
-.add-btn:disabled:hover {
-  transform: none !important;
-  opacity: 0.6;
-}
-
-
-/* ===== Loyalty Wallet Styles ===== */
-.cart-loyalty-widget {
-  background: #ffffff;
-  border: 1px dashed #ff9800;
-  border-radius: 16px;
-  padding: 1.2rem;
-  margin: 1.5rem 0;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-body.dark .cart-loyalty-widget {
-  background: #2a2a2a;
-  border-color: #f57c00;
-  color: #fff;
-}
-
-.loyalty-widget-header {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  margin-bottom: 0.8rem;
-}
-
-.loyalty-icon {
-  font-size: 1.6rem;
-  filter: drop-shadow(0 2px 5px rgba(255, 152, 0, 0.4));
-  animation: pulse-gold 2s infinite ease-in-out;
-}
-
-@keyframes pulse-gold {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.15); }
-  100% { transform: scale(1); }
-}
-
-.loyalty-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.loyalty-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #bf360c;
-}
-
-body.dark .loyalty-title {
-  color: #ff7a45;
-}
-
-.loyalty-desc {
-  font-size: 0.85rem;
-  color: #5d4037;
-}
-
-body.dark .loyalty-desc {
-  color: #ccc;
-}
-
-.loyalty-redeem-action {
-  border-top: 1px solid #ffe0b2;
-  padding-top: 0.8rem;
-}
-
-body.dark .loyalty-redeem-action {
-  border-top-color: #444;
-}
-
-/* Switch Toggle Styling */
-.loyalty-toggle {
-  display: flex;
-  align-items: center;
-   cursor: pointer;
-  user-select: none;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #bf360c;
-  gap: 0.6rem;
-}
-
-body.dark .loyalty-toggle {
-  color: #ff7a45;
-}
-
-.loyalty-toggle input {
-  display: none;
-}
-
-.toggle-slider {
-  position: relative;
-  width: 44px;
-  height: 22px;
-  background-color: #ccc;
-  border-radius: 34px;
-  transition: .3s;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  border-radius: 50%;
-  transition: .3s;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
-
-.loyalty-toggle input:checked + .toggle-slider {
-  background-color: #4caf50;
-}
-
-.loyalty-toggle input:checked + .toggle-slider:before {
-  transform: translateX(22px);
-}
-
-.loyalty-empty-message {
-  font-size: 0.8rem;
-  color: #795548;
-  font-style: italic;
-  margin-top: 0.4rem;
-}
-
-body.dark .loyalty-empty-message {
-  color: #aaa;
-}
-
-/* Cart Total Breakdown */
-.cart-total-breakdown {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  padding: 0.5rem 0;
-  margin-left: 0.4rem;
-  transition: 0.3s ease;
-}
-
-.breakdown-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #5d4037;
-}
-
-body.dark .breakdown-row {
-  color: #ccc;
-}
-
-.breakdown-row.discount {
-  color: #e64a19;
-}
-
-.breakdown-row.final {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: #bf360c;
-  border-top: 1px solid #ffcc80;
-  padding-top: 0.5rem;
-  margin-top: 0.2rem;
-}
-
-body.dark .breakdown-row.final {
-  color: #ff7a45;
-  border-top-color: #555;
-}
-
-
-/* ===== Combo Add Button ===== */
-
-.lang-toggle-btn {
-  background: linear-gradient(135deg, #ff6200, #ff8c00);
-  color: #fff;
-  border: none;
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: 'Poppins', sans-serif;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  white-space: nowrap;
-  margin-left: 8px;
-}
-.lang-toggle-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(255, 98, 0, 0.35);
-}
-
-/* ===== Responsive Navbar Spacing & Overlap Fixes ===== */
-@media (max-width: 1200px) {
-  .logo {
-    font-size: 1.5rem !important;
-    margin-right: 1rem !important;
-  }
-  .navbar-logo-img {
-    height: 34px !important;
-    width: 34px !important;
-  }
-  nav {
-    gap: 0.8rem !important;
-  }
-  nav a {
-    padding: 0.4rem 0.6rem !important;
-    font-size: 0.9rem !important;
-  }
-  .cart-btn-modern {
-    padding: 0.3rem 0.8rem !important;
-  }
-}
-
-@media (max-width: 950px) {
-  .header-inner {
-    flex-direction: column !important;
-    gap: 1rem !important;
-    padding: 1rem 1rem !important;
-  }
-  .logo {
-    margin-right: 0 !important;
-  }
-  nav {
-    flex-wrap: wrap !important;
-    justify-content: center !important;
-    gap: 0.8rem !important;
-    width: 100% !important;
-  }
-}
-
-
-#voice-search-btn{
-  border: none;
-  background: #ff7043;
-  color: white;
-  padding: 0.6rem 0.9rem;
-  border-radius: 8px;
-  cursor: pointer;
-  margin-left: 0.4rem;
-  transition: 0.3s ease;
-}
-
-#voice-search-btn:hover {
-  background: #f4511e;
-}
-
-#voice-search-btn.listening {
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scale(1.12);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-/* ===== Combo Add Button ===== */
-
-.combo-add-btn {
-  background: #ff5722;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 30px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: 0.3s ease;
-}
-
-.combo-add-btn:hover {
-  background: #e64a19;
-  transform: scale(1.05);
-}
-.combo-item-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-
-/* ===== Cinematic Video Hero ===== */
-.hero {
-  position: relative;
-  width: 100%;
-  min-height: calc(100vh - var(--header-height, 90px));
-  height: calc(100vh - var(--header-height, 90px));
-  padding: 0 8%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  margin-bottom: 0;
-  background: #130a06;
-  text-align: left;
-}
-
-.hero-video-stage,
-.hero-bg-video,
-.hero-overlay {
-  position: absolute;
-  inset: 0;
-}
-
-.hero-video-stage {
-  z-index: 1;
-  background: #130a06;
-  overflow: hidden;
-}
-
-.hero-video,
-.hero-bg-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0;
-  transform: scale(1.04);
-  transition: opacity 1.25s ease, transform 7s ease;
-  will-change: opacity, transform;
-}
-
-.hero-bg-video.active {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.hero-overlay {
-  z-index: 2;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.70) 0%,
-    rgba(0, 0, 0, 0.45) 45%,
-    rgba(0, 0, 0, 0.20) 100%
-  );
-}
-
-.hero-content {
-  position: relative;
-  z-index: 3;
-  flex: 0 0 min(650px, 52vw);
-  max-width: 650px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin: 0;
-  text-align: left;
-  color: #ffffff;
-}
-
-.hero-badge,
-.hero-secondary-btn,
-.hero-stat-card {
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
-}
-
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  width: fit-content;
-  margin-bottom: 1.4rem;
-  padding: 0.62rem 1rem;
-  border-radius: 999px;
-  color: rgba(255, 255, 255, 0.94);
-  font-size: 0.95rem;
-  font-weight: 700;
-  animation: heroFadeUp 0.75s ease both;
-}
-
-.hero-title,
-.hero-content h1 {
-  margin: 0 0 1.35rem;
-  color: #ffffff;
-  font-size: clamp(2.75rem, 4.4vw, 4.75rem);
-  font-weight: 800;
-  line-height: 1.05;
-  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52);
-  letter-spacing: 0;
-  animation: heroFadeUp 0.85s ease 0.08s both;
-}
-
-.hero-content p {
-  max-width: 550px;
-  margin: 0;
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 1.1rem;
-  font-weight: 500;
-  line-height: 1.8;
-  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  animation: heroFadeUp 0.85s ease 0.2s both;
-}
-
-.hero-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 20px;
-  flex-wrap: wrap;
-  margin-top: 30px;
-  animation: heroFadeUp 0.85s ease 0.4s both;
-}
-
-.hero-primary-btn,
-.hero-secondary-btn {
-  min-width: 154px;
-  min-height: 54px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  padding: 0.95rem 1.65rem;
-  font-size: 1rem;
-  font-weight: 800;
-  line-height: 1;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
-}
-
-.hero-primary-btn {
-  background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%);
-  color: #ffffff;
-  box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38);
-}
-
-.hero-primary-btn:hover,
-.hero-primary-btn:focus-visible {
-  background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%);
-  transform: translate3d(0, -3px, 0);
-  box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5);
-}
-
-.hero-secondary-btn {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.46);
-}
-
-.hero-secondary-btn:hover,
-.hero-secondary-btn:focus-visible {
-  transform: translate3d(0, -3px, 0);
-  border-color: rgba(255, 255, 255, 0.75);
-  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
-}
-
-.hero-stats {
-  position: absolute;
-  z-index: 3;
-  top: 50%;
-  right: 8%;
-  width: 300px;
-  min-width: 0;
-  height: 370px;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.hero-stat-card {
-  position: absolute;
-  width: 230px;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 0.95rem 1.05rem;
-  border-radius: 18px;
-  color: #ffffff;
-  animation: heroFloat 5.5s ease-in-out infinite;
-  will-change: transform;
-}
-
-.hero-stat-card strong {
-  display: block;
-  color: #ffffff;
-  font-size: 1.1rem;
-  line-height: 1.1;
-}
-
-.hero-stat-card span:last-child {
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 0.9rem;
-  font-weight: 700;
-}
-
-.hero-stat-icon {
-  width: 42px;
-  height: 42px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 42px;
-  border-radius: 50%;
-  background: rgba(255, 122, 31, 0.2);
-}
-
-.hero-stat-rating {
-  top: 0;
-  right: 0;
-}
-
-.hero-stat-delivery {
-  top: 130px;
-  right: 58px;
-  animation-delay: 0.8s;
-}
-
-.hero-stat-orders {
-  top: 260px;
-  right: 0;
-  animation-delay: 1.6s;
-}
-
-.hero-scroll-indicator {
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  bottom: 2rem;
-  width: 28px;
-  height: 46px;
-  display: inline-flex;
-  justify-content: center;
-  border: 1.5px solid rgba(255, 255, 255, 0.72);
-  border-radius: 999px;
-  transform: translateX(-50%);
-}
-
-.hero-scroll-indicator span {
-  width: 5px;
-  height: 5px;
-  margin-top: 9px;
-  border-radius: 50%;
-  background: #ffffff;
-  animation: heroScrollDot 1.6s ease-in-out infinite;
-}
-
-body.dark .hero {
-  background: #130a06;
-  color: #ffffff;
-}
-
-body.dark .hero-content h1,
-body.dark .hero-content p {
-  color: #ffffff;
-}
-
-body.dark .hero-content p {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.specials,
-.menu,
-.specials-section,
-.menu-section {
-  position: relative;
-  z-index: 5;
-}
-
-@keyframes heroFadeUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 26px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes heroFloat {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  50% {
-    transform: translate3d(0, -14px, 0);
-  }
-}
-
-@keyframes heroScrollDot {
-  0% {
-    opacity: 0;
-    transform: translateY(0);
-  }
-
-  35% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-@media (max-width: 1024px) {
-  .hero {
-    padding: 0 6%;
-  }
-
-  .hero-stats {
-    right: 4%;
-    opacity: 0.92;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero {
-    min-height: calc(100vh - var(--header-height, 90px));
-    height: auto;
-    padding: 3.5rem 1.25rem 4.5rem;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    flex-direction: column;
-  }
-
-  .hero-overlay {
-    background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0.62) 0%,
-      rgba(0, 0, 0, 0.46) 48%,
-      rgba(0, 0, 0, 0.66) 100%
-    );
-  }
-
-  .hero-content {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-  }
-
-  .hero-badge,
-  .hero-actions {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .hero-title,
-  .hero-content h1 {
-    font-size: clamp(2.45rem, 11vw, 3.65rem);
-    line-height: 1.05;
-  }
-
-  .hero-content p {
-    margin-left: auto;
-    margin-right: auto;
-    font-size: 1.02rem;
-    line-height: 1.7;
-  }
-
-  .hero-actions {
-    flex-direction: column;
-    width: min(100%, 360px);
-  }
-
-  .hero-primary-btn,
-  .hero-secondary-btn {
-    width: 100%;
-  }
-
-  .hero-stats {
-    position: relative;
-    top: auto;
-    right: auto;
-    width: min(100%, 360px);
-    min-width: 0;
-    margin: 2.2rem auto 0;
-    transform: none;
-    display: grid;
-    gap: 0.7rem;
-  }
-
-  .hero-stat-card {
-    position: static;
-    min-width: 0;
-    width: 100%;
-    justify-content: flex-start;
-    border-radius: 16px;
-    animation-duration: 4.8s;
-  }
-}
-
-@media (max-width: 480px) {
-  .hero {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .hero-badge {
-    font-size: 0.82rem;
-    padding: 0.55rem 0.82rem;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .hero-bg-video,
-  .hero-badge,
-  .hero-content h1,
-  .hero-content p,
-  .hero-actions,
-  .hero-stat-card,
-  .hero-scroll-indicator span{
-    animation: none !important;
-    transition: none !important;
-  }
-}
-.menu-toggle-wrapper{
-    grid-column:1/-1;
-    display:flex;
-    justify-content:flex-end;
-    margin-top:20px;
-}
-
-.menu-toggle-btn{
-    padding:12px 25px;
-    border:none;
-    border-radius:40px;
-    background:#ff6b35;
-    color:white;
-    cursor:pointer;
-}
\ No newline at end of file

From 766ff19cf99a21d6a0287b8fb6c793b3ff3b4328 Mon Sep 17 00:00:00 2001
From: Varun Bisoi <57100019+vishu786-vb@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:16:58 +0530
Subject: [PATCH 3/6] Delete js/theme.js

---
 js/theme.js | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 js/theme.js

diff --git a/js/theme.js b/js/theme.js
deleted file mode 100644
index d9e6cda..0000000
--- a/js/theme.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// ===== Theme Toggle (standalone — for pages that don't load main.js) =====
-document.addEventListener("DOMContentLoaded", () => {
-  // Restore saved theme on page load
-  if (localStorage.getItem("theme") === "dark") {
-    document.body.classList.add("dark");
-  }
-
-  const toggleBtn = document.getElementById("theme-toggle");
-  if (toggleBtn) {
-    toggleBtn.addEventListener("click", () => {
-      document.body.classList.toggle("dark");
-      localStorage.setItem(
-        "theme",
-        document.body.classList.contains("dark") ? "dark" : "light"
-      );
-    });
-  }
-});

From 759eaea4d2752faf55181fd7c90976b8660dac77 Mon Sep 17 00:00:00 2001
From: Varun Bisoi <57100019+vishu786-vb@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:18:54 +0530
Subject: [PATCH 4/6] Add files via upload

---
 js/style.css | 3725 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 3725 insertions(+)
 create mode 100644 js/style.css

diff --git a/js/style.css b/js/style.css
new file mode 100644
index 0000000..893c6f2
--- /dev/null
+++ b/js/style.css
@@ -0,0 +1,3725 @@
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Light.ttf') format('truetype');
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 500;
+}
+    * {
+      margin: 0; padding: 0; box-sizing: border-box;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: #fff8f0;
+      color: #3e3e3e;
+      line-height: 1.6;
+      font-size: 16px;
+      overflow-x: hidden;
+    }
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+    img {
+      max-width: 100%;
+      display: block;
+      border-radius: 12px;
+    }
+    button {
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    /* ===== Container ===== */
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1rem;
+    }
+
+    /* ===== Toast Notification ===== */
+
+.toast-notification {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-20px);
+
+  background: linear-gradient(135deg, #ff7a00, #ff9a3c);
+  color: #fff;
+
+  padding: 14px 24px;
+  border-radius: 14px;
+
+  font-size: 15px;
+  font-weight: 600;
+
+  min-width: 280px;
+  text-align: center;
+
+  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
+
+  opacity: 0;
+  transition: all 0.35s ease;
+
+  z-index: 9999;
+  pointer-events: none;
+
+  border: 1px solid rgba(255,255,255,0.2);
+  backdrop-filter: blur(8px);
+}
+
+.toast-notification.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.coupon-section {
+  background: #fff3e0;
+  border: 1px dashed #ff8f4b;
+  border-radius: 14px;
+  padding: 1rem;
+  margin: 1.5rem 0;
+}
+
+.coupon-section h2 {
+  margin-bottom: 0.75rem;
+  font-size: 1.05rem;
+  color: #d84315;
+}
+
+.coupon-input-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.coupon-input-row input {
+  flex: 1 1 220px;
+  padding: 0.95rem 1rem;
+  border: 1px solid #ffcc9b;
+  border-radius: 12px;
+  background: #fff;
+  color: #3e3e3e;
+}
+
+.coupon-input-row button,
+.secondary-btn {
+  padding: 0.95rem 1.25rem;
+  border: none;
+  border-radius: 12px;
+  font-weight: 700;
+}
+
+.coupon-input-row button {
+  background: #ff7b54;
+  color: #fff;
+}
+
+.secondary-btn {
+  background: #eceff1;
+  color: #263238;
+  border: 1px solid #cfd8dc;
+}
+
+.coupon-message {
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+  min-height: 1.2rem;
+}
+
+.coupon-message.success {
+  color: #2e7d32;
+}
+
+.coupon-message.error {
+  color: #c62828;
+}
+
+.coupon-applied-label {
+  margin-top: 0.5rem;
+  font-size: 0.95rem;
+  color: #4e342e;
+}
+
+.price-breakdown {
+  background: #fff;
+  border: 1px solid #ffe0b2;
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+.price-breakdown p {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 0.75rem;
+}
+
+.price-breakdown .grand-total {
+  font-weight: 700;
+  color: #bf360c;
+}
+
+@media (max-width: 600px) {
+  .coupon-input-row {
+    flex-direction: column;
+  }
+}
+
+/* ===== Mobile Responsive ===== */
+
+@media (max-width: 600px) {
+  .toast-notification {
+    width: calc(100% - 32px);
+    min-width: unset;
+
+    left: 16px;
+    right: 16px;
+
+    transform: translateY(-20px);
+
+    font-size: 14px;
+    padding: 12px 16px;
+  }
+
+  .toast-notification.show {
+    transform: translateY(0);
+  }
+}
+
+/* Cart Count Bounce */
+
+.cart-bounce {
+  animation: cartBounce 0.4s ease;
+}
+
+@keyframes cartBounce {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+    /* ===== Header ===== */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: #ff5722;
+      box-shadow: 0 3px 10px rgb(255 87 34 / 0.7);
+      user-select: none;
+    }
+    .header-inner {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 1rem 1.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .logo {
+      font-weight: 700;
+      font-size: 1.8rem;
+      color: #fff;
+      letter-spacing: 1px;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      gap: 0.4rem;
+      margin-right: 2rem;
+    }
+    .navbar-logo-img {
+      height: 42px;
+      width: 42px;
+      object-fit: cover;
+      border-radius: 50%;
+      background: white;
+      padding: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+    .logo:hover .navbar-logo-img {
+      transform: scale(1.08);
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      font-weight: 600;
+    }
+    nav a {
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      transition: background 0.3s ease;
+    }
+    nav a:hover,
+    nav a.active {
+      background: #e64a19;
+      box-shadow: 0 0 8px rgb(230 74 25 / 0.8);
+    }
+
+    /* ===== Modern Cart Button ===== */
+    .cart-btn-modern {
+      display: inline-flex !important;
+      align-items: center;
+      gap: 0.6rem;
+      position: relative;
+      padding: 0.4rem 1.1rem !important;
+      border-radius: 50px !important;
+      background: rgba(255, 255, 255, 0.1) !important;
+      border: 1px solid rgba(255, 255, 255, 0.15) !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      overflow: visible !important;
+      text-decoration: none !important;
+      white-space: nowrap !important;
+    }
+    .cart-btn-modern:hover {
+      background: #e64a19 !important;
+      border-color: #ff5722 !important;
+      box-shadow: 0 4px 15px rgba(230, 74, 25, 0.4) !important;
+      transform: translateY(-1px);
+    }
+    .cart-btn-modern.active {
+      background: #ff5722 !important;
+      border-color: #ff7b54 !important;
+      box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
+    }
+    .cart-icon-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .cart-svg-icon {
+      width: 18px;
+      height: 18px;
+      stroke: #ffffff;
+      stroke-width: 2.2;
+      transition: transform 0.2s ease;
+    }
+    .cart-btn-modern:hover .cart-svg-icon {
+      transform: scale(1.1);
+    }
+    .cart-badge {
+      position: absolute;
+      top: -9px;
+      right: -9px;
+      background-color: #ffc107;
+      color: #3e2723;
+      font-size: 0.65rem;
+      font-weight: 800;
+      min-width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      border: 1.5px solid #ff5722;
+      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    
+    /* Bounce animation when item added to cart */
+    .cart-bounce {
+      animation: badgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+    }
+    @keyframes badgeBounce {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.45);
+      }
+    }
+
+    /* ===== Dropdown Nav ===== */
+    .dropdown {
+      position: relative;
+    }
+    .dropdown-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      user-select: none;
+    }
+    .dropdown-toggle::after {
+      content: "▼";
+      font-size: 0.6rem;
+      color: white;
+    }
+    .dropdown-menu {
+      position: absolute;
+      top: 2.8rem;
+      left: 0;
+      background: #ff5722;
+      border-radius: 8px;
+      min-width: 140px;
+      box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px);
+      transition: all 0.3s ease;
+      z-index: 10;
+    }
+    .dropdown-menu a {
+      display: block;
+      padding: 0.6rem 1rem;
+      color: white;
+      font-weight: 600;
+      border-radius: 8px;
+      transition: background 0.3s ease;
+    }
+    .dropdown-menu a:hover {
+      background: #e64a19;
+    }
+    .dropdown:hover .dropdown-menu,
+    .dropdown:focus-within .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+    /* When JS toggles the open class (keyboard interaction), show the menu the same way as hover */
+    .dropdown.open .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    /* Force-hide override for dropdown when JS needs to hide it despite :hover */
+    .dropdown.force-hide .dropdown-menu {
+      opacity: 0 !important;
+      visibility: hidden !important;
+      transform: translateY(10px) !important;
+      pointer-events: none !important;
+    }
+
+    /* ===== Auth/Profile Nav ===== */
+    .auth-nav-item {
+      display: inline-flex;
+      align-items: center;
+      margin-left: 0.25rem;
+      position: relative;
+      z-index: 12;
+    }
+
+    .login-btn-nav {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      padding: 0.55rem 1.1rem;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #ff5722;
+      font-weight: 700;
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+    }
+
+    .login-btn-nav:hover,
+    .login-btn-nav:focus-visible {
+      transform: translateY(-1px);
+      background: #fff2e9;
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
+    }
+
+    .profile-menu {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .profile-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 42px;
+      height: 42px;
+      border: none;
+      border-radius: 50%;
+      background: #ffffff;
+      color: #ff5722;
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+      padding: 0;
+    }
+
+    .profile-toggle:hover,
+    .profile-toggle:focus-visible {
+      transform: translateY(-1px);
+      background: #fff2e9;
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
+    }
+
+    .profile-avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+    }
+
+    .profile-avatar svg {
+      width: 22px;
+      height: 22px;
+      stroke-width: 1.9;
+    }
+
+    .profile-dropdown {
+      position: absolute;
+      top: calc(100% + 0.8rem);
+      right: 0;
+      width: min(260px, calc(100vw - 1.5rem));
+      padding: 0.85rem;
+      border-radius: 20px;
+      background: #ffffff;
+      border: 1px solid rgba(255, 87, 34, 0.14);
+      box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px);
+      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+      z-index: 1002;
+    }
+
+    .profile-menu.open .profile-dropdown {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .profile-dropdown-header {
+      padding: 0.25rem 0.55rem 0.85rem;
+      border-bottom: 1px solid rgba(255, 87, 34, 0.1);
+      margin-bottom: 0.35rem;
+    }
+
+    .profile-dropdown-name {
+      display: block;
+      font-weight: 700;
+      color: #2d2a26;
+      word-break: break-word;
+    }
+
+    .profile-dropdown-email {
+      display: block;
+      margin-top: 0.2rem;
+      font-size: 0.82rem;
+      color: #6c757d;
+      word-break: break-word;
+    }
+
+    .profile-dropdown a,
+    .profile-dropdown button {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0.8rem 0.95rem;
+      border: none;
+      border-radius: 14px;
+      background: transparent;
+      color: #2d2a26;
+      font: inherit;
+      font-weight: 600;
+      text-align: left;
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+    .profile-dropdown a:hover,
+    .profile-dropdown a:focus-visible,
+    .profile-dropdown button:hover,
+    .profile-dropdown button:focus-visible {
+      background: #fff2e9;
+      color: #ff5722;
+    }
+
+    .profile-dropdown-logout {
+      margin-top: 0.15rem;
+      color: #c2410c;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    @media (max-width: 860px) {
+      .profile-dropdown {
+        right: 0;
+        left: auto;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .auth-nav-item {
+        margin-left: 0;
+      }
+
+      .login-btn-nav {
+        min-height: 44px;
+        padding: 0.55rem 1rem;
+      }
+
+      .profile-toggle {
+        width: 44px;
+        height: 44px;
+      }
+
+      .profile-dropdown {
+        width: min(240px, calc(100vw - 1rem));
+      }
+    }
+
+    /* ===== Search Bar ===== */
+    .search-bar {
+      position: relative;
+      margin-left: 1.2rem;
+      display: flex;
+      align-items: center;
+    }
+    .search-bar input {
+      padding: 0.5rem 2.4rem 0.5rem 1rem;
+      border-radius: 24px;
+      border: 1px solid rgba(255, 87, 34, 0.15);
+      background-color: #fdfbf8;
+      outline: none;
+      font-size: 0.95rem;
+      color: #3e2723;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 210px;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+    }
+    .search-bar input::placeholder {
+      color: #a1887f;
+      opacity: 0.8;
+    }
+    .search-bar input:hover {
+      border-color: rgba(255, 87, 34, 0.4);
+    }
+    .search-bar input:focus {
+      background-color: #ffffff;
+      border-color: #ff5722;
+      box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15), 0 4px 12px rgba(255, 87, 34, 0.08);
+    }
+    .search-bar button {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: none;
+      background: transparent;
+      color: #ff5722;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+    .search-bar button:hover {
+      background-color: rgba(255, 87, 34, 0.08);
+    }
+    .search-bar button:active {
+      transform: translateY(-50%) scale(0.9);
+    }
+    .search-bar button .search-svg {
+      width: 16px;
+      height: 16px;
+      stroke-width: 2.5;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s ease;
+    }
+    .search-bar button:hover .search-svg {
+      transform: scale(1.1);
+      stroke: #bf360c;
+    }
+
+    /* ===== Hero Section ===== */
+    .hero {
+      background: rgb(255, 228, 205);
+      padding: 5rem 1rem 6rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4.5rem;
+      flex-wrap: wrap;
+      height: 90vh;
+    }
+    .hero-content {
+      flex: 1 1 400px;
+      max-width: 640px;
+    }
+    .hero-content h1 {
+      color: #ff5722;
+      font-size: 3rem;
+      font-weight: 700;
+      margin-bottom: 2rem;
+      user-select: none;
+      line-height: 3.7rem;
+    }
+    .hero-content p {
+      font-size: 1.1rem;
+      margin-bottom: 2rem;
+      font-weight: 600;
+      user-select: text;
+      line-height: 1.4;
+      color: black;
+    }
+    .btn-primary {
+      background: #e64a19;
+      color: white;
+      font-weight: 700;
+      padding: 1rem 2.5rem;
+      border-radius: 50px;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.4);
+      border: none;
+      transition: background 0.3s ease, color 0.3s ease;
+      user-select: none;
+    }
+    .btn-primary:hover {
+      background: #ff6333;
+      color: #fff;
+      box-shadow: 0 10px 30px rgb(230 74 25 / 0.6);
+    }
+    .hero-image {
+      flex: 1 1 400px;
+      max-width: 480px;
+      border-radius: 25px;
+      overflow: hidden;
+    }
+    .hero-image img {
+      width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
+
+    /* ===== Specials & Menu Section ===== */
+    section.specials,
+    section.menu,
+    section.recently-viewed {
+      padding: 4rem 1rem 5rem;
+      background: #fff3e0;
+    }
+    .section-title {
+      text-align: center;
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 2.5rem;
+      user-select: none;
+    }
+    .cards {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2rem;
+      justify-content: center;
+    }
+    .menu-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 2rem;
+      justify-content: center;
+      justify-items: center;
+      width: 100%;
+      margin-top: 2rem;
+    }
+    .card {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+      width: 260px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1rem 1rem 1.8rem;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      user-select: none;
+      cursor: default;
+    }
+    .card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 15px 35px rgb(0 0 0 / 0.2);
+    }
+    .add-btn{
+      background-color: green;
+      padding: 3px 8px;
+      border-radius: 15px;
+      color: white;
+      border: none;
+    }
+    .card img {
+      border-radius: 15px;
+      width: 250px;
+      height: 170px;
+      object-fit: cover;
+      margin-bottom: 1rem;
+      pointer-events: none;
+      user-select: none;
+    }
+    .card h3 {
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin-bottom: 0.6rem;
+      color: #3e2723;
+      user-select: text;
+    }
+    .card p.price {
+      font-weight: 600;
+      color: #bf360c;
+      margin-bottom: 1rem;
+      user-select: text;
+    }
+    .card p.description {
+      font-size: 0.9rem;
+      color: #5d4037;
+      margin-bottom: 1.3rem;
+      text-align: center;
+      user-select: text;
+    }
+    .btn-add {
+      background: #ff5722;
+      color: white;
+      border-radius: 40px;
+      padding: 0.5rem 1.8rem;
+      border: none;
+      font-weight: 700;
+      font-size: 1rem;
+      box-shadow: 0 6px 15px rgb(255 87 34 / 0.6);
+      user-select: none;
+      transition: background 0.3s ease;
+    }
+    .btn-add:hover {
+      background: #e64a19;
+      box-shadow: 0 8px 20px rgb(230 74 25 / 0.8);
+    }
+
+    /* ===== Menu Filters ===== */
+    .filter-buttons {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 3rem;
+      flex-wrap: wrap;
+      user-select: none;
+    }
+    .filter-btn {
+      background: #fff3e0;
+      border: 2px solid #ff5722;
+      color: #ff5722;
+      padding: 0.6rem 1.8rem;
+      border-radius: 50px;
+      font-weight: 600;
+      font-size: 1rem;
+      transition: all 0.3s ease;
+    }
+    .filter-btn.active,
+    .filter-btn:hover {
+      background: #ff5722;
+      color: white;
+      box-shadow: 0 6px 20px rgb(255 87 34 / 0.6);
+    }
+
+    /* ===== Cart Sidebar ===== */
+    #cart-sidebar {
+      position: fixed;
+      top: 0;
+      right: -400px;
+      width: 380px;
+      height: 100vh;
+      background: #fff3e0;
+      box-shadow: -6px 0 25px rgb(0 0 0 / 0.25);
+      transition: right 0.4s ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1500;
+      user-select: none;
+    }
+    #cart-sidebar.open {
+      right: 0;
+    }
+    #cart-header {
+      background: #ff5722;
+      color: white;
+      padding: 1.3rem 1.5rem;
+      font-weight: 700;
+      font-size: 1.4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #cart-close {
+      background: transparent;
+      border: none;
+      color: white;
+      font-size: 1.6rem;
+      font-weight: 900;
+      cursor: pointer;
+      user-select: none;
+    }
+    #cart-items {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 1rem 1.5rem;
+    }
+    .cart-item {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 1.4rem;
+      border-radius: 15px;
+      background: white;
+      box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
+      padding: 1rem;
+      align-items: center;
+    }
+    .cart-item img {
+      width: 80px;
+      height: 60px;
+      border-radius: 12px;
+      object-fit: cover;
+      user-select: none;
+    }
+    .cart-item-info {
+      flex: 1;
+      user-select: text;
+    }
+    .cart-item-info h4 {
+      font-weight: 700;
+      color: #3e2723;
+      margin-bottom: 0.3rem;
+    }
+    .cart-item-info p {
+      color: #5d4037;
+      font-size: 0.9rem;
+      margin-bottom: 0.5rem;
+    }
+    .qty-controls {
+      display: flex;
+      gap: 0.4rem;
+      align-items: center;
+      font-weight: 700;
+      user-select: none;
+    }
+    .qty-controls button {
+      background: #ff5722;
+      color: white;
+      border: none;
+      padding: 0.3rem 0.7rem;
+      font-size: 1.1rem;
+      border-radius: 5px;
+      transition: background 0.3s ease;
+      cursor: pointer;
+    }
+    .qty-controls button:hover {
+      background: #e64a19;
+    }
+    .qty-controls span {
+      min-width: 24px;
+      text-align: center;
+      font-size: 1rem;
+      user-select: none;
+    }
+    .cart-item-remove {
+      background: transparent;
+      border: none;
+      color: #bf360c;
+      font-weight: 700;
+      cursor: pointer;
+      font-size: 0.95rem;
+      user-select: none;
+      transition: color 0.3s ease;
+    }
+    .cart-item-remove:hover {
+      color: #e64a19;
+    }
+    #cart-footer {
+      padding: 1rem 1.5rem;
+      border-top: 2px solid #ff5722;
+      font-weight: 700;
+      font-size: 1.3rem;
+      color: #bf360c;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #checkout-btn {
+      background: #ff5722;
+      border: none;
+      padding: 0.7rem 2rem;
+      border-radius: 50px;
+      font-weight: 700;
+      color: white;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
+      transition: background 0.3s ease;
+      user-select: none;
+    }
+    #checkout-btn:hover:not(:disabled) {
+      background: #e64a19;
+      box-shadow: 0 10px 30px rgb(230 74 25 / 0.9);
+    }
+    #checkout-btn:disabled {
+      background: #ffb399;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    /* ===== About Section ===== */
+    section.about {
+      padding: 5rem 1rem 7rem;
+      background: white;
+      color: #3e3e3e;
+      user-select: text;
+    }
+    .about .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .about h2 {
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 2rem;
+      text-align: center;
+      user-select: none;
+    }
+    .about p {
+      font-size: 1.1rem;
+      line-height: 1.5;
+      color: #5d4037;
+      margin-bottom: 2rem;
+    }
+    .team {
+      display: flex;
+      gap: 2rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 3rem;
+    }
+   
+   .team-member {
+   width: 100%;
+   max-width: 420px;
+   min-width: 280px;
+   height: 320px;
+   flex: 1 1 320px;
+   perspective: 1000px;
+   background: transparent;
+   border-radius: 20px;
+   box-shadow: none;
+   padding: 0;
+   text-align: center;
+   user-select: none;
+}
+
+.team-member-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s ease;
+  transform-style: preserve-3d;
+}
+
+.team-member:hover .team-member-inner,
+.team-member:focus .team-member-inner {
+  transform: rotateY(180deg);
+}
+
+.team-member-front,
+.team-member-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fff3e0;
+  border-radius: 20px;
+  box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+  backface-visibility: hidden;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  padding: 1.5rem 1.2rem;
+  box-sizing: border-box;
+}
+
+.team-member-front:hover,
+.team-member-back:hover {
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.15);
+}
+
+.team-member-back {
+  transform: rotateY(180deg);
+}
+
+.team-member img {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  margin-bottom: 1rem;
+  object-fit: cover;
+  user-select: none;
+}
+
+.team-member h4 {
+  font-weight: 700;
+  margin-bottom: 0.3rem;
+  color: #3e2723;
+}
+
+.team-member p {
+  font-size: 0.9rem;
+  color: #5d4037;
+  user-select: text;
+}
+
+.team-member-back p {
+  max-width: 85%;
+  line-height: 1.5;
+}
+
+    /* ===== Contact Section ===== */
+    section.contact {
+      padding: 5rem 1rem 7rem;
+      background: white;
+      color: #3e3e3e;
+      user-select: text;
+    }
+    section.contact .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    section.contact h2 {
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 3rem;
+      text-align: center;
+      user-select: none;
+    }
+
+    /* ===== Contact Form ===== */
+    form.contact-form {
+      max-width: 500px;
+      margin: 0 auto;
+      background: #fff3e0;
+      padding: 2rem 2.5rem;
+      border-radius: 20px;
+      box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
+      user-select: text;
+    }
+    form.contact-form label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+      color: #bf360c;
+      user-select: none;
+    }
+    form.contact-form input,
+    form.contact-form textarea {
+      width: 100%;
+      padding: 0.7rem 1rem;
+      border-radius: 12px;
+      border: 2px solid #ffcc99;
+      font-size: 1rem;
+      margin-bottom: 1.3rem;
+      font-family: inherit;
+      resize: vertical;
+      transition: border-color 0.3s ease;
+      user-select: text;
+    }
+    form.contact-form input:focus,
+    form.contact-form textarea:focus {
+      border-color: #ff5722;
+      outline: none;
+    }
+    form.contact-form textarea {
+      min-height: 100px;
+    }
+    .error-msg {
+      font-size: 0.85rem;
+      color: #c0392b;
+      margin-top: -1rem;
+      margin-bottom: 0.8rem;
+      min-height: 1rem;
+      display: block;
+      user-select: none;
+    }
+    .form-success-msg {
+      margin-top: 0.8rem;
+      margin-bottom: 1rem;
+      padding: 0.8rem 1rem;
+      background-color: #e8f5e9;
+      color: #2e7d32;
+      border-left: 4px solid #43a047;
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-weight: 600;
+      animation: fadeInDown 0.4s ease;
+    }
+    @keyframes fadeInDown {
+      from { opacity: 0; transform: translateY(-8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .btn-submit {
+      background: #ff5722;
+      color: white;
+      font-weight: 700;
+      padding: 0.9rem 2rem;
+      border-radius: 50px;
+      border: none;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
+      transition: background 0.3s ease;
+      user-select: none;
+      width: 100%;
+    }
+    .btn-submit:hover {
+      background: #e64a19;
+    }
+
+    /* ===== Testimonials ===== */
+    section.testimonials {
+      padding: 5rem 1rem 7rem;
+      background: #fff3e0;
+      color: #3e2723;
+      user-select: none;
+    }
+    .testimonial-cards {
+      max-width: 900px;
+      margin: 0 auto;
+      display: flex;
+      gap: 2rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .testimonial {
+      background: white;
+      padding: 1.8rem 2rem;
+      border-radius: 20px;
+      box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
+      max-width: 320px;
+      position: relative;
+      font-style: italic;
+      user-select: text;
+    }
+    .testimonial::before {
+      content: "“";
+      position: absolute;
+      font-size: 4rem;
+      top: -20px;
+      left: 20px;
+      color: #ff5722;
+      font-weight: 900;
+      user-select: none;
+    }
+    .testimonial p {
+      margin-bottom: 1rem;
+    }
+    .testimonial .author {
+      font-weight: 700;
+      text-align: right;
+      color: #bf360c;
+      user-select: text;
+    }
+
+    /* ===== Newsletter Signup ===== */
+    section.newsletter {
+      background: #ff5722;
+      color: white;
+      padding: 3rem 1rem 5rem;
+      text-align: center;
+      user-select: none;
+    }
+    section.newsletter h2 {
+      font-weight: 700;
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+    section.newsletter p {
+      font-weight: 500;
+      margin-bottom: 1.5rem;
+    }
+    .newsletter-form {
+      max-width: 400px;
+      margin: 0 auto;
+      display: flex;
+      gap: 0.6rem;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .newsletter-form input {
+      padding: 0.8rem 1rem;
+      border-radius: 40px;
+      border: none;
+      flex-grow: 1;
+      font-size: 1rem;
+      outline: none;
+      font-family: inherit;
+    }
+    .newsletter-form button {
+      padding: 0.8rem 1.8rem;
+      background: #fff;
+      border: none;
+      border-radius: 40px;
+      color: #ff5722;
+      font-weight: 700;
+      box-shadow: 0 6px 15px rgb(255 87 34 / 0.8);
+      transition: background 0.3s ease;
+      user-select: none;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .newsletter-form button:hover {
+      background: #fbe9e7;
+    }
+
+    /* ===== Modern Premium Footer ===== */
+    footer {
+      background: #fff3e0; /* Warm cream background */
+      color: #3e2723; /* Deep warm brown text */
+      padding: 4rem 2rem 2rem;
+      border-top: 1px solid rgba(255, 87, 34, 0.15);
+      user-select: text; /* Allow selecting text */
+      font-family: 'Poppins', sans-serif;
+    }
+    
+    .footer-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 2rem;
+      margin-bottom: 3rem;
+    }
+    
+    @media (max-width: 1024px) {
+      .footer-container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    
+    @media (max-width: 768px) {
+      .footer-container {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    
+    @media (max-width: 480px) {
+      .footer-container {
+        grid-template-columns: 1fr;
+      }
+    }
+    
+    .footer-brand {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #ff5722; /* Vibrant orange logo */
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-family: 'Poppins', sans-serif;
+    }
+    .footer-logo-img {
+      height: 40px;
+      width: 40px;
+      object-fit: cover;
+      border-radius: 50%;
+      background: white;
+      padding: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+    .footer-brand:hover .footer-logo-img {
+      transform: scale(1.08);
+    }
+    
+    .footer-desc {
+      font-size: 0.95rem;
+      color: #5d4037;
+      line-height: 1.6;
+      max-width: 320px;
+    }
+    
+    .footer-column h3 {
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: #bf360c; /* Deep brand orange */
+      margin-bottom: 1.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    
+    .footer-links {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    
+    .footer-links li a {
+      color: #5d4037;
+      font-size: 0.95rem;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      display: inline-block;
+    }
+    
+    .footer-links li a:hover {
+      color: #ff5722;
+      transform: translateX(3px);
+    }
+    
+    .footer-contact-info {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      color: #5d4037;
+      font-size: 0.95rem;
+    }
+    
+    .footer-contact-info li {
+      line-height: 1.5;
+    }
+    
+    .footer-contact-info strong {
+      color: #bf360c;
+    }
+    
+    .footer-social-wrapper {
+      margin-bottom: 1.5rem;
+    }
+    
+    .footer-social-icons {
+      display: flex;
+      gap: 1rem;
+      margin-top: 0.5rem;
+    }
+    
+    .footer-social-icons a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      background: #ff5722;
+      color: white !important;
+      font-size: 1.1rem;
+      transition: all 0.3s ease;
+    }
+    
+    .footer-social-icons a:hover {
+      background: #bf360c;
+      transform: translateY(-3px);
+      box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
+    }
+    
+    .footer-bottom {
+      border-top: 1px solid rgba(255, 87, 34, 0.1);
+      padding-top: 1.5rem;
+      text-align: center;
+      font-size: 0.9rem;
+      color: #8d6e63;
+      font-weight: 500;
+    }
+    
+    .footer-bottom p {
+      margin: 0;
+    }
+    
+    /* Dark Mode Overrides */
+    body.dark footer {
+      background: #1e1e1e;
+      border-top-color: rgba(255, 87, 34, 0.1);
+      color: #ccc;
+    }
+    
+    body.dark .footer-desc, 
+    body.dark .footer-links li a, 
+    body.dark .footer-contact-info {
+      color: #aaa;
+    }
+    
+    body.dark .footer-links li a:hover {
+      color: #ff7b54;
+    }
+    
+    body.dark .footer-bottom {
+      border-top-color: rgba(255, 255, 255, 0.05);
+      color: #777;
+    }
+
+    /* ===== Enhanced Animations & Transitions ===== */
+    .card {
+      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    .card:hover {
+      animation: cardBounce 0.6s ease-out;
+    }
+
+    @keyframes cardBounce {
+      0% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-12px);
+      }
+      100% {
+        transform: translateY(-8px);
+      }
+    }
+
+    /* Button enhancements */
+    button {
+      transition: all 0.3s ease;
+      position: relative;
+    }
+
+    .btn-primary:active,
+    .btn-add:active,
+    .filter-btn:active {
+      transform: scale(0.98);
+    }
+
+    /* Card image zoom on hover */
+    .card img {
+      transition: transform 0.4s ease;
+    }
+
+    .card:hover img {
+      transform: scale(1.05);
+    }
+
+    /* Smooth filter transitions */
+    .filter-btn {
+      transition: all 0.3s ease;
+    }
+
+    .filter-btn.active {
+      animation: filterPulse 0.5s ease;
+    }
+
+    @keyframes filterPulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+    }
+
+    /* Navigation link enhancements */
+    nav a {
+      position: relative;
+      overflow: hidden;
+    }
+
+    nav a:hover::after {
+      left: 0;
+    }
+
+    /* Search input enhancement */
+    .search-bar input {
+      transition: all 0.3s ease;
+    }
+
+    .search-bar input::placeholder {
+      transition: color 0.3s ease;
+    }
+
+    .search-bar input:focus::placeholder {
+      color: transparent;
+    }
+
+    /* Cart animations */
+    .cart-item {
+      animation: slideInCart 0.3s ease-out;
+    }
+
+    @keyframes slideInCart {
+      from {
+        opacity: 0;
+        transform: translateX(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    /* Responsive button text for mobile */
+    @media (max-width: 480px) {
+      .btn-primary,
+      .btn-add {
+        padding: 0.8rem 1.5rem;
+        font-size: 0.95rem;
+      }
+    }
+
+    /* ===== Responsive ===== */
+    @media (max-width: 1024px) {
+      .hero {
+        flex-direction: column;
+        padding: 4rem 1rem 5rem;
+      }
+      .hero-content,
+      .hero-image {
+        max-width: 100%;
+      }
+      nav {
+        gap: 1rem;
+      }
+      #cart-sidebar {
+        width: 100%;
+        max-width: 400px;
+      }
+    }
+    @media (max-width: 600px) {
+      .cards {
+        flex-direction: column;
+        align-items: center;
+      }
+      .team {
+        flex-direction: column;
+        align-items: center;
+      }
+      .testimonial-cards {
+        flex-direction: column;
+        align-items: center;
+      }
+      .search-bar input {
+        width: 130px;
+      }
+      .filter-buttons {
+        gap: 0.8rem;
+      }
+    }
+
+    /*=====Team member layout Fix===*/
+
+    @media (max-width: 768px) {
+    .team-member {
+    min-width: 100%;
+    max-width: 100%;
+  }
+  }
+    /* ===== Mobile Navbar Fix ===== */
+@media (max-width: 480px) {
+
+  .header-inner {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 1rem;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+
+  nav {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  nav a {
+    padding: 0.4rem 0.7rem;
+    font-size: 0.9rem;
+  }
+
+  .search-bar {
+    margin-left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .search-bar input {
+    width: 100%;
+    max-width: 220px;
+  }
+}
+
+/* ===== Skeleton UI ===== */
+
+/* Base skeleton element */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #f0e0d0 25%,
+    #ffe0c8 50%,
+    #f0e0d0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 8px;
+  display: block;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Skeleton Card — mirrors .card layout exactly */
+.skeleton-card {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+  width: 260px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 1rem 1.8rem;
+  gap: 0.8rem;
+}
+
+.skeleton-card .sk-image {
+  width: 100%;
+  height: 170px;
+  border-radius: 15px;
+}
+
+.skeleton-card .sk-title {
+  width: 70%;
+  height: 20px;
+  border-radius: 6px;
+}
+
+.skeleton-card .sk-desc-line {
+  height: 13px;
+  border-radius: 6px;
+}
+
+.skeleton-card .sk-desc-line:nth-child(1) { width: 90%; }
+.skeleton-card .sk-desc-line:nth-child(2) { width: 75%; }
+
+.skeleton-card .sk-price {
+  width: 40%;
+  height: 16px;
+  border-radius: 6px;
+  margin-top: 0.2rem;
+}
+
+.skeleton-card .sk-btn {
+  width: 120px;
+  height: 38px;
+  border-radius: 40px;
+  margin-top: 0.4rem;
+}
+
+/* Skeleton Cart Item — mirrors .cart-item layout */
+.skeleton-cart-item {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.4rem;
+  border-radius: 15px;
+  background: white;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
+  padding: 1rem;
+  align-items: center;
+}
+
+.skeleton-cart-item .sk-thumb {
+  width: 80px;
+  height: 60px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.skeleton-cart-item .sk-lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-cart-item .sk-line-name {
+  height: 14px;
+  width: 60%;
+  border-radius: 6px;
+}
+
+.skeleton-cart-item .sk-line-price {
+  height: 12px;
+  width: 35%;
+  border-radius: 6px;
+}
+
+.skeleton-cart-item .sk-line-qty {
+  height: 28px;
+  width: 90px;
+  border-radius: 6px;
+}
+
+/* ===== Autocomplete Search Suggestions ===== */
+.search-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% + 20px);
+  min-width: 350px;
+  max-width: 90vw;
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
+  margin-top: 0.8rem;
+  z-index: 1001;
+  overflow: hidden;
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.suggestion-item {
+  padding: 1rem 1.4rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  border-bottom: 1px solid rgba(255, 87, 34, 0.08);
+  transition: background 0.2s ease, transform 0.2s ease;
+  min-height: 50px;
+}
+
+.suggestion-item:last-child {
+  border-bottom: none;
+}
+
+.suggestion-item:hover {
+  background: rgba(255, 87, 34, 0.08);
+  transform: translateX(4px);
+}
+
+.suggestion-item:active {
+  background: rgba(255, 87, 34, 0.15);
+}
+
+.suggestion-item.no-matches {
+  color: #bf360c;
+  font-weight: 500;
+  text-align: center;
+  justify-content: center;
+  cursor: default;
+  background: transparent !important;
+  padding: 1.5rem;
+}
+
+.suggestion-name {
+  font-weight: 600;
+  color: #2c1810;
+  font-size: 1rem;
+  line-height: 1.4;
+  flex: 1;
+  min-width: 150px;
+}
+
+.suggestion-category {
+  font-size: 0.8rem;
+  background: rgba(255, 87, 34, 0.15);
+  color: #bf360c;
+  padding: 0.35rem 0.75rem;
+  border-radius: 24px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+/* ===== Advanced Filters UI ===== */
+.filter-toggle-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.btn-filter-toggle {
+  background: white;
+  border: 2px solid #ff5722;
+  color: #ff5722;
+  padding: 0.6rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.1);
+}
+
+.btn-filter-toggle:hover {
+  background: #fbe9e7;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.2);
+}
+
+.btn-filter-toggle.active {
+  background: #ff5722;
+  color: white;
+  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
+}
+
+.advanced-filters {
+  max-width: 800px;
+  margin: 0 auto 3rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.4s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.filter-group label {
+  font-weight: 700;
+  color: #bf360c;
+  font-size: 0.95rem;
+}
+
+/* Slider Custom Styles */
+.filter-group input[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+   appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #ffe0b2;
+  outline: none;
+}
+
+.filter-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #ff5722;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+  box-shadow: 0 0 8px rgba(255, 87, 34, 0.4);
+}
+
+.filter-group input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+#price-slider-val {
+  font-weight: 700;
+  color: #ff5722;
+}
+
+/* Selectors custom styles */
+.filter-group select {
+  padding: 0.6rem 0.8rem;
+  border-radius: 10px;
+  border: 2px solid #ffcc99;
+  background: white;
+  font-size: 0.95rem;
+  color: #5d4037;
+  outline: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.3s ease;
+}
+
+.filter-group select:focus {
+  border-color: #ff5722;
+}
+
+/* Dietary custom checkboxes */
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-top: 0.2rem;
+}
+
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-checkbox input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #ff5722;
+  cursor: pointer;
+}
+
+.checkbox-label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #5d4037 !important;
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(255, 87, 34, 0.1);
+}
+
+.btn-reset-filters {
+  background: transparent;
+  border: 2px solid #bf360c;
+  color: #bf360c;
+  padding: 0.5rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.btn-reset-filters:hover {
+  background: #bf360c;
+  color: white;
+  box-shadow: 0 4px 15px rgba(191, 54, 12, 0.3);
+}
+
+/* ===== Highlights & Food Metadata Styles ===== */
+mark.highlight {
+  background: #ffd54f;
+  color: #3e2723;
+  padding: 0.05rem 0.15rem;
+  border-radius: 3px;
+  font-weight: 700;
+}
+
+.card-meta {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.card-meta .rating {
+  color: #ffb300;
+}
+
+.card-meta .spice {
+  color: #bf360c;
+}
+
+.card-tags {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-top: 0.8rem;
+}
+
+.tag {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tag-vegan {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid rgba(46, 125, 50, 0.2);
+}
+
+.tag-gluten-free {
+  background: #e0f7fa;
+  color: #00838f;
+  border: 1px solid rgba(0, 131, 143, 0.2);
+}
+
+/* Fix description layout on food card */
+.card-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.card-content h3 {
+  margin-bottom: 0.4rem;
+}
+
+.card-content p {
+  font-size: 0.9rem;
+  color: #5d4037;
+  line-height: 1.4;
+  margin-bottom: auto;
+}
+
+.card-footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.2rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid #fbe9e7;
+}
+
+.card-footer .price {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #bf360c;
+}
+
+.card-footer .add-btn {
+  background: #2e7d32;
+  color: white;
+  padding: 0.4rem 1.2rem;
+  border-radius: 50px;
+  border: none;
+  font-weight: 700;
+  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
+  transition: all 0.3s ease;
+}
+
+.card-footer .add-btn:hover {
+  background: #1b5e20;
+  box-shadow: 0 6px 15px rgba(27, 94, 32, 0.5);
+  transform: translateY(-1px);
+}
+
+/* ===== Orders Dashboard Layout ===== */
+.orders-page {
+  padding-top: 4rem;
+  padding-bottom: 5rem;
+}
+
+.orders-page h1 {
+  font-size: 2.2rem;
+  color: #bf360c;
+  margin-bottom: 2.5rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.orders-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Empty Orders Page */
+.empty-orders {
+  text-align: center;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 4rem 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.empty-orders h2 {
+  font-size: 1.6rem;
+  color: #3e2723;
+  margin-bottom: 0.8rem;
+}
+
+.empty-orders p {
+  color: #5d4037;
+  font-size: 1.05rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Order Progress Card */
+.order-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.order-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 35px rgba(255, 87, 34, 0.1);
+}
+
+.order-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #fbe9e7;
+  padding-bottom: 1.2rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.order-meta-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.order-id {
+  font-size: 1.1rem;
+  color: #3e2723;
+}
+
+.order-date {
+  font-size: 0.85rem;
+  color: #8d6e63;
+}
+
+/* Status Badges */
+.status-badge {
+  font-size: 0.85rem;
+  font-weight: 700;
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: inline-block;
+}
+
+.status-badge.status-pending {
+  background: #fff8e1;
+  color: #ffb300;
+  border: 1px solid rgba(255, 179, 0, 0.3);
+}
+
+.status-badge.status-preparing {
+  background: #fbe9e7;
+  color: #ff5722;
+  border: 1px solid rgba(255, 87, 34, 0.3);
+}
+
+.status-badge.status-on-the-way {
+  background: #e1f5fe;
+  color: #0288d1;
+  border: 1px solid rgba(2, 136, 209, 0.3);
+}
+
+.status-badge.status-delivered {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid rgba(46, 125, 50, 0.3);
+}
+
+/* Graphical Progress Stepper Track */
+.order-timeline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 2rem 0 2.5rem;
+  padding: 0 1rem;
+}
+
+.timeline-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  gap: 0.5rem;
+}
+
+.step-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e0e0e0;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.9rem;
+  transition: all 0.4s ease;
+  border: 2px solid transparent;
+}
+
+.step-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #9e9e9e;
+  transition: all 0.4s ease;
+}
+
+/* Timeline Connectors */
+.timeline-line {
+  flex: 1;
+  height: 4px;
+  background: #e0e0e0;
+  margin-top: -1.2rem;
+  z-index: 1;
+  transition: all 0.4s ease;
+}
+
+/* Highlighted Progress Active Steps states */
+.timeline-step.active .step-circle {
+  background: #ffe0b2;
+  color: #ff5722;
+  border-color: #ff5722;
+}
+
+.timeline-step.active .step-label {
+  color: #ff5722;
+}
+
+.timeline-step.current .step-circle {
+  background: #ff5722;
+  color: white;
+  box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
+  transform: scale(1.15);
+}
+
+.timeline-step.current .step-label {
+  font-weight: 700;
+  color: #bf360c;
+}
+
+.timeline-line.active {
+  background: #ffaa66;
+}
+
+/* Order Item Row Summary Layout */
+.order-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 1.2rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid #fbe9e7;
+}
+
+.order-item-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  color: #5d4037;
+}
+
+.order-item-row span:first-child {
+  font-weight: 600;
+}
+
+.order-item-row span:last-child {
+  font-weight: 700;
+}
+
+/* Order Card Footer */
+.order-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.order-total-price {
+  font-size: 1.05rem;
+  color: #5d4037;
+}
+
+.order-total-price strong {
+  font-size: 1.3rem;
+  color: #bf360c;
+  margin-left: 0.4rem;
+}
+
+/* Reorder Button styling */
+.btn-reorder {
+  background: #ff5722;
+  color: white;
+  border: none;
+  padding: 0.6rem 1.6rem;
+  border-radius: 50px;
+  font-weight: 700;
+  font-size: 0.95rem;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.btn-reorder:hover {
+  background: #bf360c;
+  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.4);
+  transform: translateY(-1px);
+}
+ 
+
+.price-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.original-price {
+  text-decoration: line-through;
+  color: gray;
+  font-size: 14px;
+}
+
+.discount-badge {
+  background-color: #ff4d4dc1;
+  color: white;
+  padding: 1.5px 4.5px;
+  border-radius: 5px;
+  font-size: 10.5px;
+  font-weight: bold;
+}
+/* ===== Dark Mode Theme ===== */
+.theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 68px;
+  height: 32px;
+  padding: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 99px;
+  background-color: #f2f4f7;
+  cursor: pointer;
+  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.theme-toggle:hover {
+  border-color: rgba(255, 87, 34, 0.3);
+}
+
+.theme-toggle:focus-visible {
+  outline: 2px solid #ff5722 !important;
+  outline-offset: 2px;
+}
+
+.theme-toggle-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 4px;
+}
+
+.theme-toggle-thumb {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #ffa726; /* vibrant orange/yellow for light mode */
+  box-shadow: 0 2px 6px rgba(255, 167, 38, 0.4);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+.theme-toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  z-index: 2;
+  pointer-events: none;
+  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle-icon svg {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.5;
+}
+
+.theme-toggle-icon.sun-icon {
+  color: #ffffff; /* Active in light mode */
+}
+
+.theme-toggle-icon.moon-icon {
+  color: #8e9aa8; /* Inactive in light mode */
+}
+
+/* Dark mode specific overrides for theme toggle */
+body.dark .theme-toggle {
+  background-color: #15191e;
+  border-color: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .theme-toggle-thumb {
+  transform: translateX(36px);
+  background-color: #2b3648; /* Slate blue for dark mode */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+body.dark .theme-toggle-icon.sun-icon {
+  color: #5f6d7e; /* Inactive in dark mode */
+}
+
+body.dark .theme-toggle-icon.moon-icon {
+  color: #ffffff; /* Active in dark mode */
+}
+
+body.dark .login-btn-nav,
+body.dark .profile-toggle {
+  background: #2b2b2b;
+  color: #ffffff;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .login-btn-nav:hover,
+body.dark .login-btn-nav:focus-visible,
+body.dark .profile-toggle:hover,
+body.dark .profile-toggle:focus-visible {
+  background: #3a2d27;
+  color: #ffd0c2;
+}
+
+body.dark .profile-dropdown {
+  background: #232323;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
+}
+
+body.dark .profile-dropdown-header {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+body.dark .profile-dropdown-name {
+  color: #ffffff;
+}
+
+body.dark .profile-dropdown-email {
+  color: #b0b7c3;
+}
+
+body.dark .profile-dropdown a,
+body.dark .profile-dropdown button {
+  color: #f3f3f3;
+}
+
+body.dark .profile-dropdown a:hover,
+body.dark .profile-dropdown a:focus-visible,
+body.dark .profile-dropdown button:hover,
+body.dark .profile-dropdown button:focus-visible {
+  background: rgba(255, 87, 34, 0.16);
+  color: #ffb39d;
+}
+
+body.dark .profile-dropdown-logout {
+  color: #ffb39d;
+}
+/* body */
+body.dark {
+  background: #1e1e1e;
+  color: #f5f5f5;
+}
+
+/* Headings  */
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4{
+  color: #ff5722;
+}
+body.dark p{
+  color: #ffab91;
+}
+
+/* Header & Navigation */
+body.dark header {
+  /* Keep orange brand background — only deepen the shadow for dark mode depth */
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
+}
+body.dark nav a {
+  color: #f5f5f5;
+}
+body.dark nav a:hover,
+body.dark nav a.active {
+  background: #ff5722;
+  box-shadow: 0 0 8px rgba(255, 87, 34, 0.8);
+}
+body.dark .dropdown-menu {
+  background: #333;
+}
+body.dark .dropdown-menu a:hover {
+  background: #ff5722;
+}
+
+/* Hero Section */
+body.dark .hero {
+  background: linear-gradient(120deg, #3b1f17, #2c150d);
+  color: #fff3e0;
+}
+body.dark .btn-primary {
+  background: #ff5722;
+  color: #fff;
+}
+body.dark .btn-primary:hover {
+  background: #e64a19;
+}
+
+/* Cards & Containers */
+body.dark .card,
+body.dark .skeleton-card,
+body.dark .skeleton-cart-item {
+  background: #2a2a2a;
+  color: #eee;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+}
+body.dark .card h3 {
+  color: #ff5722;
+}
+body.dark .card p.price {
+  color: #ffab91;
+}
+body.dark .card p.description {
+  color: #ccc;
+}
+
+/* Sections */
+body.dark section.menu,
+body.dark section.specials,
+body.dark section.about,
+body.dark section.testimonials {
+  background: #252525;
+  color: #eee;
+}
+body.dark .filter-btn {
+  background: transparent;
+  border: 2px solid #ff5722;
+  color: #ff5722;
+}
+body.dark .filter-btn.active,
+body.dark .filter-btn:hover {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Cart Sidebar */
+body.dark #cart-sidebar {
+  background: #2b2b2b;
+  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.6);
+}
+body.dark #cart-header {
+  background: #ff5722;
+}
+body.dark .cart-item {
+  background: #333;
+}
+
+body.dark #checkout-btn {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Forms */
+body.dark section.contact {
+  background: #252525;
+  color: #eee;
+}
+body.dark section.contact h2 {
+  color: #ff5722;
+}
+body.dark form.contact-form {
+  background: #2b2b2b;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+}
+body.dark form.contact-form input,
+body.dark form.contact-form textarea {
+  background: #1e1e1e;
+  color: #f5f5f5;
+  border-color: #444;
+}
+body.dark form.contact-form label {
+  color: #ffab91;
+}
+body.dark .btn-submit {
+  background: #ff5722;
+}
+
+/* Testimonials */
+body.dark .testimonial {
+  background: #2a2a2a;
+  color: #ddd;
+}
+body.dark .testimonial::before {
+  color: #ff5722;
+}
+
+/* Newsletter */
+body.dark section.newsletter {
+  background: #2c2c2c;
+  color: #fff;
+}
+body.dark .newsletter-form button {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Footer */
+body.dark footer {
+  background: #111;
+  color: #eee;
+}
+body.dark .social-icons a:hover {
+  color: #ff5722;
+}
+
+/* Skeleton Animation background  */
+body.dark .skeleton {
+  background: linear-gradient(
+    90deg,
+    #534949 25%,
+    #444 50%,
+    #3a3a3a 75%
+  );
+}
+
+/* Dark Mode Search Bar overrides */
+body.dark .search-bar input {
+  background-color: #2c2c2c;
+  color: #f5f5f5;
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+body.dark .search-bar input::placeholder {
+  color: #8d6e63;
+}
+body.dark .search-bar input:hover {
+  border-color: rgba(255, 87, 34, 0.4);
+}
+body.dark .search-bar input:focus {
+  background-color: #1e1e1e;
+  border-color: #ff5722;
+  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+body.dark .search-bar button {
+  color: #ff5722;
+}
+body.dark .search-bar button:hover {
+  background-color: rgba(255, 87, 34, 0.15);
+}
+body.dark .search-bar button:hover .search-svg {
+  stroke: #ff7b54;
+}
+body.dark .search-suggestions {
+  background: rgba(30, 30, 30, 0.98);
+  border-color: rgba(255, 87, 34, 0.3);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+}
+body.dark .suggestion-item {
+  border-bottom: 1px solid rgba(255, 87, 34, 0.12);
+}
+body.dark .suggestion-name {
+  color: #eee;
+}
+body.dark .suggestion-category {
+  color: #ffab91;
+}
+body.dark .suggestion-item:hover {
+  background: rgba(255, 87, 34, 0.15);
+}
+body.dark .suggestion-item.no-matches {
+  color: #ff7b54;
+}
+
+/* Dark Mode Cart Button overrides */
+body.dark .cart-btn-modern {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.12) !important;
+}
+body.dark .cart-btn-modern:hover {
+  background: #ff5722 !important;
+  border-color: #ff7b54 !important;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4) !important;
+}
+body.dark .cart-btn-modern.active {
+  background: #ff5722 !important;
+  border-color: #ff7b54 !important;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
+}
+body.dark .cart-badge {
+  background-color: #ffb300;
+  border-color: #ff5722;
+  color: #1e1e1e;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #fff3e0;
+}
+::-webkit-scrollbar-thumb {
+  background: #ff5722;
+  border-radius: 999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #e64a19;
+}
+/*Accessibility Styles */
+
+/* ===== Accessibility Styles ===== */
+
+
+/* Skip link - visible on focus */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #ff5722;
+  color: white;
+  padding: 0.6rem 1rem;
+  text-decoration: none;
+  z-index: 10000;
+  border-radius: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* Enhanced focus states for keyboard navigation */
+body.keyboard-nav button:focus,
+body.keyboard-nav a:focus,
+body.keyboard-nav input:focus,
+body.keyboard-nav textarea:focus,
+body.keyboard-nav select:focus {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Focus states for all interactive elements */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Card focus state */
+.card:focus {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
+}
+
+/* Search suggestion focused state */
+.suggestion-item.focused {
+  background: #ffe0d0;
+  color: #3e3e3e;
+}
+
+.suggestion-item:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 1px;
+}
+
+/* Improved focus for navigation links */
+nav a:focus-visible {
+  box-shadow: 0 0 8px #ff5722;
+}
+
+/* Filter button focus state */
+.filter-btn:focus-visible,
+.menu-filter:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Checkbox and radio focus states */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Range slider focus state */
+input[type="range"]:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 4px;
+}
+
+/* Select dropdown focus state */
+select:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  select:focus-visible {
+    outline-width: 4px;
+  }
+
+  .card:focus {
+    outline-width: 4px;
+    box-shadow: 0 0 30px rgba(255, 87, 34, 0.8);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Note: theme switching is handled via body.dark class (see auth.js setupThemeToggle) */
+
+
+/* Improve contrast of disabled buttons */
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Out of Stock Badge */
+.out-of-stock-badge {
+  background-color: #6c757d !important;  /* Grey color */
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-block;
+  margin: 10px 0 5px 0;
+  letter-spacing: 0.5px;
+  text-align: center;
+  width: fit-content;
+}
+
+/* Disabled button styling */
+.add-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #cccccc !important;
+  transform: none !important;
+}
+
+/* Hover effect for disabled button */
+.add-btn:disabled:hover {
+  transform: none !important;
+  opacity: 0.6;
+}
+
+
+/* ===== Loyalty Wallet Styles ===== */
+.cart-loyalty-widget {
+  background: #ffffff;
+  border: 1px dashed #ff9800;
+  border-radius: 16px;
+  padding: 1.2rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+body.dark .cart-loyalty-widget {
+  background: #2a2a2a;
+  border-color: #f57c00;
+  color: #fff;
+}
+
+.loyalty-widget-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 0.8rem;
+}
+
+.loyalty-icon {
+  font-size: 1.6rem;
+  filter: drop-shadow(0 2px 5px rgba(255, 152, 0, 0.4));
+  animation: pulse-gold 2s infinite ease-in-out;
+}
+
+@keyframes pulse-gold {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.15); }
+  100% { transform: scale(1); }
+}
+
+.loyalty-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.loyalty-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #bf360c;
+}
+
+body.dark .loyalty-title {
+  color: #ff7a45;
+}
+
+.loyalty-desc {
+  font-size: 0.85rem;
+  color: #5d4037;
+}
+
+body.dark .loyalty-desc {
+  color: #ccc;
+}
+
+.loyalty-redeem-action {
+  border-top: 1px solid #ffe0b2;
+  padding-top: 0.8rem;
+}
+
+body.dark .loyalty-redeem-action {
+  border-top-color: #444;
+}
+
+/* Switch Toggle Styling */
+.loyalty-toggle {
+  display: flex;
+  align-items: center;
+   cursor: pointer;
+  user-select: none;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #bf360c;
+  gap: 0.6rem;
+}
+
+body.dark .loyalty-toggle {
+  color: #ff7a45;
+}
+
+.loyalty-toggle input {
+  display: none;
+}
+
+.toggle-slider {
+  position: relative;
+  width: 44px;
+  height: 22px;
+  background-color: #ccc;
+  border-radius: 34px;
+  transition: .3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: .3s;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.loyalty-toggle input:checked + .toggle-slider {
+  background-color: #4caf50;
+}
+
+.loyalty-toggle input:checked + .toggle-slider:before {
+  transform: translateX(22px);
+}
+
+.loyalty-empty-message {
+  font-size: 0.8rem;
+  color: #795548;
+  font-style: italic;
+  margin-top: 0.4rem;
+}
+
+body.dark .loyalty-empty-message {
+  color: #aaa;
+}
+
+/* Cart Total Breakdown */
+.cart-total-breakdown {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.5rem 0;
+  margin-left: 0.4rem;
+  transition: 0.3s ease;
+}
+
+.breakdown-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #5d4037;
+}
+
+body.dark .breakdown-row {
+  color: #ccc;
+}
+
+.breakdown-row.discount {
+  color: #e64a19;
+}
+
+.breakdown-row.final {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #bf360c;
+  border-top: 1px solid #ffcc80;
+  padding-top: 0.5rem;
+  margin-top: 0.2rem;
+}
+
+body.dark .breakdown-row.final {
+  color: #ff7a45;
+  border-top-color: #555;
+}
+
+
+/* ===== Combo Add Button ===== */
+
+.lang-toggle-btn {
+  background: linear-gradient(135deg, #ff6200, #ff8c00);
+  color: #fff;
+  border: none;
+  border-radius: 20px;
+  padding: 6px 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: 'Poppins', sans-serif;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+  margin-left: 8px;
+}
+.lang-toggle-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 98, 0, 0.35);
+}
+
+/* ===== Responsive Navbar Spacing & Overlap Fixes ===== */
+@media (max-width: 1200px) {
+  .logo {
+    font-size: 1.5rem !important;
+    margin-right: 1rem !important;
+  }
+  .navbar-logo-img {
+    height: 34px !important;
+    width: 34px !important;
+  }
+  nav {
+    gap: 0.8rem !important;
+  }
+  nav a {
+    padding: 0.4rem 0.6rem !important;
+    font-size: 0.9rem !important;
+  }
+  .cart-btn-modern {
+    padding: 0.3rem 0.8rem !important;
+  }
+}
+
+@media (max-width: 950px) {
+  .header-inner {
+    flex-direction: column !important;
+    gap: 1rem !important;
+    padding: 1rem 1rem !important;
+  }
+  .logo {
+    margin-right: 0 !important;
+  }
+  nav {
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    gap: 0.8rem !important;
+    width: 100% !important;
+  }
+}
+
+
+#voice-search-btn{
+  border: none;
+  background: #ff7043;
+  color: white;
+  padding: 0.6rem 0.9rem;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-left: 0.4rem;
+  transition: 0.3s ease;
+}
+
+#voice-search-btn:hover {
+  background: #f4511e;
+}
+
+#voice-search-btn.listening {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.12);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/* ===== Combo Add Button ===== */
+
+.combo-add-btn {
+  background: #ff5722;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.combo-add-btn:hover {
+  background: #e64a19;
+  transform: scale(1.05);
+}
+.combo-item-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+
+/* ===== Cinematic Video Hero ===== */
+.hero {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - var(--header-height, 90px));
+  height: calc(100vh - var(--header-height, 90px));
+  padding: 0 8%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  margin-bottom: 0;
+  background: #130a06;
+  text-align: left;
+}
+
+.hero-video-stage,
+.hero-bg-video,
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.hero-video-stage {
+  z-index: 1;
+  background: #130a06;
+  overflow: hidden;
+}
+
+.hero-video,
+.hero-bg-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transform: scale(1.04);
+  transition: opacity 1.25s ease, transform 7s ease;
+  will-change: opacity, transform;
+}
+
+.hero-bg-video.active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hero-overlay {
+  z-index: 2;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.70) 0%,
+    rgba(0, 0, 0, 0.45) 45%,
+    rgba(0, 0, 0, 0.20) 100%
+  );
+}
+
+.hero-content {
+  position: relative;
+  z-index: 3;
+  flex: 0 0 min(650px, 52vw);
+  max-width: 650px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 0;
+  text-align: left;
+  color: #ffffff;
+}
+
+.hero-badge,
+.hero-secondary-btn,
+.hero-stat-card {
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: fit-content;
+  margin-bottom: 1.4rem;
+  padding: 0.62rem 1rem;
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 0.95rem;
+  font-weight: 700;
+  animation: heroFadeUp 0.75s ease both;
+}
+
+.hero-title,
+.hero-content h1 {
+  margin: 0 0 1.35rem;
+  color: #ffffff;
+  font-size: clamp(2.75rem, 4.4vw, 4.75rem);
+  font-weight: 800;
+  line-height: 1.05;
+  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52);
+  letter-spacing: 0;
+  animation: heroFadeUp 0.85s ease 0.08s both;
+}
+
+.hero-content p {
+  max-width: 550px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.8;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  animation: heroFadeUp 0.85s ease 0.2s both;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 30px;
+  animation: heroFadeUp 0.85s ease 0.4s both;
+}
+
+.hero-primary-btn,
+.hero-secondary-btn {
+  min-width: 154px;
+  min-height: 54px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.95rem 1.65rem;
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+.hero-primary-btn {
+  background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%);
+  color: #ffffff;
+  box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38);
+}
+
+.hero-primary-btn:hover,
+.hero-primary-btn:focus-visible {
+  background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%);
+  transform: translate3d(0, -3px, 0);
+  box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5);
+}
+
+.hero-secondary-btn {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.46);
+}
+
+.hero-secondary-btn:hover,
+.hero-secondary-btn:focus-visible {
+  transform: translate3d(0, -3px, 0);
+  border-color: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
+}
+
+.hero-stats {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  right: 8%;
+  width: 300px;
+  min-width: 0;
+  height: 370px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.hero-stat-card {
+  position: absolute;
+  width: 230px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.95rem 1.05rem;
+  border-radius: 18px;
+  color: #ffffff;
+  animation: heroFloat 5.5s ease-in-out infinite;
+  will-change: transform;
+}
+
+.hero-stat-card strong {
+  display: block;
+  color: #ffffff;
+  font-size: 1.1rem;
+  line-height: 1.1;
+}
+
+.hero-stat-card span:last-child {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.hero-stat-icon {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 42px;
+  border-radius: 50%;
+  background: rgba(255, 122, 31, 0.2);
+}
+
+.hero-stat-rating {
+  top: 0;
+  right: 0;
+}
+
+.hero-stat-delivery {
+  top: 130px;
+  right: 58px;
+  animation-delay: 0.8s;
+}
+
+.hero-stat-orders {
+  top: 260px;
+  right: 0;
+  animation-delay: 1.6s;
+}
+
+.hero-scroll-indicator {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  bottom: 2rem;
+  width: 28px;
+  height: 46px;
+  display: inline-flex;
+  justify-content: center;
+  border: 1.5px solid rgba(255, 255, 255, 0.72);
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.hero-scroll-indicator span {
+  width: 5px;
+  height: 5px;
+  margin-top: 9px;
+  border-radius: 50%;
+  background: #ffffff;
+  animation: heroScrollDot 1.6s ease-in-out infinite;
+}
+
+body.dark .hero {
+  background: #130a06;
+  color: #ffffff;
+}
+
+body.dark .hero-content h1,
+body.dark .hero-content p {
+  color: #ffffff;
+}
+
+body.dark .hero-content p {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.specials,
+.menu,
+.specials-section,
+.menu-section {
+  position: relative;
+  z-index: 5;
+}
+
+@keyframes heroFadeUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 26px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes heroFloat {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(0, -14px, 0);
+  }
+}
+
+@keyframes heroScrollDot {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+
+  35% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@media (max-width: 1024px) {
+  .hero {
+    padding: 0 6%;
+  }
+
+  .hero-stats {
+    right: 4%;
+    opacity: 0.92;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero {
+    min-height: calc(100vh - var(--header-height, 90px));
+    height: auto;
+    padding: 3.5rem 1.25rem 4.5rem;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .hero-overlay {
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.62) 0%,
+      rgba(0, 0, 0, 0.46) 48%,
+      rgba(0, 0, 0, 0.66) 100%
+    );
+  }
+
+  .hero-content {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  .hero-badge,
+  .hero-actions {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .hero-title,
+  .hero-content h1 {
+    font-size: clamp(2.45rem, 11vw, 3.65rem);
+    line-height: 1.05;
+  }
+
+  .hero-content p {
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.02rem;
+    line-height: 1.7;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    width: min(100%, 360px);
+  }
+
+  .hero-primary-btn,
+  .hero-secondary-btn {
+    width: 100%;
+  }
+
+  .hero-stats {
+    position: relative;
+    top: auto;
+    right: auto;
+    width: min(100%, 360px);
+    min-width: 0;
+    margin: 2.2rem auto 0;
+    transform: none;
+    display: grid;
+    gap: 0.7rem;
+  }
+
+  .hero-stat-card {
+    position: static;
+    min-width: 0;
+    width: 100%;
+    justify-content: flex-start;
+    border-radius: 16px;
+    animation-duration: 4.8s;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .hero-badge {
+    font-size: 0.82rem;
+    padding: 0.55rem 0.82rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-bg-video,
+  .hero-badge,
+  .hero-content h1,
+  .hero-content p,
+  .hero-actions,
+  .hero-stat-card,
+  .hero-scroll-indicator span{
+    animation: none !important;
+    transition: none !important;
+  }
+}
\ No newline at end of file

From 3f07cb081e6f57f5e28e8379bc14269c89d08fb1 Mon Sep 17 00:00:00 2001
From: Varun Bisoi <57100019+vishu786-vb@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:20:06 +0530
Subject: [PATCH 5/6] Add files via upload

---
 css/style.css | 3725 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 3725 insertions(+)
 create mode 100644 css/style.css

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..893c6f2
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,3725 @@
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Light.ttf') format('truetype');
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 500;
+}
+    * {
+      margin: 0; padding: 0; box-sizing: border-box;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: #fff8f0;
+      color: #3e3e3e;
+      line-height: 1.6;
+      font-size: 16px;
+      overflow-x: hidden;
+    }
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+    img {
+      max-width: 100%;
+      display: block;
+      border-radius: 12px;
+    }
+    button {
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    /* ===== Container ===== */
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1rem;
+    }
+
+    /* ===== Toast Notification ===== */
+
+.toast-notification {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-20px);
+
+  background: linear-gradient(135deg, #ff7a00, #ff9a3c);
+  color: #fff;
+
+  padding: 14px 24px;
+  border-radius: 14px;
+
+  font-size: 15px;
+  font-weight: 600;
+
+  min-width: 280px;
+  text-align: center;
+
+  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
+
+  opacity: 0;
+  transition: all 0.35s ease;
+
+  z-index: 9999;
+  pointer-events: none;
+
+  border: 1px solid rgba(255,255,255,0.2);
+  backdrop-filter: blur(8px);
+}
+
+.toast-notification.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.coupon-section {
+  background: #fff3e0;
+  border: 1px dashed #ff8f4b;
+  border-radius: 14px;
+  padding: 1rem;
+  margin: 1.5rem 0;
+}
+
+.coupon-section h2 {
+  margin-bottom: 0.75rem;
+  font-size: 1.05rem;
+  color: #d84315;
+}
+
+.coupon-input-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.coupon-input-row input {
+  flex: 1 1 220px;
+  padding: 0.95rem 1rem;
+  border: 1px solid #ffcc9b;
+  border-radius: 12px;
+  background: #fff;
+  color: #3e3e3e;
+}
+
+.coupon-input-row button,
+.secondary-btn {
+  padding: 0.95rem 1.25rem;
+  border: none;
+  border-radius: 12px;
+  font-weight: 700;
+}
+
+.coupon-input-row button {
+  background: #ff7b54;
+  color: #fff;
+}
+
+.secondary-btn {
+  background: #eceff1;
+  color: #263238;
+  border: 1px solid #cfd8dc;
+}
+
+.coupon-message {
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+  min-height: 1.2rem;
+}
+
+.coupon-message.success {
+  color: #2e7d32;
+}
+
+.coupon-message.error {
+  color: #c62828;
+}
+
+.coupon-applied-label {
+  margin-top: 0.5rem;
+  font-size: 0.95rem;
+  color: #4e342e;
+}
+
+.price-breakdown {
+  background: #fff;
+  border: 1px solid #ffe0b2;
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+.price-breakdown p {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 0.75rem;
+}
+
+.price-breakdown .grand-total {
+  font-weight: 700;
+  color: #bf360c;
+}
+
+@media (max-width: 600px) {
+  .coupon-input-row {
+    flex-direction: column;
+  }
+}
+
+/* ===== Mobile Responsive ===== */
+
+@media (max-width: 600px) {
+  .toast-notification {
+    width: calc(100% - 32px);
+    min-width: unset;
+
+    left: 16px;
+    right: 16px;
+
+    transform: translateY(-20px);
+
+    font-size: 14px;
+    padding: 12px 16px;
+  }
+
+  .toast-notification.show {
+    transform: translateY(0);
+  }
+}
+
+/* Cart Count Bounce */
+
+.cart-bounce {
+  animation: cartBounce 0.4s ease;
+}
+
+@keyframes cartBounce {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+    /* ===== Header ===== */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: #ff5722;
+      box-shadow: 0 3px 10px rgb(255 87 34 / 0.7);
+      user-select: none;
+    }
+    .header-inner {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 1rem 1.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .logo {
+      font-weight: 700;
+      font-size: 1.8rem;
+      color: #fff;
+      letter-spacing: 1px;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      gap: 0.4rem;
+      margin-right: 2rem;
+    }
+    .navbar-logo-img {
+      height: 42px;
+      width: 42px;
+      object-fit: cover;
+      border-radius: 50%;
+      background: white;
+      padding: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+    .logo:hover .navbar-logo-img {
+      transform: scale(1.08);
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      font-weight: 600;
+    }
+    nav a {
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      transition: background 0.3s ease;
+    }
+    nav a:hover,
+    nav a.active {
+      background: #e64a19;
+      box-shadow: 0 0 8px rgb(230 74 25 / 0.8);
+    }
+
+    /* ===== Modern Cart Button ===== */
+    .cart-btn-modern {
+      display: inline-flex !important;
+      align-items: center;
+      gap: 0.6rem;
+      position: relative;
+      padding: 0.4rem 1.1rem !important;
+      border-radius: 50px !important;
+      background: rgba(255, 255, 255, 0.1) !important;
+      border: 1px solid rgba(255, 255, 255, 0.15) !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      overflow: visible !important;
+      text-decoration: none !important;
+      white-space: nowrap !important;
+    }
+    .cart-btn-modern:hover {
+      background: #e64a19 !important;
+      border-color: #ff5722 !important;
+      box-shadow: 0 4px 15px rgba(230, 74, 25, 0.4) !important;
+      transform: translateY(-1px);
+    }
+    .cart-btn-modern.active {
+      background: #ff5722 !important;
+      border-color: #ff7b54 !important;
+      box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
+    }
+    .cart-icon-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .cart-svg-icon {
+      width: 18px;
+      height: 18px;
+      stroke: #ffffff;
+      stroke-width: 2.2;
+      transition: transform 0.2s ease;
+    }
+    .cart-btn-modern:hover .cart-svg-icon {
+      transform: scale(1.1);
+    }
+    .cart-badge {
+      position: absolute;
+      top: -9px;
+      right: -9px;
+      background-color: #ffc107;
+      color: #3e2723;
+      font-size: 0.65rem;
+      font-weight: 800;
+      min-width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      border: 1.5px solid #ff5722;
+      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    
+    /* Bounce animation when item added to cart */
+    .cart-bounce {
+      animation: badgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+    }
+    @keyframes badgeBounce {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.45);
+      }
+    }
+
+    /* ===== Dropdown Nav ===== */
+    .dropdown {
+      position: relative;
+    }
+    .dropdown-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      user-select: none;
+    }
+    .dropdown-toggle::after {
+      content: "▼";
+      font-size: 0.6rem;
+      color: white;
+    }
+    .dropdown-menu {
+      position: absolute;
+      top: 2.8rem;
+      left: 0;
+      background: #ff5722;
+      border-radius: 8px;
+      min-width: 140px;
+      box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px);
+      transition: all 0.3s ease;
+      z-index: 10;
+    }
+    .dropdown-menu a {
+      display: block;
+      padding: 0.6rem 1rem;
+      color: white;
+      font-weight: 600;
+      border-radius: 8px;
+      transition: background 0.3s ease;
+    }
+    .dropdown-menu a:hover {
+      background: #e64a19;
+    }
+    .dropdown:hover .dropdown-menu,
+    .dropdown:focus-within .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+    /* When JS toggles the open class (keyboard interaction), show the menu the same way as hover */
+    .dropdown.open .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    /* Force-hide override for dropdown when JS needs to hide it despite :hover */
+    .dropdown.force-hide .dropdown-menu {
+      opacity: 0 !important;
+      visibility: hidden !important;
+      transform: translateY(10px) !important;
+      pointer-events: none !important;
+    }
+
+    /* ===== Auth/Profile Nav ===== */
+    .auth-nav-item {
+      display: inline-flex;
+      align-items: center;
+      margin-left: 0.25rem;
+      position: relative;
+      z-index: 12;
+    }
+
+    .login-btn-nav {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      padding: 0.55rem 1.1rem;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #ff5722;
+      font-weight: 700;
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+    }
+
+    .login-btn-nav:hover,
+    .login-btn-nav:focus-visible {
+      transform: translateY(-1px);
+      background: #fff2e9;
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
+    }
+
+    .profile-menu {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .profile-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 42px;
+      height: 42px;
+      border: none;
+      border-radius: 50%;
+      background: #ffffff;
+      color: #ff5722;
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+      padding: 0;
+    }
+
+    .profile-toggle:hover,
+    .profile-toggle:focus-visible {
+      transform: translateY(-1px);
+      background: #fff2e9;
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
+    }
+
+    .profile-avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+    }
+
+    .profile-avatar svg {
+      width: 22px;
+      height: 22px;
+      stroke-width: 1.9;
+    }
+
+    .profile-dropdown {
+      position: absolute;
+      top: calc(100% + 0.8rem);
+      right: 0;
+      width: min(260px, calc(100vw - 1.5rem));
+      padding: 0.85rem;
+      border-radius: 20px;
+      background: #ffffff;
+      border: 1px solid rgba(255, 87, 34, 0.14);
+      box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px);
+      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+      z-index: 1002;
+    }
+
+    .profile-menu.open .profile-dropdown {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .profile-dropdown-header {
+      padding: 0.25rem 0.55rem 0.85rem;
+      border-bottom: 1px solid rgba(255, 87, 34, 0.1);
+      margin-bottom: 0.35rem;
+    }
+
+    .profile-dropdown-name {
+      display: block;
+      font-weight: 700;
+      color: #2d2a26;
+      word-break: break-word;
+    }
+
+    .profile-dropdown-email {
+      display: block;
+      margin-top: 0.2rem;
+      font-size: 0.82rem;
+      color: #6c757d;
+      word-break: break-word;
+    }
+
+    .profile-dropdown a,
+    .profile-dropdown button {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0.8rem 0.95rem;
+      border: none;
+      border-radius: 14px;
+      background: transparent;
+      color: #2d2a26;
+      font: inherit;
+      font-weight: 600;
+      text-align: left;
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+    .profile-dropdown a:hover,
+    .profile-dropdown a:focus-visible,
+    .profile-dropdown button:hover,
+    .profile-dropdown button:focus-visible {
+      background: #fff2e9;
+      color: #ff5722;
+    }
+
+    .profile-dropdown-logout {
+      margin-top: 0.15rem;
+      color: #c2410c;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    @media (max-width: 860px) {
+      .profile-dropdown {
+        right: 0;
+        left: auto;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .auth-nav-item {
+        margin-left: 0;
+      }
+
+      .login-btn-nav {
+        min-height: 44px;
+        padding: 0.55rem 1rem;
+      }
+
+      .profile-toggle {
+        width: 44px;
+        height: 44px;
+      }
+
+      .profile-dropdown {
+        width: min(240px, calc(100vw - 1rem));
+      }
+    }
+
+    /* ===== Search Bar ===== */
+    .search-bar {
+      position: relative;
+      margin-left: 1.2rem;
+      display: flex;
+      align-items: center;
+    }
+    .search-bar input {
+      padding: 0.5rem 2.4rem 0.5rem 1rem;
+      border-radius: 24px;
+      border: 1px solid rgba(255, 87, 34, 0.15);
+      background-color: #fdfbf8;
+      outline: none;
+      font-size: 0.95rem;
+      color: #3e2723;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 210px;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+    }
+    .search-bar input::placeholder {
+      color: #a1887f;
+      opacity: 0.8;
+    }
+    .search-bar input:hover {
+      border-color: rgba(255, 87, 34, 0.4);
+    }
+    .search-bar input:focus {
+      background-color: #ffffff;
+      border-color: #ff5722;
+      box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15), 0 4px 12px rgba(255, 87, 34, 0.08);
+    }
+    .search-bar button {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: none;
+      background: transparent;
+      color: #ff5722;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+    .search-bar button:hover {
+      background-color: rgba(255, 87, 34, 0.08);
+    }
+    .search-bar button:active {
+      transform: translateY(-50%) scale(0.9);
+    }
+    .search-bar button .search-svg {
+      width: 16px;
+      height: 16px;
+      stroke-width: 2.5;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s ease;
+    }
+    .search-bar button:hover .search-svg {
+      transform: scale(1.1);
+      stroke: #bf360c;
+    }
+
+    /* ===== Hero Section ===== */
+    .hero {
+      background: rgb(255, 228, 205);
+      padding: 5rem 1rem 6rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4.5rem;
+      flex-wrap: wrap;
+      height: 90vh;
+    }
+    .hero-content {
+      flex: 1 1 400px;
+      max-width: 640px;
+    }
+    .hero-content h1 {
+      color: #ff5722;
+      font-size: 3rem;
+      font-weight: 700;
+      margin-bottom: 2rem;
+      user-select: none;
+      line-height: 3.7rem;
+    }
+    .hero-content p {
+      font-size: 1.1rem;
+      margin-bottom: 2rem;
+      font-weight: 600;
+      user-select: text;
+      line-height: 1.4;
+      color: black;
+    }
+    .btn-primary {
+      background: #e64a19;
+      color: white;
+      font-weight: 700;
+      padding: 1rem 2.5rem;
+      border-radius: 50px;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.4);
+      border: none;
+      transition: background 0.3s ease, color 0.3s ease;
+      user-select: none;
+    }
+    .btn-primary:hover {
+      background: #ff6333;
+      color: #fff;
+      box-shadow: 0 10px 30px rgb(230 74 25 / 0.6);
+    }
+    .hero-image {
+      flex: 1 1 400px;
+      max-width: 480px;
+      border-radius: 25px;
+      overflow: hidden;
+    }
+    .hero-image img {
+      width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
+
+    /* ===== Specials & Menu Section ===== */
+    section.specials,
+    section.menu,
+    section.recently-viewed {
+      padding: 4rem 1rem 5rem;
+      background: #fff3e0;
+    }
+    .section-title {
+      text-align: center;
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 2.5rem;
+      user-select: none;
+    }
+    .cards {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2rem;
+      justify-content: center;
+    }
+    .menu-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 2rem;
+      justify-content: center;
+      justify-items: center;
+      width: 100%;
+      margin-top: 2rem;
+    }
+    .card {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+      width: 260px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1rem 1rem 1.8rem;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      user-select: none;
+      cursor: default;
+    }
+    .card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 15px 35px rgb(0 0 0 / 0.2);
+    }
+    .add-btn{
+      background-color: green;
+      padding: 3px 8px;
+      border-radius: 15px;
+      color: white;
+      border: none;
+    }
+    .card img {
+      border-radius: 15px;
+      width: 250px;
+      height: 170px;
+      object-fit: cover;
+      margin-bottom: 1rem;
+      pointer-events: none;
+      user-select: none;
+    }
+    .card h3 {
+      font-size: 1.4rem;
+      font-weight: 700;
+      margin-bottom: 0.6rem;
+      color: #3e2723;
+      user-select: text;
+    }
+    .card p.price {
+      font-weight: 600;
+      color: #bf360c;
+      margin-bottom: 1rem;
+      user-select: text;
+    }
+    .card p.description {
+      font-size: 0.9rem;
+      color: #5d4037;
+      margin-bottom: 1.3rem;
+      text-align: center;
+      user-select: text;
+    }
+    .btn-add {
+      background: #ff5722;
+      color: white;
+      border-radius: 40px;
+      padding: 0.5rem 1.8rem;
+      border: none;
+      font-weight: 700;
+      font-size: 1rem;
+      box-shadow: 0 6px 15px rgb(255 87 34 / 0.6);
+      user-select: none;
+      transition: background 0.3s ease;
+    }
+    .btn-add:hover {
+      background: #e64a19;
+      box-shadow: 0 8px 20px rgb(230 74 25 / 0.8);
+    }
+
+    /* ===== Menu Filters ===== */
+    .filter-buttons {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 3rem;
+      flex-wrap: wrap;
+      user-select: none;
+    }
+    .filter-btn {
+      background: #fff3e0;
+      border: 2px solid #ff5722;
+      color: #ff5722;
+      padding: 0.6rem 1.8rem;
+      border-radius: 50px;
+      font-weight: 600;
+      font-size: 1rem;
+      transition: all 0.3s ease;
+    }
+    .filter-btn.active,
+    .filter-btn:hover {
+      background: #ff5722;
+      color: white;
+      box-shadow: 0 6px 20px rgb(255 87 34 / 0.6);
+    }
+
+    /* ===== Cart Sidebar ===== */
+    #cart-sidebar {
+      position: fixed;
+      top: 0;
+      right: -400px;
+      width: 380px;
+      height: 100vh;
+      background: #fff3e0;
+      box-shadow: -6px 0 25px rgb(0 0 0 / 0.25);
+      transition: right 0.4s ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1500;
+      user-select: none;
+    }
+    #cart-sidebar.open {
+      right: 0;
+    }
+    #cart-header {
+      background: #ff5722;
+      color: white;
+      padding: 1.3rem 1.5rem;
+      font-weight: 700;
+      font-size: 1.4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #cart-close {
+      background: transparent;
+      border: none;
+      color: white;
+      font-size: 1.6rem;
+      font-weight: 900;
+      cursor: pointer;
+      user-select: none;
+    }
+    #cart-items {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 1rem 1.5rem;
+    }
+    .cart-item {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 1.4rem;
+      border-radius: 15px;
+      background: white;
+      box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
+      padding: 1rem;
+      align-items: center;
+    }
+    .cart-item img {
+      width: 80px;
+      height: 60px;
+      border-radius: 12px;
+      object-fit: cover;
+      user-select: none;
+    }
+    .cart-item-info {
+      flex: 1;
+      user-select: text;
+    }
+    .cart-item-info h4 {
+      font-weight: 700;
+      color: #3e2723;
+      margin-bottom: 0.3rem;
+    }
+    .cart-item-info p {
+      color: #5d4037;
+      font-size: 0.9rem;
+      margin-bottom: 0.5rem;
+    }
+    .qty-controls {
+      display: flex;
+      gap: 0.4rem;
+      align-items: center;
+      font-weight: 700;
+      user-select: none;
+    }
+    .qty-controls button {
+      background: #ff5722;
+      color: white;
+      border: none;
+      padding: 0.3rem 0.7rem;
+      font-size: 1.1rem;
+      border-radius: 5px;
+      transition: background 0.3s ease;
+      cursor: pointer;
+    }
+    .qty-controls button:hover {
+      background: #e64a19;
+    }
+    .qty-controls span {
+      min-width: 24px;
+      text-align: center;
+      font-size: 1rem;
+      user-select: none;
+    }
+    .cart-item-remove {
+      background: transparent;
+      border: none;
+      color: #bf360c;
+      font-weight: 700;
+      cursor: pointer;
+      font-size: 0.95rem;
+      user-select: none;
+      transition: color 0.3s ease;
+    }
+    .cart-item-remove:hover {
+      color: #e64a19;
+    }
+    #cart-footer {
+      padding: 1rem 1.5rem;
+      border-top: 2px solid #ff5722;
+      font-weight: 700;
+      font-size: 1.3rem;
+      color: #bf360c;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #checkout-btn {
+      background: #ff5722;
+      border: none;
+      padding: 0.7rem 2rem;
+      border-radius: 50px;
+      font-weight: 700;
+      color: white;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
+      transition: background 0.3s ease;
+      user-select: none;
+    }
+    #checkout-btn:hover:not(:disabled) {
+      background: #e64a19;
+      box-shadow: 0 10px 30px rgb(230 74 25 / 0.9);
+    }
+    #checkout-btn:disabled {
+      background: #ffb399;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    /* ===== About Section ===== */
+    section.about {
+      padding: 5rem 1rem 7rem;
+      background: white;
+      color: #3e3e3e;
+      user-select: text;
+    }
+    .about .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .about h2 {
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 2rem;
+      text-align: center;
+      user-select: none;
+    }
+    .about p {
+      font-size: 1.1rem;
+      line-height: 1.5;
+      color: #5d4037;
+      margin-bottom: 2rem;
+    }
+    .team {
+      display: flex;
+      gap: 2rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 3rem;
+    }
+   
+   .team-member {
+   width: 100%;
+   max-width: 420px;
+   min-width: 280px;
+   height: 320px;
+   flex: 1 1 320px;
+   perspective: 1000px;
+   background: transparent;
+   border-radius: 20px;
+   box-shadow: none;
+   padding: 0;
+   text-align: center;
+   user-select: none;
+}
+
+.team-member-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s ease;
+  transform-style: preserve-3d;
+}
+
+.team-member:hover .team-member-inner,
+.team-member:focus .team-member-inner {
+  transform: rotateY(180deg);
+}
+
+.team-member-front,
+.team-member-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fff3e0;
+  border-radius: 20px;
+  box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+  backface-visibility: hidden;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  padding: 1.5rem 1.2rem;
+  box-sizing: border-box;
+}
+
+.team-member-front:hover,
+.team-member-back:hover {
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.15);
+}
+
+.team-member-back {
+  transform: rotateY(180deg);
+}
+
+.team-member img {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  margin-bottom: 1rem;
+  object-fit: cover;
+  user-select: none;
+}
+
+.team-member h4 {
+  font-weight: 700;
+  margin-bottom: 0.3rem;
+  color: #3e2723;
+}
+
+.team-member p {
+  font-size: 0.9rem;
+  color: #5d4037;
+  user-select: text;
+}
+
+.team-member-back p {
+  max-width: 85%;
+  line-height: 1.5;
+}
+
+    /* ===== Contact Section ===== */
+    section.contact {
+      padding: 5rem 1rem 7rem;
+      background: white;
+      color: #3e3e3e;
+      user-select: text;
+    }
+    section.contact .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    section.contact h2 {
+      font-size: 2.8rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin-bottom: 3rem;
+      text-align: center;
+      user-select: none;
+    }
+
+    /* ===== Contact Form ===== */
+    form.contact-form {
+      max-width: 500px;
+      margin: 0 auto;
+      background: #fff3e0;
+      padding: 2rem 2.5rem;
+      border-radius: 20px;
+      box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
+      user-select: text;
+    }
+    form.contact-form label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+      color: #bf360c;
+      user-select: none;
+    }
+    form.contact-form input,
+    form.contact-form textarea {
+      width: 100%;
+      padding: 0.7rem 1rem;
+      border-radius: 12px;
+      border: 2px solid #ffcc99;
+      font-size: 1rem;
+      margin-bottom: 1.3rem;
+      font-family: inherit;
+      resize: vertical;
+      transition: border-color 0.3s ease;
+      user-select: text;
+    }
+    form.contact-form input:focus,
+    form.contact-form textarea:focus {
+      border-color: #ff5722;
+      outline: none;
+    }
+    form.contact-form textarea {
+      min-height: 100px;
+    }
+    .error-msg {
+      font-size: 0.85rem;
+      color: #c0392b;
+      margin-top: -1rem;
+      margin-bottom: 0.8rem;
+      min-height: 1rem;
+      display: block;
+      user-select: none;
+    }
+    .form-success-msg {
+      margin-top: 0.8rem;
+      margin-bottom: 1rem;
+      padding: 0.8rem 1rem;
+      background-color: #e8f5e9;
+      color: #2e7d32;
+      border-left: 4px solid #43a047;
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-weight: 600;
+      animation: fadeInDown 0.4s ease;
+    }
+    @keyframes fadeInDown {
+      from { opacity: 0; transform: translateY(-8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .btn-submit {
+      background: #ff5722;
+      color: white;
+      font-weight: 700;
+      padding: 0.9rem 2rem;
+      border-radius: 50px;
+      border: none;
+      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
+      transition: background 0.3s ease;
+      user-select: none;
+      width: 100%;
+    }
+    .btn-submit:hover {
+      background: #e64a19;
+    }
+
+    /* ===== Testimonials ===== */
+    section.testimonials {
+      padding: 5rem 1rem 7rem;
+      background: #fff3e0;
+      color: #3e2723;
+      user-select: none;
+    }
+    .testimonial-cards {
+      max-width: 900px;
+      margin: 0 auto;
+      display: flex;
+      gap: 2rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .testimonial {
+      background: white;
+      padding: 1.8rem 2rem;
+      border-radius: 20px;
+      box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
+      max-width: 320px;
+      position: relative;
+      font-style: italic;
+      user-select: text;
+    }
+    .testimonial::before {
+      content: "“";
+      position: absolute;
+      font-size: 4rem;
+      top: -20px;
+      left: 20px;
+      color: #ff5722;
+      font-weight: 900;
+      user-select: none;
+    }
+    .testimonial p {
+      margin-bottom: 1rem;
+    }
+    .testimonial .author {
+      font-weight: 700;
+      text-align: right;
+      color: #bf360c;
+      user-select: text;
+    }
+
+    /* ===== Newsletter Signup ===== */
+    section.newsletter {
+      background: #ff5722;
+      color: white;
+      padding: 3rem 1rem 5rem;
+      text-align: center;
+      user-select: none;
+    }
+    section.newsletter h2 {
+      font-weight: 700;
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+    section.newsletter p {
+      font-weight: 500;
+      margin-bottom: 1.5rem;
+    }
+    .newsletter-form {
+      max-width: 400px;
+      margin: 0 auto;
+      display: flex;
+      gap: 0.6rem;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .newsletter-form input {
+      padding: 0.8rem 1rem;
+      border-radius: 40px;
+      border: none;
+      flex-grow: 1;
+      font-size: 1rem;
+      outline: none;
+      font-family: inherit;
+    }
+    .newsletter-form button {
+      padding: 0.8rem 1.8rem;
+      background: #fff;
+      border: none;
+      border-radius: 40px;
+      color: #ff5722;
+      font-weight: 700;
+      box-shadow: 0 6px 15px rgb(255 87 34 / 0.8);
+      transition: background 0.3s ease;
+      user-select: none;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .newsletter-form button:hover {
+      background: #fbe9e7;
+    }
+
+    /* ===== Modern Premium Footer ===== */
+    footer {
+      background: #fff3e0; /* Warm cream background */
+      color: #3e2723; /* Deep warm brown text */
+      padding: 4rem 2rem 2rem;
+      border-top: 1px solid rgba(255, 87, 34, 0.15);
+      user-select: text; /* Allow selecting text */
+      font-family: 'Poppins', sans-serif;
+    }
+    
+    .footer-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 2rem;
+      margin-bottom: 3rem;
+    }
+    
+    @media (max-width: 1024px) {
+      .footer-container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    
+    @media (max-width: 768px) {
+      .footer-container {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    
+    @media (max-width: 480px) {
+      .footer-container {
+        grid-template-columns: 1fr;
+      }
+    }
+    
+    .footer-brand {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #ff5722; /* Vibrant orange logo */
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-family: 'Poppins', sans-serif;
+    }
+    .footer-logo-img {
+      height: 40px;
+      width: 40px;
+      object-fit: cover;
+      border-radius: 50%;
+      background: white;
+      padding: 2px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+    .footer-brand:hover .footer-logo-img {
+      transform: scale(1.08);
+    }
+    
+    .footer-desc {
+      font-size: 0.95rem;
+      color: #5d4037;
+      line-height: 1.6;
+      max-width: 320px;
+    }
+    
+    .footer-column h3 {
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: #bf360c; /* Deep brand orange */
+      margin-bottom: 1.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    
+    .footer-links {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    
+    .footer-links li a {
+      color: #5d4037;
+      font-size: 0.95rem;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      display: inline-block;
+    }
+    
+    .footer-links li a:hover {
+      color: #ff5722;
+      transform: translateX(3px);
+    }
+    
+    .footer-contact-info {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      color: #5d4037;
+      font-size: 0.95rem;
+    }
+    
+    .footer-contact-info li {
+      line-height: 1.5;
+    }
+    
+    .footer-contact-info strong {
+      color: #bf360c;
+    }
+    
+    .footer-social-wrapper {
+      margin-bottom: 1.5rem;
+    }
+    
+    .footer-social-icons {
+      display: flex;
+      gap: 1rem;
+      margin-top: 0.5rem;
+    }
+    
+    .footer-social-icons a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      background: #ff5722;
+      color: white !important;
+      font-size: 1.1rem;
+      transition: all 0.3s ease;
+    }
+    
+    .footer-social-icons a:hover {
+      background: #bf360c;
+      transform: translateY(-3px);
+      box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
+    }
+    
+    .footer-bottom {
+      border-top: 1px solid rgba(255, 87, 34, 0.1);
+      padding-top: 1.5rem;
+      text-align: center;
+      font-size: 0.9rem;
+      color: #8d6e63;
+      font-weight: 500;
+    }
+    
+    .footer-bottom p {
+      margin: 0;
+    }
+    
+    /* Dark Mode Overrides */
+    body.dark footer {
+      background: #1e1e1e;
+      border-top-color: rgba(255, 87, 34, 0.1);
+      color: #ccc;
+    }
+    
+    body.dark .footer-desc, 
+    body.dark .footer-links li a, 
+    body.dark .footer-contact-info {
+      color: #aaa;
+    }
+    
+    body.dark .footer-links li a:hover {
+      color: #ff7b54;
+    }
+    
+    body.dark .footer-bottom {
+      border-top-color: rgba(255, 255, 255, 0.05);
+      color: #777;
+    }
+
+    /* ===== Enhanced Animations & Transitions ===== */
+    .card {
+      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    .card:hover {
+      animation: cardBounce 0.6s ease-out;
+    }
+
+    @keyframes cardBounce {
+      0% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-12px);
+      }
+      100% {
+        transform: translateY(-8px);
+      }
+    }
+
+    /* Button enhancements */
+    button {
+      transition: all 0.3s ease;
+      position: relative;
+    }
+
+    .btn-primary:active,
+    .btn-add:active,
+    .filter-btn:active {
+      transform: scale(0.98);
+    }
+
+    /* Card image zoom on hover */
+    .card img {
+      transition: transform 0.4s ease;
+    }
+
+    .card:hover img {
+      transform: scale(1.05);
+    }
+
+    /* Smooth filter transitions */
+    .filter-btn {
+      transition: all 0.3s ease;
+    }
+
+    .filter-btn.active {
+      animation: filterPulse 0.5s ease;
+    }
+
+    @keyframes filterPulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+    }
+
+    /* Navigation link enhancements */
+    nav a {
+      position: relative;
+      overflow: hidden;
+    }
+
+    nav a:hover::after {
+      left: 0;
+    }
+
+    /* Search input enhancement */
+    .search-bar input {
+      transition: all 0.3s ease;
+    }
+
+    .search-bar input::placeholder {
+      transition: color 0.3s ease;
+    }
+
+    .search-bar input:focus::placeholder {
+      color: transparent;
+    }
+
+    /* Cart animations */
+    .cart-item {
+      animation: slideInCart 0.3s ease-out;
+    }
+
+    @keyframes slideInCart {
+      from {
+        opacity: 0;
+        transform: translateX(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    /* Responsive button text for mobile */
+    @media (max-width: 480px) {
+      .btn-primary,
+      .btn-add {
+        padding: 0.8rem 1.5rem;
+        font-size: 0.95rem;
+      }
+    }
+
+    /* ===== Responsive ===== */
+    @media (max-width: 1024px) {
+      .hero {
+        flex-direction: column;
+        padding: 4rem 1rem 5rem;
+      }
+      .hero-content,
+      .hero-image {
+        max-width: 100%;
+      }
+      nav {
+        gap: 1rem;
+      }
+      #cart-sidebar {
+        width: 100%;
+        max-width: 400px;
+      }
+    }
+    @media (max-width: 600px) {
+      .cards {
+        flex-direction: column;
+        align-items: center;
+      }
+      .team {
+        flex-direction: column;
+        align-items: center;
+      }
+      .testimonial-cards {
+        flex-direction: column;
+        align-items: center;
+      }
+      .search-bar input {
+        width: 130px;
+      }
+      .filter-buttons {
+        gap: 0.8rem;
+      }
+    }
+
+    /*=====Team member layout Fix===*/
+
+    @media (max-width: 768px) {
+    .team-member {
+    min-width: 100%;
+    max-width: 100%;
+  }
+  }
+    /* ===== Mobile Navbar Fix ===== */
+@media (max-width: 480px) {
+
+  .header-inner {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 1rem;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+
+  nav {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  nav a {
+    padding: 0.4rem 0.7rem;
+    font-size: 0.9rem;
+  }
+
+  .search-bar {
+    margin-left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .search-bar input {
+    width: 100%;
+    max-width: 220px;
+  }
+}
+
+/* ===== Skeleton UI ===== */
+
+/* Base skeleton element */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #f0e0d0 25%,
+    #ffe0c8 50%,
+    #f0e0d0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 8px;
+  display: block;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Skeleton Card — mirrors .card layout exactly */
+.skeleton-card {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+  width: 260px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 1rem 1.8rem;
+  gap: 0.8rem;
+}
+
+.skeleton-card .sk-image {
+  width: 100%;
+  height: 170px;
+  border-radius: 15px;
+}
+
+.skeleton-card .sk-title {
+  width: 70%;
+  height: 20px;
+  border-radius: 6px;
+}
+
+.skeleton-card .sk-desc-line {
+  height: 13px;
+  border-radius: 6px;
+}
+
+.skeleton-card .sk-desc-line:nth-child(1) { width: 90%; }
+.skeleton-card .sk-desc-line:nth-child(2) { width: 75%; }
+
+.skeleton-card .sk-price {
+  width: 40%;
+  height: 16px;
+  border-radius: 6px;
+  margin-top: 0.2rem;
+}
+
+.skeleton-card .sk-btn {
+  width: 120px;
+  height: 38px;
+  border-radius: 40px;
+  margin-top: 0.4rem;
+}
+
+/* Skeleton Cart Item — mirrors .cart-item layout */
+.skeleton-cart-item {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.4rem;
+  border-radius: 15px;
+  background: white;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
+  padding: 1rem;
+  align-items: center;
+}
+
+.skeleton-cart-item .sk-thumb {
+  width: 80px;
+  height: 60px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.skeleton-cart-item .sk-lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-cart-item .sk-line-name {
+  height: 14px;
+  width: 60%;
+  border-radius: 6px;
+}
+
+.skeleton-cart-item .sk-line-price {
+  height: 12px;
+  width: 35%;
+  border-radius: 6px;
+}
+
+.skeleton-cart-item .sk-line-qty {
+  height: 28px;
+  width: 90px;
+  border-radius: 6px;
+}
+
+/* ===== Autocomplete Search Suggestions ===== */
+.search-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% + 20px);
+  min-width: 350px;
+  max-width: 90vw;
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
+  margin-top: 0.8rem;
+  z-index: 1001;
+  overflow: hidden;
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.suggestion-item {
+  padding: 1rem 1.4rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  border-bottom: 1px solid rgba(255, 87, 34, 0.08);
+  transition: background 0.2s ease, transform 0.2s ease;
+  min-height: 50px;
+}
+
+.suggestion-item:last-child {
+  border-bottom: none;
+}
+
+.suggestion-item:hover {
+  background: rgba(255, 87, 34, 0.08);
+  transform: translateX(4px);
+}
+
+.suggestion-item:active {
+  background: rgba(255, 87, 34, 0.15);
+}
+
+.suggestion-item.no-matches {
+  color: #bf360c;
+  font-weight: 500;
+  text-align: center;
+  justify-content: center;
+  cursor: default;
+  background: transparent !important;
+  padding: 1.5rem;
+}
+
+.suggestion-name {
+  font-weight: 600;
+  color: #2c1810;
+  font-size: 1rem;
+  line-height: 1.4;
+  flex: 1;
+  min-width: 150px;
+}
+
+.suggestion-category {
+  font-size: 0.8rem;
+  background: rgba(255, 87, 34, 0.15);
+  color: #bf360c;
+  padding: 0.35rem 0.75rem;
+  border-radius: 24px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+/* ===== Advanced Filters UI ===== */
+.filter-toggle-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.btn-filter-toggle {
+  background: white;
+  border: 2px solid #ff5722;
+  color: #ff5722;
+  padding: 0.6rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.1);
+}
+
+.btn-filter-toggle:hover {
+  background: #fbe9e7;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.2);
+}
+
+.btn-filter-toggle.active {
+  background: #ff5722;
+  color: white;
+  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
+}
+
+.advanced-filters {
+  max-width: 800px;
+  margin: 0 auto 3rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.4s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.filter-group label {
+  font-weight: 700;
+  color: #bf360c;
+  font-size: 0.95rem;
+}
+
+/* Slider Custom Styles */
+.filter-group input[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+   appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #ffe0b2;
+  outline: none;
+}
+
+.filter-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #ff5722;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+  box-shadow: 0 0 8px rgba(255, 87, 34, 0.4);
+}
+
+.filter-group input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+#price-slider-val {
+  font-weight: 700;
+  color: #ff5722;
+}
+
+/* Selectors custom styles */
+.filter-group select {
+  padding: 0.6rem 0.8rem;
+  border-radius: 10px;
+  border: 2px solid #ffcc99;
+  background: white;
+  font-size: 0.95rem;
+  color: #5d4037;
+  outline: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.3s ease;
+}
+
+.filter-group select:focus {
+  border-color: #ff5722;
+}
+
+/* Dietary custom checkboxes */
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-top: 0.2rem;
+}
+
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-checkbox input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #ff5722;
+  cursor: pointer;
+}
+
+.checkbox-label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #5d4037 !important;
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(255, 87, 34, 0.1);
+}
+
+.btn-reset-filters {
+  background: transparent;
+  border: 2px solid #bf360c;
+  color: #bf360c;
+  padding: 0.5rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.btn-reset-filters:hover {
+  background: #bf360c;
+  color: white;
+  box-shadow: 0 4px 15px rgba(191, 54, 12, 0.3);
+}
+
+/* ===== Highlights & Food Metadata Styles ===== */
+mark.highlight {
+  background: #ffd54f;
+  color: #3e2723;
+  padding: 0.05rem 0.15rem;
+  border-radius: 3px;
+  font-weight: 700;
+}
+
+.card-meta {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.card-meta .rating {
+  color: #ffb300;
+}
+
+.card-meta .spice {
+  color: #bf360c;
+}
+
+.card-tags {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-top: 0.8rem;
+}
+
+.tag {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tag-vegan {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid rgba(46, 125, 50, 0.2);
+}
+
+.tag-gluten-free {
+  background: #e0f7fa;
+  color: #00838f;
+  border: 1px solid rgba(0, 131, 143, 0.2);
+}
+
+/* Fix description layout on food card */
+.card-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.card-content h3 {
+  margin-bottom: 0.4rem;
+}
+
+.card-content p {
+  font-size: 0.9rem;
+  color: #5d4037;
+  line-height: 1.4;
+  margin-bottom: auto;
+}
+
+.card-footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.2rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid #fbe9e7;
+}
+
+.card-footer .price {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #bf360c;
+}
+
+.card-footer .add-btn {
+  background: #2e7d32;
+  color: white;
+  padding: 0.4rem 1.2rem;
+  border-radius: 50px;
+  border: none;
+  font-weight: 700;
+  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
+  transition: all 0.3s ease;
+}
+
+.card-footer .add-btn:hover {
+  background: #1b5e20;
+  box-shadow: 0 6px 15px rgba(27, 94, 32, 0.5);
+  transform: translateY(-1px);
+}
+
+/* ===== Orders Dashboard Layout ===== */
+.orders-page {
+  padding-top: 4rem;
+  padding-bottom: 5rem;
+}
+
+.orders-page h1 {
+  font-size: 2.2rem;
+  color: #bf360c;
+  margin-bottom: 2.5rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.orders-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Empty Orders Page */
+.empty-orders {
+  text-align: center;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 4rem 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.empty-orders h2 {
+  font-size: 1.6rem;
+  color: #3e2723;
+  margin-bottom: 0.8rem;
+}
+
+.empty-orders p {
+  color: #5d4037;
+  font-size: 1.05rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Order Progress Card */
+.order-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 87, 34, 0.15);
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.order-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 35px rgba(255, 87, 34, 0.1);
+}
+
+.order-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #fbe9e7;
+  padding-bottom: 1.2rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.order-meta-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.order-id {
+  font-size: 1.1rem;
+  color: #3e2723;
+}
+
+.order-date {
+  font-size: 0.85rem;
+  color: #8d6e63;
+}
+
+/* Status Badges */
+.status-badge {
+  font-size: 0.85rem;
+  font-weight: 700;
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: inline-block;
+}
+
+.status-badge.status-pending {
+  background: #fff8e1;
+  color: #ffb300;
+  border: 1px solid rgba(255, 179, 0, 0.3);
+}
+
+.status-badge.status-preparing {
+  background: #fbe9e7;
+  color: #ff5722;
+  border: 1px solid rgba(255, 87, 34, 0.3);
+}
+
+.status-badge.status-on-the-way {
+  background: #e1f5fe;
+  color: #0288d1;
+  border: 1px solid rgba(2, 136, 209, 0.3);
+}
+
+.status-badge.status-delivered {
+  background: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid rgba(46, 125, 50, 0.3);
+}
+
+/* Graphical Progress Stepper Track */
+.order-timeline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 2rem 0 2.5rem;
+  padding: 0 1rem;
+}
+
+.timeline-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  gap: 0.5rem;
+}
+
+.step-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e0e0e0;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.9rem;
+  transition: all 0.4s ease;
+  border: 2px solid transparent;
+}
+
+.step-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #9e9e9e;
+  transition: all 0.4s ease;
+}
+
+/* Timeline Connectors */
+.timeline-line {
+  flex: 1;
+  height: 4px;
+  background: #e0e0e0;
+  margin-top: -1.2rem;
+  z-index: 1;
+  transition: all 0.4s ease;
+}
+
+/* Highlighted Progress Active Steps states */
+.timeline-step.active .step-circle {
+  background: #ffe0b2;
+  color: #ff5722;
+  border-color: #ff5722;
+}
+
+.timeline-step.active .step-label {
+  color: #ff5722;
+}
+
+.timeline-step.current .step-circle {
+  background: #ff5722;
+  color: white;
+  box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
+  transform: scale(1.15);
+}
+
+.timeline-step.current .step-label {
+  font-weight: 700;
+  color: #bf360c;
+}
+
+.timeline-line.active {
+  background: #ffaa66;
+}
+
+/* Order Item Row Summary Layout */
+.order-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 1.2rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid #fbe9e7;
+}
+
+.order-item-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  color: #5d4037;
+}
+
+.order-item-row span:first-child {
+  font-weight: 600;
+}
+
+.order-item-row span:last-child {
+  font-weight: 700;
+}
+
+/* Order Card Footer */
+.order-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.order-total-price {
+  font-size: 1.05rem;
+  color: #5d4037;
+}
+
+.order-total-price strong {
+  font-size: 1.3rem;
+  color: #bf360c;
+  margin-left: 0.4rem;
+}
+
+/* Reorder Button styling */
+.btn-reorder {
+  background: #ff5722;
+  color: white;
+  border: none;
+  padding: 0.6rem 1.6rem;
+  border-radius: 50px;
+  font-weight: 700;
+  font-size: 0.95rem;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.btn-reorder:hover {
+  background: #bf360c;
+  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.4);
+  transform: translateY(-1px);
+}
+ 
+
+.price-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.original-price {
+  text-decoration: line-through;
+  color: gray;
+  font-size: 14px;
+}
+
+.discount-badge {
+  background-color: #ff4d4dc1;
+  color: white;
+  padding: 1.5px 4.5px;
+  border-radius: 5px;
+  font-size: 10.5px;
+  font-weight: bold;
+}
+/* ===== Dark Mode Theme ===== */
+.theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 68px;
+  height: 32px;
+  padding: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 99px;
+  background-color: #f2f4f7;
+  cursor: pointer;
+  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.theme-toggle:hover {
+  border-color: rgba(255, 87, 34, 0.3);
+}
+
+.theme-toggle:focus-visible {
+  outline: 2px solid #ff5722 !important;
+  outline-offset: 2px;
+}
+
+.theme-toggle-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 4px;
+}
+
+.theme-toggle-thumb {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #ffa726; /* vibrant orange/yellow for light mode */
+  box-shadow: 0 2px 6px rgba(255, 167, 38, 0.4);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+.theme-toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  z-index: 2;
+  pointer-events: none;
+  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle-icon svg {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.5;
+}
+
+.theme-toggle-icon.sun-icon {
+  color: #ffffff; /* Active in light mode */
+}
+
+.theme-toggle-icon.moon-icon {
+  color: #8e9aa8; /* Inactive in light mode */
+}
+
+/* Dark mode specific overrides for theme toggle */
+body.dark .theme-toggle {
+  background-color: #15191e;
+  border-color: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .theme-toggle-thumb {
+  transform: translateX(36px);
+  background-color: #2b3648; /* Slate blue for dark mode */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+body.dark .theme-toggle-icon.sun-icon {
+  color: #5f6d7e; /* Inactive in dark mode */
+}
+
+body.dark .theme-toggle-icon.moon-icon {
+  color: #ffffff; /* Active in dark mode */
+}
+
+body.dark .login-btn-nav,
+body.dark .profile-toggle {
+  background: #2b2b2b;
+  color: #ffffff;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .login-btn-nav:hover,
+body.dark .login-btn-nav:focus-visible,
+body.dark .profile-toggle:hover,
+body.dark .profile-toggle:focus-visible {
+  background: #3a2d27;
+  color: #ffd0c2;
+}
+
+body.dark .profile-dropdown {
+  background: #232323;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
+}
+
+body.dark .profile-dropdown-header {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+body.dark .profile-dropdown-name {
+  color: #ffffff;
+}
+
+body.dark .profile-dropdown-email {
+  color: #b0b7c3;
+}
+
+body.dark .profile-dropdown a,
+body.dark .profile-dropdown button {
+  color: #f3f3f3;
+}
+
+body.dark .profile-dropdown a:hover,
+body.dark .profile-dropdown a:focus-visible,
+body.dark .profile-dropdown button:hover,
+body.dark .profile-dropdown button:focus-visible {
+  background: rgba(255, 87, 34, 0.16);
+  color: #ffb39d;
+}
+
+body.dark .profile-dropdown-logout {
+  color: #ffb39d;
+}
+/* body */
+body.dark {
+  background: #1e1e1e;
+  color: #f5f5f5;
+}
+
+/* Headings  */
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4{
+  color: #ff5722;
+}
+body.dark p{
+  color: #ffab91;
+}
+
+/* Header & Navigation */
+body.dark header {
+  /* Keep orange brand background — only deepen the shadow for dark mode depth */
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
+}
+body.dark nav a {
+  color: #f5f5f5;
+}
+body.dark nav a:hover,
+body.dark nav a.active {
+  background: #ff5722;
+  box-shadow: 0 0 8px rgba(255, 87, 34, 0.8);
+}
+body.dark .dropdown-menu {
+  background: #333;
+}
+body.dark .dropdown-menu a:hover {
+  background: #ff5722;
+}
+
+/* Hero Section */
+body.dark .hero {
+  background: linear-gradient(120deg, #3b1f17, #2c150d);
+  color: #fff3e0;
+}
+body.dark .btn-primary {
+  background: #ff5722;
+  color: #fff;
+}
+body.dark .btn-primary:hover {
+  background: #e64a19;
+}
+
+/* Cards & Containers */
+body.dark .card,
+body.dark .skeleton-card,
+body.dark .skeleton-cart-item {
+  background: #2a2a2a;
+  color: #eee;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+}
+body.dark .card h3 {
+  color: #ff5722;
+}
+body.dark .card p.price {
+  color: #ffab91;
+}
+body.dark .card p.description {
+  color: #ccc;
+}
+
+/* Sections */
+body.dark section.menu,
+body.dark section.specials,
+body.dark section.about,
+body.dark section.testimonials {
+  background: #252525;
+  color: #eee;
+}
+body.dark .filter-btn {
+  background: transparent;
+  border: 2px solid #ff5722;
+  color: #ff5722;
+}
+body.dark .filter-btn.active,
+body.dark .filter-btn:hover {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Cart Sidebar */
+body.dark #cart-sidebar {
+  background: #2b2b2b;
+  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.6);
+}
+body.dark #cart-header {
+  background: #ff5722;
+}
+body.dark .cart-item {
+  background: #333;
+}
+
+body.dark #checkout-btn {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Forms */
+body.dark section.contact {
+  background: #252525;
+  color: #eee;
+}
+body.dark section.contact h2 {
+  color: #ff5722;
+}
+body.dark form.contact-form {
+  background: #2b2b2b;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+}
+body.dark form.contact-form input,
+body.dark form.contact-form textarea {
+  background: #1e1e1e;
+  color: #f5f5f5;
+  border-color: #444;
+}
+body.dark form.contact-form label {
+  color: #ffab91;
+}
+body.dark .btn-submit {
+  background: #ff5722;
+}
+
+/* Testimonials */
+body.dark .testimonial {
+  background: #2a2a2a;
+  color: #ddd;
+}
+body.dark .testimonial::before {
+  color: #ff5722;
+}
+
+/* Newsletter */
+body.dark section.newsletter {
+  background: #2c2c2c;
+  color: #fff;
+}
+body.dark .newsletter-form button {
+  background: #ff5722;
+  color: #fff;
+}
+
+/* Footer */
+body.dark footer {
+  background: #111;
+  color: #eee;
+}
+body.dark .social-icons a:hover {
+  color: #ff5722;
+}
+
+/* Skeleton Animation background  */
+body.dark .skeleton {
+  background: linear-gradient(
+    90deg,
+    #534949 25%,
+    #444 50%,
+    #3a3a3a 75%
+  );
+}
+
+/* Dark Mode Search Bar overrides */
+body.dark .search-bar input {
+  background-color: #2c2c2c;
+  color: #f5f5f5;
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+body.dark .search-bar input::placeholder {
+  color: #8d6e63;
+}
+body.dark .search-bar input:hover {
+  border-color: rgba(255, 87, 34, 0.4);
+}
+body.dark .search-bar input:focus {
+  background-color: #1e1e1e;
+  border-color: #ff5722;
+  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+body.dark .search-bar button {
+  color: #ff5722;
+}
+body.dark .search-bar button:hover {
+  background-color: rgba(255, 87, 34, 0.15);
+}
+body.dark .search-bar button:hover .search-svg {
+  stroke: #ff7b54;
+}
+body.dark .search-suggestions {
+  background: rgba(30, 30, 30, 0.98);
+  border-color: rgba(255, 87, 34, 0.3);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+}
+body.dark .suggestion-item {
+  border-bottom: 1px solid rgba(255, 87, 34, 0.12);
+}
+body.dark .suggestion-name {
+  color: #eee;
+}
+body.dark .suggestion-category {
+  color: #ffab91;
+}
+body.dark .suggestion-item:hover {
+  background: rgba(255, 87, 34, 0.15);
+}
+body.dark .suggestion-item.no-matches {
+  color: #ff7b54;
+}
+
+/* Dark Mode Cart Button overrides */
+body.dark .cart-btn-modern {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.12) !important;
+}
+body.dark .cart-btn-modern:hover {
+  background: #ff5722 !important;
+  border-color: #ff7b54 !important;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4) !important;
+}
+body.dark .cart-btn-modern.active {
+  background: #ff5722 !important;
+  border-color: #ff7b54 !important;
+  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
+}
+body.dark .cart-badge {
+  background-color: #ffb300;
+  border-color: #ff5722;
+  color: #1e1e1e;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #fff3e0;
+}
+::-webkit-scrollbar-thumb {
+  background: #ff5722;
+  border-radius: 999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #e64a19;
+}
+/*Accessibility Styles */
+
+/* ===== Accessibility Styles ===== */
+
+
+/* Skip link - visible on focus */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #ff5722;
+  color: white;
+  padding: 0.6rem 1rem;
+  text-decoration: none;
+  z-index: 10000;
+  border-radius: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* Enhanced focus states for keyboard navigation */
+body.keyboard-nav button:focus,
+body.keyboard-nav a:focus,
+body.keyboard-nav input:focus,
+body.keyboard-nav textarea:focus,
+body.keyboard-nav select:focus {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Focus states for all interactive elements */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Card focus state */
+.card:focus {
+  outline: 3px solid #ff5722;
+  outline-offset: 2px;
+  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
+}
+
+/* Search suggestion focused state */
+.suggestion-item.focused {
+  background: #ffe0d0;
+  color: #3e3e3e;
+}
+
+.suggestion-item:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 1px;
+}
+
+/* Improved focus for navigation links */
+nav a:focus-visible {
+  box-shadow: 0 0 8px #ff5722;
+}
+
+/* Filter button focus state */
+.filter-btn:focus-visible,
+.menu-filter:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Checkbox and radio focus states */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* Range slider focus state */
+input[type="range"]:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 4px;
+}
+
+/* Select dropdown focus state */
+select:focus-visible {
+  outline: 2px solid #ff5722;
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  select:focus-visible {
+    outline-width: 4px;
+  }
+
+  .card:focus {
+    outline-width: 4px;
+    box-shadow: 0 0 30px rgba(255, 87, 34, 0.8);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Note: theme switching is handled via body.dark class (see auth.js setupThemeToggle) */
+
+
+/* Improve contrast of disabled buttons */
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Out of Stock Badge */
+.out-of-stock-badge {
+  background-color: #6c757d !important;  /* Grey color */
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-block;
+  margin: 10px 0 5px 0;
+  letter-spacing: 0.5px;
+  text-align: center;
+  width: fit-content;
+}
+
+/* Disabled button styling */
+.add-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #cccccc !important;
+  transform: none !important;
+}
+
+/* Hover effect for disabled button */
+.add-btn:disabled:hover {
+  transform: none !important;
+  opacity: 0.6;
+}
+
+
+/* ===== Loyalty Wallet Styles ===== */
+.cart-loyalty-widget {
+  background: #ffffff;
+  border: 1px dashed #ff9800;
+  border-radius: 16px;
+  padding: 1.2rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+body.dark .cart-loyalty-widget {
+  background: #2a2a2a;
+  border-color: #f57c00;
+  color: #fff;
+}
+
+.loyalty-widget-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 0.8rem;
+}
+
+.loyalty-icon {
+  font-size: 1.6rem;
+  filter: drop-shadow(0 2px 5px rgba(255, 152, 0, 0.4));
+  animation: pulse-gold 2s infinite ease-in-out;
+}
+
+@keyframes pulse-gold {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.15); }
+  100% { transform: scale(1); }
+}
+
+.loyalty-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.loyalty-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #bf360c;
+}
+
+body.dark .loyalty-title {
+  color: #ff7a45;
+}
+
+.loyalty-desc {
+  font-size: 0.85rem;
+  color: #5d4037;
+}
+
+body.dark .loyalty-desc {
+  color: #ccc;
+}
+
+.loyalty-redeem-action {
+  border-top: 1px solid #ffe0b2;
+  padding-top: 0.8rem;
+}
+
+body.dark .loyalty-redeem-action {
+  border-top-color: #444;
+}
+
+/* Switch Toggle Styling */
+.loyalty-toggle {
+  display: flex;
+  align-items: center;
+   cursor: pointer;
+  user-select: none;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #bf360c;
+  gap: 0.6rem;
+}
+
+body.dark .loyalty-toggle {
+  color: #ff7a45;
+}
+
+.loyalty-toggle input {
+  display: none;
+}
+
+.toggle-slider {
+  position: relative;
+  width: 44px;
+  height: 22px;
+  background-color: #ccc;
+  border-radius: 34px;
+  transition: .3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: .3s;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.loyalty-toggle input:checked + .toggle-slider {
+  background-color: #4caf50;
+}
+
+.loyalty-toggle input:checked + .toggle-slider:before {
+  transform: translateX(22px);
+}
+
+.loyalty-empty-message {
+  font-size: 0.8rem;
+  color: #795548;
+  font-style: italic;
+  margin-top: 0.4rem;
+}
+
+body.dark .loyalty-empty-message {
+  color: #aaa;
+}
+
+/* Cart Total Breakdown */
+.cart-total-breakdown {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.5rem 0;
+  margin-left: 0.4rem;
+  transition: 0.3s ease;
+}
+
+.breakdown-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #5d4037;
+}
+
+body.dark .breakdown-row {
+  color: #ccc;
+}
+
+.breakdown-row.discount {
+  color: #e64a19;
+}
+
+.breakdown-row.final {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #bf360c;
+  border-top: 1px solid #ffcc80;
+  padding-top: 0.5rem;
+  margin-top: 0.2rem;
+}
+
+body.dark .breakdown-row.final {
+  color: #ff7a45;
+  border-top-color: #555;
+}
+
+
+/* ===== Combo Add Button ===== */
+
+.lang-toggle-btn {
+  background: linear-gradient(135deg, #ff6200, #ff8c00);
+  color: #fff;
+  border: none;
+  border-radius: 20px;
+  padding: 6px 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: 'Poppins', sans-serif;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+  margin-left: 8px;
+}
+.lang-toggle-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 98, 0, 0.35);
+}
+
+/* ===== Responsive Navbar Spacing & Overlap Fixes ===== */
+@media (max-width: 1200px) {
+  .logo {
+    font-size: 1.5rem !important;
+    margin-right: 1rem !important;
+  }
+  .navbar-logo-img {
+    height: 34px !important;
+    width: 34px !important;
+  }
+  nav {
+    gap: 0.8rem !important;
+  }
+  nav a {
+    padding: 0.4rem 0.6rem !important;
+    font-size: 0.9rem !important;
+  }
+  .cart-btn-modern {
+    padding: 0.3rem 0.8rem !important;
+  }
+}
+
+@media (max-width: 950px) {
+  .header-inner {
+    flex-direction: column !important;
+    gap: 1rem !important;
+    padding: 1rem 1rem !important;
+  }
+  .logo {
+    margin-right: 0 !important;
+  }
+  nav {
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    gap: 0.8rem !important;
+    width: 100% !important;
+  }
+}
+
+
+#voice-search-btn{
+  border: none;
+  background: #ff7043;
+  color: white;
+  padding: 0.6rem 0.9rem;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-left: 0.4rem;
+  transition: 0.3s ease;
+}
+
+#voice-search-btn:hover {
+  background: #f4511e;
+}
+
+#voice-search-btn.listening {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.12);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/* ===== Combo Add Button ===== */
+
+.combo-add-btn {
+  background: #ff5722;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.combo-add-btn:hover {
+  background: #e64a19;
+  transform: scale(1.05);
+}
+.combo-item-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+
+/* ===== Cinematic Video Hero ===== */
+.hero {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - var(--header-height, 90px));
+  height: calc(100vh - var(--header-height, 90px));
+  padding: 0 8%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  margin-bottom: 0;
+  background: #130a06;
+  text-align: left;
+}
+
+.hero-video-stage,
+.hero-bg-video,
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.hero-video-stage {
+  z-index: 1;
+  background: #130a06;
+  overflow: hidden;
+}
+
+.hero-video,
+.hero-bg-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transform: scale(1.04);
+  transition: opacity 1.25s ease, transform 7s ease;
+  will-change: opacity, transform;
+}
+
+.hero-bg-video.active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hero-overlay {
+  z-index: 2;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.70) 0%,
+    rgba(0, 0, 0, 0.45) 45%,
+    rgba(0, 0, 0, 0.20) 100%
+  );
+}
+
+.hero-content {
+  position: relative;
+  z-index: 3;
+  flex: 0 0 min(650px, 52vw);
+  max-width: 650px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 0;
+  text-align: left;
+  color: #ffffff;
+}
+
+.hero-badge,
+.hero-secondary-btn,
+.hero-stat-card {
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: fit-content;
+  margin-bottom: 1.4rem;
+  padding: 0.62rem 1rem;
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 0.95rem;
+  font-weight: 700;
+  animation: heroFadeUp 0.75s ease both;
+}
+
+.hero-title,
+.hero-content h1 {
+  margin: 0 0 1.35rem;
+  color: #ffffff;
+  font-size: clamp(2.75rem, 4.4vw, 4.75rem);
+  font-weight: 800;
+  line-height: 1.05;
+  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52);
+  letter-spacing: 0;
+  animation: heroFadeUp 0.85s ease 0.08s both;
+}
+
+.hero-content p {
+  max-width: 550px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.8;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  animation: heroFadeUp 0.85s ease 0.2s both;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 30px;
+  animation: heroFadeUp 0.85s ease 0.4s both;
+}
+
+.hero-primary-btn,
+.hero-secondary-btn {
+  min-width: 154px;
+  min-height: 54px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.95rem 1.65rem;
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+.hero-primary-btn {
+  background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%);
+  color: #ffffff;
+  box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38);
+}
+
+.hero-primary-btn:hover,
+.hero-primary-btn:focus-visible {
+  background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%);
+  transform: translate3d(0, -3px, 0);
+  box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5);
+}
+
+.hero-secondary-btn {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.46);
+}
+
+.hero-secondary-btn:hover,
+.hero-secondary-btn:focus-visible {
+  transform: translate3d(0, -3px, 0);
+  border-color: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
+}
+
+.hero-stats {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  right: 8%;
+  width: 300px;
+  min-width: 0;
+  height: 370px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.hero-stat-card {
+  position: absolute;
+  width: 230px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.95rem 1.05rem;
+  border-radius: 18px;
+  color: #ffffff;
+  animation: heroFloat 5.5s ease-in-out infinite;
+  will-change: transform;
+}
+
+.hero-stat-card strong {
+  display: block;
+  color: #ffffff;
+  font-size: 1.1rem;
+  line-height: 1.1;
+}
+
+.hero-stat-card span:last-child {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.hero-stat-icon {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 42px;
+  border-radius: 50%;
+  background: rgba(255, 122, 31, 0.2);
+}
+
+.hero-stat-rating {
+  top: 0;
+  right: 0;
+}
+
+.hero-stat-delivery {
+  top: 130px;
+  right: 58px;
+  animation-delay: 0.8s;
+}
+
+.hero-stat-orders {
+  top: 260px;
+  right: 0;
+  animation-delay: 1.6s;
+}
+
+.hero-scroll-indicator {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  bottom: 2rem;
+  width: 28px;
+  height: 46px;
+  display: inline-flex;
+  justify-content: center;
+  border: 1.5px solid rgba(255, 255, 255, 0.72);
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.hero-scroll-indicator span {
+  width: 5px;
+  height: 5px;
+  margin-top: 9px;
+  border-radius: 50%;
+  background: #ffffff;
+  animation: heroScrollDot 1.6s ease-in-out infinite;
+}
+
+body.dark .hero {
+  background: #130a06;
+  color: #ffffff;
+}
+
+body.dark .hero-content h1,
+body.dark .hero-content p {
+  color: #ffffff;
+}
+
+body.dark .hero-content p {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.specials,
+.menu,
+.specials-section,
+.menu-section {
+  position: relative;
+  z-index: 5;
+}
+
+@keyframes heroFadeUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 26px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes heroFloat {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(0, -14px, 0);
+  }
+}
+
+@keyframes heroScrollDot {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+
+  35% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@media (max-width: 1024px) {
+  .hero {
+    padding: 0 6%;
+  }
+
+  .hero-stats {
+    right: 4%;
+    opacity: 0.92;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero {
+    min-height: calc(100vh - var(--header-height, 90px));
+    height: auto;
+    padding: 3.5rem 1.25rem 4.5rem;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .hero-overlay {
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.62) 0%,
+      rgba(0, 0, 0, 0.46) 48%,
+      rgba(0, 0, 0, 0.66) 100%
+    );
+  }
+
+  .hero-content {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  .hero-badge,
+  .hero-actions {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .hero-title,
+  .hero-content h1 {
+    font-size: clamp(2.45rem, 11vw, 3.65rem);
+    line-height: 1.05;
+  }
+
+  .hero-content p {
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.02rem;
+    line-height: 1.7;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    width: min(100%, 360px);
+  }
+
+  .hero-primary-btn,
+  .hero-secondary-btn {
+    width: 100%;
+  }
+
+  .hero-stats {
+    position: relative;
+    top: auto;
+    right: auto;
+    width: min(100%, 360px);
+    min-width: 0;
+    margin: 2.2rem auto 0;
+    transform: none;
+    display: grid;
+    gap: 0.7rem;
+  }
+
+  .hero-stat-card {
+    position: static;
+    min-width: 0;
+    width: 100%;
+    justify-content: flex-start;
+    border-radius: 16px;
+    animation-duration: 4.8s;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .hero-badge {
+    font-size: 0.82rem;
+    padding: 0.55rem 0.82rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-bg-video,
+  .hero-badge,
+  .hero-content h1,
+  .hero-content p,
+  .hero-actions,
+  .hero-stat-card,
+  .hero-scroll-indicator span{
+    animation: none !important;
+    transition: none !important;
+  }
+}
\ No newline at end of file

From b1f4741f6c028d429b5d5b1a3882cae491cf453f Mon Sep 17 00:00:00 2001
From: Varun Bisoi <57100019+vishu786-vb@users.noreply.github.com>
Date: Wed, 15 Jul 2026 20:24:55 +0530
Subject: [PATCH 6/6] Delete js/style.css

---
 js/style.css | 3725 --------------------------------------------------
 1 file changed, 3725 deletions(-)
 delete mode 100644 js/style.css

diff --git a/js/style.css b/js/style.css
deleted file mode 100644
index 893c6f2..0000000
--- a/js/style.css
+++ /dev/null
@@ -1,3725 +0,0 @@
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Light.ttf') format('truetype');
-  font-weight: 300;
-}
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
-  font-weight: 700;
-}
-@font-face {
-  font-family: 'Poppins';
-  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
-  font-weight: 500;
-}
-    * {
-      margin: 0; padding: 0; box-sizing: border-box;
-    }
-    html {
-      scroll-behavior: smooth;
-    }
-    body {
-      font-family: 'Poppins', sans-serif;
-      background: #fff8f0;
-      color: #3e3e3e;
-      line-height: 1.6;
-      font-size: 16px;
-      overflow-x: hidden;
-    }
-    a {
-      text-decoration: none;
-      color: inherit;
-    }
-    img {
-      max-width: 100%;
-      display: block;
-      border-radius: 12px;
-    }
-    button {
-      cursor: pointer;
-      font-family: inherit;
-    }
-
-    /* ===== Container ===== */
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 1rem;
-    }
-
-    /* ===== Toast Notification ===== */
-
-.toast-notification {
-  position: fixed;
-  top: 90px;
-  left: 50%;
-  transform: translateX(-50%) translateY(-20px);
-
-  background: linear-gradient(135deg, #ff7a00, #ff9a3c);
-  color: #fff;
-
-  padding: 14px 24px;
-  border-radius: 14px;
-
-  font-size: 15px;
-  font-weight: 600;
-
-  min-width: 280px;
-  text-align: center;
-
-  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
-
-  opacity: 0;
-  transition: all 0.35s ease;
-
-  z-index: 9999;
-  pointer-events: none;
-
-  border: 1px solid rgba(255,255,255,0.2);
-  backdrop-filter: blur(8px);
-}
-
-.toast-notification.show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-.coupon-section {
-  background: #fff3e0;
-  border: 1px dashed #ff8f4b;
-  border-radius: 14px;
-  padding: 1rem;
-  margin: 1.5rem 0;
-}
-
-.coupon-section h2 {
-  margin-bottom: 0.75rem;
-  font-size: 1.05rem;
-  color: #d84315;
-}
-
-.coupon-input-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.coupon-input-row input {
-  flex: 1 1 220px;
-  padding: 0.95rem 1rem;
-  border: 1px solid #ffcc9b;
-  border-radius: 12px;
-  background: #fff;
-  color: #3e3e3e;
-}
-
-.coupon-input-row button,
-.secondary-btn {
-  padding: 0.95rem 1.25rem;
-  border: none;
-  border-radius: 12px;
-  font-weight: 700;
-}
-
-.coupon-input-row button {
-  background: #ff7b54;
-  color: #fff;
-}
-
-.secondary-btn {
-  background: #eceff1;
-  color: #263238;
-  border: 1px solid #cfd8dc;
-}
-
-.coupon-message {
-  margin-top: 0.75rem;
-  font-size: 0.95rem;
-  min-height: 1.2rem;
-}
-
-.coupon-message.success {
-  color: #2e7d32;
-}
-
-.coupon-message.error {
-  color: #c62828;
-}
-
-.coupon-applied-label {
-  margin-top: 0.5rem;
-  font-size: 0.95rem;
-  color: #4e342e;
-}
-
-.price-breakdown {
-  background: #fff;
-  border: 1px solid #ffe0b2;
-  border-radius: 14px;
-  padding: 1rem;
-}
-
-.price-breakdown p {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  margin: 0 0 0.75rem;
-}
-
-.price-breakdown .grand-total {
-  font-weight: 700;
-  color: #bf360c;
-}
-
-@media (max-width: 600px) {
-  .coupon-input-row {
-    flex-direction: column;
-  }
-}
-
-/* ===== Mobile Responsive ===== */
-
-@media (max-width: 600px) {
-  .toast-notification {
-    width: calc(100% - 32px);
-    min-width: unset;
-
-    left: 16px;
-    right: 16px;
-
-    transform: translateY(-20px);
-
-    font-size: 14px;
-    padding: 12px 16px;
-  }
-
-  .toast-notification.show {
-    transform: translateY(0);
-  }
-}
-
-/* Cart Count Bounce */
-
-.cart-bounce {
-  animation: cartBounce 0.4s ease;
-}
-
-@keyframes cartBounce {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.3);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-    /* ===== Header ===== */
-    header {
-      position: sticky;
-      top: 0;
-      z-index: 1000;
-      background: #ff5722;
-      box-shadow: 0 3px 10px rgb(255 87 34 / 0.7);
-      user-select: none;
-    }
-    .header-inner {
-      max-width: 1600px;
-      margin: 0 auto;
-      padding: 1rem 1.8rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .logo {
-      font-weight: 700;
-      font-size: 1.8rem;
-      color: #fff;
-      letter-spacing: 1px;
-      user-select: none;
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-      gap: 0.4rem;
-      margin-right: 2rem;
-    }
-    .navbar-logo-img {
-      height: 42px;
-      width: 42px;
-      object-fit: cover;
-      border-radius: 50%;
-      background: white;
-      padding: 2px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-    .logo:hover .navbar-logo-img {
-      transform: scale(1.08);
-    }
-    nav {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-      font-weight: 600;
-    }
-    nav a {
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      transition: background 0.3s ease;
-    }
-    nav a:hover,
-    nav a.active {
-      background: #e64a19;
-      box-shadow: 0 0 8px rgb(230 74 25 / 0.8);
-    }
-
-    /* ===== Modern Cart Button ===== */
-    .cart-btn-modern {
-      display: inline-flex !important;
-      align-items: center;
-      gap: 0.6rem;
-      position: relative;
-      padding: 0.4rem 1.1rem !important;
-      border-radius: 50px !important;
-      background: rgba(255, 255, 255, 0.1) !important;
-      border: 1px solid rgba(255, 255, 255, 0.15) !important;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-      overflow: visible !important;
-      text-decoration: none !important;
-      white-space: nowrap !important;
-    }
-    .cart-btn-modern:hover {
-      background: #e64a19 !important;
-      border-color: #ff5722 !important;
-      box-shadow: 0 4px 15px rgba(230, 74, 25, 0.4) !important;
-      transform: translateY(-1px);
-    }
-    .cart-btn-modern.active {
-      background: #ff5722 !important;
-      border-color: #ff7b54 !important;
-      box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
-    }
-    .cart-icon-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .cart-svg-icon {
-      width: 18px;
-      height: 18px;
-      stroke: #ffffff;
-      stroke-width: 2.2;
-      transition: transform 0.2s ease;
-    }
-    .cart-btn-modern:hover .cart-svg-icon {
-      transform: scale(1.1);
-    }
-    .cart-badge {
-      position: absolute;
-      top: -9px;
-      right: -9px;
-      background-color: #ffc107;
-      color: #3e2723;
-      font-size: 0.65rem;
-      font-weight: 800;
-      min-width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-      border: 1.5px solid #ff5722;
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-    
-    /* Bounce animation when item added to cart */
-    .cart-bounce {
-      animation: badgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
-    }
-    @keyframes badgeBounce {
-      0%, 100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.45);
-      }
-    }
-
-    /* ===== Dropdown Nav ===== */
-    .dropdown {
-      position: relative;
-    }
-    .dropdown-toggle {
-      display: flex;
-      align-items: center;
-      gap: 0.3rem;
-      user-select: none;
-    }
-    .dropdown-toggle::after {
-      content: "▼";
-      font-size: 0.6rem;
-      color: white;
-    }
-    .dropdown-menu {
-      position: absolute;
-      top: 2.8rem;
-      left: 0;
-      background: #ff5722;
-      border-radius: 8px;
-      min-width: 140px;
-      box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(10px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-    .dropdown-menu a {
-      display: block;
-      padding: 0.6rem 1rem;
-      color: white;
-      font-weight: 600;
-      border-radius: 8px;
-      transition: background 0.3s ease;
-    }
-    .dropdown-menu a:hover {
-      background: #e64a19;
-    }
-    .dropdown:hover .dropdown-menu,
-    .dropdown:focus-within .dropdown-menu {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-    /* When JS toggles the open class (keyboard interaction), show the menu the same way as hover */
-    .dropdown.open .dropdown-menu {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    /* Force-hide override for dropdown when JS needs to hide it despite :hover */
-    .dropdown.force-hide .dropdown-menu {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      transform: translateY(10px) !important;
-      pointer-events: none !important;
-    }
-
-    /* ===== Auth/Profile Nav ===== */
-    .auth-nav-item {
-      display: inline-flex;
-      align-items: center;
-      margin-left: 0.25rem;
-      position: relative;
-      z-index: 12;
-    }
-
-    .login-btn-nav {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      padding: 0.55rem 1.1rem;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #ff5722;
-      font-weight: 700;
-      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
-      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
-    }
-
-    .login-btn-nav:hover,
-    .login-btn-nav:focus-visible {
-      transform: translateY(-1px);
-      background: #fff2e9;
-      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
-    }
-
-    .profile-menu {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .profile-toggle {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 42px;
-      height: 42px;
-      border: none;
-      border-radius: 50%;
-      background: #ffffff;
-      color: #ff5722;
-      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
-      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
-      padding: 0;
-    }
-
-    .profile-toggle:hover,
-    .profile-toggle:focus-visible {
-      transform: translateY(-1px);
-      background: #fff2e9;
-      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
-    }
-
-    .profile-avatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-    }
-
-    .profile-avatar svg {
-      width: 22px;
-      height: 22px;
-      stroke-width: 1.9;
-    }
-
-    .profile-dropdown {
-      position: absolute;
-      top: calc(100% + 0.8rem);
-      right: 0;
-      width: min(260px, calc(100vw - 1.5rem));
-      padding: 0.85rem;
-      border-radius: 20px;
-      background: #ffffff;
-      border: 1px solid rgba(255, 87, 34, 0.14);
-      box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(10px);
-      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-      z-index: 1002;
-    }
-
-    .profile-menu.open .profile-dropdown {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .profile-dropdown-header {
-      padding: 0.25rem 0.55rem 0.85rem;
-      border-bottom: 1px solid rgba(255, 87, 34, 0.1);
-      margin-bottom: 0.35rem;
-    }
-
-    .profile-dropdown-name {
-      display: block;
-      font-weight: 700;
-      color: #2d2a26;
-      word-break: break-word;
-    }
-
-    .profile-dropdown-email {
-      display: block;
-      margin-top: 0.2rem;
-      font-size: 0.82rem;
-      color: #6c757d;
-      word-break: break-word;
-    }
-
-    .profile-dropdown a,
-    .profile-dropdown button {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: flex-start;
-      padding: 0.8rem 0.95rem;
-      border: none;
-      border-radius: 14px;
-      background: transparent;
-      color: #2d2a26;
-      font: inherit;
-      font-weight: 600;
-      text-align: left;
-      transition: background-color 0.2s ease, color 0.2s ease;
-    }
-
-    .profile-dropdown a:hover,
-    .profile-dropdown a:focus-visible,
-    .profile-dropdown button:hover,
-    .profile-dropdown button:focus-visible {
-      background: #fff2e9;
-      color: #ff5722;
-    }
-
-    .profile-dropdown-logout {
-      margin-top: 0.15rem;
-      color: #c2410c;
-    }
-
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    @media (max-width: 860px) {
-      .profile-dropdown {
-        right: 0;
-        left: auto;
-      }
-    }
-
-    @media (max-width: 600px) {
-      .auth-nav-item {
-        margin-left: 0;
-      }
-
-      .login-btn-nav {
-        min-height: 44px;
-        padding: 0.55rem 1rem;
-      }
-
-      .profile-toggle {
-        width: 44px;
-        height: 44px;
-      }
-
-      .profile-dropdown {
-        width: min(240px, calc(100vw - 1rem));
-      }
-    }
-
-    /* ===== Search Bar ===== */
-    .search-bar {
-      position: relative;
-      margin-left: 1.2rem;
-      display: flex;
-      align-items: center;
-    }
-    .search-bar input {
-      padding: 0.5rem 2.4rem 0.5rem 1rem;
-      border-radius: 24px;
-      border: 1px solid rgba(255, 87, 34, 0.15);
-      background-color: #fdfbf8;
-      outline: none;
-      font-size: 0.95rem;
-      color: #3e2723;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      width: 210px;
-      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
-    }
-    .search-bar input::placeholder {
-      color: #a1887f;
-      opacity: 0.8;
-    }
-    .search-bar input:hover {
-      border-color: rgba(255, 87, 34, 0.4);
-    }
-    .search-bar input:focus {
-      background-color: #ffffff;
-      border-color: #ff5722;
-      box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15), 0 4px 12px rgba(255, 87, 34, 0.08);
-    }
-    .search-bar button {
-      position: absolute;
-      right: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      border: none;
-      background: transparent;
-      color: #ff5722;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      border-radius: 50%;
-      transition: all 0.2s ease;
-      user-select: none;
-    }
-    .search-bar button:hover {
-      background-color: rgba(255, 87, 34, 0.08);
-    }
-    .search-bar button:active {
-      transform: translateY(-50%) scale(0.9);
-    }
-    .search-bar button .search-svg {
-      width: 16px;
-      height: 16px;
-      stroke-width: 2.5;
-      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s ease;
-    }
-    .search-bar button:hover .search-svg {
-      transform: scale(1.1);
-      stroke: #bf360c;
-    }
-
-    /* ===== Hero Section ===== */
-    .hero {
-      background: rgb(255, 228, 205);
-      padding: 5rem 1rem 6rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 4.5rem;
-      flex-wrap: wrap;
-      height: 90vh;
-    }
-    .hero-content {
-      flex: 1 1 400px;
-      max-width: 640px;
-    }
-    .hero-content h1 {
-      color: #ff5722;
-      font-size: 3rem;
-      font-weight: 700;
-      margin-bottom: 2rem;
-      user-select: none;
-      line-height: 3.7rem;
-    }
-    .hero-content p {
-      font-size: 1.1rem;
-      margin-bottom: 2rem;
-      font-weight: 600;
-      user-select: text;
-      line-height: 1.4;
-      color: black;
-    }
-    .btn-primary {
-      background: #e64a19;
-      color: white;
-      font-weight: 700;
-      padding: 1rem 2.5rem;
-      border-radius: 50px;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.4);
-      border: none;
-      transition: background 0.3s ease, color 0.3s ease;
-      user-select: none;
-    }
-    .btn-primary:hover {
-      background: #ff6333;
-      color: #fff;
-      box-shadow: 0 10px 30px rgb(230 74 25 / 0.6);
-    }
-    .hero-image {
-      flex: 1 1 400px;
-      max-width: 480px;
-      border-radius: 25px;
-      overflow: hidden;
-    }
-    .hero-image img {
-      width: 100%;
-      height: auto;
-      display: block;
-      user-select: none;
-    }
-
-    /* ===== Specials & Menu Section ===== */
-    section.specials,
-    section.menu,
-    section.recently-viewed {
-      padding: 4rem 1rem 5rem;
-      background: #fff3e0;
-    }
-    .section-title {
-      text-align: center;
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: #bf360c;
-      margin-bottom: 2.5rem;
-      user-select: none;
-    }
-    .cards {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 2rem;
-      justify-content: center;
-    }
-    .menu-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 2rem;
-      justify-content: center;
-      justify-items: center;
-      width: 100%;
-      margin-top: 2rem;
-    }
-    .card {
-      background: white;
-      border-radius: 20px;
-      box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-      width: 260px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 1rem 1rem 1.8rem;
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
-      user-select: none;
-      cursor: default;
-    }
-    .card:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 15px 35px rgb(0 0 0 / 0.2);
-    }
-    .add-btn{
-      background-color: green;
-      padding: 3px 8px;
-      border-radius: 15px;
-      color: white;
-      border: none;
-    }
-    .card img {
-      border-radius: 15px;
-      width: 250px;
-      height: 170px;
-      object-fit: cover;
-      margin-bottom: 1rem;
-      pointer-events: none;
-      user-select: none;
-    }
-    .card h3 {
-      font-size: 1.4rem;
-      font-weight: 700;
-      margin-bottom: 0.6rem;
-      color: #3e2723;
-      user-select: text;
-    }
-    .card p.price {
-      font-weight: 600;
-      color: #bf360c;
-      margin-bottom: 1rem;
-      user-select: text;
-    }
-    .card p.description {
-      font-size: 0.9rem;
-      color: #5d4037;
-      margin-bottom: 1.3rem;
-      text-align: center;
-      user-select: text;
-    }
-    .btn-add {
-      background: #ff5722;
-      color: white;
-      border-radius: 40px;
-      padding: 0.5rem 1.8rem;
-      border: none;
-      font-weight: 700;
-      font-size: 1rem;
-      box-shadow: 0 6px 15px rgb(255 87 34 / 0.6);
-      user-select: none;
-      transition: background 0.3s ease;
-    }
-    .btn-add:hover {
-      background: #e64a19;
-      box-shadow: 0 8px 20px rgb(230 74 25 / 0.8);
-    }
-
-    /* ===== Menu Filters ===== */
-    .filter-buttons {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 3rem;
-      flex-wrap: wrap;
-      user-select: none;
-    }
-    .filter-btn {
-      background: #fff3e0;
-      border: 2px solid #ff5722;
-      color: #ff5722;
-      padding: 0.6rem 1.8rem;
-      border-radius: 50px;
-      font-weight: 600;
-      font-size: 1rem;
-      transition: all 0.3s ease;
-    }
-    .filter-btn.active,
-    .filter-btn:hover {
-      background: #ff5722;
-      color: white;
-      box-shadow: 0 6px 20px rgb(255 87 34 / 0.6);
-    }
-
-    /* ===== Cart Sidebar ===== */
-    #cart-sidebar {
-      position: fixed;
-      top: 0;
-      right: -400px;
-      width: 380px;
-      height: 100vh;
-      background: #fff3e0;
-      box-shadow: -6px 0 25px rgb(0 0 0 / 0.25);
-      transition: right 0.4s ease;
-      display: flex;
-      flex-direction: column;
-      z-index: 1500;
-      user-select: none;
-    }
-    #cart-sidebar.open {
-      right: 0;
-    }
-    #cart-header {
-      background: #ff5722;
-      color: white;
-      padding: 1.3rem 1.5rem;
-      font-weight: 700;
-      font-size: 1.4rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    #cart-close {
-      background: transparent;
-      border: none;
-      color: white;
-      font-size: 1.6rem;
-      font-weight: 900;
-      cursor: pointer;
-      user-select: none;
-    }
-    #cart-items {
-      flex-grow: 1;
-      overflow-y: auto;
-      padding: 1rem 1.5rem;
-    }
-    .cart-item {
-      display: flex;
-      gap: 1rem;
-      margin-bottom: 1.4rem;
-      border-radius: 15px;
-      background: white;
-      box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
-      padding: 1rem;
-      align-items: center;
-    }
-    .cart-item img {
-      width: 80px;
-      height: 60px;
-      border-radius: 12px;
-      object-fit: cover;
-      user-select: none;
-    }
-    .cart-item-info {
-      flex: 1;
-      user-select: text;
-    }
-    .cart-item-info h4 {
-      font-weight: 700;
-      color: #3e2723;
-      margin-bottom: 0.3rem;
-    }
-    .cart-item-info p {
-      color: #5d4037;
-      font-size: 0.9rem;
-      margin-bottom: 0.5rem;
-    }
-    .qty-controls {
-      display: flex;
-      gap: 0.4rem;
-      align-items: center;
-      font-weight: 700;
-      user-select: none;
-    }
-    .qty-controls button {
-      background: #ff5722;
-      color: white;
-      border: none;
-      padding: 0.3rem 0.7rem;
-      font-size: 1.1rem;
-      border-radius: 5px;
-      transition: background 0.3s ease;
-      cursor: pointer;
-    }
-    .qty-controls button:hover {
-      background: #e64a19;
-    }
-    .qty-controls span {
-      min-width: 24px;
-      text-align: center;
-      font-size: 1rem;
-      user-select: none;
-    }
-    .cart-item-remove {
-      background: transparent;
-      border: none;
-      color: #bf360c;
-      font-weight: 700;
-      cursor: pointer;
-      font-size: 0.95rem;
-      user-select: none;
-      transition: color 0.3s ease;
-    }
-    .cart-item-remove:hover {
-      color: #e64a19;
-    }
-    #cart-footer {
-      padding: 1rem 1.5rem;
-      border-top: 2px solid #ff5722;
-      font-weight: 700;
-      font-size: 1.3rem;
-      color: #bf360c;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    #checkout-btn {
-      background: #ff5722;
-      border: none;
-      padding: 0.7rem 2rem;
-      border-radius: 50px;
-      font-weight: 700;
-      color: white;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
-      transition: background 0.3s ease;
-      user-select: none;
-    }
-    #checkout-btn:hover:not(:disabled) {
-      background: #e64a19;
-      box-shadow: 0 10px 30px rgb(230 74 25 / 0.9);
-    }
-    #checkout-btn:disabled {
-      background: #ffb399;
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    /* ===== About Section ===== */
-    section.about {
-      padding: 5rem 1rem 7rem;
-      background: white;
-      color: #3e3e3e;
-      user-select: text;
-    }
-    .about .container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    .about h2 {
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: #bf360c;
-      margin-bottom: 2rem;
-      text-align: center;
-      user-select: none;
-    }
-    .about p {
-      font-size: 1.1rem;
-      line-height: 1.5;
-      color: #5d4037;
-      margin-bottom: 2rem;
-    }
-    .team {
-      display: flex;
-      gap: 2rem;
-      justify-content: center;
-      flex-wrap: wrap;
-      margin-bottom: 3rem;
-    }
-   
-   .team-member {
-   width: 100%;
-   max-width: 420px;
-   min-width: 280px;
-   height: 320px;
-   flex: 1 1 320px;
-   perspective: 1000px;
-   background: transparent;
-   border-radius: 20px;
-   box-shadow: none;
-   padding: 0;
-   text-align: center;
-   user-select: none;
-}
-
-.team-member-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.8s ease;
-  transform-style: preserve-3d;
-}
-
-.team-member:hover .team-member-inner,
-.team-member:focus .team-member-inner {
-  transform: rotateY(180deg);
-}
-
-.team-member-front,
-.team-member-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: #fff3e0;
-  border-radius: 20px;
-  box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
-  backface-visibility: hidden;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  padding: 1.5rem 1.2rem;
-  box-sizing: border-box;
-}
-
-.team-member-front:hover,
-.team-member-back:hover {
-  box-shadow: 0 12px 28px rgb(0 0 0 / 0.15);
-}
-
-.team-member-back {
-  transform: rotateY(180deg);
-}
-
-.team-member img {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  margin-bottom: 1rem;
-  object-fit: cover;
-  user-select: none;
-}
-
-.team-member h4 {
-  font-weight: 700;
-  margin-bottom: 0.3rem;
-  color: #3e2723;
-}
-
-.team-member p {
-  font-size: 0.9rem;
-  color: #5d4037;
-  user-select: text;
-}
-
-.team-member-back p {
-  max-width: 85%;
-  line-height: 1.5;
-}
-
-    /* ===== Contact Section ===== */
-    section.contact {
-      padding: 5rem 1rem 7rem;
-      background: white;
-      color: #3e3e3e;
-      user-select: text;
-    }
-    section.contact .container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    section.contact h2 {
-      font-size: 2.8rem;
-      font-weight: 700;
-      color: #bf360c;
-      margin-bottom: 3rem;
-      text-align: center;
-      user-select: none;
-    }
-
-    /* ===== Contact Form ===== */
-    form.contact-form {
-      max-width: 500px;
-      margin: 0 auto;
-      background: #fff3e0;
-      padding: 2rem 2.5rem;
-      border-radius: 20px;
-      box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
-      user-select: text;
-    }
-    form.contact-form label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-weight: 600;
-      color: #bf360c;
-      user-select: none;
-    }
-    form.contact-form input,
-    form.contact-form textarea {
-      width: 100%;
-      padding: 0.7rem 1rem;
-      border-radius: 12px;
-      border: 2px solid #ffcc99;
-      font-size: 1rem;
-      margin-bottom: 1.3rem;
-      font-family: inherit;
-      resize: vertical;
-      transition: border-color 0.3s ease;
-      user-select: text;
-    }
-    form.contact-form input:focus,
-    form.contact-form textarea:focus {
-      border-color: #ff5722;
-      outline: none;
-    }
-    form.contact-form textarea {
-      min-height: 100px;
-    }
-    .error-msg {
-      font-size: 0.85rem;
-      color: #c0392b;
-      margin-top: -1rem;
-      margin-bottom: 0.8rem;
-      min-height: 1rem;
-      display: block;
-      user-select: none;
-    }
-    .form-success-msg {
-      margin-top: 0.8rem;
-      margin-bottom: 1rem;
-      padding: 0.8rem 1rem;
-      background-color: #e8f5e9;
-      color: #2e7d32;
-      border-left: 4px solid #43a047;
-      border-radius: 8px;
-      font-size: 0.95rem;
-      font-weight: 600;
-      animation: fadeInDown 0.4s ease;
-    }
-    @keyframes fadeInDown {
-      from { opacity: 0; transform: translateY(-8px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-    .btn-submit {
-      background: #ff5722;
-      color: white;
-      font-weight: 700;
-      padding: 0.9rem 2rem;
-      border-radius: 50px;
-      border: none;
-      box-shadow: 0 8px 25px rgb(255 87 34 / 0.7);
-      transition: background 0.3s ease;
-      user-select: none;
-      width: 100%;
-    }
-    .btn-submit:hover {
-      background: #e64a19;
-    }
-
-    /* ===== Testimonials ===== */
-    section.testimonials {
-      padding: 5rem 1rem 7rem;
-      background: #fff3e0;
-      color: #3e2723;
-      user-select: none;
-    }
-    .testimonial-cards {
-      max-width: 900px;
-      margin: 0 auto;
-      display: flex;
-      gap: 2rem;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-    .testimonial {
-      background: white;
-      padding: 1.8rem 2rem;
-      border-radius: 20px;
-      box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
-      max-width: 320px;
-      position: relative;
-      font-style: italic;
-      user-select: text;
-    }
-    .testimonial::before {
-      content: "“";
-      position: absolute;
-      font-size: 4rem;
-      top: -20px;
-      left: 20px;
-      color: #ff5722;
-      font-weight: 900;
-      user-select: none;
-    }
-    .testimonial p {
-      margin-bottom: 1rem;
-    }
-    .testimonial .author {
-      font-weight: 700;
-      text-align: right;
-      color: #bf360c;
-      user-select: text;
-    }
-
-    /* ===== Newsletter Signup ===== */
-    section.newsletter {
-      background: #ff5722;
-      color: white;
-      padding: 3rem 1rem 5rem;
-      text-align: center;
-      user-select: none;
-    }
-    section.newsletter h2 {
-      font-weight: 700;
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-    }
-    section.newsletter p {
-      font-weight: 500;
-      margin-bottom: 1.5rem;
-    }
-    .newsletter-form {
-      max-width: 400px;
-      margin: 0 auto;
-      display: flex;
-      gap: 0.6rem;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    .newsletter-form input {
-      padding: 0.8rem 1rem;
-      border-radius: 40px;
-      border: none;
-      flex-grow: 1;
-      font-size: 1rem;
-      outline: none;
-      font-family: inherit;
-    }
-    .newsletter-form button {
-      padding: 0.8rem 1.8rem;
-      background: #fff;
-      border: none;
-      border-radius: 40px;
-      color: #ff5722;
-      font-weight: 700;
-      box-shadow: 0 6px 15px rgb(255 87 34 / 0.8);
-      transition: background 0.3s ease;
-      user-select: none;
-      font-size: 1rem;
-      cursor: pointer;
-    }
-    .newsletter-form button:hover {
-      background: #fbe9e7;
-    }
-
-    /* ===== Modern Premium Footer ===== */
-    footer {
-      background: #fff3e0; /* Warm cream background */
-      color: #3e2723; /* Deep warm brown text */
-      padding: 4rem 2rem 2rem;
-      border-top: 1px solid rgba(255, 87, 34, 0.15);
-      user-select: text; /* Allow selecting text */
-      font-family: 'Poppins', sans-serif;
-    }
-    
-    .footer-container {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      gap: 2rem;
-      margin-bottom: 3rem;
-    }
-    
-    @media (max-width: 1024px) {
-      .footer-container {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-    
-    @media (max-width: 768px) {
-      .footer-container {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-    
-    @media (max-width: 480px) {
-      .footer-container {
-        grid-template-columns: 1fr;
-      }
-    }
-    
-    .footer-brand {
-      font-size: 1.8rem;
-      font-weight: 700;
-      color: #ff5722; /* Vibrant orange logo */
-      margin-bottom: 1rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-family: 'Poppins', sans-serif;
-    }
-    .footer-logo-img {
-      height: 40px;
-      width: 40px;
-      object-fit: cover;
-      border-radius: 50%;
-      background: white;
-      padding: 2px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-    .footer-brand:hover .footer-logo-img {
-      transform: scale(1.08);
-    }
-    
-    .footer-desc {
-      font-size: 0.95rem;
-      color: #5d4037;
-      line-height: 1.6;
-      max-width: 320px;
-    }
-    
-    .footer-column h3 {
-      font-size: 1.15rem;
-      font-weight: 700;
-      color: #bf360c; /* Deep brand orange */
-      margin-bottom: 1.25rem;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    
-    .footer-links {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-    
-    .footer-links li a {
-      color: #5d4037;
-      font-size: 0.95rem;
-      font-weight: 500;
-      transition: all 0.2s ease;
-      display: inline-block;
-    }
-    
-    .footer-links li a:hover {
-      color: #ff5722;
-      transform: translateX(3px);
-    }
-    
-    .footer-contact-info {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      color: #5d4037;
-      font-size: 0.95rem;
-    }
-    
-    .footer-contact-info li {
-      line-height: 1.5;
-    }
-    
-    .footer-contact-info strong {
-      color: #bf360c;
-    }
-    
-    .footer-social-wrapper {
-      margin-bottom: 1.5rem;
-    }
-    
-    .footer-social-icons {
-      display: flex;
-      gap: 1rem;
-      margin-top: 0.5rem;
-    }
-    
-    .footer-social-icons a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 38px;
-      height: 38px;
-      border-radius: 50%;
-      background: #ff5722;
-      color: white !important;
-      font-size: 1.1rem;
-      transition: all 0.3s ease;
-    }
-    
-    .footer-social-icons a:hover {
-      background: #bf360c;
-      transform: translateY(-3px);
-      box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
-    }
-    
-    .footer-bottom {
-      border-top: 1px solid rgba(255, 87, 34, 0.1);
-      padding-top: 1.5rem;
-      text-align: center;
-      font-size: 0.9rem;
-      color: #8d6e63;
-      font-weight: 500;
-    }
-    
-    .footer-bottom p {
-      margin: 0;
-    }
-    
-    /* Dark Mode Overrides */
-    body.dark footer {
-      background: #1e1e1e;
-      border-top-color: rgba(255, 87, 34, 0.1);
-      color: #ccc;
-    }
-    
-    body.dark .footer-desc, 
-    body.dark .footer-links li a, 
-    body.dark .footer-contact-info {
-      color: #aaa;
-    }
-    
-    body.dark .footer-links li a:hover {
-      color: #ff7b54;
-    }
-    
-    body.dark .footer-bottom {
-      border-top-color: rgba(255, 255, 255, 0.05);
-      color: #777;
-    }
-
-    /* ===== Enhanced Animations & Transitions ===== */
-    .card {
-      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-
-    .card:hover {
-      animation: cardBounce 0.6s ease-out;
-    }
-
-    @keyframes cardBounce {
-      0% {
-        transform: translateY(0);
-      }
-      50% {
-        transform: translateY(-12px);
-      }
-      100% {
-        transform: translateY(-8px);
-      }
-    }
-
-    /* Button enhancements */
-    button {
-      transition: all 0.3s ease;
-      position: relative;
-    }
-
-    .btn-primary:active,
-    .btn-add:active,
-    .filter-btn:active {
-      transform: scale(0.98);
-    }
-
-    /* Card image zoom on hover */
-    .card img {
-      transition: transform 0.4s ease;
-    }
-
-    .card:hover img {
-      transform: scale(1.05);
-    }
-
-    /* Smooth filter transitions */
-    .filter-btn {
-      transition: all 0.3s ease;
-    }
-
-    .filter-btn.active {
-      animation: filterPulse 0.5s ease;
-    }
-
-    @keyframes filterPulse {
-      0%, 100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.05);
-      }
-    }
-
-    /* Navigation link enhancements */
-    nav a {
-      position: relative;
-      overflow: hidden;
-    }
-
-    nav a:hover::after {
-      left: 0;
-    }
-
-    /* Search input enhancement */
-    .search-bar input {
-      transition: all 0.3s ease;
-    }
-
-    .search-bar input::placeholder {
-      transition: color 0.3s ease;
-    }
-
-    .search-bar input:focus::placeholder {
-      color: transparent;
-    }
-
-    /* Cart animations */
-    .cart-item {
-      animation: slideInCart 0.3s ease-out;
-    }
-
-    @keyframes slideInCart {
-      from {
-        opacity: 0;
-        transform: translateX(-20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-
-    /* Responsive button text for mobile */
-    @media (max-width: 480px) {
-      .btn-primary,
-      .btn-add {
-        padding: 0.8rem 1.5rem;
-        font-size: 0.95rem;
-      }
-    }
-
-    /* ===== Responsive ===== */
-    @media (max-width: 1024px) {
-      .hero {
-        flex-direction: column;
-        padding: 4rem 1rem 5rem;
-      }
-      .hero-content,
-      .hero-image {
-        max-width: 100%;
-      }
-      nav {
-        gap: 1rem;
-      }
-      #cart-sidebar {
-        width: 100%;
-        max-width: 400px;
-      }
-    }
-    @media (max-width: 600px) {
-      .cards {
-        flex-direction: column;
-        align-items: center;
-      }
-      .team {
-        flex-direction: column;
-        align-items: center;
-      }
-      .testimonial-cards {
-        flex-direction: column;
-        align-items: center;
-      }
-      .search-bar input {
-        width: 130px;
-      }
-      .filter-buttons {
-        gap: 0.8rem;
-      }
-    }
-
-    /*=====Team member layout Fix===*/
-
-    @media (max-width: 768px) {
-    .team-member {
-    min-width: 100%;
-    max-width: 100%;
-  }
-  }
-    /* ===== Mobile Navbar Fix ===== */
-@media (max-width: 480px) {
-
-  .header-inner {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.8rem;
-    padding: 1rem;
-  }
-
-  .logo {
-    font-size: 1.5rem;
-    text-align: center;
-  }
-
-  nav {
-    width: 100%;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  nav a {
-    padding: 0.4rem 0.7rem;
-    font-size: 0.9rem;
-  }
-
-  .search-bar {
-    margin-left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  .search-bar input {
-    width: 100%;
-    max-width: 220px;
-  }
-}
-
-/* ===== Skeleton UI ===== */
-
-/* Base skeleton element */
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    #f0e0d0 25%,
-    #ffe0c8 50%,
-    #f0e0d0 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: 8px;
-  display: block;
-}
-
-@keyframes shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* Skeleton Card — mirrors .card layout exactly */
-.skeleton-card {
-  background: white;
-  border-radius: 20px;
-  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-  width: 260px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1rem 1rem 1.8rem;
-  gap: 0.8rem;
-}
-
-.skeleton-card .sk-image {
-  width: 100%;
-  height: 170px;
-  border-radius: 15px;
-}
-
-.skeleton-card .sk-title {
-  width: 70%;
-  height: 20px;
-  border-radius: 6px;
-}
-
-.skeleton-card .sk-desc-line {
-  height: 13px;
-  border-radius: 6px;
-}
-
-.skeleton-card .sk-desc-line:nth-child(1) { width: 90%; }
-.skeleton-card .sk-desc-line:nth-child(2) { width: 75%; }
-
-.skeleton-card .sk-price {
-  width: 40%;
-  height: 16px;
-  border-radius: 6px;
-  margin-top: 0.2rem;
-}
-
-.skeleton-card .sk-btn {
-  width: 120px;
-  height: 38px;
-  border-radius: 40px;
-  margin-top: 0.4rem;
-}
-
-/* Skeleton Cart Item — mirrors .cart-item layout */
-.skeleton-cart-item {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.4rem;
-  border-radius: 15px;
-  background: white;
-  box-shadow: 0 6px 18px rgb(0 0 0 / 0.1);
-  padding: 1rem;
-  align-items: center;
-}
-
-.skeleton-cart-item .sk-thumb {
-  width: 80px;
-  height: 60px;
-  border-radius: 12px;
-  flex-shrink: 0;
-}
-
-.skeleton-cart-item .sk-lines {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.skeleton-cart-item .sk-line-name {
-  height: 14px;
-  width: 60%;
-  border-radius: 6px;
-}
-
-.skeleton-cart-item .sk-line-price {
-  height: 12px;
-  width: 35%;
-  border-radius: 6px;
-}
-
-.skeleton-cart-item .sk-line-qty {
-  height: 28px;
-  width: 90px;
-  border-radius: 6px;
-}
-
-/* ===== Autocomplete Search Suggestions ===== */
-.search-suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(100% + 20px);
-  min-width: 350px;
-  max-width: 90vw;
-  background: rgba(255, 255, 255, 0.98);
-  backdrop-filter: blur(10px);
-  border-radius: 16px;
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
-  margin-top: 0.8rem;
-  z-index: 1001;
-  overflow: hidden;
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.suggestion-item {
-  padding: 1rem 1.4rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1.5rem;
-  border-bottom: 1px solid rgba(255, 87, 34, 0.08);
-  transition: background 0.2s ease, transform 0.2s ease;
-  min-height: 50px;
-}
-
-.suggestion-item:last-child {
-  border-bottom: none;
-}
-
-.suggestion-item:hover {
-  background: rgba(255, 87, 34, 0.08);
-  transform: translateX(4px);
-}
-
-.suggestion-item:active {
-  background: rgba(255, 87, 34, 0.15);
-}
-
-.suggestion-item.no-matches {
-  color: #bf360c;
-  font-weight: 500;
-  text-align: center;
-  justify-content: center;
-  cursor: default;
-  background: transparent !important;
-  padding: 1.5rem;
-}
-
-.suggestion-name {
-  font-weight: 600;
-  color: #2c1810;
-  font-size: 1rem;
-  line-height: 1.4;
-  flex: 1;
-  min-width: 150px;
-}
-
-.suggestion-category {
-  font-size: 0.8rem;
-  background: rgba(255, 87, 34, 0.15);
-  color: #bf360c;
-  padding: 0.35rem 0.75rem;
-  border-radius: 24px;
-  font-weight: 700;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  flex-shrink: 0;
-}
-
-/* ===== Advanced Filters UI ===== */
-.filter-toggle-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-}
-
-.btn-filter-toggle {
-  background: white;
-  border: 2px solid #ff5722;
-  color: #ff5722;
-  padding: 0.6rem 1.5rem;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.1);
-}
-
-.btn-filter-toggle:hover {
-  background: #fbe9e7;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.2);
-}
-
-.btn-filter-toggle.active {
-  background: #ff5722;
-  color: white;
-  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
-}
-
-.advanced-filters {
-  max-width: 800px;
-  margin: 0 auto 3rem;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 2rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  animation: fadeIn 0.4s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.filter-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
-}
-
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.filter-group label {
-  font-weight: 700;
-  color: #bf360c;
-  font-size: 0.95rem;
-}
-
-/* Slider Custom Styles */
-.filter-group input[type="range"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-   appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: #ffe0b2;
-  outline: none;
-}
-
-.filter-group input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #ff5722;
-  cursor: pointer;
-  transition: transform 0.1s ease;
-  box-shadow: 0 0 8px rgba(255, 87, 34, 0.4);
-}
-
-.filter-group input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-#price-slider-val {
-  font-weight: 700;
-  color: #ff5722;
-}
-
-/* Selectors custom styles */
-.filter-group select {
-  padding: 0.6rem 0.8rem;
-  border-radius: 10px;
-  border: 2px solid #ffcc99;
-  background: white;
-  font-size: 0.95rem;
-  color: #5d4037;
-  outline: none;
-  cursor: pointer;
-  font-family: inherit;
-  transition: border-color 0.3s ease;
-}
-
-.filter-group select:focus {
-  border-color: #ff5722;
-}
-
-/* Dietary custom checkboxes */
-.checkbox-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  margin-top: 0.2rem;
-}
-
-.custom-checkbox {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.custom-checkbox input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  accent-color: #ff5722;
-  cursor: pointer;
-}
-
-.checkbox-label {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #5d4037 !important;
-}
-
-.filter-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 87, 34, 0.1);
-}
-
-.btn-reset-filters {
-  background: transparent;
-  border: 2px solid #bf360c;
-  color: #bf360c;
-  padding: 0.5rem 1.5rem;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
-}
-
-.btn-reset-filters:hover {
-  background: #bf360c;
-  color: white;
-  box-shadow: 0 4px 15px rgba(191, 54, 12, 0.3);
-}
-
-/* ===== Highlights & Food Metadata Styles ===== */
-mark.highlight {
-  background: #ffd54f;
-  color: #3e2723;
-  padding: 0.05rem 0.15rem;
-  border-radius: 3px;
-  font-weight: 700;
-}
-
-.card-meta {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 0.5rem;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.card-meta .rating {
-  color: #ffb300;
-}
-
-.card-meta .spice {
-  color: #bf360c;
-}
-
-.card-tags {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-top: 0.8rem;
-}
-
-.tag {
-  font-size: 0.7rem;
-  padding: 0.2rem 0.6rem;
-  border-radius: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.tag-vegan {
-  background: #e8f5e9;
-  color: #2e7d32;
-  border: 1px solid rgba(46, 125, 50, 0.2);
-}
-
-.tag-gluten-free {
-  background: #e0f7fa;
-  color: #00838f;
-  border: 1px solid rgba(0, 131, 143, 0.2);
-}
-
-/* Fix description layout on food card */
-.card-content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.card-content h3 {
-  margin-bottom: 0.4rem;
-}
-
-.card-content p {
-  font-size: 0.9rem;
-  color: #5d4037;
-  line-height: 1.4;
-  margin-bottom: auto;
-}
-
-.card-footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 1.2rem;
-  padding-top: 0.8rem;
-  border-top: 1px solid #fbe9e7;
-}
-
-.card-footer .price {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #bf360c;
-}
-
-.card-footer .add-btn {
-  background: #2e7d32;
-  color: white;
-  padding: 0.4rem 1.2rem;
-  border-radius: 50px;
-  border: none;
-  font-weight: 700;
-  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
-  transition: all 0.3s ease;
-}
-
-.card-footer .add-btn:hover {
-  background: #1b5e20;
-  box-shadow: 0 6px 15px rgba(27, 94, 32, 0.5);
-  transform: translateY(-1px);
-}
-
-/* ===== Orders Dashboard Layout ===== */
-.orders-page {
-  padding-top: 4rem;
-  padding-bottom: 5rem;
-}
-
-.orders-page h1 {
-  font-size: 2.2rem;
-  color: #bf360c;
-  margin-bottom: 2.5rem;
-  text-align: center;
-  font-weight: 700;
-}
-
-.orders-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-/* Empty Orders Page */
-.empty-orders {
-  text-align: center;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 4rem 2rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-}
-
-.empty-orders h2 {
-  font-size: 1.6rem;
-  color: #3e2723;
-  margin-bottom: 0.8rem;
-}
-
-.empty-orders p {
-  color: #5d4037;
-  font-size: 1.05rem;
-  margin-bottom: 1.5rem;
-}
-
-/* Order Progress Card */
-.order-card {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 87, 34, 0.15);
-  border-radius: 20px;
-  padding: 2rem;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.order-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 35px rgba(255, 87, 34, 0.1);
-}
-
-.order-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #fbe9e7;
-  padding-bottom: 1.2rem;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.order-meta-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.order-id {
-  font-size: 1.1rem;
-  color: #3e2723;
-}
-
-.order-date {
-  font-size: 0.85rem;
-  color: #8d6e63;
-}
-
-/* Status Badges */
-.status-badge {
-  font-size: 0.85rem;
-  font-weight: 700;
-  padding: 0.4rem 1rem;
-  border-radius: 20px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  display: inline-block;
-}
-
-.status-badge.status-pending {
-  background: #fff8e1;
-  color: #ffb300;
-  border: 1px solid rgba(255, 179, 0, 0.3);
-}
-
-.status-badge.status-preparing {
-  background: #fbe9e7;
-  color: #ff5722;
-  border: 1px solid rgba(255, 87, 34, 0.3);
-}
-
-.status-badge.status-on-the-way {
-  background: #e1f5fe;
-  color: #0288d1;
-  border: 1px solid rgba(2, 136, 209, 0.3);
-}
-
-.status-badge.status-delivered {
-  background: #e8f5e9;
-  color: #2e7d32;
-  border: 1px solid rgba(46, 125, 50, 0.3);
-}
-
-/* Graphical Progress Stepper Track */
-.order-timeline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 2rem 0 2.5rem;
-  padding: 0 1rem;
-}
-
-.timeline-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  gap: 0.5rem;
-}
-
-.step-circle {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: #e0e0e0;
-  color: #757575;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.9rem;
-  transition: all 0.4s ease;
-  border: 2px solid transparent;
-}
-
-.step-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #9e9e9e;
-  transition: all 0.4s ease;
-}
-
-/* Timeline Connectors */
-.timeline-line {
-  flex: 1;
-  height: 4px;
-  background: #e0e0e0;
-  margin-top: -1.2rem;
-  z-index: 1;
-  transition: all 0.4s ease;
-}
-
-/* Highlighted Progress Active Steps states */
-.timeline-step.active .step-circle {
-  background: #ffe0b2;
-  color: #ff5722;
-  border-color: #ff5722;
-}
-
-.timeline-step.active .step-label {
-  color: #ff5722;
-}
-
-.timeline-step.current .step-circle {
-  background: #ff5722;
-  color: white;
-  box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
-  transform: scale(1.15);
-}
-
-.timeline-step.current .step-label {
-  font-weight: 700;
-  color: #bf360c;
-}
-
-.timeline-line.active {
-  background: #ffaa66;
-}
-
-/* Order Item Row Summary Layout */
-.order-items-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  background: #fafafa;
-  border-radius: 12px;
-  padding: 1.2rem;
-  margin-bottom: 1.5rem;
-  border: 1px solid #fbe9e7;
-}
-
-.order-item-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  color: #5d4037;
-}
-
-.order-item-row span:first-child {
-  font-weight: 600;
-}
-
-.order-item-row span:last-child {
-  font-weight: 700;
-}
-
-/* Order Card Footer */
-.order-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.order-total-price {
-  font-size: 1.05rem;
-  color: #5d4037;
-}
-
-.order-total-price strong {
-  font-size: 1.3rem;
-  color: #bf360c;
-  margin-left: 0.4rem;
-}
-
-/* Reorder Button styling */
-.btn-reorder {
-  background: #ff5722;
-  color: white;
-  border: none;
-  padding: 0.6rem 1.6rem;
-  border-radius: 50px;
-  font-weight: 700;
-  font-size: 0.95rem;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.btn-reorder:hover {
-  background: #bf360c;
-  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.4);
-  transform: translateY(-1px);
-}
- 
-
-.price-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.original-price {
-  text-decoration: line-through;
-  color: gray;
-  font-size: 14px;
-}
-
-.discount-badge {
-  background-color: #ff4d4dc1;
-  color: white;
-  padding: 1.5px 4.5px;
-  border-radius: 5px;
-  font-size: 10.5px;
-  font-weight: bold;
-}
-/* ===== Dark Mode Theme ===== */
-.theme-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 68px;
-  height: 32px;
-  padding: 3px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 99px;
-  background-color: #f2f4f7;
-  cursor: pointer;
-  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
-}
-
-.theme-toggle:hover {
-  border-color: rgba(255, 87, 34, 0.3);
-}
-
-.theme-toggle:focus-visible {
-  outline: 2px solid #ff5722 !important;
-  outline-offset: 2px;
-}
-
-.theme-toggle-track {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  padding: 0 4px;
-}
-
-.theme-toggle-thumb {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #ffa726; /* vibrant orange/yellow for light mode */
-  box-shadow: 0 2px 6px rgba(255, 167, 38, 0.4);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-}
-
-.theme-toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  z-index: 2;
-  pointer-events: none;
-  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.theme-toggle-icon svg {
-  width: 13px;
-  height: 13px;
-  stroke-width: 2.5;
-}
-
-.theme-toggle-icon.sun-icon {
-  color: #ffffff; /* Active in light mode */
-}
-
-.theme-toggle-icon.moon-icon {
-  color: #8e9aa8; /* Inactive in light mode */
-}
-
-/* Dark mode specific overrides for theme toggle */
-body.dark .theme-toggle {
-  background-color: #15191e;
-  border-color: rgba(255, 255, 255, 0.05);
-  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
-}
-
-body.dark .theme-toggle-thumb {
-  transform: translateX(36px);
-  background-color: #2b3648; /* Slate blue for dark mode */
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-}
-
-body.dark .theme-toggle-icon.sun-icon {
-  color: #5f6d7e; /* Inactive in dark mode */
-}
-
-body.dark .theme-toggle-icon.moon-icon {
-  color: #ffffff; /* Active in dark mode */
-}
-
-body.dark .login-btn-nav,
-body.dark .profile-toggle {
-  background: #2b2b2b;
-  color: #ffffff;
-  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
-}
-
-body.dark .login-btn-nav:hover,
-body.dark .login-btn-nav:focus-visible,
-body.dark .profile-toggle:hover,
-body.dark .profile-toggle:focus-visible {
-  background: #3a2d27;
-  color: #ffd0c2;
-}
-
-body.dark .profile-dropdown {
-  background: #232323;
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
-}
-
-body.dark .profile-dropdown-header {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
-body.dark .profile-dropdown-name {
-  color: #ffffff;
-}
-
-body.dark .profile-dropdown-email {
-  color: #b0b7c3;
-}
-
-body.dark .profile-dropdown a,
-body.dark .profile-dropdown button {
-  color: #f3f3f3;
-}
-
-body.dark .profile-dropdown a:hover,
-body.dark .profile-dropdown a:focus-visible,
-body.dark .profile-dropdown button:hover,
-body.dark .profile-dropdown button:focus-visible {
-  background: rgba(255, 87, 34, 0.16);
-  color: #ffb39d;
-}
-
-body.dark .profile-dropdown-logout {
-  color: #ffb39d;
-}
-/* body */
-body.dark {
-  background: #1e1e1e;
-  color: #f5f5f5;
-}
-
-/* Headings  */
-body.dark h1,
-body.dark h2,
-body.dark h3,
-body.dark h4{
-  color: #ff5722;
-}
-body.dark p{
-  color: #ffab91;
-}
-
-/* Header & Navigation */
-body.dark header {
-  /* Keep orange brand background — only deepen the shadow for dark mode depth */
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
-}
-body.dark nav a {
-  color: #f5f5f5;
-}
-body.dark nav a:hover,
-body.dark nav a.active {
-  background: #ff5722;
-  box-shadow: 0 0 8px rgba(255, 87, 34, 0.8);
-}
-body.dark .dropdown-menu {
-  background: #333;
-}
-body.dark .dropdown-menu a:hover {
-  background: #ff5722;
-}
-
-/* Hero Section */
-body.dark .hero {
-  background: linear-gradient(120deg, #3b1f17, #2c150d);
-  color: #fff3e0;
-}
-body.dark .btn-primary {
-  background: #ff5722;
-  color: #fff;
-}
-body.dark .btn-primary:hover {
-  background: #e64a19;
-}
-
-/* Cards & Containers */
-body.dark .card,
-body.dark .skeleton-card,
-body.dark .skeleton-cart-item {
-  background: #2a2a2a;
-  color: #eee;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-}
-body.dark .card h3 {
-  color: #ff5722;
-}
-body.dark .card p.price {
-  color: #ffab91;
-}
-body.dark .card p.description {
-  color: #ccc;
-}
-
-/* Sections */
-body.dark section.menu,
-body.dark section.specials,
-body.dark section.about,
-body.dark section.testimonials {
-  background: #252525;
-  color: #eee;
-}
-body.dark .filter-btn {
-  background: transparent;
-  border: 2px solid #ff5722;
-  color: #ff5722;
-}
-body.dark .filter-btn.active,
-body.dark .filter-btn:hover {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Cart Sidebar */
-body.dark #cart-sidebar {
-  background: #2b2b2b;
-  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.6);
-}
-body.dark #cart-header {
-  background: #ff5722;
-}
-body.dark .cart-item {
-  background: #333;
-}
-
-body.dark #checkout-btn {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Forms */
-body.dark section.contact {
-  background: #252525;
-  color: #eee;
-}
-body.dark section.contact h2 {
-  color: #ff5722;
-}
-body.dark form.contact-form {
-  background: #2b2b2b;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-body.dark form.contact-form input,
-body.dark form.contact-form textarea {
-  background: #1e1e1e;
-  color: #f5f5f5;
-  border-color: #444;
-}
-body.dark form.contact-form label {
-  color: #ffab91;
-}
-body.dark .btn-submit {
-  background: #ff5722;
-}
-
-/* Testimonials */
-body.dark .testimonial {
-  background: #2a2a2a;
-  color: #ddd;
-}
-body.dark .testimonial::before {
-  color: #ff5722;
-}
-
-/* Newsletter */
-body.dark section.newsletter {
-  background: #2c2c2c;
-  color: #fff;
-}
-body.dark .newsletter-form button {
-  background: #ff5722;
-  color: #fff;
-}
-
-/* Footer */
-body.dark footer {
-  background: #111;
-  color: #eee;
-}
-body.dark .social-icons a:hover {
-  color: #ff5722;
-}
-
-/* Skeleton Animation background  */
-body.dark .skeleton {
-  background: linear-gradient(
-    90deg,
-    #534949 25%,
-    #444 50%,
-    #3a3a3a 75%
-  );
-}
-
-/* Dark Mode Search Bar overrides */
-body.dark .search-bar input {
-  background-color: #2c2c2c;
-  color: #f5f5f5;
-  border-color: rgba(255, 255, 255, 0.12);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-body.dark .search-bar input::placeholder {
-  color: #8d6e63;
-}
-body.dark .search-bar input:hover {
-  border-color: rgba(255, 87, 34, 0.4);
-}
-body.dark .search-bar input:focus {
-  background-color: #1e1e1e;
-  border-color: #ff5722;
-  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-body.dark .search-bar button {
-  color: #ff5722;
-}
-body.dark .search-bar button:hover {
-  background-color: rgba(255, 87, 34, 0.15);
-}
-body.dark .search-bar button:hover .search-svg {
-  stroke: #ff7b54;
-}
-body.dark .search-suggestions {
-  background: rgba(30, 30, 30, 0.98);
-  border-color: rgba(255, 87, 34, 0.3);
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
-}
-body.dark .suggestion-item {
-  border-bottom: 1px solid rgba(255, 87, 34, 0.12);
-}
-body.dark .suggestion-name {
-  color: #eee;
-}
-body.dark .suggestion-category {
-  color: #ffab91;
-}
-body.dark .suggestion-item:hover {
-  background: rgba(255, 87, 34, 0.15);
-}
-body.dark .suggestion-item.no-matches {
-  color: #ff7b54;
-}
-
-/* Dark Mode Cart Button overrides */
-body.dark .cart-btn-modern {
-  background: rgba(255, 255, 255, 0.05) !important;
-  border-color: rgba(255, 255, 255, 0.12) !important;
-}
-body.dark .cart-btn-modern:hover {
-  background: #ff5722 !important;
-  border-color: #ff7b54 !important;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4) !important;
-}
-body.dark .cart-btn-modern.active {
-  background: #ff5722 !important;
-  border-color: #ff7b54 !important;
-  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3) !important;
-}
-body.dark .cart-badge {
-  background-color: #ffb300;
-  border-color: #ff5722;
-  color: #1e1e1e;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  background: #fff3e0;
-}
-::-webkit-scrollbar-thumb {
-  background: #ff5722;
-  border-radius: 999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #e64a19;
-}
-/*Accessibility Styles */
-
-/* ===== Accessibility Styles ===== */
-
-
-/* Skip link - visible on focus */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: #ff5722;
-  color: white;
-  padding: 0.6rem 1rem;
-  text-decoration: none;
-  z-index: 10000;
-  border-radius: 0 0 8px 0;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
-/* Enhanced focus states for keyboard navigation */
-body.keyboard-nav button:focus,
-body.keyboard-nav a:focus,
-body.keyboard-nav input:focus,
-body.keyboard-nav textarea:focus,
-body.keyboard-nav select:focus {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Focus states for all interactive elements */
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-/* Card focus state */
-.card:focus {
-  outline: 3px solid #ff5722;
-  outline-offset: 2px;
-  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
-}
-
-/* Search suggestion focused state */
-.suggestion-item.focused {
-  background: #ffe0d0;
-  color: #3e3e3e;
-}
-
-.suggestion-item:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 1px;
-}
-
-/* Improved focus for navigation links */
-nav a:focus-visible {
-  box-shadow: 0 0 8px #ff5722;
-}
-
-/* Filter button focus state */
-.filter-btn:focus-visible,
-.menu-filter:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Checkbox and radio focus states */
-input[type="checkbox"]:focus-visible,
-input[type="radio"]:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* Range slider focus state */
-input[type="range"]:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 4px;
-}
-
-/* Select dropdown focus state */
-select:focus-visible {
-  outline: 2px solid #ff5722;
-  outline-offset: 2px;
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: more) {
-  button:focus-visible,
-  a:focus-visible,
-  input:focus-visible,
-  textarea:focus-visible,
-  select:focus-visible {
-    outline-width: 4px;
-  }
-
-  .card:focus {
-    outline-width: 4px;
-    box-shadow: 0 0 30px rgba(255, 87, 34, 0.8);
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Note: theme switching is handled via body.dark class (see auth.js setupThemeToggle) */
-
-
-/* Improve contrast of disabled buttons */
-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Out of Stock Badge */
-.out-of-stock-badge {
-  background-color: #6c757d !important;  /* Grey color */
-  color: white;
-  padding: 5px 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 600;
-  display: inline-block;
-  margin: 10px 0 5px 0;
-  letter-spacing: 0.5px;
-  text-align: center;
-  width: fit-content;
-}
-
-/* Disabled button styling */
-.add-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  background-color: #cccccc !important;
-  transform: none !important;
-}
-
-/* Hover effect for disabled button */
-.add-btn:disabled:hover {
-  transform: none !important;
-  opacity: 0.6;
-}
-
-
-/* ===== Loyalty Wallet Styles ===== */
-.cart-loyalty-widget {
-  background: #ffffff;
-  border: 1px dashed #ff9800;
-  border-radius: 16px;
-  padding: 1.2rem;
-  margin: 1.5rem 0;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-body.dark .cart-loyalty-widget {
-  background: #2a2a2a;
-  border-color: #f57c00;
-  color: #fff;
-}
-
-.loyalty-widget-header {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  margin-bottom: 0.8rem;
-}
-
-.loyalty-icon {
-  font-size: 1.6rem;
-  filter: drop-shadow(0 2px 5px rgba(255, 152, 0, 0.4));
-  animation: pulse-gold 2s infinite ease-in-out;
-}
-
-@keyframes pulse-gold {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.15); }
-  100% { transform: scale(1); }
-}
-
-.loyalty-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.loyalty-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #bf360c;
-}
-
-body.dark .loyalty-title {
-  color: #ff7a45;
-}
-
-.loyalty-desc {
-  font-size: 0.85rem;
-  color: #5d4037;
-}
-
-body.dark .loyalty-desc {
-  color: #ccc;
-}
-
-.loyalty-redeem-action {
-  border-top: 1px solid #ffe0b2;
-  padding-top: 0.8rem;
-}
-
-body.dark .loyalty-redeem-action {
-  border-top-color: #444;
-}
-
-/* Switch Toggle Styling */
-.loyalty-toggle {
-  display: flex;
-  align-items: center;
-   cursor: pointer;
-  user-select: none;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #bf360c;
-  gap: 0.6rem;
-}
-
-body.dark .loyalty-toggle {
-  color: #ff7a45;
-}
-
-.loyalty-toggle input {
-  display: none;
-}
-
-.toggle-slider {
-  position: relative;
-  width: 44px;
-  height: 22px;
-  background-color: #ccc;
-  border-radius: 34px;
-  transition: .3s;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  border-radius: 50%;
-  transition: .3s;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
-
-.loyalty-toggle input:checked + .toggle-slider {
-  background-color: #4caf50;
-}
-
-.loyalty-toggle input:checked + .toggle-slider:before {
-  transform: translateX(22px);
-}
-
-.loyalty-empty-message {
-  font-size: 0.8rem;
-  color: #795548;
-  font-style: italic;
-  margin-top: 0.4rem;
-}
-
-body.dark .loyalty-empty-message {
-  color: #aaa;
-}
-
-/* Cart Total Breakdown */
-.cart-total-breakdown {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  padding: 0.5rem 0;
-  margin-left: 0.4rem;
-  transition: 0.3s ease;
-}
-
-.breakdown-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #5d4037;
-}
-
-body.dark .breakdown-row {
-  color: #ccc;
-}
-
-.breakdown-row.discount {
-  color: #e64a19;
-}
-
-.breakdown-row.final {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: #bf360c;
-  border-top: 1px solid #ffcc80;
-  padding-top: 0.5rem;
-  margin-top: 0.2rem;
-}
-
-body.dark .breakdown-row.final {
-  color: #ff7a45;
-  border-top-color: #555;
-}
-
-
-/* ===== Combo Add Button ===== */
-
-.lang-toggle-btn {
-  background: linear-gradient(135deg, #ff6200, #ff8c00);
-  color: #fff;
-  border: none;
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: 'Poppins', sans-serif;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  white-space: nowrap;
-  margin-left: 8px;
-}
-.lang-toggle-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(255, 98, 0, 0.35);
-}
-
-/* ===== Responsive Navbar Spacing & Overlap Fixes ===== */
-@media (max-width: 1200px) {
-  .logo {
-    font-size: 1.5rem !important;
-    margin-right: 1rem !important;
-  }
-  .navbar-logo-img {
-    height: 34px !important;
-    width: 34px !important;
-  }
-  nav {
-    gap: 0.8rem !important;
-  }
-  nav a {
-    padding: 0.4rem 0.6rem !important;
-    font-size: 0.9rem !important;
-  }
-  .cart-btn-modern {
-    padding: 0.3rem 0.8rem !important;
-  }
-}
-
-@media (max-width: 950px) {
-  .header-inner {
-    flex-direction: column !important;
-    gap: 1rem !important;
-    padding: 1rem 1rem !important;
-  }
-  .logo {
-    margin-right: 0 !important;
-  }
-  nav {
-    flex-wrap: wrap !important;
-    justify-content: center !important;
-    gap: 0.8rem !important;
-    width: 100% !important;
-  }
-}
-
-
-#voice-search-btn{
-  border: none;
-  background: #ff7043;
-  color: white;
-  padding: 0.6rem 0.9rem;
-  border-radius: 8px;
-  cursor: pointer;
-  margin-left: 0.4rem;
-  transition: 0.3s ease;
-}
-
-#voice-search-btn:hover {
-  background: #f4511e;
-}
-
-#voice-search-btn.listening {
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scale(1.12);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-/* ===== Combo Add Button ===== */
-
-.combo-add-btn {
-  background: #ff5722;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 30px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: 0.3s ease;
-}
-
-.combo-add-btn:hover {
-  background: #e64a19;
-  transform: scale(1.05);
-}
-.combo-item-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-
-/* ===== Cinematic Video Hero ===== */
-.hero {
-  position: relative;
-  width: 100%;
-  min-height: calc(100vh - var(--header-height, 90px));
-  height: calc(100vh - var(--header-height, 90px));
-  padding: 0 8%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  margin-bottom: 0;
-  background: #130a06;
-  text-align: left;
-}
-
-.hero-video-stage,
-.hero-bg-video,
-.hero-overlay {
-  position: absolute;
-  inset: 0;
-}
-
-.hero-video-stage {
-  z-index: 1;
-  background: #130a06;
-  overflow: hidden;
-}
-
-.hero-video,
-.hero-bg-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0;
-  transform: scale(1.04);
-  transition: opacity 1.25s ease, transform 7s ease;
-  will-change: opacity, transform;
-}
-
-.hero-bg-video.active {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.hero-overlay {
-  z-index: 2;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.70) 0%,
-    rgba(0, 0, 0, 0.45) 45%,
-    rgba(0, 0, 0, 0.20) 100%
-  );
-}
-
-.hero-content {
-  position: relative;
-  z-index: 3;
-  flex: 0 0 min(650px, 52vw);
-  max-width: 650px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin: 0;
-  text-align: left;
-  color: #ffffff;
-}
-
-.hero-badge,
-.hero-secondary-btn,
-.hero-stat-card {
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
-}
-
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  width: fit-content;
-  margin-bottom: 1.4rem;
-  padding: 0.62rem 1rem;
-  border-radius: 999px;
-  color: rgba(255, 255, 255, 0.94);
-  font-size: 0.95rem;
-  font-weight: 700;
-  animation: heroFadeUp 0.75s ease both;
-}
-
-.hero-title,
-.hero-content h1 {
-  margin: 0 0 1.35rem;
-  color: #ffffff;
-  font-size: clamp(2.75rem, 4.4vw, 4.75rem);
-  font-weight: 800;
-  line-height: 1.05;
-  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52);
-  letter-spacing: 0;
-  animation: heroFadeUp 0.85s ease 0.08s both;
-}
-
-.hero-content p {
-  max-width: 550px;
-  margin: 0;
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 1.1rem;
-  font-weight: 500;
-  line-height: 1.8;
-  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  animation: heroFadeUp 0.85s ease 0.2s both;
-}
-
-.hero-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 20px;
-  flex-wrap: wrap;
-  margin-top: 30px;
-  animation: heroFadeUp 0.85s ease 0.4s both;
-}
-
-.hero-primary-btn,
-.hero-secondary-btn {
-  min-width: 154px;
-  min-height: 54px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  padding: 0.95rem 1.65rem;
-  font-size: 1rem;
-  font-weight: 800;
-  line-height: 1;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
-}
-
-.hero-primary-btn {
-  background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%);
-  color: #ffffff;
-  box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38);
-}
-
-.hero-primary-btn:hover,
-.hero-primary-btn:focus-visible {
-  background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%);
-  transform: translate3d(0, -3px, 0);
-  box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5);
-}
-
-.hero-secondary-btn {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.46);
-}
-
-.hero-secondary-btn:hover,
-.hero-secondary-btn:focus-visible {
-  transform: translate3d(0, -3px, 0);
-  border-color: rgba(255, 255, 255, 0.75);
-  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
-}
-
-.hero-stats {
-  position: absolute;
-  z-index: 3;
-  top: 50%;
-  right: 8%;
-  width: 300px;
-  min-width: 0;
-  height: 370px;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.hero-stat-card {
-  position: absolute;
-  width: 230px;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 0.95rem 1.05rem;
-  border-radius: 18px;
-  color: #ffffff;
-  animation: heroFloat 5.5s ease-in-out infinite;
-  will-change: transform;
-}
-
-.hero-stat-card strong {
-  display: block;
-  color: #ffffff;
-  font-size: 1.1rem;
-  line-height: 1.1;
-}
-
-.hero-stat-card span:last-child {
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 0.9rem;
-  font-weight: 700;
-}
-
-.hero-stat-icon {
-  width: 42px;
-  height: 42px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 42px;
-  border-radius: 50%;
-  background: rgba(255, 122, 31, 0.2);
-}
-
-.hero-stat-rating {
-  top: 0;
-  right: 0;
-}
-
-.hero-stat-delivery {
-  top: 130px;
-  right: 58px;
-  animation-delay: 0.8s;
-}
-
-.hero-stat-orders {
-  top: 260px;
-  right: 0;
-  animation-delay: 1.6s;
-}
-
-.hero-scroll-indicator {
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  bottom: 2rem;
-  width: 28px;
-  height: 46px;
-  display: inline-flex;
-  justify-content: center;
-  border: 1.5px solid rgba(255, 255, 255, 0.72);
-  border-radius: 999px;
-  transform: translateX(-50%);
-}
-
-.hero-scroll-indicator span {
-  width: 5px;
-  height: 5px;
-  margin-top: 9px;
-  border-radius: 50%;
-  background: #ffffff;
-  animation: heroScrollDot 1.6s ease-in-out infinite;
-}
-
-body.dark .hero {
-  background: #130a06;
-  color: #ffffff;
-}
-
-body.dark .hero-content h1,
-body.dark .hero-content p {
-  color: #ffffff;
-}
-
-body.dark .hero-content p {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.specials,
-.menu,
-.specials-section,
-.menu-section {
-  position: relative;
-  z-index: 5;
-}
-
-@keyframes heroFadeUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 26px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes heroFloat {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  50% {
-    transform: translate3d(0, -14px, 0);
-  }
-}
-
-@keyframes heroScrollDot {
-  0% {
-    opacity: 0;
-    transform: translateY(0);
-  }
-
-  35% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-@media (max-width: 1024px) {
-  .hero {
-    padding: 0 6%;
-  }
-
-  .hero-stats {
-    right: 4%;
-    opacity: 0.92;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero {
-    min-height: calc(100vh - var(--header-height, 90px));
-    height: auto;
-    padding: 3.5rem 1.25rem 4.5rem;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    flex-direction: column;
-  }
-
-  .hero-overlay {
-    background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0.62) 0%,
-      rgba(0, 0, 0, 0.46) 48%,
-      rgba(0, 0, 0, 0.66) 100%
-    );
-  }
-
-  .hero-content {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-  }
-
-  .hero-badge,
-  .hero-actions {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .hero-title,
-  .hero-content h1 {
-    font-size: clamp(2.45rem, 11vw, 3.65rem);
-    line-height: 1.05;
-  }
-
-  .hero-content p {
-    margin-left: auto;
-    margin-right: auto;
-    font-size: 1.02rem;
-    line-height: 1.7;
-  }
-
-  .hero-actions {
-    flex-direction: column;
-    width: min(100%, 360px);
-  }
-
-  .hero-primary-btn,
-  .hero-secondary-btn {
-    width: 100%;
-  }
-
-  .hero-stats {
-    position: relative;
-    top: auto;
-    right: auto;
-    width: min(100%, 360px);
-    min-width: 0;
-    margin: 2.2rem auto 0;
-    transform: none;
-    display: grid;
-    gap: 0.7rem;
-  }
-
-  .hero-stat-card {
-    position: static;
-    min-width: 0;
-    width: 100%;
-    justify-content: flex-start;
-    border-radius: 16px;
-    animation-duration: 4.8s;
-  }
-}
-
-@media (max-width: 480px) {
-  .hero {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .hero-badge {
-    font-size: 0.82rem;
-    padding: 0.55rem 0.82rem;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .hero-bg-video,
-  .hero-badge,
-  .hero-content h1,
-  .hero-content p,
-  .hero-actions,
-  .hero-stat-card,
-  .hero-scroll-indicator span{
-    animation: none !important;
-    transition: none !important;
-  }
-}
\ No newline at end of file