:root { 
    --arrow-font-size: 30px; 
    --arrow-color: #000000; 
    --arrow-color-lightbox: #ffffff; 
} 

.XXXXX__slide img { 
    margin: 0 auto; 
    max-width: 100%; 
} 

.slick-slide {
    margin: 0 15px; /* Adds gap between slides */
}

.slick-list {
    margin: 0 -15px; /* Offsets the slide margins to keep slider edges flush */
}

.slick-slider:not(.hero__slider) .slick-prev + .slick-list .slick-slide { 
    padding: 0; 
} 

.slick-slider:not(.hero__slider) .slick-prev, 
.slick-slider:not(.hero__slider) .slick-next { 
    height: initial; 
    width: initial; 
    z-index: 4; 
    background: transparent !important;
    border: none;
    color: transparent !important; /* Hides the "Next/Prev" text if any */
} 

.slick-slider:not(.hero__slider) .slick-prev:before, 
.slick-slider:not(.hero__slider) .slick-next:before { 
    font-size: var(--arrow-font-size); 
    color: var(--arrow-color); 
    line-height: 1;
    opacity: 1; /* Ensure arrows are fully visible */
} 

.slick-slider:not(.hero__slider) .slick-prev:hover,
.slick-slider:not(.hero__slider) .slick-next:hover,
.slick-slider:not(.hero__slider) .slick-prev:focus,
.slick-slider:not(.hero__slider) .slick-next:focus {
    background: transparent !important;
    color: transparent !important;
} 

.slick-lightbox .slick-slider:not(.hero__slider) .slick-prev:before, 
.slick-lightbox .slick-slider:not(.hero__slider) .slick-next:before { 
    color: var(--arrow-color-lightbox); 
} 

.slick-slider:not(.hero__slider) .slick-prev { 
    left: 0; 
} 

.slick-slider:not(.hero__slider) .slick-next { 
    right: 0; 
} 

.slick-lightbox .slick-slider:not(.hero__slider) .slick-prev { 
    left: 15px; 
} 

.slick-lightbox .slick-slider:not(.hero__slider) .slick-next { 
    right: 15px; 
} 

@media only screen and (min-width: 1600px) { 
    .slick-slider:not(.hero__slider) .slick-prev + .slick-list .slick-slide { 
        padding: 0; 
    } 

    .slick-slider:not(.hero__slider) .slick-prev { 
        left: unset; 
        right: calc(100% + 30px); 
    } 

    .slick-slider:not(.hero__slider) .slick-next { 
        left: calc(100% + 30px); 
        right: unset; 
    } 

    .slick-lightbox .slick-slider:not(.hero__slider) .slick-prev { 
        left: 30px; 
        right: unset; 
    } 

    .slick-lightbox .slick-slider:not(.hero__slider) .slick-next { 
        right: 30px; 
        left: unset; 
    } 
}