.sp-category-split {
    display: flex;
    flex-direction: column; /* Su mobile stanno uno sotto l'altro (Lista, poi Banner) */
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (min-width: 992px) {
    .sp-category-split {
        flex-direction: row; /* Su desktop si affiancano */
        align-items: flex-start;
    }
    
    /* La colonna di sinistra occupa esattamente il 65% (meno metà del gap) */
    .sp-category-split__main {
        width: 65%;
        flex-shrink: 0;
    }

    /* La colonna di destra (Banner) occupa il 35% */
    .sp-category-split__sidebar {
        width: calc(35% - 3rem); /* Calcolo preciso per far respirare le colonne */
        flex-shrink: 0;
        
        /* Fa in modo che il banner segua lo scrolling dell'utente! */
        position: sticky;
        top: 2rem; 
    }
}