/* Panorama gallery: fit photos in the viewport; horizontal scroll via wheel /
   click / swipe. Vertical page scroll is disabled — Format Pattern gallery.
   Horizontal scroll is ALWAYS confined to #assets (never body/html), so the
   header stays fixed on phone, tablet, and desktop. */

html {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

body.gallery,
body.gallery_page {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

body.gallery .page {
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Header stays in the viewport while the photo strip scrolls underneath. */
body.gallery:not(.lookbook-open) #themeHeader,
body.gallery:not(.lookbook-open) .theme_header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 4000;
}

/* Keep a resolvable height chain so img height:100% does not fall back to
   intrinsic HTML width/height (853×1280 etc.) and blow past the viewport. */
body.gallery #content,
body.gallery .gallery_content {
  opacity: 1 !important;
  visibility: visible !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

/* Pad ONLY #content — .gallery_content is nested inside it. Applying the
   same --gallery-header-h to both doubled the white band under the logo. */
body.gallery #content {
  padding-top: var(--gallery-header-h, 76px);
  top: 0 !important;
}
body.gallery .gallery_content {
  padding-top: 0 !important;
}

.gallery .assets,
.gallery #assets {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  max-height: 100%;
  font-size: 0;
  white-space: nowrap;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.gallery #assets_wrap {
  display: inline-block;
  width: auto !important;
  max-width: none !important;
  height: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: 0;
  vertical-align: top;
}

.gallery .asset {
  display: inline-block;
  height: 100%;
  max-height: 100%;
  position: relative;
  white-space: normal;
  vertical-align: top;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box;
}

.gallery .asset.loading {
  background: none !important;
}

.gallery .asset .wrap {
  height: 100%;
  display: inline-block;
  max-height: 100%;
  width: auto;
}

.gallery .asset.image .img {
  height: 100%;
  width: auto;
  text-align: center;
  min-width: 0;
}

.gallery .asset img {
  width: auto !important;
  max-width: none !important;
  display: inline-block;
  vertical-align: top;
  height: 100% !important;
  max-height: 100% !important;
}

/* —— Narrow / tablet-touch: contain each frame in the viewport. */
@media only screen and (max-width: 1100px),
  only screen and (max-width: 850px) and (orientation: landscape) {
  .gallery .asset {
    max-width: 100vw;
    margin-left: 0 !important;
  }

  .gallery .asset:last-child {
    margin-right: 0 !important;
  }

  .gallery .asset .wrap,
  .gallery .asset.image .img {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    max-width: 100vw !important;
  }

  .gallery .asset img {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100% !important;
    object-fit: contain;
    vertical-align: top;
  }
}