/*
 * Control IO Theme Styles
 * @file: css/components/product-grid.css
 * @purpose: Product Grid — hard alignment (images, titles, ratings, price rows, CTAs)
 * @author: WojBit
 * @version: 0.4.8
 */

/* -------------------- Tunables -------------------- */
:root{
  /* Title block (fixed height so rows align) */
  --prod-title-lines: 2;                /* set to 3 for taller titles */
  --prod-title-lh: 1.35;
  --prod-title-buffer: .25em;           /* anti-clipping buffer */
  --prod-title-block: calc(var(--prod-title-lines) * 1em * var(--prod-title-lh) + var(--prod-title-buffer));

  /* Ratings slot (same height everywhere) */
  --rating-font-size: .9rem;            /* star size */
  --rating-gap-top: .25rem;             /* spacing before stars (and placeholder) */
  --rating-height: calc(var(--rating-font-size) * 1.4);
}

/* -------------------- Card skeleton -------------------- */
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  position:relative; /* for absolute badges */
}

/* Link wrapper (image, title, stars, price) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:flex;
  flex-direction:column;
  gap:0;                                 /* avoid extra gap that makes rated items taller */
  text-align:left;
  flex:0 0 auto;
}

/* -------------------- Image area — uniform -------------------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  width:100%;
  aspect-ratio:1/1;                      /* same height for all thumbs */
  object-fit:contain;                    /* use 'cover' if you prefer cropping */
  display:block;
}

/* Ensure any “sale/new/flash” badge doesn’t push layout */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product [class*="badge"],
.woocommerce ul.products li.product [class*="flash"],
.woocommerce ul.products li.product [class*="promo"]{
  position:absolute;
  top:.5rem; left:.5rem;
  margin:0 !important;
  z-index:2;
}

/* -------------------- Title — fixed block height, no visual chop -------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  margin:.5rem 0 0;
  line-height: var(--prod-title-lh);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--prod-title-lines);
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;

  /* EXACT height so 1-line and 2-line titles occupy the same space */
  min-height: var(--prod-title-block);
  max-height: var(--prod-title-block);

  padding-bottom: .1em;                  /* micro buffer for descenders */
}

/* Optional soft fade on last line (supported browsers) */
@supports (mask-image: linear-gradient(#000, #000)) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
            mask-image: linear-gradient(180deg, #000 92%, transparent);
  }
}

/* -------------------- Ratings — strict size & zero margins -------------------- */
/* Classic Woo stars */
.woocommerce ul.products li.product .star-rating{
  margin: var(--rating-gap-top) 0 0 0 !important; /* kill default bottom margin */
  padding: 0 !important;
  display:inline-flex;
  align-items:center;
  height:var(--rating-height);
  min-height:var(--rating-height);
  line-height:var(--rating-height);
  font-size: var(--rating-font-size);
}
.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before{
  font-size: var(--rating-font-size) !important;  /* force pseudo-elements */
  line-height: 1 !important;
}

/* WC Blocks rating variant */
.woocommerce ul.products li.product .wc-block-components-product-rating{
  margin: var(--rating-gap-top) 0 0 0 !important;
  padding: 0 !important;
  display:inline-flex;
  align-items:center;
  height:var(--rating-height);
  min-height:var(--rating-height);
  line-height:var(--rating-height);
  font-size: var(--rating-font-size);
}
.woocommerce ul.products li.product .wc-block-components-product-rating__stars{
  height: var(--rating-height);
  font-size: var(--rating-font-size);
}

/* If NO rating exists, add an invisible placeholder so alignment holds */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:not(:has(.star-rating, .wc-block-components-product-rating))::after{
  content:"";
  display:block;
  height:var(--rating-height);
  margin-top: var(--rating-gap-top);
}

/* -------------------- Price row — fixed rhythm -------------------- */
.woocommerce ul.products li.product .price{
  margin-top:.35rem;
  line-height:1.2;
  min-height:1.2em;                      /* single-row height */
  white-space:nowrap;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins{
  display:inline;                        /* prevent wrap onto 2 rows */
}

/* -------------------- CTA(s) aligned to bottom -------------------- */
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > button.button,
.woocommerce ul.products li.product > .button{
  margin-top:auto;                       /* push primary CTA to bottom */
  width:100%;
}

/* If CTAs are wrapped by a container (e.g., .wbc-cta), align the wrapper too */
.woocommerce ul.products li.product .wbc-cta{ margin-top:auto; }
.woocommerce ul.products li.product > a[class*="quick"],
.woocommerce ul.products li.product .wbc-cta a[class*="quick"]{
  display:inline-flex;
  justify-content:center;
  width:100%;
  margin-top:.5rem;
}

/* Some plugins inject <br> tags around CTAs; neutralise them */
.woocommerce ul.products li.product .wbc-cta br{ display:none; }

/* Stretch items in the grid evenly */
.woocommerce ul.products{ align-items:stretch; }