:root {
  --cubic-default: cubic-bezier(0.504, 0.01, 0.01, 1);
}

/* ------------------------- Theme Colors -------------------------------------------
:root,
[data-theme="light"],
[data-theme="dark"] [data-theme="invert"] {
  --_theme---background: var(--_swatch---mineral-white--100);
  --_theme---background-secondary: var(--_swatch---mineral-white--80);
  --_theme---background-tertiary: var(--_swatch---mineral-white--60);
  --_theme---content: var(--_swatch---techno-violet--80);
  --_theme---content-secondary: var(--_swatch---techno-violet--60);
  --_theme---border: var(--_swatch---mineral-white--80);
  --_theme---selection-background: var(--_swatch---dakar-yellow--50);
  --_theme---selection-content: var(--_swatch---dark-100);
  --_theme---btn--background: var(--_swatch---techno-violet--100);
  --_theme---btn--content: var(--_swatch---mineral-white--100);
}

[data-theme="dark"],
[data-theme="invert"],
[data-theme="light"] [data-theme="invert"] {
  --_theme---background: var(--_swatch---techno-violet--100);
  --_theme---background-secondary: var(--_swatch---techno-violet--80);
  --_theme---background-tertiary: var(--_swatch---techno-violet--60);
  --_theme---content: var(--_swatch---mineral-white--100);
  --_theme---content-secondary: var(--_swatch---mineral-white--80);
  --_theme---border: var(--_swatch---techno-violet--60);
  --_theme---selection-background: var(--_swatch---dakar-yellow--50);
  --_theme---selection-content: var(--_swatch---light-0);
  --_theme---btn--background: var(--_swatch---mineral-white--100);
  --_theme---btn--content: var(--_swatch---techno-violet--100);
} */

/* ------------------------------ NAV ------------------------------ */
.nav {
  --nav-transition-duration: 0.5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: transform var(--nav-transition-duration) var(--cubic-default);
}

/* Nav visible (default) */
.nav[data-nav="visible"] {
  transform: translateY(0);
}

/* Nav hidden (when scrolling down) */
.nav[data-nav="hidden"] {
  transform: translateY(-100%);
}

.nav-primary_container {
  transition: padding var(--nav-transition-duration) var(--cubic-default),
    color var(--nav-transition-duration) var(--cubic-default);
}

.nav-secondary_container {
  transition: color var(--nav-transition-duration) var(--cubic-default),
    border-top-color var(--nav-transition-duration) var(--cubic-default);
}

.nav .btn_background {
  transition: background-color var(--nav-transition-duration)
    var(--cubic-default);
}

.nav .btn {
  transition: color var(--nav-transition-duration) var(--cubic-default);
}

.nav-bg {
  transform: scaleY(0);
  background-color: var(--_swatch---mineral-white--100);
  transform-origin: top;
  transition: transform var(--nav-transition-duration) var(--cubic-default);
}

[data-scrolling-started="true"] .nav-bg {
  transform: scaleY(1);
}

[data-scrolling-direction="down"] .nav-primary_container {
  padding: 0.5em var(--container-padding);
}

[data-scrolling-started="true"] .nav-secondary_container {
  border-top-color: rgba(48, 16, 107, 0.2);
}

[data-scrolling-started="true"] .nav-primary,
[data-scrolling-started="true"] .nav-secondary {
  color: var(--_swatch---techno-violet--100);
}

[data-scrolling-started="true"] .nav-primary .btn_background {
  background-color: var(--_swatch---techno-violet--100);
}

[data-scrolling-started="true"] .nav-primary .btn {
  color: var(--_swatch---mineral-white--100);
}

/* Nav Dropdown Menu */

.nav_dropdown-menu .btn.is-link {
  color: var(--_swatch---techno-violet--100);
}

.nav_menu-btn {
  transition: gap 0.5s var(--cubic-default);
}

.nav_menu-btn:hover {
  gap: 0.3em;
}

