/* Sticky Labels label designer (11 Oct 2026), /product/designer/. Same look as the new homepage and content pages:
   the logo's lime and olive on white, Barlow Condensed headings, labels on the builder's green 10mm cutting mat.
   Scoped to #sld. The legacy shell sheets put !important on p, h1-h6, a, button, input and span, set the root font to
   8px and end the page with div,ul,li{display:block}; so this file uses px only, has no <span>, and repeats
   !important where they fight. */
#sld {
  --ink: #1b211d; --ink-2: #48514b; --mute: #6f7872; --rule: #e2e6dd; --rule-2: #eef1ea; --paper: #fff; --wash: #f6f8f3;
  --lime: #a9cf34; --lime-2: #c6e06a; --lime-wash: #f3f8e3; --olive: #5f7f2a; --olive-ink: #4c6a1a; --mat: #eef4df; --red: #b42318;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block !important; position: relative; background: var(--paper); color: var(--ink);
  font: 400 15px/1.5 var(--body); text-align: left; -webkit-font-smoothing: antialiased; clear: both;
}
#sld *, #sld *::before, #sld *::after { box-sizing: border-box; -webkit-text-fill-color: currentColor; font-family: inherit; }
#sld [hidden] { display: none !important; }
#sld p { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit; font-family: inherit !important; }
#sld ul, #sld ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#sld li { margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; }
#sld li::before, #sld li::marker { content: none !important; }
#sld a { color: var(--olive-ink) !important; -webkit-text-fill-color: var(--olive-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
#sld b, #sld strong { font-weight: 700; }
#sld small { font-size: 13px; }
#sld em { font-style: normal; }
#sld svg { display: block; flex: none; }
#sld svg path, #sld svg rect, #sld svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#sld h1, #sld h2, #sld h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-transform: none !important; text-align: left !important; font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
#sld h1::before, #sld h1::after, #sld h2::before, #sld h2::after, #sld h3::before, #sld h3::after { content: none !important; display: none !important; }
#sld .sld-h1 { font-size: 30px !important; line-height: 1 !important; }
#sld .sld-h2 { font-size: 24px !important; line-height: 1.05 !important; margin-bottom: 6px !important; }
#sld .sld-h3 { font-size: 18px !important; line-height: 1.1 !important; margin-bottom: 10px !important; }
#sld .sld-help { color: var(--ink-2); font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 14px !important; }
#sld .sld-note { margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; background: var(--lime-wash); color: var(--olive-ink); font-size: 13.5px !important; }
#sld .sld-error { margin: 0 0 10px !important; color: var(--red); font-size: 13.5px !important; font-weight: 600; }
#sld .sld-empty { color: var(--mute); font-size: 14px !important; padding: 8px 0 !important; }

/* buttons and fields */
#sld button { font: inherit; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
#sld button:disabled { cursor: default; opacity: .45; }
#sld .sld-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px !important; border-radius: 999px !important; border: 1px solid transparent !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; width: auto !important; height: auto !important; }
#sld .sld-btn-go { background: var(--lime) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
#sld .sld-btn-go:hover { background: var(--lime-2) !important; }
#sld .sld-btn-dark { background: var(--ink) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
#sld .sld-btn-dark:hover { background: #000 !important; }
#sld .sld-btn-ghost { background: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; border-color: #cfd8c4 !important; }
#sld .sld-btn-ghost:hover { border-color: var(--ink) !important; }
#sld .sld-btn svg { width: 16px; height: 16px; }
#sld .sld-field { display: grid !important; gap: 6px; margin: 0 0 12px; }
#sld .sld-field > b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
#sld input[type="text"], #sld select, #sld textarea {
  display: block !important; width: 100% !important; height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid #cfd8c4 !important; border-radius: 10px !important; background: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
  font: 400 15px/1.3 var(--body) !important; box-shadow: none !important; outline: none; -webkit-appearance: none; appearance: none;
}
#sld select { padding-right: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2348514b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px !important; }
#sld textarea { height: auto !important; min-height: 44px !important; padding: 11px 12px !important; resize: none; line-height: 1.35 !important; overflow: hidden; }
#sld input[type="text"]:focus, #sld select:focus, #sld textarea:focus { border-color: var(--olive) !important; box-shadow: 0 0 0 3px rgba(169,207,52,.35) !important; }
#sld .sld-two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }

