/* Neutralize master section-main-product layout when the new gallery is present */
.product:has([data-pdp-gallery]) .product__info-wrapper {
  max-width: none;
  width: auto;
  padding-left: 0;
}

@media screen and (min-width: 750px) {
  .product:has([data-pdp-gallery]) .product__info-wrapper {
    padding-left: 0;
  }
}

@media screen and (min-width: 990px) {
  .product:not(.product--no-media):not(.featured-product):has([data-pdp-gallery]) .product__info-wrapper {
    max-width: none;
    width: auto;
    padding-left: 0;
  }
}

/* Product media gallery — --pdp-media-aspect-ratio set inline on [data-pdp-gallery] */

@media (width >= 48rem) {
  [data-pdp-gallery] {
    top: calc(87px + 1rem);
    transition: top 0.2s ease-in-out;

    body:has(.shopify-section-header-hidden) & {
      top: 1rem;
    }
  }
}

[data-pdp-gallery] {
  & .pdp-media-gallery__main {
    @media (width < 48rem) {
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }

    & .swiper-wrapper {
      height: auto !important;
      align-items: flex-start;
    }

    & .swiper-slide {
      height: auto !important;
    }

    & .product__modal-opener,
    & .deferred-media,
    & product-model {
      display: block;
      position: relative;
      width: 100%;
    }

    & .product__media {
      position: relative;
      width: 100%;
    }

    & .product__media > img,
    & deferred-media.pdp-media-gallery__video-media .deferred-media__poster img,
    & product-model.deferred-media .deferred-media__poster img {
      display: block;
      position: static;
      width: 100%;
      height: auto;
      aspect-ratio: var(--pdp-media-aspect-ratio);
      object-fit: cover;
      -webkit-user-drag: none;
      user-select: none;
      pointer-events: none;
    }

    & deferred-media.pdp-media-gallery__video-media {
      aspect-ratio: var(--pdp-media-aspect-ratio);

      & .deferred-media__poster {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        cursor: pointer;
        pointer-events: auto;
        background: transparent;
      }

      &[loaded] .deferred-media__poster {
        display: none !important;
        pointer-events: none;
      }

      & video,
      & iframe {
        position: relative !important;
        z-index: 3;
        display: block;
        width: 100%;
        height: auto !important;
        aspect-ratio: var(--pdp-media-aspect-ratio);
        object-fit: cover;
        margin: 0;
        pointer-events: auto;
      }

      & .ai-content-badge {
        z-index: 4;
      }
    }

    & product-model.deferred-media .deferred-media__poster {
      display: block;
      position: relative;
      width: 100%;
      padding: 0;
      cursor: pointer;
    }

    & .product__media-toggle {
      pointer-events: none;
    }

    & .product__modal-opener .product__media-icon {
      left: auto;
      right: 1.5rem;
      top: 1.5rem;
      pointer-events: auto;
      cursor: zoom-in;
      z-index: 3;
    }

    & product-model.deferred-media {
      display: none;
    }

    @media screen and (min-width: 768px) {
      & product-model.deferred-media {
        display: block;
      }
    }
  }

  & .pdp-media-gallery__thumbs {
    display: none;
  }

  & .pdp-media-gallery__nav--desktop {
    display: none;
  }

  & .pdp-media-gallery__pager {
    display: flex;
  }

  & .pdp-media-gallery__nav-btn .icon { width: 1rem; }
  & .pdp-media-gallery__nav-btn--prev .icon { transform: rotate(90deg); }
  & .pdp-media-gallery__nav-btn--next .icon { transform: rotate(-90deg); }
  & .pdp-media-gallery__pager .pdp-media-gallery__nav-btn {
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    box-shadow: none;
  }
  & .pdp-media-gallery__pager .pdp-media-gallery__nav-btn .icon { width: 0.64rem; }
  & .pdp-media-gallery__thumbs--hidden,
  & .pdp-media-gallery__nav--hidden,
  & .pdp-media-gallery__pager--hidden { display: none !important; }
  & .pdp-media-gallery__thumb--active .pdp-media-gallery__thumb-image { border-color: #000; }

  @media screen and (min-width: 768px) {
    & .pdp-media-gallery__thumbs {
      display: block;
    }

    & .pdp-media-gallery__nav--desktop {
      display: flex;
    }

    & .pdp-media-gallery__pager {
      display: none;
    }
  }
}