/* =====================================================================================================
   Unified Builder — BuilderShell (Phase 1). Scoped to #nb.tb-builder; the old workspace (#nb.nb-v3)
   keeps serving the builders that have not moved yet.
   Small, calm: thin 20 px stroke icons, pill buttons, 44 px touch targets, light dividers instead of
   cards, burgundy for selection and primary actions, gold for secondary accents, no gradients, no
   heavy shadows. Builder UI type: Bricolage Grotesque 400/500/600; Arabic falls back to Alexandria.
   Logical properties throughout, so Arabic mirrors without a second stylesheet.
   ===================================================================================================== */
body.tb-open{overflow:hidden}
body.tb-open .site-header,body.tb-open .site-footer,body.tb-open .announce,body.tb-open .crumbs{display:none}

#nb.tb-builder{
  --tb-canvas:#EEE8E0; --tb-bar:#FBF8F4; --tb-float:rgba(255,255,255,.94); --tb-hover:rgba(107,29,47,.07); --tb-sel:rgba(107,29,47,.1);
  --tb-font:'Bricolage Grotesque','Alexandria',system-ui,sans-serif;
  position:fixed;inset:0;z-index:60;height:100dvh;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "tabs";
  background:var(--tb-canvas);color:var(--ink);font-family:var(--tb-font);font-weight:400;font-size:15px;line-height:1.4;
}
#nb.tb-builder button{font-family:inherit}
#nb.tb-builder svg{flex:0 0 auto}

/* ---------- top bar ---------- */
#nb.tb-builder .tb-top{grid-area:top;z-index:9;display:flex;align-items:center;gap:2px;min-height:56px;padding:4px 8px;background:var(--tb-bar);border-bottom:1px solid var(--line)}
#nb.tb-builder .tb-title{flex:1 1 auto;min-width:0;padding-inline:4px}
#nb.tb-builder .tb-title h1{margin:0;font:600 1rem/1.2 var(--tb-font);color:var(--burg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
#nb.tb-builder .tb-top-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
#nb.tb-builder .tb-icon-btn,#nb.tb-builder .tb-top .nb-shuffle{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:inline-grid;place-items:center;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;box-shadow:none}
#nb.tb-builder .tb-icon-btn:hover,#nb.tb-builder .tb-top .nb-shuffle:hover{background:var(--tb-hover)}
#nb.tb-builder .tb-icon-btn svg,#nb.tb-builder .tb-top .nb-shuffle svg{width:20px;height:20px;stroke-width:1.5}
#nb.tb-builder .tb-top .nb-shuffle{inset:auto;top:auto;z-index:auto;gap:6px;color:#9A6A12;box-shadow:none}
#nb.tb-builder .tb-top .nb-shuffle:hover{background:var(--tb-hover)}
#nb.tb-builder .tb-top .nb-shuffle span{display:none}
html[dir=rtl] #nb.tb-builder #nb-back svg{transform:scaleX(-1)}
#nb.tb-builder .tb-save{min-height:44px;padding:0 16px 0 12px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--burg);color:var(--color-on-primary);font:600 .9rem var(--tb-font);cursor:pointer;box-shadow:none;margin-inline-start:4px}
#nb.tb-builder .tb-save:hover{background:var(--burg2)}
#nb.tb-builder .tb-save svg{width:18px;height:18px}
#nb.tb-builder .tb-save span{display:inline}
#nb.tb-builder .tb-save:disabled{opacity:.6}

