/*!
 * YG3 — Heart in Icon Row (desktop + mobile) · v1.2
 * Applies ONLY to hearts inside .yg3-card__actions.
 * Overlay/video hearts remain untouched.
 *
 * Changes in v1.2:
 * - Match 32×32 chip size used by yg3-hub-layout.css
 * - Support both .yg3-sf-heart and .yg365-fav-btn.is-heart
 * - Keep your palette: unchecked = light grey bg + dark grey border/heart;
 *   checked = light grey bg + red border/heart
 * - Remove extra margins so grid gap controls spacing
 */

/* 0) Selector aliases (heart can be either class) */
:root { /* no-op – for readability */ }
/* Heart elements ONLY when placed inside the actions row */
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart {}

/* 1) Kill overlay positioning when heart sits in the actions row */
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart {
  position: static !important;
  inset: auto !important; /* top/right/bottom/left */
  transform: none !important;
  z-index: auto !important;
  order: 99 !important; /* keep favourite visually last */
}

/* 2) Icon-frame look (NO circles) — 32×32 chip to match layout */
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;

  margin: 0 !important;                 /* spacing comes from grid gap */
  box-sizing: border-box !important;
  border-radius: 8px !important;        /* no circles */

  /* Unchecked visuals (requested) */
  background-color: #f3f4f6 !important; /* light grey bg */
  border: 1px solid #4b5563 !important; /* dark grey border */
  color: #4b5563 !important;            /* dark grey heart */

  /* Neutralise any legacy visuals */
  box-shadow: none !important;
  backdrop-filter: none !important;

  /* Hide any residual text; aria-label remains for SR */
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  text-shadow: none !important;
}

/* 3) Active/checked state: red border + red heart + light bg */
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-active,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-checked,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-fav,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.active,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.on,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.favorited,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart.selected,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart[aria-pressed="true"],
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-active,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-checked,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-fav,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.active,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.on,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.favorited,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.selected,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart[aria-pressed="true"],
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-active,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-checked,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.is-fav,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.active,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.on,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.favorited,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart.selected,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart[aria-pressed="true"],
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-active,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-checked,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.is-fav,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.active,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.on,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.favorited,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart.selected,
.yg3w-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart[aria-pressed="true"]{
  background-color: #f3f4f6 !important;
  border-color: #ef4444 !important;   /* red border */
  color: #ef4444 !important;          /* red heart */
}

/* 4) Inner glyph follows currentColor and correct size */
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart svg,
.yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart svg *,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart svg,
.yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart svg *,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart svg,
.yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart svg *{
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 5) Compact cards (optional modifier, if used) */
.yg3-hub .yg3-card.yg3-card--compact .yg3-card__actions .yg3-sf-heart,
.yg3-hub .yg3-card.yg3-card--compact .yg3-card__actions .yg365-fav-btn.is-heart,
.yg3w-hub .yg3-card.yg3-card--compact .yg3-card__actions .yg3-sf-heart {
  width: 30px !important;
  height: 30px !important;
}

/* 6) RTL margin correction (kept but neutral since margin:0 now) */
html[dir="rtl"] .yg3-hub .yg3-card .yg3-card__actions .yg3-sf-heart,
html[dir="rtl"] .yg3-hub .yg3-card .yg3-card__actions .yg365-fav-btn.is-heart,
html[dir="rtl"] .yg3w-hub .yg3-card .yg3-card__actions .yg3-sf-heart {
  margin: 0 !important;
}

/* 7) Final guard: direct child of actions row must never be absolute */
.yg3-card__actions > .yg3-sf-heart,
.yg3-card__actions > .yg365-fav-btn.is-heart {
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  border-radius: 8px !important; /* ensure no 50% sneaks in */
}