/* =============================
   buttons + link classes
============================= */
/*Default button*/
.default_button {
  background-color: var(--color-button-primary-background) !important;
  border-radius: 16px !important;
  border: 1px solid var(--color-button-primary-border) !important;
  border-bottom: 3px solid var(--color-button-primary-border) !important;
  padding: 0px 24px !important;
  width: 100% !important;
  height: 100%;
  text-align: left !important;
  white-space: normal;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  color: var(--color-button-primary-text);
  min-height: 50px;
  display: block;
  align-content: center;
  font-weight: bold;
  text-transform: uppercase;
}

.default_button_container .default_button {
  padding-right: 45px !important;
}

.form .default_button:not(.green) {
  background-color: var(--color-light-grey-background) !important;
  border-color: var(--color-border-default-light-grey) !important;
}

  .default_button i{
      float:right;
      font-size:18px;
  }

  .default_button.max_width_medium{
      max-width:300px;
  }

.default_button_container {
  min-width: 225px;
  position: relative;
  margin-top: 10px;
}
.default_button_container.nomargin {
  margin-top: unset;
}

  .default_button_container::after {
    content: "➜";
    color: var(--color-button-primary-text);
    top: 50%;
    right: 10px;
    position: absolute;
    font-size: 23px;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-in-out;
    pointer-events: none;
  }
  .default_button_container.email::after {
    content: url("/images/icons/email.svg");
  }
  .default_button_container.phone::after {
    content: url("/images/icons/phone.svg");
  }
  .default_button_container.whatsapp::after {
    content: url("/images/icons/whatsapp.svg");
  }
  .default_button_container.arrow_down::after {
    content: "⬇";
  }

  /* Hover effect */
.default_button:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  border-bottom: 4px solid var(--color-button-primary-border) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  color: var(--color-button-primary-text);
}
.form .default_button:not(.green):hover {
  filter: unset;
  transform: unset;
  border-bottom: unset;
  box-shadow: unset;
  cursor: unset;
}

.default_button_container:has(.default_button:hover)::after {
  transform: translate(-50%, -50%) translateX(6px) translateY(-2px);
}

  /* Active (klik gevoel) */
.default_button:active {
  transform: translateY(0px);
  border-bottom: 1px solid var(--color-button-primary-border) !important;
}

.default_button_container:active::after {
  transform: translate(-50%, -50%) translateX(6px) translateY(2px);
}

/*Ghost button*/
.default_button.ghost {
  background-color: var(--color-button-secundary-background) !important;
  border: 1px solid var(--color-button-secundary-border) !important;
  border-bottom: 3px solid var(--color-button-secundary-border) !important;
  color: var(--color-button-secundary-text);
  font-weight: 700;
}

.default_button_container:has(.ghost)::after {
  color: var(--color-button-secundary-text);
}

.default_link_button {
  border: 1px solid var(--color-border-default-soft) !important;
  border-radius: 16px;
  color: var(--color-text-highlight);
  padding: 16px 24px;
}
.default_link_button.heavy_black {
  color: var(--color-text);
  font-weight:bold;
}

.highlight_link_button {
  border: 1px solid var(--color-icon-background-border) !important;
  background: var(--color-button-secundary-background);
  font-weight: bold;
  border-radius: 8px;
  width: 100%;
  display: block;
  text-align: center;
  padding: 10px;
  min-height: 44px;
}

/* =============================
   flexcontainer classes
============================= */
.flexcontainer {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 93.6%;
  max-width: 1800px;
}

@media (min-width: 1200px) {
  .flexcontainer:has(.order_page) {
    width: 80%;
  }
  .order_page .flexcontainer {
    width: 80%;
  }
}
@media (max-width: 768px) {
  .flexcontainer:has(.order_page) {
    padding-top:70px !important;
  }
}

  .flexcontainer:before, .flexcontainer:after {
    content: " ";
    display: table;
  }

  .flexcontainer:after {
    clear: both;
  }

  @media (min-width: 1200px) {
    .flexcontainer {
      width: 92%;
    }
  }

  .flexcontainer.small {
    width: 65%;
  }

  .navbar.flexcontainer {
    max-width: 1960px;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }

