/* Preserve the Zelax product layout while making each color gallery independent. */
.zp-gal { min-width: 0; }
.zp-gallery-open { display: block; color: inherit; cursor: zoom-in; }
.zp-gallery-open:focus-visible { outline: 4px solid var(--z-accent); outline-offset: -5px; }
.zp-gallery-open[hidden], .zp-thumbs[hidden] { display: none; }
.zp-thumbs { flex-wrap: nowrap; overflow-x: auto; padding: 8px 5px 10px; margin: 10px -5px 0; }
.zp-thumb { flex: 0 0 72px; }
.zp-thumb:focus-visible, .zp-swatch:focus-visible { outline: 3px solid var(--z-ink); outline-offset: 4px; }
.zp-swatch:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.zp-gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.zp-gallery-empty .zp-gallery-status { position: static; width: auto; height: auto; margin: 20px 0; clip-path: none; white-space: normal; }
.zp-buy table.variations { display: table; }
.zp-buy .zp-has-color-swatches tr.zp-color-row { display: none; }
.zp-gallery-empty .zp-main { display: none; }
@media (max-width: 600px) { .zp-thumbs { gap: 10px; } }

/* 2:3 portrait gallery: current masters are 1024 x 1536. Keep any legacy
   fallback image fully visible rather than cropping or stretching it. */
.zp-main img.zp-mimg {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}

/* Fit the complete portrait and thumbnails within normal desktop windows.
   The script measures the header/breadcrumb space; mobile stays full-width. */
@media (min-width: 901px) {
  .zp-main {
    width: 100%;
    max-width: var(--zp-viewport-frame-width, 100%);
    margin-inline: auto;
  }
  .zp-thumbs { justify-content: safe center; }
}