/* 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
     §4.4       — auth-modal dialog motion (zoom-in-95 + fade, spring easing; transform/opacity only)
     §6.4       — z-index ladder for the modal (--z-modal-backdrop 1200 / --z-modal 1300)
     §4.14      — modal is fixed-position (never absolute-in-overflow) — overlay clipping ban
     §8.2       — 44×44 touch targets on modal close + logout + OTP controls
     §8.3       — reduced-motion block (collapses the modal zoom + all page motion)
     §11.2 note — APEX chrome stays Bookku-blue (the §11.2 tenant-cascade rule governs
                  CUSTOMER auth inside a tenant shop.html, NOT this cross-tenant apex)

   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;
  --z-dropdown: 1200;   /* Wave B fix 1 — filter listbox panel */

  /* 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-topbar-spacer { flex: 1 1 auto; }
.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);
}

/* ── Seller funnel CTA (2026-07-02) ─────────────────────────────────
   Slim soft-tinted pill under the buyer search — SECONDARY by design
   (DESIGN.md §2.6: one primary; the search is it). Casual sellers open a
   free shop → their catalog joins the marketplace. */
.mk-seller-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; max-width: 620px;
  padding: 9px 16px; border-radius: 999px;
  font-family: var(--body-font); font-size: 14px; line-height: 1.35;
  color: var(--brand-primary); text-decoration: none;
  background: var(--brand-primary-soft);
  border: 1px solid color-mix(in oklch, var(--brand-primary) 22%, transparent);
  transition: background 160ms ease, border-color 160ms ease;
}
.mk-seller-cta:hover {
  background: color-mix(in oklch, var(--brand-primary) 18%, white);
  border-color: color-mix(in oklch, var(--brand-primary) 40%, transparent);
}
.mk-seller-cta:focus-visible {
  outline: 3px solid var(--brand-primary-ring); outline-offset: 2px;
}
.mk-seller-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mk-seller-cta strong { font-weight: 700; }
.mk-seller-cta .mk-seller-cta-go { margin-left: 2px; font-weight: 700; }

.mk-footer-seller { margin: 0 0 10px; font-size: 13px; color: var(--text-mute); }
.mk-footer-seller a {
  color: var(--brand-primary); font-weight: 600; text-decoration: none;
}
.mk-footer-seller a:hover { text-decoration: underline; }

/* ── 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; }
/* ── Wave B fix 1 (2026-07-02) — custom filter dropdown ─────────────────
   The native <select> option popup rendered over the pill text (pk report).
   bk-marketplace.js enhances each pill into a button+listbox; the native
   select stays hidden as the state holder. Styling contract:
   §4.5 pill button (the button REUSES .mk-select so the pill look is
   byte-identical) · §6.4 --z-dropdown layer · §8.2 ≥44px option rows ·
   §8.3 reduced-motion-safe reveal · §4.14 panel overlays, nothing clips it
   (.mk-filters has no overflow) · §2.3 ink hierarchy / §2.5 brand accent. */
.mk-select-wrap.mk-dd-on > select { display: none; }   /* custom control took over */
.mk-dd-btn { text-align: left; }
.mk-dd-btn[aria-expanded="true"] { border-color: var(--brand-primary); }
.mk-dd-btn.is-filtering {                 /* an applied filter is visible at a glance */
  border-color: var(--brand-primary);
  background-color: color-mix(in oklch, var(--brand-primary) 8%, var(--bk-surface-2));
}
.mk-dd-list {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: var(--z-dropdown);
  min-width: 100%; width: max-content; max-width: min(320px, 88vw);
  max-height: min(340px, 60vh); overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--bk-surface-2);
  border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: var(--bk-elev-float);
  animation: mk-dd-in 140ms ease;
}
@keyframes mk-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {           /* §8.3 */
  .mk-dd-list { animation: none; }
}
.mk-dd-list:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }
.mk-dd-option {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;               /* §8.2 touch target */
  border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.mk-dd-option.is-active {                            /* keyboard/hover highlight */
  background: color-mix(in oklch, var(--brand-primary) 8%, transparent);
}
.mk-dd-option[aria-selected="true"] {
  font-weight: 600; color: var(--brand-primary);
}
.mk-dd-option[aria-selected="true"]::before {
  content: "✓"; font-weight: 700; margin-right: 2px;
}
.mk-dd-option[aria-selected="false"]::before {
  content: ""; width: 12px;                          /* align labels under the check */
}

.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) ──
   Journey Phase 2 (2026-07-02): the card is an <article> with TWO links —
   .prod-card-link (product → tenant PDP) stretched over the whole card via
   ::after, and .mk-shop-link (shop_name → in-marketplace seller page) lifted
   above the stretch on its own z-index with a ≥44px tap row (§8.2). Nested
   anchors are invalid HTML, hence the stretch pattern. */
