/* Bonded demo screens: synthetic, animated renders of the WooCommerce to ShipCompliant connector (Claude for Shaun
 * Wilson Designs, 10-31-2026). Every store, product, order, address and number is made up. Four looks share one markup;
 * a look is only a set of tokens on [data-look]. */

.bx { --r: 10px; --gap: 14px; font-family: var(--body); color: var(--ink); background: var(--bg); position: relative;
  -webkit-font-smoothing: antialiased; line-height: 1.45; font-size: 14px; overflow: hidden; }
.bx *, .bx *::before, .bx *::after { box-sizing: border-box; }
.bx button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ looks */
.bx[data-look="oak"] { --bg: #16100b; --bg2: radial-gradient(1200px 500px at 20% -10%, #2a1d12 0%, #16100b 60%);
  --panel: linear-gradient(180deg, #241a11 0%, #1b140d 100%); --panel-solid: #1f170f; --field: #120d09;
  --line: rgba(201, 138, 75, .32); --line2: rgba(201, 138, 75, .16); --ink: #f2e7d3; --muted: #bfac90; --faint: #a08b70;
  --accent: #cf8d4c; --accent2: #e6be72; --accent-ink: #1a120b; --ok: #92d08b; --warn: #e8a64c; --bad: #e46b5c;
  --glow: 0 0 0 1px rgba(207, 141, 76, .18), 0 10px 30px rgba(0, 0, 0, .35);
  --display: "Syncopate", "Inter", sans-serif; --display-w: 700; --display-ls: .22em; --display-tt: uppercase;
  --body: "Inter", system-ui, sans-serif; --title-size: 25px; --tile-on: #cf8d4c; --r: 4px; }
.bx[data-look="cellar"] { --bg: #f6efe5; --bg2: linear-gradient(180deg, #f8f2ea 0%, #f1e7da 100%);
  --panel: #fffaf3; --panel-solid: #fffaf3; --field: #fff;
  --line: #e2d1bd; --line2: #eee2d3; --ink: #2a1418; --muted: #6d5552; --faint: #806a64;
  --accent: #7a1d39; --accent2: #85631f; --accent-ink: #fff; --ok: #2f6a35; --warn: #8a5718; --bad: #a12b27;
  --glow: 0 1px 0 #fff inset, 0 8px 24px rgba(94, 50, 40, .08);
  --display: "Cormorant Garamond", Georgia, serif; --display-w: 700; --display-ls: .01em; --display-tt: none;
  --body: "Source Sans 3", system-ui, sans-serif; --title-size: 36px; --tile-on: #7a1d39; --r: 12px; }
.bx[data-look="taproom"] { --bg: #101317; --bg2: radial-gradient(900px 420px at 85% -20%, #1d2a23 0%, #101317 55%);
  --panel: #171c21; --panel-solid: #171c21; --field: #0d1013;
  --line: #2a323a; --line2: #20272e; --ink: #f1f2ec; --muted: #a4adb5; --faint: #8b959e;
  --accent: #f5b331; --accent2: #7fc46d; --accent-ink: #15130c; --ok: #7fc46d; --warn: #f5b331; --bad: #ff6b5b;
  --glow: 0 0 0 1px rgba(245, 179, 49, .08), 0 12px 30px rgba(0, 0, 0, .4);
  --display: "Archivo", "Inter", sans-serif; --display-w: 800; --display-ls: -.01em; --display-tt: uppercase;
  --body: "Archivo", system-ui, sans-serif; --title-size: 30px; --tile-on: #f5b331; --r: 14px; }
.bx[data-look="classic"] { --bg: #f0f0f1; --bg2: #f0f0f1;
  --panel: #fff; --panel-solid: #fff; --field: #fff;
  --line: #dcdcde; --line2: #e8e8ea; --ink: #1d2327; --muted: #50575e; --faint: #6b7076;
  --accent: #2271b1; --accent2: #135e96; --accent-ink: #fff; --ok: #007017; --warn: #8a5d00; --bad: #b32d2e;
  --glow: 0 1px 1px rgba(0, 0, 0, .04);
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display-w: 600; --display-ls: 0; --display-tt: none;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --title-size: 23px; --tile-on: #2271b1; --r: 4px; }

.bx { background: var(--bg2); }
.bx-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--glow); position: relative; }
.bx[data-look="oak"] .bx-panel::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--line2); border-radius: 2px; pointer-events: none; }
.bx-h { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); text-transform: var(--display-tt); }
.bx-eyebrow { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.bx[data-look="cellar"] .bx-eyebrow { letter-spacing: .18em; color: var(--accent2); }
.bx[data-look="classic"] .bx-eyebrow { letter-spacing: .06em; color: var(--muted); }
.bx-sec { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.bx-sec .bx-eyebrow { white-space: nowrap; }
.bx-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bx[data-look="oak"] .bx-sec::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--accent); flex: none; }
.bx-muted { color: var(--muted); }
.bx-ok { color: var(--ok); } .bx-warn { color: var(--warn); } .bx-bad { color: var(--bad); }
.bx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.bx-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.bx-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.bx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.bx-chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.bx-chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.bx-chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.bx-chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.bx-foot { padding: 0 22px 14px; margin-top: -6px; text-align: right; font-size: 10.5px; letter-spacing: .08em; color: var(--faint); }
.bx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: calc(var(--r) * .7 + 2px);
  border: 1px solid var(--line); background: transparent; font-size: 12px; font-weight: 600; cursor: default; white-space: nowrap; }
