/* Small heart in the lower-left corner of the price area. */
.home-page #product-area .product-content .product-price { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 64px; }
.pb-reaction-wrap { position: absolute; left: 0; bottom: 2px; z-index: 8; margin: 0; }
.home-page button.pb-reaction {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  width: 60px; height: 44px; min-height: 44px; padding: 0 6px; margin: 0;
  border: 0; border-radius: 18px; background: transparent;
  color: #a77b88; box-shadow: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
}
 .pb-reaction svg { width: 20px; height: 20px; flex: 0 0 20px; overflow: visible; fill: none; stroke: #ce96a6; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: fill .35s ease, stroke .35s ease, transform .35s ease; }
.pb-reaction-count {
  position: static; display: block; padding: 0; margin: 0; min-width: 0; height: auto;
  background: transparent; color: #967580; border: 0; box-shadow: none;
  font: 500 12px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.home-page button.pb-reaction.is-liked { background: transparent; }
.pb-reaction.is-liked svg { fill: #d9a3b2; stroke: #ce96a6; }
/* Hover stays completely still and unframed. */
.home-page button.pb-reaction:hover,
.home-page button.pb-reaction:active { transform: none; background: transparent; box-shadow: none; border: 0; }
.home-page button.pb-reaction { isolation: isolate; overflow: visible; }
.pb-reaction svg, .pb-reaction-count { position: relative; z-index: 1; }
.home-page button.pb-reaction:focus-visible { outline: 2px solid #b85c7b; outline-offset: 4px; }
.home-page button.pb-reaction:disabled { cursor: progress; opacity: .75; }
/* Keep spoken confirmation available without adding text below the card. */
.pb-reaction-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pb-reaction-note.is-error { left: 0; bottom: 54px; width: max-content; max-width: 220px; height: auto; margin: 0; padding: 8px 10px; overflow: visible; clip-path: none; white-space: normal; border-radius: 10px; background: #fff; color: #9b3657; box-shadow: 0 3px 14px #40213224; font: 500 11px/1.5 sans-serif; }
/* Two soft contractions: lub-dub, then a gentle return to rest. */
.pb-reaction.just-liked svg { transform-origin: 50% 58%; animation: pb-heartbeat 1s ease-in-out both; }
@keyframes pb-heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(.94); }
  20% { transform: scale(1.24, 1.18); }
  31% { transform: scale(.98); }
  40% { transform: scale(1.16, 1.12); }
  53% { transform: scale(.99); }
  70% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page button.pb-reaction, .pb-reaction svg, .pb-reaction-count { transition: none !important; animation: none !important; }
}

.pb-reaction-count:empty { display: none; }