/* Nathi Collage Editor — full-screen editor, minimal black/white/gray, RTL.
   Tokens pulled from the artbynathi.co.il theme (--minimog-*): radius 5/8,
   45px controls, Rubik 15/500 buttons, .25s cubic-bezier motion, secondary
   hover fills black — the editor speaks the site's exact language. */
.nce-app{--nce-ink:#000;--nce-gray:#666;--nce-gray-light:#ababab;
	--nce-line:#d2d2d2;--nce-line-soft:#ededed;--nce-light:#ededed;
	--nce-bg:#f8f8f8;--nce-danger:#DA3F3F;
	--nce-radius:5px;--nce-radius-lg:8px;--nce-control-h:45px;
	--nce-ease:cubic-bezier(.645,.045,.355,1);--nce-dur:.25s;
	direction:rtl;font-family:inherit;margin:0 0 28px;color:var(--nce-ink)}
.nce-app *{box-sizing:border-box}
.nce-app [hidden]{display:none!important} /* themes/Elementor must never defeat [hidden] */

/* ---------- buttons: the site's button DNA ---------- */
.nce-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
	min-height:var(--nce-control-h);padding:0 22px;border:1px solid var(--nce-ink);
	background:#fff;color:var(--nce-ink);
	font-size:15px;font-weight:500;cursor:pointer;border-radius:var(--nce-radius);
	transition:background var(--nce-dur) var(--nce-ease),color var(--nce-dur) var(--nce-ease),
		border-color var(--nce-dur) var(--nce-ease);
	line-height:1;font-family:Rubik,inherit;letter-spacing:0;white-space:nowrap}
