/* Import CSS files in order */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

/* Section */
.section-header:not(:last-child) {
  margin-bottom: var(--md);
}
@media (width < 1200px) {
  .section-header:not(:last-child) {
    margin-bottom: calc(var(--md) - var(--gutter-half));
  }
}

/* Section Gutters */
.section-gutter-xl {
  padding-top: var(--xl);
  padding-bottom: var(--xl);
}
.section-gutter-lg {
  padding-top: var(--lg);
  padding-bottom: var(--lg);
}
@media (width < 768px) {
  .section-gutter-xl {
    padding-top: calc(var(--xl) - var(--gutter));
    padding-bottom: calc(var(--xl) - var(--gutter));
  }
  .section-gutter-lg {
    padding-top: calc(var(--lg) - var(--gutter));
    padding-bottom: calc(var(--lg) - var(--gutter));
  }
}

/* Product */
.products-grid {
  display: grid;
  gap: var(--gutter-1);
}
.products-grid.grid-column-2 {
  grid-template-columns: repeat(2, 1fr);
}
.products-grid.grid-column-3 {
  grid-template-columns: repeat(3, 1fr);
}
.product {
  position: relative;
}
.product figure {
  /* Vierkant i.p.v. staand (0.734/1 in het ontwerp): de meeste foto's zijn liggend. */
  aspect-ratio: 1;
}
.product figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Kaart zonder afbeelding: effen achtergrond zodat de witte tekst leesbaar blijft. */
.product-figure-empty {
  background-color: var(--secondary-color);
}

.product-label {
  position: absolute;
  left: 0;
  top: 2.4rem;
  background-color: var(--white);
  padding: var(--gutter-xs) 1rem;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0 0.5rem;
}
.product-label p {
  font-size: 1.3rem;
  font-weight: 500;
}
.product-label svg {
  display: block;
}
.product-label svg path {
  stroke: var(--primary-color);
}
.product-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: var(--gutter-3);
  z-index: 2;
}
.product-content > :first-child:not(:last-child) {
  margin-bottom: var(--gutter-xs);
}
.product-content h4 {
  font-weight: 700;
}
.product-content h4,
.product-content p {
  color: var(--white);
}
.product-content .btn {
  margin-top: 1.6rem;
}
.product:hover .btn svg {
  transform: rotate(-45deg);
}
.product::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35%;
  background-color: red;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  opacity: 60%;
  transition: var(--transition);
  z-index: 1;
}
.product:hover::before {
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  opacity: 30%;
}
/* Kaarten-grid met tekstkleur "Donker": zwarte tekst op een lichte/effen
   afbeelding, zonder het donkere verloop. */
.products-grid-donker .product::before,
.products-grid-donker .product:hover::before {
  content: none;
}
.products-grid-donker .product-content h4,
.products-grid-donker .product-content p {
  color: var(--text-color);
}
@media (width < 1200px) {
  .products-grid.grid-column-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width < 768px) {
  .products-grid.grid-column-2 {
    grid-template-columns: 1fr;
  }
  .products-grid.grid-column-3 {
    grid-template-columns: 1fr;
  }
  .product-content {
    padding: var(--gutter);
  }
}

/* Article */
article h2:not(:last-child),
article h3:not(:last-child),
article h4:not(:last-child) {
  margin-bottom: var(--gutter-1);
}
article p:not(:last-child) {
  margin-bottom: var(--gutter-1);
}
article .btn:not(:first-child) {
  margin-top: var(--gutter-2);
}

/* How It Works */
.how-it-works {
  display: flex;
  gap: var(--gutter-3);
}
.how-it-works > * {
  flex: 1 0 0%;
}
.how-it-works > :first-child {
  max-width: 45.8rem;
}
.small-heading {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--primary-color);
  font-weight: 500;
  letter-spacing: 20%;
}
.small-heading.fs-xs {
  font-size: var(--fs-xs) !important;
  letter-spacing: 16%;
}
.small-heading:not(:last-child) {
  margin-bottom: var(--gutter-xs);
}
.how-it-works-tabs-content {
  padding: 4rem;
  background-color: var(--white);
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.how-it-works-tabs-content.active {
  display: block;
  opacity: 1;
}
.how-it-works-tabs-links:not(:last-child) {
  margin-bottom: var(--gutter-2);
}
.how-it-works-tabs-links {
  border-radius: 0.8rem;
  border: 0.1rem solid var(--secondary-color);
  padding: 0.4rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.how-it-works-tabs-links a {
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 3.7rem;
  line-height: 1;
  padding: 0 1.6rem;
  color: var(--text-color);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.how-it-works-tabs-links a.active {
  background-color: var(--secondary-color);
  color: var(--white);
}
.how-it-works-tabs-content .btn:not(:first-child) {
  margin-top: var(--gutter-3);
}
.how-it-works-tabs-content-headding {
  display: flex;
  align-items: center;
  gap: var(--gutter-1);
}
/* Vaste icoon-maat, ongeacht bronafmeting (img had alleen min-width). */
.how-it-works-tabs-content-headding span img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
.how-it-works-tabs-content-headding:not(:last-child) {
  margin-bottom: var(--gutter-2);
}
/* Ruimte tussen de wysiwyg-tekst en de puntenlijst/knop eronder. */
.how-it-works-tabs-content .entry-content:not(:last-child) {
  margin-bottom: var(--gutter-2);
}
.counter-list {
  counter-reset: step-counter;
}
.counter-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-xs);
  gap: 0 1.2rem;
  counter-increment: step-counter;
  position: relative;
  break-inside: avoid;
}
.counter-list li:not(:last-child) {
  margin-bottom: var(--gutter-1);
}
.counter-list li::before {
  content: counter(step-counter);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 100%;
  width: 2.8rem;
  aspect-ratio: 1;
  color: var(--primary-color);
  border: 0.1rem solid var(--primary-color);
  font-size: var(--fs-sm);
  font-weight: 500;
  flex-shrink: 0;
}
@media (width > 1199px) {
  .counter-list {
    display: column;
    column-count: 2;
    column-gap: var(--gutter-3);
  }
}
@media (width < 1200px) {
  .counter-list li {
    min-height: auto;
  }
}
@media (width < 992px) {
  .how-it-works > :first-child {
    max-width: 100%;
  }
  .how-it-works {
    flex-direction: column;
  }
}
@media (width < 768px) {
  .how-it-works-tabs-content {
    padding: var(--gutter);
  }
}

/* Logos */
.logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  min-width: 13rem;
}
.logos-slider .swiper-slide {
  width: auto;
}
.logos-slider.logos {
  display: block;
}
.logos-slider.logos .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (width > 1199px) {
  .logos-slider.logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-2) var(--lg);
  }
  .logos-slider .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gutter-2) var(--lg);
  }
}