/* Nav Menu Hover */
.nav_dropdown-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10%);
  transition: visibility 0.5s var(--cubic-default),
    transform 0.5s var(--cubic-default), opacity 0.5s var(--cubic-default);
}

[data-aanbod-dropdown-status="active"] .nav_dropdown-menu {
  visibility: visible;
  transform: translateY(0%);
  opacity: 1;
}

[data-aanbod-dropdown-status="not-active"] .nav_dropdown-menu {
  transition: visibility 0.2s var(--cubic-default),
    transform 0.5s var(--cubic-default), opacity 0.2s var(--cubic-default);
}

.menu-link p {
  transition: transform 0.4s var(--cubic-default);
}

.menu-link p::before {
  content: "";
  width: 0.25em;
  height: 0.25em;
  background-color: var(--_swatch---dakar-yellow--50);
  position: absolute;
  transform: translateX(-2em);
  top: 45%;
  left: 0;
  transition: transform 0.6s var(--cubic-default);
}

.menu-link:hover p {
  transform: translateX(1em);
}

.menu-link:hover p::before {
  transform: translateX(-1em);
}

/* Navigation Links Hover */

.nav_link::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--_swatch---dakar-yellow--50);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--cubic-default);
}

.nav_link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ------------------------------ IMAGE CUTOUT ------------------------------ */

[data-img-cutout] {
  --inset: 4rem; /* dit kun je aanpassen voor grootte */
}

[data-img-cutout="bottomright"] {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--inset)),
    calc(100% - var(--inset)) 100%,
    0 100%
  );
}

[data-img-cutout="bottomleft"] {
  clip-path: polygon(
    var(--inset) 100%,
    100% 100%,
    100% 0,
    0 0,
    0 calc(100% - var(--inset))
  );
}

[data-img-cutout="topright"] {
  clip-path: polygon(
    0 0,
    calc(100% - var(--inset)) 0,
    100% var(--inset),
    100% 100%,
    0 100%
  );
}

[data-img-cutout="topleft"] {
  clip-path: polygon(var(--inset) 0, 100% 0, 100% 100%, 0 100%, 0 var(--inset));
}

/* ------------------------------ BREADCRUMBS ------------------------------ */
.breadcrumbs_item a {
  text-decoration: none;
}

.breadcrumbs_item:not(:last-child)::after {
  content: "/";
  margin-left: 0.5em;
}

.breadcrumbs_item {
  opacity: 0.4;
  font-weight: 500;
}

.breadcrumbs_item:last-child {
  color: white;
  font-weight: 500;
  opacity: 1;
}

/* ------------------------------ BUTTONS ------------------------------ */

.btn .btn_text {
  text-shadow: 0px 2em currentColor;
  transition: transform 0.3s var(--cubic-default);
}

.btn:hover .btn_text {
  transform: translateY(-2em);
}

.btn_icon-1,
.btn_icon-2,
.btn_icon-bg {
  transition: transform 0.5s var(--cubic-default);
}

.btn.is-link {
  border-radius: 0em;
}

.btn.is-link .btn_container span {
  text-shadow: 0px 1.6em currentColor;
  transition: transform 0.3s var(--cubic-default);
  display: inline-block;
}

.btn.is-link:hover .btn_container span {
  transform: translateY(-1.6em);
}

.btn.is-link:hover .btn_icon-1 {
  transform: translateX(3em);
}

.btn.is-link:hover .btn_icon-2 {
  transform: translateX(0em);
}

.btn.is-link:hover .btn_icon-bg {
  transform: scale(0.85);
}

/* ------------------------------ VOORRAAD ------------------------------ */

/* Default Styles */
/* https://stackoverflow.com/questions/49553864/seamless-move-of-an-arrow-in-a-loop-with-css-animation */

.voorraad_item .btn {
  transform: translateY(1em);
  transition: transform 0.3s var(--cubic-default);
}

