:root {
       --primary-color: #000;
       --secondary-color: #fff;
       --accent-color: #3b82f6;
       --accent-hover: #2563eb;
       --accent-secondary: #8b5cf6;
       --accent-tertiary: #ec4899;
       --gray-light: #f8f9fa;
       --gray-medium: #e9ecef;
       --gray-dark: #6c757d;
       --border-color: #dee2e6;
       --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       --transition: all 0.3s ease;
       --font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
         "Open Sans", "Helvetica Neue", sans-serif;
       --header-height: 70px; /* Define header height variable */
       --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
       --gradient-secondary: linear-gradient(135deg, #8b5cf6, #ec4899);
       --gradient-accent: linear-gradient(135deg, #3b82f6, #10b981);
   }
     
   /* Header Styles */
   header {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 1050; /* Higher than sidebar */
       background-color: transparent;
       transition: var(--transition);
       padding: 12px 0;
       height: var(--header-height);
   }
     
   /* Add margin to body to prevent content from being hidden under header */
   body {
       padding-top: var(--header-height);
       margin: 0;
   }
     
   /* Header states */
   header.transparent {
       background-color: transparent;
   }
     
   header.dark {
       background-color: var(--primary-color);
   }
     
   header.light {
       background-color: var(--secondary-color);
       box-shadow: var(--box-shadow);
   }
     
   header.scrolled {
       padding: 8px 0; /* Reduced padding when scrolled */
   }
     
   .nav-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
       height: 100%;
   }
     
   .logo {
       font-family: var(--font-primary);
       font-size: 1.8rem;
       font-weight: 700;
       letter-spacing: 2px;
       text-transform: uppercase;
       transition: var(--transition);
   }
     
   /* Logo color based on header state */
   header.transparent .logo,
   header.dark .logo {
       color: var(--secondary-color);
   }
     
   header.light .logo {
       color: var(--primary-color);
   }
     
   .menu-toggle {
       display: none;
       font-size: 1.5rem;
       cursor: pointer;
       transition: var(--transition);
   }
     
   /* Menu toggle color based on header state */
   header.transparent .menu-toggle,
   header.dark .menu-toggle {
       color: var(--secondary-color);
   }
     
   header.light .menu-toggle {
       color: var(--primary-color);
   }
     
   .nav-menu {
       display: flex;
       list-style: none;
       margin: 0;
       padding: 0;
   }
     
   .nav-item {
       margin: 0 15px;
   }
     
   .nav-link {
       font-family: var(--font-primary);
       font-size: 1rem;
       font-weight: 500;
       text-decoration: none !important; /* Remove underline */
       text-transform: uppercase;
       letter-spacing: 1px;
       padding: 5px 0;
       position: relative;
       transition: var(--transition);
   }
     
   /* Nav link color based on header state */
   header.transparent .nav-link,
   header.dark .nav-link {
       color: var(--secondary-color);
   }
     
   header.light .nav-link {
       color: var(--primary-color);
   }
     
   /* Remove underline effect completely */
   .nav-link::after {
       display: none !important; /* Remove the underline effect */
   }
     
   .nav-link:hover {
       color: var(--accent-color);
   }
     
   /* Auth Buttons */
   .auth-buttons {
       display: flex;
       align-items: center;
   }
     
   .auth-button {
       font-family: var(--font-primary);
       font-size: 0.9rem;
       font-weight: 600;
       text-decoration: none !important; /* Remove underline */
       padding: 8px 16px;
       border-radius: 4px;
       transition: var(--transition);
       margin-left: 10px;
   }
     
   /* Login button color based on header state */
   header.transparent .login-button,
   header.dark .login-button {
       color: var(--secondary-color);
       border: 1px solid var(--secondary-color);
   }
     
   header.light .login-button {
       color: var(--primary-color);
       border: 1px solid var(--primary-color);
   }
     
   header.transparent .login-button:hover,
   header.dark .login-button:hover {
       background-color: rgba(255, 255, 255, 0.1);
       transform: translateY(-2px);
   }
     
   header.light .login-button:hover {
       background-color: rgba(0, 0, 0, 0.05);
       transform: translateY(-2px);
   }
     
   .signup-button {
       background-color: var(--primary-color); /* Changed to black */
       color: var(--secondary-color);
       border: 1px solid var(--primary-color);
   }
     
   .signup-button:hover {
       background-color: #333; /* Darker black on hover */
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
     
   /* Nav Buttons (for logged in users) */
   .nav-buttons {
       display: flex;
       align-items: center;
   }
     
   .nav-buttons .nav-link {
       font-size: 1.2rem;
       margin-left: 15px;
       padding: 5px;
       text-decoration: none !important; /* Ensure no underline */
   }
     
   .nav-buttons .nav-link:hover {
       color: var(--accent-color);
       transform: translateY(-2px);
   }
     
   /* Profile Dropdown */
   .dropdown {
       position: relative;
   }
     
   .dropdown-content {
       position: absolute;
       top: 100%;
       right: 0;
       background-color: var(--secondary-color);
       min-width: 180px;
       box-shadow: var(--box-shadow);
       border-radius: 4px;
       padding: 10px 0;
       z-index: 1000;
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: var(--transition);
   }
     
   .dropdown-content.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
     
   .dropdown-content a {
       display: block;
       padding: 10px 20px;
       color: var(--primary-color);
       text-decoration: none !important; /* Remove underline */
       font-family: var(--font-primary);
       font-size: 0.9rem;
       transition: var(--transition);
   }
     
   .dropdown-content a:hover {
       background-color: var(--gray-light);
       color: var(--accent-color);
   }
     
   .dropdown-content a i {
       margin-right: 10px;
       width: 16px;
       text-align: center;
   }
     
   /* Responsive Styles */
   @media (max-width: 991px) {
       .nav-menu {
           position: fixed;
           top: 0;
           left: -100%;
           width: 80%;
           max-width: 300px;
           height: 100vh;
           background-color: var(--secondary-color);
           flex-direction: column;
           padding: 80px 20px 20px;
           transition: 0.4s;
           box-shadow: var(--box-shadow);
           z-index: 1001;
       }
     
       .nav-menu.active {
           left: 0;
       }
     
       .nav-item {
           margin: 15px 0;
       }
     
       .nav-menu .nav-link {
           color: var(--primary-color);
           font-size: 1.1rem;
       }
     
       .menu-toggle {
           display: block;
           z-index: 1002;
       }
     
       .menu-toggle.active {
           color: var(--primary-color);
       }
     
       .auth-buttons {
           margin-left: auto;
       }
     
       .auth-button {
           padding: 6px 12px;
           font-size: 0.8rem;
       }
   }
     
   @media (max-width: 768px) {
       :root {
           --header-height: 60px; /* Smaller header on mobile */
       }
       
       .logo {
           font-size: 1.5rem;
       }
   }
     
   @media (max-width: 576px) {
       .logo {
           font-size: 1.3rem;
       }
     
       .auth-button {
           padding: 5px 10px;
           font-size: 0.75rem;
       }
     
       .nav-buttons .nav-link {
           font-size: 1rem;
           margin-left: 10px;
       }
   }
     
   /* Animation for menu toggle */
   @keyframes menuFade {
       from {
           opacity: 0;
           transform: translateX(-20px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
     
   .nav-menu.active .nav-item {
       animation: menuFade 0.4s ease forwards;
       opacity: 0;
   }
     
   .nav-menu.active .nav-item:nth-child(1) {
       animation-delay: 0.1s;
   }
     
   .nav-menu.active .nav-item:nth-child(2) {
       animation-delay: 0.2s;
   }
     
   .nav-menu.active .nav-item:nth-child(3) {
       animation-delay: 0.3s;
   }
     
   .nav-menu.active .nav-item:nth-child(4) {
       animation-delay: 0.4s;
   }
     
   /* Overlay for mobile menu */
   .menu-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 1000;
       opacity: 0;
       visibility: hidden;
       transition: var(--transition);
   }
     
   .menu-overlay.active {
       opacity: 1;
       visibility: visible;
   }

   /* Fix for links */
   a {
       text-decoration: none !important;
       color: inherit;
   }
   
   /* Active nav item */
   .nav-item.active .nav-link {
       color: var(--accent-color);
       font-weight: 600;
   }
   
   /* Black button styles */
   .auth-button.signup-button {
       background-color: #000;
       color: #fff;
       border-color: #000;
   }
   
   .auth-button.signup-button:hover {
       background-color: #333;
       border-color: #333;
   }

   /* ======= PREMIUM CART & WISHLIST COUNT BADGE STYLES ======= */
   .position-relative {
       position: relative;
   }

   /* Base count badge style with gradient background */
   .count-badge {
       position: absolute;
       top: -10px;
       right: -10px;
       background: var(--gradient-primary);
       color: white;
       font-size: 0.7rem;
       min-width: 20px;
       height: 20px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       box-shadow: 0 4px 10px rgba(59, 130, 246, 0.5);
       transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
       transform-origin: center;
       z-index: 2;
       padding: 0 6px;
       backdrop-filter: blur(5px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }

   /* Different gradient for wishlist badge */
   .nav-link[title="Wishlist"] .count-badge {
       background: var(--gradient-secondary);
       box-shadow: 0 4px 10px rgba(139, 92, 246, 0.5);
   }

   /* Different gradient for cart badge */
   .nav-link[title="Cart"] .count-badge {
       background: var(--gradient-accent);
       box-shadow: 0 4px 10px rgba(59, 130, 246, 0.5);
   }

   /* 3D Floating Animation */
   @keyframes float {
       0% {
           transform: translateY(0) rotate(0deg);
           box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
       }
       25% {
           transform: translateY(-3px) rotate(2deg);
           box-shadow: 0 8px 20px rgba(59, 130, 246, 0.6);
       }
       50% {
           transform: translateY(0) rotate(0deg);
           box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
       }
       75% {
           transform: translateY(3px) rotate(-2deg);
           box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
       }
       100% {
           transform: translateY(0) rotate(0deg);
           box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
       }
   }

   /* Apply floating animation to wishlist badge */
   .nav-link[title="Wishlist"] .count-badge {
       animation: float 5s infinite ease-in-out;
   }

   /* Apply floating animation to cart badge with delay */
   .nav-link[title="Cart"] .count-badge {
       animation: float 5s infinite ease-in-out;
       animation-delay: 0.5s;
   }

   /* Magnetic Hover Effect */
   .nav-buttons .nav-link:hover .count-badge {
       transform: scale(1.2) translateY(-5px);
       filter: brightness(1.1);
   }

   /* Dramatic Pop Animation for new badges */
   @keyframes badgePop {
       0% {
           transform: scale(0);
           opacity: 0;
       }
       50% {
           transform: scale(1.5);
           opacity: 1;
       }
       75% {
           transform: scale(0.8);
           opacity: 1;
       }
       90% {
           transform: scale(1.1);
           opacity: 1;
       }
       100% {
           transform: scale(1);
           opacity: 1;
       }
   }

   /* Apply pop animation when badge is added */
   .count-badge.new-item {
       animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }

   /* Glowing Pulse Effect */
   @keyframes glowPulse {
       0% {
           box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(59, 130, 246, 0.3);
       }
       50% {
           box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.5);
       }
       100% {
           box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(59, 130, 246, 0.3);
       }
   }

   /* Different glow for wishlist */
   @keyframes glowPulseWishlist {
       0% {
           box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 10px rgba(139, 92, 246, 0.3);
       }
       50% {
           box-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.5);
       }
       100% {
           box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 10px rgba(139, 92, 246, 0.3);
       }
   }

   /* Apply glow pulse on hover */
   .nav-link[title="Cart"]:hover .count-badge {
       animation: glowPulse 1.5s infinite;
   }

   .nav-link[title="Wishlist"]:hover .count-badge {
       animation: glowPulseWishlist 1.5s infinite;
   }

   /* Gradient Rotation Animation */
   @keyframes gradientRotate {
       0% {
           background-position: 0% 50%;
       }
       50% {
           background-position: 100% 50%;
       }
       100% {
           background-position: 0% 50%;
       }
   }

   /* Apply gradient rotation on hover */
   .nav-link:hover .count-badge {
       background-size: 200% 200%;
       animation: gradientRotate 2s ease infinite;
   }

   /* Hover effect for cart badge */
   .nav-link[title="Cart"]:hover .count-badge {
       background: linear-gradient(135deg, #3b82f6, #10b981, #3b82f6);
       background-size: 200% 200%;
   }

   /* Hover effect for wishlist badge */
   .nav-link[title="Wishlist"]:hover .count-badge {
       background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6);
       background-size: 200% 200%;
   }

   /* Special effect for when count increases */
   @keyframes countIncrease {
       0% {
           transform: scale(1);
           filter: hue-rotate(0deg);
       }
       25% {
           transform: scale(1.5);
           filter: hue-rotate(90deg) brightness(1.2);
       }
       50% {
           transform: scale(0.9);
           filter: hue-rotate(180deg) brightness(1.2);
       }
       75% {
           transform: scale(1.2);
           filter: hue-rotate(270deg) brightness(1.2);
       }
       100% {
           transform: scale(1);
           filter: hue-rotate(360deg);
       }
   }

   .count-badge.increased {
       animation: countIncrease 1s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   /* Icon Animation */
   @keyframes iconPulse {
       0% {
           transform: scale(1);
           color: inherit;
       }
       50% {
           transform: scale(1.2);
           color: var(--accent-color);
       }
       100% {
           transform: scale(1);
           color: inherit;
       }
   }

   /* Apply pulse animation to cart icon */
   .nav-link[title="Cart"] i {
       transition: all 0.3s ease;
   }

   .nav-link[title="Cart"]:hover i {
       animation: iconPulse 1s infinite;
       color: var(--accent-color);
   }

   /* Apply pulse animation to wishlist icon */
   .nav-link[title="Wishlist"] i {
       transition: all 0.3s ease;
   }

   .nav-link[title="Wishlist"]:hover i {
       animation: iconPulse 1s infinite;
       color: var(--accent-tertiary);
   }

   /* 3D Flip Animation for Count Change */
   @keyframes flip3D {
       0% {
           transform: perspective(400px) rotateY(0);
       }
       50% {
           transform: perspective(400px) rotateY(180deg);
           opacity: 0;
       }
       51% {
           transform: perspective(400px) rotateY(180deg);
           opacity: 0;
       }
       100% {
           transform: perspective(400px) rotateY(360deg);
           opacity: 1;
       }
   }

   .count-badge.flip {
       animation: flip3D 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
       backface-visibility: visible;
   }

   /* Floating Notification with Particle Effects */
   @keyframes floatNotification {
       0% {
           opacity: 0;
           transform: translate(-50%, 0);
       }
       10% {
           opacity: 1;
           transform: translate(-50%, -20px);
       }
       80% {
           opacity: 1;
           transform: translate(-50%, -40px);
       }
       100% {
           opacity: 0;
           transform: translate(-50%, -60px);
       }
   }

   .floating-notification {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       background: rgba(0, 0, 0, 0.7);
       backdrop-filter: blur(4px);
       color: white;
       padding: 4px 10px;
       border-radius: 20px;
       font-size: 0.8rem;
       font-weight: 600;
       pointer-events: none;
       white-space: nowrap;
       z-index: 1000;
       animation: floatNotification 1.5s forwards cubic-bezier(0.23, 1, 0.32, 1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   }

   /* Particle animation for notification */
   .particle {
       position: absolute;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--accent-color);
       pointer-events: none;
       z-index: 999;
       opacity: 0.8;
       animation: particleFloat 1s forwards ease-out;
   }

   @keyframes particleFloat {
       0% {
           transform: translate(0, 0) scale(1);
           opacity: 0.8;
       }
       100% {
           transform: translate(var(--tx), var(--ty)) scale(0);
           opacity: 0;
       }
   }

   /* Ensure icons have some space for the badge */
   .nav-buttons .nav-link {
       margin-right: 8px;
   }

   /* Ripple effect for icon click */
   .nav-link .ripple {
       position: absolute;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.4);
       transform: scale(0);
       animation: ripple 0.6s linear;
       pointer-events: none;
   }

   @keyframes ripple {
       to {
           transform: scale(2.5);
           opacity: 0;
       }
   }

   /* Item added animation */
   @keyframes itemAdded {
       0% {
           transform: translateY(20px) scale(0.5);
           opacity: 0;
       }
       70% {
           transform: translateY(-5px) scale(1.1);
           opacity: 1;
       }
       100% {
           transform: translateY(0) scale(1);
           opacity: 1;
       }
   }

   .item-added {
       animation: itemAdded 0.5s forwards;
   }

   /* Toast notification */
   .toast-notification {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       padding: 12px 20px;
       border-radius: 8px;
       font-family: var(--font-primary);
       font-size: 14px;
       font-weight: 500;
       z-index: 9999;
       opacity: 0;
       transform: translateY(20px);
       transition: all 0.3s ease;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       backdrop-filter: blur(4px);
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .toast-notification.show {
       opacity: 1;
       transform: translateY(0);
   }

   /* Flying item animation */
   .flying-item {
       position: fixed;
       width: 20px;
       height: 20px;
       background-color: var(--accent-color);
       border-radius: 50%;
       z-index: 9999;
       pointer-events: none;
       box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
       transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
   }