/* =============================================================
   PBS GALLERY — pbs-gallery.css  v2.1.0
   Phoenix Business Solutions  |  phoenixbusinesssolutions.co.za
   All colours, fonts, and sizes are CSS custom properties.
   Defaults here are overridden by inline style on the wrapper.
   ============================================================= */

/* ---- Google Fonts (all selectable options preloaded) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;1,400&family=EB+Garamond:ital,wght@0,400;1,400&family=Merriweather:wght@300;400&family=Montserrat:wght@300;400;500;600&family=Raleway:wght@300;400;500;600&family=Poppins:wght@300;400;500;600&family=Open+Sans:wght@300;400;600&family=Lato:wght@300;400;700&family=Nunito:wght@300;400;600&family=Inter:wght@300;400;500;600&display=swap');

/* ================================================================
   TOKEN DEFAULTS
   These are overridden by the inline style set in PHP render().
   ================================================================ */
.pbs-gallery-wrap {
    --pbs-accent:         #DC2828;
    --pbs-accent-light:   #F04444;
    --pbs-accent-dim:     rgba(220,40,40,0.18);
    --pbs-accent-glow:    rgba(220,40,40,0.40);
    --pbs-bg:             #080808;
    --pbs-text:           #FFFFFF;
    --pbs-text-60:        rgba(255,255,255,0.6);
    --pbs-text-30:        rgba(255,255,255,0.3);
    --pbs-hfont:          'Cormorant Garamond';
    --pbs-bfont:          'Montserrat';
    --pbs-hero-bg:        #080808;
    --pbs-hero-ey-c:      var(--pbs-accent);
    --pbs-hero-tit-c:     var(--pbs-text);
    --pbs-hero-it-c:      var(--pbs-accent-light);
    --pbs-hero-h:         50vh;
    --pbs-hero-pad-b:     56px;
    --pbs-filt-bar-bg:    var(--pbs-bg);
    --pbs-filt-label-c:   var(--pbs-text-60);
    --pbs-filt-btn-c:     var(--pbs-text-60);
    --pbs-filt-btn-bg:    rgba(0,0,0,0);
    --pbs-filt-btn-brd:   rgba(220,40,40,0.35);
    --pbs-filt-act-bg:    var(--pbs-accent);
    --pbs-filt-act-c:     var(--pbs-text);
    --pbs-filt-radius:    0px;
    --pbs-filt-pad-h:     18px;
    --pbs-sec-num-c:      var(--pbs-accent-dim);
    --pbs-sec-head-c:     var(--pbs-text);
    --pbs-sec-sub-c:      var(--pbs-accent-light);
    --pbs-sec-cnt-c:      var(--pbs-text-30);
    --pbs-sec-brd-c:      rgba(220,40,40,0.20);
    --pbs-sec-num-sz:     45px;
    --pbs-overlay-c:      rgba(8,8,8,0.88);
    --pbs-overlay-top:    rgba(8,8,8,0.10);
    --pbs-caption-c:      rgba(255,255,255,0.85);
    --pbs-view-brd:       var(--pbs-accent);
    --pbs-view-hov-bg:    var(--pbs-accent);
    --pbs-item-radius:    0px;
    --pbs-hover-scale:    1.05;
    --pbs-lb-bg:          rgba(4,4,4,0.97);
    --pbs-lb-accent:      var(--pbs-accent);
    --pbs-lb-nav-bg:      rgba(8,8,8,0.7);
    --pbs-lb-cap-c:       var(--pbs-accent-light);
    --pbs-lb-cnt-c:       var(--pbs-text-30);
    --pbs-lb-corner:      22px;
    --pbs-hero-sz:        60px;
    --pbs-ey-sz:          11px;
    --pbs-sec-sz:         27px;
    --pbs-body-sz:        13px;
    --pbs-head-ls:        0.02em;
    --pbs-body-ls:        0.2em;
    --pbs-pad-h:          48px;
    --pbs-sec-space:      64px;
    --pbs-sec-pad-b:      80px;
    --pbs-filt-pad-top:   32px;
    --pbs-sec-head-mb:    24px;
    --pbs-gap:            12px;
    --pbs-grid-h:         280px;
    --pbs-pag-num-c:      var(--pbs-text-60);
    --pbs-pag-bg:         rgba(0,0,0,0);
    --pbs-pag-brd:        rgba(220,40,40,0.35);
    --pbs-pag-hov-bg:     var(--pbs-accent-dim);
    --pbs-pag-act-bg:     var(--pbs-accent);
    --pbs-pag-act-c:      var(--pbs-text);
    --pbs-pag-arrow-c:    var(--pbs-text-60);
    --pbs-pag-radius:     0px;
    --pbs-pag-btn-sz:     38px;
    --pbs-pag-gap:        8px;
    --pbs-pag-mt:         36px;

    /* Base styles */
    background:   var(--pbs-bg);
    color:        var(--pbs-text);
    font-family:  var(--pbs-bfont), sans-serif;
    font-size:    var(--pbs-body-sz);
    font-weight:  300;
    overflow-x:   hidden;
    box-sizing:   border-box;
}