.bx-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bx-btn.pressed { filter: brightness(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.bx-btn[disabled] { opacity: .45; }
.bx-flash { animation: bxFlash 1.1s ease-out; }
@keyframes bxFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent), var(--glow); } 100% { box-shadow: 0 0 0 14px transparent, var(--glow); } }
.bx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: bxSpin .8s linear infinite; display: inline-block; flex: none; }
@keyframes bxSpin { to { transform: rotate(360deg); } }

/* fake pointer used in the walk-throughs */
.bx-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; transition: transform .7s cubic-bezier(.45, .05, .2, 1), opacity .3s; opacity: 0; }
.bx-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.bx-cursor.on { opacity: 1; }
.bx-cursor.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); animation: bxRing .5s ease-out forwards; }
@keyframes bxRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ------------------------------------------------------------------ dashboard */
.bx-dash { padding: 22px; display: grid; gap: var(--gap); }
.bx-deck { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gap); align-items: stretch; }
.bx-brand { padding: 4px 6px; display: grid; align-content: start; gap: 10px; }
.bx-brand .bx-eyebrow b { color: var(--ink); font-weight: 600; }
.bx-row { display: flex; align-items: center; gap: 16px; }
.bx-seal { width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  border: 2px solid var(--accent); box-shadow: inset 0 0 0 5px var(--panel-solid), inset 0 0 0 6px var(--line), 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.bx-seal span { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--ok); padding-left: .3em; }
.bx-seal::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); animation: bxBreath 3s ease-in-out infinite; }
@keyframes bxBreath { 50% { transform: scale(1.07); opacity: .25; } }
.bx[data-look="classic"] .bx-seal { width: 58px; height: 58px; box-shadow: none; border-width: 3px; border-color: var(--ok); }
.bx[data-look="classic"] .bx-seal span { font-size: 10px; letter-spacing: .12em; padding: 0; }
.bx-title { font-size: var(--title-size); line-height: 1.05; margin: 0; }
.bx .bx-h { display: block; }
.bx-lede { margin: 0; color: var(--ink); opacity: .92; max-width: 46ch; }
.bx-asof { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.bx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: bxBlink 1.6s ease-in-out infinite; }
@keyframes bxBlink { 50% { opacity: .25; } }
.bx-env { display: inline-block; padding: 5px 12px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; border-radius: 2px; justify-self: start; }
.bx[data-look="classic"] .bx-env, .bx[data-look="taproom"] .bx-env { border-radius: 999px; letter-spacing: .12em; }

