/* Shared desktop frame. Keep laptop/mobile sizing; bring navigation into the
   same centered composition as the content on wide monitors. */
:root{--ko-desktop-frame-max:1800px;--kerns-content-max:1180px}
body.ko-datasheet-page main > .ko-datasheet-content{width:100%!important}
@media(min-width:1441px){
  :root{
    --ko-frame-edge:max(0px,calc((100vw - var(--ko-desktop-frame-max)) / 2));
    --ko-nav-font:clamp(15px,1.05vw,20px);
    --ko-nav-gap:clamp(17px,1.18vw,23px);
    --kerns-inner-nav-left:max(44px,calc(var(--ko-frame-edge) - 36px));
    --kerns-inner-nav-w:clamp(250px,17.4vw,300px);
    --kerns-inner-offset:calc(var(--ko-frame-edge) + clamp(286px,19.5vw,340px));
    --rail:calc(var(--ko-frame-edge) + clamp(340px,23vw,420px));
  }
  body.kerns-inner-page main{margin-left:var(--kerns-inner-offset)!important;margin-right:var(--ko-frame-edge)!important;max-width:none!important}
  .kerns-nav-menu{font-size:var(--ko-nav-font);gap:var(--ko-nav-gap)}
  .kerns-float-logo img{width:clamp(205px,14.2vw,250px)!important}
  .kerns-subnav,.kerns-company-subnav{width:100%}
  .kerns-subnav a,.kerns-company-subnav a{font-size:clamp(11px,.76vw,14px)!important}
  .kerns-float-nav{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  body.ko-datasheet-page main{padding-left:0;padding-right:0}
  body.ko-datasheet-page main > .ko-datasheet-content{
    width:min(var(--kerns-content-max),calc(100% - 2 * var(--kerns-page-gutter)))!important;
  }
  .brand,.left-nav{left:calc(var(--ko-frame-edge) + 72px)}
  .brand,.brand-logo{width:clamp(205px,14.2vw,250px)}
  .left-nav{width:clamp(268px,18.6vw,320px);font-size:clamp(16px,1.1vw,20px);gap:var(--ko-nav-gap)}
  .home-subnav a{font-size:clamp(10px,.76vw,14px)}
  .home-section-head h2,.home-company h2,.products h2,.trust h2{font-size:clamp(68px,4.2vw,76px);line-height:1.02}
  .hero-copy h1,.hero-copy .hero-title{font-size:clamp(68px,4.2vw,80px);line-height:1}
  .products,.trust,.home-company{padding-right:calc(var(--ko-frame-edge) + 72px)}
  .top-tools{right:calc(var(--ko-frame-edge) + 58px)}
}
/* Both product groups share one image stage and one scale. Contain preserves
   complete components and packaging without stretching or cropping. */
.ko-products-overview .ko-product-stage,
.ko-products-overview .ko-accessory-stage{
  aspect-ratio:4/3;max-height:none;margin-bottom:20px;overflow:hidden;
}
.ko-products-overview .photo-family .ko-product-image,
.ko-products-overview .ko-accessory-stage img{
  width:100%;height:100%;max-height:none;object-fit:contain;transform:none;
}
.ko-products-overview .photo-families,.ko-products-overview .ko-accessory-grid{row-gap:38px}
/* Grid children may shrink to the mobile content column. */
.trust-copy,.engineering-panel,.engineering-matrix>div{min-width:0}
@media(min-width:1441px){.home-applications{padding-right:calc(var(--ko-frame-edge) + 72px)}}
.home-company>*,.home-section-head>*{min-width:0}
/* The long manufacturing heading lives in a half-width column. */
.home-company .company-copy h2{font-size:clamp(30px,2.8vw,48px);line-height:1.08;overflow-wrap:anywhere}
@media(max-width:640px){
  .hero-copy .hero-title{font-size:44px;overflow-wrap:anywhere}
  .trust h2{font-size:clamp(32px,9vw,42px);line-height:1.05;overflow-wrap:anywhere}
}

/* Keep the datasheet document on the same content grid, including older markup. */
@media(min-width:1441px){
  body.kerns-inner-page:has(.docrow) main{
    margin-left:var(--kerns-inner-offset)!important;
    margin-right:var(--ko-frame-edge)!important;
    max-width:none!important;
    padding-left:max(var(--kerns-page-gutter),calc((100vw - var(--kerns-inner-offset) - var(--ko-frame-edge) - var(--kerns-content-max)) / 2))!important;
    padding-right:max(var(--kerns-page-gutter),calc((100vw - var(--kerns-inner-offset) - var(--ko-frame-edge) - var(--kerns-content-max)) / 2))!important;
  }
  body.ko-datasheet-page main > .ko-datasheet-content{width:100%!important}
  body.kerns-inner-page:has(.docrow) main > .kerns-breadcrumb{width:100%!important}
}

/* Final wide-screen adaptation: grow the home content/rail gap gradually,
   keeping the <=1440px laptop layout and existing mobile navigation. */
@media(min-width:1441px){
  :root{--ko-home-content-gap:clamp(48px,calc(14vw - 153.6px),132px)}
  .products,.trust,.home-applications,.home-company{
    padding-left:calc(var(--rail) + var(--ko-home-content-gap));
  }
}

/* Slide count and arrows form one centered group on the header content gutter. */
.hero-controls{position:absolute;z-index:8;right:58px;bottom:52px;display:flex;flex-direction:column;align-items:center;gap:16px}
.hero-controls .hero-count,.hero-controls .hero-arrows{position:static;inset:auto}
.hero-controls .hero-count{text-align:center;width:100%}
@media(min-width:1441px){.hero-controls{right:calc(var(--ko-frame-edge) + 58px)}}
@media(max-width:640px){.hero-controls{right:20px;bottom:24px}}