/*
 * Double Seam product gallery lock — English + German.
 * Loaded dynamically after all existing product styles so already-approved
 * gallery dimensions cannot be altered by product-specific CSS.
 * This file changes sizing only. It does not change images, content or product logic.
 */

/* All product media occupy one identical stage at the desktop breakpoint. */
html body.product-gallery-locked .product-detail .detail-layout > .detail-photo {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Ordinary/single-image products: the media box, not the image ratio, sets the size. */
html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) {
  display: grid !important;
  place-items: center !important;
  height: 410px !important;
  min-height: 410px !important;
  max-height: 410px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) > img,
html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) > picture,
html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) > picture > img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 650px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Multi-photo products: wrapper height is fixed independently of image count/aspect ratio. */
html body.product-gallery-locked .product-detail .detail-layout > .gauge-gallery,
html body.product-gallery-locked .product-detail .detail-layout > .decoiler-gallery {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 518px !important;
  min-height: 518px !important;
  max-height: 518px !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #f1eee7 !important;
}

/* Main photo element itself has the same 650 x 410 stage on every gallery. */
html body.product-gallery-locked .product-detail .gauge-gallery-main,
html body.product-gallery-locked .product-detail .decoiler-gallery-main {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 410px !important;
  width: 100% !important;
  max-width: 650px !important;
  height: 410px !important;
  min-height: 410px !important;
  max-height: 410px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f1eee7 !important;
}

/* Thumbnail count cannot resize the main stage; excess thumbnails scroll horizontally. */
html body.product-gallery-locked .product-detail .gauge-gallery-thumbs,
html body.product-gallery-locked .product-detail .decoiler-gallery-thumbs {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 68px !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 2px !important;
  scrollbar-width: thin;
}

html body.product-gallery-locked .product-detail .gauge-thumb,
html body.product-gallery-locked .product-detail .decoiler-thumb {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 3px !important;
  border: 2px solid transparent !important;
  background: #fff !important;
  cursor: pointer !important;
}

html body.product-gallery-locked .product-detail .gauge-thumb.active,
html body.product-gallery-locked .product-detail .decoiler-thumb.active {
  border-color: #08716b !important;
}

html body.product-gallery-locked .product-detail .gauge-thumb img,
html body.product-gallery-locked .product-detail .decoiler-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }

  html body.product-gallery-locked .product-detail .detail-layout > .gauge-gallery,
  html body.product-gallery-locked .product-detail .detail-layout > .decoiler-gallery {
    height: 498px !important;
    min-height: 498px !important;
    max-height: 498px !important;
  }

  html body.product-gallery-locked .product-detail .gauge-gallery-main,
  html body.product-gallery-locked .product-detail .decoiler-gallery-main {
    flex-basis: 390px !important;
    max-width: 620px !important;
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }
}

@media (max-width: 560px) {
  html body.product-gallery-locked .product-detail .detail-layout > .detail-photo:not(.gauge-gallery):not(.decoiler-gallery) {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 10px !important;
  }

  html body.product-gallery-locked .product-detail .detail-layout > .gauge-gallery,
  html body.product-gallery-locked .product-detail .detail-layout > .decoiler-gallery {
    gap: 10px !important;
    height: 394px !important;
    min-height: 394px !important;
    max-height: 394px !important;
    padding: 10px !important;
  }

  html body.product-gallery-locked .product-detail .gauge-gallery-main,
  html body.product-gallery-locked .product-detail .decoiler-gallery-main {
    flex-basis: 300px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  html body.product-gallery-locked .product-detail .gauge-gallery-thumbs,
  html body.product-gallery-locked .product-detail .decoiler-gallery-thumbs {
    flex-basis: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  html body.product-gallery-locked .product-detail .gauge-thumb,
  html body.product-gallery-locked .product-detail .decoiler-thumb {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }
}