Product Magnify Not Working - Dawn 12.0.0

[nextdooruser]

Hello,

I added a custom-coded product badge to product-thumbnail.liquid. I am currently using the Dawn theme version 12.0.0.

The code section is:

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
    <span class="product__media-icon motion-reduce quick-add-hidden{% if media.media_type == 'image' %} product__media-icon--{{ section.settings.image_zoom }}{% endif %}" aria-hidden="true">
      {%- liquid
        case media.media_type
        when 'video' or 'external_video'
          render 'icon-play'
        when 'model'
          render 'icon-3d-model'
        else
          render 'icon-zoom'
        endcase
      -%}
    </span>
    {%- render 'loading-spinner' -%}
    <div class="product__media media media--transparent">
      {{ media.preview_image | image_url: width: 1946 | image_tag:
        class: image_class,
        loading: lazy,
        sizes: sizes,
        widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
      {% if product.tags contains 'Seasonal' %} 
      {% render 'product-badge-seasonal' %} 
      {% endif %}
    </div>
    <button class="product__media-toggle quick-add-hidden product__media-zoom-{{ section.settings.image_zoom }}" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  </modal-opener>

The custom-added code snippet is:

{% if product.tags contains 'Seasonal' %} 
      {% render 'product-badge-seasonal' %} 
      {% endif %}

The custom-added code snippet CSS is:

.product .product__media .product-badge-seasonal {
    display: flex;
    align-items: center;
    right: 10px;
    left: auto;
    top: 10px;
    position: absolute;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 10px;
    height: auto;
    width: auto;
}

.product .product__media .seasonal-svg-icon {
    margin-right: 5px;
    width: 20px;
    height: auto;
    position: relative;
}

.product .product__media .seasonal-span-label {
    font-size: 14px;
    line-height: 0; 
    color: rgb(61 58 56);
    position: relative;
}

This is being pulled in from a custom liquid file I made. My issue is that since I have added this, it's working beautifully, but now the "click image to magnify" is not working, and the magnification icon isn't showing up. No idea as to why.

Any help on why magnification is not working would be greatly appreciated; thank you!