.photo-like-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 60px; min-height: 40px; padding: 9px 12px;
  border: 1px solid #b8d2dd; border-radius: 24px;
  background: #eaf4f8; color: #245d77; font: inherit;
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.photo-like-button svg { display: block; width: 19px; height: 19px; flex: 0 0 19px; }
.photo-like-count { min-width: 1ch; font-variant-numeric: tabular-nums; }
.photo-like-button:hover:not(:disabled) { background: #d9edf5; border-color: #6fa8c0; }
.photo-like-button.is-liked { background: #285f79; border-color: #285f79; color: #fff; }
.photo-like-button.is-liked:hover:not(:disabled) { background: #214e64; border-color: #214e64; }
.photo-like-button:focus-visible { outline: 2px solid #306e8c; outline-offset: 3px; }
.photo-like-button:disabled { cursor: default; }
.photo-like-button.is-pending { opacity: .65; }
.photo-like-button.has-error { border-style: dashed; }
.photo-like-card { margin-top: 10px; }
.about-image > .photo-like-about { position: absolute; top: 14px; right: 14px; margin: 0; }
.photo-like-hero { flex-shrink: 0; }
.photo-like-lightbox { background: #243a46; border-color: #577888; color: #dcecf4; }
.photo-like-lightbox:hover:not(:disabled) { background: #2d4a59; border-color: #9bc2d4; }
.photo-like-lightbox.is-liked { background: #c9e6f3; border-color: #c9e6f3; color: #204e64; }
.photo-like-lightbox.is-liked:hover:not(:disabled) { background: #e0f2fa; border-color: #e0f2fa; }
.photo-likes-status {
  position: fixed; z-index: 100; inset: auto 20px 20px auto;
  display: flex; align-items: center; gap: 15px;
  max-width: min(430px, calc(100vw - 40px)); padding: 13px 17px;
  border: 1px solid #b4cfdb; border-radius: 10px;
  background: #eef6fa; color: #204c62;
  box-shadow: 0 6px 25px #132f401c; font-size: 12px; line-height: 1.55;
}
.photo-likes-status[hidden] { display: none; }
.photo-likes-retry {
  border: 0; padding: 6px 0; color: inherit; background: none;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; flex-shrink: 0;
}
.photo-likes-retry:disabled { opacity: .55; cursor: default; }
.photo-likes-retry:focus-visible { outline: 2px solid #306e8c; outline-offset: 3px; }
@media (max-width: 680px) {
  .photo-like-button { min-height: 38px; min-width: 55px; padding: 8px 10px; font-size: 11px; }
  .photo-like-button svg { width: 18px; height: 18px; flex-basis: 18px; }
  .photo-like-card { margin-top: 8px; }
  .photo-likes-status { inset: auto 12px 12px 12px; max-width: none; gap: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-like-button { transition: none; }
}

/* Shared decorative feedback for Love It and saving a favourite. */
.photo-like-button, .favorite-photo { position: relative; }
.favorite-toggle, .favorite-photo { overflow: visible; }
.photo-love-burst {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  color: #dc4b64; font-family: Arial, sans-serif; font-size: 18px;
  line-height: 1; text-shadow: 0 1px 3px #ffffff80;
}
.photo-love-burst > span {
  position: absolute; left: calc(50% - 9px); top: 5px; opacity: 0;
  animation: morgan-love-hearts 820ms ease-out both;
  --love-x: -23px; --love-y: -28px; --love-turn: -18deg;
}
.photo-love-burst > span:nth-child(2) {
  --love-x: 0px; --love-y: -40px; --love-turn: 8deg;
  animation-delay: 55ms; font-size: 21px;
}
.photo-love-burst > span:nth-child(3) {
  --love-x: 23px; --love-y: -30px; --love-turn: 20deg;
  animation-delay: 110ms;
}
.photo-like-button.is-love-animating > svg,
:is(.favorite-toggle,.favorite-photo).is-love-animating > .control-icon {
  animation: morgan-love-pop 440ms ease-out;
  transform-origin: center;
}
@keyframes morgan-love-pop {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.3) rotate(-9deg); }
  65% { transform: scale(.94) rotate(5deg); }
}
@keyframes morgan-love-hearts {
  0% { opacity: 0; transform: translate(0, 3px) scale(.4); }
  18% { opacity: 1; }
  65% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--love-x), var(--love-y)) scale(1.05) rotate(var(--love-turn)); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-love-burst { display: none; }
  .photo-like-button.is-love-animating > svg,
  :is(.favorite-toggle,.favorite-photo).is-love-animating > .control-icon { animation: none; }
}