/* Product Cards */
.product-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter-3) var(--gutter-1);
}
.product-card-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.product-card-images > * {
  position: relative;
}
.product-card-images figure {
  /* Vierkant i.p.v. staand (1/1.3 in het ontwerp): de meeste foto's zijn liggend. */
  aspect-ratio: 1;
}
.product-card-images figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.product-card-content {
  background-color: var(--white);
  padding: var(--gutter-2);
}
.product-card-content > :not(:last-child) {
  margin-bottom: 0.5rem;
}
.product-card-content p {
  font-size: var(--fs-xs);
  color: var(--text-color);
}
.product-card-content p:first-child {
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: var(--fs-lg);
}
.product-card-label {
  position: absolute;
  top: 1.2rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border-radius: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  min-width: 4.4rem;
  line-height: 1;
}
.product-card-label.before {
  background-color: rgba(var(--label-color-1-rgb), 60%);
  color: var(--white);
  left: 1.2rem;
}
.product-card-label.after {
  background-color: rgba(var(--white-rgb), 60%);
  color: var(--primary-color);
  right: 1.2rem;
}

.product-cards-slider .swiper-wrapper .swiper-slide {
  width: auto;
}
@media (width > 1199px) {
  .product-cards-slider {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-2) var(--lg);
  }
  .product-cards-slider .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-3) var(--gutter-1);
  }
}
@media (width < 1200px) {
  .product-card {
    width: 30rem;
  }
}

.video-frame {
  width: calc(46rem + ((100vw - var(--container-width-2)) / 2));
  margin-left: calc(((100vw - var(--container-width-2)) / 2) * -1);
  aspect-ratio: 1.36/1;
  position: relative;
}
.video-frame-section > .container > .grid {
  grid-template-columns: auto 1fr;
  width: 100%;
  max-width: var(--container-width-2);
  align-items: center;
  gap: calc(var(--sm) + 1.5rem);
}
.video-frame-section > .container > .grid > :last-child {
  padding: var(--lg) 0;
}
.video-frame button img {
  width: 6.3rem;
}
.video-frame video {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* YouTube-variant: iframe vult het frame net als de video. */
.video-frame iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Afbeelding-variant vult het frame net als de video. */
.video-frame > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kolommen omdraaien: media-blok rechts (full-bleed wisselt mee). Desktop. */
@media (width > 1300px) {
  .video-frame-swap > .container > .grid {
    grid-template-columns: 1fr auto;
  }
  .video-frame-swap > .container > .grid > :first-child {
    order: 2;
  }
  .video-frame-swap > .container > .grid > :last-child {
    order: 1;
  }
  .video-frame-swap .video-frame {
    margin-left: 0;
    margin-right: calc(((100vw - var(--container-width-2)) / 2) * -1);
  }
}
@media (width < 1301px) {
  .video-frame-section > .container > .grid {
    grid-template-columns: 1fr;
  }
  .video-frame {
    width: 100%;
    margin-left: 0;
  }
  .video-frame-section > .container > .grid > :last-child {
    padding: var(--gutter) 0;
  }
}
.video-frame {
  position: relative;
}
.video-frame button {
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 99;
  transition: opacity 0.2s ease;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.video-frame.playing button {
  display: none;
}
.video-frame.playing:hover button {
  display: grid;
}
/* Na het starten heeft YouTube zijn eigen bediening: onze knop blijft weg,
   óók bij hover (anders ligt hij over de speler en blokkeert hij kliks).
   Moet ná de hover-regel hierboven staan om die te overrulen; de knop wordt
   in custom.js bovendien helemaal verwijderd. */
.video-frame-youtube.playing button,
.video-frame-youtube.playing:hover button {
  display: none;
}

.video-frame button img.play {
  display: block;
}
.video-frame button img.pause {
  display: none;
}
.video-frame.playing button img.play {
  display: none;
}
.video-frame.playing button img.pause {
  display: block;
}

.video-frame button svg,
.video-frame button img {
  display: block;
}

.section-border-block:not(:last-child) {
  border-bottom: 0.1rem solid #dddddd;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-1);
}
.testimonial {
  background-color: var(--white);
  padding: var(--gutter);
  box-shadow: 0 0 1.8rem rgba(0, 0, 0, 6%);
}
.testimonial p {
  font-size: var(--fs-sm);
}
.testimonial p:last-child {
  margin-top: var(--gutter);
}
.testimonial .stars:not(:last-child) {
  margin-bottom: 1.2rem;
}
.italic {
  font-style: italic;
}
/* Reviews-sectie (ACF): Swiper zoals de andere sliders. */
.reviews-nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gutter-1);
}
/* Swiper verbergt pijlen/bolletjes met -lock zodra er niets te sliden is. */
.reviews-nav .swiper-button-lock {
  display: none;
}
.reviews-nav:has(.swiper-button-lock) {
  display: none;
}
.reviews-slider .swiper-wrapper.testimonials {
  display: flex; /* Swiper-wrapper: geen grid */
  gap: 0;
}
.reviews-slider .swiper-slide.testimonial {
  height: auto; /* gelijke kaarthoogte per rij */
}
.reviews-slider .swiper-pagination {
  position: static;
  margin-top: var(--gutter);
}
.reviews-slider .swiper-pagination.swiper-pagination-lock {
  display: none;
}
.reviews-sterren {
  color: var(--primary-color);
  letter-spacing: 0.1em;
}
@media (width < 992px) {
  .testimonials {
    grid-template-columns: 1fr;
  }
}

