/* ============================================= */
/* WCC Shop/Archive Page Styles                  */
/* Version: 1.0 - Optimized December 2025        */
/* Load: Shop, category, and archive pages       */
/* ============================================= */

/* ============================================= */
/* Product Grid Layout                           */
/* ============================================= */

.wcc-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.wcc-product-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 12px;
}

/* WooCommerce Product List */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ============================================= */
/* Product Image in Grid                         */
/* ============================================= */

.wc-block-components-product-image img,
.wc-block-grid__product-image img {
    max-width: 500px !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
}

.wc-block-components-product-image,
.wc-block-grid__product-image {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* ============================================= */
/* RESPONSIVE - TABLET (1024px)                  */
/* ============================================= */

@media (max-width: 1024px) {
    .wcc-product-grid,
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
}

/* ============================================= */
/* RESPONSIVE - TABLET (768px)                   */
/* ============================================= */

@media (max-width: 768px) {
    .wcc-product-grid,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .wcc-product-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================= */
/* RESPONSIVE - MOBILE (480px)                   */
/* ============================================= */

@media (max-width: 480px) {
    .wcc-product-grid,
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .wcc-product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================= */
/* RESPONSIVE - EXTRA SMALL (320px)              */
/* ============================================= */

@media (max-width: 320px) {
    .wcc-product-card {
        margin-bottom: 10px !important;
    }
}

/* ============================================= */
/* RESPONSIVE - DESKTOP (1025px+)                */
/* ============================================= */

@media (min-width: 1025px) {
    .wcc-product-grid,
    ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================= */
/* END OF FILE                                   */
/* ============================================= */