@media(max-width: 768px) {
  .navbar .flexcontainer {
    width: 100%;
  }
}

  .flexcontainer.container-top {
    padding-top: 140px;
  }

  .flexcontainer .background_panel_white {
    position: relative;
    padding-top: 40px;
  }

    .flexcontainer .background_panel_white::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      background: var(--color-panel-highlight-background);
      border-top: 1px solid var(--color-panel-highlight-border);
      z-index: -1;
    }

  @media screen and (min-width: 768px) {
    .flexcontainer .background_panel_white.nodesktop {
      padding-top: 0px;
    }

      .flexcontainer .background_panel_white.nodesktop::before {
        content: "";
        width: 0vw;
        background: none;
        border-top: none;
      }
  }

  .flexbox {
    display: flex;
  }
  .flexbox_inline {
    display: inline-flex;
  }

    .flexbox .flexbox_item {
      flex: 0 0 auto;
    }
    .flexbox .flexbox_item_fixed_2 {
      flex: 2;
    }
    .flexbox .flexbox_item_fixed {
      flex: 1;
      min-width: 250px;
    }

    .flexbox .flex_align_left {
      margin-left: auto;
    }

.align_left {
  margin-top: 0px !important;
  float: left;
  margin-right: 10px;
}

  .flex_stretch {
    align-items: stretch;
    display: flex;
  }
  .flex_wrap {
    flex-wrap:wrap;
  }

  .flexbox.column {
    flex-direction: column;
  }

  @media (max-width: 768px) {
    .mobile_column {
      flex-direction: column;
    }
    .mobile_column_reverse {
      flex-direction: column-reverse;
    }
  }

.flexbox.vertical_center {
  justify-content: center;
  max-width: 100%;
}
  .flexbox.align_items_center {
    align-items: center;
  }
  .flexbox .height_fit_content {
    height: fit-content;
  }

  .flexbox.gap_small {
    gap: 8px;
  }

  .flexbox.gap_medium {
    gap: 16px;
  }
.flexbox.gap_large {
  column-gap: 80px;
}
.flexbox.gap_extra_large {
  column-gap: 140px;
}

.gap_extra_large.flexitem {
  flex: 0 0 calc(50% - 70px);
}

