/* =============================================================
   custom.css — donotgetit.com
   Design system. Everything is namespaced mk- so it never
   collides with Bootstrap, which is still loaded on every page.

   Brand pink moved from #ff2c5e to #d81b4a: the old value measured
   3.64:1 against white and WCAG AA needs 4.5:1 for text, so the
   primary button, pink labels and pink links all failed. The new
   value measures 5.03:1. Muted grey moved for the same reason.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,700;1,800&display=swap');

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --mk-pink:        #d81b4a;
  --mk-pink-hover:  #bf1441;
  --mk-purple:      #c62cff;
  --mk-maroon:      #840c34;
  --mk-ink:         #1b1c28;
  --mk-ink-2:       #5d5e70;
  --mk-ink-3:       #6e6f80;
  --mk-paper:       #f5f7f8;
  --mk-line:        rgba(27, 28, 40, .10);
  --mk-line-soft:   rgba(27, 28, 40, .05);
  --mk-tint:        rgba(216, 27, 74, .07);
  --mk-tint-purple: rgba(198, 44, 255, .08);
  --mk-tint-ink:    rgba(27, 28, 40, .06);
  --mk-radius:      14px;
  --mk-shadow:      0 1px 3px rgba(20, 6, 40, .08);
  --mk-shadow-lg:   0 18px 40px rgba(20, 6, 40, .16);

  /* kept so any legacy markup still resolves rather than losing colour */
  --mk-dark: var(--mk-ink);
  --mk-bg: var(--mk-paper);
  --mk-text-muted: var(--mk-ink-2);
  --mk-text-muted2: var(--mk-ink-2);
  --mk-dark-red: var(--mk-maroon);
  --mk-border-light: var(--mk-line);
  --mk-border-faint: var(--mk-line-soft);
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mk-pink); text-decoration: none; }
a:hover { color: var(--mk-maroon); }
h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.022em; line-height: 1.12; }
:focus-visible { outline: 3px solid rgba(216, 27, 74, .45); outline-offset: 2px; border-radius: 6px; }

/* One family throughout. Hierarchy is weight, size and tracking. */
.mk-display { font-weight: 800; letter-spacing: -.022em; line-height: 1.08; }
.mk-h1 { font-size: clamp(34px, 4.4vw, 56px); }
.mk-h2 { font-size: clamp(26px, 2.6vw, 38px); }
.mk-h3 { font-size: clamp(20px, 1.8vw, 26px); }
.mk-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mk-pink);
}
.mk-muted { color: var(--mk-ink-2); }
.mk-faint { color: var(--mk-ink-3); }
.mk-lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--mk-ink-2); }
.mk-measure { max-width: 64ch; }

/* ── Layout ──────────────────────────────────────────────────── */
.mk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mk-section { padding-top: 72px; }
.mk-section-sm { padding-top: 44px; }
.mk-stack { display: flex; flex-direction: column; }
.mk-rule { height: 1px; background: var(--mk-line); }

