/*
 * Final responsive containment layer.
 * Geometry and text fitting only: the scroll-reactive tone/background system
 * intentionally remains owned by homepage-v2.css and product-presentation.css.
 */

html,body{max-width:100%;overflow-x:clip}
.nl-site-header,.nl-site-header__inner,.nl-site-header__actions,.nl-site-nav,
.nl-home,.nl-home main,.nxa-page,.nxa-page>section,.nxa-page .nx-shell,
.nl-info-page,.nl-editorial,.nl-shop-page{min-width:0;max-width:100%}

/* Match ordinary page hero rhythm: their first eyebrow starts at 152px on
   desktop/tablet. Account markup otherwise collapses upward under the fixed
   header because WooCommerce owns its outer wrapper. */
html body.woocommerce-account:not(.logged-in) #main-content .page-wrapper.my-account .woocommerce{
  margin-top:152px!important;
  padding-top:0!important
}
html body.woocommerce-account:not(.logged-in) #main-content>.woocommerce{
  margin-top:0!important;
  padding-top:152px!important
}

/* Fixed-size controls keep their geometry; translated labels fit inside it. */
.nx-button,.nx-text-link,.nx3-product-card__link,
.nxa-hero-secondary-cta,.nxa-hero-plan-cta,.nxa-plan-cart,.nxa-plan-buy,
.nxa-product-nav__buy,.nl-editorial-search button,
.woocommerce a.button,.woocommerce button.button{
  box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;
  text-align:center;overflow-wrap:anywhere;hyphens:auto
}
.nx-button>span,.nx-text-link>span,.nx3-product-card__link>span,
.nxa-hero-secondary-cta>span,.nxa-hero-plan-cta>span,
.nxa-product-nav__buy>span{min-width:0;max-width:100%;overflow:hidden}

/* Product plans may scroll internally on small screens, but never widen the page. */
.nxa-plans,.nxa-plans__cards,.nxa-integrations .nx-shell,
.nl-integrations,.nxa-page .nxa-title-row,.nxa-page .nxa-cap-grid,
.nxa-page .nlp-tour-grid,.nxa-page .nxa-install__steps{
  min-width:0;max-width:100%;box-sizing:border-box
}
.nxa-plans__cards{contain:inline-size}
.nxa-page article.nxa-plan,.nxa-page aside.nxa-plan,
.nxa-plan__head,.nxa-plan__head strong,.nxa-plan__head em,
.nxa-plan small,.nxa-plan__included,.nxa-plan__sites{
  min-width:0;max-width:100%;overflow-wrap:anywhere;hyphens:auto
}

@media(max-width:900px){
  .nxa-page h1,.nxa-page h2,.nxa-page h3,
  .nl-home h1,.nl-home h2,.nl-home h3,
  .nl-info-page h1,.nl-info-page h2,.nl-info-page h3,
  .nl-editorial h1,.nl-editorial h2,.nl-editorial h3{
    min-width:0;max-width:100%;overflow-wrap:anywhere;hyphens:auto
  }
  .nxa-page .nx-shell,.nl-home .nx-shell,.nl-info-page .nl-shell,
  .nl-editorial .nl-shell{box-sizing:border-box;min-width:0;max-width:100%}
}

