/* =====================================================================
   responsive.css — ADDITIVE mobile/tablet layer. Loaded LAST so it wins.
   Layout-only. No colours, no markup, no JS, no backend dependencies.
   To fully revert: delete this file and its <link> in index.html.

   DESKTOP-SAFE GUARANTEE: every rule here lives inside a max-width media
   query (<=1180px). Above 1180px (desktop) this file is inert — the app
   renders exactly as before.

   Fills two gaps left by the existing v32 responsive layer in style.css:
     Gap A — table horizontal-scroll was an allow-list of element IDs, so
             tables in other containers got clipped/overflowed.
     Gap B — that scroll only activated <=820px, so wide tables forced
             whole-page horizontal scroll at iPad-landscape (~1024px).
   Approach: horizontal-scroll containers (the pattern already used by
   .al-tablewrap / .temu-tablewrap / .cs-table-wrap etc.), applied
   consistently to every remaining table, active through the tablet range.
   ===================================================================== */

/* =====================================================================
   1. TABLET + PHONE (<=1180px) — universal table horizontal scroll.
      Each table becomes its own horizontal scroll box, so a wide table
      can never push the page sideways. Columns stay aligned because the
      browser keeps an internal table formatting context.
   ===================================================================== */
@media (max-width: 1180px){

  /* 1a. Generic, un-classed tables (Supplier Products, Purchase Orders,
     PO Items, Suppliers, Warehouse Users, Consignee, Containers, Container
     Items, Balance Goods, Local Tracking, Received Costing, Clearing Agents,
     Security Center, etc.). `:not([class])` deliberately skips every themed
     table (.temu-table, .sf-table, .tbl, .cs-table, .cat-* …) that already
     ships its own working scroll wrapper, so they are left untouched. */
  .tab table:not([class]){
    display:block;
    width:100%;
    max-width:100%;
    /* neutralise the global `table{min-width:900px}` (active <=820px) so the
       table shrinks to its container and scrolls INTERNALLY instead of
       overflowing the page / getting clipped by body{overflow-x:hidden}. */
    min-width:0 !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* 1b. Themed tables that were rendered WITHOUT a scroll wrapper.
     These are all ordinary tables (no fixed-layout / no sticky columns),
     so turning them into block scroll boxes is safe and idempotent even
     where an outer wrapper also scrolls. */
  .bnq-table,
  .seller-order-table,
  .lk-pull-tbl,
  .amz-orders-table,
  .amz-items-table,
  #amazonConnections table,
  #amazonAsnApiTab table,
  #amazonVendorApiLogsTab table{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0 !important;   /* see note on .tab table:not([class]) above */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* 1c. eBay already wraps its table in .ebsh-tablewrap — it just was not
     told to scroll. Add the scroll (closes the hardcoded-column overflow). */
  .ebsh-tablewrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* 1d. Warehouse map: keep the absolutely-positioned blocks inside their
     own scroll area; never let the canvas widen the page. */
  .warehouse-canvas,
  #warehouseMapCanvas,
  .warehouse-workspace{
    max-width:100%;
  }
}

/* =====================================================================
   2. SMALL TABLET / LARGE PHONE (<=900px) — collapse multi-column
      detail grids that had no breakpoint of their own.
   ===================================================================== */
@media (max-width: 900px){

  /* Seller Central order-detail (was a fixed 3-column grid). */
  .seller-detail-grid{
    grid-template-columns:1fr !important;
  }

  /* Linking → Build-by-Category platform columns.
     Written to be safe whether .bld-cols is a grid or a flex container:
     grid-template-columns is ignored by flex, flex-wrap is ignored by grid. */
  .bld-cols{
    grid-template-columns:1fr !important;
    flex-wrap:wrap !important;
  }
  .bld-cols > *{ min-width:0; }
}

/* =====================================================================
   3. PHONE (<=820px) — touch targets, edge-clipped menus, modal caps.
      820px matches the existing mobile breakpoint in style.css so this
      layers cleanly on top of it.
   ===================================================================== */
@media (max-width: 820px){

  /* 3a. Touch targets >= 44px (style.css set 38px; bump for fingers). */
  button,
  .nav button, .nav a,
  .toolbar button,
  .form-grid button{
    min-height:44px;
  }
  .dots-btn{ height:44px; }

  /* 3b. Floating / dropdown menus must never run off the screen edge. */
  .menu-box,
  .cs-menu-pop,
  .ci-chansel-menu,
  .ci-chansel-flyout,
  .cat-chip-menu,
  .ebsh-ordersdrop{
    max-width:calc(100vw - 16px) !important;
  }

  /* 3c. Inline 4–6 column stat/meta grids in the Amazon Connections / ASN
     tabs are set via inline style attributes; clamp them to 2 columns so
     they stop overflowing. Scoped to those tabs to limit blast radius. */
  #amazonConnections [style*="grid-template-columns"],
  #amazonAsnApiTab [style*="grid-template-columns"]{
    grid-template-columns:1fr 1fr !important;
  }

  /* 3d. Modal / overlay cards: cap to viewport width and allow internal
     scroll where a fixed pixel width could exceed a small screen.
     (Most modals already use min(px,vw); this is a safety net for the few
     that used a bare pixel width, e.g. the Evri card at 560px.) */
  .ev-card,
  .rm-card,
  .wh-ui-modal,
  .wh-assign-modal,
  .stk2-modal,
  .stk-modal,
  .pl-modal-card,
  .modal-backdrop > *{
    max-width:calc(100vw - 24px) !important;
  }
  .ev-card,
  .rm-card,
  .stk2-modal,
  .stk-modal{
    max-height:90vh;
    overflow:auto;
  }
}

/* =====================================================================
   4. SMALL PHONE (<=480px) — the Connections/ASN stat grids go single
      column so 2-up numbers don't get squeezed.
   ===================================================================== */
@media (max-width: 480px){
  #amazonConnections [style*="grid-template-columns"],
  #amazonAsnApiTab [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
}

/* =====================================================================
   5. PUNCH-LIST FIXES (responsiveness-audit follow-up).
      Same additive @media approach — desktop (>1180px) stays inert.
   ===================================================================== */

/* Fix 1 — iOS focus-zoom. iOS Safari auto-zooms when a focused field's font
   is < 16px. Bump inputs/selects/textareas to 16px across touch widths
   (<=1180px covers phone + iPad portrait & landscape). Desktop (>1180px)
   font sizes are unchanged. The #appBox / #loginBox prefixes add id-level
   specificity so this wins over the existing class-based 12-13px mobile
   rules in style.css (which would otherwise out-specify a bare `input`). */
@media (max-width: 1180px){
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea{
    font-size:16px !important;
  }
  #appBox input:not([type=checkbox]):not([type=radio]),
  #appBox select,
  #appBox textarea,
  #loginBox input,
  #loginBox select{
    font-size:16px !important;
  }
}

/* Fixes 2 & 3 — phone width (<=820px). */
@media (max-width: 820px){

  /* Fix 2 — Vendor SKU combo box edge-clipping.
     The typeahead popup is a NATIVE <datalist> (id="amzVskuOptions"), drawn
     by the browser itself, so it is inherently kept on-screen and cannot be
     CSS-clipped or pushed off the edge — no width cap on the list is needed
     or even possible. We only make the bound input comfortably tappable and
     keep it within the viewport. Free-typing a new value is unaffected
     (a datalist never forces a selection). Applies to BOTH the PO line cell
     and the Vendor SKU map tab cell (both bind list="amzVskuOptions"). */
  input[list="amzVskuOptions"]{
    min-height:44px;
    max-width:min(280px, 90vw) !important;
  }

  /* Fix 3 — Amazon EDI / Vendor API in-row quantity/number inputs were
     ~85-90px wide and short (hard to tap). Give them a ~44px tap target.
     Width is intentionally left alone so the row layout doesn't break — the
     table already scrolls inside its own container at this width. Targeted
     by stable id prefixes + the .amz-qty-input class, so ONLY these in-row
     inputs are affected, never page-wide. */
  input[id^="amazon_accept_"],
  input[id^="amazon_reject_"],
  select[id^="amazon_reject_type_"],
  input[id^="amazon_expected_"],
  input[id^="asn_units_"],
  input[id^="asn_cartons_"],
  input[id^="asn_lot_"],
  input[id^="asn_total_pallets"],
  .amz-qty-input{
    min-height:44px !important;
  }
}

/* =====================================================================
   6. MOBILE OFF-CANVAS DRAWER — overlay model.
      Original bug: the dim backdrop (z-index:999) was stacked ABOVE the
      drawer (.sidebar, z-index:10); being translucent the drawer showed
      through but taps hit the backdrop, so menu items were "not tappable".
      A second bug: a legacy @media(max-width:900px) rule forced the drawer
      position:relative, keeping it in flow and reserving its height (the
      blank gap when closed). Both fixed below. The drawer overlays ON TOP
      of the page with a dim backdrop beneath it that closes the menu and
      blocks the page. Pure CSS; toggle JS unchanged.
      Scoped to the small-screen widths where the drawer exists (<=820px).
   ===================================================================== */
@media (max-width: 820px){
  /* CRITICAL — take the drawer OUT OF FLOW.
     A legacy `@media(max-width:900px)` block in style.css forces
     .sidebar{position:relative;height:auto}, so the off-canvas drawer was
     still in normal flow: translated off-screen but STILL reserving its full
     content height, which pushed the whole page down (the "huge blank gap"
     when the menu is closed). Restoring position:fixed removes it from flow
     so it reserves zero space when closed and overlays cleanly when open. */
  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    height:100vh !important;
    width:min(82vw, 310px) !important;
    z-index:1002 !important;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .sidebar *{ pointer-events:auto; }
  .mobile-menu-btn{ z-index:1003 !important; }

  /* OVERLAY model: the drawer slides in ON TOP of the page — the page is NOT
     pushed or squeezed. A dim backdrop sits BELOW the drawer (z 1000) but
     ABOVE the page, so tapping it closes the menu and blocks interaction
     with the page beneath. Layer order: page < backdrop(1000) < drawer(1002)
     < toggle(1003). (The backdrop's display is toggled by body.sidebar-open
     in style.css; we only correct its z-index and re-assert it here.) */
  .sidebar-backdrop{ z-index:1000 !important; }
  body.sidebar-open .sidebar-backdrop{ display:block !important; }

  /* lock background scroll while the drawer is open; restored on close */
  body.sidebar-open{ overflow:hidden; }

  /* nav targets comfortably tappable (~44px) */
  .sidebar .nav button, .nav a,
  .sidebar summary.nav-group-title,
  .sidebar summary.nav-subgroup-title{ min-height:44px; }
}

/* =====================================================================
   7. TOPBAR at phone width — stop the squash / clipped user-pill.
      The topbar is a flex row (title | controls) with space-between. On a
      narrow phone the title and the right-side controls (Dark mode /
      "Admin (admin)" pill / Logout) compete for width: the title wraps to
      3 lines and the pill overflows the right edge (clipped by the page's
      overflow-x:hidden). Stack the two groups vertically and let the
      controls wrap, so nothing is squashed or cut off. Phones only.
   ===================================================================== */
@media (max-width: 600px){
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  /* the right-hand control cluster wraps onto its own row(s) */
  .topbar > div:last-child{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }
  /* never let the user pill push past the edge */
  .topbar .user-pill{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* =====================================================================
   8. MOBILE/TABLET DESIGN SYSTEM (approved tokens).
      One consistent, fluid, polished system applied across every screen.
      Tokens are defined globally (harmless — unused above 1180px); every
      rule that CONSUMES them lives inside a max-width media query, so
      desktop (>1180px) is byte-for-byte unchanged.
   ===================================================================== */
:root{
  /* spacing (8px grid + one 4px micro-step for icon<->label in chips) */
  --sp-05:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px;
  /* fluid type — scales with viewport, readable without zoom */
  /* tuned down so phones aren't zoomed-in; still readable (body floor 14px) */
  --fs-display:clamp(19px, 4.4vw, 26px);
  --fs-h1:clamp(16px, 3.6vw, 20px);
  --fs-h2:clamp(14.5px, 3vw, 17px);
  --fs-body:clamp(14px, 3.4vw, 15px);
  --fs-small:clamp(11.5px, 2.8vw, 12.5px);
  /* near-neutral base + brand accents */
  --c-bg:#f4f7fb; --c-surface:#ffffff; --c-surface-2:#f1f5f9; --c-line:#e6edf4;
  --c-ink:#0f172a; --c-ink-2:#475569; --c-muted:#64748b;
  --c-primary:#0369a1; --c-primary-d:#075985; --c-accent:#0e7490;
  /* elevation */
  --radius:14px; --radius-sm:10px;
  --shadow-1:0 1px 2px rgba(15,23,42,.06);
  --shadow-2:0 6px 18px rgba(15,23,42,.08);
  --shadow-3:0 14px 32px rgba(15,23,42,.14);
  /* motion — aliases onto motion.css, which is the single source of truth.
     These names are kept because ~7 rules below still reference them. */
  --t-tap:var(--t-fast); --t-ui:var(--t-base); --ease:var(--e-out);
}

/* gentle, once-per-appearance entrance for screens (used in the layer below) */

/* ---- TABLET + PHONE (<=1180px): apply the system to shared chrome ---- */
@media (max-width: 1180px){
  body{ background:var(--c-bg); color:var(--c-ink); }

  /* cards / panels: one radius, hairline border, soft tinted shadow */
  .card,.hero-card,.temp-box,.amazon-connect-card{
    border-radius:var(--radius);
    border:1px solid var(--c-line);
    box-shadow:var(--shadow-2);
  }

  /* fluid typography + hierarchy */
  .page-title{ font-size:var(--fs-display); line-height:1.2; }
  .section-head h2,.cat-page-title,.stk2-title{ font-size:var(--fs-h1); line-height:1.2; }
  .section-head p,.cat-page-sub,.stk2-sub{ font-size:var(--fs-small); color:var(--c-muted); }
  h3{ font-size:var(--fs-h2); }
  td,.msg-text{ font-size:var(--fs-body); }

  /* buttons: consistent radius + fast tap feedback (no scale/bounce/glow) */
  button,.cat-btn-primary,.cat-btn-ghost,.stk2-btn-sm,.mp-tabs button,.mp-toolbar button{
    border-radius:var(--radius-sm);
    transition:background var(--t-tap) var(--ease),
               box-shadow var(--t-tap) var(--ease),
               transform var(--t-tap) var(--ease);
  }
  button:active{ transform:translateY(1px); }

  /* inputs: one radius + hairline (16px size handled in Fix 1 above) */
  input,select,textarea,.toolbar input,.toolbar select,.form-grid input,.form-grid select{
    border-radius:var(--radius-sm);
    border-color:var(--c-line);
  }

  /* status chips / badges: pill radius (colour+label preserved) */
  .badge,.amazon-status,.bnq-status,.mp-tabs button{ border-radius:999px; }

  /* drawer + modals share the deepest elevation token */
  .sidebar,
  .pp-shell,.cat-panel-shell,.chat-panel,.costing-modal-shell,
  .wh-assign-modal,.stk2-modal,.stk-modal,.ev-card{
    box-shadow:var(--shadow-3);
  }

  /* PRIORITY-COLUMN TABLES (compare screens): the table already scrolls in
     its own container; pin the first column so the key identifier stays in
     view while the rest scrolls horizontally. Skips card-stacked tables. */
  .tab table:not(.rms-stack) th:first-child,
  .tab table:not(.rms-stack) td:first-child{
    position:sticky;
    left:0;
    z-index:1;
    background:var(--c-surface);
    box-shadow:1px 0 0 var(--c-line);
  }
  .tab table:not(.rms-stack) th:first-child{ background:var(--c-surface-2); }

  /* MOTION: gentle entrance when a screen becomes visible (reduce-safe below).
     fill-mode is `backwards`, NOT `both`: `both` keeps the final keyframe applied
     forever, and a filling transform animation computes to the identity matrix
     even when the keyframe says `transform:none`. Any non-none transform makes the
     element a containing block, so EVERY position:fixed descendant inside a .tab
     (menus, popovers, modals) anchored to the section instead of the viewport and
     rendered hundreds of px away. The end keyframe equals the element's natural
     state, so there is nothing to keep — `backwards` looks identical. */
  .tab:not(.hidden){ --rise:6px; animation:rms-rise var(--t-base) var(--e-out) backwards; }
}

/* ---- PHONE (<=600px): tighter rhythm + CARD-STACK record tables ---- */
@media (max-width: 600px){
  .card,.hero-card{ padding:var(--sp-2); }
  .section-head{ gap:var(--sp-1); }

  /* CARD STACK for "read one record" tables (opt-in via .rms-stack + per-cell
     data-label). Each row becomes a clean label/value card; header hidden. */
  table.rms-stack{ display:block; width:100%; min-width:0 !important; box-shadow:none; border:0; }
  table.rms-stack thead{ display:none; }
  table.rms-stack tbody{ display:block; }
  table.rms-stack tr{
    display:block;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-1);
    padding:var(--sp-1) var(--sp-2);
    margin:0 0 var(--sp-1);
  }
  table.rms-stack td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-1) 0;
    border:0;
    border-bottom:1px solid var(--c-line);
    white-space:normal;
    text-align:right;
    font-size:var(--fs-body);
  }
  table.rms-stack td:last-child{ border-bottom:0; }
  table.rms-stack td[data-label]::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--c-muted);
    text-align:left;
    flex:0 0 42%;
  }
  table.rms-stack td:empty{ display:none; }
}

/* ---- Respect reduced-motion everywhere in this layer ---- */
@media (prefers-reduced-motion: reduce){
  .tab:not(.hidden){ animation:none !important; }
}

/* =====================================================================
   9. TUNING (follow-on): right-sized density + de-cramp dense screens.
      Refines Section 8 — same tokens, calmer scale. Desktop (>1180px)
      remains untouched (everything here is inside max-width queries).
   ===================================================================== */

/* ---- Right-sized vertical rhythm on phones (less "zoomed in") ---- */
@media (max-width: 600px){
  .main{ padding-left:var(--sp-1) !important; padding-right:var(--sp-1) !important; }
  .card,.hero-card{ padding:var(--sp-2); margin-bottom:var(--sp-2); }
  .section-head{ margin-bottom:var(--sp-2); }
  .toolbar,.form-grid{ gap:var(--sp-1); margin-bottom:var(--sp-2); }
  .stat{ padding:var(--sp-2); }
  .stat .num{ font-size:clamp(20px,5.4vw,24px); }
  .temp-box{ padding:var(--sp-2); margin:var(--sp-2) 0; }
}
@media (max-width: 380px){
  .card,.hero-card{ padding:12px; }            /* tightest phones / foldable */
}

