/* ============================================================
   B2B COMMERCE v3 — layered on wb2.css. The store is drawn as live
   HTML fragments (palette-aware, crisp at any size) instead of
   screenshots. Photos are Magnific (img/stock/b2b3/README.md);
   products are isolated-on-white shots squared by
   tools/magnific/cutout.py and multiplied onto tinted tiles.
   UI fragments are sized in em off one font-size per fragment,
   so each scales as a whole with its container.
   ============================================================ */

.wb3-page {
  --wb3-ok: #1f9e6e;
  --wb3-warn: #c4841d;
  --wb3-bad: #c8473a;
  --wb3-tile: color-mix(in srgb, var(--text) 5%, var(--surface));
  --wb3-card-shadow: 0 22px 48px -22px rgba(8, 16, 30, 0.42);
}

/* ---- UI atoms (em-based) ---- */
.wb3-card { border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--wb3-card-shadow); }
.wb3-ch { display: flex; align-items: baseline; gap: 0.6em; margin-bottom: 0.7em; font-size: 0.78em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.wb3-ch small { font-size: 1em; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.wb3-ch .wb3-link { margin-left: auto; font-size: 1.1em; letter-spacing: 0.02em; text-transform: none; }
.wb3-thumb { position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 1; background: var(--wb3-tile); overflow: hidden; }
.wb3-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wb3-thumb.is-sku { font-size: 0.68em; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.wb3-kick { font-size: 0.74em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.wb3-pname { font-size: 1.08em; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.wb3-meta { font-size: 0.82em; color: var(--muted); font-variant-numeric: tabular-nums; }
.wb3-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; font-variant-numeric: tabular-nums; }
.wb3-price b { font-size: 1.65em; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.wb3-price s { font-size: 0.88em; color: var(--muted); }
.wb3-price small { flex-basis: 100%; font-size: 0.76em; color: var(--muted); }
.wb3-flag { position: absolute; left: 0.6em; top: 0.6em; padding: 0.28em 0.55em; background: var(--accent); color: var(--accent-ink); font-size: 0.72em; font-weight: 700; letter-spacing: 0.01em; }
.wb3-stock { display: flex; flex-wrap: wrap; gap: 0.3em 1em; list-style: none; font-size: 0.84em; color: var(--muted); }
.wb3-stock li { display: inline-flex; align-items: center; gap: 0.4em; }
.wb3-stock b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.wb3-stock i,
.wb3-stk em::before { flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--wb3-ok); }
.wb3-stock i.is-low,
.wb3-stk em.is-low::before { background: var(--wb3-warn); }
.wb3-stk em.is-out::before { background: var(--wb3-bad); }
.wb3-buy { display: flex; align-items: stretch; gap: 0.5em; }
.wb3-qty { display: inline-grid; grid-template-columns: 1.8em auto 1.8em; align-items: center; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.wb3-qty i { font-style: normal; text-align: center; color: var(--muted); }
.wb3-qty b { min-width: 1.8em; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.wb3-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.62em 0.95em; background: var(--cta); color: var(--cta-ink); font-size: 0.92em; font-weight: 600; white-space: nowrap; }
.wb3-btn.is-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.wb3-btn.is-wide { width: 100%; }
.wb3-link { font-size: 0.86em; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); }
.wb3-g { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; color: var(--muted); }
.wb3-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--text); animation: wb3-caret 1s steps(1) infinite; }
@keyframes wb3-caret { 50% { opacity: 0; } }
.wb3-page mark { padding: 0 0.08em; background: color-mix(in srgb, var(--accent) 55%, transparent); color: inherit; }
.wb3-logo { font-size: 1.1em; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.wb3-logo b { margin-left: 0.3em; padding: 0.1em 0.32em; background: var(--text); color: var(--surface); font-size: 0.66em; font-weight: 800; letter-spacing: 0.1em; vertical-align: 0.18em; }
.wb3-cart b { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; margin-left: 0.35em; padding: 0 0.4em; border-radius: 999px; background: var(--cta); color: var(--cta-ink); font-size: 0.78em; }

/* ============================================================
   HERO — photo + three store fragments
   ============================================================ */
.wb3-stage { position: relative; height: clamp(520px, calc(100vh - var(--header-h) - 150px), 700px); margin-top: clamp(16px, 3vw, 40px); }
.wb3-hero-photo { position: absolute; top: 0; right: 0; width: 80%; height: 87%; margin: 0; overflow: hidden; background: var(--bg-alt); box-shadow: var(--wb2-shadow); }
.wb3-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.wb2-js .wb3-hero-photo.is-in img { animation: wb3-zoom 2.4s var(--ease) both; }
@keyframes wb3-zoom { from { transform: scale(1.08); } }

.wb3-ui { position: absolute; z-index: 3; font-size: 13px; }
.wb2-js .wb3-ui.is-in { animation: wb3-float 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 1s); }
@keyframes wb3-float { 50% { translate: 0 -8px; } }

.wb3-pcard { left: 0; top: 5%; display: grid; gap: 5px; width: clamp(214px, 36%, 252px); padding: 10px 10px 12px; }
.wb3-pcard-img { position: relative; aspect-ratio: 5 / 3.4; margin-bottom: 6px; background: var(--wb3-tile); }
.wb3-pcard-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wb3-pcard .wb3-kick,
.wb3-pcard .wb3-pname,
.wb3-pcard .wb3-meta,
.wb3-pcard .wb3-price,
.wb3-pcard .wb3-stock { padding-inline: 4px; }
.wb3-pcard .wb3-pname { font-size: 15px; }
.wb3-pcard .wb3-price { margin-top: 4px; }
.wb3-pcard .wb3-price small { flex-basis: auto; }
.wb3-pcard .wb3-stock { gap: 2px 10px; margin: 2px 0 6px; font-size: 11.5px; }
.wb3-pcard .wb3-buy .wb3-btn { flex: 1; }

.wb3-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.wb3-toast p { display: grid; gap: 2px; min-width: 0; }
.wb3-toast b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.wb3-toast small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wb3-toast.is-erp { top: 59%; right: -2%; --erp-h: 40px; }
.wb3-erp { height: var(--erp-h); overflow: hidden; }
.wb3-erp-track { display: flex; flex-direction: column; }
.wb3-erp-item { display: flex; align-items: center; gap: 12px; height: var(--erp-h); flex: none; }
.wb3-erp-item img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.wb2-js .wb3-toast.is-erp.is-in .wb3-erp-track {
  animation: wb3-erp 24s ease infinite;
  animation-delay: 1.8s;
}
@keyframes wb3-erp {
  0%, 12.4% { transform: translateY(0); }
  14.2857%, 26.7% { transform: translateY(calc(var(--erp-h) * -1)); }
  28.5714%, 41% { transform: translateY(calc(var(--erp-h) * -2)); }
  42.8571%, 55.3% { transform: translateY(calc(var(--erp-h) * -3)); }
  57.1429%, 69.5% { transform: translateY(calc(var(--erp-h) * -4)); }
  71.4286%, 83.8% { transform: translateY(calc(var(--erp-h) * -5)); }
  85.7143%, 98.1% { transform: translateY(calc(var(--erp-h) * -6)); }
  100% { transform: translateY(calc(var(--erp-h) * -7)); }
}
.wb3-toast.is-order { left: 26%; bottom: 0; }
.wb3-toast-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; background: var(--text); color: var(--bg); font-size: 24px; }
.wb3-ok { margin-left: 6px; padding: 4px 8px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wb3-ui .wb2-live i,
.wb3-mon .wb2-live i { background: var(--wb3-ok); }
.wb3-admin .wb2-admin-chip { left: auto; right: clamp(-28px, -2vw, -12px); top: clamp(-36px, -2.6vw, -16px); bottom: auto; }

/* ============================================================
   INDUSTRIES — tags as chips, midnight scrim
   ============================================================ */
.wb3-inds .wb2-ind::after { background: linear-gradient(to top, color-mix(in srgb, var(--deep) 86%, transparent), transparent 62%); }
.wb3-inds .wb2-ind-t { gap: 10px; }
.wb3-inds .wb2-ind-t p { display: flex; flex-wrap: wrap; gap: 6px; color: var(--deep-text); }
.wb3-inds .wb2-ind-t p span {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--deep-text) 28%, transparent);
  background: color-mix(in srgb, var(--deep-text) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

/* ============================================================
   BUYER VIEW — live store with pins inside their regions
   ============================================================ */
.wb3-board { overflow: hidden; }
.wb3-store { container-type: inline-size; }
.wb3-s { font-size: clamp(7px, calc(100cqw / 94), 13.5px); line-height: 1.35; background: var(--surface); color: var(--text); }

.wb3-store .wb2-pin {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  translate: none;
  border-width: 1.5px;
  font-size: max(10px, 0.82em);
  vertical-align: middle;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.wb3-pin-m { display: none !important; }
.wb3-rg { outline: 2px solid transparent; transition: outline-color 0.35s, background-color 0.35s; }
.wb3-store[data-on="1"] [data-rg="1"],
.wb3-store[data-on="2"] [data-rg="2"],
.wb3-store[data-on="3"] [data-rg="3"] { outline-color: var(--accent); }
.wb3-store[data-on="3"] .wb3-side { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.wb3-acct { display: flex; align-items: center; gap: 0 2.2em; padding: 0.55em 1.6em; outline-offset: -2px; background: var(--deep); color: var(--deep-muted); font-size: 0.86em; white-space: nowrap; }
.wb3-acct b { font-weight: 600; color: var(--deep-text); }
.wb3-credit { display: inline-flex; align-items: center; gap: 0.5em; }
.wb3-credit i { position: relative; width: 6em; height: 0.38em; background: color-mix(in srgb, var(--deep-text) 18%, transparent); }
.wb3-credit i::after { content: ""; position: absolute; inset: 0 44% 0 0; background: var(--deep-accent); }
.wb3-rep { margin-left: auto; }

.wb3-head { display: flex; align-items: center; gap: 2em; padding: 0.95em 1.6em; border-bottom: 1px solid var(--line); }
.wb3-search { position: relative; z-index: 4; display: flex; flex: 1; align-items: center; gap: 0.6em; max-width: 36em; height: 2.75em; padding: 0 0.5em 0 0.9em; border: 1px solid var(--line); outline-offset: 2px; background: var(--surface); }
.wb3-q { font-weight: 500; }
.wb3-q::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--text); opacity: 0; }
.wb3-store[data-on="1"] .wb3-q::after { animation: wb3-caret 1s steps(1) infinite; }
.wb3-search kbd { margin-left: auto; font: inherit; font-size: 0.8em; color: var(--muted); white-space: nowrap; }
.wb3-drop {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 0.4em);
  display: grid;
  padding: 0.4em;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--wb3-card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4em);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.3s;
}
.wb3-store[data-on="1"] .wb3-drop { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s; }
.wb3-drop > p { padding: 0.3em 0.5em 0.5em; font-size: 0.78em; color: var(--muted); }
.wb3-drop-r { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 0.8em; padding: 0.45em 0.5em; }
.wb3-drop-r:first-of-type { background: var(--wb3-tile); }
.wb3-drop-r b { display: block; font-weight: 500; }
.wb3-drop-r small { font-size: 0.8em; color: var(--muted); }
.wb3-drop-r em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb3-hnav { display: flex; align-items: center; gap: 1.6em; margin-left: auto; font-weight: 500; white-space: nowrap; }