.white-box {
  background-color: var(--white);
  padding: 4.8rem;
  box-shadow: 0 0 1.8rem rgba(0, 0, 0, 6%);
}
@media (width < 1200px) {
  .white-box {
    padding: var(--gutter);
  }
}

.labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.bg-medium-green .small-heading {
  color: #5e534a !important;
}
.bg-medium-green .small-heading.primary {
  color: var(--primary-color) !important;
}
.gutter-lg-column {
  padding-top: var(--lg);
  padding-bottom: var(--lg);
}
.gutter-lg-column:last-child {
  padding-left: var(--gutter-4);
}

@media (width > 1299px) {
  .half-vw-images-lg-left {
    margin-left: calc(((100vw - var(--container-width-2)) / 2) * -1);
  }
}
@media (width < 1300px) {
  .half-vw-images-lg-left {
    margin-left: calc(var(--gutter) * -1);
  }
}
@media (width < 992px) {
  .half-vw-images-lg-left {
    margin-left: 0;
  }
}
@media (width < 992px) {
  .grid-column-lg-2 .gutter-lg-column:last-child {
    padding-left: 0;
  }
}

/* Kolommen omwisselen op desktop; mobiel/gestapeld blijft de natuurlijke volgorde. */
@media (width > 991px) {
  .cols-swap > :first-child {
    order: 2;
  }
  .cols-swap > :last-child {
    order: 1;
  }
  /* Na omdraaien staat de tekstkolom links en het beeld full-bleed rechts;
     de gutter moet dan mee naar de rechterzijde van de tekst. */
  .cols-swap .gutter-lg-column:last-child {
    padding-left: 0;
    padding-right: var(--gutter-4);
  }
}
@media (width > 1199px) {
  .cols-swap-xl > :first-child {
    order: 2;
  }
  .cols-swap-xl > :last-child {
    order: 1;
  }
}
/* Spiegel van half-vw-images-lg-left: full-bleed aan de rechterkant. */
@media (width > 1299px) {
  .half-vw-images-lg-right {
    margin-right: calc(((100vw - var(--container-width-2)) / 2) * -1);
  }
}
@media (width < 1300px) {
  .half-vw-images-lg-right {
    margin-right: calc(var(--gutter) * -1);
  }
}
@media (width < 992px) {
  .half-vw-images-lg-right {
    margin-right: 0;
  }
}

.border-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter-1);
}
.border-box {
  padding: 2rem;
  border: 0.1rem solid var(--medium-grey-color);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  transition: var(--transition);
  color: var(--text-color);
}
.border-box > :first-child {
  flex: 1 0 0%;
}
.border-box .small-heading,
.border-box article h5 {
  line-height: 1;
}
.border-box .small-heading:not(:last-child),
.border-box article h5:not(:last-child) {
  margin-bottom: 0.8rem;
}
.border-box.flex-column.align-items-start {
  align-items: flex-start;
}
.border-boxes .border-box.flex-column:hover .btn.btn-secondary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.border-boxes .border-box.flex-column:hover .btn.btn-secondary svg {
  transform: rotate(-45deg);
}
.border-boxes .border-box.flex-column:hover .btn.btn-o.btn-secondary {
  background: none;
  border-color: var(--secondary-color);
  color: var(--primary-color);
}
.border-boxes .border-box.flex-column:hover .btn.btn-o.btn-secondary svg {
  transform: rotate(-45deg);
}
.border-boxes .border-box.flex-column:hover .btn.btn-o.btn-secondary svg path {
  stroke: var(--primary-color);
}
.border-boxes .border-box.flex-column article .btn {
  margin-top: 0;
}

.circle-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  display: grid;
  place-items: center;
  transition: var(--transition);
}
.circle-icon.circle-icon-primary {
  background-color: var(--primary-color);
}
.circle-icon.circle-icon-primary svg path {
  stroke: var(--white);
}
.border-box .circle-icon.circle-icon-primary svg {
  transition: var(--transition);
}
.border-box:hover .circle-icon.circle-icon-primary {
  background-color: var(--secondary-color);
}
.border-box:hover .circle-icon.circle-icon-primary svg {
  transform: rotate(-45deg);
}
.border-box:hover {
  border-color: var(--primary-color);
  transform: translateY(-0.5rem);
  box-shadow: 0 0 1.8rem rgba(0, 0, 0, 6%);
}
@media (width < 768px) {
  .border-boxes {
    grid-template-columns: 1fr;
  }
}