/* ---- ORDER FULFILLMENT (#fulfilmentStation): worst cramping offender.
   Built with desktop padding (20/24px), a 4-up stat grid, and fixed
   min-width controls. Re-flow to the 8px scale and fluid grids. ---- */
@media (max-width: 1024px){
  .ful-header-bar{ padding:var(--sp-2) var(--sp-2) 0; }
  .ful-orders-wrap{ padding:var(--sp-2); }
  .ful-b-filters{ padding:var(--sp-1) var(--sp-2) 0; }
  .ful-test-banner{ padding:var(--sp-1) var(--sp-2); }
  .ful-page-title{ font-size:var(--fs-h1); }
  .ful-page-sub{ font-size:var(--fs-small); }
  .ful-stats{ grid-template-columns:repeat(3,1fr); gap:var(--sp-1); }
}
@media (max-width: 600px){
  .ful-header-bar{ padding:var(--sp-2) var(--sp-1) 0; gap:var(--sp-1); }
  .ful-orders-wrap{ padding:var(--sp-2) var(--sp-1); }
  .ful-stats{ grid-template-columns:repeat(2,1fr); }     /* 4-up -> 2-up, breathing room */
  .ful-toolbar{ gap:var(--sp-1); }
  /* let the filter/search controls flex instead of forcing 130/170px mins */
  .ful-select,.ful-search{ min-width:0; flex:1 1 140px; }
  .ful-toolbar-right{ margin-left:0; width:100%; }
  .ful-oc-main{ padding:var(--sp-1) var(--sp-2); gap:var(--sp-1); }
  .ful-ex-grid{ gap:var(--sp-2); }
}

/* ---- Other dense screens: Orders Hub + Warehouse — same breathing room ---- */
@media (max-width: 600px){
  #ordersHub .stk-test-bar,#ordersHub .stk-section-title{ padding-left:0; padding-right:0; }
  .warehouse-tabs{ gap:var(--sp-1); }
  .warehouse-tabs button{ padding:var(--sp-1) var(--sp-2); }
  .wh-overview-head,.wh-panel-head{ gap:var(--sp-1); }
}

/* ---- Order Fulfilment — DE-SMUSH (phones <=820px).
   The tab pills and channel-filter chips read as chunky/cramped: the global
   44px touch-target bump + large padding stacks them tightly, especially once
   they wrap to a second row. They are SECONDARY filter controls, so right-size
   them (smaller padding/font, ~36px) and add vertical rhythm between blocks.
   Primary action buttons (Refresh/Buy labels) keep their comfortable target. ---- */
@media (max-width: 820px){
  /* top tab pills: smaller + room to breathe when wrapped */
  .ful-tab-pills{ gap:5px; row-gap:5px; padding:4px; width:100%; }
  .ful-tab-pill{
    min-height:36px !important;        /* relax the global 44px for these pills */
    padding:6px 12px; font-size:12px;
    flex:1 1 auto;                     /* tabs share the row inside the box */
  }
  /* the long action sits as its OWN full-width row INSIDE the pills box */
  .ful-tab-pills .pk-open-station{ flex:1 1 100%; margin-top:5px; justify-content:center; }
  /* channel chips: smaller + clear spacing between wrapped rows */
  .ful-plat-filters{ gap:8px; row-gap:8px; margin-top:var(--sp-1); }
  .ful-plat-pill{
    min-height:36px !important;
    padding:6px 11px; font-size:11.5px;
  }
  .ful-plat-tlogo{ width:15px; height:15px; }
  /* vertical rhythm — space the stacked blocks apart (de-smush) */
  .ful-header-bar{ gap:14px; }
  .ful-ticker{ margin:10px 0; }
  .ful-stats{ margin-bottom:18px; }
  .ful-toolbar{ margin-bottom:18px; row-gap:10px; }
}

/* ---- Picker / scan overlays: never exceed the viewport on phones ---- */
@media (max-width: 600px){
  [class*="pk-picker"],[class*="pk-pin"],[id*="ScanPicker"]{ max-width:calc(100vw - var(--sp-2)) !important; }
}

/* =====================================================================
   10. CHANNEL ORDER SCREENS — right-sized headings + no page overflow.
      Brings Seller G4/JUYI, B&Q, Temu, TikTok, eBay, Shopify up to the
      Order Fulfillment standard.
   ===================================================================== */
@media (max-width: 1024px){
  /* (Issue 1) fluid, right-sized headings on every channel chrome so they
     stop wrapping awkwardly / dominating the screen */
  .seller-amz-head h2,
  .mp-banner .mp-titles h2,
  .ebsh-head h1,
  .ebsh-banner h2,
  .ebsh-mtop h2{
    font-size:var(--fs-h1) !important;
    line-height:1.25;
    font-weight:700;
  }

  /* (Issue 2) Seller table ran off-screen because .seller-body is a CSS grid
     whose tracks default to min-width:auto (they grow to the table's content
     and overflow the page). Collapse the 245px filter rail and let tracks
     shrink so the table scrolls IN ITS OWN container (sticky first column
     from Section 8 keeps the key column visible). */
  .seller-body{ grid-template-columns:1fr !important; gap:var(--sp-2); }
  .seller-filters{ display:none; }

  /* allow flex/grid tracks on all channel screens to shrink below content,
     so their display:block / *-tablewrap tables scroll in-container */
  .seller-body,.seller-body>*,.seller-orders-page,
  .ebsh-wrap,.ebsh-wrap>*,
  .mp-toolbar,.mp-connbar{ min-width:0; }
}

/* =====================================================================
   11. AESTHETIC REFINEMENT — clean & calm (Linear/Notion direction).
      One accent (brand blue), uniform soft cards, more whitespace,
      refined type, tidy empty states. Refinement only; ≤1180px.
   ===================================================================== */
@media (max-width: 1180px){
  /* 11.1 CARDS: ONE treatment — hairline border, no shadow (calm, flat).
     Modals/drawer keep their elevation (Section 8) so they still float. */
  .card,.hero-card,.temp-box,.amazon-connect-card,.seller-card,.ful-oc{
    box-shadow:none !important;
    border:1px solid var(--c-line) !important;
    border-radius:var(--radius);
  }

  /* 11.2 WHITESPACE: more room to breathe between blocks */
  .card,.hero-card{ padding:var(--sp-3); margin-bottom:var(--sp-3); }
  .section-head{ margin-bottom:var(--sp-3); }
  .toolbar,.form-grid{ margin-bottom:var(--sp-3); }

  /* 11.3 TYPOGRAPHY: calmer rhythm + tracked all-caps labels */
  body{ line-height:1.55; }
  .eyebrow,.ful-stat-l,.ful-ex-h,.cat-detail-label,.stk2-sub,.mp-sub,
  .column-perm-group label{ letter-spacing:.05em; }
  .section-head h2,.page-title,.cat-page-title,.stk2-title,
  .seller-amz-head h2,.mp-banner .mp-titles h2{ font-weight:700; }

  /* 11.4 ONE ACCENT (brand blue) for primary actions + active states.
     Neutralises the competing gold/orange. Status red/amber/green and the
     semantic green/cancel buttons are left alone (they carry meaning). The
     channel BANNER colours stay — they are the at-a-glance channel identity. */
  .seller-action-btn,.seller-yellow,
  .seller-actions button:not(.seller-action-secondary):not(.seller-action-cancel):not(.seller-action-green),
  .mp-toolbar button:not(.ghost),.mp-connbar .mp-connect{
    background:var(--c-primary) !important;
    border-color:var(--c-primary) !important;
    color:#fff !important;
  }
  .seller-tabs a.active,.seller-quick a.active{
    color:var(--c-primary) !important;
    border-bottom-color:var(--c-primary) !important;
  }
  .ful-tab-pill.active,.mp-tabs button.active,.lk-tab.active,.stock-subtab.active{
    color:var(--c-primary) !important;
  }
  .ful-tab-pill.active{ box-shadow:none; }

  /* 11.5 EMPTY STATES: centered, muted, with a quiet icon */
  .empty-state,.ful-empty,.seller-empty,.bnq-empty,.ci-empty,.cs-empty,
  .cat-empty-state,.stk-empty{
    text-align:center;
    padding:var(--sp-4) var(--sp-2);
    color:var(--c-muted);
    background:var(--c-surface);
    border:1px dashed var(--c-line);
    border-radius:var(--radius);
  }
  .ful-empty::before,.seller-empty::before,.bnq-empty::before,
  .cat-empty-state::before{
    content:"\1F4E6";            /* 📦 */
    display:block;
    font-size:26px;
    opacity:.55;
    margin-bottom:var(--sp-1);
  }
}

/* =====================================================================
   12. MOBILE-FIRST CHANNEL ORDER SCREENS (<=900px) — structural rethink.
       Orders first (as cards), controls collapsed behind a "Filters"
       disclosure, status as a swipeable chip row, bulk actions as a fixed
       bottom bar. Desktop (>1180px) untouched; 901-1180 keeps current.
       Hooks: details.rms-filters (collapsible), table.rms-stack (cards),
       .rms-bulkbar (bottom bar). Applied to mp-* channels + Seller + eBay.
   ===================================================================== */
@media (max-width: 1180px){

  /* ---- collapsible Filters disclosure (native <details>, no JS) ---- */
  details.rms-filters{
    border:1px solid var(--c-line);
    border-radius:var(--radius);
    background:var(--c-surface);
    margin:var(--sp-2);
    overflow:hidden;
  }
  details.rms-filters > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:var(--sp-1);
    padding:var(--sp-2); min-height:44px;
    font-size:var(--fs-body); font-weight:700; color:var(--c-ink);
  }
  details.rms-filters > summary::-webkit-details-marker{ display:none; }
  details.rms-filters > summary::before{ content:"\2699"; opacity:.65; }      /* gear */
  details.rms-filters > summary::after{
    content:"\25BE"; margin-left:auto; opacity:.6;
    transition:transform var(--t-ui) var(--ease);
  }
  details.rms-filters[open] > summary::after{ transform:rotate(180deg); }
  /* the controls inside flow full-width, stacked, with breathing room */
  details.rms-filters > :not(summary){
    padding:0 var(--sp-2) var(--sp-2);
    display:flex; flex-wrap:wrap; gap:var(--sp-1);
  }
  details.rms-filters .left,details.rms-filters .right{
    display:flex; flex-wrap:wrap; gap:var(--sp-1); width:100%; margin:0;
  }
  details.rms-filters input,details.rms-filters select,details.rms-filters button{
    flex:1 1 140px; min-width:0;
  }

  /* ---- status as a swipeable chip row (no wrap, scrolls) ---- */
  .mp-tabs,.seller-tabs{
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:var(--sp-1); padding:var(--sp-1) var(--sp-2);
    scrollbar-width:none;
  }
  .mp-tabs::-webkit-scrollbar,.seller-tabs::-webkit-scrollbar{ height:0; }
  .mp-tabs button,.seller-tabs a{ flex:0 0 auto; white-space:nowrap; }
  .seller-tabs a{ padding:8px 4px; }

  /* ---- ORDERS AS CARDS: order tables render as full-width vertical cards
     (same rms-stack mechanism as PO Items; applied up to 900px here) ---- */
  table.rms-stack{ display:block; width:100%; min-width:0 !important; box-shadow:none; border:0; }
  table.rms-stack thead{ display:none; }
  table.rms-stack tbody{ display:block; }
  table.rms-stack tr{
    display:block; background:var(--c-surface);
    border:1px solid var(--c-line); border-radius:var(--radius);
    box-shadow:none; padding:var(--sp-1) var(--sp-2);
    margin:0 var(--sp-1) var(--sp-1);
  }
  table.rms-stack td{
    display:flex; justify-content:space-between; align-items:center;
    gap:var(--sp-2); padding:var(--sp-1) 0; border:0;
    border-bottom:1px solid var(--c-line);
    white-space:normal; text-align:right; font-size:var(--fs-body);
  }
  table.rms-stack td:last-child{ border-bottom:0; padding-top:var(--sp-1); }
  table.rms-stack td[data-label]::before{
    content:attr(data-label); font-weight:600; color:var(--c-muted);
    text-align:left; flex:0 0 40%; font-size:var(--fs-small);
  }
  /* action cell: full-width, comfortably tappable buttons */
  table.rms-stack td[data-label="Action"],
  table.rms-stack td[data-label="Actions"]{ justify-content:flex-start; flex-wrap:wrap; gap:var(--sp-1); }
  table.rms-stack td[data-label="Action"] button,
  table.rms-stack td[data-label="Actions"] button{ flex:1 1 auto; min-height:44px; margin:0; }
  table.rms-stack td:empty{ display:none; }

  /* ---- fixed bottom bulk-action bar (shown only when selection active) ---- */
  .rms-bulkbar{
    position:fixed; left:0; right:0; bottom:0; z-index:1500;
    display:flex; align-items:center; gap:var(--sp-1);
    padding:var(--sp-2); padding-bottom:max(var(--sp-2), env(safe-area-inset-bottom));
    background:var(--c-surface); border-top:1px solid var(--c-line);
    box-shadow:0 -8px 24px rgba(15,23,42,.12);
  }
  .rms-bulkbar button{ flex:1 1 auto; min-height:44px; margin:0; }

  /* ---- Seller: hide the 245px advanced-filter rail on phones (its key
     controls live in the Filters disclosure); orders take full width ---- */
  .seller-body{ grid-template-columns:1fr !important; }
  .seller-filters{ display:none; }
  .seller-main-top{ flex-wrap:wrap; gap:var(--sp-1); }
}

/* ---- rms-filters disclosure: DESKTOP/TABLET (>=901px) shows controls inline ----
   The <details class="rms-filters"> wrapper must NOT hide controls above the mobile
   breakpoint. We hide the summary; js/filtersReveal.js force-opens the <details> so
   its content (search + filters) shows NATIVELY. (We no longer use display:contents
   to reveal a CLOSED <details> — modern Chrome's ::details-content model no longer
   honours that.) Below 901px the disclosure works natively (tap "Filters" to expand). */
@media (min-width: 901px){
  details.rms-filters > summary{ display:none; }
}

/* ---- Seller Central: declutter the decorative bar on phones ---- */
@media (max-width: 1180px){
  .seller-banner{ display:none; }
  .seller-quick{ display:flex; flex-wrap:wrap; gap:var(--sp-1); font-size:var(--fs-small); }
  .seller-amz-head{ padding:var(--sp-2); }
}

/* ---- Seller bulk-action bar -> fixed bottom bar, only when populated ----
   #bulk is empty until rows are selected (existing JS), so :not(:empty)
   reveals it only on selection. Scoped to the orders list so the detail
   page's action bar is unaffected. ---- */
@media (max-width: 1180px){
  .seller-orders-page .seller-body .seller-actions:not(:empty){
    position:fixed; left:0; right:0; bottom:0; z-index:1500;
    display:flex; flex-wrap:wrap; gap:var(--sp-1); align-items:center;
    background:var(--c-surface); border-top:1px solid var(--c-line);
    box-shadow:0 -8px 24px rgba(15,23,42,.12);
    padding:var(--sp-2); padding-bottom:max(var(--sp-2), env(safe-area-inset-bottom));
  }
}

/* =====================================================================
   13. MOBILE APP-SHELL (<=1180px) — persistent bottom tab bar + off-canvas
       drawer for everything else. Presentation only: the bottom-bar buttons
       call the SAME showTab()/loaders as the sidebar. Desktop (>1180px) is
       untouched (the bar is display:none above the breakpoint).
   ===================================================================== */
.rms-tabbar{ display:none; }

@media (max-width: 1180px){
  /* show the bar only when logged in (app shell visible), pinned to the bottom */
  #appBox:not(.hidden) ~ .rms-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:1400;
    background:var(--c-surface); border-top:1px solid var(--c-line);
    box-shadow:0 -4px 16px rgba(15,23,42,.08);
    padding:6px 4px; padding-bottom:max(6px, env(safe-area-inset-bottom));
  }
  .rms-tabbar button{
    flex:1 1 0; min-width:0; min-height:48px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:none !important; border:0; box-shadow:none !important; margin:0; padding:6px 2px;
    color:var(--c-muted); border-radius:10px; cursor:pointer;
    font-size:11px; font-weight:600; line-height:1.1;
    transition:color var(--t-tap) var(--ease), background var(--t-tap) var(--ease);
  }
  .rms-tabbar button:hover{ transform:none; }
  .rms-tabbar button .ico{ font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; }
  /* Detailed duotone SVG icons (replace the flat emoji): they use currentColor,
     so they inherit the tab's colour — muted by default, brand blue (--c-primary)
     on the active tab — which the emoji never could. Mobile-only (the whole bar
     is <=1180px); desktop never renders it. */
  .rms-tabbar button .ico svg{ width:25px; height:25px; display:block; }
  .rms-tabbar button.active{ color:var(--c-primary); }
  .rms-tabbar button:active{ background:var(--c-surface-2); }

  /* ---- extend the off-canvas DRAWER up to 1180 so the bottom bar is the
     primary nav on tablets too (desktop fixed sidebar hidden, main full-width).
     Reuses the existing toggleMobileSidebar()/body.sidebar-open state. ---- */
  .sidebar{
    position:fixed !important; top:0; left:0;
    height:100vh !important; width:min(86vw, 320px) !important;
    transform:translateX(-105%); transition:transform var(--t-ui) var(--ease);
    overflow-y:auto; z-index:1602; padding-top:16px;
  }
  body.sidebar-open .sidebar{ transform:translateX(0); }
  .sidebar-backdrop{ z-index:1601; }
  body.sidebar-open .sidebar-backdrop{ display:block; }
  body.sidebar-open{ overflow:hidden; }
  .main{
    margin-left:0 !important; width:100% !important;
    /* small top (no floating hamburger now) + room for the bottom bar */
    padding:var(--sp-2) var(--sp-1) calc(60px + env(safe-area-inset-bottom)) !important;
  }
  /* the floating top-left hamburger is replaced by the bottom "More" tab */
  .mobile-menu-btn{ display:none !important; }

  /* bulk-action bars sit ABOVE the tab bar (both visible) */
  .rms-bulkbar,
  .seller-orders-page .seller-body .seller-actions:not(:empty){
    bottom:calc(58px + env(safe-area-inset-bottom)) !important;
    z-index:1450 !important;
  }
}

/* =====================================================================
   14. WAREHOUSE (WMS) mobile (<=1180px) — app-like presentation only.
       CSS only: no JS/markup changes, so scan/assign/costing/move logic and
       the map drag handlers are untouched.
   ===================================================================== */