.pbs-gallery-wrap *, .pbs-gallery-wrap *::before, .pbs-gallery-wrap *::after {
    box-sizing: border-box;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.pbs-hero {
    height:     var(--pbs-hero-h);
    min-height: 240px;
    position:   relative;
    display:    flex;
    align-items: flex-end;
    padding:    0 var(--pbs-pad-h) var(--pbs-hero-pad-b);
    overflow:   hidden;
}

.pbs-hero-bg {
    position: absolute;
    inset:    0;
    background: var(--pbs-hero-bg);
    z-index:  0;
}

/* Optional radial glow from accent colour */
.pbs-hero-bg::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: radial-gradient(
        ellipse at 20% 65%,
        var(--pbs-accent-dim) 0%,
        transparent 60%
    );
}

/* Optional CSS grid pattern overlay */
.pbs-hero-grid::after {
    content:  '';
    position: absolute;
    inset:    0;
    background-image:
        repeating-linear-gradient(0deg,   transparent, transparent 79px, var(--pbs-accent-dim) 80px),
        repeating-linear-gradient(90deg,  transparent, transparent 79px, var(--pbs-accent-dim) 80px);
    opacity: 0.35;
}

.pbs-hero-line {
    position:   absolute;
    bottom:     0;
    left:       var(--pbs-pad-h);
    right:      var(--pbs-pad-h);
    height:     1px;
    background: linear-gradient(to right, transparent, var(--pbs-accent), transparent);
    opacity:    0.5;
    z-index:    1;
}

.pbs-hero-content {
    position: relative;
    z-index:  2;
}

/* Eyebrow / label */
.pbs-eyebrow {
    font-size:      var(--pbs-ey-sz);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color:          var(--pbs-hero-ey-c);
    margin-bottom:  14px;
    display:        flex;
    align-items:    center;
    gap:            14px;
}
.pbs-eyebrow::before {
    content:    '';
    width:      36px;
    height:     1px;
    flex-shrink: 0;
    background: var(--pbs-hero-ey-c);
}

/* Hero H1 */
.pbs-hero-content h1 {
    font-family:    var(--pbs-hfont), serif;
    font-size:      var(--pbs-hero-sz);
    font-weight:    300;
    line-height:    1;
    letter-spacing: var(--pbs-head-ls);
    color:          var(--pbs-hero-tit-c);
    margin:         0;
}
.pbs-hero-content h1 em {
    font-style: italic;
    color:      var(--pbs-hero-it-c);
}

/* ================================================================
   FILTER BAR
   ================================================================ */
.pbs-filter-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    padding:     var(--pbs-filt-pad-top) var(--pbs-pad-h) 20px;
    background:  var(--pbs-filt-bar-bg);
    z-index:     50;
}

.pbs-filter-sticky {
    position:   sticky;
    top:        0;
    background: linear-gradient(
        to bottom,
        var(--pbs-filt-bar-bg) 70%,
        transparent 100%
    );
}

.pbs-filter-label {
    font-size:      0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--pbs-filt-label-c);
    margin-right:   12px;
    white-space:    nowrap;
}

.pbs-fbtn {
    background:     var(--pbs-filt-btn-bg);
    border:         1px solid var(--pbs-filt-btn-brd);
    color:          var(--pbs-filt-btn-c);
    padding:        7px var(--pbs-filt-pad-h);
    font-family:    var(--pbs-bfont), sans-serif;
    font-size:      0.65rem;
    letter-spacing: var(--pbs-body-ls);
    text-transform: uppercase;
    cursor:         pointer;
    transition:     all 0.25s ease;
    border-radius:  var(--pbs-filt-radius);
    line-height:    1;
}
.pbs-fbtn:hover {
    border-color: var(--pbs-accent);
    color:        var(--pbs-text);
    background:   var(--pbs-accent-dim);
}
.pbs-fbtn.active {
    background:   var(--pbs-filt-act-bg);
    border-color: var(--pbs-filt-act-bg);
    color:        var(--pbs-filt-act-c);
    font-weight:  600;
}