/* top bar */
#sld .sld-top { display: flex !important; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 16px 28px !important; border-bottom: 1px solid var(--rule); background: #fff; }
#sld .sld-head { display: flex !important; align-items: center; gap: 22px; min-width: 0; flex-wrap: wrap; }
#sld .sld-spec { display: grid !important; grid-template-columns: auto auto; grid-template-areas: "type change" "line change"; align-items: center; column-gap: 16px; padding: 8px 14px 8px 16px !important; border: 1px solid var(--rule) !important; border-radius: 14px !important; background: var(--wash) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-align: left; width: auto !important; height: auto !important; min-height: 0; max-width: 100%; }
#sld .sld-spec:hover { border-color: #cfd8c4 !important; background: #fff !important; }
#sld .sld-spec strong { grid-area: type; font-size: 15px; line-height: 1.25; }
#sld .sld-spec small { grid-area: line; color: var(--ink-2); line-height: 1.3; }
#sld .sld-spec em { grid-area: change; font-size: 13px; font-weight: 700; color: var(--olive-ink); text-decoration: underline; text-underline-offset: 3px; }
#sld .sld-buy { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; }
#sld .sld-price { display: grid !important; justify-items: end; line-height: 1.15; }
#sld .sld-price strong { font: 700 28px/1 var(--display); letter-spacing: .01em; }
#sld .sld-price small { color: var(--ink-2); }

/* work area */
#sld .sld-work { display: grid !important; grid-template-columns: 86px 340px minmax(0, 1fr); height: clamp(560px, calc(100vh - 210px), 900px); border-bottom: 1px solid var(--rule); }
#sld .sld-rail { display: flex !important; flex-direction: column; gap: 4px; padding: 12px 8px !important; border-right: 1px solid var(--rule); background: #fff; overflow-y: auto; }
#sld .sld-tool { display: grid !important; justify-items: center; gap: 5px; width: 100% !important; height: auto !important; padding: 10px 4px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--ink-2) !important; -webkit-text-fill-color: var(--ink-2) !important; text-align: center; }
#sld .sld-tool svg { width: 24px; height: 24px; }
#sld .sld-tool b { font-size: 12px; font-weight: 600; line-height: 1.15; }
#sld .sld-tool:hover { background: var(--wash) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
#sld .sld-tool[aria-selected="true"] { background: var(--lime-wash) !important; color: var(--olive-ink) !important; -webkit-text-fill-color: var(--olive-ink) !important; box-shadow: inset 0 0 0 1px #d9e9a8; }
#sld .sld-panel { overflow-y: auto; padding: 22px 22px 28px !important; border-right: 1px solid var(--rule); background: #fff; }
#sld .sld-pane { display: block !important; }

/* text lines */
#sld .sld-lines { display: grid !important; gap: 10px; margin-bottom: 12px; }
#sld .sld-line { position: relative; display: block !important; }
#sld .sld-line textarea { padding-right: 40px !important; }
#sld .sld-line.is-on textarea { border-color: var(--olive) !important; }
#sld .sld-line-x { position: absolute; top: 8px; right: 6px; display: grid !important; place-items: center; width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--mute) !important; -webkit-text-fill-color: var(--mute) !important; }
#sld .sld-line-x:hover { background: var(--wash) !important; color: var(--red) !important; }
#sld .sld-line-x svg { width: 16px; height: 16px; }
#sld .sld-btn-line { width: 100% !important; justify-content: flex-start !important; border: 1px dashed #b9c7a3 !important; background: #fff !important; color: var(--olive-ink) !important; -webkit-text-fill-color: var(--olive-ink) !important; border-radius: 12px !important; }
#sld .sld-btn-line:hover { border-style: solid !important; background: var(--lime-wash) !important; }