@media (max-width: 1180px){
  /* sub-tabs become a swipeable chip row (no wrap) */
  #warehouse .warehouse-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:var(--sp-1); padding-bottom:var(--sp-1); scrollbar-width:none;
  }
  #warehouse .warehouse-tabs::-webkit-scrollbar{ height:0; }
  #warehouse .warehouse-tabs button{ flex:0 0 auto; white-space:nowrap; min-height:44px; }

  /* designer/map control rows wrap to full width, comfortably tappable */
  #warehouse .warehouse-designer-head,
  #warehouse .wh-mapbar,
  #warehouse .wh-mapbar-right{ flex-wrap:wrap; gap:var(--sp-1); }
  #warehouse .warehouse-designer-head input,
  #warehouse .warehouse-designer-head select{ flex:1 1 160px; min-width:0; }

  /* map canvas + side panel stack full-width (workspace already 1fr <=1150) */
  #warehouse .warehouse-canvas,#warehouse #warehouseMapCanvas{ max-width:100%; }
  #warehouse .warehouse-side-panel{ max-height:none !important; }
}

/* Warehouse + global modals as bottom-sheets on phones (reachable controls) */
@media (max-width: 600px){
  .wh-assign-modal,
  .costing-modal-shell{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    top:auto !important; width:100% !important; max-width:100% !important;
    max-height:92vh !important; overflow:auto !important;
    border-radius:18px 18px 0 0 !important;
    margin:0 !important;
  }
  /* scan / generic modal cards: cap to the viewport, keep buttons reachable */
  .wh-ui-modal,.modal-backdrop > *{ max-width:calc(100vw - var(--sp-2)) !important; max-height:92vh; overflow:auto; }
}

/* =====================================================================
   15. DASHBOARD mobile polish (<=600px) — denser, app-like stat grid.
   ===================================================================== */
@media (max-width: 600px){
  #dashboard .stats-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
  #dashboard .dashboard-grid{ grid-template-columns:1fr; }
  #dashboard .admin-reset-panel{ display:flex; flex-direction:column; gap:var(--sp-1); }
  #dashboard .admin-reset-panel button{ width:100%; margin:0; }
}

/* =====================================================================
   16. PART A FIXES + polish (<=1180px). Presentation only.
   ===================================================================== */

/* --- Fix 1: Warehouse horizontal overflow (tabs + controls cut off) --- */
@media (max-width: 1180px){
  /* collapse the 760+520 designer workspace earlier so it can't overflow 1151-1180 */
  #warehouse .wh-simple-workspace,
  #warehouse .warehouse-workspace{ grid-template-columns:1fr !important; }
  /* sub-tab row + control rows: keep inside the card, never widen the page */
  #warehouse .warehouse-tabs,
  #warehouse .warehouse-designer-head,
  #warehouse .wh-mapbar{ max-width:100%; }
  #warehouse .warehouse-designer-head input,
  #warehouse .warehouse-designer-head select,
  #warehouse .wh-mapbar select{ flex:1 1 150px; min-width:0 !important; }
}

/* --- Fix 2: centre & BALANCE content on ALL mobile widths (phones + tablets).
   One centred content column with equal left/right gutters, and every inner
   block (filters disclosure, order cards) shares the SAME left/right edge so
   nothing looks left-shifted or unbalanced. The map screen keeps full width.
   Tablets get a capped, centred column; phones are full-width within equal
   gutters (the cap is simply inert below 820px). --- */
@media (max-width: 1180px){
  .main > .tab{ max-width:820px; margin-left:auto !important; margin-right:auto !important; }
  #warehouse.tab{ max-width:none; }

  /* align inner blocks to one consistent gutter — drop the ad-hoc side margins
     that left .rms-filters (16px) and the order cards (8px) on different edges,
     which is what read as "left-aligned / off-balance". */
  details.rms-filters{ margin-left:0 !important; margin-right:0 !important; }
  table.rms-stack{ margin-left:0 !important; margin-right:0 !important; }
  table.rms-stack tr{ margin-left:0 !important; margin-right:0 !important; }
}

/* --- Fix 3: redesign the "More" drawer into a clean LIGHT app menu (tokens),
   replacing the legacy dark nested look on mobile. Desktop drawer unchanged. --- */
@media (max-width: 1180px){
  .sidebar{
    background:var(--c-surface) !important;
    color:var(--c-ink);
    box-shadow:var(--shadow-3);
    padding:16px 12px;
  }
  .sidebar .logo{ color:var(--c-ink); }
  .sidebar .sublogo{ color:var(--c-muted); }
  /* section groups -> clean, tappable accordion rows (collapsed by default;
     the accordion open/close logic is in mobileEnhance.js, mobile-only). */
  .sidebar summary.nav-group-title{
    background:var(--c-surface) !important; color:var(--c-ink) !important;
    border:1px solid var(--c-line); border-radius:12px;
    font-size:12px; font-weight:700; letter-spacing:.04em;
    padding:14px; margin:6px 0; min-height:52px;
  }
  .sidebar summary.nav-group-title:active{ background:var(--c-surface-2) !important; }
  .sidebar summary.nav-group-title::after{ color:var(--c-muted); opacity:.7; }
  .sidebar summary.nav-subgroup-title{
    background:var(--c-surface-2) !important; color:var(--c-ink) !important;
    border-radius:10px; font-weight:700;
  }
  /* items -> clean light list rows, tappable */
  .sidebar .nav button, .nav a{
    background:var(--c-surface) !important; color:var(--c-ink) !important;
    border:1px solid var(--c-line); border-radius:12px;
    padding:12px 14px; margin:4px 0; min-height:48px;
    box-shadow:none !important; font-weight:600;
  }
  .sidebar .nav button:hover, .nav a:hover{ background:var(--c-surface-2) !important; transform:none; }
  .sidebar .nav button.active, .nav a.active{
    background:#e8f3fb !important; color:var(--c-primary) !important;
    border-color:#bfe0f5;
  }
}

/* --- Tap feedback: subtle press state on cards/tappables (100-150ms) --- */
@media (max-width: 1180px){
  table.rms-stack tr{ transition:background var(--t-tap) var(--ease), transform var(--t-tap) var(--ease); }
  table.rms-stack tr:active{ background:var(--c-surface-2); }
  .ord-card:active,.ful-oc:active,.msg-row:active{ transform:translateY(1px); }
}

/* --- Skeleton loaders (light placeholder cards, not spinners) --- */
.rms-skeleton{
  border:1px solid var(--c-line); border-radius:var(--radius);
  background:var(--c-surface); padding:var(--sp-2); margin:0 var(--sp-1) var(--sp-1);
}
.rms-skeleton .ln{
  height:12px; border-radius:6px; margin:8px 0;
  background:var(--rms-skel-fill); background-size:400% 100%;
  animation:rms-shimmer var(--t-shimmer) var(--e-in-out) infinite;
}
.rms-skeleton .ln.w40{ width:40%; } .rms-skeleton .ln.w60{ width:60%; } .rms-skeleton .ln.w80{ width:80%; }
/* local reduced-motion guard removed — motion.css covers every animation globally */

/* --- Improved empty/error states (extend Section 11 to more containers) --- */
@media (max-width: 1180px){
  .temu-empty,.tk-empty,.sf-empty,.ebsh-empty,.al-empty,.ev-empty,.rm-empty,.lk-empty{
    text-align:center; padding:var(--sp-4) var(--sp-2);
    color:var(--c-muted); background:var(--c-surface);
    border:1px dashed var(--c-line); border-radius:var(--radius);
  }
  .temu-empty::before,.tk-empty::before,.sf-empty::before,.ebsh-empty::before{
    content:"\1F4E6"; display:block; font-size:26px; opacity:.55; margin-bottom:var(--sp-1);
  }
}

/* --- Card-stack: neutralise any sticky-column styling (e.g. Temu's sticky
   last column + shadow) so cards render cleanly, not as a pinned column. --- */
@media (max-width: 1180px){
  table.rms-stack td,
  table.rms-stack th{ position:static !important; box-shadow:none !important; }
}

/* =====================================================================
   17. HORIZONTAL CONTROL ROWS — never clip at the screen edge (<=1180px).
       Tab / pill / status-chip / action button rows that exceed the viewport
       WRAP onto additional lines so every control stays fully visible and
       tappable, instead of being clipped at the edge (or hidden behind an
       easy-to-miss horizontal scroll). Examples fixed:
         - Order Fulfillment tab pills (.ful-tab-pills) — "Open Packing
           Station" was clipped (no wrap/scroll on this row at all).
         - Warehouse action/sub-tab row (.warehouse-tabs) — "Create
           Warehouse" was half-cut by the Section 14 nowrap+scroll override
           (its own base style already wraps; we restore that at mobile).
         - Channel status-chip rows (.mp-tabs / .seller-tabs) — last chip
           clipped at the banner edge.
       Wrapping is background-independent, so it also works on the coloured
       channel banners. This supersedes the earlier "swipeable nowrap"
       treatment in Sections 12 & 14. Desktop (>1180px): inert.
   ===================================================================== */
@media (max-width: 1180px){
  .ful-tab-pills,
  .warehouse-tabs,
  #warehouse .warehouse-tabs,
  .mp-tabs,
  .seller-tabs,
  .stk-test-bar{
    flex-wrap:wrap !important;
    overflow-x:visible !important;     /* nothing to scroll once it wraps */
    row-gap:var(--sp-1);
  }
  /* each control sizes to its own label and is never shrink-clipped */
  .ful-tab-pills > button,
  .warehouse-tabs button,
  .mp-tabs button,
  .seller-tabs a,
  .stk-test-bar > button{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* =====================================================================
   18. ORDER-CARD CELL LAYOUT — balanced, full-width rich fields (<=1180px).
       The card-stack pattern (Section 12) lays each field out as
       label-left (~40%) / value-right (~60%). That suits short values
       (Qty, Total, Status) but CRAMPS rich, multi-part cells — long product
       names, the image+SKU block, the multi-column date / price cells — into
       a narrow right strip while the left 40% sits empty, so the card looks
       lopsided / "not centred" (and Temu's image+name cell looked broken).
       Fix: rich fields STACK — a small label on top, the value using the
       FULL card width below, left-aligned. Short fields keep the compact
       side-by-side look. Desktop (>1180px): inert.
   ===================================================================== */
@media (max-width: 1180px){
  table.rms-stack td[data-label="Order"],
  table.rms-stack td[data-label="Order date"],
  table.rms-stack td[data-label="Order details"],
  table.rms-stack td[data-label="Item"],
  table.rms-stack td[data-label="Product"],
  table.rms-stack td[data-label="Unit price"],
  .temu-oc-table.rms-stack td[data-label="Proceeds"],
  table.rms-stack td[data-label="Customer option"],
  table.rms-stack td[data-label="Buyer"],
  table.rms-stack td[data-label="Customer"]{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    text-align:left;
    gap:var(--sp-05);
  }
  /* label drops the 40% basis and becomes a quiet caption above the value */
  table.rms-stack td[data-label="Order"]::before,
  table.rms-stack td[data-label="Order date"]::before,
  table.rms-stack td[data-label="Order details"]::before,
  table.rms-stack td[data-label="Item"]::before,
  table.rms-stack td[data-label="Product"]::before,
  table.rms-stack td[data-label="Unit price"]::before,
  .temu-oc-table.rms-stack td[data-label="Proceeds"]::before,
  table.rms-stack td[data-label="Customer option"]::before,
  table.rms-stack td[data-label="Buyer"]::before,
  table.rms-stack td[data-label="Customer"]::before{
    flex:none;
  }
  /* let known multi-column inner blocks use the full card width */
  table.rms-stack td .temu-prod,
  table.rms-stack td .temu-price{ width:100%; }
  /* Item 6: Temu detail Proceeds breakdown — holds even if data-label changes */
  table.rms-stack td.temu-oc-proceeds{ flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; gap:var(--sp-05); }
  /* the product name is ellipsis-truncated for the desktop fixed-width table;
     in a full-width card let it wrap so the whole name is readable */
  table.rms-stack td .temu-prod .nm{ white-space:normal; }
}

/* =====================================================================
   20. KIT ROLLOUT — FIRST BATCH (Dashboard, B&Q, Warehouse, "More").
       Applies the approved component kit by SKINNING the existing mobile
       markup with the kit tokens from mobile-kit.css. The --rk-* tokens
       switch automatically on [data-theme="dark"] (the app's real toggle),
       so every screen here gets LIGHT + DARK for free. Presentation only;
       all rules are inside <=1180px media queries → desktop (>1180px) is
       byte-for-byte unchanged. The only markup change is B&Q's additive
       glance/expand hooks (a hidden toggle cell + data-tier attrs), which
       are neutralised >1180px so the desktop table is untouched.
   ===================================================================== */

/* ---- DASHBOARD: premium hero + stat cards + hub cards ---- */
@media (max-width: 1180px){
  #dashboard .hero-card{
    background:linear-gradient(135deg, var(--rk-accent), var(--rk-accent-2)) !important;
    border:0 !important; color:#fff !important; border-radius:var(--rk-r-lg) !important;
    box-shadow:var(--rk-shadow) !important;
  }
  #dashboard .hero-card h2{ color:#fff !important; }
  #dashboard .hero-card p{ color:rgba(255,255,255,.88) !important; }

  #dashboard .stat,
  #dashboard .card{
    background:var(--rk-surface) !important; border:1px solid var(--rk-line) !important;
    border-radius:var(--rk-r) !important; box-shadow:var(--rk-shadow) !important;
  }
  #dashboard .stat{ padding:var(--rk-s4) !important; }
  #dashboard .stat .num{ color:var(--rk-ink) !important; font-weight:800; letter-spacing:-.02em; }
  #dashboard .stat .label{ color:var(--rk-muted) !important; text-transform:uppercase;
    letter-spacing:.04em; font-size:var(--rk-fs-label); font-weight:700; }
  #dashboard .card h3{ color:var(--rk-ink) !important; }
  #dashboard .muted{ color:var(--rk-muted) !important; }
  /* admin tools read as a clean grouped block with full-width actions */
  #dashboard .admin-reset-panel{ display:flex; flex-direction:column; gap:var(--rk-s2); }
  #dashboard .admin-reset-panel button{ width:100%; min-height:48px; border-radius:var(--rk-r-sm); margin:0; }
}

/* ---- B&Q: premium order cards (kit list-card look) + GLANCE/EXPAND ---- */
@media (max-width: 1180px){
  #bnqOrders .section-head h2{ color:var(--rk-ink) !important; font-size:var(--rk-fs-h1); font-weight:800; }
  #bnqOrders .section-head p{ color:var(--rk-muted) !important; font-size:var(--rk-fs-label); }

  /* (card surface + captions are unified for ALL channels in Section 21) */

  /* GLANCE-FIRST: Ship by + Info are hidden until "More detail" is tapped */
  .bnq-table.rms-stack td[data-tier="more"]{ display:none !important; }
  .bnq-table.rms-stack tr.is-expanded td[data-tier="more"]{ display:flex !important; }
  .bnq-table.rms-stack td.bnq-more-toggle{ justify-content:center; border-bottom:0 !important; padding:var(--rk-s1) 0 0 !important; }
  .bnq-table.rms-stack td.bnq-more-toggle::before{ content:none !important; }
  .bnq-table.rms-stack td.bnq-more-toggle button{
    background:none; border:0; color:var(--rk-accent); font-weight:700; font-size:13px;
    min-height:auto; padding:6px 12px; cursor:pointer;
  }
}
/* desktop: the glance/expand toggle cell does not exist — keep the full table */
@media (min-width: 1181px){
  .bnq-table td.bnq-more-toggle{ display:none; }
}

/* ---- WAREHOUSE: kit chips + clean cards (map widget left intact) ---- */
@media (max-width: 1180px){
  #warehouse .warehouse-tabs button{
    background:var(--rk-surface) !important; border:1px solid var(--rk-border) !important;
    color:var(--rk-ink-2) !important; box-shadow:none !important;
    border-radius:var(--rk-r-pill) !important; min-height:40px; padding:0 16px !important;
    font-weight:700; font-size:var(--rk-fs-label);
  }
  #warehouse .warehouse-tabs button.active{
    background:var(--rk-accent) !important; border-color:var(--rk-accent) !important; color:var(--rk-accent-ink) !important;
  }
  #warehouse .wh-site-card,
  #warehouse .warehouse-side-panel,
  #warehouse .wh-putaway-widget,
  #warehouse .temp-box{
    background:var(--rk-surface) !important; border:1px solid var(--rk-line) !important;
    border-radius:var(--rk-r) !important; box-shadow:var(--rk-shadow) !important;
  }
  #warehouse .wh-pill{
    background:var(--rk-surface) !important; border:1px solid var(--rk-border) !important;
    color:var(--rk-ink-2) !important; border-radius:var(--rk-r-pill) !important; min-height:38px;
  }
  #warehouse .wh-pill.active{ background:var(--rk-accent) !important; border-color:var(--rk-accent) !important; color:var(--rk-accent-ink) !important; }
}

/* ---- "MORE" DRAWER: kit surface + accordion rows (light + dark) ----
   Upgrades Section 16's light-only treatment to dark-aware kit tokens so the
   drawer matches the kit in BOTH themes. Desktop sidebar (>1180px) untouched. */
@media (max-width: 1180px){
  .sidebar{
    background:var(--rk-surface) !important; color:var(--rk-ink) !important;
    box-shadow:var(--rk-shadow-lg) !important; border-right:1px solid var(--rk-line);
  }
  .sidebar .logo{ color:var(--rk-ink) !important; }
  .sidebar .sublogo{ color:var(--rk-muted) !important; }
  .sidebar summary.nav-group-title{
    background:var(--rk-surface) !important; color:var(--rk-ink) !important;
    border:1px solid var(--rk-line) !important; border-radius:12px !important;
    min-height:52px;
  }
  .sidebar summary.nav-group-title:active{ background:var(--rk-surface-2) !important; }
  .sidebar summary.nav-subgroup-title{
    background:var(--rk-surface-2) !important; color:var(--rk-ink) !important; border-radius:10px;
  }
  .sidebar .nav button, .nav a{
    background:var(--rk-surface) !important; color:var(--rk-ink) !important;
    border:1px solid var(--rk-line) !important; border-radius:12px !important; box-shadow:none !important;
  }
  .sidebar .nav button:hover, .nav a:hover{ background:var(--rk-surface-2) !important; }
  .sidebar .nav button.active, .nav a.active{
    background:var(--rk-accent-weak) !important; color:var(--rk-accent-weak-ink) !important;
    border-color:var(--rk-accent) !important;
  }
}

/* =====================================================================
   21. CHANNEL ORDER CARDS — unified premium look (all channels, <=1180px).
       B&Q / Temu / TikTok / eBay / Shopify / Seller order tables (all
       card-stacked) get ONE consistent kit card: soft surface, kit radius +
       shadow, generous spacing, quiet uppercase field captions. Channel cards
       stay LIGHT in both themes on purpose — they carry channel brand colour
       and the module text is tuned for a light surface, so a light card keeps
       everything readable (it sits on the dark page in dark mode, like
       Linnworks). Native app screens (Dashboard/Warehouse/forms) remain truly
       dark via dark.css + Section 20. Desktop (>1180px): inert.
   ===================================================================== */
