/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.18.6
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* container becomes two columns */
.cpb-custom-product-boxes-items .cpb-row.cpb-vertical-layout {
  display: flex;
  align-items: flex-start;
}

/* left filters column */
.cpb-custom-product-boxes-items .cpb-col-filters {
  flex: 0 0 240px;   /* adjust width as desired */
  margin-right: 20px;
}

/* make the filters “sticky” as you scroll */
.cpb-custom-product-boxes-items .cpb-col-filters .cpb-boxes-filters {
  position: sticky;
  top: 20px;         /* adjust offset if needed */
}

/* right items column fills remaining width */
.cpb-custom-product-boxes-items .cpb-col-items {
  flex: 1;
}

/* optional: center and space out the Load More button */
.cpb-custom-product-boxes-items .cpb_products_footer {
  text-align: center;
  margin-top: 1.5em;
}
/* ─── Remove any previous .cpb-two-by-two or grid overrides first ─── */
/* Then add this new CSS: */

/* 1) Keep your left filters stacked vertically */
.cpb-custom-product-boxes-items .cpb-col-filters {
  display: flex;
  flex-direction: column;
}

/* 2) Turn the bundle-items row into a 2×2 CSS grid */
.cpb-custom-product-boxes-items
  .cpb-row.cpb-boxes.box-default {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto;
  gap: 20px;  /* adjust spacing between boxes */
}

/* 3) Neutralize the plugin’s .cpb-col-2 flex widths so the grid can size freely */
.cpb-custom-product-boxes-items
  .cpb-row.cpb-boxes.box-default
  .cpb-col-2 {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
}


/*************** ADD MOBILE ONLY CSS HERE  ***************/