.mk-card { position:relative; }
.mk-save {
  position:absolute; z-index:3; top:.6rem; right:.6rem;
  width:2.25rem; height:2.25rem; display:grid; place-items:center;
  padding:0; border:1px solid rgba(30,25,22,.12); border-radius:999px;
  background:rgba(255,255,255,.94); color:#5f5853; cursor:pointer;
  box-shadow:0 2px 8px rgba(28,26,23,.14); transition:transform .15s,color .15s;
}
.mk-save:hover { transform:scale(1.07); color:#9a3f54; }
.mk-save svg, .mk-saved-link svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.8; }
.mk-save.saved { color:#9a3f54; }
.mk-save.saved svg { fill:currentColor; }
/* The gap only started doing anything when .mk-chip became a flex line. Until
   then the heart was an inline element sitting on the text baseline, which put
   its middle 4px above the middle of the word beside it. */
.mk-saved-link { gap:.35rem; }
/* Both, not just the width. The override above set width alone against a
   24x24 viewBox, so the heart rendered 16 x 18.4 -- a heart stretched
   vertically, next to a word it was already failing to line up with. */
.mk-saved-link svg { width:1rem; height:1rem; }
.mk-saved-page { min-height:55vh; padding-top:2rem; padding-bottom:5rem; }
.mk-saved-heading { margin:0 0 .35rem; font-family:var(--ff-head); font-size:clamp(1.8rem,4vw,2.6rem); }
.mk-saved-intro { max-width:42rem; margin:0 0 1.5rem; color:var(--ink-soft); line-height:1.6; }
.mk-saved-empty { padding:3.5rem 1rem; text-align:center; border:1px solid var(--line); border-radius:1rem; background:var(--paper); }
.mk-saved-empty h2 { font-family:var(--ff-head); }
@media (max-width:720px) {
  .mk-saved-label { display:none; }
  .mk-saved-link { padding-inline:.65rem; }
}
@media (max-width:640px) {
  /* The mobile menu already carries Saved. Keeping a fourth icon beside the
     brand displaced the basket on small phones. */
  .mk-headnav > .mk-saved-link { display:none; }
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .mk-save { background:rgba(35,31,29,.94); color:#ddd2ca; border-color:rgba(255,255,255,.13); }
}
html[data-theme="dark"] .mk-save { background:rgba(35,31,29,.94); color:#ddd2ca; border-color:rgba(255,255,255,.13); }