.voorraad_item .voorraad_img-cta {
  opacity: 0;
  transition: opacity 0.1s var(--cubic-default);
}

.voorraad_item .voorraad_img-overlay {
  opacity: 0;
  transition: opacity 0.2s var(--cubic-default);
}

.voorraad_item:hover .voorraad_img-overlay {
  opacity: 0.6;
}

.voorraad_item:hover .voorraad_img-cta {
  opacity: 1;
  transition: opacity 0.2s var(--cubic-default);
}

.voorraad_item:hover .voorraad_img-cta .btn {
  transform: translateY(0em);
}

/* ------------------------------ REVIEWS HOVER ------------------------------ */

.swiper-slide.is-reviews img {
  transition: transform 0.45s var(--cubic-default);
  transform-origin: center;
}

.swiper-review_content {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transition: all 0.45s var(--cubic-default);
}

.swiper-slide.is-reviews:hover .swiper-review_content {
  transform: translateY(0%);
  opacity: 1;
  visibility: visible;
  filter: blur(0px);
}

.swiper-slide.is-reviews:hover img {
  transform: scale(1.05) rotate(0.001deg);
}

/* ------------------------------ SWIPER ------------------------------ */

.swiper {
  border-radius: 0.25em !important;
}

.swiper-wrapper {
  transition-timing-function: var(--cubic-default) !important;
}

[data-swiper-total] {
  opacity: 0.4;
}

.swiper-pagination {
  position: relative !important;
}

.swiper-pagination-bullet {
  background: var(--_theme---content-secondary) !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--_swatch---dakar-yellow--50) !important;
}

/* Swiper Buttons */

.swiper-pagination-button .icon-1,
.swiper-pagination-button .icon-2,
.swiper-pagination-button .swiper-pagination-button-bg {
  transition: transform 0.5s var(--cubic-default);
}

.swiper-pagination-button:hover .swiper-pagination-button-bg {
  transform: scale(0.85);
}

.swiper-pagination-button:hover .icon-1 {
  transform: translateX(-100%);
}

.swiper-pagination-button:hover .icon-2 {
  transform: translateX(0%);
}

.swiper-pagination-button.is-second:hover .icon-1 {
  transform: translateX(100%);
}

.swiper-pagination-button.is-second:hover .icon-2 {
  transform: translateX(0%);
}

/* Swiper Voorraad Image */

/* ------ OVERIG ------- */
.swiper.is-voorraad-img {
  position: relative;
  width: 100%;
  height: calc(var(--swiper-width) * var(--swiper-image-ratio) / 100%);
  overflow: hidden;
}

.swiper.is-voorraad-img .swiper-slide {
  position: relative;
  width: var(--swiper-width);
  opacity: 0.5;
  transform: scale(0.84);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  border-radius: 0.4285rem;
}

.swiper.is-voorraad-img.swiper-backface-hidden .swiper-slide {
  transform: scale(0.84) translateZ(0);
}

.swiper.is-voorraad-img .swiper-slide.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}

.swiper.is-voorraad-img.swiper-backface-hidden
  .swiper-slide.swiper-slide-active {
  transform: scale(1) translateZ(0) !important;
}

/* ----------------- AFLEVERPAKETTEN ----------------- */

.afleverpakket_item.is-highlight::after {
  content: "Meeste waarde";
  position: absolute;
  top: 0;
  background-color: var(--_swatch---dakar-yellow--50);
  padding: 0.5em 1em;
  border-radius: 100em;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 0.875em;
  font-weight: 500;
  color: var(--_swatch---techno-violet--100);
}

.afleverpakket_item {
  transition: transform 0.3s var(--cubic-default);
}

.afleverpakket_item:hover {
  transform: translateY(-1.5em);
}

.afleverpakket_list li {
  display: flex;
  align-items: center;
}

.afleverpakket_list li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%23dac46f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M15 9.5L10.5 15L8.5 13' stroke='%23dac46f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5em;
}

