.stk-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 10px 10px;
    }

    .stk-grid-wh-order {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 10px 10px;
    }

    @media (min-width: 992px) {

      .stk-grid,
      .stk-grid-wh-order {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (min-width: 1200px) {

      .stk-grid,
      .stk-grid-wh-order {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    .stk-cat-section,
    .br-inv-cat-section,
    .pa-cat-section {
      margin-bottom: 0;
    }

    /* Universal sticky category bar — all card lists + Visual Link */
    .stk-cat-header,
    .vl-cat-header {
      font-size: 9px;
      font-weight: 900;
      color: var(--primary);
      background: var(--bg-main);
      padding: 8px 10px;
      margin: 0;
      border-radius: 0;
      border-bottom: 1px solid var(--border);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      width: 100%;
      box-sizing: border-box;
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    /* Table lists (dispatch / market / shopping / global stock): same sticky full-bleed bar */
    tr.category-row td {
      position: sticky !important;
      top: -1px !important;
      z-index: 3;
      background: var(--bg-main) !important;
      color: var(--primary) !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 8px 10px !important;
      border-radius: 0 !important;
      border-top: none !important;
      border-bottom: 1px solid var(--border) !important;
      border-left: none !important;
      border-right: none !important;
      white-space: normal !important;
      /* Cover sub-pixel / stroke gap above sticky bar */
      box-shadow: 0 -2px 0 0 var(--bg-main) !important;
    }

    /* Global stock has a sticky table header — park category bars just under it */
    #global-stock-area tr.category-row td {
      top: 31px !important;
      z-index: 15;
      box-shadow: 0 -2px 0 0 var(--bg-surface-light) !important;
    }

    #shopping-list-area tr.category-row td,
    #market-list-area tr.category-row td {
      top: -1px !important;
      box-shadow: 0 -2px 0 0 var(--bg-main) !important;
    }

    #warehouse-list-area tr.category-row td {
      position: sticky !important;
      top: 32px !important;
      z-index: 1 !important;
      box-shadow: 0 -2px 0 0 var(--bg-main) !important;
    }

    #stocktake-area .stk-grid,
    #item-visibility-list-area .stk-grid {
      padding: 8px 10px 12px;
    }

    #br-inv-area .br-inv-grid {
      padding: 8px 10px 12px;
    }

    #inv-list-area .dash-grid,
    #pa-list-area .dash-grid {
      margin: 8px 10px 12px !important;
    }

    #br-inv-area,
    #item-visibility-list-area,
    #inv-list-area,
    #pa-list-area,
    #stocktake-area,
    #market-list-area,
    #shopping-list-area,
    #warehouse-list-area,
    #global-stock-area {
      min-height: 0;
    }

    #warehouse-list-area {
      display: flex;
      flex-direction: column;
    }

    #warehouse-list-area .table-responsive {
      max-height: none !important;
      flex: 1;
    }

    #warehouse-list-area .std-table thead {
      position: sticky;
      top: 0;
      z-index: 2;
    }

    #shopping-list-area {
      padding: 6 !important;
    }

    #shopping-list-area .table-responsive {
      border-radius: 0 !important;
      border: none !important;
    }

    /* =========================================================================
       SHOPPING LIST — soft Stitch
       ========================================================================= */
    .sl {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      padding: 8px 12px;
      box-sizing: border-box;
      background: var(--bg-main, #F1F5F9);
    }

    .sl-card {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface, #fff);
    }

    .sl-tools {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .sl-search {
      position: relative;
      flex: 1 1 160px;
      min-width: 0;
      display: flex;
      align-items: stretch;
      align-self: stretch;
    }

    .sl-search > i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 0.8rem;
      pointer-events: none;
      z-index: 1;
      width: 1em;
      text-align: center;
      line-height: 1;
    }

    #sl-search,
    .sl-search input {
      width: 100%;
      height: 36px;
      min-height: 36px;
      padding: 0 12px 0 40px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      background: var(--bg-surface);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      color: var(--text-main);
      outline: none;
      box-sizing: border-box;
    }

    .sl-search input:focus { border-color: var(--border); }

    .sl-btn {
      height: 36px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      color: var(--text-muted);
      font-family: var(--font-sans);
      font-size: 0.6875rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      text-transform: none;
      letter-spacing: 0.01em;
      box-shadow: none;
    }

    .sl-btn--primary {
      border-color: var(--primary);
      background: var(--primary);
      color: var(--primary-contrast);
      border-style: solid;
    }

    .sl-btn--icon {
      width: 36px;
      padding: 0;
      justify-content: center;
      color: var(--primary);
    }

    #sl-clear-checks-btn {
      color: var(--primary);
      width: 36px;
      padding: 0;
      justify-content: center;
    }

    .sl-clear-label {
      display: none;
    }

    .sl-btn.is-on,
    #sl-hide-done-btn.is-on {
      background: rgba(10, 68, 74, 0.08);
      border-color: rgba(10, 68, 74, 0.28);
      color: var(--primary);
    }

    .sl-total {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 36px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface);
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .sl-total strong {
      color: var(--primary);
      font-size: 0.8125rem;
      font-weight: 700;
    }

    .sl-body {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      padding: 8px 10px;
      background: var(--bg-surface, #fff);
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    .sl-body::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

    .sl-empty {
      display: none;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      color: var(--text-muted);
      padding: 32px 16px;
    }

    .sl-empty i { font-size: 2.5rem; opacity: 0.2; }
    .sl-empty strong { font-size: 0.875rem; color: var(--text-main); }
    .sl-empty div { font-size: 0.75rem; max-width: 280px; }

    .sl-stack {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin: 6px;
    }

    .sl-cat {
      margin-top: 2px;
      padding: 4px 8px;
      background: var(--bg-main);
      color: var(--text-muted, #64748B);
      border-radius: 6px;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid var(--border, #E2E8F0);
    }

    .sl-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 31px 31px;
      gap: 4px;
      align-items: center;
      padding: 5px 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      box-sizing: border-box;
    }

    .sl-row.is-done {
      opacity: 0.48;
      background: var(--bg-surface-light);
    }

    .sl-row.is-flash {
      opacity: 1 !important;
      border-color: var(--primary, #0A444A) !important;
      background: var(--primary-soft, #E6F4F1) !important;
      box-shadow: 0 0 0 2px rgba(10, 68, 74, 0.28);
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .sl-row__name {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-main, #1E293B);
      line-height: 1.15;
      word-break: break-word;
      min-width: 0;
    }

    .sl-row__qty {
      font-weight: 800;
      font-size: 0.875rem;
      font-variant-numeric: tabular-nums;
      color: var(--text-main, #1E293B);
      margin-right: 3px;
    }

    .sl-row__ou {
      font-weight: 400;
      font-size: 0.6875rem;
      color: var(--text-muted, #94A3B8);
      margin-right: 3px;
    }

    .sl-row__dash {
      font-weight: 400;
      color: var(--text-muted, #CBD5E1);
      margin-right: 3px;
    }

    .sl-row__title {
      font-weight: 600;
    }

    .sl-row__tags {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
    }

    .sl-pill {
      display: inline-flex;
      align-items: center;
      height: 16px;
      padding: 0 5px;
      border-radius: 4px;
      font-size: 0.5625rem;
      font-weight: 700;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
      color: var(--text-muted, #64748B);
      white-space: nowrap;
    }

    .sl-pill--price {
      background: var(--warning-soft);
      border-color: var(--warning-soft);
      color: var(--warning-strong);
      text-decoration: none;
    }

    .sl-pill--stock {
      background: var(--primary-soft, #E6F4F1);
      border-color: var(--primary-soft-border, rgba(10, 68, 74, 0.18));
      color: var(--primary, #0A444A);
    }

    .sl-pill--stock-short {
      background: var(--danger-soft, #fdeded);
      border-color: var(--danger-soft, #fdeded);
      color: var(--danger-strong, #b91c1c);
    }

    .sl-pill--branch {
      background: var(--bg-main);
      border-color: var(--border);
      color: var(--text-main);
      cursor: pointer;
      font-family: inherit;
    }

    button.sl-pill--branch:hover,
    button.sl-pill--branch:focus {
      border-color: var(--primary, #0A444A);
      color: var(--primary, #0A444A);
    }

    .sl-row__buy {
      width: 100%;
      height: 28px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 6px;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--primary);
      background: var(--bg-surface-light);
      outline: none;
      box-sizing: border-box;
      padding: 0 2px;
    }

    .sl-row__buy:focus {
      border-color: var(--border);
      background: var(--bg-surface);
    }

    .sl-have-btn,
    .sl-bought-btn,
    .sl-update-btn {
      width: 31px;
      height: 31px;
      min-width: 31px;
      padding: 0;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      color: var(--text-muted);
      font-size: 0.7rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .sl-update-btn {
      color: var(--primary, #0A444A);
    }

    .sl-have-btn.is-have {
      background: #ecfdf5;
      border-color: #bbf7d0;
      color: #15803d;
    }

    .sl-bought-btn.is-on {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #c2410c;
    }

    body.dark .sl-have-btn,
    body.dark .sl-bought-btn,
    body.dark .sl-update-btn {
      background: var(--bg-surface);
      border-color: var(--border);
      color: var(--text-muted);
    }

    body.dark .sl-update-btn {
      color: var(--primary, #5eead4);
    }

    body.dark .sl-have-btn.is-have {
      background: rgba(34, 197, 94, 0.16) !important;
      border-color: rgba(74, 222, 128, 0.45) !important;
      color: #86efac !important;
    }

    body.dark .sl-bought-btn.is-on {
      background: rgba(249, 115, 22, 0.16) !important;
      border-color: rgba(251, 146, 60, 0.45) !important;
      color: #fdba74 !important;
    }

    .sl-remove-btn {
      background: none;
      border: none;
      color: #DC2626;
      cursor: pointer;
      padding: 0 2px;
      font-size: 0.7rem;
      opacity: 0.75;
      line-height: 1;
      margin-left: 4px;
    }

    .sl-remove-btn:hover { opacity: 1; }

    /* Shopping List — phone-first (primary use) */
    @media (max-width: 1023px) {
      #view-shopping-list.view-box {
        padding: 0 !important;
      }

      .sl {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      }

      .sl-card {
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      }

      .sl-tools {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "total hide clear"
          "search search search";
        gap: 8px;
        padding: 10px;
        background: var(--bg-surface-light);
        align-items: stretch;
      }

      .sl-total {
        grid-area: total;
        order: unset;
        flex: unset;
        width: auto;
        max-width: none;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0 4px;
        font-size: 0.625rem;
        box-sizing: border-box;
      }

      .sl-total strong {
        font-size: 0.6875rem;
      }

      #sl-hide-done-btn {
        grid-area: hide;
        order: unset;
        flex: unset;
        width: auto;
        max-width: none;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0 4px;
        font-size: 0.625rem;
      }

      #sl-clear-checks-btn {
        grid-area: clear;
        order: unset;
        flex: unset;
        width: auto;
        max-width: none;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0 4px;
        font-size: 0.625rem;
        gap: 4px;
      }

      #sl-clear-checks-btn .sl-clear-label {
        display: inline;
      }

      .sl-search {
        grid-area: search;
        order: unset;
        flex: unset;
        width: auto;
        min-width: 0;
        align-self: stretch;
      }

      .sl-search > i {
        left: 12px;
        width: 18px;
        font-size: 0.9rem;
      }

      .sl-search input,
      #sl-search {
        height: 44px;
        min-height: 44px;
        font-size: 16px; /* avoid iOS zoom */
        border-radius: 10px;
        padding: 0 12px 0 40px;
      }

      .sl-body {
        padding: 10px 12px 14px;
        -webkit-overflow-scrolling: touch;
      }

      .sl-stack {
        margin: 0;
        gap: 8px;
      }

      .sl-row {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        gap: 6px;
        padding: 10px 10px;
        border-radius: 12px;
        align-items: center;
      }

      .sl-row__name {
        font-size: 0.875rem;
        line-height: 1.25;
      }

      .sl-row__qty { font-size: 0.9375rem; }
      .sl-row__tags { margin-top: 6px; gap: 4px; }

      .sl-have-btn,
      .sl-bought-btn,
      .sl-update-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
        font-size: 0.8rem;
      }

      .sl-empty {
        padding: 40px 20px;
        gap: 10px;
        min-height: 280px;
      }

      .sl-empty__icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-main);
        border: 1px solid var(--border, #E2E8F0);
        color: var(--primary);
        margin-bottom: 4px;
      }

      .sl-empty__icon i {
        font-size: 1.5rem;
        opacity: 1;
      }

      .sl-empty strong {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-main);
      }

      .sl-empty div {
        font-size: 0.8125rem;
        line-height: 1.4;
        max-width: 260px;
      }

      .sl-empty .sl-btn {
        margin-top: 8px;
        min-height: 44px;
        height: 44px;
        padding: 0 18px;
        font-size: 0.8125rem;
        border-radius: 12px;
      }
    }

    .sl-empty__icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-main);
      border: 1px solid var(--border, #E2E8F0);
      color: var(--primary);
    }

    .sl-empty__icon i {
      font-size: 1.35rem;
      opacity: 1;
    }

    .stk-item-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface);
    }

    .stk-item-card.counted {
      background: var(--success-soft);
      border-color: var(--success);
    }

    .stk-item-card.stk-hidden {
      opacity: 0.58;
      border-style: dashed;
    }

    .stk-search-wrap {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap;
      align-items: stretch !important;
      gap: 8px;
    }

    .stk-search-wrap > select,
    .stk-search-wrap > input,
    .stk-search-wrap > .btn,
    .stk-search-wrap > .btn-outline {
      flex: 1 1 calc(50% - 4px);
      width: auto !important;
      max-width: none !important;
      min-width: 0;
      height: 32px !important;
      margin: 0 !important;
      box-sizing: border-box;
    }

    .stk-search-wrap > .btn,
    .stk-search-wrap > .btn-outline {
      font-size: 11px;
      gap: 6px;
      white-space: nowrap;
      padding: 0 8px !important;
    }

    @media (min-width: 768px) {
      .stk-search-wrap {
        flex-wrap: nowrap;
      }

      .stk-search-wrap > select,
      .stk-search-wrap > input,
      .stk-search-wrap > .btn,
      .stk-search-wrap > .btn-outline {
        flex: 1 1 0;
      }
    }

    #stk-show-hidden-btn.is-on {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    .stk-switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface-light);
      cursor: pointer;
      user-select: none;
    }

    .stk-switch input {
      width: 18px !important;
      height: 18px !important;
      margin: 0 !important;
      accent-color: var(--primary);
      flex-shrink: 0;
    }

    .stk-title-actions {
      display: none;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      margin-left: auto;
    }

    #globalFormModal.stk-count-open .stk-title-actions {
      display: flex;
    }

    #globalFormModal.stk-count-open .modal-title {
      margin-bottom: 10px;
      padding: 8px 12px;
    }

    #globalFormModal.stk-count-open .modal-actions {
      margin-top: 6px;
      padding-top: 14px;
    }

    .stk-title-btn {
      width: 26px;
      height: 26px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.12);
      color: white;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      box-sizing: border-box;
    }

    .stk-title-btn.is-on {
      background: #fff;
      color: var(--primary);
      border-color: #fff;
    }

    .stk-count-body {
      text-align: center;
    }

    .stk-count-body .stk-count-name {
      font-weight: 800;
      color: var(--primary);
      font-size: 15px;
      line-height: 1.3;
    }

    .stk-count-body .stk-count-stock {
      margin-top: 4px;
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-main);
    }

    .stk-count-body .stk-count-stock small {
      font-weight: 700;
      color: var(--text-muted);
      margin-left: 4px;
    }

    .stk-count-fields {
      margin-bottom: 12px;
    }

    .br-inv-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      padding: 0 10px 10px;
    }

    @media (min-width: 768px) {
      .br-inv-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .br-inv-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-surface);
    }

    .br-inv-card.critical {
      border-color: #fecaca;
      background: var(--danger-soft);
    }

    .br-inv-card.warning {
      border-color: var(--warning);
      background: var(--warning-soft);
    }

    .br-inv-name {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-main);
      line-height: 1.3;
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .br-inv-val {
      font-size: 12px;
      font-weight: 600;
      margin-left: 8px;
      flex-shrink: 0;
    }