@endora-commerce/admin-kit 0.0.0-stage → 0.100.0

package/theme.css

@@ -0,0 +1,2056 @@
+/*
+ * **The admin's design system** — its custom-property vocabulary and its class
+ * vocabulary, published by the package every renderer already declares (feature
+ * 110, T129; owner ruling **D-219**;
+ * `specs/110-instance-repository/contracts/admin-stylesheet-composition.md`
+ * R3–R4). An instance imports this file and holds none of it.
+ *
+ * ## Why the kit, and not the shell where T126 put the first third of it
+ *
+ * 55 module packages declare `@endora-commerce/admin-kit` in their manifest and
+ * **none** declares `@endora-commerce/admin-shell`, while the shell peer-depends
+ * on the kit and the kit declares no `dependencies` at all. Published from the
+ * shell, 11 module packages would render classes defined by a package they
+ * cannot name and cannot put a version range on — a coupling with nowhere to be
+ * declared. Published from here, every renderer's edge already exists and the
+ * shell reaches the vocabulary through one it already has.
+ *
+ * It is *the package every renderer already declares* rather than the name
+ * `admin-kit`: if the open structure question folds the kit family into
+ * `packages/admin-shell`, the derivation answers `admin-shell` in the same run
+ * and the rule needs no edit (D-100).
+ *
+ * ## Why it is not the client's, even though it is their look
+ *
+ * Every consumer is a package. 70 files under `packages/` render a class this
+ * file defines and 30 read a custom property it declares through `var()`; **no
+ * file under `admin/src` does either**. A client holding these declarations
+ * holds a fork frozen on their scaffolding day, so a module release adding one
+ * class renders unstyled in every existing instance, silently, and the client
+ * cannot fix it.
+ *
+ * The half of that objection which is right is already delivered: the values are
+ * the client's, the **names** are not, and a value is one line in the override
+ * slot rather than a 5 036 B fork.
+ *
+ * ## How a client changes it — by redeclaring after the import, never by editing
+ *
+ *     @import "tailwindcss";
+ *     @import "@endora-commerce/admin-kit/theme.css";
+ *     @import "./tailwind.generated.css";
+ *
+ *     :root { --accent-h: 262; }
+ *     .b2b-btn { border-radius: 2px; }
+ *
+ * The token half works because every semantic token in the mapping block below
+ * is an indirection — `--color-primary: hsl(var(--primary))` — so a utility this
+ * package built without ever seeing that instance still resolves against the
+ * client's `:root` (R3.2). The class half works by cascade order: their rule is
+ * later. What a redeclaration cannot change is a value baked as a literal — the
+ * palette here is overridable, Tailwind's own spacing scale is not. A client who
+ * needs a different spacing scale is asking for a different design system, and
+ * the answer to that is the escalation ladder rather than this seam.
+ *
+ * ## Two kinds in one subpath, and the name is under-descriptive on purpose
+ *
+ * R4.3 (**host tokens**) and R4.4 (**host class vocabulary**) are two kinds and
+ * they ship together, at the one subpath T126 published. Nothing a client
+ * legitimately does requires reaching the vocabulary separately — an override is
+ * a later rule in the slot they already have — so a second subpath would be a
+ * seam with no user and a second import to forget (R3.4). The name stayed
+ * `./theme.css` rather than being changed in the merge request that doubled its
+ * content; R4.3a is where that trade is written down.
+ *
+ * It is a **separate** subpath from `./tailwind.css` beside it for the reason
+ * R3.3 gives: `@source` order is irrelevant, while `@theme` and `:root` order
+ * decides which declaration wins, so merging the two would put a client\'s
+ * override before or after these tokens depending on where the generated
+ * enumeration happened to sort this package.
+ *
+ * ## What was reconciled, and what a scaffolded client now sees
+ *
+ * Three files became this one. The shell\'s `theme.css` declared 42 custom
+ * properties, `admin/src/styles/design-tokens.css` **redeclared 20 of them**,
+ * and `admin/src/styles/components.css` is the 200-token class vocabulary those
+ * 70 files render. So the merge is a **reconciliation, not a concatenation**
+ * (R3.5): the old arrangement had the package declaring a shadcn slate palette
+ * that every instance overwrote in full, on every load, in every deployment. One
+ * palette is declared here, and it is the one that has actually rendered since
+ * feature 010\'s rebrand — D-219\'s first consequence, accepted by the owner in
+ * those terms. A client who wants slate redeclares it; a client who wants their
+ * own always had to.
+ *
+ * ## Hand-written, unlike the `./tailwind.css` beside it
+ *
+ * That file\'s content is derived from the layer inventory and is generated
+ * precisely because a mistyped `@source` is silent (R1.4). These are
+ * declarations, and there is nothing to derive them from. What holds *them*
+ * honest is `check:class-vocabulary`, in both directions: a class a package
+ * renders that no published design system defines, and a class defined here that
+ * no file renders.
+ */
+
+/* Feature 029 — prevent accidental horizontal page scroll on narrow viewports */
+html,
+body,
+#root {
+  max-width: 100%;
+  overflow-x: clip;
+}
+
+/*
+ * Tailwind's own namespace: the `@theme inline` mapping that binds the utility
+ * names (`bg-primary`, `rounded-lg`, …) to the semantic tokens below. Every one
+ * is an indirection, and that is R3.2's whole mechanism — these 22 properties
+ * are read by no package through `var()` and are not part of the palette a
+ * client overrides.
+ */
+@theme inline {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+/*
+ * The palette — 79 custom properties, one declaration each (R3.5).
+ *
+ * The first group is the design system's own vocabulary; the second re-tones the
+ * shadcn semantic tokens onto it, so every shadcn primitive in the admin
+ * inherits the accent and the neutrals through a single hop. Before T129 those
+ * 20 shadcn declarations sat in the instance and overwrote this package's own
+ * copy of them on every load, in every deployment; now there is one copy and it
+ * is this one.
+ */
+:root {
+  /* ---------- Layout breakpoints (feature 029 — mobile admin shell) ---------- */
+  --breakpoint-lg: 1024px;
+
+  /* ---------- Brand / accent (#6754e2 — feature 010 rebrand) ---------- */
+  --accent-h: 248;
+  --accent-s: 71%;
+  --accent-l: 61%;
+
+  --primary-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
+  --primary-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 4%));
+  --primary-active: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%));
+  --primary-fg: #ffffff;
+  --primary-soft: hsl(var(--accent-h) calc(var(--accent-s) - 10%) 96%);
+  --primary-soft-fg: hsl(var(--accent-h) calc(var(--accent-s) + 4%) 22%);
+  --ring-color: hsla(var(--accent-h), 70%, 38%, 0.35);
+
+  /* ---------- Neutrals (warm-ish gray, Shopify-leaning) ---------- */
+  --bg: #f6f6f7;
+  --bg-elevated: #ffffff;
+  --bg-sidebar: #1a1c1e;
+  --bg-sidebar-hover: #25282b;
+  --bg-sidebar-active: #2f3337;
+  --sidebar-fg: #d7d9dc;
+  --sidebar-fg-muted: #8b9097;
+  --sidebar-fg-active: #ffffff;
+
+  --surface: #ffffff;
+  --surface-muted: #fafbfb;
+  --surface-sunken: #f1f2f4;
+
+  --fg: #1a1c1e;
+  --fg-muted: #5b636d;
+  --fg-subtle: #8a9099;
+  --fg-disabled: #b5bac1;
+
+  --border-color: #e3e5e8;
+  --border-strong: #d3d6da;
+  --border-subtle: #ecedef;
+
+  /* ---------- Status colors (cards, badges, alerts) ---------- */
+  --success: #008060;
+  --success-soft: #e3f1df;
+  --success-soft-fg: #0c5132;
+
+  --warn: #b54708;
+  --warn-soft: #fff1e6;
+  --warn-soft-fg: #8a4a06;
+
+  --danger: #d72c0d;
+  --danger-soft: #fee9e7;
+  --danger-soft-fg: #8e1f0b;
+
+  --info: #1f6feb;
+  --info-soft: #e7f0ff;
+  --info-soft-fg: #134397;
+
+  --neutral-soft: #ebedef;
+  --neutral-soft-fg: #4a525c;
+
+  /* ---------- Radii ---------- */
+  --r-xs: 4px;
+  --r-sm: 6px;
+  --r-md: 8px;
+  --r-lg: 10px;
+  --r-xl: 14px;
+  --r-pill: 999px;
+
+  /* ---------- Shadows ---------- */
+  --sh-1: 0 1px 0 rgba(0, 0, 0, 0.05);
+  --sh-2: 0 1px 2px rgba(13, 16, 19, 0.08), 0 0 0 1px rgba(13, 16, 19, 0.04);
+  --sh-3: 0 4px 12px rgba(13, 16, 19, 0.10), 0 0 0 1px rgba(13, 16, 19, 0.04);
+  --sh-pop: 0 12px 32px rgba(13, 16, 19, 0.18), 0 0 0 1px rgba(13, 16, 19, 0.08);
+
+  /* ---------- Density (regular default) ---------- */
+  --row-h: 44px;
+  --row-pad: 12px;
+  --field-h: 36px;
+  --field-pad: 10px;
+
+  /* ---------- Typography ---------- */
+  --ff: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* ---------- shadcn semantic tokens, re-toned onto the palette above ---------- */
+  --background: 220 9% 97%;          /* matches --bg */
+  --foreground: 220 7% 11%;           /* matches --fg */
+  --card: 0 0% 100%;                  /* matches --surface */
+  --card-foreground: 220 7% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 7% 11%;
+
+  --primary: var(--accent-h) var(--accent-s) var(--accent-l);
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 220 7% 95%;            /* matches --surface-sunken */
+  --secondary-foreground: 220 7% 11%;
+  --muted: 220 7% 97%;                /* matches --surface-muted */
+  --muted-foreground: 218 8% 39%;     /* matches --fg-muted */
+  --accent: 220 7% 95%;
+  --accent-foreground: 220 7% 11%;
+
+  --destructive: 8 89% 45%;           /* matches --danger */
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 220 7% 90%;               /* matches --border-color */
+  --input: 220 7% 90%;
+  --ring: var(--accent-h) 70% 38%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 47.4% 11.2%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 47.4% 11.2%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 47.4% 11.2%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+[data-density="compact"] {
+  --row-h: 36px;
+  --row-pad: 8px;
+  --field-h: 32px;
+  --field-pad: 8px;
+}
+
+/*
+ * `@layer base` — and `design-tokens.css`' unlayered `body` and scrollbar rules
+ * are merged into it, after the rules they used to win against (R3.5).
+ *
+ * They used to win by being **unlayered**, which is why this package's own
+ * `@layer base` `body` never rendered. Inside one layer they win by being last,
+ * so the cascade result is unchanged and the layering is now honest.
+ */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  }
+  html,
+  body,
+  #root {
+    margin: 0;
+    height: 100%;
+  }
+
+  /* The design background, font stack and text rendering (feature 008). */
+
+  body {
+    font-family: var(--ff);
+    background: var(--bg);
+    color: var(--fg);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* Custom scrollbars across the app — small, matches Shopify-style admin. */
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-thumb {
+    background: #c8ccd1; border-radius: 999px;
+    border: 2px solid transparent; background-clip: padding-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #a9aeb5; background-clip: padding-box;
+    border: 2px solid transparent;
+  }
+  ::-webkit-scrollbar-track { background: transparent; }
+}
+
+/* ============================================================
+   The class vocabulary (R4.4) — feature 008, moved here by T129
+   ============================================================
+   BEM-style component classes co-existing with the shadcn/Tailwind
+   primitives `@endora-commerce/admin-kit/ui` publishes. 70 files in
+   `packages/` render them by name; a client overrides one by writing a
+   later rule in their own stylesheet, never by editing this file.
+
+   Whether this vocabulary is eventually retired in favour of the `ui/`
+   primitives is an open question and is the owner's — D-219 says so in
+   those words, and notes that whoever owns the vocabulary owns the
+   retirement. It is orthogonal to where the vocabulary lives.
+   ============================================================ */
+/* ============================================================
+   Sidebar (dark, grouped, collapsible)
+   ============================================================ */
+.b2b-sidebar {
+  background: var(--bg-sidebar);
+  color: var(--sidebar-fg);
+  display: flex; flex-direction: column;
+  height: 100vh;
+  position: sticky; top: 0;
+  border-right: 1px solid #000;
+  width: 248px;
+}
+.b2b-sidebar--rail { width: 64px; }
+
+/* Rail (icon-only) mode — hide everything that has running text and
+   center the remaining icons. The popover handles labels on demand. */
+.b2b-sidebar--rail .b2b-sidebar__brand {
+  padding: 14px 0;
+  justify-content: center;
+}
+.b2b-sidebar--rail .b2b-sidebar__brand-text { display: none; }
+.b2b-sidebar--rail .b2b-sidebar__search { padding: 8px 0; display: flex; justify-content: center; }
+.b2b-sidebar__search-rail {
+  width: 36px; height: 36px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: var(--r-sm);
+  color: var(--sidebar-fg-muted);
+  display: grid; place-items: center;
+  cursor: pointer;
+}
+.b2b-sidebar__search-rail:hover { background: rgba(255,255,255,0.12); color: #fff; }
+.b2b-sidebar--rail .b2b-sidebar__nav { padding: 4px 6px 8px; }
+.b2b-sidebar--rail .b2b-sidebar__group { padding: 4px 0; }
+.b2b-sidebar--rail .b2b-sidebar__group-label { display: none; }
+.b2b-sidebar__rail-row { display: flex; justify-content: center; padding: 2px 0; }
+.b2b-nav-item--rail {
+  width: 40px; height: 40px;
+  display: grid; place-items: center;
+  padding: 0;
+  border-radius: var(--r-sm);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--sidebar-fg);
+}
+.b2b-nav-item--rail svg { width: 18px; height: 18px; color: var(--sidebar-fg-muted); }
+.b2b-nav-item--rail:hover { background: var(--bg-sidebar-hover); }
+.b2b-nav-item--rail:hover svg { color: var(--sidebar-fg-active); }
+.b2b-nav-item--rail.is-active { background: var(--bg-sidebar-active); }
+.b2b-nav-item--rail.is-active svg { color: hsl(var(--accent-h) 90% 75%); }
+.b2b-nav-item--rail.is-open { background: var(--bg-sidebar-hover); }
+.b2b-nav-item--rail:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 1px;
+}
+
+/* Floating popover that appears next to a rail icon on hover or click. */
+.b2b-sidebar__rail-popover {
+  position: absolute;
+  left: 60px;
+  margin-top: -36px;
+  min-width: 200px;
+  max-width: 260px;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-md);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+  padding: 4px;
+  z-index: 60;
+}
+.b2b-sidebar__rail-popover-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 10px 4px;
+}
+.b2b-sidebar__rail-popover-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--fg);
+  border-radius: var(--r-sm);
+  text-decoration: none;
+}
+.b2b-sidebar__rail-popover-item svg {
+  width: 14px; height: 14px;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+.b2b-sidebar__rail-popover-item:hover {
+  background: var(--bg-muted);
+  color: var(--fg);
+}
+.b2b-sidebar__rail-popover-item.is-active {
+  background: hsl(var(--accent-h) 70% 50% / 0.12);
+  color: hsl(var(--accent-h) 70% 30%);
+  font-weight: 500;
+}
+.b2b-sidebar__rail-popover-item.is-active svg {
+  color: hsl(var(--accent-h) 70% 45%);
+}
+
+.b2b-sidebar__rail-toggle {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px;
+  font-size: 11px;
+  color: var(--sidebar-fg-muted);
+  background: transparent;
+  border: none;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+.b2b-sidebar__rail-toggle:hover { color: #fff; background: rgba(255,255,255,0.04); }
+.b2b-sidebar__rail-toggle svg { flex-shrink: 0; }
+.b2b-sidebar--rail .b2b-sidebar__rail-toggle { justify-content: center; padding: 10px 0; }
+.b2b-sidebar__rail-toggle-label { line-height: 1; }
+
+/* Foot — hide identity text in rail mode, keep the avatar + sign-out
+   icon stacked vertically so they don't overflow the 64px column. */
+.b2b-sidebar--rail .b2b-sidebar__foot {
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0;
+  align-items: center;
+}
+.b2b-sidebar--rail .b2b-sidebar__foot-identity {
+  margin: 0;
+  padding: 0;
+}
+.b2b-sidebar--rail .b2b-sidebar__foot .meta { display: none; }
+
+.b2b-sidebar__brand {
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 16px;
+  font-weight: 600; font-size: 14px; color: #fff;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  transition: background 80ms ease;
+}
+.b2b-sidebar__brand:hover { background: var(--bg-sidebar-hover); }
+.b2b-sidebar__brand:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: -2px;
+}
+.b2b-sidebar__brand-logo {
+  width: 28px; height: 28px;
+  border-radius: 7px;
+  /* A light ground, not the accent gradient it replaced. The mark is wine
+     (#8A1C5C) and the accent hue is indigo (248), so the gradient fought it;
+     and on the sidebar's own #1a1c1e the mark measures 1.95:1, which is
+     invisible. On this tint it is 8.37:1, and the tile itself sits at
+     16.35:1 against the sidebar. #fbf9ff rather than plain white because it
+     is the palette's own near-white. */
+  background: #fbf9ff;
+  display: grid; place-items: center;
+  padding: 3px;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;
+  flex-shrink: 0;
+}
+.b2b-sidebar__brand-logo svg {
+  width: 100%; height: 100%;
+  display: block;
+  object-fit: contain;
+}
+/* #9f67ff, not the palette's #7c3aed: this is 14px/600 text, so WCAG AA asks
+   4.5:1 and measured against #1a1c1e the darker violet gives 3.00:1 while this
+   one gives 4.77:1. #6322c8 is 2.11:1 and #c4b5fd is 9.26:1 but reads as
+   lavender rather than as the brand's violet. */
+.b2b-sidebar__brand-text-accent { color: #9f67ff; }
+
+.b2b-sidebar__search {
+  padding: 10px 12px;
+  position: relative;
+}
+.b2b-sidebar__search-input {
+  width: 100%;
+  height: 32px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: var(--r-sm);
+  color: #fff;
+  font-size: 12px;
+  padding: 0 36px 0 32px;
+  font-family: inherit;
+  cursor: pointer;
+}
+.b2b-sidebar__search-input::placeholder { color: var(--sidebar-fg-muted); }
+.b2b-sidebar__search-input:focus {
+  outline: none;
+  background: rgba(255,255,255,0.12);
+  border-color: rgba(255,255,255,0.25);
+}
+.b2b-sidebar__search-icon {
+  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
+  color: var(--sidebar-fg-muted); pointer-events: none;
+}
+.b2b-sidebar__search-kbd {
+  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
+  font-size: 10px; padding: 2px 5px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 3px; color: var(--sidebar-fg-muted);
+  font-family: var(--ff-mono);
+}
+
+.b2b-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px 16px;
+}
+
+.b2b-sidebar__group { padding: 8px 4px 4px; }
+.b2b-sidebar__group-label {
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 8px;
+  font-size: 11px; font-weight: 600;
+  color: var(--sidebar-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--r-xs);
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+}
+.b2b-sidebar__group-label:hover { color: var(--sidebar-fg); }
+.b2b-sidebar__group-label svg { transition: transform .12s; }
+.b2b-sidebar__group--collapsed .b2b-sidebar__group-label svg { transform: rotate(-90deg); }
+.b2b-sidebar__group--collapsed .b2b-sidebar__items { display: none; }
+.b2b-sidebar__items { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
+
+.b2b-nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--sidebar-fg);
+  border-radius: var(--r-sm);
+  transition: background .1s, color .1s;
+  position: relative;
+  text-decoration: none;
+}
+.b2b-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sidebar-fg-muted); }
+.b2b-nav-item:hover { background: var(--bg-sidebar-hover); color: var(--sidebar-fg-active); }
+.b2b-nav-item:hover svg { color: var(--sidebar-fg-active); }
+.b2b-nav-item.is-active {
+  background: var(--bg-sidebar-active);
+  color: var(--sidebar-fg-active);
+  font-weight: 500;
+}
+.b2b-nav-item.is-active svg { color: hsl(var(--accent-h) 90% 75%); }
+.b2b-nav-badge {
+  margin-left: auto;
+  font-size: 10px; padding: 1px 6px; border-radius: 999px;
+  background: rgba(255,255,255,0.10); color: var(--sidebar-fg);
+}
+.b2b-nav-item.is-active .b2b-nav-badge {
+  background: hsl(var(--accent-h) 70% 50%); color: #fff;
+}
+
+.b2b-sidebar__foot {
+  padding: 12px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  display: flex; align-items: center; gap: 10px;
+}
+.b2b-sidebar__foot-identity {
+  flex: 1; min-width: 0;
+  display: flex; align-items: center; gap: 10px;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  border-radius: var(--r-sm);
+  text-decoration: none; color: inherit; cursor: pointer;
+  transition: background 80ms ease;
+}
+.b2b-sidebar__foot-identity:hover { background: var(--bg-sidebar-hover); }
+.b2b-sidebar__foot-identity:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: -2px;
+}
+.b2b-avatar {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #ec4899);
+  color: #fff;
+  font-size: 11px; font-weight: 600;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+}
+.b2b-sidebar__foot .meta { flex: 1; min-width: 0; }
+.b2b-sidebar__foot .meta .name {
+  font-size: 12px; font-weight: 500; color: #fff;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.b2b-sidebar__foot .meta .role {
+  font-size: 11px; color: var(--sidebar-fg-muted);
+}
+.b2b-sidebar__foot .icon-btn {
+  width: 28px; height: 28px; border-radius: var(--r-sm);
+  background: transparent; border: none;
+  color: var(--sidebar-fg-muted);
+  display: grid; place-items: center; cursor: pointer;
+}
+.b2b-sidebar__foot .icon-btn:hover {
+  background: rgba(255,255,255,0.08); color: #fff;
+}
+
+/* ============================================================
+   Topbar (sticky breadcrumb header)
+   ============================================================ */
+.b2b-topbar {
+  height: 56px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border-color);
+  display: flex; align-items: center;
+  padding: 0 24px;
+  gap: 16px;
+  /* Sits above all in-page content — incl. the sticky form-action bar
+     (z-index 30) — so topbar popovers (e.g. the notification bell dropdown)
+     are not painted behind page buttons. Stays below the mobile nav backdrop
+     (40) and drawers/modals/scrim (50/60). */
+  position: sticky; top: 0; z-index: 35;
+}
+.b2b-topbar__crumbs {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 13px; color: var(--fg-muted);
+  flex: 1; min-width: 0;
+}
+.b2b-topbar__crumbs-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+}
+.b2b-topbar__crumbs .crumb-sep { color: var(--fg-disabled); }
+.b2b-topbar__crumbs .crumb-cur { color: var(--fg); font-weight: 500; }
+.b2b-topbar__crumbs .crumb-link {
+  color: var(--fg-muted);
+  text-decoration: none;
+  border-radius: 2px;
+  transition: color 80ms ease;
+}
+.b2b-topbar__crumbs .crumb-link:hover { color: var(--primary-color); text-decoration: underline; }
+.b2b-topbar__crumbs .crumb-link:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+.b2b-topbar__actions { display: flex; align-items: center; gap: 8px; }
+.b2b-topbar__icon-btn {
+  width: 34px; height: 34px;
+  border-radius: var(--r-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg-muted);
+  display: grid; place-items: center;
+  position: relative;
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.b2b-topbar__icon-btn:hover { background: var(--surface-sunken); color: var(--fg); }
+.b2b-topbar__icon-btn .dot {
+  position: absolute; top: 6px; right: 6px;
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--danger);
+  box-shadow: 0 0 0 2px var(--surface);
+}
+
+/* ============================================================
+   Page header
+   ============================================================
+   The outer gutter (24/28/64px) lives on `.b2b-main` so every page
+   inside the AppShell — both in-scope redesigned pages (Home,
+   Products, Product editor, Inventory, Price lists) and adapted
+   pages that still render shadcn primitives without a `.b2b-page`
+   wrapper — gets the same spacing. `.b2b-page` only re-centers the
+   content and caps its width. */
+.b2b-main {
+  padding: 24px 28px 64px;
+  max-width: 100%;
+}
+.b2b-page {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.b2b-page--wide { max-width: 1600px; }
+
+/* CMS content editors — settings above, page builder in its own row below */
+.cms-content-editor__builder {
+  width: 100%;
+  min-width: 0;
+}
+.cms-content-editor__builder .cms-page-builder {
+  min-height: calc(100vh - 320px);
+}
+/* While filtering the component drawer, force all category sections open. */
+.cms-page-builder [data-pb-drawer-filtering] [class*="ComponentList-content"] {
+  display: block !important;
+}
+.cms-page-builder .cms-pb-header-shell,
+.email-builder-pane .cms-pb-header-shell {
+  display: contents;
+}
+/* Left column: sidebar toggles + template actions, flush start. */
+.cms-page-builder .cms-pb-header-left,
+.email-builder-pane .cms-pb-header-left {
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+.cms-page-builder .cms-pb-header-leading,
+.email-builder-pane .cms-pb-header-leading {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  /* Puck's left toggle column sets a muted `color` — reset so our buttons match. */
+  color: hsl(var(--foreground));
+}
+.cms-page-builder .cms-pb-header-actions,
+.email-builder-pane .cms-pb-header-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  color: hsl(var(--foreground));
+}
+/* Keep the center title as a single centered label (Puck 1fr / auto / 1fr grid). */
+.cms-page-builder [class*="PuckHeader-title"],
+.email-builder-pane [class*="PuckHeader-title"] {
+  justify-self: center;
+  text-align: center;
+}
+/* Right tools: never wrap onto a second row. */
+.cms-page-builder [class*="PuckHeader-tools"],
+.email-builder-pane [class*="PuckHeader-tools"] {
+  align-items: center;
+  min-width: 0;
+}
+.cms-page-builder [class*="MenuBar-inner"],
+.email-builder-pane [class*="MenuBar-inner"] {
+  flex-wrap: nowrap !important;
+  gap: 0.5rem !important;
+}
+/* Prefer compact icon buttons on the right; show labels when there is room. */
+.cms-page-builder [class*="PuckHeader-tools"] .cms-pb-header-actions__label,
+.email-builder-pane [class*="PuckHeader-tools"] .cms-pb-header-actions__label {
+  display: none;
+  margin-inline-start: 0.25rem;
+}
+@media (min-width: 1280px) {
+  .cms-page-builder [class*="PuckHeader-tools"] .cms-pb-header-actions__label,
+  .email-builder-pane [class*="PuckHeader-tools"] .cms-pb-header-actions__label {
+    display: inline;
+  }
+}
+/* Left template actions keep their labels. */
+.cms-page-builder .cms-pb-header-leading .cms-pb-header-actions__label,
+.email-builder-pane .cms-pb-header-leading .cms-pb-header-actions__label {
+  display: inline;
+}
+/* Email header: Preview sits beside Clear/Fullscreen from PageBuilderHeaderActions. */
+.email-builder-pane [class*="PuckHeader-tools"] > .cms-pb-header-actions > .cms-pb-header-actions {
+  display: contents;
+}
+@media (max-width: 1023px) {
+  .cms-content-editor__builder .cms-page-builder {
+    min-height: min(70vh, 640px);
+  }
+}
+
+.b2b-page-head {
+  display: flex; align-items: flex-start; gap: 16px;
+  margin-bottom: 20px;
+}
+.b2b-page-head__back {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; color: var(--fg-muted);
+  margin-bottom: 6px;
+  background: transparent; border: none; cursor: pointer; padding: 0;
+  text-decoration: none;
+}
+.b2b-page-head__back:hover { color: var(--fg); }
+.b2b-page-head__title {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
+  color: var(--fg);
+}
+.b2b-page-head__sub {
+  color: var(--fg-muted); font-size: 13px; margin-top: 4px;
+}
+.b2b-page-head__actions {
+  display: flex; gap: 8px; margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   Buttons (used inside in-scope pages alongside shadcn ones)
+   ============================================================ */
+.b2b-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 6px;
+  height: var(--field-h);
+  padding: 0 14px;
+  border-radius: var(--r-sm);
+  font-weight: 500; font-size: 13px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  background: var(--surface);
+  color: var(--fg);
+  font-family: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
+}
+.b2b-btn:focus-visible {
+  outline: none; box-shadow: 0 0 0 3px var(--ring-color);
+}
+.b2b-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
+
+.b2b-btn--primary {
+  background: var(--primary-color); color: var(--primary-fg);
+  border-color: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%));
+  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,0.18);
+}
+.b2b-btn--primary:hover { background: var(--primary-hover); }
+.b2b-btn--primary:active { background: var(--primary-active); }
+
+.b2b-btn--default {
+  background: var(--surface);
+  border-color: var(--border-strong);
+  color: var(--fg);
+  box-shadow: var(--sh-1);
+}
+.b2b-btn--default:hover { background: var(--surface-sunken); }
+
+.b2b-btn--ghost {
+  background: transparent; border-color: transparent; color: var(--fg-muted);
+}
+.b2b-btn--ghost:hover { background: var(--surface-sunken); color: var(--fg); }
+
+.b2b-btn--danger {
+  background: var(--surface);
+  border-color: var(--border-strong);
+  color: var(--danger);
+  box-shadow: var(--sh-1);
+}
+.b2b-btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); }
+
+.b2b-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-xs); }
+.b2b-btn--lg { height: 40px; padding: 0 18px; font-size: 14px; }
+.b2b-btn--icon { width: var(--field-h); padding: 0; }
+.b2b-btn--sm.b2b-btn--icon { width: 28px; }
+
+/* ============================================================
+   Field / Input
+   ============================================================ */
+.b2b-field {
+  display: block;
+  width: 100%;
+  height: var(--field-h);
+  padding: 0 var(--field-pad);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--r-sm);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 13px;
+  transition: border-color .12s, box-shadow .12s;
+}
+textarea.b2b-field {
+  height: auto; padding: 8px var(--field-pad);
+  resize: vertical; min-height: 80px; line-height: 1.5;
+}
+.b2b-field:hover { border-color: var(--fg-subtle); }
+.b2b-field:focus {
+  outline: none; border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--ring-color);
+}
+.b2b-field::placeholder { color: var(--fg-subtle); }
+.b2b-field--mono { font-family: var(--ff-mono); font-size: 12px; }
+.b2b-field--addon { padding-left: 32px; }
+
+.b2b-input-wrap { position: relative; }
+.b2b-input-wrap > svg.lead, .b2b-input-wrap > svg.trail {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 16px; height: 16px; color: var(--fg-subtle); pointer-events: none;
+}
+.b2b-input-wrap > svg.lead { left: 10px; }
+.b2b-input-wrap > svg.trail { right: 10px; }
+
+.b2b-label {
+  display: block;
+  font-size: 12px; font-weight: 500;
+  color: var(--fg);
+  margin-bottom: 6px;
+}
+.b2b-help {
+  font-size: 12px; color: var(--fg-muted); margin-top: 4px;
+}
+
+/* Select (native, restyled).
+   MODIFIER ONLY — it strips the browser chrome and draws the chevron, but every
+   visible property (height, border, radius, background, focus ring) comes from
+   `.b2b-field`. Applied alone it yields a borderless control that reads as
+   plain text, so always pair the two: `class="b2b-field b2b-select"`.
+   React code should reach for the `Select` primitive instead
+   (`admin/src/components/ui/select.tsx`), which bundles both. */
+.b2b-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b636d' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 30px;
+}
+
+/* Checkbox */
+.b2b-cbx {
+  appearance: none; width: 16px; height: 16px;
+  border: 1.5px solid var(--border-strong); border-radius: 4px;
+  background: var(--surface);
+  display: inline-grid; place-content: center;
+  transition: background .12s, border-color .12s;
+  cursor: pointer; flex-shrink: 0;
+}
+.b2b-cbx:hover { border-color: var(--fg-subtle); }
+.b2b-cbx:checked { background: var(--primary-color); border-color: var(--primary-color); }
+.b2b-cbx:checked::after {
+  content: "";
+  width: 10px; height: 10px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
+}
+.b2b-cbx:indeterminate { background: var(--primary-color); border-color: var(--primary-color); }
+.b2b-cbx:indeterminate::after {
+  content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px;
+}
+
+/* Switch */
+.b2b-switch {
+  position: relative; display: inline-block; width: 32px; height: 18px;
+  flex-shrink: 0;
+}
+.b2b-switch input { display: none; }
+.b2b-switch i {
+  position: absolute; inset: 0;
+  background: var(--border-strong); border-radius: 999px;
+  transition: background .15s;
+}
+.b2b-switch i::before {
+  content: ""; position: absolute;
+  top: 2px; left: 2px; width: 14px; height: 14px;
+  background: #fff; border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+  transition: transform .15s;
+}
+.b2b-switch input:checked + i { background: var(--primary-color); }
+.b2b-switch input:checked + i::before { transform: translateX(14px); }
+
+/* ============================================================
+   Card / surface
+   ============================================================ */
+.b2b-card {
+  background: var(--surface);
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-lg);
+  box-shadow: var(--sh-1);
+}
+.b2b-card--clickable {
+  display: block;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+.b2b-card--clickable:hover {
+  border-color: var(--border-strong, var(--fg-muted));
+  box-shadow: var(--sh-2, var(--sh-1));
+  transform: translateY(-1px);
+}
+.b2b-card__head {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+}
+.b2b-card__title { font-size: 14px; font-weight: 600; color: var(--fg); }
+.b2b-card__sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
+.b2b-card__body { padding: 16px; }
+.b2b-card__body--flush { padding: 0; }
+.b2b-card__foot {
+  padding: 12px 16px; border-top: 1px solid var(--border-subtle);
+  background: var(--surface-muted); border-radius: 0 0 var(--r-lg) var(--r-lg);
+  display: flex; align-items: center; justify-content: space-between;
+}
+
+/* ============================================================
+   Badge / Pill / Status
+   ============================================================ */
+.b2b-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px; font-weight: 500;
+  border-radius: var(--r-pill);
+  background: var(--neutral-soft); color: var(--neutral-soft-fg);
+  white-space: nowrap;
+  line-height: 1.4;
+}
+.b2b-badge--success { background: var(--success-soft); color: var(--success-soft-fg); }
+.b2b-badge--warn    { background: var(--warn-soft); color: var(--warn-soft-fg); }
+.b2b-badge--danger  { background: var(--danger-soft); color: var(--danger-soft-fg); }
+.b2b-badge--info    { background: var(--info-soft); color: var(--info-soft-fg); }
+.b2b-badge--outline {
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--fg-muted);
+}
+.b2b-badge--solid   { background: var(--fg); color: #fff; }
+.b2b-badge--dot::before {
+  content: ""; width: 6px; height: 6px; border-radius: 50%;
+  background: currentColor; flex-shrink: 0;
+}
+
+/* ============================================================
+   Table
+   ============================================================ */
+.b2b-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
+.b2b-tbl thead th {
+  position: sticky; top: 0;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fg-muted);
+  background: var(--surface-muted);
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-color);
+  height: 36px;
+  white-space: nowrap;
+  z-index: 2;
+}
+.b2b-tbl tbody td {
+  padding: 0 12px;
+  height: var(--row-h);
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--fg);
+  vertical-align: middle;
+}
+.b2b-tbl tbody tr { transition: background .08s; }
+.b2b-tbl tbody tr:hover { background: var(--surface-muted); }
+.b2b-tbl tbody tr.is-selected { background: var(--primary-soft); }
+.b2b-tbl tbody tr.is-selected:hover {
+  background: hsl(var(--accent-h) calc(var(--accent-s) - 10%) 92%);
+}
+.b2b-tbl tbody tr:last-child td { border-bottom: none; }
+.b2b-tbl tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.b2b-tbl thead th.num { text-align: right; }
+.b2b-tbl tbody td.actions { width: 1%; white-space: nowrap; }
+.b2b-tbl .col-cb { width: 32px; padding-left: 14px; padding-right: 0; }
+.b2b-tbl tbody tr.is-clickable { cursor: pointer; }
+
+/* Empty state */
+.b2b-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 48px 16px; text-align: center; color: var(--fg-muted);
+  gap: 10px;
+}
+.b2b-empty__icon {
+  width: 48px; height: 48px; border-radius: 50%;
+  background: var(--surface-sunken);
+  display: grid; place-items: center;
+  color: var(--fg-subtle);
+}
+.b2b-empty__title { font-size: 14px; font-weight: 600; color: var(--fg); }
+.b2b-empty__sub { font-size: 13px; color: var(--fg-muted); max-width: 360px; }
+
+/* ============================================================
+   Tabs
+   ============================================================ */
+.b2b-tabs-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.b2b-tabs-scroll::-webkit-scrollbar {
+  display: none;
+}
+.b2b-tabs {
+  display: flex; gap: 4px;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0 4px;
+  width: max-content;
+  min-width: 100%;
+}
+.b2b-tab {
+  background: transparent; border: none;
+  padding: 10px 12px;
+  font-size: 13px; font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 2px solid transparent;
+  display: inline-flex; align-items: center; gap: 6px;
+  flex-shrink: 0;
+  margin-bottom: -1px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color .12s, border-color .12s;
+}
+.b2b-tab:hover { color: var(--fg); }
+.b2b-tab.is-active { color: var(--fg); border-bottom-color: var(--primary-color); }
+.b2b-tab .b2b-badge { font-size: 10px; padding: 0 6px; }
+
+/* ============================================================
+   Filterbar / chips
+   ============================================================ */
+.b2b-filterbar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border-subtle);
+  flex-wrap: wrap;
+}
+.b2b-filterbar__search {
+  flex: 1; min-width: 220px; max-width: 360px;
+}
+.b2b-filterchip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 0 10px;
+  height: 30px;
+  border-radius: var(--r-sm);
+  border: 1px dashed var(--border-strong);
+  background: transparent;
+  font-size: 12px; color: var(--fg-muted);
+  white-space: nowrap;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all .12s;
+}
+.b2b-filterchip:hover {
+  border-color: var(--fg-subtle); color: var(--fg);
+  border-style: solid;
+}
+.b2b-filterchip.is-on {
+  background: var(--primary-soft); color: var(--primary-soft-fg);
+  border: 1px solid hsl(var(--accent-h) 30% 80%);
+}
+.b2b-filterchip svg { width: 12px; height: 12px; }
+
+/* ============================================================
+   Bulk action bar
+   ============================================================ */
+.b2b-bulkbar {
+  background: var(--fg);
+  color: #fff;
+  border-radius: var(--r-md);
+  padding: 8px 12px 8px 16px;
+  display: flex; align-items: center; gap: 12px;
+  font-size: 13px;
+  margin: 0 12px 12px;
+  box-shadow: var(--sh-2);
+}
+.b2b-bulkbar .count { font-weight: 500; }
+.b2b-bulkbar .actions { margin-left: auto; display: flex; gap: 6px; }
+.b2b-bulkbar .b2b-btn {
+  height: 28px; font-size: 12px;
+  background: rgba(255,255,255,0.10);
+  border-color: rgba(255,255,255,0.15);
+  color: #fff;
+}
+.b2b-bulkbar .b2b-btn:hover { background: rgba(255,255,255,0.18); }
+.b2b-bulkbar .b2b-btn--danger {
+  background: rgba(255,255,255,0.10);
+  color: #ffb4ab;
+  border-color: rgba(255,255,255,0.15);
+}
+
+/* ============================================================
+   Save bar (sticky)
+   ============================================================ */
+.b2b-savebar {
+  position: sticky; bottom: 16px;
+  margin: 16px 0 0;
+  padding: 10px 16px;
+  background: #1f2225;
+  color: #fff;
+  border-radius: var(--r-lg);
+  display: flex; align-items: center; gap: 12px;
+  box-shadow: var(--sh-pop);
+  z-index: 10;
+  animation: b2b-slide-up .2s ease both;
+}
+.b2b-savebar__msg { font-size: 13px; flex: 1; }
+.b2b-savebar__msg b { color: #fff; }
+.b2b-savebar .b2b-btn--ghost { color: #d7d9dc; }
+.b2b-savebar .b2b-btn--ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
+@keyframes b2b-slide-up {
+  from { transform: translateY(8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* ============================================================
+   Drawer / Modal / Palette
+   ============================================================ */
+.b2b-scrim {
+  position: fixed; inset: 0;
+  background: rgba(13,16,19,0.45);
+  z-index: 50;
+  animation: b2b-fade-in .18s ease both;
+}
+@keyframes b2b-fade-in { from { opacity: 0 } to { opacity: 1 } }
+
+.b2b-drawer {
+  position: fixed; right: 0; top: 0; bottom: 0;
+  width: min(560px, 90vw);
+  background: var(--surface);
+  z-index: 60;
+  display: flex; flex-direction: column;
+  box-shadow: var(--sh-pop);
+  animation: b2b-slide-left .22s ease both;
+}
+.b2b-drawer--wide { width: min(720px, 92vw); }
+@keyframes b2b-slide-left {
+  from { transform: translateX(20px); opacity: 0 }
+  to { transform: translateX(0); opacity: 1 }
+}
+.b2b-drawer__head {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex; align-items: center; gap: 10px;
+}
+.b2b-drawer__title { font-size: 15px; font-weight: 600; flex: 1; }
+.b2b-drawer__body { flex: 1; overflow-y: auto; padding: 18px; }
+.b2b-drawer__foot {
+  padding: 12px 18px; border-top: 1px solid var(--border-color);
+  display: flex; gap: 8px; justify-content: flex-end;
+  background: var(--surface-muted);
+}
+
+.b2b-palette {
+  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
+  width: min(620px, 92vw);
+  background: var(--surface);
+  border-radius: var(--r-xl);
+  box-shadow: var(--sh-pop);
+  z-index: 60;
+  overflow: hidden;
+  animation: b2b-pop-in .14s ease both;
+  display: flex; flex-direction: column;
+  max-height: 70vh;
+}
+@keyframes b2b-pop-in {
+  from { transform: translate(-50%, -4px) scale(0.96); opacity: 0 }
+  to { transform: translate(-50%, 0) scale(1); opacity: 1 }
+}
+.b2b-palette__input {
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-color);
+}
+.b2b-palette__input input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: 15px; color: var(--fg);
+  font-family: inherit;
+}
+.b2b-palette__list { overflow-y: auto; padding: 8px; }
+.b2b-palette__group {
+  font-size: 10px; font-weight: 600; color: var(--fg-muted);
+  text-transform: uppercase; letter-spacing: 0.06em;
+  padding: 8px 10px 4px;
+}
+.b2b-palette__item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  font-size: 13px; cursor: pointer;
+}
+.b2b-palette__item:hover, .b2b-palette__item.is-cur { background: var(--surface-sunken); }
+.b2b-palette__item svg { width: 16px; height: 16px; color: var(--fg-muted); }
+.b2b-palette__item .meta { color: var(--fg-muted); font-size: 11px; margin-left: auto; }
+.b2b-kbd-sm {
+  display: inline-block; padding: 1px 5px;
+  font-size: 10px; font-family: var(--ff-mono);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  color: var(--fg-muted);
+}
+
+/* ============================================================
+   Stock pill
+   ============================================================ */
+.b2b-stock-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.b2b-stock-pill .bar {
+  width: 56px; height: 4px;
+  background: var(--surface-sunken); border-radius: 2px; overflow: hidden;
+}
+.b2b-stock-pill .bar > i {
+  display: block; height: 100%;
+  background: var(--success); border-radius: 2px;
+}
+.b2b-stock-pill.lo .bar > i { background: var(--warn); }
+.b2b-stock-pill.zero .bar > i { background: var(--danger); }
+
+/* ============================================================
+   Variant matrix
+   ============================================================ */
+.b2b-matrix-wrap { overflow: auto; }
+.b2b-matrix {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+.b2b-matrix th, .b2b-matrix td {
+  border-right: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0;
+  background: var(--surface);
+  vertical-align: middle;
+}
+.b2b-matrix th {
+  background: var(--surface-muted);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 8px 12px;
+  white-space: nowrap;
+}
+.b2b-matrix th.row-h, .b2b-matrix td.row-h {
+  background: var(--surface-sunken);
+  position: sticky; left: 0; z-index: 1;
+  text-align: left;
+}
+.b2b-matrix td.row-h { padding: 10px 12px; font-weight: 500; }
+.b2b-matrix .cell-input {
+  width: 100%; height: 36px;
+  border: none; outline: none;
+  padding: 0 10px;
+  background: transparent;
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+  font-family: inherit;
+}
+.b2b-matrix .cell-input:focus {
+  background: var(--primary-soft);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
+.b2b-matrix .cell--num { text-align: right; }
+.b2b-matrix tr:hover td { background: var(--surface-muted); }
+.b2b-matrix tr:hover td.row-h { background: var(--surface-sunken); }
+
+/* ============================================================
+   Mini list / mini row (activity feed, alerts, etc.)
+   ============================================================ */
+.b2b-minilist { display: flex; flex-direction: column; gap: 1px; }
+.b2b-minirow {
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 12px;
+  border-radius: var(--r-sm);
+  transition: background .1s;
+}
+.b2b-minirow:hover { background: var(--surface-sunken); }
+
+/* ============================================================
+   Locale strip (EN/PL toggle)
+   ============================================================ */
+.b2b-locale-strip {
+  display: inline-flex; align-items: center;
+  background: var(--surface-sunken);
+  padding: 2px;
+  border-radius: var(--r-sm);
+  gap: 0;
+}
+.b2b-locale-strip button {
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 12px; font-weight: 500;
+  color: var(--fg-muted);
+  padding: 4px 10px;
+  border-radius: var(--r-xs);
+  display: inline-flex; align-items: center; gap: 6px;
+  cursor: pointer;
+}
+.b2b-locale-strip button.is-active {
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--sh-1), 0 0 0 1px var(--border-color);
+}
+
+/* ============================================================
+   Misc helpers (used by in-scope pages)
+   ============================================================ */
+.b2b-row { display: flex; align-items: center; gap: 12px; }
+.b2b-col { display: flex; flex-direction: column; gap: 8px; }
+.b2b-grow { flex: 1; }
+.b2b-muted { color: var(--fg-muted); }
+.b2b-mono { font-family: var(--ff-mono); }
+.b2b-tabular { font-variant-numeric: tabular-nums; }
+.b2b-hr { height: 1px; background: var(--border-subtle); border: none; margin: 0; }
+
+.b2b-thumb {
+  border-radius: var(--r-sm);
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  display: grid; place-items: center;
+  color: rgba(255,255,255,0.92);
+  font-weight: 600;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
+}
+
+.b2b-tag-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-pill);
+  padding: 2px 8px 2px 4px;
+  font-size: 11px;
+  color: var(--fg);
+}
+.b2b-tag-pill .x {
+  width: 14px; height: 14px; border-radius: 50%;
+  display: grid; place-items: center;
+  cursor: pointer; color: var(--fg-muted);
+  background: transparent; border: none;
+}
+.b2b-tag-pill .x:hover { background: var(--border-color); color: var(--fg); }
+
+/* ============================================================
+   Mobile admin shell (feature 029)
+   ============================================================ */
+.b2b-app-layout {
+  display: grid;
+  min-height: 100vh;
+}
+
+@media (min-width: 1024px) {
+  .b2b-app-layout--rail {
+    grid-template-columns: 64px 1fr;
+  }
+  .b2b-app-layout--expanded {
+    grid-template-columns: 248px 1fr;
+  }
+}
+
+@media (max-width: 1023px) {
+  .b2b-app-layout {
+    grid-template-columns: 1fr;
+  }
+  .b2b-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 50;
+    width: min(280px, 85vw);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: none;
+  }
+  .b2b-sidebar.b2b-sidebar--drawer-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
+  }
+  .b2b-nav-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    background: rgba(0, 0, 0, 0.45);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .b2b-topbar__menu-btn {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    border-radius: var(--r-sm);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--fg-muted);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+  }
+  .b2b-topbar__menu-btn:hover {
+    background: var(--surface-sunken);
+    color: var(--fg);
+  }
+  .b2b-topbar {
+    padding: 0 12px;
+    gap: 8px;
+  }
+  .b2b-topbar__crumbs {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .b2b-main {
+    padding: 16px 16px 48px;
+  }
+  .b2b-page-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  .b2b-page-head__title {
+    font-size: 18px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .b2b-page-head__actions {
+    margin-left: 0;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .b2b-page:has(.b2b-sticky-form-actions) {
+    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
+  }
+  .b2b-tabs-scroll {
+    margin: 0 -4px;
+    padding: 0 4px;
+    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+  }
+  .b2b-tab {
+    min-height: 44px;
+    padding: 10px 14px;
+  }
+  .b2b-topbar__actions {
+    flex-shrink: 0;
+    gap: 4px;
+  }
+  .b2b-topbar__hide-mobile {
+    display: none !important;
+  }
+  .b2b-lang-picker__label {
+    display: none;
+  }
+  .b2b-main button.b2b-btn,
+  .b2b-main .b2b-topbar__icon-btn,
+  .b2b-main button[type="submit"],
+  .b2b-main a.b2b-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  /* Combine both classes so this beats the unconditional `.b2b-sticky-form-actions`
+     flex rule below (equal specificity would otherwise let the later flex rule win,
+     stacking every button onto its own row via flex-wrap + width:100%). */
+  .b2b-page-head__actions.b2b-sticky-form-actions {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    justify-items: stretch;
+  }
+  .b2b-page-head__actions.b2b-sticky-form-actions .b2b-btn {
+    min-width: 0;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Primary (Save) spans the full width on its own row — also keeps it full-width
+     when it's the only button (new-product create view). */
+  .b2b-page-head__actions.b2b-sticky-form-actions .b2b-btn--primary {
+    grid-column: 1 / -1;
+  }
+  .b2b-palette {
+    top: 8vh;
+    left: 12px;
+    right: 12px;
+    width: auto;
+    max-width: none;
+    transform: none;
+    animation: b2b-fade-in .14s ease both;
+  }
+  @keyframes b2b-pop-in-mobile {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  .b2b-palette { animation-name: b2b-pop-in-mobile; }
+  .b2b-main .grid,
+  .b2b-main [class*="grid-cols"]:not([class*="md:"]):not([class*="lg:"]) {
+    grid-template-columns: 1fr !important;
+  }
+  .b2b-kpi-grid {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+  }
+  .b2b-home-dashboard-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .b2b-grid--cols-2 {
+    grid-template-columns: 1fr !important;
+  }
+  .b2b-page .b2b-row:not(.b2b-kpi-grid) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .b2b-page .b2b-row .b2b-field,
+  .b2b-page .b2b-row select.b2b-field {
+    max-width: none !important;
+    width: 100%;
+  }
+  .b2b-impersonation-slot {
+    flex-shrink: 0;
+  }
+  .b2b-reorder-desktop-only {
+    display: none !important;
+  }
+  .b2b-touch-reorder {
+    display: flex;
+  }
+  .b2b-table,
+  .b2b-table-wrap,
+  .b2b-tbl {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+  }
+  .puck-root,
+  [class*='Puck'] {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}
+
+.b2b-table-scroll {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-md);
+}
+.b2b-table-scroll::after {
+  content: '';
+  display: block;
+  height: 0;
+}
+@media (max-width: 1023px) {
+  .b2b-table-scroll {
+    background: linear-gradient(to right, var(--surface) 90%, rgba(255, 255, 255, 0));
+  }
+}
+
+.b2b-responsive-card {
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-md);
+  padding: 12px 14px;
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.b2b-responsive-card__headline {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--fg);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.b2b-responsive-card__meta {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.b2b-responsive-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+.b2b-responsive-card__actions .b2b-btn,
+.b2b-responsive-card__actions button {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+.b2b-sticky-form-actions {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 30;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--surface) 95%, transparent);
+  backdrop-filter: blur(8px);
+}
+@media (min-width: 1024px) {
+  .b2b-sticky-form-actions {
+    position: static;
+    border-top: none;
+    padding: 0;
+    background: transparent;
+    backdrop-filter: none;
+  }
+}
+
+.b2b-touch-reorder {
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+}
+@media (max-width: 1023px) {
+  .b2b-touch-reorder {
+    display: inline-flex;
+  }
+  .b2b-reorder-desktop-only {
+    display: none !important;
+  }
+}
+@media (min-width: 1024px) {
+  .b2b-reorder-desktop-only {
+    display: inline-flex;
+  }
+}
+.b2b-touch-reorder__btn {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+.b2b-touch-reorder__btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.b2b-touch-reorder__btn:not(:disabled):hover {
+  background: var(--surface-sunken);
+  color: var(--fg);
+}
+
+.pb-action-bar-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+}
+
+.pb-action-bar-handle:active {
+  cursor: grabbing;
+}
+
+[data-puck-entry] [class*='DropZone-hitbox'] {
+  height: 36px;
+  bottom: -18px;
+  z-index: 2;
+}
+
+[data-puck-entry] [class*='DropZone--isDestination'] {
+  outline: 2px solid var(--puck-color-azure-04, #0158ad) !important;
+  outline-offset: 2px !important;
+}
+
+[data-puck-entry] [data-dnd-placeholder] {
+  opacity: 0.55 !important;
+  min-height: 52px !important;
+  border-radius: 6px !important;
+}
+
+.pb-component-overlay {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.pb-component-overlay__label {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 4;
+  max-width: calc(100% - 8px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: var(--puck-color-azure-04, #0158ad);
+  pointer-events: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+}
+
+[data-puck-entry]:has([data-puck-dragging]) [class*='DropZone--isEnabled'] {
+  outline: 1px dashed var(--puck-color-azure-06, #6499cf);
+  outline-offset: 1px;
+}
+
+.pb-outline-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pb-outline-list--root {
+  padding: 4px 0;
+}
+
+.pb-outline-empty {
+  padding: 4px 8px;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.pb-outline-item {
+  list-style: none;
+}
+
+.pb-outline-item__row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border-left: 2px solid transparent;
+  padding-left: calc(6px + (var(--pb-outline-depth, 0) * 12px));
+  cursor: grab;
+  user-select: none;
+}
+
+.pb-outline-item--dragging .pb-outline-item__row {
+  opacity: 0.45;
+  cursor: grabbing;
+}
+
+.pb-outline-item--drop-before::before {
+  content: '';
+  display: block;
+  height: 2px;
+  margin: 0 8px 2px calc(6px + (var(--pb-outline-depth, 0) * 12px));
+  background: var(--puck-color-azure-04, #0158ad);
+  border-radius: 1px;
+}
+
+.pb-outline-item--selected .pb-outline-item__row {
+  border-left-color: var(--puck-color-azure-04, #0158ad);
+  background: var(--puck-color-grey-09, #e8eef3);
+}
+
+.pb-outline-item__row:hover {
+  background: var(--puck-color-grey-10, #f3f6f9);
+}
+
+.pb-outline-item__drag {
+  padding: 6px 2px;
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.pb-outline-item__label,
+.pb-outline-item__action {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+}
+
+.pb-outline-item__label {
+  flex: 1;
+  min-width: 0;
+  gap: 6px;
+  padding: 6px 4px;
+  text-align: left;
+  font-size: 13px;
+}
+
+.pb-outline-item__icon {
+  width: 14px;
+  flex-shrink: 0;
+  opacity: 0.7;
+  font-size: 11px;
+}
+
+.pb-outline-item__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.pb-outline-item--column .pb-outline-item__text {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.pb-outline-item__actions {
+  display: inline-flex;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.pb-outline-item__row:hover .pb-outline-item__actions,
+.pb-outline-item--selected .pb-outline-item__actions {
+  opacity: 1;
+}
+
+.pb-outline-item__action {
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.pb-outline-item__action:hover {
+  background: rgb(0 0 0 / 6%);
+}
+
+.pb-row-action-bar__layout-anchor {
+  display: inline-flex;
+}
+
+.pb-row-action-flyout {
+  min-width: 180px;
+  padding: 6px;
+  border: 1px solid #d9e0e7;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow:
+    0 10px 28px rgb(15 23 42 / 18%),
+    0 0 0 1px rgb(15 23 42 / 4%);
+}
+
+.pb-row-action-flyout__heading {
+  margin: 4px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.pb-row-action-flyout__item {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #0f172a;
+  text-align: left;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.pb-row-action-flyout__item:hover {
+  background: #f1f5f9;
+}
+
+.pb-quick-tooltip-host {
+  position: relative;
+  display: inline-flex;
+}
+
+.pb-quick-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  z-index: 120;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: #1e293b;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgb(15 23 42 / 20%);
+}
+
+/* Email builder — mail canvas width (600 / 320), not CMS breakpoints */
+.email-builder-pane [class*='PuckLayout-canvas'] {
+  overflow-x: auto;
+}
+
+.email-builder-pane[data-preview-width='600'] [class*='PuckLayout-canvas'] > div,
+.email-builder-pane[data-preview-width='320'] [class*='PuckLayout-canvas'] > div {
+  margin-inline: auto;
+  max-width: var(--email-preview-width, 600px);
+}
+
+/* Only constrain the root canvas dropzone — nested Row/Column slots must stay fluid. */
+.email-builder-pane[data-preview-width='600'] [class*='PuckLayout-canvas'] > div > [class*='DropZone'],
+.email-builder-pane[data-preview-width='320'] [class*='PuckLayout-canvas'] > div > [class*='DropZone'] {
+  max-width: var(--email-preview-width, 600px);
+}
+
+.email-builder-pane [class*='DropZone'] [class*='DropZone'] {
+  max-width: none;
+}
+