.product-media-container {
      --media-preview-ratio: 1;
    }

    
      .product-media-container.constrain-height {
        background-color: var(--color-background);
      }

      .product-media-container.constrain-height:has(.product-media-constraint-wrapper) {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* Mobile constraint wrapper sizing - use width-based approach since max-height is disabled */
      .product-media-constraint-wrapper {
        width: 100%;
        max-width: 100%;
        flex-shrink: 0;
      }

      /* Desktop constraint wrapper sizing */
      @media screen and (min-width: 750px) {
        .product-media-constraint-wrapper {
          width: min(100%, calc(var(--constrained-height) * 1));
        }
      }
    

    /* Constrain all deferred-media content to parent bounds when specific aspect ratio is set */
    .product-media-container:not(.dialog-zoomed-gallery *) .product-media deferred-media,
    .product-media-container:not(.dialog-zoomed-gallery *) .product-media product-model {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    /* Ensure video and iframe elements respect container aspect ratio */
    .product-media-container:not(.dialog-zoomed-gallery *) .product-media deferred-media video,
    .product-media-container:not(.dialog-zoomed-gallery *) .product-media deferred-media iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 3D models need special handling since they don't support object-fit */
    .product-media-container:not(.dialog-zoomed-gallery *) .product-media product-model model-viewer {
      width: 100%;
      height: 100%;
    }

    /* Clear gallery aspect ratio for zoom dialog - let media display at natural aspect ratios */
    .dialog-zoomed-gallery .product-media {
      --gallery-aspect-ratio: var(--ratio);
    }
  

  

  
    .media-fit-cover {
      --product-media-fit: cover;
    }

    /* Media fit for all media elements - default to cover */
    .media-fit-cover :is(img, video, iframe, .deferred-media__poster-image) {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    /* 3D Models (no object-fit support, just sizing) */
    .media-fit-cover model-viewer {
      width: 100%;
      height: 100%;
    }
  

  /* Add background color so carousel arrows' mix-blend-mode works correctly even on transparent areas. */
  
    .media-fit-contain :is(img, .deferred-media__poster-image) {
      background-color: var(--color-background);
    }
  

  
  
  
    
    ::view-transition-old(gallery-item-open),
    ::view-transition-new(gallery-item-open),
    ::view-transition-old(gallery-item-close),
    ::view-transition-new(gallery-item-close) {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: var(--gallery-media-focal-point, center);
    }
  
  

  :root { --gallery-media-border-radius: 8px; }