/**
 * VG Masonry Layout Styles
 * Uses CSS custom property --wp--style--block-gap for consistent spacing
 */

/* Base masonry container */
.is-style-vgmason {
    position: relative !important;
    width: 100%;
}

/* WooCommerce Product Collection structure - UL */
.is-style-vgmason .wc-block-product-template {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* WooCommerce Product Collection - LI items */
/* Width and spacing will be set by JavaScript based on masonry attributes */
.is-style-vgmason .wc-block-product-template .wc-block-product {
    box-sizing: border-box !important;
    /* No default padding/margin - controlled by JavaScript */
    padding: 0 !important;
}

/* Query Loop / Post Template structure - UL */
.is-style-vgmason .wp-block-post-template {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Query Loop - post items */
/* Padding and width will be set by JavaScript based on --wp--style--block-gap */
.is-style-vgmason .wp-block-post-template .wp-block-post {
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    /* Default fallback for browsers without custom properties support */
    padding: 0 8px !important;
}

/* Ensure images don't break layout during load */
.is-style-vgmason img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove flex/grid layouts that conflict with masonry */
.is-style-vgmason .wc-block-product-template,
.is-style-vgmason .wp-block-post-template {
    display: block !important;
    gap: 0 !important;
}

/* Override WooCommerce display layout */
.is-style-vgmason[data-display-layout] .wc-block-product-template {
    display: block !important;
    grid-template-columns: none !important;
}