@media (max-width: 1180px){
  .bnq-table.rms-stack tr,
  .temu-table.rms-stack tr,
  .tk-table.rms-stack tr,
  .sf-table.rms-stack tr,
  .ebsh-table.rms-stack tr,
  .seller-order-table.rms-stack tr{
    background:#ffffff !important;
    border:1px solid #e6edf4 !important;
    border-radius:var(--rk-r) !important;
    box-shadow:var(--rk-shadow) !important;
    padding:var(--rk-s4) !important;
    margin:0 0 var(--rk-s3) !important;
  }
  .bnq-table.rms-stack td,
  .temu-table.rms-stack td,
  .tk-table.rms-stack td,
  .sf-table.rms-stack td,
  .ebsh-table.rms-stack td,
  .seller-order-table.rms-stack td{
    border-bottom-color:#eef2f7 !important;
  }
  /* quiet, consistent field captions */
  .bnq-table.rms-stack td[data-label]::before,
  .temu-table.rms-stack td[data-label]::before,
  .tk-table.rms-stack td[data-label]::before,
  .sf-table.rms-stack td[data-label]::before,
  .ebsh-table.rms-stack td[data-label]::before,
  .seller-order-table.rms-stack td[data-label]::before{
    color:#6b7a90 !important; font-weight:700; letter-spacing:.03em;
  }
}

/* =====================================================================
   22. DUAL-RENDER: real kit cards on mobile, original table on desktop.
       SHARED mechanism for every list screen. A module renders BOTH its
       existing table (add class .rk-deskonly) and a kit-card list
       (<div class="rk-cardlist">…</div>). CSS shows exactly ONE per
       breakpoint: desktop keeps its table byte-for-byte; mobile (<=1180px)
       gets the approved premium cards. Both reuse the same handlers/endpoints.
       Kit-card markup is theme-aware, so mobile renders in light AND true-dark.
   ===================================================================== */
.rk-cardlist{ display:none; }                      /* desktop: cards hidden */
@media (max-width: 1180px){
  .rk-deskonly{ display:none !important; }          /* mobile: hide the table */
  .rk-cardlist{ display:block; }                    /* mobile: show kit cards */

  /* shared card "More detail" expander tweaks (used by all channels) */
  .rk-cardlist .rk-card-more{ box-shadow:none; border:0; background:transparent; }
  .rk-cardlist .rk-card-more > .rk-acc-sum{ padding:10px 0; min-height:auto; }
  .rk-cardlist .rk-more-lbl{ font-size:13px; font-weight:700; color:var(--rk-accent); }
  /* the expander renders as a bordered box (--rk-cardline); pad its content so
     the OFFER SKU / values don't hug the border (was padding:0). All channels. */
  .rk-cardlist .rk-card-more .rk-acc-body{ padding:var(--rk-s1) var(--rk-s4) var(--rk-s4); }
}

/* =====================================================================
   23. DASHBOARD — quick-action tiles (mobile-only additive component).
       The hero/stat cards already looked like the kit (they were always blue
       gradients), so the dashboard needed a NEW component to feel app-like:
       a 2x2 quick-action tile grid. Additive markup in index.html, shown only
       <=1180px → desktop (>1180px) byte-for-byte unchanged. Tiles reuse the
       existing showTab()/loaders (no new logic).
   ===================================================================== */
/* Quick-actions tiles removed 2026-07-16 (duplicate of the bottom tab bar) —
   the .rk-quick markup is gone from index.html. .rk-tile / .rk-tiles styles are
   NOT dead: mobileEnhance renders the "More" drill-down nav with those classes. */
@media (max-width: 1180px){
  #dashboard .rk-tile{ margin:0; }                 /* neutralise global button margin */
}

/* =====================================================================
   24. KIT EVERYWHERE — premium card-stack + grouped forms + page polish.
       Applies the kit look to EVERY remaining mobile screen:
        - card-stacked tables (.rms-stack, incl. the ones auto-converted by
          mobileEnhance.js) render as premium, theme-aware kit cards;
        - create/edit forms (.form-grid) become a grouped kit card with full-
          width inputs and a clear primary action;
        - section headers, page surface and toolbars get the kit treatment.
       All <=1180px and token-driven, so it works in LIGHT + true DARK and
       desktop (>1180px) stays byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* ---- page surface (dark.css still wins in dark mode) ---- */
  body{ background:var(--rk-bg); }

  /* ---- section headers: big, confident, kit type ---- */
  .section-head h2,.cat-page-title{
    font-size:var(--rk-fs-h1) !important; font-weight:800; letter-spacing:-.01em; color:var(--rk-ink);
  }
  .section-head p,.cat-page-sub{ color:var(--rk-muted); font-size:var(--rk-fs-label); }

  /* ---- every card-stacked table = premium kit card (theme-aware) ---- */
  table.rms-stack tr{
    background:var(--rk-surface) !important; border:1px solid var(--rk-line) !important;
    border-radius:var(--rk-r) !important; box-shadow:var(--rk-shadow) !important;
    padding:var(--rk-s4) !important; margin:0 0 var(--rk-s3) !important;
  }
  table.rms-stack td{
    border-bottom:1px solid var(--rk-line) !important; color:var(--rk-ink) !important;
    padding:var(--rk-s2) 0 !important;
  }
  table.rms-stack td:last-child{ border-bottom:0 !important; }
  table.rms-stack td[data-label]::before{
    color:var(--rk-muted) !important; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; font-size:var(--rk-fs-label);
  }
  /* first data cell reads as the card title */
  table.rms-stack td[data-label]:first-child,
  table.rms-stack td[data-label]:nth-child(2){ font-weight:700; }
  /* a checkbox-only cell shouldn't show an empty caption box */
  table.rms-stack td:not([data-label]){ justify-content:flex-end; padding-top:0 !important; }

  /* ---- create/edit forms -> grouped kit card + full-width inputs ---- */
  .form-grid{
    background:var(--rk-surface); border:1px solid var(--rk-line);
    border-radius:var(--rk-r); box-shadow:var(--rk-shadow);
    padding:var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s3);
    margin-bottom:var(--rk-s4);
  }
  .form-grid > input,.form-grid > select,.form-grid > textarea{
    width:100%; min-height:48px; border-radius:var(--rk-r-sm);
    border:1px solid var(--rk-border); background:var(--rk-surface); color:var(--rk-ink);
  }
  .form-grid > textarea{ min-height:96px; }
  .form-grid > button{ width:100%; min-height:50px; border-radius:var(--rk-r-sm); margin:0; font-weight:700; }
  .form-grid .permission-box{ width:100%; }

  /* ---- toolbars (search/filter rows): clean wrap, comfortable controls ---- */
  .toolbar{ display:flex; flex-wrap:wrap; gap:var(--rk-s2); align-items:center; }
  .toolbar > input,.toolbar > select{ flex:1 1 150px; min-width:0; min-height:46px; border-radius:var(--rk-r-sm); }
  .toolbar > button{ min-height:46px; border-radius:var(--rk-r-sm); }
}

/* =====================================================================
   25. DARK-MODE BRIDGE. Two token systems exist: the kit --rk-* (already
       theme-aware) and the older --c-* (Section 8, defined LIGHT-only). In
       dark mode the --c-* elements stayed light, so their text was low/zero
       contrast ("can't see the words"). Redefining --c-* under
       [data-theme="dark"] makes ALL of Sections 8–16 adapt to dark
       automatically. Values mirror the kit dark palette. Desktop is only
       affected when dark is on (which is itself a user choice, not a layout
       change), and light mode is untouched.
   ===================================================================== */
html[data-theme="dark"]{
  --c-bg:#0b1220; --c-surface:#162133; --c-surface-2:#1d2941; --c-line:#243049;
  --c-ink:#e6edf6; --c-ink-2:#c2cede; --c-muted:#9fb0c4;
  --c-primary:#38a3e0; --c-primary-d:#7cc4f2; --c-accent:#7cc4f2;
}
/* belt-and-braces: any card-stacked cell text stays readable on dark cards */
@media (max-width: 1180px){
  html[data-theme="dark"] table.rms-stack tr{ background:var(--rk-surface) !important; }
  html[data-theme="dark"] table.rms-stack td{ background:transparent !important; color:var(--rk-ink) !important; }
  html[data-theme="dark"] details.rms-filters{ background:var(--rk-surface); border-color:var(--rk-line); color:var(--rk-ink); }
}

/* =====================================================================
   26. "MORE" DRAWER as a DRILL-DOWN launcher (mobile <=1180px).
       Replaces the in-drawer accordion with a two-level tile launcher built
       by mobileEnhance.js from the existing nav (same showTab handlers):
       Level 0 = section tiles; tap one → section title on top + module tiles
       + Back. Desktop sidebar (>1180px) keeps its accordion untouched.
   ===================================================================== */
.rk-nav{ display:none; }
@media (max-width: 1180px){
  /* the "More" drawer becomes a FULL-SCREEN launcher */
  .sidebar{
    width:100vw !important; max-width:100vw !important;
    padding:18px 16px calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar .nav{ display:none !important; }        /* hide the desktop accordion */
  .sidebar .logo,.sidebar .sublogo{ display:none !important; } /* header replaces them */
  .sidebar .rk-nav{ display:block; }

  /* header: "All Sections" / section name + back */
  .rk-nav-head{ display:flex; align-items:center; gap:12px; padding:6px 2px 18px; }
  .rk-nav-back{
    width:44px; height:44px; flex:0 0 auto; margin:0; cursor:pointer;
    border-radius:12px; background:var(--rk-surface-2); border:1px solid var(--rk-line);
    color:var(--rk-ink); font-size:24px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .rk-nav-back:active{ background:var(--rk-line); }
  .rk-nav-title{ font-size:24px; font-weight:800; color:var(--rk-ink); letter-spacing:-.02em; }

  /* tiles reuse the kit .rk-tile look (identical to the Dashboard quick actions) */
  .rk-nav .rk-tiles{ gap:14px; }
  .rk-nav .rk-tile{ min-height:120px; }
  /* keep the section logos tidy inside the icon square (were rendering large) */
  .rk-nav .rk-tile-ico{ width:42px; height:42px; }
  .rk-nav .rk-tile-ico img{ width:22px; height:22px; object-fit:contain; }
}

/* =====================================================================
   27. WAREHOUSE — de-cramp the controls (mobile <=1180px).
       The designer head (warehouse picker / search / Scan / Add Rack / Add
       Floor / Create) packed its controls tightly. Give it the grouped-card
       treatment: full-width picker + search, comfortable 2-up action buttons,
       and real vertical rhythm between the control blocks. Presentation only;
       desktop (>1180px) untouched.
   ===================================================================== */
@media (max-width: 1180px){
  #warehouse .warehouse-designer-head{
    padding:var(--rk-s3) !important; gap:10px !important; row-gap:10px !important;
    border-radius:var(--rk-r) !important; margin-bottom:var(--rk-s4) !important;
    align-items:center !important;
  }
  /* "Warehouse [picker]" on one compact row */
  #warehouse .warehouse-designer-head label{
    width:100%; display:flex; align-items:center; gap:8px; font-weight:700;
  }
  #warehouse .warehouse-designer-head label select{ flex:1 1 auto; }
  /* fixed, normal control height + a visible kit border (search had none) */
  #warehouse .warehouse-designer-head select,
  #warehouse .warehouse-designer-head input{
    height:44px !important; min-height:44px !important; min-width:0 !important;
    border:1px solid var(--rk-border) !important; border-radius:var(--rk-r-sm) !important;
    background:var(--rk-surface) !important; color:var(--rk-ink) !important;
  }
  #warehouse .warehouse-designer-head input{ flex:1 1 100% !important; }
  /* small + UNIFORM action buttons: all equal width, 2-up grid */
  #warehouse .warehouse-designer-head button{
    flex:1 1 calc(50% - 6px) !important; height:38px !important; min-height:38px !important;
    padding:0 12px !important; font-size:13px !important; margin:0 !important;
  }
  /* breathing room between stacked control blocks */
  #warehouse .wh-mapbar{ gap:var(--rk-s3) !important; margin:0 0 var(--rk-s4) !important; }
  #warehouse .wh-mapbar-right{ gap:var(--rk-s2) !important; }
  #warehouse .wh-filter-pills{ gap:var(--rk-s2) !important; margin-bottom:var(--rk-s3); }
  #warehouse .warehouse-pane{ display:flex; flex-direction:column; gap:var(--rk-s3); }
  #warehouse .wh-edit-palette{ order:-1; }
  /* a taller map so blocks aren't crammed into a short canvas */
  #warehouse .warehouse-canvas,#warehouse #warehouseMapCanvas{ min-height:64vh !important; }
}

/* =====================================================================
   28. CHANNEL BANNER / IMAGE SIZE GUARD (mobile <=1180px).
       Defensive: a cached older polish.css can be missing the channel-banner
       logo sizing, so the logo renders at full natural size and fills the
       screen (the "glitch when I open platform orders"). Pin the sizes here
       in the always-fresh stylesheet so banner logos & channel images stay
       small no matter what. Desktop (>1180px) unaffected.
   ===================================================================== */
@media (max-width: 1180px){
  .mp-banner .mp-logo,.mp-logo{
    width:44px !important; height:44px !important; object-fit:contain !important; flex:0 0 auto !important;
  }
  .mp-banner img,.sf-banner .logo img,.ebsh-head img,.ebsh-banner img,
  .seller-amz-head img,.temu-logo img{
    max-width:48px !important; max-height:48px !important; object-fit:contain;
  }
  /* keep card thumbnails clipped to their box (belt-and-braces) */
  .rk-thumb{ overflow:hidden; }
  .rk-thumb img{ max-width:100%; max-height:100%; }
}

/* =====================================================================
   29. CLEARER CARD BORDERS + eBay status sidebar collapse (mobile <=1180px).
       (a) Every kit card / card-stacked row gets a more visible separating
           border (the default hairline was too faint to tell cards apart).
           A dedicated token keeps light + dark both legible.
       (b) The eBay status sidebar (All orders / Awaiting … / Returns …) now
           collapses into an "Order status" disclosure by default on mobile;
           its desktop "Collapse" toggle is hidden. Desktop is unchanged.
   ===================================================================== */
