/* T-shirt Designer — designer modal + product page box. */

/* ---------- product page ---------- */
.su-product-box { margin: 0 0 16px; width: 100%; box-sizing: border-box; clear: both; }
.su-product-box .su-pb-main { display: block; width: 100%; padding: 14px 20px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; text-align: center; border-radius: 6px; }
.su-pb-saved { border: 1px solid #dcdfe3; border-radius: 10px; background: #fafbfc; padding: 14px 16px; }
.su-pb-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.su-pb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.su-pb-previews { display: grid; gap: 8px; margin: 10px 0; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.su-pb-previews figure { margin: 0; border: 1px solid #e3e5e8; border-radius: 6px; background: #fff; padding: 4px; }
.su-pb-previews img { display: block; width: 100%; height: auto; }
.su-pb-previews figcaption { font-size: .8em; text-align: center; color: #555; padding-top: 2px; }
.su-pb-details { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .92em; }
.su-pb-details dt { font-weight: 600; }
.su-pb-details dd { margin: 0; }
form.cart input.qty[readonly] { background: #f1f2f4; }
form.cart .single_add_to_cart_button.su-atc-off { opacity: .45; cursor: not-allowed; pointer-events: none; }
.su-design-again { margin-top: 6px; }
.su-design-again .button { font-size: .85em !important; padding: 6px 12px !important; }

html.su-lock, html.su-lock body { overflow: hidden !important; }

/* ---------- modal ---------- */
.su-modal {
	--ink: #141414; --mut: #5f6368; --line: #d9dcd6; --card: #fff; --paper: #e8ebe4;
	--gold: #f0c541; --gold-d: #d9a90f; --blue: #3d86d8; --green: #23784a; --red: #d93025;
	--head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	position: fixed; inset: 0; z-index: 999999; display: none; background: rgba(10, 10, 10, .6);
	font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink);
}
.su-modal.open { display: block; }
.su-modal.su-dlg-only { display: block; background: transparent; }
.su-modal.su-dlg-only .su-shell { display: none; }
.su-modal *, .su-modal *::before, .su-modal *::after { box-sizing: border-box; }
.su-modal button { font: inherit; color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; margin: 0; box-shadow: none; text-shadow: none; min-height: 0; }
.su-modal input, .su-modal select, .su-modal textarea { font: inherit; color: var(--ink); margin: 0; }
.su-modal h2, .su-modal h3 { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; color: inherit; }
.su-shell { position: absolute; inset: 10px; background: var(--card); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }

/* header */
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--ink); color: #fff; }
.su-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.su-logo { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.su-logo svg { width: 22px; height: 22px; fill: var(--ink); }
.su-brand h2 { font: 700 22px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.su-sub { color: #b9b9b9; font-size: 13px; white-space: nowrap; }
.su-top-r { display: flex; align-items: center; gap: 12px; }
.su-units { display: inline-flex; background: #2b2b2b; border-radius: 20px; padding: 3px; }
.su-units button { background: none; border: 0; padding: 6px 16px; border-radius: 16px; font-size: 14px; font-weight: 700; color: #ddd; }
.su-units button.on { background: var(--gold); color: var(--ink); }
.su-x { background: none; border: 0; font-size: 30px !important; line-height: 1 !important; width: 40px; height: 40px; border-radius: 50%; color: inherit !important; padding: 0; }
.su-top .su-x { background: #2b2b2b; color: #fff !important; font-size: 26px !important; }
.su-x:hover { filter: brightness(1.2); }

/* tape: sizes + quantities */
.su-tape-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 12px 18px 10px; border-bottom: 1px solid var(--line); align-items: center; }
.su-tape-main { min-width: 0; overflow-x: auto; }
.su-tape, .su-qtys { display: grid; min-width: 560px; }
.su-tape { background:
	repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, transparent 1px 10px) top / 100% 7px no-repeat,
	repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 1.5px, transparent 1.5px 50px) top / 100% 13px no-repeat,
	var(--gold); border-radius: 4px; }
.su-seg { border: 0; border-right: 2px solid rgba(0,0,0,.65); background: transparent; padding: 16px 8px 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.su-seg:last-child { border-right: 0; }
.su-seg b { font: 700 24px/1 var(--head); }
.su-seg small { font-size: 12px; font-weight: 600; color: rgba(0,0,0,.75); white-space: nowrap; }
.su-seg.on { background: var(--ink); color: #fff; }
.su-seg.on small { color: rgba(255,255,255,.8); }
.su-seg:disabled { opacity: .35; cursor: not-allowed; }
.su-q { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.su-q-row { display: flex; align-items: center; gap: 6px; }
.su-q-row button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #b9bdc2; background: #fff; font-size: 18px; padding: 0; display: grid; place-items: center; }
.su-q-row button:disabled { opacity: .3; cursor: not-allowed; }
.su-q-in { width: 52px; height: 34px; text-align: center; border: 1.5px solid #c9ccd0; border-radius: 8px; font-size: 17px !important; font-weight: 700; background: #fff; -moz-appearance: textfield; }
.su-q-in::-webkit-outer-spin-button, .su-q-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.su-q-in.has { border-color: var(--ink); background: #fff8dc; }
.su-q small { font-size: 11px; color: var(--mut); white-space: nowrap; min-height: 14px; }
.su-tape-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.su-total { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 16px; }
.su-ring { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--gold); display: grid; place-items: center; font: 700 22px/1 var(--head); flex: none; }
.su-total-l { display: flex; flex-direction: column; }
.su-total-l b { font: 600 15px/1.2 var(--head); letter-spacing: .06em; color: var(--gold); }
.su-total-l small { font-size: 13px; color: #ddd; }
.su-side-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.su-nn-btn { border: 1.5px solid var(--ink); background: #fff; border-radius: 8px; padding: 8px 12px; font-weight: 700; white-space: nowrap; font-size: 14px; }
.su-nn-btn span { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; margin-left: 4px; }
.su-linked { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); cursor: pointer; }
.su-linked b { color: var(--ink); }
.su-linked input { width: 20px; height: 20px; accent-color: var(--ink); }

/* body */
.su-body { display: grid; grid-template-columns: 88px minmax(0, 1fr) clamp(340px, 28vw, 560px); min-height: 0; }
.su-rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; padding: 10px 8px; gap: 2px; overflow-y: auto; background: #fff; }
.su-rail-h { font-size: 11px; font-weight: 700; color: var(--mut); text-align: center; letter-spacing: .1em; padding: 2px 0 6px; }
.su-rail-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.su-rail button { background: none; border: 0; border-radius: 10px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.su-rail button:hover { background: #fff3c4; }
.su-rail svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.su-rail .su-ico-t { font: 700 18px/24px var(--head); height: 24px; }
.su-rail .su-danger { color: var(--red); }

/* work area */
.su-mat { position: relative; overflow: hidden; min-width: 0; background:
	linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 20px 20px,
	linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 20px 20px, var(--paper); }
.su-scroll { position: absolute; inset: 0; overflow: auto; padding: 16px 24px 12px; display: block; touch-action: none; cursor: grab; overscroll-behavior: contain; }
.su-scroll.su-panning { cursor: grabbing; }
.su-scroll .su-stage { cursor: default; }
.su-pieces { display: flex; flex-direction: column; align-items: center; gap: 22px; width: max-content; min-width: 100%; padding: 8px 8px 8px; box-sizing: border-box; }
.su-mat.su-has-panel .su-pieces { padding-bottom: 340px; }
.su-zoom { position: absolute; top: 12px; right: 14px; z-index: 5; display: flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.su-zoom button { border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; font-weight: 700; padding: 0; }
.su-zoom button:hover { background: #fff3c4; }
.su-zoom .su-zoom-fit { width: auto; padding: 0 12px; border-radius: 16px; font-size: 13px; }
.su-zoom span { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; }
.su-row { display: flex; gap: 40px; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
.su-col { display: flex; flex-direction: column; gap: 18px; }
.su-piece { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.su-ph { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; white-space: nowrap; min-height: 32px; }
.su-ph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.su-narrow .su-ph-adj span, .su-narrow .su-ph-col span { display: none; }
.su-narrow .su-ph button, .su-narrow .su-ph-col { padding: 5px 7px; }
.su-ph-l { font: 700 16px/1 var(--head); text-transform: uppercase; letter-spacing: .04em; background: var(--gold); padding: 6px 10px; border-radius: 4px; margin-right: 4px; }
.su-ph button, .su-ph-col { border: 1.5px solid #c9ccd0; background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.su-ph-up { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.su-ph-adj.on { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.su-ph-col input { width: 20px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.su-ph-col input::-webkit-color-swatch-wrapper { padding: 0; }
.su-ph-col input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.25); border-radius: 4px; }
.su-ph-del { width: 26px; height: 26px; padding: 0 !important; border-radius: 50% !important; background: var(--red) !important; color: #fff !important; border: 0 !important; justify-content: center; font-size: 17px !important; line-height: 1; }
.su-stage { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.su-cv { display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.su-ov { position: absolute; inset: 0; pointer-events: none; }
.su-hint { margin: 6px auto 0; color: var(--mut); font-size: 13px; text-align: center; max-width: 760px; }

/* selection */
.su-sel { position: absolute; left: 0; top: 0; border: 2px dashed var(--green); transform-origin: center center; pointer-events: none; }
.su-sel-bg { border-color: #ff7a00; }
.su-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--green); border-radius: 50%; pointer-events: auto; margin: -7px 0 0 -7px; }
.su-sel-bg .su-h, .su-sel-bg .su-rot { border-color: #ff7a00; }
.su-h-nw { left: 0; top: 0; cursor: nwse-resize; } .su-h-n { left: 50%; top: 0; cursor: ns-resize; } .su-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.su-h-e { left: 100%; top: 50%; cursor: ew-resize; } .su-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .su-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.su-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .su-h-w { left: 0; top: 50%; cursor: ew-resize; }
.su-h-n, .su-h-s, .su-h-e, .su-h-w { border-radius: 3px; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.su-rot { position: absolute; left: 50%; top: -34px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--green); pointer-events: auto; cursor: grab; }
.su-rot::after { content: ""; position: absolute; left: 6px; top: 16px; width: 2px; height: 16px; background: var(--green); }
.su-sel-dim { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px); background: var(--green); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }

/* piece measurements (blue pills) */
.su-dims { position: absolute; inset: 0; pointer-events: none; color: #fff; font-size: 12.5px; font-weight: 700; }
.su-dim-w { position: absolute; height: 0; border-top: 2px solid var(--blue); }
.su-dim-w::before, .su-dim-w::after { content: ""; position: absolute; top: -7px; width: 2px; height: 12px; background: var(--blue); }
.su-dim-w::before { left: 0; } .su-dim-w::after { right: 0; }
.su-dim-w span { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); background: var(--blue); padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
.su-dim-h { position: absolute; left: -20px; width: 0; border-left: 2px solid var(--blue); }
.su-dim-h::before, .su-dim-h::after { content: ""; position: absolute; left: -7px; width: 12px; height: 2px; background: var(--blue); }
.su-dim-h::before { top: 0; } .su-dim-h::after { bottom: 0; }
.su-dim-h span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); background: var(--blue); padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
.su-dims.big { font-size: 14px; }
.su-empty { color: var(--mut); margin: 40px auto; font-size: 16px; }

.su-preview-bar { position: sticky; top: -16px; left: 0; z-index: 3; width: max-content; margin-left: auto; margin-right: auto; background: var(--ink); color: #fff; border-radius: 20px; padding: 5px 6px 5px 16px; font-size: 13px; display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.su-preview-bar[hidden] { display: none; }
.su-preview-bar button { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; padding: 0; }

/* floating properties panel (bottom-left of the work area) */
.su-panel { position: absolute; left: 16px; bottom: 16px; width: min(900px, calc(100% - 32px)); max-height: min(300px, 52%); overflow: auto; background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 52px 14px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.su-panel[hidden] { display: none; }
.su-pn-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #2f2f2f; color: #fff !important; font-size: 22px !important; line-height: 1 !important; padding: 0; }
.su-pn-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.su-pn-row + .su-pn-row { padding-top: 10px; border-top: 1px solid #333; }
.su-tag { font: 700 15px/1.1 var(--head); letter-spacing: .05em; color: var(--gold); padding: 6px 0; align-self: center; white-space: nowrap; margin-right: 4px; }
.su-pn-note { color: #bbb; font-size: 12.5px; align-self: center; }
.su-pn-src { line-height: 1.25; }
.su-pn-all { margin-left: auto; font-size: 13px; display: flex; align-items: center; gap: 6px; align-self: center; white-space: nowrap; color: #ddd; }
.su-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: #c7c7c7; white-space: nowrap; }
.su-f small { font-weight: 500; color: #999; }
.su-f input[type=number], .su-f input[type=text], .su-f select { height: 38px; border: 1px solid #555; border-radius: 8px; padding: 0 8px; background: #fff; color: var(--ink); font-size: 15px; width: 82px; min-width: 0; }
.su-f-wide input { width: 210px !important; }
.su-f-font select { width: 180px !important; }
.su-f-col span { display: flex; gap: 4px; align-items: center; }
.su-f-col input[type=color] { width: 38px; height: 38px; padding: 2px; border: 1px solid #555; border-radius: 8px; background: #fff; cursor: pointer; }
.su-f-col input[type=text] { width: 92px !important; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; font-size: 14px !important; }
.su-f-col.off { opacity: .4; }
.su-pn-l { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; align-self: center; white-space: nowrap; color: #fff; }
.su-pn-l input { width: 18px; height: 18px; accent-color: var(--gold); }
.su-ol { display: flex; gap: 10px; align-items: flex-end; padding: 0 14px 0 0; margin-right: 4px; border-right: 1px solid #333; }
.su-ol:last-child { border-right: 0; }
.su-ol:not(.on) .su-f { opacity: .4; }
.su-warps { display: flex; gap: 4px; flex-wrap: wrap; }
.su-warps button { border: 1px solid #555; background: #222; color: #ddd; border-radius: 8px; padding: 5px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; min-width: 56px; }
.su-warps button.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.su-warps svg { width: 26px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.su-bend span { display: flex; align-items: center; gap: 8px; height: 38px; }
.su-bend input { width: 130px; accent-color: var(--gold); }
.su-bend b { color: #fff; min-width: 40px; }
.su-pn-common select { width: 170px !important; }
.su-pn-size { background: var(--green); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 8px; align-self: flex-end; white-space: nowrap; }
.su-panel .su-btn { background: #2f2f2f; border-color: #444; color: #fff; padding: 9px 14px; font-size: 14px; }
.su-panel .su-btn:hover { border-color: #777; }
.su-panel .su-danger-b { color: #ff8a80; }

/* 3D */
.su-3d { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: #fff; }
.su-3d-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; gap: 8px; }
.su-3d-head h3 { font: 700 20px/1 var(--head); letter-spacing: .03em; }
.su-spin { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 16px; cursor: pointer; }
.su-spin input { accent-color: var(--gold); }
.su-3d-stage { position: relative; flex: 1; min-height: 240px; margin: 0 12px; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, #fff, #e4e6e8); }
.su-3d-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.su-3d-stage canvas.su-3d-grid { pointer-events: none; cursor: default; }
.su-3d-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); text-align: center; padding: 20px; font-size: 14px; }
.su-3d-msg[hidden] { display: none; }
.su-3d-views { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; background: #fff; border-radius: 24px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.su-3d-views button { border: 0; background: none; padding: 7px 14px; font-size: 14px; font-weight: 700; border-radius: 20px; }
.su-3d-views button:hover, .su-3d-views button.on { background: var(--gold); }
.su-3d-note { margin: 0; padding: 6px 16px 10px; font-size: 11.5px; color: var(--mut); }

/* footer */
.su-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
.su-foot-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.su-status { color: var(--mut); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-status b { color: var(--ink); }
.su-up { color: var(--blue); font-weight: 600; }
.su-foot-r { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.su-btn { border: 1.5px solid #c9ccd0; background: #fff; border-radius: 9px; padding: 11px 18px; font-weight: 700; font-size: 15px; }
.su-btn:hover { border-color: var(--ink); }
.su-btn.su-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.su-btn.su-primary:hover { background: #333; }
.su-btn:disabled { opacity: .5; cursor: not-allowed; }
.su-danger-b { color: var(--red); }
.su-mine { position: relative; }
.su-mine-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: 320px; max-height: 380px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 6px; z-index: 8; }
.su-mine-menu[hidden] { display: none; }
.su-mine-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 6px; }
.su-mine-item:hover, .su-mine-item.on { background: #fff3c4; }
.su-mine-item img, .su-mine-noimg { width: 64px; height: 44px; object-fit: contain; background: #f2f2f2; border-radius: 4px; flex: none; }
.su-mine-item span { display: flex; flex-direction: column; }
.su-mine-item small { color: var(--mut); font-size: 12px; }
.su-mine-msg { margin: 8px; color: var(--mut); font-size: 13px; }
.su-mine-all { display: block; padding: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; }

/* dialogs */
.su-pop { position: absolute; inset: 0; background: rgba(10,10,10,.45); display: grid; place-items: center; z-index: 10; padding: 16px; }
.su-pop[hidden] { display: none; }
.su-dlg { background: #fff; border-radius: 14px; width: min(700px, 100%); max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.su-dlg-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 6px; }
.su-dlg-h h3 { font: 700 21px/1.2 var(--head); letter-spacing: .02em; }
.su-dlg-b { padding: 6px 18px 12px; overflow: auto; font-size: 15px; }
.su-dlg-b p { margin: 0 0 10px; }
.su-dlg-f { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.su-dlg .su-f { color: var(--mut); }
.su-dlg .su-f input { border-color: #c9ccd0; }
.su-warn { color: #a3470b; font-size: 14px; }
.su-warn:empty { display: none; }
.su-note { color: var(--mut); font-size: 13px; }
.su-slots { display: grid; gap: 8px; margin: 6px 0 14px; }
.su-slot { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.su-slot:has(input:checked) { border-color: var(--ink); background: #fff8dc; }
.su-slot input { width: 18px; height: 18px; accent-color: var(--ink); }
.su-slot span { display: flex; flex-direction: column; }
.su-slot small { color: var(--mut); }
.su-plc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.su-plc-g { display: flex; flex-direction: column; gap: 5px; }
.su-plc-g b { font: 700 15px/1.2 var(--head); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.su-plc-b { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; padding: 9px 11px; font-size: 14px; }
.su-plc-b:hover { border-color: var(--ink); }
.su-plc-b.pre { border-color: var(--ink); background: #fff3c4; font-weight: 700; }
.su-shapes-c { margin-bottom: 12px; }
.su-shapes-c b { font: 700 15px/1.2 var(--head); text-transform: uppercase; }
.su-shapes-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 6px; }
.su-shapes-g button { border: 1.5px solid var(--line); background: #f7f8f9; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.su-shapes-g img { width: 72px; height: 72px; object-fit: contain; }
.su-shapes-g small { font-size: 11px; color: var(--mut); }
.su-nn-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.su-nn-table { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.su-nn-table table { width: 100%; border-collapse: collapse; margin: 0; }
.su-nn-table th { position: sticky; top: 0; background: #f6f7f8; font-size: 12px; text-align: left; padding: 8px 6px; color: var(--mut); border: 0; }
.su-nn-table td { padding: 4px 5px; border: 0; border-top: 1px solid #eef0f2; }
.su-nn-table tr.on td { background: #fff8dc; }
.su-nn-table input, .su-nn-table select { height: 38px; border: 1px solid #c9ccd0; border-radius: 7px; padding: 0 8px; width: 100%; background: #fff; font-size: 15px; }
.su-nn-table input[data-nnf="name"] { text-transform: uppercase; min-width: 150px; }
.su-nn-table input[data-nnf="number"] { width: 72px; }
.su-nn-table input[data-nnf="qty"] { width: 64px; }
.su-nn-table select { width: 84px; }
.su-nn-table input.dup { border-color: #e8890c; background: #fff4e5; }
.su-nn-empty { text-align: center; color: var(--mut); padding: 20px !important; }
.su-eye, .su-del { border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; padding: 0; }
.su-del { color: var(--red); font-size: 20px; }
.su-eye:hover, .su-del:hover { background: #f0f1f3; }
.su-nn-totals { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; margin-top: 10px; }
.su-nn-totals span { background: #f0f2f4; border-radius: 6px; padding: 3px 8px; }
.su-nn-paste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.su-nn-paste[hidden] { display: none; }
.su-nn-paste label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.su-nn-paste textarea { border: 1px solid #c9ccd0; border-radius: 8px; padding: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.su-nn-paste .su-btn { align-self: flex-start; }

.su-toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; z-index: 12; max-width: 90%; }
.su-toast.su-err { background: var(--red); }
.su-toast[hidden] { display: none; }

@media (max-width: 1200px) {
	.su-body { grid-template-columns: 76px minmax(0, 1fr) 320px; }
}
@media (max-width: 860px) {
	.su-shell { inset: 0; border-radius: 0; }
	.su-sub { display: none; }
	.su-brand h2 { font-size: 17px; }
	.su-tape-wrap { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; gap: 8px; }
	.su-tape-side { flex-direction: row; flex-wrap: wrap; }
	.su-total { padding: 6px 10px; }
	.su-ring { width: 42px; height: 42px; font-size: 18px; }
	.su-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 170px; }
	.su-tape-side { align-items: center; gap: 6px; }
	.su-total-l small, .su-linked span span { display: none; }
	.su-total-l b { font-size: 12px; }
	.su-side-row { gap: 6px; }
	.su-seg { padding: 12px 6px 4px; }
	.su-seg b { font-size: 19px; }
	.su-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; padding: 4px; }
	.su-rail-h, .su-rail-sep { display: none; }
	.su-rail button { min-width: 62px; flex: none; }
	.su-scroll { padding: 10px; }
	.su-row { flex-wrap: wrap; gap: 18px; }
	.su-panel { left: 8px; bottom: 8px; width: calc(100% - 16px); max-height: 60%; }
	.su-3d { border-left: 0; border-top: 1px solid var(--line); }
	.su-3d-head, .su-3d-note { display: none; }
	.su-3d-stage { margin: 6px; min-height: 0; }
	.su-3d-views button { padding: 5px 10px; font-size: 13px; }
	.su-foot { padding: 6px 8px; flex-wrap: wrap; gap: 6px; }
	.su-status { display: none; }
	.su-btn { padding: 9px 12px; font-size: 14px; }
	.su-hint { display: none; }
}

/* colour picker */
.su-cp { position: absolute; z-index: 20; width: 300px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.28); padding: 10px 12px 12px; }
.su-cp-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 4px 0 6px; }
.su-cp-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 6px; }
.su-cp-sw { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(0,0,0,.2); padding: 0; }
.su-cp-sw:hover { transform: scale(1.12); }
.su-cp-sw.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.su-cp-tools { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.su-cp-pick { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--ink); background: var(--gold); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.su-cp-pick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.su-cp-hex { width: 84px; height: 34px; border: 1px solid #c9ccd0; border-radius: 8px; padding: 0 8px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; text-transform: uppercase; }
.su-cp-more { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border: 1.5px solid #c9ccd0; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; }
.su-cp-more input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.su-modal.su-eyedrop .su-scroll, .su-modal.su-eyedrop .su-stage, .su-modal.su-eyedrop .su-stage * { cursor: crosshair !important; }
.su-modal.su-eyedrop .su-cv { outline: 2px dashed var(--gold); outline-offset: 2px; }

/* v1.3: print export (staff) */
.su-export-group { display: inline-flex; gap: 6px; margin-right: 6px; padding-right: 10px; border-right: 1px solid var(--line); }
.su-export-btn { border-color: #1e6fd9; color: #1e6fd9; }
.su-download-btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.su-download-btn.su-disabled { opacity: .45; cursor: not-allowed; }
.su-admin-edit { display: inline-block; background: #fff4d6; border: 1px solid #f0c75e; color: #6b4e00; border-radius: 6px; padding: 2px 8px; margin-right: 8px; font-size: 13px; }
.su-admin-edit code { background: none; font-size: 12px; }
.su-export-ov { position: absolute; inset: 0; z-index: 60; background: rgba(23, 24, 26, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.su-export-ov[hidden] { display: none; }
.su-export-box { background: #fff; border-radius: 14px; padding: 22px 24px; width: min(460px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.su-export-box h3 { margin: 0 0 8px; font: 700 21px/1.2 var(--head); letter-spacing: .02em; }
.su-ex-line { margin: 0 0 12px; font-size: 14px; color: #3b3f45; word-break: break-all; min-height: 1.4em; }
.su-ex-bar { height: 10px; background: #eceef1; border-radius: 6px; overflow: hidden; }
.su-ex-bar span { display: block; height: 100%; width: 0; background: #1e9e3e; transition: width .2s; }
.su-ex-pct { margin: 6px 0 10px; font-size: 13px; color: #6b7178; }
.su-ex-note { margin: 0 0 14px; font-size: 12.5px; color: #6b7178; }
.su-ex-warn { margin: 0 0 0 1.2em; font-size: 13px; color: #8a4b00; }
.su-svgcols { flex-wrap: wrap; }
@media (max-width: 760px) { .su-export-group { border-right: 0; padding-right: 0; } }

/* ===================== v1.4 ===================== */
/* artboard: wide margin so it can be dragged anywhere at any zoom */
.su-pieces { display: block; width: max-content; min-width: 0; padding: 0; }
.su-pieces-in { display: flex; flex-direction: column; align-items: center; gap: 22px; width: max-content; }
.su-mat.su-has-panel .su-pieces { padding-bottom: 0; }
.su-preview-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 4; }
.su-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; z-index: 2; pointer-events: none; background: rgba(255,255,255,.85); padding: 3px 10px; border-radius: 10px; white-space: nowrap; font-size: 12.5px; }
.su-mat.su-has-panel .su-hint { display: none; }
.su-pieces-in.su-slides { flex-direction: row; align-items: stretch; gap: 0; }
.su-slide { display: flex; align-items: center; justify-content: center; padding: 6px 18px; box-sizing: border-box; }

/* zoom pill with undo / redo */
.su-zoom .su-ur { display: grid; place-items: center; }
.su-zoom .su-ur svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.su-zoom .su-ur:disabled { opacity: .3; cursor: default; background: none; }
.su-zoom-sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }

/* piece dots (phone / tablet) */
.su-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; background: rgba(20,20,20,.82); color: #fff; border-radius: 20px; padding: 4px 6px; font-size: 13px; font-weight: 700; }
.su-dots[hidden] { display: none; }
.su-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.su-dots i.on { background: var(--gold); }
.su-dots span { padding: 0 4px; white-space: nowrap; }
.su-dots button { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; padding: 0; }
.su-mat.su-has-panel .su-dots { display: none; }

/* keep proportions + font button */
.su-pn-lock { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #ddd; white-space: nowrap; align-self: flex-end; padding-bottom: 9px; }
.su-fontbtn { height: 40px; min-width: 170px; max-width: 240px; text-align: left; border: 1px solid #c9ccd0 !important; background: #fff !important; color: var(--ink) !important; border-radius: 8px; padding: 0 30px 0 10px !important; font-size: 19px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%) !important; background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; }
.su-fp { position: absolute; z-index: 21; width: min(460px, calc(100% - 16px)); max-height: min(500px, calc(100% - 16px)); overflow-y: auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.28); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
.su-fp-b { border: 1.5px solid transparent !important; background: #f6f7f8 !important; border-radius: 8px; padding: 9px 10px !important; line-height: 1.15 !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink) !important; }
.su-fp-b:hover { background: #fff3c4 !important; }
.su-fp-b.on { border-color: var(--ink) !important; background: #fff8dc !important; }

/* colour picker v1.4: recent · Pick Color · spectrum · RGB */
.su-cp { width: auto; padding: 10px 12px 12px; }
.su-cp-row { grid-template-columns: repeat(8, 30px); gap: 5px; margin-bottom: 8px; }
.su-cp-sw { width: 30px; height: 30px; }
.su-cp-none { grid-column: 1 / -1; font-size: 12.5px; color: var(--mut); padding: 6px 0; }
.su-cp-mid { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.su-cp-now { width: 44px; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,.25); }
.su-cp-spec { position: relative; border-radius: 4px; cursor: crosshair; touch-action: none; margin-bottom: 8px; background-size: 100% 100%; }
.su-cp-mark { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.su-cp-rgb { display: grid; grid-template-columns: 44px 1fr 58px; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.su-cp-rgb input[type=range] { -webkit-appearance: none; appearance: none; height: 12px; border-radius: 6px; border: 1px solid #c9ccd0; margin: 0; padding: 0; }
.su-cp-rgb input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #555; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.su-cp-rgb input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid #555; }
.su-cp-rgb input[type=number] { height: 32px; border: 1px solid #c9ccd0; border-radius: 7px; padding: 0 6px; font-size: 14px; width: 100%; }

/* full-screen Names & Numbers on phone / tablet */
.su-l-port .su-pop, .su-l-land .su-pop { padding: 0; }
.su-l-port .su-dlg-full, .su-l-land .su-dlg-full { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.su-dlg-full .su-dlg-b { flex: 1; min-height: 0; }
.su-l-port .su-dlg-full .su-nn-table, .su-l-land .su-dlg-full .su-nn-table { max-height: none; }
.su-l-port .su-dlg-full .su-dlg-f .su-btn, .su-l-land .su-dlg-full .su-dlg-f .su-btn { flex: 1; }

/* fold-away bars */
.su-hbar { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; flex: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f4f4f1; padding: 8px 10px !important; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.su-hbar span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); font-size: 10px; }

/* ---- portrait phones / tablets ---- */
.su-l-port .su-shell { inset: 0; border-radius: 0; display: flex; flex-direction: column; }
.su-l-port .su-top { padding: 6px 10px; flex: none; }
.su-l-port .su-brand h2 { font-size: 17px; }
.su-l-port .su-sub { display: none; }
.su-l-port .su-hbar { display: flex; }
.su-l-port .su-hdr { display: none; flex: none; max-height: 58%; overflow-y: auto; background: #fff; }
.su-l-port.su-open-top .su-hdr { display: block; }
.su-l-port .su-mat { flex: 1; min-height: 0; }
.su-l-port .su-ftr { display: none; flex-direction: column; min-height: 0; background: #fff; }
.su-l-port.su-open-bot .su-ftr { display: flex; flex: 1; }
.su-l-port.su-open-bot .su-mat { display: none; }
.su-l-port .su-3d { flex: 1; min-height: 0; border: 0; }
.su-l-port .su-3d-head { padding: 8px 12px 4px; }
.su-l-port .su-3d-note { display: none; }
.su-l-port .su-3d-stage { margin: 0 8px; min-height: 0; }
.su-l-port .su-foot, .su-l-land .su-foot { padding: 8px; gap: 6px; flex-wrap: wrap; flex: none; }
.su-l-port .su-foot-r, .su-l-land .su-foot-r { gap: 6px; justify-content: flex-start; }
.su-l-port .su-btn, .su-l-land .su-foot .su-btn { padding: 7px 10px; font-size: 13px; border-radius: 7px; }
.su-l-port .su-status, .su-l-land .su-status { display: none; }
.su-l-port .su-export-group, .su-l-land .su-export-group { border-right: 0; padding-right: 0; margin-right: 0; }
.su-l-port .su-tape-wrap, .su-l-land .su-tape-wrap { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; gap: 8px; }
.su-l-port .su-tape-side, .su-l-land .su-tape-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-l-port .su-total, .su-l-land .su-total { padding: 6px 10px; }
.su-l-port .su-ring, .su-l-land .su-ring { width: 40px; height: 40px; font-size: 17px; }
.su-l-port .su-total-l small, .su-l-land .su-total-l small, .su-l-port .su-linked span span, .su-l-land .su-linked span span { display: none; }
.su-l-port .su-rail, .su-l-land .su-rail { flex-direction: row; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; padding: 4px; -webkit-overflow-scrolling: touch; }
.su-l-port .su-rail-h, .su-l-port .su-rail-sep, .su-l-land .su-rail-h, .su-l-land .su-rail-sep { display: none; }
.su-l-port .su-rail button, .su-l-land .su-rail button { min-width: 64px; flex: none; }
.su-l-port .su-scroll, .su-l-land .su-scroll { padding: 0; }
.su-l-port .su-hint, .su-l-land .su-hint { display: none; }
.su-l-port .su-zoom, .su-l-land .su-zoom { top: 8px; right: 8px; }
.su-l-port .su-zoom button, .su-l-land .su-zoom button { width: 32px; height: 32px; }
.su-l-port .su-zoom span, .su-l-land .su-zoom span { min-width: 44px; font-size: 12px; }
.su-l-port .su-preview-bar, .su-l-land .su-preview-bar { top: 52px; }
.su-l-port .su-panel, .su-l-land .su-panel { left: 6px; bottom: 6px; width: calc(100% - 12px); max-height: 62%; padding: 10px 44px 12px 12px; }
.su-l-port .su-tape-main, .su-l-land .su-tape-main { -webkit-overflow-scrolling: touch; }

/* ---- landscape phones / tablets: controls 30% · one piece 40% · 3D 30% ---- */
.su-l-land .su-shell { inset: 0; border-radius: 0; display: grid; grid-template-columns: 30% 40% 30%; grid-template-rows: minmax(0, 1fr); }
.su-l-land .su-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); background: #fff; }
.su-l-land .su-top { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
.su-l-land .su-brand h2 { font-size: 15px; }
.su-l-land .su-logo { width: 30px; height: 30px; }
.su-l-land .su-sub { display: none; }
.su-l-land .su-units button { padding: 4px 10px; font-size: 12px; }
.su-l-land .su-top .su-x { width: 34px; height: 34px; }
/* v1.12.0: the header buttons wrap inside the left column; the close button stays in the corner. */
.su-l-land .su-side { overflow-x: hidden; }
.su-l-land .su-top { position: relative; padding-right: 48px; }
.su-l-land .su-top-r { flex-wrap: wrap; gap: 6px; min-width: 0; }
.su-l-land .su-top .su-x { position: absolute; top: 6px; right: 8px; }
.su-l-land .su-foot { flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); margin-top: auto; }
.su-l-land .su-mat { min-height: 0; }
.su-l-land .su-3d { min-height: 0; border-left: 1px solid var(--line); }
.su-l-land .su-3d-head { padding: 8px 10px 4px; }
.su-l-land .su-3d-head h3 { font-size: 16px; }
.su-l-land .su-3d-note { display: none; }
.su-l-land .su-3d-stage { margin: 0 6px 6px; min-height: 0; }
.su-l-land .su-3d-views button { padding: 5px 8px; font-size: 12px; }
.su-l-land .su-seg { padding: 10px 6px 4px; }
.su-l-land .su-seg b { font-size: 18px; }
.su-f-col input[type=color] { width: 64px; }
.su-dlg { min-width: 0; }
.su-l-port .su-slide, .su-l-land .su-slide { padding-top: 54px; }
.su-l-port .su-dlg-full .su-nn-table input[data-nnf="name"], .su-l-land .su-dlg-full .su-nn-table input[data-nnf="name"] { min-width: 120px; }
.su-l-port .su-dlg-full .su-dlg-b, .su-l-land .su-dlg-full .su-dlg-b { overflow-x: hidden; }
.su-l-land .su-side > * { flex: none; }
.su-l-land .su-side > .su-foot { margin-top: auto; }
.su-l-port .su-slide, .su-l-land .su-slide { padding-bottom: 52px; }

/* ===================== v1.5 ===================== */
/* darker text everywhere (was light grey on some themes) */
.su-modal { --mut: #33363a; }
.su-seg, .su-seg b { color: #1d1f21 !important; }
.su-seg small { color: #2b2d30 !important; }
.su-seg.on, .su-seg.on b { color: #fff !important; }
.su-seg.on small { color: rgba(255,255,255,.9) !important; }
.su-seg:disabled { opacity: .5; }
.su-q-in { color: #1d1f21 !important; }
.su-q small { color: #33363a; }
.su-q-row button { color: #1d1f21 !important; border-color: #8e9399; }
.su-q-row button:disabled { opacity: .45; }
.su-rail button { color: #1d1f21 !important; }
.su-pn-note { color: #e2e2e2; }

/* one-line labels (label + unit) */
.su-f-l { display: block; white-space: nowrap; }
.su-pn-letters { font-size: 12px; color: #e2e2e2; align-self: flex-end; padding-bottom: 10px; white-space: nowrap; }

/* pattern button + selection */
.su-ph-pat.has { border-color: var(--ink) !important; }
.su-ph-pat.on { background: #7b3fd0 !important; color: #fff !important; border-color: #7b3fd0 !important; }
.su-narrow .su-ph-pat span { display: none; }
.su-sel-pat { border-color: #7b3fd0; border-style: dashed; }
.su-sel-pat .su-h, .su-sel-pat .su-rot { border-color: #7b3fd0; }
.su-sel-pat .su-sel-dim { background: #7b3fd0; }

/* pattern library */
.su-dlg-wide { width: min(860px, 100%); }
.su-pats .su-shapes-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.su-pat-card { position: relative; }
.su-pat-b { width: 100%; border: 1.5px solid #d4d7db; background: #fff; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.su-pat-b:hover { border-color: var(--ink); background: #fff8dc; }
.su-pat-b img { width: 86px; height: 86px; object-fit: contain; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; border-radius: 4px; }
.su-pat-b small { font-size: 12px; color: #33363a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-pat-del { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--red); color: #fff !important; font-size: 15px !important; padding: 0; line-height: 1 !important; }
.su-pat-priv { font-size: 12px; color: #33363a; background: #eef6ee; border-radius: 10px; padding: 2px 8px; margin-left: 6px; }
.su-pat-up { margin-top: 8px; }

/* font picker: 2 columns, about 6 rows, big previews */
.su-fp { width: min(640px, calc(100% - 16px)); max-height: min(476px, calc(100% - 16px)); gap: 3px; padding: 4px; }
.su-fp-b { height: 76px; padding: 0 12px !important; line-height: 1 !important; display: flex; align-items: center; overflow: hidden; }

/* ---- settings panel on phones: 2 compact rows, each row scrolls sideways ---- */
@media (max-width: 600px) {
	.su-l-port .su-panel { max-height: 132px; padding: 6px 40px 6px 8px; gap: 6px; border-radius: 12px; overflow-y: auto; overscroll-behavior: contain; }
	.su-l-port .su-pn-row { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: flex-end; }
	.su-l-port .su-pn-row::-webkit-scrollbar { display: none; }
	.su-l-port .su-pn-row + .su-pn-row { padding-top: 6px; }
	.su-l-port .su-pn-row > * { flex: none; }
	.su-l-port .su-f { font-size: 11px; gap: 2px; }
	.su-l-port .su-f input[type=number], .su-l-port .su-f input[type=text], .su-l-port .su-f select { height: 34px; width: 64px; font-size: 14px; padding: 0 6px; border-radius: 7px; }
	.su-l-port .su-f-wide input { width: 150px !important; }
	.su-l-port .su-f-col input[type=color] { width: 46px; height: 34px; }
	.su-l-port .su-fontbtn { height: 34px; min-width: 120px; font-size: 16px !important; }
	.su-l-port .su-tag { font-size: 13px; padding: 0; align-self: center; }
	.su-l-port .su-pn-note, .su-l-port .su-pn-lock, .su-l-port .su-pn-letters { font-size: 11px; white-space: nowrap; padding-bottom: 8px; }
	.su-l-port .su-pn-src br { display: none; }
	.su-l-port .su-panel .su-btn { padding: 7px 10px; font-size: 12.5px; }
	.su-l-port .su-pn-x { width: 28px; height: 28px; font-size: 18px !important; top: 6px; right: 6px; }
	.su-l-port .su-warps button { padding: 4px 6px; }
}
/* ---- tablets upright: more rows ---- */
@media (min-width: 601px) {
	.su-l-port .su-panel { max-height: 40%; }
}
/* ---- landscape: settings replace the left panel while editing ---- */
.su-l-land .su-panel { position: static; width: auto; max-height: none; flex: 1 1 auto; border-radius: 0; box-shadow: none; padding: 12px 44px 14px 12px; }
.su-l-land .su-panel[hidden] { display: none; }
.su-l-land.su-editing .su-side > :not(.su-panel):not(.su-railwrap) { display: none !important; }
.su-l-land.su-editing .su-railwrap { border-bottom: 1px solid #333; }
.su-l-land .su-side { position: relative; }
.su-l-land .su-pn-x { position: absolute; top: 8px; right: 8px; }
.su-l-land .su-f input[type=number], .su-l-land .su-f input[type=text], .su-l-land .su-f select { width: 70px; height: 34px; font-size: 14px; }
.su-l-land .su-fontbtn { min-width: 130px; height: 34px; font-size: 16px !important; }

/* ===================== v1.6 ===================== */
/* desktop + landscape: controls left · pieces middle · 3D right (folds away) */
.su-l-land .su-shell { grid-template-columns: clamp(280px, 30%, 560px) minmax(0, 1fr) auto; }
.su-3dcol { display: flex; min-height: 0; min-width: 0; border-left: 1px solid var(--line); background: #fff; }
.su-3dcol .su-3d { display: none; width: clamp(260px, 30vw, 560px); border-left: 0; }
.su-3d-open .su-3dcol .su-3d { display: flex; }
.su-3dbar { flex: none; width: 52px; border: 0; padding: 14px 0 !important; background: var(--gold); color: var(--ink) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; animation: su3dpulse 2.4s ease-in-out 3; }
.su-3dbar b { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 17px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.su-3dbar svg { width: 28px; height: 28px; fill: var(--ink); }
.su-3dbar-a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 13px; }
.su-3dbar:hover { background: #ffd65a; }
.su-3d-open .su-3dbar { width: 30px; background: #2b2b2b; color: #fff !important; animation: none; gap: 10px; }
.su-3d-open .su-3dbar b { font-size: 12.5px; color: #fff; }
.su-3d-open .su-3dbar-a { width: 22px; height: 22px; font-size: 10px; background: var(--gold); color: var(--ink); }
@keyframes su3dpulse { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: inset 0 0 0 4px rgba(20,20,20,.35); } }
.su-l-land .su-3d-head { padding: 10px 12px 6px; }

/* resizable settings panel (portrait) */
.su-pn-grip { display: none; }
.su-l-port .su-pn-grip { display: flex; justify-content: center; align-items: center; position: sticky; top: 0; margin: 0; height: 22px; cursor: ns-resize; touch-action: none; z-index: 2; background: var(--ink); flex: none; }
.su-l-port .su-pn-grip i { width: 46px; height: 5px; border-radius: 3px; background: #777; }
.su-l-port .su-panel { max-height: none !important; overflow-y: auto; }
.su-l-port .su-panel > * { flex: none; }
.su-l-port .su-pn-x { z-index: 3; }

/* sideways-scroll hints */
.su-hs { position: relative; min-width: 0; }
.su-hs > :first-child { scrollbar-width: thin; scrollbar-color: #9aa0a6 transparent; }
.su-hs > :first-child::-webkit-scrollbar { height: 6px; display: block; }
.su-hs > :first-child::-webkit-scrollbar-thumb { background: #9aa0a6; border-radius: 3px; }
.su-hs.r > :first-child { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); }
.su-hs.l > :first-child { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px); mask-image: linear-gradient(90deg, transparent, #000 46px); }
.su-hs.l.r > :first-child { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); }
.su-hs-b { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0 !important; background: rgba(20,20,20,.82) !important; color: #fff !important; font-size: 20px !important; line-height: 1 !important; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.su-hs-l { left: 2px; }
.su-hs-r { right: 2px; }
.su-hs.l .su-hs-l, .su-hs.r .su-hs-r { display: grid; }
.su-panel .su-hs-b { width: 26px; height: 26px; font-size: 17px !important; background: rgba(255,255,255,.9) !important; color: var(--ink) !important; }
.su-hs + .su-hs { padding-top: 6px; border-top: 1px solid #333; }
.su-l-land .su-side > .su-hs { flex: none; }
.su-l-port .su-panel { padding-top: 0 !important; }
.su-l-port .su-pn-x { top: 22px; }
.su-3dcol .su-3d { width: var(--su3dw, clamp(260px, 30vw, 620px)); }
.su-3dbar { touch-action: none; }
.su-3d-open .su-3dbar { cursor: ew-resize; }
.su-3dbar-g { font-size: 20px; line-height: 1; color: #bbb; }

/* v1.6.1 — Solid / Gradient color box */
.su-cp [hidden] { display: none !important; }
.su-cp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.su-cp-tabs button { border: 0; background: #fff; color: var(--ink); padding: 7px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.su-cp-tabs button.on { background: var(--ink); color: #fff; }
.su-cp-types { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.su-cp-ty { width: 38px; height: 30px; padding: 3px; border: 1.5px solid #c9ccd0; border-radius: 7px; background: #fff; cursor: pointer; }
.su-cp-ty i { display: block; width: 100%; height: 100%; border-radius: 4px; }
.su-cp-ty.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.su-cp-ang { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; font-weight: 600; }
.su-cp-ang input { width: 58px; height: 30px; border: 1px solid #c9ccd0; border-radius: 7px; padding: 0 6px; font-size: 14px; }
.su-cp-ang.off { opacity: .4; }
.su-cp-rev { width: 32px; height: 30px; border: 1.5px solid #c9ccd0; border-radius: 7px; background: #fff; font-size: 15px; cursor: pointer; }
.su-cp-gbar { position: relative; height: 26px; margin: 0 9px 22px; border-radius: 5px; cursor: copy; touch-action: none; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.su-cp-gfill { position: absolute; inset: 0; border-radius: 5px; border: 1px solid rgba(0,0,0,.25); }
.su-cp-stop { position: absolute; top: 30px; width: 18px; height: 18px; margin-left: -9px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #777; cursor: grab; touch-action: none; }
.su-cp-stop::before { content: ""; position: absolute; left: 50%; top: -8px; margin-left: -4px; border: 4px solid transparent; border-bottom-color: #777; }
.su-cp-stop.on { box-shadow: 0 0 0 2px var(--ink); }
.su-cp-stop.on::before { border-bottom-color: var(--ink); }
.su-cp-gbar.su-cp-off .su-cp-stop.on { opacity: .35; }
.su-cp-ghint { margin: 0 0 8px; font-size: 12px; color: var(--mut); text-align: center; }
.su-cp-gprev { height: 100px; border-radius: 8px; border: 1px solid rgba(0,0,0,.2); margin-bottom: 10px; }
input[type=color].su-grad::-webkit-color-swatch { opacity: 0; }
input[type=color].su-grad::-moz-color-swatch { opacity: 0; }
input[type=color].su-grad { background-clip: padding-box; }

/* v1.6.2 — zoom tool, size label */
.su-zoom .su-ztool.on { background: var(--ink); color: #fff; }
.su-ztool-on #su-scroll, .su-ztool-on #su-scroll .su-stage, .su-ztool-on #su-scroll .su-stage * { cursor: zoom-in !important; }
.su-ztool-on #su-scroll .su-sel { pointer-events: none; }
.su-zbox { position: absolute; z-index: 30; pointer-events: none; border: 1.5px dashed var(--ink); background: rgba(242,194,48,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.su-ph-size { font: 800 26px/1 var(--head); background: var(--ink); color: #fff; padding: 5px 12px; border-radius: 5px; margin-right: 2px; letter-spacing: .02em; }
.su-narrow .su-ph-size { font-size: 20px; padding: 4px 9px; }

/* v1.6.3 */
.su-cv { position: absolute; left: 0; top: 0; }
.su-l-port .su-zoom .su-zoom-fit, .su-l-land .su-zoom .su-zoom-fit { width: auto; padding: 0 10px 0 8px; border-radius: 16px; font-size: 13px; }
.su-ztool-on.su-zout #su-scroll, .su-ztool-on.su-zout #su-scroll .su-stage, .su-ztool-on.su-zout #su-scroll .su-stage * { cursor: zoom-out !important; }
/* piece header stays in view (top-left) while zoomed in */
.su-ph { position: sticky; top: 56px; left: 10px; z-index: 4; width: max-content; filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)); }
.su-cp-gprev { position: relative; overflow: hidden; }
.su-cp-gprev.su-cp-lin { cursor: crosshair; touch-action: none; }
.su-cp-gdir { display: none; position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.su-cp-lin .su-cp-gdir { display: block; }
.su-cp-gdir::before { content: ""; position: absolute; left: -1.5px; bottom: 0; width: 3px; height: 40px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); border-radius: 2px; }
.su-cp-gdir::after { content: ""; position: absolute; left: -7px; bottom: 38px; border: 7px solid transparent; border-bottom: 10px solid #fff; border-top: 0; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.45)); }

/* ===================== v1.7.0 product page ===================== */
/* "Design" magic button: flowing sublimation-ink fill, light sweep, 3D shirt tile */
.su-product-box .su-magic { position: relative; overflow: hidden; display: flex !important; align-items: center; gap: 16px; width: 100%; margin: 4px 0 2px; padding: 14px 18px 14px 14px !important; border: 0 !important; border-radius: 16px !important; cursor: pointer; text-align: left; color: #fff !important; font-family: inherit; line-height: 1.2; text-transform: none; letter-spacing: 0;
	background: linear-gradient(115deg, #00aeef, #6a3cff, #ec008c, #ff7a00, #ffd400, #00aeef) !important; background-size: 300% 300% !important; animation: su-mg-flow 6s ease-in-out infinite;
	box-shadow: 0 10px 28px rgba(236,0,140,.32), inset 0 0 0 2px rgba(255,255,255,.35) !important; text-shadow: 0 1px 2px rgba(0,0,0,.28); transition: transform .2s, box-shadow .2s; }
.su-product-box .su-magic::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: rotate(18deg); animation: su-mg-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.su-product-box .su-magic:hover, .su-product-box .su-magic:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(106,60,255,.42), inset 0 0 0 2px rgba(255,255,255,.55) !important; }
.su-product-box .su-magic:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.su-mg-art { flex: none; width: 76px; height: 76px; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #fff, #eef0f3); box-shadow: 0 4px 12px rgba(0,0,0,.22); display: grid; place-items: center; overflow: hidden; }
.su-mg-art img { width: 92%; height: 92%; object-fit: contain; display: block; transition: transform .35s; }
.su-magic:hover .su-mg-art img { transform: scale(1.08) rotate(-4deg); }
.su-mg-txt { display: flex; flex-direction: column; min-width: 0; }
.su-mg-t { font-weight: 800; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
.su-mg-s { font-weight: 500; font-size: 13.5px; opacity: .92; margin-top: 4px; }
.su-mg-go { margin-left: auto; font-size: 30px; line-height: 1; transition: transform .25s; padding-left: 4px; }
.su-magic:hover .su-mg-go { transform: translateX(5px); }
@keyframes su-mg-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes su-mg-sweep { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (max-width: 480px) { .su-mg-art { width: 60px; height: 60px; } .su-mg-t { font-size: 16px; } .su-mg-s { font-size: 12px; } .su-product-box .su-magic { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .su-product-box .su-magic, .su-product-box .su-magic::after { animation: none; } }

/* Quantity + Add to cart: side by side, normal proportions (themes differ: Astra, block themes …) */
form.cart.su-cart { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 10px !important; }
form.cart.su-cart > .su-product-box { flex: 0 0 100% !important; width: 100% !important; margin: 0 0 6px !important; order: -1; }
form.cart.su-cart > .quantity, form.cart.su-cart > .wc-block-components-quantity-selector { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; float: none !important; }
form.cart.su-cart .quantity .qty { width: 78px !important; height: 48px !important; min-height: 48px; padding: 0 6px !important; font-size: 17px !important; font-weight: 600; text-align: center; border-radius: 8px !important; box-sizing: border-box; }
form.cart.su-cart .single_add_to_cart_button { flex: 0 0 auto !important; width: auto !important; min-width: 180px; height: 48px !important; min-height: 48px; margin: 0 !important; padding: 0 28px !important; float: none !important; border-radius: 8px !important; font-size: 15px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; }
/* pattern spacing */
.su-pat-sp { align-items: flex-end; }
.su-pat-sp .su-f.off { opacity: .4; }
/* private libraries */
.su-lib-noimg { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: #f1f2f4; border-radius: 6px; font-weight: 700; color: #777; font-size: 13px; }

/* v1.7.1: the Design button is short and tall (title wraps), not a long bar */
.su-product-box .su-magic { width: auto; max-width: 430px; min-height: 150px; padding: 24px 22px 24px 20px !important; border-radius: 22px !important; gap: 18px; }
.su-product-box .su-magic .su-mg-art { width: 86px; height: 86px; border-radius: 16px; }
.su-product-box .su-magic .su-mg-t { font-size: 24px; line-height: 1.15; letter-spacing: .01em; }
.su-product-box .su-magic .su-mg-s { font-size: 15.5px; line-height: 1.35; margin-top: 8px; }
.su-product-box .su-magic .su-mg-go { font-size: 34px; }
@media (max-width: 480px) { .su-product-box .su-magic { max-width: 100%; min-height: 0; padding: 18px 16px !important; } .su-product-box .su-magic .su-mg-t { font-size: 20px; } .su-product-box .su-magic .su-mg-art { width: 66px; height: 66px; } }

/* v1.7.3: quantity + Add to cart in our own row, spaced from the Design button / saved design */
form.cart.su-cart > .su-cart-row { flex: 0 0 100% !important; width: 100% !important; display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 18px 0 8px !important; }
.su-cart-row > * { margin: 0 !important; float: none !important; width: auto !important; flex: 0 0 auto !important; }
.su-cart-row .quantity { display: flex !important; align-items: stretch; }
.su-cart-row .quantity .qty { width: 84px !important; height: 52px !important; min-height: 52px; font-size: 18px !important; }
.su-cart-row .single_add_to_cart_button { height: 52px !important; min-height: 52px; min-width: 200px; padding: 0 30px !important; font-size: 16px !important; letter-spacing: .04em; }
.su-product-box { margin-bottom: 0 !important; }

/* ===================== v1.7.4: Design button styles (Settings → Button style) ===================== */
.su-mg-wrap { width: 100%; max-width: 460px; }
.su-magic .su-mg-in { display: contents; }
.su-magic .su-mg-drops, .su-magic .su-mg-badge, .su-magic .su-mg-cta { display: none; }
.su-product-box .su-magic .su-mg-art img { object-fit: contain; }
.su-mg-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; text-shadow: none; }
.su-mg-cta i { font-style: normal; display: inline-block; animation: su-mg-nudge 1.2s ease-in-out infinite; }
@keyframes su-mg-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@property --su-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes su-mg-spin { to { --su-a: 360deg; } }
@keyframes su-mg-shine { to { background-position: -220% 0; } }
.su-product-box .su-magic.su-ms-neon .su-mg-go, .su-product-box .su-magic.su-ms-burst .su-mg-go, .su-product-box .su-magic.su-ms-holo .su-mg-go { display: none; }
.su-product-box .su-magic.su-ms-neon .su-mg-cta, .su-product-box .su-magic.su-ms-burst .su-mg-cta, .su-product-box .su-magic.su-ms-holo .su-mg-cta { display: inline-flex; }
.su-product-box .su-magic.su-ms-neon .su-mg-t, .su-product-box .su-magic.su-ms-burst .su-mg-t, .su-product-box .su-magic.su-ms-holo .su-mg-t { font-size: 22px; }
.su-product-box .su-magic .su-mg-txt { min-width: 0; flex: 1; }

/* Neon Showroom */
.su-product-box .su-magic.su-ms-neon { padding: 3px !important; border-radius: 22px !important; max-width: 460px; min-height: 0; text-shadow: none;
	background: conic-gradient(from var(--su-a), #00e5ff, #7b5cff, #ff2fb3, #ffb800, #00e08a, #00e5ff) !important; animation: su-mg-spin 3s linear infinite;
	box-shadow: 0 0 34px rgba(123,92,255,.45), 0 12px 30px rgba(0,0,0,.25) !important; }
.su-product-box .su-magic.su-ms-neon::after { display: none; }
.su-magic.su-ms-neon .su-mg-in { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 156px; border-radius: 19px; padding: 16px 20px 16px 12px; color: #fff; position: relative; overflow: hidden;
	background: radial-gradient(120% 120% at 15% 0%, #2b2260 0%, #120f24 55%, #07060d 100%); }
.su-magic.su-ms-neon .su-mg-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; animation: su-mg-twinkle 3s ease-in-out infinite;
	background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 70%, #fff, transparent), radial-gradient(2px 2px at 45% 85%, #fff, transparent); }
.su-product-box .su-magic.su-ms-neon .su-mg-art { position: relative; width: 116px; height: 116px; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.su-magic.su-ms-neon .su-mg-art img { position: relative; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.su-magic.su-ms-neon .su-mg-art::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 110px; height: 26px; margin-left: -55px; border-radius: 50%; z-index: 1;
	background: radial-gradient(closest-side, rgba(0,229,255,.85), rgba(123,92,255,.35) 60%, transparent); animation: su-mg-pedestal 2.4s ease-in-out infinite; }
.su-magic.su-ms-neon .su-mg-t { background: linear-gradient(90deg, #fff 0%, #a8f3ff 30%, #ffc3f0 60%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: su-mg-shine 3.5s linear infinite; }
.su-magic.su-ms-neon .su-mg-cta { background: linear-gradient(90deg, #00e5ff, #ff2fb3); color: #fff; box-shadow: 0 0 16px rgba(255,47,179,.55); }
.su-product-box .su-magic.su-ms-neon:hover { transform: translateY(-2px); box-shadow: 0 0 48px rgba(255,47,179,.6), 0 14px 34px rgba(0,0,0,.3) !important; }
@keyframes su-mg-pedestal { 0%, 100% { opacity: .7; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes su-mg-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

/* Ink Burst: the shirt pops out over the top edge; ink drops rise; tilts toward the pointer */
.su-mg-wrap.su-ms-burst { perspective: 900px; padding-top: 34px; }
.su-product-box .su-magic.su-ms-burst { overflow: visible; transform-style: preserve-3d; transition: transform .15s ease-out; max-width: 460px; }
.su-product-box .su-magic.su-ms-burst::after { display: none; }
.su-magic.su-ms-burst .su-mg-drops { display: block; position: absolute; inset: 0; border-radius: 22px; overflow: hidden; pointer-events: none; }
.su-magic.su-ms-burst .su-mg-drops i { position: absolute; bottom: -30px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(1px); animation: su-mg-rise 5s linear infinite; }
.su-magic.su-ms-burst .su-mg-drops i:nth-child(1) { left: 12%; }
.su-magic.su-ms-burst .su-mg-drops i:nth-child(2) { left: 38%; width: 12px; height: 12px; animation-delay: 1.2s; animation-duration: 4s; }
.su-magic.su-ms-burst .su-mg-drops i:nth-child(3) { left: 62%; width: 30px; height: 30px; animation-delay: 2.4s; animation-duration: 6s; }
.su-magic.su-ms-burst .su-mg-drops i:nth-child(4) { left: 85%; width: 16px; height: 16px; animation-delay: .6s; animation-duration: 4.6s; }
.su-product-box .su-magic.su-ms-burst .su-mg-art { position: relative; width: 140px; height: 140px; align-self: flex-start; margin: -64px 0 0 -6px; background: none; box-shadow: none; overflow: visible; border-radius: 0; transform: translateZ(40px); }
.su-magic.su-ms-burst .su-mg-art::before { content: ""; position: absolute; inset: 18% 10% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.su-magic.su-ms-burst .su-mg-art img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
.su-magic.su-ms-burst .su-mg-txt { transform: translateZ(25px); }
.su-magic.su-ms-burst .su-mg-cta { background: #fff; color: #6a3cff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
@keyframes su-mg-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-200px) scale(1.2); opacity: 0; } }

/* Holo Foil */
.su-product-box .su-magic.su-ms-holo { color: #111 !important; text-shadow: none; max-width: 460px;
	background: linear-gradient(115deg, #f3f6ff, #ffe3f7 18%, #d9f7ff 36%, #fff6c9 54%, #e5dbff 72%, #d9fff0 90%, #f3f6ff) !important; background-size: 300% 300% !important;
	box-shadow: 0 12px 30px rgba(110,90,200,.28), inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 -10px 30px rgba(140,120,255,.18) !important; }
.su-product-box .su-magic.su-ms-holo::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; animation: su-mg-foil 4s linear infinite;
	background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 18px, rgba(255,255,255,.35) 22px, rgba(255,255,255,0) 30px); }
.su-product-box .su-magic.su-ms-holo::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); }
.su-product-box .su-magic.su-ms-holo .su-mg-art { position: relative; z-index: 2; width: 124px; height: 124px; border-radius: 50%; overflow: visible; background: radial-gradient(circle at 50% 40%, #fff, #eef0ff 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 8px 18px rgba(80,60,180,.25); }
.su-magic.su-ms-holo .su-mg-art img { width: 92%; height: 92%; }
.su-magic.su-ms-holo .su-mg-badge { display: grid; place-items: center; position: absolute; top: -2px; right: -4px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; font-size: 13px; color: #3b2a00;
	background: radial-gradient(circle at 35% 30%, #fff3b8, #e2b23d 60%, #9a7419); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(226,178,61,.8); animation: su-mg-pulse 2s ease-in-out infinite; }
.su-magic.su-ms-holo .su-mg-txt { position: relative; z-index: 2; }
.su-magic.su-ms-holo .su-mg-t { background: linear-gradient(90deg, #1a1033, #5b2bd6, #c2187e, #1a1033); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: su-mg-shine 4s linear infinite; }
.su-magic.su-ms-holo .su-mg-s { color: #3a3550; opacity: 1; }
.su-magic.su-ms-holo .su-mg-cta { background: #111; color: #fff; }
@keyframes su-mg-foil { to { background-position: 120px 0; } }
@keyframes su-mg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (max-width: 480px) {
	.su-product-box .su-magic.su-ms-neon .su-mg-art, .su-product-box .su-magic.su-ms-holo .su-mg-art { width: 90px; height: 90px; }
	.su-product-box .su-magic.su-ms-burst .su-mg-art { width: 112px; height: 112px; margin-top: -52px; }
	.su-product-box .su-magic.su-ms-neon .su-mg-t, .su-product-box .su-magic.su-ms-burst .su-mg-t, .su-product-box .su-magic.su-ms-holo .su-mg-t { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .su-product-box .su-magic, .su-product-box .su-magic *, .su-product-box .su-magic::before, .su-product-box .su-magic::after, .su-magic .su-mg-in::before { animation: none !important; } }

/* v1.7.5: Button size (Settings). The whole button scales (picture, text, pill, effects) with CSS
   zoom, so it stays sharp; phones keep the normal size so it always fits the screen. */
@media (min-width: 700px) {
	.su-mg-wrap { zoom: var(--su-mg-z, 1); }
}

/* v1.7.7: subtle controls hint floating on the 3D preview */
.su-3d-stage .su-3d-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
	padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.72); color: #5f6368; font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
	box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: opacity .4s; }
.su-3d-stage:hover .su-3d-hint { opacity: .45; }
@media (hover: none) { .su-3d-stage .su-3d-hint { display: none; } }

/* v1.8.1: guide line names, outside the outline (zoom with the piece) */
/* v2.1.1: own class names only (a theme's ".up" / ".fold" styles drew boxes here) + a reset. */
.su-modal .su-gl { position: absolute; display: flex; align-items: flex-start; gap: .35em; white-space: nowrap; font-weight: 700; letter-spacing: .04em; line-height: 1; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; width: auto; min-width: 0; max-width: none; min-height: 0; transform: none; text-transform: none; text-shadow: none; opacity: 1; overflow: visible; }
.su-modal .su-gl.su-gl-up { align-items: flex-end; }
.su-modal .su-gl::before { content: ""; width: 1.1em; flex: none; border-top: 2px dashed currentColor; }
.su-modal .su-gl::after { content: none; }
.su-modal .su-gl.su-gl-up::before { margin-bottom: -1px; }
.su-modal .su-gl:not(.su-gl-up)::before { margin-top: -1px; }
.su-modal .su-gl.su-gl-fold { color: #0089bd; }
.su-modal .su-gl.su-gl-sew { color: #d0181c; }

/* v1.8.8: spinning GIF (staff) */
.su-3d-gif { margin-left: auto; margin-right: 10px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: 700 11px/1.3 system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; opacity: .8; }
.su-3d-gif:hover { opacity: 1; }
.su-gif-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.su-gif-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.su-gif-form select, .su-gif-form input { padding: 6px 8px; border: 1px solid #cfd4dc; border-radius: 6px; font: inherit; font-weight: 400; }
.su-gif-prev { display: flex; justify-content: center; padding: 10px; border-radius: 8px; background-color: #fff; background-image: linear-gradient(45deg, #e8eaee 25%, transparent 25%), linear-gradient(-45deg, #e8eaee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8eaee 75%), linear-gradient(-45deg, transparent 75%, #e8eaee 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.su-gif-prev img { display: block; max-width: 100%; height: auto; }

/* v1.8.9: the button picture keeps its transparent background whatever the theme or an
   image/lazy-load plugin adds to images (background, border, shadow, placeholder). */
.su-product-box .su-mg-art img, .su-magic .su-mg-art img { background: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; opacity: 1 !important; }

/* ---- Design Templates (v1.9.3) ---- */
/* v1.12.0: a shiny button in colors that stand out from the black and gold. */
.su-modal .su-tpl-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(110deg, #00c6ff, #7b5cff 45%, #ff3fb4 75%, #00c6ff); background-size: 250% 100%; color: #fff; border: 0; border-radius: 22px; padding: 9px 18px; font: 700 15px/1 var(--head, inherit); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; box-shadow: 0 0 0 2px rgba(123,92,255,.45), 0 4px 18px rgba(255,63,180,.45); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.25); animation: su-tpl-flow 6s linear infinite, su-tpl-glow 2.4s ease-in-out infinite; }
.su-modal .su-tpl-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-20deg); animation: su-tpl-shine 3.2s ease-in-out infinite; z-index: -1; pointer-events: none; }
.su-modal .su-tpl-btn:hover { filter: brightness(1.12) saturate(1.1); transform: translateY(-1px); }
.su-modal .su-tpl-btn svg { width: 17px; height: 17px; fill: #fff; flex: none; }
@keyframes su-tpl-flow { to { background-position: 250% 0; } }
@keyframes su-tpl-glow { 50% { box-shadow: 0 0 0 3px rgba(0,198,255,.55), 0 4px 24px rgba(123,92,255,.65); } }
@keyframes su-tpl-shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .su-modal .su-tpl-btn, .su-modal .su-tpl-btn::after { animation: none; } }
.su-modal .su-tpl-save { background: none; border: 1.5px solid #6b6b6b; color: #eee; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.su-modal .su-tpl-save:hover { border-color: var(--gold); color: var(--gold); }
.su-l-port .su-tpl-bl, .su-l-land .su-tpl-bl { display: none; }
.su-l-port .su-tpl-btn, .su-l-land .su-tpl-btn { padding: 7px 12px; font-size: 13px; }
.su-l-port .su-tpl-save, .su-l-land .su-tpl-save { padding: 5px 9px; font-size: 11px; }
.su-l-port .su-top-r { gap: 6px; }

.su-tpl-ov { position: absolute; inset: 10px; z-index: 9; background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.su-tpl-ov[hidden] { display: none; }
.su-l-port .su-tpl-ov, .su-l-land .su-tpl-ov { inset: 0; border-radius: 0; }
.su-tpl-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--ink); color: #fff; }
.su-tpl-head h2 { flex: 1; font: 700 22px/1.1 var(--head, inherit); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.su-tpl-head .su-btn { background: transparent; color: #fff; border-color: #777; }
.su-tpl-cats { display: flex; gap: 8px; padding: 12px 18px; overflow-x: auto; border-bottom: 1px solid var(--line); flex: none; align-items: center; }
.su-tpl-chip { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 20px; padding: 7px 14px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.su-tpl-chip i { font-style: normal; color: var(--mut); font-weight: 600; margin-left: 2px; }
.su-tpl-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.su-tpl-chip.on i { color: var(--gold); }
.su-tpl-catops { display: inline-flex; gap: 2px; flex: none; }
.su-tpl-catops button { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 4px; }
.su-tpl-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding: 18px; align-content: start; }
.su-tpl-tile { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid #ececec; background: var(--su-tpl-bg, #fff); transition: transform .15s, box-shadow .15s; }
.su-tpl-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.su-tpl-pick { position: relative; display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.su-tpl-img { display: block; aspect-ratio: 1200 / 1250; background: var(--su-tpl-bg, #fff); }
.su-tpl-img img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; border: 0; box-shadow: none; background: none; }
/* v2.0.1: Safari (iPhone / iPad) squeezed the rows to fit the window, cutting the pictures. Rows and
 * tiles now always keep their full height and the grid scrolls instead. */
.su-tpl-grid { grid-auto-rows: max-content; -webkit-overflow-scrolling: touch; }
.su-tpl-tile { min-height: max-content; }
.su-tpl-tile > *, .su-tpl-pick > .su-tpl-img { flex: none; }
.su-tpl-img { width: 100%; height: auto; }
@supports not (aspect-ratio: 1 / 1) {
	.su-tpl-img { position: relative; height: 0; padding-bottom: 104.17%; }
	.su-tpl-img img { position: absolute; inset: 0; }
}
.su-tpl-cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 12px; }
.su-tpl-cap b { font-size: 15px; }
.su-tpl-cap small { color: var(--mut); font-size: 12px; }
.su-tpl-use { position: absolute; right: 12px; bottom: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 16px; opacity: 0; transition: opacity .15s; }
.su-tpl-tile:hover .su-tpl-use, .su-tpl-pick:focus-visible .su-tpl-use { opacity: 1; }
.su-tpl-tools { display: flex; gap: 4px; padding: 0 10px 10px; flex-wrap: wrap; }
.su-tpl-tools button { border: 1px solid #c9ccd1; background: #fff; border-radius: 6px; font-size: 12px; padding: 3px 8px; cursor: pointer; }
.su-tpl-tools .su-danger { color: var(--red); }
.su-tpl-empty { padding: 40px 18px; text-align: center; color: var(--mut); font-size: 15px; }
.su-tpl-form input[type="text"] { width: 100%; }
.su-tpl-form .su-tpl-new[hidden] { display: none; }
@media (max-width: 640px) {
	.su-tpl-grid { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
	.su-tpl-head h2 { font-size: 18px; }
	.su-tpl-use { opacity: 1; }
}

/* ---- Neon spot colors (v1.9.4) ---- */
.su-neon-row { align-items: center; }
.su-modal .su-neon-tag { background: linear-gradient(90deg, #e6ff00, #39ff14, #ff2fa8, #b026ff); color: #141414; }
.su-neon-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 4px 4px 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.su-neon-chip i, .su-neon-col i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset, 0 0 6px rgba(0,0,0,.15); flex: none; }
.su-modal .su-neon-chip button { border: 0; background: #eee; width: 20px; height: 20px; border-radius: 50%; font-size: 14px; line-height: 1; padding: 0; }
.su-modal .su-neon-btn { display: inline-flex; align-items: center; gap: 6px; }
.su-neon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.su-neon-col { display: inline-flex; align-items: center; gap: 6px; }
.su-neon-col select { padding: 4px 6px; border: 1px solid #cfd4dc; border-radius: 6px; font-size: 13px; }
.su-neon-fee { color: var(--green); font-weight: 600; }
.su-dlg.su-dlg-wand { width: auto; max-width: calc(100vw - 24px); }
.su-wand { display: flex; flex-direction: column; gap: 12px; }
.su-wand-stage { position: relative; margin: 0 auto; max-width: 100%; background: #fff repeating-conic-gradient(#e3e5e8 0 25%, #fff 0 50%) 0 0 / 16px 16px; box-shadow: 0 0 0 1px var(--line); }
.su-wand-stage canvas { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.su-wand-sel { cursor: crosshair; }
.su-wand-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; font-weight: 600; }
.su-wand-ctl label { display: inline-flex; align-items: center; gap: 6px; }
.su-wand-ctl input[type="number"] { width: 64px; padding: 4px 6px; border: 1px solid #cfd4dc; border-radius: 6px; }
.su-wand-ctl select { padding: 4px 6px; border: 1px solid #cfd4dc; border-radius: 6px; }
.su-wand-ctl small { font-weight: 400; color: var(--mut); }
.su-wand-ctl .su-pn-note { color: var(--mut); font-weight: 400; }
.su-wand-ctl .su-pn-note b { color: var(--ink); }
/* v1.10.0: neon parts of text */
.su-neon-part > span { font-size: 13px; color: inherit; white-space: nowrap; }
.su-neon-part.su-off { opacity: .45; }

/* v2.3.0: a locked element — no handles, a lock badge on the corner. */
.su-sel-locked { border-style: solid; border-color: #8a8f98; }
.su-lockic { position: absolute; right: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #8a8f98; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.su-lockic svg { width: 14px; height: 14px; fill: #8a8f98; stroke: #8a8f98; stroke-width: 2; }
.su-lockic svg path { fill: none; }
.su-sel-locked .su-sel-dim { background: #8a8f98; }
.su-panel input:disabled, .su-panel select:disabled, .su-panel button:disabled { opacity: .45; cursor: not-allowed; }

/* v2.4.0: Start All Over + its "are you sure" (No is the default, Yes is small and red) */
.su-btn.su-startall { color: #b42318; }
.su-btn.su-startall:hover { border-color: #b42318; }
.su-btn.su-btn-danger { background: #fff; border-color: #f0c2bd; color: #b42318; padding: 6px 10px; font-size: 12px; font-weight: 600; align-self: center; margin-right: auto; }
.su-btn.su-btn-danger:hover { background: #fef3f2; border-color: #b42318; }

/* v2.5.0: Text box with several lines (drag the corner to make it taller; long lines scroll) */
.su-f-text textarea { width: 210px; min-height: 38px; height: 58px; max-height: 300px; resize: vertical; overflow: auto; white-space: pre; overflow-wrap: normal; border: 1px solid #555; border-radius: 8px; padding: 7px 8px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.3; font-family: inherit; box-sizing: border-box; }
.su-l-port .su-f-text textarea { width: 150px; font-size: 14px; }
.su-align { flex-basis: 100%; display: flex; gap: 4px; }
.su-align button { border: 1px solid #555; background: #222; color: #ddd; border-radius: 8px; padding: 5px 8px; display: flex; align-items: center; }
.su-align button.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.su-align svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* v2.6.0: all pieces on screen (3D preview closed) — compact toolbars, icons only */
.su-multi .su-piece { gap: 6px; }
.su-multi .su-ph { min-height: 26px; gap: 4px; top: 52px; }
.su-multi .su-ph-size { font-size: 15px; padding: 4px 7px; border-radius: 4px; margin-right: 0; }
.su-multi .su-ph-l { font-size: 12px; padding: 5px 7px; margin-right: 2px; }
.su-multi .su-ph button, .su-multi .su-ph-col { padding: 4px 6px; border-radius: 6px; font-size: 12px; }
.su-multi .su-ph button span, .su-multi .su-ph-col span { display: none; }
.su-multi .su-ph-col input { width: 16px; height: 16px; }
.su-multi .su-ph svg { width: 14px; height: 14px; }
.su-multi .su-ph-del { width: 22px; height: 22px; font-size: 15px !important; }
.su-multi .su-dims { font-size: 11px; }
.su-multi .su-dims.big { font-size: 12px; }
.su-multi .su-dim-w span, .su-multi .su-dim-h span { padding: 1px 7px; }
.su-multi .su-ph-col { height: 26px; box-sizing: border-box; } .su-multi .su-ph-col input { margin: 0; display: block; }