/* =================================
   Navbar Base & Desktop Styles
   ================================= */
/* Global styles from your original CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* NEW: Added responsive variables for fluid scaling */
:root {
    --nav-padding-x: clamp(1rem, 2.5vw, 2rem); /* Responsive horizontal padding */
    --nav-gap: clamp(1rem, 2vw, 1.5rem); /* Responsive gap between major elements */
    --menu-item-font-size: clamp(0.875rem, 1.2vw, 1rem); /* Responsive font size for menu items */
    --menu-item-padding-y: clamp(0.6rem, 1vw, 0.75rem);
    --menu-item-padding-x: clamp(0.75rem, 1.2vw, 1rem);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #f8f9fa; /* Slightly lighter background */
}

/* --- (ENHANCED) Navbar Container --- */
.navbar {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #dee2e6; /* Softer border */
    padding: 12px var(--nav-padding-x); /* UPDATED: Using responsive padding */
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: var(--nav-gap); /* UPDATED: Using responsive gap */
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: 48px; /* Slightly larger logo */
    width: auto;
    display: block;
}

/* --- (ENHANCED) Main Menu --- */
.menu {
    flex-grow: 1;
    flex-shrink: 1; /* Allow the menu to shrink to balance with the right side */
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem; /* Increased gap */
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
    min-width: 0;
    -webkit-mask-image: linear-gradient(to right, black 93%, transparent 100%);
    mask-image: linear-gradient(to right, black 93%, transparent 100%);
}

/* NEW: This span wraps the menu item text to allow for truncation */
.menu-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Allow the label to shrink and truncate properly */
}

/* MODIFIED: Adjusted dropbtn styles for responsiveness */
.menu .dropdown .dropbtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x); /* UPDATED: Using responsive padding */
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: var(--menu-item-font-size); /* UPDATED: Using responsive font size */
    font-weight: 500;
    color: #343a40; /* Darker text for better contrast */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
    overflow: hidden;
    max-width: 180px;
}

/* Adding an underline indicator */
.menu .dropdown .dropbtn::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #0d6efd; /* Bootstrap primary blue */
    border-radius: 2px;
    transition: width 0.3s ease;
}

.menu .dropdown:hover .dropbtn::after {
    width: 60%;
}

.menu .dropdown .dropbtn:hover {
    background-color: #e9ecef; /* Lighter gray feedback */
    color: #0d6efd;
}

/* MODIFIED: Dropdown Icon Styling for SVG */
.menu .dropdown .dropbtn .dropdown-arrow {
    width: 16px;
    height: 16px;
    color: #6c757d;
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

.dropdown:hover .dropbtn .dropdown-arrow {
    transform: rotate(180deg);
    color: #0d6efd;
}

/* --- (REDESIGNED) Cascading Submenu --- */
.submenu-box {
    position: absolute;
    top: calc(100% + 4px); /* Decreased gap for a tighter look */
    transform-origin: top left; /* UPDATED: Animation origin for correct positioning */
    width: max-content; /* Let the content define the width */
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 8px 32px -4px rgba(0,0,0,0.1), 0 4px 12px -2px rgba(0,0,0,0.06);
    padding: 6px; /* Tighter padding around panels */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98) translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    z-index: 200;
    display: flex;
    align-items: stretch;
}

.submenu-box.visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.submenu-panel {
    flex: 1 1 auto; /* Allow panels to grow/shrink */
    min-width: 200px; /* UPDATED: Set a minimum width */
    max-width: 280px; /* UPDATED: Set a maximum width */
    overflow-y: auto;
    border-right: 1px solid #e9ecef;
    scrollbar-width: thin;
    scrollbar-color: #ced4da #f8f9fa;
}
.submenu-panel:last-child { border-right: none; }
.submenu-panel ul { list-style: none; padding: 4px; margin: 0; }

.submenu-panel li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px; /* Adjusted padding */
    margin: 2px 0;
    color: #343a40; /* Darker text */
    text-decoration: none;
    border-radius: 8px; /* Softer radius */
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: normal; /* UPDATED: Allow text to wrap */
    line-height: 1.4; /* UPDATED: Improve spacing for wrapped text */
}

.submenu-panel li a:hover {
    background-color: #f1f3f5; /* Subtle gray hover */
    color: #0d6efd;
}

