/* ============================================================================
   ps-sale-page · assets/ps-sale-page.css
   BUILD 2026-11-13-09
   Loaded only on pages whose content carries the .psf--bf marker.
   Every rule is scoped to .psf--bf, so nothing here can reach the brand
   pages or the rest of the site. ps-brand-page supplies .psf-container.
   Flatsome's own [ux_products] sliders and [ux_countdown] supply the markup;
   this file re-skins them and adds the filtered states.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------- */
.psf--bf{--psf-bf-bg:#000;--psf-bf-panel:#1e1e1e;--psf-bf-well:#2c2c2c;--psf-bf-ink:#fff;--psf-bf-ink-2:#d9d9d9;--psf-bf-ink-3:#c6c6c6;--psf-bf-muted:#919299;--psf-bf-line:#2c2c2c;--psf-bf-line-2:#555;--psf-bf-gold:#ffc95b;--psf-bf-cols:4;--psf-bf-gap:24px;--psf-bf-red:#F54258db;--psf-bf-red-ink:#f7f7f7;--psf-bf-chip:#f4f4f4;--psf-bf-chip-ink:#1e1e1e;background:var(--psf-bf-bg);color:var(--psf-bf-ink)}
.psf--bf a{color:var(--psf-bf-ink)}
.psf--bf a:focus-visible{outline:2px solid var(--psf-bf-gold);outline-offset:2px}
.psf--bf ::selection{background:var(--psf-bf-gold);color:#000}

/* ---- shared bits -------------------------------------------------------- */
.psf--bf .psf-bf-eyebrow{display:block;margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:var(--psf-bf-muted)}
.psf--bf .psf-bf-eyebrow--gold{font-size:13px;color:var(--psf-bf-gold)}
.psf--bf .psf-bf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid var(--psf-bf-ink);border-radius:999px;background:var(--psf-bf-ink);color:#000;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.psf--bf .psf-bf-btn:hover,.psf--bf .psf-bf-btn:focus{background:var(--psf-bf-gold);border-color:var(--psf-bf-gold);color:#000}

/* ---- breadcrumb --------------------------------------------------------- */
.psf--bf .psf-bf-crumbs{padding:18px 0}
.psf--bf .psf-bf-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--psf-bf-muted)}
.psf--bf .psf-bf-crumbs li{display:flex;align-items:center;gap:8px;margin:0}
.psf--bf .psf-bf-crumbs li+li::before{content:"/";color:var(--psf-bf-line-2)}
.psf--bf .psf-bf-crumbs a{color:var(--psf-bf-muted);text-decoration:none}
.psf--bf .psf-bf-crumbs a:hover{color:var(--psf-bf-ink)}
.psf--bf .psf-bf-crumbs__current{color:var(--psf-bf-ink)}

/* ---- hero --------------------------------------------------------------- */
.psf--bf .psf-bf-hero{border-top:1px solid var(--psf-bf-line);border-bottom:1px solid var(--psf-bf-line)}
.psf--bf .psf-bf-hero__inner{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-end;justify-content:space-between;padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.psf--bf .psf-bf-hero__lead{flex:1 1 600px;min-width:0;display:flex;flex-direction:column;gap:20px}
.psf--bf .psf-bf-hero__title{margin:0;font-weight:700;font-size:clamp(38px,6.4vw,92px);line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--psf-bf-ink)}
.psf--bf .psf-bf-hero__lede{margin:0;max-width:560px;font-size:17px;line-height:1.6;color:var(--psf-bf-ink-2)}
.psf--bf .psf-bf-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:8px}
.psf--bf .psf-bf-hero__meta{font-size:14px;color:var(--psf-bf-ink-3)}
.psf--bf .psf-bf-hero__aside{flex:0 1 420px;min-width:0;display:flex;flex-direction:column;gap:24px}
.psf--bf .psf-bf-saving{display:flex;flex-direction:column;gap:2px}
.psf--bf .psf-bf-saving__figure{font-size:clamp(40px,4.4vw,64px);line-height:1;font-weight:800;text-transform:uppercase}
.psf--bf .psf-bf-saving__pct{color:var(--psf-bf-gold)}

/* ---- countdown · Flatsome [ux_countdown], style="clock" ----------------
   Flatsome renders <div class="ux-timer dark"><span>12<strong>days</strong></span>…</div>
   as a fixed table. Re-laid out as a grid so 3, 4 or 5 cells all sit evenly
   (Flatsome drops the weeks cell inside 7 days, and the days cell inside 24h).
   -------------------------------------------------------------------------- */