/* ── Buttons ─────────────────────────────────────────────────── */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; font-family: inherit; font-size: 15px;
  font-weight: 800; padding: 13px 26px; min-height: 48px; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.mk-btn-primary { background: var(--mk-pink); color: #fff; }
.mk-btn-primary:hover { background: var(--mk-pink-hover); color: #fff; }
/* header nav links are grey by default; keep the pink "List an item" button text white */
.mk-nav a.mk-btn-primary, .mk-nav a.mk-btn-primary:hover { color: #fff; }
.mk-btn-ink { background: var(--mk-ink); color: #fff; }
.mk-btn-ink:hover { background: #2b2c3c; color: #fff; }
.mk-btn-ghost { background: transparent; color: var(--mk-ink); box-shadow: inset 0 0 0 1.5px var(--mk-line); }
.mk-btn-ghost:hover { background: #fff; color: var(--mk-ink); }
.mk-btn-light { background: #fff; color: var(--mk-ink); }
.mk-btn-outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.mk-btn-outline-light:hover { background: #fff; color: var(--mk-ink); }
.mk-btn-sm { font-size: 14px; padding: 9px 18px; min-height: 40px; }
.mk-btn-block { width: 100%; }
.mk-btn[disabled], .mk-btn.disabled { opacity: .5; pointer-events: none; }

/* ── Surfaces ────────────────────────────────────────────────── */
.mk-card {
  background: #fff; border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
}
.mk-card-pad { padding: 28px 32px; }
.mk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  min-height: 40px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line);
  color: var(--mk-ink); text-decoration: none;
}
.mk-chip:hover { color: var(--mk-ink); background: var(--mk-paper); }
.mk-chip-on { background: var(--mk-ink); color: #fff; box-shadow: none; }
.mk-chip-on:hover { background: var(--mk-ink); color: #fff; }
.mk-chip-tint { background: var(--mk-tint); color: var(--mk-maroon); box-shadow: none; }
.mk-pill-note {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-radius: 12px; background: var(--mk-tint); color: var(--mk-maroon);
  font-size: 15px; font-weight: 700; line-height: 1.5;
}

/* ── Forms ───────────────────────────────────────────────────── */
.mk-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.mk-field > label, .mk-label {
  font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--mk-ink);
}
.mk-hint { font-size: 13px; font-weight: 600; color: var(--mk-ink-3); line-height: 1.5; }
.mk-input, .mk-select, .mk-textarea {
  width: 100%; min-height: 48px; padding: 12px 15px; border: 0;
  border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line);
  font-family: inherit; font-size: 15px; color: var(--mk-ink);
}
.mk-textarea { min-height: 120px; line-height: 1.6; resize: vertical; }
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--mk-ink-3); }
.mk-input:focus, .mk-select:focus, .mk-textarea:focus {
  box-shadow: inset 0 0 0 1.5px var(--mk-pink); outline: none;
}
.mk-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6f80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.mk-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; font-weight: 600; color: var(--mk-ink); cursor: pointer; }
.mk-check input { width: 19px; height: 19px; accent-color: var(--mk-pink); flex: none; }
.mk-seg { display: flex; gap: 5px; padding: 5px; border-radius: 12px; background: var(--mk-paper); box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-seg > * {
  flex: 1; text-align: center; padding: 11px 0; border: 0; border-radius: 9px;
  background: transparent; font-family: inherit; font-size: 15px; font-weight: 800;
  color: var(--mk-ink-2); cursor: pointer;
}
.mk-seg > .active { background: var(--mk-ink); color: #fff; }
input[type="range"] { accent-color: var(--mk-pink); }

/* ── Wordmark ────────────────────────────────────────────────── */
.mk-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.mk-logo img { height: 30px; width: auto; object-fit: contain; }
.mk-logo-text {
  font-size: 19px; font-weight: 800; letter-spacing: -.025em;
  color: var(--mk-maroon); white-space: nowrap;
}
.mk-logo-text span { color: rgba(132, 12, 52, .55); }
.mk-logo-light .mk-logo-text { color: #fff; }
.mk-logo-light .mk-logo-text span { color: rgba(255, 255, 255, .6); }

/* ── Header ──────────────────────────────────────────────────── */
.mk-header { background: #fff; border-bottom: 1px solid var(--mk-line); }
.mk-header-inner {
  display: flex; align-items: center; gap: 24px;
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
}
.mk-hdr-searchbar {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 6px 0 16px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--mk-line);
}
.mk-hdr-searchbar input {
  flex: 1; border: 0; background: transparent; font-family: inherit;
  font-size: 15px; color: var(--mk-ink); min-width: 0;
}
.mk-hdr-searchbar input:focus { outline: none; }
.mk-hdr-searchbar select {
  border: 0; background: transparent; font-family: inherit; font-size: 14px;
  font-weight: 700; color: var(--mk-ink); max-width: 120px;
}
.mk-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.mk-nav a { font-size: 15px; font-weight: 700; color: var(--mk-ink-2); }
.mk-nav a:hover, .mk-nav a.active { color: var(--mk-ink); }
.mk-nav-sep { width: 1px; height: 24px; background: var(--mk-line); }
.mk-burger { display: none; }

/* ── Hero ────────────────────────────────────────────────────── */
.mk-hero {
  position: relative; background-color: #2d1250; background-size: cover;
  background-position: center 50%; display: flex; align-items: center;
  min-height: max(560px, calc(100svh - 76px)); overflow: hidden; /* fill the screen below the header */
}
.mk-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,10,52,.88) 0%, rgba(28,10,52,.58) 36%, rgba(28,10,52,0) 62%);
}
.mk-hero-inner {
  position: relative; max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 56px 24px; display: flex; flex-direction: column; gap: 24px;
}
.mk-hero h1 { font-size: clamp(40px, 5.4vw, 67px); line-height: 1.05; color: #fff; max-width: 15ch; }
.mk-hero h1 em { color: #ffc2d2; }
.mk-hero p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.45); max-width: 46ch; }
.mk-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 32px; padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: 13px; font-weight: 800; color: #fff;
}
.mk-herosearch {
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px;
  background: #fff; max-width: 620px; box-shadow: var(--mk-shadow-lg);
}
.mk-herosearch input {
  flex: 1; border: 0; background: transparent; font-family: inherit;
  font-size: 17px; padding: 0 6px; min-width: 0; min-height: 44px;
}
.mk-herosearch input:focus { outline: none; }
.mk-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }
.mk-hero-trust span {
  display: flex; align-items: center; gap: 7px; font-size: 14px;
  font-weight: 700; color: rgba(245,247,248,.86);
}

/* ── Category tiles ──────────────────────────────────────────── */
.mk-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.mk-cat {
  background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius);
  min-height: 118px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--mk-ink); text-align: center;
  font-size: 14px; font-weight: 800; line-height: 1.25; padding: 12px 8px;
  transition: box-shadow .15s, transform .15s;
}
.mk-cat:hover { color: var(--mk-ink); box-shadow: 0 10px 22px rgba(20,6,40,.08); transform: translateY(-2px); }
.mk-cat.active { box-shadow: inset 0 0 0 2px var(--mk-pink); }
.mk-cat svg { flex: none; }
/* Homepage: two big red choices under the hero (Add listing / Browse listings) */
.mk-cta-duo { padding: 48px 0 0; }
.mk-cta-duo-head { text-align: center; font-size: clamp(24px, 3vw, 34px); margin: 0 0 22px; }
.mk-cta-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
a.mk-cta-big {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 128px; padding: 24px 40px; border-radius: 999px; text-align: center;
  background: var(--mk-pink); color: #fff; box-shadow: 0 12px 28px rgba(216,27,74,.28);
  transition: transform .15s, background .15s, box-shadow .15s;
}
a.mk-cta-big:hover { background: var(--mk-pink-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(216,27,74,.34); }
.mk-cta-big b { font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.mk-cta-big span { font-size: 16px; font-weight: 600; opacity: .92; }
@media (max-width: 720px) { .mk-cta-duo { padding-top: 32px; } .mk-cta-duo-grid { grid-template-columns: 1fr; } a.mk-cta-big { min-height: 108px; } }
/* Category cards: real photo on top, label underneath */
.mk-cats .mk-cat { justify-content: flex-start; gap: 10px; padding: 8px 8px 12px; }
.mk-cat-img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--mk-radius) - 6px); background: var(--mk-line);
}