.wb3-cats { display: flex; gap: 2.2em; padding: 0 1.6em; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; }
.wb3-cats span { padding: 0.75em 0; }
.wb3-cats .is-on { color: var(--text); box-shadow: inset 0 -2px var(--text); }

.wb3-body { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); }
.wb3-side { position: relative; display: grid; align-content: start; gap: 1.15em; padding: 1.2em 1.3em 1.4em 1.6em; border-right: 1px solid var(--line); outline-offset: -2px; }
.wb3-side > .wb2-pin { position: absolute; top: 0.9em; right: 0.9em; }
.wb3-f > p { margin-bottom: 0.55em; font-size: 0.76em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wb3-f ul { display: grid; gap: 0.45em; list-style: none; }
.wb3-f li { display: flex; align-items: center; gap: 0.6em; }
.wb3-f li i { position: relative; flex: none; width: 1.05em; height: 1.05em; border: 1px solid color-mix(in srgb, var(--text) 32%, transparent); }
.wb3-f li.is-on i { border-color: var(--cta); background: var(--cta); }
.wb3-f li.is-on i::after { content: ""; position: absolute; left: 0.3em; top: 0.1em; width: 0.28em; height: 0.56em; border: solid var(--cta-ink); border-width: 0 0.13em 0.13em 0; transform: rotate(45deg); }
.wb3-f li em { margin-left: auto; font-size: 0.84em; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.wb3-seg { display: flex; flex-wrap: wrap; gap: 0.35em; }
.wb3-seg span { padding: 0.28em 0.6em; border: 1px solid var(--line); font-size: 0.9em; }
.wb3-seg .is-on { border-color: var(--text); background: var(--text); color: var(--surface); }

.wb3-main { min-width: 0; padding: 1.1em 1.6em 1.2em; }
.wb3-crumbs { font-size: 0.82em; color: var(--muted); }
.wb3-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 1em; margin-top: 0.35em; }
.wb3-title b { font-size: 1.55em; font-weight: 600; letter-spacing: -0.03em; }
.wb3-title span { font-size: 0.9em; color: var(--muted); }
.wb3-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.9em 0 1em; outline-offset: 3px; }
.wb3-chips span { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.6em; background: var(--wb3-tile); font-size: 0.88em; }
.wb3-chips span::after { content: "×"; color: var(--muted); }
.wb3-chips em { margin-left: auto; font-size: 0.88em; font-style: normal; color: var(--muted); }

