/* ============================================================
   Shop > Products grid
   View-specific CSS for Views/Shop/Products.cshtml
   ============================================================ */

/* ------------------------------------------------------------
   Whole-card click target

   Only the thumbnail and the title were links, so the empty
   space around them - the padding, the category line, the price,
   and the whole image box on any product WITHOUT a photo (a large
   share of the catalogue) - did nothing when clicked. On the
   products grid the most-clicked product is often the one with no
   image yet, which was precisely the dead area.

   Bootstrap's .stretched-link expands one anchor to cover its
   nearest positioned ancestor, so the card needs an explicit
   position for the anchor to stretch against. Without this the
   link would escape and cover the whole page.
   ------------------------------------------------------------ */
.product-card {
    position: relative;
}

/* Anything interactive inside the card must sit ABOVE the stretched
   overlay or it becomes unclickable - the overlay covers it. */
.product-card .btn,
.product-card a:not(.stretched-link),
.product-card button {
    position: relative;
    z-index: 2;
}

/* The card is now one big link, so give the whole thing the cursor
   and keep the title colour reacting on hover anywhere in the card. */
.product-card {
    cursor: pointer;
}

.product-card:hover .product-title-link {
    color: var(--bs-success, #0f9d58) !important;
}

/* Out-of-stock cards still link through to the product page (a user
   may want to see it), but should not pretend to be actionable. */
.product-card.out-of-stock {
    cursor: default;
}