/* ── Listing cards (also emitted by js/markett.js) ───────────── */
.mk-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-product-card {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius);
  color: var(--mk-ink); text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.mk-product-card:hover { color: var(--mk-ink); box-shadow: 0 12px 28px rgba(20,6,40,.10); transform: translateY(-2px); }
.mk-card-media {
  position: relative; height: 186px; background: var(--mk-tint);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mk-card-media img.mk-photo { width: 100%; height: 100%; object-fit: cover; }
.mk-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.mk-card-cat {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mk-ink-3);
}
.mk-card-title { font-size: 17px; font-weight: 800; line-height: 1.3; min-height: 44px; }
.mk-card-price { display: flex; align-items: baseline; gap: 8px; }
.mk-card-price b { font-size: 22px; font-weight: 800; }
.mk-card-price small { font-size: 14px; font-weight: 700; color: var(--mk-ink-2); }
.mk-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.mk-card-loc { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mk-ink-2); }
.mk-heart-btn {
  width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.92); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.mk-badge-popular {
  background: var(--mk-maroon); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px;
  padding: 0 10px; height: 26px; display: inline-flex; align-items: center;
}
.mk-avail {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.mk-avail-yes { background: var(--mk-tint); color: var(--mk-maroon); }
.mk-avail-part { background: var(--mk-tint-ink); color: var(--mk-ink-2); }
.mk-stars { display: inline-flex; gap: 2px; }
.mk-divider { height: 1px; background: var(--mk-line); }
.mk-offer-from { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--mk-maroon); }
.mk-verified { color: var(--mk-pink); display: inline-flex; align-items: center; }