/* upload */
#sld .sld-drop { display: grid !important; justify-items: center; gap: 6px; width: 100% !important; height: auto !important; padding: 26px 16px !important; border: 2px dashed #b9c7a3 !important; border-radius: 16px !important; background: var(--wash) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-align: center; margin-bottom: 12px; }
#sld .sld-drop svg { width: 30px; height: 30px; color: var(--olive); }
#sld .sld-drop b { font-size: 16px; }
#sld .sld-drop small { color: var(--ink-2); }
#sld .sld-drop:hover, #sld .sld-drop.is-over { border-color: var(--olive) !important; background: var(--lime-wash) !important; }

/* templates */
#sld .sld-tpls { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
#sld .sld-tpl { display: grid !important; gap: 4px; padding: 8px !important; border: 1px solid var(--rule); border-radius: 12px; background: #fff; text-decoration: none !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
#sld .sld-tpl:hover { border-color: var(--olive); box-shadow: 0 6px 16px rgba(27,33,29,.08); }
#sld .sld-tpl i { display: grid !important; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--mat); overflow: hidden; }
#sld .sld-tpl img { max-width: 86%; max-height: 80%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(27,33,29,.18)); }
#sld .sld-tpl b { font-size: 13px; line-height: 1.25; }
#sld .sld-tpl small { color: var(--mute); font-size: 12px; }

/* layers */
#sld .sld-layers { display: grid !important; gap: 6px; }
#sld .sld-layer { display: flex !important; align-items: center; gap: 4px; padding: 4px 4px 4px 6px !important; border: 1px solid var(--rule) !important; border-radius: 10px; background: #fff !important; }
#sld .sld-layer.is-on { border-color: var(--olive) !important; background: var(--lime-wash) !important; }
#sld .sld-layer-pick { flex: 1; min-width: 0; height: 34px !important; width: auto !important; padding: 0 6px !important; border: 0 !important; background: transparent !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* checks */
#sld .sld-checks { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
#sld .sld-checks ul { display: grid !important; gap: 8px; }
#sld .sld-checks li { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px !important; border-radius: 10px; background: #fff6e5 !important; color: #7a4b00; font-size: 13.5px; line-height: 1.4; }
#sld .sld-checks li b { font-weight: 500; }
#sld .sld-checks li button { flex: none; height: auto !important; width: auto !important; padding: 2px 0 !important; border: 0 !important; background: none !important; color: #7a4b00 !important; -webkit-text-fill-color: #7a4b00 !important; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
#sld .sld-ok { display: flex !important; align-items: center; gap: 8px; color: var(--olive-ink); font-size: 14px; }
#sld .sld-ok svg { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--lime-wash); }

/* stage */
#sld .sld-stagewrap { position: relative; display: flex !important; flex-direction: column; min-width: 0; min-height: 0; background: var(--mat); }
#sld .sld-stage { position: relative; flex: 1; min-height: 0; overflow: hidden;
  background-color: var(--mat);
  background-image: linear-gradient(rgba(118,153,56,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(118,153,56,.16) 1px, transparent 1px);
  background-size: 37.8px 37.8px; }
