/* Wallco Marketplace shared style — Apple-glass aesthetic, neutral, designer-celebratory */
:root {
  --mp-bg: #faf8f4;
  --mp-fg: #111;
  --mp-muted: #6b6b6b;
  --mp-border: rgba(20,20,20,.08);
  --mp-card: rgba(255,255,255,.78);
  --mp-accent: #111;
  --mp-accent-bg: #111;
  --mp-accent-fg: #fff;
  --mp-glass-shadow: 0 6px 30px rgba(20,20,20,.06), 0 1px 0 rgba(255,255,255,.6) inset;
  --mp-pad: clamp(12px, 2vw, 28px);
  --mp-radius: 20px;
}
* { box-sizing: border-box; }
html, body { margin:0; background: var(--mp-bg); color: var(--mp-fg); font-family: ui-sans-serif, -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
/* Reserve space for the fixed top nav so page content never slides under it. */
body { padding-top: var(--mp-nav-h, 56px); }
a { color: inherit; text-decoration: none; }
a.under { text-decoration: underline; text-underline-offset: 4px; }

/* Top nav: pinned to viewport top on every marketplace page, never scrolls.
   `fixed` (not `sticky`) so transformed/overflow parents can't release the pin. */
.mp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--mp-pad);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(250,248,244,.82);
  border-bottom: 1px solid var(--mp-border);
}
.mp-nav .brand { font-weight: 700; letter-spacing: .02em; font-size: 17px; }
.mp-nav .links { display: flex; gap: 18px; font-size: 14px; color: var(--mp-muted); }
.mp-nav .links a:hover { color: #000; }
.mp-nav .menu-btn { display: none; }

.mp-hero {
  padding: clamp(48px, 7vw, 120px) var(--mp-pad);
  display: grid; gap: 18px; max-width: 1280px; margin: 0 auto;
}
.mp-hero h1 { font-size: clamp(36px, 5vw, 72px); margin: 0; letter-spacing: -.02em; line-height: 1.02; }
.mp-hero p.lede { font-size: clamp(16px, 1.4vw, 20px); max-width: 720px; color: var(--mp-muted); line-height: 1.55; }
.mp-hero .cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px; }

.mp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mp-accent-bg); color: var(--mp-accent-fg);
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px;
  border: 0; cursor: pointer; transition: transform .15s ease, opacity .15s ease;
}
.mp-btn:hover { transform: translateY(-1px); }
.mp-btn.ghost { background: transparent; color: var(--mp-fg); border: 1px solid var(--mp-border); }
.mp-btn.tiny { padding: 6px 12px; font-size: 12px; }

.mp-wrap { max-width: 1280px; margin: 0 auto; padding: var(--mp-pad); }

.mp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mp-grid.lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mp-grid.xl { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.mp-card {
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-glass-shadow);
  overflow: hidden;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(20,20,20,.1); }
.mp-card .img {
  aspect-ratio: 1/1; background: #eee; background-size: cover; background-position: center;
}
.mp-card .body { padding: 14px 16px; display:flex; flex-direction:column; gap: 6px; }
.mp-card .title { font-weight: 600; font-size: 15px; }
.mp-card .sub { font-size: 13px; color: var(--mp-muted); }
.mp-card .row { display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-top: 6px; }

.mp-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(20,20,20,.06); font-size: 11px; color: #2a2a2a; }
.mp-pill.accent { background: #111; color: #fff; }
.mp-pill.gold { background: linear-gradient(135deg,#cda86e,#f2dca5); color: #2c2110; }
.mp-pill.verified { background: #0a7; color: #fff; }

.mp-section { padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--mp-border); }
.mp-section h2 { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 18px; letter-spacing: -.01em; }
.mp-section .sub { color: var(--mp-muted); margin-bottom: 18px; }

.mp-stat { display:flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--mp-card); border: 1px solid var(--mp-border); border-radius: 16px; box-shadow: var(--mp-glass-shadow); }
.mp-stat .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-muted); }
.mp-stat .value { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.mp-stat.dim .value { color: var(--mp-muted); font-weight: 600; }

.mp-form { display:flex; flex-direction:column; gap: 14px; max-width: 560px; }
.mp-form label { display:flex; flex-direction:column; gap: 6px; font-size: 13px; color: #333; }
.mp-form input[type=text], .mp-form input[type=email], .mp-form input[type=url], .mp-form input[type=number], .mp-form textarea, .mp-form select {
  border: 1px solid var(--mp-border); padding: 10px 12px; border-radius: 12px; font-size: 14px; font-family: inherit; background: #fff;
}
.mp-form textarea { min-height: 100px; resize: vertical; }
.mp-form .row { display: flex; gap: 10px; }
.mp-form .row label { flex: 1; }
.mp-form .check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.mp-form .err { color: #c33; font-size: 13px; }
.mp-form .ok  { color: #060; font-size: 13px; }

.mp-claim-banner {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid var(--mp-border); border-radius: 22px; padding: 22px 24px; margin: 22px 0;
  box-shadow: var(--mp-glass-shadow); backdrop-filter: blur(14px);
}
.mp-claim-banner h3 { margin: 0 0 6px; font-size: 17px; }
.mp-claim-banner .small { color: var(--mp-muted); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }

.mp-footer { padding: 40px var(--mp-pad); text-align: center; color: var(--mp-muted); font-size: 13px; border-top: 1px solid var(--mp-border); margin-top: 60px; }

/* Hamburger (Gucci-style ≡ MENU) */
.mp-hamburger { display:none; }
@media (max-width: 720px) {
  .mp-nav .links { display:none; }
  .mp-nav .menu-btn { display: inline-flex; align-items:center; gap:6px; background: transparent; border: 0; cursor: pointer; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .mp-nav .menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .mp-nav .menu-btn .bars span { display:block; width: 18px; height: 1px; background: #111; }
}

/* Designer Profile / Storefront hero */
.mp-storefront-hero {
  padding: clamp(40px, 6vw, 90px) var(--mp-pad);
  display: grid; gap: 16px; grid-template-columns: minmax(180px, 220px) 1fr;
  align-items: center; max-width: 1280px; margin: 0 auto;
}
.mp-storefront-hero .avatar { width: 220px; height: 220px; border-radius: 22px; background: #ddd; background-size: cover; background-position: center; box-shadow: var(--mp-glass-shadow); }
.mp-storefront-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.01em; }
.mp-storefront-hero .studio { color: var(--mp-muted); font-size: 16px; }
.mp-storefront-hero .badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.mp-storefront-hero .meta { display: flex; gap: 14px; color: var(--mp-muted); font-size: 13px; }

/* Status board */
.mp-status-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mp-status-board { padding: 24px; background: var(--mp-card); border: 1px solid var(--mp-border); border-radius: 24px; box-shadow: var(--mp-glass-shadow); }

@media (max-width: 720px) {
  .mp-storefront-hero { grid-template-columns: 1fr; }
  .mp-storefront-hero .avatar { width: 140px; height: 140px; }
}