/* ==========================================================================
   Site-wide filter bars
   Desktop : pills wrap but never beyond 2 rows; more than that scrolls vertically.
   Mobile  : up to 2 rows. If the pills need more than 2 rows, the bar switches to a
             2-row strip that scrolls left <-> right (class .fb-hscroll, set by
             assets/js/filter-bars.js).
   Scroll cues: soft fade on the edge where more pills are hidden, a thin scrollbar,
                and a one-time "peek" nudge on mobile (see the JS).
   Covers: .pf-filters .pp-filters .cs-filters .tm-filters .bl-filters .aw-filters .cr-filters
   The repeated :is() only raises specificity so this wins over each section's own CSS.
   ========================================================================== */

:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters){
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;                 /* only kicks in once the 2-row max-height is reached */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-neutral-paper, #EEF3F0) 45%, transparent) transparent;
  overscroll-behavior: contain;
}
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters)::-webkit-scrollbar{ width: 6px; height: 4px; }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters)::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--color-neutral-paper, #EEF3F0) 45%, transparent); border-radius: 3px; }

/* ---- edge fades: tell the visitor there is more to scroll ---- */
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-right{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-left{ -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-left.fb-can-right{ -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-down{ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-up{ -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 22px), transparent); }
:is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-can-up.fb-can-down{ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); }

/* ---- mobile: 2 rows, sideways scroll when there are too many pills ---- */
@media (max-width: 767px){
  :is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters){ width: 100%; }
  :is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters):is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-hscroll{
    display: grid;
    grid-auto-flow: column;           /* fill top/bottom first, then move right */
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding-bottom: 8px;              /* room for the thin scrollbar */
  }
  :is(.pf-filters,.pp-filters,.cs-filters,.tm-filters,.bl-filters,.aw-filters,.cr-filters).fb-hscroll > *{ white-space: nowrap; }
}

@media (max-width: 767px){
  .pp-filterbar-inner > .pp-filters,
  .bl-filterbar-inner > .bl-filters{ flex: 1 1 100%; }
}