/* ABOUT / GALLERY only — 2026-10-10. Leave SHOP, HOME and checkout untouched. */
html:has(body.about-page), html:has(body.gallery-page) {
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.about-page, body.gallery-page {
  height:auto!important;
  min-height:calc(100dvh + 65px)!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
/* No stale hardcoded ABOUT artwork/text is visible while /api/site is loading. */
body.about-page:not(.about-ready) .about-design-canvas,
body.about-page:not(.about-ready) #aboutExtraContent {
  visibility:hidden!important;
}
@media (min-width:901px) {
  body.about-page .about-wrap {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 65px)!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.about-page .about-design-canvas {
    position:absolute!important;
    top:0!important;
    left:0!important;
  }
  body.gallery-page .gallery-wrap {
    min-height:calc(100dvh + 65px)!important;
    padding-bottom:95px!important;
  }
}
@media (max-width:900px) {
  body.about-page .about-wrap,
  body.gallery-page .gallery-wrap {
    min-height:calc(100dvh + 65px)!important;
    padding-bottom:110px!important;
    overflow:visible!important;
  }
}
/* Left-to-right, wrapping to the next row only when the row is full. */
body.gallery-page #galleryList.gallery-list {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  column-gap:25px!important;
  row-gap:40px!important;
  height:auto!important;
  overflow:visible!important;
}
body.gallery-page #galleryList .gallery-item {
  flex:0 1 458px!important;
  width:458px!important;
  max-width:calc(50% - 13px)!important;
  min-width:0!important;
  margin:0!important;
}
body.gallery-page #galleryList .gallery-media,
body.gallery-page #galleryList .gallery-media img,
body.gallery-page #galleryList .gallery-media video {
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
}
@media (max-width:900px) {
  body.gallery-page #galleryList.gallery-list {column-gap:12px!important;row-gap:24px!important;}
  body.gallery-page #galleryList .gallery-item {
    flex:0 0 calc(50% - 6px)!important;
    width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
  }
}
/* Optional full-screen main image configured in ABOUT admin (default stays unchanged). */
@media (min-width:901px) {
  body.about-page.about-fullscreen-desktop .about-design-canvas {
    position:relative!important;
    top:auto!important;
    left:auto!important;
    width:100vw!important;
    height:100dvh!important;
    transform:none!important;
    overflow:hidden!important;
  }
  body.about-page.about-fullscreen-desktop .about-copy-art,
  html[lang=ru] body.about-page.about-fullscreen-desktop .about-copy-art {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
  }
  body.about-page.about-fullscreen-desktop .about-copy-ru,
  html[lang=ru] body.about-page.about-fullscreen-desktop .about-copy-ru {display:none!important;}
}
@media (max-width:900px) {
  body.about-page.about-fullscreen-mobile .about-wrap,
  html[lang=en] body.about-page.about-fullscreen-mobile .about-wrap,
  html[lang=ru] body.about-page.about-fullscreen-mobile .about-wrap {
    padding:0 0 85px!important;
  }
  body.about-page.about-fullscreen-mobile .about-design-canvas,
  html[lang=en] body.about-page.about-fullscreen-mobile .about-design-canvas,
  html[lang=ru] body.about-page.about-fullscreen-mobile .about-design-canvas {
    width:100vw!important;
    height:100dvh!important;
    overflow:hidden!important;
  }
  body.about-page.about-fullscreen-mobile .about-mobile-approved,
  html[lang=ru] body.about-page.about-fullscreen-mobile .about-mobile-approved,
  html[lang=en] body.about-page.about-fullscreen-mobile .about-mobile-approved {
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  body.about-page.about-fullscreen-mobile .about-copy-ru,
  html[lang=ru] body.about-page.about-fullscreen-mobile .about-copy-ru {display:none!important;}
}
/* Optional full-screen extra media (can be enabled separately). */
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media {
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  overflow:hidden!important;
}
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media img,
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media video {
  display:block!important;
  width:100%!important;
  height:100dvh!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
}


/* FIX 2026-10-10: three gallery items per desktop row, using the full available width. */
@media (min-width:901px) {
  body.gallery-page #galleryList.gallery-list {
    width:100%!important;
    box-sizing:border-box!important;
  }
  body.gallery-page #galleryList.gallery-list > .gallery-item {
    flex:0 0 calc((100% - 50px) / 3)!important;
    width:calc((100% - 50px) / 3)!important;
    max-width:calc((100% - 50px) / 3)!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* FIX 2026-10-10: custom ABOUT media must be centered and use its own aspect ratio.
   The default PSD artwork keeps its original fixed-canvas positioning. */
@media (min-width:901px) {
  body.about-page.about-custom-desktop-media:not(.about-fullscreen-desktop) .about-wrap {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 65px)!important;
    margin:0!important;
    padding:0 24px 65px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.about-page.about-custom-desktop-media:not(.about-fullscreen-desktop) .about-design-canvas {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
    transform-origin:center center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    pointer-events:auto!important;
    box-sizing:border-box!important;
  }
  body.about-page.about-custom-desktop-media:not(.about-fullscreen-desktop) .about-copy-art {
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    width:min(100%, 1520px)!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    flex:0 1 auto!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:900px) {
  body.about-page.about-custom-mobile-media:not(.about-fullscreen-mobile) .about-wrap {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 65px)!important;
    margin:0!important;
    padding:10px 8px 96px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.about-page.about-custom-mobile-media:not(.about-fullscreen-mobile) .about-design-canvas {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    pointer-events:auto!important;
    box-sizing:border-box!important;
  }
  body.about-page.about-custom-mobile-media:not(.about-fullscreen-mobile) .about-mobile-approved {
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    transform:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    flex:0 1 auto!important;
    box-sizing:border-box!important;
  }
}

/* Uploaded additional ABOUT image/video: keep it centered; do not offset it by a viewport margin. */
body.about-page #aboutExtraContent {
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
body.about-page #aboutExtraContent .about-extra-media {
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:min(100%, 1400px)!important;
  max-width:100%!important;
  height:auto!important;
  margin:28px auto!important;
  padding:0!important;
  transform:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body.about-page #aboutExtraContent .about-extra-media img,
body.about-page #aboutExtraContent .about-extra-media video {
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  transform:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background-image:none!important;
  box-sizing:border-box!important;
}
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media {
  position:relative!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:100%!important;
  height:100dvh!important;
  margin:24px auto!important;
  overflow:hidden!important;
}
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media img,
body.about-page.about-extra-fullscreen #aboutExtraContent .about-extra-media video {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0 auto!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Russian ABOUT only: remove the legacy bottom paragraph and display the
   configured artwork in the same place as the English version. */
html[lang="ru"] body.about-page .about-copy-ru {
  display:none!important;
}
@media (min-width:901px) {
  html[lang="ru"] body.about-page .about-copy-art {
    display:block!important;
  }
  html[lang="ru"] body.about-page.about-custom-desktop-media:not(.about-fullscreen-desktop) .about-wrap {
    padding-top:96px!important;
  }
}
@media (max-width:900px) {
  html[lang="ru"] body.about-page .about-copy-art {
    display:none!important;
  }
  html[lang="ru"] body.about-page .about-mobile-approved {
    display:block!important;
  }
}