.opa-product-slider-wrapper {
    margin: 40px 0;
    position: relative;
    width: 100%;
}

.opa-product-slider-container {
    position: relative;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .opa-product-slider-container {
        padding: 0 20px; /* Reduced padding on mobile */
    }
}

.opa-ps-slide-item {
    padding: 0 10px;
    outline: none; /* remove slick focus outline */
}

@media (max-width: 768px) {
    .opa-ps-slide-item {
        padding: 0 5px; /* Reduced gap between cards on mobile */
    }
}

/* Ensure the product card fills height nicely if needed */
.opa-ps-slide-item .opa-product-card {
    height: 100%;
    margin-bottom: 20px;
}

/* Custom Navigation Arrows */
button.opa-ps-prev,
button.opa-ps-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    z-index: 20 !important; /* higher z-index to sit above images */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* When Slick doesn't hide it, display it as flex */
button.opa-ps-prev:not(.slick-hidden),
button.opa-ps-next:not(.slick-hidden) {
    display: flex !important;
}

button.opa-ps-prev svg,
button.opa-ps-next svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #333 !important;
}

button.opa-ps-prev:hover,
button.opa-ps-next:hover {
    background: #2271b1 !important;
    color: #fff !important;
    border-color: #2271b1 !important;
}

button.opa-ps-prev:hover svg,
button.opa-ps-next:hover svg {
    stroke: #fff !important;
}

button.opa-ps-prev {
    left: 20px !important; /* overlaps the first card nicely within the 40px padding */
}

button.opa-ps-next {
    right: 20px !important; /* overlaps the last card nicely within the 40px padding */
}

/* Slick Dots Customization */
.opa-product-slider-wrapper .slick-dots {
    bottom: -30px;
}

.opa-product-slider-wrapper .slick-dots li button:before {
    font-size: 12px;
    color: #ccc;
    opacity: 1;
}

.opa-product-slider-wrapper .slick-dots li.slick-active button:before {
    color: #2271b1;
}