.psf--bf .psf-bf-clock{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--psf-bf-ink)}
.psf--bf .psf-bf-clock .ux-timer{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%;margin:0;border-spacing:0;font-size:31px;line-height:1}
.psf--bf .psf-bf-clock .ux-timer span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:0;padding:14px 8px;border-radius:0;background:var(--psf-bf-panel);color:var(--psf-bf-ink);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.psf--bf .psf-bf-clock .ux-timer span strong{display:block;margin:0;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:var(--psf-bf-ink-3);opacity:1}
.psf--bf .psf-bf-clock .ux-timer .loading-spin{margin:0}

/* ---- sticky filter bar -------------------------------------------------
   If the site header is sticky on this page, raise `top` to clear it, or
   switch the page to a non-sticky header in the page's Flatsome settings.
   -------------------------------------------------------------------------- */
.psf--bf .psf-bf-bar{position:sticky;top:0;z-index:5;background:var(--psf-bf-bg);border-bottom:1px solid var(--psf-bf-line)}
.psf--bf .psf-bf-bar__inner{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.psf--bf .psf-bf-bar__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.psf--bf .psf-bf-bar__aside{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--psf-bf-muted);text-decoration:underline;text-underline-offset:4px}
.psf--bf .psf-bf-bar__aside:hover{color:var(--psf-bf-ink)}

