/* MGPLITKA Solution Media 16:9 2.2.1
 * Non-destructive geometry override.
 * Does not replace /3dcal.php, /solutions/index.php or business-logic JS.
 */
:root{--mg-solution-frame-ratio:16/9!important}

/* Homepage / Smart Studio solution media */
html body #solutions.mg-solutions-section .mg-smart-studio__gallery .mg-smart-gallery-main,
html body #solutions .mg-smart-gallery-main{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
}
html body #solutions .mg-smart-gallery-main>img,
html body #solutions .mg-smart-gallery-main picture,
html body #solutions .mg-smart-gallery-main picture>img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:50% 50%!important;transform:none!important;
}
html body #solutions .mg-smart-gallery-main>img,
html body #solutions .mg-smart-gallery-main>picture{
  position:absolute!important;inset:0!important;
}
html body #solutions .mg-smart-gallery-main>picture>img{display:block!important}
html body #solutions .mg-smart-view{overflow:hidden!important}
html body #solutions .mg-smart-view img{aspect-ratio:16/9!important;width:100%!important;height:auto!important;object-fit:cover!important;object-position:50% 50%!important}

/* /solutions/ cards and detail */
.mgsp-main-image,
.mgsp-card-img,
.mgsp-card--hero .mgsp-card-img{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
}
.mgsp-main-image>img,
.mgsp-main-image>picture,
.mgsp-card-img>img,
.mgsp-card-img>picture{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
}
.mgsp-main-image img,
.mgsp-card-img img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:50% 50%!important;transform:none!important;transition:none!important;
}
.mgsp-thumb{position:relative!important;overflow:hidden!important;aspect-ratio:16/9!important}
.mgsp-thumb img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important}
.mgsp-card:hover .mgsp-card-img img{transform:none!important}

/* 3DCal: geometry only. Existing PHP/JS and point-saving logic stay untouched. */
body .canvas-wrap,
body .canvas-wrap.is-mobile-preview,
#canvasWrap{
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
body .canvas img,
#canvas img,
#viewImage{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important}
body .view img,
[data-view-thumb]{aspect-ratio:16/9!important;width:100%!important;height:auto!important;object-fit:cover!important;object-position:50% 50%!important}

/* Personal account: only saved solutions/projects. Normal personal-account cards and catalog goods are not touched. */
body.mgp-personal-page [data-mg-solution-media],
body.mgp-personal-page [data-mg-project-media],
body.mgp-personal-page [data-mg-solution-card] .mgp-solution-card-media,
body.mgp-personal-page [data-mg-project-card] .mgp-project-card-media,
body.mgp-personal-page .mgp-solution-card-media,
body.mgp-personal-page .mgp-project-card-media,
body.mgp-personal-page .mg-solution-card__media,
body.mgp-personal-page .mg-project-card__media,
body.mgp-personal-page .mg-personal-solution__media,
body.mgp-personal-page .mg-personal-project__media{
  position:relative!important;
  width:100%!important;height:auto!important;min-height:0!important;
  aspect-ratio:16/9!important;overflow:hidden!important;
  background-position:50% 50%!important;background-size:cover!important;background-repeat:no-repeat!important;
}
body.mgp-personal-page [data-mg-solution-media]>img,
body.mgp-personal-page [data-mg-project-media]>img,
body.mgp-personal-page .mgp-solution-card-media>img,
body.mgp-personal-page .mgp-project-card-media>img,
body.mgp-personal-page .mg-solution-card__media>img,
body.mgp-personal-page .mg-project-card__media>img,
body.mgp-personal-page .mg-personal-solution__media>img,
body.mgp-personal-page .mg-personal-project__media>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important;
}

/* Product cards remain the established 3:4 format. This explicit rule is intentionally narrow. */
.mg-product-card__media[data-mg-product-media],
[data-mg-catalog-product] .mg-product-card__media{aspect-ratio:3/4}

@media(max-width:760px){
  html body #solutions .mg-smart-gallery-main,
  .mgsp-main-image,.mgsp-card-img,.mgsp-card--hero .mgsp-card-img,
  body .canvas-wrap,body .canvas-wrap.is-mobile-preview,#canvasWrap{
    aspect-ratio:16/9!important;height:auto!important;max-height:none!important;
  }
}

/* ===== MGPLITKA SOLUTIONS MOBILE 2.4.1 BEGIN =====
 * Canonical presentation layer for /solutions/.
 * Loaded through the already-installed mg_solution_media_unified layer.
 */
