/* Compatibility marker: authoritative responsive preview layer (FINAL 7.5.12) */
/* =============================================================================
   NLO Desktop Builder — authoritative responsive preview layer (FINAL 7.5.13)
   One geometry contract only. Device widths below refer to the real CSS
   viewport inside the decorative device border:
     laptop 1180px · tablet 820px · mobile 480px
   ============================================================================= */

.nb-canvas-stage{overflow:visible}
.nb-device-shell{
  --nb-preview-width:100%;
  width:var(--nb-preview-width)!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 auto!important;
  margin-inline:auto!important;
  min-height:78vh;
  transition:width .22s ease,max-width .22s ease;
  box-sizing:border-box!important;
}
.nb-device-shell #nb-frame.nb-canvas-frame{
  width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;box-sizing:border-box!important
}
.nb-device-shell[data-device="desktop"]{width:100%!important;max-width:none!important;padding:0!important}
/* shell widths include the decorative border so the inner viewport is exact */
.nb-device-shell[data-device="laptop"]{width:1194px!important;max-width:1194px!important;padding:18px 0 28px!important}
.nb-device-shell[data-device="tablet"]{width:836px!important;max-width:836px!important;padding:18px 0 30px!important}
.nb-device-shell[data-device="mobile"]{width:498px!important;max-width:498px!important;padding:18px 0 34px!important}

/* Device chrome. */
.nb-device-shell[data-device="laptop"] #nb-frame.nb-canvas-frame{border:7px solid #2b2d30!important;border-radius:12px!important;box-shadow:0 20px 46px rgba(0,0,0,.18)!important;overflow:visible!important}
.nb-device-shell[data-device="tablet"] #nb-frame.nb-canvas-frame{border:8px solid #242424!important;border-radius:22px!important;box-shadow:0 18px 44px rgba(0,0,0,.18)!important;overflow:visible!important}
.nb-device-shell[data-device="mobile"] #nb-frame.nb-canvas-frame{border:9px solid #161616!important;border-radius:30px!important;box-shadow:0 22px 55px rgba(0,0,0,.24)!important;overflow:visible!important}
.nb-device-shell[data-device="mobile"] #nb-frame.nb-canvas-frame:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:78px;height:17px;background:#161616;border-radius:0 0 14px 14px;z-index:80;pointer-events:none}
.nb-device-shell[data-device="tablet"] #nb-frame.nb-canvas-frame:before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#666;z-index:80;pointer-events:none}
.nb-device-shell[data-device="mobile"] .nb-canvas-device{padding-top:24px!important}

/* The application canvas scrolls when the selected simulated device is wider
   than the available editor area. Never silently shrink the simulated viewport. */
body.nlo-desktop-builder-v5 #nb-canvas.device-laptop .nb-canvas-stage,
body.nlo-desktop-builder-v5 #nb-canvas.device-tablet .nb-canvas-stage,
body.nlo-desktop-builder-v5 #nb-canvas.device-mobile .nb-canvas-stage{
  min-width:0!important;width:100%!important;max-width:100%!important;justify-content:center!important;
  overflow-x:auto!important;box-sizing:border-box!important
}
body.nlo-desktop-builder-v5 #nb-canvas.device-mobile .nb-canvas-stage{padding-inline:8px!important}

/* Structural responsive behaviour. */
.nb-canvas-frame[data-device="tablet"],.nb-canvas-frame[data-device="mobile"]{overflow-x:hidden!important}
.nb-canvas-frame[data-device="tablet"] :is(.nb-section-inner,.nb-container,.nlo-container,.theme-shell,.nash-shell),
.nb-canvas-frame[data-device="mobile"] :is(.nb-section-inner,.nb-container,.nlo-container,.theme-shell,.nash-shell){max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="tablet"] :is(img,video,svg,canvas,iframe,embed,object),
.nb-canvas-frame[data-device="mobile"] :is(img,video,svg,canvas,iframe,embed,object){max-width:100%!important;height:auto;box-sizing:border-box!important}
.nb-canvas-frame[data-device="tablet"] .nb-section-columns{flex-wrap:wrap!important}
.nb-canvas-frame[data-device="tablet"] .nb-column{min-width:0!important;flex:1 1 calc(50% - 12px)!important;max-width:100%!important}
.nb-canvas-frame[data-device="mobile"] :is(.nb-section-columns,.nb-columns,.nlo-columns){display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;grid-template-columns:minmax(0,1fr)!important}
.nb-canvas-frame[data-device="mobile"] :is(.nb-column,.nlo-column){width:100%!important;max-width:100%!important;min-width:0!important;flex:1 1 100%!important}
.nb-canvas-frame[data-device="mobile"] .nb-element-tools,
.nb-canvas-frame[data-device="mobile"] .nb-section-actions{font-size:9px}