.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-link {
  display: block; color: inherit; text-decoration: none;
}
.prod-card-link::after {          /* stretched product hit-area (whole card) */
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.prod-card-link:focus-visible::after {
  outline: 3px solid var(--brand-primary-ring); outline-offset: 2px;
  border-radius: 18px;
}
.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);
}
/* Journey Phase 2 — the SAME trust chip in normal flow (seller-page header /
   compact bar) instead of the card-cover overlay position. One renderer
   (badgeHtml), one copy, two placements. */
.mk-badge.mk-badge-inline {
  position: static; pointer-events: auto;
  box-shadow: none;
  font-size: 12px; padding: 5px 10px;
  max-width: none;
}

/* ── Seller page (Journey Phase 2, 2026-07-02) — DESIGN.md §2.1 apex chrome,
   §4.2-adjacent header strip, §8.2 targets, §6.4 z-ladder ─────────────────
   Header strip above the standard grid: parent-only crumb, monogram avatar,
   shop name (display face), trust chip + product count, and a small
   "เยี่ยมชมหน้าร้านเต็ม ↗" storefront exit. Collapses to the fixed compact
   bar on mobile scroll (body.mk-compact-on, IO-toggled). */
.mk-shop-header {
  padding: 18px 0 4px;
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in oklch, var(--brand-primary) 8%, transparent),
      transparent 60%);
}
.mk-shop-header[hidden] { display: none; }
.mk-shop-crumb { font-size: 14px; margin-bottom: 10px; }
.mk-shop-crumb a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 10px 4px 0;   /* §8.2 tap row */
  color: var(--text-mute); font-weight: 600; text-decoration: none;
  transition: color 140ms ease;
}
.mk-shop-crumb a:hover { color: var(--brand-primary); }
.mk-shop-crumb a:focus-visible {
  outline: 3px solid var(--brand-primary-ring); outline-offset: 2px;
  border-radius: 8px;
}
.mk-shop-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bk-surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;                 /* §4.0 xl ceiling */
  box-shadow: var(--bk-elev-card);
}
.mk-shop-avatar {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-soft); color: var(--brand-primary);
  font-family: var(--display-font); font-weight: 600; font-size: 22px;
}
.mk-shop-id { flex: 1 1 auto; min-width: 0; }
.mk-shop-name {
  margin: 0 0 4px; font-weight: 500;
  font-size: clamp(20px, 5vw, 28px); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-shop-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
}
.mk-shop-count { font-size: 13px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.mk-shop-visit {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 8px 14px;          /* §8.2 */
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--bk-surface-2);
  font-size: 13px; font-weight: 600; color: var(--text-mute);
  text-decoration: none; white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}
.mk-shop-visit:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.mk-shop-visit:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }

/* Mobile sticky compact bar — fixed at top while body.mk-compact-on (the full
   strip has scrolled out); the sticky filter bar shifts down beneath it so
   both stay usable. Mobile-only; desktop keeps the full header (it's short).
   transform/opacity only (§4.4 motion rule), reduced-motion covered by the
   global §8.3 block below. */
.mk-shop-compact {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: calc(var(--z-sticky) + 1);
  display: none;
  align-items: center; gap: 8px;
  min-height: 48px; padding: 6px 12px;
  background: var(--bk-surface-2);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--bk-elev-base);
  transform: translateY(-100%);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mk-shop-compact[hidden] { display: none; }
