/* bk-marketplace.css — Bookku cross-tenant marketplace (Phase 1 UAT)
   Frontend lane, mra-marketplace-phase1.

   DESIGN.md sections implemented:
     §1 / §2.2  — cool-tinted white canvas (--bk-surface-0 ≈ #F7F9FC), NOT pure #FFF / warm-white
     §2.1       — trust-blue brand axis via --brand-primary; all accents cascade
     §2.3 / §2.7— ink hierarchy + contrast floors (price/name on ink, muted meta ≥4.5:1)
     §2.4       — semantic soft fills for the trust chip (success-soft / neutral)
     §3.1 / §3.2— editorial pairing (Fraunces display on hero title, Plus Jakarta body)
     §3.4 / §3.6— tabular price digits, ฿ prefix (via --price-font, mirrors storefront)
     §4.5       — button states (hover / focus-visible / active), 44px touch
     §6.1       — three-tier brand-mixed elevation (--bk-elev-*)
     §6.4       — semantic z-index ladder (--z-sticky for the sticky search bar)
     §8.5       — intrinsic responsive grid repeat(auto-fill, minmax()) — mobile-first
     §1 ban     — no side-stripe borders, no 1px-border+heavy-shadow pairing, radius ≤18px

   This is a STANDALONE page (backend serves it at GET /marketplace). It re-uses
   the storefront card visual language (.prod-card: full-bleed rounded .img +
   .meta with .name + .prod-price-row pill-left/price-right) so it reads native,
   but ships its own scoped tokens rather than pulling the 8k-line template-coupled
   bk-shop.css. Tokens are copied verbatim from bk-shop.css :root so hues match. */

:root {
  /* Brand axis (§2.1) — trust-blue; marketplace chrome stays Bookku-blue
     (cross-tenant surface — no single tenant owns it). */
  --brand-primary:       #2563EB;
  --brand-primary-ink:   #FFFFFF;
  --brand-primary-hover:  color-mix(in oklch, var(--brand-primary) 88%, black);
  --brand-primary-active: color-mix(in oklch, var(--brand-primary) 78%, black);
  --brand-primary-soft:   color-mix(in oklch, var(--brand-primary) 12%, white);
  --brand-primary-tint:   color-mix(in oklch, var(--brand-primary) 6%,  white);
  --brand-primary-ring:   color-mix(in oklch, var(--brand-primary) 45%, transparent);
  --accent:              var(--brand-primary);

  /* Cool-tinted white surfaces (§1 / §2.2) — warm-white BANNED */
  --bk-surface-0: oklch(98%   0.008 260);  /* canvas */
  --bk-surface-1: oklch(99.5% 0.004 260);  /* card resting */
  --bk-surface-2: #FFFFFF;                 /* elevated: sticky bar / chips */
  --bk-surface-inset: oklch(96% 0.006 260);/* input bg */

  /* Ink hierarchy (§2.3) */
  --bk-ink:        oklch(20% 0.02 260);
  --bk-ink-muted:  oklch(45% 0.02 260);
  --bk-ink-subtle: oklch(60% 0.015 260);
  --text:      var(--bk-ink);
  --text-mute: var(--bk-ink-muted);
  --border:    color-mix(in oklch, var(--brand-primary) 8%, oklch(90% 0.01 260));

  /* Semantic (§2.4) */
  --bk-success:      #15803D;
  --bk-success-soft: color-mix(in oklch, var(--bk-success) 14%, white);

  /* Three-tier elevation, brand-mixed (§6.1) */
  --bk-elev-base:
      0 1px 0 0 color-mix(in oklch, var(--brand-primary) 4%, transparent);
  --bk-elev-card:
      0 1px 2px  0 color-mix(in oklch, var(--brand-primary) 6%, transparent),
      0 4px 12px 0 color-mix(in oklch, var(--brand-primary) 8%, transparent);
  --bk-elev-float:
      0  2px  6px 0 color-mix(in oklch, var(--brand-primary)  8%, transparent),
      0  8px 24px 0 color-mix(in oklch, var(--brand-primary) 10%, transparent),
      0 24px 48px 0 color-mix(in oklch, var(--brand-primary)  6%, transparent);

  /* z-index ladder (§6.4) */
  --z-sticky: 1100;

  /* Type (§3.1) — mirrors bk-shop.css stacks incl. Thai fallbacks */
  --display-font: 'Fraunces', 'Sarabun', Georgia, 'Noto Sans Thai', serif;
  --body-font:    'Plus Jakarta Sans', 'Noto Sans Thai', system-ui, sans-serif;
  --price-font:   'Bebas Neue', var(--body-font);

  --card-radius: 14px;
  --container-w: 1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bk-surface-0);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display-font); }
