/* Custom carousel styles with improved outside arrows positioning */
.outside-arrows {
    position: relative;
    padding: 0 60px; /* Add padding to make room for arrows */
}

.outside-arrows .carousel-control-prev {
    left: 0;
    justify-content: flex-start;
}

.outside-arrows .carousel-control-next {
    right: 0;
    justify-content: flex-end;
}

.outside-arrows .carousel-control-prev,
.outside-arrows .carousel-control-next {
    width: 50px;
    opacity: 1;
    height: 300px; /* Match the image height */
    top: 0; /* Position at the top of the container */
    bottom: auto; /* Override the default bottom positioning */
    margin-top: 0; /* Align with the top of images */
    z-index: 10; /* Ensure arrows are above content */
}

/* Add consistent spacing between items */
.outside-arrows .carousel-inner .row {
    margin-right: -15px;
    margin-left: -15px;
}

.outside-arrows .carousel-inner .row > div {
    padding: 0 15px; /* Consistent padding for all grid items */
}

/* Fix spacing between slides */
.outside-arrows .carousel-item {
    padding: 0;
}

/* Apply consistent transitions */
.outside-arrows .carousel-inner {
    overflow: hidden;
}

.product-arrow {
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.7); /* Darker background for better contrast */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Add shadow for better visibility */
}

/* Make arrows more visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); /* Add white glow */
}

@media (max-width: 767.98px) {
    .outside-arrows {
        padding: 0 40px; /* Less padding for smaller screens */
    }
    
    .outside-arrows .carousel-control-prev,
    .outside-arrows .carousel-control-next {
        width: 35px;
        height: 350px; /* Match XS image height */
    }
    
    .product-arrow {
        width: 30px;
        height: 30px;
    }
}