.mk-compact-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;   /* §8.2 */
  border-radius: 999px;
  color: var(--text); font-size: 22px; font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.mk-compact-back:hover { background: var(--bk-surface-inset); }
.mk-compact-back:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }
.mk-compact-name {
  flex: 1 1 auto; min-width: 0;
  font-weight: 600; font-size: 15px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) {
  .mk-shop-compact:not([hidden]) { display: flex; }
  body.mk-compact-on .mk-shop-compact:not([hidden]) { transform: translateY(0); }
  body.mk-compact-on .mk-filters { top: 56px; }   /* slide under the compact bar */
}
@media (max-width: 639px) {
  /* Narrow phones: let the visit link wrap under the identity row. */
  .mk-shop-strip { flex-wrap: wrap; padding: 12px 14px; gap: 10px 12px; }
}

/* Empty/missing-state CTA can be a link (seller-page "ไปหน้าตลาด Bookku"). */
.mk-state a.mk-btn { text-decoration: none; }

.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;
}
/* Journey Phase 2 (2c) — the shop line as a DISTINCT seller-page tap target:
   sits above the stretched product link (z-index), keeps the muted meta look
   at rest, reads as a link on hover/focus (brand ink + underline), and meets
   the §8.2 ≥44px floor via padding + compensating negative margins so the
   card's visual rhythm is unchanged. */
a.mk-shop-link {
  position: relative; z-index: 2;
  display: block;                  /* keeps .mk-shop's ellipsis working */
  max-width: 100%;
  min-height: 44px; padding: 14px 8px 14px 0;
  margin: -16px 0 -14px;
  text-decoration: none;
  transition: color 140ms ease;
}
a.mk-shop-link:hover, a.mk-shop-link:focus-visible {
  color: var(--brand-primary); text-decoration: underline;
}
a.mk-shop-link:focus-visible {
  outline: 3px solid var(--brand-primary-ring);
  outline-offset: -2px; border-radius: 8px;
}
/* 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;
}
/* Piece M (pk 2026-07-02) — masked-price cards carry a quiet contact hint
   beside the '฿52x,xxx' figure: muted meta ink (§2.3, ≥4.5:1 per §2.7),
   micro-pill grammar matching .mk-cond. The item is contact-only; the card
   says so before the click-out. */
.prod-card .mk-contact-hint {
  flex: 0 1 auto; min-width: 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(--bk-ink-muted) 8%, white);
  border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 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; }
.mk-footer-links {
  margin: 12px auto 0; display: flex; gap: 8px 14px;
  align-items: center; justify-content: center; flex-wrap: wrap;
}
.mk-footer-links a {
  color: var(--text-mute); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease;
}
.mk-footer-links a:hover { color: var(--brand-primary); border-bottom-color: var(--brand-primary-ring); }
.mk-footer-links .mk-dot { color: var(--bk-ink-subtle); }

/* ── Account chip in the topbar (logged-out button / logged-in identity) ──
   Bookku-blue chrome is intentional: the marketplace is the APEX cross-tenant
   surface (--brand-primary = trust-blue, see :root note above / DESIGN.md §2.1).
   §11.2's tenant-cascade "no Bookku-blue" rule governs CUSTOMER auth INSIDE a
   tenant shop.html — it does NOT apply to this apex chrome. */
.mk-account { display: inline-flex; align-items: center; gap: 8px; }
.mk-account-btn {                       /* logged-OUT: "เข้าสู่ระบบ / สมัคร" */
  min-height: 40px; padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid transparent;
  background: var(--brand-primary); color: var(--brand-primary-ink);
  font-family: var(--body-font); font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 160ms ease, background-color 160ms ease;
}
.mk-account-btn svg { width: 16px; height: 16px; }
.mk-account-btn:hover  { background: var(--brand-primary-hover); }
.mk-account-btn:active { background: var(--brand-primary-active); transform: translateY(1px); }
.mk-account-btn:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }

.mk-account-id {                        /* logged-IN identity pill */
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--brand-primary-tint);
  border: 1.5px solid var(--border);
  max-width: min(60vw, 320px);
}
.mk-account-avatar {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary); color: var(--brand-primary-ink);
  font-weight: 700; font-size: 12px;
}
.mk-account-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-logout-btn {
  min-height: 32px; min-width: 44px; padding: 6px 12px;
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--bk-surface-2); color: var(--text-mute);
  font-family: var(--body-font); font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.mk-logout-btn:hover { color: var(--text); border-color: var(--text-mute); }
