 .tagline-container {
            position: relative;
            max-width: 900px;
            width:99%;
            margin:5px auto;
            padding: 0;
            overflow-x:hidden;
            overflow: hidden;
            background: var(--background);
            border-radius: 8px;
            backdrop-filter: blur(10px);
        }

        .tagline-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.8) 50%, 
                transparent 100%);
            animation: shimmer 2s infinite;
        }

        .ec-tagline {
            display: inline-block;
            color: var(--light-text);
            font-size: 15px;
            white-space: nowrap;
            padding: 4px 6px;
            animation: mike-marquee 15s linear infinite;
        }

        /* Marquee Animation */
        @keyframes mike-marquee {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        /* Shimmer effect */
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Pause animation on hover */
        .tagline-container:hover .ec-tagline {
            animation-play-state: paused;
        }

        /* Alternative gradient themes */
        .tagline-container.warning {
            background: var(--warning-gradient);
        }

        .tagline-container.success {
            background: var(--success-gradient);
        }

        .tagline-container.danger {
            background: var(--danger-gradient);
        }

        /* Alternative slower animation */
        .tagline-slow {
            animation: mike-marquee 25s linear infinite;
        }

        /* Alternative faster animation */
        .tagline-fast {
            animation: mike-marquee 8s linear infinite;
        }

        /* Bouncing animation alternative */
        .tagline-bounce {
            animation: mike-marquee-bounce 12s ease-in-out infinite;
        }

        @keyframes mike-marquee-bounce {
            0%, 100% {
                transform: translateX(100%);
            }
            50% {
                transform: translateX(-100%);
            }
        }
        
        .sticky-category-header {
  position: sticky;
  top:50px;
  margin:5px 0 3px 0 ;
  z-index: 1100;
  background:var(--background);
  color: var(--light-text);
  padding:5px 0;
}

.category-scroll-container {
  position: relative;
  max-width: 100%;
  margin: 5px auto;
  overflow: hidden;
}

.category-scroll {
  display: flex;
  gap: 0.5rem;
  padding: 0.2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;  /* Hide scrollbar IE/Edge */
  scrollbar-width: none;     /* Hide scrollbar Firefox */
}
.category-scroll::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

.category-button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 20px;
  background:var(--card-bg);
  color: var(--light-text);
 /* border: 1px solid var(--simple-color); */
  font-size: 0.76rem;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none;
}

.category-button:hover {
  border:2px dashed var(--branding);
  background-color:var(--card-bg);
  transform: translateY(-0.5px);
  color:var(--branding);
}

.category-button.active {
  background: #0066ff;
  color: white;
  border-color: #0066ff;
  font-weight: 600;
}

/* Optional scroll buttons */
.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--background);
 border:none;
  color:var(--light-text);
  cursor: pointer;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.scroll-button.left {
  left: 5px;
}

.scroll-button.right {
  right: 5px;
}

.scroll-button:hover {
  background: var(--branding);
}

/* More Toggle Button */
.more-toggle-btn {
  background: var(--card-bg);
  color:var(--light-text);
  display:block;
  margin:3px auto;
  text-align:center;
  border: none;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight:bold;
  cursor: pointer;
}

/* Expanded Categories Panel (Hidden by Default) */
.expanded-categories-panel {
  display: none;
  background: var(--background);
  padding:3px 5px ;
}

.expanded-categories-panel h2 {
   font-size:1rem;
   font-weight:bold;
   text-align:center;
   margin:6px 2px;
}

/* Close Button */
.close-toggle-btn {
  padding: 5px 10px;
  text-align:center;
  background: #dc3838cc;
  color:#111;
  border: none;
  margin:3px auto;
  font-weight:bold;
  white-space:nowrap;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.75rem;
}

/* Subcategory Panels */
.category-subpanel {
  margin-bottom:4px;
}

.category-subpanel h4 {
  margin: 0 0 5px 0;
  color: var(--light-text);
  font-size: 0.7rem;
}

.subcategory-scroll {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: none;
}

.subcategory-scroll::-webkit-scrollbar {
  display: none;
}
