style: SERP list uses full width, bigger thumbs, category hit counts

Three fixes from fox's screenshot of the deployed tag detail page:

1. Dead right-hand space — .serp-list-excerpt had max-width: 70ch, so
   the snippet capped at ~600px while the row was full width, leaving
   ~40% of the viewport empty next to the facet sidebar. Removed the
   cap; the excerpt now fills the row body. Product.excerpt_sentences
   already bounds the block at 6 sentences so it can't run unbounded.

2. Bigger thumbnails — .serp-list-row thumbnail column goes 80→140px
   base, and the container-query steps go 120→200 (≥600), 160→260
   (≥900), plus a new 320px step at ≥1200. The facet sidebar makes
   the content container wide, so the larger steps actually fire.

3. Category hit counts — facet sidebar each category now shows a
   muted tabular-nums pill with Tag.product_count next to the name.
   a.facet-tag becomes a 1fr/auto grid (name | count); the count
   chip inverts on the active row so it stays legible on the themed
   background. No view change — Tag.product_count is an existing
   on-demand property, ~one indexed COUNT per sidebar row.

6-sentence excerpt was already wired (excerpt_sentences(6) via the
facet-nav work). 42 tag/facet/serp functional tests pass.

make_post_sell/static/css/common.css

@@ -1482,10 +1482,10 @@ section.serp-list {
 }
 article.serp-list-row {
     display: grid;
-    grid-template-columns: 80px minmax(0, 1fr);
-    gap: var(--space-3, 12px);
+    grid-template-columns: 140px minmax(0, 1fr);
+    gap: var(--space-4, 16px);
     align-items: start;
-    padding: var(--space-2, 8px);
+    padding: var(--space-3, 12px);
     border-radius: var(--radius-sm, 4px);
     transition: background-color 200ms ease;
 }
@@ -1531,7 +1531,10 @@ p.serp-list-excerpt {
     color: var(--text-color, #333);
     font-size: var(--type-body-sm-size, 0.875rem);
     line-height: 1.5;
-    max-width: 70ch;
+    /* No max-width — the excerpt fills the row body so the layout uses
+       the full screen real estate the facet sidebar frees up. The
+       6-sentence cap (Product.excerpt_sentences) keeps the block from
+       running unbounded. */
 }
 [data-theme="dark"] article.serp-list-row:hover {
     background-color: var(--dark-button-bg, #2d3748);
@@ -1541,8 +1544,8 @@ p.serp-list-excerpt {
    grows. The parent .serp-list is the query container. */
 @container (min-width: 600px) {
     article.serp-list-row {
-        grid-template-columns: 120px minmax(0, 1fr);
-        gap: var(--space-4, 16px);
+        grid-template-columns: 200px minmax(0, 1fr);
+        gap: var(--space-5, 20px);
     }
     h3.serp-list-title {
         font-size: var(--type-title-size, 1.25rem);
@@ -1550,7 +1553,12 @@ p.serp-list-excerpt {
 }
 @container (min-width: 900px) {
     article.serp-list-row {
-        grid-template-columns: 160px minmax(0, 1fr);
+        grid-template-columns: 260px minmax(0, 1fr);
+    }
+}
+@container (min-width: 1200px) {
+    article.serp-list-row {
+        grid-template-columns: 320px minmax(0, 1fr);
     }
 }
 
@@ -1942,7 +1950,12 @@ ul.facet-tag-list {
 }
 ul.facet-tag-list li { margin: 0; }
 a.facet-tag {
-    display: block;
+    /* name on the left (1fr, can wrap), hit-count chip on the right
+       (auto). Grid only. */
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--space-2, 8px);
     padding: var(--space-2, 8px) var(--space-3, 12px);
     border-radius: var(--radius-sm, 4px);
     color: var(--text-color, #333);
@@ -1950,6 +1963,24 @@ a.facet-tag {
     transition: background-color 150ms ease;
     word-break: break-word;
 }
+span.facet-tag-count {
+    /* Hit count per category — muted pill so the eye reads names
+       first, counts second. */
+    color: var(--text-muted, #6b7280);
+    font-size: var(--type-body-sm-size, 0.8125rem);
+    font-variant-numeric: tabular-nums;
+    background: var(--surface-dim, #f3f4f6);
+    padding: 0 var(--space-2, 8px);
+    border-radius: var(--radius-pill, 999px);
+    min-width: 1.5rem;
+    text-align: center;
+}
+a.facet-tag-active span.facet-tag-count {
+    /* On the active row the chip inverts so it stays legible against
+       the themed background. */
+    background: rgba(255, 255, 255, 0.25);
+    color: var(--shop-theme-text-color, #fff);
+}
 a.facet-tag:hover {
     background: var(--surface-dim, #f3f4f6);
 }

make_post_sell/templates/_facet_nav.j2

@@ -76,7 +76,10 @@
       <li>
         <a href="{{ tag_base }}/tag/{{ t.slug }}"
            class="facet-tag{% if active_tag and active_tag.id == t.id %} facet-tag-active{% endif %}"
-           rel="nofollow">{{ t.name }}</a>
+           rel="nofollow">
+          <span class="facet-tag-name">{{ t.name }}</span>
+          <span class="facet-tag-count">{{ t.product_count }}</span>
+        </a>
       </li>
       {% endfor %}
     </ul>