/*
 * WGE product card — inc/wge-product-card.php.
 *
 * Second image on hover, and the model-count / scale / size spec line.
 * Loaded site-wide because product loops turn up on the shop, category
 * archives, search, related products, the /sci-fi/ and /fantasy/ shortcode
 * pages, the homepage rows, and widgets.
 */

/* --- second image on hover --- */

.wge-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}

.wge-thumb .wge-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.wge-thumb.has-secondary .wge-thumb-secondary {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

/*
 * Only on devices that genuinely hover. On touch there is no hover state to
 * leave, so the second image would stick after a tap and look like a bug.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  .wge-thumb.has-secondary .wge-thumb-primary,
  .wge-thumb.has-secondary .wge-thumb-secondary {
    transition: opacity .25s ease;
  }
}

@media (hover: hover) {

  li.product:hover .wge-thumb.has-secondary .wge-thumb-secondary,
  li.product:focus-within .wge-thumb.has-secondary .wge-thumb-secondary {
    opacity: 1;
  }

  li.product:hover .wge-thumb.has-secondary .wge-thumb-primary,
  li.product:focus-within .wge-thumb.has-secondary .wge-thumb-primary {
    opacity: 0;
  }
}

/* --- spec line --- */

.wge-card-specs {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}

.wge-card-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: lato, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #55585c;
  white-space: nowrap;
}

.wge-card-spec::before {
  content: none;
}

.wge-card-spec svg {
  flex: 0 0 auto;
  color: #af111c;
}

/* The count is the one buyers scan for, so it carries the emphasis. */
.wge-card-spec--count {
  color: #2b2d2f;
  font-weight: 700;
}

/* --- star rating on cards --- */

/*
 * Cards with no reviews yet render an empty .star-rating box. Collapse it so
 * a rated and an unrated card do not sit at different heights in a grid row.
 */
.woocommerce ul.products li.product .star-rating {
  margin-bottom: 6px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title + .star-rating:empty {
  display: none;
}

@media only screen and (max-width: 800px) {

  .wge-card-specs {
    gap: 3px 8px;
  }

  .wge-card-spec {
    font-size: 11px;
  }
}