@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #fafaf9; 
            color: #1c1917;
        }

      
        html {
            scroll-behavior: smooth;
        }

       
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Animations */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        /* Chart Container Rules (Strict Adherence) */
        .chart-wrapper-responsive {
            position: relative;
            width: 100%;
            max-width: 600px; /* Constrain width */
            margin-left: auto;
            margin-right: auto;
            height: 350px; /* Default height */
            max-height: 400px;
        }

        @media (max-width: 768px) {
            .chart-wrapper-responsive {
                height: 300px;
            }
        }

        /* Product Card Styles */
        .product-card.hidden-item {
            display: none;
        }

        /* Color Dot Styles */
        .color-dot {
            transition: all 0.2s;
        }
        .color-dot.active {
            transform: scale(1.2);
            box-shadow: 0 0 0 2px white, 0 0 0 4px #000;
        }

        /* Comparison Bar */
        #comparison-bar {
            transition: transform 0.3s ease-in-out;
        }
        #comparison-bar.hidden-bar {
            transform: translateY(100%);
        }