/* ══════════════════════════════════════════════════════════════════════════
   eStorePoint — Shop listing & category pages.
   Loaded only by shop.php ($head_css = ['shop']).
   ══════════════════════════════════════════════════════════════════════════ */

/* Category description band under the hero. */
.shop-intro-band{background:var(--green-50);padding-bottom:0;}

.shop-lead-narrow{max-width:56ch;}
.shop-lead-link{color:var(--lime);text-decoration:underline;text-underline-offset:2px;}

/* ── Results bar ──────────────────────────────────────────────────────────
   Sits between the hero and the toolbar. The count is the single most
   useful line on a listing page — it tells a shopper whether it is worth
   scrolling before they start. */
.shop-bar{margin-bottom:1.4rem;}

.shop-count{margin:0;font-size:.9rem;color:var(--muted);}
.shop-count b{color:var(--ink);font-weight:700;}

/* The sort is the only state summarised on this line: it is the one active
   filter with no chip of its own in the toolbar below. Category and tag are
   already represented there, so repeating them on a second line just read as
   a duplicated sentence underneath the count. */
.shop-sorted{display:inline-flex;align-items:center;gap:.4rem;margin-left:.35rem;color:var(--muted);}
.shop-sorted b{color:var(--ink);font-weight:700;}
.shop-clear{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:underline;
}
.shop-clear:hover{color:var(--danger);}

/* ── Toolbar ─────────────────────────────────────────────────────────────
   The nine category chips carry ~1,400px of content inside a ~960px
   container, so as a plain flex item .chips refuses to share the row and
   pushes the sort dropdown onto a line of its own — 80px of dead space
   between the result count and the first product. Letting it shrink and
   pinning the sort keeps both on one line; the sort cannot be squeezed
   because it is the fixed element, not the flexible one.

   flex-basis must be 0, not auto: in a WRAPPING flex container an item whose
   max-content basis (1,413px) exceeds the line does not shrink to share it —
   it claims the whole line and pushes its sibling onto the next one. A zero
   basis makes its contribution start at nothing, so the two genuinely divide
   the row. */
.toolbar{align-items:flex-start;}
.chips{flex:1 1 0;min-width:0;}
/* .chip's 1rem horizontal padding is tuned for the admin lists, where a chip
   row has a line to itself. Here nine chips also share the row with the sort,
   and those 8px per chip are the difference between two rows and three — the
   third of which would hold a single stranded "Zero Waste". */
.chip{padding:.45rem .75rem;}
.shop-sort{width:auto;flex:none;}
.shop-sort select{
  width:auto;padding:.5rem 2rem .5rem .8rem;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-family:inherit;font-size:.85rem;
  font-weight:600;color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  /* chevron drawn as a background so the control needs no extra element */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231D9941' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
}
.shop-sort select:focus{border-color:var(--green-500);outline:none;box-shadow:0 0 0 4px rgba(29,153,65,.12);}

/* Live product count on a category chip. */
.chip-n{
  display:inline-block;margin-left:.35rem;padding:.05rem .42rem;border-radius:999px;
  background:rgba(29,153,65,.10);color:var(--green-800);
  font-size:.7rem;font-weight:700;line-height:1.5;vertical-align:1px;
}
.chip.active .chip-n{background:rgba(255,255,255,.22);color:#fff;}
/* A category with nothing published still browsable, but reads as thin. */
.chip.is-empty{color:var(--muted);opacity:.72;}

/* ── Empty result ──────────────────────────────────────────────────────── */
.shop-empty{max-width:520px;margin:0 auto;padding:56px 20px;}
.shop-empty .empty-art{
  width:96px;height:96px;margin:0 auto 1.3rem;border-radius:50%;
  display:grid;place-items:center;color:var(--green-500);
  background:var(--green-50);border:1px solid var(--green-100);
}
.shop-empty h3{font-size:1.35rem;color:var(--green-900);margin:0 0 .5rem;}
.shop-empty p{margin:0;line-height:1.7;}
.empty-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;}

/* ── Pagination ──────────────────────────────────────────────────────────
   Windowed: first, last and the pages either side of the current one, with
   the runs between collapsed to a single marker. */
.pg{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap;margin-top:2.6rem;}
.pg-nums{list-style:none;display:flex;align-items:center;gap:.35rem;margin:0;padding:0;}
.pg-n,.pg-step{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .8rem;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:.88rem;font-weight:600;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
}
.pg-n:hover,.pg-step:hover{border-color:var(--green-500);color:var(--green-800);background:var(--green-50);}
.pg-n:focus-visible,.pg-step:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(29,153,65,.18);}
.pg-n.is-current{
  background:var(--green-700);border-color:var(--green-700);color:#fff;
  box-shadow:0 4px 12px rgba(29,153,65,.28);cursor:default;
}
.pg-gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:40px;color:var(--muted);font-weight:700;
}
.pg-step{padding:0 1rem;}

@media (max-width:640px){
  .pg{gap:.35rem;}
  .pg-n,.pg-step{min-width:36px;height:36px;font-size:.84rem;}
  .pg-step span{display:none;}          /* just the chevrons, more room */
  .pg-step{padding:0 .7rem;}
  /* A 166px sort squeezed beside the chips would leave them a narrow column
     of five or six rows, so the toolbar stacks instead. */
  .toolbar{flex-direction:column;align-items:stretch;}
  .shop-sort{width:100%;}
  .shop-sort select{width:100%;}
  /* Nine chips at desktop sizing is six or seven rows in a 345px column, which
     buries the product grid a screen and a half down. Compact sizing roughly
     halves it — and unlike a scroll rail it never hides a category a shopper
     cannot see is there. */
  .chip{font-size:.78rem;padding:.38rem .62rem;}
  .chip-n{font-size:.66rem;padding:0 .32rem;margin-left:.28rem;}
}

/* ── Browse-by-category cards ────────────────────────────────────────────
   Reuses the homepage's .grid-cats / .cat-pill so the two pages agree. Shown
   only on the unfiltered listing — once a category or tag is active the chips
   already say where you are, and a second navigation block would just delay
   the products. */
.shop-cats{background:var(--green-50);}
.shop-cats .section-head{margin-bottom:1.6rem;}
/* The count is the reason to put these on a shop page rather than the home
   page: it is what tells a shopper whether a category is worth opening. */
.shop-cats .cat-pill .n{
  margin-top:.18rem;font-size:.76rem;font-weight:600;color:var(--muted);
}
.shop-cats .cat-pill .n b{color:var(--green-800);font-weight:700;}
.shop-cats .cat-pill .n.is-thin{color:var(--muted);opacity:.75;}