/* ----------------- FORM VALIDATION ----------------- */

/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea {
  border-color: #ff4c24;
}

[data-validate].is--error .form-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success {
  opacity: 1;
}

/* ------------------------------ FOOTER ------------------------------ */

.footer_link {
  opacity: 1;
  transition: opacity 0.5s var(--cubic-default);
}

.footer_link::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--_swatch---dakar-yellow--50);
  position: absolute;
  bottom: 0%;
  left: 0%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s var(--cubic-default);
}

.footer_link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer:has(.footer_link:hover) .footer_link:not(:hover) {
  opacity: 0.4;
}

/* ------------------------------ VOORRAAD VIEW SWITCH ------------------------------ */

.voorraad_list-switch-item:first-child {
  z-index: 2;
}

.voorraad_list-switch-item {
  transition: opacity 0.2s linear;
  transition-delay: 0.25s;
}

.voorraad_item.is-list .voorraad_link {
  display: flex;
}

.voorraad_item.is-list .voorraad_img-wrap {
  width: 50%;
  margin-bottom: 0em !important;
}

.voorraad_item.is-list .voorraad_content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4em;
  background-color: var(--_theme---background-secondary);
}

/* ------------------------------ VOORRAAD FILTER ------------------------------ */

.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-menu_form-select {
  background-image: url(https://cdn.prod.website-files.com/67c5e713cd351503e66209c2/67d094e2cc0d55d07f7ca2b3_chevron-down-small.svg);
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1.5em;
}

.voorraad_filter-btn .icon-s {
  transition: transform 0.5s var(--cubic-default);
  transform: scale(1) rotate(0deg);
}

.voorraad_filter-btn:hover .icon-s {
  transform: scale(1.3) rotate(90deg);
}

/* ------------------------------ AUTO DETAIL PAGINA ------------------------------ */

.opties_tab-item {
  transition: opacity 0.3s var(--cubic-default);
}

.opties_tab-item .opties_tab-progress-w {
  background-color: var(--_theme---background-tertiary);
  transition: background-color 0.3s var(--cubic-default);
}

.opties_tab-item:hover {
  opacity: 0.6;
}

.opties_tab-item.active .opties_tab-progress-w {
  background-color: var(--_swatch---dakar-yellow--50);
}

/* Gallery Swiper Styles */
.gallery_wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.gallery-swiper {
  position: relative;
  width: 100%;
  height: calc(var(--swiper-width) * var(--swiper-image-ratio) / 100%);
  overflow: hidden;
}

.gallery-swiper .swiper-slide {
  position: relative;
  width: var(--swiper-width);
  opacity: 0.5;
  transform: scale(0.84);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  border-radius: 0.4285rem;
}

.gallery-swiper.swiper-backface-hidden .swiper-slide {
  transform: scale(0.84) translateZ(0);
}

.gallery-swiper .swiper-slide.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}

.gallery-swiper.swiper-backface-hidden .swiper-slide.swiper-slide-active {
  transform: scale(1) translateZ(0) !important;
}

.gallery-swiper .swiper-slide img.gallery_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
  color: var(--_swatch---mineral-white--100);
  background: var(--_swatch---techno-violet--100);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.gallery-swiper .swiper-button-next:after,
.gallery-swiper .swiper-button-prev:after {
  font-size: 18px;
}

.gallery-swiper .swiper-button-next:hover,
.gallery-swiper .swiper-button-prev:hover {
  background: var(--_swatch---dakar-yellow--50);
  transform: scale(1.1);
}

@media (max-width: 639px) {
  .gallery-swiper .swiper-button-next,
  .gallery-swiper .swiper-button-prev {
    width: 36px;
    height: 36px;
  }

  .gallery-swiper .swiper-button-next:after,
  .gallery-swiper .swiper-button-prev:after {
    font-size: 16px;
  }
}