/* ---------- the viewport ---------- */
#nb.tb-builder .tb-stage{grid-area:stage;position:relative;min-height:0;overflow:hidden;background:var(--tb-canvas)}
#nb.tb-builder .tb-viewport{position:absolute;inset:0;overflow:hidden;background:var(--tb-canvas);touch-action:none;overscroll-behavior:contain}
#nb.tb-builder .tb-viewport .nb-fit{position:absolute}
#nb.tb-builder .tb-viewport .nb-stage-host{touch-action:none}
#nb.tb-builder .tb-preview{position:absolute;inset:0 0 var(--tb-sheet-h,0px) 0;display:none;background:var(--tb-canvas)}
#nb.tb-builder .tb-preview .nb-preview-host{position:absolute;inset:0;touch-action:none;cursor:grab}
#nb.tb-builder[data-surface=preview] .tb-preview{display:block}
#nb.tb-builder[data-surface=preview] .tb-viewport{visibility:hidden}
#nb.tb-builder .nb-stage-host.nb-drop-over{outline:2px dashed rgba(107,29,47,.45);outline-offset:-2px}

/* corners: the toolbar at the start, the price at the end — the same place in every builder */
#nb.tb-builder .tb-corner{position:absolute;top:10px;z-index:5}
#nb.tb-builder .tb-corner-start{inset-inline-start:10px}
#nb.tb-builder .tb-corner-end{inset-inline-end:10px}

/* ViewportToolbar */
/* the 2D/3D switch with the surface's own tools in a row beside it; undo · redo · fit in a column below */
#nb.tb-builder .tb-vt{display:grid;grid-template-columns:auto auto;justify-items:center;align-items:center;gap:6px}
#nb.tb-builder .tb-vt-group{display:flex;flex-direction:column;align-items:center;gap:0;padding:1px;background:var(--tb-float);border:1px solid var(--line);border-radius:999px}
#nb.tb-builder .tb-vt-group.tb-vt-surface{grid-column:1;grid-row:1;padding:0;background:none;border:0}
#nb.tb-builder .tb-vt-main{grid-column:1;grid-row:2}
#nb.tb-builder .tb-vt-mode{grid-column:2;grid-row:1;flex-direction:row;justify-self:start}
#nb.tb-builder[data-surface=design] .tb-vt [data-only=preview],#nb.tb-builder[data-surface=preview] .tb-vt [data-only=design]{display:none}
#nb.tb-builder .tb-vt-btn{position:relative;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer}
#nb.tb-builder .tb-vt-btn svg{width:20px;height:20px;stroke-width:1.5}
#nb.tb-builder .tb-vt-btn:hover{background:var(--tb-hover)}
#nb.tb-builder .tb-vt-btn[aria-pressed=true]{background:var(--tb-sel);color:var(--burg)}
#nb.tb-builder .tb-vt-btn:disabled{opacity:.32;cursor:default;background:none}
#nb.tb-builder .tb-surface{width:48px;height:48px;font:600 .9rem/1 var(--tb-font);letter-spacing:.02em;background:var(--tb-float);border:1px solid var(--line);color:var(--burg)}
#nb.tb-builder .tb-surface.is-3d{background:var(--burg);border-color:var(--burg);color:var(--color-on-primary)}
#nb.tb-builder .tb-surface.is-3d:hover{background:var(--burg2)}