:root{ --rk-cardline:#c4d3e4; }
html[data-theme="dark"]{ --rk-cardline:#3a4965; }

@media (max-width: 1180px){
  /* (a) clearer borders so cards visibly separate from each other + the page */
  .rk-card,.rk-tile,.rk-stat,.rk-group,.rk-acc,.rk-nav-tile,.rk-empty,
  .rk-skeleton,details.rms-filters,
  table.rms-stack tr{
    border:1px solid var(--rk-cardline) !important;
  }
}

/* =====================================================================
   30. CARD-STACK FIELD ALIGNMENT — tidy, left-aligned values (<=1180px).
       The default card-stack pushed values to the far-right edge, so long
       values (participants, topics) wrapped ragged and looked unbalanced.
       Align values into a consistent column right after the label and
       left-justify them, so every field reads as a clean "Label  value"
       row. Applies to the auto-converted record tables (Messages, Suppliers,
       POs, etc.) and PO items. Desktop (>1180px) unaffected.
   ===================================================================== */
@media (max-width: 1180px){
  table.rms-stack td{
    justify-content:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
    gap:10px;
  }
  /* keep a consistent label column so the values line up down the card */
  table.rms-stack td[data-label]::before{
    flex:0 0 38% !important;
  }
  /* short, full-width rows (action/toggle cells) span the whole width */
  table.rms-stack td[data-label="Action"],
  table.rms-stack td[data-label="Actions"]{ flex-direction:column; }
}

/* =====================================================================
   31. THEADLESS tables -> stacked cards (mobile <=1180px).
       mobileEnhance.js tags tables with no <thead> as .rms-stack.rk-nohead
       (the kit card row styling already applies). With no column headers
       there are no per-cell labels, so each cell becomes a full-width line
       (first cell emphasised as the row's title). Guarantees these tables
       never scroll sideways inside detail/modal views. Desktop unaffected.
   ===================================================================== */
@media (max-width: 1180px){
  table.rms-stack.rk-nohead{ display:block; width:100%; min-width:0 !important; }
  table.rms-stack.rk-nohead tbody{ display:block; }
  table.rms-stack.rk-nohead td{
    display:block !important; width:auto !important;
    text-align:left !important; padding:3px 0 !important; border-bottom:0 !important;
  }
  table.rms-stack.rk-nohead td::before{ content:none !important; }
  table.rms-stack.rk-nohead td:first-child{ font-weight:700; color:var(--rk-ink); }
  table.rms-stack.rk-nohead td:empty{ display:none !important; }

  /* Some of these tables aren't truly headerless — they keep <th> cells inside
     <tbody> with no <thead> wrapper (Amazon Vendor POs does). Such a row is
     missed by BOTH the thead{display:none} rule (no thead to match) and every
     rule above (they all target td), so it rendered at full table width and
     dragged the card stack out to ~926px behind a sideways scrollbar, with the
     header visibly clipped. A header row means nothing in a card stack — the
     cells carry their own labels — so drop the whole ROW.
     Hiding just the th cells is not enough: the row survives as an empty card,
     and cardifyTables has already appended its "Show more" toggle to it, so you
     get a blank box with a pointless button. */
  table.rms-stack.rk-nohead tr:has(> th){ display:none !important; }
  table.rms-stack.rk-nohead th{ display:none !important; }   /* no :has() support */
}

/* =====================================================================
   32. DETAIL VIEWS -> kit accordion + single column (mobile <=1180px).
       (a) Channel order detail (seller/temu/tiktok/shopify/ebay/B&Q) lays out
           single-column, each section card a clean light card with a clearer
           border; the JS in mobileEnhance.js makes each card collapsible
           (first card open = glance). The detail sheet stays LIGHT in both
           themes because the channel detail text is tuned for a light surface
           (forcing dark would make it unreadable) — same call as the channel
           list cards. App-native detail (PO/stock/containers .card/.temp-box)
           keeps its dark-aware treatment.
       (b) Accordion collapse styling: heading toggles; content hides only
           while NOT open (so the original display is preserved when open).
       Desktop (>1180px) is untouched (everything is <=1180px + JS isMobile).
   ===================================================================== */
@media (max-width: 1180px){
  /* single-column detail layouts */
  .seller-detail-grid,.temu-detail-wrap,.temu-summary-row,.tk-dgrid,
  .sf-detail-wrap,.sf-summary-row,.ebsh-d-grid,.bnq-detail-grid,.bnq-summary{
    grid-template-columns:1fr !important; gap:var(--rk-s3) !important;
  }
  /* channel detail page surface adapts to the theme (light page / dark page) */
  .seller-detail-page,.temu-detail,.tk-detail,.sf-detail,.ebsh-detail,.bnq-detail{
    background:var(--rk-bg) !important;
  }
  /* section cards: theme-adaptive surface + readable text + clearer border.
     SCOPED to detail containers so list cards (which may share a class, e.g.
     .bnq-card) are never forced light — that was the dark-mode bug. */
  .seller-detail-page .seller-card,.temu-detail .temu-dcard,.sf-detail .sf-dcard,
  .bnq-detail .bnq-card,.tk-detail .tk-card,.ebsh-detail .ebsh-card{
    background:var(--rk-surface) !important; color:var(--rk-ink) !important;
    border:1px solid var(--rk-cardline) !important; border-radius:var(--rk-r) !important;
    box-shadow:var(--rk-shadow) !important; margin:0 0 var(--rk-s3) !important;
  }
  /* DARK: flip each channel's OWN design tokens (used by its module text) so
     the detail sheet becomes true-dark + readable, matching the list cards.
     Headings that hardcode a token also forced light. (<=1180px only.) */
  html[data-theme="dark"] .bnq-detail{ --bnq-ink:#e8eef6; --bnq-muted:#9fb0c4; --bnq-line:#2a3650; }
  html[data-theme="dark"] .temu-detail{ --temu-ink:#e8eef6; --temu-muted:#9fb0c4; --temu-line:#2a3650; --temu-bg:#0b1220; }
  html[data-theme="dark"] .tk-detail{ --tk-ink:#e8eef6; --tk-muted:#9fb0c4; --tk-line:#2a3650; --tk-bg:#0b1220; }
  html[data-theme="dark"] .sf-detail{ --sf-ink:#e8eef6; --sf-muted:#9fb0c4; --sf-line:#2a3650; --sf-bg:#162133; }
  html[data-theme="dark"] .ebsh-detail{ --eb-ink:#e8eef6; --eb-muted:#9fb0c4; --eb-line:#2a3650; }
  html[data-theme="dark"] .seller-detail-page,
  html[data-theme="dark"] .seller-detail-page h2,
  html[data-theme="dark"] .seller-detail-page h3{ color:var(--rk-ink) !important; }
  html[data-theme="dark"] .temu-dcard h3,html[data-theme="dark"] .sf-dcard h3,
  html[data-theme="dark"] .bnq-card h3,html[data-theme="dark"] .bnq-card h4,
  html[data-theme="dark"] .tk-card h3,html[data-theme="dark"] .ebsh-card h3,
  html[data-theme="dark"] .temu-detail-title,html[data-theme="dark"] .temu-detail-title h2{ color:var(--rk-ink) !important; }

  /* (b) accordion mechanics — heading is the toggle, content collapses */
  .rk-acc-head{ cursor:pointer; display:flex !important; align-items:center;
    justify-content:space-between; gap:10px; }
  .rk-acc-head::after{ content:"\25BE"; flex:0 0 auto; color:var(--rk-muted);
    font-size:13px; transition:transform var(--rk-t-ui) var(--rk-ease); }
  .rk-acc-card.rk-open > .rk-acc-head::after{ transform:rotate(180deg); }
  /* hide content ONLY while collapsed, so the open state keeps original display */
  .rk-acc-card:not(.rk-open) > :not(.rk-acc-head){ display:none !important; }

  /* B&Q detail item rows (Item 1): fixed 72/120/30px tracks starved the 1fr
     name column to one word per line on phones. Reflow: thumb + full-width
     name, quantity drops under the name, decorative chevron hidden. */
  .bnq-detail .bnq-item-row{
    grid-template-columns:56px minmax(0,1fr) !important;
    row-gap:4px; align-items:start;
  }
  .bnq-detail .bnq-item-row > div:nth-child(2){ min-width:0; overflow-wrap:anywhere; }
  .bnq-detail .bnq-item-row > div:nth-child(3){ grid-column:2; }
  .bnq-detail .bnq-item-row > div:nth-child(4){ display:none; } /* "›" decorative, no handler */
  .bnq-detail .bnq-detail-img{ width:54px !important; height:54px !important; }
}

/* =====================================================================
   33. TEMU "Action needed" compact + bulk actions collapsible (<=1180px).
       The action tiles were tall (lots of scrolling) and the bulk buttons
       took a big block. Make the tiles small-but-not-cramped (2-up, tighter)
       and collapse the bulk buttons into a "Bulk actions" disclosure.
       Desktop (>1180px): the disclosure neutralises via display:contents.
   ===================================================================== */
@media (max-width: 1180px){
  .temu-cards-wrap{ margin-bottom:var(--rk-s3); }
  .temu-cards-title{ font-size:13px; margin-bottom:var(--rk-s2); }
  .temu-cards{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:var(--rk-s2) !important; }
  .temu-card-need{ padding:10px 12px !important; min-height:0 !important; }
  .temu-card-need .lbl{ font-size:12px; line-height:1.3; }
  .temu-card-need .val{ font-size:18px; }
  /* 33b (Item 2). Action-needed / TikTok stats collapsible via the existing
     rk-acc-card enhancer classes (render-time classes, inert >1180px) */
  .temu-cards-wrap.rk-acc-card > .temu-cards-title{ min-height:44px; margin-bottom:0; display:flex; align-items:center; }
  .temu-cards-wrap.rk-acc-card.rk-open > .temu-cards-title{ margin-bottom:var(--rk-s2); }
  /* phantom horizontal scrollbar: tiles kept desktop min-width/overflow */
  .temu-cards{ overflow-x:visible !important; padding-bottom:0 !important; }
  .temu-card-need{ min-width:0 !important; }
  /* TikTok stats disclosure head (visible only <=1180px via .rk-acc-head) */
  .tk-stats-wrap{ margin-bottom:var(--rk-s3); }
  .tk-stats-wrap > .rk-acc-head{ min-height:44px; font-size:13px; font-weight:800; color:var(--tk-ink); }
  .tk-stats-wrap.rk-open > .tk-stats{ margin-top:var(--rk-s2); margin-bottom:0; }
  /* bulk bar inside the disclosure: full-width controls, comfortable taps */
  .rk-bulk-disc .temu-bulkbar{ display:flex; flex-wrap:wrap; gap:var(--rk-s2); border:0 !important; padding:0 !important; margin:0 !important; }
  .rk-bulk-disc .temu-bulkbar .sel{ width:100%; }
  .rk-bulk-disc .temu-bulkbar button{ flex:1 1 calc(50% - var(--rk-s2)); min-height:44px; }
}

/* =====================================================================
   34. PO "Add items from Balance Goods Excel" panel — dark-mode readability.
       polish.css forces .import-panel to a LIGHT gradient + light-grey text
       with !important and no dark override, so in dark mode the heading and
       hint text wash out / disappear. Give it a proper dark surface with
       readable text in dark mode (higher specificity + !important beats the
       polish rule). Light mode unchanged; desktop unchanged (<=1180px).
   ===================================================================== */
@media (max-width: 1180px){
  html[data-theme="dark"] .import-panel,
  html[data-theme="dark"] .po-import-panel{
    background:var(--rk-surface) !important; border:1px solid var(--rk-border) !important;
    color:var(--rk-ink) !important;
  }
  html[data-theme="dark"] .import-panel b,
  html[data-theme="dark"] .po-import-panel b{ color:#7dd3fc !important; }
  html[data-theme="dark"] .import-panel .muted,
  html[data-theme="dark"] .po-import-panel .muted{ color:var(--rk-muted) !important; }
}

/* =====================================================================
   35. GLANCE-FIRST for auto-converted carded tables (mobile <=1180px).
       mobileEnhance.js keeps the 3-5 key columns visible and tags the rest
       .rk-more-cell + appends a "Show more/less" toggle (.rk-mt). Hidden cells
       reveal when the row gets .rk-row-open. Interactive cells (buttons/inputs)
       and totals/colspan rows are never hidden. Desktop: the injected toggle
       cell only exists if mobile ran, and is hidden >1180px, so desktop is
       byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* hide "more" cells until the card is expanded */
  table.rms-stack tr:not(.rk-row-open) td.rk-more-cell{ display:none !important; }
  /* the generated Show more / Show less toggle (full-width row in the card) */
  table.rms-stack td.rk-mt-cell{
    display:block !important; text-align:center !important;
    border-bottom:0 !important; padding:6px 0 0 !important;
  }
  table.rms-stack td.rk-mt-cell::before{ content:none !important; }
  .rk-mt{
    background:none; border:0; color:var(--rk-accent); cursor:pointer;
    font-weight:700; font-size:13px; min-height:auto; padding:6px 12px; margin:0;
  }
  .rk-mt:active{ opacity:.7; }
}
/* desktop: the injected toggle cell (only present if mobile ran) never shows */
@media (min-width: 1181px){ td.rk-mt-cell{ display:none !important; } }

/* =====================================================================
   36. FAB placement (mobile <=1180px). mobileEnhance.js creates ONE FAB
       (.rk-fab.rk-fab-fixed) lazily, only on mobile and only on a screen with
       a primary "add" action, then sets display:flex. Position it bottom-right
       clear of the bottom tab bar. Desktop never creates it (JS isMobile gate);
       this also hard-hides it >1180px as belt-and-braces.
   ===================================================================== */
.rk-fab-fixed{
  position:fixed; right:16px; z-index:1399;
  bottom:calc(66px + env(safe-area-inset-bottom));
  display:none;            /* JS sets display:flex on the relevant screen */
}
@media (min-width: 1181px){ .rk-fab-fixed{ display:none !important; } }

/* =====================================================================
   37. MOBILE DASHBOARD HOME (<=1180px). An app-like home: hero, per-user
       "Recently opened" row, and a stat-tile grid that MIRRORS the app's
       existing stat numbers — on top of the existing quick-action tiles. The
       old minimal desktop pieces (brand logo, hero-card, stats-grid) are
       hidden on mobile because the home block replaces them. Desktop (>1180px):
       rk-home is display:none and the desktop dashboard is byte-for-byte as
       before.
   ===================================================================== */
.rk-home{ display:none; }
@media (max-width: 1180px){
  #dashboard .rk-home{ display:block; margin-bottom:var(--rk-s4); }
  #dashboard .repark-brand,
  #dashboard .hero-card,
  #dashboard .stats-grid{ display:none !important; }   /* replaced by rk-home */

  .rk-home-hero{ margin-bottom:var(--rk-s5); }
  .rk-home-title{ font-size:var(--rk-fs-display); font-weight:800; letter-spacing:-.02em;
    line-height:1.1; margin:2px 0 4px; color:var(--rk-ink); }
  .rk-home-sub{ margin:0; color:var(--rk-muted); font-size:var(--rk-fs-body); }
  .rk-home .rk-label{ margin:0 0 var(--rk-s3); }

  /* "Recently opened" — horizontal row that scrolls within its own box only */
  .rk-home-recents{ margin-bottom:var(--rk-s5); }
  .rk-recent-row{ display:flex; gap:var(--rk-s2); overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; scrollbar-width:none; }
  .rk-recent-row::-webkit-scrollbar{ height:0; }
  .rk-recent-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
    min-height:44px; padding:0 15px; border-radius:var(--rk-r-pill); margin:0; cursor:pointer;
    background:var(--rk-surface); border:1px solid var(--rk-cardline); color:var(--rk-ink);
    font-weight:600; font-size:13px; white-space:nowrap; box-shadow:var(--rk-shadow);
    transition:transform var(--rk-t-tap) var(--rk-ease); }
  .rk-recent-chip:active{ transform:translateY(1px); }
  .rk-recent-chip img{ width:18px; height:18px; object-fit:contain; border-radius:4px; }

  /* stat tiles: icon + big number + label (kit .rk-stats/.rk-stat) */
  .rk-home-stats{ margin-bottom:var(--rk-s5); }
  .rk-home-stats .rk-stat{ gap:var(--rk-s1); }
  .rk-stat-ico{ font-size:22px; line-height:1; display:inline-flex; color:var(--rk-muted); }
  .rk-stat-ico svg{ width:22px; height:22px; }

  /* ---- Warehouse "Sections" disclosure: list icon + highlighted current
     section; the sub-tab pills live inside and collapse by default ---- */
  details.wh-sections > summary::before{ content:"\2261" !important; }  /* ≡ list, not the gear */
  details.wh-sections .wh-sec-label{ font-weight:800; color:var(--rk-accent); }
  details.wh-sections .warehouse-tabs{ width:100%; }
}

/* =====================================================================
   38. DASHBOARD "Today's orders" hero + declutter (mobile <=1180px).
       A focal progress card (fulfilled / total today, from the EXISTING
       fulfilment counts) gives the home a clear hero; the stat tiles become
       secondary, Admin tools collapse, and the placeholder chart is hidden —
       so the screen reads with hierarchy instead of a grid of equal blocks.
       Desktop (>1180px): the hero is display:none, the admin disclosure is
       display:contents (card shows as before), and the chart-hide is <=1180 —
       so the desktop dashboard is byte-for-byte unchanged.
   ===================================================================== */
.rk-today{ display:none; }
.rk-mini-collapse{ display:block; }
@media (min-width: 1181px){
  .rk-mini-collapse{ display:contents; }        /* admin card shows exactly as before */
  .rk-mini-collapse > summary{ display:none; }
}
@media (max-width: 1180px){
  /* ---- the "Today's orders" hero progress card ---- */
  #dashboard .rk-today{ display:block; color:#fff; border-radius:var(--rk-r-lg);
    padding:var(--rk-s5); margin-bottom:var(--rk-s5); box-shadow:var(--rk-shadow);
    background:linear-gradient(135deg, var(--rk-accent), var(--rk-accent-2)); }
  .rk-today-top{ display:flex; align-items:center; justify-content:space-between; }
  .rk-today-label{ font-size:var(--rk-fs-label); font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
  .rk-today-pct{ font-size:var(--rk-fs-label); font-weight:800; opacity:.9; }
  .rk-today-fig{ display:flex; align-items:baseline; gap:6px; margin:6px 0 12px; }
  .rk-today-fig b{ font-size:clamp(30px,9vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1; }
  .rk-today-fig span{ font-size:18px; opacity:.85; }
  .rk-today-unit{ font-size:13px !important; }
  .rk-today-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; }
  .rk-today-bar > i{ display:block; height:100%; width:0; border-radius:999px; background:#fff;
    transition:width 700ms var(--rk-ease); }
  .rk-today-sub{ display:flex; gap:18px; margin-top:12px; font-size:var(--rk-fs-label); opacity:.95; }
  .rk-today-sub b{ font-weight:800; }
  .rk-today-empty{ margin-top:8px; font-size:var(--rk-fs-body); font-weight:600; opacity:.96; }
  /* empty state: figures/bar/sub hidden, message shown (JS toggles .is-empty) */
  .rk-today.is-empty .rk-today-fig,
  .rk-today.is-empty .rk-today-bar,
  .rk-today.is-empty .rk-today-sub,
  .rk-today.is-empty .rk-today-pct{ display:none; }

  /* ---- stat tiles become SECONDARY (smaller, tighter) ---- */
  .rk-home-stats .rk-stat{ padding:var(--rk-s3); }
  .rk-home-stats .rk-stat .num{ font-size:clamp(18px,5vw,22px); }
  .rk-home-stats .rk-stat-ico{ font-size:18px; }
  .rk-home-stats .rk-stat-ico svg{ width:18px; height:18px; }

  /* ---- Admin tools disclosure ---- */
  .rk-mini-collapse{ margin-bottom:var(--rk-s3); }
  .rk-mini-collapse > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
    min-height:48px; padding:12px 14px; font-weight:700; font-size:var(--rk-fs-body); color:var(--rk-ink);
    background:var(--rk-surface); border:1px solid var(--rk-cardline); border-radius:var(--rk-r); }
  .rk-mini-collapse > summary::-webkit-details-marker{ display:none; }
  .rk-mini-collapse > summary::before{ content:"\2699"; opacity:.7; }
  .rk-mini-collapse > summary::after{ content:"\25BE"; margin-left:auto; color:var(--rk-muted);
    transition:transform var(--rk-t-ui) var(--rk-ease); }
  .rk-mini-collapse[open] > summary::after{ transform:rotate(180deg); }
  .rk-mini-collapse .admin-reset-panel{ margin-top:var(--rk-s2); }

  /* ---- hide the placeholder workflow chart (keep Low Stock) ---- */
  #dashboard .dashboard-grid .card:has(.mini-chart){ display:none; }
  /* honest "sample" tag on the Today hero while it's on fallback data */
  .rk-today[data-sample] .rk-today-label::after{ content:" · sample"; font-weight:600; opacity:.75; }
}

/* =====================================================================
   39. WAREHOUSE mobile (<=1180px): collapse the controls, tidy the bottom
       bar, keep the map fitted (no sideways scroll), pop the block editor as
       a bottom-sheet, and style the product-search route line. Presentation +
       the mobile-only JS in mobileEnhance.js (reuses the module's handlers).
       Desktop (>1180px) unchanged (rk-mini-collapse is display:contents above
       1180px; everything else is inside the <=1180px query).
   ===================================================================== */
@media (max-width: 1180px){
  /* the "Search & tools" disclosure uses a search icon (not the admin gear) */
  details.wh-controls > summary::before{ content:"\1F50D" !important; }

  /* ---- bottom control bar: stack the groups with real spacing ---- */
  #warehouse .wh-mapbar{ flex-direction:column; align-items:stretch; gap:var(--rk-s3) !important; margin:0 0 var(--rk-s3) !important; }
  #warehouse .wh-filter-pills{ display:flex; flex-wrap:wrap; gap:var(--rk-s2) !important; }
  #warehouse .wh-mapbar-right{ display:flex; flex-direction:column; align-items:stretch; gap:var(--rk-s2) !important; }
  #warehouse .wh-colormode{ display:flex; align-items:center; gap:8px; }
  #warehouse .wh-colormode select{ flex:1 1 auto; min-height:42px; }
  #warehouse .wh-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--rk-fs-label); }
  #warehouse .wh-view-toggle{ align-self:flex-start; }

  /* ---- map: DO NOT force the canvas height/overflow. The module already sizes
         it (min-height above) + handles fullscreen, and mobileEnhance.js auto-fits
         it (resetMapView) with no side-scroll. Forcing height/overflow here broke
         zoom + fullscreen, so we only cap the width. ---- */
  #warehouse .warehouse-canvas,#warehouse #warehouseMapCanvas{ max-width:100% !important; }

  /* ---- the inline detail panel is redundant on mobile: it only appears as the
         bottom-sheet popup (mobileEnhance.js portals it to <body> when a block is
         tapped, so its fixed positioning escapes the map's stacking context). ---- */
  body:not(.wh-sheet-open) #warehouse #warehouseMapDetails{ display:none !important; }

  /* ---- block editor as a bottom-sheet popup on tap ---- */
  .wh-sheet-backdrop{ display:none; position:fixed; inset:0; background:rgba(3,12,24,.55); z-index:1590; }
  body.wh-sheet-open .wh-sheet-backdrop{ display:block; }
  body.wh-sheet-open #warehouseMapDetails{
    display:block !important; position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; z-index:1600;
    max-height:82vh; overflow:auto;
    background:var(--rk-surface); color:var(--rk-ink); border-radius:20px 20px 0 0;
    padding:22px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -16px 44px rgba(3,12,24,.4); animation:rkSheetUp var(--t-slow) var(--e-out);
  }
  .wh-sheet-close{ position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:11px; cursor:pointer;
    border:1px solid var(--rk-line); background:var(--rk-surface-2); color:var(--rk-ink); font-size:16px; z-index:2; }

  /* ---- product-search route line (SVG inside the map stage) ---- */
  .wh-route-poly{ fill:none; stroke:var(--rk-accent); stroke-width:4; stroke-dasharray:2 11;
    stroke-linecap:round; stroke-linejoin:round; opacity:.95; animation:rkDash 22s var(--e-linear) infinite; }
  .wh-route-start{ fill:#16a34a; }
  .wh-route-end{ fill:var(--rk-accent); }
}
@keyframes rkSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes rkDash{ to{ stroke-dashoffset:-460; } }

/* =====================================================================
   40. FINAL POLISH PASS — consistency + refinement + dark stragglers.
       Presentation only; EVERY rule is inside a <=1180px media query, so
       desktop (>1180px) is byte-for-byte unchanged. Four parts:
        40a HARD-RULE  — close the last horizontal-scroll gaps.
        40b DARK       — native Messaging + Warehouse chrome that used
                         hardcoded light colours. (Channel order pages AND
                         Evri stay brand-light in both themes ON PURPOSE —
                         see dark.css header — so they are left untouched.)
        40c CONSISTENCY— one card radius + calm, uniform tap feedback.
        40d REFINEMENT — quiet separators + consistent motion.
   ===================================================================== */

/* ---- 40a. ZERO sideways scroll on any screen ---- */
@media (max-width: 1180px){
  /* ASN "Confirm shipment" detail used a fixed `1fr 360px` split plus a
     `220px 180px 160px` form-grid — both overflowed narrow phones. Collapse
     every inline grid inside the shipment detail to a single column. */
  #amazonShipmentDetail [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* belt-and-suspenders: rich media never widens the page. Exclude the
     warehouse route overlay (a deliberately 5000px, no-viewBox SVG inside the
     pan/zoom stage — capping it would clip the drawn pick route). */
  .tab img,.tab video,.tab canvas{ max-width:100%; }
  .tab svg:not(.wh-route-svg){ max-width:100%; }
  .tab pre{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---- 40b. DARK STRAGGLERS — native MESSAGING (Customer Messenger / Inbox /
     Message Center). These modules inject their own <style> with light-only
     colours, so in dark mode they rendered as white cards / low-contrast text.
     Give them the kit dark surface + readable ink (>=4.5:1). Light mode and
     desktop are untouched (all inside <=1180px). Classes are messaging-only
     (cs-/ci-/mc-/msg-/chat-/message-), so no channel screen is affected. ---- */
@media (max-width: 1180px){
  /* card surfaces */
  html[data-theme="dark"] .cs-panel,
  html[data-theme="dark"] .ci-panel,
  html[data-theme="dark"] .chat-inbox-card,
  html[data-theme="dark"] .message-card,
  html[data-theme="dark"] .mc-thread-head,
  html[data-theme="dark"] .cs-msg,
  html[data-theme="dark"] .chat-bubble.theirs,
  html[data-theme="dark"] .cs-modal-card,
  html[data-theme="dark"] .cs-menu-pop,
  html[data-theme="dark"] .mc-compose.chat-compose,
  html[data-theme="dark"] .chat-compose,
  html[data-theme="dark"] .message-order-summary,
  html[data-theme="dark"] .order-panel .empty-state{
    background:var(--rk-surface) !important;
    border-color:var(--rk-line) !important;
    color:var(--rk-ink) !important;
  }
  /* recessed panels / light gradients -> inset */
  html[data-theme="dark"] .message-list-panel,
  html[data-theme="dark"] .mc-messages.chat-messages,
  html[data-theme="dark"] .chat-inbox,
  html[data-theme="dark"] .cs-required-note,
  html[data-theme="dark"] .cs-day span{
    background:var(--rk-inset) !important; border-color:var(--rk-line) !important;
  }
  /* thumbnail / avatar placeholders */
  html[data-theme="dark"] .cs-prod-thumb,
  html[data-theme="dark"] .cs-ava,
  html[data-theme="dark"] .cs-stat-ico,
  html[data-theme="dark"] .chat-thumb,
  html[data-theme="dark"] .msg-row .msg-flag,
  html[data-theme="dark"] .cs-att{
    background:var(--rk-surface-2) !important; border-color:var(--rk-line) !important; color:var(--rk-ink) !important;
  }
  /* headline text */
  html[data-theme="dark"] .cs-thread-title,
  html[data-theme="dark"] .mc-thread-head h2,
  html[data-theme="dark"] .order-panel h3,
  html[data-theme="dark"] .message-product,
  html[data-theme="dark"] .message-order-summary .summary-title,
  html[data-theme="dark"] .cs-stat-v,
  html[data-theme="dark"] .cs-flabel,
  html[data-theme="dark"] .cs-rf-box-h,
  html[data-theme="dark"] .cs-rf-grandtotal,
  html[data-theme="dark"] .cs-modal-head,
  html[data-theme="dark"] .msg-text b,
  html[data-theme="dark"] .msg-text span,
  html[data-theme="dark"] .meta-row span{ color:var(--rk-ink) !important; }
  /* message body / secondary text */
  html[data-theme="dark"] .cs-msg-body,
  html[data-theme="dark"] .cs-msg-who,
  html[data-theme="dark"] .chat-bubble.theirs,
  html[data-theme="dark"] .chat-bubble.theirs p,
  html[data-theme="dark"] .message-last,
  html[data-theme="dark"] .msg-text em{ color:var(--rk-ink-2) !important; }
  /* muted captions / timestamps / labels */
  html[data-theme="dark"] .cs-count,
  html[data-theme="dark"] .cs-sub,
  html[data-theme="dark"] .cs-parts-line,
  html[data-theme="dark"] .cs-msg-time,
  html[data-theme="dark"] .cs-required-note,
  html[data-theme="dark"] .cs-stat-l,
  html[data-theme="dark"] .cs-pay,
  html[data-theme="dark"] .cs-rf-grid,
  html[data-theme="dark"] .cs-menu-group,
  html[data-theme="dark"] .mc-thread-head p,
  html[data-theme="dark"] .message-meta,
  html[data-theme="dark"] .msg-text small,
  html[data-theme="dark"] .chat-inbox-card small,
  html[data-theme="dark"] .chat-inbox-card em,
  html[data-theme="dark"] .meta-row b{ color:var(--rk-muted) !important; }
  /* tabs / links / actions */
  html[data-theme="dark"] .cs-tab,
  html[data-theme="dark"] .cs-back{ color:var(--rk-ink-2) !important; }
  html[data-theme="dark"] .cs-link,
  html[data-theme="dark"] .cs-parts,
  html[data-theme="dark"] .cs-sortarrow,
  html[data-theme="dark"] .cs-att,
  html[data-theme="dark"] .cs-att-load{ color:var(--rk-accent) !important; }
  /* inbox-row list states (were pale blue washes on white) */
  html[data-theme="dark"] .msg-row:hover{ background:var(--rk-surface-2) !important; }
  html[data-theme="dark"] .msg-row.unread{ background:#122a3f !important; }
  html[data-theme="dark"] .msg-row.active{ background:#123047 !important; }
  html[data-theme="dark"] .msg-row.closed,
  html[data-theme="dark"] .message-card.closed{ background:var(--rk-inset) !important; }
  /* neutral status chip */
  html[data-theme="dark"] .status-none,
  html[data-theme="dark"] .msg-row.closed .msg-text strong{ background:var(--rk-surface-2) !important; color:var(--rk-ink-2) !important; }
  /* quiet separators */
  html[data-theme="dark"] .cs-pay,
  html[data-theme="dark"] .meta-row,
  html[data-theme="dark"] .cs-rf-grid,
  html[data-theme="dark"] .cs-rf-grandtotal,
  html[data-theme="dark"] .cs-modal-head{ border-color:var(--rk-line) !important; }
}

/* ---- 40b (cont). WAREHOUSE chrome that stayed light (legend + view toggle) ---- */
@media (max-width: 1180px){
  html[data-theme="dark"] #warehouse .wh-legend{ color:var(--rk-muted) !important; }
  html[data-theme="dark"] #warehouse .wh-legend-title{ color:var(--rk-ink-2) !important; }
  html[data-theme="dark"] #warehouse .wh-view-toggle{ background:var(--rk-surface-2) !important; }
  html[data-theme="dark"] #warehouse .wh-view-toggle button{ color:var(--rk-muted) !important; }
  html[data-theme="dark"] #warehouse .wh-view-toggle button:hover{ background:rgba(255,255,255,.06) !important; }
}

/* ---- 40c. CONSISTENCY — one card radius + calm, uniform tap feedback ---- */
@media (max-width: 1180px){
  /* the Message Center card was the last off-grid radius (22px) — bring it to
     the canonical 14px so every list card matches (light + dark) */
  .message-card{ border-radius:var(--rk-r) !important; }
  /* consistent premium press feedback on every tappable list card */
  .msg-row,.message-card,.chat-inbox-card{
    transition:transform var(--rk-t-tap,150ms) var(--rk-ease), background var(--rk-t-tap,150ms) var(--rk-ease);
  }
  .msg-row:active,.message-card:active,.chat-inbox-card:active{ transform:translateY(1px); }
}

/* =====================================================================
   41. MOBILE GUTTER, ALIGNMENT & CLIP FIXES (<=1180px). Reported on the
       live B&Q screen but fixed app-wide:
        (a) channel screens hugged the edge — page gutter was 8px;
        (b) each card's "More detail" reveal was hard-LEFT (chevron pushed
            right by margin-left:auto), not centred;
        (c) product titles were cut to 2 lines and some values clipped.
       Presentation only; desktop (>1180px) untouched.
   ===================================================================== */
@media (max-width: 1180px){
  /* 41a. comfortable, UNIFORM side gutter for the WHOLE app. The mobile
     content column (.main) was pinned to 8px sides (style.css + Section 9),
     so every screen hugged the edge — and channels made it worse: their
     *-page wrapper is padding:0, so 8px was the ONLY gutter. Bump the single
     shared gutter so banner, Filters disclosure and every card get real
     breathing room and line up on one edge. */
  .main{ padding-left:var(--rk-s3) !important; padding-right:var(--rk-s3) !important; }
  /* Filters disclosure inherits that gutter (no ad-hoc side margin) + even rhythm */
  details.rms-filters{ margin:var(--rk-s3) 0 !important; }

  /* 41b. "More detail" reveal: centre the label + chevron as one unit instead
     of hugging the left edge. Applies to every dual-render card screen. */
  .rk-cardlist .rk-card-more > .rk-acc-sum{ justify-content:center; gap:6px; text-align:center; }
  .rk-cardlist .rk-card-more .rk-chev{ margin-left:0 !important; }

  /* 41c. stop clipping content: show more of the product name (3 lines) and
     let card meta + field values wrap rather than truncate. */
  .rk-cardlist .rk-card-title{ -webkit-line-clamp:3; }
  .rk-cardlist .rk-card-meta{ white-space:normal; overflow-wrap:anywhere; }
  .rk-cardlist .rk-field .v{ white-space:normal; overflow-wrap:anywhere; }
}

/* =====================================================================
   42. LIVE-ONLY / ADMIN SCREENS — match the rest of the app (<=1180px).
       These screens (Amazon Connections, EDI/ASN, Seller sync, Evri,
       Vendor Fulfilment) are only fully visible against a live connection,
       so they never got the kit pass. Reported: "buttons too big in Amazon".
       Cause: their generic <button>s inherit the heavy BASE button
       (padding:13px 17px; font-weight:900; box-shadow:0 8px 18px) instead of
       the calmer kit scale. Presentation only; desktop (>1180px) untouched.
       (Amazon Seller + Evri stay brand-LIGHT by design — see dark.css — so
       only their sizing/layout is touched, not their colours.)
   ===================================================================== */
@media (max-width: 1180px){
  /* 42a. ROOT CAUSE, fixed APP-WIDE: the base <button> is heavy
     (font-weight:900; padding:13px 17px; box-shadow:0 8px 18px), so EVERY
     module's generic buttons (Amazon Connections/EDI, messaging, claims, API
     logs, fulfilment, containers, suppliers, PO, catalogue, stock, warehouse
     actions, print labels …) read as oversized/bulky vs the kit. This bare
     `button` rule (specificity 0,0,1) calms ONLY those truly-generic buttons —
     every purpose-styled button (.rk-btn, .rk-fab, .mp-* tabs, .btn-* compact,
     .seller-*, .warehouse-tabs button, the tab bar) out-specifies it and keeps
     its own look. Calmer weight + tighter padding + no heavy shadow = matches
     the kit. Touch height stays >=44px via Section 3a. */
  button{ font-weight:700; padding:9px 15px; box-shadow:none; }
  /* 42b. Seller action buttons: unify the mixed 18px-pill / 8px radii to one */
  .seller-action-btn,.seller-action-secondary,.seller-btn,
  .seller-action-green,.seller-action-cancel{ border-radius:10px !important; }
  /* 42c. Evri + Royal Mail + Vendor buttons: guarantee a >=44px touch target.
     Royal Mail mirrors Evri's button set (.rm-* == .ev-*). */
  .ev-btn-w,.ev-btn-out,.ev-connect,.ev-submit,.ev-back,
  .rm-btn-w,.rm-btn-out,.rm-connect,.rm-submit,.rm-back,.vf-btn{ min-height:44px; }
  /* 42d. Evri + Royal Mail build view: collapse the fixed 360px sidebar so
     nothing scrolls sideways on a phone/tablet (matches the app-wide
     zero-horizontal-scroll rule; RM only self-collapses <=1000px, so this
     also covers the 1001-1180px band exactly like Evri). */
  .ev-build,.rm-build{ grid-template-columns:1fr !important; }
}

/* =====================================================================
   43. FULFILMENT platform-filter chips — uniform, tidy grid (<=820px).
       The All / Amazon / eBay / Temu / TikTok / Shopify / B&Q chips wrapped
       raggedly at different widths (each sized to its label). Lay them out as
       an even auto-fill grid so every chip is the same width and the set reads
       as one tidy block. Presentation only; desktop (>1180px) unchanged.
   ===================================================================== */
@media (max-width: 820px){
  #fulPlatFilters.ful-plat-filters{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
    gap:8px !important;
  }
  #fulPlatFilters .ful-plat-pill{
    width:100%; justify-content:center; margin:0;
    padding:9px 8px; min-height:40px;
  }
  #fulPlatFilters .ful-plat-pill > span:not(.ful-plat-count){
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* =====================================================================
   44. PHASE 1 — channel order cards (generic): overdue urgency accent bar +
       bulk-select bar. (Swipe-to-reveal removed; inter-card spacing falls back
       to .rk-card + .rk-card in mobile-kit.css.) Reuses rk-pill.urgent.
       All <=1180px; desktop (>1180px) byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* D) overdue urgency — subtle left accent bar + the countdown pill by the meta */
  .rk-card.rk-urg-urgent{ box-shadow:inset 4px 0 0 0 var(--rk-bad), var(--rk-shadow); }
  .rk-card.rk-urg-soon{ box-shadow:inset 4px 0 0 0 var(--rk-warn), var(--rk-shadow); }
  .rk-card .rk-pill.rk-urg{ margin-top:6px; align-self:flex-start; }

  /* B) skeleton-loading list keeps a min height so the layout doesn't jump */
  .rk-cardlist.rk-skel-loading{ min-height:40vh; }

  /* E) bulk-select — selected highlight + floating action bar above the tab bar */
  .rk-card.rk-selected{ outline:2px solid var(--rk-accent); outline-offset:-1px; }
  body.rk-bulk-mode .rk-cardlist .rk-card{ cursor:pointer; }
  .rk-bulkbar{ position:fixed; left:var(--rk-s3); right:var(--rk-s3);
    bottom:calc(64px + env(safe-area-inset-bottom)); z-index:1650;
    display:none; align-items:center; gap:var(--rk-s3);
    background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r);
    box-shadow:var(--rk-shadow-lg); padding:10px 12px;
    transform:translateY(8px); opacity:0;
    transition:opacity var(--rk-t-ui) var(--rk-ease), transform var(--rk-t-ui) var(--rk-ease); }
  .rk-bulkbar.active{ display:flex; transform:none; opacity:1; }
  .rk-bulkbar-count{ font-weight:800; color:var(--rk-ink); font-size:var(--rk-fs-body); white-space:nowrap; }
  .rk-bulkbar-acts{ margin-left:auto; display:flex; align-items:center; gap:var(--rk-s2); }
  .rk-bulkbar .rk-btn{ min-height:40px; padding:0 14px; }
  .rk-bulkbar-x{ width:40px; height:40px; flex:0 0 auto; border-radius:10px; cursor:pointer;
    border:1px solid var(--rk-line); background:var(--rk-surface-2); color:var(--rk-ink); font-size:15px; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce){
  .rk-bulkbar{ transition:none !important; transform:none !important; }
}

/* =====================================================================
   45. PHASE 1 F — sticky, condensing channel header. The channel page
       wrappers set overflow:hidden, which traps position:sticky. Switch to
       overflow:clip — it clips IDENTICALLY at rest (so the baseline is
       unchanged) but is NOT a scroll container, so the banner sticks to the
       viewport. On scroll (body.rk-scrolled, toggled in mobileEnhance) the
       banner condenses to a slim bar that keeps the status filters. All
       <=1180px; desktop (>1180px) byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* html,body{overflow-x:hidden} (style.css) forces overflow-y to compute to
     auto, making them scroll containers that sit between the sticky banner
     and the real scroller (documentElement) — so the header condensed but then
     scrolled away instead of pinning. overflow-x:clip clips X identically but
     is NOT a scroll container (overflow-y stays visible), so sticky pins to the
     viewport. responsive.css loads after style.css, so this plain override wins;
     >1180px keeps overflow-x:hidden, so desktop is byte-for-byte unchanged.
     html MUST get clip too: overflow-x:hidden on the root element is a scroll
     container that silently breaks nested horizontal scrollers on iOS Safari
     (e.g. the dashboard "Recently opened" chip row wouldn't swipe). clip fixes
     that while still preventing the whole page from panning sideways. */
  html,body{ overflow-x:clip; }
  /* Segmented filter/period controls (.po-seg = Purchase Orders filters,
     .pa-seg = Profitability period chips) are single-row flex rows that exceed
     the viewport with 4+ options — with the page now clip'd they'd be cut off.
     Let them swipe horizontally instead of overflowing. */
  .po-seg, .pa-seg{ max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .po-seg::-webkit-scrollbar, .pa-seg::-webkit-scrollbar{ height:0; }
  .po-seg > button, .pa-seg > button{ flex:0 0 auto; }
  /* the .pa-seg lives inside a flex wrapper whose default min-width:auto keeps it
     from shrinking — let that wrapper shrink too so overflow-x:auto can scroll. */
  .pa-hd > div{ min-width:0; }
  /* Narrow-width (≤~360px) header/toolbar rows that were flex-nowrap and overflowed:
     let them wrap so the action buttons drop to a second line instead of being
     clipped. flex-wrap only kicks in when items don't fit, so wider phones are
     unaffected. Product Catalogue header + Linking search/actions row. */
  .cat-page-header{ flex-wrap:wrap; gap:10px; }
  .cat-page-header > *{ min-width:0; }
  #linking .bld-search-row{ flex-wrap:wrap; }
  /* eBay Orders account header: the "+ Add account" button (nowrap, non-shrinking)
     pushed the row a few px past a 320px screen — let the row wrap. */
  #ebayOrders .mp-brand.rk-acc-head{ flex-wrap:wrap; row-gap:6px; }
  /* Warehouse command header on phones: stack + CENTRE the title, description and
     clock (they read as lopsided left-aligned once the switcher wraps), and centre
     the warehouse switcher under them. Cap the select so it can't overflow. */
  #warehouse .whl-topbar{ flex-direction:column; align-items:stretch; text-align:center; gap:10px; }
  #warehouse .whl-brand{ justify-content:center; }
  #warehouse .whl-brand-txt{ align-items:center; text-align:center; }
  #warehouse .whl-wh-switch{ margin:0 auto; }
  #warehouse .whl-wh-select{ max-width:60vw; min-width:0; }
  #warehouse .whl-clock-wrap{ text-align:center; }
  /* Floor-map zoom bar overflowed the map on phones. Its 🧊 3D / 📋 Inventory view
     toggles duplicate the "Floor map / 3D warehouse / Inventory list" row below, so
     hide them here — leaves just zoom −/％/＋ + Fit, which fits comfortably. */
  #warehouse .whl-zoom-ctl .whl-zc-view{ display:none; }
  /* The base rule input,select,textarea{min-width:170px} makes every field at
     least 170px wide, so any 2-column form grid needs 340px+ and overflows on a
     narrow phone (e.g. iPhone with Display Zoom = 375px). Let fields shrink to
     their column/container on mobile — fixes the Create Container field grid, the
     New Purchase Order form and any similar multi-column form, without collapsing
     the layout. Fields still take sensible width from their grid/flex parent. */
  input, select, textarea{ min-width:0; }
  /* New PO create form: its main column is a grid item with the default
     min-width:auto, so it refuses to shrink below its content and overflows the
     collapsed 1-column grid on a narrow phone. Let the grid items shrink. */
  #purchaseOrders .po-create-main, #purchaseOrders .po-create-grid > *{ min-width:0; }
  /* Vendor Fulfilment: .vf-layout has several conflicting definitions (grid with a
     minmax(300px,…) sidebar, a flex variant, and 1-col collapses) and on a narrow
     phone a 2-column/300px-sidebar variant wins, so .vf-main can't shrink and the
     page content is clipped. Force the layout to stack as plain full-width blocks
     on mobile — overrides whichever conflicting rule wins. */
  #printLabels .vf-layout{ display:block !important; }
  #printLabels [class*="vf-"]{ min-width:0; }          /* let all vf- flex/grid items shrink */
  #printLabels .vf-layout > *{ width:auto; }
  #printLabels .vf-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* the sub-tab row (Unconfirmed / Confirmed / …) is a nowrap segmented row that
     exceeds a narrow phone — let it swipe horizontally like the other seg rows. */
  #printLabels .vf-subtabs{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #printLabels .vf-subtabs::-webkit-scrollbar{ height:0; }
  /* Suppliers & Access (#saWrap) and Users & Access (#uaWrap) are master-detail
     grids with a FIXED 300px list column and no mobile override, so the detail
     pane got squeezed to ~40px and ran off the screen. Stack them on mobile. */
  #saWrap, #uaWrap{ grid-template-columns:1fr !important; }
  #saWrap > *, #uaWrap > *{ min-width:0; }

  /* Supplier cell: the name and email are siblings in a flex ROW, so on a phone
     the name wrapped to 3 lines while the email was squeezed to nothing and
     clipped. Let the cell wrap and drop the email onto its own full-width line
     so the WHOLE address is readable — truncating it just hid the problem. */
  table.rms-stack td[data-label="Supplier"],
  table.rms-stack td[data-label="supplier"]{ flex-wrap:wrap; }
  .sup-name{ min-width:0; overflow-wrap:anywhere; }
  .sup-mail{
    flex:1 0 100%; min-width:0; max-width:100%;
    white-space:normal; overflow-wrap:anywhere; word-break:break-all;
    text-align:right; margin-top:2px;
  }

  /* A bare "⋯" says nothing about what it opens. On the phone cards there are no
     column headers to lean on, so show a real word next to it. (Desktop keeps the
     glyph alone — the table header already gives it context.) */
  .cat-more-btn{ display:inline-flex; align-items:center; gap:5px; width:auto !important;
    padding:4px 8px !important; border-radius:8px; font-size:13px !important; line-height:1; }
  /* Small caps label — enough to say what the ⋯ does without competing with the
     row's real content (it was rendering at 16px in a 101px-wide button). */
  .cat-more-btn .cat-more-lbl{ font-size:10px; font-weight:800; letter-spacing:.04em;
    text-transform:uppercase; opacity:.75; }

  /* The Warehouse module is a full-screen app (.whl-app) but it was sitting inside
     the generic `.card` chrome — a 14px-radius bordered box 390px wide in a 414
     viewport. That framing is right for a small content panel, not for a
     command screen, so it read as an app squeezed into a box. Strip the chrome and
     let it run edge-to-edge; the module draws its own surfaces. */
  #warehouse.card.whl-section{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 0 var(--rk-s4, 16px) !important;
    box-shadow:none !important;
  }
  #warehouse .whl-app{ width:100%; }

  /* EAN filter chips: stack a small label over the digits so "…600018" reads as
     "Primary / …600018" instead of an anonymous number. */
  .lg-ean{ display:inline-flex !important; flex-direction:column; align-items:flex-start;
    gap:1px; line-height:1.15; padding:6px 10px !important; height:auto !important; }
  .lg-ean .lg-ean-lbl{ font-size:9px; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; opacity:.7; }
  .lg-ean .lg-ean-no{ font-size:12px; font-weight:700; }

  /* "More detail" on a stock card: the body had padding 4px 0 8px — NO horizontal
     padding — so its content pressed against the panel's own border, and the grid
     was pinned to fixed 170px columns that don't flex with the card. Give it room
     to breathe and let the columns share the width. */
  .rk-card-more > .rk-acc-body{ padding:10px 14px 14px !important; }
  .rk-card-more .rk-fields{ grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:14px 16px !important; }
  .rk-card-more .rk-field{ min-width:0; }
  .rk-card-more .rk-field.wide{ grid-column:1 / -1; }
  .rk-card-more > summary{ padding:10px 14px !important; }

  /* The ⋯ menu stretched to ~398px wide for four short items: it's a fixed block
     with width:auto, so it should shrink-to-fit, but it was filling its max-width
     instead. Pin it to its content and cap it well short of the screen. */
  .menu-box{ width:max-content !important; max-width:min(220px, calc(100vw - 16px)) !important; }
  .menu-box > *{ padding:9px 12px !important; font-size:13px !important; }

  /* Product Catalogue cards were cramped because style.css:1516 sets
     `.cat-master-row{display:table-row!important;padding:0!important}` globally.
     padding/margin are inert on a table-row, so the card-stack padding above was
     authored but never applied. Re-assert block + padding for the stacked view
     only (needs !important to beat that rule; desktop keeps its table layout). */
  table.rms-stack tr.cat-master-row,
  table.rms-stack tr.cat-variant-row{
    display:block !important;
    padding:var(--rk-s3, 12px) var(--rk-s4, 16px) !important;
  }
  table.rms-stack tr.cat-master-row > td,
  table.rms-stack tr.cat-variant-row > td{ padding:6px 0; }
  /* channel chips get room to breathe instead of butting into the row above */
  table.rms-stack tr.cat-master-row .cat-chip-wrap,
  table.rms-stack tr.cat-master-row [class*="cat-chip"]{ margin-top:2px; }
  /* let the banner escape the wrapper's scroll-clip so sticky pins to viewport */
  #bnqOrders.bnq-page,#temuOrders.temu-page,#tiktokOrders.tk-page,#shopifyOrders.sf-page{ overflow:clip !important; }
  /* shared mp-banner (bnq/temu/tiktok/shopify): sticky, condenses on scroll */
  #bnqOrders .mp-banner,#temuOrders .mp-banner,#tiktokOrders .mp-banner,#shopifyOrders .mp-banner,#ebayOrders .mp-banner{
    position:sticky; top:0; z-index:30; transition:padding var(--rk-t-ui) var(--rk-ease); }
  body.rk-scrolled #bnqOrders .mp-banner,body.rk-scrolled #temuOrders .mp-banner,
  body.rk-scrolled #tiktokOrders .mp-banner,body.rk-scrolled #shopifyOrders .mp-banner,
  body.rk-scrolled #ebayOrders .mp-banner{
    padding-top:8px !important; padding-bottom:8px !important; }
  body.rk-scrolled #bnqOrders .mp-banner .mp-brand,body.rk-scrolled #temuOrders .mp-banner .mp-brand,
  body.rk-scrolled #tiktokOrders .mp-banner .mp-brand,body.rk-scrolled #shopifyOrders .mp-banner .mp-brand{ display:none; }
  /* eBay uses the shared .mp-banner sticky above; its wrapper needs overflow:clip.
     (Seller page has no sticky header — Item 5 reverted per review.) */
  #ebayOrders.ebay-sh,#sellerCentralOrders.seller-orders-page,#sellerCentralOrdersJuyi.seller-orders-page{ overflow:clip !important; }
  /* Item 3: banner pills collapse INSIDE the sticky banner; the brand row is
     the toggle, so keep it visible on scroll for the accordion banners only */
  body.rk-scrolled #ebayOrders .mp-banner.rk-acc-card .mp-brand,
  body.rk-scrolled #shopifyOrders .mp-banner.rk-acc-card .mp-brand,
  body.rk-scrolled #bnqOrders .mp-banner.rk-acc-card .mp-brand,
  body.rk-scrolled #temuOrders .mp-banner.rk-acc-card .mp-brand,
  body.rk-scrolled #tiktokOrders .mp-banner.rk-acc-card .mp-brand{ display:flex !important; }
  #ebayOrders .mp-brand.rk-acc-head,
  #shopifyOrders .mp-brand.rk-acc-head,
  #bnqOrders .mp-brand.rk-acc-head,
  #temuOrders .mp-brand.rk-acc-head,
  #tiktokOrders .mp-brand.rk-acc-head{ justify-content:flex-start !important; }
  #ebayOrders .mp-brand.rk-acc-head::after,
  #shopifyOrders .mp-brand.rk-acc-head::after,
  #bnqOrders .mp-brand.rk-acc-head::after,
  #temuOrders .mp-brand.rk-acc-head::after,
  #tiktokOrders .mp-brand.rk-acc-head::after{ margin-left:auto; color:#fff; }
  /* eBay "Manage all orders" controls + Shopify Performance stats accordions */
  #ebayOrders .ebsh-ctrls.rk-acc-card > .ebsh-mtop{ margin-bottom:0; }
  #shopifyOrders .sf-stats > .rk-acc-head{ flex:1 1 100%; min-height:44px; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce){
  #bnqOrders .mp-banner,#temuOrders .mp-banner,#tiktokOrders .mp-banner,#shopifyOrders .mp-banner{ transition:none !important; }
}

/* =====================================================================
   46. EVRI + ROYAL MAIL (Item 4) — the auto-cardified Action cell used to put
       every link AND every " · " text-node separator on its own line
       (Section 30 set flex-direction:column). Make it a horizontal wrap row of
       pill tap-targets and hide the now-wrapped .ev-dot / .rm-dot separators.
       Royal Mail's Action cell is structurally identical to Evri's (same
       View / Pick+Label / Label / Mark-fulfilled links + dot separators), so
       the two carriers share this rule. <=1180px only.
   ===================================================================== */
@media (max-width: 1180px){
  .ev-table.rms-stack td[data-label="Action"],
  .ev-table.rms-stack td[data-label="Actions"],
  .rm-table.rms-stack td[data-label="Action"],
  .rm-table.rms-stack td[data-label="Actions"]{
    flex-direction:row !important; flex-wrap:wrap; align-items:center !important; gap:var(--rk-s2);
  }
  .ev-table.rms-stack td[data-label="Action"]::before,
  .ev-table.rms-stack td[data-label="Actions"]::before,
  .rm-table.rms-stack td[data-label="Action"]::before,
  .rm-table.rms-stack td[data-label="Actions"]::before{ flex:1 1 100% !important; }
  .ev-table.rms-stack .ev-dot,
  .rm-table.rms-stack .rm-dot{ display:none; }
  .ev-table.rms-stack td[data-label="Action"] .ev-link,
  .ev-table.rms-stack td[data-label="Actions"] .ev-link,
  .rm-table.rms-stack td[data-label="Action"] .rm-link,
  .rm-table.rms-stack td[data-label="Actions"] .rm-link{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:0 14px; border:1px solid var(--rk-border);
    border-radius:999px; background:var(--rk-surface);
  }
  .ev-table.rms-stack td[data-label="Barcode"]{ flex-wrap:wrap; }
  .ev-table.rms-stack td[data-label="Barcode"] .ev-sub{ flex:1 1 100%; }
  /* Royal Mail's identifier/meta cells carry a secondary .rm-sub line
     (Customer postcode, Channel reference, Product weight, Status error) —
     drop it full-width under the primary value, same as Evri's Barcode cell. */
  .rm-table.rms-stack td .rm-sub{ flex:1 1 100%; }
}

/* =====================================================================
   48. AMAZON ASN API — "Create ASN Shipment" form (Item 7) (<=1180px).
   (a) .notice-list is display:grid in style.css, so every <b>/text run in the
       "Default workflow" / "Step 2" summary became its own stacked grid row.
       Restore inline sentence flow on this tab only.
   (b) Consistent field spacing; controls fill their grid cells (base
       input/select min-width:170px otherwise overflows 1fr columns).
   (c) Phones <=480px: keep the field grid 2-up (dates/carrier side-by-side)
       — later in file than the §4 1fr clamp, so source order wins the tie.
   ===================================================================== */
@media (max-width: 1180px){
  #amazonAsnApiTab .notice-list{ display:block; line-height:1.7; }
  #amazonAsnApiCreate [style*="grid-template-columns"] > label{ min-width:0; font-weight:700; font-size:12px; }
  #amazonAsnApiCreate [style*="grid-template-columns"] input,
  #amazonAsnApiCreate [style*="grid-template-columns"] select{ width:100%; min-width:0; margin-top:4px; }
}
@media (max-width: 480px){
  #amazonAsnApiCreate [style*="grid-template-columns"]{ grid-template-columns:1fr 1fr !important; gap:12px 10px; }
}

/* =====================================================================
   49. List-page header accordions — consistent boxed look (review polish
       for Items 2 & 3). The Temu "Action needed", TikTok "Order summary",
       eBay "Manage all orders" and Shopify "Performance" collapsibles now
       match the sibling rms-filters disclosures: same border/radius/margin
       and a padded 44px tap head (fixes the Shopify head jammed against the
       box edge). Plus breathing room between the header block and the order
       cards, scoped to the reported channels so bnq/phase-1 baselines are
       untouched. All <=1180px; desktop byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* box the three that aren't already boxed (sf-stats has its own border) */
  .temu-cards-wrap.rk-acc-card,
  .tk-stats-wrap.rk-acc-card,
  #ebayOrders .ebsh-ctrls.rk-acc-card{
    border:1px solid var(--c-line); border-radius:var(--radius);
    background:var(--c-surface); margin:var(--rk-s3) 0; overflow:hidden; box-shadow:none;
  }
  /* padded 44px tap head for all four (matches rms-filters summary padding) */
  .temu-cards-wrap.rk-acc-card > .temu-cards-title,
  .tk-stats-wrap.rk-acc-card > .rk-acc-head,
  #ebayOrders .ebsh-ctrls.rk-acc-card > .ebsh-mtop,
  #shopifyOrders .sf-stats.rk-acc-card > .rk-acc-head{
    padding:var(--sp-2) !important; min-height:44px; margin:0 !important;
    box-sizing:border-box; font-weight:700;
  }
  /* padded content when open so tiles don't touch the box edge */
  .temu-cards-wrap.rk-acc-card.rk-open > .temu-cards{ padding:0 var(--sp-2) var(--sp-2) !important; }
  .tk-stats-wrap.rk-acc-card.rk-open > .tk-stats{ padding:0 var(--sp-2) var(--sp-2); margin-bottom:0; }
  /* breathing room: header block -> card list, and a touch more between big
     cards (scoped to the reported channels; bnq/phase-1 baselines unaffected) */
  #temuOrders .rk-cardlist,#tiktokOrders .rk-cardlist,
  #ebayOrders .rk-cardlist,#shopifyOrders .rk-cardlist{ margin-top:var(--sp-2); }
  #temuOrders .rk-cardlist .rk-card + .rk-card,#tiktokOrders .rk-cardlist .rk-card + .rk-card,
  #ebayOrders .rk-cardlist .rk-card + .rk-card,#shopifyOrders .rk-cardlist .rk-card + .rk-card{ margin-top:var(--rk-s4); }
}