.flexbreak{
    flex-basis:100%;
}

  /* =============================
   container style classes
============================= */
  .container_basic {
    background: var(--color-panel-background);
    border-radius: 16px;
    border: 1px solid var(--color-panel-border-soft);
    padding: 40px;
  }

    .container_basic.grey_borders {
      border: 1px solid var(--color-border-default-light-grey);
    }

    .container_basic.padding_small {
      padding: 20px;
    }

    .container_basic.corners_medium {
      border-radius: 8px;
    }
    .container_basic.corners_none {
      border-radius: unset;
    }

  @media (max-width: 767.98px) {
    .container_basic.nomobile {
      background: none;
      border: none;
      padding: 0;
      border-radius: 0;
    }
  }

  .image_container_basic {
    float: left;
    display: flex;
    margin-right: 10px;
    width: 160px;
    justify-content: center;
    padding: 15px;
    height: 73px;
    border-radius: 8px;
  }

  .container_inside__basic {
    border: 1px solid var(--color-panel-highlight-border);
    background-color: var(--color-panel-highlight-background);
    border-radius: 3px;
    padding: 40px;
  }

    .container_inside__basic.padding_small {
      padding: 10px 20px;
    }
    .container_inside__basic.padding_medium {
      padding: 20px;
    }

  @media (max-width: 768px) {
    .container_inside__basic {
      padding: 20px;
    }

      .container_inside__basic.padding_small {
        padding: 5px;
        padding-left: 10px;
      }

      .container_inside__basic h2 {
        font-size: 18px;
      }
  }

  .container__aside__basic {
    background: var(--color-panel-background);
    border-left: 4px solid var(--color-panel-border-hard);
    padding: 10px;
    color: var(--color-text-highlight);
  }
    .container__aside__basic.padding_small {
      padding: 1px 20px;
    }

    .container__aside__basic.rounded_corners_left_medium {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    .container__aside__basic h4 {
      max-width: 280px;
    }

    .container__aside__basic h2 {
      font-size: 20px;
    }

    .container__aside__basic p {
      color: var(--color-text);
    }

  .sticky_container {
    position: sticky;
    top: 120px;
  }

  /* =============================
   helper classes
============================= */
  .flexbox_direction_column {
    display: flex;
    flex-direction: column;
  }

  .flexbox_align_right {
    margin-left: auto;
  }

  @media(max-width: 767.98px) {
    .desktop_only {
      display: none !important;
    }
  .flexbox_direction_mobile_column {
    display: flex;
    flex-direction: column;
  }
  }

  @media(min-width: 768px) {
    .mobile_only {
      display: none !important;
    }
  }

  @media(max-width: 768px) {
    .mobile_background_white {
      background-color: var(--color-panel-background);
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 4%;
    }
  }

.word_break {
  word-wrap: break-word;
}

.horizontol-swipe {
  overflow: auto;
}
/* =============================
   scaled margin classes
============================= */
@media (min-width: 767px) {
  .desktop-margin-top-large {
      margin-top: 80px;
    }

    .desktop-margin-top-medium {
      margin-top: 50px;
    }

    .desktop-margin-top-small {
      margin-top: 30px;
    }

    .desktop-margin-bottom-large {
      margin-bottom: 80px;
    }

    .desktop-margin-bottom-medium {
      margin-bottom: 50px;
    }
  }

  @media (max-width: 767px) {
    .mobile-margin-bottom-large {
      margin-bottom: 80px;
    }

    .mobile-margin-bottom-medium {
      margin-bottom: 50px;
    }

    .mobile-margin-bottom-small {
      margin-bottom: 30px;
    }

    .mobile-margin-top-large {
      margin-top: 80px;
    }

    .mobile-margin-top-medium {
      margin-top: 50px;
    }

    .mobile-margin-top-small {
      margin-top: 30px;
    }
  }

  /* =============================
   Review classes
============================= */
  .review_single_container {
    background-color: var(--color-panel-background);
    border-radius: 16px;
  }

  .review_container {
    display: flex;
    gap: 30px;
    align-items: stretch;
    width: 100%;
  }

    .review_container.single {
      display: block;
    }

  .review_info {
    flex: 0 0 260px;
  }

    .review_info.single .row {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .review_info.single {
      margin: 18px
    }

  .single .review_info {
    padding: 18px;
  }

  .review_info h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
  }

  .review_info p {
    color: var(--color-sub-text);
    margin-bottom: 15px;
  }

  .review_slider {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
  }

    .review_slider::-webkit-scrollbar {
      height: 6px;
    }

    .review_slider::-webkit-scrollbar-thumb {
      border-radius: 10px;
    }

  .review_card {
    flex: 10 0 340px;
    background: var(--color-grey-background);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    flex-direction: column;
    display: flex;
  }

  .white_bg .review_card {
    background: var(--color-panel-background);
  }

  .single .review_card {
    border-bottom: 1px solid var(--color-border-default-soft);
    padding: 18px 18px;
    flex-direction: column;
    display: flex;
    background-color: var(--color-panel-background);
    box-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

.review_stars {
  display: flex;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

  .review_star {
    width: 15px;
    height: 15px;
    background: #f7b500;
    clip-path: polygon( 50% 0%,61% 35%,98% 35%, 68% 57%,79% 91%,50% 70%, 21% 91%,32% 57%,2% 35%,39% 35% );
  }

    .review_star.off {
      background: #f7b50052;
    }

  .review_text {
    font-size: 18px;
    color: var(--color-text-highlight);
    margin-bottom: 32px;
  }

  .single .review_text {
    margin: 14px 0px;
  }

  .review_rating_total {
    min-width: 129px;
  }

  .review_score {
    font-weight: 700;
    margin-left: 10px;
  }

  .review_company {
    color: var(--color-sub-text);
    float: left;
  }

  .review_date {
    font-size: 13px;
    color: var(--color-muted-text);
    float: right;
  }

  .review_link {
    margin-left: 10px;
    float: left;
  }

  .single .review_link {
    font-size: 12px;
  }

  review_social_proofing {
    margin-top: 15px;
    display: flex;
  }

  .review_feedbackcompany {
    background-image: url(/images/feedbackcompany_logo.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain;
    width: 100%;
    height: 25px;
    margin-bottom: 10px;
    display: block;
  }

  .single .review_feedbackcompany {
    margin-bottom: 5px;
  }

  .review_feedbackcompany.inline {
    background-image: url(/images/icon_feedbackcompany.png) !important;
    width: 40px;
    float: left;
    margin-left: 15px;
    height: 40px;
  }

  .review_card_footer {
    margin-top: auto;
  }

  footer .review_column {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* =============================
   recently added classes
============================= */
  .Recently_Added-header {
    margin-bottom: 28px;
  }

  .Recently_Added-title {
    float: left;
    margin: 0;
    font-size: 34px;
    line-height: 2;
    font-weight: 700;
    color: var(--color-text);
  }
  .sold .Recently_Added-title {
    font-size: 20px
  }

  .Recently_Added-bottombutton:hover,
  .Recently_Added-bottombutton:focus,
  .Recently_Added-itemlink:hover,
  .Recently_Added-itemlink:focus {
    text-decoration: none;
  }

  .Recently_Added-topbutton-arrow,
  .Recently_Added-bottombutton-arrow {
    float: right;
    font-size: 32px;
    line-height: 1;
    margin-top: -4px;
  }

  .Recently_Added-slider {
    display: flex;
    gap: 28px;
    overflow: hidden;
  }

  .Recently_Added-sliderwrap {
    position: relative;
  }

  .Recently_Added-nav {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--color-border-default-light-grey);
    border-radius: 50%;
    background: var(--color-panel-background);
    color: var(--color-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  .Recently_Added-nav:hover,
  .Recently_Added-nav:focus {
    background: var(--color-grey-background);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  }

  .Recently_Added-nav--prev {
    left: -8px;
  }

  .Recently_Added-nav--next {
    right: -8px;
  }

  .Recently_Added-sliderwrap.is-scrollable .Recently_Added-nav {
    display: flex;
  }

  .Recently_Added-sliderwrap.at-start .Recently_Added-nav--prev {
    display: none;
  }

  .Recently_Added-sliderwrap.at-end .Recently_Added-nav--next {
    display: none;
  }

  .Recently_Added-item {
    flex: 0 0 calc(20% - 23px);
    min-width: 0;
  }

  .Recently_Added-itemlink {
    display: block;
    color: inherit;
  }

  .Recently_Added-imagewrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-grey-background);
    margin-bottom: 14px;
  }

  .Recently_Added-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .Recently_Added-itemtitle {
    min-height: 40px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-text);
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

.noprice .Recently_Added-itemtitle {
    padding-right: 35px;
    margin-bottom: 14px;
}

  .Recently_Added-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .Recently_Added-price {
    color: var(--default-color-homegreen);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
  }

  .Recently_Added-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-button-primary-background);
    color: var(--color-text-inverse);
    text-align: center;
    line-height: 27px;
    font-size: 20px;
    font-weight: 700;
    flex: 0 0 28px;
    margin-left: auto;
  }

  .Recently_Added-mobilebuttonwrap {
    display: none;
  }

  .noprice .Recently_Added-icon {
    margin-top: -80px;
  }

  @media (max-width: 1199px) {
    .Recently_Added-title {
      font-size: 30px;
    }

    .Recently_Added-itemtitle {
      font-size: 17px;
      min-height: 30px;
    }

    .Recently_Added-price {
      font-size: 20px;
    }
  }

  @media (max-width: 767px) {
    .Recently_Added-nav {
      display: none !important;
    }

    .Recently_Added {
      margin: 30px 0;
    }

    .Recently_Added-header {
      margin-bottom: 18px;
    }

    .Recently_Added-title {
      float: none;
      font-size: 20px;
      margin-bottom: 0;
    }

    .Recently_Added-topbutton {
      display: none;
    }

    .Recently_Added-slider {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      padding-bottom: 10px;
    }

      .Recently_Added-slider::-webkit-scrollbar {
        display: none;
      }

    .Recently_Added-item {
      flex: 0 0 265px;
      max-height: 385px;
    }

    .Recently_Added-itemtitle {
      min-height: 30px;
      font-size: 18px;
      line-height: 1.35;
      margin-bottom: 12px;
    }

    .Recently_Added-price {
      font-size: 20px;
    }

    .Recently_Added-mobilebuttonwrap {
      display: block;
    }
  }

.recently_added_always_scroll .Recently_Added-slider::-webkit-scrollbar {
  display: block !important;
  height: 5px;
  color: red !important;
  background-color: var(--color-icon-background-soft);
  z-index: 100;
  border-radius:5px;
}

.Recently_Added-slider::-webkit-scrollbar-thumb {
  background: var(--default-color-highlight);
}


.recently_added_always_scroll .Recently_Added {
  margin: 30px 0;
}

.recently_added_always_scroll .Recently_Added-header {
  margin-bottom: 18px;
}

.recently_added_always_scroll .Recently_Added-title {
  float: none;
  font-size: 20px;
  margin-bottom: 0;
}

.recently_added_always_scroll .Recently_Added-topbutton {
  display: none;
}

.recently_added_always_scroll .Recently_Added-slider {
  gap: 16px;
  padding-bottom: 10px;
  overflow-x: scroll;
}

.recently_added_always_scroll .Recently_Added-item {
  flex: 0 0 265px;
  max-height: 385px;
}

.recently_added_always_scroll .Recently_Added-itemtitle {
  min-height: 30px;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 12px;
}

.recently_added_always_scroll .Recently_Added-price {
  font-size: 20px;
}

.recently_added_always_scroll .Recently_Added-mobilebuttonwrap {
  display: block;
}

  /* =============================
   footer header classes
============================= */
  .footer_header_wrapper {
    background-color: var(--color-footer-highlight-background);
    min-height: 236px;
    display: flex;
    align-items: center;
  }

  .footer_header_row {
    display: flex;
  }

  .footer_right_container {
    margin-left: auto;
    align-items: center;
    display: flex;
    gap: 10px;
  }

    .footer_right_container h2 {
      font-size: 20px;
      margin-top: 0px;
      margin-bottom: 0px;
    }

  .footer_link_box {
    display: flex;
    flex-direction: row;
    background-color: var(--color-panel-background);
    padding: 8px;
    color: var(--color-text);
    gap: 10px;
    border-radius: 160px;
    text-align: center;
  }

  .footer_link_item {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
  }

    .footer_link_item a {
      color: var(--color-text);
    }

      .footer_link_item a:hover {
        filter: brightness(0.8);
      }

    .footer_link_item:not(:last-child)::after {
      content: "|";
      opacity: 0.4;
      float: right;
    }

  footer .copyright-and-service span > a:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
  }

  .footer_header_callcenter {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .footer_callcenter_number {
    font-size: 20px;
    margin-right: 10px;
  }

  footer .brand {
    position: relative;
  }

  .footer_header_logo {
    display: flex;
    align-items: center;
  }

  @media (max-width: 968px) {
    .footer_link_item {
      font-size: 14px;
    }
  }

  @media (max-width: 767px) {
    .footer_header_row {
      flex-direction: column;
    }

    .footer_header_logo {
      margin: 30px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer_right_container {
      justify-content: center;
      padding: 20px;
    }

    .footer_header_callcenter {
      padding: 20px 20px 0px 20px;
    }

    .footer_link_box {
      margin-top: 20px;
    }

    footer .left {
      position: relative;
    }

    footer .review_social_proofing {
      display: block !important;
    }
  }

  /* =============================
   icon classes
============================= */
  .title_with_icon {
    display: flex;
    gap: 8px;
  }

  p.title_with_icon {
    font-size: 16px;
  }

  .title_with_icon.center {
    justify-content: center;
  }

  .title_with_icon.grey {
    color: var(--color-sub-text);
  }

  .title_with_icon .offset_minus_25 {
    margin-top: -25px;
  }

  .icon_base {
    background-color: var(--color-icon-background);
    mask-size: contain;
    width: 35px;
  }

  .icon_button_container {
    border: 1px solid var(--color-icon-background-border);
    background-color: var(--color-icon-background-soft);
    padding: 8px;
    font-size: 24px
  }

  .icon_background {
    background-color: var(--default-color-green);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    padding: 5px;
    border-bottom: 2px solid var(--default-color-green);
  }
  /*tijdelijk overwrite helpdesk weet nog niet of ze ervoor klein of erachter groot mooier vinden*/
.icon_background {
  width: 17px;
  padding: 3px;
  height: 17px;
}

  a .icon_background {
    margin-top: -25px;
  }

  .icon_base.grey {
    background-color: var(--color-sub-text);
  }
.icon_base.green {
  background-color: var(--color-button-primary-background);
}

  .icon_base.white {
    background-color: var(--color-white-background);
  }

  .icon_search {
    mask: url("/images/icons/magnifier.svg") no-repeat center;
  }

.icon_lightbulb {
  mask: url("/images/icons/lightbulb.svg") no-repeat center;
}

  .icon_diagional_arrow_up {
    mask: url("/images/icons/diagonal-arrow-up.svg") no-repeat center;
    mask-size: contain !important;
  }

  .icon_share {
    mask: url("/images/icons/share.svg") no-repeat center;
    mask-size: contain !important;
  }

  .icon_camera {
    mask: url("/images/icons/camera.svg") no-repeat center;
    mask-size: contain !important;
  }

  .icon_google_maps {
    background-image: url("/images/icons/google_maps.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 43px;
  }

  /* =============================
   dropdown control classes
============================= */
  .details_dropdown summary {
    position: relative;
    cursor: pointer;
  }

    .details_dropdown summary::after {
      content: "";
      position: absolute;
      right: 0px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--color-text);
      border-bottom: 2px solid var(--color-text);
      transform: translate(-50%, -50%) rotate(-135deg);
      transform-origin: center;
      transition: transform 0.2s ease;
    }
.details_dropdown.small_arrow summary::after {
  left: 150px;
  width: 5px;
  height: 5px;
}

  .details_dropdown.white_icon summary::after {
    border-right: 2px solid var(--color-text-inverse);
    border-bottom: 2px solid var(--color-text-inverse);
  }

  .details_dropdown[open] summary::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .details_dropdown summary.collapsable-content-title::after {
    top: 12px;
  }

  .details_dropdown[open] summary.collapsable-content-title::after {
    top: 8px;
  }

  .details_dropdown h4 {
    margin-top: 0px;
  }

  @media screen and (min-width: 768px) {
    .details_dropdown.nodesktop summary {
      cursor: default;
    }

      .details_dropdown.nodesktop summary::after {
        position: unset;
        width: 0px;
        height: 0px;
        border: none;
      }
  }

  /* =============================
   slideshow timer control classes
============================= */
  .slideshow_timer {
    position: relative;
    overflow: hidden;
    background: var(--color-panel-background);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0, 114, 183, 0.08);
  }

  .smaller-navbar .slideshow_timer {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .navbar .slideshow_timer {
      padding: 5px;
      padding-left: 17px;
      border-radius: 0px;
    }
  }

  @media screen and (max-width: 1200px) {
    .slideshow_timer_items {
      min-height: 110px;
    }
  }

.slideshow_timer_items {
  position: relative;
  min-height: 70px;
  align-items: center;
  display: flex;
}

  .slideshow_timer_item {
    display: none;
    align-items: flex-start;
    gap: 14px;
  }

    .slideshow_timer_item.active {
      display: flex;
    }

  .slideshow_timer_icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-icon-background);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .slideshow_timer_text {
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-text);
  }

  .slideshow_timer_bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 100%;
    background: var(--default-color-highlight);
    transform-origin: left center;
    display:none; /* tijdelijk uitgeschakeld omdat mensen het als vervelend ervaren*/
  }

  /* =============================
   mobile filter panel control classes
============================= */
  @media (max-width: 767.98px) {
    #mobile-tab-1 {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 70%;
      z-index: 9999;
      background: var(--color-panel-background);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
      transform: translateY(100%);
      transition: transform .3s ease;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }

      #mobile-tab-1.filter-open {
        transform: translateY(0);
      }

      #mobile-tab-1::before {
        content: "";
        width: 84px;
        height: 4px;
        border-radius: 20px;
        background: var(--default-color-highlight);
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }

      #mobile-tab-1 > div:first-child {
        border-top: 1px solid var(--color-panel-background);
        margin-top: 20px;
        overflow-y: auto;
        scrollbar-width: none;
      }

      #mobile-tab-1 .nav-mobile-tabs-show-results {
        position: sticky;
        bottom: 0;
        background: var(--color-panel-background);
        padding: 15px;
        border-top: 1px solid var(--color-border-default-soft);
        z-index: 3;
      }

    body.filters-open {
      overflow: hidden;
    }
  }


  /* =============================
   snap carousel control
============================= */
  .snap_carousel_container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

    .snap_carousel_container.is-programmatic-scrolling {
      scroll-snap-type: none;
    }

  .snap_carousel_item {
    scroll-snap-align: start;
  }

  /* =============================
  title helper classes
============================= */
  .floating_badge {
    margin-top: -20px;
  }

    .floating_badge h1 {
      position: relative;
      padding-right: 100px;
    }

    .floating_badge span {
      position: absolute;
      top: -5px;
      right: 0;
      font-size: 16px;
      font-weight: bold;
    }

  @media (max-width: 767px) {
    .floating_badge span {
      margin-left: 10px;
      margin-top: 8px;
      top: unset;
      right: unset;
    }
  }

  .highlight_title {
    font-size: 24px;
    color: var(--color-text-highlight);
    font-weight: bold;
    line-height: 140%;
  }

    .highlight_title span {
      font-size: 14px;
      color: var(--color-text);
      font-weight: lighter;
      top: -10px;
      left: 5px;
      position: relative;
    }

  .badge {
    border: 1px solid var(--color-panel-border-hard);
    background-color: var(--color-icon-background-soft);
    color: var(--color-text-highlight);
    border-radius: 100px;
    padding: 2px 10px;
    margin-right: 5px;
  }
  /* =============================
  donor vehicle control classes
============================= */
  .donor_vehicle {
    display: flex;
  }

  @media (max-width: 767px) {
    .donor_vehicle {
      flex-direction: column;
    }
  }

