/* ==========================================================================
   Lincs Lootcave Shop — Catalogue Layout

   Single source of truth for the WooCommerce Product Collection grid.

   Owns:
     - product grid columns
     - responsive column changes
     - row / column gaps
     - catalogue card alignment
     - grid-level spacing

   Does NOT own:
     - product card visuals
     - filters
     - no-results state
     - single product pages

   Live WooCommerce block DOM:
     ul.wc-block-product-template
     li.wc-block-product
   ========================================================================== */


/* ==========================================================
   Product Collection grid
   ========================================================== */

body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template,
body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template,
body:not(.wp-admin) ul.wc-block-product-template {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap: 21px !important;
    row-gap: 21px !important;

    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* ==========================================================
   Grid items
   ========================================================== */

body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template > li.wc-block-product,
body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template > li.wc-block-product,
body:not(.wp-admin) ul.wc-block-product-template > li.wc-block-product {
    box-sizing: border-box !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    float: none !important;
    clear: none !important;

    align-self: stretch !important;
}


/* ==========================================================
   Desktop / small desktop
   ========================================================== */

@media (max-width: 1180px) {

    body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template,
    body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template,
    body:not(.wp-admin) ul.wc-block-product-template {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        column-gap: 18px !important;
        row-gap: 18px !important;
    }
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 900px) {

    body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template,
    body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template,
    body:not(.wp-admin) ul.wc-block-product-template {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap: 16px !important;
        row-gap: 18px !important;
    }
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 640px) {

    body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template,
    body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template,
    body:not(.wp-admin) ul.wc-block-product-template {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 12px !important;
        row-gap: 16px !important;
    }
}


/* ==========================================================
   Very narrow mobile
   ========================================================== */

@media (max-width: 380px) {

    body:not(.wp-admin) .ll-v3-shop-page .wc-block-product-template,
    body:not(.wp-admin) .ll-v3-shop-results .wc-block-product-template,
    body:not(.wp-admin) ul.wc-block-product-template {
        column-gap: 9px !important;
        row-gap: 14px !important;
    }
}