footer {
  background-color: rgba(var(--secondary-color-rgb), 40%);
}
.footer-content {
  padding: calc(var(--xl) + 2rem) 0;
}
.footer-content .container {
  --container-width: 137.2rem;
}
.footer-content-grid {
  display: flex;
  gap: var(--lg);
}
.footer-content-grid > :last-child {
  flex: 1 0 0%;
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
}
.footer-content-grid > :last-child > * {
  width: 100%;
  max-width: 26rem;
}
.footer-content-grid > :first-child {
  max-width: 37rem;
}
.footer-content-grid > :first-child p {
  font-size: calc(var(--fs-md) - 0.1rem);
}
.footer-content-grid > :first-child > :not(:last-child) {
  margin-bottom: var(--gutter-1);
}
footer .small-heading {
  color: var(--text-color);
}
/* Social-media-icoontjes onder het logo/de tekst in de eerste footerkolom. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-social a {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid var(--text-color);
  border-radius: 50%;
  color: var(--text-color);
  transition: var(--transition);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background-color: var(--text-color);
  color: var(--white);
}
.footer-content-grid > :first-child .footer-reviews {
  font-size: var(--fs-sm);
}
.footer-reviews img {
  display: inline;
  vertical-align: -0.2rem;
}
/* Het lauwerkrans-icoon is wit (voor de donkere header-strip): hier donker maken. */
.footer-reviews img:first-child {
  filter: brightness(0);
  opacity: 0.85;
}
.footer-links li {
  display: flex;
}
.footer-links li:not(:last-child) {
  margin-bottom: var(--gutter-1);
}
.footer-links li a {
  line-height: 1.5;
  color: var(--text-color);
  font-size: calc(var(--font-size) - 0.1rem);
  display: flex;
  align-items: center;
  gap: 0 0.5rem;
  transition: var(--transition);
}
.footer-links li a svg {
  transition: var(--transition);
}
.footer-links li a:hover {
  color: var(--white);
}
.footer-links li a:hover svg path {
  stroke: var(--white);
}
.footer-links li.footer-link-extra {
  display: none;
}
.footer-links.expanded li.footer-link-extra {
  display: flex;
}
.footer-links.expanded .footer-toggle-more svg {
  transform: rotate(180deg);
}
.adress p {
  font-size: calc(var(--font-size) - 0.1rem);
  color: var(--text-color);
}
.adress p a {
  color: var(--text-color);
  text-decoration: none;
  transition: var(--transition);
}
.adress p a:hover {
  color: var(--white);
}
.adress li:not(:last-child) {
  margin-bottom: var(--gutter-1);
}
.adress li {
  display: flex;
  align-items: flex-start;
  gap: 0 0.8rem;
}
.adress li > :first-child {
  min-width: 1.6rem;
  max-width: 1.6rem;
}
.adress li > :first-child img {
  max-width: 100%;
}
@media (width < 1300px) {
  .footer-content-grid {
    gap: var(--gutter);
  }
  .footer-content-grid > :first-child {
    max-width: 28rem;
  }
}
@media (width < 1200px) {
  .footer-content {
    padding: var(--lg) 0;
  }
  .footer-content-grid {
    flex-direction: column;
  }
  .footer-content-grid > :first-child {
    max-width: 100%;
  }
}
@media (width < 768px) {
  .footer-content-grid > :last-child {
    flex-direction: column;
  }
}
.copyright:not(:first-child) {
  border-top: 0.1rem solid rgba(var(--secondary-color-rgb), 40%);
}
.copyright {
  padding: var(--gutter) 0;
}
.copyright .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter-half);
}
.copyright p {
  font-size: calc(var(--fs-md) - 0.2rem);
  color: var(--text-color);
}
.copyright p a {
  color: var(--text-color);
  transition: var(--transition);
}
.copyright p a:hover {
  color: var(--white);
}
.other-links {
  display: flex;
  align-items: center;
  gap: 1rem var(--gutter);
}
.other-links li {
  display: flex;
  align-items: center;
}
.other-links li a {
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: calc(var(--fs-md) - 0.2rem);
  color: var(--text-color);
  transition: var(--transition);
}
.other-links li a:hover {
  color: var(--white);
}

/* Hero Section */
.hero-section {
  padding: calc(var(--xl) + 2rem) 0;
  background-color: var(--medium-green);
}
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6.4rem;
}
.hero-grid .hero-grid-content {
  max-width: 67.5rem;
}
.hero-grid .hero-grid-image {
  max-width: 68.9rem;
}
.hero-grid .small-heading {
  font-size: var(--fs-md);
}
.hero-grid article h1 {
  color: var(--text-color);
}
.hero-grid article h6:not(:first-child) {
  margin-top: 1rem;
}
.hero-buttons {
  position: relative;
}
.hero-grid article .hero-buttons:not(:first-child) {
  margin-top: var(--gutter);
}
.hero-grid article .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter-half);
}
.hero-grid article .buttons .btn {
  margin: 0;
  display: flex;
  flex: 1 0 0%;
  max-width: 24.6rem;
  height: var(--btn-lg-height);
  white-space: nowrap;
}
.hero-grid article .hero-buttons p {
  font-size: 3rem;
  font-family: "Caveat", cursive;
  position: absolute;
  left: 80%;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0 0.5rem;
}
.hero-grid article .hero-buttons p img {
  transform: translateY(100%);
}
.hero-grid .hero-grid-image figure + p {
  font-size: 3rem;
  font-family: "Caveat", cursive;
}

@media (width < 1300px) {
  .hero-section {
    padding: var(--lg) 0;
  }
  .hero-grid {
    gap: var(--gutter);
  }
  .hero-grid .hero-grid-content {
    max-width: 50rem;
  }
  .hero-grid article .hero-buttons p {
    left: 100%;
  }
}
@media (width > 1199px) {
  .order-xl-2 {
    order: 2;
  }
  .hero-grid .hero-grid-image figure + p {
    display: none;
  }
}
@media (width < 1200px) {
  .hero-grid {
    flex-direction: column;
    text-align: center;
  }
  .hero-grid article .buttons {
    justify-content: center;
  }
  .hero-grid .hero-grid-content,
  .hero-grid .hero-grid-image {
    width: 100%;
    max-width: 100%;
  }
  .hero-grid article .hero-buttons p {
    position: static;
    transform: none;
    text-align: center;
    justify-content: center;
    margin-top: 1rem;
    font-size: var(--h6);
    display: none;
  }
  .hero-grid .hero-grid-image figure + p {
    font-size: var(--h6);
    text-align: center;
  }
  .hero-grid article .hero-buttons p img {
    display: none;
  }
}
@media (width < 768px) {
  .hero-section {
    padding: var(--md) 0;
  }
}

/* Header */
:root {
  --header-height: 13.2rem;
}
@media (width < 1200px) {
  :root {
    --header-height: 9rem;
  }
}
header {
  background-color: var(--white);
  height: var(--header-height);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}
