/* Home redesign — product sections (Hot Deals, New Arrivals, Top Rated, Best Sellers)
   Reuses shared .rbx-* system from home-redesign.css. Only genuinely new rules live here.
   Light + dark aware (body[theme="dark"]). */

/* New Arrivals "spark" badge — wraps a shared .rbx-pc card.
   Sits top-right (discount badge owns top-left). z-index is BELOW the card's
   hover actions (.rbx-pc-actions, z-index 4) so those cover it on hover. */
.rbx-newcard{ position:relative; height:100%; }
.rbx-newcard > .rbx-pc{ height:100%; }
.rbx-ribbon-new{
    position:absolute; top:10px; right:10px; z-index:2;
    width:26px; height:26px; border-radius:50%;
    display:grid; place-items:center;
    color:#fff; font-size:12px; line-height:1;
    background:linear-gradient(135deg, var(--rbx-accent, #2f9e2f), var(--rbx-accent-deep, #1f7a20));
    box-shadow:var(--rbx-shadow-sm, 0 8px 18px -12px rgba(16,30,40,.20));
    pointer-events:none;
    transition:opacity .18s ease;
}
.rbx-newcard > .rbx-pc:hover ~ .rbx-ribbon-new,
.rbx-newcard:hover .rbx-ribbon-new{ opacity:0; }
.rbx-ribbon-new .bi{ animation:rbx-spark 2.4s ease-in-out infinite; }

@keyframes rbx-spark{
    0%, 100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.15); opacity:.85; }
}

body[theme="dark"] .rbx-ribbon-new{
    box-shadow:var(--rbx-shadow-sm, 0 8px 18px -12px rgba(0,0,0,.55));
}

@media (max-width:767px){
    .rbx-ribbon-new{ width:22px; height:22px; font-size:10.5px; top:8px; right:8px; }
}

@media (prefers-reduced-motion: reduce){
    .rbx-ribbon-new .bi{ animation:none; }
}