/* --- Καρδιά --- */
.fav-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 26px;
  color: var(--fav-color, #888); /* πιο σκούρο γκρι για ανενεργή */
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 5;

  /* 👇 δημιουργεί “buffer” γύρω από την καρδιά */
  padding: 3px;
  background: rgba(255, 255, 255, 0.05); /* σχεδόν διάφανο – απλώς για hit area */
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.15); /* διακριτικό shadow */
}

/* Όταν είναι ενεργή */
.fav-icon.active {
  color: #1d6db3;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(29,109,179,0.4); /* μπλε “glow” */
}

/* Hover effect */
.fav-icon:hover {
  color: #0b4e80;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(11,78,128,0.5); /* ενισχυμένο glow */
}

/* Σε dark theme */
[data-theme="dark"] .fav-icon:not(.active) {
  color: #ccc;
}

/* Απομονώνει πλήρως τα clicks – δεν αφήνει να περάσουν στην εικόνα */
.fav-icon {
  pointer-events: auto;
}
.browseProductImage {
  pointer-events: none; /* μπλοκάρει click από κάτω */
}
.browseProductImage img {
  pointer-events: none;
}

/* Toast */
.fav-toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.fav-toast.show {
  opacity: 1;
}