/*
Theme Name: Circuply custom template
Theme URI: http://www.swiftweb.nl;
Author: SwiftWeb
Author URI: http://www.swiftweb.nl;
Description: Custom template voor Circuply
Version: 1.0
*/

/* Theme CSS */

:root {
  --Donkergroen: #012d33;
  --Lichtgroen: #69cc69;
  --Geel: #fecf6e;
  --Paars: #a36acc;
  --Teal: #67cdcd;
  --Grijs: #edf2f4;
  --tekst: #464d51;
  --border: #D6D6E2;
  --button-radius: 8px;
  --element-padding-desktop: 100px 0;
  --element-margin-mobile: 0 0 60px 0;
  --element-margin-desktop: 0 0 100px 0;
  --smaller-section-padding: 80px 0;
  --border-radius: 25px;
  --desktop-margin: 150px 0;

  
}

.container {
  max-width: 1900px;
  /* max-width: 100%; */
  width: calc(100% - 100px);
}

* {
  padding: 0;
  margin: 0;
}

p strong {
  font-weight: 600;
}

html {
  scroll-behavior: smooth;
  margin-top: 0 !important;
}


img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 100%;
}

body {
  position: relative;
  font-family: 'Source Sans', Arial, sans-serif;
  font-weight: 300;
  color: var(--tekst);
  transition: all 0.3s;
  line-height: 25px;
}

body .wpb-content-wrapper {
  transition: all 0.3s;
}

hr {
  border-top: 1px solid rgba(0, 0, 0, 1);
}


h1 {
  font-size: clamp(24px, 4vw, 56px);
  font-weight: 700;
  margin-bottom: 20px;
  text-wrap: balance;
  color: var(--Donkergroen);
}

h2 {
  font-size: clamp(30px, 3.5vw, 65px);
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--Donkergroen);
  line-height: 1;
}

h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 110%;
  color: var(--Donkergroen);
}

h4 {
  font-size: clamp(17px, 3.5vw, 24px);
  line-height: 1;
  font-weight: bold;
}

h5 {
  font-size: clamp(14px, 2vw, 14px);
}

h6 {
  font-size: clamp(12px, 1.5vw, 14px);
}

p {
  font-size: clamp(16px, 1.5vw, 16px);
  margin-bottom: 20px;
}

a:not(header a):not(footer a) {
  font-size: clamp(16px, 1.5vw, 16px);
  text-decoration: underline;

}

a:hover {
  text-decoration: none;
  color: var(--tekst);
}

footer a:hover {
  text-decoration: underline;
}

footer ul {
  display: flex;
  flex-direction: column;
}

strong {
  font-weight: bold;
}

html {
  scroll-behavior: smooth;
}

header ul,
footer ul,
.tekst-image-semi-inner ul {
  list-style: none;
}

p:empty {
  margin: 0;
}

ul li:not(header ul li),
ol li:not(header ol li) {
  font-size: 16px;
  position: relative;
  line-height: 28px;
}

