/* Mailings Hover Link Block v1.5
   Desktop (>991px):
     - Initial: image + overlay (0.57), title centered.
     - Hover/focus: title fades out; blue panel fades in above image.
   ≤991px:
     - No overlay or hover effects; title and text stack below image (no transitions).
*/
.mhlb-tile.product-tile{position:relative;display:block;text-decoration:none;overflow:hidden;color:inherit;width:100%}

/* Image */
.mhlb-img{width:100%;height:auto;display:block}

/* Overlay visible by default (.57) and deepens slightly on hover (desktop only) */
.mhlb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.57);opacity:1;transition:opacity .25s ease;pointer-events:none;z-index:1}
.mhlb-tile:is(:hover,:focus) .mhlb-overlay{opacity:.7}

/* Title centered (desktop) */
.mhlb-title-wrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:10px;text-align:center;z-index:2}
.mhlb-title{display:block}

/* Blue hover panel (desktop; hidden by default) */
.mhlb-hover.prod-tile-txt{position:absolute;height:90%;left:6%;right:6%;top:43%;transform:translateY(-50%) scale(.98);background:#182a47;color:#fff;padding:18px 20px;border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.25);display:none !important;text-align:center;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:3}
.mhlb-hover .paragraph{margin:0}

/* Force-hide ANY prod-tile-txt not ours inside this tile */
.mhlb-tile :is(.prod-tile-txt):not(.mhlb-hover){display:none !important}

/* Default state: show title only */
.mhlb-tile .prod-title-div{opacity:1;transition:opacity .2s ease}

/* Hover/focus behavior (desktop) */
.mhlb-tile:is(:hover,:focus) .prod-title-div{opacity:0}
.mhlb-tile:is(:hover,:focus) .mhlb-hover{display:flex !important;justify-content:center;align-items:center;opacity:1;transform:translateY(-50%) scale(1)}

/* Breakpoint: ≤991px — no overlay, no hover, stacked content */
@media (max-width:991px){
  .mhlb-overlay{display:none !important}
  /* Remove any hover-driven changes */
  .mhlb-tile:is(:hover,:focus) .prod-title-div{opacity:1 !important}
  .mhlb-tile:is(:hover,:focus) .mhlb-hover{display:block !important;opacity:1 !important;transform:none !important}

  /* Title + text stack below image; disable transitions to prevent 'bump' */
  .mhlb-title-wrap{
    position:static;inset:auto;display:block;padding:10px 0;pointer-events:auto;z-index:auto;text-align:center;
    transition:none !important
  }
  .mhlb-hover.prod-tile-txt{
    position:static;height:auto;left:auto;right:auto;top:auto;transform:none;
    display:block !important;opacity:1 !important;padding:16px;margin-top:8px;text-align:left;
    transition:none !important;box-shadow:none
  }
  .mhlb-tile .prod-title-div{opacity:1 !important;transition:none !important}
}

/* Focus ring */
.mhlb-tile:focus{outline:2px solid #0B5FFF;outline-offset:2px}

/* JS fallback classes (desktop only; JS disables for ≤991px) */
.mhlb-hide{opacity:0 !important}
.mhlb-show{display:flex !important;opacity:1 !important;transform:translateY(-50%) scale(1) !important}