/* ── Skeletons, for the wait before Supabase answers ─────────── */
.mk-skel { background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); overflow: hidden; }
.mk-skel-media { height: 186px; background: linear-gradient(90deg, #eef1f3 25%, #e5e9ec 37%, #eef1f3 63%); background-size: 400% 100%; animation: mk-shimmer 1.3s ease-in-out infinite; }
.mk-skel-line { height: 12px; border-radius: 6px; margin: 14px 18px 0; background: linear-gradient(90deg, #eef1f3 25%, #e5e9ec 37%, #eef1f3 63%); background-size: 400% 100%; animation: mk-shimmer 1.3s ease-in-out infinite; }
.mk-skel-line.short { width: 45%; }
.mk-skel-line.last { margin-bottom: 22px; }
@keyframes mk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Empty states ────────────────────────────────────────────── */
.mk-empty {
  background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius);
  padding: 48px 40px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}
.mk-empty img { width: 160px; flex: none; }
.mk-empty h2 { font-size: 28px; margin-bottom: 10px; }

/* ── Steps, features, facts ──────────────────────────────────── */
.mk-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 44px; }
.mk-step-num { width: 44px; height: 44px; border-radius: 999px; background: var(--mk-tint); display: flex; align-items: center; justify-content: center; flex: none; }
.mk-feats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 36px; }
.mk-feat { display: flex; flex-direction: column; gap: 11px; }
.mk-feat b { font-size: 17px; font-weight: 800; }
.mk-feat p { font-size: 15px; color: var(--mk-ink-2); margin: 0; }
.mk-stat { display: flex; flex-direction: column; gap: 8px; padding-top: 26px; border-top: 2px solid var(--mk-ink); }
.mk-stat b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mk-stat p { font-size: 16px; font-weight: 700; line-height: 1.45; margin: 0; }
.mk-src { font-size: 12px; font-weight: 700; color: var(--mk-ink-3); letter-spacing: .04em; }

/* ── Dark bands ──────────────────────────────────────────────── */
.mk-band-dark {
  position: relative; overflow: hidden; border-radius: 18px;
  background: var(--mk-ink); color: #fff; padding: 52px 48px;
}
.mk-band-dark::after {
  content: ""; position: absolute; right: -110px; top: -150px;
  width: 460px; height: 460px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(216,27,74,.5), rgba(198,44,255,.18) 58%, transparent 72%);
}
.mk-band-dark > * { position: relative; z-index: 1; }
.mk-band-dark h2 { color: #fff; }
.mk-band-dark p { color: rgba(245,247,248,.78); }

/* ── Item page ───────────────────────────────────────────────── */
.mk-item-layout { display: flex; gap: 40px; align-items: flex-start; }
.mk-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 34px; }
.mk-item-side { width: 392px; flex: none; }
.mk-gallery-hero {
  height: 430px; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--mk-line); display: flex; align-items: center; justify-content: center;
}
.mk-gallery-hero img { max-width: 88%; max-height: 100%; object-fit: contain; }
.mk-thumbs { display: flex; flex-direction: column; gap: 12px; width: 96px; flex: none; }
.mk-thumbs img, .mk-thumbs .mk-thumb {
  height: 78px; width: 100%; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--mk-line); cursor: pointer; background: var(--mk-tint-purple);
}
.mk-thumbs .active { border-color: var(--mk-pink); box-shadow: 0 0 0 2px rgba(216,27,74,.18); }
.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; padding: 24px 0; border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-fact { display: flex; flex-direction: column; gap: 6px; }
.mk-fact span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.mk-fact b { font-size: 15px; font-weight: 700; color: var(--mk-ink-2); }
.mk-book { padding: 26px; }
.mk-book-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.mk-book-price b { font-size: 40px; font-weight: 800; line-height: 1; }
.mk-breakdown { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--mk-line); }
.mk-breakdown-row { display: flex; font-size: 15px; }
.mk-breakdown-row span:first-child { color: var(--mk-ink-2); font-weight: 600; }
.mk-breakdown-row span:last-child { margin-left: auto; font-weight: 700; }
.mk-breakdown-row.total { font-size: 17px; padding-top: 10px; border-top: 1px solid var(--mk-line); }
.mk-breakdown-row.total span { font-weight: 800; color: var(--mk-ink); }
.mk-held { display: flex; align-items: center; padding: 13px 15px; margin-top: 6px; border-radius: 11px; background: var(--mk-tint); color: var(--mk-maroon); font-weight: 800; }
.mk-held b { margin-left: auto; font-size: 19px; }
.mk-reviews-head { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; padding: 20px 0 4px; }
.mk-dist { display: flex; align-items: center; gap: 10px; }
.mk-dist-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--mk-line); position: relative; min-width: 140px; }
.mk-dist-bar i { position: absolute; left: 0; top: 0; height: 6px; border-radius: 999px; background: var(--mk-pink); }
.mk-review { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; border-top: 1px solid var(--mk-line); }
.mk-review-reply {
  margin: 4px 0 0 12px; padding: 16px 18px; border-left: 2px solid var(--mk-pink);
  background: var(--mk-tint); border-radius: 0 11px 11px 0;
}
.mk-avatar {
  width: 38px; height: 38px; border-radius: 999px; background: var(--mk-tint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--mk-maroon); flex: none; object-fit: cover;
}
.mk-avatar-lg { width: 64px; height: 64px; font-size: 24px; }