header + * {
  margin-top: var(--header-height);
}
header.header-scrolled {
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 20%);
}
.header-strip {
  height: 3.8rem;
  background-color: var(--secondary-color);
}
.header-content {
  flex: 1 0 0%;
  display: flex;
}
.header-strip .container,
.header-content .conatiner {
  height: 100%;
}
.header-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-strip .container p {
  color: var(--white);
  font-size: var(--fs-sm);
}
.header-content .container {
  display: flex;
}
.header-content .container .logo {
  flex: 1 0 0%;
}
.logo {
  display: flex;
  align-self: center;
}
.logo a {
  display: flex;
}
.logo a img {
  display: block;
  max-width: 23.4rem;
}

.burger {
  align-self: center;
}
nav > ul > li > a {
  font-size: calc(var(--fs-md) - 0.1rem);
  display: flex;
  align-items: center;
  gap: 0 0.4rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-color);
  padding: 0 var(--gutter-1);
  height: 3.7rem;
}
nav > ul > li > a svg {
  display: block;
  width: 0.8rem;
  min-width: 1rem;
}
nav > ul > li > a svg path {
  fill: var(--text-color);
}
nav > ul > li > a.button {
  background-color: var(--secondary-color);
  color: var(--white);
}
nav > ul > li > a.button:hover {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}
@media (width < 1500px) {
  nav > ul > li > a:not(.button) {
    padding: 0 0.5rem;
  }
}
@media (width < 1400px) {
  .logo a img {
    max-width: 18rem;
  }
}
@media (width < 1300px) {
  nav > ul > li > a {
    font-size: var(--fs-sm);
  }
  nav > ul > li > a:not(.button) {
    padding: 0 0.2rem;
  }
}
@media (width > 1199px) {
  nav > ul {
    display: flex;
    gap: 0 1rem;
    height: 100%;
  }
  nav > ul > li {
    display: flex;
    align-items: center;
  }
  nav > ul > li > a.button {
    border-radius: 4rem;
  }
  nav > ul > li > a {
    justify-content: center;
    border: 0.1rem solid transparent;
    border-radius: 4rem;
    transition: var(--transition);
  }
  nav > ul > li:hover > a,
  nav > ul > li > a:hover {
    border: 0.1rem solid var(--secondary-color);
    color: var(--primary-color);
  }
  nav > ul > li:hover a svg path,
  nav > ul > li > a:hover svg path {
    fill: var(--primary-color);
  }
  nav > ul > li:hover > a svg path,
  nav > ul > li:hover > a {
    border: 0.1rem solid var(--secondary-color);
    color: var(--primary-color);
  }
}
@media (width < 1200px) {
  /* Alleen de menu-nav in de header verbergen; de breadcrumb (.pagination)
     is óók een <nav>, dus de selectors hier zijn naar `header nav` gescoped
     zodat het kruimelpad op mobile zichtbaar blijft. */
  header nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
  }
  header nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  header nav {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: var(--white);
    border-top: 0.1rem solid rgba(var(--secondary-color-rgb), 10%);
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  nav > ul > li > a {
    padding: 0 var(--gutter) !important;
    height: 4.2rem;
    transition: var(--transition);
    position: relative;
    pointer-events: auto;
  }
  nav > ul > li > a > .toggle-icon{pointer-events: auto;}
  nav > ul > li > a:not(.button):hover {
    background-color: #eeeeee;
  }
  nav > ul > li > a > :first-child {
    flex: 1 0 0%;
  }
  nav > ul > li > a > :last-child {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background-color: var(--primary-color);
  }
  nav > ul > li > a > :last-child svg path {
    fill: var(--white);
  }
  nav > ul > li:not(:last-child) {
    border-bottom: 0.1rem solid #eeeeee;
  }
  .header-strip {
    height: 3rem;
  }
  .header-strip .container p {
    font-size: calc(var(--fs-sm) - 0.2rem);
  }
}

.mega-menu {
  background-color: var(--white);
  padding: var(--md) 0;
}
.mega-menu-grid {
  display: flex;
  gap: var(--gutter);
  width: 100%;
}
/* Linkkolommen krijgen voorrang op breedte; het ad-blok houdt een vaste,
   bescheiden breedte zodat het bij weinig links niet dominant wordt. */
.mega-menu-grid > .flex-1 {
  flex-grow: 2;
}
.mega-menu-grid > .mega-menu-ad-col {
  flex: 0 1 30rem;
  max-width: 30rem;
}
/* Compacte (korte) linkkolom: één kolom, maar groeit mee in de vrije ruimte
   zodat de weinige links meer ademruimte krijgen i.p.v. het ad-blok. */
