/* v2.1.5 — mobile editor/live parity
   Single-source portrait preview rules. The editor mobile mode now uses the same
   page geometry model as live mobile, but without relying on viewport media query.
   Desktop mode is not touched. */

/* Shared mobile portrait variables */
body.nc-mobile-portrait-page,
body.nc-editor-page.nc-editor-mobile-mode{
  --nc-mobile-page-w: min(calc(100vw - 56px), 450px);
  --nc-mobile-page-h: min(calc(100dvh - 238px), 690px);
  --nc-mobile-page-min-h: 500px;
  --nc-mobile-page-max-h: 700px;
}

/* Editor mobile mode must emulate the phone page, not the desktop spread. */
body.nc-editor-page.nc-editor-mobile-mode{
  overflow:hidden!important;
}
body.nc-editor-page.nc-editor-mobile-mode .nc-editor-topline{
  position:fixed!important;
  top:8px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:2147483600!important;
}
body.nc-editor-page.nc-editor-mobile-mode .nc-canvas{
  position:fixed!important;
  inset:0!important;
  padding:58px 12px 78px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
}
body.nc-editor-page.nc-editor-mobile-mode .magazine-shell{
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  position:relative!important;
  padding-top:8px!important;
  min-height:auto!important;
}
body.nc-editor-page.nc-editor-mobile-mode .book-wrap{
  width:var(--nc-mobile-page-w)!important;
  height:var(--nc-mobile-page-h)!important;
  min-height:var(--nc-mobile-page-min-h)!important;
  max-height:var(--nc-mobile-page-max-h)!important;
  margin:0 0 42px!important;
  aspect-ratio:auto!important;
  perspective:1600px!important;
  transform:none!important;
  transform-origin:center center!important;
}
body.nc-editor-page.nc-editor-mobile-mode .book{
  position:absolute!important;
  inset:0!important;
  transform:none!important;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.54))!important;
}
body.nc-editor-page.nc-editor-mobile-mode .book:before{
  inset:5% -8% -8%!important;
  opacity:.62!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread.is-active{
  opacity:1!important;
  pointer-events:auto!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread .page{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:none!important;
  border-radius:18px!important;
  padding:20px 18px 34px!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 38px rgba(75,47,14,.18), 0 14px 30px rgba(0,0,0,.28)!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-edit-left .page.left,
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-show-left .page.left,
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-edit-right .page.right,
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-show-right .page.right{
  display:block!important;
}
body.nc-editor-page.nc-editor-mobile-mode .page.left,
body.nc-editor-page.nc-editor-mobile-mode .page.right{border-radius:18px!important;}
body.nc-editor-page.nc-editor-mobile-mode .page:before{inset:18px!important;}
body.nc-editor-page.nc-editor-mobile-mode .spine{display:none!important;}
body.nc-editor-page.nc-editor-mobile-mode .page-safe-area{
  height:100%!important;
  grid-template-rows:auto 1fr!important;
  gap:6px!important;
}
body.nc-editor-page.nc-editor-mobile-mode .page-head{min-height:92px!important;}
body.nc-editor-page.nc-editor-mobile-mode .eyebrow{font-size:12px!important;letter-spacing:2px!important;}
body.nc-editor-page.nc-editor-mobile-mode .page-title{
  font-size:clamp(28px, 8.8vw, 44px)!important;
  line-height:.9!important;
  letter-spacing:.4px!important;
  max-width:100%!important;
}
body.nc-editor-page.nc-editor-mobile-mode .editorial-grid{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.nc-editor-page.nc-editor-mobile-mode .stack-left,
body.nc-editor-page.nc-editor-mobile-mode .stack-right{
  width:18px!important;
  top:3.5%!important;
  bottom:3.5%!important;
  opacity:.48!important;
  z-index:-2!important;
}
body.nc-editor-page.nc-editor-mobile-mode .stack-left{left:-10px!important;}
body.nc-editor-page.nc-editor-mobile-mode .stack-right{right:-10px!important;}
body.nc-editor-page.nc-editor-mobile-mode .tabs.left-tabs,
body.nc-editor-page.nc-editor-mobile-mode .tabs.right-tabs{display:none!important;}
body.nc-editor-page.nc-editor-mobile-mode .stack-left .tabs.left-tabs,
body.nc-editor-page.nc-editor-mobile-mode .stack-left .tabs{display:flex!important;}

/* Mobile editor reads the same responsive geometry variables as live mobile. */
body.nc-editor-page.nc-editor-mobile-mode .product-card.is-free-moving{
  position:absolute!important;
  left:var(--mx, var(--x, auto))!important;
  top:var(--my, var(--y, auto))!important;
  width:var(--mw, var(--w, auto))!important;
  height:var(--mh, var(--h, auto))!important;
  z-index:var(--mz, var(--z, 1))!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child].is-manual-child{
  position:absolute!important;
  left:var(--mx, var(--x, 0px))!important;
  top:var(--my, var(--y, 0px))!important;
  width:var(--mw, var(--w, auto))!important;
  height:var(--mh, var(--h, auto))!important;
  z-index:var(--mz, var(--z, 10))!important;
  max-width:none!important;
  max-height:none!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child]{
  color:var(--m-text-color, var(--text-color, inherit))!important;
  background:var(--m-card-bg, var(--card-bg, transparent))!important;
  font-family:var(--m-font-family, var(--font-family, inherit))!important;
  font-size:var(--m-font-size, var(--font-size, inherit))!important;
  font-weight:var(--m-font-weight, var(--font-weight, inherit))!important;
  text-align:var(--m-text-align, var(--text-align, inherit))!important;
  border-color:var(--m-border-color, var(--border-color, transparent))!important;
  border-width:var(--m-border-width, var(--border-width, 0))!important;
  border-style:var(--m-border-style, var(--border-style, solid))!important;
  border-radius:var(--m-radius, var(--radius, 0))!important;
  padding:var(--m-pad, var(--pad, 0))!important;
  opacity:var(--m-opacity, var(--opacity, 1))!important;
  box-sizing:border-box!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] h1,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] h2,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] h3,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] p,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] span,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] strong,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] small,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] .nc-box-label,
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child] .nc-content-label{
  font-size:inherit!important;
  font-family:inherit!important;
  color:inherit!important;
  background:transparent!important;
  text-align:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
}

