/* Browse Products — the cross-store product grid ("see who sells it").
 *
 * Externalized from a 34-line inline <style> island (2026-07-06 cohesion
 * audit, ui-storefront): the page referenced .sf-page-sub/.sf-btn-* without
 * loading v2.css, and hardcoded radii/colors. The .pb-* card keeps its own
 * markup because it carries multi-store affordances (from-price of N stores,
 * store counts, nearest-km) the single-store sf_product_card doesn't model —
 * but it now draws from the same token set. Loaded together with
 * storefront/v2.css so shared .sf-* utility classes resolve.
 */

.pb { max-width: 1200px; margin: 0 auto; padding: var(--space-6, 24px) var(--space-5, 20px) var(--space-10, 40px); }
.pb-head h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--theme-text); margin: 0 0 4px; }
.pb-head p { font-size: var(--font-size-sm, 14px); color: var(--theme-text-secondary); max-width: 60ch; margin: 0 0 16px; line-height: 1.5; }

.pb-search { display: flex; gap: var(--space-2, 8px); max-width: 480px; margin-bottom: var(--space-6, 24px); }
.pb-search input { flex: 1; padding: 9px 13px; font-size: var(--font-size-sm, 14px); border: 1px solid var(--border-control); border-radius: var(--radius-md, 9px); background: var(--theme-input-bg, var(--theme-card-bg)); color: var(--theme-text); }
.pb-search input:focus { outline: none; border-color: var(--brand-primary); }
.pb-search button { padding: 9px 18px; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-md, 9px); border: 0; background: var(--brand-primary); color: var(--theme-text-inverted); cursor: pointer; }

.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--space-4, 16px); }
/* Phones: two across, like the storefront grid. auto-fill at 180px min gave
   ONE column at 375 (2×180 + 16 > 343), so each product was a 343px card and
   a screen showed one and a half of them. */
@media (max-width: 640px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px); } }
/* The shell header shows its own "Search products" field from 1024px
   (chrome.css .sfx-search) — same action, same query name, same placeholder
   as this one. Two identical global searches 110px apart read as two
   different things. The page field stays for phones and tablets, where the
   header has none. Saved / recent searches below it are query-scoped and stay. */
@media (min-width: 1024px) { .pb-search { display: none; } }
.pb-card { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 12px); overflow: hidden; background: var(--theme-card-bg); text-decoration: none; transition: border-color var(--transition-fast, 0.12s ease); }
.pb-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--border-subtle)); }
.pb-media { aspect-ratio: 1/1; background: var(--theme-bg-tertiary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pb-media img { width: 100%; height: 100%; object-fit: cover; }
/* Monogram chip, not a 38px billboard letter — matches .sf-card-mark span in
   storefront/v2.css and .wm-cat-mark in market/catalog.html. Keep the three in
   sync (see BUG_JOURNAL 2026-07-28). */
.pb-mark {
  display: flex; align-items: center; justify-content: center;
  width: 27%; aspect-ratio: 1/1; max-width: 64px; min-width: 34px;
  border-radius: 22%;
  font-size: clamp(15px, 2.2vw, 24px); font-weight: 650; letter-spacing: -0.01em;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--theme-text-secondary);
}
.pb-body { padding: var(--space-3, 12px); display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pb-name { font-size: 13.5px; font-weight: 550; color: var(--theme-text); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.7em; }
.pb-rate { font-size: var(--font-size-xxs, 11.5px); color: var(--theme-text-tertiary); font-variant-numeric: tabular-nums; }
.pb-rate .pb-star { color: var(--rating-star); }
.pb-price { font-size: var(--font-size-md, 16px); font-weight: 700; color: var(--theme-text); font-variant-numeric: tabular-nums; margin-top: auto; }
.pb-price .pb-from { font-size: 11px; font-weight: 600; color: var(--theme-text-tertiary); }
.pb-stores { font-size: var(--font-size-xxs, 11.5px); color: var(--theme-text-tertiary); font-variant-numeric: tabular-nums; }
.pb-near { font-size: var(--font-size-xxs, 11.5px); font-weight: 600; color: var(--brand-text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }

.pb-loc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin-bottom: var(--space-5, 20px); padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 10px); background: var(--theme-card-bg); }
.pb-loc-lead { font-size: 12.5px; font-weight: 600; color: var(--theme-text-secondary); display: inline-flex; align-items: center; gap: 5px; }
/* One height per row: the buttons and the selects on this bar share
   --control-h (measured before: buttons 33px, selects 38px on one line). */
.pb-loc-btn { display: inline-flex; align-items: center; height: var(--control-h, 36px); font-size: 12.5px; font-weight: 600; padding: 0 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border-subtle); background: transparent; color: var(--theme-text); cursor: pointer; }
.pb-loc-btn:hover { border-color: var(--brand-primary); color: var(--brand-text); }
/* Phones: one scrolling row, not a three-row box. The lead sentence goes —
   the controls say what they do — and the bar keeps its 60px, not 160. */
@media (max-width: 640px) {
  .pb-loc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
  .pb-loc::-webkit-scrollbar { display: none; }
  .pb-loc > * { flex-shrink: 0; }
  .pb-loc-lead { display: none; }
}
.pb-loc select { height: var(--control-h, 36px); font-size: 12.5px; padding: 0 10px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border-control); background: var(--theme-input-bg, var(--theme-card-bg)); color: var(--theme-text); }
.pb-loc-chip { font-size: 12.5px; font-weight: 600; color: var(--brand-text); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full, 999px); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.pb-loc-chip a { color: var(--theme-text-tertiary); text-decoration: none; font-weight: 700; }
.pb-loc-chip a:hover { color: var(--brand-text); }

.pb-recent-chip { font-size: var(--font-size-sm, 13px); padding: 2px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full, 999px); color: var(--theme-text); text-decoration: none; }
.pb-recent-chip:hover { border-color: var(--brand-primary); color: var(--brand-text); }

.pb-empty { color: var(--theme-text-secondary); font-size: var(--font-size-sm, 14px); padding: 40px 0; text-align: center; }

.pb-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 28px; }
.pb-pager a, .pb-pager span { font-size: var(--font-size-sm, 13px); color: var(--theme-text-secondary); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); }
.pb-pager a:hover { border-color: var(--brand-primary); color: var(--brand-text); }