:root {
  --market-bg: #0a0e1a;
  --market-ink: #e2e8f0;
  --market-muted: rgba(148, 163, 184, 0.7);
  --market-border: rgba(148, 163, 184, 0.12);
  --market-border-strong: rgba(148, 163, 184, 0.22);
  --market-card: rgba(30, 35, 50, 0.9);
  --market-glass: rgba(12, 16, 28, 0.82);
  --market-accent: #38bdf8;
  --market-accent-strong: #0ea5e9;
  --market-highlight: #f97316;
  --market-shadow: rgba(0, 0, 0, 0.45);
}

/* ===== Background Canvas ===== */
#marketBgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body.public-page.market-page {
  margin: 0;
  min-height: 100vh;
  /* Header padding-top lives in assets/app-header.css (shared across
     market/admin/studio). Footer is fixed at 32px; reserve that here. */
  padding-top: 52px;
  padding-bottom: 32px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--market-ink);
  font-family: var(--ui-font-family);
  isolation: isolate;
}

/* Market-only: pin the header in viewport (not in scroll container).
   Sticky was failing on this page because of an ancestor's overflow
   handling — fixed sidesteps that and is rock-solid as a result. */
body.public-page.market-page header.ch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Allow the profile dropdown to render below the header. The base
     `header.ch` rule sets `overflow: hidden` (to keep its rounded
     corners clean) — but that clips the absolute-positioned
     `.market-user-menu` dropdown so clicking the avatar appears to
     do nothing. We need overflow visible only on the market page. */
  overflow: visible;
}

.market-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ===== Header (dark glassmorphism) ===== */
.market-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  padding: 4px 16px 0;
  background: transparent;
  border: 0;
}

.market-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--market-border-strong);
  border-radius: 20px;
  background: var(--market-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(148, 163, 184, 0.08);
}

@supports not (backdrop-filter: blur(1px)) {
  .market-header-inner {
    background: rgba(10, 14, 26, 0.96);
  }
}

/* ===== Brand ===== */
.market-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.market-brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(56, 189, 248, 0.2));
}

.market-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Circloud(R) — small, subtle */
.market-brand-top {
  font-family: var(--ui-font-family);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--market-muted);
}

/* SPIDERMIND — larger, bolder, the product name */
.market-brand-bottom {
  font-family: var(--ui-font-family);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--market-ink);
  margin-top: 2px;
}

/* ===== Header Tools ===== */
.market-header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.market-search {
  flex: 1;
  min-width: 180px;
  max-width: 430px;
}

.market-search input,
.market-sort select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--market-border);
  background: rgba(20, 25, 40, 0.8);
  color: var(--market-ink);
  border-radius: 12px;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.market-search input {
  padding: 0 12px;
}

.market-search input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.market-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.market-sort-label {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--market-muted);
  white-space: nowrap;
}

.market-sort select {
  padding: 0 10px;
  min-width: 176px;
}

.market-search input:focus,
.market-sort select:focus {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(16, 20, 34, 0.95);
}

/* ===== Open Editor Button ===== */
.market-open-editor {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.15));
  color: var(--market-accent);
  font-family: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.market-btn-icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.market-open-editor[hidden] { display: none !important; }

.market-open-editor:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.18);
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.3), rgba(14, 165, 233, 0.22));
}

/* ===== Login Button ===== */
.market-login-btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--market-border-strong);
  background: rgba(30, 35, 50, 0.7);
  color: var(--market-ink);
  font-family: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.market-login-btn:hover {
  transform: translateY(-1px);
  background: rgba(40, 46, 65, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.market-login-btn[hidden] { display: none; }

/* ===== User Badge ===== */
.market-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 12px;
  border: 1px solid var(--market-border);
  background: rgba(30, 35, 50, 0.6);
  position: relative;
  cursor: pointer;
}

.market-user-menu {
  /* Fixed (not absolute) so the dropdown isn't clipped by ancestor
     `overflow: hidden` rules (header.ch) or `overflow-x: auto`
     (.ch-nav, which implicitly clips on the y-axis too). JS in
     market.js positions this each time the badge is clicked, using
     the badge's bounding rect. */
  position: fixed;
  top: 0;
  left: 0;
  min-width: 140px;
  background: rgba(20, 24, 36, 0.95);
  border: 1px solid var(--market-border);
  border-radius: 8px;
  padding: 4px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.market-user-menu[hidden] { display: none; }

.market-user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--market-ink);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.market-user-menu-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.market-user-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.market-user-badge[hidden] { display: none; }

.market-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}

