/* ==========================================================================
   Component: filter chips  (.chips > a.chip[.is-active] with optional <small> count)
   --------------------------------------------------------------------------
   Pill links used as filters — product categories, gallery albums. One row
   that scrolls sideways on phones; the active pill is navy.
   ========================================================================== */

.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; margin-bottom: var(--s-5); }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0;
    padding: 0.55em 1.15em;
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--paper); }
.chip.is-active { background: var(--navy); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 0.5em; }
.chip small {
    display: grid;
    place-items: center;
    min-width: 1.6em;
    height: 1.6em;
    padding-inline: 0.35em;
    border-radius: var(--r-pill);
    background: var(--page);
    font-size: 0.75em;
    font-weight: 700;
}
.chip.is-active small { background: rgb(255 255 255 / 0.18); }