/* Marketplace: browse grid, filters, listing detail and the saved-listings drawer. */

main:focus { outline: none; }

.mk-hero { padding: clamp(32px, 6vw, 64px) 0 clamp(20px, 3vw, 32px); }
.mk-hero h1 { max-width: 18ch; }
.mk-body { padding-bottom: 96px; }
.mk-hero[hidden] + .mk-body { padding-top: 28px; }

/* ---------- Toolbar ---------- */
.mk-toolbar { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
.mk-toolbar .field > span { font-size: 0.8rem; }
.mk-search { position: relative; }
.mk-search .input { padding-left: 38px; }
.mk-search svg { position: absolute; left: 12px; bottom: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.mk-subbar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 16px 0 20px; }
.mk-subbar .row { gap: 16px; }
.mk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.mk-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.mk-result { color: var(--muted); font-size: 0.92rem; margin: 0; }
.mk-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.mk-sort .select { width: auto; min-height: 36px; padding: 6px 10px; }

@media (max-width: 860px) {
  .mk-toolbar { grid-template-columns: 1fr 1fr; }
  .mk-toolbar .mk-search { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
  .mk-toolbar { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.mk-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mk-card { position: relative; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, box-shadow 0.15s; min-width: 0; }
.mk-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.mk-card:focus-within { border-color: var(--accent); }
.mk-card h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
/* The title link covers the card so the whole surface is clickable; the heart sits above it. */
.mk-card h3 a { color: inherit; text-decoration: none; }
.mk-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.mk-card h3 a:focus-visible { outline: none; }
.mk-card h3 a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-card p { margin: 0; color: var(--muted); font-size: 0.93rem; overflow-wrap: anywhere; }
.mk-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 40px; }
.mk-ref { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.mk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-tag { font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.mk-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
.mk-meta b { color: var(--text); font-weight: 600; }

.mk-heart {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
}
.mk-heart:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.mk-heart[aria-pressed="true"] { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.mk-heart-inline { position: static; width: auto; height: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; gap: 8px; font: 600 0.95rem/1 var(--font); }

/* ---------- Empty and loading ---------- */
.mk-empty { text-align: center; padding: clamp(36px, 7vw, 72px) 20px; }
.mk-empty h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.mk-empty p { color: var(--muted); max-width: 52ch; margin: 0 auto 20px; }
.mk-empty .row { justify-content: center; }
.mk-empty-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.6rem; }
.mk-skeleton { height: 220px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: mk-shimmer 1.4s ease-in-out infinite; }
@keyframes mk-shimmer { to { background-position: -200% 0; } }

/* ---------- Detail ---------- */
.mk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 0.92rem; text-decoration: none; }
.mk-detail { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.mk-detail h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); overflow-wrap: anywhere; }
.mk-detail .lead { margin-bottom: 20px; }
.mk-desc { white-space: pre-line; overflow-wrap: anywhere; }
.mk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 0.93rem; }
.mk-facts dt { color: var(--muted); }
.mk-facts dd { margin: 0; overflow-wrap: anywhere; }
.mk-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.mk-aside .btn { width: 100%; }
.mk-sample { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; margin: 0; }
.mk-section-title { font-family: var(--font); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
@media (max-width: 860px) {
  .mk-detail { grid-template-columns: 1fr; }
  .mk-aside { position: static; }
}

/* ---------- Saved drawer ---------- */
.mk-saved-fab { position: fixed; right: 16px; bottom: 16px; z-index: 30; box-shadow: var(--shadow); }
.mk-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-ink); color: var(--accent); font-size: 0.78rem; }
.mk-drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: rgb(10 10 8 / 35%); }
.mk-drawer { width: min(440px, 100vw); display: flex; flex-direction: column; gap: 16px; }
.mk-drawer:focus { outline: none; }
.mk-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-saved-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mk-saved-list a { color: var(--text); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.mk-saved-list a:hover { color: var(--accent); }
.mk-saved-list small { display: block; font-family: var(--mono); }
.mk-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.2rem; padding: 6px; border-radius: var(--radius-sm); }
.mk-remove:hover { color: var(--danger); }

/* ---------- Request form ---------- */
.mk-request-for { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.9rem; margin-bottom: 16px; overflow-wrap: anywhere; }
.mk-success { text-align: center; padding: 8px 0; }
.mk-success-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 1.5rem; }
.form-error a { color: inherit; font-weight: 600; }