/******* Do not edit this file *******
Code Snippets Manager
Saved: Nov 18 2025 | 11:04:13 */
@charset "UTF-8";
/***********************************************************
  IDEEFABRIEK – Off-canvas filter (cart-matched styling)
***********************************************************/
.if-off-canvas-filter__content {
  /* Typography + form tokens */
  --filter-body: 16px;
  --filter-small: 13px;
  --filter-heading: 14px;
  --surface: #fff7f2;
  /* card bg (same as cart) */
  --accent:  #FBE4D6;
  /* peach accent (qty buttons) */
  --accent-strong:#f46b45;
  /* hover accent */
  --line:    #E9E9E9;
  --text:    #111827;
  --muted:   #6B7280;
  --radius:  14px;
  /* Checkbox (square + black fill) */
  --chk-size: 20px;
  --chk-radius: 0;
  /* << square */
  --chk-border:#D1D5DB;
  --chk-bg-checked:#000;
}
/* Container card look */
.if-off-canvas-filter__content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 16px 16px 18px;
  position: relative;
}
/* Close button – white chip (like cart remove) */
.if-off-canvas-filter__content .if-off-canvas-filter__close-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.2s, transform 0.05s, border-color 0.2s;
}
.if-off-canvas-filter__content .if-off-canvas-filter__close-toggle:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.if-off-canvas-filter__content .if-off-canvas-filter__close-toggle:hover i {
  color: #fff;
}
.if-off-canvas-filter__content .if-off-canvas-filter__close-toggle i {
  color: #333;
  font-size: 18px;
  line-height: 1;
}
/* Headings */
.if-off-canvas-filter__content .brxe-heading {
  margin: 1rem 0 0.6rem;
  font-size: var(--filter-heading) !important;
  font-weight: 700;
  color: var(--text);
}
/* Search Section Wrapper */
.if-off-canvas-filter__content .brxe-filter-search {
  position: relative;
  margin-bottom: 1rem;
  background: var(--accent);
  padding: 10px 12px;
  border-radius: var(--radius);
}
/* Search Input */
.if-off-canvas-filter__content .brxe-filter-search input[type="search"] {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: var(--filter-body) !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.if-off-canvas-filter__content .brxe-filter-search input::placeholder {
  color: var(--muted);
  opacity: 0.95;
}
.if-off-canvas-filter__content .brxe-filter-search::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%236B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><line x1="13" y1="13" x2="17" y2="17"/></svg>') no-repeat center/18px 18px;
}
.if-off-canvas-filter__content .brxe-filter-search input:focus {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
}
/* Checkbox list */
.if-off-canvas-filter__content .brxe-filter-checkbox {
  margin-bottom: 0.9rem;
}
.if-off-canvas-filter__content .brxe-filter-checkbox li {
  margin: 0.25rem 0;
}
.if-off-canvas-filter__content .brxe-filter-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  cursor: pointer;
  user-select: none;
  line-height: 1.22;
}
/* Hide native input visually (keep accessible) */
.if-off-canvas-filter__content .brxe-filter-checkbox input[type="checkbox"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  overflow: hidden;
  white-space: nowrap;
}
/* Text with space reserved for custom square */
.if-off-canvas-filter__content .brxe-filter-checkbox .brx-option-text {
  position: relative;
  padding-left: calc(var(--chk-size) + .6rem);
  font-size: var(--filter-body) !important;
  color: var(--text);
}
/* Square box */
.if-off-canvas-filter__content .brxe-filter-checkbox .brx-option-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--chk-size);
  height: var(--chk-size);
  border: 1.75px solid var(--chk-border);
  border-radius: var(--chk-radius);
  background: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
/* No checkmark overlay (solid fill look) */
.if-off-canvas-filter__content .brxe-filter-checkbox .brx-option-text::after {
  display: none !important;
}
/* Hover/focus ring */
.if-off-canvas-filter__content .brxe-filter-checkbox label:hover .brx-option-text::before {
  border-color: #bfc5cd;
}
.if-off-canvas-filter__content .brxe-filter-checkbox input[type="checkbox"]:focus-visible + .brx-option-text::before {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
}
/* Checked = solid black square */
.if-off-canvas-filter__content .brxe-filter-checkbox input[type="checkbox"]:checked + .brx-option-text::before {
  background: var(--chk-bg-checked);
  border-color: var(--chk-bg-checked);
}
/* Count pill — cart colors + a bit bolder */
.if-off-canvas-filter__content .brxe-filter-checkbox .brx-option-count {
  margin-left: 0.4rem;
  padding: 0.08rem 0.5rem;
  border-radius: 9999px;
  background: var(--accent);
  color: #5b463b;
  font-size: var(--filter-small) !important;
  font-weight: 600;
}
/* Range slider (Bricks double range) */
.if-off-canvas-filter__content .brxe-filter-range .double-slider-wrap {
  margin-top: 0.25rem;
}
.if-off-canvas-filter__content .brxe-filter-range .slider-wrap {
  position: relative;
  height: 16px;
}
.if-off-canvas-filter__content .brxe-filter-range .slider-base {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background: #fbe4d6;
  /* peach */
}
.if-off-canvas-filter__content .brxe-filter-range .slider-track {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background: var(--accent-strong);
}
.if-off-canvas-filter__content .brxe-filter-range .value-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: var(--text);
  font-size: var(--filter-body);
}
/* Native range inputs (thumbs) */
.if-off-canvas-filter__content .brxe-filter-range input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 16px;
  background: transparent;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}