.submenu-panel li.active > a {
    background-color: #e7f1ff;
    color: #0a58ca;
    font-weight: 600;
}

.submenu-panel li.has-children a::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .65em; /* Smaller arrow */
    color: #adb5bd;
    transition: color 0.15s ease;
}

.submenu-panel li a:hover::after { color: #0d6efd; }
.submenu-panel li.active > a::after { color: #0a58ca; }


/* --- Right Side of Navbar --- */
.nav-right {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.5vw, 1.5rem); /* Make gap responsive */
    margin-left: auto;
}

/* --- (ENHANCED) Search Box --- */
.search-box {
  position: relative;
  min-width: 150px;
  flex-shrink: 1;
}
.search-box input {
  width: 100%;
  max-width: 280px;
  padding: 10px 45px 10px 18px;
  border-radius: 25px;
  border: 1px solid #ced4da;
  height: 42px;
  box-sizing: border-box;
  font-size: 15px;
  transition: all 0.3s ease;
}
.search-box input:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: #f8f9fa;
}
.search-box button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.search-box button:hover {
    color: #0d6efd;
}

/* --- Styles for the Suggestions Box --- */
.suggestions-box {
  position: absolute;
  top: 105%;
  left: 0;
  width: 350px;
  max-height: 225px;
  overflow-y: auto;
  background: #fff8e1;
  border: 1px solid #ffecb3;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  z-index: 101;
  display: none;
  box-sizing: border-box;
}

/* --- Styles for individual suggestion items --- */
.suggestion-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: #374151;
  overflow: hidden;
  background-color: #ffffff;
}
.suggestion-item:hover {
  background-color: #e3f2fd;
}

.suggestion-item img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 6px;
  background-color: #f3f4f6;
  flex-shrink: 0;
}

.suggestion-item span {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

/* --- Improved Scrollbar Styling --- */
.submenu-box, .submenu-panel {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.submenu-box::-webkit-scrollbar, .submenu-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.submenu-box::-webkit-scrollbar-thumb, .submenu-panel::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 6px;
}
.submenu-box::-webkit-scrollbar-thumb:hover, .submenu-panel::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}
.submenu-box::-webkit-scrollbar-track, .submenu-panel::-webkit-scrollbar-track {
    background-color: transparent;
}

