/* === KrosGear: fixed-size product cards (shop grid) === */

/* Make the bootstrap column act as a flex container so all cards align */
#kgProducts > [class*="col-"] {
  display: flex;
}

/* Card itself fills the column height */
#kgProducts .product-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* One place to control total card height */
  height: 430px;
}

/* Fixed image area */
#kgProducts .product-item .product-img {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* Ensure the image never stretches the card */
#kgProducts .product-item .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Keep the body consistent and push price area down */
#kgProducts .product-item .text-center {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title: clamp to 2 lines (override bootstrap .text-truncate) */
#kgProducts .product-item .text-center a.h6 {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35em;
  max-height: calc(1.35em * 2);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Make price row sit lower when title is short */
#kgProducts .product-item .text-center .d-flex.align-items-center.justify-content-center.mt-2 {
  margin-top: auto;
}

/* Slightly reduce bottom whitespace */
#kgProducts .product-item .text-center { padding-bottom: 0.75rem !important; }