.market-user-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--market-ink);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Main ===== */
.market-main {
  grid-column: 2;
  /* Slightly capped (~12% narrower than the 1240px header cap)
     so the central column reads at a comfortable reading width on
     very wide screens rather than stretching to the side cards. */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-width: 0;
  padding: 0 0 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Market Top — same circloud-portal card style, purple-tinted ===== */
.market-top {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 14px 22px 18px;
  border-radius: 18px;
  /* Custom semi-transparent variant of --sm-card-bg — same purple
     halos, but the dark base is dropped from 0.92→0.55 alpha so
     the mycelium canvas behind shows through. We do NOT use the
     `opacity` property (that would also dim text/diagrams); we
     dial back the BACKGROUND alpha only. */
  background:
    radial-gradient(circle at 18% 14%, rgba(192, 38, 211, 0.18), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(167, 139, 250, 0.14), transparent 40%),
    linear-gradient(148deg, rgba(20, 10, 40, 0.55) 0%, rgba(14, 8, 28, 0.62) 100%);
  border: var(--sm-card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.market-top::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-top > * { position: relative; z-index: 1; }

.market-steps {
  position: relative;
  z-index: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.market-steps-svg {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
  min-width: 560px;
}

/* ===== Brand hero (OUTSIDE the big steps card) — same cr-brand
   block as the Circloud portal cards (md size).

   Alignment fix for the 10-letter SPIDERMIND row: brand.css's
   .cr-brand-box is `width: max-content`, so a 10-letter row makes
   the box wider than "Circloud". Without the override below,
   "Circloud" stays text-aligned to start (left) inside that wider
   box, which looks misaligned against the centered SPIDERMIND row.
   Centering both the brand-name and the surrounding box matches
   the centered visual the portal cards have when their suffix row
   is the longest one. ===== */
.market-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 12px;
  gap: 0;
}
/* Match the Nest hero's brand block. Nest uses pure
   `data-size="lg"` and lets brand.js auto-size the logo to match
   the brand-box width — the logo, "Circloud" wordmark and the
   sub-row all share the same horizontal extent.

   Nest gets away with this because "NEST" (4 letters) is narrower
   than "Circloud" at 3rem, so the box is sized by the wordmark.
   For SPIDERMIND (10 letters) at 2rem we cap the sub-row to the
   wordmark's natural width via `max-width: max-content` on the
   box and a tiny letter-spacing on the sub. That keeps the box
   sized by the wordmark (not the stretched sub-row), and brand.js
   then auto-sizes the logo to the wordmark width — every row
   shares the same horizontal extent like Nest. */
.market-hero .cr-brand[data-size="lg"] {
  padding: 8px 0 0;
}
.market-hero .cr-brand[data-size="lg"] .cr-brand-logo {
  margin: 0 auto 0.3em;
}
/* SPIDERMIND has 10 letters vs Nest's 4-letter "NEST". At the lg
   default of 2rem the sub-row is ~220px wide, wider than "Circloud"
   at 3rem (~200px), which makes the box (and brand.js-sized logo)
   stretch wider than the wordmark. Shrinking the sub to 1.5rem
   drops it to ~140px intrinsic — narrower than the wordmark — so
   the box sizes to "Circloud", the logo lands at "Circloud" width,
   and `justify-content: space-between` stretches the 10 letters to
   fill that same width. Identical mechanic to Nest, just with the
   font tuned for a longer brand name. */
.market-hero .cr-brand[data-size="lg"] .cr-brand-sub {
  font-size: 1.5rem;
}
.market-hero .cr-brand[data-size="lg"] .cr-brand-slogan {
  letter-spacing: 1.5px;
  margin-top: 0.45em;
  color: #6d7696;
  animation: market-hero-slogan-fade-in 1s ease-out 0.3s both;
}
.market-hero .glow-line {
  width: 80px;
  height: 2px;
  margin: 16px auto 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #5ecbff, #6b5cff, transparent);
  animation: market-hero-line-grow 1.4s ease-out 0.6s both;
}
@keyframes market-hero-slogan-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes market-hero-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 80px; opacity: 1; }
}

/* ===== Business Case Section =====
   `.market-top` already wraps this block with 14px of vertical
   padding (matching `.market-hero` above), so the inner block adds
   no extra top padding — that keeps the gap above "Start Your
   String Art Business" identical to the gap above the brand block. */
.market-business {
  text-align: center;
  padding: 0 10px 6px;
}

/* Heading uses the header `.ch-page-tag` typography (Segoe UI 13px /
   weight 500 / soft-blue tint) so the section title reads as a
   sibling of the page tag. */
.market-biz-heading {
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(167, 176, 209, 0.85);
  margin-bottom: 10px;
}

.market-biz-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  /* Never wrap above the mobile breakpoint — children must stay on
     one row regardless of viewport width. The mobile @media block
     overrides this to a 2-col grid. */
  flex-wrap: nowrap;
  min-width: 0;
}
.market-biz-flow > * { min-width: 0; }

