/* CUSTOM CSS FÜR PRESTASHOP */

        .scrolling-wrapper {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            cursor: grab;
            cursor: -webkit-grab;
            user-select: none;
            scroll-behavior: smooth; 
        }
        
        .scrolling-wrapper.active {
            cursor: grabbing;
            cursor: -webkit-grabbing;
            scroll-behavior: auto;
        }
        
        .scrolling-wrapper::-webkit-scrollbar {
            display: none;
        }

        .scrolling-wrapper .material-icons{
            line-height: 0.8!important;
            font-size: 18px!important;
            color: white!important;
        }

        /* --- STYLES FÜR DIE PFEILE --- */
        
        /* Der Wrapper ist der Bezugspunkt für die absolute Positionierung der Pfeile */
        .scroll-container-wrapper {
            position: relative !important;
            display: block;
        }

        .scroll-btn {
            /* Positionierung erzwingen (!important überschreibt Theme-Styles) */
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            margin: 0 !important; /* Entfernt eventuelle Theme-Margins */
            padding: 0 !important; /* Entfernt Padding vom Button-Standard */
            z-index: 100; 
            
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #dee2e6;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.15);
            cursor: pointer;
            transition: all 0.2s ease, opacity 0.3s ease;
            
            /* Standardmäßig unsichtbar */
            opacity: 0;
            visibility: hidden;
        }

        .scroll-btn:hover {
            background-color: #f8f9fa;
            color: #333;
            border-color: #e9ecef;
            box-shadow: 0 6px 8px rgba(0,0,0,0.2);
        }

        /* Klasse zum Einblenden */
        .scroll-btn.show {
            opacity: 1;
            visibility: visible;
        }

        /* Links/Rechts Positionierung */
        .scroll-left { 
            left: -20px !important; 
        }
        .scroll-right { 
            right: -20px !important; 
        }

        /* Mobile Anpassung */
        @media (max-width: 768px) {
            .scroll-left { left: 5px !important; }
            .scroll-right { right: 5px !important; }
            .scroll-btn { opacity: 0.8; } 
        }

        /* --- RESTLICHE STYLES --- */
        .cat-pill {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 50px;
            padding: 10px 20px 7px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            white-space: nowrap; 
            font-weight: 500;
            -webkit-user-drag: none;
        }

        .cat-pill:hover, .cat-pill.active {
            background-color: #84a353; 
            color: white!important;
            border-color: #84a353;
        }

        .product-card-min {
            width: 200px;
            font-size: 0.9rem;
            pointer-events: none; 
            height: 100%; 
        }
        
        .product-card-min button, .product-card-min a {
            pointer-events: auto;
        }
        
        .fade-edges::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
            pointer-events: none;
            z-index: 5;
            border-radius: 0 4px 4px 0;
        }