/* Compact only short desktop product viewports. Large desktop and stacked layouts stay unchanged. */
@media (min-width:981px) and (max-width:1600px) and (max-height:900px) {
  main.container{max-width:min(1350px,calc(100% - 96px))}
  .hero{padding-top:12px}
  .hero-stage{gap:18px}
  .media-card{top:calc(var(--nav-h) + 12px);padding:10px}

  /* Machines remain prominent while preserving space for captions and dots. */
  #mediaFrame,.media-frame{
    --sd-short-product-media-height:clamp(500px,calc(100vh - var(--nav-h) - 56px),680px);
    --sd-short-product-media-height:clamp(500px,calc(100svh - var(--nav-h) - 56px),680px);
    width:100%;
    height:var(--sd-short-product-media-height)!important;
    min-height:0!important;
    max-height:680px!important;
    padding:16px 16px 50px;
    aspect-ratio:auto
  }

  /* Square component photos keep the smaller short-screen frame. */
  .media-zoom-frame:not(#mediaFrame){
    --sd-short-product-media-height:clamp(440px,calc(100vh - var(--nav-h) - 140px),540px);
    --sd-short-product-media-height:clamp(440px,calc(100svh - var(--nav-h) - 140px),540px);
    width:100%;
    height:var(--sd-short-product-media-height)!important;
    min-height:0!important;
    max-height:540px!important;
    aspect-ratio:auto
  }
  .media-zoom-frame>.media-main,
  .media-frame>.media-main:not([src*="/images/v22-lager-row.webp"]){
    width:100%;
    height:100%!important;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    transform:none!important;
    translate:none!important
  }

  /* The CSC-10C warehouse photo intentionally uses its natural landscape ratio
     with caption and dots below it. Preserve that gallery-specific layout. */
  #mediaFrame:has(>.media-main[src*="/images/v22-lager-row.webp"]){
    height:auto!important;
    max-height:none!important
  }
  #mediaFrame:has(>.media-main[src*="/images/v22-lager-row.webp"])>.media-main{
    height:auto!important;
    max-height:none!important
  }

  .summary-card{padding:18px;zoom:.9;min-width:0}
  @supports not (zoom:1){
    .summary-card{transform:scale(.9);transform-origin:top left}
  }
  @media (max-width:1179px){
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)){
      display:grid!important;
      grid-template-columns:max-content minmax(0,1fr)!important;
      column-gap:12px!important
    }
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-kicker{grid-column:1/-1!important;grid-row:1!important}
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-priceline{display:contents!important}
    .config-total-price,
    .config-total-price>.price-vat-inline,
    .config-total-gross{
      white-space:nowrap!important;
      overflow-wrap:normal!important;
      word-break:normal!important
    }
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)) .config-total-price{grid-column:1!important;grid-row:2!important;min-width:max-content!important}
    .product-info-column #configTotalNet.config-total-gross,
    .product-info-column #configTotalGross.config-total-gross,
    .product-info-column #extensionTotalNet.config-total-gross,
    .product-info-column #extensionTotalGross.config-total-gross{
      grid-column:2!important;
      grid-row:2!important;
      align-self:end!important;
      min-width:max-content!important;
      white-space:nowrap!important;
      overflow-wrap:normal!important;
      word-break:normal!important
    }
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-priceline>.energy-cluster{
      grid-column:1/-1!important;
      grid-row:4!important;
      width:100%!important;
      max-width:none!important;
      margin-top:10px!important;
      justify-self:stretch!important;
      justify-items:start!important;
      grid-template-columns:auto minmax(0,1fr)!important
    }
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-shipping{grid-column:1/-1!important;grid-row:3!important}
    .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.sd-lease-rate{grid-column:1/-1!important;grid-row:5!important}
    html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)) .config-total-price,
    html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)) .config-total-price{
      grid-column:1/-1!important;
      grid-row:2!important
    }
    html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-gross,
    html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-gross{
      grid-column:1/-1!important;
      grid-row:3!important;
      width:auto!important;
      min-width:0!important;
      max-width:100%!important;
      margin:7px 0 0!important;
      white-space:normal!important;
      overflow-wrap:anywhere!important;
      word-break:normal!important
    }
    html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-shipping,
    html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-shipping{
      grid-row:4!important;
      margin-top:8px!important
    }
    html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-priceline>.energy-cluster,
    html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.config-total-priceline>.energy-cluster{
      grid-row:5!important;
      margin-top:12px!important
    }
    html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.sd-lease-rate,
    html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet))>.sd-lease-rate{grid-row:6!important}
  }
  .summary-product-title{margin-bottom:10px}
  .config-total{gap:10px}
  .config-total-box{padding:14px}
  .config-mini-meta{gap:8px}
  .config-mini-meta>div{padding:10px 12px}
  .trust-note{padding:14px 16px}
  .trust-note strong{margin-bottom:8px}
  .trust-note ul{gap:5px}
  .trust-note-copy{margin-top:9px;padding-top:9px}

  /* finance.js injects its base styles after page load; the product-card scope
     gives these spacing-only rules higher specificity without changing copy,
     rates, eligibility or any calculator behavior. */
  .summary-card #sdFinanceCard.sd-finance-card{margin-top:10px;padding:12px 14px}
  .summary-card #sdFinanceCard .sd-finance-heading{margin-bottom:8px}
  .summary-card #sdFinanceCard .finance-trigger{min-height:44px;margin-top:10px;padding:9px 12px}
  .summary-card #sdFinanceCard .sd-finance-disclaimer{margin-top:7px;line-height:1.3}
}

