/* V22 mobile layout guardrails: images stack, text never collapses into vertical columns. */
@media(max-width:820px){
  body.v22 .v20-home-products .teaser,
  body.v22 .v20-home-scenarios .teaser,
  body.v22.v20-page-etxa-plus .angles,
  body.v22.v20-page-crowdfunding .tiers{
    display:grid!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    margin-right:0!important;
    overflow:visible!important;
    padding:4px 0 12px!important;
    scroll-snap-type:none!important;
  }

  body.v22 .v20-home-products .teaser>* ,
  body.v22 .v20-home-scenarios .teaser>* ,
  body.v22.v20-page-etxa-plus .angles>* ,
  body.v22.v20-page-crowdfunding .tiers>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    margin:0!important;
  }

  body.v22 .v20-home-products .teaser img,
  body.v22 .v20-home-scenarios .teaser img,
  body.v22.v20-page-etxa-plus .angles img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    object-fit:contain!important;
  }

  /* Scenario cards use dedicated 4:5 mobile art; keep the picture and image
     on the same ratio so the card cannot expose its dark media background. */
  body.v22 .v20-home-scenarios .v10-cardpic{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/5!important;
    overflow:hidden!important;
  }

  body.v22 .v20-home-scenarios .v10-cardpic img{
    width:100%!important;
    height:100%!important;
    aspect-ratio:4/5!important;
    object-fit:cover!important;
  }

  body.v22.v20-page-etxa-plus .angles figure{
    display:block!important;
    overflow:hidden!important;
    border:1px solid #d9e1ea!important;
    border-radius:7px!important;
    background:#fff!important;
  }
  body.v22.v20-page-etxa-plus .angles figcaption{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    padding:12px 14px!important;
    color:#314258!important;
    font-size:12px!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }

  body.v22 .pdthumbs{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:6px!important;
    margin-top:10px!important;
  }
  body.v22 .pdthumb{
    display:flex!important;
    width:100%!important;
    min-height:42px!important;
    align-items:center!important;
    aspect-ratio:auto!important;
    padding:9px 12px!important;
    border:1px solid #ccd6e2!important;
    border-radius:6px!important;
    background:#fff!important;
    color:#35465b!important;
    font-size:11px!important;
    font-weight:750!important;
    line-height:1.4!important;
    text-align:left!important;
  }
  body.v22 .pdthumb.on{border-color:#1768e8!important;background:#eef5ff!important;color:#1257bd!important}
  body.v22 .pdthumb img{display:none!important}
  body.v22 .pdthumb:after{content:attr(aria-label)}

  body.v22 .v22-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    margin:12px 0;
    border:0;
    border-radius:0;
    background:transparent;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }
  body.v22 .v22-table-scroll:focus{outline:3px solid rgba(32,108,218,.24);outline-offset:2px}
  body.v22 .v22-table-scroll table{
    display:table!important;
    width:100%!important;
    min-width:var(--v22-table-min,720px)!important;
    margin:0!important;
    overflow:visible!important;
    table-layout:auto!important;
  }
  body.v22 .v22-table-scroll th,
  body.v22 .v22-table-scroll td{
    min-width:128px!important;
    padding:11px 12px!important;
    font-size:11px!important;
    line-height:1.5!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    white-space:normal!important;
  }

  body.v22.v20-page-store .commercecard .productbuy{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:9px!important;
  }
  body.v22.v20-page-store .commercecard .addbtn,
  body.v22.v20-page-store .commercecard .viewbtn{
    width:100%!important;
    max-width:none!important;
    min-height:40px!important;
    padding:9px 10px!important;
    font-size:10px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }

  /* Mobile commerce must show the product before its controls. The earlier
     side-by-side card reduced product artwork to a tiny thumbnail. */
  body.v22.v20-page-store .machinecard,
  body.v22.v20-page-store .commercecard:not(.servicecard){
    display:block!important;
    min-height:0!important;
  }
  body.v22.v20-page-store .machinephoto,
  body.v22.v20-page-store .commercecard .productmedia{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4/3!important;
  }
  body.v22.v20-page-store .machinephoto img,
  body.v22.v20-page-store .commercecard .productimg{
    display:block!important;
    width:100%!important;
    height:100%!important;
    padding:12px!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  body.v22.v20-page-store .machinebody,
  body.v22.v20-page-store .commercecard .productbody{
    width:100%!important;
    min-width:0!important;
  }

  /* The configurator uses the same product rendering rule. Keep the full
     device visible instead of shrinking it beside the option panel. */
  body.v22.v20-page-configurator .configmain img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    padding:10px!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  body.v22.v20-page-crowdfunding .tier ul{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:2px!important;
  }
  body.v22.v20-page-crowdfunding .tier li{
    width:100%!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
}