/* Listing pages: category, all products, new arrivals, featured, search */
.listing-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--gutter) var(--s-3); }
.listing-count { margin: 0; color: var(--text-2); font-size: var(--fs-small); font-weight: 700; }
.listing-bar .chip { min-height: var(--tap); }
.strip { padding: var(--s-4) var(--gutter) 0; display: flex; }
.chips + .strip, .chips + .listing-bar { margin-top: var(--s-1); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.empty .chips.wrap { justify-content: center; }
.btn-link { border: 0; background: transparent; cursor: pointer; padding: var(--s-2); min-height: var(--tap); }

.loadmore { display: flex; justify-content: center; gap: var(--s-3); padding: var(--s-6) var(--gutter) 0; }
.loadmore .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.load-error { text-align: center; color: var(--danger); font-size: var(--fs-small); font-weight: 600; padding-top: var(--s-3); }
[data-results][aria-busy="true"] .listing { opacity: .5; transition: opacity var(--dur-2) var(--ease-out); }

.skel-card { aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
[data-skeleton] { padding: 0 var(--gutter); }

/* sort sheet */
.sheet-head { justify-content: space-between; margin-bottom: var(--s-3); }
.sheet-head h2 { font-size: var(--fs-title); font-weight: 800; }
.opts { border: 0; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-1); }
.opts legend { padding: 0; margin-bottom: var(--s-2); color: var(--text-3); font-size: var(--fs-small); font-weight: 700; }
.opt { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-md); background: var(--surface-2); font-weight: 600; cursor: pointer; }
.opt input { width: 20px; height: 20px; accent-color: var(--accent-500); flex: none; }
.opt:has(input:checked) { background: var(--accent-100); }
.sheet-actions { gap: var(--s-3); margin-top: var(--s-2); }

/* search */
.search-field { flex: 1; min-height: var(--tap); box-shadow: inset 0 0 0 1px var(--line); }
.search-idle .section-head { margin-top: var(--s-4); }
.search-idle .chips.wrap { padding-top: 0; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* display:grid on .empty / .grid-products would otherwise beat the hidden attribute */
.empty[hidden], .grid-products[hidden], .chips[hidden], .section-head[hidden] { display: none; }