.mk-logout-btn:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }

/* ── Auth modal (§4.4 dialog motion · §6.4 z-index ladder · §4.14 overlay) ──
   Native <dialog>-style centered modal (fixed-position, NOT absolute-in-overflow
   — §4.14 clipping ban). Backdrop = --z-modal-backdrop, card = --z-modal. */
.mk-modal-backdrop {
  position: fixed; inset: 0; z-index: 1200;      /* --z-modal-backdrop (§6.4) */
  background: color-mix(in oklch, var(--bk-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: mk-fade-in var(--mk-dur-enter, 200ms) linear;
}
.mk-modal-backdrop[hidden] { display: none; }
.mk-modal {
  position: relative; z-index: 1300;              /* --z-modal (§6.4) */
  width: 100%; max-width: 420px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--bk-surface-2);
  border-radius: 18px;                            /* §5 dialog radius ceiling */
  box-shadow: var(--bk-elev-float);               /* §6.1 brand-mixed float */
  padding: 24px 24px 22px;
  /* §4.4 zoom-in + fade, spring easing; transform/opacity only. */
  animation: mk-zoom-in var(--mk-dur-enter, 200ms) cubic-bezier(0.34, 1.56, 0.64, 1),
             mk-fade-in var(--mk-dur-enter, 200ms) linear;
}
@keyframes mk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-zoom-in { from { transform: scale(0.95); } to { transform: scale(1); } }

.mk-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;                      /* §8.2 touch target */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-mute);
  border-radius: 999px; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.mk-modal-close:hover { background: var(--bk-surface-inset); color: var(--text); }
.mk-modal-close:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }
.mk-modal-close svg { width: 20px; height: 20px; }

.mk-modal h2 {
  margin: 0 4px 4px 0; padding-right: 28px;
  font-family: var(--display-font); font-weight: 500;
  font-size: 24px; letter-spacing: -0.01em; color: var(--text);
}
.mk-modal-sub { margin: 0 0 18px; font-size: 14px; color: var(--text-mute); }

/* Social auth buttons (Google / LINE) — full-width provider buttons */
.mk-oauth { display: flex; flex-direction: column; gap: 10px; }
.mk-oauth-btn {
  min-height: 48px; padding: 10px 16px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bk-surface-2); color: var(--text);
  font-family: var(--body-font); font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.mk-oauth-btn:hover  { border-color: var(--text-mute); }
.mk-oauth-btn:active { transform: translateY(1px); }
.mk-oauth-btn:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }
.mk-oauth-btn svg, .mk-oauth-btn img { width: 20px; height: 20px; flex: 0 0 auto; }
.mk-oauth-line { background: #06C755; color: #FFF; border-color: #06C755; }
.mk-oauth-line:hover { background: #05b34c; border-color: #05b34c; }

/* Divider between social + phone */
.mk-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--bk-ink-subtle); font-size: 12px;
}
.mk-or::before, .mk-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}

/* Phone-OTP form */
.mk-field { margin: 0 0 12px; }
.mk-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.mk-input {
  width: 100%; min-height: 48px;
  padding: 10px 14px;
  font-family: var(--body-font); font-size: 16px; color: var(--text);
  background: var(--bk-surface-2);
  border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mk-input::placeholder { color: var(--bk-ink-subtle); }
.mk-input:hover { border-color: var(--text-mute); }
.mk-input:focus-visible {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-ring);
}
.mk-input-code { letter-spacing: 0.35em; font-variant-numeric: tabular-nums; text-align: center; }

