@media only screen and (max-width: 720px) {
.book-container {
  max-width: 28%!important;
}
}
.book-container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 300px;
  margin: 0;
  padding: 0;
  line-height: 0;
  perspective: 600px;
  overflow: visible; /* allow 3D rotation without clipping */
}

/* Realistic bottom shadow under the book, kept inside the 200x300 box */
.book-container::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 28%!important;
  height: 18px;
  z-index: 0;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(3px);
  opacity: 0.8;
  pointer-events: none;
}

@keyframes bookInitAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.book {
  --book-back-color: #01060f; /* default if none is set */

  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 bookInitAnimation;
  z-index: 1; /* above the shadow */
}

.book-container:hover .book,
.book-container:focus .book,
.book-container.book-touched .book {
  transform: rotateY(0deg);
}

/* FRONT COVER (image) */
.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 300px;
  transform: translateZ(15px);
  background-color: var(--book-back-color);
  border-radius: 0 2px 2px 0;
  box-shadow: none; /* no glow */
  object-fit: cover;
  display: block;
}

/* PAGE BLOCK / SPINE with subtle printed-page texture */
.book::before {
  position: absolute;
  content: '';
  left: 0;
  top: 1px;
  width: 28px;
  height: 298px;
  transform: translateX(184px) rotateY(90deg);
  border-radius: 1px;

  /* subtle printed-page texture using layered gradients */
  background:
    /* soft vertical shading */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.09) 0%,
      rgba(0, 0, 0, 0.02) 40%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    /* fine horizontal stripes to simulate pages */
    repeating-linear-gradient(
      90deg,
      #f5f5f5 0px,
      #f5f5f5 2px,
      #f0f0f0 2px,
      #f0f0f0 4px
    );
}

/* BACK COVER */
.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 200px;
  height: 300px;
  transform: translateZ(-15px);
  background-color: var(--book-back-color);
  border-radius: 0 2px 2px 0;
  box-shadow: none; /* no outer glow */
}

/* Baseline responsive scaling */
@media (max-width: 768px) {
  .book-container {
    width: 150px;
    height: 225px;
  }
  .book {
    width: 150px;
    height: 225px;
  }
  .book > :first-child,
  .book::after {
    width: 150px;
    height: 225px;
  }
  .book::before {
    width: 22px;
    height: 223px;
    transform: translateX(138px) rotateY(90deg);
  }
}

/* Small 3D book variant for bundle hero on mobile (100x150) */
@media (max-width: 767px){
  .wbb-hero .book-container.wbb-hero-book--small{
    max-width:none !important;         /* cancel global 28% max-width */
    width:100px !important;
    height:150px !important;
    flex:0 0 auto !important;
  }

  .wbb-hero .book-container.wbb-hero-book--small .book{
    width:100px !important;
    height:150px !important;
  }

  .wbb-hero .book-container.wbb-hero-book--small .book > :first-child,
  .wbb-hero .book-container.wbb-hero-book--small .book::after{
    width:100px !important;
    height:150px !important;
  }

  .wbb-hero .book-container.wbb-hero-book--small .book::before{
    width:15px !important;
    height:148px !important;
    transform: translateX(92px) rotateY(90deg);
  }
}