.bx-flow { padding: 18px; display: grid; gap: 14px; align-content: start; }
.bx-nodes { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; }
.bx-node { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 8px 10px; text-align: center; background: color-mix(in srgb, var(--panel-solid) 70%, var(--bg)); position: relative; transition: box-shadow .3s, border-color .3s; }
.bx-node b { display: block; font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); text-transform: var(--display-tt); font-size: 11px; margin: 6px 0 3px; }
.bx[data-look="cellar"] .bx-node b { font-size: 17px; }
.bx[data-look="taproom"] .bx-node b, .bx[data-look="classic"] .bx-node b { font-size: 13px; }
.bx-node small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.bx-node.hit { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bx-wire { height: 2px; background: var(--line); position: relative; }
.bx-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); opacity: 0; }
.bx-wire i.go { animation: bxPacket .5s linear forwards; }
.bx-wire i.back { animation: bxPacketBack .5s linear forwards; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
@keyframes bxPacket { 0% { left: -4px; opacity: 1; } 100% { left: calc(100% - 4px); opacity: 1; } }
@keyframes bxPacketBack { 0% { left: calc(100% - 4px); opacity: 1; } 100% { left: -4px; opacity: 1; } }
.bx-verdict { border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--ok); padding: 10px 12px; border-radius: calc(var(--r) * .6); font-weight: 600; font-size: 13px; }
.bx-proof { font-size: 12px; color: var(--muted); }

.bx-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.bx-tile { padding: 14px 14px 12px; overflow: hidden; }
.bx-tile::before { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 2px; background: var(--line); }
.bx-tile.ok::before { background: linear-gradient(90deg, var(--ok), transparent); }
.bx-tile.warn::before { background: linear-gradient(90deg, var(--warn), transparent); }
.bx-tile.accent::before { background: linear-gradient(90deg, var(--accent), transparent); }
.bx-num { font-family: var(--display); font-weight: var(--display-w); font-size: 24px; letter-spacing: .02em; line-height: 1.1; margin-top: 4px; }
.bx[data-look="cellar"] .bx-num { font-size: 34px; }
.bx[data-look="taproom"] .bx-num { font-size: 28px; }
.bx-tile b { display: block; font-size: 13px; margin-top: 4px; }
.bx-tile small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

.bx-journey { padding: 16px 18px 14px; }
.bx-steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.bx-steps::before { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; height: 2px; background: var(--line); }
.bx-step { position: relative; padding-right: 10px; }
.bx-step i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-solid); border: 2px solid var(--line); position: relative; z-index: 1; font-style: normal; font-size: 15px; color: transparent; transition: all .35s; }
.bx-step.done i { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.bx[data-look="oak"] .bx-step.done i, .bx[data-look="taproom"] .bx-step.done i { color: #10180f; }
.bx-step.now i { border-color: var(--accent); }
.bx-step.now i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); animation: bxBreath 1.2s ease-in-out infinite; }
.bx-step b { display: block; font-size: 13px; margin-top: 8px; }
.bx-step small { display: block; color: var(--muted); font-size: 11.5px; min-height: 16px; }

.bx-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gap); }
.bx-health, .bx-map, .bx-activity, .bx-needs { padding: 16px 18px; }
.bx-pulse { border: 1px solid var(--line2); border-radius: calc(var(--r) * .6); padding: 10px 12px 8px; margin-bottom: 12px; }
.bx-pulse header { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; gap: 8px; }
.bx-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 46px; }
.bx-bars i { display: block; background: linear-gradient(180deg, var(--accent2), var(--accent)); border-radius: 2px 2px 0 0; min-height: 2px; transition: height .5s; }
.bx[data-look="classic"] .bx-bars i, .bx[data-look="cellar"] .bx-bars i { background: var(--accent); }
.bx-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bx-check { display: grid; grid-template-columns: 14px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line2); align-items: start; }
.bx-check .bx-dot { margin-top: 5px; }
.bx-check b { font-size: 13px; display: block; }
.bx-check small { color: var(--muted); font-size: 11.5px; display: block; line-height: 1.35; }