.donor_vehicle img.donor {
  min-width: 40%;
  flex: 0 0 auto;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  margin-left: -20px;
  margin-top: -20px;
  margin-bottom: -20px;
}

  @media (max-width: 767px) {
    .donor_vehicle img.donor {
      border-top-right-radius: 16px;
      border-bottom-left-radius: 0px;
      min-width: calc(100% + 40px);
    }
  }

.donor_vehicle h1 {
  font-size: 28px;
  color: var(--color-text);
  line-height: 140%;
}

  @media (min-width: 767px) {
    .donor_vehicle a.default_button {
      max-height: 50px;
    }
  }

.donor_vehicle .flexbox {
  padding: 20px
}

/* =============================
  theme toggle control classes
============================= */
.navbar-theme-toggle {
  position: relative;
  margin-right: 10px;
}

.theme_toggle {
  font-size: 14px;
  margin-top: 20px;
  margin-right: 20px;
  height: 30px !important;
  border-radius: 100px;
  display: flex !important;
  text-decoration: none !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  cursor: pointer;
  transition: ease-in-out 0.3s;
}

.theme_toggle .theme_toggle_icon {
  font-size: 14px;
  line-height: 1;
}

.theme_toggle .theme_toggle_caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform ease-in-out 0.2s;
}