.psf--bf .psf-bf-seg{display:flex;border:1px solid var(--psf-bf-ink)}
.psf--bf .psf-bf-seg__item{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--psf-bf-bg);color:var(--psf-bf-ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.psf--bf .psf-bf-seg__item:hover{background:var(--psf-bf-panel)}
.psf--bf .psf-bf-seg__item.is-active{background:var(--psf-bf-ink);color:#000}

.psf--bf .psf-bf-pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.psf--bf .psf-bf-pill{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--psf-bf-line-2);border-radius:999px;background:var(--psf-bf-bg);color:var(--psf-bf-ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.psf--bf .psf-bf-pill:hover{border-color:var(--psf-bf-ink)}
.psf--bf .psf-bf-pill.is-active{border-color:var(--psf-bf-gold);background:var(--psf-bf-gold);color:#000}

.psf--bf .psf-bf-brands{display:flex;align-items:center;gap:4px 20px;overflow-x:auto;border-top:1px solid var(--psf-bf-line);white-space:nowrap;scrollbar-width:thin}
.psf--bf .psf-bf-brands .psf-bf-eyebrow{flex:0 0 auto}
.psf--bf .psf-bf-brands a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;color:var(--psf-bf-ink);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.psf--bf .psf-bf-brands a:hover{color:var(--psf-bf-gold)}

/* ---- brand sections ----------------------------------------------------- */
.psf--bf .psf-bf-brand{padding-top:56px;scroll-margin-top:220px}
.psf--bf .psf-bf-brand__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding-bottom:14px;border-bottom:1px solid var(--psf-bf-ink)}
.psf--bf .psf-bf-brand__id{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:4px}
.psf--bf .psf-bf-brand__name{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--psf-bf-ink)}
/* Gold flash behind the offer count. Hugs its text rather than stretching
   the flex column, and the fade is pinned to the last 5em — the width of the
   right padding — so the label never sits on the darkening end however long
   the line runs. Fades to transparent rather than to black so it holds up if
   the section's background ever changes. */
.psf--bf .psf-bf-brand__meta{align-self:flex-start;max-width:100%;padding:.75em 5em .75em .75em;font-size:18px;font-weight:900;line-height:1.1;color:#000;background-image:linear-gradient(94deg,var(--psf-bf-gold) 0,var(--psf-bf-gold) calc(100% - 5em),transparent 100%)}
@media (max-width:549px){.psf--bf .psf-bf-brand__meta{font-size:15px;padding:.6em 3.5em .6em .6em;background-image:linear-gradient(94deg,var(--psf-bf-gold) 0,var(--psf-bf-gold) calc(100% - 3.5em),transparent 100%)}}
.psf--bf .psf-bf-brand__tools{display:flex;align-items:center;gap:16px}

/* Rail controls, matching .psf-carousel__btn on the brand pages: 44px
   circles, outline previous and filled next, dimmed at either end. */
.psf--bf .psf-bf-rail-nav{display:flex;gap:8px}
.psf--bf .psf-bf-rail-btn{width:44px;height:44px;min-height:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--psf-bf-ink);border-radius:999px;box-shadow:none;line-height:1;cursor:pointer;transition:opacity .22s ease,background-color .15s ease}
.psf--bf .psf-bf-rail-btn--prev{background:transparent;color:var(--psf-bf-ink)}
.psf--bf .psf-bf-rail-btn--next{background:var(--psf-bf-ink);color:#000}
.psf--bf .psf-bf-rail-btn:focus-visible{outline:2px solid var(--psf-bf-gold);outline-offset:2px}
.psf--bf .psf-bf-rail-btn.is-disabled{opacity:.35;cursor:default}
.psf--bf .psf-bf-brand__all{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--psf-bf-ink);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.psf--bf .psf-bf-brand__all:hover{color:var(--psf-bf-gold)}
.psf--bf .psf-bf-brand__rail{padding-top:24px}
.psf--bf .psf-bf-brand__rail .row{margin-bottom:0}

/* ---- product cards · Flatsome's own [ux_products] markup ---------------
   Only re-skinned here, never rebuilt: prices, sale badges, variable-product
   "Select options" and add-to-cart all stay WooCommerce's.
   -------------------------------------------------------------------------- */
/* The rail is a CSS scroll track, the same mechanism as psf-carousel on the
   brand pages: a nowrap flex row that scrolls horizontally and snaps. Equal
   card heights come free from align-items:stretch on a single flex line, and
   hiding a card during filtering simply shortens the track.

   The shortcodes use type="row" so Flatsome leaves the row alone. A Flatsome
   slider initialises flickity lazily on scroll, which reflows the page, and
   flickity sizes its viewport from the cells it measures, so the usual
   height:100% fix for equal heights collapses the rail to about 20px. The
   :not() guard keeps this layout clear of a slider should a rail ever be
   switched back. */
.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled){display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--psf-bf-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0;padding:4px 0 20px}
.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled)::-webkit-scrollbar{display:none}
.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled)>.product-small.col{display:flex;flex:0 0 calc((100% - (var(--psf-bf-cols) - 1) * var(--psf-bf-gap)) / var(--psf-bf-cols));width:auto;max-width:none;float:none;padding:0;scroll-snap-align:start}
.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled)>.flickity-prev-next-button,.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled)>.flickity-page-dots{display:none}
@media (max-width:849px){.psf--bf{--psf-bf-cols:3}}
@media (max-width:549px){.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled)>.product-small.col{flex:0 0 290px;width:290px}}
@media (prefers-reduced-motion:reduce){.psf--bf .psf-bf-brand__rail .row:not(.flickity-enabled){scroll-behavior:auto}}
.psf--bf .psf-bf-brand__rail .product-small.col{display:flex}
.psf--bf .psf-bf-brand__rail .product-small.col>.col-inner{display:flex;flex-direction:column;width:100%;background:var(--psf-bf-panel)}
.psf--bf .psf-bf-brand__rail .product-small.box{display:flex;flex-direction:column;flex:1 1 auto}
/* Image well is white: the catalogue mixes white-background JPGs with transparent
   PNGs, and only white renders both cleanly. For an all-transparent catalogue,
   swap to var(--psf-bf-well) for the mockup's dark well. Do not use
   mix-blend-mode:multiply here — over near-black it crushes the whole image. */
