efficient-web-builder 21.0.0 → 22.0.0

package/dist/components/storefront-editor.css

@@ -89,7 +89,7 @@
 .sf-panel-heading {
   display: flex;
   align-items: baseline;
-  gap: 6px;
+  gap: var(--space-8);
   min-width: 0;
 }
 /* The site's name, read-only. Quiet and small — it is context, not a setting,
@@ -125,7 +125,7 @@
 }
 .sf-panel-site::before {
   content: "·";
-  margin-right: 6px;
+  margin-right: var(--space-8);
 }
 .sf-x {
   width: 24px;
@@ -258,7 +258,7 @@
      what makes the ladder read as one list at three depths rather than three
      lists. */
   margin: var(--es-rhythm-between) 0 var(--es-rhythm-between) 16px;
-  padding-left: 9px;
+  padding-left: var(--space-12);
   border-left: 1px solid var(--sf-line);
   display: flex;
   flex-direction: column;
@@ -278,9 +278,9 @@
 .sf-addside-sitewide {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-12);
   margin-top: 16px;
-  padding: 10px;
+  padding: var(--space-12);
   border: 1px solid var(--sf-divider);
   border-radius: var(--radius-xl);
 }
@@ -421,11 +421,11 @@
 .sf-addcard-addbtn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-8);
   background: var(--sf-accent);
   color: var(--sf-on-accent);
   border-radius: var(--radius-lg);
-  padding: 8px 14px;
+  padding: var(--space-8) var(--space-16);
   font-size: var(--text-xs);
   font-weight: 600;
   box-shadow: 0 4px 12px var(--sf-accent-shadow);
@@ -458,7 +458,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 9px;
+  gap: var(--space-12);
   padding: 64px 20px;
   text-align: center;
   color: var(--sf-muted);
@@ -876,7 +876,7 @@
      measured and set (card 66212, 2026-10-13). The token stays, as a name for
      that inset, because rules below read it to reach the panel's edge. */
   --sf-insp-pad-x: var(--es-insp-pad-x, var(--space-16));
-  padding-block: 4px 18px;
+  padding-block: var(--space-4) var(--space-20);
 
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
      Read by `.sf-insp-body select` at rest AND by the hover rule beside it. The
@@ -973,7 +973,7 @@
   border: 1px solid var(--sf-input-border);
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
-  padding: 8px 11px;
+  padding: var(--space-8) var(--space-12);
   font-size: var(--text-sm);
   color: var(--sf-field-text);
   font-family: var(--sf-font);
@@ -1074,7 +1074,7 @@
   background-repeat: no-repeat;
   background-position: calc(100% - 12px) calc(50% + 3px);
   border-radius: var(--sf-field-radius);
-  padding: 8px 11px;
+  padding: var(--space-8) var(--space-12);
   font-size: var(--text-sm);
   color: var(--sf-field-text);
   cursor: pointer;
@@ -1146,7 +1146,7 @@
   border: 1px solid var(--sf-input-border);
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
-  padding: 8px 11px;
+  padding: var(--space-8) var(--space-12);
   font-size: var(--text-sm);
   font-family: var(--sf-font);
   color: var(--sf-field-text);
@@ -1164,7 +1164,7 @@
   flex: none;
 }
 .sf-multi-menu {
-  margin: 6px 0 0;
+  margin: var(--space-8) 0 0;
   padding: 4px;
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
@@ -1233,7 +1233,7 @@
   flex: none;
   border: 0;
   background: none;
-  padding: 3px 2px 3px 6px;
+  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-8);
   font: inherit;
   line-height: 1;
   color: var(--sf-text-secondary);
