/**
 * SX1 Related Products Styles
 * Shortcode: [sx1_related_products]
 */

/*
====== MAIN CONTAINER ======
*/
.sx1-related-products-wrapper {
    margin: 40px 0;
    padding: 0;
}

/*
====== TITLE ======
*/
.sx1-related-products-title {
    font-size: 28px;
    font-weight: 400;
    color: #01a850;
    margin: 0 0 25px 0;
    padding-bottom: 12px;
}

/*
====== PRODUCT GRID ======
*/
.sx1-related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/*
====== RESPONSIVE DESIGN ======
*/

/* Large Tablet/Desktop (1200px - 1479px) - Keep 4 columns */
@media screen and (max-width: 1479px) {
    .sx1-related-products-grid {
        gap: 18px;
    }
}

/* Tablet Large (900px - 1199px) - 4 columns but tighter */
@media screen and (max-width: 1199px) {
    .sx1-related-products-wrapper {
        margin: 35px 0;
    }
    
    .sx1-related-products-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    
    .sx1-related-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

/* Tablet (768px - 899px) - Switch to 2x2 (2 columns) */
@media screen and (max-width: 899px) {
    .sx1-related-products-wrapper {
        margin: 30px 0;
    }
    
    .sx1-related-products-title {
        font-size: 24px;
    }
    
    .sx1-related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Mobile (under 768px) - 2 columns */
@media screen and (max-width: 767px) {
    .sx1-related-products-wrapper {
        margin: 25px 0;
    }
    
    .sx1-related-products-title {
        font-size: 22px;
        margin-bottom: 18px;
    }
    
    .sx1-related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Small Mobile (under 480px) - Still 2 columns but tighter */
@media screen and (max-width: 479px) {
    .sx1-related-products-wrapper {
        margin: 20px 0;
    }
    
    .sx1-related-products-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .sx1-related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}