/* tooltips: hover (mouse), keyboard focus, a long press on touch */
#nb.tb-builder [data-tip]::after{content:attr(data-tip);position:absolute;z-index:20;pointer-events:none;opacity:0;white-space:nowrap;padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff;font:500 .74rem/1.2 var(--tb-font);transition:opacity .12s}
#nb.tb-builder .tb-vt [data-tip]::after{top:50%;inset-inline-start:calc(100% + 8px);transform:translateY(-50%)}
#nb.tb-builder .tb-top [data-tip]::after,#nb.tb-builder .tb-panel-head [data-tip]::after{top:calc(100% + 4px);inset-inline-end:0}
#nb.tb-builder .tb-selbar [data-tip]::after{bottom:calc(100% + 6px);inset-inline-start:50%;transform:translateX(-50%)}
html[dir=rtl] #nb.tb-builder .tb-selbar [data-tip]::after{transform:translateX(50%)}
@media (hover:hover){#nb.tb-builder [data-tip]:hover::after{opacity:1}}
#nb.tb-builder [data-tip]:focus-visible::after,#nb.tb-builder [data-tip].tip-on::after{opacity:1}

/* PriceBadge */
#nb.tb-builder .tb-price{display:grid;justify-items:end;gap:0;min-height:44px;min-width:72px;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--tb-float);color:var(--ink);cursor:pointer;text-align:end}
#nb.tb-builder .tb-price-label{font:500 .66rem/1.1 var(--tb-font);color:var(--muted);letter-spacing:.04em}
#nb.tb-builder .tb-price-value{font:600 1.02rem/1.2 var(--tb-font);color:var(--burg);font-variant-numeric:tabular-nums}
#nb.tb-builder .tb-price[data-known=false] .tb-price-value{color:var(--muted)}
#nb.tb-builder .tb-price.tick{animation:tb-tick .42s ease-out}
@keyframes tb-tick{40%{border-color:var(--gold)}}
@media (prefers-reduced-motion:reduce){#nb.tb-builder .tb-price.tick{animation:none}}

/* bottom-start: the surface badge and the live size */
#nb.tb-builder .tb-foot-start{position:absolute;bottom:calc(var(--tb-sheet-h,0px) + 10px);inset-inline-start:10px;z-index:4;display:flex;align-items:center;gap:8px;pointer-events:none}
#nb.tb-builder .tb-mode-badge{padding:4px 10px;border-radius:999px;background:var(--tb-float);border:1px solid var(--line);font:500 .72rem/1.2 var(--tb-font);color:var(--muted)}
#nb.tb-builder .tb-dims{font:500 .72rem/1.2 var(--tb-font);color:var(--muted);white-space:nowrap}
#nb.tb-builder .tb-dims b{font-weight:500}
#nb.tb-builder .tb-dims small{display:none}
#nb.tb-builder .tb-dims[hidden],#nb.tb-builder .tb-dims:empty{display:none}

/* the note and the selection bar sit above the open panel */
#nb.tb-builder .tb-note{position:absolute;inset-inline:12px;top:auto;bottom:calc(var(--tb-sheet-h,0px) + 64px);z-index:4;margin:0 auto;width:max-content;max-width:calc(100% - 24px);padding:6px 12px;border-radius:12px;background:var(--tb-float);border:1px solid var(--line);font-size:.78rem;color:var(--ink);text-align:center}
#nb.tb-builder .tb-note[hidden]{display:none}
#nb.tb-builder .tb-selbar{position:absolute;inset-inline:0;bottom:calc(var(--tb-sheet-h,0px) + 8px);margin-inline:auto;z-index:5;width:max-content;max-width:calc(100% - 16px);display:flex;flex-direction:column;align-items:center;padding:2px 4px;border-radius:999px;background:var(--tb-float);border:1px solid var(--line);box-shadow:none}
#nb.tb-builder .tb-selbar[hidden]{display:none}
#nb.tb-builder .tb-selbar .nb-ib{width:40px;height:44px;min-width:40px;min-height:44px}
#nb.tb-builder .tb-selbar .nb-ib svg{width:19px;height:19px;stroke-width:1.5}
#nb.tb-builder .nb-selcolors{padding:4px 6px 6px}

/* the chooser (no design yet) covers the viewport */
#nb.tb-builder .tb-chooser{position:absolute;inset:0;z-index:8;overflow:auto;overscroll-behavior:contain;display:grid;place-content:start center;gap:10px;padding:20px 16px calc(24px + env(safe-area-inset-bottom));background:var(--bg);text-align:center;backdrop-filter:none;-webkit-backdrop-filter:none}
#nb.tb-builder .tb-chooser[hidden]{display:none}
#nb.tb-builder .tb-chooser h2{font:600 1.2rem var(--tb-font);color:var(--burg);margin:0}
/* a design to start from: a flat row card — thumbnail, name, one line of hint (no lifted shadow, no gradient) */
#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos){grid-template-columns:repeat(auto-fill,minmax(260px,1fr));width:min(560px,calc(100vw - 32px));max-width:none}
#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos) .nb-choice{grid-template-columns:64px 1fr;grid-template-rows:auto auto;justify-items:start;align-content:center;text-align:start;column-gap:14px;row-gap:2px;min-height:88px;padding:12px 16px;box-shadow:none;font-family:var(--tb-font)}
#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos) .nb-choice > .thumb,#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos) .nb-choice > svg{grid-row:1/3;width:64px;height:64px;aspect-ratio:auto;padding:6px;background:var(--bg)}
#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos) .nb-choice b{align-self:end;font-weight:600}
#nb.tb-builder .tb-chooser .nb-chooser-grid:not(.photos) .nb-choice small{align-self:start;font-size:.8rem}
#nb.tb-builder .tb-chooser .nb-choice[aria-pressed="true"],#nb.tb-builder .tb-chooser .nb-choice:focus-visible{border-color:var(--burg)}
#nb.tb-builder .tb-chooser .nb-choice .thumb svg{filter:none}
#nb.tb-builder.nb-empty .tb-corner,#nb.tb-builder.nb-empty .tb-foot-start,#nb.tb-builder.nb-empty .tb-tabs-host,#nb.tb-builder.nb-empty .tb-panel-host,
#nb.tb-builder.nb-empty .tb-save,#nb.tb-builder.nb-empty #tb-change,#nb.tb-builder.nb-empty .nb-shuffle,#nb.tb-builder.nb-empty .tb-selbar{display:none}
#nb.tb-builder.nb-empty .nb-fit{visibility:hidden}

/* ---------- tools: the tab bar and the panel (phones) ---------- */
#nb.tb-builder .tb-tabs-host{grid-area:tabs;z-index:9;background:var(--tb-bar);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#nb.tb-builder .tb-tabs-host[hidden]{display:none}
#nb.tb-builder .tb-tabs{display:flex;gap:2px;padding:4px 6px}
#nb.tb-builder .tb-tab{flex:1 1 0;min-width:0;min-height:56px;padding:6px 2px 4px;display:grid;justify-items:center;align-content:center;gap:3px;border:0;border-radius:14px;background:none;color:var(--muted);font:500 .7rem/1.1 var(--tb-font);cursor:pointer;box-shadow:none}
#nb.tb-builder .tb-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nb.tb-builder .tb-tab svg{width:20px;height:20px;stroke-width:1.5;padding:4px 12px;box-sizing:content-box;border-radius:999px}
#nb.tb-builder .tb-tab:hover{color:var(--ink)}
#nb.tb-builder .tb-tab[aria-pressed=true]{color:var(--burg)}
#nb.tb-builder .tb-tab[aria-pressed=true] svg{background:var(--tb-sel)}

#nb.tb-builder .tb-panel-host{grid-area:stage;align-self:end;z-index:7;min-height:0;pointer-events:none}
#nb.tb-builder .tb-panel{pointer-events:auto;display:flex;flex-direction:column;height:0;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-radius:20px 20px 0 0;transition:height .22s ease,transform .22s ease}
#nb.tb-builder[data-sheet=open] .tb-panel{height:var(--tb-drag,var(--tb-open-h,46dvh))}
#nb.tb-builder[data-sheet=full] .tb-panel{height:var(--tb-drag,var(--tb-full-h,88dvh))}
#nb.tb-builder[data-sheet=closed] .tb-panel{border-top-color:transparent}
#nb.tb-builder.sheet-dragging .tb-panel{transition:none;height:var(--tb-drag)}
#nb.tb-builder.sheet-suspended .tb-panel{transform:translateY(100%)}
@media (prefers-reduced-motion:reduce){#nb.tb-builder .tb-panel{transition:none}}
#nb.tb-builder .tb-handle{flex:0 0 auto;display:grid;place-items:center;width:100%;min-height:24px;padding:8px 0 4px;border:0;background:none;cursor:grab;touch-action:none}
#nb.tb-builder .tb-handle i{display:block;width:40px;height:4px;border-radius:99px;background:var(--line)}
#nb.tb-builder .tb-panel-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 6px 0 16px;border-bottom:1px solid var(--line)}
html[dir=rtl] #nb.tb-builder .tb-panel-head{padding:0 16px 0 6px}
#nb.tb-builder .tb-panel-head h2{margin:0;font:600 1rem/1.2 var(--tb-font);color:var(--ink)}
#nb.tb-builder .tb-panel-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:4px 16px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px;align-content:start}
#nb.tb-builder .tb-dock:empty{display:none}
#nb.tb-builder .tb-dock{padding:8px 16px;border-top:1px solid var(--line)}

/* the accordion: light dividers, one section open */
#nb.tb-builder .tb-acc{display:grid}
#nb.tb-builder .tb-acc-item{border-bottom:1px solid var(--line)}
#nb.tb-builder .tb-acc-item:last-child{border-bottom:0}
#nb.tb-builder .tb-acc-h{margin:0;display:block}
#nb.tb-builder .tb-acc-head{width:100%;min-height:48px;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:none;color:var(--ink);font:500 .95rem/1.2 var(--tb-font);text-align:start;cursor:pointer}
#nb.tb-builder .tb-acc-head svg{width:18px;height:18px;color:var(--muted);transition:transform .18s}
#nb.tb-builder .tb-acc-head[aria-expanded=true]{color:var(--burg)}
#nb.tb-builder .tb-acc-head[aria-expanded=true] svg{transform:rotate(180deg);color:var(--burg)}
#nb.tb-builder .tb-acc-body{display:grid;gap:10px;align-content:start;padding:2px 0 16px}
#nb.tb-builder .tb-acc-body[hidden]{display:none}
#nb.tb-builder .tb-acc-single{display:grid;gap:10px;padding-top:10px}

/* sheet content (the old sheet's rules, under the new panel) */
#nb.tb-builder .tb-panel h3{margin:4px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 .82rem/1.3 var(--tb-font);color:var(--ink)}
#nb.tb-builder .tb-panel h3 small{font-weight:400;color:var(--muted)}
#nb.tb-builder .tb-panel .hint{margin:0;font-size:.8rem;color:var(--muted)}
#nb.tb-builder .tb-panel .issue{font-size:.8rem;color:#b4452f}
#nb.tb-builder .tb-panel .lead{font-size:.9rem}
#nb.tb-builder .tb-panel .row{display:flex;gap:10px;flex-wrap:wrap}
#nb.tb-builder .tb-panel .row .btn{flex:1 1 140px}
#nb.tb-builder .tb-panel .chip{unicode-bidi:plaintext;border-radius:999px;min-height:44px}
#nb.tb-builder .tb-panel .chips.small .chip{min-height:40px;padding:6px 12px}
#nb.tb-builder .tb-panel .chip.icon svg{width:22px;height:22px;fill:currentColor}
#nb.tb-builder .tb-panel .chip[aria-pressed=true]{border-color:var(--burg);color:var(--burg);background:var(--tb-sel)}
#nb.tb-builder .tb-panel .field{border-radius:12px}
#nb.tb-builder .tb-panel .nb-fcard{box-shadow:none;border-radius:14px}
#nb.tb-builder .nb-swatch.blocked{opacity:.28;cursor:not-allowed;position:relative;filter:grayscale(.4)}
#nb.tb-builder .nb-swatch.blocked::after{content:"";position:absolute;inset:18% 48%;background:#4A1120;transform:rotate(45deg);border-radius:2px}
#nb.tb-builder .nb-asset.art img{width:100%;aspect-ratio:1;object-fit:contain;display:block;pointer-events:none}
#nb.tb-builder .nb-iconmode{margin-bottom:4px}
#nb.tb-builder .nb-saved-png{max-width:100%;border-radius:14px}
#nb.tb-builder .tb-panel .pb{border-radius:14px}

/* ---------- wide screens: one viewport, the tools as a side panel at the inline end ---------- */
@media (min-width:900px){
  #nb.tb-builder{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top top" "stage tabs" "stage panel"}
  #nb.tb-builder .tb-top{padding-inline:12px}
  #nb.tb-builder .tb-title h1{font-size:1.1rem}
  #nb.tb-builder .tb-top .nb-shuffle{width:auto;padding-inline:12px;gap:6px;display:inline-flex}
  #nb.tb-builder .tb-top .nb-shuffle span{display:inline;font:500 .85rem var(--tb-font)}
  #nb.tb-builder .tb-tabs-host{border-top:0;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding-bottom:0}
  #nb.tb-builder .tb-tabs{flex-wrap:wrap;padding:8px 10px}
  #nb.tb-builder .tb-panel-host{grid-area:panel;align-self:stretch;pointer-events:auto;border-inline-start:1px solid var(--line);background:#fff}
  #nb.tb-builder .tb-panel,#nb.tb-builder[data-sheet] .tb-panel{height:100%;border-radius:0;border-top:0;transform:none;transition:none}
  #nb.tb-builder .tb-handle,#nb.tb-builder #nb-sheet-close{display:none}
  #nb.tb-builder .tb-panel-head{padding-inline:16px}
  #nb.tb-builder .tb-corner{top:14px}
  #nb.tb-builder .tb-corner-start{inset-inline-start:14px}
  #nb.tb-builder .tb-corner-end{inset-inline-end:14px}
}

/* ---------- Phase 2: the ContextualInspector ---------- */
#nb.tb-builder .tb-selbar{display:none !important}   /* the inspector replaces the floating selection bar */
#nb.tb-builder[data-panel=inspector] .tb-panel-head{display:none}
#nb.tb-builder[data-panel=inspector] .tb-panel-body{padding-top:0;gap:0}
#nb.tb-builder .tb-ins-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;min-height:60px;margin:0 -16px;padding:6px 12px 6px 16px;background:#fff;border-bottom:1px solid var(--line)}
html[dir=rtl] #nb.tb-builder .tb-ins-head{padding:6px 16px 6px 12px}
#nb.tb-builder .tb-ins-thumb{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--bg);overflow:hidden}
#nb.tb-builder .tb-ins-thumb svg,#nb.tb-builder .tb-ins-thumb img{width:28px;height:28px;object-fit:contain}
#nb.tb-builder .tb-ins-name{flex:1 1 auto;min-width:0;display:grid;line-height:1.2}
#nb.tb-builder .tb-ins-name b{font:600 .95rem var(--tb-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
#nb.tb-builder .tb-ins-name small{font:500 .72rem var(--tb-font);color:var(--muted)}
#nb.tb-builder .tb-done{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--burg);color:var(--color-on-primary);font:600 .88rem var(--tb-font);cursor:pointer}
#nb.tb-builder .tb-done:hover{background:var(--burg2)}
#nb.tb-builder .tb-ins-body{display:grid;gap:4px;padding:6px 0 8px}
#nb.tb-builder .tb-ins-foot{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));z-index:2;display:flex;align-items:center;gap:4px;margin:0 -16px;padding:6px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
#nb.tb-builder .tb-spacer{flex:1 1 auto}
#nb.tb-builder .tb-delete{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border:1px solid #E7C9C9;border-radius:999px;background:none;color:#A33A2E;font:500 .85rem var(--tb-font);cursor:pointer}
#nb.tb-builder .tb-delete svg{width:18px;height:18px}
#nb.tb-builder .tb-delete:hover{background:#FBEFEE}
#nb.tb-builder .tb-icon-btn[aria-pressed=true]{color:var(--burg);background:var(--tb-sel)}
#nb.tb-builder .tb-pos-row{display:flex;gap:10px;flex-wrap:wrap}
#nb.tb-builder .tb-num{flex:1 1 120px;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font:500 .82rem var(--tb-font);color:var(--muted)}
#nb.tb-builder .tb-num input{flex:1 1 auto;min-width:0;width:60px;border:0;background:none;font:500 .95rem var(--tb-font);color:var(--ink);padding:0;text-align:end}
#nb.tb-builder .tb-num input:focus{outline:none}
#nb.tb-builder .tb-num:focus-within{border-color:var(--burg)}
#nb.tb-builder .tb-nudges{display:flex;gap:6px}
#nb.tb-builder .tb-nudge{border:1px solid var(--line)}
#nb.tb-builder .tb-pill{min-height:44px;border-radius:999px;padding-inline:16px}
#nb.tb-builder .tb-order{display:flex;gap:8px}
#nb.tb-builder .tb-ins-preview{display:flex;align-items:center;gap:12px}
#nb.tb-builder .tb-ins-preview-img{width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:var(--bg)}
#nb.tb-builder .tb-ins-preview-img svg,#nb.tb-builder .tb-ins-preview-img img{width:48px;height:48px;object-fit:contain}
#nb.tb-builder .tb-replace-grid{max-height:240px;overflow:auto}
#nb.tb-builder .tb-fact{margin:0;font-size:.9rem}
#nb.tb-builder .tb-row-icons .chip.icon{min-width:44px}

/* ---------- Phase 2: the LayersPanel — compact 44 px rows ---------- */
#nb.tb-builder .tb-layers{list-style:none;margin:0;padding:0;display:grid}
#nb.tb-builder .tb-layer{position:relative;overflow:hidden;border-bottom:1px solid var(--line);touch-action:pan-y}
#nb.tb-builder .tb-layer:last-child{border-bottom:0}
#nb.tb-builder .tb-layer-slide{position:relative;z-index:1;display:flex;align-items:center;gap:2px;min-height:48px;background:#fff;transition:transform .18s ease}
#nb.tb-builder .tb-layer.dragging{z-index:3;box-shadow:0 6px 18px rgba(34,28,24,.12)}
#nb.tb-builder .tb-layer.dragging .tb-layer-slide{background:var(--bg)}
#nb.tb-builder .tb-layer.drop-target{box-shadow:inset 0 2px 0 var(--burg)}
#nb.tb-builder .tb-layer[aria-selected=true] .tb-layer-slide{background:var(--tb-sel)}
#nb.tb-builder .tb-layer[data-hidden] .tb-layer-main{opacity:.45}
#nb.tb-builder .tb-layer-main{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px;padding:0 4px;border:0;background:none;text-align:start;cursor:pointer;color:var(--ink)}
#nb.tb-builder .tb-layer-thumb{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--bg);overflow:hidden}
#nb.tb-builder .tb-layer-thumb svg,#nb.tb-builder .tb-layer-thumb img{width:22px;height:22px;object-fit:contain}
#nb.tb-builder .tb-thumb-text{font-size:15px;line-height:1}
#nb.tb-builder .tb-thumb-piece svg{width:22px;height:22px;fill:currentColor;fill-opacity:.35}
#nb.tb-builder .tb-layer-text{display:grid;min-width:0;line-height:1.15}
#nb.tb-builder .tb-layer-text b{font:500 .88rem var(--tb-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
#nb.tb-builder .tb-layer-text small{font:400 .7rem var(--tb-font);color:var(--muted)}
#nb.tb-builder .tb-layer-gap{width:44px}
#nb.tb-builder .tb-layer-drag{width:40px;height:44px;display:grid;place-items:center;color:var(--muted);cursor:grab;touch-action:none}
#nb.tb-builder .tb-layer-drag svg{width:18px;height:18px}
#nb.tb-builder .tb-layer-del{position:absolute;inset-block:0;inset-inline-end:0;z-index:0;width:88px;display:flex;align-items:center;justify-content:center;gap:4px;border:0;background:#A33A2E;color:#fff;font:500 .8rem var(--tb-font);cursor:pointer}
#nb.tb-builder .tb-layer-del svg{width:16px;height:16px}

/* ---------- Phase 3: the Elements tab (ElementCatalog) ---------- */
#nb.tb-builder .tb-el-mode{margin:10px 0 2px}
#nb.tb-builder .tb-el-tint .nb-swatches{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#nb.tb-builder .tb-el-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#nb.tb-builder .tb-el-cats::-webkit-scrollbar,#nb.tb-builder .tb-el-tint .nb-swatches::-webkit-scrollbar{display:none}
#nb.tb-builder .tb-el-cats .chip{flex:0 0 auto}
#nb.tb-builder .tb-el-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media (min-width:900px){#nb.tb-builder .tb-el-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
#nb.tb-builder .tb-el{display:grid;justify-items:center;gap:1px;min-height:44px;padding:6px 2px 4px;border:1px solid transparent;border-radius:14px;background:none;cursor:pointer;color:var(--ink)}
#nb.tb-builder .tb-el:hover{background:var(--bg)}
#nb.tb-builder .tb-el:active{border-color:var(--burg)}
#nb.tb-builder .tb-el-img{position:relative;display:block;width:56px;height:56px}
#nb.tb-builder .tb-el-img img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* Single colour: the same PNG as a CSS mask, filled with the filament, its own shading multiplied on top */
#nb.tb-builder .tb-el-img.single{background:var(--tint);-webkit-mask:var(--el) center/contain no-repeat;mask:var(--el) center/contain no-repeat}
#nb.tb-builder .tb-el-img.single::after{content:"";position:absolute;inset:0;background:var(--el) center/contain no-repeat;filter:grayscale(1) brightness(1.25) contrast(.9);mix-blend-mode:multiply;opacity:.6}
#nb.tb-builder .tb-el-name{font:500 .68rem/1.15 var(--tb-font);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nb.tb-builder .tb-el-price{font:400 .66rem/1.1 var(--tb-font);color:var(--muted);font-variant-numeric:tabular-nums}
#nb.tb-builder .tb-row-el img{width:26px;height:26px;object-fit:contain}
.nb-drag-ghost .tb-el-img{width:64px;height:64px;display:block}
.nb-drag-ghost .tb-el-img img{width:100%;height:100%;object-fit:contain}
.nb-drag-ghost .tb-el-img.single{background:var(--tint);-webkit-mask:var(--el) center/contain no-repeat;mask:var(--el) center/contain no-repeat}
#nb.tb-builder .tb-el-tint .nb-swatch{flex:0 0 auto}
#nb.tb-builder .tb-el-cats{min-height:44px;align-items:center}
#nb.tb-builder .nb-swatch.auto{background:#fff !important;display:grid;place-items:center;border-style:dashed}
#nb.tb-builder .nb-swatch.auto span{position:static;color:var(--ink);font:500 .66rem/1.1 var(--tb-font);text-shadow:none;background:none;text-align:center;padding:2px}

/* ---------- Phase 5: the buy row of a section that sells (above the tabs, always in reach) ---------- */
#nb.tb-builder .tb-buy-dock{padding:6px 10px 0}
#nb.tb-builder .tb-buy-dock .nb-buy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:0;border:0;background:none;box-shadow:none}
#nb.tb-builder .tb-buy-dock .nb-buy[hidden]{display:none}
/* the price itself is the PriceBadge's; kept here for screen readers */
#nb.tb-builder .tb-buy-dock .nb-price{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#nb.tb-builder .tb-buy-dock .nb-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff}
#nb.tb-builder .tb-buy-dock .nb-qty button{width:40px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--ink)}
#nb.tb-builder .tb-buy-dock .nb-qty input{width:34px;border:0;text-align:center;font:600 .9rem var(--tb-font);background:none}
#nb.tb-builder .tb-buy-dock #nb-cart{flex:1 1 auto;min-height:44px;border-radius:999px;gap:6px;font:600 .9rem var(--tb-font)}
#nb.tb-builder .tb-buy-dock #nb-cart svg{width:18px;height:18px}
#nb.tb-builder .tb-buy-dock .nb-why{flex:1 1 100%;margin:0;font-size:.74rem;color:var(--muted)}