/* Match the D900/CEL image area on all machine slides, not just the first. */
body.product-automat-v22 #mediaFrame:not(:has(>.media-main[src*="v22-lager-row.webp"])),
body:has(#extensionTotalNet) #mediaFrame:not(:has(>.media-main[src*="v22-lager-row.webp"])),
body.product-bundle #mediaFrame{
  padding-bottom:16px!important;
}

/* The CEL source photo has more white space than D900. Match the visible
   housing height, not just the identical gallery/image element dimensions. */
#mediaFrame > .media-main[src*="cel-10c-high-atrium-sticker-clean"]{
  transform:scale(1.012)!important;
  transform-origin:center!important;
}
@media(min-width:981px){
  #mediaFrame > .media-main[src*="cel-10c-high-atrium-sticker-clean"]{
    transform:scale(1.067)!important;
  }
}
@media(min-width:1800px) and (min-height:1100px){
  #mediaFrame > .media-main[src*="cel-10c-high-atrium-sticker-clean"]{
    transform:scale(1.013)!important;
  }
}

/* Match the mobile gallery controls on larger screens. */
html body #mediaFrame > .media-nav{width:44px!important;height:44px!important;border-color:rgba(255,255,255,.22)!important;background:rgba(23,23,29,.42)!important;opacity:.72!important}
html body #mediaFrame > .media-nav:hover,html body #mediaFrame > .media-nav:focus-visible{background:rgba(23,23,29,.68)!important;opacity:1!important}

/* Mobile product photos: the existing frame stays fixed; fill its safe inset. */
@media(max-width:560px){
  html body #mediaFrame > #mainProductImage[data-gallery-index="0"]{
    transform:scale(1.08)!important;
    transform-origin:center center!important;
  }
  html body #mediaFrame > #mainModuleImage[src*="ext-product"]{
    transform:translateY(-1.437%) scale(1.0985)!important;
    transform-origin:center center!important;
  }
  html body.product-automat-v22 #mediaFrame > #mainProductImage[data-gallery-index="0"]{
    transform:scale(1.06)!important;
  }
  html body #mediaFrame > #mainProductImage[src*="wein-d900"][data-gallery-index="0"]{
    transform:scale(1.08)!important;
  }
  html body #mediaFrame > #mainProductImage[src*="cel-10c"][data-gallery-index="0"]{
    transform:scale(1.10)!important;
  }
  html body.product-bundle #mediaFrame > #mainProductImage[data-gallery-index="0"]{
    transform:scale(1.20)!important;
    translate:2.1% 0!important;
  }
  html body #mediaFrame > .media-nav{
    width:44px!important;
    height:44px!important;
    border-color:rgba(255,255,255,.22)!important;
    background:rgba(23,23,29,.42)!important;
    opacity:.72!important;
  }
  html body #mediaFrame > .media-nav:hover,
  html body #mediaFrame > .media-nav:focus-visible{
    background:rgba(23,23,29,.68)!important;
    opacity:1!important;
  }
  html body #mediaFrame > .media-nav-prev{left:2px!important}
  html body #mediaFrame > .media-nav-next{right:2px!important}
  html body:has(#mediaFrame) #mediaFrame > .media-dots{
    position:absolute!important;
    grid-row:auto!important;
    bottom:6px!important;
    padding:0!important;
  }
  html body:has(#mediaFrame) #mediaFrame > .media-main:is(
    [src*="ext-lager"],
    [src*="v22-lager-row.webp"],
    [src*="gallery-v22-payment.webp"]
  ){
    position:absolute!important;
    inset:0 auto auto 50%!important;
    width:calc(100% - 16px)!important;
    height:calc(100% - 62px)!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:translateX(-50%)!important;
    translate:none!important;
  }
  html body:has(#mediaFrame) #mediaFrame:has(> .media-main:is(
    [src*="ext-lager"],
    [src*="v22-lager-row.webp"],
    [src*="gallery-v22-payment.webp"]
  )) > .media-caption:not([hidden]){
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    bottom:56px!important;
    width:auto!important;
    margin:0!important;
    z-index:3!important;
  }
}