.navbar-theme-toggle.open .theme_toggle_caret {
  transform: rotate(180deg);
}

/* Simpele darkmode-knop (themakiezer uit): rond zoals voorheen op desktop. */
@media (min-width: 768px) {
  .theme_toggle--simple {
    width: 30px !important;
    padding: 0;
    gap: 0;
  }
}

.theme_toggle .badge {
  display: none;
}

.darkmode .theme_toggle .badge {
  display: block;
}

@media (min-width: 767px) {
  .theme_toggle:hover {
    background-color: var(--color-icon-background-hard) !important;
  }

  /* Alleen de originele darkmode-knop houdt een gevulde achtergrond als hij actief is.
     De themakiezer-trigger blijft transparant (alleen het icoon verkleurt). */
  .darkmode .theme_toggle--simple {
    background-color: var(--color-icon-background-hard) !important;
  }
}

/* Mee laten krimpen met de header bij het scrollen i.p.v. verbergen. */
@media (min-width: 768px) {
  .smaller-navbar .navbar-theme-toggle .theme_toggle {
    margin-top: 4px;
    height: 26px !important;
    font-size: 13px;
  }
}

/* ---- theme picker popover ---- */
.theme_menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 10px;
  min-width: 220px;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  background-color: var(--color-white-background);
  border: 1px solid var(--color-border-default-soft);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1050;
}

