/* Collections page */
.col-hero-art { padding: 4% 8%; }

/* sticky filter bar under the header */
.fbar {
  position: sticky; top: var(--hdr); z-index: 40; display: flex; justify-content: space-between; align-items: stretch;
  background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: box-shadow .4s;
}
.fbar.is-stuck { box-shadow: 0 4px 0 rgba(40, 40, 40, .08); }
.fbar-cats { display: flex; overflow-x: auto; scrollbar-width: none; }
.fbar-cats::-webkit-scrollbar { display: none; }
.fbar-tab { flex: none; display: flex; align-items: center; padding: 0 16px; border-right: 1px solid var(--line); white-space: nowrap; color: var(--ink-72); min-height: 46px; }
.fbar-tab.is-on { color: var(--ink); }
.fbar-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); z-index: 3; }
.fbar-tools { display: flex; align-items: stretch; }
.fbar-group { flex: none; display: flex; border-left: 1px solid var(--line); }
.chip-btn { flex: none; padding: 0 12px; font: inherit; font-size: var(--fs-xs); color: var(--ink-72); border-right: 1px dashed var(--line); white-space: nowrap; }
.fbar-group .chip-btn:last-child { border-right: 0; }
.chip-btn.is-on { color: var(--accent); }
.chip-btn.is-on > span::before { content: "■ "; font-size: 8px; vertical-align: 1px; }
.fbar-sort { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-left: 1px solid var(--line); color: var(--ink-48); }
.fbar-sort select { font: inherit; font-size: var(--fs-xs); background: none; border: 0; color: var(--ink); cursor: pointer; outline: none; text-transform: uppercase; }
.fbar-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fbar-count { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--line); color: var(--ink-48); white-space: nowrap; }
.fbar-count b { font-weight: 400; color: var(--ink); margin: 0 4px; }

/* groups */
.cgroup-head { display: grid; grid-template-columns: 80px 1fr 1fr auto; gap: 26px; align-items: end; padding: 60px 26px 26px; }
.cgroup-no { color: var(--accent); align-self: start; padding-top: 6px; }
.cgroup-head p { color: var(--ink-72); font-size: var(--fs-s); max-width: 26em; }
.cgroup-count { color: var(--ink-48); }
.cgroup-count b { font-weight: 400; color: var(--ink); }
.cgroup-cards { overflow: hidden; }
.cgroup-cards .pcard { border: 0 !important; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.pcard.is-hidden { display: none; }
.cgroup-empty { display: none; padding: 40px 26px; color: var(--ink-48); border-top: 1px solid var(--line); }
.cgroup-empty a { color: var(--accent); }
.cgroup.is-empty .cgroup-empty { display: block; }
.cgroup.is-empty .cgroup-cards { border-top: 0; }

@media (max-width: 1100px) {
  .fbar { flex-direction: column; }
  .fbar-cats { border-bottom: 1px solid var(--line); }
  .fbar-tools { overflow-x: auto; scrollbar-width: none; }
  .fbar-group:first-child { border-left: 0; }
  .fbar-tools > * { min-height: 40px; }
}
@media (max-width: 900px) {
  .cgroup-cards { overflow-x: auto; }
  .cgroup-cards .pcard { box-shadow: none; border-right: 1px solid var(--line) !important; }
  .cgroup-head { grid-template-columns: 1fr; gap: 12px; padding-top: 44px; }
  .fbar-count { display: none; }
}
@media (max-width: 900px), (pointer: coarse) {
  .fbar-tab, .chip-btn, .fbar-sort, .fbar-tools > * { min-height: 44px; }
  .chip-btn { min-width: 44px; }
  /* WebKit ignores min-height on a select drawn as a native menu (it stays 24px), so the touch select draws itself:
     no native appearance, the full 44px of the bar, and the arrow redrawn as two gradient halves of a square */
  .fbar-sort select { -webkit-appearance: none; appearance: none; align-self: stretch; min-height: 44px; padding: 0 18px 0 0; border-radius: 0;
    background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 4px center / 5px 5px no-repeat,
                linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 center / 5px 5px no-repeat; }
  /* at the bar's full height the ring would sit outside the scrolling tool row and lose its top and bottom */
  .fbar-sort select:focus-visible { outline-offset: -2px; }
}
/* forced colors (Windows high contrast) drop gradient backgrounds, which would take the drawn arrow with them: hand the
   select back to the system, which draws its own arrow in the user's colours (Chromium keeps min-height on it) */
@media (forced-colors: active) { .fbar-sort select { -webkit-appearance: auto; appearance: auto; background: none; } }
/* iOS Safari zooms the page when a control under 16px takes focus, a select included */
@media (pointer: coarse) { .fbar-sort select { font-size: 16px; } }

/* the page keeps its place across a sort or filter itself (collections.js); the browser's scroll anchoring would move it again mid-Flip */
.col-groups { overflow-anchor: none; }