@@ -1246,7 +1246,7 @@
    choose. */
 .sf-secttheme-oncard {
   margin: 0;
-  padding: 5px 4px 7px;
+  padding: var(--space-8) var(--space-4) var(--space-8);
   font-size: var(--text-2xs);
   line-height: 1.4;
   color: var(--sf-text-secondary);
@@ -1355,9 +1355,9 @@
 .sf-secttheme-item {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: var(--space-12);
   width: 100%;
-  padding: 6px 7px;
+  padding: var(--space-8) var(--space-8);
   border: 0;
   background: transparent;
   border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
@@ -1387,12 +1387,12 @@
 }
 .sf-secttheme-sep {
   height: 1px;
-  margin: 3px 0;
+  margin: var(--space-4) 0;
   background: var(--sf-input-border);
 }
 /* ── The edit sheet ─────────────────────────────────────────────────────── */
 .sf-secttheme-sheet {
-  margin-top: 6px;
+  margin-top: var(--space-8);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   overflow: hidden;
@@ -1400,7 +1400,7 @@
 .sf-secttheme-sheet-head {
   display: flex;
   align-items: center;
-  padding: 6px 9px;
+  padding: var(--space-8) var(--space-12);
   background: var(--sf-field-bg);
   border-bottom: 1px solid var(--sf-input-border);
   font-size: var(--text-xs);
@@ -1435,7 +1435,7 @@
    it. Drawn in the panel's own warning ink rather than a new colour. */
 .sf-secttheme-warn {
   margin: 0;
-  padding: 7px 9px;
+  padding: var(--space-8) var(--space-12);
   border-top: 1px solid var(--sf-input-border);
   background: var(--sf-accent-ring);
   font-size: var(--text-2xs);
@@ -1501,7 +1501,7 @@
    it takes the tree's inset. Placement only; the note style itself is .sf-note. */
 .sf-pages > .sf-note {
   margin: 0 var(--space-12);
-  padding: 10px 12px;
+  padding: var(--space-12);
 }
 .sf-pages > .sf-note--error {
   margin-top: var(--space-4);
@@ -1526,7 +1526,7 @@
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
-  padding: 2px 7px;
+  padding: var(--space-2) var(--space-8);
   border-radius: 999px;
 }
 .sf-badge-dynamic {
@@ -1548,7 +1548,7 @@
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
-  padding: 2px 7px;
+  padding: var(--space-2) var(--space-8);
   border-radius: 999px;
   color: var(--sf-warning);
   background: var(--sf-preview-tint);
@@ -1785,8 +1785,8 @@
 .sf-theme-colours .es-group-sub,
 .sf-secttheme-rows .es-group-sub {
   border-top: 1px solid var(--sf-line);
-  margin-top: 30px;
-  padding-top: 30px;
+  margin-top: var(--space-32);
+  padding-top: var(--space-32);
   /* Cancel the panel body's side padding, then put it back inside, so the rule
      reaches the panel edge while the words stay on the rows' left edge.
      ⚠️ READ FROM THE TOKEN, never typed. A literal `14px` here hung the line
@@ -1956,7 +1956,7 @@
   border: 1px solid var(--sf-input-border);
   background: var(--sf-chip-bg);
   border-radius: var(--sf-field-radius);
-  padding: 8px 11px;
+  padding: var(--space-8) var(--space-12);
   font-size: var(--text-sm);
   color: var(--sf-text-secondary);
   font-family: var(--sf-font);
@@ -2018,121 +2018,20 @@
   opacity: 0.5;
 }
 
-/* Formatting bar above a copy field — bold · italic · strike · highlight.
+/* Formatting bar above a copy field — bold · italic · strike, and Clear.
    Select words in the field, press a button; the button writes the markup the
-   renderer understands, so a merchant never types a delimiter. Sits between the
-   label row and the input, at the icon-button metrics the eye already uses, so a
-   copy field gains a row of chrome rather than a new visual language.
-   The buttons take their ink from the same tokens as every other inspector icon,
-   so light and dark both follow the panel — no colour is named here. */
-/* ⚠️ THE ROW ITSELF IS `efficient-easel/copy`'s `MarkBar` NOW (`.es-copy-bar`), and
-   these rules are what keep it looking like the shop's. The shell dresses its
-   bar from `--es-*` with its own metrics; the inspector's bar has to belong to
-   the inspector. Same rule, two skins — the split the two editors already make.
-
-   `.sf-markup` — the container class this repo's own bar carried — is GONE from
-   these selectors, because nothing renders it any more (swept: no `"sf-markup"`
-   class in app / components / lib). `.sf-markup-btn` went too: the Clear
-   button is the shell's `IconButton` (harness UI-24), with the shell's own
-   metrics, hover and :disabled look. */
-.sf-copybox > .es-copy-bar,
-.es-list-above > .es-copy-bar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  /* ZERO, and it is the shell's 4px being neutralised rather than a gap being
-     chosen. `copy.css` gives its bar a gap to the box below it, because in the
-     campaign designer the bar floats above a separately framed box. Here the
-     bar sits INSIDE the frame (card 8802.g) and the list column already spaces
-     its children — both places set 0, which is what the two rules further down
-     used to do one at a time. */
-  margin-bottom: 0;
-}
-/* ⚠️ THE BAR WRAPS, and it has to now that three of its buttons are WORDS.
-
-   It was `nowrap` to reproduce the old `.sf-markup` exactly, which was right
-   while every button was a 24px glyph. Highlight / Bold / Quiet are names
-   (card: the three blank buttons), and three names do not share a line with
-   four glyphs and a Clear button in a narrow panel. Measured, `text` row:
-
-       panel   nowrap                 wrap
-       320px   Clear 6px inside       6px inside, one line
-       220px   Clear 12px OUTSIDE     6px inside, two lines
-       181px   Clear 51px OUTSIDE     6px inside, two lines
-
-   So the wrap is not a preference: without it the fix for the blank buttons
-   would trade three unreadable buttons for an unreachable one. `copy.css`
-   already wraps; this rule now only exists to say why that is wanted here. */
-.sf-copybox > .es-copy-bar,
-.es-list-above > .es-copy-bar {
-  flex-wrap: wrap;
-  row-gap: 2px;
-}
-/* A button that draws a GLYPH is a square; a button that draws a WORD is as
-   wide as its word. `has-glyph` is the shell's own marker for the difference
-   (editor-shell 0.62.0), so the two cases are told apart by what they hold
-   rather than by a list of style names kept in step by hand. */
-.sf-copybox .es-copy-mark.has-glyph,
-.es-list-above .es-copy-mark.has-glyph {
-  width: 24px;
-}
-.sf-copybox .es-copy-mark:not(.has-glyph),
-.es-list-above .es-copy-mark:not(.has-glyph) {
-  /* The style's NAME — Highlight / Bold / Quiet. Padded so two of them do not
-     read as one word, and never wrapped mid-name. */
-  padding: 0 6px;
-  font-size: var(--text-2xs);
-  line-height: 1;
-  white-space: nowrap;
-}
-/* A mark is the shell's IconButton since efficient-easel 1.0 (UI-24): its
-   ground, ink, hover, press, pressed (`aria-pressed`) and disabled looks are
-   the shell's. Only its height is this row's: the bar is 22px tall. */
-.sf-copybox .es-copy-mark,
-.es-list-above .es-copy-mark {
-  height: 22px;
-}
-/* The fifth button — clear formatting (card 8809) — pushed away from the four.
-   The four ADD a mark to a selection; this one TAKES every mark off the whole
-   field, so it does not stand shoulder to shoulder with them. This one rule is
-   the whole separation: `margin-left: auto` makes the bar's own `.es-divider-v`
-   eat the free space, which IS the flexible spacer, and carries the button after
-   it to the far end. No new class, no new line and no new colour — the divider
-   already draws itself in --sf-divider, and the button is the shell's
-   `IconButton`, with its metrics, its hover and its :disabled look.
-
-   The height is the one adjustment: `.es-divider-v` is 22px for the 30px icon
-   buttons of the top toolbar, which in a 22px row would run edge to edge and
-   read as a wall rather than a seam. 14px matches the glyphs it separates. */
-.sf-copybox > .es-copy-bar > .es-copy-bar-split,
-.es-list-above > .es-copy-bar > .es-copy-bar-split {
-  margin-left: auto;
-  height: 14px;
-}
-/* ⚠️ AND THE AUTO MARGIN IS ON THE BUTTON TOO, not only on the divider.
-   `margin-left: auto` eats the free space of the line the item is ON. While
-   the bar was one line that was the same thing. Now that it wraps, the divider
-   can end line 1 while Clear starts line 2 — and Clear, with no auto margin of
-   its own, sat at the LEFT of that line. Measured at 181px: three rows, glyphs
-   / names / Clear, with Clear 135px from the right edge it is supposed to be
-   at. One declaration, and it is at the far end of whichever line it lands on. */
-.sf-copybox > .es-copy-bar > .sf-markup-clear,
-.es-list-above > .es-copy-bar > .sf-markup-clear {
-  margin-left: auto;
-}
-/* The shell's divider dressed as the shop's `.es-divider-v`: the same seam, so
-   the bar has ONE divider rather than the shell's plus a hand-rolled one.
-   NO COLOUR IS NAMED — copy.css already draws it in `--es-copy-rule`, which the
-   editor aliases onto its own border token, exactly as `.es-divider-v` drew
-   itself in `--es-divider`. A colour here would be a second answer. */
-.sf-copybox > .es-copy-bar > .es-copy-bar-split,
-.es-list-above > .es-copy-bar > .es-copy-bar-split {
-  align-self: center;
-  margin-right: 2px;
-}
+   renderer understands, so a merchant never types a delimiter.
+   ⚠️ THE ROW IS THE SHELL'S `TextToolbar` (efficient-shell/ui, via
+   `MarkupToolbar`; efficient-easel 11.5.0 retired `MarkBar`'s own bar). Its
+   buttons, their size, ground, hover, pressed and :disabled looks, and where
+   the Clear button sits (the toolbar's `last` cell) are the shell's (harness
+   UI-24): no rule here dresses a button. What is the inspector's is only where
+   the bar SITS: inside the copy box's frame, hidden at rest, dimmed with a
+   hidden element. `MarkupToolbar` puts `sf-markup-bar` on the toolbar's
+   wrapper, so these rules never name a shell class. */
 /* A hidden element's copy is still editable, so the bar dims with the input
    rather than disappearing — same cue, same reason as the input's 0.5. */
-.es-field.is-hidden .es-copy-bar {
+.es-field.is-hidden .sf-markup-bar {
   opacity: 0.5;
 }
 
@@ -2164,9 +2063,9 @@
    hairline. --sf-hover is the panel's own faintest fill, the tint every other
    inspector control uses to say "chrome, not content", so no new colour and no
    literal is introduced here. */
-.sf-copybox > .es-copy-bar {
+.sf-copybox > .sf-markup-bar {
   margin-bottom: 0;
-  padding: 3px 6px;
+  padding: var(--space-4) var(--space-8);
   /* ⚠️ NOT a panel divider, and card 66334 deliberately left it. This hairline
      is INSIDE one control: it divides the formatting bar from the words, and it
      exists instead of giving the bar a second full frame -- which is the thing
@@ -2182,7 +2081,7 @@
    unmounted: the bar keeps its place in the markup, and a keyboard user who
    Shift+Tabs out of the words lands on its last button, which keeps the box
    focused and the bar shown. */
-.sf-copybox:not(:focus-within) > .es-copy-bar {
+.sf-copybox:not(:focus-within) > .sf-markup-bar {
   display: none;
 }
 /* The input gives up its own frame to the wrapper. The `.sf-insp-body` +
@@ -2215,7 +2114,7 @@
 .sf-swatches {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-12);
 }
 .sf-swatch {
   width: 26px;
@@ -2252,7 +2151,7 @@
 .sf-colour {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-8);
   min-width: 0;
 }
 .es-field-head > .sf-colour {
@@ -2315,7 +2214,7 @@
   width: 100%;
   align-items: center;
   gap: 8px;
-  padding: 6px 10px;
+  padding: var(--space-8) var(--space-12);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
@@ -2372,7 +2271,7 @@
   width: 100%;
   align-items: center;
   gap: 8px;
-  padding: 6px 10px;
+  padding: var(--space-8) var(--space-12);
   border: 0;
   background: none;
   text-align: left;
@@ -2460,7 +2359,7 @@
    merchant's settings, so it must not read as loudly as the rows above it. */
 .sf-hints {
   display: flex;
-  margin-top: 28px;
+  margin-top: var(--space-32);
 }
 /* A rung that is not part of a strip: it sizes to its own word rather than
    sharing a row, so the `flex: 1` every rung takes has to come back off. */
@@ -2468,7 +2367,7 @@
   display: inline-flex;
   flex: none;
   align-items: center;
-  gap: 5px;
+  gap: var(--space-8);
   color: var(--sf-muted);
 }
 .sf-hints-toggle svg {
@@ -2503,7 +2402,7 @@
 }
 /* The "Auto" button that clears an optional number back to the built-in. */
 .sf-auto-reset {
-  padding: 2px 6px;
+  padding: var(--space-2) var(--space-8);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
@@ -2570,7 +2469,7 @@
   width: 100%;
   align-items: center;
   gap: 8px;
-  padding: 10px 0;
+  padding: var(--space-12) 0;
   background: none;
   border: 0;
   text-align: left;
@@ -2670,7 +2569,7 @@
 /* The face picker -- a native select, so the platform draws the list, the
    keyboard works and a phone gets its own wheel. */
 .sf-select {
-  padding: 5px 8px;
+  padding: var(--space-8) var(--space-8);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
@@ -2783,7 +2682,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 10px 12px;
+  padding: var(--space-12) var(--space-12);
 }
 .sf-theme-eyebrow {
   font-size: 7.5px;
@@ -2811,14 +2710,14 @@
 .sf-theme-row {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: var(--space-8);
   margin-top: 1px;
 }
 .sf-theme-btn {
   font-size: 8.5px;
   font-weight: 700;
   letter-spacing: 0.02em;
-  padding: 5px 11px;
+  padding: var(--space-8) var(--space-12);
   border-radius: var(--radius-sm);
   white-space: nowrap;
   flex: none;
@@ -2843,7 +2742,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 5px 8px 6px 12px;
+  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
   background: var(--sf-hover);
 }
 .sf-theme-card.is-selected .sf-theme-foot { color: var(--sf-accent-text); }
@@ -2893,7 +2792,7 @@
 .sf-theme-add {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-8);
   margin-top: 8px;
   border: 0;
   background: none;
@@ -2919,12 +2818,12 @@
    around them is what says the three belong together: they are one decision. */
 .sf-colour-lede {
   margin-top: -3px;
-  margin-bottom: 10px;
+  margin-bottom: var(--space-12);
 }
 .sf-colour-pair {
   border: 1px solid var(--sf-divider);
   border-radius: var(--sf-row-radius);
-  padding: 2px 11px 11px;
+  padding: var(--space-2) var(--space-12) var(--space-12);
   background: var(--sf-app-bg);
 }
 /* The rows sit inside a card that already spaces them, so they set their own
@@ -2934,7 +2833,7 @@
    sub-row inside one setting's card has no business borrowing the class that
    sets the distance between two settings. Copied exactly — nothing moves. */
 .sf-colour-row {
-  margin-top: 9px;
+  margin-top: var(--space-12);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2961,15 +2860,15 @@
 }
 
 .sf-readability {
-  margin-top: 10px;
-  padding: 11px 12px 12px;
+  margin-top: var(--space-12);
+  padding: var(--space-12) var(--space-12) var(--space-12);
   border: 1px solid var(--sf-divider);
   border-radius: var(--sf-row-radius);
 }
 .sf-readability-row {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: var(--space-12);
   padding: 4px 0;
   font-size: var(--text-xs);
 }
@@ -3008,7 +2907,7 @@
 .sf-readability-val.is-hard { color: var(--sf-danger); }
 
 .sf-readability-advice {
-  margin-top: 7px;
+  margin-top: var(--space-8);
   font-size: var(--text-2xs);
   line-height: 1.6;
   color: var(--sf-muted);
@@ -3016,15 +2915,15 @@
 .sf-readability-suggestions {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: var(--space-8);
   margin-top: 8px;
 }
 .sf-readability-suggestion {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: var(--space-8);
   height: 26px;
-  padding: 0 9px;
+  padding: 0 var(--space-12);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
@@ -3135,13 +3034,13 @@
   justify-content: space-between;
   gap: 12px;
   flex: none;
-  padding: 9px 14px;
+  padding: var(--space-12) var(--space-16);
   background: var(--sf-panel);
 }
 .sf-preview-pin-text {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--space-2);
   min-width: 0;
 }
 .sf-preview-pin-label {
@@ -3161,7 +3060,7 @@
 .sf-colstep {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-8);
 }
 .sf-colstep-value {
   min-width: 14px;
@@ -3219,18 +3118,18 @@
 /* Segmented */
 .sf-seg2 {
   display: flex;
-  gap: 3px;
+  gap: var(--space-4);
   background: var(--sf-track-bg);
   border: 1px solid var(--sf-input-border);
   border-radius: var(--radius-lg);
-  padding: 3px;
+  padding: var(--space-4);
 }
 .sf-seg2 button {
   flex: 1;
   border: none;
   background: transparent;
   border-radius: var(--radius-md);
-  padding: 6px 8px;
+  padding: var(--space-8) var(--space-8);
   font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-icon);
@@ -3276,7 +3175,7 @@
    container and is untouched by construction. */
 @container (width < 284px) {
   .sf-seg2 button {
-    padding-inline: 6px;
+    padding-inline: var(--space-8);
   }
 }
 
@@ -3374,7 +3273,7 @@
    The row the bar is aimed at has to stay visible AFTER the caret leaves — the
    merchant clicks the bar, which takes the focus ring off the row — so the cue
    is painted rather than borrowed from :focus. Accent tokens only. */
-.es-list-above > .es-copy-bar {
+.es-list-above > .sf-markup-bar {
   margin-bottom: 0;
 }
 input.sf-list-marking {
@@ -3387,7 +3286,7 @@ input.sf-list-marking {
 .sf-blogsource {
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: var(--space-12);
 }
 /* The shell's Button in the column (SourceStatus): its own width, not the
    column's. Placement only; the look is the shell's (harness UI-24). */
@@ -3438,7 +3337,7 @@ input.sf-list-marking {
 .sf-formpicker {
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: var(--space-12);
 }
 .sf-formsummary-caption {
   margin-bottom: 4px;
@@ -3449,7 +3348,7 @@ input.sf-list-marking {
 }
 .sf-formsummary-fields {
   margin: 0;
-  padding-left: 18px;
+  padding-left: var(--space-20);
   font-size: var(--text-xs);
   line-height: 1.55;
   color: var(--sf-text-secondary);
@@ -3466,32 +3365,10 @@ input.sf-list-marking {
   gap: 8px;
 }
 
-/* THE MEDIA ROW IS efficient-easel's `ImageBox` since blueprint step 4.8
-   (`es-pick-image-*`, efficient-easel/pick.css): the picture, its name under
-   it, Replace and Remove. What stays here is the shop's own around it — the
-   drop's live regions and the template's inert slot. */
-/* Loading / error line under the slot, so a slow or failed picker round-trip is
-   visible instead of nothing happening. */
-.sf-image-status {
-  margin-top: 6px;
-  font-size: var(--text-2xs);
-  color: var(--sf-muted);
-}
-.sf-image-status--error {
-  color: var(--sf-danger);
-}
-/* The shell's FileIntakeAlert renders a dropped file's rejection as a list whose
-   items carry the kit's own light-theme utilities (text-xs text-red-600). Inside
-   the editor they read the slot's status line instead, so a rejection flips with
-   the editor theme like the error line above it. */
-ul.sf-image-status {
-  list-style: none;
-  padding: 0;
-}
-.sf-image-status--error li {
-  color: inherit;
-  font-size: inherit;
-}
+/* THE MEDIA ROW IS efficient-easel's `ImageBox`, which since easel 12 IS the
+   shell's MediaUploadField (efficient-shell #528): the picture with its Change
+   image bar and bin, its own drop intake and its own announcements. What
+   stays here is the shop's own: the template's inert slot. */
 /* Shown in place of the media slot above when the open document can't hold
    media (a template): the same dashed frame, plainly not a button. It is the
    SLOT in its inert state, not a note — it was only ever counted as one
@@ -3499,39 +3376,13 @@ ul.sf-image-status {
 .sf-image-slot-inert {
   border: 1.5px dashed var(--sf-input-border);
   border-radius: var(--radius-lg);
-  padding: 12px 14px;
+  padding: var(--space-12) var(--space-16);
   font-size: var(--text-xs);
   line-height: 1.5;
   color: var(--sf-muted);
   background-image: repeating-linear-gradient(45deg, var(--sf-hatch) 0 1px, transparent 1px 12px);
 }
 
-/* ── The image FOCUS point (card 66226) ──────────────────────────────────────
-   WHICH PART OF A BACKGROUND IMAGE SURVIVES ITS CROP, as any point on the
-   picture rather than as one of nine. The `Image focus` row opens (the shared
-   .sf-style-head grammar, see components/ImageFocusRow.tsx) onto
-   efficient-shell's `ImageFocusPoint`, which draws the whole photograph, the
-   dot and its crosshair with the kit's own classes (efficient-shell#375); no
-   rule here styles it.
-
-   ⚠️ THE MEDIA ROW'S OWN FRAME IS NOT RESTYLED, EVER. `.es-pick-image-frame`
-   stays `cover` because that is what the PAGE will look like, and that
-   is its job. The focus part is a second frame, on screen only while a
-   merchant is actually setting the point, because a `cover` view cannot
-   express a point it has already cropped away.
-
-   THE PHOTOGRAPH IS NEVER ON SCREEN TWICE. The 96px crop belongs to the
-   Background image field and the focus row belongs to `imageFocal` — two
-   sibling Puck fields, which cannot reach each other from React — so the crop
-   stands down for as long as the part is open (its root carries
-   `data-image-focus`), and comes back the moment it closes. The `:has()` on
-   Puck's own field wrapper is this stylesheet's established idiom for exactly
-   that problem (see the `[data-sf-bucket]` and `[data-sf-no-control]` rules
-   above). */
-.es-insp-rows:has([data-image-focus]) .es-pick-image-frame {
-  display: none;
-}
-
 /* ── The note (card 66121) ───────────────────────────────────────────────────
    THE chrome's quiet sentence: what a panel says when it has something to tell
    the merchant and nothing to let them edit. A whole-panel stand-in for
@@ -3555,7 +3406,7 @@ ul.sf-image-status {
    `--wide` / `--tight` pair here, because a family of padding variants is the
    same six classes wearing one name. */
 .sf-note {
-  padding: 14px 16px;
+  padding: var(--space-16) var(--space-16);
   font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--sf-muted);
@@ -3575,7 +3426,7 @@ ul.sf-image-status {
    screenshot, and a screenshot carries no console. Quieter and smaller than the
    sentence above it, so it reads as a footnote and not as an instruction. */
 .sf-note-detail {
-  margin-top: 10px;
+  margin-top: var(--space-12);
   font-size: var(--text-2xs);
   color: var(--sf-muted);
   opacity: 0.75;
@@ -3617,7 +3468,7 @@ ul.sf-image-status {
      the other six. The clip existed only to round the 3px accent edge below,
      which now rounds itself. */
   margin: 0 0 4px;
-  padding: 11px 13px;
+  padding: var(--space-12) var(--space-16);
   border: 1px solid var(--sf-divider);
   border-radius: var(--radius-xl);
   background: var(--sf-track-bg);
@@ -3651,7 +3502,7 @@ ul.sf-image-status {
   color: var(--sf-muted);
 }
 .sf-part-style-count {
-  margin-bottom: 3px;
+  margin-bottom: var(--space-4);
   font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
@@ -3736,7 +3587,7 @@ ul.sf-image-status {
   align-items: baseline;
   gap: 8px;
   width: 100%;
-  padding: 7px 9px;
+  padding: var(--space-8) var(--space-12);
   border: 0;
   background: none;
   text-align: left;
@@ -3798,7 +3649,7 @@ ul.sf-image-status {
 .sf-part-style-top {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: var(--space-12);
   margin-top: 8px;
 }
 /* Pushes "Edit style" to the end whatever sits before it — a note, or the chip
@@ -3827,7 +3678,7 @@ ul.sf-image-status {
   display: inline-flex;
   align-items: center;
   border-radius: 999px;
-  padding: 2px 9px;
+  padding: var(--space-2) var(--space-12);
   background: var(--sf-accent-tint);
   color: var(--sf-accent-text);
   font-size: var(--text-2xs);
@@ -3885,7 +3736,7 @@ ul.sf-image-status {
    reads as belonging to something above them. The BOX only — the colour, the
    size and the line-height stay the one note style's (card 66211). */
 .sf-slot-rows > .sf-note {
-  padding: 10px 11px 12px;
+  padding: var(--space-12) var(--space-12) var(--space-12);
 }
 
 /* A value that reads "style" is not a measurement, so it is drawn as quietly as
@@ -3948,7 +3799,7 @@ ul.sf-image-status {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-8);
 }
 
 /* The override mark, half two — and it IS the reset button, which is why it is
@@ -4023,7 +3874,7 @@ ul.sf-image-status {
 /* The group's caption — the section panel's small-caps heading, so this group
    reads like the buckets above it. A real <h3>, so it joins the panel outline. */
 .sf-entries-head {
-  margin: 14px 0 4px;
+  margin: var(--space-16) 0 var(--space-4);
   font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.06em;
@@ -4056,29 +3907,10 @@ ul.sf-image-status {
    repo's override of it — so matching it means drawing NOTHING, and the padding
    above is the whole of what this rule still owns. */
 .sf-slot-rows .sf-add-card {
-  padding: 8px 11px;
+  padding: var(--space-8) var(--space-12);
   border-radius: 0;
 }
 
-/* The drop zone round the media row's box. `SettingsField` puts its control in
-   `.es-field-ctl`, a flex ROW, where a plain block shrinks to its content: the
-   empty slot drew 190px wide in a 280px row. It takes the row instead. */
-.sf-image-drop {
-  flex: 1;
-  min-width: 0;
-}
-/* Drag-over highlight for the media row (MediaUploadField's drop shortcut):
-   the empty slot takes the accent, a filled picture an accent ring. */
-.sf-image-drop.is-dragover .es-pick-image-slot {
-  border-color: var(--sf-accent);
-  background-color: var(--sf-accent-tint);
-}
-.sf-image-drop.is-dragover .es-pick-image-frame {
-  outline: 2px solid var(--sf-accent);
-  outline-offset: -2px;
-}
-
-
 /* ── THE PHOTO WALL'S LAYOUT PICKER ─────────────────────────────────────────
    The Customer Photo Grid's one layout control: a strip of pictures, filtered by
    how many photos sit in a row. The owner, 2026-09-07, on the numbers it
@@ -4096,14 +3928,14 @@ ul.sf-image-status {
    nothing is cut off and nothing scrolls sideways at either width. */
 .sf-gallery-filter {
   display: flex;
-  gap: 5px;
+  gap: var(--space-8);
   flex-wrap: wrap;
 }
 .sf-gallery-filter button {
   border: 1px solid var(--sf-input-border);
   background: var(--sf-field-bg);
   border-radius: 999px;
-  padding: 4px 11px;
+  padding: var(--space-4) var(--space-12);
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-icon);
@@ -4124,7 +3956,7 @@ ul.sf-image-status {
    header's country picker became its third row). What stays here is where the
    strip sits in this panel: the line of space under the row's name. */
 .sf-gallery-layouts {
-  margin-top: 7px;
+  margin-top: var(--space-8);
 }
 /* ⚠️ THE STRIP MUST BE TOLD TO FILL THE SHELL'S CONTROL SLOT, OR IT COLLAPSES.
    editor-shell card 66516, and the shop is now the second consumer to meet it.
@@ -4205,7 +4037,7 @@ ul.sf-image-status {
 .sf-gallery-count {
   font-size: var(--text-2xs);
   color: var(--sf-disabled);
-  margin-top: 7px;
+  margin-top: var(--space-8);
 }
 
 /* ── Side panel heads (components/SidePanelHead) ─────────────────────────
@@ -4255,13 +4087,6 @@ ul.sf-image-status {
   min-width: 0;
 }
 
-/* The focal-point picker's row is TextStyleRow's disclosure row, not a
-   SettingsField; this keeps the gap above it that its old bare `.sf-field`
-   wrapper gave, from the same rhythm token. */
-.sf-focal-row {
-  margin-top: var(--es-rhythm-between);
-}
-
 /* The notice for a page whose header and footer could not load
    (components/PinnedChromeLoadNotice, 16.0.1), floating over the top of the
    canvas — the preview host is `position: relative` — so the frame keeps its