/* Hover mood (owner 2026-10-30, rebase 2026-11-01, V2 instant hover 2026-11-03). Only cards rendered with .wfl-tile__mood carry it.
   Touch / coarse pointers: never shown and never fetched (the img has no src until the inline loader sets it, and the loader
   only acts under (hover: hover) and (pointer: fine): preloaded when the tile nears the viewport, revealed here by opacity). */
.wfl-tile__mood,
.wfl-tile__mood-caption { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .wfl-tile__media:has(> .wfl-tile__mood) { position: relative; }
  /* T38: PDP v6 rail cards (cross-sell, collection) use the same receiver; their media box clips the 4:3 white spread. */
  .v6-rail-card__media:has(> .wfl-tile__mood) { position: relative; overflow: hidden; }
  /* Absolute, so no layout shift; no zoom; a short opacity fade (none under reduced motion).
     R11 (owner 2026-11-06): a centred 4:3 frame in the tile, cover, white above / below. A padded square file shows its
     4:3 photo band, a true square mood is centre-cropped to 4:3, so every mood looks the same (main image unchanged).
     The media box clips the white spread (overflow: hidden). */
  .wfl-tile__media > img.wfl-tile__mood,
  .v6-rail-card__media > img.wfl-tile__mood {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    /* the tile white above / below the frame and behind transparent file padding (DEV: Cloud's packshot showed through) */
    background-color: #fff !important;
    box-shadow: 0 0 0 100vmax #fff !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    transition: opacity .2s ease !important;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }
  .wfl-tile__link:hover .wfl-tile__media > img.wfl-tile__mood,
  .wfl-tile__link:focus-visible .wfl-tile__media > img.wfl-tile__mood,
  a.v6-card:hover .v6-rail-card__media > img.wfl-tile__mood,
  a.v6-card:focus-visible .v6-rail-card__media > img.wfl-tile__mood { opacity: 1; }
  /* R7 (N1): not loaded yet (no src, loading, 404, or AJAX-inert): paint nothing, not even Chromium's 1px empty-image
     frame; the packshot stays visible. The loader sets data-wfl-mood-ready on the img's load event. */
  .wfl-tile__media > img.wfl-tile__mood:not([data-wfl-mood-ready]),
  .v6-rail-card__media > img.wfl-tile__mood:not([data-wfl-mood-ready]) { visibility: hidden; }
  /* AI caption of the visible hover image, overlaid inside the square; only once the mood is loaded (R7, N1). */
  .wfl-tile__link:hover .wfl-tile__media > img.wfl-tile__mood[data-wfl-mood-ready] + .wfl-tile__mood-caption,
  .wfl-tile__link:focus-visible .wfl-tile__media > img.wfl-tile__mood[data-wfl-mood-ready] + .wfl-tile__mood-caption,
  a.v6-card:hover .v6-rail-card__media > img.wfl-tile__mood[data-wfl-mood-ready] + .wfl-tile__mood-caption,
  a.v6-card:focus-visible .v6-rail-card__media > img.wfl-tile__mood[data-wfl-mood-ready] + .wfl-tile__mood-caption {
    display: block !important;
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    margin: 0;
    padding: .35rem .5rem;
    background: rgba(255, 255, 255, .94);
    color: #252525;
    font-size: .6875rem;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
  }
  /* The packshot's own caption does not describe the hover image: hide it in place (keeps its space), but only while the
     loaded mood actually covers the packshot (R7, N1): until then an AI packshot keeps its caption. */
  .wfl-tile__link:hover .wfl-tile__media:has(> img.wfl-tile__mood[data-wfl-mood-ready]) + .wfl-ai-image-caption,
  .wfl-tile__link:focus-visible .wfl-tile__media:has(> img.wfl-tile__mood[data-wfl-mood-ready]) + .wfl-ai-image-caption,
  a.v6-card:hover .v6-rail-card__media:has(> img.wfl-tile__mood[data-wfl-mood-ready]) + .wfl-ai-image-caption,
  a.v6-card:focus-visible .v6-rail-card__media:has(> img.wfl-tile__mood[data-wfl-mood-ready]) + .wfl-ai-image-caption { visibility: hidden; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .wfl-tile__media > img.wfl-tile__mood,
  .v6-rail-card__media > img.wfl-tile__mood { transition: none !important; }
}