/* ==========================================================================
   Canonical WooCommerce product card — shared by shop, archives, related
   products and the homepage product blocks. Loaded globally (small).
   ========================================================================== */
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(var(--hcg-cols, 4), minmax(0, 1fr));
}
/* Kill WooCommerce's float-era clearfix pseudo-elements (they become grid items
   and shift the first card out of column 1). */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }

ul.products.columns-2 { --hcg-cols: 2; }
ul.products.columns-3 { --hcg-cols: 3; }
ul.products.columns-4 { --hcg-cols: 4; }
ul.products.columns-5 { --hcg-cols: 5; }

ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hcg-card-bg);
  border: 1px solid var(--hcg-line);
  border-radius: var(--hcg-radius);
  overflow: hidden;
  transition: transform var(--hcg-transition), box-shadow var(--hcg-transition);
  text-align: left;
  margin: 0 !important;
  width: auto !important;
}
ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--hcg-shadow-lg); }

ul.products li.product a.woocommerce-LoopProduct-link { display: block; color: inherit; }
ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--hcg-primary-tint);
  margin: 0 !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2, ul.products li.product h3 {
  font-size: 1rem; font-weight: 600; line-height: 1.35;
  padding: 16px 16px 6px; margin: 0; color: var(--hcg-ink);
}

ul.products li.product .price {
  display: block; padding: 0 16px;
  /* Bottom margin guarantees a gap above the bottom-pinned button even when a
     2-line title fills the card and margin-top:auto collapses. */
  margin: 0 0 16px;
  color: var(--hcg-primary-dark); font-weight: 700; font-size: 1.05rem;
}
ul.products li.product .price del { color: var(--hcg-ink-soft); font-weight: 400; opacity: .7; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; color: var(--hcg-sale); }

ul.products li.product .star-rating { margin: 8px 16px 0; font-size: .8em; color: var(--hcg-star); }

/* Add-to-basket / select-options — signature yellow pill, dark ink text */
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin: auto 16px 16px;
  display: flex; align-items: center; justify-content: center;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--hcg-action); color: var(--hcg-ink); font-weight: 700; font-size: .9rem;
  border: 0; cursor: pointer;
  transition: background var(--hcg-transition);
  text-align: center;
}
ul.products li.product .button:hover { background: var(--hcg-action-hover); color: var(--hcg-ink); }
ul.products li.product .button.loading { opacity: .7; }

/* Payment-instalment loop messaging safety net */
ul.products li.product square-placement,
ul.products li.product .ppcp-messages { display: none !important; }

/* Sale flash */
ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--hcg-primary); color: #fff;
  min-height: auto; min-width: auto;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1; margin: 0;
}

@media (max-width: 900px) { ul.products, ul.products.columns-5, ul.products.columns-4 { --hcg-cols: 3; } }
@media (max-width: 640px) { ul.products, ul.products.columns-5, ul.products.columns-4, ul.products.columns-3 { --hcg-cols: 2; } }

/* ==========================================================================
   Re-assert at .woocommerce specificity so shop/archive/related cards match
   the homepage blocks. This sheet loads after woocommerce.css → source order
   wins, no !important needed.
   ========================================================================== */
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 {
  font-size: 1rem; font-weight: 600; line-height: 1.35; padding: 16px 16px 6px; margin: 0; color: var(--hcg-ink);
}
.woocommerce ul.products li.product .price { font-size: 1.05rem; font-weight: 700; margin: 0 0 16px; color: var(--hcg-primary-dark); }
.woocommerce ul.products li.product .star-rating { margin: 8px 16px 0; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: flex; margin: auto 16px 16px; padding: .7em 1.1em; border-radius: 999px;
  background: var(--hcg-action); color: var(--hcg-ink); font-weight: 700;
}
.woocommerce ul.products li.product .button:hover { background: var(--hcg-action-hover); }