/* Favourites — heart buttons, toast, favourites page (includes/favorites.php) */
.sc-fav {
	display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; cursor: pointer;
	border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sc-c-card) 92%, transparent); color: var(--sc-c-ink, #2c3b33); /* card colour: dark circle + light heart in dark mode (user, 2026-09-29) */
	box-shadow: 0 2px 10px rgba(0, 0, 0, .14); transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.sc-fav svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .2s ease, stroke .2s ease; }
.sc-fav:hover { transform: scale(1.08); background: var(--sc-c-card); }
.sc-fav:focus-visible { outline: 2px solid var(--sc-c-btn, #3d7a66); outline-offset: 2px; }
/* saved = a pastel-red heart, matching the site's pastel colours (user, 2026-09-27: pink-red → hot red → pastel red) */
.sc-fav { --sc-heart: #EE7F82; }
.sc-fav:hover { color: var(--sc-heart); }
.sc-fav.is-on svg { fill: var(--sc-heart); stroke: var(--sc-heart); }
/* the catalog's favourites filter pill looks like every other pill; only its small filled heart is red (user, 2026-09-27) */
.sc-inline-heart { display: inline-block; width: 1em; height: 1em; margin-inline: .15em 0; vertical-align: -.14em; fill: #EE7F82; }
.sc-pill-heart { display: inline-block; width: 13px; height: 13px; margin-inline-end: 5px; vertical-align: -1px; fill: #EE7F82; }
.sc-fav.pop { animation: sc-fav-pop .35s ease; }
@keyframes sc-fav-pop { 40% { transform: scale(1.25); } }

/* on cards: top corner of the photo; shows on hover, always when saved (and always on touch screens) */
.sc-fav-card { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 36px; height: 36px; opacity: 0; }
.sc-fav-card svg { width: 19px; height: 19px; }
/* keyboard focus only (:focus-visible): the focus a mouse click leaves on the card stayed after "Back" and kept the
   empty heart showing until the next click (user, 2026-09-28) */
.sc-card:hover .sc-fav-card, .sc-card:focus-visible .sc-fav-card, .sc-card:has(:focus-visible) .sc-fav-card, .sc-fav-card.is-on { opacity: 1; }
@media (hover: none) { .sc-fav-card { opacity: 1; } }

/* articles / category pages: a heart over the photo corner of each article box (appears on hover, stays when saved) */
.site-main article.sc-fav-article { position: relative; }
.site-main article.sc-fav-article:hover > .sc-fav-card, .site-main article.sc-fav-article:has(:focus-visible) > .sc-fav-card { opacity: 1; }
/* the "♥ המועדפים שלי" switch under the articles page title — same pill as the catalog filters */
.sc-fav-bar { margin: 0 0 1.8rem; }
.sc-fav-bar a.sc-pill { text-decoration: none; }
.sc-fav-bar .sc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-fav-bar .sc-pill span { font-size: .9em; padding: 5px 14px; }
.sc-fav-bar .sc-pill.is-on span { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-c-btntext, #fff); }
.sc-fav-none { text-align: center; padding: 2.5rem 1rem; font-size: 1.05em; opacity: .85; }
.site-main article.sc-fav-out { opacity: 0; transform: scale(.98); transition: opacity .3s ease, transform .3s ease; }

/* plant page + article page: next to the title */
.sc-article-title-row { margin-bottom: .5rem; }
.sc-article-title-row .entry-title { margin: 0; }
.sc-pin-title-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.sc-pin-title-row .sc-pin-title { margin-bottom: 0; }
.sc-fav-page-btn { flex: none; margin-top: .2em; box-shadow: none; border: 1px solid var(--sc-c-line); background: var(--sc-c-card); }
.sc-fav-page-btn:hover { background: var(--sc-c-panel); }

/* toast — a white card just under the menu bar, centred (user, 2026-09-27: it was too low and didn't stand out) */
.sc-fav-toast {
	position: fixed; top: 50%; left: 50%; z-index: 100001; /* the middle of the screen (user, 2026-09-29; was under the menu) */
	transform: translate(-50%, calc(-50% + 14px)); opacity: 0; pointer-events: none;
	display: flex; gap: 12px; align-items: center; width: max-content; max-width: calc(100vw - 32px);
	padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--sc-c-card); color: var(--sc-c-ink);
	font-size: 1rem; font-weight: 500; line-height: 1.4; direction: rtl;
	box-shadow: 0 18px 50px rgba(20, 30, 25, .24), 0 0 0 1px rgba(20, 30, 25, .06);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sc-fav-toast.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.sc-fav-toast-heart { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, #EE7F82 18%, #fff); }
.sc-fav-toast-heart svg { width: 18px; height: 18px; fill: #EE7F82; }
.sc-fav-toast a { color: inherit; text-decoration: underline; }
.sc-fav-toast a.sc-fav-toast-btn:not(#sc-btn) { flex: none; } /* look: assets/buttons.css (.sc-btn--small) */
@media (max-width: 600px) { .sc-fav-toast { font-size: .92rem; gap: 10px; } }

.sc-card.sc-fav-out { opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; } /* un-hearted on the favourites page */
.sc-fav-menu a span::before { content: none; }

/* the favourites page (approved 2026-09-29): tabs, the Pinterest grid for plants, cards for articles, a soft empty box */
.sc-fav-tabs { display: flex; gap: 8px; margin: 0 0 28px; }
.sc-fav-tab { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border: 1px solid var(--sc-c-line); border-radius: 999px; background: var(--sc-c-card); color: var(--sc-c-ink); font: inherit; font-size: .98rem; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.sc-fav-tab .sc-fav-count { opacity: .6; font-size: .88em; }
.sc-fav-tab.is-on { background: var(--sc-c-ink); border-color: var(--sc-c-ink); color: var(--sc-c-bg); }
.sc-fav-post-grid.sc-grid { display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sc-fav-post-grid .sc-card { margin: 0; }
.sc-fav-post-grid .sc-card-media { aspect-ratio: 4 / 3; max-height: none; }
.sc-fav-post-grid .sc-card-media img { height: 100%; max-height: none; }
@media (max-width: 900px) { .sc-fav-post-grid.sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.sc-fav-empty { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; border-radius: 20px; background: var(--sc-c-panel); text-align: center; }
.sc-fav-empty[hidden] { display: none; }
.sc-fav-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sc-c-soft); color: var(--sc-c-heart); }
.sc-fav-empty h3 { margin: 0; font-size: 1.35rem; }
.sc-fav-empty p { margin: 0; max-width: 440px; color: var(--sc-c-muted); }