/* =====================================================================
   50. Temu / TikTok — uniform full-width bars (review polish). The connbar
       disclosure sits at page level (16px margin) but "Action needed" /
       "Order summary" / "Bulk actions" and the cards were nested inside
       .temu-body{padding:22px} + the white .temu-panel, so each was inset a
       different amount. On mobile, drop the body side-padding and flatten the
       inner panel so every bar AND the card list lines up at the same 16px
       inset as the connbar. <=1180px; desktop byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  #temuOrders .temu-body,#tiktokOrders .tk-body,#shopifyOrders .sf-body{ padding:0 0 var(--sp-2) !important; }
  #temuOrders .temu-panel,#tiktokOrders .tk-panel{
    border:0 !important; background:transparent !important; border-radius:0 !important;
    overflow:visible !important; box-shadow:none !important; padding:0 !important; }
  /* eBay: drop the white .ebsh-main side padding so "Manage all orders" + the
     cards line up with the top-level "Accounts, filters & search" bar */
  #ebayOrders .ebsh-main{ padding:0 0 var(--sp-2) !important; }
}

/* =====================================================================
   51. Channel collapsible bars — clearer box definition (review: "can't see
       the boxes"). The default var(--c-line) border (#e6edf4) is nearly
       invisible on the near-white channel backgrounds. Give every disclosure
       / accordion bar on the channel pages a stronger border + subtle lift so
       they read as distinct cards. <=1180px; desktop unchanged. Scoped to the
       four channel ids, so bnq/phase-1 gallery baselines are untouched.
   ===================================================================== */
