/* Stili per allineamento Desktop Caroselli */
.desktop-carousels-wrapper {
    height: 913px; /* Stessa altezza dell'immagine banner */
}
.swiper-btn-custom {
    color: #000; /* Colore frecce */
    background: rgba(255,255,255,0.7);
    width: 40px; height: 40px;
    border-radius: 50%;
}
.swiper-btn-custom::after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Logica Mobile Mosaico (Rimasta invariata) */
@media (max-width: 991px) {
    .instagram-explore-row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
        margin-top: 1rem;
    }
    .mobile-mosaic-item.col-6 .card-product figure { aspect-ratio: 4 / 5; }
    .mobile-mosaic-item.col-12 .card-product figure { aspect-ratio: 1 / 1; }
}


/* Rimuove il blu, lo sfondo e i contorni */
.swiper-button-next,
.swiper-button-prev {
    color: #222 !important; /* Grigio scuro/Nero neutro. Usa #fff se preferisci il bianco */
    background-color: transparent !important; /* Sfondo invisibile */
    border: none !important; /* Rimuove qualsiasi linea di contorno */
    box-shadow: none !important; /* Rimuove eventuali ombreggiature */
}

/* Modella l'icona della freccia per renderla più elegante */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 28px !important; /* Rimpicciolisce la freccia (di default è gigante) */
    font-weight: 300 !important; /* Rende il tratto del disegno più sottile e raffinato */
}

/* Interazione: leggero feedback visivo al passaggio del mouse */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}