.bx-us { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, auto); gap: 4px; }
.bx-us span { aspect-ratio: 1.25; display: grid; place-items: center; font-size: 9.5px; letter-spacing: .08em; color: var(--faint); border: 1px solid var(--line2); border-radius: 3px; transition: background .6s, color .6s, border-color .6s, box-shadow .6s; }
.bx-us span.home { border: 1px solid var(--ink); color: var(--ink); }
.bx-us span.l1 { background: color-mix(in srgb, var(--tile-on) 30%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--tile-on) 50%, transparent); }
.bx-us span.l2 { background: color-mix(in srgb, var(--tile-on) 55%, transparent); color: var(--ink); border-color: var(--tile-on); }
.bx-us span.l3 { background: var(--tile-on); color: var(--accent-ink); border-color: var(--tile-on); }
.bx-us span.ping { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tile-on) 45%, transparent), 0 0 18px var(--tile-on); }
.bx-us span.no { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--bad) 18%, transparent) 4px 6px); }
.bx-maplegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.bx-maplegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--tile-on); margin-right: 5px; vertical-align: -1px; }
.bx-maplegend i.no { background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--bad) 40%, transparent) 3px 5px); border: 1px solid var(--line); }

.bx-needs p { margin: 0; color: var(--ok); font-weight: 600; font-size: 13px; }
.bx-needrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: calc(var(--r) * .6); }
.bx-needrow small { display: block; color: var(--muted); font-size: 11.5px; }
.bx-needrow .acts { display: flex; gap: 6px; }