/* Laptop and compact desktop: scale the complete product hero uniformly and
   keep it centered with visible side margins. */
@media (min-width:981px) and (max-width:1799px) {
  main.container{
    max-width:min(1500px,calc(100% - clamp(144px,20vw,288px)))
  }
  .hero-stage{
    width:100%;
    zoom:.85;
    gap:18px
  }
  .summary-card{
    zoom:1;
    min-width:0
  }
  #mediaFrame,.media-frame{
    --sd-uniform-product-media-height:clamp(500px,calc(100vh - var(--nav-h) - 56px),680px);
    --sd-uniform-product-media-height:clamp(500px,calc(100svh - var(--nav-h) - 56px),680px);
    height:var(--sd-uniform-product-media-height)!important;
    max-height:680px!important
  }
  .media-zoom-frame:not(#mediaFrame){
    --sd-uniform-product-media-height:clamp(360px,calc(100vh - var(--nav-h) - 140px),680px);
    --sd-uniform-product-media-height:clamp(360px,calc(100svh - var(--nav-h) - 140px),680px);
    height:var(--sd-uniform-product-media-height)!important;
    max-height:680px!important
  }
  #mediaFrame>.media-main:is([src*="bundle-product"],[src*="ext-product"]),
  .media-frame>.media-main:is([src*="bundle-product"],[src*="ext-product"]){
    transform:scale(1.12)!important;
    transform-origin:center!important
  }
  #mediaFrame>.media-main:is([src*="m10-detail"],[src*="v22-product"]),
  .media-frame>.media-main:is([src*="m10-detail"],[src*="v22-product"]){
    transform:scale(1.06)!important;
    transform-origin:center!important
  }
}

/* Small desktop machine pages: enlarge the complete gallery card. Keep the
   photo itself contained so its top and feet are never cropped. */
@media (min-width:981px) and (max-width:1600px) {
  body:has(#mediaFrame) main.container{
    max-width:min(1500px,calc(100% - 96px))!important
  }
  body:has(#mediaFrame) .hero-stage{
    zoom:1!important;
    gap:18px!important
  }
  body:has(#mediaFrame) #mediaFrame{
    --sd-machine-window-height:clamp(500px,calc(100svh - var(--nav-h) - 70px),680px);
    height:var(--sd-machine-window-height)!important;
    max-height:680px!important
  }
  #mediaFrame>.media-main:is([src*="v22-product"],[src*="m10-detail"],[src*="ext-product"],[src*="bundle-product"],[src*="cel-10c"],[src*="wein-d900"]){
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    translate:none!important
  }
}

/* Keep the machine at its established size. Only the information column is
   compacted enough for the complete compliance list to remain in view. */