.psf--bf .psf-bf-brand__rail .box-image{background:#fff}
.psf--bf .psf-bf-brand__rail .box-text{display:flex;flex-direction:column;flex:1 1 auto;height:auto;padding:18px 16px 16px;background:var(--psf-bf-panel);text-align:left}
.psf--bf .psf-bf-brand__rail .box-text .category,.psf--bf .psf-bf-brand__rail .box-text .product-cat{margin:0 0 2px;font-size:13px;letter-spacing:0;text-transform:none;color:var(--psf-bf-ink-3);opacity:1}
.psf--bf .psf-bf-brand__rail .box-text .name.product-title{margin:0}
.psf--bf .psf-bf-brand__rail .box-text .name.product-title a{font-size:17px;font-weight:700;line-height:1.3;color:var(--psf-bf-ink);text-decoration:none}
.psf--bf .psf-bf-brand__rail .box-text .name.product-title a:hover{color:var(--psf-bf-gold)}
.psf--bf .psf-bf-brand__rail .star-rating{display:none}

/* Price strip. Two things have to be beaten here. The theme's customizer CSS
   sets .product-small .price-wrapper .price{background-color:#f2f2f2} at the
   same specificity but later in the document, so the selector below carries
   .product-small to outrank it. The site's own sale-price treatment (a coral
   highlight behind the ins amount) is set on the .amount itself with
   !important, which no specificity can reach — hence the !important here.
   Colour is also set on the inner .amount, so the amount must be targeted
   directly: colouring ins alone is inherited and loses. */
.psf--bf .psf-bf-brand__rail .price-wrapper{margin-top:auto;padding-top:14px}
.psf--bf .psf-bf-brand__rail .product-small .price-wrapper .price,.psf--bf .psf-bf-brand__rail .price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;box-sizing:border-box;min-height:56px;padding:10px 14px;background:#000}
.psf--bf .psf-bf-brand__rail .price del,.psf--bf .psf-bf-brand__rail .price del .amount{font-size:14px;font-weight:400;color:var(--psf-bf-ink-3)!important;background:none!important;opacity:1}
.psf--bf .psf-bf-brand__rail .price ins,.psf--bf .psf-bf-brand__rail .price ins .amount,.psf--bf .psf-bf-brand__rail .price>.amount{font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--psf-bf-ink)!important;background:none!important;text-decoration:none;padding:0;border-radius:0}
.psf--bf .psf-bf-brand__rail .price .amount bdi{background:none!important;color:inherit!important}

/* Buttons. A variable product's "Select options" link is not wrapped in
   .add-to-cart-button the way a simple product's add-to-cart is, so scoping
   to that wrapper left it on the theme's gold primary while its neighbours
   were white. Target every button in the card's text area instead.
   The site's custom CSS forces a hover colour with !important, so the hover
   here has to answer in kind or the label goes unreadable on the accent. */