/* ================================================================
   GALLERY SECTIONS CONTAINER
   ================================================================ */
.pbs-sections {
    padding: 32px var(--pbs-pad-h) var(--pbs-sec-pad-b);
}

.pbs-section {
    margin-bottom: var(--pbs-sec-space);
    background:    var(--pbs-bg);
    transition:    background 0.3s ease;
}

/* When a category has its own design override, give it breathing
   room so the custom background reads as a distinct block */
.pbs-section-override {
    padding:       32px;
    border-radius: 6px;
}
@media (max-width: 767px) {
    .pbs-section-override {
        padding: 20px;
    }
}

/* Section header row */
.pbs-section-header {
    display:       flex;
    align-items:   center;
    gap:           20px;
    margin-bottom: var(--pbs-sec-head-mb);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pbs-sec-brd-c);
}

.pbs-sec-num {
    font-family: var(--pbs-hfont), serif;
    font-size:   var(--pbs-sec-num-sz);
    font-weight: 300;
    color:       var(--pbs-sec-num-c);
    line-height: 1;
    min-width:   54px;
    flex-shrink: 0;
}

.pbs-sec-meta h2 {
    font-family:    var(--pbs-hfont), serif;
    font-size:      var(--pbs-sec-sz);
    font-weight:    400;
    letter-spacing: 0.06em;
    color:          var(--pbs-sec-head-c);
    margin:         0 0 4px;
    line-height:    1.1;
}
.pbs-sec-meta p {
    font-size:      0.62rem;
    letter-spacing: var(--pbs-body-ls);
    text-transform: uppercase;
    color:          var(--pbs-sec-sub-c);
    margin:         0;
}

.pbs-sec-count {
    margin-left:    auto;
    font-size:      0.6rem;
    letter-spacing: 0.15em;
    color:          var(--pbs-sec-cnt-c);
    text-transform: uppercase;
    white-space:    nowrap;
}

/* ================================================================
   MASONRY LAYOUT
   ================================================================ */
[data-layout="masonry"] .pbs-grid {
    column-gap: var(--pbs-gap);
    /* column count injected via per-instance <style> block */
}
[data-layout="masonry"] .pbs-item {
    break-inside:  avoid;
    margin-bottom: var(--pbs-gap);
}
[data-layout="masonry"] .pbs-item img {
    height: auto;
}

/* ================================================================
   GRID LAYOUT
   ================================================================ */
[data-layout="grid"] .pbs-grid {
    display: grid;
    gap:     var(--pbs-gap);
    /* grid-template-columns injected via per-instance <style> block */
}
[data-layout="grid"] .pbs-item {
    margin-bottom: 0;
}
[data-layout="grid"] .pbs-item img {
    height:      var(--pbs-grid-h);
    object-fit:  cover;
    object-position: center;
}

/* ================================================================
   PHOTO ITEM (shared between masonry & grid)
   ================================================================ */
.pbs-item {
    position:      relative;
    overflow:      hidden;
    cursor:        pointer;
    border-radius: var(--pbs-item-radius);
    animation:     pbsFadeUp 0.5s ease both;
}
.pbs-item img {
    display:       block;
    width:         100%;
    transition:    transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
                   filter 0.4s ease;
    filter:        brightness(0.9) saturate(0.85);
    border-radius: var(--pbs-item-radius);
}
.pbs-item:hover img {
    transform: scale(var(--pbs-hover-scale));
    filter:    brightness(1) saturate(1);
}

/* Hover overlay */
.pbs-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
        to top,
        var(--pbs-overlay-c)   0%,
        var(--pbs-overlay-top) 45%,
        transparent             100%
    );
    opacity:        0;
    transition:     opacity 0.4s ease;
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:        18px;
    border-radius:  var(--pbs-item-radius);
}
.pbs-item:hover .pbs-overlay {
    opacity: 1;
}
.pbs-no-overlay .pbs-overlay {
    display: none;
}

/* View / zoom button inside overlay */
.pbs-view-btn {
    align-self:     flex-end;
    width:          46px;
    height:         46px;
    border:         1px solid var(--pbs-view-brd);
    background:     rgba(8,8,8,0.55);
    backdrop-filter: blur(8px);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    margin-bottom:  8px;
    transition:     all 0.3s ease;
    flex-shrink:    0;
}
.pbs-item:hover .pbs-view-btn {
    background:  var(--pbs-view-hov-bg);
    border-color: var(--pbs-view-hov-bg);
    transform:   scale(1.1);
    box-shadow:  0 0 20px var(--pbs-accent-glow);
}
.pbs-view-btn svg {
    width:  18px;
    height: 18px;
    stroke: var(--pbs-text);
    transition: stroke 0.3s;
}