/* Hidden-on-device editor badge. */
.nb-element.is-device-hidden{opacity:.38;outline:2px dashed rgba(201,163,92,.85)!important;outline-offset:2px;filter:saturate(.65);position:relative}
.nb-device-hidden-badge{position:absolute;top:4px;left:4px;z-index:75;background:#14213D;color:#fff;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;pointer-events:none}

/* Builder shell adaptation only; it must not alter the simulated device width. */
@media(max-width:1360px){.nsb-sidebar{width:250px}.nsb-inspector{width:280px}}
@media(max-width:1080px){.builder-navigation{display:none}}
@media(max-width:860px){.nsb-sidebar{width:220px}.nsb-inspector{position:fixed;inset-block:var(--nb-header-h) 0;inset-inline-start:0;z-index:60;width:300px;box-shadow:var(--nb-shadow-lg);transform:translateX(0)}.nb-inspector-close{display:block}}

/* Header/navigation selected-device behaviour. */
.nb-canvas-frame[data-device="tablet"] .nlo-signature-main>.nash-shell,
.nb-canvas-frame[data-device="mobile"] .nlo-signature-main>.nash-shell{width:calc(100% - 12px)!important;min-height:72px!important;gap:10px!important;flex-wrap:wrap!important}
.nb-canvas-frame[data-device="tablet"] .nlo-brand-menu,
.nb-canvas-frame[data-device="mobile"] .nlo-brand-menu{display:block!important;margin-inline-start:auto!important}
.nb-canvas-frame[data-device="tablet"] .nlo-live-page-navigation,
.nb-canvas-frame[data-device="mobile"] .nlo-live-page-navigation{display:none!important;position:absolute!important;top:100%!important;inset-inline:0!important;width:100%!important;max-width:100%!important;max-height:calc(100dvh - 88px)!important;padding:14px!important;border:0!important;border-top:1px solid rgba(200,168,93,.45)!important;border-radius:0!important;background:linear-gradient(180deg,#061b35 0%,#082b50 100%)!important;box-shadow:0 22px 44px rgba(7,25,47,.30)!important;z-index:20000!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.nb-canvas-frame[data-device="tablet"] .nlo-signature-header.is-open .nlo-live-page-navigation,
.nb-canvas-frame[data-device="tablet"] .nlo-signature-header.has-menu-open .nlo-live-page-navigation,
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header.is-open .nlo-live-page-navigation,
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header.has-menu-open .nlo-live-page-navigation{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.nb-canvas-frame[data-device="tablet"] .nlo-live-nav-level-0,
.nb-canvas-frame[data-device="mobile"] .nlo-live-nav-level-0{display:block!important}
.nb-canvas-frame[data-device="tablet"] .nlo-live-nav-item>.nlo-live-nav-level,
.nb-canvas-frame[data-device="mobile"] .nlo-live-nav-item>.nlo-live-nav-level{display:block!important;position:static!important;min-width:0!important;box-shadow:none!important;background:#faf8f2!important;border:0!important;border-inline-start:2px solid #c5a74c!important}
.nb-canvas-frame[data-device="tablet"] .nlo-signature-header[dir="rtl"] :is(.nlo-live-nav-level,.nlo-live-nav-item>a,.nlo-live-nav-label),
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header[dir="rtl"] :is(.nlo-live-nav-level,.nlo-live-nav-item>a,.nlo-live-nav-label){direction:rtl!important;text-align:right!important}
.nb-canvas-frame[data-device="tablet"] .nlo-signature-header[dir="ltr"] :is(.nlo-live-nav-level,.nlo-live-nav-item>a,.nlo-live-nav-label),
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header[dir="ltr"] :is(.nlo-live-nav-level,.nlo-live-nav-item>a,.nlo-live-nav-label){direction:ltr!important;text-align:left!important}

/* Hero behaviour. */
.nb-canvas-frame[data-device="tablet"] .nlo-signature-hero,
.nb-canvas-frame[data-device="mobile"] .nlo-signature-hero{height:auto!important;background-attachment:scroll!important}
.nb-canvas-frame[data-device="tablet"] .nlo-signature-hero{min-height:480px!important}
.nb-canvas-frame[data-device="mobile"] .nlo-signature-hero{min-height:420px!important}
.nb-canvas-frame[data-device="tablet"] :is(.nlo-signature-hero-grid,.theme-hero-grid),
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero-grid,.theme-hero-grid){grid-template-columns:minmax(0,1fr)!important;min-height:0!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="tablet"] :is(.nlo-hero-proof,.theme-hero-proof),
.nb-canvas-frame[data-device="mobile"] :is(.nlo-hero-proof,.theme-hero-proof){display:none!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero-grid,.theme-hero-grid){display:grid!important;width:calc(100% - 12px)!important;margin-inline:auto!important;padding:34px 18px 48px!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero .nlo-legacy-hero-copy,.theme-hero-copy){width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;padding-inline-start:16px!important;padding-inline-end:6px!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero .nlo-legacy-hero-copy h1,.theme-hero-copy h1){max-width:100%!important;min-width:0!important;font-size:30px!important;line-height:1.28!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero .nlo-legacy-hero-copy p,.theme-hero-copy p){width:100%!important;max-width:100%!important;min-width:0!important;font-size:15px!important;line-height:1.85!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
.nb-canvas-frame[data-device="mobile"] .nlo-brand-topbar,
.nb-canvas-frame[data-device="mobile"] .nlo-brand-actions{display:none!important}
.nb-canvas-frame[data-device="mobile"] .nlo-brand-identity{min-width:0!important}
.nb-canvas-frame[data-device="mobile"] .nlo-brand-identity :is(small,em){display:none!important}
.nb-canvas-frame[data-device="mobile"] .nlo-hero-actions{flex-direction:column!important;align-items:stretch!important}

/* Footer and magazine grids. */
.nb-canvas-frame[data-device="tablet"] .nlo-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.nb-canvas-frame[data-device="mobile"] .nlo-footer-grid{grid-template-columns:1fr!important}
.nb-canvas-frame[data-device="tablet"] .nlo-footer-callout,
.nb-canvas-frame[data-device="mobile"] .nlo-footer-callout{grid-template-columns:1fr!important}
.nb-canvas-frame[data-device="mobile"] .nlo-footer-bottom{flex-direction:column!important;align-items:flex-start!important}
.nb-canvas-frame[data-device="tablet"] .nlo-mag-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.nb-canvas-frame[data-device="mobile"] .nlo-mag-card-grid{grid-template-columns:1fr!important;width:calc(100% - 12px)!important}
.nb-canvas-frame[data-device="tablet"] .nlo-mag-popular-shelf>div{grid-template-columns:repeat(2,1fr)!important}
.nb-canvas-frame[data-device="mobile"] .nlo-mag-popular-shelf>div{grid-template-columns:1fr!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-mag-grid-intro,.nlo-mag-popular-shelf){width:calc(100% - 12px)!important}

/* Builder content, embeds and long text. Arabic/English words keep normal word
   boundaries; URLs and code can still scroll inside their own components. */
.nb-canvas-frame[data-device="tablet"] #builder-drop-zone>.nb-section>.nb-container,
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone>.nb-section>.nb-container{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="tablet"] #builder-drop-zone>.nb-section>.nb-container{padding-inline:14px!important}
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone>.nb-section>.nb-container{padding-inline:6px!important}
.nb-canvas-frame[data-device="tablet"] :is(.nb-code-preview-wrap,.nb-embed,.nlo-code-wrap),
.nb-canvas-frame[data-device="mobile"] :is(.nb-code-preview-wrap,.nb-embed,.nlo-code-wrap){width:100%!important;max-width:100%!important;margin-inline:0!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="tablet"] :is(.nb-code-preview-wrap>iframe,.nb-embed>iframe,.nlo-code-wrap>.nlo-code-frame),
.nb-canvas-frame[data-device="mobile"] :is(.nb-code-preview-wrap>iframe,.nb-embed>iframe,.nlo-code-wrap>.nlo-code-frame){display:block!important;width:100%!important;max-width:100%!important;min-height:220px!important}
.nb-canvas-frame[data-device="tablet"] .nb-element,
.nb-canvas-frame[data-device="mobile"] .nb-element{max-width:100%!important;min-width:0!important;word-break:normal!important;overflow-wrap:break-word!important}
.nb-canvas-frame[data-device="tablet"] .nb-element table,
.nb-canvas-frame[data-device="mobile"] .nb-element table{max-width:100%!important}
.nb-canvas-frame[data-device="mobile"] :is(img,video,svg,canvas,iframe,embed,object,table,pre){max-width:100%!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="mobile"] .nb-color-palette{grid-template-columns:repeat(2,minmax(0,1fr))!important}


/* =============================================================================
   FINAL 7.5.14 — NARROW-CONTAINER REFLOW (AR/EN)
   A simulated Phone inside a wide desktop window does not trigger ordinary
   @media rules. Make the preview frame a size container and collapse columns,
   hero copy and text according to the ACTUAL rendered preview width.
   ============================================================================= */
.nb-canvas-frame{container-type:inline-size;container-name:nlo-preview-frame}

/* Selected-device path: strongest guarantee for the Builder/standalone preview. */
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone :is(.nb-section-columns,.nb-columns,.nlo-columns),
.nb-canvas-frame[data-device="mobile"] .nlo-signature-hero-grid{
  display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important
}
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone :is(.nb-column,.nlo-column){
  width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 100%!important;box-sizing:border-box!important
}
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone :is(.nb-element,.nb-text,.nb-heading,.nb-rich-edit),
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero .nlo-legacy-hero-copy,.theme-hero-copy){
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important
}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-signature-hero .nlo-legacy-hero-copy p,.nlo-signature-hero .nlo-legacy-hero-copy h1,.theme-hero-copy p,.theme-hero-copy h1),
.nb-canvas-frame[data-device="mobile"] #builder-drop-zone :is(.nb-text,.nb-heading,.nb-rich-edit){
  width:100%!important;max-width:100%!important;min-width:0!important;
  word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;box-sizing:border-box!important
}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-hero-proof,.theme-hero-proof){display:none!important}

/* Width-driven path: also works when the user simply narrows the preview/window. */
@container nlo-preview-frame (max-width:720px){
  #builder-drop-zone :is(.nb-section-columns,.nb-columns,.nlo-columns){
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important
  }
  #builder-drop-zone :is(.nb-column,.nlo-column){
    width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 100%!important
  }
  #builder-drop-zone :is(.nb-element,.nb-text,.nb-heading,.nb-rich-edit){
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
    word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important
  }
  .nlo-signature-hero-grid,.theme-hero-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:calc(100% - 20px)!important;
    max-width:100%!important;min-width:0!important;margin-inline:auto!important;gap:18px!important;box-sizing:border-box!important
  }
  .nlo-signature-hero .nlo-legacy-hero-copy,.theme-hero-copy{
    width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
    padding-inline:18px 8px!important
  }
  .nlo-signature-hero .nlo-legacy-hero-copy :is(h1,p),.theme-hero-copy :is(h1,p){
    width:100%!important;max-width:100%!important;min-width:0!important;word-break:normal!important;
    overflow-wrap:break-word!important;hyphens:none!important;box-sizing:border-box!important
  }
  .nlo-hero-proof,.theme-hero-proof{display:none!important}
}

