Fix pickup avail. component CSS animation

[AbiT-246]

PR Summary:

Fixes #3785

Fixed invalid CSS syntax in the pickup availability component by removing incorrectly nested media queries from the keyframe animation definition. This resolves CSS linting errors and ensures the drawer animation works correctly across all screen sizes.

Why are these changes introduced?

Fixes CSS syntax errors in component-pickup-availability.css. The @keyframes animateDrawerOpen rule contained invalid nested @media queries, which is not allowed in CSS. This caused 12 linting errors and could potentially cause the animation to fail in some browsers.

What approach did you take?

Removed the invalid nested @media queries from inside the @keyframes definition. The animation steps (0% and 100%) remain the same, and the media-specific behavior is already correctly handled outside the keyframes rule at lines 67-78, where the animation is conditionally applied on screens 750px and wider.

Other considerations

• The animation behavior is unchanged - it still slides in from the right with opacity transition
• No visual impact as the fix only corrects invalid syntax
• The media query logic at lines 67-78 already handles responsive behavior correctly

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	Remove nested media queries from keyframes	Keep nested syntax (invalid) or duplicate keyframes for each breakpoint	CSS spec doesn't allow media queries inside keyframes. The animation is simple enough that the same keyframes work for all screen sizes, with media queries controlling when/how it's applied.	None - this is the only valid approach

Visual impact on existing themes

No visual changes. This is a syntax fix only - the animation behavior and appearance remain identical. The pickup availability drawer will continue to slide in from the right on desktop screens (≥750px) as before.

Testing steps/scenarios

• Verify CSS file passes linting/validation (Theme Check)
• Test pickup availability drawer animation on product pages on desktop (≥750px)
• Test pickup availability drawer animation on mobile (<750px)
• Verify drawer slides in smoothly with opacity transition
• Confirm no console errors related to CSS parsing
• Test with products that have pickup availability enabled at store locations
• Test with products that don't have pickup availability (ensure no regressions)

Checklist

• Added PR summary for release notes

• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)

• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)

• Followed theme code principles

• Linted with Theme Check

• Tested on mobile

• Tested on multiple browsers

• Tested for accessibility

[github-actions]

This pull request has been marked as stale due to inactivity for 60 days. If no further activity occurs, it will be closed in 7 days.