/* v2.0.9 — final toolbar style enforcement for desktop + mobile editor/live.
   Purpose: every toolbar change (font, size, colors, bg, border, radius, padding, bold, align)
   must visibly affect the selected element, including mobile mode, without changing the existing structure. */

/* Desktop/general variables for all editable children and page title */
.product-card [data-nc-child],
.page-title[data-nc-page-title]{
  box-sizing:border-box!important;
  color:var(--text-color, currentColor)!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;
}

/* The visible label inside badge/discount must inherit the styled box, not editor overlay styles. */
.product-card [data-nc-child] > .nc-box-label,
.product-card [data-nc-child] > .nc-content-label{
  position:static!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  color:inherit!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:1!important;
  text-align:inherit!important;
  transform:none!important;
  box-shadow:none!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

/* Mobile editor mode: read mobile variables first, then fallback to desktop variables. */
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child],
body.nc-editor-page.nc-editor-mobile-mode .page-title[data-nc-page-title],
body.nc-mobile-portrait-page .product-card [data-nc-child],
body.nc-mobile-portrait-page .page-title[data-nc-page-title]{
  color:var(--m-text-color, var(--text-color, currentColor))!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;
}

/* Mobile geometry for manually edited elements. */
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child].is-manual-child,
body.nc-mobile-portrait-page .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 .product-card.is-free-moving,
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;
}

/* Toolbar usability: keep popup compact and make all inputs clickable. */
body.nc-editor-page .nc-element-toolbar,
body.nc-editor-page.nc-editor-mobile-mode .nc-element-toolbar{
  pointer-events:auto!important;
  z-index:2147483000!important;
}
body.nc-editor-page .nc-element-toolbar input,
body.nc-editor-page .nc-element-toolbar select,
body.nc-editor-page .nc-element-toolbar button,
body.nc-editor-page .nc-element-toolbar label{
  pointer-events:auto!important;
}
/* v12.10.60 - transparent color controls */
.nc-element-toolbar [data-action="clearBg"],
.nc-element-toolbar [data-action="clearBorder"]{
  min-width:84px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:0 10px;
  cursor:pointer;
}
.nc-element-toolbar [data-action="clearBg"]:hover,
.nc-element-toolbar [data-action="clearBorder"]:hover{background:rgba(255,255,255,.18);}