.navbar-theme-toggle.open .theme_menu {
  display: block;
}

.theme_menu_title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted-text);
  padding: 4px 10px 6px;
}

.theme_menu_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color ease-in-out 0.15s;
}

.theme_menu_item:hover,
.theme_menu_item.active {
  background-color: var(--color-light-grey-background);
}

.theme_swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-border-default-soft);
  flex: 0 0 auto;
}

.theme_menu_icon {
  width: 16px;
  text-align: center;
  color: var(--color-sub-text);
  flex: 0 0 auto;
}

.theme_menu_name {
  flex: 1 1 auto;
  font-size: 14px;
}

.theme_menu_check {
  font-size: 12px;
  color: var(--color-text-highlight);
  opacity: 0;
  flex: 0 0 auto;
}

.theme_menu_item.active .theme_menu_check {
  opacity: 1;
}

/* Secties (Modus / Accent) binnen de popover. */
.theme_menu_section + .theme_menu_section {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border-default-light-grey);
}

.theme_accent_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Segmented licht/donker-schakelaar. */
.theme_mode_switch {
  display: flex;
  gap: 6px;
  padding: 2px 4px 4px;
}

.theme_mode_item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid var(--color-border-default-light-grey);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
  transition: background-color ease-in-out 0.15s, border-color ease-in-out 0.15s;
}

