/* pages/category.css — @layer pages (Quiet Neutral, redesign spec §2.4/§3.2).
   Shared by `category_detail.html` (realm landing pages + subcategory pages),
   `product_list.html` (the full index / search-by-query / filtered PLP —
   always day scope, mixes both realms), `search.html`, and `categories.html`
   (a plain category index). Layout only: breadcrumb, page header (realm
   eyebrow + title + count/sort), the category pillnav, filters/facets, the
   product grid, pagination, and the vertical rhythm around the shared
   `.empty` state. Components (.card, .pmedia, .price, .btn, .pillnav/.pill,
   .chip, .field, .empty, .notice, .ledger-index/.leader) live in
   components.css and are consumed here by class only — flat, hairline-
   bordered, no shadows, no gradients, no hover-lift, no engraved-plate
   framing anywhere on this surface. */

@layer pages {

  /* ── Breadcrumb — its own horizontally-scrollable strip on small screens ── */
  .listing__crumbs {
    margin: 0 0 var(--s5);
    font: 500 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;
  }
  .listing__crumbs a { color: var(--on-surface-muted); }
  .listing__crumbs a:hover { color: var(--on-surface); }
  .listing__crumbs-sep { margin: 0 var(--s2); opacity: 0.6; }

  /* ── Page head: realm eyebrow + H1 + toolbar (count · sort). The eyebrow
     reads --realm-deep, which resolves to --sage-deep/--violet-deep on a
     realm-scoped <main> (category_detail's Wellness/Arcana pages) and
     quietly falls back to ink everywhere else (product_list/search/
     categories carry no [data-realm]) — one class, no per-page variant. ── */
  .listing__eyebrow {
    margin: 0 0 var(--s3);
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--realm-deep);
  }
  .listing__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
  }
  .listing__title {
    /* Weight/family/size/leading come from the base h1 rule (base.css —
       Jakarta 700, --t-h1, -0.02em letter-spacing): no local override, so
       every listing heading matches the PDP/home heading voice exactly. */
    margin: 0;
  }
  .listing__toolbar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    font: 500 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-muted);
  }
  .listing__count { white-space: nowrap; }
  .listing__sort { display: flex; align-items: center; }
  .listing__sort .field { gap: 2px; }
  .listing__sort .field__input,
  .listing__sort select { min-height: 36px; padding: 0 var(--s3); }

  .listing__lede {
    margin: 0 0 var(--s6);
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
    max-width: 68ch;
  }

  /* ── Category pillnav — category_detail's subcategory quick-nav and
     product_list's realm shortcut both reuse the shared .pillnav/.pill
     skin (components.css); this is page rhythm only. ── */
  .listing__pillnav { margin: 0 0 var(--s6); }

  /* ── Active-filter chips (product_list.html). Declared in full rather than
     patched: components.css's base .chip borders in --realm-accent (a
     per-product realm cue), but these are generic "remove this filter"
     chips with no realm of their own, so an explicit --line hairline is
     given here instead. ── */
  .listing__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
  .listing__chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-raised);
    color: var(--on-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 6px 12px;
    font: 500 var(--t-micro)/1 var(--font-text);
    text-transform: none;
    letter-spacing: normal;
  }
  .listing__chips .chip:hover { border-color: var(--ink-muted); }
  .listing__chips .chip--clear { border-style: dashed; color: var(--danger); border-color: var(--danger); }

  /* ── Filter form: search field + category/author/sort selects. Inputs are
     unstyled here on purpose — the bare-control reset in components.css
     already renders every input/select as a quiet --r-sm box on
     --surface-raised with a --line border; this block is layout only. ── */
  .listing__filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin: 0 0 var(--s5); }
  .listing__filters .field { min-width: 160px; }
  .listing__filters .field--grow { flex: 1 1 260px; }

  /* ── Attribute facet panel ── */
  .listing__facets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    padding: var(--s4) var(--s5);
    margin: 0 0 var(--s5);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    background: var(--surface-raised);
  }
  .listing__facet { min-width: 180px; }
  .listing__facet summary {
    cursor: pointer;
    font: 500 var(--t-label)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface);
  }
  .listing__facet-values { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
  .listing__facet-values label {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font: 400 var(--t-body)/1.3 var(--font-form);
    color: var(--on-surface);
    cursor: pointer;
  }
  /* Colour-attribute swatch — the actual colour is set inline as
     background-color (a real per-value hex from the database), not routed
     through a CSS custom property, so this file never carries a var() that
     can only be resolved at runtime by an inline style. */
  .listing__swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-block;
  }

  /* ── The product grid — grows column count via auto-fill instead of
     stretching card width, the same recipe as home's .pgrid. Cards carry
     their own hairline border + radius (components.css .card), so this is
     gap-only — no container hairline seam / butted-tile treatment. ── */
  .listing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s5);
    margin: 0 0 var(--s6);
  }

  /* ── Pagination ── */
  .listing__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--hairline);
  }
  .listing__pagination [aria-disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .listing__page-note {
    padding: 0 var(--s3);
    font: 500 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-muted);
  }

  /* ── 720px: toolbar/head stack; the grid stays 2-up per §3 (no further
     collapse to 1-up — 2-up holds down to the smallest supported leaf). ── */
  @media (max-width: 720px) {
    .listing__head { align-items: flex-start; }
  }

}