.pdp-buy-now-btn {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px;
        font-size: 15px;
        font-weight: 800;
        line-height: 1; /* v5.82: matches .add-cart-btn (.btn { line-height:1 })
                            so both buttons resolve to the same height */
        border: none;
        border-radius: var(--btn-radius);
        background: var(--clr-buy);
        color: #fff;
        cursor: pointer;
        /* v5.83: no shadow at rest — only on hover, for a flatter
           default look that "lifts" on interaction. */
        box-shadow: none;
        transition: box-shadow .18s ease, background .18s ease, filter .18s ease;
    }
    /* v8.02 — quiet hover. The fill deepens one step and picks up the
       shared neutral --cta-hover-shadow; the oversized coloured halo and
       the lift are both gone. Press feedback is a brightness step rather
       than a transform, so it cannot fight the shine sweep below. */
    .pdp-buy-now-btn:hover {
        background: var(--clr-buy-700);
        box-shadow: var(--cta-hover-shadow);
    }
    .pdp-buy-now-btn:active { background: var(--clr-buy-700); filter: brightness(.96); box-shadow: none; }
    .pdp-buy-now-btn::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: -150%;
        width: 55%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-20deg);
        animation: pdpBuyShine 3.4s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes pdpBuyShine {
        0%   { left: -150%; }
        45%  { left: 150%; }
        100% { left: 150%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .pdp-buy-now-btn::after { animation: none; }
    }