.bx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bx-table th { text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bx-table td { padding: 7px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.bx-table td.wrap { white-space: normal; }
.bx-table tr.new { animation: bxRowIn .6s ease-out; }
@keyframes bxRowIn { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
.bx-mono { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ checkout */
.bx-co { padding: 22px; display: grid; gap: 14px; }
.bx-cohead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bx-cohead .bx-h { font-size: calc(var(--title-size) * .8); margin: 0; }
.bx-scene { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.bx-scene b { color: var(--ink); }
.bx-cogrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); }
.bx-form { padding: 16px 18px; display: grid; gap: 11px; align-content: start; }
.bx-f { display: grid; gap: 4px; }
.bx-f label { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.bx-in { border: 1px solid var(--line); background: var(--field); border-radius: calc(var(--r) * .6); padding: 8px 10px; min-height: 36px; font-size: 13.5px; display: flex; align-items: center; gap: 4px; transition: border-color .25s, box-shadow .25s; }
.bx-in.focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bx-in.focus .bx-caret { display: inline-block; }
.bx-in.badf { border-color: var(--bad); }
.bx-caret { display: none; width: 1px; height: 16px; background: var(--ink); animation: bxBlink 1s steps(1) infinite; }
.bx-f2 { display: grid; grid-template-columns: 1.4fr .6fr .8fr; gap: 10px; }
.bx-radio { display: grid; gap: 6px; }
.bx-radio div { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); padding: 8px 10px; font-size: 13px; transition: border-color .25s, background .25s; }
.bx-radio div::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.bx-radio div.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bx-radio div.on::before { border: 4px solid var(--accent); }
.bx-radio span { margin-left: auto; color: var(--muted); }
.bx-msg { font-size: 12.5px; padding: 9px 11px; border-radius: calc(var(--r) * .6); display: none; }
.bx-msg.show { display: block; animation: bxRowIn .6s ease-out; }
.bx-msg.bad { color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.bx-msg.ok { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bx-msg.info { color: var(--muted); border: 1px dashed var(--line); }
.bx-place { width: 100%; padding: 11px; font-size: 14px; }

.bx-sum { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.bx-status { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: calc(var(--r) * .6); border: 1px solid var(--line); font-size: 12.5px; min-height: 42px; transition: all .3s; }
.bx-status.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bx-status.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.bx-status.store { color: var(--muted); border-style: dashed; }
.bx-lines { display: grid; gap: 0; }
.bx-line { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); animation: bxRowIn .6s ease-out; }
.bx-line .ico { width: 38px; height: 38px; border-radius: calc(var(--r) * .6); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.bx-line .ico svg { width: 20px; height: 20px; }
.bx-line b { font-size: 13px; display: block; font-weight: 600; }
.bx-line small { display: block; font-size: 11px; color: var(--muted); }
.bx-line .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; font-weight: 700; }
.bx-line .tag.sc { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.bx-line .tag.st { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.bx-tot { display: grid; gap: 5px; font-size: 13px; }
.bx-tot div { display: flex; justify-content: space-between; gap: 12px; }
.bx-tot div.hl { color: var(--accent); font-weight: 600; }
.bx-tot div.grand { font-size: 16px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 3px; }
.bx-tot .val { font-variant-numeric: tabular-nums; }
.bx-tot .val.chg { animation: bxChg 1.4s ease-out; }
@keyframes bxChg { from { color: var(--accent2); text-shadow: 0 0 12px color-mix(in srgb, var(--accent2) 60%, transparent); } }
.bx-pager { display: flex; gap: 6px; }
.bx-pager span { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.bx-pager span.on { background: var(--accent); }

/* ------------------------------------------------------------------ cart sorter */
.bx-sort { padding: 22px; display: grid; gap: 14px; }
.bx-sortgrid { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; align-items: stretch; min-height: 380px; position: relative; }
.bx-col { padding: 14px; display: grid; gap: 8px; align-content: start; }
.bx-col .bx-h4, .bx-bin .bx-h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.bx-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); background: var(--panel-solid); font-size: 12.5px; transition: transform .8s cubic-bezier(.5, .05, .2, 1), opacity .4s; position: relative; z-index: 2; }
.bx-item svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.bx-item small { margin-left: auto; color: var(--muted); }
.bx-item.ghost { opacity: .25; }
.bx-router { display: grid; place-items: center; position: relative; }
.bx-router .core { width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--panel-solid); position: relative; z-index: 1; }
.bx-router .core::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--line); animation: bxSpin 14s linear infinite; }
.bx-router .core.busy { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.bx-bins { display: grid; gap: var(--gap); }
.bx-bin { padding: 14px; display: grid; gap: 8px; align-content: start; min-height: 170px; }
.bx-bin.sc { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bx-bin p { margin: 0; font-size: 11.5px; color: var(--muted); }
.bx-bin .slot { display: grid; gap: 6px; }
.bx-bin .slot .bx-item { animation: bxRowIn .6s ease-out; }
.bx-bin .sumline { display: flex; justify-content: space-between; font-size: 12px; border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 2px; }

/* ------------------------------------------------------------------ order screen */
.bx-order { padding: 22px; display: grid; gap: 14px; }
.bx-ogrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap); }
.bx-ohead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bx-ohead .bx-h { font-size: calc(var(--title-size) * .78); margin: 0; }
.bx-omain, .bx-opanel, .bx-onotes { padding: 16px 18px; }
.bx-ometa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; font-size: 12.5px; }
.bx-ometa label { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.bx-select { border: 1px solid var(--line); border-radius: calc(var(--r) * .6); padding: 6px 9px; background: var(--field); display: flex; justify-content: space-between; align-items: center; gap: 6px; transition: border-color .3s, box-shadow .3s; }
.bx-select.focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bx-select::after { content: "\25BE"; color: var(--muted); font-size: 11px; }
.bx-opanel { display: grid; gap: 10px; align-content: start; }
.bx-ostate { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: calc(var(--r) * .6); border: 1px solid var(--line); font-weight: 600; transition: all .35s; }
.bx-ostate.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bx-ostate.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.bx-ostate.muted { color: var(--muted); }
.bx-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.bx-kv dt { color: var(--muted); }
.bx-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.bx-oacts { display: flex; gap: 6px; flex-wrap: wrap; }
.bx-notes { display: grid; gap: 8px; max-height: 236px; min-height: 236px; overflow: hidden; align-content: start; }
.bx-note { padding: 9px 11px; border-radius: calc(var(--r) * .6); background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); font-size: 12px; animation: bxRowIn .7s ease-out; }
.bx-note.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.bx-note.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bx-note small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.bx-clockbig { font-family: var(--display); font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.bx-ff { color: var(--accent2); font-weight: 700; }

/* ------------------------------------------------------------------ control room (multi-store) */
.bx-fleet { padding: 22px; display: grid; gap: 14px; }
.bx-fleet .bx-tiles { grid-template-columns: repeat(4, 1fr); }
.bx-fleet td .bar { height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; width: 110px; }
.bx-fleet td .bar i { display: block; height: 100%; background: var(--accent); transition: width .8s; }
.bx-hb { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.bx-hb.beat { animation: bxBeat .8s ease-out; }
@keyframes bxBeat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }

/* ------------------------------------------------------------------ frame used on the page */
.bx-frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3); background: #0e0e10; }
.bx-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #1b1b1f; border-bottom: 1px solid #000; font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #9a9aa2; }
.bx-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a40; display: inline-block; }
.bx-chrome i:nth-child(1) { background: #ff5f57; } .bx-chrome i:nth-child(2) { background: #febc2e; } .bx-chrome i:nth-child(3) { background: #28c840; }
.bx-chrome span { margin-left: 12px; background: #111114; border-radius: 6px; padding: 6px 12px; flex: 1; max-width: 520px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .bx *, .bx *::before, .bx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* grids never grow past their container */
.bx-dash, .bx-co, .bx-sort, .bx-order, .bx-fleet { grid-template-columns: minmax(0, 1fr); }
.bx-deck > *, .bx-split > *, .bx-cogrid > *, .bx-ogrid > *, .bx-tiles > *, .bx-nodes > *, .bx-sortgrid > * { min-width: 0; }
.bx-node b { overflow-wrap: anywhere; }
.bx-accent { color: var(--accent); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 900px) {
  .bx-deck, .bx-split, .bx-cogrid, .bx-ogrid { grid-template-columns: 1fr; }
  .bx-tiles { grid-template-columns: repeat(3, 1fr); }
  .bx-fleet .bx-tiles { grid-template-columns: repeat(2, 1fr); }
  .bx-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bx-step b { font-size: 11.5px; } .bx-step small { display: none; }
  .bx-sortgrid { grid-template-columns: 1fr; min-height: 0; }
  .bx-router { padding: 8px 0; }
}
@media (max-width: 560px) {
  .bx-dash, .bx-co, .bx-sort, .bx-order, .bx-fleet { padding: 14px; }
  .bx { --gap: 10px; }
  .bx-tiles { grid-template-columns: repeat(2, 1fr); }
  .bx-checks { grid-template-columns: 1fr; }
  .bx-f2 { grid-template-columns: 1fr 1fr; } .bx-f2 > :first-child { grid-column: 1 / -1; }
  .bx-ometa { grid-template-columns: 1fr 1fr; }
  .bx-nodes { grid-template-columns: 1fr; }
  .bx-wire { width: 2px; height: 16px; justify-self: center; }
  .bx-wire i { display: none; }
  .bx-node { padding: 9px 10px; display: grid; grid-template-columns: 12px auto 1fr; gap: 10px; align-items: center; text-align: left; }
  .bx-node b { margin: 0; }
  .bx-node small { text-align: right; }
  .bx[data-look] .bx-title { font-size: 19px; letter-spacing: .06em; }
  .bx[data-look="oak"] .bx-title { font-size: 15px; letter-spacing: .1em; }
  .bx[data-look="cellar"] .bx-title { font-size: 28px; letter-spacing: 0; }
  .bx-seal { width: 60px; height: 60px; }
  .bx-brand .bx-eyebrow { letter-spacing: .16em; }
  .bx-asof { letter-spacing: .08em; }
  .bx[data-look="oak"] .bx-cohead .bx-h, .bx[data-look="oak"] .bx-ohead .bx-h { letter-spacing: .12em; }
  .bx-table td, .bx-table th { padding: 6px 5px; }
  .bx-table .hide-sm { display: none; }
  .bx-us span { font-size: 7.5px; }
  .bx-title { font-size: calc(var(--title-size) * .8); }
}

/* contrast pass, 10-31-2026: every look passes WCAG AA text contrast (checked with axe in all four looks) */
.bx-foot { color: var(--muted); }
.bx-line .tag.sc { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }
.bx-item.ghost { opacity: 1; border-style: dashed; background: transparent; color: var(--faint); }
.bx-item.ghost svg, .bx-item.ghost small { opacity: .55; }
.bx-item.ghost small { opacity: 1; color: var(--faint); }
.bx[data-look="taproom"] .bx-us span.l2 { background: color-mix(in srgb, var(--tile-on) 74%, transparent); color: var(--accent-ink); }

/* Inside a WordPress theme (10-31-2026): themes colour b, strong and headings directly, which beats inheritance */
.bx b, .bx strong, .bx h1, .bx h2, .bx h3, .bx h4, .bx th, .bx td { color: inherit; }