/* Product-level A+ image displayed between product details and bundles.

   Two independent slots, no cross-breakpoint fallback:
   - Desktop (>= 750px): .product-a-plus__image-wrap--desktop renders
     product_a_plus.desktop_image edge to edge and lets the image define its
     own height. The negative margins cancel the side padding that .page-width
     puts on the product section, using the same --page-padding variable that
     .page-width uses (30px desktop / 20px below 960px).
   - Mobile (< 750px): .product-a-plus__image-wrap--mobile renders
     custom.a_plus_image in the original 1:1 frame, inside the page padding.

   A slot whose metafield is empty is not printed at all, and both wrappers
   default to display:none, so a breakpoint without its own image renders
   nothing instead of falling back to the other image. */
.product-a-plus {
  width: 100%;
  margin: 40px auto 0;
}

.product-a-plus__inner {
  width: 100%;
  margin: 0;
}

/* Both slots stay hidden until their own breakpoint enables them. */
.product-a-plus__image-wrap {
  display: none;
}

.product-a-plus__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop: full bleed, the desktop image drives the height. */
@media screen and (min-width: 750px) {
  .product-a-plus {
    width: auto;
    margin-left: calc(0px - var(--page-padding));
    margin-right: calc(0px - var(--page-padding));
  }

  .product-a-plus__image-wrap--desktop {
    display: block;
    width: 100%;
    overflow: hidden;
  }
}

/* Mobile: original 1:1 frame, inside the page padding. */
@media screen and (max-width: 749px) {
  .product-a-plus {
    margin-top: 28px;
  }

  .product-a-plus__image-wrap--mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .product-a-plus__image-wrap--mobile .product-a-plus__image {
    height: 100%;
    object-fit: contain;
  }
}