/* ============================================================
   Animated discount price tag — ₹old struck through, ₹new pops in.
   Markup: .price-tag > .price-old + .price-new + .price-save
   Animation plays once when .price-tag gets .is-live (see js/price-tag.js).
   ============================================================ */
.price-tag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    font-family: 'Fraunces', serif;
    line-height: 1;
}

.price-old {
    position: relative;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--ink-faint, #6B7280);
    transition: opacity 0.4s ease 0.7s, transform 0.4s ease 0.7s;
}
.price-old::after {
    content: '';
    position: absolute;
    left: -4%;
    top: 52%;
    width: 108%;
    height: 2px;
    background: #E0463A;
    border-radius: 2px;
    transform: rotate(-8deg) scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(.6,.05,.3,1) 0.25s;
}

.price-new {
    font-size: 1.9em;
    font-weight: 600;
    color: var(--ink, #1E2438);
    opacity: 0;
    transform: translateY(8px) scale(0.6);
    transition: opacity 0.35s ease 0.75s, transform 0.55s cubic-bezier(.34,1.8,.5,1) 0.75s;
}

.price-save {
    position: relative;
    overflow: hidden;
    font-family: 'Karla', sans-serif;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #E0463A, #F08A24);
    padding: 0.4em 0.75em;
    border-radius: 999px;
    opacity: 0;
    transform: rotate(-6deg) scale(0.4);
    transition: opacity 0.3s ease 1.15s, transform 0.5s cubic-bezier(.34,1.8,.5,1) 1.15s;
}
.price-save::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-120%);
}

/* Live state */
.price-tag.is-live .price-old { opacity: 0.75; transform: scale(0.85); }
.price-tag.is-live .price-old::after { transform: rotate(-8deg) scaleX(1); }
.price-tag.is-live .price-new { opacity: 1; transform: none; }
.price-tag.is-live .price-save { opacity: 1; transform: rotate(-3deg); }
.price-tag.is-live .price-save::after { animation: price-shine 2.8s ease-in-out 1.8s infinite; }

@keyframes price-shine {
    0%        { transform: translateX(-120%); }
    40%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .price-tag *, .price-tag *::after { transition: none !important; animation: none !important; }
}