/* ===========================
   RELATED PRODUCTS (uses sa-ptabs shell)
   =========================== */

/* REQUIRED wrapper: keep container-fluid but remove inner padding */
.container-fluid.sa-related-products {
    padding-left: 0;
    padding-right: 0;
}

/* Slider spacing */
.sa-related-swiper {
    width: 100%;
    padding: 6px 0px 26px; /* space for pagination */
}

    /* Equal-height cards */
    .sa-related-swiper .swiper-wrapper {
        align-items: stretch;
    }

    .sa-related-swiper .swiper-slide {
        display: flex;
        height: auto;
    }

    /* Override your catalog card margin:auto that breaks swiper layout */
    .sa-related-swiper .category-product-card {
        width: 100%;
        height: 100%;
        margin: 0 !important;
    }

    /* Optional: always show arrows even when few items */
    .sa-related-swiper .swiper-button-next,
    .sa-related-swiper .swiper-button-prev {
        display: flex !important;
    }

/* Give slider more room at bottom so bullets don't overlay cards */
.sa-related-swiper {
    padding-bottom: 52px !important; /* increase until you like it */
}

    /* Move pagination lower */
    .sa-related-swiper .swiper-pagination {
        bottom: 7px !important; /* distance from bottom of swiper */
    }

    /* Optional: if something still overlaps, force pagination to be above other stuff */
    .sa-related-swiper .swiper-pagination {
        z-index: 5;
    }

    .sa-related-swiper .category-product-img {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 aspect ratio — adjust to your design (e.g., 75% for 4:3) */
        overflow: hidden;
    }

        .sa-related-swiper .category-product-img img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* or 'cover' if you want to fill and crop edges */
        }