/* Active pastel gradient */
.active-tab {
    background: linear-gradient(90deg, #93c5fd, #6ee7b7, #fde68a, #c4b5fd);
    color: #1f2937 !important;
    /* dark gray text for contrast */
    font-weight: 600;
    background-size: 300% 300%;
    animation: gradient-move 8s ease infinite;
}

/* Base inactive style */
.tab-btn {
    background-color: #e5e7eb;
    /* gray-200 */
    color: #1f2937;
    /* gray-800 */
    transition: background 0.6s ease, color 0.3s ease;
}

/* Hover for inactive */
.tab-btn:hover {
    background-color: #d1d5db;
    /* gray-300 */
}

/* Active pastel gradient */
.active-tab {
    background: linear-gradient(90deg, #93c5fd, #6ee7b7, #fde68a, #c4b5fd);
    color: #1f2937 !important;
    font-weight: 600;
    background-size: 300% 300%;
    animation: gradient-move 8s ease infinite;
    transition: background 0.6s ease, color 0.3s ease;
}

/* Gradient animation (slow + smooth) */
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* fade-in for product cards */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideUp 0.8s ease forwards;
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card {
    position: relative;
}

/* 1) Soft glow (fading) */
.hash-glow {
  position: relative;
  animation: hashGlow 1.6s ease-out forwards;
}

@keyframes hashGlow {
  0%   { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.25); }
  60%  { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}