.mega-menu-grid > .mega-menu-col-compact {
  flex: 1 1 auto;
}
.mega-menu-col-compact .mega-menu-links {
  column-count: 1;
  column-width: auto;
}
/* Aantal subkolommen afgestemd op de lijstlengte (door de walker gezet). */
.mega-menu-cols-2 .mega-menu-links {
  column-count: 2;
  column-width: auto;
}
.mega-menu-cols-3 .mega-menu-links {
  column-count: 3;
  column-width: auto;
}
.mega-menu-sml-headding:not(:last-child) {
  margin-bottom: var(--gutter-2);
}
.mega-menu-sml-headding {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: #888888;
  letter-spacing: 20%;
}
.mega-menu-grid > .mega-menu-main-menu-wrap > ul > li:not(:last-child) {
  margin-bottom: 2rem;
}
.mega-menu-grid > .mega-menu-main-menu-wrap > ul > li {
  display: flex;
  align-items: center;
}
.mega-menu-grid > .mega-menu-main-menu-wrap > ul > li > a {
  font-size: var(--h6);
  font-weight: 700;
  font-family: var(--secondary-font);
  color: var(--text-color);
  display: flex;
  line-height: 1;
  transition: var(--transition);
  white-space: nowrap;
}
.mega-menu-grid > .mega-menu-main-menu-wrap > ul > li > a:hover {
  color: var(--primary-color);
}
/* Kolombreedtes worden door de walker bepaald (flex-1 / mega-menu-col-compact). */
@media (width > 1199px) {
  .mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-top: 0.1rem solid #eeeeee;
  }
  .mega-menu-grid > .mega-menu-main-menu-wrap {
    flex: 1 0 0%;
    max-width: 21.4rem;
  }
  .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .mega-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (width < 1200px) {
  .mega-menu {
    padding: var(--gutter) 0;
    display: none;
  }
  .mega-menu.active {
    display: block;
  }
}
.mega-menu-links {
  column-width: 19rem;
  column-count: 3;
  column-gap: var(--gutter-3);
}
.mega-menu-links li {
  display: flex;
  break-inside: avoid;
}
.mega-menu-links li {
  border-bottom: 0.1rem solid #eeeeee;
}
.mega-menu-links li a {
  flex: 1 0 0%;
  display: flex;
  align-items: center;
  height: 4.6rem;
  font-size: var(--fs-sm);
  color: var(--text-color);
  transition: var(--transition);
  padding-right: 2rem;
  line-height: 1.1;
}
.mega-menu-links li:hover {
  border-color: var(--primary-color);
  background: url("../images/mega-menu-arrow-right.svg") right center no-repeat;
}
.mega-menu-links li:hover,
.mega-menu-links li a:hover {
  color: var(--primary-color);
}
@media (width < 1200px) {
  .mega-menu-links {
    column-count: 2;
  }
}
.mega-menu-ad {
  padding: var(--gutter);
  background-color: var(--primary-medium-color);
  height: 100%;
}
.mega-menu-ad p:not(:last-child) {
  margin-bottom: 0.8rem;
}
.mega-menu-ad .btn:not(:first-child) {
  margin-top: 1rem;
}
.mega-menu-ad .btn.btn-white {
  color: var(--primary-color);
}
.mega-menu-ad .btn.btn-white:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}
@media (width < 1200px) {
  .mega-menu-ad {
    padding: var(--gutter-half);
    max-width: 28rem;
  }
  .mega-menu-ad .btn:not(:first-child) {
    margin-top: 0.5rem;
  }
}

@media (width < 992px) {
  .mega-menu {
    padding-top: var(--gutter-half);
  }
  .mega-menu-grid {
    flex-direction: column;
  }
  .mega-menu-links {
    column-count: 3;
    column-gap: var(--gutter-half);
  }
  .mega-menu-grid > .mega-menu-main-menu-wrap > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-half) 0;
  }
  .mega-menu-grid > .mega-menu-main-menu-wrap > ul > li:not(:last-child) {
    margin-bottom: 0;
  }
  .mega-menu-sml-headding:not(:last-child) {
    margin-bottom: var(--gutter-half);
  }
  .mega-menu-links li a {
    height: 3.8rem;
    font-size: var(--fs-xs);
  }
  .mega-menu-ad {
    max-width: 100%;
  }
}
@media (width < 576px) {
  .mega-menu-links {
    column-count: 2;
  }
}

/* Number Tabs */
.steps-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  counter-reset: stepsTbs;
}
.steps-tabs:not(:last-child) {
  margin-bottom: var(--gutter-half);
}
.steps-tabs li {
  display: flex;
}
.steps-tabs li a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #bbb;
  line-height: 1;
  position: relative;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.steps-tabs li a::before {
  counter-increment: stepsTbs;
  content: counter(stepsTbs);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  border: 0.1rem solid #bbb;
  display: grid;
  place-items: center;
  margin-right: 0.8rem;
}
.steps-tabs li:not(:last-child) a::after {
  width: 3.3rem;
  height: 0.1rem;
  content: "";
  background-color: #bbb;
  margin-left: 1rem;
}
.steps-tabs li.active a {
  color: var(--text-color);
}
.steps-tabs li.active a::before {
  border-color: var(--text-color);
}
.steps-tabs li.completed a {
  color: var(--secondary-color);
}
.steps-tabs li.completed a::before {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white);
}
.steps-tabs li.completed:not(:last-child) a::after {
  background-color: var(--secondary-color);
}
.steps-tabs-content-container {
  background-color: var(--light-grey-color);
  padding: var(--sm);
}
.steps-tabs-content-container .steps-tabs-content {
  display: none;
}
.steps-tabs-content-container .steps-tabs-content.active {
  display: block;
}
.steps-tabs-content-container:not(:last-child) {
  margin-bottom: var(--gutter-half);
}
.steps-tabs-content-header:not(:last-child) {
  margin-bottom: var(--gutter);
}
.steps-tabs-content-header h4 {
  font-weight: 500;
}
.steps-tabs-content-header h4:not(:last-child) {
  margin-bottom: 1rem;
}
.box-logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.4rem;
}

.box-logo label {
  aspect-ratio: 1.5/1;
  background-color: var(--white);
  padding: 0.8rem var(--gutter-half);
  display: grid;
  place-items: center;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 6%);
  transition: var(--transition);
  border: 0.2rem solid transparent;
  position: relative;
}
.box-logo label::after {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  background: url("../images/check-white.png") center center no-repeat
    var(--primary-color);
  content: "";
  opacity: 0;
  visibility: hidden;
}
.box-logo input {
  display: none;
}
.box-logo input:checked ~ label::after {
  opacity: 1;
  visibility: visible;
}

