/* WOMARK A87 interface behaviour layer (loads after ui-a86.css).
   White, black and grey only. Pairs with static/ui-a87.js. */
  /* Numbers line up in every table, total and KPI. */
  table, .checkout-summary, .total-row, .kpi, .stat, .money, .mono, [class*="kpi"] b, [class*="total"] b {
    font-variant-numeric: tabular-nums;
  }

  /* Busy buttons: the label stays, a small ring shows the save is running. */
  button[aria-busy="true"], .btn[aria-busy="true"] {
    position: relative;
    cursor: progress !important;
    opacity: .78;
    pointer-events: none;
  }
  button.wm-busy::after, .btn.wm-busy::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-start: 8px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: wm-spin .7s linear infinite;
  }
  @keyframes wm-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { button.wm-busy::after, .btn.wm-busy::after { animation-duration: 2.4s; } }

  /* Long tables keep their header in view (desktop; phones show cards). */
  @media (min-width: 761px) {
    .table-wrap.wm-tall {
      max-height: min(72vh, 900px);
      overflow: auto;
      overscroll-behavior: contain;
    }
    .table-wrap.wm-tall > table > thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--m-subtle, #fafafa);
      box-shadow: inset 0 -1px 0 var(--m-line, #e6e6e6);
    }
  }

  /* Sortable headers. */
  th.wm-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  th.wm-sortable:hover { color: var(--m-ink, #0a0a0a); }
  th.wm-sortable:focus-visible { outline: 2px solid var(--m-ink, #0a0a0a); outline-offset: -2px; }
  th.wm-sortable::after {
    content: "↕";
    margin-inline-start: 6px;
    font-size: .85em;
    color: var(--m-line-3, #bdbdbd);
  }
  th.wm-sortable[aria-sort="ascending"]::after { content: "↑"; color: var(--m-ink, #0a0a0a); }
  th.wm-sortable[aria-sort="descending"]::after { content: "↓"; color: var(--m-ink, #0a0a0a); }

  /* Row hover for scanning wide tables. */
  #view .table-wrap > table > tbody > tr:not(.wm-empty-row):hover > td { background: var(--m-hover, #f4f4f4); }

  /* Empty tables say so. */
  tr.wm-empty-row > td {
    padding: 28px 16px !important;
    text-align: center !important;
    color: var(--m-muted, #636363) !important;
    font-size: 13px;
    background: var(--m-subtle, #fafafa) !important;
  }

  /* Field messages: black border and a short line under the field. */
  .wm-invalid, input.wm-invalid, select.wm-invalid, textarea.wm-invalid {
    border-color: var(--m-ink, #0a0a0a) !important;
    box-shadow: 0 0 0 1px var(--m-ink, #0a0a0a) !important;
  }
  .wm-field-msg {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--m-ink, #0a0a0a);
  }
  .wm-field-msg::before { content: "! "; font-weight: 800; }

  /* Keyboard focus is always visible. */
  :where(button, .btn, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--m-ink, #0a0a0a);
    outline-offset: 2px;
  }

  /* Login button while signing in. */
  .login-card button[aria-busy="true"] { opacity: .7; }

  /* A89: Bosta Product Catalog counters and rebuild stepper. */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
  .kpi-grid .kpi { border: 1px solid var(--m-line, #e6e6e6); border-radius: 10px; padding: 10px 12px; background: var(--m-subtle, #fafafa); }
  .kpi-grid .kpi span { display: block; font-size: 11px; color: var(--m-muted, #636363); }
  .kpi-grid .kpi b { font-size: 18px; }
  [data-bosta-rebuild-steps] li[aria-current="step"] { font-weight: 700; color: var(--m-ink, #0a0a0a); }