@media (max-width: 1180px){
  #temuOrders details.rms-filters,#temuOrders .temu-cards-wrap.rk-acc-card,
  #tiktokOrders details.rms-filters,#tiktokOrders .tk-stats-wrap.rk-acc-card,
  #shopifyOrders details.rms-filters,#shopifyOrders .sf-stats.rk-acc-card,
  #ebayOrders details.rms-filters,#ebayOrders .ebsh-ctrls.rk-acc-card{
    border:1px solid #cbd5e1 !important;
    box-shadow:0 1px 3px -1px rgba(16,24,40,.12) !important;
  }
}

/* =====================================================================
   52. eBay "Manage all orders" collapsible — the OPEN content (results,
       links, sort) only got the head's padding, so it hugged the box edge;
       and the mixed 22px h2 / 18px "Results" text looked non-uniform beside
       the other bars. Pad the open rows in from the edge and normalise the
       font sizes (title = --fs-body, meta = --fs-small). <=1180px.
   ===================================================================== */
@media (max-width: 1180px){
  #ebayOrders .ebsh-ctrls.rk-acc-card.rk-open > :not(.rk-acc-head){
    padding-left:var(--sp-2) !important; padding-right:var(--sp-2) !important;
  }
  #ebayOrders .ebsh-ctrls.rk-acc-card.rk-open{ padding-bottom:var(--sp-1); }
  #ebayOrders .ebsh-mtop h2{ font-size:var(--fs-body) !important; }
  #ebayOrders .ebsh-mtop a{ display:none !important; }        /* remove "API logs" on mobile */
  #ebayOrders .ebsh-resbar .cnt{ font-size:var(--fs-small) !important; font-weight:600; }
  #ebayOrders .ebsh-resbar .links a,
  #ebayOrders .ebsh-actions .ebsh-sort{ font-size:var(--fs-small) !important; }
  #ebayOrders .ebsh-sel>select{ font-size:var(--fs-small) !important; font-weight:500 !important; }
}

