body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
        }
        .text-gradient {
            background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .bg-purple-gradient {
            background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
        }
        .border-premium-purple {
            border-color: #6d28d9;
        }
        /* Glassmorphism navigation bar style constraints */
        .glass-navbar {
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
        }
        .navbar-pill {
            transition: all 0.25s ease;
            color: #475569;
            background: rgba(248, 250, 252, 0.85);
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
        }
        .navbar-pill:hover,
        .navbar-pill:focus-visible {
            background: rgba(255, 255, 255, 0.95);
            color: #7c3aed;
        }
        .navbar-pill.active {
            background: #ffffff;
            color: #7c3aed;
            border-color: rgba(124, 58, 237, 0.18);
            box-shadow: 0 16px 40px rgba(109, 40, 217, 0.12);
        }
        .category-pill {
            transition: all 0.25s ease;
            white-space: nowrap;
            border-radius: 9999px;
            position: relative;
        }
        .category-pill:hover {
            transform: translateY(-2px);
        }
        .category-pill-active {
            background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
            border-color: rgba(124, 58, 237, 0.45);
            color: #ffffff;
            box-shadow: 0 18px 60px rgba(124, 58, 237, 0.16);
        }
        .category-pill-active i,
        .category-pill-active span,
        .category-pill-active .category-pill-badge {
            color: #ffffff;
        }
        .category-pill-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.5rem;
            padding: 0.35rem 0.65rem;
            border-radius: 9999px;
            font-size: 0.65rem;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
        }
        .category-pill-badge-accent {
            background: transparent;
            padding: 0.35rem 0.65rem;
        }
        .category-pill:not(.category-pill-active) {
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(226, 232, 240, 0.95);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
            color: #475569;
        }
        .category-pill:not(.category-pill-active) .category-pill-badge {
            background: rgba(243, 244, 246, 0.9);
            color: inherit;
        }
        .category-pill:not(.category-pill-active) i {
            opacity: 0.95;
        }
        .navbar-pill.active {
            background: #ffffff;
            color: #7c3aed;
            border-color: rgba(124, 58, 237, 0.18);
            box-shadow: 0 16px 40px rgba(109, 40, 217, 0.12);
        }
        .mobile-nav-pill {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            min-height: 3.85rem;
            padding: 0.75rem 0.85rem;
            border-radius: 9999px;
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.85));
            color: #64748b;
            border: 1px solid rgba(148, 163, 184, 0.18);
            transition: all 0.25s ease;
            font-size: 0.72rem;
            font-weight: 700;
            box-shadow: inset 0 1px 2px rgba(255,255,255,0.72);
        }
        .mobile-nav-pill:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 1);
            color: #7c3aed;
        }
        .mobile-nav-pill.active {
            background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
            color: #ffffff;
            border-color: rgba(124, 58, 237, 0.35);
            box-shadow: 0 18px 40px rgba(124, 58, 237, 0.18);
        }
        .mobile-nav-pill.active i,
        .mobile-nav-pill.active span {
            color: #ffffff;
        }
        .mobile-nav-pill i {
            font-size: 1.15rem;
        }
        .mobile-nav-pill span {
            line-height: 1.1;
        }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid rgba(124, 58, 237, 0.35);
            outline-offset: 2px;
        }
        .mobile-safe-bottom {
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        }
        
        /* Hide wishlist count badge on mobile (< 640px) */
        #wishlist-badge-count {
            display: none !important;
        }
        
        @media (min-width: 640px) {
            #wishlist-badge-count {
                display: inline-block !important;
            }
        }
        
        /* PWA Install Popup Modal Styles */
        #install-popup-backdrop {
            animation: fadeInBackdrop 0.3s ease-out;
        }
        
        #install-popup-backdrop.hidden {
            animation: fadeOutBackdrop 0.3s ease-out;
        }
        
        @keyframes fadeInBackdrop {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeOutBackdrop {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        
        #install-popup-backdrop:not(.hidden) + * {
            filter: none;
        }
        
        /* Body blur when install modal is open */
        body.install-modal-open {
            overflow: hidden;
        }