.wolff-carousel{
  position: relative;
  /* Make the block flush with surrounding groups (no mysterious outer spacing) */
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  --wolff-gap: 16px;
  --wolff-slide-w-desktop: 80%;
  --wolff-slide-w-tablet: 88%;
  --wolff-slide-w-mobile: 92%;

  /* Motion */
  --wolff-scroll-duration: 1300ms;
  --wolff-hover-duration: 300ms;
  --wolff-ease: cubic-bezier(.78,0,.22,1);

  /* Accent fallback chain (Global Styles -> primary -> default) */
  --wolff-accent-1: var(--wp--preset--color--accent-1, var(--wp--preset--color--primary, #177B57));

  /* Arrows: allow easy theming/overrides without changing markup */
  --wolff-arrow-color: currentColor;
  --wolff-arrow-hover-color: var(--wolff-accent-1);

  /* Arrows */
  --wolff-arrow-size: 28px;

  /* Arrow vertical positioning (useful for mobile)
     - Default keeps arrows centered.
     - Override per carousel via CSS variables.
  */
  --wolff-arrow-shift-y: 0px;        /* desktop/tablet: add/subtract pixels from center */
  --wolff-arrow-shift-y-mobile: 0px; /* mobile override (used at <= 768px) */

  /* Optional: cap slide width in px (content / wide / custom). Default is unlimited. */
  --wolff-slide-max: 9999px;

  /* Derived */
  --wolff-slide-w: var(--wolff-slide-w-desktop);
}

@media (max-width: 1024px){
  .wolff-carousel{
    --wolff-slide-w: var(--wolff-slide-w-tablet);
  }
}
@media (max-width: 768px){
  .wolff-carousel{
    --wolff-slide-w: var(--wolff-slide-w-mobile);
    /* Allow moving arrows down on mobile without touching markup */
    --wolff-arrow-shift-y: var(--wolff-arrow-shift-y-mobile);
  }

  /* Optional: hide arrows on mobile (<=768px) */
  .wolff-carousel[data-hide-arrows-mobile="1"] .wolff-carousel__nav{ display: none !important; }
}

/* While animating with buttons: disable snap so you SEE the movement (Safari fix + no snapping mid-cancel) */
.wolff-carousel.is-animating .wolff-carousel__viewport{
  scroll-snap-type: none;
}

/* Viewport */
.wolff-carousel__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  /* Prevent iOS/Safari tap highlights / focus rectangles on the viewport itself */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.wolff-carousel__viewport:focus{ outline: none; box-shadow: none; }
.wolff-carousel__viewport:focus:not(:focus-visible){ outline: none; box-shadow: none; }
.wolff-carousel__viewport:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--wolff-accent-1); border-radius: 12px; }
.wolff-carousel__viewport::-webkit-scrollbar{ display: none; }

/* Track */
.wolff-carousel__track{
  display: flex;
  gap: var(--wolff-gap);
  /* No extra top/bottom padding: keep surrounding blocks perfectly bündig */
  padding: 0;
  align-items: stretch;
}

/* Slide */
.wolff-carousel__slide{
  flex: 0 0 min(var(--wolff-slide-w), var(--wolff-slide-max));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Directional peek: never both sides at once */
.wolff-carousel.is-peek-left .wolff-carousel__slide{ scroll-snap-align: end; }

/* Optional: show a preview on BOTH sides (center snapping) */
.wolff-carousel.is-peek-both .wolff-carousel__slide{ scroll-snap-align: center; }
.wolff-carousel.is-peek-both.is-peek-left .wolff-carousel__slide,
.wolff-carousel.is-peek-both.is-peek-right .wolff-carousel__slide{ scroll-snap-align: center; }

/* When center-peek is enabled, pad the viewport so slides sit inside the global content/wide widths */
.wolff-carousel.is-peek-both .wolff-carousel__viewport{
  padding-left: max(0px, calc((100% - var(--wolff-slide-max)) / 2));
  padding-right: max(0px, calc((100% - var(--wolff-slide-max)) / 2));
  scroll-padding-left: max(0px, calc((100% - var(--wolff-slide-max)) / 2));
  scroll-padding-right: max(0px, calc((100% - var(--wolff-slide-max)) / 2));
}


/* Nav */
.wolff-carousel__nav{ pointer-events: none; }

/* Buttons */
.wolff-carousel__btn{
  pointer-events: auto;
  position: absolute;
  top: calc(50% + var(--wolff-arrow-shift-y));
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--wolff-arrow-color);
  opacity: 0.95;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  transition:
    color var(--wolff-hover-duration) var(--wolff-ease),
    opacity var(--wolff-hover-duration) var(--wolff-ease),
    transform var(--wolff-hover-duration) var(--wolff-ease);
}

/* Optional: hide arrows on mobile (per carousel setting) */
@media (max-width: 768px){
  .wolff-carousel[data-hide-arrows-mobile="1"] .wolff-carousel__nav{ display: none !important; }
}


/* Remove default focus rectangle on click, keep a clean keyboard focus ring */
.wolff-carousel__btn:focus{
  outline: none;
  box-shadow: none;
}
.wolff-carousel__btn:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}
.wolff-carousel__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--wolff-accent-1);
  border-radius: 999px;
}
.wolff-carousel__btn:hover{ color: var(--wolff-arrow-hover-color); }

/* When no function: hide completely */
.wolff-carousel__btn:disabled{
  opacity: 0;
  pointer-events: none;
}

.wolff-carousel__btn::before{
  content: "";
  width: var(--wolff-arrow-size);
  height: var(--wolff-arrow-size);
  display: block;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.wolff-carousel__btn--prev{ left: 8px; }
.wolff-carousel__btn--next{ right: 8px; }

.wolff-carousel__btn--prev::before{
  -webkit-mask-image: url("arrow_back.svg");
  mask-image: url("arrow_back.svg");
}

.wolff-carousel__btn--next::before{
  -webkit-mask-image: url("arrow_forward.svg");
  mask-image: url("arrow_forward.svg");
}

/* Dots */
.wolff-carousel__dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.wolff-carousel__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--wolff-hover-duration) var(--wolff-ease);
}
.wolff-carousel__dot.is-active{ opacity: 0.95; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wolff-carousel__btn{ transition: none; }
  .wolff-carousel.is-animating .wolff-carousel__viewport{ scroll-snap-type: x mandatory; }
}