.box-logo:hover label,
.box-logo input:checked ~ label {
  box-shadow: none;
  border: 0.2rem solid var(--secondary-color);
}
.tabs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter-half);
}
@media (width < 1400px) {
  .box-logos {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (width < 1200px) {
  .box-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (width < 992px) {
  .box-logos {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width < 768px) {
  .steps-tabs-content-header h4:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  .steps-tabs-content-container {
    padding: var(--gutter) var(--gutter-half);
  }
  .box-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.box-detail-logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gutter-1);
}
.box-detail-logo {
  background-color: var(--white);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 6%);
  padding: 0 var(--gutter-1);
  transition: var(--transition);
  border: 0.1rem solid transparent;
}
.box-detail-logo svg {
  transition: var(--transition);
}
.box-detail-logo:hover {
  box-shadow: none;
  border: 0.1rem solid var(--secondary-color);
  transform: translateY(-0.3rem);
}
.box-detail-logo figure {
  aspect-ratio: 1.79/1;
  display: grid;
  place-items: center;
}
.box-detail-logo figure img {
  max-width: 80%;
  max-height: 80%;
}
.box-detail-logo-content {
  padding: 0.8rem 0;
  border-top: 0.1rem solid #eee;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.box-detail-logo-content p {
  font-size: var(--fs-xs);
  line-height: 1.1;
  color: var(--text-color);
  flex: 1 0 0%;
}
.arrow-icon {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  display: grid;
  place-items: center;
}
.arrow-icon.secondary {
  background-color: var(--secondary-color);
}
.arrow-icon.secondary svg {
  display: block;
}
.box-detail-logo:hover .arrow-icon.secondary {
  background-color: var(--primary-color);
}
.box-detail-logo:hover svg {
  transform: rotate(-25deg);
}
@media (width < 1400px) {
  .box-detail-logos {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (width < 1200px) {
  .box-detail-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (width < 992px) {
  .box-detail-logos {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width < 768px) {
  .box-detail-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.simple-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter-1);
  counter-reset: step-counter;
}
.simple-steps li {
  padding: var(--gutter-2);
  background-color: var(--white);
  counter-increment: step-counter;
}
/* Stapcijfer als rond label vóór de titel (cijfer + titel op één regel). */
.simple-steps li h5::before {
  content: counter(step-counter);
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  border: 0.1rem solid var(--primary-color);
  display: grid;
  place-items: center;
  border-radius: 100%;
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--primary-color);
}
.simple-steps li h5 {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--gutter-1);
}
.simple-steps li h5:not(:last-child) {
  margin-bottom: 0.8rem;
}
.simple-steps li p {
  font-size: var(--fs-sm);
}
@media (width < 1200px) {
  .simple-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width < 992px) {
  .simple-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width < 576px) {
  .simple-steps {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.article-section .container {
  display: flex;
}

.article-section.article-left figure img,
.article-section.article-right figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.article-section-content {
  width: 60%;
  padding: var(--lg) 0;
}
.article-section.article-right .article-section-content {
  padding-right: var(--xl);
}
.article-section.article-left .article-section-content {
  padding-left: var(--md);
}

@media (width < 1200px) {
  .article-section.article-right .article-section-content {
    padding-right: var(--gutter);
  }
  .article-section.article-left .article-section-content {
    padding-left: var(--gutter);
  }
}
@media (width > 1499px) {
  .article-section.article-right figure {
    margin-right: calc(((100vw - var(--container-width)) / 2) * -1);
  }
  .article-section.article-left figure {
    margin-left: calc(((100vw - var(--container-width)) / 2) * -1);
  }
}
@media (width < 1500px) {
  .article-section.article-right figure {
    margin-right: calc(var(--gutter) * -1);
  }
  .article-section.article-left figure {
    margin-left: calc(var(--gutter) * -1);
  }
}
@media (width > 991px) {
  .article-section.article-right figure {
    order: 2;
  }
}
@media (width < 992px) {
  .article-section .container {
    flex-direction: column;
  }
  .article-section.article-right figure {
    padding-top: var(--md);
    margin: 0;
  }
  .article-section.article-left figure {
    padding-top: var(--md);
    margin: 0;
  }
  .article-section.article-right .article-section-content {
    padding: var(--md) 0;
    width: 100%;
  }
  .article-section.article-left .article-section-content {
    padding: var(--md) 0;
    width: 100%;
  }
}

.article-counts {
  margin-top: var(--gutter-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter) var(--gutter-half);
}
.article-counts {
  border-top: 0.1rem solid var(--medium-grey-color);
  padding-top: var(--gutter-2);
}
.article-counts h4 {
  font-weight: 500;
  color: var(--primary-color);
}
.article-counts h4:not(:last-child) {
  margin-bottom: 0.5rem;
}
.article-counts p {
  font-size: var(--fs-sm);
}
@media (width < 576px) {
  .article-counts {
    grid-template-columns: 1fr;
  }
}

.model-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.model-links > * {
  min-width: 19.8rem;
  height: 3.7rem;
  padding: 0 1.6rem;
  border: 0.1rem solid rgba(0, 0, 0, 20%);
  border-radius: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  line-height: 1;
  font-size: var(--fs-sm);
  color: var(--text-color);
  transition: var(--transition);
}
.model-links > * > svg {
  display: block;
  transition: var(--transition);
}
.model-links > * > :last-child {
  flex-shrink: 0;
}
.model-links > :hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white);
}
.model-links > :hover svg {
  transform: rotate(-45deg);
}
.model-links > :hover svg path {
  stroke: var(--white);
}
@media (width < 1200px) {
  .model-links > * {
    min-width: auto;
  }
}

.material-header:not(:last-child) {
  margin-bottom: 1.6rem;
}
.material-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem var(--gutter);
  justify-content: space-between;
}
.material-header .flex {
  display: flex;
  align-items: center;
  gap: 1rem 1.6rem;
}
.slider-arrows {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.slider-arrows > * {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 100%;
  display: grid;
  place-items: center;
  border: 0.1rem solid var(--medium-grey-color);
  transition: var(--transition);
  cursor: pointer;
}
.slider-arrows > :hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.slider-arrows > :hover > svg path {
  stroke: var(--white);
}
.material-item:not(:last-child) {
  margin-bottom: var(--gutter-2);
}
.material-item figure:not(:last-child) {
  margin-bottom: 0.8rem;
}
.material-item figure {
  border-radius: 0.8rem;
  overflow: hidden;
  width: 10rem;
  aspect-ratio: 1;
}
.material-item figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.material-slider .swiper-slide {
  width: auto;
}
.material-slider-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gutter-3);
}
.material-slider-grid > * {
  min-width: 0;
}
@media (width < 1200px) {
  .material-slider-grid {
    grid-template-columns: 1fr;
  }
}
.material-slider-wrapper {
  overflow: hidden;
  margin-right: calc(((100vw - var(--container-width)) / 2) * -1);
}
@media (width < 1500px) {
  .material-slider-wrapper {
    margin-right: calc(var(--gutter) * -1);
  }
}
.material-slider-wrapper {
  position: relative;
}
.material-slider-wrapper .swiper-pagination {
  position: static;
  margin-top: var(--gutter);
}
.swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.swiper-pagination > .swiper-pagination-bullet {
  margin: 0 !important;
  width: 1.2rem;
  height: 1.2rem;
  background: none;
  border: 0.1rem solid var(--secondary-color);
  opacity: 1;
}
.swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--secondary-color);
}