.mgsp-detail>.mgsp-crumbs{display:none!important}
@media(max-width:760px){
  .mgsp-shell.mgsp-detail,
  .mgsp-shell.mgsp-list{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-left:10px!important;
    margin-right:10px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .mgsp-detail-head,.mgsp-detail-top,.mgsp-gallery,.mgsp-calculator,
  .mgsp-products,.mgsp-summary,.mgsp-metric-row,.mgsp-door-box,
  .mgsp-plan-wrap,.mgsp-input-grid,.mgsp-input-grid--2{
    min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;
  }
  .mgsp-detail-head{display:block!important;margin:18px 0 16px!important}
  .mgsp-detail-head h1{font-size:30px!important;line-height:1.08!important;margin:0 0 12px!important;overflow-wrap:anywhere}
  .mgsp-detail-head p{font-size:15px!important;line-height:1.55!important;margin:0!important;max-width:none!important}
  .mgsp-facts{display:none!important}
  .mgsp-detail-top{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .mgsp-main-image,.mgsp-gallery .mgsp-main-image,.mgsp-card-img,.mgsp-card--hero .mgsp-card-img{
    position:relative!important;aspect-ratio:16/9!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;border-radius:8px!important;
  }
  .mgsp-main-image>img,.mgsp-card-img>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important}
  .mgsp-thumbs{display:flex!important;grid-template-columns:none!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;padding:0 0 5px!important;margin-top:7px!important;-webkit-overflow-scrolling:touch}
  .mgsp-thumb{flex:0 0 158px!important;min-width:158px!important;max-width:158px!important;height:58px!important;aspect-ratio:auto!important}
  .mgsp-thumb img{width:82px!important;height:46px!important;aspect-ratio:16/9!important;object-fit:cover!important;position:static!important;flex:0 0 auto!important}
  .mgsp-calculator{position:relative!important;top:auto!important;padding:14px!important;border-radius:9px!important;overflow:hidden!important}
  .mgsp-calculator h2{font-size:22px!important;line-height:1.2!important;margin-bottom:16px!important}
  .mgsp-input-grid,.mgsp-input-grid--2{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .mgsp-input-grid label,.mgsp-reserve{min-width:0!important;font-size:12px!important}
  .mgsp-input-grid input,.mgsp-reserve select{max-width:100%!important;min-width:0!important;width:100%!important;height:48px!important;font-size:16px!important;box-sizing:border-box!important}
  .mgsp-metric-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;overflow:hidden!important}
  .mgsp-metric-row span{min-width:0!important;padding:12px!important}
  .mgsp-metric-row small{font-size:11px!important;white-space:normal!important}
  .mgsp-metric-row b{font-size:19px!important;white-space:nowrap!important}
  .mgsp-door-box{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;padding:14px!important;overflow:hidden!important}
  .mgsp-door-box h3{font-size:18px!important;line-height:1.25!important}
  .mgsp-door-icon{max-width:100%!important;grid-template-columns:38px minmax(0,1fr)!important}
  .mgsp-plan-head{margin-top:18px!important}
  .mgsp-plan-wrap{padding:8px!important;overflow:hidden!important;box-sizing:border-box!important}
  .mgsp-plan-wrap svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-width:0!important}
  .mgsp-reserve{display:grid!important;grid-template-columns:minmax(0,1fr) 112px!important;align-items:center!important;justify-content:stretch!important;gap:10px!important;margin-top:12px!important}
  .mgsp-reserve select{width:112px!important;margin:0!important}
  .mgsp-calc-status{text-align:left!important;margin-top:8px!important}
  .mgsp-products{overflow:hidden!important;padding:12px!important}
  .mgsp-table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .mgsp-summary{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:15px!important;overflow:hidden!important}
  .mgsp-actions,.mgsp-actions--final{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .mgsp-actions .mgsp-btn{width:100%!important;white-space:normal!important;text-align:center!important}
  .mgsp-list .mgsp-card-grid{grid-template-columns:minmax(0,1fr)!important}
  .mgsp-list .mgsp-card--hero{grid-column:auto!important;grid-row:auto!important}
  .mgsp-list .mgsp-card--hero .mgsp-card-img{min-height:0!important;aspect-ratio:16/9!important}
}
@media(max-width:420px){
  .mgsp-metric-row{grid-template-columns:minmax(0,1fr)!important}
  .mgsp-reserve{grid-template-columns:minmax(0,1fr)!important}
  .mgsp-reserve select{width:100%!important}
}
/* ===== MGPLITKA SOLUTIONS MOBILE 2.4.1 END ===== */