/* pages/vendor.css — @layer pages (Quiet Neutral). The maker/marketplace
   family: vendor_detail (a single maker's dossier + specimen grid), vendors
   (the makers directory), and marketplace_landing (the editorial doorway).
   Layout only — card, chip, leader, btn, empty come from components.css.
   One file serves all three vendor-family pages; each links exactly this.
   No shadows, no gradients, no hover-lift — card hover darkens the border
   only, matching the product card's own treatment. */

@layer pages {

  /* ── Breadcrumb — its own horizontally-scrollable strip on small screens ── */
  .crumbs {
    margin: 0 0 var(--s5);
    font: 600 var(--t-micro)/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-muted);
    overflow-x: auto;
    white-space: nowrap;
  }
  .crumbs a { color: var(--on-surface-muted); }
  .crumbs a:hover { color: var(--on-surface); }
  .crumbs__sep { margin: 0 var(--s2); opacity: 0.6; }

  /* ── Shared intro (vendors + marketplace): eyebrow + Jakarta 700 H1 + lede ── */
  .maker-intro { margin: 0 0 var(--s6); }
  .maker-intro__eyebrow {
    margin: 0 0 var(--s3);
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--on-surface-muted);
  }
  .maker-intro__title {
    margin: 0 0 var(--s4);
    max-width: 22ch;
  }
  /* The marketplace's own headline is longer copy, not bigger type — Quiet
     Neutral tops out at --t-h1 ("confident but not shouting"). */
  .maker-intro__title--xl { max-width: 30ch; }
  .maker-intro__lede {
    margin: 0;
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
    max-width: 64ch;
  }
  .maker-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
  .maker-actions--center { justify-content: center; }
  .maker-intro__lede--sub { margin: var(--s4) 0 var(--s5); max-width: 60ch; }

  /* ── vendor_detail: the maker dossier header ── */
  .maker-hero {
    display: flex;
    gap: var(--s6);
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 var(--s5);
  }
  .maker-hero__mono,
  .maker-hero__logo {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    background: var(--surface-well);
  }
  .maker-hero__logo { object-fit: contain; padding: var(--s3); background: var(--surface-raised); }
  .maker-hero__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 clamp(2.5rem, 6vw, 3.5rem)/1 var(--font-display);
    color: var(--on-surface);
  }
  .maker-hero__meta { flex: 1; min-width: 0; }
  .maker-hero__eyebrow {
    margin: 0 0 var(--s2);
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--on-surface-muted);
  }
  .maker-hero__title {
    margin: 0 0 var(--s3);
  }
  .maker-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    font: 500 var(--t-micro)/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-muted);
  }
  .maker-hero__stats strong { color: var(--on-surface); font-weight: 600; font-variant-numeric: tabular-nums; }
  .maker-lede {
    margin: 0 0 var(--s6);
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
    max-width: 65ch;
  }

  /* ── The specimen grid — plain gapped grid, same recipe as category.css's
     .listing__grid. A zero-gap hairline sheet would double-border against
     .card's own independent hairline + --r-card radius. ── */
  .maker-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
    margin: 0 0 var(--s6);
  }
  @media (min-width: 720px)  { .maker-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .maker-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ── Maker directory + featured grid (vendors + marketplace) ── */
  .maker-search { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin: 0 0 var(--s5); }
  .maker-search .field { flex: 1 1 260px; }
  .maker-search__note { margin: var(--s3) 0 0; font: 500 var(--t-micro)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface-muted); }

  .maker-dir {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s4);
    margin: 0 0 var(--s7);
  }
  .maker-card {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s5);
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    color: inherit;
    transition: border-color var(--dur) var(--ease);
  }
  .maker-card:hover { border-color: var(--on-surface-muted); }
  .maker-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .maker-card__head { display: flex; gap: var(--s3); align-items: center; }
  .maker-card__logo,
  .maker-card__mono {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
  }
  .maker-card__logo { object-fit: contain; padding: var(--s2); background: var(--surface); }
  .maker-card__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-well);
    font: 700 var(--t-h3)/1 var(--font-display);
    color: var(--on-surface);
  }
  .maker-card__name { margin: 0; font: 700 var(--t-lede)/1.2 var(--font-display); color: var(--on-surface); }
  .maker-card__count {
    margin: var(--s1) 0 0;
    font: 500 var(--t-micro)/1.3 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-muted);
    font-variant-numeric: tabular-nums;
  }
  .maker-card__desc { margin: 0; font: 400 var(--t-body)/1.55 var(--font-text); color: var(--on-surface-muted); }
  .maker-card__cta {
    margin: auto 0 0;
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--realm-deep);
  }
  /* Preview strip — a few of the maker's own specimens, via the shared
     .pmedia tile (_specimen_plate.html) rather than a hand-rolled cell. */
  .maker-card__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: auto; }
  .maker-card__strip .pmedia { border-radius: var(--r-sm); }

  /* ── marketplace: the three top-of-page counts ── */
  .mp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
    text-align: center;
    padding: var(--s6) 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin: 0 0 var(--s7);
  }
  .mp-stats__big { margin: 0 0 var(--s2); font: 700 var(--t-h1)/1 var(--font-display); letter-spacing: -0.02em; color: var(--on-surface); font-variant-numeric: tabular-nums; }
  .mp-stats__label { margin: 0; font: 600 var(--t-micro)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-surface-muted); }
  @media (max-width: 640px) { .mp-stats { grid-template-columns: 1fr; gap: var(--s6); } }

  /* ── marketplace: sell inset + numbered steps — flat neutral panel, same
     recipe as home's newsletter band. No realm wash: onboarding makers
     isn't wellness- or arcana-specific, so it stays on the neutral ground. ── */
  .mp-sell {
    margin: 0 0 var(--s7);
    background: var(--surface-well);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s7) var(--s6);
  }
  .mp-sell__steps { list-style: none; margin: var(--s4) 0; padding: 0; }
  .mp-sell__steps li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; font: 500 var(--t-lede)/1.3 var(--font-text); color: var(--on-surface); }
  .mp-sell__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--on-surface);
    color: var(--surface);
    font: 600 var(--t-label)/1 var(--font-mono);
  }

  /* ── marketplace: FAQ ledger (details/summary) ── */
  .mp-faq { max-width: 65ch; }
  .mp-faq__item { border-bottom: 1px solid var(--hairline); padding: var(--s4) 0; }
  .mp-faq__item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    font: 600 var(--t-lede)/1.3 var(--font-text);
    color: var(--on-surface);
  }
  .mp-faq__item summary::-webkit-details-marker { display: none; }
  .mp-faq__item summary::after { content: '+'; font: 400 var(--t-h3)/1 var(--font-mono); color: var(--on-surface-muted); }
  .mp-faq__item[open] summary::after { content: '\2212'; }
  .mp-faq__item p { margin: var(--s3) 0 0; font: 400 var(--t-body)/1.6 var(--font-text); color: var(--on-surface-muted); }

  /* ── Affiliate CTA foot (vendors + marketplace) ── */
  .maker-cta { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--hairline); max-width: 60ch; }
  .maker-cta__eyebrow { margin: 0 0 var(--s2); font: 600 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em; color: var(--on-surface-muted); }
  .maker-cta p { margin: 0 0 var(--s4); font: 400 var(--t-lede)/1.5 var(--font-text); color: var(--on-surface); }

  @media (max-width: 560px) {
    .maker-hero { gap: var(--s4); }
    .maker-hero__mono, .maker-hero__logo { width: 88px; height: 88px; }
  }

}