/* Step 2 + arrow + step 3 grouped so they always wrap together as a
   single unit, never individually. */
.market-biz-tail {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

/* HOW TO BUILD step boxes — same circloud-portal .card style, purple-tinted. */
.market-biz-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 130px;
  border-radius: 16px;
  border: var(--sm-card-border);
  background: linear-gradient(160deg,
    rgba(18, 24, 52, 0.95) 0%,
    rgba(12, 18, 38, 0.85) 50%,
    rgba(20, 30, 60, 0.90) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.market-biz-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-biz-step > * { position: relative; z-index: 1; }

.market-biz-step:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.market-biz-step--highlight {
  border-color: rgba(167, 139, 250, 0.32);
}

.market-biz-svg {
  width: 64px;
  height: 64px;
}

.market-biz-etsy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  height: 64px;
  justify-content: center;
}

.market-biz-etsy-logo {
  width: 52px;
  height: auto;
}

.market-biz-etsy-price {
  font-size: 0.75rem;
  font-weight: 700;
  color: #4ade80;
  font-family: var(--ui-font-family);
}

.market-biz-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  color: var(--market-accent);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--ui-font-family);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step labels match the header `.ch-link` typography so the choice
   tiles read as the same family of buttons as the top nav. */
.market-biz-label {
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(167, 176, 209, 0.85);
}

.market-biz-detail {
  font-size: 0.72rem;
  color: var(--market-muted);
}

.market-biz-detail strong {
  color: var(--market-accent);
  font-weight: 700;
}

.market-biz-roi {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--market-muted);
  font-style: italic;
}

.market-biz-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  /* Slimmer base padding (12 14 instead of 16 20) so the tile is
     narrow enough that "Choice + arrow + Step 2 + arrow + Step 3"
     fits on a single row at every viewport above the mobile
     breakpoint, including small laptops at ~1024-1100px where the
     row used to wrap. */
  padding: 12px 14px;
  flex-shrink: 1;
  min-width: 0;
  border-radius: 18px;
  border: var(--sm-card-border);
  background: linear-gradient(160deg,
    rgba(18, 24, 52, 0.95) 0%,
    rgba(12, 18, 38, 0.85) 50%,
    rgba(20, 30, 60, 0.90) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.market-biz-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-biz-choice > * { position: relative; z-index: 1; }

.market-biz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px 8px;
  min-width: 0;
  flex-shrink: 1;
  border-radius: 14px;
  transition: background 0.2s ease;
}

.market-biz-option:hover {
  background: rgba(56, 189, 248, 0.06);
}

.market-biz-or {
  font-family: var(--ui-font-family);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--market-muted);
  letter-spacing: 0.1em;
  padding: 0 10px;
  flex-shrink: 0;
}

.market-biz-svg--studio {
  width: 110px;
  height: 70px;
}

.market-biz-arrow {
  padding: 0 6px;
  display: flex;
  align-items: center;
}

.market-biz-arrow svg {
  width: 36px;
  height: 18px;
}

/* ===== Connector ===== */
.market-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 0;
}

/* Build-box outer wrapper — purple glass surface (the same single-source
   var as the rest of the market panels). The step boxes inside also use
   purple now; both layers read as the brand colour. */
.market-build-box {
  position: relative;
  padding: 14px 16px 16px;
  border-radius: 18px;
  border: var(--sm-card-border);
  background: var(--sm-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sm-card-shadow);
  overflow: hidden;
}
.market-build-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-build-box > * { position: relative; z-index: 1; }

/* Match the "Start Your String Art Business" heading exactly so
   both top-level section titles read as siblings (same Segoe UI 13px,
   same weight, same soft-blue tint, same lowercase styling). */
.market-build-box-title {
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(167, 176, 209, 0.85);
  text-transform: none;
  text-align: center;
  margin-bottom: 10px;
}

.market-connector-svg {
  width: 28px;
  height: 40px;
}

.market-connector-label {
  font-family: var(--ui-font-family);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--market-accent);
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.02);
}

/* ===== Build Steps ===== */
.market-build-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 8px;
}