@media (min-width:981px) and (max-width:1100px){
  .summary-card{width:calc(100%/.55);transform:scale(.55);transform-origin:top left}
}
@media (min-width:1101px) and (max-width:1300px){
  .summary-card{width:calc(100%/.59);transform:scale(.59);transform-origin:top left}
}
@media (min-width:1301px) and (max-width:1450px){
  .summary-card{width:calc(100%/.65);transform:scale(.65);transform-origin:top left}
}
@media (min-width:1451px) and (max-width:1650px){
  .summary-card{width:calc(100%/.75);transform:scale(.75);transform-origin:top left}
}
@media (min-width:1651px) and (max-width:1799px){
  .summary-card{width:calc(100%/.79);transform:scale(.79);transform-origin:top left}
}
@media (min-width:1800px) and (max-height:1050px){
  .summary-card{width:calc(100%/.7);transform:scale(.7);transform-origin:top left}
}
@media (min-width:1800px) and (min-height:1051px) and (max-height:1250px){
  .summary-card{width:calc(100%/.83);transform:scale(.83);transform-origin:top left}
}

/* The slave page has delivery and spare-parts controls before its documents in
   source order. Present the shared stock facts and documents directly after
   the price card, matching the other machine pages without shrinking the text. */
body:has(#extensionTotalNet) .config-total>.config-total-box{order:1}
body:has(#extensionTotalNet) .config-total>.config-mini-meta{order:2}
body:has(#extensionTotalNet) .config-total>.trust-note{order:3}
body:has(#extensionTotalNet) .config-total>.config-group:not(.config-group-parts){order:4}
body:has(#extensionTotalNet) .config-total>.config-group-parts{order:5}

/* The English bundle has the longest compliance wording. Its small additional
   reduction keeps the same final list item visible at the verified heights. */
@media (min-width:1101px) and (max-width:1300px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.56);transform:scale(.56)}
}
@media (min-width:1301px) and (max-width:1450px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.62);transform:scale(.62)}
}
@media (min-width:1451px) and (max-width:1650px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.72);transform:scale(.72)}
}
@media (min-width:1651px) and (max-width:1799px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.75);transform:scale(.75)}
}
@media (min-width:1800px) and (max-height:1050px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.66);transform:scale(.66)}
}
@media (min-width:1800px) and (min-height:1051px) and (max-height:1250px){
  html[lang^="en"] body:has(.media-main[src*="bundle-product"]) .summary-card{width:calc(100%/.79);transform:scale(.79)}
}

/* Keep product information readable like the approved Onyx layout. The
   gallery may scale with the viewport, but the text column itself does not. */
@media (min-width:981px){
  .product-info-column .summary-card{
    width:100%!important;
    transform:none!important;
    transform-origin:top left!important
  }
}

