/* Custom styling for the slider section */
.custom-variations-slider-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.custom-variations-slider-section h2 {
    text-align: center;
    margin-bottom: 30px;
}

/* Ensure product small divs behave as Flickity cells */
.custom-flickity-carousel .custom-related-variation-slide {
    /* Flickity uses width for cell sizing. These will override the 'col' classes for slider context */
    width: 25%; /* For large-columns-4 equivalent */
    padding: 0 10px; /* Adjust padding/spacing as needed */
    box-sizing: border-box;
    /* Other specific styling for your product blocks */
}

.meta-rp{
	display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

/* Responsive adjustments for Flickity cells */
@media (max-width: 1024px) { /* Medium columns */
    .custom-flickity-carousel .custom-related-variation-slide {
        width: 33.333%; /* For medium-columns-3 equivalent */
    }
}

@media (max-width: 768px) { /* Small columns */
    .custom-flickity-carousel .custom-related-variation-slide {
        width: 50%; /* For small-columns-2 equivalent */
    }
}

@media (max-width: 480px) { /* Mobile */
    .custom-flickity-carousel .custom-related-variation-slide {
        width: 100%; /* Full width on mobile */
    }
}

/* Ensure images and text align correctly */
.custom-flickity-carousel .custom-related-variation-slide img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 15px auto;
}

.custom-flickity-carousel .custom-related-variation-slide .product-title {
    font-size: 1em; /* Adjust font size */
    margin-bottom: 5px;
}

.custom-flickity-carousel .custom-related-variation-slide .price {
    font-weight: bold;
}

/* Hide default list bullets if any */
.custom-flickity-carousel {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* You might need to adjust Flickity's default arrow/dot styling
   using specific selectors like .flickity-prev-next-button, .flickity-page-dots */