:root {
    --laluna-primary: #7F7EFF;
    --laluna-secondary: #A390E4;
    --laluna-accent: #C69DD2;
}


body.laluna-bg {
    background: linear-gradient(120deg, var(--laluna-primary), var(--laluna-secondary), var(--laluna-accent));
    background-size: 300% 300%;
    animation: bgMove 18s ease infinite;
}


@keyframes bgMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.laluna-navbar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    transition: background 0.3s ease;
}


.laluna-card {
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.laluna-card:hover {
    transform: translateY(-6px);
}


.laluna-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
                transform 0.6s cubic-bezier(.22,1,.36,1);
}
.laluna-reveal.active {
    opacity: 1;
    transform: none;
}


.cart-badge {
    position: absolute;
    top: 2px;
    right: -6px;
    background: #ff5c8a;
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 0 0 0 2px #1f1f1f;
}