/* Build-step boxes — purple glass surface (swapped from cobalt).
   Now they take the section's purple color while the surrounding
   .market-build-box container wears the dark-blue. */
.market-build-step {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 12px;
  border-radius: 16px;
  border: var(--sm-card-border);
  background: var(--sm-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sm-card-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.market-build-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-build-step > * { position: relative; z-index: 1; }

.market-build-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--sm-card-shadow-hover);
}

.market-build-step--final {
  border-color: rgba(167, 139, 250, 0.32);
}

.market-build-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  color: var(--market-accent);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--ui-font-family);
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-build-step--final .market-build-num {
  background: rgba(56, 189, 248, 0.2);
  color: var(--market-accent);
  font-size: 0.78rem;
}

.market-build-svg {
  width: 100%;
  max-height: 140px;
  height: auto;
}

.market-build-title {
  font-family: var(--ui-font-family);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  color: var(--market-ink);
  letter-spacing: 0.02em;
}

.market-build-desc {
  font-size: 0.7rem;
  color: var(--market-muted);
  text-align: center;
  line-height: 1.45;
  max-width: 280px;
}

.market-build-arrow {
  display: none;
}

.market-build-arrow svg {
  width: 20px;
  height: 16px;
}

/* ===== String Drawing Animation (preserved) ===== */
.string-anim {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawString 10s ease infinite;
}

.string-anim.sa-d1  { animation-delay: 0.15s; }
.string-anim.sa-d2  { animation-delay: 0.3s;  }
.string-anim.sa-d3  { animation-delay: 0.45s; }
.string-anim.sa-d4  { animation-delay: 0.6s;  }
.string-anim.sa-d5  { animation-delay: 0.75s; }
.string-anim.sa-d6  { animation-delay: 0.9s;  }
.string-anim.sa-d7  { animation-delay: 1.05s; }
.string-anim.sa-d8  { animation-delay: 1.2s;  }
.string-anim.sa-d9  { animation-delay: 1.35s; }
.string-anim.sa-d10 { animation-delay: 1.5s;  }
.string-anim.sa-d11 { animation-delay: 1.65s; }
.string-anim.sa-d12 { animation-delay: 1.8s;  }
.string-anim.sa-d13 { animation-delay: 1.95s; }
.string-anim.sa-d14 { animation-delay: 2.1s;  }
.string-anim.sa-d15 { animation-delay: 2.25s; }
.string-anim.sa-d16 { animation-delay: 2.4s;  }
.string-anim.sa-d17 { animation-delay: 2.55s; }

@keyframes drawString {
  0%   { stroke-dashoffset: 200; }
  20%  { stroke-dashoffset: 0; }
  65%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 200; }
}

.market-top::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  right: -140px;
  top: -120px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.06), rgba(56, 189, 248, 0));
  pointer-events: none;
}

.market-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.24;
  pointer-events: none;
  mask-image: linear-gradient(110deg, rgba(0, 0, 0, 0.8), transparent 78%);
}

/* ===== Section ===== */
/* Same vocabulary as circloud-portal .card, retinted to purple. Subtle —
   no bright outline, no specular streaks. */
.market-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 24px;
  border-radius: 18px;
  background: var(--sm-card-bg);
  border: var(--sm-card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.market-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--sm-card-wash);
  pointer-events: none;
}
.market-section > * { position: relative; z-index: 1; }

.market-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.market-section-head h2 {
  margin: 0;
  font-family: var(--ui-font-family);
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--market-ink);
}

.market-section-head p {
  margin: 0;
  color: var(--market-muted);
  font-size: 0.83rem;
}

.market-section-desc {
  width: 100%;
}

.market-studio-link {
  color: var(--market-accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.market-studio-link:hover {
  text-decoration: underline;
}

.market-section-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

/* ===== Grid ===== */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* ===== Board cards — same purple glass surface as the rest ===== */
.market-card {
  position: relative;
  background: var(--sm-card-bg);
  border: var(--sm-card-border);
  border-radius: 20px;
  box-shadow: var(--sm-card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
  animation: marketCardIn 0.45s ease both;
}
.market-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--sm-card-wash);
  pointer-events: none;
  z-index: 0;
}
.market-card > * { position: relative; z-index: 1; }

.market-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: var(--sm-card-shadow-hover);
}

.market-card:nth-child(2n) {
  animation-delay: 0.04s;
}

.market-card:nth-child(3n) {
  animation-delay: 0.07s;
}

.market-card:nth-child(4n) {
  animation-delay: 0.1s;
}

