/*
 * Shop / category archive styles. Depends on shop-components.css
 * (.product-card, .badge*, .cat-grid, .cat-empty) being enqueued
 * first — this file only adds what's specific to the archive page
 * itself (header, toolbar, chips, sort, pagination).
 */

.archive-header{ max-width:1100px; margin:0 auto; padding:var(--sp-6) var(--sp-6) 0; }
.archive-header h1{ font-size:clamp(22px,3vw,28px); }
.archive-count{ font-size:13px; color:var(--on-surface-variant); margin-top:4px; }

.archive-toolbar{ max-width:1100px; margin:0 auto; padding:var(--sp-6) var(--sp-6) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.filter-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; flex:1; min-width:0; }
.filter-chips::-webkit-scrollbar{ height:6px; } .filter-chips::-webkit-scrollbar-thumb{ background:var(--outline-soft); border-radius:4px; }
.filter-chip{ flex:0 0 auto; border:1.5px solid var(--outline); background:var(--surface-high); color:var(--on-surface); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease; display:inline-block; }
.filter-chip:hover{ border-color:var(--primary); }
.filter-chip.active{ background:var(--primary); color:var(--on-primary); border-color:transparent; }

.sort-select{ flex:0 0 auto; border:1.5px solid var(--outline); border-radius:var(--r-sm); background:var(--surface-high); color:var(--on-surface); padding:10px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.sort-select:focus{ outline:none; border-color:var(--primary); }

/* container for the product grid + pagination — front-page.css's bare
   `section{}` rule provides this same max-width/padding on the homepage,
   but that stylesheet isn't enqueued here, so the archive page needs its
   own rule instead of relying on it. */
.archive-products{ max-width:1100px; margin:0 auto; padding:var(--sp-6) var(--sp-6) var(--sp-12); }

/* pagination — styles WordPress's own the_posts_pagination() markup */
.pagination{ margin-top:var(--sp-8); }
.pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:var(--r-sm); border:1.5px solid var(--outline); background:var(--surface-high); color:var(--on-surface); font-size:13.5px; font-weight:600; text-decoration:none; }
.pagination a.page-numbers:hover{ border-color:var(--primary); color:var(--primary); }
.pagination .page-numbers.current{ background:var(--primary); color:var(--on-primary); border-color:transparent; }
.pagination .page-numbers.dots{ border:none; background:none; color:var(--on-surface-variant); }