/* Caption inside overlay */
.pbs-caption {
    font-size:      0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--pbs-caption-c);
    transform:      translateY(6px);
    transition:     transform 0.4s ease;
    line-height:    1.4;
}
.pbs-item:hover .pbs-caption {
    transform: translateY(0);
}

/* ================================================================
   PAGINATION
   ================================================================ */
.pbs-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:              var(--pbs-pag-gap);
    margin-top:       var(--pbs-pag-mt);
}
.pbs-pagination:empty {
    display: none;
    margin-top: 0;
}

.pbs-pag-btn,
.pbs-pag-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       var(--pbs-pag-btn-sz);
    height:          var(--pbs-pag-btn-sz);
    padding:         0 6px;
    background:      var(--pbs-pag-bg);
    border:          1px solid var(--pbs-pag-brd);
    border-radius:   var(--pbs-pag-radius);
    color:           var(--pbs-pag-num-c);
    font-family:     var(--pbs-bfont), sans-serif;
    font-size:       0.7rem;
    letter-spacing:  0.05em;
    line-height:     1;
    cursor:          pointer;
    transition:      all 0.25s ease;
    user-select:     none;
}
.pbs-pag-btn {
    color: var(--pbs-pag-arrow-c);
}
.pbs-pag-btn svg {
    width:  16px;
    height: 16px;
}
.pbs-pag-num:hover,
.pbs-pag-btn:hover:not(.pbs-pag-disabled) {
    border-color: var(--pbs-pag-act-bg);
    background:   var(--pbs-pag-hov-bg);
    color:        var(--pbs-pag-act-c);
}
.pbs-pag-num.active {
    background:   var(--pbs-pag-act-bg);
    border-color: var(--pbs-pag-act-bg);
    color:        var(--pbs-pag-act-c);
    font-weight:  600;
    cursor:       default;
}
.pbs-pag-disabled {
    opacity:        0.35;
    cursor:         default;
    pointer-events: none;
}
.pbs-pag-ellipsis {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       var(--pbs-pag-btn-sz);
    height:          var(--pbs-pag-btn-sz);
    color:           var(--pbs-pag-num-c);
    font-size:       0.7rem;
    user-select:     none;
}
.pbs-item.pbs-pag-hidden {
    display: none !important;
}

/* ================================================================
   EMPTY STATES
   ================================================================ */
