/* Shared by every homepage product grid (Phase 5) and the shop archive
   (Phase 6) - see inc/helpers/product-card.php. */

/* Base grid the woocommerce_product_loop_start filter (inc/hooks/shop-hooks.php)
   wraps around EVERY WooCommerce product loop sitewide, not just the shop
   archive - including the native related/upsell/cross-sell sections WC
   core renders on single product pages. shop.css (which has the rest of
   the .hs-shop-grid rules, like the list-view layout) only loads on
   is_shop()/is_product_taxonomy(), so a product page's related-products
   grid was getting the class with no matching CSS at all above the
   ct-hidden-sm/ct-hidden-md breakpoint - collapsing into an unstyled
   single-column block. This file already loads on both shop and product
   pages, so the base grid belongs here, not in shop.css. */
.hs-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--hs-space-24);
  list-style: none;
  margin: 0 0 var(--hs-space-32);
  padding: 0;
}

.hs-product-card {
  display: flex;
  flex-direction: column;
  /* Every card in a grid row ends up the same total height regardless
     of title length or sale price - the image keeps its natural 1:1
     aspect-ratio (never cropped/distorted), and the body below it gets
     a fixed height with a clamped title (see .hs-product-card__title),
     so the two stacked together always add up to the same total no
     matter how long a given product's name is. A single hardcoded
     total height doesn't work here since the square image's actual
     pixel height changes with the card's width across breakpoints -
     fixing the *body* height is what stays correct at every width. */
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--hs-transition-normal) var(--hs-ease),
    transform var(--hs-transition-normal) var(--hs-ease);
}
.hs-product-card:hover {
  box-shadow: var(--hs-shadow-hover);
  transform: translateY(-.25rem);
}

.hs-product-card__media {
  position: relative;
  /* A fixed height instead of aspect-ratio: whenever the grid stretches
     a card taller than its own content needs (CSS Grid's default
     align-items: stretch, matching the tallest card in the row), an
     aspect-ratio box would grow to fill that extra height too since
     it's a flex sibling of the body block - undoing the very
     consistency the body's min-heights above were added for, and
     making the image area itself the actual remaining source of
     mismatched card heights. Fixed height is immune to that. */
  height: 15rem;
  background: var(--hs-color-surface-sunken);
}
.hs-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-product-card__badges {
  position: absolute;
  top: var(--hs-space-12);
  inset-inline-start: var(--hs-space-12);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}
.hs-product-card__badges .hs-badge {
  padding: .1875rem var(--hs-space-8);
  font-size: .6875rem;
}

.hs-product-card__wishlist {
  position: absolute;
  top: var(--hs-space-12);
  inset-inline-end: var(--hs-space-12);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--hs-radius-full);
  background: rgba(255, 255, 255, .9);
  color: var(--hs-color-gray-500);
  box-shadow: var(--hs-shadow-soft);
  transition: color var(--hs-transition-fast) var(--hs-ease);
}
.hs-product-card__wishlist:hover,
.hs-product-card__wishlist.is-active {
  color: var(--hs-color-primary-500);
}
.hs-product-card__wishlist svg {
  width: 1.0625rem;
  height: 1.0625rem;
}
.hs-product-card__wishlist.is-active svg {
  fill: currentColor;
}

.hs-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding: var(--hs-space-16);
  flex: 1;
}

/* Category, rating and the sale-price second line (del+ins) are all
   conditional in inc/helpers/product-card.php - a product missing any
   of them would otherwise leave its card shorter than its neighbors in
   the same grid row. Reserving a fixed min-height for each (rather than
   only clamping the title) is what actually keeps every card in a row
   the same height regardless of which optional bits a given product
   has. */
.hs-product-card__category {
  min-height: 1.1em;
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.hs-product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(var(--hs-font-size-body) * var(--hs-line-height-tight) * 2);
  overflow: hidden;
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-semibold);
  line-height: var(--hs-line-height-tight);
}
/* The title link has no [class] attribute (see inc/helpers/product-
   card.php), so without an explicit color here it falls through to the
   sitewide a:not([class]) rule in base/typography.css - a dark rust-
   orange tuned for links on a light page, which reads as near-black on
   every dark card (product grids, carousels, related/upsell) sitewide. */
.hs-product-card__title a {
  color: var(--hs-color-text);
}
.hs-product-card__title a:hover {
  color: var(--hs-color-primary-500);
}

.hs-product-card__rating {
  min-height: 1.1rem;
}
.hs-product-card__rating .star-rating {
  font-size: .8rem;
}

.hs-product-card__price {
  margin-block-start: auto;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-bold);
  /* --hs-color-primary-fill (not the -700 shade used elsewhere on the
     site) - the same WCAG-checked solid-fill orange as badges/buttons,
     picked for the strongest accent on the card. */
  color: var(--hs-color-primary-fill);
}
.hs-product-card__price ins {
  text-decoration: none;
  color: var(--hs-color-primary-fill);
}
.hs-product-card__price del {
  color: var(--hs-color-text-muted);
  font-weight: var(--hs-font-weight-regular);
  font-size: var(--hs-font-size-body-sm);
  margin-inline-end: var(--hs-space-8);
}

.hs-product-card__footer {
  padding: 0 var(--hs-space-16) var(--hs-space-16);
}

/* Styles WooCommerce's own add-to-cart button (its default ".button"
   class) rather than overriding the classes woocommerce_template_loop_
   add_to_cart() generates - see inc/helpers/product-card.php for why:
   overriding them drops "ajax_add_to_cart", which breaks AJAX add-to-
   cart entirely. */
.hs-product-card__footer .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5rem;
  padding: var(--hs-space-8) var(--hs-space-16);
  border: 1px solid transparent;
  border-radius: var(--hs-radius-md);
  background: var(--hs-color-primary-fill);
  color: #fff;
  font-family: var(--hs-font-family-base);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-semibold);
  text-align: center;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}
.hs-product-card__footer .button:hover {
  background: var(--hs-color-primary-fill-hover);
  color: #fff;
}
.hs-product-card__footer .button.loading {
  position: relative;
  color: transparent;
}
.hs-product-card__footer .button.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid #fff;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: hs-spin .7s linear infinite;
}
.hs-product-card__footer .added_to_cart {
  display: block;
  margin-top: var(--hs-space-8);
  text-align: center;
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-primary-700);
  text-decoration: underline;
}