/* ── Sidebar filters (browse) ────────────────────────────────── */
.mk-filters { width: 284px; flex: none; }
.mk-filter { padding: 20px 0; border-bottom: 1px solid var(--mk-line); }
.mk-filter > b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 12px; }

/* ── Tabs, accordions ───────────────────────────────────────── */
.mk-tabs { display: flex; gap: 5px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); flex-wrap: wrap; }
.mk-tabs button, .mk-tabs a {
  padding: 12px 22px; border: 0; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--mk-ink-2); cursor: pointer;
}
.mk-tabs .active { background: var(--mk-ink); color: #fff; }
.mk-acc { border-top: 1px solid var(--mk-line); }
.mk-acc-q {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 0;
  border: 0; background: transparent; font-family: inherit; font-size: 16px;
  font-weight: 700; color: var(--mk-ink); text-align: left; cursor: pointer;
}
.mk-acc-q svg { margin-left: auto; flex: none; transition: transform .18s; }
.mk-acc-q[aria-expanded="true"] { font-weight: 800; }
.mk-acc-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.mk-acc-a { padding: 0 0 18px; font-size: 16px; line-height: 1.7; color: var(--mk-ink-2); max-width: 64ch; }

/* ── Maps ────────────────────────────────────────────────────── */
.mk-map { height: 400px; border-radius: 16px; overflow: hidden; border: 1px solid var(--mk-line); background: #e9eef1; }
.mk-map-sm { height: 260px; border-radius: 12px; }
.leaflet-container { font-family: inherit; }

/* ── Footer ──────────────────────────────────────────────────── */
.mk-footer { background: var(--mk-ink); color: #f5f7f8; padding: 68px 0 36px; margin-top: 80px; }
.mk-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0,1fr)); gap: 52px; }
.mk-footer h4 { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,247,248,.42); margin-bottom: 14px; }
.mk-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.mk-footer a { font-size: 15px; font-weight: 700; color: rgba(245,247,248,.72); }
.mk-footer a:hover { color: var(--mk-pink); }
.mk-footer a[href$="add-listing.html"]:not(:hover) { color: #fff; }
.mk-footer p { font-size: 15px; line-height: 1.6; color: rgba(245,247,248,.72); }
.mk-footer-bottom { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(245,247,248,.12); }
.mk-footer-bottom small { font-size: 13px; color: rgba(245,247,248,.5); }
.mk-pay { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.mk-pay span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(245,247,248,.18);
  font-size: 12px; font-weight: 800; color: rgba(245,247,248,.72);
}

/* ── Toasts ──────────────────────────────────────────────────── */
#mk-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; }
.mk-toast {
  background: var(--mk-ink); color: #fff; padding: 14px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 700; box-shadow: var(--mk-shadow-lg); max-width: 340px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mk-cats { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mk-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mk-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-feats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .mk-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .mk-item-layout { flex-direction: column; }
  .mk-item-side { width: 100%; }
  .mk-filters { width: 100%; }
  .mk-steps { grid-template-columns: 1fr; gap: 26px; }
  .mk-grid, .mk-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .mk-header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .mk-hdr-searchbar { order: 3; flex-basis: 100%; max-width: none; }
  .mk-nav { gap: 14px; }
  .mk-nav .mk-hide-sm, .mk-nav-sep { display: none; }
  .mk-wrap { padding: 0 16px; }
  .mk-section { padding-top: 48px; }
  .mk-cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-grid, .mk-grid-3 { grid-template-columns: 1fr; }
  .mk-facts { grid-template-columns: 1fr; gap: 18px; }
  .mk-feats { grid-template-columns: 1fr; }
  .mk-card-pad { padding: 22px 20px; }
  .mk-band-dark { padding: 30px 24px; }
  .mk-empty { padding: 28px 22px; gap: 22px; }
  .mk-empty img { width: 120px; }
  .mk-hero { min-height: 470px; }
  .mk-herosearch { flex-wrap: wrap; border-radius: 20px; }
  .mk-herosearch .mk-btn { width: 100%; }
  .mk-gallery-hero { height: 280px; }
  .mk-thumbs { flex-direction: row; width: 100%; }
  .mk-thumbs img, .mk-thumbs .mk-thumb { width: 68px; height: 62px; }
  .mk-footer { padding: 44px 0 28px; margin-top: 52px; }
  .mk-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .mk-pay { margin-left: 0; }
  /* every tap target stays at or above 44px on touch */
  .mk-btn { min-height: 48px; width: 100%; }
  .mk-btn-inline { width: auto; }
  .mk-chip { min-height: 44px; }
}

/* ── State classes the existing page scripts toggle ──────────── */
.legal-section { display: none; }
.legal-section.active { display: block; }
.legal-tab-btn.active,
.tab-btn.active,
.faq-cat-btn.active,
#btn-renter.active,
#btn-lister.active { background: var(--mk-ink); color: #fff; box-shadow: none; }
.faq-cat-btn.active:hover, .tab-btn.active:hover { background: var(--mk-ink); color: #fff; }
.category-btn.active-cat { box-shadow: inset 0 0 0 2px var(--mk-pink); }
#faqAll [data-cat] { display: block; }

/* Legal reading column */
.legal-section h2 { font-size: 28px; margin: 36px 0 14px; }
.legal-section h3 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.legal-section p, .legal-section li { font-size: 17px; line-height: 1.75; color: var(--mk-ink-2); max-width: 64ch; }
.legal-section p { margin-bottom: 14px; }
.legal-section ul { padding-left: 20px; margin-bottom: 16px; }
.legal-section > h2:first-child { margin-top: 0; }

/* Upload drop zones */
.mk-drop {
  border: 1.5px dashed var(--mk-line); border-radius: 12px; background: var(--mk-paper);
  min-height: 150px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer; padding: 18px; text-align: center;
}
.mk-drop:hover { border-color: var(--mk-pink); }
.mk-drop img.id-prev { max-width: 100%; max-height: 130px; border-radius: 8px; display: none; }
.mk-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.mk-photo-grid > div { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--mk-tint); }
.mk-photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.img-remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0;
  border-radius: 999px; background: rgba(27,28,40,.72); color: #fff; cursor: pointer;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) { .mk-photo-grid { grid-template-columns: 1fr 1fr; } }

/* Numbered step list used on how-it-works */
.mk-flow { border-top: 1px solid var(--mk-line); }
.mk-flow-item { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--mk-line); }
.mk-flow-item > b { width: 52px; flex: none; font-size: 30px; font-weight: 800; color: var(--mk-ink-3); line-height: 1; }
.mk-flow-item .mk-flow-ic { width: 40px; flex: none; padding-top: 2px; }
.mk-flow-item h3 { font-size: 19px; font-weight: 800; margin-bottom: 5px; }
.mk-flow-item p { font-size: 16px; line-height: 1.65; color: var(--mk-ink-2); margin: 0; max-width: 62ch; }
@media (max-width: 720px) {
  .mk-flow-item { gap: 14px; }
  .mk-flow-item > b { width: 38px; font-size: 24px; }
  .mk-flow-item .mk-flow-ic { display: none; }
}