.pbs-empty {
    font-size:      0.75rem;
    color:          var(--pbs-text-30);
    letter-spacing: 0.1em;
    padding:        32px 0;
    border:         1px dashed var(--pbs-sec-brd-c);
    text-align:     center;
    margin:         0;
}
.pbs-no-cats {
    padding:    48px var(--pbs-pad-h);
    text-align: center;
    color:      var(--pbs-text-30);
    font-size:  0.8rem;
    border:     1px dashed var(--pbs-sec-brd-c);
    margin:     40px var(--pbs-pad-h);
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.pbs-lb {
    position:       fixed;
    inset:          0;
    z-index:        999999;
    background:     var(--pbs-lb-bg);
    display:        flex;
    align-items:    center;
    justify-content: center;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.35s ease;
    backdrop-filter: blur(14px);
}
.pbs-lb.open {
    opacity:        1;
    pointer-events: all;
}

.pbs-lb-inner {
    position:        relative;
    max-width:       92vw;
    max-height:      90vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Image wrapper + corner accents */
.pbs-lb-img-wrap {
    position:   relative;
    max-width:  88vw;
    max-height: 82vh;
    overflow:   hidden;
}
/* Corner: top-left */
.pbs-lb-img-wrap::before {
    content:     '';
    position:    absolute;
    top:    0; left:  0;
    width:  var(--pbs-lb-corner);
    height: var(--pbs-lb-corner);
    border-top:  1px solid var(--pbs-lb-accent);
    border-left: 1px solid var(--pbs-lb-accent);
    z-index: 2;
}
/* Corner: bottom-right */
.pbs-lb-img-wrap::after {
    content:     '';
    position:    absolute;
    bottom: 0; right:  0;
    width:  var(--pbs-lb-corner);
    height: var(--pbs-lb-corner);
    border-bottom: 1px solid var(--pbs-lb-accent);
    border-right:  1px solid var(--pbs-lb-accent);
    z-index: 2;
}
/* Corner: top-right */
.pbs-corner-tr {
    position:    absolute;
    top:  0; right: 0;
    width:  var(--pbs-lb-corner);
    height: var(--pbs-lb-corner);
    border-top:   1px solid var(--pbs-lb-accent);
    border-right: 1px solid var(--pbs-lb-accent);
    z-index: 2;
}
/* Corner: bottom-left */
.pbs-corner-bl {
    position:    absolute;
    bottom: 0; left: 0;
    width:  var(--pbs-lb-corner);
    height: var(--pbs-lb-corner);
    border-bottom: 1px solid var(--pbs-lb-accent);
    border-left:   1px solid var(--pbs-lb-accent);
    z-index: 2;
}

.pbs-lb-img {
    display:    block;
    max-width:  88vw;
    max-height: 82vh;
    object-fit: contain;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Close button */
.pbs-lb-close {
    position:   absolute;
    top:        -52px;
    right:      0;
    background: transparent;
    border:     1px solid var(--pbs-lb-accent);
    color:      var(--pbs-text);
    width:      42px;
    height:     42px;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.pbs-lb-close:hover {
    background: var(--pbs-lb-accent);
}
.pbs-lb-close svg {
    width:  14px;
    height: 14px;
    pointer-events: none;
}

/* Nav prev/next */
.pbs-lb-nav {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--pbs-lb-nav-bg);
    border:         1px solid var(--pbs-lb-accent);
    color:          var(--pbs-text);
    width:          50px;
    height:         50px;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     all 0.3s ease;
    backdrop-filter: blur(8px);
}
.pbs-lb-nav:hover {
    background:  var(--pbs-lb-accent);
    border-color: var(--pbs-lb-accent);
}
.pbs-lb-nav svg {
    width:  18px;
    height: 18px;
    pointer-events: none;
}
.pbs-lb-prev { left:  -66px; }
.pbs-lb-next { right: -66px; }

/* Caption & counter row */
.pbs-lb-info {
    position:   absolute;
    bottom:     -48px;
    left:       0;
    right:      0;
    display:    flex;
    align-items: center;
    justify-content: space-between;
}
.pbs-lb-caption {
    font-size:      0.62rem;
    letter-spacing: var(--pbs-body-ls);
    text-transform: uppercase;
    color:          var(--pbs-lb-cap-c);
}
.pbs-lb-counter {
    font-size:      0.62rem;
    letter-spacing: 0.15em;
    color:          var(--pbs-lb-cnt-c);
}

/* ================================================================
   ANIMATION
   ================================================================ */
@keyframes pbsFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .pbs-hero,
    .pbs-filter-bar,
    .pbs-sections {
        --pbs-pad-h: clamp(20px, 4vw, 48px);
    }
}

@media (max-width: 767px) {
    .pbs-hero {
        min-height: 200px;
        --pbs-hero-pad-b: 36px;
    }
    .pbs-hero-content h1 {
        --pbs-hero-sz: clamp(1.8rem, 8vw, 3.5rem);
    }
    .pbs-lb-prev { left:  -8px; }
    .pbs-lb-next { right: -8px; }
    .pbs-lb-nav  { width: 36px; height: 36px; }
    .pbs-lb-close { top: -44px; width: 36px; height: 36px; }
    .pbs-lb-info  { bottom: -40px; }
}

@media (max-width: 480px) {
    .pbs-section-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .pbs-sec-count {
        margin-left: 0;
        order: 3;
    }
    .pbs-filter-bar {
        gap: 6px;
    }
    .pbs-pagination {
        --pbs-pag-btn-sz: 32px;
        gap: 6px;
    }

    /* ── MODE 1: Equal width (default) ──────────────────────────
       Buttons share the full filter-bar width evenly.
       The "Filter by" label is hidden so it doesn't skew widths.  */
    .pbs-filt-mob-equal {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .pbs-filt-mob-equal .pbs-filter-label {
        display: none;          /* hide "Filter by:" label on mobile */
    }
    .pbs-filt-mob-equal .pbs-fbtn {
        width: 100%;
        text-align: center;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.58rem;     /* slightly smaller text so labels fit */
        letter-spacing: 0.1em; /* tighten spacing to fit narrow cells */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── MODE 2: Horizontal scroll ───────────────────────────────
       Single row — user swipes sideways to see all buttons.       */
    .pbs-filt-mob-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .pbs-filt-mob-scroll::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari */
    }
    .pbs-filt-mob-scroll .pbs-fbtn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* ── MODE 3: Wrap (original behaviour) ───────────────────────
       No change — buttons wrap onto multiple lines as before.     */
    .pbs-filt-mob-wrap {
        flex-wrap: wrap;
    }
}