/* Force homepage category items into 4 columns on desktop */
@media (min-width: 1025px) {
    /* If they are in a flex container (Elementor Container) */
    .home .elementor-container {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    /* Target the direct child elements (columns or nested containers) that represent each category */
    /* Often these are .elementor-column or direct child .elementor-element */
    .home .elementor-container > .elementor-column,
    .home .elementor-container > .elementor-element:not(.elementor-wcv-parent) {
        width: calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        flex: 0 0 calc(25% - 15px) !important;
        margin-right: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Clear margin on every 4th item */
    .home .elementor-container > .elementor-column:nth-child(4n),
    .home .elementor-container > .elementor-element:not(.elementor-wcv-parent):nth-child(4n) {
        margin-right: 0 !important;
    }

    /* Fallback for standard WooCommerce layout */
    .home ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
    
    .home ul.products li.product-category {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    /* 2 columns on tablet */
    .home .elementor-container > .elementor-column,
    .home .elementor-container > .elementor-element:not(.elementor-wcv-parent) {
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
        margin-right: 20px !important;
        margin-bottom: 20px !important;
    }
    .home .elementor-container > .elementor-column:nth-child(2n),
    .home .elementor-container > .elementor-element:not(.elementor-wcv-parent):nth-child(2n) {
        margin-right: 0 !important;
    }
}
