:root {
  --nblp-ink: var(--nbp-ink, #111111);
  --nblp-muted: var(--nbp-muted, #667085);
  --nblp-line: var(--nbp-line, #dedede);
  --nblp-paper: var(--nbp-paper, #f7f5f0);
  --nblp-soft: #f4f4f2;
  --nblp-accent: var(--nbp-accent, #ff4d00);
  --nblp-accent-dark: #b93400;
  --nblp-success: #087a46;
  --nblp-danger: #b42318;
  --nblp-shadow: 0 14px 40px rgba(17, 17, 17, .08);
}

.nblp-designer,
.nblp-designer * { box-sizing: border-box; }

.nblp-designer {
  width: 100%;
  margin: 16px 0 22px;
  padding: clamp(14px, 2.4vw, 24px);
  color: var(--nblp-ink);
  background: #fff;
  border: 1px solid var(--nblp-line);
  border-radius: 18px;
  box-shadow: var(--nblp-shadow);
  font-family: inherit;
}

.nblp-designer button,
.nblp-designer input,
.nblp-designer summary { font: inherit; }

.nblp-designer :where(button, input, summary):focus-visible {
  outline: 3px solid rgba(255, 77, 0, .35);
  outline-offset: 2px;
}

.nblp-heading {
  display: flex;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
  margin: 0 0 13px;
}

.nblp-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--nblp-accent-dark);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
}

.nblp-heading h3 {
  margin: 0 !important;
  color: var(--nblp-ink);
  font-size: clamp(19px, 2.5vw, 27px) !important;
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.nblp-heading p {
  max-width: 280px;
  margin: 0 !important;
  color: var(--nblp-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}

.nblp-essential-options {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 11px;
  background: var(--nblp-soft);
  border: 1px solid var(--nblp-line);
  border-radius: 12px;
}

.nblp-option-heading,
.nblp-swatch-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.nblp-option-heading strong,
.nblp-swatch-heading strong { font-size: 11px; }
.nblp-option-heading output,
.nblp-swatch-heading output {
  overflow: hidden;
  color: var(--nblp-accent-dark);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nblp-size-chips {
  display: flex;
  gap: 7px;
  margin-top: 7px;
  padding: 2px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}

.nblp-size-chips button {
  display: grid;
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 48px;
  margin: 0;
  padding: 7px 10px;
  color: var(--nblp-ink);
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 9px;
  box-shadow: none;
  line-height: 1.15;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.nblp-size-chips button strong { font-size: 11px; }
.nblp-size-chips button small { margin-top: 3px; color: var(--nblp-muted); font-size: 8px; }
.nblp-size-chips button em { margin-top: 3px; color: #8a3b00; font-size: 8px; font-style: normal; font-weight: 700; }
.nblp-size-chips button.is-selected {
  border-color: var(--nblp-ink);
  box-shadow: inset 0 0 0 1px var(--nblp-ink);
}

.nblp-colour-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nblp-swatch-group { min-width: 0; }
.nblp-swatches {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
}

.nblp-swatch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 5px 9px 5px 5px;
  color: var(--nblp-ink);
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
}

.nblp-swatch.is-selected {
  border-color: var(--nblp-accent);
  box-shadow: inset 0 0 0 1px var(--nblp-accent);
}

.nblp-swatch-dot {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(17, 17, 17, .22);
  border-radius: 6px;
}

.nblp-swatch-dot.is-light { box-shadow: inset 0 0 0 1px #d0d5dd; }
.nblp-swatch b { max-width: 84px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.nblp-size-prompt {
  padding: 9px 10px;
  color: #6d3200;
  background: #fff5e8;
  border: 1px solid #f0cfa7;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.4;
}

.nblp-workspace { display: grid; gap: 10px; }
.nblp-stage-column { min-width: 0; }

.nblp-stage {
  position: relative;
  width: 100%;
  height: min(52svh, 560px);
  min-height: 300px;
  max-height: 620px;
  overflow: hidden;
  aspect-ratio: var(--nblp-surface-ratio, 4 / 5);
  background: #f5f5f3;
  border: 1px solid var(--nblp-line);
  border-radius: 14px 14px 8px 8px;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.nblp-base-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.nblp-print-area {
  position: absolute;
  z-index: 3;
  border: 2px dashed rgba(185, 52, 0, .75);
  border-radius: 7px;
  touch-action: none;
}

.nblp-area-label {
  position: absolute;
  top: -11px;
  left: 7px;
  padding: 2px 5px;
  color: var(--nblp-ink);
  background: var(--nblp-accent);
  border-radius: 3px;
  font-size: 7px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .08em;
  pointer-events: none;
}

.nblp-layer {
  position: absolute;
  cursor: grab;
  outline: 0;
  touch-action: none;
  transform-origin: center;
}

.nblp-layer.is-dragging { cursor: grabbing; }
.nblp-logo-object { width: 50%; max-height: 96%; }
.nblp-logo-object img { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; }

.nblp-text-object {
  width: max-content;
  max-width: 92%;
  color: var(--nblp-ink);
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

.nblp-layer-content { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.nblp-selection-ring {
  position: absolute;
  inset: -7px;
  border: 2px solid #1267d6;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
}

.nblp-layer.is-selected .nblp-selection-ring,
.nblp-layer:focus-visible .nblp-selection-ring { opacity: 1; }

.nblp-handle {
  position: absolute;
  z-index: 3;
  display: none;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 2px solid #1267d6;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
  cursor: pointer;
  touch-action: none;
}
.nblp-handle::after { content: ""; position: absolute; inset: -10px; }

.nblp-layer.is-selected .nblp-handle { display: block; }
.nblp-resize-handle { right: -18px; bottom: -18px; cursor: nwse-resize; }
.nblp-resize-handle::before { content: "↘"; color: #1267d6; font-size: 12px; }
.nblp-rotate-handle { top: -38px; left: calc(50% - 12px); cursor: grab; }
.nblp-rotate-handle::before { content: "↻"; color: #1267d6; font-size: 12px; }

.nblp-toolbar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  margin-top: -1px;
  padding: 7px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--nblp-line);
  border-radius: 8px 8px 12px 12px;
  box-shadow: 0 8px 20px rgba(17, 17, 17, .08);
  scrollbar-width: thin;
}

.nblp-toolbar-target,
.nblp-toolbar-move,
.nblp-toolbar-history { display: flex; gap: 4px; align-items: center; }

.nblp-toolbar button {
  display: grid;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 6px 8px;
  place-items: center;
  color: var(--nblp-ink);
  background: #f4f4f2;
  border: 1px solid #dededb;
  border-radius: 7px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
}

.nblp-toolbar-target button { min-width: 52px; font-size: 10px; }
.nblp-toolbar button.is-active { color: #fff; background: var(--nblp-ink); border-color: var(--nblp-ink); }
.nblp-toolbar button.is-pressing { color: var(--nblp-ink); background: var(--nblp-accent); border-color: var(--nblp-accent); }
.nblp-toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.nblp-toolbar .nblp-advanced-toggle { min-width: 76px; font-size: 10px; }
.nblp-quick-position { min-width: 62px; color: var(--nblp-muted); font-size: 8px; font-variant-numeric: tabular-nums; text-align: center; }

.nblp-size-gallery { margin-top: 7px; overflow: hidden; }
.nblp-gallery-track { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: thin; }
.nblp-gallery-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--nblp-line);
  border-radius: 7px;
  cursor: zoom-in;
}
.nblp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.nblp-gallery-dialog {
  width: min(92vw, 900px);
  max-height: 88vh;
  padding: 38px 16px 16px;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.nblp-gallery-dialog::backdrop { background: rgba(0, 0, 0, .68); }
.nblp-gallery-dialog img { display: block; max-width: 100%; max-height: 72vh; margin: auto; object-fit: contain; }
.nblp-gallery-dialog p { margin: 8px 0 0; color: var(--nblp-muted); font-size: 11px; text-align: center; }
.nblp-gallery-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; margin: 0; padding: 0; background: #f1f1ef; border: 0; border-radius: 7px; cursor: pointer; }

.nblp-stage-note { margin: 7px 2px 0; color: var(--nblp-muted); font-size: 9px; line-height: 1.35; }
.nblp-stage-note span { color: var(--nblp-success); font-weight: 850; }

.nblp-advanced-drawer {
  max-height: min(44vh, 440px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--nblp-line);
  border-radius: 12px;
  box-shadow: var(--nblp-shadow);
}

.nblp-advanced-drawer[hidden] { display: none; }
.nblp-drawer-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--nblp-line); }
.nblp-drawer-head strong { font-size: 12px; }
.nblp-drawer-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; background: var(--nblp-soft); border: 0; border-radius: 7px; font-size: 18px; cursor: pointer; }

.nblp-advanced-drawer details { border-bottom: 1px solid var(--nblp-line); }
.nblp-advanced-drawer details:last-child { border-bottom: 0; }
.nblp-advanced-drawer summary { padding: 11px 12px; font-size: 11px; font-weight: 750; cursor: pointer; }
.nblp-panel-content { display: grid; gap: 10px; padding: 2px 12px 13px; }
.nblp-panel-content > label { display: grid; gap: 5px; color: var(--nblp-ink); font-size: 10px; font-weight: 700; }
.nblp-panel-content input[type="text"],
.nblp-panel-content input[type="number"] { width: 100%; min-height: 44px; padding: 8px 10px; color: var(--nblp-ink); background: #fff; border: 1px solid #cfd1d4; border-radius: 8px; }
.nblp-panel-content input[type="range"] { width: 100%; accent-color: var(--nblp-accent); }
.nblp-panel-content label output { margin-left: auto; color: var(--nblp-muted); font-size: 9px; }
.nblp-coordinate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nblp-coordinate-grid label { display: grid; gap: 4px; font-size: 10px; font-weight: 700; }

.nblp-dropzone,
.nblp-compact-upload {
  display: flex !important;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  margin: 0 !important;
  padding: 10px !important;
  background: var(--nblp-soft);
  border: 1px dashed #babdc2;
  border-radius: 9px;
  cursor: pointer;
}
.nblp-dropzone input,
.nblp-compact-upload input { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.nblp-upload-icon,
.nblp-compact-upload > span { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; color: var(--nblp-ink); background: var(--nblp-accent); border-radius: 7px; font-size: 20px; }
.nblp-dropzone > span:last-child { display: grid; gap: 2px; }
.nblp-dropzone b,
.nblp-compact-upload b { font-size: 11px; }
.nblp-dropzone small,
.nblp-compact-upload small { color: var(--nblp-muted); font-size: 8px; }
.nblp-file-name { overflow: hidden; color: var(--nblp-success); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.nblp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nblp-actions button {
  min-height: 44px;
  margin: 0;
  padding: 7px 10px;
  color: var(--nblp-ink);
  background: var(--nblp-soft);
  border: 1px solid var(--nblp-line);
  border-radius: 7px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.nblp-default-selections { display: grid; grid-template-columns: repeat(2, 1fr); }
.nblp-text-ink-label { color: var(--nblp-muted); font-size: 9px; }

.nblp-compact-upload { margin-top: 10px !important; }
.nblp-status { min-height: 18px; margin: 8px 0 -3px; font-size: 10px; font-weight: 700; line-height: 1.4; }
.nblp-status.is-error { color: var(--nblp-danger); }
.nblp-status.is-success { color: var(--nblp-success); }
.nblp-status.is-loading { color: var(--nblp-accent-dark); }
.nblp-status.is-loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nblp-spin .7s linear infinite; }
@keyframes nblp-spin { to { transform: rotate(360deg); } }

.nblp-designer.is-size-disabled .nblp-toolbar,
.nblp-designer.is-size-disabled .nblp-compact-upload,
.nblp-designer.is-size-disabled .nblp-layer,
.nblp-designer.is-size-disabled .nblp-area-label,
.nblp-designer.is-size-disabled .nblp-print-area { pointer-events: none; }
.nblp-designer.is-size-disabled .nblp-toolbar,
.nblp-designer.is-size-disabled .nblp-compact-upload { display: none; }
.nblp-designer.is-size-disabled .nblp-print-area { border-color: rgba(17, 17, 17, .22); }
.nblp-designer.is-size-disabled .nblp-layer { visibility: hidden; }

.nblp-cart-preview { display: inline-flex; gap: 8px; align-items: center; margin-top: 5px; }
.nblp-cart-preview img { width: 58px; height: 58px; object-fit: contain; background: #fff; border: 1px solid var(--nblp-line); border-radius: 7px; }

@media (min-width: 900px) {
  .nblp-workspace { grid-template-columns: minmax(0, 1fr); }
  .nblp-stage-column { position: sticky; top: 92px; z-index: 6; align-self: start; }
  .nblp-stage { height: min(58vh, 660px); min-height: 420px; }
  .nblp-advanced-drawer { max-height: 420px; }
}

@media (max-width: 680px) {
  .nblp-designer { margin: 10px 0 16px; padding: 10px; border-radius: 14px; box-shadow: 0 8px 24px rgba(17, 17, 17, .06); }
  .nblp-heading { margin-bottom: 8px; }
  .nblp-heading h3 { font-size: 18px !important; }
  .nblp-heading p { display: none; }
  .nblp-essential-options { gap: 8px; margin-bottom: 7px; padding: 8px; }
  .nblp-colour-row { gap: 7px; }
  .nblp-size-chips button { min-width: 104px; }
  .nblp-stage { height: 52svh; min-height: 280px; max-height: 520px; border-radius: 11px 11px 6px 6px; }
  .nblp-toolbar { grid-template-columns: auto minmax(190px, 1fr) auto; padding: 5px; }
  .nblp-toolbar button { min-width: 44px; min-height: 44px; }
  .nblp-quick-position { display: none; }
  .nblp-stage-note { display: none; }
  .nblp-advanced-drawer { max-height: 36svh; }
}

@media (max-width: 380px) {
  .nblp-colour-row { grid-template-columns: 1fr 1fr; }
  .nblp-swatch b { max-width: 56px; }
  .nblp-toolbar-target button { min-width: 46px; padding-inline: 5px; }
  .nblp-toolbar .nblp-advanced-toggle { min-width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .nblp-status.is-loading::before { animation-duration: 1.5s; }
  .nblp-designer *,
  .nblp-designer *::before,
  .nblp-designer *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* Bottom-sheet designer launcher + editor overlay */
.nblp-design-entry {
  width: 100%;
  margin: 14px 0 18px;
}

.nblp-open-designer {
  display: flex !important;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 18px !important;
  color: #fff !important;
  background: var(--nblp-ink) !important;
  border: 1px solid var(--nblp-ink) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}

.nblp-open-designer:hover { opacity: .92; transform: translateY(-1px); }
.nblp-open-designer:active { transform: translateY(0); }
.nblp-open-designer-arrow {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform .18s ease;
}
.nblp-open-designer:hover .nblp-open-designer-arrow { transform: translateX(3px); }

.nblp-designer-overlay {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: visible;
  pointer-events: auto;
}
.nblp-designer-overlay[hidden] {
  display: none !important;
}
.nblp-designer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  opacity: 0;
  transition: opacity .24s ease;
}
.nblp-designer-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  max-height: min(94svh, 900px);
  overflow: hidden;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 70px rgba(0, 0, 0, .24);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.nblp-designer-overlay.is-open .nblp-designer-backdrop { opacity: 1; }
.nblp-designer-overlay.is-open .nblp-designer-sheet { transform: translateY(0); }

.nblp-sheet-header {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
}
.nblp-sheet-header::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d2d2d2;
  transform: translateX(-50%);
}
.nblp-sheet-header > div { padding-top: 5px; }
.nblp-sheet-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--nblp-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.nblp-sheet-header h2 {
  margin: 0 !important;
  color: var(--nblp-ink);
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.15;
}
.nblp-sheet-close {
  display: grid !important;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  place-items: center;
  color: #111 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50%;
  box-shadow: none !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1;
  cursor: pointer;
}

.nblp-designer-sheet > .nblp-designer {
  width: 100%;
  max-height: calc(min(94svh, 900px) - 78px);
  margin: 0;
  padding: 14px clamp(12px, 2vw, 22px) 24px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nblp-designer-sheet .nblp-workspace { grid-template-columns: minmax(0, 1fr); }
.nblp-designer-sheet .nblp-stage-column { position: static; }
.nblp-designer-sheet .nblp-stage {
  height: min(55svh, 560px);
  min-height: 260px;
}

body.nblp-designer-open { overflow: hidden !important; }

@media (max-width: 680px) {
  .nblp-design-entry { margin: 10px 0 14px; }
  .nblp-open-designer {
    min-height: 54px;
    border-radius: 10px !important;
    font-size: 13px !important;
  }
  .nblp-designer-sheet {
    max-height: 96svh;
    border-radius: 20px 20px 0 0;
  }
  .nblp-sheet-header { min-height: 70px; padding: 11px 14px; }
  .nblp-sheet-header h2 { font-size: 18px !important; }
  .nblp-sheet-close { margin-top: 3px !important; }
  .nblp-designer-sheet > .nblp-designer {
    max-height: calc(96svh - 70px);
    padding: 10px 10px 20px;
  }
  .nblp-designer-sheet .nblp-stage {
    height: 45svh;
    min-height: 240px;
    max-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nblp-open-designer,
  .nblp-open-designer-arrow,
  .nblp-designer-backdrop,
  .nblp-designer-sheet { transition: none !important; }
}

/* v2.2 compact mobile editor + theme accent integration */
:root {
  --nblp-accent: var(--e-global-color-primary, var(--ast-global-color-0, var(--wp--preset--color--primary, var(--nbp-accent, #111111))));
  --nblp-accent-dark: var(--nblp-accent);
  --nblp-accent-soft: color-mix(in srgb, var(--nblp-accent) 10%, white);
  --nblp-accent-line: color-mix(in srgb, var(--nblp-accent) 32%, #dcdcdc);
}

.nblp-designer :where(button, input, summary):focus-visible {
  outline-color: color-mix(in srgb, var(--nblp-accent) 55%, transparent);
}
.nblp-open-designer { background: var(--nblp-accent) !important; border-color: var(--nblp-accent) !important; }
.nblp-open-designer:hover { background: var(--nblp-accent) !important; opacity: .92; }
.nblp-swatch.is-selected,
.nblp-swatch:hover { border-color: var(--nblp-accent); box-shadow: inset 0 0 0 1px var(--nblp-accent); }
.nblp-area-label { background: var(--nblp-accent); }
.nblp-toolbar button.is-pressing { background: var(--nblp-accent); border-color: var(--nblp-accent); }
.nblp-panel-content input[type="range"] { accent-color: var(--nblp-accent); }

.nblp-designer-sheet > .nblp-designer {
  padding-top: 10px;
}
.nblp-essential-options {
  gap: 8px;
  padding: 9px;
  border-radius: 13px;
  background: #fafafa;
}
.nblp-size-row { min-width: 0; }
.nblp-option-heading { min-height: 20px; }
.nblp-size-chips { margin-top: 5px; gap: 6px; padding-bottom: 2px; }
.nblp-size-chips button {
  min-width: 108px;
  min-height: 50px;
  padding: 7px 9px;
  border-radius: 10px;
}
.nblp-size-chips button.is-selected {
  border-color: var(--nblp-accent);
  box-shadow: inset 0 0 0 1px var(--nblp-accent);
}
.nblp-colour-row { gap: 7px; }
.nblp-swatch-group {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--nblp-line);
  border-radius: 10px;
}
.nblp-swatches { margin-top: 4px; gap: 5px; padding-bottom: 1px; }
.nblp-swatch { min-height: 42px; padding: 4px 7px 4px 4px; border-radius: 8px; }
.nblp-swatch-dot { width: 25px; height: 25px; }

.nblp-stage {
  height: min(43svh, 500px);
  min-height: 250px;
  max-height: 500px;
}
.nblp-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nblp-toolbar::-webkit-scrollbar { display: none; }
.nblp-toolbar-target,
.nblp-toolbar-move,
.nblp-toolbar-history { flex: 0 0 auto; }
.nblp-toolbar-target { padding-right: 3px; border-right: 1px solid var(--nblp-line); }
.nblp-toolbar-target button { min-width: 62px; }
.nblp-toolbar button { min-width: 42px; min-height: 42px; border-radius: 9px; }
.nblp-toolbar .nblp-advanced-toggle { min-width: 82px; }
.nblp-compact-upload { min-height: 54px; margin-top: 8px !important; }

.nblp-text-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 9px;
  padding: 4px;
  background: var(--nblp-soft);
  border-radius: 9px;
}
.nblp-text-mode button {
  min-height: 40px;
  padding: 6px 8px;
  color: var(--nblp-ink);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.nblp-text-mode button.is-active {
  color: var(--nblp-ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(17,17,17,.08);
}
.nblp-text-object.is-website-text .nblp-layer-content { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 680px) {
  .nblp-designer-sheet { max-height: 97svh; }
  .nblp-sheet-header { min-height: 68px; padding: 10px 14px; }
  .nblp-sheet-header h2 { font-size: 18px !important; }
  .nblp-designer-sheet > .nblp-designer { max-height: calc(97svh - 68px); padding: 8px 8px 16px; }
  .nblp-essential-options { padding: 8px; }
  .nblp-colour-row { grid-template-columns: 1fr 1fr; }
  .nblp-swatch-group { padding: 7px; }
  .nblp-swatch b { max-width: 72px; }
  .nblp-stage { height: 40svh; min-height: 230px; max-height: 430px; }
  .nblp-toolbar-target button { min-width: 58px; }
}

@media (max-width: 380px) {
  .nblp-colour-row { grid-template-columns: 1fr 1fr; }
  .nblp-swatch b { max-width: 58px; }
  .nblp-toolbar-target button { min-width: 54px; padding-inline: 5px; }
}

/* v2.3 exact compact mobile UI matching the supplied reference */
.nblp-designer-sheet {
  width: min(100%, 720px);
  max-height: min(96svh, 900px);
  border-radius: 20px 20px 0 0;
}

.nblp-sheet-header {
  min-height: 64px;
  padding: 10px 20px 12px;
  border-bottom: 1px solid #e6e6e2;
}
.nblp-sheet-header::before { top: 7px; width: 34px; height: 4px; background: #d9d9d4; }
.nblp-sheet-header > div { padding-top: 5px; }
.nblp-sheet-kicker { color: #767671; font-size: 11px; font-weight: 600; letter-spacing: .02em; margin-bottom: 2px; }
.nblp-sheet-header h2 { font-size: 21px !important; font-weight: 700; letter-spacing: -.01em; }
.nblp-sheet-close {
  width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important;
  margin-top: 2px !important; border: 1px solid #e6e6e2 !important; border-radius: 50% !important;
  background: #fff !important; color: #111 !important; font-size: 0 !important;
}
.nblp-sheet-close::before { content: "×"; font-size: 19px; line-height: 1; }

.nblp-designer-sheet > .nblp-designer {
  position: relative;
  margin: 0;
  padding: 16px 20px 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  overflow-y: auto;
  max-height: calc(min(96svh, 900px) - 64px);
}

/* The size/colour controls remain wired for PackFlow but are kept out of the compact reference surface. */
.nblp-designer > .nblp-essential-options { display: none !important; }

.nblp-ui-segment { display: block; margin: 0 0 14px; }
.nblp-ui-label { margin: 0 0 8px; color: #767671; font-size: 11.5px; font-weight: 600; }
.nblp-ui-segment-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nblp-ui-segment-buttons button {
  min-height: 42px; margin: 0; padding: 10px 6px; color: #111; background: #fff;
  border: 1px solid #d9d9d4; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nblp-ui-segment-buttons button.is-active { background: #e9e336; border-color: #e9e336; }

.nblp-ui-upload {
  display: flex !important; align-items: center; gap: 12px; min-height: 64px; margin: 0 0 14px !important;
  padding: 12px !important; background: #fbfbfa; border: 1.5px dashed #d9d9d4; border-radius: 10px;
}
.nblp-ui-upload > span:first-of-type {
  display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center;
  color: #111; background: #e9e336; border-radius: 9px; font-size: 24px; line-height: 1;
}
.nblp-ui-upload b { font-size: 13.5px; font-weight: 600; }
.nblp-ui-upload small { color: #9a9a95; font-size: 11.5px; }
.nblp-ui-upload input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.nblp-workspace { display: flex; flex-direction: column; gap: 0; }
.nblp-stage-column { display: flex; flex-direction: column; }
.nblp-stage {
  order: 1; width: 100%; height: auto; min-height: 410px; max-height: none; aspect-ratio: 1 / 1;
  padding: 0; background: #eeeeec; border: 1px solid #e6e6e2; border-radius: 14px; overflow: hidden;
}
.nblp-base-image { object-fit: contain; }
.nblp-print-area { border: 1.5px dashed #bcbcb6; border-radius: 4px; }
.nblp-area-label { top: -11px; left: 7px; padding: 2px 7px; color: #111; background: #e9e336; border-radius: 4px; font-size: 8.5px; }

.nblp-toolbar {
  order: 2; display: grid; grid-template-columns: 1fr repeat(5, .72fr); gap: 6px; margin-top: 10px;
  padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none;
}
.nblp-toolbar-target { display: contents; }
.nblp-toolbar-target button:not([data-target-select="logo"]) { display: none !important; }
.nblp-toolbar-target button[data-target-select="logo"] { display: flex !important; }
.nblp-toolbar-move { display: contents; }
.nblp-toolbar-history { display: contents; }
.nblp-toolbar-history button[data-undo], .nblp-toolbar-history button[data-redo], .nblp-toolbar-history .nblp-advanced-toggle { display: none !important; }
.nblp-toolbar button {
  min-width: 0; min-height: 54px; margin: 0; padding: 8px 4px; color: #111; background: #fff;
  border: 1px solid #d9d9d4; border-radius: 10px; box-shadow: none; font-size: 0; font-weight: 600;
}
.nblp-toolbar-target button[data-target-select="logo"] { background: #e9e336; border-color: #e9e336; font-size: 13px; }
.nblp-toolbar-move button::first-letter { font-size: 22px; }
.nblp-toolbar-move button { font-size: 24px; line-height: 1; }
.nblp-toolbar-move button[data-center] { font-size: 21px; }
.nblp-toolbar-move button[data-dx="-1"] { grid-column: 2; }
.nblp-toolbar-move button[data-dx="0"][data-dy="-1"] { grid-column: 3; }
.nblp-toolbar-move button[data-center] { grid-column: 4; }
.nblp-toolbar-move button[data-dy="1"] { grid-column: 5; }
.nblp-toolbar-move button[data-dx="1"] { grid-column: 6; }
.nblp-toolbar-target button[data-target-select="logo"] { grid-column: 1; }
.nblp-quick-position, .nblp-stage-note { display: none !important; }

.nblp-designer .nblp-stage + .nblp-size-gallery { order: 3; }
.nblp-size-gallery { margin-top: 8px; }

.nblp-ui-upload + .nblp-workspace { margin-top: 0; }
.nblp-compact-upload:not(.nblp-ui-upload) { display: none !important; }

.nblp-advanced-drawer {
  order: 4; max-height: none; margin-top: 14px; overflow: hidden; background: #fff;
  border: 1px solid #e6e6e2; border-radius: 14px; box-shadow: none;
}
.nblp-drawer-head { min-height: 54px; padding: 11px; justify-content: center; border-bottom: 0; }
.nblp-drawer-head strong { font-size: 14px; font-weight: 700; }
.nblp-drawer-close { display: none; }
.nblp-advanced-drawer details { display: none; }
.nblp-advanced-drawer details:nth-of-type(3) { display: block; border-top: 1px solid #e6e6e2; border-bottom: 0; }
.nblp-advanced-drawer details:nth-of-type(3) summary { display: none; }
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content { padding: 14px 16px 16px; }
.nblp-advanced-drawer .nblp-panel-content > label { gap: 8px; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child { display: grid; }
.nblp-advanced-drawer .nblp-panel-content > label:not(:first-child) { display: none; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child::before { content: "Rotation"; font-size: 12px; font-weight: 600; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child { color: transparent; font-size: 0; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child output { color: #767671; font-size: 12px; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child input { margin-top: 0; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child { position: relative; }
.nblp-advanced-drawer .nblp-panel-content > label:first-child output { position: absolute; right: 0; top: 0; }
.nblp-advanced-drawer .nblp-panel-content .nblp-text-ink-label { display: none; }

.nblp-save-design {
  order: 6; display: block; width: 100%; min-height: 58px; margin: 14px 0 0; padding: 14px 22px;
  color: #fff; background: #111; border: 0; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.nblp-status { order: 5; margin: 8px 0 0; }
.nblp-save-design:disabled { opacity: .55; cursor: not-allowed; }

/* Hide the old history/secondary affordances while retaining their JS hooks. */
.nblp-toolbar-history { visibility: hidden; width: 0; overflow: hidden; }

@media (max-width: 680px) {
  .nblp-designer-sheet { width: 100%; max-height: 97svh; border-radius: 20px 20px 0 0; }
  .nblp-sheet-header { min-height: 64px; padding: 10px 20px 12px; }
  .nblp-designer-sheet > .nblp-designer { max-height: calc(97svh - 64px); padding: 16px 20px 18px; }
  .nblp-stage { min-height: 380px; aspect-ratio: 1 / 1; }
}

@media (max-width: 380px) {
  .nblp-designer-sheet > .nblp-designer { padding-inline: 16px; }
  .nblp-stage { min-height: 330px; }
  .nblp-toolbar { gap: 5px; }
  .nblp-toolbar button { min-height: 52px; }
}

.nblp-designer {
  display: flex;
  flex-direction: column;
}
.nblp-reference-scale {
  order: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.nblp-reference-scale-label {
  flex: 0 0 38px;
  color: #767671;
  font-size: 11.5px;
  font-weight: 600;
}
.nblp-reference-scale-input { flex: 1; }
.nblp-reference-scale-value {
  flex: 0 0 40px;
  color: #111;
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
}
.nblp-reference-scale-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: #d9d9d4;
  outline: none;
}
.nblp-reference-scale-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #111; border: 2px solid #e9e336; cursor: pointer;
}
.nblp-reference-scale-input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #111; border: 2px solid #e9e336; cursor: pointer;
}

.nblp-advanced-drawer[hidden] {
  display: block !important;
}
.nblp-advanced-drawer[hidden] .nblp-advanced-drawer,
.nblp-advanced-drawer[hidden] details { display: none !important; }
.nblp-advanced-drawer[hidden] .nblp-drawer-head { border-bottom: 0; }
.nblp-drawer-head { cursor: pointer; position: relative; }
.nblp-drawer-head::after {
  content: "⌃";
  position: absolute;
  right: 18px;
  top: 50%;
  color: #111;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-45%);
}
.nblp-advanced-drawer:not([hidden]) .nblp-drawer-head::after { transform: translateY(-55%) rotate(180deg); }
.nblp-advanced-drawer:not([hidden]) .nblp-drawer-head { border-bottom: 1px solid #e6e6e2; }
.nblp-advanced-drawer:not([hidden]) details:nth-of-type(3) { display: block; }

@media (max-width: 680px) {
  .nblp-reference-scale { margin-top: 10px; }
}

/* Advanced reference panel shows only Rotation, matching the supplied UI. */
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:first-child,
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(3) { display: none !important; }
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2) {
  display: grid !important;
  position: relative;
  gap: 8px;
  color: transparent;
  font-size: 0;
}
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2)::before {
  content: "Rotation";
  color: #111;
  font-size: 12px;
  font-weight: 600;
}
.nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2) .nblp-rotate-output {
  position: absolute;
  top: 0;
  right: 0;
  color: #767671;
  font-size: 12px;
  font-weight: 700;
}


/* v2.3.1 launcher reliability: keep the product-page CTA visually independent
   from WooCommerce/theme button styles. */
body .nblp-design-entry .nblp-open-designer {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  width: 100% !important;
  min-height: 54px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 13px 18px !important;
  margin: 0 !important;
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}
body .nblp-design-entry .nblp-open-designer-arrow {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}


/* v2.4.0 — reference UI skin. All rules are scoped to the NBLP designer
   overlay so the host theme is not affected. The existing editor hooks remain
   in the DOM and are used by designer.js. */
.nblp-designer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17,17,17,.22);
}
.nblp-designer-overlay[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-designer-sheet {
  width: min(100%, 400px);
  max-height: min(96svh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e2;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(17,17,17,.14);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.nblp-designer-overlay.is-open .nblp-designer-sheet { transform: translateY(0); }
.nblp-designer-overlay .nblp-designer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.18);
  opacity: 1;
}
.nblp-sheet-drag {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 9px 0 0;
  background: #fff;
}
.nblp-sheet-drag span {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 3px;
  background: #d9d9d4;
}
.nblp-designer-overlay .nblp-sheet-header {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 12px 20px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border-bottom: 1px solid #e6e6e2;
}
.nblp-designer-overlay .nblp-sheet-header > div { padding-top: 0; }
.nblp-designer-overlay .nblp-sheet-kicker {
  display: block;
  margin: 0 0 2px;
  color: #767671;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.nblp-designer-overlay .nblp-sheet-header h2 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.nblp-designer-overlay .nblp-sheet-close {
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #e6e6e2 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 23px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}
.nblp-designer-overlay .nblp-designer {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #111;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.nblp-designer-overlay .nblp-ui-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 18px;
}
.nblp-designer-overlay .nblp-ui-field { min-width: 0; }
.nblp-designer-overlay .nblp-ui-label {
  margin: 0 0 8px !important;
  color: #767671 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: .01em;
}
.nblp-designer-overlay .nblp-essential-options { display: none !important; }

/* Size */
.nblp-designer-overlay .nblp-ui-size-select { position: relative; }
.nblp-designer-overlay .nblp-size-ui {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 40px 12px 14px;
  color: #111 !important;
  background: #fff !important;
  border: 1.5px solid #111 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
}
.nblp-designer-overlay .nblp-ui-size-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.nblp-designer-overlay .nblp-size-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: #9a9a95;
  font-size: 12px;
  line-height: 1.2;
}
.nblp-designer-overlay .nblp-size-caption b {
  color: #111;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-size-mil { color: #9a9a95; }

/* Poly colour / printing ink cards */
.nblp-designer-overlay .nblp-ui-colour-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}
.nblp-designer-overlay .nblp-ui-pill-field {
  position: relative;
  min-width: 0;
  min-height: 104px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  background: #fff;
}
.nblp-designer-overlay .nblp-ui-pill-main { min-width: 0; width: 100%; }
.nblp-designer-overlay .nblp-ui-pill-label {
  display: block;
  margin-bottom: 4px;
  color: #767671;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.nblp-designer-overlay .nblp-ui-pill-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111;
  font-size: 13.5px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-ui-swatch {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #d9d9d4;
  border-radius: 6px;
  background: #fff;
}
.nblp-designer-overlay .nblp-ui-swatch.is-light { box-shadow: inset 0 0 0 1px #d0d0ca; }
.nblp-designer-overlay .nblp-ui-black { background: #111; border-color: #111; }
.nblp-designer-overlay .nblp-poly-ui-value,
.nblp-designer-overlay .nblp-print-ui-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nblp-designer-overlay .nblp-poly-ui,
.nblp-designer-overlay .nblp-print-ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Segment */
.nblp-designer-overlay .nblp-ui-segment-buttons {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.nblp-designer-overlay .nblp-ui-segment-buttons button {
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 6px;
  color: #111;
  background: #fff;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}
.nblp-designer-overlay .nblp-ui-segment-buttons button.is-active {
  background: #e9e336;
  border-color: #e9e336;
}

/* Upload */
.nblp-designer-overlay .nblp-ui-upload {
  min-height: 78px;
  margin: 0 !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #fbfbfa !important;
  border: 1.5px dashed #d9d9d4 !important;
  border-radius: 10px !important;
  cursor: pointer;
}
.nblp-designer-overlay .nblp-ui-upload input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.nblp-designer-overlay .nblp-ui-upload-plus {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #111;
  background: #e9e336;
  border-radius: 9px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}
.nblp-designer-overlay .nblp-ui-upload-text { display: grid; gap: 2px; min-width: 0; }
.nblp-designer-overlay .nblp-ui-upload-text b {
  display: block;
  color: #111;
  font-size: 13.5px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-ui-upload-text small {
  display: block;
  color: #9a9a95;
  font-size: 11.5px;
  line-height: 1.25;
}

/* Preview */
.nblp-designer-overlay .nblp-stage-column { min-width: 0; }
.nblp-designer-overlay .nblp-stage {
  width: 100%;
  min-height: 360px;
  height: 390px;
  max-height: none;
  padding: 0;
  background: #eeeeec;
  border: 1px solid #e6e6e2;
  border-radius: 14px;
  overflow: hidden;
}
.nblp-designer-overlay .nblp-base-image {
  object-fit: contain;
}
.nblp-designer-overlay .nblp-print-area {
  border: 1.5px dashed #bcbcb6;
  border-radius: 4px;
}
.nblp-designer-overlay .nblp-area-label {
  top: -11px;
  left: 7px;
  padding: 2px 7px;
  color: #111;
  background: #e9e336;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
.nblp-designer-overlay .nblp-size-gallery { display: none !important; }
.nblp-designer-overlay .nblp-stage-note,
.nblp-designer-overlay .nblp-quick-position { display: none !important; }

/* Toolbar: reference has Logo + five nudge controls */
.nblp-designer-overlay .nblp-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,.72fr));
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.nblp-designer-overlay .nblp-toolbar-target,
.nblp-designer-overlay .nblp-toolbar-move,
.nblp-designer-overlay .nblp-toolbar-history { display: contents; }
.nblp-designer-overlay .nblp-toolbar-target button:not([data-target-select="logo"]),
.nblp-designer-overlay .nblp-toolbar-history { display: none !important; }
.nblp-designer-overlay .nblp-toolbar-target button[data-target-select="logo"] {
  display: flex !important;
  grid-column: 1;
  min-width: 0;
  min-height: 54px;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
  color: #111;
  background: #e9e336;
  border: 1px solid #e9e336;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-toolbar-move button {
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 8px 4px;
  color: #111;
  background: #fff;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  box-shadow: none;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.nblp-designer-overlay .nblp-toolbar-move button[data-dx="-1"] { grid-column: 2; }
.nblp-designer-overlay .nblp-toolbar-move button[data-dx="0"][data-dy="-1"] { grid-column: 3; }
.nblp-designer-overlay .nblp-toolbar-move button[data-center] { grid-column: 4; }
.nblp-designer-overlay .nblp-toolbar-move button[data-dy="1"] { grid-column: 5; }
.nblp-designer-overlay .nblp-toolbar-move button[data-dx="1"] { grid-column: 1; grid-row: 2; }
.nblp-designer-overlay .nblp-toolbar-move button:active { background: #f7f6d9; }

/* Scale */
.nblp-designer-overlay .nblp-reference-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.nblp-designer-overlay .nblp-reference-scale-label {
  flex: 0 0 38px;
  color: #767671;
  font-size: 11.5px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-reference-scale-input {
  flex: 1;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #d9d9d4;
  border: 0;
  border-radius: 3px;
}
.nblp-designer-overlay .nblp-reference-scale-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #e9e336;
}
.nblp-designer-overlay .nblp-reference-scale-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #e9e336;
}
.nblp-designer-overlay .nblp-reference-scale-value {
  flex: 0 0 40px;
  color: #111;
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
}

/* Advanced */
.nblp-designer-overlay .nblp-ui-advanced-button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #111;
  background: #fff;
  border: 1px solid #e6e6e2;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-ui-advanced-button span {
  font-size: 14px;
  transition: transform .18s ease;
}
.nblp-designer-overlay .nblp-ui-advanced-button[aria-expanded="true"] span { transform: rotate(180deg); }

.nblp-designer-overlay .nblp-advanced-drawer[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-advanced-drawer {
  width: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e2;
  border-radius: 10px;
  box-shadow: none;
}
.nblp-designer-overlay .nblp-drawer-head {
  min-height: 48px;
  padding: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  background: #fff;
  border-bottom: 1px solid #e6e6e2;
}
.nblp-designer-overlay .nblp-drawer-head strong { font-size: 12.5px; font-weight: 600; }
.nblp-designer-overlay .nblp-drawer-close { display: none !important; }
.nblp-designer-overlay .nblp-advanced-drawer details { display: none; }
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) {
  display: block;
  border: 0;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) summary { display: none; }
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:first-child,
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(3) { display: none !important; }
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2) {
  position: relative;
  display: grid !important;
  gap: 8px;
  color: transparent;
  font-size: 0;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2)::before {
  content: "Rotation";
  color: #111;
  font-size: 12px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-panel-content > label:nth-child(2) .nblp-rotate-output {
  position: absolute;
  top: 0;
  right: 0;
  color: #767671;
  font-size: 12px;
  font-weight: 700;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-rotate {
  width: 100%;
  height: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #d9d9d4;
  border-radius: 3px;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-rotate::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #e9e336;
}
.nblp-designer-overlay .nblp-advanced-drawer details:nth-of-type(3) .nblp-rotate::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #e9e336;
}
 .nblp-designer-overlay .nblp-ui-reset-default {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  color: #767671;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.nblp-designer-overlay .nblp-advanced-drawer .nblp-panel-content .nblp-reset-element { display: none !important; }
.nblp-designer-overlay .nblp-advanced-drawer .nblp-reset-link { display: none; }

/* Status and footer */
.nblp-designer-overlay .nblp-status {
  min-height: 18px;
  margin: 0;
  font-size: 10px;
}
.nblp-designer-overlay .nblp-ui-footer {
  flex: 0 0 auto;
  padding: 14px 20px 20px;
  background: #fff;
  border-top: 1px solid #e6e6e2;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design {
  width: 100%;
  min-height: 58px;
  margin: 0 !important;
  padding: 14px 22px;
  color: #fff !important;
  background: #111 !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design:disabled { opacity: .55; cursor: not-allowed; }

/* Keep functional legacy controls available to the existing JS but invisible. */
.nblp-designer-overlay .nblp-essential-options,
.nblp-designer-overlay .nblp-file-name { pointer-events: none; }
.nblp-designer-overlay .nblp-swatches {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.nblp-designer-overlay .nblp-file-input { position: absolute !important; left: -99999px !important; }
.nblp-designer-overlay .nblp-gallery-dialog { z-index: 10; }

@media (max-width: 680px) {
  .nblp-designer-overlay .nblp-designer-sheet {
    width: 100%;
    max-height: 97svh;
    border-radius: 20px 20px 0 0;
  }
}
@media (max-width: 380px) {
  .nblp-designer-overlay .nblp-ui-body { padding: 14px 16px 16px; }
  .nblp-designer-overlay .nblp-sheet-header { padding-inline: 16px; }
  .nblp-designer-overlay .nblp-ui-footer { padding: 12px 16px 16px; }
  .nblp-designer-overlay .nblp-ui-colour-row { gap: 8px; }
  .nblp-designer-overlay .nblp-toolbar { grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,.72fr)); }
  .nblp-designer-overlay .nblp-toolbar-move button[data-dx="1"] { grid-column: 1; grid-row: 2; }
  .nblp-designer-overlay .nblp-stage { min-height: 330px; height: 330px; }
}

.nblp-designer-overlay .nblp-ui-text-editor {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fbfbfa;
  border: 1px solid #e6e6e2;
  border-radius: 10px;
}
.nblp-designer-overlay .nblp-ui-text-editor[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-ui-text-label {
  color: #767671;
  font-size: 11.5px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-ui-custom-text {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  color: #111;
  background: #fff;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}
.nblp-designer-overlay .nblp-ui-custom-text:focus {
  outline: 2px solid #e9e336;
  outline-offset: 1px;
}

.nblp-designer-overlay .nblp-ui-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.nblp-designer-overlay .nblp-ui-preview-head h3 {
  margin: 0;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.nblp-designer-overlay .nblp-ui-preview-head > div {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #767671;
  font-size: 11px;
  font-weight: 600;
}
.nblp-designer-overlay .nblp-ui-preview-head > div span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fbf5f;
}

.nblp-designer-overlay .nblp-ui-hint {
  margin: 8px 0 0 !important;
  color: #9a9a95 !important;
  font-size: 11px !important;
  line-height: 1.2;
  text-align: center;
}

/* v2.4.2 — exact reference UI surface. Keep all rules scoped to the editor. */
.nblp-designer-overlay .nblp-sheet-close::before { content: none !important; }
.nblp-designer-overlay .nblp-designer-sheet {
  width: min(100%, 400px);
  max-height: min(96svh, 900px);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(17,17,17,.14);
}
.nblp-designer-overlay .nblp-sheet-header {
  min-height: 70px;
  padding: 12px 20px 14px;
}
.nblp-designer-overlay .nblp-sheet-header::before { display:none; }
.nblp-designer-overlay .nblp-sheet-kicker { font-size:11px; font-weight:600; letter-spacing:.02em; }
.nblp-designer-overlay .nblp-sheet-header h2 { font-size:21px !important; font-weight:700 !important; }
.nblp-designer-overlay .nblp-sheet-close {
  width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important;
  margin-top:2px !important; border:1px solid #e6e6e2 !important; border-radius:50% !important;
  background:#fff !important; font-size:23px !important; font-weight:300 !important;
}
.nblp-designer-overlay .nblp-designer-sheet > .nblp-designer {
  max-height:calc(min(96svh, 900px) - 70px);
  padding:0 !important;
  overflow-y:auto;
  overflow-x:hidden;
}
.nblp-designer-overlay .nblp-ui-body {
  padding:16px 20px 18px;
  gap:14px;
}
.nblp-designer-overlay .nblp-ui-label { font-size:11.5px !important; font-weight:600 !important; color:#767671 !important; margin:0 0 8px !important; }

/* Exact size selector */
.nblp-designer-overlay .nblp-size-ui {
  min-height:48px; padding:12px 40px 12px 14px; border:1.5px solid #111 !important;
  border-radius:10px !important; font-size:14.5px !important; font-weight:600 !important;
}
.nblp-designer-overlay .nblp-size-caption { margin-top:6px; font-size:12px; }

/* Exact colour cards; selects remain real controls but visually become the card itself. */
.nblp-designer-overlay .nblp-ui-colour-row { grid-template-columns:1fr 1fr; gap:10px; }
.nblp-designer-overlay .nblp-ui-pill-field {
  min-height:82px; padding:10px 12px; border:1px solid #d9d9d4; border-radius:10px;
}
.nblp-designer-overlay .nblp-ui-pill-label { font-size:10.5px; font-weight:600; color:#767671; }
.nblp-designer-overlay .nblp-ui-pill-value { gap:8px; font-size:13.5px; font-weight:600; }
.nblp-designer-overlay .nblp-ui-swatch { width:20px; height:20px; border-radius:6px; border:1px solid #d9d9d4; }
.nblp-designer-overlay .nblp-ui-pill-field select {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2;
}

/* Exact segmented tabs */
.nblp-designer-overlay .nblp-ui-segment-buttons { grid-template-columns:repeat(3,1fr); gap:8px; }
.nblp-designer-overlay .nblp-ui-segment-buttons button {
  min-height:42px; padding:10px 6px; border:1px solid #d9d9d4; border-radius:10px;
  background:#fff; color:#111; font-size:13px; font-weight:600;
}
.nblp-designer-overlay .nblp-ui-segment-buttons button.is-active { background:#e9e336; border-color:#e9e336; }

/* Exact upload card */
.nblp-designer-overlay .nblp-ui-upload {
  position:relative; min-height:72px; margin:0 !important; padding:12px; gap:12px;
  border:1.5px dashed #d9d9d4; border-radius:10px; background:#fbfbfa;
}
.nblp-designer-overlay .nblp-ui-upload .nblp-ui-upload-plus {
  width:38px; height:38px; border-radius:9px; background:#e9e336; color:#111;
  display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:300; line-height:1;
}
.nblp-designer-overlay .nblp-ui-upload-text b { font-size:13.5px; font-weight:600; }
.nblp-designer-overlay .nblp-ui-upload-text small { font-size:11.5px; color:#9a9a95; }

/* Exact preview stage proportions */
.nblp-designer-overlay .nblp-stage-column { min-width:0; }
.nblp-designer-overlay .nblp-stage {
  position:relative; width:100%; height:238px; min-height:238px; max-height:none;
  aspect-ratio:auto; padding:0; background:#eeeeec; border:1px solid #e6e6e2;
  border-radius:14px; overflow:hidden;
}
.nblp-designer-overlay .nblp-base-image {
  position:absolute; width:150px; height:200px; left:50%; top:50%; inset:auto;
  transform:translate(-50%,-50%); object-fit:contain; object-position:center;
  border:1px solid #dcdcd8; border-radius:6px; background:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.15);
}
.nblp-designer-overlay .nblp-print-area {
  left:calc(50% - 55px) !important; top:calc(50% - 74px) !important;
  width:110px !important; height:148px !important;
  border:1.5px dashed #bcbcb6; border-radius:4px;
}
.nblp-designer-overlay .nblp-area-label {
  top:-11px; left:7px; padding:2px 7px; background:#e9e336; color:#111;
  border-radius:4px; font-size:8.5px; font-weight:700; letter-spacing:.03em;
}
.nblp-designer-overlay .nblp-ui-preview-head { margin-bottom:8px; }
.nblp-designer-overlay .nblp-ui-preview-head h3 { font-size:14px; font-weight:700; }
.nblp-designer-overlay .nblp-ui-hint { margin:8px 0 0 !important; font-size:11px !important; color:#9a9a95 !important; text-align:center; }

/* Exact reference controls: two full-width rows, not the old toolbar. */
.nblp-designer-overlay .nblp-toolbar { display:none !important; }
.nblp-designer-overlay .nblp-reference-scale {
  display:flex; align-items:center; gap:10px; margin-top:10px;
}
.nblp-designer-overlay .nblp-reference-scale-label {
  flex:0 0 38px; color:#767671; font-size:11.5px; font-weight:600;
}
.nblp-designer-overlay .nblp-reference-scale-input,
.nblp-designer-overlay .nblp-reference-rotation-input {
  flex:1; width:100%; height:4px; margin:0; padding:0; appearance:none; -webkit-appearance:none;
  background:#d9d9d4; border:0; border-radius:3px; outline:none;
}
.nblp-designer-overlay .nblp-reference-scale-input::-webkit-slider-thumb,
.nblp-designer-overlay .nblp-reference-rotation-input::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#111; border:2px solid #e9e336;
}
.nblp-designer-overlay .nblp-reference-scale-input::-moz-range-thumb,
.nblp-designer-overlay .nblp-reference-rotation-input::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; background:#111; border:2px solid #e9e336;
}
.nblp-designer-overlay .nblp-reference-scale-value,
.nblp-designer-overlay .nblp-reference-rotation-value {
  flex:0 0 40px; color:#111; font-size:11.5px; font-weight:700; text-align:right;
}
.nblp-designer-overlay .nblp-reference-tools {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;
}
.nblp-designer-overlay .nblp-reference-tools button {
  min-height:52px; margin:0; padding:11px 4px; display:flex; align-items:center; justify-content:center; gap:6px;
  color:#111; background:#fff; border:1px solid #d9d9d4; border-radius:10px; box-shadow:none;
  font-size:13px; font-weight:600; line-height:1; cursor:pointer;
}
.nblp-designer-overlay .nblp-reference-tools button:active { background:#f7f6d9; }
.nblp-designer-overlay .nblp-reference-tools button:first-letter { font-size:22px; }
.nblp-designer-overlay .nblp-reference-reset {
  display:block; width:100%; margin:10px 0 0; padding:0; color:#767671; background:transparent;
  border:0; box-shadow:none; font-size:12px; font-weight:600; text-decoration:underline; cursor:pointer;
}

/* No visible advanced/legacy controls in the reference UI. */
.nblp-designer-overlay .nblp-advanced-drawer,
.nblp-designer-overlay .nblp-size-gallery,
.nblp-designer-overlay .nblp-functional-bridge { display:none !important; }
.nblp-designer-overlay .nblp-status { min-height:0; margin:0; }
.nblp-designer-overlay .nblp-ui-footer {
  flex:0 0 auto; padding:14px 20px 20px; background:#fff; border-top:1px solid #e6e6e2;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design {
  width:100%; min-height:58px; margin:0 !important; padding:14px 22px; color:#fff !important;
  background:#111 !important; border:0 !important; border-radius:10px !important; font-size:14px !important; font-weight:700 !important;
}

@media (max-width:380px) {
  .nblp-designer-overlay .nblp-ui-body { padding:14px 16px 16px; }
  .nblp-designer-overlay .nblp-ui-footer { padding:12px 16px 16px; }
  .nblp-designer-overlay .nblp-stage { height:238px; min-height:238px; }
  .nblp-designer-overlay .nblp-base-image { width:150px; height:200px; }
  .nblp-designer-overlay .nblp-print-area { width:110px !important; height:148px !important; }
}

/* Reference preview wrapper: keeps the real product surface at the same 150×200
   visual footprint as edit-your-design.html while retaining real percentage areas. */
.nblp-designer-overlay .nblp-reference-poly {
  position:relative;
  width:150px;
  height:200px;
  flex:0 0 150px;
}
.nblp-designer-overlay .nblp-reference-poly .nblp-base-image {
  inset:0;
  width:150px;
  height:200px;
  transform:none;
}
.nblp-designer-overlay .nblp-stage {
  display:flex;
  align-items:center;
  justify-content:center;
}

.nblp-designer-overlay .nblp-reference-placeholder {
  position:absolute;
  left:50%; top:50%;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform:translate(-50%,-50%);
  color:#111;
  pointer-events:none;
  text-align:center;
  white-space:nowrap;
}
.nblp-designer-overlay .nblp-reference-placeholder strong { font-size:12px; font-weight:800; letter-spacing:.01em; }
.nblp-designer-overlay .nblp-reference-placeholder span { color:#767671; font-size:7.5px; font-weight:600; letter-spacing:.02em; }
.nblp-designer-overlay .nblp-logo-object:not([hidden]) ~ .nblp-reference-placeholder,
.nblp-designer-overlay .nblp-text-object:not([hidden]) ~ .nblp-reference-placeholder { display:none; }
.nblp-designer-overlay .nblp-reference-placeholder {
  position:absolute; left:50%; top:50%; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  transform:translate(-50%,-50%); color:#111; pointer-events:none; text-align:center; white-space:nowrap;
}
.nblp-designer-overlay .nblp-reference-placeholder strong { font-size:12px; font-weight:800; letter-spacing:.01em; }
.nblp-designer-overlay .nblp-reference-placeholder span { color:#767671; font-size:7.5px; font-weight:600; letter-spacing:.02em; }
.nblp-designer-overlay .nblp-reference-placeholder ~ .nblp-logo-object:not([hidden]),
.nblp-designer-overlay .nblp-reference-placeholder ~ .nblp-text-object:not([hidden]) { }

/* Reference shell: the supplied HTML is a centered 400px sheet, not a bottom-attached drawer. */
.nblp-designer-overlay {
  align-items:center;
  justify-content:center;
  padding:28px 14px;
  background:rgba(17,17,17,.22);
}
.nblp-designer-overlay .nblp-designer-sheet {
  width:100%;
  max-width:400px;
  max-height:calc(100svh - 56px);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 12px 32px -12px rgba(17,17,17,.18);
}
.nblp-designer-overlay .nblp-sheet-drag { padding:9px 0 0; }
.nblp-designer-overlay .nblp-sheet-header { padding:12px 20px 14px; }
.nblp-designer-overlay .nblp-designer-sheet > .nblp-designer { max-height:calc(100svh - 126px); }
@media (max-width:680px) {
  .nblp-designer-overlay { padding:28px 14px; }
  .nblp-designer-overlay .nblp-designer-sheet { max-height:calc(100svh - 56px); border-radius:20px; }
  .nblp-designer-overlay .nblp-designer-sheet > .nblp-designer { max-height:calc(100svh - 126px); }
}


/* v2.4.3 — strict reference-order correction.
 * The legacy compact rules assign an `order` to the stage. Because the new
 * reference controls live inside the same flex column, that legacy order can
 * place the nudge controls before the preview. Explicitly neutralize it here.
 */
.nblp-designer-overlay .nblp-stage-column {
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-preview-head,
.nblp-designer-overlay .nblp-stage-column > .nblp-stage,
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-hint,
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-scale,
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-tools,
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-reset {
  order:0 !important;
  flex:none !important;
}
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-preview-head { order:1 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-stage { order:2 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-hint { order:3 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-scale { order:4 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-scale.nblp-reference-rotation { order:5 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-tools:nth-child(6) { order:6 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-tools:nth-child(7) { order:7 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-reset { order:8 !important; }

/* The reference keeps the Logo upload card visible while switching Logo /
   Slogan / Website. The selected tab changes the active design layer; it does
   not collapse or distort the upload card. */
.nblp-designer-overlay .nblp-ui-upload[hidden] { display:flex !important; }

/* v2.4.4 — final strict reference surface.
 * Appearance is intentionally scoped to the designer overlay. Existing engine
 * classes/selectors remain untouched so the current design state, upload,
 * preview generation, AJAX save, WooCommerce hooks and form flow remain the
 * single source of truth.
 */
.nblp-designer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 14px !important;
  background: rgba(17,17,17,.22) !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-designer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}
.nblp-designer-overlay .nblp-designer-sheet {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 400px !important;
  max-height: calc(100svh - 56px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #e6e6e2 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 12px 32px -12px rgba(17,17,17,.18) !important;
  transform: translateY(0) !important;
}
.nblp-designer-overlay .nblp-sheet-drag {
  display: flex !important;
  justify-content: center !important;
  padding: 9px 0 0 !important;
  height: 25px !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-sheet-drag span {
  display: block !important;
  width: 34px !important;
  height: 4px !important;
  border-radius: 3px !important;
  background: #d9d9d4 !important;
}
.nblp-designer-overlay .nblp-sheet-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  padding: 12px 20px 14px !important;
  gap: 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #e6e6e2 !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-sheet-header::before { display: none !important; }
.nblp-designer-overlay .nblp-sheet-header > div { padding-top: 0 !important; }
.nblp-designer-overlay .nblp-sheet-kicker {
  display: block !important;
  margin: 0 0 2px !important;
  color: #767671 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
}
.nblp-designer-overlay .nblp-sheet-header h2 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}
.nblp-designer-overlay .nblp-sheet-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #e6e6e2 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.nblp-designer-overlay .nblp-sheet-close svg { width: 14px !important; height: 14px !important; display: block !important; }

.nblp-designer-overlay .nblp-designer {
  display: block !important;
  width: 100% !important;
  max-height: calc(100svh - 126px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: #111 !important;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
}
.nblp-designer-overlay .nblp-ui-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nblp-designer-overlay .nblp-essential-options,
.nblp-designer-overlay .nblp-functional-bridge,
.nblp-designer-overlay .nblp-size-gallery,
.nblp-designer-overlay .nblp-advanced-drawer,
.nblp-designer-overlay .nblp-toolbar { display: none !important; }

.nblp-designer-overlay .nblp-ui-label {
  margin: 0 0 8px !important;
  color: #767671 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
}
.nblp-designer-overlay .nblp-ui-size-select { position: relative !important; }
.nblp-designer-overlay .nblp-size-ui {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 40px 12px 14px !important;
  color: #111 !important;
  background: #fff !important;
  border: 1.5px solid #111 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-ui-size-select::after {
  content: "" !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #111 !important;
  border-bottom: 2px solid #111 !important;
  transform: translateY(-65%) rotate(45deg) !important;
  pointer-events: none !important;
}
.nblp-designer-overlay .nblp-size-caption {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 6px !important;
  color: #9a9a95 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.nblp-designer-overlay .nblp-size-caption b { color: #111 !important; font-weight: 600 !important; }

.nblp-designer-overlay .nblp-ui-colour-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.nblp-designer-overlay .nblp-ui-pill-field {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #d9d9d4 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-ui-pill-main { min-width: 0 !important; width: 100% !important; }
.nblp-designer-overlay .nblp-ui-pill-label {
  display: block !important;
  margin: 0 0 4px !important;
  color: #767671 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.nblp-designer-overlay .nblp-ui-pill-value {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #111 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.nblp-designer-overlay .nblp-ui-swatch {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 1px solid #d9d9d4 !important;
  background: #fff !important;
}
.nblp-designer-overlay .nblp-ui-black { background: #111 !important; border-color: #111 !important; }
.nblp-designer-overlay .nblp-poly-ui,
.nblp-designer-overlay .nblp-print-ui {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.nblp-designer-overlay .nblp-ui-segment-buttons {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 8px !important;
}
.nblp-designer-overlay .nblp-ui-segment-buttons button {
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #d9d9d4 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
.nblp-designer-overlay .nblp-ui-segment-buttons button.is-active { background: #e9e336 !important; border-color: #e9e336 !important; }

.nblp-designer-overlay .nblp-ui-upload {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 12px !important;
  background: #fbfbfa !important;
  border: 1.5px dashed #d9d9d4 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-ui-upload input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.nblp-designer-overlay .nblp-ui-upload-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  color: #111 !important;
  background: #e9e336 !important;
  border-radius: 9px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.nblp-designer-overlay .nblp-ui-upload-plus svg { display: block !important; width: 16px !important; height: 16px !important; }
.nblp-designer-overlay .nblp-ui-upload-text { display: grid !important; gap: 2px !important; min-width: 0 !important; }
.nblp-designer-overlay .nblp-ui-upload-text b { display: block !important; color: #111 !important; font-size: 13.5px !important; font-weight: 600 !important; }
.nblp-designer-overlay .nblp-ui-upload-text small { display: block !important; color: #9a9a95 !important; font-size: 11.5px !important; line-height: 1.25 !important; }

.nblp-designer-overlay .nblp-stage-column { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.nblp-designer-overlay .nblp-ui-preview-head { display:flex !important; align-items:center !important; justify-content:space-between !important; margin:0 0 8px !important; }
.nblp-designer-overlay .nblp-ui-preview-head h3 { margin:0 !important; color:#111 !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important; }
.nblp-designer-overlay .nblp-ui-preview-head > div { display:flex !important; align-items:center !important; gap:5px !important; color:#767671 !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; }
.nblp-designer-overlay .nblp-ui-preview-head > div > span { width:6px !important; height:6px !important; border-radius:50% !important; background:#2fbf5f !important; }
.nblp-designer-overlay .nblp-stage {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 238px !important;
  min-height: 238px !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #eeeeec !important;
  border: 1px solid #e6e6e2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.nblp-designer-overlay .nblp-reference-poly { position:relative !important; width:150px !important; height:200px !important; flex:0 0 150px !important; }
.nblp-designer-overlay .nblp-reference-poly .nblp-base-image {
  position:absolute !important; inset:0 !important; width:150px !important; height:200px !important;
  transform:none !important; object-fit:contain !important; object-position:center !important;
  background:#fff !important; border:1px solid #dcdcd8 !important; border-radius:6px !important;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.15) !important;
}
.nblp-designer-overlay .nblp-print-area {
  left: calc(50% - 55px) !important; top: calc(50% - 74px) !important;
  width: 110px !important; height: 148px !important;
  border: 1.5px dashed #bcbcb6 !important; border-radius:4px !important;
}
.nblp-designer-overlay .nblp-area-label {
  top:-11px !important; left:7px !important; padding:2px 7px !important;
  color:#111 !important; background:#e9e336 !important; border-radius:4px !important;
  font-size:8.5px !important; font-weight:700 !important; letter-spacing:.03em !important;
}
.nblp-designer-overlay .nblp-ui-hint { margin:8px 0 0 !important; color:#9a9a95 !important; font-size:11px !important; line-height:1.2 !important; text-align:center !important; }

.nblp-designer-overlay .nblp-reference-scale { display:flex !important; align-items:center !important; gap:10px !important; margin-top:10px !important; }
.nblp-designer-overlay .nblp-reference-scale-label { flex:0 0 38px !important; color:#767671 !important; font-size:11.5px !important; font-weight:600 !important; }
.nblp-designer-overlay .nblp-reference-scale-input,
.nblp-designer-overlay .nblp-reference-rotation-input {
  flex:1 !important; width:100% !important; height:4px !important; min-width:0 !important; margin:0 !important; padding:0 !important;
  appearance:none !important; -webkit-appearance:none !important; background:#d9d9d4 !important; border:0 !important; border-radius:3px !important; outline:none !important;
}
.nblp-designer-overlay .nblp-reference-scale-input::-webkit-slider-thumb,
.nblp-designer-overlay .nblp-reference-rotation-input::-webkit-slider-thumb {
  appearance:none !important; -webkit-appearance:none !important; width:16px !important; height:16px !important; border-radius:50% !important; background:#111 !important; border:2px solid #e9e336 !important;
}
.nblp-designer-overlay .nblp-reference-scale-input::-moz-range-thumb,
.nblp-designer-overlay .nblp-reference-rotation-input::-moz-range-thumb {
  width:16px !important; height:16px !important; border-radius:50% !important; background:#111 !important; border:2px solid #e9e336 !important;
}
.nblp-designer-overlay .nblp-reference-scale-value,
.nblp-designer-overlay .nblp-reference-rotation-value { flex:0 0 36px !important; color:#111 !important; font-size:11.5px !important; font-weight:700 !important; text-align:right !important; }
.nblp-designer-overlay .nblp-reference-tools { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:10px !important; }
.nblp-designer-overlay .nblp-reference-tools button {
  min-height:52px !important; margin:0 !important; padding:11px 4px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  color:#111 !important; background:#fff !important; border:1px solid #d9d9d4 !important; border-radius:8px !important; box-shadow:none !important;
  font-family:inherit !important; font-size:13px !important; font-weight:600 !important; line-height:1 !important;
}
.nblp-designer-overlay .nblp-reference-tools button svg { width:14px !important; height:14px !important; flex:0 0 14px !important; }
.nblp-designer-overlay .nblp-reference-tools button:active { background:#f7f6d9 !important; }
.nblp-designer-overlay .nblp-reference-reset {
  display:block !important; width:100% !important; margin:10px 0 0 !important; padding:0 !important; color:#767671 !important; background:none !important;
  border:0 !important; box-shadow:none !important; font-family:inherit !important; font-size:12px !important; font-weight:600 !important; text-decoration:underline !important; text-align:center !important;
}

.nblp-designer-overlay .nblp-ui-footer {
  flex:0 0 auto !important;
  padding:14px 20px 20px !important;
  background:#fff !important;
  border-top:1px solid #e6e6e2 !important;
  box-sizing:border-box !important;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design {
  display:block !important; width:100% !important; min-height:58px !important; margin:0 !important; padding:14px 22px !important;
  color:#fff !important; background:#111 !important; border:0 !important; border-radius:10px !important; box-shadow:none !important;
  font-family:inherit !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important;
}

/* Keep the reference order deterministic regardless of legacy flex ordering. */
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-preview-head { order:1 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-stage { order:2 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-hint { order:3 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-scale:not(.nblp-reference-rotation) { order:4 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-rotation { order:5 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-tools:nth-child(6) { order:6 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-tools:nth-child(7) { order:7 !important; }
.nblp-designer-overlay .nblp-stage-column > .nblp-reference-reset { order:8 !important; }

@media (max-width:380px) {
  .nblp-designer-overlay { padding:28px 14px !important; }
  .nblp-designer-overlay .nblp-designer { padding:14px 16px 16px !important; max-height:calc(100svh - 126px) !important; }
  .nblp-designer-overlay .nblp-ui-footer { padding:12px 16px 16px !important; }
  .nblp-designer-overlay .nblp-stage { height:238px !important; min-height:238px !important; }
  .nblp-designer-overlay .nblp-reference-tools { gap:8px !important; }
}

/* v2.5.0 — production bottom-sheet UI refinement */
.nblp-designer-overlay {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 16px 16px 0 !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.nblp-designer-overlay .nblp-designer-backdrop {
  background: rgba(17,17,17,.56) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.nblp-designer-overlay .nblp-designer-sheet {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 420px) !important;
  height: min(92svh, 860px) !important;
  max-height: min(92svh, 860px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #e6e6e2 !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -20px 70px rgba(17,17,17,.26) !important;
  transform: translate3d(0,105%,0) !important;
  will-change: transform;
}
.nblp-designer-overlay.is-open .nblp-designer-sheet { transform: translate3d(0,0,0) !important; }
.nblp-designer-overlay .nblp-sheet-drag {
  position: absolute !important;
  z-index: 8 !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 9px 0 0 !important;
  pointer-events: none !important;
}
.nblp-designer-overlay .nblp-sheet-drag span {
  display: block !important;
  width: 34px !important;
  height: 4px !important;
  background: #d9d9d4 !important;
  border-radius: 999px !important;
}
.nblp-designer-overlay .nblp-sheet-header {
  flex: 0 0 auto !important;
  min-height: 76px !important;
  padding: 20px 20px 13px !important;
  align-items: flex-start !important;
  background: #fff !important;
  border-bottom: 1px solid #e6e6e2 !important;
}
.nblp-designer-overlay .nblp-sheet-header::before { display: none !important; }
.nblp-designer-overlay .nblp-sheet-header > div { padding: 0 !important; }
.nblp-designer-overlay .nblp-sheet-kicker {
  margin: 0 0 3px !important;
  color: #767671 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
.nblp-designer-overlay .nblp-sheet-header h2 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}
.nblp-designer-overlay .nblp-sheet-close {
  display: grid !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: -3px -7px 0 0 !important;
  padding: 0 !important;
  place-items: center !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #e6e6e2 !important;
  border-radius: 50% !important;
}
.nblp-designer-overlay .nblp-sheet-close:hover { background: #f4f4f2 !important; }
.nblp-designer-overlay .nblp-sheet-close svg { width: 15px !important; height: 15px !important; }

.nblp-designer-overlay .nblp-designer-sheet > .nblp-designer {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nblp-designer-overlay .nblp-ui-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px 20px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.nblp-designer-overlay .nblp-ui-label {
  margin: 0 0 8px !important;
  color: #676763 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
}
.nblp-designer-overlay .nblp-size-ui { min-height: 48px !important; }
.nblp-designer-overlay .nblp-ui-colour-row { gap: 10px !important; }
.nblp-designer-overlay .nblp-ui-pill-field {
  min-height: 66px !important;
  padding: 10px 12px !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.nblp-designer-overlay .nblp-ui-pill-field:hover { border-color: #a9a9a3 !important; background: #fbfbfa !important; }
.nblp-designer-overlay .nblp-ui-pill-value { white-space: nowrap !important; overflow: hidden !important; }
.nblp-designer-overlay .nblp-ui-pill-value > span:last-child { overflow: hidden !important; text-overflow: ellipsis !important; }
.nblp-designer-overlay .nblp-ui-segment-buttons button,
.nblp-designer-overlay .nblp-reference-tools button { min-height: 46px !important; cursor: pointer !important; }
.nblp-designer-overlay .nblp-ui-segment-buttons button:hover,
.nblp-designer-overlay .nblp-reference-tools button:hover { border-color: #aaa9a4 !important; background: #f9f8f7 !important; }
.nblp-designer-overlay .nblp-ui-segment-buttons button.is-active { background: #e9e336 !important; border-color: #d7d229 !important; }
.nblp-designer-overlay .nblp-ui-upload {
  min-height: 72px !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.nblp-designer-overlay .nblp-ui-upload:hover { background: #f7f6ed !important; border-color: #b8b7ad !important; }
.nblp-designer-overlay .nblp-ui-text-editor {
  display: grid !important;
  gap: 8px !important;
}
.nblp-designer-overlay .nblp-ui-text-editor[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-ui-text-editor input {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #d9d9d4 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 14px !important;
}
.nblp-designer-overlay .nblp-stage { height: 238px !important; min-height: 238px !important; }
.nblp-designer-overlay .nblp-reference-placeholder {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
  transform: translate(-50%,-50%) !important;
  white-space: nowrap !important;
}
.nblp-designer-overlay .nblp-reference-placeholder[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-reference-placeholder strong { color: #111 !important; font-size: 12px !important; font-weight: 800 !important; }
.nblp-designer-overlay .nblp-reference-placeholder span { color: #767671 !important; font-size: 8px !important; font-weight: 600 !important; }
.nblp-designer-overlay .nblp-reference-scale input[type="range"] { cursor: pointer !important; }
.nblp-designer-overlay .nblp-reference-tools + .nblp-reference-tools { margin-top: 8px !important; }
.nblp-designer-overlay .nblp-reference-reset,
.nblp-designer-overlay .nblp-ui-advanced-button {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 4px 0 0 !important;
  padding: 8px !important;
  color: #676763 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.nblp-designer-overlay .nblp-ui-advanced-button { margin-top: -6px !important; text-decoration: none !important; }
.nblp-designer-overlay .nblp-advanced-drawer {
  position: absolute !important;
  z-index: 20 !important;
  inset: auto 0 0 !important;
  max-height: 76% !important;
  overflow-y: auto !important;
  background: #fff !important;
  border-top: 1px solid #e6e6e2 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -16px 48px rgba(17,17,17,.18) !important;
}
.nblp-designer-overlay .nblp-advanced-drawer[hidden] { display: none !important; }
.nblp-designer-overlay .nblp-drawer-head {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 8px 12px 8px 18px !important;
  background: #fff !important;
  border-bottom: 1px solid #e6e6e2 !important;
}
.nblp-designer-overlay .nblp-drawer-head strong { font-size: 14px !important; }
.nblp-designer-overlay .nblp-drawer-close { display: grid !important; place-items: center !important; }
.nblp-designer-overlay .nblp-advanced-drawer details { display: block !important; }
.nblp-designer-overlay .nblp-advanced-drawer details summary { display: block !important; min-height: 44px !important; padding: 14px 18px !important; font-size: 13px !important; }
.nblp-designer-overlay .nblp-advanced-drawer .nblp-panel-content { padding: 0 18px 16px !important; }
.nblp-designer-overlay .nblp-ui-footer {
  flex: 0 0 auto !important;
  padding: 10px 20px max(20px, env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  border-top: 1px solid #e6e6e2 !important;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-status {
  min-height: 0 !important;
  margin: 0 0 8px !important;
  font-size: 12px !important;
  text-align: center !important;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-status:empty { display: none !important; }
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design {
  min-height: 52px !important;
  cursor: pointer !important;
  transition: transform .14s ease, opacity .14s ease !important;
}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design:hover { opacity: .9 !important; }
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design:active { transform: translateY(1px) !important; }
.nblp-designer-overlay :where(button,select,input):focus-visible {
  outline: 3px solid rgba(17,17,17,.24) !important;
  outline-offset: 2px !important;
}
@media (max-width: 520px) {
  .nblp-designer-overlay { padding: 0 !important; }
  .nblp-designer-overlay .nblp-designer-sheet {
    width: 100% !important;
    height: min(96svh, 860px) !important;
    max-height: 96svh !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
@media (max-width: 380px) {
  .nblp-designer-overlay .nblp-sheet-header { padding-inline: 16px !important; }
  .nblp-designer-overlay .nblp-ui-body { padding: 14px 16px 18px !important; }
  .nblp-designer-overlay .nblp-ui-footer { padding-inline: 16px !important; }
  .nblp-designer-overlay .nblp-ui-colour-row { grid-template-columns: 1fr 1fr !important; }
  .nblp-designer-overlay .nblp-stage { height: 224px !important; min-height: 224px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nblp-designer-overlay .nblp-designer-sheet,
  .nblp-designer-overlay .nblp-designer-backdrop { transition: none !important; }
}

/* v2.5.0 visual QA corrections */
.nblp-designer-overlay .nblp-ui-upload > .nblp-ui-upload-text {
  display: grid !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  place-items: initial !important;
  color: inherit !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.nblp-designer-overlay .nblp-stage-column > .nblp-ui-advanced-button { order: 9 !important; }

/* 3.0.0 — NoBulk Pack Studio brand system */
:root{--nbp-accent:#CFFF04;--nblp-accent:#CFFF04;--nblp-accent-dark:#111;--nblp-accent-soft:#f5ffd1;--nblp-accent-line:#b4da12}
.nblp-open-designer{min-height:56px!important;color:#111!important;background:#CFFF04!important;border-color:#b9df18!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(17,17,17,.06)!important;font-size:14px!important;font-weight:850!important}
.nblp-open-designer:hover{color:#111!important;background:#bfe900!important;opacity:1!important}
.nblp-designer-overlay .nblp-designer-backdrop{background:rgba(17,17,17,.66)!important}
.nblp-designer-overlay .nblp-designer-sheet{width:min(100%,440px)!important;border-color:#d9dad4!important;box-shadow:0 -24px 90px rgba(0,0,0,.3)!important}
.nblp-designer-overlay .nblp-sheet-header{min-height:82px!important;padding-top:19px!important}
.nblp-designer-overlay .nblp-sheet-title{display:flex!important;align-items:center!important;gap:11px!important;padding:0!important}
.nblp-designer-overlay .nblp-sheet-title>div{padding:0!important}
.nblp-designer-overlay .nblp-sheet-brand{display:block!important;width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:50%!important}
.nblp-designer-overlay .nblp-sheet-kicker{color:#6b6c66!important;font-size:10px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.nblp-designer-overlay .nblp-sheet-header h2{font-size:21px!important;font-weight:850!important}
.nblp-designer-overlay .nblp-ui-label{color:#60615c!important;font-weight:750!important}
.nblp-designer-overlay .nblp-size-ui{border-color:#111!important;border-radius:8px!important}
.nblp-designer-overlay .nblp-ui-segment-buttons button,.nblp-designer-overlay .nblp-ui-pill-field,.nblp-designer-overlay .nblp-ui-upload,.nblp-designer-overlay .nblp-ui-text-editor input{border-radius:8px!important}
.nblp-designer-overlay .nblp-ui-segment-buttons button.is-active{color:#111!important;background:#CFFF04!important;border-color:#b9df18!important}
.nblp-designer-overlay .nblp-ui-upload-plus,.nblp-designer-overlay .nblp-area-label{color:#111!important;background:#CFFF04!important}
.nblp-designer-overlay .nblp-print-area{border-color:#9b9d94!important}
.nblp-designer-overlay .nblp-reference-scale-input::-webkit-slider-thumb,.nblp-designer-overlay .nblp-reference-rotation-input::-webkit-slider-thumb{border-color:#CFFF04!important}
.nblp-designer-overlay .nblp-reference-scale-input::-moz-range-thumb,.nblp-designer-overlay .nblp-reference-rotation-input::-moz-range-thumb{border-color:#CFFF04!important}
.nblp-designer-overlay .nblp-reference-tools button:hover{background:#f5ffd1!important;border-color:#b9df18!important}
.nblp-designer-overlay .nblp-ui-footer .nblp-save-design{background:#111!important;border-radius:8px!important;font-weight:850!important}
.nblp-designer-overlay :where(button,select,input):focus-visible{outline-color:#8eae00!important}
@media(max-width:520px){.nblp-designer-overlay .nblp-designer-sheet{width:100%!important}.nblp-designer-overlay .nblp-sheet-header{padding-inline:16px!important}.nblp-designer-overlay .nblp-sheet-brand{width:34px!important;height:34px!important;flex-basis:34px!important}}

/* Prevent compact browser font metrics from clipping the Studio eyebrow. */
.nblp-designer-overlay .nblp-sheet-kicker{display:none!important}
.nblp-designer-overlay .nblp-sheet-title{min-height:44px!important}