/* Save for later: hearts, header heart, toast, and the saved list. Mobile first. */
.kk-save { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0; border: 0; background: transparent; color: var(--burgundy, #5c2a29); cursor: pointer; font: 600 .72rem/1 var(--sans, Arial); letter-spacing: .1em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.kk-save svg { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .2s, fill .2s; }
.kk-save.is-saved svg { fill: currentColor; }
.kk-save:active svg { transform: scale(.85); }
.kk-save:focus-visible { outline: 3px solid var(--burgundy, #5c2a29); outline-offset: 3px; }
@keyframes kk-pop { 40% { transform: scale(1.3); } }
.kk-save.is-saved svg { animation: kk-pop .35s ease; }
@media (prefers-reduced-motion: reduce) { .kk-save.is-saved svg { animation: none; } }

/* On a photo */
.card__media, .mcard__media { position: relative; }
.kk-save--card { position: absolute; z-index: 3; top: .6rem; right: .6rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(248, 246, 237, .94); box-shadow: 0 2px 10px rgba(40, 24, 17, .25); }
.kk-save--card:hover { background: var(--cream, #f8f6ed); }

/* Text pill (post header, recipe) */
.kk-save--pill { min-height: 2.5rem; padding: 0 1rem; border: 1px solid currentColor; border-radius: 999px; vertical-align: middle; }
.kk-save--pill:hover, .kk-save--pill.is-saved { background: var(--burgundy, #5c2a29); border-color: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }
.photo-hero .kk-save--pill { color: var(--cream, #f8f6ed); }
.photo-hero .kk-save--pill:hover, .photo-hero .kk-save--pill.is-saved { background: var(--cream, #f8f6ed); color: var(--burgundy, #5c2a29); border-color: var(--cream, #f8f6ed); }
.hero-natural .kk-save--pill { color: var(--burgundy, #5c2a29); }
.recipe .kk-save--recipe { text-transform: none; letter-spacing: 0; }
.recipe .recipe__btn.kk-save--recipe.is-saved { background: var(--pill-c, var(--rc-ink, #3f291e)); color: var(--rc-bg, #f8f6ed); }

/* Header heart */
.saved-toggle { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--hdr-ink, var(--chocolate, #3f291e)); text-decoration: none; }
.saved-toggle[hidden] { display: none; }
.saved-toggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.saved-toggle__n { position: absolute; top: .1rem; right: .05rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); font: 600 .62rem/1.1rem var(--sans, Arial); text-align: center; }
.saved-toggle:hover, .saved-toggle:focus-visible { background: var(--hdr-hover, var(--burgundy, #5c2a29)); color: var(--hdr-bg, var(--cream, #f8f6ed)); }

/* Toast */
.kk-toast { position: fixed; z-index: 95; left: 50%; bottom: 1rem; max-width: calc(100vw - 1.5rem); padding: .8rem 1.1rem; border-radius: 999px; background: var(--chocolate, #3f291e); color: var(--cream, #f8f6ed); box-shadow: 0 8px 24px rgba(40, 24, 17, .35); font: .88rem/1.2 var(--sans, Arial); transform: translate(-50%, 200%); opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; }
.kk-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.kk-toast a, .kk-toast button { margin-left: .6rem; padding: 0; border: 0; background: none; color: var(--blush, #e8d0d0); font: 600 .88rem/1 var(--sans, Arial); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.has-mini .kk-toast, .has-timers .kk-toast { bottom: 5.5rem; }
@media (prefers-reduced-motion: reduce) { .kk-toast { transition: none; } }

/* My saved list */
.kk-saved { padding-block: var(--section, 4rem); }
.kk-saved__note { text-align: center; font-size: .9rem; opacity: .8; margin: -.5rem 0 2rem; }
.kk-saved__grid { display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .kk-saved__grid { grid-template-columns: repeat(4, 1fr); } }
.kk-saved__empty { text-align: center; max-width: 30rem; margin: 2rem auto; font: 1.5rem/1.25 var(--serif, Georgia); }
.kk-saved__empty[hidden], .kk-saved__tools[hidden] { display: none; }
.kk-saved__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.5rem; }
.kk-saved .card__title { font-size: 1.35rem; }