/**
 * produto.html — PDP única responsiva (mobile + breakpoint desktop).
 * Requer marcação .pdp-hero-split > .pdp-zone-top | .pdp-zone-gallery | .pdp-zone-tail.
 */

@media (max-width: 1023px) {
  .pdp-hero-split[data-pdp-hero-split] {
    display: block;
  }
}

@media (min-width: 1024px) {
  #root-app .main-container {
    box-sizing: border-box;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .pdp-hero-split[data-pdp-hero-split] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(296px, 420px);
    grid-template-rows: auto minmax(0, auto);
    column-gap: 32px;
    row-gap: 20px;
    align-items: start;
    margin-bottom: 8px;
  }

  .pdp-zone-gallery[data-pdp-zone-gallery] {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 12px;
    align-self: start;
    min-width: 0;
  }

  .pdp-zone-top[data-pdp-zone-top] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .pdp-zone-tail[data-pdp-zone-tail] {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  /* Galeria maior e mais “desktop” dentro da coluna */
  #root-app article.pdp-container .pdp-zone-gallery .pdp-gallery {
    margin-top: 0;
    max-width: 100%;
  }

  #root-app article.pdp-container .pdp-zone-gallery .pdp-gallery-slide .pdp-gallery-img {
    max-height: min(560px, 72vh);
    object-fit: contain;
    width: 100%;
    height: auto;
  }
}