/* --- CONTENITORE PRINCIPALE DELLO SLIDER --- */
        .product-slider {
            width: 100%;
            padding: 60px 0;
            position: relative;
        }

        .slider-viewport {
            width: 90%; /* Lascia un po' di spazio ai lati */
            margin: 0 auto;
            overflow: hidden; /* L'elemento chiave per creare l'effetto "finestra" */
        }



        /* Aggiungi questo al tuo foglio di stile */

        .slider-viewport {
            /* Permette lo scroll verticale della pagina, ma blocca quello orizzontale del browser
               per lasciare che sia il JS a gestirlo */
            touch-action: pan-y; 
            cursor: grab; /* Indica che l'elemento è trascinabile */
            user-select: none; /* Evita la selezione del testo durante il trascinamento */
        }

        .slider-viewport:active {
            cursor: grabbing;
        }

        .product-card img {
            /* Evita che l'utente trascini l'immagine 'fuori' dallo slider */
            pointer-events: none; 
        }



        .slider-track {
            display: flex;
            /* La transizione viene applicata quando si cambia la proprietà transform con JS */
            transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* --- CARD IMBARCAZIONI--- */
        .product-card {
            font-family: 'Brown';
            font-size:16px;
            font-weight: 400;
            flex: 0 0 450px; /* Non si restringe, non si allarga, base di 300px */
            width: 450px;
            height: 500px;
            margin: 0 15px; /* Spazio tra le card */
            position: relative;
            overflow: hidden;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Allinea il contenuto in basso */
            background-size: cover;
            background-position: center;
        }

        /* Overlay scuro per migliorare la leggibilità del testo */
        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(1,24,38,0.8) 0%, rgba(1,24,38,0.4) 50%, rgba(1,24,38,0) 100%);
            z-index: 1;
        }



 /* --- CARD SCHEDA IMBARCAZIONE --- */
        .product-card-boat{
            font-family: 'Brown';
            font-size:16px;
            font-weight: 400;
            flex: 0 0 450px; /* Non si restringe, non si allarga, base di 300px */
            width: 450px;
            height: 350px;
            margin: 0 15px; /* Spazio tra le card */
            position: relative;
            overflow: hidden;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Allinea il contenuto in basso */
            background-size: cover;
            background-position: center;
        }

        /* Overlay scuro per migliorare la leggibilità del testo */
        .product-card-boat::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            background: linear-gradient(to top, rgba(1,24,38,0.8) 0%, rgba(1,24,38,0.4) 50%, rgba(1,24,38,0) 100%);
            z-index: 1;
            transition: opacity 0.3s linear;
        }

        .product-card-boat:hover::before {
            content: '';
            opacity: 1;
            transition: opacity 0.3s linear;
        }



        .card-content {
            position: relative;
            z-index: 2;
            padding: 25px;
        }

        .card-content h3 {
            font-family: "Rufina", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2.5rem;
            margin: 0 0 15px 0;
            line-height: 1.1;
        }
        
        .card-details {
            display: flex;
            gap: 20px; /* Spazio tra i dettagli */
            font-size: 0.9rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        
        .card-details span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-link {
            color: white;
            text-decoration: none;
            font-weight: bold;
            letter-spacing: 1px;
            font-size: 0.8rem;
            float: right;
            margin: 30px 0px 40px 0px;
        }
        
        .card-link span {
            transition: transform 0.2s ease;
            display: inline-block;

        }

        .card-link:hover span {
            transform: translateX(5px);
        }


        /* --- CONTROLLI DI NAVIGAZIONE --- */
        .slider-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 40px;
            color: white;
        }

        .nav-button {
            background: none;
            border: none;
            cursor: pointer;
        }
        
        .nav-button svg {
            width: 40px;
            height: 40px;
            transition: transform 0.2s ease;
        }
        
        .nav-button:hover:not(:disabled) svg {
            transform: scale(1.1);
        }
        
        .nav-button:disabled svg path:first-child {
            fill: rgba(255, 255, 255, 0.1);
            stroke: rgba(255, 255, 255, 0.3);
        }
        
        .nav-button:disabled svg path:last-child {
            stroke: rgba(255, 255, 255, 0.3);
        }

        .page-counter {
            font-family: 'Brown';
            color:#011826;
            font-size:16px;
            font-weight: 400;
            letter-spacing:5px;
            min-width: 50px;
            text-align: center;
            min-width: 70px;
        }


    @media (max-width: 768px) {

        .product-card {height: 400px;}

        .card-content {width:75%;}

        .product-card-boat {
            height: 250px;
            background-size: contain;
            background-position: left top;
            background-repeat: no-repeat;
        }

    }