/* Marketplace: /explore (views/explore.ejs) and the homepage's "Explore"
   section (views/index.ejs). Cards are partials/market-card. Colours
   follow the homepage: blue #1261ef, navy #07134f, lime #b9ed28. */
.mk-page, .mk-card, .mk-search {
  --mk-blue: #1261ef; --mk-blue-deep: #0b4fd0; --mk-navy: #07134f; --mk-lime: #b9ed28;
  --mk-ink: #111827; --mk-soft: #475467; --mk-muted: #667085; --mk-line: #e4e8f0; --mk-paper: #fbfaf6;
}

/* --- search (also on the homepage) ------------------------------------ */
.mk-search {
  display: flex; align-items: center; gap: 6px; max-width: 680px; padding: 6px 6px 6px 18px;
  border: 1px solid var(--mk-line); border-radius: 999px; background: #fff; box-shadow: 0 10px 30px #0b1d4a14;
}
.mk-search:focus-within { border-color: var(--mk-blue); box-shadow: 0 0 0 4px #1261ef24, 0 10px 30px #0b1d4a14; }
.mk-search > svg { flex: none; color: var(--mk-muted); }
.mk-search input[type=search] {
  flex: 1; min-width: 0; height: 46px; padding: 0 6px; border: 0; background: none;
  font: inherit; font-size: 16px; color: var(--mk-ink); outline: none;
}
.mk-search button {
  flex: none; height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--mk-blue); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s;
}
.mk-search button:hover { background: var(--mk-blue-deep); }

/* --- cards -------------------------------------------------------------- */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.mk-card {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mk-line); border-radius: 18px;
  background: #fff; color: var(--mk-ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.mk-card:hover { transform: translateY(-4px); border-color: #cfd8e6; box-shadow: 0 22px 48px #0b1d4a1f; }