:lang(th) { letter-spacing: 0; }  /* §3.3 — Thai never gets negative tracking */

.mk-wrap { max-width: var(--container-w); margin: 0 auto; padding: 0 16px; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.mk-topbar {
  background: var(--bk-surface-2);
  box-shadow: var(--bk-elev-base);
}
.mk-topbar-inner {
  max-width: var(--container-w); margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.mk-brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--display-font); font-weight: 600;
  font-size: 20px; letter-spacing: -0.01em; color: var(--text);
  text-decoration: none;
}
.mk-brand .mk-brand-dot { color: var(--brand-primary); }

/* ── Hero ───────────────────────────────────────────────────────── */
.mk-hero {
  padding: 28px 0 8px;
  /* single-color low-opacity radial bleed of brand (§1) — no SaaS gradient */
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in oklch, var(--brand-primary) 8%, transparent),
      transparent 60%);
}
.mk-hero h1 {
  margin: 0 0 6px;
  font-weight: 500;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text);
}
.mk-hero .mk-sub {
  margin: 0 0 20px;
  color: var(--text-mute);
  font-size: clamp(14px, 3.6vw, 17px);
  max-width: 62ch; text-wrap: pretty;
}

/* ── Search box (drives ?q) ─────────────────────────────────────── */
.mk-search {
  display: flex; gap: 8px; align-items: stretch;
  max-width: 620px;
}
.mk-search-field {
  position: relative; flex: 1 1 auto; min-width: 0;
}
.mk-search-field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-mute); pointer-events: none;
}
.mk-search input {
  width: 100%; min-height: 48px;
  padding: 10px 14px 10px 42px;
  font-family: var(--body-font); font-size: 16px; color: var(--text);
  background: var(--bk-surface-2);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mk-search input::placeholder { color: var(--bk-ink-subtle); }
.mk-search input:hover { border-color: var(--text-mute); }
.mk-search input:focus-visible {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

/* ── Buttons (§4.5) ─────────────────────────────────────────────── */
.mk-btn {
  min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--body-font); font-weight: 600; font-size: 15px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 160ms ease, background-color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}
.mk-btn-primary { background: var(--brand-primary); color: var(--brand-primary-ink); }
.mk-btn-primary:hover  { background: var(--brand-primary-hover); }
.mk-btn-primary:active { background: var(--brand-primary-active); transform: translateY(1px); }
.mk-btn-ghost {
  background: var(--bk-surface-2); color: var(--text);
  border-color: var(--border);
}
.mk-btn-ghost:hover { border-color: var(--text-mute); }
.mk-btn:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }

/* ── Filter / sort bar (sticky) ─────────────────────────────────── */
.mk-filters {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bk-surface-0) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  margin-top: 18px;
}
.mk-filters-inner {
  max-width: var(--container-w); margin: 0 auto; padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.mk-select-wrap { position: relative; display: inline-flex; }
.mk-select {
  -webkit-appearance: none; appearance: none;
  min-height: 44px; padding: 8px 34px 8px 14px;
  font-family: var(--body-font); font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--bk-surface-2);
  border: 1.5px solid var(--border); border-radius: 999px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 160ms ease;
}
.mk-select:hover { border-color: var(--text-mute); }
.mk-select:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }
.mk-price-fields { display: inline-flex; align-items: center; gap: 6px; }
.mk-price-fields input {
  width: 96px; min-height: 44px;
  padding: 8px 12px; font-family: var(--body-font); font-size: 14px; color: var(--text);
  background: var(--bk-surface-inset);
  border: 1.5px solid var(--border); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.mk-price-fields input:focus-visible {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-ring);
}
.mk-price-fields .mk-dash { color: var(--text-mute); }
.mk-filters .mk-spacer { flex: 1 1 auto; }
.mk-result-count { font-size: 13px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* ── Grid (§8.5) — intrinsic, mobile-first (2-up floor at ~154px) ── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 16px;
  padding: 22px 0 8px;
}
@media (min-width: 640px) {
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
}

