/*
 * PM Shop Hero Purple Persistent V32
 * Aksen hero dan CTA tetap ungu sebelum, saat, dan setelah popup dibuka/ditutup.
 */
:root {
    --pm32-purple-text: linear-gradient(90deg, #7e22ce 0%, #9333ea 48%, #c026d3 100%);
    --pm32-purple-button: linear-gradient(135deg, #6d28d9 0%, #9333ea 55%, #c026d3 100%);
    --pm32-purple-button-hover: linear-gradient(135deg, #5b21b6 0%, #7e22ce 55%, #a21caf 100%);
}

html body .hero-title > span,
html body h1.hero-title span,
html.pm-light body .hero-title > span,
html.pm-dark body .hero-title > span,
html:not(.pm-light) body .hero-title > span {
    background: var(--pm32-purple-text) !important;
    background-image: var(--pm32-purple-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

html body #hero-primary-cta,
html body .hero-actions .primary-cta,
html body #reviews .primary-cta,
html.pm-light body #hero-primary-cta,
html.pm-dark body #hero-primary-cta {
    background: var(--pm32-purple-button) !important;
    background-color: #7e22ce !important;
    background-image: var(--pm32-purple-button) !important;
    border-color: rgba(216, 180, 254, .64) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 18px 40px rgba(147, 51, 234, .32) !important;
}

html body #hero-primary-cta:hover,
html body #hero-primary-cta:focus-visible,
html body .hero-actions .primary-cta:hover,
html body .hero-actions .primary-cta:focus-visible,
html body #reviews .primary-cta:hover,
html body #reviews .primary-cta:focus-visible {
    background: var(--pm32-purple-button-hover) !important;
    background-image: var(--pm32-purple-button-hover) !important;
    box-shadow: 0 20px 44px rgba(147, 51, 234, .40) !important;
}

html body #hero-primary-cta *,
html body .hero-actions .primary-cta *,
html body #reviews .primary-cta * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}