:root { --dur: 420ms; }

.bundle.bundle-product_slider{
    overflow: hidden;
}
  /* Visual width container (nav + active card within 1400px) */
  .wrapper.product-slider { max-width: 1480px; margin: 0 auto; padding: 0 10px;border-bottom: 1px solid var(--maincolor);
    padding-bottom: 70px; }

  .slider > .pane { display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start;padding-top: 20px; }

  /* Left navigation */
  .side-nav{
    list-style:none; margin:0; padding:0;
    max-height: 600px; overflow:auto;
  }
  .side-nav li{ border-bottom:0px solid #eee; }
  .side-nav li:last-child{ border-bottom:0; }
  .side-nav button{
    display:block; width:100%; text-align:left; padding:10px 0px;
    background:transparent; border:0; cursor:pointer; font:inherit; color:#222;
      font-size: 18px; text-transform: none; letter-spacing: 0;font-weight: 300;
  }
  .side-nav li.active>button, .side-nav button:focus-visible, .side-nav button:hover{ background-image: url("arrow.svg");background-repeat: no-repeat;background-position: 100% center;background-size: 25px;}
    
  /* Viewport: AUTO HEIGHT with smooth transition; peek may overflow right */
  .viewport{
    position:relative;
    overflow:visible;
    min-height: 380px;                      /* ← requested minimum */
    height: auto;                           /* JS sets explicit height for transitions */
    transition: height var(--dur) ease;     /* smooth height change per active card */
    --peek:20px; --gap:24px; --card:600px;  /* set by JS */
    border-radius:18px;
  }
  .stack{ position:relative; width:100%; height:auto; }

  /* Cards: height = content (auto) */
  .card.teaser-product{
    position:absolute; top:0; left:0; width:var(--card); box-sizing:border-box;
    transition: transform var(--dur) ease, opacity var(--dur) ease;
    will-change: transform; background-color: white;
    /* base z-index set inline via JS: 10,20,30,... */
  }
  .card.teaser-product h3{ margin:0 0 .5rem; }

  /* Card inner layout: image 1/3 (left), long text 2/3 (right) */
  /*.card.teaser-product .inner{
    display:grid; grid-template-columns: 1fr 2fr; gap:16px;
  }
  .card.teaser-product .media{
    border-radius:12px; overflow:hidden; background:#eee;
  }
  .card.teaser-product .media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .card.teaser-product .copy{
    line-height:1.5; color:#333;
  }
  .card.teaser-product .copy p{ margin:.5rem 0; }*/

  /* Layering helpers */
  /*.card.teaser-product.lift-out{ z-index: 9000 !important; }   /* outgoing, just under incoming */
  /*.card.teaser-product.lift-in { z-index: 10000 !important; }  /* incoming, always on top */
  .card.teaser-product.keep-opaque { opacity: 1 !important; }  /* outgoing stays fully visible on NEXT */
  .card.teaser-product.fade-out-lock,
  .card.teaser-product.fade-in-lock{ transition: opacity var(--dur) ease !important; pointer-events:none; }
  .card.teaser-product.no-anim{ transition: none !important; }

  /* Controls */
  .controls{ display: grid;grid-template-columns: 260px 1fr;justify-content:start; gap:60px; margin-top:1rem; }
.controls .left-controls{display: flex; gap: 1em;justify-content: end;margin-top: 30px;}
  .nav{ width:52px; height:52px; border:0; border-radius:999px; background:var(--blue); color:#fff; cursor:pointer; display: flex; align-items: center; justify-content: center;}
.nav img{
    width: 23px;
}
  .nav:disabled{ opacity:.4; cursor:not-allowed; }
.card.teaser-product img{
    display: block;
}
.card.teaser-product figure{
    background-color: #f7f7f7;
}
.card.teaser-product .teaser-title{
    margin-top: 25px;
    text-align: center;
}
.card.teaser-product .teaser-title  a{
        color: var(--secondcolor);
    border: 1px solid var(--secondcolor);
    padding: 10px 20px;
    position: relative;
    border-radius: 30px;
    margin-bottom: 20px;
    display: inline-block;
    transition: ease-in-out .3s;
}
.card.teaser-product .teaser-title  a:hover{
        background-color: var(--secondcolor);
    color: white;
    border: 1px solid var(--secondcolor);
    padding: 10px 20px;
    position: relative;
    border-radius: 30px;
    margin-bottom: 20px;
    display: inline-block;
    transition: ease-in-out .3s;
}
/* De basis van de kaart en het 3D-perspectief */
.flip-card {
  background-color: transparent;
  width: 360px; /* Pas aan naar jouw gewenste breedte */
  height: 500px; /* Pas aan naar jouw gewenste hoogte */
  perspective: 1000px; /* Geeft het 3D-effect */
}

/* De container die daadwerkelijk gaat draaien */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s; /* Snelheid van de animatie */
  transform-style: preserve-3d; /* Zorgt dat het 3D blijft */
}

/* De feitelijke HOVER actie: draai de container 180 graden */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Positionering voor zowel de voor- als achterkant */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Voor Safari */
  backface-visibility: hidden; /* Verbergt de achterkant tijdens het draaien */
}

/* Zorg dat de afbeeldingen de hele container vullen */
.flip-card-front img, .flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zorgt dat de afbeelding mooi schaalt */
  opacity: 1;
}

/* De achterkant staat standaard al 180 graden gedraaid */
.flip-card-back {
  transform: rotateY(180deg);
}
  /* RESPONSIVE: hide nav under 500px, stack media/text vertically in the card */
  @media (max-width: 500px){
    .slider > .pane{ grid-template-columns:1fr; }
    .side-nav{ display:none; }
    .card.teaser-product .inner{ grid-template-columns: 1fr; }
    .card.teaser-product .media img{ height:220px; } /* nice top block on small screens */
  }

/* The Twig has no side navigation: the viewport fills the wrapper. */
.wrapper.product-slider {
  box-sizing: border-box;
  width: 100%;
}

.product-slider .slider > .pane {
  grid-template-columns: minmax(0, 1fr);
}

.product-slider .viewport {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.product-slider .stack {
  min-width: 0;
}

/* Align the buttons without reserving an unused navigation column. */
.product-slider .controls {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.product-slider .controls > .empty {
  display: none;
}


/* Mobile: one complete card, without the desktop peek. */
@media (max-width: 767px) {
  .product-slider .viewport {
    overflow: hidden;
    border-radius: 0;
    touch-action: pan-y pinch-zoom;
  }

  .product-slider .card.teaser-product {
    max-width: 100%;
  }

  .product-slider .flip-card {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .product-slider .card.teaser-product .teaser-title a {
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .product-slider .controls .left-controls {
    justify-content: center;
  }
}