/* =====================================================================
   53. Messages / Inbox refresh-flash — belt-and-braces (Item 9). The modules
       now cardify synchronously (before paint), but if that pass is ever
       delayed, hide the raw wide desktop <table> until mobileEnhance has added
       .rms-stack, so the un-styled ~880px table can never flash on mobile.
       <=1180px only; desktop >1180px byte-for-byte unchanged (the raw table
       IS the desktop view and is left completely alone above 1180px).
   ===================================================================== */
@media (max-width: 1180px){
  #customerInbox .ci-table-wrap > table.ci-table:not(.rms-stack),
  #customerMessenger .cs-table-wrap > table.cs-table:not(.rms-stack){ visibility:hidden; }
}

/* =====================================================================
   50. MOBILE FIX BATCH — presentation-only, ALL gated <=1180px so desktop
       (>1180px) is byte-for-byte unchanged. Grouped here for easy review /
       revert. Paired JS is in mobileEnhance.js (#5 stock cardify skip,
       #3 drawer "More" tile); the Home legal strip element is in index.html
       (#3, carries inline display:none so it never renders on desktop).
   ===================================================================== */
@media (max-width: 1180px){
  /* #1 — Catalogue: let the product-name column shrink + wrap inside the mobile
     card instead of clipping on the right. Desktop keeps its fixed widths
     (.cat-title/.cat-subtitle max-width:310px, .cat-product-cell min-width:290px). */
  #productCatalogue .cat-product-cell{ min-width:0; }
  #productCatalogue .cat-master-name{ min-width:0; }
  #productCatalogue .cat-title,
  #productCatalogue .cat-subtitle{ max-width:none; white-space:normal; overflow:visible; text-overflow:clip; }

  /* #6 — Stock detail: keep the "Used in" line + container badges inside the card
     (desktop uses .stk-usedin max-width:260px + nowrap; badges have no wrap). */
  #stockInventory .stk-usedin{ max-width:100%; white-space:normal; }
  #stockInventory .container-badge{ overflow-wrap:anywhere; }

  /* #2 — Channel-select dropdown: cap to the viewport across the WHOLE mobile band.
     The existing §3b cap only covers <=820px, so the 821-1180px band overflowed
     the right edge (fixed, left-anchored, min-width:210px, no max-width). */
  .ci-chansel-menu,
  .ci-chansel-flyout{ max-width:calc(100vw - 16px) !important; }

  /* #8 — Linking sub-tab row: wrap instead of running off the right edge. Matches
     the sibling .stk2-tabs convention on this same .stk2 screen (all 5 tabs stay
     visible; no hidden-behind-scroll). */
  #linking .lk-tabs{ flex-wrap:wrap; }

  /* #7 — "All Sections" drawer scroll: while the drawer is open the body is
     scroll-locked, so the drawer itself must scroll; but height:100vh overshoots
     the visible viewport under a mobile URL bar, stranding the bottom launcher
     tiles below the 72px bottom padding. Use the dynamic viewport height AND give
     the launcher its own scroller so every tile is reachable. Independent of the
     sticky-header / overflow-x:clip channel rules (which are untouched). */
  .sidebar{ height:100dvh !important; }
  .rk-nav{ max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* #3 — the hardcoded .sidebar-legal now surfaces via the drill-nav "More" tile,
     so hide the stray copy that floated at the TOP of the "All Sections" drawer... */
  .sidebar .sidebar-legal{ display:none !important; }
  /* ...and show the mobile-only legal strip at the BOTTOM of the Home page. The
     element carries inline display:none, so on desktop it stays hidden (no layout
     change); this !important rule reveals it only in the mobile band. */
  .rk-home-legal{
    display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:6px 16px; margin:24px 0 8px; padding-top:16px;
    border-top:1px solid var(--c-line);
    font-size:12px; color:var(--c-muted); text-align:center;
  }
  .rk-home-legal a{ color:var(--c-muted); text-decoration:none; }
  .rk-home-legal a:hover{ text-decoration:underline; color:var(--c-primary); }
}

/* =====================================================================
   51. STOCK mobile cards — the dual-render mechanism (§22) applied to
       #stockInventory. Desktop keeps the original dual-table layout
       byte-for-byte (.stk2-tables is .rk-deskonly → hidden ONLY <=1180px);
       mobile shows the kit card list (#stkCards) built by stock.js
       renderCards() from the SAME data + handlers (stkSel/stkLog/stkMenu).
       Replaces the auto-cardify collision (overlapping labels/pills) with
       purpose-built glance-first cards.
   ===================================================================== */
.stk-cards{ display:none; }                      /* desktop: cards hidden */
@media (max-width: 1180px){
  .stk-cards{ display:block; background:transparent; }
  .stk-cards.hidden{ display:none; }             /* recon tab hides the list */
  .stk-cards .rk-card + .rk-card{ margin-top:var(--rk-s3); }

  /* selection checkbox: comfy target, centred with the thumb */
  .stk-cards .stk-card-chk{
    width:22px; height:22px; flex:0 0 auto; align-self:center;
    margin:0; accent-color:var(--rk-accent);
  }

  /* values wrap instead of clipping (long names, EANs, used-in lists) */
  .stk-cards .rk-field .v{ white-space:normal; overflow-wrap:anywhere; }
  .stk-cards .stk-usedin{ max-width:100%; white-space:normal; }
  .stk-cards .stk-card-orders{ font-size:11px; font-weight:600; color:var(--rk-muted); }

  /* balance / container chips */
  .stk-cards .stk-chiprow{ display:flex; flex-wrap:wrap; gap:6px; }
  .stk-chip{
    display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
    border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.4;
    background:var(--rk-surface-2); color:var(--rk-ink-2);
  }
  .stk-chip-bal{ background:var(--rk-info-weak); color:var(--rk-info); }
  .stk-chip-pack{ background:var(--rk-warn-weak); color:var(--rk-warn); }
  .stk-chip-transit{ background:var(--rk-ok-weak); color:var(--rk-ok); }

  /* "More detail" expander — same look as the channel cards (§22, scoped copy) */
  .stk-cards .rk-card-more{ box-shadow:none; border:0; background:transparent; }
  .stk-cards .rk-card-more > .rk-acc-sum{
    padding:10px 0; min-height:auto;
    justify-content:center; gap:6px; text-align:center;
  }
  .stk-cards .rk-card-more .rk-chev{ margin-left:0 !important; }
  .stk-cards .rk-card-more .rk-acc-body{ padding:var(--rk-s1) 0 var(--rk-s2); }
  .stk-cards .rk-more-lbl{ font-size:13px; font-weight:700; color:var(--rk-accent); }
}

/* =====================================================================
   54. EVRI + ROYAL MAIL fulfilment builder — PHONE LAYOUT (Item 3d).
       Scope: .ev-detail / .rm-detail only (the create + batch "boxes &
       weights" views) — the list views (.ev-page/.rm-page, incl. the gallery
       screens) are untouched.
       (a) Create view: .ev-boxgrid/.rm-boxgrid is an 8-column grid with a
           SEPARATE header-labels row (injected ensureStyles, evriShipments.js
           ~220 / royalMailShipments.js ~236). The modules' own <=900px rule
           collapses it to 2 columns, which orphans the label row from its
           cells; 901-1180px keeps the full 8-column squeeze (inputs clipped).
           Here: hide the header row, stack each field with its OWN label
           (CSS ::before mirrors the header text), full-width 44px inputs.
       (b) Batch view: the 8-column weights table is auto-cardified
           (rms-stack); its cells rendered as 42%-label/right-value flex rows
           with fixed 50-66px inline-width inputs, and "Items" fell behind the
           generic "Show more". Here: each order-row becomes a 2-column form
           card (Order/Items/Status full width; weight + dims paired),
           full-width inputs, every field visible (glance toggle retired).
           Scoped to rows that contain the weight inputs (:has), so the Batch
           History / Batch Detail tables keep the generic card treatment.
       ALL rules <=1180px; desktop (>1180px) byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  /* (a) create view - boxes & weights grid */
  .ev-detail .ev-boxgrid.head, .rm-detail .rm-boxgrid.head{ display:none; }
  .ev-detail .ev-boxgrid, .rm-detail .rm-boxgrid{
    grid-template-columns:1fr 1fr; gap:10px 12px; align-items:start;
  }
  .ev-detail .ev-boxgrid > div, .rm-detail .rm-boxgrid > div{ min-width:0; }
  .ev-detail .ev-boxgrid > div::before, .rm-detail .rm-boxgrid > div::before{
    display:block; font-size:11px; font-weight:700; color:#7a8794;
    text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px;
  }
  .ev-detail .ev-boxgrid > div:nth-child(1)::before{ content:'Packaging type'; }
  .rm-detail .rm-boxgrid > div:nth-child(1)::before{ content:'Package format'; }
  .ev-detail .ev-boxgrid > div:nth-child(2)::before,
  .rm-detail .rm-boxgrid > div:nth-child(2)::before{ content:'Content'; }
  .ev-detail .ev-boxgrid > div:nth-child(3)::before,
  .rm-detail .rm-boxgrid > div:nth-child(3)::before{ content:'Weight (g)'; }
  .ev-detail .ev-boxgrid > div:nth-child(4)::before,
  .rm-detail .rm-boxgrid > div:nth-child(4)::before{ content:'Weight (kg)'; }
  .ev-detail .ev-boxgrid > div:nth-child(5)::before,
  .rm-detail .rm-boxgrid > div:nth-child(5)::before{ content:'Length (cm)'; }
  .ev-detail .ev-boxgrid > div:nth-child(6)::before,
  .rm-detail .rm-boxgrid > div:nth-child(6)::before{ content:'Width (cm)'; }
  .ev-detail .ev-boxgrid > div:nth-child(7)::before,
  .rm-detail .rm-boxgrid > div:nth-child(7)::before{ content:'Height (cm)'; }
  .ev-detail .ev-boxgrid > div:nth-child(1), .rm-detail .rm-boxgrid > div:nth-child(1),
  .ev-detail .ev-boxgrid > div:nth-child(2), .rm-detail .rm-boxgrid > div:nth-child(2),
  .ev-detail .ev-boxgrid > div:nth-child(8), .rm-detail .rm-boxgrid > div:nth-child(8){ grid-column:1 / -1; }
  .ev-detail .ev-boxgrid > div:nth-child(8):empty,
  .rm-detail .rm-boxgrid > div:nth-child(8):empty{ display:none; }
  .ev-detail .ev-boxgrid input, .ev-detail .ev-boxgrid select,
  .rm-detail .rm-boxgrid input, .rm-detail .rm-boxgrid select{
    width:100%; min-width:0; min-height:44px; box-sizing:border-box;
  }

  /* (b) batch view - the cardified weights table (weight-input rows only) */
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in),
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in){
    display:grid; grid-template-columns:1fr 1fr; gap:0 12px;
  }
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td{
    display:block; min-width:0; text-align:left; border-bottom:0; padding:7px 0;
  }
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td[data-label]::before,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td[data-label]::before{
    display:block; flex:none; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; text-align:left;
  }
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td:nth-child(1),
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td:nth-child(2),
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td:nth-child(8),
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td:nth-child(1),
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td:nth-child(2),
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td:nth-child(8){ grid-column:1 / -1; }
  /* the batch card shows EVERY field - retire the generic "Show more" glance */
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in):not(.rk-row-open) td.rk-more-cell,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in):not(.rk-row-open) td.rk-more-cell{ display:block !important; }
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td.rk-mt-cell,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td.rk-mt-cell{ display:none !important; }
  /* Full-width inputs with a VISIBLE border matching the create-view boxgrid
     fields (.ev-boxgrid/.rm-boxgrid inputs: 1px #d8dee4, radius 7px) so each
     box reads as a distinct field against the pale card. Desktop keeps its own
     table-input look untouched — this only applies inside the cardified rows
     <=1180px. */
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td input,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td input{
    width:100% !important; min-width:0; min-height:44px; box-sizing:border-box;
    border:1px solid #d8dee4; border-radius:7px; padding:8px 9px; background:#fff;
  }
  /* clear focus state — carrier accent + subtle ring (--ev-blue/--rm-red are
     defined on .ev-detail/.rm-detail, so they resolve here) */
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td input:focus{
    border-color:var(--ev-blue); box-shadow:0 0 0 3px rgba(31,162,224,.16); outline:none;
  }
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td input:focus{
    border-color:var(--rm-red); box-shadow:0 0 0 3px rgba(218,23,16,.14); outline:none;
  }
  /* the field labels above each box already say WEIGHT (G)/(KG)/L/W/H, so the
     inline g/kg/L/W/H placeholders read as phantom text — hide them on mobile.
     (Attribute is kept in the markup, so desktop is byte-for-byte unchanged.) */
  .ev-detail .ev-table.rms-stack tr:has(.ev-wg-in) td input::placeholder,
  .rm-detail .rm-table.rms-stack tr:has(.rm-wg-in) td input::placeholder{
    color:transparent;
  }

  /* page furniture: comfy action buttons, full-width settings card, tighter
     side margins than the desktop 24px (the panel margin is an inline style,
     hence the !important) */
  .ev-detail .ev-acts2, .rm-detail .rm-acts2{ padding:14px 12px 4px; }
  .ev-detail .ev-acts2 button, .rm-detail .rm-acts2 button{ min-height:44px; flex:1 1 auto; }
  .ev-detail .ev-setcard, .rm-detail .rm-setcard{ margin:12px; max-width:none; }
  .ev-detail .ev-panel, .rm-detail .rm-panel{ margin:12px !important; }
  .ev-detail .ev-dhead, .rm-detail .rm-dhead{ padding:14px 12px; }
}

/* =====================================================================
   55. MY MESSAGES channel filter — Amazon submenu expands IN PLACE (Item:
       mobile flyout clipped). Desktop keeps the sideways hover flyout
       (customerInbox.js injected styles: .ci-chansel-flyout absolute at
       right:100%, shown on .parent:hover) — on a phone that flew out past
       the fixed menu / viewport edge and the account entries were clipped.
       Here (<=1180px only) the flyout becomes a static, indented block inside
       the menu, toggled by tapping the parent row (customerInboxToggleSub
       adds .rk-sub-open; the fn no-ops on desktop). The #customerInbox id
       scope out-weighs the module's injected equal-specificity :hover rules.
       Desktop (>1180px) byte-for-byte unchanged.
   ===================================================================== */
@media (max-width: 1180px){
  .ci-chansel-menu{
    max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
    overflow-y:auto;
  }
  #customerInbox .ci-chansel-item.parent{ flex-wrap:wrap; }
  /* arrow reads "expandable" (points right), rotates down when open */
  #customerInbox .ci-chansel-item.parent .car{ transform:none; transition:transform .15s ease; }
  #customerInbox .ci-chansel-item.parent.rk-sub-open .car{ transform:rotate(90deg); }
  #customerInbox .ci-chansel-item.parent .ci-chansel-flyout,
  #customerInbox .ci-chansel-item.parent:hover .ci-chansel-flyout,
  #customerInbox .ci-chansel-flyout:hover{
    display:none; position:static; right:auto; top:auto; margin:4px 0 2px;
    flex:1 1 100%; width:100%; min-width:0; max-width:none !important;
    border:0; border-left:2px solid #e3eaf2; border-radius:0; box-shadow:none;
    padding:0 0 0 10px; background:transparent;
  }
  #customerInbox .ci-chansel-item.parent.rk-sub-open .ci-chansel-flyout{ display:block; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce){
  #customerInbox .ci-chansel-item.parent .car{ transition:none; }
}