/* Fallback for browsers/contexts without container queries. */
@media(max-width:720px){
  body.nlo-desktop-builder-v5 #builder-drop-zone :is(.nb-section-columns,.nb-columns,.nlo-columns){
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;width:100%!important
  }
  body.nlo-desktop-builder-v5 #builder-drop-zone :is(.nb-column,.nlo-column){
    width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 100%!important
  }
  body.nlo-desktop-builder-v5 #builder-drop-zone :is(.nb-element,.nb-text,.nb-heading,.nb-rich-edit){
    width:100%!important;max-width:100%!important;min-width:0!important;word-break:normal!important;
    overflow-wrap:break-word!important;hyphens:none!important;box-sizing:border-box!important
  }
}

/* =============================================================================
   FINAL 7.5.18 — SCREEN-SAFE BUILDER SHELL PATCH
   Additive only: improves fit on smaller desktop/tablet displays without changing
   the canonical simulated device widths (1180 / 820 / 480) or editor behaviour.
   ============================================================================= */
@media(max-width:1280px){
  body.nlo-desktop-builder-v5{--v5-tools-w:232px}
  body.nlo-desktop-builder-v5 #nb-inspector.nsb-inspector{width:min(340px,calc(100vw - 24px))!important;min-width:0!important}
  body.nlo-desktop-builder-v5 #nb-inspector.nsb-inspector.is-collapsed{width:min(340px,calc(100vw - 24px))!important}
  body.nlo-desktop-builder-v5 .nb-panel-toggle--inspector{right:min(340px,calc(100vw - 24px))!important}
  #nlo-top-tabs{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;scrollbar-width:thin}
  #nlo-top-tabs>a,#nlo-top-tabs .nlo-primary-nav>a,#nlo-top-tabs summary,#nlo-top-tabs button{flex:0 0 auto}
}
@media(max-width:1024px){
  body.nlo-desktop-builder-v5{--v5-tools-w:214px}
  body.nlo-desktop-builder-v5 #nb-toolbar.nsb-toolbar{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;scrollbar-width:thin}
  body.nlo-desktop-builder-v5 #nb-canvas.nsb-canvas{overscroll-behavior:contain}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-category-grid{grid-template-columns:repeat(2,minmax(82px,1fr))!important}
  body.nlo-desktop-builder-v5 :is(.nlo-media-dialog,.nlo-document-dialog,.nlo-header-editor-dialog,.nlo-footer-editor-dialog,.nlo-embed-dialog,.nlo-form-dialog,.nlo-page-create-modal){max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important}
}
@media(max-width:820px){
  body.nlo-desktop-builder-v5{--v5-tools-w:min(202px,34vw)}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-sidebar-header{padding-inline:10px!important}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-sidebar-content{padding-inline:10px!important}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-category-grid{grid-template-columns:1fr!important}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-element{min-height:60px!important}
  body.nlo-desktop-builder-v5 #nb-inspector.nsb-inspector{width:min(320px,92vw)!important}
  body.nlo-desktop-builder-v5 #nb-inspector.nsb-inspector.is-collapsed{width:min(320px,92vw)!important}
  body.nlo-desktop-builder-v5 .nb-panel-toggle--inspector{right:min(320px,92vw)!important}
  .nlo-inline-textbar{max-width:calc(100vw - 12px)!important;left:max(6px,var(--nlo-toolbar-left,6px))}
}
@media(max-width:620px){
  #nlo-top-tabs{gap:0!important;padding-inline:4px!important}
  #nlo-top-tabs a{padding-inline:12px!important;font-size:13px!important}
  #nlo-top-tabs .nlo-brand{min-width:max-content}
  .nlo-publish-button{padding-inline:14px!important;margin-left:4px!important}
  body.nlo-desktop-builder-v5{--v5-tools-w:min(190px,42vw)}
  body.nlo-desktop-builder-v5 #nb-canvas .nb-canvas-stage{padding-bottom:48px!important}
  body.nlo-desktop-builder-v5 #nb-frame.nb-canvas-frame{min-height:calc(100vh - 148px)!important}
}
@media(max-height:650px){
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-element{min-height:58px!important;padding-block:6px!important}
  body.nlo-desktop-builder-v5 #nb-sidebar .builder-category{margin-bottom:10px!important}
  body.nlo-desktop-builder-v5 :is(.nlo-media-dialog,.nlo-document-dialog,.nlo-header-editor-dialog,.nlo-footer-editor-dialog,.nlo-embed-dialog,.nlo-form-dialog,.nlo-page-create-modal){max-height:calc(100vh - 16px)!important;overflow:auto!important}
}