/* Thumbnails are injected at runtime by pages/item.js */
.thumb {
  width: 100%; height: 78px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--mk-line); cursor: pointer; display: block; background: var(--mk-tint-purple);
}
.thumb.active { border-color: var(--mk-pink); box-shadow: 0 0 0 2px rgba(216,27,74,.18); }
@media (max-width: 720px) { .thumb { width: 68px; height: 62px; } }

/* initLocale() injects language + currency selects into the nav at runtime,
   which pushed the header past the viewport. Let the row wrap and give the
   secondary link room to drop out first. */
.mk-header-inner { flex-wrap: wrap; row-gap: 10px; }
.mk-hdr-searchbar { max-width: 420px; }
.mk-nav { flex-wrap: wrap; row-gap: 8px; gap: 16px; }
@media (max-width: 1320px) { .mk-nav .mk-hide-md { display: none; } }
/* Medium screens: the logo, search bar and nav do not fit on one row, and the
   search bar was squeezing until its contents spilled over the nav links.
   Give it its own full-width row instead, and never let it shrink below usable. */
@media (min-width: 721px) { .mk-hdr-searchbar { min-width: 280px; } }
@media (min-width: 721px) and (max-width: 1120px) {
  .mk-hdr-searchbar { order: 3; flex: 1 1 100%; max-width: none; }
}
/* Wider screens where the menu still wraps (longer translations, e.g. German):
   mkHeaderLayout() adds .mk-hdr-stacked so the logo sits alone on the top row
   and the search bar + menu share the row below. */