#sld .sld-stage.is-drop { box-shadow: inset 0 0 0 3px var(--olive); }
#sld .sld-stage .canvas-container { position: absolute !important; inset: 0; background: transparent !important; } /* custom.css paints .canvas-container grey */
#sld .sld-loading { position: absolute; inset: 0; display: grid !important; place-content: center; justify-items: center; gap: 12px; color: var(--ink-2); font-weight: 600; background: rgba(238,244,223,.85); }
#sld .sld-loading i, #sld .sld-saving i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(95,127,42,.25); border-top-color: var(--olive); animation: sld-spin .8s linear infinite; }
@keyframes sld-spin { to { transform: rotate(360deg); } }
#sld .sld-toolbar { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px !important; background: #fff; border-bottom: 1px solid var(--rule); min-height: 56px; }
#sld .sld-toolbar[hidden] { display: none !important; }
#sld .sld-tgroup { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; }
#sld .sld-tb { display: inline-grid !important; place-items: center; min-width: 38px; width: auto !important; height: 38px !important; padding: 0 9px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1 !important; }
#sld .sld-tb svg { width: 19px; height: 19px; }
#sld .sld-tb:hover:not(:disabled) { background: var(--wash) !important; border-color: var(--rule) !important; }
#sld .sld-tb[aria-pressed="true"] { background: var(--lime-wash) !important; border-color: #d9e9a8 !important; color: var(--olive-ink) !important; -webkit-text-fill-color: var(--olive-ink) !important; }
#sld .sld-tb-b { font-weight: 800 !important; font-family: Georgia, serif !important; }
#sld .sld-tb-i { font-style: italic; font-family: Georgia, serif !important; }
#sld .sld-tb-del:hover:not(:disabled) { color: var(--red) !important; -webkit-text-fill-color: var(--red) !important; }
#sld .sld-font, #sld .sld-colour { position: relative; }
#sld .sld-font-btn { display: inline-flex !important; gap: 6px; min-width: 150px; justify-content: space-between !important; border-color: var(--rule) !important; font-size: 15px !important; }
#sld .sld-font-btn b { font-weight: 400; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sld .sld-font-btn svg { width: 14px; height: 14px; }
#sld .sld-font-list { position: absolute; z-index: 30; top: 44px; left: 0; width: 240px; max-height: 340px; overflow-y: auto; padding: 6px !important; border: 1px solid var(--rule); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(27,33,29,.18); display: grid !important; gap: 2px; }
#sld .sld-font-list button { display: block !important; width: 100% !important; height: auto !important; padding: 9px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-align: left; font-size: 18px !important; line-height: 1.2 !important; }
#sld .sld-font-list button:hover, #sld .sld-font-list button[aria-selected="true"] { background: var(--lime-wash) !important; }
#sld .sld-size { display: inline-flex !important; align-items: center; border: 1px solid var(--rule); border-radius: 10px; }
#sld .sld-size .sld-tb { min-width: 32px; height: 36px !important; }
#sld .sld-size input[type="text"] { width: 56px !important; height: 36px !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; text-align: center; font-weight: 600 !important; box-shadow: none !important; }
#sld .sld-swatch-btn { border-color: var(--rule) !important; }
#sld #sld-colour-now { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); background: #000; font-size: 12px !important; }
#sld .sld-colours { position: absolute; z-index: 30; top: 44px; right: 0; width: 214px; padding: 10px !important; border: 1px solid var(--rule); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(27,33,29,.18); display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; }
#sld .sld-colours button { width: 26px !important; height: 26px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
#sld .sld-colour-custom { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
#sld .sld-colour-custom input[type="color"] { width: 34px !important; height: 26px !important; padding: 0 !important; border: 1px solid var(--rule) !important; border-radius: 6px; background: none !important; }
#sld .sld-stagebar { display: flex !important; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 8px 12px !important; background: rgba(255,255,255,.88); border-top: 1px solid #dbe6c2; }
#sld .sld-zoom, #sld .sld-history { display: flex !important; align-items: center; gap: 2px; }
#sld .sld-zoom-val { min-width: 58px; font-size: 14px !important; }
#sld .sld-legend { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 13px; }
#sld .sld-key { display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px dashed; }
#sld .sld-key-pink { color: #d0249a; }
#sld .sld-key-blue { color: #2563eb; }
#sld .sld-key-black { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #000; }

