/* ─── Twinkling Stars ─── */
#jj-new-arrivals,
#jj-mystery-box,
#jj-tagline,
#jj-best-sellers,
#jj-how-it-works,
#jj-custom,
#jj-testimonials,
#jj-rewards,
#jj-subscribe {
    position: relative;
    overflow: hidden;
}

#jj-new-arrivals .jj-stars-layer,
#jj-mystery-box .jj-stars-layer,
#jj-tagline .jj-stars-layer,
#jj-best-sellers .jj-stars-layer,
#jj-how-it-works .jj-stars-layer,
#jj-custom .jj-stars-layer,
#jj-testimonials .jj-stars-layer,
#jj-rewards .jj-stars-layer,
#jj-subscribe .jj-stars-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

#jj-new-arrivals .jj-container,
#jj-mystery-box .jj-container,
#jj-tagline .jj-container,
#jj-best-sellers .jj-container,
#jj-how-it-works .jj-container,
#jj-custom .jj-container,
#jj-testimonials .jj-container,
#jj-rewards .jj-container,
#jj-subscribe .jj-container {
    position: relative;
    z-index: 5;
}

.jj-star {
    position: absolute;
    color: #FFD700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

#jj-mystery-box .jj-star {
    color: #FFDF40;
    filter: drop-shadow(0 0 8px rgba(255, 223, 64, 0.7));
}

/* 4-pointed star shape */
.jj-star svg {
    display: block;
}

/* Twinkle animations */
@keyframes jj-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes jj-twinkle-alt {
    0%, 100% { opacity: 0.15; transform: scale(0.4) rotate(15deg); }
    50% { opacity: 0.9; transform: scale(1) rotate(0deg); }
}

/* Stars positioned on both edges — NOT over center content */
.jj-star--1  { top: 6%;  left: 3%;  animation: jj-twinkle 3s ease-in-out infinite; }
.jj-star--2  { top: 4%;  right: 4%; animation: jj-twinkle-alt 2.5s ease-in-out 0.8s infinite; }
.jj-star--3  { top: 25%; left: 2%;  animation: jj-twinkle 4s ease-in-out 1.5s infinite; }
.jj-star--4  { top: 22%; right: 3%; animation: jj-twinkle-alt 3.5s ease-in-out 0.3s infinite; }
.jj-star--5  { top: 45%; left: 4%;  animation: jj-twinkle 2.8s ease-in-out 2s infinite; }
.jj-star--6  { top: 50%; right: 3%; animation: jj-twinkle-alt 3.2s ease-in-out 1s infinite; }
.jj-star--7  { top: 70%; left: 2%;  animation: jj-twinkle 3.8s ease-in-out 0.5s infinite; }
.jj-star--8  { top: 75%; right: 4%; animation: jj-twinkle-alt 2.6s ease-in-out 1.8s infinite; }
.jj-star--9  { top: 12%; left: 8%;  animation: jj-twinkle 3.3s ease-in-out 2.5s infinite; }
.jj-star--10 { top: 38%; right: 7%; animation: jj-twinkle-alt 4.2s ease-in-out 0.6s infinite; }
.jj-star--11 { top: 88%; left: 5%;  animation: jj-twinkle 2.4s ease-in-out 1.2s infinite; }
.jj-star--12 { top: 62%; right: 6%; animation: jj-twinkle-alt 3.6s ease-in-out 2.2s infinite; }