.psf--bf .psf-bf-brand__rail .add-to-cart-button{margin-top:12px}
.psf--bf .psf-bf-brand__rail .product-small .box-text .button,.psf--bf .psf-bf-brand__rail .product-small .add-to-cart-button .button{display:block!important;width:100%;margin:12px 0 0;border:0!important;border-radius:0!important;background-color:var(--psf-bf-ink)!important;color:#000!important;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:none!important}
.psf--bf .psf-bf-brand__rail .product-small .add-to-cart-button .button{margin-top:0}
.psf--bf .psf-bf-brand__rail .product-small .box-text .button:hover,.psf--bf .psf-bf-brand__rail .product-small .add-to-cart-button .button:hover{background-color:var(--psf-bf-gold)!important;color:#000!important}

/* Badges — a red discount chip with the stock-type chips beside it, 12px in
   from the corner. Flatsome stacks them: .badge-container is a block and each
   .badge is display:table, so they go in a row here instead.
   The theme's sale-bubble colour comes from a stylesheet the page cannot read
   (cross-origin) at three-class specificity, so these selectors carry
   .product-small .badge to outrank it; !important alone did not. */
.psf--bf .psf-bf-brand__rail .badge-container{top:12px;left:12px;margin:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.psf--bf .psf-bf-brand__rail .badge{width:auto;height:auto;min-width:0;margin:0}
.psf--bf .psf-bf-brand__rail .product-small .badge .badge-inner{width:auto!important;height:auto!important;min-height:0;padding:5px 9px!important;border-radius:0!important;background-color:var(--psf-bf-chip)!important;color:var(--psf-bf-chip-ink)!important;font-size:12px!important;font-weight:700;letter-spacing:.04em;line-height:1.2;text-transform:uppercase}
.psf--bf .psf-bf-brand__rail .product-small .badge .badge-inner .onsale,.psf--bf .psf-bf-brand__rail .product-small .badge .badge-inner span{background:none!important;color:inherit!important;font-size:12px!important;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* the discount itself */
.psf--bf .psf-bf-brand__rail .product-small .badge .badge-inner.on-sale{background-color:var(--psf-bf-red)!important;color:var(--psf-bf-red-ink)!important}

/* Slider arrows — Flatsome's circle nav, sat inside the rail on a dark disc.
   Outside placement lands them in the container padding, which clips below
   roughly 900px; a plain light arrow also disappears over the white image well. */
.psf--bf .psf-bf-brand__rail .flickity-prev-next-button{background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.9);color:#fff;box-shadow:none}
.psf--bf .psf-bf-brand__rail .flickity-prev-next-button:hover{background:#000;border-color:#fff}
.psf--bf .psf-bf-brand__rail .flickity-prev-next-button svg,.psf--bf .psf-bf-brand__rail .flickity-prev-next-button .arrow{fill:#fff;stroke:#fff}

/* ---- showroom CTA ------------------------------------------------------- */
.psf--bf .psf-bf-outro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:72px;padding-top:40px;border-top:1px solid var(--psf-bf-line)}
.psf--bf .psf-bf-outro__title{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--psf-bf-ink)}
.psf--bf .psf-bf-outro__body{margin:0;max-width:640px;font-size:16px;line-height:1.6;color:var(--psf-bf-ink-2)}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:849px){
.psf--bf .psf-bf-hero__title{letter-spacing:.16em}
.psf--bf .psf-bf-hero__aside{flex:1 1 100%}
.psf--bf .psf-bf-brand{scroll-margin-top:170px}
}
@media (max-width:549px){
.psf--bf .psf-bf-bar{position:static}
.psf--bf .psf-bf-bar__aside{margin-left:0}
.psf--bf .psf-bf-brand{scroll-margin-top:24px}
.psf--bf .psf-bf-seg{width:100%}
.psf--bf .psf-bf-seg__item{flex:1 1 0;justify-content:center;padding:0 10px;font-size:12px;letter-spacing:.04em}
.psf--bf .psf-bf-clock .ux-timer{font-size:24px}
}


/* ============================================================================
   Filtering — added by ps-sale-page.js
   ========================================================================= */

/* Elements the script hides must actually go, including flex/inline-flex ones. */
.psf--bf [hidden]{display:none!important}
.psf--bf .pss-hidden{display:none!important}

/* ---- sort control (revealed by JS; a plain link serves without it) ------- */
.psf--bf .psf-bf-sort{display:flex;align-items:center;gap:10px;margin-left:auto}
.psf--bf .psf-bf-sort label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--psf-bf-muted);white-space:nowrap}
.psf--bf .psf-bf-sort select{min-height:44px;padding:0 34px 0 12px;border:1px solid var(--psf-bf-line-2);border-radius:0;background-color:var(--psf-bf-bg);color:var(--psf-bf-ink);font-family:inherit;font-size:14px;line-height:1.2;box-shadow:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.psf--bf .psf-bf-sort select:focus-visible{outline:2px solid var(--psf-bf-gold);outline-offset:2px}

/* ---- counts on the controls --------------------------------------------- */
.psf--bf [data-pss-count]{margin-left:.35em;font-weight:400;color:var(--psf-bf-muted)}
.psf--bf [data-pss-count]:empty{display:none}
.psf--bf .psf-bf-seg__item.is-active [data-pss-count]{color:#555}
.psf--bf .psf-bf-pill.is-active [data-pss-count]{color:rgba(0,0,0,.55)}

/* ---- filtered rails ------------------------------------------------------
   With a filter or sort active the rail stops being a carousel and lays out
   as a wrapped grid, so hidden and reordered cells can never leave flickity
   measuring stale positions. !important is deliberate: flickity writes its
   geometry as inline styles, and an inline style loses to !important.
   -------------------------------------------------------------------------- */
.psf--bf .pss-filtered .flickity-viewport{height:auto!important;overflow:visible!important}
.psf--bf .pss-filtered .flickity-slider{position:static!important;width:auto!important;transform:none!important;display:flex!important;flex-wrap:wrap!important}
.psf--bf .pss-filtered .flickity-slider>*{position:static!important;left:auto!important;transform:none!important}
.psf--bf .pss-filtered .flickity-prev-next-button,.psf--bf .pss-filtered .flickity-page-dots{display:none!important}
.psf--bf .pss-filtered .flickity-slider>.col{flex:0 0 25%!important;max-width:25%!important}
@media (max-width:849px){.psf--bf .pss-filtered .flickity-slider>.col{flex:0 0 33.3333%!important;max-width:33.3333%!important}}
@media (max-width:549px){.psf--bf .pss-filtered .flickity-slider>.col{flex:0 0 50%!important;max-width:50%!important}}

/* ---- empty state --------------------------------------------------------- */
.psf--bf .psf-bf-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 0;text-align:center}
.psf--bf .psf-bf-empty__title{margin:0;font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--psf-bf-ink)}
.psf--bf .psf-bf-empty__reset{min-height:44px;padding:0 20px;border:2px solid var(--psf-bf-ink);background:var(--psf-bf-bg);color:var(--psf-bf-ink);font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.psf--bf .psf-bf-empty__reset:hover{background:var(--psf-bf-ink);color:#000}

/* ---- screen-reader status ------------------------------------------------ */
.psf--bf .psf-bf-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}