.wb3-table { border-top: 1px solid var(--line); }
.wb3-tr {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.3fr);
  grid-template-areas: "p s pr pk a";
  border-bottom: 1px solid var(--line);
}
.wb3-tr > span { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0.65em 0.6em; transition: background-color 0.35s; }
.wb3-tr > span:first-child { padding-left: 0; }
.wb3-tr > span:last-child { padding-right: 0; }
.wb3-tr > :nth-child(1) { grid-area: p; }
.wb3-tr > :nth-child(2) { grid-area: s; }
.wb3-tr > :nth-child(3) { grid-area: pr; }
.wb3-tr > :nth-child(4) { grid-area: pk; }
.wb3-tr > :nth-child(5) { grid-area: a; }
.wb3-tr.is-h > span { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.1em 0.5em; padding-block: 0.55em; font-size: 0.8em; font-weight: 600; color: var(--muted); }
.wb3-tr.is-h small { flex-basis: 100%; font-weight: 400; }
.wb3-tr .wb3-wh { display: flex; gap: 0.3em; }
.wb3-wh span { flex: 1; }
.wb3-prod { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 0.8em; }
.wb3-prod .wb3-thumb { width: 3.4em; }
.wb3-prod b { display: block; font-weight: 500; line-height: 1.3; }
.wb3-tr small { display: block; font-size: 0.82em; color: var(--muted); }
.wb3-stk { display: flex; gap: 0.3em; }
.wb3-stk em { display: inline-flex; flex: 1; align-items: center; gap: 0.35em; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.wb3-stk em::before { content: ""; }
.wb3-stk em.is-out { color: var(--muted); }
.wb3-tr .wb3-back { margin-top: 0.15em; color: var(--wb3-warn); }
.c-price s { font-size: 0.82em; color: var(--muted); }
.c-price b { font-size: 1.12em; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb3-add { flex-direction: row !important; align-items: center; justify-content: flex-end !important; gap: 0.4em; }
.wb3-add .wb3-btn { padding: 0.5em 0.8em; }
.wb3-store[data-on="4"] .c-stock,
.wb3-store[data-on="5"] .c-price,
.wb3-store[data-on="6"] .c-pack { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wb3-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em 1em; margin-top: 0.9em; font-size: 0.8em; color: var(--muted); }
.wb3-pages { display: flex; gap: 0.3em; }
.wb3-pages span { display: grid; place-items: center; min-width: 2.2em; height: 2.2em; padding: 0 0.6em; border: 1px solid var(--line); color: var(--text); font-weight: 500; }
.wb3-pages .is-on { border-color: var(--text); background: var(--text); color: var(--surface); }

@container (max-width: 1000px) {
  .wb3-s { font-size: clamp(7px, calc(100cqw / 72), 13.5px); }
  .wb3-body { grid-template-columns: minmax(0, 1fr); }
  .wb3-side { display: none; }
  .wb3-pin-m { display: inline-grid !important; }
  .wb3-rep { display: none; }
}
@container (max-width: 620px) {
  .wb3-s { font-size: clamp(9px, calc(100cqw / 34), 12px); }
  .wb3-acct { gap: 0 1.2em; padding-inline: 1em; }
  .wb3-acct > span:nth-child(2),
  .wb3-acct > span:nth-child(3) { display: none; }
  .wb3-acct .wb2-pin { margin-left: auto; }
  .wb3-head { flex-wrap: wrap; gap: 0.7em 1em; padding: 0.8em 1em; }
  .wb3-search { order: 3; flex-basis: 100%; max-width: none; }
  .wb3-search kbd { display: none; }
  .wb3-hnav > span:not(.wb3-cart) { display: none; }
  .wb3-cats { display: none; }
  .wb3-main { padding: 0.9em 1em 1em; }
  .wb3-crumbs,
  .wb3-chips em { display: none; }
  .wb3-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "p p p" "s pr pk"; }
  .wb3-tr > span:nth-child(2) { padding-left: 0; }
  .wb3-tr > :nth-child(5),
  .wb3-tr.is-h > :nth-child(1) { display: none; }
  .wb3-tr:not(.is-h) > .wb3-prod { padding-bottom: 0; }
  .wb3-prod .wb3-thumb { width: 2.8em; }
}

/* ============================================================
   TOOLS — fragments of the store on a midnight backdrop
   ============================================================ */
.wb3-tool-stage { container-type: inline-size; overflow: hidden; background: var(--deep); box-shadow: var(--wb2-shadow); }
.wb3-tool-stage::before {
  content: "";
  position: absolute;
  inset: -24px;
  background:
    linear-gradient(color-mix(in srgb, var(--deep) 66%, transparent), color-mix(in srgb, var(--deep) 86%, transparent)),
    url("../../img/stock/b2b3/i-electrical.webp") 50% 50% / cover;
  filter: blur(4px) saturate(0.45);
}
.wb3-panel { font-size: calc(100cqw / 55); line-height: 1.35; }
.wb3-panel > .wb3-card { position: absolute; padding: 1.15em 1.25em; }

.wb3-pdp { left: 4.5%; top: 6%; display: grid; gap: 0.95em; width: 59%; }
.wb3-pdp-top { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 1.2em; align-items: start; }
.wb3-pdp-img { position: relative; aspect-ratio: 1; background: var(--wb3-tile); }
.wb3-pdp-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wb3-pdp-h { display: grid; gap: 0.35em; padding-top: 0.2em; }
.wb3-pdp-h .wb3-price { margin-top: 0.4em; }
.wb3-breaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.wb3-breaks span { display: grid; gap: 0.1em; padding: 0.5em 0.7em; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb3-breaks span + span { border-left: 1px solid var(--line); }
.wb3-breaks small { font-size: 0.78em; font-weight: 500; color: var(--muted); }
.wb3-breaks .is-on { background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: inset 0 -2px var(--text); }
.wb3-note { font-size: 0.84em; color: var(--muted); }
.wb3-pdp .wb3-buy .wb3-btn { flex: 1; }
.wb3-pdp .wb3-link { justify-self: start; }

.wb3-specs { right: 3.5%; top: 11%; width: 35%; }
.wb3-specs dl > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.48em 0; border-top: 1px solid var(--line); font-size: 0.9em; }
.wb3-specs dt { color: var(--muted); }
.wb3-specs dd { font-weight: 500; text-align: right; }
.wb3-docs { right: 7%; bottom: 7%; width: 31%; }
.wb3-docs ul { display: grid; gap: 0.5em; list-style: none; }
.wb3-docs li { display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; font-weight: 500; }
.wb3-docs li i { padding: 0.25em 0.4em; border: 1px solid color-mix(in srgb, var(--wb3-bad) 45%, transparent); color: var(--wb3-bad); font-size: 0.7em; font-style: normal; font-weight: 700; letter-spacing: 0.04em; }
.wb3-docs li small { margin-left: auto; font-size: 0.86em; color: var(--muted); }

.wb3-paste { left: 5%; top: 10%; width: 33%; }
.wb3-seg2 { display: flex; margin-bottom: 0.8em; border: 1px solid var(--line); font-size: 0.86em; }
.wb3-seg2 > * { flex: 1; padding: 0.45em 0.6em; text-align: center; }
.wb3-seg2 b { background: var(--text); color: var(--surface); font-weight: 600; }
.wb3-seg2 span { color: var(--muted); }
.wb3-mono { margin: 0; padding: 0.8em 0.9em; border: 1px solid var(--line); background: var(--bg-alt); font: 500 0.88em/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); white-space: pre; overflow: hidden; }
.wb3-file { display: flex; align-items: center; gap: 0.7em; margin-top: 0.8em; padding: 0.6em 0.7em; border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); font-size: 0.86em; }
.wb3-file i { padding: 0.3em 0.45em; background: var(--wb3-ok); color: #fff; font-size: 0.75em; font-style: normal; font-weight: 700; letter-spacing: 0.04em; }
.wb3-file span { display: grid; font-weight: 600; }
.wb3-file small { font-weight: 400; color: var(--muted); }

.wb3-check { right: 4%; top: 6%; width: 61%; }
.wb3-check ul { border-top: 1px solid var(--line); list-style: none; }
.wb3-check li { display: grid; grid-template-columns: minmax(0, 1fr) 3.6em 9.4em; align-items: center; gap: 0.8em; padding: 0.55em 0; border-bottom: 1px solid var(--line); }
.wb3-check li b { display: block; font-weight: 500; }
.wb3-check li small { display: block; font-size: 0.8em; color: var(--muted); }
.wb3-q2 { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wb3-check em { justify-self: start; padding: 0.25em 0.55em; font-size: 0.8em; font-style: normal; font-weight: 600; white-space: nowrap; }
.wb3-check .is-ok em { background: color-mix(in srgb, var(--wb3-ok) 14%, transparent); color: color-mix(in srgb, var(--wb3-ok) 70%, var(--text)); }
.wb3-check .is-info em { background: var(--wb3-tile); color: var(--muted); }
.wb3-check .is-warn em { background: color-mix(in srgb, var(--wb3-warn) 16%, transparent); color: color-mix(in srgb, var(--wb3-warn) 70%, var(--text)); }
.wb3-check .is-swap em { background: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--text); }
.wb3-check-f { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin-top: 0.9em; font-size: 0.92em; }
.wb3-check-f > span:first-child { color: var(--muted); }
.wb3-check-f b { font-size: 1.15em; color: var(--text); }
.wb3-po { margin-left: auto; padding: 0.45em 0.7em; border: 1px solid var(--line); font-weight: 600; }
.wb2-js .wb3-panel.is-on .wb3-check li { animation: wb3-in 0.5s var(--ease) both; animation-delay: calc(0.25s + var(--i) * 0.11s); }
@keyframes wb3-in { from { opacity: 0; transform: translateY(0.5em); } }

.wb3-cred { left: 5%; top: 6%; width: 37%; }
.wb3-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; font-size: 2.1em; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb3-big small { font-size: 0.4em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.wb3-meter { position: relative; display: block; height: 0.5em; margin: 0.8em 0 0.6em; background: var(--wb3-tile); }
.wb3-meter::after { content: ""; position: absolute; inset: 0 44% 0 0; background: var(--cta); }
.wb3-cred dl > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.42em 0; border-top: 1px solid var(--line); font-size: 0.9em; }
.wb3-cred dt { color: var(--muted); }
.wb3-cred dd { font-weight: 600; }
.wb3-users { left: 9%; bottom: 5%; width: 58%; }
.wb3-users ul { border-top: 1px solid var(--line); list-style: none; }
.wb3-users li { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) 5em 8.6em; align-items: center; gap: 0.8em; padding: 0.55em 0; border-bottom: 1px solid var(--line); }
.wb3-users li > i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--wb3-tile); font-size: 0.85em; font-style: normal; font-weight: 700; }
.wb3-users li:first-child > i { background: var(--cta); color: var(--cta-ink); }
.wb3-users b { display: block; font-weight: 500; }
.wb3-users small { display: block; font-size: 0.8em; color: var(--muted); }
.wb3-users em { justify-self: start; padding: 0.2em 0.5em; border: 1px solid var(--line); font-size: 0.8em; font-style: normal; font-weight: 600; }
.wb3-lim { font-size: 0.88em; text-align: right; font-variant-numeric: tabular-nums; }
.wb3-appr { right: 4%; top: 12%; width: 37%; }
.wb3-n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 999px; background: var(--wb3-warn); color: #fff; font-size: 1em; letter-spacing: 0; }
.wb3-appr-r { display: flex; align-items: center; gap: 0.8em; padding: 0.65em 0; border-top: 1px solid var(--line); }
.wb3-appr-r > span:first-child { display: grid; flex: 1; min-width: 0; }
.wb3-appr-r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.wb3-appr-r small { font-size: 0.8em; color: var(--muted); }
.wb3-appr-r .wb3-btn { padding: 0.5em 0.8em; }

