/* PROMO! sticker (Oct 2026), matching the new site: yellow, tilted, wiggles when the card is hovered.
   Replaces the old promo-stamp.svg on studio cards and the studio page. */
.sh-promo-sticker {
  display: inline-block;
  padding: 5px 10px 4px;
  border-radius: 4px;
  background-color: #ffcc00;
  color: #222;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.5px;
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: rotate(-5deg);
  transform-origin: left center;
  z-index: 2; /* above the home page's see-through name bar, which dulled it */
}

/* Home page cards: sit on the photo, just above the name bar, so long names never run into it */
.homepageListing .sh-promo-sticker {
  bottom: calc(100% + 10px) !important;
  right: 12px !important;
}

*:has(> .search-result-words-wrapper):hover .sh-promo-sticker,
.sh-promo-sticker:hover {
  animation: sh-wiggle 0.5s ease-in-out;
}

@keyframes sh-wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -6deg; }
  50% { rotate: 5deg; }
  75% { rotate: -3deg; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-promo-sticker { animation: none !important; }
}