/* v2.0.8 — isolated mobile/desktop style editing + page title editor.
   Loaded last in editor and live. Keeps existing structure; adds only missing behavior. */

/* Page title can be selected and styled like any other text element. */
.page-title[data-nc-page-title]{
  box-sizing:border-box!important;
  color:var(--text-color, inherit)!important;
  background:var(--card-bg, transparent)!important;
  font-family:var(--font-family, inherit)!important;
  font-size:var(--font-size, inherit)!important;
  font-weight:var(--font-weight, inherit)!important;
  text-align:var(--text-align, inherit)!important;
  border-color:var(--border-color, transparent)!important;
  border-width:var(--border-width, 0)!important;
  border-style:var(--border-style, solid)!important;
  border-radius:var(--radius, 0)!important;
  padding:var(--pad, 0)!important;
  opacity:var(--opacity, 1)!important;
}
body.nc-editor-page .page-title[data-nc-page-title]{cursor:text!important;}
body.nc-editor-page .page-title.is-page-title-selected{outline:2px solid rgba(34,197,94,.95)!important;outline-offset:3px!important;}
body.nc-editor-page .nc-selection-box.is-page-title .nc-move-grip,
body.nc-editor-page .nc-selection-box.is-page-title .nc-resize-grip{display:block!important;visibility:visible!important;pointer-events:auto!important;}

/* Mobile editor and mobile live must read mobile variables independently from desktop. */
body.nc-editor-page.nc-editor-mobile-mode .page-title[data-nc-page-title],
body.nc-mobile-portrait-page .page-title[data-nc-page-title]{
  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;
}

/* In mobile editor/live, every child element reads mobile style variables first. */
body.nc-editor-page.nc-editor-mobile-mode .magazine-shell .product-card [data-nc-child],
body.nc-mobile-portrait-page .magazine-shell .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, left))!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;
}
body.nc-editor-page.nc-editor-mobile-mode .magazine-shell .product-card [data-nc-child].is-manual-child,
body.nc-mobile-portrait-page .magazine-shell .product-card [data-nc-child].is-manual-child{
  left:var(--mx, var(--x, 0))!important;
  top:var(--my, var(--y, 0))!important;
  width:var(--mw, var(--w, auto))!important;
  height:var(--mh, var(--h, auto))!important;
  z-index:var(--mz, var(--z, 10))!important;
}
body.nc-editor-page.nc-editor-mobile-mode .magazine-shell .product-card.is-free-moving,
body.nc-mobile-portrait-page .magazine-shell .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;
}

/* Toolbar remains the same popup in both Desktop and Mobile editor mode. */
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(420px, calc(100vw - 24px))!important;
  max-width:420px!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;}