/* FINAL 7.5.18 — WIDER PHONE HEADER PREVIEW
   Use the full 480px simulated phone viewport for the header instead of
   reserving the previous 12px shell gutter. */
.nb-canvas-frame[data-device="mobile"] .nlo-signature-main{width:100%!important;max-width:100%!important}
.nb-canvas-frame[data-device="mobile"] .nlo-signature-main>.nash-shell{width:100%!important;max-width:100%!important;margin:0!important;padding-inline:8px!important;box-sizing:border-box!important;gap:7px!important}
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header{width:100%!important;max-width:100%!important}
.nb-canvas-frame[data-device="mobile"] .nlo-brand-identity{flex:1 1 auto!important;max-width:calc(100% - 54px)!important}
.nb-canvas-frame[data-device="mobile"] .nlo-live-page-navigation{inset-inline:4px!important;max-width:calc(100% - 8px)!important}

/* FINAL 7.5.30 HAMBURGER STATE CONTRACT — simulated tablet/mobile */
.nb-canvas-frame[data-device="tablet"] .nlo-signature-header :is(.nlo-live-nav-level-0>.nlo-live-nav-item>a,.nlo-live-nav-level-0>.nlo-live-nav-item>.nlo-live-nav-label),
.nb-canvas-frame[data-device="mobile"] .nlo-signature-header :is(.nlo-live-nav-level-0>.nlo-live-nav-item>a,.nlo-live-nav-level-0>.nlo-live-nav-item>.nlo-live-nav-label){color:#fff!important;-webkit-text-fill-color:#fff!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(234,212,154,.22)!important;border-radius:14px!important;margin-bottom:9px!important;min-height:52px!important;padding:11px 14px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;white-space:normal!important}


/* FINAL 7.5.30 — hamburger hard-fix structural authority.
   Prevent an imported-theme ::before backdrop from sitting above the menu. */
@media(max-width:1080px){
  .nlo-signature-header.nlo-runtime-menu-open .nlo-signature-main,
  .nlo-signature-header.has-menu-open .nlo-signature-main,
  .nlo-signature-header.is-open .nlo-signature-main{position:relative!important;z-index:2147483000!important;overflow:visible!important}
  .nlo-signature-header.nlo-runtime-menu-open .nlo-live-page-navigation,
  .nlo-signature-header.has-menu-open .nlo-live-page-navigation,
  .nlo-signature-header.is-open .nlo-live-page-navigation{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translateX(0)!important;z-index:2147483001!important}
}

/* =============================================================================
   R57.10 Recovery9 — EMBED MOBILE WIDTH CLOSURE
   Stored desktop embed widths remain editable on wide screens. On an actual narrow
   published/preview frame the wrapper and its iframe expand to the full available
   column width instead of preserving a desktop percentage such as 40% or 60%.
   ============================================================================= */
@container nlo-preview-frame (max-width:720px){
  :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap){
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-inline:0!important;box-sizing:border-box!important
  }
  :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap)>iframe,
  .nb-form-embed-code iframe{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important
  }
}
@media(max-width:720px){
  .nlo-live-frame :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap),
  .nlo-preview-frame :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap){
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-inline:0!important;box-sizing:border-box!important
  }
  .nlo-live-frame :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap) iframe,
  .nlo-preview-frame :is(.nb-code-preview-wrap,.nb-embed.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code,.nlo-code-wrap) iframe{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important
  }
}

/* R57.10 Recovery10 — simulated phone parity for published embed wrappers */
.nb-canvas-frame[data-device="mobile"] :is(.nlo-code-wrap,.nb-code-preview-wrap,.nb-embed,.nb-form-embed-code){width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;box-sizing:border-box!important}
.nb-canvas-frame[data-device="mobile"] :is(.nlo-code-frame,.nb-code-preview-wrap iframe,.nb-embed iframe,.nb-form-embed-code iframe){display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}