/* ---- Global defaults (work even if overlay is outside .yg3-hub) ---- */
:root{
  --sf-size:40px;
  --sf-heart:24px;
  --sf-accent:#ef4444;      /* active fill + border */
  --sf-idle:#cbd5e1;        /* idle fill */
  --sf-bg:rgba(0,0,0,.45);
  --sf-bg-h:rgba(0,0,0,.6);
  --sf-bd:rgba(255,255,255,.6);
  --sf-bd-h:rgba(255,255,255,.75);
}
@media (prefers-color-scheme: dark){
  :root{ --sf-accent:#f87171; --sf-bd:rgba(255,255,255,.55); --sf-bd-h:rgba(255,255,255,.7); }
}

/* If the chosen host was static, JS adds this to anchor the overlay absolutely */
.yg3-sf-host{ position: relative !important; }

/* Cards can host absolute children */
.yg3-hub .yg3-card{ position: relative; }

/* ---- HEART BUTTON (card + overlay) ----
   Use var fallbacks so it works even outside .yg3-hub */
.yg3-hub .yg3-card .yg3-sf-heart,
.yg3-sf-overlay{
  position:absolute !important;
  top:16px !important; left:16px !important; right:auto !important;
  width:var(--sf-size, 40px) !important; height:var(--sf-size, 40px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  -webkit-appearance:none !important; appearance:none !important;
  background:var(--sf-bg, rgba(0,0,0,.45)) !important; background-clip:padding-box !important;
  border:1px solid var(--sf-bd, rgba(255,255,255,.6)) !important;
  border-radius:999px !important;
  color:inherit !important; box-shadow:none !important; outline:0 !important;
  cursor:pointer !important; z-index:10 !important;
  line-height:0 !important; padding:0 !important;
  transition:background-color .12s ease, border-color .12s ease, transform .12s ease !important;
}
.yg3-hub .yg3-card .yg3-sf-heart:hover,
.yg3-sf-overlay:hover{
  background:var(--sf-bg-h, rgba(0,0,0,.6)) !important;
  border-color:var(--sf-bd-h, rgba(255,255,255,.75)) !important;
  transform:scale(1.04) !important;
}

/* ACTIVE border must be red (not theme green) */
.yg3-hub .yg3-card.is-fav .yg3-sf-heart,
.yg3-sf-overlay.is-active{
  border-color: var(--sf-accent, #ef4444) !important;
}

/* ---- HEART GLYPH (mask) ---- */
.yg3-hub .yg3-card .yg3-heart,
.yg3-sf-overlay .yg3-heart{
  width:var(--sf-heart, 24px) !important; height:var(--sf-heart, 24px) !important;
  display:block !important; position:relative !important;
}
.yg3-hub .yg3-card .yg3-heart::before,
.yg3-sf-overlay .yg3-heart::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.76 7.1 6.75 5.14 8.7c-1.96 1.96-1.96 5.14 0 7.1l6.36 6.36 6.36-6.36c1.96-1.96 1.96-5.14 0-7.1-1.96-1.95-5-1.94-6.76 0z"/></svg>') center/contain no-repeat !important;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.76 7.1 6.75 5.14 8.7c-1.96 1.96-1.96 5.14 0 7.1l6.36 6.36 6.36-6.36c1.96-1.96 1.96-5.14 0-7.1-1.96-1.95-5-1.94-6.76 0z"/></svg>') center/contain no-repeat !important;
  background: var(--sf-idle, #cbd5e1) !important; /* idle grey */
}
.yg3-hub .yg3-card.is-fav .yg3-heart::before,
.yg3-sf-overlay.is-active .yg3-heart::before{
  background: var(--sf-accent, #ef4444) !important; /* active red */
}

/* StoredFav tab badge */
.yg3-hub .yg3-tab[data-tab="sf"] .yg3-sf-count{ margin-left:.35em; font-weight:600; opacity:.85; }

/* Hide any legacy overlay heart */
.yg365-fav-btn.is-heart{ display:none !important; }

/* a11y helper */
.yg3-visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Ensure only one badge shows on our StoredFav tab */
.yg3-hub .yg3-tab[data-tab="sf"] .count { display: none !important; }