.sp-flipbook-turn {
  overflow: visible;
}

.sp-flipbook-turn.is-prev {
  transform-origin: center center;
  transform: scaleX(-1);
}

.sp-curl-segment {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(100% / var(--curl-strips) + 1.2px);
  transform-style: preserve-3d;
  will-change: transform, filter;
}

.sp-curl-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.sp-curl-face.is-back { transform: rotateY(180deg); }
.sp-curl-texture {
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: calc(var(--curl-strips) * 100%) 100%;
}
.sp-curl-face.is-back .sp-curl-texture { transform: scaleX(-1); }
.sp-flipbook-turn.is-prev .sp-curl-face.is-front .sp-curl-texture { transform: scaleX(-1); }
.sp-flipbook-turn.is-prev .sp-curl-face.is-back .sp-curl-texture { transform: none; }
.sp-curl-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 36%, rgba(255,255,255,.24) 78%, rgba(0,0,0,.12));
  opacity: var(--curl-shade, 0);
  pointer-events: none;
}
.sp-curl-edge {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.82);
  box-shadow: 1px 0 7px rgba(0,0,0,.18);
}

@media (max-width: 720px) {
  .sp-builder-flipbook {
    padding-left: 4px;
    padding-right: 4px;
  }

  .sp-flipbook {
    --book-height: var(--book-height-mobile) !important;
    padding: 8px 6px 36px;
  }

  .sp-flipbook-arrow {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .9);
    font-size: 25px;
  }

  .sp-flipbook-arrow.is-prev { left: 2px; }
  .sp-flipbook-arrow.is-next { right: 2px; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .sp-flipbook {
    --book-height: var(--book-height-tablet) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-curl-segment { will-change: auto; }
}