@media(max-width:767px){
  /* Shared header containment on every public template. */
  body.nl-custom-header .nl-site-header{right:0;left:0;width:100%;max-width:100vw}
  body.nl-custom-header .nl-site-header__inner{
    width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;
    min-width:0!important;margin-inline:auto!important
  }
  body.nl-custom-header .nl-site-header__brand{min-width:0;max-width:calc(100% - 160px)}
  /* Keep the theme's dark/light logo switching intact. Setting display here
     would expose both wordmark images and create the doubled AI badge. */
  body.nl-custom-header .nl-site-header__logo{max-width:100%;height:auto}
  body.nl-custom-header .nl-site-header__actions{min-width:146px;max-width:160px}
  /* The three mobile controls are one right-aligned group. The brand may use
     the remaining space, but it must never pull the controls toward itself. */
  body.nl-custom-header .nl-site-header__toggle{
    flex:0 0 46px!important;margin-left:auto!important
  }
  body.nl-custom-header .nl-site-header__actions{
    flex:0 0 auto!important;margin-left:0!important;
    width:auto!important;min-width:0!important;max-width:none!important
  }

  /* Homepage: translated copy and the product road determine the real hero
     height. This prevents the following section from sliding underneath it. */
  body.nl-marketing-home:not(.nl-product-presentation) .nx-hero{
    height:auto!important;min-height:100svh!important;padding-bottom:48px!important;
    overflow:hidden!important
  }
  body.nl-marketing-home:not(.nl-product-presentation) .nx-hero__grid{
    height:auto!important;min-height:0!important;padding-bottom:0!important
  }
  body.nl-marketing-home:not(.nl-product-presentation) .nx-hero__copy{
    width:100%;min-width:0;max-width:100%;padding-bottom:0!important
  }
  body.nl-marketing-home:not(.nl-product-presentation) .nx3-mobile-scene{
    width:100%;min-width:0;max-width:100%;margin-bottom:0!important
  }
  .nx3-mobile-products a{min-width:0;max-width:100%;box-sizing:border-box}
  .nx3-mobile-products a>span{min-width:0;max-width:100%;overflow:hidden}
  .nx3-mobile-products small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Product presentations: long German/French/Italian headings cannot take
     max-content width inside centred flex containers. */
  body.nl-product-presentation .nxa-page,
  body.nl-product-presentation .nxa-page>section,
  body.nl-product-presentation .nxa-page .nx-shell{width:100%;min-width:0;max-width:100%}
  body.nl-product-presentation .nxa-page .nx-shell{
    width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;
    margin-inline:auto!important
  }
  body.nl-product-presentation .nxa-page h1,
  body.nl-product-presentation .nxa-page h2,
  body.nl-product-presentation .nxa-page h3{
    width:100%!important;min-width:0!important;max-width:100%!important;
    overflow-wrap:anywhere!important;word-break:normal;hyphens:auto
  }
  body.nl-product-presentation .nxa-final h2{align-self:stretch!important}
  body.nl-product-presentation .nxa-plans{width:100%!important;max-width:100%!important}
  body.nl-product-presentation .nxa-plans__cards{
    width:100%!important;max-width:100%!important;overflow-x:auto!important;
    overflow-y:hidden!important;overscroll-behavior-inline:contain
  }

  /* The guest account shell must begin below the fixed 70px mobile header.
     Its own compact 24px inset keeps the form aligned with ordinary pages. */
  body.woocommerce-account:not(.logged-in) #main-content{
    padding-top:70px!important
  }
  body.woocommerce-account:not(.logged-in) #main-content>.woocommerce{
    padding-top:24px!important
  }
  /* The theme's mobile account row already begins 10px below the document
     edge. A 114px margin therefore places the eyebrow at the same absolute
     124px start as ordinary mobile pages. */
  html body.woocommerce-account:not(.logged-in) #main-content .page-wrapper.my-account .woocommerce{
    margin-top:114px!important;
    padding-top:0!important
  }
  html body.woocommerce-account:not(.logged-in) #main-content>.woocommerce{
    margin-top:0!important;
    padding-top:114px!important
  }

  /* Two hero CTAs retain their current height and columns. Longer labels use
     at most two compact lines instead of escaping the control. */
  .nxa-hero__actions .nxa-hero-secondary-cta,.nxa-hero-plan-cta{
    height:44px!important;min-height:44px!important;max-height:44px!important;
    padding:5px 10px!important;font-size:clamp(9px,2.75vw,11px)!important;
    line-height:1.1!important;white-space:normal!important
  }
  .nxa-plan-cart,.nxa-plan-buy{
    height:48px!important;min-height:48px!important;max-height:48px!important;
    padding:5px 10px!important;font-size:clamp(9px,2.75vw,11px)!important;
    line-height:1.1!important;white-space:normal!important
  }
  .nx-button,.nx-text-link,.nx3-product-card__link,
  .nxa-product-nav__buy,.nl-editorial-search button,
  .woocommerce a.button,.woocommerce button.button{
    font-size:clamp(9px,2.9vw,12px);line-height:1.15;white-space:normal
  }

  /* Fixed-height homepage workflow tabs: contain two-line translations. */
  .nx3-workbench__nav>button{
    box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
    overflow:hidden!important
  }
  .nx3-workbench__nav>button strong,.nx3-workbench__nav>button small{
    min-width:0;max-width:100%;overflow:hidden;overflow-wrap:anywhere;
    line-height:1.08;hyphens:auto
  }

  /* Guides search and pagination keep their existing outer dimensions. */
  .nl-editorial-search{min-width:0;max-width:100%;box-sizing:border-box}
  .nl-editorial-search input{min-width:0;max-width:100%}
  .navigation.pagination .nav-links{display:flex;max-width:100%;flex-wrap:wrap;gap:8px}
  .navigation.pagination .page-numbers{
    box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;
    font-size:clamp(9px,2.8vw,12px);line-height:1.1;text-align:center
  }

  /* Mobile product mega menu: preserve its compact card size while giving
     translated copy a predictable text column and breathing room. */
  .nl-products-mega__inner{padding:16px!important}
  .nl-products-mega__grid{gap:16px!important}
  .nl-mega-product{min-width:0!important;max-width:100%!important}
  .nl-mega-product__content{min-width:0!important;max-width:100%!important;padding:13px!important}
  .nl-mega-product__top,.nl-mega-product__copy,.nl-mega-product__meta,
  .nl-mega-product__content>strong{min-width:0;max-width:100%;overflow:hidden}
  .nl-mega-product__copy{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
  .nl-mega-product__meta b{display:none}
}

@media(max-width:390px){
  body.nl-custom-header .nl-site-header__brand{max-width:calc(100% - 154px)}
  body.nl-custom-header .nl-site-header__actions{min-width:142px;max-width:154px;gap:6px}
  .nx3-mobile-products a{
    grid-template-columns:42px minmax(0,1fr) 20px!important;
    gap:8px!important;padding-inline:8px!important
  }
  .nx3-mobile-products a>i{flex-basis:42px!important;width:42px!important;min-width:42px!important}
}