/* ----- WooCommerce: desktop = 1 column, mobile = 2 columns ----- */
/* Apply grid to the product list */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: 1fr;   /* Desktop/default: single column */
  gap: 20px;                   /* space between items */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ensure each product item fills the grid cell and remove floats used by some themes */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  box-sizing: border-box;
}

/* Mobile: 2 columns (adjust breakpoint if you prefer) */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr); /* two columns on small screens */
  }
}

/* Optional: tighten image & button layout inside each product */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Optional: make product images scale nicely */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
