/* =========================================================
   Grogin Carousel Card Aligner (Fixed layout module)
   ========================================================= */

/* 0) Make the product card itself a column */
.woocommerce li.product.gca-fixed-card,
.woocommerce .product.gca-fixed-card {
  height: 100%;
}

/* Many themes wrap inner content; handle both common patterns */
.woocommerce li.product.gca-fixed-card .product-box,
.woocommerce li.product.gca-fixed-card .product-inner,
.woocommerce li.product.gca-fixed-card .product-content,
.woocommerce li.product.gca-fixed-card .product-item,
.woocommerce li.product.gca-fixed-card .wc-block-grid__product,
.woocommerce li.product.gca-fixed-card {
  display: flex;
  flex-direction: column;
}

/* 1) FIXED IMAGE AREA (prevents different image heights) */
.woocommerce li.product.gca-fixed-card .thumbnail-wrapper,
.woocommerce li.product.gca-fixed-card .product-thumbnail,
.woocommerce li.product.gca-fixed-card .entry-media {
  flex: 0 0 auto;
}

/* Force a consistent image frame height (adjust this number) */
.woocommerce li.product.gca-fixed-card .thumbnail-wrapper .product-thumbnail.entry-media,
.woocommerce li.product.gca-fixed-card .thumbnail-wrapper .entry-media,
.woocommerce li.product.gca-fixed-card .product-thumbnail.entry-media {
  position: relative;
  overflow: hidden;
  height: 260px; /* <-- adjust: 220/240/260/300 */
}

/* Make the link and image fill the frame */
.woocommerce li.product.gca-fixed-card .thumbnail-wrapper .product-thumbnail.entry-media > a,
.woocommerce li.product.gca-fixed-card .thumbnail-wrapper .entry-media > a,
.woocommerce li.product.gca-fixed-card .product-thumbnail.entry-media > a {
  position: absolute;
  inset: 0;
  display: block;
}

.woocommerce li.product.gca-fixed-card .thumbnail-wrapper img,
.woocommerce li.product.gca-fixed-card .product-thumbnail img,
.woocommerce li.product.gca-fixed-card .entry-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;   /* change to contain if you don't want cropping */
  object-position: center;
  display: block;
}

/* 2) CONTENT AREA: reserve consistent spacing */
.woocommerce li.product.gca-fixed-card .content-wrapper,
.woocommerce li.product.gca-fixed-card .product-content,
.woocommerce li.product.gca-fixed-card .woocommerce-loop-product__title,
.woocommerce li.product.gca-fixed-card .price {
  flex: 0 0 auto;
}

/* Clamp title so long titles don't make uneven heights */
.woocommerce li.product.gca-fixed-card .woocommerce-loop-product__title,
.woocommerce li.product.gca-fixed-card h2.woocommerce-loop-product__title,
.woocommerce li.product.gca-fixed-card .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* <-- adjust: 1,2,3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;          /* keeps rows aligned even if 1 line */
}

/* Reserve a predictable space for price/rating area */
.woocommerce li.product.gca-fixed-card .price {
  min-height: 1.6em;
}

/* 3) PUSH BUTTONS TO BOTTOM */
.woocommerce li.product.gca-fixed-card .button-area,
.woocommerce li.product.gca-fixed-card .add_to_cart_button,
.woocommerce li.product.gca-fixed-card .button,
.woocommerce li.product.gca-fixed-card .wp-element-button {
  margin-top: auto; /* key: pushes buttons down */
}

/* If theme wraps buttons in a container, ensure that container goes to bottom */
.woocommerce li.product.gca-fixed-card .product-buttons,
.woocommerce li.product.gca-fixed-card .product-actions,
.woocommerce li.product.gca-fixed-card .woocommerce-loop-product__actions {
  margin-top: auto;
}

/* 4) CAROUSEL: make slides equal height when using Slick */
.slick-track { display: flex !important; }
.slick-slide { height: auto !important; }
.slick-slide > div { height: 100%; }
.slick-slide .woocommerce ul.products,
.slick-slide .products { height: 100%; }