/* ==========================================================================
   Mouldshop — product card HOVER BORDER (operator, 2026-09-24):
     "We need border on hover on product card. but not typical..
      2px bottom navy border and 1px sides borders - but - gradient from top white,
      to bottom navy"

   BOTH card surfaces: the listing grid (.product-list > .grid > article) and the product
   sliders (#ComponentSliderProducts_* li). Loaded after mouldshop-card-surfaces.css.

   WHERE IT IS DRAWN. Not with `border`: a border would change the card's box and shift the
   layout on hover. Not on the card's own ::before / ::after either: both are already taken by
   the separator rules (mouldshop-card-surfaces.css). It is drawn on the ::after of the card's
   first child, Bootstrap's a.stretched-link, which vendor already makes an absolutely
   positioned layer covering the whole card (inset 0, z-index 1, above the image, below the
   markers band). Three background layers, faded in with opacity, so the click layer it lives
   on is untouched:
     bottom  1px solid ink (was 2px; operator, same day)
     sides   1px each: clear for the top third, then transparent -> ink at the bottom

   COLOUR FOLLOWS THE ROW (DEC-0063). "Navy" is --ms-ink: navy on an unschemed row, the row's
   foreground on a schemed one. The gradient's "white" end is TRANSPARENT: identical on the
   white card, and it cannot paint a white line on a coloured row.
   ========================================================================== */

:root {
  --ms-card-hover-border-bottom: 1px;   /* operator, 2026-09-24: 2px -> 1px */
  --ms-card-hover-border-side:   1px;
  /* Where the side fade STARTS (operator, 2026-09-24: "offset this gradient down to 2/3 of
     height ... 1/3 of height from top is basically white and starts being blue"). The top third
     is clear; the fade runs from there to ink at the bottom, so the half-way mix sits at 2/3. */
  --ms-card-hover-border-side-start: 33.333%;
}

.product-list > .grid > article > a.stretched-link::after,
[id^="ComponentSliderProducts_"] .slider-container > li > a.stretched-link::after {
  --ms-hb-ink: var(--ms-ink, #0A2979);
  background:
    linear-gradient(var(--ms-hb-ink), var(--ms-hb-ink))
      left bottom / 100% var(--ms-card-hover-border-bottom) no-repeat,
    linear-gradient(to bottom, transparent var(--ms-card-hover-border-side-start), var(--ms-hb-ink))
      left top / var(--ms-card-hover-border-side) 100% no-repeat,
    linear-gradient(to bottom, transparent var(--ms-card-hover-border-side-start), var(--ms-hb-ink))
      right top / var(--ms-card-hover-border-side) 100% no-repeat;
  opacity: 0;
  transition: opacity var(--ms-card-hover-ease, .35s cubic-bezier(0.78, 0, 0.22, 1));
}

.product-list > .grid > article:hover > a.stretched-link::after,
[id^="ComponentSliderProducts_"] .slider-container > li:hover > a.stretched-link::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .product-list > .grid > article > a.stretched-link::after,
  [id^="ComponentSliderProducts_"] .slider-container > li > a.stretched-link::after {
    transition: none;
  }
}