/* DAN Roma: viewport-aware primary product media.
   The image element keeps its intrinsic ratio; the surrounding paper may remain
   visible when the viewport is shorter than the editorial source. */
:root {
  --dan-media-header-height: 79px;
  --dan-media-page-top: 44px;
  --dan-media-safe-bottom: 24px;
  --dan-media-sticky-gap: 16px;
  --dan-media-max-height: 850px;
}

:is(
  .gallery > figure:first-child img,
  .satin-hero > img,
  .men-hero > img,
  .ungaro-hero > img
)[data-dan-media-fit-axis] {
  object-fit: contain !important;
  object-position: center;
  transform: none;
}

@media (min-width: 1024px) {
  .gallery > figure:first-child,
  .satin-hero,
  .men-hero {
    display: grid;
    height: min(
      var(--dan-media-max-height),
      calc(100dvh - var(--dan-media-header-height) - var(--dan-media-page-top) - var(--dan-media-safe-bottom))
    );
    min-height: 0;
    aspect-ratio: auto;
    place-items: center;
    background: #eee9df;
  }

  .ungaro-hero {
    display: grid;
    height: min(
      870px,
      calc(100dvh - var(--dan-media-header-height) - var(--dan-media-safe-bottom))
    );
    min-height: 0;
    place-items: center;
  }

  .gallery > figure:first-child > .gallery-open {
    display: grid;
    place-items: center;
  }

  .gallery > figure:first-child img,
  .satin-hero > img,
  .men-hero > img,
  .ungaro-hero > img {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    align-self: center;
    justify-self: center;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  :is(
    .gallery > figure:first-child img,
    .satin-hero > img,
    .men-hero > img,
    .ungaro-hero > img
  )[data-dan-media-fit-axis="height"] {
    width: auto;
    height: 100%;
  }

  :is(
    .gallery > figure:first-child img,
    .satin-hero > img,
    .men-hero > img,
    .ungaro-hero > img
  )[data-dan-media-fit-axis="width"] {
    width: 100%;
    height: auto;
  }

  .product-panel,
  .satin-panel,
  .men-panel {
    position: static;
  }
}

/* AURA women configurators use one canonical editorial frame. This final,
   deliberately more-specific contract supersedes the generic contain rules at
   every breakpoint, so the frame can never expose its paper as a band. */
html body[data-aura-configurator="v2"] [data-aura-section="commerce"] figure > img[data-configurator-entry-image][data-dan-media-fit-axis] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--dan-women-hero-object-position, center top) !important;
}

/* SS2026 Men keeps its established frame but paints the editorial image over
   every pixel. This mirrors the certified AURA edge-to-edge media contract. */
html body .men-hero:not(.is-mobile-pinch-zoomed) > img[data-dan-media-edge-to-edge][data-dan-media-fit-axis] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--dan-men-hero-object-position, 50% 22%) !important;
  transform: none !important;
}

/* Safari/iPhone: quando il gesto pinch è attivo, il ritaglio editoriale non
   deve annullare la trasformazione applicata dal controllo di zoom. */
@media (max-width: 820px) {
  html body .men-hero.mobile-pinch-host.is-mobile-pinch-zoomed > img[data-mobile-pinch-image][data-dan-media-edge-to-edge][data-dan-media-fit-axis] {
    transform: translate3d(
      var(--mobile-pinch-x, 0px),
      var(--mobile-pinch-y, 0px),
      0
    ) scale(var(--mobile-pinch-render-scale, 1)) var(--mobile-pinch-base-transform, matrix(1,0,0,1,0,0)) !important;
    transform-origin: var(--mobile-pinch-origin, 50% 50%) !important;
  }
}

@media (min-width: 1041px) {
  .product-layout > .gallery {
    align-self: start;
  }
}

@media (min-width: 1081px) {
  .satin-stage {
    position: sticky;
    top: calc(var(--dan-media-header-height) + var(--dan-media-sticky-gap));
    align-self: start;
  }
}

@media (min-width: 1121px) {
  .men-stage {
    position: sticky;
    top: calc(var(--dan-media-header-height) + var(--dan-media-sticky-gap));
    align-self: start;
  }
}

@media (min-width: 1001px) {
  .ungaro-stage {
    position: sticky;
    top: var(--dan-media-header-height);
    align-self: start;
  }

  .ungaro-product {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .gallery > figure:first-child,
  .satin-hero,
  .men-hero,
  .ungaro-hero {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .gallery > figure:first-child > .gallery-open {
    display: block;
    height: auto;
  }

  .gallery > figure:first-child img,
  .satin-hero > img,
  .men-hero > img,
  .ungaro-hero > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
}