/* Phones: each one is a size container, so its type follows its own height */
.wb3-panel.is-phones { display: flex; align-items: center; justify-content: center; gap: 7%; }
.wb3-phone { position: relative; flex: none; height: 90%; aspect-ratio: 9 / 18.6; padding: 1.4%; border-radius: 9% / 4.4%; background: #0b111c; box-shadow: 0 0 0 1px color-mix(in srgb, var(--deep-text) 16%, transparent), 0 30px 60px -28px rgba(0, 0, 0, 0.7); container-type: size; }
.wb3-phone + .wb3-phone { transform: translateY(5%); }
.wb3-ph-s { position: relative; display: flex; flex-direction: column; height: 100%; padding: 3.2em 1.1em 1.1em; border-radius: 7.6% / 3.7%; overflow: hidden; background: var(--surface); font-size: calc(100cqh / 44); line-height: 1.3; }
.wb3-ph-s::before { content: ""; position: absolute; top: 0.75em; left: 50%; width: 5.6em; height: 1.55em; translate: -50% 0; border-radius: 1em; background: #0b111c; }
.wb3-ph-bar { position: absolute; top: 0.95em; left: 1.6em; right: 1.5em; display: flex; justify-content: space-between; align-items: center; font-size: 0.92em; }
.wb3-ph-bar b { font-weight: 600; }
.wb3-ph-bar i { position: relative; width: 1.7em; height: 0.8em; border: 1.5px solid currentColor; border-radius: 0.25em; opacity: 0.85; }
.wb3-ph-bar i::after { content: ""; position: absolute; inset: 1.5px 30% 1.5px 1.5px; border-radius: 0.1em; background: currentColor; }
.wb3-ph-app { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.8em; border-bottom: 1px solid var(--line); }
.wb3-ph-app .wb3-logo { font-size: 1em; }
.wb3-ph-app .wb3-cart { font-size: 0.9em; font-weight: 500; }
.wb3-ph-h { display: grid; gap: 0.15em; margin: 1em 0 0.6em; }
.wb3-ph-h b { font-size: 1.5em; font-weight: 600; letter-spacing: -0.03em; }
.wb3-ph-h small { font-size: 0.86em; color: var(--muted); }
.wb3-ph-list { display: grid; list-style: none; }
.wb3-ph-list li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr) 1.15em; align-items: center; gap: 0.7em; padding: 0.5em 0; border-bottom: 1px solid var(--line); }
.wb3-ph-list b { display: block; font-size: 0.92em; font-weight: 500; line-height: 1.25; }
.wb3-ph-list small { font-size: 0.8em; color: var(--muted); }
.wb3-tick { position: relative; width: 1.15em; height: 1.15em; background: var(--cta); }
.wb3-tick::after { content: ""; position: absolute; left: 0.36em; top: 0.14em; width: 0.3em; height: 0.6em; border: solid var(--cta-ink); border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); }
.wb3-ph-ship { display: grid; gap: 0.1em; margin-top: auto; padding: 0.7em 0.8em; background: var(--wb3-tile); font-size: 0.82em; color: var(--muted); }
.wb3-ph-ship b { font-weight: 600; color: var(--text); }
.wb3-ph-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.7em; padding-top: 0.8em; color: var(--muted); font-size: 0.9em; }
.wb3-ph-total b { font-size: 1.35em; color: var(--text); font-variant-numeric: tabular-nums; }
.wb3-phone.is-lock .wb3-ph-s {
  align-items: center;
  background:
    radial-gradient(120% 55% at 15% 105%, color-mix(in srgb, var(--deep-accent) 55%, transparent), transparent 70%),
    radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--deep-text) 14%, transparent), transparent 70%),
    linear-gradient(165deg, var(--deep-alt), var(--deep) 60%);
  color: #fff;
}
.wb3-ph-date { margin-top: 1.4em; font-size: 1em; font-weight: 500; opacity: 0.9; }
.wb3-ph-time { font-size: 4.6em; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.wb3-push { width: 100%; margin-top: auto; margin-bottom: 2.4em; padding: 0.85em 0.95em 0.95em; border-radius: 1.2em; background: rgba(250, 251, 253, 0.8); color: #101826; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.wb3-push-h { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.45em; font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; color: #4b5563; }
.wb3-push-h small { margin-left: auto; font-weight: 500; }
.wb3-push-ico { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.45em; background: #101826; color: #fff; font-size: 0.95em; font-weight: 800; }
.wb3-push > b { display: block; font-size: 0.98em; font-weight: 600; }
.wb3-push > p:not([class]) { margin-top: 0.15em; font-size: 0.9em; line-height: 1.35; color: #374151; }
.wb3-push-a { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; margin-top: 0.8em; }
.wb3-push-a span { padding: 0.55em; border-radius: 0.7em; background: rgba(16, 24, 38, 0.08); font-size: 0.88em; font-weight: 600; text-align: center; }
.wb3-push-a span:first-child { background: #101826; color: #fff; }

/* ============================================================
   LIFE — times on the captions
   ============================================================ */
.wb3-life-row { grid-template-columns: 0.95fr 1.25fr 0.95fr 1.2fr 1.05fr; }
.wb3-life-row figcaption { display: flex; align-items: baseline; gap: 8px; }
.wb3-life-row time { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   INTEGRATIONS — sync monitor drawn in HTML
   ============================================================ */
.wb3-mon { container-type: inline-size; border: 1px solid var(--ink-line); background: var(--surface); color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.wb3-mon-in { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); font-size: clamp(8px, calc(100cqw / 62), 13px); line-height: 1.35; }
.wb3-mon-nav { display: grid; align-content: start; gap: 0.1em; padding: 1em 0; background: var(--deep); color: var(--deep-muted); font-size: 0.92em; }
.wb3-mon-nav span { padding: 0.5em 1.1em; }
.wb3-mon-nav .is-on { box-shadow: inset 3px 0 var(--deep-accent); background: color-mix(in srgb, var(--deep-text) 8%, transparent); color: var(--deep-text); font-weight: 600; }
.wb3-mon-main { display: grid; gap: 1.1em; min-width: 0; padding: 1.2em 1.4em 1.4em; }
.wb3-mon-h { display: flex; align-items: center; gap: 0.7em; }
.wb3-mon-h img { width: 1.8em; height: 1.8em; object-fit: contain; }
.wb3-mon-h b { font-size: 1.25em; font-weight: 600; letter-spacing: -0.02em; }
.wb3-mon-h small { margin-left: auto; font-size: 0.84em; color: var(--muted); }
.wb3-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.6em; background: color-mix(in srgb, var(--wb3-ok) 14%, transparent); color: color-mix(in srgb, var(--wb3-ok) 70%, var(--text)); font-size: 0.8em; font-style: normal; font-weight: 600; }
.wb3-pill i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--wb3-ok); animation: wb2-blink 1.6s ease-in-out infinite; }
.wb3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.wb3-tiles > div { display: grid; gap: 0.2em; padding: 0.75em 0.85em; }
.wb3-tiles > div + div { border-left: 1px solid var(--line); }
.wb3-tiles small { font-size: 0.8em; color: var(--muted); }
.wb3-tiles b { font-size: 1.55em; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.wb3-tiles span { font-size: 0.78em; color: var(--muted); }
.wb3-tiles > div:last-child b,
.wb3-tiles > div:last-child span { color: color-mix(in srgb, var(--wb3-ok) 70%, var(--text)); }
.wb3-chart p { margin-bottom: 0.6em; font-size: 0.8em; color: var(--muted); }
.wb3-bars { display: flex; align-items: flex-end; gap: 0.4em; height: 4.6em; border-bottom: 1px solid var(--line); }
.wb3-bars i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--text) 16%, transparent); transform-origin: 50% 100%; }
.wb3-bars i:last-child { background: var(--cta); }
.wb2-js .wb3-admin.is-in .wb3-bars i { animation: wb3-grow 0.9s var(--ease) both; animation-delay: calc(0.3s + var(--n, 0) * 0.04s); }
@keyframes wb3-grow { from { transform: scaleY(0); } }
.wb3-jobs { border-top: 1px solid var(--line); }
.wb3-jr { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.6fr) minmax(0, 0.9fr); align-items: center; gap: 0.8em; padding: 0.5em 0; border-bottom: 1px solid var(--line); font-size: 0.9em; }
.wb3-jr span { color: var(--muted); font-variant-numeric: tabular-nums; }
.wb3-jr b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb3-jr.is-h { font-size: 0.78em; font-weight: 600; }
.wb3-jr em { justify-self: start; padding: 0.2em 0.55em; font-size: 0.86em; font-style: normal; font-weight: 600; }
.wb3-jr em.is-ok { background: color-mix(in srgb, var(--wb3-ok) 14%, transparent); color: color-mix(in srgb, var(--wb3-ok) 70%, var(--text)); }
.wb3-jr em.is-run { display: inline-flex; align-items: center; gap: 0.4em; background: color-mix(in srgb, var(--accent) 34%, transparent); }
.wb3-jr em.is-run::before { content: ""; width: 0.75em; height: 0.75em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wb3-spin 0.9s linear infinite; }
@keyframes wb3-spin { to { rotate: 360deg; } }