/* modals */
#sld .sld-modal { position: fixed; inset: 0; z-index: 10050; display: grid !important; place-items: center; padding: 16px; background: rgba(27,33,29,.45); }
#sld .sld-sheet { display: block !important; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px !important; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
#sld .sld-sheet-wide { width: min(920px, 100%); padding: 0 !important; display: flex !important; flex-direction: column; overflow: hidden; }
#sld .sld-sheet-head { display: flex !important; align-items: center; justify-content: space-between; padding: 18px 22px !important; border-bottom: 1px solid var(--rule); }
#sld .sld-sheet-foot { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px !important; border-top: 1px solid var(--rule); background: var(--wash); }
#sld .sld-sheet-foot .sld-price { justify-items: start; }
#sld .sld-x { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--wash) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
#sld .sld-x svg { width: 18px; height: 18px; }
#sld .sld-setup { flex: 1; overflow-y: auto; padding: 18px 22px 8px !important; }
#sld .sld-set { margin-bottom: 20px; }
#sld .sld-types { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#sld .sld-type, #sld .sld-mat { display: grid !important; align-content: start; gap: 3px; width: 100% !important; height: auto !important; padding: 12px 14px !important; border: 1px solid var(--rule) !important; border-radius: 14px !important; background: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; text-align: left; }
#sld .sld-type b, #sld .sld-mat b { font-size: 15px; line-height: 1.25; }
#sld .sld-type small { color: var(--olive-ink); font-weight: 600; font-size: 12.5px; }
#sld .sld-type em, #sld .sld-mat small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
#sld .sld-type:hover, #sld .sld-mat:hover { border-color: #b9c7a3 !important; }
#sld .sld-type.is-on, #sld .sld-mat.is-on { border-color: var(--olive) !important; background: var(--lime-wash) !important; box-shadow: inset 0 0 0 1px var(--olive); }
#sld .sld-mats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#sld .sld-chips { display: flex !important; flex-wrap: wrap; gap: 8px; }
#sld .sld-chip { display: inline-grid !important; justify-items: center; gap: 1px; min-height: 40px; width: auto !important; height: auto !important; padding: 8px 14px !important; border: 1px solid var(--rule) !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.15 !important; }
#sld .sld-chip small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
#sld .sld-chip:hover { border-color: #b9c7a3 !important; }
#sld .sld-chip.is-on { border-color: var(--olive) !important; background: var(--lime-wash) !important; box-shadow: inset 0 0 0 1px var(--olive); }
#sld .sld-custom { margin-top: 12px; max-width: 320px; }
#sld .sld-qty { margin-top: 12px; max-width: 220px; }
#sld .sld-dialog-body { margin: 10px 0 20px; color: var(--ink-2); }
#sld .sld-dialog-actions { display: flex !important; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#sld .sld-issues { display: grid !important; gap: 8px; }
#sld .sld-issues li { padding: 10px 12px !important; border-radius: 10px; background: #fff6e5 !important; color: #7a4b00; }
#sld .sld-saving { position: fixed; inset: 0; z-index: 10060; display: grid !important; place-items: center; background: rgba(255,255,255,.82); }
#sld .sld-saving-box { display: grid !important; justify-items: center; gap: 10px; padding: 28px 34px !important; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(27,33,29,.18); text-align: center; }
#sld .sld-saving-box b { font-size: 17px; }
#sld .sld-saving-box small { color: var(--mute); }
#sld .sld-toast { position: fixed; z-index: 10040; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#sld .sld-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
#sld .sld-mbar { display: none !important; }

/* the old footer_lite shell around the page */
body.sld-body-page .page-footer { display: none !important; }
body.sld-body-page .copyrights { padding: 14px 16px; font-size: 12px; text-align: center; }

/* last word on [hidden]: beats every display rule above (two attribute selectors outrank one class) */
#sld [hidden][hidden] { display: none !important; }

