/* Browsing a large catalogue: count + sort bar, page numbers, home-page category rows and the search type-ahead.
   Colours fall back through each theme family's variables so these sit naturally in every storefront layout. */
.browse-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--s-muted,var(--t-muted,#667085))}
.browse-count{font-weight:600}
.browse-sort{display:flex;align-items:center;gap:8px;margin:0}
.browse-sort label{font-size:13px}
.browse-sort select{height:38px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:var(--s-card,var(--t-paper,#fff));color:var(--s-ink,var(--t-ink,inherit));padding:0 32px 0 14px;font:inherit;font-size:14px}

.browse-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:28px 0 8px}
.browse-pager .pg{min-width:40px;height:40px;padding:0 12px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:var(--s-card,var(--t-paper,transparent));color:inherit;font-weight:700;font-size:14px;text-decoration:none}
.browse-pager .pg:hover{border-color:var(--brand,#0b7a5a);color:var(--brand,#0b7a5a)}
.browse-pager .pg.is-current{background:var(--brand,#0b7a5a);border-color:var(--brand,#0b7a5a);color:#fff}
.browse-pager .pg-step{padding:0 16px}
.browse-pager .pg-gap{padding:0 4px;color:var(--s-muted,var(--t-muted,#667085))}

.browse-more{grid-column:1/-1;text-align:center;margin:6px 0 0}
.browse-more a{display:inline-block;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--brand,#0b7a5a);background:color-mix(in srgb,var(--brand,#0b7a5a) 10%,transparent);text-decoration:none}
.browse-cta{display:flex;justify-content:center;margin:26px 0 4px}
.browse-cta a{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:999px;font-weight:800;font-size:15px;background:var(--brand,#0b7a5a);color:#fff;text-decoration:none}
.browse-suggest-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.browse-suggest-cats a{padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--brand,#0b7a5a);background:color-mix(in srgb,var(--brand,#0b7a5a) 10%,transparent);text-decoration:none}
.out-of-stock{font-size:12px;font-weight:700;color:var(--s-muted,var(--t-muted,#667085));text-transform:uppercase;letter-spacing:.04em}

/* Search type-ahead: appended to <body> so a search box with overflow:hidden does not clip it. */
.sg-box{position:absolute;z-index:200;background:#fff;color:#1b2a22;border-radius:16px;box-shadow:0 18px 48px rgba(16,24,40,.22);border:1px solid rgba(16,24,40,.08);overflow:auto;max-height:min(70vh,520px);padding:6px;text-align:left}
.sg-head{padding:8px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7a72}
.sg-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;color:inherit;text-decoration:none;font-size:14px}
.sg-row:hover,.sg-row.is-active{background:#f1f5f2}
.sg-thumb{flex:none;width:44px;height:44px;border-radius:10px;background:#eef2ef center/cover no-repeat}
.sg-text{flex:1;min-width:0;display:flex;flex-direction:column}
.sg-text strong{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-text small{color:#6b7a72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-price{flex:none;font-weight:800}
.sg-more{display:block;padding:10px 12px;margin-top:2px;border-top:1px solid #eef0ee;font-weight:700;font-size:14px;color:var(--brand,#0b7a5a);text-decoration:none}
.sg-empty{padding:14px 12px;font-size:14px;color:#6b7a72}