/* Light Sweep Animation */
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.light-sweep-effect {
    position: relative;
    overflow: hidden; /* Ensure the shine doesn't spill out */
    transition: all 0.3s ease;
    z-index: 1; /* Ensure text is above if we change background */
}

/* The Shine Effect */
.woocommerce button.button::after,
.woocommerce .single_add_to_cart_button::after,
.light-sweep-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start outside the left edge */
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg); /* Slant the shine */
    transition: none; /* No transition on the element itself, we animate left */
    pointer-events: none; /* Let clicks pass through */
    z-index: -1; /* Behind the text but above the background? Actually need to be careful with z-index */
}

/* Fix z-index issue: Button needs to be context, text needs to be visible */
/* Standard WP buttons usually have text inside. ::after is on top of background but below content if content is wrapped, but usually it's just text node */
/* To be safe, we might need a span for text, but we can't easily add that via CSS alone. 
   Instead, we rely on the semi-transparent white not obscuring text too much, or use z-index if possible. 
   For standard buttons, z-index -1 on ::after works if button has no background set on a lower layer, but usually button HAS background.
   So ::after needs to be positive z-index, but with some opacity.
*/
.woocommerce button.button::after,
.woocommerce .single_add_to_cart_button::after,
.light-sweep-effect::after {
    z-index: 2; /* Needs to be on top of the button background */
}

/* Hover State - Trigger the animation */
.woocommerce button.button:hover::after,
.woocommerce .single_add_to_cart_button:hover::after,
.light-sweep-effect:hover::after {
    animation: lightSweep 0.75s; /* Run animation once */
    left: 100%; /* Move to right */
}

@keyframes lightSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}