.box-shadow-16 {
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 6%);
}
.product-two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

@media (width > 1199px) {
  .hero-section.position-relative {
    isolation: isolate;
  }
  .hero-section.position-relative figure {
    position: absolute;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: -1;
  }
  .hero-section.position-relative figure img {
    width: 100%;
    height: auto;
  }
}

.pagination {
  position: fixed;
  left: 0;
  top: var(--header-height);
  width: 100%;
  z-index: 99;
  padding: var(--gutter) 0;
  transition: var(--transition);
}
.pagination.active{background-color: var(--white); box-shadow: 0 0 .3rem rgba(0,0,0,20%); padding: var(--gutter-half) 0;}
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pagination ul{margin: 0 -1rem;}

.pagination ul li,
.pagination ul li a {
  white-space: nowrap;
  font-size: 1rem; letter-spacing: 20%; text-transform: uppercase;
  color: var(--text-color-20);
}
.pagination ul li{padding: 0 1rem; color: var(--text-color); position: relative;}
.pagination ul li:not(:last-child)::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(25deg); width: .1rem; height: 100%; content: ""; background-color: var(--text-color-20);}

/* === Sectie-uitbreidingen ============================================== */

/* Kaarten-slider: één beeld vult de volle breedte; beelden zijn klikbaar. */
.product-card-images.single {
  grid-template-columns: 1fr;
}
.product-card-images figure a {
  display: block;
  height: 100%;
  cursor: zoom-in;
}

/* Lightbox-overlay. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background-color: rgba(0, 0, 0, 80%);
}
.lightbox-overlay.active {
  display: flex;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 50%);
}
.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  font-size: 3rem;
  line-height: 1;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
}

/* How-it-works (tabs): kolommen omdraaien op desktop. */
@media (width > 991px) {
  .how-it-works-swap > :first-child {
    order: 2;
  }
  .how-it-works-swap > :last-child {
    order: 1;
  }
}

/* Tekstkaarten: productkaart met foto boven en witte tekstkaart eronder, in 2 of
   3 kolommen, knoppen onderaan uitgelijnd. Gebruikt door het kaarten-grid (bron
   "Refurbished meubels") en de WooCommerce-listings (woocommerce/content-product.php). */
.tekstkaarten.grid-column-2 {
  grid-template-columns: repeat(2, 1fr);
}
.tekstkaarten.grid-column-3 {
  grid-template-columns: repeat(3, 1fr);
}
.tekstkaart {
  display: flex;
  flex-direction: column;
  border: 0.1rem solid var(--medium-grey-color);
}
.tekstkaart .product-card-images figure {
  margin: 0;
  background-color: var(--light-grey-color);
}
.tekstkaart .product-card-images figure a {
  cursor: pointer;
}
.tekstkaart .product-label {
  top: 1.6rem;
}
/* Zonder foto: het logo, klein en gecentreerd op het lichte vlak. */
.tekstkaart figure.is-placeholder a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tekstkaart figure.is-placeholder img {
  object-fit: contain;
  width: 50%;
  height: auto;
}
.tekstkaart .product-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tekstkaart-prijs strong {
  font-size: var(--fs-lg);
  font-weight: 500;
}
.tekstkaart .btn {
  margin-top: auto;
}
@media (width < 992px) {
  .tekstkaarten.grid-column-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width < 768px) {
  .tekstkaarten.grid-column-2,
  .tekstkaarten.grid-column-3 {
    grid-template-columns: 1fr;
  }
}

/* Zwevend winkelmandje rechtsonder (zie functions.php). */
.winkelmand-float {
  position: fixed;
  right: var(--gutter-2);
  bottom: var(--gutter-2);
  z-index: 998;
  animation: winkelmand-in 0.35s ease-out;
}
.winkelmand-float[hidden] {
  display: none;
}
.winkelmand-float-knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--btn-lg-height);
  padding: 0.5rem var(--btn-padding);
  border-radius: var(--btn-border-radius);
  background-color: var(--primary-color);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: 0 0.6rem 2rem rgba(var(--secondary-color-rgb), 0.25);
  transition: var(--transition);
}
.winkelmand-float-knop:hover,
.winkelmand-float-knop:focus-visible {
  background-color: var(--secondary-color);
  color: var(--white);
}
.winkelmand-float-aantal {
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.6rem;
  border-radius: 1.1rem;
  background-color: var(--white);
  color: var(--secondary-color);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}
@keyframes winkelmand-in {
  from { opacity: 0; transform: translateY(1rem); }
}
@media (width < 576px) {
  .winkelmand-float {
    right: var(--gutter-1);
    bottom: var(--gutter-1);
  }
  /* Mobiel: rond icoon met het aantal als badge. */
  .winkelmand-float-knop {
    width: 5.6rem;
    height: 5.6rem;
    padding: 0;
    justify-content: center;
  }
  .winkelmand-float-label {
    display: none;
  }
  .winkelmand-float-aantal {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    border: 0.2rem solid var(--white);
    background-color: var(--secondary-color);
    color: var(--white);
    height: 2.4rem;
    min-width: 2.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .winkelmand-float { animation: none; }
}