/* Lagerfoto: remove the white mat around the photo while keeping the image controls below it. */
@media(min-width:561px){
  html body:has(#extensionTotalNet) #mediaFrame:has(> .media-main[src*="ext-lager"]){padding:0 0 30px!important;background:#18181e!important}
  html body:has(#extensionTotalNet) #mediaFrame > .media-main[src*="ext-lager"]{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;transform:none!important}
  html body:has(#extensionTotalNet) #mediaFrame:has(> .media-main[src*="ext-lager"]) > .media-dots{bottom:3px!important}
  html body:has(#extensionTotalNet) #mediaFrame:has(> .media-main[src*="ext-lager"]) > .media-dots button:not(.active)::before{background:#a4a4ac!important}
}

/* Photographic gallery slides use the dark gallery mat instead of white bars. */
html body #mediaFrame:has(> .media-main[src*="gallery-v22-payment"]),
html body:has(#extensionTotalNet) #mediaFrame:has(> .media-main[src*="ext-lager"]){background:#18181e!important}
html body #mediaFrame:has(> .media-main[src*="gallery-v22-payment"]) > .media-dots button:not(.active)::before{background:#a4a4ac!important}

/* Keep photo mattes dark even where the compact gallery has stronger frame rules. */
html body:has(#extensionTotalNet) #mediaFrame#mediaFrame:has(> .media-main[src*="ext-lager"]),
html body.product-bundle #mediaFrame#mediaFrame:has(> .media-main[src*="gallery-v22-payment"]){background-color:#18181e!important}

/* The M10 stock photo shares the first slide's fixed stage. Keep the image
   centered within it so the stationary arrows bisect either photograph. */
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]){
  height:var(--sd-machine-window-height,var(--sd-uniform-product-media-height,var(--machine-frame-height)))!important;
  min-height:0!important;
  display:block!important;
  padding:0!important;
}
@media(max-width:980px){
  html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]){
    height:clamp(320px,calc(100svh - 170px),535px)!important;
  }
}
html body.product-automat-v22 #mediaFrame#mediaFrame > .media-main:is([src*="v22-lager-row.webp"],[src*="m10-konfigurierbare-module"]){
  position:absolute!important;
  inset:auto!important;
  top:50%!important;
  left:0!important;
  width:100%!important;
  height:auto!important;
  max-height:calc(100% - 180px)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  transform:translateY(-50%)!important;
  translate:none!important;
}
html body.product-automat-v22 #mediaFrame#mediaFrame > .media-main[src*="m10-konfigurierbare-module"]{
  top:calc(50% - 8px)!important;
}
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main:is([src*="v22-lager-row.webp"],[src*="m10-konfigurierbare-module"])) > .media-caption:not([hidden]){
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:46px!important;
  width:calc(100% - 24px)!important;
  margin:0!important;
}
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main:is([src*="v22-lager-row.webp"],[src*="m10-konfigurierbare-module"])) > .media-dots{
  position:absolute!important;
  bottom:12px!important;
}
@media(min-width:561px) and (max-width:980px){
  html body.product-automat-v22 #mediaFrame#mediaFrame > .media-main:is([src*="v22-lager-row.webp"],[src*="m10-konfigurierbare-module"]){
    left:90px!important;
    width:calc(100% - 180px)!important;
  }
}
@media(max-width:560px){
  html body:has(#configTotalGross) #mediaFrame#mediaFrame > .media-main[src*="bundle-product-aligned.webp"]{
    transform:translateX(2%) scale(1.17)!important;
    translate:none!important;
  }
}

/* Stock photograph blends into the surrounding gallery frame. */
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]) > .media-caption:not([hidden]){bottom:54px!important;font-size:.9rem!important}
@media(max-width:560px){html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]) > .media-caption:not([hidden]){font-size:.84rem!important}}

