Color variant bugged - image display is not shown, at a random pattern

Topic summary

Randomly one color variant image fails to display on the Nest Bed product page in Shopify Dawn v13.0.0; on each load, exactly one of 8 colors is hidden.

Root cause identified in CSS: under the desktop media query (min-width: 750px), non-active gallery items are set to display: none for .product–thumbnail_slider .product__media-item:not(.is-active), which sometimes hides a variant image.

Proposed fixes: either change those items to display: block or remove the slider selector from the rule that hides non-active items. Step-by-step screenshots were provided to add custom CSS after base.css and to make changes in a staging theme first.

Implemented resolution: corrected a selector typo (.product__media-item–variant:first-child with an unintended space) and forced display: block !important. Variant images now show as intended.

New issue (desktop only; mobile OK): clicking other product photos displays the clicked image below the variant image, suggesting duplicate rendering.

Latest finding: the template contains two slider-component instances, likely causing the duplication. Further investigation is ongoing; no final fix yet.

Notes: screenshots of devtools and theme editor were central to diagnosing and applying CSS changes.

Summarized with AI on December 27. AI used: gpt-5.

Hello @ZinoJK , please add it below the “base.css” named line. below 280th line. Please check it.