/* Woo Bundle Banners – hero design */

.wbb-bundles{
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* Main hero wrapper */
.wbb-hero{
  background:#090B0F;
  border-radius:32px;
  padding:36px 40px;
  color:#fff;
  overflow:hidden;
}

.wbb-hero-inner{
  display:flex;
  align-items:stretch;
  gap:48px;
}

/* Left column */
.wbb-hero-main{
  flex:1 1 0%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Badges row */
.wbb-hero-badges{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:4px;
}

.wbb-badge-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 18px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.wbb-badge-info{
  background:rgba(28,37,58,0.9);
  color:#f5f7ff;
}

.wbb-badge-discount{
  background:linear-gradient(180deg,#F4474A 0%,#D6282F 100%);
  color:#fff;
}

/* Title & subtitle */
.wbb-hero-title{
  margin:0;
  font-size:2.5rem;
  line-height:1.1;
  font-weight:800;
}

.wbb-hero-subtitle{
  margin-top:4px;
  font-size:1.1rem;
  color:#a0a7b8;
}

/* Items list */
.wbb-hero-items{
  list-style:none;
  margin:16px 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wbb-hero-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:0.98rem;
}

.wbb-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#DA2B35;
  margin-top:5px;
  flex-shrink:0;
}

.wbb-item-main{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:4px;
  flex:1 1 auto;
}

.wbb-item-title{
  font-weight:600;
}

.wbb-item-note{
  color:#c5cad7;
}

.wbb-item-price{
  font-weight:500;
  white-space:nowrap;
}

/* Pricing */
.wbb-hero-pricing{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.wbb-pricing-row{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.wbb-pricing-total .wbb-label{
  color:#a0a7b8;
  font-weight:500;
}

.wbb-pricing-total .wbb-value{
  font-size:1.4rem;
  font-weight:700;
}

.wbb-pricing-save .wbb-old{
  text-decoration:line-through;
  color:#8c93a3;
}

.wbb-pricing-save .wbb-save-text{
  color:#FFB3B8;
  font-weight:500;
}

/* CTA */
.wbb-hero-cta{
  margin-top:18px;
}

.wbb-hero .wbb-btn-primary{
  position:relative;
  overflow:hidden;
  min-width:180px;
  padding:14px 28px!important;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  color:#fff!important;
  z-index:5;
  background-color:transparent;
  background-image:linear-gradient(180deg,#DA2B35 0%,#991E25 100%);
  transition:color 300ms cubic-bezier(0.75,0,0.45,1);
}

.wbb-hero .wbb-btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  /* Horizontal sweep: lighter to darker red so motion is clearly visible */
  background-image:linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(218,43,53,0.9) 40%, rgba(153,30,37,1) 100%);
  transform:translateX(-100%);
  transition:transform 300ms cubic-bezier(0.75,0,0.45,1);
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
}

.wbb-hero .wbb-btn-primary > *{
  position:relative;
  z-index:1;
}

.wbb-hero .wbb-btn-primary:hover::before{
  transform:translateX(0);
}

.wbb-hero .wbb-btn-primary,
.wbb-hero .wbb-btn-primary:hover{
  color:#fff;
}

/* Footnote */
.wbb-hero-footnote{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.9rem;
  color:#a0a7b8;
}

.wbb-footnote-emoji{
  font-size:1rem;
}

/* Right column – media */
.wbb-hero-media{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.wbb-hero-media .book-container{
  transform:translateY(6px);
}

/* Fallback image */
.wbb-hero-fallback-thumb img{
  display:block;
  max-width:260px;
  border-radius:16px;
}

/* Responsive */
@media (max-width:1024px){
  .wbb-hero-inner{
    flex-direction:column;
    gap:24px;
  }
  .wbb-hero-media{
    justify-content:flex-start;
  }
}

@media (max-width:767px){
  .wbb-hero{
    border-radius:24px;
    padding:24px 20px;
  }
  .wbb-hero-title{
    font-size:1.8rem;
  }
  .wbb-hero-media{
    justify-content:center;
  }
}


/* Mobile refinements for bundle hero */
@media (max-width: 767px){
  .wbb-hero-badges{
    justify-content: space-between;
  }
  .wbb-hero-main{
    gap: 14px;
  }
  .wbb-hero-items{
    margin-top: 20px;
  }
  .wbb-hero-media{
    margin-top: 8px;
  }
}


/* Unified label styling */
.wbb-item-label{
  font-weight:500;
}

/* Desktop vs mobile media containers */
.wbb-hero-media--mobile{
  display:none;
}
.wbb-hero-media--desktop{
  display:flex;
}

/* Mobile / tablet layout with 3 inline covers */
@media (max-width: 1024px){
  .wbb-hero-inner{
    flex-direction:column;
    gap:24px;
  }

  .wbb-hero-media--desktop{
    display:none;
  }
  .wbb-hero-media--mobile{
    display:flex;
    justify-content:center;
    margin-top:16px;
  }

  .wbb-hero-media--mobile .wbb-hero-media-inner{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap; /* force single row */
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    width:100%;
  }

  /* Each book cover flexes to ~1/3 width, no wrapping */
  .wbb-hero .wbb-hero-media--mobile .book-container{
    flex:1 1 0;
    min-width:0;
    max-width:33.3333%;
    height:auto;
  }

  .wbb-hero .wbb-hero-media--mobile .book{
    width:100%;
    height:auto;
  }
  .wbb-hero .wbb-hero-media--mobile .book > :first-child,
  .wbb-hero .wbb-hero-media--mobile .book::after{
    width:100%;
    height:auto;
  }
}

/* Small mobile refinements */
@media (max-width: 767px){
  .wbb-hero{
    border-radius:24px;
    padding:24px 20px;
  }
  .wbb-hero-title{
    font-size:1.9rem;
  }
  .wbb-hero-main{
    gap:14px;
  }
  .wbb-hero-items{
    margin-top:20px;
  }
  .wbb-hero-media--mobile{
    margin-top:18px;
  }
  .wbb-btn-primary{
    width:100%;
    text-align:center;
  }
}

/* WBB override: keep 3 book covers in a single row on small screens */
@media (max-width: 767px){
  .wbb-hero .wbb-hero-media-inner{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
  }
  .wbb-hero .wbb-hero-media-inner .book-container{
    flex:1 1 0;
    min-width:0;
    width:100%;
    max-width:33.3333%;
    height:auto;
    transform:none;
  }
  .wbb-hero .wbb-hero-media-inner .book{
    width:100%;
    height:auto;
  }
  .wbb-hero .wbb-hero-media-inner .book > :first-child,
  .wbb-hero .wbb-hero-media-inner .book::after{
    width:100%;
    height:auto;
  }
}