body { font-family: 'Inter', sans-serif; background-color: #f8fafc; padding-bottom: 80px; -webkit-tap-highlight-color: transparent; }
        .glass-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-top: 1px solid rgba(0,0,0,0.05); }
        .card-hover { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; cursor: pointer; }
        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
        .fade-in { animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .loader { border: 3px solid #f3f3f3; border-top: 3px solid #10b981; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        @keyframes soft-wiggle {
            5% { transform: rotate(0deg); }
            25% { transform: rotate(-4deg); }
            45% { transform: rotate(4deg); }
            65% { transform: rotate(-14deg); }
            85% { transform: rotate(3deg); }
        }

        .category-btn.cat-active div {
            animation: soft-wiggle 1s ease-in-out infinite !important;
        }

        .view-section { display: none; }
        .view-section.active { display: block; animation: fadeIn 0.3s ease-out; }
        
        .cat-active {font-weight: bold;}

        html, body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            font-size: 16px !important;
            -webkit-text-size-adjust: 100%;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }

        *, ::before, ::after {
            box-sizing: border-box;
        }

/* Yhteinen pohja molempiin näkymiin */
.qty-controls {
    display: flex;
    align-items: center;
    background: #f0f4f8 !important; /* Tumma tausta molemmissa */
    border-radius: 9999px;
    padding: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    justify-content: flex-end; /* Pakottaa sisällön oikeaan reunaan */
    min-width: 34px;
}

/* Etusivun sulkeutuva logiikka */
#products-container .qty-controls {
    max-width: 34px; 
}

/* Avaus hoverista tai JS-luokasta */
#products-container .qty-controls:hover, 
#products-container .qty-controls.keep-open {
    max-width: 140px; 
}

/* Miinus ja numero: häivytys ja liuku vasemmalta */
.qty-content-wrapper {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Näytetään sisältö kun auki */
#products-container .qty-controls:hover .qty-content-wrapper,
#products-container .qty-controls.keep-open .qty-content-wrapper,
#cart-items .qty-content-wrapper { /* Ostoskorissa aina näkyvissä */
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Oranssi nappi pysyy aina vakaana ja päällimmäisenä */
.plus-btn-static {
    z-index: 10;
    flex-shrink: 0;
}

/* Ostoskorin pakotus aina auki */
#cart-items .qty-controls {
    background: none !important;
    max-width: 140px !important;
}
        
        
        .qty-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: background 0.2s;
        }
        .qty-btn:hover, .purchase-button:hover { filter: contrast(1.2); }
        
        .qty-num {
            padding: 0 8px;
            color: white;
            font-weight: bold;
            font-size: 14px;
            min-width: 24px;
            text-align: center;
        }

        .custom-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .custom-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        @media (min-width: 1024px) {
            .custom-scrollbar::-webkit-scrollbar {
                display: block;
                height: 6px;
            }
            .custom-scrollbar::-webkit-scrollbar-track {
                background: transparent;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb {
                background-color: rgba(255, 255, 255, 0.5);
                border-radius: 20px;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                background-color: rgba(255, 255, 255, 0.8);
            }
            .custom-scrollbar {
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
            }
            .return-button {
                display: none;
            }
        

        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
            @media (max-width: 740px) {
            
            .return-button {
                display: none !important;
            }
            
            .qty-controls {
                zoom: 1.2;
            }
            
            .purchase-button {
                zoom: 1.1;
            }
            
            .quantity-section {
                min-height: 2.4rem;
            }
            
            .quantity-basket {
                zoom: 1.2;
            }
            
            
            }