@media (min-width: 1121px) {
  .mk-header-inner.mk-hdr-stacked > .mk-logo { flex-basis: 100%; }
  .mk-header-inner.mk-hdr-stacked .mk-hdr-searchbar { max-width: 520px; }
}

/* Defined locally rather than borrowed from Bootstrap, so screen-reader-only
   labels stay hidden even if the CDN is slow, blocked or replaced. */
.visually-hidden, .mk-sr {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Minimal fallback if Bootstrap's spinner never arrives */
.spinner-border {
  display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em;
  border: .25em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: mk-spin .75s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ── Phone: the header search and any fixed-width column ─────── */
@media (max-width: 720px) {
  .mk-hdr-searchbar { flex-basis: 100%; max-width: none; padding-right: 12px; }
  .mk-hdr-searchbar > span { display: none; }        /* the 1px divider */
  .mk-hdr-searchbar > .mk-btn { display: none; }      /* Enter submits instead */
  .mk-hdr-searchbar input { min-width: 0; }
  .mk-hdr-searchbar select { max-width: 104px; }
  /* nothing with an inline pixel width may push the page sideways */
  #mk-main [style*="width:"] { max-width: 100%; }
  #mk-main .mk-band-dark { max-width: 100%; }
  .mk-herosearch select { max-width: 100%; }
}

/* A flex item will not shrink below its content unless told to; without this
   the header search bar's intrinsic width pushed the page sideways on phones. */
.mk-hdr-searchbar { min-width: 0; }
.mk-hdr-searchbar input { min-width: 0; flex: 1 1 auto; }
.mk-header-inner > * { min-width: 0; }
.mk-herosearch { min-width: 0; }
.mk-herosearch input { min-width: 0; }
@media (max-width: 720px) {
  .mk-hdr-searchbar { width: 100%; flex: 1 1 100%; }
  .mk-band-dark { width: auto !important; }
}
/* Final guard: nothing may ever scroll the page horizontally. */
html { overflow-x: clip; }

/* Login / sign-up side panel */
.mk-auth-panel {
  border-radius: 0; padding: 56px 48px; display: flex; flex-direction: column;
  gap: 34px; width: 520px; flex: none; min-width: 0;
}
@media (max-width: 980px) {
  .mk-auth-panel { width: 100%; flex: 1 1 100%; padding: 34px 22px; gap: 26px; }
  .mk-auth-panel h2 { font-size: 30px; }
}
@media (max-width: 420px) {
  .mk-auth-panel { padding: 28px 16px; }
  .mk-auth-panel h2 { font-size: 26px; }
  .mk-auth-panel p, .mk-auth-panel span { overflow-wrap: anywhere; }
  .mk-logo-text { font-size: 17px; }
}

/* ── Very narrow phones (320–420px) ──────────────────────────── */
@media (max-width: 420px) {
  .mk-wrap { padding: 0 14px; }
  .mk-card-pad { padding: 20px 16px; }
  .mk-band-dark { padding: 26px 18px; }
  .mk-empty { padding: 22px 16px; }
  .mk-h1 { font-size: clamp(28px, 8.4vw, 44px); }
  .mk-h2 { font-size: clamp(23px, 6.6vw, 32px); }
  .mk-tabs { gap: 4px; padding: 4px; }
  .mk-tabs button, .mk-tabs a { padding: 11px 14px; font-size: 14px; }
  .mk-hdr-searchbar select { max-width: 86px; font-size: 13px; }
  .mk-header-inner { gap: 10px; padding: 10px 14px; }
  .mk-footer { padding: 36px 0 24px; }
  /* long unbreakable strings — emails, urls, the wordmark — must wrap */
  .mk-footer a, .mk-lead, .mk-muted, .mk-hint, .mk-acc-a,
  .legal-section p, .legal-section li, .mk-card-title { overflow-wrap: anywhere; }
  .mk-stat b { font-size: 34px; }
  .mk-flow-item > b { width: 32px; font-size: 21px; }
}

/* Fixed-width side columns, expressed as classes so one media query can
   collapse them instead of fighting inline widths. */
.mk-auth-form { flex: 1; padding: 56px 72px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mk-side-card { width: 380px; flex: none; min-width: 0; }
.mk-side-card-sm { width: 280px; }
@media (max-width: 980px) {
  .mk-auth-form { padding: 34px 22px; }
  .mk-side-card, .mk-side-card-sm { width: 100%; flex: 1 1 100%; }
}
@media (max-width: 420px) { .mk-auth-form { padding: 26px 14px; } }

/* Inline min-widths (used to keep two-column rows from collapsing too early)
   become overflow on very small screens. Below 520px everything is one
   column anyway, so let every block shrink. */
@media (max-width: 520px) {
  #mk-main div, #mk-main aside, #mk-main section, #mk-main form,
  #mk-main p, #mk-main span { min-width: 0 !important; }
  #mk-main [style*="max-width"] { max-width: 100% !important; }
}

/* Do not depend on Bootstrap's reset for this — a 100%-wide input with
   padding overflows its parent without it, which is how the forms broke. */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; }

/* Inline grids using minmax(320px,…) cannot fit a 320px screen. Below 560px
   every inline grid becomes a single column. */
@media (max-width: 560px) {
  #mk-main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* On wide screens the header search must not be squeezed to nothing by the
   language and currency selects that initLocale() injects. */
@media (min-width: 1100px) { .mk-hdr-searchbar { min-width: 300px; } }

/* ── Homepage: the hero has its own search, so hide the header one ── */
.mk-home .mk-hdr-searchbar { display: none; }

/* ── Listing cards: saved heart, availability, distance ── */
.mk-heart-btn.is-saved svg { fill: var(--mk-pink); stroke: var(--mk-pink); }
.mk-avail { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 800; }
.mk-avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mk-avail.ok { color: #1f8a4c; }
.mk-avail.no { color: var(--mk-ink-3); }
.mk-card-dist { color: var(--mk-ink-2); font-weight: 700; white-space: nowrap; }
.mk-locate-btn { margin-left: 14px; padding: 0; border: 0; background: none; color: var(--mk-pink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.mk-locate-btn:hover { text-decoration: underline; }

/* ── Phone header: logo + menu button; links, language, currency and
   "List an item" fold into the menu ── */
.mk-menu-btn { display: none; }
@media (max-width: 720px) {
  .mk-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; order: 1;
    width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--mk-line);
    border-radius: 12px; background: #fff; color: var(--mk-ink); cursor: pointer;
  }
  .mk-header-inner > .mk-nav { display: none; }
  .mk-header-inner.mk-menu-open > .mk-nav {
    display: flex; order: 2; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-left: 0; padding: 2px 0 6px;
  }
  .mk-menu-open .mk-nav > a:not(.mk-btn) { padding: 13px 2px; font-size: 17px; border-bottom: 1px solid var(--mk-line); }
  .mk-menu-open .mk-nav .mk-hide-sm, .mk-menu-open .mk-nav .mk-hide-md { display: block; }
  .mk-menu-open .mk-nav > div { padding: 14px 0 4px; }
  .mk-menu-open .mk-nav #header-add-link { justify-content: center; width: 100%; min-height: 48px; margin-top: 10px; }
}