.if-off-canvas-filter__content .brxe-filter-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.if-off-canvas-filter__content .brxe-filter-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-strong);
  cursor: pointer;
}
/***********************************************************
  FIX — restore Bricks off-canvas behavior (while keeping style)
***********************************************************/
.if-off-canvas-filter__content.brx-offcanvas-inner {
  position: fixed !important;
  top: 22px;
  left: 14px;
  bottom: 22px;
  right: auto !important;
  width: min(420px, 92vw);
  max-height: calc(100vh - 44px);
  box-sizing: border-box;
  background: var(--surface, #fff7f2);
  border-radius: var(--radius, 14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 18px 16px 22px;
  overflow: auto;
}
/* Keep page from scrolling while drawer is open */
body.brx-offcanvas-open {
  overflow: hidden;
}
/* Adjust close button for left side */
#brxe-lklhgu .if-off-canvas-filter__close-toggle {
  position: absolute !important;
  top: 14px;
  right: 14px;
}
/* Small screens: keep spacing touch-friendly */
@media (max-width: 640px) {
  .if-off-canvas-filter__content {
    padding: 14px 14px 16px;
  }
  .if-off-canvas-filter__content .brxe-filter-checkbox label {
    min-height: 42px;
  }
}
/***********************************************************
  1) Achtergrond-blur & dim wanneer off-canvas open is
***********************************************************/
/* Zet de overlay onder de drawer maar boven de pagina */
.if-off-canvas-filter__content.brx-offcanvas-inner {
  z-index: 9999;
}
/* drawer */
body.brx-offcanvas-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  /* licht dimmen + blur */
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* voorkom interactie met de pagina eronder */
  pointer-events: auto;
}
/***********************************************************
  2) Actieve filter “pills” met kleine remove (×) knop
     Markup (Bricks):
     <ul class="brxe-filter-active-filters">
       <li><button class="bricks-button sm" ...>Label</button></li>
     </ul>
***********************************************************/
.brxe-filter-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* ruimte tussen pills */
  margin: 10px 0 0;
  /* kleine offset onder de filterknop */
  padding: 0;
  list-style: none;
}
.brxe-filter-active-filters li {
  margin: 0;
}
/* Basis pill-styling in jouw palet */
.brxe-filter-active-filters .bricks-button.sm {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 36px 8px 12px;
  /* extra ruimte rechts voor het ×-icoon */
  border-radius: 9999px;
  background: #FBE4D6;
  /* peach */
  color: #2b2b2b;
  border: 1px solid #F3CDBE;
  /* subtiele rand */
  line-height: 1.1;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Het ronde ×-icoon */
.brxe-filter-active-filters .bricks-button.sm::after {
  content: "×";
  position: absolute;
  right: 8px;
  /* uitlijnen binnen de extra rechter padding */
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  /* wit chipje zoals in cart */
  color: #333;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #EAD7CF;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
  /* klik gaat naar de button zelf (die verwijdert) */
}
.brxe-filter-active-filters .bricks-button.sm:hover {
  background: #f7d4c3;
  border-color: #f2c2ae;
}
.brxe-filter-active-filters .bricks-button.sm:hover::after {
  background: #f46b45;
  /* jouw “accent-strong” */
  color: #fff;
  border-color: #f46b45;
}
/* Toetsenbord focus */
.brxe-filter-active-filters .bricks-button.sm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
/* Prevent pill text from sliding under the × chip */
.brxe-filter-active-filters .bricks-button.sm {
  padding-right: 48px !important;
  /* more room for the chip */
  white-space: nowrap;
  /* keep label on one line */
  box-sizing: border-box;
  min-height: 34px;
  /* keeps the chip nicely centered */
}
/* Slightly larger chip + a hair more spacing from the edge */
.brxe-filter-active-filters .bricks-button.sm::after {
  width: 24px;
  height: 24px;
  right: 10px;
  /* was 8px */
  font-size: 14px;
}
.ifbr-video-link, .woocommerce-product-gallery__image a[data-type="iframe"] {
  position: relative;
}
.ifbr-video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Add your circle/triangle styles here */
  pointer-events: none;
}