body:has(#specTable) .summary-product-title h1,
body:has(#specTable) .summary-product-title strong{
  font-size:clamp(1.72rem,2.25vw,2.05rem)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  font-weight:900!important
}
body:has(#specTable) .summary-product-title .nayax-description,
body:has(#specTable) .summary-product-title .product-intro,
body:has(#specTable) .summary-product-title #partSubtitle,
body:has(#specTable) .summary-card>.product-intro{
  margin-top:7px!important;
  font-size:.94rem!important;
  line-height:1.25!important
}
body:has(#specTable) #specTable td{
  font-size:.92rem!important;
  line-height:1.4!important
}
body:has(#specTable) #specTable td:first-child{
  font-size:.76rem!important
}

/* The legacy DCM5 enlargement pushed the photo outside its white frame on
   phones, tablets and large monitors. Keep the complete set contained. */
body:has(#specTable) .media-main[src*="ict-dcm5-bundle-portrait-final-20260821"]{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  translate:none!important
}
html body.product-ict-dcm5 .media-zoom-frame>.media-main{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  translate:none!important
}
html body.product-ict-cc6100 .media-zoom-frame>.media-main{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:4px!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  translate:none!important
}

/* The CSC-10C gallery keeps one viewport-sized frame on small screens. A
   landscape stock photo must not collapse the frame and pull all copy up. */
@media (max-width:980px){
  body.product-automat-v22 #mediaFrame{
    height:clamp(320px,calc(100svh - 170px),535px)!important;
    min-height:0!important;
    max-height:535px!important;
    padding:16px 16px 50px!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    background:#fff!important
  }
  html body.product-automat-v22 #mediaFrame:has(>.media-main[src*="/images/v22-lager-row.webp"]){
    height:clamp(320px,calc(100svh - 170px),535px)!important;
    max-height:535px!important;
    padding:16px 16px 50px!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    row-gap:0!important;
    background:#fff!important
  }
  body.product-automat-v22 #mediaFrame>.media-main{
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:var(--sd-radius-8)!important;
    transform:none!important;
    translate:none!important
  }
  body.product-automat-v22 #mediaFrame>.media-caption:not([hidden]){
    grid-row:2!important;
    position:static!important;
    width:100%!important;
    margin:8px 0 0!important
  }
  body.product-automat-v22 #mediaFrame>.media-dots{
    grid-row:3!important;
    position:absolute!important;
    bottom:14px!important
  }
}
@media (max-width:600px){
  body:has(#specTable) .summary-product-title h1,body:has(#specTable) .summary-product-title strong{font-size:1.72rem!important}
  body:has(#specTable) .summary-product-title .nayax-description,body:has(#specTable) .summary-product-title .product-intro,body:has(#specTable) .summary-product-title #partSubtitle,body:has(#specTable) .summary-card>.product-intro{font-size:.94rem!important}
}
@media (min-width:981px) and (max-width:1600px) and (max-height:900px){
  body:has(#specTable) .summary-product-title .nayax-description{margin-top:10px!important}
  body:has(#specTable) .config-total-box{padding:14px!important}
  body:has(#specTable) .config-total-price{margin-top:9px!important}
  body:has(#specTable) .cta-stack{margin-top:12px!important}
  body:has(#specTable) #partCartButton{min-height:44px!important;padding:11px 16px!important}
  body:has(#specTable) #sdModuleFinanceCard{margin-top:14px!important;padding:14px!important}
  body:has(#specTable) #sdModuleFinanceCard .sd-finance-heading{margin-bottom:8px!important}
  body:has(#specTable) #sdModuleFinanceCard .sd-finance-terms{margin-top:7px!important}
  body:has(#specTable) #sdModuleFinanceCard .finance-trigger{min-height:44px!important;margin-top:10px!important;padding:10px 12px!important}
  body:has(#specTable) .config-mini-meta{margin-top:12px!important}
  body:has(#specTable) .config-mini-meta>div:not([hidden]){padding:11px 13px!important}
  body:has(#specTable) #deliveryScopeSummary{margin-top:calc(4px + max(0px, 100vh - 775px))!important}
}

/* Bundle price boxes use the same commercial reading order at every size:
   price/VAT, shipping, energy labels, then financing. */
.product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-shipping{
  grid-column:1/-1!important;
  grid-row:3!important
}
.product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-priceline>.energy-cluster-row{
  grid-column:1/-1!important;
  grid-row:4!important;
  margin-top:14px!important
}
.product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.sd-lease-rate{
  grid-column:1/-1!important;
  grid-row:5!important
}
html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-gross,
html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-gross{
  grid-column:1/-1!important;
  grid-row:3!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important
}
html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-shipping,
html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-shipping{grid-row:4!important}
html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-priceline>.energy-cluster-row,
html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.config-total-priceline>.energy-cluster-row{grid-row:5!important}
html[lang^="fr"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.sd-lease-rate,
html[lang^="en"] .product-info-column.product-info-column .config-total-box.config-total-box:is(:has(#configTotalGross),:has(#extensionTotalNet)):has(.energy-cluster-row)>.sd-lease-rate{grid-row:6!important}

/* Slave gallery: one stable stage; arrows remain centered beside every slide. */
body:has(#extensionTotalNet) #mediaFrame{
 height:var(--sd-machine-window-height,var(--sd-uniform-product-media-height,var(--machine-frame-height)))!important;
 min-height:0!important;max-height:none!important;padding:16px 16px 64px!important;
 grid-template-rows:minmax(0,1fr)!important;row-gap:0!important;background:#fff!important
}
body:has(#extensionTotalNet) #mediaFrame > .media-main{
 width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
 object-fit:contain!important;object-position:center!important;transform:none!important;aspect-ratio:auto!important
}
body:has(#extensionTotalNet) #mediaFrame > .media-nav{top:calc(50% - 24px)!important;bottom:auto!important;transform:translateY(-50%)!important}
body:has(#extensionTotalNet) #mediaFrame > .media-dots{position:absolute!important;grid-row:auto!important;bottom:14px!important;padding:0!important}