@media (max-width: 1180px) {
  #sld .sld-work { grid-template-columns: 78px 300px minmax(0, 1fr); }
  #sld .sld-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #sld { padding-bottom: 76px !important; }
  #sld .sld-top { padding: 10px 16px !important; gap: 8px; }
  #sld .sld-head { gap: 8px; width: 100%; }
  #sld .sld-h1 { font-size: 22px !important; }
  #sld .sld-spec { padding: 7px 12px !important; }
  #sld .sld-spec strong { font-size: 14px; }
  #sld .sld-spec small { font-size: 12.5px; }
  #sld .sld-spec { width: 100% !important; }
  #sld .sld-buy { display: none !important; }
  #sld .sld-work { display: flex !important; flex-direction: column; height: auto; }
  #sld .sld-stagewrap { order: 1; }
  #sld .sld-stage { flex: none; height: 40vh; height: 40svh; min-height: 260px; max-height: 480px; }
  #sld .sld-toolbar { justify-content: flex-start; padding: 6px 8px !important; overflow-x: auto; flex-wrap: nowrap; min-height: 52px; }
  #sld .sld-tgroup { flex-wrap: nowrap; }
  #sld .sld-stagebar { padding: 4px 8px 6px !important; gap: 0 8px; }
  #sld .sld-legend { order: 3; flex-basis: 100%; gap: 2px 14px; font-size: 12px; padding: 0 4px 2px; }
  #sld .sld-key { width: 16px; margin-right: 5px; }
  #sld .sld-rail { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 8px !important; border-right: 0; border-bottom: 1px solid var(--rule); }
  #sld .sld-tool { flex: 0 0 auto; width: auto !important; min-width: 74px; padding: 8px 8px !important; }
  #sld .sld-panel { order: 3; overflow: visible; border-right: 0; padding: 18px 16px 24px !important; }
  #sld .sld-font-list { position: fixed; top: auto; bottom: 84px; left: 12px; right: 12px; width: auto; max-height: 50vh; }
  #sld .sld-colours { position: fixed; top: auto; bottom: 84px; left: 12px; right: 12px; width: auto; grid-template-columns: repeat(8, 1fr); }
  #sld .sld-mbar { display: flex !important; position: fixed; z-index: 10030; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(27,33,29,.08); }
  #sld .sld-mbar > div { display: grid !important; line-height: 1.15; }
  #sld .sld-mbar strong { font: 700 24px/1 var(--display); }
  #sld .sld-mbar small { color: var(--ink-2); font-size: 12.5px; }
  #sld .sld-types, #sld .sld-mats { grid-template-columns: minmax(0, 1fr); }
  #sld .sld-sheet-wide { height: calc(100vh - 32px); }
  #sld .sld-tpls { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------------- phones, 11 Oct 2026 ----------------
   The label stays on screen while you scroll the editing boxes; the text toolbar has its own slot so selecting
   something never moves the label; every tool fits on one row. */
@media (max-width: 900px) {
  #sld .sld-stagewrap { position: relative; padding-top: 50px !important; background: #fff; }
  #sld .sld-stagewrap::before { content: "Tap your text or picture on the label to change it"; position: absolute; left: 0; right: 0; top: 0; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--rule); background: #fbfcf8; }
  #sld .sld-toolbar { position: absolute !important; left: 0; right: 0; top: 0; height: 50px; min-height: 50px !important; z-index: 4; background: #fff !important; border-bottom: 1px solid var(--rule); }
  #sld .sld-stage { height: 36vh; height: 36svh; min-height: 230px; }
  #sld .sld-legend { font-size: 11.5px; }
  #sld .sld-rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: hidden !important; padding: 6px 4px !important; }
  #sld .sld-tool { min-width: 0 !important; padding: 7px 2px !important; }
  #sld .sld-tool b { font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #sld .sld-tool[data-tool="image"] b { font-size: 0 !important; }
  #sld .sld-tool[data-tool="image"] b::after { content: "Image"; font-size: 11px; }
  #sld .sld-tool[data-tool="numbering"] b { font-size: 0 !important; }
  #sld .sld-tool[data-tool="numbering"] b::after { content: "Numbers"; font-size: 11px; }
}
@media (max-width: 900px) and (min-height: 620px) {
  /* the site's .page wrapper is overflow:hidden, which stops sticky; clip still trims overflow but lets it stick */
  body.sld-body-page .page { overflow: clip !important; }
  #sld .sld-stagewrap { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; box-shadow: 0 10px 18px -16px rgba(27, 33, 29, .45); }
}

/* ---------------- 15 Oct 2026 (Lee's feedback) ----------------
   Positioning tools stay on the right whatever is selected; black-only warning; 2mm edge key. */
#sld .sld-tgroup[data-for="any"] { margin-left: auto !important; }
#sld .sld-warn { margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d28a; color: #5c4300; font-size: 13.5px !important; line-height: 1.45 !important; }
#sld .sld-warn[hidden] { display: none !important; }
#sld .sld-dialog-body .sld-warn { margin: 0 0 10px !important; font-size: 15px !important; }
#sld .sld-key-edge { width: 18px; height: 10px; border: 3px solid #d8dbd2; border-radius: 3px; background: #fff; }