/* Ensure WooCommerce grids use flex/grid correctly for alignment */
.woocommerce ul.products, 
.woocommerce-page ul.products,
.elementor-widget-wc-archive-products ul.products,
.elementor-widget-woocommerce-products ul.products {
  display: grid !important; 
  gap: 20px !important; 
  grid-template-columns: repeat(4, 1fr) !important; 
  margin: 0; 
  padding: 0; 
  list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { 
    display: none !important; 
}

@media(max-width: 768px) { 
  .woocommerce ul.products, 
  .woocommerce-page ul.products,
  .elementor-widget-wc-archive-products ul.products,
  .elementor-widget-woocommerce-products ul.products { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 10px !important; 
  } 
}

.woocommerce ul.products li.product { 
  display: flex !important; 
  flex-direction: column !important; 
  justify-content: flex-start !important; 
  height: 100% !important; 
  margin: 0 !important; 
  width: 100% !important; 
  background: #fff; 
  padding-bottom: 15px;
  box-sizing: border-box;
}

/* Ensure link container takes space and stacks properly */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
  text-decoration: none;
}

/* 1. Image area */
.woocommerce ul.products li.product img {
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
}

@media(max-width: 768px) { 
   .woocommerce ul.products li.product img {
       height: 180px !important;
   }
}

/* 2. Title area */
.woocommerce ul.products li.product .woocommerce-loop-product__title { 
  font-size: 14px; 
  line-height: 1.4; 
  height: 2.8em !important; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  margin-bottom: 10px !important; 
  text-align: center; 
}

/* 3. Rating area */
.woocommerce ul.products li.product .star-rating { 
  margin: 0 auto 10px !important; 
  min-height: 20px !important; /* Fixed height even if empty */
  display: block; 
}
/* If a product has no rating, we must still reserve the space */
.woocommerce ul.products li.product:not(:has(.star-rating)) .woocommerce-loop-product__title {
   margin-bottom: 30px !important; /* Title margin + rating height to compensate */
}


/* 4. Price area */
.woocommerce ul.products li.product .price { 
  margin-bottom: 15px !important; 
  text-align: center; 
  margin-top: auto !important; /* Push price to bottom of link area */
  min-height: 24px !important;
}

/* 5. Add to Cart area (Outside the link) */
.woocommerce ul.products li.product .button { 
  margin-top: auto !important; /* Push button to absolute bottom of card */
  align-self: center !important; 
  width: 100%; 
  max-width: 90%; 
  text-align: center;
}