/*
 * 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 --- */

/*
 * A fixed square box for every card image.
 *
 * This used to be `height: auto`, which let each image take the height its own
 * file dictated. Catalogue images are not all the same aspect ratio, so cards
 * in a row ended up with images of different heights, titles and prices that
 * did not line up, and — worst of all — a product whose image 404s collapsed
 * the box to nothing and dragged the rest of the card up with it.
 *
 * `contain` rather than `cover`: a miniature that does not fit the square is
 * letterboxed, never cropped. Cropping a model's head off to fill a box is a
 * worse failure than a little white space.
 */
.wge-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/*
 * The square goes on the IMAGE, via aspect-ratio — not on its height.
 *
 * This shipped once as `height: 100%; object-fit: contain` and did nothing at
 * all. A percentage height resolves against the containing block's height, and
 * `.wge-thumb` has no height of its own — it gets one from `aspect-ratio`,
 * which is not definite for percentage resolution, so the declaration computed
 * to `auto`. The box then matched the image's own ratio, leaving `contain`
 * with nothing to do, and a 289x433 thumbnail rendered at 289x433 and was
 * quietly clipped by `overflow: hidden`.
 *
 * `max-height: 100%` is not the answer either: WooCommerce's own
 * `.woocommerce ul.products li.product a img { width: 100% }` is four classes
 * deep and beats any `width: auto` here, so the width stays pinned at 100%
 * while the height gets clamped — which squashes a tall image rather than
 * fitting it.
 *
 * `aspect-ratio: 1 / 1` on the image agrees with that `width: 100%` instead of
 * fighting it: the element becomes a square of its own accord, and
 * `object-fit: contain` then fits the picture inside it — never distorted,
 * never cropped. The square on `.wge-thumb` stays as well, so a product whose
 * image 404s still leaves a correctly-sized hole instead of collapsing.
 */
.wge-thumb .wge-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  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;
  /* Brand red, not the #af111c that used to sit here — two near-identical reds
     on one page read as a mistake. The white fill keeps them outline marks
     rather than solid blobs; CSS beats the fill="none" presentation attribute
     on the element, so the markup needs no change. */
  color: var(--gbl-primary-color, #a12324);
  fill: #fff;
}

/* 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;
  }
}

/* --- Star rating on cards -------------------------------------------------
 * Sits between the title and the price. Only rendered for products that have
 * reviews (inc/wge-ratings.php), so no space is reserved for the majority of
 * the catalogue that has none.
 */
.wge-card-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 2px 0 4px;
    line-height: 1;
}

/* Core sizes .star-rating in em against an inherited font-size; pin it so the
 * stars are the same size on every card regardless of surrounding type. */
.woocommerce .products .wge-card-rating .star-rating {
    display: block;
    float: none;
    margin: 0;
    font-size: 13px;
}

/*
 * Brand red stars, everywhere a rating appears.
 *
 * Setting `color` on `.star-rating` does nothing: the glyphs are painted by
 * pseudo-elements that carry their own explicit colours — `li .star-rating >
 * span::before` is gold (#ffd700) in style.css and `.woocommerce
 * .star-rating::before` is grey in WooCommerce's own CSS — so the parent's
 * colour is never inherited. The pseudo-elements are what has to be targeted.
 *
 * Only the filled set is recoloured. The empty set stays grey, because that
 * contrast is the whole point of a star rating: red on red would show five
 * stars at every score.
 */
