/** * IF Filters Panel — bottom-sheet styling * Alle eigen elementen zijn voorvoegsel-gescoped (.if-fp-). * * BELANGRIJK: het thema levert zélf al mobiele-drawer styling voor * .if-filter-sidebar (vaak met !important). Zolang de sidebar in ons paneel * zit neutraliseren we die styling daarom hard met !important, en verbergen we * de thema-header (we tonen een eigen titel + sluitknop in het paneel). */ .if-fp-root { position: fixed; inset: 0; z-index: 2147483000; } .if-fp-root[hidden] { display: none !important; } /* Scroll-lock: overflow:hidden op (en body). Géén position:fixed, dus * geen layout-shift en geen "bevroren" pagina als de lock blijft hangen. */ html.if-fp-locked, html.if-fp-locked body { overflow: hidden !important; } /* InstantFilter levert een eigen off-canvas overlay (.if-filters-overlay). * Wij gebruiken onze eigen backdrop, dus die van instantfilter verbergen we * volledig — anders krijg je een dubbele of blijvend zichtbare overlay. */ .if-filters-overlay { display: none !important; } /* ---------------------------------------------------------------- Backdrop */ .if-fp-backdrop { position: absolute; inset: 0; background: rgba( 15, 23, 42, 0.5 ); opacity: 0; transition: opacity 0.3s ease; touch-action: none; } .if-fp-root.is-open .if-fp-backdrop { opacity: 1; } /* ------------------------------------------------------------------- Sheet */ .if-fp-sheet { --if-fp-accent: #05932c; /* accentkleur: aangevinkte checkboxes, apply-knop, links */ position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba( 0, 0, 0, 0.18 ); transform: translateY( 100% ); transition: transform 0.34s cubic-bezier( 0.32, 0.72, 0, 1 ); will-change: transform; overscroll-behavior: contain; overflow: hidden; /* zodat de afgeronde hoeken netjes blijven */ } .if-fp-sheet:focus { outline: none; } .if-fp-root.is-open .if-fp-sheet { transform: translateY( 0 ); } /* ----------------------------------------------------- Eigen paneel-chrome */ .if-fp-sheet__handlebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 10px 12px 4px; touch-action: none; cursor: grab; } .if-fp-sheet__handlebar:active { cursor: grabbing; } .if-fp-grip { width: 40px; height: 5px; border-radius: 999px; background: #cbd5e1; } .if-fp-sheet__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 16px 12px; border-bottom: 1px solid #e5e7eb; } .if-fp-sheet__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: #0f172a; } .if-fp-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #f1f5f9; color: #334155; cursor: pointer; transition: background 0.15s ease; } .if-fp-close:hover { background: #e2e8f0; } .if-fp-close:focus-visible { outline: 2px solid var( --if-fp-accent ); outline-offset: 2px; } /* ============================================================================ * Verplaatste sidebar in het paneel — thema-drawer styling neutraliseren. * Bewust agressief met !important omdat we onbekende thema-regels (incl. * !important en position:fixed) moeten verslaan. * ========================================================================== */ /* Container: alle drawer-eigenschappen platslaan. */ .if-fp-sheet .if-filter-sidebar.if-fp-in-sheet { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; position: static !important; inset: auto !important; width: auto !important; max-width: none !important; max-height: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; visibility: visible !important; opacity: 1 !important; z-index: auto !important; overflow: hidden !important; } /* Structuur-wrappers uit hun (mogelijk fixed/absolute) thema-positie halen. */ .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__header, .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__content, .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__footer, .if-fp-sheet .if-fp-in-sheet .if-filter { position: static !important; inset: auto !important; max-height: none !important; width: auto !important; z-index: auto !important; } /* Thema-header (blauwe balk + dubbele "Filters") verbergen — wij tonen een * eigen titel in .if-fp-sheet__header. De 'wis alles'-knop blijft via de * footer beschikbaar. */ .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__header { display: none !important; } /* Scrollbaar middengedeelte. */ .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__content { flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; padding: 14px 16px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Vastgezette footer met de 'Toon X producten'-knop. */ .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__footer { flex: 0 0 auto !important; display: flex !important; gap: 10px !important; margin: 0 !important; padding: 12px 16px !important; padding-bottom: calc( 12px + env( safe-area-inset-bottom ) ) !important; border-top: 1px solid #e5e7eb !important; background: #fff !important; } .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__apply-btn { flex: 1 1 auto !important; background: var( --if-fp-accent ) !important; border-color: var( --if-fp-accent ) !important; color: #fff !important; } .if-fp-sheet .if-fp-in-sheet .if-filter-sidebar__apply-btn:hover { filter: brightness( 0.94 ) !important; } /* ============================================================================ * Filter-UI in het paneel — nette rijen + eigen checkboxes (alles !important * zodat thema-styling het paneel niet binnenlekt). * ========================================================================== */ .if-fp-sheet .if-fp-in-sheet .if-filter { margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__title { margin: 0 0 4px !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #0f172a !important; text-transform: none !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__options, .if-fp-sheet .if-fp-in-sheet .if-filter__options-hidden { margin: 0 !important; padding: 0 !important; list-style: none !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__option { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 9px 8px !important; border: 0 !important; border-radius: 8px !important; cursor: pointer !important; transition: background 0.15s ease; } .if-fp-sheet .if-fp-in-sheet .if-filter__option:hover { background: #f1f5f9 !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__label { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; font-size: 15px !important; line-height: 1.3 !important; color: #1e293b !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__count { flex: 0 0 auto !important; margin: 0 !important; font-size: 13px !important; color: #94a3b8 !important; } /* Mooiere, eigen checkboxes. */ .if-fp-sheet .if-fp-in-sheet .if-filter__checkbox, .if-fp-sheet .if-fp-in-sheet .if-filter__option input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; flex: 0 0 auto !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; border: 2px solid #cbd5e1 !important; border-radius: 6px !important; background-color: #fff !important; background-image: none !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 14px 14px !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__checkbox:checked, .if-fp-sheet .if-fp-in-sheet .if-filter__option input[type="checkbox"]:checked { background-color: var( --if-fp-accent ) !important; border-color: var( --if-fp-accent ) !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M3.5%208.5l3%203%206-6.5'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__checkbox:focus-visible, .if-fp-sheet .if-fp-in-sheet .if-filter__option input[type="checkbox"]:focus-visible { outline: 2px solid var( --if-fp-accent ) !important; outline-offset: 2px !important; } /* "Meer..." / "Minder..."-knoppen. * Let op: GEEN display-regel — het thema toont/verbergt deze knoppen via een * inline display-style, dus die moeten we niet met !important overrulen. */ .if-fp-sheet .if-fp-in-sheet .if-filter__accordion-toggle { margin: 6px 0 0 !important; padding: 6px 8px !important; background: none !important; border: 0 !important; color: var( --if-fp-accent ) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; } .if-fp-sheet .if-fp-in-sheet .if-filter__accordion-toggle:hover { text-decoration: underline !important; } /* ------------------------------------------------------ Beweging uitschakelen */ @media ( prefers-reduced-motion: reduce ) { .if-fp-backdrop, .if-fp-sheet { transition: none !important; } }