/* ============================================================
   STACK — toned photo with a part-number search on top
   ============================================================ */
.wb3-ss { position: absolute; left: 8%; right: 8%; top: 21%; padding: 0.5em; font-size: clamp(12px, 1.02vw, 14px); line-height: 1.35; }
.wb3-ss-in { display: flex; align-items: center; gap: 0.6em; height: 3em; padding: 0 0.9em; border: 1px solid var(--text); font-size: 1.08em; }
.wb3-ss-in .wb3-g { color: var(--text); }
.wb3-ss-q { font-weight: 500; }
.wb3-ss-in kbd { margin-left: auto; font: inherit; font-size: 0.76em; color: var(--muted); }
.wb3-ss ul { display: grid; padding: 0.4em 0 0.2em; list-style: none; }
.wb3-ss li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: center; gap: 0.85em; padding: 0.5em 0.5em; }
.wb3-ss li:first-child { background: var(--wb3-tile); }
.wb3-ss li b { display: block; font-weight: 500; }
.wb3-ss li small { font-size: 0.82em; color: var(--muted); }
.wb3-ss li em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb3-ss-f { padding: 0.6em 0.5em 0.3em; border-top: 1px solid var(--line); font-size: 0.86em; color: var(--muted); }
.wb3-ss-f b { color: var(--text); }
.wb3-ss.is-wait li,
.wb3-ss.is-wait .wb3-ss-in kbd { opacity: 0; }
.wb3-ss li,
.wb3-ss-in kbd { transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.wb3-ss li:nth-child(2) { transition-delay: 0.08s; }
.wb3-ss li:nth-child(3) { transition-delay: 0.16s; }
.wb3-ss.is-wait li { transform: translateY(6px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .wb3-toast.is-erp { right: 0; }
}

@media (max-width: 1080px) {
  .wb3-stage { height: clamp(460px, 70vw, 620px); max-width: 780px; width: 100%; margin-inline: auto; }
  .wb3-tool-stage { width: 100%; max-width: 860px; margin-inline: auto; }
  .wb3-ss { left: auto; right: 6%; top: 50%; width: min(440px, 64%); translate: 0 -50%; }
}

@media (max-width: 900px) {
  .wb3-life-row figure { width: 62vw; }
}

@media (max-width: 640px) {
  .wb3-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; height: auto; max-height: none; }
  .wb3-hero-photo { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3.3; }
  .wb3-ui { position: relative; inset: auto; }
  .wb3-pcard { width: 76%; margin: -64px 0 0 10px; grid-template-columns: 86px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .wb3-pcard-img { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; }
  .wb3-pcard .wb3-flag { display: none; }
  .wb3-pcard .wb3-stock,
  .wb3-pcard .wb3-buy { grid-column: 1 / -1; }
  .wb3-pcard .wb3-pname { font-size: 14px; }
  .wb3-toast.is-erp { display: none; }
  .wb3-toast.is-order { margin: 0 0 0 auto; width: 90%; }
  .wb3-toast small { white-space: normal; }
  .wb3-inds .wb2-ind::after { background: linear-gradient(to top, color-mix(in srgb, var(--deep) 88%, transparent), transparent 70%); }
  .wb2-tool-stage.wb3-tool-stage { aspect-ratio: 1440 / 1640; }
  .wb3-panel { font-size: calc(100cqw / 31); }
  .wb3-panel > .wb3-card { left: 4% !important; right: 4% !important; width: auto !important; }
  .wb3-pdp { top: 4%; }
  .wb3-pdp-top { grid-template-columns: 8.5em minmax(0, 1fr); }
  .wb3-specs,
  .wb3-docs,
  .wb3-paste,
  .wb3-cred { display: none; }
  .wb3-check { top: 4%; }
  .wb3-check li { grid-template-columns: minmax(0, 1fr) 2.6em 8.4em; }
  .wb3-check-f .wb3-po { display: none; }
  .wb3-users { top: 4%; bottom: auto; }
  .wb3-users li { grid-template-columns: 2.3em minmax(0, 1fr) 6.6em; }
  .wb3-users li em { display: none; }
  .wb3-appr { top: auto; bottom: 4%; }
  .wb3-panel.is-phones { gap: 5%; }
  .wb3-phone { height: 82%; }
  .wb3-life-row figure { width: 76vw; }
  .wb3-mon-in { grid-template-columns: minmax(0, 1fr); font-size: clamp(9px, calc(100cqw / 38), 12px); }
  .wb3-mon-nav { display: none; }
  .wb3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb3-tiles > div:nth-child(3) { border-left: 0; }
  .wb3-tiles > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .wb3-jr { grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 0.9fr); }
  .wb3-jr > :nth-child(2),
  .wb3-jr > :nth-child(4) { display: none; }
  .wb2-stack-img.wb3-stack-img { aspect-ratio: 4 / 4.2; }
  .wb3-ss { left: 5%; right: 5%; top: auto; bottom: 5%; width: auto; translate: none; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wb2-js .wb3-ui.is-in,
  .wb2-js .wb3-hero-photo.is-in img,
  .wb2-js .wb3-panel.is-on .wb3-check li,
  .wb2-js .wb3-admin.is-in .wb3-bars i,
  .wb3-caret,
  .wb3-pill i,
  .wb3-erp-track,
  .wb3-jr em.is-run::before { animation: none; }
  .wb3-drop,
  .wb3-rg,
  .wb3-tr > span,
  .wb3-ss li { transition: none; }
}