.woocommerce .star-rating > span::before,
li .star-rating > span::before,
.wge-card-rating .star-rating > span::before {
    color: var(--gbl-primary-color, #a12324);
}


/* ==========================================================================
   Mobile product grid
   --------------------------------------------------------------------------
   Moved here from the WGE Mobile UX plugin (its section 2d). Card layout is
   theme territory — this file already owns the thumbnail box, the spec line
   and the rating — and having the two codebases style `ul.products li.product`
   at the same specificity meant load order silently decided the winner. It
   cost a debugging session when the front page's swipe row lost to a rule in
   the other file.

   Ported verbatim, `!important` and all, because a move should not change what
   renders. Those flags were written to beat `woocommerce-layout.css` and
   `style.css`, both of which now load *before* this file, so most are no longer
   needed and can be dropped in a separate pass with the layout re-measured.
   Two are load-bearing regardless and are marked below.

   `--wge-line` and `--wge-tap` still come from the plugin when it is active;
   the fallbacks are its own values, so this renders the same either way.
   ========================================================================== */

@media (max-width: 767px) {

    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
        float: none !important;
    }

    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        content: none !important;
    }

    .woocommerce ul.products li.product {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        float: none !important;
        clear: none !important;
        border: 1px solid var(--wge-line, #e4e4e4);
        overflow: hidden;
        /* the theme's 15px/6px spread shadow reads as mud once the cards are
           two-up and bordered */
        box-shadow: none !important;
    }

    /* The sale flash is absolutely positioned at right:25px for the desktop
       column width; that lands it well inside a half-width card. */
    .woocommerce ul.products li.product a .onsale {
        right: 8px !important;
    }

    .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;      /* eats the slack so the button lands at the bottom */
        gap: 4px;
    }

    .woocommerce ul.products li.product img {
        width: 100%;
        height: auto;
        margin: 0 0 6px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        flex: 1 1 auto;      /* two-line titles no longer shove the button down */
        padding: 0 8px;
        margin: 0;
        font-size: 13px;
        line-height: 1.25;
    }

    .woocommerce ul.products li.product .price {
        display: block;
        min-height: 2.4em;   /* reserves room for a wrapped sale price */
        padding: 0 8px;
        margin: 4px 0 0;
        font-size: 14px;
    }

    /* LOAD-BEARING !important: style.css sets this to 30px !important for the
       single-product page and the selector matches loop cards too, where that
       price is wider than the card. Only !important beats !important. */
    .woocommerce ul.products li.product .price .woocommerce-Price-amount bdi {
        font-size: 16px !important;
    }

    .woocommerce ul.products li.product .custom-cart-btn {
        margin-top: auto;    /* the actual fix: button pinned to card bottom */
        padding: 8px 8px 0;
    }

    .woocommerce ul.products li.product .custom-cart-btn a.button,
    .woocommerce ul.products li.product a.add_to_cart_button,
    .woocommerce ul.products li.product a.button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--wge-tap, 44px);
        margin: 0;
        text-align: center;
    }

    /* LOAD-BEARING !important: style.css reveals this on `li.product:hover`,
       which is more specific than this selector. Hover affordances are dead
       weight on touch. */
    .woocommerce ul.products li.product .hover-area {
        display: none !important;
    }
}

/* Tablet: two-up, the same shape as the phone grid but at the wider size.
   Moved out of the site's Additional CSS.

   `:not(.wge-row-products)` is the part that was missing there. The front page
   rows carry both classes on one element, so the unscoped version reached in
   and rebuilt a curated four-across row as a two-up archive grid. The related
   products and the empty-search row are excluded for the same reason — each
   sets its own columns. */
@media (min-width: 768px) and (max-width: 1024px) {

    .woocommerce:not(.wge-row-products):not(.wge-empty__products) ul.products:not(.wge-related ul.products) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .woocommerce:not(.wge-row-products):not(.wge-empty__products) ul.products li.product {
        width: 48% !important;
        float: none !important;
        margin: 0 0 2em !important;
    }
}

/*
 * Cap card images at their natural size.
 *
 * Moved out of the site's Additional CSS. The uploaded thumbnails are 330px, so
 * without this a wide card — a two-up tablet grid, or a four-up row in a 1330px
 * container — stretches a 330px file to 480px and it goes soft. The cap lets the
 * card be as wide as the layout wants while the picture stays at the size it was
 * actually made for, centred by the `margin: 0 auto` above.
 */
.woocommerce ul.products li.product a img {
    max-width: 330px;
    max-height: 330px;
}