/* =====================================================================
   Supgor Product Tab Grid (Add-on) styles
   ===================================================================== */

/* ----- 1. Column / row gaps for the tab grid -------------------------
   The theme's .grid-cols-N utility classes set the columns but no gap,
   so without this the product cards touch each other. These vars let you
   fine-tune spacing without editing the file logic.                     */
.supgor-product-tab-grid {
    --klb-tabgrid-col-gap: 20px;
    --klb-tabgrid-row-gap: 30px;
}

.supgor-product-tab-grid .products.grid {
    gap: var(--klb-tabgrid-row-gap) var(--klb-tabgrid-col-gap);
}

/* ----- Responsive columns ------------------------------------------------
   The theme's .grid-cols-N class applies at every width, so on mobile the
   grid stays N columns and overflows. We override grid-template-columns per
   breakpoint using the per-widget CSS vars set in PHP (which come from the
   widget's Column / Tablet Column / Mobile Column controls).
   Desktop default 5, tablet 3, mobile 2.                                    */
.supgor-product-tab-grid .products.grid {
    grid-template-columns: repeat(var(--klb-grid-cols, 5), minmax(0, 1fr));
}

/* Tablet */
@media screen and (max-width: 1024px) {
    .supgor-product-tab-grid .products.grid {
        grid-template-columns: repeat(var(--klb-grid-cols-tablet, 3), minmax(0, 1fr));
    }
}

/* Mobile -> 2 columns */
@media screen and (max-width: 767px) {
    .supgor-product-tab-grid .products.grid {
        grid-template-columns: repeat(var(--klb-grid-cols-mobile, 2), minmax(0, 1fr));
    }
}

/* A little breathing room between the tab header and the grid. */
.supgor-product-tab-grid .klb-products-tabgrid {
    margin-top: 20px;
}

/* Responsive fallbacks: if a row ever looks cramped on small screens,
   the theme's mobile column count still applies; we only tighten the gap. */
@media screen and (max-width: 767px) {
    .supgor-product-tab-grid {
        --klb-tabgrid-col-gap: 12px;
        --klb-tabgrid-row-gap: 20px;
    }
}