.nce-btn:hover{background:var(--nce-ink);color:#fff} /* secondary fills black, like the site */
.nce-btn-primary{background:var(--nce-ink);color:#fff}
/* an interactive editor needs a LIVE primary — a shade lighter on hover (X12) */
.nce-btn-primary:hover{background:#1a1a1a;color:#fff}
.nce-btn:disabled{opacity:.4;cursor:not-allowed}
.nce-btn:disabled:hover{background:#fff;color:var(--nce-ink)}
.nce-btn-primary:disabled:hover{background:var(--nce-ink);color:#fff}
.nce-btn-sm{min-height:38px;padding:0 14px;font-size:13.5px} /* size only — layout stretching belongs to the container */

/* ---------- mobile gate ---------- */
.nce-mobile-screen{display:none}
.nce-is-mobile .nce-mobile-screen{display:block}
.nce-is-mobile .nce-launcher,.nce-is-mobile .nce-overlay{display:none!important}
.nce-mobile-inner{border:1px solid var(--nce-line-soft);border-radius:var(--nce-radius-lg);
	background:#fff;padding:36px 24px;text-align:center}
.nce-mobile-inner h3{margin:14px 0 8px;font-size:20px}
.nce-mobile-inner p{margin:0 auto 10px;max-width:420px;color:var(--nce-gray);font-size:15px;line-height:1.6}
.nce-mobile-note{font-size:13px !important}
.nce-mobile-remind{margin-top:14px}
.nce-mobile-remind-state{min-height:18px;font-size:13px;color:var(--nce-gray)}

/* ---------- launcher card (on the product page) ----------
   Soft box like every box on the site (#ededed, radius 8) — not a hard black frame. */
.nce-launcher{display:flex;gap:24px;align-items:center;border:1px solid var(--nce-line-soft);
	border-radius:var(--nce-radius-lg);background:#fff;padding:24px;margin:0 0 24px}
.nce-launcher-preview{flex:0 0 168px;max-width:168px;background:#fff;border:1px solid var(--nce-line-soft);
	border-radius:var(--nce-radius);padding:10px}
.nce-launcher-preview svg{display:block;width:100%;height:auto}
.nce-launcher-preview [data-nce-slot]{fill:#ececec !important;stroke:#dcdcdc}
.nce-launcher-info{flex:1;min-width:0}
.nce-launcher-info h3{margin:0 0 6px;font-size:20px;font-weight:600;color:var(--nce-ink)}
.nce-launcher-info p{margin:0 0 16px;color:var(--nce-gray);font-size:14.5px;line-height:1.65}
/* N1: no min-width — buttons size to content and WRAP instead of escaping the card */
.nce-launcher-actions{flex-wrap:wrap}
.nce-launcher-info .nce-btn{min-width:0;flex:0 1 auto;padding:0 24px}
/* X9: the PRIMARY action sits rightmost — where the RTL eye starts */
.nce-launcher-actions .nce-add-cart{order:-1}
/* X10: the "ready" pill lives beside the title it describes */
.nce-title-tag{display:inline-block;vertical-align:2px;background:#000;color:#fff;font-size:11.5px;
	font-weight:600;padding:3px 11px;border-radius:999px;letter-spacing:.03em;margin-inline-start:10px}
.nce-launcher-status{margin:12px 0 0;font-size:13px;color:var(--nce-gray)}
.nce-launcher-status:empty{display:none}
/* finished design: a small pill tag, not a second sentence repeating the meta line */
.nce-launcher-status.nce-status-done{display:inline-block;background:#000;color:#fff;
	font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:999px;letter-spacing:.03em}
@media (max-width:640px){.nce-launcher{flex-direction:column;text-align:center}.nce-launcher-preview{max-width:140px}}

/* ---------- full-screen overlay ----------
   The overlay is PORTALED to document.body on open (a position:sticky ancestor
   in the theme creates a stacking context that traps any z-index), so it must
   be fully self-sufficient: own [hidden], box-sizing, direction and rtl. */
.nce-overlay,.nce-dialog{--nce-ink:#000;--nce-gray:#666;--nce-gray-light:#ababab;
	--nce-line:#d2d2d2;--nce-line-soft:#ededed;--nce-light:#ededed;
	--nce-bg:#f8f8f8;--nce-danger:#DA3F3F;
	--nce-radius:5px;--nce-radius-lg:8px;--nce-control-h:45px;
	--nce-ease:cubic-bezier(.645,.045,.355,1);--nce-dur:.25s}
.nce-overlay{position:fixed;inset:0;z-index:2147483000;background:#fff;display:flex;flex-direction:column;
	direction:rtl;color:#000;font-size:14px}
.nce-overlay *{box-sizing:border-box}
.nce-overlay[hidden]{display:none!important} /* the portal moves it OUT of .nce-app — must self-hide */
.nce-overlay [hidden]{display:none!important}
body.nce-lock{overflow:hidden}
/* the site's floating widgets must not sit above the editor */
body.nce-lock .whatsapp-float,
body.nce-lock [class*="whatsapp"],
body.nce-lock [id*="whatsapp"],
body.nce-lock [class*="accessibility-toolbar"],
body.nce-lock [id*="accessibility"],
body.nce-lock [class*="back-to-top"]{display:none!important}

/* theme/WooCommerce CSS reset inside the overlay (themes override input widths) */
.nce-overlay input,.nce-overlay select,.nce-overlay button,.nce-overlay textarea{
	max-width:none;min-height:0;margin:0;box-sizing:border-box;font-family:inherit;line-height:1.3}
/* flex-basis would become HEIGHT inside the column .nce-ctl — width alone rules */
.nce-overlay input[type=number].nce-text-size{width:68px!important;flex:0 0 auto}

/* top bar */
.nce-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:0 22px;height:64px;flex:0 0 64px;border-bottom:1px solid var(--nce-light);background:#fff}
.nce-topbar-right{display:flex;align-items:baseline;gap:16px;min-width:0}
.nce-topbar-title{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nce-counter{font-size:13px;color:var(--nce-gray);white-space:nowrap}
/* N2: overflow hidden — the compact steps must clip, never spill onto the counter */
.nce-topbar-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;overflow:hidden}
.nce-topbar-left{display:flex;align-items:center;gap:8px}
/* icon buttons: ONE treatment for ? / ✕ / ↶ — quiet squares, ink glyph, soft hover.
   background !important defeats any theme button fill that leaks into the portal. */
.nce-overlay .nce-icon-btn{width:45px;height:45px;border:0!important;background:transparent!important;
	color:var(--nce-ink)!important;font-size:17px;cursor:pointer;border-radius:var(--nce-radius);line-height:1;flex:0 0 45px;
	padding:0;transition:background var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-icon-btn:hover{background:var(--nce-bg)!important;color:var(--nce-ink)!important}
.nce-overlay .nce-undo-btn{font-size:19px}
.nce-overlay .nce-icon-btn:disabled{opacity:.35;cursor:default}
.nce-overlay .nce-icon-btn:disabled:hover{background:transparent!important}

/* progress steps: see STEPPER 2.0 at the end of this file */

/* body: tray + stage */
.nce-body{flex:1;display:flex;min-height:0}
.nce-tray{flex:0 0 232px;display:flex;flex-direction:column;gap:10px;
	border-inline-start:1px solid var(--nce-light);background:var(--nce-bg);padding:16px;overflow:hidden}
.nce-upload-btn{width:100%;position:relative;overflow:hidden}
/* three actions in a 200px tray: auto-fill takes its own row, shuffle+clear share one */
.nce-tray-actions{display:flex;gap:6px;flex-wrap:wrap}
.nce-tray-actions .nce-btn{flex:1 1 0;min-width:0;padding:0 8px} /* layout stretch lives here, not on .nce-btn-sm */
.nce-tray-actions .nce-autofill{flex:1 1 100%}
.nce-tray-head{font-size:12.5px;color:var(--nce-gray)}
.nce-tray-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start;padding-bottom:6px}
.nce-tray-empty{font-size:12.5px;color:#999;line-height:1.6;margin:6px 2px;grid-column:1/-1}
.nce-thumb{position:relative;aspect-ratio:1/1;border:1px solid var(--nce-line-soft);border-radius:var(--nce-radius);
	cursor:grab;overflow:hidden;background:#fff;transition:border-color var(--nce-dur) var(--nce-ease)}
.nce-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.nce-thumb:hover{border-color:var(--nce-ink)}
/* N6: a placed photo stays full-strength — the ✓ badge and ink border say "placed";
   fading 40 thumbs washed out the whole tray at the proudest moment */
.nce-thumb-used{border-color:var(--nce-ink)}
.nce-thumb-check{position:absolute;top:2px;left:2px;background:var(--nce-ink);color:#fff;
	font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%}
/* X8: delete a photo from the tray — appears on hover/focus */
.nce-thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
	background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:none;
	align-items:center;justify-content:center;padding:0}
.nce-thumb:hover .nce-thumb-del,.nce-thumb-del:focus{display:flex}
.nce-thumb-del:hover{background:var(--nce-danger)}
/* X4: live character counter beside the text label */
.nce-char-count{font-weight:400;color:#9a9a9a;letter-spacing:0;margin-inline-start:6px}
/* I6: multi-field text inputs each carry a persistent mini-label */
.nce-text-field-wrap{display:flex;flex-direction:column;gap:3px;flex:1;min-width:140px}
.nce-text-field-wrap .nce-text-input{width:100%!important;flex:none;min-width:0}
.nce-text-mini-label{font-size:10.5px;color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* screen-reader live region (keyboard placement announcements) */
.nce-sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* X1: completed-design warning strip */
.nce-finished-note{margin:0;padding:9px 22px;background:#fff8ef;border-bottom:1px solid #f0e2cc;
	font-size:13px;color:#7a5320;text-align:center}

/* room view — the collage framed on a wall, true scale (2px = 1cm) */
.nce-room{position:relative;height:232px;overflow:hidden;margin:12px 0 0;
	border:1px solid var(--nce-line-soft);border-radius:var(--nce-radius);
	background:linear-gradient(#f4f2ee 0 78%,#dcd6cc 78% 79%,#eee9e1 79% 100%)}
.nce-room-frame{position:absolute;top:26px;left:50%;transform:translateX(-50%);background:#fff;padding:5px;
	border:3px solid #191919;box-shadow:0 12px 24px rgba(0,0,0,.22)}
.nce-room-frame img{display:block;width:100%;height:100%;object-fit:cover}
.nce-room-furniture{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
	width:320px;height:40px;background:#d9d3ca;border-radius:3px 3px 0 0}
.nce-room-furniture::before,.nce-room-furniture::after{content:'';position:absolute;bottom:-11px;width:8px;height:11px;background:#c6bfb2}
.nce-room-furniture::before{right:16px}
.nce-room-furniture::after{left:16px}
.nce-room-caption{font-size:12px;color:#767676;text-align:center;margin:6px 0 0}
/* scoped + !important: the theme's button styles won on focus and painted it
   black-on-black (C3) — this button lives inside the PORTALED dialog */
.nce-dialog .nce-room-toggle,
.nce-dialog .nce-room-toggle:hover,
.nce-dialog .nce-room-toggle:focus,
.nce-dialog .nce-room-toggle:active{display:block;margin:6px auto 0;background:none!important;
	border:0!important;font-size:12.5px;color:#767676!important;box-shadow:none!important;
	text-decoration:underline;cursor:pointer;font-family:inherit;padding:0;min-height:0;line-height:1.4}
.nce-dialog .nce-room-toggle:hover,
.nce-dialog .nce-room-toggle:focus{color:#000!important}

/* stage — calm neutral surface, the collage reads as a sheet on a table */
.nce-stage-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
	background:#f2f1ef;min-width:0;overflow:auto}
/* auto margins (not align-center) keep the collage top reachable when it overflows */
.nce-stage{display:flex;width:100%;height:100%;padding:26px;outline:none}
.nce-svg{display:block;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;
	box-shadow:0 6px 28px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.08);background:#fff}
.nce-slot-hit{stroke:transparent;stroke-width:1.5;cursor:pointer;transition:stroke var(--nce-dur) var(--nce-ease)}
.nce-slot-hit:hover{stroke:#999;stroke-dasharray:4 3}
.nce-slot-hit.nce-selected{stroke:#000;stroke-dasharray:none;stroke-width:2}
.nce-slot-num{fill:#c9c9c9;font-family:inherit;pointer-events:none;user-select:none;opacity:.5;transition:opacity var(--nce-dur) var(--nce-ease)}
.nce-svg:hover .nce-slot-num{opacity:1}
.nce-slot-warn{fill:#c05500;pointer-events:auto;cursor:help}
.nce-slot-flash{stroke:#c05500 !important;stroke-width:3 !important;stroke-dasharray:none !important}
.nce-personal-text{cursor:move}
.nce-text-flash{animation:nce-text-pulse 1.1s ease 1}
@keyframes nce-text-pulse{0%,100%{opacity:1}30%{opacity:.25}60%{opacity:1}}
.nce-error{padding:40px;text-align:center;color:#a00;font-size:15px}

/* floating slot tools */
.nce-slot-tools{position:absolute;display:flex;gap:4px;background:#000;padding:4px;border-radius:var(--nce-radius-lg);z-index:5;
	box-shadow:0 2px 10px rgba(0,0,0,.25)}
.nce-tool{width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:16px;cursor:pointer;border-radius:var(--nce-radius)}
.nce-tool:hover{background:#333}

/* bottom bar: labeled control groups — every field says what it is, and the
   widths are hardened against theme CSS (the theme stretched inputs to 1400px) */
.nce-bottombar{flex:0 0 auto;border-top:1px solid var(--nce-light);background:#fff;padding:12px 24px 16px}

/* product options INSIDE the editor: frame / style / inner frame / size */
.nce-options-row{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;
	padding:0 0 12px;margin:0 0 12px;border-bottom:1px dashed var(--nce-line-soft)}
.nce-options-row .nce-ctl{gap:7px}
.nce-opt-group{display:flex;gap:8px;align-items:center;min-height:36px;flex-wrap:wrap}
.nce-overlay .nce-opt-chip{min-height:34px;padding:0 14px;border:1px solid var(--nce-line);background:#fff;
	color:var(--nce-ink);border-radius:999px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1;
	transition:background var(--nce-dur) var(--nce-ease),color var(--nce-dur) var(--nce-ease),
		border-color var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-opt-chip:hover{border-color:var(--nce-ink)}
.nce-overlay .nce-opt-chip.nce-opt-active{background:var(--nce-ink);border-color:var(--nce-ink);color:#fff}
.nce-overlay .nce-opt-swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;
	box-shadow:0 0 0 1px var(--nce-line);cursor:pointer;padding:0;flex:0 0 30px;
	transition:box-shadow var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-opt-swatch:hover{box-shadow:0 0 0 2px var(--nce-ink)}
.nce-overlay .nce-opt-swatch.nce-opt-active{box-shadow:0 0 0 2px var(--nce-ink)}
.nce-overlay .nce-opt-swatch-light{box-shadow:0 0 0 1px #cfcfcf}
/* an unchosen option keeps a gentle amber cue on its label (real element, survives design restore) */
.nce-options-row .nce-ctl.nce-ctl-missing .nce-ctl-label{color:#b45f06}
.nce-opt-need{color:#b45f06;font-weight:600}
@keyframes nce-opts-flash{0%,100%{background:transparent}40%{background:#fff6ea}}
.nce-options-row.nce-flash{animation:nce-opts-flash .9s ease 2;border-radius:var(--nce-radius)}
.nce-text-row{display:flex;gap:24px;align-items:flex-end;flex-wrap:nowrap;overflow-x:auto}
.nce-ctl{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.nce-ctl-grow{flex:1 1 auto;min-width:min-content}
.nce-ctl-label{font-size:11px;letter-spacing:.06em;color:#767676;font-weight:600;white-space:nowrap}
.nce-text-fields{display:flex;gap:8px}
/* N5: ONE control height (45px, like every field on the site), #d2d2d2 border */
.nce-overlay .nce-text-input{flex:1;min-width:140px;width:auto!important;height:var(--nce-control-h);
	border:1px solid var(--nce-line);padding:0 14px;font-size:15px;border-radius:var(--nce-radius);
	font-family:inherit;background:#fff;transition:border-color var(--nce-dur) var(--nce-ease)}
.nce-text-input:focus,.nce-text-active{outline:none;border-color:var(--nce-ink);box-shadow:none}
.nce-overlay select.nce-text-font{width:160px!important;max-width:160px!important;height:var(--nce-control-h);
	border:1px solid var(--nce-line);padding:0 10px;font-size:14px;border-radius:var(--nce-radius);background:#fff;
	transition:border-color var(--nce-dur) var(--nce-ease)}
.nce-overlay select.nce-text-font:focus{outline:none;border-color:var(--nce-ink)}
.nce-overlay input.nce-text-size{width:68px!important;max-width:68px!important;height:var(--nce-control-h);
	border:1px solid var(--nce-line);padding:0 8px;font-size:14px;border-radius:var(--nce-radius);text-align:center;
	transition:border-color var(--nce-dur) var(--nce-ease)}
.nce-overlay input.nce-text-size:focus{outline:none;border-color:var(--nce-ink)}
.nce-text-colors{display:flex;gap:8px;align-items:center;height:var(--nce-control-h)}
.nce-color{width:26px;height:26px;border:2px solid transparent;border-radius:50%;cursor:pointer;padding:0;flex:0 0 26px}
.nce-color-active{border-color:#000;outline:2px solid #fff;outline-offset:-4px}
.nce-help{margin:8px 0 0;font-size:12.5px;color:#767676}
.nce-help:empty{display:none}

/* photo style: black & white product option */
.nce-photo-layer.nce-bw{filter:grayscale(1)}

/* progress */
.nce-progress{position:absolute;left:0;right:0;bottom:0;height:34px;background:var(--nce-bg);
	border-top:1px solid var(--nce-light);overflow:hidden;z-index:6}
.nce-progress-bar{position:absolute;inset-inline-end:0;top:0;bottom:0;background:#000;width:0;transition:width .3s}
.nce-progress-label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
	height:100%;font-size:12px;color:#fff;mix-blend-mode:difference}

/* readonly + disabled states */
.nce-disabled{opacity:.45;pointer-events:none}
.nce-readonly-note{margin:0;padding:10px 22px;background:var(--nce-bg);border-bottom:1px solid var(--nce-light);
	font-size:13.5px;color:var(--nce-ink);text-align:center}
.nce-finish-incomplete{opacity:.75}

/* stage empty state — a bottom strip, so the template shape stays the hero */
.nce-stage-empty{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;
	gap:10px;text-align:center;padding:26px 20px 22px;z-index:4;
	background:linear-gradient(to top, rgba(242,241,239,.97) 62%, rgba(242,241,239,0))}
.nce-stage-empty p{margin:0;font-size:15px;color:#333;line-height:1.6}
.nce-stage-empty p strong{font-size:17px}

/* slot hover hint (one-time) */
.nce-slot-hint{position:absolute;background:#000;color:#fff;font-size:12.5px;padding:8px 14px;border-radius:var(--nce-radius-lg);
	z-index:6;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}

/* dialog — PORTALED to <body> separately from the overlay, so it also serves
   confirms fired from the product page while the editor is closed */
.nce-dialog{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.45);direction:rtl;color:#000}
.nce-dialog *{box-sizing:border-box}
.nce-dialog[hidden]{display:none!important}
/* children too — themes love img{display:block!important}, which defeats [hidden]
   and stacked the room view UNDER the file view instead of replacing it */
.nce-dialog [hidden]{display:none!important}
.nce-dialog-box{background:#fff;max-width:520px;width:calc(100% - 48px);max-height:84vh;overflow:auto;
	padding:26px 28px;border-radius:var(--nce-radius-lg);box-shadow:0 10px 40px rgba(0,0,0,.28);text-align:center}
.nce-dialog-title{margin:0 0 10px;font-size:19px;font-weight:600;color:#000}
.nce-dialog-body{font-size:14.5px;color:#444;line-height:1.7;text-align:right}
.nce-dialog-body > p:only-child{text-align:center} /* one-liners read better centered */
.nce-dialog-body img.nce-dialog-preview{max-width:100%;max-height:44vh;margin:12px auto;display:block;
	border:1px solid var(--nce-line-soft);border-radius:var(--nce-radius);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.10)}
.nce-dialog-body .nce-dialog-meta{margin:0 0 6px;font-size:12.5px;color:#767676;text-align:center}
.nce-dialog-body .nce-dialog-viewfull{display:block;text-align:center;font-size:12.5px;color:#767676;
	text-decoration:underline;margin:-4px 0 6px}
.nce-dialog-body .nce-dialog-viewfull:hover{color:#000}
.nce-dialog-body ul{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px}
.nce-dialog-body .nce-dialog-warn{color:#b45f06}
.nce-dialog-body .nce-dialog-ok{color:#000} /* B&W system: color is reserved for warnings */
/* sticky: the buttons never leave the screen, whatever the dialog's height —
   the add-to-cart moment must not live below the fold (C2) */
.nce-dialog-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;
	position:sticky;bottom:0;background:#fff;padding:10px 0 2px;z-index:1;
	box-shadow:0 -12px 14px -8px rgba(255,255,255,.95)}
.nce-dialog-actions .nce-btn{min-width:140px}

/* first-run intro */
.nce-firstrun{position:absolute;inset:0;z-index:19;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.45)}
.nce-firstrun-box{background:#fff;max-width:460px;width:calc(100% - 48px);padding:28px 30px;border-radius:var(--nce-radius-lg);
	box-shadow:0 10px 40px rgba(0,0,0,.28)}
.nce-firstrun-box h3{margin:0 0 14px;font-size:20px}
.nce-firstrun-box ol{list-style:none;margin:0;padding:0}
.nce-firstrun-box li{display:flex;gap:12px;align-items:baseline;margin:0 0 10px;font-size:14.5px;color:#333;line-height:1.6}
.nce-firstrun-box li b{flex:0 0 22px;height:22px;background:#000;color:#fff;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.nce-firstrun-note{font-size:13px;color:#767676;margin:8px 0 16px}
.nce-firstrun-box .nce-btn{width:100%}

/* launcher: numbered steps + meta + restart */
.nce-launcher-steps{list-style:none;display:flex;gap:12px;margin:0 0 12px;padding:0;flex-wrap:wrap}
.nce-launcher-steps li{display:flex;gap:8px;align-items:flex-start;flex:1 1 0;min-width:108px}
.nce-launcher-steps b{flex:0 0 22px;height:22px;background:#000;color:#fff;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.nce-launcher-steps span{font-size:12.5px;color:var(--nce-gray);line-height:1.5}
.nce-launcher-steps strong{color:#000;font-size:13px}
.nce-launcher-meta{margin:0 0 14px;font-size:13px;color:#767676}
.nce-launcher-actions{display:flex;gap:14px;align-items:center}
.nce-btn-link{background:none;border:none;padding:0;font-size:13px;color:#767676;cursor:pointer;text-decoration:underline}
.nce-btn-link:hover{color:#000}

/* tray thumbnail low-res badge */
.nce-thumb-warn{position:absolute;bottom:2px;left:2px;background:#c05500;color:#fff;font-size:10px;
	width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%}

/* danger secondary (clear all) — the site's single accent red */
.nce-btn-danger{border-color:var(--nce-line);color:var(--nce-danger)}
.nce-btn-danger:hover{background:var(--nce-danger);border-color:var(--nce-danger);color:#fff}

/* single-slot products need no batch tools */
.nce-single-slot .nce-tray-actions{display:none}

/* accessibility: visible focus ring + reduced motion */
.nce-overlay :focus-visible,.nce-launcher :focus-visible{outline:2px solid #000;outline-offset:2px}
.nce-help{color:#767676} /* AA contrast */
@media (prefers-reduced-motion:reduce){
	.nce-overlay *,.nce-launcher *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- auth modal (guests) — PORTALED to <body> ---------- */
.nce-auth{--nce-ink:#000;--nce-gray:#666;--nce-gray-light:#ababab;--nce-line:#d2d2d2;--nce-line-soft:#ededed;--nce-light:#ededed;--nce-bg:#f8f8f8;--nce-danger:#DA3F3F;
	--nce-radius:5px;--nce-radius-lg:8px;--nce-control-h:45px;
	--nce-ease:cubic-bezier(.645,.045,.355,1);--nce-dur:.25s;
	position:fixed;inset:0;z-index:2147483400;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.5);direction:rtl;color:#000}
.nce-auth *{box-sizing:border-box}
.nce-auth[hidden]{display:none!important}
.nce-auth-box{position:relative;background:#fff;width:min(420px,calc(100% - 40px));
	max-height:min(92vh,700px);overflow:auto;overscroll-behavior:contain;
	padding:26px 30px 18px;border-radius:var(--nce-radius-lg);box-shadow:0 16px 60px rgba(0,0,0,.32)}
.nce-auth-close{position:absolute;top:12px;left:12px;width:36px;height:36px;border:0;background:transparent;
	color:#999;font-size:15px;cursor:pointer;border-radius:var(--nce-radius)}
.nce-auth-close:hover{color:#000}
.nce-auth-head h3{margin:0 0 5px;font-size:20px;font-weight:600;letter-spacing:.01em}
.nce-auth-head p{margin:0 0 14px;font-size:13px;color:#666;line-height:1.55}
.nce-auth-tabs{display:flex;border-bottom:1px solid var(--nce-light);margin-bottom:16px}
.nce-auth-tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:10px 4px;
	font-size:14px;color:#888;cursor:pointer;font-family:inherit;margin-bottom:-1px}
.nce-auth-tab-active{color:#000;font-weight:600;border-bottom-color:#000}
/* N4: grid, so a pair of injected name fields (.form-row-first/last) sits side by
   side instead of float-stacking with dead space; everything else spans full width */
.nce-auth-pane{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.nce-auth-pane > *{grid-column:1/-1;min-width:0}
.nce-auth-pane > .form-row-first,.nce-auth-pane > .form-row-last{grid-column:span 1;
	float:none!important;width:100%!important;margin:0!important}
.nce-auth-pane[hidden]{display:none!important}
/* N5: same 45px control as everywhere else (the theme inflated these to 59px) */
.nce-auth-pane input:not([type=hidden]):not([type=checkbox]){width:100%!important;max-width:none!important;
	height:var(--nce-control-h)!important;border:1px solid var(--nce-line);padding:0 13px;font-size:15px;
	border-radius:var(--nce-radius);font-family:inherit;margin:0!important;background:#fff;min-height:0;
	transition:border-color var(--nce-dur) var(--nce-ease)}
.nce-auth-pane input:focus{outline:none;border-color:#000;box-shadow:none}
.nce-auth-pane label{font-size:12.5px;color:#666;margin:0 0 4px;display:block}
.nce-auth-field{display:block}
.nce-auth-pane p{margin:0;font-size:12.5px;color:#767676;line-height:1.6}
.nce-auth-pane .required{color:#767676;text-decoration:none;margin-inline-start:1px}
/* submit stays visible even when injected extra fields make the pane taller than the screen */
.nce-auth-submit{width:100%;padding:12px;margin-top:2px;position:sticky;bottom:0;z-index:1;
	box-shadow:0 -10px 14px -8px rgba(255,255,255,.95),0 0 0 6px #fff}
.nce-auth-note{font-size:12.5px;color:#767676}
.nce-auth-privacy{font-size:11.5px!important;color:#9a9a9a!important}
.nce-auth-privacy a{color:#767676;text-decoration:underline}
.nce-auth-lost{font-size:12.5px;color:#767676;text-decoration:underline;text-align:center}
.nce-auth-lost:hover{color:#000}

/* narrow screens (small laptops) */
@media (max-width:900px){
	.nce-tray{flex-basis:190px;padding:12px}
	.nce-tray-grid{grid-template-columns:repeat(2,1fr)}
	.nce-topbar{padding:0 12px;gap:8px}
}
@media (max-width:820px){
	.nce-topbar-title{display:none} /* the counter keeps identifying the product state */
}

/* ================================================================
   1.11.0 REDESIGN — one sidebar, full-height stage
   The bottom bar is gone: product options and personal text move
   into the tray, which becomes the single control rail. The stage
   takes every remaining pixel — the collage is the hero.
   ================================================================ */

/* ---------- stepper hardening (live-site fix) ----------
   Themes style bare <ol>/<li>/<i> (margins, ::before bullets,
   line-height, vertical-align) and knocked step "1" out of line.
   Everything the stepper needs is pinned under .nce-overlay. */
.nce-overlay ol.nce-steps{display:flex;align-items:center;flex-wrap:nowrap;gap:18px;
	margin:0!important;padding:0!important;list-style:none!important;
	line-height:1.2;text-indent:0}
.nce-overlay .nce-steps li{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;
	margin:0!important;padding:0!important;float:none;line-height:1.2;
	list-style:none!important;text-indent:0;background:none}
.nce-overlay .nce-steps li::before,
.nce-overlay .nce-steps li::after{content:none!important;display:none!important}
.nce-overlay .nce-steps li i{font-style:normal;margin:0;padding:0;line-height:1;
	vertical-align:middle;flex:0 0 18px;width:18px;height:18px;box-sizing:border-box}

/* ---------- the bottom bar is retired (element stays in the DOM) ---------- */
.nce-overlay .nce-bottombar{display:none}

/* ---------- sidebar: one scrollable rail of titled sections ----------
   The WHOLE sidebar scrolls, and the thumbnail grid is capped
   (viewport-aware) with its own scroll — so options and text are always
   reachable even with 150 uploaded photos. */
.nce-overlay .nce-tray{flex:0 0 312px;gap:0;padding:0;overflow-y:auto;overflow-x:hidden;
	overscroll-behavior:contain}
.nce-side-sec{position:relative;display:flex;flex-direction:column;gap:10px;
	padding:14px 16px 18px;flex:0 0 auto}
.nce-side-sec + .nce-side-sec{border-top:1px solid var(--nce-line-soft)}

/* section headers: quiet, letterspaced, consistent with .nce-ctl-label.
   .nce-tray-head doubles as the photos-section header (JS keeps its count);
   the text section's header is the JS-emitted "טקסט אישי" label itself. */
.nce-overlay .nce-side-title,
.nce-overlay .nce-tray-head,
.nce-overlay .nce-sec-text .nce-ctl-grow > .nce-ctl-label{position:relative;margin:0;padding:0;
	font-size:11.5px;font-weight:600;letter-spacing:.09em;color:#767676;line-height:1.4;
	font-family:inherit;text-transform:none;border:0;background:none} /* h3 lives here — themes style bare h3 */
/* active-step cue: ink header + 2px ink bar flush with the sidebar edge.
   JS toggles .nce-sec-active from refreshSteps(). */
.nce-side-sec.nce-sec-active > .nce-side-title,
.nce-side-sec.nce-sec-active > .nce-tray-head,
.nce-sec-text.nce-sec-active .nce-ctl-grow > .nce-ctl-label{color:var(--nce-ink)}
.nce-side-sec.nce-sec-active > .nce-side-title::before,
.nce-side-sec.nce-sec-active > .nce-tray-head::before,
.nce-sec-text.nce-sec-active .nce-ctl-grow > .nce-ctl-label::before{content:'';
	position:absolute;inset-inline-start:-16px;top:-1px;bottom:-1px;width:2px;
	background:var(--nce-ink)}

/* photos section: header → upload → batch actions → capped grid.
   640px is reserved for the rest of the rail so a heavy set (4 option
   groups + multi-field text) still fits without sidebar scroll at 900h. */
.nce-overlay .nce-tray-grid{flex:0 0 auto;max-height:clamp(150px,100vh - 640px,44vh);
	overflow-y:auto;grid-template-columns:repeat(4,1fr);overscroll-behavior:contain}

/* options section: the JS-built .nce-options-row stacks its groups;
   its per-option labels step down one level below the section header */
.nce-overlay .nce-options-row{flex-direction:column;gap:14px;padding:0;margin:0;border-bottom:0}
.nce-overlay .nce-options-row .nce-ctl-label{font-size:10.5px;font-weight:500;
	letter-spacing:.04em;color:#9a9a9a}
.nce-overlay .nce-options-row .nce-ctl.nce-ctl-missing .nce-ctl-label{color:#b45f06}
.nce-overlay .nce-sec-text .nce-text-row .nce-ctl:not(.nce-ctl-grow) .nce-ctl-label{
	font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#9a9a9a}

/* text section: fields full-width, then font/size/color share one compact row */
.nce-overlay .nce-text-row{flex-wrap:wrap;gap:12px 10px;align-items:flex-end;overflow:visible}
.nce-overlay .nce-text-row .nce-ctl-grow{flex:1 1 100%;min-width:0}
.nce-overlay .nce-sec-text .nce-text-fields{flex-direction:column;gap:8px}
/* flex:1 came from the horizontal bar layout — in a column it eats the height */
.nce-overlay .nce-sec-text .nce-text-input{flex:none;min-width:0;width:100%!important;
	height:var(--nce-control-h)}
.nce-overlay .nce-text-row .nce-ctl-font{flex:1 1 auto;min-width:0}
.nce-overlay .nce-sec-text select.nce-text-font{width:100%!important;max-width:none!important;min-width:0}
.nce-overlay .nce-sec-text input.nce-text-size{width:56px!important;max-width:56px!important}
.nce-overlay .nce-sec-text .nce-text-colors{gap:7px}

/* ---------- contextual help: floating pill over the stage ---------- */
.nce-overlay .nce-stage-wrap .nce-help{position:absolute;bottom:16px;left:50%;
	transform:translateX(-50%);margin:0;z-index:5;pointer-events:none;
	max-width:min(82%,600px);padding:8px 20px;text-align:center;
	background:rgba(255,255,255,.94);border:1px solid var(--nce-line-soft);
	border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.08);
	font-size:12.5px;color:#555;line-height:1.5}

/* ---------- narrow desktops ---------- */
@media (max-width:1100px){
	.nce-overlay .nce-tray{flex-basis:264px}
	.nce-side-sec{padding:12px 14px 14px;gap:8px}
	.nce-side-sec.nce-sec-active > .nce-side-title::before,
	.nce-side-sec.nce-sec-active > .nce-tray-head::before,
	.nce-sec-text.nce-sec-active .nce-ctl-grow > .nce-ctl-label::before{inset-inline-start:-14px}
	.nce-overlay .nce-tray-grid{grid-template-columns:repeat(3,1fr);
		max-height:clamp(112px,100vh - 640px,40vh)}
	/* narrow rail: the font select takes its own line, size+colors share the next */
	.nce-overlay .nce-text-row .nce-ctl-font{flex:1 1 100%}
}
@media (max-width:900px){
	.nce-overlay .nce-tray{flex-basis:240px;padding:0}
	.nce-side-sec{padding:12px 12px 14px}
	.nce-side-sec.nce-sec-active > .nce-side-title::before,
	.nce-side-sec.nce-sec-active > .nce-tray-head::before,
	.nce-sec-text.nce-sec-active .nce-ctl-grow > .nce-ctl-label::before{inset-inline-start:-12px}
	.nce-overlay .nce-tray-grid{grid-template-columns:repeat(3,1fr)}
}

/* ================================================================
   1.12.0 — VIEW ZOOM + rail polish
   ================================================================ */

/* the stage scrolls when the paper is zoomed past the window */
.nce-overlay .nce-stage{overflow:auto;overscroll-behavior:contain}
/* the svg is a flex item of .nce-stage — without this, flex-shrink:1 clamps the
   zoomed inline width back to the stage width (the drawing letterboxes and can
   never overflow/pan horizontally); at fit, max-width/max-height still cap it */
.nce-overlay .nce-stage .nce-svg{flex:none}

/* floating zoom cluster: white pill in the stage's free corner (inline-end,
   away from the sidebar), same language as the help pill */
.nce-zoom-tools{position:absolute;bottom:16px;inset-inline-end:16px;display:flex;gap:2px;
	align-items:center;background:rgba(255,255,255,.94);border:1px solid var(--nce-line-soft);
	border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:3px;z-index:6}
.nce-overlay .nce-ztool{min-width:32px;height:32px;border:0!important;background:transparent!important;
	color:var(--nce-ink)!important;font-size:15px;cursor:pointer;border-radius:999px;line-height:1;
	padding:0 8px;transition:background var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-ztool:hover{background:var(--nce-bg)!important}
.nce-overlay .nce-ztool:disabled{opacity:.35;cursor:default}
.nce-overlay .nce-ztool:disabled:hover{background:transparent!important}
.nce-overlay .nce-zoom-level{font-size:12px;font-weight:600;min-width:46px;direction:ltr}

/* the options section signals "a choice is still needed" in the amber of
   "· לבחירה" — distinct from the ink cue of the CURRENT step, so two black
   bars can never show at once */
.nce-side-sec.nce-sec-options.nce-sec-active > .nce-side-title{color:#b45f06}
.nce-side-sec.nce-sec-options.nce-sec-active > .nce-side-title::before{background:#b45f06}

/* ================================================================
   1.13.0 — wheel = view zoom, drag = pan
   ================================================================ */
/* the enlarged canvas is grabbable: grab on the background, grabbing
   while panning; over a slot the drag still moves the PHOTO, so the
   slot keeps a move cursor when the pan affordance is on */
.nce-overlay .nce-stage.nce-can-pan{cursor:grab}
.nce-overlay .nce-stage.nce-panning{cursor:grabbing}
.nce-overlay .nce-stage.nce-panning *{cursor:grabbing!important}
.nce-overlay .nce-stage.nce-can-pan .nce-slot-hit{cursor:move}

/* ================================================================
   1.14.0 — empty-stage cleanliness
   ================================================================ */
/* while the "ככה ייראה הקולאז׳ שלכם" empty-state (with its own upload
   button) is on the stage, the floating tip pill and the zoom cluster
   step aside — the pill was landing ON the button */
.nce-stage-empty:not([hidden]) ~ .nce-help{display:none}
.nce-stage-empty:not([hidden]) ~ .nce-zoom-tools{display:none}

/* ================================================================
   1.14.0 — STEPPER 2.0 (replaces "progress steps")
   A gallery rail: circular stations joined by a hairline track that
   fills with ink as the work advances (RTL: right → left).
   --nce-seg (0..1) on the <ol> drives the live partial fill of the
   segment that leaves the active step (placing progress in step 2).
   Must live AFTER the stepper-hardening block — it relies on cascade
   order to win the node size / gaps the hardening pins.
   ================================================================ */
.nce-overlay ol.nce-steps{gap:10px;font-size:12.5px;color:var(--nce-gray-light);white-space:nowrap}
.nce-overlay .nce-steps li{gap:8px;color:inherit}

/* stations */
.nce-overlay .nce-steps li i{position:relative;flex:0 0 22px;width:22px;height:22px;
	display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
	border:1px solid var(--nce-line);background:#fff;color:var(--nce-gray-light);
	font-style:normal;font-family:Rubik,inherit;font-size:11px;font-weight:500;line-height:1;
	transition:background var(--nce-dur) var(--nce-ease),border-color var(--nce-dur) var(--nce-ease),
		color var(--nce-dur) var(--nce-ease),box-shadow var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-steps li.nce-step-active i,
.nce-overlay .nce-steps li.nce-step-done i{background:var(--nce-ink);border-color:var(--nce-ink);color:#fff}
/* the active station wears a soft halo — quiet emphasis, no new color */
.nce-overlay .nce-steps li.nce-step-active i{box-shadow:0 0 0 3px var(--nce-line-soft)}
/* done: the number yields to a check (inner pseudo — li pseudos are hardened away) */
.nce-overlay .nce-steps li.nce-step-done i{color:transparent}
.nce-overlay .nce-steps li.nce-step-done i::after{content:"✓";position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:500}

/* labels */
.nce-overlay .nce-steps .nce-step-label{transition:color var(--nce-dur) var(--nce-ease)}
.nce-overlay .nce-steps li.nce-step-done{color:var(--nce-gray)}
.nce-overlay .nce-steps li.nce-step-active{color:var(--nce-ink);font-weight:600}

/* track: a hairline rail between stations that fills with ink.
   .nce-seg lives INSIDE each li after the first (hardening kills li pseudos).
   Fill anchors at inline-start (RTL: the right edge) so ink flows right → left. */
.nce-overlay .nce-steps .nce-seg{position:relative;flex:0 0 34px;height:2px;margin:0;padding:0;
	border-radius:1px;background:var(--nce-line);overflow:hidden}
.nce-overlay .nce-steps .nce-seg-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;
	border-radius:1px;background:var(--nce-ink);
	transition:width .45s var(--nce-ease)}
/* a segment leading into a reached step is full */
.nce-overlay .nce-steps li.nce-step-done .nce-seg-fill,
.nce-overlay .nce-steps li.nce-step-active .nce-seg-fill{width:100%}
/* the segment LEAVING the active step fills live: --nce-seg = fraction done (step 2: placed/total) */
.nce-overlay .nce-steps li.nce-step-active + li .nce-seg-fill{width:calc(var(--nce-seg,0)*100%)}

/* save state: a quiet caption under the rail */
.nce-overlay .nce-save-state{font-size:11px;letter-spacing:.2px;color:var(--nce-gray-light);min-height:13px;
	transition:color var(--nce-dur) var(--nce-ease)}

/* narrow desktops: stations + track stay, words retire except the active one
   (the live count rides the active label, so it survives) */
@media (max-width:1100px){
	.nce-overlay ol.nce-steps{gap:7px}
	.nce-overlay .nce-steps li{gap:5px}
	.nce-overlay .nce-steps li i{flex-basis:20px;width:20px;height:20px;font-size:10.5px}
	.nce-overlay .nce-steps li.nce-step-done i::after{font-size:9.5px}
	.nce-overlay .nce-steps .nce-seg{flex-basis:14px}
	.nce-overlay .nce-steps li:not(.nce-step-active) .nce-step-label{display:none}
	.nce-overlay .nce-steps li.nce-step-active{font-size:12px}
}

/* ================================================================
   1.15.0 — pre-launch audit items
   ================================================================ */
/* live text-overflow cue: the field turns red with a message the moment a
   line still escapes the paper at the minimum size */
.nce-overlay .nce-text-input.nce-text-overflow{border-color:var(--nce-danger)!important;
	box-shadow:0 0 0 1px var(--nce-danger)}
.nce-overlay .nce-text-overflow-msg{display:block;font-size:11.5px;line-height:1.4;color:var(--nce-danger);
	margin:-2px 0 0}
/* keyboard focus on a slot (Tab) — visible ring, same ink as the selection */
.nce-overlay .nce-slot-hit:focus{outline:none}
.nce-overlay .nce-slot-hit:focus-visible{stroke:var(--nce-ink);stroke-width:3;stroke-dasharray:6 4}
/* [nce_specs] — the product's true print facts, in the site's quiet list voice */
.nce-specs{margin:0 0 16px;padding:0;list-style:none}
.nce-specs li{padding:6px 0;border-bottom:1px solid #ededed;font-size:14.5px;line-height:1.6}
.nce-specs li:last-child{border-bottom:0}

/* ================================================================
   1.16.0 — post-verification polish
   ================================================================ */
/* "skip to the slots": invisible until keyboard focus lands on it */
.nce-overlay .nce-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
	padding:0;border:0;margin:0}
.nce-overlay .nce-skip-slots:focus-visible{position:static;width:auto;height:auto;overflow:visible;clip:auto;
	white-space:nowrap;padding:0 12px;min-height:34px;border:1px solid var(--nce-ink);border-radius:var(--nce-radius);
	background:#fff;color:var(--nce-ink);font-size:13px;cursor:pointer}