/* ==========================================================================
   STRICT 4-COLUMN CSS GRID OVERRIDE FOR PHOCA CART PRODUCT MODULE
   ========================================================================== */

/* Target the core wrapper containing Phoca Cart's products */
.ph-organic-grid,
.mod-phocacart-product,
.ph-product-module-box {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forces exactly 4 equal columns */
    gap: 24px !important;                             /* Clean spacing between rows & columns */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Strip away old row margins and flex styles that cause the layout to glitch */
.ph-organic-grid::before,
.ph-organic-grid::after,
.mod-phocacart-product::before,
.mod-phocacart-product::after {
    display: none !important;
}

/* Force every individual product card item to behave as a grid child */
.ph-organic-grid .ph-thumbnail-box,
.ph-organic-grid [class*="col-"],
.ph-organic-grid .ph-product-module-box > div,
.mod-phocacart-product .ph-thumbnail-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;      /* Completely disable flex shrinkage or growth */
    float: none !important;     /* Kill old layout floating variables */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   RESPONSIVE MEDIA BREAKPOINTS
   ========================================================================== */

/* Tablet Viewports: Force exactly 2 columns */
@media (max-width: 991px) {
    .ph-organic-grid,
    .mod-phocacart-product,
    .ph-product-module-box {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile Phone Viewports: Drop to a single row stack */
@media (max-width: 575px) {
    .ph-organic-grid,
    .mod-phocacart-product,
    .ph-product-module-box {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 16px !important;
    }
}