/* ===== Thumbnail (deep purple to match the card surface) ===== */
.market-thumb {
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 188px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.16);
  background:
    radial-gradient(circle at 18% 14%, rgba(192, 38, 211, 0.12), transparent 38%),
    radial-gradient(circle at 86% 10%, rgba(167, 139, 250, 0.10), transparent 36%),
    linear-gradient(148deg, rgba(20, 10, 40, 0.85) 0%, rgba(14, 8, 28, 0.92) 100%);
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--market-muted);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.market-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.4;
  pointer-events: none;
}

.market-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 12px;
  box-sizing: border-box;
}

.market-thumb-overlay {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.market-thumb:hover .market-thumb-overlay,
.market-thumb:focus-within .market-thumb-overlay {
  opacity: 1;
}

.market-thumb-nav {
  width: 34px;
  height: 34px;
  border: 1px solid var(--market-border-strong);
  background: rgba(20, 25, 38, 0.88);
  color: rgba(226, 232, 240, 0.85);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.market-thumb-nav:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(30, 35, 50, 0.95);
  transform: translateY(-50%) scale(1.04);
}

.market-thumb-prev {
  left: 10px;
}

.market-thumb-next {
  right: 10px;
}

.market-thumb-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 11px;
  border: 1px solid var(--market-border-strong);
  background: rgba(16, 20, 34, 0.88);
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.57rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

.market-thumb.is-empty .market-thumb-overlay {
  display: none;
}

/* ===== Card Body ===== */
.market-card-body {
  padding: 9px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.market-card-title {
  font-family: var(--ui-font-family);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--market-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.market-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--market-muted);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Purchased ribbon — pinned to the card's top-right corner. */
.market-card-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 0.55rem;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* ===== Badge ===== */
.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.05));
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--market-accent);
  letter-spacing: 0.11em;
  font-weight: 700;
}

.market-badge-icon {
  width: 10px;
  height: 10px;
  display: inline-flex;
  color: var(--market-highlight);
}

.market-badge-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Offers ===== */
.market-offers {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
}

.market-offer {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--market-border);
  border-radius: 13px;
  background: rgba(20, 25, 40, 0.6);
}

.offer-format {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.8);
  font-weight: 800;
}

.offer-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.offer-usd {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--market-ink);
}

.offer-crypto {
  font-size: 0.66rem;
  color: var(--market-muted);
  letter-spacing: 0.03em;
}

/* ===== Buy Button ===== */
.market-buy {
  height: 24px;
  padding: 0 11px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.06));
  color: var(--market-accent);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border-radius: 9px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.market-buy:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.12));
}

.market-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== Empty State ===== */
.market-empty {
  grid-column: 1 / -1;
  padding: 28px 14px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  color: var(--market-muted);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  background: rgba(20, 25, 40, 0.5);
}

/* ===== Footer (Nest-styled, fixed at bottom of viewport) ===== */
.market-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  padding: 0 16px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0;
  color: #94a3b8;
  border-top: 1px solid rgba(139, 156, 255, 0.10);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.market-footer-link {
  color: #7dd3fc;
  text-decoration: none;
}
.market-footer-link:hover {
  text-decoration: underline;
}

/* ===== Keyframes (preserved) ===== */
@keyframes marketCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1080px) {
  /* Search no longer takes the full row — it shares the line with
     Sort. Search 40% / Sort 60% so the dropdown has room to show
     the longer option labels ("Price: High to Low") without
     truncating, while the search input stays usable for short
     queries. */
  .market-section-tools {
    flex-wrap: nowrap;
  }
  .market-search {
    flex: 0 1 40%;
    max-width: 40%;
    min-width: 120px;
  }
  .market-sort {
    flex: 1 1 60%;
    min-width: 0;
  }
  .market-sort select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .market-main {
    padding-top: 16px;
  }

  .market-top {
    padding: 22px;
  }

  .market-biz-flow {
    gap: 6px;
    /* Stay on one row even at tablet sizes — the base rule already
       sets nowrap; we just keep `justify-content: center` here so
       the row stays centred when content is narrower than viewport. */
    justify-content: center;
  }

  .market-biz-step {
    min-width: 0;
    padding: 8px 10px;
  }

  .market-biz-svg {
    width: 52px;
    height: 52px;
  }

  /* Tablet: further compact the choice tile beyond the base shrink
     so the full row (Choice + arrow + Step 2 + arrow + Step 3) keeps
     fitting without overflow. */
  .market-biz-choice {
    padding: 10px 10px;
    gap: 0;
  }
  .market-biz-option {
    padding: 4px 6px;
  }
  .market-biz-option .market-biz-svg {
    width: 44px;
    height: 44px;
  }
  .market-biz-svg--studio {
    width: 84px;
    height: 54px;
  }
  .market-biz-or {
    padding: 0 6px;
    font-size: 0.65rem;
  }
  .market-biz-choice .market-biz-label {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
  }
  .market-biz-choice .market-biz-detail {
    font-size: 0.6rem;
    text-align: center;
  }
  .market-biz-step .market-biz-label {
    font-size: 11px;
    line-height: 1.2;
  }
  .market-biz-step .market-biz-detail {
    font-size: 0.62rem;
  }
  .market-biz-arrow {
    padding: 0 2px;
  }
  .market-biz-arrow svg {
    width: 24px;
    height: 14px;
  }
}