.mk-btn-block { width: 100%; margin-top: 4px; }
.mk-btn[disabled], .mk-oauth-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Inline hint / error under the OTP form */
.mk-hint { margin: 8px 0 0; font-size: 13px; color: var(--text-mute); }
.mk-error { margin: 8px 0 0; font-size: 13px; color: #B91C1C; }
.mk-error[hidden], .mk-hint[hidden] { display: none; }

/* "back to phone / resend" secondary link */
.mk-linkbtn {
  background: none; border: none; padding: 4px 2px; margin: 0;
  font-family: var(--body-font); font-size: 13px; font-weight: 600;
  color: var(--brand-primary); cursor: pointer; text-decoration: underline;
}
.mk-linkbtn:disabled { color: var(--text-mute); cursor: default; text-decoration: none; }
.mk-linkbtn:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; border-radius: 4px; }

/* Consent line (PDPA §1) — inline disclosure with a checkbox (not pre-ticked) */
.mk-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 4px; padding: 12px;
  background: var(--brand-primary-tint);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-mute);
}
.mk-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--brand-primary); cursor: pointer;
}
.mk-consent label { cursor: pointer; }
.mk-consent a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; }

.mk-stage[hidden] { display: none; }

/* ── PDPA / legal pages (marketplace-privacy.html · marketplace-terms.html) ── */
.mk-legal {
  max-width: 760px; margin: 0 auto; padding: 32px 20px 64px;
}
.mk-legal .mk-legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 20px; font-size: 14px; font-weight: 600;
  color: var(--brand-primary); text-decoration: none;
}
.mk-legal .mk-legal-back:hover { text-decoration: underline; }
.mk-legal .mk-legal-back svg { width: 16px; height: 16px; }
.mk-legal h1 {
  margin: 0 0 4px; font-weight: 500;
  font-size: clamp(26px, 6vw, 34px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text);
}
.mk-legal .mk-legal-meta { margin: 0 0 28px; font-size: 13px; color: var(--text-mute); }
.mk-legal h2 {
  margin: 30px 0 8px; font-weight: 500;
  font-size: clamp(18px, 4.4vw, 22px); letter-spacing: -0.01em; color: var(--text);
}
.mk-legal p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.mk-legal ul { margin: 0 0 12px; padding-left: 22px; }
.mk-legal li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.mk-legal a { color: var(--brand-primary); font-weight: 600; }
.mk-legal .mk-legal-lead {
  padding: 14px 16px; margin: 0 0 24px;
  background: var(--brand-primary-tint); border: 1px solid var(--border);
  border-radius: 14px; font-size: 15px; color: var(--text-mute);
}
/* Visible placeholder token (e.g. {dpo_email}) — pk fills before launch (§ PDPA notes) */
.mk-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; padding: 1px 6px; border-radius: 6px;
  background: color-mix(in oklch, var(--brand-primary) 10%, white);
  color: var(--brand-primary-active); white-space: nowrap;
}

/* ══ Journey Phase 3 (2026-07-02) — marketplace-native PDP ═══════════════
   /marketplace/p/<slug>?shop=<tid> inside the Bookku-blue apex shell
   (§2.1 brand axis · §2.2 cool-white canvas). Mobile-first single column
   (gallery → name/condition → price → CTA above the fold → merchant-of-
   record → shop card → description); two columns from 860px (§8.1). While
   the pdp owns the surface, body.mk-pdp-on hides the grid + filter bar —
   the footer (trust disclaimer) stays on every view. */
body.mk-pdp-on .mk-filters,
body.mk-pdp-on #mk-main { display: none; }

.mk-pdp-wrap { padding: 12px 0 40px; }
.mk-pdp-crumb { margin: 4px 0 10px; }        /* reuses .mk-shop-crumb type */

.mk-pdp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) {                   /* §8.1 desktop split */
  .mk-pdp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; }
}

/* Gallery — full-bleed 1:1 cover like the cards (§4.2 media slot); resting
   card surface + soft elevation (§6.1 tier 1, radius ≤18px per the §1 ban). */
.mk-pdp-main {
  aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--bk-surface-1);
  box-shadow: var(--bk-elev-card);
  display: flex; align-items: center; justify-content: center;
}
.mk-pdp-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-pdp-main .mk-noimg { width: 44%; height: 44%; color: var(--bk-ink-subtle); }
.mk-pdp-main .mk-noimg svg { width: 100%; height: 100%; }
.mk-pdp-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mk-pdp-thumb {
  width: 64px; height: 64px; padding: 0;      /* ≥44px tap target (§8.2) */
  border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border); background: var(--bk-surface-1);
}
.mk-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-pdp-thumb.is-active { border-color: var(--brand-primary); }
.mk-pdp-thumb:focus-visible { outline: 3px solid var(--brand-primary-ring); outline-offset: 2px; }