/* ── Product card — mirrors bk-shop.css .prod-card (editorial full-bleed) ── */
.prod-card {
  position: relative; cursor: pointer;
  background: none; border: none;
  text-decoration: none; color: inherit;
  display: block;
  container-type: inline-size;   /* meta text scales with card width (cqi) */
}
.prod-card .img {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden; position: relative;
  background: var(--bk-surface-inset);
  box-shadow: var(--bk-elev-card);
  transition: transform 200ms ease;
}
.prod-card:hover .img { transform: translateY(-4px); }
.prod-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-card .img .mk-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--bk-ink-subtle);
}
.prod-card .img .mk-noimg svg { width: 34%; height: 34%; opacity: 0.5; }

/* Trust badge — shop-trust tier ONLY (NOT item authenticity). Sits on the cover
   top-left, clipped to the rounded tile (§4.14 in-bounds overlay). */
.mk-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: 999px;
  line-height: 1.3; pointer-events: none;
  box-shadow: var(--bk-elev-base);
  max-width: calc(100% - 20px);
}
.mk-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.mk-badge-green {
  background: var(--bk-success-soft);
  color: var(--bk-success);
}
.mk-badge-gray {
  background: color-mix(in oklch, var(--bk-ink-muted) 12%, white);
  color: var(--bk-ink-muted);
}

.prod-card .meta { padding: 12px 4px 4px 4px; }
.prod-card .name {
  font-weight: 600; font-size: clamp(12px, 6.8cqi, 15px);
  letter-spacing: -0.01em; color: var(--text);
  margin: 0 0 3px 0;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.prod-card .mk-shop {
  font-size: clamp(10px, 5cqi, 12px); color: var(--text-mute);
  margin: 0 0 2px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* condition-grade chip — mirrors bk-shop.css .bk-chip micro-pill */
.mk-cond {
  display: inline-flex; align-items: center;
  margin: 4px 0 0;
  font-size: clamp(9px, 4.4cqi, 11px); font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--bk-ink-muted);
  background: color-mix(in oklch, var(--brand-primary) 6%, white);
  border: 1px solid var(--border);
}
.prod-card .prod-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 8px; min-width: 0;
}
.prod-card .prod-price-row .price {
  margin: 0; font-weight: 700;
  font-family: var(--price-font);
  font-size: clamp(14px, 7cqi, 18px);
  color: var(--text);
  font-variant-numeric: tabular-nums;   /* §3.4 */
  white-space: nowrap; flex: 0 0 auto;
}

/* ── States: loading skeleton / empty / error ──────────────────── */
.bk-skel {
  border-radius: 18px;
  background:
    linear-gradient(100deg,
      color-mix(in oklch, var(--brand-primary) 5%, var(--bk-surface-inset)) 30%,
      color-mix(in oklch, var(--brand-primary) 10%, var(--bk-surface-inset)) 50%,
      color-mix(in oklch, var(--brand-primary) 5%, var(--bk-surface-inset)) 70%);
  background-size: 200% 100%;
  animation: mk-shimmer 1.3s linear infinite;
}
.bk-skel-prod { aspect-ratio: 1 / 1; }
@keyframes mk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bk-skel { animation: none; } }

.mk-state {
  grid-column: 1 / -1;
  text-align: center; padding: 48px 16px;
  color: var(--text-mute);
}
.mk-state svg { width: 64px; height: 64px; color: var(--bk-ink-subtle); margin-bottom: 12px; }
.mk-state h2 {
  margin: 0 0 6px; font-family: var(--display-font);
  font-weight: 500; font-size: 22px; color: var(--text);
}
.mk-state p { margin: 0 0 16px; font-size: 14px; }

/* Busy-retry spinner for the 429/503 auto-retry state (bk-marketplace.js
   renderBusy). Brand-token colours only — no raw hex (§2.5 / §9.4). Decorative
   (aria-hidden); the .mk-state text carries the message, so under reduced motion
   the ring simply stops — content stays fully readable (§8.3 / §8.6). */
.mk-spin {
  display: inline-block;
  width: 40px; height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 3px solid var(--brand-primary-soft);
  border-top-color: var(--brand-primary);
  animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-spin { animation: none; } }

/* ── Pagination ────────────────────────────────────────────────── */
.mk-more { text-align: center; padding: 16px 0 40px; }
.mk-more[hidden] { display: none; }

/* ── Footer ────────────────────────────────────────────────────── */
.mk-footer {
  margin-top: 24px; padding: 28px 16px 40px;
  border-top: 1px solid var(--border);
  color: var(--text-mute); font-size: 13px; text-align: center;
}
.mk-footer .mk-disclaimer { max-width: 60ch; margin: 8px auto 0; text-wrap: pretty; }