.mk-card:focus-visible { outline: 3px solid var(--mk-blue); outline-offset: 3px; }
.mk-media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.mk-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mk-card:hover .mk-media img { transform: scale(1.04); }
.mk-art { width: 56px; height: 56px; opacity: .9; transition: transform .3s ease; }
.mk-card:hover .mk-art { transform: scale(1.08) rotate(-4deg); }
.mk-media::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 22% 18%, #ffffff66, transparent 42%), radial-gradient(circle at 90% 110%, #00000022, transparent 50%); pointer-events: none; }
.mk-media:has(img)::before { display: none; }
.mk-tone-0 { background: linear-gradient(135deg, #d9f99d, #7cc23b); color: #2f5d06; }
.mk-tone-1 { background: linear-gradient(135deg, #bcd6ff, #1261ef); color: #fff; }
.mk-tone-2 { background: linear-gradient(135deg, #ffd6cf, #ff6c62); color: #fff; }
.mk-tone-3 { background: linear-gradient(135deg, #e3d7ff, #7c5cf0); color: #fff; }
.mk-tone-4 { background: linear-gradient(135deg, #ffecb3, #f5a524); color: #6b3d00; }
.mk-tone-5 { background: linear-gradient(135deg, #c7f5ec, #14b8a6); color: #fff; }
.mk-art { position: relative; }
.mk-type {
  position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: #ffffffeb;
  color: var(--mk-ink); font-size: 11px; font-weight: 800; letter-spacing: .03em; backdrop-filter: blur(6px);
}
.mk-price {
  position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--mk-ink);
  color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 6px 16px #0003;
}
.mk-price.is-free { background: var(--mk-lime); color: var(--mk-navy); }
.mk-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; flex: 1; }
.mk-title { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.mk-summary {
  font-size: 13.5px; line-height: 1.5; color: var(--mk-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mk-facts li {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 8px;
  background: #f2f4f8; color: var(--mk-soft); font-size: 12px; font-weight: 600;
}
.mk-facts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-facts svg { flex: none; }
.mk-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eef1f6; }
.mk-avatar {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mk-navy); color: #fff; font-size: 11px; font-weight: 800;
}
.mk-creator { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--mk-soft); }
.mk-go {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #f2f4f8; color: var(--mk-ink); font-weight: 800; transition: background .15s, color .15s, transform .15s;
}
.mk-card:hover .mk-go { background: var(--mk-blue); color: #fff; transform: translateX(2px); }

/* --- /explore page ------------------------------------------------------ */
.mk-page { margin: 0; min-height: 100vh; background: var(--mk-paper); color: var(--mk-ink); font-family: Manrope, Arial, sans-serif; }
.mk-page *, .mk-page *::before, .mk-page *::after { box-sizing: border-box; }
.mk-nav { position: sticky; top: 0; z-index: 30; background: #fbfaf6d9; backdrop-filter: blur(12px); border-bottom: 1px solid #00000008; }
.mk-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1220px; height: 68px; margin: 0 auto; padding: 0 20px; }
.mk-brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--mk-ink); text-decoration: none; }
.mk-brand .mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--mk-blue); color: #fff; }
.mk-nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; }
.mk-nav-links a { color: var(--mk-soft); text-decoration: none; }
.mk-nav-links a:hover, .mk-nav-links a[aria-current] { color: var(--mk-ink); }
.mk-nav-links .mk-cta { padding: 10px 18px; border-radius: 999px; background: var(--mk-ink); color: #fff; }
.mk-nav-links .mk-cta:hover { color: #fff; background: #000; }

.mk-hero {
  position: relative; overflow: hidden; max-width: 1220px; margin: 14px auto 0; padding: 64px 20px 56px;
  border-radius: 28px; background: linear-gradient(135deg, #1261ef 0%, #0b3fc0 55%, #07134f 100%); color: #fff;
  width: calc(100% - 32px);
}
.mk-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 15%, #b9ed2840, transparent 30%),
    radial-gradient(circle at 10% 90%, #ff6c6233, transparent 35%),
    repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 72px);
}
.mk-hero-in { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.mk-pill {
  display: inline-block; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; background: #ffffff1f;
  border: 1px solid #ffffff33; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.mk-hero h1 { margin: 0 0 14px; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(38px, 6.4vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.mk-hero h1 em { color: var(--mk-lime); }
.mk-hero p { max-width: 600px; margin: 0 auto 28px; color: #dbe6ff; font-size: 17px; line-height: 1.55; }
.mk-hero .mk-search { margin: 0 auto; border-color: transparent; box-shadow: 0 24px 60px #00061f55; }
.mk-suggest { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; }
.mk-suggest span { color: #c9d8ff; font-weight: 700; }
.mk-suggest a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid #ffffff38; color: #fff; text-decoration: none; font-weight: 600;
  transition: background .15s;
}
.mk-suggest a:hover { background: #ffffff24; }

.mk-tabs { max-width: 1220px; margin: 26px auto 0; padding: 0 20px; }
.mk-tabs-in { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mk-tabs-in::-webkit-scrollbar { display: none; }
.mk-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--mk-line);
  border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--mk-soft); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.mk-tabs a small { padding: 1px 7px; border-radius: 999px; background: #f2f4f8; font-size: 11.5px; color: var(--mk-muted); }
.mk-tabs a:hover { border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-tabs a[aria-current] { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
.mk-tabs a[aria-current] small { background: #ffffff26; color: #fff; }

.mk-results { max-width: 1220px; margin: 0 auto; padding: 30px 20px 70px; }
.mk-section + .mk-section { margin-top: 48px; }
.mk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mk-section-head h2 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(28px, 3.4vw, 38px); font-weight: 400; line-height: 1.1; }
.mk-section-head h2 span { color: var(--mk-muted); }
.mk-section-head a { flex: none; font-size: 14px; font-weight: 800; color: var(--mk-blue); text-decoration: none; }
.mk-section-head a:hover { text-decoration: underline; }
.mk-count { flex: none; font-size: 13px; font-weight: 700; color: var(--mk-muted); }

.mk-empty { max-width: 520px; margin: 20px auto; padding: 50px 24px; border: 1px dashed #cfd8e6; border-radius: 22px; background: #fff; text-align: center; }
.mk-empty-art { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #e8f3ff; color: var(--mk-blue); font-size: 28px; }
.mk-empty h2 { margin: 0 0 8px; font-size: 22px; }
.mk-empty p { margin: 0 0 20px; color: var(--mk-muted); }
.mk-btn {
  display: inline-block; padding: 13px 22px; border-radius: 999px; background: var(--mk-blue); color: #fff;
  font-weight: 800; text-decoration: none; transition: transform .15s, background .15s;
}
.mk-btn:hover { background: var(--mk-blue-deep); transform: translateY(-1px); }
.mk-btn-lime { background: var(--mk-lime); color: var(--mk-navy); }
.mk-btn-lime:hover { background: #a6d81c; }

.mk-sell {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  max-width: 1220px; width: calc(100% - 32px); margin: 0 auto 30px; padding: 44px 48px; border-radius: 28px;
  background: var(--mk-navy); color: #fff;
}
.mk-pill-dark { background: #ffffff14; color: var(--mk-lime); }
.mk-sell h2 { margin: 0 0 10px; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(30px, 4vw, 44px); font-weight: 400; line-height: 1.05; }
.mk-sell h2 em { color: var(--mk-lime); }
.mk-sell p { margin: 0; max-width: 520px; color: #c3cbe6; }
.mk-footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1220px; margin: 0 auto;
  padding: 20px 20px 34px; font-size: 13px; color: var(--mk-muted);
}
.mk-footer nav { display: flex; gap: 18px; }
.mk-footer a { color: var(--mk-soft); text-decoration: none; font-weight: 600; }

@media (max-width: 700px) {
  .mk-hero { width: calc(100% - 16px); margin-top: 8px; padding: 44px 16px 38px; border-radius: 20px; }
  .mk-hero p { font-size: 15px; }
  .mk-search { padding-left: 14px; }
  .mk-search input[type=search] { height: 42px; font-size: 15px; }
  .mk-search button { height: 42px; padding: 0 16px; }
  .mk-nav-links { gap: 14px; }
  .mk-nav-links a:not(.mk-cta):not([aria-current]) { display: none; }
  .mk-tabs, .mk-results { padding-left: 16px; padding-right: 16px; }
  .mk-grid { grid-template-columns: 1fr; gap: 16px; }
  .mk-sell { width: calc(100% - 16px); padding: 32px 22px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card, .mk-media img, .mk-art, .mk-go, .mk-btn { transition: none; }
  .mk-card:hover, .mk-card:hover .mk-art, .mk-card:hover .mk-media img { transform: none; }
}