/* Identity block — ink hierarchy per §2.3; taxonomy line stays muted meta. */
.mk-pdp-name {
  margin: 0 0 6px; font-weight: 700;
  font-size: clamp(20px, 5vw, 26px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--text);
}
.mk-pdp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mk-pdp-meta .mk-cond { margin: 0; }
.mk-pdp-tax { font-size: 12.5px; color: var(--text-mute); }

/* Price — tabular ฿ digits (§3.4/§3.6, --price-font mirrors the cards);
   masked items reuse the card's contact-hint chip grammar (Piece M). */
.mk-pdp-price-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.mk-pdp-price {
  font-family: var(--price-font); font-weight: 700;
  font-size: clamp(24px, 6vw, 32px); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mk-pdp-price-row .mk-contact-hint {          /* pdp twin of the card chip */
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px;
  color: var(--bk-ink-muted);                  /* §2.3 muted ink ≥4.5:1 (§2.7) */
  background: color-mix(in oklch, var(--bk-ink-muted) 8%, white);
  border: 1px solid var(--border);
}

/* THE CTA (amendment #1) — the page's ONE primary action (§4.5 button
   states via .mk-btn-primary; §8.2 comfortable 52px target). Above the fold
   on the 375px reference viewport (§8.4). */
.mk-pdp-cta {
  display: flex; width: 100%; min-height: 52px;
  margin: 14px 0 0; font-size: 16.5px;
  text-decoration: none;
}
/* Expectation microcopy + merchant-of-record disclosure (amendment #9) —
   small but visible muted meta (§2.3; ≥4.5:1 per §2.7), never footer-tucked. */
.mk-pdp-micro { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.mk-pdp-mor {
  margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text-mute);
  padding: 6px 10px; border-radius: 10px;
  background: var(--brand-primary-tint); border: 1px solid var(--border);
  width: fit-content;
}

/* Shop card — seller identity BEFORE any click-out (§4.2 card grammar,
   §6.1 tier 1; monogram avatar + trust chip reuse the seller-page pieces). */
.mk-pdp-shopcard {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 0; padding: 12px 14px;
  background: var(--bk-surface-1); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--bk-elev-card);
}
.mk-pdp-shopcard .mk-shop-avatar { width: 44px; height: 44px; font-size: 18px; }
.mk-pdp-shopcard-id { flex: 1 1 auto; min-width: 0; }
.mk-pdp-shopname {
  font-weight: 600; font-size: 15px; color: var(--text);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.mk-pdp-shoplinks { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; }
.mk-pdp-shoplinks a {
  display: inline-flex; align-items: center; gap: 3px;
  min-height: 44px; padding: 6px 0;            /* §8.2 row-height targets */
  margin: -8px 0;
  font-size: 13px; font-weight: 600; color: var(--brand-primary);
  text-decoration: none;
}
.mk-pdp-shoplinks a:hover, .mk-pdp-shoplinks a:focus-visible { text-decoration: underline; }
.mk-pdp-shoplinks a:focus-visible {
  outline: 3px solid var(--brand-primary-ring); outline-offset: -2px; border-radius: 8px;
}

/* Description — readable measure (§3.7) + preserved line breaks. */
.mk-pdp-desc { margin: 22px 0 0; }
.mk-pdp-desc h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.mk-pdp-desc p {
  margin: 0; max-width: 65ch;
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere;
}

/* Loading skeleton — reuses the §8.3-safe .bk-skel shimmer. */
.mk-pdp-skel-img { aspect-ratio: 1 / 1; }
.mk-pdp-skel-line { height: 22px; margin: 0 0 12px; border-radius: 8px; }
.mk-pdp-skel-cta { height: 52px; margin-top: 18px; border-radius: 14px; }

/* ── §8.3 reduced-motion — collapse all animation/motion (paste block) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}