/* ==========================================================================
   Responsive Related Products grid – forces 4/2/1 columns
   ========================================================================== */

/* 0. Reset any WooCommerce margins that interfere with flex math */
ul.products.dynamic-relatedproducts-flex li.product-category.product{
    margin: 0 !important;
}

/* 1. Flex container */
ul.products.dynamic-relatedproducts-flex{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    padding:0;
    margin:0;
    row-gap:2rem;        /* vertical spacing */
    column-gap:1.5rem;   /* horizontal spacing */
}

/* 2. Desktop  ≥1025px  → 4 columns */
ul.products.dynamic-relatedproducts-flex li.product-category.product{
    flex: 0 0 calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    box-sizing:border-box;
}

/* 3. Tablet  768–1024px  → 2 columns */
@media (max-width:1024px){
ul.products.dynamic-relatedproducts-flex li.product-category.product{
        flex: 0 0 calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }
}

/* 4. Mobile  ≤767px  → 1 column */
@media (max-width:767px){
ul.products.dynamic-relatedproducts-flex li.product-category.product{
        flex: 0 0 100%;
        max-width:100%;
    }
}

/* Optional polish – images scale like products do */
ul.products.dynamic-relatedproducts-flex li.product-category.product a{
    display:block;
    text-align:center;
}
ul.products.dynamic-relatedproducts-flex li.product-category.product img{
    width:100%;
    height:auto;
    object-fit:contain;
}