/* Keep editor controls functional above the emulated mobile page. */
body.nc-editor-page.nc-editor-mobile-mode .nc-editor-overlay{z-index:2147482000!important;pointer-events:none!important;}
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box{z-index:2147482100!important;pointer-events:none!important;}
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box.is-visible{display:block!important;visibility:visible!important;opacity:1!important;}
body.nc-editor-page.nc-editor-mobile-mode .nc-move-grip,
body.nc-editor-page.nc-editor-mobile-mode .nc-resize-grip{pointer-events:auto!important;display:block!important;visibility:visible!important;}
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box.is-page .nc-move-grip,
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box.is-page .nc-resize-grip,
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box.is-page-selection .nc-move-grip,
body.nc-editor-page.nc-editor-mobile-mode .nc-selection-box.is-page-selection .nc-resize-grip{display:none!important;visibility:hidden!important;}
body.nc-editor-page.nc-editor-mobile-mode .nc-element-toolbar{
  position:fixed!important;
  bottom:auto!important;
  right:auto!important;
  transform:none!important;
  width:min(410px, calc(100vw - 24px))!important;
  max-width:410px!important;
  min-width:260px!important;
  z-index:2147483000!important;
}
body.nc-editor-page.nc-editor-mobile-mode .nc-element-toolbar.is-visible{display:block!important;visibility:visible!important;opacity:1!important;}

/* Live mobile keeps the exact same readable phone geometry. Loaded after all older mobile CSS. */
@media (max-width:760px){
  body.nc-mobile-portrait-page .book-wrap{
    width:var(--nc-mobile-page-w)!important;
    height:var(--nc-mobile-page-h)!important;
    min-height:var(--nc-mobile-page-min-h)!important;
    max-height:var(--nc-mobile-page-max-h)!important;
  }
  body.nc-mobile-portrait-page .product-card.is-free-moving{
    left:var(--mx, var(--x, auto))!important;
    top:var(--my, var(--y, auto))!important;
    width:var(--mw, var(--w, auto))!important;
    height:var(--mh, var(--h, auto))!important;
    z-index:var(--mz, var(--z, 1))!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child].is-manual-child{
    left:var(--mx, var(--x, 0px))!important;
    top:var(--my, var(--y, 0px))!important;
    width:var(--mw, var(--w, auto))!important;
    height:var(--mh, var(--h, auto))!important;
    z-index:var(--mz, var(--z, 10))!important;
  }
}