/* ============================================================
   Fluffo — Native mobile app shell (<768px)
   Bottom nav · compact header · filter bottom sheet · PDP bar
   Scoped under #fluffo where possible; shell elements are global.
   ============================================================ */

/* Desktop/tablet: hide mobile-only shell (HTML is always included from layout). */
.fl-mobile-nav,
#pwa-drawer-menu {
  display: none !important;
}

@media (max-width: 767px) {
  :root {
    --fl-announcement-h: 34px;
    --fl-header-h: 56px;
    --fl-admin-bar-h: 0px;
    --fl-app-top: calc(
      var(--fl-admin-bar-h) + var(--fl-announcement-h) + var(--fl-header-h) +
      env(safe-area-inset-top, 0px)
    );
    /* Legacy aliases used elsewhere */
    --fl-topbar-h: var(--fl-announcement-h);
    --fl-app-bar-h: var(--fl-header-h);
    --fl-nav-h: var(--fl-header-h);
    --fl-bottom-nav-h: 56px;
    --fl-cream: #FAF4EC;
    --fl-ink: #463A33;
    --fl-accent: #E0A06A;
    --fl-accent-deep: #D08E55;
    --fl-line: rgba(70, 58, 51, 0.08);
    --fl-sheet-radius: 20px;
    --fl-ease-out: cubic-bezier(0.2, 0.85, 0.25, 1);
    --fl-transition: 280ms var(--fl-ease-out);
  }

  body.show-admin-bar {
    --fl-admin-bar-h: 36px;
  }

  /* Fluffo layout already bakes admin offset into --fl-app-top */
  body.show-admin-bar:has(#fluffo) {
    padding-top: 0 !important;
  }

  /* Spacer for fixed chrome — avoids fixed-in-padded-parent bugs */
  #fluffo.fl-shell::before {
    content: "" !important;
    display: block !important;
    height: var(--fl-app-top) !important;
    width: 100% !important;
  }

  #fluffo.fl-shell,
  #fluffo {
    padding-top: 0 !important;
  }

  html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }

  /* ---- App canvas ---- */
  #fluffo,
  #fluffo.fl-shell {
    background: var(--fl-cream) !important;
    min-height: 100vh;
  }

  #fluffo.fl-page-enter {
    animation: flAppPageIn 320ms var(--fl-ease-out) both;
  }

  @keyframes flAppPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    #fluffo.fl-page-enter { animation: none; }
  }

  /* ---- Compact app bar (fixed below announcement + admin bar) ---- */
  #fluffo .fl-topbar {
    top: var(--fl-admin-bar-h) !important;
    height: var(--fl-announcement-h) !important;
    padding-top: 0 !important;
  }

  #fluffo nav.fl-nav {
    top: calc(var(--fl-admin-bar-h) + var(--fl-announcement-h) + env(safe-area-inset-top, 0px)) !important;
    height: var(--fl-header-h) !important;
    min-height: var(--fl-header-h) !important;
    padding-top: 0 !important;
    background: rgba(250, 244, 236, 0.97) !important;
    border-bottom: 1px solid var(--fl-line) !important;
    box-shadow: 0 1px 0 rgba(70, 58, 51, 0.04) !important;
  }

  #fluffo .fl-nav-track {
    height: var(--fl-header-h) !important;
    padding: 0 10px !important;
    gap: 4px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  #fluffo .fl-nav-start {
    grid-column: 1 !important;
    flex-shrink: 0 !important;
  }

  #fluffo .fl-nav-center {
    grid-column: 2 !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  #fluffo .fl-header-actions,
  #fluffo .fl-nav-right {
    grid-column: 3 !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
  }

  #fluffo .fl-logo {
    max-width: min(120px, 42vw) !important;
  }

  #fluffo .fl-logo img {
    height: 32px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ---- Bottom navigation (5 tabs) ---- */
  .fl-mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--fl-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: var(--fl-bottom-nav-h) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(250, 244, 236, 0.98) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border-top: 1px solid var(--fl-line) !important;
    box-shadow: 0 -2px 16px rgba(70, 58, 51, 0.06) !important;
    z-index: 9990 !important;
    justify-content: space-around !important;
    align-items: stretch !important;
  }

  .fl-mobile-nav__item {
    position: relative !important;
    flex: 1 !important;
    max-width: 20% !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 6px 2px 4px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .fl-mobile-nav__item.is-active {
    color: var(--fl-accent-deep) !important;
  }

  .fl-mobile-nav__item.is-active::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--fl-accent) !important;
  }

  .fl-mobile-nav__icon {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .fl-mobile-nav__label {
    font-size: 9px !important;
    letter-spacing: 0.3px !important;
    margin-top: 2px !important;
  }

  body {
    padding-bottom: calc(var(--fl-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.fl-no-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.fl-no-bottom-nav .fl-mobile-nav {
    display: none !important;
  }

  /* Chat FAB above bottom nav */
  .fl-chat {
    bottom: calc(var(--fl-bottom-nav-h) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    z-index: 9985 !important;
  }

  .fl-chat__toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    box-shadow: 0 6px 20px rgba(208, 142, 85, 0.4) !important;
  }

  /* ---- Breadcrumbs hidden on mobile ---- */
  #fluffo .fl-breadcrumb,
  #fluffo .ps-breadcrumb {
    display: none !important;
  }

  #fluffo .fl-pdp .fl-breadcrumb {
    display: none !important;
  }

  /* ---- Listing: sticky sort/filter bar ---- */
  #fluffo .fl-listing-page {
    margin: 0 !important;
    padding: 0 0 24px !important;
    background: var(--fl-cream) !important;
  }

  #fluffo .fl-listing-page .ps-container,
  #fluffo .fl-main-content .ps-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #fluffo .fl-cat-hero {
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  #fluffo .fl-cat-hero h1 {
    font-size: 1.45rem !important;
  }

  #fluffo .tnw-shop-toolbar-wrap {
    position: sticky !important;
    top: var(--fl-app-top) !important;
    z-index: 100 !important;
    margin: 0 -4px 10px !important;
    padding: 6px 0 !important;
    background: linear-gradient(var(--fl-cream) 70%, transparent) !important;
  }

  #fluffo .tnw-shop-toolbar {
    border-radius: 14px !important;
    padding: 8px 12px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 16px rgba(70, 58, 51, 0.06) !important;
  }

  #fluffo .header__filter button,
  #fluffo #products-filter-sidebar {
    border-radius: 12px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  /* ---- Product grid: 2-col app cards ---- */
  #fluffo .ps-shopping-product .row {
    row-gap: 12px !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  #fluffo .ps-shopping-product .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #fluffo .ps-shopping-product .ps-product {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(70, 58, 51, 0.08) !important;
  }

  #fluffo .ps-shopping-product .ps-product:active {
    transform: scale(0.98) !important;
  }

  #fluffo .ps-product__thumbnail {
    border-radius: 16px 16px 0 0 !important;
  }

  /* ---- Filter bottom sheet (mobile only) ---- */
  #fluffo .ps-layout--shop .ps-layout__left {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(-1 * min(88vh, 640px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(88vh, 640px) !important;
    max-height: 88vh !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10070 !important;
    transform: none !important;
    transition: bottom var(--fl-transition), visibility 0s linear 280ms !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Martfury theme slides container from left; bottom sheet slides from bottom */
  #fluffo .ps-layout--shop .ps-layout__left .ps-layout__left-container,
  #fluffo .ps-layout--shop .ps-layout__left.active .ps-layout__left-container {
    transform: none !important;
  }

  #fluffo .ps-layout--shop .ps-layout__left.fl-filter-open,
  #fluffo .ps-layout--shop .ps-layout__left.active.fl-filter-open {
    bottom: 0 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: bottom var(--fl-transition) !important;
  }

  /* Botble .active alone must not show the old left drawer on mobile */
  #fluffo .ps-layout--shop .ps-layout__left.active:not(.fl-filter-open) {
    bottom: calc(-1 * min(88vh, 640px)) !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #fluffo .ps-layout__left .screen-darken,
  #fluffo .fl-filter-scrim {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(46, 37, 30, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity var(--fl-transition), visibility 0s linear 280ms !important;
    z-index: -1 !important;
    touch-action: manipulation !important;
  }

  #fluffo .ps-layout__left.fl-filter-open .screen-darken,
  #fluffo .fl-filter-scrim.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity var(--fl-transition) !important;
  }

  #fluffo .ps-layout__left-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    background: var(--fl-cream) !important;
    border-radius: var(--fl-sheet-radius) var(--fl-sheet-radius) 0 0 !important;
    box-shadow: 0 -8px 40px rgba(70, 58, 51, 0.18) !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #fluffo .ps-filter__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    padding: 14px 16px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--fl-line) !important;
    background: var(--fl-cream) !important;
    position: relative !important;
    top: auto !important;
  }

  #fluffo .ps-filter__header::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(70, 58, 51, 0.15) !important;
  }

  #fluffo .ps-filter__header h3 {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding-top: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  #fluffo .fl-filter-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  #fluffo .fl-filter-clear {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-accent-deep) !important;
    background: none !important;
    border: none !important;
    padding: 8px 4px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    font-family: 'Nunito', sans-serif !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #fluffo .ps-filter__header .ps-btn--close,
  #fluffo .fl-filter-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: rgba(70, 58, 51, 0.06) !important;
    border-radius: 50% !important;
    color: var(--fl-ink) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    text-decoration: none !important;
  }

  #fluffo .ps-filter__header .ps-btn--close::before,
  #fluffo .fl-filter-close::before {
    content: "×" !important;
  }

  #fluffo .ps-layout__left-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 16px !important;
    overscroll-behavior: contain !important;
  }

  #fluffo .ps-layout__left .bb-product-filter {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    box-shadow: none !important;
    border: 1px solid var(--fl-line) !important;
    background: #fff !important;
  }

  #fluffo .fl-filter-apply-wrap {
    flex-shrink: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--fl-cream) !important;
    border-top: 1px solid var(--fl-line) !important;
    box-shadow: 0 -4px 16px rgba(70, 58, 51, 0.06) !important;
  }

  #fluffo .fl-filter-apply {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--fl-accent) !important;
    color: #fff !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-shadow: 0 6px 18px rgba(208, 142, 85, 0.35) !important;
    transition: background 0.2s, transform 0.15s !important;
  }

  #fluffo .fl-filter-apply:active {
    transform: scale(0.98) !important;
    background: var(--fl-accent-deep) !important;
  }

  /* ---- PDP: swipe gallery + sticky ATC ---- */
  #fluffo .fl-gallery .fl-main-img {
    touch-action: pan-y pinch-zoom !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  #fluffo .fl-gallery .fl-main-img.is-swipe-left {
    animation: flSwipeLeft 280ms var(--fl-ease-out);
  }

  #fluffo .fl-gallery .fl-main-img.is-swipe-right {
    animation: flSwipeRight 280ms var(--fl-ease-out);
  }

  @keyframes flSwipeLeft {
    0% { opacity: 1; transform: translateX(0); }
    40% { opacity: 0.6; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  @keyframes flSwipeRight {
    0% { opacity: 1; transform: translateX(0); }
    40% { opacity: 0.6; transform: translateX(12px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  #fluffo .fl-thumbs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  #fluffo .fl-thumbs::-webkit-scrollbar {
    display: none !important;
  }

  #fluffo .fl-thumbs img {
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
  }

  .fl-mobile-atc {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--fl-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9988 !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: rgba(250, 244, 236, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--fl-line) !important;
    box-shadow: 0 -4px 20px rgba(70, 58, 51, 0.08) !important;
  }

  body.fl-no-bottom-nav .fl-mobile-atc {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .fl-mobile-atc__price {
    flex: 0 0 auto !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--fl-accent-deep) !important;
    white-space: nowrap !important;
  }

  .fl-mobile-atc__btn {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--fl-accent) !important;
    color: #fff !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-shadow: 0 4px 14px rgba(208, 142, 85, 0.35) !important;
  }

  .fl-mobile-atc__btn:disabled {
    opacity: 0.5 !important;
  }

  #fluffo .fl-pdp {
    padding-bottom: calc(80px + var(--fl-bottom-nav-h)) !important;
  }

  /* Homepage chips / sections spacing */
  #fluffo section.block {
    padding: 40px 0 !important;
  }

  #fluffo .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Slide-out menu drawer (below top chrome, above admin bar) ---- */
  .pwa-drawer {
    z-index: 100050 !important;
  }

  .pwa-drawer__content {
    top: var(--fl-app-top) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .pwa-drawer__header {
    flex-shrink: 0 !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
  }

  .pwa-drawer__close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(70, 58, 51, 0.06) !important;
    touch-action: manipulation !important;
  }

  .pwa-drawer__body {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  body.show-admin-bar .pwa-drawer__content {
    top: var(--fl-app-top) !important;
  }

  /* Compact search dropdown — fixed panel below header on mobile */
  #fluffo nav.fl-nav {
    overflow: visible !important;
  }
  #fluffo .fl-search-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1031 !important;
  }
  #fluffo .fl-search-dropdown {
    position: fixed !important;
    top: var(--fl-search-dropdown-top, auto) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1030 !important;
    transform: none !important;
    overflow-x: hidden !important;
    display: none !important;
  }
  #fluffo .fl-search-wrap.fl-search-dropdown--open .fl-search-dropdown {
    display: block !important;
    transform: none !important;
  }
  #fluffo .fl-search-backdrop {
    background: rgba(46, 37, 30, 0.18) !important;
    z-index: 1028 !important;
  }
  #fluffo .fl-search-dropdown__field {
    flex-wrap: nowrap !important;
  }
  #fluffo .fl-search-dropdown__submit {
    padding: 10px 12px !important;
    font-size: .8rem !important;
  }
  #fluffo .fl-search-dropdown__results {
    max-height: min(45vh, 280px) !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
  }
  #fluffo .fl-search-dropdown__results a {
    pointer-events: auto !important;
  }

  /* PDP gallery — keep image inside card bounds */
  #fluffo .fl-gallery {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #fluffo .fl-gallery .fl-main-img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    min-height: unset !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #fluffo .fl-gallery .fl-main-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  #fluffo .fl-pdp.wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  .fl-mobile-atc,
  #fluffo .fl-filter-apply-wrap {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fluffo .ps-layout__left,
  #fluffo .ps-layout__left .screen-darken,
  #fluffo .fl-filter-scrim {
    transition: none !important;
  }
}

/* Tablet: same bottom-sheet filter (<1200px, non-desktop sidebar) */
@media (min-width: 768px) and (max-width: 1199px) {
  #fluffo .ps-layout--shop .ps-layout__left {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(-1 * min(82vh, 600px)) !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    height: min(82vh, 600px) !important;
    transform: none !important;
    transition: bottom 280ms cubic-bezier(0.2, 0.85, 0.25, 1) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 10070 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #fluffo .ps-layout--shop .ps-layout__left .ps-layout__left-container,
  #fluffo .ps-layout--shop .ps-layout__left.active .ps-layout__left-container {
    transform: none !important;
  }

  #fluffo .ps-layout--shop .ps-layout__left.fl-filter-open,
  #fluffo .ps-layout--shop .ps-layout__left.active.fl-filter-open {
    bottom: 0 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #fluffo .ps-layout--shop .ps-layout__left.active:not(.fl-filter-open) {
    bottom: calc(-1 * min(82vh, 600px)) !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #fluffo .ps-layout__left .screen-darken {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(46, 37, 30, 0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 280ms ease !important;
    z-index: -1 !important;
  }

  #fluffo .ps-layout__left.fl-filter-open .screen-darken {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #fluffo .ps-filter__header {
    display: flex !important;
  }
}