.theme_mode_item:hover {
  background-color: var(--color-light-grey-background);
}

.theme_mode_item.active {
  border-color: var(--color-icon-background-border);
  background-color: var(--color-icon-background-soft);
  color: var(--color-text-highlight);
}

/* Op mobiel: opgaan in het uitklapmenu zodat de regels gelijk zijn aan de
   andere menu-items (50px hoog, witte tekst, #767676 scheidingslijn). */
@media (max-width: 767px) {

  /* Volle breedte (gelijk aan de andere menulijsten die margin:0 -15px gebruiken). */
  .navbar-theme-toggle {
    display: block;
    list-style: none;
    margin: 0 -15px;
  }

  /* Trigger = gewone menu-regel (zowel themakiezer als darkmode-knop). */
  .navbar-theme-toggle .theme_toggle {
    width: 100% !important;
    height: 50px !important;
    line-height: 50px;
    margin: 0;
    padding: 0 15px;
    gap: 10px;
    justify-content: flex-start;
    border-radius: 0;
    border-bottom: 1px solid #767676;
    color: #fff;
    font-weight: 600;
  }

  /* Pijltje rechts uitlijnen; draait mee bij openen. */
  .navbar-theme-toggle .theme_toggle_caret {
    margin-left: auto;
  }

  /* Themalijst klapt uit ónder de trigger (accordion): alleen zichtbaar als .open.
     Zichtbaarheid komt van de basis-regel .navbar-theme-toggle.open .theme_menu. */
  .navbar-theme-toggle .theme_menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .theme_menu_title {
    display: block;
    padding: 14px 15px 6px;
    color: rgba(255, 255, 255, 0.6);
  }

  .theme_menu_item {
    height: 50px;
    padding: 0 15px;
    gap: 12px;
    border-radius: 0;
    border-bottom: 1px solid #767676;
    color: #fff;
  }

  .theme_menu_item:hover,
  .theme_menu_item.active {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .theme_menu_icon,
  .theme_menu_check {
    color: #fff;
  }

  /* Modus-schakelaar past zich aan het donkere menupaneel aan. */
  .theme_menu_section + .theme_menu_section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .theme_mode_switch {
    padding: 8px 15px 12px;
  }

  .theme_mode_item {
    color: #fff;
    border-color: #767676;
    padding: 10px 6px;
  }

  .theme_mode_item:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .theme_mode_item.active {
    color: #fff;
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
  }
}