.elementor-11251 .elementor-element.elementor-element-3dbf039{--display:flex;--min-height:35rem;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-11251 .elementor-element.elementor-element-8b21bad{width:100%;max-width:100%;}@media(min-width:769px){.elementor-11251 .elementor-element.elementor-element-3dbf039{--content-width:100%;}}/* Start custom CSS for container, class: .elementor-element-3dbf039 *//* 1. Woodmart dropdown: laat de beschikbare hoogte netjes doorlopen */
.wd-dropdown-menu.wd-design-full-width.wd-scroll .wd-dropdown-inner,
.wd-dropdown-menu.wd-design-full-width:not(.wd-scroll) {
  overflow: hidden !important;
}

/* 2. Hoogte-keten vanaf de dropdown naar Elementor */
.wd-dropdown-menu .wd-dropdown-inner .container.wd-entry-content,
.wd-dropdown-menu .wd-dropdown-inner .elementor.elementor-11248,
.wd-dropdown-menu .wd-dropdown-inner .elementor-element.elementor-element-37cf4b0,
.wd-dropdown-menu .wd-dropdown-inner .elementor-element.elementor-element-37cf4b0 > .e-con-inner,
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget.elementor-widget-lupi-filter-grid,
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget.elementor-widget-lupi-filter-grid > .elementor-widget-container {
  height: 100% !important;
  min-height: 0 !important;
}

/* 3. Zorg dat de relevante Elementor containers flex mogen gedragen */
.wd-dropdown-menu .wd-dropdown-inner .elementor-element.elementor-element-37cf4b0,
.wd-dropdown-menu .wd-dropdown-inner .elementor-element.elementor-element-37cf4b0 > .e-con-inner,
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget.elementor-widget-lupi-filter-grid,
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget.elementor-widget-lupi-filter-grid > .elementor-widget-container {
  display: flex !important;
  flex-direction: column !important;
}

/* 4. Het component zelf moet de beschikbare ruimte vullen */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  gap: var(--header-grid-spacing) !important;
}

/* 5. Header mag niet krimpen */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__header {
  flex: 0 0 auto !important;
}

/* 6. Wrapper moet alle resterende hoogte pakken */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* 7. Alleen de grid zelf mag scrollen */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 1rem !important;
  padding-bottom: 1.5rem !important;
}

/* 8. Pin de grid vast zodat items niet oprekken bij weinig resultaten */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  column-gap: var(--brand-grid-gap-col) !important;
  row-gap: var(--brand-grid-gap-row) !important;
  align-content: start !important;
  justify-content: stretch !important;
}

/* 9. Cards moeten altijd de volledige breedte van hun eigen grid cell pakken */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__card {
  width: 100% !important;
  min-width: 0 !important;
}

/* 10. Fade hoogte iets compacter maken zodat het effect geconcentreerder voelt */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid {
  --fade-width: 4rem !important;
}

/* 11. Zorg dat beide fades dezelfde hoogte gebruiken */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid-wrapper::before,
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid-wrapper::after {
  height: var(--fade-width) !important;
}

/* 12. Bovenste fade: wit naar transparant omlaag */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid-wrapper::before {
  top: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 28%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* 13. Onderste fade: net iets sterker zodat hij visueel beter aanwezig is */
.wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid-wrapper::after {
  bottom: 0 !important;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.96) 35%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* 14. Tablet: 4 kolommen */
@media (max-width: 1200px) {
  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 15. Mobiel: 2 kolommen + header onder elkaar */
@media (max-width: 768px) {
  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid a.lupi-filter-grid__card,
  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid article.lupi-filter-grid__card {
    aspect-ratio: 217 / 80 !important;
  }

  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__pills-wrapper::before,
  .wd-dropdown-menu .wd-dropdown-inner .elementor-widget-lupi-filter-grid .lupi-filter-grid__pills-wrapper::after {
    width: 1.5rem !important;
  }
}/* End custom CSS */