/*
 * Unique Client Page - Product Columns Styles
 * Focus on grid layouts with different column counts
 */

/* ----- Grid Layout Styles ----- */
.ucp-products.columns-2 .products,
.ucp-products.columns-3 .products,
.ucp-products.columns-4 .products {
  display: grid;
  gap: var(--ucp-spacing-md, 24px);
}

.ucp-products.columns-2 .products {
  grid-template-columns: repeat(2, 1fr);
}

.ucp-products.columns-3 .products {
  grid-template-columns: repeat(3, 1fr);
}

.ucp-products.columns-4 .products {
  grid-template-columns: repeat(4, 1fr);
}

/* ----- Grid Item Styles ----- */
.ucp-products.columns-2 .products li,
.ucp-products.columns-3 .products li,
.ucp-products.columns-4 .products li {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ----- Responsive Grid ----- */
@media screen and (max-width: 768px) {
  .ucp-products.columns-3 .products,
  .ucp-products.columns-4 .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .ucp-products.columns-2 .products,
  .ucp-products.columns-3 .products,
  .ucp-products.columns-4 .products {
    grid-template-columns: 1fr;
  }
}