.mosaic figure a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}

.mosaic figure a img {
  transition: transform 0.45s ease;
}

.mosaic figure a:hover img,
.mosaic figure a:focus-visible img {
  transform: scale(1.05);
}

.mosaic figure a:focus-visible {
  outline: 4px solid rgba(255, 90, 61, 0.7);
  outline-offset: -4px;
}

.mosaic figure:has(a)::after {
  content: "View product";
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 90, 61, 0.9);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.mosaic figure:has(.product-zoomable)::after {
  content: "Click to enlarge";
  background: rgba(15, 17, 26, 0.74);
}