/* --- Other styles (Track button, Profile, etc.) --- */
:root{--idle1:#5694d0;--idle2:#3a6ea5;--act1:#ffc107;--act2:#ff8c00;--shadow:rgba(0,0,0,.12);--dur:1.2s;}
.track-btn{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;overflow:hidden;text-decoration:none;user-select:none;cursor:pointer;padding:10px 14px 10px 40px;border-radius:14px;color:#fff;font:600 .9rem/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(135deg,var(--idle1),var(--idle2));box-shadow:0 2px 8px var(--shadow);transition:transform .18s ease,box-shadow .18s ease,background .3s ease;}
.track-btn:hover,.track-btn:focus-visible{transform:translateY(-1px);background:linear-gradient(135deg,var(--act1),var(--act2));box-shadow:0 4px 12px var(--shadow);}
.track-btn .label{position:relative;z-index:2;transition:transform var(--dur) ease;}
.truck{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:3;color: rgba(255,255,255,0.9);}
.wheel{position:absolute;bottom:-1px;width:6px;height:6px;border-radius:50%;background:#111;box-shadow:inset 0 0 0 1px #fff;opacity:.95;}
.w1{left:0;} .w2{right:0;}
.road{position:absolute;left:36px;right:10px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.7) 0 25%,transparent 25% 50%) repeat-x;background-size:24px 2px;opacity:0;z-index:1;}
.progress{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.06) 100%);background-size:200% 100%;opacity:0;}
.smoke{position:absolute;left:-6px;bottom:1px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(.3px);opacity:0;}
.track-btn:hover .truck,.track-btn:focus-visible .truck{animation:drive var(--dur) cubic-bezier(.2,.7,.2,1) forwards;}
.track-btn:hover .wheel,.track-btn:focus-visible .wheel{animation:spin calc(var(--dur)*.6) linear infinite;}
.track-btn:hover .road,.track-btn:focus-visible .road{animation:roadMove calc(var(--dur)*.7) linear infinite;opacity:.35;}
.track-btn:hover .progress,.track-btn:focus-visible .progress{animation:fill var(--dur) ease-out forwards,shimmer calc(var(--dur)*.9) linear infinite;opacity:.8;}
.track-btn:hover .s1,.track-btn:focus-visible .s1{animation:puff var(--dur) ease-out .05s 1;}
.track-btn:hover .s2,.track-btn:focus-visible .s2{animation:puff var(--dur) ease-out .18s 1;}
.track-btn:hover .label,.track-btn:focus-visible .label{transform:translateX(-20px);}
@keyframes drive{0%{transform:translate(0,-50%);}65%{transform:translate(88px,-50%);}100%{transform:translate(96px,-50%);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes roadMove{to{background-position-x:-48px;}}
@keyframes fill{from{opacity:0;}to{opacity:.8;}}
@keyframes shimmer{to{background-position:200% 0;}}
@keyframes puff{0%{transform:translateX(0) scale(.6);opacity:0;}15%{opacity:.8;}100%{transform:translateX(-14px) translateY(-5px) scale(1.1);opacity:0;}}
@media (prefers-reduced-motion:reduce){.track-btn,.track-btn *{animation:none!important;transition:none!important;transform:none!important;}}

.category-flyout{
    position:relative;
    margin-right: 8px;
    flex-shrink: 0;
}

.profile-container{position:relative;display:inline-block;}
.hamburger, .mobile-menu-panel, .mobile-search-icon { display: none; }

/* UPDATED: Staged responsive breakpoints for a smoother transition */
@media(max-width: 1480px) {
    .track-btn .label {
        display: none;
    }
    .track-btn {
        padding: 10px;
        width: 42px;
        height: 42px;
        justify-content: center;
    }
    .track-btn .truck {
        position: static;
        transform: none;
        left: auto;
        top: auto;
    }
    .track-btn:hover .truck, .track-btn:focus-visible .truck { animation: none; }
    .track-btn .road, .track-btn .progress, .track-btn .smoke { display: none; }
}

@media(max-width: 1200px) {
    .menu {
        display: none;
    }
}

@media(max-width: 1024px) {
    .search-box,
    .track-btn,
    .profile-container,
    .category-flyout {
        display: none;
    }
    .navbar {
        justify-content: space-between;
    }
    .hamburger,
    .mobile-search-icon {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* ---------- Profile dropdown (Corrected & Consolidated) ---------- */
.profile-container {
  position: relative;
  display: inline-block;
}

.profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px;
  color: #333;
  transition: color .2s;
}

.profile-icon:hover {
  color: #007bff;
}

.profile-icon.profile-initial {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid #475569;
  color: #334155;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .15s, color .15s, transform .25s, box-shadow .25s;
  animation: fadeInIcon .5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInIcon {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

.profile-icon.profile-initial:hover {
  background: #334155;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(51, 65, 85, .2);
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: -15px;
  margin-top: 1rem;
  min-width: 230px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 1000;
  list-style: none;
  margin-left: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease;
}

.profile-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.profile-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 33px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

/* MODIFIED: Styling for SVG icons in dropdown */
.profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}

.profile-dropdown a svg {
    width: 18px;
    height: 18px;
    color: #4b5563;
    transition: color .2s ease;
}

.profile-dropdown a:hover {
  background: #f5f5f5;
  color: #007bff;
}

.profile-dropdown a:hover svg {
    color: #007bff;
}

.dropdown-divider {
  margin: 5px 0;
  border-color: #eee;
}

/* NEW: Default styles for the cart icon to prevent page-specific conflicts */
.cart-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155; /* A neutral dark color */
    position: relative; /* For badge positioning */
    transition: color 0.2s ease;
}

.cart-icon-wrapper:hover {
    color: #0d6efd; /* Same blue as other interactive elements */
}

.cart-icon {
    width: 26px; /* A slightly larger, more visible size */
    height: 26px;
}

#category-flyout-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-top:6px   ;
    transition: transform 0.2s ease-in-out;
    margin-left: 10px;
}
#category-flyout-trigger:hover { transform: scale(1.1); }
.hamburger-icon .line {
    fill: #fd7e14;
    transform-origin: center;
    transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
}
#category-flyout-trigger:hover .hamburger-icon .line { fill: #e8730a; }
#category-flyout-trigger:hover .hamburger-icon .top,
#category-flyout-trigger:hover .hamburger-icon .bottom { transform: scaleX(0.7); }
#category-flyout-trigger:hover .hamburger-icon .middle { transform: scaleX(1.1); }

/* ---------- All Categories: cascading flyout ---------- */
.category-flyout { position: relative; margin-right: 14px; }
.category-flyout-panel {
  position: absolute; top: 100%; left: 0;
  display: none;
  width: auto;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  z-index: 300;
}
.category-flyout:hover > .category-flyout-panel,
.category-flyout.open > .category-flyout-panel { display: block; }

.category-flyout-head { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #eee; }
#category-flyout-search { flex:1; padding:8px 10px; border:1px solid #e5e5e5; border-radius:6px; }

.category-breadcrumbs { display:flex; gap:8px; font-size:13px; color:#666; white-space:nowrap; overflow:auto; }
.category-breadcrumbs a { color:#0b67ff; text-decoration:none; }
.category-breadcrumbs .sep { color:#aaa; }

.flyout-columns{
  display:flex;
  min-height:360px;
  max-height:520px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
}
.flyout-panel{
  flex:0 0 280px;
  max-width:320px;
  border-right:1px solid #eee;
  overflow:auto;
}
.flyout-panel:last-child{ border-right:none; }

.flyout-panel ul{ list-style:none; padding:8px; margin:0; }
.flyout-panel li a{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; text-decoration:none; color:#222; border-radius:6px; font-size:14px;
}
.flyout-panel li a:hover{ background:#f5f7fb; }
.flyout-panel li.active > a{ background:#eaf2ff; color:#0b67ff; font-weight:600; }
.flyout-panel li.has-children a::after{ content:"\f054"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:.7em; color:#aaa; }

@media (max-width:1024px){ .category-flyout, .category-flyout-panel { display:none; } }


.flyout-panel {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f1f5f9;
}

.flyout-panel::-webkit-scrollbar {
  width: 10px;
}

.flyout-panel::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 10px;
  margin-block: 4px;
}

.flyout-panel::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 10px;
  border: 2px solid #f9fafb;
}

.flyout-panel::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

@media (min-width:1024px) {
  .cart-icon-wrapper{
    margin-right: 20px;
  }  
  .logo{
    margin-left: 20px;
  }
}

/* ---------- Mobile ---------- */
.mobile-search-overlay , .mobile-search-icon { display:none; }

@media (max-width:1024px) {
  .menu, .search-box, .track-btn, .profile-container { display: none; }
  .navbar { padding: 8px 16px; justify-content: space-between; }
  .logo img { height: 40px; }
  .nav-right { gap: 0.75rem; }
  .cart-icon-wrapper, .mobile-search-icon, .hamburger {
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; font-size:1.5rem; color:#333; cursor:pointer;
    padding:8px; width:40px; height:40px;
  }

  .mobile-search-overlay {
    display:flex; flex-direction:column; position:fixed; top:0; left:0; width:100%; height:100%;
    background:white; z-index:2000; opacity:0; visibility:hidden; transition: opacity .3s, visibility 0s .3s;
  }
  .mobile-search-overlay.open { opacity:1; visibility:visible; transition: opacity .3s; }
  .mobile-search-header { display:flex; align-items:center; padding:8px 12px; border-bottom:1px solid #e5e5e5; }
  .mobile-search-form { flex-grow:1; display:flex; }
  #mobile-search-input { width:100%; border:none; outline:none; font-size:1.1rem; padding:10px; }
  .mobile-search-form button, .mobile-search-close { background:none; border:none; color:#555; }
  .mobile-search-suggestions { overflow-y:auto; flex-grow:1; }

  .mobile-menu-panel {
    display:flex; flex-direction:column; position:fixed; top:0; right:0; width:85vw; max-width:340px; height:100vh;
    background:#f8f9fa; box-shadow: -5px 0 25px rgba(0,0,0,0.15); z-index:3000; overflow-y:auto; padding:0;
    visibility:hidden; transform:translateX(100%); transition: transform .35s cubic-bezier(.25,.46,.45,.94), visibility 0s .35s;
  }
  .mobile-menu-panel.open { visibility:visible; transform:translateX(0); }
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid white;
}



/* === Sticky Navbar Fix === */
}