/* Move the mobile dots down inside their unchanged 44px touch targets. */
@media(max-width:560px){html body #mediaFrame#mediaFrame > .media-dots button::before{top:calc(50% + 12px)!important}}

/* One continuous stock-photo surface, with an unboxed caption. */
html body.product-automat-v22 .media-card:has(#mediaFrame > .media-main[src*="v22-lager-row.webp"]){background:#242428!important}
html body.product-automat-v22 #mediaFrame#mediaFrame:has(> .media-main[src*="v22-lager-row.webp"]) > .media-caption:not([hidden]){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#fff!important}

/* Position the stock caption beneath the photograph, preserving the stage. */
html body #mediaFrame#mediaFrame#mediaFrame:has(> .media-main:is([src*="v22-lager-row.webp"],[src*="ext-lager"])) > .media-caption:not([hidden])[style*="--sd-stock-caption-top"]{top:var(--sd-stock-caption-top,auto)!important;bottom:auto!important;padding:0!important;grid-area:auto!important}

@media(max-width:768px){html body #mediaFrame > .media-nav{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}}

/* Center the actual bundle housing, compensating its asymmetric source mat. */
@media(min-width:981px){html body.product-bundle #mediaFrame > #mainProductImage[data-gallery-index="0"]{translate:2.1% 0!important}}

/* Keep inactive dots visible on the dark stock-photo mat at every width. */
html body:has(#extensionTotalNet) #mediaFrame:has(> .media-main[src*="ext-lager"]) > .media-dots button:not(.active)::before{background:#a4a4ac!important}

/* One machine gallery geometry, independent of product or photograph mat. */
html body:has(#mediaFrame) .media-card{padding:0!important}
html body:has(#mediaFrame) .hero-stage{zoom:1!important;gap:24px!important;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr)!important}
html body:has(#mediaFrame) main.container{max-width:var(--sd-max-shop)!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:max(500px,calc(100svh - var(--nav-h) - 56px))!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important}
@media(min-width:981px) and (max-width:1600px){
 html body:has(#mediaFrame) main.container{max-width:min(1500px,calc(100% - 96px))!important}
 html body:has(#mediaFrame) .hero-stage{gap:18px!important}
 html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:clamp(500px,calc(100svh - var(--nav-h) - 70px),680px)!important}
}
@media(max-width:980px){
 html body:has(#mediaFrame) main.container{max-width:var(--sd-max-shop)!important;padding-left:18px!important;padding-right:18px!important}
 html body:has(#mediaFrame) .hero-stage{grid-template-columns:minmax(0,1fr)!important}
 html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:clamp(320px,calc(100svh - 170px),535px)!important}
}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame:not(.media-placeholder-frame):has(>.media-main:is([src*="v22-product-milk"],[src*="ext-product"],[src*="bundle-product-aligned"],[src*="cel-10c-high-atrium"],[src*="wein-d900-product-premium"])){
 padding:16px!important;background:#fff!important;display:block!important
}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main:is([src*="v22-product-milk"],[src*="ext-product"],[src*="bundle-product-aligned"],[src*="cel-10c-high-atrium"],[src*="wein-d900-product-premium"]){
 position:absolute!important;inset:16px!important;width:calc(100% - 32px)!important;height:calc(100% - 32px)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;transform:none!important;translate:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important
}

html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.wine-media-placeholder{height:100%!important;min-height:0!important}

/* Enlarge and center the complete bundle housings; fit the stock photo uncropped. */
html body.product-bundle #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame:has(>.media-main[src*="bundle-product-aligned.webp"]){container-type:size!important}
html body.product-bundle #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main[src*="bundle-product-aligned.webp"]{--sd-bundle-painted-width:min(100cqw,calc(100cqh*1.1639240506));--sd-bundle-painted-height:min(100cqh,calc(100cqw/1.1639240506));object-position:calc(50% + var(--sd-bundle-painted-width)*.01984774334) calc(50% + var(--sd-bundle-painted-height)*.00221518987)!important;transform:scale(1.16)!important;transform-origin:center!important;translate:none!important}
html body.product-bundle #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main[src*="v22-lager-row.webp"]{object-fit:contain!important;object-position:center!important;transform:none!important;translate:none!important}

/* Consistent slender edge controls and uncropped machine stock photographs. */
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav{width:30px!important;min-width:30px!important;height:54px!important;min-height:54px!important;padding:0!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav-prev{left:4px!important;right:auto!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav-next{right:4px!important;left:auto!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav::before{content:"";position:absolute;top:0;bottom:0;pointer-events:auto}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav-prev::before{left:0;right:-15px}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-nav-next::before{right:0;left:-15px}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main:is([src*="v22-lager-row.webp"],[src*="ext-lager"]){object-fit:contain!important;object-position:center!important;transform:none!important;translate:none!important}

/* Align the visible 10N cabinet height with the V22 source, including photo whitespace. */
html body:has(#extensionTotalNet) #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame:has(>.media-main[src*="ext-product.webp"]){container-type:size!important}
html body:has(#extensionTotalNet) #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main[src*="ext-product.webp"]{--sd-10n-painted-width:min(100cqw,calc(100cqh * .6711409396));--sd-10n-painted-height:min(100cqh,calc(100cqw / .6711409396));object-position:calc(50% - var(--sd-10n-painted-width) * .002083333333) calc(50% + var(--sd-10n-painted-height) * -0.015607348176)!important;transform:scale(1.036222382671)!important;transform-origin:center!important;translate:none!important}

/* Product scale follows available desktop width and height independently. */
@media(min-width:981px){
 html body:has(#mediaFrame) main.container{max-width:clamp(980px,72vw,1350px)!important}
 html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:max(360px,calc(100svh - var(--nav-h) - clamp(56px,calc(549px - 24vw),180px)))!important}
}
@media(min-width:769px) and (max-width:980px){
 html body:has(#mediaFrame) main.container{max-width:760px!important}
}
@media(max-width:980px){
 html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:clamp(280px,calc(100svh - var(--nav-h) - 170px),480px)!important}
}

/* TCN-proportioned first photos share the same canvas and safe, symmetric inset. */
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame>.media-main[src*="/images/product-geometry-"]{position:absolute!important;grid-area:auto!important;inset:17px!important;width:calc(100% - 34px)!important;height:calc(100% - 34px)!important;max-width:none!important;max-height:none!important;padding:0!important;object-fit:contain!important;object-position:center center!important;transform:none!important;translate:none!important;border-radius:0!important}

/* All machine galleries use the CSC dot baseline; visible dots match hit targets. */
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame > .media-dots{position:absolute!important;inset:auto!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;height:44px!important;display:flex;justify-content:center!important;align-items:flex-start!important;grid-area:auto!important;margin:0!important;padding:0!important;transform:none!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame > .media-dots button{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;flex:0 0 44px!important}
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame > .media-dots button::before{top:31px!important}

/* A dot must not scroll overflowing simulation content inside the fixed stage. */
html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{overflow:clip!important}

/* Keep the machine at its initial desktop viewport position while the configurator scrolls. */
@media(min-width:981px){
 html body .media-sticky-boundary:has(#mediaFrame) .media-card{top:var(--sd-media-anchor-top,calc(var(--nav-h) + 16px))!important}
 html body #mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame#mediaFrame{height:max(160px,calc(100svh - var(--sd-media-anchor-top,calc(var(--nav-h) + 16px)) - 16px))!important;min-height:160px!important;max-height:none!important}
}