@media (max-width: 680px) {
  .app-header {
    padding: 1px 8px;
  }
  .header-nav {
    gap: 6px;
  }
  .nav-link {
    padding: 0.5rem 0.55rem;
  }
  .nav-link .nav-icon-svg { width: 22px; height: 22px; }
  .nav-link span:not(.cart-count-badge) { display: none; }

  .market-sort {
    width: 100%;
  }

  .market-sort select {
    min-width: 0;
  }

  .market-main {
    padding: 14px 10px 44px;
    gap: 14px;
  }

  .market-top {
    border-radius: 20px;
    padding: 18px;
  }

  .market-grid {
    grid-template-columns: 1fr;
  }

  .market-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .market-biz-flow {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Let the .market-biz-tail wrapper "disappear" from layout on
     mobile so step 2 and step 3 each take a grid column. */
  .market-biz-tail {
    display: contents !important;
  }

  .market-biz-arrow {
    display: none;
  }

  .market-biz-step {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 10px 12px;
  }

  .market-biz-step .market-biz-svg {
    width: 100%;
    height: auto;
    max-height: 90px;
  }

  .market-biz-choice {
    grid-column: 1 / -1;
    flex-direction: row;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  .market-biz-or {
    padding: 0 8px;
  }

  .market-biz-svg--studio {
    width: 100px;
    height: 64px;
  }

  .market-build-steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .market-build-step {
    width: auto;
  }

  .market-build-box {
    padding: 8px 6px 10px;
  }

  .market-connector-label {
    font-size: 0.6rem;
    padding: 4px 10px;
  }
}

@media (max-width: 560px) {
  .market-offer {
    grid-template-columns: 50px 1fr auto;
    gap: 4px;
    padding: 6px;
  }

  .market-card {
    border-radius: 14px;
  }

  .market-card-body {
    padding: 10px;
  }

  .market-buy {
    padding: 0 8px;
    font-size: 0.58rem;
  }

  .market-thumb {
    aspect-ratio: 4 / 3;
  }

}

@media (prefers-reduced-motion: reduce) {
  .market-card,
  .market-open-editor,
  .market-thumb-overlay,
  .market-thumb-nav,
  .market-buy {
    animation: none;
    transition: none;
  }

  .string-anim {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ===== Login Overlay (dark themed) =====
   `position: fixed !important` is required because public-pages.css
   sets `body.public-page > * { position: relative }` with higher
   specificity than `.market-login-overlay`. Without !important the
   modal would render in normal flow at the bottom of the page
   instead of hovering centered over the viewport.

   We also pin top/left/right/bottom explicitly (in addition to
   `inset: 0`) and elevate z-index above the canvas + side panels so
   the modal can't be visually buried even if a parent scroll
   container clips it. */
body.public-page.market-page .market-login-overlay,
.market-login-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Body reserves 52px top for the fixed header and 32px bottom for
     the fixed footer. Mirror that here so the card centers within
     the *visible content area*, not the raw viewport — otherwise it
     sits ~26px above visual center because the header overlaps the
     top of the overlay. The dim background still covers the whole
     viewport (padding inflates the flex box without affecting the
     overlay's outer rect). */
  padding-top: 52px;
  padding-bottom: 32px;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.public-page.market-page .market-login-overlay[hidden],
.market-login-overlay[hidden] {
  display: none !important;
}

.market-login-card {
  position: relative;
  width: 90%;
  max-width: 380px;
  padding: 36px 32px 32px;
  border-radius: 22px;
  background: rgba(20, 25, 40, 0.96);
  border: 1px solid var(--market-border-strong);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.market-login-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--market-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.market-login-close:hover {
  background: rgba(148, 163, 184, 0.1);
}

.market-login-logo {
  width: 56px;
  height: auto;
  border-radius: 14px;
  object-fit: contain;
}

.market-login-title {
  font-family: var(--ui-font-family);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--market-ink);
}

.market-login-subtitle {
  font-size: 0.82rem;
  color: var(--market-muted);
  margin-bottom: 8px;
}

.market-login-google {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--market-accent);
  background: var(--market-accent);
  color: #fff;
  font-family: var(--ui-font-family);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.market-login-google:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
}

.market-login-google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===== Payment Modal (dark themed) ===== */
.payment-modal-overlay {
  position: fixed;
  inset: 0;
  /* Above everything else — cart/purchases panels sit at z-index 200 inside
     .market-shell (which has its own stacking context via z-index:1).
     Use a far-above value so iOS Safari can't reorder it. */
  z-index: 2147483600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 5vh 12px;
  -webkit-overflow-scrolling: touch;
}

/* Lock background scroll while the payment modal is mounted */
body.is-payment-modal-open {
  overflow: hidden !important;
}

.payment-modal {
  position: relative;
  background: rgba(20, 25, 40, 0.97);
  border: 1px solid var(--market-border-strong);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  width: min(420px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: var(--market-ink);
  margin: auto 0;
}
.payment-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--market-muted);
  line-height: 1;
}
.payment-modal-close:hover { color: var(--market-ink); }
.payment-modal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.payment-modal-header h3 {
  margin: 0 0 0.4rem;
  font-family: var(--ui-font-family);
  font-size: 1.25rem;
  color: var(--market-ink);
}
.payment-modal-item {
  margin: 0;
  font-size: 0.9rem;
  color: var(--market-muted);
}
.payment-modal-amount {
  margin: 0.3rem 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--market-accent);
}
.payment-card-container {
  min-height: 90px;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  overflow: visible;
}
.payment-card-container iframe {
  width: 100% !important;
  min-height: 80px;
  display: block !important;
}
@media (max-width: 480px) {
  .payment-modal {
    padding: 1.2rem 1rem;
  }
  .payment-modal-header {
    margin-bottom: 1rem;
  }
}
.payment-error {
  background: rgba(185, 28, 28, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.payment-submit {
  display: block;
  width: 100%;
  padding: 0.85rem;
  background: var(--market-accent);
  color: #fff;
  font-family: var(--ui-font-family);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.payment-submit:hover { opacity: 0.9; }
.payment-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.payment-submit.is-success {
  background: #16a34a;
}
.payment-secure-note {
  text-align: center;
  margin: 0.8rem 0 0;
  font-size: 0.75rem;
  color: var(--market-muted);
}

/* ── Layout ────────────────────────────────────────────────────
   Side cards are position:fixed to the viewport (see below), so
   they're no longer in the grid flow. The layout is just the
   centered main column with horizontal padding equal to the side
   card width + gap, so cards never overlap main content. */
.market-layout {
  display: flex;
  justify-content: center;
  width: 100%;
  /* Reserve 280px (card) + 6px (gap) + 6px (edge) on each side
     so .market-main never sits underneath a fixed side card. */
  padding: 0 292px;
  box-sizing: border-box;
}

.market-side-card {
  width: 280px;
  /* Locked to the viewport — never moves while scrolling. Sized by
     its content with a sensible cap so it never grows beyond the
     space between the fixed header and footer. */
  position: fixed;
  top: 62px;
  max-height: calc(100vh - 102px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(30, 35, 50, 0.95), rgba(22, 27, 40, 0.92));
  border: 1px solid var(--market-border);
  border-radius: 20px;
  box-shadow: 0 14px 36px var(--market-shadow);
  overflow: hidden;
  z-index: 50;
}
.market-side-card[hidden] { display: none !important; }
/* Cart sits just LEFT of the central column, with a 12px gap.
   `.market-main` has max-width 1100px and is centered, so its left
   edge is at `50% - 550px`. Cart width is 280px, gap 12px → cart's
   left edge sits at `50% - 550 - 12 - 280 = 50% - 842px`. The max()
   pins it to a 6px viewport edge on narrower viewports where the
   calc would overflow off-screen. */
.market-side-left {
  left: max(6px, calc(50% - 842px));
}
/* Purchases sits just RIGHT of the central column with the same
   12px gap, mirrored. */
.market-side-right {
  right: max(6px, calc(50% - 842px));
}
.market-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.market-side-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.market-side-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.market-side-close:hover { color: #f8fafc; }
.market-side-body {
  overflow-y: auto;
  padding: 8px 14px;
  flex: 1;
}
.market-side-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.cart-total-label {
  font-size: 0.7rem;
  color: #94a3b8;
}
.cart-total-label strong { color: #e2e8f0; }
.cart-pay-btn {
  padding: 5px 16px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(140deg, rgba(6, 182, 212, 0.5), rgba(14, 165, 233, 0.4));
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-pay-btn:hover:not(:disabled) {
  background: linear-gradient(140deg, rgba(6, 182, 212, 0.7), rgba(14, 165, 233, 0.6));
}
.cart-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cart items */
.market-side-icon {
  width: 10px;
  height: 10px;
  vertical-align: -1px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-thumb {
  width: 28px;
  height: 22px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.cart-item-name {
  flex: 1;
  font-size: 0.68rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-price {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  flex-shrink: 0;
}
.cart-item-remove {
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.cart-item-remove:hover { color: #ef4444; }

/* Purchase items */
.purchases-loading,
.purchases-empty {
  text-align: center;
  padding: 24px 0;
  color: #64748b;
  font-size: 0.72rem;
}
.purchases-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.purchases-card:last-child { border-bottom: none; }
.purchases-card-thumb {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.6);
  overflow: hidden;
  flex-shrink: 0;
}
.purchases-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.purchases-card-info {
  flex: 1;
  min-width: 0;
}
.purchases-card-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.purchases-card-date {
  font-size: 0.58rem;
  color: #64748b;
  margin-top: 1px;
}
.purchases-card-ref {
  font-size: 0.52rem;
  color: #475569;
  margin-top: 1px;
  font-family: monospace;
}
.purchases-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.purchases-dl-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2e8f0;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.purchases-dl-btn:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.45);
  color: #fff;
}

/* Buy + Cart button group */
.market-buy-group {
  display: flex;
}
.market-buy-group .market-buy:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.market-buy-group .market-buy-cart {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 7px;
  font-size: 0.72rem;
  min-width: 0;
}
.market-buy-group .market-buy-cart.is-in-cart {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.06));
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Purchased badge */
.market-badge.is-purchased {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.06));
  color: #4ade80;
}

/* ── Mobile: layout overrides (must come after .market-layout base rule) ── */
@media (max-width: 1080px) {
  .market-layout {
    display: flex !important;
    flex-direction: column;
    padding: 0;
  }
  .market-main {
    max-width: 100% !important;
    padding: 6px 12px 56px;
    order: 99;
  }

  /* Mobile: fixed below header, same width as store cards */
  .market-side-card {
    position: fixed !important;
    top: 56px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 600px !important;
    margin: 0 !important;
    border-radius: 14px;
    z-index: 200;
    max-height: 70vh;
    box-sizing: border-box;
    grid-column: auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
  .market-side-card[hidden] { display: none !important; }

  /* Purchases at top, cart positioned by JS below it */
  .market-side-right { top: 56px; }
  .market-side-left { /* top set by JS */ }

  /* Purchases body scrollable on mobile */
  .market-side-right .market-side-body {
    max-height: none;
    overflow-y: auto;
  }
  .market-side-show-more {
    display: block;
    width: 100%;
    padding: 6px;
    background: rgba(56, 189, 248, 0.08);
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    color: #38bdf8;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .market-side-show-more:hover { background: rgba(56, 189, 248, 0.15); }
}

/* Hide show-more on desktop */
.market-side-show-more { display: none; }

/* Cart count badge — round red dot below the icon */
#openCartBtn { position: relative; }
.cart-count-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(12, 15, 34, 0.86);
}

/* ===== Build Step Animations ===== */

/* Step 1: Printer output page slides out of slot */
.printer-output-page {
  animation: printerSlideDown 3s ease-in-out infinite;
}

@keyframes printerSlideDown {
  0% { transform: translateY(-62px); }
  20% { transform: translateY(-62px); }
  60% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Step 6: two zigzag-edged paper sheets being slowly lifted away. Single
   long ease curve, no mid-stops. The pieces fade to invisible during the
   tail of the loop and silently snap back to their start position while
   invisible, so the visible motion is one continuous slow lift-and-fade. */
.paper-zig-1,
.paper-zig-2 {
  animation: paperLiftSlow 8s ease-in-out infinite;
}

.paper-zig-1 { animation-delay: 0s; }
.paper-zig-2 { animation-delay: 1.5s; }

@keyframes paperLiftSlow {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  60%  { transform: translate(38px, -64px) rotate(-12deg); opacity: 0; }
  90%  { transform: translate(38px, -64px) rotate(-12deg); opacity: 0; }
  92%  { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}