/**
 * Velonix Labs — Research Catalogue (page-specific)
 * Enqueued ONLY on the shop/product-archive template (see inc/enqueue.php).
 * Breadcrumb, page-intro, index-list, empty-state, and the search/filter
 * field styles live in components.css since they're shared with the
 * Laboratory Analysis page too — only the toolbar wrapper itself is
 * unique to this page.
 *
 * Pagination note: components.css also has .page-btn/.page-arrow/
 * .page-ellipsis, styled for a custom pagination component — but this
 * page actually renders pagination via woocommerce_pagination()
 * (native WooCommerce, see woocommerce/archive-product.php), which
 * outputs its own class names (.woocommerce-pagination, .page-numbers)
 * that don't match those. Left both alone rather than guessing which
 * was meant to be the real one: .page-btn etc. may be intended for a
 * future custom-built pagination component, so it stays; the rules
 * below style what WooCommerce's own function genuinely outputs today,
 * reusing the exact same visual language (36px circular buttons,
 * IBM Plex Mono, ink-faint/ink/accent colours) so the two would look
 * identical regardless of which is ever actually in use.
 */

.catalogue-toolbar{display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-bottom:40px;}

@media (max-width: 700px){
  .catalogue-toolbar{flex-direction:column; align-items:stretch;}

  /* Category + Availability side by side as two equal-width columns,
     Sort spans full width beneath them — a deliberate override of the
     shared .filter-group mobile default (components.css), which just
     stacks every field full-width, one per row. That default is still
     correct and untouched for Laboratory Analysis's own toolbar (a
     single dropdown, where a 2-column grid would leave an awkward
     empty half) — this is scoped to .catalogue-toolbar specifically
     (higher specificity than the shared rule) so only this page's
     3-field toolbar gets the 2-up treatment. Relies on DOM order being
     stable — confirmed in woocommerce/archive-product.php: category,
     then availability, then sort, always in that order — so
     nth-child(3) reliably means "the sort field", not a guess. */
  .catalogue-toolbar .filter-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 16px;
  }
  .catalogue-toolbar .filter-field:nth-child(3){
    grid-column:1 / -1;
  }
}

.woocommerce-pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:48px; flex-wrap:wrap; }
.woocommerce-pagination ul.page-numbers{ display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.woocommerce-pagination .page-numbers,
.woocommerce-pagination li{ display:inline-flex; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 4px; border-radius:var(--radius);
  border:1px solid transparent; color:var(--ink-faint);
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-decoration:none;
  transition:color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.woocommerce-pagination a.page-numbers:hover{ color:var(--ink); }
.woocommerce-pagination span.page-numbers.current{
  background:var(--surface); color:var(--ink); border-color:var(--line);
}
.woocommerce-pagination span.page-numbers.dots{ color:var(--ink-faint); border-color:transparent; }
.woocommerce-pagination a.next, .woocommerce-pagination a.prev{
  color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:500; padding:0 14px;
}
.woocommerce-pagination a.next:hover, .woocommerce-pagination a.prev:hover{ color:var(--ink); }