ul:not(header ul):not(footer ul),
ol:not(header ol):not(footer ol) {
  padding-left: 20px;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

p, a {
  color: var(--tekst);
}

.header-top-bar {
  background-color: var(--Grijs);
  padding: 10px 0;
}

.usps-top .usp-single::before {
  content: "";
  background-image: url(./img/vink-circle-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 18px;
  height: 18px;
}

.usps-bottom .usp-single::before {
  content: "";
  background-image: url(./img/vink-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 18px;
  height: 18px;
}

.usp-single {
  display: flex;
  align-items: center;
  gap: 5px;
}

.usp-single p {
  margin-bottom: 0;
  line-height: 1;
  font-size: 14px;
}

.usps {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
}

.header-top-bar-inner {
  display: flex;
  justify-content: space-between;
}

.trusted-shop {
  width: 125px;
  object-fit: contain;
}

.help-centre {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-centre::before {
  content: "";
  background-image: url(./img/help-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 22px;
  height: 22px;
}

.header-top-bar-inner .trusted-shop {
  margin-left: 20px;
}

.btn.help-centre::after {
  display: none;
}

body .logo {
  height: 50px;
}

.btn::after {
  content: "";
  background-image: url(./img/arrow-right-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 12px;
  height: 12px;
}

.btn.arrow-down::after {
  content: "";
  background-image: url(./img/arrow-down-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.btn {
  text-decoration: none;
  padding: 8px 20px;
  border-radius: var(--button-radius);
  color: white;
  font-size: 16px;
  font-weight: 300;
  width: fit-content;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}


.btn:hover {
  color: white;
}

.btn-teal {
  background-color: var(--Teal);
}

.btn-teal:hover {
  background-color: #3ca7a7;
}

.btn-purple {
  background-color: var(--Paars);
}

.btn-purple:hover {
  background-color: #8245ad;
}

.btn-green {
  background-color: var(--Donkergroen);
}

.btn-green:hover {
  background-color: #0f4046;
}

.btn-grijs {
  background-color: var(--Grijs);
  color: var(--Donkergroen);
}

.btn-grijs:hover {
  background-color: #c9c9c9;
}

.btn.btn-grijs {
  color: var(--Donkergroen);
}

.header-main-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  gap: 20px;
}

.header-main-bar-inner > div {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-main-bar-inner > div:nth-child(2) {
  flex: 1;
  justify-content: center;
}

.search-bar {
  border-radius: var(--button-radius);
  border: 1px solid var(--Donkergroen);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 15px;
  height: 42px;
  cursor: pointer;
  position: relative;
  flex: 1 1 auto;  
  min-width: 120px; 
  max-width: 750px;
}

.search-bar::after {
  content: "";
  background-image: url(./img/search-dark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

.logo,
.cat-dropdown,
.header-icons {
  flex-shrink: 0;
}

.search-bar p {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--Donkergroen);
  font-size: 20px;
}

.header-icons img {
  width: 35px;
  height: 35px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.btn-mobile-nav {
  display: none;
}

.nav-bar-inner .menu {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 30px 0;

  overflow-x: auto;
}

.nav-bar-inner .menu li a {
  font-size: 20px;
  font-weight: 500;
  color: var(--Donkergroen);
}

.nav-bar {
  background-color: var(--Grijs);
}

.front-page-header-inner {
  display: flex;
  flex-direction: column;

}

.front-page-header-inner-left {
  position: relative;
}

.front-page-header-inner-left a {
  position: absolute;
  bottom: 30px;
  right: 40px;
}

.front-page-header-inner > div:first-child {
  display: flex;
  gap: 15px;
}

.front-page-header-inner-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-shrink: 0;
  width: 40%;
}

.front-page-header {
  background-color: var(--Grijs);
  padding-bottom: 20px;
}

.block-bottom, .block-top {
  position: relative;
  height: 50%;
  display: flex;
  align-items: flex-end;

}

.block-bottom::after, .block-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); 
}

.block-bottom p, .block-top p {
  color: white;
  position: relative;
  z-index: 2;
  padding-left: 50px;
  margin-bottom: 50px;

  font-size: clamp(18px, 2vw, 40px);
  font-weight: 700;
  width: 75%;
  text-wrap: balance;
  line-height: 1;
}

.block-bottom p .arrow-right, .block-top p .arrow-right {
  content: "";
  background-image: url(./img/arrow-right-lightgray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-bottom: -5px;
  margin-left: 10px;
  opacity: 0.5;
}

.front-page-header-inner-right img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.front-page-usps-bottom {
  padding-top: 30px;

}

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

.front-page-usps-bottom .usp-single::before {
  content: "";
  background-image: url(./img/vink-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.front-page-usps-bottom .usp-single p {
  font-size: clamp(14px, 2vw, 16px);
  margin-bottom: 0;
}

.logo-gallery img {
  aspect-ratio: 2 / 1;
  object-fit: contain; 
  height: 45px;
}

.logo-gallery .swiper-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 50px 0 !important;

}

.logo-section  {
  border-bottom: 1px solid var(--border);
}

.categories-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.single-category {
  background-color: var(--Grijs);
  border-radius: 20px;
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  text-decoration: none;
}

.single-category img {
  width: 75%;
  margin-left: auto;
}

.single-category p {
  font-weight: 500;
    font-size: clamp(18px, 1.5vw, 24px);
  padding-left: 20px;
  color: var(--Donkergroen);
}

.single-category p::after {
  content: "";
  background-image: url(./img/arrow-right-lightgray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-bottom: -3px;
  margin-left: 10px;
  opacity: 0.5;
  transition: all 0.3s;
}

.single-category:hover p::after {
  background-image: url(./img/arrow-right-teal.svg);
  opacity: 1;
}

.product-categories {
  margin: 50px 0;
}

.product-categories-inner .btn-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.usp-div img {
  width: 50px;
  object-fit: contain;
}

.usp-inner-img {
  width: 175px;
}

.btn-container {
  display: flex;
  gap: 10px;
}

.usps-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.usps-inner > div:first-child {
  padding-right: 150px;
  position: relative;
  width: 50%;
  text-align: end;
  display: flex;
  justify-content: flex-end;
}

.usps-inner > div:first-child > * {
  position: relative;
  z-index: 2;
}

.usps-inner .btn-container {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.usps-inner .btn-container > * {
  flex-grow: 1;
}

.usps-inner h2 {
  font-size: clamp(30px, 3.5vw, 75px);
}

.usps-inner-left-inner {
  width: fit-content;
  text-align: start;
}

.usps-inner > div:first-child::before {
  content: "";
  background-image: url(./img/shape-logo.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 500px;
  display: block;
  position: absolute;
  right: 30%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;

}

.usps-inner > div:last-child {
  padding-left: 150px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-left: 1px solid var(--border);
  width: 50%;
}

.usp-div {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.usp-div > div p:first-child {
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: bold;
  color: var(--Donkergroen);
}

.usp-div > div p:last-child {
  width: 75%;
  text-wrap: balance;
}

.usps-section {
  margin: 200px 0;
}

.diensten-cards .row {
  display: grid;
  gap: 15px;
}

.diensten-cards .row-1 {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 15px;
}

.diensten-cards .row-2 {
  grid-template-columns: repeat(3, 1fr);
}

.dienst-kaart > * {
  position: relative;
  z-index: 2;
}

.dienst-kaart {
  background-color: #012D33;
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 250px;
  position: relative;
  overflow: hidden;
 
}

.dienst-kaart:hover h3 .arrow-right {
  background-image: url(./img/arrow-right-teal.svg);
  opacity: 1;
}

.dienst-kaart:hover {
  color: white;
}

.dienst-kaart::after {
  content: "";
  background-image: url(./img/pattern-button-dark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 400px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.badge-nieuw {
  background: #397BA4;
  color: white;
  font-size: 15px;
  padding: 0 14px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 8px;
  width: fit-content;
}

.dienst-kaart h3 {
  color: white;
}

.dienst-kaart .beschrijving {
  width: 50%;
  text-wrap: balance;
  margin-bottom: 30px;

}

.dienst-kaart .beschrijving p {
  color: white;
}

.dienst-kaart h3 .arrow-right {
  background-image: url(./img/arrow-right-lightgray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: -4px;
  margin-left: 10px;
  opacity: 0.5;
  transition: transform 0.3s;
}

.usp-column img {
  width: 50px;
}

.usp-grid {
  display: flex;
  align-items: center;
}

.waarom-circuply-section {
  margin: 0 0 100px 0;
  padding-top: 250px;
  position: relative;
}

.header-center {
  text-align: center;
  position: relative;
}

.header-center > * {
  position: relative;
  z-index: 2;
}

.header-center .subtitle {
  color: var(--Teal);
  font-weight: bold;
  font-size: 18px;
}

.header-center .intro {
  width: 50%;
  text-wrap: balance;
  margin: auto;
  margin-bottom: 50px;
}

.video-thumb {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.video-thumb img {
  width: 70%;
}

.usp-column .usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 90%;
}

.usp-column .usp-item h3 {
  margin-bottom: 0;
  text-align: center;
  text-wrap: balance;
}

.usp-column .usp-item p {
  text-align: center;
  margin-bottom: 0;
  text-wrap: balance;
}

.usp-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 200px;
  position: relative;
  z-index: 2;
}

.waarom-circuply-section .btn-container {
  justify-content: center;
  margin-top: 30px;
}

.waarom-circuply-section::after {
  content: "";
  background-image: url(./img/shape-big.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 99.4vw;
  height: 100%;
  position: absolute;
  bottom: 45%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.productslider-inner .header-center {
  text-align: start;
}

.productslider-inner .header-center .intro {
  width: 100%;
  margin-bottom: 10px;
}

.diensten-grid {
  position: relative;
  z-index: 2;
}

.productslider-inner .header-center h2 {
  margin-bottom: 10px;
}

.product-swiper .swiper-wrapper{
  padding-bottom: 30px;
  padding-top: 20px;
}

.product-swiper .product-thumb {
  height: 250px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: flex-end;
}

.product-swiper .brand-badge img {
  height: fit-content;
}

.product-card a {
  text-decoration: none;
}

.product-info {
  margin: 30px;
  border-top: 2px solid var(--border);
  padding-top: 30px;
  justify-content: space-between;

  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-info > p:first-child {
  font-size: 16px;
  font-weight: 400;
  color: var(--Donkergroen);
  margin-bottom: 10px;
  font-weight: bold;
}

.product-info .excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;

  line-height: 20px;
  font-size: 15px;
}


.product-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);

  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
}

.product-info .price {
  margin-bottom: 0;
  line-height: 1;
  margin-top: auto;
}

.product-info .price .amount {
  font-size: clamp(18px, 3.5vw, 18px);
  color: var(--Donkergroen);
  font-weight: bold;
}

.product-info .price .price-on-request {
  font-size: clamp(16px, 3.5vw, 16px);
  color: var(--Donkergroen);
  font-weight: bold;
}

.stock-label.voorraad {
  margin-top: 5px;
  color: #69CC69;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

.stock-label.aanvraag {
  margin-top: 5px;
  color: var(--Paars);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

.stock-label.aanvraag span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--Paars);
  display: block;
}

.stock-label.voorraad span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #69CC69;
  display: block;
}

.product-actions {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-slider-favorite {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-top: 6px;
}

.product-slider-favorite .icon-default,
.product-slider-favorite .icon-filled {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s ease;
}

.product-slider-favorite .icon-filled {
  opacity: 0;
}

.product-slider-favorite.is-favorite .icon-filled {
  opacity: 1;
}

.product-slider-favorite.is-favorite .icon-default {
  opacity: 0;
}

.product-slider-add {
  background-image: url(./img/in-cart-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 30px;
  height: 30px;
  display: block;
  cursor: pointer;
}

.swiper-button-next:after, .swiper-button-prev:after {
  display: none;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  width: fit-content !important;
  display: flex;
  align-items: center;
  gap: 6px;
  bottom: unset !important;
  position: relative;
}

body .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background-color: white;
  border: 1px solid var(--Donkergroen);
  opacity: 1;
  margin: 0 !important;
}

body .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--Donkergroen);
}

.productslider-inner .btn-container {
  justify-content: center;
}

.slider-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.swiper-buttons {
  display: flex;
  gap: 6px;
}

.swiper-buttons > div {
  top: unset;
  position: relative !important;
  align-items: flex-start !important;
  margin-top: 0 !important;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: unset !important;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: unset !important;
  right: unset !important;
}

.logo-section.border-on {
  border-bottom: unset;
}

.logo-section.border-on .logo-gallery {
  border: 1px solid var(--border);
  padding: 50px 75px;
}

.logo-section .logo-gallery {
  position: relative;
  overflow: visible;
}

.logo-section .logo-gallery p {
  position: absolute;
  top: -12.5px;
  right: 50%;
  transform: translateX(50%);
  padding: 0 50px;
  background-color: white;
  font-weight: 500;
}

.section-gap {
  height: var(--gap-desktop);
}

.image-tekst-inner {
  display: flex;
  align-items: center;
}

.image-tekst-inner .block-left p:first-child {
  margin-bottom: 0;
  color: var(--Teal);
  font-size: 24px;
  font-weight: 600;
}

.image-tekst-inner .block-left p:nth-child(3) {
  width: 75%;
}

.image-tekst-section {
  position: relative;
  padding-top: 150px;
}

.image-tekst-section::before {
    content: "";
    background-image: url(./img/shape-left.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 100%;
    bottom: 0;
    height: 100%;
    width: 29%;

}

.image-tekst-inner > div {
  width: 50%;

}

.image-tekst-inner .block-left > div {
  width: 60%;
  margin: auto;
}

footer {
  background-color: var(--Donkergroen);
  position: relative;
}

.img-left {
  flex-direction: row-reverse;
}

.image-tekst-section.no-background-img::before {
  display: none;
}

.review-rating img {
  width: 25px;
}

.review-rating {
  display: flex;
  flex-direction: column;
}

.block-left .review-rating {
  margin-top: 30px;
}

.block-left .review-rating p, .block-left .review-rating a {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  margin-top: 5px;
}

.hide-rating .review-rating {
  display: none;
}

.footer-banner {
  margin-bottom: 100px;
}

.footer-banner-inner::after {
  content: "";
  background-image: url(./img/shape-small.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 315px;
}

.footer-banner-inner {
  background-color: var(--Donkergroen);
  border-radius: var(--button-radius);
  padding: 75px 0;
  position: relative;
}

.footer-banner-inner > div {
  width: 50%;
}

.footer-banner-inner > div:first-child > div {
  width: 60%;
  margin: auto;
}

.footer-banner img {
  width: 125px;
}

.footer-banner h2 {
  color: white;
}

.footer-banner p {
  margin-bottom: 0;
  color: var(--Geel);
  font-size: 20px;
}

.footer-cols {
  display: flex;
}

.footer-cols > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding-top: 75px;
  padding-right: 100px;
  padding-bottom: 50px;

  border-right: 2px solid white;
}

.footer-bottom .logo-item img {
  aspect-ratio: 2 / 1;
  object-fit: contain;
  width: 90px;
  height: auto;
}

.footer-bottom-left > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 75px 30px 0;

  border-top: 2px solid white;
  border-right: 2px solid white;
}

.footer-bottom-left p {
  border-right: 2px solid white;
  margin-bottom: 0;
  color: white;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.footer-end img {
  width: 200px;
}

.footer-col li a  {
  color: white;
}

.footer-col p {
  color: white;
  margin-bottom: 10px;
  font-size: 18px;
}

.footer-media img {
  width: 35px;
  transition: all 0.3s;
}

.footer-media img:hover {
  transform: scale(0.9);
}

.footer-media p {
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;
}

.footer-media > div {
  display: flex;
  gap: 10px;
}

.footer-cols-right > div:first-child img {
  width: 300px;
}

.footer-cols-right > div:first-child p {
  color: white;
  width: 280px;
  text-align: center;
  margin-top: 10px;
  padding-left: 60px;
  font-size: 12px;
}

.footer-cols-right > div:first-child a {
  text-decoration: underline;
  color: white;
}

.footer-cols-right > div:first-child a:hover {
  text-decoration: none;
}

.footer-cols-right {
  padding: 75px 0 50px 75px;
}

.footer-bottom-right {
  border-top: 2px solid white;
  padding: 30px;
  margin-top: 45px;
  margin-left: -30px;
  display: flex;
  gap: 20px;
  padding-left: 105px;
  position: relative;
  z-index: 2;
}

.footer-bottom-right img {
  width: 40px;
}

footer::after {
  content: "";
  background-image: url(./img/pattern-button-dark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 400px;
  height: 250px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.footer-end {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid black;
}

.footer-end > div {
  display: flex;
  align-items: center;
  gap: 50px;
}

.footer-end > div:first-child p:first-child {
  font-weight: 400;
  color: var(--Donkergroen);
  margin-bottom: 0;
}

.footer-end > div:first-child p:last-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  width: 500px;
  line-height: 1;
  margin-bottom: 0;
}

.footer-end > div:first-child a {
  font-size: 11px;
}


.footer-end > div:last-child span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--Donkergroen);
  display: block;
}

.footer-end > div:last-child {
  gap: 100px;
}

.footer-end > div:last-child > div {
  display: flex;
  gap: 15px;
  align-items: center;
}

.footer-end > div:last-child > div a {
  text-decoration: none;
  color: var(--Donkergroen);
  font-weight: 400;
}

.footer-end > div:last-child > div a:hover {
  text-decoration: underline;
}

.footer-top-bar .usp-single img {
  width: 150px;
}

.footer-top-bar .usp-single {
  padding: 15px 0;
}

.footer-top-bar .usps-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.usps-top span {
  width: 2px;
  background-color: white;
  height: 40px;
}

.footer-top-bar .usps-top p {
  font-weight: bold;
  color: var(--Donkergroen);
}

.footer-top-bar .usps-top span:last-child {
  display: none;
}

.footer-top-bar .usps-top .usp-single::before {
  content: "";
  background-image: url(./img/vink-circle-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 25px;
  height: 25px;
}

.footer-top-bar .usps-top .usp-single.has-image::before {
  content: none;
}

.footer-top-bar {
  background-color: #F4F6F8;
}

.single-pdp-usp::before {
  content: "";
  background-image: url(./img/vink-teal.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.single-pdp-usp {
  display: flex;
  align-items: center;
  gap: 5px;
}

.single-pdp-usp p {
  margin-bottom: 0;
}  

.pdp-usps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 75px;
}

.sw-pdp-header h2 {
  font-size: clamp(24px, 3.5vw, 30px);
  text-wrap: balance;
  width: 75%;
}

.pdp-excerpt {
  width: 75%;
  text-wrap: balance;
  margin-bottom: 40px;
}

.pdp-review img {
  width: 24px;
  object-fit: contain;
}

.pdp-review {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 30px;
  margin-top: 30px;
  height: 27px;
}

.pdp-review p span {
  font-weight: bold;
  font-size: 24px;
  color: var(--Donkergroen);
  margin-bottom: -3px;
}

.pdp-review p {
  margin-bottom: 0;
  line-height: 1;
  display: flex;
  align-items: flex-end;
}

.pdp-review > div {
  display: flex;
  gap: 2px;
}

.pdp-label {
  font-weight: 500;
  margin-bottom: 10px;
}









.single-product .product {
  padding-top: 100px;
}

.sw-pdp-variaties {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 50px;
}

.sw-pdp-variatie-single {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
  transition: box-shadow 0.1s ease;
}

.sw-pdp-variatie-single p {
  margin-bottom: 0;
}

.sw-pdp-variatie-single p:first-child {
  font-size: 22px;
  color: var(--Donkergroen);
  font-weight: 500;
}

.sw-pdp-variatie-single > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sw-pdp-variatie-single > p {
  font-size: 20px;
  color: var(--Donkergroen);
  font-weight: 500;
}

.sw-pdp-variatie-single > div:first-child p:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pdp-button-container {
  margin-top: 30px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stock-sku-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}

.stock-info {
  display: flex;
  gap: 4px;
}

.stock-count {
  color: #69CC69;
  font-weight: bold;
}

.sw-pdp-variatie-single.active {
  border-color: var(--Donkergroen);
  box-shadow: inset 0 0 0 4px var(--Teal);  
}

.qty-minus > img {
  height: 5px;
}

body button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.sw-add-to-cart {
  position: relative;
}

.sw-add-to-cart.btn::after {
  position: absolute;
  right: 20px;
}

.custom-quantity {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--Donkergroen);
  padding: 10px 20px;
}

.custom-quantity .qty-display {
  color: var(--Donkergroen);
  font-size: 20px;
}

.custom-quantity img {
  width: 15px;
  cursor: pointer;
}

.pdp-button-container > div {
  display: flex;
  gap: 10px;
}

.pdp-button-container button {
  height: 43px;
}

.sw-add-to-cart, .custom-request-quote {
  width: 100%;
}

.custom-request-quote {
  position: relative;
}

.btn.custom-request-quote::after {
  content: "";
  background-image: url(./img/arrow-right-dark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 20px;
}

.minicart-link {
  position: relative;
}

.cart-count {
  position: absolute;
  bottom: 60%;
  right: -45%;
  background-color: var(--Paars) ;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body .product .pdp-button-container .product-slider-favorite, .custom-information {
  width: 75px;
  position: relative;
  margin-top: 0;
}

body .product .pdp-button-container .product-slider-favorite::after, body .product .pdp-button-container .custom-information::after {
  display: none;
}

body .product .pdp-button-container button img {
  width: 25px !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.custom-loader {
  width: 25px;
  height: 25px;
  border: 4px dotted white;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
  display: none;
}

.custom-loader.loading {
  display: inline-block;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.minicart-inner {
  background-color: white;
  width: 500px;
  top: 0;
  height: 100dvh;
  position: fixed;
  padding: 30px;
  right: 0;
  transition: all 0.3s;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.minicart-inner.active {
  transform: translateX(0);
}

.minicart-section {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.45);
  visibility: hidden;
  opacity: 0;
}

.minicart-section.active {
  visibility: inherit;
  opacity: 1;
}

.admin-bar .minicart-section {
  height: 100vh;
}

.admin-bar .minicart-inner {
  top: 16px;
  height: calc(100vh - 16px);
  background-color: var(--Grijs);
}    

.minicart-header img {
  cursor: pointer;
}

.minicart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dark);
  margin-bottom: 20px;
}

.minicart-header p {
  margin-bottom: 0;
  font-weight: 600;
  text-transform: uppercase;
}

.minicart-free-shipping {
  margin-bottom: 20px;
}

.minicart-free-shipping span {
  min-width: 54px;
}

.minicart-free-shipping p {
  margin-bottom: 10px;
}

.minicart-free-shipping > span {
  height: 2px;
  background: white;
  width: 100%;
  display: block;
}

.minicart-link {
  cursor: pointer;
}

.pdp-popup {
  opacity: 0;
  visibility: hidden;

  position: fixed;
  top: 50%;
  left: 50%;
  width: 1200px;
  max-width: calc(100% - 30px);
  transform: translate(-50%, -50%);
  z-index: 101;
  background-color: white;
  border-radius: var(--border-radius);

}

.popup-left img {
  border-radius: 25px 0 0 25px;
  height: 100%;
}

.pdp-popup.modal-active {
  opacity: 1;
  visibility: visible;


}

.sw-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.minicart-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.minicart {
  margin-bottom: 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-cart-items {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: fit-content;
  overflow-y: auto;
  overflow-x: hidden;
}

.minicart-bottom {
  flex-shrink: 0;
}

.minicart-bottom-divider {
  border-top: 1px solid var(--border);
  margin-left: -30px;
  margin-right: -30px;
}

.minicart-footer .checkout-button {
  width: 100%;
}

.minicart-footer .checkout-button::after {
  display: none;
}

.minicart-footer {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.sw-dot {
  width: 5px;
  height: 5px;
  display: block;
  background-color: white;
  border-radius: 50%;
}

.minicart-footer .btn {
  font-size: 18px;
  height: 43px;
}

.minicart-discount {
  display: none;
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.afrekenen .left-space, .afrekenen .right-space {
  margin-left: -15px;
}

.left-space, .right-space {
  flex-grow: 1;
}

.checkout .woocommerce-checkout-inner {
  display: flex;
}

.checkout-wrapper {
  display: flex;
}

.mobile-item-slider {
  display: none;
}

body.afrekenen {
  overflow-x: unset;
}

.checkout-items.sticky-top {
  top: 50px;
}

.postcode-box > div:last-child {
  display: flex;
  gap: 10px;
}

.woocommerce table.shop_attributes {
  width: fit-content;
}

.single .product {
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.single .product > div {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.single .product > div > div {
  flex-shrink: 0;
  width: 48%;
}

.pdp-top  {
  display: flex;
  flex-direction: column;
}


.coupon-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-face p {
  margin-bottom: 0;
}

.card-face.card-back input {
  margin-bottom: 0;
}

.card-face.card-back > div:last-child {
  flex-shrink: 0;
  margin-bottom: 5px;
}

.coupon-form {
  display: flex;
  align-items: center;
  gap: 5px;
}

.coupon-message {
  transition: all 0.2s;
}

.coupon-message.active {
  display: block;
  padding-top: 10px;
}

.coupon-message p {
  font-weight: 600;
  margin-bottom: 0;
}

.card-back {
  transform: rotateX(180deg);
}

.minicart-coupon.flipped .coupon-card {
  transform: rotateX(180deg);
}

.cart-item > div {
  display: flex;
  align-items: center;
  gap: 25px;
  justify-content: space-between;
}

.cart-item > div:last-child {
  gap: 0;
  margin-bottom: 0;
}

.minicart-coupon {
  perspective: 1000px;
  width: 100%;
  height: 70px;
  position: relative;
  overflow: hidden;
}

.sidebar-cart-price {
  font-size: 18px;
  font-weight: 400;
}

.cart-item-name {
  text-decoration: none;
}

.cart-item {
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: var(--button-radius);
  
}

.minicart .cart-item {
  background-color: white;
}

.coupon-card img {
  width: 20px;
  height: 20px;
  
}

.coupon-card .card-back img {
  transform: rotate(45deg);
}

.close-popup img {
  width: 20px;
  transform: rotate(45deg);
  cursor: pointer;
}

.faq-inner {
  display: flex;
  align-items: center;
}

#apply-minicart-coupon, .sidebar-cart-price {
  margin-bottom: 0;
}

#apply-minicart-coupon {
  text-decoration: underline;
}

#apply-minicart-coupon:hover {
  text-decoration: none;
}

#adminbar-search {
  height: inherit !important;
}

#minicart-coupon-input {
  height: 40px !important;
  margin-bottom: 0 !important;
}

input:not([type="checkbox"]) {
  margin-bottom: 15px !important;
  padding: 10px !important;
  border-radius: var(--button-radius) !important;
  height: 40px !important;
  width: 100% !important;
}

.minus-icon-single-product .icon-minus {
  width: 14px;
  min-width: 14px;
  height: 4px;
  
}

.cart-item .increase-single-product {
  margin-top: -2px;
}

.change-amount {
  display: flex;
  align-items: center;
  gap: 15px;

  background-color: rgba(0, 0, 0, 0.1);;
  padding: 5px 10px;
  border-radius: var(--button-radius);
}

.amount-inner-single-product p {
  margin-bottom: 0;
  min-width: 18px;
  text-align: center;
}

.cart-item-image {
  width: 100px;
  flex-shrink: 0;
}

.change-amount img {
  width: 16px;
  min-width: 16px;
  cursor: pointer;
}

.icon-minus, .icon-trash {
  display: none;
}

.icon-minus.active, .icon-trash.active {
  display: flex;
  cursor: pointer;
}

.icon-trash {
  font-size: 20px;
}

.faq-inner .header-center {
  text-align: start;
  width: 60%;
  margin: auto;
}

.faq-inner > div:last-child {
  width: 40%;
}

.faq-inner > div:first-child {
  width: 50%;
}

.faq-inner .header-center .intro {
  width: 75%;
  text-wrap: balance;
  margin: 0;
}

.faq-top p {
  font-size: 18px;
  color: var(--Donkergroen);
  font-weight: bold;
  margin-bottom: 0;
}

.faq-single:first-child {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.faq-repeater {
  margin-bottom: 20px;
}

.faq-bottom {
  display: none;
  margin-top: 15px;
}

.faq-bottom p {
  margin-bottom: 0;
}

.faq-single {
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer;
  padding: 15px 0;
  border-bottom: 1px solid var(--font);
}

.faq-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.faq-toggle {
  position: relative;
  height: 30px;
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-toggle span {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-toggle span:first-child img {
  transform: rotate(90deg);
}

.faq-toggle span img {
  width: 100%;
  height: 2px;
  transform: rotate(0);
  transition: transform 0.3s ease;
}

.faq-toggle span:first-child img.rotate {
  transform: rotate(180deg);
}

.entry-summary > .price, .woocommerce-product-details__short-description, .variations_form.cart {
  display: none;
}

body .woocommerce-product-gallery {
  display: flex;
  flex-direction: row-reverse;
  width: 100% !important;
  min-height: 500px;
  gap: 20px;
}

.flex-viewport {
  width: 100%;
}

.flex-control-nav {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

body .woocommerce div.product div.images .flex-control-thumbs li {
  width: 100px;
  background-color: #F4F6F8;
}

body .woocommerce div.product div.images .flex-control-thumbs li img {
  object-fit: contain;
}

.accordion-item .accordion-title p {
  font-weight: bold;
  font-size: clamp(18px, 1.5vw, 18px);
  margin-bottom: 0;
  color: black;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
    padding: 20px 0;
}

.accordion-item .accordion-title p::after {
   content: "";
  background-image: url(./img/arrow-down-lightgray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: all 0.3s;
}

.accordion-item.open .accordion-title p::after {
  transform: rotate(180deg);
}

.accordion-item {

  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.accordion-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.minicart-close {
  width: 20px;
  transform: rotate(45deg);
}

.related.products h2 {
  font-size: clamp(20px, 3.5vw, 20px);
  margin-bottom: 20px;
}

.related.products .product-grid-item {
  width: 100% !important;
}

.related.products .product-info {
  margin-top: 0;
}

.related.products .product-info > p:first-child {
  font-size: 16px;
  line-height: 20px;
}

.related.products .brand-badge {
  position: absolute;
  width: 50px;
  top: 25px;
  left: 25px;
}

.related.products .product-actions {
  bottom: 28px;
  right: 32px;
  justify-content: flex-end;
}

.related.products .product-info .price {
  margin-bottom: 0 !important;
}

.related.products .product-slider-favorite {
  width: 25px;
  height: 25px;
  margin-top: 6px;
}

.related.products .product-slider-add {
  width: 25px;
  height: 25px;
}

.related.products .products, .woocommerce ul.products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.woocommerce ul.products::before {
  display: none;
}

.woocommerce .product-card {
  height: 100%;
}

.product-card .product-thumb > img {
  max-width: 250px;
  margin: 75px 0 20px 0 !important;
  max-height: 150px !important;
  height: 150px !important;
  object-fit: contain;
}


.product-card .product-thumb {
  display: flex;
  justify-content: center;
}

.brand-badge {
  position: absolute;
  width: 60px;
  top: 25px;
  left: 25px;
  height: 30px;
}

.winkel .products::before {
  display: none !important;
}

.woocommerce .products li {
  width: 100% !important;
  margin-bottom: 20px !important;
}

.custom-sort-dropdown {
  position: relative;
  display: inline-block;
  display: flex;
  justify-content: flex-end;
}

.sort-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-toggle .dropdown-arrow {
  background-image: url(./img/arrow-down-teal.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 15px;
  height: 15px;
}

.sort-options {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 10;
  top: 30px;
  border-radius: var(--button-radius);
}

.sort-options li {
  transition: all 0.3s;
}

.sort-options li:hover {
  background-color: var(--Grijs);
}

.sort-options li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
}

.sort-options li a

.sort-options a.active {
  font-weight: bold !important;
}

.custom-sort-dropdown.open .sort-options {
  display: block;
}

.winkel .woocommerce {
  padding-top: 100px;
}

.brand-badge img {
  object-fit: contain;
}

.woocommerce-product-gallery__wrapper {
  display: flex;
}

.single-product .product_meta {
  display: none;
}

.gform_required_legend {
  display: none;
}

form .gform-body .gform_fields label {
  font-weight: 600;
  margin-bottom: 5px;
}

form .gform-body .gform_fields {
  row-gap: 8px;
}

.pdp-popup .popup-right h2 {
  font-size: clamp(20px, 3.5vw, 35px);
  padding-bottom: 20px;
}

.popup-right {
  padding: 40px;
}

.close-popup {
  position: absolute;
  top: 15px;
  right: 15px;
}

.pdp-popup-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.popup-right {
  width: 50%;
  flex-shrink: 0;
}

form .gform-footer .gform_button {
  background-color: var(--Paars) !important;
  font-size: 18px !important;
}

body .gform_wrapper .gform_fields input:focus,
body .gform_wrapper .gform_fields textarea:focus,
body .gform-footer .gform_button,
body .gform_wrapper .gform_fields select:focus  {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--Paars) !important;
}

.wishlist-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 100px 0;
 
}

.wishlist-items .product-card {
 position: relative;
}

.single-product .footer-banner-inner {
  margin-top: 100px;
}

button.sw-add-to-cart.disabled {
  opacity: 0.5;
  pointer-events: disabled;
}

.pdp-popup.offerte-info .pdp-popup-inner {
  align-items: stretch;
  height: 100%;
}

.pdp-popup.offerte-info .pdp-popup-inner ul {
  list-style: none;
  padding-left: 0;
}

.single-checkbox {
  display: flex;
  align-items: center;
}

.single-checkbox p {
  margin-bottom: 0;
  line-height: 16px;
  cursor: pointer;
}

.single-checkbox .checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--dark);
  display: inline-block;
  border-radius: 3px;
  position: relative;
  margin-right: 8px;
  vertical-align: middle;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}

.single-checkbox input[type="checkbox"] {
    display: none;
}

.single-checkbox .checkmark::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 9px;
    border: solid var(--dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.single-checkbox input[type="checkbox"]:checked + .checkmark::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.checkout-header {
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 10px !important;
}

.afrekenen .header-main-bar, .afrekenen .nav-bar {
  display: none;
}

.customer_details {
    padding-left: 0;
}

.customer_details, .checkout-items-original {
    width: 50%;
    padding: 100px;
}

.help-centre {
  display: none;
}

.afrekenen .left-space, .afrekenen .right-space {
    margin-left: -15px;
}

.left-space, .right-space {
    flex-grow: 1;
}

.checkout-totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 10px;
}

.checkout-totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 21px;
}

.checkout-totals >div:first-child p {
    margin-bottom: 5px;
}

.checkout-totals >div p {
  color: white;
}

.checkout-items ul {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.single-checkbox-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.plaats-dropdown .woocommerce-input-wrapper {
  width: 100%;
}

.select2-selection.select2-selection--single {
  margin-bottom: 0 !important;
}

.select2-selection {
  padding: 10px !important;
  background-color: #fff;
  border: 2px solid black !important;
  border-radius: var(--button-radius) !important;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px !important;
  margin-bottom: 15px !important;
  width: 100%;
}

.plaats-dropdown {
  margin-bottom: 15px !important;
}

.plaats-dropdown .form-row {
    padding: 0 !important;
    margin: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 56px;
}

.select2-selection__rendered {
  padding-left: 0 !important;
  color: black !important;
  opacity: 0.6;
  font-weight: 300 !important;
}

.checkout-change-adres > div:first-child .custom-checkbox {
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
  border-bottom: unset;
}

.gm-input > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-checkbox-circle {
  width: 16px;
  height: 16px;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}

.custom-checkbox-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.gm-input.active .custom-checkbox-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

.factuuradres-optioneel .checkout-change-adres .checkout-custom-checkbox .custom-checkbox p {
  font-size: 15px;
}

.gm-input p {
  margin-bottom: 0;
}

.factuuradres-optioneel {
  margin-bottom: 30px;
}

.diff-shipping-adres-container {
  margin-top: 30px;
}

.billing-details-container {
  margin-bottom: 30px;
}

.diff-shipping-adres-container.hide-ship {
  display: none;
}

.postcode-box > div:last-child {
  display: flex;
  gap: 10px;
}

.postcode-box > div:last-child > div {
    flex-grow: 1;
}

.gm-input {
  border: 2px solid black;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: var(--button-radius);
  height: 56px;
}

.checkout-change-adres > div:first-child .custom-checkbox {
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
  border-bottom: unset;
}

.checkout-change-adres > div:last-child .custom-checkbox {
    border-radius: 0 0 12px 12px;
}

.afrekenen input {
  height: 56px !important;
}

.checkout-quantity {
  position: absolute;
  color: white;
  background-color: var(--dark);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.checkout-image {
    position: relative;
    width: fit-content;
}

.checkout-items-inner .cart-item-name, .checkout-items-inner .sidebar-cart-price {
  font-size: 14px;
  color: white;
}

.cart-item-image img {
    width: 70px;
    height: 70px;
    border-radius: var(--button-radius);
    flex-shrink: 0;
}

.minicart .cart-item-image img {
  width: 100%;
}

.checkout-items-inner  .cart-item > div {
  justify-content: flex-start;
}

.checkout-items-original {
  background-color: var(--Donkergroen);
}

.afrekenen .right-space {
    background-color: var(--Donkergroen);
}

.checkout-wrapper {
    display: flex;
}

.afrekenen .left-space {
  margin-right: -15px;
}

.afrekenen .footer-banner {
  display: none;
}

.checkout-items-inner .checkout-header {
  color: white;
}

.checkout-items-inner .cart-item-image img {
  border-radius: 11px !important;
}

.diff-shipping-adres-container.hide-ship.active {
    display: block;
}

.select2-search--dropdown {
    display: none !important;
}

.select2-selection.select2-selection--single {
    margin-bottom: 0 !important;
}

body .button.checkout-button {
    background-color: var(--Paars);
    width: 100%;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: var(--button-radius);
    padding: 16px;
    font-size: 14px;
    text-decoration: none;
}

.checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

li .page-numbers.current, li .page-numbers:hover {
  background-color: var(--Donkergroen) !important;
}

ul.page-numbers li a, ul.page-numbers li span {
  padding: 0 !important;
}

ul.page-numbers li a, ul.page-numbers li span {
  width: 40px;
  height: 40px;
  border: 1px solid var(--Donkergroen) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.page-numbers.dots:hover {
  background-color: white !important;


}

.page-numbers.dots {
  border: unset !important;
  border-right: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
    background: unset;
    color: white;
}

.woocommerce nav.woocommerce-pagination ul li {
  border-right: unset !important;
}

.woocommerce ul.page-numbers {
  display: flex !important;
  gap: 5px !important;
  border: none !important;
  justify-content: center !important;
  margin-bottom: 100px !important;
}

.page-template-default .nav-bar, .woocommerce-page .nav-bar {
  margin-bottom: 100px;
}

.page-template-default .footer-banner {
  margin-top: 100px;
}

.page-template-template-flex-builder .footer-banner {
  margin-top: 150px;
}

:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover {
  background-color: #8245ad;
  color: white;
}

.cat-dropdown {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  padding-top: 10px;
}

.dropdown-menu-cat {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 178.75px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: var(--button-radius);
  z-index: 999;
}

.dropdown-menu-cat li a {
  display: block;
  padding: 10px 15px;
  color: #012d33;
  text-decoration: none;
}

.dropdown-menu-cat li a:hover {
  background: var(--Grijs);
  color: var(--Donkergroen);
}

.dropdown-menu-cat li:last-child a:hover {
  border-radius: 0 0 8px 8px;
}

.dropdown-menu-cat li:first-child a:hover {
  border-radius: 8px 8px 0 0;
}

.cat-dropdown:hover .dropdown-menu-cat {
  display: block;
}

.front-page .nav-bar {
  margin-bottom: 0;
}

.nav-bar .menu li a {
  border: 1px solid transparent;
  padding: 10px 20px;
  border-radius: var(--button-radius);
  transition: all 0.3s ease;
}

.nav-bar .menu li a:hover {
  border: 1px solid var(--Donkergroen);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-icons a:nth-child(2) img, .header-icons a:nth-child(1) img {
  height: 38px;
  width: 38px;
}

.myaccount-login {
  display: flex;
  padding-top: 150px;
}

.myaccount-login > div {
  width: 370px;
}

.mijn-account .woocommerce {
  position: relative;
  display: flex;
}

.mijn-account .woocommerce .container-large {
  margin: 0 auto;
}

.mijn-account .woocommerce .row {
  height: 100%;
}


#customer_login {
  height: 100%;
  display: flex;
  align-items: center;
  height: calc(100vh - 257px) !important;
}

.mijnaccount-back.mijnaccount-back-mobile {
  display: none ;
}

.mijnaccount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.mijnaccount-header h2 {
  margin-bottom: 0;
  font-size: clamp(18px, 3.5vw, 24px);
}

.mijn-account .myaccount-login .woocommerce-form-login {
  margin-top: 0;
  border: unset;
  padding: 0;
}

.mijnaccount-header a {
    font-size: 14px;
}


.mijnaccount-login-img {
  position: absolute;
  top: 0;
  right: 0;
  object-fit: cover;
  width: 55% !important;
  height: calc(100vh - 101px) !important;
}

.woocommerce-account .woocommerce > div {
  flex-shrink: 0;
}

.woocommerce-NoticeGroup-checkout, .woocommerce-notices-wrapper {
    position: absolute;
    width: 100%;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    width: 100%;
    margin-right: 0;
    margin-top: 8px;
    margin-bottom: 5px;
}

.btn-blue, .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    background-color: var(--Paars);
    color: white;
}

.gm-btn, .woocommerce .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce .woocommerce-ResetPassword .woocommerce-form-login__submit {
  text-decoration: none;
  height: 56px;
  border-radius: var(--button-radius);
  color: white;
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.show-password-input {
  margin-top: -7.5px !important;
}

.woocommerce .woocommerce-form-login__submit:hover {
  background-color: #8245ad !important;
  color: white !important;
}

.mijn-account .nav-bar {
  margin-bottom: 0;
}

.flex-row {
  display: flex;
  flex-direction: column-reverse !important;
}

.woocommerce .woocommerce-form-row .woocommerce-Input.input-text {
    border: 1px solid var(--Donkergroen);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: var(--button-radius);
    height: 56px !important;
    width: 100%;
}

.woocommerce-form-login > p {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.password-input {
  width: 100%;
}

.woocommerce-MyAccount-navigation {
  margin-left: -15px;
  background-color: var(--Grijs);
  padding-right: 50px;
  height: 100%;
  padding-bottom: 50px;
  padding-left: 15px;
}

.custom-account-dashboard {
    padding-top: 100px;
}

.woocommerce-MyAccount-navigation img {
  max-height: 496px;
  width: 100%;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin-top: 30px;
  padding-left: 0;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 70%;
  padding-left: 50px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.woocommerce-account .woocommerce-MyAccount-content p, .woocommerce-account .woocommerce-MyAccount-content a {
  color: white;
}

.woocommerce-NoticeGroup-checkout, .woocommerce-notices-wrapper {
  position: absolute;
  width: 100%;
}

.woocommerce-account .woocommerce .left-space {
  background-color: var(--Grijs);
}

.account-links li {
  border-bottom: 1px solid var(--Donkergroen);
}

.account-links li span {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 10px;
  transition: all 0.3s;
}

.account-links li a {
  padding: 15px 0;
  display: block;
}

.woocommerce-MyAccount-navigation ul a {
  text-decoration: none;
}

.mijn-account .woocommerce {
  background-color: var(--Donkergroen);
}

#clear-wishlist {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 16px;
  cursor: pointer;
}

.minicart .cart-item-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.minicart .cart-item-name  {
  font-size: 14px;
}

.minicart .sidebar-cart-price {
  font-weight: bold;
}

.logo-gallery .swiper-slide {
  width: auto !important;
}

.page-header-inner {
  display: flex;
}

.page-header-inner .block-right {
  background-color: var(--Teal);
  flex-grow: 1;
}

.page-header-inner .block-left {
  width: 65%;
}

.block-left-top {
  background-color: var(--Donkergroen);
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.page-header-section .block-right {
  position: relative;
}

.block-left-top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  background: var(--Donkergroen);
  z-index: -1;
  width: calc((100vw - 100%) / 2);
}

.page-header-inner .block-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  background: var(--Teal);
  z-index: -1;
  width: calc((100vw - 100%) / 2);
}

.page-header-section {
  overflow-x: hidden;
}


.block-left-top > div {
  width: 55%;
}

.block-right {
  padding: 100px 0 100px 75px;
  border-radius: 0 0 0 30px;
}

.block-left-top h1 {
  color: white;
}

.block-left-top p {
  color: var(--Teal);
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 1500px) {
  .usps.usps-bottom > div:nth-child(2), .usps.usps-bottom > div:last-child {
    display: none;
  }
}

@media (max-width: 1400px) {
  .usps.usps-top > div:nth-child(2), .usps.usps-top > div:last-child {
    display: none;
  }
}

@media (max-width: 1200px) {

  .categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .block-bottom p .arrow-right, .block-top p .arrow-right {
    width: 20px;
    height: 20px;
    margin-bottom: -3px;

  }

  .block-bottom p, .block-top p {
    padding-left: 20px;
    margin-bottom: 20px;
  }

  body .logo {
    height: 35px;
  }

  .header-icons img {
    width: 28px;
    height: 28px;
  }

  .header-icons a:nth-child(2) img, .header-icons a:nth-child(1) img {
    height: 28px;
    width: 28px;
  }

  .cart-count {
    width: 20px;
    height: 20px;

  }

  .header-main-bar-inner > div {
    gap: 12px;
  }
}

@media (max-width: 991px) {

  .usp-div img {
    width: 30px;
  }

  .usp-div {
    gap: 10px;
  }

  .usp-div > div p:last-child {
    width: 100%;
  }

  .usps-inner > div:first-child::before {
    height: 400px;
    width: 400px;
    right: 50%;
    top: 10%;
    transform: translate(50%, -50%);
  }

  .usp-div > div p:first-child {
    font-size: 18px;
  }

  .usps-inner > div:last-child {
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    border-top: 1px solid var(--border);
    border-left: unset;
    width: 100%;
    z-index: 1;
    padding-top: 50px;
  }

  .usps-inner > div:first-child {
    padding-right: 0;
    padding-bottom: 50px;
    width: 100%;
    text-align: end;
    justify-content: center;
  }

  .usps-inner {
    flex-direction: column;
  }

  .container {
    max-width: 720px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .section-gap {
    height: var(--gap-mobile);
  }

  .usps-inner > div:last-child {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .container {
    max-width: 540px;
  }

  .categories-grid {
    grid-template-columns: 1fr 1fr;
  }

  .logo-gallery img {
    height: 40px;
  }
}